2002 a 2006 |
|
Ángel
R. Puente Pérez |
7.- Listas.
A menudo hay que hacer listas de objetos, de conceptos, de definiciones...
Las listas pueden ser no numeradas
(el orden no importa) y numeradas:
7.1.- Listas no numeradas.
Comienza el listado con la etiqueta <ul>
(unordered list) y su final con la
etiqueta de cierre </ul>. Cada objeto
que forma la lista va precedido de la etiqueta <li>
(list item) sin etiqueta de cierre.
<html>
<head>
<title>
Listas no numeradas
</title>
</head>
<body>
Mis aficiones:
<ul>
<li> El cine.
<li> La montaña.
<li> La música.
</ul>
</body>
</html>
|
Comienza el listado con la etiqueta <ol>
(ordered list) y su final con la etiqueta
</ol>. Cada objeto que forma la lista
va precedido, igual que en las anteriores de la etiqueta <li>
sin cierre.
<html>
<head>
<title>
Listas numeradas
</title>
</head>
<body>
Mis preferencias:
<ol>
<li> Viajar.
<li> Salir con mis amigos.
<li> Dormir.
</ol>
</body>
</html>
|
resultado
7.3.- Listas anidadas.
Se pueden combinar unas listas dentro de otras: No
numeradas y/o numeradas. Hay que tener, simplemente, cuidado en la colocación
de las etiquetas de apertura y cierre.
<html>
<head>
<title>
Listas anidadas
</title>
</head>
<body>
<h3>Animales:<h3>
<ul>
<li> VERTEBRADOS.
<ul>
<li>Anfibios
<li>Peces
<li>Reptiles
<li>Aves
<li>Mamíferos
</ul>
<li> INVERTEBRADOS.
<ul>
<li>Insectos
<li>Arácnidos
<li>Crustáceos
<li>Miriápodos
</ul>
</ul>
</body>
</html>
|
resultado
Hemos incorporado la etiqueta de encabezado de tercer
orden <h3> para resaltar el concepto
que se va a clasificar. (Recuerda que los encabezados van del <h1>
el mayor al <h6> el menor).
7.4.- Listas de definiciones.
Son apropiadas, como su nombre indica, para establecer
listados de términos con sus definiciones. Las etiquetas de apertura
y cierre son <dl> y </dl>
(definition list). Los conceptos a definir
van con la etiqueta <dt> (definition
term) y las definiciones con la etiqueta <dd>
(definition definition).
<html>
<head>
<title> Listas de definiciones
</title>
</head>
<body>
<dl>
<dt>Concepto 1
<dd>Definición del Concepto 1
<dt>Concepto 2
<dd>Definición del concepto 2
</dl>
</body>
</html>
|
resultado
8.- Sangrados.
Se realizan con la etiqueta <blockquote>
de apertura y su correspondiente de cierre. Aumentan, también,
el interlineado, por eso se emplean para hacer una cita textual.
<html>
<head>
<title>
Sangrados
</title>
</head>
<body>
Este texto está justificado a la izquierda.
<blockquote>
Éste está sangrado respecto del anterior
</blockquote>
Éste vuelve a estar justificado a la izquierda.
</body>
</html>
|
resultado
Se puede utilizar más de una etiqueta si deseamos
un sangrado mayor:
<html>
<head>
<title>
Sangrados múltiples
</title>
</head>
<body>
Este texto está justificado a la izquierda.
<blockquote>
<blockquote>
<blockquote>
Éste está más sangrado
</blockquote>
</blockquote>
</blockquote>
Éste vuelve a estar justificado a la izquierda.
</body>
</html>
|
resultado
2002 a 2006 |
|
Ángel
R. Puente Pérez |
|