Mi Primera Página Web en HTML

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>
arriba
arriba
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 pgina web, aunque
le falta el contenido, pero todo llegar.</P>
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.
El documento HTML
Estructura del documento
La cabecera
Meta Name
Meta Http-Equiv
El cuerpo

Estructura del documento
La estructura de un documento HTML se puede resumir as:
tipo de documento
<HTML>
<HEAD>
<TITLE>titulo de la pgina</TITLE>
cosas que afectan a la pgina pero no a su contenido
</HEAD>
<BODY parmetros>
contenido de la pgina
</BODY>
</HTML>
arriba
arriba
En el tipo de documento deberemos especificar a que estndar del HTML responde nuestra pgina
entre una de las siguientes opciones:
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0//EN">
Cumple el estndar HTML 2.0
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://w3.org/TR/REC-html40/loose.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
"http://w3.org/TR/REC-html40/strict.dtd">
Cumple el estndar HTML 4.0 y no contiene adems elementos desaconsejables
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN"
"http://w3.org/TR/REC-html40/frameset.dtd">
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 cabecera
Suele ser el lugar ms indicado para colocar aquellos elementos de la pgina que no alteren el
contenido de la misma, aunque si la forma de presentarlo y su comportamiento. Es por eso que es el
lugar ms recomendable para colocar los scripts y las hojas de estilo, como veremos en los captulos
correspondientes.
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:
<BASE HREF="http://www.misitio.com/">
Ahora todas nuestras URLs relativas se encontrarn dentro del
servidor http://www.misitio.com

Meta Name
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 NAME="GENERATOR" CONTENT="Mozilla/4.03 [es] (Win95; I) [Netscape]">
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). Como veris el uso es muy simple, en NAME colocamos
el nombre de la etiqueta y en CONTENT colocamos su valor, ambos entre comillas y con el signo igual
por delante.
Estas son las propiedades ms comunes:
Name Content
arriba
arriba
AUTHOR Autor de la pgina.
CLASSIFICATION Palabras que permite clasificar la pgina dentro de un buscador jerrquico (como Yahoo).
KEYWORDS Palabras clave por las que encontrarn la pgina en los buscadores. Google no le hace mucho caso.
GENERATOR Herramienta utilizada para hacer la pgina.
DESCRIPTION Descripcin del contenido de la pgina. Google le hace algn caso.

Meta http-equiv
Son etiquetas usadas tambin para dar informacin al navegador y complementan las etiquetas Meta
vistas en el apartado anterior. En algunos casos existen etiquetas Meta Name y http-equiv similares.
Su uso es similar a las etiquetas Meta Name, por ejemplo:
<META HTTP-EQUIV="expires" CONTENT="Wed, 26 Feb 1997 08:21:57 GMT">
La nica diferencia est en que en lugar de NAME usamos HTTP-EUIV, el resto es igual. Cuando el
contenido conste de ms de varios valores, estos se separan con ; (punto y coma). Veamos algunos
tipos:
HTTP-EQUIV CONTENT
expires Fecha desde la que la pgina debe ser recargada por los navegadores
pragma El contenido debe ser no-cache y sirve para que el navegador no guarde la pgina en el ordenador
del internauta.
Content-Language Idioma en el que est escrita la pgina. Se usan las iniciales como: es_ES: espaol Espaa, en_US:
ingles americano...
Refresh Indica al navegador el tiempo (en segundos) que debe esperar para recargar la pgina
automticamente y la pgina a la que debe ir. Ambos datos se separan con un punto y coma.
Content-Type Tipo de documento y juego de caracteres usado. Lo habitual es colocar el valor:
text/html; charset=iso-8859-1
Si n o se usa los caracteres especiales (letras acentuadas, ) pueden quedar ilegibles .

El cuerpo
El cuerpo es el contenido de la pgina propiamente dicho, o sea, lo que se ve, en el es donde
colocarn prcticamente todos los elementos que vamos a ir viendo por este manual. Los atributos
que admite esta etiqueta <BODY>:
BACKGROUND Coloca una imagen como fondo de la pgina.
BGCOLOR Define el color de fondo de la pgina.
BGPROPERTIES
Cuando es igual a FIXED el grfico definido como fondo de la pgina permanecer
inmvil aunque utilicemos las barras de desplazamiento.
TEXT Color del texto.
LINK Color de un enlace no visitado (por defecto azul).
VLINK Color de un enlace ya visitado (por defecto prpura).
ALINK Color que toma un enlace mientras lo estamos pulsando (por defecto rojo).
arriba
arriba
LEFTMARGIN y
TOPMARGIN
Nmero de pixels que dejar de margen entre el borde de la ventana y el contenido de la
pgina.
MARGINWIDTH y
MARGINHEIGHT
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.
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
<P>
Sirve para delimitar un prrafo. Inserta una lnea en
blanco antes del texto.
Soy un prrafo: fjate en los espacios
de antes y de despus.
<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> ...
</BLOCKQUOTE>
Mete sangras de prrafo tanto a derecha como a
izquierda. Suele usarse como tabulador
Si quieres ver el texto indentado por
ambos mrgenes usa el Blockquote.

arriba
arriba
arriba
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>
Cabecera de nivel 4
<H5> ... </H5> Cabecera de nivel 5
<H6> ... </H6> 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
<S> ... </S>
Para tachar. A m, en cambio, nadie me quiere
<TT> ... </TT>
Permite representar el texto en un tipo de letra de
paso fijo.
No soy variable
<SUP> ... </SUP> Letra superndice. E=mc
2

<SUB> ... </SUB> Letra subndice. ai,j=bi,j+1
<BIG> ... </BIG>
Incrementa el tamao del tipo de letra. Soy GRANDE
<SMALL> ... </SMALL>

Disminuye el tamao del tipo de letra. Cre ver un lindo gatito

arriba
arriba
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 Significado Efectos
<CITE> ... </CITE> Cita, por ejemplo de un texto Esta frase no es ma
<CODE> ... </CODE> Cdigo int x=0;
<STRONG> ...
</STRONG>
Fuerte, negrita. Hay cosas importantes.
<EM> ... </EM> 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>
Para representar una serie de caracteres
literalmente.
Estoy en un literal
<ABBR> ... </ABBR>

Abreviaturas. La WWW usa el protocolo http

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

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.
arriba
arriba
<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 extendidos en HTML
Caracteres reservados

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:
@
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
arriba
arriba
arriba
á, Á, é, É,... , , , , , , , , y
ñ y Ñ y
¿
¡
º
ª
™
o
©
®
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
< <
> >
& &
" "
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.
arriba
arriba
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
Muestra la nueva pgina en una ventana nueva y sin nombre del navegador.
_self
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
Es similar al anterior pero con la particularidad de que la informacin viaja codificada
mediante tcnicas de encriptacin.
ftp
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.
arriba
arriba
mailto
Otro protocolo para la transmisin de datos, pero en este caso a travs de servidores de
correo.
news
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.
telnet
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>
arriba
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>Juan Pedro
<LI>Luisa
</UL>
se ver como
Juan Pedro
Luisa
A partir del HTML 3.2 la etiqueta <UL> admite estos parmetros:
Parmetro Significado Resultado
COMPACT
Indica al navegador que debe representar la lista de la manera
ms compacta posible.
Primer elemento
Segundo
elemento
TYPE="disc",
"circle", "square"
Indica 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
arriba
arriba

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. Primer elemento
2. Segundo elemento
El HTML 3.2 admite estos parmetros para la etiqueta <OL> :
Parmetro Significado Resultado
COMPACT
Indica al navegador que debe representar la lista de la manera ms
compacta posible.
1. Primer elemento
2. Segundo
elemento
TYPE="1", "a",
"A", "i", "I"
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. Tipo 1
b. Tipo a
C. Tipo A
iv. Tipo i
V. Tipo I
START="num"
Indica al navegador el nmero por el que se empezar a contar los
elementos de la lista.
3. Primer elemento
4. Segundo
elemento
VALUE="num"
Atributo de <LI>, acta como START pero a partir de un
elemento predeterminado.
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.
arriba
arriba
<DT>Java<DD>Es un lenguaje de programacin.
</DL>
se ver como
HTML
Es un lenguaje de definicin de pginas web.
Java
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. Si quieres saber ms sobre imgenes e internet debes dirigirte a esta
seccin dedicada al tema en la gua de diseo.
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">

arriba

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 href="tema1.htm">
<img src="/imgs/im_crear/indice2.png"
alt="Tema 1" width="45" height="30">
</a>
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
Ad by save on | Close This Ad
HTML nos permite controlar la disposicin de las imgenes en la pgina con relacin al texto, para ello
usamos el parmetro ALIGN :
ALIGN=
Significado Muestra
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 Alinea el punto ms bajo de la imagen con la base del texto.
Este es el texto
LEFT
Coloca la imagen a la izquierda del texto.
Este es el texto y
esta es otra lnea
arriba
arriba
RIGHT

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>
¿Está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.
arriba
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 Significado
SIZE Tamao en columnas de la caja de texto.
MAXLENGTH Nmero mximo de caracteres que se pueden teclear.
VALUE 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 Utilidad
ROWS Filas que ocupar la caja de texto.
COLS Columnas que ocupar la caja de texto.

Opciones
arriba
arriba
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.
VALUE Este es el valor que asignar a la variable.
CHECKED 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>

Espaol

Los parmetros que admite SELECT son las siguientes:
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:
VALUE Este es el valor que asignar a la variable.
SELECTED La opcin con esta propiedad ser la que aparezca seleccionada por defecto.
arriba
arriba

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

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">
arriba
arriba
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"
width="10" height="10">
</BUTTON>
nicio

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.
arriba
arriba
arriba
<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:
<INPUT TYPE="text" name="nombre">
<br>Edad:
<INPUT TYPE="text" name="edad">
</LABEL>
</FIELDSET>
Tus datosNombre:
Edad:

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
arriba
arriba
arriba
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):
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 URL del enlace corespondiente a esta zona.
NOHREF Zona inactiva
ALT 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

arriba
arriba
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:
arriba
arriba
<TABLE>
<TR>
<TD>1,1</TD>
<TD>1,2</TD>
<TD>1,3</TD>
</TR>
<TR>
<TD>2,1</TD>
<TD>2,2</TD>
<TD>2,3</TD>
</TR>
</TABLE>
1,1 1,2 1,3
2,1 2,2 2,3
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 Alinea la tabla a izquierda (LEFT), derecha (RIGHT) o centro (CENTER).
BORDER Especifica el grosor del borde que se dibujar alrededor de las tabla y celdas.
BORDERCOLOR Define el color de los bordes de la tabla
CELLSPACING Espacio entre celdas, en pixels.
CELLPADDING Borde interior de las celdas, en pixels.
Si ahora, por ejemplo definimos ahora la tabla anterior como <TABLE BORDER=1 WIDTH="50%"
ALIGN=CENTER> veremos lo siguiente:
1,1 1,2 1,3
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:
arriba
arriba
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>
<TD ROWSPAN=2>2,1 y 3,1</TD>
<TD>2,2</TD>
<TD>2,3</TD>
</TR>
<TR>
<TD>3,2</TD>
<TD>3,3</TD>
</TR>
</TABLE>
1,1 y 1,2 1,3
2,1 y 3,1
2,2 2,3
3,2 3,3

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:
<TABLE BORDER=1>
<CAPTION>
Nmeros</CAPTION>
...
</TABLE>
Nmeros
1,1 y 1,2 1,3
2,1 y 3,1
2,2 2,3
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
arriba
Etiqueta <FRAMESET>
Etiqueta <FRAME>
Marcos flotantes <IFRAME>
Acceso a los marcos

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

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:
arriba
arriba
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 Asigna un nombre a un marco, de esta manera luego podemos usarlo como destino de un enlace.
SRC Indica la URL del documento HTML que ocupar el marco.
NORESIZE 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.
arriba
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 Indica la URL del documento HTML que ocupar el marco.
HEIGHT Altura del marco
WIDTH Anchura del marco
FRAMEBORDER 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 principalpondremos:
<A HREF="pagina.html" TARGET="principal">
Tambin existen cuatro nombres reservados que podremos utilizar en el parmetro TARGET:
_top
Elimina todos los marcos existente y muestra la nueva pgina en la ventana original sin marcos.
_blank
arriba
arriba
Muestra la nueva pgina en una ventana nueva y sin nombre del navegador.
_self
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 sertext/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
arriba
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.
Actualmente el estandard de hojas de estilo es el CSS3 que permite un enorme control sobre el
contenido, incluyendo animaciones y efectos que pueden sustituir el algunos casos al uso de scripts.
Pues ver una introduccin bastabte detallada en nuestra introduccin al CSS3

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 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:
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
arriba
arriba
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
arriba
arriba
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 Significado Valores
margin-top, margin-
right, margin-bottom,
margin-left, margin:
top right bottom left
Mrgenes dntro del bloque.
Tanto margin comomargins() se
utilizan para cambiar todos estos atributos a la
vez.
tamao, porcentaje o auto. Por
defecto es cero.
padding-top, padding-
right, padding-
bottom, padding-
left,<br/> padding:
top right bottom left
Distancia entre el borde y el contenido del
bloque.
tamao, porcentaje o auto. Por
defecto es cero.
border-top-width,
border-right-width,
border-bottom-width,
border-left-
width,<br/> border-
width: top right
bottom left
Anchura del borde de un bloque. numrico
border-style Tipo de borde de un bloque.
none, ruged, solid, 3D,...
por defecto ninguno (none).
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.
left, right o none, por
defecto ninguna.
clear
Permiso para que otro elemento se pueda colocar
a su izquierda o derecha.
left, right, both o none,
por defecto ninguno.

