En este nuevo apunte voy a estudiar los fundamentos de HTML.
La idea es dedicarme especialmente a la estructura y los elementos esenciales de la sintaxis te este lenguaje.
¿Por qué aprender estas cosas ahora? Bueno, realmente no hay ninguna mala oportunidad para empezar a aprender algo. Todo es nuevo cuando no conozco como funciona.
Pero principalmente, encuentro dos ventajas para estudiar un poco de HTML:
1- No tiene muchos requerimientos materiales para empezar. Necesito solamente tener un editor de texto sin formato para crear el documento y un navegador de internet para mostrarme los resultados. Solo con eso ya puedo empezar a crear cosas nuevas.
2- Se trata de un lenguaje que, al menos en mi primera impresión estudiándolo, es fácil de leer. Incluso si parece difícil al principio, muchas partes de sus sintaxis se repiten una y otra vez. Luego de un poco de práctica es sencillo entender lo que estoy haciendo incluso antes de verlo en el navegador.
Y otro detalle importante: puedo avanzar en la creación de un nuevo sitio web trabajando completamente dentro de mi computadora. De este modo puedo estudiar y entender cómo funciona desde un directorio. Luego si quiero puedo publicar la página en un servidor para acceder a la misma desde internet.
Por eso sin más excusas, lo siguiente es…
¿Qué es HTML?
Las siglas HTML quieren decir:
HTML = Hypertext markup language
De esto necesito saber que “Hypertext” viene por la idea de un “texto con links”. Un texto que se conecta con otros textos.
Y la parte de “markup language” me habla de un lenguaje por anotaciones. Se trata de una forma de decirle al navegador, por medio de etiquetas o “tags”, qué es lo que contiene cada parte de la página.
Por ejemplo estas etiquetas crean una estructura donde un a parte de la página web es el título (heading) y otra parte es un párrafo (paragraphs).
Este lenguaje lleva varias revisiones desde su creación. La versión HTML 5.4 es la más actual al momento de escribir todo esto.
El HTML se encarga de la estructura estática de la página web. Cuáles son los títulos, los bloques de texto, y ese tipo de cosas.
Y para cerrar este apartado, el desarrollo web en HTML por lo general tiene otros dos lenguajes que lo complementan:
– El lenguaje CSS maneja el estilo del sitio. Por ejemplo tipografía, colores, columnas y ese tipo de cosas.
– Javascript se encarga de la parte interactiva del sitio, la parte dinámica y su funcionalidad.
La estructura de HTML
Para entender mejor todo esto, nada mejor que empezar trabajando con un ejemplo.
Primero necesito crear un documento de texto. Puedo usar cualquier editor de texto. Pero si quiero tener todos los lujos, como el de “autocompletar” código, lo mejor va a ser usar alguna alternativa como Codium o algún editor que pueda expandirse con plugins.
Lo que sigue es crear el documento, al que tengo que darle una extensión “.html” para guardarlo.
Y para mi suerte, todo archivo HTML tiene la misma forma:
<!DOCTYPE html> <html> <head> </head> <body> </body> </html>
DOCTYPE en HTML
La primera linea de todo documento html se conoce como “doctype”
<!DOCTYPE html>
Este doctype identifica el tipo de archivo.
La etiqueta HTML
La etiqueta <html> es la raíz del documento.
<html> ...código...</html>
Todo lo que se encuentra entre esos dos tags es el código del documento. Este tag siempre esta presente, abre y cierra el archivo.
A veces puede aparecer como:
<html lang="es"> ...código... </html>
En este caso, el atributo “lang” identifica el idioma en el que se encuentra escrita la página, por ejemplo “es” por “español”.
En su interior, las etiquetas <html> </html> contienen otros dos tags: Head y Body.
La etiqueta Head en HTML
En el interior de las etiquetas Head:
<head> ...código...</head>
Se puede encontrar información que no se muestra directamente en el navegador, pero si es información que le dice al navegador como tiene que interpretar la página.
Esta información incluye metadatos o links a hojas de estilo en CSS.
Entre esos tags que puedo encontrar dentro de “Head”, existe por ejemplo “Title” que es una etiqueta obligatoria del sitio.
<title> Nombre del sitio</title>
El nombre incluido dentro de las etiquetas “Title” aparece por ejemplo arriba en la barra del navegador, cuando visitamos la página web.
Otra etiqueta que aparece dentro de head es una etiqueta llamada “meta”, se trata de un tag que no tiene cierre. Se refiere a la codificación del archivo:
<meta charset="UTF-8">
Lo que hace es indicar cómo se van a codificar los caracteres, unificando estándares entre los distintos navegadores.
La etiqueta Body en HTML
Dentro de las etiquetas:
<body> </body>
Se incluye todos los elementos que van a mostrarse en mi sitio.
Esta etiqueta comienza directamente luego del cierre de “</head>” y luego de </body> va el cierre del documento con “</html>”.
Sintaxis de HTML: ultra resumen
Del mudo que pude entender con el ejemplo anterior, En un documento HTML tengo diferentes contenidos que se encuentran acompañados de etiquetas.
La sintaxis de este lenguaje se maneja agregando contenido acompañado de “tags” o etiquetas.
Básicamente en este primer momento tengo que recordar que existen dos tipos de etiquetas. Un tipo de etiquetas se cierra y otro tipo no. Las etiquetas que no se cierran se consideran etiquetas vacías.
Etiquetas que abren y cierran:
Un ejemplo de este tipo de tag puede ser la etiqueta de párrafo:
<p> este es un párrafo </p>
Se puede notar que la etiqueta “<p>” abre el contenido y “</p>” lo cierra. Ya había encontrado este tipo de tag antes, por ejemplo al hablar de “body”. Cuando una etiqueta se abre, siempre tiene que cerrarse en algún punto.
Las etiquetas ya vienen establecidas, no es posible crearlas. No es necesario recordar todas y cada una de las etiquetas, algunas se utilizan muchas veces y otras solo dependiendo de un caso en particular.
Otros detalle importante es que las etiquetas se escriben siempre en minúsculas.
Y también es bueno recordar que las etiquetas pueden “anidarse”, pueden existir una dentro de otra. Esto también pude notarlo antes, por ejemplo:
<head>
<title> Nombre del sitio</title>
</head>
Etiquetas vacías:
Este tipo de tag no tiene cierre. Se conocen también como “Empty Tags” o “self-closing” (auto cierre).
No hay contenido en el interior de estas etiquetas, por lo que no es necesario cerrarlas. Pero si pueden tener atributos.
Un ejemplo de esto puede ser:
<link rel="stylesheet" href="styles.css">
En este caso la etiqueta “link” contiene una referencia a un archivo externo, una hoja con estilos CSS. La etiqueta no tiene contenido, por lo que no tiene otro tag de cierre.
Lo que si tiene el ejemplo son dos atributos: el atributo “rel” especifica que se trata de una hoja de estilos y el atributo “href” especifica la dirección al nombre del archivo.
Otro ejemplo de etiqueta vacía puede ser:
<meta charset="UTF-8">
Un etiqueta que ya revisé con anterioridad. Hay varias etiquetas de esta forma, tampoco es necesario conocerlas a todas, solamente alcanza con saber como es su forma.
Atributos en HTML:
Los atributos ( o “Attributes” en inglés) son una forma de agregarle datos extra a un tag.
Modifican la forma en que un navegador interpreta el contenido. El nombre de los atributos se escriben entre comillas. Y tampoco puedo inventar nada en esto, cada tipo de etiqueta tiene sus propios tipos de atributos preestablecidos.
Para revisar un ejemplo que ya escribí antes:
<meta charset="UTF-8">
En este caso tengo la etiqueta meta, que es un tag vacío. Aquí tengo el atributo charset, que indica “UTF-8” como el tipo de codificación unicode que utiliza la página.
Hay también más ejemplos de atributos, que voy a ir encontrando con el desarrollo de mi sitio web.
Comentarios en HTML:
Igual que en otros lenguajes de programación, HTML me permite dejar un mensaje por fuera del código.
<!-- contenido -->
Estos mensajes no son para que los interprete el navegador, son para que puedan leerlos las personas que revisan el código. Por ejemplo:
<!-- Dentro de las etiquetas "Head" van los metadatos -->
Revisando mi primer sitio web en HTML:
Si todo va bien, ya tengo creado un documento, digamos que se llama “inicio.html” por ponerle algún nombre.
Y si sumo todo lo anterior, el interior del documento se parece a esto:
<!DOCTYPE html>
<html>
<head>
<!-- Dentro de la etiqueta "Head" van los metadatos -->
<meta charset="UTF-8">
<title>Mi sitio de ejemplo</title>
</head>
<body>
<!-- Dentro de la etiqueta "body" se muestra el contenido que aparece en la página -->
<h1>Este es un nuevo blog</h1>
<p>Algo de información para una página web que recien comienza.</p>
</body>
</html>
Lo que puedo hacer ahora es abrir este archivo con un navegador, por ejemplo con la opción “abrir con” o lanzando el archivo directamente sobre la barra de herramientas del navegador.
Haciendo esto voy a poder ver el sitio web en su estado actual.
Conclusión:
Con esto termino mi primer apunte de fundamentos de HTML, para comprender su estructura y los que considero sus elementos esenciales.
Por favor te pido que me avises si encontrás algún error en el material, para que pueda corregirlo.
La seguimos en el próximo apunte.
Leave a Reply