En el artículo anterior aprendimos a utilizar algunas de las etiquetas básicas de HTML con las que creamos nuestra primera página web. En los próximos artículos veremos algunas etiquetas nuevas y aprenderemos a utlizarlas en nuestros documentos HTML pero, antes de eso, vamos a aprender algo más sobre HTML en este artículo.
Elementos y atributos en HTML
Antes de nada, deberíamos aprender dos conceptos nuevos de HTML: elemento y atributo.
Los elementos están formados por una etiqueta de inicio, el contenido y una etiqueta de fin, y son los estructuras mediante las que se organizan los documentos HTML. Ya conocemos por ejemplo los elementos ‘html‘, ‘body‘, ‘head‘, ‘title‘, ‘p‘ y ‘a‘ entre otros y dentro de poco conoceremos alguno más.
Los elementos pueden llevar asociadas propiedades, y estas propiedades se denominan atributos. De igual forma que con las etiquetas, ya conocemos algún atributo; por ejemplo el atributo ‘href‘ del elemento ‘a‘, que nos permitía indicar la URL del enlace.
La estructura básica de un documento HTML
Un documento HTML se compone de tres partes bien diferenciadas:
- Una declaración de la versión de HTML con la que se ha creado el documento.
- Una cabecera (el ‘head‘) con información sobre el documento y algunos otros datos que no forman parte de su contenido.
- El cuerpo del documento (el ‘body‘), donde se encuentra el contenido real que se visualizará desde el navegador.
Las dos últimas ya las vimos en el artículo anterior. La primera, aunque no es necesaria para visualizar los documentos en un navegador, es importante para que algunas estructuras se visualicen tal y como nosotros queremos y también para poder validar el documento y confirmar que ha sido escrito siguendo la especificación y que no contiene errores.
Recordad que, aunque el documento HTML contenga errores, puede que el navegador muestre correctamente la página. Sin embargo, es importante escribir documentos HTML bien formados de cara a, por ejemplo, favorecer el posicionamiento en buscadores entre algunas otras cosas.
En los próximos artículos utilizaremos la siguiente declaración para indicar la versión de HTML.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Como véis, utilizaremos la versión de XHTML 1.0, en lugar de una versión de HTML. Para que no os asustéis, XHTML es básicamente igual que HTML pero con algunas restricciones. Por lo tanto, un documento XHTML bien formado también será un documento HTML.
Y ya que vamos a utilizar XHTML en lugar de HTML, nos falta sólo una cosa más para que el documento esté bien formado. Tenemos que añadir el atributo ‘xmlns‘ al elemento ‘html‘ con el valor ‘http://www.w3.org/1999/xhtml’.
Volviendo al ejemplo del artículo anterior, así es como quedaría una vez completado con la declaración del DTD al que se ajusta el documento:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Hola mundo</title>
</head>
<body>
<p>El cielo está enladrillado,</p>
<p>¿quién lo desenladrillará?</p>
<p>El desenladrillador que lo desenladrille,</p>
<p>buen desenladrillador será.</p>
<p><a href="http://www.locualo.net">Locualo.net</a></p>
</body>
</html>
Validando nuestro primer documento HTML-XHTML
Ahora que hemos completado definitivamente nuestra primera página web, vamos a validarla para comprobar que no hemos cometido ningún error. Para ello entraremos en la web del servicio de validación del W3C, desde donde dispondremos de 3 formas de validar nuestro documento:
- Validate by URI. Introduciendo la URI (accesible desde Internet), desde donde se puede encontrar el documento.
- Validate by File Upload. Subiendo el fichero del documento HTML a los servidores del W3C (por si lo tenemos en un servidor local y no accesible desde internet).
- Validate by File Input. Pegando directamente en la caja de texto el código de nuestra página web.
Si nuestro documento contiene errores, la herramienta nos avisará y nos dará pistas para solucionarlos.
