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:
0 comments:
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.