Curso WEBD: HTML – Clase 4
Bienvenidos a esta cuarta clase de HTML. En este Tutorial veremos las Listas, su función y los tipos de listas existentes.

La función de las Listas en HTML está muy clara, enumerar. Sin embargo, se le fueron dando diversas funciones, por ejemplo, las listas son muy útiles para crear barras de navegación.
Hay distintos tipos de listas:

Listas Ordenadas: Utilizamos la etiqueta

(ol = lista ordenada en inglés) y dentro de ella colocamos

(esta etiqueta no es necesario cerrarla, aunque podemos hacerlo y no nos altera en nada el resultado)

Ejemplo:

Código:

Lista de usuarios
<ol>
<li> Bazinga
<li> Austin
<li> Javiuchiha
</ol>

Resultado:

Como pueden ver,

se transforma en un número, por esto se llaman listas ordenadas.
El numero puede ser cambiado por letras o números romanos colocando el atributo type="Valor" en la etiqueta

.
Dentro de Valor podemos colocar:
1 Para ordenar las listas con números.
A Para ordenar con letras.
I Para ordenar con números romanos.

Además, la numeración no necesariamente debe comenzar desde el 1. Podemos agregar en la etiqueta
el atributo start="Valor" cambiando Valor por un número.
Por ejemplo, si colocamos
la lista comenzará del numero 5. Esto también funciona con listas de números romanos y también con las letras.

Resultado:



Código:

Lista de usuarios
<ol type=”a” start=”5”>
<li> Bazinga
<li> Austin
<li> Javiuchiha
</ol>




Listas desordenadas: A diferencia de las ordenadas, este tipo de lista no tendrá una numeración. Se define con la etiqueta
(lista desordenada en inglés) y dentro, como vimos anteriormente, la etiqueta
1. .
   
   Ejemplo:
   

   Código:

   Lista de usuarios
<ul>
<li> Bazinga
<li> Austin
<li> Javiuchiha
</ul>

   
   
   
   Las desordenadas también pueden cambiar de estilo aplicando el atributo type="valor" a la etiqueta
   (aplicando el cambio a todas las
   • ) o bien podemos cambiar un
   • específico.
     Dentro de Valor podemos colocar Circle, Disc o Square
     
     Veamos un ejemplo:
     

     Código:

     Lista de usuarios
<ul type="square">
<li> Bazinga
<li type="circle"> Austin
<li> Javiuchiha
</ul>

     
     
     Listas de definiciones: Los dos primeros tipos de listas eran muy parecidos. Las listas de definiciones tienen etiquetas totalmente diferentes pero muy fáciles de recordar. Como lo dice su nombre, usaremos este tipo de listas para dar definiciones a ciertos términos.
     Utilizamos la etiqueta
     (lista de definición en inglés) y dentro colocaremos dos etiquetas:
     
     Termino
     
     Definición
     
     Ejemplo:
     

     Código:

     <dl>
<dt>Web Design Foro</dt>
<dd>Un foro de diseño web/gráfico</dd>
<dt>Kn Anime</dt>
<dd>El mejor foro de Anime!</dd>
</dl>

     
     
     Damos por finalizada la 4º clase. Nos salimos un poco de la rutina de la página HTML que veníamos creando ya que antes de continuar se deben aclarar ciertas cosas que son muy útiles para nuestra futura página web.
     Un saludo!

Wow, que buena clase ahora si a leerla de nuevo xD, gracias

Buen aporte.. lo que no sabía era lo último de lista definida Yo usaba una lista dentro de otra

Saludos,

Excelente la clase xD

Esta bastante bien, gracias!

Gracias por la clase.

Un beso

Tus tutoriales deberías de hacerlos de otra forma, pero bueno, si así aprenden, no hay por que no hacerlo así

Excelente clase, muy bien explicado lo de las listas, +1.

Vaya o.o no sabia sinceramente que se pudiera hacer algo asi >:< gracias!

Woaaa salgo en la clase :fuckyea: , pero muy buena clase. Ya lo sabía pero de todos modos siempre es bueno repasar el HTML

Gracias:D

Muy Simple pero Weno!

Es muy útil, gracias por la clase :3