Si quieres convertirte en webmaster y aprender Cómo crear un sitio web, la perspectiva de familiarizarse con HTML puede resultarle bastante desalentadora.

Sin embargo, esto es algo que no se puede evitar, ya que la gran mayoría de las páginas de destino de sitios web que visita habrán sido escritas y estructuradas utilizando elementos HTML. De hecho, HTML ahora es utilizado por más del 74% de todos los sitios web conocidos, mientras que este lenguaje también ayuda a mejorar todo, desde el diseño de su sitio hasta la calidad del contenido que presenta.

En esta guía, exploraremos los principios básicos de HTML y sus posibles aplicaciones, antes de ver ejemplos de los elementos individuales que utiliza al codificar su sitio web.

¿Qué es HTML?

En lenguaje sencillo, HTML representa el lenguaje de marcado estándar. para crear páginas web en línea. Significa lenguaje de marcado de hipertexto y su función principal es establecer la estructura, el diseño y la presentación de páginas de destino individuales. Si bien los navegadores web no muestran directamente el lenguaje HTML, éste desempeña un papel fundamental a la hora de ayudar a crear un sitio visible, accesible y fácil de usar.

HTML también se basa en una serie de elementos individuales que gradualmente construyen páginas web, estructuran la presentación del contenido y dan vida a su sitio web. Estos elementos se crean y contienen dentro de "etiquetas", que definen piezas alternativas de contenido, como títulos, párrafos y ejemplos similares.

Exploraremos estos elementos y su construcción con más detalle a continuación, y también veremos cómo se pueden personalizar para introducir color, enlaces y tipografía variable en su sitio web.

¿Dónde se utiliza HTML?

Como podemos ver, la aplicación más común de HTML es el diseño de las páginas de destino individuales que componen su sitio web. Esta no es la única aplicación de la popular herramienta de codificación; sin embargo, comprender sus usos adicionales le ayudará a aprovechar al máximo el lenguaje como nuevo webmaster. Entonces, estas son algunas de las formas adicionales en que se puede aplicar HTML:

• Crear elementos personalizables dentro de una página existente. Si tiene la intención de permitir comentarios de publicaciones de blog o la publicación de contenido generado por el usuario en su sitio web, puede utilizar fragmentos de código HTML para habilitarlo. Estos elementos permitirán a los usuarios enfatizar palabras clave, insertar enlaces y dar formato a los comentarios según las restricciones que usted establezca como moderador.
• Crear contenido adicional para correo electrónico. El correo electrónico también utiliza HTML como lenguaje para mensajes de texto enriquecido, que incluyen enlaces, texto y una variedad de otros elementos que no pueden aparecer únicamente en texto sin formato. Por lo tanto, si desea compartir un libro electrónico relacionado con su sitio web a través del correo electrónico, puede utilizar HTML para optimizar el impacto de su mensaje.
• Comprender los documentos de ayuda sin conexión que están instalados en su computadora. Curiosamente, HTML se utiliza como formato para documentos de ayuda informáticos a los que se puede acceder sin conexión. Por lo tanto, un conocimiento básico de HTML puede ayudarle a comprender los problemas con su hardware y resolverlos más rápido, lo que a su vez puede garantizar que pueda restaurar su sitio web más rápidamente en los casos en que se haya desconectado.

estructura de la página HTML

Antes de poder crear una página HTML, necesita tener los conceptos básicos establecidos.

Normalmente, una página estará compuesta por tres elementos estructurales:

1. Encabezamiento: El encabezado contiene contenido relevante para todas las páginas de su sitio, como un logotipo o nombre del sitio web, y un sistema de navegación. El encabezado se ve en cada página.
2. Cuerpo principal: Ocupa el área más grande en una página web. Contiene contenido específico de la página que se está viendo.
3. Pie de página: El contenido del pie de página suele incluir información de contacto, una dirección de envío o avisos legales. Al igual que el encabezado, el pie de página aparece en todas las páginas, pero está ubicado en la parte inferior.

Así es como se ven esos elementos estructurales básicos cuando se unen:

Aquí hay otro ejemplo, usando etiquetas de encabezado y etiquetas de párrafo para estructurar el contenido estéticamente. Además, hemos incluido una etiqueta de pie de página para el contenido debajo del cuerpo principal de una página:

Etiquetas HTML

El punto de partida de cualquier código HTML son las etiquetas individuales, que se pueden utilizar para crear todos los elementos cruciales y ayudar a estructurar sus páginas web.

A continuación, veremos las etiquetas más comunes antes de explorar cómo se pueden aprovechar para generar elementos específicos en la página:

Etiquetas de encabezado

Todos los documentos en línea, incluidas las páginas web, comienzan con un título. Estos se construyen utilizando etiquetas HTML, y el lenguaje actualmente permite hasta seis elementos de tamaño variable que también le permiten estructurar su contenido con títulos y subtítulos adicionales y líneas resaltadas de texto en negrita. Para comenzar su título, simplemente anteponga el texto relevante con el , , , , o etiqueta según el tamaño deseado.

Luego debes aplicar una etiqueta de cierre al final del encabezado para encapsular el texto, y se mostrará de la siguiente manera en formato HTML:

Una vez confirmado, esto se traducirá en la siguiente estética en la página de inicio de su sitio web:

Aquí, los distintos tamaños de los títulos variables son claramente visibles, al igual que el hecho de que el navegador agrega una línea antes y después del título. También notará que la etiqueta de cierre al final del texto del encabezado tiene una estética ligeramente diferente, pero la cubriremos en el siguiente capítulo mientras buscamos usar etiquetas para definir elementos específicos.

Etiquetas de párrafo

Se aplica un principio similar a las etiquetas de párrafo inicial, que se representan mediante . Esto le permite estructurar su contenido y dividirlo en párrafos relevantes, lo que a su vez se traduce en una experiencia de lectura más sencilla y fluida. Una vez más, el La etiqueta debe colocarse al principio del texto relevante, antes de que se aplique la etiqueta de cierre alternativa al final para completar el efecto. Sin embargo, a diferencia de las etiquetas de encabezado, no existen variables numéricas que puedan alterar el tamaño del texto que aparece en el párrafo.

Fuera del formato HTML, esto dividirá el texto de la siguiente manera en su página web terminada:

Etiquetas de salto de línea

Los primeros ejemplos representan las etiquetas HTML más básicas, pero hay otros que utilizan un formato diferente y tomas de cierre alternativas. Tomemos como ejemplo los saltos de línea, que crean una distinción en la que las líneas de texto se dividen y continúan en la línea siguiente. Existe una diferencia fundamental entre los saltos de línea y los párrafos en el campo HTML, ya que mientras estos últimos son elementos de bloque estándar que contienen texto, los primeros crean una separación dentro de un formato existente. elemento.

Debido a esto, los saltos de línea representan un elemento vacío en HTML y, por lo tanto, no están definidos ni por etiquetas de apertura ni de cierre. En cambio, están representados por el etiqueta, que se puede insertar en existentes elementos para dividir el texto y potencialmente resaltar piezas importantes de información. El único espacio entre el carácter. y la barra diagonal es crucial, ya que de lo contrario, la etiqueta no será reconocible en formato HTML.

Una vez aplicado, esto dividirá el texto de la siguiente manera:

Como puede ver, puede aplicar saltos de línea tantas veces como desee dentro de un elemento de párrafo existente, siempre que agreguen valor y hagan que la información sea más fácil de digerir. También verá que las etiquetas de los párrafos de apertura y cierre permanecen sin cambios, con etiquetas de salto de línea utilizadas para modificar el diseño del texto incluido.

Este es uno de los ejemplos de cómo se pueden usar etiquetas HTML para alterar elementos existentes, lo que juega un papel clave en la definición del diseño visual de sus páginas web y su contenido.

Lineas horizontales

De manera similar, existen otras etiquetas que se pueden usar dentro del elemento o para separar aún más cuerpos de texto en su página web. Uno de los más utilizados es el etiqueta, que ayuda a crear un elemento vacío que dibuja una línea horizontal visual entre secciones alternativas de un documento en línea. Es posible que desees colocar una línea entre dos cuerpos de texto, por ejemplo, para reenfocar al lector o simplemente introducir un nuevo elemento visual. Así es como se crea una ruptura de este tipo en HTML:

Aquí, la separación entre los caracteres hr y la barra diagonal resaltan la construcción de un elemento vacío, mientras que una vez más no se requiere ninguna etiqueta de cierre para completar el efecto. Esto creará la siguiente imagen:

Etiquetas de imagen

Las etiquetas de imagen también representan elementos vacíos en HTML, lo que una vez más significa que no incluyen una etiqueta de cierre. Como solo contienen atributos relacionados con la URL de la imagen que está incrustando en el sitio, se definen simplemente por el etiqueta al comienzo del elemento. Estos se pueden colocar en cualquier lugar de su sitio web, aunque es inusual incluirlos en elementos existentes como párrafos o encabezados. Así es como se presentará una etiqueta de imagen HTML típica:

También debes proporcionar texto alternativo para tu imagen, lo que ayuda a las personas a verla en caso de tiempos de carga lentos o el uso de un lector de pantalla. De esta manera, si el navegador no puede encontrar una imagen, mostrará el valor del atributo alternativo a los espectadores. Una vez más, esto utiliza la etiqueta de imagen, pero incluye un conjunto diferente de atributos:

Elementos HTML

Anteriormente, vimos cómo se usan etiquetas HTML simples para definir elementos en la página, y al mismo tiempo exploramos cómo se pueden personalizar aún más mediante el uso de elementos vacíos que contienen etiquetas de imagen y salto de línea. Esto nos ayuda a comprender la relación que existe entre etiquetas y elementos, y cómo se pueden usar para definir diferentes tipos de contenido en su sitio web.

Si bien todos los aspectos del lenguaje HTML están representados por una etiqueta, por ejemplo, un elemento definido que incluye contenido debe tener una etiqueta de inicio y una de cierre. Entonces, los títulos y párrafos son elementos HTML porque usan etiquetas de inicio y cierre para encapsular y aumentar el texto relevante. Por el contrario, los elementos vacíos contienen atributos o ningún contenido, lo que permite utilizarlos dentro de elementos existentes sin necesidad de una etiqueta de cierre.

Definición de elementos HTML

Cuando se utilizan ejemplos como títulos y párrafos, la aplicación correcta de las etiquetas de inicio y cierre es crucial. Es la etiqueta inicial (como o ) que define el elemento en cuestión, por ejemplo, mientras que la etiqueta de cierre garantiza que este elemento no continúe en el resto de la página web. Si no utiliza el cierre etiqueta al final del párrafo deseado, por ejemplo, el texto aparecerá en un solo bloque que es antiestético y extremadamente difícil de leer.

Todas las etiquetas de cierre son idénticas a las etiquetas de inicio, salvo el hecho de que las primeras presentan una barra diagonal antes de los caracteres relevantes. Entonces en el caso de un encabezado, la etiqueta de cierre será , mientras que para los párrafos siempre usarás para definir la ruptura en el texto. Esto requiere atención a los detalles al codificar, y es importante tener en cuenta al programar encabezados que el número que usa (como h1 o h1) se aplica tanto en la etiqueta inicial como en la de cierre.

Usar elementos HTML anidados

En esta etapa, queda claro que los documentos HTML y las páginas web están formados por un árbol de varios elementos, que sirven como bloques de construcción para una serie de activos. También hemos analizado cómo se pueden formar y utilizar estos elementos para estructurar el contenido en línea, y continuaremos con esto ahora analizando los elementos HTML anidados.

