Elementos de HTML

- Hola.

- Hola.

- Hoy estarás contento, por fin vamos a hablar de los tipos de elemento de HTML.

- Sí, la verdad es que ya tenía ganas.

- Lo sé. Después del tutorial de hoy ya podrás hacer lo que quieras.

- Je je, no creo, pero bueno.

- Bueno, por lo menos tendrás un conocimiento general y estarás en posición de leer la especificación sin perderte demasiado. Pero vamos a empezar. Podemos agrupar los elementos de HTML en los siguientes grupos:

• Estructura
• Texto
• Listas
• Tablas
• Vínculos
• Objetos
• Estilo
• Marcos
• Formularios
• Scripts

Vamos a hablar un poco de cada grupo, así que ya te puedes suponer que el tutorial de hoy será un poco largo. Tómate tu tiempo.

- Bueno, todo sea por amor al conocimiento.

- Una cosa antes de empezar: vamos a hacer un repaso de la mayor parte de los elementos, pero no de sus atributos, porque si no esto se convertiría en la especificación, y no es ése el plan. Si quieres saber cuáles son los atributos que puede tener un elemento, te he puesto un enlace entre cada elemento y su definición en la traducción de la especificación.

- Ah, muy bien.

- Además en la especificación tienes una lista con todos los elementos y una lista con todos los atributos. Bueno, pues si estás preparado, vamos allá.

- Allá vamos.

- Empezamos con los elementos de estructura. Estos ya los conoces y son HTML, HEAD y BODY.

- Sí, je je, de algo me suenan...

- El elemento HTML es el elemento raíz del documento, que representa al documento completo:

- ¿Qué es eso de modelo de contenido?

- El modelo de contenido es lo que puede aparecer como contenido del elemento, es decir, entre las etiquetas inicial y final. ¿Recuerdas que hablamos de elementos en bloque y en línea?

- Sí.

- Te dije que esa clasificación era útil para describir lo que podía contener cada tipo de elemento. Lo verás a lo largo de este tutorial. Al final, cuando hayamos visto todos los elementos, te diré a qué grupo pertenece cada uno. Hasta entonces considera que los elementos en línea forman parte de una línea (como por ejemplo una palabra enfatizada) y los elementos en bloque tienen un salto de línea antes y otro después (como por ejemplo un párrafo o una lista). Las letras y palabras sueltas se consideran elementos en línea.

- Muy bien.

- Seguimos. El elemento HEAD contiene la información de cabecera del documento:

Como ves el elemento HEAD es como un cajón de sastre donde metemos muchos tipos de información.

- Sí, ya me estoy fijando.

- De momento ahora hablamos de TITLE y META. TITLE es el título del documento como ya sabes. Debes intentar que sea lo más descriptivo posible, pero sin pasarte:

Es decir, puedes poner letras normales, letras con acentos, etc. Y símbolos. Por ejemplo, el símbolo de copyright. Lo único malo es que como los teclados no suelen tener el símbolo de copyright, se usa en su lugar un código especial: ©. Hay muchos más códigos especiales que empiezan por & y terminan por ;. Se llaman referencias a entidades de caracteres y hablaremos de ellas en el futuro.

- Vale.

- En cuanto al elemento META, me temo que es un poco más complicado. Se usa sobre todo para poner una descripción y una lista de palabras clave en tu página web, pero tiene otros usos, aunque la mayoría no son recomendables.

Como ves es un elemento vacío, no puede tener etiqueta final.

- Entonces, ¿dónde va la información?

- En atributos, por ejemplo:

<meta name="keywords" contents="tutorial,HTML,elementos">

Hay un tutorial sobre elementos META en HTML con Clase por si lo quieres ver, pero creo que la mayoría de las cosas de momento no te interesan. Si no entiendes nada no te desanimes.

- Bueno, le echaré un vistazo de todos modos.

- Vamos con el elemento BODY, el cuerpo del documento:

Eso es todo. Existen otros dos elementos de estructura, DIV y SPAN, de los que hablaremos más adelante en este tutorial.

- Muy bien, pues seguimos.

- El siguiente grupo de elementos del que vamos a hablar se refiere principalmente a frases y párrafos. Comenzamos con los elementos de frase:

- Muy bien. Alguno me suena.

- Sí, alguno ya lo hemos hemos utilizado antes. Te describo su utilidad rápidamente:

EM:

Enfatiza el contenido (emphasis). Normalmente se representa poniéndolo en cursiva, aunque, como todo en HTML, depende del navegador, y se puede modificar con hojas de estilo.

STRONG:

Indica un énfasis más fuerte. Normalmente se representa poniendo el contenido en negrita.

CITE:

Contiene una cita o una referencia a otras fuentes.

DFN:

Indica que aquí es donde se define el término encerrado.

CODE:

Designa un fragmento de código de computadora.

SAMP:

Designa una muestra de la salida de un programa, script, etc.

KBD:

Indica texto que debe ser introducido por el usuario.

VAR:

Indica que el texto es una variable o un argumento de un programa.

ABBR:

Indica que el contenido es una abreviatura (p.ej., WWW, HTTP, URL, Sr., etc.). Esto puede ser útil porque en el atributo title del elemento se puede poner el significado de la abreviatura.

ACRONYM:

Indica un acrónimo (p.ej., RENFE, radar, etc.).

En la práctica, los que más utilizarás son EM y STRONG, y con menos frecuencia CITE, DFN y ABBR. ¿Vamos bien?

- Más o menos.

- Bien. Seguimos con los elementos de párrafo. Básicamente son dos:

- Sí, esto ya estamos hartos de usarlo. ¿Cuál es el otro?

- El otro es el elemento PRE, para texto preformateado.

- ¿Ein? ¿qué es eso?

- Como ya sabes, todo lo que escribas entre <p> y </p> se representa como un párrafo. Aunque pongas saltos de línea en el código HTML, al representarlo saldrá un sólo párrafo. Aunque pongas diez espacios seguidos, al representarlo saldrá uno solo.

- Sí, eso ya lo sé.

- Con el elemento PRE, los saltos de línea y los espacios en blanco que dejes saldrán representados. Esto es útil por ejemplo para escribir código de programas.

- Ya veo.

- En realidad hay una manera de provocar un salto de línea en un punto predeterminado usando el elemento P, que es con el elemento BR:

Como es un elemento vacío, no puedes poner etiqueta final. Simplemente donde escribas <br> habrá un salto de línea.

- Pero tú me dijiste que un salto de línea es donde termina un párrafo y empieza otro.

- Sí. Recuerda que tratamos de separar la estructura de la apariencia. Por eso no te recomiendo que uses el elemento BR, a menos que sea absolutamente necesario.

- ¿Y si lo que queremos es impedir un salto de línea en un punto?

- Pues en vez de poner un espacio normal, pones un espacio de no separación.

- Ah, muy bien, ¿y cómo?

- Para escribir un espacio de no separación utilizamos el código   (non-breaking space). Por ejemplo: salto impedido. Pero seguimos. Otros elementos que conocemos ya son los encabezados de sección:

El encabezado H1 es más importante que el H2, el H2 más importante que el H3, y así sucesivamente hasta el H6 que es el menos importante..

- Sí, ya lo sé.

- Pues seguimos. Otro grupo de elementos de texto son las citas. Se distingue entre citas en línea (Q) y citas en bloque (BLOCKQUOTE):

El elemento Q es para citas cortas (frases, refranes...) y las citas largas contienen su propio párrafo o párrafos (como ves contiene elementos en bloque, no en línea, así que no puede contener palabras directamente).

- Ya. ¿Y qué diferencia hay entre CITE y Q?

- Bueno, lo normal es meter en CITE el origen de la cita (el autor, el libro, la persona que dijo eso, etc.) y en Q la cita en sí. De todos modos, tanto Q como BLOCKQUOTE tienen un atributo cite donde puedes poner el origen de la cita, aunque normalmente no aparecerá directamente representado.

-Bueno, vale.

- Por último, tenemos el elemento ADDRESS, que da información de contacto del autor, y cuando aparece suele hacerlo al principio del documento:

¿Seguimos?

- Seguimos.

- El siguiente grupo de elementos se refiere a listas. Ya las hemos usado antes...

- Sí, OL y LI, ¿no?

- Exacto, y hay algunos más. Existen tres tipos de lista: listas ordenadas, listas no ordenadas y listas de definiciones.

- ¿Qué es exactamente cada cosa?

- Para entender la diferencia entre listas ordenadas y no ordenadas el ejemplo más claro es el de la receta de cocina: los ingredientes los pondrías en una lista no ordenada, y los pasos para cocinar la receta en una lista ordenada, porque en ese caso el orden es importante.

- Claro, los ingredientes los puedes conseguir en cualquier orden, pero la receta la tienes que preparar en el orden correcto.

- Justo. Por eso normalmente en las listas ordenadas los objetos salen numerados y en las listas no ordenadas salen con un marcador, como un circulito o un cuadradito.

Los LI son como sabes los objetos de la lista (list items).

- Sí, pero oye, si dentro de una lista sólo puede haber elementos LI, ¿quiere eso decir que no se pueden anidar unas listas dentro de otras?

- No, mira:

- Ah, o sea que si quiero anidar una lista tengo que meterla dentro de un elemento LI, ¿no?

- Exactamente. Bueno, las listas de definiciones (elemento DL, definition list) son ligeramente más complicadas. En estas listas aparecen dos tipos de objetos de lista: los términos definidos (DT, definition term) y las definiciones de los términos (DD, definition description). En el apartado anterior de este tutorial te he puesto una de estas listas con la utilidad de los elementos de frase.

En la especificación de HTML tienes un ejemplo en que se utilizan al mismo tiempo los tres tipos de listas.

- Sí, está bastante bien.

- Bueno, pues ya hemos acabado con las listas.

- Qué rápido. Pues seguimos.

- Hablamos ahora de las tablas. Las tablas se usan como su nombre indica para marcar datos tabulares. Las tablas pueden llegar a ser bastante complejas, y de hecho tengo pensado dedicar un tutorial completo a hablar sólo de tablas. Pero lo normal es que las utilices para hacer tablas sencillas y entonces no tienen mucha dificultad.

- Bien, me alegro.

- El elemento que se usa es el elemento TABLE:

- ¿Te importaría explicarme qué son todos esos elementos?

- Por supuesto que no. CAPTION es el título de la tabla, lo que dice qué es la tabla. Por ejemplo, "Evolución de la población durante los últimos 10 años".

- Bien, eso está claro.

- COL y COLGROUP se usan para agrupar columnas, mientras que THEAD, TFOOT y TBODY se usan para agrupar filas. Lo mejor es que son todos opcionales, y para los usos normales lo más seguro es que no tengas que utilizarlos. Así que ya hablaremos de ellos en un futuro tutorial.

- Vale, pero no estoy muy de acuerdo contigo. Según lo que has puesto arriba, debe haber uno o más elementos TBODY dentro del elemento TABLE.

- Eeh, sí, tienes toda la razón, pero mira:

Lo que quiere decir esto es que en las tablas sencillitas, no hace falta poner las etiquetas del elemento TBODY.

- Ya entiendo. ¿Qué es TR?

- TR es una fila de la tabla (table row). Dentro de cada fila de la tabla hay varias celdas:

Como ves hay dos tipos de celdas: de datos (TD, table data), y de encabezado (TH, table header):

Para que lo veas con un ejemplo, este es un caso típico de tabla HTML:

<table>
 <tr>
  <th>Elemento</th>
  <td><code>TR</code></td>
 </tr>
 <tr>
  <th>Modelo de contenido</th>
  <td>uno o más elementos <code>TD</code>
      y/o <code>TH</code></td>
 </tr>
 <tr>
  <th>Etiqueta inicial</th>
  <td>obligatoria</td>
 </tr>
 <tr>
  <th>Etiqueta final</th>
  <td>opcional</td>
 </tr>
<table>

- Menudo lío. Y eso que es sencilla.

- Sí. Y aunque éstos son todos los elementos que hay para tablas en HTML, encima hay un montón de atributos. Hablaremos a fondo en el futuro, de momento vamos a pasar al siguiente grupo de elementos.

- Muy bien.

- El siguiente grupo son los vínculos.

- Ah, eso está chupao.

- Sí, más o menos. El elemento A ya lo conocemos perfectamente:

Ya sabes, el atributo href para convertirlo en origen de vínculo y el atributo name para convertirlo en destino.

- ¿Ya está? ¿Pasamos al siguiente grupo?

- No, no tan rápido. Hay más. El elemento LINK, que si recuerdas se puede colocar dentro del elemento HEAD también pertenece a este grupo.

- Bueno, sí, en cierto modo vincula unos documentos con otros, porque es lo que usábamos para vincular la hoja de estilo, ¿no?

- Sí:

Además de vincular hojas de estilo, puedes vincular otros documentos. Esto se usa para poner en la información de cabecera del documento cuáles son los documentos que están relacionados con éste. Por ejemplo:

<head>
  <title>Capítulo 2</title>
  <link rel="Index" href="../indice.html">
  <link rel="Next"  href="Capitulo3.html">
  <link rel="Prev"  href="Capitulo1.html">
</head>

En vez de (o además de) especificar el atributo rel puedes especificar el atributo rev, que expresa un vínculo inverso. Por ejemplo, si en el documento Capitulo2.html pones esto:

<head>
  <title>Capítulo 2</title>
  <link rel="Glossary" href="glosario.html">
</head>

en el glosario también podrías expresar esa misma relación, así:

<head>
  <title>Glosario</title>
  <link rev="Glossary" href="Capitulo2.html">
</head>

El primero dice "glosario.html" es mi glosario, y el segundo dice yo soy el glosario de "Capitulo2.html".

- Mmm, ya veo. Un poco raro. ¿Y qué cosas puedo poner en rel y rev?

- Puedes ver los tipos de vínculos en la especificación. El atributo rel también lo puedes poner en el elemento A.

- Ah, entonces a eso te referías en el tutorial anterior cuando decías que un vínculo se caracterizaba por su origen su destino y su tipo, ¿no?

- Sí, eso mismo. De momento el elemento LINK no lo utilizan muchos navegadores, pero podría ser útil para crear barras de navegación automáticas. Como lo más probable es que eso suceda en el futuro, puedes acostumbrarte a usarlos. Además hay motores de búsqueda que los utilizan para indexar tu sitio web y para eso son muy útiles.

- Muy bien.

- Por último, el elemento BASE dice cuál es el URI base al que se añaden los URLs relativos que haya en el documento. De esto hablamos de sobra en el tutorial anterior y espero que no tengas muchas dudas:

El URI base se especifica como el valor del atributo href del elemento. Y debe ser un URI absoluto.

- Muy bien.

- Perfecto, pues vamos al siguiente grupo.

- El siguiente grupo de elementos son los relacionados con objetos incluidos.

- ¿Qué quiere decir eso?

- Objetos incluidos son imágenes, aplicaciones, documentos externos, y también las imágenes con zonas sensibles.

- Vaya, pues es un grupo muy grande, ¿no?

- Sí. En teoría valdría con un solo elemento, el elemento OBJECT que vale para todo, pero de momento no está bien implementado en los navegadores existentes y todavía hace falta usar los elementos antiguos, que son unos cuantos.

- Pues qué fastidio, ¿no?

- Sí, desgraciadamente es lo normal así que vete acostumbrando. Veamos el elemento OBJECT:

Si vas a la especificación, verás que tiene unos atributos que dan un poco de miedo.

- Pues sí, un poquillo...

- La mayoría los aprenderás cuando aprendas a hacer aplicaciones que puedas poner en páginas web, así que de momento no vamos a verlo más a fondo.

- Bueno, me parece buena idea.

- Para algo más simple como poner una imagen en teoría bastaría algo así:

<object data="logo.gif" type="image/gif">
<strong>HTML con Clase</strong>
</object>

Así, si por cualquier motivo el usuario no puede cargar o no puede ver la imagen, en su lugar lo que aparece es lo que hay dentro del OBJECT. Podría ser otro elemento OBJECT, pero en este caso es texto simple. El problema es que como te he dicho, esto no funciona muy bien en los navegadores actuales...

- Sí, ¿y entonces?

- Entonces hay que utilizar el elemento IMG:

El ejemplo anterior se convertiría en esto:

<img src="logo.gif" alt="HTML con Clase">

- Bueno, es más sencillo, ¿no?

