Sie sind auf Seite 1von 16

PGINAS

WEB

GUIA No. 4
TEMA:
HACER UNA PGINA WEB EN HTML(I PARTE)
COMPETENCIA
Disea e innova habilidades por medio de las TICS, en la creacin pginas web y
entornos dinmicos en la imagen de una empresa, en el aula de clase.

ACTIVIDAD
1. Analice y lea comprensivamente la siguiente informacin, realice un resumen en el
cuaderno sobre esta.
2. Investigue la tabla de colores en hexadecimal para paginas en HTML y escrbala en el
cuaderno.
3. Luego siga las instrucciones para disear una pgina web sobre su empresa, recuerde
que debe seguir los pasos de la gua.
QUE ES HTML
HTML es un lenguaje universal, que funciona en cualquier plataforma (Windows,
Macintosh, Unix, OS/2, etc.) y con cualquier navegador o browser (Netscape,
Internet Explorer, Mozilla Firefox, etc.). El precio que paga por su universalidad es
su poca sofisticacin, puesto que no es otra cosa que el viejo formato ASCII (y
con 7 bits en lugar de ocho, por lo que ni tan siquiera tiene acentos ni otros
caracteres especiales).
Por tanto, para que un documento HTML sea algo ms que simples caracteres
bsicos, debe contener, adems de dicho texto, una serie de instrucciones para el
browser que lo va a reproducir: estas intrucciones se denominan etiquetas o tags
y se distinguen del texto porque van entre guiones (< >). Estas etiquetas
contienen todo el resto de la informacin de la pgina web.
Por tanto, si un documento HTML no es ms que texto ASCII (parte sin guiones y
parte entre guiones: las etiquetas), cualquier documento web, hasta el ms
sofisticado, puede escribirse directamente desde un sencillo programa bsico de
texto, como el Cuaderno de Notas (Notepad) de Windows, por ejemplo.
Sin embargo, escribir un documento complejo de esta manera exige un
conocimiento exhaustivo de las numerossimas etiquetas existentes y sus normas
de utilizacin; para evitar esta dificultad, hay una serie de programas
denominados comnmente editores de HTML (desde el Composer al
Dreamweaver, pasando por tantos otros), que permiten al usuario componer una
Lic. JINETH RETAMOZO VEGA
Lic. Esp. NALIDA RODRIGUEZ HERNANDEZ

pgina (es decir, generar etiquetas HTML) desde un interfaz ms o menos


parecido al de un procesador de textos.
A la hora de crear una pgina web, y aunque utilicemos un editor de HTML, es
casi imprescindible entender la disposicin del etiquetado de un documento y
manejar siquiera las etiquetas ms elementales. Son varias las razones que
pueden aducirse para ello:

Los editores de HTML no son siempre herramientas perfectas, sobre todo


cuando ha habido muchas modificaciones durante el proceso de creacin.
Con bastante frecuencia se har necesario consultar el cdigo completo,
con las etiquetas HTML (lo que se suele denominar cdigo
fuente o cdigo madre) para corregir las disfunciones.

Tal vez la mejor manera de aprender a disear pginas web es observar las
pginas de los dems, cuyos cdigos fuente estn siempre disponibles para
ser imitados (o incluso copiados, tcnicamente, al menos). Pero, para ello,
es necesario entenderlos.

Los mismos editores HTML manejan trminos propios del lenguaje HTML
(heading, cellspacing, etc.), que es preciso comprender. Es necesario un
buen conocimiento de HTML para insertar otros cdigos ms potentes,
como los de JavaScript, por ejemplo. Adems de aprender a componer
una sencilla pgina web desde el ms bsico de los programas de texto
disponibles en Windows: el bloc de Notas.
EMPEZAR A TRABAJAR CON HTML:
Un documento HTML comienza siempre con la etiqueta <HTML>5, que indica que el documento
en cuestin est construido con dicho lenguaje.
La mayora de las etiquetas son pareadas, es decir, <...> corresponde al principio de la accin
y </...> indica el fin de dicha accin.
Por tanto, una pgina web estar siempre contenida entre las etiquetas <HTML> y </HTML>.
Por otra parte, todo documento HTML consta de dos partes: la cabecera (head) y el cuerpo del
documento (body).
LA CABECERA contiene bsicamente informacin destinada al browser (o navegador), que
queda oculta al usuario. Su etiqueta (pareada) es <HEAD>.
EL CUERPO es el documento que ve el usuario. Su etiqueta (pareada) es <BODY>.
Lic. JINETH RETAMOZO VEGA
Lic. Esp. NALIDA RODRIGUEZ HERNANDEZ

Lo primero que debe hacer es crear una carpeta con el nombre PGINA WEB o EL
NOMBRE DE SU EMPRESA en la unidad D:, luego de esto vamos a buscar Botn
Inicio, todos los programas, accesorios, bloc de notas y guardamos, entramos a
archivo, luego guardar como y all escribimos el nombre de nuestro agrado y a este
le ponemos con la extensin*.HTML o *.HTM, para que funcione con el explorador:

Y luego digitamos los siguientes comandos:


EJEMPLO 1
<HTML>
<HEAD>
</HEAD>
<BODY>
</BODY>
</HTML>

Despus de digitar, vamos a guardar o control G y despus vamos a la unidad D: y


buscamos en la carpeta creada, la pgina con el nombre que escribimos inicialmente
aparece con el logo de Internet Explorer y la abrimos para ver qu es lo que ocurre.
Esta primera pgina web est, lgicamente, vaca, pero es perfectamente operativa.
Para modificarla, basta con modificar sus cdigos en el editor de texto. No hace falta
cerrar para ello el navegador: una vez modificado y guardado el fichero, basta con
utilizar el comando Actualizar (o Refresh) para ver los cambios.
Lic. JINETH RETAMOZO VEGA
Lic. Esp. NALIDA RODRIGUEZ HERNANDEZ

Al visualizar los resultados del Ejemplo 1, en la barra de ttulo de la ventana


correspondiente slo aparece el nombre del navegador (con Netscape) o la
trayectoria completa del archivo (con Explorer). Esto sucede porque nuestro
documento no posee un ttulo propio. Para crearlo, debemos introducir una nueva
etiqueta (pareada) en la cabecera: <TITLE>. Nuestra pgina web podra quedar, por
tanto, as:
EJEMPLO 2
<HTML>
<HEAD>
<TITLE>Ejemplo 2</TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>
Ya sabemos crear el esqueleto de una pgina web. La siguiente tarea ser aprender a
introducir texto (entre los tags <BODY> y </BODY>) y controlar sus etiquetas
elementales.
El texto bsico de un documento HTML puede escribirse sin etiquetas. Cada
navegador lo visualiza entonces con el tipo y tamao de caracteres escogidos en su
configuracin por defecto, e introduce un salto de lnea cuando los caracteres
alcanzan el borde de la ventana.
Para dominar las cuestiones de formato (de caracteres, de prrafo, etc.) es necesario
utilizar las etiquetas correspondientes.
LA ETIQUETA BSICA
La etiqueta bsica, que controla el tipo de fuente utilizado, es <FONT>.
<FONT> es una etiqueta pareada. Por tanto, afecta a los caracteres introducidos
entre <FONT> y </FONT>. Pero sin ms especificaciones, la etiqueta an no sirve
para nada. Se puede especificar el tipo de letra (es decir, la fuente de caracteres)
aadindolo a la etiqueta, de la siguiente manera (en este caso, la fuente escogida es
Arial): <FONT FACE="Arial">...</FONT>.
Se
puede
especificar el
color
de
la
fuente con
la
etiqueta <FONT
COLOR="?">...</FONT>. Para especificar los colores, conviene saber al menos lo
siguiente:
1. Cada color posee su correspondiente cdigo.
2. Hay dos cdigos: hexadecimal lo ms habitual o RGB. En ambos casos se
trata de expresar las proporciones de tres colores bsicos: rojo, verde y azul.
Lic. JINETH RETAMOZO VEGA
Lic. Esp. NALIDA RODRIGUEZ HERNANDEZ

3. Los valores hexadecimales de los tres colores se expresan de la siguiente


manera:
1. Rojo: color:#ff0000;
2. Verde: color:#00ff00;
3. Azul: color:#0000ff;
4. Los mismos colores, expresados con los valores RGB (red, green, blue), son los
siguientes:
1. Rojo: color:rgb(255,0,0);
2. Verde: color:rgb(0,255,0);
3. Azul: color:rgb(0,0,255);
5. Todos los colores se expresan mediante combinaciones de estos tres colores
bsicos. Existen muchos programas que proporcionan los valores de todos los
colores que el usuario puede componer. Tambin en internet existen muchas
pginas con los Cdigos de colores.
6. Los colores ms bsicos pueden especificarse sin cdigo, simplemente
escribiendo la palabra correspondiente (por supuesto en ingls). Por
ejemplo: <FONT
COLOR="blue">...</FONT>, <FONT
COLOR="red">...</FONT>, etc.
7. Se puede especificar el tamao de la fuente con la etiqueta <FONT
SIZE="?">...</FONT>. El valor del tamao ("?") deseado puede suministrarse
de manera absoluta (un nmero del 1 al 7) o relativa (+1, +2, -1, -2, etc.,
teniendo en cuenta que el valor por defecto es 3).
8. Todas estas etiquetas se pueden combinar, de modo que con una sola se
controla, por ejemplo, el tipo, el tamao y el color de los caracteres: <FONT
FACE="Arial" COLOR="#0000FF" SIZE="5">...</FONT>.
Con esta etiqueta hemos visto ya la sintaxis bsica de las etiquetas
HTML,
que
podamos
formalizar
as:
<ETIQUETA
[ATRIBUTO="valor"]>. Lo anterior quiere decir que una etiqueta HTML
(por ejemplo, FONT) puede llevar uno o varios atributos (FACE,
COLOR, SIZE), cuyos valores se colocan entrecomillados tras el signo
igual (="arial", ="#0000FF", etc.).
Esto ser vlido para todas las etiquetas HTML que veamos a partir de
este momento.

Lic. JINETH RETAMOZO VEGA


Lic. Esp. NALIDA RODRIGUEZ HERNANDEZ

Ahora practiquen en el documento web y


etiqueta <FONT>. Por ejemplo:

observen las posibilidades de la

EJEMPLO 3
<HTML>
<HEAD>
<TITLE>Ejemplo 3</TITLE>
</HEAD>
<BODY>
Esto es texto simple: cada navegador lo
visualizar segn su configuracin por defecto.
<FONT SIZE="1">Este texto es tamao
1.</FONT>
<FONT SIZE="2">Este texto es tamao
2.</FONT>
<FONT SIZE="4">Este texto es tamao
4.</FONT>
<FONT SIZE="+1">Este texto es tamao +1 (que
es lo mismo que tamao 4).</FONT>
<FONT FACE="Arial" SIZE="5"
COLOR="FFFF00">Este texto posee varias
especificaciones de formato.</FONT>
</BODY>
</HTML>

La pgina web, tal y como est diseada en el Ejemplo 3, no posee ninguna


especificacin de lneas. A pesar de que las etiquetas estn ordenadas en varias
lneas, el navegador coloca todos los caracteres seguidos (slo tiene en cuenta un
nico espacio entre palabras). Para corregir este problema podemos utilizar la
etiqueta <BR>, que introduce un salto de lnea. La pgina quedara entonces as:
EJEMPLO 4
<HTML>
<HEAD>
<TITLE>Ejemplo 4</TITLE>
</HEAD>
<BODY>
Esto es texto simple: cada navegador lo
Lic. JINETH RETAMOZO VEGA
Lic. Esp. NALIDA RODRIGUEZ HERNANDEZ

visualizar segn su configuracin por


defecto.<BR>
<FONT SIZE="1">Este texto es tamao
1.</FONT><BR>
<FONT SIZE="2">Este texto es tamao
2.</FONT><BR>
<FONT SIZE="4">Este texto es tamao
4.</FONT><BR>
<FONT SIZE="+1">Este texto es tamao +1 (que
es lo mismo que tamao 4).</FONT><BR>
<FONT FACE="Arial" SIZE="5"
COLOR="FFFF00">Este texto posee varias
especificaciones de formato.</FONT>
</BODY>
</HTML>

Hay otra cuestin importante que debe saberse sobre la etiqueta


