miércoles, 10 de agosto de 2016

Lista Ordenadas y Desordenada

Creación de listas:

*Lista no ordenadas

<UL>
<LI>
</UL>

*Lista ordenadas

<OL>
<LI>
</OL>

Podemos usar diferentes iconos al principio de las listas

Actividad

Busca ejemplo de ambas listas donde se visualice las etiquetas, su aplicación y el formato para los iconos

LISTA ORDENADA

Las listas representan uno de los instrumentos más difundidos para organizar la información dentro de los sitios web. Una de sus características principales es la de proporcionar un cuadro claro y sintético del tema tratado.
HTML pone a disposición distintos tipos de listas

<ol>
  <li>Enchufar correctamente</li>
  <li>Comprobar conexiones</li>
  <li>Encender el aparato</li>

</ol>

Ejemplo de uso de la etiqueta ol
<!DOCTYPE html>
<html>
<head>  
<meta 
charset="utf-8">
<title>Ejemplo del uso de listas - aprenderaprogramar.com</title>
</head>
<body>
<ol>
<li value="20">Este será el número 20.</li>
<li>Este será el 21.</li>
<li>Este será el 22. Y así sucesivamente.</li>
</ol>

</body>
</html>



LISTA NO ORDENADA

Las listas desordenadas funcionan de manera similar a las ordenadas. La diferencia básica es que en el caso de las listas desordenadas no existen relaciones jerárquicas entre los elementos del elenco, por lo cual no se prevén ordenaciones progresivas como las obtenidas mediante números o letras.

<ul>
  <li>Inicio</li>
  <li>Noticias</li>
  <li>Artículos</li>
  <li>Contacto</li>
</ul>

Ejemplo de uso de la etiqueta ul
<ul style="list-style-type:disc">
<ul style="list-style-type:circle">
<ul style="list-style-type:square">
<!DOCTYPE html> <html> <head>        <meta charset="utf-8">  <title>Ejemplo del uso de listas - aprenderaprogramar.com</title> </head> <body> <ul> <li type="circle">Esto es un tipo de punto.</li> <li type="square">Este es otro.</li> <li type="disc">Y este es otro diferente.</li> </ul>
</body> </html>