- Sí, pero claramente es menos flexible. Pero bueno, cuando uses el elemento IMG no olvides que el atributo alt, que contiene el texto alternativo a la imagen, es obligatorio, y sólo puede contener letras, no código. Si tu imagen es un adorno que no tiene texto alternativo especificas alt="", aunque entonces debería estar en una hoja de estilo. También es interesante especificar los atributos width (anchura) y height (altura) para acelerar la carga de las páginas.

- Vale, vale, no te embales.

- Tranqui, no vamos a hablar más de esto de momento. A este grupo pertenecen además los elementos APPLET (que está desaprobado), el elemento PARAM (para pasar parámetros a las aplicaciones), y los elementos MAP y AREA que se utilizan para crear imágenes con "zonas sensibles" o mapas de imágenes. Si quieres más información mira en la especificación donde hay un capítulo entero dedicado a todo esto.

- Bueno, vale.

- En el futuro tendremos un tutorial sobre esto. Pero vamos al grupo siguiente.

- Vamos, vamos.

- El grupo siguiente está relacionado con la especificación de reglas de estilo.

- ¿Te refieres a estilos como en CSS?

- Sí. Hasta ahora siempre hemos puesto las reglas de estilo en una hoja de estilo separada y la hemos vinculado al documento HTML a través de un elemento LINK.

- Sí...

- Pero hay otras dos maneras de declarar reglas de estilo: con un elemento STYLE o con un atributo style.

- ¡Vaya! No me habías dicho nada...

- No, y en realidad te recomiendo que sigas haciendo como hasta ahora, porque si la idea es separar la apariencia de la estructura, no tiene mucho sentido poner las reglas de estilo en el documento HTML.

- No, claro...

- Como mucho, para hacer pruebas, el elemento STYLE sí puede ser práctico:

Esto se pone dentro del elemento HEAD, y en un atributo tienes que especificar el lenguaje de la hoja de estilo, por ejemplo para una hoja CSS, sería así:

<style type="text/css">
<!--
 reglas de estilo...
-->
</style>

- Vale, entendido.

- Si especificas una hoja de estilo CSS externa con LINK y otra incluida con STYLE se tienen en cuenta las reglas de las dos, por eso se llaman hojas en cascada. Cuando hay conflictos, para saber qué reglas de estilo predominan, hay unas reglas de cascada precisas definidas por la especificación. Hablaremos de eso en el tutorial siguiente.

- Ah, muy interesante.

- La tercera forma de especificar estilos es el atributo style, con el que puedes especificar reglas de estilo para un elemento en concreto. Puedes ver un ejemplo en la especificación, pero nosotros no lo vamos a utilizar.

- Me parece muy bien.

- Además, HTML ha heredado de sus versiones anteriores varios elementos para dar estilo: TT, I, B, BIG, SMALL, FONT, BASEFONT, SUP, SUB y HR. Algunos de ellos están desaprobados y otros no. Pero en cualquier caso nosotros tampoco los vamos a usar, porque lo apropiado es usar hojas de estilo. La única excepción es el elemento HR, que sirve para dibujar una línea separadora horizontal, siempre que lo consideremos como una separación estructural:

De todas formas podremos controlar la apariencia de la línea de división con hojas de estilo y en muchos casos querremos que no aparezca en los navegadores modernos. Bueno, ya está, vamos con el siguiente grupo de elementos.

- Genial, pues vamos.

- El siguiente grupo de elementos son los relacionados con marcos. Los marcos en principio son una buena idea, porque permiten dividir la ventana en varias partes que son independientes entre sí, así puedes tener un menú fijo a la izquierda y a la derecha el contenido que cambia y se desplaza. Si estás viendo HTML con Clase con un navegador con soporte CSS2 como IE5 o NS6 verás un ejemplo de algo parecido.

- Pues sí, a mí me parece muy práctico.

- Sin embargo, tal y como están implementados, los marcos de HTML son horribles y no deberías usarlos.

- ¿Y por qué tú sí puedes?

- No, en HTML con Clase las subventanas están definidas con CSS, que es como debería ser, ya que, como sabes, la apariencia se especifica en las hojas de estilo, no en HTML.

- Sí, tienes razón...

- Léete este artículo sobre problemas de los marcos, y vamos a pasar al siguiente grupo.

- Estupendo.

