Curso de HTML 4.

0
http://www.programacion.com/html/tutorial/curso/
ndice
ntroduccin al curso
o Requisitos
o Agradecimientos
Versiones del HTML
o HTML 2.0
o HTML 3.0 y 3.2
o HTML 4.0
o Estndares en este curso
Mi primera pgina
o El cdigo
o La explicacin
o El cuerpo del documento
Formateo bsico
o Formato del prrafo
o Las 6 cabeceras
o Cambiando el tipo de letra
o Formato de frase
o Otros elementos
Caracteres especiales
o Caracteres extendidos en HTML
o Caracteres de control
Enlaces
o La etiqueta <A>
o Las URLs
o Anclas
Listas
o Listas desordenadas
o Listas ordenadas
o Listas de definiciones
mgenes
o mgenes y enlaces
o Alineacin respecto al texto
Formateo fino
o Cambio de color
o Tamaos del texto
o Tipo de letra
Estructura del documento
o La cabecera
o El cuerpo
Formularios
o Cajas de texto
o Opciones
o Botones del formulario
o Otros elementos
Controles avanzados para formularios
o Botones
o Etiquetas
o Agrupacin de elementos
o Desactivacin de elementos
Mapas
o Mapas gestionados por el cliente
o Cmo usar un mapa
Tablas
o Definir las filas
o Definir las celdas
o Ttulo de la tabla
Marcos
o Etiqueta <FRAMESET>
o Etiqueta <FRAME>
o Acceso a otros marcos
Hojas de estilo
o Clases
o Etiquetas <SPAN> y <DV>
Hojas de estilo: referencia
o Propiedades de bloque
o Propiedades de tipo de letra
o Propiedades de formato del texto
o Propiedades de color y fondo
o Propiedades de clasificacin
Lenguajes de script
o Javascript
Capas
o Definicin
o Propiedades
Sonido
o Sonido activado por el usuario
o Sonido de fondo
Gua de estilo
o Contenido
o Navegacin
o Estructura de las pginas
o Accesibilidad
o Diseo
o Mantenimiento y pruebas
Enlaces a otras pginas
o Otros manuales de HTML
o Sobre JavaScript
o Sobre HTML dinmico
o Sobre otras tecnologas relacionadas
FAQ (Preguntas ms frecuentes)
o Para comentarme algo o preguntar otra cosa
Introduccin al curso
Este curso ha nacido con la intencin de complementar los anteriores cursos de JavaScript y HTML
dinmico que tengo en estas pginas. As podrs terminar creando una pgina de calidad empezando
desde cero.
Lo primero que hay que decir es que este curso no explica ningn estndar especfico, ni examina
exaustivamente todos los parmetros de las etiquetas HTML. ntenta ser una gua prctica, de modo que
incluir todas las cosas que yo crea importantes y que me han provocado algn quebradero de cabeza
mientras realizaba mis pginas. El curso y sus ejemplos los he probado con Explorer 4 y Netscape 4.
Si tu navegador es capaz de manejar ms de una ventana a la vez, las pginas de ejemplo del curso se
vern en otra ventana (slo una). De este modo es posible observar a la vez el ejemplo y la explicacin y
se evita la proliferacin excesiva de ventanas.
Requisitos
Si ests viendo este curso ya tienes en tus manos el requisito ms difcil de cumplir: tener acceso a
nternet y un navegador. El otro requisito es un editor de textos con el que hacer las pginas. Da lo mismo
cual. Para hacer este curso yo utilic el de MS-DOS, por ejemplo. Sin embargo, es posible entender el
curso sin hacer una sola pgina, aunque siempre es recomendable practicar.
Podis hacer pginas con algn editor especfico de pginas web, pero no es necesario. Es ms, algunos
de esos editores esconden las etiquetas HTML al usuario, de modo que posiblemente lo que aprendas
aqu te sera de poca utilidad.
Tampoco requiere que lo leis conectados, ya que os podis descargar el curso ( chtml.zip).
Agradecimientos
Aparte de dar las gracias a todos aquellos que visitan la web y en especial a los que se toman la molestia
de rellenar el formulario de abajo, quiero agradecer especialmente desde aqu a todos aquellos que han
colaborado en mejorar estas pginas. En especial a Peter Promenade, por indicarme la nueva manera de
justificar el texto en HTML 4.0 y a Juan Jos Nuevo, por ayudarme con el sonido.
Versiones del HTML
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.
HTML 3.0 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.
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.
!st"ndares en este curso
En principio cualquier navegador debera ser capaz de interpretar el HTML 3.2, pero por si necesitais
saber por alguna razn el estndar al que pertenece una etiqueta o parmetro en particular, se incluir
una de las siguientes indicaciones:

ntroducido con la versin 3.2 del HTML

ntroducido con la versin 4.0 del HTML

Etiqueta o parmetro no estndar soportado slo por el Netscape

Etiqueta o parmetro no estndar soportado slo por el Explorer

