HTML (Lenguaje de marcas, 7ª parte): Listas y Comentarios en HTML

Junto con los párrafos y los encabezados, las listas son uno de los elementos HTML más comúnmente usados en las páginas web. Tras este capítulo sabremos, no sólo crear listas, sino crear varios estilos de estas, una para cada ocasión. Y no tardaremos en ponerlas en práctica ya que al final del capítulo crearemos la segunda página de la cual podemos ver un anticipo en la figura.

El lenguaje HTML define los siguientes tipos de listas:

  • Numerada u ordenada.
  • No ordenada.
  • Listas de glosario o de definición.
  • Menús.
  • Usadas con párrafos cortos.
  • Listas de directorio.

Pronto sabremos como crear cada una de ellas y cuando es conveniente usar una u otras, y comprobaremos, una vez más, la gran sencillez del lenguaje HTML una vez nos hemos habituado a él.

Etiquetas necesarias para crear listas

La forma de crear listas difiere ligeramente de los elementos HTML vistos hasta ahora, ya que consta de dos pasos. Primero hay que definir el tipo de lista y después deben insertarse cada uno de los elementos de lista.

Al crear una lista deberemos indicar su inicio y su fin. Para empezar la lista usaremos la instrucción de inicio de la etiqueta de esa lista. Existe una etiqueta para cada tipo distinto de lista, por ejemplo, para crear una lista no ordenada será necesario usar la etiqueta UL (su instrucción de inicio será <UL>). Una vez hemos abierto la lista deberemos insertar, como hemos dicho antes, cada uno de los elementos de lista. Para ello usaremos una nueva etiqueta (o dos en algún caso) que dependerá del tipo de lista. En el caso de la lista no ordenada los elementos se introducen con la etiqueta de una única instrucción LI.

La etiqueta UL no tiene ningún significado por sí sola, necesita a LI. Y por otro lado LI no puede ser usada como una etiqueta independiente sino que debe ir dentro de UL. Por esta razón en ocasiones se suele llamar a LI subetiqueta.

Antes de comenzar haremos un comentario más. La etiqueta <LI> tiene instrucción de fin (</LI>) que delimita el final del elemento de lista actual, pero es opcional usarla o no. Si no se hace se considera que el elemento termina cuando empieza el siguiente o cuando termina la lista. De hecho algunos navegadores al interpretar el código HTML ignoran completamente esta instrucción y sólo entienden que el elemento de lista ha terminado cuando se empieza otro o se acaba la lista.

Listas no ordenadas

Probablemente el tipo de listas más usados en las páginas web son las listas no ordenadas. Como hemos adelantado antes a modo de ejemplo, este tipo de lista queda delimitada por la etiqueta <UL>…</UL>(UL proviene deUnordered List, que significa lista no ordenada). Dentro de estas etiquetas insertaremos cada elemento con la etiqueta

  • . Veamos un ejemplo ligeramente más completo que el anterior:
Mi ordenador tiene las siguientes características:
<UL>
<LI>Procesador Pentium 166
<LI>CD-ROM 8x
<LI>Tarjeta de sonido 16 bits
<LI>Tarjeta de vídeo con 2 Mb
</UL>

Listas ordenadas

Este tipo de listas numera los elementos de lista en el orden en el que se han introducido en el código HTML. La numeración se realiza con números empezando por el 1.

Nota

Las últimas extensiones de HTML permiten elegir entre distintos tipos de numeración para las listas ordenadas. Estas extensiones serán cubiertas en un capítulo posterior.

Este tipo de listas queda delimitado por la etiqueta <OL>…</OL> (OL: Ordered List, Lista ordenada), y cada elemento se inserta, al igual que en el caso de listas no ordenadas, con la etiqueta <LI>.

Listas de glosario