- El siguiente grupo está relacionado con los formularios. Los formularios dan a las páginas web un grado de interactividad que, aunque no es muy grande, es bastante práctico para muchas cosas.

- ¿Por ejemplo?

- Por ejemplo para hacer búsquedas por palabras en un motor de búsqueda, para comprar o hacer pedidos, para escribir mensajes al dueño de la web, para suscribirse a revistas electrónicas o listas de correo, etc.

- Entiendo.

- Si ves la sección de la especificación dedicada a los formularios, verás que son un pequeño mundo en sí mismos. Hay muchos tipos de controles de formulario y elementos auxiliares, y algunas cuestiones técnicas.

- Sí, la verdad es que es bastante.

- Por tanto, como las tablas y los objetos, los formularios se merecen un tutorial aparte. De momento te resumo que un formulario está formado por un control FORM dentro del cual se sitúan los controles del formulario: botones, controles de entrada de texto, casillas de verificación, menúes, etc.

Normalmente los controles se insertan con un elemento INPUT, y según el valor del atributo type se obtiene un tipo de control u otro.

El elemento INPUT tiene muchos atributos. Según el tipo de control se usan unos u otros. ¿Vamos bien?

- Sí.

- Además existen otros controles como BUTTON (botón), TEXTAREA (un área grande rectangular para introducir texto), y SELECT (una lista de opciones).

Los elementos OPTION son cada una de las opciones seleccionables de una lista de opciones SELECT. El elemento OPTGROUP te permite agrupar opciones entre sí:

Tienes un ejemplo gráfico en la especificación.

- Muy bonito.

- Además puedes asociar un rótulo de texto con un control de formulario con el elemento LABEL:

También puedes agrupar controles de formulario con el elemento FIELDSET y poner un rótulo al grupo de controles con el elemento LEGEND:

Esos son todos los elementos de este grupo...

- ...que no son pocos...

- Todos los formularios tienen un botón de envío. Cuando el usuario lo pulsa, se envían los datos del formulario a un programa que se ejecuta en alguna computadora conectada a Internet. Esta aplicación está especificada por su URL con el atributo action del elemento FORM. Existen distintos métodos de enviar los datos, y en cada caso habrá que elegir el más apropiado. Pero esa y otras cuestiones las veremos como te dije en un futuro tutorial.

- Sí, lo vamos dejando todo para futuros tutoriales, pero bueno...

- Venga, vamos a por el siguiente grupo, que ya queda poco.

- El siguiente grupo de elementos son los relacionados con los scripts, y lo siento, pero para esto no tengo traducción. Son como programillas.

- Ah, programillas... ¿como por ejemplo?

- Los scripts que se usan en HTML son pequeños programas que se ejecutan en el ordenador del usuario. Tienen dos utilidades principales: la primera es validar formularios. Como te he dicho antes, cuanto el usuario pulsa el botón de enviar el formulario, los datos se envían al servidor para que los procese. Una vez procesados, el servidor envía la respuesta al usuario. Eso necesita tiempo, y si los datos enviados son incorrectos o insuficientes, es tiempo perdido. Por eso conviene comprobar la mayor cantidad posible de datos en el ordenador del usuario antes de enviar el formulario, y eso se puede hacer con scripts.

- Eso sí es una buena idea, ¿no?

- Sí, siempre y cuando los datos se validen en el ordenador del usuario, y además, en el servidor.

- ¿Y por qué hacer la comprobación dos veces?

- Porque no todos los navegadores tienen capacidad de ejecutar scripts, y algunos usuarios lo desactivan a propósito. Por tanto no puedes basarte en un script para que funcione una página.

- Entiendo. ¿Y por qué hay gente que desactiva los scritps?

- En primer lugar porque algunos navegadores tienen problemas de seguridad relacionados con JavaScript. No son problemas de JavaScript, sino de la implementación que hacen los navegadores de él. Eso le obliga a uno a actualizar su navegador periódicamente. Y otro motivo es porque con los scripts puedes abrir ventanas nuevas sin el permiso del usuario, lo cual fastidia bastante.

- Sí...

- La segunda utilidad de los scripts es crear HTML dinámico. Es decir, cambiar los estilos en tiempo real: visibilidad de elementos, cambios de posición, cambios de color, etc. Lo cual si se hace bien y sin exagerar te puede ayudar a conseguir documentos más atractivos.

