Tec.

En Ingeniera en Sistemas Informticos Desarrollo de Pginas Web Facilitador: Carlos Isaias Rios Luna

CONSIGNA DE TRABAJO PRACTICA #3 SEMANA 1.

Tema: Listas de texto en pginas HTML. MODULO: Desarrollo de pginas web.

OBJETIVO GENERAL DE UNIDAD: Desarrollar pginas Web utilizando estructura y etiquetas HTML. OBJETIVOS ESPECFICOS: Cambiar propiedades de diseo de pginas y aplicacin de etiquetas bsicas. Conocer las etiquetas de formato de texto. Aplicacin de etiquetas de formato de texto en contenido de una pgina web. Conocer la creacin de listas ordenadas y desordenadas y la aplicacin en pginas. Crear pginas con listas ordenadas y desordenadas.

Practica a desarrollar:

Listas y mens
Hay elementos que permiten crear texto con varios formatos de listado: Estos pueden ser ordenados <OL> (se refiere a numerados, no ordenados por algun criterio), desordenados <UL> (no numerados),directorios <DIR>, menu <MENU> y listados de definicin <DL>. Veamos cmo es la sintaxis bsica y apariencia de estos elementos, a partir de los cuales, pueden hacerse combinaciones muy complejas mediante anidamientos de unos con otros, hasta conseguir prcticamente cualquier presentacin deseada: Esto es una lista ordenada (numerada): 1. Primera linea 2. Segunda linea Se escribe:
<OL> <LI>Primera linea <LI>Segunda linea </OL>

Tec. En Ingeniera en Sistemas Informticos Desarrollo de Pginas Web Facilitador: Carlos Isaias Rios Luna

Fjate en que los elementos <LI> no necesitan cierre. Terminan cuando aparece otro igual o se cierra la lista. Puede ser conveniente poner el cierre </LI> si se van a aplicar instrucciones de estilo. Esto es una lista desordenada ( no numerada):

Primera lnea segunda lnea

Se escribe:
<UL> <LI>Primera lnea <LI>Segunda linea </UL>

En este caso los nmeros han sido sustituidos por unos puntos gruesos. Esa es la apariencia por defecto; se puede cambiar usando el atributo TYPE con tres valores (el valor por defecto es DISC). Con el valorCIRCLE se ver:
o o

Primera linea segunda linea

Se escribe:
<UL TYPE=CIRCLE> <LI>Primera linea <LI>Segunda linea </UL>

Tambin puede usarse el valor SQUARE. As:

Primera linea segunda linea

Se escribe:
<UL TYPE=SQUARE> <LI>Primera linea <LI>Segunda linea </UL>

Las listas ordenadas no slo se pueden ordenar con nmeros. Tambin se pueden utilizar letras y numeracin romana tanto en maysculas como minsculas. Para esto se utiliza el atributo TYPE del elemento <OL> con los siguientes valores: TYPE=1 (por defecto) para nmeros, TYPE=A para letras maysculas, TYPE=apara letras minsculas, TYPE=I para numeracin romana en maysculas y TYPE=i para numeracin romana en minsculas.

Tec. En Ingeniera en Sistemas Informticos Desarrollo de Pginas Web Facilitador: Carlos Isaias Rios Luna

Esto es una lista ordenada con letras maysculas: A. B. C. D. Primera linea Segunda linea Tercera linea Cuarta linea

Se escribe:
<OL TYPE=A> <LI>Primera linea <LI>Segunda linea <LI>Tercera linea <LI>Cuarta linea </OL>

Esto es una lista ordenada con letras minsculas:

a. Primera linea

b. Segunda linea c. Tercera linea d. Cuarta linea Se escribe:

<OL TYPE=a> <LI>Primera linea <LI>Segunda linea <LI>Tercera linea <LI>Cuarta linea </OL>

Esto es una lista ordenada con numeracin romana en maysculas:

I.

II. III. IV.

Primera linea Segunda linea Tercera linea Cuarta linea

Se escribe:
<OL TYPE=I> <LI>Primera linea <LI>Segunda linea <LI>Tercera linea <LI>Cuarta linea </OL>

Esto es una lista ordenada con numeracin romana en minsculas: i. Primera linea ii. Segunda linea iii. Tercera linea iv. Cuarta linea

Tec. En Ingeniera en Sistemas Informticos Desarrollo de Pginas Web Facilitador: Carlos Isaias Rios Luna

Se escribe:
<OL TYPE=i> <LI>Primera linea <LI>Segunda linea <LI>Tercera linea <LI>Cuarta linea </OL>

En algunos casos puede interesarnos que la lista no comience por el nmero 1 (por ejemplo si es una lista que continua en otra pgina). Se puede conseguir con el atributo START combinado con TYPE. Esto es una lista ordenada con letras maysculas y que comienza por la E: E. F. G. H. Primera linea Segunda linea Tercera linea Cuarta linea

Se escribe:
<OL TYPE=A START=5> <LI>Primera linea <LI>Segunda linea <LI>Tercera linea <LI>Cuarta linea </OL>

El nmero que pones en el atributo START indica en que nmero o letra comenzar la lista. la E es la quinta letra. Esto es un men: Primera linea Segunda linea Se escribe:
<MENU> <LI>Primera linea <LI>Segunda linea </MENU>

La diferencia entre un men y una lista desordenada, es que las lneas en la lista desordenada comienzan en el margen izquierdo y las del men unas posiciones ms a la derecha (aunque eso depende del visualizador, con Netscape se ven igual). Esto es un directorio: Primera linea Segunda linea

Tec. En Ingeniera en Sistemas Informticos Desarrollo de Pginas Web Facilitador: Carlos Isaias Rios Luna

Se escribe:
<DIR> <LI>Primera linea <LI>Segunda linea </DIR>

Ocurre lo mismo que con el men, con Netscape no se aprecia diferencia. Esto es una lista de definicion: Primera linea Segunda linea Se escribe:
<DL> <DT>Primera linea <DD>Segunda linea </DL>

Fjate que ahora en lugar del elemento <LI> se utiliza <DT> y <DD>, y como tipo <DL>. Estos tres nuevos elementos tambin se pueden usar con cualquiera de los anteriores tipos de lista, alterando por completo su apariencia.

EJEMPLO

Crear una pgina Web con el ttulo Listas, en la que se visualicen listas desordenadas, ordenadas y de definicin, como la siguiente imagen:

Tec. En Ingeniera en Sistemas Informticos Desarrollo de Pginas Web Facilitador: Carlos Isaias Rios Luna
El cdigo utilizado es el siguiente:

EJERCICIOS DE PRCTICA:
Desarrolle los siguientes ejercicios en HTML:

1. Digite el cdigo en HTML, para obtener una pgina con el siguiente formato de lneas (son 7 lneas):

Tec. En Ingeniera en Sistemas Informticos Desarrollo de Pginas Web Facilitador: Carlos Isaias Rios Luna
2. Observe la siguiente pgina Web y digite el cdigo para obtener este formato:

3. Cree una pgina de nombre LISTAS.HTML y realice todos los ejemplos de los tipos de listas de la gua.