Ejercicios HTML

1.- Agrega el siguiente nombre a la pgina WEB (Duracin 3 Minutos): ombre !e la "agina: E#ercicio 1.1 $itulo !e la "agina: "rimer E#ercicio !e %$M& '.- (tili)an!o la eti*ueta *ue aplica para los prra+os reali)a el e#ercicio con el siguiente te,to (Duracin - Minutos): ombre !e la "agina: E#ercicio 1.' $itulo !e "agina: ."or *ue /e !e especi+icar ms !e una +uente0 $e,to: Debe !e especi+icar mas !e una +uente en caso !e *ue su primera opcin no este !isponible en la computa!ora !el lector. (na !e las +uentes *ue especi+i*uen !eber ser una com1n2 como Arial para aumentar la probabili!a! !e *ue su pagina WEB la mostrara. 3.- (tili)an!o el mismo e#ercicio anterior presentarlo en una "agina WEB con los 3 atributos !e alineacin. 3omo resulta!o en la pagina aparecer el te,to 3 4eces pero con !i+erente alineacin. (Duracin - Minutos) ombre !e la "agina: E#ercicio 1.3 5esto igual al e#ercicio 1.' pero con las in!icaciones menciona!as al inicio !el e#ercicio 1.3 6.- (tili)an!o la eti*ueta !e 7alto !e l8nea !e te,to reali)ar el e#ercicio con el siguiente te,to. (Duracin - Minutos) ombre !e la "agina: E#ercicio 1.6 $8tulo: $/e 5eason $e,to: 9:m not a per+ect person $/ere:re man; t/ings 9 <is/ 9 ne4er !o But 9:m continue learning 9 ne4er meant to !o t/ese t/ings to ;ou 9 no< 9 /a4e to sa; be+ore 9 go $/at 9 #ust <ant ;ou to =no< -.- (tili)an!o el e#ercicio 1.6 reali)a lo siguiente (Duracin - Minutos): 3entra el titulo ; utili)a el tama>o mas gran!e !e te,to para encabe)a!os al igual agrega un ni4el 6 al resto !el te,to ombre !e la "agina: E#ercicio 1.$itulo 3entra!o con $e,to !e Encabe)a!o ms gran!e: $/e 5eason $e,to !e encabe)a!o i4el 6: 9:m not a per+ect person $/ere:re man; t/ings 9 <is/ 9 ne4er !o But 9:m continue learning 9 ne4er meant to !o t/ese t/ings to ;ou 9 no< 9 /a4e to sa; be+ore 9 go $/at 9 #ust <ant ;ou to =no< ?.- (tili)an!o el e#ercicio 1.- reali)a lo siguiente (Duracin 1@ Minutos): (tili)a los 3 atributos !e alineacin !e tal manera *ue el te,to aparecer tres 4eces en pgina WEB 3entra el titulo ; utili)a el tama>o mas gran!e !e te,to para encabe)a!os al igual agrega un ni4el 6 al resto !el te,to ombre !e la "agina: E#ercicio 1.? $itulo 3entra!o con $e,to !e Encabe)a!o ms gran!e: $/e 5eason $e,to !e encabe)a!o i4el 6: Fundamentos de TI y Nuevas Tecnologas Ing. Juan Vera Castillo

9:m not a per+ect person $/ere:re man; t/ings 9 <is/ 9 ne4er !o But 9:m continue learning 9 ne4er meant to !o t/ese t/ings to ;ou 9 no< 9 /a4e to sa; be+ore 9 go $/at 9 #ust <ant ;ou to =no< A.- 5eali)a el siguiente e#ercicio utili)an!o la eti*ueta !e pre+ormatea!o para te,to ; utili)an!o comentarios en ca!a eti*ueta e,plican!o para *ue se utili)a ca!a una !e las eti*uetas utili)a!as. (Duracin 1- Minutos) ombre !e la "agina: E#ercicio 1.A $itulo 3entra!o con $e,to !e Encabe)a!o ms gran!e: 9n+ormacin !e Autom4iles Autom4il Marca Mo!elo "recio 3/e4; BM '@@6 CA@2@@@ Ma,ima issan '@@C1D@2@@@ 7un+ire BM '@@6 CE@2@@@ Arma!a issan '@@? C3-@2@@@ D.- 5eali)a la siguiente "agina WEB (Duracin '@ Minutos)

CINEMARK
Te invitamos a que vengas a ver estas interesantes pelculas y conozcas nuestras nuevas salas con los equipos de sonido que te encantarn, con la compra de tu boleto tambin tendrs acceso a:
* Palomitas * Refresco * Hot Dog

Horarios de Peliculas
Pelicula Superman Break Up ision !mposi"le 3 Horarios 7:00 pm 8:00 pm #:00 pm Costo del Boleto $40.00 $35.00 $40.00 $%&'(

NO FALTES!!!!

Fundamentos de TI y Nuevas Tecnologas Ing. Juan Vera Castillo

E.- 5eali)a el E#ercicio 1.E con las siguientes instrucciones. "ara el t8tulo utili)a un tama>o !e letra gran!e. "rimer "rra+o utili)a la eti*ueta !e pre+ormatea!o2 resto !el te,to normal2 1ltimo te,to utili)ar un tama>o !e letra pe*ue>o ; encontrars caracteres especiales *ue se ten!rn *ue insertar. (Duracin 1@ Minutos)

