Listas HTML
Las listas son una forma de presentar texto ordenado y, usando estilos CSS, se pueden convertir en un sencillo sistema para crear menus de lo más sofisticado. En la página de ejemplo ejercicio01b.htm que te proponía al hablar de los formatos de cabecera tenías varias lineas con enlaces construídas con saltos de linea <br>. Pues te propongo que la modifiques con este código
<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>Zona de Lectura</title>
</head>
<body>
<h1><header>Zona para tus libros</header></h1>
<nav>
<ul>
<li><a href="/ebooks.htm">E-books</a></li>
<li><a href="/enpapel.htm">Papel</a></li>
</ul>
</nav>
<aside>
<p>Litas por meses</p>
<ol>
<li><a href="../listasenero.htm">Listas Enero</a></li>
<li><a href="../listasfebrero.htm">Listas Febrero</a></li>
</ol>
</aside>
<section>
<header><h2>Presentación</h2></header>
<p>Nuestra web se dedica a libros eléctronicos y en papel</p>
<dl>
<dt><b>El libro electrónico</b></dt>
<dd>El libro electrónico es un <b>documento digital</b> que permite leer un texto mediante un ordenador.
Habitualmente se usa un ordenador específico consistente en una pantalla de 7 a 10 pulgadas con solo botones de navegación para moverse por las págnas.<br>
Estos lectores de libros electrónicos (llamados abreviadametne ebook o libros electrónicos) inclluyen utilidades como señaladores de página y sistemas para escribir anotaciones.</dd>
<dt><b>El libro en papel</b></dt>
<dd>Es un documento escrito en papel que no necesitra ningún sistema anejo para ser leído<br>
Los libros en papel tienen un coste elevado en comparación con los llamados libros electrónicos y son más difíciles de reproducir. Su valor suele estar en el valor de lo clásico, lo vintage</dd>
</dl>
</body>
</html>
Cambia tu página ejercicio01b.htm con el código de este ejemplo y llámala ejercicio03.htm.
En este ejemplo tienes los tres tipos de listas que puedes crear con HTML
- <ul></ul>:
- estas etiquetas marcan las listas desordenadas. Los elementos de estas listas se marcan con las etiquetas <li></li>. Estas listas tienen un icono delante del texto del item de lista. Por defecto es un punto negro, pero es personalizable via CSS. En estas listas el orden en que aparezcan los elementos no altera el significado o el resultado de la información
- <ol></ol>
- estas etiquetas marcan las listas ordenadas. Los elementos de estas listas se marcan con las etiquetas <li></li>. Cada item de la lista es precedido por un número o una letra. Es personalizable via CSS . En estas listas el orden en que se citan los elementos es importante para la información.
- <dl></dl>
- estas etiequetas marcan las listas de definiciones. desordenadas, las listas de descripciones. Los elementos de estas listas tienen dos partes <dt></dt> un encabezado y un texto <dd></dd>. Estos párrafos que estás leyendo (desde <ul>
hasta aquí) está formateado como lista de definiciones. Es un tipo de lista aconsejable si queremos destacar un elemento y un texto relacionado con él.
Las listas son un excelente elemento para crear menus de navegación.
Aunque suelen verse como listas verticales, nada impide que se muestren en horizontal dandole el valor inlline-block o table-cell al estilo display de CSS
Listas anidadas
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Listas de ventas</title>
</head>
<body>
Los más vendidos
<ul>
<li><b>Enero</b>
<ol>
<li>Los asquerosos</li>
<li>Un cuento perfecto</li>
<li>Loba negra</li>
</ol>
</li>
<li><b>Febrero</b>
<ol>
<li>Sapiens</li>
<li>Reina roja</li>
<li>Un munod Feliz</li>
</ol>
</li>
</ul>
</body>
</html>
Tienes una lista no ordenada pra los meses y dentro de cada mes hemos insertado una lista ordenada. Puedes aplicar este esquema a cualquier tipo de listas. He dejado el ejemplo así de esquemático para no cargar la lectura, pero los títulos podríans er perfectamente enlaces
No hemos usado aún estilos, solo etiquetas para resaltar el nombre el mes y darle un aspecto más claro.