Manual HTML

¿Qué es el HTML ?
El HTML (Hyper Text Markup Language) es un sistema para estructurar documentos.

Estos documentos pueden ser mostrados por los visores de páginas Web en Internet,
como Netscape, Mosaic o Microsoft Explorer. Por el momento no existe un estándar de
HTML ya que tanto Netscape como Microsoft se empeñan en incluir directivas que sólo
funcionan con sus respectivos navegadores. De cualquier manera existen diferentes
revisiones o niveles de estandarización, el 1.0, el 2.0 y el 3.0, lo que produce que
algunos visores no "comprendan" en su totalidad el contenido de un documento. En este
manual se ha utilizado la revisión 3.0 de HTML. Esto quiere decir que algunas de las
órdenes de HTML que aquí se indican puede que no sean reconocidas por algunos
visores de páginas Web. Netscape 2.x y Microsoft Explorer 3.x reconocen
prácticamente todas las órdenes HTML vistas en este manual.
Básicamente, el HTML consta de una serie de órdenes o directivas, que indican al visor
que estemos utilizando, la forma de representar los elementos (texto, gráficos, etc...) que
contenga el documento. En este manual nos referiremos a estas órdenes con la palabra
"directiva".
Las directivas de HTML pueden ser de dos tipos, cerradas o abiertas. Las directivas
cerradas son aquellas que tienen una palabra clave que indica el principio de la directiva
y otra que indica el final. Entre la directiva inicial y la final se pueden encontrar otras
directivas. Las directivas abiertas constan de una sola palabra clave. Para diferenciar las
directivas del resto del texto del documento se encierran entre los símbolos < y >. Las
directivas cerradas incluyen el carácter / antes de la palabra clave para indicar el final de
la misma. Una directiva puede contener "parámetros". Estos parámetros se indican a
continuación de la palabra clave de la directiva.
Ejemplos :
Directiva cerrada
<CENTER> Una página ejemplo </CENTER>
Directiva abierta
<HR>
Directiva con parámetros
<BODY bgcolor="#FF00FF"> </BODY>
Los ficheros que contienen documentos HTML suelen tener la extensión .html o .htm.
En este manual se han fijado los siguientes criterios a la hora de escribir la sintaxis de
las directivas de HTML:
1º) Las directivas se indican en letra mayúscula y en negrilla.
2º) Los parámetros de las directivas se indican en letra minúscula y negrilla.
3º) El resto de elementos se indican en letra normal.
4º) Las palabras a resaltar en el texto se indican en cursiva y negrilla.
Estructura básica de un documento

HTML
Un documento escrito en HTML contendría básicamente las siguientes directivas :
<HTML> Indica el inicio del documento.
<HEAD> Inicio de la cabecera.
<TITLE> Inicio del título del documento.
</TITLE> Final del título del documento.
</HEAD> Final de la cabecera del documento.
<BODY> Inicio del cuerpo del documento.
</BODY> Final del cuerpo del documento.
</HTML> Final del documento.
El documento se hallará situado en algún ordenador al que se pueda acceder a traves de

Internet. Para indicar la situación del documento en Internet se utiliza la URL (Uniform
Resource Locator). La URL es el camino que ha de seguir nuestro visor a traves de
Internet para acceder a un determinado recurso, bien sea una página Web, un fichero, un
grupo de noticias, etc. Es decir, lo que el visor de páginas Web hace es acceder a un
fichero situado en un ordenador que está conectado a la red Internet. La estructura de
una URL para una página Web suele ser del tipo http://dominio/directorio/fichero. El
dominio indica el nombre del ordenador al que accedemos, el directorio es el nombre
del directorio de ese ordenador y fichero el nombre del fichero que contiene la página
Web escrita en HTML. Por ejemplo :
http://www.harlink.com/~robyoung/javatour.htm
Donde ....
http:// es el indicador de pagina Web
www.hardlink.com es el Dominio (nombre) del ordenador
/~robyoung/ es el Directorio dentro del ordenador
javatour.htm es el Fichero que contiene la página Web
Cabecera del documento

La directiva <HEAD></HEAD> delimita la cabecera del documento. Dentro de la
cabecera es importante definir el título de la página por medio de la directiva
<TITLE></TITLE>. Este título será el que aparezca en la barra de nuestro visor de
páginas Web.
Ejemplo :
<TITLE>Una página Web de Prueba</TITLE>
Dentro de la cabecera de nuestro documento podemos incluir otras directivas
adicionales. La directiva <META> indica al visor de Internet las palabras clave y
contenido de nuestra página Web. Muchos de los buscadores de páginas Web de
Internet (Yahoo, Sol, Ole, etc...) utilizan el contenido de esta directiva para incluir la
página en sus bases de datos. La directiva <META> lleva generalmente dos
parámetros, name y content.
Ejemplos :
<META name = "Página de Prueba"content = " Fútbol y Baloncesto">
Indica al visor el nombre de la página y sus contenidos principales.
<META name = "keywords"content = "Fútbol Baloncesto españa">

Indica al visor las palabras clave para los buscadores de Internet.
Otro uso de la directiva <META> es la de indicar documentos con "refresco
automático". Si se indica una URL se sustituirá el documento por el indicado una vez
transcurridos el número de segundos especificados. Si no se incluye ninguna URL se
volverá a cargar en el visor el documento en uso transcurridos los segundos indicados.
Esto es util para páginas que cambian de contenido con mucha frecuencia o para
redireccionar a la persona que visita nuestra pagina Web a una nueva dirección donde se
encuentra una versión actualizada de nuestra pagina Web.
Ejemplo :
<META http-equiv= "refresh"content = "15;URL=http://www.microsoft.com">
Transcurridos 15 segundos se accederá a la pagina Web de Microsoft.
La directiva <BASE> indica la localización de los ficheros, gráficos, sonidos, etc... a

los que se hace referencia en nuestra página Web. Si no se incluye esta directiva el visor
entiende que dichos elementos se encuentran en el mismo lugar donde se encuentra
nuestra página Web.
Ejemplo :
<BASE href = "http://www.purextc.com/celebrities/">
Cuerpo del documento

La directiva <BODY></BODY> indica el inicio y final de nuestra pagina Web. Será
entre el inicio y el final de esta directiva donde pongamos los contenidos de nuestra
página, textos, gráficos, enlaces, etc.... Esta directiva tiene una serie de parámetros
opcionales que nos permiten indicar la "apariencia" global del documento :
background= "nombre de fichero grafico"

Indica el nombre de un fichero gráfico que servirá como "fondo" de nuestra
página. Si la imagen no rellena todo el fondo del documento, esta sera
reproducida tantas veces como sea necesario.
bgcolor = "código de color"

Indica un color para el fondo de nuestro documento. Se ignora si se ha usado el
parámetro background.
text = "código de color"

Indica un color para el texto que incluyamos en nuestro documento. Por defecto
es negro.
link = "código de color"

Indica el color de los textos que dan acceso a un Hiperenlace. Por defecto es
azul.
vlink = "código de color"

Indica el color de los textos que dan acceso a un Hiperenlace que ya hemos
visitado con nuestro visor. Por defecto es purpura.
El código de color es un número compuesto por tres pares de cifras hexadecimales que
indican la proporción de los colores "primarios", rojo, verde y azul. El código de color
se antecede del símbolo #.
Ejemplos :
#000000 Color Negro
#FF0000 Color Rojo
#00FF00 Color Verde
#0000FF Color Azul
#FFFFFF Color Blanco
El primer par de cifras indican la proporción de color Rojo, el segundo par de cifras la
proporci&n de color Verde y las dos ultimas la proporción de color Azul. Cada par de
cifras hexadecimales nos permiten un rango de 0 a 255. Combinando las proporciones
de cada color primario obtendremos diferentes colores.
De cualquier forma la mayoría de los editores de HTML nos permiten obtener el
código de color correspondiente escogiendo directamente el color de una paleta.
Juego de caracteres del Documento

Todos los visores de páginas Web actuales soportan todos los caracteres gráficos del la
especificación ISO 8859-1, que permiten escribir textos en la mayoría de los paises
occidentales.
De cualquier forma y como muchos sistemas tienen distintos juegos de caracteres
ASCII, se han definido dos formas de representar caracteres especiales usando
solamente el código ASCII de 7 bits. Para hacer referencia a estos caracteres se les
asigna un código numérico o un nombre de "entidad". Asimismo hay caracteres que se
utilizan para las directivas de HTML, por ejemplo < y >. Estos caracteres pueden ser
representados por un código numérico o una entidad cuando deseemos que aparezcan en
el documento "tal cual". Las entidades comienzan por el símbolo & (ampersand) y
terminan con el símbolo ; (punto y coma).
A continuacion veamos una tabla con las principales entidades :
Caracter Código Entidad Caracter Código Entidad
! ! -- " " --
# # -- $ $ --
% % -- & & --
' ' -- ( ( --
) ) -- * * --
+ + -- , , --
- - -- . . --
/ / -- : : --
; ; -- < < --
= = -- > > --
? ? -- @ @ --
[ [ -- \ \ --
] ] -- ^ ^ --
_ _ -- ` ` --
{ { -- | | --
} } -- ~ ~ --
nbsp ¡ ¡ iexcl
¢ ¢ cent £ £ pound
¤ ¤ curren ¥ ¥ yen
¦ ¦ brvbar § § sect
¨ ¨ uml © © copy
ª ª ordf « « laquo
¬ ¬ not shy
® ® reg ¯ ¯ macr
° ° deg ± ± plusmn
² ² sup2 ³ ³ sup3
´ ´ acute µ µ micro
¶ ¶ para · · middot
¸ ¸ cedil ¹ ¹ sup1
º º ordm » » raquo
¼ ¼ frac14 ½ ½ frac12
¾ ¾ frac34 ¿ ¿ iquest
À À Agrave Á Á Aacute
Â Â Acirc Ã Ã Atilde
Ä Ä Auml Å Å Aring
Æ Æ AElig Ç Ç Ccedil
È È Egrave É É Eacute
Ê Ê Ecirc Ë Ë Euml
Ì Ì Igrave Í Í Iacute
Î Î Icirc Ï Ï Iuml
Ð Ð ETH Ñ Ñ Ntilde
Ò Ò Ograve Ó Ó Oacute
Ô Ô Ocirc Õ Õ Otilde
Ö Ö Ouml × × times
Ø Ø Oslash Ù Ù Ugrave
Ú Ú Uacute Û Û Ucirc
Ü Ü Uuml Ý Ý Yacute
Þ Þ THORN ß ß szlig
à à agrave á á aacute
â â acirc ã ã atilde
ä ä auml å å aring
æ æ aelig ç ç ccedil
è è egrave é é eacute
ê ê ecirc ë ë euml
ì ì igrave í í iacute
î î icirc ï ï iuml
ð ð eth ñ ñ ntilde
ò ò ograve ó ó oacute
ô ô ocirc õ õ otilde
ö ö ouml ÷ ÷ divide
ø ø oslash ù ù ugrave
ú ú uacute û û ucirc
ü ü uuml ý ý yacute
þ þ thorn ÿ ÿ yuml
Por lo tanto la palabra Informática la podríamos escribir como :

Informática
Informática
Informática
Es por ello que si deseamos que cualquier visor de páginas Web pueda visualizar las
letras acentuadas de nuestro documento debemos utilizar sus correspondientes entidades
o códigos para representarlas.
Espaciados y saltos de línea

En HTML solo se reconoce un espacio entre palabra y palabra, el resto de los espacios
seran ignorados por el visor.
Ejemplo Se vera como
Esto es una frase Esto es una frase
Asimismo tampoco se respetan las tabulaciones, retornos de carro etc... Para ello existen
una serie de directivas que indican estos codigos. La directiva <PRE></PRE> obliga al
visor a visualizar el texto tal y como ha sido escrito, respetando tabulaciones, espacios,
retornos de carro, etc..
<PRE>
Este texto ha sido Este texto ha sido
preformateado . preformateado .
</PRE>
Para indicar un salto de linea se utiliza la directiva <BR> y para un cambio de parrafo
(deja una linea en blanco en medio) se utiliza la directiva <P>.
Este texto tiene
Este texto tiene<BR>saltos de linea y <P> de párrafo. saltos de linea y
de párrafo.
La directiva <P> puede usarse tambien como directiva "cerrada" <P></P> indicando de
esta manera los atributos de un parrafo en concreto. Cuando se usa de esta manera tiene
el parametro align que indica al visor la forma de "justificar" el parrafo. Los valores
posibles de este parametro son LEFT, RIGHT y CENTER, estando aun en estudio el
valor JUSTIFY.
<P Align=right>Este es un ejemplo de un parrafo Este es un ejemplo de parrafo de

de texto justificado a la derecha.</P> texto justificado a la derecha
<P Align=center>Este es un ejemplo de parrafo de Este es un ejemplo de parrafo de

texto centrado.</P> texto centrado
La directiva <HR> muestra una linea horizontal de tamaño determinable. Tiene los
siguientes parámetros opcionales :
align = posicion
Alinea la línea a la izquierda (left), a la derecha (right) o la centra (center).
noshade
No muestra sombra, evitando el efecto en tres dimensiones.
size = número
Indica el grosor de la línea en pixels.
width = num / %
Indica el ancho de la línea en tanto por ciento en función del ancho de la ventana
del visor. Tambien se puede especificar un número que indicaría el ancho de la
línea en pixels.
Ejemplo :
<HR align= center size= 20 width= 50%>
La directiva <HR> sin ningún parámetro mostraría una linea horizontal que ocuparia
todo el ancho de la página. Estas líneas sencillas son las que ves en este manual para
separar las diferentes secciones
Cabeceras
En un documento de HTML se pueden indicar seis tipos de cabeceras (tamaños de letra)
por medio de las directivas <H1><H2><H3><H4><H5> y <H6>. El texto que
escribamos entre el inicio y el fin de la directiva será el afectado por las cabeceras. La
cabecera <H1> será la que muestre el texto en mayor tamaño.
Ejemplo Se veria como
<H1>Texto de Prueba</H1> Texto de prueba

<H2>Texto de Prueba</H2> Texto de Prueba
Los textos marcados como "cabeceras" provocan automáticamente un retorno de carro

sin necesidad de incluir la directiva <BR>. Por ejemplo
<H3>Página Web</H3>Esta es una página de prueba.

Página Web
Esta es una página de prueba
Atributos del Texto

Para indicar atributos del texto (negrilla, subrayado, etc...) tenemos varias directivas.
Algunas de ellas no son reconocidas por determinados visores de Internet, es por ello
que según el visor que este vd. utilizando, verá el resultado correctamente o no.
Atributo Directiva Ejemplo Resultado
Texto de
Negrita <B></B> <B>Texto de prueba</B>
prueba
Texto de
Cursiva <I></I> <I>Texto de prueba</I>
prueba
Texto de
Teletype <TT></TT> <TT>Texto de prueba</TT> prueba
Texto de
Subrayado <U></U> <U>Texto de prueba</U>
prueba
Texto de
Tachado <S></S> <S>Texto de prueba</S>
prueba
<BLINK>Texto de Texto de
Parpadeo <BLINK></BLINK>
prueba</BLINK> prueba
<SUP>Texto de Texto de prueba
Superindice <SUP></SUP>
prueba</SUP>
<SUB>Texto de
Subindice <SUB></SUB> Texto de prueba
prueba</SUB>
<CENTER>Texto de Texto de
Centrado <CENTER></CENTER>
prueba</CENTER> prueba
Por otro lado la directiva <FONT></FONT> nos permite variar el tamaño, el color, y
el tipo de letra de un texto determinado. Utiliza para ello los parámetros size, bgcolor y
face.
size = valor
Da al texto un tamaño en puntos determinado.
size = +/- valor
Da al texto un tamaño tantas veces superior (+) o inferior (-) como indique el
valor.
color = "código de color"
Escribe el texto en el color cuyo código se especifica.
face = "nombre de font"
Escribe el texto en el tipo de letra especificado. Si este tipo de letra no existe en
el ordenador que "lee" la página se usara el font predeterminado del navegador.
Ejemplo Se vería como
<FONT size = +2 color = "#FF0000 face = "Arial"> Texto de Texto de

prueba </FONT> prueba
Existen otras directivas que realizan las mismas operaciones que las antes vistas en los
atributos del texto.
Directiva Hace lo mismo que
<STRONG></STRONG> <B></B>
<CITE></CITE> <I></I>
<STRIKE></STRIKE> <S></S>
Para incluir comentarios en la página Web se utiliza la directiva .

Ejemplo :

Los comentarios no seran mostrados por el visor y son útiles para realizar anotaciones
en el documento HTML que nos indiquen lo que estamos haciendo en una determinada
parte del documento. Asimismo veremos más adelante que la directiva de comentario
nos será de utilidad para incluir código JavaScript en nuestra página Web.
Listas
Existen tres tipos de listas, numeradas, sin numerar y de definición. Las listas
numeradas representarán los elementos de la lista numerando cada uno de ellos segun el
lugar que ocupan en la lista. Para este tipo de lista se utiliza la directiva <OL></OL>.
Cada uno de los elementos de la lista irá precedido de la directiva <LI>. La directiva
<OL> puede llevar los siguientes parámetros :
start = num
Indica que número será el primero de la lista. Si no se indica se entiende que
empezará por el número 1.
type = tipo
Indica el tipo de numeración utilizada. Si no se indica se entiende que será una
lista ordenada numéricamente.
Los tipos posibles son :
1 = Numéricamente. (1,2,3,4,... etc.)
a = Letras minúsculas. (a,b,c,d,... etc.)
A = Letras mayúsculas. (A,B,C,D,... etc.)
i = Numeros romanos en minúsculas. (i.ii,iii,iv,v,... etc.)
I = Números romanos en mayúsculas. (I,II,III,IV,V,... etc.)
Ejemplo Resultado
<OL> 1. España
<LI>España
<LI>Francia 2. Francia
<LI>Italia 3. Italia
<LI>Portugal
</OL> 4. Portugal
<OL type = A > A. España
<LI>España
<LI>Francia B. Francia
<LI>Italia C. Italia
<LI>Portugal
</OL> D. Portugal
Las listas sin numerar representan los elementos de la lista con un "topo" o marca que
antecede a cada uno de ellos. Se utiliza la directiva <UL></UL> para delimitar la lista,
y <LI> para indicar cada uno de los elementos. La directiva <UL> puede contener el
parámetro type que indica la forma del "topo" o marca que antecede a cada elemento de
la lista. Los valores de type pueden ser disk, circle o square, con lo que el topo o
marca puede ser un disco, un circulo o un cuadrado.
Ejemplo Resultado
<UL type = disk > • España
<LI>España
<LI>Francia • Francia
<LI>Italia • Italia
<LI>Portugal
</UL> • Portugal
<UL type = square>  España
<LI>España
<LI>Francia  Francia
<LI>Italia  Italia
<LI>Portugal
</UL>  Portugal
Las listas de definición muestran los elementos tipo Diccionario, o sea, término y
definición. Se utiliza para ellas la directiva <DL></DL>. El elemento marcado como
término se antecede de la directiva <DT>, el marcado como definición se antecede de la
directiva <DD>.
Ejemplo Resultado
<DL>
<DT>WWW WWW
<DD>Abreviatura de World Wide Web Abreviatura de World Wide Web
<DT>FTP FTP
<DD>Abreviatura de File Transfer Abreviatura de File Transfer
Protocol Protocol
<DT>IRC IRC
<DD>Abreviatura de Internet Relay Chat Abreviatura de Internet Relay Chat
</DL>
Existen otros dos tipos de listas menos comunes. Las listas de Menú o Directorio se
comportan igual que las listas sin numerar. La lista de Menú utiliza la directiva
<MENU></MENU> y los elementos se anteceden de <LI> El resultado es una lista sin
numerar mas "compacta" es decir, con menos espacio interlineal entre los elementos. La
lista de Directorio utiliza la directiva <DIR></DIR> y los elementos se anteceden de
<LI>. Los elementos tienen un limite de 20 caracteres.
Todas las listas se pueden "anidar", es decir incluir una lista dentro de otra, con lo que
se consigue una estructura tipo "indice de materias".
Ejemplo Resultado
<UL type= disk>
<LI>Buscadores
<UL> • Buscadores
<LI>Yahoo ○ Yahoo
<LI>Ole
○ Ole
<LI>Lycos
</UL> ○ Lycos
<LI>Links • Links
<UL>
<LI>Microsoft ○ Microsoft
<LI>IBM ○ IBM
</UL>
</UL>
Imágenes
Hasta el momento hemos visto como se puede escribir texto en una página Web, asi
como sus posibles formatos. Para incluir una imagen en nuestra página Web
utilizaremos la directiva <IMG>. Hay dos formatos de imágenes que todos los
navegadores modernos reconocen. Son las imágenes GIF y JPG. Cualquier otro tipo de
fichero gráfico o de imagen (BMP, PCX, CDR, etc...) no será mostrado por el visor, a
no ser que disponga de un programa externo que permita su visualización.
La directiva <IMG> tiene varios parámetros :
src = "imagen"
Indica el nombre del fichero gráfico a mostrar.
alt = "Texto"
Mostrará el texto indicado en el caso de que el navegador utilizado para ver la
página no sea capaz de visualizar la imagen.
lowsrc ="imagen"
Muestra una segunda imagen "superpuesta" sobre la primera una vez se carga la
página. Este parámetro no es reconocido por la totalidad de los navegadores ya
que esta en estudio su aplicación, asi que en la mayoria de los casos sera
ignorado mostrándose solo la primera imagen (src). En Netscape muestra la
imagen indicada por lowsrc en primer lugar, y posteriormente muestra la imagen
indicada por src. Si las imágenes son iguales pero tienen distinta "resolución" se
conseguirá un efecto tipo "Fade". Si las imágenes son de distinto tamaño la
imagen indicada en src se redimensionara al tamaño indicado por la imagen
indicada en lowsrc
align = TOP / MIDDLE / BOTTOM
Indica como se alineará el texto que siga a la imagen. TOP alinea el texto con la
parte superior de la imagen, MIDDLE con la parte central, y BOTTOM con la
parte inferior.
border = tamaño
Indica el tamaño del "borde" de la imagen. A toda imagen se le asigna un borde
que será visible cuando la imagen forme parte de un Hiperenlace.
height = tamaño
Indica el alto de la imagen en puntos o en porcentaje. Se usa para variar el
tamaño de la imagen original.
width = tamaño
Indica el ancho de la imagen en puntos o en porcentaje. Se usa para variar el
tamaño de la imagen original.
hspace = margen
Indica el numero de espacios horizontales, en puntos, que separarán la imagen
del texto que la siga y la anteceda.
vspace = margen
Indica el número de puntos verticales que separaran la imagen del texto que le
siga y la anteceda.
ismap / usemap
Indica que la imagen es un MAPA. Veremos estos parámetros mas adelante en
este manual.
<IMG src="caution.gif" alt= "Cuidado !!" >
Si el visor no pudiese visualizar el gráfico.....
La imagen a mostrar puede encontrase en el mismo lugar (URL) que la pagina Web. Si
este no fuera el caso, el nombre de la imagen ha de contener la URL donde se encuentre
la imagen.
Ejemplo
<IMG src= "http://www.microsoft.com/iexplorer.gif">
Veamos varios ejemplos "jugando" con los tamaños de la imagen, así como
comprobando la alineación de los textos. (Recuerde que en función del visor que vd.
utilize pueden verse o no los efectos de cada parámetro).
<IMG src="caution.gif"
width=100 >
height=20 >
align=TOP>Atencion !!!
Atencion !!!
align=MIDDLE>Atencion !!!
Atencion !!!
align=BOTTOM>Atencion !!!
Atencion !!!
Tenga en cuenta<IMG src="caution.gif"

hspace=20>esta indicacion.
Tenga en cuenta esta indicacion
Tenga en cuenta<IMG src="caution.gif"

vspace=40>esta indicacion.
Tenga en cuenta esta indicacion.
Hiperenlaces
La característica principal de una página Web es que podemos incluir Hiperenlaces. Un
Hiperenlace es un elemento de la página que hace que el navegador acceda a otro
recurso, otra página Web, un archivo, etc...
Para incluir un Hiperenlace se utiliza la directiva <A></A>. El texto o imagen que se
encuentre dentro de los límites de esta directiva será sensible, esto quiere decir que si
pulsamos con el raton sobre el, se realzará la función de hiperenlace indicada por la
directiva <A></A>. Si el Hiperenlace esta indicado por un texto, este aparecerá
subrayado y en distinto color, si se trata de una imagen, esta aparecerá con un borde
rodeándola. Esta directiva tiene el parámetro href que indica el lugar a donde nos
llevará el Hiperenlace si lo pulsamos.
<A href = "http://www.microsoft.com/"> Pulse para ir a la Pulse para ir a la página
página de Microsoft</A> de Microsoft
Si situamos el ratón encima de la frase y pulsamos, el navegador accederá a la página

Web indicada por el parámetro href, es decir, accederá a la página situada en
http://www.microsoft.com/
Lo mismo podríamos hacer con un gráfico.
Para buscar en Internet :
<A href = "http://www.yahoo.com/" >
Para buscar en Internet :
<IMG src = "yahoo.gif"></A>
Pulsando sobre la imagen se accedería a la pagina situada en http://www.yahoo.com/.

Un Hiperenlace tambien puede llevarnos a una zona de nuestra página. Para ello
debemos marcar en nuestra pagina las diferentes secciones en las que se divide. Lo
haremos con el parametro name.
Ejemplo:
<A name = "seccion1"></A>
Esta instrucción marca el inicio de una sección dentro de nuestra página. La seccion se
llamará seccion1. Para hacer un enlace a esta sección dentro de nuestra página lo
haríamos de la siguiente forma :
<A href = "#seccion1">Primera Parte</A>
O tambien :
<A href = "http://www.hardlink.com/página.htm#seccion1">Primera Parte</A>
Un Hiperenlace puede hacerse a cualquier tipo de fichero. Con las directivas anteriores
hemos visto como hacer enlaces a páginas Web o secciones dentro de una página web,
pero podríamos hacer un Hiperenlace a un grupo de noticias, o a otro servicio de
Internet.
Ejemplo:
<A href = "news://news.actualidad.es/">Noticias de actualidad</A>
Asimismo podemos hacer que el Hiperenlace de como resultado el envío de un correo
electrónico a una dirección de correo determinada.
Ejemplo:
<A href = "mailto: nombre@ext.es">Envíame tus sugerencias</A>
También podemos realizar un Hiperenlace a un fichero cualquiera. En este caso el
navegador intentará "ejecutar" el fichero, y si no puede hacerlo nos preguntará si
deseamos grabarlo en nuestro ordenador. Esta es una forma sencilla de permitir a los
visitantes de nuestra página copiar ficheros a su ordenador.
Ejemplo:
<A href = "manual.zip">Pulsa aqui para llevarte una copia del manual.</A>
Pulsa aqui para llevarte una copia del manual.
<A href = "manualpapel.zip">Pulsa aqui para llevarte una copia impresa del
manual.</A>
Pulsa aqui para llevarte una copia impresa del manual.
El parámetro onMouseOver permite que se muestre en la barra inferior del navegador
un texto explicativo sobre el Hiperenlace, en vez de mostrar su direccion. Este
parámetro no funciona en todos los navegadores.
Ejemplo:
<A href = "manual.zip" onMouseOver="window.status='Este link copia el manual a tu
disco duro' ; return true;">Pulsa aqui para llevarte una copia del manual.</A>
Tablas
Las tablas nos permiten representar cualquier elemento de nuestra página (texto, listas,
imágenes, etc...) en diferentes filas y columnas separadas entre si. Es una herramienta
muy útil para "ordenar" contenidos de distintas partes de nuestra página. La tabla se
define mediante la directiva <TABLE></TABLE>. Los parámetros opcionales de esta
directiva son :
border = num.
Indica el ancho del borde de la tabla en puntos.
cellspacing = num
Indica el espacio en puntos que separa las celdas que estan dentro de la tabla.
cellpadding = num
Indica el espacio en puntos que separa el borde de cada celda y el contenido de
esta.
width = num ó %
Indica la anchura de la tabla en puntos o en porcentaje en función del ancho de
la ventana del visor. Si no se indica este parámetro, el ancho se adecuará al
tamaño de los contenidos de las celdas.
height = num ó %
Indica la altura de la tabla en puntos o en porcentaje en función del alto de la
ventana del visor. Si no se indica este parámetro, la altura se adecuará a la altura
de los contenidos de las celdas.
bgcolor = codigo de color
Especifica el color de fondo de toda la Tabla.
Para definir las celdas que componen la tabla se utilizan las directivas <TD> y <TH>.
<TD> indica una celda normal, y <TH> indica una celda de "cabecera", es decir, el
contenido será resaltado en negrita y en un tamaño ligeramente superior al normal. Los
parámetros opcionales de ambas directivas son :
align = LEFT / CENTER / RIGHT / JUSTIFY
Indica como se debe alinear el contenido de la celda, a la izquierda (LEFT), a la
derecha (RIGHT), centrado (CENTER) o justificado (JUSTIFY).
valign = TOP / MIDDLE / BOTTOM
Indica la alineación vertical del contenido de la celda, en la parte superior
(TOP), en la inferior (BOTTOM), o en el centro (MIDDLE).
rowspan = num
Indica el número de filas que ocupará la celda. Por defecto ocupa una sola fila.
colspan = num
Indica el número de columnas que ocupará la celda. Por defecto ocupa una sola
columna.
width = num ó %
Indica la anchura de la columna en puntos o en porcentaje en función del ancho
de la ventana del visor. Si no se indica este parámetro, el ancho se adecuará al
tamaño de los contenidos. Este parámetro sólo funciona en los navegadores
modernos.
bgcolor = codigo de color
Especifica el color de fondo del elemento de la Tabla.
Para indicar que acaba una fila de celdas se utiliza la directiva <TR>. A continuación
mostraremos un ejemplo de una tabla que contiene solo texto. Como se indicó
anteriormente el contenido de las celdas puede ser cualquier elemento de HTML, un
texto, una imagen, un Hiperenlace, una Lista, etc...
Ejemplo
<TABLE border = 4 cellspacing = 4 cellpadding = 4 width =80%>
<TH align = center>Buscadores
<TH align = center colspan = 2>Otros Links
<TR>
<TD align = LEFT>Yahoo
<TD align = LEFT>Microsoft
<TD align = LEFT>IBM
<TR>
<TD align = LEFT>Altavista
<TD align = LEFT>Sun
<TD align = LEFT>Digital
</TABLE>
Se veria como
Buscadores Otros Links

