7

1
Indice.
Introduccin................................................................................................................3
1. Estructura de un documento HTML.......................................................................4
Prctica 1.................................................................................................................5
2. Dando forma a te!to..............................................................................................."
#omentarios no $isi%es en a &antaa...................................................................1'
Prctica 2................................................................................................................1'
3. Enaces con otras &(inas.......................................................................................12
Estructura de os enaces.........................................................................................12
Ti&os de enaces......................................................................................................12
Enaces dentro de a misma &(ina.....................................................................12
Enaces con otra &(ina nuestra..........................................................................13
Enaces con una &(ina fuera de nuestro sistema...............................................14
Enaces con una direccin de emai....................................................................14
Prctica 3................................................................................................................14
4. Im(enes.................................................................................................................15
Prctica 4................................................................................................................1)
5. #aracteres es&eciaes..............................................................................................2'
Prctica 5.................................................................................................................21
". *ondos...................................................................................................................22
*ondos con un coor uniforme................................................................................22
#oores de te!to + de os enaces......................................................................22
*ondos con una ima(en..........................................................................................24
Prctica "................................................................................................................24
7. Ta%as.....................................................................................................................25
Estructura de una ta%a...........................................................................................25
Tituar de a ta%a...................................................................................................27
,ariando e es&esor de os %ordes.........................................................................27
#edas de ca%ecera.................................................................................................27
#ontenido de as cedas..........................................................................................2-
Posicionamiento de contenido dentro de a ceda.................................................2-
,ariando as dimensiones de a ta%a....................................................................2-
#edas .ue a%arcan a otras $arias..........................................................................2)
#oor de fondo en as ta%as..................................................................................3'
/e&aracin entre as cedas de una ta%a................................................................3'
/e&aracin entre e %orde + e contenido dentro de as cedas..............................3'
Prctica 7...............................................................................................................32
2
-. *ormuarios..........................................................................................................32
Estructura de un formuario.................................................................................33
Eti.ueta de inicio.............................................................................................33
Eementos &ara introducir os datos................................................................33
Introduccin &or medio de te!to 0una 1nea2................................................34
Introduccin &or medio de te!to 0m3ti&es 1neas2.....................................35
Introduccin &or medio de men3s................................................................3"
*ormuario de confirmacin 0c4ec5%o!2......................................................37
6otones de radio...........................................................................................37
6otones de en$1o + de %orrado.....................................................................3-
). *rames..................................................................................................................4'
Documento de definicin de os frames...................................................................41
Documentos HTML de cada frame......................................................................42
Documento de frame de a i7.uierda.......................................................................42
Documento de frame de a derec4a................................................................43
8tri%utos de a eti.ueta 9*:8ME/ET;..............................................................44
*rames sin %ordes.................................................................................................45
8tri%utos de a eti.ueta 9*:8ME;.....................................................................45
E atri%uto T8:<ET............................................................................................4"
*rames anidados dentro de otros frames...............................................................47
1'. /onidos................................................................................................................4)
*ondo sonoro &ara e Microsoft Internet E!&orer...............................................4)
*ondo sonoro &ara e =etsca&e............................................................................4)
8cti$acin de sonido &or e &ro&io usuario........................................................5'
3
Introduccin.
HTML si(nifica HyperText Markup Language. Es e en(ua>e en .ue se escri%en
os miones de documentos .ue 4o+ e!isten en e ?ord ?ide ?e%. #uando accedemos
a uno de estos documentos@ e ciente 0=etsca&e@ IE@ Mosaic@ L+n!@ I6roAse2 os
inter&reta + os des&ie(a. E!isten cientes (rficos como =etsca&e@ + otros como e
L+n! .ue soo des&ie(an te!to. Es mu+ im&ortante no o$idar esto cuando se diseBa
una &(ina Ae%. #rear una %uena &(ina tiene dos as&ectosC &or un ado e
conocimiento tDcnico &ara crear cdi(o HTML correcto@ &or otro ado e caro diseBo
&ara &resentar a informacin.
E o%>eti$o de este manua es &ro&orcionar un conocimiento %sico acerca de a
construccin de &(inas ?e%@ &ara un conocimiento ms &rofundo de este en(ua>e
&osteriormente se desarroarn ms $ersiones de este manua@ &or e momento
es&eramos .ue a informacin a.u1 &ro&orcionada e sea de utiidad.
4
1. Estructura de un Documento HTML
Ena &(ina Ae% es un arc4i$o de te!to@ se &uede crear con cua.uier editor de
te!to como e edit de DF/. E &rinci&io esencia de en(ua>e HTML 0H+&erTe!t
Mar5u& Lan(ua(e2 es e uso de as eti.uetas 0ta(s2. *uncionan de a si(uiente maneraG
9HHH; Este es e inicio de una eti.ueta.
9IHHH; Este es e cierre de una eti.ueta.
Las etras de a eti.ueta &ueden estar en ma+3scuas o min3scuas@
indiferentemente. Por caridad@ se usarn en este manua samente as ma+3scuas.
Lo .ue 4a+a entre am%as eti.uetas estar infuenciada &or eas. Por e>em&o@
todo e documento HTML de%e estar entre as eti.uetas 9HTML; + 9IHTML;G
9HTML; JTodo e documentoK 9IHTML;
E documento en s1 est di$idido en dos 7onas &rinci&aesG
E enca%e7amiento@ com&rendido entre as eti.uetas 9HE8D; + 9IHE8D;
E cuer&o@ com&rendido entre as eti.uetas 96FDL; + 9I6FDL;
Dentro de enca%e7amiento 4a+ informacin de documento@ .ue no se $e en a
&antaa &rinci&a@ &rinci&amente e t1tuo de documento@ com&rendido entre as
eti.uetas 9TITLE; + 9ITITLE;. E t1tuo de%e ser %re$e + descri&ti$o de su contenido@
&ues ser o .ue $ean os dems cuando aBadan nuestra &(ina a su %oo5mar5 0o a(enda
de direcciones2.
Dentro de cuer&o est todo o .ue .ueremos .ue a&are7ca en a &antaa
&rinci&a 0te!to@ im(enes@ etc.2
Por tanto@ a estructura .ueda de esta maneraG
<HTML>
<HEAD>
<TITLE> Ttulo de la pgina </TITLE>
</HEAD>
<BODY>
[Aqu van la etiqueta que viuali!an la pgina"
</BODY>
</HTML>
8ntes de crear nuestra &rimera &(ina@ unas consideraciones so%re e te!toG
5
#uando escri%imos en e documento e te!to .ue .ueremos .ue a&are7ca en a
&antaa@ $eremos .ue Dste se acomoda a ea@ sin .ue ten(amos .ue &usar e
retorno de carro. /i .ueremos se&arar e te!to en distintos &rrafos de%emos
usar a eti.ueta 9P;@ 0.ue no tiene su corres&ondiente eti.ueta de cierre 9IP;2 .
E te!to &uede tener unas ca%eceras@ com&rendidas entre as eti.uetas 9H1; +
9IH1;@ 9H2; + 9IH2;@ etc. 04asta e n3mero "2@ siendo e n3mero indicati$o de
tamaBo. E tamaBo ma+or es e corres&ondiente a n3mero 1. Puedes
e!&erimentar en e e>em&o .ue si(ue@ cam%iando e n3mero &ara com&ro%ar e
efecto .ue se o(ra.
Ena eti.ueta mu+ interesante es a de centrado 9#E=TE:; + 9I#E=TE:; 0no a
so&ortan todos os na$e(adores@ aun.ue s1 a ma+or1a de eos2. =os centra todo o .ue
estD dentro de ea@ +a sea te!to@ im(enes@ etc.
Tam%iDn tenemos os se&aradores 04ori7onta rues2@ .ue se consi(uen con a
eti.ueta 9H:; 0no e!iste a corres&ondiente de cierre2. #on ea se o%tiene una ra+a
4ori7onta tan anc4a como a &antaa@ + con a a&ariencia de estar em%utida so%re e
fondo@ como se &uede o%ser$ar a continuacinG
Prctica 1.

En e &rocesador de te!to co&iamos o si(uienteG
<HTML>
<HEAD>
<TITLE> Mi pagina del #e$ % & </TITLE>
</HEAD>
<BODY>
<H&> <'E(TE)> *+i,e+a pagina </'E(TE)> </H&>
<H)>
Eta e ,i p+i,e+a pagina- aunque todavia e ,u. en/illa0
'o,o el
lengua1e HTML no e di2i/il- p+onto eta+e en /ondi/ione de
3a/e+
/oa ,a inte+eante0
<*> Aqui va un egundo pa++a2o0
</BODY>
</HTML>
<uardamos e fic4ero en e &rocesador de te!tos con e nom%re de mi&a(1.4tm
+ o car(amos en e na$e(ador. Este ser e resutado.
"
2. Dando forma al
texto
#omo 4emos $isto en e e>em&o de ca&1tuo anterior@ cuando .ueremos &oner
un te!to sin nin(una caracter1sca es&ecia@ o &onemos directamente. Enicamente@ a
se&aracin entre &rrafos 0de>ando una 1nea en %anco2 a conse(uimos con a eti.ueta
9P;.
/i .ueremos se&arar os &rrafos@ o cua.uier otra cosa@ &ero sin de>ar una 1nea
en %anco@ usamos una eti.ueta &arecida 96:; 0%rea5@ o rom&er2. Tam&oco tiene
eti.ueta de cierre.
/i .ueremos o%tener m3ti&es 1neas en %anco no %asta con re&etir a eti.ueta
9P;@ sino .ue 4a+ .ue com%inara con a eti.ueta 96:;. 8s1 &or e>em&o@ si .ueremos
o%tener cuatro 1neas en %anco@ &ondr1amosG
<B)><*>
<B)><*>
<B)><*>
<B)><*>
8 escri%ir e te!to@ si &onemos ms de un es&acio en %anco entre dos &aa%ras
o%ser$amos .ue e na$e(ador so reconoce uno de eos. /i .ueremos for7are a .ue o
4a(a@ de%emos &oner e cdi(o MNn%s&CM 0nonO%rea5in( s&ace2.
Para destacar a(una &arte de te!to se &ueden usarG
<B> . </B> pa+a pone+ algo en neg+ita 4$old50
<I> . </I> pa+a pone+ algo en /u+iva 4itali/50
Ftra eti.ueta interesante es 9P:E; + 9IP:E;. E te!to .ue se encuentre entre
ea estar &reformateado@ es decir .ue a&arecer como si 4u%iera sido escrito con una
m.uina de escri%ir@ con una fuente de es&aciado fi>o 0ti&o #ourier2. 8dems se
7
res&etarn os es&acios en %anco + retornos de carro@ ta como esta%an en nuestro
documento HTML 0o cua no ocurre normamente@ como 4emos $isto anteriormente2.
Es mu+ a&ro&iada &ara confeccionar ta%as + otros documentos simiares.
#on a eti.ueta 9TT; + 9ITT; conse(uimos tam%iDn .ue e te!to ten(a un
tamaBo menor + a a&ariencia de os caracteres de una m.uina de escri%ir 0t+&eAriter2.
La diferencia con a anterior es .ue no &reformatea e te!to@ sino .ue 3nicamente
cam%ia su a&ariencia.
La eti.ueta 96LF#PQEFTE; + 9I6LF#PQEFTE; se utii7a &ara destacar una
cita te!tua dentro de te!to (enera.
En as frmuas matemticas &uede interesar &oder escri%ir 1ndices + su%1ndices@
.ue se consi(uen con as eti.uetas 9/EP; 9I/EP; + 9/E6; 9I/E6; res&ecti$amente.
8s1@ &or e>em&oG
m2 se consi(ue de a si(uiente maneraG m9/EP;29I/EP;
$! se consi(ue conG $9/E6;!9I/E6;
8 menudo nos interesar &resentar as cosas en forma de istas. Podemos esco(er
entre tres ti&os distintosG
1.Listas desordenadas 0no numeradas2
2.Listas ordenadas 0numeradas2
3.Listas de definicin.
Las listas desordenadas 0unordered ists2 sir$en &ara &resentar cosas .ue@ &or
no tener un orden determinado@ no necesitan ir &recedidas &or un n3mero. /u estructura
es a si(uienteG
<6L>
<LI> 6na /oa
<LI> Ot+a /oa
<LI> Ot+a ,
<LI> Et/0
</6L>
Es decir@ toda a ista est dentro de a
eti.ueta 9EL; + 9IEL;@ + ue(o cada cosa $a
&recedida de a eti.ueta 9LI; 0ist item2. E
resutado de o anterior es e si(uienteG
/e &uede anidar una ista dentro de otra. Por e>em&oG
-
9EL;
9LI; Mam1feros
9LI; Peces
9EL;
9LI; /ardina
9LI; 6acaao
9IEL;
9LI; 8$es
9IEL;
Las listas ordenadas 0ordered ists2 sir$en &ara &resentar cosas en un orden
determinado. /u estructura es mu+ simiar a a anterior. La diferencia estri%a en .ue en
e resutado a&arecer automticamente un n3mero correati$o &ara cada cosa.
9FL;
9LI; Primera cosa
9LI; /e(unda cosa
9LI; Tercera cosa
9LI; Etc.
9IFL;
8 i(ua .ue as istas desordenadas@ tam%iDn se &ueden anidar as istas
ordenadas.
E tercer ti&o o forman as listas de definicin. #omo su nom%re indica@ son
a&ro&iadas &ara (osarios 0o definiciones de tDrminos2. Toda a ista de%e ir en(o%ada
entre as eti.uetas 9DL; + 9IDL;. L a diferencia de as dos .ue 4emos $isto@ cada
ren(n de a ista tiene dos &artesG
1. E nom%re de a cosa a definir @ .ue se consi(ue con a eti.ueta 9DT;
0definition term2
2. La definicin de dic4a cosa@ .ue
se consi(ue con a eti.ueta 9DD;
0definition definition2.
9DL;
9DT; Ena cosa a definir
9DD; La definicin de esta cosa
9DT; Ftra cosa a definir
9DD; La definicin de esta otra cosa
9IDL;
)
Comentarios no visibles en la pantalla
8 $eces es mu+ 3ti escri%ir comentarios en e documento HTML so%re e cdi(o
.ue escri%imos@ .ue nos &ueden ser$ir &ara recordar &osteriormente so%re o .ue
4icimos@ + .ue no .ueremos .ue se $ean en &antaa.
Esto se consi(ue encerrando dic4os comentarios entre estos dos s1m%oosG 9ROO +
OO;
E>em&oG
<7%% Eto e un /o,enta+io al /8digo que no e ve+ en pantalla
%%>
Prctica 2
En e &rocesador de te!tos co&iamosG
<HTML>
<HEAD>
<TITLE> Mi pagina del #e$ % 9 </TITLE>
</HEAD>
<BODY>
<'E(TE)>
<H&> Mi a2i/ione </H&>
</'E(TE)>
<H)>
:in un o+den pa+ti/ula+- ,i <B> a2i/ione </B> on la
iguiente;
<6L>
<LI> El /ine
<LI> El depo+te
<6L>
<LI> (ata/ion
<LI> Balon/eto
</6L>
<LI> La ,ui/a
</6L>
La ,ui/a que ,a ,e guta e <I> 4en o+den de p+e2e+en/ia5;
</I>
<OL>
<LI> El +o/<
<LI> El 1a!!
<LI> La ,ui/a /lai/a
</OL>
</BODY>
</HTML>
<uardamos e fic4ero de te!to con un nom%re cua.uiera + a e!tensin .4tm +
o car(amos en e na$e(ador.
1'
Este es e resutado.
3. Enlaces con otras pginas
La caracter1stica .ue ms 4a infuido en e es&ectacuar D!ito de ?e% 0o tea de
araBa2 4a sido@ a&arte a de su carcter mutimedia@ a &osi%iidad de unir os distintos
documentos re&artidos &or todo e mundo &or medio de enaces 4i&erte!to.
Estructura de los enlaces
En (enera@ os enaces tienen a si(uiente estructuraG
98 H:E*SM!!!M; +++ 9I8;
donde !!! es e destino de enace 0F%sDr$ese as comias2. +++ es e te!to indicati$o
en a &antaa de enace 0con un coor es&ecia + (eneramente su%ra+ado2
Tipos de enlaces
,amos a distin(uir cuatro ti&os de enacesG
a2 Enaces dentro de a misma &(ina
%2 Enaces con otra &(ina nuestra
c2 Enaces con una &(ina fuera de nuestro sistema
d2 Enaces con una direccin de emai
11
a2 Enaces dentro de a misma &(ina
8 $eces@ en e caso de documentos 0o &(inas2 mu+ e!tensos@ nos &uede
interesar dar un sato desde una &osicin a otra determinada. En este caso@ o .ue antes
4emos amado HHH@ es decir@ e destino de enace@ en este caso e sitio dentro de a
&(ina a donde .ueremos satar@ se sustitu+e &or Tmarca 0a &aa%ra marca &uede ser
cua.uier &aa%ra .ue .ueramos2. Lo .ue 4emos amado antes LLL es a &aa%ra 0o
&aa%ras2 .ue a&arecern en a &antaa en coor 0en forma de 4i&erte!to2. /u estructura
es@ entoncesG
<A H)E=>?@,a+/a?> YYY </A>
L en e sitio e!acto a donde .ueremos satar@ de%emos &oner a si(uiente eti.uetaG
<A (AME>?,a+/a?> </A>
Por e>em&o@ si .uiero satar desde a.u1 a a &antaa fina@ &on(o a si(uiente eti.uetaG
<A H)E=>?@2inal?> *ula pa+a i+ al 2inal</A>
L en e fina de documento 4e &uesto esta otra eti.uetaG
<A (AME>?2inal?> </A>
%2 Enaces con otra &(ina nuestra
Puede ser .ue ten(amos una soa &(ina. Pero o ms frecuente es .ue ten(amos
$arias &(inas@ una inicia 0o &rinci&a2 + otras conectadas a ea@ e incuso entre eas
mismas.
/u&on(amos .ue .ueremos ena7ar con a &(ina creada en e e>em&o de
ca&1tuo anterior@ .ue a 4emos amado mi&a(2.4tm. En este caso@ sim&emente
sustituimos o .ue 4emos amado HHH 0e destino de enace2 &or e nom%re de
fic4eroG
<A H)E=>?,ipag903t,l?> E1e,plo del /aptulo 9 </A>
/i .ueremos .ue $a+a a un sitio concreto de otra &(ina nuestra en $e7 de ir a
&rinci&io de a &(ina@ adonde $a &or defecto@ en ese sitio tenemos .ue coocar una
marca 0$Dase a seccin anterior2@ + com&etar e enace con a referencia a esa marca.
Ena o%ser$acin im&ortanteG Esto+ su&oniendo .ue a &(ina en a .ue esto+
escri%iendo esta eti.ueta + a otra &(ina a a .ue .uiero satar estn en e mismo
directorio. Por.ue &udiera ocurrir .ue 4e or(ani7ado mi sitio de ?e% con un directorio
&rinci&a@ + otros su%directorios au!iiares. /i a &(ina a a .ue .uiero satar est@ &. e>.
en e su%directorio su%dir@ entonces en a eti.ueta tendr1a .ue 4a%er &uesto
Msu%dirImi&a(2.4tmM.
L a a in$ersa@ si .uiero satar desde una &(ina a otra .ue est en un directorio
anterior@ en a eti.ueta tendr1a .ue 4a%er &uesto M..Imi&a(2.4tmM. Esos dos &untos 4ace
.ue se diri>a a directorio anterior. F%sDr$ese .ue se de%e utii7ar e s1m%oo I &ara
indicar os su%directorios@ + no este otro U@ .ue es &ro&io 3nicamente de ?indoAs.
12
/i nos .ueremos e$itar todas estas com&icaciones@ &odemos tener todo >unto en
un 3nico directorio@ &ero esto tiene e incon$eniente de .ue estD todo ms desordenado@
+ sean ms dif1cies de 4acer as futuras modificaciones.
c2 Enaces con una &(ina fuera de nuestro sistema
/i .ueremos ena7ar con una &(ina .ue estD fuera de nuestro sistema 0es decir@
.ue estD en un ser$idor distinto a .ue so&orta nuestra &(ina2@ es necesario conocer su
direccin com&eta@ o E:L 0Eniform :esource Locator2. E E:L &odr1a ser@ adems de
a direccin de una &(ina de ?e%@ una direccin de ft&@ (o&4er@ etc.
Ena $e7 conocida a direccin 0o E:L2@ o coocamos en $e7 de o .ue 4emos
amado anteriormente !!! 0e destino de enace2. /i .ueremos ena7ar con a &(ina de
=etsca&e 0cu+o E:L esG 4tt&GII4ome.netsca&e.comI2@ a eti.ueta ser1aG
<A H)E=>?3ttp;//3o,e0net/ape0/o,/?> *gina ini/ial de (et/ape
</A>
Es mu+ im&ortante co&iar estas direcciones correctamente 0res&etando as
ma+3scuas + min3scuas@ &ues os ser$idores E=IH s1 as distin(uen2
d2 Enaces con una direccin de emai
En este caso@ sustituimos o .ue se 4a amado antes !!! 0e destino de enace2
&or maitoG se(uido de a direccin de emai. La estructura de a eti.ueta esG
<A H)E=>?,ailto; di+e//i8n de e,ail?> TeAto del enla/e </A>
Es decir@ es con$eniente &oner tam%iDn en e te!to de enace a direccin de emai.
Prctica 3.
En e &rocesador de te!tos co&iamosG
<HTML>
<HEAD>
<TITLE> Mi pagina del #e$ % B </TITLE>
</HEAD>
<BODY>
<'E(TE)>
<H&> Mi pagina 2avo+ita </H&>
</'E(TE)>
<H)>
Eta on ,i pagina 2avo+ita;
<*><A H)E=>?3ttp;//3o,e0net/ape0/o,?> (et/ape </A>
<B)> <A H)E=>?3ttp;//CCC0,i/+oo2t0/o,?> Mi/+oo2t </A>
<B)> <A H)E=>?3ttp;//CCC0.a3oo0/o,?> Ya3oo7 </A>
</BODY>
</HTML>
13
<uardamos e fic4ero de te!to con e nom%re mi&a(3.4tm + o car(amos en e
na$e(ador. Este es e resutadoG
. Imgenes
La eti.ueta .ue nos sir$e &ara incuir im(enes en nuestras &(inas de ?e% es
mu+ simiar a a de enaces a otras &(inas@ .ue 4emos $isto en e ca&1tuo anterior. La
3nica diferencia es .ue@ en u(ar de indicar a &ro(rama na$e(ador e nom%re + a
ocai7acin de un documento de te!to HTML &ara .ue o car(ue@ se e indica e nom%re
+ a ocai7acin de un fic4ero .ue contiene una ima(en. La estructura de a eti.ueta esG
<IMD :)'>?i,agen0gi2?>
#on e comando IM< /:# 0ima(e source@ fuente de a ima(en2 se indica .ue se
.uiere car(ar una ima(en amada ima(en.(if 0o e nom%re .ue ten(a2.
Dentro de a eti.ueta se &ueden aBadir otros comandos@ ta como 8LT
<IMD :)'>?i,agen0gi2? ALT>?de/+ip/i8n?>
#on e comando 8LT se introduce una descri&cin 0una &aa%ra o una frase
%re$e2 indicati$a de a ima(en. Este comando@ .ue en &rinci&io se &uede omitir@ es en
%eneficio de os .ue accedan a nuestra &(ina con un &ro(rama na$e(ador en forma de
te!to so. La .ue no son ca&aces de $er a ima(en@ &or o menos &ueden 4acerse una
idea so%re ea. Pero no es so &or esto. Ha+ casos@ como $eremos ms adeante@ en os
.ue se utii7a una ima(en como enace a otra &(ina. /i se omitiera este comando@ os
.ue utii7an dic4os na$e(adores no &odr1an de nin(una manera acceder a esas &(inas.
#on res&ecto a a ocai7acin de fic4ero de esa ima(en@ se &uede decir a.u1 o
mismo .ue en e ca&1tuo anterior referente a os enaces.
8 i(ua .ue una &(ina con a .ue .ueremos ena7ar &uede estar fuera de
nuestro sistema@ 0en cu+o caso 4a%1a .ue indicar su E:L o direccin com&eta2@
&odemos car(ar una ima(en .ue no estD en nuestro sistema si(uiendo e mismo mDtodo@
es decir@ indicar en a eti.ueta e E:L com&eto de a ima(en. 8un.ue esto no es mu+
aconse>a%e@ &ues aar(ar1a innecesariamente e tiem&o de car(a de nuestra &(ina.
14
Las im(enes de%en estar (uardadas en un formato de fic4ero es&ecia amado
<I*. 0Ha+ tam%iDn otro formato ms a$an7ado@ de .ue se 4a%ar ms adeante2. Este
formato <I* amacena as im(enes con un m!imo de 25" coores@ en forma
com&rimida. Ha+ &ro(ramas (rficos 0como e Paint /4o& Pro &ara e P#@ o e <ra&4ic
#on$erter &ara e Mac2 .ue nos &ermiten (uardar as im(enes en este formato@ adems
de cum&ir otras muc4as tareas de mani&uacin de as mismas.
En as&ecto mu+ im&ortante a tener en cuenta es e tamaBo de as im(enes@ &ues
una ima(en (rande su&one un fic4ero (rande@ + esto &uede resutar en un tiem&o
e!cesi$o de car(a.
Para ee(ir a &osicin de a ima(en con res&ecto a te!to 4a+ distintas
&osi%iidades. La ms sencia es coocara entre dos &rrafos@ con un tituar a un ado.
Los na$e(adores ms actuaes 0como e =etsca&e =a$i(ator + e Microsoft Internet
E!&orer2 &ermiten .ue e te!to &ueda rodear a a ima(en 0como se $er ms adeante@
en e #a&1tuo -2.
De momento nos $amos a imitar a esco(er a &osicin de tituar con res&ecto a
a ima(en 0si es .ue .ueremos &onere un tituar@ caro est2. /e &uede &oner arri%a@ en
medio o a%a>o de ado de a ima(en. Para eo se aBade e comando 8LI<= a a
eti.ueta@ de a si(uiente maneraG
<IMD :)'>?ila0gi2? ALID(>TO*> Titula+ alineado a++i$a
<IMD :)'>?ila0gi2? ALID(>MIDDLE> Titula+ alineado en ,edio
<IMD :)'>?ila0gi2? ALID(>BOTTOM> Titula+ alineado a$a1o
Ftra &osi%iidad mu+ interesante es a de utii7ar una ima(en como enace a otra
&(ina. Para estos casos se utii7an (eneramente im(enes &e.ueBas 0iconos2@ aun.ue
se &uede usar cua.uier ti&o de ima(en.
/e(3n $imos en e ca&1tuo anterior@ a estructura (enera de un enace esG
<A H)E=>?AAA?> ... </A>
En este caso sustituimos !!! &or e nom%re de fic4ero de a &(ina a a .ue
.ueremos acceder. L en u(ar de +++ &onemos a eti.ueta com&eta de a ima(en 0.ue
.ueda as1 en(o%ada dentro de a eti.ueta de enace2
#omo e>em&o $amos a utii7ar a ima(en 04and.(if2 &ara acceder a e>em&o &rctico
de ca&1tuo 2 0mi&a(2.4tm2G
<A H)E=>?,ipag903t,l?><IMD :)'>?3and0gi2?></A>
.ue da como resutadoG
Pusando a ima(en
com&ro%amos cmo efecti$amente
15
ena7a con a &(ina deseada. F%sDr$ese adems .ue a ima(en est rodeada de un
rect(uo de coor norma en os enaces. /i no se desea .ue a&are7ca ese rectn(uo@
4a+ .ue incuir dentro de a eti.ueta de a ima(en e atri%uto
6F:DE:S'@ es decirG
<A H)E=>?,ipag903t,l?><IMD :)'>?3o,$+e0gi2? BO)DE)>E></A>
.ue da como resutadoG
Posicionando e cursor so%re esta
3tima ima(en@ com&ro%amos .ue act3a
tam%iDn como enace aun.ue care7ca de
rectn(uo de coor. Esto &uede resutar
ms estDtico.
Tam%iDn &odemos utii7ar una ima(en &ara ena7ar con otra ima(en. En este
caso sustituimos !!! 0e destino de enace2 con e nom%re de fic4ero de a ima(en a a
.ue .ueremos acceder e +++ 0o .ue a&arece en &antaa como e enace2 &or a eti.ueta
com&eta de a ima(en .ue .ueremos .ue a&are7ca en a &antaa como e enace de a
otra.
Por 3timo@ otra &osi%iidad es a de utii7ar un te!to &ara ena7ar con una
ima(en. En este caso sustituimos !!! 0e destino de enace2 con e nom%re de fic4ero
de a ima(en a a .ue .ueremos acceder e +++ 0o .ue a&arece en &antaa como e
enace2 &or e te!to.
/u&on(amos .ue .ueremos ena7ar con a ima(en 4and.(if &or medio de un te!toG
98 H:E*SM4and.(ifM; necesitas una manoV 9I8;
Que da como resutadoG
1"
En ti&o de im(enes de .ue se 4ace a%undante uso + .ue sir$en &ara me>orar a
&resentacin de a &(ina son os iconos@ %otones@ %arras se&aradoras@ etc. 8 &esar de su
tamaBo o forma@ son im(enes como cua.uier otra.
Por e>em&o utii7amos un %oton ace&tar + escri%imos en e sitio corres&ondienteG
<IMD :)'>?$Fa/epta+0gi2G> Eta linea eta p+e/edida po+ un $oton
a/epta+.
Que resutaG


Prctica 4.
Primeramente es necesario o%tener tres im(enes <if@ .ue &uede ca&turar de
a(una &(ina en internet soo &resionando e %oton derec4o de mouse@ + (uardaras en
e mismo directorio en e .ue se (uardar e fic4ero de te!to .ue se $a a crear a
continuacin@ >unto con os de os ca&1tuos anteriores.
En e &rocesador de te!tos co&iamosG
9HTML;
9HE8D;
9TITLE; Mi &a(ina de ?e% O 4 9ITITLE;
9IHE8D;
96FDL;
9#E=TE:;
9H1; Mi &a(ina de ?e% 9IH1;
9I#E=TE:;
9H:;
Esta es mi &a(ina de ?e%. =o es mu+ e!tensa@ &ero tiene todos os
eementos %asicos. Es&ero .ue os (uste. Poco a &oco e ire anadiendo
mas cosas interesantes.
9P; 98 H:E*SMmi&a(2.4tmM; 9IM< /:#SMima(en1.(ifM; 9I8; Mis aficiones
9P; 98 H:E*SMmi&a(3.4tmM; 9IM< /:#SMima(en2.(ifM; 9I8; Mis &a(inas
fa$oritas
9#E=TE:;
9H3; En u(ar idea &ara mis $acaciones 9IH3;
9IM< /:#SMima(en3.(ifM 8LTSMisaM;
9I#E=TE:;
9I6FDL;
9IHTML;
17
<uardamos e fic4ero de te!to con e nom%re mi&a(4.4tm + o car(amos en e
na$e(ador. Este es e resutado.

!. "aracteres especiales
E!isten a(unas imitaciones &ara escri%ir e te!to. Ena de eas es de%ido a .ue
as eti.uetas se forman como un comando escrito entre os s1m%oos M9M + M;M. Por
tanto@ si se .uisieran escri%ir estos caracteres como &arte norma de te!to@ dar1a esto
u(ar a una am%i(Wedad@ +a .ue e &ro(rama na$e(ador &odr1a inter&retaros como e
comien7o o fina de una eti.ueta@ en $e7 de un carcter ms de te!to.
Para reso$er este &ro%ema@ e!isten unos cdi(os &ara &oder escri%ir estos
caracteres + otros reacionados con as eti.uetas.
NtC &ara 9 0ess t4an@ menor .ue2
N(tC &ara ; 0(reater t4an@ ma+or .ue2
Nam&C &ara N 0am&ersand2
N.uotC &ara M 0dou%e .uotation2
#omo se $e@ estos cdi(os em&ie7an siem&re con e si(no N + aca%an siem&re
con C De una manera simiar@ e!isten cdi(os &ara escri%ir etras es&ec1ficas de
distintos idiomas. Ha+ muc4os de eos@ &ero@ (icamente@ os .ue ms nos interesan
son os &ro&ios de casteano 0as $ocaes acentuadas@ a B + os si(nos X + Y 2
Los cdi(os de as $ocaes acentuadas se forman comen7ando con N@ se(uido de
a $oca en cuestin@ se(uido de a &aa%ra acute 0a(uda2 + terminando con e si(no C
NaacuteC &ara a NeacuteC &ara a D
NiacuteC &ara a 1 NoacuteC &ara a
NuacuteC &ara a 3 N8acuteC &ara a Z
NEacuteC &ara a [ NIacuteC &ara a \
NFacuteC &ara a ] NEacuteC &ara a ^
1-
E resto de os cdi(os sonG
NntideC &ara a B N=tideC &ara a _
NuumC &ara a W NEumC &ara a `
NT1)1C &ara X NT1"1C &ara Y
Prctica 5.
#omo e>ercicio de este ca&1tuo $amos a sustituir en e e>em&o &rctico de ca&1tuo
anterior 0mi&a(4.4tm2 as $ocaes acentuadas &or sus corres&ondientes cdi(os.
Quedar de esta maneraG
<HTML>
<HEAD>
<TITLE> Mi pHaa/uteIgina del #e$ % J </TITLE>
</HEAD>
<BODY>
<'E(TE)>
<H&> Mi pHaa/uteIgina del #e$ </H&>
</'E(TE)>
<H)>
Eta e ,i pHaa/uteIgina del #e$0 (o e ,u. eAtena- pe+o tiene
todo lo
ele,ento $Haa/uteIi/o0 Epe+o que o gute0 *o/o a po/o le
i+Hea/uteI
aHntildeIadiendo ,Haa/uteI /oa inte+eante0
<*> <A H)E=>?,ipag903t,l?> <IMD :)'>?3o,$+e0gi2?> </A> Mi
a2i/ione
<*> <A H)E=>?,ipagB03t,l?> <IMD :)'>?/aa0gi2?> </A> Mi
pHaa/uteIgina
2avo+ita
<'E(TE)>
<HB> 6n luga+ ideal pa+a ,i va/a/ione </HB>
<IMD :)'>?ila0gi2? ALT>?ila?>
</'E(TE)>
</BODY>
</HTML>
#. $ondos
/e &uede cam%iar e fondo de dos maneras distintasG
a2 #on un coor uniforme
%2 #on una ima(en
a) Fondos con un color uniforme
1)
/e consi(ue aBadiendo e comando 6<#FLF: a a eti.ueta 96FDL; 0situada
a &rinci&io de documento2@ de a si(uiente maneraG
<BODY BD'OLO)>?@KKYYLL?>
dondeG
HH es un n3mero indicati$o de a cantidad de coor ro>o
LL es un n3mero indicati$o de a cantidad de coor $erde
aa es un n3mero indicati$o de a cantidad de coor a7u
Estos n3meros estn en numeracin 4e!adecima. Esta numeracin se caracteri7a
&or tener 1" d1(itos 0en u(ar de os die7 de a numeracin decima 4a%itua2. Estos
d1(ito sonG
' 1 2 3 4 5 " 7 - ) 8 6 # D E *
Es decir@ .ue en nuestro caso@ e n3mero menor es e '' + e ma+or e **. 8s1@
&or e>em&o@ e coor ro>o es e T**''''@ &or.ue tiene e m!imo de ro>o + cero de os
otro dos coores .
Los coores &rimarios sonG
T**'''' O :o>o
T''**'' O ,erde
T''''** O 87u
Para 4acer un coor ms oscuro@ 4a+ .ue reducir e n3mero de su com&onente@
de>ando os otros dos in$aria%es. 8s1@ e ro>o T**'''' se &uede 4acer ms
oscuro con T88''''@ o a3n ms oscuro con T55''''.
Para 4acer .ue un coor ten(a un tono ms sua$e 0ms &aste2@ se de%en $ariar
os otros dos coores 4aciDndoos ms caros 0n3mero ms ato2@ en una cantidad
i(ua. 8s1@ &odemos con$ertir e ro>o en rosa con T**7'7'.
#oores de te!to + de os enaces
2'
Ftros coores sonG
T****** O 6anco
T'''''' O =e(ro
T****'' O 8mario
/i no se $ariasen os coores 4a%ituaes de te!to + de os enaces 0ne(ro + a7u@
res&ecti$amente2@ &odr1a ocurrir .ue su ectura contra un fondo oscuro fuese mu+
dificutosa@ o incuso im&osi%e@ si e fondo fuese &recisamente ne(ro o a7u.
Para e$itar esto@ se &ueden esco(er os coores de te!to + de os enaces@
aBadiendo a a eti.ueta 0si se desea2 os si(uientes comandosG
TEHT O coor de te!to
LI=P O coor de os enaces
,LI=P O coor de os enaces $isitados
8LI=P O coor de os enaces acti$os 0e .ue ad.uieren en e momento de ser
&usados2
Los cdi(os de os coores son os mismos .ue os .ue se 4an $isto anteriormente.
La eti.ueta@ con todas sus &osi%iidades@ ser1aG
< BODY BD'OLO)>?@KKYYLL? TEKT>?@KKYYLL? LI(M>?@KKYYLL?
NLI(M>?@KKYYLL?
ALI(M>?@KKYYLL?>
E>em&o.
E comando TEHT e!&icado
anteriormente 0.ue $a en(o%ado dentro de
a eti.ueta 96FDL;2 cam%ia e coor de
a totaidad de te!to de a &(ina.
Tanto e =etsca&e =a$i(ator 2@ como e
Microsoft E!&orer so&ortan una eti.ueta
de coor de a fuente con a .ue se &uede
cam%iar so una &arte de te!toG
<=O(T 'OLO)>?@==EEEE?> Ete teAto e de /olo+ +o1o </=O(T>
b) Fondos con una imagen
E fondo de una &(ina &uede ser tam%iDn una ima(en@ +a sea en formato <I* o
bPE<. Esta ima(en se re&ite &or toda a &(ina@ de una manera ano(a a ta&i7 de
?indoAs. La estructura de a eti.ueta esG
<BODY BA'MD)O6(D>?i,agen0gi2?>
o %ienG
<BODY BA'MD)O6(D>?i,agen01pg?>
=o todos os na$e(adores so&ortan este formato
21
Ha+ .ue &re$er a &osi%iidad de .ue .uien acceda a nuestra &(ina 4a+a
des4a%iitado a car(a automtica de im(enes@ en cu+o caso tam&oco car(ar1a a
ima(en .ue sir$e como fondo + so $er1a e fondo estndar de coor (ris. Esto &odr1a
ser mu+ &er>udicia si 4emos esco(ido unos coores &ara e te!to + os enaces .ue no
contrastan %ien con ese fondo(ris. La soucin a este &ro%ema es &oner dentro de a
eti.ueta 96FDL; os dos comandos 68#P<:FE=D + 6<#FLF: 0en este orden2@
teniendo cuidado en esco(er un coor uniforme de fondo &arecido a de a ima(en.
Prctica 6.
,amos a &oner como fondo a ima(en nu%es.>&(@ >unto con un fondo aternati$o
de coor a7u caro + 4acer .ue e te!to sea de coor ro>o oscuro. Para eo es necesario
antes ca&turar a ima(en + (uardara en e mismo directorio en donde $amos a (uardar
e fic4ero .ue $amos a crear.
#ar(amos en e editor de te!tos mi&a(3.4tm + sustituimos a eti.ueta 96FDL; &or
esta otraG
96FDL 68#P<:FE=DSMnu%es.>&(M 6<#FLF:SMT##****M
TEHTSMT88''''M;
<uardamos este fic4ero como mi&a(7.4tm + o car(amos en e na$e(ador &ara
$isuai7aro. Este es e resutado G
%. Ta&las
Hasta .ue no se em&e7aron a usar as ta%as@ a 3nica manera de ta%uar as cosas
era utii7ar a eti.ueta de &reformateado@ con a .ue es necesario &oner manuamente os
es&acios en %anco &ara .ue .uede todo aineado formando fias + coumnas@ con un
resutado mu+ &oco estDtico.
Estructura de una tabla
,amos a $er ordenadamente 0de fuera 4acia dentro2 as eti.uetas necesarias &ara
confeccionar as ta%as.
22
1. La eti.ueta (enera@ .ue en(o%a a todas as dems es 9T86LE; + 9IT86LE;. Es
decirG
<TABLE>
[+eto de la etiqueta"
</TABLE>
Para .ue os datos $a+an dentro de ca>as formadas &or un %orde tenemos .ue aBadir e
atri%uto 6F:DE: a a eti.ueta@ es decirG
<TABLE BO)DE)>
[+eto de la etiqueta"
</TABLE>
2. En e si(uiente ni$e@ dentro de a anterior@ estn as eti.uetas &ara formar cada fia
0roA2 de a ta%a@ .ue son 9T:; + 9IT:;. Ha+ .ue re&etiras tantas $eces como fias
.ueremos .ue ten(a a ta%a. Es decir@ &ara una ta%a con dos fias@ ser1aG
<T)>
[etiqueta de la ditinta /elda de la p+i,e+a 2ila"
</T)>
<T)>
[etiqueta de la ditinta /elda de la egunda 2ila"
</T)>
3. En e 3timo ni$e 0dentro de as anteriores2 estn as eti.uetas de cada ceda@ .ue
son 9TD; + 9ITD;@ .ue en(o%an e contenido de cada ceda concreta 0te!to@
im(enes@ etc.2. Ha+ .ue re&etira tantas $eces como cedas .ueremos .ue 4a+a en esa
fia.
,eamos un e>em&o de una ta%a con dos fias. #ada fia $a a tener tres cedas.
Dentro de cada ceda $amos a &oner un te!to indicati$o de a &osicin de dic4a cedaG
9T86LE 6F:DE:;
9T:;
9TD;fia1Oceda19ITD; 9TD;fia1Oceda29ITD; 9TD;fia1Oceda39ITD;
9IT:;
9T:;
9TD;fia2Oceda19ITD; 9TD;fia2Oceda29ITD; 9TD;fia2Oceda39ITD;
9IT:;
9IT86LE;
Que resutaG
23
Titular de la tabla
/e &uede aBadir un tituar 0ca&tion2 a a ta%a@ es decir un te!to situado encima
de a ta%a .ue indica cu es su contenido. /e consi(ue con a eti.ueta 9#8PTIF=; +
9I#8PTIF=;.
ariando el espesor de los bordes
E atri%uto 6F:DE: 0$isto ms arri%a2 &one &or defecto un %orde de es&esor
i(ua a a unidad. Pero se &uede 4acer .ue este %orde sea tan (rueso como .ueramos@
&oniendoG
<TABLE BO)DE)>nO,e+o deeado>
/i en e e>em&o anterior &onemosG
9T86LE 6F:DE:S5;
Celdas de cabecera
8dems de as cedas .ue contienen datos normaes@ &odemos &oner@ si nos
con$iene@ cedas de ca%ecera 04eader2@ .ue se distin(uen &or estar e te!to de dic4as
cedas en ne(rita + centrado. Esto se consi(ue con a eti.ueta 9TH; + 9ITH; 0en $e7 de
a norma 9TD; + 9ITD;2
,amos a aBadir@ en e e>em&o anterior@ una fia de estas cedas de ca%ecera@
antes de as otras dos .ue +a e!ist1anG
9T:;
9TH;#oumna 19ITH; 9TH;#oumna 29ITH; 9TH;#oumna 39ITH;
9IT:;
24
Que resutaG

Contenido de las celdas
Hasta a4ora@ en todos os e>em&os se 4a &uesto un te!to norma dentro de as
distintas cedas. Pero se &uede &oner en eas cua.uier otro eemento de os .ue $an en
un documento HTML@ como im(enes@ enaces@ etc. =o 4a+ ms .ue &oner dentro de a
eti.ueta de a ceda a eti.ueta corres&ondiente a una ima(en@ un enace@ etc.
E>em&o con una ima(enG
<TABLE BO)DE)>9>
<T)><TD><IMD :)'>?$a$e0gi2?></TD></T)>
</TABLE>
E>em&o con un enaceG
<TABLE BO)DE)>9>
<T)><TD><A H)E=>?indeA03t,l?>*gina p+in/ipal </A></TD></T)>
</TABLE>
Posicionamiento del contenido dentro de la celda
=ormamente@ e contenido de una ceda est aineado a a i7.uierda. Pero se
&uede cam%iar esto aBadiendo dentro de a eti.ueta de a ceda os si(uientes atri%utosG
<TD ALID(>'E(TE)> Al /ent+o </TD>
<TD ALID(>)IDHT> A la de+e/3a </TD>
<TH ALID(>LE=T> 'a$e/e+a a la i!quie+da </TH> 4)e/uP+dee que
po+ de2e/to etn /ent+ada5
E aineamiento &or defecto en e sentido $ertica es en e medio. Tam%iDn se
&uede cam%iar@aBadiendo dentro de a eti.ueta de a ceda os si(uientes atri%utosG
25
<TD NALID(>TO*> A++i$a </TD>
<TD NALID(>BOTTOM> A$a1o </TD>
ariando las dimensiones de la tabla
E na$e(ador se encar(a normamente de dimensionar e tamaBo tota de a ta%a
de acuerdo con e n3mero de fias@ de coumnas@ &or e contenido de as cedas@ es&esor
de os %ordes@ etc.
8 $eces nos &uede con$enir for7are &ara .ue a ta%a ten(a unas dimensiones
totaes ma+ores .ue as .ue e corres&onden@ tanto en anc4ura como en on(itud. Esto se
consi(ue aBadiendo dentro de a eti.ueta de a ta%a os atri%utos ?IDTH + HEI<HT
i(ua a un &orcenta>e de a dimensin de a &antaa@ o a una cifra .ue e.ui$ae a
n3mero de &i!es.
Por e>em&o &onemosG
<TABLE #IDTH>QER>
F &onemosG
<TABLE HEIDHT>9EE>
Celdas !ue abarcan a otras varias
8 $eces &uede interesarnos .ue una ceda se e!tienda so%re otras $arias. Esto se
consi(ue aBadiDndo dentro de a eti.ueta de a ceda os atri%utos #FL/P8=Sn3mero
&ara e!tenderse so%re un n3mero determinado de coumnas@ o :F?/P8=Sn3mero &ara
e!tenderse $erticamente so%re un n3mero determinado de fias.
Por e>em&o@ en a ta%a $amos a aBadir una fia con una soa ceda@ .ue a%arca a
dos coumnasG
<T)> <TD 'OL:*A(>9> 'elda o$+e 9 /olu,na </TD> <T)>
2"
Color de fondo en las tablas
Podemos conse(uir .ue as ta%as ten(an un coor de fondo@ si(uiendo un
&rocedimiento totamente ano(o a em&eado &ara .ue una &(ina ten(a un coor de
fondo uniforme 0se(3n $imos en e ca&1tuo "2. Para eo de%emos utii7ar e atri%uto
6<#FLF:SMTHHLLaaM@ $isto en dic4o ca&1tuo.
/e &uede conse(uirG
1.Que a totaidad de a ta%a ten(a un coor de fondo. Para eo@ coocamos e atri%uto
dentro de a eti.ueta T86LE. Por e>em&o@ $amos a 4acer .ue a ta%a ten(a un fondo
$erde
0T''**''2G
<TABLE BO)DE) BD'OLO)>?@EE==EE?>
<T)> <TD>2ila&%/elda&</TD> <TD>2ila&%/elda9</TD> </T)>
<T)> <TD>2ila9%/elda&</TD> <TD>2ila9%/elda9</TD> </T)>
</TABLE>
2.Que samente una ceda determinada ten(a un coor de fondo. Para eo@ coocamos
e atri%uto dentro de a eti.ueta de a ceda corres&ondiente. Por e>em&o@ $amos a
4acer .ue so a ceda 1 de a fia 1 ten(a un coor $erdeG
9TABLE BO)DE)>
<T)><TD BD'OLO)>?@EE==EE?>2ila&%/elda&</TD><TD>2ila&%
/elda9</TD></T)>
<T)> <TD>2ila9%/elda&</TD> <TD>2ila9%/elda9</TD> </T)>
</TABLE>
3.Que a (eneraidad de as cedas ten(a un coor@ &ero .ue a(una ceda ten(a uno
&articuar. E atri%uto de coor (enera se cooca en a eti.ueta T86LE@ + e de coor
&articuar en a eti.ueta de a ceda en cuestin 0una com%inacin de os dos casos
anteriores2. &or e>em&o@ $amos a 4acer .ue a (eneraidad de a ta%a sea de coor
ro>o
0T**''''2@ &ero .ue a ceda 1 de a fia 1 sea de coor $erde 0T''**''2G
<TABLE BO)DE) BD'OLO)>?@==EEEE?>
<T)><TD BD'OLO)>?@EE==EE?>2ila&%/elda&</TD><TD>2ila&%
/elda9</TD></T)>
<T)> <TD>2ila9%/elda&</TD> <TD>2ila9%/elda9</TD> </T)>
</TABLE>
"mgenes de fondo en las tablas
E E!&orer de Microsoft so&orta a coocacin de im(enes de fondo en e
interior de as ta%as@ de una manera ano(a a como se 4ace en una &(ina 0se(3n
$imos en e ca&1tuo "2.
Para eo de%emos utii7ar e atri%uto68#P<:FE=DSMima(en.(ifM o
68#P<:FE=DSMima(en.>&(M@ $isto en dic4o ca&1tuo.
27
/i se utii7a dentro de a eti.ueta 9T86LE; a ima(en en cuestin se
muti&icar detrs de todas as cedas.
#eparaci$n entre las celdas de una tabla
Por defecto@ a se&aracin entre as distintas cedas de una ta%a es de dos &i!es.
Pero se &uede $ariar esto con e atri%uto #ELL/P8#I=<@ .ue se &one dentro de a
eti.ueta T86LE.
Por e>em&o@ &ara o%tener una se&aracin de 2' &i!es entre cedas &onemosG
<TABLE BO)DE) 'ELL:*A'I(D>9E>
#eparaci$n entre el borde % el contenido dentro de las celdas
Por defecto@ a se&aracin entre e %orde + e contenido dentro de as cedas es de
un &i!e. /e &uede cam%iar esto con e atri%uto #ELLP8DDI=<@ .ue se &one dentro de
a eti.ueta T86LE.
Por e>em&o@ &ara o%tener una se&aracin de 2' &i!es entre e contenido + os
%ordes@ dentro de cada cedaG
<TABLE BO)DE) 'ELL*ADDI(D>9E>

Prctica &.
,amos a crear una ta%a de dos fias@ con una ceda cada una. La &rimera@ como
ca%ecera@ con e te!to MEn u(ar idea &ara mis $acacionesM@ + a se(unda con a ima(en
isa.(if. 8dems $amos a aar(ar a o anc4o a ta%a a 75c de a &antaa.
Para eoG
<*> <TABLE BO)DE)>S #IDTH>TSR>
<T)> <TH> 6n luga+ ideal pa+a ,i va/a/ione </TH> </T)>
<T)> <TD ALID(>'E(TE)> <IMD :)'>?ila0gi2? ALT>?ila?> </TD>
</T)>
</TABLE>
E resutado esG
2-
'. $ormularios
La manera (enera &ara .ue os ectores de nuestra &(ina se &uedan comunicar
con nosotros es &or medio de un enace a nuestra direccin de emai@ con o .ue
reci%ir1amos un emai con$enciona.
Pero &uede ser .ue o .ue necesitemos sea samente una res&uesta concreta a
unas o&ciones .ue &resentaremos nosotros mismos@ o un comentario de usuario@ &ara o
.ue e suministraremos un es&acio en donde introduciro.
/e &uede 4acer todo esto@ adems de otras cosas@ utii7ando os formuarios@ con
os .ue se &ueden confeccionar &(inas .ue conten(an os eementos necesarios &ara
eo@ ta como %otones de radio@ istas de seeccin@ ca>etines de introduccin de te!to +
de contro@ etc.@ como $amos a $er.
Los formuarios &ermiten .ue os dems nos en$1en a informacin directamente
a nosotros o %ien a nuestro ser$idor@ en donde 4emos instaado un &ro(rama .ue &rocese
esta informacin.
Por e>em&o@ $amos a su&oner .ue .ueremos crear una ista de correo. Los
usuarios &ueden introducir sus nom%res + direcciones de emai + &usar un %otn de
en$1o. Esos datos os &odemos reci%ir Men %rutoM en nuestro correo@ con os .ue
confeccionar1amos manuamente dic4a ista de correo@ sin necesitar nin(3n &ro(rama
&ara eo. Este &roceso es e .ue $amos a comentar en este ca&1tuo.
La otra &osi%iidad@ de a .ue 3nicamente se $a a 4acer esta mencin@ es .ue
4u%iDramos instaado en nuestro ser$idor un &ro(rama es&ecia &ara &rocesar esos datos
+ aBadiros a a ista de correo@ + .ue incuso &udiera de$o$er automticamente a
usuario a(3n ti&o de informacin. Para conse(uir esto@ os formuarios necesitan
e>ecutar &ro(ramas o scri&ts &or medio de #<I 0#ommon <ateAa+ Interface2. E #<I
&ermite a os formuarios ser &rocesados &or &ro(ramas escritos en cua.uier en(ua>e@
aun.ue os ms usados en Internet son e Per + e #.
=FT8G
2)
E ti&o de formuario .ue se descri%e a continuacin &odr ser utii7ado &or a
ma+or1a de os na$e(adores@ con a nota%e e!ce&cin de E!&orer 0incuso a $ersin
3.'2@ &or o .ue es con$eniente suministrar a fina de formuario@ como una aternati$a
&ara estos casos@ un enace de emai ordinario 0$er e #a&1tuo 32
Estructura de un formulario
La estructura (enera de un formuario esG
1. Eti.ueta de inicioG
<=O)M A'TIO(>?,ailto;di+e//i8nFdeFe,ail? METHOD>?*O:T?
E('TY*E>?TEKT/*LAI(?>
2. #uer&o de formuario@ con os distintos eementos &ara &oder introducir os datos.
3. 6otones de en$1o + de %orrado.
4. Eti.ueta de cierre 9I*F:M;
Eti.ueta de inicio
E atri%uto 8#TIF= indica a accin .ue se de%e efectuar + .ue es .ue os datos
sean en$iados &or emai a a direccin indicada. 0/i 4iciDramos uso de #<I@ ser1a
&recisamente a.u1 donde indicar1amos su ocai7acin en e ser$idor@ .ue 4a%ituamente
es e directorio c(iO%in@ &ara .ue &rocese os datos2.
E atri%uto METHFDSPF/T indica .ue os datos sean inmediatamente en$iados
&or correo a a direccin de emai@ nada ms &usar e usuario e %otn de en$1o.
#on e atri%uto E=#TLPESMTEHTIPL8I=M se consi(ue .ue as res&uestas as
reci%amos como un fic4ero de te!to@ &erfectamente e(i%e + sin codificar.
Eementos &ara introducir os datos
Los $amos a di$idir en tres casesG
a2 Introduccin &or medio de te!to
%2 Introduccin &or medio de men3s
c2 Introduccin &or medio de %otones
La introduccin de os datos se consi(ue &or medio de a eti.uetaG
<I(*6T TY*E>?AAA? (AME>?...? NAL6E>?!!!?>
En dondeG
!!! es a &aa%ra .ue indica e ti&o de introduccin.
+++ es e nom%re .ue e asi(namos nosotros a a $aria%e de introduccin de dato.
777 es a &aa%ra asociada a un eemento.
a) Introduccin por medio de texto (una lnea)
3'
En este caso es !!!Ste!t@ es decir@ I=PET TLPESMte!tM. E atri%uto ,8LEE no
&rocede en este caso.
,amos a &oner un e>em&oG soicitamos e a&eido de usuario.
<=O)M A'TIO(>?,ailto;di+e//i8nFdeFe,ail? METHOD>?*O:T?
E('TY*E>?TEKT/*LAI(?>
E/+i$e tu apellido;
<B)><I(*6T TY*E>?teAt? (AME>?Apellido?>
</=O)M>
Que resutaG

/i e usuario introduce su
a&eido@ &. e>. :ui7@ + &usa e %otn de
en$1o 0.ue $eremos ms adeante2@
reci%iremos un emai su+o con e
si(uiente te!toG
8&eidoS:ui7
La on(itud de este formuario es &or defecto de 2' caracteres. /e &uede $ariar
incu+endo en a eti.ueta e atri%uto /IaESMn3meroM. Por otra &arte@ sea cua sea a
on(itud de formuario@ si no se indica nada@ e usuario &uede introducir e n3mero de
caracteres .ue .uiera. /e &uede imitar esto@ incu+endo en a eti.ueta e atri%uto
M8HLE=<THSMn3meroM.
Tam%iDn se &uede 4acer .ue e te!to introducido no sea reconoci%e@ es decir .ue
todos os caracteres se re&resenten &or asteriscos. 6asta con cam%iar en a eti.ueta
I=PET TLPESMte!tM &or I=PET TLPESM&assAordM. En e 3timo e>em&o@ &odemos
cam%iar a eti.uea corres&ondiente &orG
<I(*6T TY*E>?paCo+d? (AME>?Apellido? :ILE>?&E? MAKLE(DTH>?&9?>
a-1) Introduccin por medio de texto (mltiples lneas)
#uando e te!to a introducir &uede acan7ar una (ran on(itud@ &or e>em&o un
comentario@ es con$eniente utii7ar un formuario de te!to de m3ti&es 1neas.
Esto se consi(ue con a eti.ueta de inicioG
<TEKTA)EA (AME>?...? )O#:>?nO,e+o? 'OL:>?nO,e+o?>
0en donde no se utii7a I=PET TLPE + donde :F?/ re&resenta e n3mero de fias@ +
#FL/ e de coumnas2.
+ a de cierreG </TEKTA)EA>
E>em&oG un formuario soicitando os comentarios de usuarioG
31
<=O)M
A'TIO(>?,ailto;di+e//i8nFdeFe,ail?
METHOD>?*O:T? E('TY*E>?TEKT/*LAI(?>
Int+odu/e tu /o,enta+io;
<B)><TEKTA)EA (AME>?'o,enta+io?
)O#:>?Q? 'OL:>?JE?>
</TEKTA)EA>
</=O)M>
b) Introduccin por medio de mens
/i .ueremos .ue e usuario@ en $e7 de introducir un te!to@ como 4emos $isto en
os casos anteriores@ esco>a entre $arias o&ciones .ue e &resentamos nosotros@ 4aremos
uso de un formuario en forma de men3.
/e consi(ue con a eti.ueta de inicio 9/ELE#T =8MESM+++M; + a de cierre
9I/ELE#T;. Las distintas o&ciones a esco(er se consi(uen con a eti.ueta 9FPTIF=;.
E>em&oG Pedimos a usuario .ue ei>a su coor &referidoG
9*F:M 8#TIF=SMmaitoGdireccinddedemaiM METHFDSMPF/TM
E=#TLPESMTEHTIPL8I=M;
X#u es tu coor &referidoV
96:;9/ELE#T =8MESM#oorPreferidoM;
9FPTIF=;:o>o
9FPTIF=;,erde
9FPTIF=;87u
9FPTIF=;8mario
9I/ELE#T ;
9I*F:M;


En e e>em&o anterior@ so es $isi%e en e formuario una o&cin. /i .ueremos
.ue sean $isi%es m3ti&es o&ciones a a $e7@ aBadimos en a eti.ueta os atri%utos
M^LTIPLE /IaESMn3meroM@ donde es&ecificamos e n3mero de o&ciones $isi%es.
/i cam%iamos en e e>em&o anterior a eti.ueta corres&ondiente &orG
<:ELE'T (AME>?'olo+*+e2e+ido? M6LTI*LE :ILE>?9?>
F%tenemosG
32

b-1) Formulario de confirmacin (checbox)
/i .ueremos .ue e usuario confirme una o&cin determinada@ &odemos 4acer
uso de un formuario de confirmacin@ o c4ec5%o!@ .ue se consi(ue con a eti.uetaG
<I(*6T TY*E>?/3e/<$oA? (AME>?...?>
E>em&oG /oicitamos a usuario .ue confirme su incusin en una ista de correoG
<=O)M A'TIO(>?,ailto;di+e//i8nFdeFe,ail? METHOD>?*O:T?
E('TY*E>?TEKT/*LAI(?>
<I(*6T TY*E>?/3e/<$oA?
(AME>?Lita?>
:- deeo e+ in/luido en la lita
de /o++eo0
</=O)M>
/i .ueremos .ue e formuario a&are7ca iniciamente como marcado 0e usuario
no necesitar 4acero2@ %asta con aBadir e atri%uto #HE#PED dentro de a eti.ueta. En
e e>em&o anterior sustituimos a eti.ueta e.ui$aente &orG
<I(*6T TY*E>?/3e/<$oA? (AME>?Lita? 'HE'MED>
b-!) "otones de radio
#uando .ueremos .ue e usuario ei>a una 3nica o&cin entre $arias@ &odemos
4ace uso de os %otones de radio@ .ue se consi(uen con a eti.uetaG
<I(*6T TY*E>?+adio? (AME>?...? NAL6E>?!!!?>
Donde +++ es e nom%re .ue e &onemos a a $aria%e .ue se trata de ee(ir@ +
777 es e nom%re de cada una de as o&ciones en concreto.
33
E>em&oG soicitamos a usuario .ue defina cu es su sistema o&erati$o &referidoG
<=O)M A'TIO(>?,ailto;di+e//i8nFdeFe,ail? METHOD>?*O:T?
E('TY*E>?TEKT/*LAI(?>
U'ul e tu ite,a ope+ativo p+e2e+idoV
<B)>
<I(*6T TY*E>?+adio? (AME>?:ite,aOpe+ativo? NAL6E>?#indoC?
'HE'MED> #indoC
<I(*6T TY*E>?+adio? (AME>?:ite,aOpe+ativo? NAL6E>?Ma/?> Ma/O
<I(*6T TY*E>?+adio? (AME>?:ite,aOpe+ativo? NAL6E>?6niA?> 6niA
</=O)M>
Que resutaG
F%sDr$ese e atri%uto o&ciona #HE#PED .ue se 4a aBadido en a &rimera
eti.ueta. Esa ser a o&cin .ue a&arece marcada &or defecto. F%sDr$ese tam%iDn .ue no
es &osi%e esco(er ms de una o&cin.
c) "otones de en#o $ de borrado
Hasta a4ora@ en todos os e>em&os .ue 4emos $isto@ fata%a un eemento
esencia en cua.uier formuario@ + es e %otn de en$1o de os datos@ .ue se consi(ue
con a eti.uetaG
<I(*6T TY*E>?u$,it? NAL6E>?!!!?>
En donde 777 es e te!to .ue .ueremos .ue a&are7ca en e %otn.
,amos a aBadiro a &rimer e>em&o@ en e .ue se soicita%a e a&eido de
usuarioG
<=O)M A'TIO(>?,ailto;di+e//i8nFdeFe,ail? METHOD>?*O:T?
E('TY*E>?TEKT/*LAI(?>
34
E/+i$e tu apellido;
<B)><I(*6T TY*E>?teAt?
(AME>?Apellido?>
<*><I(*6T TY*E>?u$,it?
NAL6E>?Envia+ dato?>
</=O)M>
Ftro %otn interesante es e de
%orrado de os datos introducidos@ mu+ con$eniente en un formuario con muc4os
eementos. Es mu+ simiar a de en$1o@ &ues se consi(ue con a eti.uetaG
<I(*6T TY*E>?+eet? NAL6E>?!!!?>
En donde 777 es e te!to .ue .ueremos .ue a&are7ca en e %otn.
/i aBadimos a e>em&o anterior a eti.uetaG
<*><I(*6T TY*E>?+eet? NAL6E>?Bo++a+ dato?>
resutaG
Prctica '.
,amos a aBadir un Mi%ro de $isitasM. Para eo@ aBadimos o si(uiente@ entre as
eti.uetas 9H:; + 9I6FDL; situadas a fina@ o si(uienteG
<*><'E(TE)>
<H9>Li$+o de viita</H9>
<*><=O)M A'TIO(>?,ailto;2a+o/enaWlande+0e? METHOD>?*O:T?
E('TY*E>?TEKT/*LAI(?>
Tu no,$+e;
<B)><I(*6T TY*E>?teAt? (AME>?(o,$+e?>
<*>E/+i$e tu /o,enta+io;
<B)><TEKTA)EA (AME>?'o,enta+io? )O#:>?Q? 'OL:>?JE?>
</TEKTA)EA>
35
<*><I(*6T TY*E>?u$,it? NAL6E>?Envia+ dato?>
<I(*6T TY*E>?+eet? NAL6E>?Bo++a+ dato?>
</=O)M>
<*>
<H)>
E resutado esG
(. $rames
*rames 0en in(Ds@ marcos o cuadros2 es un &rocedimiento de en(ua>e HTML
&ara di$idir a &antaa en diferentes 7onas@ o $entanas@ .ue &ueden actuar
inde&endientemente unas de otras@ como si se trataran de &(inas diferentes@ &ues
incuso cada una de eas &ueden tener sus &ro&ias %arras desi7adoras.
Ena de sus caracter1sticas ms im&ortantes es .ue &usando un enace situado en
un frame@ se &uede car(ar en otro frame una &(ina determinada. Esto se utii7a
frecuentemente &ara tener un frame estrec4o en a &arte atera 0o su&erior2 con un
1ndice de contenido en forma de diferentes enaces@ .ue@ a ser &usados car(an en a
$entana &rinci&a as distintas &(inas.
De esta manera se faciita a na$e(acin entre as &(inas@ &ues aun.ue se $a+a
&asando de unas a otras@ siem&re estar a a $ista e 1ndice de con>unto.
Para com&render os distintos conce&tos $amos a desarroar un e>em&o@
creando una &(ina con dos frames. E de a i7.uierda $a a ser$ir de 1ndice de o .ue
$eamos en e de a derec4a@ + en Dste $eremos iniciamente una &(ina de &resentacin.
/e &odr acceder tam%iDn a.u1 a a &(ina &ersona creada en os ca&1tuos anteriores @ si
se &usa un enace en e frame de a i7.uierda.
(ocumento de definici$n de los frames
3"
Lo &rimero .ue tenemos .ue 4acer es crear un documento HTML en e .ue
definiremos cuntas 7onas $a a 4a%er@ .uD distri%ucin + tamaBo $an a tener@ + cu $a
ser e contenido de cada una de eas.
En e e>em&o .ue $amos a desarroar@ a &(ina $a a tener dos frames
distri%uidos en coumnas 0es decir@ uno a ado de otro@ en $e7 de uno encima de otro@
o .ue ser1a una distri%ucin en fias2.
#on res&ecto a tamaBo@ 4aremos .ue e &rimero 0e de i7.uierda2 ocu&e e 2'c
de anc4o de a &antaa@ + e otro@ e -'c restante.
L con res&ecto a contenido@ e frame de a i7.uierda $a a contener un
documento HTML .ue $a a ser$ir de 1ndice de o .ue $eamos en e otro 0+ .ue $amos a
amar mi&a(ind.4tm2@ + e de a derec4a otro documento HTML .ue $a a ser$ir de
&(ina de &resentacin 0a .ue amaremos mi&a(&re.4tm2.
Todo o anterior se refe>a en e si(uiente documento HTMLG
<HTML>
<HEAD>
<TITLE>Mi pagina /on 2+a,e</TITLE>
</HEAD>
<=)AME:ET 'OL:>?9ER- XER?>
<=)AME :)'>?,ipagind03t,l?>
<=)AME :)'>?,ipagp+e03t,l? (AME>?p+in/ipal?>
</=)AME:ET>
</HTML>
La se 4a definido e n3mero de frames@ su distri%ucin + su tamaBo@ &ero fata
&or definir e contenido de cada frame. Esto se 4ace con as eti.uetasG
<=)AME :)'>?,ipagind03t,l?>
<=)AME :)'>?,ipagp+e03t,l? (AME>?p+in/ipal?>
#on esto se define .ue e contenido de &rimer frame 0e de a i7.uierda2 sea e
documento HTML mi&a(ind.4tm + e de se(undo 0e de a derec4a2 sea e documento
HTML mi&a(&re.4tm.
F%sDr$ese .ue en a eti.ueta de se(undo se 4a incuido e atri%uto
=8MESM&rinci&aM@ &ero no as1 en e &rimero. E moti$o es .ue se necesita dar un
nom%re a se(undo frame@ &ues@ como $eremos a continuacin@ en e documento de
&rimer frame $a a 4a%er unos enaces .ue $an a ir diri(idos 4acia D. En este caso so
tenemos dos frames@ &ero &odr1a 4a%er ms@ + es necesario distin(uiros unos de otros.
L e &rimero no necesita nom%re@ &ues no $a a 4a%er enaces en e se(undo diri(idos
4acia D.
(ocumentos )T*+ de cada frame
37
=ecesitamos a4ora confeccionar e documento HTML de cada uno de os
frames. :ecuDrdese .ue son como &(inas inde&endientes@ .ue &ueden tener cada una su
&ro&io fondo@ etc.@ + todo o .ue .ueramos aBadir en eos + .ue 4emos a&rendido 4asta
a4ora.
%ocumento del frame de la i&'uierda
,a a tener un fondo amario@ + $a a contener dos enaces diri(idos a frame de a
derec4a. 8dems@ como muestra de .ue se &uede aBadir cua.uier cosa en un frame.

<HTML>
<HEAD>
<TITLE> Indi/e </TITLE>
</HEAD>
<BODY BD'OLO)>?@==BBEE?>
<*><A H)E=>?,ipagp+e03t,l? TA)DET>?p+in/ipal?> *+eenta/i8n </A>
<*><A H)E=>?,ipag&B03t,l? TA)DET>?p+in/ipal?> Mi pgina </A>
<*><IMD :)'>?i,agen&0gi2?>
</BODY>
</HTML>
Dentro de as eti.uetas de os enaces &odemos o%ser$ar a(o nue$o@ + es e
atri%uto T8:<ET 0en in(DsG o%>eti$o@ %anco2@ .ue sir$e &ara 4acer .ue a ser acti$ado
e enace no se car(ue en e &ro&io frame@ sino en otro@ &recisamente en e .ue 4a+amos
amado con ese nom%re en e documento de definicin de os frames.
En nuestro caso@ e 4emos dado e nom%re de M&rinci&aM a frame de a derec4a@
+ es &or tanto a41 donde se $an a car(ar os documentos HTML.
<uardamos este documento con e nom%re de mi&a(ind.4tm. 8dems@
ca&turamos a ima(en + a (uardamos >unto con e documento.
%ocumento del frame de la derecha
,a a tener un fondo ne(ro@ + $a a contener samente un te!to.
<HTML>
<HEAD>
<TITLE> *+eenta/ion </TITLE>
</HEAD>
<BODY BD'OLO)>?@EEEEEE? TEKT>?@EEEE==?>
<'E(TE)>
<=O(T :ILE>YB><:T)O(D>
<*>E:TA E: LA NE):IO(
<B)><=O(T 'OLO)>?@==EEEE?>'O( =)AME:</=O(T>
<B)>DE MI *ADI(A
</:T)O(D>
</=O(T>
</'E(TE)>
</BODY>
</HTML>
3-
<uardamos este documento con e nom%re de mi&a(&re.4tm
/i o car(amos@ este es e resutado con frames 0&ara os na$e(adores .ue os so&ortan2.
/e &uede com&ro%ar cmo cam%iamos de &(ina en e frame de a derec4a@ se(3n e
enace .ue &usemos en e frame de a i7.uierda.
,tributos de la eti!ueta -F.,*E#ET/
La eti.ueta *:8ME/ET@ como 4emos $isto en e e>em&o@ es a .ue define a
distri%ucin@ e n3mero + tamaBo de os frames. Tiene dos atri%utosG #FL/ 0coumnas2
+ :F?/ 0fias2G
<=)AME:ET 'OL:>?AA- ..- !!- 00?>
<=)AME:ET )O#:>?AA- ..- !!- 00?>
Define a distri%ucin de os frames en coumnas o en fias@ se(3n se use uno u
otro atri%uto.
Define e n3mero de frames .ue 4a%r@ &ues@ &or e>em&oG
<=)AME:ET 'OL:>?AA- ..?> 43a$+ do 2+a,e en /olu,na5
<=)AME:ET 'OL:>?AA- ..- !!?> 43a$+ t+e 2+a,e en /olu,na5
Define e tamaBo de os frames@ se(3n e $aor .ue demos a !!@ ++@ 77.... Este
$aor se &uede e!&resar enG
En &orcenta>e de anc4o de &antaa 0&ara as coumnas2@ o de ato de a
&antaa 0&ara as fias2. 8s1@ &or e>em&oG

<=)AME:ET 'OL:>?R9E- RXE?> 4la /olu,na de la i!quie+da o/upa+
el 9ER del an/3o de la pantalla- . la de la de+e/3a el
XER +etante5
3)
<=)AME:ET )O#:>?R&E- RTE- R9E?> 4la 2ila upe+io+ o/upa+ el &ER
del alto de la pantalla- la del ,edio el TER- . la in2e+io+ el
9ER5
En n3mero a%souto .ue re&resenta e n3mero de &i!es .ue ocu&ar cada frame
a o anc4o o a o ato 0se(3n sean fias o coumnas2. 8s1@ &or e>em&oG
<=)AME:ET 'OL:>?JE- QEE?> 4la /olu,na de la i!quie+da
tend+ JE piAel de an/3o . la de la de+e/3a QEE50
Es &ei(roso utii7ar so $aores a%soutos@ &ues e tamaBo de a &antaa $ar1a
de un usuario a otro. /i se $a a usar a(3n $aor a%souto &ara un frame@ es me>or
me7caro con a(uno reati$o@ como os .ue $amos a $er a continuacin@ &ara .ue se
a>uste e tota a a &antaa de usuario.
En $aor reati$o .ue se consi(ue &oniendo un asterisco 0e2@ en $e7 de un
n3mero. Esto se inter&reta como .ue ese frame de%e tener e es&acio restante.
Por e>em&oG
<=)AME:ET )O#:>?&EE-Z-&EE?> 4Ha$+ t+e 2ila- la upe+io+ .
la in2e+io+ de una altu+a 2i1a de &EE piAel- . la del ,edio
o$tend+ el epa/io +etante50
/i 4a+ ms de un frame con asterisco@ ese es&acio restante se di$idir &or i(ua
entre eos.
/i 4a+ un n3mero antes de asterisco@ ese frame o%tiene esa cantidad ms de
es&acio reati$o. 8s1 M2e@eM dar1a dos tercios &ara e &rimer frame + un tercio &ara e
otro.
Frames sin bordes
/i se desea .ue no 4a+a un %orde de se&aracin entre os frames@ se de%en incuir e
atri%uto *:8ME6F:DE:S' dentro de a eti.ueta *:8ME/ET.
Para .ue tam%iDn desa&are7can os 4uecos de se&aracin entre frames 4a+ .ue
aBadir otros dos atri%utos 0e &rimero es &ara e E!&orer + e se(undo &ara e =etsca&e2G
*:8ME/P8#I=<S' + 6F:DE:S'. con o .ue a eti.ueta com&eta .uedar1aG
9*:8ME/ET *:8ME6F:DE:S' *:8ME/P8#I=<S' 6F:DE:S' #FL/SM!!@
++M;
,tributos de la eti!ueta -F.,*E/
Esta eti.ueta define as cararacter1sticas de un frame concreto@ no de con>unto
de os frames@ como era e caso con a eti.ueta 9*:8ME/ET;. Puede tener os
si(uientes &osi%es atri%utos@ .ue $an dentro de a eti.ueta 9*:8ME;G
4'
:)'>?di+e//i8n?0 Esta direccin &uede ser a de un documento HTML 0ta
como 4emos utii7ado en e e>em&o2@ o cua.uier otro recurso de ?e% 0o E:L2. #on
este atri%uto se indica o .ue se car(ar iniciamente en e frame.
/i no se e &one este atri%uto a a eti.ueta 9*:8ME;@ entonces dic4o frame
a&arecer iniciamente $ac1o@ aun.ue tendr as dimensiones asi(nadas.
(AME>?no,$+eFdeFlaFventana?0 Este atri%uto se usa &ara asi(nar un nom%re a
un frame. E atri%uto =8ME es o&ciona. Por defecto@ todas as $entanas carecen de
nom%re. Los nom%res .ue se esco>an de%en comen7ar &or un carcter afanumDrico
0una etra o un n3mero@ &ero no otro ti&o de s1m%oo2.
MA)DI(#IDTH>?nO,e+o?0 /e utii7a este atri%uto cuando se .uiere controar a e
anc4o de os mr(enes dentro de un frame. E n3mero .ue se &on(a re&resenta os
&i!es de os mr(enes. Este atri%uto es o&ciona.
MA)DI(HEIDHT>?nO,e+o?0 I(ua .ue e anterior@ &ero referido a os mr(enes en
atura.
:')OLLI(D>?.e[no[auto?0 Este atri%uto se utii7a &ara decidir si e frame
tendr o no una %arra desi7adora. /i se esco>e M+esM tendr siem&re una %arra
desi7adora. /i se esco>e MnoM no a tendr nunca@ + si se esco>e MautoM@ ser e
na$e(ador .uien decida si a tendr o no. Este atri%uto es o&ciona. /u $aor &or defecto
es MautoM.
(O)E:ILE. 8 este atri%uto no se e asi(na un $aor numDrico@ como a os dems. Es
un indicador &ara .ue a $entana no se &ueda reOdimensionar 0en in(Ds@ resi7e2 &or
&arte de usuario. Es un atri%uto o&ciona. Por defecto@ todos os frames son reO
dimensiona%es.
=)AMEBO)DE)>?no?0 Este atri%uto eimina e %orde en un frame@ &ero si se
.uiere .ue se eimine com&etamente@ tam%iDn 4a+ .ue &onDrseo a frame conti(uo. /i
se .uiere eiminar os %ordes de todos os frames@ se de%e coocar en a eti.ueta
*:8ME/ET@ como 4emos $isto anteriormente.
El atributo T,.0ET
En e e>em&o 4emos $isto .ue@ como .uer1amos .ue os enaces situados en e
frame de a i7.uierda surtieran efecto no en D mismo@ sino en otro frame@ ten1amos .ue
&oner dentro de cada enace e atri%uto T8:<ETSM&rinci&aM@ siendo M&rinci&aM e
nom%re .ue 4a%1amos dado a se(undo frame@ en e documento de definicin de frames.
Es decir@ 4emos utii7ado este atri%uto de esta maneraG
TA)DET>?no,$+eFdadoFaFot+oF2+a,e?.
Estos nom%res@ .ue os esco(emos nosotros@ &ueden ser cua.uiera@ &ero con a
condicin .ue e &rimer carcter sea afanumDrico 0etra o n3mero2.
41
Pero 4a+ unos nom%res reser$ados 0es decir@ .ue no se &ueden usar &ara
denominar a un frame2@ .ue 4acen .ue este atri%uto efect3e unas funciones es&eciaes.
Para .ue cum&an su cometido@ es im&rescindi%e escri%ir estas &aa%ras reser$adas
0%an5@ sef + to&2 en min3scuas.
TA)DET>?F$lan<?0 Hace .ue se a%ra una nue$a co&ia de na$e(ador@ + e enace
acti$ado se car(a en ea@ a &antaa com&eta. Es decir@ tendr1amos dos co&ias de
na$e(ador 0=etsca&e@ E!&orer@ etc.2 funcionando a a $e7.
TA)DET>?Fel2?0 Hace .ue e enace se car(ue en e &ro&io frame.
TA)DET>?Ftop?0 Hace .ue e enace se car(ue a &antaa com&eta@ su&rimiendo
todos os frames@ &ero sin .ue se car(ue una nue$a co&ia de na$e(ador. Este es
&articuarmente 3ti. En error mu+ com3n es o$idarse de &oner este atri%uto en os
enaces .ue estn en un frame@ con o .ue resuta .ue a ser acti$ados@ a &(ina amada
se car(a dentro de &ro&io frame@ o cua es mu+ moesto si esa &(ina &ertenece a otro
sitio de ?e%@ + a3n ms (ra$e si esa &(ina tiene a su $e7 frames. Este incon$eniente se
e$ita &oniendo este atri%uto dentro de as eti.uetas de os enaces.
Frames anidados dentro de otros frames
Hasta a4ora 4emos contem&ado so a &osi%iidad de tener una distri%ucin de
os frames %ien en fias o %ien en coumnas@ 0de&endiendo .ue se utiice e atri%uto
:F?/ o #FL/ en a eti.ueta *:8ME/ET2@ &ero no am%os a a $e7.
/e &ueden o%tener distri%uciones ms com&e>as anidando fias dentro de una
coumna@ o a a in$ersa@ coumnas dentro de una fia.
/u&on(amos .ue .ueremos a si(uiente distri%ucinG
En frame estrec4o en 4ori7onta en a &arte su&erior@ de ado a ado de a &antaa
0atura@ e 15c2
Ftro frame estrec4o en $ertica en a &arte i7.uierda@ de%a>o de anterior 0anc4ura@ e
2'c2
En tercero ocu&ando e resto de a &antaa.
,emos .ue@ en reaidad@ esto e.ui$ae a a si(uiente distri%ucinG
Dos fias. La su&erior ocu&a e 15c + a inferior e resto.
La fia inferior est a su $e7 di$idida en dos coumnas. La &rimera 0a de a i7.uierda2
ocu&a e 2'c + a otra@ e resto.
42
E documento de definicin de as dos fias 0o$idDmonos de momento .ue a de
a%a>o est su%di$idida2@ ser1aG
<HTML>
<HEAD>
<TITLE>*agina /on do 2ila</TITLE>
</HEAD>
<=)AME:ET )O#:>?&SR- Z?>
<=)AME :)'>?do/u,entoF2ilaFupe+io+?>
<=)AME :)'>?do/u,entoF2ilaFin2e+io+?>
</=)AME:ET>
</HTML>
#omo a fia inferior@ en reaidad@ son dos coumnas 0con una distri%ucin de
2'c + resto2@ sustituimos 0anidando2 a eti.ueta 9*:8ME
/:#SMdocumentodfiadinferiorM; &orG
<=)AME:ET 'OL:>?9ER- Z?>
<=)AME :)'>?do/u,entoF/olu,naFi!qda?>
<=)AME :)'>?do/u,entoF/olu,naFd/3a?>
</=)AME:ET>
#on o .ue .ueda e documento definit$o as1G
<HTML>
<HEAD>
<TITLE>*agina /on 2ila upe+io+ . do /olu,na
in2e+io+e</TITLE>
</HEAD>
<=)AME:ET )O#:>?&SR- Z?>
<=)AME :)'>?do/u,entoF2ilaFupe+io+?>
<=)AME:ET 'OL:>?9ER- Z?>
<=)AME :)'>?do/u,entoF/olu,naFi!qda?>
<=)AME :)'>?do/u,entoF/olu,naFd/3a?>
</=)AME:ET>
</=)AME:ET>
</HTML>
La distri%ucin .uedar1a as1 G

43
1). *onidos.
Ena &(ina de ?e% &uede tener sonidos incor&orados@ %ien sea como un fondo
sonoro .ue se e>ecuta automticamente a car(ar a &(ina@ o como una o&cin &ara .ue
a acti$e e &ro&io usuario.
Fondo sonoro para el *icrosoft "nternet E1plorer
Para as $ersiones 2.' en adeante@ se utii7a a eti.uetaG
<BD:O6(D :)'>?2i/3e+oFdeFonido? LOO*>n>
E fic4ero de sonido &uede estar en formato .mid o .Aa$.
E atri%uto LFFP 0en in(Ds@ a7o2 sir$e &ara es&ecificar e n3mero 0n2 de $eces
.ue se de%e e>ecutar e fic4ero de sonido. /i se esco>e e n3mero nSO1 o se &one
LFFPSinfinite@ e sonido se e>ecutar indefinidamente. /e &uede omitir este atri%uto@ +
entonces e fic4ero se e>ecutar una soa $e7.
E>em&o 1
La eti.ueta &ara .ue se e>ecute e fic4ero &r$-).mid dos $eces en e E!&orer esG
<BD:O6(D :)'>?p+vX\0,id? LOO*>9>
Fondo sonoro para el 2etscape
La eti.ueta %sica &ara e =etsca&e esG
<EMBED :)'>?2i/3e+oFdeFonido? #IDTH>AAA HEIDHT>..>
donde ?IDTH es a anc4ura + HEI<HT a atura de una consoa .ue a&arece@ + .ue
tiene diferentes tecas 0&a+@ sto&@ &ausa@ etc.2. Ms adeante $eremos os $aores !!! e
++ .ue de%emos atri%uires.
E fic4ero de sonido &uede estar en formato .mid o .Aa$@ &ero recuDrdese a
ad$ertencia 4ec4a anteriormente@ de .ue estos formatos de%en estar confi(urados como
MIME &or e ser$idor donde estD ao>ada a &(ina.
Dentro de a eti.ueta se &ueden aBadir os si(uientes atri%utos o&cionaesG
A6TO:TA)T>?t+ue? 4a++an/a auto,ti/a,ente5
LOO*>?t+ue? 4e e1e/uta ininte++u,pida,ente5
44
,ctivaci$n del sonido por el propio usuario
Hasta a.u1 4emos $isto cmo &oner un sonido de fondo en una &(ina. Ha+ otra
o&cin@ muc4o ms sencia@ + es a de &oner un enace a un fic4ero de sonido@ de ta
manera@ .ue a &usaro se e>ecute e fic4ero. 0,er e #a&1tuo 3@ en e .ue se e!&ica
cmo crear enaces2.
Por e>em&o@ $amos a &oner un enace a fic4ero &r$-).midG
E/u/3a eta <A H)E=>?p+vX\0,id?>,ui/a</A>
8 &usar e enace se acti$a@ en una $entana a&arte@ e &ro(rama .ue e>ecuta e
sonido. Esto es $ido &ara todos os na$e(adores@ incuso as $ersiones ms anti(uas@
con a 3nica condicin de .ue se 4a+a confi(urado un &ro(rama au!iiar ca&a7 de
e>ecutar fic4eros .mid o .Aa$.
/e &uede 4acer e enace con un icono 0,er e #a&1tuo 42
45
"r+ditos,
Tomado del Manual: Webmaestro.
Derechos Reservados Francisco Arocena
1997
Esa!a.
4"