HTML: listas (1)
Etiquetas vistas hasta el momento
Etiquetas vistas hasta el momento:
|
|||
Nombre
|
Etiqueta inicial
|
Etiqueta final
|
Descripción
|
body
|
<body>
|
</body>
|
Cuerpo del documento |
em
|
<em>
|
</em>
|
Énfasis |
h1...h6
|
<h1>..<.h6>
|
</h1>...</.h6>
|
Encabezado de nivel n |
head
|
<head>
|
</head>
|
Cabecera del documento |
html
|
<html>
|
</html>
|
Elemento raiz del documento |
p
|
<p>
|
</p>
|
Párrafo |
strong
|
<strong>
|
</strong>
|
Énfasis fuerte, negrita |
title
|
<title>
|
</title>
|
Título del documento |
En el siguiente vídeo se explican los diferentes tipos de
listas que existen en HTML (ul, ol, dl) y la creación de listas anidadas.
Video: HTML: listas (1)
El lenguaje HTML, ya sea la versión HTML4 o la versión HTML5,
posee tres tipos de listas:
El lenguaje HTML, ya sea la versión HTML4 o la versión HTML5,
posee tres tipos de listas:
Cada una de estas listas se crea con una etiqueta específica
de HTML:
Lista no ordenada…… <ul> sus elementos se definen con la etiqueta
<li>
Lista ordenada….…… <ol> sus elementos se definen con la etiqueta
<li>
Lista de descripción…. <dl> sus elementos se definen con las etiqueta
<dt> y <dd>
Vamos a verlo mediante ejemplos:
Lista no ordenada - <ul> de "unordered
list" - lista no ordenada
Los elementos de la lista se indican con símbolos, como
círculos, cuadrados o rombos.
|
escribimos en html
|
se verá como
|
|
<ul>
<li>Primer término de la lista <li>Segundo término <li>Tercer término </ul> |
|
El estilo de una lista se puede cambiar, para que en vez
de un círculo relleno, un disco, sea el contorno del círculo o un rectángulo el
elemento marcador.
Antiguamente existía el atributo type en HTML que permitía cambiar el estilo de una
lista no ordenada. Pero ese atributo ahora está obsoleto y no se debe de usar. En
su lugar se debe emplear CSS, pero eso se verá en otro vídeo.
Lista ordenada - <ol> de "ordered list" - lista ordenada
Los elementos de la lista se indican con números o
letras.
|
escribimos en html
|
se verá como
|
|
<ol>
<li>Primer elemento de la lista <li>Segundo elemento
<li>Tercer elemento
</ol> |
1 Primer elemento
de la lista
2 Segundo elemento
3 Tercer elemento
|
Una lista ordenada puede hacer uso de los siguientes
atributos para modificar su comportamiento.
En HTML 4 y 4…. start que permite
indicar el valor inicial en el que debe comenzar la lista.
type que permite indicar el tipo de
numeración, como por ejemplo letras o números romanos.
En HTML 5… ......reversed, que permite indicar que la
numeración debe ser descendente.
En el siguiente ejemplo se muestran varias listas
ordenadas:
<p>tipos de listas ordenadas</p>
<ol>
<li>Elemento 1</li> 1. Elemento 1
<li>Elemento 2</li> 2. Elemento 2
<li>Elemento 3</li> 3. Elemento 3
<li>Elemento 4</li> 4. Elemento 4
</ol>
<ol type=”a”>
<li>Elemento 1</li> a. Elemento 1
<li>Elemento 2</li>
b. Elemento 2
<li>Elemento 3</li>
c. Elemento 3
<li>Elemento 4</li> d. Elemento 4
</ol>
<ol
type=”I”>
<li>Elemento 1</li> I. Elemento 1
<li>Elemento 2</li> II. Elemento 2
<li>Elemento 3</li>
III. Elemento 3
<li>Elemento 4</li> IV. Elemento 4
</ol>
Podemos variar en el atributo <ol type=”a”>,
cambiamos a por A y en la de números romanos igual, podemos variarlo a minúsculas
“i”
El uso del atributo reversed
para invertir el orden de numeración de las listas en HYML5, es un atributo booleano, lo que significa que sólo
puede tomar un valor que es el mismo nombre del atributo. En el ejemplo lo
podemos ver también combinado con el atributo type.
Lista de descripción - <dl> de "description
list" - lista de descripción
Cada término de la lista se define con <dt> y cada
descripción de un término se define con <dd>.
Y los elementos no se indican con símbolos, números o
letras, sino con un aumento del margen izquierdo, de la sangría izquierda.
La lista de descripción se emplea normalmente para
definir un glosario o un diccionario.
Podemos apreciar como las definiciones de cada término
poseen una sangría o margen izquierdo.
|
escribimos en html
|
se verá como
|
|
<dl>
<dt >Término 1º <dd>Definición del elemento 1º <dt>Término 2º <dd>Definición del elemento 2º <dt>Término 3º <dd>Definición del elemento 3º
<dd>Color del elemento 3º
</dl> |
Término 1º
Definición del elemento 1º
Término 2º
Definición del elemento 2º
Término 3º
Definición del elemento 3º
Color del elemento 3º
|
En el término 3º podemos ver cómo puede tener más de una descripción.
En HTML también se pueden crear listas anidadas. Una
lista anidada es simplemente una lista dentro de otra, y se pueden combinar de
cualquier forma. La lista que está dentro de otra se llama sublista.
<HTML>
<body>
<h3>Listas ordenadas sencillas</h3>
<ol type="1">
<li>Primer elemento</li>
<li>Segundo elemento</li>
</ol>
<h3>Listas ordenadas anidadas</h3>
<ol>
<li>Listas con letras
<ol type="A">
<li>Primer elemento de la lista
anidada</li>
<li>Segundo elemento de la
lista anidada</li>
</ol>
</li>
<li>Listas con numeración latina
<ol type="I">
<li>Primer elemento de la lista
anidada</li>
<li>Segundo elemento de la
lista anidada</li>
</ol>
</li>
</ol>
</body>
</HTML>
Debería verse
Listas ordenadas sencillas
- Primer elemento
- Segundo elemento
Listas ordenadas anidadas
- Listas con letras
- Primer elemento de la lista
anidada
- Segundo elemento de la
lista anidada
- Listas con numeración latina
I.
Primer elemento de la lista anidada
- Segundo elemento de la lista anidada
0 comentarios
Publicar un comentario en la entrada.