Con este comenzamos una serie de artículos que abarcan desde la creación del primer archivo HTML hasta el uso de los elementos nuevos de HTML5.
Primero tenemos que definir qué es HTML, un término que muchas veces escuchamos. Las siglas significan Hypertext Markup Language, o Lenguaje de Marcas Hipertextual. En otras palabras, es un código de marcas o etiquetas que definen elementos de una página Web.
Un sitio web está compuesto por una o más páginas web (documentos HTML). Pero no todo es HTML, sino estaríamos viendo páginas estáticas y de poco atractivo visual. Para ello tenemos otros lenguajes como CSS (Cascading Style Sheets) para dar estilo (colores, tipografías, tamaños, maquetación, etc.) y Javascript para otorgar dinamismo en la parte que vemos de una página.
Podríamos seguir teorizando mucho sobre HTML, pero para no aburrirnos es mejor comenzar con un enfoque práctico. Tomemos cualquier editor de texto que tengamos a mano (gedit en Ubuntu, Notepad o mejor Notepad++ en Windows), y escribamos las siguientes líneas de código en un archivo llamado index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Mi primer Página HTML</title>
</head>
<body>
<h1>Hello World!</h1>
<p>Este es mi primer archivo HTML</p>
</body>
</html>
Si queremos copiar el código, sencillamente hacemos doble clic en el mismo y se mostrará como texto plano. Sin embargo sería mejor si podemos escribirlo a mano y realizar así nuestras primeras prácticas, a fin de empezar a acostumbrarnos al lenguaje. Es ley: cuanto más código escribimos, más aprendemos. Por más que hayamos leído miles de libros, si no escribimos código en la misma proporción, no servirá de mucho.
Imagen 1 - Primer archivo HTML con el clásico ¡Hola, Mundo!
Luego de guardar el archivo, lo abrimos con el navegador que más nos guste. Notamos ahora la salida del mismo, solamente un título y un poco de texto, como vemos en la Imagen 1.
¿Tantas líneas de código para escribir este texto? No, lo que hicimos fue definir la estructura básica de un documento HTML y luego añadir dos elementos, que son h1 (heading o encabezado) y p (párrafo).
Miremos un poco el código. La primera línea corresponde al Doctype, el cual siempre debemos escribir a fin de que el navegador sepa con qué versión de HTML estamos trabajando. En este caso se corresponde a la versión HTML5. Antes era necesario escribir Doctypes largos, sin embargo ahora se ha simplificado.
En la segunda línea tenemos la primer etiqueta, <html>. ¿Qué es una etiqueta? Es una palabra clave rodeada de los signos < y >, y generalmente tiene su par que la cierra, formado por la palabra clave entre </ y >. La primera es la etiqueta de apertura (opening tag), y la segunda es la de cierre (closing tag). Las etiquetas describen elementos en una página web. En este caso, el elemento raíz es html. Dentro tenemos head, y body, que están dentro del elemento html. A esta forma de incluir elementos dentro de otros se le llama anidación.
Volviendo a nuestro código, dentro del elemento head tenemos los elementos <meta> y <title>. El primero sirve para definir información sobre el documento, y el segundo para especificar el título de la página, que aparecerá en la ventana del navegador o por ejemplo en los resultados de Google (de ahí la importancia de nunca olvidarnos definirlo).
Más adelante conoceremos el elemento meta y sus utilidades. Dentro de la etiqueta de apertura notamos que se le agregó charset=”UTF-8″. Esto es un atributo. Los atributos brindan información adicional a un elemento. Están compuestos de un nombre, el signo igual y el valor del atributo entre comillas. En este caso, el atributo charset permite definir el set de caracteres con el cual fue codificado el documento. Más adelante veremos en detalle este tema en particular.
En síntesis, la sintaxis básica de un elemento HTML es la siguiente:
Imagen 2 - Sintaxis básica de un elemento HTML
Esta sintaxis aplica a los elementos que tienen etiqueta de apertura y cierre. En el caso de los que deben cerrarse en la misma declaración (que no son muchos), como meta, sencillamente terminamos la etiqueta inicial con />.
Como vimos en el código, lo que definimos en head no se corresponde a nada de lo que aparece en la página en sí. Esto se debe a que head sirve para describir información que no se ve, definir scripts, enlaces a hojas de estilo CSS, etcétera. En cambio, el elemento body está dedicado a incluir los elementos visibles de una página.
Dentro de body tenemos dos elementos: h1 y p. El primero define un encabezado o heading, por lo cual el texto se muestra en un tamaño y grosor considerable, mientras que el elemento p define un párrafo. Acá es fácil ver cómo un elemento afecta a su contenido, porque con solo cambiar el nombre de las etiquetas, el texto que está en el contenido del elemento se muestra de forma distinta.
Los navegadores web interpretan la información que le damos en código HTML y renderizan o muestran la página de acuerdo a estándares (que no siempre se cumplen, en especial con Internet Explorer) preestablecidos por la W3C. Como cada navegador tiene un motor distinto, es muy común que un sitio se muestre de una manera distinta en cada navegador, aunque con al llegada de HTML5 se busca que este problema tienda a desaparecer en el futuro.
Como vamos a ver en los artículos de Historia de Internet, desde el principio se buscó que la información a transmitir sea liviana, por lo cual los sitios no son tan fáciles de componer como una imagen visual, sino que es necesario traducirlos a código HTML.
Todo el código HTML (también CSS y Javascript) de un sitio web puede verse desde el mismo navegador. Por ejemplo, en Google Chrome (navegador que recomendamos en GuíaHTML5 por su soporte a HTML5 y herramientas de desarrollador) sencillamente hacemos clic derecho en cualquier lugar de la página web y hacemos clic en Inspeccionar Elemento.
Imagen 3 - Google Chrome dispone de un modo inteligente para ver el código HTML de una página web
Como tarea para esta primera parte podríamos tomar el código que escribimos y modificarlo para que tenga otro título, encabezados y párrafos cuantas veces queramos. Podemos probar con h2 y h3 además de h1.
Si bien tiene sus complicaciones, HTML es sencillo. Tenemos que aclarar también que no cumple los requisitos para ser un lenguaje de programación. Sencillamente es un código que describe elementos. En la próxima parte veremos los elementos HTML básicos y su uso, y hablaremos un poco sobre un tema importante: validación de documentos.
A pesar de que es un tema complejo -que no cualquiera lo absorve con facilidad- esta redactado de una manera sencilla y practica! Esta pensado como para que cualquiera pueda acceder a este apasionante caudal de información sin cohibirse ante los nuevos desafios que presenta, esta muy bien diseñado y detallado! Todo muy correcto desde el punto de vista pedagógico!
A quienes empezamos de cero nos resulta difícil sin una guia clara y consisa…Gracias por este grato recibimiento que nos dan mediante GUIAHTML5!
Felicitaciones por este proyecto y adelante!!
Muchas gracias por tu expresivo y profundo comentario Lorena! me alegra saber de que te resulta fácil de entender, esa es mi principal preocupación: que se entienda y que el lector se lleve algo útil. Gracias por la buena onda!! Un cordial saludo
muy bueno, me ha gustado la sencillez con la que lo has escrito.
¿Para cuando la parte 2?
GRacias
Hola mjcristobal! muchas gracias por tu comentario y por haber visitado GuíaHTML5, me apuraré esta semana para seguir con la parte 2. Nuevamente muchas gracias
.