WebHt ml

INDICE
.- Conceptos Bsicos
- Qu es una pgina Web?
- Qu es HTML?
- Qu se necesita?
2.- La Primera Pgina
.- !mp"ian#o "a primera pgina
$.- Los Hiper%&ncu"os
'.- (nc"uir imgenes
).- Co"ocar *on#os
+.- Cambiar "etras #e" te,to
- Tipo #e "etra
- Tama-o #e "etra
- Letra en negrita
- Te,to subra.a#o
/.- Hacer "istas
- 0r#ena#as
- 1esor#ena#as
2.- !p"icar co"ores a" te,to
34.- Te,to en Mo%imiento
33.- Hacer tab"as
32.- Los 5rames
3.- *rames en casca#a
3$.- *ormu"arios
3'.- Lineas #esp"egab"es . ca6as #e se"ecci7n
3).- *ormu"ario acti%o
3+.- Lineas #e #i%isi7n
3/.- (nc"uir soni#os
32.- (#enti5ica#ores ocu"tos
24.- !"gunos e5ectos
Captulo 1.
Antes de empezar a hacer la primera pgina, vamos a definir algunos conceptos bsicos:
Qu es una Pgina Web?.
8na pgina 9eb no es mas :ue un con6unto #e #ocumentos #e te,to estan#ar :ue pue#e crear con
cua":uier procesa#or #e te,tos; pero con "a pecu"iari#a# :ue to#os estos #ocumentos estan uni#os
me#iante <iperen"aces. =stos <iperen"aces son esos te,tos sobre "os :ue pue#es <acer c"ic> para
#irigirse a otro #ocumento.
8na pgina 9eb esta 5orma#a basicamente por te,to . eti:uetas <tm". Las eti:uetas <tm" #an e" 5ormato
a" #ocumento.
La pgina 9eb mas simp"e es un te,to so"amente; comprueba"o tu mismo; con e" Wor#Pa#; escribe un
te,to cua":uiera; . guar#a"o con "a e,tensi7n <tm". 1espues crga"o con e" e,p"ora#or.
Qu es HTML?
La abre%iatura HTML ?H.perte,t Mar>up Language?; :ue tra#uci#o a" caste""ano :uiere #ecir ?Lengua6e
para crear <iperte,tos?.
Con e" "engua6e HTML se pue#e #ar 5ormato a" te,to #e "as pginas Web; . "o mas importante; permite
intere"acionar unas pginas con otras uti"i@an#o <iper%&ncu"os para ?na%egar? a tra%s #e "a in5ormaci7n
. sa"tar #e pgina en pgina para "oca"i@ar "a in5ormaci7n #esea#a.
Qu se necesita?
Para programar en HTML tan so"o necesitamos un or#ena#or con Win#o9s 2' o 2/ . un Aa%ega#or
para po#er %er "as pginas; #e "os cua"es e,isten %arios; pero "os mas conoci#os . uti"i@a#os son e"
(nternet =,p"orer . e" Aetscape Communicator.
Tambin se necesita un e#itor #e #ocumentos #e te,tos. =" ?B"oc #e Aotas? :ue %iene con Win#o9s 2'
o 2/ nos pue#e %a"er per5ectamente.
Captulo 2.
LA !"#$!A A%"&A.
Bien; una %e@ tenien#o c"aro estos conceptos; po#emos empe@ar a <acer nuestra pri mera
pgina.
Lo pri mero :ue tenemos :ue <acer es abrir e" ?B"oc #e notas?; <acien#o c"ic> en ?(nicio?;
?Programas?; ?!ccesorios? . por B"ti mo en ?B"oc #e notas?.
(ntro#uce "as siguientes $ "ineas #e te,to pu"san#o "a tec"a =nter a" 5ina" #e ca#a "inea; esto
es mu. importanteC
D<t m" E
D<ea#E
Dti t " eEMi pri mera paginaDF t i t " eE
DF<ea#E
Con estas "ineas; "o :ue estamos <acien#o es #an#o un t&tu"o a nuestra pgina; :ue %a a
aparecer en "a barra superior #e "a %entana #e" na%ega#or ca#a %e@ :ue muestre "a pgina.
Gamos a escribir "ineas mas . "uego %eremos e" resu" ta#o Hrecuer#a :ue #ebes pu"sar "a
tec"a =nter a" 5ina" #e ca#a "ineaI. 1eba6o #e "o anterior; escribe "o siguienteC
Dbo#.E
JHo"aJ; esto. <acien#o una prueba
=sta es mi pri mera pgina con HTML.
DFbo#.E
!<ora %amos a guar#ar e" #ocumento en "a ruta :ue tu :uieras Hte recomi en#o en Mis
1ocumentosI con e,tension <tm"; es #ecir; Primerapag.<t m" .
Gamos a abrir e" arc<i %o Primerapag.<t m" .
Ka estas %ien#o tu pri mer #ocumento; 5&6ate en "a barra superior #e "a %entana #e"
na%ega#or . en "a pgina.
Para %er e" te,to #e" #ocumento; por si se :uiere <acer a"guna mo#i5icaci 7n; cuan#o estes
#entro #e "a pgi na; e"ige "a opci7n G=L #e "a barra superior . #entro #e esta <a@ c"ic en
C01(M0 *8=AT=; %eras e" te,to.
Ha@ "a prueba; %ue" %e a entrar en Primerapag.<t m" .
! :ue <a si#o 5ci"; no es gran cosa; pero por a"go se empie@a.
Gamos a #e5ini r un poco "os i#enti 5ica#ores :ue <emos intro#uci #o en esta pginaC
- D<t m" E :uiere #ecir :ue e" te,to :ue aparece a continuaci 7n es una pgi na Web.
- D<ea#E es "a ?cabe@a? #e" te,to HTML . se uti"i@a para #e5ini r a"gunos %a"ores :ue se
re5ieren a to#a "a pgina.
- Dbo#.E es e" ?cuerpo?; . en e" es #on#e se sue"en intro#uci r "os te,tos . "as imgenes
:ue se mostraran en e" na%ega#or.
- Dbr E es e" i#enti 5i ca#or :ue in#ica "a na%ega#or :ue #ebe sa"tar una "inea para seguir
con "a presentaci7n #e" te,to o imgenes.
Ni te #as cuenta tambi n <as intro#uci #o otros i#enti 5i ca#ores como DF<t m" E; DFti t" eE o
DF<ea#E.
=stos se conocen como ?i#en5ica#ores #e cierre?; . gracias a e""os po#emos #i%i #i r e"
#ocumento en %arias secciones in#epen#i entes. Por e6emp" o to#o "o :ue este entre "os
i#enti 5ica#ores Dti t" eE . DF ti t" eE es e" t&tu"o #e "a pgina.
=" i#enti 5i ca#or Dbr E no necesi ta i#enti 5ica#or #e cierre.
Captulo '.
A#L"A&() LA !"#$!A A%"&A.
Gamos a conti nuar amp"i an#o nuestra pgi na; a-a#ien#o a"gunos otros i#enti 5i ca#ores;
como por e6emp" o DpE. Hemos %isto como para crear sa"tos #e "inea usamos e"
i#enti 5ica#or Dbr E; pues para crear sa"tos #e prra5o uti"i@aremos DpE. !bre e" 5ic<ero #e
te,to Primerapag.t,t . %amos a a-a#ir a"gunas "ineas ms. 1espus #e" i#enti 5ica#or
Dbo#.E a-a#e "o siguienteC
D<t m" E
D<ea#E
Dti t " eEMi pri mera paginaDF t i t " eE
DF<ea#E
Dbo#.E
JHo"aJ; esto. <acien#o una pruebaDbr E
=sta es mi pri mera pagina con HTML.
DpELas mu6eres representan e" $3O #e "os usuarios #e (nternet en to#o e" mun#o. =n
=sta#os 8ni#os .a <an supera#o a "os internautas <ombresDF pE
DpELas internautas sue"en tener entre 2' . ' a-os; tienen estu#ios superiores . son #e
c"ase me#ia a"ta. DF pE
DFbo#.E
DF<t m" E
Ne guar#a e" 5ic<ero con e" mismo nombre :ue "a B"ti ma %e@ HPimerapag.<t m" I. Gamos a
abrir e" arc<i %o Primerapag.<t m"
Como <as po#i#o %er e" i#enti 5ica#or DpE <ace separar e" te,to por prra5os; "o cua" e" mu.
importante para consegui r :ue nuestros te,tos sean muc<o ms c"aros.
Los te,tos "os po#emos co"ocar en e" "ugar :ue :ueramos; para "o cua" so"o tenemos :ue
uti"i@ar "as siguientes eti:uetasC
Dcenter EC=ATL!10DFcenter E Centra "os caracteres compren#i #os
entre "a eti:ueta.
D#i % a"ignP" e5 t E! L! (QQ8(=L1!DF#i %E !"inea e" te,to a "a i@:uier#a.
D#i % a"ignPri g<t E! L! 1=L=CH!DF#i %E !"inea e" te,to a "a #erec<a.
DH, T(T8L0DFH,E Nir%e para poner e" titu"o; sien#o ,
un numero #e 3 a +;
segBn e" tama-o :ue "e :ueramos #ar a" t&tu"o.
DH, a"ignPcenter ET(T8L0
C=ATL!10DFH,E
1e6a e" titu" o centra#o.
DH, a"ignP" e5 t ET(T8L0
(QQ8(=L1!DFH,E
1e6a e" t&tu"o a "a i@:uier#a.
DH, a"ignPri g<t ET(T8L0
1=L=CH!DFH,E
1e6a e" t&tu"o a "a #erec<a.
DP a"ignPcenter EP!LL!*0
C=ATL!10DFPE
1e6a e" prra5o centra#o.
DP a"ignP" e5 t EP!LL!*0 (QQ8(=L1!DFPE 1e6a e" prra5o a "a i@:uier#a.
DP a"ignPri g<t EP!LL!*0 1=L=CH!DFPE 1e6a e" prra5o a "a #erec<a.
Captulo *.
L)+ ,"$!-" &C.L)+.
=n este cap&tu" o %amos a %er "os <iper%&ncu"os o en"aces; para "o cua" %amos a a-a#ir una
"inea a nuestra pgi na.
Para incorporar un en"ace <a. :ue uti"i@ar este i#enti 5i ca#or D!E . DF!E. To#o "o :ue
encerremos entre e""os .a sea te,to o imgenes; ser consi#era#o como en"ace.
Ne %isua"i@ar #e manera #istinta en e" na%ega#or. =" te,to aparecer subra.a#o . #e un
co"or #isti nto a" <abi tua"; . "as imgenes estarn ro#ea#as por un bor#e #e" mismo co"or
:ue e" #e" te,to #e" en"ace.
!ntes #e" i#enti 5ica#or DFbo#.E a-a#i mos "as siguientes "ineasC
Go. a <acer un <iper%&ncu" o para entrar en "a pgina #e Terra.
Da <re5 P?<t t pCFF999. terra.es? DTerraEDF aEDbr E
!" pu"sar sobre e" en"ace; seremos en%ia#os a" #ocumento :ue apuntaba e" en"ace; :ue en
este caso es "a pgina #e Terra.
Por supuesto #ebers estar conecta#o a (nternet para :ue 5uncione.
Como pue#es %er #espus #e" i#enti 5i ca#or DaE aparece "a instrucci7n HL=*P . a
continuaci 7n entre comi"" as "a #irecci7n #e "a pgi na #e Terra. La #irecci7n estar en
5ormato 8LL H8ni5orm Lesource LocatorI.
Tambin se pue#e <acer un en"ace <acia un 5ic<ero situa#o en e" mismo #irectorio; por
e6emp" oC
Da <re5 P?5 i c<ero.<t m" ? E*i c<eroDF aE
o <acia una #irecci7n #e =mai"; por e6emp" oC
Da <re5 P? mai " toCpepeRterra.es? E1i reccion =-mai" DFaE.
Captulo /.
"&CL."! "#A%$&$+.
!<ora %amos a inc"ui r imgenes en "a pgina; con "o :ue consegui remos :ue esta :ue#e
ms atracti %a.
Para e""o "o pri mero :ue necesi tamos son arc<i %os #e imagen para insertar"os.
8na #irecci7n #e "a :ue pue#es sacar imgenes gratui tas es
<ttpCFF999.comstoc>.comF9eb. 1e a<& sacamos "as #os :ue uti"i@aremos para nuestro
e6emp" o :ue sonC mar.6 pg . sports.6pg.
Para e""o so"o tienes :ue entrar en "a pgi na . cuan#o %eas "as imgenes pu"sar con e"
bot7n #erec<o #e" rat7n sobre e""a . se"eccionar "a opci7n ?Muar#ar imagen como?. Las
guar#aremos en "a misma carpeta #on#e <emos guar#a#o "os anteri ores 5ic<eros.
!ntes #e" i#enti 5ica#or DFbo#.E a-a#i mos "as siguientes "ineasC
DpEDi mg srcP? mar.6 pg? a"ignP" e5 t <spaceP34E
=sto es una prueba para insertar una imagen en esta pagina Web; espero :ue sa"ga
bien. DF pE
DpEHe co"oca#o "a imagen en "a parte i@:uier#a #e "a panta"" a; #e 5orma :ue este te,to
:ue#e situa#o en e" parte #erec<a. DF pE
DpEDi mg srcP?sports.6 pg? a"ignPri g<t <spaceP34E
=n este caso; <e co"oca#o "a imagen en "a parte #erec<a #e "a panta"" a; "o cua" ob"iga a :ue
to#o e" te,to se situe automati camente en "a parte i@:uier#a #e "a pgi na. DF pE
Dbr c"earPa" " E
Dbr E
Las imgenes inserta#as en esta pgina <an si#o saca#as #e una #ireccion #e (nternet
#on#e se o5recen mi"es #e imgenes gratui tas.
- =" i#enti 5ica#or (MM in#ica a" na%ega#or :ue %a a mostrar una imagen.
- NLCP?mar.6 pg? sir%e para in#icar cua" es "a imagen :ue #ebe mostrar . :ue #ebe estar
inc"ui #a en "a misma carpeta :ue "a pgi na HTML.
- Con !L(MAPL=*T in#icamos :ue "a imagen se #ebe situar a "a i@:uier#a . e" te,to a su
#erec<a. Ni omi ti mos este parmetro e" te,to se mostrar #eba6o #e "a imagen.
- HNP!C= 34 sir%e para :ue e" te,to no :ue#e pega#o a "a imagen; sino :ue <a.a una
separaci7n. Cuanto ma.or sea e" numero; ma.or ser e" espacio.
- =" parmetro DBL CL=!LP!LLE in#ica a" na%ega#or :ue e" te,to :ue %iene a conti nuaci7n
#ebe :ue#er situa#o #eba6o #e "a imagen.
Ni por e6emp" o :uisieramos poner "a imagen en e" centro; uti"i@ariamos e" parmetro 0i mg
src12mar. 3 pg2 align1cent er 4
Po#emos tambi en "ograr :ue una imagen tenga un ma.or o menor tama-o segBn nuestras
necesi#a#es.
Ni por e6emp" o :ueremos :ue mar.6 pg tenga un tama-o ma.or a" origina"; pon#ri amos
0i mg src12mar. 3 pg2 5idth122662 height 122/62 align1l ef t hspace1164 S #on#e 244
seria e" anc<o en pi,e"es . 2'4 e" a"to.
Los #os 5ormatos #e imagen reconoci #os en e" Web; son e" 5ormato M(* %ersi7n /2a
Hm,i mo 2') co"oresI o e" 5ormato TP=M. Para e" 5ormato Mi5; recor#aremos "a caracter&stica
?entre"a@o? :ue permi te recargar progresi %amente "a imagen a" abrir "a pgina. =stos #os
5ormatos #an resu"ta#os bastante e:ui %a"entes aun:ue TPM es ms bien recomen#a#o para
imagenes con tonos mati@a#os o #es%aneci #os.
Captulo 7.
C)L)CA! 8)&()+ ($ A%"&A.
AL%.&A+ !$C)#$&(AC")&$+.
!ntes #e apren#er a co"ocar "os 5on#os es importante :ue sigas "as siguientes
recomen#aci ones a "a <ora #e con5eccionar "a pginaC
3.- Ha. :ue tener en cuenta a "a <ora #e <acer "a pgina :ue to#os "os arc<i %os :ue se
uti"i@an; tanto "os #e e,tensi7n <tm" como "os #e imagen H6pg o gi5I o "os #e soni#o
H9a% o mi#I #eben estar en "a carpeta en "a :ue se esta crean#o "a pgi na para :ue
sta se pue#a %er correctamente.
2.- !" inc"ui r arc<i %os #e imagen; e%itar "os :ue no tengan e,tesi7n .6pg o .gi5; por:ue
pue#en #ar "ugar a errores H.bmp por e6emp" oI.
.- Para capturar una arc<i %o #e imagen; s7"o tienes :ue pinc<ar con e" bot7n #erec<o
#e" rat7n sobre "a imagen . e"egir "a opci7n ?Muar#ar imagen como...?; e"igien#o "a
carpeta #on#e :uieres co"ocar e" arc<i %o . #ar"e un nombre a" mismo.
$.- Tener cui#a#o con "as pa"abras en "as :ue se tengan :ue uti"i@ar caracteres
especia"es; sobre to#o "as acentua#as . "as ?-?.
'.- 8na %e@ crea#a; probar su 5uncionami ento con a" menos #os na%ega#ores;
especia" mente (nternet =,p"orer . Aetscape Aa%igator :ue son "os ms uti"i@a#os.
1espus #e "as anteri ores puntua" i@aciones; %amos a apren#er a co"ocar una imagen #e
5on#o; para "o cua" uti"i@aremos "a #ireccion 999.#i mpres.com . cogeremos este arc<i %o
en 5ormato M(* ?*on#o.gi5? como 5on#o para nuestra pgina.
Para guar#ar" o en nuestra carpeta <aremos "o mismo :ue para guar#ar "as imagenes;
nombran#o" o como 5on#o.gi 5.
Para e""o insertaremos en nuestro #ocumento "a siguiente "inea #espues #e e" i#enti 5ica#or
DF<ea#E . #entro #e Dbo#.EC
Dbo#. bac>groun#P?5 on#o.gi 5 ? E
=" parametro B!CUML08A1 in#ica a" na%ega#or :ue co6a "a imagen . "a uti"ice como 5on#o
#e "a pgina.
=" tama-o no tiene importanci a; por:ue "a i"ustraci 7n se repeti r %arias %eces como si 5uera
un mosaico :ue cubre to#o e" 5on#o #e nuestra pgina.
Gamos a %er to#as "as "ineas :ue <emos intro#uci #o en nuestra pgi na #es#e :ue se
iniciamos e" cursoC
D<t m" E
D<ea#E
Dti t " eEMi pri mera paginaDF t i t " eE
DF<ea#E
Dbo#. bac>groun#P?5 on#o.gi 5 ? E
JHo"aJ; esto. <acien#o una pruebaDbr E
=sta es mi pri mera pgina con HTML.
DpELas mu6eres representan e" $3O #e "os usuarios #e (nternet en to#o e" mun#o. =n
=sta#os 8ni#os .a <an supera#o a "os internautas <ombresDF pE
DpELas internautas sue"en tener entre 2' . ' a-os; tienen estu#ios superiores . son #e
c"ase me#ia a"ta. DF pE
Go. a <acer un <iper%&ncu" o para entrar en "a pgina #e Terra.
Da <re5 P?<t t pCFF999. terra.es? ETerraDF aEDbr E
DpEDi mg srcP? mar.6 pg? a"ignP" e5 t <spaceP34E
=sto es una prueba para insertar una imagen en esta pgina Web; espero :ue sa"ga
bien. DF pE
DpEHe co"oca#o "a imagen en "a parte i@:uier#a #e "a panta"" a; #e 5orma :ue este te,to
:ue#e situa#o en e" parte #erec<a. DF pE
DpEDi mg srcP?sports.6 pg? a"ignPri g<t <spaceP34E
=n este caso; <e co"oca#o "a imagen en "a parte #erec<a #e "a panta"" a; "o cua" ob"iga a :ue
to#o e" te,to se situe automati camente en "a parte i@:uier#a #e "a pgi na. DF pE
Dbr c"earPa" " E
Dbr E
Las imgenes inserta#as en esta pgina "as <e saca#o #e una #irecci7n #e (nternet #on#e
se o5recen mi"es #e imgenes gratui tas.
DFbo#.E
DF<t m" E
Tambien #e 5on#o #e pgi na po#emos co"ocar simp" emete un co"or; para "o cua"
uti"i@aremos e" parametro BMC0L0L en e" :ue se especi5ica e" porcenta6 e #e co"or segBn e"
codigo !%9 HLe# Mreen B"ueI cu.a me@c"a #e estos tres co"ores #a e" co"or re:ueri #o.
La instrucci7n concretamente ser&a "a siguienteC
Dbo#. bgco"or P? V******?E
Tambien a %eces es con%eni ente :ue en "a instrucci7n :ue in#icamos a" na%ega#or "a
imagen #e 5on#o :ue :ueremos insertar; pongamos a continuacion "a instrucci on anteri or;
.a :ue en caso #e :ue e" na%ega#or #e a"guna persona no este con5i gura#o para mostrar
"as imgenes; muestre e" co"or #e 5on#o por #e5ecto.Por e6emp" oC
Dbo#. bac>groun#P? manc<as.6 pg? bgco"or P? V******?E
Captulo :.
CA#9"A! LA+ L$;!A+ ($L ;$<;).
=n este capitu"o %amos a apren#er a cambi ar "as "etras #e" te,toS poner"o en negri ta; en
cursi %a; subra.ar . cambi ar e" tipo . e" tama-o #e "a "etra.
!-a#e "as siguientes "ineas antes #e" i#enti 5i ca#or DFbo#.EC
DpE
G0K ! H!C=L 8A!N PL8=B!N C!MB(!A10 L0N T(P0N 1= L=TL!NCDbr E
DbE=ste te,to esta en negri taDF bEDbr E
Di E=ste te,to esta en cursi%aDF i EDbr E
DuE=ste te,to esta subra.a#oDF uEDbr E
Dt t E=ste te,to tiene "a apariencia #e estar escrito por una ma:ui na #e escribir DF t t EDbr E
D5ont 5aceP?!ri a" B"ac>? E=ste te,to esta en !ria" B"ac>DF 5 ont EDbr E
D5ont si@eP?)? E=" tama-o #e esta "etra es gran#eDF 5 ont EDbr E
DbEDi E Du E D5 ont 5aceP?!ri a" B"ac>? E=ste te,to esta en negri ta; cursi%a; subra.a#o . con
"etra !ria" B"ac>DF5 ont EDF i EDF u E DF b E Dbr E
- =" i#enti 5ica#or DbE muestra e" te,to en negri ta <asta e" i#enti 5i ca#or #e cierre DFbE.
- =" i#enti 5ica#or Di E muestra e" te,to en cursi%a <asta e" i#enti 5i ca#or #e cierre DFi E.
- =" i#enti 5ica#or DuE muestra e" te,to subra.a#o <asta e" i#enti 5i ca#or #e cierre DFuE.
- =" i#enti 5ica#or Dt t E muestra e" te,to como si estu%i era escrito por una m:ui na #e
escribir <asta e" i#enti 5ica#or #e cierre DFt t E.
- =" i#enti 5ica#or D5 ont E in#ica a" na%ega#or un 5ormato #e te,to :ue pue#e ir acompa-a#o
#e %arios parmetros; en este caso *!C= para cambiar e" tipo #e "etra . N(Q= para cambi ar
e" tama-o.
Captulo =.
C)#) ,AC$! L"+;A+.
=n este cap&tu" o apren#eremos a <acer "istas or#ena#as con uti"i@an#o "as eti:uetas D8LE
. D0LE.
3.- La eti:ueta D8LE nos permi te presentar "istas #e e"ementos sin or#en a"guno. Ca#a
e"emento #e "a "ista ir norma" mente prece#i #o por un c&rcu"o. Por e6emp" o;
D8LE
DL( ENo. e" pri mero #e "a "ista
DL( ENo. e" segun#o #e "a "ista
DL( ENo. e" tercero #e "a "ista
DF8LE
2.- La eti:ueta D0LE nos permi te presentar "istas #e e"ementos or#ena#os #e menor a
ma.or. Aorma" mente ca#a e"emento #e "a "ista ir prece#i #o por su nBmero en e" or#en.
Por e6emp" o;
D0LE
DL( ENo. e" pri mero #e "a "ista
DL( ENo. e" segun#o #e "a "ista
DL( ENo. e" tercero #e "a "ista
DF0LE
Gamos a a-a#i r estas "ineas antes #e" i#enti 5ica#or DFbo#.E #e nuestro #ocumento .
#espues %eremos como :ue#a en "a pgina.
DbE=sto es un e6emp" o #e una "ista en :ue ca#a e"emento esta prece#i #o por un
puntoDF bE
D8LE
DL( ENo. e" pri mero #e "a "ista
DL( ENo. e" segun#o #e "a "ista
DL( ENo. e" tercero #e "a "ista
DF8LE
DbE=sto es un e6emp" o #e una "ista en :ue ca#a e"emento esta prece#i #o por un numero
:ue "os or#enaDF bE
D0LE
DL( ENo. e" pri mero #e "a "ista
DL( ENo. e" segun#o #e "a "ista
DL( ENo. e" tercero #e "a "ista
DF0LE

Po#emos amp" iar un poco este cap&tu" o #e "as "istas #icien#o :ue po#emos consegui r por
e6emp" o a-a#ir a "as eti:uetas D8LE . D0LE una serie #e parmetros :ue <acen cambiar
e" punto o e" numero #e or#en :ue prece#e a "os e"ementos. GeamosC
La eti:ueta D8LE a#mi te estos parmetros; :ue in#ican a" na%ega#or e" #ibu6o :ue
prece#er a ca#a e"emento #e "a "ista.
- D8L t.peP?#i sc? E
- D8L t.peP?ci rc" e? E
- D8L t.peP?s:uare? E
La eti:ueta D0LE a#mi te estos parmetros; :ue in#icaran a" na%ega#or e" tipo #e
numeraci 7n :ue prece#er a ca#a e"emento #e "a "ista.
- D0L t.peP?3? E
- D0L t.peP?!? E
- D0L start P?num? E
=ste B"ti mo in#ica a" na%ega#or e" nBmero por e" :ue se empe@ar a contar "os e"ementos
#e "a "ista.
Captulo >.
AL"CA! C)L)!$+ $& L)+ ;$<;)+.
=n este cap&tu" o apren#ers a uti"i@ar %arios co"ores en e" te,to.
!"gunos e"ementos #e #e te,to tienen me6or aspecto . resu" tan ms ""amati %os cuan#o
uti"i@an un co"or #istinto #e" resto.
Para e""o uti"i@aremos e" parmetro C0L0L.
Gamos a a-a#i r a"gunas "ineas a nuestra pgina. !ntes #e" te,to :ue comien@a ?"as
imgenes inserta#as....?; a-a#i mos "a "ineaC
D5ont co"orP?re#? E
K ponemos e" i#enti 5ica#or #e cierre #espues #e ?...mi" es #e?
DF5ont E
1espues a-a#i mos antes #e "a pa"abra ?..i mgenes?; "a "inea
D5ont co"orP? .e" " o9? E
. e" i#enti 5i ca#or #e cierre #espues #e ?gratui tas.?
=" te,to :ue#ar&a #e "a siguiente maneraC
D5ont co"orP?re#? ELas imgenes inserta#as en esta pgi na "as <e saca#o #e una #irecci7n
#e (nternet #on#e se o5recen mi"es #eDF5ont ED5 ont co"orP? .e" " o9? E imgenes
gratui tas. DF 5 ont E
Nenci""amente con esto consegui mos :ue to#o este prra5o apare@ca en co"or ro6o Hre#I
#ebi#o a :ue se e6ecuta "a or#en ?co"or P?; pero so"o <asta e" pri mer i#enti 5i ca#or #e cierreS
"uego e" te,to aparecera en amari "" o H.e""o9I.
La manera #e especi5icar"e e" co"or pue#e <acerse #e #os 5ormas; bien indicando el
nombre ; si es un co"or norma"; o bien especi5ican#o e" porcenta6 e #e ro6o; %er#e . a@u"
?c@digo !%9A #e" mismo.
Los co"ores reconoci#os son "os siguientesC
B"ac> Ni"%er Mra. W<ite Maroon Le# Purp"e *uc<sia
Mreen Lime 0"i%e Ke""o9 Aa%. B"ue Tea" !:ua
Captulo 16.
;$<;) $& #)-" #"$&;).
Hemos apren#i #o <asta a<ora a cambiar tama-os; "etras; co"ores; etc... en e" te,to.
Pues bien; a<ora %amos a %er como po#emos consegui r :ue e" te,to se mue%a en una
pgina; #esp"a@an#ose #es#e un "a#o #e "a panta" "a . #esaparecien#o por e" otro.
=" te,to en mo%i mi ento nos ser%ira muc<as %eces para #estacar a"go en especia" . :ue
:ueremos :ue "a persona :ue %isita nuestra pagi na se 5i6e especia" mente.
=" te,to en mo%i mi ento es propio #e" na%ega#or (nternet =,p"orer; asi como e" te,to :ue
parpa#ea es propio #e Aestcape.
La eti:ueta :ue se uti"i@a para este tipo #e te,to es M!LQ8==.
=ste te,to tambi en po#emos trans5ormar" o <acien#o :ue tenga un co"or; un tama-o . un
5on#o #etermi na#o.
Gamos a %er un e6emp" o a-a#ien#o "as siguientes "inea a nuestro #ocumento antes #e"
prra5o 2$sto es un e3emplo de una lista en Bue cada element o. . . . . . 2 #on#e
empe@amos a <acer "as "istasC
D5ont 5aceP?!ri a" ? co"or P?re#? si@eP?$? E Dmar:uee bgco"or P? V334444? E=ste te,to en
mo%i mi ento con "etras ro6as corre sobre un 5on#o negroDF mar:ueeEDF 5 ont E
(nc"uso po#emos consegui r :ue e" te,to no #esapare@ca por un "a#o #e "a panta" "a; sino
:ue se #esp"ace a"ternati %ament e #e un "a#o a otro #e "a panta"" a; siempre #entro #e "os
"&mi tes #e "a mar:uesi na.
Gamos a a-a#i r otra "inea a conti nuaci 7n #e "a :ue <emos intro#uci #o antesC
Dmar:uee be<a%i or Pa" t ernateEMe esto. mo%i en#o #e un "a#o a otro . no
#esapare@co. DF mar:ueeE
Captulo 11.
,AC"$&() ;A9LA+.
La 5orma ms c"ara #e organi@ar "a in5ormaci7n es me#iante "as tab"as.
Las tab"as %ienen #e5ini #as #e "a siguiente 5ormaC
Primero; "as caracter&sticas #e "a tab"aS "uego "as #e ca#a 5i"a . #entro #e sta; ca#a ce"#a.
Por e6emp" o si :uisieramos <acer una tab"a con 5i"as . co"umnas se #ec"arar&a as&C
DT!BL=E
DTLE
DT1E5 i " a 3;cua#ro 3DFT1E
DT1E5 i " a 3;cua#ro 2DFT1E
DT1E5 i " a 3;cua#ro DFT1E
DFTLE
DTLE
DT1E5 i " a 2;cua#ro 3DFT1E
DT1E5 i " a 2;cua#ro 2DFT1E
DT1E5 i " a 2;cua#ro DFT1E
DFTLE
DTLE
DT1E5 i " a ;cua#ro 3DFT1E
DT1E5 i " a ;cua#ro 2DFT1E
DT1E5 i " a ;cua#ro DFT1E
DFTLE
DFT!BL=E
!#ems #e" te,to; en una ce"#a po#emos insertar co"ores; a#ornos; imgenes...... <asta
po#emos #ar un co"or #etermi na#o a" bor#e #e "a tab"a. Con e" siguiente e6emp" o "o
%eremos mas c"aro; pues es e" :ue %amos a inc"ui r en nuestro #ocumento; antes #e"
in#enti 5i ca#or DFbo#.E
DbE=A =NT! P!LT= 1= L! P!M(A! G0K ! C0L0C!L 8A! T!BL!DFbE
DT!BL= bor#er P?2? bor#erco"or P?re#? E
DTLE
DT1ED5 ont co"orP?b" ue? Ni@eP?'? E5 i " a 3;cua#ro 3
DF5ont EDF T1E
DT1E5 i " a 3;cua#ro 2DFT1E
DT1E5 i " a 3;cua#ro DFT1E
DFTLE
DTLE
DT1EDi mg srcP?i co<t m" .6 pg? EDF T1E
DT1E5 i " a 2;cua#ro 2DFT1E
DT1E5 i " a 2;cua#ro DFT1E
DFTLE
DTLE
DT1 bgco"or P? VWWWWWW? ED5 ont co"orP? 9<i t e? E5 i " a ;cua#ro 3DF5ont EDF T1E
DT1E5 i " a ;cua#ro 2DFT1E
DT1E5 i " a ;cua#ro DFT1E
DFTLE
DFT!BL=E
-amos a eCplicar lo Bue hemos hecho.
- Con B0L1=LP?2? B0L1=LC0L0LP?L=1? estamos in#ican#o :ue "a tab"a #ebe tener una
anc<ura #e bor#e #e 2 . #ic<o bor#e #ebe ser #e co"or ro6o.
- Con D5ont co"orP?b" ue? Ni@eP?'? E estamos in#ican#o :ue en esa ce"#a "as "etras tienen
:ue ser #e co"or a@u" Hb"ueI . #e tama-o '.
- Con Di mg srcP?i co<t m" .6 pg? E estamos in#ican#o :ue en esa ce"#a #ebe mostrar una
imagen en 5ormato Tpg.
- Con DT1 bgco"or P? VWWWWWW? EDD5 ont co"orP? 9<i t e? E5 i " a ;cua#ro 3DF5ont E in#icamos
:ue "a ce"#a #ebe tener un co"or #etermi na#o HnegroI . "as "etras #ebern ser b"ancas.
Captulo 12.
L)+ 8!A#$+.
=n este cap&tu" o; estu#iaremos "os 8rames HmarcosI; :ue es una %entana in#epen#i ente
#entro #e "a %entana genera" #e" na%ega#or. !s& ca#a pgi na se #i%i#i r en "a prctica en
%arias pgi nas in#epen#i entes.
Gamos a apren#er a crear "o :ue se ""ama un 8rameD +et ; :ue es un e"emento :ue a#emas
#e #i%i #i r "a %entana #e" na%ega#or en #i5erentes areas; #etermi na en :ue @ona #ebe
aparecer ca#a no #e "os #ocumentos.
!ntes :ue na#a %amos a crear una pgina con "as siguientes "ineas; "a cua" guar#aremos
con un nombre; por e6emp" o Aa%egacion.<t m" .
D<t m" E
D<ea#E
Dti t " eEGi ncu" oDF t i t " eE
DF<ea#E
Dbo#.E
D5ont 5aceP?!ri a" ? E
DpE
DbEP!M(A!NDFbE
DFpE
DpE
Curso HTML por pginasDbr E
Da <re5 P?pag3.<t m" ? target P?cont eni #o? EPgi na 3DFaEDbr E
Da <re5 P?pag2.<t m" ? target P?cont eni #o? EPgi na 2DFaEDbr E
Da <re5 P?pag.<t m" ? target P?cont eni #o? EPgi na DFaEDbr E
Da <re5 P?pag$.<t m" ? target P?cont eni #o? EPgi na $DFaEDbr E
Da <re5 P?pag'.<t m" ? target P?cont eni #o? EPgi na 'DFaEDbr E
Da <re5 P?pag).<t m" ? target P?cont eni #o? EPgi na )DFaEDbr E
DFpE
DF5ont E
=" Bnico parmetro nue%o :ue aparece en estas "ineas en T!LM=TP?C0AT=A(10?.
!<ora crearemos otra con "as siguientes "ineas; . "o guar#aremos con e" nombre
Marco.<tm"
D<t m" E
D<ea#E
Dti t " eEMi PaginaDF t i t" eE
DF<ea#E
D5 rameset co"sP?3); X? bor#er P4E
D5 rame srcP?na%egaci on.<t m" ? nameP? na%? E
D5 rame srcP?presentaci on.<t m" ? nameP?conteni #o? E
DF5rameset E
DF<t m" E
-amos a eCplicar el conteni do de esta pgina.
- Lo pri mero :ue pue#es apreciar es :ue no <emos uti"i@a#o e" i#enti 5ica#or Dbo#.E; .a
:ue en este tipo #e #ocumento no tiene ningun senti#o.
- =n su "ugar aparece "a entra#a *L!M=N=T :ue in#ica a" na%ega#or como se #ebe #i%i #i r "a
%entana.
- =" parametro C0LNP?3);X? especi5ica :ue en "a parte i@:uier#a se #ebe construi r una
co"umna con un anc<o #e 3) puntos . :ue "a segun#a co"umna ocupar e" resto #e "a
pgina.
Ni :ueremos po#emos inc"ui r mas co"umnas; por e6emp" o si ponemosC
D5 rameset co"sP?32'; X;3''? E
Lo :ue <ar en este caso ser&a intro#uci r una co"umna #e 32' puntos a "a i@:uier#a; otra #e
3'' a "a #erec<a . e" resto :ue#ar&a para "a co"umna centra"; :ue pue#e tener una anc<ura
%ariab" e.
- B0L1=LP4 in#ica a" na%ega#or :ue se e"i mi nen "as separaciones entre "os bor#es #e
ca#a marco.
- La entra#a *L!M= se encarga #e #e5inir con :ue se re""enar ca#a marco.
- =" parmetro NLC in#ica e" 5ic<ero HTML :ue #ebe insertarse en e" marco. =n este e6emp" o
se trata #e" 5ic<ero Aa%egacion.<t m" . :ue <abiamos crea#o antes.
- La segun#a "inea #e c7#igo A!M=P?C0AT=A(10? in#ica a" na%ega#or "a ubicaci7n #e "os
5ic<eros cu.os en"aces se encuentran en "a pgina Aa%egacion.<t m" .
*&6ate en "os <iper%&ncu"os #e este 5ic<ero . %ers :ue tienen e" parmetro
T!LM=TP?C0AT=A(10? ; es #ecir; :ue e" en"ace apunta a" marco :ue tiene como nombre
C0AT=A(10 :ue es #on#e se esta mostran#o e" #ocumento Pagina.<t m" . Con "o cua" si
pinc<amos en cua":iera #e "os en"aces :ue estan en e" "a#o i@:uier#o #e "a panta"" a; estos
se mostraran en e" "a#o #erec<o.
(n#icar tambi n :ue "as eti:uetas D*L!M=N=TE se pue#en ani#ar. =sto se <ace ponien#o
otro D*L!M=N=TE #on#e norma" mente co"ocamos "as eti:uetas D*L!M=E; como en e"
e6emp" o siguienteC
D<t m" E
D<ea#E
Dti t " eEMi pri mera pgina con marcosDF t i t " eE
DF<ea#E
D5 rameset co"sP?24O;/4O? E
D5 rame nameP?Pagi na 3? NLCP?pag3.<t m" ? E
D5 rameset ro9sP?X; /4? E
D5 rame nameP?Pagi na )? NLCP?pag).<t m" ? E
D5 rame nameP?Pagi na 33? NLCP?pag33.<t m" ? E
DF5rameset E
DF5rameset E
DF<t m" E
Captulo 1'.
8!A#$+ $& CA+CA(A.
=n este cap&tu" o conti nuaremos con "os *L!M=N; %ien#o a<ora "o :ue se #enomi na como
?5rames en casca#a?; o "o :ue es "o mismo; inc"uir 5rames #entro #e otro 5rame.
Gamos a %er un e6emp" o a-a#ien#o "as siguientes 2 "ineas Hen ro6oI a" #ocumento :ue
<ab&amos guar#a#o como Marco.<tm" C
D<t m" E
D<ea#E
Dti t " eEMi PaginaDF t i t" eE
DF<ea#E
D5 rameset co"sP?3); X? bor#er P4E
D5 rame srcP?na%egaci on.<t m" ? nameP? na%? E
D5 rameset ro9sP?'4;X? bor#er P4E
D5 rame srcP?busca#ores.<t m" ? nameP? busca#ores? E
D5 rame srcP?presentaci on.<t m" ? nameP?conteni #o? E
DF5rameset E
DF<t m" E
=" <ec<o #e :ue "as "ineas se <a.an #esp"a@a#o a "a #erec<a con "a tec"a #e tabu" acion; no
es impresci n#i b" e para :ue e" c7#igo 5uncione; pero es <abi tua" <acer"o entre "os
programa#ores por esttica; para :ue sea mas "egib"e.
-amos a eCplicar lo Bue hemos hecho:
3.- D5 rameset co"sP?3); X? bor#er P4E #i%i #e "a %entana #e" na%ega#or en #os marcos
%ertica"es #e 3) puntos a "a i@:uier#a . e" resto a "a #erec<a.
2.- D5 rame srcP?na%egaci on.<t m" ? nameP? na%? E re""ena e" pri mer 5rame con e" conteni #o
#e" 5ic<ero ?Aa%egacion.<t m" ? . "o ""ama ?Aa%?.
.- D5 rameset ro9sP?'4;X? bor#er P4E. =n esta "inea aparece una nue%a e,presi7n L0WN
:ue "o :ue <ace es in#icar a" na%ega#o :ue e" nue%o marco #ebe #i%i#i r "a %entana
<ori@onta" mente.
0 sea :ue #entro #e" segun#o marco abre otro 5rame- set :ue #i%i #e <ori@onta" mente "a
@ona #e "a #erec<a; asignan#o a" marco superior una a"tura #e '4 puntos . e" resto #e"
espacio para "a parte in5erior.
$.- D5 rame srcP?busca#ores.<t m" ? nameP? busca#ores? E
D5 rame srcP?presentaci on.<t m" ? nameP?conteni #o? E.
=stas #os "ineas re""enas "os #os marcos <ori@anta" es; "a parte a"ta con e" conteni #o #e"
5ic<ero Busca#ores.<t m" . "a parte ba6a con e" conteni #o #e" 5ic<ero Presentacion.<t m"
Como <as po#i#o comprobar; aun no <emos crea#o ningBn 5ic<ero con e" nombre #e
Busca#ores.<t m" . Gamos a <acer"o a<oraC
D<t m" E
D<ea#E
Dti t " eEBusca#oresDF t i t " eE
DF<ea#E
Dbo#.E
D5ont 5aceP?!ri a" ? E
Da <re5 P?<t t pCFF999.a" ta%i sta.com? target P?conteni #o? E!" t a%i staDF aE
Da <re5 P?<t t pCFF999." .cos.es? target P?conteni #o? EL.cosDF aE
Da <re5 P?<t t pCFF999. .a<oo.es? target P?cont eni #o? EKa<ooDF aE
DF5ont E
DFbo#.E
DF<t m" E
Como pue#es %er "a panta"" a esta #i%i #a en tres partes; . si <aces c"ic> sobre cua":ui era #e
"os en"aces Ka<oo; !"ta%ista o L.cos; E estas conectado a "nternet , %eras como en e"
marco in5erior #erec<o #e "a %entana te muestra "a pgina #e estos popu"ares busca#ores.
Captulo 1*.
8)!#.LA!")+.
! ""ega#o "a <ora #e apren#er a <acer formul arios S en este capitu"o "o %amos a apren#er.
Gamos a <acer"o con un e6emp" o :ue guar#aremos con e" nombre #e *ormu" ario.<t m" ; :ue
permi ti r a "os %isitantes #e nuestra pgi na a en%iarnos un mensa6e #e correo e"ectr7nicoC
D<t m" E
D<ea#E
Dti t " eE*ormu" ari osDF t i t " eE
DF<ea#EE
D5ormE
DbE1i recci on e-mai"C DF bEDBLD ED Dbr E
DbETe,t o #e" Mensa6eC DF bEDbr E
Dte,t area co"sP?4? ro9s?/? nameP? mensa6 e? E
DF te,t areaE
Dbr E
Di nput t.peP?submi t ? %a"ueP? man#ar? E
DF5ormE
DFbo#.E
DF<t m" E
=n estas "ineas <a. a"gunos i#enti 5ica#ores nue%os :ue %amos a e,p"icar a conti nuaci 7nC
0b4(i reccion eD mail: 0F b4 0input tEpe12t eCt 2 name12di recci@nD correo2
size12'624
- La pri mera "inea #a "a or#en #e mostrar e" titu"o #e" pri mer e"emento #e" 5ormu" ari o en
negri ta.
- =n "a segun#a "inea e" i#enti 5ica#or (AP8T He" cua" no necesita i#enti 5ica#or #e cierreI sir%e
para #e5ini r e" 5ormato #e" campo #e entra#a; en e" :ue e" na%ega#or interpreta :ue en
este punto #ebe mostrar un recua#ro para intro#uci r #atos.
- =" argumento TKP=P?T=WT? in#ica :ue se trata #e una unica "inea #e te,to; . e" parametro
A!M=P?1(L=CC(0A-C0LL=0? sir%e para especi5icar "a %ariab" e #on#e se a"macenara e"
%a"or #e "a entra#a #e" campo.
- *ina" mente con N(Q=P?4? in#icamos a" na%ega#or:ue e" anc<o #e campo es #e 4
caracteres.
0b4;eCt o del #ensa3e: 0F b40br 4 0teCt area cols12'62 ro5s2=2 name12mensa3e24
0F teCt area4
- La pri mera "inea "o :ue <ace es escribir e" titu" o #e" e"emento en negri ta.
- La segun#a "inea esta #e5ini #a con "a or#en T=WT!L=! . con "os parmetros C0LNP?4?
para e" numero #e co"umnas . L0WNP?/? para e" numero #e 5i"as; :ue sir%en para
#etermi nar e" tama-o #e" recua#ro #on#e se escribir e" mensa6e . a" :ue se "e asignar e"
nombre M=AN!T=.
- La B"ti ma "inea es e" i#en5ica#or #e cierre T=WT!L=!.
0i nput tEpe12submi t2 value12envi ar24
- Con esta "inea "o :ue <acemos es crear un bot7n :ue cuan#o "os usuarios :ue %isiten
nuestra pgi na escriban en e""a e" mensa6e; ten#ran :ue pu"sar este bot7n para man#ar "os
#atos.
Para crear"o uti"i@amos e" i#enti 5i ca#or (AP8T acompa-a#o #e" parmetro TKP=P?N8BM(T?
Hsubmi t Pen%i ar en espa-o"I.
- =" argumento G!L8=P?=AG(!L? #etermi na e" te,to :ue sera escrito en e" bot7n.
Captulo 1/.
L"+;A+ ($+L$%A9L$+ G CAHA+ ($ +$L$CC")&.
!#ems #e "os campos #e te,to :ue <emos %isto en e" cap&tu" o anterior; e,isten otros
sistemas :ue permi ten intro#uci r #atos; como pue#en ser "as "istas #esp"egab" es o "as ca6as
#e se"ecci7n.
3.- Las "istas #esp"egab" es 5aci"itan a" usuario se"eccionar un %a"or #etermi na#o entre "as
opciones #e una "ista.
=" c7#igo 5uente #e una "ista #esp"egab" e tiene e" siguiente aspectoC
Dse"ect nameP?ca" i 5i caci on? E
Dopt i on %a"ueP?4? ENuspensoDF opt i onE
Dopt i on %a"ueP?'? E!proba#oDF opt i onE
Dopt i on %a"ueP?+? EAot ab" eDF opt i onE
Dopt i on %a"ueP?34? ENobresa" ienteDF opt i onE
DFse"ect E
- Con e" i#enti 5i ca#or N=L=CT "e estamos in#ican#o a" na%ega#or :ue "o :ue %iene a
continuaci on es una "ista #esp"egab" e :ue contiene %arios e"ementos #e "os :ue se #ebe
se"eccionar uno.
- 0PT(0A in#ica "as #istintas posibi"i #a#es :ue apareceran en "a "ista para po#er escoger.
- G!L8=P?4? es e" %a"or :ue ser a"macena#o en "a %ariab" e en e" caso #e ser se"ecciona#a
. +uspenso es e" te,to :ue aparecera en e" menu #esp"egab" e para po#er ser
se"ecciona#a con un c"ic> #e" rat7n.
2.- Las ca6as #e se"eccion son unas pe:ue-as casi""as :ue e" usuario pue#e acti%ar con un
simp"e c"ic> #e" rat7n.
=" c7#igo 5uente #e una #e estos e"ementos tiene e" siguiente aspectoC
Di nput t.peP?c<ec>bo,? name ?Nu5iciente? %a"ueP?!proba#o? E!proba#oDF i nput E
Di nput t.peP?c<ec>bo,? name ?Nobresa"iente? %a"ueP?Matri cu" aHonor? EMat ri cu" a #e
HonorDFi nput E
- Como .a sabes; e" i#enti 5i ca#or "&.; in#ica :ue a conti nuaci7n <a. un campo para
intro#uci r #atos.
- =" parmetro TKP=P?CH=CUB0W? se uti"i@a para #etermi nar e" aspecto #e" campo; en este
caso una casi""a %acia.
- Los parmetros &A#$ . -AL.$ tienen "a misma 5unci7n :ue en aparta#o anteri or.
Para %er"o con mas c"ari#a# %amos a a-a#ir un menB #esp"egab" e a" 5ic<ero
*ormu"ario.<t m" C
D<t m" E
D<ea#E
Dti t " eE*ormu" ari osDF t i t " eE
DF<ea#E
Dbo#.E
D5ormE
DbE1i recci on e-mai"C DF bE
Di nput t.peP?t e,t ? nameP? #i recci 7n- correo? si@eP?4? E
Dbr E
DbETe,t o #e" Mensa6eC DF bEDbr E
Dte,t area co"sP?4? ro9s?/? nameP? mensa6 e? E
DF te,t areaE
Dbr E
Di nput t.peP?submi t ? %a"ueP?=n%i ar? E
Dse"ect nameP?ca" i 5i caci on? E
Dopt i on %a"ueP?4? ENuspensoDF opt i onE
Dopt i on %a"ueP?'? E!proba#oDF opt i onE
Dopt i on %a"ueP?+? EAot ab" eDF opt i onE
Dopt i on %a"ueP?34? ENobresa" ienteDF opt i onE
DFse"ect E
DF5ormE
DFbo#.E
DF<t m" E
!<ora %amos a co"ocar unas ca6as #e se"ecci7n; para "o cua" a-a#iremos "as siguientes
"ineas antes #e DFse" ect E a este mismo 5ic<eroC
DFse"ect E
Dbr EDbr E Db E=" i 6 e una notaC DF bEDbr E
Di nput t.peP?c<ec>bo,? name ?Nuspenso? %a"ueP?Nuspenso? ENupensoDF i nput EDbr E
Di nput t.peP?c<ec>bo,? name ?Nu5iciente? %a"ueP?!proba#o? E!proba#oDF i nput EDbr E
Di nput t.peP?c<ec>bo,? name ?Nobresa"iente? %a"ueP?Matri cu" aHonor? EMat ri cu" a #e
HonorDFi nput E
Captulo 17.
8)!#.LA!") AC;"-).
Para gestionar "os 5ormu" ari os; es #ecir; para :ue ""eguen a su #estino; se necesita una
#irecci7n #e correo e"ectr7nico . un programa :ue gestione "os #atos.
=n nuestro e6emp" o %amos a uti"i@ar un ser%icio #e "ibre acceso :ue permi te gestionar
gratui tamente "os 5ormu" ari os; e" cua" pue#es %isitar en e" #ireccion
WWW.M=L01KN0*T.C0M.
=" 5uncionami ento es #e "a siguiente maneraC
=" %isitante #e tu pgi na #e (nternet a" re""enar e" 5ormu" ari o . pu"sar e" bot7n ?=n%iar?;
pone en contacto su pgina Web con e" ser%i #or; e" cua" uti"i@a un programa :ue recoge "os
#atos #e" 5ormu" ari o . "os remi te %ia correo e"ectr7ni co a tu #irecci7n #e e-mai".
Gamos a a-a#i r unas "ineas a nuestro 5ic<ero *ormu" ari o.<t m" .
D<t m" E
D<ea#E
Dti t " eE*ormu" ari osDF t i t " eE
DF<ea#E
Dbo#.E
D5orm actionP? <t t pCFF999. me" o#.so5 t.comFcgi - binF5orm.cgi ? met<o#P? post ? E
DbE1i recci on e-mai"C DF bE
Di nput t.peP?<i ##en? nameP?reci pi ent ? %a"ueP? t unombreRtuser%i #or? E
Di nput t.peP?t e,t ? nameP? #i recci 7n- correo? si@eP?4? E
- =" parmetro !CT(0A in#ica a" na%ega#or #on#e tiene :ue remi ti r "os #atos #e" 5ormu" ari o
. M=TH01P?P0NT? especi5ica :ue se trata #e un correo e"ectr7ni co.
- =" i#enti 5ica#or (AP8T es un campo #e entra#a pero a" aparecer con e" parmetro
TKP=P?H(11=A? H0cu"to en espa-o"I imp" ica :ue "os campos no %an a aparecer en e"
5ormu" ari o; .a :ue e" remi tente no <a #e conocer cua" es tu #irecci7n #e correo e"ectr7nico.
- Auestra #irecci7n #e correo e"ectr7ni co :ue#a ocu"ta #etrs #e G!L8=P ; .a :ue por
supuesto en e" aparta#o 2tunombreItuservi dor2 es #on#e #ebes poner tu #irecci7n #e
correo e"ectr7nico.
Ni :uieres probar e" 5ormu" ari o . estas conecta#o a (nternet ; para :ue %eas e" traba6o :ue
<emos <ec<o; re""ena e" 5ormu" ari o; pinc<a en en%iar . %ers :ue poco #espues sa"e e"
mensa6e #e en%io #e Me"o#.so5t.
8nos minutos mas tar#e ec<a un %ista@o a "a ban#e6a #e entra#a #e tu correo .
encontrars e" mensa6e :ue tu mismo te <as en%ia#o.
Captulo 1:.
L"&$A+ A!A ("-" ("! LA A%"&A.
Para co"ocar una "inea <ori@onta" :ue #i%i #a "a panta" "a; uti"i@aremos "a eti:ueta DHLE .
=,isten %arios atributos :ue sir%en para caracteri@ar" o; segBn sea su anc<o; su grueso o si
#eseamos o no :ue :ue#e incrusta#a en "a panta"" a. =stos atributos son C
0hr 5idth12>6J24
1on#e W(1TH e,presa en tanto por ciento #e" "argo #e "a "inea con respecto a "a pgina; es
#ecir; en este caso por e6emp" o ocupara e" 24O #e "a pgi na #e una "a#o a otro.
0hr 5idth1277J2 size121/24
=n este caso; aparte #e" "argo #e "a "inea H))OI; tambi en especi5ica e" anc<o #e "a misma;
:ue es #e 3'.
0hr 5idth12=/J2 noshade align12l ef t24
!:ui aparece un parametro nue%o A0NH!1=; :ue "o :ue #ice a" na%ega#or es :ue "a "inea
A0 #ebe estar incrusta#a en e" 5on#o; simp" emente #ebe aparecer como una "inea
ocupan#o e" /'O #e "argo empe@an#o #es#e "a i@:uier#a.
0center 40i mg src12linea1. gi f240F cent er 4
Tambien se pue#e poner como "inea #e separaci7n cua":ui er imagen; como en este caso;
:ue "a ponemos centra#a.
Gamos a a-a#i r esta "ineas a nuestra pgina; <acien#o a"gunas separaciones para :ue
:ue#e mas %istosa.
!-a#iremos "as "ineas Hen ro6oI en me#io #e" te,to :ue aparece en negro.
Las imagenes inserta#as en esta pgina "as <e saca#o #e una #irecci7n #e (nternet #on#e
se o5recen mi"esDF 5 ont ED5 ont co"orP? .e" " o9? E #e imgenes gratui tas. DF5 ont EDbr E
D<r 9i#t<P? 24O? E
DpE
G0K ! H!C=L 8A!N PL8=B!N C!MB(!A10 L0N T(P0N 1= L=TL!NCDbr E
DbEDi E Du E D5 ont 5aceP?!ri a" B"ac>? E=ste te,to esta en negri ta; cursi%a; subra.a#o . con
"etra !ria" B"ac>DF5 ont EDF i EDF u E DF b E Dbr E
Dbr ED<r 9i#t<P?))O? si@eP?3'? E
D5ont 5aceP?!ri a" ? co"or P?re#? si@eP?$? E
Dmar:uee be<a%i or Pa" t ernateEMe esto. mo%i en#o #e un "a#o a otro . no
#esapare@co. DF mar:ueeE
Dbr ED<r 9i#t<P?/'O? nos<a#e a"ignP?" e5 t ? E
DpEC Db E=st o es un e6emp" o #e una "ista en :ue ca#a e"emento esta prece#i #o por un
puntoDF pEDF bE
DF0LE
Dbr EDcent er EDi mg srcP?" i nea3.gi 5 ? EDF cent er EDbr E
Dbr EDb E=A =NT! P!LT= 1= L! P!M(A! G0K ! C0L0C!L 8A! T!BL!DFbEDbr E
Captulo 1=.
"&CL."! +)&"()+.
Po#emos inc"uir soni#o en una pgi na; . para oir"o; por supuesto; e" or#ena#or #eber
poseer tar6eta #e soni#o . a"ta%oces.
Los arc<i %os #e soni#os :ue se pue#en inc"ui r son #e muc<os 5ormatos; pero para :ue
a"gunos #e e""os se oigan; se necesitan a"gunos programas :ue no to#o e" mun#o posee.
Pero e,isten #os 5ormatos ?.KA- E .#" (A :ue 5unciona con to#os "os na%ega#ores; . :ue
son "os mas con%eni entes uti"i@ar.
=" 5ormato .M(1 tiene "a %enta6 a #e :ue ocupa poco espacio; . es e" usa#o para me"o#i asS
en cambi o e" 5ormato .W!G ocupa muc<o mas espacio; pero tiene "a %enta6a #e :ue e"
soni#o es me6or . se pue#e inc"uir %oces.
=" soni#o se pue#e repro#uci r #e forma automtica acti%an#ose #es#e e" momento en
:ue e" usuario acce#a a "a pgina; o cuando el usuario lo desee ; para "o cua" #ebera
pu"sar sobre un en"ace :ue se cree.
(nc"uso po#emos <acer :ue "a me"o#i a se repro#u@ca una %e@; %arias . <asta #e 5orma
in5ini ta.
=n =,p"orer se uti"i@a "a eti:ueta BMN08A1; por e6emp" oC
DBMN08A1 NLCP?me" o#i a.mi #? E
=" parmetro NLC in#icara e" arc<i %o a repro#uci r.
=sta eti:ueta a#mi te tambi en otro parmetroC
DBMN08A1 NLCP?soni #o.mi #? L00PP?i n5i ni te? E
=" parmetro L00P; :ue in#ica e" nBmero #e %eces consecuti %as :ue sonar e" 5ic<ero. Ni
se in#ica L00PP?i n5i ni te?; e" arc<i %o se repro#uci r in#e5ini #amente; mientras estemos en
"a pgi na.Ni se in#ica L00PP??; e" arc<i %o se repro#uci r %eces.
Ni :uisieramos #ar a" usuario "a opcion #e acti %ar e" soni#o; inc"ui remos e" soni#o en e"
parmetro HL=* #e un en"ace; como si 5uera una pgina HTMLC
Da <re5 P?<o" a.9a%? EPu"sa para sa"u#arteDF aE
=n Aetscape se uti"i@a "a eti:ueta =MB=1; por e6emp" oC
D=MB=1 NLCP?soni #o.mi #? E
Ni :uisieramos #ar a" usuario "a opcion #e acti %ar e" soni#o; <a. :ue tener en cuenta :ue a"
acce#er a "a pgi na %a a aparecer un repro#uctor #e soni#o; sobre e" cua" e" usuario ten#r
"a opcion #e repro#uci r "a me"o#&a o noS pon#riamosC
D=MB=1 NLCP?soni #o.mi #? autostart P5 a" seE
Ni :uisieramos :ue "a me"o#&a se repro#u@ca automati camente a" acce#er a "a pgina;
pon#ri amosC
D=MB=1 NLCP?soni #o.mi #? autostart Pt rueE
Gamos a a-a#i r "as siguientes "ineas antes #e" i#enti 5ica#or Dbo#.E
DBMN08A1 NLCP?soni #o.mi #? E
D=MB=1 NLCP?soni #o.mi #? <i##enP? t rue? E
1ebemos inc"ui r estas #os "ineas para :ue se e6ecute e" 5ic<ero #e soni#o #e 5on#o Huna
so"a %e@I tanto por e" =,p"orer como por Aetscape. =" parmetro H(11=A in#ica a"
na%ega#or :ue ?ocu" te? e" repro#uctor.
Captulo 1>.
"($&;"8"CA()!$+ )C.L;)+.
=n este cap&tu" o estu#iaremos "os identi ficadores ocultos ; :ue son instruci ones
especia"es #e HTML; :ue a" contrario #e "os i#enti 5ica#ores :ue .a conocemos; tienen
5unciones in%isib"es :ue no son mostra#as cuan#o se %isua"i@a "a pgi na; pero permi ten #ar
a"gunas or#enes especia"es a" na%ega#or; permi ti en#o #e5ini r a"gunas pa"abras c"a%es :ue
a.u#an a "os busca#ores a cata"ogar "a pgi na 9eb.
Gamos a uti"i@ar en este caso e" i#enti 5ica#or M=T! para crear una pgina :ue tras unos
segun#os #e presentaci7n nos ""e%ar automati camente a una segun#a pgi na.
La pgina :ue %amos a crear "a ""amaremos ?(nicia".<t m" ? . su c7#igo 5uente ser e"
siguienteC
D<t m" E
D<ea#E
Dmet a <ttp- e:ui %P?re5 res<? content P? +S 8LLPpri merapag.<t m" ? E
Dti t " eEPresentacionDF t i t " eE
DF<ea#E
Dbo#. bac>groun#P?5 on#oama.gi 5 ? E
Dcenter EDbr E Dbr E Dbr E
Di mg srcP?0r#ena#or.gi 5 ? EDbr E
D5ont 5aceP?!ri a" B"ac>? co"or P?re#? EDi E
DbED<2ED5 ont si@eP)EBi en%eni #o a mi paginaDF <2EDF bEDF 5 ont EDF i E Dbr E
Da <re5 P?pri merapag.<t m" ? EHa@ c"ic> a:ui DF aE en e" caso #e :ue e" na%ega#or no sa"te
automati camente a "a pgina siguiente en unos + segun#os.
DFcenter E
DFbo#.E
DF<t m" E
Gamos a e,p"icar "o :ue <emos intro#uci #o en esta pginaC
Lo pri mero :ue %emos es e" i#enti 5i ca#or M=T! acompa-a#o #e #os argumentos. ="
pri mero <ttp- e:ui %P?re5 res<? in#ica a" na%ega#or :ue #ebe ?re5rescar? e" conteni #o #e su
%entana . content P? +S 8LLPpag3.<t m" ? in#ica cuan#o se pro#uci r e" cambio . "a pgina a
"a :ue #ebe cambi ar.
- content signi5ica ?conteni #o? . #espues #e" signo 1 aparecen #os e"ementos separa#os
por punto . comaS e" pri mero H+I in#ica e" tiempo en segun#os :ue e" na%ega#or #ebe
esperar para abrir "a pgi na :ue se in#ica #espues #e .!L1 .
- Luego <emos co"oca#o un 5on#o con un 5ic<ero M(*.
- ! continuaci 7n co"ocamos centra#a una imagen.
- 1espues #amos "a bien%eni #a a "a pgina; tambi en centra#a . #an#o 5ormato a "as "etras
con tipo; tama-o . co"or.
- Por B"ti mo intro#uci mos un <iper%&ncu" o; con un comentari o en caso #e :ue "a pgi na no
sa"te automati camente #ebi#o a :ue e" na%ega#or #e" %isitante #e nuestra pgina sea
anti guo. =sto "e sir%e para po#er entrar <acien#o c"ic> en e" en"ace.

Los i#enti 5i ca#ores ocu"tos; aparte #e "a ap"icacion :ue <emos %isto anteri ormente; tiene
otras; como "a #e ser%ir #e a.u#a a "os busca#ores.
Los ser%i #ores #e internet e,p"oran "a Wor"# Wi#e Web en busca #e nue%as pgi nas para
actua"i@ar su base #e #atos; . asi "os usuarios pue#an encontrar nuestra pgi na ms
5aci" mente.
Gamos a a-a#i r unas "ineas a" arc<i %o Primerapag; . "o <aremos antes #e" i#enti 5i ca#or
Dti t " eEC
Dmet a nameP?#escri pti on? content P?Pagi na #e prueba #e apren#i@a6e #e HTML?E
Dmet a nameP?aut <or? content P?Loberto Li%ero Lamos? E
Dmet a nameP?>e.9or#s? content P?Pri mera pagi na #e curso #e HTML?E
Gamos a e,p"icar to#os "os argumentos :ue acompa-an a" i#enti 5i ca#or M=T!C
- description in#ica a" na%ega#or :ue "o :ue %iene #espus #e content 1 es una
#escripcion #e nuestra pgina :ue sir%e #e in5ormaci 7n sobre su conteni #o.
- author in#ica :ue #espues #e content se %a a se-a"ar e" nombre #e" autor #e "a pgi na
Hen "a tu.a pon#ri as tu nombre . ape""i#osI.
- LeE5ords signi5ica ?pa"abras c"a%es? . se-a"a :ue "o :ue %iene #espues #e content %a a
#escribir con "a ma.or precision posib"e e" conteni #o #e "a pgina Hma,i mo #e 2')
caracteresI . esta c"a%e es "a :ue uti"i@aran "os busca#ores para in#e,ar nuestra pgina
#entro #e su base #e #atos.
Por B"ti mo nos :ue#a a-a#ir una "inea :ue tambi en es con%eniente inc"ui r" a en nuestra
pgina . :ue esC
Dmet a <ttp- e:ui %P?e,pi res? content P? 4? E
La e,p"icaci7n #e esta "inea es :ue cuan#o se abre una pgina en internet con e"
na%ega#or; no siempre trans5iere #irectamente #es#e e" ser%i#or. =n muc<as ocasiones se
cargan #es#e un proCE ; :ue son como una especie #e or#ena#ores interme#i os :ue se
encuentran entre nuestro e:uipo . e" ser%i#or #e "a pgina; por e6emp" o en e" (NP; .
#isponen #e un #isco #uro #on#e se %an a"macenan#o to#as "as pgi nas 9eb :ue son
#eman#a#as por "os usuarios.
=n e" caso #e :ue otro c"iente #e mismo (NP necesite una pgina :ue .a <a si#o %isita#a; "a
recibi r #irectamente #es#e e" pro,.; "o :ue porporciona una ma.or %e"oci #a# #e #escarga
#ebi#o a :ue "os #atos tienen :ue recorrer un camino ms corto.
=" incon%eni ente #e esto es :ue si por e6emp" o nuestra pgina "a actua" i@aramos %arias
%eces a" #ia; "a :ue esta a"macena#a en e" pro,. no estar actua" i@a#a . por tanto no
ten#r un conteni #o rea".
Por e""o <emos inc"ui #o esta "inea; :ue "o :ue in#ica con 2eCpires2 es :ue "a pgina tiene
una 5ec<a #e ca#uci#a# :ue a#ems es inme#i ata H content 1262 I. Cuan#o e" na%ega#or "a
"ea; recibi r "a or#en #e actua"i@ar"a con e" conteni #o #e" ser%i#or origina" "a pr7,i ma %e@
:ue "a bus:ue.
Captulo 26.
AL%.&)+ $8$C;)+.
Ne pue#en crear a"gunos e5ectos #entro #e una pgi na. !"gunos #e estos e5ectos "os %amos
a e,p"icar a conti nuaci 7nC
Po#emos consegui r por e6emp" o :ue a" pasar e" mouse por enci ma #e un en"ace aparezca
una descripci@n en la barra de estado situa#a en "a parte in5erior #e nuestro
na%ega#or. Gamos a %er un e6emp" o.
=n "a parte #e nuestro #ocumento #on#e creamos un en"ace para acce#er a terra; %amos a
a-a#ir "o :ue aparece a continuaci 7n en ro6oC
Go. a <acer un <iper%&ncu" o para entrar en "a pgina #e Terra. Da
<re5 P?<t t pCFF999.terra.es? onMouse0%er P? 9i n#o9.statusPY Gi si ta "a pagina #e TerraY Sreturn
trueS? ETerraDF aE
0tro e5ecto :ue po#emos consegui r es :ue a" co"ocar e" mouse sobre una imagen apare@ca
un recuadro amarillo con el teCto :ue <a.amos inc"ui #o pre%iamente. Gamos a %er un
e6emp" o a-a#ien#o a nuestra pgina una "inea Hen ro6oI a "a parte #on#e inc"ui mos "a
pri mera imagenC
Di mg srcP? mar.6 pg? a"ignP" e5 t <spaceP34 !LTP?(magenes #e" Mar? E