Propiedades de tipo de letra
Ahora vamos a examinar las propiedades del tipo de letra que el usuario va a ver. Son las siguientes:
Propiedad Descripcin Posibles valores
font-
family
Tipo de letra (que puede ser
genrico) que vamos a usar.
lista de tipos, ya sean genricos o no, separados por comas.
font-size Tamao del tipo de letra.
xx-small, x-small, small, medium, large, x-
large, xx-large, tamao relativo o tamao absoluto. Por
defecto medium.
font-
weight
Grosor del tipo de letra
(negrita).
normal, bold, bolder, lighter o 100-900 (donde 900 es la
negrita ms gruesa). Por defectonormal.
font-
style
Estilo del tipo de letra
(cursiva).
normal, italic, italic small-
caps, oblique, oblique small-caps o small-caps. Por
arriba
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.
line-
height
Interlineado. nmero o porcentaje.
text-
decoration
Efectos variados
sobre el texto.
none, underline (subrayado), overline (como subrayado, pero por
encima), line-through (tachado) o blink (parpadeante); por defecto ninguno.
vertical-
align
Posicin vertical
del texto.
baseline (normal), sub (subndice), super (superndice), top, text-
top, middle, bottom, text-bottom o un porcentaje. Por
defecto baseline
text-
transform
Transforma el texto
a maysculas o
minsculas.
capitalize (pone la primera letra en maysculas), uppercase (convierte
todo a maysculas),lowecase (a minsculas) o none, por defecto no hace nada.
text-align
Justificacin del
texto.
left, right, center o justify
text-
indent
Tabulacin con que
aparece la primera
lnea del texto.
tamao o porcentaje, por defecto cero.

Propiedades de color y fondo
Tambin es posible cambiar el color o la imagen de fondo de cualqueir elemento.
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
arriba
arriba
arriba

display
Decide si un elemento es interior
(como <I>), un bloque (<P>) o
un elemento de una lista (<LI>).
inline, block, list y none (que 'apaga' el elemento)
list-
style
Estilo de un elemento de una lista,
pudiendo incluir un grfico al
comienzo del mismo.
disc, circle, square, decimal, lower-
roman, upper-roman, lower-alpha, upper-
alpha, none o la direccin de un grfico
white-
space
Decide como se manejan los
espacios, 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.
arriba
arriba
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">

</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:
.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:
.relativa {position: relative; left: 20px; top: 100px;}
arriba
arriba
</STYLE>
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
capa donde est metida. Hay que
tener en cuenta que el documento
completo tambin se considera
una capa.
distancia en pixels, por defecto
cero.
width y height
Determinan la anchura y altura de
la capa.
un tamao en pixels.
clip
Nos permite definir el rea que se
podr ver dentro de la capa. Por
ejemplo, clip:rect(20px
30px 40px
10px); 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.
z-index
Las capas con un mayor z-
index 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.
visibility
Especifican si la capa debe verse o
estar oculta.
visible, hidden (oculta)
o inherit(hereda la
visibilidad de la capa padre). En
aquellas capas que simplemente
estn dentro de la pgina
principal, este valor es
equivalente a visible.
background-image Grfico de fondo de la capa. una direccin.
background-color<imagenenlinea
direccion="graficos/explorer.gif"
descripcion="explorer"/> y layer-
background-color<imagenenlinea
direccion="graficos/netscape.gif"
descripcion="Netscape"/>
Color de fondo de la capa. un color.
Sonido
arriba
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 etiqueaBGSOUND:
<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 indicaLOOP="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 Utilidad
arriba
arriba
arriba
SRC Contiene el nombre de archivo de sonido a reproducir
WIDTH y HEIGHT Tamao de los controles del reproductor que aparece en la pgina.
AUTOSTART="true" Arranca automticamente la reproduccin.
LOOP="true" Reproduce ininterrumpidamente el fichero hasta que salimos de la pgina.
HIDDEN="true" 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.
Trucos HTML
Aqu pretendemos ofrecerte soluciones para problemas que suelen presentarse a la hora de crear una
pgina web. Conocer todas las etiquetas del lenguaje HTML no siempre garantiza un uso ptimo. Esta
es la razn de este apartado.