Así como elementos vacíos y etiquetas independientes (como se pueden incorporar en elementos HTML definidos, los llamados elementos anidados también se pueden alojar dentro de contenidos como títulos y párrafos. Estos incluyen ejemplos como letras en negrita y cursiva y texto subrayado, y se pueden aplicar para agregar personalidad a su contenido y atraer la atención del lector hacia puntos de interés específicos.

Texto en negrita, cursiva y tachado en HTML

Digamos que desea resaltar una palabra dentro de un elemento de párrafo existente. Puedes lograr esto poniéndolo en negrita, usando etiquetas simples dentro del estándar. elemento. Usando HTML, programará esto de la siguiente manera:

Aquí, el elemento anidado tiene una etiqueta de inicio y de cierre, cada una de las cuales sigue un formato similar a los asociados con encabezados y párrafos. Se pueden utilizar sin problemas dentro de elementos existentes y, en este caso, producirán los siguientes resultados:

Ahora, digamos que también le gustaría cambiar la tipografía de esta palabra para que también esté en cursiva. Esto se puede lograr simplemente agregando otro elemento anidado, que debe codificarse así:

Como puede ver, las etiquetas en cursiva inicial y final simplemente se han incorporado al elemento. Esto ahora transformará el contenido dentro del elemento para que aparezca de la siguiente manera:  

Por supuesto, puedes decidir que prefieres resaltar esta palabra de una manera diferente. Por lo tanto, puede utilizar un elemento anidado alternativo, como el tachado (que está representado por las etiquetas y . Estas etiquetas se pueden aplicar de la misma manera dentro del elemento, que aparece de la siguiente manera en HTML:

En este caso, el texto aparecerá de la siguiente manera en su documento o página de destino:  

Esto ofrece una visión de los elementos que pueden estar formados por etiquetas, lo que a su vez define la estructura de sus páginas web y el contenido que presentan. No sólo esto, sino que también se pueden utilizar elementos vacíos y anidados para definir aún más su contenido.

Atributos HTML

Si las etiquetas son los componentes básicos que construyen y definen elementos, entonces los atributos HTML se pueden usar para personalizar sus características (como estilo, color e idioma). Todos los elementos HTML tienen atributos centrales, que proporcionan información central y siempre se especifican dentro de la etiqueta estadística. Suelen venir en pares, por lo que suelen aparecer en el siguiente formato: nombre=”valor”.

En términos simples, el nombre representa la propiedad que desea establecer, mientras que el valor se relaciona con los criterios específicos que desea incorporar.

Hay una gran cantidad de atributos que se pueden aplicar a sus elementos HTML, pero los que son más relevantes para los webmasters novatos son:

El atributo 'idioma'

El atributo más básico define el idioma del documento y sus elementos. Se declara utilizando el atributo 'lang' y, aunque se pasa por alto fácilmente, tiene la ventaja de hacer que el contenido sea más accesible para los lectores de pantalla y los motores de búsqueda. Generalmente se presentará al inicio del documento en el siguiente formato:

Después del atributo lang, las dos primeras letras especifican el idioma (que en este caso es inglés). Después del guión, las dos letras siguientes establecen el dialecto, aunque esto no estará presente en todos los idiomas. Es importante que obtenga este atributo correctamente si desea llegar con éxito a su audiencia.

El atributo 'alinear'

Ya hemos tocado el formato de los atributos HTML (nombre=”valor”), y la mejor encarnación de esto ocurre cuando intentas alinear el contenido dentro de tus elementos. Puede decidir centrar todos los párrafos en una página específica, por ejemplo, siendo la alineación la propiedad que desea establecer. Posteriormente, 'centro' es el valor del atributo, aunque tienes la opción de alinear tu texto a la izquierda o a la derecha.

Esto alineará su elementos en el centro de la página y cree un diseño uniforme que se adapte a la naturaleza específica de su sitio web (ver más abajo):

El atributo 'href'

Si vas a construir un sitio web visible, es importante que incorpores enlaces tanto entrantes como salientes. Crear una cartera de enlaces que incluya vínculos de retroceso a páginas de destino internas también es una estrategia viable, por lo que deberá aprender a codificarlos en HTML.

Los enlaces HTML se definen con la etiqueta, que incluye el enlace de destino junto con el texto ancla afiliado que albergará la URL. Es el atributo 'href' el que especifica la dirección del sitio; sin embargo, se incorpora como parte de la etiqueta de inicio. Está codificado en HTML de la siguiente manera:

Esto resalta claramente la distinción entre la etiqueta inicial y la de cierre, y se traducirá de la siguiente manera en su página de destino:

El atributo 'color'

Este es otro atributo importante, ya que el uso del color puede darle vida a su sitio web y al mismo tiempo ayudar a crear contrastes importantes y una estética de diseño sólida. En HTML, un color se puede especificar mediante su nombre, aunque también es posible utilizar un valor RGB o HEX para lograr este objetivo. Sin embargo, la primera opción es la más fácil de seguir, aunque también se puede aplicar a títulos, párrafos y otros elementos de su página.

Este es un atributo de estilo, donde su elección de color representa el valor que le gustaría establecer. Al aplicar el color rojo al encabezado principal, por ejemplo, se verá así:

Una vez aplicado, este elemento aparecerá de la siguiente manera en su sitio web:

Una vez más, existe una clara distinción entre las etiquetas de inicio y cierre que definen el elemento, aunque este es uno de los atributos más fáciles de aplicar en HTML. También resalta aún más el formato nombre=”valor de los atributos HTML, lo que facilita mucho el proceso de aprendizaje y aplicación en todo su sitio web.

Pruébelo usted mismo

Con una comprensión básica de HTML y sus elementos individuales, el siguiente paso es emprender algunos proyectos simples y aplicar sus conocimientos teóricos para resolver desafíos prácticos.  

En el ejercicio que se detalla a continuación, presentamos un texto excepto y solicitamos formatear varios aspectos usando HTML. Utilice la guía y todo lo que ha aprendido hasta ahora para completar el desafío mientras se prepara para codificar su propio sitio web.

Preguntas:

1. Complete el elemento del encabezado con la etiqueta de cierre correcta.
2. Pon el encabezado en negrita.
3. Inserta una línea horizontal debajo del encabezado.
4. Utilice el atributo de color y sombree 'Gracias por visitar' en verde
5. Inserte este hipervínculo (https://www.w3schools.com/html/) en el texto ancla "Más información".
6. En el encabezado de la página, use el formato nombre=”valor” para alinear los párrafos a la izquierda.

Estadísticas y hechos del lenguaje HTML

1. Los elementos HTML, head y body han sido parte de la especificación HTML desde mediados de la década de 1990 y, hasta hace unos años, eran los elementos principales utilizados para dar estructura a los documentos HTML. Sin embargo, la situación ha cambiado dramáticamente en los últimos años a medida que HTML5 ha agregado una serie de etiquetas nuevas que pueden usarse para agregar un rico significado semántico a la estructura de un documento HTML.
2. Los documentos HTML deben comenzar con una Declaración de tipo de documento (informalmente, un "tipo de documento"). En los navegadores, el tipo de documento ayuda a definir el modo de representación. HTML5 no define una DTD; por lo tanto, en HTML5 la declaración de tipo de documento es más simple y corta.
3. Los navegadores móviles han adoptado HTML5 por completo, por lo que crear proyectos listos para dispositivos móviles es tan fácil como diseñar y construir para sus pantallas táctiles más pequeñas; de ahí la popularidad del diseño responsivo. Hay algunas metaetiquetas excelentes que también le permiten optimizar para dispositivos móviles.  
4. El 78% de los desarrolladores de contenidos está de acuerdo en que la estructura es adecuada para crear aplicaciones móviles y el 68% dice que es adecuada para diseñar todo tipo de aplicaciones.
5. HTML5 también viene con una gran cantidad de excelentes API que le permiten crear una mejor experiencia de usuario y una aplicación web más robusta y dinámica; aquí hay una lista rápida de API nativas:
   • Arrastrar y soltar (DnD)
   • Base de datos de almacenamiento sin conexión
   • Gestión del historial del navegador
   • Edición de documentos
   • Reproducción multimedia programada
6. HTML5 no está controlado por una sola empresa. Una de sus mejores características radica en que es un estándar abierto. Los desarrolladores tienen la libertad de dejar fluir su creatividad y agregar tantas funciones y características como sea posible.
7. En comparación con otros navegadores, cada actualización de Google Chrome se asegura de incluir soporte para HTML5. Además, el reproductor predeterminado de YouTube ahora es HTML5 y los anuncios Flash de Google se están convirtiendo a HTML5.
8. Uso de HTML5 por parte de los desarrolladores (por región):
   • América del Norte y América Latina – 70%
   • América del Sur – 61%
   • ASPAC – 60%
   • Australia - 60%
   • Europa - 59%
   • África – 50%

Para Concluir

Si bien HTML se creó apenas en 1991 (la primera versión del lenguaje de codificación se lanzó posteriormente en 1995), rápidamente se ha convertido en una herramienta fundamental en el diseño de sitios web funcionales y visualmente atractivos. El nivel de influencia de HTML también continúa evolucionando, y la última versión (HTML5) está siendo adoptada por un número creciente de sitios web en todo el mundo.

En este sentido, aprender los elementos básicos de HTML y cómo aplicarlos es el paso más importante que dará para establecer un sitio web exitoso, visible y, en última instancia, competitivo.