Tutorial de HTML para principiantes

Si quieres convertirte en un webmaster y aprender a crear un sitio web, es posible que encuentres la perspectiva de llegar a dominar el HTML bastante desalentadora.

Sin embargo, esto es algo que no se puede evitar, ya que la gran mayoría de las páginas de aterrizaje del sitio web que visites habrán sido escritas y estructuradas utilizando elementos HTML. De hecho, más del 74% de los sitios web conocidos utilizan HTML, 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 se utilizan al codificar su sitio web.

¿Qué es HTML?

En términos simples, HTML representa el lenguaje de marcado estándar para crear páginas web en línea. Son las siglas de Hyper Text Markup Language (Lenguaje de Marcado de Hipertexto), y su función principal es establecer la estructura, el diseño y la presentación de las páginas individuales. Aunque los navegadores web no muestran directamente el lenguaje HTML, éste desempeña un papel fundamental para ayudar a crear un sitio visible, accesible y fácil de usar.

HTML también se apoya en una serie de elementos individuales, que poco a poco 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 alternas de contenido como encabezados, párrafos y ejemplos similares.

A continuación exploraremos estos elementos y su construcción con más detalle, al tiempo que 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 para el HTML es el diseño de las páginas individuales de aterrizaje que componen su sitio web. Esta no es la única aplicación de la popular herramienta de codificación, sin embargo, entender sus usos adicionales te ayudará a sacar el máximo provecho del lenguaje como nuevo webmaster. Así que, aquí están algunas de las formas adicionales en las que se puede aplicar HTML:

• Crear elementos personalizables dentro de una página existente. Si tiene intención de permitir los comentarios de los blogs o la publicación de contenidos generados por los usuarios en su sitio web, puede utilizar fragmentos de código HTML para habilitarlo. Estos elementos permitirán a los usuarios enfatizar palabras clave, incrustar enlaces y dar formato a los comentarios en función de las restricciones que usted ponga como moderador.
• Crear contenido adicional para el correo electrónico. El correo electrónico también utiliza HTML como lenguaje para los mensajes de texto enriquecido, que cuentan con enlaces, texto y una variedad de otros elementos que no pueden aparecer sólo en texto plano. Por lo tanto, si usted está buscando para compartir un libro electrónico que se relaciona con su sitio web a través de correo electrónico, puede utilizar HTML para optimizar el impacto de su mensaje.
• Entender los documentos de ayuda fuera de línea que se instalan en el equipo. Curiosamente, el HTML se utiliza como formato para los documentos de ayuda basados en el ordenador que son accesibles sin conexión. El conocimiento básico de HTML puede, por lo tanto, ayudarle a entender los problemas con su hardware y resolverlos más rápidamente, lo que a su vez puede asegurar que usted es capaz de restaurar su sitio web más rápido en los casos en que se ha ido fuera de línea.

Estructura de la página HTML

Antes de que pueda construir una página html, necesita los fundamentos en su lugar.

Típicamente, una página se compone de tres elementos estructurales:

1. Encabezado: El encabezado contiene contenido relevante para todas las páginas de su sitio, como un logotipo o el nombre del sitio web, y un sistema de navegación. La cabecera se ve en cada página.
2. Cuerpo principal: Ocupa el área más grande de 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 se sitúa en la parte inferior.

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

Aquí tienes otro ejemplo, usando etiquetas de encabezado y la etiqueta de párrafo para estructurar el contenido estéticamente. Además, hemos lanzado 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 ayudan a estructurar las páginas web.

A continuación, echaremos un vistazo a 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 encabezado. Estos se construyen con etiquetas HTML, y el lenguaje permite actualmente hasta seis elementos de tamaño variable que también permiten estructurar el contenido con títulos adicionales, subtítulos y líneas resaltadas de texto en negrita. Para iniciar el encabezamiento, basta con anteponer al texto correspondiente la etiqueta <h1> , <h2> , <h3> , <h4> , <h5> o <h6> en función del tamaño deseado.

A continuación, debe aplicar una etiqueta de cierre al final del encabezamiento 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 aterrizaje de su sitio web:

Aquí se ven claramente los distintos tamaños de los encabezados variables, así como el hecho de que el navegador añade una línea antes y después del encabezado. También notarás que la etiqueta de cierre al final del texto del encabezado tiene una estética ligeramente diferente, pero esto lo cubriremos en el siguiente capítulo cuando veamos el uso de etiquetas para definir elementos específicos.

Etiquetas de párrafo

Un principio similar se aplica a las etiquetas de párrafo inicial, que se representan con <p>. Esto permite estructurar el contenido y dividirlo en párrafos relevantes, lo que a su vez se traduce en una experiencia de lectura más fácil y fluida. Una vez más, la etiqueta <p> debe colocarse al principio del texto pertinente, antes de aplicar la etiqueta de cierre alternativo al final para completar el efecto. Sin embargo, a diferencia de las etiquetas de encabezamiento, no hay varias numéricas que puedan alterar el tamaño del texto que aparece en el párrafo.

Fuera del formato HTML, esto romperá 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 otras que utilizan un formato diferente y tomas de cierre alternativas. Por ejemplo, los saltos de línea, que crean una distinción en la que las líneas de texto se rompen y continúan en la línea siguiente. Existe una diferencia fundamental entre los saltos de línea y los párrafos en el ámbito de HTML, ya que mientras estos últimos son elementos de bloque estándar que contienen texto, los primeros crean una separación dentro de un elemento <p> existente.

Por ello, los saltos de línea representan un elemento vacío en HTML y, por tanto, no están definidos por etiquetas de apertura o cierre. En su lugar, están representados por la etiqueta <br />, que puede insertarse en elementos <p> existentes para romper el texto y potencialmente resaltar piezas importantes de información. El único espacio entre el carácter <be> y la barra diagonal es crucial, ya que, de lo contrario, la etiqueta no es reconocible en formato HTML.

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

Como puede ver, puede aplicar saltos de línea tantas veces como quiera dentro de un elemento de párrafo existente, siempre que aporten valor y faciliten la digestión de la información. También verá que las etiquetas de apertura y cierre del párrafo no se modifican, y que las etiquetas de salto de línea se utilizan para modificar la disposición del texto incluido en su interior.

Este es uno de los ejemplos de cómo se pueden utilizar las etiquetas HTML para modificar los elementos existentes, lo que desempeña un papel fundamental a la hora de definir la disposición visual de sus páginas y contenidos web.

Líneas horizontales

Del mismo modo, hay otras etiquetas que se pueden utilizar dentro del elemento <p> o para separar aún más los cuerpos de texto en su página web. Una de las más utilizadas es la etiqueta <hr>, que ayuda a crear un elemento vacío que dibuja una línea visual y horizontal entre secciones alternas de un documento en línea. Puede querer 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 ruptura entre los caracteres hr y la barra oblicua resalta 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á el siguiente visual:

Etiquetas de imagen

Las etiquetas de imagen también representan elementos vacíos en HTML, lo que significa una vez más que no presentan una etiqueta de cierre. Como sólo contienen atributos relacionados con la URL de la imagen que está incrustando en el sitio, se definen simplemente con la etiqueta <img > al principio del elemento. Pueden colocarse en cualquier lugar de su sitio web, aunque no es habitual incluirlas en elementos existentes, como párrafos o encabezados. Así es como se presenta una etiqueta de imagen HTML típica:

También debe proporcionar un texto alternativo para su imagen, que ayude a la gente a verla en caso de tiempos de carga lentos o el uso de un lector de pantalla. De este modo, si el navegador no encuentra la imagen, mostrará el valor del atributo alternativo a los espectadores. Esto una vez más utiliza la etiqueta de imagen, pero incluye un conjunto diferente de atributos:

Elementos HTML

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

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

Definición de elementos HTML