<FONT>: es la etiqueta ms bsica, y conviene empezar a aprender
por ella, pero est en desuso y desaparecer en las versiones futuras
de HTML. En su lugar, existen otras etiquetas ms potentes, que
iremos viendo en su momento.
ETIQUETAS DE FORMATO DE CARACTERES
A partir de este momento, se trata simplemente de aadir ms etiquetas a nuestra
an pequea coleccin, de modo que vayamos teniendo cada vez ms control sobre
el formato de los caracteres. La tabla siguiente muestra las ms comunes:
Cdigo
Funcin
<B>...</B>
Negrita
<I>...</I>
Cursiva
<U>...</U>
Subrayado
<SUB>...</SUB>
Subndice
<SUP>...</SUP>
Superndice
Hay que realizar algunos comentarios sobre las etiquetas precedentes:

Existe otra etiqueta similar a <B>, menos utilizada porque depende de las
opciones de configuracin del navegador: <STRONG>...</STRONG>.

Lic. JINETH RETAMOZO VEGA


Lic. Esp. NALIDA RODRIGUEZ HERNANDEZ

Otra etiqueta similar a <I>, menos utilizada porque depende de las opciones
de configuracin del navegador: <EM>...</EM>.

Conviene tener cuidado a la hora de manejar el subrayado, puesto que ste se


utiliza convencionalmente para indicar los hiperenlaces, y podra por tanto
resultar confuso para el usuario.
Es normal utilizar varias etiquetas para un mismo elemento de texto. En ese
caso, hay que tener cuidado para encajarlas correctamente. Por ejemplo:
<FONT FACE="Courier"><B><I>...</I></B></FONT> es correcto, pero
<FONT FACE="Courier"><B><I>...</FONT><B></I> es incorrecto.

OTRAS ETIQUETAS DE CARACTERES


Hay muchas otras etiquetas que afectan a los caracteres. Vamos a presentar varias
ms, que deben manejarse con cierta precaucin:
1.
2.
3.
4.
5.
6.

La etiqueta <PRE>...</PRE> indica que el texto afectado est


preformateado, de modo que el navegador s tiene en cuenta todos los
espacios y saltos de lnea definidos en la pantalla.
La etiqueta <BLINK>...</BLINK> indica texto parpadeante. Slo
funciona con Netscape.
La etiqueta <S>...</S> genera texto tachado.
La etiqueta <TT>...</TT> genera texto similar al de una mquina de
escribir (fuente courier de paso fijo).
La etiqueta <BIG>...</BIG> aumenta el tamao de letra (equivale
a <FONT SIZE="+1">).
La etiqueta <SMALL>...</SMALL> disminuye el tamao de letra
(equivale a <FONT SIZE="-1">).
EJERCICIO 1
Ya es hora de practicar con
las herramientas que hemos
presentado hasta ahora.
Cmo? Es muy sencillo:
crea una pgina web!
Si no se te ocurre nada, te
propongo que
reproduzcas esta pgina.
Para que no tengas que
teclearlo todo, aqu tienes el
archivo de texto, de modo
que, si quieres, no tienes
ms que pegarlo en tu editor
y colocar las etiquetas
correspondientes en los

Lic. JINETH RETAMOZO VEGA


Lic. Esp. NALIDA RODRIGUEZ HERNANDEZ

lugares adecuados.
(Por cierto: las fuentes que
he utilizado son Arial y
Comic Sans MS.)

Nota: para este ejemplo debe ingresar informacin de su empresa


En el apartado anterior se aprendio a controlar la apariencia de los caracteres.
(Recuerde, de todas maneras, que la etiqueta <FONT> est en desuso.) Vamos
ahora a estudiar las etiquetas fundamentales que controlan la organizacin de los
prrafos en un texto ms complejo. Ya conoce un tag que afecta a las lneas: <BR>.
Si deseamos que una lnea no se parta al llegar al final de la ventana del navegador,
debemos colocar al comienzo la etiqueta<NOBR>, y el navegador colocar entonces
un scroll o barra de desplazamiento horizontal.
Por supuesto, si queremos que haya ms lneas, al final s deber aparecer <BR>.

Los prrafos y su alineamiento


