ff-multiconverter, multimedia, audio, video, linux, ubuntu ubuntu kylin, china, releases, linux terminal, ubuntu, linux, comandos, shell conky, gadgets, ubuntu, linux SpeedTest-Cli, velocidad, red, consola, terminal tag foto 6 pinta, grafica, linux, ubuntu djl, juegos, yum, synaptic, paquetes ubuntu, releases, canonical psensor, ubuntu, linux, sistema, monitor

Guia HTML: listas de definiciones y anidadas.

html-questionsEn 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.
 
El lenguaje HTML nos permite insertar una lista dentro de otra. Se pueden anidar listas de distinto tipo, por ejemplo podemos tener una lista no ordenada y uno de los item puede ser una lista ordenada.

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:

Espero que esta publicación te haya gustado. Si tienes alguna duda, consulta o quieras complementar este post, no dudes en escribir en la zona de comentarios. También puedes visitar Facebook, Twitter, Google +, Linkedin, Instagram, Pinterest y Feedly donde encontrarás información complementaria a este blog. COMPARTE EN!

0 comentarios: