Universidad de Guadalajara Coordinacin General del Sistema para la Innovacin del Aprendizaje Coordinacin de Programas en Red y Educacin a Distancia

Pgina 1 de 48

Universidad de Guadalajara Coordinacin General del Sistema para la Innovacin del Aprendizaje Coordinacin de Programas en Red y Educacin a Distancia

Indice.
Introduccin................................................................................................................ 1. !structura de un documento "#$%.......................................................................4 Prctica 1.................................................................................................................& '. (ando )orma al te*to...............................................................................................+ Comentarios no visi,les en la pantalla...................................................................1Prctica '................................................................................................................1. !nlaces con otras pginas.......................................................................................1' !structura de los enlaces.........................................................................................1' #ipos de enlaces......................................................................................................1' !nlaces dentro de la misma pgina.....................................................................1' !nlaces con otra pgina nuestra..........................................................................1 !nlaces con una pgina )uera de nuestro sistema...............................................14 !nlaces con una direccin de email....................................................................14 Prctica ................................................................................................................14 4. Imgenes.................................................................................................................1& Prctica 4................................................................................................................1. &. Caracteres especiales..............................................................................................'Prctica &.................................................................................................................'1 +. /ondos...................................................................................................................'' /ondos con un color uni)orme................................................................................'' Colores del te*to 0 de los enlaces......................................................................'' /ondos con una imagen..........................................................................................'4 Prctica +................................................................................................................'4 1. #a,las.....................................................................................................................'& !structura de una ta,la...........................................................................................'& #itular de la ta,la...................................................................................................'1 2ariando el espesor de los ,ordes.........................................................................'1 Celdas de ca,ecera.................................................................................................'1 Contenido de las celdas..........................................................................................'8 Posicionamiento del contenido dentro de la celda.................................................'8 2ariando las dimensiones de la ta,la....................................................................'8 Celdas 3ue a,arcan a otras varias..........................................................................'. Color de )ondo en las ta,las.................................................................................. Separacin entre las celdas de una ta,la................................................................ Separacin entre el ,orde 0 el contenido dentro de las celdas.............................. Prctica 1............................................................................................................... '

Pgina ' de 48

Universidad de Guadalajara Coordinacin General del Sistema para la Innovacin del Aprendizaje Coordinacin de Programas en Red y Educacin a Distancia 8. /ormularios.......................................................................................................... ' !structura de un )ormulario................................................................................. !ti3ueta de inicio............................................................................................. !lementos para introducir los datos................................................................ Introduccin por medio de te*to 4una l5nea6................................................ 4 Introduccin por medio de te*to 4m7ltiples l5neas6..................................... & Introduccin por medio de men7s................................................................ + /ormulario de con)irmacin 4c8ec9,o*6...................................................... 1 :otones de radio........................................................................................... 1 :otones de env5o 0 de ,orrado..................................................................... 8 .. /rames..................................................................................................................4(ocumento de de)inicin de los )rames...................................................................41 (ocumentos "#$% de cada )rame......................................................................4' (ocumento del )rame de la iz3uierda.......................................................................4' (ocumento del )rame de la derec8a................................................................4 Atri,utos de la eti3ueta ;/<A$!S!#=..............................................................44 /rames sin ,ordes.................................................................................................4& Atri,utos de la eti3ueta ;/<A$!=.....................................................................4& !l atri,uto #A<G!#............................................................................................4+ /rames anidados dentro de otros )rames...............................................................41 1-. Sonidos................................................................................................................4. /ondo sonoro para el $icroso)t Internet !*plorer...............................................4. /ondo sonoro para el >etscape............................................................................4. Activacin del sonido por el propio usuario........................................................&Cr?ditos....................................................................................................................&1

Pgina de 48

Universidad de Guadalajara Coordinacin General del Sistema para la Innovacin del Aprendizaje Coordinacin de Programas en Red y Educacin a Distancia

Introduccin.
"#$% signi)ica HyperText Markup Language. !s el lenguaje en 3ue se escri,en los millones de documentos 3ue 8o0 e*isten en el @orld @ide @e,. Cuando accedemos a uno de estos documentosA el cliente 4>etscapeA I!A $osaicA %0n*A I:roBse6 los interpreta 0 los despliega. !*isten clientes gr)icos como >etscapeA 0 otros como el %0n* 3ue solo despliegan te*to. !s mu0 importante no olvidar esto cuando se diseCa una pgina Be,. Crear una ,uena pgina tiene dos aspectosD por un lado el conocimiento t?cnico para crear cdigo "#$% correctoA por otro lado el claro diseCo para presentar la in)ormacin. !l o,jetivo de este manual es proporcionar un conocimiento ,sico acerca de la construccin de pginas @e,A para un conocimiento ms pro)undo de este lenguaje posteriormente se desarrollarn ms versiones de este manualA por el momento esperamos 3ue la in)ormacin a3u5 proporcionada le sea de utilidad.

Pgina 4 de 48

Universidad de Guadalajara Coordinacin General del Sistema para la Innovacin del Aprendizaje Coordinacin de Programas en Red y Educacin a Distancia

1. Estructura de un Documento HTML

Ena pgina Be, es un arc8ivo de te*toA se puede crear con cual3uier editor de te*to como el edit de (FS. !l principio esencial del lenguaje "#$% 4"0per#e*t $ar9up %anguage6 es el uso de las eti3uetas 4tags6. /uncionan de la siguiente maneraG ;HHH= !ste es el inicio de una eti3ueta. ;IHHH= !ste es el cierre de una eti3ueta.

%as letras de la eti3ueta pueden estar en ma07sculas o min7sculasA indi)erentemente. Por claridadA se usarn en este manual slamente las ma07sculas. %o 3ue 8a0a entre am,as eti3uetas estar in)luenciada por ellas. Por ejemploA todo el documento "#$% de,e estar entre las eti3uetas ;"#$%= 0 ;I"#$%=G ;"#$%= J#odo el documentoK ;I"#$%= !l documento en s5 est dividido en dos zonas principalesG !l enca,ezamientoA comprendido entre las eti3uetas ;"!A(= 0 ;I"!A(= !l cuerpoA comprendido entre las eti3uetas ;:F(L= 0 ;I:F(L=

(entro del enca,ezamiento 8a0 in)ormacin del documentoA 3ue no se ve en la pantalla principalA principalmente el t5tulo del documentoA comprendido entre las eti3uetas ;#I#%!= 0 ;I#I#%!=. !l t5tulo de,e ser ,reve 0 descriptivo de su contenidoA pues ser lo 3ue vean los dems cuando aCadan nuestra pgina a su ,oo9mar9 4o agenda de direcciones6. (entro del cuerpo est todo lo 3ue 3ueremos 3ue aparezca en la pantalla principal 4te*toA imgenesA etc.6 Por tantoA la estructura 3ueda de esta maneraG
<HTML> <HEAD> <TITLE> Ttulo de la pgina </TITLE> </HEAD> <BODY>

[Aqu van la </BODY> </HTML>

etiqueta

que vi uali!an la pgina"

Pgina & de 48

Universidad de Guadalajara Coordinacin General del Sistema para la Innovacin del Aprendizaje Coordinacin de Programas en Red y Educacin a Distancia Antes de crear nuestra primera pginaA unas consideraciones so,re el te*toG Cuando escri,imos en el documento el te*to 3ue 3ueremos 3ue aparezca en la pantallaA veremos 3ue ?ste se acomoda a ellaA sin 3ue tengamos 3ue pulsar el retorno del carro. Si 3ueremos separar el te*to en distintos prra)os de,emos usar la eti3ueta ;P=A 43ue no tiene su correspondiente eti3ueta de cierre ;IP=6 .

!l te*to puede tener unas ca,ecerasA comprendidas entre las eti3uetas ;"1= 0 ;I"1=A ;"'= 0 ;I"'=A etc. 48asta el n7mero +6A siendo el n7mero indicativo del tamaCo. !l tamaCo ma0or es el correspondiente al n7mero 1. Puedes e*perimentar en el ejemplo 3ue sigueA cam,iando el n7mero para compro,ar el e)ecto 3ue se logra.

Ena eti3ueta mu0 interesante es la de centrado ;C!>#!<= 0 ;IC!>#!<= 4no la soportan todos los navegadoresA aun3ue s5 la ma0or5a de ellos6. >os centra todo lo 3ue est? dentro de ellaA 0a sea te*toA imgenesA etc. #am,i?n tenemos los separadores 48orizontal rules6A 3ue se consiguen con la eti3ueta ;"<= 4no e*iste la correspondiente de cierre6. Con ella se o,tiene una ra0a 8orizontal tan anc8a como la pantallaA 0 con la apariencia de estar em,utida so,re el )ondoA como se puede o,servar a continuacinG Prctica 1. !n el procesador de te*to copiamos lo siguienteG
<HTML> <HEAD> <TITLE> Mi pagina del #e$ % & </TITLE> </HEAD> <BODY> <H&> <'E(TE)> *+i,e+a pagina </'E(TE)> </H&> <H)>

E ta e ,i p+i,e+a pagina- aunque todavia e ,u. en/illa0 'o,o el lengua1e HTML no e di2i/il- p+onto e ta+e en /ondi/ione de 3a/e+ /o a ,a inte+e ante 0 <*> Aqui va un egundo pa++a2o0 </BODY>

Pgina + de 48

Universidad de Guadalajara Coordinacin General del Sistema para la Innovacin del Aprendizaje Coordinacin de Programas en Red y Educacin a Distancia
</HTML>

Guardamos el )ic8ero en el procesador de te*tos con el nom,re de mipag1.8tml 0 lo cargamos en el navegador. !ste ser el resultado.

2. Dando forma al texto

Como 8emos visto en el ejemplo del cap5tulo anteriorA cuando 3ueremos poner un te*to sin ninguna caracter5sca especialA lo ponemos directamente. EnicamenteA la separacin entre prra)os 4dejando una l5nea en ,lanco6 la conseguimos con la eti3ueta ;P=. Si 3ueremos separar los prra)osA o cual3uier otra cosaA pero sin dejar una l5nea en ,lancoA usamos una eti3ueta parecida ;:<= 4,rea9A o romper6. #ampoco tiene eti3ueta de cierre.

Si 3ueremos o,tener m7ltiples l5neas en ,lanco no ,asta con repetir la eti3ueta ;P=A sino 3ue 8a0 3ue com,inarla con la eti3ueta ;:<=. As5 por ejemploA si 3ueremos o,tener cuatro l5neas en ,lancoA pondr5amosG
<B)><*> <B)><*> <B)><*> <B)><*>

Pgina 1 de 48

Universidad de Guadalajara Coordinacin General del Sistema para la Innovacin del Aprendizaje Coordinacin de Programas en Red y Educacin a Distancia Al escri,ir el te*toA si ponemos ms de un espacio en ,lanco entre dos pala,ras o,servamos 3ue el navegador slo reconoce uno de ellos. Si 3ueremos )orzarle a 3ue lo 8agaA de,emos poner el cdigo MNn,spDM 4nonO,rea9ing space6. Para destacar alguna parte del te*to se pueden usarG
<B> . </B> pa+a pone+ algo en neg+ita 4$old50 <I> . </I> pa+a pone+ algo en /u+ iva 4itali/50

Ftra eti3ueta interesante es ;P<!= 0 ;IP<!=. !l te*to 3ue se encuentre entre ella estar pre)ormateadoA es decir 3ue aparecer como si 8u,iera sido escrito con una m3uina de escri,irA con una )uente de espaciado )ijo 4tipo Courier6. Adems se respetarn los espacios en ,lanco 0 retornos del carroA tal como esta,an en nuestro documento "#$% 4lo cual no ocurre normalmenteA como 8emos visto anteriormente6. !s mu0 apropiada para con)eccionar ta,las 0 otros documentos similares. Con la eti3ueta ;##= 0 ;I##= conseguimos tam,i?n 3ue el te*to tenga un tamaCo menor 0 la apariencia de los caracteres de una m3uina de escri,ir 4t0peBriter6. %a di)erencia con la anterior es 3ue no pre)ormatea el te*toA sino 3ue 7nicamente cam,ia su apariencia. %a eti3ueta ;:%FCPQEF#!= 0 ;I:%FCPQEF#!= se utiliza para destacar una cita te*tual dentro del te*to general. !n las )rmulas matemticas puede interesar poder escri,ir 5ndices 0 su,5ndicesA 3ue se consiguen con las eti3uetas ;SEP= ;ISEP= 0 ;SE:= ;ISE:= respectivamente. As5A por ejemploG m' se consigue de la siguiente maneraG m;SEP=';ISEP= v* se consigue conG v;SE:=*;ISE:= A menudo nos interesar presentar las cosas en )orma de listas. Podemos escoger entre tres tipos distintosG 1.%istas desordenadas 4no numeradas6 '.%istas ordenadas 4numeradas6 .%istas de de)inicin. %as listas desordenadas 4unordered lists6 sirven para presentar cosas 3ueA por no tener un orden determinadoA no necesitan ir precedidas por un n7mero. Su estructura es la siguienteG
<6L> <LI> 6na /o a <LI> Ot+a /o a <LI> Ot+a , <LI> Et/0 </6L>

Pgina 8 de 48

Universidad de Guadalajara Coordinacin General del Sistema para la Innovacin del Aprendizaje Coordinacin de Programas en Red y Educacin a Distancia

!s decirA toda la lista est dentro de la eti3ueta ;E%= 0 ;IE%=A 0 luego cada cosa va precedida de la eti3ueta ;%I= 4list item6. !l resultado de lo anterior es el siguienteG

Se puede anidar una lista dentro de otra. Por ejemploG ;E%= ;%I= $am5)eros ;%I= Peces ;E%= ;%I= Sardina ;%I= :acalao ;IE%= ;%I= Aves ;IE%=

%as listas ordenadas 4ordered lists6 sirven para presentar cosas en un orden determinado. Su estructura es mu0 similar a la anterior. %a di)erencia estri,a en 3ue en el resultado aparecer automticamente un n7mero correlativo para cada cosa. ;F%= ;%I= Primera cosa ;%I= Segunda cosa ;%I= #ercera cosa ;%I= !tc. ;IF%=

Al igual 3ue las listas desordenadasA tam,i?n se pueden anidar las listas ordenadas.

Pgina . de 48

Universidad de Guadalajara Coordinacin General del Sistema para la Innovacin del Aprendizaje Coordinacin de Programas en Red y Educacin a Distancia !l tercer tipo lo )orman las listas de definicin. Como su nom,re indicaA son apropiadas para glosarios 4o de)iniciones de t?rminos6. #oda la lista de,e ir englo,ada entre las eti3uetas ;(%= 0 ;I(%=. L a di)erencia de las dos 3ue 8emos vistoA cada rengln de la lista tiene dos partesG 1. !l nom,re de la cosa a de)inir A 3ue se consigue con la eti3ueta ;(#= 4de)inition term6 '. %a de)inicin de dic8a cosaA 3ue se consigue con la eti3ueta ;((= 4de)inition de)inition6. ;(%= ;(#= Ena cosa a de)inir ;((= %a de)inicin de esta cosa ;(#= Ftra cosa a de)inir ;((= %a de)inicin de esta otra cosa ;I(%=

Comentarios no visibles en la pantalla

A veces es mu0 7til escri,ir comentarios en el documento "#$% so,re el cdigo 3ue escri,imosA 3ue nos pueden servir para recordar posteriormente so,re lo 3ue 8icimosA 0 3ue no 3ueremos 3ue se vean en pantalla. !sto se consigue encerrando dic8os comentarios entre estos dos s5m,olosG ;ROO 0 OO= !jemploG
<7%% E to e %%> un /o,enta+io al /8digo que no e ve+ en pantalla

Prctica ' !n el procesador de te*tos copiamosG

<HTML> <HEAD> <TITLE> Mi pagina del #e$ % 9 </TITLE> </HEAD> <BODY> <'E(TE)> <H&> Mi a2i/ione </H&>

Pgina 1- de 48

Universidad de Guadalajara Coordinacin General del Sistema para la Innovacin del Aprendizaje Coordinacin de Programas en Red y Educacin a Distancia
</'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/e to </6L> <LI> La ,u i/a </6L> La ,u i/a que ,a ,e gu ta e <I> 4en o+den de p+e2e+en/ia5; </I> <OL> <LI> El +o/< <LI> El 1a!! <LI> La ,u i/a /la i/a </OL> </BODY> </HTML>

Guardamos el )ic8ero de te*to con un nom,re cual3uiera 0 la e*tensin .8tml 0 lo cargamos en el navegador. !ste es el resultado.

Pgina 11 de 48

Universidad de Guadalajara Coordinacin General del Sistema para la Innovacin del Aprendizaje Coordinacin de Programas en Red y Educacin a Distancia

3. Enlaces con otras pginas

%a caracter5stica 3ue ms 8a in)luido en el espectacular ?*ito del @e, 4o tela de araCa6 8a sidoA aparte la de su carcter multimediaA la posi,ilidad de unir los distintos documentos repartidos por todo el mundo por medio de enlaces 8iperte*to.

Estructura de los enlaces

!n generalA los enlaces tienen la siguiente estructuraG ;A "<!/SM***M= 000 ;IA= donde *** es el destino del enlace 4F,s?rvese las comillas6. 000 es el te*to indicativo en la pantalla del enlace 4con un color especial 0 generalmente su,ra0ado6

Tipos de enlaces
2amos a distinguir cuatro tipos de enlacesG a6 ,6 c6 d6 !nlaces dentro de la misma pgina !nlaces con otra pgina nuestra !nlaces con una pgina )uera de nuestro sistema !nlaces con una direccin de email

a6 !nlaces dentro de la misma pgina A vecesA en el caso de documentos 4o pginas6 mu0 e*tensosA nos puede interesar dar un salto desde una posicin a otra determinada. !n este casoA lo 3ue antes 8emos llamado HHHA es decirA el destino del enlaceA en este caso el sitio dentro de la pgina a donde 3ueremos saltarA se sustitu0e por Tmarca 4la pala,ra marca puede ser cual3uier pala,ra 3ue 3ueramos6. %o 3ue 8emos llamado antes LLL es la pala,ra 4o pala,ras6 3ue aparecern en la pantalla en color 4en )orma de 8iperte*to6. Su estructura esA entoncesG
<A H)E=>?@,a+/a?> YYY </A>

L en el sitio e*acto a donde 3ueremos saltarA de,emos poner la siguiente eti3uetaG

<A (AME>?,a+/a?> </A>

Por ejemploA si 3uiero saltar desde a3u5 a la pantalla )inalA pongo la siguiente eti3uetaG
<A H)E=>?@2inal?> *ul a pa+a i+ al 2inal</A>

L en el )inal del documento 8e puesto esta otra eti3uetaG

<A (AME>?2inal?> </A>

Pgina 1' de 48

Universidad de Guadalajara Coordinacin General del Sistema para la Innovacin del Aprendizaje Coordinacin de Programas en Red y Educacin a Distancia ,6 !nlaces con otra pgina nuestra Puede ser 3ue tengamos una sola pgina. Pero lo ms )recuente es 3ue tengamos varias pginasA una inicial 4o principal6 0 otras conectadas a ellaA e incluso entre ellas mismas. Supongamos 3ue 3ueremos enlazar con la pgina creada en el ejemplo del cap5tulo anteriorA 3ue la 8emos llamado mipag'.8tml. !n este casoA simplemente sustituimos lo 3ue 8emos llamado HHH 4el destino del enlace6 por el nom,re del )ic8eroG
<A H)E=>?,ipag903t,l?> E1e,plo del /aptulo 9 </A>

Si 3ueremos 3ue va0a a un sitio concreto de otra pgina nuestra en vez de ir al principio de la pginaA adonde va por de)ectoA en ese sitio tenemos 3ue colocar una marca 4v?ase la seccin anterior6A 0 completar el enlace con la re)erencia a esa marca. Ena o,servacin importanteG !sto0 suponiendo 3ue la pgina en la 3ue esto0 escri,iendo esta eti3ueta 0 la otra pgina a la 3ue 3uiero saltar estn en el mismo directorio. Por3ue pudiera ocurrir 3ue 8e organizado mi sitio del @e, con un directorio principalA 0 otros su,directorios au*iliares. Si la pgina a la 3ue 3uiero saltar estA p. ej. en el su,directorio su,dirA entonces en la eti3ueta tendr5a 3ue 8a,er puesto Msu,dirImipag'.8tmlM. L a la inversaA si 3uiero saltar desde una pgina a otra 3ue est en un directorio anteriorA en la eti3ueta tendr5a 3ue 8a,er puesto M..Imipag'.8tmlM. !sos dos puntos 8ace 3ue se dirija al directorio anterior. F,s?rvese 3ue se de,e utilizar el s5m,olo I para indicar los su,directoriosA 0 no este otro UA 3ue es propio 7nicamente de @indoBs. Si nos 3ueremos evitar todas estas complicacionesA podemos tener todo junto en un 7nico directorioA pero esto tiene el inconveniente de 3ue est? todo ms desordenadoA 0 sean ms di)5ciles de 8acer las )uturas modi)icaciones. c6 !nlaces con una pgina )uera de nuestro sistema Si 3ueremos enlazar con una pgina 3ue est? )uera de nuestro sistema 4es decirA 3ue est? en un servidor distinto al 3ue soporta nuestra pgina6A es necesario conocer su direccin completaA o E<% 4Eni)orm <esource %ocator6. !l E<% podr5a serA adems de la direccin de una pgina del @e,A una direccin de )tpA gop8erA etc. Ena vez conocida la direccin 4o E<%6A lo colocamos en vez de lo 3ue 8emos llamado anteriormente *** 4el destino del enlace6. Si 3ueremos enlazar con la pgina de >etscape 4cu0o E<% esG 8ttpGII8ome.netscape.comI6A la eti3ueta ser5aG
<A H)E=>?3ttp;//3o,e0net /ape0/o,/?> *gina ini/ial de (et /ape </A>

