Hola a todos, y bienvenidos a la sexta lección del Curso de Introducción a HTML5.
Tras haber visto el funcionamiento de los enlaces y su aplicación en el código, ahora hablaremos detenidamente sobre las listas. Se trata de una de las etiquetas más comunes con las que podrás usar los enlaces, y seguir poniendo en práctica lo aprendido.
En esta lección, crearemos un enlace que nos llevará a una lista creada por nosotros, y comprobaremos como también se pueden utilizar listas con nuestros enlaces más importantes.
No olvides aplicar estos conocimientos en tu propio proyecto.
¡Vamos a por ello!
RESUMEN DEL VÍDEO:
Hoy veremos las listas, que se declaran con <li>. Hay distintos tipos, como las ordenadas, que se definen con <ol>, y las desordenadas, que se definen con <ul>. Las primeras usan números o letras para ordenar, las segundas no usan nada y no ordenan. Otro tipo de lista es la de definición, que usa <dl>, la etiqueta <dt> para el elemento y <dd> para la descripción del mismo.
CÓDIGO DE EJEMPLO:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Mi sexta clase con TUTORIALESDEPROGRAMACIÓN.COM</title>
</head>
<body>
<h2>Lista desordenada</h2>
<ul>
<li>Tomates</li>
<li>Pepinos</li>
<li>Cebollas</li>
</ul>
<h2>Lista ordenada</h2>
<ol>
<li>Tomates</li>
<li>Pepinos</li>
<li>Cebollas</li>
<li>Coliflor</li>
<li>Berenjenas</li>
<li>Ajo</li>
</ol>
<h2>Lista de definición</h2>
<dl>
<dt>Chocolate</dt>
<dd>Elaborado a base de Cacao</dd>
<dd>Muy bueno en una tableta con leche</dd>
</dl>
<ul type="square">
<li type="square">Elemento 1</li>
<li type="circle">Elemento 1</li>
<li type="disc">Elemento 1</li>
<li type="circle">Elemento 1</li>
<li>Elemento 5</li>
</ul>
<h2>Enumeraciones</h2>
<p>Ordenado por type 1</p>
<ol type="1">
<li>Elemento 1</li>
<li>Elemento 2</li>
</ol>
<p>Ordenado por numeros romanos</p>
<ol type="I">
<li>Elemento 1</li>
<li>Elemento 2</li>
</ol>
<h2>Listas combinadas</h2>
<p>Ciudades del mundo</p>
<ul type="circle">
<li>Argentina
<ol>
<li>Buenos Aires</li>
<li>Bariloche</li>
</ol>
</li>
<li>Uruguay
<ol>
<li>Montevideo</li>
<li>Punta del Este</li>
</ol>
</li>
<li>Portugal
<ol>
<li>Sesimbra</li>
<li>Lisboa</li>
</ol>
</li>
</ul>
</body>
</html>Haz el siguiente ejercicio, para terminar de aprender lo que hemos visto en esta lección.
- Crea una lista que incluya los enlaces a los principales buscadores de Internet.
De esta forma, aplicareis lo aprendido en esta clase, así como lo aprendido en la lección de enlaces.
¿Te ha surgido alguna duda?
No dudes en ponerte en contacto con nuestro soporte a través de la intranet.
¿Seguimos?