La estructura de un documento HTML (I)

- Hola, ¿qué tal? ¿Preparado para la siguiente lección?

- Sí, pero antes tengo un par de preguntas sobre el ejemplo del otro día.

- A ver...

- En primer lugar, las líneas de los párrafos no se partían por donde nosotros escribimos.

- Lógico. Pensé que eso lo habías entendido. Recuerda siempre que un párrafo es un párrafo. Comienza con <p> y termina con </p>. Todo lo que haya entre esas dos etiquetas es un único párrafo. Aunque insertes cien líneas en blanco entre cada dos palabras, seguirán formando un único párrafo. El navegador lo representará como tal. En el caso de un navegador visual, cuanto más estrecha sea la ventana, más alto será el párrafo.

- Ya veo...

- Es la última regla básica que te di en el primer tutorial: no controlas la apariencia.

- ¿Entonces cómo hago para que haya un salto de línea donde yo quiera?

- Muy sencillo: el párrafo termina donde existe un salto de línea.

- Claro, visto así...

- ¿Tenías otra pregunta?

- Sí, me fijé en el fuente del ejemplo, y vi que habías añadido una línea así al principio: <title>Primer ejemplo en HTML</title>

- En efecto. En HTML cada documento debe tener un título, que viene especificado por el elemento TITLE. Lo añadí porque es obligatorio.

- Pero el documento ya tenía un título, ¿te acuerdas? Lo pusimos así: <h1>Mi colección de discos</h1>. ¿No vale con eso?

- No, es diferente. TITLE se refiere al título del recurso, del fichero .html si lo entiendes mejor así. H1 es el título de una sección de los contenidos del cuerpo del documento. Puede haber más de un H1 en un mismo documento. Lo entenderás mucho mejor al final de este tutorial.

- ¿De qué vamos a hablar hoy?

- Había pensado en hablarte de la estructura de un documento HTML.

- Muy bien, espero que no te pongas muy abstracto.

- Lo intentaré. También había pensado que al final podrías crear tu propio documento HTML.

- ¡Eh, eso sería genial! Pero me hará falta algún programa, ¿no?

- Nada que no tengas ya: un navegador para ver la página y el editor de textos más sencillo que haya en tu sistema operativo. Si estás en Windows, el Bloc de Notas será perfecto para empezar.

- ¿En serio?

- Completamente. ¿Empezamos?

- ¡Empecemos!

- Veamos cómo te explico esto sin liarme mucho. Un documento HTML está formado por elementos. Ya hemos hablado de elementos. Por ejemplo, un elemento P representa un párrafo, un elemento OL representa una lista, un elemento TITLE representa el título del documento...

- Sí, todo eso ya lo hemos visto.

- Bien. En general, cada elemento se divide en tres partes: una etiqueta inicial, el contenido del elemento, y una etiqueta final.

- Como por ejemplo <p>Esto es un párrafo.</p>, ¿verdad?

- Exacto. Y nunca confundas etiqueta con elemento. Un elemento no es una etiqueta. Una etiqueta es una parte de un elemento. Si los confundes todo el mundo sabrá que no sabes de qué estás hablando.

- Bueno, bueno, vale.

- Unos elementos pueden contener a otros elementos. Por ejemplo, en el caso de nuestro ejemplo, el elemento OL contenía elementos LI. El elemento OL representa una lista, y cada elemento LI representa uno de los elementos de la lista.

- ¿No podríamos haber metido los elementos LI en el elemento P?

- No, existen reglas que definen qué tipos de elementos puede contener cada tipo de elemento. Por ejemplo, un elemento P no puede contener a otros elementos P.

- Claro, es bastante lógico...

- Otro ejemplo, un elemento OL sólo puede contener elementos LI. Así es como está definido. Cada tipo de elemento tiene sus reglas.

- ¿Y hay muchos tipos de elemento?

- Sí, pero no te preocupes, normalmente son reglas lógicas. El HTML es realmente sencillo. Pero a lo que íbamos.

- Sí, sí, la estructura del documento...

- Pues bien, un documento HTML sólo puede contener un tipo de elemento: el elemento HTML.