t A T!
t.).*.u )+, -,.) /)*!.) 0 1U-!) 23-/32)

""" tat!girls com """ i#tersco$e com """ tat! r! """ !#i%ersalm!sic r!

&'&())( *#i%ersal M!sic R!ssia+ A#,er E-cl!si%e lice#se to I#tersco$e Recor,s

1@.- 5eali)a el E#ercicio 1.1@ con las siguientes instrucciones. "ara el titulo utili)a un tama>o !e letra gran!e2 letra negrita ; cFntralo a la pgina2 para el subtitulo utili)a un tama>o !e letra mas pe*ue>o *ue el titulo pero mas gra!e *ue el resto !el te,to2 con letra negrita. "ara el prra+o !e te,to utili)a un tama>o !e te,to normal. "re+ormatea la seccin !e e#emplo ; para la ultima seccin !e te,to utili)a un tama>o !e letra pe*ue>o ; caracteres especiales (Duracin 1@ Minutos)

INTRODUCCION A HTML
DOCUMENTOS HTML
Las $agi#as .E/ so# ,oc!me#tos HTML *# ,oc!me#to HTML co#siste e# te-to e i#str!ccio#es es$eciales llama,os eti0!etas Tie#e# las e-te#sio#es 1tml o 1tm
,4emplo: inde&.5tml $!ndica 6ue !nde& es un documento con contenido H* -(

Copyright 1997 por Trejos Herma os !"#esores$ !%A%

Fundamentos de TI y Nuevas Tecnologas Ing. Juan Vera Castillo

&

11.- 5eali)a el E#ercicio 1.11 utili)an!o el mismo E#ercicio 1.1@. En los t8tulos a!ems !e &etra en egrita agrega tambiFn letra 3ursi4a (Duracin - Minutos) 1'. 5eali)a el E#ercicio 1.1' con las siguientes instrucciones. "ara el t8tulo utili)a un tama>o !e letra gran!e2 agregan!o cursi4a ; negrita a!ems !e centra!o. "ara el subtitulo utili)a un tama>o !e letra normal a!ems !e negrita ; cursi4a2 "ara la primer seccin !e te,to utili)a la eti*ueta !e pre+ormatea!o ; la eti*ueta !e tac/a!o para los !atos *ue as8 lo in!ican. "ara la 1ltima seccin !e te,to utili)a un tama>o !e letra pe*ue>o a!ems !e utili)ar caracteres especiales (Duracin 1- Minutos)

TELMEX
LADA AUTOMATICA NACIONAL
7ec5a ar:0' ar:08 ar:'0 Hora '5:55 '5:4# '%:'5 $-)8)(*ele9ono $8'(8888 ;0%' $8'(8888 ;087 $8'(8888 #545 Po"lacion onterre< onterre< onterre= *ipo de *ari9a P!C3 P!C3 P!C3 inutos # ' !mporte '5.48 %.58

7.74

2 Telefo#os ,e Me-ico

13. 5eali)a el E#ercicio 1.13 utili)an!o el mismo E#ercicio 1.1' agregan!o subra;a!o al titulo2 subtitulo ; a los !atos !e 9mporte. (Duracin - Minutos)

TELMEX
LADA AUTOMATICA NACIONAL
Fecha Mar-0 Mar-0# Mar- 0 Hora !"!! !"+) %" ! (LADA)Telefono (# )#### $0% (# )#### $0#, (# )#### )!+! Poblacion Monterre& Monterre& MonterreTipo de Tarifa PI'( PI'( PI'( Minutos ) Importe !*+# %*!#

,*,+

' Te(e)o os *e Me+i#o

Fundamentos de TI y Nuevas Tecnologas Ing. Juan Vera Castillo

16. 5eali)a el E#ercicio 1.16 siguien!o las siguientes instrucciones. "ara el t8tulo utili)a un tama>o !e letra gran!e a!ems !e letra cursi4a ; negrita. "ara las ecuaciones utili)a el mismo tama>o !e letra *ue el titulo a!ems !e los !atos en sub8n!ice ; super8n!ice (Duracin - Minutos)

Ecuaciones Matemticas -2.,-, -2./-& -/.0-2

1-. 5eali)a el E#ercicio 1.1- siguien!o las siguientes instrucciones. "ara el te,to utili)a un tama>o !e letra gran!e en negrita ; centra!o. "ara el primer prra+o !e te,to utili)a la eti*ueta !e $e,to $ipo Mecanogra+ia!o ; para el segun!o prra+o utili)a un tama>o !e letra normal. (Duracin - minutos)

1ti2"eta Te+to Tipo Me#a ogra)ia*o

,stas eti6uetas dan un 9ormato de te&to o porcion del documento 6ue en>lo"an. ,ste tipo de eti6uetas tiene una marca inicial? < una marca 9inal i>ual 6ue la inicial? pero con el caracter @A@.

Estas etiquetas dan un formato de texto o porcion del documento que engloban Este tipo de etiquetas tiene una marca inicial! " una marca final igual que la inicial! pero con el caracter #$#
1?. 5eali)a el E#ercicio 1.1? siguien!o las siguientes instrucciones. "ara el t8tulo utili)a un tama>o !e letra gran!e en negrita ; cursi4a a!ems !e centra!o a!ems !e especi+icar el tipo !e letra *ue se !esea utili)ar. "ara la seccin !e te,to utili)a un tama>o !e letra normal alinean!o el te,to al centro ; especi+ican!o el tipo !e +uente *ue se !esea utili)ar. o Gl4i!es colocar una Huente a!icional por si la primer opcin no se encuentra !isponible. (Duracin 1@ Minutos)

EDITOR DE TEXTO
n editor de te!to es un "rograma sencillo #ue "uede utili$ar "ara crear y editar documentos #ue contienen solo
Fundamentos de TI y Nuevas Tecnologas Ing. Juan Vera Castillo

te!to. No incluyen o"ciones avan$adas de edicion o %ormato.

1A. 5eali)a el E#ercicio 1.1A siguien!o las siguientes instrucciones. "ara el t8tulo utili)ar un tama>o !e letra gran!e con cursi4a ; negrita a!ems !e centra!o. "ara la seccin !e te,to alinea la seccin !e te,to /acia la !erec/a ; espec8+ica un tipo !e +uente a utili)ar. I en generales utili)a la eti*ueta con la *ue se selecciona el tama>o !e la +uente !e to!o el !ocumento. (Duracin 1@ Minutos)

Cambiar el Texto
"ue!e cambiar el tama>o !e los caracteres in!i4i!uales en su pgina Web para crear e+ectos !e te,to interesantes ............
1D. 5eali)a el E#ercicio 1.1D siguien!o las siguientes instrucciones. "ara el t8tulo utili)a un tama>o !e letra gran!e2 especi+ica el tipo !e letra a utili)ar2 subra;a!o2 negrita2 cursi4a ; centra!o. "ara la primera seccin !e te,to utili)a pre+ormatea!o a!ems !e sub8n!ices ; super8n!ices !on!e se in!ica. "ara la segun!a seccin !e te,to utili)a tipo !e te,to mecanogra+ia!o2 letra cursi4a ; la alineacin !e la seccin centra!a a!ems !e subra;a!o en las partes *ue se in!ican. "ara la tercer seccin !e te,to utili)a la eti*ueta !e tac/a!o. "ara la cuarta seccin !e te,to utili)a los caracteres especiales *ue se in!ican. En generales especi+ica el tama>o !e letra para to!o el !ocumento a!ems !el tipo !e +uente *ue aplicar para to!o el !ocumento ; los espacios en blanco correspon!ientes. (Duracin '@ Minutos)

PROGRAMAS PARA CREAR PAGINAS WEB

/ditor de Te0to /1emplo " 2otepad Documento 4*t0t Procesador de Palabras /1emplo%" 3ord Documento 4*doc

Para crear una Pagina WEB usando un editor de texto o procesador de palabras, debe de digitar el texto y luego las etiquetas HTML

Necesita un e!"lorador de la &E'

Fundamentos de TI y Nuevas Tecnologas Ing. Juan Vera Castillo

(Editorial Maran)ra"*ics
1E. 5eali)a el e#ercicio 1.1E siguien!o las siguientes instrucciones. "ara el titulo especi+ica un tama>o !e letra gran!e2 negrita2 cursi4a2 subra;a!o ; centra!o. "ara la seccin !e te,to alineacin centra!a ; especi+ica un tama>o !e letra normal. (Duracin - Minutos)

EXPLORADORES DE LA WEB
*# e-$lora,or ,e la .E/ es !# $rograma 0!e le $ermite %er 3 e-$lorar i#formaci4# e# la ... Microsoft I#ter#et E-$lorer es !# e-$lora,or ,e la .E/ Po$!lar 0!e es $arte ,e .i#,o"s P!e,e tam5i6# o5te#erlo e# el sitio """ microsoft com7ie o e# tie#,as ,e com$!taci4#

'@. 5eali)a el e#ercicio 1.'@ siguien!o las siguientes instrucciones. "ara el t8tulo especi+ica un tama>o !e letra gran!e ; especi+ica el tipo !e letra a utili)ar2 a!ems !e utili)ar negrita2 centra!o2 cursi4a ; subra;a!o. "ara el subtitulo especi+ica un tama>o normal !e letra ; especi+ica un tipo !e letra a!ems !e subra;a!o ; alineacin a la i)*uier!a. "ara la seccin !e te,to especi+ica un tama>o !e letra normal ; un tipo !e letra a!ems !e letra cursi4a. En generales utili)a la eti*ueta para *ue to!o el te,to !el !ocumento este !e un olor !e+ini!o (el *ue tu !eci!as). (Duracin 1@ Minutos)

INTRODUCCION A LA WEB
+,)IN, &E'
Una pagina Web es un documento en la WWW. Puede incluir texto, imgenes, sonido y video.

Fundamentos de TI y Nuevas Tecnologas Ing. Juan Vera Castillo

'1. 5eali)a el e#ercicio 1.'1 siguien!o las siguientes instrucciones. "ara el t8tulo especi+ica un tama>o !e letra gran!e2 un tipo !e +uente ; un color !etermina!o a!ems !e negrita ; entra!o. "ara la seccin !e te,to especi+ica un tama>o !e letra2 un tipo !e +uente ; un color !etermina!o !i+erente al titulo a!ems e alineacin centra!a ; letra cursi4a. (Duracin 1@ Minutos)

