Curso Bsico de HTML

1. Introduccin al curso
Este curso ha nacido con la intencin de complementar los anteriores cursos
de JavaScript y HTML dinmico. As podrs terminar creando una pgina de
calidad empeando desde cero.
Lo primero !ue hay !ue decir es !ue este curso no e"plica ning#n estndar
espec$co% ni e"amina e"haustivamente todos los parmetros de las
eti!uetas HTML. &ntenta ser una gua prctica% de modo !ue incluir todas las
cosas !ue se consideren importantes y !ue han provocado alg#n !ue'radero
de ca'ea mientras se realia una pgina.
El curso y sus e(emplos han sido pro'ados con E"plorer ) y *etscape )% !ue
son los navegadores ms empleados.
+.+. ,e!uisitos
-ara realiar este curso es necesario contar con alg#n editor de te"to como
el notepad% aun!ue puede uasarse cual!uiera inclusive el de ./S.
-ueden hacer pginas con alg#n editor espec$co de pginas 0e'% pero no
es necesario. Es ms% algunos de esos editores esconden las eti!uetas HTML
al usuario% de modo !ue posi'lemente lo !ue aprendas a!u te sera de poca
utilidad.
+.1. 2ndice del curso
+. &ntroduccin al curso
+.+. ,e!uisitos
+.1. 2ndice del curso
+.3. Agradecimientos
1. 4ersiones del HTML
1.+. HTML 1.5
1.1. HTML 3.5 y 3.1
1.3. HTML ).5
1.). Estndares en este curso
3. Mi primera pgina
3.+. El cdigo
3.1. La e"plicacin
3.3. El cuerpo del documento
). 6ormateo 'sico
).+. 6ormato del prra7o
).1. Las 8 ca'eceras
).3. 9am'iando el tipo de letra
).). 6ormato de 7rase
).:. /tros elementos
:. 9aracteres especiales
:.+. 9aracteres e"tendidos en HTML
:.1. 9aracteres de control
8. Enlaces
8.+. La eti!ueta ;A<
8.1. Las =,Ls
8.3. Anclas
>. Listas
>.+. Listas desordenadas
>.1. Listas ordenadas
>.3. Listas de de$niciones
?. &mgenes
?.+. &mgenes y enlaces
?.1. Alineacin respecto al te"to
@. 6ormateo $no
@.+. 9am'io de color
@.1. TamaAos del te"to
@.3. Tipo de letra
+5. Estructura del documento
+5.+. La ca'ecera
+5.1. El cuerpo
++. 6ormularios
++.+. 9a(as de te"to
++.1. /pciones
++.3. Botones del 7ormulario
++.). /tros elementos
+1. 9ontroles avanados para 7ormularios
+1.+. Botones
+1.1. Eti!uetas
+1.3. Agrupacin de elementos
+1.). .esactivacin de elementos
+3. Mapas
+3.+. Mapas gestionados por el cliente
+3.1. 9mo usar un mapa
+). Ta'las
+).+. .e$nir las $las
+).1. .e$nir las celdas
+).3. Ttulo de la ta'la
+:. Marcos
+:.+. Eti!ueta ;6,AMESET<
+:.1. Eti!ueta ;6,AME<
+:.3. Acceso a otros marcos
+8. Ho(as de estilo
+8.+. 9lases
+8.1. Eti!uetas ;S-A*< y ;.&4<
+>. Ho(as de estiloC re7erencia
+>.+. -ropiedades de 'lo!ue
+>.1. -ropiedades de tipo de letra
+>.3. -ropiedades de 7ormato del te"to
+>.). -ropiedades de color y 7ondo
+>.:. -ropiedades de clasi$cacin
+?. Lengua(es de script
+?.+. Javascript
+@. 9apas
+@.+. .e$nicin
+@.1. -ropiedades
15. Sonido
15.+. Sonido activado por el usuario
15.1. Sonido de 7ondo
1+. Dua de estilo
1+.+. 9ontenido
1+.1. *avegacin
1+.3. Estructura de las pginas
1+.). Accesi'ilidad
1+.:. .iseAo
1+.8. Mantenimiento y prue'as
2. Versiones del HTML
1.+. HTML 1.5
9uando se produ(o la e"plosin de &nternet el estndar de HTML !ue
circula'a era el 1.5 Eesta'lecido en noviem're del @:F% de modo !ue
cual!uier navegador !ue encontremos ser capa de interpretarlo.
-rcticamente todo lo !ue veamos en los pr"imos seis captulos est
contemplado por este estndar.
1.1. HTML 3.5 y 3.1
Aun!ue la versin 1.5 cumpla 'ien el o'(etivo para el !ue se cre% careca de
herramientas para tener un control mnimamente comple(o de los
documentos. *o se consider necesario !ue lo tuviera% ya !ue por a!uel
entonces &nternet era un 7enmeno ms 'ien circunscrito a la actividad
acadGmica y el contenido prima'a so're el diseAo. .e'ido a ello% *etscape
Elder del mercado de navegadores por a!uel entoncesF empe a incluir
eti!uetas nuevas no incluidas en ning#n estndar.
-or estos pro'lemas% el &ET6 Eel comitG !ue suele decidir todos los
estndares dentro de &nternetF comen a ela'orar el 'orrador del HTML 3.5%
!ue result ser demasiado grande para la Gpoca% lo !ue di$cult su
aceptacin en el mercado.
Esto llev a una serie de compaAias Eentre ellas *etscape% Microso7t% &BM%
Sun% etc...F a crear un nuevo comitG llamado H39% !ue es el !ue actualmente
ela'ora las nuevas versiones del HTML. Su primer tra'a(o consisti en crear
el 'orrador del HTML 3.1% !ue inclua muchas de las me(oras !ue los
principales navegadores E*etscape y E"plorerF ha'an introducido en
&nternet% como son las ta'las% los applets% etc..
Este 'orrador 7ue apro'ado en enero de +@@> e inmediatamente el H39 se
puso a tra'a(ar en la ela'oracin del siguiente estndarC el ).5.
1.3. HTML ).5
En (ulio de +@@> se presenta el 'orrador de este estndar. -or $n se
estandarian los marcos EframesF% las ho(as de estilo y los scripts Eentre otras
cosasF. El +> de diciem're de +@@> dicho 'orrador 7ue $nalmente apro'ado.
1.). Estndares en este curso
En principio cual!uier navegador de'era ser capa de interpretar el HTML
3.1% pero por si necesitis sa'er por alguna ran el estndar al !ue
pertenece una eti!ueta o parmetro en particular% se incluir una de las
siguientes indicacionesC
&ntroducido con la versin 3.1 del HTML
&ntroducido con la versin ).5 del HTML
Eti!ueta o parmetro no estndar soportado slo por el
*etscape
Eti!ueta o parmetro no estndar soportado slo por el
E"plorer
3. Mi primera pgina
3.+. El cdigo
;HTML<
;HEA.<
;T&TLE<Mi primera pagina;IT&TLE<
;IHEA.<
;B/.J<
;9E*TE,<;H+<Mi -rimera pagina;IH+<;I9E*TE,<
;H,<
;-<Esta es mi primera pagina EchispasF. -or el
momento no se !ue tendra% pero dentro de poco
pondre a!ui muchas cosas interesantes.
;IB/.J<
;IHTML<
-ara ver el resultado de este e(emplo% teclee el cdigo en un editor de te"to%
gurdelo con e"tensin html y luego a'ra el archivo con un e"plorador He'
para ver la pgina creada.
3.1. La e"plicacin
Lo primero !ue conviene e"plicar es en !uG consisten todos esos sm'olos de
mayor y menor !ue estn distri'uidos por ah. El lengua(e HTML se 'asa en
la sinta"is SDML Etoma siglasF. Esto !uiere decir !ue cual!uier cosa !ue
hagamos en HTML estar encerrada entre dos eti!uetas de esta maneraC
;ET&K=ETA parmetros< ... ;IET&K=ETA<
Hay ocasiones en !ue no es necesario cerrar la eti!ueta. Mirando el cdigo
ha'rGis visto un par de e(emplo !ue ya e"plicarG ms adelante. -ero como lo
primero !ue de'emos indicar es !ue el te"to !ue estamos componiendo es
un documento HTML pues lo indicamos asC
;HTML< ... ;IHTML<
=n documento HTML tiene una estructura !ue lo separa en dos partesC
cuerpo y ca'ecera. En la primera estar la pgina en s% mientras !ue en la
segunda incluiremos algunas cosas !ue no se ven al principio pero !ue
pueden llegar a ser muy importantes. Lo primero !ue hay !ue incluir en el
cdigo es la ca'ecera. La escri'imosC
;HEA.<
;T&TLE<Mi primera pagina;IT&TLE<
;IHEA.<
.entro de la ca'ecera slo hay otra eti!ueta. Es la #nica imprescindi'leC el
ttulo de la pgina. Es lo !ue veremos como ttulo de la ventana en los
navegadores !ue lo permitan. Es como se conocer nuestra pgina en
algunos 'uscadores y en la agenda de direcciones EbookmarksF de los
usuarios. -or tanto% parece importante pensarnos 'ien como llamarla.
3.3. El cuerpo del documento
Ahora vamos a indicar el contenido. Lo primero ser indicar !ue estamos en
el cuerpo del documentoC
;B/.J< ... ;IB/.J<
Luego pondremos el ttulo algo recalcadoC
;9E*TE,<;H+< ... ;IH+<;I9E*TE,<
9on esto colocaremos el te"to centrado E;9E*TE,<F y en 7ormato ;H+<
Eca'ecera +F !ue nos asegura !ue aumentar el tamaAo del tipo de letra lo
su$ciente como para !ue se vea 'astante resaltado. Luego separamos ese
ttulo !ue le hemos puesto a la pgina del te"to por medio de una lnea
horiontalC
;H,<
La lnea horiontal carece de eti!ueta de cierre. Esto es normal en eti!uetas
!ue no varan los atri'utos de un te"to% sino !ue insertan un elemento. -or
e(emplo% para indicarle !ue !ueremos separar el te"to de la lnea horiontal
con un espacio vertical correspondiente a un prra7o nuevo le decimosC
;-<Esta es mi primera pagina EchispasF. -or el
momento no sG !ue tendr% pero dentro de
poco pondrG a!u muchas cosas interesantes.
En el siguiente captulo veremos muchas eti!uetas !ue nos permitirn
cam'iar el aspecto de nuestros te"tos.
4. ormateo !sico
Se pueden esta'lecer varias categoras dentro de las eti!uetas usadas para
7ormatear el te"to. *osotros las dividiremos entre a!uellas !ue sirven para
cam'iar prra7os enteros y las !ue son capaces de 7ormatear tiras de
caracteres dentro del prra7o.
).+. 6ormato del prra7o
Estas son las eti!uetas ms importantes Ee"cluyendo algunas !ue veremos
ms adelanteFC
"ti#ueta $tilidad %esultado
;-<
Sirve para delimitar un prra7o.
&nserta una lnea en 'lanco
antes del te"to.
Soy un prra7o
;9E*TE,< ... -ermite centrar todo el te"toJo soy normal
;I9E*TE,< del prra7o. Jo estoy centrado
;-,E
H&.THL"< ...
;I-,E<
,epresenta el te"to encerrado
en ella con un tipo de letra de
paso $(o. Muy #til a la hora de
representar cdigo 7uente. El
parmetro H&.TH especi$ca el
n#mero m"imo de caracteres
en una lnea.
Estoy en paso $(o
;.&4
AL&D*L"< ...
;I.&4<
-ermite (usti$car el te"to del
prra7o a la i!uierda
EAL&D*LLE6TF% derecha E,&DHTF% al
centro E9E*TE,F o a am'os
mrgenes EJ=ST&6J F
Jo estoy a la i!uierda
Jo al centro
J yo a la derecha
Erecuerda a la poltica
esto% oyeF
Jo soy el ms lindo%
por!ue estoy en todos los
lados.
;A..,ESS< ...
;IA..,ESS<
-ara escri'ir direcciones Ede
esas donde vive la gente% no
electrnicasF.
Daniel Rodrguez Herrera
C/Ecuador 9, 1 !"!!#
$a%ada&onda
;BL/9MK=/TE< .
..
;IBL/9MK=/TE<
-ara citar un te"to a(eno. Se
suele implementar de(ando
mrgenes tanto a i!uierda
como a derecha% ran por la
!ue se usa ha'itualmente.
Me gustara
reencarnarme
en las yemas
de los dedos
de Harren
Beatty EHoody
AllenF
).1. Las 8 ca'eceras
El HTML nos o7rece seis eti!uetas distintas para mostrar ca'eceras. Son
GstasC
"ti#ueta %esultado
;H+< ...
;IH+<
Ca!ecera de
ni&el 1
;H1< ...
;IH1<
Ca!ecera de ni&el 2
;H3< ...
;IH3< Ca!ecera de ni&el 3
;H)< ...
;IH)< Ca!ecera de ni&el 4
;H:< ...
;IH:< Ca!ecera de ni&el '
;H8< ...
;IH8<
Ca!ecera de ni&el (
Estas eti!uetas se pueden de$nir como de 7ormato de prra7o pero por su
importancia he pre$rido tratarlas aparte. *o resulta recomenda'le utiliarlas
para aumentar o disminuir el tamaAo del tipo de letra% ya !ue cada
navegador los muestra de manera di7erente. Se usan para dividir
correctamente en secciones nuestra pgina% tal y como se hace en un
documento de te"to normal.
).3. 9am'iando el tipo de letra
Todas estas eti!uetas nos permiten cam'iar de una manera u otra el aspecto
del tipo de letra !ue estemos utiliando y se pueden utiliar con tiras de
caracteres dentro de un prra7o.
"ti#ueta $tilidad %esultado
;B< ... ;IB< -one el te"to en negrita.
)o* un te+to negro
como el ti,n
;&< ... ;I&< ,epresenta el te"to en cursiva. Esto' ladeado
;=< ... ;I=< -ara su'rayar algo.
9omo soy muy
importante estoy
su'rayado
;S< ... ;IS<
-ara tachar.
A m% en cam'io% nadie
me !uiere
;TT< ... ;ITT<
-ermite representar el te"to en
un tipo de letra de paso $(o.
*o soy varia'le
;S=-< ... ;IS=-< Letra superndice. ELmc
1
;S=B< ... ;IS=B< Letra su'ndice. a
i%(
L'
i%(
N+
;B&D< ... ;IB&D<
&ncrementa el tamaAo del tipo
de letra.
Soy D,A*.E
;SMALL< ...
;ISMALL<
.isminuye el tamaAo del tipo de
letra.
9re ver un lindo gatito
;BL&*M< ...
;IBL&*M<
Hace parpadear el te"to. ,esulta
algo irritante.
OMolestoP
).). 6ormato de 7rase
En estos elementos indicas el tipo de in7ormacin !ue encierran las
eti!uetas% pero no como se representanC
"ti#ueta $tilidad %esultado
;9&TE< ... ;I9&TE<-ara citar un te"to a(eno. Esta frase no es ma
;9/.E< ...
;I9/.E<
-ara escri'ir cdigo 7uente. int "L5Q
;ST,/*D< ...
;IST,/*D<
La cosa es importante. Hay cosas importantes.
;EM< ... ;IEM< -ara dar Gn7asis.
Hay !ue poner (nfasis en
algunas cosas.
;MB.< ... ;IMB.< Te"to tecleado por el usuario.
El usuario de'e teclear
Multivac es el me(or.
;4A,< ... ;I4A,<
,epresentar varia'les de un
cdigo.
La varia'le )% de$nida
anteriormente...
;SAM-< ...
;ISAM-<
-ara representar una serie de
caracteres literalmente.
Estoy en un literal
;ABB,< ...
;IABB,<
A'reviaturas.
La HHH usa el protocolo
http
*o son muy utiliados% ya !ue no permiten tener un control e"acto de la
manera en !ue la pgina se representar $nalmente.
).:. /tros elementos
-or #ltimo% de'emos estudiar algunas cosas !ue no son te"to y !ue podemos
incorporar a nuestra pgina.
"ti#ueta $tilidad %esultado
;H,<
&nserta una 'arra
horiontal.
;B,< Salto de lnea.
Hay un antes y un
despuGs de saltar a otra lnea
;RSS ...
SS<
9omentarios.
Esto se escri'e y ;RSS esto no
SS<
'. Caracteres especiales
Si os ha'eis $(ado en los e(emplos ha'rGis visto !ue en los te"tos de los
mismos no hay acentos% ni eAes% ni sm'olos de a'rir interrogacin o
e"clamacin. Esto es de'ido a los distintos (uegos de caracteres !ue
mane(an los ordenadores.
Las m!uinas mane(an la in7ormacin en 7ormato 'inario Ees decir% en unos y
cerosF. Estos% a su ve% 7orman n#meros% los cuales se traducen en letras.
O9moP Mediante ta'las. -odemos asignar el valor 8) a la letra a% el 8: a la
'% etc..
El pro'lema est en !ue cada ordenador es de un 7a'ricante distinto y puede
adoptar una ta'la di7erente al resto. -ara evitarlo e"isten diversos
estndares y el ms e"tendido es el AS9&&. .e hecho% actualmente todos los
ordenadores tienen la misma ta'la AS9&& para los primeros +1> caracteres.
-ero esa ta'la no contiene vocales con acento% ni eAes% ni sm'olos de a'rir
interrogacin o e"clamacin... Esto nos pasa por de(ar !ue los
norteamericanos sean !uienes construyan las computadoras.
El HTML 1.5 eligi como ta'la estndar la &S/SLatinS+% !ue comparte con la
AS9&& los +1> caracteres e incluye unos cuantos ms hasta el n#mero 1::.
:.+. 9aracteres e"tendidos en HTML
La manera de incluir los caracteres e"tendidos Ecuyo n#mero est ms all
del +1>F consiste en encerrar el cdigo entre los caracteres TU y Q. As pues%
lo siguienteC
TU+?@Q
nos de'era dar un medio EVF. Tam'iG e"iste una serie de sinonimos para
poder recordar con ms 7acilidad estos caracteres. As% por e(emplo% TU+?@Q
tam'iGn se puede escri'ir como T7rac+1Q. 4amos a ver algunos de estos
cdigos% los ms #tiles a la hora de escri'ir en espaAolC
Cdigo %esultado
TaacuteQ% TAacuteQ% TeacuteQ%
TEacuteQ%...
% W% G% X% % 2% % Y% # y Z
TntildeQ y T*tildeQ A y [
Ti!uestQ O
Tie"clQ \
TordmQ ]
Tord7Q ^
TtradeQ o TU+:3Q
_o _
TcopyQ `
TregQ a
Tn'spQ
Eespacio en 'lanco !ue no puede ser usado
para saltar de
:.1. 9aracteres de control
En el HTML e"isten cuatro caracteres de control% !ue se usan para 7ormar
eti!uetas% esta'lecer parmetros% etc.. -ara poder emplearlos sin riesgo
de'eremos escri'ir los siguiente cdigosC
Cdig
o
%esultad
o
TltQ ;
TgtQ <
TampQ T
T!uotQ b
Ahora podremos ver el e(emplo anterior corregido para incluir acentos y
dems. Tam'iGn tenGis a vuestra disposicin la ta'la completa de caracteres
del HTML 1.5.
(. "nlaces
Las siglas HTML signi$can H'per*e)t $arkup +anguage% lo !ue para nosotros
!uiere decir !ue es un lengua(e para hiperte"to. E"isten m#ltiples 7ormatos
de hiperte"to Epor e(emplo% los $cheros de ayuda de Hindo0sF y lo !ue
tienen en com#n es !ue todos poseen enlaces.
=n enlace es una ona de te"to o gr$cos !ue si son seleccionados nos
trasladan a otro documento de hiperte"to o a otra posicin dentro del
documento actual. Siendo HTML el lengua(e de &nternet% la di7erencia !ue
posee con respecto a otros tipos de hiperte"to es !ue ese otro documento
puede estar 7sicamente en la otra punta del planeta. Son los enlaces lo !ue
hacen de la telaraAa o ,orld ,ide ,eb lo !ue es.
8.+. La eti!ueta ;A<
-ara incorporar un enlace hay !ue utiliar esta eti!ueta. Todo lo !ue
encerremos entre ;A< y ;IA<% ya sea te"to o imgenes% ser considerado
como enlace y su7rir dos modi$cacionesC
+. Se visualiar de manera distinta en el navegador. El te"to aparecer
su'rayado y de un color distinto al ha'itual% y las imgenes estarn
rodeadas por un 'orde del mismo color !ue el del te"to del enlace.
1. Al pulsar so're el enlace% seremos enviados al documento !ue
apunta'a el enlace.
-ara !ue el enlace sirva para algo de'emos especi$carle una direccin. Lo
haremos de la siguiente maneraC
;A H,E6Lbdireccionb<-ulsame;IA<
La direccin estar en 7ormato =,L E-niform Resource +ocatorF.
8.1. Las =,Ls
=na =,L nos indica tanto una direccin de &nternet como el servicio !ue
esperamos nos o7reca el servidor al !ue corresponde la direccin. Tiene el
siguiente 7ormatoC
servicioCIIm!uinaCpuertoIrutaI$cherocusuario
donde el servicio podr ser uno de los siguientesC
-ttp
Es el servicio invocado para transmitir pginas 0e' y el !ue usaremos
normalmente en los enlaces.
-ttps
Es una innovacin so're el anterior% !ue nos permite acceder a
servidores Egeneralmente comercialesF !ue nos o7recen el uso de
tGcnicas de enciptacin para proteger los datos !ue intercam'iemos
con Gl de terceras personas.
.tp
-ermite trasmitir $cheros desde servidores de ftp annimo. Si no le
pedimos un $chero sino un directorio% en general el navegador se
encargar de mostrarnos el contenido del mismo para !ue podamos
escogerlo cmodamente. =tiliando la c podremos acceder a
servidores privados.
mailto
-ara poder mandar un mensa(e. -or e(emplo% la =,L
mailtoCmultivaccidecnet.com me mandara un mensa(e a m.
ne/s
-ara poder acceder a 7oros de discusin Emal traducidos a veces como
grupos de noticiasF. Se indica el servidor y el grupo. -or e(emplo
ne0sCIIne0s.i'ernet.esIes.comp.demos nos conectara con el 7oro
es.comp.demos en el servidor nacional de Tele7nica.
telnet
*o es implementado generalmente por los navegadores% !ue suelen
invocar un programa e"terno. *os permite conectarnos con otros
ordenadores y entrar en ellos como si nuestro ordenador 7uese una
terminal del mismo.
La direccin de la m!uina puede ser% o 'ien una serie de cuatro n#meros
entre 5 y 1:: E+13.3.:.8:F o 'ien algo ms 7acil de recordar como es una
serie de pala'ras separadas por puntos E000.programacion.netF. El puerto
generalmente no se indica% ya !ue el servicio predetermina uno.
La ruta es una serie de directorios separados por el sm'olo I% !ue es el
utiliado en =*&d Eel sistema operativo ms e"tendido en los servidores de
&nternetF.
E"iste otro 7ormato de =,L. 9uando !ueremos acceder a un $chero situado
en la misma m!uina !ue la pgina 0e' !ue estamos creando podemos
utiliar este 7ormatoC
rutaerelativaI$chero
En la ruta relativa podremos utiliar los dos puntos E..F para acceder al
directorio padre o comenar con la 'arra diagonal EIF para acceder a una ruta
a'soluta dentro de nuestro ordenador.
8.3. Anclas
9omo di(imos% es posi'le acceder a una posicin del documento HTML. -ara
hacerlo% primero de'emos especi$car el lugar del documento al !ue
!ueremos accederC
;A *AMELbanclab<
-ara poder ver 'ien como 7unciona% he colocado un ancla de e(emplo en el
ttulo de la seccin 8.1. -ara poder acceder a ese lugar incluimos el enlace
de esta maneraC
;A H,E6LbUanclab<4amos a donde antes;IA<
Tam'iGn podemos acceder a anclas situadas en documentos remotos. -ara
ello aAadiremos el nom're del ancla al =,L asC
;A H,E6Lbenlaces.htmlUanclab</tra ve;IA<
0. Listas
E"isten varios tipos de listas en HTML. Todas ellas se pueden meter unas
dentro de otras 7ormando r'oles muy 'onitos y preciosos. Todos los tipos
siguen el siguiente 7ormatoC
;tipoelista<
;L&<-rimer elemento
;L&<Segundo elemento
;Itipoelista<
tipoelista puede ser una de las siguientesC .&,% .L% ME*=% /L y =L.
>.+. Listas desordenadas
La eti!ueta ;=L< nos permite presentar listas de elementos sin orden alguno.
9ada elemento de la lista ir normalmente precedido por un crculo. -or
e(emplo%
;=L<
;L&<-rimer elemento
;L&<Segundo elemento
;I=L<
se ver como
-rimer elemento
Segundo elemento
La eti!ueta ;=L< admite estos parmetrosC
1armetro $tilidad %esultado
9/M-A9T
&ndica al navegador !ue de'e representar
la lista de la manera ms compacta
posi'le.
-rimer
elemento
Segundo
elemento
TJ-ELbdiscb%
bcircleb% bs!uareb
&ndica al navegador el di'u(o !ue
preceder a cada elemento de la lista.
-ara mayor fe"i'ilidad se admite tam'iGn
como parmetro de ;L&<.
Tipo disc
o Tipo circle
Tipo
s!uare
Tam'iGn son listas desordenadas a!uellas !ue utilian las eti!uetas ;.&,< y
;ME*=<. En principio tenan como propsito representar una lista estilo
directorio EmulticolumnaF o tipo men# Euna sola columnaF. En la prctica los
navegadores lo han implementado como sinonimos de ;=L<% por lo !ue no
los estudiaremos a!u.
>.1. Listas ordenadas
La eti!ueta ;/L< nos permite presentar listas de elementos ordenados de
menor a mayor. *ormalmente cada elemento de la lista ir precedido por su
n#mero en el orden. -or e(emplo%
;/L<
;L&<-rimer elemento
;L&<Segundo elemento
;I/L<
se ver como
+. -rimer elemento
1. Segundo elemento
La eti!ueta ;/L< admite estos parmetrosC
1armetro $tilidad %esultado
9/M-A9T
&ndica al navegador !ue de'e representar
la lista de la manera ms compacta
posi'le.
+. -rimer
elemento
1. Segundo
elemento
TJ-ELb+b% bab% bAb%
bib% b&b
&ndica al navegador el tipo de numeracin
!ue preceder a cada elemento de la
lista. -ara mayor fe"i'ilidad se admite
tam'iGn como parmetro de ;L&<.
+. Tipo +
a. Tipo a
A. Tipo A
i. Tipo i
&. Tipo &
STA,TLbnumb
&ndica al navegador el n#mero por el !ue
se empear a contar los elementos de la
lista.
3. -rimer
elemento
). Segundo
elemento
4AL=ELbnumb
Atri'uto de ;L&<% act#a como STA,T pero a
partir de un elemento predeterminado.
+. -rimer
elemento
+. Segundo
elemento
1. Tercer
elemento
>.3. Listas de de$niciones
Este es el #nico tipo de lista !ue no utilia la eti!ueta ;L&<. Al tener como
o'(etivo presentar una lista de de$niciones% de modo !ue tiene !ue
representar de manera distinta el o'(eto de$nido y la de$nicin. Esto se hace
por medio de las eti!uetas ;.T< y ;..<C
;.L<
;.T<-rimer elemento;..<Es un elemento muy 'onito.
;.T<Segundo elemento;..<Este% en cam'io% es peor.
;I.L<
se ver como
-rimer elemento
Es un elemento muy 'onito.
Segundo elemento
Este% en cam'io% es peor.
La eti!ueta ;.L< slo admite como parmetro el ya conocido 9/M-A9T% !ue
tiene el mismo comportamiento !ue con los otros dos tipos de lista
anteriores.
2. Imgenes
-ara incluir gr$cos e imgenes en nuestras pginas utiliaremos la eti!ueta
;&MD< de esta maneraC
;&MD S,9Lb$cheroegra$cob ALTLbdescripcionb<
El parmetro S,9 especi$ca el nom're del $chero !ue contiene el gr$co. Los
7ormatos estndar en la red son el D&6 y el J-D. La #ltimas versiones de
*etscape y E"plorer aceptan tam'iGn el 7ormato -*D.
El parmetro ALT especi$ca el te"to !ue se mostrar en lugar del gr$co en
a!uellos navegadores !ue no sean capaces de mostrarlos Ecomo el Lyn"F y
en el supuesto de !ue el usuario los haya desactivado. Algunos navegadores
lo muestran cuando pasamos el ratn por encima de la imagen. Es por eso
!ue% aun!ue algunos usuarios no lo lleguen a ver nunca% conviene ponerlo
siempre. .e hecho% el estdar HTML ).5 o'liga a hacerlo.
E"isten dos atri'utos !ue% aun!ue opcionales% conviene indicar siempreC la
altura y la anchura del gr$co en pi"els. .e este modo% el navegador puede
mostrar un recuadro del tamaAo de la imagen mientras la va leyendo de la
red y as poder mostrar el resto de la pgina correctamente mientras tanto.
;&MD S,9Lbgra$cosId0nldns.gi7b ALTLb*etscape ).5b H&.THL??
HE&DHTL3+<
Se ve asC
-ara los menos aveados en inglGs% decir !ue H&.TH es la anchura y HE&DHT
la altura.
?.+. &mgenes y enlaces
Suele ser com#n incluir enlaces dentro de un gr$co. En ese caso% por
de7ecto% los navegadores le pondrn un 'orde al gr$co para indicar !ue
e7ectivamente es un enlace. -rctico% pero la mayora de las veces 'astante
poco estGtico. -or medio del parmetro B/,.E, podremos alterar el grosor de
ese 'orde o incluso eliminarlo poniendolo a cero.
;A H,E6LbhttpCII000.netscape.comb<
;&MD S,9Lbgra$cosId0nldns.gi7b ALTLb*etscape ).5b H&.THL??
HE&DHTL3+<
;IA<
Se ve asC
Sin em'argo%
;A H,E6LbhttpCII000.netscape.comb<
;&MD S,9Lbgra$cosId0nldns.gi7b ALTLb*etscape ).5b H&.THL??
HE&DHTL3+
B/,.E,L5<
;IA<
Se ve asC

?.1. Alineacin respecto al te"to
-ara poder ma!uetar con(untamente te"to y gr$cos% el HTML proporciona%
por medio del parmetro AL&D*% las siguientes maneras de alinear una
imagen respecto del te"to !ue la acompaAaC
Valor de
3LI45
$tilidad %esultado
T/-
9oloca el punto ms alto de la imagen
coincidiendo con ms alto de la lnea
de te"to actual.
Este es el te"to
M&..LE
Alinea el punto medio Een alturaF de la
imagen con la 'ase del te"to.
Este es el te"to
B/TT/M -or
de7ecto
Alinea el punto ms 'a(o de la imagen
con la 'ase del te"to.
Este es el te"to
Este es el te"toLE6T
Este es el te"to,&DHT Coloca la imagen a la izquierda del texto.
Coloca la imagen a la derecha del texto.
Hay !ue aclarar !ue la 'ase del te"to es la lnea donde descansan casi todas
las letras del al7a'eto e"cepto algunas como la p% la g o la (.
6. ormateo 7no
Lo ideal cuando tra'a(as con te"to sera poder cam'iarlo al tamaAo !ue te
viniese 'ien% ponerlo de colorines y cam'iar el tipo de letra. Todo esto
puedes hacerlo gracias a la eti!ueta ;6/*T<.
@.+. 9am'io de color
-ara hacerlo vamos a utiliar el parmetro 9/L/,. La manera de especi$carle
el color es com#n a todas las eti!uetas HTMLC o 'ien indicando el nom're% si
es un color normal% o 'ien especi$cando el porcenta(e de ro(o% verde y aul
Ecdigo ,DBF del mismo. Los colores reconocidos son los siguientesC
DrayHhiteMaroon,ed-urple6uchsiaBlack
Silver
$tilidadB3C84%9$5
:1ermite de7nir un
gr7co de .ondo
para la
pgina.B4C9L9%1er
mite de7nir el color
de .ondo de la
pgina.B41%91"%TI
") Cuando es igual a
I;": el gr7co
de7nido como .ondo
de la pgina
permanecer
inm&il aun#ue
utilicemos las !arras
de
despla,amiento.$tili
dadA=TH/,Autor de
la
pgina.DE*E,AT/,Her
ramienta utiliada para
hacer la
pgina.9LASS&6&9AT&/*
-ala'ras !ue permite
clasi$car la pgina
dentro de un 'uscador
(err!uico Ecomo
JahooF.MEJH/,.S-ala
'ras clave por las !ue
encontrargn la pgina
en los
'uscadores..ES9,&-T&
/*.escripcin del
contenido de la
pgina.Hay tam'iGn
otro elemento
interesante !ue
podremos incluir en
nuestras ca'eceras.
9uando especi$camos
una =,L relativa en un
enlace% en principio es
para acceder a una
pgina situada en
nuestro mismo
servidor. Sin em'argo%
si
especi$camosC*avyBlu
eTealA!uaGreen
;BASE
H,E6LbhttpCII000.hor
net.orgImusicb<
$tilidadB3C84%9$5
:1ermite de7nir un
gr7co de .ondo
para la
pgina.B4C9L9%1er
mite de7nir el color
de .ondo de la
pgina.B41%91"%TI
") Cuando es igual a
I;": el gr7co
de7nido como .ondo
de la pgina
permanecer
inm&il aun#ue
utilicemos las !arras
de
despla,amiento.$tili
dadA=TH/,Autor de
la
pgina.DE*E,AT/,Her
ramienta utiliada para
hacer la
pgina.9LASS&6&9AT&/*
-ala'ras !ue permite
clasi$car la pgina
dentro de un 'uscador
(err!uico Ecomo
JahooF.MEJH/,.S-ala
'ras clave por las !ue
encontrargn la pgina
en los
'uscadores..ES9,&-T&
/*.escripcin del
contenido de la
pgina.Hay tam'iGn
otro elemento
interesante !ue
podremos incluir en
nuestras ca'eceras.
9uando especi$camos
una =,L relativa en un
enlace% en principio es
para acceder a una
pgina situada en
nuestro mismo
servidor. Sin em'argo%
si
especi$camosC*avyBlu
eTealA!uaGreen
;BASE
H,E6LbhttpCII000.hor
net.orgImusicb<
*o resulta recomenda'le cam'iar los colores del te"to y enlaces a no ser !ue
e"ista alguna di$cultad al leerlos por ha'er cam'iado el 7ondo% ya !ue en
muchas ocasiones el usuario ha podido cam'iarlos en las opciones de su
navegador y estarn ya a su gusto.
11. ormularios
=na de las mayores venta(as de la 0e' es !ue resulta tremendamente
interactiva. Los usuarios de una pgina no tienen ms !ue escri'ir al autor
de la misma para comentarle cual!uier cosa de la misma. Sin em'argo% si
deseamos !ue nos digan slo unas cosas concretas Eresponder a alguna
pregunta% seleccionar entre varias opciones% etc..F de'eremos utiliar
7ormularios. -or e(emplo%
;6/,M A9T&/*Lbb METH/.L-/ST<
*om'reC;B,<;&*-=T *AMELbnom'reb TJ-ELTEdT S&hEL31<
;B,<O9uantos son dos y dosP;B,<
;&*-=T *AMELb,espuestab TJ-EL,A.&/ 4AL=ELbmalb<3;B,<
;&*-=T *AMELb,espuestab TJ-EL,A.&/ 4AL=ELb'ienb<);B,<
;&*-=T *AMELb,espuestab TJ-EL,A.&/ 4AL=ELbmalb<:;B,<
;&*-=T TJ-ELbSu'mitb 4AL=ELb9ompro'arb<
;I6/,M<
se ver asC
*om'reC

O9uantos son dos y dosP
3
)
:

El 'otn no hace nada por!ue no hemos de$nido !uG de'e hacer% as !ue
sed 'uenos y no lo pulsGis.
Todos los elementos de un 7ormulario de'en estar encerrados entre ;6/,M<
y ;I6/,M<. 9omo parmetros ca'e destacar tres. A9T&/* de$ne el =,L !ue
de'er gestionar el 7ormulario. -uede ser una direccin de correo Eprecedida
del inevita'le mailtoC% en cuyo caso de'eremos aAadir el parmetro
E*9TJ-ELbte"tIplainb para !ue lo !ue reci'amos resulte legi'le.
-or otro lado% tenemos el parmetro METH/. de$ne la manera en !ue se
mandar el 7ormulario. Es recomenda'le utiliar -/ST. En el caso de !ue
estemos mandando el 7ormulario a nuestra direccin de correo electrnico es
o'ligado usarlo.
Ahora vamos a ver uno a uno todos los elementos !ue podemos incluir en un
7ormulario. 4eremos !ue todos ellos tienen algo en com#n. 9omo el
resultado de cual!uier 7ormulario es una lista de varia'les y valores
asignados a las mismas% todos ellos tendrn un atri'uto en com#nC el
nom're de su varia'le. El parmetro tam'iGn ser com#n a todosC *AME.
++.+. 9a(as de te"to
E"isten tres maneras de conseguir !ue el usuario introduca te"to en nuestro
7ormulario. Las dos primeras se o'tienen por medio de la eti!ueta ;&*-=T<C
El primero nos di'u(ar una ca(a donde escri'ir un te"to Ede una sola lneaF.
El segundo es e!uivalente%
pero no veremos lo !ue
tecleemos en Gl. Estos
son los atri'utos para
modi$carlosC
1armetro$tilidadS&hE
Ta maAo de la ca(a de
te"to.MAdLE*DTH*#mer
o m"imo de caracteres !ue puede introducir el usuario.4AL=ETe"to por
de7ecto !ue contendr la ca(a.-or otro lado% puede !ue necesitemos !ue el
usuario pueda introducir ms de una lnea. En ese caso se utiliar la
siguiente eti!uetaC
;TEdTA,EA<
-or de7ecto
;ITEdTA,EA<
Lo !ue incluyamos entre las dos eti!uetas ser lo !ue se muestre por
de7ecto dentro de
la ca(a. Admite estos parmetrosC
++.1. /pciones
Si lo !ue deseamos es !ue el usuario decida entre varias opciones podremos
hacerlo de dos modos. El primero es el !ue vimos en el e(emplo inicialC
3;&*-=T *AMELb,espuestab TJ-EL,A.&/ 4AL=ELbmalb<;B,<
);&*-=T *AMELb,espuestab TJ-EL,A.&/ 4AL=ELb'ienb<;B,<
:;&*-=T *AMELb,espuestab TJ-EL,A.&/ 4AL=ELbmalb<;B,<
-ara asociar varios 'otones de radio a una misma varia'le les pondremos a
todos ellos el mismo *AME. Aparte de esto acepta los siguientes parmetrosC
1armetro
U
t
i
l
i
d
a
d
4AL=E
9HE9ME.E
ste es el valor
que asignar
a la variable.
Si lo indicamos en una de las opciones esta ser la !ue estG
activada por de7ecto.
1armetr
o
$tilidad
,/HS 6ilas !ue ocupar la ca(a de te"to.
9/LS
9olumnas !ue ocupar la ca(a de
te"to.
-ero tam'iGn tenemos una posi'ilidad !ue ocupa 'astante menosC las listas
desplega'les. -ara emplearlas de'eremos utiliar dos eti!uetas% SELE9T y
/-T&/*C
Los parmetros !ue admite SELE9T son las siguientesC
1armetro$tilidadS&hEEl n#mero de opciones !ue podremos ver. Si es
mayor !ue + veremos una lista de seleccin y% si no% veremos una lista
desplega'le.M=LT&-LESi lo indicamos podremos elegir ms de una opcin.J
/-T&/* estosC
1armetro
U
t
i
l
i
d
a
d
4AL=E
SELE9TE.
Este es el
valor que
asignar a la
variable.
Si lo indicamos en una de las opciones esta ser la seleccionada
por de7ecto.
++.3. Botones del 7ormulario
E"isten dosC uno !ue se utilia para mandar el 7ormulario y otro !ue sirve
para limpiar todo lo !ue haya rellenado el usuarioC
;&*-=T TJ-ELS=BM&T<;B,<
;&*-=T TJ-EL,ESET<


-odemos cam'iar el te"to !ue el navegador pone por de7ecto en esos
'otones utiliando el parmetro 4AL=E.
++.). /tros elementos
-uede !ue necesitos !ue el usuario sencillamente nos con$rme o niegue
algo. Lo podremos conseguir por medio de controles de con$rmacinC
)o*
una
ta!la
!ue
est
en un
'otn
;&*-=T *AMELbBelleab
TJ-EL9HE9MB/d<Me considero guapoIa
Me considero guapoIa
Los parmetros de dicha eti!ueta son los normales% TJ-E% !ue podr tomar
los valores S=BM&T Epor de7ectoF% ,ESET y B=TT/*% *AME y 4AL=E.
-or otro lado% ahora podemos declarar un gr$co como un elemento ms de
entrada. como un nuevo tipo dentro del elemento &*-=TC
Este elemento se comportar de mismo modo !ue un 'otn de tipo S=BM&T%
pero aAadir como in7ormacin en el 7ormulario las coordenadas " e y donde
el usuario lo puls.
+1.1. Eti!uetas
Hasta hora% el te"to !ue acompaAa'a a los campos de entrada no esta'a
asociado a los mismos de ninguna manera. As% por e(emplo% si puls'amos
en el te"to !ue acompaAa'a a un control de con$rmacin% no suceda nada.
Ahora% en cam'io% si utiliamos la eti!ueta LABEL% el control cam'iar de
estado Eslo disponi'le en *etscape :FC
Lo 'ueno !ue tiene es !ue se puede usar sin peligro% ya !ue no a7ectar a los
usuarios de navegadores antiguos.
+1.3. Agrupacin de elementos
Hasta ahora% no disponamos de ninguna manera de agrupar visualmente
varios controles% si no ech'amos mano de elementos !ue no son del
7ormulario% como ta'las o imgenes.
Ahora% si encerramos una parte de un 7ormulario dentro de la eti!ueta
6&EL.SET se mostrar un rectngulo alrededor de los mismos. Si adems% le
indicamos un ttulo por medio de la eti!ueta LEDE*. nuestros 7ormularios
!uedarn hechos un verdadero primorC
LEDE*. admite como parmetro AL&D*% !ue indicar en !uG lugar se coloca el
ttulo. -or de7ecto es T/- Earri'aF% pudiendo estar tam'iGn a'a(o EB/TT/MF% a
la i!uierda ELE6TF o a la derecha E,&DHTF.
+1.). .esactivacin de elementos
Todos los controles de un 7ormulario se pueden desactivar% impidiendo as al
usuario !ue los utilice. Se seguirn mostrando en pantalla% aun!ue con un
aspecto distinto para indicar su triste estado. -ara ello slo tenemos !ue
indicarle el parmetro .&SABLE.C
Esto% en principio% no parece de demasiada utilidad. O-ara !uG !ueremos
tener controles desactivadosP -ara eso no los ponemos% OnoP Lo 'ueno !ue
tiene es !ue el estado de activacin de un control es accesi'le desde
JavaScript. Eso nos permitir activar o desactivar una parte de nuestro
7ormulario dependiendo de lo !ue el usuario haya introducido previamente
en otros controles del mismo.

13. Mapas
Hemos visto !ue podemos hacer enlaces de te"to y de gr$cos. -ero
tam'iGn e"iste otra posi'ilidadC !ue dentro de una sola imagen podamos
acceder a varios enlaces. Se hace declarando onas dentro de la imagen
Erectngulos% crculos% etc..F% siendo cada una de ellas un enlace distinto.
Tradicionalmente% siempre han e"istido dos maneras de hacerloC
Mapas gestionados por el cliente Eel navegadorF.
Mapas gestionados por el servidor.
Los segundos 7ueron los primeros en desarrollarse y esta'an incluidos dentro
del estndar HTML 1.5. Sin em'argo% nunca hu'o una manera com#n de
gestionar esos mapas. .e'ido a ello% *etscape ela'or un sistema propio
!ue 7ue incluido en el estndar 3.1C los mapas gestionados por el navegador.
+3.+. Mapas gestionados por el cliente
-ara utiliarlos necesitaremos dos cosasC declarar el mapa y asignarlo a una
imagen. 4amos primero a declarar nuestro mapaC
;MA- *AMELbmiemapab<
;A,EA SHA-EL... 9//,.SL... ALTLbEnlace a..b<
...
;IMA-<
.entro de la eti!ueta MA- slo podremos de$nir el nom're del mapa Ealgo
imprescindi'le% por otra parteF. Es dentro de cada elemento A,EA donde
podremos de$nir cosas ms interesantesC
-armetro$tilidadSHA-E.e$ne la 7orma de la ona% !ue podr ser
rectangular% circular o poligonal.9//,.S9oordenadas Eseparadas por
comasF !ue de$nen la ona. El n#mero y signi$cado de esas coordenadas
depender de la ona.H,E6=,L a donde ir el usuario si pulsa so're esa
ona.*/H,E6Especi$ca !ue esa ona no tiene asignado enlace
alguno.ALTTe"to !ue se presentar en lugar de la imagen en navegadores no
gr$cos para acceder al enlace.9omo podemos ver% para declarar
correctamente una ona necesitamos conocer cmo se de$nen e"actamente
las 7ormas y coordenadasC
)H31" C99%:)
,ectangular ,E9T
b"+%y+%"1%y1b siendo E"+%y+F la es!uina superior
i!uierda y E"1%y1F la in7erior derecha.
9ircular 9&,9
b"%y%radiob siendo E"%yF el centro del crculo y radio su...
eehh.. Ocmo lo dira yoP OSu radioP.
-olgono
irregular
-/LJ
b"+%y+%"1%y1%"3%y3%...b de$niendo cada pare(a E"%yF una
es!uina del polgono. La #ltima pare(a de coordenadas
se unir a la primera para cerrar el polgono.
Toda la
imagen
.E6A=LT*o se indican.
+3.1. 9mo usar un mapa
Ahora !ue hemos de$nido un mapa% slo !ueda asignarlo a una imagen. Esto
se hace del siguiente modoC
;&MD S,9L... =SEMA-LbUmiemapab<
Siempre tenemos !ue aAadir al comieno del nom're de nuestro mapa una
almohadilla EUF. 4amos a ver un e(emploC
;MA- *AMELbnavegadoresb<
;A,EA SHA-EL,E9T 9//,.SLb5%5%1)%3+b
H,E6LbhttpCII000.netscape.comb ALTLb*etscapeb<
;A,EA SHA-EL,E9T 9//,.SLb18%5%:3%3+b
H,E6LbhttpCII000.microso7t.comb ALTLbMicroso7tb<
;A,EA SHA-EL.E6A=LT */H,E6 ALTLb*adab<
;IMA-<
;&MD S,9Lbnav.gi7b H&.THL:3 HE&DHTL3+ B/,.E,L5
=SEMA-LbUnavegadoresb<
Se ve tal !ue asC

Hay !ue tener en cuenta !ue% cuando dos onas se solapan% la !ue estG
declarada primero es la !ue tiene pre7erencia. -or eso declaramos al $nal
una ona !ue no conduce a ning#n =,L por si el usuario pulsa con el ratn
donde no de'e.
14. Ta!las
Las ta'las son posi'lemente la manera ms clara de organiar la
in7ormacin. Tam'iGn es el modo ms adecuado de ma!uetar te"to y
gr$cos de una manera algo ms controlada !ue con los parmetros AL&D*.
Las ta'las se de$nen de la siguiente manera. -rimero% las caractersticas de
la ta'la% luego las de cada $la y dentro de Gsta% cada celda. As pues% una
ta'la con 1 $las y 3 columnas se declarar asC
9digo%esultado;TABLE<
;T,<
;T.<+%+;IT.<
;T.<+%1;IT.<
;T.<+%3;IT.<
;IT,<
;T,<
;T.<1%+;IT.<
;T.<1%1;IT.<
;T.<1%3;IT.<
;IT,<
;ITABLE<+%+
+%1
+%3
1%+
1%1
1%3
9omo podGis ver Eo me(or no verF la ta'la no tiene mucho aspecto de ta'la.
Kuedara me(or con unos 'ordes% OnoP -uede !ue tampoco le viniese mal
mayor espacio entre celdas o mayor anchura. Estas son las cosas !ue
podremos cam'iar con los atri'utos de TABLEC
-armetro$tilidadB/,.E,Especi$ca el grosor del 'orde !ue se di'u(ar
alrededor de las celdas. -or de7ecto es cero% lo !ue signi$ca !ue no di'u(ar
'orde alguno.9ELLS-A9&*D.e$ne el n#mero de pi"els !ue separarn las
celdas.9ELL-A..&*DEspeci$ca el n#mero de pi"els !ue ha'r entre el 'orde
de una celda y su contenido.H&.THEspeci$ca la anchura de la ta'la. -uede
estar tanto en pi"els como en porcenta(e de la anchura total disponi'le para
Gl Epondremos b+55ib si !ueremos !ue ocupe todo el ancho de la ventana
del navegadorF.AL&D*Alinea la ta'la a i!uierda ELE6TF% derecha E,&DHTF o
centro E9E*TE,F.Si ahora% por e(emplo de$nimos ahora la ta'la anterior como
;TABLE B/,.E,L+ H&.THLb:5ib AL&D*L9E*TE,< veremos lo siguienteC
+%+ +%1 +%3
1%+ 1%1 1%3
+).+. .e$nir las $las
Ahora !ue hemos de$nido la ta'la nos toca hacer lo mismo con las $las.
9ada $la se de$ne con una eti!ueta T,% !ue tiene los siguientes atri'utosC
Parmetro$tilidadAL&D*Alinea el contenido de las celdas de la $la
horiontalmente a i!uierda ELE6TF% derecha E,&DHTF o centro
E9E*TE,F.4AL&D*Alinea el contenido de las celdas de la $la verticalmente
arri'a ET/-F% a'a(o EB/TT/MF o centro EM&..LEF.
+).1. .e$nir las celdas
-or #ltimo% nos !ueda de$nir cada celda gracias a la eti!uetas T. y TH. Estas
eti!uetas son e!uivalentes% pero la #ltima se utilia para enca'eados% de
modo !ue su interior se escri'ir por de7ecto en negrita y centrado. Estos
son los atri'utos de am'asC
-armetro$tilidadAL&D*Alinea el contenido de la celda horiontalmente a
i!uierda ELE6TF% derecha E,&DHTF o centro E9E*TE,F.4AL&D*Alinea el contenido
de la celda verticalmente arri'a ET/-F% a'a(o EB/TT/MF o centro
EM&..LEF.H&.THEspeci$ca la anchura de la celda. Tam'iGn se puede
especi$car tanto en pi"els como en porcenta(e% teniendo en cuenta !ue% en
este #ltimo caso% ser un porcenta(e respecto al ancho total de la ta'la Eno
de la ventana del navegadorF.*/H,A-&mpide !ue% en el interior de la celda%
se rompa la lnea en un espacio.9/LS-A*Especi$ca el n#mero de celdas de
la $la situadas a la derecha de la actual !ue se unen a Gsta Eincluyendo la
celda en !ue se declara este parmetroF. Es por de7ecto uno. Si se pone igual
a cero% se unirn todas las celdas !ue !ueden a la
derecha.,/HS-A*Especi$ca el n#mero de celdas de la columna situadas
de'a(o de la actual !ue se unen a Gsta.-osi'lemente los dos #ltimos
parmetros no puedan !uedar claros sin e(emplos. .e hecho% a#n
entendiendo per7ectamente su 7uncin es ha'itual !ue con7undamos a uno
con otro. -ero 'ueno% vamos a ver una ta'la de 3"3 con una celda !ue se
une a una de la derecha y otra !ue se une a otra de de'a(oC
Cdigo %esultado
!"B#E B$%&E%'()
;T,<
;T. 9/LS-A*L1<+%+ y +%1;IT.<
;T.<+%3;IT.<
;IT,<
;T,<
;T. ,/HS-A*L1<1%+ y 3%+;IT.<
;T.<1%1;IT.<
;T.<1%3;IT.<
;IT,<
;T,<
;T.<3%1;IT.<
;T.<3%3;IT.<
;IT,<
;ITABLE<
+%+ y +%1 +%3
1%+ y
3%+
1%11%3
3%13%3
9omo podemos ver% cuando declaramos un celda con ,/HS-A* o 9/LS-A*% no
de'eremos declarar las celdas ba'sor'idasb o la creacin de la ta'la se nos
complicar de horri'le manera.
+).3. Ttulo de la ta'la
-or #ltimo% vamos a ver como de$nir un ttulo a la ta'la. Esto se hace por
medio de la eti!ueta 9A-T&/*. -ara ver cmo 7unciona% vamos a incluirlo en la
declaracin de la ta'la anteriorC
Cdigo %esultado
;TABLE
B/,.E,L+<
;9A-T&/*<
E(emplo de
ta'las
;I9A-T&/*<
...
;ITABLE<
E(emplo de
ta'las
+%+ y +%1 +%3
1%+ y
3%+
1%1 1%3
3%1 3%3
Esta eti!ueta admite slo un parmetroC AL&D*% !ue es por de7ecto T/-. Si lo
de$nimos como B/TT/M el ttulo se colocar al $nal de la ta'la en lugar del
comieno.
1'. Marcos
=n marco Eo frameF es una ventana independiente dentro de la ventana
general del navegador. 9ada marco tendr sus 'ordes y sus propias 'arras
de desplaamiento. As cada pgina se dividir en la prctica en varias
pginas independientes.
-ara crearlos necesitaremos un documento HTML espec$co% !ue llamaremos
documento de de$nicin de marcos. En Gl especi$caremos el tamaAo y
posicin de cada marco y el documento HTML !ue contendr. 4amos a ver
un e(emplo de este tipo de documentoC
;HTML<
;HEA.<
;T&TLE<Mi primera pgina con marcos;IT&TLE<
;IHEA.<
;6,AMESET 9/LSLb15i%?5ib<
;6,AME *AMELbindiceb S,9Lbindice.htmlb<
;6,AME *AMELbprincipalb S,9Lbintroduccion.htmlb<
;*/6,AMES<
;-<Lo siento% pero slo podrs ver esta pgina
si tu navegador tiene la capacidad de visualiar
marcos.;I-<
;I*/6,AMES<
;I6,AMESET<
;IHTML<
4amos a e"plicar detalladamente este e(emplo antes de investigar algo ms
a 7ondo cada una de las eti!uetas. 4emos !ue la ca'ecera de la pgina es
similar a un documento normal% pero el ha'itual B/.J es sustituido por un
6,AMESET. En cada 6,AMESET se divide la ventana actual Esea la general o un
marcoF en varias ventanas de$nidas o por el parmetro 9/LS o por ,/HS. En
Gste% separado por comas% se de$ne el n#mero de marcos y el tamaAo de
cada uno.
.entro del ;6,AMESET< se hacen dos cosas. -rimero% de$nir cada uno de los
marcos poniendoles un nom're y especi$cando !uG $chero HTML le
corresponde mediante la eti!ueta ;6,AME<. -or #ltimo% especi$camos lo !ue
ver el usuario en el supuesto Ecada ve ms raroF de !ue su navegador no
soporte frames dentro de la eti!ueta ;*/6,AMES<. Ahora veremos todos
estos elementos en mayor detalle.
+:.+. Eti!ueta ;6,AMESET<
Seg#n el estndar% esta eti!ueta slo de'era contener el n#mero y tamaAo
de cada marco% pero las e"tensiones de *etscape y E"plorer al estndar
o'ligan a estudiar un par de parmetros ms.
En general% los navegadores di'u(an un 'orde de separacin entre los
marcos. Si deseas eliminarlo puedes hacerlo de dos manerasC en las
eti!uetas ;6,AME< de cada una de los marcos contiguos al 'orde a eliminar o
incluyendo el parmetro 6,AMEB/,.E,L5 en el ;6,AMESET<.
9uando eliminas ese 'orde% podrs ver cmo el navegador de(a a#n un
hueco entre marcos. Este se elimina aAadiendo los parmetros
6,AMES-A9&*DL5 B/,.E,L5.
4amos a e"aminar por #ltimo los parmetros 9/LS y ,/HS. .e'eremos
asignarles una lista de tamaAos separada por comas. Se admiten los
siguientes 7ormatos de tamaAoC
Con porcenta<es= Al igual !ue con las ta'las% podemos de$nir el
tamaAo de un marco como un porcenta(e del espacio total disponi'le.
3!solutos= Si ponemos un n#mero a secas% el marco correspondiente
tendr el tamaAo especi$cado en pi"els.
)o!re el espacio so!rante= Si colocamos un asterisco EjF estaremos
indicando !ue !ueremos todo el espacio so'rante para ese marco.
-odemos poner este sm'olo en varios marcos% !ue se repartirn el
espacio e!uitativamente como 'uenos hermanos. Si !ueremos !ue
uno tenga ms de'eremos ponerle al asterisco un n#mero delante. As%
un marco con un espacio de 3j ser tres veces ms grande !ue su
compaAero% !ue tiene un asterisco slo% el po're.
-or e(emplo% el siguiente cdigo es una muestra de cmo com'inar los tres
mGtodosC
;6,AMESET 9/LSLb+5i%j%155%1jb<
Supongamos !ue el ancho total de la ventana son 8)5 pi"els. El primer
marco ocupar el +5i% es decir% 8) pi"els. El tercero necesita 155% luego nos
!uedan )>8 para los otros dos. 9omo el cuarto de'e tener el do'le de
espacio !ue el segundo% tenemos apro"imadamente +:? pi"els para este
#ltimo y 3+8 para el cuarto marco.
Hay !ue tener cuidado cuando usamos valores a'solutos en la de$nicin de
marcosQ de'emos asegurarnos de tener al menos un marco con un tamaAo
relativo si !ueremos estar seguros del aspecto $nal de la pgina.
-or #ltimo% indicar !ue las eti!uetas ;6,AMESET< se pueden anidar. Esto se
hace poniendo otro ;6,AMESET< donde normalmente colocamos las eti!uetas
;6,AME< tal !ue asC
;6,AMESET 9/LSLb15i%?5ib<
;6,AME *AMELbindiceb S,9Lbindice.htmlb<
;6,AMESET ,/HSLbj%?5b<
;6,AME *AMELbprincipalb S,9Lbintroduccion.htmlb<
;6,AME *AMELbe(emplosb S,9Lbe(emplo.htmlb<
;I6,AMESET<
;I6,AMESET<
El resultado del anidamiento lo podrGis contemplar a!u.
+:.1. Eti!ueta ;6,AME<
Esta eti!ueta de$ne tan slo las caractersticas de un marco determinado% no
de un con(unto de ellos. Estos son los parmetros !ue admiteC
1armetro
U
t
i
l
i
d
a
d
*AME
"
s
i
g
n
a

u
n

n
o
m
b
r
e

a

u
n

m
a
r
c
o

*
a
r
a

q
u
S,9
e

d
e
s
*
u
+
s

*
o
d
a
m
o
s

r
e
,
e
r
i
r
n
o
s

a

+
l
.
-
n
d
i
c
a

l
a

d
i
r
e
c
c
i
.
S9,/LL&*D
n

d
e
l

d
o
c
u
m
e
n
t
o

/
!
0
#

q
u
e

o
c
u
*
a
r

e
l

m
a
r
c
o
.
.
e
c
i
d
e

s
i

*/,ES&hE
s
e

c
o
l
o
c
a
n

o

n
o

'
a
r
r
a
s

d
e

d
e
s
p
l
a

a
m
i
e
n
t
o

a
l

m
a
r
c
o

p
a
r
a

!
u
e

p
o
d
a
m
o
s

m
o
v
e
r
n
o
s

p
o
r

s
u

c
o
n
t
e
n
i
d
o
.

S
u

v
a
l
o
r

e
s

p
o
r

d
e
7
e
c
t
o

A
=
T
/
%

!
u
e

d
e
(
a

a
l

n
a
v
e
g
a
d
o
r

l
a

d
e
c
i
s
i

n
.

L
a
s

o
t
r
a
s

o
p
c
i
o
n
e
s

!
u
e

t
e
n
e
m
o
s

s
o
n

J
E
S

y

*
/
.
S
i

6,AMEB/,.E,
l
o

e
s
*
e
c
i
,
i
c
a
m
o
s

e
l

u
s
u
a
r
i
o

n
o

*
o
d
r

c
a
m
b
i
a
r

d
e

t
a
m
a
1
o

e
l

m
a
r
c
o
.
A
l

i
g
u
a
l

!
u
e

s
u

h
o
m

n
i
m
o

e
n

l
a

e
t
i
!
u
e
t
a

MA,D&*H&.TH
;
6
,
A
M
E
S
E
T
<
%

s
i

l
o

i
g
u
a
l
a
m
o
s

a

c
e
r
o

s
e

e
l
i
m
i
n
a
r

e
l

'
o
r
d
e

c
o
n

t
o
d
o
s

l
o
s

m
a
r
c
o
s

c
o
n
t
i
g
u
o
s

!
u
e

t
e
n
g
a
n

t
a
m
'
i
G
n

e
s
t
e

v
a
l
o
r

a

c
e
r
o
.
MA,D&*HE&DH
TPermite cambiar
los mrgenes
horizontales
dentro de un
marco. Se
re*resenta en
*ixels.
&gual al anterior pero con mrgenes verticales.
+:.3. Acceso a otros marcos
-or de7ecto% cuando pulsamos so're un enlace situado dentro de un marco%
la nueva pgina a la !ue !ueremos acceder la veremos encerrada en ese
mismo marco. Es posi'le !ue deseemos !ue esto no ocurra. -or e(emplo% si
tenemos un marco !ue no sirve de ndice y otro donde mostramos los
contenidos sera desea'le !ue los enlaces del marco ndice se a'rieran en el
otro marco. Esto es posi'le hacerlo gracias al parmetro TA,DET.
Este parmetro se puede colocar en tres eti!uetasC ;A<% ;A,EA< y ;BASE<.
En las dos primeras sirve para indicar el marco en el !ue a'riremos ese
enlace en particular y el #ltimo modi$caremos el marco en el !ue por
de7ecto se nos muestran todos los enlaces.
-ero para !ue un parmetro 7uncione% es ha'itual !ue le asignemos un valor%
y TA,DET no es una e"cepcin. -ara indicarle el marco !ue deseamos le
asignaremos el nom're del mismo. As% en los e(emplos anteriores% si en el
marco llamado indice tenemos un enlace !ue !ueremos se a'ra en el marco
principal pondremosC
;A H,E6Lbpagina.htmlb TA,DETLbprincipalb<
Tam'iGn e"isten cuatro nom'res reservados !ue podremos utiliar en el
parmetro TA,DETC
>top
Elimina todos los marcos e"istente y muestra la nueva pgina en la
ventana original sin marcos.
>!lan?
Muestra la nueva pgina en una ventana nueva y sin nom're del
navegador.
>sel.
Muestra la nueva pgina en el marco donde est declarado el enlace.
>parent
Muestra la nueva pgina en el ;6,AMESET< !ue contiene al marco
donde se declara el enlace. En el e(emplo !ue pusimos de ;6,AMESET<
anidados% una enlace situado en el marco e(emplo cuyo parmetro
TA,DET 7uese igual a eparent eliminara la separacin entre los marcos
e(emplo y principal y mostrara en ese nuevo marco la nueva pgina.
1(. Ho<as de estilo
Las ho(as de estilo intentan separar el contenido de un pgina de la 7orma de
presentarlo en pantalla. Esto lo hacen personi$cando los cam'ios !ue las
eti!uetas de 7ormato HTML realian en nuestro te"to. -or e(emplo% sa'emos
!ue usando ;-< tendremos una prra7o nuevo con una separacin del
anterior determinada% etc.. 9on las ho(as de estilo tam'iGn podremos decirle
a un prra7o !ue todo su te"to sea verde y !ue adems va a tener un
margen i!uierdo de 35 pi"els. -or e(emplo.
El primer navegador en soportar ho(as de estilo 7ue el E"plorer 3.5. =tilia la
llamada sinta"is en cascada. El 9ommunicator acepta esa sinta"is e
introduce una nueva 'asada en JavaScript. Sin em'argo% como el estndar
ms comunmente aceptado de sinta"is de ho(as de estilo es el de cascada%
ser este el #nico !ue veamos. 4amos a empear con un e(emploC
;STJLE TJ-ELbte"tIcssb<
- kcolorC greenQ marginSle7tC 35Ql
;ISTJLE<
4amos a detenernos en todos los elementos. -ara empear% la eti!ueta HTML
con la !ue de'eremos englo'ar las ho(as de estilo ser ;STJLE<% !ue slo
podr estar situada en la ca'ecera de la pgina. Su parmetro TJ-E indica la
sinta"is !ue utiliaremos para de$nirlas. En el caso de las ho(as en cascada
de'er ser te"tIcss.
Ahora e"aminemos la ho(a de estilo propiamente dicha. &ndicaremos primero
la eti!ueta !ue deseamos personaliar. Ser ;-<. .espuGs% entre llaves%
pondremos una lista de las cosas !ue !ueremos modi$car. En nuestro caso
son dos% el color Een el 7ormato ha'itualF y el margen% !ue se de$ne en
pi"els.
Hay !ue destacar !ue% aun!ue muchas veces los navegadores tengan una
cierta manga ancha% la sinta"is 9SS E9ascading Style SheetF es sensi'le a la
di7erencia entre maysculas y min#sculas. 9onviene tener cuidado.
El HTML ).5 permite declarar 7uera de la pgina las ho(as de estilo% llevando
de este modo al e"tremos su $loso7a de separar 7orma y contenido. Si
colocamos nuestras ho(as de estilo en un $chero llamado estilos.css Esolo las
ho(as% no la eti!ueta ;STJLE<F no tendremos ms !ue incluir la siguiente
lnea en la ca'ecera de nuestro documento HTML para incluirlas en nuestras
pginasC
;L&*M ,ELLbstylesheetb H,E6Lbestilos.cssb TJ-ELbte"tIcssb<
4amos a ver cmo !uedara un prra7o !ue siguiese la ho(a de estilo anterior
Si la cosa va 'ien% este prra7o estar escrito en verde y con un margen
i!uierdo de 35 pi"els. -recioso% OnoP em'argo% estoy convencido de !ue
los ms avispados se ha'rn dado cuenta de !ue les estoy ocultando
algo. -or lo !ue he dicho hasta ahora la personaliacin de una eti!ueta
de'era ser general y en esta pgina slo este prra7o est modi$cado.
*o os preocupGis demasiado% ahora os cuento como se hace.
+8.+. 9lases
Hasta ahora ha'amos de$nido estilos para una eti!ueta determinada. -ero
tam'iGn podemos hacerlo para una clase determinada. OEsto !ue signi$caP
-ues !ue si% por e(emplo% de$nimos la ho(a de estilo de la clase verde de la
siguiente maneraC
-.verde kcolorC greenQ marginSle7tC 35p"Ql
slo estarn verdes y con un margen i!uierdo de 35 pi"els a!uellos prra7os
de$nidos con ;- 9LASSLbverdeb<. As de sencillo.
Ampliando un poco ms las posi'ilidades de las clases% se pueden realiar
e"cepciones. Supongamos !ue tenemos unos prra7os !ue !ueremos !ue
tengan unos mrgenes determinados y color verde. J deseamos !ue uno
solo de esos prra7os% con los mismo mrgenes% sea aul. -odramos de$nir
dos clases distintas% pero hay un mGtodo me(orC usar el parmetro &.. -or
e(emploC
all.verde kcolorC greenQ marginSle7tC +5p"Ql
Ue(+ k colorC 'lueQl
Ahora todos los prra7os de clase verde seran% o'viamente% verdes y con un
margen de +5 pi"els. Sin em'argo el prra7o de$nido por ;- 9LASSLbverdeb
&.Lbe(+b< ser aulC
Este prra7o es muy verde.
J anda !ue este...
Sin em'argo% este no% 7(ate !ue curioso.
+8.1. Eti!uetas ;S-A*< y ;.&4<
-uede !ue% a veces% no !ueramos modi$car el comportamiento de un
elemento sino !ue creemos un estilo !ue !ueremos act#e slo% un estilo
completo creado de la nada. =na eti!ueta nueva y propia. Entonces% O!uG
hacemosP =tiliar las eti!ueta ;S-A*< y ;.&4<.
El mGtodo es simple. .e$nimos una clase ro(o !ue simplemente modi$!ue el
color E!ue ser ro(oF. Ahora% si !ueremos !ue una seccin de te"to estG en
ro(o lo encerraremos entre las eti!uetas ;S-A* 9LASSLbro(ob< y ;IS-A*< o entre
;.&4 9LASSLbro(ob< y ;I.&4<.
La di7erencia entre am'as es !ue% mientras S-A* realmente no hace nada por
s misma% .&4 convierte a todo lo !ue encierra en un 'lo!ue aparte Eponiendo
un salto de lnea tanto al comieno como al $nalF. 4eremos en el siguiente
captulo !ue a las eti!uetas !ue se comportan como 'lo!ues E;-<% ;H+<% las
!ue di(imos modi$can un prra7o enteroF se les pueden de$nir atri'utos
propios desde las ho(as de estilo. -or e(emplo% si de$nimos las siguientes
ho(asC
all.titulo k
marginStopC S1)p"Q
colorC 'lueQ
7ontSsieC 15p"Q
l
all.som'ra k
marginStopC 1p"Q
marginSle7tC 1p"Q
colorC 'lacmQ
7ontSsieC 15p"Q
l
cuyos atri'utos e"plicaremos en la re7erencia de las ho(as de estilo% y
ponemos el siguiente cdigo HTMLC
;.&4 AL&D*Lb9E*TE,b 9LASSLbsom'rab<El maravilloso curso de
HTML;I.&4<
;.&4 AL&D*Lb9E*TE,b 9LASSLbtitulob<El maravilloso curso de HTML;I.&4<
o'tendremos este 'ello e7ectoC
El maravilloso curso de HTML
El maravilloso curso de HTML
En el siguiente captulo tenGis una gua de re7erencia con todos Eo casi todosF
los atri'utos !ue se pueden modi$car con 9SS.
10. Ho<as de estilo= re.erencia
En este captulo vamos a ver todas Eo casi todasF las propiedades !ue se
pueden alterar por medio de las ho(as de estilo. Hay !ue indicar !ue algunos
de ellos no los soporta el E"plorer y en cam'io otros no los entiende el
9ommunicator. As !ue es recomenda'le pro'arlos en am'os e"ploradores
antes de incorporarlos a nuestras pginas.
+>.+. -ropiedades de 'lo!ue
4amos a empear con las propiedades de 'lo!ue% !ue de$nen cosas como
los mrgenes o la colocacin de 'lo!ues de contenido HTMLC
.istancia mnima entre
un 'lo!ue y los dems
elementos. Tanto
margin como marginsEF
se utilian para
cam'iar todos estos
atri'utos a la
ve.tamaAo%
:escripcin 1osi!les
&alores
porcenta(e o auto. -or
de7ecto es
cero.Pro*iedad
paddingStop% paddingS
right% paddingS'ottom%
paddingSle7t%
paddingC top right
'ottom le7tmarginStop%
marginSright% marginS
'ottom% marginSle7t%
marginC top right
'ottom le7t
.istancia entre el 'orde y el
contenido de un 'lo!ue.
tamaAo%
porcenta(e o auto.
-or de7ecto es
cero.
'orderStopS0idth%
'orderSrightS0idth%
'orderS'ottomS0idth%
'orderSle7tS0idth%
'orderS0idthC top right
'ottom le7t
Anchura del 'orde de un 'lo!ue. numGrico
'orderSstyle Estilo del 'orde de un 'lo!ue.
none% solid o 3.%
por de7ecto
ninguno EnoneF.
'orderScolor 9olor del 'orde de un 'lo!ue. cual!uier color
0idth% height
TamaAo de un 'lo!ue. Su mayor
utilidad est en su aplicacin a un
elemento gr$co.
tamaAo%
porcenta(e o auto%
automtico por
de7ecto.
foat
Justi$cacin del contenido de un
'lo!ue.
le7t% right o none%
por de7ecto
ninguna.
clear
-ermiso para !ue otro elemento se
pueda colocar a su i!uierda o
derecha.
le7t% right% 'oth o
none% por de7ecto
ninguno.
+>.1. -ropiedades de tipo de letra
Ahora vamos a e"aminar las propiedades del tipo de letra !ue el usuario va a
ver. Son las siguientesC
1ropieda
d
:escripcin 1osi!les &alores
7ontS
7amily
Tipo de letra E!ue puede
ser genGricoF !ue vamos
a usar.
lista de tipos% ya sean genGricos o no%
separados por comas.
7ontSsie TamaAo del tipo de letra.
""Ssmall% "Ssmall% small% medium% large% "S
large% ""Slarge% tamaAo relativo o tamaAo
a'soluto. -or de7ecto medium.
7ontS
0eight
Drosor del tipo de letra
EnegritaF.
normal% 'old% 'older% lighter o +55S@55
Edonde @55 es la negrita ms gruesaF.
-or de7ecto normal.
7ontSstyle
Estilo del tipo de letra
EcursivaF.
normal% italic% italic smallScaps% o'li!ue% o'li!ue
smallScaps o smallScaps. -or de7ecto normal.
9a'e recordar !ue los tipos genGricos son seri7% sansSseri7% cursive% 7antasy y
monospace. 9ada uno de estos tipos sern e!uivalentes a alguno !ue pueda
tener instalado el ordenador del usuario. As% por e(emplo% en un -9 con
Hindo0s instalado seri7 puede e!uivaler a Times *e0 ,oman y monospace a
9ourier.
+>.3. -ropiedades de 7ormato del te"to
*uesto siguiente o'(etivo van a ser las propiedades de 7ormato del te"to !ue
cual!uier procesador de te"tos nos permite cam'iar.
1ropiedad:escripcin 1osi!les &alores
lineSheight &nterlineado. n#mero o porcenta(e.
te"tS
decoration
E7ectos variados
so're el te"to.
none% underline Esu'rayadoF% overline Ecomo
su'rayado% pero por encimaF% lineSthrough
EtachadoF o 'linm EparpadeanteFQ por de7ecto
ninguno.
verticalS
align
-osicin vertical del
te"to.
'aseline EnormalF% su' Esu'ndiceF% super
EsuperndiceF% top% te"tStop% middle% 'ottom% te"tS
'ottom o un porcenta(e. -or de7ecto 'aseline
te"tS
trans7orm
Trans7orma el te"to a
may#sculas o
min#sculas.
capitalie Epone la primera letra en
may#sculasF% uppercase Econvierte todo a
may#sculasF% lo0ecase Ea min#sculasF o none%
por de7ecto no hace nada.
te"tSalign
Justi$cacin del
te"to.
le7t% right% center o (usti7y
te"tSindent
Ta'ulacin con !ue
aparece la primera
lnea del te"to.
tamaAo o porcenta(e% por de7ecto cero.
+>.). -ropiedades de color y 7ondo
Tam'iGn es posi'le cam'iar los colores y el gr$co de 7ondo de un elemento.
1ropieda
d
:escripcin 1osi!les &alores
color 9olor del te"to. un color Een el 7ormato ha'itualF.
'acmgroun
d
Modi$ca tanto el gr$co el
color de 7ondo.
direccin del $chero !ue contiene la
imagen o un color.
Hay !ue decir !ue% en la sinta"is en cascada% las direcciones se e"presan del
siguiente modoC
'acmgroundC urlE7ondo'onito.gi7FQ
+>.:. -ropiedades de clasi$cacin
Hasta ahora ha'amos distinguido a la hora de ver las propiedades de un
elemento en si estos eran tratados como 'lo!ues o no. -ero el ser 'lo!ues o
no... Ono es acaso otra propiedadP Estas y otras 7ormas de clasi$car los
elementos se pueden cam'iar usando las siguientes propiedadesC
1ropieda
d
:escripcin 1osi!les &alores
display
.ecide si un elemento es interior
Ecomo ;&<F% un 'lo!ue E;-<F o un
elemento de una lista E;L&<F.
inline% 'locm% list y none E!ue
napagan el elementoF
listSstyle
Estilo de un elemento de una
lista% pudiendo incluir un gr$co al
comieno del mismo.
disc% circle% s!uare% decimal% lo0erS
roman% upperSroman% lo0erSalpha%
upperSalpha% none o la direccin de
un gr$co
0hiteS
space
.ecide como se mane(an los
espacios% si de manera normal o
como sucede dentro de la
eti!ueta ;-,E<.
normal y pre
J ahora... ya no hay ms... \por 7n aca'amosR .e(adme !ue respire un poco
y ahora continuamos.
12. Lengua<es de script
=n lengua(e de script es un pe!ueAo lengua(e de programacin cuyo cdigo
se inserta dentro del documento HTML. Este cdigo se e(ecuta en el
navegador del usuario al cargar la pgina% o cuando sucede algo especial
como puede ser el pulsar so're un enlace.
Estos lengua(es permiten variar dinmicamente el contenido del documento%
modi$car el comportamiento normal del navegador% validar 7ormularios%
realiar pe!ueAos trucos visuales% etc... Sin em'argo% conviene recordar !ue
se e(ecutan en el navegador del usuario y no en la m!uina donde estGn
alo(adas% por lo !ue no podrn realiar cosas como mane(ar 'ases de datos.
Esto hace !ue los contadores Epor e(emploF se de'an realiar de otra
manera% utiliando programas 9D&.
El primer lengua(e de script !ue vi la lu 7ue el JavaScript de *etscape.
*acido con la versin 1.5 de este navegador y 'asado en la sinta"is de Java%
su utilidad y el casi a'soluto monopolio !ue entonces e(erca *etscape en el
mercado de navegadores permitieron !ue se populariara y e"tendiera su
uso.
El m"imo rival del *etscape *avigator% el &nternet E"plorer de Microso7t%
comen a soportar este lengua(e en su versin 3.5. 6ue tam'iGn entonces
cuando introdu(o el #nico rival serio !ue el JavaScript ha tenido en el
mercado de los lengua(es de scriptC el 4BScript. Basado en el lengua(e BAS&9%
no ha tenido e"cesiva di7usin en &nternet de'ido a la previa implantacin
del JavaScript y a !ue son de parecida 7uncionalidad% pero s es utiliado
dentro de &ntranets 'asadas en el E"plorer y dentro de otras aplicaciones de
Microso7t% como &&S% Access% Hord% etc..
+?.+. Javascript
9omo este curso est orientado a &nternet% no vamos a ver nada de 4BScript
a!u por las raones comentadas anteriormente. -ero para ilustrar la utilidad
de los lengua(es de script% vamos a realiar una pe!ueAa introduccin al
Javascript.
4amos a realiar nuestro primer bprogramab en JavaScript. Haremos surgir
una ventana !ue nos muestre el 7amoso mensa(e bhola% mundob. As
podremos ver los elementos principales del lengua(e. El siguiente cdigo es
una pgina He' completa con un 'otn !ue% al pulsarlo% muestra el mensa(e.
;HTML<
;HEA.<
;S9,&-T LA*D=ADELbJavaScriptb<
;RSSS
7unction HolaMundoEF k
alertEb\Hola% mundoRbFQ
l
II SSS<
;IS9,&-T<
;IHEA.<
;B/.J<
;6/,M<
;&*-=T TJ-ELb'uttonb *AMELbBotonb 4AL=ELb-ulsameb
on9licmLbHolaMundoEFb<
;I6/,M<
;IB/.J<
;IHTML<
J a!u est nuestro e(emplo 7uncionandoC
Ahora vamos a ver% paso por paso% !ue signi$ca cada uno de los elementos
e"traAos !ue tiene la pgina anteriorC
;S9,&-T LA*D=ADELbJavaScriptb<
;IS9,&-T<
.entro de estos elementos ser donde se puedan poner 7unciones en
JavaScript. -uedes poner cuantos !uieras a lo largo del documento y en el
lugar !ue ms te guste. Si un navegador no entiende la eti!ueta ;S9,&-T<
escri'ir lo !ue hay entre medias de estos elementos% as !ue lo encerramos
entre comentarios por si las moscas.
7unction HolaMundoEF k
alertEb\Hola% mundoRbFQ
l
Esta es nuestra primera 7uncin en JavaScript. En el cdigo de la misma
vemos una llamada al mGtodo alert E!ue pertenece al o'(eto 0indo0F !ue es la
!ue se encarga de mostrar el mensa(e en pantalla. -or un 7allo del *etscape
no se pueden poner las eti!uetas HTML de caracteres especiales en una
7uncinC no los reconoce. As !ue pondremos directamente b\b
arriesgndonos a !ue salga de otra manera en ordenadores con un (uego de
caracteres distinto al del nuestro.
;6/,M<
;&*-=T TJ-ELb'uttonb *AMELbBotonb 4AL=ELb-ulsameb
on9licmLbHolaMundoEFb<
;I6/,M<
.entro del elemento !ue usamos para mostrar un 'otn vemos una cosa
nuevaC on9licm. Es un e.ento. 9uando el usuario pulsa el 'otn% el evento
on9licm se dispara y e(ecuta el cdigo !ue tenga entre comillas% en este caso
la llamada a la 7uncin HolaMundoEF% !ue tendremos !ue ha'er de$nido con
anterioridad.
16. Capas
Las capas se pueden de$nir como pginas !ue se pueden incrustar dentro de
otras. Los atri'utos de una capa Eposicin% visi'ilidad% etc.F% como los de
cual!uier otro elemento HTML% pueden de$nirse dentro de una ho(a de estilo.
Su contenido% en cam'io% siempre de'er ser especi$cado dentro de la parte
principal de la pgina. 9omo se puede ver% de nuevo estamos siguiendo la
$loso7a de separar el contenido y la 7orma de representarlo.
En realidad% el nom're de capas no es nada o$cialC es un invento de
*etscape. La denominacin o$cial podra traducirse como bcontenido HTML
posiciona'le dinmicamenteb. Toma ya. Tampoco se las puede considerar
dentro de ning#n estndar HTML sino de los estndares 9SS% pero son la
'ase de lo !ue se ha dado en llamar HTML dinmico.
Sin duda% lo ms importante de las capas es la posi'ilidad !ue presentan de
ser movidas y modi$cadas desde un lengua(e de script. .esgraciadamente%
las implementaciones de *etscape y E"plorer son incompati'les entre s% por
lo !ue resulta complicado escri'ir cdigo !ue 7uncione en am'as
plata7ormas. Estos temas los estudia en pro7undidad el curso de HTML
dinmico.
+@.+. .e$nicin
La #nica manera com#n de de$nir capas en E"plorer y *etscape Eversiones )
y superiores cuandos las hayaF es mediante ho(as de estilo en sinta"is 9SS%
por lo !ue ser la !ue usemos de a!u en adelante.
La de$nicin de una capa sigue la misma estructura !ue la !ue usa'amos
para decidir las caractersticas de una eti!ueta con el parmetro &.C
;STJLE TJ-ELbte"tIcssb<
Umicapa kpositionCa'soluteQ topC+55p"Q le7tC15p"Ql
;ISTJLE<
Esto colocara a la capa !ue hemos denominado micapa a 15 pi"els de la
i!uierda de la pna y a +55 del comieno de la misma. Muy 'ien% pero...
Odonde escri'imos lo !ue !ueremos !ue contenga la capaP =tiliaremos para
ello la eti!ueta ;S-A*<C
;.&4 &.Lbmicapab<
;H+<El ttulo de la capa;IH+<
;-<A!u es donde ira el te"to.
...
;I.&4<
Las capas !ue hemos de$nido hasta ahora se colocan en una posicin
determinada de la pgina. -ero e"iste otro tipo de capas llamadas fotantes
cuya colocacin depende% en cam'io% de la posicin dentro del cdigo 7uente
de la pgina donde las hayamos colocado. Se de$nen asC
;STJLE TJ-ELbte"tIcssb<
Ufotante kpositionC relativeQ le7tC 15p"Q topC +55p"Ql
;ISTJLE<
-uedes ver un e(emplo !ue te mostrar las di7erencias entre capas a'solutas
y relativas.
+@.1. -ropiedades
E"isten varias propiedades de las capas !ue podemos modi$car% como son la
posicin% la visi'ilidad% el orden en !ue se ponen en pantalla% etc... Son estosC
1ropiedad :escripcin 1osi!les &alores
le7t y top
Sit#an la es!uina superior i!uierda
de la capa respecto a la es!uina
superior i!uierda de la capa donde
estG metida. Hay !ue tener en
cuenta !ue el documento completo
tam'iGn se considera una capa.
distancia en pi"els% por
de7ecto cero.
0idth y height
.eterminan la anchura y altura de la
capa.
un tamaAo en pi"els.
clip *os permite de$nir el rea !ue se
podr ver dentro de la capa. -or
un rea.
e(emplo% clipCrectE15p" 35p" )5p" +5p"FQ
recortar la capa creando un cuadro
visi'le cuya es!uina superior
i!uierda est a +5 pi"els por la
i!uierda y 15 por arri'a de la de la
capa y cuyo tamaAo sera de 35S+5
de ancho y )5S15 de alto.
Sinde"
Las capas con un mayor Sinde" se
colocarn ms arri'a Ese di'u(arn
al $nal% encima de las otrasF. .e'e
ser un valor positivo y #nicoC dos
capas no pueden tener el mismo S
inde".
n#mero positivo% por
de7ecto las capas
de$nidas en el cdigo
HTML ms tarde estn
ms arri'a.
visi'ility
Especi$can si la capa de'e verse o
estar oculta.
visi'le% hidden EocultaF o
inherit Ehereda la
visi'ilidad de la capa
padreF. En a!uellas capas
!ue simplemente estGn
dentro de la pgina
principal% este valor es
e!uivalente a visi'le.
'acmgroundS
image
Dr$co de 7ondo de la capa. una direccin.
'acmgroundS
color y layerS
'acmgroundS
color
9olor de 7ondo de la capa. un color.
Esto es todo. Si !uieres sa'er algo so're modi$cacin dinmica de capas
desde JavaScript% visita mi curso.
2@. )onido
A#n cuando les pueda parecer incre'le a algunos hom'res de poca 7e% es
posi'le escuchar sonidos Eo m#sicaF desde el propio navegador. Tanto
*etscape como E"plorer incorporan desde hace tiempo la capacidad de
reproducir sonido. El #nico pro'lema es !ue los archivos suelen ser grandes
y% siendo algo innecesario y superfuo% poca gente incluye melodas en sus
pginas.
Los 7ormatos !ue se puede asegurar !ue los navegadores reproducirn son
los archivos HA4 y M&.. -ara poder reproducir otros necesitarn el plug/in o
aAadido necesario% como puede ser el ,eal Audio para los archivos ,A o el
Mod-lug para los M/. y derivados.
15.+. Sonido activado por el usuario
La manera ms sencilla de incluir sonidos es de(ando al usuario la decisin
de escucharlos o no. -ara hacerlo incluiremos el sonido en el parmetro H,E6
de un enlace% como si 7uera una pgina HTMLC
;A H,E6Lbhola.0avb<Si pulsas te saludo;A<
15.1. Sonido de 7ondo
Lo del sonido de 7ondo ya es ms complicado% ya !ue *etscape y E"plorer
o7recen soluciones propietarias% distintas e incompati'les de hacer sonar un
archivo de 7ondo.
En E"plorer% desde la versin 1.5% se pueden incluir 7ondos sonoros utiliando
la eti!ueta BDS/=*.C
;BDS/=*. S,9Lbmusica.midb<
El parmetro S,9 indicar el archivo a reproducir. Esta eti!ueta admite
tam'iAen otro parmetro% L//-% !ue indica el n#mero de veces consecutivas
!ue sonar el $chero. Si se indica L//-Lbin$niteb% el archivo se reproducir
inde$nidamente% mientras estemos en la pgina.
*etscape utilia su eti!ueta ;EMBE.<. Tericamente% esta eti!ueta de'era
servir para unir o'(etos de varios tipos a la pgina 0e'% pero en la prctica
slo se utilia para esto. Esta eti!ueta tiene los siguiente parmetrosC
1armetro
U
t
i
l
i
d
a
d
S,9
C
o
n
t
i
e
n
e

e
l

n
o
m
b
r
e

d
e
H&.TH y HE&DHT

a
r
c
h
i
v
o

d
e

s
o
n
i
d
o

a

r
e
*
r
o
d
u
c
i
r
E
n

2
e
t
s
c
a
*
e

a
*
a
r
e
c
e

u
A=T/STA,TLbtrueb
n

*
e
q
u
e
1
o

r
e
*
r
o
d
u
c
t
o
r
3
e
s
t
o
s

*
a
r

m
e
t
r
o
s

e
s
*
e
c
i
,
i
c
a
n

s
u

t
a
m
a
1
o
.
"
r
r
a
n
c
a

a
u
t
o
m

t
i
c
a
m
e
n
t
e

l
a

r
e
*
r
o
d
u
c
c
i
.
n
.
L//-Lbtrueb
H&..E*Lbtrueb%e
*roduce
ininterrum*idamente
/culta el reproductor.
el ,ichero hasta que
salimos de la *gina.
Sin em'argo% y de'ido a algunos 'ugs% si !ueremos reproducir in$nitamente
un archivo con el reproductor oculto% de'eremos incluir todos los
parmetros% incluyendo H&.TH y HE&DHT. Adems% si el usuario tiene alg#n
plug/in de sonido e"traAo% en lugar del !ue viene con *etscape% es posi'le
!ue de(e de 7uncionar correctamente.
.ado !ue am'as eti!uetas son incompati'les entre s% 'asta con incluir las
dos... o% me(or dicho% 'asta'a. Ahora el E"plorer es capa de interpretar
;EMBE.<% pero no e"actamente de la misma manera% lo !ue provoca !ue
apareca una ventana aparte con el reproductor. En de$nitiva% la me(or
manera de mostrar una m#sica de 7ondo es usando un pe!ueAo script !ue
averigue en !uG navegador est instalado y discrimine.
9omo no poda ser menos% en este e(emplo podGis ver cmo suena algo de
7ondo y el cdigo necesario.
21. 4uAa de estilo
A lo largo de mi deam'ular por &nternet% he ido desarrollando pe!ueAas
manas y visto o creido ver de7ectos en las pginas 0e'. Sin em'argo%
despuGs de leer un par de cursos de HTML y alguna !ue otra gua de estilo%
me he dado cuenta de !ue la mayora de la gente parece pensar como yo.
As pues% este captulo consiste en una serie de conse(os !ue te pueden
servir para hacer tu pgina ms atractiva y de mayor calidad. Es
recomenda'le leerla aun!ue luego no la sigas al pie de la letraC te pueden
dar una idea de lo !ue de'e ser una 0e'.
1+.+. 9ontenido
9ual!uier pgina ser visitada si su contenido es interesante. 9asi da lo
mismo su estructura y diseAo si la in7ormacin es lo su$cientemente
interesante. As !ue !ui sea conveniente detenernos un poco en !uG es lo
!ue de'e tener nuestra pgina 0e'.
En &nternet uno visita lo !ue !uiere% y la mayora de las veces lo !ue a la
gente le interesa y lo !ue a nosotros nos interesa !ue vean no es lo mismo.
As pues% el me(or modo de conseguir !ue vean lo !ue !ueremos es
o7recerles lo !ue !uieren. =n e(emplo lo tienes en mi pgina personal. En ella
pongo cosas !ue me interesa poner a m pero !ue de por s sG !ue no
tendran mucha di7usinC mis relatos% mis canciones% etc... -ero tam'iGn
incluyo estos cursos de diseAo 0e'% !ue sG !ue le interesan a mucha gente.
.e todas maneras no hay !ue engaAarseC los contenidos !ue te interesa !ue
la gente conoca y !ue no sean bpopularesb no sern visitados ms !ue por
una pe!ueAa parte de los interesados por los contenidos bpopularesb. -ero
siempre lo sern ms !ue si no lo hu'iGramos hecho.
El averiguar !uG poner es 7cil. -rcticamente todo el mundo tiene alg#n
&obb'% alguna pasin% o domina alg#n tema 'astante por encima de la
media. So're ese tema de'er estar en7ocada su pgina. -or!ue% para !uG
engaAarnosC a nadie le interesan esas pginas personales !ue slo contienen
tres 7otos del autor% una de su novia y otra de su perro% (unto con la historia
de su vida y un curriculum y una serie de enlaces a pginas de sus amigos.
9onviene tam'iGn% sa'iendo !ue el usuario ha acudido a tu pgina por el
interGs hacia un tema espec$co% 7acilitarle enlaces a pginas similares. Te lo
agradecer.
1+.1. *avegacin
Es muy importante !ue sea sencilla e intuitiva la navegacin por las pginas
!ue componen tu 0e'. .ependiendo del tamaAo de la pgina no se de'era
tardar ms de tres to!ues de ratn en ir de una pgina a otra. Sin em'argo%
esto no se de'e conseguir por medio de una saturacin de enlaces por!ue el
usuario podra perderse.
Hay muchas maneras de conseguirlo. La primera es utiliar un marco como
ndice% !ue siempre nos permitira acudir a las seciones principales en
nuestra 0e'. Tam'iGn resulta #til incluir enlaces a la pgina principal y a la
pgina principal de la seccin !ue el usuario est consultando.
En de$nitiva% no hay receta #nica% pues el G"ito de tu sistema de navegacin
depende en 'uena medida de los contenidos y estructura de tu 0e'. ,esulta
#til ver a alguien a(eno a su desarrollo navegar por ella sin darle ninguna
clase de pistasC en general se pueden ver con 7acilidad los mayores
pro'lemas !ue pueda tener.
Sin em'argo% hay algo !ue siempre irrita al usuarioC enlaces a pginas vacas
o con un gr$co !ue seAale !ue esa pgina est en construccin. Si te lleva
tiempo desarrollar una seccin pero !uieres !ue los usuarios sepan !ue
estar ah colocala con las dems en la lista de enlaces% pero !ue ella no
tenga. Kue se vea el nom're aun!ue no lleve a ninguna parte.
1+.3. Estructura de las pginas
Es 7undamental a la hora de ponerte a crear pginas el pensar en una
estructura com#n y consistente% por!ue 7acilita la navegacin y le con$ere
personalidad propia. Esa estructura puede estar dada por una manera
com#n de titular las secciones% un 7ondo% un logo% una manera com#n de
colocar gr$cos y te"to% o una com'inacin de todo esto.
Hay !ue cuidar la longitud de las pginasC !ue no sean ni demasiado cortas
ni demasiado largas Ecomo estaF. La pgina de'e contener in7ormacin
su$ciente para resultar interesante y no tanta como para desanimar al
posi'le lector.
,ecuerda !ue el ttulo !ue le pones a tu pgina es por lo !ue se la conocer
por el mundo. Es lo !ue guarda el navegador en su ndice de marcadores%
7avoritos o bookmarks. -or ello% es conveniente !ue sea signi$cativo y pueda
ser entendido 7uera de conte"to.
9onviene !ue el primero prra7o o las primeras 7rases de todas las pginas
contengan un resumen o idea del contenido del resto de la misma. Eso
ayuda al usuario a localiar ms 7cilmente la in7ormacin.
A su ve% resulta 'astante #til indicar la 7echa de la #ltima modi$cacin de la
pgina% aun!ue es a#n me(or si esa 7echa hace re7erencia a la #ltima
modi$cacin del contenido% !ue al $n y al ca'o es lo !ue le interesa el
usuario.
-or #ltimo% uno de los aspectos ms importantes de &nternet como medio es
la 7acilidad de comunicacin entre creadores y usuariosC 7acilitala incluyendo
tu direccin de correo. Si crees !ue puede ser interesante% ayuda y anima al
usuario con 7ormularios o li'ros de visita.
1+.). Accesi'ilidad
Hay !ue tener en cuenta !ue% en general% no sa'es con !uG navegador
visitarn tus pginas. *i cmo estar con$gurado. *i la resolucin del
monitor. *i la potencia de su 9-=. *i si!uiera si el navegador es capa de ver
gr$cos. J como se supone !ue la red es algo de lo !ue de'e poder dis7rutar
todo el mundo conviene hacerla accesi'le.
-ara ello hay !ue tener en cuenta algunas cosas. -ara empear% !ue las
pginas siempre se ven distintas dependiendo del navegador !ue usemos.
9onviene no usar elementos !ue slo 7uncionen con un navegador% como
puede ser el te"to parpadeante o las mar!uesinas. J siempre ser 'ueno
pro'ar con ms de un navegador las pginasC no siempre representan igual
las mismas eti!uetas.
Hay gente !ue via(a por la red con navegadores en modo te"to o !ue% de'ido
a la lentitud de su cone"in% con$guran su navegador para !ue no cargue los
gr$cos. -or ello% conviene aAadir siempre el parmetro ALT a todas nuestras
imgenes. Tam'iGn% y por la misma causa% conviene dar una alternativa en
te"to de nuestros mapas.
Es aconse(a'le pro'ar nuestras pginas a la resolucin mnima de 8)5")?5 y
compro'ar !ue se puede ver y navegar con relativa comodidad. Es
desgraciadamente 7recuente ver marcos ndice diseAados para verse a
?55"855 y !ue impiden cam'iarlos de tamaAo y se han eliminado las 'arras
de desplaamiento.
Es convieniente no a'usar de los applets Java ni hacer de ellos un elemento
imprescindi'le en nuestra 0e'. A gente con pocos recursos en potencia de
9-= o usuarios de Hindo0s 3.+ no les resulta muy agrada'le estas
aplicaciones.
En de$nitiva% no hacerles la vida imposi'le a los minusvlidos de la red.
Eliminar 'arreras ar!uitectnicas.
1+.:. .iseAo
=na pgina atractiva% con gr$cos 'onitos y 'ien escogidos y colocados es
algo siempre recomenda'le. -ero no si% de'ido a ello% la pgina tarda dos
das y medio en terminar de cargarse. Hay !ue tener en cuenta !ue estamos
tra'a(ando en un medio llamado &nternet !ue% aun!ue denominado autopista
de la in7ormacin% en realidad suele parecerse ms 'ien a una carretera
comarcal. As pues% a la hora de diseAar nuestras pginas% de'eremos cuidar
el e!uili'rio entre 'ellea gr$ca y tiempo de carga.
,ecuerda !ue el gr$co de 7ondo no de'e di$cultar la lectura del te"to. Si
utiliamos uno oscuro !ue el color del te"to sea claro y viceversa.
Los gr$cos animados% en general% resultan muy entretenidos para el autor
pero poco #tiles para el usuario. *o de'eran usarse ms !ue para cosas
so're las !ue realmente !uieres llamar la atencin Ecomo el uso del te"to
parpadeanteF. Si no es as% procura !ue su tamaAo no sea e"cesivo.
Mientras puedas% evita los gr$cos meramente ornamentales. Kue tengan
algo de utilidad% sea como ttulo o enlace o lo !ue sea. Luego procura !ue%
adems% sean 'onitos.
-rocura evitar el e"ceso de lneas horiontalesC dan la sensacin de una
pgina incone"a y troceada.
Evita la proli7eracin de marcos. Si pones muchos es posi'le !ue el usuario
se pierda y no sepa en cul est cada cosa. ,ecuerda !ue slo puede ha'er
uno con in7ormacin y todos los dems de'en ser au"iliares de este. El
marco principal de'e destacar so're los otros por su mayor tamaAo.
1+.8. Mantenimiento y prue'as
,esulta conveniente !ue el cdigo sea claro y 7cilmente comprensi'leC as
evitas los pro'lemas de no entender cmo hiciste una pgina en un
momento dado% o de no encontrar esa parte !ue tienes !ue modi$car entre
tanto te"to.
,esulta conveniente !ue otras personas prue'en tus pginas. J !ue cuando
las prue'en ya estn en la red% aun!ue no sean accesi'les ms !ue para los
pro'adores. Hay !ue cuidar !ue estos no conocan previamente las pginas
ni hayan tenido !ue ver con su desarrollo.
Si !ueremos !ue el control estG activado por de7ecto le aAadiremos el
parmetro 9HE9ME.. El 7ormulario asignar a la varia'le *AME el valor on u
o0.
-or #ltimo% e"iste la posi'ilidad de !ue necesitemos !ue% en el 7ormulario%
tengamos alguna varia'le con un valor previamente asignado. -or e(emplo%
en todos los cursos !ue tengo el 7ormulario es el mismo. J de alguna manera
tendrG !ue distinguirlos cuando me lleguen% digo yo. As !ue incluyo algo
como estoC
;&*-=T TJ-ELH&..E* *AMELb9ursob 4AL=ELbHTML ).5b<
.e este modo ya sG de !ue curso me estn ha'lando.
12. Controles a&an,ados para
.ormularios
El estndar HTML ).5 ha trado varias me(oras a los 7ormularios% !ue acercan
los mismos a las caractersticas !ue tienen en lengua(es como Java o 4isual
Basic. .esa7ortunadamente% el *etscape )% lanado al mercado antes de la
apro'acin del HTML ).5% no implementa ninguna de estas me(oras% por lo
!ue los e(emplos de este captulo slo sern contemplados correctamente
por los usuarios de E"plorer ) y : y los arriesgados usuarios de las versiones
'eta del 7uturo *etscape :.
+1.+. Botones
=na de las cosas !ue ms han me(orado son los 'otones. Ahora disponen de
una eti!ueta propia% de modo !ue se pueda encerrar con ella todo tipo de
elementos HTML% como gr$cos o% incluso% ta'las enteras.
9omo no poda ser de otra manera% la eti!ueta en cuestin se llama B=TT/*C
;B=TT/* TJ-ELb'uttonb<
;ta'le 'orderLb+b<
;tr<
;th<Soy una;Ith<
;th<ta'la;Ith<
;Itr<
;tr<
;td<!ue est;Itd<
;td<en un 'otn;Itd<
;Itr<
;Ita'le<
;IB=TT/*<