Introduccin

Crea tu Web est dedicado a mostrarte la manera de crear un sitio de xito en la red. Como
complemento a este sitio te ofrecemos este pequeo manual con el que podrs conocer los
entresijos del lenguaje HTML, el que se usa para crear pginas Web.
En este curso pretendemos tan solo que llegues a ser capaz de construir pginas Web correctas,
vlidas para cualquier explorador, tanto los de la familia de Netscape como los diferentes Explores
de Microsoft y otros. La idea es por tanto que estas pginas te sirvan como una gua prctica en tu
labor de crear buenas pginas Web.
Quizs pienses que con los editores grficos est todo hecho y no es necesario conocer el HTML.
En parte llevas razn, si no pretendes pasar del nivel de principiante y tan solo quieres crear
pginas impersonales para ti y tus amigos pues no necesitas conocer HTML. Pero si lo que quieres
es llegar a crear y publicar verdaderos sitios Web de aspecto profesional y dignos de estar en la
red, entonces lo mejor es que conozcas a fondo el lenguaje con el que se construyen esos sitios.

Requisitos
Para seguir el curso los requisitos son mnimos: un ordenador, un navegador y un editor de texto
simple es suficiente. Pero te recomendara, adems, instalar un servidor de Internet en tu
ordenador. No te asustes, no es nada del otro mundo. Tanto si usas Windows como si te mueves
en el mundo Linux te recomiendo el servidor Apache (si piensas trabajar con PHP te recomiendo la
versin 1.xx, la 2 sigue siendo desaconsejable), es muy simple de instalar y de configurar. Con
este servidor corriendo en tu equipo tendrs un sitio llamado local host al que podrs acceder
como si se tratara de un servidor de Internet: http://localhost/, pero solo es visible en tu
ordenador.
En cuanto al editor de pginas Web utiliza un editor tipo texto, o uno grfico, pero trabajando en
modo texto. Recuerda que la idea es conocer el lenguaje HTML, y los editores grficos esconden el
cdigo. Mira estas herramientas que te pueden ser tiles, recuerda que de gratis tambin hay
cosas buenas.
En cuanto al navegador lo mejor es tener uno de cada, de esa manera podrs comprobar que todo
lo que hagas funciona en ambos modelos, aunque hoy por hoy el rey es el Explorer de Microsoft.

El HTML

El HTML
HTML 2.0
HTML 3.0 y 3.2
HTML 4.0
Versiones

para

este

manual

El HTML
Antes de entrar de lleno en materia un poquito de historia, nunca viene mal conocer el material de
trabajo a fondo. El HTML o lenguaje de marcas de hipertexto es un derivado de un lenguaje usado
para describir documentos, el SGML. Y esto que significa? Pues muy sencillo: la estructura de las
pginas Web se describe en la propia pgina mediante una serie de etiquetas que le dicen al
navegador como debe mostrar el documento, o sea, la pgina Web: cuando debe cambiar de
prrafo, cuando debe mostrar el texto en negrita o en color, cuando mostrar una imagen, cuando
un enlace a otro documento, etc. Y esto se lo dice al navegador mediante unas marcas o etiquetas
en el documento. Como ves todo va mezclado: informacin y formato, algo que ha comenzado a
cambiar con la aparicin de los estilos CSS, un interesante intento de separar la informacin del
formato
de
presentacin.

Los inicios: HTML 2.0

Cuando internet sali del mbito universitario y se convirti en una herramienta de dominio
pblico la versin de HTML existente era la 2.0, algo limitada pero que cualquier navegador va a
ser capaz de interpretar.

HTML 3.0 y 3.2

A medida que la red se extenda, los documentos que circulaban por ella se hicieron ms
complejos y completos, la versin 2.0 pronto se mostr demasiado limitada para cumplir con su
cometido: mostrar las pginas Web en los terminales de los usuarios. As que los exploradores
comenzaron a incluir etiquetas extras no contempladas en el estndar. Por entonces el IETF
(Intenert Enginierign Task Force) era el encargado de normalizar todo lo relativo a la recin nacida
red de redes y elabor la versin 3.0, versin que pretenda incorporar las nuevas etiquetas y las
que estuvieran por llegar.
Este Standard no termin de cumplir lo esperado, adems en esas fechas la seccin de
standardizacin de HTML de este comit cerraba sus puertas, por lo que un grupo de empresas,
entre las que estaban Netscape, Microsoft, IBM y Sun, crearon un nuevo comit para estandarizar
Internet, era el W3C, organismo que an hoy dicta los estndares no solo para HTML, sino
tambin para las hojas de estilo CSS y otras herramientas de la red. Su primer trabajo consisti en
mejorar la versin 3.0 de HTML, lo que llev al HTML 3.2, que inclua muchas de las nuevas
etiquetas que los principales navegadores de la poca, osea, Netscape y Explorer, ya estaban
utilizando.

HTML 4.0
El HTML 3.2 era una solucin temporal que se aprob en enero de 1997, momento en el que el
W3C comenzaba a eloborar un nuevo estandard con reformas profundas, era la versin 4.0. En
julio de 1997 se presenta el borrador de este nuevo estndar que unifica el manejo de los marcos
(frames e iframes), las hojas de estilo y los scripts. El 17 de diciembre de 1997 dicho borrador
corregido fue finalmente aprobado como HTML 4.01, y es el que an hoy da viene usndose para
la creacin de las pginas web.

Versiones para este manual

En principio cualquier navegador debera ser capaz de interpretar el HTML 3.2, pero si en algn
caso es necesario sealar que algn elemento es solo soportado por una determianda versin o
navegador usaremos los smbolos que veis en esta tablita:

Introducido con la versin 3.2 del HTML

Introducido con la versin 4.0 del HTML

Carecterstica soportado slo por Explorer

Carecterstica soportado slo por Netscape

Mi primera pgina

El cdigo
La explicacin
El cuerpo del documento

El cdigo
Lo mejor para aprender a hacer algo es ... hacerlo!. As que vamos a la primera pgina
mipagina.htm
<HTML>
<HEAD>
<TITLE>Mi
primera
pagina
web
</TITLE>
</HEAD>
<BODY>
<H1
align="center"
>Mi
Primera
pagina
web
</H1>
<HR>
<P>Esto tan sencillo es una verdadera pgina web, aunque le falta el contenido,
pero todo llegar.</P>
</BODY>
</HTML>
Si quieres ver como queda esto en el explorador solo tienes que pulsar aqu, y tranquilo que se
abrir en otra ventana

La explicacin
Si te fijas en la pgina que ves con el explorador solo se ve parte de lo que has escrito,
concretamente todo lo que no est encerrado entre los smbolos < y >. Eso es el contenido de la
pgina, pero y lo que est entre esos parntesis angulares? pues esas son las etiquetas que le
dicen al explorador como mostrar el contenido: en grande, con colores, centrado, el ttulo de la
pgina, etc. Si te fijas cada etiqueta tiene un comienzo y un fin:
<ETIQUETA parmetros> ... </ETIQUETA>
Como ves una apertura y un cierre. Algunaas etiquetas (como <BR> cambio de lnea o <HR>
linea horizontal) no llevan cierre. Fijaros que lo primero que tenemos es la etiqueta <HTML>
cerrda al final del documento con </HTML>, eso quiere decir que estamos ante un HTML:
<HTML> ... </HTML>
Dentro de ese documento vemos una parte llamada cabecera, que la reconocers porque est
limitada con la etiqueta <HEAD> </HEAD>. l contenido de esta parte no siempre es visible, y si
lo es nunca se muestra en la pgina en si. Contiene por ejemplo el ttulo que se ve en la ventana
del explorador, arriba a la izquierda. La cabecera queda por tanto :
<HEAD>
<TITLE>Mi pgina web</TITLE>

</HEAD>
Puede contener muchas otras cosas, pero eso lo dejamos para ms adelante.

El cuerpo del documento

La otra parte es el cuerpo o <BODY> </BODY>, es el contenido de la pgina web. Tiene una
etiqueta con cierre:
<BODY> ... </BODY>
Y ahora el contenido:
<H1 align="center"> Mi primera pgina web</H1>
Con esto colocaremos el texto en formato <H1> (o cabecera 1) y centrado (align="center"), o sea,
en tamao grande y centrado en la pgina, una forma de resaltar la frase. Ahora separamos esa
frase por medio de una lnea horizontal:
<HR>
Como ves este es un ejemplo de etiqueta sin cierre. Y por ltimo colocamos un texto escplicativo
en un prrafo (<P></P>), o sea, un bloque de texto con un espacio por delante y otro por
detrs :
<P>Esto
tan
sencillo
es
una
verdadera
le falta el contenido, pero todo llegar.</P>

pgina

web,

aunque

Para empezar no est mal, por supuesto existen muchas ms etiquetas con misiones diferentes a
la de mostrar texto, pero eso lo iremos viendo poquito a poco.

Formato a nivel de bloques

Dando formato
Estilos de prrafo
Encabezados
Estilos de texto
Tipo de letra
Otros elementos

Dando formato
Evidentemente en las pginas no todo el contenido es igual y por tanto no todo se ha de mostrar
en la misma forma, por eso HTML nos permite modificar el aspecto del texto: podemos darle
diferentes formatos, modificando desdel el aspecto de los caracteres (tipo de letra) hasta el color.
Podemos formatear desde las letras una por una hasta bloques completos de texto.

Estilos de prrafo
Estos estilos o formatos actan a nivel de prrafo

Etiqueta

Significado

Resultado

Sirve para delimitar un prrafo. Inserta una Soy un prrafo: fjate en los
lnea en blanco antes del texto.
espacios de antes y de
despus.

<P>

<p ALIGN=x> ...

</p>

Justificar el texto del prrafo a la izquierda

(ALIGN=LEFT), derecha (RIGHT), al
centro (CENTER) o a ambos mrgenes
(JUSTIFY html4 )

Alineacin izquierda
Texto centrado
Alineacin derecha
Texto justificado o sea,
alineado a ambos lados sin
dejar, escalones en el margen
derecho.

<CENTER> ...
</CENTER>

Permite centrar todo el bloque de texto

encerrado.

Alineacin por defecto

Texto centrado

<PRE
WIDTH=x> ...
</PRE>

Representa el texto encerrado en ella con

un tipo de letra de paso fijo. El parmetro
WIDTH especifica el nmero mximo de
caracteres en una lnea.

Estoy en paso fijo

