Lección 4: Listas


Listas no ordenadas

Aquí está la lista de cómo las partes deben buscar juntos:

<ul>
  <li>Cosa 1</li>
  <li>Cosa 2</li>
 </ul>

Nota: los espacios en blanco se ignora en HTML fuente (excepto en <pre></pre> etiquetas), pero el formato es importante para personas que crean y mantienen los HTML documentos. Tiene que mantener su fuente HTML limpio con sangría y los espacios en blanco para hacer más fácil a leer.

Listas Desordenadas vienen en diferentes estilos. Aquí hay tres de ellos:

Usted aprenderá más acerca de cómo los estilos de trabajo en la Lección 8.

Listas enumeradas

  1. Listas enumeradas se utilizan para elementosenumerados
  2. Esta es una lista enumerada con el tema que comienza <ol>
  3. Cada elemento de la lista es todavía un <li>.
  4. Cerrar con un </ol>
  1. Listas enumeradas pueden usar números o letras, mayúsculas o minusculas
  2. Incluso puedes utilizar letras griegas y números romanos..
  3. Esta lista se inició con <ol style="list-style-type: upper-alpha;">.


Listas anidadas

Listas pueden ser anidadas dentro de otras listas, a cualquier nivel que desee. Aquí esta una lista desordenada anidadas dentro de una lista ordenada que es en sí misma anidadas dentro de otra lista ordenada:

  1. Lista 1 parte 1
    1. Lista 2 parte 1
      • Lista 3 parte 1
      • Lista 3 parte 2
    2. Lista 2 parte 2
  2. Lista 1 parte 2

El código fuente HTML de esta tiene este aspecto:

<ol style="list-style-type: decimal;">
  <li>Lista 1 parte 1
    <ol style="list-style-type: lower-roman;">
      <li>Lista 2 parte 1
        <ul style="list-style-type: disc;">
          <li>Lista 3 parte 1</li>
          <li>Lista 3 parte 2</li>
        </ul>
      </li>
      <li>Lista 2 parte 2</li>
    </ol>
  </li>
  <li>Lista 1 parte 2</li>
</ol>


Listas de definiciones

Como se puede imaginar, esta se utiliza para las listas de palabras y sus definiciones.

HTML
Hyper-text Markup Language
WWW
World Wide Web
W3C
Consorcio World Wide Web
dl
lista de definiciónes
dt
definición de término
dd
descripción de la definición

El código fuente tiene este aspecto:

<dl>
  <dt>HTML</dt><dd>Hyper-text Markup Language</dd>
  <dt>WWW</dt><dd>World Wide Web</dd>
  <dt>W3C</dt><dd>Consorcio World Wide Web</dd>
  <dt>dl</dt><dd>lista de definiciónes</dd>
  <dt>dt</dt><dd>definición de término</dd>
  <dt>dd</dt><dd>descripción de la definición</dd>
</dl>

Ejercicios:

Copia pagina_basica.html a una página llamada listas.html y hacer lo siguiente en el nuevo documento:

  1. Establecer el título y un título de nivel superior (h1) a Listas.
  2. Añadir una lista desordenada de los temas de su propia elección. Utilizar un segundo nivel de partida (h2) por encima de esta lista para describir qué tipo de elementos se esta listando.
  3. Añadir una lista ordenada de los temas de su propia elección. Utilizar un segundo nivel de partida (h2) por encima de esta lista para describir qué tipo de elementos se esta listando.
  4. Crear una lista de definiciones de términos y sus descripciones. Utilizar un segundo nivel de partida (h2)por encima de esta lista para describir qué tipo de términos se esta describiendo.
  5. Crédito extra! Intente cada uno de los siguientes estilos con listas ordenadas: list-style-type: decimal, lower-roman, upper-roman, lower-alpha, y upper-alpha.
  6. Crédito extra! Crear un esquema utilizando una lista dentro de por lo menos tres niveles. Utilice la lista de los tipos de estilo apropiado para cada nivel.