- ¿Hein?

- Como lo oyes. Es como si el documento fuera un gran elemento. A su vez, el tipo de elemento HTML puede contener dos tipos de elemento: un elemento HEAD y un elemento BODY, y sólo uno de cada. El elemento HEAD define la cabecera del documento, que contiene información sobre el documento, y el elemento BODY contiene el cuerpo del documento, lo que será representado por el navegador.

- Eso no me cuadra. En nuestro ejemplo no había nada de eso.

- Sí lo había, pero no lo veías.

- ¿Eh? ¿Qué dices? No te entiendo nada.

- Para algunos tipos de elementos, las etiquetas son opcionales. Para otros tipos, sólo la etiqueta final es opcional. Pero eso no quiere decir que el elemento no empiece y no termine. Lo primero que hace el analizador del código es buscar dónde empieza el elemento HTML. Si no encuentra la etiqueta inicial, supone dónde está.

- Un poco complicado, ¿no?

- En principio no, pero se puede complicar bastante. Por eso yo te recomiendo que incluyas siempre todas las etiquetas aunque sean opcionales. Además, si en el futuro haces tus páginas en XHTML tendrás que incluir todas las etiquetas, porque allí no hay etiquetas opcionales.

- Muy bien, te haré caso, así lo haré.

- He vuelto a escribir el ejemplo del primer tutorial, pero con todas las etiquetas explícitas:

<html>
 <head>
  <title>Primer ejemplo en HTML</title>
 </head>

 <body>
  <h1>Mi colección de discos</h1>

  <h2>Horslips</h2>
  <p>Este grupo irlandés nació en 1970, y en sus diez años de existencia, hasta su
  separación en 1980, recorrieron Europa y América tocando en directo. Aunque su
  música evolucionó sensiblemente en ese tiempo, siempre se caracterizó por imprimir
  de manera única las raíces celtas y el sonido del rock. Horslips, sin haber
  llegado a ser un fenómeno de masas, ha escrito algunas de las páginas más
  brillantes de la música irlandesa reciente.</p>
  <ol>
   <li>"Happy To Meet, Sorry To Part", 1972</li>
   <li>"The Táin", 1973</li>
   <li>Etcétera, no los pongo todos.</li>
  </ol>
  <h2>Gwendal</h2>
  <p>Gwendal es probablemente uno de los grupos de música celta más conocidos en
  España. No en vano, su único disco en directo fue grabado en España. Este grupo
  bretón, da a los temas tradicionales irlandeses un estilo único, mezclando
  delicadeza, virtuosismo y energía de manera magistral.</p>
  <ol>
   <li>"Gwendal", 1974</li>
   <li>"Gwendal 2", 1975</li>
   <li>Etcétera, tampoco los pongo todos</li>
  </ol>
 </body>
</html>

Cómo ves el elemento TITLE está contenido en HEAD, y todos los demás están contenidos en BODY.

- ¿Y no sería más lógico que los elementos P estuvieran contenidos en los elementos H?

- Probablemente sí, pero así es como está definido... Bueno, este documento es perfectamente válido, es decir, sigue todas las reglas sintácticas de HTML, pero normalmente los documentos son más complejos, y es fácil equivocarse. Por eso hay servicios que nos permiten validar nuestros documentos. Pero para eso hace falta un pequeño detalle más.

- Normalmente el programa validador necesita conocer cuáles son las reglas que se aplican a nuestro documento, para saber si hemos aplicado correctamente esas reglas o no.

- ¿Y que hay que hacer para que lo sepa?

- Una manera de hacerlo es añadir al principio una declaración del tipo del documento. Nosotros estamos aprendiendo HTML 4.01, por tanto la declaración tiene que tener esta pinta:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

- ¡Qué cosas más raras!

- Sí, es que en realidad esto no es HTML, pero no te preocupes mucho. Lo ponemos y ya está. Ahora lo validamos, por ejemplo con el validador del W3C. Si todo va bien, no encontrará ningún error.

- A ver.

- Perfecto: This page is valid. Ahora viene un tema que es un poco polémico.

- ¿Cuál?

