ACTIVIDADES PGINAS WEB

PRCTICA 1: Plantilla
Nuestro primer ejercicio consiste en disear una plantilla de documento T!" para iniciar r#pidamente todas nuestras p#$inas % a&orrarnos escri'ir los elementos m(nimos de una p#$ina) *+ Para comen,ar a escri'ir un c-di$o. podemos utili,ar un editor de te/to cual0uiera. por ejemplo $edit) 1+ Como cual0uier p#$ina T!". constar# de la ca'ecera % el cuerpo del documento. am'as partes situadas entre la eti0ueta de apertura 2&tml3 % su an#lo$a de cierre 24&tml3) 5+ "a ca'ecera del documento ser(a6 2&tml3 2&ead3 2title3plantilla24title3 24&ead3 7+ El cuerpo del documento 0uedar(a como el si$uiente6 2'od%3 2899eti0uetas 0ue :orman el cuerpo993 Esta pa$ina es la primera 0ue &acemos) 24'od%3 ;+ Por <ltimo. terminaremos con la eti0ueta de :inali,aci-n de un documento &tml.24&tml3) =+ Guardaremos el documento con el nom're >Plantilla? % la e/tensi-n )&tml ) Plantilla.html @+ Por lo tanto el documento completo ser#6 2&tml3 2&ead3 2title3plantilla24title3 24&ead3 2'od%3 2899eti0uetas 0ue :orman el cuerpo993 Esta pa$ina es la primera 0ue &acemos) 24'od%3 24&tml3

PRCTICA 2: Acentos, caracteres especiales y comentarios

1. La cabecera del documento junto con la etiqueta de apertura sera:

2&tml3 2&ead3 2title3!i primera pAaacuteB$ina en &tml24title3 24&ead3

2. El cuerpo del documento quedara como el siguiente:

2'od%3 las eti0uetas 0ue &emos aprendido &asta a&ora son las 0ue :orman la estructura 'AaacuteBsica de un documento &tml6 AltB&tmlA$tB. AltB&eadA$tB. AltBtitleA$tB % AltB'od%A$tB) tam'iAeacuteBn &emos aprendido a comentar nuestras pAaacuteB$inas con las eti0uetas AltB899 % 99A$tB) 24'od%3
3. Por ltimo, incluiremos la etiqueta de finali aci!n de un documento "#$L: </html>

7) %uarda el ejercicio con el nombre practica2.html .

PRCTICA 3: Tamaos y formatos

En este ejercicio. crearemos un documento T!" para iniciarnos con el tamao de la :uente) Para pro:undi,ar un poco m#s so're lo 0ue &emos Cisto en este tema. &emos utili,ado tam'iDn un enca'e,ado % un e:ecto de letra un poco peculiar) Procure 0ue el ejercicio 0uede lo m#s parecido a la ima$en :inal)
1. La cabecera del documento junto con la etiqueta de apertura sera:

2.

El cuerpo del documento quedara como el siguiente:

2&tml3 2&ead3 2title3Ejercicio so're tamaAntildeBos % :ormatos24title3 24&ead3 2'od%3 2p st%leEF:ont9si,e6 7Gp/BF3Esto est# a un tamao de 7Gp/24p3 2p st%leEF:ont9si,e6 smallBF3Esto est# a un tamao small24p3 2p st%leEF:ont9si,e6 mediumBF3Esto est# a un tamao medium24p3 2p st%leEF:ont9si,e6 lar$eBF3Esto est# a un tamao lar$e24p3 2p st%leEF:ont9si,e6 //9lar$eBF3Esto est# a un tamao //9lar$e24p3 2p st%leEF:ont9si,e6 //9smallBF3Esto est# a un tamao //9small24p3 2p st%leEF:ont9si,e6 1HBF3Esto est# a un tamao 1H24p3 2p st%leEF:ont9si,e6 1GHBF3Esto est# a un tamao 1GH24p3 2p st%leEF:ont9si,e6 IGHBF3Esto est# a un tamao IGH24p3 2p st%leEF:ont9si,e6 1GGHBF3Esto est# a un tamao 1GGH24p3 2p st%leEF:ont9si,e6 5GGHBF3Esto est# a un tamao 5GGH24p3 2&13Prue'as de :ormatos24&13 Esto es normal 2su'3% esto es su'(ndice6 su' 24su'32'r3 Esto es normal 2sup3% esto es super(ndice6 sup 24sup32'r3 2'r3
&'bod() &'*tml)

3.

%uardar como

practica3.html

PRCTICA 4: !neas
Crearemos una p#$ina para practicar con l(neas &ori,ontales) Esta &erramienta. junto con todas sus Cariedades. es mu% <til para dar un aspecto m#s pro:esional a nuestras p#$inas) Procure 0ue el ejercicio 0uede lo m#s parecido a la ima$en 0ue mostramos a'ajo)
1. La cabecera del documento junto con la etiqueta de apertura sera:

2&tml3 2&ead3 2title3Ejemplos de lAiacuteBneas &ori,ontales24title3

&'*ead) 2. El cuerpo del documento quedara como el siguiente:

2'od%3 2p3"(nea est#ndar624p3 2&r3 2p3"(nea de $rosor ;p/. 0ue ocupa el ;GH de la Centana624p3 2&r si,eEF;F Jidt&EF;GHF3 2p3"(nea de $rosor 1;p/ % ;G p/ de anc&o624p3 2&r si,eEF1;F Jidt&EF;GF3 2p3"(nea de $rosor *Gp/. 0ue ocupa el @;H de la Centana.color a,ul % alineada a la i,0uierda624p3 2&r st%leEFJidt&6 @;HB &ei$&t6 *Gp/B 'acK$round9color6 r$'LG. G. 1;;+B mar$in9 le:t6 GptBF3 2p3"(nea de $rosor ;Gp/. 0ue ocupa el =GH de la Centana. color rojo . con 'orde *Gp/ Cerde % alineada a la derec&a624p3 2&r st%leEF'order9Jidt&6 *Gp/B Jidt&6 =GHB &ei$&t6 ;Gp/B color6 r$'LG. 1;;. G+B 'acK$round9color6 r$'L1;;. G. G+B mar$in9ri$&t6 GptBF3
&'bod() &'*tml) 3. %uardar como practica 4.html

PRCTICA ": Colores

Mtro aspecto mu% llamatiCo a la &ora de disear una p#$ina. es el uso de colores) Neali,a un documento &tml lo m#s parecido posi'le a la ima$en :inal) *+ La cabecera del documento junto con la etiqueta de apertura sera: 2&tml3 2&ead3 2title3colores24title3 24&ead3
2+ El cuerpo del documento quedara como el siguiente:

2'od% st%leEFcolor6 r$'LG. G. G+B 'acK$round9color6 r$'L*11. *11. *11+BF3 2p st%leEFcolor6 'lacKB :ont9Jei$&t6 'oldB :ont9si,e6 //9lar$eBF3OGGGGGG ne$ro24p3 2p st%leEFcolor6 J&iteB :ont9Jei$&t6 'oldB :ont9si,e6 //9lar$eBF3OPPPPPP 'lanco24p3 2p st%leEFcolor6 redB :ont9Jei$&t6 'oldB :ont9si,e6 //9lar$eBF3OPPGGGG rojo24p3 2p st%leEFcolor6 limeB :ont9Jei$&t6 'oldB :ont9si,e6 //9lar$eBF3OGGPPGG Cerde24p3 2p st%leEFcolor6 'lueB :ont9Jei$&t6 'oldB :ont9si,e6 //9lar$eBF3OGGGGPP a,ul24p3 2p st%leEFcolor6 %elloJB :ont9Jei$&t6 'oldB :ont9si,e6 //9lar$eBF3OPPPPGG amarillo24p3 2p st%leEFcolor6 :uc&siaB :ont9Jei$&t6 'oldB :ont9si,e6 //9lar$eBF3OPPGGPP morado.me,cla de rojo % a,ul24p3 24'od%3
&'*tml) 3+ %uardar como practica5.html.

PRCTICA #: $na ta%la comple&a

*+ "a ca'ecera del documento junto con la eti0ueta de apertura ser(a6 2&tml3 2&ead3 2title3una ta'la compleja24title3 24&ead3 1+ "a ta'la 0ue Camos a $enerar contiene siete celdas con una distri'uci-n poco &omo$Dnea el color del te/to no es del mismo color) el tamao de la :uente es di:erente. as( como la alineaci-n) con el o'jeto de tra'ajar con la ma%or(a de los par#metros 0ue &emos Cisto a lo lar$o del tema. cam'iaremos. adem#s. el color de :ondo de un par de celdas) El cuerpo del documento es el si$uiente6 2'od%3 2ta'le st%leEFte/t9ali$n6 le:tB Jidt&6 *GGHB mar$in9le:t6 autoB mar$in9ri$&t6 autoBF 'orderEF5F cellpaddin$EF1F cellspacin$EF1F3 2caption32span st%leEF:ont9Jei$&t6 'oldBF3TITQ"M DE "A TAB"A24span32'r3 24caption32t'od%3 2tr ali$nEFcenterF3 2t& colspanEF5F roJspanEF*F st%leEFCertical9ali$n6 topB 'acK$round9color6 r$'L*;5. 1;;. *;5+BF32:ont si,eEFR1F32span st%leEF:ont9Jei$&t6 'oldBF3CE"DA *24span324:ont32'r3 24t&3 24tr3 2tr3 2td colspanEF*F roJspanEF1F st%leEFCertical9ali$n6 middleB te/t9ali$n6 le:tB 'acK$round9color6 r$'L*G1. 1;;. 1;;+BF32:ont si,eEFR1F32span st%leEF:ont9Jei$&t6 'oldBF3CE"DA 124span324:ont324td3 2td st%leEFCertical9ali$n6 topB te/t9ali$n6 centerB color6 redBF32:ont si,eEFR1F32span st%leEF:ont9Jei$&t6 'oldBF3CE"DA 524span324:ont324td3 2td st%leEFCertical9ali$n6 topB te/t9ali$n6 centerBF32:ont si,eEFR1F32span st%leEF:ont9Jei$&t6 'oldBF3CE"DA 724span324:ont324td3 24tr3 2tr3 2td st%leEFCertical9ali$n6 topB te/t9ali$n6 centerB color6 redBF32:ont si,eEFR1F32span st%leEF:ont9Jei$&t6 'oldBF3CE"DA ;24span324:ont324td3 2td colspanEF*F roJspanEF1F st%leEFCertical9ali$n6 'ottomB te/t9ali$n6 ri$&tB 'acK$round9color6 r$'L1;;. *;5. 1;;+BF32:ont si,eEFR1F32span st%leEF:ont9Jei$&t6 'oldBF3CE"DA =24span324:ont324td3 24tr3 2tr3 2td st%leEFCertical9ali$n6 topB te/t9ali$n6 centerBF32:ont si,eEFR1F32span st%leEF:ont9Jei$&t6 'oldBF3CE"DA @24span324:ont324td3 2td st%leEFCertical9ali$n6 topB te/t9ali$n6 centerB color6 redBF32:ont si,eEFR1F32span st%leEF:ont9Jei$&t6 'oldBF3CE"DA I24span324:ont324td3 24tr3 24t'od%3 24ta'le3 24'od%3 24&tml3 5+ Guardar como practica6.html

PRCTICA ' (ima)en *e fon*o+

Qna :orma de poner una ima$en de :ondo en la eti0ueta 'od%) 2&tml3 2&ead3 2title3Pondo de prue'a24title3 24&ead3 2'od% st%leEFcolor6 r$'LG. G. G+B 'acK$round9color6 r$'L1;;. 1;;. 1;;+B 'acK$round9ima$e6 urlL:ile6444C64Qsers4Pu'lic4Pictures4SampleH1GPictures4Pen$uins)jp$+B 'acK$round9repeat6 no9repeatB 'acK$round9position6 center GHBF alinKEFOGGGGSSF linKEFOGGGGSSF ClinKEFOSSGGSSF3 2ta'le st%leEFte/t9ali$n6 le:tB Jidt&6 ;GHB 'acK$round9color6 r$'L1;;. 1;;. *;5+B mar$in9le:t6 autoB mar$in9 ri$&t6 autoB &ei$&t6 ;GHBF 'orderEF7F cellpaddin$EF1F cellspacin$EF1F3 2caption32'r32'r32'r32'r32'r32'r32'r32'r32'r32'r32'r32'r32'r3 24caption32t'od%3 2tr3 2t& colspanEF1F roJspanEF*F st%leEFCertical9ali$n6 middleB 'acK$round9color6 J&iteB te/t9ali$n6 centerBF3ENCABETADM2'r3 24t&3 24tr3 2tr3 2td st%leEFCertical9ali$n6 middleB te/t9ali$n6 centerBF3CE"DA*2'r3 24td3 2td st%leEFCertical9ali$n6 middleB te/t9ali$n6 centerBF3CE"DA12'r3 24td3 24tr3 24t'od%3 24ta'le3 2'r3 2'r3 24'od%3 24&tml3

PRCTICA , ( istas+

En este caso de'es de aCeri$uar cual ser# el c-di$o &tml9css para crear una lista ordenada) Crea una p#$ina 0ue muestre el si$uiente te/to6 Diarios de 6 *) ESPAUA))) a) El !undo ') El Pa(s c) "a Van$uardia 1) EE)QQ) I) NeJ VorK Times

II)

T&e Was&in$ton Post

PRCTICA - (Como incorporar .n icono a la %arra *e *irecciones+

Para &acer aparecer una ima$en en la 'arra de direcciones % en la pestaa del naCe$ador Je' .&a% 0ue aadir una linea de c-di$o entre las eti0uetas 2&ead3 % 24&ead

2&ead3 )))))))))))) 2linK relE"s&ortcut icon" &re:E"nom'reima$en)$i:" 3 ))))))))))) 24&ead3

ACTIVIDAD 10 ( ANCLAS)
Para las si$uientes actiCidades utili,aremos el pro$rama WM!PMTEN o NVQ 0ue est# en Aplicaciones 4 Pro$ramaci-n 4))) )Se trata de crear una p#$ina &tml donde ten$amos un (ndice al comien,o de Dsta) Cuando &a$amos clic so're un (tem de ese (ndice se de'e de producir un salto a la ,ona de la p#$ina donde se &a'la de ese (tem) En de:initiCa Camos a crear enlaces internos . osea . enlaces dentro del mismo documento &tml) Para ello &a% 0ue colocar en cada ,ona del documento a la 0ue se 0uiere saltar un ANC"A . L un ANC"A consiste simplemente en darle nom're a un punto concreto del documento para 0ue se pueda &acer re:erencia a Dl en un enlace +) "os enlaces se crear#n so're cada (tem del (ndice) Por ejemplo6 Tenemos esta p#$ina 0ue &a'la de >Internet? . al comien,o de la p#$ina se Ce el (ndice . cuando pulsemos so're >Mcio? se Cer# en el naCe$ador la parte del documento 0ue &a'la de >Mcio?)

Esto es lo 0ue se Ce al principio en el naCe$ador. pero el documento es m#s lar$o % si$ue &acia a'ajo)

Qna Ce, pulsemos so're >Mcio? se Cer# en pantalla la parte del documento 0ue &a'la de >Mcio?)

Si 0ueremos ColCer al (ndice podemos &acer clic en la :lec&a de >Pgina anterior> del propio naCe$ador Je' o podr(amos crear un enlace interno desde >Mcio? &acia el (ndice)

ACTIVIDAD 11( ENLACES EN IMGENES)

En esta actiCidad Camos a crear una ta'la de S :ilas / 5 columnas) En las :ilas pares insertaremos en cada celda una ima$en pe0uea de un tipo de :lor % en las :ilas impares pondremos el nom're de cada :lor) Qna Ce, &ec&o esto crearemos un enlace en cada ima$en para 0ue al pulsar . por ejemplo . en la NMSA se nos a'ra una p#$ina 0ue &a'le de NMSAS)

ACTIVIDAD 12 ( VIDEOS)
En esta actiCidad Camos a crear una ta'la de 1 :ilas por tres columnas % en cada celda insertaremos un C(deo con el tamao adecuado) Podremos Cisuali,ar todos los C(deos al mismo tiempo)

Podemos enla,ar directamente desde Voutu'e . Tu)tC . o cual0uier otro copiando el c-di$o &tml 0ue nos aparece a la derec&a del Cideo.donde aparece >Insertar?)

ACTIVIDAD 13 ( Mapa de imgenes)

Se trata de crear una mapa de im#$enes so're los personajes de los Simpsons) Al &acer clic so're cual0uier personaje L omer . Bart . "isa .)))+ se de'e de a'rir una p#$ina Je' 0ue nos ampl(e in:ormaci-n acerca de ese personaje)

Si &acemos clic en "isa se a'rir# una p#$ina 0ue &a'la de "isa) Qna manera :#cil de crear un mapa de im#$enes es utili,ando el procesador de te/to Writer)
*) A're un documento de te/to nueCo) Inserta una ima$en desde Barra de mens/Insertar/Imagen a partir de
archivo... 1) Ponte encima de la ima$en) Pulsar el 'ot-n derec&o del rat-n % elije !apa de im#$enes) 5) Di'uja un area Lrect#n$ulo . elipse .etc+ ) Escri'e la direcci-n del enlace % pulsa so're la V Cerde Larri'a a la i,0uierda) Cierra el cuadro de di#lo$o) 7) Guardar el arc&iCo como nom're)&tml % listo

Tam'ien se puede &acer con el editor de im#$enes Gimp6XC-mo se &aceY

*) A're tu ima$en en el Gimp % Cete a Filtros -> We -> !apa de imagen) Se a're una nueCa Centana con un
nueCo editor) Es mu% sencillo de usar. tan s-lo tienes 0ue seleccionar una ,ona con una de las &erramientas de la i,0uierda Lrect#n$ulos. c(rculos o pol($onos+) 1) "e haciendo clic#s para crear los nodos de t$ selecci%n % en el <ltimo &a, un do'le clicK) Se a'rir# entonces una nueCa Centana en la 0ue puedes seleccionar el tipo de enlace Lsitio Je'. correo. :tpZ+ % poner la direcci%n de internet a la 0ue 0uieres 0ue se dirija el naCe$ador al pulsar so're esa ,ona de la ima$en) 5) Qna Ce, le das a aceptar. te crea una entrada para esa ,ona reciDn seleccionada en la pila de selecciones. 0ue est# a la derec&a de la Centana. de'ajo del t(tulo &elecci%n) Para editarla. s-lo tendr#s 0ue seleccionarla de a&( % darle al iconito de editar) Va puedes crear m#s ,onas di:erentes. con sus propios enlaces. % se Can a$re$ando a la pila de selecciones) 7) Cuando %a ten$as todas las ,onas creadas % sus correspondientes enlaces. Ce a File -> Save as % $u#rdalo con el nom're 0ue t< 0uieras. mapaImagen.html en mi caso) Va puedes a'rir ese :ic&ero con tu naCe$ador pre:erido % compro'ar 0ue :unciona) ;) Por supuesto. puedes editar ese :ic&ero HTML % tratarlo como una p#$ina Je' con una ima$en en su interior. aadirle los ta$s de <html>. <body>. <head>. <title>Z

ACTIVIDAD 1 ( Ma!"#s # $!ames)

Con las eti0uetas 2:rameset3 % 2:rame3 podemos diCidir una p#$ina Je' en marcos. de tal :orma 0ue en cada marco se puede Cisuali,ar un arc&iCo &tml distinto) En esta actiCidad crearemos tres marcos6 Qno arri'a Ldonde pondremos el t(tulo de nuestra p#$ina+ . uno a la i,0uierda L donde &a'r# un (ndice de enlaces + % otro ma%or a la derec&a Ldonde se Can a ir Cisuali,ando los documentos &tml enla,ados a la i,0uierda+) Este sitio Je' de ejemplo trata so're pel(culas % su p#$ina principal es esta6

El documento &tml principal lo &acemos con un editor de te/to % lo llamamos Inde/)&tml 6

<html> <head><title>Frame_como_indice</title></head> <frameset rows="70,*" frameborder="0"> <frame name="Publicidad" src="Publicidad.html" scrolling="no"> <frameset cols="15 ,*" noframes> <frame name="Izquierda" src="Izquierda.html" <frame name="Derecha" src="Derecha.html" </frameset> </frameset> </html> scrolling="a!to"> scrolling="a!to">

Cada eti0ueta 2:rame3 de:ine a un marco) Con el atri'uto >name? asi$namos un nom're a cada marco para poder indicar en 0ue marco se de'e a'rir cada enlace) V con el atri'uto >src? indicamos 0ue documento &tml se Cer# por de:ecto en cada marco)

Para completar nuestro sitio Je' necesitamos Ladem#s del documento Inde/)&tml+ los si$uientes documentos &tml6 *+I,0uierda)&tml

1+Derec&a)&tml

5+Pu'licidad)&tml

7+Por cada pel(cula 0ue aparece en el (ndice de la i,0uierda e/istir# un documento &tml 0ue &a'lar# de ella . por ejemplo para la pel(cula Batman crearemos el documento >Batman)&tml?)

en la pa$ina principal se Cer# as(6L tanto el (ndice como la pu'licidad permanecen :ijos . solo cam'ia el marco >Derec&a? donde se Can Ciendo las pel(culas enla,adas+)

En el documento I,0uierda)&tml &a% 0ue modi:icar los enlaces poniDndoles el atri'uto tar$etE?Derec&a? para 0ue se a'ran los documentos &tml en el marco Derec&a)
<html> <head>

<title>"#$!ierda</title>

</head>

<bod% st%le="color& rgb'0, 0, 0() bac*gro!nd+color& rgb'0, 0, 0()" alin*=",ff0000" lin*=",ffffff" -lin*=",ffffcc"> <di- st%le="te.t+align& left) color& rgb'/55, /55, /55()"> <a target="0erecha" href="1atman2html"><s3an st%le="font+famil%& 4imes 5ew 6oman) font+weight& bold) te.t+decoration& !nderline)">174875</s3an></a><br st%le="font+famil%& 4imes 5ew 6oman) font+weight& bold) te.t+decoration& !nderline)"><br st%le="font+famil%& 4imes 5ew 6oman) font+weight& bold) te.t+decoration& !nderline)">

<a target="0erecha" href="93iderman2html"><s3an st%le="font+famil%& 4imes 5ew 6oman) font+weight& bold) te.t+decoration& !nderline)">9:"0;6875</s3an></a><br st%le="font+famil%& 4imes 5ew 6oman) font+weight& bold) te.t+decoration& !nderline)"> <br st%le="font+famil%& 4imes 5ew 6oman) font+weight& bold) te.t+ decoration& !nderline)"> <a target="0erecha" href="9!3erman2html"><s3an st%le="font+famil%& 4imes 5ew 6oman) font+weight& bold) te.t+decoration& !nderline)">9<:;6875</s3an></a><br st%le="font+famil%& 4imes 5ew 6oman) font+weight& bold) te.t+decoration& !nderline)"> <br st%le="font+famil%& 4imes 5ew 6oman) font+weight& bold) te.t+ decoration& !nderline)"> <a target="0erecha" href="=!l*2html"><s3an st%le="font+famil%& 4imes 5ew 6oman) font+weight& bold) te.t+decoration& !nderline)">=<>?</s3an></a><br st%le="font+famil%& 4imes 5ew 6oman) font+weight& bold) te.t+decoration& !nderline)"><br st%le="font+famil%& 4imes 5ew 6oman) font+weight& bold) te.t+decoration& !nderline)"> <a target="0erecha" href="@Fantasticos2html"><s3an st%le="font+famil%& 4imes 5ew 6oman) font+weight& bold) te.t+decoration& !nderline)">@

F754794"AB9</s3an></a><br

st%le="font+famil%& 4imes 5ew 6oman) font+ weight& bold) te.t+decoration& !nderline)"> <br st%le="font+famil%& 4imes 5ew 6oman) font+weight& bold) te.t+ decoration& !nderline)"> <a target="0erecha" href="Cmen2html"><s3an st%le="font+famil%& 4imes 5ew 6oman) font+weight& bold) te.t+decoration& !nderline)">C8;5</s3an></a></di-> </bod%> </html>

ACTIVIDAD 1% ( i&!ame)
En esta ocasi-n Camos a insertar un marco dentro de un documento &tml % en ese marco se Cisuali,ar# otro &tml) "a eti0ueta 2 i:rame3 permite insertar un marco dentro del documento) Punciona de manera similar a la eti0ueta 2:rame3 % 2:rameset3 pero la eti0ueta 2i:rame3 puede ser insertada entre el contenido de cual0uier documento &tml) 2i:rame3 es insertado en medio del te/to tal como una ta'la. % es mostrado como una Centana conteniendo el documento &tml) En el si$uiente ejemplo. el i:rame es insertado para mostrar otro documento. % un C(nculo es de:inido para los naCe$adores 0ue no soportan i:rames)
2&tml3 2&ead3 2'od%3 2title3IPNA!E24title3 24&ead3 2'r3 2center3ESTE ES QN !ANCM CENTNADM24center3 2'r3 2center3 2i:rame scrollin$EFautoF srcEF&ttp644JJJ)$oo$le)esF :rame'orderEF*F &ei$&tEF1GGF Jidt&EF7GGF3Si Ces este mensaje. si$ni:ica 0ue tu naCe$ador no soporta esta caracter(stica o estAaacuteB des&a'ilitada) Pero puedes acceder a esta in:ormaciAoacuteBn a0uAiacuteB 2a &re:EF&ttp644JJJ)&tml0uicK)com4re:erence4ta$s4a)&tmlF3ta$ T!" a24a3 24i:rame3 24center3 2'r3 ESTE EST A "A IT[QIENDA 2'r3 2i:rame scrollin$EFautoF ali$nEFle:tF srcEF&ttp644JJJ)JiKipedia)or$F :rame'orderEF*F &ei$&tEF1GGF Jidt&EF7GGF3 24i:rame3 2'r3 2p ali$nEFri$&tF3V ESTE A "A DENEC A24p3 2i:rame scrollin$EFautoF ali$nEFri$&tF srcEF&ttp644JJJ)$oo$le)esF :rame'orderEF*F &ei$&tEF1GGF Jidt&EF7GGF3 24i:rame3 2'r3 24'od%3 24&tml3

ACTIVIDAD 1' ( mapa g##g(e ) s*!ee* +ie,)

Para incorporar un mapa de Goo$le !aps a nuestra p#$ina Je' una de las posi'ilidades es usar la API de Goo$le !aps. pero no es sencilla para Je'masters sin conocimientos de pro$ramaci-n) Qna :orma m#s :#cil es la si$uiente6 *) Entrar a Goo$le !aps % naCe$a &asta 0ue ten$as la Cista del mapa 0ue 0uieres)

1) Pulsa donde pone >'nla(ar?) 5) Copia el c-di$o &tml )i*rame +idth,......

7) Si no puedes copiarlo es por0ue de'es de tener una cuenta de correo de $mail) Si no la tienes crDate una . es mu% :#cil) ;) Pe$ar el c-di$o &tml. 0ue es un i:rame. en el c-di$o &tml de la p#$ina Je'. donde 0uieres em'utir el mapa) =) Si deseas modi:icar el tamao de los mapas. solamente de'es &acer clic en Personali(ar o tener vista previa del mapa incr$stado.