domingo, 1 de septiembre de 2013

Curso HTML desde 0. Capitulo 6



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:
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

LordPakusBlog

0 comentarios :

Publicar un comentario

Related Posts Plugin for WordPress, Blogger...