- Verás, según la especificación de HTML 4.01, es obligatorio incluir la declaración del tipo de documento en cualquier documento HTML.

- ¿Y eso es polémico?

- Sí. Bueno, no debería serlo, pero lo es. El caso es que, nosotros vamos a incluirlo siempre, ¿de acuerdo?

- De acuerdo.

- Por cierto, si te fijas en los resultados del validador, verás que hay un apartado llamado Parse Tree. Parse significa analizar, y tree singnifica árbol.

- Ya lo veo.

- Normalmente se dice que la estructura de un documento HTML tiene forma de árbol. Hay un tronco que se ramifica, y de las ramas a su vez salen otras ramas, y así sucesivamente. Por ejemplo, el elemento HTML tiene dos ramas: HEAD y BODY:

- Interesante.

- Una cosa más acerca de la validación de documentos. El hecho de que un documento sea sintácticamente correcto, no quiere decir que sea un documento válido desde todos los puntos de vista.

- ¿Por ejemplo?

- Por ejemplo, hay gente que utiliza elementos P sin contenido para dejar espacio en blanco. Lo cual es completamente absurdo, porque es como si escribieras un párrafo sin palabras.

- Claro, entonces es un párrafo que no es un párrafo. No sería un párrafo...

- Para dejar espacio en blanco, se usan las hojas de estilo, porque eso no tiene que ver con la estructura, tiene que ver con la apariencia. Otro ejemplo. Hay gente que para conseguir escribir algo en letras grandes y en negrita utilizan un elemento H1. En realidad, eso es incorrecto.

- Claro, porque H1 contiene el título de una sección de un documento.

- Justamente. Para especificar que algo va en negrita, se puede usar el tipo de elemento STRONG, que significa "énfasis fuerte", y para que sea de tamaño mayor que el de las palabras que lo rodean, se usan hojas de estilo. Y así son comunes muchos truquitos igual de incorrectos.

- ¡Claro, pero todo eso hay que saberlo antes!

- Sí, es verdad. Pero antes me gustaría explicarte un par de cositas.

- En HTML, algunos de los tipos de elementos que pueden aparecer en BODY se pueden dividir en dos grandes grupos: elementos en bloque (o a nivel de bloque) y elementos en línea (o a nivel de texto).

- ¿Cuál es la diferencia?

- Se diferencian especialmente en dos aspectos. En primer lugar, normalmente los elementos en bloque pueden contener elementos en línea y algunos de ellos también a otros elementos en bloque. Los elementos en línea no pueden contener elementos en bloque. En segundo lugar, los elementos en bloque suelen provocar un salto de línea antes y otro después de los contenidos del elemento. Los elementos en línea no suelen provocar un salto de línea.

- Dame algún ejemplo, ¿no?

- Sí, por ejemplo, los elementos P (párrafo), OL (lista ordenada) y LI (objeto de lista) son elementos en bloque. Los elementos EM (énfasis) y STRONG (énfasis fuerte) son elementos en línea. Un elemento P puede contener elementos EM y STRONG pero no puede contener elementos en bloque. El elemento OL sólo puede contener elementos LI. El elemento LI puede contener elementos en bloque y en línea.

- Muy bien, pero, ¿para qué me explicas todo esto?

- Porque es útil para describir qué elementos puede contener cada tipo de elemento.

- Ah, pues, ahora que lo dices, es verdad...

- La otra cosa que quería explicarte eran los atributos de los elementos. Verás, cada elemento tiene algunos atributos cuyo valor puedes asignar. Por ejemplo, para crear un hipervínculo normalmente se emplea el elemento A...

- ¿De dónde viene esa A?

- Es la inicial de ancla (en inglés anchor). El caso es que este elemento tiene una doble función: puede ser el origen de un hipervínculo, o el destino de un hipervínculo. Para que el elemento sea el origen de un hipervínculo, hay que darle un valor a su atributo href, y para que sea el destino de un hipervínculo, hay que darle un valor a su atributo name.

- ¿Y puede ser a la vez origen y destino?

- Sí.

- ¿Y cómo se asigna un valor a los atributos?