La etiqueta <BR> inserta un salto de lnea, pero no un salto de prrafo. En cambio,
la etiqueta <P>...</P> inserta una salto de lnea y una lnea en blanco, por lo que,
en la prctica, equivale a un nuevo prrafo.
Por supuesto, tanto <BR> como <P>...</P> pueden repetirse varias veces seguidas
para dejar ms distancia entre las lneas y los prrafos.
De todas maneras, slo podemos separar los prrafos con lneas completas (una,
dos, etc.), pero no podemos controlar el espacio entre los prrafos con la precisin
que permite, por ejemplo, el programa Word (con las opciones de espaciado anterior
y posterior).
Un prrafo puede alinearse introduciendo los siguientes atributos en la etiqueta
habitual:
Cdigo
<P align="left">...</P>
<P align="center">...</P>
<P align="right">...</P>
<P align="justify">...</P>

Funcin
Prrafo alineado a la izquierda
Prrafo centrado
Prrafo alienado a la derecha
Prrafo justificado

Las etiquetas anteriores permiten alinear los prrafos enteros, pero siempre dejando
una lnea vaca delante de cada uno de ellas. Hay alguna manera de alinear
independientemente lneas o grupos de lneas? S, con las siguientes etiquetas:
Lic. JINETH RETAMOZO VEGA
Lic. Esp. NALIDA RODRIGUEZ HERNANDEZ

Cdigo
Funcin
<DIV align="left">...</DIV>
Lnea(s) alineada(s) a la izquierda
<DIV align="center">...</DIV>
Lnea(s) centrada(s)
<DIV align="right">...</DIV>
Lnea(s) alineada(s) a la derecha
<DIV align="justify">...</DIV>
Lnea(s) alineada(s) justificadas
En definitiva, disponemos de varias etiquetas similares para la creacin y la
alineacin de los prrafos, que sern ms o menos apropiadas dependiendo de las
ocasiones. Veamos cmo funcionan en una pgina web:
EJEMPLO 5
<HTML>
<HEAD>
<TITLE>Ejemplo 5</TITLE>
</HEAD>
<BODY>
<P align="left">Este prrafo est alineado a la
izquierda. En la prctica, equivale sencillamente a
la misma etiqueta sin indicacin de
alineacin.</P>
<P align="center">Este prrafo est centrado.
Hay una lnea en blanco entre este prrafo y el
anterior.</P>
<P>Ahora vamos a alinear tres lneas seguidas de
tres maneras diferentes, pero sin dejar lneas
vacas entre ellas, por medio de otras
etiquetas:</P>
<DIV align="left">alineado izquierdo alineado
izquierdo alineado izquierdo alineado
izquierdo</DIV>
<DIV align="center">alineado centrado alineado
centrado alineado centrado alineado
centrado</DIV>
<DIV align="right">alineado derecho alineado
derecho alineado derecho alineado derecho
</DIV>
</BODY>
</HTML>

Otra
etiqueta
que
afecta
a
la
alineacin
de
los
prrafos
es <BLOCKQUOTE>...<BLOCKQUOTE>, que introduce una doble sangra, derecha e
Lic. JINETH RETAMOZO VEGA
Lic. Esp. NALIDA RODRIGUEZ HERNANDEZ

izquierda. Pueden colocarse varias etiquetas seguidas para acentuar la sangra, como
se observa en el siguiente ejemplo:

EJEMPLO 6
<HTML>
<HEAD>
<TITLE>Ejemplo 6</TITLE>
</HEAD>
<BODY>
<P>Prrafo normal Prrafo normal Prrafo normal Prrafo
normal Prrafo normal Prrafo normal Prrafo normal Prrafo
normal.</P>
<P><BLOCKQUOTE>Prrafo con una sangra izquierdaderecha Prrafo con una sangra izquierda-derecha Prrafo
con una sangra izquierda-derecha Prrafo con una sangra
izquierda-derecha.</BLOCKQUOTE></P>
<P><BLOCKQUOTE><BLOCKQUOTE><BLOCKQUOTE>Prraf
o con tres sangras izquierda-derecha Prrafo con tres
sangras izquierda-derecha Prrafo con tres sangras
izquierda-derecha Prrafo con tres sangras izquierdaderecha.</BLOCKQUOTE></BLOCKQUOTE></BLOCKQUOTE
></P>
</BODY>
</HTML>

Los ttulos
Pueden utilizarse hasta seis tipos de ttulos en un documento HTML, ordenados
jerrquicamente por medio de la etiqueta <Hn>...</Hn>, donde n = 1 a 6.
Las etiquetas de los ttulos introducen una lnea superior en blanco. Como lo habitual
despus de un ttulo es un nuevo prrafo (<P>), que tambin introduce su propia
lnea, el resultado final suele ser que una lnea de ttulo tiene una lnea en blanco
antes y otra despus.
Las etiquetas de los ttulos admiten indicaciones de alineacin, de la misma manera
que la etiqueta de prrafo.
Lic. JINETH RETAMOZO VEGA
Lic. Esp. NALIDA RODRIGUEZ HERNANDEZ

Veamos qu aspecto tienen los ttulos de un documento HTML:


EJEMPLO 7
<HTML>
<HEAD>
<TITLE>Ejemplo 7</TITLE>
</HEAD>
<BODY>
<H1>Ttulo 1</H1>
<H2>Ttulo 2</H2>
<H3>Ttulo 3</H3>
<H4>Ttulo 4</H4>
<H5>Ttulo 5</H5>
<H6>Ttulo 6</H6>
<H7>Ttulo 7 (como no existe, no supone ningn
cambio)</H7>
<P>Adems, los ttulos pueden recibir
indicaciones de alineacin, como en los siguientes
ejemplos</P>
<H3 align="center">Ttulo centrado</H3>
<H3 align="right">Ttulo a la derecha</H3>
</BODY>
</HTML>

Este ejemplo permite plantear el siguiente ejercicio:


EJERCICIO 2
En el EJEMPLO 7 se observa
que siempre queda una lnea
en blanco entre un ttulo y el
prrafo siguiente (el que
comienza con "Adems".
Cmo puede suprimirse
dicha lnea? Elimina, por
ejemplo, la que hay entre el
ttulo 7 y el prrafo
siguiente.
Sabes solucionarlo? Te
parece fcil? Eso quiere decir
Lic. JINETH RETAMOZO VEGA
Lic. Esp. NALIDA RODRIGUEZ HERNANDEZ

que has entendido


estupendamente todo lo
expuesto hasta el momento.
No lo has conseguido? No
pasa nada, pero tal vez
deberas repasar todo lo
anterior con ms detalle. En
cualquier caso, aqu tienes la
solucin.

Las listas
Las listas son elementos que, como los ttulos, permiten presentar niveles
jerarquizados de texto.
Los documentos HTML permiten dos tipos de listas:
1. Listas no ordenadas (bullet list): su etiqueta principal es <UL>...</UL>.
2. Listas ordenadas o numeradas (numbered list): su etiqueta principal
es <OL>...</OL>.
3. Listas de definiciones (definition list): su etiqueta principal
es <DL>...</DL>
.
Una vez definido el tipo de lista deseada, los elementos que la componen se marcan
de distinta manera segn el tipo:

En las listas ordenadas (<OL>...</OL>) o no ordenadas (<UL>...</UL>), cada


elemento de dicha lista se marca con la etiqueta <LI>...</LI> (list item).

En las listas de definicin (<DL>...</DL>), se utilizan dos: cada elemento que


se define se marca con <DT>...</DT> y el texto de cada definicin se marca
con<DD>...</DD>. Esta etiqueta se puede repetir si se necesita introducir
varios elementos de definicin.

Las listas se pueden encajar unas dentro de otras, adems de con el resto de las
etiquetas disponibles. Vemos algn ejemplo:
EJEMPLO 8
<HTML>
<HEAD>
<TITLE>Ejemplo 8</TITLE>
</HEAD>
<BODY>
<H3>Los meses de
Lic. JINETH RETAMOZO VEGA
Lic. Esp. NALIDA RODRIGUEZ HERNANDEZ

primavera</H3>
<UL>
<LI>Abril</LI>
<LI>Mayo</LI>
<LI>Junio</LI>
</UL>
<BR>
<H3>Los meses de
verano</H3>
<OL>
<LI>Julio</LI>
<LI>Agosto</LI>
<LI>Septiembre</LI>
</OL>
<BR>
<H3>Los meses del ao</H3>
<UL>
<LI>Los meses de primavera
<OL>
<LI>Abril</LI>
<LI>Mayo</LI>
<LI>Junio</LI>
</OL>
</LI>
<LI>Los meses de verano
<OL>
<LI>Julio</LI>
<LI>Agosto</LI>
<LI>Septiembre</LI>
</OL>
</LI>
</UL>
<BR>
<H3>Refranes de los
meses</H3>
<DL>
<DT>Marzo</DT>
<DD>El sol de marzo da con el
mazo.</DD>
<DT>Abril</DT>
<DD>El abril, aguas mil.</DD>
<DT>Mayo</DT>
<DD>Hasta el 40 de mayo no te
Lic. JINETH RETAMOZO VEGA
Lic. Esp. NALIDA RODRIGUEZ HERNANDEZ

quites el sayo.</DD>
</DL>
</BODY>
</HTML>
Las listas admiten varios parmetros, que varan segn el tipo de lista:
1.

Las tres listas admiten el parmetro COMPACT, que hace que el


navegador presente la lista de la manera ms compacta posible.
2.
El parmetro TYPE funciona con las dos primeras listas. Sus valores
respectivos son, lgicamente, distintos:
En las no numeradas, controla el tipo de vieta: con forma de
disco (<UL type="disc">, la opcin por defecto), de crculo (<UL
type="circle">) y de cuadrado (<UL type="square">).
En las numeradas, controla el tipo de numeracin: con nmeros
rabes (<OL type="1">, la opcin por defecto), romanos (<OL
type="I">), romanos en minsculas (<OL type="i">), letras
maysculas (<OL type="A">) y minsculas (<OL type="a">).
3. La etiqueta <OL start="n"> indica el nmero por el que empieza la lista
numerada.
4. En una lista numerada, se puede cambiar el nmero de un elemento y
consiguientemente de los posteriores con la etiqueta <LI value="n">.

Las rayas horizontales

Las rayas horizontales son otro de los procedimientos habituales para


separar los contenidos de un documento HTML. Se introducen simplemente
con la etiqueta <HR>.
Hay una serie de caractersticas de las rayas que pueden controlarse, como
siempre, por medio de parmetros aadidos a la etiqueta bsica:
1. El tamao: la etiqueta <HR> introduce una raya que ocupa todo el
ancho de la pantalla. Pueden especificarse distintas anchuras
aadiendo el valor deseado, expresado en pixeles (<HR
width="n">) o en trminos porcentuales (<HR width="n%">).9
2. La alineacin: cuando una raya ocupa slo una parte de la
pantalla, puede especificarse su alineacin por medio de las
etiquetas habituales:
<HR align="left">
<HR align="center">
<HR align="right">

3. La altura: se expresa en pxeles por medio de la etiqueta <HR


size="n">. Puede adoptar el valor 0 (la raya ms fina).
Lic. JINETH RETAMOZO VEGA
Lic. Esp. NALIDA RODRIGUEZ HERNANDEZ

4. El color, por medio del prametro habitual: <HR color="?">.


5. El sombreado: la raya posee habitualmente un pequeo efecto de
sombreado, que puede eliminarse con la etiqueta <HR noshade>.

Como siempre, lo habitual suele ser la combinacin de varios parmetros en


una misma etiqueta. Por ejemplo:
<HR width="50%" size="0" align="center">

No queda sino practicar con las distintas posibilidades de rayas. Por ejemplo:
EJEMPLO 9
<HTML>
<HEAD>
<TITLE>Ejemplo 9</TITLE>
</HEAD>
<BODY>
sta es una lnea normal:
<HR>
sta es una lnea normal, sin sombreado:
<HR noshade>
sta es una lnea que ocupa la mitad de la pantalla
(si no se establece la alineacin, se coloca
centrada por defecto):
<HR width="50%">
sta es ms estrecha y mucho ms gorda:
<HR width="10%" size="20">
sta es igual pero de color rojo:
<HR width="10%" size="20" color="#FF0000">
</BODY>
</HTML>

Lic. JINETH RETAMOZO VEGA


Lic. Esp. NALIDA RODRIGUEZ HERNANDEZ

Das könnte Ihnen auch gefallen