<BLOCKQUOTE> ... Mete sangras de prrafo tanto a derecha

como a izquierda. Suele usarse como
</BLOCKQUOTE>
tabulador

Si quieres ver el texto

indentado por ambos
mrgenes usa el Blockquote.

Los encabezados
El HTML nos ofrece seis etiquetas distintas para mostrar cabeceras o ttulos.

Etiqueta

Resultado

<H1> ... </H1>

Cabecera de nivel 1

<H2> ... </H2>

Cabecera de nivel 2

<H3> ... </H3>

Cabecera de nivel 3

<H4> ... </H4>

<H5> ... </H5>
<H6> ... </H6>

Cabecera de nivel 4
Cabecera de nivel 5
Cabecera de nivel 6

Actan a nivel de prrafo, es decir, el texto encerrado en <h1></h1> lleva una linea enblanco por
delante y por detrs. Habitualmente se utilizan para destacar ttulos de los diferentes apartados o
secciones de un texto.

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 dentro de un prrafo.

Etiqueta

Utilidad

Resultado

<B> ... </B>

Pone el texto en negrita.

Soy un texto negro como el

tizn

<I> ... </I>

Representa el texto en cursiva.

Estoy ladeado

<U> ... </U>

Para subrayar algo.

Como soy muy importante

estoy subrayado

Para tachar.

A m, en cambio, nadie me
quiere

Permite representar el texto en un tipo

de letra de paso fijo.

No soy variable

Letra superndice.

E=mc2

Letra subndice.

ai,j=bi,j+1

<S> ... </S>

<TT> ... </TT>
<SUP> ... </SUP>
<SUB> ... </SUB>
<BIG> ... </BIG>

Incrementa el tamao del tipo de letra. Soy GRANDE

<SMALL> ...
Disminuye el tamao del tipo de letra.

Cre ver un lindo gatito

</SMALL>

Estilos de texto
Son formatos predefinidos aplicables a caracteres individuales (y a grupos por supuesto).
Realmente no se usan demasiado salvo que se controlen mediante los estilos CSS.

Etiqueta
<CITE> ...
</CITE>
<CODE> ...
</CODE>
<STRONG> ...
</STRONG>
<EM> ... </EM>

Significado

Efectos

Cita, por ejemplo de un texto

Esta frase no es ma

Cdigo

int x=0;

Fuerte, negrita.

Hay cosas importantes.

Enfasis.

Para poner nfasis

<KBD> ... </KBD>

Teclado

El usuario debe teclear Multivac

es el mejor.

<VAR> ... </VAR>

Representar variables de un cdigo.

La variable x, definida
anteriormente...

<SAMP> ...
</SAMP>
<ABBR> ...

Para representar una serie de

caracteres literalmente.

Estoy en un literal

Abreviaturas.

La WWW usa el protocolo http

</ABBR>

Otros elementos

Estas etiquetas realmente no son formato ni de prrafo ni de texto, pero hay que ponerlas en
algn sitio:

Etiqueta

Significado

Resultado

<BR>
Cambio de lnea. Simple salto de linea
<HR>
Barra horizontal.
<!-- ... --> Comentarios.
No se ve el contenido

Formateando caracteres

Formateo de caracteres
El color
Tamao del texto
Tipo de letra

Formateo de caracteres
Cuando hablamos del formato en un tema anterior te adelantbamos que podras dar formato al
texto a nivel de carcter, y que la cosa no se iba a quedar solo en poner subrayados o negritas y
cursivas. HTML nos permite un gran control sobre el formato del texto mediante la etiqueta
<FONT>.

El color
Podemos cambiar el color de cualquier carcter mediant el uso del 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 los componentes 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

<FONT color="blue">Soy azul como el mar</FONT>

El modo de indicar el color RGB es el mediante los componentes RGB para lo que se usa un cdigo
de seis dgitos hexadecimales: 00 a FF. Por ejemplo:
<FONT COLOR="#FF0000">Cdigo para rojo es #FF0000D</FONT>
Cdigo para rojo es #FF0000
<FONT COLOR="#00FF00">Cdigo para verde es #00FF00</FONT>
Cdigo para verde es #00FF00
<FONT COLOR="#0000FF">Cdigo para Azul es #0000FF</FONT>
Cdigo para azul es #0000FF
<FONT COLOR="#0000FF">Y ahora mezclemos colores con #10A2FF</FONT>
Y ahora mezclemos colores con #10A2FF

Tamao del texto

El parmetro utilizado para indicar el tamao es SIZE. Puede utilizarse para indicar tamaos
absolutos:
SIZE=1

SIZE=2

SIZE=3 SIZE=4

SIZE=5 SIZE=6

SIZE=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.
<FONT SIZE=2><font size="2">Tamao 2</font><FONT SIZE="+3">
<font size="2"><font size="+3">Tamao 6</font></font></FONT></FONT>

Tipo de letra
Por ltimo, podemos especificar el nombre del tipo de letra que queremos utilizar gracias al
parmetro FACE. Pero ojo esto no es realmente muy utilizable. El navegador usar el tipo de letra
indicado en este atributo si tiene esa fuente instalada. Si sales de la Times New Roman, Arial,
Helvtica, Verdana o Courier corres el riesgo de que el usuario no llegue a ver la pgina como tu la
has diseado, sino de una manera que puede llegar a ser desastrosa para el diseo. Si el
navegador no encuentra ninguno de las fuentes indicada en este parmetro utilizar la fuente por
defecto:
<FONT FACE="Helvetica,Arial,Times">
<font face="Helvetica,Arial,Times">
No s como voy a salir exactamente</font></FONT>

Caracteres especiales

Caracteres especiales
Caracteres extendidos en HTML
Caracteres reservados

Caracteres especiales
Si habis estudiado o ledo algo acerca del modo de funcionamiento de los ordenadores y la
informtica, casi seguro que sabis que la informacin que introduces en el ordenador est
codificadaes decir, escrita de alguna manera que sea entendible para la mquina. En relacin con
esto habris topado con unas siglas algo extraas cdigo ASCII, que no es ms que una forma de
codificar los caracteres asignando a cada uno un valor numrico. Sin entrar en ms detalles
resulta que el cdigo ASCII solo tiene 128 smbolos, pero existe una extensin del cdigo que llega
a los 256 smbolos, aunque slo estn normalizados los 128 primeros, los restantes se usan para
caracteres extraos como nuestra o la o el , o las letras acentuadas.

Es decir que todo lo que no sean caracteres ingleses quedan codificados con cdigos ASCII por
encima de 127, como caracteres especiales o extendidos. En base a esto existen muchos juegos
de caracteres para mostrar las pginas, juegos que se adaptan a las particularidades de cada
idioma.

Caracteres extendidos en HTML

Cualquier caracter, especial o no, puede mostrarse en una pgina usando su cdigo ASCII, es
decir, el nmero que tiene asignado, encerrado entre &# y ;. Por ejemplo el smbolo @ tiene como
cdigo ASCII el 64, as podemos representarlo como:
&#64;
Si usasemos el nmero 127 obtendremos nuestra tilde ~ . No obstante muchos caracteres
especiales tienen sinnimos que nos facilitan su insercin en las pginas web:

Cdigo

Resultado

&aacute;, &Aacute;, &eacute;, &Eacute;,... , , , , , , , , y

&ntilde; y &Ntilde;
y
&iquest;

&iexcl;

&ordm;

&ordf;

&trade;
&copy;
&reg;
&nbsp;

Espacio en blanco

Caracteres reservados
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
&lt;
&gt;
&amp;
&quot;

<
>
&
"

Aqu tienes una tabla completa de caracteres especiales

Enlaces web

Enlaces o vnculos
La etiqueta <A>
Las URLs
Ancla

Enlaces
Las pginas web no son ms que un caso particular de documentos de hipertexto, es decir,
documentos cuyo contenido no es solo el texto simple que podemos leer sino tambin el contenido
de otras fuentes a las que accedemos desde el documento. En el caso de las pginas web estas
otras fuentes pueden estar situadas en cualquier parte de la red, y a ellos se accede mediante los
enlaces o links: unos elementos interactivos del documento que aparentemente son solo eso una
palabra o un grfico que habitualmente destacan por su color o su forma. Es prcticamente
imposible que una pgina web no posea uno de estos enlaces.
Los enlaces que nos encontramos en cualquier pgina pueden ser de dos tipos: internos a la
propia pgina o externos a otra pgina. La forma de construir unos y otros es muy similar como
vers a continuacin.

La etiqueta <A>
La etiqueta <A></A> nos sirve para delimitar la zona de la pgina que constituye el enlace. Lo
que est encerrado en esta etiqueta ser mostrado por el navegador de forma resaltada, bien sea
por el color si es texto o por un borde si es una imagen (a menos que modifiquemos el formato), y
si pulsamos con el cursor del ratn sobre esa zona el navegador se dirigir al lugar apuntado por
ese enlace. El formato completo de esta etiqueta es el que sigue:
<A HREF="direccin de destino" target="destino">Pulsar para saltar</A>
La direccin de destino ser la pgina web especificada mediante una URL, en formato absoluto o
relativo. En ambos casos el destino puede incluso ser un elemento concreto dentro de la pgina.
En este caso se ha usado un texto pero igualmente podramos colocar una imagen.
El atributo target es una manera de decirle al navegador en que ventana debe abrir esa nueva
pgina. Por ahora veremos dos de sus valores posibles:
_blank
_self

Muestra la nueva pgina en una ventana nueva y sin nombre del navegador.
Muestra la nueva pgina en el marco donde est declarado el enlace. Este es el destino
por defecto de cualqueir enlace dentro de una pgina

En el apartado dedicado a los frames veremos algo ms de este parmetro.

Las URLs
Cualquier elemento conectado a la red internet se identifica por un conjunto de cuatro nmeros
entre 0 y 255, algo as como 84.234.12.122, cualquier sitio de internetest identificado por esta
direccin. Pero como quiera que recordar esos nmeros no es nada fcil existen unos servidores
de nombre que transforman esas direcciones en nombres ms humanos como
www.espaciolatino.com. A estas direcciones se les llama Universal Resource Locator, o URL, es la
forma de localizar cualquier pgina en internet. En general tiene el siguiente formato:
protocolo://mquina:puerto/ruta/fichero@usuario
donde protocolo puede ser uno de los siguientes:

http
Es el protocolo para la transmisin de documentos HTML, es decir, el que habitualmente
usamos para ver las pginas en nuestro navegador.
https
ftp