Flash al fondo de la pgina
Los objetos flash en las pginas web se empean en colocarse en primer plano con lo que ocultan
mens desplegables y otros elementos de la pgina. Para evitar esto basta con aadir al objeto flash
el argumento:
<param name="WMODE" value="TRANSPARENT">
El objeto flash no ocultar los elementos dinmicos.

Esconder tu email
Existen robots que se dedican a recorrer las pginas web extrayendo las direcciones de correo, a las
que luego inundarn con mensajes spam.
Existe un truco muy sencillo para evitar esto sin dejar de mostrar nuestra direccin en la pgina: crear
una imagen gif o jpg con nuestra direccin email. Quien desee enviarnos un email deber leer nuestra
direccin y escribirla a mano en el mensaje creado con su programa de correo.

Celda como enlace
Una celda de una tabla puede convertirse en un enlace activo de la manera ms simple, basta con un
toque de CSS y usando el atributo display. Ejemplo
<td>
<a href="sitio.htm" style="display:block">
Texto del enlace
</a>
</td>
As de fcil, ahora la celda completa es un enlace. Funciona con los navegadores IExplore (incudo
el 10), Chrome y Mozilla.

Dimensiones exactas
Para lograr que una fila o una columda tenga una altura o anchura exacta, o para separar dos
elementos una distancia fija, utiliza una imagen gif transparente de un slo pixel. Luego asignale la
anchura o altura que desees. Por ejemplo
arriba
arriba
arriba
arriba
<table><tr><td><img src="punto.gif" height="5"></td></tr>
Esa celda poseer una altura exacta de 5 pixels.

Caja de esquinas curvas
Puedes crear una caja de esquinas curvas usando el elemento fieldset de los formularios. Ejemplo
<fieldset>
contenido de la caja con esquinas curvas sin tablas!!!
</fieldset>
Y no es necesario usar tablas.

Sonido de fondo
Se puede hacer que suene una msica mientras los visitantes visitan la Web, o bien colocar una
meloda a modo de presentacin. Guarda el sonido en el directorio raz de tu servidor. el cdigo HTML
es el que sigue:
<BGSOUND SRC="sonido.mid" LOOP=none>
<WIDTH=200 HEIGHT=55 AUTOSTART="true" LOOP="false" HIDDEN="true">
Los sonidos en formato "midi" ocupan menos espacio y por tanto se cargan antes.

Archivos para DESCARGAR
Si queremos que los visitantes puedan descargar algn archivo solo debemos subir ese archivo a
nuestro servidor e insertar en nuestra Web un enlace al mismo:
<a href="archivo.exe">Descripcin del enlace </a>
Ahora cuando el visitante pulse sobre ese enlace el navegador abre el dilogo de abrir o guardar el
archivo. Lo habitual es usar arvhivos comprimidos en formato zip, de esta manera la descarga es ms
rpida y se puede bajar cualquier tipo de archivo (previamente comprimido).
Guia de estilo
El sitio web
Contenido
Navegacin
Estructura de las pginas
Accesibilidad
Diseo
Mantenimiento

arriba
arriba
arriba
arriba
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.
arriba
arriba
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
arriba
arriba
arriba
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 Creatuweb tienes una guia bastante ms completa que este
pequeo resumen.
Enlaces de inters
Ms HTML
Ms JavaScript
Ms CSS
Otras tecnologas

Ms HTML
W3C Comit que dicta las normas para un HTML estndard
Lo Sublime Otro sencillo manual sobre HTML
Metatags Un interesante artculo sobre las Metatags
arriba
arriba

Ms Javascript
JavascriptDesdeCero Un interesante manual repleto de scripts, trucos y soluciones
MundoJavascript Otro excelente lugar para obtener scripts
DynamicDrive Excelente lugar para HTML dinmico (ingls)

Ms CSS
ASP tutor: CSS Por si quieres saber ms sobre las CSS
Tejedores:CSS Ms sobre CSS esta vez en Tejedores del Web

Otras tecnologas
PHP El sitio oficial de PHP
Programacin PHP Programacin PHP en castellano

arriba
arriba
arriba

Mi Primera Página Web en HTML

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Mi Primera Página Web en HTML

Uploaded by

Copyright:

Available Formats

Mi primera pgina

You might also like