Pgina 1 de 48

Universidad de Guadalajara Coordinacin General del Sistema para la Innovacin del Aprendizaje Coordinacin de Programas en Red y Educacin a Distancia !s mu0 importante copiar estas direcciones correctamente 4respetando las ma07sculas 0 min7sculasA pues los servidores E>IH s5 las distinguen6 d6 !nlaces con una direccin de email !n este casoA sustituimos lo 3ue se 8a llamado antes *** 4el destino del enlace6 por mailtoG seguido de la direccin de email. %a estructura de la eti3ueta esG
<A H)E=>?,ailto; di+e//i8n de e,ail?> TeAto del enla/e </A>

!s decirA es conveniente poner tam,i?n en el te*to del enlace la direccin de email.

Prctica 3.
!n el procesador de te*tos copiamosG
<HTML> <HEAD> <TITLE> Mi pagina del #e$ % B </TITLE> </HEAD> <BODY> <'E(TE)> <H&> Mi pagina 2avo+ita </H&> </'E(TE)> <H)> E ta on ,i pagina 2avo+ita ; <*><A H)E=>?3ttp;//3o,e0net /ape0/o,?> (et /ape </A> <B)> <A H)E=>?3ttp;//CCC0,i/+o o2t0/o,?> Mi/+o o2t </A> <B)> <A H)E=>?3ttp;//CCC0.a3oo0/o,?> Ya3oo7 </A> </BODY> </HTML>

Guardamos el )ic8ero de te*to con el nom,re mipag .8tml 0 lo cargamos en el navegador. !ste es el resultadoG

Pgina 14 de 48

Universidad de Guadalajara Coordinacin General del Sistema para la Innovacin del Aprendizaje Coordinacin de Programas en Red y Educacin a Distancia

. Imgenes
%a eti3ueta 3ue nos sirve para incluir imgenes en nuestras pginas del @e, es mu0 similar a la de enlaces a otras pginasA 3ue 8emos visto en el cap5tulo anterior. %a 7nica di)erencia es 3ueA en lugar de indicar al programa navegador el nom,re 0 la localizacin de un documento de te*to "#$% para 3ue lo cargueA se le indica el nom,re 0 la localizacin de un )ic8ero 3ue contiene una imagen. %a estructura de la eti3ueta esG
<IMD :)'>?i,agen0gi2?>

Con el comando I$G S<C 4image sourceA )uente de la imagen6 se indica 3ue se 3uiere cargar una imagen llamada imagen.gi) 4o el nom,re 3ue tenga6. (entro de la eti3ueta se pueden aCadir otros comandosA tal como A%#
<IMD :)'>?i,agen0gi2? ALT>?de /+ip/i8n?>

Con el comando A%# se introduce una descripcin 4una pala,ra o una )rase ,reve6 indicativa de la imagen. !ste comandoA 3ue en principio se puede omitirA es en ,ene)icio de los 3ue accedan a nuestra pgina con un programa navegador en )orma de te*to slo. La 3ue no son capaces de ver la imagenA por lo menos pueden 8acerse una idea so,re ella. Pero no es slo por esto. "a0 casosA como veremos ms adelanteA en los 3ue se utiliza una imagen como enlace a otra pgina. Si se omitiera este comandoA los 3ue utilizan dic8os navegadores no podr5an de ninguna manera acceder a esas pginas. Con respecto a la localizacin del )ic8ero de esa imagenA se puede decir a3u5 lo mismo 3ue en el cap5tulo anterior re)erente a los enlaces. Al igual 3ue una pgina con la 3ue 3ueremos enlazar puede estar )uera de nuestro sistemaA 4en cu0o caso 8a,5a 3ue indicar su E<% o direccin completa6A podemos cargar una imagen 3ue no est? en nuestro sistema siguiendo el mismo m?todoA es decirA indicar en la eti3ueta el E<% completo de la imagen. Aun3ue esto no es mu0 aconseja,leA pues alargar5a innecesariamente el tiempo de carga de nuestra pgina. %as imgenes de,en estar guardadas en un )ormato de )ic8ero especial llamado GI/. 4"a0 tam,i?n otro )ormato ms avanzadoA del 3ue se 8a,lar ms adelante6. !ste )ormato GI/ almacena las imgenes con un m*imo de '&+ coloresA en )orma comprimida. "a0 programas gr)icos 4como el Paint S8op Pro para el PCA o el Grap8ic Converter para el $ac6 3ue nos permiten guardar las imgenes en este )ormatoA adems de cumplir otras muc8as tareas de manipulacin de las mismas. En aspecto mu0 importante a tener en cuenta es el tamaCo de las imgenesA pues una imagen grande supone un )ic8ero grandeA 0 esto puede resultar en un tiempo e*cesivo de carga.

Pgina 1& de 48

Universidad de Guadalajara Coordinacin General del Sistema para la Innovacin del Aprendizaje Coordinacin de Programas en Red y Educacin a Distancia Para elegir la posicin de la imagen con respecto al te*to 8a0 distintas posi,ilidades. %a ms sencilla es colocarla entre dos prra)osA con un titular a un lado. %os navegadores ms actuales 4como el >etscape >avigator 0 el $icroso)t Internet !*plorer6 permiten 3ue el te*to pueda rodear a la imagen 4como se ver ms adelanteA en el Cap5tulo 86. (e momento nos vamos a limitar a escoger la posicin del titular con respecto a la imagen 4si es 3ue 3ueremos ponerle un titularA claro est6. Se puede poner arri,aA en medio o a,ajo del lado de la imagen. Para ello se aCade el comando A%IG> a la eti3uetaA de la siguiente maneraG
<IMD :)'>?i la0gi2? ALID(>TO*> Titula+ alineado a++i$a <IMD :)'>?i la0gi2? ALID(>MIDDLE> Titula+ alineado en ,edio <IMD :)'>?i la0gi2? ALID(>BOTTOM> Titula+ alineado a$a1o

Ftra posi,ilidad mu0 interesante es la de utilizar una imagen como enlace a otra pgina. Para estos casos se utilizan generalmente imgenes pe3ueCas 4iconos6A aun3ue se puede usar cual3uier tipo de imagen. Seg7n vimos en el cap5tulo anteriorA la estructura general de un enlace esG
<A H)E=>?AAA?> ... </A>

!n este caso sustituimos *** por el nom,re del )ic8ero de la pgina a la 3ue 3ueremos acceder. L en lugar de 000 ponemos la eti3ueta completa de la imagen 43ue 3ueda as5 englo,ada dentro de la eti3ueta del enlace6 Como ejemplo vamos a utilizar la imagen 48and.gi)6 para acceder al ejemplo prctico del cap5tulo ' 4mipag'.8tml6G
<A H)E=>?,ipag903t,l?><IMD :)'>?3and0gi2?></A>

3ue da como resultadoG Pulsando la imagen compro,amos cmo e)ectivamente enlaza con la pgina deseada. F,s?rvese adems 3ue la imagen est rodeada de un rectgulo del color normal en los enlaces. Si no se desea 3ue aparezca ese rectnguloA 8a0 3ue incluir dentro de la eti3ueta de la imagen el atri,uto :F<(!<S-A es decirG
<A H)E=>?,ipag903t,l?><IMD :)'>?3o,$+e0gi2? BO)DE)>E></A>

Pgina 1+ de 48

Universidad de Guadalajara Coordinacin General del Sistema para la Innovacin del Aprendizaje Coordinacin de Programas en Red y Educacin a Distancia 3ue da como resultadoG

Posicionando el cursor so,re esta 7ltima imagenA compro,amos 3ue act7a tam,i?n como enlace aun3ue carezca del rectngulo de color. !sto puede resultar ms est?tico.

#am,i?n podemos utilizar una imagen para enlazar con otra imagen. !n este caso sustituimos *** 4el destino del enlace6 con el nom,re del )ic8ero de la imagen a la 3ue 3ueremos acceder e 000 4lo 3ue aparece en pantalla como el enlace6 por la eti3ueta completa de la imagen 3ue 3ueremos 3ue aparezca en la pantalla como el enlace de la otra. Por 7ltimoA otra posi,ilidad es la de utilizar un te*to para enlazar con una imagen. !n este caso sustituimos *** 4el destino del enlace6 con el nom,re del )ic8ero de la imagen a la 3ue 3ueremos acceder e 000 4lo 3ue aparece en pantalla como el enlace6 por el te*to. Supongamos 3ue 3ueremos enlazar con la imagen 8and.gi) por medio de un te*toG ;A "<!/SM8and.gi)M= necesitas una manoV ;IA= Que da como resultadoG

En tipo de imgenes del 3ue se 8ace a,undante uso 0 3ue sirven para mejorar la presentacin de la pgina son los iconosA ,otonesA ,arras separadorasA etc. A pesar de su tamaCo o )ormaA son imgenes como cual3uier otra. Por ejemplo utilizamos un ,oton aceptar 0 escri,imos en el sitio correspondienteG Pgina 11 de 48

Universidad de Guadalajara Coordinacin General del Sistema para la Innovacin del Aprendizaje Coordinacin de Programas en Red y Educacin a Distancia
<IMD :)'>?$Fa/epta+0gi2G> E ta linea e ta p+e/edida po+ un $oton a/epta+.

Que resultaG

Prctica 4.
Primeramente es necesario o,tener tres imgenes Gi)A 3ue puede capturar de alguna pgina en internet solo presionando el ,oton derec8o del mouseA 0 guardarlas en el mismo directorio en el 3ue se guardar el )ic8ero de te*to 3ue se va a crear a continuacinA junto con los de los cap5tulos anteriores. !n el procesador de te*tos copiamosG ;"#$%= ;"!A(= ;#I#%!= $i pagina del @e, O 4 ;I#I#%!= ;I"!A(= ;:F(L= ;C!>#!<= ;"1= $i pagina del @e, ;I"1= ;IC!>#!<= ;"<= !sta es mi pagina del @e,. >o es mu0 e*tensaA pero tiene todos los elementos ,asicos. !spero 3ue os guste. Poco a poco le ire anadiendo mas cosas interesantes. ;P= ;A "<!/SMmipag'.8tmlM= ;I$G S<CSMimagen1.gi)M= ;IA= $is a)iciones ;P= ;A "<!/SMmipag .8tmlM= ;I$G S<CSMimagen'.gi)M= ;IA= $is paginas )avoritas ;C!>#!<= ;" = En lugar ideal para mis vacaciones ;I" = ;I$G S<CSMimagen .gi)M A%#SMislaM= ;IC!>#!<= ;I:F(L= ;I"#$%=

Pgina 18 de 48

Universidad de Guadalajara Coordinacin General del Sistema para la Innovacin del Aprendizaje Coordinacin de Programas en Red y Educacin a Distancia Guardamos el )ic8ero de te*to con el nom,re mipag4.8tml 0 lo cargamos en el navegador. !ste es el resultado.