HI+E-VINC L./

Las paginas WEB contienen hipervnculos, los cuales son texto o imgenes destacados en una pgina Web que se conecta a otras pginas en la WWW. Puede selecionar un hipervnculo para mostrar una Pgina WEB ubicada en la misma computadora o en alguna parte al otro lado de la ciudad, pas o el mundo.
''. 5eali)a el e#ercicio 1.'' siguien!o las siguientes instrucciones. "ara el titulo especi+icar un tama>o !e letra gran!e2 un tipo !e +uente ; un color !etermina!o a!ems !e centra!o2 negrita ; subra;a!o. "ara el subtitulo especi+icar un tama>o !e letra ; un color !etermina!o !i+erente al titulo. 7eparar en !os prra+os la primera ; segun!a seccin !e te,to. . "ara la palabra WEB especi+icar un tama>o !e letra ; un olor para ca!a una !e las letras2 los olores !e las 3 letras !ebe !e ser !i+erente a!ems !e negrita ; centra!o. I en generales especi+icar un color !e +on!o para to!o el !ocumento ; especi+icar un color !e te,to para to!o el !ocumento a!ems !e un tama>o !e +uente para to!o el !ocumento. (Duracin '@ Minutos)

-a$ones +ara Crear +aginas &E'

Compartir I )orma#i3 4erso a(
M!c1as $erso#as crea# $8gi#as .E/ $ara com$artir i#formaci4# acerca ,e s!s familias+ mascotas+ %acacio#es o
Fundamentos de TI y Nuevas Tecnologas Ing. Juan Vera Castillo

$asatiem$os fa%oritos Otros lo 1ace# $ara $rese#tar !# c!rric!l!m a $atro#os $ote#ciales P!e,e# crear $8gi#as .E/ $ara mostrar i#formaci4# acerca ,e !#a orga#i9aci4# a cl!5 al 0!e $erte#ece Es $osi5le i#cl!ir !#a $rogramaci4# ,e f!t!ros e%e#tos e i#formaci4# ,etalla,a acerca ,e las metas ,e ,ic1a orga#i9aci4#

17

'3. 5eali)a el e#ercicio 1.'3 utili)an!o las mismas intrusiones *ue el E#ercicio 1.'' solo *ue en el segun!o prra+o utili)ar la eti*ueta para crear un blo*ue. (Duracin Minutos) '6. 5eali)a el e#ercicio 1.'6 siguien!o las siguientes instrucciones. "ara el titulo especi+icar un tama>o !e letra2 tipo !e +uente ; color !etermina!o a!ems !e centra!o ; negrita. "ara el resto !el !ocumento crear una lista or!ena!a especi+ican!o los caracteres especiales !on!e apli*uen. En generales agregar un color !e +on!o al !ocumento as8 como especi+icar un color para el te,to !e to!o el !ocumento ; un tama>o !e letra para to!o el !ocumento. (Duracin 1@ Minutos)

+,0 1E M,N2,N,
: ( C;rc!los e-te#,i,os ,e masa 58sica $ara $a3 ( < Ta9a=:(> g7?o9@ ,e a9Acar B C C!c1ara,ita ,e Ca#ela Moli,a
'-. 5eali)ar el e#ercicio 1.'- utili)an!o las mismas instrucciones *ue el e#ercicio 1.'6 solo *ue en los ingre!ientes comen)ar la lista or!ena!a con el 4alor 32 !an!o como resulta!o ingre!ientes 32 6 ; -. (Duracin - Minutos) '?. 5eali)ar el e#ercicio 1.'? utili)an!o las mismas instrucciones *ue el e#ercicio 1.'6 solo *ue la lista or!ena!a !e los ingre!ientes !eber iniciar con el Jalor A. "osteriormente comen)ar otra lista or!ena!a con el 4alor !e 1meros 5omanos. (Duracin - Minutos)

Fundamentos de TI y Nuevas Tecnologas Ing. Juan Vera Castillo

+,0 1E M,N2,N,
A ( C;rc!los e-te#,i,os ,e masa 58sica $ara $a3 / < Ta9a=:(> g7?o9@ ,e a9Acar C C C!c1ara,ita ,e Ca#ela Moli,a I II III ( C;rc!los e-te#,i,os ,e masa 58sica $ara $a3 < Ta9a=:(> g7?o9@ ,e a9Acar C C!c1ara,ita ,e Ca#ela Moli,a

'A. 5eali)ar el e#ercicio 1.'A utili)an!o las mismas instrucciones *ue el e#ercicio 1.'6 solo *ue en lugar !e crear una lista or!ena!a con los ingre!ientes se utilice una lista !esor!ena!a. (Duracin - Minutos) 'D. 5eali)ar el e#ercicio 1.'D con las siguientes instrucciones. "ara el titulo utili)ar un tama>o !e letra gran!e2 con negrita2 especi+ican!o un color ; un tipo !e +uente a!ems !e centra!o. "ara la lista !e !e+inicin ca!a 9tem !e la lista !eber !e ir en negrita ; con un color !i+erente al !el titulo. (Duracin 1@ Minutos)

