You are on page 1of 48

Universidad de Guadalajara Coordinación General del Sistema para la Innovación del Aprendizaje Coordinación de Programas en Red y Educación a Distancia

Página 1 de 48

Universidad de Guadalajara Coordinación General del Sistema para la Innovación del Aprendizaje Coordinación de Programas en Red y Educación a Distancia

Indice.
Introducción................................................................................................................ 1. !structura de un documento "#$%.......................................................................4 Práctica 1.................................................................................................................& '. (ando )orma al te*to...............................................................................................+ Comentarios no visi,les en la pantalla...................................................................1Práctica '................................................................................................................1. !nlaces con otras páginas.......................................................................................1' !structura de los enlaces.........................................................................................1' #ipos de enlaces......................................................................................................1' !nlaces dentro de la misma página.....................................................................1' !nlaces con otra página nuestra..........................................................................1 !nlaces con una página )uera de nuestro sistema...............................................14 !nlaces con una dirección de email....................................................................14 Práctica ................................................................................................................14 4. Imágenes.................................................................................................................1& Práctica 4................................................................................................................1. &. Caracteres especiales..............................................................................................'Práctica &.................................................................................................................'1 +. /ondos...................................................................................................................'' /ondos con un color uni)orme................................................................................'' Colores del te*to 0 de los enlaces......................................................................'' /ondos con una imagen..........................................................................................'4 Práctica +................................................................................................................'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.................................................................................. Separación entre las celdas de una ta,la................................................................ Separación entre el ,orde 0 el contenido dentro de las celdas.............................. Práctica 1............................................................................................................... '

Página ' de 48

Universidad de Guadalajara Coordinación General del Sistema para la Innovación del Aprendizaje Coordinación de Programas en Red y Educación a Distancia 8. /ormularios.......................................................................................................... ' !structura de un )ormulario................................................................................. !ti3ueta de inicio............................................................................................. !lementos para introducir los datos................................................................ Introducción por medio de te*to 4una l5nea6................................................ 4 Introducción por medio de te*to 4m7ltiples l5neas6..................................... & Introducción por medio de men7s................................................................ + /ormulario de con)irmación 4c8ec9,o*6...................................................... 1 :otones de radio........................................................................................... 1 :otones de env5o 0 de ,orrado..................................................................... 8 .. /rames..................................................................................................................4(ocumento de de)inición 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. Activación del sonido por el propio usuario........................................................&Cr?ditos....................................................................................................................&1

Página de 48

Universidad de Guadalajara Coordinación General del Sistema para la Innovación del Aprendizaje Coordinación de Programas en Red y Educación a Distancia

Introducción.
"#$% 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 página Be,. Crear una ,uena página tiene dos aspectosD por un lado el conocimiento t?cnico para crear código "#$% correctoA por otro lado el claro diseCo para presentar la in)ormación. !l o,jetivo de este manual es proporcionar un conocimiento ,ásico acerca de la construcción de páginas @e,A para un conocimiento más pro)undo de este lenguaje posteriormente se desarrollarán más versiones de este manualA por el momento esperamos 3ue la in)ormación a3u5 proporcionada le sea de utilidad.

Página 4 de 48

(entro del cuerpo está todo lo 3ue 3ueremos 3ue aparezca en la pantalla principal 4te*toA imágenesA etc."!A(= 0 . !l principio esencial del lenguaje "#$% 4"0per#e*t $ar9up %anguage6 es el uso de las eti3uetas 4tags6.e ser . !l t5tulo de.HHH= !ste es el inicio de una eti3ueta.as eti3uetas estará in)luenciada por ellas.reve 0 descriptivo de su contenidoA pues será lo 3ue vean los demás cuando aCadan nuestra página a su .oo9mar9 4o agenda de direcciones6."#$%= J#odo el documentoK . Por claridadA se usarán en este manual sólamente las ma07sculas.I:F(L= (entro del enca. es un arc8ivo de te*toA se puede crear con cual3uier editor de te*to como el edit de (FS.IHHH= !ste es el cierre de una eti3ueta. %o 3ue 8a0a entre am.ezamientoA comprendido entre las eti3uetas .ezamiento 8a0 in)ormación del documentoA 3ue no se ve en la pantalla principalA principalmente el t5tulo del documentoA comprendido entre las eti3uetas ."#$%= 0 .I#I#%!=. Estructura de un Documento HTML Ena página Be.#I#%!= 0 .6 Por tantoA la estructura 3ueda de esta maneraG <HTML> <HEAD> <TITLE> Título de la página </TITLE> </HEAD> <BODY> [Aquí van la </BODY> </HTML> etiqueta que vi uali!an la página" Página & de 48 .:F(L= 0 . %as letras de la eti3ueta pueden estar en ma07sculas o min7sculasA indi)erentemente.e estar entre las eti3uetas . .I"#$%=G .Universidad de Guadalajara Coordinación General del Sistema para la Innovación del Aprendizaje Coordinación de Programas en Red y Educación a Distancia 1. /uncionan de la siguiente maneraG .I"#$%= !l documento en s5 está dividido en dos zonas principalesG • • !l enca. Por ejemploA todo el documento "#$% de.I"!A(= !l cuerpoA comprendido entre las eti3uetas .

I"1=A ."'= 0 .e+a pagina </'E(TE)> </H&> <H)> E ta e .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. #am.iando el n7mero para compro.IP=6 . en/illa0 'o.I"'=A etc.IC!>#!<= 4no la soportan todos los navegadoresA aun3ue s5 la ma0or5a de ellos6. • !l te*to puede tener unas ca. Ena eti3ueta mu0 interesante es la de centrado . 48asta el n7mero +6A siendo el n7mero indicativo del tamaCo.a inte+e ante 0 <*> Aqui va un egundo pa++a2o0 </BODY> Página + de 48 .servar a continuaciónG Práctica 1. Si 3ueremos separar el te*to en distintos párra)os de."<= 4no e*iste la correspondiente de cierre6. Con ella se o.P=A 43ue no tiene su correspondiente eti3ueta de cierre .emos usar la eti3ueta .i p+i."1= 0 .p+onto e ta+e en /ondi/ione de 3a/e+ /o a . !l tamaCo ma0or es el correspondiente al n7mero 1.aunque todavia e .o el lengua1e HTML no e di2i/il.i?n tenemos los separadores 48orizontal rules6A 3ue se consiguen con la eti3ueta . !n el procesador de te*to copiamos lo siguienteG <HTML> <HEAD> <TITLE> Mi pagina del #e$ % & </TITLE> </HEAD> <BODY> <H&> <'E(TE)> *+i.utida so.re el )ondoA como se puede o.e+a pagina.ar el e)ecto 3ue se logra.ecerasA comprendidas entre las eti3uetas .Universidad de Guadalajara Coordinación General del Sistema para la Innovación del Aprendizaje Coordinación de Programas en Red y Educación a Distancia Antes de crear nuestra primera páginaA unas consideraciones so. >os centra todo lo 3ue est? dentro de ellaA 0a sea te*toA imágenesA etc.u. Puedes e*perimentar en el ejemplo 3ue sigueA cam.re el te*toG • Cuando escri.C!>#!<= 0 .tiene una ra0a 8orizontal tan anc8a como la pantallaA 0 con la apariencia de estar em.

EnicamenteA la separación entre párra)os 4dejando una l5nea en . Si 3ueremos separar los párra)osA o cual3uier otra cosaA pero sin dejar una l5nea en . !ste será el resultado.re de mipag1.lanco6 la conseguimos con la eti3ueta .rea9A o romper6.lanco no .tener cuatro l5neas en .lancoA pondr5amosG <B)><*> <B)><*> <B)><*> <B)><*> Página 1 de 48 .P=.:<=.P=A sino 3ue 8a0 3ue com. #ampoco tiene eti3ueta de cierre. 2. Si 3ueremos o.:<= 4.Universidad de Guadalajara Coordinación General del Sistema para la Innovación del Aprendizaje Coordinación de Programas en Red y Educación a Distancia </HTML> Guardamos el )ic8ero en el procesador de te*tos con el nom.asta con repetir la eti3ueta .8tml 0 lo cargamos en el navegador.lancoA usamos una eti3ueta parecida .inarla con la eti3ueta .tener m7ltiples l5neas en . 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. As5 por ejemploA si 3ueremos o.

ir 4t0peBriter6.servamos 3ue el navegador sólo reconoce uno de ellos. %a eti3ueta .rea9ing space6.lanco 0 retornos del carroA tal como esta.ir el te*toA si ponemos más de un espacio en .P<!= 0 .IP<!=. As5A por ejemploG m' se consigue de la siguiente maneraG m.SEP= . Podemos escoger entre tres tipos distintosG 1.5ndicesA 3ue se consiguen con las eti3uetas .%istas ordenadas 4numeradas6 .ISE:= A menudo nos interesará presentar las cosas en )orma de listas. Con la eti3ueta .ir 5ndices 0 su.ISEP= v* se consigue conG v. !l te*to 3ue se encuentre entre ella estará pre)ormateadoA es decir 3ue aparecerá como si 8u.i?n 3ue el te*to tenga un tamaCo menor 0 la apariencia de los caracteres de una má3uina de escri.ISE:= respectivamente.SE:=*.ia su apariencia. </B> pa+a pone+ algo en neg+ita 4$old50 <I> . %a di)erencia con la anterior es 3ue no pre)ormatea el te*toA sino 3ue 7nicamente cam.SE:= .I##= conseguimos tam.spDM 4nonO. Su estructura es la siguienteG <6L> <LI> 6na /o a <LI> Ot+a /o a <LI> Ot+a . </I> pa+a pone+ algo en /u+ iva 4itali/50 Ftra eti3ueta interesante es .##= 0 .I:%FCPQEF#!= se utiliza para destacar una cita te*tual dentro del te*to general.emos poner el código MNn.%istas de de)inición. Para destacar alguna parte del te*to se pueden usarG <B> .:%FCPQEF#!= 0 .ISEP= 0 .SEP='. Si 3ueremos )orzarle a 3ue lo 8agaA de. !s mu0 apropiada para con)eccionar ta.irA con una )uente de espaciado )ijo 4tipo Courier6.las 0 otros documentos similares.á <LI> Et/0 </6L> Página 8 de 48 .Universidad de Guadalajara Coordinación General del Sistema para la Innovación del Aprendizaje Coordinación de Programas en Red y Educación a Distancia Al escri.iera sido escrito con una má3uina de escri.lanco entre dos pala.%istas desordenadas 4no numeradas6 '. Además se respetarán los espacios en . %as listas desordenadas 4unordered lists6 sirven para presentar cosas 3ueA por no tener un orden determinadoA no necesitan ir precedidas por un n7mero. !n las )órmulas matemáticas puede interesar poder escri.ras o.an en nuestro documento "#$% 4lo cual no ocurre normalmenteA como 8emos visto anteriormente6.

E%= . .F%= . Por ejemploG . !l resultado de lo anterior es el siguienteG Se puede anidar una lista dentro de otra. .IE%=A 0 luego cada cosa va precedida de la eti3ueta .IE%= %as listas ordenadas 4ordered lists6 sirven para presentar cosas en un orden determinado.%I= $am5)eros .IF%= Al igual 3ue las listas desordenadasA tam. Página .IE%= .%I= Sardina .%I= #ercera cosa .E%= .Universidad de Guadalajara Coordinación General del Sistema para la Innovación del Aprendizaje Coordinación de Programas en Red y Educación a Distancia !s decirA toda la lista está dentro de la eti3ueta .%I= 4list item6.%I= Aves . de 48 .a en 3ue en el resultado aparecerá automáticamente un n7mero correlativo para cada cosa. Su estructura es mu0 similar a la anterior.E%= 0 . %a di)erencia estri.i?n se pueden anidar las listas ordenadas.%I= :acalao .%I= Peces .%I= !tc.%I= Primera cosa .%I= Segunda cosa .

#oda la lista de. !sto se consigue encerrando dic8os comentarios entre estos dos s5m.(#= 4de)inition term6 '.Universidad de Guadalajara Coordinación General del Sistema para la Innovación del Aprendizaje Coordinación de Programas en Red y Educación a Distancia !l tercer tipo lo )orman las listas de definición.(%= .olosG .ada entre las eti3uetas .imosA 3ue nos pueden servir para recordar posteriormente so. !l nom.e ir englo.(%= 0 . Como su nom.((= 4de)inition de)inition6.(#= Ena cosa a de)inir .(#= Ftra cosa a de)inir .enta+io al /8digo que no e ve+á en pantalla Práctica ' !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&> Página 1. %a de)inición de dic8a cosaA 3ue se consigue con la eti3ueta .de 48 .I(%=.re de la cosa a de)inir A 3ue se consigue con la eti3ueta .re indicaA son apropiadas para glosarios 4o de)iniciones de t?rminos6. .re lo 3ue 8icimosA 0 3ue no 3ueremos 3ue se vean en pantalla. L a di)erencia de las dos 3ue 8emos vistoA cada renglón de la lista tiene dos partesG 1.((= %a de)inición de esta otra cosa .ROO 0 OO= !jemploG <7%% E to e %%> un /o.ir comentarios en el documento "#$% so.((= %a de)inición de esta cosa .I(%= Comentarios no visibles en la pantalla A veces es mu0 7til escri.re el código 3ue escri.

</I> <OL> <LI> El +o/< <LI> El 1a!! <LI> La . Página 11 de 48 ..8tml 0 lo cargamos en el navegador.a .u i/a que .i <B> a2i/ione </B> on la iguiente .u i/a /la i/a </OL> </BODY> </HTML> Guardamos el )ic8ero de te*to con un nom. !ste es el resultado. <6L> <LI> El /ine <LI> El depo+te <6L> <LI> (ata/ion <LI> Balon/e to </6L> <LI> La .Universidad de Guadalajara Coordinación General del Sistema para la Innovación del Aprendizaje Coordinación de Programas en Red y Educación a Distancia </'E(TE)> <H)> :in un o+den pa+ti/ula+.u i/a </6L> La .re cual3uiera 0 la e*tensión .e gu ta e <I> 4en o+den de p+e2e+en/ia5.

!n este casoA lo 3ue antes 8emos llamado HHHA es decirA el destino del enlaceA en este caso el sitio dentro de la página a donde 3ueremos saltarA se sustitu0e por Tmarca 4la pala.ilidad de unir los distintos documentos repartidos por todo el mundo por medio de enlaces 8iperte*to.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> Página 1' de 48 .ras6 3ue aparecerán en la pantalla en color 4en )orma de 8iperte*to6. Enlaces con otras páginas %a caracter5stica 3ue más 8a in)luido en el espectacular ?*ito del @e.ra marca puede ser cual3uier pala.6 c6 d6 !nlaces dentro de la misma página !nlaces con otra página nuestra !nlaces con una página )uera de nuestro sistema !nlaces con una dirección de email a6 !nlaces dentro de la misma página A vecesA en el caso de documentos 4o páginas6 mu0 e*tensosA nos puede interesar dar un salto desde una posición a otra determinada.Universidad de Guadalajara Coordinación General del Sistema para la Innovación del Aprendizaje Coordinación de Programas en Red y Educación a Distancia 3. %o 3ue 8emos llamado antes LLL es la pala.ra 4o pala.ra 3ue 3ueramos6.A "<!/SM***M= 000 . 4o tela de araCa6 8a sidoA aparte la de su carácter multimediaA la posi. Estructura de los enlaces !n generalA los enlaces tienen la siguiente estructuraG .a+/a?> YYY </A> L en el sitio e*acto a donde 3ueremos saltarA de.emos poner la siguiente eti3uetaG <A (AME>?.s?rvese las comillas6. Su estructura esA entoncesG <A H)E=>?@.IA= donde *** es el destino del enlace 4F.ra0ado6 Tipos de enlaces 2amos a distinguir cuatro tipos de enlacesG a6 . 000 es el te*to indicativo en la pantalla del enlace 4con un color especial 0 generalmente su.

Por3ue pudiera ocurrir 3ue 8e organizado mi sitio del @e. Supongamos 3ue 3ueremos enlazar con la página creada en el ejemplo del cap5tulo anteriorA 3ue la 8emos llamado mipag'.dirA entonces en la eti3ueta tendr5a 3ue 8a.s?rvese 3ue se de. Ena o. con un directorio principalA 0 otros su.Universidad de Guadalajara Coordinación General del Sistema para la Innovación del Aprendizaje Coordinación de Programas en Red y Educación a Distancia .er puesto M. en el su.iendo esta eti3ueta 0 la otra página a la 3ue 3uiero saltar están en el mismo directorio.6 !nlaces con otra página nuestra Puede ser 3ue tengamos una sola página. Pero lo más )recuente es 3ue tengamos varias páginasA una inicial 4o principal6 0 otras conectadas a ellaA e incluso entre ellas mismas.l?> E1e.8tml. L a la inversaA si 3uiero saltar desde una página a otra 3ue está en un directorio anteriorA en la eti3ueta tendr5a 3ue 8a.servación importanteG !sto0 suponiendo 3ue la página en la 3ue esto0 escri. Ena vez conocida la dirección 4o E<%6A lo colocamos en vez de lo 3ue 8emos llamado anteriormente *** 4el destino del enlace6.plo del /apítulo 9 </A> Si 3ueremos 3ue va0a a un sitio concreto de otra página nuestra en vez de ir al principio de la páginaA adonde va por de)ectoA en ese sitio tenemos 3ue colocar una marca 4v?ase la sección anterior6A 0 completar el enlace con la re)erencia a esa marca.dirImipag'. Si 3ueremos enlazar con la página de >etscape 4cu0o E<% esG 8ttpGII8ome.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 más desordenadoA 0 sean más di)5ciles de 8acer las )uturas modi)icaciones.comI6A la eti3ueta ser5aG <A H)E=>?3ttp.olo I para indicar los su. F. ej. !sos dos puntos 8ace 3ue se dirija al directorio anterior.directorios au*iliares.//3o.Imipag'.A una dirección de )tpA gop8erA etc.netscape. !n este casoA simplemente sustituimos lo 3ue 8emos llamado HHH 4el destino del enlace6 por el nom.re del )ic8eroG <A H)E=>?.er puesto Msu. Si la página a la 3ue 3uiero saltar estáA p.ipag903t.8tmlM.8tmlM.e0net /ape0/o.e utilizar el s5m.directorio su.. c6 !nlaces con una página )uera de nuestro sistema Si 3ueremos enlazar con una página 3ue est? )uera de nuestro sistema 4es decirA 3ue est? en un servidor distinto al 3ue soporta nuestra página6A es necesario conocer su dirección completaA o E<% 4Eni)orm <esource %ocator6. !l E<% podr5a serA además de la dirección de una página del @e./?> *ágina ini/ial de (et /ape </A> Página 1 de 48 .