Este tipo de listas es usado, como su nombre indica, para crear glosarios, es decir listas de definiciones o de descripciones. El principio y final de este tipo de listas se delimitan con la etiqueta <DL>…</DL> (DL: Definition List, Lista de definición). La inserción de elemento es ligeramente distinta a la del resto de listas ya que no se usa la etiqueta <<LI>>. Esto es así porque en este caso cada uno de los elementos de lista está compuesta de dos partes:

  • La palabra que queremos definir: para insertar la palabra usaremos la etiqueta <DT> que proviene de Definition Term (Término de definición). Esta nueva etiqueta funciona de forma muy similar a <LI> y la instrucción de fin (</DT>) es igualmente optativa.
  • La definición o descripción de esa palabra: una vez indicada la palabra es hora de poner su definición. Para ello usamos otra nueva etiqueta: <DD> cuyas siglas significan Definition Descriptión (parte de la definición que contiene la descripción). La definición suele ser un párrafo y será mostrado por los navegadores sangrado con respecto al texto anterior.

Directorios y menús

Las listas vistas hasta ahora son, sin duda, las más usadas, pero existen otros dos tipos que están algo más olvidadas por los creadores de webs: las listas de directorio y las listas de menú.

Las listas de menú son usadas cuando los elementos de lista son frases de una sola línea mientras que las listas de directorio fueron creadas para ser usadas cuando son términos cortos que pueden ser mostrados en múltiples columnas.

Nota

A pesar de las recomendaciones del estándar HTML los principales navegadores muestran las listas de directorios y menús de igual manera (o muy similar) a las listas no ordenadas. Por esta razón es aconsejable usar únicamente los tres primeros tipos de lista vistos.

Anidamiento de listas

Vistos todos los tipos de listas se nos puede plantear una pregunta: ¿Se puede incluir una lista dentro de otra?. La respuesta es SI. El lenguaje HTML permite insertar unas listas dentro de otras ya sean del mismo o de distinto tipo. A esta posibilidad se le llama anidamiento de listas y la forma de realizarlo es incluir todo el código de una lista dentro de uno de los elementos de la otra. En el siguiente ejemplo combinaremos algunos de los ejemplos anteriores para dar lugar a un listado con varios listas anidadas unas dentro de otras:

Los temas del número de este mes de nuestra revista son:

<LI>Un nuevo Internet: IPv6
<LI>El WWW cobra vida: ha llegado el
HTML dinámico
<LI>Qué ordenador comprarse:
<OL>
<LI>CPU rápida. Con las siguientes
características:<UL>
<LI>Procesador Pentium 166
<LI>CD-ROM 8x
<LI>Tarjeta de sonido 16 bits
<LI>Tarjeta de vídeo con 2 Mb
</UL>
<LI>Impresora a color de buena
definición.
<LI>Altavoces y cámara de vídeo.
<LI>Escaner color.
<LI>Módem de velocidad 28K o
superior.
</OL>

Comentarios en HTML

Se llama comentario en el ámbito de HTML las notas que el autor o autores ponen en el código para facilitar su entendimiento. Estos comentarios no son mostrados por el navegador y por tanto sólo serán visibles al leer el código HTML de la página web.

En general es recomendable ir insertando comentarios al crear una página para marcar determinadas partes y así encontrarlas más fácilmente. Algunos usos que suelen darse a los comentarios son:

  • Notas para recordar detalles del código la próxima vez que vayamos a cambiarlo, como por ejemplo para
    indicar por qué hemos usado una etiqueta y no otra, por qué hemos usado una lista numerada y no una no numerada, etc. Este tipo de comentarios son muy usados cuando las páginas son complejas.
  • Apuntar que queda por hacer en una determinada sección o como es conveniente cambiarla. O bien para
    indicar el comienzo o fin de una determinada sección de la página.
  • Para identificar fácilmente partes importantes del código o aquellas que cambian más a menudo.
  • Usos particulares de cada webmaster. De hecho los comentarios pueden usarse para cualquier cosa y cada programador de páginas web tiene su propio modo de usarlos.

Creación de comentarios en HTML

Para crear un comentario no se usa una etiqueta, aunque es una estructura parecida. En primer lugar ponemos una cadena que indica el comienzo del comentario: , dos guiones y el símbolo mayor que. La estructura de un comentario es por tanto:

<!Esto es un comentario->

Suele ser recomendable dejar un espacio entre ambas cadenas y el texto anterior y posterior, tal y como acabamos de mostrar.

Veamos algunos ejemplos prácticos de comentarios:

<!Aquí comienza el cuerpo de la página->
<!-Cambiar este párrafo para que se entienda mejor->
<!Debería añadir más enlaces en esta página->

Un Saludo.

Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s