Todo LenguajeHTML

Instituto Tecnolgico de Orizaba
Herramientas para desarrollo Web

Lenguaje HTML
Qu es la World Wide Web?
La World Wide Web (Web), en castellano "Tejido Mundial", es una red de
recursos de informacin. La Web se basa en tres mecanismos para hacer que
estos recursos estn listos y a disposicin de la mayor audiencia posible:
n esquema uniforme de nombres para locali!ar recursos en la Web
"p.ej., #$s%.
&rotocolos, para acceder a recursos con nombre en la Web "p.ej., 'TT&%.
'iperte(to, para na)e*ar f+cilmente entre recursos "p.ej., 'TML%.
Las relaciones entre los tres mecanismos son e)identes a todo lo lar*o de esta
especificacin.
Introduccin a los URIs
Todos los recursos disponibles en la Web ,, documentos 'TML, im+*enes,
)ideoclips, pro*ramas, etc. ,, tienen una direccin que puede ser codificada
mediante unUniversal Resource Identifier, o "#$", es decir, un $dentificador
ni)ersal de #ecursos. Los #$s se componen normalmente de tres partes:
-l esquema de nombres del mecanismo usado para acceder al recurso.
-l nombre de la m+quina que aloja el recurso.
-l nombre en s. del recurso, dado en forma de "path" o "ruta de acceso".
/onsideremos el #$ que desi*na la p+*ina de $nformes Tcnicos del W0/:
http:11222.20.or*1T#
-ste #$ puede leerse de la si*uiente manera: 'ay un documento disponible a
tra)s del protocolo 'TT& ")er 3#4/56768%, que se encuentra en la m+quina
222.20.or*, accesible a tra)s de la ruta "1T#". -ntre otros esquemas que
pueden encontrarse en documentos 'TML se incluyen "mailto" para correo
electrnico y "ftp" para 4T&.
9qu. tenemos otro ejemplo de #$. :ste se refiere al bu!n de correo
electrnico de un usuario:
...aqu va texto...
&ara cualquier comentario, en).e un mensaje a
;9 href<"mailto:jose=al*unsitio.com">?ose /h)ere;19>.
1
Nota. La mayora de los lectores estar familiarizado con el trmino !URL! y no
con el trmino !URI!. Los URLs forman un subcon"unto del esquema de
nombres URI# que es ms $eneral.
Qu es HTML?
@efinindolo de forma sencilla, !%&'L es lo que se utiliza (ara crear todas las
($inas )eb de Internet!. M+s concretamente, 'TML es el len$ua"e con el que
se !escriben! la mayor.a de p+*inas 2eb.
Los diseAadores utili!an el len*uaje 'TML para crear sus p+*inas 2eb, los
pro*ramas que utili!an los diseAadores *eneran p+*inas escritas en 'TML y los
na)e*adores que utili!amos los usuarios muestran las p+*inas 2eb despus de
leer su contenido 'TML.
9unque 'TML es un len*uaje que utili!an los ordenadores y los pro*ramas de
diseAo, es muy f+cil de aprender y escribir por parte de las personas. -n
realidad, 'TML son las si*las de %y(er&ext 'ar*u( Lan$ua$e.
-l len*uaje 'TML es un est+ndar reconocido en todo el mundo y cuyas normas
define un or*anismo sin +nimo de lucro llamado World Wide Web /onsortium,
m+s conocido como W3C. /omo se trata de un est+ndar reconocido por todas
las empresas relacionadas con el mundo de $nternet, una misma p+*ina 'TML
se )isuali!a de forma muy similar en cualquier na)e*ador de cualquier sistema
operati)o.
-l propio W3C define el len*uaje 'TML como !un len$ua"e reconocido
universalmente y que (ermite (ublicar informaci+n de forma $lobal!. @esde su
creacin, el len*uaje 'TML ha pasado de ser un len*uaje utili!ado
e(clusi)amente para crear documentos electrnicos a ser un len*uaje que se
utili!a en muchas aplicaciones electrnicas como buscadores, tiendas online y
banca electrnica.
Historia de HTML
-l ori*en de 'TML se remonta a 7BCD, cuando el f.sico Ti !erners"Lee,
trabajador del /-#E ",r$anizaci+n -uro(ea (ara la Investi$aci+n .uclear%
propuso un nue)o sistema de !/i(ertexto! para compartir documentos.
Los sistemas de !/i(ertexto! hab.an sido desarrollados aAos antes. -n el +mbito
de la inform+tica, el !/i(ertexto! permit.a que los usuarios accedieran a la
informacin relacionada con los documentos electrnicos que estaban
)isuali!ando. @e cierta manera, los primiti)os sistemas de !/i(ertexto! podr.an
asimilarse a los enlaces de las p+*inas 2eb actuales.
2
Tras finali!ar el desarrollo de su sistema de !/i(ertexto!, Tim Ferners,Lee lo
present a una con)ocatoria or*ani!ada para desarrollar un sistema de
!/i(ertexto! para $nternet. @espus de unir sus fuer!as con el in*eniero de
sistemas Robert Cailliau, presentaron la propuesta *anadora llamada
WorldWideWeb (W0).
-l primer documento formal con la descripcin de 'TML se public en 7BB7 bajo
el nombre !%&'L &a$s! "-tiquetas %&'L% y toda).a hoy puede ser consultado
online a modo de reliquia informtica.
La primera propuesta oficial para con)ertir 'TML en un est+ndar se reali! en
7BB0 por parte del or*anismo $-T4 "Internet -n$ineerin$ &as* 1orce%. 9unque se
consi*uieron a)ances si*nificati)os "en esta poca se definieron las etiquetas
para im+*enes, tablas y formularios% nin*una de las dos propuestas de est+ndar,
llamadas 'TML y 'TMLG consi*uieron con)ertirse en est+ndar oficial.
-n 7BBH, el or*anismo $-T4 or*ani!a un *rupo de trabajo de 'TML y consi*ue
publicar, el 55 de septiembre de ese mismo aAo, el est+ndar 'TML 5.D. 9 pesar
de su nombre, 'TML 5.D es el primer est+ndar oficial de 'TML.
9 partir de 7BB6, los est+ndares de 'TML los publica otro or*anismo de
estandari!acin llamado W0/ "World Wide Web 2onsortium%. La )ersin 'TML
0.5 se public el 7I de -nero de 7BBJ y es la primera recomendacin de 'TML
publicada por el W0/. -sta re)isin incorpora los Kltimos a)ances de las
p+*inas 2eb desarrolladas hasta 7BB6, como a((lets de ?a)a y te(to que fluye
alrededor de las im+*enes.
'TML I.D se public el 5I de 9bril de 7BBC "siendo una )ersin corre*ida de la
publicacin ori*inal del 7C de @iciembre de 7BBJ% y supone un *ran salto desde
las )ersiones anteriores. -ntre sus no)edades m+s destacadas se encuentran
las hojas de estilos /LL, la posibilidad de incluir pequeAos pro*ramas o scri(ts
en las p+*inas 2eb, mejora de la accesibilidad de las p+*inas diseAadas, tablas
complejas y mejoras en los formularios.
La Kltima especificacin oficial de 'TML se public el 5I de diciembre de 7BBB y
se denomina 'TML I.D7. Le trata de una re)isin y actuali!acin de la )ersin
'TML I.D, por lo que no incluye no)edades si*nificati)as.
@esde la publicacin de 'TML I.D7, la acti)idad de estandari!acin de 'TML se
detu)o y el W0/ se centr en el desarrollo del est+ndar M'TML. &or este
moti)o, en el aAo 5DDI, las empresas 9pple, Mo!illa y Npera mostraron su
preocupacin por la falta de inters del W0/ en 'TML y decidieron or*ani!arse
en una nue)a asociacin llamada W'9TWO "Web %y(ertext 3((lication
&ec/nolo$y Wor*in$ 4rou(%.
3
La acti)idad actual del W'9TWO se centra en el futuro est+ndar 'TML H, cuyo
primer borrador oficial se public el 55 de enero de 5DDC. @ebido a la fuer!a de
las empresas que forman el *rupo W'9TWO y a la publicacin de los
borradores de 'TML H.D, en mar!o de 5DDJ el W0/ decidi retomar la acti)idad
estandari!adora de 'TML.
@e forma paralela a su acti)idad con 'TML, W0/ ha continuado con la
estandari!acin de M'TML, una )ersin avanzada de 'TML y basada en MML.
La primera )ersin de M'TML se denomina M'TML 7.D y se public el 56 de
-nero de 5DDD "y posteriormente se re)is el 7 de 9*osto de 5DD5%.
M'TML 7.D es una adaptacin de 'TML I.D7 al len*uaje MML, por lo que
mantiene casi todas sus etiquetas y caracter.sticas, pero aAade al*unas
restricciones y elementos propios de MML. La )ersin M'TML 7.7 ya ha sido
publicada en forma de borrador y pretende modulari!ar M'TML. Tambin ha sido
publicado el borrador de M'TML 5.D, que supondr+ un cambio muy importante
respecto de las anteriores )ersiones de M'TML.
#s$eci%icacin o%icial
-l or*anismo W0/ "World Wide Web 2onsortium% elabora las normas que deben
se*uir los diseAadores de p+*inas 2eb para crear las p+*inas 'TML. Las
normas oficiales est+n escritas en in*ls y se pueden consultar de forma *ratuita
en las si*uientes direcciones:
-specificacin oficial de 'TML I.D7
-specificacin oficial de M'TML 7.D
-l est+ndar M'TML 7.D incluye el BHP del est+ndar 'TML I.D7, ya que slo
aAade pequeAas mejoras y modificaciones menores. 9fortunadamente, no es
necesario leer las especificaciones y recomendaciones oficiales de 'TML para
aprender a diseAar p+*inas con 'TML o M'TML. Las normas oficiales est+n
escritas con un len*uaje bastante formal y al*unas secciones son dif.ciles de
comprender. &or ello, en los pr(imos cap.tulos se e(plica de forma sencilla y
con decenas de ejemplos la especificacin oficial de M'TML.
4
HTML & 'HTML
-l len*uaje M'TML es muy similar al len*uaje 'TML. @e hecho, M'TML no es
m+s que una adaptacin de 'TML al len*uaje MML. Tcnicamente, 'TML es
descendiente directo del len*uaje LOML "(tandard )enerali*ed Mar+u$
Language,, mientras que M'TML lo es del MML "que a su )e!, tambin es
descendiente de LOML%.
-squema de la e)olucin de 'TML y M'TML
Las p+*inas y documentos creados con M'TML son muy similares a las p+*inas
y documentos 'TML. Las discusiones sobre si 'TML es mejor que M'TML o
)ice)ersa son recurrentes en el +mbito de la creacin de contenidos 2eb,
aunque no e(iste una conclusin ampliamente aceptada.
9ctualmente, entre 'TML I.D7 y M'TML 7.D, la mayor.a de diseAadores
esco*en M'TML. -n un futuro cercano, si los diseAadores deben ele*ir entre
'TML H y M'TML 7.7 o M'TML 5.D, qui!+s la eleccin sea diferente.
HTML & C((
Nri*inalmente, las p+*inas 'TML slo inclu.an informacin sobre sus contenidos
de te(to e ima*enes. /on el desarrollo del est+ndar 'TML, las p+*inas
empe!aron a incluir tambin informacin sobre el aspecto de sus contenidos:
tipos de letra, colores y m+r*enes.
5
La posterior aparicin de tecnolo*.as como ?a)aLcript, pro)ocaron que las
p+*inas 'TML tambin incluyeran el cdi*o de las aplicaciones "llamadas
scri(ts% que se utili!an para crear p+*inas 2eb din+micas.
$ncluir en una misma p+*ina 'TML los contenidos, el diseAo y la pro*ramacin
complica en e(ceso su mantenimiento. Eormalmente, los contenidos y el diseAo
de la p+*ina 2eb son responsabilidad de diferentes personas, por lo que es
con)eniente separarlos.
/LL es el mecanismo que permite separar los contenidos definidos mediante
M'TML y el aspecto que deben presentar esos contenidos:
-squema de la separacin de los contenidos y su presentacin
na )entaja aAadida de la separacin de los contenidos y su presentacin es
que los documentos M'TML creados son m+s fle(ibles, ya que se adaptan mejor
a las diferentes plataformas: pantallas de ordenador, pantallas de dispositi)os
m)iles, impresoras y dispositi)os utili!ados por personas discapacitadas.
@e esta forma, utili!ando e(clusi)amente M'TML se crean p+*inas 2eb !feas!
pero correctas. 9plicando /LL, se pueden crear p+*inas !bonitas! a partir de las
p+*inas M'TML correctas.
6
#structura de una $-gina HTML
Las p+*inas 'TML est+n estructuradas en tres partes diferenciadas:
;QTipo de documeto>
la H#./ "cabecera% y
el !0/1 "cuerpo%.
-jemplo de p+*ina
<!Tipo de documento>
<HTML>
<HEAD>
<TITLE> Documento de prueba </TITLE>
</HEAD>

<BODY>
<H1> Esto es una "demo" de documento HTML </H1>
Esto es el ms sencillo de los documentos HTML!
</"#D$>
</HTML>
-l ti$o de docuento no es obli*atorio a efectos pr+cticos, es decir que la
p+*ina se )er+ i*ual tanto si se escribe como si no. Llo sir)e como
identificacin del tipo de contenido del fichero a los efectos de cumplir las
especificaciones de est+ndar recomendadas por el consorcio W0/, que es el
or*anismo que re*ula el len*uaje. &or ejemplo:
<!D#%T$&E HTML &'"LI% "-//()%//DTD HTML *!+ Transitional//E,"
"-ttp.///)!or0/T1/1E%--tml*+/loose!dtd">
$ndica que cumple el est+ndar 'TML I.D
<!D#%T$&E HTML &'"LI% "-//()%//DTD HTML *!+//E,"
"-ttp.///)!or0/T1/1E%--tml*+/strict!dtd">
Li*nifica que cumple el est+ndar 'TML I.D y, adem+s, no contiene elementos
desaconsejables.
R esta es una definicin de marcos que cumple el est+ndar 'TML I.D:
<!D#%T$&E HTML &'"LI% "-//()%//DTD HTML *!+ 2rameset//E,"
"-ttp.///)!or0/T1/1E%--tml*+/3rameset!dtd">
7
-n el 'TML I.D se consideran desaconsejables aquellos elementos que, aKn
siendo soportados, han sido sustituidos por otros y, por ello, es posible que sean
eliminados en el futuro. -n cualquier caso, el que un elemento escrito en las
p+*inas se )ea o no, depender+ siempre del na)e*ador utili!ado y1o de su
)ersin, no de lo que di*a el est+ndar.
&ara escribir comentarios en la p+*ina "que slo se )en en el te(to fuente, pero
no en el )isuali!ador% se utili!ar+ el elemento :
23"" ""4
cuidado: el que no se )ea de forma normal en el na)e*ador, no si*nifica que no
pueda )erse el cdi*o fuente. Eunca se deben escribir comentarios con cla)es
de acceso o datos confidenciales.

Cabecera 5H#./, de un docuento HTML6
La H#./ es la primera de las dos partes en que se estructura un documento
'TML.
-n la '-9@ reside informacin acerca del documento, y *eneralmente no se )e
cuando se na)e*a por l.
-n la '-9@ se pone el elemento ;TITL#> :
que es una bre)e descripcin que identifica la p+*ina.
-s lo que el na)e*ador se *uarda en el "!oo+ar+s" "libro de marcas o
libro de direcciones%, con lo que crea la lista que aparece en la orden ")o"
de la barra de rdenes, lo que aparece en la esquina superior i!quierda
cuando se imprime el documento, y lo que aparece en el marco de la
)entana del na)e*ador.
Tambin lo *uarda en su cach, y ser)ir+ para mostrar la p+*ina, cuando
sea llamada otra )e!, sin necesidad de conectarse de nue)o al ser)idor
de ori*en.
Eo hay que confundir el elemento ;T$TL-> con el nombre del fichero.
<HEAD>
<TITLE>Head de un documento </TITLE>
</HEAD>
@entro de la '-9@ puede utili!arse otro elemento: M#T.. &or ejemplo, si se
escribe:
<HEAD>
<META HTT&-E4'I56"1e3res-" %#,TE,T6"1+">
</HEAD>
-sto hace que el )isuali!ador )uel)a a car*ar la p+*ina acti)a al cabo de 7D
se*undos. Tambin puede hacerse a un ser)idor. 9s.:
<HEAD>
<META HTT&-E4'I56"1e3res-" %#,TE,T6"1+7
'1L6-ttp.//miser8idor/mipa0ina!-tm">
</HEAD>
tili!ar esto con precaucin. Li se sabe que el contenido de la p+*ina no )a a
cambiar, es inKtil hacer esto, y si se hace contra un ser)idor, se puede
sobrecar*ar. -ste elemento, slo tendr+ utilidad en casos muy especiales.
!
Ntra opcin es for!ar la e(piracin inmediata en la cach del na)e*ador de la
p+*ina recibida, lo que pro)oca que la p+*ina sea solicitada de nue)o al ser)idor
cada )e!, en lu*ar de car*ar la copia que ya e(iste en la m+quina del cliente. Le
escribe as.:
<HEAD>
<META HTT&-E4'I56"E9pires" %#,TE,T6"Tue: ;+ Au0 1<<= 1*.;>.;? @MT">
</HEAD>
Li se pone una fecha ya pasada, como la que hay en el ejemplo, el na)e*ador
elimina inmediatamente de la cach la p+*ina recibida, y si no es pasada, lo
har+ en el momento indicado por la misma. Tambin se le puede dar )alor cero a
la fecha de e(piracin:
<HEAD>
<META HTT&-E4'I56"E9pires" %#,TE,T6"+">
</HEAD>
Ntra opcin es impedir directamente que el na)e*ador *uarde en cach la
p+*ina. -sto es especialmente Ktil cuando se trabaja con formularios que
consultan datos din+micos:
<HEAD>
<META HTT&-E4'I56"E9pires" %#,TE,T6"no-cac-e">
</HEAD>
Li se tiene inters en que las p+*inas apare!can en los *randes buscadores de
$nternet, y puedan ser encontradas con facilidad, se pueden poner las palabras
cla)e que contiene la p+*ina separadas por comas. &or ejemplo:

<HEAD>
<META ,AME6"AeB/ords" %#,TE,T6"HTML: internet ">
</HEAD>
-ste otro sir)e para que los buscadores puedan ofrecer un bre)e resumen de los
contenidos de la p+*ina:
<HEAD>
<META ,AME6"description" %#,TE,T6"Manual para escribir HTML!">
</HEAD>
Le pueden poner todos los elementos ;M#T.> que se crean necesarios, pero
sin repetirlos.
1"
Todos los na)e*adores, por defecto, siempre que reciben una p+*ina de un
ser)idor se hacen una copia de la misma en el disco de la m+quina. /on esto se
pretende que si se )uel)e a solicitar la misma p+*ina, en lu*ar de pedirla de
nue)o al ser)idor, se mostrar+ la que tiene *uardada en el disco. 9 esta +rea del
disco donde el na)e*ador )a poniendo las p+*inas )isitadas, se le denomina
cac7. -l tamaAo de la cach se puede modificar desde las opciones de
confi*uracin del na)e*ador, e incluso se puede dar tamaAo cero, con lo que
siempre que se )ea una p+*ina, sta habr+ sido solicitada al ser)idor
independientemente de lo que di*an las instrucciones M-T9.
11
Cuer$o 5!0/1, de un docuento
-l cuerpo "!0/1% es la se*unda y Kltima de las dos partes en que se estructura
un documento 'TML.
&or supuesto es obli*atoria, ya que es aqu. donde reside el )erdadero contenido
de la p+*ina, y por tanto, al contrario de la '-9@ s. se )e cuando na)e*amos
por ella.
Le escibir+ asi:
2!0/14
te(to te(to te(to te(to te(to te(to te(to te(to te(to te(to te(to te(to
28!0/14
Los na)e*adores, por defecto, presentan el te(to de una p+*ina ajustando los
contenidos a la esquina superior i!quierda de la pantalla. -l elemento FN@R
tiene par+metros que permiten modificar los m+r*enes por defecto. Lo malo es
que cada na)e*ador los interpreta de una manera. &or ejemplo:
9etsca$e utili!a solamente dos instrucciones que afectan simult+neamente a los
m+r*enes superior e inferior e i!quierdo y derecho respecti)amente:
argin:idt7<"pi(els", para los m+r*enes i!quierdo y derecho.
argin7eig7t<"pi(els", para los m+r*enes superior e inferior.
-n cambio, el Internet #;$lorer, utili!a uno para cada cual:
le%targin<"pi(els", para el mar*en i!quierdo
to$argin<"pi(els", para el mar*en superior
rig7targin<"pi(els", para el mar*en derecho
bottoargin<"pi(els", para el mar*en inferior
@onde $i;els es el nKmero de pi(els que se quiere mo)er cada mar*en hacia el
interior de la p+*ina. -stos par+metros tambin son accesibles desde
instrucciones de estilo.
Ntro problema que suele presentarse con los m+r*enes es que a la hora de
imprimir una p+*ina, cada impresora, junto con el na)e*ador, se las in*eniar+n
para hacer justo lo contrario de lo que se desea... Tal )e! al*un dia todo esto
funcione bien.
12
Ntra cosa que puede controlarse desde FN@R es el color que tomar+n los lin+s
que pon*amos en la p+*ina.
&or ejemplo, para hacer que los linSs sean amarillos antes de ser )isitados, a!ul,
)erde cuando son acti)ados, y )erdes despus de haber sido utili!ados, se
escribe:
;FN@R L$ET<"U4444DD" VL$ET<"U559955" 9L$ET<"UDDJJ44">
Taa<os & ti$os de letra en HTML6
&ara definir distintos tamaAos de letra, en 'TML se utili!a el elemento 2H;4
;1'(> donde ( es un nKmero que puede )ariar entre 7 y 6, siendo 7 el tamaAo
mayor.
Le escribir+n as.:
<H1> Te9to de prueba CH1D</H1>!
<H;> Te9to de prueba CH;D</H;>
<H)> Te9to de prueba CH)D</H)>
<H*> Te9to de prueba CH*D</H*>
<H>> Te9to de prueba CH>D</H>>
<H=> Te9to de prueba CH=D</H=>
y este ser.a el resultado:
Te;to de $rueba 5H=,
Texto de prueba (H2)
Eo ol)idar poner el cierre ;1'(> a cada elemento utili!ado.-ste tipo de elemento
se suele utili!ar para escribir encabe!amientos, ya que despus del cierre
autom+ticamente el )isuali!ador inserta un salto de p+rrafo.
13
&or ejemplo: si se escribe
<H1> Te9to en H1 </H1> <H)> Te9to en H) </H)>
se #er$%
Te;to en H=
Te;to en H3
R no una cosa al lado de la otra, como se pudiera esperar. -ste elemento admite
un par+metro de alineacin. 9s., si se escribe:
<H) ali0n6center> Te9to en H) </H)>
Texto en H3
Ntra forma de cambiar los tamaAos de letra es utili!ar el elemento 2>09T > con
el atributo ?.L0R, que es un nKmero entre 7 y J. -l )alor por defecto del te(to
es 0. La *ran diferencia de esta notacin respecto a la anterior es que no se
produce un salto de p+rrafo despus de cada cambio, por lo que pueden
hacerse cosas como esta:
<FONT SIZE6)>A</3ont><2#,T EIFE6*>A</3ont><2#,T EIFE6>>A</3ont>
<2#,T EIFE6=>A</3ont><2#,T EIFE6?>A</3ont><2#,T EIFE6=>A</3ont>
<2#,T EIFE6>>A</3ont><2#,T EIFE6*>A</3ont><2#,T EIFE6)>A</2#,T>
@ar+ como resultado:
&&&&&&&&&
Le puede cambiar el tamaAo por defecto "0% de toda la p+*ina con el elemento
2!.(#>09T (I@#<)alor>.
-l te(to tomar+ el tamaAo indicado por Aalor y lo mantendr+ hasta que apare!ca
otro elemento ;F9L-4NET L$W-<)alor> y lo restaure o lo cambie por otro
diferente.
Tanto si se ha establecido un )alor base como si se utili!a el )alor por defecto,
los tamaAos tambin pueden indicarse de forma relatiAa, por lo que el )alor
puede ser positi)o "G% o ne*ati)o ",% respecto al tamaAo base.
14
&or ejemplo estos dos )alores dan el mismo resultado:
<2#,T EIFE6>>A"cde</2#,T>
<2#,T EIFE6G;>A"cde</2#,T>
&'cde
&'cde
/on la )ersin 0.D de Eetscape se ha implementado un nue)o atributo del
elemento ;4NET> que permite ele*ir tipos de letra entre los )arios de que
dispone por defecto Windo2s. Le trata del atributo >.C#. -ste atributo permite
for!ar el tipo de letra que el diseAador de la p+*ina quiere que )ea el cliente, sin
importar el que por defecto ten*a establecido el )isuali!ador.
Li se escribe
<2#,T FACE6"arial">Te9to de prueba 1;)*> con tipo A1IAL</2#,T>
<2#,T 2A%E6"times ne/ roman">Te9to de prueba 1;)*> con tipo TIMEE ,E(
1#MA,</2#,T>
<2#,T 2A%E6"courier ne/">Te9to de prueba 1;)*> con tipo %#'1IE1
,E(</2#,T>
<2#,T 2A%E6"courier">Te9to de prueba 1;)*> con tipo %#'1IE1</2#,T>
<2#,T 2A%E6"roman">Te9to de prueba 1;)*> con tipo 1#MA,</2#,T>
<2#,T 2A%E6"small 3onts">Te9to de prueba 1;)*> con tipo EMALL
2#,TE</2#,T>
Le )er+:
Te(to de prueba 750IH con tipo 9#$9L
Te(to de prueba 12345 con tipo TI)*+ ,*W -O)&,
Te9to de prueba 1;)*> con tipo %#'1IE1 ,E(
Texto de prueba 12345 con tipo COURIER
Te(to de prueba 12345 con tipo -O)&,
Texto de prueba 12345 con tipo VERDANA
Texto de prueba 12345 con tipo SMALL FONTS
-ste atributo es compatible con todos los dem+s ya conocidos, como color y
tamaAo. &or ejemplo, si se escribe :
<2#,T 2A%E6"impact" EIFE6= %#L#16"red">
Te9to de prueba 1;)*> con tipo IM&A%T</2#,T>
Le )er+:
Texto de prueba 12345 con tipo IMPACT
15
Le pueden hacer todas la combinaciones que se quieran, pero hay que tener
presente que si en la m+quina cliente no est+ instalada una determinada fuente,
sta no se )er+ y en su lu*ar aparecer+ la fuente por defecto del )isuali!ador.
Eo es interesante por tanto, definir tipos raros, que probablemente, no lle*ar+n a
)erse nunca.
Li a pesar de todo, se define un tipo del que se tienen dudas de que e(ista en el
cliente, se pueden indicar otros tipos alternati)os, de forma que el na)e*ador si
no tiene el primer tipo, utili!ar+ el si*uiente, y si tampoco lo tiene el pr(imo, etc.
9s.:
<2#,T 2A%E6"raro: courier" EIFE6* %#L#16"red">
Te9to de prueba 1;)*> con tipos alternati8os</2#,T>
Le )er+:
Texto de prueba 12345 con tipos alternativos
/omo se puede )er, se ha declarado como primer tipo de letra el llamado "raro"
que, por supuesto, no e(iste, y el na)e*ador pasa a utili!ar el si*uiente,
"courier", que s. es habitual.
Te;to en color
Le puede controlar el color del te(to utili!ando el elemento ;4NET> con el
atributo C0L0RBC;;;C, donde C;;;C es el nombre en in*ls del color que se
desea. 'ay que tener presente que al*unos no se )er+n o se )er+n mal si la
m+quina no soporta, por lo menos, 5H6 colores. &or supuesto, este efecto es
anidable con el de tamaAo y todos los dem+s.
Li se escribe:
<"><2#,T COLO!"#ed">Te9to 1#H# </2#,T>
<br>
<2#,T %#L#16"blue">Te9to AF'L </2#,T>
<br>
<2#,T %#L#16"na8B">Te9to AF'L MA1I,# </2#,T>
<br>
<2#,T %#L#16"0reen">Te9to 5E1DE </2#,T>
<br>
<2#,T %#L#16"oli8e">Te9to #LI5A </2#,T>
<br>
<2#,T %#L#16"Bello/">Te9to AMA1ILL# </2#,T>
<br>
<2#,T %#L#16"lime">Te9to LIMA </2#,T>
16
<br>
<2#,T %#L#16"ma0enta">Te9to MA@E,TA </2#,T>
<br>
<2#,T %#L#16"purple">Te9to &'1&'1A </2#,T>
<br>
<2#,T %#L#16"cBan">Te9to %$A, </2#,T>
<br>
<2#,T %#L#16"bro/n">Te9to MA11#, </2#,T>
<br>
<2#,T %#L#16"blacA">Te9to ,E@1# </2#,T>
<br>
<2#,T %#L#16"0raB">Te9to @1IE </2#,T>
<br>
<2#,T %#L#16"teal">Te9to TEAL </2#,T>
<br>
<2#,T %#L#16"/-ite">Te9to "LA,%# </2#,T>
<br>
</">
Le )er+:
Te(to -O.O
Te(to &/01
Te(to &/01 )&-I,O
Te(to 2*-3*
Te(to O1I2&
Te(to &)&-I11O
Te(to 1I)&
Te(to )&4*,T&
Te(to 50-50-&
Te(to 67&,
Te(to )&--O,
Te(to ,*4-O
Te(to 4-I+
Te(to T*&1
'e aqu. una combinacin de colores y tamaAos: Li se escribe:
<2#,T EIFE6= %#L#16"red">E</2#,T><2#,T EIFE6*>sto es una </2#,T>
<2#,T EIFE6= %#L#16"red">&</2#,T><2#,T EIFE6*>rueba </2#,T>
#esulta:
*sto es una 5rueba
Los colores tambin se pueden definir en he(adecimal "por ejemplo el rojo es
;4NET /NLN#<U44DDDD>%. /uando son colores b+sicos, como los del ejemplo
de arriba, es m+s cmodo escribir el nombre aunque sea en in*ls, pero cuando
17
se trata de definir un color que "no tiene nombre" no hay m+s remedio que usar
la codificacin he(adecimal.
Las distintas de%iniciones de los bloDues6 (e$aradores6
Li se anali!a una p+*ina cualquiera se )era que, en realidad, est+ compuesta de
distintos bloDues.
-s al*o as. como un mosaico en el que cada parte de la composicin final tiene
sus propios contenidos, que pueden ser te(to, *r+ficos o las dos cosas.
@ependiendo de la composicin que se quiera hacer, habr+ que ele*ir los
elementos m+s con)enientes para que nuestros contenidos apare!can
finalmente con la alineacin debida, el tamaAo apropiado, etc.
Le comen!ara con el elemento 2H;4 ;1'(> donde ( es un nKmero que puede
)ariar entre 7 y 6, siendo 7 el tamaAo mayor.
Le escribir+n as.:
<H1> Te9to de prueba CH1D</H1>!
<H;> Te9to de prueba CH;D</H;>
<H)> Te9to de prueba CH)D</H)>
<H*> Te9to de prueba CH*D</H*>
<H>> Te9to de prueba CH>D</H>>
<H=> Te9to de prueba CH=D</H=>
Te;to de $rueba 5H=,
Eo hay que ol)idar poner el cierre ;1'(> a cada elemento utili!ado.
-ste tipo de elemento suele emplearse para escribir encabe!amientos, ya que
despus del cierre, autom+ticamente, el )isuali!ador inserta un salto de p+rrafo.
1
&or ejemplo, si se escribe:

<H1> Te9to en H1 </H1> <H)> Te9to en H) </H)>
se )er+:
Te;to en H=
Texto en H3
R no una cosa al lado de la otra, como cabr.a esperar. -ste elemento admite un
par+metro de alineacin. 9s., si escribes:
<H) ali0n6center> Te9to en H) </H)>
Texto en H3
&ara definir los p+rrafos se utili!a el elemento 2E4 28E4 "por Eara*raph%.
9unque a menudo no se utili!a el cierre ;1&>, ya que el te(to continuar+
normalmente hasta que encuentre otro p+rrafo ;&>, es con)eniente
acostumbrarse a ponerlo siempre. -n la nue)a definicin del M'TML el cierre es
obli*atorio.
Le escribir+ as.:
<$> Te9to 1 Te9to 1 Te9to 1 Te9to 1 Te9to 1 Te9to 1 Te9to 1 Te9to 1
Te9to 1 Te9to 1 <%$>
<$> Te9to ; Te9to ; Te9to ; Te9to ; Te9to ; Te9to ; Te9to ; Te9to ; <%$>
R este ser.a el resultado:
Te(to 1 Te(to 1 Te(to 1 Te(to 1 Te(to 1 Te(to 1 Te(to 1 Te(to 1 Te(to 1 Te(to 1
Te(to 2 Te(to 2 Te(to 2 Te(to 2 Te(to 2 Te(to 2 Te(to 2 Te(to 2
/omo puede )erse, hay una l.nea en blanco entre los dos bloques. Li no se
quiere dejar esa l.nea )ac.a entre los dos p+rrafos puede utili!arse el elemento
2!R4 "por !ReaS%. -s decir, que el elemento ;F#> es un separador, no un
indicador de bloque.
1!
Le escribir+ as.:
<&>Te9to 1 Te9to 1 Te9to 1 Te9to 1 Te9to 1 Te9to 1 Te9to 1 Te9to 1
Te9to 1 Te9to 1 <B>
Te9to ; Te9to ; Te9to ; Te9to ; Te9to ; Te9to ; Te9to ; Te9to ; </&>
8 este ser9a el resultado%
Te(to 1 Te(to 1 Te(to 1 Te(to 1 Te(to 1 Te(to 1 Te(to 1 Te(to 1 Te(to 1 Te(to 1
Te(to 2 Te(to 2 Te(to 2 Te(to 2 Te(to 2 Te(to 2 Te(to 2 Te(to 2
-l elemento ;&> admite cuatro atributos de alineacin: .LI)9BL#>T "por
defecto%, .LI)9BRI)HT , .LI)9BC#9T#R y .LI)9BFU(TI>1
Le escribir+n as.:
<& ALI&N!LEFT>
Te9to 1 Te9to 1 Te9to 1 Te9to 1 Te9to 1 Te9to 1 Te9to 1 Te9to 1
Te9to 1 Te9to 1 Te9to 1 Te9to 1 Te9to 1 Te9to 1 Te9to 1 Te9to 1 </&>
<& ALI&N!I&HT>
Te9to ; Te9to ; Te9to ; Te9to ; Te9to ; Te9to ; Te9to ; Te9to ;
Te9to ; Te9to ; Te9to ; Te9to ; Te9to ; Te9to ; Te9to ; Te9to ; </&>
<& ALI&N!CENTE>
Te9to ) Te9to ) Te9to ) Te9to ) Te9to ) Te9to ) Te9to ) Te9to )
Te9to ) Te9to ) Te9to ) Te9to ) Te9to ) Te9to ) Te9to ) Te9to ) </&>
<& ALI&N!'(STIFY>
Te9to * Te9to * Te9to * Te9to * Te9to * Te9to * Te9to * Te9to *
Te9to * Te9to * Te9to * Te9to * Te9to * Te9to * Te9to * Te9to * </&>
Te(to 1 Te(to 1 Te(to 1 Te(to 1 Te(to 1 Te(to 1 Te(to 1 Te(to 1 Te(to 1 Te(to 1 Te(to 1
Te(to 1 Te(to 1 Te(to 1 Te(to 1 Te(to 1
Te(to 4 te( Te(to 4 Te(to 4 te( Te(to 4 Te(to 4 te( Te(to 4 Te(to 4 Te(to 4 Te(to 4 Te(to
4 Te(to 4 Te(to 4 te( Te(to 4 Te(to 4 Te(to 4 Te(to 4 te( Te(to 4 Te(to 4 te( Te(to 4
Te(to 4 te( Te(to te( 4 Te(to 4 Te(to 4 te( Te(to 4 Te(to 4 te( Te(to 4 Te(to 4 te( Te(to
te( 4 Te(to 4 Te(to 4 te( Te(to 4 Te(to 4 te( Te(to 4 Te(to 4 te( Te(to te( 4 Te(to 4
Te(to 4 te( Te(to 4 Te(to 4 te( Te(to 4 Te(to 4 te( Te(to te( 4 Te(to 4
2"
n elemento que se comporta de forma parecida a ;F#> es 2/I?4 pero que
admite los mismos atributos que ;&>: .LI)9BL#>T .LI)9BRI)HT y
.LI)9BC#9T#R
Le escribe as.:
<DI) ALI&N!LEFT>
te9to1 te9to1 te9to1 te9to1 te9to1 te9to1 te9to1 te9to1 te9to1
</DI5>
<DI) ALI&N!I&HT>
te9to; te9to; te9to; te9to; te9to; te9to; te9to; te9to; te9to;
< /DI5>
<DI) ALI&N!CENTE>
te9to) te9to) te9to) te9to) te9to) te9to) te9to) te9to) te9to)
<%DI)>
:i;arse en <ue a<u9 s9 se utiliza el cierre </DIV>= *ste ser9a el resultado%
te(to1 te(to1 te(to1 te(to1 te(to1 te(to1 te(to1 te(to1 te(to1 te(to1 te(to1 te(to1 te(to1
te(to1 te(to1 te(to1 te(to1 te(to1
/omo se puede )er, sal)o por las alineaciones, que ya se hacen con ;&>, no
tiene nin*una utilidad pr+ctica, y en *eneral solamente se utili!a para definir
bloques especiales definidos con instrucciones de estilo "bordes, tamaAo,
situacin, alineacin, color, etc., etc.%
21
Ntro elemento que es casi i*ual que ;@$V> pero que no admite atributos de
alineado, y no produce separacin de p+rrafo ni de l.nea es 2(E.9>. -n
realidad, de forma directa no sir)e para nada, y ha sido creado tambin para
aplicar las hojas de estilo.
Le escribe as.:
<S$AN>
<%S$AN>
Ntro interesante efecto es el elemento 2!L0CGQU0T#4 que sir)e para
presentar p+rrafos adentrados "como si estu)iesen tabulados%.
Le escribir+ as.:
<BLOC*+(OTE>
te9to te9to te9to te9to te9to te9to te9to te9to te9to te9to
<BLOC*+(OTE>
</"L#%I4'#TE>
</"L#%I4'#TE>
R este ser.a el resultado:
te(to te(to te(to te(to te(to te(to te(to te(to te(to te(to te(to te(to te(to te(to te(to
te(to te(to te(to te(to te(to te(to te(to te(to te(to te(to te(to te(to te(to te(to
4ijarse que en este ejemplo hay un anidamiento, y por tanto, debe haber dos
cierres 28!L0CGQU0T#4 al final.

Ntro separador de bloques de te(to es el elemento )ac.o 2HR4 "por Hori!ontal
Rule%. -ste ser.a el resultado:
22
-l elemento ;'#> admite dos par+metros: WI/TH y (I@#. -l primero define la
lon*itud de la l.nea y el se*undo su anchura. Eo es obli*ado usar los dos a la
)e!.
<H1 ,IDTH6*++ SIZE6>>
-l resultado ser+:
-l )alor del atributo W$@T' se puede e(presar, como en el ejemplo anterior, en
nKmero de puntos "p.(els%, o en tantos por ciento referidos al ancho total de la
)entana. 9s.:
;'# W$@T'<HIJ L$W-<H>
-l resultado ser+:
9dem+s se puede indicar su posicin respecto a los m+r*enes de la )entana con
los atributos .LI)9BC#9T#R "por defecto% .LI)9BL#>T y .LI)9BRI)HT. &or
ejemplo:
;'# W$@T'<CDP L$W-<H .LI)9BL#>T>
-l resultado ser+:
N bien:
<H1 (IDTH6J+K EIFE6> ALI&N!I&HT>
-l resultado ser+:
23
'ay otro elemento, aparecido en la )ersin 6 de Eetscape, que permite rodear
un te(to con un marco, y opcionalmente ponerle una etiqueta. Le trata del
elemento: 2>I#L/(#T4. #ecuerda que si no tienes la )ersin adecuada de
na)e*ador, en los si*uientes ejemplos slo )er+s el te(to, pero no los
enmarcados.
Li se escribe:
<FIELDSET>
Esto es una prueba de enmarcado
<%FIELDSET>
Le obtiene:
*sto es una prueba de enmarcado
-ste elemento tiene un par+metro que permite etiquetar el recuadro: 2L#)#9/4
Li se escribe:
<FIELDSET>
<LE&END>Esto es una etiLueta<%LE&END>
<%FIELDSET>
Le obtiene:
*sto es una eti<ueta
-l par+metro 2L#)#9/4 tiene tres atributos que indican la posicin de la
etiqueta: L#>T "por defecto%, RI)HT y C#9T#R, aunque no funciona en todos
los na)e*adores. &or ejemplo:
<FIELDSET>
<LE&END ALI&N!CENTE> Esto es una etiLueta <%LE&END>
<%FIELDSET>
Le obtiene:
*sto es una eti<ueta
Li en estos ejemplos no se )e el recuadro o la etiqueta no est+ donde debiera,
es porque no se tiene una )ersin de na)e*ador adecuada.
24
&or supuesto, dentro del recuadro *enerado por ;>I#L/(#T> se puede poner
cualquier cosa: formularios, im+*enes, te(to, etc.
Te;tos $re%orateados
/uando se escribe un te(to con un editor, a la hora de )er lo hecho con el
)isuali!ador, al*unas cosas no est+n como se pusieron... /omo por ejemplo
poner dos o tres espacios en blanco entre palabras, o intentar encolumnar los
datos de una pequeAa tabla: Xacaba todo junto y en la misma l.neaQ
-ste efecto se puede eliminar con el elemento 2ER#4 . 9l te(to que )a dentro
del elemento &#- se le pueden aplicar todos los elementos que se quiera,
siempre que sean elementos que no alteren la posicin del te(to. &or ejemplo si
se utili!a el elemento ;'>, se romper.a el preformateo pero no ocurrir+ lo mismo
con ;4NET L$W->. &or defecto, los te(tos preformateados se )en con tipo de
letra "curier", y los no preformateados en "Times Ee2 #oman". -stos tipos son
confi*urables en el )isuali!ador.
Le escribir+ as.:
>5-*?
1 ; ) * > = ? <">Esto es una demostracion de</">
J < 1+ 11 1; 1) 1* te9to pre3ormateado!
1> 1= 1? 1J 1< ;+ ;1
>@5-*?
1 ; ) * > = ? E-to e- un. demo-t#.cion de
J < 1+ 11 1; 1) 1* te9to pre3ormateado!
1> 1= 1? 1J 1< ;+ ;1
@entro de un bloque preformateado tambin se pueden poner linSs a otros
documentos y codificacin para caracteres especiales.
-l na)e*ador, por defecto, elimina )arios espacios en blanco y los con)ierte en
uno solo. Li lo que se desea es separar una palabra de otra m+s de un espacio,
se puede recurrir a una instruccin especial que le indica esto al na)e*ador, pero
hay que darla codificadaY funciona como un a)ance de carro, y aunque en
pantalla cumple su objeti)o, cuando se imprime la p+*ina, no todas las
impresoras son capaces de interpretarlo correctamente.
25
Le escribe: KL=MIN y como alias se utili!a: Knbs$N

te9to te9toMnbsp7Mnbsp7Mnbsp7Mnbsp7Mnbsp7te9to te9to
Le )e as.:
te(to te(to te(to te(to
0tros e%ectos en el te;to
na o )arias l.neas de te(to, pueden estar centradas respecto a los m+r*enes
de la )entana. -sto afecta slo al te(to que hay entre ;/-ET-#> y
;1/-ET-#>, pero no a todo el p+rrafo. &or ejemplo:
;/-ET-#>te(to centrado te(to centrado;1/-ET-#>
Le )er+:
te(to te(to te(to te(to te(to te(to te(to te(to te(to t(to te(to te(to te(to te(to te(to te(to
te(to
te(to centrado te(to centrado
te(to te(to te(to te(to te(to te(to te(to te(to te(to t(to te(to te(to te(to te(to te(to te(to
te(to
-sto, adem+s , se puede aplicar a una tabla, una ima*en o cualquier otra cosa.
Zuedan al*unos otros elementos que modifican el aspecto del te(to.
Texto en negrita:
<">Te9to en ne0rita</">
Texto realado:
<ET1#,@>Te9to realNado</ET1#,@>
Texto en itlica:
<I>Te9to en itlica</I>
Texto con nfasis:
<EM>Te9to con On3asis</EM>
Te9to ePemplo de cQdi0o.
26
<%#DE>Te9to ePemplo de cQdi0o</%#DE>
Te9to teletipo.
<TT>Te9to teletipo</TT>
Te(to subra8ado%
<'>Te9to subraBado</'>
Te(to tacAado%
<ET1IIE>Te9to tac-ado</ET1IIE>
Texto de direccin:
<ADD1EEE>Te9to de direcciQn</ADD1EEE>
Te(to intermitente
<"LI,I>Te9to intermitente</"LI,I>
Te(to super9ndice
Te(to normal
<E'&>Te9to EuperRndice</E'&>
Te(to sub9ndiceTe(to nomal
<E'">Te9to EubRndice</E'">
Te(to grande
<"I@>Te9to 0rande</"I@>
Te(to pe<ueBo
<EMALL>Te9to peLueSo</EMALL>
-n los na)e*adores de Kltima *eneracin se ha implementado un efecto que
permite incluir e(plicaciones ocultas que aparecen al pasar el ratn por encima
"sin pulsar%, pero sin cambiar de p+*ina ni abrir nin*una )entana nue)a.
>&6-O,7) TIT1*CDH8per Te(t )arEup 1anguageD?HT)1>@&6-O,7)?
9l pasar el ratn sobre la palabra 'TML, se des)ela su si*nificado: 'TML
27
Listas & enOs
'ay elementos que permiten crear te(to con )arios formatos de listado: -stos
pueden ser :
ordenados ;NL> "se refiere a numerados, no ordenados por al*un
criterio%,
desordenados ;L> "no numerados%,
directorios ;@$#>,
enu ;M-E> y
listados de de%inicin ;@L>.
-sto es una lista ordenada "numerada%:
1= 5rimera linea
2= +egunda linea
Le escribe:
<#L>
<LI>&rimera linea
<LI>Ee0unda linea
</#L>
4ijarse en que los elementos ;L$> no necesitan cierre. Terminan cuando aparece
otro i*ual o se cierra la lista. &uede ser con)eniente poner el cierre ;1L$> si se
)an a aplicar instrucciones de estilo.
-sto es una lista desordenada " no numerada%:
5rimera linea
segunda linea
Le escribe:
<'L>
<LI>&rimera linea
<LI>Ee0unda linea
</'L>
-n este caso los nKmeros han sido sustituidos por unos puntos *ruesos. -sa es
la apariencia por defectoY se puede cambiar usando el atributo T1E# con tres
)alores "el )alor por defecto es /I(C%. /on el )alor CIRCL# se )er+:
o 5rimera linea
2
o segunda linea
Le escribe:
<'L TY$E!CICLE>
<LI>&rimera linea
<LI>Ee0unda linea
</'L>
Tambin puede usarse el )alor (QU.R#. 9s.:
5rimera linea
segunda linea
Le escribe:
<'L T$&E6S+(AE>
<LI>&rimera linea
<LI>Ee0unda linea
</'L>
Las listas ordenadas no slo se pueden ordenar con nKmeros. Tambin se
pueden utili!ar letras y numeracin romana tanto en mayKsculas como
minKsculas.
&ara esto se utili!a el atributo TR&- del elemento ;NL> con los si*uientes
)alores: T1E#B= "por defecto% para nKmeros, T1E#B. para letras mayKsculas,
T1E#Ba para letras minKsculas, T1E#BI para numeracin romana en
mayKsculas y T1E#Bi para numeracin romana en minKsculas.
-sto es una lista ordenada con letras a&Osculas:
&= 5rimera linea
'= +egunda linea
6= Tercera linea
3= 6uarta linea
Le escribe:
<#L T$&E6A>
<LI>&rimera linea
<LI>Ee0unda linea
<LI>Tercera linea
<LI>%uarta linea
</#L>
2!
-sto es una lista ordenada con letras inOsculas:
a= 5rimera linea
b= +egunda linea
c= Tercera linea
d= 6uarta linea
Le escribe:
<#L T$&E6.>
<LI>&rimera linea
<LI>Ee0unda linea
<LI>Tercera linea
<LI>%uarta linea
</#L>
-sto es una lista ordenada con nueracin roana en a&Osculas:
I= 5rimera linea
II= +egunda linea
III= Tercera linea
I2= 6uarta linea
Le escribe:
<#L T$&E6I>
<LI>&rimera linea
<LI>Ee0unda linea
<LI>Tercera linea
<LI>%uarta linea
</#L>
-sto es una lista ordenada con nueracin roana en inOsculas:
i= 5rimera linea
ii= +egunda linea
iii= Tercera linea
i#= 6uarta linea
Le escribe:
<#L T$&E6i>
<LI>&rimera linea
<LI>Ee0unda linea
<LI>Tercera linea
<LI>%uarta linea
</#L>
-n al*unos casos puede interesar que la lista no comience por el nKmero 7 "por
ejemplo si es una lista que continua en otra p+*ina%. Le puede conse*uir con el
atributo (T.RT combinado con T1E#.
3"
-sto es una lista ordenada con letras a&Osculas & Due coien*a $or la #:
*= 5rimera linea
:= +egunda linea
4= Tercera linea
H= 6uarta linea
Le escribe:
<#L T$&E6A STAT6>>
<LI>&rimera linea
<LI>Ee0unda linea
<LI>Tercera linea
<LI>%uarta linea
</#L>
-l nKmero que se pone en el atributo LT9#T indica en que nKmero o letra
comen!ar+ la lista. la - es la quinta letra.
-sto es un enO:
5rimera linea
+egunda linea
Le escribe:
<MEN(>
<LI>&rimera linea
<LI>Ee0unda linea
</ME,'>
La diferencia entre un menK y una lista desordenada, es que las l.neas en la lista
desordenada comien!an en el mar*en i!quierdo y las del menK unas posiciones
m+s a la derecha "aunque eso depende del )isuali!ador, con Eetscape se )en
i*ual%.
-sto es un directorio:
5rimera linea
+egunda linea
31
Le escribe:
<DI>
<LI>&rimera linea
<LI>Ee0unda linea
</DI1>
-sto es una lista de de%inicion:
5rimera linea
+egunda linea
Le escribe:
<DL>
<DT>&rimera linea
<DD>Ee0unda linea
</DL>
4ijarse que ahora en lu*ar del elemento ;L$> se utili!a ;/T> y ;//>, y como
tipo 2/L4. -stos tres nue)os elementos tambin se pueden usar con cualquiera
de los anteriores tipos de lista, alterando por completo su apariencia.
!"e#plo$ de li$ta$ % #en&$
32
De$ordenada$
De$ordenada $i#ple 'on #ar'a$
1inea de te(to 1
1inea de te(to 2
1inea de te(to 3
+e escribe%
<'L>
<LI>Linea de te9to 1
<LI>Linea de te9to ;
<LI>Linea de te9to )
</'L>
De$ordenada $i#ple $in #ar'a$( )o#ieno en #argen i*uierdo
1inea de te(to 1
1inea de te(to 2
1inea de te(to 3
+e escribe%
<DL>
<DT>Linea de te9to 1
<DT>Linea de te9to ;
<DT>Linea de te9to )
</DL>
De$ordenada $i#ple $in #ar'a$( )o#ieno una po$i'i+n a la dere',a
1inea de te(to 1
1inea de te(to 2
1inea de te(to 3
+e escribe%
<'L>
</'L>
De$ordenada $i#ple 'on #ar'a$( )o#ieno una po$i'i+n a la dere',a
1inea de te(to 1
1inea de te(to 2
1inea de te(to 3
+e escribe%
<'L>
</'L>
De$ordenada $i#ple $in #ar'a$( )o#ieno do$ po$i'ione$ a la dere',a
33
1inea de te(to 1
1inea de te(to 2
1inea de te(to 3
+e escribe%
<'L>
<DD>Linea de te9to 1
<DD>Linea de te9to ;
<DD>Linea de te9to )
</'L>
De$ordenada $i#ple $in #ar'a$( )o#ieno tre$ po$i'ione$ a la dere',a
1inea de te(to 1
1inea de te(to 2
1inea de te(to 3
+e escribe%
<'L>
<'L>
<DD>Linea de te9to 1
<DD>Linea de te9to ;
<DD>Linea de te9to )
</'L>
</'L>
De$ordenada $i#ple 'on #ar'a$( )o#ieno do$ po$i'ione$ a la dere',a
o 1inea de te(to 1
o 1inea de te(to 2
o 1inea de te(to 3
+e escribe%
<'L>
<'L T$&E6DIE%>
</'L>
</'L>
De$ordenada 'on 4 ni-ele$ $in #ar'a$
1inea de te(to 1
1inea de te(to 2
1inea de te(to 3
1inea de te(to 3=1
1inea de te(to 3=2
1inea de te(to 3=2=1
1inea de te(to 3=2=2=1
1inea 4 de te(to
+e escribe%
<DL>
34
<DL>
<DT>Linea de te9to )!1
<DT>Linea de te9to )!;
<DL>
<DT>Linea de te9to )!;!1
<DT>Linea de te9to )!;!;
<DL>
<DT>Linea de te9to )!;!;!1
<DT>Linea de te9to )!;!;!;
</DL>
</DL>
</DL>
<DT>Linea * de te9to
</DL>
De$ordenada 'on 4 ni-ele$ 'on #ar'a$
1inea de te(to 1
1inea de te(to 2
1inea de te(to 3
o 1inea de te(to 3=1
o 1inea de te(to 3=2
1inea 4 de te(to
+e escribe%
<'L>
<'L>
<LI>Linea de te9to )!1
<LI>Linea de te9to )!;
<'L>
<LI>Linea de te9to )!;!1
<LI>Linea de te9to )!;!;
<'L>
<LI>Linea de te9to )!;!;!1
<LI>Linea de te9to )!;!;!;
</'L>
</'L>
</'L>
<LI>Linea * de te9to
</'L>
35
.rdenada$
.rdenada $i#ple
1= 1inea de te(to 1
2= 1inea de te(to 2
3= 1inea de te(to 3
+e escribe%
<#L>
</#L>
.rdenada 'on 4 ni-ele$/ todo$ ordenado$
1= 1inea de te(to 1
2= 1inea de te(to 2
3= 1inea de te(to 3
1= 1inea de te(to 3=1
1= 1inea de te(to 3=2=1
2= 1inea de te(to 3=2=2
1= 1inea de te(to 3=2=2=1
2= 1inea de te(to 3=2=2=2
4= 1inea de te(to 4
+e escribe%
<#L>
<#L>
<#L>
<#L>
</#L>
</#L>
</#L>
<LI>Linea de te9to *
</#L>
.rdenada 'on 4 ni-ele$/ todo$ ordenado$( 0u#era'i+n ro#ana en #a%&$'ula$ %
#in&$'ula$
I= 1inea de te(to 1
36
II= 1inea de te(to 2
III= 1inea de te(to 3
i= 1inea de te(to 3=1
ii= 1inea de te(to 3=2
i= 1inea de te(to 3=2=1
ii= 1inea de te(to 3=2=2
i= 1inea de te(to 3=2=2=1
ii= 1inea de te(to 3=2=2=2
I2= 1inea de te(to 4
+e escribe%
<#L T$&E6I>
<#L T$&E6i>
<#L T$&E6i>
<#L T$&E6i>
</#L>
</#L>
</#L>
</#L>
.rdenada 'on 4 ni-ele$/ 2 de$ordenado$ 'on #ar'a$
1= 1inea de te(to 1
2= 1inea de te(to 2
3= 1inea de te(to 3
4= 1inea de te(to 4
+e escribe%
<#L>
<#L>
37
<'L T$&E6E4'A1E>
<'L T$&E6%I1%LE>
</'L>
</'L>
</#L>
</#L>
.rdenada 'on 4 ni-ele$/ 2 de$ordenado$ $in #ar'a$
1= 1inea de te(to 1
2= 1inea de te(to 2
3= 1inea de te(to 3
4= 1inea de te(to 4
+e escribe%
<#L>
<#L>
<DL>
<DD>Linea de te9to )!;!1
<DD>Linea de te9to )!;!;
<DL>
<DD>Linea de te9to )!;!;!1
<DD>Linea de te9to )!;!;!;
</DL>
</DL>
</#L>
</#L>
3
Tablas6
Las tablas son sin duda uno de los elementos m+s potentes del 'TML. /on
pocos elementos se pueden conse*uir efectos espectaculares.
-n el interior de las celdas de una tabla, que pueden ser con borde )isible o
in)isible, se puede poner cualquier cosa: te(to de cualquier tamaAo y color,
im+*enes, linSs...
3!
&or supuesto, adem+s de permitir cualquier contenido, tienen sus propios
atributos de alineacin tanto hori!ontal como )ertical, y atributos de
dimensionado.
&or defecto se autodimensionan, es decir, se adaptan en tamaAo a su contenido,
pero tambin es posible definirlo de forma fija. Las tablas han sido utili!adas
lar*o tiempo para maquetar el contenido de las p+*inas, y aunque las nue)as
tendencias aconsejen hacer esto con bloques "capas M'TML%, no es un
elemento que )aya a desaparecer, y es mucho m+s sencillo de utili!ar.
-l elemento b+sico de definicin de tabla es ;T.!L#> ;8T.!L#> y en su
interior se disponen los sub elementos ;TR> para definir una fila "Ro2% ;TH>
para definir una cabecera "Header% ;T/> para definir una celda de datos "/ata%.
-stos sub elementos tambin han de lle)ar sus correspondientes cierres: ;8TR>
;8TH> ;8T/>.
na cabecera ;TH> es lo mismo que una celda de datos ;T/> pero de forma
autom+tica el te(to de su contenido recibe los atributos de ne*rita y centrado.
Llo es posible definirlas al principio de las filas, de las columnas o de ambas a
la )e!.
'e aqu. una tabla,resumen de los elementos utili!ados y los atributos que
admite cada uno:
T123! T4 TD TH )15TI.0
2.4D!4 F G G G G
2.4D!4).3.4 F G G G G
4.67510 G G F F G
).37510 G G F F G
13I80 G F F F F
V13I80 G G F G G
6IDTH F G F G G
H!I8TH F G F G G
)!3351DDI08 F G G G G
)!33751)I08 F G G G G
0.6415 G G F G G
!V!0T7 F F F F G
-esumen de tablas
Li*nificado de cada atributo:
2.4D!4 Indica el ancAo de los bordes de la tabla= +e mide en p9(els= +i no se
escribe este atributoH es e<ui#alente a 'O-3*-C" Ipor deJectoK=
4"
2.4D!4).3.4 *stablece el color de los bordes de la tabla= ,o Junciona
igual en todos los na#egadores=
)!33751)I08 Indica el nLmero de p9(els <ue separan una celda de otra=
&un<ue pueda parecerloH no Aace lo mismo <ue 'O-3*-= +u #alor por deJecto
es 2=
)!3351DDI08 Indica los p9(els de separacin entre el borde de la celda 8 su
contenido= +u #alor por deJecto es 1=
6IDTH +egLn donde se escribaH sir#e para controlar el ancAo de toda la tabla o
de sus columnas= +i se inclu8e en >T&'1*? puede indicar el tamaBo tanto en
p9(els como en porcenta;e respecto al ancAo de la pantalla=
13I80 Indica la alineacin Aorizontal de los datos dentro de las celdas= 5uede
tener tres #alores% 3!9T Iiz<uierdaKH 4I8HT IderecAaK 8 )!0T!4 IcentroK=
V13I80 Indica la alineacin #ertical de los datos dentro de las celdas= 5uede
tener tres #alores% T.5 IarribaKH 2.TT.: Iaba;oK 8 :IDD3! IcentroK=
4.67510 +e utiliza en la deJinicin de una celda I>T3?K o cabecera I>TH?K
para indicar <ue su ancAura o altura son e<ui#alentes a un determinado nLmero de
Jilas=
).37510 +e utiliza en la deJinicin de una celda I>T3?K o cabecera I>TH?K
para indicar <ue su ancAura o altura son e<ui#alentes a un determinado nLmero de
columnas=
0.6415 5ara impedir <ue las l9neas de te(to dentro de una celda se trun<uen
en los espacios en blanco=
!V!0T7 +e pueden capturar todos los e#entos t9picos de los na#egadores en
cual<uiera de las partes de una tabla= 5ara ello es necesario .a#a+criptH 8 no es
compatible con todos los na#egadores=
5or e;emplo%
<TABLE BORDER
onMouseOver="javascript:alert('Aviso')"> ... </TABLE>
#ecientemente se han implementado al elemento ;T9FL-> al*unos atributos
muy interesantes que permiten definir qu bordes o l.neas de la tabla se
mostrar+n:
-ste atributo sir)e para definir qu bordes del marco de la tabla ser+n )isibles:
<T123! 941:!;<-alor<> ((( </T123!> donde -alor puede ser%
-oid G ,ingLn lado Ipor deJectoK=
abo-e G +lo el borde superior
belo= G +lo el borde inJerior=
,$ide$ G +lo los bordes superior e inJerior=
-$ide$ G +lo los lados derecAo e iz<uierdo=
41
l,$ G +lo el lado iz<uierdo=
r,$ G +lo el lado derecAo=
box G 1os cuatro lados=
border G 1os cuatro lados Ino es lo mismo <ue el 8a conocidoK
R este otro sir)e para definir qu bordes de la tabla ser+n )isibles:
<T123! 4>3!7;<-alor<> ((( </T123!> donde -alor puede ser%
none G ,inguna l9nea de di#isin Ipor deJectoK=
group$ G +lo aparecen l9neas de di#isin entre grupos de Jilas 8 grupos de
columnas=
'ol$ G +lo aparecer$n l9neas de di#isin entre Jilas=
ro=$ G +lo aparece l9neas de di#isin entre columnas=
-stos Kltimos atributos no funcionan i*ual en todos los na)e*adores, y no
funcionan en absoluto si no son de la Kltima *eneracin. Le*Kn el na)e*ador de
que se trate, puede que haya que combinar m+s de un atributo para conse*uir el
efecto deseado. Lo mejor es hacer pruebas con al*unas )ersiones para
ase*urarse.
!"e#plo$ de tabla$
Tabla b?$i'a de 3x2
& ' 6
3 * :
<TA"LE "#1DE1>
<T1>
<TD>A</TD> <TD>"</TD> <TD>%</TD>
</T1>
<T1>
<TD>D</TD> <TD>E</TD> <TD>2</TD>
</T1>
</TA"LE>
Do$ e"e#plo$ de l@nea expandida >-OW+5&,?
Item 1
Item 2
Item 3
Item 4 Item 5
<TA"LE "#1DE1>
<T1>
<TD>Item 1</TD>
<TD 1#(E&A,6;>Item ;</TD>
<TD>Item )</TD>
</T1>
<T1>
<TD>Item *</TD> <TD>Item ></TD>
42
</T1>
</TA"LE>
Item 1
Item 2 Item 3 Item 4
<TA"LE "#1DE1>
<T1>
<TD 1#(E&A,6;>Item 1</TD>
<TD>Item ;</TD> <TD>Item )</TD> <TD>Item *</TD>
</T1>
<T1>
<TD>Item ></TD> <TD>Item =</TD> <TD>Item ?</TD>
</T1>
</TA"LE>
!"e#plo de 'olu#na expandida >6O1+5&,?
Item 1 Item 2
<TA"LE "#1DE1>
<T1>
<TD>Item 1</TD>
<TD %#LE&A,6;>Item ;</TD>
</T1>
<T1>
<TD>Item )</TD> <TD>Item *</TD> <TD>Item ></TD>
</T1>
</TA"LE>
Tabla 'on 'abe'era$ >TH?
HeadA Head2 Head3
& ' 6
3 * :
<TA"LE "#1DE1>
<T1>
<TH>Head1</TH> <TH>Head;</TH> <TH>Head)</TH>
</T1>
<T1>
</T1>
<T1>
</T1>
</TA"LE>
)o#bina'i+n de 'olu#na expandida % 'abe'era
HeadA Head2
& ' 6 3
* : 4 H
<TA"LE "#1DE1>
43
<T1>
<TH %#LE&A,6;>Head1</TH>
<TH %#LE&A,6;>Head;</TH>
</T1>
<T1>
<TD>A</TD> <TD>"</TD> <TD>%</TD> <TD>D</TD>
</T1>
<T1>
<TD>E</TD> <TD>2</TD> <TD>@</TD> <TD>H</TD>
</T1>
</TA"LE>
)o#bina'i+n de 'abe'era$ #&ltiple$ % 'olu#na$ expandida$
HeadA Head2
Head 3 Head 4 Head 5 Head 6
& ' 6 3
* : 4 H
<TA"LE "#1DE1>
<T1>
<TH %#LE&A,6;>Head1</TH>
<TH %#LE&A,6;>Head;</TH>
</T1>
<T1>
<TH>Head )</TH> <TH>Head *</TH>
<TH>Head ></TH> <TH>Head =</TH>
</T1>
<T1>
<TD>A</TD> <TD>"</TD> <TD>%</TD> <TD>D</TD>
</T1>
<T1>
<TD>E</TD> <TD>2</TD> <TD>@</TD> <TD>H</TD>
</T1>
</TA"LE>
)abe'era$ laterale$
HeadA Item 1 Item 2 Item 3
Head2 Item 4 Item 5 Item 6
Head3 Item 7 Item Item !
<TA"LE "#1DE1>
<T1><TH>Head1</TH>
<TD>Item 1</TD> <TD>Item ;</TD> <TD>Item )</TD></T1>
<T1><TH>Head;</TH>
<TD>Item *</TD> <TD>Item ></TD> <TD>Item =</TD></T1>
<T1><TH>Head)</TH>
<TD>Item ?</TD> <TD>Item J</TD> <TD>Item <</TD></T1>
</TA"LE>
)o#bina'i+n de 'abe'era$ laterale$ % l@nea$ expandida$
44
HeadA
Item 1 Item 2 Item 3 Item 4
Item 5 Item 6 Item 7 Item
Head2 Item ! Item 1" Item 3 Item 11
<TA"LE "#1DE1>
<T1><TH 1#(E&A,6;>Head1</TH>
<TD>Item 1</TD> <TD>Item ;</TD> <TD>Item )</TD> <TD>Item
*</TD>
</T1>
<T1><TD>Item ></TD> <TD>Item =</TD> <TD>Item ?</TD> <TD>Item
J</TD>
</T1>
<T1><TH>Head;</TH>
<TD>Item <</TD> <TD>Item 1+</TD> <TD>Item )</TD> <TD>Item
11</TD>
</T1>
</TA"LE>
)o#bina'i+n de 'abe'era$ $uperiore$ % laterale$( Tabla 'entrada( )ontenido$
'entrado$( T@tulo al pie(
T123! T4 TD TH )15TI.0
2.4D!4 F G G G G
4.67510 G G F F G
).37510 G G F F G
13I80 G F F F F
V13I80 G G F G G
6IDTH F G F G G
H!I8TH F G F G G
)!3351DDI08 F G G G G
)!33751)I08 F G G G G
-esumen de tablas
<%E,TE1>
<TA"LE "#1DE1>
<%A&TI#, ALI@,6bottom>1esumen de tablas</%A&TI#,>
<T1>
<TD><TH>TA"LE</TH><TH>T1</TH><TH>TD</TH><TH>TH</TH><TH>%A&TI#,</TH></TD>
</T1>
<T1 ALI@,6%E,TE1>
<TH>"#1DE1</TH><TD>T</TD><TD>-</TD><TD>-</TD><TD>-</TD><TD>-</TD>
</T1>
<T1 ALI@,6%E,TE1>
<TH>1#(E&A,</TH><TD>-</TD><TD>-</TD><TD>T</TD><TD>T</TD><TD>-</TD>
</T1>
<T1 ALI@,6%E,TE1>
<TH>%#LE&A,</TH><TD>-</TD><TD>-</TD><TD>T</TD><TD>T</TD><TD>-</TD>
45
</T1>
<T1 ALI@,6%E,TE1>
<TH>ALI@,</TH><TD>-</TD><TD>T</TD><TD>T</TD><TD>T</TD><TD>T</TD>
</T1>
<T1 ALI@,6%E,TE1>
<TH>5ALI@,</TH><TD>-</TD><TD>-</TD><TD>T</TD><TD>-</TD><TD>-</TD>
</T1>
<T1 ALI@,6%E,TE1>
<TH>(IDTH</TH><TD>T</TD><TD>-</TD><TD>T</TD><TD>-</TD><TD>-</TD>
</T1>
<T1 ALI@,6%E,TE1>
<TH>HEI@TH</TH><TD>T</TD><TD>-</TD><TD>T</TD><TD>-</TD><TD>-</TD>
</T1>
<T1 ALI@,6%E,TE1>
<TH>%ELL&ADDI,@</TH><TD>T</TD><TD>-</TD><TD>-</TD><TD>-</TD><TD>-</TD>
</T1>
<T1 ALI@,6%E,TE1>
<TH>%ELLE&A%I,@</TH><TD>T</TD><TD>-</TD><TD>-</TD><TD>-</TD><TD>-</TD>
</T1>
</TA"LE>
</%E,TE1>
!"e#plo 'on todo$ lo$ ele#ento$ % par?#etro$
:edia
1ltura 5e$o
7exo
Ho#bre$ 1=! 5
:u"ere$ 1=7 6"
<TA"LE "#1DE1>
<T1> <TD><TH 1#(E&A,6;></TH>
<TH %#LE&A,6;>Media</TH></TD>
</T1>
<T1> <TD><TH>Altura</TH><TH>&eso</TH></TD>
</T1>
<T1> <TH 1#(E&A,6;>Ee9o</TH>
<TH>Hombres</TH><TD>1!<</TD><TD>J></TD>
</T1>
<T1> <TH>MuPeres</TH><TD>1!?</TD><TD>=+</TD>
</T1>
</TA"LE>
.tro e"e#plo de l@nea % 'olu#na expandido$
&
1 2
3 4
6 3
46
<TA"LE "#1DE1>
<T1>
<TD ALI@,6center 1#(E&A,6; %#LE&A,6;>A</TD>
<TD>1</TD>
<TD>;</TD>
</T1>
<T1>
<TD>)</TD>
<TD>*</TD>
</T1>
<T1>
<TD ALI@,6center 1#(E&A,6; %#LE&A,6;>%</TD>
<TD ALI@,6center 1#(E&A,6; %#LE&A,6;>D</TD>
</T1>
<T1>
</T1>
</TA"LE>
1"u$tando #?rgene$ % borde$
Tabla $in borde$
Item 1
Item 2
Item 3
Item 4 Item 5
<TA"LE>
<T1> <TD>Item 1</TD> <TD 1#(E&A,6;>Item ;</TD> <TD>Item
)</TD>
</T1>
<T1> <TD>Item *</TD> <TD>Item ></TD>
</T1>
</TA"LE>
&<u9 no es #isible el borde de las celdas debido a <ue se Aa omitido el atributo 2.4D!4
del elemento >T&'1*?= 1a omisin o no es e<ui#alente a parametrizarloM se consigue lo
mismo as9% 2.4D!4C"H 8 como 8a Aabr$s deducidoH el #alor de 'O-3*- puede ser
#ariable= )ira el siguiente e;emplo%
Tabla 'on borde de AB punto$
Item 1 Item 2
Item 3 Item 4
<TA"LE "#1DE161+>
<T1> <TD>Item 1</TD> <TD> Item ;</TD>
</T1>
<T1> <TD>Item )</TD> <TD>Item *</TD>
</T1>
</TA"LE>
Di#en$ionado de 'elda$
47
& ' 6
3 * :
<TA"LE "#1DE1 %ELL&ADDI,@61+ %ELLE&A%I,@6+>
<T1>
</T1>
<T1>
</T1>
</TA"LE>
& ' 6
3 * :
<T1>
</T1>
<T1>
</T1>
</TA"LE>
& ' 6
3 * :
<T1>
</T1>
<T1>
</T1>
</TA"LE>
& ' 6
3 * :
<TA"LE "#1DE16> %ELL&ADDI,@61+ %ELLE&A%I,@61+>
<T1>
</T1>
<T1>
</T1>
</TA"LE>
4
1linea'i+n/ t@tulo$ % $ubtabla$
3@nea$ #&ltiple$ en un tabla
!nero 9ebrero :aro
6elda 1 6elda 2
Otra celda
6elda 3
6elda 4
8 esta
es la celda 5
6elda 6
<TA"LE "#1DE1>
<T1>
<TH>Enero</TH>
<TH>2ebrero</TH>
<TH>MarNo</TH>
</T1>
<T1>
<TD>%elda 1</TD>
<TD>%elda ;</TD>
<TD>#tra celda<br> %elda )</TD>
</T1>
<T1>
<TD>%elda *</TD>
<TD>B esta<br>es la celda ></TD>
<TD>%elda =</TD>
</T1>
</TA"LE>
1lineado ,oriontal del 'ontenido de la$ 'elda$( 13I80;3!9T C 4I8HT C )!0T!4
+e puede aplicar indi#idualmente a una celda o a toda la l9nea
!nero 9ebrero :aro
Todas alineadas al centro 6elda 2
Otra celda
6elda 3
&lineado a la derecAa&lineado al centro
5or deJecto
&lineado a la iz<uierda
<TA"LE "#1DE1>
<T1>
<TH>Enero</TH>
<TH>2ebrero</TH>
<TH>MarNo</TH>
</T1>
<T1 ALI@,6center>
<TD>Todas alineadas al centro</TD>
<TD>%elda ;</TD>
<TD>#tra celda<br> %elda )</TD>
4!
</T1>
<T1>
<TD ALI@,6ri0-t>Alineado a la derec-a</TD>
<TD ALI@,6center>Alineado al centro</TD>
<TD>&or de3ecto<br>Alineado a la iNLuierdat</TD>
</T1>
</TA"LE>
1lineado -erti'al del 'ontenido de la$ 'elda$( V13I80;T.5 C 2.TT.: C :IDD3!
+e puede aplicar indi#idualmente a una celda o a toda la columna
!nero 9ebrero :aro
Todas alineadas arriba *sta es la
6elda 2
6elda 3
&lineado arriba
&lineado aba;o
5or deJecto
&lineado al centro
<TA"LE "#1DE1>
<T1>
<TH>Enero</TH>
<TH>2ebrero</TH>
<TH>MarNo</TH>
</T1>
<T1 5ALI@,6top>
<TD>Todas alineadas arriba</TD>
<TD>Esta es la<br>%elda ;</TD>
<TD>%elda )</TD>
</T1>
<T1>
<TD 5ALI@,6top>Alineado arriba</TD>
<TD 5ALI@,6bottom>Alineado abaPo</TD>
<TD>&or de3ecto<br>Alineado al centro</TD>
</T1>
</TA"LE>
Titulando la$ tabla$( )15TI.0;T.5 C 2.TT.:
T9tulo arriba
!nero 9ebrero :aro
6elda 1 6elda 2 6elda 3
<TA"LE "#1DE1>
<%A&TI#, ALI@,6top>Titulo arriba</%A&TI#,>
<T1>
<TH>Enero</TH>
<TH>2ebrero</TH>
<TH>MarNo</TH>
</T1>
<T1>
<TD>%elda 1</TD>
<TD>%elda ;</TD>
5"
<TD>%elda )</TD>
</T1>
</TA"LE>
!nero 9ebrero :aro
6elda 1 6elda 2 6elda 3
T9tulo aba;o
<TA"LE "#1DE1>
<%A&TI#, ALI@,6bottom>Titulo abaPo</%A&TI#,>
<T1>
<TH>Enero</TH>
<TH>2ebrero</TH>
<TH>MarNo</TH>
</T1>
<T1>
<TD>%elda 1</TD>
<TD>%elda ;</TD>
<TD>%elda )</TD>
</T1>
</TA"LE>
1nidando tabla$( 3a tabla 12)D dentro de la tabla A2345
1 2
3
& '
6 3
4 5 6
<TA"LE "#1DE1>
<T1> 
<TD>1</TD>
<TD>;</TD>
<TD>)
<TA"LE "#1DE1>
<T1> 
<TD>A</TD>
<TD>"</TD>
</T1>
<T1> 
<TD>%</TD>
<TD>D</TD>
</T1>
</TA"LE>
</TD>
</T1>
<T1> 
<TD>*</TD>
<TD>></TD>
<TD>=</TD>
</T1>
</TA"LE>
51
3ongitud ,oriontal de la$ tabla$
Tabla *ue o'upa el 5B D de la pantalla/ % 'u%a$ 'elda$ e$t?n di#en$ionada$ al 5B D
'ada una re$pe'to a la longitud total de la tabla
WidtAC5"N WidtAC5"N
6elda 3 6elda 4
<TA"LE "#1DE1 (IDTH6">+K">
<T1><TD>(idt-6>+K</TD><TD>(idt-6>+K</TD>
</T1>
<T1><TD>%elda )</TD><TD>%elda *</TD>
</T1>
</TA"LE>
Tabla di#en$ionada al 5B D de la pantalla/ 'elda$ $in di#en$ionar( .b$E-e$e *ue $e
alargan #?$ de lo *ue lo ,ar@an $in Forar la longitud de la tabla
6elda 1 2
6elda 3 4
<T1><TD>%elda 1</TD><TD>;</TD>
</T1>
<T1><TD>%elda )</TD><TD>*</TD>
</T1>
</TA"LE>
!l #i$#o eFe'to anterior/ pero 'on la tabla di#en$ionada al ABB D
WI3THC1""N 6elda 2
3 6elda 4
<TA"LE "#1DE1 (IDTH6"1++K">
<T1><TD>(IDTH61++K</TD><TD>%elda ;</TD>
</T1>
<T1><TD>)</TD><TD>%elda *</TD>
</T1>
</TA"LE>
)entrado de una tabla en la p?gina
& ' 6
3 * :
<%E,TE1>
<T1>
</T1>
<T1>
52
</T1>
</TA"LE>
</%E,TE1>
Tabla Forada al 5B D de la p?gina/ 'onteniendo otra tabla anidada en una de $u$
'elda$( 3a $egunda tabla e$t? Forada a o'upar el ABB D de la 'elda re'eptora(
Item 1 Item 2
Item & Item ' Item 4
<T1><TD>Item 1</TD><TD>Item ;</TD>
</T1>
<T1><TD>
<TA"LE "#1DE1 (IDTH61++K>
<T1><TD>Item A</TD><TD>Item "</TD>
</T1>
</TA"LE>
</TD>
<TD>Item *</TD>
</T1>
</TA"LE>
3ongitud -erti'al de la$ tabla$
Tabla *ue o'upa el 5B D ,oriontal de la pantalla/ % el 25 D -erti'al( H*I4HTC25N
H*I4HTC25N Item 2
3 4
<TA"LE "#1DE1 (IDTH6">+K" HEI@HT6";>K">
<T1><TD>HEI@HT61>K</TD> <TD>Item ;</TD>
</T1>
<T1><TD>)</TD><TD>*</TD>
</T1>
</TA"LE>
9ondo$ de 'olore$ o gr?Fi'o$ en la$ tabla$
>na tabla de 'uatro 'elda$( )ada una de un 'olor(
Te(to -O.O Te(to 2*-3*
Te(to &/01 Te(to &)&-I11O
<TA"LE "#1DE1>
<T1><TD "@%#L#16"1ED">Te9to 1#H#</TD>
<TD "@%#L#16"0reen">Te9to 5E1DE</TD>
53
</T1>
<T1><TD "@%#L#16"blue">Te9to AF'L</TD>
<TD "@%#L#16"$ELL#(">Te9to AMA1ILL#</TD>
</T1>
</TA"LE>
*n este e;emplo se Aa dado color indi#idualmente a cada celda= *l atributo
28).3.4;<'olor< puede utilizarse en cada elemento de la tabla para eJectos globales=
5or e;emploH para Aacer toda la tabla en ro;oH slo ser9a necesario escribir%
<TA"LE "#1DE1 "@%#L#16"red">
!!!!
!!!!
</TA"LE>
5ara toda la l9nea%
<TA"LE "#1DE1>
<T1 "@%#L#16"red"><TD> te9to </TD></T1>
!!!!
</TA"LE>
TambiOn se puede usar una imagen como Jondo de toda la tabla%
<TA"LE "#1DE1 "A%I@1#',D6"Bello/Ur!0i3">
!!!!
!!!!
</TA"LE>
3e slo una celda%
<TA"LE "#1DE1>
<T1><TD "A%I@1#',D6"Bello/Ur!0i3"> te9to </TD></T1>
!!!!
</TA"LE>
O de toda la Jila%
<TA"LE "#1DE1 >
<T1 "A%I@1#',D6"Bello/Ur!0i3"><TD> te9to </TD></T1>
!!!!
</TA"LE>
2orde$ de 'olore$ en la$ tabla$
+e puede cambiar el color de los bordes de una tablaH aun<ue este atributo no Junciona
igual en todos los na#egadoresH 8a <ue en el I* el color aJecta a todas las l9neas de la
tablaH 8 en )ozilla solamente a los bordes e(teriores= 5or e;emplo%
*;emplo de bordes de color ro;o
*;emplo de bordes de color ro;o
<TA"LE "#1DE16; bordercolor6"red" >
<T1><TD> EPemplo de bordes</TD><TD> de color roPo </TD></T1>
<T1><TD> EPemplo de bordes</TD><TD> de color roPo </TD></T1>
</TA"LE>
1tributo$ de &lti#a genera'i+n
54
Tabla *ue $ola#ente #ue$tra lo$ 'uatro borde$
& ' 6
3 * :
<TA"LE 21AME6"border" 1'LEE6"none">
<T1>
</T1>
<T1>
</T1>
</TA"LE>
Tabla *ue $ola#ente #ue$tra lo$ borde$ $uperior e inFerior
& ' 6
3 * :
<TA"LE 21AME6"-sides" 1'LEE6"none">
<T1>
</T1>
<T1>
</T1>
</TA"LE>
Tabla *ue $ola#ente #ue$tra lo$ borde$ i*uierdo % dere',o
& ' 6
3 * :
<TA"LE 21AME6"8sides" 1'LEE6"none">
<T1>
</T1>
<T1>
</T1>
</TA"LE>
Tabla *ue $ola#ente #ue$tra la$ l@nea$ de di-i$i+n entre 'olu#na$
& ' 6
3 * :
<TA"LE 21AME6"8oid" 1'LEE6"cols">
<T1>
</T1>
<T1>
</T1>
</TA"LE>
Tabla *ue $ola#ente #ue$tra la$ l@nea$ de di-i$i+n entre Fila$
& ' 6
55
3 * :
<TA"LE 21AME6"8oid" 1'LEE6"ro/s">
<T1>
</T1>
<T1>
</T1>
</TA"LE>
!"e#plo de tabla 'on agrupa#iento$ de 'olu#na$ % Fila$
*;emplo de grupos de columnas 8 l9neas
)olu#naA )olu#na2 )olu#na3 )olu#na4 )olu#na5 )olu#na6 )olu#naG
6111 6211 6311 6411 6511 6611 6711
6112 6212 6312 6412 6512 6612 6712
6113 6213 6313 6413 6513 6613 6713
6114 6214 6314 6414 6514 6614 6714
6115 6215 6315 6415 6515 6615 6715
6116 6216 6316 6416 6516 6616 6716
6117 6217 6317 6417 6517 6617 6717
<TA"LE border6"1" 3rame6"border" rules6"0roups">
<%A&TI#,>EPemplo de 0rupos de columnas B lRneas</%A&TI#,>
<%#L@1#'& ali0n6"center">
<%#L@1#'& ali0n6"le3t">
<%#L@1#'& ali0n6"center" span6";">
<%#L@1#'& ali0n6"center" span6")">
<THEAD 8ali0n6"top">
<T1>
<TH>%olumna1</TH>
<TH>%olumna;</TH>
<TH>%olumna)</TH>
<TH>%olumna*</TH>
<TH>%olumna></TH>
<TH>%olumna=</TH>
<TH>%olumna?</TH></T1>
<T"#D$>
<T1><TD>%1L1<TD>%;L1<TD>%)L1<TD>%*L1<TD>%>L1<TD>%=L1<TD>%?L1</T1>
<T1><TD>%1L;<TD>%;L;<TD>%)L;<TD>%*L;<TD>%>L;<TD>%=L;<TD>%?L;</T1>
<T1><TD>%1L)<TD>%;L)<TD>%)L)<TD>%*L)<TD>%>L)<TD>%=L)<TD>%?L)</T1>
<T1><TD>%1L*<TD>%;L*<TD>%)L*<TD>%*L*<TD>%>L*<TD>%=L*<TD>%?L*</T1>
<T"#D$>
<T1><TD>%1L><TD>%;L><TD>%)L><TD>%*L><TD>%>L><TD>%=L><TD>%?L></T1>
<T1><TD>%1L=<TD>%;L=<TD>%)L=<TD>%*L=<TD>%>L=<TD>%=L=<TD>%?L=</T1>
<T2##T>
<T1><TD>%1L?<TD>%;L?<TD>%)L?<TD>%*L?<TD>%>L?<TD>%=L?<TD>%?L?</T1>
</TA"LE>
56
/omo se puede )er, e(iste un a*rupamiento desde la l.nea 7 a la I, y otro de la
H a la 6. 9 su )e!, las columnas 0 y I forman un *rupo, y la H, 6 y J otro.
Los dos a*rupamientos de columnas se definen con las instrucciones:
<%#L@1#'& ali0n6"center" span6";">
<%#L@1#'& ali0n6"center" span6")">
'ay cuatro *rupos de filas: La que aparece debajo de las cabeceras la escribe
;T'-9@> Las dos l.neas que separan los *rupos de filas centrales las producen
las dos instrucciones ;TFN@R>, R la Kltima la produce ;T4NNT>. &or supuesto,
no es obli*ado que esten todas, se puede poner solamente las que se
necesiten. Todo esto funciona solamente si en la definicin de la tabla se incluye
el atributo rulesBCgrou$sC
Tabla$ 'on eFe'to$ 'o#patible$ 'on todo$ lo$ na-egadore$(((
/omo ya se ha podido )er, muchos de los efectos de Kltima *eneracin
mostrados no funcionan i*ual, o no funcionan en absoluto con todos los
na)e*adores. [Zu hacer entonces para conse*uir tablas cuyas l.neas de
bordes se )ean siempre bien\ &ues la Knica solucin es usar una tabla sin
bordes. &ero si utili!ando atributos de tabla para poner l.neas de bordes donde
queramos hay problemas con al*unos na)e*adores, la solucin es utili!ar otros
recursos del 'TML que sean admitidos por todos. Eo es nin*una solucin
m+*ica: solamente tienes que crear un *r+fico con un punto "preferiblemente
cuadrado% del color y *rosor que se quiera dar a las l.neas... y listo.
Lupon*amos que queremos conse*uir con una tabla representar un recuadro
con bordes rojos. &ara ello, utili!ando cualquier editor de *r+ficos creamos un
fichero que conten*a un punto de color rojo. Lolamente uno, ser+ casi in)isible.
Eo se necesita m+s. Le llamaremos rojo6gi%
*;emplo de recuadro con $ngulos rectos=
7 este ser9a el cdigo necesario%
<table /idt-6")++" -ei0-t6">+"
cellspacin06"+" cellpaddin06"+" border6"+" b0color6"V=a?da>"
ali0n6"center">
<tr>
<td ro/span6")" /idt-6"1" -ei0-t6">+">
<im0 src6"roPo!0i3" /idt-6"1p9" -ei0-t6">+" border6"+"
alt6""></td>
57
<td colspan6"*" -ei0-t6"1">
<im0 src6"roPo!0i3" /idt-6")++" -ei0-t6"1" border6"+"
alt6""></td>
<td ro/span6")" /idt-6"1">
<im0 src6"roPo!0i3" /idt-6"1p9" -ei0-t6">+" border6"+"
alt6""></td>
</tr>
<tr>
<td colspan6"*" ali0n6"center" -ei0-t6"*J">
<3ont color6"/-ite"><b>EPemplo de recuadro con n0ulos
rectos!</b></3ont></td>
</tr>
<tr>
<td colspan6"*" -ei0-t6"1">
<im0 src6"roPo!0i3" /idt-6")++" -ei0-t6"1" border6"+"
alt6""></td>
</tr>
</table>
/omo se puede )er, el truco consiste en definir celdas alrededor de la celda que
lle)a el te(to. -stas celdas que rodean a la principal solamente contienen el
fichero *r+fico con el punto. &ara conse*uir que apare!can las l.neas, slo hay
que "estirar" el punto contenido en nuestro fichero *r+fico rojo6gi%. -sto nos
permite "dibujar" las l.neas que se quieran y donde se quieran, sin problemas de
compatibilidad, ya que estos atributos del elemento ;$MO> son completamente
estandari!ados "por lo menos de momento%. 4.jarse en que adem+s de atributos
propios del elemento $MO tambin se utili!a una instruccin de estilo:
:idt7BC=$;C para ase*urar un *rosor m.nimo de la l.nea. -ste es el aspecto de
la misma tabla con los bordes )isibles:
2ertical
iz<uierda
Horizontal arriba
2ertical
derecAa
*;emplo de recuadro
con $ngulos rectos=
Horizontal aba;o
GGGGGGGGGGGGGGGGGGGG
tili!ando una tcnica parecida, tambin se pueden conse*uir recuadros con las
esquinas redondeadas. 9l i*ual que en el anterior ejemplo, es necesario tener un
*r+fico pre)iamente, pero este dar+ al*o m+s de trabajo. /on cualquier editor de
*r+ficos "el "&aint" de Windo2s, por ejemplo% se *enera un c.rculo del color que
se quiera, y con el borde transparente o de otro color. 9 continuacin lo cortas en
cuatro porciones, como una tarta, y *uardas cada tro!o con un nombre
cualquiera, por ejemplo, an*ulo7, an*ulo5, etc. 9s.

-ecuadro con $ngulos redondeados

R este es el cdi*o necesario:
5
<table border6"+" cellspacin06"+" cellpaddin06"+">
<tr>
<td b0color6"VDDE+2%" /idt-6";+"><im0 src6"an0ulo1!0i3" /idt-6";+"
-ei0-t6";+">
<td b0color6"VDDE+2%">
<td b0color6"VDDE+2%" /idt-6";+"><im0 src6"an0ulo;!0i3" /idt-6";+"
-ei0-t6";+">
</tr>
<tr>
<td b0color6"VDDE+2%" /idt-6";+">
<td b0color6"VDDE+2%">1ecuadro con n0ulos redondeados
<td b0color6"VDDE+2%" /idt-6";+">
</tr>
<tr>
<td b0color6"VDDE+2%" /idt-6";+"><im0 src6"an0ulo*!0i3" /idt-6";+"
-ei0-t6";+">
<td b0color6"VDDE+2%">
<td b0color6"VE>E?2D" /idt-6";+"><im0 src6"an0ulo)!0i3" /idt-6";+"
-ei0-t6";+">
</tr>
</table>
Cdigos 7e;adeciales de color
-stos cdi*os de color se pueden utili!ar como )alor de atributo en los
elementos ;4NET /NLN#> y ;FN@R FO/NLN# 4O/NLN# T-MT L$ET
VL$ET 9L$ET>. 9l*unos no funcionar+n en ciertos )isuali!adores, as. como si
Windo2s no est+ confi*urado con 5H6 colores al menos.
La codificacin de estos colores est+ basada en me!clas crom+ticas #OF "#-@
O#--E FL-%, es decir, se me!clan ciertas cantidades de los tres colores
b+sicos "rojo )erde y a!ul%, para conse*uir el color deseado.
5!
La cantidad de cada color est+ definida por el cdi*o que se utilice, que tiene
seis d.*itos en he(adecimal. Li se corta en 0 *rupos de dos de i!quierda a
derecha, se obtendra la cantidad "en he(adecimal% de cada color.
La sinta(is para cambiar el fondo de la p+*ina "bacS*round% a color rojo es:
;FN@R FO/NLN#<U44DDDD>.
3i$ta de '+digo$ 482
6,ite rgbCP::::::
4ed rgbCP::""""
8reen rgbCP""::""
2lue rgbCP""""::
:agenta rgbCP::""::
)%an rgbCP""::::
Hello= rgbCP::::""
2la'I rgbCP""""""
1*ua#arine rgbCP7"3'!3
2aIerJ$ ),o'olate rgbCP563317
2lue Violet rgbCP!:5:!:
2ra$$ rgbCP'5&642
2rig,t 8old rgbCP3!3!1!
2ro=n rgbCP&62&2&
2rone rgbCP6753
2rone II rgbCP&67333
)adet 2lue rgbCP5:!:!:
)ool )opper rgbCP3!71!
)opper rgbCP'7333
)oral rgbCP::7:""
)orn 9lo=er 2lue rgbCP42426:
DarI 2ro=n rgbCP564"33
DarI 8reen rgbCP2:4:2:
DarI 8reen )opper rgbCP4&766*
DarI .li-e 8reen rgbCP4:4:2:
DarI .r',id rgbCP!!3263
DarI 5urple rgbCP71:7
DarI 7late 2lue rgbCP6'23*
DarI 7late 8re% rgbCP2:4:4:
DarI Tan rgbCP!76!4:
DarI Tur*uoi$e rgbCP7"!33'
DarI 6ood rgbCP55*42
Di# 8re% rgbCP545454
Du$t% 4o$e rgbCP56363
9eld$par rgbCP31!275
9irebri'I rgbCP*2323
9ore$t 8reen rgbCP23*23
6"
8old rgbCP637:32
8oldenrod rgbCP3'3'7"
8re% rgbCP6"6"6"
8reen )opper rgbCP527:76
8reen Hello= rgbCP!33'7"
Hunter 8reen rgbCP215*21
Indian 4ed rgbCP4*2:2:
K,aIi rgbCP!:!:5:
3ig,t 2lue rgbCP6"3!3!
3ig,t 8re% rgbCP&&&
3ig,t 7teel 2lue rgbCP::'3
3ig,t 6ood rgbCP*!62&6
3i#e 8reen rgbCP326332
:andarian .range rgbCP*4733
:aroon rgbCP*236'
:ediu# 1*ua#arine rgbCP3263!!
:ediu# 2lue rgbCP323263
:ediu# 9ore$t 8reen rgbCP6'*23
:ediu# 8oldenrod rgbCP*&*&&*
:ediu# .r',id rgbCP!37"3'
:ediu# 7ea 8reen rgbCP426:42
:ediu# 7late 2lue rgbCP7:""::
:ediu# 7pring 8reen rgbCP7:::""
:ediu# Tur*uoi$e rgbCP7"3'3'
:ediu# Violet 4ed rgbCP3'7"!3
:ediu# 6ood rgbCP&6"64
:idnig,t 2lue rgbCP2:2:4:
0a-% 2lue rgbCP2323*
0eon 2lue rgbCP4343::
0eon 5inI rgbCP::6*67
0e= :idnig,t 2lue rgbCP""""!6
0e= Tan rgbCP*'67!*
.ld 8old rgbCP6:'53'
.range rgbCP::7:""
.range 4ed rgbCP::24""
.r',id rgbCP3'7"3'
5ale 8reen rgbCP:'6:
5inI rgbCP'6::
5lu# rgbCP*&&3*&
Luart rgbCP3!3!:3
4i', 2lue rgbCP5!5!&'
7al#on rgbCP6:4242
7'arlet rgbCP61717
7ea 8reen rgbCP23*6
7e#iM7=eet ),o'olate rgbCP6'4226
7ienna rgbCP*6'23
61
7il-er rgbCP*6*:&
7I% 2lue rgbCP32!!66
7late 2lue rgbCP""7:::
7pi'% 5inI rgbCP::16&*
7pring 8reen rgbCP""::7:
7teel 2lue rgbCP236'*
7u##er 7I% rgbCP3'"3*
Tan rgbCP3'!37"
T,i$tle rgbCP3':3
Tur*uoi$e rgbCP&3*&*&
Ver% DarI 2ro=n rgbCP564"33
Ver% 3ig,t 8re% rgbCP636363
Violet rgbCP4:2:4:
Violet 4ed rgbCP6632!!
6,eat rgbCP33':
Hello= 8reen rgbCP!!6632
Eor Du 7a& Due usar cdigos?
-(isten di)ersos sistemas operati)os dentro del mundo de los ordenadores.
-stos sistemas no son otra cosa que unos pro*ramas especiales que se
ejecutan inmediatamente despus de encender el ordenador, y son los que se
encar*an de darle ")ida" a la m+quina.
62
?unto con estos pro*ramas, los ordenadores car*an en memoria unas tablas
especiales que coinciden con los caracteres que tiene el teclado y al*unos m+s
que no est+n en el mismo, pero que se pueden escribir en pantalla por otros
medios.
-stas tablas, desafortunadamente, no son siempre las mismas, y )ar.an de un
sistema a otro, de una marca de ordenador a otra, y por supuesto, de un idioma
a otro. &or ejemplo, no se )en i*ual las letras con acentos desde un &/ que
desde un M9/intosh, o una terminal E$M, si las escribimos directamente desde
el teclado.
@ado que el 'TML pretende ser un len*uaje uni)ersal, y que una p+*ina debe
)erse como su creador desea, sin importar si estamos ante un ordenador que
"habla" en in*ls o en espaAol, o que tiene tal o cual sistema operati)o, se ha
creado una tabla de caracteres "conflicti)os" "en realidad est+n todos, pero
*eneralmente slo se usa para caracteres especiales% que se escriben con un
cdi*o en lu*ar de pulsar la tecla que lo contiene directamente.
&or ejemplo, CPC se escribir+:
]EtildeY o bien ]U5DBY
-sto habr+ que hacerlo con todos los caracteres que no sean las letras del
alfabeto "mayKsculas y minKsculas%, los nKmeros y unos pocos si*nos, como el
punto, la coma, el *uin y al*unos otros. 9 este conjunto de caracteres, comKn
para todos los sistemas, se le denomina cdi*o .(CII, y desde lue*o hay que
codificar todas las letras acentuadas, eAes, cedillas, etc., etc.
/omo se puede )er, la tabla tiene una columna con el car+cter deseado se*uida
de su cdi*o numrico en base decial, una descripcin del car+cter y despus
un nombre corto "una especie de alias% que para los m+s habituales se lle*an a
memori!ar, y para cosas cortas, ayudan. Eo todos tienen ese nombre corto, y
esos hay que escribirlos con el cdi*o numrico.
Tabla de cdigos de caracteres
)ara'ter )+digo De$'rip'i+n 1lia$
Q RP33M 6errar e(clamacin GG
D RP34M 3obles comillas GG
P RP35M +igno de nLmero GG
63
S RP36M 3lar GG
N RP37M Tanto por ciento GG
T RP24"M Tanto por mil GG
R RP3M &mpersand amp
U RP3!M &pstroJe GG
I RP4"M 6errar parOntesis GG
K RP41M &brir parOntesis GG
V RP42M &sterisco GG
W RP43M +igno m$s GG
H RP44M 6oma GG
G RP45M 4uin GG
= RP46M 5unto GG
@ RP47M 'arra de di#isin GG
" G ! RP4M G RP57M 39gitos del al "G! GG
% RP5M 3os puntos GG
M RP5!M 5unto 8 coma GG
> RP6"M )enor GG
> RP6"M )enor lt
C RP61M Igual GG
? RP62M )a8or GG
? RP62M )a8or gt
X RP63M 6errar interrogacin GG
Y RP64M &rroba GG
& G / RP65M G RP!"M 1etras &G/ GG
Z RP!1M 6errar corcAete Iiz<uierdoK GG
[ RP!2M 'arra in#ersa GG
\ RP!3M &brir corcAete GG
] RP!4M 6ircunJle;o GG
^ RP!5M +ubra8ado GG
_ RP!6M &cento agudo GG
a G z RP!7M G RP122M 1etras aGz GG
` RP123M &brir lla#e GG
a RP124M 'arra #ertical GG
b RP125M 6errar lla#e GG
64
c RP126M Tilde GG
RP16"M *spacio sin separacin nbsp
d RP161M &brir e(clamacin ie(cl
e RP162M 6enta#o cent
f RP163M 1ibra *sterlina pound
g RP164M +igno de di#isa general curren
h RP165M 7en 8en
i RP166M 'arra #ertical partida IpipeK br#bar
j RP167M +eccin sect
k RP16M 3iOresis uml
l RP16!M 6op8rigAt cop8
m RP17"M 3oBa ordJ
n RP171M &brir comillas Jrancesas la<uo
o RP172M ,o Is9mbolo lgicoK not
RP173M 4uin dObil sA8
p RP174M -egistrado reg
q RP175M )acrn macr
r RP176M 4rados deg
s RP177M )$sGmenos plusmn
t RP17M 3os super9ndice sup2
u RP17!M Tres super9ndice sup3
v RP1"M &cento agudo acute
w RP11M )icro micro
x RP12M :in de p$rraJo para
y RP13M 5unto medio middot
z RP14M 6edilla cedil
{ RP15M 0no super9ndice sup1
| RP16M 4Onero masculino ordm
} RP17M 6errar comillas Jrancesas ra<uo
~ RP1M 0n cuarto Jrac14
RP1!M 0n medio Jrac12
RP1!"M Tres cuartos Jrac34
RP53!M 0n octa#o GG
RP54"M Tres octa#os GG
65
RP541M 6inco octa#os GG
RP542M +iete octa#os GG
RP1!1M &brir interrogacin i<uest
RP1!2M & ma8LsculaH acento gra#e &gra#e
RP1!3M & ma8LsculaH acento agudo &acute
RP1!4M & ma8LsculaH acento circunJle;o &circ
RP1!5M & ma8LsculaH tilde &tilde
RP1!6M & ma8LsculaH diOresis &uml
RP1!7M & ma8LsculaH anillo &ring
RP1!M &* ma8Lscula &*lig
RP1!!M 6 cedilla ma8Lscula 6cedil
RP2""M * ma8LsculaH acento gra#e *gra#e
RP2"1M * ma8LsculaH acento agudo *acute
RP2"2M * ma8LsculaH acento circunJle;o *circ
RP2"3M * ma8LsculaH diOresis *uml
RP2"4M I ma8LsculaH acento gra#e Igra#e
RP2"5M I ma8LsculaH acento agudo Iacute
RP2"6M I ma8LsculaH acento circunJle;o Icirc
RP2"7M I ma8LsculaH diOresis Iuml
RP2"M *tA ma8Lscula *TH
RP2"!M *Be ma8Lscula ,tilde
RP21"M O ma8LsculaH acento gra#e Ogra#e
RP211M O ma8LsculaH acento agudo Oacute
RP212M O ma8LsculaH acento circunJle;o Ocirc
RP213M O ma8LsculaH tilde Otilde
RP214M O ma8LsculaH diOresis Ouml
RP215M +igno de multiplicacin times
RP216M O barrada ma8Lscula OslasA
RP217M 0 ma8LsculaH acento gra#e 0gra#e
RP21M 0 ma8LsculaH acento agudo 0acute
RP21!M 0 ma8LsculaH acento circunJle;o 0circ
RP22"M 0 ma8LsculaH diOresis 0uml
RP221M 7 ma8LsculaH acento agudo 7acute
RP222M THO-, ma8Lscula THO-,
66
RP223M 'eta minLscula szlig
RP224M a minLsculaH acento gra#e agra#e
$ RP225M a minLsculaH acento agudo aacute
RP226M a minLsculaH acento circunJle;o acirc
RP227M a minLsculaH tilde atilde
RP22M a minLsculaH diOresis auml
RP22!M a minLsculaH anillo aring
RP23"M ae m9nuscula aelig
RP231M c cedilla minLscula ccedil
- RP232M e minLsculaH acento gra#e egra#e
O RP233M e minLsculaH acento agudo eacute
RP234M e minLsculaH acento circunJle;o ecirc
RP235M e minLsculaH diOresis euml
RP236M i minLsculaH acento gra#e igra#e
9 RP237M i minLsculaH acento agudo iacute
RP23M i minLsculaH acento circunJle;o icirc
RP23!M i minLsculaH diOresis iuml
RP24"M etA minLscula etA
B RP241M eBe minLscula ntilde
RP242M o minLsculaH acento gra#e ogra#e
RP243M o minLsculaH acento agudo oacute
RP244M o minLsculaH acento circunJle;o ocirc
RP245M o minLsculaH tilde otilde
RP246M o minLsculaH diOresis ouml
RP247M +igno de di#isin di#ide
RP24M o barrada minLscula oslasA
RP24!M u minLsculaH acento gra#e ugra#e
L RP25"M u minLsculaH acento agudo uacute
RP251M u minLsculaH acento circunJle;o ucirc
RP252M u minLsculaH diOresis uuml
RP253M 8 minLsculaH acento agudo 8acute
RP254M tAorn minLscula tAorn
RP255M 8 minLsculaH diOresis 8uml
RP364 *uro euro
67
RP""M 3istinto de ne
RP"4M )enor o igual <ue le
RP"5M )a8or o igual <ue ge
RP73"M -adical radic
RP46M Omega GG
RP5!3M :lecAa arriba uarr
RP5!5M :lecAa aba;o darr
RP5!2M :lecAa iz<uierda larr
RP5!4M :lecAa derecAa rarr
RP5!6M :lecAa iz<Gder Aarr
RP47"M ,| GG
RP!65"M :lecAa ar GG
RP!65M :lecAa de GG
RP!66"M :lecAa ab GG
RP!66M :lecAa iz GG
RP!632M 6uadrado lleno GG
RP!633M 6uadrdo #acio GG
RP!642M )ini cuadrado lleno GG
RP!643M )ini cuadrado #acio GG
RP!67!M 5unto lleno GG
RP!675M 5unto #acio GG
RP!674M -ombo #acio loz
Creacin de enlaces 5lin+s,6
6
-l si*uiente es sin duda el elemento m+s importante del 'TML, ya que permite
realmente "na)e*ar" por uno o )arios documentos, que pueden residir en
cualquier parte, pareciendo que siempre se esta en el mismoY a esto se le llama
7i$erte;to ya que con esta posibilidad, en realidad, el documento puede ser
infinito...
-n efecto, para la persona que este leyendo sobre un determinado tema, no hay
diferencias ostensibles que le ha*an notar dnde est+ el documento que lee.
&ara el lector, todo parece un mismo documento, cuando en realidad,
probablemente el conjunto de lo que lee est+ repartido por medio mundo, o en
un plano m+s modesto, el documento le.do puede estar compuesto en realidad
por )arios cientos de p+*inas que "saltan" de unas a otras sin notarlo.
Todo esto lo consi*ue el elemento ;.> "por .nchor, en in*ls < ancla o punto de
anclaje%. -n lo sucesi)o se le llamara enlace o simplemente lin+ "en in*ls
linS<eslabn o enlace%.
&ero se*uramente se pre*untar+ qu es eso de un "linS". &ues un linS es un
+rea de la pantalla, que puede contener una o )arias palabras o una ima*en,
que es "sensible" al puntero del ratn, y al ponerlo sobre ella y pulsar el botn
i!quierdo el )isuali!ador llamar+ a la p+*ina que tiene asi*nada el linS.
'abitualmente por defecto los )isuali!adores seAalan un +rea linSada
subray+ndola, si es te(to, o ponindole un borde si es una ima*en, ambas cosas
en color a!ul. &or supuesto, eso se puede cambiar en las confi*uraciones de
)isuali!ador. Li no se desea que apare!ca el subrayado para mejorar la esttica
en al*unos casos, se puede parametri!ar con una instruccin de estilo.
Le escribir+:
<A H1E26"-ttp./////!miser8idor!es/mi3ic-ero!-tm"> LinA de prueba </A>!
R se )era as.:
1inE de prueba
Li lo que se desea es que apare!ca sin subrayado o de otro color, o ambas
cosas, se puede recurrir a una instruccin de estilo. 9s.:
<A H1E26"-ttp./////!miser8idor!es/mi3ic-ero!-tm"
stBle6"color.red7 te9t-decoration.none"7> LinA de prueba
</A>!
R se )era as.:
LinS de prueba
6!
"-sto puede que no funcione en al*unos na)e*adores anti*uos%
-l elemento 2.4 tiene dos atributos: HR#> y 9.M#.
-n el ejemplo de arriba al atributo '#-4 se le asi*na el )alor que aparece entre
comillas: C7tt$Q88:::6iserAidor6es8i%ic7ero67tC.
-l te(to sobre el que se monta el enlace es Lin+ de $rueba y reali!a un linS con
el fichero i%ic7ero67t que est+ en el ser)idor :::6iserAidor6es.
-sta forma de escribir la ruta del linS de forma completa, se utili!a cuando hay
que saltar de una m+quina a otra, si el enlace es para otra p+*ina del propio
ser)idor es suficiente escribir la ruta )irtual corta: 8i%ic7ero67t o bien:
8otroRdirectorio8i%ic7ero67t se*Kn proceda.
/omo se ha )isto, el punto de enlace se reali!a en el te(to escrito antes del
cierre del elemento 28.4, pero tambin puede hacerse con una ima*en
cualquiera, que ir.a en lu*ar del te(to, incluso se puede poner el te(to junto con
una ima*en. &or ejemplo para hacer un linS que nos lle)e al .ndice desde una
bola roja, se escribe:
Ir al Rndice <A H1E26"indice!-tm"> <im/ -#c!"0o1.#o2.3/i4"> </A>!
R este sera el resultado:
Ir al 9ndice
9l i*ual que el te(to aparece subrayado en a!ul cuando forma parte de un
enlace, los *r+ficos reciben un borde a!ul alrededor de toda la ima*en, lo que a
)eces puede resultar poco esttico. -sto tambin tiene solucin, pero aqu. se
hace en la instruccin de la ima*en:
Ir al Rndice <A H1E26"indice!-tm"> <im0 src6"bolaroPa!0i3" 0o#de#!5>
</A>!
R este sera el resultado:
Ir al 9ndice
-l )alor de los atributos hay que escribirlos -M9/T9M-ET- como se deba. -n
el ejemplo anterior no funcionar.a el linS si se escribiera :::6iserAidor6es en
mayKsculas o con al*una otra diferencia, eso es un nombre de m+quina y ser.a
interpretado como NT#9 m+quina.
-sto es aplicable a todos los par+metros: serAicio "http:11% serAidor
"222.miser)idor.es% y %ic7ero "mifichero.htm%.
7"
@entro de los par+metros pasados a '#-4, se podr+ )er que al principio se
pone 7tt$Q88, esto es, el tipo de ser)icio al que el )isuali!ador )a a llamar, y hay
)arios :
7er-i'io De$'rip'i+n !"e#plo !Fe'to
,ttp:// +er#icios WWW >& H-*:CDAttp%@@=u#=es@D? WWW>@&? WWW
Ftp:// +er#icios :T5 >& H-*:CDJtp%@@Jtp=u#=es@D?:T5>@&? :T5
ne=$:// +er#icios ,*W+ >& H-*:CDnes%@@nes=u#=es@D?,*W+>@&? ,*W+
#ailto:// +er#icios *Gmail >& H-*:CDmailto%;acYu#=es@D?*Gmail>@&? *Gmail
File:///)C :icAero local >& H-*:CDindice=Atm@D?:icAero>@&? :icAero
9dem+s de '#-4, el elemento ;9> puede tener otro atributo: T.R)#T. Le
utili!a para ordenar la apertura de otra )entana del )isuali!ador con la p+*ina
que se desee. Le escribir+:
<A H1E26"indice!-tm" TA&ET6"5entana-;"> </A>
-sta instruccin mostrar+ la p+*ina indice67t pero con otra )entana del
)isuali!ador, es decir tendremos lan!ado el )isuali!ador S Aeces.
@el mismo modo, el atributo T.R)#T puede utili!arse para salir de una pantalla
compuesta de frames. -n efecto, si estamos en una pantalla con, por ejemplo,
dos frames, cualquier linS in)ocado desde cualquiera de ellos, hace que la
p+*ina llamada apare!ca en ese mismo frame. &ara )ol)er a una pantalla
"normal" sin frames, se puede escribir un linS con la sinta(is si*uiente:
<A H1E26"indice!-tm" TA&ET6"Uparent"> </A>
-(isten otros )alores para T9#O-T:
T148!T;<NblanI<% 5ara <ue el enlace se muestre en una nue#a #entana #ac9a=
TambiOn puede darse un nombre cual<uiera con el mismo eJecto=
T148!T;<N$elF<% 5ara mostrar el enlace en la misma #entana o Jrame <ue lo reJerencia
I#alor por deJectoK=
T148!T;<Ntop<% *l documento solicitado se cargar$ en la pantalla actualH ocupando
toda la #entana 8 destru8endo la estructura de Jrames anteriorH si e(iste=
71
-l atributo HR#> sir)e para enla!ar con otro documento, que puede estar en un
ser)idor o ser un fichero local, pero que siempre se nos presentar+ desde la
primera l.nea del mismo.
-l atributo 9.M# se utili!a para definir al*o as. como "un punto de aterri!aje" en
cualquier l.nea del documento de destino, de forma que nos aparecer+ en
pantalla desde la l.nea deseada y no desde el principio. -sto es muy Ktil cuando
se trata de documentos lar*os di)ididos en secciones.
Le escribir+ as.:
!n el do'u#ento a'ti-o:
<A H1E26"-ttp./////!miser8idor!es/mi3ic-ero!-tmVpunto1"> Ir al punto
1</A>
!n el do'u#ento de$tino:
<A ,AME6"punto1"></A>
E9M- tambin puede utili!arse para saltar de una l.nea a otra dentro de un
mismo documento. Le escribir+ as.:
3entro del documento acti#o !n la l@nea de partida:
<A H1E26"Vpunto1">Ir al punto 1</A>
*n la l9nea de destino
<A ,AME6"punto1"></A>
/omo se ha )isto en el cuadro de arriba, es posible en)iar un e,mail desde un
linS con la instruccin:
;9 '#-4<"mailto:jac=u).es">-n)iar e,mail;19>.
/on esta sinta(is se in)oca al cliente de correo predeterminado para que abra
una )entana con la direccin deseada ya escrita. Li adem+s se quiere que dicha
)entana se abra con el asunto "subject% y el te(to "body% ya escritos se puede
conse*uir as.:
>& H-*:CDmailto%;acYu#=esXRsub;ectC&sunto de pruebaRbod8CTe(to de
pruebaD?*n#iar eGmail>@&?
72
/on los linSs, al i*ual que con los formularios, es posible mo)erse usando la
tecla de tabulacin, para conse*uir que el enfoque salte de un linS a otro en un
cierto orden. &ara ello se utili!a el atributo tabinde;.
<A HREF="tablas.htm" tabindex="2">Tablas</A>
<A HREF="imagen1.htm" tabindex="3">Imgenes</A>
<A HREF="body.htm" tabindex="1">Body</A>
-sto solamente funciona con )ersiones recientes de na)e*adores. Ntro atributo
reciente de los linSs es title que permite escribir una descripcin del linS sin
necesidad de pulsar en l, simplemente poniendo encima el puntero del ratn.
&or ejemplo:
<A HREF="tablas.htm" title="Saltar a la seccin de tablas">Tablas</A>
(e debe saber Due666
-l te(to que se pon*a despus del s.mbolo L puede ser cualquiera,
siempre que no ten*a espacios en blanco, caracteres especiales ni
caracteres codificados, y por supuesto, que no est repetido en el mismo
documento de destino.
Li en el documento de destino no e(iste el punto definido en el
documento de ori*en, el )isuali!ador presentar+ en pantalla la Kltima l.nea
del mismo.
/uando se ha*a un linS, es preferible utili!ar direcciones relati)as. Li se
utili!an direcciones absolutas y despus se tienen que mo)er los ficheros
por cualquier ra!n, se tendr+n que modificar todas las direcciones.
Li al hacer un linS, despus del nombre de la m+quina no se pone el
nombre de un fichero, por defecto el ser)idor entiende que se le pide la
"home pa*e" "p+*ina inicial% de ese directorio. Oeneralmente "aunque
depende de la confi*uracin del ser)idor% el fichero inicial de un directorio
suele ser inde(.htm o default.htm
Li un ser)idor no tiene definida p+*ina inicial, simplemente mostrar+ una
lista de todos los ficheros y directorios que ten*a en el directorio definido
como ra.! si el ser)idor tiene acti)ada la opcin de listar directorios, en
caso contrario, dar+ un error.
Li despus de la direccin de la m+quina a la que le se hace el linS en
lu*ar de un nombre de fichero se pone el de un directorio, *eneralmente
el ser)idor s mostrar+ un simple listado de los ficheros y directorios que
ste conten*a si el ser)idor tiene acti)ada la opcin de listar directorios,
en caso contrario, dar+ un error.
73
Eo slo se puede montar el linS sobre un te(to, tambin se puede hacer
sobre una ima*en cualquiera. -s decir, despus del linS y antes de ;19>
se puede poner lo que se quiera.
-l arte de escribir buen 'TML reside en dar una buena estructura a la
informacin. Liempre que se pueda huir de crear p+*inas muy lar*as. Le
crean cuantas se necesiten, con buena estructura y enl+!arlas con
cuantos linSs sean precisos.
#ecordar: si el trabajo 'TML no )a a residir en un ser)idor en red, y se ha
utili!ado direcciones absolutas, al hacer un linS, no empe!ar con aquello
de: C7tt$Q886666C. Eo funcionar+.
Li se continua deseando poner direcciones absolutas con ficheros
locales, se tendr+ que ser as. %ileQ888CQ8MI/IR#CT0RI08i%ic7ero67t
@espus de C "que puede ser 9, F, @ o la unidad de disco que se quiera%
f.jarse en que las barras que separan los directorios y ficheros son barras
a la derec7a.
Insertar i-genes
$nsertar im+*enes en un documento permite crear p+*inas mucho m+s
atracti)as. Le*Kn el tipo de *r+ficos utili!ado se pueden conse*uir efectos
realmente sorprendentes.

&ara insertar una ima*en en un documento 'TML se utili!a el elemento 2IM)4.
-ste elemento puede ir acompaAado de los atributos (RC .LT I(M.E .LI)9
WI/TH H#I)TH !0R/#R ?(E.C# H(E.C#. /on las nue)as
implementaciones que Eetscape hace del elemento, se consi*uen efectos de
ima$en flotante y por tanto se ha hecho necesario dotar al elemento ;!R> del
atributo CL#.R.
Las im+*enes utili!adas pueden estar en formato O$4 o ?&O. -stos formatos son
interpretados directamente por el na)e*ador.
La diferencia entre estos dos formatos es su ni)el de compresin. -n efecto, el
?&O tiene una compresin mucho mayor que el O$4, por lo que suele ser el
formato m+s utili!ado en el mundo 2eb, donde siempre se debe perse*uir que
las p+*inas sean lo m+s li*eras posible.
&or contra, cuanta mayor compresin ten*a un *r+fico menor calidad se
consi*ue, pero para usos *enerales el ?&O es perfectamente )+lido.
74
Le puede usar cualquier otro formato como el M&O o el 9V$ "ambos de ).deo%,
pero entonces el )isuali!ador llamar+ a un pro*rama au(iliar, que pre)iamente le
habr+s definido, para que sea ste el que )isualice el fichero.
La desventaja de las imgenes en formatos no tratados por el propio
visualizador es que no se vera el texto junto con la imagen, y por tanto no
se podra imprimir la pgina compuesta. para evitar esto, se utilizan los
llamados "plug-in" que consisten en pequeos programas que permiten
llamar a aplicaciones especficas ejecutndose como ventanas del
navegador. !n ejemplo muy com"n son los fic#eros .pdf.
9l*unos na)e*adores no son capaces de tratar im+*enes, o aunque el
na)e*ador s. pueda, tal )e! el cliente est na)e*ando en modo solo te(to, es
decir, sin )er las im+*enes, lo que permite mo)erse m+s r+pido. &ara estos
casos se puede recurrir al atributo .LT "por alternati)o% para definir un te(to que
aparecer+ en lu*ar de la ima*en. -sto es importante cuando una ima*en,
adem+s de ser un elemento decorati)o o informati)o, soporta un linS. -l uso de
.LT es recomendado por la W0.
-jemplos del uso de ;$MO>:
Iagen alineada a la i*Duierda 5$or de%ecto,
;IM) (RC<"su*eren.*if">te(to te(to te(to te(to
te(to te(to te(to te(to
te(to te(to te(to te(to te(to te(to te(to te(to te(to te(to te(to
Iagen con un te;to alternatiAo
Lir)e para que, si no es posible car*ar la ima*en, apare!ca un te(to en su lu*ar.
Tambin se utili!a para que al colocar el puntero del ratn sobre la ima*en, sin
pulsar, apare!ca el te(to. &ara )erlo se tiene que deshabilitar la opcin de car*ar
im+*enes del )isuali!ador "slo es posible con Eetscape%.
;$MO L#/<"su*eren.*if" .LT<"9Z$ V9 E9 $M9O-E">
75
Iagen alineada a la i*Duierda6Te;to alineado arriba
;$MO L#/<"su*eren.*if" .LI)9BT0E> te(to te(to te(to te(to te(to
te(to e(to te(to te(to te(to te(to te(to
te(to te(to te(to te(to te(to te(to te(to te(to te(to te(to
Iagen alineada a la i*Duierda6Te;to alineado abajo
;$MO L#/<"su*eren.*if" .LI)9B!0TT0M> te(to te(to te(to te(to te(to
Iagen alineada a la i*Duierda6Te;to alineado al centro
;$MO L#/<"su*eren.*if" .LI)9BMI//L#> te(to te(to te(to te(to te(to
te(to te(to te(to te(to te(to te(to te(to te(to te(to
Iagen alineada a la i*Duierda6Te;to alineado a la derec7a de la iagen
;$MO L#/<"su*eren.*if" .LI)9BL#>T> te(to te(to te(to te(to te(to
te(to te(to te(to te(to te(to te(to te(to
76
Iagen alineada a la i*Duierda6Te;to enAolAiendo la iagen
;$MO L#/<"su*eren.*if" .LI)9BL#>T> te(to te(to te(to te(to te(to 2!R
CL#.R4 te(to te(to te(to te(to te(to
Iagen alineada a la derec7a6Te;to alineado a la i*Duierda de la iagen
;$MO L#/<"su*eren.*if" .LI)9BRI)HT> te(to te(to te(to te(to te(to
Li el )isuali!ador no soporta esto, hay un truco para conse*uir al*o parecido:
;T9FL-> ;T#>;T@>te(to te(to te(to te(to te(to te(to te(to te(to te(to te(to
te(to te(to;1T@>;T@ ali*n<center>;$MO L#/<"su*eren.*if">;1T@>;1T#>
;1T9FL->
te(to te(to te(to te(to te(to te(to te(to te(to te(to te(to te(to
te(to te(to te(to te(to te(to
Iagen rediensionada a -s6Te;to alineado a la derec7a de la iagen
;$MO L#/<"su*eren.*if" .LI)9BL#>T WI/THBSTS H#I)THBUS > te(to te(to
te(to te(to te(!to te(to te(to te(to te(to
te(to.
9qu. la ima*en es la misma de los ejemplos anteriores, pero ha sido
redimensionada por el )isuali!ador. Lu tamaAo ori*inal es de 706(I6 puntos.
-ste es su aspecto al doble: 5J5(B5.
Iagen rediensionada a enos6Te;to alineado a la derec7a de la iagen
;$MO L#/<"su*eren.*if" .LI)9BL#>T WI/THBTV H#I)THBSI > te(to te(to
te(to
te(to te(to te(to te(to te(to te(to te(to te(to te(to
te(to te(to te(to te(to te(to te(to te(to te(to te(to te(!to te(to te(to
te(to te(to te(to te(to te(to.
9qu. la ima*en es la misma de los ejemplos anteriores, pero ha sido
redimensionada por el )isuali!ador. Lu tamaAo ori*inal es de 706(I6 puntos.
-ste es su aspecto a la mitad: JH(50
Consideraciones sobre WI/TH & H#I)TH
77
-stos dos atributos, adem+s de para )ariar el tamaAo de un *r+fico, tambin
pueden "casi deben% utili!arse con los )alores naturales del mismo. -s decir, que
no se pretende alterar las dimensiones del *r+fico. La raz$n estri%a en c$mo
funcionan los navegadores. &uando el navegador solicita una pgina y
comienza a reci%irla, lo primero que #ace es leer la ca%ecera, a
continuaci$n lee el c$digo del '()* y por "ltimo carga las imgenes que
contenga la pgina #aciendo nuevas conexiones al servidor para cada una
de ellas.
-sta forma de trabajar tiene como consecuencia, que si en el cdi*o del FN@R
no hay instrucciones sobre el espacio que hay que reser)ar en pantalla para
cada ima*en, cuando stas lle*uen en el Kltimo paso de la car*a de la p+*ina, el
te(to ya estar+ compuesto, pero al no saber el tamaAo de las im+*enes, no se
habr+ reser)ado el espacio adecuado para insertarlas, por lo que todo el te(to
ser+ despla!ado hacia abajo, con la consi*uiente prdida del formato ori*inal de
la p+*ina, ya que el na)e*ador no )a a recomponer el te(to que ya estaba
escrito.
Iagen alineada a la i*Duierda con arco6Te;to alineado a la derec7a de la
iagen
;$MO L#/<"su*eren.*if" 9L$OE<L-4T !0R/#RBV> te(to te(to te(to te(to te(to
Iagen alineada a la i*Duierda6Te;to alineado a la derec7a de la iagen6
#s$acios Aerticales & 7ori*ontales AacWos %or*ados6
te(to te(to te(to te(to te(to te(to te(!to te(to te(to te(to te(to te(to
;$MO L#/<"su*eren.*if"> 9L$OE<L-4T H(E.C#B=II ?(E.C#B3I> te(to
te(to te(to
Usar una iagen coo $unto de ontaje de un lin+
te(to te(to ;9 '#-4<"indice.htm">;$MO L#/<"su*eren.*if" >;19>te(to te(to.
/omo se puede )er, la ima*en aparece rodeada de un marco de color como es
habitual en los puntos de linS "en el te(to es el subrayado%. Li se quiere eliminar
el marco, se escribe:
.... $MO L#/<"su*eren.*if" FN#@-#<D >
Ma$eado de una iagen $ara usarla coo direccionador
7
;9 '#-4<"1c*i,bin1ima*emap1mimapa">;$MO L#/<"su*eren.*if" I(M.E>;19>
Li se mue)e el ratn por encima de la ima*en, se )er+ que en la )entanita de
estado del na)e*ador "en la parte inferior i!quierda de la )entana% aparecen
junto a un interro*ante unos nKmeros que cambian se*Kn mue)as el ratn. /on
cuidado intenta poner el puntero en la esquina superior i!quierda y en la inferior
derecha. Ver+s las cifras 7,7 y 706,I6, respecti)amente, que son las medidas en
puntos que tiene el *r+fico. /omo ya se habr+ supuesto, esto es un sistema de
coordenadas, y para que nuestra ima*en funcione como un menK direccionador,
lo que se necesita es que al*Kn elemento con)ierta esas coordenadas en una
direccin del estilo ya conocido: "http:11miser)idor.es1mifichero.htm".
-sto si*inifica que con un solo linS se puede obtener un enorme nKmero de
direcciones, tericamente tantas como pares de coordenadas tiene la ima*en.
-n la pr+ctica ser+n menos, ya que andar intentando atinar en el punto 77,05,
por ejemplo, es un poco en*orroso.
-(isten multitud de pro*ramas llamados mapeadores que parten la ima*en en
ima*inarios tro!os, y cada uno de ellos indica un linS con al*una parte. -stos
pro*ramas *eneran un fichero con todas las direcciones:

rect http:11miser)idor.es1mifichero7.htm 75,0H
rect http:11miser)idor.es1mifichero5.htm BD,I5
rect http:11miser)idor.es1mifichero0.htm 775,I6
-ste podr.a ser el aspecto del fichero del ejemplo, el llamado ia$a. -l
par+metro rect si*nifica rect+n*ulo, y nos indica que la ima*en ha sido troceada
en rect+n*ulos y las coordenadas indican la esquina superior i!quierda y la
inferior derecha. Tambin podr.a ser en c.rculos "circ% o pol.*onos "$ol&%.
#esto de instrucciones del ejemplo:
;9 '#-4<"1c*i,bin1ima*emap1mimapa">;$MO L#/<"su*eren.*if" I(M.E>;19>
La primera parte . HR#> ya se conoce, es un linS. @espus )iene un directorio:
cgi"bin. -ste es un directorio especial que tienen los ser)idores http, donde se
ejecutan los pro*ramas au(iliares del ser)idor, y al que normalmente slo puede
acceder el administrador del sistema. -n ese directorio hay un fichero llamado
iagea$ "se*Kn el sistema puede ser otro% que es un pro*rama que se
encar*a de leer tu fichero ia$a, capturar las coordenas que seAale el
puntero del ratn y ser)ir la direccin que tiene asociada, con lo que se acaba
obteniendo un linS normal. Ra por Kltimo, aparece I(M.E que es el que
con)ierte una simple ima*en en una potente herramienta.
7!
Llo queda por decir que el fichero ia$a tiene que estar en otro directorio
especial que tiene el ser)idor a estos efectos, y al que por supuesto, solo puede
acceder el administrador del sitema.
Todo esto es suponiendo que el ser)idor est+ en una m+quina E$M. Li reside
en un &/ con Windo2s o en un M9/ "que los hay%, se tendra que )er las
instrucciones concretas del pro*rama ser)idor. La forma de montar el mapa
puede )ariar de un pro*rama ser)idor a otro, pero la base de funcionamiento es
siempre la misma.
&ero, una )e! m+s, Eetscape ha propuesto una solucin mucho m+s simple: que
sea el propio )isuali!ador quien ha*a las )eces de pro*rama con)ersor. -n
efecto, un recurso tan bueno como los mapas, no debe depender de tener la
m+quina en red y de que haya un ser)idor http que atienda. 9dem+s, eso resta
portabilidad a los documentos locales y a los trabajos personales en disquete.
&ara ello se ha implementado el elemento M.E que acompaAar+ a $MO.
&or ejemplo, en la si*uiente ima*en, la mitad i!quierda nos en).a a indice.htm y
la mitad derecha a intro.htm. Mue)e el puntero del ratn hori!ontalmente sobre
la ima*en y obser)ar la )entanita de estado que hay en la parte inferior i!quierda
de la pantalla, se )era como cambia el nombre del linS.
Le escribe as.:
;M.E 9.M#<"nombre7">
;.R#. (H.E#<"rect" /NN#@L<"7,7,JH,I6" '#-4<"indice.htm">
;9#-9 L'9&-<"rect" /NN#@L<"J6,7,706,I6" '#-4<"intro.htm">
;1M9&>
;$MO L#/<"su*eren.*if" L-M9&<"Unombre7">
-n primer lu*ar se tiene el elemento M.E, que lo que est+ haciendo es definir
un mapa de coordenadas. Va acompaAado del atributo 9.M# que da nombre al
mapa. -s necesario nombrarlo porque podr.a haber m+s de uno en la misma
p+*ina, y e)identemente, sus nombres no deber+n repetirse.
9 continuacin se tiene el atributo .R#. que define las +reas de la ima*en.
"
-l par+metro (H.E#BCrectC indica la fi*ura *eomtrica que se esta utili!ando
para ello. 9l i*ual que con los otros mapas, puede ser rect circ y $ol&.
-l par+metro C00R/( f+cilmente se adi)ina que indica las coordenadas del
+rea, en este caso )rtice superior i!quierdo e inferior derecho, respecti)amente.
HR#> ya se sabe que hace: indica un linS con una p+*ina, pero esta )e! no )a
acompaAando al elemento ;9>, di*amos que es un atributo prestado.
'ay un +rea por cada linS definido. Li un +rea no se quiere que ten*a linS se
definir+ con 90HR#>.
IM) (RC tambin son conocidos: hacen que se )isualice la ima*en.
R por fin, U(#M.E dice qu mapa de coordenadas hay que aplicar a la ima*en.
9 una misma ima*en se le pueden aplicar distintos mapas si se desea. 4.jarse
en que nobre=, "el nombre del mapa% )a $recedido del s.mbolo L. -sto se
debe a que, en este caso, el mapa al que se hace referencia est+ en la misma
p+*ina que la instruccin $MO. &odr.a estar en otra, y en ese caso el s.mbolo
tendr.a que estar des$us del nombre de la p+*ina. &or ejemplo:
otra$agina67tLnobre=
/omo ya se ha dicho m+s arriba, hay tres fi*uras *eomtricas definibles para las
+reas: rect, circle y $ol&. -l rect+n*ulo ya se conoceY consiste en parejas de
coordenadas que indican los )rtices superior i!quierdo e inferior derecho
respecti)amente del +rea. &ara el c.culo "circ% son necesarios tres )alores: ;X&
r donde (,y es el par de coordenas que indican el punto donde est+ el centro del
c.culo, y r es el radio del c.rculo medido en puntos. &ara los pol.*onos "$ol&% se
necesitan tantas parejas de coordenadas como )rtices ten*a el pol.*ono,
procurando que la Kltima pareja quede unida a la primera, ya que la fi*ura debe
estar cerrada. Eo es obli*atorio que sean fi*uras re*ulares. -n el caso de que se
quiera emplear todo el *r+fico como +rea de enlace, es decir, un solo linS, se
puede emplear de%ault, y no es necesario indicar nin*una coordenada.
1
Co se escriben los %orularios ?
La base del formulario es el elemento 2>0RM4, y es el que define una !ona de
la p+*ina como formulario. -n una p+*ina puede haber )arias !onas definidas
como formulario, en cuyo caso es con)eniente darles distintos nombres a cada
uno. @entro de este elemento, que es un objeto, se insertan otros elementos,
que a su )e! son sub,objetos del objeto 4N#M, que son los que realmente
dibujan en pantalla los componentes del formulario. Le )er+ con detalle el
concepto de objeto en las secciones de pro*ramacin de esta *uia, ya que
ahora no lo necesitamos. 'ay tres clases de estos sub,objetos:
2I9EUT4
/ampos de entrada por teclado.
Fotones de seleccin.
/asillas de marca.
Fotones de proceso.
Fotones de iniciali!acin "reset%.
$m+*enes sensibles al ratn.
2(#L#CT4
Listas desple*ables de )alores.
Listas fijas de )alores.
2T#'T.R#.4
Ventanas de escritura libre.
-ste ser.a el m+s elemental de los formularios, con slo un campo y un botn de
en).o:
&rincipio del formulario
&rocesar
4inal del formulario
9nalicemos cmo se escribe:
;>0RM 9.M#<"M$^4N#ML9#$N" M#TH0/<"&NLT"
.CTI09<"http:11miser)er.midominio.mipais1c*i,bin1test5,c*i">
2
;$E&T E9M-<"campo7">
;$E&T TR&-<"submit" V9L-<"&rocesar">;14N#M>
-n la primera l.nea )emos el elemento de definicin de formulario: 2>0RM46 Va
acompaAado de tres atributos: 9.M#X M#TH0/ y .CTI09.
9.M#, e)identemente, se refiere al nombre que se le asi*ne al formulario. Eo
es obli*atorio, pero si el formulario )a a ser utili!ado en p+*inas 9L&, &'&, o
simplemente en VFLcript o ?a)aLcript, se necesitar+ un nombre, ya que el
formulario ser+ considerado como un objeto.
M#TH0/ se refiere al mtodo que emplearemos para en)iar los datos al
ser)idor, y pueden ser dos: E0(T y )#T. -l optar por uno u otro obedece a
complejas cuestiones de pro*ramacin basadas en la m+(ima lon*itud de
re*istro que puede en)iarseY cada uno usa un canal de salida distinto. -l que
soporta m+s lon*itud es &NLT, y ser+ el que utilicemos en casi todos los
ejemplos. Li el formulario solamente se utili!a para llamar a otras p+*inas, se
utili!a el mtodo O-T, y si se trata de en)io de datos &NLT.
4.jate en las )ariables QU#R1R(TRI9) e I9EUT. &or la primera lle*ar+n los
datos cuando se utilice M#TH0/B)#T y por la se*unda cuando es E0(T el
mtodo ele*ido.
.CTI09 se refiere a la accin que queremos que ejecute el formulario en un
ser)idor http o en local. /on el )alor del ejemplo
.CTI09BC7tt$Q88iserAer6idoinio6i$ais8cgi"bin8testS"cgiC se le est+
indicando que ejecute un pro*rama llamado testS"cgi que est+ en el directorio
8cgi"bin del ser)idor http iserAer6idoinio6i$ais
9dem+s de en)iar datos a un ser)idor, .CTI09 tambin puede reali!ar una
accin en local, por ejemplo traer una p+*ina:
Le escribe:
;4N#M M-T'N@<"&NLT" .CTI09<"indice.htm">
......
;14N#M>
-n este caso el formulario funcionar.a i*ual que un linS.
Ntra cosa que puede hacer .CTI09, y que adem+s tiene la )entaja de que no
ser.a preciso diseAar un /O$, es en)iar un e,mail "correo electrnico% a un
usuario o a una lista de usuarios. Los datos en)iados por el formulario, tendr+n
3
la forma que ya conocemos, pero una )e! recibidos por esta ).a, pueden ser
tratados con pro*ramas de edicin de te(to, y con)ertidos al formato que se
quiera.
Le escribe:
;4N#M M-T'N@<"&NLT" .CTI09<"mailto:mi,usuario=miser)idor,e,mail">
......
;14N#M>
Li no quieres complicarte la )ida con descodificaciones "depende de lo que se
)aya a hacer con los datos recibidos%, el na)e*ador puede remitirlos con un
formato m+s sencillo y ya descodificado. &ara ello slo hay que aAadir el
par+metro #9CT1E# con el )alor T#'T8EL.I9.
Le escribe as.:
;4N#M M-T'N@<"&NLT" .CTI09<"mailto:mi,usuario=miser)idor,e,mail"
-E/TR&-<"T-MT1&L9$E">
......
;14N#M>
#esumiendo: sin poner nin*un par+metro al elemento .CTI09 los datos te
lle*ar+n as.:
/9M&N7<-stoGesGuna]/9M&N5<demostracionGdeGformularios
y poniendo #9CT1E#BCT#'T8EL.I9C as.:
/9M&N7<-sto es una
/9M&N5<demostracion de formularios
9l i*ual que con el elemento ;9> es posible hacer que el asunto "subject% del e,
mail se reciba con el te(to que quieras, pero omitiendo la parte correspondiente
al cuerpo "body% del mismo, ya que en este caso el contenido del e,mail son los
campos del formulario:
;4N#M M-T'N@<"&NLT" .CTI09<
"mailto:mi,usuario=miser)idor,e,mail\]subject<asunto de prueba"
-E/TR&-<"T-MT1&L9$E">
......
4
;14N#M>
-sto funcionar+ siempre que en la m+quina del cliente haya instalado al*un
pro*rama que permita en)iar correo electrnico, si no es as. hay que recurrir a
un pro*rama /O$ o de otro tipo en el ser)idor que se encar*ue de hacerlo. Eo es
buena idea presuponer que todo el mundo tiene un cliente de correo instalado
en su m+quina.
+l elemento ,N-!.
I9EUT sin nin*Kn atributo define por defecto una )entana de escritura de 5D
caracteres de lon*itud por una l.nea de ancho:
Le escribe:
;4N#M> 2I9EUT4 ;14N#M>
;$E&T> admite )arios atributos:
(I@# define la lon*itud de la )entana de te(to.
M.'L#9)TH define la m+(ima lon*itud de la cadena que se puede escribir
dentro de la )entana.
9.M# define el nombre de la )entana "que en realidad es un campo dentro del
re*istro, que en conjunto, es el formulario%. Li escribes:
;4N#M> ;$E&T (I@#<7D M.'L#9)TH<7D 9.M#<"campo7">;14N#M>
/omo puedes comprobar, slo se pueden escribir 7D caracteres dentro de la
)entana, que tambin es de lon*itud 7D. Eo es obli*atorio que concidan ambos
)alores, puedes definir la )entana al )alor que quieras y la lon*itud de la cadena
puede ser mayor o menor.
?.LU# sir)e para que la )entana apare!ca con un )alor predeterminado, y no
)ac.a como hace por defecto:
5
'NL9
Le escribe:
;4N#M> ;$E&T ?.LU#<"'NL9"> ;14N#M>
-l )alor puede ser modificado o barrado por el usuario.
R#./09L1 Lir)e para que el )alor de la )entana, que contiene un )alor
predeterminado, no pueda ser modificado por el usuario.
'NL9
Le escribe:
;4N#M> ;$E&T V9L-<"'NL9" R#./09L1> ;14N#M>
Eo funciona en )ersiones anti*uas de los na)e*adores.
T1E#BT#'T -s el )alor por defecto de TR&-. &uede omitirse.
T1E#BE.((W0R/ para que el )alor predeterminado de la )entana est en
formato oculto:
Le escribe:
;4N#M> ;$E&T T1E#BCE.((W0R/C V9L-<"'NL9"> ;14N#M>
T1E#BHI//#9 define que el )alor predeterminado de la )entana y la )entana
misma estn en formato oculto:
Le escribe:
;4N#M> ;$E&T T1E#BCHI//#9C V9L-<"'NL9"> ;14N#M>
6
-sta opcin se utili!a cuando es necesario en)iar un )alor fijo al ser)idor, pero
no se desea que el usuario inter)en*a o que lo )ea. /$@9@N, esto no es un
formato encriptado, )iendo el documento fuente se puede saber el )alor de la
)entana.
T1E#B(U!MIT para *enerar un botn que al ser pulsado cierra la captura de
datos del formulario y procede a ejecutar lo definido en el atributo 9/T$NE que
ya conocemos.
&rocesar
Le escribe:
;4N#M M-T'N@<"&NLT" 9/T$NE<"http:11miser)er.midominio.mipais1c*i,
bin1test5,c*i">
;$E&T T1E#BC(U!MIT" ?.LU#<"&rocesar">;14N#M>
?.LU# puede acompaAar a LFM$T , y en este caso sir)e para definir el te(to
que queremos que ten*a el botn en su interior. Li se omite, por defecto el
)isuali!ador le da el )alor "Lubmit Zuery".
-(iste otro tipo llamado T1E#B!UTT09 que *enera un botn i*ual al *enerado
por el tipo submit, pero que no reali!a nin*una accinY es simplemente un botn
"muerto" en cuanto a acciones directas. Luele utili!arse para asociarle
instrucciones en ?a)aLcript o VFLcript mediante el e)ento onClic+.
Le escribe:
bin1test5,c*i">
;$E&T T1E#BC!UTT09" ?.LU#<"Eo hace nada">;14N#M>
7
T1E#BR#(#T para *enerar un botn que al ser pulsado iniciali!a todos los
componentes del formulario.
$niciali!ar
Le escribe:
bin1test5,c*i">
;$E&T T1E#BCR#(#T" ?.LU#<"$niciali!ar">;14N#M>
?.LU# puede acompaAar a #-L-T , y en este caso sir)e para definir el te(to
que queremos que ten*a el botn en su interior. Li se omite, por defecto el
)isuali!ador le da el )alor "#eset".
T1E#B>IL# -ste es un nue)o tipo que slo funciona con Eetscape 0.D o
superior, y sir)e para en)iar un fichero a una m+quina remota "hacer 4T&%, pero
no funciona solo, necesita de ciertos acompaAantes que hacen su uso un poco
m+s complicado:
9qu. hay que echar mano de un atributo parametri!ado de ;4N#M>:
#9CT1E#BCulti$art8%or"dataC para *enerar un botn que permitir+ buscar
un fichero en nuestra m+quina, ponerlo en una )entanita de entrada como las ya
conocidas "por tanto tanbin se puede escribir directamente el nombre del
fichero en lu*ar de buscarlo% y junto con un botn tipo submit en)iar el fichero.
-n)iar el fichero:
-n)iar f ichero
Le escribe:
;4N#M enct&$eBCulti$art8%or"dataC
9/T$NE<"ftp:11miser)idor1" M-T'N@<"&NLT">
-n)iar el fichero:
;$E&T E9M-<"mifichero" T1E#BC>IL#C4
;$E&T TR&-<"LFM$T" V9L-<"-n)iar fichero">;14N#M>
el botn *enerado aparece con el te(to "Fro2se.." y no sir)e de nada aAadirle el
par+metro V9L- para darle otro nombre, como se puede hacer con el botn de
tipo submit.

-n este ejemplo se har.a una cone(in al ser)icio 4T& *eneral de la m+quina
remota, pero se puede hacer a un directorio en particular de un usuario concreto.
Llo habr.a que cambiar la l.nea
9/T$NE<"ftp:11iserAidor1" M-T'N@<"&NLT">
y escribir:
9/T$NE<"ftp:11iusuarioYiserAidor1" M-T'N@<"&NLT">
Ntra forma m+s directa de hacer un 4T& en las dos direcciones, es desde la
)entana "Location" del )isuali!ador. La sinta(is de los par+metros de 9/T$NE
son )+lidos en esa )entana.
&or supuesto, todo esto si no tienes cuenta y permiso de escritura en la m+quina
remota, no sir)e para nada...
/omo ya se ha dicho antes, el atributo .CTI09 es capa! de en)iar el contenido
del formulario por correo electrnico, pero no slo es capa! de en)iar el
formulario: tambin puede adjuntar al e,mail un fichero cualquiera. Lo Knico que
hay que hacer es aAadirle un instruccin como la que acabamos de )er para el
4T&. 9s.:
;4N#M enct&$eBCulti$art8%or"dataC
9/T$NE<"mailto:mi,usuario=miser)idor,e,mail1" M-T'N@<"&NLT">
9djuntar el fichero:
;$E&T E9M-<"mifichero" T1E#BC>IL#C4
;$E&T TR&-<"LFM$T" V9L-<"9djuntar fichero">;14N#M>
T1E#BIM.)# hace que el )isuali!ador presente una ima*en que es sensible al
ratn. Lo que el formulario en).a al ser)idor es un re*istro cuyos campos son el
nombre definido para la ima*en se*uido de los par+metros 6;Bn 6&Bn donde n
son los nKmeros de las coordenas ; & del punto en el que estaba el ratn en el
momento del en).o. &ara presentar la ima*en se utili!a el atributo (RC del
elemento $MO. -ste ser.a un ejemplo de respuesta:
ima*en.(<BB]ima*en.y<7H
&rueba a pulsar en cualquier parte de esta ima*en:
Le escribe:
!
bin1test5,c*i">
;$E&T T1E#BIM.)# E9M-<"ima*en" (RC<"su*eren.*if">
;14N#M>
Los formularios que utilicen este tipo de recursos pueden prescindir del tipo
LFM$T, ya que el formulario se cierra con la ima*en.
T1E#BR./I0 *enera botones circulares que permiten seleccionar un )alor
predeterminado o acti)ar una opcin
&rocesar $niciali!ar
/lase 9 /lase F
Le escribe:
bin1test5,c*i">
;$E&T TR&-<"LFM$T" V9L-<"&rocesar">
;$E&T TR&-<"#-L-T" V9L-<"$niciali!ar">
/lase 9
;$E&T T1E#BCR./I0" E9M-<"clase" V9L-<"9">
/lase F
;$E&T T1E#BCR./I0" E9M-<"clase" V9L-<"F">;1form>
-n este ejemplo, los botones permiten seleccionar la clase 9, la clase F o
nin*una de las dos. Li se desea que por defecto un )alor est seleccionado, por
ejemplo clase F, hay que aAadir el par+metro CH#CG#/ despus del )alor:
... V9L-<"F" CH#CG#/>;1form>
T1E#BCH#CG!0' *enera casillas de marca que permiten seleccionar un )alor
predeterminado o acti)ar una opcin
/lase 9 /lase F
!"
Le escribe:
bin1test5,c*i">
/lase 9
;$E&T T1E#BCCH#CG!0'" E9M-<"clase" V9L-<"9">
/lase F
;$E&T T1E#BCCH#CG!0'" E9M-<"clase" V9L-<"F">;1form>
-n este ejemplo, las casillas de marca permiten seleccionar la clase 9, la clase
F, nin*una, o las dos. Li se desea que por defecto un )alor est seleccionado,
por ejemplo clase F, hay que aAadir el par+metro CH#CG#/ despus del )alor:
... V9L-<"F" CH#CG#/>;1form>
+l elemento /+L+&.
(#L#CT sin nin*Kn atributo define por defecto una lista desple*able de toda la
pantalla de alto y una columna de ancho:
Le escribe:
;4N#M> 2(#L#CT4 28(#L#CT4 ;14N#M>
/omo e)identemente esto no es muy pr+ctico, hay que parametri!ar el
elemento. -n primer lu*ar se le da nombre, ya que ste es un campo m+s del
formulario, la diferencia es que no hay que escribir en l sino esco*er un )alor
de los que nos muestre al desple*arlo, se usar+ el atributo 9.M#, y para entrar
)alores en la lista se usa el atributo 0ETI09.
Le escribe:
!1
bin1test5,c*i">
;L-L-/T 9.M#<"lista7">
;0ETI09>Valor 7
;N&T$NE>Valor 5
;N&T$NE>Valor 0
;1L-L-/T>
;14N#M>
Le deben tener en cuenta )arias cosas respecto a L-L-/T:
La lon*itud de la )entana de seleccin se autoajusta al )alor m+s lar*o de la
lista.
La )entana de seleccin, por defecto, muestra una l.nea, si se quieren mostrar
m+s se utili!ar+ el atributo (I@#.
Le debe procurar que los contenidos de los campos sean lo m+s cortos posiblesY
una e(cesi)a lon*itud implica mayor tr+fico por la red, pero se deben construir
las listas de forma clara, y que resulten de f+cil lectura al usuario, lo que puede
aumentar la lon*itud de los )alores. &ara en)iar un )alor diferente del que
aparece en la lista, se utili!a el par+metro ?.LU# asociado al atributo 0ETI09.
&rueba con el )alor H de la si*uiente lista:
Le escribe:
bin1test5,c*i">
;L-L-/T E9M-<"lista7" (I@#B3>
;N&T$NE>Valor 7
;N&T$NE>Valor 5
;N&T$NE>Valor 0
;N&T$NE>Valor I
;N&T$NE ?.LU#BC?alor V">-ste es el Valor H
!2
;N&T$NE>Valor 6
;N&T$NE>Valor J
;1L-L-/T>
;14N#M>
-sto si*inifica que cuando selecciones "-ste es el )alor H" en realidad lo que se
en).a al ser)idor es "Valor H".
/on las listas desple*ables es obli*atorio seleccionar siempre un )alor, y si no
hay nin*uno seleccionado, por defecto el )isuali!ador en)iar+ el primer )alor de
la lista.
Le puede hacer que haya un )alor preseleccionado aAadiendo el par+metro
(#L#CT#/ al atributo N&T$NE, y si se quiere permitir m+s de una seleccin, se
pondr+ el atributo MULTIEL# al elemento L-L-/T. &ara seleccionar y
deseleccionar hay que atenerse a las normas de Windo2s.
Le escribe:
bin1test5,c*i">
;L-L-/T E9M-<"lista7" MULTIEL# L$W-<0>
;N&T$NE>Valor 7
;N&T$NE (#L#CT#/>Valor 5
;N&T$NE>Valor 0
;N&T$NE>Valor I
;N&T$NE>Valor H
;N&T$NE>Valor 6
;N&T$NE>Valor J
;1L-L-/T>
;14N#M>
&uede ocurrir que interese a*rupar los )alores de la lista desple*able, a fin de
que resulte m+s f+cil encontrar la opcin adecuada, sobre todo si la lista es
lar*a. &ara ello se puede utili!ar el par+metro o$tgrou$. &or ejemplo:
R se escribe:
;select name<"coches">
;option selected )alue<"D">Ein*uno
!3
;opt*roup label<"/oches de lujo">
;option )alue<"7">#olls #oyce
;option )alue<"5">4errari
;option )alue<"0">Mercedes
;1opt*roup>
;opt*roup label<"/oches normales">
;option )alue<"I">#enault
;option )alue<"H">&eu*eot
;option )alue<"6">Leat
;1opt*roup>
;1select>
+l elemento .+0.12+1
-ste elemento, como su nombre indica, permite definir un +rea de te(to en la
pantalla en la que podemos escribir cualquier cosa. Le debe escribir ya
parametri!ada en cuanto a dimensiones, con los atributos R0W( "l.neas% y
C0L( "/NLME9L%. Eo tiene otros atributos o posibles )ariantes. &or
supuesto, para que sea operati)o, deber+ ir acompaAado de los componentes
necesarios para en)iar e iniciali!ar.
Le escribe:
bin1test5,c*i">
;T#'T.R#. E9M-<"te(to7" R0W(BV C0L(BZI >;1T-MT9#-9>
;14N#M>
9unque no es habitual, dentro de un +rea de te(to puede haber un contenido por
defecto "que puede ser borrado o modificado por el usuario%. &ara ello
simplemente se escribir+ el te(to entre 2T#'T.R#.4 y 28T#'T.R#.4. 9s.:
;T-MT9#-9 E9M-<"te(to7" #NWL<H /NLL<ID>
!4
Contenido del area de te;to
;1T-MT9#-9>
-l tratamiento de los datos recibidos en el ser)idor desde los formularios
requiere conocer la tabla de con)ersin he(adecimal que utili!an la mayor.a de
)isuali!adores. #ecuerda que las palabras en destino aparecen separadas por el
si*no G, y las letras acentuadas y otros caracteres, por )alores he(adecimales
precedidos del s.mbolo P
Le puede proceder a la descodificacin en el pro*rama /O$ que recibe los
datos, o bien definir macros en pro*ramas au(iliares que ser+n ejecutados
despus.
+stilos en los formularios
-n las Kltimas )ersiones de los dos na)e*adores m+s utili!ados, pueden
aplicarse cambios de estilo a los formularios, lo que permite una presentacin
m+s sofisticada.
.T#9CI09: 'ay que tener en cuenta que los estilos no estan estandari!ados, y
hay cosas que se )en bien en unos na)e*adores y no se )en en otros, y hay
solo unos pocos efectos que se )ean en todos ellos.
-n los elementos de formulario pueden redefinirse casi todos los par+metros:
colores de fondo, tipo y anchura de bordes, color y tipo de letra del te(to, altura y
anchura del elemento, alineacin del te(to dentro del elemento, etc. &or ejemplo:
Lolo lectura
Le escribe as.:
;4N#M M-T'N@<"O-T" 9/T$NE<"">
;$E&T TR&-<"te(t" (T1L#BCbac+groundQ&ello:NcolorQredC
E9M-<"campo7">
;$E&T TR&-<"te(t" (T1L#BCborderQ=Nbac+groundQ&ello:NcolorQblueC
readonly
E9M-<"campo5" V9L-<"Lolo lectura">
;$E&T TR&-<"button" (T1L#BCbac+groundQtrans$arentNcolorQredC
V9L-<"&rocesar">
!5
;14N#M>
-ro%lemas de privacidad en los formularios
-n las Kltimas )ersiones del na)e*ador $nternet -(plorer de Microsoft, ha
aparecido una nue)a prestacin consistente en memori!ar los datos introducidos
en cualquier formulario de uso habitual. -n efecto, muchas )eces se utili!an
formularios para tareas repetiti)as, en las que casi siempre hay que introducir los
mismos datos. -sto nos puede ahorrar tener que escribir cada )e! lo mismo, y
Microsoft pens que ser.a buena idea facilitar la labor del usuario haciendo que
el na)e*ador *uarde en una lista desple*able todos los datos que se )an
escribiendo en cada transaccin, de manera que cuando se accede a la p+*ina,
cada campo de te(to ";$E&T TR&-<"te(t">% queda con)ertido en una lista
desple*able ";L-L-/T>% cuyo contenido son los datos que se han introducido
en ese mismo campo en ocasiones anteriores.
Visto as. suena incluso interesante.... a condicin de que el usuario sea siempre
el mismo, claro. &orque, [qu ocurre si el formulario est+ incluido en una p+*ina
que es utili!ada por numerosas personas en una sala comKn con m+quinas
pKblicas, como una sala de usuarios o un cibercaf\ &ues que si el si*uiente
usuario se conecta a la misma p+*ina, puede )er los datos que escribi su
antecesor en esa m+quina.
&ara e)itarlo, e(iste un par+metro, poco conocido en *eneral, que debe incluirse
en la definicin del formulario, y que no tiene nin*Kn efecto en los na)e*adores
que no tienen la costumbre de ser tan indiscretos. 9s.:
;4N#M E9M-<"M$^4N#ML9#$N" M-T'N@<"&NLT"
.UT0MEL#T#BC0>>C>
...
...
;14N#M>
(rden de ta%ulaci$n en los formularios
@e forma predeterminada, el orden de tabulacin es el mismo que el orden en
que los elementos se han escrito. &uede darse el caso de que necesites que el
orden de tabulacin de los elementos de un formulario no sea el mismo en el
que estan escritos. &ara ello se puede incluir en todos los elementos el
par+metro T.!I9/#'Bn donde n es el nKmero de orden deseado de cada uno.
Li se )a a alterar el orden natural de tabulacin, con)iene hacerlo con todos los
elementos del formulario. -n cualquier caso, el na)e*ador hace dos *rupos de
tabulacin, los que tienen el par+metro T.!I9/#' y los que no. Le*uir+ el
orden de los )alores y a continuacin pasar+ a los que no ten*an numeracin,
si*uiendo el orden de escritura. 'e aqu. un ejemplo de la sinta(is:
!6
;4N#M E9M-<"M$^4N#ML9#$N" M-T'N@<"&NLT">
;$E&T TR&-<"te(t" E9M-<"/ampo7" T9F$E@-M<5>
;$E&T TR&-<"te(t" E9M-<"/ampo5" T9F$E@-M<7>
;14N#M>
-n este caso, "/ampo5" ser.a el primero en recibir el cursor. Todo esto slo
funciona con na)e*adores de )ersiones recientes.
)esactivar elementos en los formularios
/on casi todos los na)e*adores modernos se pueden bloquear los elementos
que forman un formulario, todos o al*unos de ellos. R puede que te pre*untes
qu inters tiene bloquear un formulario. &uede ser necesario en aplicaciones
din+micas en las que interese bloquear partes del formulario se*Kn el usuario
cumplimente unos opciones u otras. &ara ello se utili!a el par+metro @$L9FL-@.
-ste par+metro es accesible desde ?a)aLcript y VFLcript. Le escribe:
;4N#M E9M-<"M$^4N#ML9#$N" M-T'N@<"&NLT">
;$E&T TR&-<"te(t" E9M-<"/ampo7" V9L-<"/ontrol desacti)ado"
@$L9FL-@>
;$E&T TR&-<"te(t" E9M-<"/ampo5">
;14N#M>
Le puede aplicar a cualquier objeto contenido en el formulario. -ste ser.a el
resultado:
/ontrol desa
/omo puedes )er, el efecto es parecido al que se consi*ue con la opcin de
estilo readonl&, pero con @$L9FL-@ se impide incluso el que se pueda
seleccionar el contenido del control "no se produce el e)ento on4ocus% y con
readonly no.
!7
!"e#plo$ de For#ulario$
Ouego de botone$ dire''ionado$ a p?gina$ 3.)13!7(
*sto slo Junciona abriendo la p$gina como File:/// no como ser#icio ,ttp://=
$ndice Eotas /mo f unciona\
<TA"LE>
<T1>
<TD>
<2#1M METH#D6"@ET" A%TI#,6"indice!-tm">
<I,&'T T$&E6"E'"MIT" 5AL'E6"Indice">
</2#1M>
</TD>
<TD>
<2#1M METH#D6"@ET" A%TI#,6"notas!-tm">
<I,&'T T$&E6"E'"MIT" 5AL'E6",otas">
</2#1M>
</TD>
<TD>
<2#1M METH#D6"@ET" A%TI#,6"como!-tm">
<I,&'T T$&E6"E'"MIT" 5AL'E6"%Qmo 3uncionaW">
</2#1M>
</TD>
</T1>
</TA"LE>
Ouego de botone$ dire''ionado$ a p?gina$ 4!:.T17(
5uede Juncionar abriendo la p$gina como ser#icio ,ttp:// o como File:///= pero deber$
utilizarse :!TH.D;8!T en lugar de :!TH.D;5.7T=
$ndice Eotas /mo f unciona\
<TA"LE>
<T1>
!
<TD>
<2#1M METH#D6"@ET" A%TI#,6"-ttp.//sestud!u8!es/manual!esp/indice!-tm">
<I,&'T T$&E6"E'"MIT" 5AL'E6"Indice">
</2#1M>
</TD>
<TD>
<2#1M METH#D6"@ET" A%TI#,6"-ttp.//sestud!u8!es/manual!esp/notas!-tm">
<I,&'T T$&E6"E'"MIT" 5AL'E6",otas">
</2#1M>
</TD>
<TD>
<2#1M METH#D6"@ET" A%TI#,6"-ttp.//sestud!u8!es/manual!esp/como!-tm">
<I,&'T T$&E6"E'"MIT" 5AL'E6"%Qmo 3uncionaW">
</2#1M>
</TD>
</T1>
</TA"LE>
A 'a#po -a'@o( 3ongitud no li#itada(
A 'a#po -a'@o( 3ongitud li#itada a AB
<2#1M METH#D6"&#ET" A%TI#,6"-ttp.//miser8idor/c0i-bin/test;-c0i">
<I,&'T ,AME6"campo1">
<I,&'T ,AME6"campo;" EIFE61+ MATLE,@TH61+>
<&>
<I,&'T T$&E6"submit" 5AL'E6"&rocesar">
<I,&'T T$&E6"reset" 5AL'E6"InicialiNar"></2#1M>
A 'a#po -a'@o( 3ongitud no li#itada(
A 'a#po 'on 'ontenido -i$ible(
A 'a#po 'on 'ontenido o'ulto
T-MTN V$L$FL
<3orm met-od6"&#ET" action6"-ttp.//miser8idor/c0i-bin/test;-c0i">
<input name6"campo1">
<input name6"campo;" 5AL'E6"TETT# 5IEI"LE">
<input tBpe6"pass/ord" name6"campo)" 5AL'E6"TETT# #%'LT#">
<&>
<input tBpe6"submit" 8alue6"&rocesar">
<input tBpe6"reset" 8alue6"InicialiNar"></3orm>
!!
A 'a#po -a'@o( 3ongitud $in li#itar(
A 'a#po -a'@o( 3ongitud li#itada a AB(
2 botone$ de $ele''i+n(
6lase & 6lase '
<&>
%lase A <I,&'T T$&E6"1ADI#" ,AME6"clase" 5AL'E6"A">
%lase " <I,&'T T$&E6"1ADI#" ,AME6"clase" 5AL'E6""">
<&>
<I,&'T T$&E6"E'"MIT" 5AL'E6"&rocesar">
<I,&'T T$&E6"1EEET" 5AL'E6"InicialiNar">
</3orm>
A 'a#po -a'@o( 3ongitud $in li#itar(
A 'a#po -a'io( 3ongitud li#itada a AB(
2 botone$ $ele''i+n
2 'a$illa$ $ele''i+n
6lase & 6lase '
Tipo 1 Tipo 2
<&>
%lase A <I,&'T T$&E6"1ADI#" ,AME6"clase" 5AL'E6"A">
%lase " <I,&'T T$&E6"1ADI#" ,AME6"clase" 5AL'E6""">
<&>
Tipo 1 <I,&'T T$&E6"%HE%I"#T" ,AME6"tipo" 5AL'E6"1">
Tipo ; <I,&'T T$&E6"%HE%I"#T" ,AME6"tipo" 5AL'E6";">
<&>
</3orm>
1""
A li$ta de$plegable de 3 -alore$( A -i$ible
<EELE%T ,AME6"lista1">
<#&TI#,>5alor 1
<#&TI#,>5alor ;
<#&TI#,>5alor )
</EELE%T>
</2#1M>
A li$ta de$plegable de 5 -alore$( 3 -i$ible$(
<EELE%T ,AME6"lista1" EIFE6)>
<#&TI#,>5alor 1
<#&TI#,>5alor ;
<#&TI#,>5alor )
<#&TI#,>5alor *
<#&TI#,>5alor >
</EELE%T>
<&>
</2#1M>
A Ventana de texto de 5x4B
<TETTA1EA ,AME6"te9to1" 1#(E6> %#LE6*+ ></TETTA1EA>
<&>
</2#1M>
1"1
>n t@pi'o % 'o#ple"o For#ulario
,ombre%
:=,ac=% 3,I%
&pellidos%
6alle 8 nLmero%
6digo 5ostal%
6iudad%
5ro#incia%
TelOJono%
Opcin%
*sco;a una opcin
6omentarios
personales%
5ul$e a*u@:
-n)iar datos Forrar los datos
<2#1M A%TI#,6"-ttp.//miser8er!midominio!mipais/c0i-bin/test;-c0i"
METH#D6&#ET>
<%E,TE1>
<TA"LE "#1DE1>
<T1>
<TD>,ombre.</TD>
<TD> <I,&'T T$&E6"te9t" ,AME6"nombre" EIFE61J MATLE,@TH61J> 2!,ac!.
<I,&'T T$&E6"te9t" ,AME6"edad" EIFE6J MATLE,@TH6J> D,I.
<I,&'T T$&E6"te9t" ,AME6"dni" EIFE6J MATLE,@TH6J></TD>
<T1>
<TD>Apellidos.</TD>
<TD> <I,&'T T$&E6"te9t" ,AME6"apellidos" EIFE6*J MATLE,@TH6*J></TD>
<T1>
<TD>%alle B nXmero.</TD>
<TD> <I,&'T T$&E6"te9t" ,AME6"domicilio" EIFE6*J MATLE,@TH6*J></TD>
<T1>
<TD>%Qdi0o &ostal.</TD>
<TD> <I,&'T T$&E6"te9t" ,AME6"postal" EIFE6> MATLE,@TH6>>%iudad.
<I,&'T T$&E6"te9t" ,AME6"localidad" EIFE6)= MATLE,@TH6)=></TD>
<T1>
<TD>&ro8incia. </TD>
<TD> <I,&'T T$&E6"te9t" ,AME6"pro8incia" EIFE6;+ MATLE,@TH6;+>
TelO3ono.
<I,&'T T$&E6"te9t" ,AME6"tele3ono" EIFE61< MATLE,@TH61<></TD>
<T1>
<TD>#pciQn.</TD>
1"2
<TD> <EELE%T ,AME6"#&%I#,">
<#&TI#,>#&%I#, 1
<#&TI#,>#&%I#, ;
<#&TI#,>#&%I#, )
<#&TI#,>#&%I#, *
<#&TI#,>#&%I#, >
</EELE%T>EscoPa una opciQn</TD>
<T1>
<TD>%omentarios<"1> personales.</TD>
<TD> <TETTA1EA ,AME6"coment" 1#(E6; %#LE6*J></TETTA1EA></TD>
<T1>
<TD><">&ulse aLuR.</"></TD>
<TD ALI@,6%E,TE1>
<I,&'T T$&E6"submit" 5AL'E6"En8iar datos ">
<I,&'T T$&E6"reset" 5AL'E6""orrar los datos"></TD>
</TA"LE>
</%E,TE1>
</2#1M>
Multiedia
@e un modo similar a como se inserta una ima*en se puede insertar un fichero
de sonido o de ).deo.
/onido de fondo al cargar la pgina
-n este caso la etiqueta depende del na)e*ador, ya que se implementa de forma
diferente en el -(plorer y el Eetscape. Los formatos m+s usados son id "para
temas musicales sin )oces% , :aA y au6
9etsca$e
La etiqueta b+sica para que se car*ue el fichero de mKsica con la p+*ina, sin
inter)encin del usuario, es en Eetscape "siendo obli*atorio especificar el
tamaAo%:
;-MF-@ L#/<"*ifs1derroche.mid" W$@T'<7II '-$O'T<0D>
-n Eetscape se )er+ para W$@T'<76D
'-$O'T<JD como:
La etiqueta #M!#/ tiene multitud de atributos, he aqu.
al*unos.
9TNLT9#T< 49LL- "por defecto% y T#-. -ste Kltimo hace que suene
inmediatamente despus de car*ar la p+*ina sin necesidad de pulsar el botn.
1"3
'$@@-E<T#-, oculta la consola y slo tiene este )alor 6 /omo no se podr.a
acti)ar el sonido pulsando el botn, suene al car*ar la p+*ina
LNN&<49LL- ,T#-"por defecto%,E para oir el fichero una )e!, infinitas o el
nKmero que especifiquemos en 9
/NET#NLL<LM9LL/NELNL-, aparece una consola pequeAita
Li pones esta etiqueta, las )ersiones m+s recientes del -(plorer "desde la I.D%
tambin la interpretan correctamente, sal)o LNN&. -l -(plorer lee el fichero una
)e! para LNN&<D y lo repite indefinidamente para E i*ual a otro )alor
cualquiera.

#;$lorer
-l -(plorer ofrece menos posibilidades para manejar estos ficheros. La etiqueta
b+sica para que se car*ue la mKsica con la p+*ina es:
;FOLNE@ L#/<"fichero de sonido" LNN&< n $E4$E$T->
donde n es el nKmero de )eces que se oye el fichero: 7, 5, 0 ... o infinitas
(onido de %ondo en los dos naAegadores
Li deseas que suene la mKsica al car*ar la p+*ina con los dos na)e*adores
debes escribir las etiquetas para ambos.
-s decir debes poner:
;b*sound src<"..1*ifs1houston.mid">
;embed src<"..1*ifs1houston.mid" 'idden<"true" >
para que suene una )e!
o bien:
1"4
;FOLNE@ L#/<"..1*ifs1cantina.2a)" LNN&<infinite>
;-MF-@ L#/<"..1*ifs1cantina.2a)" W$@T'<5DD '-$O'T<HH 9TNLT9#T<"true"
LNN&<"true" '$@@-E<"true">
para que se ejecute indefinidamente.
(onido desde un enlace en la $-gina
Li no quieres que se car*ue la mKsica con la p+*ina, al*o que lle*a a resultar
bastante pesado a )eces, debes poner un enlace al fichero de sonido, lo que
funciona con ambos na)e*adores: Eetscape y -(plorer.
Tambin puedes poner cualquier otro tipo de ficheros de sonido, como $3, que
comprime hasta 75 )eces la mKsica, sin prdida apreciable de calidad.
?Wdeo
-l *ran problema de los ficheros de ).deo es su tamaAo, ya que unos pocos
se*undos pueden representar )arios Mb "me*a bytes% de tamaAo.
&robablemente en el futuro se ir+ *enerali!ando su uso, ya que aumentar+ la
)elocidad en la #ed. Los formatos que se emplean son
)ariados: aAi, $eg, raX oA, etc, que pueden reproducir a la )e! sonido y
).deo.
Los ficheros a)i y mpe* se reproducen con el #eproductor Multimedia de
Windo2s, pero los dem+s necesitan )isores propios que se deben instalar
pre)iamente. &or ejemplo los ficheros ram se )isuali!an con #eal &layer, los
mo) con ZuicS Time, etc.
Lon los llamados $lug"in
-n Eetscape, la etiqueta es muy parecida a la de sonido, siendo obli*atorio
especificar tambin las dimensiones:
;-MF-@ L#/<")ideo.a)i" '-$O'T<0DD W$@T'<IDD 9TNLT9#T<false LNN&<false>
-n e(plorer debes llamar al fichero con un enlace
;9 '#-4<"*ifs1jordan.a)i">Mira el ).deo de ?ordan;19>
1"5
lo que abrir+ el pro*rama asociado al tipo de ).deo ele*ido cuando lo pulses. -n
el Eetscape tambin puedes hacer esto mismo.
1"6

Todo LenguajeHTML

Cargado por

Información del documento

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Todo LenguajeHTML

Cargado por

Copyright:

Formatos disponibles

Instituto Tecnolgico de Orizaba

Herramientas para desarrollo Web

Instituto Tecnolgico de Orizaba

Instituto Tecnolgico de Orizaba

También podría gustarte