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:

Identificar cÛdigos HTML para crear listas desordenadas, ordenadas y enlazadas en sus p·ginas Web.
Ubicar diferentes tipos de listas en sus documentos HTML y ver los cambios en su browser.

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:

Item 1
Item 2
Item 3

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:

Item 1
Item 2
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

Este es el primer elemento
Este es el segundo elemento
- Este es el primer subelemento del segundo elemento
  - Y Èste es un subelemento de un subelemento
  - øA™n perdido?
- Este es el segundo subelemento del segundo elemento
- Este es el tercer subelemento del segundo elemento
Este es el tercer elemento

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

Este es el primer elemento
Este es el segundo elemento
- Este es el primer subelemento del segundo elemento
  1. Y Èste es un subelemento numerado de un subelemento
  2. Y Èste es otro subelemento numerado de un subelemento
  3. øA™n perdido?
- Este es el segundo subelemento del segundo elemento
- Este es el tercer subelemento del segundo elemento
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.

Abra su ·rea de trabajo.
Abra su documento HTML en el editor de textos.
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.
Primero aÒada la siguiente frase:
```
     øCu·ntos de estos conoce?
```

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>

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.

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

øQuÈ valor tienen las listas en una p·gina Web?
øCu·l es la etiqueta HTML para una lista desordenada?
øY para una lista ordenada?
øCÛmo prepararÌa una lista enlazada?
ø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

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: