Pgina 1 de 44

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 &ginas.......................................................................................12
Estructura de os enaces.........................................................................................12
Ti&os de enaces......................................................................................................12
Enaces dentro de a misma &gina.....................................................................12
Enaces con otra &gina nuestra..........................................................................13
Enaces con una &gina fuera de nuestro sistema...............................................14
Enaces con una direccin de emai....................................................................14
Prctica 3................................................................................................................14
4. Imgenes.................................................................................................................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 imagen..........................................................................................24
Prctica "................................................................................................................24
+. Ta%as.....................................................................................................................25
Estructura de una ta%a...........................................................................................25
Tituar de a ta%a...................................................................................................2+
,ariando e es&esor de os %ordes.........................................................................2+
#edas de ca%ecera.................................................................................................2+
#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 +...............................................................................................................32
-. )ormuarios..........................................................................................................32
Estructura de un formuario.................................................................................33
Eti.ueta de inicio.............................................................................................33
Eementos &ara introducir os datos................................................................33
Pgina 2 de 44
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......................................................3+
6otones de radio...........................................................................................3+
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...............................................................4+
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'
#r>ditos....................................................................................................................51
Introduccin.
HTML significa HyperText Markup Language. Es e engua?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 documentosA e ciente 0=etsca&eA IEA MosaicA L*n!A I6roBse2 os
inter&reta * os des&iega. E!isten cientes grficos como =etsca&eA * otros como e
L*n! .ue soo des&iegan te!to. Es mu* im&ortante no o$idar esto cuando se diseCa
Pgina 3 de 44
una &gina Be%. #rear una %uena &gina tiene dos as&ectosD &or un ado e
conocimiento t>cnico &ara crear cdigo HTML correctoA &or otro ado e caro diseCo
&ara &resentar a informacin.
E o%?eti$o de este manua es &ro&orcionar un conocimiento %sico acerca de a
construccin de &ginas @e%A &ara un conocimiento ms &rofundo de este engua?e
&osteriormente se desarroarn ms $ersiones de este manuaA &or e momento
es&eramos .ue a informacin a.u1 &ro&orcionada e sea de utiidad.
1. Estructura de un Documento HTML
Ena &gina Be% es un arc4i$o de te!toA se &uede crear con cua.uier editor de
te!to como e edit de DF/. E &rinci&io esencia de engua?e HTML 0H*&erTe!t
Mar5u& Language2 es e uso de as eti.uetas 0tags2. )uncionan de a siguiente maneraG
9HHH; Este es e inicio de una eti.ueta.
9IHHH; Este es e cierre de una eti.ueta.
Pgina 4 de 44
Las etras de a eti.ueta &ueden estar en ma*3scuas o min3scuasA
indiferentemente. Por caridadA 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&oA
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%e7amientoA com&rendido entre as eti.uetas 9HE8D; * 9IHE8D;
E cuer&oA com&rendido entre as eti.uetas 96FDL; * 9I6FDL;
Dentro de enca%e7amiento 4a* informacin de documentoA .ue no se $e en a
&antaa &rinci&aA &rinci&amente e t1tuo de documentoA com&rendido entre as
eti.uetas 9TITLE; * 9ITITLE;. E t1tuo de%e ser %re$e * descri&ti$o de su contenidoA
&ues ser o .ue $ean os dems cuando aCadan nuestra &gina a su %oo5mar5 0o agenda
de direcciones2.
Dentro de cuer&o est todo o .ue .ueremos .ue a&are7ca en a &antaa
&rinci&a 0te!toA imgenesA etc.2
Por tantoA 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 &ginaA unas consideraciones so%re e te!toG
#uando escri%imos en e documento e te!to .ue .ueremos .ue a&are7ca en a
&antaaA $eremos .ue >ste se acomoda a eaA sin .ue tengamos .ue &usar e
retorno de carro. /i .ueremos se&arar e te!to en distintos &rrafos de%emos
usar a eti.ueta 9P;A 0.ue no tiene su corres&ondiente eti.ueta de cierre 9IP;2 .
E te!to &uede tener unas ca%ecerasA com&rendidas entre as eti.uetas 9H1; *
9IH1;A 9H2; * 9IH2;A etc. 04asta e n3mero "2A siendo e n3mero indicati$o de
tamaCo. E tamaCo ma*or es e corres&ondiente a n3mero 1. Puedes
Pgina 5 de 44
e!&erimentar en e e?em&o .ue sigueA cam%iando e n3mero &ara com&ro%ar e
efecto .ue se ogra.
Ena eti.ueta mu* interesante es a de centrado 9#E=TE:; * 9I#E=TE:; 0no a
so&ortan todos os na$egadoresA aun.ue s1 a ma*or1a de eos2. =os centra todo o .ue
est> dentro de eaA *a sea te!toA imgenesA etc.
Tam%i>n tenemos os se&aradores 04ori7onta rues2A .ue se consiguen 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 &antaaA * con a a&ariencia de estar em%utida so%re e
fondoA como se &uede o%ser$ar a continuacinG
Prctica 1.

En e &rocesador de te!to co&iamos o siguienteG
<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&ag1.4tm
* o cargamos en e na$egador. Este ser e resutado.
Pgina " de 44
2. Dando forma al texto
#omo 4emos $isto en e e?em&o de ca&1tuo anteriorA cuando .ueremos &oner
un te!to sin ninguna caracter1sca es&eciaA o &onemos directamente. EnicamenteA a
se&aracin entre &rrafos 0de?ando una 1nea en %anco2 a conseguimos con a eti.ueta
9P;.
/i .ueremos se&arar os &rrafosA o cua.uier otra cosaA &ero sin de?ar una 1nea
en %ancoA usamos una eti.ueta &arecida 96:; 0%rea5A 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;A sino .ue 4a* .ue com%inara con a eti.ueta 96:;. 8s1 &or e?em&oA si .ueremos
o%tener cuatro 1neas en %ancoA &ondr1amosG
<B)><*>
<B)><*>
<B)><*>
<B)><*>
8 escri%ir e te!toA si &onemos ms de un es&acio en %anco entre dos &aa%ras
o%ser$amos .ue e na$egador so reconoce uno de eos. /i .ueremos for7are a .ue o
4agaA de%emos &oner e cdigo MNn%s&DM 0nonO%rea5ing s&ace2.
Para destacar aguna &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 &reformateadoA es decir .ue a&arecer como si 4u%iera sido escrito con una
m.uina de escri%irA con una fuente de es&aciado fi?o 0ti&o #ourier2. 8dems se
res&etarn os es&acios en %anco * retornos de carroA ta como esta%an en nuestro
documento HTML 0o cua no ocurre normamenteA como 4emos $isto anteriormente2.
Es mu* a&ro&iada &ara confeccionar ta%as * otros documentos simiares.
#on a eti.ueta 9TT; * 9ITT; conseguimos tam%i>n .ue e te!to tenga un
tamaCo menor * a a&ariencia de os caracteres de una m.uina de escri%ir 0t*&eBriter2.
Pgina + de 44
La diferencia con a anterior es .ue no &reformatea e te!toA 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 genera.
En as frmuas matemticas &uede interesar &oder escri%ir 1ndices * su%1ndicesA
.ue se consiguen con as eti.uetas 9/EP; 9I/EP; * 9/E6; 9I/E6; res&ecti$amente.
8s1A &or e?em&oG
m2 se consigue de a siguiente maneraG m9/EP;29I/EP;
$! se consigue conG $9/E6;!9I/E6;
8 menudo nos interesar &resentar as cosas en forma de istas. Podemos escoger
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 .ueA &or
no tener un orden determinadoA no necesitan ir &recedidas &or un n3mero. /u estructura
es a siguienteG
<6L>
<LI> 6na /oa
<LI> Ot+a /oa
<LI> Ot+a ,
<LI> Et/0
</6L>
Es decirA toda a ista est dentro de a
eti.ueta 9EL; * 9IEL;A * uego cada cosa $a
&recedida de a eti.ueta 9LI; 0ist item2. E
resutado de o anterior es e siguienteG
/e &uede anidar una ista dentro de otra. Por e?em&oG
9EL;
9LI; Mam1feros
9LI; Peces
9EL;
9LI; /ardina
9LI; 6acaao
Pgina - de 44
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; /egunda cosa
9LI; Tercera cosa
9LI; Etc.
9IFL;
8 igua .ue as istas desordenadasA tam%i>n se &ueden anidar as istas
ordenadas.
E tercer ti&o o forman as listas de definicin. #omo su nom%re indicaA son
a&ro&iadas &ara gosarios 0o definiciones de t>rminos2. Toda a ista de%e ir engo%ada
entre as eti.uetas 9DL; * 9IDL;. L a diferencia de as dos .ue 4emos $istoA cada
rengn de a ista tiene dos &artesG
1. E nom%re de a cosa a definir A .ue se consigue con a eti.ueta 9DT;
0definition term2
2. La definicin de dic4a cosaA .ue se consigue 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
Pgina ( de 44
8 $eces es mu* 3ti escri%ir comentarios en e documento HTML so%re e
cdigo .ue escri%imosA .ue nos &ueden ser$ir &ara recordar &osteriormente so%re o .ue
4icimosA * .ue no .ueremos .ue se $ean en &antaa.
Esto se consigue 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 cargamos en e na$egador.
Este es e resutado.
Pgina 1' de 44
3. Enlaces con otras pginas
La caracter1stica .ue ms 4a infuido en e es&ectacuar >!ito de @e% 0o tea de
araCa2 4a sidoA a&arte a de su carcter mutimediaA 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 generaA os enaces tienen a siguiente estructuraG
98 H:E)SM!!!M; *** 9I8;
donde !!! es e destino de enace 0F%s>r$ese as comias2. *** es e te!to indicati$o
en a &antaa de enace 0con un coor es&ecia * generamente su%ra*ado2
Tipos de enlaces
,amos a distinguir cuatro ti&os de enacesG
a2 Enaces dentro de a misma &gina
%2 Enaces con otra &gina nuestra
c2 Enaces con una &gina fuera de nuestro sistema
d2 Enaces con una direccin de emai
Pgina 11 de 44
a2 Enaces dentro de a misma &gina
8 $ecesA en e caso de documentos 0o &ginas2 mu* e!tensosA nos &uede
interesar dar un sato desde una &osicin a otra determinada. En este casoA o .ue antes
4emos amado HHHA es decirA e destino de enaceA en este caso e sitio dentro de a
&gina a donde .ueremos satarA 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
esA entoncesG
<A H)E=>?@,a+/a?> YYY </A>
L en e sitio e!acto a donde .ueremos satarA de%emos &oner a siguiente eti.uetaG
<A (AME>?,a+/a?> </A>
Por e?em&oA si .uiero satar desde a.u1 a a &antaa finaA &ongo a siguiente 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 &gina nuestra
Puede ser .ue tengamos una soa &gina. Pero o ms frecuente es .ue tengamos
$arias &ginasA una inicia 0o &rinci&a2 * otras conectadas a eaA e incuso entre eas
mismas.
/u&ongamos .ue .ueremos ena7ar con a &gina creada en e e?em&o de
ca&1tuo anteriorA .ue a 4emos amado mi&ag2.4tm. En este casoA 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 &gina nuestra en $e7 de ir a
&rinci&io de a &ginaA adonde $a &or defectoA en ese sitio tenemos .ue coocar una
marca 0$>ase a seccin anterior2A * com&etar e enace con a referencia a esa marca.
Ena o%ser$acin im&ortanteG Esto* su&oniendo .ue a &gina en a .ue esto*
escri%iendo esta eti.ueta * a otra &gina a a .ue .uiero satar estn en e mismo
directorio. Por.ue &udiera ocurrir .ue 4e organi7ado mi sitio de @e% con un directorio
&rinci&aA * otros su%directorios au!iiares. /i a &gina a a .ue .uiero satar estA &. e?.
en e su%directorio su%dirA entonces en a eti.ueta tendr1a .ue 4a%er &uesto
Msu%dirImi&ag2.4tmM.
L a a in$ersaA si .uiero satar desde una &gina a otra .ue est en un directorio
anteriorA en a eti.ueta tendr1a .ue 4a%er &uesto M..Imi&ag2.4tmM. Esos dos &untos 4ace
.ue se diri?a a directorio anterior. F%s>r$ese .ue se de%e utii7ar e s1m%oo I &ara
indicar os su%directoriosA * no este otro UA .ue es &ro&io 3nicamente de @indoBs.
Pgina 12 de 44
/i nos .ueremos e$itar todas estas com&icacionesA &odemos tener todo ?unto en
un 3nico directorioA &ero esto tiene e incon$eniente de .ue est> todo ms desordenadoA
* sean ms dif1cies de 4acer as futuras modificaciones.
c2 Enaces con una &gina fuera de nuestro sistema
/i .ueremos ena7ar con una &gina .ue est> fuera de nuestro sistema 0es decirA
.ue est> en un ser$idor distinto a .ue so&orta nuestra &gina2A es necesario conocer su
direccin com&etaA o E:L 0Eniform :esource Locator2. E E:L &odr1a serA adems de
a direccin de una &gina de @e%A una direccin de ft&A go&4erA etc.
Ena $e7 conocida a direccin 0o E:L2A o coocamos en $e7 de o .ue 4emos
amado anteriormente !!! 0e destino de enace2. /i .ueremos ena7ar con a &gina de
=etsca&e 0cu*o E:L esG 4tt&GII4ome.netsca&e.comI2A 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 * min3scuasA &ues os ser$idores E=IH s1 as distinguen2
d2 Enaces con una direccin de emai
En este casoA sustituimos o .ue se 4a amado antes !!! 0e destino de enace2
&or maitoG seguido 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 decirA es con$eniente &oner tam%i>n 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>
Pgina 13 de 44
<uardamos e fic4ero de te!to con e nom%re mi&ag3.4tm * o cargamos en e
na$egador. Este es e resutadoG
. Imgenes
La eti.ueta .ue nos sir$e &ara incuir imgenes en nuestras &ginas de @e% es
mu* simiar a a de enaces a otras &ginasA .ue 4emos $isto en e ca&1tuo anterior. La
3nica diferencia es .ueA en ugar de indicar a &rograma na$egador e nom%re * a
ocai7acin de un documento de te!to HTML &ara .ue o cargueA se e indica e nom%re
* a ocai7acin de un fic4ero .ue contiene una imagen. La estructura de a eti.ueta esG
<IMD :)'>?i,agen0gi2?>
#on e comando IM< /:# 0image sourceA fuente de a imagen2 se indica .ue se
.uiere cargar una imagen amada imagen.gif 0o e nom%re .ue tenga2.
Dentro de a eti.ueta se &ueden aCadir otros comandosA 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 imagen. Este comandoA .ue en &rinci&io se &uede omitirA es en
%eneficio de os .ue accedan a nuestra &gina con un &rograma na$egador en forma de
te!to so. La .ue no son ca&aces de $er a imagenA &or o menos &ueden 4acerse una
idea so%re ea. Pero no es so &or esto. Ha* casosA como $eremos ms adeanteA en os
.ue se utii7a una imagen como enace a otra &gina. /i se omitiera este comandoA os
.ue utii7an dic4os na$egadores no &odr1an de ninguna manera acceder a esas &ginas.
#on res&ecto a a ocai7acin de fic4ero de esa imagenA se &uede decir a.u1 o
mismo .ue en e ca&1tuo anterior referente a os enaces.
8 igua .ue una &gina con a .ue .ueremos ena7ar &uede estar fuera de
nuestro sistemaA 0en cu*o caso 4a%1a .ue indicar su E:L o direccin com&eta2A
&odemos cargar una imagen .ue no est> en nuestro sistema siguiendo e mismo m>todoA
es decirA indicar en a eti.ueta e E:L com&eto de a imagen. 8un.ue esto no es mu*
aconse?a%eA &ues aargar1a innecesariamente e tiem&o de carga de nuestra &gina.
Pgina 14 de 44
Las imgenes de%en estar guardadas en un formato de fic4ero es&ecia amado
<I). 0Ha* tam%i>n otro formato ms a$an7adoA de .ue se 4a%ar ms adeante2. Este
formato <I) amacena as imgenes con un m!imo de 25" cooresA en forma
com&rimida. Ha* &rogramas grficos 0como e Paint /4o& Pro &ara e P#A o e <ra&4ic
#on$erter &ara e Mac2 .ue nos &ermiten guardar as imgenes en este formatoA 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 tamaCo de as imgenesA &ues
una imagen grande su&one un fic4ero grandeA * esto &uede resutar en un tiem&o
e!cesi$o de carga.
Para eegir a &osicin de a imagen con res&ecto a te!to 4a* distintas
&osi%iidades. La ms sencia es coocara entre dos &rrafosA con un tituar a un ado.
Los na$egadores ms actuaes 0como e =etsca&e =a$igator * e Microsoft Internet
E!&orer2 &ermiten .ue e te!to &ueda rodear a a imagen 0como se $er ms adeanteA
en e #a&1tuo -2.
De momento nos $amos a imitar a escoger a &osicin de tituar con res&ecto a
a imagen 0si es .ue .ueremos &onere un tituarA caro est2. /e &uede &oner arri%aA en
medio o a%a?o de ado de a imagen. Para eo se aCade e comando 8LI<= a a
eti.uetaA de a siguiente 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 imagen como enace a otra
&gina. Para estos casos se utii7an generamente imgenes &e.ueCas 0iconos2A aun.ue
se &uede usar cua.uier ti&o de imagen.
/eg3n $imos en e ca&1tuo anteriorA a estructura genera de un enace esG
<A H)E=>?AAA?> ... </A>
En este caso sustituimos !!! &or e nom%re de fic4ero de a &gina a a .ue
.ueremos acceder. L en ugar de *** &onemos a eti.ueta com&eta de a imagen 0.ue
.ueda as1 engo%ada dentro de a eti.ueta de enace2
#omo e?em&o $amos a utii7ar a imagen 04and.gif2 &ara acceder a e?em&o &rctico
de ca&1tuo 2 0mi&ag2.4tm2G
<A H)E=>?,ipag903t,l?><IMD :)'>?3and0gi2?></A>
.ue da como resutadoG
Pusando a imagen
com&ro%amos cmo efecti$amente
ena7a con a &gina deseada.
Pgina 15 de 44
F%s>r$ese adems .ue a imagen est rodeada de un rectguo de coor norma en os
enaces. /i no se desea .ue a&are7ca ese rectnguoA 4a* .ue incuir dentro de a eti.ueta
de a imagen e atri%uto
6F:DE:S'A 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 imagenA com&ro%amos .ue act3a
tam%i>n como enace aun.ue care7ca de
rectnguo de coor. Esto &uede resutar
ms est>tico.
Tam%i>n &odemos utii7ar una imagen &ara ena7ar con otra imagen. En este
caso sustituimos !!! 0e destino de enace2 con e nom%re de fic4ero de a imagen a a
.ue .ueremos acceder e *** 0o .ue a&arece en &antaa como e enace2 &or a eti.ueta
com&eta de a imagen .ue .ueremos .ue a&are7ca en a &antaa como e enace de a
otra.
Por 3timoA otra &osi%iidad es a de utii7ar un te!to &ara ena7ar con una
imagen. En este caso sustituimos !!! 0e destino de enace2 con e nom%re de fic4ero
de a imagen a a .ue .ueremos acceder e *** 0o .ue a&arece en &antaa como e
enace2 &or e te!to.
/u&ongamos .ue .ueremos ena7ar con a imagen 4and.gif &or medio de un te!toG
98 H:E)SM4and.gifM; necesitas una manoV 9I8;
Que da como resutadoG
Pgina 1" de 44
En ti&o de imgenes de .ue se 4ace a%undante uso * .ue sir$en &ara me?orar a
&resentacin de a &gina son os iconosA %otonesA %arras se&aradorasA etc. 8 &esar de su
tamaCo o formaA son imgenes 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 imgenes <ifA .ue &uede ca&turar de
aguna &gina en internet soo &resionando e %oton derec4o de mouseA * guardaras en
e mismo directorio en e .ue se guardar e fic4ero de te!to .ue se $a a crear a
continuacinA ?unto con os de os ca&1tuos anteriores.
En e &rocesador de te!tos co&iamosG
9HTML;
9HE8D;
9TITLE; Mi &agina de @e% O 4 9ITITLE;
9IHE8D;
96FDL;
9#E=TE:;
9H1; Mi &agina de @e% 9IH1;
9I#E=TE:;
9H:;
Esta es mi &agina de @e%. =o es mu* e!tensaA &ero tiene todos os
eementos %asicos. Es&ero .ue os guste. Poco a &oco e ire anadiendo
mas cosas interesantes.
9P; 98 H:E)SMmi&ag2.4tmM; 9IM< /:#SMimagen1.gifM; 9I8; Mis aficiones
9P; 98 H:E)SMmi&ag3.4tmM; 9IM< /:#SMimagen2.gifM; 9I8; Mis &aginas
fa$oritas
9#E=TE:;
9H3; En ugar idea &ara mis $acaciones 9IH3;
9IM< /:#SMimagen3.gifM 8LTSMisaM;
9I#E=TE:;
9I6FDL;
9IHTML;
Pgina 1+ de 44
<uardamos e fic4ero de te!to con e nom%re mi&ag4.4tm * o cargamos en e
na$egador. Este es e resutado.

!. "aracteres especiales
E!isten agunas 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
tantoA si se .uisieran escri%ir estos caracteres como &arte norma de te!toA dar1a esto
ugar a una am%igWedadA *a .ue e &rograma na$egador &odr1a inter&retaros como e
comien7o o fina de una eti.uetaA en $e7 de un carcter ms de te!to.
Para reso$er este &ro%emaA e!isten unos cdigos &ara &oder escri%ir estos
caracteres * otros reacionados con as eti.uetas.
NtD &ara 9 0ess t4anA menor .ue2
NgtD &ara ; 0greater t4anA ma*or .ue2
Nam&D &ara N 0am&ersand2
N.uotD &ara M 0dou%e .uotation2
#omo se $eA estos cdigos em&ie7an siem&re con e signo N * aca%an siem&re
con D De una manera simiarA e!isten cdigos &ara escri%ir etras es&ec1ficas de
distintos idiomas. Ha* muc4os de eosA &eroA gicamenteA os .ue ms nos interesan
son os &ro&ios de casteano 0as $ocaes acentuadasA a C * os signos X * Y 2
Los cdigos de as $ocaes acentuadas se forman comen7ando con NA seguido de
a $oca en cuestinA seguido de a &aa%ra acute 0aguda2 * terminando con e signo D
NaacuteD &ara a NeacuteD &ara a >
NiacuteD &ara a 1 NoacuteD &ara a
NuacuteD &ara a 3 N8acuteD &ara a Z
NEacuteD &ara a [ NIacuteD &ara a \
Pgina 1- de 44
NFacuteD &ara a ] NEacuteD &ara a ^
E resto de os cdigos sonG
NntideD &ara a C N=tideD &ara a _
NuumD &ara a W NEumD &ara a `
NT1(1D &ara X NT1"1D &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&ag4.4tm2 as $ocaes acentuadas &or sus corres&ondientes cdigos.
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
Pgina 1( de 44
a2 #on un coor uniforme
%2 #on una imagen
a) Fondos con un color uniforme
/e consigue aCadiendo e comando 6<#FLF: a a eti.ueta 96FDL; 0situada
a &rinci&io de documento2A de a siguiente 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" d1gitos 0en ugar de os die7 de a numeracin decima 4a%itua2.
Estos d1gito sonG
' 1 2 3 4 5 " + - ( 8 6 # D E )
Es decirA .ue en nuestro casoA e n3mero menor es e '' * e ma*or e )). 8s1A
&or e?em&oA e coor ro?o es e T))''''A &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 oscuroA 4a* .ue reducir e n3mero de su com&onenteA
de?ando os otros dos in$aria%es. 8s1A e ro?o T))'''' se &uede 4acer ms
oscuro con T88''''A o a3n ms oscuro con T55''''.
Pgina 2' de 44
Ftros coores sonG
T)))))) O 6anco
T'''''' O =egro
T))))'' O 8mario
Para 4acer .ue un coor tenga un tono ms sua$e 0ms &aste2A se de%en $ariar
os otros dos coores 4aci>ndoos ms caros 0n3mero ms ato2A en una cantidad
igua. 8s1A &odemos con$ertir e ro?o en rosa con T))+'+'.
#oores de te!to * de os enaces
/i no se $ariasen os coores 4a%ituaes de te!to * de os enaces 0negro * a7uA
res&ecti$amente2A &odr1a ocurrir .ue su ectura contra un fondo oscuro fuese mu*
dificutosaA o incuso im&osi%eA si e fondo fuese &recisamente negro o a7u.
Para e$itar estoA se &ueden escoger os coores de te!to * de os enacesA
aCadiendo a a eti.ueta 0si se desea2 os siguientes 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 cdigos de os coores son os mismos .ue os .ue se 4an $isto anteriormente.
La eti.uetaA con todas sus &osi%iidadesA 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 engo%ado dentro de
a eti.ueta 96FDL;2 cam%ia e coor de
a totaidad de te!to de a &gina.
Tanto e =etsca&e =a$igator 2A 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 &gina &uede ser tam%i>n una imagenA *a sea en formato <I) o
bPE<. Esta imagen se re&ite &or toda a &ginaA de una manera anoga a ta&i7 de
@indoBs. La estructura de a eti.ueta esG
Pgina 21 de 44
<BODY BA'MD)O6(D>?i,agen0gi2?>
o %ienG
<BODY BA'MD)O6(D>?i,agen01pg?>
=o todos os na$egadores so&ortan este formato
Ha* .ue &re$er a &osi%iidad de .ue .uien acceda a nuestra &gina 4a*a
des4a%iitado a carga automtica de imgenesA en cu*o caso tam&oco cargar1a a
imagen .ue sir$e como fondo * so $er1a e fondo estndar de coor gris. Esto &odr1a
ser mu* &er?udicia si 4emos escogido unos coores &ara e te!to * os enaces .ue no
contrastan %ien con ese fondogris. 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 orden2A
teniendo cuidado en escoger un coor uniforme de fondo &arecido a de a imagen.
Prctica 6.
,amos a &oner como fondo a imagen nu%es.?&gA ?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 imagen * guardara en e mismo directorio en donde $amos a guardar
e fic4ero .ue $amos a crear.
#argamos en e editor de te!tos mi&ag3.4tm * sustituimos a eti.ueta 96FDL; &or
esta otraG
96FDL 68#P<:FE=DSMnu%es.?&gM 6<#FLF:SMT##))))M
TEHTSMT88''''M;
<uardamos este fic4ero como mi&ag+.4tm * o cargamos en e na$egador &ara
$isuai7aro. Este es e resutado G
Pgina 22 de 44
%. Ta&las
Hasta .ue no se em&e7aron a usar as ta%asA a 3nica manera de ta%uar as cosas
era utii7ar a eti.ueta de &reformateadoA con a .ue es necesario &oner manuamente os
es&acios en %anco &ara .ue .uede todo aineado formando fias * coumnasA con un
resutado mu* &oco est>tico.
Estructura de una tabla
,amos a $er ordenadamente 0de fuera 4acia dentro2 as eti.uetas necesarias &ara
confeccionar as ta%as.
1. La eti.ueta generaA .ue engo%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 aCadir e
atri%uto 6F:DE: a a eti.uetaA es decirG
<TABLE BO)DE)>
[+eto de la etiqueta"
</TABLE>
2. En e siguiente ni$eA dentro de a anteriorA estn as eti.uetas &ara formar cada fia
0roB2 de a ta%aA .ue son 9T:; * 9IT:;. Ha* .ue re&etiras tantas $eces como fias
.ueremos .ue tenga a ta%a. Es decirA &ara una ta%a con dos fiasA 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 cedaA .ue
son 9TD; * 9ITD;A .ue engo%an e contenido de cada ceda concreta 0te!toA
Pgina 23 de 44
imgenesA 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
Titular de la tabla
/e &uede aCadir un tituar 0ca&tion2 a a ta%aA es decir un te!to situado encima
de a ta%a .ue indica cu es su contenido. /e consigue 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
igua a a unidad. Pero se &uede 4acer .ue este %orde sea tan grueso como .ueramosA
&oniendoG
<TABLE BO)DE)>nO,e+o deeado>
/i en e e?em&o anterior &onemosG
9T86LE 6F:DE:S5;
Pgina 24 de 44
Celdas de cabecera
8dems de as cedas .ue contienen datos normaesA &odemos &onerA si nos
con$ieneA cedas de ca%ecera 04eader2A .ue se distinguen &or estar e te!to de dic4as
cedas en negrita * centrado. Esto se consigue con a eti.ueta 9TH; * 9ITH; 0en $e7 de
a norma 9TD; * 9ITD;2
,amos a aCadirA en e e?em&o anteriorA una fia de estas cedas de ca%eceraA
antes de as otras dos .ue *a e!ist1anG
9T:;
9TH;#oumna 19ITH; 9TH;#oumna 29ITH; 9TH;#oumna 39ITH;
9IT:;
Que resutaG

Contenido de las celdas
Hasta a4oraA 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 HTMLA como imgenesA enacesA etc. =o 4a* ms .ue &oner dentro de a
eti.ueta de a ceda a eti.ueta corres&ondiente a una imagenA un enaceA etc.
E?em&o con una imagenG
<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>
Pgina 25 de 44
Posicionamiento del contenido dentro de la celda
=ormamenteA e contenido de una ceda est aineado a a i7.uierda. Pero se
&uede cam%iar esto aCadiendo dentro de a eti.ueta de a ceda os siguientes 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%i>n se
&uede cam%iarAaCadiendo dentro de a eti.ueta de a ceda os siguientes atri%utosG
<TD NALID(>TO*> A++i$a </TD>
<TD NALID(>BOTTOM> A$a1o </TD>
ariando las dimensiones de la tabla
E na$egador se encarga normamente de dimensionar e tamaCo tota de a ta%a
de acuerdo con e n3mero de fiasA de coumnasA &or e contenido de as cedasA es&esor
de os %ordesA etc.
8 $eces nos &uede con$enir for7are &ara .ue a ta%a tenga unas dimensiones
totaes ma*ores .ue as .ue e corres&ondenA tanto en anc4ura como en ongitud. Esto se
consigue aCadiendo dentro de a eti.ueta de a ta%a os atri%utos @IDTH * HEI<HT
igua a un &orcenta?e de a dimensin de a &antaaA 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
consigue aCadi>ndo dentro de a eti.ueta de a ceda os atri%utos #FL/P8=Sn3mero
&ara e!tenderse so%re un n3mero determinado de coumnasA o :F@/P8=Sn3mero
&ara e!tenderse $erticamente so%re un n3mero determinado de fias.
Por e?em&oA en a ta%a $amos a aCadir una fia con una soa cedaA .ue a%arca a
dos coumnasG
<T)> <TD 'OL:*A(>9> 'elda o$+e 9 /olu,na </TD> <T)>
Pgina 2" de 44
Color de fondo en las tablas
Podemos conseguir .ue as ta%as tengan un coor de fondoA siguiendo un
&rocedimiento totamente anogo a em&eado &ara .ue una &gina tenga un coor de
fondo uniforme 0seg3n $imos en e ca&1tuo "2. Para eo de%emos utii7ar e atri%uto
6<#FLF:SMTHHLLaaMA $isto en dic4o ca&1tuo.
/e &uede conseguirG
1.Que a totaidad de a ta%a tenga un coor de fondo. Para eoA coocamos e atri%uto
dentro de a eti.ueta T86LE. Por e?em&oA $amos a 4acer .ue a ta%a tenga 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 tenga un coor de fondo. Para eoA coocamos
e atri%uto dentro de a eti.ueta de a ceda corres&ondiente. Por e?em&oA $amos a
4acer .ue so a ceda 1 de a fia 1 tenga 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 generaidad de as cedas tenga un coorA &ero .ue aguna ceda tenga uno
&articuar. E atri%uto de coor genera se cooca en a eti.ueta T86LEA * e de coor
&articuar en a eti.ueta de a ceda en cuestin 0una com%inacin de os dos casos
Pgina 2+ de 44
anteriores2. &or e?em&oA $amos a 4acer .ue a generaidad de a ta%a sea de coor
ro?o
0T))''''2A &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 imgenes de fondo en e
interior de as ta%asA de una manera anoga a como se 4ace en una &gina 0seg3n
$imos en e ca&1tuo "2.
Para eo de%emos utii7ar e atri%uto68#P<:FE=DSMimagen.gifM o
68#P<:FE=DSMimagen.?&gMA $isto en dic4o ca&1tuo.
/i se utii7a dentro de a eti.ueta 9T86LE; a imagen en cuestin se
muti&icar detrs de todas as cedas.
#eparaci$n entre las celdas de una tabla
Por defectoA 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=<A .ue se &one dentro de a
eti.ueta T86LE.
Por e?em&oA &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 defectoA 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=<A .ue se &one dentro de
a eti.ueta T86LE.
Por e?em&oA &ara o%tener una se&aracin de 2' &i!es entre e contenido * os
%ordesA dentro de cada cedaG
<TABLE BO)DE) 'ELL*ADDI(D>9E>

Prctica &.
Pgina 2- de 44
,amos a crear una ta%a de dos fiasA con una ceda cada una. La &rimeraA como
ca%eceraA con e te!to MEn ugar idea &ara mis $acacionesMA * a segunda con a imagen
isa.gif. 8dems $amos a aargar a o anc4o a ta%a a +5c 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
'. $ormularios
La manera genera &ara .ue os ectores de nuestra &gina se &uedan comunicar
con nosotros es &or medio de un enace a nuestra direccin de emaiA 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 mismosA o un comentario de usuarioA &ara o
.ue e suministraremos un es&acio en donde introduciro.
/e &uede 4acer todo estoA adems de otras cosasA utii7ando os formuariosA con
os .ue se &ueden confeccionar &ginas .ue contengan os eementos necesarios &ara
eoA ta como %otones de radioA istas de seeccinA ca?etines de introduccin de te!to *
de controA etc.A como $amos a $er.
Los formuarios &ermiten .ue os dems nos en$1en a informacin directamente
a nosotros o %ien a nuestro ser$idorA en donde 4emos instaado un &rograma .ue &rocese
esta informacin.
Por e?em&oA $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 correoA con os .ue
Pgina 2( de 44
confeccionar1amos manuamente dic4a ista de correoA sin necesitar ning3n &rograma
&ara eo. Este &roceso es e .ue $amos a comentar en este ca&1tuo.
La otra &osi%iidadA de a .ue 3nicamente se $a a 4acer esta mencinA es .ue
4u%i>ramos instaado en nuestro ser$idor un &rograma es&ecia &ara &rocesar esos datos
* aCadiros a a ista de correoA * .ue incuso &udiera de$o$er automticamente a
usuario ag3n ti&o de informacin. Para conseguir estoA os formuarios necesitan
e?ecutar &rogramas o scri&ts &or medio de #<I 0#ommon <ateBa* Interface2. E #<I
&ermite a os formuarios ser &rocesados &or &rogramas escritos en cua.uier engua?eA
aun.ue os ms usados en Internet son e Per * e #.
=FT8G
E ti&o de formuario .ue se descri%e a continuacin &odr ser utii7ado &or a
ma*or1a de os na$egadoresA con a nota%e e!ce&cin de E!&orer 0incuso a $ersin
3.'2A &or o .ue es con$eniente suministrar a fina de formuarioA como una aternati$a
&ara estos casosA un enace de emai ordinario 0$er e #a&1tuo 32
Estructura de un formulario
La estructura genera 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 formuarioA 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 4ici>ramos uso de #<IA ser1a
&recisamente a.u1 donde indicar1amos su ocai7acin en e ser$idorA .ue 4a%ituamente
es e directorio cgiO%inA &ara .ue &rocese os datos2.
E atri%uto METHFDSPF/T indica .ue os datos sean inmediatamente en$iados
&or correo a a direccin de emaiA nada ms &usar e usuario e %otn de en$1o.
#on e atri%uto E=#TLPESMTEHTIPL8I=M se consigue .ue as res&uestas as
reci%amos como un fic4ero de te!toA &erfectamente egi%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
Pgina 3' de 44
La introduccin de os datos se consigue &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 asignamos 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)
En este caso es !!!Ste!tA es decirA 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&eidoA &. e?. :ui7A * &usa e %otn de
en$1o 0.ue $eremos ms adeante2A
reci%iremos un emai su*o con e
siguiente te!toG
8&eidoS:ui7
La ongitud de este formuario es &or defecto de 2' caracteres. /e &uede $ariar
incu*endo en a eti.ueta e atri%uto /IaESMn3meroM. Por otra &arteA sea cua sea a
ongitud de formuarioA si no se indica nadaA e usuario &uede introducir e n3mero de
caracteres .ue .uiera. /e &uede imitar estoA incu*endo en a eti.ueta e atri%uto
M8HLE=<THSMn3meroM.
Tam%i>n se &uede 4acer .ue e te!to introducido no sea reconoci%eA 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&assBordM. En e 3timo e?em&oA &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 gran ongitudA &or e?em&o un
comentarioA es con$eniente utii7ar un formuario de te!to de m3ti&es 1neas.
Pgina 31 de 44
Esto se consigue 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 fiasA *
#FL/ e de coumnas2.
* a de cierreG </TEKTA)EA>
E?em&oG un formuario soicitando os comentarios de usuarioG
<=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 usuarioA en $e7 de introducir un te!toA como 4emos $isto en
os casos anterioresA esco?a entre $arias o&ciones .ue e &resentamos nosotrosA 4aremos
uso de un formuario en forma de men3.
/e consigue con a eti.ueta de inicio 9/ELE#T =8MESM***M; * a de cierre
9I/ELE#T;. Las distintas o&ciones a escoger se consiguen 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 anteriorA so es $isi%e en e formuario una o&cin. /i .ueremos
.ue sean $isi%es m3ti&es o&ciones a a $e7A aCadimos en a eti.ueta os atri%utos
M^LTIPLE /IaESMn3meroMA 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?>
Pgina 32 de 44
F%tenemosG

b-1) Formulario de confirmacin (cec!box)
/i .ueremos .ue e usuario confirme una o&cin determinadaA &odemos 4acer
uso de un formuario de confirmacinA o c4ec5%o!A .ue se consigue 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 4acero2A %asta con aCadir 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 $ariasA &odemos
4ace uso de os %otones de radioA .ue se consiguen con a eti.uetaG
<I(*6T TY*E>?+adio? (AME>?...? NAL6E>?!!!?>
Pgina 33 de 44
Donde *** es e nom%re .ue e &onemos a a $aria%e .ue se trata de eegirA *
777 es e nom%re de cada una de as o&ciones en concreto.
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%s>r$ese e atri%uto o&ciona #HE#PED .ue se 4a aCadido en a &rimera
eti.ueta. Esa ser a o&cin .ue a&arece marcada &or defecto. F%s>r$ese tam%i>n .ue no
es &osi%e escoger ms de una o&cin.
c) #otones de en$o % de borrado
Hasta a4oraA en todos os e?em&os .ue 4emos $istoA fata%a un eemento
esencia en cua.uier formuarioA * es e %otn de en$1o de os datosA .ue se consigue
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 aCadiro a &rimer e?em&oA 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(?>
Pgina 34 de 44
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 introducidosA mu* con$eniente en un formuario con muc4os
eementos. Es mu* simiar a de en$1oA &ues se consigue 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 aCadimos a e?em&o anterior a eti.uetaG
<*><I(*6T TY*E>?+eet? NAL6E>?Bo++a+ dato?>
resutaG
Prctica '.
,amos a aCadir un Mi%ro de $isitasM. Para eoA aCadimos o siguienteA entre as
eti.uetas 9H:; * 9I6FDL; situadas a finaA o siguienteG
<*><'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>
Pgina 35 de 44
<*><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 ing>sA marcos o cuadros2 es un &rocedimiento de engua?e HTML
&ara di$idir a &antaa en diferentes 7onasA o $entanasA .ue &ueden actuar
inde&endientemente unas de otrasA como si se trataran de &ginas diferentesA &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 frameA se &uede cargar en otro frame una &gina 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 enacesA .ueA a ser &usados cargan en a
$entana &rinci&a as distintas &ginas.
De esta manera se faciita a na$egacin entre as &ginasA &ues aun.ue se $a*a
&asando de unas a otrasA siem&re estar a a $ista e 1ndice de con?unto.
Para com&render os distintos conce&tos $amos a desarroar un e?em&oA
creando una &gina con dos frames. E de a i7.uierda $a a ser$ir de 1ndice de o .ue
$eamos en e de a derec4aA * en >ste $eremos iniciamente una &gina de &resentacin.
/e &odr acceder tam%i>n a.u1 a a &gina &ersona creada en os ca&1tuos anteriores A si
se &usa un enace en e frame de a i7.uierda.
(ocumento de definici$n de los frames
Lo &rimero .ue tenemos .ue 4acer es crear un documento HTML en e .ue
definiremos cuntas 7onas $a a 4a%erA .u> distri%ucin * tamaCo $an a tenerA * cu $a
ser e contenido de cada una de eas.
Pgina 3" de 44
En e e?em&o .ue $amos a desarroarA a &gina $a a tener dos frames
distri%uidos en coumnas 0es decirA uno a ado de otroA en $e7 de uno encima de otroA
o .ue ser1a una distri%ucin en fias2.
#on res&ecto a tamaCoA 4aremos .ue e &rimero 0e de i7.uierda2 ocu&e e 2'c
de anc4o de a &antaaA * e otroA e -'c restante.
L con res&ecto a contenidoA 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&agind.4tm2A * e de a derec4a otro documento HTML .ue $a a ser$ir de
&gina de &resentacin 0a .ue amaremos mi&ag&re.4tm2.
Todo o anterior se refe?a en e siguiente 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 framesA su distri%ucin * su tamaCoA &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&agind.4tm * e de segundo 0e de a derec4a2 sea e documento
HTML mi&ag&re.4tm.
F%s>r$ese .ue en a eti.ueta de segundo se 4a incuido e atri%uto
=8MESM&rinci&aMA &ero no as1 en e &rimero. E moti$o es .ue se necesita dar un
nom%re a segundo frameA &uesA como $eremos a continuacinA en e documento de
&rimer frame $a a 4a%er unos enaces .ue $an a ir dirigidos 4acia >. En este caso so
tenemos dos framesA &ero &odr1a 4a%er msA * es necesario distinguiros unos de otros.
L e &rimero no necesita nom%reA &ues no $a a 4a%er enaces en e segundo dirigidos
4acia >.
(ocumentos )T*+ de cada frame
=ecesitamos a4ora confeccionar e documento HTML de cada uno de os
frames. :ecu>rdese .ue son como &ginas inde&endientesA .ue &ueden tener cada una su
&ro&io fondoA etc.A * todo o .ue .ueramos aCadir en eos * .ue 4emos a&rendido 4asta
a4ora.
Pgina 3+ de 44
&ocumento del frame de la i'(uierda
,a a tener un fondo amarioA * $a a contener dos enaces dirigidos a frame de a
derec4a. 8demsA como muestra de .ue se &uede aCadir 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 ago nue$oA * es e
atri%uto T8:<ET 0en ing>sG o%?eti$oA %anco2A .ue sir$e &ara 4acer .ue a ser acti$ado
e enace no se cargue en e &ro&io frameA sino en otroA &recisamente en e .ue 4a*amos
amado con ese nom%re en e documento de definicin de os frames.
En nuestro casoA e 4emos dado e nom%re de M&rinci&aM a frame de a derec4aA
* es &or tanto a41 donde se $an a cargar os documentos HTML.
<uardamos este documento con e nom%re de mi&agind.4tm. 8demsA
ca&turamos a imagen * a guardamos ?unto con e documento.
&ocumento del frame de la dereca
,a a tener un fondo negroA * $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>
<uardamos este documento con e nom%re de mi&ag&re.4tm
/i o cargamosA este es e resutado con frames 0&ara os na$egadores .ue os so&ortan2.
/e &uede com&ro%ar cmo cam%iamos de &gina en e frame de a derec4aA seg3n e
enace .ue &usemos en e frame de a i7.uierda.
Pgina 3- de 44
,tributos de la eti!ueta -F.,*E#ET/
La eti.ueta ):8ME/ETA como 4emos $isto en e e?em&oA es a .ue define a
distri%ucinA e n3mero * tamaCo 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 fiasA seg3n se use uno u
otro atri%uto.
Define e n3mero de frames .ue 4a%rA &uesA &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 tamaCo de os framesA seg3n e $aor .ue demos a !!A **A 77.... Este
$aor se &uede e!&resar enG
En &orcenta?e de anc4o de &antaa 0&ara as coumnas2A o de ato de a
&antaa 0&ara as fias2. 8s1A &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
<=)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 0seg3n sean fias o coumnas2. 8s1A &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
Pgina 3( de 44
Es &eigroso utii7ar so $aores a%soutosA &ues e tamaCo de a &antaa $ar1a
de un usuario a otro. /i se $a a usar ag3n $aor a%souto &ara un frameA es me?or
me7caro con aguno reati$oA como os .ue $amos a $er a continuacinA &ara .ue se
a?uste e tota a a &antaa de usuario.
En $aor reati$o .ue se consigue &oniendo un asterisco 0e2A 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 asteriscoA ese es&acio restante se di$idir &or igua
entre eos.
/i 4a* un n3mero antes de asteriscoA ese frame o%tiene esa cantidad ms de
es&acio reati$o. 8s1 M2eAeM 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 framesA se de%en incuir e
atri%uto ):8ME6F:DE:S' dentro de a eti.ueta ):8ME/ET.
Para .ue tam%i>n desa&are7can os 4uecos de se&aracin entre frames 4a* .ue
aCadir otros dos atri%utos 0e &rimero es &ara e E!&orer * e segundo &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!!A
**M;
,tributos de la eti!ueta -F.,*E/
Esta eti.ueta define as cararacter1sticas de un frame concretoA no de con?unto
de os framesA como era e caso con a eti.ueta 9):8ME/ET;. Puede tener os
siguientes &osi%es atri%utosA .ue $an dentro de a eti.ueta 9):8ME;G
:)'>?di+e//i8n?0 Esta direccin &uede ser a de un documento HTML 0ta
como 4emos utii7ado en e e?em&o2A o cua.uier otro recurso de @e% 0o E:L2. #on
este atri%uto se indica o .ue se cargar iniciamente en e frame.
/i no se e &one este atri%uto a a eti.ueta 9):8ME;A entonces dic4o frame
a&arecer iniciamente $ac1oA aun.ue tendr as dimensiones asignadas.
(AME>?no,$+eFdeFlaFventana?0 Este atri%uto se usa &ara asignar un nom%re a
un frame. E atri%uto =8ME es o&ciona. Por defectoA todas as $entanas carecen de
nom%re. Los nom%res .ue se esco?an de%en comen7ar &or un carcter afanum>rico
0una etra o un n3meroA &ero no otro ti&o de s1m%oo2.
Pgina 4' de 44
MA)DI(#IDTH>?nO,e+o?0 /e utii7a este atri%uto cuando se .uiere controar a e
anc4o de os mrgenes dentro de un frame. E n3mero .ue se &onga re&resenta os
&i!es de os mrgenes. Este atri%uto es o&ciona.
MA)DI(HEIDHT>?nO,e+o?0 Igua .ue e anteriorA &ero referido a os mrgenes 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 nuncaA * si se esco?e MautoMA ser e
na$egador .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 asigna un $aor num>ricoA como a os dems. Es
un indicador &ara .ue a $entana no se &ueda reOdimensionar 0en ing>sA resi7e2 &or
&arte de usuario. Es un atri%uto o&ciona. Por defectoA todos os frames son reO
dimensiona%es.
=)AMEBO)DE)>?no?0 Este atri%uto eimina e %orde en un frameA &ero si se
.uiere .ue se eimine com&etamenteA tam%i>n 4a* .ue &on>rseo a frame contiguo. /i
se .uiere eiminar os %ordes de todos os framesA se de%e coocar en a eti.ueta
):8ME/ETA como 4emos $isto anteriormente.
El atributo T,.0ET
En e e?em&o 4emos $isto .ueA como .uer1amos .ue os enaces situados en e
frame de a i7.uierda surtieran efecto no en > mismoA sino en otro frameA ten1amos .ue
&oner dentro de cada enace e atri%uto T8:<ETSM&rinci&aMA siendo M&rinci&aM e
nom%re .ue 4a%1amos dado a segundo frameA en e documento de definicin de frames.
Es decirA 4emos utii7ado este atri%uto de esta maneraG
TA)DET>?no,$+eFdadoFaFot+oF2+a,e?.
Estos nom%resA .ue os escogemos nosotrosA &ueden ser cua.uieraA &ero con a
condicin .ue e &rimer carcter sea afanum>rico 0etra o n3mero2.
Pero 4a* unos nom%res reser$ados 0es decirA .ue no se &ueden usar &ara
denominar a un frame2A .ue 4acen .ue este atri%uto efect3e unas funciones es&eciaes.
Para .ue cum&an su cometidoA es im&rescindi%e escri%ir estas &aa%ras reser$adas
0%an5A sef * to&2 en min3scuas.
TA)DET>?F$lan<?0 Hace .ue se a%ra una nue$a co&ia de na$egadorA * e enace
acti$ado se carga en eaA a &antaa com&eta. Es decirA tendr1amos dos co&ias de
na$egador 0=etsca&eA E!&orerA etc.2 funcionando a a $e7.
TA)DET>?Fel2?0 Hace .ue e enace se cargue en e &ro&io frame.
Pgina 41 de 44
TA)DET>?Ftop?0 Hace .ue e enace se cargue a &antaa com&etaA su&rimiendo
todos os framesA &ero sin .ue se cargue una nue$a co&ia de na$egador. Este es
&articuarmente 3ti. En error mu* com3n es o$idarse de &oner este atri%uto en os
enaces .ue estn en un frameA con o .ue resuta .ue a ser acti$adosA a &gina amada
se carga dentro de &ro&io frameA o cua es mu* moesto si esa &gina &ertenece a otro
sitio de @e%A * a3n ms gra$e si esa &gina 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 coumnasA 0de&endiendo .ue se utiice e atri%uto
:F@/ o #FL/ en a eti.ueta ):8ME/ET2A &ero no am%os a a $e7.
/e &ueden o%tener distri%uciones ms com&e?as anidando fias dentro de una
coumnaA o a a in$ersaA coumnas dentro de una fia.
/u&ongamos .ue .ueremos a siguiente distri%ucinG
En frame estrec4o en 4ori7onta en a &arte su&eriorA de ado a ado de a &antaa
0aturaA e 15c2
Ftro frame estrec4o en $ertica en a &arte i7.uierdaA de%a?o de anterior 0anc4uraA e
2'c2
En tercero ocu&ando e resto de a &antaa.
,emos .ueA en reaidadA esto e.ui$ae a a siguiente 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 otraA e resto.
E documento de definicin de as dos fias 0o$id>monos de momento .ue a de
a%a?o est su%di$idida2A 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>
Pgina 42 de 44
#omo a fia inferiorA en reaidadA son dos coumnas 0con una distri%ucin de
2'c * resto2A 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

1). *onidos.
Ena &gina de @e% &uede tener sonidos incor&oradosA %ien sea como un fondo
sonoro .ue se e?ecuta automticamente a cargar a &ginaA 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 adeanteA se utii7a a eti.uetaG
<BD:O6(D :)'>?2i/3e+oFdeFonido? LOO*>n>
E fic4ero de sonido &uede estar en formato .mid o .Ba$.
Pgina 43 de 44
E atri%uto LFFP 0en ing>sA 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
LFFPSinfiniteA e sonido se e?ecutar indefinidamente. /e &uede omitir este atri%utoA *
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&areceA * .ue
tiene diferentes tecas 0&a*A sto&A &ausaA etc.2. Ms adeante $eremos os $aores !!! e
** .ue de%emos atri%uires.
E fic4ero de sonido &uede estar en formato .mid o .Ba$A &ero recu>rdese a
ad$ertencia 4ec4a anteriormenteA de .ue estos formatos de%en estar configurados como
MIME &or e ser$idor donde est> ao?ada a &gina.
Dentro de a eti.ueta se &ueden aCadir os siguientes 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
,ctivaci$n del sonido por el propio usuario
Hasta a.u1 4emos $isto cmo &oner un sonido de fondo en una &gina. Ha* otra
o&cinA muc4o ms senciaA * es a de &oner un enace a un fic4ero de sonidoA de ta
maneraA .ue a &usaro se e?ecute e fic4ero. 0,er e #a&1tuo 3A en e .ue se e!&ica
cmo crear enaces2.
Por e?em&oA $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$aA en una $entana a&arteA e &rograma .ue e?ecuta e
sonido. Esto es $ido &ara todos os na$egadoresA incuso as $ersiones ms antiguasA
con a 3nica condicin de .ue se 4a*a configurado un &rograma au!iiar ca&a7 de
e?ecutar fic4eros .mid o .Ba$.
Pgina 44 de 44