GLOSARIO
A ti8ir"s !o)t9are Los %ir!s ,e soft"are so# molestos 5its ,e c4,igo 0!e $!e,e# ,eteriorar s!s arc1i%os ,e $rograma Para $roteger s! com$!ta,ora ,e5er8 !tili9ar !# soft"are ,e a#ti%ir!s A #ho *e 7a *a Re$rese#ta c!a#ta i#formaci4# $!e,e lle%ar !#a re, E#tre m8s am$lio el A#c1o ,e /a#,a ,e !#a re, 3 m8s r8$i,a s! %eloci,a,+ m8s i#formaci4# $o,r8 almae#ar
'E. 5eali)ar el e#ercicio 1.'E con las siguientes instrucciones. "ara los t8tulos K3G $E 9DG ; B&G7A59GL utili)ar letra negrita ; especi+icar un tama>o gran!e !e letra2 un tipo !e letra ; un color !e +uente. "ara los subt8tulos K&A7 3&A793A72 "AI DE H5($A72 3%9HHG 2 E7"E39A7L especi+icar un color !e +uente ; negrita. En generales para to!o el !ocumento mane#ar un color !e +on!o2 un tama>o !e letra ; un color para la +uente !e to!o el !ocumento2 e,cepto para los t8tulos ; subt8tulos. "ara el primer prra+o !e te,to alinearlo /acia la i)*uier!a ; utili)ar letra cursi4a. "ara el segun!o prra+o utili)ar cursi4a ; consi!era *ue el segun!o prra+o esta !entro !el primero. "ara &A7 3&A793A7 utili)a una lista or!ena!a2 para "AI7 DE H5($A7 una lista !esor!ena!a ; para B&G7A59G una lista !e !e+inicin. (Duracin '@ Minutos)

Fundamentos de TI y Nuevas Tecnologas Ing. Juan Vera Castillo

1:

CONTENIDO
LA! CLA!ICA! : Pa3 ,e Ma#9a#a ( Pa3 ,e Cere9a B Pa3 Ke3 Lime

4A;! D1 <RUTA! Pa3 ,e Moras Pa3 ,e D!ra9#o Estilo Deorgia Pa3 ,e Cir!ela

GLOSARIO
CHI<<ON Es !# ti$o ,e relle#os $ara $a3s 0!e a$recia $or ser ligero 3 es$o#Eoso 1!41CIA! Los aceites esce#ciales ,e las es$ecias so# s! f!e#te ,e sa5or $ero se e%a$ora# co# el tiem$o

Los pays o tartas recin hechos, sencillos y deliciosos, representan la omida asera en su mximo esplendor. Sin embargo, a pesar de su apariencia casera, hay algunos trucos para hacer pays y tartas partiendo desde cero. Por esta razn le sugiero que lea la seccin de temas bsicos al final de este libro antes de empezar a hacer las recetas. n ella encontrar todo lo que necesita saber acerca del equipo adecuado y los ingredientes a usar, as! como explicaciones detalladas acerca de las tcnicas que le proporcionarn los me"ores resultados

3@. 5eali)a el e#ercicio 1.3@ siguien!o las siguientes instrucciones. "ara el t8tulo especi+ica un tama>o !e letra ; un color !etermina!o a!ems !e centra!o. Agrega una imagen M.B9H o M.N"EB. (Duracin - Minutos)

Fundamentos de TI y Nuevas Tecnologas Ing. Juan Vera Castillo

11

