HTML

El HTML (Hyper Text Markup Language) es un lenguaje que sirve para confeccionar documentos de
hipertexto. El hipertexto es una forma de confeccionar documentos estructuradamente y con links (enlaces)
que comunican con otros documentos o a otras fuentes de información que pueden estar en tu propio
sistema o en otro de la red. Estas fuentes de información pueden ser a su vez hipertextos o nó. Además de
texto se puede presentar gráficos estáticos o dinámicos, sonidos, videos, o programas interactivos. Además
del texto con formato (negrita, cursiva, subrallado, distintos tamaños, fuentes, ...) podemos usar tablas,
párrafos tabulados, sangrías, y otros muchos efectos.

¿Por qué usar HTML?

Para verlo sólo hace falta un programa navegador y es independiente de la máquina que se utilice. Puede
hacerse en una máquina pequeña doméstica y tal como está, verse en un potente ordenador o colocarse en
internet, ... Es muy sencillo de utilizar, ocupa pocos recursos, el software que necesita es gratis, es portable
a otros sistemas y práctico para diversos usos. Permite en poco tiempo utilizar todos los elementos
anteriormente mencionados. Prácticamente sólo tiene virtudes. Entre sus defectos podemos mencionar que
al ser tan portable se vé ligeramente diferente en unos sistemas que en otros dependiendo de la resolución
gráfica, la configuración, ...es el precio de la enorme portabilidad.

¿Qué se necesita para trabajar en HTML?

Un editor de texto sencillo.
Un navegador ó browser.
Algo de tiempo para aprenderlo.

¿Como funciona el HTML?

Los efectos y elementos que componen un documento HTML son instrucciones para el visualizador (por eso
no se ve lo mismo con todos los visualizadores dependiendo de comó estén diseñados). Una página escrita
en HTML es texto normal que se acompaña de ciertos códigos para indicar el efecto deseado. A estos
códigos se les llama elementos del lenguaje.

Es importante aclarar que los documentos HTML se pueden escribir con lo que se quiera, siempre que se
guarden en formato Texto y se les coloque la extensión HTML ó HTM. No se trata de renombrarlos como
documentos .htm o .html, sino de usar la opción que los guarda en este formato. El NOTEPAD está en casi
todos los ordenadores tipo windows y trabaja en este formato, pero pueden usarse otros editores como el
Word, Wordperfect, ... o editores especializados como el Frontpage, el Netscape Composer, Hot Metal, ...

¿Como son los Elementos que componen el HTML?.

Los elementos son las instrucciones que forman el lenguaje HTML. La notación de los elementos consiste en
los símbolos < y > que encierran dentro una instrucción. Los elementos pueden ser llenos o vacíos. Los
elementos pueden escribirse tanto en mayúsculas como en minúsculas aunque conviene usar mayúscula
para facilitar el trabajo al lector.

Elementos llenos.
Se forman escribiendo la instrucción correspondiente seguida del texto al que se quiere aplicar la instrucción
y se termina repitiendo la instrucción pero con una barra inclinada inmediatamente antes de la misma.
 Ejemplo: Un texto en negrita, se escribirá:
<B> Texto de prueba </B>.
y este sería el resultado:
Texto de prueba

Elementos vacíos.
Los elementos vacíos se escriben como los llenos, pero no es necesario poner la instrucción repetida al final
con una barra. Esto se debe a que estos elementos no producen un efecto sobre el texto. Generalmente se
utilizan para separar bloques de texto, y por tanto no es necesario indicar su fin. Empiezan y terminan en el
mismo punto.

Ejemplo: Una línea horizontal, se escribirá:

<BR>.
y este sería el resultado:

Elementos con argumento.

Algunos elementos se escriben con argumento (atributos del
elemento). Es como pasarle parámetros a la instrucción.

Ejemplo: Un texto en rojo, se escribirá:

<FONT COLOR="FF0000">Texto de prueba</FONT>
y este sería el resultado:
Texto de prueba

Anidar elementos.

Los elementos pueden anidarse unos con otros, teniendo cuidado de poner los cierres en el lugar adecuado.

Ejemplo: Un texto en rojo en cursiva, se escribirá:

<FONT COLOR="FF0000"><I>Texto de prueba</I></FONT>
y este sería el resultado:
Texto de prueba

escrita en HTML es texto normal que se acompaña de ciertos códigos para indicar el efecto deseado. A
estos códigos se les llama elementos del lenguaje.

Es importante aclarar que los documentos HTML se pueden escribir con lo que se quiera, siempre que se
guarden en formato Texto y se les coloque la extensión HTML ó HTM. No se trata de renombrarlos como
documentos .htm o .html, sino de usar la opción que los guarda en este formato. El NOTEPAD está en casi
todos los ordenadores tipo windows y trabaja en este formato, pero pueden usarse otros editores como el
Word, Wordperfect, ... o editores especializados como el Frontpage, el Netscape Composer, Hot Metal, ...
Estructura de un documento HTML.
Los documentos escritos en HTML quedan divididos os en dos secciones: la cabecera (delimitada por HEAD)
y el cuerpo (delimitada por BODY).

Ejemplo: Un documento sencillo en HTML sería:

<HTML>
<HEAD>
<TITLE> Hola </TITLE>
</HEAD>
<!--Documento simple-->
<BODY>
Hola mundo.
</BODY>
</HTML>
y el resultado sería una página en la que pone "Hola mundo".

El elemento <HTML> </HTML> no es obligatorio. Solo sirve como identificación del tipo de contenido del
fichero para ciertos programas. Es más, la mayoría de los browsers admiten escribir directamente lo que se
escribe dentro del cuerpo, pero desde luego no es nada formal construir las páginas así. También hemos
introducido un comentario que sólo se ven en el texto fuente, pero no en el visualizador con el elemento <!-- -

Extensiones estándar y documentos HTML.

Cuando el browser (o visualizador) recibe un fichero, antes de mostrarlo necesita saber el tipo de contenido
que éste tiene.Si el fichero procede de un servidor http remoto, éste se encargará de decirle al visualizador
cuanto necesite saber, pero si lo que hay que procesar es un fichero local, la única forma de saberlo es por la
extensión del fichero.
La extensión de un fichero son las tres o cuatro letras (depende del sistema operativo con el que se trabaje)
que hay después del nombre del fichero y que están separadas del mismo por un punto.
Algunas extensiones stándard más comunes son:

Icono Extensión Contenido

html
Documento HTML. Contine texto e instrucciones HTML.
htm

Contiene texto plano. El visualizador presentará todo el fichero

text como si fuera un único bloque de texto y no interpretará ninguna
txt instrucción HTML que pudiera llevar. Esto lo hará con cualquier
fichero que lleve una extensión desconocida o no lleve ninguna.

gif Imagen en formato GIF

jpeg
Imagen en formato jpeg.
jpg

xbm Imagen en formato X-Bitmap (blanco y negro).

xpm Imagen en formato X-Bitmap (color).

mpeg
Secuencia de vídeo mpeg.
mpg
 avi Secuencia de vídeo avi.

au Sonido codificado en aiff-encoded.

mid Sonido generado con secuenciadores midi.

exe Fichero binario ejecutable en DOS ó WINDOWS.

hqx Fichero binario ejecutable en Macintosh.

Z Fichero comprimido que contiene uno o más ficheros comprimidos.
zip Es necesaria una herramienta de compresión-descompresión.

En el entorno WWW se utilizan los MIME types (Multipurpose Internet Mail Extension) para definir el tipo de
un fichero transferido. El visualizador determina desde el MIME type cómo hay que tratar cada fichero. Los
visualizadores tienen una configuración de los mapas de tipos aceptables, e instrucciones de cómo proceder
en cada caso. Algunos tipos son tratados directamente por el propio visualizador (p.ej.: htm, gif, txt) mientras
que para otros necesitan de una herramienta auxiliar adecuada, que hay que indicar al visualizador, para que
sea llamada en el momento preciso (p.ej.: zip, mpg, au).

La cabecera y el cuerpo de un documento HTML.

Los documentos escritos en HTML como ya se ha dicho, quedan divididos os en dos secciones: la cabecera
(delimitada por HEAD) y el cuerpo (delimitada por BODY) veamos que se puede hacer en cada uno de ellos.

Cabecera (HEAD) de un documento HTML

En ella, reside información acerca del documento, y generalmente no se ve cuando se navega por él.
En la HEAD se pone el elemento TITLE que es una breve descripción que identifica el documento. Es lo que
se vé en la barra de título de la ventana y lo que el visualizador guarda en su "Bookmark" (o favoritos) que
son los lugares que el usuario considera interesantes y que puede visitar sin necesidad de recordar su
localización. Este elemento es obligatorio.

Otro elemento interesante es el META. Lo que se pone aquí no es visible de forma natural pero es la que se
usa en los motores de búsqueda y otros programas interesantes para ordenar estos ficheros.

Ejemplo: Cabecera de documento HTML que contiene un título, información sobre el

fichero, Que se recarga cada 60 segundos en "http://www.servidor.es/algo.html",
información sobre su autor,información sobre el programa con que se ha generado,
palabras clave y una descripción de la página:
<HEAD>
<TITLE>Head de un documento </TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
<META HTTP-EQUIV="Refresh" CONTENT="60;
URL=http://www.servidor.es/algo.html">
<META NAME="Author" CONTENT="Angel Abellán">
<META NAME="GENERATOR" CONTENT="Mozilla/4.03 [es] (Win95; I)
[Netscape]">
<META NAME="KeyWords" CONTENT="HTML HEAD BODY Aprender">
<META NAME="DESCRIPTION" CONTENT="Página de Ejemplo de Manual
HTML">
</HEAD>

Hay más elementos que pueden aparecer en la HEAD, como ISINDEX, NEXTID, LINK o BASE, pero son de
uso poco frecuente.
Cuerpo (BODY) de un documento.

El cuerpo (BODY) es la otra parte en que se estructura un documento HTML, y es aquí donde reside el
verdadero contenido de la página que va a ser visualizado.:

Ejemplo: Cuerpo de un documento que contiene un refrán con dos palabras en color
rojo:
<BODY>
No

por mucho
<FONT COLOR="FF0000">madrugar </FONT> amanece más
<FONT COLOR="FF0000">temprano</FONT>.

</BODY>

Intencionadamente se ha escrito el ejemplo anterior poniendo espacios en blanco y saltos de línea de forma
anárquica, esto quiere ilustrar que para el navegador omite los saltos de línea y espacios en blanco que se
repiten seguidos y los toma como un único espacio en blanco. Es decir, que si queremos que se vea más de
un espacio en blanco o más, tenemos que usar &nbsp; y si queremos un salto de línea <BR>. El siguiente
ejemplo desde el punto de vista del navegador es el mismo que el anterior.

Ejemplo: Cuerpo de un documento que contiene un refrán con dos palabras en color
rojo y que desde el navegador, se vé igual que el anterior:
<BODY>
No por mucho <FONT COLOR="FF0000">madrugar </FONT> amanece más
<FONT COLOR="FF0000">temprano</FONT>.
</BODY>

Fuentes: Tamaño y Tipos de letra.

Títulos y texto normal.

Cuando se escribe un texto normal este se muestra en el tamaño y fuente predeterminado en el navegador.
Se usa el elemento lleno Hx donde x varía entre 1 y 6, de mayor a menor para tener una jerarquía uniforme
para los títulos o encabezamientos. Después del cierre automáticamente el visualizador
inserta un salto de párrafo.

Ejemplo: Títulos y texto normal:

<H1> Texto de prueba (H1)</H1>
<H2> Texto de prueba (H2)</H2>
<H3> Texto de prueba (H3)</H3>
<H4> Texto de prueba (H4)</H4>
<H5> Texto de prueba (H5)</H5>
<H6> Texto de prueba (H6)</H6>
Texto de prueba
Se verá así:

Texto de prueba (H1)

Texto de prueba (H2)
Texto de prueba (H3)
Texto de prueba (H4)
Texto de prueba (H5)
Texto de prueba (H6)
Texto de prueba
Elemento FONT.

La forma habitual de cambiar los tamaños de letra es utilizar el elemento <FONT > con el atributo SIZE, que
es un número entre 1 y 7. El valor por defecto del texto es 3. También puede usarse poniendo +x ó -x para
que varie su tamaño de forma relativa.

Ejemplo: Cambiar el tamaño de la fuente:

<FONT SIZE=1>A</FONT>
<FONT SIZE=2>A</FONT>
<FONT SIZE=3>A</FONT>
<FONT SIZE=4>A</FONT>
<FONT SIZE=5>A</FONT>
<FONT SIZE=6>A</FONT>
<FONT SIZE=7>A</FONT>
B
<FONT SIZE=+1>B</FONT>
<FONT SIZE=+2>B</FONT>
<FONT SIZE=-1>B</FONT>
<FONT SIZE=-2>B</FONT>

Se verá así:

A A AAA AABBBB B

Se puede cambiar el tamaño por defecto de toda la página con el elemento <BASEFONT SIZE=valor>.
El tipo de letra también puede cambiarse con FACE. Este atributo debe de manipularse con cuidado pues
cabe la posibilidad de que el que visualice la página no disponga de la fuente. Conviene usar las fuentes más
estándar posibles.

Ejemplo: Cambiar el tipo de la fuente:

<FONT FACE="arial">abcdefghijklmnñopqrstuvwxyz 1234567890 ARIAL</FONT>
<FONT FACE="times new roman">abcdefghijklmnñopqrstuvwxyz 1234567890 TIMES
NEW ROMAN</FONT>
<FONT FACE="courier new">abcdefghijklmnñopqrstuvwxyz 1234567890 COURIER
NEW</FONT>
Se verá así:
Abcdefghijklmnñopqrstuvwxyz 1234567890 ARIAL
abcdefghijklmnñopqrstuvwxyz 1234567890 TIMES NEW ROMAN
abcdefghijklmnñopqrstuvwxyz 1234567890 COURIER NEW

También puede cambiarse el color con COLOR seguido de el nombre del color o bién de el código
hexadecimal de la paleta. Puede consultar una tabla con colores y la paleta hexadecimal.

Ejemplo: Cambiar el color de la fuente:

<FONT COLOR="FF0000">Texto rojo</FONT>
<FONT COLOR=Red>Texto rojo</FONT>
Se verá así:
Texto rojo Texto rojo

Los atributos en general son compatibles entre sí y pueden cambiarse varios a la vez:
 Ejemplo: Cambiar la fuente:
<FONT FACE="arial" COLOR="FF0000" SIZE=1>abcdefghijklmnñopqrstuvwxyz
1234567890 </FONT>
Es lo mismo que visualiza:
<FONT FACE="arial" >
<FONT COLOR="FF0000" SIZE=1>
<FONT FACE="arial">
abcdefghijklmnñopqrstuvwxyz 1234567890
</FONT>
</FONT>
</FONT>
Se verá así:
abcdefghijklmnñopqrstuvwxyz 1234567890

Manipulando Fuentes: Estilos.

Podemos presentar el texto con diferentes estilos como negrita, cursiva, subrayado, ... o anidar más de uno a
la vez. Algunos sólo se ven en unos navegadores y otros nó. Por ejemplo el texto parpadeante no se vé en
Iexplorer y sí en Netscape.

Ejemplo: Texto con diferentes estilos:

<B>negrita</B>
negrita
<EM>Enfatizado</EM>
Enfatizado

<STRONG>Realzado</STRONG>
Realzado
<CODE>Código</CODE>
Código

<I>Cursiva(Itálica)</I>
Cursiva(Itálica)
<TT>Teletipo</TT>
Teletipo

<U>Subrayado</U>
Subrayado
<STRIKE>Tachado</STRIKE>
Tachado

<BLINK>Parpadeante</BLINK>
Parpadeante
<ADDRESS>Dirección</ADDRESS>
Dirección

<SUP>Superíndice</SUP>abcd
Superíndiceabcd

<BIG>Grande</BIG>
Grande
<SUB>Subíndice</SUB>abcd
Subíndiceabcd
<SMALL>Pequeño</SMALL>
Pequeño
Párrafos en HTML.

Párrafos.

Los párrafos en HTML se delimitan con el elemento <P> </P> (Paragraph). Frecuentemente no se usa el
cierre </P>, ya que el texto continuará normalmente hasta que encuentre otro salto <P>.Entre los párrafos se
crea automáticamente una línea en blanco. Un párrafo puede alinearse a la izquierda (poe defecto), a la
derecha o al centro usando ALIGN. Respectivamente serían ALIGN=LEFT (por defecto) ALIGN=RIGHT y
ALIGN=CENTER.

Ejemplo: Justificaciones de párrafos:

<P ALIGN=LEFT>
En Internet Explorer además se puede utilizar ALIGN=JUSTIFY que Netscape
Navigator no reconoce y toma el valor por defecto (es decir a la izquierda).
</P>
<P ALIGN=CENTER>
En Internet Explorer además se puede utilizar ALIGN=JUSTIFY que Netscape
Navigator no reconoce y toma el valor por defecto (es decir a la izquierda).
</P>
<P ALIGN=RIGHT>
En Internet Explorer además se puede utilizar ALIGN=JUSTIFY que Netscape
Navigator no reconoce y toma el valor por defecto (es decir a la izquierda).
</P>
<P ALIGN=JUSTIFY>
En Internet Explorer además se puede utilizar ALIGN=JUSTIFY que Netscape
Navigator no reconoce y toma el valor por defecto (es decir a la izquierda).
</P>
y este sería el resultado:

En Internet Explorer además se puede utilizar ALIGN=JUSTIFY que Netscape

Navigator no reconoce y toma el valor por defecto (es decir a la izquierda).
En Internet Explorer además se puede utilizar ALIGN=JUSTIFY que Netscape
Navigator no reconoce y toma el valor por defecto (es decir a la izquierda).
En Internet Explorer además se puede utilizar ALIGN=JUSTIFY que Netscape
Navigator no reconoce y toma el valor por defecto (es decir a la izquierda).
En Internet Explorer además se puede utilizar ALIGN=JUSTIFY que Netscape
Navigator no reconoce y toma el valor por defecto (es decir a la izquierda).

Saltos de líneas.

El elemento <BR> (Break) es un salto de línea sin cambiar de párrafo ni las propiedades en el definidas.

Elemento DIV.

Se comporta como <BR> pero admite justificación con ALIGN=LEFT ALIGN=RIGHT y ALIGN=CENTER
Necesita el cierre </DIV>.

Párrafos tabulados.

El elemento lleno <BLOCKQUOTE> sirve para presentar párrafos tabulados.

Ejemplo: Párrafos tabulados:

<BLOCKQUOTE>
Los seres vivos podemos clasificarlos en:
<BLOCKQUOTE>
Animales. Algunos ejemplos son:
 <BLOCKQUOTE>
La ballena.
</BLOCKQUOTE>
<BLOCKQUOTE>
El elefante.
</BLOCKQUOTE>
</BLOCKQUOTE>
<BLOCKQUOTE>
Vegetales.
<BLOCKQUOTE>
El pino.
</BLOCKQUOTE>
<BLOCKQUOTE>
La alcachofa.
</BLOCKQUOTE>
</BLOCKQUOTE>
</BLOCKQUOTE>
y este sería el resultado:
Los seres vivos podemos clasificarlos en:
Animales. Algunos ejemplos son:
La ballena.
El elefante.
Vegetales.
El pino.
La alcachofa.

Líneas de separación.

El elemento vacío <HR> (por Horizontal Rule) que puede cambiar su apariencia añadiéndole el atributo
<NOSHADE>. Admite dos parámetros: WIDTH (longitud de la línea) y SIZE (anchura de la línea). El valor del
atributo WIDTH se puede expresar en número de puntos (píxels), o en tantos por ciento referidos al ancho
total de la ventana. Se puede indicar su posición respecto a los márgenes de la ventana con los atributos
ALIGN=CENTER (por defecto) ALIGN=LEFT y ALIGN=RIGHT.

Ejemplo: Algunos ejemplos de líneas horizontales, se escribirán:

<HR SIZE=9 ALIGN=LEFT>
<HR WIDTH=80% SIZE=5>
<HR NOSHADE>
y este sería el resultado:

Centrar texto.

Una o varias líneas de texto, pueden estar centradas respecto a los márgenes de la ventana usando el
elemento lleno <CENTER>. Esto afecta sólo al texto que hay entre <CENTER> y </CENTER>, pero no a
todo el párrafo

Textos preformateados.

Como ya se ha dicho anteriormente cuando se escribe un texto en HTML,a la hora de verlo se omiten los
espacios si son más de uno y los saltos de línea y se ven como un único espacio en blanco. Esto puede
evitarse con el elemento lleno <PRE> . Al texto que va dentro del elemento PRE se le pueden aplicar todos
los elementos que se quiera, siempre que sean elementos que no alteren la posición del texto. Por defecto,
los textos preformateados se ven con tipo de letra "courier", es decir de paso fijo y los no preformateados en
"Times New Roman". Estos tipos son configurables desde el visualizador.
 Ejemplo: Texto preformateado:
<PRE>
*******
** **
* * * * Señor
* *
* * * * <FONT COLOR="Red">Simpático</FONT>
* ***** *
* *
********
</PRE>
y este sería el resultado:
*******
** **
* * * * Señor
* *
* * * * Simpático
* ***** *
* *
********

En Netscape se ha implementado un elemento que permite definir espacios en blanco sin utilizar el elemento.
Se trata del elemento <SPACER>. este elemento puede ir acompañado de los atributos TYPE
(HORIZONTAL ó VERTICAL) y SIZE . El valor por defecto es SIZE=0 y TYPE=VERTICAL.

Ejemplo: SPACER en Netscape Navigator:

*****
<SPACER TYPE=VERTICAL SIZE=40>
Las Autoridades Sanitarias ladvierten que el tabaco perjudica seriamente la salud.
*****
<SPACER TYPE=HORIZONTAL SIZE=40>
Las Autoridades Sanitarias ladvierten que el tabaco perjudica seriamente la salud.
y este sería el resultado:
***** Las Autoridades Sanitarias ladvierten que el tabaco perjudica
seriamente la salud. ***** Las Autoridades Sanitarias ladvierten que el
tabaco perjudica seriamente la salud.

Columnas de texto en un documento (sóloNetscape 3.0 o superior).

<MULTICOL> genera columnas al estilo periodístico. Tiene tres atributos: COLS, GUTTER y WIDTH. COLS
Es obligatorio, y determina cuantas columnas deberán aparecer en pantalla. GUTTER Establece el espacio
que habrá entre columnas, medido en pixels (puntos de pantalla). Si se omite, el valor por defecto es 10.
WIDTH sirve para controlar el ancho de todas las columnas definidas respecto al ancho de la pantalla. Las
columnas una por una son siempre del mismo ancho. El parámetro se puede dar en tantos por ciento o en
pixels. Si se omite, el valor por defecto es 100%. Demasiadas columnas y espacio de separación hará que
las columnas se solapen. Dentro de una columna se pueden anidar otras columnas.

Ejemplo: <MULTICOL> en Netscape Navigator:

Dont Let The sun go dawn on me.
<MULTICOL COLS=2 GUTTER=10 WIDTH=100%>
I can't light no more of you darkness<BR>
All my pictures seem to fade to black and white<BR>
I am growing tired and time still before me<BR>
Frozen here on the ladder of my life<BR><BR>
Too late to save myself from falling<BR>
I took a chance and changed your way of life<BR>
 But you misread my meaning when I met you<BR>
Closed the door and left me blinded by the light<BR><BR>
Don't let the sun go down on me<BR>
Althought I search myself, it's always someone else I see<BR>
I'd just allow a fragment of your life to wander free<BR>
But losing everything is like the sun go down on me<BR><BR>
I can't find oh, the right romantic line<BR>
But see me once and see the way I feel<BR>
Don't discard me just because I think I mean you harm<BR>
But these cuts I have oh, they need love to help then heal<BR><BR>
Don't let the sun go down on me<BR>
Althought I search myself, it's always someone else I see<BR>
I'd just allow a fragment of your life to wander free<BR>
But losing everything is like the sun go down on me<BR>
</MULTICOL>

y este sería el resultado:

Dont Let The sun go dawn on me. I can't light no more of you darkness
All my pictures seem to fade to black and white
I am growing tired and time still before me
Frozen here on the ladder of my life
Too late to save myself from falling
I took a chance and changed your way of life
But you misread my meaning when I met you
Closed the door and left me blinded by the light
Don't let the sun go down on me
Althought I search myself, it's always someone else I see
I'd just allow a fragment of your life to wander free
But losing everything is like the sun go down on me
I can't find oh, the right romantic line
But see me once and see the way I feel
Don't discard me just because I think I mean you harm
But these cuts I have oh, they need love to help then heal
Don't let the sun go down on me
Althought I search myself, it's always someone else I see
I'd just allow a fragment of your life to wander free
But losing everything is like the sun go down on me

Listas y Menús.
En HTML se pueden presentar los listados con varios formatos: Ordenados <OL> (numerados),
desordenados <UL> (no numerados al estilo viñetas), directorios <DIR>, menu <MENU> y listados de
definición <DL>. Pueden anidarse como se necesite.

Listados.

Se eleboran con <OL> para los numerados y <UL> para los no numeradas y al final de la lista su
correpondiente cierre. Luego para cada elemento de la lista colacamos un <LI> y al final su correpondiente
cierre (aunque puede omitirse). Con TYPE, en las listas numeradas podemos cambiar las viñetas (sólo en
Netscape con valor por defecto DISC) y en las no numeradas que en vez de números salgan letras ó
números romanos (valor por defecto 1 que se refiere a números). También podemos indicar en las listas
numeradas por que elemento empiezan con START.

Ejemplo: Algunos ejemplos de listas:

Listas numeradas
Listas no numeradas

Se escribe
Se ve
Se escribe
Se ve
<OL>
<LI>Primero.</LI>
<LI>Segundo.</LI>
</OL>
Primero.
Segundo.
<UL>
<LI>Primero.</LI>
<LI>Segundo.</LI>
</UL>
Primero.
Segundo.

<OL TYPE=A>
<LI>Primero.</LI>
<LI>Segundo.</LI>
</OL>
Primero.
Segundo.
<UL TYPE=CIRCLE>
<LI>Primero.</LI>
<LI>Segundo.</LI>
</UL>
Primero.
Segundo.

<OL TYPE=a>
<LI>Primero.</LI>
<LI>Segundo.</LI>
</OL>
Primero.
Segundo.
<UL TYPE=SQUARE>
<LI>Primero.</LI>
<LI>Segundo.</LI>
</UL>
Primero.
Segundo.

<OL TYPE=I>
<LI>Primero.</LI>
<LI>Segundo.</LI>
</OL>
Primero.
Segundo.

<OL TYPE=i>
<LI>Primero.</LI>
<LI>Segundo.</LI>
</OL>
Primero.
Segundo.
<OL START=20>
<LI>Primero.</LI>
<LI>Segundo.</LI>
</OL>
Primero.
Segundo.
 Menús y Directorios.

Un menú, un directorio y una lista desordenada son practicamente lo mismo, la teórica diferencia, es que las
líneas en la lista desordenada comienzan en el margen izquierdo y las del menú unas posiciones más a la
derecha (con Netscape e Iexplorer se ven igual).

Ejemplo: Menús:
<MENU>
<LI>Primero.
<LI>Segundo.
</MENU>
<UL>
<LI>Primero.
<LI>Segundo.
</UL>
<DIR>
<LI>Primero.
<LI>Segundo.
</DIR>
Se vé:
Primero.
Segundo.
Primero.
Segundo.
Primero.
Segundo.

Listas de definición.

Es una lista de términos (después de DT) y sus correspondientes definiciones (después de

DD).

Ejemplo: Menús:
<DL>
<DT>Término 1<DD>Su definición.
<DT>Término 2<DD>Su definición.
</DL>
Se vé:
Término 1
Su definición.
Término 2
Su definición.

Tablas.

En HTML se pueden conseguir multitud de efectos con las tablas. al principio pueden resultar algo confusas
pero con un poco de tiempo y maña se vuelven un aliado potentísimo que permite controlar mucho más el
resultado final de nuestro documento independientemente del visulizador y su configuración.

El elemento básico dentro del cual están todos los demás es <TABLE> </TABLE> que tiene un montón de
atributos. Dentor de él, lo básico es la construcción de las filas y las columnas. Se utilizan los elementos
<TD> </TD> (filas) y <TD> </TD> (columnas). La cabecera de la fila puede hacerse con <TH> </TH> y se
resaltará el texto de la misma. Las tablas pueden anidarse una dentro de otra.
 Ejemplo: Una tabla normal con tres filas y dos columnas:
<TABLE>
<TR>
<TD>
Fila 1, Columna 1
</TD>
<TD>
Fila 1, Columna 2
</TD>
</TR>
<TR>
<TD>
Fila 2, Columna 1
</TD>
<TD>
Fila 2, Columna 2
</TD>
</TR>
<TR>
<TD>
Fila 3, Columna 1
</TD>
<TD>
Fila 3, Columna 2
</TD>
</TR>
</TABLE>
Se vería:

Fila 1, Columna 1
Fila 1, Columna 2

Fila 2, Columna 1
Fila 2, Columna 2

Fila 3, Columna 1
Fila 3, Columna 2

Atributos.

El elemento <TABLE> tiene los siguientes atributos.

BORDER: Dibuja bordes alrededor de las celdas. Se puede utilizar con el valor en pixels que se desee.
CELLSPACING=<valor>: Controla en pixels el espacio entre celdas..
CELLPADDING=<valor>: Controla en pixels el espacio entre los datos de las celdas y la tabla en sí.
WIDTH=<valor o porcentage>: Anchura que tendrá la tabla en valor absoluto o con tanto por ciento respecto
al documento HTML.
HEIGHT=<valor o porcentage>: Altura que tendrá la tabla en valor absoluto o con tanto por ciento respecto al
documento HTML.
ALIGN: Alínea horizontalmente el, contenido de la tabla al centro, a la derecha o a la izquierda. El valor por
defecto es centrado. Puede valer left, right o center.
VALIGN: Alínea verticalmente el, contenido de la tabla al centro, a la derecha o a la izquierda. El valor por
defecto es centrado. Puede valer top, middle o bottom.
BGCOLOR: Permite especificar el color de fondo de la tabla.
BORDERCOLOR: Permite especificar el color de los bordes de la tabla.
BACKGROUND: Permite introducir una imagen de fondo.
Además de en la tabla los atributos: WIDTH, HEIGHT, BGCOLOR, y BORDERCOLOR pueden utilizarse en
los elementos <TH>, <TR> y <TD>. También tenemos <CAPTION> que sirve para poner un texto arriba (con
VALIGN=top) o abajo (VALIGN=top) alineado como queramos (ALIGN).

Ejemplo: Una tabla con algunos efectos:

<TABLE BORDER=5 CELLSPACING=3 WIDTH="90%" BGCOLOR="#00FF00" >
<TR>
<TD WIDTH="30%">Fila 1, Columna 1</TD>
<TD WIDTH="70%">Fila 1, Columna 2, Fila 1, Columna 2,Fila 1, Columna 2
Fila 1, Columna 2, Fila 1, Columna 2, Fila 1, Columna 2,
Fila 1, Columna 2, Fila 1, Columna 2</TD>
</TR>
<TR>
<TD VALIGN=TOP>
Fila 2, Columna
1</TD>
<TD>Fila 2, Columna 2, Fila 2, Columna 2,
Fila 2, Columna 2, Fila 2, Columna 2, Fila 2, Columna 2
Fila 2, Columna 2, Fila 2, Columna 2,
Fila 2, Columna 2, Fila 2, Columna 2, Fila 2, Columna 2
</TD>
</TR>
<TR>
<TD BGCOLOR="#0000FF">Fila 3, Columna 1</TD>
<TD BGCOLOR="#FF0000">Fila 3, Columna 2</TD>
</TR>
</TABLE>
Se vería:

Fila 1, Columna 1
Fila 1, Columna 2, Fila 1, Columna 2,Fila 1, Columna 2 Fila 1, Columna 2, Fila 1,
Columna 2, Fila 1, Columna 2, Fila 1, Columna 2, Fila 1, Columna 2

Fila 2, Columna 1
Fila 2, Columna 2, Fila 2, Columna 2, Fila 2, Columna 2, Fila 2, Columna 2, Fila 2,
Columna 2 Fila 2, Columna 2, Fila 2, Columna 2, Fila 2, Columna 2, Fila 2, Columna 2,
Fila 2, Columna 2

Fila 3, Columna 1
Fila 3, Columna 2

Unir celdas: COLSPAN y ROWSPAN.

Es frecuente que necesitemos en alguna parte de la tabla, que más de una columna de la tabla se fundan en
una sola. Si queremos que una celda ocupe el espacio de más de una columna se pone COLSPAN=valor
(donde valor es el número de columnas) como atributo en el elemento <TD>. De forma parecida sucede con
las filas con ROWSPAN.

Ejemplo: Hacer una tabla expandiendo columnas y filas:

</CENTER><TABLE BORDER>
<TR> <TD><TH ROWSPAN=2></TH>
<TH COLSPAN=2>Media</TH></TD>
</TR>
<TR> <TD><TH>Altura</TH><TH>Peso</TH></TD>
</TR>
<TR> <TH ROWSPAN=2>Sexo</TH>
 <TH>Hombres</TH><TD>1.9</TD><TD>85</TD>
</TR>
<TR> <TH>Mujeres</TH><TD>1.7</TD><TD>60</TD>
</TR>
</TABLE></CENTER>
Se vería:
Media
Pes
Altura
o
Hombre
Sex s 1.9 85
o
Mujeres 1.7 60
Enlaces (Links).

Lo que ha hecho tan importante al HTML ha sido la posibilidad de "navegar" de uno a otro documento
(independientemente de donde se ubique) sin que el usuario tenga que cambiar su forma de trabajo ni
precuparse de ello. Para ello se utiliza el elemento <A> (Anchor, ancla o punto de anclaje) que genera los
puntos de salto de un documento a otro llamados enlaces, hiperenlace o links (eslabón). Los links pueden ser
texto o imágenes que el visualizador marca automáticamente y que cambia el puntero del ratón .

Atributo HREF.

HREF indica el lugar al que se va a saltar al hacer clic sobre el enlace. Es necesario escribir el nombre de
forma correcta y respetando mayúsculas y minúsculas. Si no lo hacemos posiblemente funcionará en nuestro
ordenador pero nó en Internet.

Ejemplo: Típico hiperenlace:

<A HREF="http://www.servidor.es/fichero.html">Link </A>.

Este hiperenlace mostrará un salto al documento fichero.html en la máquina

http://www.servidor.com Otro típico hiperenlace dentro de una frase sería el
siguiente:
A mi me gustan las motos <A HREF="http://www.honda.com">Honda</A> y los
coches <A HREF="http://www.renault.es">Renault</A>.
Obsérvese que en estos últimos enlaces no se pone el fichero, esto no quiere decir
que no se acceda a un fichero, sino que el propio servidor "sugiere" uno que suele ser
index.html, con lo que cuando ponemos <A HREF="http://www.servidor.es">Link
</A>. suele equivaler a <A HREF="http://www.servidor.es/index.html">Link </A>. Si
un servidor no tiene definida página inicial, nos mostrará una lista de todos los ficheros
y directorios que tenga en el directorio definido como raíz o un mensage de error.

El servicio más habitual al que se hiperenlaza es un documento de hipertexto escrito en html en un servidor
tipo http. También se puede hiperenlazar con otros servicios como:

Se
Servicio Ejemplo
Antepone
http:// Servicios WWW <A HREF="http://www.forodigital.es/"> ForoDigital</A>
<A HREF="ftp://ftp.um.es/">FTP de la Universidad de
ftp:// Servicios FTP Murcia</A>
<A HREF="gopher://gopher.uv.es/">GOPHER de la
gopher:// Servicios GOPHER Universidad de Valencia</A>
<A HREF="news://news.uv.es/">NEWS de la Universidad
news:// Servicios NEWS de Valencia</A>
<A
mailto:// Servicios E-mail HREF="mailto:[email protected]">Angel</A>
file:///C| <A HREF="C:\Trabajo\Economía\Cuentas.html">Cuentas
Fichero en el disco duro C: amuales</A>
(Netscape)
 C:
(Iexplorer)
Fichero local de el
ordenador que está
- ejecutando el código HTML <A HREF="Coste.html">Coste de producción</A>
en su propio disco duro o en
su site de internet

Al referenciar un fichero y anteponiendo (si procede) el servicio se puede cambiar el directorio donde se
ubican los ficheros con el PATH ruta o vía de acceso. Al cambiar el PATH, es importante utilizar la barra /
para indicar directorios en lugar de \ que es la tradicional en algunos sistemas operativos. En su ordenador
funcionará con una o con otra pero en un servidor http nó.

Ejemplo: Hiperenlace cambiando el directorio:

Puede consultar las <A
HREF="http://www.servidorNoticias.es/Deportes/Futbol.html">Noticias de fútbol</A>.
Hiperenlace local cambiando el directorio hacia el anterior (..) y luego metiéndose en
otro que se llama "Trabajos":

En mi casa hago cursos sobre <A

HREF="../Trabajos/Electronica.html">electrónica</A> y <A
HREF="../Trabajos/Fisica.html">física</A>.

Un consejo de diseño. Si se referencia los archivos como locales será muy fácil colocar su estructura de
documentos HTML en otra máquina o en internet. Esto es lo que se llaman direcciones relativas. Si nó,
cuando se coloque en otro sitio, al cambiar el directorio o servidor, habrá que cambiar todos los enlaces.

También se utiliza el atributo TARGET para abrir otra ventana (nueva o nó) o otro FRAME (se verá lo que
son los frames más adelante).

Atributo NAME.

El atributo NAME es una etiqueta que se coloca en cualquier línea del documento HTML y crea un destino.
Luego puede hacerse un hiperenlace desde ese u otro documento que cuando carge esa página se empiece
a ver desde ese punto. Esto es muy útil para hacer índices en documentos largos.

Ejemplo: Hiperenlaces dentro de un documento con destinos(Nomenclatura

Netscape). El documento base si se llama "Ejemplo002.html" y es este:
<HTML>
<HEAD>
<TITLE> Hola </TITLE>
</HEAD>
<!--Documento con destinos-->
<BODY>
<A NAME="Casa"></A>
<BR>Hola Casa.<BR><BR><BR><BR><BR>
<A NAME="Ciudad"></A>
<BR>Hola Ciudad.<BR><BR><BR><BR><BR>
<A NAME="Pais"></A>
<BR>Hola Pais.<BR><BR><BR><BR><BR>
<A NAME="Planeta"></A>
<BR>Hola Planeta.<BR><BR><BR><BR><BR>
<A NAME="Universo"></A>
<BR>Hola Universo.<BR><BR><BR><BR><BR>
<BR><BR><BR><BR><BR>
 <BR><BR><BR><BR><BR>
<BR><BR><BR><BR><BR>
<BR><BR><BR><BR><BR>
</BODY>
</HTML>
Entonces los hiperenlaces a cada uno de los destinos desde un fichero local en el
mismo directorio serían (Puede pulsarse en el * de la derecha para probarlo):

<A HREF="Ejemplo002.html#Casa"> Ir al destino Casa</A> *

<A HREF="Ejemplo002.html#Ciudad"> Ir al destino Ciudad</A> *
<A HREF="Ejemplo002.html#Pais"> Ir al destino Pais</A> *
<A HREF="Ejemplo002.html#Planeta"> Ir al destino Planeta</A> *
<A HREF="Ejemplo002.html#Universo"> Ir al destino Universo</A> *

Ejemplo: Hiperenlaces de un documento con destinosdentro de el mismo si se llama

"Ejemplo003.html" . No se necesita poner el nombre del fichero pero puede hacerse:
<HTML>
<HEAD>
<TITLE> Hola </TITLE>
</HEAD>
<!--Documento con destinos-->
<BODY>
INDICE<BR>
<A HREF="Ejemplo003.html#Casa"> Ir al destino Casa</A><BR>
<A HREF="Ejemplo003.html#Ciudad"> Ir al destino Ciudad</A><BR>
<A HREF="Ejemplo003.html#Pais"> Ir al destino Pais</A><BR>
<A HREF="#Planeta"> Ir al destino Planeta</A><BR>
<A HREF="#Universo"> Ir al destino Universo</A><BR>
<A NAME="Casa"></A>
<BR>Hola Casa.<BR><BR><BR><BR><BR>
<A NAME="Ciudad"></A>
<BR>Hola Ciudad.<BR><BR><BR><BR><BR>
<A NAME="Pais"></A>
<BR>Hola Pais.<BR><BR><BR><BR><BR>
<A NAME="Planeta"></A>
<BR>Hola Planeta.<BR><BR><BR><BR><BR>
<A NAME="Universo"></A>
<BR>Hola Universo.<BR><BR><BR><BR><BR>
<BR><BR><BR><BR><BR>
<BR><BR><BR><BR><BR>
<BR><BR><BR><BR><BR>
<BR><BR><BR><BR><BR>
</BODY>
</HTML>
Puede verlo pulsando aquí.

El nombre de los destinos no debe de tener espacios en blanco ni caracteres especiales ni caracteres
codificados. Tampoco debe de repetirse en el mismo documento. Ante un destino incorrecto el navegador
nos presentará en la primera línea.
Otros aspectos a tener en cuenta.

Se puede hacer un enlace además de un documento HTML, sobre una imagen, video o cualquier
documento. Según como este el configurado el navegador activará directamente la aplicación asociada o
preguntará si desamos guardarlo en nuestro disco. Lo habitual es que muestre las imágenes directamente y
lo demás que consulte al usuario.

Más cosas sobre el BODY

En el cuerpo de un documento (BODY) puede definirse el color de fondo con BGCOLOR ó una imagen de
fondo con BACKGROUND (puede consultar como hacer referencia a las imágenes en la sección de links).
También puede cambiarse el color predeterminadao para el texto con TEXT. También puede cambiarse el
color de los Links antes de ser activados, al ser activados y después de ser activados (con LINK, VLINK y
ALINK respectivamente).

Ejemplo: Un posible BODY:

<BODY BGCOLOR="#000000" TEXT="#FFFFFF" LINK="#00FF00"
VLINK="#00FFFF" ALINK="#FFFF00" BACKGROUND="../jpg/fondo.jpg">

Imágenes.

Además de los links y del texto, la posibilidad de insertar imágenes en un documento ha hecho del WWW lo
que actualmente es. Se utiliza el elemento <IMG>. Las imágenes utilizadas pueden estar en formato GIF o
JPG. Estos formatos son interpretados directamente por el visualizador aunque se puede usar cualquier otro
formato, pero entonces el visualizador llamará a un programa auxiliar, previamente configurado, para que sea
éste el que visualice el fichero. Los formatos GIF y JPG son formatos comprimidos que hacen que la
velocidad de transmisión de la red no sea tan importante como si se usasen formatos no comprimidos.
Atributo ALT.

Define un texto alternativo que aparece en lugar de la imagen si el navegador no puede mostrar la imagen
por:
No estar disponible.
No tener capacidad para mostrar imágenes
Estar configurado para no mostrar imágenes.

Ejemplo: Imágen visible e imagen que no se vé porque no está :

<IMG SRC="bugs.gif" ALT="Bugs Bunny">
<IMG SRC="Noesta.gif" ALT="No está">
Se vé:

Atributo ALIGN.

Alínea la imagen respecto al texto. Los valores posibles son LEFT, RIGHT. Cuando se alínea así puede
usarse <BR CLEAR> para "salir" de este formato.
 Ejemplo: Imágen alineada de diversas formas:
<IMG SRC="Calvin.gif" ALT="Calvin" > Calvin Calvin Calvin
Calvin Calvin Calvin Calvin Calvin
Calvin Calvin Calvin Calvin Calvin
Calvin Calvin Calvin Calvin Calvin
Calvin Calvin Calvin Calvin Calvin
<BR CLEAR> Calvin Calvin<BR><BR>
<IMG SRC="Calvin.gif" ALT="Calvin" ALIGN=LEFT> Calvin Calvin Calvin
Calvin Calvin Calvin Calvin Calvin
Calvin Calvin Calvin Calvin Calvin
Calvin Calvin Calvin Calvin Calvin
Calvin Calvin Calvin Calvin Calvin
<BR CLEAR> Calvin Calvin<BR><BR>
<IMG SRC="Calvin.gif" ALT="Calvin" ALIGN=RIGHT> Calvin Calvin Calvin
Calvin Calvin Calvin Calvin Calvin
Calvin Calvin Calvin Calvin Calvin
Calvin Calvin Calvin Calvin Calvin
Calvin Calvin Calvin Calvin Calvin
<BR CLEAR> Calvin Calvin
Se vé (las dos primeras igual):

Calvin Calvin Calvin Calvin Calvin Calvin Calvin Calvin Calvin

Calvin Calvin Calvin Calvin Calvin Calvin Calvin Calvin Calvin Calvin
Calvin Calvin Calvin Calvin
Calvin Calvin
Calvin Calvin Calvin Calvin Calvin Calvin Calvin Calvin Calvin Calvin
Calvin Calvin Calvin Calvin Calvin Calvin Calvin Calvin Calvin Calvin
Calvin Calvin Calvin
Calvin Calvin
Calvin Calvin Calvin Calvin Calvin Calvin Calvin Calvin Calvin Calvin
Calvin Calvin Calvin Calvin Calvin Calvin Calvin Calvin Calvin Calvin
Calvin Calvin Calvin
Calvin Calvin

En Netscape también funciona MIDDLE, BOTTOM o TOP.

Ejemplo: Imágen alineada de diversas formas (Netscape):

<IMG SRC="Calvin.gif" ALT="Calvin" ALIGN=TOP> Calvin
<IMG SRC="Calvin.gif" ALT="Calvin" ALIGN=BOTTOM> Calvin
<IMG SRC="Calvin.gif" ALT="Calvin" ALIGN=MIDDLE> Calvin
Se vé:

Calvin Calvin Calvin

Atributo BORDER.

Inserta un marco de el número de pixels deseado.

 Atributos WIDTH y HEIGTH.

Estyos atributos permite prefijar el tamaño de la imagen. Es conveniente poner las imágenes
al tamaño al que se van a visualizar. Si están disponibles más grandes o pequeñas, cambiar su tamaño con
un programa de dibujo hará que el usuario las vea mejor.

Ejemplo: Imágen a su tamaño, aumentada y reducida con diferentes marcos:

<IMG SRC="Calvin.gif" WIDTH=37 HEIGTH=37 BORDER=2>
<IMG SRC="Calvin.gif" WIDTH=57 HEIGTH=57 BORDER=10>
<IMG SRC="Calvin.gif" WIDTH=17 HEIGTH=17 BORDER=0>

Se vé:

Atributos HSPACE y VSPACE.

Espacios verticales y horizontales vacíos forzados.

Ejemplo: Imágen con espacios verticales y horizontales vacíos forzados:

Calvin Calvin Calvin Calvin Calvin Calvin Calvin Calvin Calvin Calvin Calvin Calvin
Calvin Calvin Calvin Calvin Calvin Calvin Calvin Calvin Calvin Calvin Calvin Calvin
<IMG SRC="Calvin.gif" ALIGN=LEFT NOSAVE HSPACE=150 VSPACE=6> Calvin
Calvin Calvin Calvin Calvin Calvin Calvin Calvin Calvin Calvin Calvin Calvin Calvin
Calvin Calvin Calvin Calvin Calvin Calvin Calvin Calvin Calvin Calvin Calvin Calvin
Calvin Calvin Calvin Calvin Calvin Calvin Calvin Calvin Calvin Calvin Calvin Calvin
Calvin Calvin Calvin Calvin Calvin Calvin Calvin Calvin Calvin Calvin Calvin Calvin
Calvin Calvin Calvin Calvin Calvin Calvin Calvin Calvin Calvin Calvin Calvin Calvin
Calvin

Se vé:
Calvin Calvin Calvin Calvin Calvin Calvin Calvin Calvin Calvin Calvin
Calvin Calvin Calvin Calvin Calvin Calvin Calvin Calvin Calvin Calvin
Calvin Calvin Calvin Calvin Calvin Calvin Calvin Calvin Calvin Calvin
Calvin Calvin Calvin Calvin Calvin Calvin Calvin Calvin Calvin Calvin
Calvin Calvin Calvin Calvin Calvin Calvin Calvin Calvin Calvin Calvin
Calvin Calvin Calvin Calvin Calvin Calvin Calvin Calvin Calvin Calvin
Calvin Calvin Calvin Calvin Calvin Calvin Calvin Calvin Calvin Calvin
Calvin Calvin Calvin Calvin Calvin Calvin Calvin Calvin Calvin Calvin
Calvin Calvin Calvin Calvin Calvin Calvin

Imágenes y Enlaces.

Podemos conjugar imágenes y enlaces simplemente tratando a las imágenes como si fuesen texto o
conjugarlos con algunas variantes interesantes. Si sólo se pone un enlace la imagen se marca con un borde.
Este borde puede eliminarse poniendo a la imagen el atributo BORDER=0.

Ejemplo: Imágen con enlace con y sin marco:

Este conejo
<A HREF="Imagenes2.html"><IMG SRC="bugs.gif" HEIGHT=37 WIDTH=37 ></A>
se llama Bugs.
Y este otro
<A HREF="Imagenes2.html"><IMG SRC="bugs.gif" BORDER=0 HEIGHT=37
WIDTH=37 ></A>
 tambi&eacute;n.
Se vé:

Este conejo se llama Bugs. Y este otro también.

Mapeado de una imagen.

Utilizando un sistema de coordenadas que tiene su origen en la parte superior izquierda y que aumenta las
ordenadas hacia abajo y las abcisas hacia la derecha podemos controlar que según la parte de la imagen
que se seleccione salte a un lugar o a otro. Hay que crear el mapa marcando las zonas como veremos a
continuación. y luego añadir el atributo USEMAP a la imagen indicándole que use el mapa que acabamos de
definir.

Ejemplo: Imágen con mapa. Para hacer la prueba del mapa según se pulse las
orejas, cabeza o el cuerpo irá a uno u otro elemento de la lista.
Orejas
Cabeza
Cuerpo
El código sería:
<MAP NAME="Mapa">
<AREA SHAPE="rect" COORDS="1,1,88,50" HREF="Imagenes2.html#orejas">
<AREA SHAPE="rect" COORDS="1,51,88,95" HREF="Imagenes2.html#cabeza">
<AREA SHAPE="rect" COORDS="1,96,88,141" HREF="Imagenes2.html#cuerpo">
</MAP>
<IMG SRC="bugs.gif" USEMAP="#Mapa">
Se vé:

Si un área no queremos que tenga link se definirá con NOHREF. A una misma imagen se le pueden aplicar
distintos mapas si se desea.

Imágenes animadas: El formato GIF89A.

Existe un formato de imagen que incluyen varias imágenes a la vez, un tiempo de pausa entre ellas,
repetición automática ( o no) y efectos en el intercambio entre una y otra. Es el formato GIF89A. Podemos
utilizar diversos editores de imágenes a tal efecto, cogerlas ya hechas de diverosos sites en internet que
incluyen una gran cantidad de ellas, o comprar CDROMS que las contengan.

Se trabaja con ellas de la misma forma que con una imagen fija. No se requiere ningun tipo de componente
adicional que las gestione y si el visualizador no las soporta, sólo se ve la primera o la última la secuencia.
Por si esto fuera poco, el formato GIF89A tiene la posibilidad de definir un color como transparente
(independientemente de que sea animada o nó) y permite que las imágenes se fundan con el fondo
dejándolo ver en la zona que no interese.

Ejemplo: Algunas imágenes animadas con fondo transparente:

Imágenes con fondo transparente:

Sonidos.

Con el elemento <EMBED>, pueden usarse ficheros de sonido con los formatos WAV, AIFF, AU o MIDI, pero
los más utilizados normalmente son los WAV o los MID.

Atributos SRC, WIDTH, HEIGHT, AUTOSTART, HIDDEN, LOOP y ALIGN.

SRC indica dónde está el fichero de sonido. Necesita los atributos del que definen el tamaño de la consola
(icono parecido a los botones de un reproductor pequeño). Son WIDTH (largo) y HEIGHT (alto). Los tamaños
por defecto no permiten ver la consola entera, y no es posible activar el sonido.

Los tamaños máximos en Netscape son WIDTH=145 y HEIGHT=60 ( HEIGHT=15 para la pequeña) (no
interesa pasarse pues no aumante más que eso). Estos tamaños varian dependiendo del navegador.

El atributo AUTOSTART puede asignársele TRUE para que se active automáticamente la música (por
defecto es FALSE). Con LOOP se controla el número de veces que se repite la melodía. Puede valer FALSE
(por defecto), TRUE que fuerza a la repetición sin fin de la audición, o un entero que indica el número de
veces que se repite. Si deseamos que la consola no sea visible usaremos HIDDEN = TRUE (por defecto es
FALSE).

Usando el atributo ALIGN y sus valores TOP, BOTTOM, CENTER, LEFT, RIGHT, MIDDLE y TEXTTOP
podemos alinear la consola como cuando se trabja con imágenes.

Ejemplo: Música en HTML:

<EMBED SRC="mane.mid" WIDTH=145 HEIGHT=60>
Se vé:

Atributos VOLUME, CONTROLS,... (En Netscape)

En Netscape, el volumen puede cambiarse con VOLUME y puede oscilar entre 0 y 100. La consola en
ocasiones también permite cambiar el volumen manualmente. Es posible cambiar el aspecto de la consola
con el atributo CONTROLS que puede tener varios valores: CONSOLE (por defecto) o SMALLCONSOLE.

Ejemplo: Música en HTML (En Netscape):

<EMBED SRC="mane.mid" WIDTH=145 HEIGHT=60>
<EMBED SRC="mane.mid" WIDTH=145 HEIGHT=15
CONTROLS=SMALLCONSOLE VOLUME=100>
 Se vé:

Los otros valores de CONTROLS son: PLAYBUTTON, PAUSEBUTTON, STOPBUTTON y VOLUMELEVER.

Sus tamaños máximos son 37x22. Sólo es posible utilizar un valor por cada elemento EMBED. Si se quiere
usar más de uno botón en distintos lugares de la página, pero actuando sobre el mismo fichero de sonido, se
usa el atributo MASTERSOUND en combinación con NAME. Se puede definir en la misma página más de
un grupo de sonidos cambiando el NAME.

Ejemplo: Música en HTML:

<EMBED SRC="mane.mid" WIDTH=37 HEIGHT=22 CONTROLS=PLAYBUTTON
NAME="sonido" MASTERSOUND>
<EMBED SRC="mane.mid" WIDTH=37 HEIGHT=22 CONTROLS=STOPBUTTON
NAME="sonido">
Se vé:

Atributos STARTTIME y ENDTIME (sólo Windows y Macintoch).

Los atributos STARTTIME=mm:ss y ENDTIME=mm:ss (donde mm son minutos y ss segundos) marcan el

punto de inicio y fin de la melodía. Los valores hay que darlos con dos dígitos: Por ejemplo:

Observaciones.

Si en una página pones dos o más ficheros de un mismo formato, sólo se oye el último que se ha activado. Si
se ponen dos ficheros con dos controlador de recursos de sistema diferente (ejemplo un mid y un wav) se
pueden oir los dos a la vez. Las páginas que incluyen sonidos pueden dar problemas a la hora de imprimirlos,
llegando incluso a colgar la máquina.

Vídeos.

Con el elemento <EMBED>, pueden usarse ficheros de sonido con el formato MOV pero se necesita un plug-
in el más utilizado es el AVI. La mecánica es prácticamente la misma que con el sonido con las evidente
diferencia de controlar el tamaño de la zona visualizada.

Atributos SRC, WIDTH, HEIGHT, AUTOSTART, LOOP y ALIGN.

SRC indica dónde está el fichero. Necesita los atributos del que definen el tamaño de la consola (icono
parecido a los botones de un reproductor de vídeo pequeño). Son WIDTH (largo) y HEIGHT (alto). No hay
tamaños por defecto por eso son obligatorios, de lo contrario, no sería posible verlo. Los tamaños standard
de los ficheros .AVI son 90x120, 120x160, 180x240, ... (normalmente una relación 4:3). Hay que tener
cuidado a la hora de poner el valor de estos atributos, ya que si no coinciden con los que realmente tiene la
imagen, ésta será recortada de derecha a izquierda y de abajo a arriba.

No obstante en Internet Explorer se redimensiona el tamaño del vídeo en formato MOV, al tamaño elegido.
Además añade un btón de play y un indicador de la proporción de la película visualizada. Si se quiere ver
bien en todos los navegadores mejor será exigir el plug-in de active movie que siempre saldrá igual pues es
él quien controla el funcionamiento.

El atributo AUTOSTART puede asignársele TRUE para que se active automáticamente el vídeo (por defecto
es FALSE).Si se le asigna FALSE, al hacer clic sobre el se activará. Con LOOP se controla el número de
veces que se repite. Puede valer FALSE (por defecto), TRUE que fuerza a la repetición sin fin , o un entero
que indica el número de veces que se repite.

Usando el atributo ALIGN y sus valores TOP, BOTTOM, CENTER, LEFT, RIGHT, MIDDLE y TEXTTOP
podemos alinear la consola como cuando se trabja con imágenes.
 Ejemplo: Vídeo en HTML:
<EMBED SRC="gates_30_240.mov" WIDTH=240 HEIGHT=198>
Se vé:

Nota: El vídeo correponde a la presentación mundial de Windows98.

Ejemplo: Vídeo en HTML:

<EMBED SRC="Dragdrop.avi" WIDTH=346 HEIGHT=251>
Se vé:

Formularios: ¿Que son?.

Los Formularios se utilizan para proporcionar interactividad a las páginas Web posibilitando realizar
transacciones. Es la forma habitual para hacer una encuesta, solicitar un producto, consultar un dato en una
Base de Datos, ... Son algo primitivos pero suficientes en la mayoría de los casos aunque tienen algunos
problemas (por ejemplo al imprimirlos). Podemos abordarlos desde dos puntos de vista:

Desde el diseñador de HTML que presenta el formulario como corresponda al caso concreto (Por ejemplo la
forma en que pedimos a una Base de Datos la información).

Desde el programa que se ejecuta en la máquina y que realiza la operación que se solicita en el formulario
(por ejemplo el programa que devuelve los datos de la Base de Datos).

El programa que verdaderamente manipula la infomación.

El diseño de estos programas no pretende ser abordado en este manual, pues no se escriben en HTML y
además presentan cierta complejidad pues un buen diseño implica tener en cuenta desde la plataforma
donde se ejecuta hasta el navegador que lo visualiza. Si que nos interesa saber otros aspectos que vamos a
ver a continuación.

Estos programas generan documentos virtuales (no estan en ningún sitio permanentemente sólo se generan
temporalmente bajo una petición del usuario). Los programas que hacen de puente entre el formulario y el
servidor, se les llama programas CGI (Common Gateway Interface).

La página HTML que presenta al formulario.

La clave de ella es el elmento lleno <FORM> dentro del cual se presentarán los campos que van a ser la
entrada del programa ejecutado en el servidor. Como es lógico es necesario saber cuales son los datos que
necesita el programa y como se le tienen que proporcionar. Para ello sólo se puede recurrir a el diseñador del
mismo o a su documentación. No obstante existen multitud de estos programas que los proveedores ponen a
disposición de sus clientes y que les permiten envio automático de correo electrónico, acceso a datos,
cálculos matemáticos diversos, ... y que los propios proveedores documentan a sus usuarios para que
puedan utilizarlos.

Formularios: Como construirlos.

Lo primero que hay que poner es <FORM> y como se comunica con el servidor. Dentro de este elemento a
su vez se utilizan otros elementos: los que presentan los componentes del formulario y los que activan los
procesos de los datos. No olvidando cerrar el elmento con </FORM>.

Ejemplo: Formulario:
<FORM METHOD="POST" ACTION="http://www.servidor.es/cgi-bin/cgi">
<INPUT NAME="campo1">
<INPUT TYPE="submit" VALUE="Procesar"></FORM>
Se vé:
 Procesar

Atributos: METHOD y ACTION.

METHOD se refiere al método que emplearemos para enviar los datos al servidor, y pueden ser dos: POST y
GET. El optar por uno u otro obedece a complejas cuestiones de programación basadas en la máxima
longitud de registro que puede enviarse; cada uno usa un canal de salida distinto. El que soporta más
longitud es POST, y es el más frecuente. Habrá que consultar la documentación en cada caso.

ACTION se refiere a la acción que queremos que ejecute el formulario en un servidor http o en local. En el
ejemplo se le está indicando que ejecute un programa llamado "cgi" que está en el directorio" /cgi-bin" del
servidor http "www.servidor.es". Además de enviar datos a un servidor, ACTION también puede realizar una
acción en local, como traer una página. (Ejemplo: Escribiendo <FORM METHOD="POST"
ACTION="Algo.html"> ... </FORM>) Podemos incluso evitar usar un CGI, enviando un e-mail (correo
electrónico) a un usuario o a una lista de ellos. (Ejemplo: <FORM METHOD="POST"
ACTION="mailto:[email protected]"> )

Atributo INPUT.

El elemento INPUT sin ningún atributo define por defecto una ventana de escritura de 20 caracteres de
longitud por una línea de ancho. Se utiliza para:

Campos de entrada por teclado.

Botones de selección.
Casillas de marca.
Botones de proceso.
Botones de inicialización (reset).
Imágenes sensibles al ratón.
Admite varios atributos:
SIZE define la longitud de la ventana de texto.
MAXLENGTH define la máxima longitud de la cadena que se puede escribir dentro de la ventana.
NAME define el nombre de la ventana (que en realidad es un campo dentro del registro que conforma el
formulario).
VALUE define un valor predeterminado (vacía por defecto).
TYPE define como se muestra el texto. Por defecto es TEXT y puede usarse también PASSWORD, que
presenta el texto como una clave. Si ponemos TYPE=HIDDEN no se mostará en el navegador (aunque se
pueda ver en las fuentes). TYPE=SUBMIT generar un botón que al ser pulsado cierra la captura de datos del
formulario y procede a ejecutar lo definido en el atributo ACTION. Para delar los valores como estaban al
incio se usa TYPE=RESET.
Podemos generar botones de selección con TYPE=RADIO genera botones circulares que permiten
seleccionar un valor predeterminado o activar una opción Estableciendo un valor VALUE="B" y usando
CHECKED queda predeterminado.
TYPE=CHECKBOX genera casillas de marca que permiten seleccionar un valor predeterminado o activar
una opción. Aquí pueden seleccionarse más de una a la vez. También puede usarse CHECKED.

Ejemplo: Formulario con diversos atributos del INPUT:

<FORM>
<INPUT VALUE="Prueba" SIZE=30 MAXLENGTH=10 NAME="Campo01">
<INPUT VALUE="Prueba" TYPE=PASSWORD NAME="Campo02">
<INPUT VALUE="Prueba" TYPE=HIDDEN NAME="Campo03">
<BR>
Tipo: 1 <INPUT NAME="tipo" TYPE=RADIO VALUE="1" CHECKED>
2 <INPUT NAME="tipo" TYPE=RADIO VALUE="2">
3 <INPUT NAME="tipo" TYPE=RADIO VALUE="3">
Clase: A <INPUT TYPE="CHECKBOX" NAME="clase" VALUE="A">
B <INPUT TYPE="CHECKBOX" NAME="clase" VALUE="B">
 <INPUT VALUE="Reset" TYPE=RESET NAME="Reset">
<INPUT VALUE="Go" TYPE=SUBMIT NAME="Go">
</FORM>
Se vé:
Prueba

Restablecer Go
Tipo: 1 2 3 Clase: A B

TYPE=FILE Sirve para enviar un fichero a una máquina remota vía FTP (con la correspondiente cuenta y el
permiso de escritura). Necesita el atributo parametrizado ENCTYPE para generar un botón que permitirá
buscar un el fichero, aunque se puede escribir directamente. Además necesita el botón tipo submit para
enviar el fichero.

Ejemplo: Formulario para enviar un fichero:

<FORM enctype="../" ACTION="ftp://usario@servidor/" METHOD="POST">
Enviar el fichero:
<INPUT NAME="fichero" TYPE="FILE">
<INPUT TYPE="SUBMIT" VALUE="Enviar">
</FORM>
Se vé:
Enviar
Enviar el fichero:

TYPE=IMAGE hace que el visualizador presente una imagen que es sensible al ratón. Lo que el formulario
envía al servidor es un registro cuyos campos son el nombre definido para la imagen seguido de los
parámetros .x=n .y=n donde n son los números de las coordenas x y del punto en el que estaba el ratón en el
momento del envío. Los formularios que utilicen este tipo de recursos pueden prescindir del tipo SUBMIT, ya
que el formulario se cierra con la imagen.

Ejemplo: Formulario con imagen:

<FORM METHOD="POST" ACTION="http://www.servidor.es/cgi-bin/cgi">
<INPUT TYPE=IMAGE NAME="imagen" SRC="bugs.gif">
</FORM>
Se vé:

El elemento SELECT.

SELECT sin ningún atributo define por defecto una lista desplegable de toda la pantalla de alto y una
columna de ancho. Puede presentar listas desplegables de valores o listas fijas de valores. Lo mas lógico y
normal es parametrizar el elemento. En primer lugar se le da nombre con NAME (es un campo del formulario)
delque el usuario escoge un valor de los que se le muestren al desplegarlo. Los valores en la lista se
introducen con OPTION. La longitud de la ventana de selección se autoajusta al valor más largo de la lista.
La ventana de selección, por defecto, muestra una línea, si se quieren mostrar más se utilizará el atributo
SIZE. Para enviar un valor diferente del que aparece en la lista, se utiliza el parámetro VALUE asociado al
atributo OPTION.
 Ejemplo: Formulario con lista desplegable:
<FORM METHOD="POST" ACTION="http://www.servidor.es/cgi-bin/cgi">
<SELECT NAME="lista">
<OPTION>Valor 1
<OPTION>Valor 2
<OPTION VALUE="Otro Valor">Valor 3
</SELECT>
<INPUT TYPE="SUBMIT" VALUE="Go">
<INPUT TYPE="RESET" VALUE="Reset">
</FORM>
Se vé:

Valor 1 Go Restablecer

Con las listas desplegables es obligatorio seleccionar siempre un valor, y si no hay ninguno seleccionado, por
defecto el visualizador enviará el primer valor de la lista. No bostante, se puede hacer que haya un valor
preseleccionado añadiendo el parámetro SELECTED al atributo OPTION, y si se quiere permitir más de una
selección, se pondrá el atributo MULTIPLE al elemento SELECT. Para seleccionar y deseleccionar hay que
atenerse a las normas del sistema.

El elemento TEXTAREA .

Permite definir un área de texto en la pantalla en la que podemos escribir cualquier cosa. Se debe escribir ya
parametrizada en cuanto a dimensiones, con los atributos ROWS (líneas) y COLS (columnas). No tiene otros
atributos o posibles variantes. Puede haber un contenido por defecto (que puede ser borrado o modificado
por el usuario). Para ello simplemente se escribirá el texto entre <TEXTAREA> y </TEXTAREA>.

Ejemplo: Formulario con área libre de texto:

<FORM >
<TEXTAREA NAME="texto" ROWS=10 COLS=30 >
Aqu&iacute; se puede escribir.
</TEXTAREA>
<INPUT TYPE="SUBMIT" VALUE="Go">
<INPUT TYPE="RESET" VALUE="Reset">
</FORM>
Se vé:

Aquí se puede
escribir.

Go Restablecer

Frames.

Los frames (cuadro, bastidor o marco) es un elemento que permite dividir la pantalla en varias zonas
independientes unas de otras, con diferentes páginas HTML relacionadas entre ellas (o no). Cada zona se
comporta por si misma como una pantalla de navegación normal con todas sus características incluida la
posibilidad de tener (o no) más frames dentro de ella.

Las páginas que contienen una definición de FRAME generalmente no tiene sentido que incluyan el elemento
BODY ni ninguno de sus elementos puesto que no se van a visualizar. En ocasiones si lo hacen pues en
navegadores antiguos no existe la posibilidad de trabajar con frames, pero practicamente todos los
navegadores los soportan. Para que la página con frames no resulte invisible a ellos se puede usar el
elemento NOFRAMES que permite ofrecer un texto alternativo en entorno normal.

Se puede controlar el tamaño y número de zonas, y redimensionarse por el usuario (o no). Como en una
página normal en caso de no caber en su zona tienen (o no) barras de scrolling.

Nota: Con los frames, resulta imposible mostrar los ejemplos como se ha venido haciendo hasta ahora. Para
verlos pulse el icono en cada caso.

Nota: En los párrafos anteriores cuando pone "(o no)" se refiere a que el diseñador tiene control para hacerlo
como desee.

Sintaxis general.

Se construye con el elemento FRAMESET donde se especifica la configuración del frame y dentro de el
elementos FRAME con el atributo SRC que le indica donde esta la página que tiene que cargar. Dentro o
fuera puede ponerse el elemento lleno NOFRAMES con lo que se va a mostrar si el navegador no soportase
los frames.

Ejemplo: Ejemplo de un frame típico:

<HTML>
<HEAD><TITLE> Página con frames </TITLE></HEAD>
<!--Documento con frames-->
<FRAMESET COLS=50%,50%>
<FRAME SRC="Ejemplo004_1.html" >
<FRAME SRC="Ejemplo004_2.html" >
</FRAMESET>
<NOFRAMES>
<BODY>
<!--Texto que sólo ve el que no puede-->
<!--visualizar frames-->
<P>
Debes de tener un navegador antiguo, pues esto s&oacute;lo se v&eacute;, si el
navegador no soporta frames.
</P>
</BODY>
</NOFRAMES>
</HTML>

Se vería: (Puede ver por separado el contenido de la página Ejemplo004_1.html y

de Ejemplo004_2.html)

Ejemplo: Ejemplo de un frame típico con posibilidad de descargar el Explorer o

Netscape:
<HTML>
<HEAD><TITLE> Página con frames </TITLE></HEAD>
<!--Documento con frames-->
<FRAMESET ROWS=50%,50%>
 <FRAME SRC="Ejemplo004_1.html" >
<FRAME SRC="Ejemplo004_2.html" >
</FRAMESET>
<NOFRAMES>
<BODY>
<!--Texto que sólo ve el que no puede-->
<!--visualizar frames-->
<P>
Debes de tener un navegador antiguo, pues esto s&oacute;lo se v&eacute;, si el
navegador no
soporta frames.<BR><BR>
Deber&iacute;as actualizarte para poder disfrutar m&aacute;s de internet.
</P>
<P align="center">
<A
HREF="http://www.netscape.com/es/comprod/products/communicator/">Download
Netscape now!</A>
<A HREF="http://www.microsoft.com/spain/ie/">Download Internet Explorer
now!</A>
</P>
</BODY>
</NOFRAMES>

</HTML>
Se vería: (Puede ver por separado el contenido de la página Ejemplo004_1.html y
de Ejemplo004_2.html)

Como atributo en FRAMESET podemos especificar tantas columnas como queramos con el atributo COLS o
bien filas con ROWS seguido de "=" y de la lista del porcentaje de cada una de ellas separado por comas.
Como todos los porcentages deben de sumar el 100%, el último de la lista puede omitirse poniendo un * que
viene a significar "lo que queda hasta el 100%". Podemos combinar frames en columnas y en filas poniendo
un FRAMESET dentro de otro.

En FRAME: ... Si no se quiere permitir el redimensionado, se aplica el atributo NORESIZE al elemento

FRAME. El atributo SCROLLING controla las barras de Scroll. Puede valer YES NO o AUTO (por defecto).
Con MARGINWIDTH y MARGINHEIGHT controlamos los márgenes para el texto de cada zona.

En FRAMESET...El borde del frame aparece por defecto pero puede ocultarse con FRAMEBORDER=NO.
También puede controlarse el color con BORDERCOLOR.

Ejemplo: 3 Frames que no pueden cambiarse de tamaño, uno de ellos sin barra de
desplazamiento y otro con margen para el texto de 20x50.
<HTML>
<HEAD><TITLE> Página con frames </TITLE></HEAD>
<!--Documento con frames-->
<FRAMESET FRAMEBORDER=No COLS=20%,*>
<FRAME SCROLLING=NO SRC="Ejemplo004_1.html">
<FRAMESET ROWS=80%,20%>
<FRAME NORESIZE SRC="Ejemplo004_2.html">
<FRAME SRC="Ejemplo004_3.html" MARGINWIDTH=20 MARGINHEIGHT=10>
</FRAMESET>
</FRAMESET>

<NOFRAMES>
 <BODY>
<!--Texto que sólo ve el que no puede-->
<!--visualizar frames-->
<P>
Debes de tener un navegador antiguo, pues esto s&oacute;lo se v&eacute;, si el
navegador no soporta frames.
</P>
</BODY>
</NOFRAMES>
</HTML>
Se vería: (Puede ver por separado el contenido de la página Ejemplo004_1.html
,Ejemplo004_2.html y de Ejemplo004_3.html)

El atributo TARGET y NAME.

Si recuerdas cuando hablamos de Links había un interesante atributo llamado TARGET que al incluirlo en un
enlace activa una nueva ventana del navegador. Si más adelante volvemos a invocar un link con el mismo
valor de TARGET, abrirá el destino en esa misma ventana.

Esto se utiliza con los frames, para que un frame cambie el contenido de otro con un enlace. Para ello hay
que construir los frames usando el atributo NAME en el FRAME que se desee. Cuando se invoque un enlace
con TARGET y el valor de NAME correspondiente este abrirá el destino en ese frame.

Ejemplo: Cambio de el contenido de un frame desde el otro. Necesitamos al menos

tres ficheros. El que configura el frame e uno de ellos:
<HTML>
<HEAD><TITLE> Página con frames </TITLE></HEAD>
<!--Documento con frames-->
<FRAMESETBORDERCOLOR=Green COLS=20%,*>
<FRAME SRC="Ejemplo004_4.html" NAME=Indice>
<FRAME SRC="Ejemplo004_1.html" NAME=Informacion>
</FRAMESET>

<NOFRAMES>
<BODY>
<!--Texto que sólo ve el que no puede-->
<!--visualizar frames-->
<P>
Debes de tener un navegador antiguo, pues esto s&oacute;lo se v&eacute;, si el
navegador no soporta frames.
</P>
</BODY>
</NOFRAMES>
</HTML>
También se necesitan el o los que tienen el contenido y el que invoca a los otros:
<HTML>
<HEAD>
<TITLE> Hola </TITLE>
<!--Parte de un framset-->
</HEAD>
<BODY>
<A HREF="Ejemplo004_1.html" TARGET=Informacion> Texto en negro</A>
<A HREF="Ejemplo004_2.html" TARGET=Informacion> Texto en rojo</A>
<A HREF="Ejemplo004_3.html" TARGET=Informacion> Texto en azul</A>
<A HREF="bugs.gif" TARGET=Informacion> Imagen</A>
 </BODY>
</HTML>
Se vería: (Puede ver por separado el contenido de la página Ejemplo004_1.html
,Ejemplo004_2.html, Ejemplo004_3.html y Ejemplo004_4.html )

Java.

Netscape junto con SUN desarrollaron hace ya años, el lenguaje Java con otros propósitos diferentes, pero
ha alcanzado gran difusión, no sólo por su correcto y oportuno diseño, sino porque se ha convertido en un
estándar fácilmente integrable en el código HTML y accesible con en el visualizador. Esto permite realizar
tareas más o menos complejas e interactivas que de otra forma deberían hacerse con CGIs con la
consiguiente sobrecarga de el servidor correspondiente.

El lenguaje Java es muy parecido al lenguaje C y que desde nuestro punto de vista tiene dos
implementaciones diferentes:

El JavaScript que es un java interpretado (se ejecuta interpretando el código directamente) que se inserta "a
pelo" dentro de la página HTML y que está muy restringido (en el acceso a ficheros sobre todo), para evitar
problemas de seguridad.

