Está en la página 1de 41

Manual de HMTL 4.

0
1. Versiones del HTML .......................................................................................................................................... 4
1.1. HTML 2.0 ...................................................................................................................................................... 4
1.2. HTML 3.0 y 3.2 ............................................................................................................................................. 4
1.3. HTML 4.0 ...................................................................................................................................................... 4
1.4. Estndares en este curso ............................................................................................................................... 4
2. Mi primera pgina .............................................................................................................................................. 5
2.1. El cdigo ....................................................................................................................................................... 5
2.2. La explicacin ............................................................................................................................................... 5
2.3. El cuerpo del docuento .............................................................................................................................. 5
3. Formateo bsico .................................................................................................................................................. 7
3.1. !orato del prra"o ..................................................................................................................................... #
3.2. Las $ ca%eceras ............................................................................................................................................. #
3.3. &a%iando el tipo de letra ........................................................................................................................... '
3.4. (tros eleentos ............................................................................................................................................ '
4. Caracteres especiales ..........................................................................................................................................
4.1. &aracteres extendidos en HTML .................................................................................................................. )
4.2. &aracteres de control ................................................................................................................................... )
5. !nlaces ............................................................................................................................................................... 11
5.1. La eti*ueta +,- .......................................................................................................................................... 11
5.2. Las ./Ls ..................................................................................................................................................... 11
5.3. ,nclas .......................................................................................................................................................... 12
". Listas .................................................................................................................................................................. 12
$.1. Listas desordenadas .................................................................................................................................... 12
$.2. Listas ordenadas ......................................................................................................................................... 13
7. #mgenes ............................................................................................................................................................ 14
#.1. 0genes y enlaces ..................................................................................................................................... 14
1
Diseo Web
#.2. ,lineacin respecto al texto ........................................................................................................................ 14
$. Formateo %ino &3.2 ............................................................................................................................................ 15
'.1. &a%io de color .......................................................................................................................................... 15
'.2. Taa1os del texto ....................................................................................................................................... 15
'.3. Tipo de letra 23.2 ........................................................................................................................................ 1$
. !str'ct'ra del doc'mento ............................................................................................................................... 1"
).1. La ca%ecera ................................................................................................................................................. 1#
).2. El cuerpo ..................................................................................................................................................... 1#
1(. Form'larios ..................................................................................................................................................... 1
10.1. &a3as de texto ............................................................................................................................................ 1)
10.2. (pciones ................................................................................................................................................... 20
10.3. 4otones del "orulario ............................................................................................................................. 21
10.4. (tros eleentos ........................................................................................................................................ 21
10.4. ,grupacin de eleentos .......................................................................................................................... 21
10.5. 5esacti2acin de eleentos ...................................................................................................................... 22
11. Mapas &3.2 ....................................................................................................................................................... 22
11.1. Mapas gestionados por el cliente ............................................................................................................. 22
11.2. &o usar un apa .................................................................................................................................. 23
12. Tablas &3.2 ...................................................................................................................................................... 24
12.1. 5e"inir las "ilas ......................................................................................................................................... 24
12.2. 5e"inir las celdas ...................................................................................................................................... 2$
12.3. T6tulo de la ta%la ....................................................................................................................................... 2#
13. Marcos &4.( .................................................................................................................................................... 2$
13.1. Eti*ueta +!/,ME7ET- ........................................................................................................................... 2'
............................................................................................................................................................................. 2)
13.2. Eti*ueta +!/,ME- ................................................................................................................................. 2)
13.3. ,cceso a otros arcos .............................................................................................................................. 2)
14. Ho)as de estilo &4.( ........................................................................................................................................ 31
14.1. &lases ........................................................................................................................................................ 31
2
Manual de HMTL 4.0
14.2. Eti*uetas +78,9- y +50:- .................................................................................................................... 32
15. Ho)as de estilo* re%erencia &4.( .................................................................................................................... 33
15.1. 8ropiedades de %lo*ue .............................................................................................................................. 33
15.2. 8ropiedades de tipo de letra ..................................................................................................................... 33
15.3. 8ropiedades de "orato del texto ............................................................................................................. 34
15.4. 8ropiedades de color y "ondo ................................................................................................................... 34
15.5. 8ropiedades de clasi"icacin .................................................................................................................... 34
1". Leng'a)es de script &4.( ............................................................................................................................... 3"
1$.1. ;a2ascript .................................................................................................................................................. 3$
17. Capas &4.( ...................................................................................................................................................... 3$
1#.1. 5e"inicin .................................................................................................................................................. 3'
1#.2. 8ropiedades .............................................................................................................................................. 3'
1$. +onido ............................................................................................................................................................ 4(
1'.1. 7onido acti2ado por el usuario ................................................................................................................. 40
20.2. 7onido de "ondo ......................................................................................................................................... 40
3
Diseo Web
1. Versiones del HTML
1.1. HTML 2.0
Cuando se produjo la explosin de nternet el estndar de HTML que circulaba era el 2.0 (establecido
en noviembre del 95), de modo que cualquier navegador que encontremos ser capaz de
interpretarlo. Prcticamente todo lo que veamos en los prximos seis captulos est contemplado por
este estndar.
1.2. HTML 3.0 y 3.2
Aunque la versin 2.0 cumpla bien el objetivo para el que se cre, careca de herramientas para
tener un control mnimamente complejo de los documentos. No se consider necesario que lo tuviera,
ya que por aquel entonces nternet era un fenmeno ms bien circunscrito a la actividad acadmica y
el contenido primaba sobre el diseo. Debido a ello, Netscape (lder del mercado de navegadores por
aquel entonces) empez a incluir etiquetas nuevas no incluidas en ningn estndar.
Por estos problemas, el ETF (el comit que suele decidir todos los estndares dentro de nternet)
comenz a elaborar el borrador del HTML 3.0, que result ser demasiado grande para la poca, lo
que dificult su aceptacin en el mercado.
Esto llev a una serie de compaas (entre ellas Netscape, Microsoft, BM, Sun, etc...) a crear un
nuevo comit llamado W3C, que es el que actualmente elabora las nuevas versiones del HTML. Su
primer trabajo consisti en crear el borrador del HTML 3.2, que inclua muchas de las mejoras que los
principales navegadores (Netscape y Explorer) haban introducido en nternet, como son las tablas,
los applets, etc..
Este borrador fue aprobado en enero de 1997 e inmediatamente el W3C se puso a trabajar en la
elaboracin del siguiente estndar: el 4.0.
1.3. HTML 4.0
En julio de 1997 se presenta el borrador de este estndar. Por fin se estandarizan los marcos
(frames), las hojas de estilo y los scripts (entre otras cosas). El 17 de diciembre de 1997 dicho
borrador fue finalmente aprobado.
1.4. Estndares en este curso
En principio cualquier navegador debera ser capaz de interpretar el HTML 3.2, pero por si necesitis
saber por alguna razn el estndar al que pertenece una etiqueta o parmetro en particular, se
incluir una de las siguientes indicaciones:
4
Manual de HMTL 4.0
2. Mi primera pgina
2.1. El cdigo
<HTML>
<HEAD>
<TITLE>Mi primera pagina</TITLE>
</HEAD>
<BODY>
<CENTER><H1>Mi Primera pagina</H1>
</CENTER>
<HR>
<P>Esta es mi primera pagina (!ispas"# P$r e%
m$ment$ n$ se &'e ten(ra) per$ (entr$ (e p$$
p$n(re a&'i m'!as $sas interesantes#
</BODY>
</HTML>
Tambin puedes ver el resultado en este ejemplo.
2.2. La explicacin
Lo primero que conviene explicar es en qu consisten todos esos smbolos de mayor y menor que
estn distribuidos por ah. El lenguaje HTML se basa en la sintaxis SGML (toma siglas). Esto quiere
decir que cualquier cosa que hagamos en HTML estar encerrada entre dos etiquetas de esta
manera:
<ETI*+ETA par,metr$s> ### </ETI*+ETA>
Hay ocasiones en que no es necesario cerrar la etiqueta. Mirando el cdigo habris visto un par de
ejemplo que ya explicar ms adelante. Pero como lo primero que debemos indicar es que el texto
que estamos componiendo es un documento HTML pues lo indicamos as:
<HTML> ### </HTML>
Un documento HTML tiene una estructura que lo separa en dos partes: cuerpo y cabecera. En la
primera estar la pgina en s, mientras que en la segunda incluiremos algunas cosas que no se ven
al principio pero que pueden llegar a ser muy importantes. Lo primero que hay que incluir en el cdigo
es la cabecera. La escribimos:
<HEAD>
<TITLE>Mi primera pagina</TITLE>
</HEAD>
Dentro de la cabecera slo hay otra etiqueta. Es la nica imprescindible: el ttulo de la pgina. Es lo
que veremos como ttulo de la ventana en los navegadores que lo permitan. Es como se conocer
nuestra pgina en algunos buscadores y en la agenda de direcciones (bookmarks) de los usuarios.
Por tanto, parece importante pensarnos bien como llamarla.
2.3. El cuerpo del documento
Ahora vamos a indicar el contenido. Lo primero ser indicar que estamos en el cuerpo del documento
<BODY> ### </BODY>
5
Diseo Web
Luego pondremos el ttulo algo recalcado:
<CENTER><H1> ### </H1></CENTER>
Con esto colocaremos el texto centrado (<CENTER>) y en formato <H1> (cabecera 1) que nos
asegura que aumentar el tamao del tipo de letra lo suficiente como para que se vea bastante
resaltado. Luego separamos ese ttulo que le hemos puesto a la pgina del texto por medio de una
lnea horizontal:
<HR>
La lnea horizontal carece de etiqueta de cierre. Esto es normal en etiquetas que no varan los
atributos de un texto, sino que insertan un elemento. Por ejemplo, para indicarle que queremos
separar el texto de la lnea horizontal con un espacio vertical correspondiente a un prrafo nuevo le
decimos:
<P>Esta es mi primera pagina (!ispas"# P$r e%
m$ment$ n$ s- &'e ten(r,) per$ (entr$ (e
p$$ p$n(r- a&'. m'!as $sas interesantes#
En el siguiente captulo veremos muchas etiquetas que nos permitirn cambiar el aspecto de nuestros
textos.
6
Manual de HMTL 4.0
3. Formateo bsico
Se pueden establecer varias categoras dentro de las etiquetas usadas para formatear el texto.
Nosotros las dividiremos entre aquellas que sirven para cambiar prrafos enteros y las que son
capaces de formatear tiras de caracteres dentro del prrafo.
3.1. Formato del prrafo
Estas son las etiquetas ms importantes (excluyendo algunas que veremos ms adelante):
Etiqueta Utilidad esultado
<P>
Sirve para delimitar un prrafo. nserta una
lnea en blanco antes del texto.
Soy un prrafo
<CENTER> ###
</CENTER>
Permite centrar todo el texto del prrafo.
Yo soy normal
Yo estoy centrado
<PRE /IDTH01>
### </PRE>
Representa el texto encerrado en ella con
un tipo de letra de paso fijo. Muy til a la
hora de representar cdigo fuente. El
parmetro WDTH especifica el nmero
mximo de caracteres en una lnea.
Estoy en paso fijo
<DI2 ALI3N01>
### </DI2>
v3.2
Permite justificar el texto del prrafo a la
izquierda (ALI3N0LE4T), derecha (RI3HT),
al centro (CENTER) o a ambos mrgenes
(5+6TI4Y v4.0)
Yo estoy a la izquierda
Yo al centro
Y yo a la derecha (recuerda a la
poltica esto, oye)
Yo soy el ms chulo, porque estoy
en todos los lados.
<ADDRE66> ###
</ADDRE66>
Para escribir direcciones (de esas donde
vive la gente, no electrnicas).
Daniel Rodrguez Herrera
C/cuador !" #$% &'&&0
Ma(ada)onda
<BLOC7*+OTE> ###
</BLOC7*+OTE>
Para citar un texto ajeno. Se suele
implementar dejando mrgenes tanto a
izquierda como a derecha, razn por la que
se usa habitualmente.
Me gustara
reencarnarme en
las yemas de los
dedos de Warren
Beatty (Woody
Allen)
3.2. Las 6 cabeceras
El HTML nos ofrece seis etiquetas distintas para mostrar cabeceras. Son stas:
Etiqueta esultado
<H1> ###
</H1>
!abecera de ni"el 1
<H8> ###
</H8>
!abecera de ni"el 2
<H9> ###
</H9>
!abecera de ni"el 3
<H:> ###
</H:>
!abecera de ni"el #
7
Diseo Web
<H;> ###
</H;>
!abecera de ni"el $
<H<> ###
</H<> !abecera de ni"el %
Estas etiquetas se pueden definir como de formato de prrafo pero por su importancia he preferido
tratarlas aparte. No resulta recomendable utilizarlas para aumentar o disminuir el tamao del tipo de
letra, ya que cada navegador los muestra de manera diferente. Se usan para dividir correctamente en
secciones nuestra pgina, tal y como se hace en un documento de texto normal.
3.3. Cambiando el tipo de letra
Todas estas etiquetas nos permiten cambiar de una manera u otra el aspecto del tipo de letra que
estemos utilizando y se pueden utilizar con tiras de caracteres dentro de un prrafo.
Etiqueta Utilidad esultado
<B> ### </B> Pone el texto en negrita.
&o' un te(to negro como el
ti)*n
<I> ### </I> Representa el texto en cursiva. s*o+ ladeado
<+> ### </+> Para subrayar algo.
Como soy muy importante estoy
subrayado
<6> ### </6> v3.2
Para tachar.
A m, en cambio, nadie me
quiere
<TT> ### </TT>
Permite representar el texto en un tipo de
letra de paso fijo.
No soy variable
<6+P> ### </6+P> Letra superndice. E=mc
2
<6+B> ### </6+B> Letra subndice. ai,j=bi,j+1
<BI3> ### </BI3>
v3.2
ncrementa el tamao del tipo de letra.
Soy GRANDE
<6MALL> ###
</6MALL> v3.2
Disminuye el tamao del tipo de letra. Cre ver un lindo gatito
<BLIN7> ###
</BLIN7>
Hace parpadear el texto. Resulta algo
irritante.
Molesto?
3.4. Otros elementos
Por ltimo, debemos estudiar algunas cosas que no son texto y que podemos incorporar a nuestra
pgina.
Etiqueta Utilidad esultado
<HR> nserta una barra horizontal.
<BR> Salto de lnea.
Hay un antes y un
despus de saltar a otra lnea
<=>> ###
>>>
Comentarios. Esto se escribe y <!-- esto no -->
8
Manual de HMTL 4.0
#. !aracteres especiales
Si os habis fijado en los ejemplos habris visto que en los textos de los mismos no hay acentos, ni
ees, ni smbolos de abrir interrogacin o exclamacin. Esto es debido a los distintos juegos de
caracteres que manejan los ordenadores.
Las mquinas manejan la informacin en formato binario (es decir, en unos y ceros). Estos, a su vez,
forman nmeros, los cuales se traducen en letras. Cmo? Mediante tablas. Podemos asignar el
valor 64 a la letra a, el 65 a la b, etc..
El problema est en que cada ordenador es de un fabricante distinto y puede adoptar una tabla
diferente al resto. Para evitarlo existen diversos estndares y el ms extendido es el ASC. De hecho,
actualmente todos los ordenadores tienen la misma tabla ASC para los primeros 127 caracteres.
Pero esa tabla no contiene vocales con acento, ni ees, ni smbolos de abrir interrogacin o
exclamacin... Esto nos pasa por dejar que los norteamericanos sean quienes construyan las
computadoras.
El HTML 2.0 eligi como tabla estndar la SO-Latin-1, que comparte con la ASC los 127 caracteres
e incluye unos cuantos ms hasta el nmero 255.
4.1. Caracteres extendidos en HTML
La manera de incluir los caracteres extendidos (cuyo nmero est ms all del 127) consiste en
encerrar el cdigo entre los caracteres ?@ y A. As pues, lo siguiente:
?@1BCA
nos debera dar un medio (). Tambin existe una serie de sinnimos para poder recordar con ms
facilidad estos caracteres. As, por ejemplo, ?@1BCA tambin se puede escribir como ?Dra18A.
Vamos a ver algunos de estos cdigos, los ms tiles a la hora de escribir en espaol:
!*digo esultado
?aa'teA)
?Aa'teA)
?ea'teA)
?Ea'teA)###
, , , , , , , , y
?nti%(eA E
?Nti%(eA
y
?i&'estA
?ie1%A
?$r(mA
?$r(DA
?tra(eA $
?@1;9A
o
?$pEA
?regA
?nFspA
(espacio en blanco que no puede ser usado para saltar de
lnea)
4.2. Caracteres de control
En el HTML existen cuatro caracteres de control, que se usan para formar etiquetas, establecer
parmetros, etc.. Para poder emplearlos sin riesgo deberemos escribir los siguiente cdigos:
9
Diseo Web
!*digoesultado
?%tA <
?gtA >
?ampA &
?&'$t
A
"
10
Manual de HMTL 4.0
$. Enlaces
Las siglas HTML significan H+,erTe-* Marku, Language, lo que para nosotros quiere decir que es un
lenguaje para hipertexto. Existen mltiples formatos de hipertexto (por ejemplo, los ficheros de ayuda
de Windows) y lo que tienen en comn es que todos poseen enlaces.
Un enlace es una zona de texto o grficos que si son seleccionados nos trasladan a otro documento
de hipertexto o a otra posicin dentro del documento actual. Siendo HTML el lenguaje de nternet, la
diferencia que posee con respecto a otros tipos de hipertexto es que ese otro documento puede estar
fsicamente en la otra punta del planeta. Son los enlaces lo que hacen de la telaraa o World Wide
Web lo que es.
5.1. La etiqueta <A>
Para incorporar un enlace hay que utilizar esta etiqueta. Todo lo que encerremos entre <A> y </A>,
ya sea texto o imgenes, ser considerado como enlace y sufrir dos modificaciones:
Se visualizar de manera distinta en el navegador. El texto aparecer subrayado y de un color distinto
al habitual, y las imgenes estarn rodeadas por un borde del mismo color que el del texto del enlace.
Al pulsar sobre el enlace, seremos enviados al documento que apuntaba el enlace.
Para que el enlace sirva para algo debemos especificarle una direccin. Lo haremos de la siguiente
manera:
<A HRE40G(irei$nG>P'%same</A>
La direccin estar en formato URL (Uniform Resource Locator).
5.2. Las URLs
Una URL nos indica tanto una direccin de nternet como el servicio que esperamos nos ofrezca el
servidor al que corresponde la direccin. Tiene el siguiente formato:
serHii$I//m,&'inaIp'ert$/r'ta/Di!er$J's'ari$
donde el servicio podr ser uno de los siguientes:
+ttp
Es el servicio invocado para transmitir pginas web y el que usaremos normalmente en los
enlaces.
+ttps
Es una innovacin sobre el anterior, que nos permite acceder a servidores (generalmente
comerciales) que nos ofrecen el uso de tcnicas de enciptacin para proteger los datos que
intercambiemos con l de terceras personas.
,tp
Permite trasmitir ficheros desde servidores de ftp annimo. Si no le pedimos un fichero sino un
directorio, en general el navegador se encargar de mostrarnos el contenido del mismo para que
podamos escogerlo cmodamente. Utilizando la @ podremos acceder a servidores privados.
mailto
Para poder mandar un mensaje. Por ejemplo, la URL mailto:multivac@idecnet.com me mandara
un mensaje a m.
ne-s
Para poder acceder a foros de discusin (mal traducidos a veces como grupos de noticias). Se
indica el servidor y el grupo. Por ejemplo
news://news.ibernet.es/es.comp.demos nos conectara con el foro
es.comp.demos en el servidor nacional de Telefnica.
telnet
11
Diseo Web
No es implementado generalmente por los navegadores, que suelen invocar un programa
externo. Nos permite conectarnos con otros ordenadores y entrar en ellos como si nuestro
ordenador fuese una terminal del mismo.
La direccin de la mquina puede ser, o bien una serie de cuatro nmeros entre 0 y 255 (123.3.5.65)
o bien algo ms facil de recordar como es una serie de palabras separadas por puntos
(www.programacion.net). El puerto generalmente no se indica, ya que el servicio predetermina uno.
La ruta es una serie de directorios separados por el smbolo /, que es el utilizado en UNX (el sistema
operativo ms extendido en los servidores de nternet).
Existe otro formato de URL. Cuando queremos acceder a un fichero situado en la misma mquina
que la pgina web que estamos creando podemos utilizar este formato:
r'taKre%atiHa/Di!er$
En la ruta relativa podremos utilizar los dos puntos (..) para acceder al directorio padre o comenzar
con la barra diagonal (/) para acceder a una ruta absoluta dentro de nuestro ordenador.
5.3. Anclas
Como dijimos, es posible acceder a una posicin del documento HTML. Para hacerlo, primero
debemos especificar el lugar del documento al que queremos acceder:
<A NAME0Gan%aG>
Para poder acceder a ese lugar incluimos el enlace de esta manera:
<A HRE40G@an%aG>2am$s a 'na parte (e% ($'ment$</A>
Tambin podemos acceder a anclas situadas en documentos remotos. Para ello aadiremos el
nombre del ancla al URL as:
<A HRE40Gen%aes#!tm%@an%aG>ir a ($'ment$ </A>
%. Listas
Existen varios tipos de listas en HTML. Todas ellas se pueden meter unas dentro de otras formando
rboles muy bonitos y preciosos. Todos los tipos siguen el siguiente formato:
<tip$K%ista>
<LI>Primer e%ement$
<LI>6eg'n($ e%ement$
</tip$K%ista>
tip$K%ista puede ser una de las siguientes: DIR, DL, MEN+, OL y +L.
6.1. Listas desordenadas
La etiqueta <+L> nos permite presentar listas de elementos sin orden alguno. Cada elemento de la
lista ir normalmente precedido por un crculo. Por ejemplo,
<+L>
<LI>Primer e%ement$
<LI>6eg'n($ e%ement$
</+L>
12
Manual de HMTL 4.0
se ver como
Primer elemento
Segundo elemento
La etiqueta <+L> admite estos parmetros:
.armetro Utilidad esultado
COMPACT v3.2
ndica al navegador que debe representar la
lista de la manera ms compacta posible.
Primer elemento
Segundo elemento
TYPE0G(isG)
Gir%eG)
Gs&'areG v3.2
ndica al navegador el dibujo que preceder a
cada elemento de la lista. Para mayor
flexibilidad se admite tambin como parmetro
de <LI>.
Tipo disc
o Tipo circle
Tipo square
6.2. Listas ordenadas
La etiqueta <OL> nos permite presentar listas de elementos ordenados de menor a mayor.
Normalmente cada elemento de la lista ir precedido por su nmero en el orden. Por ejemplo,
<OL>
<LI>Primer e%ement$
<LI>6eg'n($ e%ement$
</OL>
se ver como
1. Primer elemento
2. Segundo elemento
La etiqueta <OL> admite estos parmetros:
.armetro Utilidad esultado
COMPACT v3.2
ndica al navegador que debe representar la
lista de la manera ms compacta posible.
1. Primer elemento
2. Segundo elemento
TYPE0G1G) GaG)
GAG) GiG) GIG
v3.2
ndica al navegador el tipo de numeracin que
preceder a cada elemento de la lista. Para
mayor flexibilidad se admite tambin como
parmetro de <LI>.
1. Tipo 1
a. Tipo a
A. Tipo A
i. Tipo i
. Tipo
6TART0Gn'mG
v3.2
ndica al navegador el nmero por el que se
empezar a contar los elementos de la lista.
3. Primer elemento
4. Segundo elemento
2AL+E0Gn'mG
v3.2
Atributo de <LI>, acta como 6TART pero a
partir de un elemento predeterminado.
1. Primer elemento
4. Segundo elemento
5. Tercer elemento
13
Diseo Web
/. 0mgenes
Para incluir grficos e imgenes en nuestras pginas utilizaremos la etiqueta <MG> de esta manera:
<IM3 6RC0GDi!er$KgraDi$G ALT0G(esripi$nG>
El parmetro 6RC especifica el nombre del fichero que contiene el grfico. Los formatos estndar en
la red son el GF y el JPG. La ltimas versiones de Netscape y Explorer aceptan tambin el formato
PNG.
El parmetro ALT especifica el texto que se mostrar en lugar del grfico en aquellos navegadores
que no sean capaces de mostrarlos (como el Lynx) y en el supuesto de que el usuario los haya
desactivado. Algunos navegadores lo muestran cuando pasamos el ratn por encima de la imagen.
Es por eso que, aunque algunos usuarios no lo lleguen a ver nunca, conviene ponerlo siempre. De
hecho, el estdar HTML 4.0 obliga a hacerlo.
Existen dos atributos que, aunque opcionales, conviene indicar siempre: la altura y la anchura del
grfico en pixels. De este modo, el navegador puede mostrar un recuadro del tamao de la imagen
mientras la va leyendo de la red y as poder mostrar el resto de la pgina correctamente mientras
tanto.
<IM3 6RC0GgraDi$s/(Ln%(ns#giDG ALT0GNetsape :#MG /IDTH0BB HEI3HT091>
Se ve as:
Para los menos avezados en ingls, decir que WDTH es la anchura y HEGHT la altura.
7.1. mgenes y enlaces
Suele ser comn incluir enlaces dentro de un grfico. En ese caso, por defecto, los navegadores le
pondrn un borde al grfico para indicar que efectivamente es un enlace. Prctico, pero la mayora de
las veces bastante poco esttico. Por medio del parmetro BORDER podremos alterar el grosor de ese
borde o incluso eliminarlo poniendolo a cero.
<A HRE40G!ttpI//LLL#netsape#$mG>
<IM3 6RC0GgraDi$s/(Ln%(ns#giDG ALT0GNetsape :#MG /IDTH0BB HEI3HT091>
</A>
Se ve as:
Sin embargo,
<A HRE40G!ttpI//LLL#netsape#$mG>
<IM3 6RC0GgraDi$s/(Ln%(ns#giDG ALT0GNetsape :#MG /IDTH0BB HEI3HT091
BORDER0M>
</A>
Se ve as:
7.2. Alineacin respecto al texto
Para poder maquetar conjuntamente texto y grficos, el HTML proporciona, por medio del parmetro
ALI3N, las siguientes maneras de alinear una imagen respecto del texto que la acompaa:
14
Manual de HMTL 4.0
Valor de
ALIGN
Utilidad esultado
TOP
Coloca el punto ms alto de la imagen coincidiendo
con ms alto de la lnea de texto actual.
Este es el texto
MIDDLE
Alinea el punto medio (en altura) de la imagen con la
base del texto.
Este es el texto
BOTTOM P$r
(eDet$
Alinea el punto ms bajo de la imagen con la base
del texto. Este es el texto
LE4T v3.2
Coloca la imagen a la izquierda del texto.
Este es el texto
RI3HT
v3.2
Coloca la imagen a la derecha del texto.
Este es el texto
Hay que aclarar que la base del texto es la lnea donde descansan casi todas las letras del alfabeto
excepto algunas como la p, la g o la j.
1. Formateo ,ino v3.2
Lo ideal cuando trabajas con texto sera poder cambiarlo al tamao que te viniese bien, ponerlo de
colorines y cambiar el tipo de letra. Todo esto puedes hacerlo gracias a la etiqueta <4ONT>.
8.1. Cambio de color
Para hacerlo vamos a utilizar el parmetro COLOR. La manera de especificarle el color es comn a
todas las etiquetas HTML: o bien indicando el nombre, si es un color normal, o bien especificando el
porcentaje de rojo, verde y azul (cdigo RGB) del mismo. Los colores reconocidos son los siguientes:
Black Silver Gray White Maroon Red Purple Fuchsia
Green Lime Olive Yellow Navy Blue Teal Aqua
El modo de indicar el color RGB es el siguiente:
<4ONT COLOR0G@44MMMMG>D</4ONT>
<4ONT COLOR0G@E4MMMMG>E</4ONT>
<4ONT COLOR0G@D4MMMMG>3</4ONT>
<4ONT COLOR0G@C4MMMMG>R</4ONT>
<4ONT COLOR0G@B4MMMMG>A</4ONT>
<4ONT COLOR0G@A4MMMMG>D</4ONT>
<4ONT COLOR0G@C4MMMMG>A</4ONT>
<4ONT COLOR0G@B4MMMMG>D</4ONT>
<4ONT COLOR0G@N4MMMMG>O</4ONT>
Lo que nos mostrara lo siguiente:
DEGRADADO
La primera componente en hexadecimal es el rojo, la segunda el verde y la tercera el azul (Red
Green Blue, RGB).
8.2. Tamaos del texto
El parmetro utilizado para indicar el tamao es 6IOE. Puede utilizarse para indicar tamaos
absolutos:
15
Diseo Web
SZE=1 SZE=2 SZE=3 SZE=4 SZE=5 SZE=6 SZE=7
El tamao por defecto es 3. Tambin se puede utilizar los modificadores + y - para indicar un
incremento (o decremento) relativo del tamao del tipo de letra. As, por ejemplo, si indicamos que
queremos un tamao de -2 estaremos pidiendo al navegador que nos muestre el tipo de letra dos
veces ms pequeo.
<4ONT 6IOE08>TamaP$ 8<4ONT 6IOE0GQ9G>
TamaP$ <</4ONT></4ONT>
8.3. Tipo de letra v3.2
Por ltimo, podemos especificar el nombre del tipo de letra que queremos utilizar gracias al parmetro
4ACE. Como en principio no tenemos manera de saber que tipo de letra tiene instalado el ordenador
del usuario que est viendo nuestras pginas, podemos indicar ms de uno separado por comas. Si
el navegador no encuentra ninguno seguir utilizando el que tiene por defecto:
<4ONT 4ACE0GHe%Hetia)Aria%)TimesG>No s como voy a salir exactamente</4ONT>
De todos modos es recomendable no utilizar con fe ciega este atributo en nternet, ya que impide que
todos puedan ver nuestras pginas como nosotros. E nternet, siempre que nos lo permitan Microsoft
y Netscape, debe ser lo ms estndar posible.
2. Estructura del documento
La estructura de un documento HTML se puede resumir as:
tip$ (e ($'ment$
<HTML>
<HEAD>
<TITLE>tit'%$ (e %a p,gina</TITLE>
$sas &'e aDetan a %a p,gina per$ n$ a s' $nteni($
</HEAD>
<BODY par,metr$s>
$nteni($ (e %a p,gina
</BODY>
</HTML>
En el tipo de documento deberemos especificar a que estndar del HTML responde nuestra pgina
entre una de las siguientes opciones:
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0//EN">
Cumple el estndar HTML 2.0
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
Cumple el estndar HTML 3.2
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML .0 T!an"i#i$nal//EN"
"%##&'//(3.$!)/T*/*EC-%#+l0/l$$",.-#-">
Cumple el estndar HTML 4.0
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML .0//EN"
"%##&'//(3.$!)/T*/*EC-%#+l0/"#!i.#.-#-">
Cumple el estndar HTML 4.0 y no contiene adems elementos desaconsejables
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML .0 F!a+,",#//EN"
"%##&'//(3.$!)/T*/*EC-%#+l0//!a+,",#.-#-">
Es una definicin de marcos que cumple el estndar HTML 4.0
16
Manual de HMTL 4.0
El HTML 4.0 considera desaconsejables aquellos elementos que, an siendo soportados, han sido
sustituidos por otros ms potentes y, por ello, es posible que sean eliminados del estndar HTML en
el futuro.
9.1. La cabecera
Suele ser el lugar ms indicado para colocar aquellos elementos de la pgina que no alteren el
contenido de la misma, aunque si la forma de presentarlo y su comportamiento. Es por eso que es el
lugar ms recomendable para colocar los scripts y las hojas de estilo, como veremos en los
captulos correspondientes.
Adems del ttulo de la pgina, uno de los elementos que se pueden incluir aqu son los META. Entre
otras cosas, sirven para indicar propiedades de la pgina como pueda ser el nombre de su autor. Por
ejemplo,
<META NAME0G3ENERATORG CONTENT0GM$Ri%%a/:#M9 SesT (/inC;A I" SNetsapeTG>
nos indicara la herramienta con que hemos creado la pgina (en este caso la versin 4.03 en
espaol para Windows 95 del Composer de Netscape). Estas son las propiedades ms comunes:
.ropiedad Utilidad
A+THOR Autor de la pgina.
3ENERATOR Herramienta utilizada para hacer la pgina.
CLA66I4ICATIO
N
Palabras que permite clasificar la pgina dentro de un buscador jerrquico (como
Yahoo).
7EY/ORD6 Palabras clave por las que encontrarn la pgina en los buscadores.
DE6CRIPTION Descripcin del contenido de la pgina.
Hay tambin otro elemento interesante que podremos incluir en nuestras cabeceras. Cuando
especificamos una URL relativa en un enlace, en principio es para acceder a una pgina situada en
nuestro mismo servidor. Sin embargo, si especificamos:
<BA6E HRE40G!ttpI//LLL#!$rnet#$rg/m'siG>
Ahora todas nuestras URLs relativas se referirn al directorio /music dentro del servidor
http://www.hornet.org.
9.2. El cuerpo
Obviamente no voy a explicar lo que entra dentro del cuerpo (prcticamente todos los captulos del
curso intentan hacerlo) sino los parmetros que admite la etiqueta <BODY>:
.armetro Utilidad
BAC73RO+ND Permite definir un grfico de fondo para la pgina.
B3COLOR Permite definir el color de fondo de la pgina.
B3PROPERTIE6
Cuando es igual a 4IUED el grfico definido como fondo de la pgina
permanecer inmvil aunque utilicemos las barras de desplazamiento.
TEUT Cambia el color del texto.
LIN7 Cambia el color de un enlace no visitado (por defecto azul).
2LIN7 Cambia el color de un enlace ya visitado (por defecto prpura).
ALIN7
Cambia el color que toma un enlace mientras lo estamos pulsando (por
defecto rojo).
LE4TMAR3IN E
TOPMAR3IN
Especifican el nmero de pixels que dejar de margen entre el borde de la
ventana y el contenido de la pgina. Se suelen utilizar para dejarlos a
cero.
17
Diseo Web
MAR3IN/IDTH E
MAR3INHEI3HT
Ms o menos equivalentes a los anteriores, pero stos funcionan en
Netscape.
18
Manual de HMTL 4.0
13. Formularios
Una de las mayores ventajas de la web es que resulta tremendamente interactiva. Los usuarios de
una pgina no tienen ms que escribir al autor de la misma para comentarle cualquier cosa de la
misma. Sin embargo, si deseamos que nos digan slo unas cosas concretas (responder a alguna
pregunta, seleccionar entre varias opciones, etc..) deberemos utilizar formularios. Por ejemplo,
<4ORM ACTION0GG METHOD0PO6T>
N$mFreI<BR><INP+T NAME0Gn$mFreG TYPE0TEUT
6IOE098>
<BR>VC'ant$s s$n ($s E ($sW<BR>
<INP+T NAME0GResp'estaG TYPE0RADIO
2AL+E0Gma%G>9<BR>
<INP+T NAME0GResp'estaG TYPE0RADIO
2AL+E0GFienG>:<BR>
<INP+T NAME0GResp'estaG TYPE0RADIO
2AL+E0Gma%G>;<BR>
<INP+T TYPE0G6'FmitG 2AL+E0GC$mpr$FarG>
</4ORM>
El botn no hace nada porque no hemos definido qu debe hacer, as que sed buenos y no lo pulsis.
Todos los elementos de un formulario deben estar encerrados entre <4ORM> y </4ORM>. Como
parmetros cabe destacar tres. ACTION define el URL que deber gestionar el formulario. Puede ser
una direccin de correo (precedida del inevitable mai%t$I, en cuyo caso deberemos aadir el
parmetro ENCTYPE0Gte1t/p%ainG para que lo que recibamos resulte legible.
Por otro lado, tenemos el parmetro METHOD define la manera en que se mandar el formulario. Es
recomendable utilizar PO6T. En el caso de que estemos mandando el formulario a nuestra direccin
de correo electrnico es obligado usarlo.
Ahora vamos a ver uno a uno todos los elementos que podemos incluir en un formulario. Veremos
que todos ellos tienen algo en comn. Como el resultado de cualquier formulario es una lista de
variables y valores asignados a las mismas, todos ellos tendrn un atributo en comn: el nombre de
su variable. El parmetro tambin ser comn a todos: NAME.
10.1. Cajas de texto
Existen tres maneras de conseguir que el usuario introduzca texto en nuestro formulario. Las dos
primeras se obtienen por medio de la etiqueta <INP+T>:
<INP+T TYPE0TEUT>
<INP+T TYPE0PA66/ORD>
El primero nos dibujar una caja donde escribir un texto (de una sola lnea). El segundo es quivalente,
pero no veremos lo que tecleemos en l. Estos son los atributos para modificarlos:
.armetro Utilidad
6IOE Tamao de la caja de texto.
MAULEN3TH Nmero mximo de caracteres que puede introducir el usuario.
2AL+E Texto por defecto que contendr la caja.
Por otro lado, puede que necesitemos que el usuario pueda introducir ms de una lnea. En ese caso
se utilizar la siguiente etiqueta:
19
Diseo Web
<TEUTAREA>
P$r (eDet$
</TEUTAREA>
Lo que incluyamos entre las dos etiquetas ser lo que se muestre por defecto dentro de la caja.
Admite estos parmetros:
.armetroUtilidad
RO/6 Filas que ocupar la caja de texto.
COL6 Columnas que ocupar la caja de texto.
10.2. Opciones
Si lo que deseamos es que el usuario decida entre varias opciones podremos hacerlo de dos modos.
El primero es el que vimos en el ejemplo inicial:
9<INP+T NAME0GResp'estaG TYPE0RADIO 2AL+E0Gma%G><BR>
:<INP+T NAME0GResp'estaG TYPE0RADIO 2AL+E0GFienG><BR>
;<INP+T NAME0GResp'estaG TYPE0RADIO 2AL+E0Gma%G><BR>
3

4

5

Para asociar varios botones de radio a una misma variable les pondremos a todos ellos el mismo
NAME. Aparte de esto acepta los siguientes parmetros:
.armetroUtilidad
2AL+E Este es el valor que asignar a la variable.
CHEC7ED Si lo indicamos en una de las opciones esta ser la que est activada por defecto.
Pero tambin tenemos una posibilidad que ocupa bastante menos: las listas desplegables. Para
emplearlas deberemos utilizar dos etiquetas, 6ELECT y OPTION:
<6ELECT NAME0GNaHega($rG>
<OPTION>Netsape
<OPTION>E1p%$rer
<OPTION>Opera
<OPTION>LEn1
<OPTION>Otr$s
</6ELECT>
Los parmetros que admite 6ELECT son las siguientes:
.armetr
o
Utilidad
6IOE
El nmero de opciones que podremos ver. Si es mayor que 1 veremos una lista de
seleccin y, si no, veremos una lista desplegable.
M+LTIPLE Si lo indicamos podremos elegir ms de una opcin.
20
Manual de HMTL 4.0
Y OPTION estos:
.armetro Utilidad
2AL+E Este es el valor que asignar a la variable.
6ELECTED Si lo indicamos en una de las opciones esta ser la seleccionada por defecto.
10.3. Botones del formulario
Existen dos: uno que se utiliza para mandar el formulario y otro que sirve para limpiar todo lo que
haya rellenado el usuario:
<INP+T TYPE06+BMIT><BR>
<INP+T TYPE0RE6ET>
Enviar consulta
Restablecer
Podemos cambiar el texto que el navegador pone por defecto en esos botones utilizando el
parmetro 2AL+E.
10.4. Otros elementos
Puede que necesitos que el usuario sencillamente nos confirme o niegue algo. Lo podremos
conseguir por medio de controles de confirmacin:
<INP+T NAME0GBe%%eRaG TYPE0CHEC7BOU>Me $nsi(er$
g'ap$/a

Me considero guapo/a
Si queremos que el control est activado por defecto le aadiremos el parmetro CHEC7ED. El
formulario asignar a la variable NAME el valor on u o...
Por ltimo, existe la posibilidad de que necesitemos que, en el formulario, tengamos alguna variable
con un valor previamente asignado. Por ejemplo, en todos los cursos que tengo el formulario es el
mismo. Y de alguna manera tendr que distinguirlos cuando me lleguen, digo yo. As que incluyo algo
como esto:
<INP+T TYPE0HIDDEN NAME0GC'rs$G 2AL+E0GHTML :#MG>
De este modo ya s de que curso me estn hablando.
10.4. Agrupacin de elementos
Hasta ahora, no disponamos de ninguna manera de agrupar visualmente varios controles, si no
echbamos mano de elementos que no son del formulario, como tablas o imgenes.
Ahora, si encerramos una parte de un formulario dentro de la etiqueta 4IELD6ET se mostrar un
rectngulo alrededor de los mismos. Si adems, le indicamos un ttulo por medio de la etiqueta
LE3END nuestros formularios quedarn hechos un verdadero primor:
<4IELD6ET>
<LE3END>Mi !erm$s$
D$rm'%ari$</LE3END>
<LABEL>
Mi hermoso formularioMi texto:
21
Diseo Web
Mi te1t$I
<INP+T TYPE0Gte1tG>
</LABEL> </4IELD6ET>
LE3END admite como parmetro ALI3N, que indicar en qu lugar se coloca el ttulo. Por defecto es
TOP (arriba), pudiendo estar tambin abajo (BOTTOM), a la izquierda (LE4T) o a la derecha (RI3HT).
10.5. Desactivacin de elementos
Todos los controles de un formulario se pueden desactivar, impidiendo as al usuario que los utilice.
Se seguirn mostrando en pantalla, aunque con un aspecto distinto para indicar su triste estado. Para
ello slo tenemos que indicarle el parmetro DI6ABLED:
<LABEL DI6ABLED>Te1t$I
<INP+T TYPE0TEUT DI6ABLED>
</LABEL>
Texto:
Esto, en principio, no parece de demasiada utilidad. Para qu queremos tener controles
desactivados? Para eso no los ponemos, no? Lo bueno que tiene es que el estado de activacin de
un control es accesible desde JavaScript. Eso nos permitir activar o desactivar una parte de nuestro
formulario dependiendo de lo que el usuario haya introducido previamente en otros controles del
mismo.
11. Mapas v3.2
Hemos visto que podemos hacer enlaces de texto y de grficos. Pero tambin existe otra posibilidad:
que dentro de una sola imagen podamos acceder a varios enlaces. Se hace declarando zonas dentro
de la imagen (rectngulos, crculos, etc..), siendo cada una de ellas un enlace distinto.
Tradicionalmente, siempre han existido dos maneras de hacerlo:
Mapas gestionados por el cliente (el navegador).
Mapas gestionados por el servidor.
Los segundos fueron los primeros en desarrollarse y estaban incluidos dentro del estndar HTML 2.0.
Sin embargo, nunca hubo una manera comn de gestionar esos mapas. Debido a ello, Netscape
elabor un sistema propio que fue incluido en el estndar 3.2: los mapas gestionados por el
navegador.
11.1. Mapas gestionados por el cliente
Para utilizarlos necesitaremos dos cosas: declarar el mapa y asignarlo a una imagen. Vamos primero
a declarar nuestro mapa:
<MAP NAME0GmiKmapaG>
<AREA 6HAPE0### COORD60### ALT0GEn%ae a##G>
###
</MAP>
Dentro de la etiqueta MAP slo podremos definir el nombre del mapa (algo imprescindible, por otra
parte). Es dentro de cada elemento AREA donde podremos definir cosas ms interesantes:
.armetr
o
Utilidad
6HAPE Define la forma de la zona, que podr ser rectangular, circular o poligonal.
COORD6
Coordenadas (separadas por comas) que definen la zona. El nmero y significado de esas
coordenadas depender de la zona.
22
Manual de HMTL 4.0
HRE4 URL a donde ir el usuario si pulsa sobre esa zona.
NOHRE4 Especifica que esa zona no tiene asignado enlace alguno.
ALT
Texto que se presentar en lugar de la imagen en navegadores no grficos para acceder
al enlace.
Como podemos ver, para declarar correctamente una zona necesitamos conocer cmo se definen
exactamente las formas y coordenadas:
&H4.E !556&
Rectangular RECT
"x1,y1,x2,y2" siendo (x1,y1) la esquina superior izquierda y (x2,y2) la
inferior derecha.
Circular CIRC
"x,y,radio" siendo (x,y) el centro del crculo y radio su... eehh.. cmo lo
dira yo? Su radio?.
Polgono
irregular
POLY
"x1,y1,x2,y2,x3,y3,..." definiendo cada pareja (x,y) una esquina del
polgono. La ltima pareja de coordenadas se unir a la primera para cerrar
el polgono.
Toda la
imagen
DE4A+LT No se indican.
11.2. Cmo usar un mapa
Ahora que hemos definido un mapa, slo queda asignarlo a una imagen. Esto se hace del siguiente
modo:
<IM3 6RC0### +6EMAP0G@miKmapaG>
Siempre tenemos que aadir al comienzo del nombre de nuestro mapa una almohadilla (#). Vamos a
ver un ejemplo:
<MAP NAME0GnaHega($resG>
<AREA 6HAPE0RECT COORD60GM)M)8:)91G
HRE40G!ttpI//LLL#netsape#$mG ALT0GNetsapeG>
<AREA 6HAPE0RECT COORD60G8<)M);9)91G
HRE40G!ttpI//LLL#mir$s$Dt#$mG ALT0GMir$s$DtG>
<AREA 6HAPE0DE4A+LT NOHRE4 ALT0GNa(aG>
</MAP>
<IM3 6RC0GnaH#giDG /IDTH0;9 HEI3HT091 BORDER0M +6EMAP0G@naHega($resG>
Hay que tener en cuenta que, cuando dos zonas se solapan, la que est declarada primero es la que
tiene preferencia. Por eso declaramos al final una zona que no conduce a ningn URL por si el
usuario pulsa con el ratn donde no debe.
23
Diseo Web
12. Tablas v3.2
Las tablas son posiblemente la manera ms clara de organizar la informacin. Tambin es el modo
ms adecuado de maquetar texto y grficos de una manera algo ms controlada que con los
parmetros ALI3N.
Las tablas se definen de la siguiente manera. Primero, las caractersticas de la tabla, luego las de
cada fila y dentro de sta, cada celda. As pues, una tabla con 2 filas y 3 columnas se declarar as:
!*digo esultado
<TABLE>
<TR>
<TD>1)1</TD>
<TD>1)8</TD>
<TD>1)9</TD>
</TR>
<TR>
<TD>8)1</TD>
<TD>8)8</TD>
<TD>8)9</TD>
</TR>
</TABLE>
1,11,21,3
2,12,22,3
Como podis ver (o mejor no ver) la tabla no tiene mucho aspecto de tabla. Quedara mejor con unos
bordes, no? Puede que tampoco le viniese mal mayor espacio entre celdas o mayor anchura. Estas
son las cosas que podremos cambiar con los atributos de TABLE:
.armetro Utilidad
BORDER
Especifica el grosor del borde que se dibujar alrededor de las celdas. Por defecto es
cero, lo que significa que no dibujar borde alguno.
CELL6PACIN3 Define el nmero de pixels que separarn las celdas.
CELLPADDIN3 Especifica el nmero de pixels que habr entre el borde de una celda y su contenido.
/IDTH
Especifica la anchura de la tabla. Puede estar tanto en pixels como en porcentaje de
la anchura total disponible para l (pondremos "100%" si queremos que ocupe todo el
ancho de la ventana del navegador).
ALI3N Alinea la tabla a izquierda (LE4T), derecha (RI3HT) o centro (CENTER).
Si ahora, por ejemplo definimos ahora la tabla anterior como <TABLE BORDER01 /IDTH0G;MXG
ALI3N0CENTER> veremos lo siguiente:
1,1 1,2 1,3
2,1 2,2 2,3
12.1. Definir las filas
Ahora que hemos definido la tabla nos toca hacer lo mismo con las filas. Cada fila se define con una
etiqueta TR, que tiene los siguientes atributos:
.armetr
o
Utilidad
ALI3N
Alinea el contenido de las celdas de la fila horizontalmente a izquierda (LE4T), derecha
(RI3HT) o centro (CENTER).
2ALI3N Alinea el contenido de las celdas de la fila verticalmente arriba (TOP), abajo (BOTTOM) o
24
Manual de HMTL 4.0
centro (MIDDLE).
25
Diseo Web
12.2. Definir las celdas
Por ltimo, nos queda definir cada celda gracias a la etiquetas TD y TH. Estas etiquetas son
equivalentes, pero la ltima se utiliza para encabezados, de modo que su interior se escribir por
defecto en negrita y centrado. Estos son los atributos de ambas:
.armetr
o
Utilidad
ALI3N
Alinea el contenido de la celda horizontalmente a izquierda (LE4T), derecha (RI3HT) o
centro (CENTER).
2ALI3N
Alinea el contenido de la celda verticalmente arriba (TOP), abajo (BOTTOM) o centro
(MIDDLE).
/IDTH
Especifica la anchura de la celda. Tambin se puede especificar tanto en pixels como en
porcentaje, teniendo en cuenta que, en este ltimo caso, ser un porcentaje respecto al
ancho total de la tabla (no de la ventana del navegador).
NO/RAP mpide que, en el interior de la celda, se rompa la lnea en un espacio.
COL6PAN
Especifica el nmero de celdas de la fila situadas a la derecha de la actual que se unen a
sta (incluyendo la celda en que se declara este parmetro). Es por defecto uno. Si se
pone igual a cero, se unirn todas las celdas que queden a la derecha.
RO/6PAN
Especifica el nmero de celdas de la columna situadas debajo de la actual que se unen a
sta.
Posiblemente los dos ltimos parmetros no puedan quedar claros sin ejemplos. De hecho, an
entendiendo perfectamente su funcin es habitual que confundamos a uno con otro. Pero bueno,
vamos a ver una tabla de 3x3 con una celda que se une a una de la derecha y otra que se une a otra
de debajo
!*digo esultado
<TABLE BORDER01>
<TR>
<TD COL6PAN08>1)1 E
1)8</TD>
<TD>1)9</TD>
</TR>
<TR>
<TD RO/6PAN08>8)1 E
9)1</TD>
<TD>8)8</TD>
<TD>8)9</TD>
</TR>
<TR>
<TD>9)8</TD>
<TD>9)9</TD>
</TR>
</TABLE>
1,1 y 1,2 1,3
2,1 y 3,1
2,2 2,3
3,2 3,3
Como podemos ver, cuando declaramos un celda con RO/6PAN o COL6PAN, no deberemos declarar
las celdas "absorbidas" o la creacin de la tabla se nos complicar de horrible manera.
26
Manual de HMTL 4.0
12.3. Ttulo de la tabla
Por ltimo, vamos a ver como definir un ttulo a la tabla. Esto se hace por medio de la etiqueta
CAPTION. Para ver cmo funciona, vamos a incluirlo en la declaracin de la tabla anterior:
!*digo esultado
<TABLE BORDER01>
<CAPTION>
EYemp%$ (e
taF%as
</CAPTION>
###
</TABLE>
Ejemplo de tablas
1,1 y 1,2 1,3
2,1 y 3,1
2,2 2,3
3,2 3,3
Esta etiqueta admite slo un parmetro: ALI3N, que es por defecto TOP. Si lo definimos como
BOTTOM el ttulo se colocar al final de la tabla en lugar del comienzo.
27
Diseo Web
13. Marcos v4.0
Un marco (o .rame) es una ventana independiente dentro de la ventana general del navegador. Cada
marco tendr sus bordes y sus propias barras de desplazamiento. As cada pgina se dividir en la
prctica en varias pginas independientes.
Para crearlos necesitaremos un documento HTML especfico, que llamaremos documento de
definicin de marcos. En l especificaremos el tamao y posicin de cada marco y el documento
HTML que contendr. Vamos a ver un ejemplo de este tipo de documento:
<HTML>
<HEAD>
<TITLE>Mi primera p,gina $n mar$s</TITLE>
</HEAD>
<4RAME6ET COL60G8MX)BMXG>
<4RAME NAME0Gin(ieG 6RC0Gin(ie#!tm%G>
<4RAME NAME0Gprinipa%G 6RC0Gintr$('i$n#!tm%G>
<NO4RAME6>
<P>L$ sient$) per$ sZ%$ p$(r,s Her esta p,gina
si t' naHega($r tiene %a apai(a( (e His'a%iRar
mar$s#</P>
</NO4RAME6>
</4RAME6ET>
</HTML>
Vamos a explicar detalladamente este ejemplo antes de investigar algo ms a fondo cada una de las
etiquetas. Vemos que la cabecera de la pgina es similar a un documento normal, pero el habitual
BODY es sustituido por un 4RAME6ET. En cada 4RAME6ET se divide la ventana actual (sea la general
o un marco) en varias ventanas definidas o por el parmetro COL6 o por RO/6. En ste, separado por
comas, se define el nmero de marcos y el tamao de cada uno.
Dentro del <4RAME6ET> se hacen dos cosas. Primero, definir cada uno de los marcos poniendoles un
nombre y especificando qu fichero HTML le corresponde mediante la etiqueta <4RAME>. Por ltimo,
especificamos lo que ver el usuario en el supuesto (cada vez ms raro) de que su navegador no
soporte .rames dentro de la etiqueta <NO4RAME6>. Ahora veremos todos estos elementos en mayor
detalle.
13.1. Etiqueta <FRAMESET>
Segn el estndar, esta etiqueta slo debera contener el nmero y tamao de cada marco, pero las
extensiones de Netscape y Explorer al estndar obligan a estudiar un par de parmetros ms.
En general, los navegadores dibujan un borde de separacin entre los marcos. Si deseas eliminarlo
puedes hacerlo de dos maneras: en las etiquetas <4RAME> de cada una de los marcos contiguos al
borde a eliminar o incluyendo el parmetro 4RAMEBORDER0M en el <4RAME6ET>.
Cuando eliminas ese borde, podrs ver cmo el navegador deja an un hueco entre marcos. Este se
elimina aadiendo los parmetros 4RAME6PACIN30M BORDER0M.
Vamos a examinar por ltimo los parmetros COL6 y RO/6. Deberemos asignarles una lista de
tamaos separada por comas. Se admiten los siguientes formatos de tamao:
!on porcenta7es8 Al igual que con las tablas, podemos definir el tamao de un marco como
un porcentaje del espacio total disponible.
4bsolutos8 Si ponemos un nmero a secas, el marco correspondiente tendr el tamao
especificado en pixels.
&obre el espacio sobrante8 Si colocamos un asterisco (*) estaremos indicando que
queremos todo el espacio sobrante para ese marco. Podemos poner este smbolo en varios
marcos, que se repartirn el espacio equitativamente como buenos hermanos. Si queremos
que uno tenga ms deberemos ponerle al asterisco un nmero delante. As, un marco con un
espacio de 3* ser tres veces ms grande que su compaero, que tiene un asterisco slo, el
pobre.
28
Manual de HMTL 4.0
Por ejemplo, el siguiente cdigo es una muestra de cmo combinar los tres mtodos:
<4RAME6ET COL60G1MX)[)8MM)8[G>
Supongamos que el ancho total de la ventana son 640 pixels. El primer marco ocupar el 10%, es
decir, 64 pixels. El tercero necesita 200, luego nos quedan 476 para los otros dos. Como el cuarto
debe tener el doble de espacio que el segundo, tenemos aproximadamente 158 pixels para este
ltimo y 316 para el cuarto marco.
Hay que tener cuidado cuando usamos valores absolutos en la definicin de marcos; debemos
asegurarnos de tener al menos un marco con un tamao relativo si queremos estar seguros del
aspecto final de la pgina.
Por ltimo, indicar que las etiquetas <4RAME6ET> se pueden anidar. Esto se hace poniendo otro
<4RAME6ET> donde normalmente colocamos las etiquetas <4RAME> tal que as:
<4RAME6ET COL60G8MX)BMXG>
<4RAME NAME0Gin(ieG 6RC0Gin(ie#!tm%G>
<4RAME6ET RO/60G[)BMG>
<4RAME NAME0Gprinipa%G
6RC0Gintr$('i$n#!tm%G>
<4RAME NAME0GeYemp%$sG
6RC0GeYemp%$#!tm%G>
</4RAME6ET>
</4RAME6ET>
El resultado del anidamiento lo podris contemplar aqu
.
13.2. Etiqueta <FRAME>
Esta etiqueta define tan slo las caractersticas de un marco determinado, no de un conjunto de ellos.
Estos son los parmetros que admite:
.armetro Utilidad
NAME Asigna un nombre a un marco para que despus podamos referirnos a l.
6RC ndica la direccin del documento HTML que ocupar el marco.
6CROLLIN3
Decide si se colocan o no barras de desplazamiento al marco para que podamos
movernos por su contenido. Su valor es por defecto A+TO, que deja al navegador la
decisin. Las otras opciones que tenemos son YE6 y NO.
NORE6IOE Si lo especificamos el usuario no podr cambiar de tamao el marco.
4RAMEBORDER
Al igual que su homnimo en la etiqueta <4RAME6ET>, si lo igualamos a cero se
eliminar el borde con todos los marcos contiguos que tengan tambin este valor a
cero.
MAR3IN/IDTH
Permite cambiar los mrgenes horizontales dentro de un marco. Se representa en
pixels.
MAR3INHEI3HT gual al anterior pero con mrgenes verticales.
13.3. Acceso a otros marcos
Por defecto, cuando pulsamos sobre un enlace situado dentro de un marco, la nueva pgina a la que
queremos acceder la veremos encerrada en ese mismo marco. Es posible que deseemos que esto no
ocurra. Por ejemplo, si tenemos un marco que no sirve de ndice y otro donde mostramos los
29
Diseo Web
contenidos sera deseable que los enlaces del marco ndice se abrieran en el otro marco. Esto es
posible hacerlo gracias al parmetro TAR3ET.
Este parmetro se puede colocar en tres etiquetas: <A>, <AREA> y <BA6E>. En las dos primeras
sirve para indicar el marco en el que abriremos ese enlace en particular y el ltimo modificaremos el
marco en el que por defecto se nos muestran todos los enlaces.
Pero para que un parmetro funcione, es habitual que le asignemos un valor, y TAR3ET no es una
excepcin. Para indicarle el marco que deseamos le asignaremos el nombre del mismo. As, en los
ejemplos anteriores, si en el marco llamado in(ie tenemos un enlace que queremos se abra en el
marco prinipa% pondremos:
<A HRE40Gpagina#!tm%G TAR3ET0Gprinipa%G>
Tambin existen cuatro nombres reservados que podremos utilizar en el parmetro TAR3ET:
9top
Elimina todos los marcos existente y muestra la nueva pgina en la ventana original sin
marcos.
9blan:
Muestra la nueva pgina en una ventana nueva y sin nombre del navegador.
9sel,
Muestra la nueva pgina en el marco donde est declarado el enlace.
9parent
Muestra la nueva pgina en el <4RAME6ET> que contiene al marco donde se declara el
enlace. En el ejemplo que pusimos de <4RAME6ET> anidados, una enlace situado en el
marco eYemp%$ cuyo parmetro TAR3ET fuese igual a Kparent eliminara la separacin
entre los marcos eYemp%$ y prinipa% y mostrara en ese nuevo marco la nueva pgina.
30
Manual de HMTL 4.0
1#. Ho7as de estilo v4.0
Las hojas de estilo intentan separar el contenido de un pgina de la forma de presentarlo en pantalla.
Esto lo hacen personificando los cambios que las etiquetas de formato HTML realizan en nuestro
texto. Por ejemplo, sabemos que usando <P> tendremos una prrafo nuevo con una separacin del
anterior determinada, etc.. Con las hojas de estilo tambin podremos decirle a un prrafo que todo su
texto sea verde y que adems va a tener un margen izquierdo de 30 pixels. Por ejemplo.
El primer navegador en soportar hojas de estilo fue el Explorer 3.0. Utiliza la llamada sintaxis en
cascada. El Communicator acepta esa sintaxis e introduce una nueva basada en JavaScript. Sin
embargo, como el estndar ms comnmente aceptado de sintaxis de hojas de estilo es el de
cascada, ser este el nico que veamos. Vamos a empezar con un ejemplo:
<6TYLE TYPE0Gte1t/ssG>
P \$%$rI greenA margin>%eDtI 9MA]
</6TYLE>
Vamos a detenernos en todos los elementos. Para empezar, la etiqueta HTML con la que deberemos
englobar las hojas de estilo ser <6TYLE>, que slo podr estar situada en la cabecera de la pgina.
Su parmetro TYPE indica la sintaxis que utilizaremos para definirlas. En el caso de las hojas en
cascada deber ser te1t/ss.
Ahora examinemos la hoja de estilo propiamente dicha. ndicaremos primero la etiqueta que
deseamos personalizar. Ser <P>. Despus, entre llaves, pondremos una lista de las cosas que
queremos modificar. En nuestro caso son dos, el color (en el formato habitual) y el margen, que se
define en pixels.
Hay que destacar que, aunque muchas veces los navegadores tengan una cierta manga ancha, la
sintaxis CSS (Cascading Style Sheet) es sensible a la diferencia entre maysculas y minsculas.
Conviene tener cuidado.
El HTML 4.0 permite declarar fuera de la pgina las hojas de estilo, llevando de este modo al
extremos su filosofa de separar forma y contenido. Si colocamos nuestras hojas de estilo en un
fichero llamado esti%$s#ss (solo las hojas, no la etiqueta <STYLE>) no tendremos ms que incluir
la siguiente lnea en la cabecera de nuestro documento HTML para incluirlas en nuestras pginas:
<LIN7 REL0GstE%es!eetG HRE40Gesti%$s#ssG TYPE0Gte1t/ssG>
Vamos a ver cmo quedara un prrafo que siguiese la hoja de estilo anterior
Si la cosa va bien, este prrafo estar escrito en verde y con un margen izquierdo de 30
pixels. Precioso, no? embargo, estoy convencido de que los ms avispados se habrn dado
cuenta de que les estoy ocultando algo. Por lo que he dicho hasta ahora la personalizacin de
una etiqueta debera ser general y en esta pgina slo este prrafo est modificado. No os
preocupis demasiado, ahora os cuento como se hace.
14.1. Clases
Hasta ahora habamos definido estilos para una etiqueta determinada. Pero tambin podemos
hacerlo para una clase determinada. Esto que significa? Pues que si, por ejemplo, definimos la hoja
de estilo de la clase verde de la siguiente manera:
P#Her(e \$%$rI greenA margin>%eDtI 9Mp1A]
slo estarn verdes y con un margen izquierdo de 30 pixels aquellos prrafos definidos con <P
CLA660GHer(eG>. As de sencillo.
Ampliando un poco ms las posibilidades de las clases, se pueden realizar excepciones.
Supongamos que tenemos unos prrafos que queremos que tengan unos mrgenes determinados y
color verde. Y deseamos que uno solo de esos prrafos, con los mismo mrgenes, sea azul.
Podramos definir dos clases distintas, pero hay un mtodo mejor: usar el parmetro ID. Por ejemplo:
31
Diseo Web
a%%#Her(e \$%$rI greenA margin>%eDtI 1Mp1A]
@eY1 \ $%$rI F%'eA]
Ahora todos los prrafos de clase verde seran, obviamente, verdes y con un margen de 10 pixels.
Sin embargo el prrafo definido por <P CLA660GHer(eG ID0GeY1G> ser azul:
14.2. Etiquetas <SPAN> y <DV>
Puede que, a veces, no queramos modificar el comportamiento de un elemento sino que creemos un
estilo que queremos acte slo, un estilo completo creado de la nada. Una etiqueta nueva y propia.
Entonces, qu hacemos? Utilizar las etiqueta <6PAN> y <DV>.
El mtodo es simple. Definimos una clase "ro7o" que simplemente modifique el color (que ser rojo).
Ahora, si queremos que una seccin de texto est en rojo lo encerraremos entre las etiquetas <6PAN
CLA660Gr$Y$G> y </6PAN> o entre <DI2 CLA660Gr$Y$G> y </DI2>.
La diferencia entre ambas es que, mientras 6PAN realmente no hace nada por s misma, DI2
convierte a todo lo que encierra en un bloque aparte (poniendo un salto de lnea tanto al comienzo
como al final). Veremos en el siguiente captulo que a las etiquetas que se comportan como bloques
(<P>, <H1>, las que dijimos modifican un prrafo entero) se les pueden definir atributos propios desde
las hojas de estilo. Por ejemplo, si definimos las siguientes hojas:
a%%#tit'%$ \ margin>t$pI >8:p1A $%$rI F%'eA D$nt>siReI 8Mp1A]
a%%#s$mFra \ margin>t$pI 8p1A margin>%eDtI 8p1A $%$rI F%a^A D$nt>
siReI 8Mp1A]
cuyos atributos explicaremos en la referencia de las hojas de estilo, y ponemos el siguiente cdigo
HTML:
<DI2 ALI3N0GCENTERG CLA660Gs$mFraG>E% maraHi%%$s$ 'rs$ (e HTML</DI2>
<DI2 ALI3N0GCENTERG CLA660Gtit'%$G>E% maraHi%%$s$ 'rs$ (e HTML</DI2>
obtendremos este bello efecto:
En el siguiente captulo tenis una gua de referencia con todos (o casi todos) los atributos que se
pueden modificar con CSS.
32
Manual de HMTL 4.0
1$. Ho7as de estilo8 re,erencia v4.0
En este captulo vamos a ver todas (o casi todas) las propiedades que se pueden alterar por medio
de las hojas de estilo. Hay que indicar que algunos de ellos no los soporta el Explorer y en cambio
otros no los entiende el Communicator. As que es recomendable probarlos en ambos exploradores
antes de incorporarlos a nuestras pginas.
15.1. Propiedades de bloque
Vamos a empezar con las propiedades de bloque, que definen cosas como los mrgenes o la
colocacin de bloques de contenido HTML:
.ropiedad 6escripci*n .osibles "alores
margin>t$p) margin>
rig!t) margin>
F$tt$m) margin>%eDt)
marginI t$p rig!t
F$tt$m %eDt
Distancia mnima entre un bloque y los dems
elementos. Tanto margin como margins(" se
utilizan para cambiar todos estos atributos a la
vez.
tamao, porcentaje o
a't$. Por defecto es
cero.
pa((ing>t$p)
pa((ing>rig!t)
pa((ing>F$tt$m)
pa((ing>%eDt)
pa((ingI t$p rig!t
F$tt$m %eDt
Distancia entre el borde y el contenido de un
bloque.
tamao, porcentaje o
a't$. Por defecto es
cero.
F$r(er>t$p>Li(t!)
F$r(er>rig!t>Li(t!)
F$r(er>F$tt$m>Li(t!)
F$r(er>%eDt>Li(t!)
F$r(er>Li(t!I t$p
rig!t F$tt$m %eDt
Anchura del borde de un bloque. numrico
F$r(er>stE%e Estilo del borde de un bloque.
n$ne, s$%i( o 9D,
por defecto ninguno
(n$ne).
F$r(er>$%$r Color del borde de un bloque. cualquier color
Li(t!) !eig!t
Tamao de un bloque. Su mayor utilidad est en
su aplicacin a un elemento grfico.
tamao, porcentaje o
a't$, automtico por
defecto.
D%$at Justificacin del contenido de un bloque.
%eDt, rig!t o n$ne,
por defecto ninguna.
%ear
Permiso para que otro elemento se pueda colocar
a su izquierda o derecha.
%eDt, rig!t, F$t! o
n$ne, por defecto
ninguno.
15.2. Propiedades de tipo de letra
Ahora vamos a examinar las propiedades del tipo de letra que el usuario va a ver. Son las siguientes:
6escripci*n .osibles "alores
D$nt>
Dami%E
Tipo de letra (que puede ser
genrico) que vamos a usar.
lista de tipos, ya sean genricos o no, separados por
comas.
D$nt>siRe Tamao del tipo de letra. 11>sma%%, 1>sma%%, sma%%, me(i'm, %arge, 1>
%arge, 11>%arge, tamao relativo o tamao absoluto.
33
Diseo Web
Por defecto me(i'm.
D$nt>
Leig!t
Grosor del tipo de letra
(negrita).
n$rma%, F$%(, F$%(er, %ig!ter o 100-900 (donde
900 es la negrita ms gruesa). Por defecto n$rma%.
D$nt>stE%e
Estilo del tipo de letra
(cursiva).
n$rma%, ita%i, ita%i sma%%>aps, $F%i&'e,
$F%i&'e sma%%>aps o sma%%>aps. Por defecto
n$rma%.
Cabe recordar que los tipos genricos son seriD, sans>seriD, 'rsiHe, DantasE y m$n$spae.
Cada uno de estos tipos sern equivalentes a alguno que pueda tener instalado el ordenador del
usuario. As, por ejemplo, en un PC con Windows instalado seriD puede equivaler a Times New
Roman y m$n$spae a Courier.
15.3. Propiedades de formato del texto
Nuesto siguiente objetivo van a ser las propiedades de formato del texto que cualquier procesador de
textos nos permite cambiar.
.ropiedad 6escripci*n .osibles "alores
%ine>!eig!t nterlineado. nmero o porcentaje.
te1t>
(e$rati$n
Efectos variados sobre el
texto.
n$ne, 'n(er%ine (subrayado), $Her%ine (como
subrayado, pero por encima), %ine>t!r$'g! (tachado) o
F%in^ (parpadeante); por defecto ninguno.
Hertia%>
a%ign
Posicin vertical del
texto.
Fase%ine (normal), s'F (subndice), s'per (superndice),
t$p, te1t>t$p, mi((%e, F$tt$m, te1t>F$tt$m o un
porcentaje. Por defecto Fase%ine
te1t>
transD$rm
Transforma el texto a
maysculas o
minsculas.
apita%iRe (pone la primera letra en maysculas),
'pperase (convierte todo a maysculas), %$Lease (a
minsculas) o n$ne, por defecto no hace nada.
te1t>a%ign Justificacin del texto. %eDt, rig!t, enter o Y'stiDE
te1t>in(ent
Tabulacin con que
aparece la primera lnea
del texto.
tamao o porcentaje, por defecto cero.
15.4. Propiedades de color y fondo
Tambin es posible cambiar los colores y el grfico de fondo de un elemento.
.ropiedad 6escripci*n .osibles "alores
$%$r Color del texto. un color (en el formato habitual).
Fa^gr$'n(
Modifica tanto el grfico
el color de fondo.
direccin del fichero que contiene la imagen o un color.
Hay que decir que, en la sintaxis en cascada, las direcciones se expresan del siguiente modo:
Fa^gr$'n(I 'r%(D$n($F$nit$#giD"A
15.5. Propiedades de clasificacin
Hasta ahora habamos distinguido a la hora de ver las propiedades de un elemento en si estos eran
tratados como bloques o no. Pero el ser bloques o no... no es acaso otra propiedad? Estas y otras
formas de clasificar los elementos se pueden cambiar usando las siguientes propiedades:
.ropiedad 6escripci*n .osibles "alores
34
Manual de HMTL 4.0
(isp%aE
Decide si un elemento es interior (como
<I>), un bloque (<P>) o un elemento
de una lista (<LI>).
in%ine, F%$^, %ist y n$ne (que 'apaga'
el elemento)
%ist>stE%e
Estilo de un elemento de una lista,
pudiendo incluir un grfico al comienzo
del mismo.
(is, ir%e, s&'are, (eima%, %$Ler>
r$man, 'pper>r$man, %$Ler>a%p!a,
'pper>a%p!a, n$ne o la direccin de un
grfico
L!ite>spae
Decide como se manejan los espacios,
si de manera normal o como sucede
dentro de la etiqueta <PRE>.
n$rma% y pre
35
Diseo Web
1%. Lengua7es de script v4.0
Un lenguaje de script es un pequeo lenguaje de programacin cuyo cdigo se inserta dentro del
documento HTML. Este cdigo se ejecuta en el navegador del usuario al cargar la pgina, o cuando
sucede algo especial como puede ser el pulsar sobre un enlace.
Estos lenguajes permiten variar dinmicamente el contenido del documento, modificar el
comportamiento normal del navegador, validar formularios, realizar pequeos trucos visuales, etc...
Sin embargo, conviene recordar que se ejecutan en el navegador del usuario y no en la mquina
donde estn alojadas, por lo que no podrn realizar cosas como manejar bases de datos. Esto hace
que los contadores (por ejemplo) se deban realizar de otra manera, utilizando programas CG.
El primer lenguaje de scri,* que vi la luz fue el JavaScript de Netscape. Nacido con la versin 2.0 de
este navegador y basado en la sintaxis de Java, su utilidad y el casi absoluto monopolio que entonces
ejerca Netscape en el mercado de navegadores permitieron que se popularizara y extendiera su uso.
El mximo rival del Netscape Navigator, el nternet Explorer de Microsoft, comenz a soportar este
lenguaje en su versin 3.0. Fue tambin entonces cuando introdujo el nico rival serio que el
JavaScript ha tenido en el mercado de los lenguajes de scri,*: el VBScript. Basado en el lenguaje
BASC, no ha tenido excesiva difusin en nternet debido a la previa implantacin del JavaScript y a
que son de parecida funcionalidad, pero s es utilizado dentro de ntranets basadas en el Explorer y
dentro de otras aplicaciones de Microsoft, como S, Access, Word, etc..
16.1. Javascript
Como este curso est orientado a nternet, no vamos a ver nada de VBScript aqu por las razones
comentadas anteriormente. Pero para ilustrar la utilidad de los lenguajes de scri,*, vamos a realizar
una pequea introduccin al Javascript.
Vamos a realizar nuestro primer "programa" en JavaScript. Haremos surgir una ventana que nos
muestre el famoso mensaje "hola, mundo". As podremos ver los elementos principales del lenguaje.
El siguiente cdigo es una pgina Web completa con un botn que, al pulsarlo, muestra el mensaje.
<HTML>
<HEAD>
<6CRIPT LAN3+A3E0G5aHa6riptG>
<=>>>
D'nti$n H$%aM'n($(" \
a%ert(G_H$%a) m'n($=G"A
]
// >>>>
</6CRIPT>
</HEAD>
<BODY>
<4ORM>
<INP+T TYPE0GF'tt$nG NAME0GB$t$nG 2AL+E0GP'%sameG $nC%i^0GH$%aM'n($("G>
</4ORM>
</BODY>
</HTML>
Ahora vamos a ver, paso por paso, que significa cada uno de los elementos extraos que tiene la
pgina anterior:
<6CRIPT LAN3+A3E0G5aHa6riptG>
</6CRIPT>
Dentro de estos elementos ser donde se puedan poner funciones en JavaScript. Puedes poner
cuantos quieras a lo largo del documento y en el lugar que ms te guste. Si un navegador no entiende
la etiqueta <6CRIPT> escribir lo que hay entre medias de estos elementos, as que lo encerramos
entre comentarios por si las moscas.
36
Manual de HMTL 4.0
D'nti$n H$%aM'n($(" \
a%ert(G_H$%a) m'n($=G"A
]
Esta es nuestra primera funcin en JavaScript. En el cdigo de la misma vemos una llamada al
mtodo a%ert (que pertenece al objeto Lin($L) que es la que se encarga de mostrar el mensaje en
pantalla. Por un fallo del Netscape no se pueden poner las etiquetas HTML de caracteres especiales
en una funcin: no los reconoce. As que pondremos directamente "" arriesgndonos a que salga de
otra manera en ordenadores con un juego de caracteres distinto al del nuestro.
<4ORM>
<INP+T TYPE0GF'tt$nG NAME0GB$t$nG 2AL+E0GP'%sameG $nC%i^0GH$%aM'n($("G>
</4ORM>
Dentro del elemento que usamos para mostrar un botn vemos una cosa nueva: $nC%i^. Es un
e/en*o. Cuando el usuario pulsa el botn, el evento onClick se dispara y ejecuta el cdigo que tenga
entre comillas, en este caso la llamada a la funcin H$%aM'n($(", que tendremos que haber definido
con anterioridad.
37
Diseo Web
1/. !apas v4.0
Las capas se pueden definir como pginas que se pueden incrustar dentro de otras. Los atributos de
una capa (posicin, visibilidad, etc.), como los de cualquier otro elemento HTML, pueden definirse
dentro de una hoja de estilo. Su contenido, en cambio, siempre deber ser especificado dentro de la
parte principal de la pgina. Como se puede ver, de nuevo estamos siguiendo la filosofa de separar
el contenido y la forma de representarlo.
En realidad, el nombre de capas no es nada oficial: es un invento de Netscape. La denominacin
oficial podra traducirse como "contenido HTML posicionable dinmicamente". Toma ya. Tampoco se
las puede considerar dentro de ningn estndar HTML sino de los estndares CSS, pero son la base
de lo que se ha dado en llamar HTML dinmico.
Sin duda, lo ms importante de las capas es la posibilidad que presentan de ser movidas y
modificadas desde un lenguaje de scri,*. Desgraciadamente, las implementaciones de Netscape y
Explorer son incompatibles entre s, por lo que resulta complicado escribir cdigo que funcione en
ambas plataformas. Estos temas los estudia en profundidad.
17.1. Definicin
La nica manera comn de definir capas en Explorer y Netscape (versiones 4 y superiores cuandos
las haya) es mediante hojas de estilo en sintaxis CSS, por lo que ser la que usemos de aqu en
adelante.
La definicin de una capa sigue la misma estructura que la que usabamos para decidir las
caractersticas de una etiqueta con el parmetro ID:
<6TYLE TYPE0Gte1t/ssG>
@miapa \p$siti$nIaFs$%'teA t$pI1MMp1A %eDtI8Mp1A]
</6TYLE>
Esto colocara a la capa que hemos denominado miapa a 20 pixels de la izquierda
de la pgina y a 100 del comienzo de la misma. Muy bien, pero... donde escribimos
lo que queremos que contenga la capa? Utilizaremos para ello la etiqueta <DI2>:
<DI2 ID0GmiapaG>
<H1>E% t.t'%$ (e %a apa</H1>
<P>A&'. es ($n(e ir.a e% te1t$#
###
</DI2>
Las capas que hemos definido hasta ahora se colocan en una posicin determinada de la pgina.
Pero existe otro tipo de capas llamadas flotantes cuya colocacin depende, en cambio, de la posicin
dentro del cdigo fuente de la pgina donde las hayamos colocado. Se definen as:
<6TYLE TYPE0Gte1t/ssG>
@D%$tante \p$siti$nI re%atiHeA %eDtI 8Mp1A t$pI 1MMp1A]
</6TYLE>
17.2. Propiedades
Existen varias propiedades de las capas que podemos modificar, como son la posicin, la visibilidad,
el orden en que se ponen en pantalla, etc... Son estos:
38
Manual de HMTL 4.0
.ropiedad 6escripci*n .osibles "alores
%eDt E t$p
Sitan la esquina superior izquierda de la capa
respecto a la esquina superior izquierda de la
capa donde est metida. Hay que tener en
cuenta que el documento completo tambin se
considera una capa.
distancia en pixels, por
defecto cero.
Li(t! E !eig!t Determinan la anchura y altura de la capa. un tamao en pixels.
%ip
Nos permite definir el rea que se podr ver
dentro de la capa. Por ejemplo,
%ipIret(8Mp1 9Mp1 :Mp1 1Mp1"A
recortar la capa creando un cuadro visible
cuya esquina superior izquierda est a 10 pixels
por la izquierda y 20 por arriba de la de la capa
y cuyo tamao sera de 30-10 de ancho y 40-20
de alto.
un rea.
R>in(e1
Las capas con un mayor R>in(e1 se colocarn
ms arriba (se dibujarn al final, encima de las
otras). Debe ser un valor positivo y nico: dos
capas no pueden tener el mismo R>in(e1.
nmero positivo, por defecto
las capas definidas en el
cdigo HTML ms tarde
estn ms arriba.
HisiFi%itE Especifican si la capa debe verse o estar oculta.
HisiF%e, !i((en (oculta) o
in!erit (hereda la
visibilidad de la capa padre).
En aquellas capas que
simplemente estn dentro de
la pgina principal, este
valor es equivalente a
HisiF%e.
Fa^gr$'n(>image Grfico de fondo de la capa. una direccin.
Fa^gr$'n(>$%$r
%aEer>Fa^gr$'n(>
$%$r
Color de fondo de la capa. un color.
39
Diseo Web
11. &onido
An cuando les pueda parecer increble a algunos hombres de poca fe, es posible escuchar sonidos
(o msica) desde el propio navegador. Tanto Netscape como Explorer incorporan desde hace tiempo
la capacidad de reproducir sonido. El nico problema es que los archivos suelen ser grandes y,
siendo algo innecesario y superfluo, poca gente incluye melodas en sus pginas.
Los formatos que se puede asegurar que los navegadores reproducirn son los archivos WAV y MD.
Para poder reproducir otros necesitarn el ,lug0in o aadido necesario, como puede ser el Real Audio
para los archivos RA o el ModPlug para los MOD y derivados.
18.1. Sonido activado por el usuario
La manera ms sencilla de incluir sonidos es dejando al usuario la decisin de escucharlos o no. Para
hacerlo incluiremos el sonido en el parmetro HRE4 de un enlace, como si fuera una pgina HTML:
<A HRE40G!$%a#LaHG>P'%sa a&'. para es'!arG <A>
20.2. Sonido de fondo
Lo del sonido de fondo ya es ms complicado, ya que Netscape y Explorer ofrecen soluciones
propietarias, distintas e incompatibles de hacer sonar un archivo de fondo.
En Explorer, desde la versin 2.0, se pueden incluir fondos sonoros utilizando la etiqueta B36O+ND:
<B36O+ND 6RC0Gm'sia#mi(G>
El parmetro 6RC indicar el archivo a reproducir. Esta etiqueta admite tambin otro parmetro,
LOOP, que indica el nmero de veces consecutivas que sonar el fichero. Si se indica
LOOP0GinDiniteG, el archivo se reproducir indefinidamente, mientras estemos en la pgina.
Netscape utiliza su etiqueta <EMBED>. Tericamente, esta etiqueta debera servir para unir objetos de
varios tipos a la pgina web, pero en la prctica slo se utiliza para esto. Esta etiqueta tiene los
siguiente parmetros:
.armetro Utilidad
6RC Contiene el nombre de archivo de sonido a reproducir
/IDTH E HEI3HT
En Netscape aparece un pequeo reproductor, estos parmetros especifican su
tamao.
A+TO6TART0Gtr'
eG
Arranca automticamente la reproduccin.
LOOP0Gtr'eG Reproduce ininterrumpidamente el fichero hasta que salimos de la pgina.
HIDDEN0Gtr'eG Oculta el reproductor.
Sin embargo, y debido a algunos bugs, si queremos reproducir infinitamente un archivo con el
reproductor oculto, deberemos incluir todos los parmetros, incluyendo /IDTH y HEI3HT. Adems, si
el usuario tiene algn ,lug0in de sonido extrao, en lugar del que viene con Netscape, es posible que
deje de funcionar correctamente.
Dado que ambas etiquetas son incompatibles entre s, basta con incluir las dos... o, mejor dicho,
bastaba. Ahora el Explorer es capaz de interpretar ;EM<E6=, pero no exactamente de la misma
manera, lo que provoca que aparezca una ventana aparte con el reproductor. En definitiva, la mejor
manera de mostrar una msica de fondo es usando un pequeo scri,* que averigue en qu
navegador est instalado y discrimine.
<B36O+ND 6RC0G##/s$ni($s/pet#mi(G LOOP0GinDiniteG>
<6CRIPT LAN3+A3E0G5aHasriptG>
iD (naHigat$r#appName00GNetsapeG"
40
Manual de HMTL 4.0
($'ment#Lrite(`<EMBED 6RC0G##/s$ni($s/pet#mi(G /IDTH08M HEI3HT09M
HIDDEN0Gtr'eG A+TO6TART0Gtr'eG LOOP0Gtr'eG>`"A
</6CRIPT>
41