OLD NAFG
31. 5eali)a el e#ercicio 1.31 siguien!o las mismas instrucciones *ue el e#ercicio 1.3@ pero agregan!o un bor!e a la imagen ; centran!o la imagen. (Duracin - Minutos) 3'. 5eali)a el e#ercicio 1.3' siguien!o las mismas instrucciones *ue el e#ercicio 1.31 pero agregan!o un te,to alternati4o a la imagen. "ara 4er su +uncionamiento colocar e*ui4oca!o la !ireccin !e la imagen. (Duracin - Minutos) 33. 5eali)a el e#ercicio 1.33 siguien!o las siguientes instrucciones. Agregar una imagen al !ocumento2 colocarle un bor!e alre!e!or ; agregarle te,to alternati4o. Alinear te,to con la imagen2 utili)an!o los 3 atributos !e alineacin !e te,to para imgenes !e tal manera *ue la imagen aparecer tres 4eces #unto con el te,to pero con !i+erente alineacin. "ara *ue las imgenes no salgan empalma!as !espuFs !e ca!a imagen agrega !os saltos !e l8nea. Agregar un titulo a la "gina *ue apare)ca centra!o con un tipo !e +uente2 tama>o !e letra ; color !e+ini!o $e,to a agregar: 7i /a a#usta!o te,to alre!e!or !e una imagen2 no pue!e alinearla con te,to. (Duracin 1@ minutos). 36. 5eali)a el E#ercicio 1.36 siguien!o las siguientes instrucciones. Agregar una imagen al !ocumento2 colocarle un bor!e2 agregarle te,to alternati4o ; a#ustar el te,to alre!e!or !e la imagen utili)an!o los !os atributos !e a#uste !e te,to alre!e!or !e imagen. De tal manera *ue en la pantalla !ebern !e aparecer !os imgenes ca!a una con los atributos !e a#uste !e te,to. "ara *ue las imgenes no salgan empalma!as !espuFs !e ca!a imagen agrega los saltos !e l8nea *ue correspon!an. Agregar un titulo a la "gina *ue apare)ca centra!o con un tipo !e +uente2 tama>o !e letra ; color !e+ini!o $e,to a a#ustar alre!e!or !e la imagen: 3omo t8tulo AN(7$A5 $EO$G A&5EDEDG5 DE ( A 9MABE especi+ican!o un tipo !e +uente2 un tama>o ; un color2 "rra+o !e $e,to "ue!e a#ustar el te,to alre!e!or !e una imagen para !arle a su pagina WEB una apariencia pro+esional. 7i /a alinea!o una imagen con te,to2 no pue!e en4ol4erlo alre!e!or !e la imagen. (Duracin 1- Minutos) 3-. 5eali)a el e#ercicio 1.3- siguien!o las instrucciones *ue el e#ercicio 1.36 pero agregan!o la eti*ueta !e !etener el te,to con los 3 atributos *ue le correspon!en. De tal manera *ue ten!rs *ue agregar una imagen ms para el tercer atributo !e !etener el te,to. (Duracin 1- Minutos) 3?. 5eali)a el e#ercicio 1.3? siguien!o las instrucciones !el e#ercicio 1.3- pero agregan!o espacios alre!e!or !e una imagen tanto /ori)ontalmente como 4erticalmente. (Duracin - Minutos). 3A. 5eali)a el e#ercicio 1.3A siguien!o las instrucciones !el e#ercicio 1.3? pero agregan!o una imagen !e +on!o a la pgina. (Duracin - Minutos) 3D. 5eali)a el e#ercicio 1.3D siguien!o las siguientes instrucciones. $8tulo principal: 3G 7ENG7 "A5A AB5EBA5 9MPBE E72 en negrita2 subra;a!o2 centra!o2 especi+icar un tama>o !e letra ; un color. Agregar una imagen utili)an!o un bor!e2 un te,to Fundamentos de TI y Nuevas Tecnologas Ing. Juan Vera Castillo

12

alternati4o2 alinean!o el te,to alre!e!or !e la imagen /acia la i)*uier!a. $e,to a utili)ar: $9"G7 DE 9MPBE E7 (Especi+icar un tama>o !e letra2 un tipo !e +uente ; un color) Al agregar imgenes a sus paginas WEB2 !ebe !e utili)ar las !e tipo B9H o N"EB *ue son las mas populares en WWWW. "ue!e utili)ar un programa !e e!icin para con4ertirla a +ormato B9H o N"EB. (En 3ursi4a) Agregar otra imagen utili)an!o un bor!e2 un te,to alternati4o2 alinean!o el te,to alre!e!or !e la imagen /acia la !erec/a ; agregan!o espacios alre!e!or !e la imagen tanto /ori)ontalmente como 4erticalmente. $e,to a utili)ar: $AMAQG DE ( A 9MABE &as imgenes aumentan el tiempo *ue toma para *ue una pgina WEB apare)ca en la pantalla. 7i !ura !emasia!o2 los lectores pue!en per!er interes e irse a otra pagina. (En cursi4a ; utili)an!o te,to tipo mecanogra+ia!o) 3uan!o sea posible2 !eber utili)ar imgenes o arc/i4os pe*ue>os2 ;a *ue estas se trans+erirn ms rpi!o. (3ursi4a2 te,to tipo mecanogra+ia!o ; utili)an!o la eti*ueta *ue permite !etener el a#uste !el te,to alre!e!or !e una imagen). Agregar otra imagen utili)an!o un bor!e2 un te,to alternati4o2 alinean!o el te,to alre!e!or !e la imagen /acia la !erec/a ; agregan!o espacios alre!e!or !e la imagen tanto /ori)ontalmente como 4erticalmente. Escribir incorrecta la !ireccin !e la imagen para *ue apare)ca el te,to alternati4o. En generales colocar una imagen !e +on!o a to!a la pgina. (Duracin '@ Minutos) 3E. 5eali)a el E#ercicio 1.3E siguien!o las siguientes instrucciones. "ara el t8tulo 3(A $A7 5EB&A7 %G59RG $A&E7 "(EDG AB5EBA5 A M9 "AB9 A agregarlo centra!o2 en negrita2 en cursi4a2 subra;a!o ; especi+ican!o un tipo !e +uente2 un tama>o ; un color. "ara el conteni!o !e la pgina agregar una regla /ori)ontal ; el siguiente prra+o !e te,to en cursi4a: o utilice !emasia!as reglas /ori)ontales en su pagina WEB2 ;a *ue esto pue!e !istraer a sus lectores ; /acerla !i+8cil !e leer. "ara la 1ltima seccin !e te,to en cursi4a agregue otra regla /ori)ontal ; el siguiente te,to: $rate !e no colocar mas !e una regla en ca!a pantalla. (Duracin - Minutos) 6@. 5eali)a el E#ercicio 1.6@ siguien!o las instrucciones !el e#ercicio 1.3E solo *ue agrega un anc/o !i+erente a ca!a una !e las reglas /ori)ontales. (Duracin Minutos) 61. 5eali)a el E#ercicio 1.61 siguien!o las instrucciones !el e#ercicio 1.6@ solo *ue especi+ica el porcenta#e en *ue !eber !e aparecer la regla a lo anc/o !el !ocumento. "ara la regla /ori)ontal 1 especi+ica el -@S ; para la ' el A-S. (Duracin - Minutos) 6'. 5eali)a el E#ercicio 1.6' siguien!o las instrucciones !el e#ercicio 1.61 solo *ue especi+ica la alineacin !e las reglas /ori)ontales. "ara la regla /ori)ontal 1 alineacin a la !erec/a2 para la ' alineacin a la i)*uier!a ; agrega una tercer regla al +inal !el !ocumento con un anc/o !e 1- porcenta#e !e 1@@S ; alineacin centra!a. (Duracin - Minutos) 63. 5eali)a el E#ercicio 1.63 siguien!o las instrucciones !el e#ercicio 1.6' solo *ue especi+ica un color para ca!a una !e las reglas /ori)ontales. (Duracin - Minutos) 66. 5eali)a el E#ercicio 1.66 siguien!o las siguientes instrucciones. "ara el titulo principal J9 3(&G7 utili)a una letra cursi4a2 en negrita2 centra!o ; especi+ican!o un tipo !e +uente un tama>o ; un color. Agrega una regla /ori)ontal especi+ican!o anc/o2 alineacin2 color ; porcenta#e para *ue apare)ca a lo anc/o !e la pgina. Fundamentos de TI y Nuevas Tecnologas Ing. Juan Vera Castillo