!. "aracteres especiales
!*isten algunas limitaciones para escri,ir el te*to. Ena de ellas es de,ido a 3ue las eti3uetas se )orman como un comando escrito entre los s5m,olos M;M 0 M=M. Por tantoA si se 3uisieran escri,ir estos caracteres como parte normal del te*toA dar5a esto lugar a una am,igWedadA 0a 3ue el programa navegador podr5a interpretarlos como el comienzo o )inal de una eti3uetaA en vez de un carcter ms del te*to. Para resolver este pro,lemaA e*isten unos cdigos para poder escri,ir estos caracteres 0 otros relacionados con las eti3uetas. NltD para ; 4less t8anA menor 3ue6 NgtD para = 4greater t8anA ma0or 3ue6 NampD para N 4ampersand6 N3uotD para M 4dou,le 3uotation6 Como se veA estos cdigos empiezan siempre con el signo N 0 aca,an siempre con D (e una manera similarA e*isten cdigos para escri,ir letras espec5)icas de distintos idiomas. "a0 muc8os de ellosA peroA lgicamenteA los 3ue ms nos interesan son los propios del castellano 4las vocales acentuadasA la C 0 los signos X 0 Y 6 %os cdigos de las vocales acentuadas se )orman comenzando con NA seguido de la vocal en cuestinA seguido de la pala,ra acute 4aguda6 0 terminando con el signo D NaacuteD para la NiacuteD para la 5 NeacuteD para la ? NoacuteD para la

Pgina 1. de 48