Al utilizar ejemplos como los encabezados y los párrafos, la aplicación correcta de las etiquetas de inicio y cierre es crucial. Es la etiqueta de inicio (como <h1> o <p>) la que define el elemento en cuestión, por ejemplo, mientras que la etiqueta de cierre garantiza que este elemento no se continúe en el resto de la página web. Si no se utiliza la etiqueta de cierre </ p> al final de un 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, aparte del hecho de que las primeras presentan una barra inclinada antes de los caracteres correspondientes. Así, en el caso de un título <h1>, la etiqueta de cierre será </ h1>, mientras que para los párrafos siempre se utilizará </ p> para definir la ruptura del texto. Esto requiere atención al detalle mientras se codifica, y es importante tener en cuenta al programar los encabezados que el número que se utiliza (como h1 o h2) se aplica tanto en las etiquetas de inicio como en las de cierre.

Utilización de elementos HTML anidados

A estas alturas, está 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 visto cómo estos elementos pueden ser formados y utilizados para estructurar el contenido en línea, y vamos a continuar esto ahora mirando a los elementos HTML anidados.

Así como los elementos vacíos y las etiquetas independientes (como <br / >pueden ser incorporados en los elementos HTML definidos, los llamados elementos anidados también pueden ser alojados dentro del contenido, tales como títulos y párrafos. Estos incluyen ejemplos como la letra negrita y cursiva y el texto subrayado, mientras que pueden aplicarse para añadir personalidad a su contenido y atraer la atención del lector a puntos específicos de interés.

Texto en negrita, cursiva y tachado en HTML

Digamos que quiere resaltar una palabra dentro de un elemento de párrafo existente. Puedes conseguirlo poniéndola en negrita, utilizando simples etiquetas dentro del elemento estándar <p>. Usando HTML, programarás esto de la siguiente manera:

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

Ahora, digamos que también te gustaría cambiar la tipografía de esta palabra para que también esté en cursiva. Esto se puede conseguir simplemente añadiendo otro elemento anidado, que debería codificarse así:

Como puede ver, las etiquetas de inicio y cierre de la cursiva simplemente se han incorporado al elemento <p>. Esto transformará ahora el contenido dentro del elemento para que aparezca de la siguiente manera:

Por supuesto, usted puede decidir que prefiere resaltar esta palabra de una manera diferente. Para ello, puede utilizar un elemento anidado alternativo, como el tachado (que está representado por las etiquetas <s> y </s>. Estas etiquetas pueden aplicarse del mismo modo dentro del elemento <p>, apareciendo así en HTML:

En este caso, el texto aparecerá así en su documento o página de destino:

Esto ofrece una visión de los elementos que pueden formar las etiquetas, que a su vez definen la estructura de tus 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 bloques de construcción que construyen y definen los elementos, entonces los atributos HTML se pueden utilizar para personalizar sus características (como el estilo, el color y el idioma. Todos los elementos HTML tienen atributos centrales, que proporcionan información básica y se especifican siempre dentro de la etiqueta stat. Suelen venir en pares, por lo que a menudo aparecerán en el siguiente formato: name=»value.»

En términos sencillos, el nombre representa la propiedad que se quiere establecer, mientras que el valor se refiere al criterio específico que se quiere incorporar.

Hay un gran número de atributos que se pueden aplicar a sus elementos HTML, pero los más relevantes para los webmasters principiantes son:

El atributo ‘lang’

El atributo más básico define el idioma del documento y sus elementos. Se declara mediante el atributo ‘lang’ y, aunque es fácil que se pase por alto, tiene la ventaja de hacer el contenido más accesible para los lectores de pantalla y los motores de búsqueda. Normalmente se presenta al principio del documento con el siguiente formato:

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

El atributo ‘align’

Ya hemos tocado el formato de los atributos HTML (name=»value»), y la mejor encarnación de esto ocurre cuando usted trata de alinear el contenido dentro de sus elementos. Usted 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, ‘center’ es el valor del atributo, aunque tiene la opción de alinear su texto a la izquierda o a la derecha.

Esto alineará sus elementos <p> en el centro de la página, y creará un diseño uniforme para adaptarse 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 tanto enlaces entrantes como salientes. Construir una cartera de enlaces que incluya backlinks a páginas de destino internas también es una estrategia viable, por lo que tendrá que aprender a codificarlos en HTML.

Los enlaces HTML se definen con la etiqueta <a>, que incluye el enlace de destino junto con el texto de anclaje afiliado que albergará la URL. Es el atributo que especifica la dirección del sitio, sin embargo, éste se incorpora como parte de la etiqueta de inicio. Se codifica en HTML como sigue:

Esto destaca claramente la distinción entre la etiqueta de inicio 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 dar vida a su sitio web al tiempo que ayuda a crear contrastes importantes y una fuerte estética de diseño. En HTML, un color puede especificarse utilizando su nombre, aunque también es posible utilizar un valor RGB o HEX para lograr este objetivo. La primera opción es la más fácil de seguir, sin embargo, mientras que también se puede aplicar a los títulos, párrafos y otros elementos en su página.

Este es un atributo de estilo, con su elección de color que 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, hay una clara distinción entre las etiquetas de inicio y cierre que definen el elemento, mientras que este es uno de los atributos más fáciles de aplicar en HTML. También destaca el formato name=»value de los atributos HTML, lo que hace que el proceso de aprendizaje, y la aplicación de estos sea mucho más fácil 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 sencillos y aplicar sus conocimientos teóricos para resolver los desafíos prácticos.

En el ejercicio que se detalla a continuación, hemos presentado un texto excepto y hemos pedido que se formateen varios aspectos utilizando HTML. Utiliza la guía y todo lo que has aprendido hasta ahora para completar el reto mientras te preparas para codificar tu propio sitio web.

Preguntas:

1. Completa el elemento de cabecera con la etiqueta de cierre correcta.
2. Haz la cabecera en negrita.
3. Inserta una línea horizontal bajo la cabecera.
4. Utiliza el atributo de color y sombrea «Gracias por visitarnos» en verde
5. Inserta este hipervínculo (https://www.w3schools.com/html/) en el texto de anclaje «Aprende más.»
6. En la cabecera de la página, utiliza el formato name=»value» para alinear los párrafos a la izquierda

Estadísticas y datos del lenguaje HTML

1. Los elementos HTML, head y body han formado parte de la especificación HTML desde mediados de la década de los noventa, y hasta hace unos años, eran los principales elementos utilizados para dar estructura a los documentos HTML. Sin embargo, la situación ha cambiado drásticamente en los últimos años, ya que HTML5 ha añadido un montón de nuevas etiquetas que pueden utilizarse para añadir 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 «doctype»). En los navegadores, el doctype ayuda a definir el modo de representación. HTML5 no define una DTD; por lo tanto, en HTML5 la declaración de doctype es más simple y corta.
3. Los navegadores móviles han adoptado completamente HTML5, por lo que crear proyectos preparados para 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 etiquetas meta geniales que también le permiten optimizar para móviles.
4. El 78% de los desarrolladores de contenido están 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 un montón de grandes APIs que le permiten construir una mejor experiencia de usuario y una aplicación web más robusta y dinámica – aquí hay una lista rápida de las APIs nativas:
   • Arrastrar y soltar (DnD)
   • Base de datos de almacenamiento fuera de línea
   • Gestión del historial del navegador
   • Edición de documentos
   • Reproducción multimedia programada
6. HTML5 no está controlado por una 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 añadir todas las funciones y características que puedan.
7. En comparación con otros navegadores, cada actualización de Google Chrome se asegura de incluir soporte para HTML5. Además, el reproductor por defecto de YouTube es ahora 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 Latinoamérica – 70%
   • América del Sur – 61%
   • ASPAC – 60%
   • Australia – 60%
   • Europa – 59%
   • África -. 50%

Conclusión

Si bien HTML fue creado en 1991 (con la primera versión del lenguaje de codificación lanzada posteriormente en 1995), se ha convertido rápidamente en una herramienta fundamental para el diseño de sitios web funcionales y visualmente atractivos. El nivel de influencia de HTML sigue evolucionando también, con la última iteración (HTML5) 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ás para establecer un sitio web exitoso, visible y, en última instancia, competitivo.