1&

"ara los 48nculos 4amos a traba#ar con ' 48nculos. El primero /acien!o un 48nculo con un E#ercicio ;a reali)a!o en este aso el E#ercicio 3E ; el segun!o a la "agina principal !e %otmail.

VINCULOS
Ir a EEercicio BH Ir a Pagi#a Pri#ci$al Hotmail
6-. 5eali)a el E#ercicio 1.6- siguien!o las instrucciones !el 1.66 pero a!ems agrega una imagen ; /a) un 48nculo !e esta para *ue al seleccionarla nos lle4e a la "agina !el e#ercicio 3E ; agrega otra imagen ; /a) un 4inculo !e esta para *ue al seleccionarla nos lle4e a la "agina principal !e %otmail. (Duracin 1@ Minutos) 6?. 5eali)a el E#ercicio 1.6? siguien!o las siguientes instrucciones. "ara el t8tulo principal J9 3(&G7 DE $5G DE ( A "AB9 A utili)ar negrita ; centra!o. 5eali)ar un 4inculo !entro !e una misma pagina WEB llaman!o a los 48nculos "aso 1 "onerle nombre al rea !e la pagina WEB ; "aso ' 3rear el Jinculo con un rea !e la pagina WEB. Agregar una imagen ; el te,to *ue se in!ica posteriormente otra imagen ; la ultima seccin !e te,to. Jeri+ica *ue los 48nculos +unciones al seleccionar "aso 1 el 48nculo te !ebe !e lle4ar automticamente a la seccin !e te,to "aso 1 ; si seleccionas "aso ' el 48nculo te !ebe !e lle4ar a la seccin !e te,to "aso '. (Duracin 1- Minutos)

=INCULO! D1NTRO D1 UNA 4A>INA Paso : Po#erle #om5re al 8rea ,e la $agi#a .E/ Paso ( Crear el Fi#c!lo co# !# 8rea ,e la $agi#a .E/ IMADEN

Paso : Po#erle #om5re al 8rea ,e la $agi#a .E/ De5e ,e $o#erle #om5re al 8rea ,e la $8gi#a .E/ 0!e ,esea 0!e los lectores %ea# r8$i,ame#te IMADEN

Paso ( Crear el %i#c!lo co# !# area ,e la $agi#a .E/ De5e crear !# %;#c!lo 0!e los lectores $!e,a# seleccio#ar $ara mostrar el 8rea ,e la $8gi#a .E/
6A. 5eali)a el E#ercicio 1.6A siguien!o las instrucciones !el e#ercicio 1.6? solo *ue con la primer imagen crear un 48nculo *ue te lle4e a la misma imagen ; agrega un te,to Fundamentos de TI y Nuevas Tecnologas Ing. Juan Vera Castillo

1,

*ue te in!i*ue *ue al seleccionar la imagen te lle4ar a la misma amplia!a. (Duracin - Minutos). 6D. 5eali)a el E#ercicio 1.6D siguien!o las instrucciones !el e#ercicio 1.6A pero a!ems agregar al +inal !el !ocumento un 48nculo con tu !ireccin !e correo electrnico con el te,to En4iar correo electrnico para ms in+ormacin. (Duracin Minutos) 6E. 5eali)a el E#ercicio 1.6E siguien!o las instrucciones !el e#ercicio 1.6D pero a!ems agregar colores a los lin=s 4isita!os ; no 4isita!os. (Duracin - Minutos) -@. 5eali)a el E#ercicio 1.-@ siguien!o las siguientes instrucciones. "ara el t8tulo cFntralo ; utili)a negrita con un tama>o !e letra normal. 9nserta una tabla como la *ue se muestra a continuacin: (Duracin 1@ Minutos)

12"ipos America /arcelo#a Port!gal

1?UI4O! D1 <UT7OL @"ga*ores >o(es Memo Oc1oa ) Rafael Mar0!e9 B Figo ?