Es similar al anterior pero con la particularidad de que la informacin viaja codificada

mediante tcnicas de encriptacin.
Es un protocolo para la transmisin de ficheros (File Transfer Protocol). Permite
intercambiar ficheros con sitios en los que se ejecuten servidores ftp. Los navegadores
actuales permiten acceder a estos servidores FTP, pero lo ms normal es usasr unos
programas al efecto denominados clientes de FTP.

mailto
news

telnet

Otro protocolo para la transmisin de datos, pero en este caso a travs de servidores de
correo.
Mediante este protocolo accedemos a los denominados grupos de noticias, listas de
distribucin de mensajes relativos a temas concretos. Habitualmente se accede a estos
servidores mediante el cliente de correo.
Es un terminal de acceso remoto en modo texto. Es un sistema bastante inseguro por lo
que no es habitual en servidores donde la seguridad est bien pensada.

Lo ms normal en nuestras pginas ser acceder a elementos de otros pginas y por tanto lo
habitual ser usar URL del estilo http://servidor.dom/pgina.htm o similar.
En un enlace podremos usar la URL como hemos escrito ms arriba, URL absoluta, pero tambin
podremos usar formatos como /pagina.htm, parece que faltara la primera parte de la direccin
verdad? Pues no, en estos casos el navegador completa esa parte con la correspondiente de la
pgina en la que est el enlace, son las URL relativas. Por ejemplo si miras la URL de esta pgina
vers que es
http://www.espaciolatino.com/tutorhtml/tema6.html
Pues bien si en esta pgina colocara un enlace en la forma
<A href="tema3.htm">Tema 3</A>
Esta direccin realmente apuntara a
http://www.espaciolatino.com/tutorhtml/tema3.html
Como ltimo detalle a tener en cuenta es el uso de la / como forma de referirse a la raiz del sitio.
As este enlace
<A href="/index.htm">Portada</A>
estara apuntando a http://www.espaciolatino.com/index.htm.

Anclas
Como dijimos, es posible acceder a una posicin dentro del documento HTML. Para ello lo primero
que tenemos que hacer es colocar marcas de destino en el documento al que queremos acceder:
<A NAME="ancla">
A estos elementos se les llama anclas. Su uso es muy simple: en una etiqueta de enlace
colocamos el smbolo # seguido del nombre del ancla de esta manera:
<A HREF="#ancla">Ancla en esta pgina</A>

Al pulsar sobre este enlace se mostrar en la ventana la parte de la pgina actual que contiene el
ancla. Si queremos acceder a un ancla en otra pgina basta indicarlo al final de su URL. Como en
este ekemplo:
<A HREF="enlaces.html#ancla">Ancla en la pgina enlaces.html</A>

Listas

El formato listas
Listas desordenadas
Listas ordenadas
Listas de definiciones

El formato listas
El lenguaje HTML nos permite crear listas en las pginas web de una manera casi tan simple y
efectiva como en un procesador de textos, para ello utiliza las etiquetas de listas, de las que
existen varios tipos. Todas ellas se pueden anidar (meter unas dentro de otras) formando rboles
ms o menos complejos. Todos los tipos siguen el mismo formato:
<tipo_lista>
<LI>Primer elemento
<LI>Segundo elemento
</tipo_lista>

tipo_lista puede ser una de las siguientes: UL, OL, DL.

Listas desordenadas
La etiqueta <UL> significa unordered list, lista desordenada, y se corresponde con las vietas en
los procesadores de texto: son listas donde cada elemento est precedido de un smbolo como un
putno o un disco. EL formato es el qeu sigue:
<UL>
<LI>Luisa
</UL>

<LI>Juan

Pedro

se ver como

Juan Pedro
Luisa

A partir del HTML 3.2 la etiqueta <UL> admite estos parmetros:

Parmetro
COMPACT

TYPE="disc",
"circle",
"square"

Significado
Indica al navegador que debe representar la lista de
la manera ms compacta posible.

Indica al navegador el dibujo que preceder a cada

elemento de la lista. Para mayor flexibilidad se
admite tambin como parmetro de <LI>.

Resultado

Primer
elemento

Segundo
elemento

Tipo disc

Tipo circle

Tipo square

Listas ordenadas
La etiqueta <OL> responde a Ordered List, lista ordenada, y nos permite presentar listas como
esquemas numerados de un solo nivel, o sea, que cada elemento de la lsita lleva un nmero de
orden. Por ejemplo,
<OL>
<LI>Primer elemento
<LI>Segundo elemento
</OL>
se ver como
1.
2.

Primer elemento
Segundo elemento

El HTML 3.2 admite estos parmetros para la etiqueta <OL> :

Parmetro
COMPACT

TYPE="1", "a",
"A", "i", "I"

Significado

Resultado

Indica al navegador que debe representar la lista de la

manera ms compacta posible.

Indica 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.

Primer
elemento

2.

Segundo
elemento

1.

Tipo 1

a.

Tipo a

A.

Tipo A

i.

Tipo i

I.

START="num"

VALUE="num"

Indica al navegador el nmero por el que se empezar

a contar los elementos de la lista.

Atributo de <LI>, acta como START pero a partir de

un elemento predeterminado.

Tipo I
3.

Primer
elemento

4.

Segundo
elemento

1.

Primer
elemento

4.

Segundo
elemento

5.

Tercer
elemento

Listas de definiciones
Este tipo de lista utiliza las etiquetas <DT>y <DD> en lugar de <LI>. En estas lista cada elemento
tiene una entrada de texto indentada respecto a dicho elemento. Es como si tuvieramos una lista
de conceptos y sus definiciones (el texto indentado). Para entenderlo lo mejor es verlas en
marcha:
<DL>
<DT>HTML<DD>Es un lenguaje de definicin de pginas web.
<DT>Java<DD>Es un lenguaje de programacin.
</DL>
se ver como
HTML
Java

Es un lenguaje de definicin de pginas web.

Es un lenguaje de programacin.

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. Un elemento <DT> puede
contener varios elementos <DD>.

Imgenes

Insertar imgenes
Imgenes y enlaces
Alineacin respecto al texto

Insertar imgenes
Una pgina web sin alguna imagen es como el mar sin sal. Para incluir grficos e imgenes en
nuestras pginas utilizaremos la etiqueta
<IMG SRC="fichero_grafico" ALT="descripcion" WIDTH=88 HEIGHT=31 BORDER=0>
El parmetro SRC especifica la URL del fichero que contiene el grfico. Los formatos estndar en la
red son el GIF, PNG y JPG.
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. Su uso es adems muy interesante cara a los robots
buscadores que de este atributo pueden sacar informacin del tema tratado en la pgina.
Los atributos WIDTH y HEIGHT indican el ancho y alto del grfico en pixels. Su uso no es
obligatorio pero si muy aconsejable para mejorar el tiempo de carga de la iamgen: el navegador
sabe el espacio que ocupar la imagen y puede seguir colocando los otros elementos de la pgina
mientras se termina de descargar la imagen.
Por ltimo vemos el atributo BORDER que como podrs adivinar tan solo coloca el ancho del borde
que rodea la imagen. Por defecto su valor es cero, salvo el caso que vemops en el siguiente
apartado.
Por ejemplo

<img src="/imgs/im_crear/pubcorreo.gif" width="30" height="32" alt="correo">

Imgenes y enlaces
Recordars que al hablar de los enalces decamos que en el contenido de la etiqueta <A> poda ir
texto o una imagen. En este caso el navegador destaca la imagen colocandole un borde del color
que use para sealar los enlaces de texto. Algo bastante lgico pero que en la mayora de los
casos queda poco esttico, afortunadamente podemos eliminar ese borde poniendo a 0 el atributo

BORDER.
<a
<img

src="/imgs/im_crear/indice2.png"
alt="Tema
1"
width="45"

</a>

href="tema1.htm">
height="30">

Se ve as:

Sin embargo,
<a href="tema1.htm">
<img
src="/imgs/im_crear/indice2.png"
alt="Tema 1" width="45" height="30" BORDER="0">
</a>
Se ve as:

Alineacin respecto al texto

HTML nos permite controlar la disposicin de las imgenes en la pgina con relacin al texto, para
ello usamos el parmetro ALIGN :

ALIGN=
TOP

MIDDLE

BOTTOM

Significado
Coloca el punto ms alto de la imagen coincidiendo con ms
alto de la lnea de texto actual.

Alinea el punto medio (en altura) de la imagen con la base

del texto.

Alinea el punto ms bajo de la imagen con la base del

texto.

Muestra

Este es el texto

Este es el texto

Este es el texto

LEFT

RIGHT

Coloca la imagen a la izquierda del texto.

Este es el texto y
esta es otra lnea

Coloca la imagen a la derecha del texto.

Este es el texto y
esta es otra lnea

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.

Los formularios

Formularios
Campos de texto
Opciones
Botones del formulario
Marcas de verificacin
Campos ocultos

Formularios
Las pginas webs no son solo permiten presentar documentos de forma ms o menos atractiva al
destinatario final, sino que tambin proporcionan elementos para interactuar con l. De esta
manera el usuario final puede enviar su opinin de la pgina al autor, o realizar una compra en
lnea. Estos elementos se conocen como formularios y seguro que todos los habis visto y utilizado
alguna vez. Por ejemplo este sencillo formulario
Tu

nombre:

Ests

registrado?

Si
No
Enviar

Borrar

<FORM
ACTION=""
METHOD="POST"
name="formul">
Tu
nombre:<BR>
<INPUT
NAME="nombre"
TYPE="TEXT"
SIZE="32"/><BR>
&iquest;Est&aacute;s
registrado?<br>
<label><input
type="radio"
name="Si"
value="1">Si</label><br>
<label><input
type="radio"
name="Si"
value="0">No</label><br><BR>
<INPUT
TYPE="Submit"
VALUE="Enviar">
<input
name="Reset"
type="reset"
id="Reset"
value="Borrar">
</FORM>
El formulario est formado por una serie de elementos (cajas de texto, casillas de verificacin,
botones...) encerrados entre las etiquetas <FORM> </FORM>. Como vers en esta etiqueta
existen varios parmetros como son:
ACTION la accin que se ejecutar al pulsar el botn de enviar. Habitualmente ser una URL a un
programa CGI encargado de procesar los datos del formulario. Puede ser tambin mailto: seguido
de una direccin de correo electrnico, en este caso el formulario se enviar por correo, en cuyo
es recomendable aadir el parmetro ENCTYPE="text/plain" para que el mensaje sea fcil de
leer.

METHOD indica como se enviarn losa datos del formulario al programa que los procese: POST de
forma interna (oculta) y GET aadido a la direccin URL del programa. Si usas el formulario para
un mailto: debes usr el mtodo POST
NAME es el nombre que identifica al formulario, til si se usan scripts dentro de la pgina.

Cajas de texto
Los controles o cajas de texto permiten al usuario escribir texto en el formulario. Pueden ser cajas
de una solo lnea o cuadros de texto con varias lneas. Las primeras usan la etiqueta <INPUT> y
pueden ser de texto simple (se ve lo que escribimos) o de tipo password (lo que escribimos es
visto como una serie de asteriscos).

<INPUT TYPE=TEXT>
<INPUT TYPE=PASSWORD>
Ojo, el dato escrito en el segundo campo no se ve pero eso no quiere decir que est codificado en
ninguna manera. Ambos tipos comparten todos sus atributos que son:

Parmetro
SIZE
MAXLENGTH
VALUE

Significado
Tamao en columnas de la caja de texto.
Nmero mximo de caracteres que se pueden teclear.
Texto por defecto que aparecer en el campo.

Pero si necesitamos que el usuario escriba ms llineas de texto pues usamos la etiqueta
<TEXTAREA></TEXTAREA>:

<TEXTAREA>Comienza a escribir </TEXTAREA>

Si escribimos algun texto dentro de esta etiqueta, ese texto aparecer por defecto en ese area de
texto. Admite estos parmetros:

Parmetro
ROWS
COLS

Utilidad
Filas que ocupar la caja de texto.
Columnas que ocupar la caja de texto.

Opciones
Para que el usuario pueda marcar una de entre varias opciones podemos usar un campo INPUT de
tipo RADIO. En nuestro ejemplo lo hemos usado:
Si<INPUT NAME="Registrado" TYPE=RADIO
VALUE="1"><BR>
No<INPUT NAME="Registrado" TYPE=RADIO
VALUE="0"><BR>

Si
No

Fjate que ambos INPUT usan el mismo atribuyto NAME, de esa manera el navegador los reconoce
como un juego de respuestas alternativas.

Parmetro
VALUE
CHECKED

Significado
Este es el valor que asignar a la variable.
Si lo indicamos en una de las opciones esta ser la que est activada por defecto.

Listas de opciones
Hay una alternativa al control de seleccin de alternativas: las listas desplegables. Mediante este
control el usuasrio puede seleccionar una opcin de entre un grupo que aparece en una lista
desplegable. La lista se encierra en etiquetas <SELECT></SELECT>, y las opciones se poenen en
etiquetas <OPTION></OPTION>:
<SELECT NAME="Idioma">
<OPTION>Espaol</OPTION>
<OPTION>Ingls</OPTION>
<OPTION>Francs</OPTION>
<OPTION>Alemn</OPTION>
</SELECT>
Los parmetros que admite SELECT son las siguientes:

Parmetro

Significado

SIZE

El nmero de opciones que podremos ver. Si es mayor que 1 veremos una lista
de seleccin con un scroll y, si no, veremos una lista desplegable.

MULTIPLE

Si lo indicamos podremos elegir ms de una opcin, para ello el usuario utilizar

la tecla CTRL y el botn activo del ratn.

Y OPTION estos:

Parmetro
VALUE
SELECTED

Significado
Este es el valor que asignar a la variable.
La opcin con esta propiedad ser la que aparezca seleccionada por defecto.

Botones del formulario

Existen dos clases e botones: uno que se utiliza para poner en marcha la operacin indicada por
ACTION (botones submit) y otro que sirve para resetear el formulario borrando el contenido de
todos los controles:

<INPUT TYPE=SUBMIT>
<INPUT TYPE=RESET>

Enviar consulta
Restablecer

En ambos casos su puede usar el parmetro VALUE para el texto que aparece dentro del botn. El
botn de submit puede ser una imagen, por ejemplo
<input name="imageField" type="image"
src="imgs/botonel.gif"
width="85" height="46" border="0">

Que se vera
Este botn actua como un botn tipo SUBMIT, pero enva con los datos del formulario las
coordenadas X Y del punto de la imagen donde puls el usuario.

Marcas de verificacin
Son controles parecidos a los campos de opciones pero que no van agrupados, o sea no son
excluyentes, Sirven para que el usuario coloque una marca de si o no (verdadero o falso, marcado
o no marcado). Lo podremos conseguir por medio de controles de confirmacin:

<INPUT NAME="Opina" TYPE=CHECKBOX>Te gusta el curso?

Te gusta el curso?

Si queremos que el control est activado por defecto le aadiremos el parmetro CHECKED.

Campos ocultos
Mediante un formulario podemos tambin enviar datos al programa encargado de procesarlo. Esto
se realiza mediante los llamados campos ocultos, que son campos INPUT de tipo HIDDEN, y se
llaman as porque no se ven en la pgina web, o sea, el usuario no los ve a menos que se mete en
la vista de cdigo de la pgina, digo esto poruqe no vayamos a pensar que con estos campos
podemos pasar informacin privada mediante los formularios. El cdigo para este tipo de campos
es algo como esto:
<INPUT TYPE=HIDDEN NAME="Curso" VALUE="Javascript">
De esta manera si en un sitio tengo muchos formularios sabr que estos datos en concreto vienen
de la pgina de Javascript. Su uso realmente no lo vers hasta que no escribas o utilices
programas para gestionar los formularios.

Formularios avanzados

Controles avanzados para formularios

Botones
Etiquetas
Agrupacin de elementos
Desactivacin de elementos

Controles avanzados en formularios

Con lo que has visto en la seccin anterior de formularios podrs perfectamente incoiporar estos
elementos de interaccn a tu pgina web, pero los navegadores modernos (MSIE 5+ y Netscape
6+) permiten el uso de algunas caractersticas extras aladidas por el estandard HTML 4.0,
caractersticas que bsicamente mejoran la esttica y facilitan el uso de estos elementos.

Botones
Una importante mejora en el HTML 4 es el nuevo control <BUTTON> que permite enriquecer la
etiqueta de texto que hasta ahora tenan los botones de formulario. Ahora estos elementos pueden
tener cualquier contenido HTML, como por ejemplo imagen con un texto. POr ejemplo el siguiente
cdigo
<BUTTON TYPE="button">
Inicio <img
src="imgs/im_crear/bolamas.gif"
nicio
width="10" height="10">
</BUTTON>
Los parmetros de dicha etiqueta son TYPE, que podr tomar los valores SUBMIT (por defecto),
RESET y BUTTON, NAME y VALUE.

Etiquetas
Los controles tipo LABEL permiten asociar etiquetas a los controles de formulario. Es decir ahora
el texto que suele acompaar a los campos que debe rellenar el usuario son solo eso texto, pero
con esta etiqueta ese texto se convierte en un elemento activo que forma parte del campo y
podemos seleccionar ste pulsando sobre la etiqueta. Observa el uso del atributo for usado para
asociar la etiqueta al campo cuyo ID tenga el mismo valro que este for
<INPUT ID="Curso" TYPE=CHECKBOX>
<LABEL for="Curso"> Me gusta este curso
</LABEL>

Me gusta este curso

Compara con este otro ejemplo aparentemente igual al anterior.

<INPUT NAME="Curso" TYPE=CHECKBOX>
Me gusta este curso/a

Me gusta este curso

En el primer caso el click sobre la etiqueta actua igual que sobre el control.

Agrupando elementos
HTML 4 nos presenta una forma sencilla de estructurar los formularios sin necesidad de acudir a
las socorridas tablas. Ahora podemos agrupar visualmente varios controles encerrndolos dentro
de la etiqueta FIELDSET, veremos que alrededor de ellos se ve un rectngulo con el ttulo que le
demos mediante la etiqueta LEGEND.
<FIELDSET>
<LEGEND>Tus datos</LEGEND>
<LABEL>
Nombre:

Tus datosNombre:
Edad:

<INPUT TYPE="text" name="nombre">

<br>Edad:
<INPUT TYPE="text" name="edad">
</LABEL>
</FIELDSET>
La posicin del ttulo (LEGEND) puede controlarse usando el parmetro ALIGN, que por defecto
es TOP (arriba), pero puede ser BOTTOM (abajo) a la LEFT (Izquierda) o RIGHT (derecha) .

Desactivando elementos
Todos los controles de un formulario se pueden desactivar, impidiendo as al usuario que los
sobreescriba. Se seguirn mostrando en pantalla, aunque con un aspecto distinto para indicar que
no son editables. Para ello slo tenemos que indicarle el parmetro DISABLED:
<LABEL
DISABLED>Origen:
<INPUT TYPE=TEXT
DISABLED>
</LABEL>

Origen:

Mapas de imgenes

Mapas de imgenes
Mapas lado cliente
Usando los mapas

Mapas
Recordemos que los enlaces en las pginas web podan escribirse con un texto o con una imagen.
Es decir podamos tener una imagen que al ser pulsada con el ratn nos llevaba a otra pgina.
Pues bien un mapa de imagen es algo parecido pero en el que l imagen no tienen asociado un solo
enlace sino varios: depende de que parte de la imagen pises para ir a uno u otro destino. Esto se
puede hacer de dos maneras:

Gestionando el mapa en el navegador.

Gestionando el mapa en el servidor.

Los ms utilizados sin duda actualmente son los primeros, los mapas del lado del cliente, pues no
exigen ningn apoyo del servidor y por tanto los puede usar cualuier webmaster en su propia
pgina.

Mapas lado cliente

Un mapa no es ms que una imagen en la que se definen zonas activas, o sea, zonas que al ser
pulsadas con el ratn actan como un enlace y nos llevan a otras pginas. Su creacin tienen dos
partes: una definir el mapa y otra asociar el mapa con una imagen:
<MAP NAME="mapa_enlaces">
<AREA SHAPE=... COORDS=... ALT="Enlace a..">

...
</MAP>
La descripcin del mapa es de lo ms simple: le damos nombre (para luego poderle asociar la
imagen) y definimos las zonas activas (formas geomtricas como vers a continuacin):

Parmetro

Significado

SHAPE

Define la forma de la zona: rectangular, circular o poligonal.

COORDS

Coordenadas (separadas por comas) que definen la zona. El nmero y significado

