Está en la página 1de 30

Programacin de paginas Web

Introduccin a HTML
sta gua ha sido creada para dar una visin inicial en la creacin de
documentos en HTML (HyperText Markup Language). HTML es un
lenguaje para la deinicin de estilos lgicos en documentos de
hipertexto! siendo el medio principal para la diseminacin de inormacin en
"orld "ide "e#. HTML se limita a descri#ir la estructura y el contenido de un
documento! nunca el ormato de la p$gina y su apariencia! ya %ue &stos son
muy dependientes del visuali'ador utili'ado.
E
1. Directivas
Las directiva (tags) en HTML proporcionan inormacin adicional al
cliente %ue visuali'a el documento. (n documento sin ninguna directiva no
resaltar$ ninguna parte del texto.
Las directivas en HTML son cdigos especiales %ue estan contenidos en un
documento. )e usan caracteres especiales para delimitarlas. La directiva para
iniciar el enfatizado de texto se muestra a continuacin*
+,M-
Las directivas! por lo general! se agrupan por pares* uno inicia la accin!
mientras su par la inali'a. La directiva para inali'ar el enati'ado es*
+.,M-
/omo se puede ver! el par de inal de accin es el mismo %ue el de inicio
incluyendo el car$cter .
HTML no es sensi#le a may0sculas1 esto es! la directiva puede escri#irse como
+em- y +.em-! o como +,m- y +.eM-.
Los caracteres + y - son cdigos reservados. )i se %uieren mostrar dichos
caracteres dentro del texto! se de#e utili'ar el concepto de entidades %ue se
ver$ en el siguiente punto.
2. Entidades
Las entidades proporcionan un m&todo para incluir caracteres especiales o
reservados dentro de un documento*
/aracteres internacionales (ej. caracteres acentuados)
)m#olos tipogr$icos
)m#olos especiales para HTML
Las entidades son especiicadas utili'ando el siguiente ormato* el inicio de
la entidad se marca con el caracter 2&3! mientras %ue el inal de la entidad se
marca con el caracter 2;3. ,ntre los dos caracteres citados se especiicar$ el
nom#re de una entidad.
4lgunas de las entidades m$s comunes son*
Pgina 1 de 30
Programacin de paginas Web
CARACTER ENTIDAD DESCRIPCION
----------------------------------------------------------------------
< &lt; Menor que
> &gt; Mayor que
& &amp; Amperan
! &aa"ute; a agu#o
$ &Aa"ute; A agu#o
% &a"&r"; a "&r"un'le(o
) &A"&r"; A "&r"un'le(o
* &agra+e; a gra+e
, &Agra+e; A gra+e
- &ar&ng; a
. &Ar&ng; A
/ &nt&l#e; n t&l#e
0 &Nt&l#e; N t&l#e
3. Estructura de un documento HTML
Los documentos HTML se dividen en tres partes #ien dierenciadas*
5. La /a#ecera de tipo de documento La usa el sot6are para sa#er la
versin de HTML %ue se est$ usando (no visi#le).
7. La /a#ecera del documento (document H,48er) (sada para dar
inormacin so#re el documento (no visi#le).
9. ,l /uerpo del documento (document :;8<) ,s la parte principal del
documento! la parte %ue el usuario ve.
,stas tres partes pueden verse en la plantilla mostrada a continuacin.
+HTML-
+H,48-
+.H,48-
+:;8<-
+.:;8<-
+.HTML-
La primera lnea indica %ue es un documento HTML*
+HTML-
La segunda y tercera lnea delimita la ca#ecera del documento*
+H,48-
+.H,48-
La cuarta y %uinta lnea delimitan el cuerpo del documento*
+:;8<-
+.:;8<-
La 0ltima lnea indica %ue inali'a el documento HTML*
+.HTML-
Pgina 2 de 30
Programacin de paginas Web
4. Un documento inicial
5. Ttulo
7. /a#eceras
9. =$rraos
>. ?inales de linea
@. /entrado y =arpadeo
4.1. Ttulo
,l ttulo del documento se almacena en la ca#ecera (H,48) del
documento. Ao es visi#le dentro de la p$gina 6e#! pero muchos visuali'adores
lo muestran en alguna parte. Tam#i&n es usado como el ttulo por deecto para
las entradas de las 22hotlist33 o 22#ookmark33 %ue el usuario va almacenando.
=ara deinir el ttulo! se har$ dentro de la directiva H,48 y utili'ando la
directiva +TBTL,-...+.TBTL,-
...
+H,48-
+TBTL,-Bntroduccion a HTML+.TBTL,-
+H,48-
...
La apariencia del ttulo del documento ser$*
+TBTL,-Bntroduccin a HTML+.TBTL,-
4.2. Cabeceras
Las ca#eceras permiten dividir lgicamente el documento en secciones!
su#secciones! etc. HTML prevee hasta seis niveles de ca#eceras.
Las ca#eceras aparecen solamente en el cuerpo del documento (directiva
:;8<! no conundir con la ca#ecera de documento Cdocument H,48erC).
=ara especiicar un texto ca#ecera de nivel re%uerido se har$*
...
+H5-/a#ecera de nivel 5+.H5- M$s general
+H7-/a#ecera de nivel 7+.H7- .
+H9-/a#ecera de nivel 9+.H9- .
... .
+HD-/a#ecera de nivel D+.HD- M$s especiico
Lo descrito anteriormente aparecera de la siguiente orma*
Cabecera de nivel 1
Cabecera de nivel 2
Cabecera de nivel 3
Cabecera de nivel 6
Pgina 3 de 30
Programacin de paginas Web
4.3. Prra!os
La mayor parte del texto %ue se escri#e orma parte de un p$rrao de
texto.
=ara esta#lecer una separacin de p$rraos! las dos porciones de texto %ue
pertenecen a p$rraos dierentes de#en ormar parte de distintas secciones
dentro de un documento HTML. La simple escritura de un retorno de carro no
es suiciente (uno o m$s retornos de carro son tratados como un simple
espacio en #lanco).
=ara crear un p$rrao! #asta con escri#ir el texto %ue lo orma dentro de la
directiva +=-...+.=-*
...
+=-,ste es mi primer p$rrao.
4 un%ue escri#a este texto en otra linea!
)eguir$ perteneciendo al mismo p$rrao.+.=-
+=-,ste es mi segundo p$rrao. Mira
como se ha creado una separacin entre p$rraos.+.=-
El usuario ver"
,ste es mi primer p$rrao. 4 un %ue escri#a este texto en otra lnea! seguir$
perteneciendo al mismo p$rrao.
,ste es mi segundo p$rrao. Mira como se ha creado una separacin entre
p$rraos.
4.4. #inales de lnea
,n numerosas ocasiones es necesario or'ar un inal de lnea en el
documento ormateado (un simple retorno de carro no es suiciente). =ara ello!
es suiciente con el uso de la directiva simple +:E- (no necesita la directiva
homloga de cierre)*
...
+=-<o realmente ver& la siguiente linea+:E-
en otra linea.+.=-
El usuario ver"
<o realmente ver& la siguiente linea
en otra linea.
4.$. Centrado % Par&adeo
8os directivas muy interesantes! aun%ue no soportadas por todos los
visuali'adores! son las de centrado de texto y parpadeo de texto* =ara centrar
un texto (u otro o#jeto! imagen! ta#la! ...) se utili'a la directiva +/,AT,E- ...
+./,AT,E-
Pgina 4 de 30
Programacin de paginas Web
,j. /on +/,AT,E-,sta linea la hemos centrado +./,AT,E-! el usuario
visuali'ar$*

,sta linea la hemos centrado
8e la misma orma! para %ue un texto parpadee se utili'a la directiva
+:LBAF- ... +.:LBAF-
,j. /on +:LBAF-,sta linea la hacemos parpadear +.:LBAF-! el usuario
visuali'ar$*
,sta linea la hacemos parpadear
$. Te'to en!ati(ado
8entro de un documento HTML se puede indicar %ue un texto tenga un
estilo o tipograa especial. Hay 7 tipos de estilos* lgicos y sicos. /on estilos
lgicos se ormatea el texto de acuerdo con su signiicado! mientras %ue las de
estilo fsico indican la apariencia especica. =or ejemplo! en la anterior rase
las pala#ras 22estilos lgicos33 ue marcado como una 22deinicin.33 ,l mismo
eecto (enati'ar esas pala#ras con italics)! podra ha#er sido alcan'ado
utili'ando otra directiva %ue indica Gpon esas pala#ras en italicsG.
#sico !rente a L)*ico" Usa el estilo L)*ico cuando sea &osible
)i un estilo sico y Lgico producen el mismo resultado H/u$l utili'oI
,n un documento HTML! el contenido est$ separado de la presentacin. 8e
ese modo las directivas %ue indican un nivel uno de enca#e'amiento son
interpretadas como un nivel uno de enca#e'amiento! pero no especiica cmo
es ese enca#e'amiento. =or ejemplo! letra tipo Times! negrita! de tamaJo 7>
puntos! centrado en la parte superior de la p$gina. La ventaja es %ue el usuario
decide la presentacin de la ca#ecera en el dispositivo de presentacin (el
visuali'ador "orld "ide "e#)
4dem$s! directivas Lgicas reuer'an la consistencia del documento. ,s m$s
sencillo marcar algo como +H5- %ue recordar %ue eso signiica*letra tipo Times!
negrita! de tamaJo 7> puntos.
$.1. Estilos L)*icos
+D#,-
=ara una pala#ra %ue est$ siendo deinida. Aormalmente aparece en italics.
(NCSA Mosaic es un visuali'ador "orld "ide "e#)
+EM-
=ara dar &nasis. (sualmente aparece en italics (Cuuidado con el perro!)
+C.TE-
=ara ttulos de li#ros! pelculas! etc. Aormalmente aparece en italics. (El
Silencio de los Corderos)
Pgina 5 de 30
Programacin de paginas Web
+C/DE-
=ara cdigos de computador. 4parece con un ormato ijo (,l ichero ca#ecera
+stdio.h-)
+01D-
=ara entradas desde el teclado. 4parecer$ en un ormato ijo y en negrita! pero
muchos visuali'adores lo escri#en en otro ormato (Bntroduce pass6d para
cam#iar tu pass6ord)
+23MP-
=ara mensajes est$ndar de computadores. )e ve en ormato ijo. )egmentation
ault* /ore dumped.)
+2T4/,5-
=ara mayor &nasis. Aormalmente aparece en negrita. (.m&ortante)
+634-
=ara una varia#le22metasint$ctica33! donde el usuario de#e reempla'arlo por un
elemento especico (rm filename #orra el ichero.)
$.2. Estilos !sicos
+1-
Texto en negrita
+.-
Texto en italica
7. 3tributos del te'to
=ara dar inormacin extra a secciones de texto! HTML proporciona varias
directivas*
8irecciones
/itas
,jemplos
7.1. Direcciones
,n muchas ocasiones! se necesitan poner direcciones dentro de un
texto*
5. (na direccin de correo
7. (na direccin de correo electrnico
9. Los nom#res de autores
=ara especiicar direcciones en un documento HTML! se utili'ar$ la directiva
+488E,))-...+.488E,))-.
+488E,))-/. Miguel Bscar! 5K+.488E,))-
,l lector ver$*
Pgina 6 de 30
Programacin de paginas Web
/. Miguel Bscar! 5K
7.2. Citas
/uando se reerencia el nom#re o ttulo de un tra#ajo! se de#e dejar #ien
claro %ue es una cita.
=ara especiicar una cita! se utili'ar$ la directiva +/BT,-...+./BT,- tags*
=ara m$s ilustracin leer +/BT,-,l =rincipito+./BT,-.
,l lector lo ver$ as
=ara m$s ilustracin leer El rincipito.
7.3 E8em&los
/uando se documenta un programa de ordenador! a menudo es
necesario dar ejemplos de a%uello %ue aparecer$ en pantalla! y %ue de#e el
usuario introducir.
La directiva +)4M=- es usada para mostrar el texto %ue se visuali'ar$!
mientras %ue +F:8- mostrar$ el texto %ue el usuario de#e introducir. (n #reve
ejemplo (usando el ormato del comando (nix man) podra ser*
ejemploL lpr C=#a#el HTML.ps
La tercera directiva! +M4E- se utili'ar$ para documentar los par$metros de un
programa*
lpr !printer !"num !C class !# $o%
9. Te'to &re!ormateado
4 menudo se hace necesario %ue alg0n texto apare'ca e&actamente
como lo escri#imos*
Mostrando una pantalla tal y como aparecer$
Haciendo 22ta#las33
Nue un texto contenga varios espacios o lineas en #lanco consecutivas
La directiva +=E,- es usada para englo#ar todo a%uel texto %ue se %uiere
ormatear exactamente.
+=E,-,ste es un ejemplo de texto preormateado. /omo puede ver! se
controla donde empie'an
las nuevas lineas
y el texto
=ero solo se puede ver en una uente ija *C( +.=E,-
Pgina 7 de 30
Programacin de paginas Web
El lector ver"
,ste es un ejemplo de texto preormateado. /omo puede ver! se
controla donde empie'an
las nuevas lineas
y el texto
=ero solo se puede ver en una uente ija *C(
:. Te'to citado
,n alguna ocasin es necesario copiar un pasage de texto. =or ejemplo*
To #e! or not to #e* that is the %uestion*
"hether 3tis no#ler in the mind to suer
The slings and arro6s o outrageous ortune!
;r to take arms against a sea o trou#les!
4nd #y opposing end themI
(=or supuesto! se de#e dar una atri#ucin al texto con +/BT,-)
'illiam S(a)espeare
=ara encomillar un area de texto se usar$ la directiva
+:L;/FN(;T,-...+:L;/FN(;T,-*
+:L;/FN(;T,-+=-To #e! or not to #e* that is the %uestion*+:E-
"hether 3tis no#ler...+.=-+:L;/FN(;T,-
El lector ver"
To #e! or not to #e* that is the %uestion*
"hether 3tis no#ler...
;. Divisiones Hori(ontales
Las divisiones hori'ontales son usadas para ormatear un documento en
secciones.
)e de#e evitar el uso de im$genes para crear el eecto de divisiones
hori'ontales*
Ao se puede garanti'ar %ue el ancho de una imagen sea el correcto. Las
divisiones hori'ontales dependen del ancho de la ventana del
visualia'or.
Ao se puede garanti'ar %ue el usuario vea la imagen. Las divisiones
hori'ontales suelen uncionar tanto en visuali'adores en ormato texto
como gr$ico.
(na p$gina con texto e imagen puede no ormatearse correctamente.
Pgina 8 de 30
Programacin de paginas Web
La insercin de una divisin hori'ontal es muy simple. )e reali'ar$ insertando
la directiva +HE- en el lugar donde se desee %ue apare'ca la linea hori'ontal
(esta directiva no necesita su homloga de cierre). (n ejemplo puede verse en
la linea %ue aparece antes de este p$rrao.
1<. Listas
(na lista para HTML no es m$s %ue un agrupamiento o enumeracin de
elementos de inormacin. HTML soporta tres tipos de listas*
Listas marcadas
Listas enumeradas
Listas de deiniciones
1<.1. Listas marcadas
Las listas marcadas sirven para mostrar inormacin agrupada y sin
ning0n orden particular*
Los miem#ros de la mesa de tra#ajo son*
)r. /hema =amundi
)r. Oerman Te%uilla
)r. /armelo /oton
)ra. /armen Tirosa
=ara hacer una lista! se de#e utili'ar la directiva +(L-...+.(L-1 mientras %ue!
para cada elemento de la lista de#e utili'arse la directiva +LB-...+.LB-*
+(L-
+LB-)r. /hema =amundi+.LB-
+LB-)r. Oerman Te%uilla+.LB-
+LB-)r. /armelo /oton+.LB-
+LB-)ra. /armen Tirosa+.LB-
+.(L-
1<.2. Listas enumeradas
Las listas enumeradas u ordenadas se usar$n para agrupar inormacin
en un orden especico.
)i el ordenador parece %ue no unciona*
5. H,st$ conectado a la corrienteI
7. H,st$ el interruptor a ;AI
9. H,st$ la pantalla encendidaI
>. H,st$ la lnea de alimentacin cadaI
Pgina 9 de 30
Programacin de paginas Web
=ara hacer una lista enumerada! se de#er$ especiicar con la directiva
+;L-...+.;L-. /ada elemento de la lista estar$ contenida entre +LB-...+.LB-*
+;L-
+LB-,st$ conectado a la corrienteI+.LB-
+LB-,st$ el interruptor a ;AI+.LB-
+LB-,st$ la pantalla encendidaI+.LB-
+LB-,st$ la linea de alimentacin caidaI+.LB-
+.;L-
1<.3. Listas de de!iniciones
Las listas de de deiniciones se usan para ormatear un conjunto de
pala#ras con sus correspondientes descripciones.
+1-
Aegrita (%old).
+.-
/ursiva (italic).
=ara ormatear una lista de descripciones se usar$n las directivas
+8L-...+.8L-. /ada elemento de#e especiicarse entre +8T-...+.8T-. /ada
deinicin de#e especiicarse entre +88-...+.88-.
+8L-
+DT-+1-+=DT-
+88-Aegrita (%old).+.88-
+DT-+.-+=DT-
+88-/ursiva (italic).+.88-
+.8L-
Listas anidadas
8entro de un elemento de una lista se puede especiicar otra lista.
11. Enlaces. Documentos >i&erte'to.
Llegado a este punto! nos alta por introducir el concepto de hipertexto1
es decir! la capacidad de 22saltar33 de un documento a otro! lo %ue se ha dado
en llamar 22navegacin33. Las uncionalidades del hipertexto est$n #asadas en
los enlaces. (n enlace es una reerencia a otro documento HTML o a cual%uier
otro o#jeto! expresada por un ormato universalmente aceptado denominado
U4L ((niversal Eesource Locator).
Los puntos a tratar son*
5. Texto del enlace (anchor)
7. /reando enlaces
Pgina 10 de 30
Programacin de paginas Web
9. ,nlaces a#solutos y relativos
>. Eeerencias locales
@. ,nlaces a reerencias locales
11.1. Te'to del enlace ?anc>or@
/uando se %uiere especiicar un enlace! es necesario asociarle un texto o
una imagen (anchors). 4hora se considerar$ la asociacin de un texto! las
im$genes se tratar$n en la siguiente seccin.
=ara especiicar un texto de enlace! simplemente se utili'ar$ la directiva
+4-...+.4-*+4-Texto de enlace+.4-
,l usuario ver$*
Texto de enlace
11.2. Creando enlaces
(n atri#uto es un cdigo %ue est$ u#icado dentro de una directiva de
apertura. =ara especiicar un enlace! es necesario utili'ar el atri#uto HE,?.
,l atri#uto HE,? (hypertext reerence) es un enlace a otro o#jeto. =uede ser
desde un enlace a otra parte del documento (reerencias locales) hasta un
enlace a un documento en otra m$%uina dierente.
=ara crear un enlace o reerencia hipertexto! se utili'ar$ la siguiente plantilla*
+4 HE,?PGintroHTML.htmlG-Texto de enlace. Bndice+.4-
,l usuario ver$*
Texto de enlace. Qndice
11.3. Enlaces absolutos % relativos
Los enlaces a#solutos son a%uellos %ue contienen la direccin completa
de un documento. )i el documento reside en otra m$%uina! o si se necesita
utili'ar otro protocolo (ej. 6ais! tp)! se de#er$ utili'ar un enlace a#soluto.
)i el otro documento reside en la misma m$%uina! y se usa el mismo
protocolo! entonces se recomienda el uso de enlace relativo.
Enlaces absolutos
=ara crear un enlace a#soluto! #asta con especiicar la direccin en el
atri#uto HE,? de la directiva anchor*
+4 HE,?PGhttp*..666.69.org.G-"orld "ide "e#+.4-
El lector ver"
"orld "ide "e#
Pgina 11 de 30
Programacin de paginas Web
Enlaces relativos
=ara crear un enlace relativo! #asta con especiicar la direccin relativa
en el atri#uto HE,? de la directiva anchor*
+4 HE,?PGintroHTMLG-=$gina inicial+.4-
,l usuario ver$*
=$gina inicial
)i el documento est$ en la misma m$%uina se puede especiicar el
camino entero del documento. =or ejemplo*
+4 HE,?PG.4dminEed.#us%ueda.htmlG-:0s%ueda en Bnternet +.4-
11.4. 4e!erencias locales
Las reerencias locales (named anchors) son usadas como un destino
opcional de un enlace. =ermiten poner nom#re a un punto particular dentro del
mismo documento.
=ara crear una reerencia local se usar$ el atri#uto A4M, de la directiva
anchor. =ara crear una reerencia local llamada e$emplo se har$ de la siguiente
orma*
+4 A4M,PGejemploG-ejemplo+.4-
El usuario ver"
,jemplo
/omo se puede apreciar! la reerencia local es! pro#a#lemente! la misma %ue el
resto del texto. Eecordar %ue puede ser el destino de un enlace.
11.$. Enlaces a re!erencias locales
)i en el documento existen reerencias locales! se podr$n especiicar
enlaces directos a esos puntos. Las reerencias locales han sido utili'adas en
esta gua para indexar el contenido de la misma.
=ara enla'ar a una reerencia local! simplemente se aJade la reerencia local a
la direccin*
"e$emplo
(8onde e$emplo es el nom#re de la reerencia local)
=ara enla'ar a la seccin de p$rraos en el captulo *n documento inicial! se
usar$ el siguiente enlace*
+4 HE,?PGdocuiniRparraosG-=$rraos+.4-
Pgina 12 de 30
Programacin de paginas Web
El usuario ver"
=$rraos
Lo arri#a indicado se leera como 2la reerencia local p+rrafos en el documento
docuini3.
,l enla'ado a una su#seccin dentro del mismo documento se hara*
+4 HE,?PGRlocalesG-Eeerencias locales+.4-
El usuario ver"
Eeerencias locales
12. .m*enes
5. Bm$genes inline
7. 4lineado de texto e imagen
12.1. .m*enes inline
(na de las uncionalidades m$s llamativas en HTML es la posi#ilidad de
incluir im$genes dentro de un documento. 4lgunos ormatos gr$icos tienen
soporte en modo nativo (son visuali'ados directamente por el %ro,ser)!
mientras %ue otros re%uieren del concurso de programas externos.
Ao todos los icheros %ue contienen gr$icos siguen la misma convencin de
almacenamiento. ,xisten varios ormatos %ue permiten! entre otras cosas!
comprimir en distinto grado la inormacin. Los ormatos m$s extendidos son*
OB? (-rap(ics .nterc(ange /ormat)! S=,O (#oint (otograp(ic E&perts -roup
%itmap) y sus variantes (S=O!:M=!TM=!T:M)! TB?? (0agged .mage /ile
/ormat)! ,=) ( Encapsulated ostScript)! o =/T (de =aint#rush).
)olo el ormato OB? es soportado directamente por todos los visuali'adores!
mientras %ue el S=,O lo es por %astantes. 4nte esta situacin! H/ual de los
dos de#emos utili'arI
,l ormato OB? se #asa en el sistema de compresin LU"! un algoritmo muy
simple y %ue! por ello! no alcan'a unas altas cotas de reduccin. ,ste ormato
tra#aja con un m$ximo de 7@D colores (V #its)1 para simular colores uera de la
paleta utili'a la t&cnica de dit(ering (aproximacin del color por los vecinos m$s
prximos).
,l ormato S=,O utili'a un algoritmo de compresin muchos m$s
complicado %ue el utili'ado por el OB?* los icheros resultantes son m$s
pe%ueJos! pero necesitan m$s tiempo para su descompresin. 4 dierencia del
anterior ormato! S=,O tra#aja con 5D.W millones de colores (7> #its).
/omo norma general! diremos %ue se utili'ar$ el ormato OB? para iconos e
im$genes pe%ueJas y S=,O para im$genes grandes o de calidad.
Pgina 13 de 30
Programacin de paginas Web
=ara insertar una imagen en un documento HTML se utili'ar$ la directiva
simple.
+BMO-
+BMO srcPG.icons.net6ork.giG-
El usuario lo ver"
12.2. 3lineado de te'to e ima*en
La directiva BMO dispone de un atri#uto cuyo cometido es permitir la
alineacin vertical de la imagen y el texto %ue la sucede. ,l atri#uto es ali*n y
tiene tres valores posi#les*
T/P
,l texto coincide con la parte superior de la imagen.
M.DDLE
,l texto aparece centrado en la imagen.
1/TT/M
,l texto coincide con la parte inerior de la imagen.
+BMO srcPG.icons.net6ork.giG alignPT;=-4lineado T;=
+BMO srcPG.icons.net6ork.giG alignPMB88L,-4lineado MB88L,
+BMO srcPG.icons.net6ork.giG alignP:;TT;M-4lineado :;TT;M
El usuario ver"
4lineado T;=
4lineado MB88L,
4lineado :;TT;M
/on los valores mostrados! la alineacin se restringe a una linea de
texto! pues si se re#asa! la linea siguiente aparecer$ de#ajo de la imagen. =ara
solucionarlo! se introducen dos nuevos valores como son LE#T (i'%uierda) y
4.5HT (derecha).
La imagen anterior se ha especiicado con +BMO srcPG.icons.net6ork.giG
alignPEBOHT-
13. Tablas
4l igual %ue las listas! las ta#las son componentes dedicados a mejorar
la visuali'acin de datos ta#ulados*
Pgina 14 de 30
Programacin de paginas Web
5. Ta#las :$sicas
7. Ttulos y #ordes
9. Ta#las con celdas multicolumna
>. Ta#las con celdas multiila
13.1. Tablas 1sicas
Las ta#las se especiicar$n siempre por ilas1 es decir! primero se escri#ir$
la ila 5! despues la ila 7! etc. La directiva %ue se utili'a para delimitar una ta#la
es +T4:L,-...+.T4:L,-.
/ada ila se especiica con la directiva +TE-...+.TE- y! dentro de ella! cada
celda se especiica con la directiva +T8-...+.T8-
+T4:L,-
+TE-+T8-5KK!9+.T8-+T8-5!V+.T8-+T8-959!5+.T8-+.TE-
+TE-+T8-77!W+.T8-+T8-7KK!V+.T8-+T8-79!5+.T8-+.TE-
+TE-+T8-V5KK!9+.T8-+T8-59KK!@+.T8-+T8->5KK!5+.T8-+.TE-
+TE-+T8-7!D+.T8-+T8-V5!V+.T8-+T8-V!5+.T8-
+.T4:L,-
El usuario ver"
5KK!9 5!V 959!5
77!W 7KK!V 79!5
V5KK!9 59KK!@ >5KK!5
7!D V5!V V!5
Las directivas TE! T8 y TH (ver m$s adelante) admiten dos atri#utos de
centrado* 63L.5, para el centrado vertical y 3L.5, para el hori'ontal1 donde
los valores %ue pueden tomar son! T/P (superior)! 1/TT/M (inerior)!
M.DDLE (centrado vertical)! 4.5HT (derecha)! LE#T (i'%uierda) y CE,TE4
(centrado hori'ontal).
13.2. Ttulos % bordes
La presencia de #ordes en la ta#la se especiica con el atri#uto border
en la directiva +T4:L,-. /on ello! se lograr$ un #orde de dimensin la unidad1
si deseamos hacer el #orde m$s espeso de#eremos dar un valor num&rico al
atri#uto* borderAespesor
,l ttulo de la ta#la es un literal delimitado por la directiva
+/4=TB;A-...+./4=TB;A-.
=or 0ltimo! cada ca#ecera de columna se especiica con la directiva
+TH-...+.TH-
=odemos ir mejorando la ta#la del apartado anterior*
+T4:L, #order-
+/4=TB;A- ,jemplo de ta#la+./4=TB;A-
Pgina 15 de 30
Programacin de paginas Web
+TE-+TH-=rimera columna+.TH-+TH-)egunda columna+.TH-+TH-Tercera
columna+.TH-+.TE-
+TE-+T8-5KK!9+.T8-+T8-5!V+.T8-+T8-959!5+.T8-+.TE-
+TE-+T8-77!W+.T8-+T8-7KK!V+.T8-+T8-79!5+.T8-+.TE-
+TE-+T8-V5KK!9+.T8-+T8-59KK!@+.T8-+T8->5KK!5+.T8-+.TE-
+TE-+T8-7!D+.T8-+T8-V5!V+.T8-+T8-V!5+.T8-
+.T4:L,-
El usuario ver"
,jemplo de ta#la
Primera columna 2e*unda columna Tercera columna
5KK!9 5!V 959!5
77!W 7KK!V 79!5
V5KK!9 59KK!@ >5KK!5
7!D V5!V V!5
13.3. Tablas con celdas multicolumna
,n ocasiones es necesario %ue una celda se extienda so#re varias
columnas! para ello utili'aremos el atri#uto cols&an de la directiva +TH- o
+T8-*
+T4:L, #order-
+/4=TB;A- ,jemplo de ta#la con celdas multicolumna+./4=TB;A-
+TE-+TH colspanP7-8os columnas+.TH-+.TE-
+TE-+TH-=rimera columna+.TH-+TH-)egunda columna+.TH-+TH-Tercera
columna+.TH-+.TE-
+TE-+T8-5KK!9+.T8-+T8-5!V+.T8-+T8-959!5+.T8-+.TE-
+TE-+T8-77!W+.T8-+T8-7KK!V+.T8-+T8-79!5+.T8-+.TE-
+TE-+T8-V5KK!9+.T8-+T8-59KK!@+.T8-+T8->5KK!5+.T8-+.TE-
+TE-+T8-7!D+.T8-+T8-V5!V+.T8-+T8-V!5+.T8-
+.T4:L,-
El usuario ver"
,jemplo de ta#la con celdas multicolumna
Dos columnas
Primera columna 2e*unda columna Tercera columna
5KK!9 5!V 959!5
77!W 7KK!V 79!5
V5KK!9 59KK!@ >5KK!5
7!D V5!V V!5
13.4. Tablas con celdas multi!ila
Pgina 16 de 30
Programacin de paginas Web
/omo vemos en el ejemplo anterior! cada una de las celdas ocupa
0nicamente una ila! si deseamos %ue una celda ocupe varias ilas lo
especiicaremos con el atri#uto roBs&an de la directiva +TH- o +T8-.
Mamos ha especiicar %ue la ca#ecera de la tercera columna se espanda a dos
ilas*
+T4:L, #order-
+/4=TB;A- ,jemplo de ta#la con celdas multiila+./4=TB;A-
+TE-+TH colspanP7-8os columnas+.TH-
+TH ro6spanP7-Tercera columna+.TH-+.TE-
+TE-+TH-=rimera columna+.TH-+TH-)egunda columna+.TH-+.TE-
+TE-+T8-5KK!9+.T8-+T8-5!V+.T8-+T8-959!5+.T8-+.TE-
+TE-+T8-77!W+.T8-+T8-7KK!V+.T8-+T8-79!5+.T8-+.TE-
+TE-+T8-V5KK!9+.T8-+T8-59KK!@+.T8-+T8->5KK!5+.T8-+.TE-
+TE-+T8-7!D+.T8-+T8-V5!V+.T8-+T8-V!5+.T8-
+.T4:L,-
El usuario ver"
,jemplo de ta#la con celdas multiila
Dos columnas
Tercera columna
Primera columna 2e*unda columna
5KK!9 5!V 959!5
77!W 7KK!V 79!5
V5KK!9 59KK!@ >5KK!5
7!D V5!V V!5
,jemplo de la utili'acin de celdas multicolumna y celdas multiila
com#inadas*
+T4:L, #order-
+/4=TB;A-,jemplo com#inado+./4=TB;A-
+TE-+TH ro6spanP7-+.TH-+TH colspanP7-Malores+.TH-+TH
ro6spanP7-=recio+.TH-+.TE-
+TE-+TH-=eso+.TH-+TH-=otencia+.TH-+.TE-
+TE 4LBOAP/,AT,E-+TH-Modelo
5+.TH-+T8-VXK+.T8-+T8-WK+.T8-+T8-XX@+.T8-+.TE-
+TE 4LBOAP/,AT,E-+TH-Modelo
7+.TH-+T8-57KK+.T8-+T8-55K+.T8-+T8-77>@+.T8-
+.T4:L,-
El usuario ver"
Pgina 17 de 30
Programacin de paginas Web
,jemplo com#inado
6alores
Precio
Peso Potencia
Modelo 1 VXK WK XX@
Modelo 2 57KK 55K 77>@
14. Colores % #ondos
4dem$s de las im$genes! el otro concepto %ue permite dar vistosidad a
las p$ginas 6e# son los colores. =ara especiicar colores dentro de una p$gina!
se utili'a el cdigo EO: (rojoCverdeCa'ul) con el cual podemos especiicar
distintas tonalidades de colores. =ara especiicar un color se utili'a el car$cter
R seguido de un valor hexadecimal de D dgitos1 los dos primeros para el rojo!
los dos centrales para el verde y los dos inales para el a'ul.
Podemos ver al*unos e8em&los"
,ombre Color
4%ua
:lack
:lue
?uchsia
Oray
Oreen
Lime
Maroon
Aavy
;live
=urple
Eed
)ilver
Teal
"hite
<ello6
C)di*o R??KKKK RKKKK?? RKK??KK R????KK RXX99// R?????? RDDDDDD RKKKKKK
Color Eojo 4'ul Merde 4marillo Morado :lanco Oris Aegro
CD)nde &odemos es&eci!icar coloresD
,xisten tres caractersticas a las %ue podemos aplicar color* el ondo de
un documento! al texto de un documento y a texto especico dentro del
documento*
#ondo de un documento"
Pgina 18 de 30
Programacin de paginas Web
)e especiicar$ con el atri#uto 15C/L/4 de la directiva 1/DE.
,j. +:;8< :O/;L;EPRXX99//- Meremos el ondo de color morado
Te'to de un documento"
)e especiicar$ con el atri#uto TEFT de la directiva 1/DE.
,j. +:;8< T,TTPRKK??KK- Meremos el texto de color verde! por
deecto
Te'to es&ec!ico"
)e especiicar$ con el atri#uto C/L/4 de la directiva #/,T. ,s una
extensin propuesta por Aetscape a HTML 7.K.
,j. /on +?;AT /;L;EPR??KKKK-,ste texto se ver$ rojo+.?;AT- el
usuario ver"
,ste texto se ver$ rojo.

Hemos visto %ue podemos cam#iar el color del ondo de un documento.
4dem$s! podemos insertar una ima*en como ondo del documento. =ara ello!
utili'aremos el atri#uto 13C054/U,D de la directiva 1/DE.
E8em&lo"
Mamos a suponer %ue tenemos la imagen fondo!etsii1gif*
)i en esta misma p$gina sustituimos +:;8<- por
+:;8< :4/FOE;(A8P.imagen.ondoCetsii.gi-
1$. #ormularios
5. La directiva ?;EM
7. La directiva BA=(T
9. La directiva ),L,/T
>. La directiva T,TT4E,4
Hasta el momento se han presentado caractersticas de HTML %ue permiten
al lector visuali'ar en su %ro,ser documentos multimedia y navegar por ellos!
aun%ue el lector no tenia posi#ilidad de interactuar con ellos. ,l siguiente paso
consiste en deinir dicha posi#ilidad* Los !ormularios.
,l principio del ormulario es #ien sencillo* el usuario rellena una serie de
campos y los envia a un programa de tratamiento! denominado gen&ricamente
C5. (Common -ate,a2 .nterface). Los campos pueden ser de diversa
Pgina 19 de 30
Programacin de paginas Web
naturale'a! como campos de edicin! men0s desplega#les! listas de opciones!
texto! etc.
=ara iniciar un ormulario en HTML se utili'ar$ la directiva +?;EM- ...
+.?;EM-. 8entro de ella especiicaremos todos los campos %ue intervienen en
el ormulario*
1$.1. La directiva #/4M
/on esta directiva especiicaremos el tratamiento %ue se reali'ar$ con
los campos introducidos por el usuario. =ara ello existen dos atri#utos*
,l atri#uto METH/D )e especiica la orma de pasar los valores de los
campos al programa de tratamiento. 4dmite los valores 5ET % P/2T.
,l atri#uto 3CT./, Bndicaremos el nom#re del programa de tratamiento.
,j. +?;EM M,TH;8Ppost 4/TB;APGcgiC#in.respuestaG- ... +.?;EM-
1$.2. La directiva .,PUT
,s una de las directivas %ue permite especiicar algunas clases de
campos de entrada! dependiendo de los atri#utos asociados*
,l atri#uto ,3ME Bndicaremos el nom#re asociado al campo de entrada! de#e
ser 0nico dentro de un mismo ormulario.
,l atri#uto 63LUE 8ependiendo del tipo o clase de campo indicar$ una cosa u
otra*
/ampo de texto* =redeine el contenido del campo.
/ampo su%mit o reset* Texto %ue aparecer$ en el #otn.
/ampo c(ec)%o& o radio* Malor asociado a la opcin.
,l atri#uto TEPE Bndicaremos el tipo o clase de campo. Los valores %ue puede
tomar son*
Te'to no es&ec!ico
/uando a la directiva .,PUT no le asociamos ning0n tipo! estamos indicando
una entrada de texto simple con despla'amiento hori'ontal. =odemos
especiicar el tamaJo de visuali'acin en n0mero de caracteres1 para ello
utili'aremos el atri#uto 2.GE.
+?;EM- +BA=(T A4M,Pnom#re )BU,P9K- +.?;EM-
2e visuali(ar"

submit ,s el #otn %ue reali'a el envi de la inormacin al programa de
tratamiento. E8em&lo" Todo este captulo es un ormulario! si hacemos click en
Pgina 20 de 30
Programacin de paginas Web
enviar! ejecutar$ un programa de tratamiento %ue mostrar$ los valores de todos
los campos de este ormulario.
+?;EM- +BA=(T T<=,Psu#mit M4L(,PGenviarG- +.?;EM- )e visuali'ar$*
enviar
4E2ET :otn de #orrado de todos los datos introducidos en el ormulario.
,jemplo*
+?;EM- +BA=(T T<=,Preset M4L(,PG#orrarG- +.?;EM- )e visuali'ar$*
#orrar
CHEC01/F ,s un campo multivalor ya %ue permite asignar uno o varios
valores a una misma varia#le. ,jemplo*
+?;EM-
+BA=(T T<=,Pcheck#ox A4M,PGsoG M4L(,PGmsdosG-M)C8;)+#r-
+BA=(T T<=,Pcheck#ox A4M,PGsoG M4L(,PGos7G-;).7+#r-
+BA=(T T<=,Pcheck#ox A4M,PGsoG M4L(,PGunixG-(ABT+#r-
+.?;EM-
2e visuali(ar"
M)C8;)
;).7
(nix
43D./ ,s un campo multivalor excluyente! permite escoger una y slo una
opcin de un conjunto de valores. ,jemplo*
+?;EM-
+input type P radio name P GsexoG value P Ghom#reG-Hom#re
+input type P radio name P GsexoG value P GmujerG-Mujer
+.?;EM-
2e visuali(ar"
Hom#re Mujer
P322H/4D ,s una 'ona de texto donde los caracteres se reempla'an por
asteriscos. ,jemplo*
+?;EM-
+input typePpass6ord namePGpass6dG-
+.?;EM-
)e visuali'ar$*
H.DDE, =ermite ocultar al usuario un campo en el ormulario dando un valor a
la varia#le asociada.
Pgina 21 de 30
Programacin de paginas Web
1$.3. La directiva 2ELECT
)e utili'a para deinir listas de opciones dentro de un ormulario. ,l
atri#uto A4M,! comentado en la directiva BA=(T! se utili'a de la misma orma.
=ara especiicar cada elemento de la lista u opcin se utili'a la directiva
+/PT./,- indicando a continuacin el texto de la opcin. E'isten dos ti&os
de listas"
MenIs Des&le*ables
,s un #otn %ue muestra la opcin seleccionada. )i se hace click so#re
el #otn se desplegar$ la lista de opciones. /omo atri#uto de la directiva
;=TB;A se puede especiicar 2ELECTED! de esta orma especiicaremos la
opcin seleccionada por deecto. ,jemplo*
+?;EM-
+),L,/T namePGpue#loG-
+;=TB;A-:errueces
+;=TB;A ),L,/T,8-/einos de /ampos
+;=TB;A-Laguna de 8uero
+;=TB;A-Millaln
+.),L,/T-
+.?;EM-
2e visuali(ar"
Listas con ventana virtual
)on listas %ue aparecen en una ventana con una #arra de
despla'amiento. )e especiican igual %ue las anteriores! aJadiendo el atri#uto
2.GE para indicar el n0mero de elementos de la ventana sica. )i se desean
seleccionar varias opciones se de#e especiicar el atri#uto MULT.PLE en la
directiva 2ELECT. ,jemplo*
+?;EM-
+),L,/T namePGlugarG si'eP9 multiple-
+;=TB;A-:errueces
+;=TB;A-/einos de /ampos
+;=TB;A-/uenca de /ampos
+;=TB;A-Laguna de 8uero
+;=TB;A-Malladolid
+;=TB;A-Millaln
+.),L,/T- +.?;EM-
2e visuali(ar"
Pgina 22 de 30
Programacin de paginas Web
1$.4. La directiva TEFT34E3
=ermite crear una 'ona de texto especiicando el n0mero de ilas
(atri#uto 4/H2) y de columnas (atri#uto C/L2) de la ventana. )i se desea
especiicar un texto! se har$ entre la directiva de apertura y la de cierre.
,jemplo*
+?;EM-
+T,TT4E,4 A4M,PGopinionG E;")P@ /;L)PDK-
Bntrodu'ca la opinin de esta introduccin a HTML*
+.T,TT4E,4-
+.?;EM-
2e visuali(ar"
17. #ormularios % C5.
)e ha comentado %ue los ormularios se #asan en la ejecucin de un
programa de tratamiento o C-. (Common -ate,a2 .nterface)! a partir de los
datos introducidos por el usuario. ,l cliente manda los datos del ormulario
como una cadena de caracteres de pares nombreJdelJcam&oAvalor!
separados por el caracter K. )i un valor contiene espacios en #lanco! ser$n
sustituidos por el caracter L. )i un campo contiene varios valores se repetir$ el
par nom#reYdelYcampoPvalor! tantas veces como valores tenga el campo.
campo34valor3&campo54valor5& 111
(na ve' el cliente a ormado la cadena (EL! la enva al servidor seg0n
el valor especiicado para el atri#uto M,TH;8*
5ET
/uando se utili'a el m&todo O,T! la cadena (EL de datos del ormulario
se adosa al nom#re del /OB. La separacin entre el nom#re del /OB y los datos
de entrada se reali'ar$ con el caracter D. 4s pu&s! se ormar$ una cadena
(EL del siguiente aspecto*
nom%re6cgi7campo34valor3&campo54valor5& 111
,n la ejecucin del /OB! esta cadena se u#ica en la varia#le de entorno
MUE4EJ2T4.,5
P/2T
Pgina 23 de 30
Programacin de paginas Web
,s el m&todo m$s utili'ado para el tratamiento de ormularios. La cadena
(EL de datos del ormulario se enva al /OB como entrada est$ndar de datos y
se genera la varia#le de entorno C/,TE,TJLE,5HT %ue tendr$ como valor el
n0mero de caracteres %ue orman la cadena (EL.
Paneles ?#rames@
19.1. .ntroducci)n
Hasta ahora! hemos visto como crear documentos HTML! de tal orma
%ue todo nuevo documento se visuali'a#a en la misma 'ona %ue el anterior1 no
podamos visuali'ar varios documentos a la ve'. )i %ueriamos volver al anterior
documento utili'a#amos el comando %ac). =ara poder visuali'ar varios
documento en el mismo %ro,ser y %ue un documento posterior pueda
actuali'ar una de las 'onas se deinen los &aneles(frames).
/on los paneles podemos dividir la pantalla de visuali'acin en varias
'onas donde cada una puede visuali'ar un documento dierente. =ara ello! la
estructura del documento HTML se ver$ aectada en la siguiente medida*
Documento HTML Paneles HTML
+HTML-
+H,48-
...
+.H,48-
+:;8<-
...
+.:;8<-
+.HTML-
+HTML-
+H,48-
...
+.H,48-
+?E4M,),T-
...
+?E4M,),T-
...
+?E4M,-
+.?E4M,),T-
...
+?E4M,-
+.?E4M,),T-
+A;?E4M,-
...
+.A;?E4M,-
+.HTML-
)e especiican tres nuevas directivas! ?E4M,),T! ?E4M, y
A;?E4M,! y un atri#uto en las directivas 4 y ?;EM! T4EO,T. ,n un panel
HTML se deine el aspecto de las 'onas de visuali'acin y los documentos %ue
se mostrar$n en cada una de ellas.
Pgina 24 de 30
Programacin de paginas Web
E8em&lo. La es&eci!icaci)n del &anel actual es"
+H,48-
+TBTL,-Bntroduccion a HTML* =aneles+.TBTL,-
+.H,48-
+?E4M,),T E;")PG5KL!XKLG-
+?E4M, )E/PGpanelYtitulo.htmlG )/E;LLBAOPGnoG-
+?E4M,),T /;L)PGZ!9ZG-
+?E4M, )E/PGpanelYmenu.htmlG M4EOBAH,BOHTP@K-
+?E4M, )E/PGpanelYintro.htmlG A4M,PGtextoG-
+.?E4M,),T-
+.?E4M,),T-
+A;?E4M,-
...
+.A;?E4M,-
19.2. #43ME2ET
,s la directiva (apertura y cierre) %ue divide la 'ona en su#'onas! #ien
verticalmente (atri#uto C/L2)! #ien hori'ontalmente (atri#uto 4/H2).
Los valores de los atri#utos 4/H2 y C/L2 est$n ormados por una
serie de elementos separados por comas! %ue indicar$n el tamaJo de las
'onas1 el cual! podr$ ser especiicado en uno de los tres ormatos siguientes*
num* Bndica tamaJo de la 'ona en pixels.
numN* Bndica tamaJo de la 'ona expresada en porcentaje de la 'ona a
dividir.
numO* Bndica tamaJo de la 'ona expresada en proporcin a las
restantes. 4%u num es opcional.
En nuestro e8em&lo"
+?E4M,),T E;")PG5KL!XKLG-
...
+?E4M,),T /;L)PGZ!9ZG-
...
+.?E4M,),T-
+.?E4M,),T-
,l frameset inicial divide toda la ventana en dos 'onas hori'ontales1 la primera
ocupar$ el 5KL y la segunda el XKL de la 'ona. 8e la misma orma! el
frameset anidado dividir$ la segunda 'ona (V@L) en dos su#'onas verticales1 la
primera ocupar$ 5.> del tamaJo y la segunda 9.>.
19.3. #43ME
La directiva ?E4M, se utili'a para caracteri'ar cada una de las 'onas deinidas
mediante la directiva ?E4M,),T.
Pgina 25 de 30
Programacin de paginas Web
3ce&ta 7 atributos"
24C Bndicaremos el (EL del documento %ue de#e mostrarse en la 'ona. )i
este atri#uto no se indica! la 'ona estar$ vaca.
,3ME )e utili'a para poner un nom#re a la 'ona. 8icho nom#re ser$ el
utili'ado para dirigir cual%uier enlace de hipertexto. Ao se pueden poner
nom#res %ue se inicien con el caracter PJP.
,/4E2.GE Ao se le indica ning0n valor1 cuando aparece! no se permite la
modiicacin de la 'ona con el ratn.
2C4/LL.,5 Bndica si la 'ona de#e o no poseer una #arra de despla'amiento!
o si se deja gestionar por el visuali'ador. Los valores posi#les son!
respectivamente! %es! no o auto.
M345.,HE.5HT Bndicaremos! en n0mero de pixels! el tamaJo de los
m$rgenes superior e inerior.
M345.,H.DTH Bndicaremos! en n0mero de pixels! el tamaJo de los m$rgenes
i'%uierda y derecha.
,n nuestro ejemplo (la visuali'acin actual)! tenemos deinidas tres 'onas*
+?E4M, )E/PGpanelYtitulo.htmlG )/E;LLBAOPGnoG-
+?E4M, )E/PGpanelYmenu.htmlG M4EOBAH,BOHTP@K-
+?E4M, )E/PGpanelYintro.htmlG A4M,PGtextoG-
,n la primera! la superior! destinaremos el documento panel6titulo1(tml y
no permitiremos #arra de despla'amiento. ,n la segunda! la i'%uierda!
destinaremos el documento panel6menu1(tml e indicamos un margen superior
de @K pixels. =or 0ltimo! en la tercera! la derecha! destinaremos el documento
panel6intro1(tml y la ponemos de nom#re te&to.
19.4. ,/#43ME
,s una directiva alternativa1 esto es! cuando un visuali'ador no soporta
los paneles! entonces visuali'ar$ como documento lo contenido entre
A;?E4M, y .A;?E4M,. ,n caso contrario! el visuali'ador no mostrar$ esta
parte.
,n nuestro ejemplo*
+A;?E4M,-
+H5-=aneles+.H5-
=ara poder visuali'ar esta seccin es necesario tener un visuali'ador
%ue soporte paneles (+em-rames+.em-)
+.A;?E4M,-
Pgina 26 de 30
Programacin de paginas Web
19.$. T345ET
/on el atri#uto T4EO,T indicaremos a un enlace de hipertexto
(directivas 4 o ?;EM) en %u& 'ona se de#e visuali'ar. =ara ello! el atri#uto
tomara como valor el A4M, de una 'ona del panel u otro valor preesta#lecido*
JblanQ
,l documento se visuali'ar$ en una nueva ventana (%ro,ser)
Jsel!
,l documento se visuali'ar$ en la misma 'ona donde est$ el enlace de
hipertexto. ,ste es el valor por deecto si no indicamos el atri#uto T4EO,T.
Jto&
Bndica al visuali'ador %ue elimine todos los paneles existentes y u#i%ue el
documento en una ventana completa.
J&arent

)i el documento de nivel superior! del %ue contiene el enlace de
hipertexto! es una deinicin de paneles! dicho valor provocar$ la visuali'acin
del nuevo documento en toda la 'ona de deinicin del documento de nivel
superior.
Bnicialmente visuali'aremos el documento enlace1(tml! %ue contiene*
+4 HE,?PGdo#laila.htmlG-8o#la ?ila+.4-+.#r-
+4 HE,?PGpaneles.htmlG T4EO,TPGYtopG-Bntroduccin a HTML* =aneles+.4-
)i pinchamos en 8o%la /ila dividiremos la 'ona en la %ue nos encontremos en
dos su#'onas hori'ontales! ya %ue el documento do%lafila1(tml contiene*
+?E4M,),T E;")PGZ!ZG-
+?E4M, )E/PGmenu.htmlG-
+?E4M, )E/PGenlace.htmlG-
+.?E4M,),T-
4s pu&s! en la parte inerior visuali'aremos el documento inicial y! en la parte
superior el documento menu1(tml*
+4 HE,?PGenlace.htmlG T4EO,TPGYparentG-8ivide ila+.4-(Yparent)+#r-
+4 HE,?PGenlace.htmlG T4EO,TPGYtopG-Mentana completa+.4-(Ytop)+#r-
+4 HE,?PG7ilaC7colum.htmlG T4EO,TPGYparentG-7 ilas por 7 columnas+.4-
)i pinchamos en 8ivide fila! como este documento proviene de una deinicin
de paneles (superior e inerior) y el T4EO,T es 6parent deshar$ las dos 'onas.
)i pinchamos en 9entana completa como tiene un T4EO,T de 6top visuali'ar$
el documento ocupando toda la ventana.
)i pinchamos en 5 filas por 5 columnas! como este documento proviene de una
deinicin de paneles (superior e inerior) y el T4EO,T es 6parent deshar$ las
Pgina 27 de 30
Programacin de paginas Web
dos 'onas y mostrar$ el documento 5fila!5colum1(tml %ue es una deinicin de
paneles con dos 'onas verticales*
+?E4M,),T /;L)PGZ!ZG-
+?E4M, )E/PGmenu.htmlG-
+?E4M, )E/PGenlace.htmlG-
+.?E4M,),T-
18 Ma!a"
,n HTML se pueden tener im$genes! asociando un (EL a una cierta parte de
la misma* im*enes ma&eadas o ma&as.
=ara coneccionar un mapa es necesario crear la imagen al tamaJo de
visuali'acin y delimitir cada una de las dierentes 'onas deseadas. =ara
delimitar una 'ona se reali'ar$ en orma de crculo! rectn*ulo o &ol*ono.
Las coordenadas %ue orman cual%uiera de las ormas mencionadas vendr$n
expresadas en pixels de imagen* la parte superior i'%uierda de la imagen
corresponde con el origen de coordenadas! mientras %ue la parte ineriorC
derecha corresponde con la coordenada m$s alta de la imagen.
,xisten dos t&cnicas para coneccionar un mapa*
Ma&as *estionados &or el servidor
,l servidor se encarga de hacer la correspondencia de coordenadas del
ratn con el (EL. =ara ello! es necesario la utili'acin de un programa /OB %ue
se ejecuta en el servidor m$s unos icheros de deinicin de 'onas. ,s el
m&todo m$s antiguo.
Ma&as *estionados &or el cliente
,n la versin 9 de HTML! se deinen los mapas gestionados por el
cliente. <a no necesitamos un programa /OB externo! pues las deiniciones de
las 'onas se especiican en la propia p$gina. ,l cliente ser$ el encargado de
hacer la correspondencia entre las coordenadas del ratn y el (EL. ,n este
captulo! mostraremos como especiicar un mapa gestionado por el cliente =ara
especiicar un mapa de#eremos reali'ar dos tareas* deinicin de las 'onas e
insercin de la imagen.
Directiva M4=" de!inici)n de las (onas.
=ara la deinicin de las 'onas del mapa se utili'ar$ la directiva M3P con el
atri#uto ,3ME para indicar el nom#re del mapa*
+M4= A4M,PGnom%reG-
...
+.M4=-
Pgina 28 de 30
Programacin de paginas Web
,n medio especiicaremos cada una de las 'onas de la imagen. =ara lo cual se
utili'ar$ una directiva 34E3 para cada 'ona. Los atri#utos a especiicar en la
directiva 4E,4 son*
2H3PE ,s la orma de la 'ona. Los valores %ue admite son* 4ECT!
P/LE5/,! C.4CLE o DE#3ULT para el resto de la imagen %ue no
haya sido incluida dentro de una 'ona.
C//4D2 Bndicaremos las coordenadas de la 'ona1 dependiendo de la
orma*
E,/T
Las coordenadas de los v&rtices superiorCi'%uierda e ineriorCderecha
(GTK!<K!T5!<5G).
=;L<O;A
Las coordenadas de cada uno de los v&rtices del polgono
(GTK!<K!T5!<5!T7!<7!...!Tn!<nG).
/BE/L,
La coordenada del centro del crculo y su radio (GT!<!rG).
H4E# o ,/H4E# Bndicaremos el (EL (H4E#) o nada (,/H4E#).
3tributo (),M4=" .nserci)n de un ma&a
(na ve' hemos deinido las 'onas del mapa! ya podemos hacer
reerencia a su nom#re. =ara ello! utili'aremos el atri#uto U2EM3P dentro de
la directiva .M5*
+BMO )E/PGnom%re6imagenG (),M4=PGRnom%re6del6mapaG-
E8em&lo
Hemos construido una imagen con tres 'onas*
5. Escudo E0S..* La 'ona deinida es un crculo y el (EL! la p$gina inicial
de la ,T)BB.
7. Escudo *9A* La 'ona deinida es el rect$ngulo %ue le englo#a y el (EL!
la p$gina inicial de la (niversidad de Malladolid.
9. :+piz* La 'ona deinida es el rect$ngulo %ue lo englo#a y el (EL! el
ndice de esta gua.
+BMO )E/PGmapaYejemplo.giG (),M4=PGRejemploG-
+M4= A4M,PGejemploG-
+4E,4 )H4=,P/BE/L, /;;E8)PGDW!@V!@9G HE,?PGhttp*..666.eis.uva.esG-
+4E,4 )H4=,PE,/T /;;E8)PG5>K!K!7@D!557G HE,?PGhttp*..666.uva.esG-
+4E,4 )H4=,PE,/T /;;E8)PG559!55D!5>V!5>WG
HE,?PGintroHTML.htmlRindiceG-
+4E,4 )H4=,P8,?4(LT A;HE,?-
+.M4=-
Pgina 29 de 30
Programacin de paginas Web
2e visuali(ar"
1iblio*ra!ias
8BE,//B;A,) 8, =4OBA4) ",8
http*..platea.pntic.mec.es.[a#ercian.guiahtml.
http*..es.tldp.org.ManualesCLu/4).docCcursoChtml.docCcursoChtml.
Pgina 30 de 30