Escolar Documentos
Profissional Documentos
Cultura Documentos
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
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>
2.
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'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
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 , ( 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)
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 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?)
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
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
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.