LISTAS EN HTML

Elaborado por: Brenda Ruiz

Tipo de listas

Manejamos 4 tipos de listas diferentes en HTML:

▪ Listas ordenadas
▪ Listas no ordenadas
▪ Listas de definición
▪ Listas de menú
Etiquetas de las listas

▪ Listas ordenadas

▪ Listas no ordenadas

▪ Cada elemento de la lista

Listas Ordenadas
Listas Ordenadas <ol>
Las listas ordenadas representan jerarquía, se usan cuando
los elementos deben llevar un orden. En Word lo
manejamos como listas numeradas.
En este caso podemos usar :
✓ Numeración
✓ Letras mayúsculas
✓ Letras minúsculas
✓ Romanos mayúsculas
✓ Romanos minúsculas
 Listas Ordenadas <ol>

No olvides
checar
donde lo
guardas
Iniciemos creando
nuestra página.
Recuerda escribir el
“nombre + .html”
Listas Ordenadas <ol>

Aquí está nuestra

estructura básica y
la primer lista
ordenada
Listas Ordenadas <ol>

CÓDIGO RESULTADO

La numeración
es el tipo de
lista
predefinida
Listas Ordenadas <ol>

Tipo Letras mayúsculas

• <ol type=A> El atributo “type” nos
Tipo Letras minúsculas sirve para definir el
• <ol type=a> tipo de numeración
que necesitemos usar
Tipo Romano mayúscula
• <ol type=I>

Tipo Romano mayúscula

• <ol type=i>
Listas Ordenadas <ol>

CÓDIGO RESULTADO
Listas Ordenadas <ol>

CÓDIGO RESULTADO
Listas Ordenadas <ol>

CÓDIGO RESULTADO
Listas Ordenadas <ol>

CÓDIGO RESULTADO
Listas Ordenadas anidadas

Una lista dentro de otra Resultado

Listas no Ordenadas
Listas no Ordenadas <ul>
Las listas no ordenadas no llevan un orden en específico. En
Word lo manejamos como viñetas.
En este caso podemos usar :
✓ Círculos
✓ Discos
✓ Cuadrados
Listas no Ordenadas <ul>

Aquí está nuestra

primer lista no
ordenada
Listas no Ordenadas <ul>

CÓDIGO RESULTADO

El disco es el
tipo de viñeta
predefinida
Listas no Ordenadas <ul>

Viñeta círculo El atributo “type” nos

• <ul type=circle> sirve para definir el
tipo de viñeta que
Viñeta cuadrada necesitemos usar
• <ul type=square>
Listas no Ordenadas <ul>

CÓDIGO RESULTADO
Listas no Ordenadas <ul>

CÓDIGO RESULTADO
Listas no Ordenadas anidadas

Una lista dentro de otra Resultado

Combinemos listas

Listas ordenadas con listas

Resultado
no ordenadas anidadas
Listas de definición
Listas de definición <dl>
Las listas de definición están compuestas por términos y sus
definiciones.
Maneja las etiquetas :
✓ <dl> Para iniciar una lista de definición
✓ <dt> Para poner el término
✓ <dd>Para poner su definición
Listas de definición <dl>

Aquí está nuestra

primer lista de
definición
Listas de definición <dl>

CÓDIGO RESULTADO
Las etiquetas
proporcionan las
sangrías
Listas de menú
Listas de menú <menu>
Las listas de menú son similares a las no ordenadas,
solo que pone menos espacio entre los elementos.
Maneja las etiquetas :
✓<menu> Para iniciar una lista de menú
✓<li> Para cada elemento de la lista
Listas de menú <menu>

Aquí está nuestra

primer lista de menú
Listas de menú <menu>

CÓDIGO RESULTADO