Entendido.

Este sitio utiliza cookies para analizar la navegación. Si continúa navegando se entiende que acepta su uso. Ver más detalles.";

Aprende Web

Crea y diseña tus sitios en la Web.

Manual de HTML

HTML: lenguaje básico para crear páginas web

Y ahora tambien aprende a programar en C++ con Aprende Web C++

Manuales para la creación y diseño de páginas web

RSS. Suscribir canal.

Donativos

Si este sitio te parece interesante puedes contribuir con una pequeña aportación.

Aprende Web por Anyelguti is licensed under a Creative Commons Reconocimiento-NoComercial-SinObraDerivada 3.0 Unported License.

4. Listas (III)

4.3 Otras listas.

Listas de definición.

Además de las listas no ordenadas y listas ordenadas en HTML tenemos también las listas de definición.

Las listas de definición son aquellas en que los términos aparecen como en las entradas de un diccionario. Toda la lista va encerrada en la etiqueta <dl> ...</dl>.

Los elementos de la lista pueden ser de dos clases: términos y definiciones. Los términos van delimitados por la etiqueta <dt> ... </dt> y las definiciones van delimitadas por la etiqueta <dd> ... </dd>. veamos un ejemplo:

Código html

<p>Relieves de las costas</p>
<dl>
   <dt>Cabo</dt>
   <dd>Sector de costa que se adentra en el mar</dd>
   <dt>Golfo</dt>
   <dd>Sector del mar que se adentra en la costa</dd>
   <dt>Playa</dt>
   <dd>Costa baja formada por una acumulación de material sedimentario de arenas y gravas.<dd>
   <dt>Acantilado</dt>
   <dd>Escarpe litoral modelado por la acción erosiva del oleaje y de las corrientes.</dd>
</dl>

En el navegador este código lo veremos así:

Relieves de las costas

Cabo

Sector de costa que se adentra en el mar

Golfo

Sector del mar que se adentra en la costa

Playa

Costa baja formada por una acumulación de material sedimentario de arenas y gravas.

Acantilado

Escarpe litoral modelado por la acción erosiva del oleaje y de las corrientes.

En las listas de definición no se emplean viñetas. y la definición queda desplazada hacia la derecha respecto al término. Aunque no es habitual, cada término puede tener asociada más de una definición y cada definición puede tener asociados varios términos.

El aspecto de la lista puede variarse con el código CSS, indicando diferente estilo para los términos y definiciones, pero esto ya corresponde al manual de CSS.

Listas anidadas

Si incluimos una lista dentro de otra, tendremos unas listas anidadas. La lista que está dentro se mostrará desplazada a la derecha respecto a la que la contiene: Veamos un ejemplo:

El código HTML

<p>Regiones y Provincias del norte</p>
<ul>
   <li>Galicia</li>
   <ul>
      <li>La coruña/A Coruña</li>
      <li>Lugo</li>
      <li>Orense/Ourense</li>
      <li>Pontevedra</li>
   </ul>
   <li>Asturias</li>
   <li>Cantabria</li>
   <li>Pais Vasco/Euskadi</li>
   <ol>
      <li>Vizcaya/Bizkaia</li>
      <li>Guipuxcoa/Guipuzkoa</li>
      <li>Alava/Araba</li>
   </ol>
</ul>

En el navegador lo veremos así:

Regiones y Provincias del norte

• Galicia
• La coruña /A Coruña
• Lugo
• Orense /Ourense
• Pontevedra
• Asturias
• Cantabria
• Pais Vasco/Euskadi
1. Vizcaya /Bizkaia
2. Guipuxcoa /Guipuzkoa
3. Alava /Araba

Podemos anidar todo tipo de listas y hacer los niveles que queramos, con lo cual se pueden conseguir estructuras de esquemas bastante complejas.

Si estamos siguiendo sólo el manual de HTML seguiremos en la siguiente página:

Imágenes: insertar imágenes

Si seguimos el manual de CSS junto con el de HTML, nos iremos a ver los estilos de lo visto en las últimas páginas. Seguiremos en:

Estilo en enlaces

Página creada por ANYELGUTI.

Sugerencias: aprendeweb@aprende-web.net. Envia un

Visita nuestro blog par saber en qué estamos trabajando: Aprende Web Blog

Más sobre anyelguti en http://anyelguti.16mb.com