6. Enumera tu vida - Listas ordenadas y sin ordenar
De nuevo aquí con otro capítulo de este interminable manual... Hoy nos tocan listas. Creo que no hace falta explicar lo que es una lista, pero... yo hago esto para que un mono pueda programar, así que, por si se da el caso...
- Esto es una lista sin ordenar
- Con dos elementos
- Y esto una lista ordenada
- Esta tiene tres elementos
- Y este es el tercero
Más claro agua.
Listas:
Bien, ahora vamos a lo bonito, las etiquetas: <ul></ul> , <ol></ol> y <li></li>
¿Que hace cada una? ¿cómo se introducen? ¿se pueden anidar? ¿el cielo es azul? (Todo a su tiempo...)
<ul></ul> -> Define una lista sin ordenar (con puntos, la primera en el ejemplo).
<ol></ol> -> Define una lista ordenada (con números, como en el segundo ejemplo).
<li></li> -> Define un elemento de la lista.
Para colocar estas etiquetas, voy a reproucir cómo están hechos los ejemplos de arriba:
<ul>
<li>Esta es una lista sin ordenar</li>
<li>Con dos elementos</li>
</ul>
<ol>
<li>Y esto una lista ordenada</li>
<li>Esta tiene tres elementos</li>
<li>Y este es el tercero</li>
</ol>
Bien, ya vemos que es muy fácil. Ahora vamos a hacer algo más complejo, anidar listas.
<ul>
<li>Esta es una lista sin ordenar</li>
<li>Con tres elementos</li>
<ol>
<li>Y esto una lista ordenada </li>
<li>que está anidada</li>
<ul>
<li>Y con otra lista, sin ordenar</li>
<li>anidada a la lista ya anidada</li>
</ul>
</ol>
<li>Siendo este el tercero de ellos</li>
</ul>
Esto serían listas dentro de listas, y quedarían algo así:
- Esta es una lista sin ordenar
- Con dos elementos
- Y esto una lista ordenada
- que está anidada
- Y con otra lista, sin ordenar
- anidada a la lista ya anidada
- Siendo este el tercero de ellos
Esta operación se puede repetir hasta el infinito.
Ejempo Práctico:
Vamos a lo práctico, que es lo que nos importa. Teníamos el currículo, ya con enlaces y todo, pero vamos a hacer algo más "profesional". Vamos a usar listas para que sea más claro.
<html>
<head>
<title> Mi currículo </title>
</head>
<body>
<p>CURRICULUM VITAE</p>
< img src="http://webdelprofesor.ula.ve/economia/arandes/curriculo.gif" height="215" width="210" />
<p>Nombre completo: <br />
<ul>
<li>Un tal Carlos</li>
</ul>
</p>
<p>Estudios: <br />
<ul>
<li>ESO</li>
<li>1º de Bachillerato</li>
</ul>
</p>
<p>Inglés: <br />
<ul>
<li>Si, nivel básico</li>
</ul>
</p>
<p>Otros conocimientos: <br />
<ul>
<li>HTML</li>
<li>Plataformas CMS de software libre</li>
</ul>
</p>
<p>Email de contacto: <br />
<a href="mailto:ejemplo-html@mini-manual.de" alt="Pulsa para mandarme un correo">ejemplo-html@mini-manual.de</a> </p>
<p><a href="http://www.mi-web.com" alt="Visita mi sitio web">Página web</a></p>
</body>
</html>
Y se vería...
CURRICULUM VITAE
Nombre completo:
- Un tal Carlos
Estudios:
- ESO
- 1º de Bachillerato
Inglés:
- Si, nivel básico
Otros conocimientos:
- HTML
- Plataformas CMS de software libre
Email de contacto:
ejemplo-html@mini-manual.de
¿Queda mejor, no? Yo creo que si, aunque si no te lo parece, los comentarios están abiertos, ¡critíca! O cuéntame si te es útil, o si tienes dudas.
Comentarios
phoenixversuskraken - hace 2 meses
Madre mia, eres un crack :O Eres casi un hacker informatico