de esas coordenadas depender de la forma.

HREF
NOHREF
ALT

URL del enlace corespondiente a esta zona.

Zona inactiva
Texto alternativo, etiqueta idntica al ALT de IMG

Como podemos ver, para declarar correctamente una zona necesitamos conocer cmo se definen
exactamente las formas y coordenadas:

SHAPE

COORDENADAS

Rectangular

RECT

"x1,y1,x2,y2" siendo (x1,y1) la esquina superior izquierda y (x2,y2) la

inferior derecha.

Circular

CIRC

"x,y,r" siendo (x,y) el centro del crculo y r el 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

DEFAULT No se necesitan

Usando los mapas

Una vez definido como es el mapa lo aisgnamos a una imagen:
<IMG SRC=... USEMAP="#mapa_enlaces">
Siempre tenemos que aadir al comienzo del nombre de nuestro mapa una almohadilla (#).
Vamos a ver un ejemplo:
<MAP NAME="navegadores">
<AREA SHAPE=RECT COORDS="0,0,24,31"
HREF="http://www.apache.org" ALT="Servidor Apache">
<AREA SHAPE=RECT COORDS="26,0,53,31"
HREF="http://www.w3c.org" ALT="la W3C">
<AREA SHAPE=DEFAULT NOHREF ALT="por defecto">
</MAP>
<IMG SRC="mapa.gif" WIDTH=198 HEIGHT=51 BORDER=0 USEMAP="#deinteres">
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 fuera de las zonas activas.

Las tablas

Tablas
Definicin
Definir las filas
Definir las celdas
Ttulares

Tablas
La organizacin del texto en una pgina es posible gracias a las tablas. Muchas pginas web son
como pginas de revistas, y la forma ms simple de emular las funciones de maquetacin son las
tablas. Una tabla no es ms que una coleccin de listas y columnas a cuyas interseccinoes le
vamos a llamar celdas, y es en esas celdas donde podmeos colocar textos o imgenes. Las tablas
se pueden incluso anidar y las celdas se pueden agrupar unas con otras para lograr disposiciones
de texto e imagen prcitcamente similares a las que se podran conseguir en pginas de revistas
gracias a los programas de maquetacin.

Definir tablas
Para definir una tabla tan solo debemos definar las filas que la componen. Y dentro de estas las
caractersticas de las celdas. Por ejemplo la siguiente tabla posee 2 filas (2 <TR></TR>) y 3
columnas (3 pares <TD></TD> en cada fila) as:
<TABLE>
<TR>
<TD>1,1</TD>
<TD>1,2</TD>
<TD>1,3</TD>
1,1 1,2 1,3
</TR>
<TR>
2,1 2,2 2,3
<TD>2,1</TD>
<TD>2,2</TD>
<TD>2,3</TD>
</TR>
</TABLE>
Pero la definicin va ms all, podemos poner bordes, colores de fondo a las celdas, definir
mrgenes en las celdas, aumentar o disminuir el espaciado entre celdas. Resumimos todo esto en
la siguiente tabla de atributos:

WIDTH

Anchura de la tabla. Puede ir en pixels o en porcentaje de la anchura total

disponible.

ALIGN
BORDER
CELLSPACING
CELLPADDING

Alinea la tabla a izquierda (LEFT), derecha (RIGHT) o centro (CENTER).

Si

ahora,

por

Especifica el grosor del borde que se dibujar alrededor de las tabla y celdas.
Espacio entre celdas, en pixels.
Borde interior de las celdas, en pixels.
ejemplo

definimos

ahora

la

tabla

anterior

WIDTH="50%" ALIGN=CENTER> veremos lo siguiente:

1,1

1,2

1,3

como

<TABLE

BORDER=1

2,1

2,2

2,3

El contenido escrito son las coordenadas de la celda, as 1,2 indica que esa celda es la
correspondiente a la fila 1 y la columna 2.

Definiendo las filas

La definicin de cada fila se inicia con la etiquete <TR> y finaliza con </TR>, entre ellas
colocaremos las celdas. Cada etiqueta TR tiene los siguientes atributos:

ALIGN

Alinea el contenido de las celdas de la fila horizontalmente a izquierda ( LEFT), derecha

(RIGHT) o centro (CENTER).

VALIGN

Alinea el contenido de las celdas de la fila verticalmente arriba ( TOP), abajo (BOTTOM) o
centro (MIDDLE).

Defiminiendo las celdas

Ya slo nos queda definir cada celda para lo que disponemos de las TD y TH. Esta ltima es una
celda especial que se ver destacada, como un ttulo para la columna: en negrita y centrado.
Ambas etiquetas admiten los siguientes atributos:

ALIGN

Alinea el contenido de la celda horizontalmente a izquierda (LEFT), derecha (RIGHT) o

centro (CENTER).

VALIGN

Alinea el contenido de la celda verticalmente arriba (TOP), abajo (BOTTOM) o centro

(MIDDLE).

WIDTH

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).

NOWRAP

Impide que, en el interior de la celda, se rompa la lnea en varias lineas.

COLSPAN Nmero de celdas de una fila agrupadas.

ROWSPAN Nmero de celdas de la columna agrupadas.
Los dos ltimos parmetros se usan para fundir celdas de una misma fila o de una misma
columna. Por ejemplo veamos 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 BORDER=1>
<TR>
<TD COLSPAN=2>1,1 y 1,2</TD>
<TD>1,3</TD>
</TR>
<TR>
1,3
<TD ROWSPAN=2>2,1 y 3,1</TD> 1,1 y 1,2
<TD>2,2</TD>
2,2 2,3
2,1 y 3,1
<TD>2,3</TD>
3,2 3,3
</TR>
<TR>
<TD>3,2</TD>
<TD>3,3</TD>
</TR>
</TABLE>

Si te fijas cuando una celda con un colspan = 2 equivale a dos celdas a la hora de calcular el
nmero de celdas de la fila. Algo similar ocurre con el rowspan pero referido a celdas unidas en
vertical.

Titulares
Ya hemos dicho que hay un tipo de celdas utilizable como encabezamiento o titular, pero la tabla al
completo puede llevar un ttulo, que ir en una zona fuera de cualquier celda o fila. Esta es la
etiqueta CAPTION. Su uso es muy simple como puedes ver en este ejemplo:

Nmeros
<TABLE BORDER=1>
<CAPTION>
1,1 y 1,2
1,3
Nmeros</CAPTION>
2,2
2,3
...
2,1 y 3,1
</TABLE>
3,2 3,3
Con el parmetro ALIGN, podemos controlar que el ttulo aparezca arriba (por defecto TOP) o
abajo de la tabla , con el valor BOTTOM.

Marcos o frames

Marcos
Etiqueta <FRAMESET>
Etiqueta <FRAME>
Marcos flotantes <IFRAME>
Acceso a los marcos

arriba

Marcos
Denodados por unos y adorados por otros los marcos o frames son una forma de insertar varias
pginas web en una sola. Mal utilizados pueden arruinar la mejor pgina web, pues no hemos de
olvidar que la pantalla del monitor est fsicamente limitada. Cada marco que compone la pgina
poseer sus propios bordes y barras de scroll, comportndose como ventanas independientes. Su
situacin en la pgina es rgida, no podemos colocarlos en las posiciones que deseemos, si
tenemos cuatro marcos se situarn en cada uno de los cuatro cuadrantes de la pantalla. Si
tenemos dos la pantalla se dividir en dos filas o en dos columnas para alojarlos. Pueden ser tiles
para compartir un cierto contenido por todo el sitio web, por ejemplo para una barra de
navegacin.
Su uso puede parecer algo compeljo pero es muy simple. Bsicamente se trata de definir una
pgina contenedora de los marcos y de colocar en cada uno de ellos la pgina cuyo contenido
mostrarn. Por supuesto tambin concretaremos el tamao y posicin y otros atributos de cada
marco. Pueden existir navegadores que no puedan manejar los marcos, por ello colocamos un
texto alternativoa explicando la situacin. Mira el siguietne cdigo y ve los resultados en este
ejemplo.
<HTML>
<HEAD>
<TITLE>Los frames: pginas multiventana</TITLE>
</HEAD>
<FRAMESET COLS="20%,80%">
<FRAME NAME="indice" SRC="indice.htm">
<FRAME NAME="principal" SRC="principal.htm">
<NOFRAMES>

<P align="center">Al parecer tu navegador

no soporta marcos, actualzate.</P>
</NOFRAMES>
</FRAMESET>
</HTML>
Fjate las diferencias y coincidencias con una pgina HTML habitual: en lugar de BODY ahora
tenemos una etiqueta FRAMESET. Cada una de estas FRAMESET son una pgina o ventana
dentro de la pgina contenedora que estar compuesta por varias zonas definidas con los
parmetro COLS o ROWS. En el ejemplo se trata de dos marcos uno junto al otro: uno ocupa el
20% de la ventana del explorador y el otro el 80% restante.
Dentro del <FRAMESET> definimos los marcos que componen el conjunto y la accin alternativa
para navegadores que no soporten marcos. A cada uno de los marcos le ponemos un nombre y
especificamos qu pgina HTML se mostrar en l (etiqueta <FRAME>). Slo queda definir lo que
ver el usuario en el supuesto de que su navegador no soporte frames (etiqueta <NOFRAMES>).

arriba

Etiqueta FRAMESET
Los parmetros COLS y ROWS nos permiten controlar el tamao de los marcos presentados en la
ventana del navegador. Existen tres formas de establecer estos tamaos:

Porcentajes: podemos definir el tamao de un marco como un porcentaje del espacio

total disponible (el ancho o alto de la ventana del navegador)
Absolutos: Podemos especificar el ancho o alto del marco en pixels.
Calculado: Podemos colocar el ancho o alto de un marco y dejar que el tamao del otro
lo calcule el navegador, usando apra ello un asterisco en lugar de un valor o porcentaje.
Por ejemplo si tenemos tres marcos y colocamos cols=" 10%, 30%, *", el ltimo ocupar
el 60% (el espacio sobrante 100 - 10 -30). Si colcoamos el * varios marcos se repartirn
el espacio equitativamente, pero podemos tambin hacer que un marco sea doble o triple
de otro. As, un marco con un espacio de 3* ser tres veces ms grande que el que
contenga un asterisco.

Se pueden combinar los tres mtodos. Por ejemplo:

<FRAMESET COLS="10%,*,300,3*">
Supongamos que el ancho total de la ventana son 800 pixels. El primer marco ocupar el 10%, es
decir, 84 pixels. El tercero necesita 300, en total tenemos 384 ocupados luego quedan 800-384,
416 pixels libres. Los otros se repartirn este espacio en funcin de los asteriscos: 416/4 = 104
pixels para el de un asterisco y 312 para el otro. En total tenemos ocupados los 800 pixels. Lo ms
recomendable es dejar un marco con tamao calculado, o sea, con el asterisco para.
Y bueno si queremos que los marcos se distribuyan de una forma algo ms irregular podemos
aprovechar la posibilidad de anidarlos, en otras paralbras: un marco puede contener una pgina
que a su vez ontenga otros marcos. Esto se hace poniendo otro <FRAMESET> donde normalmente
colocamos las etiquetas <FRAME> tal que as:
<FRAMESET COLS="20%,80%">
<FRAME NAME="indice" SRC="indice.htm">
<FRAMESET ROWS="*,80">
<FRAME NAME="principal" SRC="superior.htm">
<FRAME NAME="ejemplos" SRC="principal.htm">
</FRAMESET>
</FRAMESET>
El resultado del anidamiento lo podris contemplar aqu.

Frameset tiene an dos parmetros extras: frameborder y framespacing, el primero permite

eliminar los bordes que separan a todos los marcos, mientras que el segundo permite controlar el
ancho del espacio que separa los marcos

Etiqueta FRAME
Esta es la etiqueta que nos permite describir como debe ser cada marco Los parmetros que
soporta son:

NAME
SRC
NORESIZE

Asigna un nombre a un marco, de esta manera luego podemos usarlo como

destino de un enlace.
Indica la URL del documento HTML que ocupar el marco.
Evita que el usuario pueda cambiar el tamao del marco.

FRAMEBORDER

Ssi lo igualamos a cero el borde de este marco desaparece (pero ojo si los
contiguos tienen borde ste se ver).

SCROLLING

Coloca o no las barras de scroll. Su valor es por defecto AUTO, aparecern si son
necesarias. Las otras opciones que tenemos son YES o colocarlas y NO, no
ponerlas.

MARGINWIDTH

Permite cambiar los mrgenes horizontales dentro de un marco. Se representa

en pixels.

MARGINHEIGHT Igual al anterior pero con mrgenes verticales.

Marcos flotantes <IFRAME>

Una excelente alternativa a los marcos fijos son los marcos flotantes, actualmente soportados por
todos los navegadores. La idea de este elemento ideado por Explorer, sigue siendo la misma:
incluir una pgina externa dentro de otra, pero en este caso el marco puede quedar totalmente
integrado en la pgina contenedora. Es como un include. La descripcin de este elemento es muy
parecida a los frames: es necesario decir de donde viene la pgina y como se ha de ver el marco
(bordes, mrgenes scroil...) Esto se hace mediante los parmetros ya vistos:

NAME

Asigna un nombre a un marco, de esta manera luego podemos usarlo

como destino de un enlace.

ALIGN

Alineacin del marco respecto al texto que lo rodea (botton, right, left,
middle)

SRC
HEIGHT
WIDTH
FRAMEBORDER

Indica la URL del documento HTML que ocupar el marco.

Altura del marco
Anchura del marco
Ssi lo igualamos a cero el borde de este marco desaparece

SCROLLING

Coloca o no las barras de scroll. Su valor es por defecto AUTO, aparecern

si son necesarias. Las otras opciones que tenemos son YES o colocarlas y
NO, no ponerlas.

MARGINWIDTH

Permite cambiar los mrgenes horizontales dentro de un marco. Se

representa en pixels.

MARGINHEIGHT
Igual al anterior pero con mrgenes verticales.
allowtransparency Si es true La pgina origen puede tener como color de fondo transparent.

Acceso a otros marcos

Si lestes la seccin dedicada a los enlaces recordars que cuando pulsas un enlace en la ventanda
del navegador aparecer otra pgina, pero podamos colocar el atributo target para hacer que la
nueva pgina se abriera en otra ventana. Pues bien esta otra ventana puede ser otro marco. As
en un marco puedo colocar un enalce que abra la pgina en otro marco de la misma pgina.
Este parmetro se puede colocar en tres etiquetas: <A>, <AREA> y <BASE>. 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.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 principal pondremos:
<A HREF="pagina.html" TARGET="principal">
Tambin existen cuatro nombres reservados que podremos utilizar en el parmetro TARGET:
_top
_blank
_self

Elimina todos los marcos existente y muestra la nueva pgina en la ventana original sin
marcos.
Muestra la nueva pgina en una ventana nueva y sin nombre del navegador.

Muestra la nueva pgina en el marco donde est declarado el enlace.

_parent
Muestra la nueva pgina en el <FRAMESET> que contiene al marco donde se declara el
enlace. En el ejemplo que pusimos de <FRAMESET> anidados, una enlace situado en el
marco ejemplo cuyo parmetro TARGET fuese igual a _parent eliminara la separacin
entre los marcos ejemplo y principal y mostrara en ese nuevo marco la nueva
pgina.

Los Estilos CSS

Hojas de estilo
Clases
Bloques <SPAN> y <DIV>

