En una reciente limpieza a mi disco duro he encontrado esta guia que tenia guardada por ahi y creo que esta muy buena para empezar y conocer las nociones basicas del HTML.Lista de definiciones.
Como su nombre lo indica se utiliza para asociar un término y la definición del mismo. El navegador se encarga de destacar y separa el término y su definición.
Crearemos una lista con la definición de varios lenguajes de programación:
<html> <head> </head> <body> <dl> <dt>C++</dt> <dd>Es un lenguaje de programación, diseñado a mediados de los años 1980, por Bjarne Stroustrup, como extensión del lenguaje de programación C.</dd> <dt>Java</dt> <dd>Es un lenguaje de programación orientado a objetos desarrollado por Sun Microsystems a principios de los 90.</dd> <dt>JavaScript</dt> <dd>Es un lenguaje interpretado, es decir, que no requiere compilación, utilizado principalmente en páginas web, con una sintaxis semejante a la del lenguaje C.</dd> </dl> </body> </html>
Como podemos observar intervienen más marcas que en los otros dos tipos de listas. Las marcas que encierran a la lista son <dl> (Definition List) y </dl>
Ahora debemos poner a pares estos dos elementos <dt> (Definition Term) y <dd> (Definition Description)
El navegador se encarga de hacer el sangrado del contenido del elemento dt
Para recordar los nombres de estas marcas HTML:
<dl> viene de definition list
<dt> viene de definition term
<dd> viene de definition description
Listas anidadas.
Para el anidamiento de listas solo debemos tener cuidado en la correcta apertura y cerrado de las marcas
Implementaremos una página que enumere una serie de paises en una lista ordenada y luego en cada pais dispondremos una lista de hipervínculos de periódicos de dicho pais:
<html> <head> </head> <body> <ol> <li>Argentina <ul> <li><a href="http://www.lanacion.com.ar">La Nación</a></li> <li><a href="http://www.clarin.com.ar">Clarín</a></li> <li><a href="http://www.pagina12.com.ar">Página 12</a></li> </ul> </li> <li>España <ul> <li><a href="http://www.elpais.es">El País Digital</a></li> <li><a href="http://www.abc.es">ABC</a></li> <li><a href="http://www.elmundo.es">El Mundo</a></li> </ul> </li> <li>México <ul> <li><a href="http://www.jornada.unam.mx">La Jornada</a></li> <li><a href="http://www.el-universal.com.mx">El Universal</a></li> </ul> </li> </ol> </body> </html>
Se puede insertar en un elemento li una lista como podemos ver:
<li>Argentina <ul> <li><a href="http://www.lanacion.com.ar">La Nación</a></li> <li><a href="http://www.clarin.com.ar">Clarín</a></li> <li><a href="http://www.pagina12.com.ar">Página 12</a></li> </ul> </li>
Si te ha gustado el artículo inscribete al feed clicando en la imagen más abajo para tenerte siempre actualizado sobre los nuevos contenidos del blog:
No hay comentarios.:
Publicar un comentario
No insertes enlaces clicables, de lo contrario se eliminará el comentario. Si quieres ser advertido via email de los nuevos comentarios marca la casilla "Notificarme". Si te ayudé con la publicación o con las respuestas a los comentarios, compártelo en Facebook, Twitter, Tumblr, Google +, Pinterest o Instagram. Gracias.