El lenguaje HTML proporciona un modo sencillo de representar elementos en forma de lista. HTML define tres tipos de listas:
- Listas ordenadas
- Listas no ordenadas
- Listas de definición
Ingredientes: Sublime Text3.
Nivel de dificultad: bajo.
Tiempo de cocción: 30 min.
Comenzamos:
1º: Abrimos el programa de Sublime Text3 e introducimos las siguientes etiquetas:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<!DOCTYPE html> <html> <head> <metacharset=”utf-8”> <tittle></title> </head> <body> </body> </html> |
2ºComenzamos a introducir primero nuestra lista no ordenada. La lista completa irá dentro de la etiqueta <ul>. Cada elemento que contenga la lista irá dentro de la etiqueta <li>. Así introduciremos nuestra lista de material no ordenada:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
<!DOCTYPE html> <html> <head> <metacharset=”utf-8”> <tittle></title> </head> <body> <ul> <li>Bolígrafo</li> <li>Lápiz</li> <li>Goma</li> <li>Agenda</li> <li>Cuaderno</li> <li>Grapadora</li> </ul> </body> </html> |
Y así quedará nuestra lista no ordenada:
- Bolígrafo
- Lápiz
- Goma
- Agenda
- Cuaderno
- Grapadora
3º Lo siguiente que haremos será crear una lista ordenada. La lista completa irá dentro de la etiqueta <ol>. Cada elemento que contenga irá dentro de la etiqueta <li>. Así introduciremos nuestra lista ordenada:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
<!DOCTYPE html> <html> <head> <metacharset=”utf-8”> <tittle></title> </head> <body> <ol> <li>Primero </li> <li>Segundo </li> <li>Tercero</li> <li>Cuarto</li> <li>Quinto</li> <li>Sexto</li> </ol> </body> </html> |
Y así quedará nuestra lista ordenada:
- Primero
- Segundo
- Tercero
- Cuarto
- Quinto
- Sexto
4ºAhora crearemos una lista de definición, que es similar a la de un diccionario. Cada elemento de la lista está formado por términos y definiciones. Las listas de definición van dentro de la etiqueta <dl>. El término irá dentro de la etiqueta <dt> y la definición irá dentro de la etiqueta <dd>. Así haremos nuestra lista de definición:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
<!DOCTYPE html> <html> <head> <metacharset=”utf-8”> <tittle></title> </head> <body> <dl> <dt>Término </dt> <dd>Definición del término</dd> </dl> <dl> <dt>Web </dt> <dd>Conjunto de información que se encuentra en una dirección determinada de internet. </dd> </dl> </body> </html> |
Así quedaría nuestra lista de definiciones:
Término
Definición del término
Web
Conjunto de información que se encuentra en una dirección determinada de internet.
5º Con las etiquetas de listas podemos crear además un menú, que lo haremos de la siguiente manera:
-El menú completo irá dentro de la etiqueta <nav>.
-Dentro de esta etiqueta introduciremos la etiqueta <ul> ya que es una lista no ordenada.
-Cada dato que pongamos en nuestro menú irá dentro de la etiqueta de enlace <a> y todo esto dentro de la etiqueta <li>.
El menú lo introduciremos de la siguiente manera:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
<!DOCTYPE html> <html> <head> <metacharset=”utf-8”> <tittle></title> </head> <body> <nav> <ul> <li> <a href=”#”>Datos Personales</a> </li> <li> <a href=”#”>Datos Académicos</a> </li> <li> <a href=”#”>Experiencia Profesional</a> </li> </ul> <nav> </body> </html> |
En el lugar de la # pondremos la url hacia donde queremos que nos envíe.