Yahoo Microsoft IBM
Altavista Sun Digital
Las directivas <TD> y <TH> son cerradas según el estándar de HTML, es decir que un
elemento de tabla <TD> debería cerrarse con un </TD> , sin embargo los visores
asumen que un elemento de la tabla, queda automáticamente "cerrado" cuando se "abre"
el siguiente.
Mapas
Un Mapa es una imagen que permite realizar diferentes Hiperenlaces en función de la
"zona" de la imagen que se pulse. Las directivas para crear mapas son <MAP></MAP>
y <AREA>.
La directiva <MAP> identifica al mapa y tiene el parámetro name para indicar el
nombre del mapa.
La directiva <AREA> define las áreas sensibles de la imagen. Tiene los siguientes
parámetros obligatorios :
shape = "tipo"
Indica el tipo de área a definir.
coords = "coordenadas"
Indica las coordenadas de la figura indicada con shape.
href = "URL"
Indica la dirección a la que se accede si se pulsa en la zona delimitada por el
área indicada.
Los tipos de área pueden ser los siguientes :
rect
Área rectangular. Se deben especificar las coordenadas de la esquina superior
izquierda y las de la esquina inferior derecha.
poly
Polígono. Se deben especificar las coordenadas de todos los vértices del
polígono. El visor se encarga de "cerrar" la figura.
circle
Circulo. Se debe especificar en primer lugar las coordenadas del centro del
círculo y a continuación el valor del radio (en puntos).
Si dos áreas se superponen, se ejecutará la que se encuentre en primer lugar en la
definición del mapa. Es importante definir una última área que abarque la totalidad del
gráfico para direccionar a una URL "por defecto", con el objeto de contemplar el caso
de que no se pulse sobre un área definida.
Veamos un ejemplo completo.
<MAP name = "casa">
<AREA shape = "poly" coords = "2,62,57,62,28,1" href= "tejado.htm">
<AREA shape = "rect" coords = "21,101,35,138" href= "puerta.htm">
<AREA shape = "rect" coords = "2,64,57,138" href= "casa.htm">
<AREA shape = "circle" coords = "80,76,21" href= "arbol.htm">
<AREA shape = "rect" coords = "78,98,85,138" href= "tronco.htm">
<AREA shape = "rect" coords = "0,0,96,138" href= "dibujo.htm">
</MAP>
Para activar el mapa debemos indicar la imagen a mostrar, indicando que dicha imagen
es tratada por un mapa. Para ello escribiríamos la siguiente directiva :
<IMG src = "grafico.gif" usemap = "#casa">
Si tu visor tiene la capacidad de gestionar mapas (Netscape 2.x o Ms-Explorer 2.x o

superiores), prueba a pulsar sobre alguna parte del mapa que hemos definido y que te
aparecerá a continuación:
Como podemos observar, el proceso mas laborioso es el de determinar las coordenadas.
Existen programas como MAPTHIS que permiten realizar este proceso de una manera
sencilla, simplemente definiendo las zonas con el raton. El programa MAPTHIS
permite abrir una imagen tipo .GIF y marcar las zonas sensibles. Este programa creara
un fichero con extension .map que contendra en su interior las coordenadas de cada
área. Con esta información nos será mucho más fácil escribir nuestro mapa. Puedes
buscar este programa en Shareware.com buscando por mpths.
Formularios
Los formularios nos permiten dentro de una página Web solicitar información al
visitante y procesarla. En un formulario podremos solicitar diferentes datos (campos)
cada uno de los cuales quedará asociado a una variable. Una vez se hayan introducido
los valores en los campos, el contenido de estos será enviado a la dirección (URL)
donde tengamos el programa que pueda procesar las variables. Para poder realizar este
último paso de procesar las variables necesitaremos realizar un programa externo en
algun lenguaje de programación como PERL, C++ o Visual Basic. A este programa
externo se le suele llamar CGI (Common Gateway Interface). La creación de este tipo
de programas sería tema de otro manual diferente, por lo que aquí veremos como se
pueden enviar las variables a nuestra dirección de correo electrónico.
La declaración del formulario se pone entre las directivas <FORM></FORM>. En el
interior de la declaración se indican los elementos (variables) de entrada. La directiva
<FORM> tiene los parámetros action y method.
action = "programa"
Indica el programa que va a "tratar" a las variables que se envien con el
formulario. En nuestro caso enviaremos las variables por correo electrónico, con
lo que el "programa" será "mailto: direccion_de_correo".
method = POST / GET
Indica el método según el que se transferiran las variables. POST produce la
modificación del documento de destino (como en el caso de enviar por correo
las variables). GET no produce cambios en el documento destino (como en el
caso de una consulta a una base de datos, p.ej. una página de búsqueda en
Internet).
Campos de Entrada
Para la introducción de las variables se utiliza la directiva <INPUT>. Esta directiva
tiene el parámetro type que indica el tipo de variable a introducir y name que indica el
nombre que se le dará al campo. Cada tipo de variable tiene sus propios parámetros.
type= text name = campo
Indica que el campo a introducir será un texto. Sus parámetros son :
maxlenght = numero
Número máximo de caracteres a introducir en el campo.
size = numero
Tamaño en caracteres que se mostrará en pantalla.
value = "texto"
Valor inicial del campo. Normalmente sera " ", o sea, vacio.
type = password name = campo
Indica que el campo será una palabra de paso. Mostrará asteriscos (*) en lugar
de las letras escritas. Sus parámetros opcionales son los mismos que para text.
type = checkbox name = campo
El campo se elegirá marcando una casilla. Se permite marcar varias casillas. Los
valores de las casillas serán indicados por :
value = "valor"
checked
La casilla aparecerá marcada por defecto.
type = radio name = campo
El campo se elegirá marcando una casilla. Solo permite marcar una sola de las
casillas. Los valores de las casillas seran indicados por :
value = "valor"
type = image name = campo
El campo contendrá el valor de las coordenadas del punto de la imagen
pinchado. Debe indicarse la imagen con el parámetro :
src = "fichero de imagen".
type = hidden name = campo
El usuario no puede modificar su valor, ya que el campo no es visible se manda
siempre con el valor indicado por el parámetro :
value = "valor"
type = submit
Representa un botón. Al pulsar este botón la información de todos los campos se
envía al programa indicado en <FORM>. Tiene el parámetro value = "texto"
que indica el texto que aparecerá en el boton.
type = reset
Representa un botón. Al pulsar este botón se borra el contenido de todos los
campos. El parámetro value = "texto" indica el texto que aparecerá en el botón.
Campos de Seleccion
Este tipo de campos despliegan una lista de opciones, entre las que debemos escoger
una o varias. Se utiliza para ellos la directiva <SELECT> </SELECT> . Sus
parámetros son :
name = campo
Nombre del campo
size = num
Número de opciones visibles. Si se indica 1 se presenta como un menú
desplegable, se se indica mas de uno se presenta como una lista con barra de
desplazamiento.
multiple
Permite selecionar más de un valor para el campo.
Las diferentes opciones de la lista se indican con la directiva <OPTION>. Esta
directiva puede incluir el parámetro selected para indicar cual es la opción por defecto.
En caso de que no se especifique, se tomará por defecto la primera opción de la lista.
Áreas de texto.
Representa un campo de texto de múltiples lineas. Normalmente se utiliza para que se
incluyan en el comentarios. La directiva usada es <TEXTAREA> </TEXTAREA>, y
sus parámetros :
name = campo
Nombre del campo.
cols = num.
Número de columnas de texto visibles.
rows = num.
Número de filas de texto visibles.
wrap = VIRTUAL / PHYSICAL
Justifica el texto automáticamente en el interior de la caja. La opción
PHYSICAL envia las lineas de texto separadas en líneas físicas. La opción
VIRTUAL envía todo el texto seguido.
Veamos a continuación un ejemplo de formulario utilizando todas las formas de
introduccion de datos.
<FORM action = "mailto: nombre@ext.es" method = post >
Tu Nombre:<INPUT type = text name = nombre size = 30 >
Tu Clave: <INPUT type = password name = clave size = 8 >
<P>
Archivos a Enviar:
<INPUT type = checkbox name = archivo value = "Manual" > Manual de Html
<INPUT type = checkbox name = archivo value ="Mapthis" > Programa Mapthis
<INPUT type = checkbox name = archivo value ="Help" > Archivo de Ayuda
<P>
Tu Edad :
<INPUT type = radio name = edad value = "-20" > Menos de 20 años
<INPUT type = radio name = edad value = "20-40" > Entre 20 y 40 años
<INPUT type = radio name = edad value = "+40" > Mas de 40 años
<P>
<INPUT type = hidden name = lugar value = "pagina personal" >
Como encontraste mi página :
<SELECT name = donde >
<OPTION>De casualidad
<OPTION>Por el buscador Ole
<OPTION>Por el buscador Yahoo
<OPTION>Me la comentaron
</SELECT>
<P>
Tus Comentarios:
<BR>
<TEXTAREA name = comentario rows = 5 cols = 40 wrap = virtual
></TEXTAREA>
<P>
<INPUT type = submit value = "Enviar" >
<INPUT type = reset value = "Borrar" >
</FORM>
Ahora veamos el efecto producido en la página Web :

Principio del formulario
Tu Nombre: Tu Clave:
Archivos a Enviar:
Manual de Html Programa Mapthis Archivo de Ayuda

Tu Edad :
Menos de 20 años
Entre 20 y 40 años
Mas de 40 años
página personal
Como encontraste mi página :

De casualidad
Tus Comentarios:
Enviar Borrar
Final del formulario
Si rellenas este FORM y pulsas sobre el botón Enviar, (estando conectado a Internet),
se generará un mensaje de correo a la dirección de correo nombre@ext.es. Si pulsas el
boton Borrar se borraran los datos que hayas introducido en el Formulario.
El texto que se recibiría por correo electrónico sería parecido a este :
nombre=Pedro+Perez &clave=12345678 &archivo=Manual &archivo=Mapthis
&edad=20-40 &lugar=pagina+personal &donde=Por+el+buscador+Ole &comentario
%94= Espero+que+me+mandes+los%0D%0Aficheros+antes+del+martes%0D%0A%0D
%0AS aludos.%0D%0A
Podemos observar que en el correo se separan las variables con el símbolo &, los
espacios se sustituyen por el signo + y se representan los códigos de retorno de carro y
avance de línea del campo de texto con los caracteres %0D y %0A respectivamente.
Si en vez de enviar estas variables por correo electrónico, fuesen enviadas a un
programa (CGI), este programa podría tratarlas y dar como respuesta una nueva página
Web.
IMPORTANTE : La opción mailto: en el parámetro action de la directiva FORM
solo funciona correctamente con Netscape. En Microsoft Explorer esta opción dá como
resultado un correo en blanco. Para enviar un formulario por e-mail sin importar el visor
utilizado se ha de utilizar un programa externo que realice este proceso. En la página
MAILFORM encontrarás informacion de como implementar un programa externo para
el envio de formularios via e-mail en tu página Web.
Extensiones del HTML