-1. 5eali)a el E#ercicio 1.-1 siguien!o las instrucciones !el e#ercicio 1.-@ pero agregan!o un bor!e a la tabla. (Duracin - Minutos) -'. 5eali)a el E#ercicio 1.-' siguien!o las instrucciones !el e#ercicio 1.-1 pero agregan!o la eti*ueta !e le;en!a para tablas en tama>o 62 centra!a2 negrita ; cursi4a colocan!o como le;en!a 9n+ormacin !e E*uipos. (Duracin - Minutos). -3. 5eali)a el E#ercicio 1.-3 siguien!o las instrucciones !el e#ercicio 1.-' pero combinan!o las cel!as a tra4Fs !e columnas como se muestra a continuacin. (Duracin - Minutos)

1?UI4O! D1 <UT7OL In ormacion !e los E"ui#os 12"ipos *e <"tAo( 12"ipos I#formacio# America Port!gal Memo Oc1oa Figo ) ? /arcelo#a Rafael Mar0!e9 B @"ga*ores >o(es

-6. 5eali)a el E#ercicio 1.-6 siguien!o las instrucciones !el e#ercicio 1.-' pero combinan!o las cel!as a tra4Fs !e +ilas como se muestra a continuacin. (Duracin - Minutos)

1?UI4O! D1 <UT7OL In ormacion !e los E"ui#os

Fundamentos de TI y Nuevas Tecnologas Ing. Juan Vera Castillo

1/

12"ipos 12"ipos *e <"tAo(

@"ga*ores

>o(es ) ?

America Memo Oc1oa Port!gal Figo

/arcelo#a Rafael Mar0!e9 B

--. 5eali)a el E#ercicio 1.-- siguien!o las instrucciones !el e#ercicio 1.-6 pero agregan!o alineacin !e !atos /ori)ontalmente ; 4erticalmente. "rimer Hila Alineacin 3entra!a ; arriba2 segun!a +ila alineacin a la !erec/a ; al centro2 tercera +ila alineacin a la i)*uier!a ; aba#o ; cuarta +ila !e#ar los 4alores !e+ault. (Duracin 1@ Minutos). -?. 5eali)a el E#ercicio 1.-? siguien!o las siguientes instrucciones. (tili)a las eti*uetas necesarias para con+igurar un +ormulario ; crea !os cua!ros !e te,to. "rimer cua!ro !e te,to para K ombre !el AlumnoL con un anc/o !e -@ caracteres ; como numero m,imo !e caracteres a intro!ucir !e 6-. 7egun!o 3ua!ro !e te,to para KDireccinL con las mismas caracter8sticas !el primero. $8tulo !e la pgina en negrita ; cursi4a K9n+ormacin !el AlumnoL. (Duracin 1@ Minutos) -A. 5eali)a el e#ercicio 1.-A siguien!o las instrucciones !el E#ercicio 1.-? pero a!ems incorpora un rea !e te,to gran!e para K3omentarios ; 7ugerenciasL !on!e los comentarios *ue intro!u)ca el lector se a#usten automticamente. (Duracin Minutos) -D. 5eali)a el e#ercicio 1.-D siguien!o las instrucciones !el E#ercicio 1.-A pero a!ems incorpora cua!ros !e 4eri+icacin antes !el rea !e te,to !e comentarios. &os cua!ros !e 4eri+icacin son para KMatemticasL ; KH8sicaL. Antes agrega el te,to K3ual es tu materia +a4orita:L (Duracin - Minutos) -E. 5eali)a el e#ercicio 1.-E siguien!o las instrucciones !el E#ercicio 1.-D pero a!ems incorpora botones !e opcin antes !el rea !e te,to !e comentarios. &os botones !e opcin son para KTuintoL ; K7e,toL. Antes agrega el te,to KEn *ue semestre estas:L (Duracin - Minutos) ?@. 5eali)a el e#ercicio 1.?@ siguien!o las instrucciones !el E#ercicio 1.-E pero a!ems agrega un botn !e En48o ; uno !e Eliminar al +inal !e comentarios ; 7ugerencias. (Duracin - Minutos) ?1. 5eali)a el e#ercicio 1.?1 siguien!o las siguientes instrucciones. 3oloca un soni!o !e +on!o para la pagina WEB2 crea un 48nculo *ue al ser selecciona!o por el usuario se acti4e un soni!o ; coloca una imagen !e tal manera *ue al ser selecciona!a por el usuario se acti4e un soni!o. $8tulo !e la "gina en letra gran!e2 negrita ; cursi4a KAgregan!o 7oni!osL. (Duracin 1@ Minutos) ?'. 5eali)a el e#ercicio 1.?' siguien!o las siguientes instrucciones. 3rea un 48nculo *ue al ser selecciona!o por el usuario se acti4e un 4i!eo ; coloca una imagen !e tal manera *ue al ser selecciona!a por el usuario se acti4e un 4i!eo. $8tulo !e la "gina en letra gran!e2 negrita ; cursi4a KAgregan!o Ji!eosL. (Duracin 1@ Minutos)

FIN333333
Fundamentos de TI y Nuevas Tecnologas Ing. Juan Vera Castillo

10

Fundamentos de TI y Nuevas Tecnologas Ing. Juan Vera Castillo

17