- Es muy sencillo. En la etiqueta inicial, después del nombre del elemento, incluyes una pareja atributo="valor" para cada atributo. Conviene que encierres siempre el valor entre comillas. Por ejemplo: <a href="http://conclase.net/html/tutorial/cap1">¡Sigue nuestros tutoriales!</a> aparece en tu navegador así ¡Sigue nuestros tutoriales!. Si lo pulsas, irás al índice del tutorial de HTML.

- Es cierto.

- Muy bien, en el tutorial siguiente hablaremos más a fondo sobre hipervínculos. Hay dos atributos muy importantes para añadir estilos a los documentos, que son class e id. También hablaremos sobre ello dentro de algunos tutoriales. De momento, ahora que ya sabes incluso cómo se hace un hipervínculo a otra página, es el momento de que crees tu propia página desde cero.

- ¡Qué emocionante!

- Lo primero que tienes que hacer es abrir el editor de textos más tonto y piojoso que tengas instalado. Si estás en Windows, abre el Bloc de Notas. Estará en Inicio/Programas/Accesorios o algo por el estilo.

- Muy bien, hecho.

- Ahora escribe la declaración del tipo de documento. O si lo prefieres, copia y pega, es más sencillo:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html40/strict.dtd">

Tiene que ser exactamente así.

- Ah, muy bien, muchas gracias. Ya está.

- ¿Ahora qué va?

- El elemento HTML, ¿no?

- Justo. Y dentro del elemento HTML...

- HEAD y BODY.

- Y dentro del HEAD...

- El elemento TITLE.

- Bien, puedes escribir las etiquetas en mayúsculas o en minúsculas, pero te recomiendo que las escribas siempre en minúsculas. Seguramente ya tendrás una estructura de este estilo:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
                      "http://www.w3.org/TR/html40/strict.dtd">
<html>
 <head>
  <title></title>
 </head>
 <body>
 </body>
</html>

- Exacto, eso es lo que tengo.

- Pues es todo tuyo, ponle un título al documento en TITLE y crea tu contenido dentro de BODY. Utiliza los elementos que ya conoces. Asegúrate de que cierras los elementos en orden inverso al que los abres. Por ejemplo, <p>Algo <em>enfatizado <strong>con fuerza</strong></em></p>. Cuando acabes guarda el fichero en el disco duro. Lo puedes llamar por ejemplo "ejemplo.html" o como tú quieras. En todo caso acuérdate bien de dónde lo guardas.

- Vale, ya está guardado. ¿Ahora qué?

- Nada, abre el navegador que más te guste y abre el documento que acabas de guardar en el navegador. Y si lo has hecho todo bien, aparecerá tu documento como debería. Si no sale bien, repásalo. También puedes intentar validarlo para tratar de detectar errores, aunque lo más probable es que te líes más.

Nota: si quieres, puedes enviarnos tu ejemplo por correo electrónico a html arroba conclase punto net o a través de nuestro formulario. Te ayudaremos encantados.

- Bueno, yo creo que está bien, pero ya sabes, esto es un poco feo así...

- ¿Te gustaría que le pusiéramos unos estilos bonitos?

- Claro que sí. ¿Ahora mismo?

- Ahora mismo.

- Muy bien, vas a crear tu primera hoja de estilo.

- ¿Qué necesito?

- Nada. Crea un nuevo documento con el editor de textos que has usado para el documento HTML. La hoja de estilo también es un documento de texto sin formato.

- Ah, genial. Ya está.

- Ahora, vamos a especificar unas reglas de estilo para el cuerpo del documento, es decir, para el elemento BODY.

- Muy bien, ¿cómo?

- Veamos cierta terminología básica de CSS. Abre bien las orejas y concéntrate. Un conjunto de reglas tiene dos partes: selector y bloque de declaraciones. El selector especifica los elementos a los que se aplica el bloque de declaraciones. El bloque de declaraciones empieza con una llave abierta y termina con una llave cerrada. Entre las llaves hay cero o más declaraciones separadas por un punto y coma. Cada declaración es de la forma propiedad : valor. La especificación de CSS define las propiedades existentes y los valores que pueden tomar éstas.