Los applets en Java, que son programas como los de culquier lenguaje y con todas las posibilidades de un
lenguaje normal. Es ejecutado a través del visualizador y en la página HTML sólo se referencias del
programa con sus correspondientes parámetros.

Los applets son mucho más exigentes en cuanto a necesidades de máquina que el JavaScript, pero se
puede hacer casi cualquier cosa con ellos. El JavaScript necesita menos recursos aunque como ya se ha
dico es menos potente.

Los applets de Java son tan complicados de programar como le sea hacerlo con un lenguaje normal (eso
depende de usted). Pero están disponibles gratuitamente muchos de ellos, en montones de sites de internet.
Para embeberlos en una página HTML se usa el elemento APPLET que puede escribirse en el BODY como
cualquier elemento de HTML.

El atributo CODE es el nombre del programa que se invoca (con el path que corresponda en CODEBASE).
Con el elemento PARAM pasaremos los parámetros al applet. Dependiendo de el programa serán unos u
otros. Si te copias un applet, asegúrate de saber que parámatros necesita, que valores están autorizados y
como se llaman. Cuando lo sepas usa NAME para indicarle el parámetro y VALUE el valor que se desee.

Ejemplo: Un posible Applet en HTML:

<APPLET CODEBASE="applet/NombreDel" CODE="Applet.class" WIDTH=600
HEIGHT=40>
<PARAM NAME=parametro1 VALUE="Texto 1">
<PARAM NAME=parametro2 VALUE="Texto 2">
<PARAM NAME=parametro3 VALUE=1>
<PARAM NAME=parametro4 VALUE=ON>
</APPLET>

No hay que olvidar que los applets de Java sólo funcionan (y se compilan) en máquinas con sistemas
operativos de 32 bits (por ejemplo Windows 95 o Macintosh).
Para los que no van a programar en Java.

Como curiosidad, por si no vas a programar en Java, es interesante saber que los ficheros fuente se
escriben con la extensión "java" y al compilarse generan un fichero "class". También conviene saber que si
no se hace una programación especialmente cuidadosa, los applets funcionan en unos navegadores y en
otros no (incluso en diferentes versiones del mismo browser). Recuerde que están disponibles gratuitamente
muchos de ellos, en montones de sites de internet.

Para los que si van a programar en Java.

Si te interesa el tema necesitas instalarte el Java Developer Kit que puede sconseguir en muchos sitios (¡¡es
gratis!!) o bajártelo de internet (aunque te aviso de que ocupa 9,651,516 bytes en su versión de Windows 95).
El proceso de instalación y configuración se resume en los siguientes pasos:
Ejecutar el instalador del JDK.
Actualizar las variables PATH y CLASSPATH en el AUTOEXEC.BAT
Checkear posibles problemas.
Léase bien la documentación a tal efecto y que tenga suerte.

Lenguaje JavaScript: ¿Que es?

JavaScript es muy parecido al Java pero mucho más sencillo. Casi siempre está embebiendo el JavaScript
en una página HTML. Habitualmente, se utiliza para activar procesos o desarrollar algoritmos que hagan
tareas sencillas, (como calculadoras, control de errores para formularios,...) haciendo la web más viva y
dinámica.

¿Por qué usar JavaScript?.

Como el HTML no permite activar procesos o desarrollar algoritmos, el Javascript viene muy bien para estos
menesteres. No hay que olvidar que está muy limitado frente a lenguajes de programación tradicionales
sobre todo porque no permite la manipulación de ficheros (para evitar problemas de seguridad). Esto ahorra
al servidor mucho trabajo pues el código se interpreta en el cliente (desde su browser). Combinado con el
acceso a bases de datos da mucho juego, pero sobre todo se usa para darle vida a las webs haciendo que
cambien imágenes, que se procesen datos, ...

¿Qué se necesita para trabajar en Javascript?

Un editor de texto sencillo.

Un navegador ó browser.
Algo de tiempo para aprenderlo.

Funcionamiento

Se utiliza el elemento <SCRIPT> y dentro de el se incluye el código fuente del programa. Frecuentemente, va
dentro del HEAD de la página, y no en el BODY. Nótese en que después del elemento SCRIPT se abre un
comentario que contiene las instrucciones. Esto es para ocultar el script a los visualizadores que no sean
capaces de interpretarlo. También se puede ver que antes del cierre del comentario (-->) hay dos barras (//):
Esto es para que java no interprete el cierre como instrucción y dé un error.

No se necesita saber mucho javascript (aunque viene bien) para utilizarlo. Sucede como con el código
HTML, muchas veces solo se corta el trozo de código y se pega en la página ("Cut&Paste").

Nota: Algunos de los ejemplos están disponibles pulsando el icono en cada caso.

Ejemplo: HTML con código JavaScript:

<HTML>
<HEAD>
<TITLE> JavaScript</TITLE>
 <SCRIPT LANGUAGE="JavaScript">
<!--
alert("¡¡Hola Mundo!!");
// -->
</SCRIPT>
</HEAD>
<BODY>
Hola Mundo
</BODY>
</HTML>

Se vería:

Otra forma habitual de que se presente el JavaScript es dentro de el elemento HREF.

Ejemplo: HTML con código JavaScript:

<A HREF="" onMouseOver="alert('MMM... ¿Que hay de nuevo viejo?')"><IMG
SRC="bugs.gif"></A>

Se vería:

Cookies

Las Magic Cookies (galletas mágicas ó galletas persistentes) son una de las incorporaciones más recientes
al protocolo HTTP, y son parte del nuevo estándar HTTP/1.1. Las cookies son pequeños ficheros de texto
que se intercambian los clientes y servidores HTPP, para solucionar una de las principales deficiencias del
protocolo: la falta de información de estado entre dos transacciones. Fueron introducidas por Netscape, y
ahora han sido estandarizadas en el RFC 2109.

Cada intercambio de información con un servidor es completamente independiente del resto, por lo que las
aplicaciones CGI que necesitan recordar operaciones previas de un usuario pueden optar por dos soluciones,
que complican bastante su diseño: almacenar temporalmente en el sistema del servidor un registro de las
operaciones realizadas, con una determinada política para eliminarlas cuando no son necesarias, o bien
incluir esta información en el código HTML devuelto al cliente, como campos HIDDEN de un formulario.

Las cookies son una solución más flexible a este problema. La primera vez que un usuario accede a un
determinado documento de un servidor, éste proporciona una cookie que contiene datos que relacionarán
posteriores operaciones. El cliente almacena la cookie en su sistema para usarla después (sólo el puede
verla). En los futuros accesos a este servidor, el browser podrá proporcionar la cookie original, que servirá de
nexo entre este acceso y los anteriores. Todo este proceso se realiza automáticamente, sin intervención del
usuario.
 Ejemplo: Una Cookie:
UIDC
195.57.188.18:0923250393:249037
netscape.com/
0
0
75229808
2853188448
29261512
*

Como se puede observar, la información dentro de la cookie se organiza a partir de líneas de texto, con pares
variable/valor. Un campo más interesante es la tercera línea. El cliente Web la compara cada URL a la que
accede; si se produce una concordancia entre ambas, se enviará la cookie correspondiente. Es decir, una
cookie asociada a netscape.com/download sólo se enviará con accesos por debajo de la sección /download,
mientras que la cookie del ejemplo servirá para todo el servidor. Obsérvese que la Cookie es aplicable a todo
un rango (netscape.com) aunque se puede dar una dirección única.

Aplicaciones:

Sistemas de compra electrónica. Estos supermercados virtuales necesitan relacionar el contenido de un

pedido con el cliente que lo ha solicitado. Sin cookies, la solución más sencilla es incluir dentro de los
documentos HTML el contenido de las operaciones o pedidos previos, a través de variables ocultas. Con
ellas es posible relacionar los sucesivos accesos al sistema con su origen y simplificar la gestión de la
aplicación Web.

Otro uso muy interesante son los sistemas personalizados de recepción de información, en los que es posible
construir una página a medida, con información procedente de fuentes muy diversas. En el primer acceso al
sistema, se procede al registro; a partir de él, se genera una cookie que recibe el cliente. En accesos
sucesivos, el cliente enviará la cookie, y el servidor podrá generar una página personalizada con las
preferencias del usuario.

Seguimiento de los accesos a sus servidores WWW, identificando las páginas más visitadas, la manera en
que se pasa de una a otra sección, etc.

Para utilizar las cookies, es necesario que los clientes estén preparados para recogerlas y almacenarlas.
Netscape Navigator e Internet Explorer disponen ya de esta capacidad. Sin embargo, los servidores no
necesitan capacidades especiales, ya que son las aplicaciones CGI las encargadas de su gestión. Por
defecto, los clientes Web reciben y envían cookies sin solicitar confirmación al usuario, pero es posible recibir
avisos de la recepción de cookies, para rechazarlas en caso de no ser de nuestro agrado. Sin embargo,
algunos servicios Web como tiendas on-line dependen de ellas para operar correctamente.

Las cookies tienen un tiempo de vida, que hace que sean descartadas pasado un cierto tiempo de actividad.
Algunas expiran al salir del cliente Web, pero otras cookies tienen una duración mayor, por lo que el cliente
Web las almacena en un fichero. Netscape utiliza el fichero cookies.txt de su directorio de instalación,
mientras que Microsoft almacena cada uno en un fichero independiente del caché de páginas.

Las cookies son imprescindibles para operar con determinados servidores de acceso restringido, en los
cuales es preciso seguir un proceso de registro, y posiblemente abonar algún tipo de tasa. Cuando se pierde
una de esas cookies, por una reinstalación, fallo del ordenador o limpieza del caché de páginas, en algunos
casos puede ser posible regenerarla siguiendo un nuevo proceso de registro en el servidor que la
proporcionó, de forma que se relacione algún tipo de información personal o clave de acceso proporcionado
en la primera visita al servidor.

Existe un conjunto predefinido de nombres de variable, necesarias para el correcto funcionamiento de las
cookies, pero se pueden crear nuevas variables para cubrir las necesidades de una aplicación concreta. Las
principales variables predefinidas son:
Domain= conjunto de direcciones Internet para el que es válida la cookie. Se puede dar una dirección única
(www.servidor.es) o un rango (.netscape.com).
Path= fija el subconjunto de URLs para las que sirve esta cookie.

Version= Permite seleccionar entre diferentes versiones del modelo de cookies.

Expires= Fecha de expiración de la información. Si no se incluye, los datos son descartados al finalizar la
sesión con el cliente Web. En caso contrario se almacenará en el disco del cliente. El RFC 2109 ha cambiado
esta variable por Max-Age, una duración relativa en segundos.

Un servidor HTTP envía los diferentes campos de una cookie con la nueva cabecera HTTP Set-Cookie:
Set-Cookie: Domain=www.servidor.es; Path=/download; Nombre=Angel; Expires Tu, 27-May-99 20:28:06
GMT

Cuando se accede a una URL que verifica el par dominio/path registrado, el cliente enviará automáticamente
la información de los diferentes campos de la cookie con la nueva cabecera HTTP Cookie:

Cookie: Domain=www.servidor.es; Path=/download; Nombre=Angel