HTML por sus siglas en inglés; HyperText Markup Language. Es el lenguaje utilizado para la maquetación de un sitio web. HTML describe cada una de las partes que compone tu sitio web.
Todos los sitios web que tu ves en internet hoy en día, tienen en su estructura los componentes más básicos de HTML.
Este es el núcleo fundamental para la estructura de tu sitio web:
<!DOCTYPE html>
<html>
<head>
<title>My Website<title>
</head>
<body>
<h1>My Website</h1>
<p>This is my very first website</p>
</body>
</html>
A continuación se presenta un escenario real, del lado derecho con el uso del editor Sublime se introduce el código de maquetación HTML y del lado derecho verás lo que el usuario está visualizando usando el navegador de Chrome.
<!DOCTYPE html>
Le dice al navegador qué tipo de documento es.
<html></html>
Dentro de las etiquetas de html es donde escribiremos todo la maquetación del sitio web.
<head></head>
Es hijo de la etiqueta <html> y te da la información sobre la página, no necesariamente se muestra en el sitio web.
<title></title>
Este sera el nombre de tu sitio web que se desplegará en la pestaña del navegador.
<body></body>
Este es el cuerpo de tu sitio web. Todo lo que quieres que se muestre en el área de la ventana del navegador tendrá que incluirse dentro de estas etiquetas.
<h1></h1>
Este será el título principal dentro de la ventana del navegador.
<p></p>
Esta etiqueta representa un párrafo de texto dentro de la ventana del navegador.
Para más referencias visita W3schools la cual cuenta con documentación muy amplia detallada y ejemplos que pueden ayudarte más a la comprensión de HTML.
Los comentarios en HTML
Los comentarios son parte también esencial como referencia a lo que estés trabajando en tu maquetación.
Los comentarios se representan por /* */ y como puedes ver en el siguiente ejemplo, no se mostrarán en la ventana de tu navegador.
Analogía
A simple vista ¿puedes identificar el título de un sitio web y cuál es el párrafo que contiene la información? Para que una computadora pueda identificar la diferencia entre un título y un párrafo utiliza etiquetas HTML que lucen así:
<h1>Este es un título (h por headline en inglés)</h1>
<p>Este es un párrafo (p por paragraph en inglés)</p>
HTML es lo más básico que debes de tener para crear un sitio web.
Hagamos la analogía con el esqueleto del cuerpo humano que es básico para su funcionamiento, es así como HTML es básico para que un sitio web pueda funcionar.
Uno puede identificar HTML cuando ve dos llaves como estas <> se les conoce como etiquetas o tags en inglés.
Cuando tu guardas un documento de word al final podrás ver la extensión .doc, si guardas un documento de HTML al final verás la extensión .html
Entonces ¿qué puedes poner en un sitio web?
HTML soporta diferentes tipos de contenidos y medios:
- Párrafos <p>
- Audio <audio>
- Video <video>
- Listas <ul> <li>
- Artículos <article>
- Imágenes <img>
- Énfasis <em>
- Botones <button>
Estos son algunas de las etiquetas que se usan en HTML y es importante mencionar que la mayoría de estas etiquetas siempre viene acompañada por una etiqueta de cierre </>
Entonces todo lo que se encuentre dentro de las etiquetas de apertura y cierre pertenece a la etiqueta que lo contenga, en la mayoría de los casos.
<p>Este es un párrafo</p>
<br> (Este es un salto de línea y no necesita etiqueta de cierre)
Trata lo siguiente:
- Posiciona tu mouse en esta venta que estás leyendo
- Da clic derecho y selecciona “View page source”
Ve si puedes identificar algunas de las etiquetas HTML que vimos