Mi #rimera #"gina
!l cdigo
#rimera.$tml
<codigo><HTML>
<HEAD>
<TITLE>Mi primera pagina</TITLE>
</HEAD>
<BODY>
<CENTER><H1>Mi Primera pagina</H1></CENTER>
<HR>
<P>E!a e mi primera pagina "c#ipa$% Por e&
momen!o no e '(e !endra) pero den!ro de poco
pondre a'(i m(c#a coa in!erean!e%
</BODY>
</HTML>
Tambin puedes ver el resultado de este ejemplo.
La e%#licacin
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,me!ro> %%% </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.
!l cuer#o del documento
Ahora vamos a indicar el contenido. Lo primero ser indicar que estamos en el cuerpo del documento:
<BODY> %%% </BODY>
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>E!a e mi primera pagina "c#ipa$% Por e&
momen!o no - '(e !endr,) pero den!ro de
poco pondr- a'(. m(c#a coa in!erean!e%
En el siguiente captulo veremos muchas etiquetas que nos permitirn cambiar el aspecto de nuestros
textos
&ormateo '"sico
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.
&ormato del #"rra(o
Estas son las etiquetas ms importantes (excluyendo algunas que veremos ms adelante):
!tiqueta )tilidad Resultado
<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> %%%
Representa el texto encerrado en
E!o2 en pao 3i4o
</PRE>
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.
<DI5
ALI6N01> %%%
</DI5>
Permite justificar el texto del prrafo
a la izquierda (ALI6N0LE7T),
derecha (RI6HT), al centro (CENTER)
o a ambos mrgenes (8+9TI7Y )
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.
<ADDRE99> %%%
</ADDRE99>
Para escribir direcciones (de esas
donde vive la gente, no
electrnicas).
Daniel Rodrguez
Herrera
C/Ecuador 9, 1
!"!!# $a%ada&onda
<BLOC:*+OTE> %%
% </BLOC:*+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)
Las * ca'eceras
El HTML nos ofrece seis etiquetas distintas para mostrar cabeceras. Son stas:
!tiqueta Resultado
<H1> %%% </H1>
Ca'ecera de ni+el ,
<H;> %%% </H;>
Ca'ecera de ni+el 2
<H<> %%% </H<>
Ca'ecera de ni+el 3
<H=> %%% </H=>
Ca'ecera de ni+el 4
<H>> %%% </H>>
Ca'ecera de ni+el -
<H?> %%% </H?>
Ca'ecera de ni+el *
Estas etiquetas se pueden definir como de formato de prrafo pero por su importancia he prefirido
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.
Cam'iando el ti#o 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.
!tiqueta )tilidad Resultado
<B> %%% </B>
Pone el texto en
negrita.
.o un te%to
negro como el
ti/n
<I> %%% </I>
Representa el texto
en cursiva.
Esto' ladeado
<+> %%% </+>
Para subrayar
algo.
Como soy muy
importante
estoy
subrayado
<9> %%% </9><imagenen&inea
direccion0@gra3ico/<;%gi3@
decripcion0@HTML <%;@/>
Para tachar.
A m, en
cambio, nadie
me quiere
<TT> %%% </TT>
Permite
representar el texto
en un tipo de letra
de paso fijo.
No o2
AariaB&e
<9+P> %%% </9+P>
Letra superndice. E=mc
2
<9+B> %%% </9+B>
Letra subndice. a
i,j
=b
i,j
+1
<BI6> %%% </BI6>
ncrementa el
tamao del tipo de
letra.
Soy GRANDE
<9MALL> %%% </9MALL>
Disminuye el
tamao del tipo de
letra.
Cre ver un lindo
gatito
<BLIN:> %%% </BLIN:>
Hace parpadear el
texto. Resulta algo
irritante.
Molesto?
&ormato de (rase
En estos elementos indicas el tipo de informacin que encierran las etiquetas, pero no como se
representan:
!tiqueta )tilidad Resultado
<CITE> %%%
</CITE>
Para citar un texto ajeno. Esta frase no es ma
<CODE> %%%
</CODE>
Para escribir cdigo fuente.
in! 10CD
<9TRON6> %%%
</9TRON6>
La cosa es importante. Hay cosas im#ortantes.
<EM> %%% </EM>
Para dar nfasis.
Hay que poner (nfasis en
algunas cosas.
<:BD> %%%
</:BD>
Texto tecleado por el usuario.
El usuario debe teclear
M(&!iAac e e& me4or.
<5AR> %%%
</5AR>
Representar variables de un
cdigo.
La variable ), definida
anteriormente...
<9AMP> %%%
</9AMP>
Para representar una serie de
caracteres literalmente.
Estoy en un &i!era&
<ABBR> %%%
</ABBR>
Abreviaturas.
La WWW usa el protocolo
http
No son muy utilizados, ya que no permiten tener un control exacto de la manera en que la pgina se
representar finalmente.
0tros elementos
Por ltimo, debemos estudiar algunas cosas que no son texto y que podemos incorporar a nuestra
pgina.
!tiqueta )tilidad Resultado
<HR>
nserta una barra horizontal.
<BR>
Salto de lnea.
Hay un antes y un
despus de saltar a otra lnea
<EFF %%% FF>
Comentarios. Esto se escribe y
Aqu tenemos en un ejemplo casi todas las etiquetas estudiadas.
Mi segunda pagina
La primera version de esta pagina
Esta es mi primera pagina (chispas). Por el momento no se que tendra, pero dentro de
poco pondre aqui muchas cosas interesantes.
La primera version de esta pagina, ahora actualizada
Esta es mi primera pagina (chispas). Por el momento no se que tendra, pero dentro de
poco pondre; aqui muchas cosas interesantes.
Y esta es la segunda version
Ya tenemos aqui las cosas interesantes. Tenemos a mi novia Loli diciendo que
Como me pongas en tu pagina te atizo.
Tamien podemos a ver a mi querido perro !u!u diciendo guau, guau ", sore todo, el
codigo !uente de este e#emplo$
<HTML>
<HEAD>
<TITLE>Mi eg(nda pagina</TITLE>
</HEAD>
<BODY>
<DI5 ALI6N0CENTER><H1>Mi eg(nda pagina</H1></DI5>
<H;>La primera Aerion de e!a p,gina</H;>
<HR>
<P>E!a e mi primera pagina "c#ipa$% Por e& momen!o no e '(e
!endra) pero den!ro de poco pondre a'(i m(c#a coa
in!erean!e%
<BR><BR><H;>La primera Aerion de e!a pagina) a#ora ac!(a&iGada</H;>
<HR>
<DI5 ALI6N0CENTER>E!a e mi <9TRON6>primera</9TRON6> pagina
"<I>c#ipa</I>$% Por e&
momen!o no e '(e !endra) pero <9>den!ro de poco</9> pondre
<EM>a'(i</EM> m(c#a coa <B>in!erean!e</B>%</DI5>
<BR><BR><H;>Y e!a e &a eg(nda AeriHn</H;>
<P>Ya !enemo a'(i &a coa in!erean!e% Tenemo a mi noAia
<BI6>Lo&i</BI6> diciendo '(e <BLOC:*+OTE>Como me ponga en !( pagina
!e a!iGo%</BLOC:*+OTE>
TamBien podemo a Aer a mi '(erido perro <I>3(3(</I> diciendo
<CITE>g(a() g(a(</CITE> 2)
oBre !odo) e& codigo 3(en!e de e!e e4emp&oI
<PRE>
<EFF A'(i e!aria e& codigo 3(en!e '(e no Ao2 a poner por'(e
en!rariamo en (n circ(&o Aicioo%FF>
</PRE>
</BODY>
</HTML>
Caracteres es#eciales
Si os habeis 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.
Caracteres e%tendidos en HTML
La manera de incluir los caracteres extendidos (cuyo nmero est ms all del 127) consiste en encerrar
el cdigo entre los caracteres JK y D. As pues, lo siguiente:
JK1LMD
nos debera dar un medio (). Tambi existe una serie de sinonimos para poder recordar con ms
facilidad estos caracteres. As, por ejemplo, JK1LMD tambin se puede escribir como J3rac1;D.
Vamos a ver algunos de estos cdigos, los ms tiles a la hora de escribir en espaol:
Cdigo Resultado
Jaac(!eD) JAac(!eD) Jeac(!eD)
JEac(!eD)%%%
, , , , , , , , y
N 2 N
y
Ji'(e!D

Jie1c&D

JordmD

Jord3D

J!radeD o JK1><D
o
Jcop2D

JregD

JnBpD
(espacio en blanco que no puede ser
usado para saltar de lnea)
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:
Cdigo Resultado
J&!D
<
Jg!D
>
JampD
&
J'(o!D
"
Ahora podremos ver el ejemplo anterior corregido para incluir acentos y dems. Tambin tenis a vuestra
disposicin la tabla completa de caracteres del HTML 2.0.
Mi segunda pgina
La primera versin de esta pgina
Esta es mi primera p%gina (chispas). Por el momento no s& que tendr%, pero dentro de
poco pondr& aqu' muchas cosas interesantes.
La primera versin de esta pgina, ahora actualizada
Esta es mi primera p%gina (chispas). Por el momento no s& que tendr%, pero dentro de
poco pondr& aqu muchas cosas interesantes.
Y esta es la segunda version
Ya tenemos aqu' las cosas interesantes. Tenemos a mi novia Loli diciendo que
Como me pongas en tu p%gina te atizo.
Tami&n podemos a ver a mi querido perro !u!u diciendo guau, guau ", sore todo, el
c(digo !uente de este e#emplo$
<HTML>
<HEAD>
<TITLE>Mi eg(nda pJaac(!eDgina</TITLE>
</HEAD>
<BODY>
<DI5 ALI6N0CENTER><H1>Mi eg(nda pJaac(!eDgina</H1></DI5>
<H;>La primera AeriJoac(!eDn de e!a pJaac(!eDgina</H;>
<HR>
<P>E!a e mi primera pJaac(!eDgina "c#ipa$% Por e& momen!o no
Jeac(!eD '(e
!endrJaac(!eD) pero den!ro de poco pondrJeac(!eD a'(Jiac(!eD m(c#a
coa
in!erean!e%
<BR><BR><H;>La primera AeriJoac(!eDn de e!a pJaac(!eDgina) a#ora
ac!(a&iGada</H;>
<HR>
<DI5 ALI6N0CENTER>E!a e mi <9TRON6>primera</9TRON6> pJaac(!eDgina
"<I>c#ipa</I>$% Por e&
momen!o no Jeac(!eD '(e !endrJaac(!eD) pero <9>den!ro de poco</9>
pondrJeac(!eD
<EM>a'(Jiac(!eD</EM> m(c#a coa <B>in!erean!e</B>%</DI5>
<BR><BR><H;>Y e!a e &a eg(nda AeriHn</H;>
<P>Ya !enemo a'(Jiac(!eD &a coa in!erean!e% Tenemo a mi noAia
<BI6>Lo&i</BI6> diciendo '(e <BLOC:*+OTE>Como me ponga en !(
pJaac(!eDgina !e a!iGo%</BLOC:*+OTE>
TamBiJeac(!eDn podemo a Aer a mi '(erido perro <I>3(3(</I> diciendo
<CITE>g(a() g(a(</CITE> 2)
oBre !odo) e& cJoac(!eDdigo 3(en!e de e!e e4emp&oI
<PRE>
<EFF A'(. e!ar.a e& cHdigo 3(en!e '(e no Ao2 a poner
por'(e en!rar.amo en (n circ(&o Aicioo%FF>
</PRE>
</BODY>
</HTML>
!nlaces
Las siglas HTML significan H'per*e)t $arkup +anguage, 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 ,orld ,ide ,eb lo
que es.
La etiqueta 1A2
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:
1. 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.
2. 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 HRE70@direccion@>P(&ame</A>
La direccin estar en formato URL (-niform Resource +ocator).
Las )RLs
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:
erAicioI//m,'(inaIp(er!o/r(!a/3ic#eroO((ario
donde el servicio podr ser uno de los siguientes:
$tt#
Es el servicio invocado para transmitir pginas web y el que usaremos normalmente en los
enlaces.
$tt#s
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.
(t#
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.multi/ac0idecnet1com me mandara
un mensaje a m.
ne3s
Para poder acceder a foros de discusin (mal traducidos a veces como grupos de noticias). Se
indica el servidor y el grupo. Por ejemplo ne2s.//ne2s1ibernet1es/es1comp1demos nos conectara
con el foro es1comp1demos en el servidor nacional de Telefnica.
telnet
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 (1!31314154) o
bien algo ms facil de recordar como es una serie de palabras separadas por puntos
(2221programacion1net). 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(!aPre&a!iAa/3ic#ero
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.
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 NAME0@anc&a@>
Para poder ver bien como funciona, he colocado un ancla de ejemplo en el ttulo de la seccin 6.2. Para
poder acceder a ese lugar incluimos el enlace de esta manera:
<A HRE70@Kanc&a@>5amo a donde an!e</A>
Tambin podemos acceder a anclas situadas en documentos remotos. Para ello aadiremos el nombre
del ancla al URL as:
<A HRE70@en&ace%#!m&Kanc&a@>O!ra AeG</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:
<!ipoP&i!a>
<LI>Primer e&emen!o
<LI>9eg(ndo e&emen!o
</!ipoP&i!a>
!ipoP&i!a puede ser una de las siguientes: DIR, DL, MEN+, OL y +L.
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&emen!o
<LI>9eg(ndo e&emen!o
</+L>
se ver como
Primer elemento
Segundo elemento
La etiqueta <+L> admite estos parmetros:
4ar"metro )tilidad Resultado
COMPACT
ndica al navegador que debe
representar la lista de la manera ms
compacta posible.
Primer
elemento
Segundo
elemento
TYPE0@dic@)
@circ&e@)
@'(are@
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
Tambin son listas desordenadas aquellas que utilizan las etiquetas <DIR> y <MEN+>. En principio
tenan como propsito representar una lista estilo directorio (multicolumna) o tipo men (una sola
columna). En la prctica los navegadores lo han implementado como sinonimos de <+L>, por lo que no
los estudiaremos aqu.
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&emen!o
<LI>9eg(ndo e&emen!o
</OL>
se ver como
1. Primer elemento
2. Segundo elemento
La etiqueta <OL> admite estos parmetros:
4ar"metro )tilidad Resultado
COMPACT
ndica al navegador que debe
representar la lista de la manera ms
compacta posible.
1. Primer
elemento
2. Segundo
elemento
TYPE0@1@) @a@)
@A@) @i@) @I@
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
9TART0@n(m@
ndica al navegador el nmero por el
que se empezar a contar los
3. Primer
elementos de la lista.
elemento
4. Segundo
elemento
5AL+E0@n(m@
Atributo de <LI>, acta como 9TART
pero a partir de un elemento
predeterminado.
1. Primer
elemento
4. Segundo
elemento
5. Tercer
elemento
Listas de de(iniciones
Este es el nico tipo de lista que no utiliza la etiqueta <LI>. Al tener como objetivo presentar una lista de
definiciones, de modo que tiene que representar de manera distinta el objeto definido y la definicin. Esto
se hace por medio de las etiquetas <DT> y <DD>:
<DL>
<DT>Primer e&emen!o<DD>E (n e&emen!o m(2 Boni!o%
<DT>9eg(ndo e&emen!o<DD>E!e) en camBio) e peor%
</DL>
se ver como
Primer elemento
Es un elemento muy bonito.
Segundo elemento
Este, en cambio, es peor.
La etiqueta <DL> slo admite como parmetro el ya conocido COMPACT, que tiene el mismo
comportamiento que con los otros dos tipos de lista anteriores.
Im"genes
Para incluir grficos e imgenes en nuestras pginas utilizaremos la etiqueta
<IM6>
de esta manera:
<IM6 9RC0@3ic#eroPgra3ico@ ALT0@decripcion@>
El parmetro 9RC 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.
<IM6 9RC0gra3ico/dQn&dn%gi3@ ALT0@Ne!cape =%C@ /IDTH0LL
HEI6HT0<1>
Se ve as:
Para los menos avezados en ingls, decir que WDTH es la anchura y HEGHT la altura.
Im"genes 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 HRE70@#!!pI//QQQ%ne!cape%com@>
<IM6 9RC0@gra3ico/dQn&dn%gi3@ ALT0@Ne!cape =%C@ /IDTH0LL
HEI6HT0<1>
</A>
Se ve as:
Sin embargo,
<A HRE70@#!!pI//QQQ%ne!cape%com@>
<IM6 9RC0@gra3ico/dQn&dn%gi3@ ALT0@Ne!cape =%C@ /IDTH0LL
HEI6HT0<1
BORDER0C>
</A>
Se ve as:
Alineacin res#ecto al te%to
Para poder maquetar conjuntamente texto y grficos, el HTML proporciona, por medio del parmetro
ALI6N, las siguientes maneras de alinear una imagen respecto del texto que la acompaa:
Valor de ALIGN )tilidad Resultado
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(Por
defecto)
Alinea el punto ms bajo de la imagen con
la base del texto.
Este
es el texto
LE7T
Coloca la imagen a la izquierda del texto.
Este
es el
texto
RI6HT
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.
&ormateo (ino
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 <7ONT>.
Cam'io 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
<7ONT co&or0@red@>E!o2 en ro4o</7ONT>
El modo de indicar el color RGB es el siguiente:
<7ONT COLOR0@K77CCCC@>D</7ONT>
<7ONT COLOR0@KE7CCCC@>E</7ONT>
<7ONT COLOR0@KD7CCCC@>6</7ONT>
<7ONT COLOR0@KC7CCCC@>R</7ONT>
<7ONT COLOR0@KB7CCCC@>A</7ONT>
<7ONT COLOR0@KA7CCCC@>D</7ONT>
<7ONT COLOR0@KM7CCCC@>A</7ONT>
<7ONT COLOR0@KL7CCCC@>D</7ONT>
<7ONT COLOR0@KR7CCCC@>O</7ONT>
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).
Tama5os del te%to
El parmetro utilizado para indicar el tamao es 9ISE. Puede utilizarse para indicar tamaos absolutos:
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.
<7ONT 9ISE0;><3on! iGe0@;@>TamaNo ;</3on!><7ONT 9ISE0@T<@>
<3on! iGe0@;@><3on! iGe0@T<@>TamaNo
?</3on!></3on!></7ONT></7ONT>
Ti#o de letra
Por ltimo, podemos especificar el nombre del tipo de letra que queremos utilizar gracias al parmetro
7ACE. 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:
<7ONT 7ACE0@He&Ae!ica)Aria&)Time@><3on!
3ace0@He&Ae!ica)Aria&)Time@>No
- como Ao2 a a&ir e1ac!amen!e</3on!></7ONT>
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.
!structura del documento
La estructura de un documento HTML se puede resumir as:
!ipo de doc(men!o
<HTML>
<HEAD>
<TITLE>!i!(&o de &a p,gina</TITLE>
coa '(e a3ec!an a &a p,gina pero no a ( con!enido
</HEAD>
<BODY par,me!ro>
con!enido de &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:
<EDOCTYPE HTML P+BLIC @F//IET7//DTD HTML ;%C//EN@>
Cumple el estndar HTML 2.0
<EDOCTYPE HTML P+BLIC @F///<C//DTD HTML <%; 7ina&//EN@>
Cumple el estndar HTML 3.2
<EDOCTYPE HTML P+BLIC @F///<C//DTD HTML =%C Trani!iona&//EN@
@#!!pI//Q<%org/TR/RECF#!m&=C/&ooe%d!d@>
Cumple el estndar HTML 4.0
<EDOCTYPE HTML P+BLIC @F///<C//DTD HTML =%C//EN@
@#!!pI//Q<%org/TR/RECF#!m&=C/!ric!%d!d@>
Cumple el estndar HTML 4.0 y no contiene adems elementos desaconsejables
<EDOCTYPE HTML P+BLIC @F///<C//DTD HTML =%C 7ramee!//EN@
@#!!pI//Q<%org/TR/RECF#!m&=C/3ramee!%d!d@>
Es una definicin de marcos que cumple el estndar HTML 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.
La ca'ecera
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 NAME0@6ENERATOR@ CONTENT0@MoGi&&a/=%C< UeV "/inM>D I$
UNe!capeV@>
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:
4ro#iedad )tilidad
A+THOR
Autor de la pgina.
6ENERATOR
Herramienta utilizada para hacer la pgina.
CLA99I7ICATION
Palabras que permite clasificar la pgina dentro de un
buscador jerrquico (como Yahoo).
:EY/ORD9
Palabras clave por las que encontrarn la pgina en los
buscadores.
DE9CRIPTION
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:
<BA9E HRE70@#!!pI//QQQ%#orne!%org/m(ic@>
Ahora todas nuestras URLs relativas se referirn al directorio /music dentro del servidor
&ttp.//2221&ornet1org.
!l cuer#o
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>:
BAC:6RO+ND
Permite definir un grfico de fondo para la pgina.
B6COLOR
Permite definir el color de fondo de la pgina.
B6PROPERTIE9
Cuando es igual a 7IWED el grfico definido como fondo
de la pgina permanecer inmvil aunque utilicemos
las barras de desplazamiento.
TEWT
Cambia el color del texto.
LIN:
Cambia el color de un enlace no visitado (por defecto
azul).
5LIN:
Cambia el color de un enlace ya visitado (por defecto
prpura).
ALIN:
Cambia el color que toma un enlace mientras lo
estamos pulsando (por defecto rojo).
LE7TMAR6IN 2
TOPMAR6IN
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.
MAR6IN/IDTH 2
MAR6INHEI6HT
Ms o menos equivalentes a los anteriores, pero stos
funcionan en Netscape.
No resulta recomendable cambiar los colores del texto y enlaces a no ser que exista alguna dificultad al
leerlos por haber cambiado el fondo, ya que en muchas ocasiones el usuario ha podido cambiarlos en las
opciones de su navegador y estarn ya a su gusto.
&ormularios
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,
<7ORM ACTION0@@ METHOD0PO9T>
NomBreI<BR><INP+T NAME0@nomBre@ TYPE0TEWT 9ISE0<;>
<BR>XC(an!o on do 2 doY<BR>
<INP+T NAME0@Rep(e!a@ TYPE0RADIO 5AL+E0@ma&@><<BR>
<INP+T NAME0@Rep(e!a@ TYPE0RADIO 5AL+E0@Bien@>=<BR>
<INP+T NAME0@Rep(e!a@ TYPE0RADIO 5AL+E0@ma&@>><BR>
<INP+T TYPE0@9(Bmi!@ 5AL+E0@ComproBar@>
</7ORM>
se ver as:
Nombre:
Cuantos son dos y dos?
3
4
5
Comprobar
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 <7ORM> y </7ORM>. Como
parmetros cabe destacar tres. ACTION define el URL que deber gestionar el formulario. Puede ser
una direccin de correo (precedida del inevitable mai&!oI, en cuyo caso deberemos aadir el
parmetro ENCTYPE0@!e1!/p&ain@ 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 PO9T. 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.
Ca6as de te%to
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 TYPE0TEWT>
<INP+T TYPE0PA99/ORD>
El primero nos dibujar una caja donde escribir un texto (de una sola lnea). El segundo es equivalente,
pero no veremos lo que tecleemos en l. Estos son los atributos para modificarlos:
4ar"metro )tilidad
9ISE
Tamao de la caja de texto.
MAWLEN6TH
Nmero mximo de caracteres que puede introducir el usuario.
5AL+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:
<TEWTAREA><Br/>Por de3ec!o<Br/></TEWTAREA>
Lo que incluyamos entre las dos etiquetas ser lo que se muestre por defecto dentro de la caja. Admite
estos parmetros:
4ar"metro )tilidad
RO/9
Filas que ocupar la caja de texto.
COL9
Columnas que ocupar la caja de texto.
0#ciones
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:
<<INP+T NAME0@Rep(e!a@ TYPE0RADIO 5AL+E0@ma&@><BR>
=<INP+T NAME0@Rep(e!a@ TYPE0RADIO 5AL+E0@Bien@><BR>
><INP+T NAME0@Rep(e!a@ TYPE0RADIO 5AL+E0@ma&@><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:
4ar"metro )tilidad
5AL+E
Este es el valor que asignar a la variable.
CHEC:ED
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, 9ELECT y OPTION:
<9ELECT NAME0@NaAegador@>
<OPTION>Ne!cape
<OPTION>E1p&orer
<OPTION>Opera
<OPTION>L2n1
<OPTION>O!ro
</9ELECT>
Los parmetros que admite 9ELECT son las siguientes:
4ar"metro )tilidad
9ISE
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.
Y OPTION estos:
4ar"metro )tilidad
5AL+E
Este es el valor que asignar a la variable.
9ELECTED
Si lo indicamos en una de las opciones esta ser la seleccionada
por defecto.
7otones del (ormulario
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 TYPE09+BMIT><BR>
<INP+T TYPE0RE9ET>
Enviar consulta
Restablecer
Podemos cambiar el texto que el navegador pone por defecto en esos botones utilizando el parmetro
5AL+E.
0tros elementos
Puede que necesitos que el usuario sencillamente nos confirme o niegue algo. Lo podremos conseguir
por medio de controles de confirmacin:
<INP+T NAME0@Be&&eGa@ TYPE0CHEC:BOW>Me
conidero g(apo/a
Me considero
guapo/a
Si queremos que el control est activado por defecto le aadiremos el parmetro CHEC:ED. El
formulario asignar a la variable NAME el valor on u off.
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 NAME0@C(ro@ 5AL+E0@HTML =%C@>
De este modo ya s de que curso me estn hablando.
Controles a+an/ados #ara (ormularios
El estndar HTML 4.0 ha trado varias mejoras a los formularios, que acercan los mismos a las
caractersticas que tienen en lenguajes como Java o Visual Basic. Desafortunadamente, el Netscape 4,
lanzado al mercado antes de la aprobacin del HTML 4.0, no implementa ninguna de estas mejoras, por
lo que los ejemplos de este captulo slo sern contemplados correctamente por los usuarios de Explorer
4 y 5 y los del nuevo Netscape 6.
7otones
Una de las cosas que ms han mejorado son los botones. Ahora disponen de una etiqueta propia, de
modo que se pueda encerrar con ella todo tipo de elementos HTML, como grficos o, incluso, tablas
enteras.
Como no poda ser de otra manera, la etiqueta en cuestin se llama B+TTON:
<B+TTON TYPE0@B(!!on@>
<!aB&e Border0@1@>
<!r><BR/>
<!#>9o2 (na</!#><BR/>
<!#>!aB&a</!#>
</!r>
<!r>
<!d>'(e e!,</!d>
<!d>en (n Bo!Hn</!d>
</!r>
</!aB&e>
</B+TTON>
.o una ta'la
que est en un botn
Los parmetros de dicha etiqueta son los normales, TYPE, que podr tomar los valores 9+BMIT (por
defecto), RE9ET y B+TTON, NAME y 5AL+E.
Por otro lado, ahora podemos declarar un grfico como un elemento ms de entrada. como un nuevo tipo
dentro del elemento INP+T:
<INP+T TYPE0@image@ 9RC0@gra3ico/naA%gi3@ a&!0@E&i4e
naAegador@>
Este elemento se comportar de mismo modo que un botn de tipo 9+BMIT, pero aadir como
informacin en el formulario las coordenadas x e y donde el usuario lo puls.
!tiquetas
Hasta hora, el texto que acompaaba a los campos de entrada no estaba asociado a los mismos de
ninguna manera. As, por ejemplo, si pulsbamos en el texto que acompaaba a un control de
confirmacin, no suceda nada. Ahora, en cambio, si utilizamos la etiqueta LABEL, el control cambiar
de estado (slo disponible en Netscape 5):
<LABEL>
<INP+T NAME0@Be&&eGa@ TYPE0CHEC:BOW>
Me conidero g(apo/a
</LABEL>
Me considero guapo/a
Lo bueno que tiene es que se puede usar sin peligro, ya que no afectar a los usuarios de navegadores
antiguos.
Agru#acin 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 7IELD9ET se mostrar un
rectngulo alrededor de los mismos. Si adems, le indicamos un ttulo por medio de la etiqueta LE6END
nuestros formularios quedarn hechos un verdadero primor:
<7IELD9ET>
<LE6END>Mi #ermoo
3orm(&ario</LE6END>
<LABEL>
Mi !e1!oI
<INP+T TYPE0@!e1!@>
</LABEL>
</7IELD9ET>
Mi hermoso formularioMi texto:
LE6END admite como parmetro ALI6N, que indicar en qu lugar se coloca el ttulo. Por defecto es
TOP (arriba), pudiendo estar tambin abajo (BOTTOM), a la izquierda (LE7T) o a la derecha (RI6HT).
8esacti+acin 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 DI9ABLED:
<LABEL DI9ABLED>Te1!oI
<INP+T TYPE0TEWT DI9ABLED>
</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.
Ma#as
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.
Ma#as gestionados #or el cliente
Para utilizarlos necesitaremos dos cosas: declarar el mapa y asignarlo a una imagen. Vamos primero a
declarar nuestro mapa:
<MAP NAME0@miPmapa@>
<AREA 9HAPE0%%% COORD90%%% ALT0@En&ace a%%@>
%%%
</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:
4ar"metro )tilidad
9HAPE
Define la forma de la zona, que podr ser rectangular, circular o
poligonal.
COORD9
Coordenadas (separadas por comas) que definen la zona. El
nmero y significado de esas coordenadas depender de la zona.
HRE7
URL a donde ir el usuario si pulsa sobre esa zona.
NOHRE7
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:

.HA4! C00R8.
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
DE7A+LT
No se indican.
Cmo usar un ma#a
Ahora que hemos definido un mapa, slo queda asignarlo a una imagen. Esto se hace del siguiente
modo:
<IM6 9RC0%%% +9EMAP0@KmiPmapa@>
Siempre tenemos que aadir al comienzo del nombre de nuestro mapa una almohadilla (#). Vamos a ver
un ejemplo:
<MAP NAME0@naAegadore@>
<AREA 9HAPE0RECT COORD90@C)C);=)<1@
HRE70@#!!pI//QQQ%ne!cape%com@ ALT0@Ne!cape@>
<AREA 9HAPE0RECT COORD90@;?)C)><)<1@
HRE70@#!!pI//QQQ%microo3!%com@ ALT0@Microo3!@>
<AREA 9HAPE0DE7A+LT NOHRE7 ALT0@Nada@>
</MAP>
<IM6 9RC0@naA%gi3@ /IDTH0>< HEI6HT0<1 BORDER0C
+9EMAP0@KnaAegadore@>
Se ve tal que as:
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.
Ta'las
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
ALI6N.
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:
<TABLE>
<TR>
<TD>1)1</TD>
<TD>1);</TD>
<TD>1)<</TD>
</TR>
<TR>
<TD>;)1</TD>
<TD>;);</TD>
<TD>;)<</TD>
</TR>
</TABLE>
1,1 1,2 1,3
2,1 2,2 2,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:
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.
CELL9PACIN6
Define el nmero de pixels que separarn las celdas.
CELLPADDIN6
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).
ALI6N
Alinea la tabla a izquierda (LE7T), derecha (RI6HT) o centro
(CENTER).
Si ahora, por ejemplo definimos ahora la tabla anterior como <TABLE BORDER01 /IDTH0@>CZ@
ALI6N0CENTER> veremos lo siguiente:
1,1 1,2 1,3
2,1 2,2 2,3
8e(inir las (ilas
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:
ALI6N
Alinea el contenido de las celdas de la fila horizontalmente a izquierda
(LE7T), derecha (RI6HT) o centro (CENTER).
5ALI6N
Alinea el contenido de las celdas de la fila verticalmente arriba (TOP),
abajo (BOTTOM) o centro (MIDDLE).
8e(inir 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:
ALI6N
Alinea el contenido de la celda horizontalmente a izquierda (LE7T),
derecha (RI6HT) o centro (CENTER).
5ALI6N
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.
COL9PAN
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/9PAN
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:
<TABLE BORDER01>
<TR>
<TD COL9PAN0;>1)1 2 1);</TD>
<TD>1)<</TD>
</TR>
<TR>
<TD RO/9PAN0;>;)1 2 <)1</TD>
<TD>;);</TD>
1,1 y 1,2 1,3
2,1 y 3,1
2,2 2,3
3,2 3,3
<TD>;)<</TD>
</TR>
<TR>
<TD><);</TD>
<TD><)<</TD>
</TR>
</TABLE>
Como podemos ver, cuando declaramos un celda con RO/9PAN o COL9PAN, no deberemos declarar
las celdas "absorbidas" o la creacin de la tabla se nos complicar de horrible manera.
T9tulo de la ta'la
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:
<TABLE BORDER01>
<CAPTION>
E4emp&o de !aB&a
</CAPTION>
%%%
</TABLE>
!6em#lo de ta'las
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: ALI6N, que es por defecto TOP. Si lo definimos como
BOTTOM el ttulo se colocar al final de la tabla en lugar del comienzo.
Marcos
Un marco (o frame) 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 con marco</TITLE>
</HEAD>
<7RAME9ET COL90@;CZ)LCZ@>
<7RAME NAME0@indice@ 9RC0@indice%#!m&@>
<7RAME NAME0@principa&@ 9RC0@in!rod(ccion%#!m&@>
<NO7RAME9>
<P>Lo ien!o) pero H&o podr, Aer e!a p,gina
i !( naAegador !iene &a capacidad de Ai(a&iGar
marco%</P>
</NO7RAME9>
</7RAME9ET>
</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 7RAME9ET. En cada 7RAME9ET se divide la ventana actual (sea la general o un
marco) en varias ventanas definidas o por el parmetro COL9 o por RO/9. En ste, separado por
comas, se define el nmero de marcos y el tamao de cada uno.
Dentro del <7RAME9ET> se hacen dos cosas. Primero, definir cada uno de los marcos poniendoles un
nombre y especificando qu fichero HTML le corresponde mediante la etiqueta <7RAME>. Por ltimo,
especificamos lo que ver el usuario en el supuesto (cada vez ms raro) de que su navegador no soporte
frames dentro de la etiqueta <NO7RAME9>. Ahora veremos todos estos elementos en mayor detalle.
!tiqueta 1&RAM!.!T2
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 <7RAME> de cada una de los marcos contiguos al
borde a eliminar o incluyendo el parmetro 7RAMEBORDER0C en el <7RAME9ET>.
Cuando eliminas ese borde, podrs ver cmo el navegador deja an un hueco entre marcos. Este se
elimina aadiendo los parmetros 7RAME9PACIN60C BORDER0C.
Vamos a examinar por ltimo los parmetros COL9 y RO/9. Deberemos asignarles una lista de tamaos
separada por comas. Se admiten los siguientes formatos de tamao:
Con #orcenta6es: Al igual que con las tablas, podemos definir el tamao de un marco como un
porcentaje del espacio total disponible.
A'solutos: Si ponemos un nmero a secas, el marco correspondiente tendr el tamao
especificado en pixels.
.o're el es#acio so'rante: 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.
Por ejemplo, el siguiente cdigo es una muestra de cmo combinar los tres mtodos:
<7RAME9ET COL90@1CZ)[);CC);[@>
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 <7RAME9ET> se pueden anidar. Esto se hace poniendo otro
<7RAME9ET> donde normalmente colocamos las etiquetas <7RAME> tal que as:
<7RAME9ET COL90@;CZ)LCZ@>
<7RAME NAME0@indice@ 9RC0@indice%#!m&@>
<7RAME9ET RO/90@[)LC@>
<7RAME NAME0@principa&@ 9RC0@in!rod(ccion%#!m&@>
<7RAME NAME0@e4emp&o@ 9RC0@e4emp&o%#!m&@>
</7RAME9ET>
</7RAME9ET>
El resultado del anidamiento lo podris contemplar aqu.
!tiqueta 1&RAM!2
Esta etiqueta define tan slo las caractersticas de un marco determinado, no de un conjunto de ellos.
Estos son los parmetros que admite:
NAME
Asigna un nombre a un marco para que despus podamos
referirnos a l.
9RC
ndica la direccin del documento HTML que ocupar el marco.
9CROLLIN6
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 YE9 y NO.
NORE9ISE
Si lo especificamos el usuario no podr cambiar de tamao el
marco.
7RAMEBORDER
Al igual que su homnimo en la etiqueta <7RAME9ET>, si lo
igualamos a cero se eliminar el borde con todos los marcos
contiguos que tengan tambin este valor a cero.
MAR6IN/IDTH
Permite cambiar los mrgenes horizontales dentro de un marco.
Se representa en pixels.
MAR6INHEI6HT
gual al anterior pero con mrgenes verticales.
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 contenidos
sera deseable que los enlaces del marco ndice se abrieran en el otro marco. Esto es posible hacerlo
gracias al parmetro TAR6ET.
Este parmetro se puede colocar en tres etiquetas: <A>, <AREA> y <BA9E>. 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 TAR6ET 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 indice tenemos un enlace que queremos se abra en el
marco principa& pondremos:
<A HRE70@pagina%#!m&@ TAR6ET0@principa&@>
Tambin existen cuatro nombres reservados que podremos utilizar en el parmetro TAR6ET:
;to#
Elimina todos los marcos existente y muestra la nueva pgina en la ventana original sin marcos.
;'lan<
Muestra la nueva pgina en una ventana nueva y sin nombre del navegador.
;sel(
Muestra la nueva pgina en el marco donde est declarado el enlace.
;#arent
Muestra la nueva pgina en el <7RAME9ET> que contiene al marco donde se declara el
enlace. En el ejemplo que pusimos de <7RAME9ET> anidados, una enlace situado en el
marco e4emp&o cuyo parmetro TAR6ET fuese igual a Pparen! eliminara la separacin
entre los marcos e4emp&o y principa& y mostrara en ese nuevo marco la nueva pgina.
Ho6as de estilo
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 comunmente aceptado de sintaxis de hojas de estilo es el de cascada, ser este el nico
que veamos. Vamos a empezar con un ejemplo:
<9TYLE TYPE0@!e1!/c@>
P \co&orI greenD marginF&e3!I <CD]
</9TYLE>
Vamos a detenernos en todos los elementos. Para empezar, la etiqueta HTML con la que deberemos
englobar las hojas de estilo ser <9TYLE>, 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 !e1!/c.
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
e!i&o%c (solo las hojas, no la etiqueta <9TYLE>) no tendremos ms que incluir la siguiente
lnea en la cabecera de nuestro documento HTML para incluirlas en nuestras pginas:
<LIN: REL0@!2&e#ee!@ HRE70@e!i&o%c@ TYPE0@!e1!/c@>
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.
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%Aerde \co&orI greenD marginF&e3!I <Cp1D]
slo estarn verdes y con un margen izquierdo de 30 pixels aquellos prrafos definidos con <P
CLA990@Aerde@>. 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:
a&&%Aerde \co&orI greenD marginF&e3!I 1Cp1D]
Ke41 \ co&orI B&(eD]
Ahora todos los prrafos de clase verde seran, obviamente, verdes y con un margen de 10 pixels. Sin
embargo el prrafo definido por <P CLA990@Aerde@ ID0@e41@> ser azul:
Este prrafo es muy verde.
Y anda que este...
Sin embargo, este no, fjate que curioso.
!tiquetas 1.4A=2 18IV2
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 <9PAN> y <DI5>.
El mtodo es simple. Definimos una clase rojo que simplemente modifique el color (que ser rojo). Ahora,
si queremos que una seccin de texto est en rojo lo encerraremos entre las etiquetas <9PAN
CLA990@ro4o@> y </9PAN> o entre <DI5 CLA990@ro4o@> y </DI5>.
La diferencia entre ambas es que, mientras 9PAN realmente no hace nada por s misma, DI5 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&&%!i!(&o \
marginF!opI F;=p1D
co&orI B&(eD
3on!FiGeI ;Cp1D
]
a&&%omBra \
marginF!opI ;p1D
marginF&e3!I ;p1D
co&orI B&ac^D
3on!FiGeI ;Cp1D
]
cuyos atributos explicaremos en la referencia de las hojas de estilo, y ponemos el siguiente cdigo HTML:
<DI5 ALI6N0@CENTER@ CLA990@omBra@>E& maraAi&&oo c(ro de
HTML</DI5>
<DI5 ALI6N0@CENTER@ CLA990@!i!(&o@>E& maraAi&&oo c(ro de
HTML</DI5>
obtendremos este bello efecto:
El maravilloso curso de HTML
El maravilloso curso de HTML
En el siguiente captulo tenis una gua de referencia con todos (o casi todos) los atributos que se pueden
modificar con CSS.
Ho6as de estilo: re(erencia
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.
4ro#iedades de 'loque
Vamos a empezar con las propiedades de bloque, que definen cosas como los mrgenes o la colocacin
de bloques de contenido HTML:
4ro#iedad 8escri#cin
4osi'les
+alores
marginF!op) marginFrig#!)
marginFBo!!om) marginF
&e3!)<Br/> marginI !op
rig#! Bo!!om &e3!
Distancia mnima entre un
bloque y los dems
elementos. Tanto margin
como margin"$ se utilizan
para cambiar todos estos
atributos a la vez.
tamao,
porcentaje o
a(!o. Por
defecto es cero.
paddingF!op) paddingF
rig#!) paddingFBo!!om)
paddingF&e3!)<Br/>
paddingI !op rig#! Bo!!om
&e3!
Distancia entre el borde y el
contenido de un bloque.
tamao,
porcentaje o
a(!o. Por
defecto es cero.
BorderF!opFQid!#) BorderF
rig#!FQid!#) BorderF
Bo!!omFQid!#) BorderF
&e3!FQid!#)<Br/> BorderF
Qid!#I !op rig#! Bo!!om
&e3!
Anchura del borde de un
bloque.
numrico
BorderF!2&e
Estilo del borde de un bloque.
none, o&id o
<D, por defecto
ninguno (none).
BorderFco&or
Color del borde de un bloque. cualquier color
Qid!#) #eig#!
Tamao de un bloque. Su
mayor utilidad est en su
aplicacin a un elemento
tamao,
porcentaje o
a(!o,
grfico.
automtico por
defecto.
3&oa!
Justificacin del contenido de
un bloque.
&e3!, rig#! o
none, por
defecto ninguna.
c&ear
Permiso para que otro
elemento se pueda colocar a
su izquierda o derecha.
&e3!, rig#!,
Bo!# o none, por
defecto ninguno.
4ro#iedades de ti#o de letra
Ahora vamos a examinar las propiedades del tipo de letra que el usuario va a ver. Son las siguientes:
4ro#iedad 8escri#cin 4osi'les +alores
3on!F
3ami&2
Tipo de letra (que puede
ser genrico) que vamos
a usar.
lista de tipos, ya sean genricos o no,
separados por comas.
3on!FiGe
Tamao del tipo de letra.
11Fma&&, 1Fma&&, ma&&, medi(m,
&arge, 1F&arge, 11F&arge, tamao
relativo o tamao absoluto. Por defecto
medi(m.
3on!F
Qeig#!
Grosor del tipo de letra
(negrita).
norma&, Bo&d, Bo&der, &ig#!er o 100-
900 (donde 900 es la negrita ms
gruesa). Por defecto norma&.
3on!F
!2&e
Estilo del tipo de letra
(cursiva).
norma&, i!a&ic, i!a&ic ma&&Fcap,
oB&i'(e, oB&i'(e ma&&Fcap o
ma&&Fcap. Por defecto norma&.
Cabe recordar que los tipos genricos son eri3, anFeri3, c(riAe, 3an!a2 y
monopace. 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 eri3 puede equivaler a
Times New Roman y monopace a Courier.
4ro#iedades de (ormato del te%to
Nuesto siguiente objetivo van a ser las propiedades de formato del texto que cualquier procesador de
textos nos permite cambiar.
4ro#iedad 8escri#cin 4osi'les +alores
&ineF#eig#!
nterlineado. nmero o porcentaje.
!e1!F
decora!ion
Efectos variados
sobre el texto.
none, (nder&ine (subrayado), oAer&ine
(como subrayado, pero por encima), &ineF
!#ro(g# (tachado) o B&in^ (parpadeante);
por defecto ninguno.
Aer!ica&F
a&ign
Posicin vertical del
texto.
Bae&ine (normal), (B (subndice), (per
(superndice), !op, !e1!F!op, midd&e,
Bo!!om, !e1!FBo!!om o un porcentaje. Por
defecto Bae&ine
!e1!F
!ran3orm
Transforma el texto a
maysculas o
minsculas.
capi!a&iGe (pone la primera letra en
maysculas), (ppercae (convierte todo a
maysculas), &oQecae (a minsculas) o
none, por defecto no hace nada.
!e1!Fa&ign
Justificacin del
texto.
&e3!, rig#!, cen!er o 4(!i32
!e1!Finden!
Tabulacin con que
aparece la primera
lnea del texto.
tamao o porcentaje, por defecto cero.
4ro#iedades de color (ondo
Tambin es posible cambiar los colores y el grfico de fondo de un elemento.
4ro#iedad 8escri#cin 4osi'les +alores
co&or
Color del texto. un color (en el formato habitual).
Bac^gro(nd
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:
Bac^gro(ndI (r&"3ondoBoni!o%gi3$D
4ro#iedades de clasi(icacin
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:
4ro#iedad 8escri#cin 4osi'les +alores
dip&a2
Decide si un elemento es
interior (como <I>), un bloque
(<P>) o un elemento de una lista
(<LI>).
in&ine, B&oc^, &i! y none (que
'apaga' el elemento)
&i!F
!2&e
Estilo de un elemento de una
lista, pudiendo incluir un grfico
al comienzo del mismo.
dic, circ&e, '(are, decima&,
&oQerFroman, (pperFroman,
&oQerFa&p#a, (pperFa&p#a, none
o la direccin de un grfico
Q#i!eF
pace
Decide como se manejan los
espacios, si de manera normal
o como sucede dentro de la
etiqueta <PRE>.
norma& y pre
Y ahora... ya no hay ms... por fn acabamos! Dejadme que respire un poco y ahora continuamos.
Lengua6es de script
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 script 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 script: 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..
>a+ascri#t
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 script, vamos a realizar una
pequea introduccin al Javascript. Si te sientes interesado, visita mi curso de JavaScript 1.2 para mayor
informacin sobre el tema.
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.
$olamundo.$tml
<HTML>
<HEAD>
<9CRIPT LAN6+A6E0@8aAa9crip!@>
<EFFF
3(nc!ion Ho&aM(ndo"$ \
a&er!"@_Ho&a) m(ndoE@$D
]
// FFF>
</9CRIPT>
</HEAD>
<BODY>
<7ORM>
<INP+T TYPE0@B(!!on@ NAME0@Bo!on@ 5AL+E0@P(&ame@
onC&ic^0@Ho&aM(ndo"$@>
</7ORM>
</BODY>
</HTML>
Y aqu est nuestro ejemplo funcionando:
Ahora vamos a ver, paso por paso, que significa cada uno de los elementos extraos que tiene la pgina
anterior:
<9CRIPT LAN6+A6E0@8aAa9crip!@>
</9CRIPT>
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
<9CRIPT> escribir lo que hay entre medias de estos elementos, as que lo encerramos entre
comentarios por si las moscas.
3(nc!ion Ho&aM(ndo"$ \
a&er!"@_Ho&a) m(ndoE@$D
]
Esta es nuestra primera funcin en JavaScript. En el cdigo de la misma vemos una llamada al mtodo
a&er! (que pertenece al objeto QindoQ) 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.
<7ORM>
<INP+T TYPE0@B(!!on@ NAME0@Bo!on@ 5AL+E0@P(&ame@
onC&ic^0@Ho&aM(ndo"$@>
</7ORM>
Dentro del elemento que usamos para mostrar un botn vemos una cosa nueva: onC&ic^. Es un
evento. 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 Ho&aM(ndo"$, que tendremos que haber definido con
anterioridad.
Este ejemplo muestra una pequea parte de las funcionalidades del JavaScript. De hecho, su utilidad es
ms bien escasa, por eso te recomiendo de nuevo que eches un vistazo a mi curso de JavaScript.
Ca#as
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 script. Desgraciadamente, las implementaciones de Netscape y Explorer son
incompatibles entre s, por lo que resulta complicado escribir cdigo que funcione en ambas plataformas.
8e(inicin
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:
<9TYLE TYPE0@!e1!/c@>
Kmicapa \poi!ionIaBo&(!eD !opI1CCp1D &e3!I;Cp1D]
</9TYLE>
Esto colocara a la capa que hemos denominado micapa 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 <9PAN>:
<DI5 ID0@micapa@>
<H1>E& !.!(&o de &a capa</H1>
<P>A'(. e donde ir.a e& !e1!o%
%%%
</DI5>
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:
<9TYLE TYPE0@!e1!/c@>
K3&o!an!e \poi!ionI re&a!iAeD &e3!I ;Cp1D !opI 1CCp1D]
</9TYLE>
Puedes ver un ejemplo que te mostrar las diferencias entre capas absolutas y relativas.
4ro#iedades
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:
4ro#iedad 8escri#cin
4osi'les
+alores
&e3! 2 !op
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.
Qid!# 2 #eig#!
Determinan la
anchura y altura de
un tamao en
pixels.
la capa.
c&ip
Nos permite definir
el rea que se podr
ver dentro de la
capa. Por ejemplo,
c&ipIrec!";Cp1
<Cp1 =Cp1 1Cp1$D
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.
GFinde1
Las capas con un
mayor GFinde1 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 GFinde1.
nmero
positivo, por
defecto las
capas
definidas en el
cdigo HTML
ms tarde
estn ms
arriba.
AiiBi&i!2
Especifican si la
capa debe verse o
estar oculta.
AiiB&e,
#idden
(oculta) o
in#eri!
(hereda la
visibilidad de
la capa padre).
En aquellas
capas que
simplemente
estn dentro
de la pgina
principal, este
valor es
equivalente a
AiiB&e.
Bac^gro(ndFimage
Grfico de fondo de
la capa.
una direccin.
Bac^gro(ndFco&or<imagenen&inea
direccion0@gra3ico/e1p&orer%gi3@
decripcion0@e1p&orer@/> 2 &a2erF
Bac^gro(ndFco&or<imagenen&inea
Color de fondo de la
capa.
un color.
direccion0@gra3ico/ne!cape%gi3@
decripcion0@Ne!cape@/>
Esto es todo.
.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 plug6in o aadido necesario, como puede ser el Real Audio
para los archivos RA o el ModPlug para los MOD y derivados.
.onido acti+ado #or 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 HRE7 de un enlace, como si fuera una pgina HTML:
<A HRE70@#o&a%QaA@>9i p(&a !e a&(do<A>
.onido de (ondo
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 B69O+ND:
<B69O+ND 9RC0@m(ica%mid@>
El parmetro 9RC indicar el archivo a reproducir. Esta etiqueta admite tambien otro parmetro, LOOP,
que indica el nmero de veces consecutivas que sonar el fichero. Si se indica LOOP0@in3ini!e@,
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:
4ar"metro )tilidad
9RC
Contiene el nombre de archivo de sonido a reproducir
/IDTH 2 HEI6HT
En Netscape aparece un pequeo reproductor, estos
parmetros especifican su tamao.
A+TO9TART0@!r(e@
Arranca automticamente la reproduccin.
LOOP0@!r(e@
Reproduce ininterrumpidamente el fichero hasta que
salimos de la pgina.
HIDDEN0@!r(e@
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 HEI6HT. Adems, si el usuario
tiene algn plug6in 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 <EMBED>, 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 script que averigue en qu navegador est instalado y
discrimine.
Como no poda ser menos, en este ejemplo podis ver cmo suena algo de fondo y el cdigo necesario.
?u9a de estilo
A lo largo de mi deambular por nternet, he ido desarrollando pequeas manas y visto o creido ver
defectos en las pginas web. Sin embargo, despus de leer un par de cursos de HTML y alguna que otra
gua de estilo, me he dado cuenta de que la mayora de la gente parece pensar como yo.
As pues, este captulo consiste en una serie de consejos que te pueden servir para hacer tu pgina ms
atractiva y de mayor calidad. Es recomendable leerla aunque luego no la sigas al pie de la letra: te
pueden dar una idea de lo que debe ser una web.
Contenido
Cualquier pgina ser visitada si su contenido es interesante. Casi da lo mismo su estructura y diseo si
la informacin es lo suficientemente interesante. As que quiz sea conveniente detenernos un poco en
qu es lo que debe tener nuestra pgina web.
En nternet uno visita lo que quiere, y la mayora de las veces lo que a la gente le interesa y lo que a
nosotros nos interesa que vean no es lo mismo. As pues, el mejor modo de conseguir que vean lo que
queremos es ofrecerles lo que quieren. Un ejemplo lo tienes en mi pgina personal. En ella pongo cosas
que me interesa poner a m pero que de por s s que no tendran mucha difusin: mis relatos, mis
canciones, etc... Pero tambin incluyo estos cursos de diseo web, que s que le interesan a mucha
gente.
De todas maneras no hay que engaarse: los contenidos que te interesa que la gente conozca y que no
sean "populares" no sern visitados ms que por una pequea parte de los interesados por los contenidos
"populares". Pero siempre lo sern ms que si no lo hubiramos hecho.
El averiguar qu poner es fcil. Prcticamente todo el mundo tiene algn &obb', alguna pasin, o domina
algn tema bastante por encima de la media. Sobre ese tema deber estar enfocada su pgina. Porque,
para qu engaarnos: a nadie le interesan esas pginas personales que slo contienen tres fotos del
autor, una de su novia y otra de su perro, junto con la historia de su vida y un curriculum y una serie de
enlaces a pginas de sus amigos.
Conviene tambin, sabiendo que el usuario ha acudido a tu pgina por el inters hacia un tema
especfico, facilitarle enlaces a pginas similares. Te lo agradecer.
=a+egacin
Es muy importante que sea sencilla e intuitiva la navegacin por las pginas que componen tu web.
Dependiendo del tamao de la pgina no se debera tardar ms de tres toques de ratn en ir de una
pgina a otra. Sin embargo, esto no se debe conseguir por medio de una saturacin de enlaces porque el
usuario podra perderse.
Hay muchas maneras de conseguirlo. La primera es utilizar un marco como ndice, que siempre nos
permitira acudir a las seciones principales en nuestra web. Tambin resulta til incluir enlaces a la pgina
principal y a la pgina principal de la seccin que el usuario est consultando.
En definitiva, no hay receta nica, pues el xito de tu sistema de navegacin depende en buena medida
de los contenidos y estructura de tu web. Resulta til ver a alguien ajeno a su desarrollo navegar por ella
sin darle ninguna clase de pistas: en general se pueden ver con facilidad los mayores problemas que
pueda tener.
Sin embargo, hay algo que siempre irrita al usuario: enlaces a pginas vacas o con un grfico que seale
que esa pgina est en construccin. Si te lleva tiempo desarrollar una seccin pero quieres que los
usuarios sepan que estar ah colocala con las dems en la lista de enlaces, pero que ella no tenga. Que
se vea el nombre aunque no lleve a ninguna parte.
!structura de las #"ginas
Es fundamental a la hora de ponerte a crear pginas el pensar en una estructura comn y consistente,
porque facilita la navegacin y le confiere personalidad propia. Esa estructura puede estar dada por una
manera comn de titular las secciones, un fondo, un logo, una manera comn de colocar grficos y texto,
o una combinacin de todo esto.
Hay que cuidar la longitud de las pginas: que no sean ni demasiado cortas ni demasiado largas (como
esta). La pgina debe contener informacin suficiente para resultar interesante y no tanta como para
desanimar al posible lector.
Recuerda que el ttulo que le pones a tu pgina es por lo que se la conocer por el mundo. Es lo que
guarda el navegador en su ndice de marcadores, favoritos o bookmarks. Por ello, es conveniente que sea
significativo y pueda ser entendido fuera de contexto.
Conviene que el primero prrafo o las primeras frases de todas las pginas contengan un resumen o idea
del contenido del resto de la misma. Eso ayuda al usuario a localizar ms fcilmente la informacin.
A su vez, resulta bastante til indicar la fecha de la ltima modificacin de la pgina, aunque es an mejor
si esa fecha hace referencia a la ltima modificacin del contenido, que al fin y al cabo es lo que le
interesa el usuario.
Por ltimo, uno de los aspectos ms importantes de nternet como medio es la facilidad de comunicacin
entre creadores y usuarios: facilitala incluyendo tu direccin de correo. Si crees que puede ser
interesante, ayuda y anima al usuario con formularios o libros de visita.
Accesi'ilidad
Hay que tener en cuenta que, en general, no sabes con qu navegador visitarn tus pginas. Ni cmo
estar configurado. Ni la resolucin del monitor. Ni la potencia de su CPU. Ni siquiera si el navegador es
capaz de ver grficos. Y como se supone que la red es algo de lo que debe poder disfrutar todo el mundo
conviene hacerla accesible.
Para ello hay que tener en cuenta algunas cosas. Para empezar, que las pginas siempre se ven distintas
dependiendo del navegador que usemos. Conviene no usar elementos que slo funcionen con un
navegador, como puede ser el texto parpadeante o las marquesinas. Y siempre ser bueno probar con
ms de un navegador las pginas: no siempre representan igual las mismas etiquetas.
Hay gente que viaja por la red con navegadores en modo texto o que, debido a la lentitud de su conexin,
configuran su navegador para que no cargue los grficos. Por ello, conviene aadir siempre el parmetro
ALT a todas nuestras imgenes. Tambin, y por la misma causa, conviene dar una alternativa en texto
de nuestros mapas.
Es aconsejable probar nuestras pginas a la resolucin mnima de 640x480 y comprobar que se puede
ver y navegar con relativa comodidad. Es desgraciadamente frecuente ver marcos ndice diseados para
verse a 800x600 y que impiden cambiarlos de tamao y se han eliminado las barras de desplazamiento.
Es convieniente no abusar de los applets Java ni hacer de ellos un elemento imprescindible en nuestra
web. A gente con pocos recursos en potencia de CPU o usuarios de Windows 3.1 no les resulta muy
agradable estas aplicaciones.
En definitiva, no hacerles la vida imposible a los minusvlidos de la red. Eliminar barreras arquitectnicas.
8ise5o
Una pgina atractiva, con grficos bonitos y bien escogidos y colocados es algo siempre recomendable.
Pero no si, debido a ello, la pgina tarda dos das y medio en terminar de cargarse. Hay que tener en
cuenta que estamos trabajando en un medio llamado nternet que, aunque denominado autopista de la
informacin, en realidad suele parecerse ms bien a una carretera comarcal. As pues, a la hora de
disear nuestras pginas, deberemos cuidar el equilibrio entre belleza grfica y tiempo de carga.
Recuerda que el grfico de fondo no debe dificultar la lectura del texto. Si utilizamos uno oscuro que el
color del texto sea claro y viceversa.
Los grficos animados, en general, resultan muy entretenidos para el autor pero poco tiles para el
usuario. No deberan usarse ms que para cosas sobre las que realmente quieres llamar la atencin
(como el uso del texto parpadeante). Si no es as, procura que su tamao no sea excesivo.
Mientras puedas, evita los grficos meramente ornamentales. Que tengan algo de utilidad, sea como ttulo
o enlace o lo que sea. Luego procura que, adems, sean bonitos.
Procura evitar el exceso de lneas horizontales: dan la sensacin de una pgina inconexa y troceada.
Evita la proliferacin de marcos. Si pones muchos es posible que el usuario se pierda y no sepa en cul
est cada cosa. Recuerda que slo puede haber uno con informacin y todos los dems deben ser
auxiliares de este. El marco principal debe destacar sobre los otros por su mayor tamao.
Mantenimiento #rue'as
Resulta conveniente que el cdigo sea claro y fcilmente comprensible: as evitas los problemas de no
entender cmo hiciste una pgina en un momento dado, o de no encontrar esa parte que tienes que
modificar entre tanto texto.
Resulta conveniente que otras personas prueben tus pginas. Y que cuando las prueben ya estn en la
red, aunque no sean accesibles ms que para los probadores. Hay que cuidar que estos no conozcan
previamente las pginas ni hayan tenido que ver con su desarrollo.
Y esto es todo. Que ustedes disfruten creando pginas. Hasta otra!
!nlaces a otras #"ginas
0tros manuales de HTML
No he aprendido solo, claro. Aqu tenis una serie de enlaces a otros manuales y referencias de HTML
que os pueden ser de inters.
Webmaestro, el mejor manual de HTML en la red
Otro manual de HTML por Luis Marias
WebEstilo, la mejor gua de estilo en nuestro idioma
Diseo de pginas en nternet
Especificacin del HTML 4.0
Especificacin del HTML 3.2
Especificacin del HTML 3.0
Especificacin del HTML 2.0
La agenda, donde encontrars todos los enlaces que necesites sobre HTML, Java, JavaScript,
CG, etc..
.o're >a+a.cri#t
Una vez conocido el HTML, puede que te interese mejorar tus pginas con el lenguaje de script ms
extendido por nternet:
Mi curso de JavaScript 1.2
El taller web de HTML en castellano
Ejemplos en JavaScript
Todos los enlaces del mundo relacionados con JavaScript
.o're HTML din"mico
Si todo lo anterior se te ha quedado pequeo y no te importa disear pginas accesibles tan solo con
Explorer 4 o Communicator, siempre puedes pasarte por estas direcciones:
El curso de DHTML de HTML en castellano
El juego: un ejemplo de lo que se puede llegar a hacer con DHTML
The Dynamic Duo: el mejor tutorial de DHTML
Macromedia DHTML Zone
.o're otras tecnolog9as relacionadas
Estos temas me interesan menos, pero an as os puedo recomendar un par de enlaces:
Java en castellano
El mejor tutorial de Java
El mundo de Duke, ndice y buscador de recursos Java
Gran directorio de informacin sobre CG, con CGs gratuitos incluidos
nteresante pgina pesonal de un gran creador de CGs gratuitos