Universidad de Guadalajara Coordinacin General del Sistema para la Innovacin del Aprendizaje Coordinacin de Programas en Red y Educacin a Distancia NuacuteD para la 7 N!acuteD para la [ NFacuteD para la ] !l resto de los cdigos sonG NntildeD para la C NuumlD para la W NT1.1D para X N>tildeD para la _ NEumlD para la ` NT1+1D para Y NAacuteD para la Z NIacuteD para la \ NEacuteD para la ^

Prctica 5.
Como ejercicio de este cap5tulo vamos a sustituir en el ejemplo prctico del cap5tulo anterior 4mipag4.8tml6 las vocales acentuadas por sus correspondientes 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)> E ta e ,i pHaa/uteIgina del #e$0 (o e ,u. eAten a- pe+o tiene todo lo ele,ento $Haa/uteI i/o 0 E pe+o que o gu te0 *o/o a po/o le i+Hea/uteI aHntildeIadiendo ,Haa/uteI /o a inte+e ante 0 <*> <A H)E=>?,ipag903t,l?> <IMD :)'>?3o,$+e0gi2?> </A> Mi a2i/ione <*> <A H)E=>?,ipagB03t,l?> <IMD :)'>?/a a0gi2?> </A> Mi pHaa/uteIgina 2avo+ita <'E(TE)> <HB> 6n luga+ ideal pa+a ,i va/a/ione </HB> <IMD :)'>?i la0gi2? ALT>?i la?> </'E(TE)> </BODY> </HTML>

Pgina '- de 48

Universidad de Guadalajara Coordinacin General del Sistema para la Innovacin del Aprendizaje Coordinacin de Programas en Red y Educacin a Distancia

#. $ondos
Se puede cam,iar el )ondo de dos maneras distintasG a6 Con un color uni)orme ,6 Con una imagen

a) Fondos con un color uniforme

Se consigue aCadiendo el comando :GCF%F< a la eti3ueta ;:F(L= 4situada al principio del documento6A de la siguiente maneraG
<BODY BD'OLO)>?@KKYYLL?>

dondeG HH es un n7mero indicativo de la cantidad de color rojo LL es un n7mero indicativo de la cantidad de color verde aa es un n7mero indicativo de la cantidad de color azul !stos n7meros estn en numeracin 8e*adecimal. !sta numeracin se caracteriza por tener 1+ d5gitos 4en lugar de los diez de la numeracin decimal 8a,itual6. !stos d5gito sonG -1' 4&+18.A:C(!/

!s decirA 3ue en nuestro casoA el n7mero menor es el -- 0 el ma0or el //. As5A por ejemploA el color rojo es el T//----A por3ue tiene el m*imo de rojo 0 cero de los otro dos colores . %os colores primarios sonG T//---- O <ojo T--//-- O 2erde T----// O Azul Ftros colores sonG T////// O :lanco T------ O >egro T////-- O Amarillo

Pgina '1 de 48

Universidad de Guadalajara Coordinacin General del Sistema para la Innovacin del Aprendizaje Coordinacin de Programas en Red y Educacin a Distancia

Para 8acer un color ms oscuroA 8a0 3ue reducir el n7mero de su componenteA dejando los otros dos invaria,les. As5A el rojo T//---- se puede 8acer ms oscuro con TAA----A o a7n ms oscuro con T&&----. Para 8acer 3ue un color tenga un tono ms suave 4ms pastel6A se de,en variar los otros dos colores 8aci?ndolos ms claros 4n7mero ms alto6A en una cantidad igual. As5A podemos convertir el rojo en rosa con T//1-1-.

Colores del te*to 0 de los enlaces Si no se variasen los colores 8a,ituales del te*to 0 de los enlaces 4negro 0 azulA respectivamente6A podr5a ocurrir 3ue su lectura contra un )ondo oscuro )uese mu0 di)icultosaA o incluso imposi,leA si el )ondo )uese precisamente negro o azul. Para evitar estoA se pueden escoger los colores del te*to 0 de los enlacesA aCadiendo a la eti3ueta 4si se desea6 los siguientes comandosG #!H# O color del te*to %I>P O color de los enlaces 2%I>P O color de los enlaces visitados A%I>P O color de los enlaces activos 4el 3ue ad3uieren en el momento de ser pulsados6 %os cdigos de los colores son los mismos 3ue los 3ue se 8an visto anteriormente. %a eti3uetaA con todas sus posi,ilidadesA ser5aG
< BODY BD'OLO)>?@KKYYLL? TEKT>?@KKYYLL? LI(M>?@KKYYLL? NLI(M>?@KKYYLL? ALI(M>?@KKYYLL?>

!jemplo. !l comando #!H# e*plicado anteriormente 43ue va englo,ado dentro de la eti3ueta ;:F(L=6 cam,ia el color de la totalidad del te*to de la pgina. #anto el >etscape >avigator 'A como el $icroso)t !*plorer soportan una eti3ueta de color de la )uente con la 3ue se puede cam,iar slo una parte del te*toG
<=O(T 'OLO)>?@==EEEE?> E te teAto e de /olo+ +o1o </=O(T>

Pgina '' de 48

Universidad de Guadalajara Coordinacin General del Sistema para la Innovacin del Aprendizaje Coordinacin de Programas en Red y Educacin a Distancia

b) Fondos con una imagen

!l )ondo de una pgina puede ser tam,i?n una imagenA 0a sea en )ormato GI/ o bP!G. !sta imagen se repite por toda la pginaA de una manera anloga al tapiz de @indoBs. %a estructura de la eti3ueta esG
<BODY BA'MD)O6(D>?i,agen0gi2?>

o ,ienG
<BODY BA'MD)O6(D>?i,agen01pg?>

>o todos los navegadores soportan este )ormato "a0 3ue prever la posi,ilidad de 3ue 3uien acceda a nuestra pgina 8a0a des8a,ilitado la carga automtica de imgenesA en cu0o caso tampoco cargar5a la imagen 3ue sirve como )ondo 0 slo ver5a el )ondo estndar de color gris. !sto podr5a ser mu0 perjudicial si 8emos escogido unos colores para el te*to 0 los enlaces 3ue no contrastan ,ien con ese )ondogris. %a solucin a este pro,lema es poner dentro de la eti3ueta ;:F(L= los dos comandos :ACPG<FE>( 0 :GCF%F< 4en este orden6A teniendo cuidado en escoger un color uni)orme de )ondo parecido al de la imagen.

Prctica 6.
2amos a poner como )ondo la imagen nu,es.jpgA junto con un )ondo alternativo de color azul claro 0 8acer 3ue el te*to sea de color rojo oscuro. Para ello es necesario antes capturar la imagen 0 guardarla en el mismo directorio en donde vamos a guardar el )ic8ero 3ue vamos a crear. Cargamos en el editor de te*tos mipag .8tml 0 sustituimos la eti3ueta ;:F(L= por esta otraG ;:F(L :ACPG<FE>(SMnu,es.jpgM :GCF%F<SMTCC////M #!H#SMTAA----M=

Pgina ' de 48

Universidad de Guadalajara Coordinacin General del Sistema para la Innovacin del Aprendizaje Coordinacin de Programas en Red y Educacin a Distancia

Guardamos este )ic8ero como mipag1.8tml 0 lo cargamos en el navegador para visualizarlo. !ste es el resultado G

%. Ta&las
"asta 3ue no se empezaron a usar las ta,lasA la 7nica manera de ta,ular las cosas era utilizar la eti3ueta de pre)ormateadoA con la 3ue es necesario poner manualmente los espacios en ,lanco para 3ue 3uede todo alineado )ormando )ilas 0 columnasA con un resultado mu0 poco est?tico.

Estructura de una tabla

2amos a ver ordenadamente 4de )uera 8acia dentro6 las eti3uetas necesarias para con)eccionar las ta,las. 1. %a eti3ueta generalA 3ue englo,a a todas las dems es ;#A:%!= 0 ;I#A:%!=. !s decirG
<TABLE> [+e to de la etiqueta " </TABLE>

Para 3ue los datos va0an dentro de cajas )ormadas por un ,orde tenemos 3ue aCadir el atri,uto :F<(!< a la eti3uetaA es decirG <TABLE BO)DE)> [+e to de la etiqueta " </TABLE> '. !n el siguiente nivelA dentro de la anteriorA estn las eti3uetas para )ormar cada )ila 4roB6 de la ta,laA 3ue son ;#<= 0 ;I#<=. "a0 3ue repetirlas tantas veces como )ilas 3ueremos 3ue tenga la ta,la. !s decirA para una ta,la con dos )ilasA ser5aG

Pgina '4 de 48

Universidad de Guadalajara Coordinacin General del Sistema para la Innovacin del Aprendizaje Coordinacin de Programas en Red y Educacin a Distancia
<T)> [etiqueta </T)> <T)> [etiqueta </T)> de la de la di tinta di tinta /elda /elda de la p+i,e+a 2ila" de la egunda 2ila"

. !n el 7ltimo nivel 4dentro de las anteriores6 estn las eti3uetas de cada celdaA 3ue son ;#(= 0 ;I#(=A 3ue englo,an el contenido de cada celda concreta 4te*toA imgenesA etc.6. "a0 3ue repetirla tantas veces como celdas 3ueremos 3ue 8a0a en esa )ila. 2eamos un ejemplo de una ta,la con dos )ilas. Cada )ila va a tener tres celdas. (entro de cada celda vamos a poner un te*to indicativo de la posicin de dic8a celdaG ;#A:%! :F<(!<= ;#<= ;#(=)ila1Ocelda1;I#(= ;#(=)ila1Ocelda';I#(= ;#(=)ila1Ocelda ;I#(= ;I#<= ;#<= ;#(=)ila'Ocelda1;I#(= ;#(=)ila'Ocelda';I#(= ;#(=)ila'Ocelda ;I#(= ;I#<= ;I#A:%!= Que resultaG

Titular de la tabla

Pgina '& de 48

Universidad de Guadalajara Coordinacin General del Sistema para la Innovacin del Aprendizaje Coordinacin de Programas en Red y Educacin a Distancia Se puede aCadir un titular 4caption6 a la ta,laA es decir un te*to situado encima de la ta,la 3ue indica cul es su contenido. Se consigue con la eti3ueta ;CAP#IF>= 0 ;ICAP#IF>=.

ariando el espesor de los bordes

!l atri,uto :F<(!< 4visto ms arri,a6 pone por de)ecto un ,orde de espesor igual a la unidad. Pero se puede 8acer 3ue este ,orde sea tan grueso como 3ueramosA poniendoG
<TABLE BO)DE)>nO,e+o de eado>

Si en el ejemplo anterior ponemosG ;#A:%! :F<(!<S&=

Celdas de cabecera
Adems de las celdas 3ue contienen datos normalesA podemos ponerA si nos convieneA celdas de ca,ecera 48eader6A 3ue se distinguen por estar el te*to de dic8as celdas en negrita 0 centrado. !sto se consigue con la eti3ueta ;#"= 0 ;I#"= 4en vez de la normal ;#(= 0 ;I#(=6 2amos a aCadirA en el ejemplo anteriorA una )ila de estas celdas de ca,eceraA antes de las otras dos 3ue 0a e*ist5anG ;#<= ;#"=Columna 1;I#"= ;#"=Columna ';I#"= ;#"=Columna ;I#"= ;I#<= Que resultaG

Contenido de las celdas

Pgina '+ de 48

Universidad de Guadalajara Coordinacin General del Sistema para la Innovacin del Aprendizaje Coordinacin de Programas en Red y Educacin a Distancia "asta a8oraA en todos los ejemplos se 8a puesto un te*to normal dentro de las distintas celdas. Pero se puede poner en ellas cual3uier otro elemento de los 3ue van en un documento "#$%A como imgenesA enlacesA etc. >o 8a0 ms 3ue poner dentro de la eti3ueta de la celda la eti3ueta correspondiente a una imagenA un enlaceA etc. !jemplo con una imagenG
<TABLE BO)DE)>9> <T)><TD><IMD :)'>?$a$e0gi2?></TD></T)> </TABLE>

!jemplo con un enlaceG

<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

>ormalmenteA el contenido de una celda est alineado a la iz3uierda. Pero se puede cam,iar esto aCadiendo dentro de la eti3ueta de la celda los siguientes atri,utosG
<TD <TD <TH po+ ALID(>'E(TE)> Al /ent+o </TD> ALID(>)IDHT> A la de+e/3a </TD> ALID(>LE=T> 'a$e/e+a a la i!quie+da </TH> 4)e/uP+de e que de2e/to e tn /ent+ada 5

!l alineamiento por de)ecto en el sentido vertical es en el medio. #am,i?n se puede cam,iarAaCadiendo dentro de la eti3ueta de la celda los siguientes atri,utosG
<TD NALID(>TO*> A++i$a </TD> <TD NALID(>BOTTOM> A$a1o </TD>

ariando las dimensiones de la tabla

!l navegador se encarga normalmente de dimensionar el tamaCo total de la ta,la de acuerdo con el n7mero de )ilasA de columnasA por el contenido de las celdasA espesor de los ,ordesA etc. A veces nos puede convenir )orzarle para 3ue la ta,la tenga unas dimensiones totales ma0ores 3ue las 3ue le correspondenA tanto en anc8ura como en longitud. !sto se consigue aCadiendo dentro de la eti3ueta de la ta,la los atri,utos @I(#" 0 "!IG"# igual a un porcentaje de la dimensin de la pantallaA o a una ci)ra 3ue e3uivale al n7mero de pi*els. Pgina '1 de 48

Universidad de Guadalajara Coordinacin General del Sistema para la Innovacin del Aprendizaje Coordinacin de Programas en Red y Educacin a Distancia Por ejemplo ponemosG F ponemosG
<TABLE HEIDHT>9EE>

<TABLE #IDTH>QER>

Celdas !ue abarcan a otras varias

A veces puede interesarnos 3ue una celda se e*tienda so,re otras varias. !sto se consigue aCadi?ndo dentro de la eti3ueta de la celda los atri,utos CF%SPA>Sn7mero para e*tenderse so,re un n7mero determinado de columnasA o <F@SPA>Sn7mero para e*tenderse verticalmente so,re un n7mero determinado de )ilas. Por ejemploA en la ta,la vamos a aCadir una )ila con una sola celdaA 3ue a,arca a dos columnasG
<T)> <TD 'OL:*A(>9> 'elda o$+e 9 /olu,na </TD> <T)>

Color de fondo en las tablas

Podemos conseguir 3ue las ta,las tengan un color de )ondoA siguiendo un procedimiento totalmente anlogo al empleado para 3ue una pgina tenga un color de )ondo uni)orme 4seg7n vimos en el cap5tulo +6. Para ello de,emos utilizar el atri,uto :GCF%F<SMTHHLLaaMA visto en dic8o cap5tulo. Se puede conseguirG 1.Que la totalidad de la ta,la tenga un color de )ondo. Para elloA colocamos el atri,uto

Pgina '8 de 48

Universidad de Guadalajara Coordinacin General del Sistema para la Innovacin del Aprendizaje Coordinacin de Programas en Red y Educacin a Distancia dentro de la eti3ueta #A:%!. Por ejemploA vamos a 8acer 3ue la ta,la tenga un )ondo verde 4T--//--6G <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> '.Que slamente una celda determinada tenga un color de )ondo. Para elloA colocamos el atri,uto dentro de la eti3ueta de la celda correspondiente. Por ejemploA vamos a 8acer 3ue slo la celda 1 de la )ila 1 tenga un color verdeG
<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>

;TABLE BO)DE)>

.Que la generalidad de las celdas tenga un colorA pero 3ue alguna celda tenga uno particular. !l atri,uto del color general se coloca en la eti3ueta #A:%!A 0 el del color particular en la eti3ueta de la celda en cuestin 4una com,inacin de los dos casos anteriores6. por ejemploA vamos a 8acer 3ue la generalidad de la ta,la sea de color rojo 4T//----6A pero 3ue la celda 1 de la )ila 1 sea de color verde 4T--//--6G
<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

!l !*plorer de $icroso)t soporta la colocacin de imgenes de )ondo en el interior de las ta,lasA de una manera anloga a como se 8ace en una pgina 4seg7n vimos en el cap5tulo +6. Para ello de,emos utilizar el atri,uto:ACPG<FE>(SMimagen.gi)M o :ACPG<FE>(SMimagen.jpgMA visto en dic8o cap5tulo. Si se utiliza dentro de la eti3ueta ;#A:%!= la imagen en cuestin se multiplicar detrs de todas las celdas.

#eparaci$n entre las celdas de una tabla

Pgina '. de 48

Universidad de Guadalajara Coordinacin General del Sistema para la Innovacin del Aprendizaje Coordinacin de Programas en Red y Educacin a Distancia Por de)ectoA la separacin entre las distintas celdas de una ta,la es de dos pi*els. Pero se puede variar esto con el atri,uto C!%%SPACI>GA 3ue se pone dentro de la eti3ueta #A:%!. Por ejemploA para o,tener una separacin de '- pi*els entre celdas ponemosG
<TABLE BO)DE) 'ELL:*A'I(D>9E>

#eparaci$n entre el borde % el contenido dentro de las celdas

Por de)ectoA la separacin entre el ,orde 0 el contenido dentro de las celdas es de un pi*el. Se puede cam,iar esto con el atri,uto C!%%PA((I>GA 3ue se pone dentro de la eti3ueta #A:%!. Por ejemploA para o,tener una separacin de '- pi*els entre el contenido 0 los ,ordesA dentro de cada celdaG
<TABLE BO)DE) 'ELL*ADDI(D>9E>

Prctica &.
2amos a crear una ta,la de dos )ilasA con una celda cada una. %a primeraA como ca,eceraA con el te*to MEn lugar ideal para mis vacacionesMA 0 la segunda con la imagen isla.gi). Adems vamos a alargar a lo anc8o la ta,la al 1&c de la pantalla. Para elloG
<*> <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 :)'>?i la0gi2? ALT>?i la?> </TD> </T)> </TABLE>

!l resultado esG

Pgina - de 48

Universidad de Guadalajara Coordinacin General del Sistema para la Innovacin del Aprendizaje Coordinacin de Programas en Red y Educacin a Distancia

'. $ormularios
%a manera general para 3ue los lectores de nuestra pgina se puedan comunicar con nosotros es por medio de un enlace a nuestra direccin de emailA con lo 3ue reci,ir5amos un email convencional. Pero puede ser 3ue lo 3ue necesitemos sea slamente una respuesta concreta a unas opciones 3ue presentaremos nosotros mismosA o un comentario del usuarioA para lo 3ue le suministraremos un espacio en donde introducirlo. Se puede 8acer todo estoA adems de otras cosasA utilizando los )ormulariosA con los 3ue se pueden con)eccionar pginas 3ue contengan los elementos necesarios para elloA tal como ,otones de radioA listas de seleccinA cajetines de introduccin de te*to 0 de controlA etc.A como vamos a ver. %os )ormularios permiten 3ue los dems nos env5en la in)ormacin directamente a nosotros o ,ien a nuestro servidorA en donde 8emos instalado un programa 3ue procese esta in)ormacin. Por ejemploA vamos a suponer 3ue 3ueremos crear una lista de correo. %os usuarios pueden introducir sus nom,res 0 direcciones de email 0 pulsar un ,otn de env5o. !sos datos los podemos reci,ir Men ,rutoM en nuestro correoA con los 3ue con)eccionar5amos manualmente dic8a lista de correoA sin necesitar ning7n programa para ello. !ste proceso es el 3ue vamos a comentar en este cap5tulo. %a otra posi,ilidadA de la 3ue 7nicamente se va a 8acer esta mencinA es 3ue 8u,i?ramos instalado en nuestro servidor un programa especial para procesar esos datos 0 aCadirlos a la lista de correoA 0 3ue incluso pudiera devolver automticamente al usuario alg7n tipo de in)ormacin. Para conseguir estoA los )ormularios necesitan ejecutar programas o scripts por medio del CGI 4Common GateBa0 Inter)ace6. !l CGI permite a los )ormularios ser procesados por programas escritos en cual3uier lenguajeA aun3ue los ms usados en Internet son el Perl 0 el C.

Pgina 1 de 48

Universidad de Guadalajara Coordinacin General del Sistema para la Innovacin del Aprendizaje Coordinacin de Programas en Red y Educacin a Distancia >F#AG !l tipo de )ormulario 3ue se descri,e a continuacin podr ser utilizado por la ma0or5a de los navegadoresA con la nota,le e*cepcin del !*plorer 4incluso la versin .-6A por lo 3ue es conveniente suministrar al )inal del )ormularioA como una alternativa para estos casosA un enlace de email ordinario 4ver el Cap5tulo 6

Estructura de un formulario
%a estructura general de un )ormulario esG 1. !ti3ueta de inicioG
<=O)M A'TIO(>?,ailto;di+e//i8nFdeFe,ail? METHOD>?*O:T? E('TY*E>?TEKT/*LAI(?>

'. Cuerpo del )ormularioA con los distintos elementos para poder introducir los datos. . :otones de env5o 0 de ,orrado. 4. !ti3ueta de cierre ;I/F<$= !ti3ueta de inicio !l atri,uto AC#IF> indica la accin 3ue se de,e e)ectuar 0 3ue es 3ue los datos sean enviados por email a la direccin indicada. 4Si 8ici?ramos uso del CGIA ser5a precisamente a3u5 donde indicar5amos su localizacin en el servidorA 3ue 8a,itualmente es el directorio cgiO,inA para 3ue procese los datos6. !l atri,uto $!#"F(SPFS# indica 3ue los datos sean inmediatamente enviados por correo a la direccin de emailA nada ms pulsar el usuario el ,otn de env5o. Con el atri,uto !>C#LP!SM#!H#IP%AI>M se consigue 3ue las respuestas las reci,amos como un )ic8ero de te*toA per)ectamente legi,le 0 sin codi)icar. !lementos para introducir los datos %os vamos a dividir en tres clasesG a6 Introduccin por medio de te*to ,6 Introduccin por medio de men7s c6 Introduccin por medio de ,otones %a introduccin de los datos se consigue por medio de la eti3uetaG
<I(*6T TY*E>?AAA? (AME>?...? NAL6E>?!!!?>

!n dondeG *** es la pala,ra 3ue indica el tipo de introduccin. 000 es el nom,re 3ue le asignamos nosotros a la varia,le de introduccin del dato. Pgina ' de 48

Universidad de Guadalajara Coordinacin General del Sistema para la Innovacin del Aprendizaje Coordinacin de Programas en Red y Educacin a Distancia zzz es la pala,ra asociada a un elemento.
a !ntroduccin "or medio de te#to $una l%nea

!n este caso es ***Ste*tA es decirA I>PE# #LP!SMte*tM. !l atri,uto 2A%E! no procede en este caso. 2amos a poner un ejemploG solicitamos el apellido del 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 resultaG Si el usuario introduce su apellidoA p. ej. <uizA 0 pulsa el ,otn de env5o 43ue veremos ms adelante6A reci,iremos un email su0o con el siguiente te*toG ApellidoS<uiz %a longitud de este )ormulario es por de)ecto de '- caracteres. Se puede variar inclu0endo en la eti3ueta el atri,uto SIa!SMn7meroM. Por otra parteA sea cual sea la longitud del )ormularioA si no se indica nadaA el usuario puede introducir el n7mero de caracteres 3ue 3uiera. Se puede limitar estoA inclu0endo en la eti3ueta el atri,uto $AH%!>G#"SMn7meroM. #am,i?n se puede 8acer 3ue el te*to introducido no sea reconoci,leA es decir 3ue todos los caracteres se representen por asteriscos. :asta con cam,iar en la eti3ueta I>PE# #LP!SMte*tM por I>PE# #LP!SMpassBordM. !n el 7ltimo ejemploA podemos cam,iar la eti3uea correspondiente porG
<I(*6T TY*E>?pa Co+d? (AME>?Apellido? :ILE>?&E? MAKLE(DTH>?&9?>

a&1 !ntroduccin "or medio de te#to $m'lti"les l%neas

Cuando el te*to a introducir puede alcanzar una gran longitudA por ejemplo un comentarioA es conveniente utilizar un )ormulario de te*to de m7ltiples l5neas. !sto se consigue con la eti3ueta de inicioG
<TEKTA)EA (AME>?...? )O#:>?nO,e+o? 'OL:>?nO,e+o?>

Pgina

de 48

Universidad de Guadalajara Coordinacin General del Sistema para la Innovacin del Aprendizaje Coordinacin de Programas en Red y Educacin a Distancia 4en donde no se utiliza I>PE# #LP! 0 donde <F@S representa el n7mero de )ilasA 0 CF%S el de columnas6. 0 la de cierreG </TEKTA)EA> !jemploG un )ormulario solicitando los comentarios del 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>
( !ntroduccin "or medio de men's

Si 3ueremos 3ue el usuarioA en vez de introducir un te*toA como 8emos visto en los casos anterioresA escoja entre varias opciones 3ue le presentamos nosotrosA 8aremos uso de un )ormulario en )orma de men7. Se consigue con la eti3ueta de inicio ;S!%!C# >A$!SM000M= 0 la de cierre ;IS!%!C#=. %as distintas opciones a escoger se consiguen con la eti3ueta ;FP#IF>=. !jemploG Pedimos al usuario 3ue elija su color pre)eridoG ;/F<$ AC#IF>SMmailtoGdireccinddedemailM $!#"F(SMPFS#M !>C#LP!SM#!H#IP%AI>M= XCul es tu color pre)eridoV ;:<=;S!%!C# >A$!SMColorPre)eridoM= ;FP#IF>=<ojo ;FP#IF>=2erde ;FP#IF>=Azul ;FP#IF>=Amarillo ;IS!%!C# = ;I/F<$=

!n el ejemplo anteriorA slo es visi,le en el )ormulario una opcin. Si 3ueremos 3ue sean visi,les m7ltiples opciones a la vezA aCadimos en la eti3ueta los atri,utos $^%#IP%! SIa!SMn7meroMA donde especi)icamos el n7mero de opciones visi,les. Si cam,iamos en el ejemplo anterior la eti3ueta correspondiente porG
<:ELE'T (AME>?'olo+*+e2e+ido? M6LTI*LE :ILE>?9?>

Pgina 4 de 48

Universidad de Guadalajara Coordinacin General del Sistema para la Innovacin del Aprendizaje Coordinacin de Programas en Red y Educacin a Distancia F,tenemosG

(&1 )ormulario de confirmacin $c*ec+(o#

Si 3ueremos 3ue el usuario con)irme una opcin determinadaA podemos 8acer uso de un )ormulario de con)irmacinA o c8ec9,o*A 3ue se consigue con la eti3uetaG
<I(*6T TY*E>?/3e/<$oA? (AME>?...?>

!jemploG Solicitamos al usuario 3ue con)irme su inclusin en una lista 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>?Li ta?> :- de eo e+ in/luido en la li ta de /o++eo0 </=O)M>

Si 3ueremos 3ue el )ormulario aparezca inicialmente como marcado 4el usuario no necesitar 8acerlo6A ,asta con aCadir el atri,uto C"!CP!( dentro de la eti3ueta. !n el ejemplo anterior sustituimos la eti3ueta e3uivalente porG
<I(*6T TY*E>?/3e/<$oA? (AME>?Li ta? 'HE'MED>

(&, -otones de radio

Cuando 3ueremos 3ue el usuario elija una 7nica opcin entre variasA podemos 8ace uso de los ,otones de radioA 3ue se consiguen con la eti3uetaG

Pgina & de 48

Universidad de Guadalajara Coordinacin General del Sistema para la Innovacin del Aprendizaje Coordinacin de Programas en Red y Educacin a Distancia
<I(*6T TY*E>?+adio? (AME>?...? NAL6E>?!!!?>

(onde 000 es el nom,re 3ue le ponemos a la varia,le 3ue se trata de elegirA 0 zzz es el nom,re de cada una de las opciones en concreto. !jemploG solicitamos al usuario 3ue de)ina cul es su sistema operativo pre)eridoG
<=O)M A'TIO(>?,ailto;di+e//i8nFdeFe,ail? METHOD>?*O:T? E('TY*E>?TEKT/*LAI(?> U'ul e tu i te,a <B)> <I(*6T TY*E>?+adio? 'HE'MED> #indoC <I(*6T TY*E>?+adio? <I(*6T TY*E>?+adio? </=O)M> ope+ativo p+e2e+idoV (AME>?:i te,aOpe+ativo? NAL6E>?#indoC ? (AME>?:i te,aOpe+ativo? NAL6E>?Ma/?> Ma/O (AME>?:i te,aOpe+ativo? NAL6E>?6niA?> 6niA

Que resultaG

F,s?rvese el atri,uto opcional C"!CP!( 3ue se 8a aCadido en la primera eti3ueta. !sa ser la opcin 3ue aparece marcada por de)ecto. F,s?rvese tam,i?n 3ue no es posi,le escoger ms de una opcin.
c -otones de env%o y de (orrado

"asta a8oraA en todos los ejemplos 3ue 8emos vistoA )alta,a un elemento esencial en cual3uier )ormularioA 0 es el ,otn de env5o de los datosA 3ue se consigue con la eti3uetaG
<I(*6T TY*E>? u$,it? NAL6E>?!!!?>

!n donde zzz es el te*to 3ue 3ueremos 3ue aparezca en el ,otn.

Pgina + de 48

Universidad de Guadalajara Coordinacin General del Sistema para la Innovacin del Aprendizaje Coordinacin de Programas en Red y Educacin a Distancia 2amos a aCadirlo al primer ejemploA en el 3ue se solicita,a el apellido del usuarioG
<=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?> <*><I(*6T TY*E>? u$,it? NAL6E>?Envia+ dato ?> </=O)M>

Ftro ,otn interesante es el de ,orrado de los datos introducidosA mu0 conveniente en un )ormulario con muc8os elementos. !s mu0 similar al de env5oA pues se consigue con la eti3uetaG
<I(*6T TY*E>?+e et? NAL6E>?!!!?>

!n donde zzz es el te*to 3ue 3ueremos 3ue aparezca en el ,otn. Si aCadimos al ejemplo anterior la eti3uetaG
<*><I(*6T TY*E>?+e et? NAL6E>?Bo++a+ dato ?>

resultaG

Prctica '.
2amos a aCadir un Mli,ro de visitasM. Para elloA aCadimos lo siguienteA entre las eti3uetas ;"<= 0 ;I:F(L= situadas al )inalA lo siguienteG
<*><'E(TE)>

Pgina 1 de 48

Universidad de Guadalajara Coordinacin General del Sistema para la Innovacin del Aprendizaje Coordinacin de Programas en Red y Educacin a Distancia
<H9>Li$+o de vi ita </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> <*><I(*6T TY*E>? u$,it? NAL6E>?Envia+ dato ?> <I(*6T TY*E>?+e et? NAL6E>?Bo++a+ dato ?> </=O)M> <*> <H)>

!l resultado esG

(. $rames
/rames 4en ingl?sA marcos o cuadros6 es un procedimiento del lenguaje "#$% para dividir la pantalla en di)erentes zonasA o ventanasA 3ue pueden actuar independientemente unas de otrasA como si se trataran de pginas di)erentesA pues incluso cada una de ellas pueden tener sus propias ,arras deslizadoras. Ena de sus caracter5sticas ms importantes es 3ue pulsando un enlace situado en un )rameA se puede cargar en otro )rame una pgina determinada. !sto se utiliza )recuentemente para tener un )rame estrec8o en la parte lateral 4o superior6 con un 5ndice del contenido en )orma de di)erentes enlacesA 3ueA al ser pulsados cargan en la ventana principal las distintas pginas. (e esta manera se )acilita la navegacin entre las pginasA pues aun3ue se va0a pasando de unas a otrasA siempre estar a la vista el 5ndice del conjunto.

Pgina 8 de 48

Universidad de Guadalajara Coordinacin General del Sistema para la Innovacin del Aprendizaje Coordinacin de Programas en Red y Educacin a Distancia Para comprender los distintos conceptos vamos a desarrollar un ejemploA creando una pgina con dos )rames. !l de la iz3uierda va a servir de 5ndice de lo 3ue veamos en el de la derec8aA 0 en ?ste veremos inicialmente una pgina de presentacin. Se podr acceder tam,i?n a3u5 a la pgina personal creada en los cap5tulos anteriores A si se pulsa un enlace en el )rame de la iz3uierda.

(ocumento de definici$n de los frames

%o primero 3ue tenemos 3ue 8acer es crear un documento "#$% en el 3ue de)iniremos cuntas zonas va a 8a,erA 3u? distri,ucin 0 tamaCo van a tenerA 0 cul va ser el contenido de cada una de ellas. !n el ejemplo 3ue vamos a desarrollarA la pgina va a tener dos )rames distri,uidos en columnas 4es decirA uno al lado del otroA en vez de uno encima del otroA lo 3ue ser5a una distri,ucin en )ilas6. Con respecto al tamaCoA 8aremos 3ue el primero 4el del iz3uierda6 ocupe el '-c del anc8o de la pantallaA 0 el otroA el 8-c restante. L con respecto al contenidoA el )rame de la iz3uierda va a contener un documento "#$% 3ue va a servir de 5ndice de lo 3ue veamos en el otro 40 3ue vamos a llamar mipagind.8tml6A 0 el de la derec8a otro documento "#$% 3ue va a servir de pgina de presentacin 4al 3ue llamaremos mipagpre.8tml6. #odo lo anterior se re)leja en el siguiente documento "#$%G
<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 8a de)inido el n7mero de )ramesA su distri,ucin 0 su tamaCoA pero )alta por de)inir el contenido de cada )rame. !sto se 8ace con las eti3uetasG
<=)AME :)'>?,ipagind03t,l?> <=)AME :)'>?,ipagp+e03t,l? (AME>?p+in/ipal?>

Con esto se de)ine 3ue el contenido del primer )rame 4el de la iz3uierda6 sea el documento "#$% mipagind.8tml 0 el del segundo 4el de la derec8a6 sea el documento "#$% mipagpre.8tml.

Pgina . de 48

Universidad de Guadalajara Coordinacin General del Sistema para la Innovacin del Aprendizaje Coordinacin de Programas en Red y Educacin a Distancia F,s?rvese 3ue en la eti3ueta del segundo se 8a incluido el atri,uto >A$!SMprincipalMA pero no as5 en el primero. !l motivo es 3ue se necesita dar un nom,re al segundo )rameA puesA como veremos a continuacinA en el documento del primer )rame va a 8a,er unos enlaces 3ue van a ir dirigidos 8acia ?l. !n este caso slo tenemos dos )ramesA pero podr5a 8a,er msA 0 es necesario distinguirlos unos de otros. L el primero no necesita nom,reA pues no va a 8a,er enlaces en el segundo dirigidos 8acia ?l.

(ocumentos )T*+ de cada frame

>ecesitamos a8ora con)eccionar el documento "#$% de cada uno de los )rames. <ecu?rdese 3ue son como pginas independientesA 3ue pueden tener cada una su propio )ondoA etc.A 0 todo lo 3ue 3ueramos aCadir en ellos 0 3ue 8emos aprendido 8asta a8ora. Documento del frame de la i./uierda 2a a tener un )ondo amarilloA 0 va a contener dos enlaces dirigidos al )rame de la derec8a. AdemsA como muestra de 3ue se puede aCadir cual3uier cosa en un )rame.
<HTML> <HEAD> <TITLE> Indi/e </TITLE> </HEAD> <BODY BD'OLO)>?@==BBEE?> <*><A H)E=>?,ipagp+e03t,l? TA)DET>?p+in/ipal?> *+e enta/i8n </A> <*><A H)E=>?,ipag&B03t,l? TA)DET>?p+in/ipal?> Mi pgina </A> <*><IMD :)'>?i,agen&0gi2?> </BODY> </HTML>

(entro de las eti3uetas de los enlaces podemos o,servar algo nuevoA 0 es el atri,uto #A<G!# 4en ingl?sG o,jetivoA ,lanco6A 3ue sirve para 8acer 3ue al ser activado el enlace no se cargue en el propio )rameA sino en otroA precisamente en el 3ue 8a0amos llamado con ese nom,re en el documento de de)inicin de los )rames. !n nuestro casoA le 8emos dado el nom,re de MprincipalM al )rame de la derec8aA 0 es por tanto a85 donde se van a cargar los documentos "#$%. Guardamos este documento con el nom,re de mipagind.8tml. AdemsA capturamos la imagen 0 la guardamos junto con el documento. Documento del frame de la derec*a 2a a tener un )ondo negroA 0 va a contener slamente un te*to.
<HTML> <HEAD> <TITLE> *+e enta/ion </TITLE>

Pgina 4- de 48

Universidad de Guadalajara Coordinacin General del Sistema para la Innovacin del Aprendizaje Coordinacin de Programas en Red y Educacin a Distancia
</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>

Guardamos este documento con el nom,re de mipagpre.8tml Si lo cargamosA este es el resultado con )rames 4para los navegadores 3ue los soportan6. Se puede compro,ar cmo cam,iamos de pgina en el )rame de la derec8aA seg7n el enlace 3ue pulsemos en el )rame de la iz3uierda.

,tributos de la eti!ueta -F.,*E#ET/

%a eti3ueta /<A$!S!#A como 8emos visto en el ejemploA es la 3ue de)ine la distri,ucinA el n7mero 0 tamaCo de los )rames. #iene dos atri,utosG CF%S 4columnas6 0 <F@S 4)ilas6G
<=)AME:ET 'OL:>?AA- ..- !!- 00?> <=)AME:ET )O#:>?AA- ..- !!- 00?>

(e)ine la distri,ucin de los )rames en columnas o en )ilasA seg7n se use uno u otro atri,uto. (e)ine el n7mero de )rames 3ue 8a,rA puesA por ejemploG

Pgina 41 de 48

Universidad de Guadalajara Coordinacin General del Sistema para la Innovacin del Aprendizaje Coordinacin de Programas en Red y Educacin a Distancia
<=)AME:ET 'OL:>?AA- ..?> 43a$+ do 2+a,e en /olu,na 5 <=)AME:ET 'OL:>?AA- ..- !!?> 43a$+ t+e 2+a,e en /olu,na 5

(e)ine el tamaCo de los )ramesA seg7n el valor 3ue demos a **A 00A zz.... !ste valor se puede e*presar enG En porcentaje del anc8o del pantalla 4para las columnas6A o del alto de la pantalla 4para las )ilas6. As5A por ejemploG

<=)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 +e tante5 <=)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 n7mero a,soluto 3ue representa el n7mero de pi*els 3ue ocupar cada )rame a lo anc8o o a lo alto 4seg7n sean )ilas o columnas6. As5A por ejemploG

<=)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

!s peligroso utilizar slo valores a,solutosA pues el tamaCo de la pantalla var5a de un usuario a otro. Si se va a usar alg7n valor a,soluto para un )rameA es mejor mezclarlo con alguno relativoA como los 3ue vamos a ver a continuacinA para 3ue se ajuste el total a la pantalla del usuario. En valor relativo 3ue se consigue poniendo un asterisco 4e6A en vez de un n7mero. !sto se interpreta como 3ue ese )rame de,e tener el espacio restante. Por ejemploG

<=)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 e pa/io +e tante50

Si 8a0 ms de un )rame con asteriscoA ese espacio restante se dividir por igual entre ellos. Si 8a0 un n7mero antes del asteriscoA ese )rame o,tiene esa cantidad ms de espacio relativo. As5 M'eAeM dar5a dos tercios para el primer )rame 0 un tercio para el otro.

Frames sin bordes

Si se desea 3ue no 8a0a un ,orde de separacin entre los )ramesA se de,en incluir el atri,uto /<A$!:F<(!<S- dentro de la eti3ueta /<A$!S!#.

Pgina 4' de 48

Universidad de Guadalajara Coordinacin General del Sistema para la Innovacin del Aprendizaje Coordinacin de Programas en Red y Educacin a Distancia Para 3ue tam,i?n desaparezcan los 8uecos de separacin entre )rames 8a0 3ue aCadir otros dos atri,utos 4el primero es para el !*plorer 0 el segundo para el >etscape6G /<A$!SPACI>GS- 0 :F<(!<S-. con lo 3ue la eti3ueta completa 3uedar5aG ;/<A$!S!# /<A$!:F<(!<S- /<A$!SPACI>GS- :F<(!<S- CF%SSM**A 00M=

,tributos de la eti!ueta -F.,*E/

!sta eti3ueta de)ine las cararacter5sticas de un )rame concretoA no del conjunto de los )ramesA como era el caso con la eti3ueta ;/<A$!S!#=. Puede tener los siguientes posi,les atri,utosA 3ue van dentro de la eti3ueta ;/<A$!=G
:)'>?di+e//i8n?0 !sta direccin puede ser la de un documento "#$% 4tal

como 8emos utilizado en el ejemplo6A o cual3uier otro recurso del @e, 4o E<%6. Con este atri,uto se indica lo 3ue se cargar inicialmente en el )rame. Si no se le pone este atri,uto a la eti3ueta ;/<A$!=A entonces dic8o )rame aparecer inicialmente vac5oA aun3ue tendr las dimensiones asignadas.
(AME>?no,$+eFdeFlaFventana?0 !ste atri,uto se usa para asignar un nom,re a

un )rame. !l atri,uto >A$! es opcional. Por de)ectoA todas las ventanas carecen de nom,re. %os nom,res 3ue se escojan de,en comenzar por un carcter al)anum?rico 4una letra o un n7meroA pero no otro tipo de s5m,olo6.
MA)DI(#IDTH>?nO,e+o?0 Se utiliza este atri,uto cuando se 3uiere controlar la el

anc8o de los mrgenes dentro de un )rame. !l n7mero 3ue se ponga representa los pi*els de los mrgenes. !ste atri,uto es opcional.
MA)DI(HEIDHT>?nO,e+o?0 Igual 3ue el anteriorA pero re)erido a los mrgenes en

altura.
:')OLLI(D>?.e [no[auto?0 !ste atri,uto se utiliza para decidir si el )rame

tendr o no una ,arra deslizadora. Si se escoje M0esM tendr siempre una ,arra deslizadora. Si se escoje MnoM no la tendr nuncaA 0 si se escoje MautoMA ser el navegador 3uien decida si la tendr o no. !ste atri,uto es opcional. Su valor por de)ecto es MautoM.
(O)E:ILE. A este atri,uto no se le asigna un valor num?ricoA como a los dems. !s

un indicador para 3ue la ventana no se pueda reOdimensionar 4en ingl?sA resize6 por parte del usuario. !s un atri,uto opcional. Por de)ectoA todos los )rames son reO dimensiona,les.
=)AMEBO)DE)>?no?0 !ste atri,uto elimina el ,orde en un )rameA pero si se

3uiere 3ue se elimine completamenteA tam,i?n 8a0 3ue pon?rselo al )rame contiguo. Si

Pgina 4 de 48

Universidad de Guadalajara Coordinacin General del Sistema para la Innovacin del Aprendizaje Coordinacin de Programas en Red y Educacin a Distancia se 3uiere eliminar los ,ordes de todos los )ramesA se de,e colocar en la eti3ueta /<A$!S!#A como 8emos visto anteriormente.

El atributo T,.0ET
!n el ejemplo 8emos visto 3ueA como 3uer5amos 3ue los enlaces situados en el )rame de la iz3uierda surtieran e)ecto no en ?l mismoA sino en otro )rameA ten5amos 3ue poner dentro de cada enlace el atri,uto #A<G!#SMprincipalMA siendo MprincipalM el nom,re 3ue 8a,5amos dado al segundo )rameA en el documento de de)inicin de )rames. !s decirA 8emos utilizado este atri,uto de esta maneraG
TA)DET>?no,$+eFdadoFaFot+oF2+a,e?.

!stos nom,resA 3ue los escogemos nosotrosA pueden ser cual3uieraA pero con la condicin 3ue el primer carcter sea al)anum?rico 4letra o n7mero6. Pero 8a0 unos nom,res reservados 4es decirA 3ue no se pueden usar para denominar a un )rame6A 3ue 8acen 3ue este atri,uto e)ect7e unas )unciones especiales. Para 3ue cumplan su cometidoA es imprescindi,le escri,ir estas pala,ras reservadas 4,lan9A sel) 0 top6 en min7sculas.
TA)DET>?F$lan<?0 "ace 3ue se a,ra una nueva copia del navegadorA 0 el enlace

activado se carga en ellaA a pantalla completa. !s decirA tendr5amos dos copias del navegador 4>etscapeA !*plorerA etc.6 )uncionando a la vez.
TA)DET>?F el2?0 "ace 3ue el enlace se cargue en el propio )rame. TA)DET>?Ftop?0 "ace 3ue el enlace se cargue a pantalla completaA suprimiendo

todos los )ramesA pero sin 3ue se cargue una nueva copia del navegador. !ste es particularmente 7til. En error mu0 com7n es olvidarse de poner este atri,uto en los enlaces 3ue estn en un )rameA con lo 3ue resulta 3ue al ser activadosA la pgina llamada se carga dentro del propio )rameA lo cual es mu0 molesto si esa pgina pertenece a otro sitio del @e,A 0 a7n ms grave si esa pgina tiene a su vez )rames. !ste inconveniente se evita poniendo este atri,uto dentro de las eti3uetas de los enlaces.

Frames anidados dentro de otros frames

"asta a8ora 8emos contemplado slo la posi,ilidad de tener una distri,ucin de los )rames ,ien en )ilas o ,ien en columnasA 4dependiendo 3ue se utilice el atri,uto <F@S o CF%S en la eti3ueta /<A$!S!#6A pero no am,os a la vez. Se pueden o,tener distri,uciones ms complejas anidando )ilas dentro de una columnaA o a la inversaA columnas dentro de una )ila.

Pgina 44 de 48

Universidad de Guadalajara Coordinacin General del Sistema para la Innovacin del Aprendizaje Coordinacin de Programas en Red y Educacin a Distancia Supongamos 3ue 3ueremos la siguiente distri,ucinG En )rame estrec8o en 8orizontal en la parte superiorA de lado a lado de la pantalla 4alturaA el 1&c6 Ftro )rame estrec8o en vertical en la parte iz3uierdaA de,ajo del anterior 4anc8uraA el '-c6 En tercero ocupando el resto de la pantalla. 2emos 3ueA en realidadA esto e3uivale a la siguiente distri,ucinG (os )ilas. %a superior ocupa el 1&c 0 la in)erior el resto. %a )ila in)erior est a su vez dividida en dos columnas. %a primera 4la de la iz3uierda6 ocupa el '-c 0 la otraA el resto.

!l documento de de)inicin de las dos )ilas 4olvid?monos de momento 3ue la de a,ajo est su,dividida6A ser5aG
<HTML> <HEAD> <TITLE>*agina /on do 2ila </TITLE> </HEAD> <=)AME:ET )O#:>?&SR- Z?> <=)AME :)'>?do/u,entoF2ilaF upe+io+?> <=)AME :)'>?do/u,entoF2ilaFin2e+io+?> </=)AME:ET> </HTML>

Como la )ila in)eriorA en realidadA son dos columnas 4con una distri,ucin del '-c 0 resto6A sustituimos 4anidando6 la eti3ueta ;/<A$! S<CSMdocumentod)iladin)eriorM= porG
<=)AME:ET 'OL:>?9ER- Z?> <=)AME :)'>?do/u,entoF/olu,naFi!qda?> <=)AME :)'>?do/u,entoF/olu,naFd/3a?> </=)AME:ET>

Con lo 3ue 3ueda el documento de)initvo as5G

<HTML> <HEAD> <TITLE>*agina /on 2ila in2e+io+e </TITLE> </HEAD>

upe+io+ . do

/olu,na

Pgina 4& de 48

Universidad de Guadalajara Coordinacin General del Sistema para la Innovacin del Aprendizaje Coordinacin de Programas en Red y Educacin a Distancia
<=)AME:ET )O#:>?&SR- Z?> <=)AME :)'>?do/u,entoF2ilaF upe+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>

%a distri,ucin 3uedar5a as5 G

1). *onidos.
Ena pgina del @e, puede tener sonidos incorporadosA ,ien sea como un )ondo sonoro 3ue se ejecuta automticamente al cargar la pginaA o como una opcin para 3ue la active el propio usuario.

Fondo sonoro para el *icrosoft "nternet E1plorer

Para las versiones '.- en adelanteA se utiliza la eti3uetaG
<BD:O6(D :)'>?2i/3e+oFdeF onido? LOO*>n>

!l )ic8ero de sonido puede estar en )ormato .mid o .Bav. !l atri,uto %FFP 4en ingl?sA lazo6 sirve para especi)icar el n7mero 4n6 de veces 3ue se de,e ejecutar el )ic8ero de sonido. Si se escoje el n7mero nSO1 o se pone %FFPSin)initeA el sonido se ejecutar inde)inidamente. Se puede omitir este atri,utoA 0 entonces el )ic8ero se ejecutar una sola vez. !jemplo 1 %a eti3ueta para 3ue se ejecute el )ic8ero prv8..mid dos veces en el !*plorer esG
<BD:O6(D :)'>?p+vX\0,id? LOO*>9>

Pgina 4+ de 48

Universidad de Guadalajara Coordinacin General del Sistema para la Innovacin del Aprendizaje Coordinacin de Programas en Red y Educacin a Distancia

Fondo sonoro para el 2etscape

%a eti3ueta ,sica para el >etscape esG
<EMBED :)'>?2i/3e+oFdeF onido? #IDTH>AAA HEIDHT>..>

donde @I(#" es la anc8ura 0 "!IG"# la altura de una consola 3ue apareceA 0 3ue tiene di)erentes teclas 4pla0A stopA pausaA etc.6. $s adelante veremos los valores *** e 00 3ue de,emos atri,uirles. !l )ic8ero de sonido puede estar en )ormato .mid o .BavA pero recu?rdese la advertencia 8ec8a anteriormenteA de 3ue estos )ormatos de,en estar con)igurados como $I$! por el servidor donde est? alojada la pgina. (entro de la eti3ueta se pueden aCadir los siguientes atri,utos opcionalesG
A6TO:TA)T>?t+ue? 4a++an/a auto,ti/a,ente5 LOO*>?t+ue? 4 e e1e/uta ininte++u,pida,ente5

,ctivaci$n del sonido por el propio usuario

"asta a3u5 8emos visto cmo poner un sonido de )ondo en una pgina. "a0 otra opcinA muc8o ms sencillaA 0 es la de poner un enlace a un )ic8ero de sonidoA de tal maneraA 3ue al pulsarlo se ejecute el )ic8ero. 42er el Cap5tulo A en el 3ue se e*plica cmo crear enlaces6. Por ejemploA vamos a poner un enlace al )ic8ero prv8..midG
E /u/3a e ta <A H)E=>?p+vX\0,id?>,u i/a</A>

Al pulsar el enlace se activaA en una ventana aparteA el programa 3ue ejecuta el sonido. !sto es vlido para todos los navegadoresA incluso las versiones ms antiguasA con la 7nica condicin de 3ue se 8a0a con)igurado un programa au*iliar capaz de ejecutar )ic8eros .mid o .Bav. Se puede 8acer el enlace con un icono 42er el Cap5tulo 46

Pgina 41 de 48

Universidad de Guadalajara Coordinacin General del Sistema para la Innovacin del Aprendizaje Coordinacin de Programas en Red y Educacin a Distancia

"r+ditos,

Tomado del Manual: Webmaestro. Derechos Reservados Francisco Arocena 1997 Es a!a.

Pgina 48 de 48