i/+o o2t0/o. !ste es el resultadoG Página 14 de 48 .8tml 0 lo cargamos en el navegador.//3o.//CCC0. %a estructura de la eti3ueta esG <A H)E=>?.Universidad de Guadalajara Coordinación General del Sistema para la Innovación del Aprendizaje Coordinación de Programas en Red y Educación 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 dirección de email !n este casoA sustituimos lo 3ue se 8a llamado antes *** 4el destino del enlace6 por mailtoG seguido de la dirección de email.i pagina 2avo+ita . !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 . Práctica 3.?> Mi/+o o2t </A> <B)> <A H)E=>?3ttp.?> Ya3oo7 </A> </BODY> </HTML> Guardamos el )ic8ero de te*to con el nom.re mipag .i?n en el te*to del enlace la dirección de email.ail?> TeAto del enla/e </A> !s decirA es conveniente poner tam.ailto.a3oo0/o. <*><A H)E=>?3ttp. di+e//i8n de e.e0net /ape0/o.?> (et /ape </A> <B)> <A H)E=>?3ttp.//CCC0.

5a 3ue indicar su E<% o dirección 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.en estar guardadas en un )ormato de )ic8ero especial llamado GI/. Imágenes %a eti3ueta 3ue nos sirve para incluir imágenes en nuestras páginas del @e. %a estructura de la eti3ueta esG <IMD :)'>?i.re 0 la localización de un )ic8ero 3ue contiene una imagen. "a0 programas grá)icos 4como el Paint S8op Pro para el PCA o el Grap8ic Converter para el $ac6 3ue nos permiten guardar las imágenes en este )ormatoA además de cumplir otras muc8as tareas de manipulación de las mismas.reve6 indicativa de la imagen.ra o una )rase . !ste comandoA 3ue en principio se puede omitirA es en . Con respecto a la localización del )ic8ero de esa imagenA se puede decir a3u5 lo mismo 3ue en el cap5tulo anterior re)erente a los enlaces.re 3ue tenga6. La 3ue no son capaces de ver la imagenA por lo menos pueden 8acerse una idea so.leA pues alargar5a innecesariamente el tiempo de carga de nuestra página.agen0gi2?> Con el comando I$G S<C 4image sourceA )uente de la imagen6 se indica 3ue se 3uiere cargar una imagen llamada imagen.re 0 la localización de un documento de te*to "#$% para 3ue lo cargueA se le indica el nom. %as imágenes de. %a 7nica di)erencia es 3ueA en lugar de indicar al programa navegador el nom. Aun3ue esto no es mu0 aconseja.ene)icio de los 3ue accedan a nuestra página con un programa navegador en )orma de te*to sólo. En aspecto mu0 importante a tener en cuenta es el tamaCo de las imágenesA pues una imagen grande supone un )ic8ero grandeA 0 esto puede resultar en un tiempo e*cesivo de carga. Si se omitiera este comandoA los 3ue utilizan dic8os navegadores no podr5an de ninguna manera acceder a esas páginas.gi) 4o el nom.agen0gi2? ALT>?de /+ip/i8n?> Con el comando A%# se introduce una descripción 4una pala. es mu0 similar a la de enlaces a otras páginasA 3ue 8emos visto en el cap5tulo anterior. Al igual 3ue una página con la 3ue 3ueremos enlazar puede estar )uera de nuestro sistemaA 4en cu0o caso 8a.Universidad de Guadalajara Coordinación General del Sistema para la Innovación del Aprendizaje Coordinación de Programas en Red y Educación a Distancia . Página 1& de 48 .i?n otro )ormato más avanzadoA del 3ue se 8a. "a0 casosA como veremos más adelanteA en los 3ue se utiliza una imagen como enlace a otra página.re ella. Pero no es sólo por esto.lará más adelante6. 4"a0 tam. (entro de la eti3ueta se pueden aCadir otros comandosA tal como A%# <IMD :)'>?i. !ste )ormato GI/ almacena las imágenes con un má*imo de '&+ coloresA en )orma comprimida.

Si no se desea 3ue aparezca ese rectánguloA 8a0 3ue incluir dentro de la eti3ueta de la imagen el atri.ipag903t.s?rvese además 3ue la imagen está rodeada de un rectágulo del color normal en los enlaces. F.ipag903t.aA en medio o a. </A> !n este caso sustituimos *** por el nom. Se puede poner arri. %a más sencilla es colocarla entre dos párra)osA con un titular a un lado.edio <IMD :)'>?i la0gi2? ALID(>BOTTOM> Titula+ alineado a$a1o Ftra posi. (e momento nos vamos a limitar a escoger la posición del titular con respecto a la imagen 4si es 3ue 3ueremos ponerle un titularA claro está6.ilidad mu0 interesante es la de utilizar una imagen como enlace a otra página.gi)6 para acceder al ejemplo práctico del cap5tulo ' 4mipag'.re del )ic8ero de la página a la 3ue 3ueremos acceder.ajo del lado de la imagen. Para estos casos se utilizan generalmente imágenes pe3ueCas 4iconos6A aun3ue se puede usar cual3uier tipo de 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 . %os navegadores más actuales 4como el >etscape >avigator 0 el $icroso)t Internet !*plorer6 permiten 3ue el te*to pueda rodear a la imagen 4como se verá más adelanteA en el Cap5tulo 86.8tml6G <A H)E=>?.l?><IMD :)'>?3and0gi2?></A> 3ue da como resultadoG Pulsando la imagen compro. L en lugar de 000 ponemos la eti3ueta completa de la imagen 43ue 3ueda as5 englo.amos cómo e)ectivamente enlaza con la página deseada. Seg7n vimos en el cap5tulo anteriorA la estructura general de un enlace esG <A H)E=>?AAA?> .Universidad de Guadalajara Coordinación General del Sistema para la Innovación del Aprendizaje Coordinación de Programas en Red y Educación a Distancia Para elegir la posición de la imagen con respecto al te*to 8a0 distintas posi.ada dentro de la eti3ueta del enlace6 Como ejemplo vamos a utilizar la imagen 48and.l?><IMD :)'>?3o.uto :F<(!<S-A es decirG <A H)E=>?...$+e0gi2? BO)DE)>E></A> Página 1+ de 48 .ilidades.

Universidad de Guadalajara Coordinación General del Sistema para la Innovación del Aprendizaje Coordinación de Programas en Red y Educación a Distancia 3ue da como resultadoG Posicionando el cursor so.amos 3ue act7a tam.oton aceptar 0 escri. !n este caso sustituimos *** 4el destino del enlace6 con el nom.A "<!/SM8and.i?n podemos utilizar una imagen para enlazar con otra imagen. Por ejemplo utilizamos un .gi)M= necesitas una manoV .imos en el sitio correspondienteG Página 11 de 48 .otonesA .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.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. !n este caso sustituimos *** 4el destino del enlace6 con el nom.undante uso 0 3ue sirven para mejorar la presentación de la página son los iconosA .IA= Que da como resultadoG En tipo de imágenes del 3ue se 8ace a. Por 7ltimoA otra posi.ilidad es la de utilizar un te*to para enlazar con una imagen.gi) por medio de un te*toG . #am.arras separadorasA etc. !sto puede resultar más est?tico. Supongamos 3ue 3ueremos enlazar con la imagen 8and.i?n como enlace aun3ue carezca del rectángulo de color.re esta 7ltima imagenA compro. A pesar de su tamaCo o )ormaA son imágenes como cual3uier otra.

IA= $is a)iciones . Primeramente es necesario o.I$G S<CSMimagen'.IC!>#!<= .I$G S<CSMimagen .asicos.8tmlM= .I:F(L= . !spero 3ue os guste. !n el procesador de te*tos copiamosG .8tmlM= . O 4 . Que resultaG Práctica 4. >o es mu0 e*tensaA pero tiene todos los elementos . .IC!>#!<= .P= .I$G S<CSMimagen1."<= !sta es mi pagina del @e.P= .:F(L= .Universidad de Guadalajara Coordinación General del Sistema para la Innovación del Aprendizaje Coordinación de Programas en Red y Educación a Distancia <IMD :)'>?$Fa/epta+0gi2G> E ta linea e ta p+e/edida po+ un $oton a/epta+.#I#%!= $i pagina del @e. Poco a poco le ire anadiendo mas cosas interesantes. .I#I#%!= .I"1= .I"!A(= .IA= $is paginas )avoritas .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 continuaciónA junto con los de los cap5tulos anteriores."1= $i pagina del @e." = En lugar ideal para mis vacaciones .gi)M= .A "<!/SMmipag ."#$%= .I" = ..gi)M A%#SMislaM= .I"#$%= Página 18 de 48 .C!>#!<= .gi)M= .C!>#!<= .A "<!/SMmipag'.tener tres imágenes Gi)A 3ue puede capturar de alguna página en internet solo presionando el ."!A(= .