- ¡Jo tío, qué lío me acabas de armar en un momento!

- Tranquilo, vamos a aclararlo con un ejemplo. Vamos a escribir un bloque de declaraciones para el BODY. El selector será el nombre del elemento:

body { }

Repasa las definiciones que te acabo de dar. ¿Está todo bien?

- Sí, ya, pero eso no es muy útil, ¿no?

- No, tenemos que poner unas declaraciones entre las llaves. Para no complicarnos mucho, podemos cambiar los colores y el tipo de letra, ¿te parece?

- Me parece.

- Bien. Para cambiar el color del texto, utilizamos la propiedad color. Para cambiar el color del fondo utilizamos la propiedad background-color, y para cambiar el tipo de de letra utilizamos la propiedad font-family.

- Jopé, siempre todo en inglés...

- ¡Qué le vamos a hacer! Escribe esto con el editor:

body {
 color : rgb();
 background-color : rgb();
 font-family : Verdana, Arial, Helvetica, Helv, sans-serif;
}

rgb() sirve para especificar un color a partir de sus componentes rojo-verde-azul. Si no sabes cómo funciona esto, te recomiendo que visites por ejemplo esta página de la Guía de la Computación, o más a fondo en la página de Juan Martínez-Val. ¿Qué colores te apetecen?

- No sé, algo que no sea demasiado hortera. Letras rojo oscuro sobre fondo naranja, por ejemplo.

- Entonces pon esto:

body {
 color : rgb(51,0,0);
 background-color : rgb(255,204,102);
 font-family : Verdana, Arial, Helvetica, Helv, sans-serif;
}

Ahora grábalo con el nombre "estilo.css" en el mismo directorio que el documento HTML.

- Ok, ya está. ¿Ahora que hay que hacer?

- Ahora hay que vincular esta hoja de estilo con nuestro documento HTML. Para ello, vamos a utilizar un nuevo elemento, el elemento LINK, que debe estar contenido en el elemento HEAD. Escribe esto dentro del HEAD:

<link rel="stylesheet" href="estilo.css" media="screen" type="text/css" title="Mi hoja de estilo">

Observa que este elemento no tiene etiqueta final. No es que sea opcional o se me haya olvidado. Es que hay algunos elementos que no pueden tener etiqueta final.

- Vaya hombre. ¿Y qué significa todo eso exactamente?

- Significa que queremos vincular (link) la hoja de estilo (stylesheet) contenida en el fichero llamado "estilo.css" que está escrita en el lenguaje CSS (text/css) que sólo vale para pantallas de ordenador (screen) y que se titula (title) "Mi hoja de estilo". Esto del título tiene su importancia, pero ya te lo explicaré más adelante.

- Ok, perfecto. Ya lo he añadido. ¿Lo guardo?

- Sí, ya está. Con eso bastará. Las propiedades se heredarán desde el elemento padre BODY hasta sus elementos hijos, que son los que están contenidos en BODY: los párrafos, las listas, etc. Guárdalo y vuelve a abrir la página con el explorador. ¿Qué tal?

- Impresionante. Espera, me están empezando a llorar los ojos...

- ¡Anda, exagerado!

- No, en serio, tienes razón, esto es muy sencillo. El problema es que yo no sé qué elementos existen, ni que propiedades de estilo, ni nada...

- Pero por eso estás siguiendo el tutorial, ¿no? Como te dije al principio, prefiero que construyas tus conocimientos sobre bases sólidas, aunque avancemos mucho más despacio. En realidad, podría haberte explicado HTML en dos horas, pero seguro que habrías acabado usando todos esos truquitos miserables de los que te he hablado antes. Ten paciencia, ¿vale? ¡Lo hago por tu bien!

- ¡Pero qué padrazo estás hecho! Bueno, supongo que tienes razón.

- Creo que por hoy ya es más que suficiente. La próxima vez hablaremos de identificadores e hipervínculos, y haremos una especie de portal sencillito estilo Yahoo, así que prepárate una lista con tus páginas favoritas.

- ¡Eh, muy bien!

- ¡Hasta la vista!

- ¡Adiós!