Listas en HTML
Thursday, October 5th, 2006En un editor de textos como Microsoft Word podemos ordenar nuestros elementos con Numeracion y Viñetas, esta opcion en html esta disponible y se llaman Listas.
Las listas son de 3 tipos:
- Listas ordenadas
- Listas Desordenadas
- Listas de Definicion.
Listas Ordenadas.
Se llaman ordenadas porque tienen un orden secuencial, en Word las conocemos como Numeracion, cuando digo secuencial me refiero a que tienen un orden de menor a mayor, por ejemplo la forma en que mencioné los tipos de listas en este mismo documento.
Sintaxis:
< ol>
< li >elemento 1< /li >
< li >elemento 1< /li >
< li >elemento 1< /li >
Se visualizaría asi:
- elemento 1
- elemento 2
- elemento 3
Pero ¿De donde salen esos números?.
Bien, analicemos la sintaxis:
< ol >, corresponden a las siglas de Ordened List, y abarca todas las listas numeradas que conozcamos.
< li >, Corresponde a la etiqueta que inserta los elementos individuales de la lista, en otras palabras, es la etiqueta que hace posible el cambio de 1 a 2 de 2 a 3 y asi sucesivamente.
OL no es una etiqueta que no requiera atributos, tiene dos atributos:
type: para definir el tipo de numeracion a insertar, sus posibles valores son; 1, a, A, i, I. por defecto es 1.
start, permite empezar la numeración en un rango distinto a la secuencia automatica que el codigo HTML introduce.
¿Como asi?
Realicemos el siguiente ejemplo para ver como funciona:
< ol type="1" start="1">
< lh >Esta es mi lista de ejemplo< /lh>
< li >Este es el primer elemento de la lista< /li>
< li >Este es el segundo elemento de la lista< /li>
< li >Este es el tercer elemento de la lista< /li>
< /ol>
El mismo se visualizaria asi:
- Esta es mi lista de ejemplo
- Este es el primer elemento de la lista
- Este es el segundo elemento de la lista
- Este es el tercer elemento de la lista
Si observas bien en el codigo, introducimos un elemento nuevo LH, LH define un encabezado de Lista, es un elemento mas de la lista solo que sin numero.
Practica el codigo,cambia en type por letra a y A (minuscula y mayuscula), i (minuscula), I (mayuscula) y el start cambialo por cualquier numero mayor que cero (0).
Listas desordenadas
La sintaxis es basicamente la misma que la lista ordenada, cambian unicamente dos cosas:
1. Las Listas desordenadas no tienen el atributo start, basicamente porque no lo necesitan, esto se debe a que, com su nombre lo indica, no requieren de un orden estricto, en Word lo conocemos como Viñetas.
Sintaxis
< ul type="circle" >
< li >Primera viñeta< /li >
< li >Segunda viñeta< /li >
< li >Tercera viñeta< /li >
< /ul>
Se visualizaria asi:
- Primera viñeta
- Segunda viñeta
- Tercera viñeta
UL: Proviene de las siglas Unordened List, su atributo type podemos insertar los valores (dentro de comillas), circle y square.
LI: Al igual que en las listas ordenadas, cada LI corresponde a un nuevo elemento de la lista.
Listas de Definicion:
Las usaremos cuando necesitemos introducir un glosario de Terminos, por ejemplo:
- Posicionamiento en Buscadores
- Conjunto de tecnicas SEO, para ubicar determinado dominio en las primeras posiciones de los buscadores.
- HTML
- No es un lenguaje de Programacion, sino un lenguaje de marcas, conocido tambien como lenguaje interpretado, esto quiere decir que necesita de un navegador para poder visualizar su contenido. El HTML es el lenguaje nativo de las paginas web
- Navegador
- es un Software que permite visualizar el contenido de una pagina web en la red de redes… Internet.
dl: Son las siglas de Definition List. Esta etiqueta define el tipo de lista que se va a usar.
dt: Es el termino del glosario que usaremos.
dd: es la definicion propiamente dicha.
La lista de definicion tiene la particularidad que requiere de un termino y una definicion, el termino es de obligatorio cierre, no asi la definicion que es de cierre opcional.