Universidad de Guadalajara Coordinación General del Sistema para la Innovación del Aprendizaje Coordinación de Programas en Red y Educación a Distancia Guardamos el )ic8ero de te*to con el nom. !. 4less t8anA menor 3ue6 NgtD para = 4greater t8anA ma0or 3ue6 NampD para N 4ampersand6 N3uotD para M 4dou.re mipag4. Ena de ellas es de.an siempre con D (e una manera similarA e*isten códigos para escri.M 0 M=M.ido a 3ue las eti3uetas se )orman como un comando escrito entre los s5m.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 carácter más del te*to. "a0 muc8os de ellosA peroA lógicamenteA los 3ue más nos interesan son los propios del castellano 4las vocales acentuadasA la C 0 los signos X 0 Y 6 %os códigos de las vocales acentuadas se )orman comenzando con NA seguido de la vocal en cuestiónA seguido de la pala.lemaA e*isten unos códigos para poder escri. "aracteres especiales !*isten algunas limitaciones para escri. Para resolver este pro. !ste es el resultado. Por tantoA si se 3uisieran escri. de 48 .ir estos caracteres 0 otros relacionados con las eti3uetas.ra acute 4aguda6 0 terminando con el signo D NaacuteD para la á NiacuteD para la 5 NeacuteD para la ? NoacuteD para la ó Página 1.ir el te*to.8tml 0 lo cargamos en el navegador.olos M.le 3uotation6 Como se veA estos códigos empiezan siempre con el signo N 0 aca. NltD para .ir letras espec5)icas de distintos idiomas.

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 .u.1D para X N>tildeD para la _ NEumlD para la ` NT1+1D para Y NAacuteD para la Z NIacuteD para la \ NEacuteD para la ^ Práctica 5.$+e0gi2?> </A> Mi a2i/ione <*> <A H)E=>?.l?> <IMD :)'>?/a a0gi2?> </A> Mi pHaa/uteIgina 2avo+ita <'E(TE)> <HB> 6n luga+ ideal pa+a . eAten a.ipag903t.l?> <IMD :)'>?3o.pe+o tiene todo lo ele.ipagB03t.i va/a/ione </HB> <IMD :)'>?i la0gi2? ALT>?i la?> </'E(TE)> </BODY> </HTML> Página '.de 48 . Como ejercicio de este cap5tulo vamos a sustituir en el ejemplo práctico del cap5tulo anterior 4mipag4.Haa/uteI /o a inte+e ante 0 <*> <A H)E=>?.Universidad de Guadalajara Coordinación General del Sistema para la Innovación del Aprendizaje Coordinación de Programas en Red y Educación a Distancia NuacuteD para la 7 N!acuteD para la [ NFacuteD para la ] !l resto de los códigos sonG NntildeD para la C NuumlD para la W NT1.i pHaa/uteIgina del #e$0 (o e .ento $Haa/uteI i/o 0 E pe+o que o gu te0 *o/o a po/o le i+Hea/uteI aHntildeIadiendo .8tml6 las vocales acentuadas por sus correspondientes códigos.

itual6.O Amarillo Página '1 de 48 .O 2erde T----// O Azul Ftros colores sonG T////// O :lanco T-----. $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 . !stos d5gito sonG -1' 4&+18.: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 están en numeración 8e*adecimal.Universidad de Guadalajara Coordinación General del Sistema para la Innovación del Aprendizaje Coordinación de Programas en Red y Educación a Distancia #.0 el ma0or el //.A:C(!/ !s decirA 3ue en nuestro casoA el n7mero menor es el -.O <ojo T--//-. %os colores primarios sonG T//---. As5A por ejemploA el color rojo es el T//----A por3ue tiene el má*imo de rojo 0 cero de los otro dos colores . !sta numeración se caracteriza por tener 1+ d5gitos 4en lugar de los diez de la numeración decimal 8a.O >egro T////-.

Universidad de Guadalajara Coordinación General del Sistema para la Innovación del Aprendizaje Coordinación de Programas en Red y Educación a Distancia • Para 8acer un color más oscuroA 8a0 3ue reducir el n7mero de su componenteA dejando los otros dos invaria.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.les. !l comando #!H# e*plicado anteriormente 43ue va englo. %a eti3uetaA con todas sus posi. As5A el rojo T//---. #anto el >etscape >avigator 'A como el $icroso)t !*plorer soportan una eti3ueta de color de la )uente con la 3ue se puede cam. As5A podemos convertir el rojo en rosa con T//1-1-.ado dentro de la eti3ueta .leA si el )ondo )uese precisamente negro o azul.:F(L=6 cam.ia el color de la totalidad del te*to de la página.en variar los otros dos colores 8aci?ndolos más claros 4n7mero más alto6A en una cantidad igual.se puede 8acer más oscuro con TAA----A o a7n más oscuro con T&&----.ilidadesA ser5aG < BODY BD'OLO)>?@KKYYLL? TEKT>?@KKYYLL? LI(M>?@KKYYLL? NLI(M>?@KKYYLL? ALI(M>?@KKYYLL?> !jemplo.iar sólo una parte del te*toG <=O(T 'OLO)>?@==EEEE?> E te teAto e de /olo+ +o1o </=O(T> Página '' de 48 . Para 8acer 3ue un color tenga un tono más suave 4más pastel6A se de. 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 códigos de los colores son los mismos 3ue los 3ue se 8an visto anteriormente. • Colores del te*to 0 de los enlaces Si no se variasen los colores 8a.

lema es poner dentro de la eti3ueta . 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. !sta imagen se repite por toda la páginaA de una manera análoga al tapiz de @indoBs.: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.es. 2amos a poner como )ondo la imagen nu.es.ilidad de 3ue 3uien acceda a nuestra página 8a0a des8a. Cargamos en el editor de te*tos mipag .jpgA junto con un )ondo alternativo de color azul claro 0 8acer 3ue el te*to sea de color rojo oscuro.agen0gi2?> o .i?n una imagenA 0a sea en )ormato GI/ o bP!G. %a solución a este pro.ienG <BODY BA'MD)O6(D>?i.Universidad de Guadalajara Coordinación General del Sistema para la Innovación del Aprendizaje Coordinación de Programas en Red y Educación a Distancia b) Fondos con una imagen !l )ondo de una página puede ser tam.jpgM :GCF%F<SMTCC////M #!H#SMTAA----M= Página ' de 48 . !sto podr5a ser mu0 perjudicial si 8emos escogido unos colores para el te*to 0 los enlaces 3ue no contrastan .ien con ese )ondogris.:F(L :ACPG<FE>(SMnu. Práctica 6.8tml 0 sustituimos la eti3ueta .ilitado la carga automática de imágenesA en cu0o caso tampoco cargar5a la imagen 3ue sirve como )ondo 0 sólo ver5a el )ondo estándar de color gris.agen01pg?> >o todos los navegadores soportan este )ormato "a0 3ue prever la posi. %a estructura de la eti3ueta esG <BODY BA'MD)O6(D>?i.:F(L= por esta otraG .

la.Universidad de Guadalajara Coordinación General del Sistema para la Innovación del Aprendizaje Coordinación de Programas en Red y Educación a Distancia Guardamos este )ic8ero como mipag1.#A:%!= 0 .la con dos )ilasA ser5aG Página '4 de 48 .#<= 0 . !s decirG <TABLE> [+e to de la etiqueta " </TABLE> Para 3ue los datos va0an dentro de cajas )ormadas por un .uto :F<(!< a la eti3uetaA es decirG <TABLE BO)DE)> [+e to de la etiqueta " </TABLE> '.a a todas las demás es . Ta&las "asta 3ue no se empezaron a usar las ta. !ste es el resultado G %.laA 3ue son . "a0 3ue repetirlas tantas veces como )ilas 3ueremos 3ue tenga la ta.ular las cosas era utilizar la eti3ueta de pre)ormateadoA con la 3ue es necesario poner manualmente los espacios en . Estructura de una tabla 2amos a ver ordenadamente 4de )uera 8acia dentro6 las eti3uetas necesarias para con)eccionar las ta. !n el siguiente nivelA dentro de la anteriorA están las eti3uetas para )ormar cada )ila 4roB6 de la ta. %a eti3ueta generalA 3ue englo.lasA la 7nica manera de ta. !s decirA para una ta.las. 1.lanco para 3ue 3uede todo alineado )ormando )ilas 0 columnasA con un resultado mu0 poco est?tico.I#A:%!=.I#<=.orde tenemos 3ue aCadir el atri.8tml 0 lo cargamos en el navegador para visualizarlo.

I#(= . !n el 7ltimo nivel 4dentro de las anteriores6 están las eti3uetas de cada celdaA 3ue son .I#(= .#(=)ila'Ocelda'.I#<= . (entro de cada celda vamos a poner un te*to indicativo de la posición de dic8a celdaG . 2eamos un ejemplo de una ta.e+a 2ila" de la egunda 2ila" . "a0 3ue repetirla tantas veces como celdas 3ueremos 3ue 8a0a en esa )ila.an el contenido de cada celda concreta 4te*toA imágenesA etc.I#<= .I#(=A 3ue englo.Universidad de Guadalajara Coordinación General del Sistema para la Innovación del Aprendizaje Coordinación de Programas en Red y Educación a Distancia <T)> [etiqueta </T)> <T)> [etiqueta </T)> de la de la di tinta di tinta /elda /elda de la p+i.I#(= .#(=)ila'Ocelda .#A:%! :F<(!<= .I#(= .#<= .#(=)ila1Ocelda .#(=)ila1Ocelda1.I#(= .I#A:%!= Que resultaG Titular de la tabla Página '& de 48 .#(= 0 .6. Cada )ila va a tener tres celdas.#(=)ila'Ocelda1.la con dos )ilas.#<= .I#(= .#(=)ila1Ocelda'.

la 3ue indica cuál es su contenido.CAP#IF>= 0 .eceraA antes de las otras dos 3ue 0a e*ist5anG .I#(=6 2amos a aCadirA en el ejemplo anteriorA una )ila de estas celdas de ca.#(= 0 .I#<= Que resultaG Contenido de las celdas Página '+ de 48 .I#"= . ariando el espesor de los bordes !l atri.#<= .e+o de eado> Si en el ejemplo anterior ponemosG .Universidad de Guadalajara Coordinación General del Sistema para la Innovación del Aprendizaje Coordinación de Programas en Red y Educación a Distancia Se puede aCadir un titular 4caption6 a la ta.#"= 0 .ICAP#IF>=.orde sea tan grueso como 3ueramosA poniendoG <TABLE BO)DE)>nO.uto :F<(!< 4visto más arri.I#"= 4en vez de la normal .#"=Columna .#"=Columna '. !sto se consigue con la eti3ueta .I#"= .#"=Columna 1.#A:%! :F<(!<S&= Celdas de cabecera Además 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.orde de espesor igual a la unidad. Pero se puede 8acer 3ue este .a6 pone por de)ecto un . Se consigue con la eti3ueta .laA es decir un te*to situado encima de la ta.I#"= .

!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.iar esto aCadiendo dentro de la eti3ueta de la celda los siguientes atri.la los atri.utos @I(#" 0 "!IG"# igual a un porcentaje de la dimensión de la pantallaA o a una ci)ra 3ue e3uivale al n7mero de pi*els. >o 8a0 más 3ue poner dentro de la eti3ueta de la celda la eti3ueta correspondiente a una imagenA un enlaceA etc.la de acuerdo con el n7mero de )ilasA de columnasA por el contenido de las celdasA espesor de los . !sto se consigue aCadiendo dentro de la eti3ueta de la ta.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.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. A veces nos puede convenir )orzarle para 3ue la ta.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 tán /ent+ada 5 !l alineamiento por de)ecto en el sentido vertical es en el medio.Universidad de Guadalajara Coordinación General del Sistema para la Innovación del Aprendizaje Coordinación de Programas en Red y Educación a Distancia "asta a8oraA en todos los ejemplos se 8a puesto un te*to normal dentro de las distintas celdas.iarAaCadiendo dentro de la eti3ueta de la celda los siguientes atri. Pero se puede poner en ellas cual3uier otro elemento de los 3ue van en un documento "#$%A como imágenesA enlacesA etc. Página '1 de 48 . #am. Pero se puede cam.i?n se puede cam.la tenga unas dimensiones totales ma0ores 3ue las 3ue le correspondenA tanto en anc8ura como en longitud.ordesA etc.

re un n7mero determinado de )ilas. Para ello de.arca a dos columnasG <T)> <TD 'OL:*A(>9> 'elda o$+e 9 /olu. !sto se consigue aCadi?ndo dentro de la eti3ueta de la celda los atri.re otras varias.uto :GCF%F<SMTHHLLaaMA visto en dic8o cap5tulo.las tengan un color de )ondoA siguiendo un procedimiento totalmente análogo al empleado para 3ue una página tenga un color de )ondo uni)orme 4seg7n vimos en el cap5tulo +6. Por ejemploA en la ta.Universidad de Guadalajara Coordinación General del Sistema para la Innovación del Aprendizaje Coordinación de Programas en Red y Educación 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.utos CF%SPA>Sn7mero para e*tenderse so.emos utilizar el atri.re un n7mero determinado de columnasA o <F@SPA>Sn7mero para e*tenderse verticalmente so.uto Página '8 de 48 . Para elloA colocamos el atri.la tenga un color de )ondo.Que la totalidad de la ta.la vamos a aCadir una )ila con una sola celdaA 3ue a.na </TD> <T)> Color de fondo en las tablas Podemos conseguir 3ue las ta. Se puede conseguirG 1.

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> "mágenes de fondo en las tablas !l !*plorer de $icroso)t soporta la colocación de imágenes de )ondo en el interior de las ta.Universidad de Guadalajara Coordinación General del Sistema para la Innovación del Aprendizaje Coordinación de Programas en Red y Educación a Distancia dentro de la eti3ueta #A:%!. Por ejemploA vamos a 8acer 3ue sólo 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> . !l atri. Para elloA colocamos el atri. #eparaci$n entre las celdas de una tabla Página '.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> '.uto:ACPG<FE>(SMimagen.inación de los dos casos anteriores6.jpgMA visto en dic8o cap5tulo.uto del color general se coloca en la eti3ueta #A:%!A 0 el del color particular en la eti3ueta de la celda en cuestión 4una com. Si se utiliza dentro de la eti3ueta .TABLE BO)DE)> .emos utilizar el atri.Que la generalidad de las celdas tenga un colorA pero 3ue alguna celda tenga uno particular.gi)M o :ACPG<FE>(SMimagen. Para ello de. por ejemploA vamos a 8acer 3ue la generalidad de la ta.lasA de una manera análoga a como se 8ace en una página 4seg7n vimos en el cap5tulo +6.uto dentro de la eti3ueta de la celda correspondiente. Por ejemploA vamos a 8acer 3ue la ta. de 48 .#A:%!= la imagen en cuestión se multiplicará detrás de todas las celdas.Que sólamente una celda determinada tenga un color de )ondo.

gi).ordesA dentro de cada celdaG <TABLE BO)DE) 'ELL*ADDI(D>9E> Práctica &. Además vamos a alargar a lo anc8o la ta.Universidad de Guadalajara Coordinación General del Sistema para la Innovación del Aprendizaje Coordinación de Programas en Red y Educación a Distancia Por de)ectoA la separación entre las distintas celdas de una ta.i va/a/ione </TH> </T)> <T)> <TD ALID(>'E(TE)> <IMD :)'>?i la0gi2? ALT>?i la?> </TD> </T)> </TABLE> !l resultado esG Página .de 48 .tener una separación de '.la es de dos pi*els. %a primeraA como ca. Por ejemploA para o.orde 0 el contenido dentro de las celdas es de un pi*el.iar esto con el atri. Pero se puede variar esto con el atri.uto C!%%SPACI>GA 3ue se pone dentro de la eti3ueta #A:%!.pi*els entre el contenido 0 los . Se puede cam. Por ejemploA para o. 2amos a crear una ta.la de dos )ilasA con una celda cada una.tener una separación 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 separación entre el .uto C!%%PA((I>GA 3ue se pone dentro de la eti3ueta #A:%!.la al 1&c de la pantalla.eceraA con el te*to MEn lugar ideal para mis vacacionesMA 0 la segunda con la imagen isla. Para elloG <*> <TABLE BO)DE)>S #IDTH>TSR> <T)> <TH> 6n luga+ ideal pa+a .

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 automáticamente al usuario alg7n tipo de in)ormación. Por ejemploA vamos a suponer 3ue 3ueremos crear una lista de correo. %os usuarios pueden introducir sus nom. %os )ormularios permiten 3ue los demás nos env5en la in)ormación directamente a nosotros o .ir Men .ien a nuestro servidorA en donde 8emos instalado un programa 3ue procese esta in)ormación. $ormularios %a manera general para 3ue los lectores de nuestra página se puedan comunicar con nosotros es por medio de un enlace a nuestra dirección de emailA con lo 3ue reci.ilidadA de la 3ue 7nicamente se va a 8acer esta menciónA es 3ue 8u. Pero puede ser 3ue lo 3ue necesitemos sea sólamente 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.otón de env5o.A como vamos a ver.Universidad de Guadalajara Coordinación General del Sistema para la Innovación del Aprendizaje Coordinación de Programas en Red y Educación a Distancia '. !ste proceso es el 3ue vamos a comentar en este cap5tulo.ir5amos un email convencional.otones de radioA listas de selecciónA cajetines de introducción de te*to 0 de controlA etc. !l CGI permite a los )ormularios ser procesados por programas escritos en cual3uier lenguajeA aun3ue los más usados en Internet son el Perl 0 el C.res 0 direcciones de email 0 pulsar un .rutoM en nuestro correoA con los 3ue con)eccionar5amos manualmente dic8a lista de correoA sin necesitar ning7n programa para ello. %a otra posi. Se puede 8acer todo estoA además de otras cosasA utilizando los )ormulariosA con los 3ue se pueden con)eccionar páginas 3ue contengan los elementos necesarios para elloA tal como . Para conseguir estoA los )ormularios necesitan ejecutar programas o scripts por medio del CGI 4Common GateBa0 Inter)ace6. !sos datos los podemos reci. Página 1 de 48 .

uto !>C#LP!SM#!H#IP%AI>M se consigue 3ue las respuestas las reci. Página ' de 48 .e e)ectuar 0 3ue es 3ue los datos sean enviados por email a la dirección indicada.amos como un )ic8ero de te*toA per)ectamente legi.re 3ue le asignamos nosotros a la varia.uto $!#"F(SPFS# indica 3ue los datos sean inmediatamente enviados por correo a la dirección de emailA nada más pulsar el usuario el . 4.-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.e a continuación podrá ser utilizado por la ma0or5a de los navegadoresA con la nota.le e*cepción del !*plorer 4incluso la versión .itualmente es el directorio cgiO..le de introducción del dato.? NAL6E>?!!!?> !n dondeG *** es la pala. !ti3ueta de cierre .ail? METHOD>?*O:T? E('TY*E>?TEKT/*LAI(?> '. !ti3ueta de inicioG <=O)M A'TIO(>?. Cuerpo del )ormularioA con los distintos elementos para poder introducir los datos. !l atri.I/F<$= !ti3ueta de inicio !l atri. !lementos para introducir los datos %os vamos a dividir en tres clasesG a6 Introducción por medio de te*to . :otones de env5o 0 de .orrado.6 Introducción por medio de men7s c6 Introducción por medio de .ra 3ue indica el tipo de introducción. Con el atri.uto AC#IF> indica la acción 3ue se de.. 000 es el nom.Universidad de Guadalajara Coordinación General del Sistema para la Innovación del Aprendizaje Coordinación de Programas en Red y Educación a Distancia >F#AG !l tipo de )ormulario 3ue se descri. 4Si 8ici?ramos uso del CGIA ser5a precisamente a3u5 donde indicar5amos su localización en el servidorA 3ue 8a.di+e//i8nFdeFe.le 0 sin codi)icar.inA para 3ue procese los datos6.otones %a introducción de los datos se consigue por medio de la eti3uetaG <I(*6T TY*E>?AAA? (AME>?. .ailto.otón de env5o.

ail? METHOD>?*O:T? E('TY*E>?TEKT/*LAI(?> E /+i$e tu apellido.iar la eti3uea correspondiente porG <I(*6T TY*E>?pa Co+d? (AME>?Apellido? :ILE>?&E? MAKLE(DTH>?&9?> a&1 !ntroducción "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.e+o?> Página de 48 . !sto se consigue con la eti3ueta de inicioG <TEKTA)EA (AME>?.otón de env5o 43ue veremos más adelante6A reci. <B)><I(*6T TY*E>?teAt? (AME>?Apellido?> </=O)M> Que resultaG Si el usuario introduce su apellidoA p. :asta con cam.? )O#:>?nO.leA es decir 3ue todos los caracteres se representen por asteriscos..uto SIa!SMn7meroM.iar en la eti3ueta I>PE# #LP!SMte*tM por I>PE# #LP!SMpassBordM.Universidad de Guadalajara Coordinación General del Sistema para la Innovación del Aprendizaje Coordinación de Programas en Red y Educación a Distancia zzz es la pala. Se puede limitar estoA inclu0endo en la eti3ueta el atri.e+o? 'OL:>?nO.iremos un email su0o con el siguiente te*toG ApellidoS<uiz %a longitud de este )ormulario es por de)ecto de '. Se puede variar inclu0endo en la eti3ueta el atri. <uizA 0 pulsa el . 2amos a poner un ejemploG solicitamos el apellido del usuario. a !ntroducción "or medio de te#to $una l%nea !n este caso es ***Ste*tA es decirA I>PE# #LP!SMte*tM..caracteres. !n el 7ltimo ejemploA podemos cam. 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.ra asociada a un elemento. ej.ailto. <=O)M A'TIO(>?.uto $AH%!>G#"SMn7meroM. #am.uto 2A%E! no procede en este caso.di+e//i8nFdeFe. !l atri.i?n se puede 8acer 3ue el te*to introducido no sea reconoci.

:<=.ailto.enta+io ? )O#:>?Q? 'OL:>?JE?> </TEKTA)EA> </=O)M> ( !ntroducción "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. Si cam.ail? METHOD>?*O:T? E('TY*E>?TEKT/*LAI(?> Int+odu/e tu /o.I/F<$= !n el ejemplo anteriorA sólo es visi. Si 3ueremos 3ue sean visi. 0 la de cierreG </TEKTA)EA> !jemploG un )ormulario solicitando los comentarios del usuarioG <=O)M A'TIO(>?.les m7ltiples opciones a la vezA aCadimos en la eti3ueta los atri.iamos en el ejemplo anterior la eti3ueta correspondiente porG <:ELE'T (AME>?'olo+*+e2e+ido? M6LTI*LE :ILE>?9?> Página 4 de 48 ./F<$ AC#IF>SMmailtoGdirecciónddedemailM $!#"F(SMPFS#M !>C#LP!SM#!H#IP%AI>M= XCuál es tu color pre)eridoV .IS!%!C# = .enta+io . %as distintas opciones a escoger se consiguen con la eti3ueta .les.le en el )ormulario una opción.utos $^%#IP%! SIa!SMn7meroMA donde especi)icamos el n7mero de opciones visi. Se consigue con la eti3ueta de inicio .FP#IF>=Amarillo .IS!%!C#=.FP#IF>=Azul .FP#IF>=2erde .di+e//i8nFdeFe. !jemploG Pedimos al usuario 3ue elija su color pre)eridoG .Universidad de Guadalajara Coordinación General del Sistema para la Innovación del Aprendizaje Coordinación de Programas en Red y Educación 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.FP#IF>=<ojo . <B)><TEKTA)EA (AME>?'o.S!%!C# >A$!SMColorPre)eridoM= .S!%!C# >A$!SM000M= 0 la de cierre .FP#IF>=.

?> !jemploG Solicitamos al usuario 3ue con)irme su inclusión en una lista de correoG <=O)M A'TIO(>?.tenemosG (&1 )ormulario de confirmación $c*ec+(o# Si 3ueremos 3ue el usuario con)irme una opción determinadaA podemos 8acer uso de un )ormulario de con)irmaciónA o c8ec9.o*A 3ue se consigue con la eti3uetaG <I(*6T TY*E>?/3e/<$oA? (AME>?..otones de radioA 3ue se consiguen con la eti3uetaG Página & de 48 .uto C"!CP!( dentro de la eti3ueta.ail? METHOD>?*O:T? E('TY*E>?TEKT/*LAI(?> <I(*6T TY*E>?/3e/<$oA? (AME>?Li ta?> :í.asta con aCadir el atri.ailto. !n el ejemplo anterior sustituimos la eti3ueta e3uivalente porG <I(*6T TY*E>?/3e/<$oA? (AME>?Li ta? 'HE'MED> (&.di+e//i8nFdeFe. -otones de radio Cuando 3ueremos 3ue el usuario elija una 7nica opción entre variasA podemos 8ace uso de los .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 .Universidad de Guadalajara Coordinación General del Sistema para la Innovación del Aprendizaje Coordinación de Programas en Red y Educación a Distancia F..

re 3ue le ponemos a la varia. F. !jemploG solicitamos al usuario 3ue de)ina cuál es su sistema operativo pre)eridoG <=O)M A'TIO(>?.uto opcional C"!CP!( 3ue se 8a aCadido en la primera eti3ueta..i?n 3ue no es posi.? NAL6E>?!!!?> (onde 000 es el nom.le 3ue se trata de elegirA 0 zzz es el nom.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.le escoger más de una opción.otón de env5o de los datosA 3ue se consigue con la eti3uetaG <I(*6T TY*E>? u$.aOpe+ativo? NAL6E>?6niA?> 6niA Que resultaG F.otón.a un elemento esencial en cual3uier )ormularioA 0 es el .it? NAL6E>?!!!?> !n donde zzz es el te*to 3ue 3ueremos 3ue aparezca en el . !sa será la opción 3ue aparece marcada por de)ecto.s?rvese tam.re de cada una de las opciones en concreto..Universidad de Guadalajara Coordinación General del Sistema para la Innovación del Aprendizaje Coordinación de Programas en Red y Educación a Distancia <I(*6T TY*E>?+adio? (AME>?.aOpe+ativo? NAL6E>?Ma/?> Ma/O (AME>?:i te.di+e//i8nFdeFe.ail? METHOD>?*O:T? E('TY*E>?TEKT/*LAI(?> U'uál e tu i te. Página + de 48 .aOpe+ativo? NAL6E>?#indoC ? (AME>?:i te.s?rvese el atri.ailto. c -otones de env%o y de (orrado "asta a8oraA en todos los ejemplos 3ue 8emos vistoA )alta.

a el apellido del usuarioG <=O)M A'TIO(>?. Si aCadimos al ejemplo anterior la eti3uetaG <*><I(*6T TY*E>?+e et? NAL6E>?Bo++a+ dato ?> resultaG Práctica '.ail? METHOD>?*O:T? E('TY*E>?TEKT/*LAI(?> E /+i$e tu apellido.orrado de los datos introducidosA mu0 conveniente en un )ormulario con muc8os elementos.di+e//i8nFdeFe."<= 0 .otón.otón interesante es el de .Universidad de Guadalajara Coordinación General del Sistema para la Innovación del Aprendizaje Coordinación de Programas en Red y Educación a Distancia 2amos a aCadirlo al primer ejemploA en el 3ue se solicita.it? NAL6E>?Envia+ dato ?> </=O)M> Ftro . <B)><I(*6T TY*E>?teAt? (AME>?Apellido?> <*><I(*6T TY*E>? u$. 2amos a aCadir un Mli.ailto. !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 . Para elloA aCadimos lo siguienteA entre las eti3uetas .ro de visitasM.I:F(L= situadas al )inalA lo siguienteG <*><'E(TE)> Página 1 de 48 .

Página 8 de 48 .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 (.ailto.$+e?> <*>E /+i$e tu /o.arras deslizadoras. (e esta manera se )acilita la navegación entre las páginasA pues aun3ue se va0a pasando de unas a otrasA siempre estará a la vista el 5ndice del conjunto.$+e.enta+io .Universidad de Guadalajara Coordinación General del Sistema para la Innovación del Aprendizaje Coordinación de Programas en Red y Educación a Distancia <H9>Li$+o de vi ita </H9> <*><=O)M A'TIO(>?. $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 páginas di)erentesA pues incluso cada una de ellas pueden tener sus propias . Ena de sus caracter5sticas más importantes es 3ue pulsando un enlace situado en un )rameA se puede cargar en otro )rame una página determinada.2a+o/enaWlande+0e ? METHOD>?*O:T? E('TY*E>?TEKT/*LAI(?> Tu no. !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 páginas. <B)><I(*6T TY*E>?teAt? (AME>?(o. <B)><TEKTA)EA (AME>?'o.

XER?> <=)AME :)'>?.ipagp+e03t. !n el ejemplo 3ue vamos a desarrollarA la página va a tener dos )rames distri. !sto se 8ace con las eti3uetasG <=)AME :)'>?. #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.ipagp+e03t. 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 de la iz3uierda va a servir de 5ndice de lo 3ue veamos en el de la derec8aA 0 en ?ste veremos inicialmente una página de presentación.ución 0 tamaCo van a tenerA 0 cuál va ser el contenido de cada una de ellas.l?> <=)AME :)'>?. de 48 .8tml6A 0 el de la derec8a otro documento "#$% 3ue va a servir de página de presentación 4al 3ue llamaremos mipagpre.ución en )ilas6.i?n a3u5 a la página 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 cuántas zonas va a 8a. Se podrá acceder tam.l?> <=)AME :)'>?.Universidad de Guadalajara Coordinación General del Sistema para la Innovación del Aprendizaje Coordinación de Programas en Red y Educación a Distancia Para comprender los distintos conceptos vamos a desarrollar un ejemploA creando una página con dos )rames.8tml 0 el del segundo 4el de la derec8a6 sea el documento "#$% mipagpre.uidos en columnas 4es decirA uno al lado del otroA en vez de uno encima del otroA lo 3ue ser5a una distri. Página .ución 0 su tamaCoA pero )alta por de)inir el contenido de cada )rame.erA 3u? distri.l? (AME>?p+in/ipal?> </=)AME:ET> </HTML> La se 8a de)inido el n7mero de )ramesA su distri.8tml6. 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.ipagind03t.ipagind03t.8tml.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. <HTML> <HEAD> <TITLE> Indi/e </TITLE> </HEAD> <BODY BD'OLO)>?@==BBEE?> <*><A H)E=>?. <HTML> <HEAD> <TITLE> *+e enta/ion </TITLE> Página 4. AdemásA como muestra de 3ue se puede aCadir cual3uier cosa en un )rame. Documento del frame de la derec*a 2a a tener un )ondo negroA 0 va a contener sólamente un te*to. Documento del frame de la i.ipag&B03t. (ocumentos )T*+ de cada frame >ecesitamos a8ora con)eccionar el documento "#$% de cada uno de los )rames. !n nuestro casoA le 8emos dado el nom.A 0 todo lo 3ue 3ueramos aCadir en ellos 0 3ue 8emos aprendido 8asta a8ora.jetivoA .servar algo nuevoA 0 es el atri. !n este caso sólo tenemos dos )ramesA pero podr5a 8a.agen&0gi2?> </BODY> </HTML> (entro de las eti3uetas de los enlaces podemos o.er másA 0 es necesario distinguirlos unos de otros.s?rvese 3ue en la eti3ueta del segundo se 8a incluido el atri.er unos enlaces 3ue van a ir dirigidos 8acia ?l./uierda 2a a tener un )ondo amarilloA 0 va a contener dos enlaces dirigidos al )rame de la derec8a.Universidad de Guadalajara Coordinación General del Sistema para la Innovación del Aprendizaje Coordinación de Programas en Red y Educación a Distancia F.l? TA)DET>?p+in/ipal?> Mi página </A> <*><IMD :)'>?i.uto >A$!SMprincipalMA pero no as5 en el primero. L el primero no necesita nom. <ecu?rdese 3ue son como páginas independientesA 3ue pueden tener cada una su propio )ondoA etc. AdemásA capturamos la imagen 0 la guardamos junto con el documento.ipagp+e03t.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. Guardamos este documento con el nom.l? TA)DET>?p+in/ipal?> *+e enta/i8n </A> <*><A H)E=>?.re en el documento de de)inición de los )rames.reA pues no va a 8a.er enlaces en el segundo dirigidos 8acia ?l. !l motivo es 3ue se necesita dar un nom.re al segundo )rameA puesA como veremos a continuaciónA en el documento del primer )rame va a 8a.de 48 .uto #A<G!# 4en ingl?sG o.re de mipagind.re de MprincipalM al )rame de la derec8aA 0 es por tanto a85 donde se van a cargar los documentos "#$%.

tributos de la eti!ueta -F.uto.00?> (e)ine la distri.. ..uciónA el n7mero 0 tamaCo de los )rames.iamos de página en el )rame de la derec8aA seg7n el enlace 3ue pulsemos en el )rame de la iz3uierda.*E#ET/ %a eti3ueta /<A$!S!#A como 8emos visto en el ejemploA es la 3ue de)ine la distri. (e)ine el n7mero de )rames 3ue 8a..!!.. #iene dos atri.Universidad de Guadalajara Coordinación General del Sistema para la Innovación del Aprendizaje Coordinación de Programas en Red y Educación 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.!!.00?> <=)AME:ET )O#:>?AA..utosG CF%S 4columnas6 0 <F@S 4)ilas6G <=)AME:ET 'OL:>?AA..ar cómo cam.ución de los )rames en columnas o en )ilasA seg7n se use uno u otro atri.8tml Si lo cargamosA este es el resultado con )rames 4para los navegadores 3ue los soportan6. Se puede compro.ráA puesA por ejemploG Página 41 de 48 .re de mipagpre..

QEE?> 4la /olu.. la in2e+io+ el 9ER5 • En n7mero a. As5A por ejemploG <=)AME:ET 'OL:>?JE...na de la i!quie+da tend+á JE piAel de an/3o .la upe+io+ . As5A por ejemploG <=)AME:ET 'OL:>?R9E. !sto se interpreta como 3ue ese )rame de.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..Universidad de Guadalajara Coordinación General del Sistema para la Innovación del Aprendizaje Coordinación de Programas en Red y Educación a Distancia <=)AME:ET 'OL:>?AA.na 5 (e)ine el tamaCo de los )ramesA seg7n el valor 3ue demos a **A 00A zz.solutosA pues el tamaCo de la pantalla var5a de un usuario a otro.e en /olu. la del . la in2e+io+ de una altu+a 2i1a de &EE piAel . Si se va a usar alg7n valor a.!!?> 43a$+á t+e 2+a.e en /olu.na 5 <=)AME:ET 'OL:>?AA..... Si 8a0 un n7mero antes del asteriscoA ese )rame o.uto /<A$!:F<(!<S. As5 M'eAeM dar5a dos tercios para el primer )rame 0 un tercio para el otro.. la de la de+e/3a QEE50 !s peligroso utilizar sólo valores a.soluto para un )rameA es mejor mezclarlo con alguno relativoA como los 3ue vamos a ver a continuaciónA para 3ue se ajuste el total a la pantalla del usuario.edio el TER..edio o$tend+á el e pa/io +e tante50 Si 8a0 más de un )rame con asteriscoA ese espacio restante se dividirá por igual entre ellos.la del .e tener el espacio restante.RTE..orde de separación entre los )ramesA se de. Página 4' de 48 .tiene esa cantidad más de espacio relativo.RXE?> 4la /olu.soluto 3ue representa el n7mero de pi*els 3ue ocupará cada )rame a lo anc8o o a lo alto 4seg7n sean )ilas o columnas6. Por ejemploG <=)AME:ET )O#:>?&EE-Z-&EE?> 4Ha$+á t+e 2ila . Frames sin bordes Si se desea 3ue no 8a0a un .dentro de la eti3ueta /<A$!S!#. • En valor relativo 3ue se consigue poniendo un asterisco 4e6A en vez de un n7mero.?> 43a$+á do 2+a. !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.R9E?> 4la 2ila upe+io+ o/upa+á el &ER del alto de la pantalla.en incluir el atri.

Universidad de Guadalajara Coordinación General del Sistema para la Innovación del Aprendizaje Coordinación de Programas en Red y Educación a Distancia Para 3ue tam. :')OLLI(D>?.tributos de la eti!ueta -F. Por de)ectoA todos los )rames son reO dimensiona.0 :F<(!<S-.uto es opcional. Con este atri./<A$!S!# /<A$!:F<(!<S. Si se escoje M0esM tendrá siempre una . 4o E<%6.utosA 3ue van dentro de la eti3ueta . !l atri. %os nom.uto cuando se 3uiere controlar la el anc8o de los márgenes dentro de un )rame. !l n7mero 3ue se ponga representa los pi*els de los márgenes.orde en un )rameA pero si se 3uiere 3ue se elimine completamenteA tam. Su valor por de)ecto es MautoM.. MA)DI(#IDTH>?nO. MA)DI(HEIDHT>?nO.re.*E/ !sta eti3ueta de)ine las cararacter5sticas de un )rame concretoA no del conjunto de los )ramesA como era el caso con la eti3ueta .e+o?0 Igual 3ue el anteriorA pero re)erido a los márgenes en altura.$+eFdeFlaFventana?0 !ste atri. con lo 3ue la eti3ueta completa 3uedar5aG . (AME>?no. Si se escoje MnoM no la tendrá nuncaA 0 si se escoje MautoMA será el navegador 3uien decida si la tendrá o no.uto elimina el . Puede tener los siguientes posi. !s un indicador para 3ue la ventana no se pueda reOdimensionar 4en ingl?sA resize6 por parte del usuario.uto opcional.res 3ue se escojan de./<A$!=G :)'>?di+e//i8n?0 !sta dirección puede ser la de un documento "#$% 4tal como 8emos utilizado en el ejemplo6A o cual3uier otro recurso del @e./<A$!=A entonces dic8o )rame aparecerá inicialmente vac5oA aun3ue tendrá las dimensiones asignadas.en comenzar por un carácter al)anum?rico 4una letra o un n7meroA pero no otro tipo de s5m.i?n 8a0 3ue pon?rselo al )rame contiguo. !ste atri.i?n desaparezcan los 8uecos de separación entre )rames 8a0 3ue aCadir otros dos atri.e [no[auto?0 !ste atri.uto a la eti3ueta .arra deslizadora.arra deslizadora. =)AMEBO)DE)>?no?0 !ste atri./<A$!SPACI>GS. !ste atri.les. !s un atri.uto no se le asigna un valor num?ricoA como a los demás.uto se utiliza para decidir si el )rame tendrá o no una .uto es opcional.uto se usa para asignar un nom.CF%SSM**A 00M= .re a un )rame.olo6.les atri.uto se indica lo 3ue se cargará inicialmente en el )rame. (O)E:ILE. Por de)ectoA todas las ventanas carecen de nom. Si Página 4 de 48 . Si no se le pone este atri.utos 4el primero es para el !*plorer 0 el segundo para el >etscape6G /<A$!SPACI>GS. A este atri.e+o?0 Se utiliza este atri./<A$!S!#=.:F<(!<S.uto >A$! es opcional.

Universidad de Guadalajara Coordinación General del Sistema para la Innovación del Aprendizaje Coordinación de Programas en Red y Educación a Distancia se 3uiere eliminar los .ra una nueva copia del navegadorA 0 el enlace activado se carga en ellaA a pantalla completa.uto de esta maneraG TA)DET>?no.ilidad de tener una distri. !s decirA 8emos utilizado este atri.e?. 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.lan9A sel) 0 top6 en min7sculas. Se pueden o.os a la vez. En error mu0 com7n es olvidarse de poner este atri.uto #A<G!#SMprincipalMA siendo MprincipalM el nom.e colocar en la eti3ueta /<A$!S!#A como 8emos visto anteriormente. TA)DET>?F$lan<?0 "ace 3ue se a. TA)DET>?F el2?0 "ace 3ue el enlace se cargue en el propio )rame. Frames anidados dentro de otros frames "asta a8ora 8emos contemplado sólo la posi.re 3ue 8a.A 0 a7n más grave si esa página tiene a su vez )rames.ras reservadas 4.6 )uncionando a la vez.uto e)ect7e unas )unciones especiales.uto en los enlaces 3ue están en un )rameA con lo 3ue resulta 3ue al ser activadosA la página llamada se carga dentro del propio )rameA lo cual es mu0 molesto si esa página pertenece a otro sitio del @e.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.5amos dado al segundo )rameA en el documento de de)inición de )rames.ien en )ilas o . !stos nom. !ste es particularmente 7til. Para 3ue cumplan su cometidoA es imprescindi.ien en columnasA 4dependiendo 3ue se utilice el atri.le escri. El atributo T.resA 3ue los escogemos nosotrosA pueden ser cual3uieraA pero con la condición 3ue el primer carácter sea al)anum?rico 4letra o n7mero6.$+eFdadoFaFot+oF2+a. !ste inconveniente se evita poniendo este atri. Pero 8a0 unos nom.uto dentro de las eti3uetas de los enlaces. Página 44 de 48 . !s decirA tendr5amos dos copias del navegador 4>etscapeA !*plorerA etc.uciones más complejas anidando )ilas dentro de una columnaA o a la inversaA columnas dentro de una )ila.tener distri.uto <F@S o CF%S en la eti3ueta /<A$!S!#6A pero no am.ir estas pala..res reservados 4es decirA 3ue no se pueden usar para denominar a un )rame6A 3ue 8acen 3ue este atri.ordes de todos los )ramesA se de.ución de los )rames .

!l documento de de)inición de las dos )ilas 4olvid?monos de momento 3ue la de a.ajo está su. %a )ila in)erior está a su vez dividida en dos columnas.entoF2ilaFin2e+io+?> </=)AME:ET> </HTML> Como la )ila in)eriorA en realidadA son dos columnas 4con una distri./<A$! S<CSMdocumentod)iladin)eriorM= porG <=)AME:ET 'OL:>?9ER. 2emos 3ueA en realidadA esto e3uivale a la siguiente distri.entoF/olu. %a primera 4la de la iz3uierda6 ocupa el '-c 0 la otraA el resto.entoF/olu.ajo del anterior 4anc8uraA el '-c6 En tercero ocupando el resto de la pantalla.Universidad de Guadalajara Coordinación General del Sistema para la Innovación del Aprendizaje Coordinación de Programas en Red y Educación a Distancia Supongamos 3ue 3ueremos la siguiente distri.ución del '-c 0 resto6A sustituimos 4anidando6 la eti3ueta .Z?> <=)AME :)'>?do/u.entoF2ilaF upe+io+?> <=)AME :)'>?do/u. do /olu.uciónG (os )ilas.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+ .uciónG 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.naFi!qda?> <=)AME :)'>?do/u.dividida6A ser5aG <HTML> <HEAD> <TITLE>*agina /on do 2ila </TITLE> </HEAD> <=)AME:ET )O#:>?&SR.na Página 4& de 48 .Z?> <=)AME :)'>?do/u. %a superior ocupa el 1&c 0 la in)erior el resto.

Ena página del @e.naFd/3a?> </=)AME:ET> </=)AME:ET> </HTML> %a distri.utoA 0 entonces el )ic8ero se ejecutará una sola vez.uto %FFP 4en ingl?sA lazo6 sirve para especi)icar el n7mero 4n6 de veces 3ue se de.e ejecutar el )ic8ero de sonido.entoF/olu.Universidad de Guadalajara Coordinación General del Sistema para la Innovación del Aprendizaje Coordinación de Programas en Red y Educación a Distancia <=)AME:ET )O#:>?&SR.ien sea como un )ondo sonoro 3ue se ejecuta automáticamente al cargar la páginaA o como una opción para 3ue la active el propio usuario. !jemplo 1 %a eti3ueta para 3ue se ejecute el )ic8ero prv8..entoF2ilaF upe+io+?> <=)AME:ET 'OL:>?9ER.Bav.id? LOO*>9> Página 4+ de 48 .mid dos veces en el !*plorer esG <BD:O6(D :)'>?p+vX\0. puede tener sonidos incorporadosA .. *onidos.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 . Fondo sonoro para el *icrosoft "nternet E1plorer Para las versiones '.entoF/olu. Se puede omitir este atri.Z?> <=)AME :)'>?do/u. Si se escoje el n7mero nSO1 o se pone %FFPSin)initeA el sonido se ejecutará inde)inidamente.Z?> <=)AME :)'>?do/u.naFi!qda?> <=)AME :)'>?do/u. !l atri.ución 3uedar5a as5 G 1).

ásica para el >etscape esG <EMBED :)'>?2i/3e+oFdeF onido? #IDTH>AAA HEIDHT>.. "a0 otra opciónA muc8o más sencillaA 0 es la de poner un enlace a un )ic8ero de sonidoA de tal maneraA 3ue al pulsarlo se ejecute el )ic8ero.midG E /u/3a e ta <A H)E=>?p+vX\0.áti/a.ctivaci$n del sonido por el propio usuario "asta a3u5 8emos visto cómo poner un sonido de )ondo en una página. (entro de la eti3ueta se pueden aCadir los siguientes atri.. Por ejemploA vamos a poner un enlace al )ic8ero prv8.> 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.Bav.pida. !l )ic8ero de sonido puede estar en )ormato .mid o . !sto es válido para todos los navegadoresA incluso las versiones más antiguasA con la 7nica condición de 3ue se 8a0a con)igurado un programa au*iliar capaz de ejecutar )ic8eros .utos opcionalesG A6TO:TA)T>?t+ue? 4a++an/a auto.ente5 LOO*>?t+ue? 4 e e1e/uta ininte++u.en estar con)igurados como $I$! por el servidor donde est? alojada la página.ente5 .emos atri. 42er el Cap5tulo A en el 3ue se e*plica cómo crear enlaces6.BavA pero recu?rdese la advertencia 8ec8a anteriormenteA de 3ue estos )ormatos de.uirles.id?>.mid o . $ás adelante veremos los valores *** e 00 3ue de.Universidad de Guadalajara Coordinación General del Sistema para la Innovación del Aprendizaje Coordinación de Programas en Red y Educación a Distancia Fondo sonoro para el 2etscape %a eti3ueta . Se puede 8acer el enlace con un icono 42er el Cap5tulo 46 Página 41 de 48 .u i/a</A> Al pulsar el enlace se activaA en una ventana aparteA el programa 3ue ejecuta el sonido.

Tomado del Manual: Webmaestro. Derechos Reservados Francisco Arocena 1997 Es a!a.Universidad de Guadalajara Coordinación General del Sistema para la Innovación del Aprendizaje Coordinación de Programas en Red y Educación a Distancia "r+ditos. Página 48 de 48 .