LISTAS
Listas No Ordenadas
Las listas no ordenadas son las más sencillas y las que más se utilizan. Una lista no ordenada es un conjunto de elementos relacionados entre sí pero para los que no se indica un orden o secuencia determinados. La etiqueta <ul>
encierra todos los elementos de la lista y la etiqueta <li>
cada uno de sus elementos.
Etiqueta | \<ul> |
---|---|
Atributos comunes | básicos, internacionalización y eventos |
Atributos propios | - |
Tipo de elemento | Bloque |
Descripción | Se emplea para definir listas no ordenadas |
Etiqueta | \<li> |
---|---|
Atributos comunes | básicos, internacionalización y eventos |
Atributos propios | - |
Tipo de elemento | Bloque |
Descripción | Se emplea para definir los elementos de las listas (ordenadas y no ordenadas) |
El siguiente código HTML muestra un ejemplo sencillo de lista no ordenada:
<html>
<head><title>Ejemplo de etiqueta UL</title></head>
<body>
<h1>Menú</h1>
<ul>
<li>Inicio</li>
<li>Noticias</li>
<li>Artículos</li>
<li>Contacto</li>
</ul>
</body>
</html>
Listas Ordenadas
Las listas ordenadas son casi idénticas a las listas no ordenadas, salvo que en este caso los elementos relacionados se muestran siguiendo un orden determinado. Cuando se crea por ejemplo una lista con las instrucciones de un producto, es importante el orden en el que se realiza cada paso. Cuando se muestra un índice o tabla de contenidos en un libro, es importante el orden de cada elemento del índice.
En todos estos casos, la lista más adecuada es la lista ordenada, que se define mediante la etiqueta <ol>
. Los elementos de la lista se definen mediante la etiqueta <li>
, la misma que se utiliza en las listas no ordenadas.
Etiqueta | \<ol> |
---|---|
Atributos comunes | básicos, internacionalización y eventos |
Atributos propios | - |
Tipo de elemento | Bloque |
Descripción | Se emplea para definir listas ordenadas |
El siguiente código HTML muestra un ejemplo sencillo de lista ordenada:
<html>
<head><title>Ejemplo de etiqueta OL</title></head>
<body>
<h1>Instrucciones</h1>
<ol>
<li>Enchufar correctamente</li>
<li>Comprobar conexiones</li>
<li>Encender el aparato</li>
</ol>
</body>
</html>
Listas de Definición
Las listas de definición apenas se utilizan en la mayoría de páginas HTML. Su funcionamiento es similar al de un diccionario, ya que cada elemento de la lista está formado por términos y definiciones. La etiqueta <dl>
crea la lista de definición y las etiquetas <dt>
y <dd>
definen respectivamente el término y la descripción de cada elemento de la lista.
Etiqueta | \<dl> |
---|---|
Atributos comunes | básicos, internacionalización y eventos |
Atributos propios | - |
Tipo de elemento | Bloque |
Descripción | Se emplea para definir listas de definición |
Etiqueta | \<dt> |
---|---|
Atributos comunes | básicos, internacionalización y eventos |
Atributos propios | - |
Tipo de elemento | Bloque |
Descripción | Se emplea para definir los términos de los elementos de una lista de definición |
Etiqueta | \<dd> |
---|---|
Atributos comunes | básicos, internacionalización y eventos |
Atributos propios | - |
Tipo de elemento | Bloque |
Descripción | Se emplea para indicar las definiciones de los elementos de una lista de definición |
El siguiente código HTML muestra un ejemplo sencillo de lista de definición:
``` html
Metalenguajes
- SGML
- Metalenguaje para la definición de otros lenguajes de marcado
- XML
- Lenguaje basado en SGML y que se emplea para describir datos
- RSS
- GML
- XHTML
- SVG
- XUL
- Lenguajes derivados de XML para determinadas aplicaciones
```
Actividad
Realice una página web con una temática de su preferencia (Deportes, Cocina, Moda, Casas, Construcción, entre otros) y utilice todos los elementos estudiados en el módulo.
Nota: Recuerde integrar los elementos de los otros módulos.