Netscape y Microsoft han añadido al estándar de HTML diversas directivas para hacer
más atractiva la visualización de las páginas Web. Veremos aquí las más interesantes y
la forma de usarlas.
Estas directivas pueden no funcionar en algún visor de HTML, pero el uso de ellas por
parte de los dos "grandes" del software para Internet hace preveer que serán
inmediatamente incluidas en las nuevas versiones de el resto de los visores.
Applet
La directiva <APPLET></APPLET> indica la ejecución de un programa (applet)
externo escrito en lenguaje JAVA. Java es un lenguaje creado por Sun Microsystems
que permite realizar operaciones multimedia sin incorporar nuevas directivas HTML.
Los applets son muy variados, y cada uno de ellos realiza una tarea distinta. Hay applets
para hacer que el texto se mueva dentro de la hoja, se contraiga y expanda, etc.... Esta
directiva tiene los siguientes parámetros :
codebase = URL
Dirección donde se encuentra el applet Java ( Por ejemplo
http://www.ucm.es/java). Si el Applet se encuentra en el mismo lugar que la
página Web este parámetro no es necesario.
code = programa
Indica el nombre del programa (applet) Java a ejecutar.
width = núm.
height = núm.
Indican el espacio (ancho y alto) en puntos en el que el programa realizará su
función.
Dentro de la directiva <APPLET> se incluye la directiva <PARAM> que envía al
programa Java los parámetros necesarios para su funcionamiento. Esta directiva suele
tener como mínimo los parámetros :
name = campo
Nombre de la variable a enviar.
value = valor
Valor de la variable a enviar.
Veamos un ejemplo en el que se ejecuta un programa Java que permite que un texto se
mueva de un lado a otro de una zona de la pantalla:
<APPLET codebase="http://www.ucm.es/java" code="Laufschrift.class" width = 350
height = 25 >
<PARAM name = bg.color value = "0,255,0">
<PARAM name = message value = "**Bienvenido a mi página WEB - Manual de
HTML**">
</APPLET>
Marquee
La directiva <MARQUEE></MARQUEE> crea una marquesina con un texto en su
interior que se desplaza. Funciona únicamente con Internet Explorer. Sus parámetros
son los siguientes :
align = top / middle / bottom
Indica si el texto del interior de la marquesina se alinea en la zona alta (top), en
la baja (bottom) o en el centro (middle) de la misma.
bgcolor = "código de color"
Indica el color del fondo de la marquesina.
direction = left / right
Indica hacia que lugar se desplaza el texto, hacia la izquierda (left) o hacia la
derecha (right)
height = núm o %
Indica la altura de la marquesina en puntos o porcentaje en función de la ventana
del visor.
width = núm o %
Indica la anchura de la marquesina en puntos o porcentaje en función de la
ventana del visor.
loop = num / infinite
Indica el número de veces que se desplazará el texto por la marquesina. Si se
indica infinite, se desplazará indefinidamente.
scrolldelay = num.
Indica el número de milisegundos que tarda en reescribirse el texto por la
marquesina, a mayor número mas lentamente se desplazará el texto.
Veamos un ejemplo de esta directiva :
<MARQUEE bgcolor = "#FFFFFF" width = 50% scrolldelay = 0 > Bienvenido a mi
página personal en Internet.
</MARQUEE>
Si estas utilizando Internet Explorer verás el efecto producido a continuación:
Sonido de fondo
Nuestra página Web puede tener un sonido que se active al entrar en la página. Esta
característica de Internet Explorer utiliza la directiva <BGSOUND> y tiene los
siguientes parámetros :
src = "fichero"
Indica el nombre del fichero que contiene el sonido (.waw, .mid).
loop = num / infinite
Indica el número de veces que se reproducirá el sonido. Si se indica infinite, el
sonido se reproducirá de forma contínua hasta que abandonemos la página.
Un ejemplo de esta directiva sería :
<BGSOUND src= "police.mid" loop= infinite>
Para utilizar esta función en Netscape se utiliza la directiva <EMBED>. Esta directiva
se utiliza realmente para "incrustar" un objeto en nuestra página Web. Dicho objeto
puede ser un fichero de sonido, un video, un gráfico BMP, etc... Tiene los siguientes
parámetros :
src = "fichero"
Indica el nombre del fichero que contiene el sonido (.waw, .mid) o el video
(.avi).
autostart = true
Incluirlo si deseamos que la reproducción se inicie inmediatamente.
loop = true
Incluirlo si deseamos que la reproducción no se detenga. (al terminar, vuelve a
comenzar automaticamente).
volume = número
Volumen al que se reproducen los ficheros de sonido.
width = número
height = número
Anchura y Altura de la representación del objeto. (Si es un sonido no es
necesario este parámetro).
controls = smallconsole
Visualiza una serie de controles que nos permiten iniciar la reproducción del
fichero, así como realizar una pausa o detenerlo.
Un ejemplo de esta directiva sería :
<EMBED src= "police.mid" loop= true autostart= true volume=50 width=50
height=15 controls=smallconsole>
Aquí tienes como sonaría este ejemplo:
Frames
Las frames es una técnica para subdividir la pantalla del visor en diferentes ventanas.
Cada una de estas ventanas se podrá manipular por separado, permitiéndonos mostrar en
cada una de ellas una página Web diferente. Esto es muy útil para, por ejemplo, mostrar
permanentemente en una ventana los diferentes contenidos de nuestra página, y en otra
ventana mostrar el contenido seleccionado.
Para definir las diferentes subventanas o frames se utilizan las directivas
<FRAMESET> </FRAMESET> y <FRAME>. La directiva <FRAMESET> indica
como se va a dividir la ventana principal. Pueden incluirse varias directivas
<FRAMESET> anidadas con el objeto de subdividir una subdivisión. Los parámetros
de <FRAMESET> son rows y cols en función de si la división de la pantalla se realiza
por filas (rows) o columnas (cols). Los parámetros rows y cols se acompañan de un
grupo de números que indican en puntos o en porcentaje el tamaño de cada una de las
subventanas. En caso de utilizar rows los tamaños de las subventanas se entienden
indicados de arriba a abajo, es decir, el primer valor será el asignado a la ventana
superior, el segundo a la ventana inmediatamente inferior, etc... En el caso de cols los
tamaños se aplican de izquierda a derecha.
Ejemplos Resultado
Crea tres subventanas horizontales,
la primera ocupará un 20% de la
<FRAMESET rows = "25%,50%,25%">
ventana principal, la segunda un
50% y la tercera un 25%.
Crea tres subventanas verticales, la
primera y la tercera tendrán un
"ancho" fijo de 120 y 100 puntos
<FRAMESET cols = "120,*,100">
respectivamente. La segunda
ocupará el resto de la ventana
principal (*).
En este caso "anidamos" dos
directivas. La primera divide la
ventana principal en dos
subventanas verticales, la primera
ocupa un 15% de la ventana
<FRAMESET cols = "15%,*"> principal y la segunda el resto. La
<FRAMESET rows = 20%,*"> segunda directiva vuelve a
subdividir la primera subventana
creada anteriormente, pero esta vez
en dos subventanas horizontales, la
superior ocupará un 20% de la
subventana, y la inferior el resto.
La directiva <FRAME> indica las propiedades de cada subventana. Es necesario

indicar una directiva <FRAME> para cada subventana creada. Los parámetros de
<FRAME> son :
name = "nombre"
Indica el nombre por el que nos referiremos a esa subventana.
src = "URL"
La ventana mostrará en principio el contenido del documento HTML que se
indique.
marginwidth = num.
Indica el margen izquierdo y derecho de la subventana en puntos.
marginheight = num
Indica el margen superior e inferior de la subventana en puntos.
scrolling = "yes / no / auto"
Indica si se aplica una barra de desplazamiento a la subventana en el caso de que
la página que se cargue en ella no quepa en los límites de la subventana. el valor
"yes" muestra siempre la barra de desplazamiento, "no" no la muestra nunca (la
zona de la página que no quepa en la subventana no la veremos), y "auto" la
muestra solo en caso de que sea necesario para poder ver la página.
noresize
Si se indica este parámetro, el usuario no podrá "redimensionar" las subventanas
con el visor. Un usuario que este viendo una página con frames puede
redimensionarlas seleccionando un borde de la subventana con el cursor y
desplazándolo.
border = num.
Indica el "borde" que separará esta frame de la siguiente. Si se indica cero (0) no
se mostrará borde entre las frames, consiguiendo un efecto muy elegante,
siempre y cuando el "fondo" de todas las frames sea el mismo, o sean colores
solidos.
Los visores que no soportan la característica de subventanas, no mostrarán nada de lo
indicado con estas directivas. Es por ello que existe una directiva llamada
<NOFRAMES> </NOFRAMES>. Todo los indicado entre esta directiva será lo que
muestren los visores sin capacidad para visualizar Frames. Los visores que soporten
Frames obviaran las directivas incluidas entre <NOFRAMES> </NOFRAMES>.
Si su visor puede visualizar Frames tendrá en estos momentos la pantalla dividida en
dos zonas independientes, en la izquierda verá el índice de materias de este manual, y en
la derecha estará viendo la sección del manual que haya selecionado. En otro caso
simplemente verá la sección del manual.
La definición de las Frames debe ir antes de la definición del cuerpo de documento
(<BODY>).
Veamos un ejemplo completo de Frames con comentarios :
<HTML>
<HEAD>
<TITLE>Página con Frames</TITLE>
</HEAD>
<FRAMESET cols = "15%,*">

<FRAMESET rows = "35%,*">

<FRAME name = "upd" src = "update.htm" scrolling = "auto">

<FRAME name = "menu" src = "menu1.htm" scrolling = "auto">

</FRAMESET>

<FRAME name = "home" src = "home.htm" scrolling = "auto">

<NOFRAMES>

<BODY>
SU VISOR NO MUESTRA FRAMES. Pulse <A href= "home.htm"> AQUI </A> para ir a la
página sin Frames.
</BODY>
</NOFRAMES>
</FRAMESET>

</HTML>
Al usar Frames, nos encontramos con un problema. Cuando queramos mostrar una
página Web debemos indicarle al visor en que subventana queremos que se muestre. Por
defecto se mostrará en la ventana donde se encuentre el enlace. Para poder escoger la
subventana de destino del Hiperenlace se añade un nuevo parámetro a la directiva <A
href= > </A>. Este parámetro se llama target y puede tener los siguientes valores :
target = "nombre_ventana"
Muestra el Hiperenlace en la ventana cuyo nombre se indica.
target = "_blank"
Abre una nueva copia del visor y muestra el Hiperenlace en ella. (Si usamos
Netscape esto provoca que tengamos funcionando dos copias del programa).
target = "_self"
Se muestra el Hiperenlace en la subventana activa.
target = "_parent"
El Hiperenlace se muestra en el <FRAMESET> definido anteriormente al
actual. Si no hay ningún <FRAMESET> anterior se muestra a pantalla completa
suprimiendo todas las subventanas de la pantalla.
target = "_top"
Suprime todas las subventanas de la pantalla y muestra el Hiperenlace a pantalla
completa.
Ejemplos Resultado
<A href= "http://www.microsoft.com/" target = Muestra la página de Microsoft en
"_blank"> una nueva copia del visor
Muestra la página de Ibm en la
<A href= "http://www.ibm.com/" target = "home">
subventanna llamada "home"
<A href= "http://www.yahoo.com/" target = Muestra la página del buscador
"_top"> Yahoo a pantalla completa
Scripts
Un Script es un programa escrito en un lenguaje distinto al HTML que se puede incluir
en una página Web "tal cual". Para incluir estos programas en una página Web se utiliza
la directiva <SCRIPT> </SCRIPT>. Esta directiva tiene el parámetro language para
indicar el lenguaje de programación utilizado para el Script. El código del programa
debe "ocultarse" con las directivas de comentario de HTML  con el objeto de
que no sean mostradas por los visores que no reconocen la directiva <SCRIPT>. Los
scripts más usados suelen estar escritos en lenguaje JAVA. Este lenguaje desarrollado
por Sun Microsystems permite realizar operaciones de animación y multimedia en una
página Web. Asimismo se podrán incluir con esta directiva programas escritos en C++,
Perl o Visual Basic.
La inclusión de un Script en una página Web se haría de la siguiente forma :
<SCRIPT language = "JavaScript">
< !--
instrucciones del programa ......
-->
</SCRIPT
¿Qué es JavaScript ?
JavaScript es un lenguaje interpretado que permite incluir macros en páginas Web.
Estas macros se ejecutan en el ordenador del visitante de nuestras páginas, y no en el
servidor (algo muy interesante, porque los servidores Web suelen estar sobrecargados,
mientras que los PC's de los usuarios no suelen estarlo).
JavaScript proporciona los medios para:
• Controlar las ventanas del navegador y el contenido que muestran.

• Programar páginas dinámicas simples sin tener que matar moscas a cañonazos
de Java.
• Evitar depender del servidor Web para cálculos sencillos.
• Capturar los eventos generados por el usuario y responder a ellos sin salir a
Internet.
• Simular el comportamiento de las macros CGI cuando no es posible usarlas.
• Comprobar los datos que el usuario introduce en un formulario antes de
enviarlos.
• Comunicarse con el usuario mediante diversos métodos.
La característica de JavaScript que más simplifica la programación es que, aunque el

lenguaje soporta cuatro tipos de datos, no es necesario declarar el tipo de las variables,
argumentos de funciones ni valores de retorno de las funciones. El tipo de las variables
cambia implícitamente cuando es necesario, lo que dificulta el desarrollo de programas
complejos, pero ayuda a programar con rapidez macros sencillas. En esto, JavaScript se
separa totalmente de lenguajes como C, C++ o Java.
JavaScript ha sido inventado por Netscape, que comenzó a ofrecerlo como parte de su
Navigator v.2.0. El nombre original de JavaScript fue LiveScript, pero se modificó en
el último momento, aparentemente para aprovechar el tirón de JAVA. Al ser código
interpretado, JavaScript es más lento que Java, pero en la práctica no suele ser un factor
de importancia.
Obviamente el objetivo de Netscape al introducir JavaScript es tratar de establecer un
estándar de programación de macros ejecutables en el navegador Web, que de ser
adoptado por los Webmasters, facilitaría la implantación de los navegadores de
Netscape en el mercado. En respuesta a este reto, MicroSoft soporta una versión parcial
de JavaScript, con el nombre de JScript, en su Internet Explorer. El primer
inconveniente de este estado de cosas es que las macros JavaScript sólo se ejecutan con
normalidad en navegadores Netscape, por lo que el Webmaster es responsable de
configurar la página para que pueda verse decentemente en un navegador que no sea
Netscape.
Una solución sería utilizar en nuestras macros el subconjunto de funciones comunes a

JavaScript y JScript, para soportar los navegadores Netscape y MicroSoft, pero esta
solución nos obligaría a renunciar a muchas de las características del lenguaje.
Las Bases del Lenguaje JavaScript

El lenguaje JavaScript se inserta en documentos HTML(HyperText Markup Languaje),
de forma que su código queda reflejado en la propia página y no es llamado o cargado
de ninguna fuente externa (por ejemplo un archivo). Se trata de un lenguaje interpretado
puro (ni compilación, ni generación de intermedios codificados de ningún tipo) y
sensible a mayúsculas, aunque algunas implementaciones ignoran en parte este último
extremo.
Hemos de establecer muy claramente la diferencia con el lenguaje JAVA, que se

incorpora en forma codificada - los denominados bytecodes-, que se traducen a lenguaje
máquina en la estación de trabajo ( el terminal del usuario final). Java fue desarrollado
por Sun MicroSystems, derivado del lenguaje C++. JavaScript tuvo su nacimiento
totalmente independiente de Java y sólo su parecido semántico y cuestiones de
marketing llevaron a sus desarrolladores a denominarlo de esta forma. Con todo,
considere la herencia de ambos de C++, por lo cual la traslación de conocimiento y
modo de trabajo es muy directa.
El lenguaje JavaScript por otra parte, téngalo muy presente, no crea aplicaciones
autónomas, de manera que sólo sirve para incluirse en documentos HTML y fuera de
ellos no tiene ninguna vigencia.
Todo el código de JavaScript debe explicitarse en la página HTML según el formato:

<SCRIPT
Language="JavaScript">

</SCRIPT>
Observe que el tag (etiqueta) utilizado es <SCRIPT LANGUAGE=...>.....</SCRIPT>.

En LANGUAGE se indica qué lenguaje script se utilizará, aquí indicamos JavaScript,
ya que es lo que nos ocupa en estos momentos.Note también las acotaciones de
comentario  al final del área de escritura de código. Esto es para
ocultarlo a los navegadores más antiguos, que no dan soporte a lenguajes script.
Si bien el código JavaScript puede incluirse en cualquier lugar de una página HTML, el
modo de comportarse puede ser diferente. Lo habitual es hacerlo antes del cuerpo del
documento, es decir, antes de la etiqueta <BODY>.
Fundamentos del JavaScript

En este apartado vamos a definir los fundamentos del lenguaje debido a que es
necesario hacer mención de ellos para una mejor comprensión posterior.
Argumentos:
Se usan con métodos y funciones. Pueden se tanto valores y variables, como objetos que
el método o función requieren para ser procesados.Por ejemplo, function
squareroot(16), función raíz cuadrada del argumento, valor en este caso, 16.
Manejadores de Eventos:
Se usan para ejecutar o llamar a un script de JavaScript. Pongamos un ejemplo para
clarificar:
<A HREF="link.htm" onClick=
"functionX( )"> Pulse aquí </A>
Aquí tenemos un evento de clic que inicia las acciones de la función functionX( ), es
decir, al pulsar en el anclaje no sólo accedemos a la página LINK.HTM, sino que se
ejecuta functionX( ).
A lo largo de este manual iremos viendo las distintas categorías de eventos y su manejo.
Como adelanto a apartados sucesivos vamos a nombrarlos:Eventos de Botón y
anclajes (links), de ventana, de formulario y de imágenes. Con versiones posteriores
de browsers estas categorías han ido aumentando, incluyendo en la actualidad Live3D,
LiveAudio y LiveVideo entre otros.
Expresiones:
Una expresión es un conjunto de literales, variables y operadores que describen un
único número, cadena o valor lógico.Ejemplo: x = y + 10.
Funciones:
Las funciones son sentencias que contienen instrucciones para ser ejecutadas cuando se
realiza la llamada a la función. En algunos lenguajes de programación también reciben
los nombres de subrutinas o procedimientos. Los tres términos coinciden en la
definición inicial pero en algunos lenguajes la diferencia estriba en que una función
siempre devuelve un valor obtenido por la ejecución de sus instrucciones, mientras que,
por ejemplo, un procedimiento puede o no devolver valor alguno. En el siguiente
ejemplo de función vemos que usando el método alert( ), se abre una ventana de aviso
con el texto "Esto es una prueba". Como se puede ver las instrucciones internas deben
ir entre llaves ({ }).
Function prueba( ) {
alert("Esto es una prueba");
}
Literales:
Los literales son representaciones de valores, que pueden ser enteros, coma flotante,
cadenas o booleanos. A diferencia de las variables que se declaran, a los literales se les
refiere: el 45 es un valor numérico que no necesita ser declarado y tiene valor por sí
mismo.
Métodos:
Los métodos son una especie de funciones, asociadas a objetos y que requieren
argumentos. Hemos visto ya un ejemplo con alert(). Se pueden distinguir a simple vista
ya que son palabras seguidas de ( ) y no son como las funciones que además llevaban
llaves.
Objetos:
Los objetos son los elementos principales afectados o interpretados en JavaScript. Un
ejemplo de objeto podría ser tanto un botón dentro de un formulario, como el propio
formulario o documento. En la instrucción Document.write("hola") se está invocando
al método write( ) del objeto document para escribir "hola" en el documento HTML.
Operadores:
Hay dos tipos de operadores en JavaScript: los de asignación, que asignan como su
propio nombre indica, valores al elemento a la izquierda del operador(por ejemplo," x =
5 ", operador =), y los que corresponden a operadores aritméticos lógicos o booleanos,
+, -, =, etc.
Propiedades:
Podríamos considerar las propiedades como adjetivos de los objetos que describen. Por
ejemplo, del objeto botón podemos encontrar propiedades como tamaño, situación en la
ventana, texto, etc.
Sentencias de Control:
Son las responsables directas del flujo del código. Un ejemplo típico sería un bloque if
con la instrucción if...then que ejecuta ciertas instrucciones en función del cumplimiento
de la condición.
Nota:En JavaScript toda instrucción debe ir finalizada por ";". No siguen esta regla las
propias sentencias de control, llamadas y definición de funciones.
Tipos de Datos:
JavaScript reconoce 4 tipos de valores, o tipos de datos:números, booleanos, cadenas y
el valor null(sin valor). También reconoce el valor type, accesible a través del objeto
date. Hay que tener mucho cuidado en las operaciones con distintos tipos de datos que
producirán a buen seguro errores en la ejecución.
Variables:
Son las representaciones de los tipos de datos que se inicializan o toman valor a través
de las expresiones. Pueden ser locales o globales. Locales significa que sólo se usan o
tienen sentido en el ámbito en que se han definido, por ejemplo una función, y globales
en todo el script. En el siguiente ejemplo vemos un ejemplo de script con una variable
local y otra global.
<SCRIPT>
var globalvar1=5;
Function multiplica()
{
var localvar1=2 * globalvar1;
alert("Dos por cinco son= " + localvar1);
}
<SCRIPT>
NOTA: Para la correcta visión en browser, este listado requiere de una instrucción
que veremos más adelante.
Sintaxis del JavaScript

El código JavaScript del que hablaremos en este manual va embebido en un documento
HTML, y no tendremos en cuenta la reciente aparición de los scripts de servidor que
pueden ir también codificados en JavaScript. Normalmente se escribe el código entre las
etiquetas <SCRIPT> y </SCRIPT> de la página Web. Se recomienda que dicho código
vaya incluido en la cabecera del documento, es decir, entre las etiquetas <HEAD> y
</HEAD>. De esta manera, haremos que se cargue el script antes de ser llamado por el
manejador de eventos en el cuerpo del documento, <BODY></BODY>, ya que si fuera
al revés el manejador de eventos no tendría nada a qué referirse.
Volvamos sobre el ejemplo de variables globales y locales para incluirlo ya en una
página HTML capaz de ser visualizada por un browser. Las modificaciones aparecen en
el siguiente ejemplo.
<HTML>
<HEAD>
<TITLE>PRUEBA 1 </TITLE>
<SCRIPT>
var globalvar1=5;
Function multiplica()
{
var localvar1=2 * globalvar1;
alert("Dos por cinco son= " + localvar1);
}
</SCRIPT>
</HEAD>
<BODY BGCOLOR="#00AA00" TEXT="#FFFFFF" LINK="#0000FF"
VLINK="#0000FF" ALINK="#0000FF" onLoad=multiplica()>
<CENTER><H1> Esto es un ejemplo</H1></CENTER>
</BODY>
</HTML>
Pulsa aquí para ver cómo se vería esta página.
Como se puede observar, hemos incluido, como se mencionó previamente, el código de

script en sus etiquetas correspondientes y dentro de la cabecera del documento. Una vez
dentro del cuerpo del documento, se ha incluido un manejador de eventos onLoad, que
llama al script definido en la carga de la página, ejecutándolo. El script es una función
que contiene un método, alert(), que despliega una ventana con el texto definido como
argumento del método.
A la hora de diseñar nuestras páginas y scripts se debe pensar también en los usuarios
que no disponen de browsers capaces de tratar nuestros diseños. Por ello existe una
etiqueta específica para estos últimos: <NOSCRIPT></NOSCRIPT>. El contenido de
estas etiquetas es tratado por los browsers que no admiten scripts, mientras que no se
interpreta por los que sí lo hacen.
Para usar correctamente el JavaScript en un browser, es importante saber cómo funciona

éste último a la hora de visualizar el diseño y la composición del texto plano modificado
con códigos HTML. Esta composición a partir del diseño especificado se realiza
siempre secuencialmente, es decir, el browser comienza desde la primera línea de la
página y continua descendiendo hasta el final de la misma. Por ello el JavaScript sólo
refleja código que ya se haya encontrado. Por ejemplo, definamos en un formulario dos
entradas de texto:
<FORM NAME="formula">
<input type="text" name="usuario" size=20 >
<input type="text" name="edad" size=3 >
</FORM>
A partir de su definición ambos elementos se pueden reflejar en JavaScript como los

objetos document.formula.usuario y document.formula.edad respectivamente.Sin
embargo no se pueden usar si no están previamente definidos.Por ejemplo, podemos
visualizar sus valores mediante un script incluido después de la definición del
formulario:
<SCRIPT>
document.write(document.formula.usuario.value)
document.write(document.formula.edad.value)
</SCRIPT>
Sin embargo si lo ponemos antes no funcionará y aparecerá un error por no estar

definido. Otro ejemplo: si hemos definido el título del documento como:
<TITLE> PRUEBA DE JAVASCRIPT</TITLE>
el browser visualiza en la barra de su ventana dicho título. Si intentamos ahora cambiar

el valor del título:
Document.title ="UNA NUEVA PRUEBA DE JAVASCRIPT"
éste no cambiará, ni siquiera generará un error.
Antes de centrarnos en partes internas de un documento, vamos a recordar cómo insertar

scripts. Hay dos maneras distintas:
• Como sentencias de control y funciones usando las etiquetas
<SCRIPT></SCRIPT>.
• Como manejadores de eventos usando las demás etiquetas de HTML.
Recordemos la opción <SCRIPT LANGUAGE="JavaScript> de especificación de

lenguaje de código, y digamos que dentro de estas etiquetas puede ir un número
indeterminado de instrucciones. Asimismo, ha de resaltarse que JavaScript es "case
sensitive", es decir, hace distinción entre letras mayúsculas y letras minúsculas. Es
importante entender la diferencia entre definir una función e invocar una función.
Definirla le da nombre y especifica qué instrucciones ejecuta al ser llamada e invocarla
hace que realmente ejecute las instrucciones.
Caso Práctico
Para terminar este apartado vamos a estudiar un ejemplo que resume todo lo
anteriormente explicado. Se trata de un script en un formulario con una llamada de
manejador de eventos. El código lo podemos ver a continuación:
<HTML>
<HEAD>
<TITLE>FORMULARIO 1</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function calcula(form){
if (confirm("¿Está seguro?"))
form.resultado.value=eval(form.expr.value);
else
alert("Vuelva a intentarlo.");
}
</SCRIPT>
<NOSCRIPT>
<META HTTP-EQUIV=REFRESH CONTENT=0;URL=pru1.htm>
</NOSCRIPT>
</HEAD>
VLINK="#0000FF" ALINK="#0000FF">
<CENTER><H1>Calculadora</H1>
<BR><FORM>
Introduzca expresión:
<INPUT TYPE="text" NAME="expr" SIZE=15>
<INPUT TYPE="button" VALUE="Calcular" onClick="calcula(this.form)">
<BR>
Resultado:
<INPUT TYPE="text" NAME "resultado" SIZE=15>
<BR>
</FORM></CENTER>
</BODY>
</HTML>
Lo primero que nos encontramos es la definición en la cabecera de documento de la

función calcula(form) que tiene como argumento el propio formulario. Las
instrucciones que contiene se rigen por un bloque if - else que valora un método no visto
hasta ahora confirm("cadena"):
function calcula(form) {
form.resultado.value=eval(form.expr.value);
else
alert("Vuelve a intentarlo."")
}
Lo que hace es sacar una ventana, como la que aparecía con el método alert("cadena")
con la única diferencia que ofrece dos botones: uno de cancelación y otro de
confirmación.La elección del usuario es lo que impone la condición del bloque if. En la
línea
se controla si el usuario ha elegido Aceptar. En este caso el valor del cuadro de texto
"resultado" del formulario definido en el cuerpo del fichero, toma el valor del resultado,
valga la redundancia, de la expresión que haya sido introducida en el cuadro de texto
"expr". Si el usuario elige el botón de cancelar, entramos en el else del bloque, haciendo
que aparezca una ventana con el método alert(), diciendo "Vuelva a intentarlo".
Observamos también una función nueva hasta ahora:eval("cadena").Lo que hace esta
función es transformar a valor numérico la expresión matemática introducida en la
cadena. En nuestro caso la cadena viene dada por el contenido del cuadro de texto
"expr". Hay que señalar que este script no valida la entrada de datos, por lo que si no
introducimos una expresión susceptible de evaluación matemática, obtendremos un
error.
Manejadores de Eventos
Uno de los manejadores más básicos es OnClick que inicializa un script, como su
propio nombre indica, cuando el usuario hace clic en un link de la ventana del browser.
Todos los demás manejadores funcionan de la misma manera: evalúan la acción de un
usuario y entonces llaman a un script que ejecuta el código.En este apartado vamos a
ver manejadores de eventos de:
• Link
• Botón
• Ventana
Hay que recordar que los casos a tratar suelen ser visibles con browsers como Internet
Explorer 3.0 en adelante y Netscape Navigator 2.0 en adelante, aunque algunos
necesitan versiones posteriores. Puede ocurrir que algunos de los ejemplos produzcan
errores con MicroSoft Internet Explorer dado que MicroSoft ha desarrollado su propio
lenguaje para estos menesteres llamado JScript y que, por supuesto, contiene algunas
diferencias con el JavaScript desarrollado por Netscape.
Vamos a ir aprendiendo el uso de estos manejadores a través de ejemplos explicados.
1.Mensajes de Alerta - Manejador OnClick

El manejador OnClick, como ya se ha dicho anteriormente, es uno de los componentes
más básicos y usados de JavaScript. El siguiente ejemplo utiliza este manejador para
generar un mensaje de alerta en el browser.Los mensajes de alerta son utilizados para
muy variados propósitos pero básicamente se usan para informar al usuario de algo a
través de un cuadro de diálogo que aparece tras la acción del usuario.
<HTML>
<HEAD>
<TITLE> PRUEBA 1 </TITLE>
<SCRIPT>
function boton(){
alert("Esta página está en construcción, pero puedes echar un vistazo si quieres");}
</SCRIPT>
</HEAD>
VLINK="#0000FF" ALINK="#0000FF" >
<CENTER><H1>Esto es un ejemplo</H1></CENTER>
Visita nuestro <A HREF="MENU.HTM" onClick="boton();">menú </A>del día
</BODY>
</HTML>
Si quieres ver cómo funciona este código, pulsa aquí.
Como se puede ver insertamos el código de script en la cabecera del documento,

definiendo una función, boton(), que contiene el método alert().Este código se ejecuta
cuando el usuario hace clic sobre el link menú que antes de llevarle a la página
MENU.HTM muestra el mensaje incluido con el método alert().
2.Botón de Navegación - Manejador OnClick, método go(), objeto history

Este ejemplo utiliza el método onClick para inicializar el método go(), perteneciente al
objeto history que permite la navegación hacia delante y hacia atrás sobre el historial de
un URL. El código de este ejemplo es el siguiente:
<HTML>
<HEAD>
function nav(x) {
history.go(x);}
</SCRIPT>
</HEAD>
<CENTER><H1>Navegación con botones<H1>
<H2>Estos son dos botones hechos como componentes de un formulario:<H2><P>
<FORM>
<INPUT TYPE="button" VALUE="ATRAS" onClick="nav(-1);">
<INPUT TYPE="button" VALUE="ADELANTE" onClick="nav(1);">
</FORM><P>
<H2>Y este es un texto con un link de JavaScript.<H2><P>
<A HREF=javascript:history.go(-2);>ATRAS DOS PÁGINAS</A>
<P>
</CENTER>
</BODY>
</HTML>

Pasemos a analizar el código. Definimos la función nav(x) que, a través de la variable
x, da el número de saltos en páginas que el browser debe implementar. En este mismo
ejemplo vamos a ver dos formas de hacer lo mismo. El método history.go(x) toma un
valor entero x que en la primera parte del código es 1 ó -1
<INPUT TYPE="button" VALUE="ATRAS" onClick="nav(-1);">
<INPUT TYPE="button" VALUE="ADELANTE" onClick="nav(1);">
y carga el URL correspondiente al número adelante o atrás especificado en el historial

de navegación de la sesión en curso. Este método toma el valor de la función nav(x),
que es llamada al hacer clic en los botones definidos en el formulario. La segunda forma
de hacer el mismo proceso, dando a la vez más libertad al desarrollador dado que
permite diseñar el propio botón como un .GIF o como es el caso que nos ocupa, con
texto, lo vemos en la línea
<A HREF=javascript:history.go(-2);>ATRAS DOS PÁGINAS</A>
en donde podemos ver cómo implementar un anclaje de JavaScript.
3.Botón de E-mail
Este ejemplo abre la ventana de correo electrónico para mandar un mensaje a la
dirección especificada. Veamos primero el código:
<HTML>
<HEAD>
</HEAD>
<H1>Ejemplo de Botón de Correo</H1>
<CENTER><FORM>
<INPUT TYPE="button" VALUE="Enviar correo"
onClick="self.location='mailto:webmaster@cal.upco.es';">
</FORM>
</CENTER>
</BODY>
</HTML>

En este ejemplo no definimos una función y directamente a través del manejador
OnClick invocamos una propiedad, self, del objeto window. Ni que decir tiene que
podemos sustituir la línea 'mailto:webmaster@cal.upco.es' por cualquier otro URL.
4.Barra de Estado con Mensaje

Con este ejemplo vamos a introducir un nuevo manejador:onMouseOver.¿Cuándo se
"dispara" este manejador?: pues como su propio nombre indica al pasar el ratón por
encima del elemento que tiene la llamada del manejador, es decir, al reconocer la
presencia del ratón sobre el área de texto o imagen, lo que produce un mensaje
predefinido que aparece en la barra de estado de la ventana del browser.
Tenemos dos tipos de links que cumplen el mismo propósito de generar un mensaje en
la barra de estado: el enlace de texto,
<A HREF="link2.htm" onMouseOver="windows.status='Enlace a la página
link2.htm';
return true">
<H1>Link Nº2</H1></A><P>
y el enlace de imagen,
<A HREF="link1.htm" onMouseOver="windows.status='Esto es un reloj';return
true">
<IMG SRC="reloj.jpg"> </A>
De estas dos maneras conseguimos distintos mensajes sin necesidad de hacer efectivos
los links. Este ejemplo también introduce una nueva propiedad del objeto
window:status.Lo que hace es mostrar el texto asignado en la barra de estado (extremo
inferior izquierdo) de la ventana del documento. El script debe contener la instrucción
return true dentro del manejador de eventos onMouseOver para un correcto
funcionamiento.
5.Mensaje de Alerta con Manejador onMouseOver

Este ejemplo es una simple combinación de dos de los anteriores para aunar conceptos:
nos encontramos con una ventana de alerta al pasar el ratón por un área determinada.
Podemos ver el código, que no necesita explicación adicional:
function TextoAlerta() {
alert("Página en construcción.Lo sentimos mucho");}
</SCRIPT>
............................................................
<A HREF="link1.htm" onMouseOver="TextoAlerta();">Visita esta página </A>
6.Mensaje de Alerta con Manejador onMouseOut

En este ejemplo introducimos el último manejador de link:onMouseOut. Lo que hace
este manejador es esperar a que el ratón abandone el área predefinida como link para
disparar el mensaje de alerta. Resumiendo, para que se ejecute el script el ratón debe
entrar y salir del área de link. Se podría utilizar este manejador para implementar juegos
o en páginas donde es necesario que el usuario haga clic en una zona determinada
(imagen, por ejemplo) para desencadenar una serie de acciones.Veamos cómo sería el
código:
<H1><A HREF="hora.htm" onMouseOut="alert('Debe hacer clic
en la imagen para ver la hora');">
<IMG SRC="reloj.jpg"></A></H1>
7.Ejemplo de un Juego on line

Este ejemplo es un simple juego de preguntas y respuestas cuyo código no puede ser a
estas alturas más simple. Combina el manejador onClick, con el método alert() y con
etiquetas INPUT de botón. La ventaja de este ejemplo es que toda la funcionalidad del
mismo reside en el cliente, cuando anteriormente se debía recurrir a un CGI para
conseguir el mismo resultado. Como innovación se utiliza la propiedad checked
aplicable a los objetos tipo button de un formulario, y que obviamente marcan la
elección hecha. Veamos el código:
<HTML>
<HEAD>
</HEAD>
<CENTER><H1>¿Sabes Idiomas?<H1>
<FORM>
<STRONG><FONT SIZE=5>¿Qué significa en alemán HAUS?
</FONT></STRONG>
<FONT SIZE=4><P>
<INPUT TYPE=RADIO name="b1" onClick="alert('Empezamos
mal.');b1.checked;">
Nada en absoluto<BR>
<INPUT TYPE=RADIO name="b2" onClick="alert('Correcto.');b2.checked;">
Casa;BR>
<INPUT TYPE=RADIO name="b3" onClick="alert('Hay que saber
idiomas.');b3.checked;">
Hay que usar corbatas en actos oficiales<BR>
</FONT>
</FORM>
</CENTER><BR><BR><H5>Con este tipo de ejecución se reduce la carga del
servidor<H5>
</BODY>
</HTML>
8.Eventos de Ventana
A continuación vamos a ver los eventos de ventana. Un evento de ventana puede ser
definido como un evento disparado por alguna actividad relacionada con la ventana del
browser como por ejemplo la carga o descarga de un documento, manejadores onLoad
y onUnload, o la obtención o pérdida del foco, esto se refiere a que una ventana dentro
de un grupo de ellas esté activa sobre las demás, manejadores onFocus y onBlur. Este
tipo de eventos no sólo se aplica a ventanas completas sino también a frames,
subventanas o marcos, dentro de ellas. Por ello las etiquetas HTML sobre los que irán
estos manejadores serán <BODY>, para la ventana completa, y/o <FRAMESET>, para
los frames.
A partir de la versión 3.0 de Netscape se introdujeron dos nuevos métodos a los objetos
ventana y frame: blur() y focus(). De ellos surgieron los dos últimos manejadores de
eventos anteriormente mencionados. En la práctica no son usados aunque sí se utilizan
los métodos para dar y quitar el foco a una ventana o frame en ciertos momentos.
Veamos un ejemplo para obtener la hora exacta del sistema:
function horario() {
var hoy=new Date();
document.forms[0].elements[0].value=hoy.toString();
}
</SCRIPT>
</HEAD>
VLINK="#0000FF" ALINK="#0000FF"
ONLOAD="setTimeout('horario();',1000);" >
............................................
<FORM>
<INPUT TYPE="text" VALUE="" SIZE="19">
</FORM>
............................................
Con esto obtenemos en un formulario con una caja de texto la fecha y la hora del
sistema. Para ello hemos definido en la cabecera del documento la función horario( ).
En la variable hoy almacenamos el resultado de aplicar el método new date(). El
método toString( ) convierte el valor de dicha variable en una cadena cuyo valor asigna
al valor del primer elemento del formulario del documento, ventana, sobre el que
estamos.El argumento 1000 representa 1000 milisegundos ó 1 segundo y es el tiempo
que tarda en actualizar el valor de la fecha de la ventana a través del método
setTimeout(), creando así la ilusión de un reloj digital.La llamada al script se realiza a
través del manejador onLoad en la etiqueta del cuerpo del documento.
Veamos ahora un ejemplo que permite al usuario confirmar si desea cargar una página
al comienzo del proceso.
<HTML>
<HEAD>
function confirma() {
if (!confirm
("Debe tener usted los datos necesarios para seguir la ejecución.¿Desea
seguir?"))
history.go(-1);
}
</SCRIPT>
</HEAD>
VLINK="#0000FF" ALINK="#0000FF" ONLOAD='confirma();'>
Cuerpo del Documento
</BODY>
</HTML>
La explicación es bastante sencilla. Definimos la función confirma(), que se invoca

mediante el manejador onLoad en la carga de la página. Esta función controla mediante
una sentencia de control if si el usuario ha pulsado "aceptar" o "cancelar".¿Que cómo?.
En la línea
if (!confirm
("Debe tener usted los datos necesarios para seguir la ejecución.¿Desea seguir?"))
history.go(-1);
donde lo que está preguntando es si ha pulsado "cancelar" (el operador ! indica

negación). En caso afirmativo atrasa en una página la navegación del browser a través
de la línea
history.go(-1);
Por último vamos a ver el código de JavaScript que más a menudo se ve por el WWW.
Una vez que una página está cargada, empieza a desplazarse de derecha a izquierda de
la barra de estado de la ventana del browser una serie de textos. Veamos el código y lo
comentamos:
<HTML>
<HEAD>
var timed=0;
var srollGo=false;
var delay=100;
var space=100;
function scroll1() {
var i=0;
msg="Este es el mensaje que aparece";
for(i=0;i<space;i++)
msg=" "+msg;
scrollGo=true;
timerid=window.setTimeout("scroll2(0)",delay);
}
function scroll2(pos){
var out=" ";
scrollGo=false;
if (pos<msg.length)
self.status=msg.substring(pos, msg.length);
...........................................................
Este ejemplo utiliza la propiedad status del objeto window. Manipulando la longitud del
mensaje y añadiendo un retraso, a través de la variable delay, usando el método
setTimeout obtenemos el efecto descrito. También son novedad en este ejemplo el
método subString() y la propiedad length. El método subString() muestra una parte de
una cadena de caracteres. Usa dos argumentos: el primero determina dónde comienza la
subcadena a mostrar y el segundo dónde acaba. La propiedad length indica el número de
elementos en un array, en nuestro caso la longitud del mensaje.
Formularios
Vamos a empezar con los formularios, que permiten la interacción del usuario con
información a través de las páginas Web. Antes de la aparición del JavaScript,
interactuar con los elementos de un formulario era sólo posible mediante código
residente en el servidor. JavaScript permite esto corriendo en el cliente de una manera
algo más limitada, pero con una respuesta instantánea para el usuario que visita la
página.
Los formularios proporcionan una respuesta ante las siguientes situaciones:

• Un cambio en la opción seleccionada dentro de un grupo <SELECT>, esto es un
grupo de opciones a seleccionar por el usuario.
• Entrar o salir dentro de un campo del formulario.
• Transmisión de un formulario completo
Ahora vamos a enumerar la etiquetas HTML que se usan habitualmente en un

formulario, cuya explicación se verá en la práctica con los ejemplos que veremos más
adelante:
• <INPUT>
• <SELECT>
• <TEXTAREA>
• <OPTION>
• y todos ellos incluidos dentro de <FORM>
Los manejadores de eventos para las acciones anteriormente mencionadas son:
• onBlur:Incicializa un script cuando un campo del formulario es excitado. Este
manejador funciona con las etiquetas <INPUT>, <SELECT> y
<TEXTAREA>.Se suele usar cuando un campo del formulario pierde el foco,
representado por el cursor o el ratón.
• onChange:Este manejador funciona con las etiquetas <INPUT>,<SELECT> y
<TEXTAREA> e inicializa el script cuando el contenido de uno o varios
campos del formulario cambian.
• onFocus:Este manejador funciona con las etiquetas <INPUT>,<SELECT> y
<TEXTAREA> y es justo el manejador opuesto a onBlur, activando el script
cuando se entra en un campo del formulario o recibe el foco del ratón o el
cursor.
• onSelect:Este manejador sólo funciona con las etiquetas <INPUT> y
<TEXTAREA>, activando el script al seleccionar un texto contenido en cuadro
o área de texto. Lo suelen confundir con el manejador onFocus descrito
anteriormente.
• onSubmit:Se usa en unión con <FORM> y activa el script al enviar el
formulario.
Una vez introducidos los elementos a manejar, pasemos a ver su funcionamiento

mediante ejemplos.
Ejemplo1: Color de Fondo
Este primer ejemplo utiliza el manejador onFocus para detectar que el usuario entre
mediante el ratón o el tabulador en un campo, cambiando el color de fondo del
formulario. Veamos el código.
<HTML>
<HEAD>
<TITLE> EJEMPLO 1 </TITLE>
</HEAD>
<BODY BGCOLOR=FFFFFF text=000000>
<CENTER><H2>onFocus - Cambio de color de fondo</H2><P>
<FORM><INPUT Type="text" Name="bgred" value="rojo"
onFocus="document.bgColor='red'"><P>
<INPUT Type="text" Name="bggreen" value="verde"
onFocus="document.bgColor='green'"><P>
<INPUT Type="text" Name="bgblue" value="azul"
onFocus="document.bgColor='blue'"><P>
<INPUT Type="text" Name="bgyellow" value="amarillo"
onFocus="document.bgColor='yellow'"><P>
</FORM></CENTER>
</BODY>
</HTML>
Ejemplo2: Mensaje de Alerta

Este ejemplo utiliza el manejador onBlur para tomar una acción al abandonar un campo
del formulario. En este caso lanza un mensaje de alerta, función alert(), cuando el
usuario abandona el campo del código postal, avisando que es necesario rellenar el
campo del DNI. Por supuesto existen múltiples variantes de este ejemplo dependiendo
de la acción a tomar, es decir, la función o funciones que usemos. Se han incluido
etiquetas de tabla para dar este formato a la página.
<HTML>
<HEAD>
</HEAD>
<CENTER><H2>onFocus - Mensaje de Alerta</H2><P>
<P><H2>Introduzca su datos personales:</H2><P>
<FORM><TABLE>
<TR><TD>Nombre:</TD><TD><INPUT type="text" name="nom"
size=35></TD></TR>
<TR><TD>Domicilio:</TD><TD><INPUT type="text" name="dom"
size=35></TD></TR>
<TR><TD>Ciudad:</TD><TD><INPUT type="text" name="ciu"
size=35></TD></TR>
<TR><TD>Provincia:</TD><TD><INPUT type="text" name="pro" size=17
>C.P.:<INPUT type="text"
name="CP" size=12></TD></TR>
<TR><TD>DNI:</TD><TD><INPUT type="text" name="DNI" size=35
onBlur="alert('Es obligatorio insertar
este dato')></TD></TR>
</TABLE></FORM></CENTER>
</BODY>
</HTML>
Ejemplo 3: Testeo de los valores de entrada de un

formulario
Este ejemplo utiliza el manejador onChange y el método index(). Se trata de verificar
que la entrada de un campo sigue el formato deseado antes de enviar los datos del
formulario. Este ejemplo es una buena manera de comprobar cadenas de longitudes fijas
como teléfonos, números de cuenta, códigos postales, etc. En nuestro caso
comprobamos que el usuario introduce el teléfono con el prefijo más las siete cifras
propias.
<HTML>
<HEAD>
<SCRIPT>
function chequeo(tel){
if (tel=="") {alert("Debe usted introducir el teléfono
con el prefijo de provincia de la manera
siguiente: 91-7777777")}
else {
if (tel.indexOf("-") !=2 || tel.length != 10)
{alert("Debe usted introducir el teléfono
con el prefijo de provincia de la manera
siguiente: 91-7777777")}
}
}
</SCRIPT>
</HEAD>
<CENTER><H2>onChange - Testeo del campo teléfono</H2><P>
<P><H2>Introduzca su datos, por favor:</H2><P>
<FORM><TABLE>
size=35></TD></TR>
size=35></TD></TR>
size=35></TD></TR>
<TR><TD>Provincia:</TD><TD><INPUT type="text" name="pro" size=17
>C.P.:<INPUT type="text"
name="CP" size=12></TD></TR>
<TR><TD>Teléfono:</TD><TD><INPUT type="text" name="tel" size=35
onChange="chequeo(this.value)">
</TD></TR>
</TABLE></FORM></CENTER>
</BODY>
</HTML>
El funcionamiento es el siguiente: el manejador onChange entra en funcionamiento

cuando el campo de texto de nombre "tel" cambia de valor. Entonces llama a la función
chequeo, definida en la cabecera de documento, que es la encargada de realizar las
comprobaciones pertinentes. La primera condición del bloque if es comprobar si el
campo ha quedado en blanco, en cuyo caso lanza el mensaje de alerta. En caso
contrario, comprueba el contenido del campo y si no cumple las condiciones
especificadas, vuelve a lanzar el mensaje. Para dar forma a las condiciones usamos el
método index() que primero pasa a cadena el objeto "tel" y:
• comprueba que el guión no está situado en las dos primeras posiciones de la
cadena.
• comprueba que la longitud total de la cadena, con el guión incluido, es de 10
caracteres.
Hay que señalar que estas condiciones están ligadas por un operador || que equivale a
una ligadura lógica OR.
Ejemplo 4: Mensaje de alerta al hacer una selección

Este ejemplo utiliza el manejador onSelect. Cuando el usuario selecciona una de las
opciones, se dispara un mensaje de alerta.
<HTML>
<HEAD>
</HEAD>
<CENTER><H1>onSelect </H1><P><H2>Elige el adjetivo que mejor te
describe</H2><P>
<FORM>
<INPUT Type="text" onSelect="alert('Vamos, no seas modesto.')" Name="t1"
size=20
value="normal" ><BR>
<INPUT Type="text" onSelect="alert('Bueno, por lo menos no eres modesto.')"
Name="t2" size=20
value= "Genial" ><BR>
<INPUT Type="text" onSelect="alert('De paso dime tu teléfono....')" Name="t3"
size=20
value="Atractivo" ><BR>
<INPUT Type="text" onSelect="alert('Entonces espera un ratito....')" Name="t4"
size=20
value="Paciente" ><BR>
</FORM></CENTER>
</BODY>
</HTML>
Ejemplo 5:Testeo de valores de un formulario antes del

envío
Ahora vamos a utilizar el manejador onSubmit. Se trata de verificar los datos del
formulario antes de enviarlos. Una vez hecho esto, podremos, por ejemplo, poner en
funcionamiento un CGI residente en el servidor WWW.
Veamos el código:
<HTML>
<HEAD>
<SCRIPT>
function testform(){
var tel="";
tel=document.forms[0].elements[0].value;
if (document.forms[0].elements[0].value==""
|| document.forms[0].elements[1].value==""
{ alert("Debe usted rellenar todos los campos del formulario") }
if (tel.indexOf("-")!=2||tel.length!=10)
{ alert("Debe usted introducir el teléfono
con el prefijo de la provincia
de la forma siguiente:91-7777777")}
}
</SCRIPT>
</HEAD>
<CENTER><H1>onSubmit - Testeo de formulario</H1><P>
<H2> Introduzca sus datos, por favor:</H2>
<FORM method=post onSubmit="return testform()"><TABLE>
size=35></TD></TR>
size=35></TD></TR>
size=35></TD></TR>
<TR><TD>Provincia:</TD><TD><INPUT type="text" name="pro" size=17>
C.P.:<INPUT type="text" name="cp" size=12></TD></TR>
</TABLE>
<INPUT type="submit" name="submit button" value="submit">
</FORM></CENTER>
</BODY>
</HTML>
La función testform() va comprobando que todos los elementos del objeto document,
los campos del formulario que no están rellenos. Es decir, si encuentra uno sólo vacío
lanzará el aviso. Debemos observar que el manejador que estamos tratando en este caso,
onSubmit, sigue una pauta distinta a los anteriores en cuanto a colocación se refiere. En
este caso debemos incluirlo en la etiqueta de formulario:
<FORM method=post onSubmit="return testform()"><TABLE>
Imágenes
Vamos a ver ahora cómo compaginar el JavaScript con las imágenes. Al igual que con
los formularios incluiremos el manejador de eventos dentro de la etiqueta de imagen
<IMG>.
Los manejadores son tres:
• onAbort:Inicializa el script cuando se aborta la carga de la imagen. Esto se
puede producir al seleccionar otro URL , al presionar el botón de "stop" o el de
"back", al presionar la tecla de "escape", o cualquier otra acción que interrumpa
la carga.
• OnLoad:Inicializa el script al comenzar la carga de la imagen. Recordemos que
éste también se usó como manejador de eventos de ventana.
• OnError:Inicializa el script cuando se produce un error en la carga de la
imagen, esto es, el browser no localiza la imagen en el servidor, cosa que en la
práctica se simboliza por lo que vulgarmente se denomina un "GIF roto".
Al trabajar com imágenes no hay que dejar de recordar que se debe incluir los
modificadores de altura y anchura, ya que su ausencia puede redundar en un mal
funcionamiento del script en cuestión. De todas maneras, aún sin existir un script
asociado a un imagen, es conveniente poner sus dimensiones ya que así conseguiremos
una visualización más rápida y eficiente de nuestra página. Dada la simplicidad del
funcionamiento vamos a incluir un ejemplo general en el que bastaría con cambiar el
manejador y el mensaje para ilustrar más casos.
<HTML>
<HEAD>
<SCRIPT>
function imag(){
alert("No encuentro la imagen deseada. ¿Te gusta esta?
document.images[0].src="diablillo.gif";
}
</HEAD>
<BODY BGCOLOR="#FFFFFF"
<P>
<IMG SRC="world.gif " width=180 height onError="imag()" border=2>
</BODY>
</HTML>
NOTA: Los GIF's mostrados en este ejemplo son simbólicos, si desea probarlo
sustituya estos nombres por imágenes que usted tenga
Elaboración de páginas web: Lenguaje
HTML
Arquitectura cliente/servidor -Introducción al lenguaje HTML - Principales elementos
del lenguaje html - Creación de documentos HTML - Cabecera del documento -
Creación de encabezados, estilos y párrafos - Creación de enlaces y vínculos - Creación
de listas - Creación de tablas - Añadir imágenes
HTML AVANZADO:
Creación de páginas basadas en marcos o frames - Creación de formularios y scripts
CGI - Envío y gestión de información
Arquitectura cliente/servidor
Antes de comenzar a explicar la estructura de las páginas web y el lenguaje html, es
importante tener claro en que consiste la arquitectura cliente/servidor en la que se basan
tanto las redes locales como la propia Internet
Pensar en una red clásica de pescadores es bastante gráfico para comprender la
estructura de la Red. En ella, se pueden
diferenciar a simple vista dos elementos que se repiten: los nudos y los segmentos de
malla que unen los distintos nudos.
Al hablar de Internet estamos hablando también de una red y los elementos que
componen esa red son los nodos y los enlaces. La estructura de Internet no es tan
regular como una red de pescadores, si bien se pretende tener conectividad entre todos
los nodos, es decir, lo ideal es tener la posibilidad de encontrar al menos dos rutas o
caminos (path en inglés) entre dos nodos cualesquiera. Uno de ellos será el nodo origen
de los mensajes mientras que el otro será el nodo destino.
Los nodos no son más que ordenadores dedicados a encaminar los paquetes hacia su
destino, eligiendo el enlace más
adecuado en cada momento. Estos nodos reciben el nombre de enrutadores
(ROUTERS), y serían algunos de los nudos de
la parte interna/central de la red de pesca. Igualmente, nosotr@s al conectarnos
utilizamos un ordenador, que si bien también
es un nodo de la red se le denomina HOST (tu ordenador).
Los enlaces son las conexiones físicas entre nodos y están formados por un conjunto de
circuitos de datos en forma de hilos
telefónicos, fibras ópticas, microondas y demás soportes propios de
Telecomunicaciones. La información, se divide en trozos
de un número determinado de caracteres. A cada trozo de estos, denominado paquete, se
le asocia información de
enrutamiento, y se envía por un enlace. Es decir, cuando se establece una conexión
internet, tu equipo queda conectado por un enlace a la red.
Existen una serie de ordenadores que están conectados a la red con el objeto de ofrecer
y proporcionar alguna clase de
servicio a todo aquel que se lo pida. Estos ordenadores son también nodos de la red y se
denominan servidores
(SERVERS).
Para poder acceder a los recursos que ofrece un servidor se necesita un tipo de programa
específico, denominado programa
cliente, que debes ejecutar en tu ordenador y que es el encargado de mantener el diálogo
con el programa servidor. Se dice
que estamos en una arquitectura cliente / servidor, en la que el programa servidor
corre en el ordenador que ofrece algúnrecurs o (server) y el programa cliente en el
ordenador de aquél que lo reclama (host). Los programas navegadores (Netscape,
Explorer) son clientes que piden páginas a diversos servidores que existen en la
red.
Introducción al HTML
Cuando tu programa navegador (cliente) pide una página web al servidor, éste le envía
un fichero de texto (con extensión htm o html) en lenguaje html que tu programa
(netscape o explorer) se encarga de "traducir" para que puedas visualizar correctamente
en el navegador la página web solicitada incluyendo texto, fondos, gráficos, etc.
El HTML (HipertText Markup Language) ó Lenguaje de enlaces hipertexto es un
sistema que se encarga de definir tipos de documentos estructurados y lenguajes de
marcas para representar esos mismos documentos. El término HTML se suele referir a
ambas cosas, tanto al tipo de documento como al lenguaje de marcas.
Como cualquier página web está soportada por un fichero de texto, se pueden elaborar,
editar o modificar directamente con el bloc de notas o el wordpad de Windows 95,
aunque existen programas editores de páginas web a la venta como HotDog ó Front
Page y programas gratuitos de edición básica como Netscape Composer, que permiten
editarlas con algunas funciones automatizadas a través de botones y menús.
Elementos del lenguaje HTML
Caracteres :
• Cualquier cadena de caracteres imprimibles que no represente un marcado se
representa literalmente, aunque los espacios y tabuladores se reducen a un solo
carácter cuando no están dentro de un bloque preformateado.
Marcadores, marcas o etiquetas (tags) :
• Los marcadores delimitan elementos de un documento como cabeceras,

párrafos, etc. La mayoría de los marcadores constan de una marca inicial < ...> ,
que da el nombre y atributos del elemento, seguida del contenido ó secuencia de
caracteres y una marca final</...>.
• Las marcas iniciales se escriben entre los símbolos "<" y ">" (menor y mayor) y
las finales entre "</" y ">" (menor barra y mayor). Por ejemplo,
<H1>Contenido</H1>, indica que "Contenido" es una cabecera de nivel uno.
• Algunos elementos sólo tienen una marca inicial (por ejemplo la marca <HR>
que representa una línea horizontal) y otros, aunque disponen de ambas, se
suelen expresar sólo con la inicial.
Nombres de etiquetas :
• Los nombres consisten en una letra seguida de letras, dígitos, puntos o guiones.
Los ejemplos H1 y HR anteriores son ejemplos de nombres de etiquetas. La
longitud de un nombre esta limitada a 72 caracteres en la definición del HTML.
Los nombres de elementos y atributos no distinguen entre mayúsculas y
minúsculas, pero los nombres de entidades (la representación alternativa de los
caracteres) sí.
• En las marcas, el nombre del elemento debe comenzar inmediatamente después
del <.
Atributos :
• Cuando una marca inicial admite atributos, éstos se escriben a continuación del
nombre del elemento. Generalmente los atributos tienen la forma nombre, signo
igual, valor del atributo aunque en algunos casos basta con el nombre del
atributo. Se pueden poner espacios en blanco antes y después del signo igual.
• El valor de un atributo puede ser una cadena de caracteres entre comillas
(simples o dobles) que no contenga el símbolo de fin de marca ">" o un nombre
como los definidos en el apartado anterior. Por ejemplo, en <img
src="foto.gif">, img src es el nombre de la marca que se refiere a insertar una
imagen en la página web; y "foto.gif" es el atributo que hace referencia al
fichero específico de imagen que queremos incluir.
Comentarios :
• Para incluir comentarios en HTML se emplea la declaración de comentarios.

Una declaración de comentarios comienza con <!, le siguen uno o varios
comentarios y termina con >. Cada comentario comienza con -- e incluye todo el
texto hasta la siguiente aparición de -- . Dentro de una declaración de
comentarios, se pueden poner espacios en blanco después de cada uno de ellos,
pero no antes del primero. Toda la declaración del comentario se ignora. En
páginas web complejas, con abundante código html, se utilizan estos
comentarios para señalar partes de la página web que sirvan de orientación para
ubicarse dentro del documento. Por ejemplo, en 
está señalando una parte de la página web en la que empieza el grueso del
texto de la página.
• Esta etiqueta se visualiza dentro del código html pero no tiene una traducción
hacia el formato final. Es decir, no se visualiza en el navegador cliente y sólo se
puede ver si utilizamos la opción Ver/Origen de la Página (en Netscape)
Creación de documentos HTML
• Los documentos HTML son archivos de texto legibles ASCII con códigos de
composición especiales embebidos o incorporados en el texto. Esto significa
que los archivos HTML contienen letras, números, signos de puntuación, etc.,
más los códigos de composición HTML. Insistimos, se pueden leer o modificar
directamente desde el bloc de notas.
• Aunque no es obligatorio, es muy útil utilizar la extensión .HTM al archivar el
documento HTML desde el bloc de notas. Así podrás saber luego de que tipo de
documento se trata. Si utilizas un procesador de texto normal debes utilizar la
opción Guardar como texto ASCII.
Aspecto de documentos HTML:
• Lo que distingue a un archivo HTML de cualquier otro archivo de texto es la

presencia de códigos de composición, denominados marcadores HTML. Estos
códigos se incluyen en el documento y sirve para controlar el formato y la
presentación del documento final. Los códigos también sirven para crear
hipervínculos con otros documentos.
• Los códigos de composición se acotan con unos caracteres especiales, que
permiten diferenciarlos del texto del documento propiamente dicho. Estos
símbolos son los corchetes angulares < y >. Estos códigos no distinguen entre
mayúsculas y minúsculas aunque la mayoría de los autores utilizan mayúsculas
para distinguirlos del resto del texto.
• Los distintos navegadores muestran sus documentos de formas distintas: varía el
color, el tipo de fuente, el tamaño, etc. Por lo tanto debes pensar en tu
documento como una entidad lógica y no física, reconociendo que el aspecto
físico puede variar de un visor a otro y de un PC a otro. Por ejemplo, si
introduces tipos de letra especiales (que se salgan de los corrientes que tienen
todos los PCs, en Arial, Courier, Times o Helvetica) dentro de tu página web,
cuando alguien la "vea" en Internet, visualizará esos tipos de letra si están
instalados en su PC, si no los verá con el tipo de letra que tenga cargado por
defecto en su navegador.
Marcadores o etiquetas HTML obligatorios:
• Marcador <HTML>: todos y cada uno de los documentos HTML deben

empezar y terminar con este marcador que sirve para indicar que se trata de un
documento HTML. En el marcador de cierre es obligatoria la barra inclinada
(/HTML).
• Marcadores <HEAD>: los documentos HTML se dividen en dos partes, la
cabecera y el cuerpo. Los navegadores Web necesitan distinguir entre cabecera y
cuerpo para poder interpretar correctamente los documentos. En general la
cabecera del documento (head) incluye la información general sobre el
documento. Este marcador tienen su marcador de terminación con la barra
inclinada (/HEAD).
• Marcadores <BODY>: incluye el contenido real del documento (body o
cuerpo). Este marcador tiene también su marcador de terminación con la barra
inclinada </BODY>.
En el caso del marcador body puede ir acompañado, no obligatoriamente, del atributo
BGOLOR (Background color) junto con un numero de expresión hexadecimal que
determina un color de fondo plano para la pagina web. Esta función, como veremos
más adelante con el color de los textos está automatizada en la mayoría de editores de
páginas web (incluido Netscape Composer).
Cabecera del documento
Contiene información general sobre el documento HTML. Es obligatorio incluir el
marcador <TITLE>, el resto de los marcadores son opcionales.
• Marcador <TITLE>: los navegadores muestran el título de cada uno de los

documentos HTML que encuentran. El título que aparece se toma del contenido
de este marcador. Este marcador debe aparecer con su pareja con la barra
inclinada </title> y dentro de la sección <HEAD>
• Marcador <META>: este campo de metainformación sirve para proporcionar
información sobre el documento que no pueda ser expresada en el campo
anterior. La información se escribe usando pares nombre/valor que pueden ser
empleados para dos propósitos:
* Proporcionar datos al servidor de HTTP para que genere campos de cabecera (como,
por ejemplo, la fecha de caducidad de un documento que se actualiza periódicamente).
Se emplean atributos del tipo HTTP-EQUIV y para la segunda los del tipo NAME. En
ambos casos, el valor se asigna en el campo CONTENT.
<META HTTP-EQUIV ="Expires" CONTENT="Diciembre

1998">
* Para que un usuario incluya información adicional sobre el documento, como palabras
clave o el nombre del autor. El atributo NAME se refiere a nombres elegidos al azar por
el usuario, mientras que HTTP-EQUIV significa que el valor tiene una cabecera
equivalente real en el protocolo HTTP.
<META NAME="Autor" CONTENT="Cooperacion+Desarrollo+ONGD">
Creación de encabezados, estilos y párrafos
Creación de encabezados :
• Los encabezados se emplean para dividir los documentos en secciones, o más

concretamente para marcar los títulos de esas secciones. Los marcadores son del
tipo <H#>Título</H#>, donde # puede ser un numero cualquiera entre 1 (mayor
tamaño) y 6 (menor tamaño).
• Es recomendable usar los niveles en orden, es decir, después de un encabezado
de nivel uno deberemos usar encabezados de nivel dos para las subsecciones y
no saltar directamente al tres o al cuatro, por ejemplo.
• La representación de los encabezados depende del visor, generalmente se
representan en negrita y van cambiando de tamaño y espacios antes y después,
de más a menos, en función del nivel. Introducen normalmente un salto de línea
automático.
Etiquetas de caracteres y tipos de letra:

• El lenguaje HTML permite asignar formatos de tipos de letra y caracteres. Los
navegadores leen estos marcadores lógicos de tipos de letra de los documentos
HTML y los interpretan conforme a su capacidades.
• Existen multitud de marcadores para indicar que una palabra o frase tiene una
connotación especial y es obligatorio poner los marcadores de cierre al final del
texto afectado. Estos son algunos de los más utilizados
LENGUAJE HTML RESULTADO en navegador

<b>texto en negrita</b> texto en negrita
<i>texto en cursiva o itálica </i> texto en cursiva o itálica
<u>texto subrayado</u> texto subrayado
<b><i><u>combinando las tres anteriores</b></i></u> combinando las tres anteriores
<tt>fuente tipo de máquina de escribir</tt> fuente tipo de máquina de
escribir
Formateo de párrafos o bloques:
• Cada navegador decide en función de las posibilidades gráficas de cada

ordenador las líneas de documento que va a presentar y es posible que ignore los
caracteres fin de línea introducidos. De la misma manera aunque hayas
introducido líneas en blanco en tu documento fuente intentando marcar el final
de párrafos, los navegadores las ignorarán. Tienes que marcar explícitamente los
párrafos.
• El marcador de párrafo es <P> y se coloca al principio de cada nuevo párrafo,
excepto cuando ya hay algún otro salto de línea. El marcador final es opcional
</p>.
• Aunque no son propiamente para definir bloques, hay marcadores para
representar saltos de línea y para insertar una línea horizontal. Ambas permiten
dividir el texto, por lo que las hemos incluido aquí.
• Marcador <BR>: este elemento sólo tiene marca inicial y se usa para que el
visor termine la línea en el punto en el que encuentre. Realiza por lo tanto un
salto de línea sin que aparezca una línea en blanco como en el caso de los
párrafos.
• Marcador <HR>: sólo consta de una marca inicial y se emplea para presentar
una línea horizontal en el texto, ya sea usando caracteres o un gráfico,
dependiendo del visor.
Presentación de textos en color:
• En tus documentos puedes especificar el color del texto. Se utiliza una notación
basada en los colores RGB empleados por todos lo monitores de vídeo en color.
Cada color se especifica utilizando tres números en el rango 0 a 255. La
ausencia total de color, el negro se expresa con 000 y la saturación de los tres
colores, el blanco como 255255255. Entre ambos se definen los demás colores.
Para establecer en HTML color del texto debes convertir a hexadecimal cada
uno de estos números. NO ASUSTARSE!!!! En todos los programas de edición
de páginas web (incluido Netscape) existe una herramienta para escoger el
color del texto (y el del fondo de la página) sin necesidad de estos cálculos. Esta
es una de las funciones que puede resultar engorrosa si se utiliza sólo el bloc de
notas para realizar paginas web. En cualquier caso existen publicadas en
internet tablas de colores y códigos en http://www.reednews.co.uk.colours.html
• Marcador <FONT>: establece con el atributo COLOR el color del texto que
indiques.
<FONT COLOR="4169E1">prueba de color azul</font> prueba de color azul
• Atributo TEXT: en el marcador <BODY> establece el color por defecto del

texto de todo el documento.
<BODY TEXT="4169E1">
Creación de enlaces y vínculos
Hipervínculos:
• Se llaman hipervínculos a las frases o palabras en color que tienen los

documentos HTML y que al pulsar sobre ellos se salta a otro documento del
servidor Web o a un servicio o documento que se encuentre en cualquier otro
punto de la red, en un servidor situado en tu misma localidad o en el extremo
opuesto del planeta.
Marcador ancla <A>:
• Los hipervínculos están basados en este marcador cuya sintaxis general es:
<A ORDEN="objetivo"> Texto resaltado </A>
• Si sustituyes la palabra ORDEN por HREF indicarás un hipervínculo (enlace

externo)
Por ejemplo (enlace externo: <a href="http://www.apc.org">APC</a>)
• Si la sustituyes por NAME apuntas hacia un lugar marcado dentro del mismo
documento (enlace interno). Dependiendo de la sustitución realizada el
OBJETIVO será uno u otro.
Por ejemplo, enlace interno a una parte del propio documento con el nombre indice
<a name="indice"> Indice de documentos </a>
• El texto subrayado o resaltado identifica la frase o palabra que aparecerá en el
documento HTML y que estará ligada con el hipervínculo o lugar a localizar.
Vinculación con documentos locales:
• El hipervínculo más sencillo es aquel que apunta a otro documento que se

encuentra en el mismo equipo y en el mismo directorio
<A HREF="pagina2.htm"> Segunda página Web</A>

•
Si necesitas hacer referencia a un documento que se encuentra en un directorio
distinto, sólo tienes que cambiar la parte del objetivo e incluir en ella la ruta
completa. Utilizando la barra inclinada precedida de dos puntos (/) puedes
establecer la ruta.
<A HREF="../pagina2.htm"> Segunda página Web</A>

En este ejemplo, el documento página2.htm se encuentra ubicado en el
directorio inmediatamente inferior donde se encuentra el documento que
estás editando. Es lo que se donimina enlaces relativos
Vinculación con un punto específico del documento (enlaces internos):
• Como veíamos antes, en el caso de los enlaces internos de un documento,

primero hay que definir el punto objetivo de la vinculación y a continuación se
hace referencia en las partes que queramos a dicho punto. Por ejemplo
<A NAME="indice">Indice</A>
...
...
...
<A HREF="pagina.htm/#indice"> Indice de documentos</A>
En este ejemplo, al pulsar sobre Indice de documentos, slataremos hacia un lugar de la

página que hemos definido con el nombre de indice a través de la etiqueta A NAME
Vinculación de localizadores universales de recursos (enlaces externos):
• Son vínculos hacia documentos o servicios situados en sistemas remotos.

Tendremos que utilizar el Localizador universal de recursos URL para hacer
referencia al documento remoto.
• Los localizadores son la clave para localizar e interpretar información en
Internet. Los URL son una forma estándar de describir tanto la localización de
un recurso en la Red, como su contenido. El lenguaje HTML utiliza una sintaxis
estándar para designar los URL:
Nombredelservicio://hostdeinternet:nnumerodepuert
o/recurso
• Nombre del servicio: servicio que se quiere realizar (http, mail, news, ftp).
• Nombre del host de Internet: lugar donde se encuentra el servicio.
• Número de puerto: opcional.
• Recurso: archivo, documento, marca, etc.
• URL http: acceso a páginas Web de un servidor en la World Wide Web.

Por ejemplo: enlace a la página web de novedades de Nodo50:
<a href="http://www.nodo50.org/novedades.htm">Novedades Nodo50</a>
• URL ftp: acceso a directorios o archivos de un servidor de ftp
Por ejemplo: enlace al servidor de ftp de Nodo50:

<a href="ftp://nodo50.org">FTP</a>
• URL news: acceso a un grupo de noticias .

Por ejemplo: enlace a un grupo de noticias
<a href="news://nodo50.org/reg.mexico">Grupo de noticias reg.mexico</a>
• URL mailto: envío de mensajes de correo

Por ejemplo: enlace a una dirección de correo
<a href="mailto:ayuda@nodo50.org">ayuda@nodo50.org</a>
• URL file: acceso a archivos locales en el PC.

Por ejemplo: enlace a un archivo en el propio PC
<a href="file://pruebas/pagina3.htm">pagina3</a>
Creación de listas
Listas desordenadas o con topos :
Se indica cada elemento de la lista destacándolo con un punto u otro símbolo
tipográfico.
Lista desordenada:
<UL TYPE="tipo">
<LI>Elemento 1</LI>
<LI>Elemento 2</LI>
</UL>
• Marcador <UL>: define comienzo y final de lista desordenada.

○ Atributo TYPE: tipo de topo para cada elemento.
DISC Círculo
SQUARE Cuadrado
HOLLOW Círculo vacío.
CIRCLE
• Marcado <LI> : define cada elemento de la lista. No es obligatorio el marcador

final.
Listas ordenadas o numeradas :
• Se indica cada elemento de la lista con un número de orden.
Lista ordenada:
<OL TYPE="tipo" START="numero">
<LI>Elemento 1</LI>
<LI>Elemento 2</LI>
</OL>
• Marcador <OL>: define comienzo y final de lista ordenada.

○ Atributo TYPE: tipo de numeración empleado.
z1 Números arábigos.
a Letras minúsculas.
A Letras mayúsculas.
i Números romanos en minúsculas.
I Números romanos en mayúsculas.
○ Atributo START: número con el cual comienza la lista.
• Marcado <LI> : define cada elemento de la lista. No es obligatorio el marcador

final.
Listas de glosario :
• Permiten incluir junto a cada elemento una descripción del mismo.
Lista de glosario:
<DL>
<DT>Término 1</DT>
<DD>Dato 1</DD>
<DD>Dato 2</DD>
<DT>Término 2 </DT>
</DL>
• Marcador <DL>: define comienzo y final de lista de glosario.

• Marcado <DT> : define cada término.
• Marcado <DD> : define cada dato.
Listas anidadas :
• Se pueden crear listas anidadas de cada una de las listas vistas anteriormente.
Creación de tablas
Una tabla esta compuesta por filas y columnas de información. No solo permiten tabular
la información sino mantener un mayor control sobre lo que se visualizará en la
pantalla. La intersección de una fila y una columna genera una celda.
<TABLE BORDER=10 WIDTH="90%" ALIGN="justify">

<CAPTION> Título de la tabla</CAPTION>
<TH ALIGN="right">Cabecera columna 1</TH>
<TH ALIGN="right">Cabecera columna 2</TH>
<tr>
<TD ALIGN="center">Fila 1, columna 1</TD>
<TD ALIGN="center">Fila 1, columna 2</TD>
<TR>
<TD ALIGN="left">Fila 2, columna 1</TD>
<TD ALIGN="left">Fila 2, columna 2</TD>
</TR>
</TABLE>
• Marcador <TABLE>: indica que vamos a crear una tabla.

• Atributo BORDER: presenta líneas de separación de celdas así como su ancho
en pixels
• Atributo CAPTION: título de la tabla.
• Atributo WIDTH: anchura de la tabla.
PIXELS Pixeles en pantalla.

RELATIVE Porcentaje de la anchura de página (%)
• Atributo ALIGN en <TABLE>: tipo de alineación
JUSTIFY Ajustar al ancho de la página.

LEFT Izquierda.
RIGHT Derecha.
• Marcador <TH>: cabecera de la tabla. Aparecen en negrita.

• Marcador <TR>: indica el final de una fila.
• Marcador <TD>: indica un dato de la tabla, es decir una celda.
• Atributo ALIGN en <TH>, <TR> y <TD>: tipo de alineación
CENTER Centro.
LEFT Izquierda.
RIGHT Derecha.
En definitiva, el código del principio de este apartado sobre creación de tablas

tendría este resultado:
Título de la tabla
Cabecera columna 1 Cabecera columna 2
Fila 1, columna 1 Fila 1, columna 2
Fila 2, columna 1 Fila 2, columna 2
Añadir imágenes
Adición de imágenes internas:
Son las imágenes que aparecen cuando se visualiza el documento HTML. Los
navegadores sólo pueden visualizar dos tipos de imágenes:
• Imágenes en formato GIF o formato de intercambio de gráficos.

• Imágenes en formato JPG o Joint Photographic Expert Group.
El resto de imágenes (tif, bmp, etc.) se tratan como imágenes externas y sólo se
pueden visualizar con las aplicaciones auxiliares o los plug-ins de los
navegadores
Además de que las imágenes tengan que ser de este tipo, es aconsejable que no tengan
un tamaño superior a 20-25K para evitar que tarden mucho en cargarse y la página web
sea lo suficientemene "ágil". Para ello, es muy importante que la resolución de estas
imágenes no sea superior a 75ppp que es la resolución de la pantalla. Es inútil darles
una mayor resolución (que se aplica en la edición en papel) porque sólo van a ocuparnos
mayor espacio y no por ello se van a poder ver mejor en el monitor.
• Marcador <IMG>: permite incluir una imagen en el documento. No necesita
terminador.
○ Atributo SRC: permite especificar el archivo que contiene la imagen.
○ Atributo ALT: texto alternativo para cuando no se pueda visualizar la
imagen.
○ Atributo ALIGN: alineación física de la imagen.
MIDDLE Alineación centro.

TOP Alineación superior.
BOTTOM Alineación inferior.
LEFT Alineación izquierda.
RIGHT Alineación derecha.
○ Atributos HEIGHT Y WIDTH: tamaño de las imágenes en el

documento (normalemene en pixeles).
○ Atributo BORDER: permite señalar si se quiere enmarcar la imagen o
no, así como el grosor de dicho marco
Un ejemplo de inclusión de imágen en código html incuyendo todos los atributos

mencionados sería:
<img src="prueba.jpg" alt="imagen de prueba" height=20 widht="40 align=right
border=0>
Esta línea de codigo indica que insertamos una imagen tipo jpg llamada prueba, de
20x40 pixeles, sin marco, alineada a la derecha y con un texto alternativo (el que
aparece cuando no se quieren ver imágenes en el navegador o cuando se están
cargando).
Convertir una imagen interna en un hipervínculo:
Basta incluir el marcador de imagen con todos sus atributos entre los marcadores de
ancla (<a href=....></a> . El resultado obtenido es poder pulsar directamente sobre la
imagen para acceder al hipervínculo.
<A HREF="http://wwwnodo50.org"><IMG SRC="logonodo50.gif"></A>
Fondos de imagen:
También se puede establecer que una imagen sea el fondo de un documento HTML
incluyéndose como atributo del marcado del cuerpo (body) del documento HTML.
<BODY BACKGROUND= "fondo.jpg">
Hasta aquí, lo que podríamos denominar como un curso básico para

elaborar páginas web, sin embargo, el lenguaje HTML está provisto de
más códigos y funciones que complican un poco más su elaboración
pero también la hacen más completa. Como ampliación a esta
primera parte de creación de html, hemos elaborado una segunda
parte más avanzada que recomendamos seguir una vez se haya
asimilado esta primera parte
AVANZADO
Creación de pagínas basadas en marcos o "frames
Los marcos son como los trucos de vídeo de pantalla partida que se utilizan
ocasionalmente en programas de televisión para mantener la atención de l@s
espectador@s. En los marcos la ventana del visor se divide en varias secciones
independientes entre ellas y por supuesto interactivas.
En el caso de las páginas web, cada uno de estos marcos suelen contener una página
web con los habituales códigos HTML. Todos estos marcos que componen una web
están referenciados en la página web que los engloba.
Por ejemplo, la siguiente página web básica está compuesta

por dos marcos en columnas que hacen a su vez referencia a dos
páginas web,
web1.htm y web2.htm
<html>
<body>
<FRAMESET COLS="25%,75%/">
<FRAME SRC="web1.htm" NAME="nom">
<FRAME SRC="web2.htm">
</FRAMESET>
</body>
</html>
• Marcador <FRAMESET>: define el marco al que llama un documento

HTML. Tiene marcador de terminación.
• Atributo COLS y ROWS: especifica el tamaño de los divisores verticales y
horizontales de los marcos. Podemos especificar en pixels o en porcentajes
suprimiendo las barras inclinadas y especificando tantos números como
divisiones de la ventana.
• Marcador <FRAME>: define cada uno de los marcos establecidos en
referencia a una página web cada uno de ellos
• Atributo SRC: especificación del URL que define el marco.
Atributo NAME: establece el nombre del marco para posteriores referencias
como la presentación de un vínculo de un marco en otro marco con un nombre
determinado: es un nombre que se da a un frame o marco y no tiene porque ser
el mismo nombre del fichero a que hace referencia dicho marco. Al establecer el
vínculo se incluirá el atributo TARGET, indicando el nombre de marco que debe
presentar el URL seleccionado.
Creación de formularios y scripts CGI
• Además de la inclusión de hipervínculos e imágenes, una de las características

más importantes de HTML es la de pode usar formularios para que el usuario o
la usuaria pueda introducir su información. Un formulario se compone de una
plantilla para recoger un conjuto de datos, la especificación del método de enviar
los datos recogidos y el URL de la acción asociada.
• Es importante señalar que la utilidad de los formularios está limitada al uso de
las páginas junto con servidores, ya que las acciones asociadas son programas,
generalmente scripts de CGI , que deben funcionar en un servidor al cual se le
envían los datos para ser procesados
Declaración de formularios:
MARCADOR <FORM>: establece la definición del formulario. En su interior
aparecen una secuencia de elementos de entrada (INPUT), junto con elementos de
marcado de estructura del documento.
<FORM ACTION="URL" METHOD="método de acceso" ENCTYPE="tipo de codificación">

<INPUT TYPE=TEXT NAME="nom" SIZE=n MAXLENGTH=n VALUE="val">
<INPUT TYPE=PASSWORD NAME="nom" SIZE=n MAXLENGTH=n VALUE="val">
<INPUT TYPE=CHECKBOX NAME="nom" VALUE="val1" CHECKED> texto 1

<INPUT TYPE=CHECKBOX NAME="nom" VALUE="val2"> texto 2
<INPUT TYPE=RADIO NAME="nom""VALUE="val1" CHECKED> texto 1
<INPUT TYPE=RADIO NAME="nom" VALUE="val2"> texto 2
<INPUT TYPE=IMAGE NAME="nom" SRC="mapa.gif">
<INPUT TYPE=HIDDEN NAME="clave" VALUE="val">
<INPUT TYPE=SUBMIT NAME="clave" VALUE="caption">
<INPUT TYPE=RESET NAME="clave" VALUE="caption">
<SELECT NAME="nom">
<OPTION SELECTED>texto 1
<OPTION>texto 2
</SELECT>
<TEXTAREA NAME="nom" ROWS=n COLS=c> texto de varias líneas </TEXTAREA>
</FORM>
• Atributo ACTION: especifica el URL de la acción asociada al formulario. Si

no se especifica, por defecto se asume que el URL es el BASE del documento.
• Atributo METHOD: indica el método de acceso al URL de la acción. El
conjunto de métodos aplicables es función del esquema del URL. Se pueden
emplear los métodos GET y POST, que se describirán más adelante.
• Atributo ENCTYPE: especifica el tipo de codificación para el transporte de los
pares nombre/valor, excepto en los casos en los que el protocolo no imponga
uno. Trataremos este tema en el punto referido a la codificación de los
formularios.
MARCADOR <INPUT>: representa cada uno de los campos de entrada de datos.
• Atributo TYPE: establece el tipo de entrada y por tanto el formato de recogida
de los datos que serán enviados para que el sistema los procese.
TEXT Casillas de texto en blanco.

PASSWORD Casillas de texto para claves.
CHECKBOX Casillas de selección.
RADIO Botones de radio.
IMAGE Pixels de una imagen.
HIDDEN Campos oculto
SUBMIT Botón de envío.
RESET Botón de reinicio.
Casillas de texto en blanco:
○ Atributo NAME: especifica el nombre de la variable que recogerá el

valor del datos y que permitirá su posterior gestión.
○ Atributo SIZE: especifica la cantidad de espacio reservada para este
campo. El valor por defecto depende del visor.
○ Atributo MAXLENGTH: limita el máximo número de caracteres que
pueden ser introducidos en el campo. Si el valor es mayor que el del
atributo SIZE, el visor debe permitir el desplazamiento de la línea. El
número de caracteres por defecto es ilimitado.
○ Atributo VALUE: indica el valor inicial del campo.
Casillas de texto para claves: mismos atributos que las casillas de texto en blanco solo
que el eco en pantalla de los caracteres tecleados son asteriscos.
Casillas de selección: permite la selección no excluyente de una serie de opciones y

dispone de los atributos NAME, SIZE y VALUE además de :
○ Atributo CHECKED: indica que el estado inicial es seleccionado.
Botones de radio: permite la selección excluyente de una serie de opciones y dispone

de los atributos NAME, SIZE, VALUE y CHECKED.
Pixels de una imagen: especifica una imagen para que la muestre el visor y permite la
entrada de dos campos, las coordenadas x e y de un pixel seleccionado de la misma. Los
nombres de los campos son iguales al del campo, añadiendo al final .x e .y. Los
atributos NAME y SRC son necesarios y el campo ALIGN es opcional.
○ Atributo SRC: indica el archivo que contienen el mapa imagen.

○ Atributo ALIGN: tipo de alineación.
Campos oculto: el usuario no interactúa con él, es el atributo VALUE el que especifica
el valor del campo. Tanto el atributo NAME como VALUE son obligatorios.
Botón de envío: opción que enviar los datos al URL servidor.
Botón de reinicio: opción que permite iniciar el formulario con los valores por defecto.
MARCADOR <SELECT>: se emplea para reducir el campo a una lista de valores, es

decir incluye en el formulario una lista desplazable.
• Atributo NAME: especifica el nombre del campo.

• Atributo SIZE: determina el número de ítems visibles. Si se indica tamaño uno,
se suelen presentar como menús desplegables, mientras que si el tamaño es
mayor se suelen presentar como lista con barra de desplazamiento.
• Atributo MULTIPLE: indica que se trata de una lista desplegable.
MARCADOR <OPTION>: representa cada uno de los valores. Los atributos del
elemento son:
• Atributo SELECTED: indica que esta opción está seleccionada inicialmente.

Si ninguna opción tiene este atributo, el visor presenta la primera seleccionada.
• Atributo VALUE: indica el valor a retornar si se selecciona la opción. Si no se
incluye el atributo, se emplea el contenido del elemento.
MARCADOR <TEXTAREA>: representa un campo de texto de múltiples líneas o

área de texto. El contenido del elemento es el valor inicial del campo. La especificación
de filas y columnas sólo se refiere a la dimensión del área visible, pero los programas
cliente pueden permitir sobrepasar los límites mediante barras de desplazamiento.
Generalmente se emplea un tipo de letra de caja fija para mostrar los contenidos del
campo.
• Atributo COLS: número de columnas visibles del área de texto, en caracteres.

• Atributo NAME: nombre del campo.
• Atributo ROWS: número de líneas visibles del área de texto, en caracteres.
Envío y gestión de información

Ahora ya sabemos como obtener información mediante formularios HTML, el concepto
básico es tomar la información introducida en el formulario y pasarla al servidor Web.
La interfaz de pasarela común o CGI es la forma normalizada de conseguir este
objetivo.
Proceso de gestión de un formulario:

• Un visor presenta el documento con los campos en su estado inicial. Según el
tipo de campo, el usuario puede modificar sus valores (seleccionando un campo,
rellenando con texto, etc.). Cuando ha terminado, puede enviarlo empleando un
botón de envío o una selección de pixel en una imagen. En caso de que el
formulario sólo tenga un campo de entrada de texto de una línea, el visor debe
aceptar una pulsación de la tecla de ENTER en ese campo como petición de
envío del formulario.
• En ese momento el visor analiza las entradas en función del método, acción y
tipo de codificación que se especifican como atributos en el marcador de
formulario. Tras este análisis lo envía al servidor Web donde se procesarán los
datos.
• Este servidor procesa la información y devuelve el resultado en forma de
documento HTML que el usuario puede ver. Normalmente el proceso repite la
información que ha introducido el usuario para su verificación antes de ser
enviada realmente.
• Para hacer esto su script CGI no solo debe pasar la información al usuario para
procesarla sino que debe también formatear la salida en HTML, incluso colocar
los marcadores necesarios. El navegador recibe la información formateada y la
visualiza de forma dinámica. .
Atributo ACTION: en los formularios basados en CGI es siempre el nombre de un

programa CGI situado en el servidor Web y normalmente en el directorio cgi-bin.
Atributo ENCTYPE: la codificación por defecto de todos los formularios es, según el
esquema MIME, application/x-www-form-urlencoded. Un conjunto de datos de
formulario se representa del siguiente modo:
• Los nombres de campos y los valores son preprocesados: los espacios son
reemplazados por el símbolo +, y los caracteres son sustituidos como en los
URL, es decir, los caracteres no alfanuméricos se representan con un signo de
porcentaje y dos dígitos hexadecimales que indican el código ASCII del carácter
(%HH). Los saltos de línea (empleados en campos de múltiples líneas), se
representan con pares CRLF (sustituidos por %0D%0A).
• Los campos se listan en el orden en el que aparecen en el documento, con los
nombres separados del valor por el símbolo = y los pares separados entre sí por
el símbolo &. Los campos con valores nulos pueden ser omitidos, en particular,
los campos no seleccionados en entradas booleanas no deben aparecer en los
datos, pero los campos ocultos que tengan el atributo VALUE sí.
Atributo METHOD: el método de consulta depende de los efectos que el formulario

tenga es decir, si el envío va a producir cambios en cualquier documento o programa
que no sea nuestro visor
• Formularios de Consulta, atributo METHOD=GET :

Si el proceso del formulario es idempotente (no produce cambios), el método debe ser
GET. Un ejemplo de este tipo de formularios son las consultas a bases de datos, que no
tienen efectos laterales visibles.
Para procesar un formulario cuyo URL de acción es un URL de tipo HTTP y el método
es GET, el visor genera un URL que comienza con el de la acción al que se le añade un
interrogante (?) y el conjunto de datos codificado con el formato application/x-www-
form-urlencoded visto en el punto anterior. Para acceder a la consulta el visor accede al
URL de la misma manera que lo hace con los que aparecen en los anclajes.
De todos modos, en algunos casos, la codificación de los datos puede generar un URL
extremadamente largo, lo que puede provocar un funcionamiento erróneo con algunos
servidores de HTTP antiguos. Por esta razón, algunos formularios que no tienen efectos
laterales, se escriben usando el método POST.
• Formularios con efectos Laterales, atributo METHOD=POST :

Para formularios con efectos laterales (como uno que modifique una base de datos) se
emplea el método POST.
Para procesar un formulario cuyo URL de acción es de tipo HTTP y el método es
POST, el visor gestiona una transacción de tipo POST del protocolo HTTP, usando el
URL de la acción y el cuerpo de un mensaje de tipo application/x-www-form-
urlencoded como antes. El visor debe presentar la respuesta del HTTP POST de la
misma forma que la respuesta obtenida con el método GET.
• Ejemplo de URL al enviar un formulario :

El usuario rellena los campos y solicita el envío. Supongamos que los valores son:
nombre "Alicia Perez"
genero "F"
numero "4"
idioma "I"
otros "catalan\neuskera"
Entonces el visor gestiona una transacción HTTP POST usando el URL /cgi-bin/post-
query. El cuerpo del mensaje será la siguiente línea:
nombre=Alicia+Perez&genero=F&numero=4&idiomas=I&otros=catalan%0D
%0Aeuskera

Manual HTML

Загружено:

Сведения о документе

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

Manual HTML

Загружено:

Авторское право:

Доступные форматы

¿Qué es el HTML ?

El HTML (Hyper Text Markup Language) es un sistema para estructurar documentos.

Estructura básica de un documento

El documento se hallará situado en algún ordenador al que se pueda acceder a traves de

Cabecera del documento

<META name = "keywords"content = "Fútbol Baloncesto españa">

La directiva <BASE> indica la localización de los ficheros, gráficos, sonidos, etc... a

Cuerpo del documento

background= "nombre de fichero grafico"

bgcolor = "código de color"

text = "código de color"

link = "código de color"

vlink = "código de color"

Juego de caracteres del Documento

Por lo tanto la palabra Informática la podríamos escribir como :

Espaciados y saltos de línea

<P Align=right>Este es un ejemplo de un parrafo Este es un ejemplo de parrafo de

<P Align=center>Este es un ejemplo de parrafo de Este es un ejemplo de parrafo de

<H1>Texto de Prueba</H1> Texto de prueba

<H4>Texto de Prueba</H4> Texto de Prueba

<H5>Texto de Prueba</H5> Texto de Prueba

<H6>Texto de Prueba</H6> Texto de Prueba

Los textos marcados como "cabeceras" provocan automáticamente un retorno de carro

<H3>Página Web</H3>Esta es una página de prueba.

Atributos del Texto

<FONT size = +2 color = "#FF0000 face = "Arial"> Texto de Texto de

Para incluir comentarios en la página Web se utiliza la directiva .

<IMG src="caution.gif" alt= "Cuidado !!" >

Si el visor no pudiese visualizar el gráfico.....

Tenga en cuenta<IMG src="caution.gif"

Tenga en cuenta<IMG src="caution.gif"

Si situamos el ratón encima de la frase y pulsamos, el navegador accederá a la página

Pulsando sobre la imagen se accedería a la pagina situada en http://www.yahoo.com/.

Buscadores Otros Links

Si tu visor tiene la capacidad de gestionar mapas (Netscape 2.x o Ms-Explorer 2.x o

Ahora veamos el efecto producido en la página Web :

Manual de Html Programa Mapthis Archivo de Ayuda

Como encontraste mi página :

Final del formulario

Extensiones del HTML

Si estas utilizando Internet Explorer verás el efecto producido a continuación:

Aquí tienes como sonaría este ejemplo:

La directiva <FRAME> indica las propiedades de cada subventana. Es necesario

JavaScript proporciona los medios para:

• Controlar las ventanas del navegador y el contenido que muestran.

La característica de JavaScript que más simplifica la programación es que, aunque el

Una solución sería utilizar en nuestras macros el subconjunto de funciones comunes a

Las Bases del Lenguaje JavaScript

Hemos de establecer muy claramente la diferencia con el lenguaje JAVA, que se

Todo el código de JavaScript debe explicitarse en la página HTML según el formato:

Observe que el tag (etiqueta) utilizado es <SCRIPT LANGUAGE=...>.....</SCRIPT>.

Fundamentos del JavaScript

Sintaxis del JavaScript

Pulsa aquí para ver cómo se vería esta página.

Como se puede observar, hemos incluido, como se mencionó previamente, el código de

Para usar correctamente el JavaScript en un browser, es importante saber cómo funciona

A partir de su definición ambos elementos se pueden reflejar en JavaScript como los

Sin embargo si lo ponemos antes no funcionará y aparecerá un error por no estar

el browser visualiza en la barra de su ventana dicho título. Si intentamos ahora cambiar

éste no cambiará, ni siquiera generará un error.

Antes de centrarnos en partes internas de un documento, vamos a recordar cómo insertar

Recordemos la opción <SCRIPT LANGUAGE="JavaScript> de especificación de

Lo primero que nos encontramos es la definición en la cabecera de documento de la

1.Mensajes de Alerta - Manejador OnClick