Hojas 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:
<STYLE TYPE="text/css">
P {color: green; margin-left: 30;}
</STYLE>
Vamos a detenernos en todos los elementos. Para empezar, la etiqueta HTML con la que
deberemos englobar las hojas de estilo ser <STYLE>, 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 text/css.
Ahora examinemos la hoja de estilo propiamente dicha. Indicaremos 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 estilos.css (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:
<LINK REL="stylesheet" HREF="estilos.css" TYPE="text/css">
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.verde {color: green; margin-left: 30px;}
slo estarn verdes y con un margen izquierdo de 30 pixels aquellos prrafos definidos con <P
CLASS="verde">. As de sencillo.
Ampliando un poco ms las posibilidades
Supongamos que tenemos unos prrafos que
y color verde. Y deseamos que uno solo de
Podramos definir dos clases distintas, pero
ejemplo:

de las clases, se pueden realizar excepciones.

queremos que tengan unos mrgenes determinados
esos prrafos, con los mismo mrgenes, sea azul.
hay un mtodo mejor: usar el parmetro ID. Por

all.verde {color: green; margin-left: 10px;}

#ej1 { color: blue;}

Ahora todos los prrafos de clase verde seran, obviamente, verdes y con un margen de 10 pixels.
Sin embargo el prrafo definido por <P CLASS="verde" ID="ej1"> ser azul:
Este prrafo es muy verde.
Y anda que este...
Sin embargo, este no, fjate que curioso.

Bloques SPAN y DIV

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 <SPAN> y <DIV>.
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
<SPAN CLASS="rojo"> y </SPAN> o entre <DIV CLASS="rojo"> y </DIV>.
La diferencia entre ambas es que, mientras SPAN realmente no hace nada por s misma, DIV
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:
all.titulo {
margin-top: -24px;
color: blue;
font-size: 20px;
}
all.sombra {
margin-top: 2px;
margin-left: 2px;
color: black;
font-size: 20px;
}
cuyos atributos explicaremos en la referencia de las hojas de estilo, y ponemos el siguiente cdigo
HTML:
<DIV ALIGN="CENTER" CLASS="sombra">El maravilloso curso de HTML</DIV>
<DIV ALIGN="CENTER" CLASS="titulo">El maravilloso curso de HTML</DIV>
obtendremos este tpico efecto sombra:

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.

Estilos CSS: referencia

Estilos CSS
Propiedades de bloque
Propiedades de tipo de letra
Propiedades de formato del texto

Propiedades de color y fondo

Otros

Estilos CSS
Los estilos CSS son una forma de separar el contenido de la pgina web de su formato. Es decir
por un lado nos preocupamos de dar contenido a la pgina y por otro de definir como se deber
ver. Es una idea magnfica que nos permite, por ejemplo, cambiar el estilo de diseo de todo un
sitio web sin necesidad de reeditar todas sus pginas: solo modificaramos el archivo donde se
desribe el formato de las pginas, como esquemas de color, imgenes de fondo, etc. Pero no todo
es perfecto: los navegadores Explorer y Netscape no entienden los estilos exactamente igual por lo
que es conveniente probar las cosas en ambos para asegurarnos que todo se ver como nosotros
queremos.

Propiedades de bloque
Cuando hablabamos del formato en las pginas HTML diferenciamos entre elementos de bloque y
elementos en linea, Los bloques eran elementos como el <p> (prrafo) o las <div> (capas).
Entonces de entrada veamos que propiedades se les puede aplicar a este tipo de elementos:

Propiedad
margin-top, margin-right,
margin-bottom, margin-left,
margin: top right bottom left

Significado
Mrgenes dntro del bloque. Tanto
margin como margins() se
utilizan para cambiar todos estos
atributos a la vez.

padding-top, padding-right,
padding-bottom, paddingDistancia entre el borde y el
left,<br/> padding: top right contenido del bloque.
bottom left
border-top-width, borderright-width, border-bottomwidth, border-left-width,<br/> Anchura del borde de un bloque.
border-width: top right bottom
left

Valores
tamao, porcentaje
o auto. Por defecto
es cero.
tamao, porcentaje
o auto. Por defecto
es cero.

numrico

none, ruged,
solid, 3D,... por

border-style

Tipo de borde de un bloque.

border-color

Color del borde de un bloque.

Cdigo o nombre de
color

width, height

Ancho y alto del bloque.

tamao, porcentaje
o auto, automtico
por defecto.

float

Justificacin del contenido de un

bloque.

clear

Propiedades de tipo de letra

defecto ninguno
(none).

left, right o
none, por defecto
ninguna.

Permiso para que otro elemento se left, right,

pueda colocar a su izquierda o
both o none, por
derecha.
defecto ninguno.

Ahora vamos a examinar las propiedades del tipo de letra que el usuario va a ver. Son las
siguientes:

Propiedad

Descripcin

font-family Tipo de letra (que puede ser

genrico) que vamos a usar.

font-size

Tamao del tipo de letra.

font-weight Grosor del tipo de letra

font-style

Posibles valores
lista de tipos, ya sean genricos o no, separados
por comas.

xx-small, x-small, small, medium, large,

x-large, xx-large, tamao relativo o tamao
absoluto. Por defecto medium.
normal, bold, bolder, lighter o 100-900

(negrita).

(donde 900 es la negrita ms gruesa). Por defecto

normal.

Estilo del tipo de letra

(cursiva).

normal, italic, italic small-caps,

oblique, oblique small-caps o smallcaps. Por defecto normal.

Recordemos lo dicho al hablar del tipo de letras: no todos tus tipos tienen que estar en los
ordenadores de tus visitantes.

Propiedades de formato de texto

Nuesto siguiente objetivo van a ser las propiedades de formato del texto que cualquier procesador
de textos nos permite cambiar.

Propiedad

Descripcin

Posibles valores

line-height

Interlineado.

nmero o porcentaje.

textdecoration

Efectos variados sobre el

texto.

none, underline (subrayado), overline (como

subrayado, pero por encima), line-through
(tachado) o blink (parpadeante); por defecto
ninguno.

baseline (normal), sub (subndice), super

(superndice), top, text-top, middle, bottom,
text-bottom o un porcentaje. Por defecto
baseline
capitalize (pone la primera letra en
maysculas), uppercase (convierte todo a
maysculas), lowecase (a minsculas) o none,

verticalalign

Posicin vertical del texto.

texttransform

Transforma el texto a
maysculas o minsculas.

text-align

Justificacin del texto.

text-indent

Tabulacin con que aparece

tamao o porcentaje, por defecto cero.
la primera lnea del texto.

por defecto no hace nada.

left, right, center o justify

Propiedades de color y fondo

Tambin es posible cambiar el color o la imagen de fondo de cualqueir elemento.

Propiedad

Descripcin

Posibles valores

color

Color del texto.

un color (en el formato habitual).

background

Modifica tanto el grfico el color de

fondo.

direccin del fichero que contiene la imagen

o un color.

Las direcciones URL (para la imagen de fondo por ejemplo) se expresan del siguiente modo:
background: url(fondobonito.gif);

Otros

Propiedad

Descripcin

Posibles valores

display

Decide si un elemento es interior

(como <I>), un bloque (<P>) o un
elemento de una lista (<LI>).

list-style

disc, circle, square, decimal,

Estilo de un elemento de una lista,
lower-roman, upper-roman, lowerpudiendo incluir un grfico al comienzo
alpha, upper-alpha, none o la
del mismo.
direccin de un grfico

inline, block, list y none (que

'apaga' el elemento)

Decide como se manejan los espacios,

white-space si de manera normal o como sucede

dentro de la etiqueta <PRE>.

normal y pre

Y ahora... ya no hay ms... por fn acabamos! Dejadme que respire un poco y ahora continuamos.

Los scripts

Los scripts
Javascript

Los scripts
Un script es un programa insertado dentro del documento HTML y que es interpretado y ejcutado
por el navegador del usuario. Por tanto estos programas se ejecutan en el ordenador del usuario
bien sea directamente (al leer la pgina) o cuando se produce un suceso o evento particular, como
puede ser el pulsar sobre un enlace o mover el ratn o cargar una imagen...
Estos scripts permiten crear pginas dinmicas, modificar el comportamiento normal del
navegador, validar formularios, realizar pequeos efectos 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 CGI (escritos en
lenguajes como Perl o PHP).
El primer lenguaje usado para crear scripts fue el JavaScript de Netscape. Nacido con la versin
2.0 de este navegador y basado lejanamente 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.
Internet Explorer de Microsoft, comenz a soportar este lenguaje en su versin 3.0, pero al mismo
tiempo introdujo otro lenguaje con las mismas funciones: el VBScript, una derivacin de BASIC.
Pero este intento no lleg muy lejos, y el VBScript ha quedado para otras aplicaciones de
Microsoft, como Access o Word.

Javascript
Aunque este curso est enfocado a aprender HTML, vamos a detenernos un poco para mostrar la
utilidad de los lenguajes de script. Para ello vamos a realizar una pequea introduccin al
Javascript. Si te sientes interesado, visita Javascript Desde Cero donde ecnontrars bastante
material para aprender este lenguaje.
Vamos a realizar nuestro primer "programa" en JavaScript. Haremos surgir una ventana que nos
muestre el tradicional 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.
holamundo.html
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!--function HolaMundo() {
alert("Hola, mundo!");
}
// --->
</SCRIPT>
</HEAD>
<BODY>
<FORM>
<INPUT TYPE="button" NAME="Boton" VALUE="Pulsame" onClick="HolaMundo()">
</FORM>
</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:
<SCRIPT LANGUAGE="JavaScript">
</SCRIPT>
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 <SCRIPT> escribir lo que hay entre medias de estos elementos, as que lo
encerramos entre comentarios por si las moscas.
function HolaMundo() {
alert("Hola, mundo!");
}
Esta es nuestra primera funcin en JavaScript. En el cdigo de la misma vemos una llamada al
mtodo alert (que pertenece al objeto window) 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.
<FORM>
<INPUT TYPE="button" NAME="Boton" VALUE="Pulsame" onClick="HolaMundo()">
</FORM>
Dentro del elemento que usamos para mostrar un botn vemos una cosa nueva: onClick. 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 HolaMundo(), 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 Javascript
Desde Cero.

Las capas o layers

Capas
Definicin
Propiedades

Capas
Las capas son bloques con contenido HTML que ppueden posicionarse de manera dinmica y
organizables en 3D. Realmente tienen sentido dentro de los estilos CSS, de hecho sus ventajas
solo se pueden aprovechar al cien por cien utilizando estilos CSS. Es la mejor ilustracin de lo que
significa separar contenido de presentacin.
En realidad, el nombre de capas proviene de Netscape, que estos elementos los implementaba
como <layers>, en castellano capas. Las versiones modernas de Netscape (de la 6 en adelante)
ya no usan esta etiqueta si no que se han decantado por la ms standard <div>
No obstante la manipulacin de estos elementos por parte de Micorsoft y Netscape son diferentes,
ambos usan algunas extensiones propias, auqnue ambos admiten los standares de la W3C con lo
que el uso de estos elementos es bastante universalizable.

Definicin
En realidad las capas no se difinen completamente mediante el lenguaje HTML, sino necesitan del
lenguaje de definicin de estilos CSS. Entre ambos podemos colocar en nuestras pginas estos
elementos movibles, ocultables y en general manipulables de forma dinmica. Por ejemplo:
<STYLE TYPE="text/css">
.la_capa {position:absolute; top:100px; left:20px; width:300; heigth: 200}
</STYLE>
Con esto hemos definido un tipo de capa, denominda la_capa, cuya altura es de 200 px y anchura
300 px. Adems est situada a 100 px de la parte superior y a 20 px del margen izquierdo de la
pgina. Repito que hemos definido una clase capa, pero no hemos contruido la capa. Para
construirla usamos la etiqueta <DIV> y el atributo ID
<DIV ID="micapa">
<H1>Esto es contenido</H1>
<P>Aqu sigue ms contenido HTML </p>
...
</DIV>
Cualquier bloque <DIV> con ID="mi_capa" estar en esa posicin y con ese tamao.
Esta capa puede colocarse en cualquier parte de la ventana, su posicin es absoluta (absolute).
Pero tambin podemos definir capas de posicionamiento relativo, es decir, que ms que definir las
coordenadas de suposicin respecto a la ventana, describimos su posicin respecto al lugar donde
aparezca en el texto. En otras palabras: describimos desplazamiento de la capa respecto de donde
la ponemos. Se definen as:

<STYLE TYPE="text/css">
.relativa {position: relative; left: 20px;
</STYLE>

top: 100px;}

Este ejemplo te muestra dos capas, una absoluta y otra relativa, esta ltima est construida con
una etiqueta <span>, para evitar el salto de lnea propio de los bloques.

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:

Propiedad

Significado

Valores

left y top

Sitan la esquina superior

izquierda de la capa
respecto a la esquina
superior izquierda de la
distancia en
capa donde est metida.
pixels, por
Hay que tener en cuenta
defecto cero.
que el documento completo
tambin se considera una
capa.

width y height

Determinan la anchura y
altura de la capa.

un tamao en
pixels.

Nos permite definir el rea

que se podr ver dentro de
la capa. Por ejemplo,

clip:rect(20px 30px
40px 10px); recortar la
clip

z-index

capa creando un cuadro

un rea.
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 3010 de ancho y 40-20 de
alto.
Las capas con un mayor zindex 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 z-index.

nmero positivo,
por defecto las
capas definidas
en el cdigo HTML
ms tarde estn
ms arriba.

visible,
hidden (oculta)
o inherit

visibility

Especifican si la capa debe

verse o estar oculta.

background-image

Grfico de fondo de la
capa.

(hereda la
visibilidad de la
capa padre). En
aquellas capas
que simplemente
estn dentro de la
pgina principal,
este valor es
equivalente a
visible.
una direccin.

background-color<imagenenlinea
direccion="graficos/explorer.gif"
descripcion="explorer"/> y layerbackground-color<imagenenlinea
direccion="graficos/netscape.gif"
descripcion="Netscape"/>

Color de fondo de la capa.

un color.

Sonido

Esta pgina me suena

Sonido manual
Sonido de fondo

Esta pgina me suena

Siempre hemos oido que las pginas web y que internet se aprovecha de la tecnologa multimedia,
que si puedes oir msica y ver vdeos. Pues bien el elnguaje HTML, repetimos, es un lenguaje par
definir documentos de hipertexto y soporta por tanto elementos multimedia como puede ser
sonido. Los navegadores mayoritarios son capaces de ejecutar piezas musicales desde una pgina
web, algo de lo que algunos webmaster abusan despiadadamente. Hasta hace no mucho tiempo el
colcoar una pieza de msica en una pgina se pagaba con tiempos de carga muy elevados (el
navegador no solo tena que subir la pgina con sus imgnes y texto, sino tambin el archivo de
sonido). Pero actualmente la extensin de las redes de alta velocidad ha casi eliminado este
problema. Aunque si decides colocar msica en tu pgina piensa en que el visitante quizs no
quiera oir msica o prefiera escuchar la radio o sus propios CD,s, por tanto dale siempre la
oportunidad de hacer callar a la pgina.
Los formatos de sonido que sern reproducidos por cualquier navegador son los WAV y MID.
Aunque otros formatos tambin sern reproducidos previa carga del correspoindiente plugin, como
Real Audio o Quicktime.

Sonido manual
Una forma muy simple de ejecutar un sonido es mediante un enlace que llame alk archivo de
sonido, el sistema operativo llamar a la aplicacin asociada y ese sonido se escuchar. Pero se
lanzar la aplicacin asociada. Por ejemplo:
<A HREF="ringin.wav">El telfono?<A>
No est mal, al menos el asunto suena. Pero claro con una aplicacin asociada de por medio.

Sonido de fondo
Pero hay otra manera: el sonido de fondo, un sonido que suena al cargar la pgina. El navegador
de Microsoft, desde la versin 2.0, utilizaba la etiquea BGSOUND:

<BGSOUND SRC="musica.mid">
Su parmetro SRC indicar el archivo a reproducir. Tambin podemos permitir que se repita un
cierto nmero de veces mediante el parmetro. Si se indica LOOP="infinite", el archivo se
reproducir indefinidamente, mientras estemos en la pgina. Para detener la msica o cambiar de
melodia debamos hacer uso de Javascript.
Los exploradores actuales usan la etiqueta <EMBED>, que tiene los siguiente parmetros:

Parmetro
SRC
WIDTH y HEIGHT
AUTOSTART="true"
LOOP="true"
HIDDEN="true"

Utilidad
Contiene el nombre de archivo de sonido a reproducir
Tamao de los controles del reproductor que aparece en la pgina.
Arranca automticamente la reproduccin.
Reproduce ininterrumpidamente el fichero hasta que salimos de la pgina.
Oculta el reproductor.

Pero el problema del plugin vuelve a aparecer tambin con este mtodo, puede ocurrir que el
ordenador cliente lance su aplicacin para hacer sonar el fichero cargado. Y como suena esto?
pues este ejemplo os lo muestra.

Guia de estilo

El sitio web
Contenido
Navegacin
Estructura de las pginas
Accesibilidad
Diseo
Mantenimiento

El sitio web
La elaboracin de sitios web es una tarea bastante personal, es casi un arte, y al final cada
webmaster se desarrollar su propio estilo, una especie de firma intangible que baa todas sus
pginas. Existen en la red multitud nde guas de estilo que ayudan al principiante, y al no tan
principiante, a evitar errores comunes y a lograr pginas de cierta calidad.
Por eso no quiero cerrar este cursillo sin un captulo dedicado a la forma de hacer buenos sitios
web. Al menos desde el punto de vista de un webmaster que lleva algn tiempo en esto. Ojo, no
es un captulo de recetas para resolver problemas concretos, es ms bien un resumen, que
pretende servir para que quien las lea se plantee las cosas antes de lanzarse alegremente sobre
su editor para crear su magnfico sitio web. En Creatuweb existe toda una seccin dedicada este
tema, mucho ms detallada y completa, por tanto esto os debe servir tan solo de aperitivo antes
de visitar esas otras pginas.

Contenido
Todos hemos visto pginas horribles en cuanto a diseo y estructura, pero cuyo contenido nos ha
sido lo bastante til como para obligarnos a detenernos en ellas. Aunque luego apenas hallamos
vuelto a visitarla. Quiero decir que el contenido de una pgina es bsico para que alguien la visite.
No esperemos que por publicar las fotos del botelln del viernes vamos a atraer a millones de
visitas. Cualquier pgina ser visitada si su contenido es interesante. As que lo primero es pensar

que tenemos que decir, si es que tenemos algo que decir. A la mejor a mi me gusta coleccionar
rabillos de boina, pero crees que eso puede interesar a mucha gente? Sin embargo si he peleado
con Linux desde su nacimiento y lo conozco como el padre que lo pari, seguro que mi pgina con
el tiempo llegar a tener una gran difusin... y puedo sacarle provecho. El Linux hoy en da es un
producto muy en alza.
Ahora si que podras usar esa plataforma para colocar tu pgina personal, en la que podras
publicar, por ejemplo, tu curriculum, algo que por si slo no atraera a demasiados visitantes.
Y claro ya que el visitante ha llegado a tu pgina no dejes que se vaya para siempre. Haz que tu
sitio sea un referente, por ejemplo con una pgina de enlaces a sitios que traten del mismo tema
que la han trado hasta aqu. Para muchos visitantes tu pgina sera una lista de favoritos. O sea,
ser til al visitante.
Ah, y nunca, nunca coloques pginas vacas. Eso de pgina en construccin suele ser bastante
irritante. Ponte en el lugar del visitante, llega a tu sitio convencido de haber encontrado lo que
buscaba y se encuentra con una pgina con el cartelito de En Construccin. Lo normal es que no
regrese.

Navegacin
Si quieres que los visitantes recorran tu sitio y descubran lo bueno que es faciltales la navegacin,
procura que lleguen a donde quieran ir en un par de clicks. No le hagas volver a la pgina principal
cada vez que quiera ir a una u otra seccin. Esto lo puedes logar con una buena barra de
navegacin, un men sencillo e intuitivo al que pueda acceder est donde est.
Una barra o men de navegacin debe contener como mnimo un enlace a la pgina principal, y
uno a cada seccin o subseccin del sitio. La barra la puedes construir mediante javascript,
mediante un frame ndice o colocando en todas las pginas el cdigo HTML de esa barra. Tampoco
est de ms disponer de un enlace a una pgina con el mapa del sitio.
Lo ideal es ver como la gente se mueve por tus pginas, mira como se distribuyen las visitas por
tu sitio y facilita el acceso a las menos visitadas. Si ves que an as no aumentan las visitas
examnalas por que a lo mejor no interesan. En cuanto a las ms visitadas, coloca sus enlaces de
forma muy accesible.
Ah, y ojo con los enlaces rotos. Procura repararlos cuanto antes, es como una casa descuidada.

Estructura
Dale una estructura lgica a tu sitio. Un sitio web no es tan solo la suma de todas sus pginas, es
tambin el como se relacionan entre s. Una serie de temas secuenciales como este cursillo puede
tener una estructura secuencial: est pensada para que las pginas sean vistas una tras otra, sin
saltos. No est de ms un botn de pgina adelante y pgina atrs en cada tema, pero sin quitarle
al usuario la posibilidad de saltar a un tema especfico en un momento dado.
Ojo con las pginas excesivamente largas. Aunque el aumento de la velocidad en internet ha
permitido superar con creces los hasta hace no mucho recomendados 20 Kb por pginas, si un
usuario tiene que desplazar el botn de scroll hasta el suelo es fcil que se vaya a un sitio ms
cmodo. Si lo que ve en la parte superior de la pgina no le atrae es probable que no pulse en el
scroll vertical, y si este es largo... Procura que en la primera parte de tu pgina haya informacin
suficiente sobre el contenido de la misma.
Recuerda que, salvo excepciones, a casi nadie le apetece leer en el monitor. Procura dividir tu sitio
en secciones o zonas con un nmero suficiente de pginas, no intentes meter una seccin
completa en una pgina.

Ah, y ojo con esas splash pages, esas pginas de acceso que solo contienen un botn de entrar y
una bonita imagen. Puede que en algn caso sea necesaria, pero quien llega a un sitio buscando
una solucin quiere ir directo al grano. En muchas ocasiones estas pantallas de presentacin se
construyen con Flash y enlentecen innecesariamente la carga, en estos casos siempre se agradece
el botn de saltar la presentacin (skip intro).

Accesibilidad
No hagas demasiadas presunciones sobre los medios de acceso a tu pgina. Puedes presuponer
que usarn un monitor en color, pero poco ms. As que procura que tus pginas puedan verse
bien en cualquier navegador y con cualquier resolucin. Adems si tu tienes una magnfica ADSL
de 8 Mb/s puede que muchos de tus visitantes se conecten con un modem de 56 Kb/.
Lgicamente acertar con esto es ms difcil cuanto ms amplia sea tu audiencia.
Puede que para mejorar el acceso algunos visitantes desactiven la presentacin de grficos,
prevve esta situacin colocando en todas tus imgenes lel parmetro ALT .
No abuses de los plugins, muchos usuarios puede que anden con ordenadores limitados en
recursos y no quieran esperar a la carga de un pesado applet en Java o una presentacin en Flash,
si puedes hacerlo con HTML y alo sumo con Javascript, hazlo.

Diseo
Al principio decamos que una pgina con un buen contenido era imprescindible par atraer visitas.
Pero no cabe duda de que estas visitas estarn ms tiempo y regresarn si encuentran un lugar,
no solo cmodo como hemos visto, sino agradable a la vista. Algunos grficos bien situados, sin
abusar, junto a unos colores nada agresivos pueden hacer que elijan tu pgina antes que la del
vecino en la lista de enlaces de un buscador. Si usas una imagen de fondo procura que no moleste
la lectura y que no distraiga. Cuidado tambin con los colores de texto y de fondo, busca el
mximo contraste.
Si tienes que destacar algo puedes usar algn grfico animado discreto, visualmete pesan mucho
y distraen. Claro que si estas diseando una pgina infantil estos elementos son fundamentales.
Evita en lo posible los bordes en las tablas, una pgina muy fragmentada se ve mal. Si usas
bordes intenta que sean discretos y solo los imprescindibles.
En cuanto a los frames, si no tienes ms remedio usalos pero recuerda que las pantallas de los
monitores tienen una superficie limitada. Procura no colocarles bordes ni las barras de scroll.

Mantenimiento
Si has programado alguna vez sabe que el trabajo no termina cuando el programa est en
marcha. Y si no has programado nunca tambin deberas saberlo, basta con que te fijes en la
versin actual de tu navegador y la versin del mismo aue corra el ao pasado. Cualquier
producto informtico acaba realmente en un continuo proceso de mantenimiento, comprobar que
todo funciona y mejorar todo lo mejorable y como no hay nada perfecto ... todo es mejorable.
Comprobar porqu una seccin no es demasiado visitada, o actualizar la lista de enlaces o tantos
detalles son algunas de las tareas que el webmaster no puede olvidar.

En este sentido una buena costumbre es colocar encuestas que permiotan a tus visitanes opinar o
calificar algunos aspectos de tu sitio. El visitante siente que cuenta para el autor de las pginas y
te puede ayudar a ver ese error en el que tu no habas cado.
Tampoco est de ms mostar la fecha de la ltima modificacin que hicistes a tu pgina, el usuario
sabe si la informacin de tu sitio es actual o ya est superada.
Deja alguna zona de tu portada para publicar las novedades que vayas incorporando a tu sitio o
para publicar las secciones ms interesantes, las que quieras difundir ms.
Y recuerda que en el area principal de Crea tu web tienes una guia bastante ms completa que
este pequeo resumen.