- ¿Y es fácil?

- Pues... sí y no. En primer lugar tienes que aprender un lenguaje de scripts. El más utilizado con diferencia es JavaScript. En segundo lugar para cada navegador tienes que programar rutinas diferentes para hacer las mismas cosas, lo cual te obliga a multiplicar tu tiempo de aprendizaje. A medida que se vayan implementando los estándares será mucho más sencillo. También tendremos un tutorial sobre HTML dinámico en el futuro.

- Ah, genial.

- En cualquier caso recuerda que no todo el mundo tiene JavaScript, así que la utilización de tu página no puede depender de que JavaScript esté activado. Tómate eso como otra regla básica de diseño web.

- De acuerdo, de acuerdo.

- Aquí tienes el elemento SCRIPT. Es parecido al STYLE: va en el elemento HEAD y en su atributo type se especifica el lenguaje de scripts, por ejemplo, text/javascript:

Para tener en cuenta los navegadores sin soporte de scripts, existe el elemento NOSCRIPT. Si el navegador no ejecuta el script, sí debería mostrar el contenido del elemento NOSCRIPT, y viceversa:

En teoría, lo ideal es que el elemento NOSCRIPT no te fuera nunca necesario. Por último, también se pueden incluir sentencias de script dentro de elementos particulares. Así puedes hacer que sucedan cosas cada vez que ocurren ciertos eventos, por ejemplo, cuando el documento termina de cargarse, cada vez que el ratón pasa por encima de un párrafo, etc. Pero aún tenemos cosas que aprender antes de meternos en estos berenjenales. ¿Acabamos ya?

- Sí, vamos a terminar.

- Nos quedan cuatro o cinco elementos más para terminar el tutorial de hoy. Los dos primeros son los elementos INS y DEL, que se usan para marcar en el código HTML las partes que se han insertado y se han eliminado, junto con sus motivos. No es probable que lo utilices.

- Pues no, no se me habría ocurrido.

- Otro elemento especial es el elemento BDO, que está relacionado con la direccionalidad del texto. Te podría resultar interesante si mezclaras escritura occidental de izquierda a derecha con otros lenguajes donde se escribe de derecha a izquierda.

- Eeh... no, tampoco creo que lo utilice.

- Lo que suponía. Por último hay dos elementos muy útiles que vamos a usar bastante junto con las hojas de estilo: los elementos DIV y SPAN. Nos permiten agrupar un conjunto de elementos y declarar un conjunto de reglas de estilo para el conjunto. Por ejemplo, el color de fondo de un conjunto de párrafos.

- ¿Y en qué se diferencian?

- DIV es un elemento en bloque, y SPAN es un elemento en línea:

En el siguiente tutorial veremos cómo podemos declarar reglas de estilo para elementos particulares. CSS tiene varios métodos para hacerlo. Hasta ahora lo que hemos hecho ha sido asignar estilos a cada tipo de elemento. Se puede restringir eso a los tipos de elementos que sean hijos de otros tipos de elemento. Y se puede restringir todavía más usando los atributos de HTML class e id que pueden tener todos los elementos de HTML. Pero todo eso lo veremos a fondo en el siguiente tutorial.

- Sí, mejor en el siguiente tutorial, porque yo ya no estoy para estos trotes.

- Lo comprendo perfectamente. Pero anímate, que ya hemos acabado. Hay algunos elementos más, pero sobre algunos ya hablaremos en el futuro y sobre otros no porque están desaprobados.

- Tienes que poner la lista de los elementos que son en bloque y en línea.

- Ah sí, aquí está:

Ni se te ocurra aprendértelo de memoria. Es más fácil aplicar el sentido común.

- Ah sí, el sentido común, he oído hablar de él...

- Ahora lo que deberías hacer es investigar por tu cuenta. Ve navegando por ahí y ponte a mirar los códigos fuente de las páginas que visites. Te llevarás muchas sorpresas, así que si tienes alguna pregunta ya sabes dónde estoy. Y si quieres mandarme tus experimentos también.

- Muy bien.

- Pues venga, nos vemos en el próximo tutorial. Pásatelo bien.

- Vale, hasta otra.