En esta página

Conociendo el HTML

HTML (HyperText Markup Language o lenguaje de marcado de hipertexto) es el lenguaje de etiquetas que funciona como una de las piedras angulares de la World Wide Web.

Como vimos anteriormente, en la década de 1990 fue el desarrollo fundamental de la WEB y el HTML cobra sentido conjuntamente con los navegadores WEB o clientes WEB conocidos también como BROWSER.

Se trata de las aplicaciones que reciben la información, la interpretan y finalmente la muestran al usuario. Existen navegadores para diferentes dispositivos y plataformas. Cada uno con sus propias características, todos tiene la misma finalidad: ofrecerle al navegante una representación lo más fiel posible del recurso al que está accediendo, que, por lo general, será un sitio o una aplicación web.

👉 ¿Podés nombrar cuatro browsers que se utilices?

Entendiendo el HTML

Entre las características más importantes de HTML, destacamos que los elementos se representan en el código con etiquetas, las cuales se encierran mediante los símbolos:

menor (<) y mayor (>)

Estas etiquetas pueden tener atributos definidos en forma específica.

Con las etiquetas vamos a construir las estructuras necesarias para contener el contenido que queremos mostrar a travez del navegador (browser).

El browser, entonces, construye una representación de una página en memoria que se llama Document Object Model (DOM).

Para entender la estructura del DOM podemos ver el modelo en la siguiente imagen de wikipedia:

Anatomía del documento HTML

El HTML nos permitirá construir páginas WEB. El conjunto de páginas web será un sitio web. Cada página web se realizará con HTML y tendrá una estructura básica que será la anatomía del HTML:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Mi pagina de prueba</title>
  </head>
  <body>
    <img src="images/firefox-icon.png" alt="Mi imagen de prueba">
  </body>
</html>

En su estructura básica, vemos que un documento HTML tiene una primera línea de declaración de tipo de documento (<!DOCTYPE html>), un encabezado (<head>) y posteriormente un cuerpo (<body>).

En el encabezado, encontramos los elementos que describen el documento, como por ejemplo el título, y también etiquetas de metadatos (metadata) que pueden contener descripción, nombre del autor e idioma, entre otras opciones. También, en el encabezado, se suelen especificar los archivos que se incluyen o anexan al documento, como por ejemplo hojas de estilo o scripts que se ejecutan en la página del lado cliente

Partes de la anatomía del documento HTML

<!DOCTYPE html> — es el tipo de documento. Es un preámbulo requerido y debe ser incluido para que todo funcione correctamente. Por ahora, eso es todo lo que necesitas saber.
<html></html> — el elemento <html>. Este elemento encierra todo el contenido de la página entera y, a veces, se le conoce como el elemento raíz (root element).
<head></head> — el elemento <head>. Este elemento actúa como un contenedor de todo aquello que quieres incluir en la página HTML que no es contenido visible por los visitantes de la página. Incluye cosas como palabras clave (keywords), una descripción de la página que quieres que aparezca en resultados de búsquedas, código CSS para dar estilo al contenido, declaraciones del juego de caracteres, etc. De a poco iremmos profundizando estos temas.
<meta charset="utf-8"> — <meta>. Este elemento establece el juego de caracteres que tu documento usará en utf-8, que incluye casi todos los caracteres de todos los idiomas humanos. 🧠 Es importante no olvidar colocarlo en tus futuras páginas web.
<title></title> — el elemento <title> establece el título de tu página, que es el título que aparece en la pestaña o en la barra de título del navegador cuando la página es cargada, y se usa para describir la página cuando es añadida a los marcadores o como favorita.
<body></body> — el elemento <body>. Encierra todo el contenido que deseas mostrar a los usuarios web que visiten tu página, ya sea texto, imágenes, videos, juegos, pistas de audio reproducibles, y demás.

Etiqueta

Las etiquetas de HTML tienen la siguiete estructura:

<etiqueta> </etiqueta>

