Writing HTML | Acerca de | FAQ | Alumnos | Tags | Lecciones | anterior | siguiente |

6. Listas, Listas, Listas, y más Listas

Las listas pueden presentar elementos de información en un formato fácil de comprender.
¡De hecho, hay una lista aquí mismo, justo debajo del siguiente encabezado!

Objetivos

Después de esta lección será capaz de:

Lección

Muchas páginas Web muestran listad de elementos (que pueden ser ítems precedidos de un "topo" o bola, "lista desordenada"), o una lista numerada (ordenada).
Estas listas son fáciles de formatear en HTML, e incluso pueden ser entrelazadas (listas de listas) para producir un aspecto de esquema.
Las listas son muy útiles también para crear índices o tablas de contenidos para una serie de documentos o capítulos.

Listas Desordenadas

Las listas sin ordenar, o etiquetas ul, son aquellas que aparecen como una lista de elementos con "topos" o marcadores al comienzo.
Las marcas dependerán de la versión en particular de su browser y de la fuente de letra especificada para visualizar el texto HTML normal (por ejemplo, en los Macintosh las marcas son un pequeño cuadrado en tipo de letra Times, en la fuente Geneve son un punto gordo).

Aquí tiene un pequeño ejemplo de una lista sin ordenar:

Mi Lista Desordenada:

Y este es el código HTML que genera la lista:


     <B>Mi Lista Desordenada:</B>
     <ul>
     <li>Item 1
     <li>Item 2
     <li>Item 3
     </ul>

Las etiquetas <ul> marcan el comienzo y el final de la lista, y con <li> se indica cada elemento de la lista.

Listas Ordenadas

Las listas ordenadas son aquellas en las que el Browser va numerando cada elemento sucesivo de la lista empezando con el "1.".
Note que la única diferencia es que en vez de la etiqueta ul se pone la etiqueta ol (del inglés, "u"nordered frente a "o"rdered).

Utilizando el ejemplo anterior:

Mi Lista Ordenada:

  1. Item 1
  2. Item 2
  3. Item 3

Y este es el código HTML que genera la lista:


     <B>Mi Lista Ordenada:</B>
     <ol>
     <li>Item 1
     <li>Item 2
     <li>Item 3
     </ol>

Listas enlazadas

Las listas ordenadas y las desordenadas pueden tener diferentes niveles, cada uno de ellos indentado apropiadamente por su Web Browser. Su mayor trabajo será pues tratar de que cada elemento de la lista está propiamente definido y en su lugar correcto.

Puede resultar complicado con todos esas etiquetas <ol> <li> </ul> <li> flotando por ahí, pero recuerde únicamente la estructura básica:


      <ul>            <ol>
          <li>           <li>
          <li>           <li>
      </ul>           </ol>

Aquí tiene un ejemplo de una lista desordenada con subniveles de otras listas:

Lista Desordenada y Enlazada

Note cómo las marcas cambian según los diferentes niveles de la lista.

A continuación el código que generó la lista anterior:


     <ul><B>Lista Desordenada y Enlazada</B>
     <li>Este es el primer elemento
     <li>Este es el segundo elemento
     <ul>
     <li>Este es el primer subelemento del segundo elemento
     <ul>
     <li>Y éste es un subelemento de un subelemento
     <li>¿Aún perdido?
     </ul>
     <li>Este es el segundo subelemento del segundo elemento
     <li>Este es el tercer subelemento del segundo elemento
     </ul>
     <li>Este es el tercer elemento
     </ul>

Listas Enlazadas - Mezclando Listas

No sólo se pueden enlazar listas ordenadas en listas ordenadas, sino que se pueden mezclar diferentes tipos de listas. ¡Tranquilo! El HTML empieza a parecer feo pero mire cómo las listas pueden contener otras listas.

Por ejemplo, la siguiente lista ordenada contiene una lista desordenada:

Lista Desordenada y Enlazada

  1. Este es el primer elemento
  2. Este es el segundo elemento
  3. Este es el tercer elemento

Y este es el código HTML que produjo la lista. Note que el HTML ha sido indentado para su mejor comprensión:


<B>Lista Desordenada y Enlazada</B>
     <ol>
        <li>Este es el primer elemento
        <li>Este es el segundo elemento
           <ul>
           <li>Este es el primer subelemento del segundo elemento
              <ol>
              <li>Y éste es un subelemento numerado de un subelemento
              <li>Y éste es otro subelemento numerado de un subelemento
              <li>¿Aún perdido?
              </ol>
           <li>Este es el segundo subelemento del segundo elemento
           <li>Este es el tercer subelemento del segundo elemento
           </ul>
        <li>Este es el tercer elemento
     </ol>

Utilizando Listas en sus Documentos HTML

Nota: Si no tiene el documento de trabajo de la lección anterior, bájese una copia ahora.

Usando las etiquetas de listas podrá ahora añadir listas Ordenadas y Desordenadas a su página Web de Volcanes.

  1. Abra su área de trabajo.
  2. Abra su documento HTML en el editor de textos.
  3. Bajo el encabezado de Terminología de Volcanes usaremos una lista sin ordenar para mostrar ejemplos de palabras técnicas usadas en el estudio de volcanes. Vaya a esta sección en su documento HTML.
  4. Primero añada la siguiente frase:
    
         ¿Cuántos de estos conoce?
    
  5. Ahora introduzca el código HTML para crear la lista de términos:
    
          <ul>
              <li>caldera
              <li>vesicularidad
              <li>pahoehoe
              <li>rheología
              <li>lagar
          </ul>
    
  6. Ahora usaremos una lista ordenada para definir las partes de la asignación en esta lección. Bajo el encabezado Proyectos de Investigación introduzca lo siguiente: (Truco: Esta puede ser una buena oportunidad para copiar y pegar desde esta página Web con el ratón... ¡a menos de que le guste teclear texto!)
    
      Su misión es encontrar información y hablar sobre los volcanes,
      distintos de los listados anteriormente, que hayan entrado en erupción en los últimos
      100 años. Sus informes deben incluir:
      <ol>
        <li>Tipo de volcán
        <li>Localización Geográfica
        <li>Nombre, distancia y población de la ciudad más próxima
        <li>Datos de las más recientes y destructivas erupciones
        <li>Otros eventos asociados con las erupciones recientes
        (terremotos, inundaciones, corrimientos de tierras, etc.)
      </ol>
      <p>
      Después, escriba una página describiendo los mayores riesgos para las personas
      en la vecindad de este volcán. Especule con lo que haría si 
      estuviese a cargo de minimizar el riesgo para la población.
    
  7. Guarde su archivo HTML y actualícelo en su Web Browser.

Compruebe su trabajo

A lo mejor desea comparar su trabajo con un ejemplo de esta sección. Si sus listas son diferentes de las del ejemplo revise cómo las escribió en su editor de textos. Asegúrese de que encajan con las instrucciones de la sección Utilizando Listas en sus Documentos HTML, de esta lección.

Revisión

  1. ¿Qué valor tienen las listas en una página Web?
  2. ¿Cuál es la etiqueta HTML para una lista desordenada?
  3. ¿Y para una lista ordenada?
  4. ¿Cómo prepararía una lista enlazada?
  5. ¿Qué pasos daría para añadir listas a sus documentos?

Práctica independiente

Quizás desee experimentar con cambiar la lista ordenada que creó por una desordenada.
Inserte también una lista ordenada o desordenada de elementos en su documento HTML.
Asegúrese de comprobar que se muestra correctamente en el Browser.
¿Podría crear también listas que incluyeran otras listas?


A continuación....

Haciendo algo más que teclear únicamente texto -- Añadiendo imágenes a su página.

IR A.... | Índice de lecciones | anterior: "Diseñando con Estilo" | siguiente: "Formatos Gráficos y de Ficheros" |


Writing HTML Lección 6: Listas, Listas, Listas, y más Listas
©1995, 1996 Maricopa Center for Learning and Instruction (MCLI)
Maricopa County Community College District, Arizona

El enlace con el MCLI es Alan Levine --}
Comentarios a levine@maricopa.edu
Traducido al español por agma@usa.net, y corregido por Andrés Valencia

URL: