Curso HTML desde 0. Capitulo 6

• << Capítulo anterior
• Artículos Relacionados
• Capítulo siguiente >>

El capítulo de hoy trata sobre las listas, fundamentales para bastantes usos que tiene CSS (ya vereís que es CSS dentro de poco).

Las listas de html no son más que conjuntos de datos jerarquizados y estructurados.

Los tags más usados para generar listas son <ul></ul> para contener la lista como tal y <li></li> para contener los datos de cada elemento de la lista. En vez de <ul> se puede usar <ol> y la única diferencia que hay es que numera cada uno de los elementos de la lista.

Con esto la teoria ya está acabada, ahora un poco de código... Veréis que las listas se pueden anidar y generar arboles realmente complejos de información.

Código:
<ul>
  <li><a href="http://lordpakus.blogspot.com/"> Página principal </a></li>
  <li>
    <a href="#"> Tutoriales de programación </a>
    <ul>
      <li><a href="#"> Lenguajes </a>
<ul>
 <li><a href="http://lordpakus.blogspot.com.es/p/tutorial-de-programacion-cc.html"> C/C++ </a></li>
 <li><a href="http://lordpakus.blogspot.com.es/p/curso-de-html-desde-cero.html"> WEB </a></li>
 <li><a href="http://lordpakus.blogspot.com.es/p/java-desde-0.html"> Java </a></li>
 <li><a href="http://lordpakus.blogspot.com.es/p/tutorial-de-ensamblador-x86.html"> ASM </a></li>
 <li><a href="http://lordpakus.blogspot.com.es/p/tutorial-batch-bat-script-desde-0.html"> Batch </a></li>
</ul>
      </li>

      <li><a href="#"> Programación gráfica </a>
<ul>
 <li><a href="http://lordpakus.blogspot.com.es/p/lordpakus-game-engine.html"> Motores gráficos </a></li>
 <li><a href="http://lordpakus.blogspot.com.es/p/opengl-desde-0.html"> OpenGL </a></li>
 <li><a href="http://lordpakus.blogspot.com.es/p/directx-desde-0.html"> DirectX </a></li>
 <li><a href="http://lordpakus.blogspot.com.es/p/pakengine.html"> PakEngine </a></li>
 <li><a href="http://lordpakus.blogspot.com.es/p/t utorial-batch-bat-script-desde-0.html"> Batch </a></li>
</ul>
      </li>
      <li><a href="#"> otras opciones </a></li>
      <li><a href="#"> blablablablal </a></li>
    </ul>
  </li>
  <li><a href="#"> bliblibilblib </a></li>
</ul>


Lo que vemos:

• Página principal
• Tutoriales de programación
  • Lenguajes
    • C/C++
    • WEB
    • Java
    • ASM
    • Batch
  • Programación gráfica
    • Motores gráficos
    • OpenGL
    • DirectX
    • PakEngine
    • Batch
  • otras opciones
  • blablablablal
• bliblibilblib

Misma estructura de listas cambiando todos los ul por ol

1. Página principal
2. Tutoriales de programación
   1. Lenguajes
      1. C/C++
      2. WEB
      3. Java
      4. ASM
      5. Batch
   2. Programación gráfica
      1. Motores gráficos
      2. OpenGL
      3. DirectX
      4. PakEngine
      5. Batch
   3. otras opciones
   4. blablablablal
3. bliblibilblib

Nos vemos