HTML nos ofrece muchas etiquetas para lograr diferentes estructuras de páginas.

Anatomía de una etiqueta

Veamos las partes de la anatomía de una etiqueta de HTML utilizando la siguietne imagen que fue extrída de MDN web docs

Las principales partes de nuestro elemento son:

La etiqueta de apertura: consiste en el nombre del elemento (en este caso, p), encerrado entre paréntesis angulares de apertura y cierre. Esta etiqueta de apertura marca dónde comienza el elemento o comienza a tener efecto. En este ejemplo, precede al comienzo del texto del párrafo.

El contenido: Este es el contenido del elemento. En este ejemplo, es el texto del párrafo.

La etiqueta de cierre: Es lo mismo que la etiqueta de apertura, excepto que incluye una barra diagonal antes del nombre del elemento. Esto indica dónde termina el elemento; en este caso, dónde finaliza el párrafo. No incluir una etiqueta de cierre es un error común de principiante, y puede conducir a extraños resultados.

Estas partes contituyen un elemento HTML

Entonces ¿qué es ? 🤔 Se trata de una etiqueta que nos permite estructurar texto en un párrafo.

Elementos anidados

Los elementos HTML pueden estar dentro de otros. A eso le llamamos elementos anidados. Recién vimos que la etiqueta p es la estructura de HTML para mostrar un texto organizado en un párrafo. Pero los párrafos tienen caracteres y esos caracteres pueden tener un formato especial como itálica y/o negrita.

- texto en itálica

<em>CET Nº 30</em>

Resultado:

CET Nº 30

- texto en negrita

<strong>CET Nº 30</strong>

Resultado:

CET Nº 30

Sabiendo el uso de la etiqueta p, la etiqueta em y la etiqueta strong podremos construir un elemento HTML anidado:

<p>Mi <em>escuela</em> es <strong>CET Nº 30</strong></p>

Resultado

Mi escuela es CET Nº 30

Hay una forma correcta e incorrecta de anidar. En el ejemplo anterior, primero abrimos el elemento p, luego abrimos el elemento em seguido de strong. Para un anidamiento adecuado, primero debemos cerrar el elemento em y luego strong, antes de cerrar el p.

Por lógica, un párrafo debe contener caracteres que pueden estar en itálica y/o negrita, pero estas, no pueden contenener un párrafo. Veamos el caso incorrecto:

Mi <em>escuela</em><p>es <strong>CET Nº 30</strong></p>

Atributos

Las etiquetas HTML tiene atributos.

Los atributos se utilizan para especificar ciertas características que tendrá el elemento HTML.

Para algunas etiquetas, hay atributos que son OBLIGATORIOS, es decir, que si no colocamos los atributos de la etiqueta el resultado será incorrecto.

Hay atributos GLOBALES, es decir, que pueden ser utilizado en la mayoría de las etiquetas. Por ejemplo: class, id, style, etc.

Es importante no solo conocer que hace una etiqueta particular, sino que también, conocer sus atributos y poder así sacar mejor provecha al uso de la etiqueta en si.

¿Cómo se vería un atributo en un elemento HTML?

De esta forma:

<p atributo="valor">Mi gato es muy gruñon</p>

En la etiqueta de apertura p se observa que antes de cerrar dicha etiqueta (>) se agrega el atributo seguido del valor: atributo="valor"

Elementos Block

Los elementos BLOCK, son aquellos que generan una línea que ocupa todo el ancho de la pantalla. Esta línea no se ve, pero ocupa espacio. Block define un bloque y hace que el resto de los elemento los empuje o hacía arriba o hacía abajo. Algunas etiquetas que son tipo bloque:

p
h1 h2 h3 h4 h5 h6
div
entre otros

Elementos inline

Los elementos INLINE son los que van a ocupar el espacio definido en la etiqueta de apertura y la etiqueta de cierre. Además, los elementos inline, pueden estar dentro de elementos de tipo block. Algunas etiquetas inline:

img
a

Introducción Enlace