El Lenguaje HTML
1 - Etiquetas del lenguaje HTML
2 - Formato de las URL
3 - Estructura de un documento HTML
4 - Cabecera de un documento HTML
5 - Cuerpo de un documento HTML
5.1 - Espaciados y saltos de línea
5.2 - Caracteres latinos y especiales
5.3 - Cabeceras
5.4 - Tamaño y Color de las fuentes de caracteres
5.5 - Estilos físicos y lógicos
5.6 - Definición de listas
5.7 - Hiperenlaces
5.8 - Imágenes
5.9 - Imágenes Sensibles
5.10 - Insercción de elementos multimedia
5.11 - Tablas
5.12 - Formularios
7 - CGI (Common Gateway Interface), ejecucin de binarios.
8 - Documentos con frames.
Gestión de un espacio Web Departamental

1 - Como gestionar la cuenta Departamental
(EN PREPARACIÓN)
2 - Conceptos básicos del diseño de documentos y espacios Web
(EN PREPARACIÓN)
3 - FAQ de la gestión de un espacio Web Departamental


Realizado por el: Servicio de Infraestructura Informtica
Versin: 0.99
Ultima Modificacin: 9 de Septiembre de 1996
URL: http://www2.uca.es/manual-html/indice.htm
Comentarios: www-team@uca.es Etiquetas en HTML

1 - Etiquetas del lenguaje HTML

Las Etiquetas

     El lenguaje HTML es un lenguaje de marcas, estas marcas serán fragmentos de texto destacado de una forma especial que permiten la definición de las distintas instrucciones de HTML, tanto los efectos a aplicar sobre el texto como las distintas estructuras del lenguaje. A estas marcas las denominaremos etiquetas y serán la base principal del lenguaje HTML. En documento HTML será un fichero texto con etiquetas que variarán la forma de su presentación.

     Una etiqueta será un texto incluido entre los símbolos menor que < y mayor que >.. El texto incluido dentro de los símbolos será explicativo de la utilidad de la etiqueta. Por ejemplo:

<B> Letra Negrita, del inglés Bold (negrita).
<TABLE> Definirá una tabla.
<IMG> Inclusión de una IMaGen.

     Existe normalmente una etiqueta de inicio y otra de fin, la de fin contendrá el mismo texto que la de inicio añadiéndole al principio una barra inclinada /. El efecto que define la etiqueta tendrá validez para todo lo que este incluido entre las etiquetas de inicio y fin, ya sea texto plano o otras etiquetas HTML.

     <ETIQUETA>Elementos Afectados por la Etiqueta</ETIQUETA>

     Por ejemplo, con la etiqueta siguiente:

     <B>Texto que será en negrita</B>.

     Obtendremos:

     Texto que será en negrita

     Algunas etiquetas no necesitarán la de fin, serán aquellas en las que el final este implícito, por ejemplo <P> párrafo, <BR> salto de línea ó <IMG> inclusión de una imagen. Definen un efecto que se producirá en un punto determinado sin afectar a otros elementos.

     El uso de mayúsculas o minúsculas en las etiquetas es indiferente, se interpretarán del mismo modo en ambos casos, pero lo normal es expresarlas en mayúsculas para que destaquen con más nitidez del texto normal.

Atributos de las Etiquetas

     Las etiquetas pueden presentar modificadores que llamaremos atributos que permitirán definir diferentes posibilidades de la instrucción HTML. Estos atributos se definirán en la etiqueta de inicio y consistirán normalmente en el nombre del atributo y el valor que toma separados por un signo de igual. El orden en que se incluyan los atributos es indiferente, no afectando al resultado. Si se incluyen varias veces el mismo atributo con distintos valores el resultado obtenido será imprevisible dependiendo de como lo interprete el navegador. Cuando el valor que toma el atributo tiene más de una palabra deberá expresarse entre comillas, en otro caso no será necesario.

     Un ejemplo de atributo será:

     <A HREF="http://www.uca.es">Pagina principal de la UCA</A>

     En este caso la etiqueta A presenta un atributo HREF cuyo valor es http://www.uca.es.

     Igualmente una etiqueta podría presentar varios atributos:

     <HR ALIGN=LEFT NOSHADE SIZE=5 WIDTH=50%>

     En este caso la etiqueta HR presenta cuatro atributos. El segundo atributo NOSHADE es un caso especial que no presenta valor. El orden en que se especifiquen los atributos no afectarán al resultado final.

Etiquetas correctas

     Todo texto que se encuentre entre los caracteres < y > se considerará una etiqueta, si la etiqueta no fuera una de las validas del lenguaje HTML no será tenida en cuenta, sin causar ningún tipo de error. Dejándose el texto o las etiquetas a las que afectaba como si no existiera la etiqueta extraña. Cuando se comete un error sintáctico al expresar una etiqueta o un atributo no se producirá ningún error, simplemente no de obtendrá el efecto que deseábamos.

     El lenguaje HTML es un lenguaje que evoluciona muy rápidamente y cada nueva versión de los programas navegadores presenta etiquetas nuevas que causan efectos más espectaculares o atributos nuevos de las etiquetas ya existentes. Esto causa que los programas más antiguos no entiendan estas nuevas etiquetas y por tanto las considere erróneas y no realice la acción que deseábamos. Dándose el caso de atributos que son validos solo para un único navegador.

     Cuando creemos código HTML hay que hacerlo lo más estándar posible para permitir que el documento pueda ser visto de forma efectiva por distintos navegadores en maquinas distintas. Por tanto debemos renunciar a efectos espectaculares que solo tienen validez en un navegador e intentar comprobar como se ve el documento en una variedad de navegadores, ya que las personas que se conectan a nuestras páginas no tendrán en la mayoría de los casos el mismo que nosotros. Tambien es interesante como se vería el documento en los distintos tamaños de la ventana del navegador, teniendo en cuenta que todos no tienen un monitor con la misma resolución.

     En este manual se han tratado de incluir las características más estándar de HTML y en caso de tratarse de instrucciones más particulares se indicará convenientemente.

Formato de las URL

2 - Formato de las URL

Definición

     URL es el acrónimo de (Uniform Resource Locator), localizador uniforme de recursos y permite localizar o acceder de forma sencilla cualquier recurso de la red desde el navegador de la WWW.

      Con la WWW se pretende unificar el acceso a información de servicios que antes eran incompatibles entre sí, tratando de conseguir que todos los servicios de internet sean accesibles a través de la WWW, de esta forma desde un mismo programa se puede tener acceso a todos los recursos de una forma uniforme y permite que los documentos HTML incluyan enlaces a otras fuentes de información en servicios como FTP, gopher, WAIS, etc ...

Uso y Formato

     Las URL se utilizarán para definir el documento de destino de los hiperenlaces, para referenciar los gráficos y cualquier otro fichero que se desee incluir dentro de un documento HTML. Cada elemento de internet tendrá una URL que lo defina, ya se encuentre en un servidor de la WWW, FTP, gopher o las News.

     El formato de una URL será:

     servicio://maquina.dominio:puerto/camino/fichero

     El servicio será alguno de los de internet, estos pueden ser:

     http: (HyperText Transport Protocol), es el protocolo utilizado para transmitir hipertexto. Todas las páginas HTML en servidores WWW deberán ser referenciadas mediante este servicio. Indicará conexión a un servidor de la WWW.

     https: (HyperText Transport Protocol Secure), es el protocolo para la conexión a servidores de la WWW seguros. Estos servidores son normalmente de ámbito comercial y utilizan encriptación para evitar la intercepción de los datos enviados, usualmente numeros de tarjeta de credito, datos personales, etc ..., realizará una conexión a un servidor de la WWW seguro.

     ftp: (File Transfer Protocol), utilizará el protocolo FTP de transferencia de ficheros. Se utilizará cuando la información que se desee acceder se encuentre en un servidor de ftp. Por defecto se accederá a un servidor anónimo (anonymous), si se desea indicar el nombre de usuario se usará: ftp://maquina.dominio@usuario, y luego le pedirá la clave de acceso.

     gopher, wais: Cualquiera de estos servicios de localización de información, se indicará el directorio para localizar el recurso concreto.

     news: Accede al servicio de news, para ello el visualizador de la WWW debe ser capaz de presentar este servicio, todos no lo son. Se indicará el servidor de news y como camino el grupo de noticias al que se desea acceder: news://news.cica.es/uca.es.

     telnet: Emulación de terminal remota, para conectarse a maquina multiusuario, se utiliza para acceder a cuentas públicas como por ejemplo la de biblioteca. Lo normal es llamar a una aplicación externa que realice la conexión. En este caso se indicará la maquina y el login: telnet://maquina.dominio@login.

     mailto: Se utilizará para enviar correo electrónico, todos los navegadores no son capaces. En este caso solo se indicará la dirección de correo electrónico del destino: mailto://alias. correo@domino.

     La maquina.dominio indicará el servidor que nos proporciona el recurso, en este caso se utilizará el esquema IP para identificar la maquina será el nombre de la maquina y el dominio. En el caso de nuestra Universidad el dominio siempre será uca.es. Por tanto un nombre valido de maquina será www2.uca.es.

     Es muy importante indicar siempre el dominio, ya que debemos suponer que se conectarán a nuestras páginas desde servidores externos a nuestra red local por tanto si no indicamos el dominio las URL que especifiquemos no podrían ser seguidas por los navegadores externos. Si en vez de www2.uca.es utilizamos www2 será perfectamente accesible por cualquier maquina de nuestra red local pero si se referenciara desde una red con distinto dominio la maquina www2 será la maquina llamada así en el dominio remoto si existiera, que no es la que deseamos referenciar.

     El puerto TCP es opcional y lo normal es no ponerlo si el puerto es el mismo que se utiliza normalmente por el servicio. Solo se utilizará cuando el servidor utilice un puerto distinto al puerto por defecto.

     El camino será la ruta de directorios que hay que seguir para encontrar el documento que se desea referenciar. para separar los subdirectorios utilizaremos la barra de UNIX /, se usa por convenio al ser este tipo de maquinas las más usadas como servidores. El nombre de los subdirectorios y del fichero referenciado puede ser de más de ocho caracteres y se tendrá en cuenta la diferencia entre mayúsculas y minúsculas en el nombre.

     La extensión de los ficheros será también algo importante, ya que por ella sabe el servidor el tipo de documento que se accede e indica al cliente (navegador) el modo en que debe tratarse ese documento. Para definir los tipos de documentos se utiliza los tipos MIME. Las extensiones más normales con sus tipos correspondientes son:

Tipo MIMEExtensiónTipo de fichero
text/html html ó .htm, documento HTML
text/plain .txtpor defecto, texto plano
image/gif .gif imagen de formato GIF
image/jpeg jpg ó .jpeg imagen de formato JPEG

     El navegador de la WWW, realiza una acción para cada tipo de fichero, solo los que sean del tipo text/html serán mostrados como documentos HTML. En el caso de que el tipo no sea conocido por el cliente se considerará por defecto como un documento de texto normal.

     Si no se indica un fichero y solo referenciamos un directorio accederemos a la página html por defecto de ese directorio. En el servidor están definidos unos ficheros para ser usados si no de indica un fichero concreto, el nombre que debe tener este fichero es en nuestro caso default.htm ó default.html. En caso que no exista este fichero se mostrará un listado de todos los documentos que forman el directorio. Este fichero es la página inicial (home page) del servidor o del espacio Web.

     Algunos ejemplos de URL podrían ser:
URLDefinición
http://www.uca.esEn este caso solo se indica el servicio y la maquina y dominio. El resto de los parámetros se toman por defecto, el puerto 80, el directorio, el raíz del servidor y el documento por defecto de ese directorio.
http://www.uca.es/internet/internet.htmlEsta URL está más completa en este caso se accede al fichero internet.html que se encuentra en el directorio internet del servidor de la WWW, www.uca.es.
http://www2.uca.es/serv/siiSe accederá al fichero por defecto del directorio /serv/sii del servidor de la WWW, www2.uca.es
ftp://ftp.uca.es/imagenes/globo.gifEn este caso se accederá a un servidor de FTP anónimo, ftp.uca.es por el protocolo FTP y se accederá al fichero globo.gif del directorio de imagenes.
news:uca.esEn este caso se accederá al grupo de news de la uca en el servidor de news definido por defecto en el navegador de la WWW, esta opción solo es soportada por los navegadores más modernos.
mailto://www-team@uca.esEnviará un mail al equipo de la WWW de la UCA, esta opción solo es soportada por los navegadores más modernos.
Estructura de un Documento HTML

3 - Estructura de un documento HTML

Estructura Básica

     Un documento HTML está definido por una etiqueta de apertura <HTML> y una etiqueta de cierre </HTML>. Dentro de este se dividen dos partes fundamentales la cabecera, delimitada por la etiqueta <HEAD> y el cuerpo, delimitado por la etiqueta <BODY>. Por tanto la estructura de un documento HTML será:

<HTML>
<HEAD>
Definiciones de la cabecera
</HEAD>
<BODY>
Instrucciones HTML
</BODY>
</HTML>

     Ninguno de estos elementos es obligatorio, pudiendo componer documentos HTML que se muestren sin ningún problema sin incluir estas etiquetas de identificación. Si se utilizan elementos que forzosamente deban ser incluidos en la cabecera (como la etiqueta de titulo), no serán reconocidos correctamente si no se incluyen entre las etiquetas de <HEAD>.

     En los próximos apartados explicaremos de forma separada los componentes de la cabecera y del cuerpo de un documento HTML.

Comentarios

     Para insertar comentarios dentro de un documento HTML utilizaremos la etiqueta especial <!--, definiéndose un comentario de la forma:

<!-- Esto es un comentario -->

     Los comentarios son útiles para identificar el documento, pudiendo indicar al comienzo del documento su titulo, autor y la fecha en el que fue realizado, esto se hace antes de la etiqueta <HTML>. También aunque ya con menos utilidad para comentar cualquier instrucción o circunstancia del documento.

     Los comentarios no se muestran en el documento HTML y el único modo de verlo es viendo el código HTML fuente del documento, cosa que permiten algunos navegadores de la WWW.

Cabecera de un Documento HTML

4 - Cabecera de un documento HTML

Introducción

     La cabecera de un documento HTML está delimitado por las etiquetas <HEAD> y </HEAD>, en esta se incluirán las definiciones generales que afectarán a todo el documento. Todas sus etiquetas son opcionales y se utilizarán solo en casos muy determinados, solo la etiqueta TITLE tiene un uso general y aunque es opcional se recomienda incluirla en todos los documentos que creemos.

     A continuación se citan los distintos componentes que pueden formar la cabecera de un documento HTML.

<TITLE>: Título del documento

     Especificará el título del documento HTML, todo documento HTML debe tener un titulo. El titulo debe guardar relación con el contenido del documento y definirlo de forma general, su tamaño no está limitado aunque se recomienda que no sea excesivamente extenso. Dentro de esta etiqueta no se podrá usar ninguna de las restantes etiquetas HTML.

     El título no forma parte del documento en sí, y no se incluye ni se muestra dentro del documento, normalmente se muestra en la parte superior de la ventana del programa navegador.

     Se utiliza principalmente para etiquetar e identificar la página en los bookmarks (marcadores) y las history list (lista de documentos accedidos) y también se utiliza por algunos servidores de búsqueda como resultado de una busqueda para poder intuir el contenido del documento. El titulo deberá guardar relación con el contenido del documento y definirlo de forma general.

     La etiqueta <TITLE>, debe ser usada dentro de las etiquetas que definen la cabecera de la siguiente forma:

<HEAD>
<TITLE>Titulo del documento HTML</TITLE>
</HEAD>

<BASE>: URL base del documento.

     Especificará la URL que se tomará como base del documento HTML, esta se utilizará para las referencias a URL relativas, que se encuentren en los hiperenlaces y en las referencias de las imágenes. No tiene mucho uso y lo normal es utilizarlo en documentos, obtenidos de otros servidores o directorios e incluidos fuera de contexto, de esta forma los enlaces siguen siendo validos.

     Presenta un atributo HREF, que indicará la URL base del documento, el formato será el siguiente:

<BASE HREF="URL">

     Por ejemplo:

<BASE HREF="http ://www.uca.es/docs/">

<ISINDEX>: El documento es un índice

     Indica que el documento es un índice, y por tanto se deberá realizar una búsqueda en él. Presentará un indicador preguntando la palabra clave de la búsqueda.

     No se utiliza en documentos normales, sino en documentos realizados con cgi-bin para indicar que les debe pasar una palabra clave para realizar la búsqueda. Presenta dos atributos, PROMPT que indica el texto que aparecerá como inductor de la búsqueda y ACTION que especifica el fichero cgi que trata la consulta, por defecto será el documento actual.

<META>: Indica refresco del documento

     Aunque tiene más utilidades, la principal es indicar documentos con refresco automático. Se indicará un documento que debe sustituir al actual en un determinado número de segundos.

     El formato es el siguiente:

<META HTTP-EQUIV="REFRESH" CONTENT="número_segundos ;URL=URL_de_refresco">

     Se indica el número de segundos que deben pasar antes del refresco y el documento HTML que sustituye al actual. Si se indica cero segundos la transición entre uno y otro documento será inmediata. Si no se indica URL el documento actual se refrescará.

     La utilidad puede ser para documentos que cambien con una gran frecuencia y transcurrido un tiempo se actualizarán, o documentos que deban ser vistos de forma secuencial, se empieza por un documento pasando a los siguientes transcurrido un período de tiempo sin necesidad de acción alguna por parte del lector.

Cuerpo de un documento HTML

5 - Cuerpo de un documento HTML

Introducción

     El cuerpo de un documento HTML estará delimitado por las etiquetas <BODY> y </BODY> y en el se incluirán todas las instrucciones HTML y el texto que forman el documento, es similar al BEGIN ó { de un lenguaje de programación. Al igual que la cabecera (HEAD) es opcional, pero se recomienda para la buena identificación de las distintas zonas del documento. Si un documento no presenta ninguna de las etiquetas de identificación de sus distintas partes (<HTML>, <HEAD> ó <BODY>) se considerará que todo lo que se defina pertenece al cuerpo del documento.

Definición de colores

     Antes de especificar los atributos de la etiqueta BODY indicaremos, la forma de representar los distintos colores. Se usa el siguiente formato:

#rrvvaa

     Donde se indica en formato hexadecimal la proporción de rojo, verde y azul que forma el color deseado. El símbolo # es opcional. Un número hexadecimal es un número en base 16, la base normal utilizada es base 10 o decimal del 0 al 9. En este caso los número validos serán del 0 al 9 añadiendo desde la a ó A a la f ó F. Por tanto el número 0F será el 15, 0E será 14.

     En la especificación del color utilizaremos para definir la proporción de cada color un número del 0 al FF (255), 0 indica nada de ese color y FF la mayor proporción del color.

Algunos ejemplos de colores serán:

#000000 Negro(Negro)
#FFFFFF Blanco(Blanco)
#FF0000 Rojo(Rojo)
#00FF00 Verde(Verde)
#0000FF Azul(Azul)

     Algunos colores están predefinidos y pueden ser referenciados por su nombre, estos solo serán validos para Netscape e Internet Explorer de Microsoft, estos colores predefinidos son:

Color PredefinidoMuestraColor PredefinidoMuestra
blacknegrooliveoliva
tealtealredrojo
blueazulmaroonmarron
navyazul marinograygris
limelimafuchsiafucsia
whiteblancogreenverde
purplepurpurasilverplata
yellowamarilloaquaagua

El Netscape 2.0 o superior soporta mayor cantidad de colores: paleta completa del Netscape 2.0.

Atributos de <BODY>

     La etiqueta BODY presenta algunos atributos que son de definición global para todo el documento, estos definirán los colores y el fondo del documento HTML.

     Los atributos de BODY son:

<BODY BACKGROUND="URL" BGCOLOR=#rrvvaa TEXT=#rrvvaa LINK=#rrvvaa VLINK=#rrvvaa >

     Definirá la imagen que se utilizará de fondo del documento HTML, la URL definida será el camino a una imagen. Esta se muestra debajo del texto y las imágenes del documento HTML. En el caso de que la imagen no rellene todo el fondo del documento esta será reproducida tantas veces como sea necesario.

     Indicará el color del fondo del documento HTML, solo se utilizará si no se ha definido una imagen de fondo, o si esta imagen no puede obtenerse.

     Especificará el color del texto normal dentro del documento HTML. Por defecto será normalmente negro.

     Indicará el color que tendrán los hiperenlaces que no han sido accedidos. Por defecto será azul.

     Color de los enlaces que ya han sido visitados. Por defecto es un color azul más oscuro.

Ejemplos

     Algunos ejemplos podrían ser:
<body background= "http://www2.uca.es/fondos1/fondo15.gif">El documento tendrá como fondo la imagen indicada en la URL
<body bgcolor=blue text=white link=red vlink=aqua>En este caso el fondo será azul, el texto blanco, los enlaces rojos y los enlaces visitados color agua
<body bgcolor=0000FF text=FFFFFF link=FF0000 vlink=008200>Este caso es similar al anterior pero usando el formato hexadecimal para definir los colores, el fondo será azul, el texto blanco, los enlaces rojos y los enlaces visitados color verde oscuro

Espaciados y Saltos de Línea

5.1 - Espaciados y saltos de línea

El espaciado en HTML

     En HTML no está permitido más de un elemento blanco (espacios, tabuladores, saltos de línea) separando cualquier elemento o texto, todos estos son convertidos a un único espacio blanco y el resto se omiten en la representación del documento. En el documento fuente podremos usar el espaciado que deseemos, y no deberá estar bien formateado, este se conseguirá con las etiquetas HTML.

     Existen unas etiquetas especiales HTML para definir estos elementos de control de texto. A continuación se detallará cada una de ellas.

<P> Cambio de párrafo :

     Definirá un párrafo, se usará al comienzo o al final de un párrafo de texto e introducirá un espaciado de separación (normalmente dos líneas) con el próximo texto que se exprese. Esta etiqueta se puede utilizar para introducir un espaciado entre cualquier elemento HTML y no solo servirá para separar texto.

     El efecto se conseguirá introduciendo la etiqueta <P> en el punto en el que deseemos que se produzca el espaciado. La etiqueta de fin de párrafo </P> es opcional no siendo necesario incluirla.

     Existen elementos HTML que ya introducen separaciones de líneas, tanto antes como despues, por tanto en estos casos no es necesario, pero sí posible, introducir el elemento de nuevo párrafo. No es necesario utilizar esta etiqueta ni antes ni después de cabeceras <Hn>, después de <HR> (reglas horizontales), <ADDRESS>, <BLOCKQUOTE>, <PRE>. Tampoco es necesario dentro de listas tras los elementos <LI>, <DT> ni <DD>, que se utilizan para separar los distintos elementos de una lista.

Ejemplo
Inst.
HTML
Esta es una frase que forma un parrafo.<P>Este es el otro parrafo.
Resul
tado
Esta es una frase que forma un parrafo.

Este es el otro parrafo.

Explica
ción
En el punto donde se ha introducido la instrucción HTML de nuevo parrafo se observa una separación de dos líneas.

<BR> Salto de línea :

     Su utilidad es similar al anterior pero en este caso el espaciado del texto es menor, se pasará a la línea siguiente, sin dejar una línea de separación. En este caso será un cambio de línea y no de parrafo. Igualmente no es necesario usarlo tras los elementos que llevan implícitos un salto de línea, ni tampoco es necesaria la etiqueta de fin </BR>.

Ejemplo
Inst.
HTML
Esta es una frase de la primera línea.<BR>Esta es la siguiente línea
Resul
tado
Esta es una frase de la primera línea.
Esta es la siguiente línea
Explica
ción
En el punto donde se ha introducido la instrucción HTML de nueva línea se observa el cambio de línea.

<HR> Regla Horizontal :

<HR ALIGN=LEFT|RIGTH|CENTER NOSHADE SIZE=n WIDTH=n>

     Se usa para dividir un documento en distintas secciones, mostrará una línea horizontal de tamaño determinable. Se asemejará al salto de página dentro de un documento.

     Si no se especifican atributos dibujará una línea que ocupe el ancho de la pantalla del navegador y introduciendo una separación con el texto anterior y siguiente, equivalente a cambio de párrafo. No es necesaria la etiqueta de fin </HR>. Con los atributos podemos especificar su forma y tamaño, esto atributos son:

     Indicará la forma en la que se alineará la regla en el caso de no ocupar todo el ancho de la pantalla del navegador, a la izquierda, derecha o centrada.

     No muestra la sombra de la barra, evitando el efecto en tres dimensiones.

     Indicará la altura de la regla en puntos de la pantalla.

Especificará el ancho de la regla, se puede especificar en tanto por ciento del ancho de la ventana <HR WIDTH=50%> o en valor absoluto <HR WIDTH=75> en puntos de la pantalla.

Ejemplos
Inst.
HTML
<HR>
Resul
tado

Explica
ción
Mostrará un línea que ocupa todo el ancho disponible y de altura 1 con sombra.
Inst.
HTML
<HR SIZE=5 NOSHADE>
Resul
tado

Explica
ción
Mostrará un línea que ocupa todo el ancho disponible, es de 5 de alto y no tiene sombra ni efecto dimensional.
Inst.
HTML
<HR SIZE=5 WIDTH=50% ALIGN=LEFT>
Resul
tado

Explica
ción
Mostrará un línea que ocupa el cincuenta por ciento del ancho disponible, es de 5 de alto y está alineada a la izquierda.

<PRE> Texto preformateado :

     Muestra un porción de texto en el que se respetan los saltos de línea, tabuladores y espacios en blanco. Todo lo que se encuentre entre las etiquetas de inicio y fin de texto preformateado se mostrará tal y como se expresa en el fuente del documento html. Para mostrar este texto se utiliza una fuente de espaciado fijo más pequeña que el texto normal.

     Presenta un problema cuando la línea es demasiado larga, ya que no la corta el navegador y se mostraría tal y como aparece en el fichero fuente. No se recomienda como forma rápida de convertir un documento texto a formato visible en HTML ya que presenta muchas limitaciones y no se obtiene una buena presentación.

     Dentro de la etiqueta PRE no tendrán validez la mayoría de las instrucciones HTML, solo se podrán utilizar <B>, <I> y los hiperenlaces. El resto de las etiquetas HTML son ignoradas.

Ejemplo
Inst.
HTML
<PRE>Este texto    se verá
tal y como se
escribió. </PRE>
Resul
tado
Este texto    se verá
tal y como se
escribió.
Explica
ción
Como se ve utiliza otra fuente de caracteres distintas de espaciado fijo y se respetan los espacios en blanco y los saltos de línea de la instrucción original.

<CENTER> Centrado de texto e imágenes :

     Se utilizará para centrar líneas de texto, imágenes o cualquier otro elemento HTML (tablas, listas, etc ...). Todo lo que se encuentre entre las etiquetas de inicio y fin aparecerá centrado en el navegador.

Ejemplo
Inst.
HTML
<CENTER> Este texto se verá centrado </CENTER>
Resul
tado
Este texto se verá centrado
Explica
ción
El texto aparece centrado en el navegador. Se puede utilizar tanto para una línea como para un párrafo, y para cualquiera de la instrucciones del lenguaje HTML.
Inst.
HTML
<CENTER> El texto y la imagen se centran<BR> <IMG SRC="/iconos1/or_star.gif"> </CENTER>
Resul
tado
El texto y la imagen se centran
Explica
ción
Como se ve la etiqueta de centrado puede afectar a otros elementos como una imagen o cualquier otra estructura del lenguaje HTML.

&nbsp; Espacios en blanco :

     Con esta secuencia de caracteres conseguiremos espacios en blanco que se mostrarán de forma efectiva, pudiendo mostrar más de un espacio en blanco de separación. Se incluirán tantas expresiones &nbsp; como espacios en blanco se desee conseguir.

Caracteres Latinos y especiales

5.2 - Caracteres latinos y especiales

Como representar caracteres especiales

     Los caracteres acentuados y algunos caracteres especiales que usa el lenguaje HTML para definir sus etiquetas no se pueden incluir en un documento de manera normal, se deben utilizar una serie de secuencias de escape que al mostrar el documento se sustituyen por el carácter deseado.

     Estas secuencias de escape comienzan todas con el símbolo ampersand (&), seguido de un texto (siempre en minúsculas) que define el carácter deseado y termina con el símbolo punto y coma (;). El error más común cuando se usan estas secuencias de escape es no utilizar el punto y coma final, en cuyo caso se mostrará el literal que define la secuencia, en lugar del carácter deseado. No es necesario dejar espacios en blanco ni antes ni después de los caracteres especiales, para que queden perfectamente encuadrados en la palabra.

Elementos del lenguaje HTML

     Si incluimos en el texto de un documento HTML el símbolo menor que (<) o mayor que (>) se interpretará siempre como la definición de una etiqueta y por tanto no se mostrarán al interpretar el documento.

     Para expresar estos símbolos y otros del lenguaje HTML usaremos las siguientes secuencias de escape:

Sec. EscapeSimbolo
&lt; Signo < (menor que)
&gt; Signo > (mayor que)
&amp; Signo & (ampersand)
&quot; Se mostrará el signo de comillas "

Caracteres acentuados

     Existen una serie de etiquetas que nos permite mostrar los caracteres acentuados y caracteres latinos (ñ). Estos caracteres si se incluyen en un documento HTML sin utilizar las secuencias de escape, se mostrarán correctamente. Usted en su ordenador con su navegador podrá leer estos caracteres correctamente siempre y cuando tenga el mismo código (español) que el autor del documento.

      Los primeros 127 caracteres del código ASCII son comunes para todos los países e incluyen todas las letras del alfabeto, a partir del 128 son específicos para cada lenguaje, entre estos se incluyen los caracteres acentuados y la letra ñ, por tanto si alguien desde otro país que tenga un código incompatible intenta leer su documento, probablemente encuentre caracteres extraños que no sepa interpretar y por tanto no será capaz de leer los caracteres acentuados.

     Existen diversas secuencias que definen los distintos tipos de acentos: agudo, grave o circunflejo. Para el acento agudo usaremos el literal acute, tanto para las mayúsculas como para las minúsculas. Por tanto incluiremos el símbolo de ampersand (&) la vocal que deseamos acentuar, la palabra acute y el símbolo punto y coma (;). Representándose los acentos de la forma:

Sec. EscapeLetraSec.EscapeLetra
&aacute; á&Aacute; Á
&eacute; é&Eacute; É
&iacute; í&Iacute; Í
&oacute; ó&Oacute; Ó
&uacute; ú&Uacute; Ú

     Para la letra ñ usaremos la secuencia tilde, del siguiente modo:

Sec. EscapeLetraSec.EscapeLetra
&ntilde; ñ &Ntilde; Ñ

     Para el acento grave usaremos grave, siendo en este caso la representación:

Sec. EscapeLetraSec.EscapeLetra
&agrave; à&Agrave; À
&egrave; è&Egrave; È
&igrave; ì&Igrave; Ì
&ograve; ò&Ograve; Ò
&ugrave; ù&Ugrave; Ù

Otros Símbolos

     Para expresar una carácter por su valor en el código ASCII, usaremos el símbolo #, seguido de su equivalente numérico.

     Para el acento circunflejo utilizaremos el literal circ y para la diéresis utilizaremos el literal uml.

     Para expresar los símbolos de apertura interrogación, apertura de exclamación y estos acentos usaremos:

Sec. EscapeLetraSec.EscapeLetra
&#191; ¿&#161; ¡
&uuml; ü&Uuml; Ü
&icirc; î&Icirc; Î

     Algunos otros símbolos especiales serán los siguientes.

Sec. EscapeSimboloSec.EscapeSimbolo
&ccedil; ç &Ccedil; Ç
&reg; ® Símbolo de registrado &copy; © Símbolo de Copyright.
&#nnn; Donde nnn es un número decimal, el carácter nnn del código ISO-8859-1 (ASCII).

Cabeceras de resalte

5.3 - Cabeceras

<H1> - <H6> Cabeceras de títulos

     En un documento HTML es posible definir seis tipos distintos de cabeceras que serán normalmente el título del documento y los distintos subapartados que lo forman.

     La etiquetas que definen las cabeceras serán <H1>, <H2>, <H3>, <H4>, <H5>, <H6>. El texto indicado entre las etiquetas de inicio y de fin será el afectado por las cabeceras:

     Para la instrucción:

<H1>Este texto aparecerá resaltado</H1>

     el resultado será:

Este texto aparecerá resaltado

     Lo normal es utilizar las cabeceras de forma consecutiva y descendente, es decir, comenzaremos el documento con la cabecera <H1> que definirá el titulo, luego para los apartados principales utilizaremos la cabecera <H2>, para subapartados <H3>, etc ... Utilizándolas así de forma consecutiva.

     Sin embargo podremos utilizar cualquier cabecera en el punto que queramos del documento para resaltar cualquier texto. El modo en que se presentan las cabeceras pueden variar de un navegador a otro, y solo se puede asegurar que se mostrará de distinta forma en orden de importancia. Lo normal es que la <H1> sea negrita y muy grande, <H2> negrita y grande, <H3> itálica y grande.

<Hn ALIGN=CENTER>: Alineación de la cabecera

     Puede presentar un atributo, que especificará que la cabecera se mostrará centrada. ALIGN=CENTER.

     La forma de expresarlo será:

     <H1 ALIGN=CENTER>Este texto aparecerá resaltado y centrado</H1>

Ejemplos de Cabeceras

Tamaño y Color de la Fuentes de Caracteres

5.4 - Tamaño y Color de las fuentes de caracteres

Utilidad

     En el apartado anterior se vio el modo de definir los distintos títulos de documento, mediante cabeceras. Estas son poco flexibles y predeterminadas.

     Existe otra etiqueta HTML que permite una más sencilla adaptación del tamaño de las fuentes y permite además modificar su color.

     Con esta podremos incluir texto resaltado en medio de una frase, con las cabeceras no es posible ya que estas introducen automáticamente un salto de línea detrás, y permitirá incluir párrafos de distintos tamaños o colores, proporcionando una mayor versatilidad y pudiendo crear efectos más espectaculares.

     La etiqueta que permite esto se llama FONT y presenta atributos que nos permiten modificar el tamaño y color del texto incluido entre la etiqueta de inicio y fin.

<FONT SIZE=n> : Tamaño de la fuente

     El atributo SIZE permite indicar el tamaño de la fuente, su valor puede estar entre 1 y 7. Incrementándose de tamaño progresivamente desde 1, que es la fuente de menor tamaño, hasta 7 que la fuente de mayor tamaño. El texto normal equivale a la fuente de tamaño 3, por tanto los valores menores que 3 serán fuentes más pequeñas que el texto normal y las mayores que 3 serán de mayor tamaño.

     El tamaño también puede indicarse de forma relativa, indicando el incremento o detrimento a partir de la fuente base. Por defecto la fuente base será 3, por tanto si se indica como valor +1 la fuente será de tamaño 4.

     Existe una etiqueta que redefine la fuente por defecto, esta etiqueta es: <BASEFONT SIZE ...>

     Los elementos de tamaño de fuentes pueden ser definidos para todo un documento, teniendo validez dentro de elementos tales como listas y formularios, pero no tendrán validez global en las tablas, debiendo definir cada una de las celdas al tamaño de fuente deseado.

Ejemplos de tamaños de fuentes

Inst. HTMLMuestraExplicación
<FONT SIZE=2>Muestra</FONT>MuestraObtendriamos en este caso texto de tamaño de fuente 2
<FONT SIZE=6>Muestra</FONT>MuestraEste texto es de tamaño de fuente 6
<FONT SIZE=-1>Muestra</FONT>MuestraObtendriamos también en este caso texto de tamaño de fuente 2, pero lo definiríamos de forma relativa: 3-1=2
<FONT SIZE=+2>Muestra</FONT>MuestraAsí definiríamos fuente de tamaño 6 de forma relativa: 3+2=5
<FONT SIZE=6> Muestra <FONT SIZE=1> Muestra </FONT> Muestra </FONT>Muestra Muestra Muestra Se pueden combinar en una misma frase varios tamaños de fuentes
<FONT SIZE=4> Muestra <B> <I> < A HREF="http://www.uca.es"> Muestra </A> </I> Muestra </B> </FONT>Muestra Muestra Muestra Se pueden combinar con elementos de resalte e hiperenlaces

<BASEFONT SIZE=n> : Fuente por defecto

     Definirá el tamaño de la fuente que se considerará como base para definir los tamaños de fuente relativos.

     Esta etiqueta no define el tamaño de la fuente por defecto, para el texto normal, y solo se usa para cálculos de tamaño de fuente relativos. La utilidad no es muy amplia, y se podría utilizar cuando en un documento en el que todos los tamaños estén definidos de forma relativa y se desee cambiar de forma global el tamaño de las fuentes.

     Si no incluye esta etiqueta el valor base para estos cálculos es 3, con esta se puede variar, como se ve en el ejemplo.

Inst. HTMLMuestraExplicación
<FONT SIZE=-2>Muestra</FONT>

<BASEFONT SIZE=5>

<FONT SIZE=-2>Muestra</FONT>

Muestra MuestraEl nuevo valor para el calculo del tamaño relativo será 6, notándose el efecto en el tamaño de las fuentes

<FONT COLOR=texto color ó rrvvaa> : Color de la fuente

     El atributo COLOR nos permite definir el color que tendrá el texto incluido entre las etiquetas de inicio y fin. Este atributo solo funciona en el Internet Explorer de Microsoft y en el Netscape versión 2.0 o superior.

     El modo de definir los colores es similar al explicado para los atributos de BODY, al que le remitimos si no le quedo claro.

     Este atributo puede ser definido de forma conjunta con el atributo SIZE, o de forma independiente, siendo atributos de la misma etiqueta. Si se define el atributo SIZE solo, el color del texto que define será el por defecto, si se define con la etiqueta COLOR solo, el tamaño será el de la fuente base.

     Al igual que en el caso del tamaño de la fuente pueden ser utilizados junto con otros elementos del lenguaje HTML como listas y formularios y pueden ser utilizados conjuntamente con los elementos de resalte

     El cambio de color no afectará al texto o elementos incluidos en un hiperenlace, utilizándose para estos el color por defecto definido en la etiqueta BODY.

Ejemplos de definición de colores de fuentes

     Algunos ejemplos de la definición de colores de fuente podrían ser:

Inst. HTMLMuestraExplicación
<FONT COLOR=FF00FF>Muestra</FONT>Muestra El texto se mostrará de un color lila, al mezclar los colores rojo y azul.
<FONT COLOR=AQUA>Muestra</FONT>Muestra También se puede utilizar uno de los colores predefinidos.
<FONT SIZE=5 COLOR=red> Muestra </FONT>MuestraSe puede combinar con el tamaño de fuente
<FONT COLOR=NAVY> Mue<FONT SIZE=4 COLOR=BLUE>str</FONT>a </FONT>Muestra Se pueden combinar varios colores en una misma frase o palabra.
<H3> <FONT COLOR=81426E> Mu<I>es</I>tra </FONT> </H3>

Muestra

Pueden ser utilizados junto con otros elementos de resalte como cabeceras, estilos físicos y lógicos, etc ...

Estilos Físicos y Lógicos

5.5 - Estilos físicos y lógicos

Estilos físicos y Estilos lógicos

     Como estilos definiremos los distintos efectos que se pueden aplicar al texto normal. Estos efectos son los resaltes (negrita, cursiva, subrayado, etc ...) que se pueden usar.

     En HTML existen dos grupos principales de estilos los lógicos y los físicos. Los físicos son aquellos que siempre causan un mismo efecto (negrita, cursiva, ...) y los lógicos indicarán un tipo de texto (cita, nombre de persona) que por sus características tiene un modo de mostrarse propio.

     Se pueden utilizar ambos estilos para especificar un mismo efecto, por ejemplo para obtener una frase resaltada podemos usar el estilo físico (negrita) o el estilo lógico (STRONG) y en ambos casos el resultado puede ser el mismo.

     Es más recomendado, sin embargo, utilizar el estilo lógico, ya que en este el modo en que se ven los distintos efectos puede ser definido por el usuario, de forma que se pueda obtener una presentación personalizada. Además en un futuro los navegadores podrían añadir modos más sofisticados de presentar los distintos estilos y si están definidos de forma lógica la adaptación es más sencilla. Y por último y más importante, al utilizar estilos lógicos el modo de escribir HTML se hace independiente de como se presentará finalmente el texto, se utilizará el estilo según el tipo de texto que sea y no según como se debe presentar.

     La tendencia actual de los navegadores es el uso de los estilos físicos olvidando un poco la versatilidad de los estilos lógicos, pero sin embargo ambos estilos pueden ser usados indistintamente, sin ningún problema.

Estilos Físicos.

     El efecto se aplicará al texto expresado entre la etiquetas de inicio y fin. Los estilos físicos son los siguientes:

Etiqueta HTMLEjemploDescripción
<B> Ejemplo Negrita.
<I> EjemploCursiva.
<TT> Ejemplo Maquina de escribir, muestra una fuente de caracteres de espaciado fijo.
<BLINK> EjemploParpadeo.
<SUB> Ejemplo Subíndice. Para Netscape 2.0+
<SUP> Ejemplo Superíndice. Para Netscape 2.0+
<BIG> Ejemplo Texto grande, se utilizará el mayor tamaño de fuente. Para Netscape 2.0+
<SMALL> Ejemplo Texto pequeño, se utilizará la fuente de menor tamaño. Para Netscape 2.0+

      Los estilos se pueden combinar entre sí obteniendo cualquier efecto deseado.

Ejemplo
Inst.
HTML
Este texto es <B>negrita, <I>cursiva y <BLINK>parpadeante </BLINK></I></B>
Resul
tado
Este texto es negrita, cursiva y parpadeante
Explica
ción
El texto es por tramos negrita, cursiva y parpadeante.

Estilos lógicos

     En este caso se definen las situaciones o tipos de frases y estas tomarán la representación más adecuada a cada caso. Estos estilos son:

Etiqueta HTMLEjemploDescripción
<ADDRESS>
Ejemplo
Se utilizará para especificar direcciones de correo electrónico.
<BLOCKQUOTE>
Ejemplo
Introduce citas textuales o texto destacado, en este caso el texto se separará del texto circundante y se ajustará a los márgenes derecho e izquierdo.
<CITE> EjemploIndica el titulo de una película o un libro.
<CODE> EjemploCódigo fuente de un lenguaje de programación.
<DFN> EjemploEspecifica una definición.
<EM> EjemploIndicará enfasis.
<KBD> EjemploTexto introducido desde el teclado.
<SAMP> EjemploMensajes de estado de la computadora.
<STRIKE> EjemploTexto desechado, tachado.
<STRONG>EjemploEspecificará texto resaltado.
<VAR>Ejemplo Indicará una variable.

Listas

5.6 - Definición de Listas

Las listas en HTML

      El lenguaje HTML proporciona un modo sencillo de representar elementos en forma de lista. Dentro de una lista de puede incluir cualquiera de los elementos HTML, e igualmente una lista puede incluirse dentro de formularios, tablas, etc.

     Existen principalmente tres tipos de listas: las listas no ordenadas, las listas ordenadas y las listas de definiciones.

<UL> Listas no ordenadas

     Este tipo de lista se usan para enumerar elementos que no tengan un orden definido. Se especificará con el elemento <UL>, todo lo que se incluya dentro de esta etiqueta y la de cierre formará la lista. Con los elementos <LI> se indicarán cada uno de los componentes de la lista. El formato es el siguiente:

<UL TYPE = DISK ó CIRCLE ó SQUARE >
         <LH> Titulo de la lista </LH>
         <LI> Elemento 1
         <LI> Elemento 2
                 . . .
         <LI> Elemento n
</UL>

     Para marcar los distintos elementos de la lista se usarán unos símbolos, que pueden ser un disco (DISK), un circulo (CIRCLE) ó un cuadrado (SQUARE), seleccionables con el atributo TYPE.

     Con la etiqueta <LH> definiremos el titulo de la lista, este es opcional y aparecerá en la parte superior de esta.

     Igualmente es posible definir listas de varios niveles, que será listas anidadas, listas dentro de listas. Y combinar este tipo de lista con las que se explicarán en los proximos apartados.

Ejemplos
Inst.
HTML
<UL >
<LH> Titulo </LH>
<LI> Elemento 1
<LI> Elemento 2
<LI> Elemento 3
</UL>
Resul
tado
    Titulo
  • Elemento 1
  • Elemento 2
  • Elemento 3
Explica
ción
Este será el caso básico de lista no ordenada. Se podrán incluir tantos elementos como se deseen y estos podrán ser texto normal, texto resaltado con alguno de los estilos, imágenes, etc ...
Inst.
HTML
<UL TYPE=SQUARE>
<LI> Elemento 1
<LI> Elemento 2
<UL TYPE=CIRCLE>
<LI> Elemento 3.1
<LI> Elemento 3.2
</UL>
<LI> Elemento 4
</UL>
Resul
tado
  • Elemento 1
  • Elemento 2
    • Elemento 3.1
    • Elemento 3.2
  • Elemento 4
Explica
ción
Ahora definimos una lista anidada, es decir una lista dentro de una lista, basta con incluir el nuevo elemento UL dentro del elemento UL de la lista original. En este ejemplo también usamos distintos elementos definibles con TYPE, para indicar los componentes de la lista.

<OL> Listas ordenadas

     Estas listas serán similares al caso anterior pero en este se usa un número para indicar el orden de cada elemento de la lista. El ser ordenada no significa que ordene los elementos alfabéticamente sino que los elementos guardan un orden que es el número que indexa la lista.

<OL START = n TYPE = A ó a ó I ó i ó 0 >
         <LH> Titulo de la lista </LH>
         <LI> Elemento 1
         <LI> Elemento 2
                 . . .
         <LI> Elemento n
</OL>

     El punto de comienzo siempre será el 1 si no se indica en START con otro valor de comienzo y el tipo de numeración puede seleccionarse con el atributo TYPE. Sus posibles valores son:

Ejemplos
Inst.
HTML
<OL >
<LI> Elemento 1
<LI> Elemento 2
<LI> Elemento 3
</OL>
Resul
tado
  1. Elemento 1
  2. Elemento 2
  3. Elemento 3
Explica
ción
Este será el caso básico de lista ordenada.
Inst.
HTML
<OL TYPE=I>
<LI> Elemento 1
<LI> Elemento 2
<OL TYPE=a>
<LI> Elemento 3.1
<LI> Elemento 3.2
</OL>
<LI> Elemento 4
</OL>
Resul
tado
  1. Elemento 1
  2. Elemento 2
    1. Elemento 3.1
    2. Elemento 3.2
  3. Elemento 4
Explica
ción
Ahora definimos una lista anidada y usamos distintos elementos para la numeración de las opciones.

<DL> Listas de definiciones

     En esta lista existirán dos elementos la definición y el termino, se usará principalmente para listas en las que se incluirán una palabra o frase y su definición (diccionario). El termino aparecerá pegado en el borde izquierdo y la definición aparecerá ligeramente tabulada a partir del borde izquierdo.

     Se puede usar de forma separada la definición y el termino, pudiendo por tanto incluir solo definiciones o solo términos. El incluir solo términos podría usarse para sangrar el comienzo de un párrafo.

<DL>
     <LH>Titulo de la lista </LH>
     <DT>Termino 1
     <DD>Definición 1
     <DT>Termino 2
     <DD>Definición 2
     . . .
     <DD>Termino N
     <DT>Definición N
</DL>

El titulo de las lista <LH> como en los casos anteriores es opcional.

Ejemplos
Inst.
HTML
<DL >
<DT> Coche
<DD> Vehiculo de cuatro ruedas
<DT> Moto
<DD> Vehiculo de dos ruedas
</DL>
Resul
tado
Coche
Vehiculo de cuatro ruedas
Moto
Vehiculo de dos ruedas
Explica
ción
Como se ve se coloca en una posición la definición y en otra el termino.
Ejemplos
Inst.
HTML
<dl>
<dd><font SIZE=+1><img src="/servicios/iconos/confis.gif" align=middle border=0> Conexión a la Red.</font></A>

<dl>
<dd><A HREF="/servicios/conecfisica/Normativ.html"><img src="http://www2.uca.es/iconos1/redstar.gif" align=middle border=0> Normativa de conexión a Red.</A>
<dd><A HREF="/servicios/conecfisica/software.htm"><img src="http://www2.uca.es/iconos1/redstar.gif" align=middle border=0> Instalación de Software de Comunicaciones.</A>
<dd><A HREF="/servicios/solicitud.htm"><img src="http://www2.uca.es/iconos1/redstar.gif" align=middle border=0> Solicitud de Servicios de Comunicaciones.</A>
<dd><A HREF="/servicios/conecfisica/proxy.html"><img src="http://www2.uca.es/iconos1/redstar.gif" align=middle border=0> Servidores Proxy.</A>
</dl>

<dd><a href="/servicios/actuali-soft/software.html"><dd><font SIZE=+1><img src="http://www2.uca.es/iconos/icono541.gif" align=middle border=0> Actualización del Software de Comunicaciones.</font></a><p>
<dd><A NAME="correo"><dd><font SIZE=+1><a HREF="http://www.uca.es/servicios/correo/correo.htm"><img src="/servicios/iconos/mail.gif" align=middle border=0> Mensajería Electrónica.</a></font></A>
<dl>
<dd><A HREF="/servicios/correo/prac-eudora/portada.html"><img src="http://www2.uca.es/iconos1/redstar.gif" align=middle border=0>Manual Práctico de Eudora.</A>
<dd><A HREF="/servicios/correo/mensaje_institu.html"><img src="http://www2.uca.es/iconos1/redstar.gif" align=middle border=0>Mensajería Institucional.</A>
</dl>
</dl>
Resul
tado
Conexión a la Red.
Normativa de conexión a Red.
Instalación de Software de Comunicaciones.
Solicitud de Servicios de Comunicaciones.
Servidores Proxy.

Actualización del Software de Comunicaciones.

Mensajería Electrónica.
Manual Práctico de Eudora.
Mensajería Institucional.
Explica
ción
En este ejemplo utilizaremos solo los elementos DD (definiciones) para crear un menu, en el que se incluyen tanto imágenes como texto. La lista de definiciones se utiliza para mostrar el menu de forma correcta con sus correspondientes niveles y subniveles.

     Es posible anidar cualquier tipo de lista entre sí, incluso listas de distinto tipo.

Hiperenlaces

5.7 - Hiperenlaces

Hiperenlaces

     Es la utilidad básica del hipertexto, permite indicar zonas de texto o imágenes que si son seleccionados por el lector del documento nos traslada a otros documentos HTML o otras zonas del documento actual.

     Para definir un hiperenlace podemos utilizar cualquier elemento HTML, no debe ser texto necesariamente, podemos usar, cabeceras (<Hn>), cualquiera de los estilos, una imagen, etc .... Un hiperenlace igualmente podrá definirse dentro de cualquier elemento HTML: listas, párrafos de texto, tablas, formularios.

     El texto del hiperenlace aparece normalmente resaltado sobre el texto normal, en azul y subrayado, en el caso de las imágenes, si tienen definido un borde este aparecerá resaltado en color azul. La mayoría de los navegadores cuando la zona por la que pasa el cursor es sensible, este cambia de aspecto indicándolo y en la parte baja de la pantalla se indica el hiperenlace que se activa al pulsar en esa zona. Mediante los atributos de BODY es posible cambiar el color de los hiperenlaces.

     El texto que define el hiperenlace debe ser clarificador sobre el documento al que referenciamos, debemos evitar referencias especificas que hagan al texto poco legible. Igualmente deberá concordar con el texto del párrafo donde se englobe, se debe evitar el uso de pulse aquí.

     Por ejemplo:

Puede encontrar mas información sobre vacas pulsando aquí

      se podría sustituir por:

Disponible más información sobre vacas.

     El usuario que lea el texto ya sabrá al verlo resaltado que puede pulsar ahí.

<A HREF=...> Hiperenlace

     Son los enlaces con documentos externos al actual. En este caso se indicará una URL que definirá el documento al que se accede si se sigue el enlace. La forma de indicarlo será:

<A HREF="URL a la que se accede">Texto del Hiperenlace</A>

     El texto indicado entre las etiquetas de comienzo y de fin se presentará de forma resaltada y en el caso de seleccionar este texto el documento actual cambiará por el especificado en la URL.

     Igualmente se puede indicar una imagen como enlace, en este caso entre las etiquetas del hiperenlace indicamos la inclusión de la imagen, también dentro de la etiqueta del hiperenlace se pueden incluir cualquiera de las etiquetas del lenguaje HTML para cambiar el aspecto del texto afectado por el hiperenlace. Un ejemplo sería:

<A HREF="URL a la que se accede"><IMG SRC="Imagen"> y también texto</A>

     En este caso aparecerá la imagen con el borde resaltado para indicar que es un hiperenlace.

     Ademas de enlaces con el servicio http podremos utilizar cualquiera de los servicios de internet que se puede expresar en una URL. Es posible por tanto indicar enlaces a servidores FTP, servidores GOPHER o de NEWS, indicando como URL aquella que identifica al servidor que queremos acceder.

     Es importante indicar el nombre completo de la maquina a la que se accede, es decir el nombre y el dominio. Si se indica www, las maquinas de la red local si podrán localizarlo, pero para maquinas externas la referencia podría ser a otra maquina. Por tanto se debe indicar www2.uca.es para asegurar que es accesible independientemente del lugar desde el que se conecte el cliente.

     Utilizaremos los hiperenlaces para dividir de forma conveniente la información. Hay que evitar los documentos excesivamente largos, estos se pueden dividir en distintos documentos a los que acceder por hiperenlaces, a partir de un índice.

URL absolutas y relativas

     Para definir la URL podemos utilizar direcciones absolutas o relativas. Por direcciones absolutas entenderemos la URL completa, es decir, http://maquina.dominio/camino/fichero.html. En el caso de las relativas todo lo que no pongamos de la URL se tomará de la URL del documento que contiene el hiperenlace, por ejemplo si no indicamos el servidor, se considerará el actual y si solo indicamos un fichero html se considerará que se encuentra en el servidor y directorio del documento que lo referencia.

     Una URL relativa comenzará siempre por un nombre de directorio o por un fichero, ya que en este caso se asume que el servicio y el servidor - (http://maquina.dominio) - es el mismo del documento actual.

     Puede comenzar de alguna de las siguientes formas:

Algunos ejemplos serían:

Ejemplos
Nos encontramos en el documento http://www.uca.es/visita/cadiz.html y en este se encuentran los siguientes hiperenlaces.
URL
rela
tiva
<A HREF="../internet/internet.html"> ..
URL
que se
activa
http://www.uca.es/internet/internet.html
Explica
ción
En este caso se indica la URL completa, por tanto no es relativa y no se podrá utilizar ningún dato de la posición actual.
URL
rela
tiva
<A HREF="/internet/internet.html"> ..
URL
que se
activa
http://www.uca.es/internet/internet.html
Explica
ción
En este caso al no indicar el servidor tomaremos el servidor del documento donde estaba el hiperenlace: www.uca.es y al comenzar la directorio por / se indica que este se toma desde la raíz del servidor, no siendo valido en este caso ningún dato del directorio actual.
URL
rela
tiva
<A HREF="bahia/cadiz.html"> ...
URL
que se
activa
http://www.uca.es/visita/bahia/cadiz.html
Explica
ción
En este caso el directorio se toma desde el directorio actual al no comenzar con la barra "/". Como comienza con un directorio, se considera que este se encuentra a partir del directorio donde está el documento actual
URL
rela
tiva
<A HREF="bahia.html"> ...
URL
que se
activa
http://www.uca.es/visita/bahia.html
Explica
ción
En este caso solo se indica un fichero HTML, por tanto se considera que este fichero se encuentra en el mismo directorio del documento que los referencia. Considerando por tanto el mismo servidor y el mismo camino, pero distinto directorio.

     Es una buena costumbre utilizar direcciones relativas, además de ahorrar escritura, permite que la página pueda ser cambiada de directorio o de servidor sin necesidad de cambiar todos los enlaces, haciendo por tanto al documento más portable.

     Como se vio en el capitulo dedicado a la cabecera de un documento HTML, la etiqueta BASE indica la dirección por defecto en los enlaces, esto tendrá efecto en las URL relativas, caso de indicarse se considerará esta como dirección base y no la actual del documento.

<A NAME=...> Elemento Ancla

     Sirve para indicar puntos de un documento que son accesibles directamente. Marcará las distintas zonas de un documento. La forma de indicarlo es:

<A NAME="Id. del ancla">Texto del ancla</A>

     A cada ancla se le dará un nombre distinto que será el que se utilice luego para referenciarlo. El texto que define a la etiqueta no tendrá ningún tipo de resalte, y solo se utiliza como punto de destino del hiperenlace.

     La forma de especificar un enlace que acceda a un punto determinado del mismo documento es:

<A HREF="#Id. del ancla">Texto del enlace al ancla</A>

     Será un enlace a la zona del documento actual que se había marcado con la etiqueta indicada. También es posible acceder a un ancla de un documento externo de la forma:

<A HREF="Dirección URL#Id. del ancla">Texto del enlace al ancla</A>

     De esta forma se podrá acceder a puntos determinados o secciones de un documento de forma directa.

     La utilidad principal es la creación de índices en documentos largos, al comienzo del documento se especifica el índice con enlaces a las distintas anclas y dentro del documento se indica el comienzo de cada apartado con el ancla que lo define.

Imágenes

5.8 - Imágenes

Imágenes en los documentos HTML

     Una de las características principales del lenguaje HTML y de la WWW es la introducción de elementos multimedia, en este apartado veremos como introducir gráficos y ficheros de imágenes en un documento HTML.

     En un documento HTML se puede incluir cualquier imagen en alguno de los siguientes formatos gráficos: GIF, JPEG ó XBM. El formato más extendido y practico es el GIF, todos los navegadores gráficos de la Web soportan este formato, además existen gran cantidad de programas de tratamiento de gráficos que permiten grabar los gráficos o convertir gráficos a GIF. Este formato, así mismo, utiliza algoritmos de compresión que hacen que sus ficheros sean de corto tamaño y apropiados para su transmisión por la red.

     El formato GIF es más recomendado para iconos, gráficas, ... y el formato JPEG es más útil para imágenes reales como paisajes, personas, ...

     Para poder utilizar otro formato gráfico, necesitará usar un enlace cuyo destino sea el fichero del gráfico. Al seguir el enlace se le pedirá que indique un programa externo que se encargue de mostrar los ficheros de ese formato gráfico, por lo tanto no pueden insertarse dentro de documentos HTML..

     Existe unos casos especiales en las imagenes GIF, que son las imágenes transparentes y las imágenes animadas.

<IMG SRC=...> Inclusión de Imágenes

     La etiqueta encargada de mostrar imágenes en HTML es IMG y tiene el siguiente formato:

<IMG SRC="URL de la Imagen" ALT="Texto alternativo a la imagen">

     En el punto del fichero HTML en el que queramos que se muestre la imagen incluimos esta etiqueta. Se puede mostrar la imagen, al comienzo del documento, al final o intercalada en el texto. Igualmente se puede insertar una imagen dentro de cualquiera de las estructuras del lenguaje HTML como listas, tablas o formularios. Esta etiqueta no necesita la etiqueta de fin, ya que el efecto de la etiqueta no su produce sobre un texto o algún elemento HTML.

     El atributo SRC indica el fichero de imagen que se incluirá en el documento. Se indicará el camino hasta la imagen en formato URL, el fichero de la imagen deberá tener una extensión apropiada a su formato, por ejemplo si es GIF la extensión será .gif, si es JPEG la extensión será .jpg o .jpeg, si no se cumple esto la imagen no se mostrará de forma correcta.

     Al definir la imagen como una URL, esta imagen no es necesario que se encuentre en el servidor local, pudiendo especificar el camino completo y el servidor donde se encuentra la imagen. En este caso al igual que en los hiperenlaces es posible indicar direcciones de URL relativas al documentos actual, como se vio en el apartado anterior.

     Lo normal es referenciar una imagen que se encuentre en el servidor local, ya que el acceso a imágenes en servidores externos puede ser más lento. Por tanto conviene copiar las imágenes e iconos que se usen al servidor local.

     A continuación se explica la utilidad de cada unos de los atributos de la etiqueta IMG.

<IMG ... ALT=...> Texto alternativo

     El atributo ALT, indicará un texto alternativo a mostrar si no fue posible mostrar la imagen. Se usa para navegadores que no permitan mostrar imágenes, sean solo texto o tenga inhabilitado el mostrar imágenes. Se recomienda cuando existan en el documento imágenes usadas como botones, para mostrar un texto en vez del botón en navegadores que no puedan mostrar gráficos, de esta forma se consigue que todos los usuarios puedan consultar sus páginas.

<IMG .. ALIGN=...> Alineación de la imágen

     Indica como se alinea el texto que sigue a la imágen con respecto a esta. Indicará si la primera frase del texto se colocará en la parte alta de la imágen, TOP, en el punto medio de la imagen, MIDDLE, o en la parte de abajo de la imágen, BOTTOM.

     Tambien se pueden utilizar alineaciones un poco más avanzada, TEXTTOP se alinea justo al comienzo del texto más alto de la línea (TOP se alinea al tamaño del primer carácter de la línea). ABSMIDDLE, es el centro real de la imagen, con MIDDLE se coloca el texto a partir del punto medio, con ABSMIDDLE el texto aparece centrado con la imagen. ABSBOTTOM coloca el texto justo al final de la imagen. Se recomienda que se usen estos últimos al ser más precisa la alineación, aunque solo son validos para los navegadores más avanzados.

Ejemplos
Inst.
HTML
<IMG SRC="/iconos1/phone5.gif" ALIGN=TOP><B>Numero de Telefono<B>. En este apartado se indica el número de teléfono que puede utilizar si tiene cualquier duda o pregunta que hacer sobre este manual.
Resul
tado
Numero de Teléfono. En este apartado se indica el número de teléfono que puede utilizar si tiene cualquier duda o pregunta que hacer sobre este manual.
Explica
ción
Como se ve solo aparece la primera frase alineada en la parte alta (TOP) de la imágen.
Inst.
HTML
<IMG SRC="/iconos1/phone5.gif" ALIGN=MIDDLE><B>Numero de Telefono<B>. En este apartado se indica el número de teléfono que puede utilizar si tiene cualquier duda o pregunta que hacer sobre este manual.
Resul
tado
Numero de Teléfono. En este apartado se indica el número de teléfono que puede utilizar si tiene cualquier duda o pregunta que hacer sobre este manual.
Explica
ción
En este caso el texto está alineado en la parte central de la imágen.
Inst.
HTML
<IMG SRC="/iconos1/phone5.gif" ALIGN=BOTTOM><B>Numero de Telefono<B>. En este apartado se indica el número de teléfono que puede utilizar si tiene cualquier duda o pregunta que hacer sobre este manual.
Resul
tado
Numero de Teléfono. En este apartado se indica el número de teléfono que puede utilizar si tiene cualquier duda o pregunta que hacer sobre este manual.
Explica
ción
El texto está alineado en la parte baja de la imágen.
Inst.
HTML
<IMG SRC="/iconos1/phone5.gif" ALIGN=MIDDLE><IMG SRC="/iconos1/q__mark2.gif">
Resul
tado
Explica
ción
También es posible alinear imágenes entre sí y imágenes respecto a otros elementos HTML

     En los casos anteriores solo se especifica donde se coloca la primera línea del texto y el resto se incluyen debajo de la imágen quedando un efecto muy feo cuando el texto tiene más de una línea. Existen otras alineaciones que incluirán a la imágen insertada dentro del texto. La imágen puede quedar a la izquierda, LEFT o a la derecha, RIGHT. No se podrá utilizar en combinación con las anteriores alineaciones.

Ejemplos
Inst.
HTML
<IMG SRC="/iconos1/phone5.gif" ALIGN=LEFT><B>Numero de Telefono<B>. En este apartado se indica el número de teléfono que puede utilizar si tiene cualquier duda o pregunta que hacer sobre este manual.
Resul
tado
Numero de Telefono. En este apartado se indica el número de teléfono que puede utilizar si tiene cualquier duda o pregunta que hacer sobre este manual.
Explica
ción
En este caso aparece la imágen insertada en el texto, de forma que esta se integra en párrafo que la rodea, al contrario que en los casos anteriores
Inst.
HTML
<IMG SRC="/iconos1/phone5.gif" ALIGN=RIGHT><B>Numero de Telefono<B>. En este apartado se indica el número de teléfono que puede utilizar si tiene cualquier duda o pregunta que hacer sobre este manual.
Resul
tado
Numero de Telefono. En este apartado se indica el número de teléfono que puede utilizar si tiene cualquier duda o pregunta que hacer sobre este manual.
Explica
ción
En este ejemplo aparece la imágen alineada a la derecha.

<IMG .. BODER=...> Borde de la imágen

     Indicará el tamaño del borde de la imagen, si la imagen se encuentra dentro de un hiperenlace el borde de esta será del color apropiado para indicarlo, en caso contrario el borde será invisible. Si se desea que no se muestre el borde cuando la imagen sea un enlace se usará BORDER=0.

Ejemplos
Inst.
HTML
<A HREF="imagenes.htm"><IMG SRC="/iconos1/q_mark3.gif"></A>
Resul
tado
Explica
ción
Como se ve si no se indica nada se muestra un borde entorno a la imágen que activa el hiperenlace.
Inst.
HTML
<A HREF="imagenes.htm"><IMG SRC="/iconos1/q_mark3.gif BORDER=0"></A>
Resul
tado
Explica
ción
Con el atributo BORDER al valor 0 no se muestra este borde entorno a la imágen, que sirve de hiperenlace.

<IMG .. HEIGHT=... WIDTH=...> Tamaño de la imágen

     Es posible cambiar el tamaño de la imágen de forma que pueda ajustarse como se desee, pudiendo ampliar o disminuir este.

     El atributo HEIGHT Determina el alto de la imagen a mostrar, se especifica en puntos de la pantalla (pixeles) o en tanto por ciento sobre el tamaño del documento. En caso de que la imagen sea mayor o menor se escalará a este tamaño.

     El atributo WIDTH indica el ancho al que se mostrará la imagen, escalándola a este tamaño. También se expresará en pixeles o en tanto por ciento.

     No es necesario indicar el ancho y el alto, se puede especificar solo uno de las dimensiones, ajustándose la otra a la proporción de la imagen. Es recomendable indicar solo uno de estos parámetros para que la imágen no se muestre deformada. Igualmente se debe usar el valor relativo en tanto por ciento si se desea que la imágen guarde siempre una misma proporción con respecto al texto. Si se desea mostrar dos imágenes y queremos que una ocupe un cuarto de la pantalla y la otra el espacio restante, se indica en una el ancho (WIDTH) del 25% y en la otra del 74%, no indicando en ningún caso el alto (HEIGHT), de esta forma independientemente como sea el tamaño de la ventana del navegador e independientemente del monitor del cliente, siempre se podrán mostrar ambas imágenes en la misma línea.

Ejemplos
Inst.
HTML
<IMG SRC="/iconos1/world.gif" WIDTH=100 HEIGHT=25>
Resul
tado
Explica
ción
Si no se indican bien ambos valores, teniendo en cuenta la proporción de la imágen esta puede aparecer deformada.
Inst.
HTML
<IMG SRC="/iconos1/world.gif" WIDTH=75>
Resul
tado
Explica
ción
En este se ve como al indicar uno solo de los parámetros, el otro se ajusta apropiadamente a la proporción de la imágen.
Inst.
HTML
<IMG SRC="imagenes/obra_ani.gif" ALIGN=MIDDLE WIDTH=9%> <IMG SRC="/barras1/constr.gif" WIDTH=89%>
Resultado
Explica
ción
Si varia el tamaño de la ventana de su navegador, comprobará que el tamaño de las imágenes cambia, pero guardan la misma proporción, el obrero ocupa un 9% de la ventana y la barra el 86% restante. Y siempre se mostrarán ambas imágenes en la misma línea.

<IMG .. HSPACE=... VSPACE=...> Espaciado de separación de la imágen

     El atributo HSPACE indica el espaciado horizontal que debe separar a la imagen del texto o cualquier otro elemento circundante. Se especificará en puntos. Es similar a BORDER pero en este caso el margen no se destaca en el caso de los hiperenlaces y además es posible indicar separadamente el margen horizontal y el vertical. Con el atributo VSPACE se indica el margen vertical.

Ejemplos
Inst.
HTML
<IMG SRC="/iconos1/pr_star.gif"><IMG SRC="/iconos1/or__star.gif">
<IMG SRC="/iconos1/pr_star.gif" HSPACE=100><IMG SRC="/iconos1/or__star.gif">
Resul
tado

Explica
ción
Como se ve en el segundo caso las imágenes aparecen separadas 100 puntos. El espaciado es igual a la derecha que a la izquierda, por tanto también aparece la imagen separada del borde.

Creación de una imagen GIF transparente

Creación de una imagen GIF transparente

En una imagen GIF se puede definir un único color transparente, de forma que en la parte de la imágen que contenía ese color se verá el fondo definido para la página HTML.

Para seleccionar el color que queremos hacer transparente utilizaremos el programa Lview . Antes de poder definir un color transparente debemos guardar la imagen como GIF89, ya que solo se puede definir en este tipo de imagenes GIF. Luego seleccionamos Options -> Background Color, si esta opción no es accesible, entonces es que la imagen no se encuentra en un formato valido, una vez hecho esto nos aparecerá la siguiente pantalla:

Donde podremos elegir el color que deseamos hacer transparente. Una vez seleccionado el color pulsaremos OK y grabaremos la imágen.

La forma más comoda de seleccionar el color transparente es la opción Dropper , al activarla nos permitirá seleccionar el color transparente directamente pulsando sobre un color de la imágen.

Sí no aparece esta ventana entonces tendrá que guardar la imágen como GIF89, y volver a cargar la imágen otra vez a fin de que se produzca el cambio de formato. Imágenes Sensibles

5.9 - Imágenes Sensibles

Imágenes Sensibles

     Una de las características principales del lenguaje HTML es la posibilidad de crear imágenes sensibles o mapeadas, que son imágenes en las que se definen diversas zonas que activan distintos hiperenlaces, al pulsar con el cursor sobre una de estas zonas activaremos el hiperenlace que la define. La imágen se dividirá en distintas áreas que definirán documentos a los que es posible acceder.

     Para crear una imagen sensible será necesaria la especificación de las distintas áreas de la imagen y los enlaces que activaran cada una de ellas. Esto se puede hacer a mano indicando las coordenadas o bien lo normal es utilizar algún programa. Existen programas que permiten la definición de las imágenes sensibles, en estos se presentará la imagen en pantalla y mediante un puntero se podrán ir indicando las distintas zonas. Estas zonas podrán ser: rectángulo, circulo, línea poligonal o un punto. A cada una de estas zonas le asignamos una URL que será la que se active cuando se pulse en esa zona determinada. Con este programa crearemos un fichero con la extensión .map que será el que defina el mapa de la imagen.

     El contenido normal de este tipo de ficheros serán líneas del estilo:

figura_geométrica URL coord1 coord2 ... coordn

     Donde figura_geométrica podrá ser una de:

     La URL del enlace podrá ser una local, que debe empezar desde el directorio raíz, no vale relativa, o bien indicar la URL completa.

     Las coordenadas serán pares x e y separados por comas.

     Hay que tener en cuenta que las figuras que definen las zonas no deben solaparse ya que un punto de las imágenes no puede activar dos enlaces. En caso que se solapen se utilizará la que estuviera definida en primer lugar en el fichero del mapa.

      Si se utiliza la directiva point, no tiene sentido definir la URL por defecto, default, ya que siempre el lugar donde se pulse estará más próximo a un punto. En otro caso siempre será necesario indicar la dirección por defecto, salvo que el mapeado cubra toda la imagen, ya que si no se define en caso de pulsar en un lugar sin mapear producirá un error.

     Existen navegadores, los más antiguos, y programas de indexación, los robots de busqueda más extendidos (lycos, excite, etc ...) que no pueden seguir los enlaces que se encuentran en una imagen sensible. Por tanto se recomienda incluir en formato texto en la parte baja de la imágen los enlaces que se activan con la imagen sensible. De esta forma los documentos enlazados se pueden activar de las dos maneras.

Ejemplo

ISMAP como referenciar la imágen sensible

     Una vez creado el fichero que mapeará la imagen solo queda referenciarlo en el documento HTML. Para ello debemos definir la imagen y el enlace que se efectuará. Existe dos formas:

<A HREF="http://www2.uca.es/cgi-bin/imagemap/camino_hasta- _el_mapa/fichero_mapa.map"><IMG SRC="camino_imagen_sensible.gif" ISMAP></A>

     En el primer caso la parte primera define el programa que trata la imagen sensible http://www2.uca.es/cgi-bin/imagemap, la segunda parte especifica el fichero que mapea la imagen /camino_hasta_el_mapa/fichero_mapa.map. Dentro del hiperenlace se incluye la referencia de la imagen con el atributo ISMAP para indicar que se trata de una imagen sensible.

     En este caso no es necesario poner el camino al programa imagemap sino solo la referencia al fichero del mapa. El mismo gráfico se referencia así:

<A HREF="/camino_hasta_el_mapa/fichero_mapa.map"><IMG SRC="camino_imagen_sensible.gif" ISMAP></A>

     El atributo ISMAP en la imagen es importante al igual que la extensión .map del fichero que mapea la imagen.

     El segundo caso es más rápido ya que es el servidor el que se encarga de determinar las distintas zonas del mapa e indicar el enlace que se debe seguir, en lugar de llamar al programa imagemap para que lo trate. Dependiendo del servidor instalado usaremos uno u otro método, en nuestro caso usaremos el segundo.

Ejemplo

Imágenes sensibles definidas desde el cliente

     En el caso anterior la interpretación del mapa de la imagen sensible correspondía al servidor, por tanto cuando el usuario pulsa sobre una imágen sensible, las coordenadas se pasan al servidor y este se encarga de comprobar usando el fichero que mapeaba la imágen. Por tanto para activar un enlace haría falta enviar los datos al servidor del punto donde se ha pulsado y que este indique el enlace que se activa, lo cual hace la consulta un poco más lenta. Y además a priori no es posible saber que zonas son sensibles y cuales no ni tampoco que enlace se activa en cada zona.

     Para solucionar esto se introdujo la posibilidad de crear imágenes sensibles definidas desde el cliente, de esta forma es el cliente (su navegador de la WWW) el que interpreta la imágen sensible y puede mostrar los enlaces que se activan en cada zona y que zonas son sensibles y cuales no. En este caso no es necesario indicar el documento por defecto ya que solo se podrán activar las zonas útiles de la imágen.

     Existe una nueva etiqueta HTML que permite definir estas imágenes sensibles interpretadas desde el cliente, su formato es el siguiente:

<MAP NAME="nombre">

<AREA SHAPE=RECT COORDS="x11,y11,x12,y12" href="URL">
<AREA SHAPE=RECT COORDS="x21,y21,x22,y22" href="URL">
     ...
<AREA SHAPE=RECT COORDS="xn1,yn1,xn2,yn2" href="URL">

</MAP>

     Cada una de las líneas con la etiqueta AREA, definen una zona sensible. Actualmente solo es posible definir zonas sensibles delimitadas por rectángulos, no pudiendo definir otras. Con el atributo COORDS se definen las coordenadas de la zona sensible, estas serán la coordenada del primer vértice xi1, yi1 y la coordenada del vértice opuesto xi2, yi2. La etiqueta HREF indica la URL que se activa con esta zona sensible.

     La forma de referenciarlo es utilizando el atributo USEMAP, indicando el mapa a usar, cuando se defina la imágen la forma será:

<IMG SRC="..." USEMAP="#nombre" >

     Como nombre utilizaremos el nombre que se le dio al mapa su definición.

     Esta etiqueta solo es soportada por los navegadores más modernos, Internet Explorer de Microsoft y el Netscape 2.0, por tanto los navegadores antiguos no podrían interpretar este tipo de mapas, sin embargo es posible utilizar ambas formas de definición a la vez, permitiendo que el mapa sea interpretado por todos los navegadores la forma será:

<A HREF="mapa.map"><IMG SRC="..." ISMAP USEMAP="#nombre" ></A>

     De esta forma si el navegador entiende la etiqueta USEMAP lo interpreta como un mapa sensible definido en el cliente, en caso contrario se interpreta como un mapa sensible normal y que debe ser interpretado por el servidor.

Ejemplo

Imagenes

Ejemplo de Imágen Sensible

Creación de una Imágen sensible

     En este apartado se explicará paso a paso, la creación de una imágen sensible. Para ello se utilizará el programa más básico para ello, mapedit, que se incluye en el Paquete Básico para la Creación de documentos HTML

     Al iniciar el programa seleccionaremos File -> Open/Create, y aparecerá la ventana que se muestra en el grafico adjunto,. En esta indicaremos el nombre del fichero que definirá el mapa de la imágen (Map File), que deberá tener la extensión .map, este será el fichero que habrá que transferir al servidor para referenciar la imágen sensible, lo llameremos ejemplo.map, en el apartado siguiente indicaremos el fichero GIF sobre el que se aplicará la imágen sensible (GIF Filename).

     Una vez cargada la imágen obtenemos la siguiente pantalla:

     En la que se muestra la imágen y sobre la que será posible ya definir las zonas sensibles de la imágen. en el menú Tools, estan expresadas todas las figuras que se pueden utilizar en la imágen, estas son: Polygon, para una línea poligonal, Circle, para definir un circulo y Rectangle, define un rectángulo.

     Para seleccionar cada una de las zonas del dibujo, seleccionaremos las figura correspondiente, en nuestro caso será Rectangle, una vez hecho esto nos situaremos en el primer vertice y pulsaremos el botón izquierdo del ratón, fijando el primer vertice, luego arrastraremos hasta situarnos en el vertice opuesto, y ahí pulsaremos el botón derecho del ratón y obtendremos la siguiente ventana en la que nos será posible introducir al URL que activará esta zona.

     Definir una linea poligonal será similar, pero en este caso marcaremos con el botón izquierdo del ratón todos los puntos que forman el polígono y cuando lleguemos a su fin pulsaremos el botón derecho del ratón y podremos introducir la URL, la línea poligonal no será necesario terminarla, uniendose automáticamente el primer y último vertice.

     Una vez que definamos todas las zonas sensibles de la imágen, podemos utilizar la opción Test+Edit, que nos permirá probar y en su caso editar las distintas zonas de la imágen, obteniendo un muestra de la zona activa como se ve en la imágen:

     La opción para definir la URL por defecto, es decir, la que se activará cuando no se pulse sobre ninguna de las zonas definidas será File -> Edit Default URL.

     Una vez definidas todas las zonas de la imágen y la URL por defecto, podremos grabar el mapa de la imágen sensible con File -> Save.

     Obteniendo una fichero .map con el siguiente contenido:

default http://www2.uca.es/manual-html/prueba/noimagen.htm
rect http://www2.uca.es/manual-html/prueba/boton1.htm 8,10 61,63
rect http://www2.uca.es/manual-html/prueba/boton2.htm 62,10 134,36
rect http://www2.uca.es/manual-html/prueba/boton3.htm 62,36 134,64

Este fichero se transferirá al servidor y como se vió en con anterioridad existirán dos formas de referenciarlo:

Imágen sensible interpretada por el servidor
Inst.
HTML
<A HREF="ejemplo.map"><IMG SRC="imgmap.gif" ISMAP> </A>
Resul
tado
Explica
ción
Como se ve pulsando en las distintas zonas de la imágen se activan los enlaces correspondientes, pero no hay forma de saber que zonas son sensibles y que enlaces se activan en cada zona.

Imágen sensible interpretada por el cliente
Inst.
HTML

<MAP NAME="ejemplo">
<AREA SHAPE=RECT COORDS="8,10,61,63" HREF="http://www2.uca.es/manual-html/prueba/boton1.htm" >
<AREA SHAPE=RECT COORDS="62,10,134,36" HREF="http://www2.uca.es/manual-html/prueba/boton2.htm" >
<AREA SHAPE=RECT COORDS="62,36,134,64 " HREF="http://www2.uca.es/manual-html/prueba/boton3.htm" >
</MAP>

<CENTER>
<A HREF="ejemplo.map"><IMG SRC="imgmap.gif" ISMAP USEMAP="#ejemplo"> </A> <P>
[ <A HREF="http://www2.uca.es/manual-html/prueba/boton1.htm">boton 1 </A> |
<A HREF="http://www2.uca.es/manual-html/prueba/boton2.htm">boton 2 </A> |
<A HREF="http://www2.uca.es/manual-html/prueba/boton3.htm">boton 3 </A>]
</CENTER>

Resul
tado

[boton 1 | boton 2 | boton 3]

Explica
ción
En este caso la definición es más larga, pero si su navegador es el Internet Explorer o el Netscape 2.0, notará que este es capaz de identificar las zonas sensibles de la imágen y muestra en la parte inferior de la ventana los enlaces que se activan cuando se pulsa en cada zona.
Ademas es más rápida la identificación de que enlace se activa en cada zona.
En este caso no hay que definir URL por defecto ya que siempre se pulsará en una de las zonas definidas.
En la parte de abajo de la imágen se han incluido los enlaces que activa en formato texto para el caso de que el navegador no soporte imágenes sensibles (o sea un robot de busqueda).
Insercción de elementos multimedia

5.10 - Inserción de elementos multimedia

¿ Multimedia ?

     Como se ha explicado hasta ahora las posibilidades multimedia del lenguaje HTML se limita a insertar imágenes dentro de un texto, mostrar un fondo en el documentos y modificar los colores que presentarán los distintos textos. Con las instrucciones básicas de HTML que hemos visto hasta ahora esto es lo máximo que se puede conseguir, la posibilidad de mostrar vídeo o sonido en un documento HTML esta limitada a la capacidad y a la configuración del navegador.

     La forma básica de incluir un fichero de un formato no reconocido por el navegador es incluirlo en un hiperenlace de forma que cuando el usuario siga el hiperenlace el programa navegador llame a una aplicación externa que trate este tipo de ficheros. El navegador tendrá definida una lista aplicaciones que trabajarán con los formatos más comunes de fichero de vídeo, audio o imágenes. Esta opción es poco operativa ya que no podrían incluirse en el documento actual.

     El Internet Explorer de Microsoft incluye una serie de etiquetas y atributos que permiten el uso de elementos multimedia, pero no es estándar y se puede asegurar que no será posible verlos en maquinas distintas a los PC con windows, ni en navegadores distintos a este.

     Otra aproximación la ha realizado Netscape con la inclusión de los Plug-ins, estos son programas que se añaden al navegador de Netscape versión 2.0 y permiten tratar diversos tipos de ficheros, de esta forma podrá insertarse estos tipos de ficheros dentro de una página HTML, permitiendo mostrar vídeo en distintos formatos (mpeg, avi, mov), interpretar sonido, en varios formatos (au, mid, ), incluir ficheros de Adobe Acrobat (pdf), mostrar ficheros VRML, etc... El principal problema es que estos plug-in no son estándar ni están realizados por el mismo fabricante, ni son todos de libre distribución, y además solo son validos hasta ahora en PC´s con windows. Además la correcta visión del documento dependerá de que el usuario disponga del plug-in correspondiente instalado. En la última versión de Netscape (3.0 aunque todavía es beta), se incluyen por defecto plug-in´s para audio, vídeo y VRML, por lo tanto cuando se extienda el uso de este navegador se podría asegurar la reproducción de este tipo de ficheros.

Extensiones Multimedia de Internet Explorer

     El Internet Explorer de Microsoft permite mostrar vídeo en formato AVI y reproducir sonido, de una forma sencilla, para eso añade una nueva etiqueta y un atributo a la etiqueta de mostrar imágenes.

<BGSOUND ...> Reproducción de audio

     <BGSOUND SRC="fichero de sonido" LOOP= n ó INFINITE>

     Incluiremos una única vez esta etiqueta en el fichero que deseemos tenga música de fondo, en el atributo SRC se indicará el fichero de audio que se debe reproducir, siendo la URL hasta este fichero. El fichero podrá ser de formato .wav, .au o MIDI (.mid). El atributo LOOP indica cuantas veces se ejecutará la pieza musical, podrá indicarse un número o INFINITE que indicará de forma indefinida.

<IMG DYNSRC ...> Reproducción de vídeo

     <IMG DYNSRC="fichero de sonido" LOOP= n ó INFINITE CONTROLS START= FILEOPEN ó MOUSEOVER>

     En este caso es un nuevo atributo para la etiqueta IMG, caso de existir este, en vez de mostrar una imágen mostrará un vídeo en formato AVI (Vídeo for Windows), se puede utilizar todas los atributos normales de IMG, pudiendo usar las distintas alineaciones y colocaciones respecto al texto, además se podrá variar el tamaño del vídeo con los atributos HEIGHT y WIDTH.

     Se añaden otros atributos que solo se pueden aplicar al vídeo, el atributo IMGSRC indica la URL del fichero que se mostrará, el atributo LOOP indica el número de veces que se mostrará el vídeo, el atributo CONTROLS indicará si se mostrarán los botones de control, que permitirán para, volver a reproducir, rebobinar, .... El atributo START indica si la secuencia de vídeo empezará al abrir el fichero (FILEOPEN) o cuando pase el cursor del ratón encima (MOUSEOVER).

     De no poder mostrar el vídeo por tratarse de otro navegador (por ejemplo Netscape), se podrá indicar una imágen que se muestre de manera alternativa, incluyendo el atributo SRC.

Plug-in's

     Plug-in es un programa que extiende las capacidades del navegador de Netscape en un modo especifico, dado por ejemplo la capacidad de mostrar vídeo, audio, ficheros de un determinado formato (ficheros PDF, presentaciones de ASAP, fichero VRML, etc ...).

     No existe actualmente un conjunto estándar de plug-in´s para cada tipo de ficheros, sino que existen diversas aplicaciones, realizadas por diversos fabricantes, y no todas de libre distribución. Se puede asegurar que todas las aplicaciones serán compatibles y si por ejemplo se referencia un fichero de sonido en formato .wav en su página, este podrá ser oído por todos aquellos que tengan un plug-in para este tipo de ficheros.

     Para que un fichero multimedia que es incluido en una página sea visible por el usuario debe cumplir dos condiciones: la primera es que posea el navegador de Netscape en su versión 2.0 y la segunda es que tenga el plug-in correspondiente que trata el fichero deseado. Por tanto se recomienda un uso moderado de los plug-in´s utilizando ficheros que sean de formatos comunes y un uso complementario en una página, ya que muchos usuarios no podrán verlo. Es aconsejable incluir un enlace en el que se referencie el fichero, de esta forma un usuario podrá seguir el enlace y ver el fichero en un visualizador externo si lo posee.

     Existe una instrucción que permite incluir cualquier tipo de archivo dentro de un documentos HTML, pero se verá en el próximo apartado.

<EMBED> Insertar Ficheros

     Esta instrucción permite la inclusión de cualquier tipo de fichero en la posición del documento HTML donde se especifique. Su funcionalidad es similar a la IMG para incluir imágenes. En este caso para que pueda mostrase el fichero deberá tener el plug-in adecuado que lo trata.

     El formato es el siguiente:

<EMBED SRC="URL del fichero" WIDTH=n ó n% HEIGHT=n ó n%>

     En el atributo SRC se indicará el fichero que se desea mostrar, y los atributos WIDTH y HEIGHT se indicará el tamaño que tendrá en objeto insertado, siendo estos opcionales.

     El fichero que podrá ser un fichero de vídeo, audio, imágen de algún tipo distinto a las por defecto, fichero de presentaciones, etc... solo podrá ser visto por el usuario si este posee el plug-in correspondiente que trata ese tipo de ficheros, en caso contrario mostrará un mensaje de error indicando al usuario que debe proveerse de ese plug-in para poder consultar el documento de forma correcta.

     En el caso que se pueda mostrar el plug-in se incluirá en la zona del documento que se indicó pudiendo así de este modo insertar dentro de un documento HTML películas de vídeo o incluir sonido de fondo.

     Se recomienda un uso limitado de esta posibilidad, ya que existirán muchas personas que no posean el Netscape 2.0, y no posean el plug-in correspondiente, y por lo tanto no podrán ver todo el esplendor de su página.

Tablas

5.11 - TABLAS

Introducción

     Permite la representación de datos por filas y columnas, en forma tabular. La definición es muy flexible indicando solo los elementos que forman cada fila y columna, calculándose de forma automática el tamaño que deben tener las celdas. En una tabla podemos introducir todo tipo de elementos del lenguaje HTML como imagenes, enlaces, texto, listas, cabeceras, formularios, etc.

     No es necesario definir inicialmente el número de filas o columnas ya que estas se calculan según se va definiendo la tabla. En el caso que una fila tenga más columnas que otra, en las otras filas las columnas se representarán vacias, no siendo necesario que todas las filas sean iguales.

<TABLE> Definición de la Tabla

     Para definir una tabla usaremos la etiqueta <TABLE>, que tiene el siguiente formato:

<TABLE BORDER="tamaño del borde" >
       ... Definición de la tabla ...
</TABLE>

     En la etiqueta inicial TABLE definiremos los atributos que afectarán a toda la tabla, todos los atributos son opcionales. Todo lo que se incluya dentro de la instrucción de tabla se considerará como tal, pudiendo definir tablas anidadas (tablas dentro de tablas).

Ejemplo de tabla 1

     Puede presentar los siguientes atributos:

     Si se especifica se dibujará un borde alrededor de la tabla y separanado los distintos campos que presenta. Indicaremos un número que especificará el tamaño del borde, por defecto será 0, es decir, no se dibujará ningún borde. Aunque no se dibuje el borde sí se mantendrá el espaciado los elementos de la tabla.

Ejemplo de tabla 4

Ejemplo de tabla 5

     Indica el espacio que debe existir entre las distintas celdas de la tabla. Por defecto será 2. Si se indica 0 no habrá ningún espacio entre las celdas.

     Es la cantidad de espacio entre el borde de la celda y el contenido de esta, por defecto es 1. Si se indica 0 las celdas aparecerán sin separación.

Ejemplo de tabla 6

     Será el ancho de la tabla, se puede indicar como valor absoluto o como porcentaje del ancho del documento. En el primer caso se definirá en puntos y en el segundo en función del tamaño del documento (tamaño de la ventana del visualizador). Se recomienda utilizar tamaños de tabla en porcentaje del documento, ya que de esta forma la tabla queda perfectamente ajustada para cualquier tamaño del documento.

Ejemplo de tabla 9

     Definirá el alto de la tabla, a igual que WIDTH, se puede indicar en valor absoluto o en porcentaje. En este caso es más recomendado en valor absoluto ya que el alto es más dificil que pueda coincir con el tamaño de la ventana.

Dentro de la instrucción de la tabla se incluirán los diversas etiquetas que defininen el contenido de la tabla.

<CAPTION> Titulo de la tabla

      Especifica el titulo de la tabla, este se mostrará resaltado en la parte superior externa de la tabla. Siempre se mostrará centrado horizontalmente.

<CAPTION ALIGN=TOP|BOTTOM>Titulo de la tabla</CAPTION >

     Con el atributo ALIGN indicaremos si el titulo debe aparecer arriba (TOP) o debajo (BOTTOM) de la tabla.

<TR> Fila de la tabla

     Definirá cada una de las filas de la tabla y especificará los parámetros que afectarán a todas las celdas de la fila. Por cada elemento TR que se incluya se creará una fila de la tabla. No es necesario indicar la etiqueta de cierre </TR>. En caso de tablas anidadas será necesario incluir la etiqueta de cierre.

<TR ALIGN= LEFT ó CENTER ó RIGHT VALIGN= TOP ó MIDDLE ó BOTTOM >

     Se podrá especificar por defecto la alineación que tendrán los elementos dentro de las celdas.

     Indica la alineación del elemento dentro de la celda, en este caso afectará a todos los valores situados en la fila actual, tambien se podrá indicar individualmente en los elementos TD. Puede tomar uno de los siguientes valores:

  • LEFT: Alineación a la izquierda de la celda. Este el valor que se toma por defecto
  • RIGHT: Alineación a la derecha.
  • CENTER: Indicará centrado.

     Indicará la alineación vertical del dato dentro de la celda. Se podrá especificar donde se colocarán los datos dentro de la celda. Afectarán a toda la fila. Los valores que puede tomar son:

  • TOP: Parte superior de la celda.
  • MIDDLE: Centrado verticalmente dentro de la celda.
  • BOTTOM: En la parte baja de la celda.

     Indicará el color de fondo que tendrán todas las celda de la fila de la tabla. El formato para definir los colores es el mismo al que se usa para los atributos de BODY. Esta etiqueta solo es valida para el Internet Explorer de Microsoft y el Netscape 3.0 o superior.

Ejemplo de tabla 10

<TH> y <TD> Una celda de la tabla

     Define cada una de las celdas de una fila de la tabla, TH se usará para definir una celda de tipo cabecera, en este caso se mostrarán destacados en negrita y TD para definir una celda de datos. Estos elementos deben aparecer tras los elementos TR para definir cada una de las columnas de la fila. Existirá una columna por cada elemento TD ó TH que se defina. Aunque se puede indicar la etiqueta de cierre, no es necesario al tomarse implicitamente. Utilizaremos los elementos TH para los titulos de las filas o columnas y los elementos TD para los datos.

<TH ALIGN= (LEFT | CENTER | RIGHT | JUSTIFY | DECIMAL ) VALIGN= ( TOP | MIDDLE | BOTTOM | BASELINE ) WIDTH=Tamaño BGCOLOR=color ROWSPAN=“Filas que debe contener la celda” COLSPAN= “Columnas que ocupa la celda” NOWRAP >

<TD ALIGN= (LEFT | CENTER | RIGHT | JUSTIFY ) VALIGN= ( TOP | MIDDLE | BOTTOM ) WIDTH=Tamaño BGCOLOR=color ROWSPAN=“Filas que debe contener la columna” COLSPAN= “Columnas que ocupa la celda” NOWRAP>

Ejemplo de tabla 3

     Pueden presentar los siguientes atributos:

     Indica la alineación horizontal del dato dentro de la celda, se especificará individualmente para cada una de las celdas. Su significado es igual que el expresado para la etiqueta TR.

Ejemplo de tabla 7

     Indicará la alineación vertical del dato dentro de la celda. Se especifica individualmente para cada celda, el formato es el mismo que el expresado para TR.

Ejemplo de tabla 8

     Especifica el ancho que tendra la columna de la tabla, se puede especificar eln valor absoluto, en puntos de la pantalla o en tanto por ciento del tamaño de la tabla.

     Indicará el color de fondo que tendrá la celda de la tabla. El color hay que indicarlo independientemente para cada una de las celdas de la columna. El formato para definir los colores es el mismo al que se usa para los atributos de BODY. Esta etiqueta solo es valida para el Internet Explorer de Microsoft y el Netscape 3.0 o superior.

Ejemplo de tabla 10

     Indicará el número de filas que ocupará está celda en la misma fila. En este caso la celda se expandirá ocupando tantas celdas de la tabla inicial como se especifique. Esto permite definir por ejemplo celdas de cabecera que afecten a varias celdas de la tabla, ó bien, crear una fila que ocupen toda la tabla.

Ejemplo de tabla 2

      Indicará el número de columnas que ocupará la celda actual, obtendremos una celda que ocupa varias columnas. Igual que el anterior pero para el caso de las columnas.

Ejemplo de tabla 2

      Se usará para que no se divida la línea por defecto. Si la usamos las líneas de texto no se dividirán dentro de la celda en varias líneas. Por tanto si la linea es muy larga la columna de la tabla será tan ancha como la línea, solo se dividirá si se usa el elemento
.

Ejemplos de Tablas

Ejemplos de Tablas

Una Tabla Simple:

1 2 3
4 5 6

<TABLE BORDER>
     <TR>
          <TD>1 <TD> 2 <TD> 3
     <TR>
          <TD>4 <TD> 5 <TD> 6
</TABLE>

Demostración de TH, COLSPAN y ROWSPAN:

Numeros
Num1 2 3
4 5 6

<TABLE BORDER>
     <TR>
          <TD><TH COLSPAN=3>Numeros
     <TR>
          <TH ROWSPAN=2>Num<TD>1 <TD> 2 <TD> 3
     <TR>
          <TD>4 <TD> 5 <TD> 6
</TABLE>

Demostración de Multiples Cabeceras:

Datos1 Datos2
Datos1.1 Datos1.2 Datos2.1 Datos2.2
1234
5678

<TABLE BORDER>
     <TR>
          <TH COLSPAN=2>Datos1 </TH><TH COLSPAN=2>Datos2 </TH>
     </TR>
     <TR>
          <TH>Datos1.1 </TH><TH>Datos1.2 </TH><TH>Datos2.1 </TH><TH>Datos2.2 </TH>
     </TR>
     <TR>
          <TD>1</TD><TD>2</TD><TD>3</TD><TD>4</TD>
     </TR>
     <TR>
          <TD>5</TD><TD>6</TD><TD>7</TD><TD>8</TD>
     </TR>
</TABLE>

Tabla sin Borde:

1 2 3
4 5 6

<TABLE>
     <TR>
          <TD>1 <TD> 2 <TD> 3
     <TR>
          <TD>4 <TD> 5 <TD> 6
</TABLE>

Tabla con Borde=15:

1 2 3
4 5 6

<TABLE BORDER=15>
     <TR>
          <TD>1 <TD> 2 <TD> 3
     <TR>
          <TD>4 <TD> 5 <TD> 6
</TABLE>

Ejemplos con CELLPADDING y CELLSPACING:

1 2 3
4 5 6

<TABLE BORDER CELLPADDING=10 CELLSPACING=0>
     <TR>
          <TD>1 <TD> 2 <TD> 3
     <TR>
          <TD>4 <TD> 5 <TD> 6
</TABLE>

1 2 3
4 5 6

<TABLE BORDER CELLPADDING=0 CELLSPACING=10>
     <TR>
          <TD>1 <TD> 2 <TD> 3
     <TR>
          <TD>4 <TD> 5 <TD> 6
</TABLE>

1 2 3
4 5 6

<TABLE BORDER CELLPADDING=10 CELLSPACING=10>
     <TR>
          <TD>1 <TD> 2 <TD> 3
     <TR>
          <TD>4 <TD> 5 <TD> 6
</TABLE>

Ejemplos de alineaciones ALIGN:

Cabecera de Titulo 1 Cabecera de Titulo 2 Cabecera de Titulo 3
Celda 1 Celda 2 Celda 3
Celda 4 Celda 5 Celda 6

<TABLE BORDER>
     <TR>
          <TH ALIGN=CENTER>Cabecera de Titulo 1 <TH ALIGN=CENTER> Cabecera de Titulo 2 <TH ALIGN=CENTER> Cabecera de Titulo 3
     <TR>
          <TD ALIGN=LEFT>Celda 1 <TD ALIGN=CENTER> Celda 2 <TD ALIGN=RIGHT> Celda 3
     <TR>
          <TD ALIGN=RIGHT>Celda 4 <TD ALIGN=CENTER> Celda 5 <TD ALIGN=LEFT> Celda 6
</TABLE>

Ejemplos de alineaciones verticales VALIGN:

Cabecera de Titulo 1 Cabecera de Titulo 2 Cabecera de Titulo 3 Cabecera de Titulo 4
Celda 1 Celda 2 Celda 3 Celda 4
Celda 5 Celda 7 Celda 8
Celda 9 Celda 10 Celda 12

<TABLE BORDER>
     <TR>
          <TH ALIGN=CENTER>Cabecera de Titulo 1
          <TH ALIGN=CENTER> Cabecera de Titulo 2
          <TH ALIGN=CENTER> Cabecera de Titulo 3
           <TH ALIGN=CENTER> Cabecera de Titulo 4
     <TR>
          <TD ALIGN=LEFT>Celda 1
          <TD ALIGN=CENTER> Celda 2
           <TD ALIGN=RIGHT> Celda 3
          <TD ALIGN=CENTER> Celda 4
     <TR>
          <TD ALIGN=LEFT VALIGN=TOP>Celda 5
          <TD ALIGN=CENTER><IMG SRC="/imagenes/bibliog.gif">
          <TD ALIGN=RIGHT VALIGN=BOTTOM> Celda 7
          <TD ALIGN=CENTER VALIGN=MIDDLE> Celda 8
     <TR>
          <TD VALIGN=BOTTOM>Celda 9
          <TD VALIGN=MIDDLE> Celda 10
          <IMG SRC="/imagenes/mundog.gif">
          <TD VALIGN=TOP> Celda 12
</TABLE>

Ejemplos de colores de fondo de las celdas BGCOLOR:
(Solo para el Netscape 3.0 e Internet Explorer)

Cabecera de Titulo 1 Cabecera de Titulo 2 Cabecera de Titulo 3
Celda 1 Celda 2 Celda 3
Celda 4 Celda 5 Celda 6

<TABLE BORDER>
     <TR BGCOLOR=YELLOW>
          <TH>Cabecera de Titulo 1 <TH> Cabecera de Titulo 2 <TH> Cabecera de Titulo 3
     <TR BGCOLOR=WHITE>
          <TD>Celda 1 <TD> Celda 2 <TD> Celda 3
     <TR>
          <TD BGCOLOR=RED>Celda 4 <TD BGCOLOR=WHITE> Celda 5 <TD BGCOLOR=GREEN> Celda 6
</TABLE>

Distintos tamaños de tablas:

Esta es la celda número 1 La dos y por último esta es la celda número 3
Celda 1 segunda fila dos 2 fila y por último esta es la celda número 3 de la última fila

Esta es la celda número 1 La dos y por último esta es la celda número 3
Celda 1 segunda fila dos 2 fila y por último esta es la celda número 3 de la última fila

Esta es la celda número 1 La dos y por último esta es la celda número 3
Celda 1 segunda fila dos 2 fila y por último esta es la celda número 3 de la última fila

Esta es la celda número 1 La dos y por último esta es la celda número 3
Celda 1 segunda fila dos 2 fila y por último esta es la celda número 3 de la última fila

Formularios

5.12 - FORMULARIOS (FORM).

Introducción

     Los formularios son plantillas que permiten la creación de documentos HTML con peticiones de datos. La principal utilidad de los formularios es la posibilidad de crear cuestionarios, encuestas, páginas de comentarios o cualquier documento en la que se desee una interacción por parte del usuario.

     Se podrán definir distintos tipos de recuadros de dialogo, botones de selección, menús de múltiples opciones, ... Para permitir obtener los datos de una manera más intuitiva.

<FORM> Definición de formularios

     Existe una instrucción HTML para la creación de formularios esta es FORM, que tiene la siguiente estructura:

< FORM ACTION="fichero que trata el formulario" METHOD= POST | GET >
...
Elementos que forman el formulario
...
< /FORM>

     Dentro de la etiqueta de formulario se definirán los distintos elementos de petición de datos. Estas instrucciones que se explicarán a continuación definirán los tipos de botones, cajas de dialogo y ventanas para la introducción de datos. Y definirán las variables que almacenarán los datos introducidos por el usuario. Estas etiquetas se incluirán entre la de definición del formulario y la etiqueta de final de formulario.

     Los atributos que presenta la etiqueta FORM son los siguientes:

ACTION:

     Indica el programa que se encargará de tratar los datos del formulario. Este programa debe encontrarse en el servidor y estar escrito en algún lenguaje de programación. A este programa se pasará como parámetros los datos introducidos en el formulario y retornará un código HTML que se mostrará tras procesar el formulario. A este tipo de programas se les llama cgi-bin, y se explican en el último apartado de este manual: (CGI-BIN).

METHOD:

     Indica el protocolo usado para el envío de los datos. Con POST envía los datos en la entrada estándar del programa que trata el formulario y con GET los datos se pasan por parámetro, en la línea de comandos, al programa. El usar uno o otro método vendrá determinado por como son tratados los parámetros en el formulario en el (CGI-BIN). El método de uso más normal será POST.


     Una vez definidas las características globales del formulario incluiremos los distintos botones y cajas de dialogo que lo constituyen. Dentro de la instrucción del formulario podrán incluirse cualquier texto o instrucción HTML, siendo recomendado a fin de poder etiquetar las opciones de entrada y especificar cualquier dato importante relacionado con el formulario. Igualmente un formulario puede ser incluido en algunas instrucciones HTML como las listas, tablas, etc ...

<INPUT> Entrada básica de datos

     La etiqueta INPUT se utiliza para definir gran variedad de tipos de campos de entrada de datos. Por lo general serán entradas de texto corto (a lo sumo una frase) o opciones. El formato básico es el siguiente:

< INPUT TYPE = ( TEXT | PASSWORD | CHECKBOX | RADIO | HIDDEN | SUBMIT | IMAGE | RESET ) NAME = "Variable que toma el valor" VALUE = "Valor de Inicialización" >

     El atributo TYPE se usa para determinar el tipo de recuadro de dialogo de entrada que se está definiendo, a continuación se explicarán por separado cada una de las opciones. El atributo NAME especifica el nombre de la variable que se define. Este nombre será pasado al programa que trata el formulario junto con el valor que le asigno el usuario del formulario. El atributo VALUE suele especificar el valor de inicialización, que será el valor por defecto.

     A continuación se relatan los distintos tipos de instrucciones de entrada.

<INPUT TYPE=TEXT...> Texto corto

     Se utiliza para la entrada de cadenas de texto corto, como por ejemplo nombre de personas, números, fechas o diversos datos que se puedan expresar en una línea de texto.

     Se mostrará un recuadro que ocupa una línea y la que será posible especificar este texto. El formato de la instrucción es el siguiente:

< INPUT TYPE=TEXT NAME="variable" VALUE="valor inicial" SIZE="tamaño" MAXLENGTH="longitud máxima" >

     El tamaño de la ventana de introducción de texto se fija con el atributo SIZE, que indica el tamaño de la ventana en caracteres. Aquí solo se define la parte visible, pero el usuario podrá introducir más texto si lo desea. Para indicar el máximo número de caracteres que se permiten en la entrada usaremos: MAXLENGTH. El atributo NAME indica el nombre de la variable que toma el valor de la entrada y VALUE especifica el valor de inicialización del campo. De todos los atributos solo será obligatorio NAME, siendo el resto opcionales. En la entrada se podrán usar cualquier tipo de caracteres incluso los acentuados, en su formato normal.

Ejemplos
Inst.
HTML
Nombre: <INPUT TYPE=TEXT NAME=variable>
Resul
tado
Nombre:
Explica
ción
Será una introducción de texto básica.
Inst.
HTML
Nombre: <INPUT TYPE=TEXT NAME=variable VALUE="Texto de Inicialización">
Resul
tado
Nombre:
Explica
ción
En este caso introduciremos un texto de inicialización que será el texto por defecto y es editable por el usuario.
Inst.
HTML
Nombre: <INPUT TYPE=TEXT NAME=variable VALUE="Texto de Inicialización" SIZE=50 MAXLENGHT=55>
Resul
tado
Nombre:
Explica
ción
Ahora definimos con SIZE un mayor tamaño del recuadro y con MAXLENGHT definimos el número máximo de caracteres que se pueden introducir.

<INPUT TYPE=PASSWORD...> Palabras secretas

     Es similar al anterior pero en este caso no se imprimen los caracteres según se van introduciendo, se muestra un asterisco en vez de los caracteres. Solo se puede ver el número de caracteres, pero no valor. Se usa para la introducción de claves de acceso (passwords) y datos que no deban ser vistos al introducirlos. El formato es:

< INPUT TYPE=PASSWORD NAME="variable" VALUE="valor inicial" SIZE="tamaño" MAXLENGTH="li>longitud máxima" >

Ejemplo
Inst.
HTML
Password: <INPUT TYPE=PASSWORD NAME=variable VALUE="password">
Resul
tado
Password:
Explica
ción
El texto introducido no puede ser visto, pero si es posible saber el número de caracteres que se introducen.

<INPUT TYPE=CHECKBOX> Botones de selección

     El checkbox es un botón que puede presentar dos estados activado o desactivado. El formato es el siguiente:

< INPUT TYPE=CHECKBOX NAME="variable" CHECKED>

     Se requiere el atributo NAME. Los valores que tomará la variable serán on ó off, dependiendo de su estado. Si el botón estaba activado cuando se envían los datos del formulario se enviaran el nombre de la variable y el valor que indique su estado. Si se incluye el atributo CHECKED el botón se encontrará activado en la inicialización.
Si se indica el atributo VALUE,cuando se envian los datos con el botón activado se mandará la variable con el valor indicado y en caso contrario no se mandará ningún valor.

Ejemplo
Inst.
HTML
<INPUT TYPE=CHECKBOX NAME= variable> Opción
Resul
tado
Opción
Explica
ción
En este caso esta desactivado por defecto y su utilizará en caso de los valores on y off para definir su estado.
Inst.
HTML
<INPUT TYPE=CHECKBOX NAME= variable CHECKED> Opción
Resul
tado
Opción
Explica
ción
Ahora se especifica CHECKED para indicar que por defecto debe estar activado.

<INPUT TYPE=RADIO...> Selección entre múltiples opciones

     Se usa cuando la opción puede tomar un valor simple de una serie de alternativas. En este caso se presentan unos valores opcionales de los que solo puede tomar un valor. Para especificar cada uno de estos valores se incluirá una etiqueta RADIO por cada una de las posibles alternativas, su estructura general será:

< INPUT TYPE=RADIO NAME="variable" VALUE="valor 1" CHECKED >
< INPUT TYPE=RADIO NAME="variable" VALUE="valor 2" >
          . . .
< INPUT TYPE=RADIO NAME="variable" VALUE="valor n" >

Cada una de las etiquetas RADIO tendrá el mismos atributo NAME, y con un distinto atributo VALUE que será el valor que tome si se selecciona esta opción. Para inicializarlo se usa el atributo CHECKED que se indicará solo en la opción que se quiera especificar por defecto.

Ejemplo
Inst.
HTML
<INPUT TYPE=RADIO NAME= variable VALUE=opcion1 >Opción 1<BR>
<INPUT TYPE=RADIO NAME= variable VALUE=opcion2 CHECKED>Opción 2<BR>
<INPUT TYPE=RADIO NAME= variable VALUE=opcion3 >Opción 3<BR>
<INPUT TYPE=RADIO NAME= variable VALUE=opcion4 >Opción 4<BR>
Resul
tado
Opción 1
Opción 2
Opción 3
Opción 4
Explica
ción
En este caso solo es posible seleccionar uno de los posibles valores, la opción CHECKED indica cual es la opción activa por defecto.

<INPUT TYPE=HIDDEN...> Parámetros ocultos

     En este caso no se muestra ningún campo para la entrada de datos al usuario, pero el par variable valor especificado es enviado junto con el formulario. Se suele usar para transmitir información de estado ó control ó para enviar algún tipo de información que no debe ser variada en el formulario, pero sí debe ser enviada junto a este. El formato es:

< INPUT TYPE=HIDDEN NAME="variable" VALUE="valor" >

     Deberá incluir tanto la variable como el valor.

<INPUT TYPE=SUBMIT...> Enviar Datos

     Este botón se usa para enviar los datos del formulario, al pulsar el usuario este botón, se acaba la introducción del formulario y pasa el control al programa indicado en ACTION. En todo formulario debe existir al menos un botón de SUBMIT, si solo incluye un recuadro del tipo TEXT no será necesario incluirlo. El formato es:

< INPUT TYPE=SUBMIT VALUE="mensaje a mostrar" >

     El atributo VALUE especifica una etiqueta no editable que se mostrará en el botón de envío. Lo normal es que este botón no envíe datos, pero si se indica el atributo NAME con un nombre de variable será enviada la variable con el valor de VALUE. Esto puede ser útil si se incluyen distintos botones de SUBMIT para distinguir cual fue pulsado.

Ejemplo
Inst.
HTML
< INPUT TYPE=SUBMIT VALUE="Enviar Datos" >
Resul
tado
Explica
ción
El texto indicado en VALUE es el que etiqueta el botón, al pulsar sobre él se enviarán los datos del formulario

<INPUT TYPE=IMAGE...> Botón de Envío gráfico

     Su funcionalidad es similar al botón de SUBMIT, se usa igualmente para enviar los datos de un formulario, pero en este caso se presenta una imagen como botón. Igualmente al pulsar sobre el botón se enviará el formulario. El formato es el siguiente:

< INPUT TYPE=IMAGE NAME="variable" SRC="URL de la Imagen" >

     El punto de la imagen en el que pulsa el usuario también es pasado al programa interprete del formulario, de forma que la imagen igualmente podría ser un mapa sensible. Se pasarán dos parámetros x e y con las coordenadas del punto donde pulso, siendo el programa interprete el encargado de determinar la zona donde se pulsó, si se desea.

Ejemplo
Inst.
HTML
<INPUT TYPE=IMAGE SRC="boton.gif">
Resul
tado
Explica
ción
Se muestra la imagen como botón de envío, sustituyendo al botón de SUBMIT.

<INPUT TYPE=RESET...> Borrar los datos

     Este botón se usa para volver a los valores por defecto todos los elementos del formulario, borrando todos los datos introducidos por el usuario. Su formato es el siguiente:

< INPUT TYPE=RESET VALUE="Etiqueta a mostrar" >

     El atributo VALUE especifica la etiqueta que tendrá el botón.

<TEXTAREA> Texto en múltiples líneas

     Permite la introducción de un texto que puede abarcar varias líneas, introduciendo este en forma de párrafo. El formato general será:

<TEXTAREA NAME="variable" ROWS=Filas COLS=Columnas>
        Texto de Inicializaci& oacute;n que puede
         incluir varias l&iacute;neas.
</TEXTAREA>

     En este caso se presenta una ventana del tamaño especificado con los atributos ROWS, filas, y COLS, columnas. El texto expresado entre la etiqueta de inicio y de final sirve para indicar que texto aparecerá inicialmente en la ventana, en este texto se podrán incluir las marcas del lenguaje HTML, pero solo se tendrán en cuenta para incluir acentos y otro tipo de efectos. Los atributos ROWS y COLS determinan el tamaño de la ventana visible, el texto se podrá extender más allá de estos limites.

Ejemplo
Inst.
HTML
<TEXTAREA NAME=variable ROWS=10 COLS=54>
        Texto de Inicializaci&oacute;n que puede
         incluir varias l&iacute;neas.
</TEXTAREA>
Resul
tado
Explica
ción
Se puede especificar el tamaño de la ventana para introducir datos e indicar un texto de inicialización, aunque este será opcional.

<SELECT> Elección entre múltiples opciones

     Se usa para menús simple o múltiples. Define menús de tipo pop-up (menú de barras) y ofrece una alternativa más compacta al uso de botones RADIO o CHECKBOX. Su formato es el siguiente:

<SELECT NAME="variable">
< OPTION SELECTED VALUE=valor1> Opción Primera
< OPTION VALUE=valor2> Opción Segunda
        . . .
< OPTION VALUE=valorn> Opción Enésima
</SELECT>

     Si se desea que sea un menú múltiple se deberá incluir el atributo MULTIPLE en la etiqueta de SELECT, en este caso se mostrarán todas las opciones en forma de tabla, en el otro caso se mostrará la opción activa y un botón para poder modificar esta opción. En ambos casos solo podrá seleccionarse una de las opciones. Cuando se envía el resultado del formulario la variables NAME tomará el valor de la opción que este activa.

     La etiqueta OPTION que contenga el atributo SELECTED será considerada la opción por defecto, caso de no especificarse ninguna se considerará la primera de las opciones.

Ejemplos
Inst.
HTML
<SELECT NAME="variable">
<OPTION VALUE=1> Opción Primera
<OPTION SELECTED VALUE=2> Opción Segunda
<OPTION VALUE=3> Opción Tercera
</SELECT>
Resul
tado
Explica
ción
Se muestra la opción activa que puede ser cambiada, por defecto esta activada la segunda opción.
Inst.
HTML
<SELECT NAME="variable" MULTIPLE>
<OPTION VALUE=1> Opción Primera
<OPTION SELECTED VALUE=2> Opción Segunda
<OPTION VALUE=3> Opción Tercera
</SELECT>
Resul
tado
Explica
ción
En este caso al ser múltiple se muestran todas las opciones posibles, de las que solo es posible seleccionar una.

CGI, ejecución de binarios

7 - CGI (Common Gateway Interface), ejecución de binarios.

Definición

     Los cgi-bin son programas que se ejecutan en el servidor, pueden servir para tratar información, como pasarela con una aplicación o base de datos o para generar documentos html de forma automática.

     Como se vió con anterioridad, una de las principales utilidades de los cgi-bin es tratar los resultados de un formulario (FORM).

Estos programas pueden ser escritos en cualquier tipo de lenguaje de programación y son ejecutados en el servidor cuando se realiza su referencia. Algo importante es que el programa debe ser ejecutable en el servidor, por tanto al ser el servidor una maquina UNIX, no se puede utilizar por ejemplo los compiladores de los PC, sino los del servidor.

     Los lenguajes más comunes para escribir estos programas son el lenguaje perl, C ó bien un script escrito en cualquier shell (csh, sh, ksh ó zsh).

     Algo importante es que los cgi-bin deben tener una extensión especial .cgi, o bien, encontarse en un directorio especial llamado cgi-bin. Cuando se referencie en una pagina html un binario, cualquier fichero con la extensión cgi, en el servidor se ejecutará este programa y la salida se enviará al cliente de la WWW.

     Para que sea posible ejecutar el binario (cgi-bin), será necesario que el fichero tenga los permisos de forma correcta, para ello tendrá que ejecutar en Unix el siguiente comando:

www2> chmod 755 programa.cgi

     Con esto el programa será ejecutable por el servidor.

     Los cgi-bin se podrán escribir con las instrucciones normales del lenguaje de programación pero hay ciertos aspectos a tener en cuenta:

  1. Variables de entorno
  2. Entrada de datos al cgi-bin
  3. Salida de datos del cgi-bin

Variables de entorno

     Para pasar datos el servidor al cgi-bin utiliza una serie de variables de entorno, que quedan definidas al ejecutar el script. Las variables de entorno más interesantes son:

     El método por el que se realiza la llamada al script, este puede ser GET o POST como se explicó anteriormente cuando se habla de los formularios.

     El cgi-bin puede ser llamado directamente desde el cliente, en esta variable se incluirá toda la información que siga al nombre del cgi-bin, por ejemplo:

http://www2.uca.es/binarios/cgibin.cgi/camino/fichero

PATH_INFO = /camino/fichero

     Será la información adicional que se añade tras el nombre de cgi-bin.

     La información que se incluye será pasada de forma codificada al cgi-bin, de forma que los espacios se convierten en signos '+' y los caracteres especiales se codifican de la forma %xx, donde xx el código ASCII en hexadecimal del caracter. Esto debe ser tenido en cuenta cuando se interprete la informació obtenida en formato URL.

     Una versión decodificada de PATH_INFO, obtiene el camino y lo convierte de camino virtual (en referencia del servidor) a camino real (camino completo).

     Nombre por el que fue llamado el cgi-bin.

     La información que sigue al símbolo ? en la URL que referencia al cgi-bin. Será algún tipo de consulta que se realice al cgi-bin. No necesita ser decodificada de ninguna manera.

     Cuando se utiliza el método GET las variables del formulario se pueden interpretar con esta variable de entorno.

     El formato en que se envian estas variables es el siguiente:

?variable1=valor1&variable2=valor2& ... &variablen=valorn

     El ordenador desde el que se ejecuto el cgi-bin.

     Dirección IP del ordenador remoto que ejecuto el cgi-bin.

     El número de caracteres enviados por el cliente al cgi-bin.

     El cliente de la WWW que ejecuta el cgi-bin, el formato general es:

programa/versión libreria/versión

     El cgi-bin podría enviar un distinto código HTML según cada cliente.

Entrada de datos al cgi-bin

     Para los formularios que utilizan el método POST, la información es enviada al cgi-bin por la entrada estándar (stdin).

     El servidor envía las variables de entorno CONTENT_LENGTH y CONTENT_TYPE indicando la longitud y el tipo de datos enviados. El servidor no esta obligado a enviar una marca de final de fichero tras los datos enviados, por tanto la variable CONTENT_LENGTH debe ser tenida en cuenta para determinar la cantidad de datos enviados. CONTENT_TYPE suele contener el valor application/x-www-form-urlencoded, que indica que se trata de información con codificación URL.

     En esta codificación como se vio antes los espacios se convierten en signos '+' y los caracteres especiales se codifican de la forma %xx, donde xx el código ASCII en hexadecimal del carácter. Por tanto esto debe ser tenido en cuenta cuando se interpreten los datos enviados del formulario. Las variables del formulario se enviarán de la forma:

variable1=valor1&variable2=valor2& ... &variablen=valorn

Salida de datos del cgi-bin

     El cgi-bin debe enviar sus datos a la salida estándar (stdout), esta salida puede ser un documento generado por el cgi-bin o instrucciones al servidor para obtener el documento correcto.

     La salida del cgi-bin debe comenzar con una pequeña cabecera que identificará al documento. Las directivas que definen esta cabecera serán:

     Es el tipo MIME del documento que se retorna. Si tuviera el valor text/html la salida se interpretaría como código html. Por tanto la salida del cgi-bin podría contener instrucciones HTML que serian interpretadas correctamente por el cliente. Otros valores que puede tomar son: text/plain para texto normal ó image/gif, la salida se interpreta como una imagen GIF.

Por ejemplo:

     printf ( "Content-type: text/html\n\n" );

     Sería el comienzo de la salida de cgi-bin escrito en C que comienza a generar código html.

     Indicará al servidor que se esta enviado la referencia a un documento en lugar del documento en sí. Si el valor es una URL, el servidor indicará al cliente que debe realizar un redireccionamiento a esa dirección.

     Esta permitido el uso de información adicional (PATH_INFO) y la directiva ?, pero no la directiva # para indicar un punto determinado dentro de un documento.

     Indicará un código de estado para indicar errores. El formato será nnn xxxxxxx, donde nnn es un número de tres dígitos y xxxxxxx es una cadena de caracteres.

     Tras la cabecera se incluirán dos caracteres de retorno de carro (\n), siendo obligatorio para que sea bien interpretada la cabecera de cgi-bin, si no se respeta esto la salida del cgi-bin podría indicarnos el error "Server Error 500".

     Despues de definida la cabecera se podrá generar la salida del cgi-bin, que se interpretará segú el valor dado a Content-type.

Documentos con Frames

8 - Documentos con Frames

Introducción

     Con las frames es posible dividir la ventana del navegador en varias subregiones (frames), permitiendo mostrar una URL distinta en cada una de ellas. En cada frame se nos permite:

     Esto permite crear nuevos tipos de documentos, en los que por ejemplo se mantendrá una región estática (lista de enlaces, barra de botones, formulario) y otra zona dinámica en la que se mostrará el resultado. De esta forma una de las principales utilidades de las frames es la creación de páginas con un índice (por ejemplo un manual) o una cabecera estática, consiguiendo así una mejora de la navegación al poder acceder al índice de una manera más rapida y efectiva.

     El uso de las frames es útil para cierto tipo de documentos, pero puede llegar a dificultar la navegación, dentro de un documento con frames no tendrá utilidad los botones de documento previo (back) ni documento siguiente (forward), ya que ambos nos trasladarán fuera del documento con frames. Para ver el documento previo en una de las frames debemos utilizar el botón derecho del ratón sobre ella y seleccionar la opción volver en el frame (Back in Frame). Esto hace que cuando se utilicen frames haya que cuidar la correcta transición entre documentos.

     No todos los navegadores pueden mostrar documentos con frames, solo son interpretables por el Netscape 2.0 o superior y el Internet Explorer 3.0. Por tanto en este caso si se quiere que el documento sea accesible por gran cantidad de usuarios de debe crear un documento con frames y otro sin ellas, usando la etiqueta NOFRAMES.

Definición

     Un documento con frames se define de manera diferente a un documento normal, siendo la estructura del documento distinta, en este caso no se define la etiqueta BODY. Su estructura es la siguiente:

<HTML>
<HEAD>
Definiciones de la cabecera
</HEAD>
<FRAMESET>
Definición de las frames que forman el documento y de los fichero que incluye cada una.
</FRAMESET>
<NOFRAMES>
Instrucciones HTML que se mostrará en los navegadores que no soporten frames.
</NOFRAMES>
</HTML>

     Dentro de la etiqueta NOFRAMES se podrá incluir una explicación de que el documento solo es visible con el navegadores que soporten frames, o bien incluir una versión del documento que se muestre sin necesidad de frames.

<FRAMESET ...> Definición de las frames.

     Con esta instrucción definiremos las frames que formarán el documento, su sintaxis es similar a la de las tablas, permitiendo definir muy distintos tipos de frames. Su formato es el siguiente:

<FRAMESET ROWS=Lista de las Filas COLS=Lista de las Columnas>
<FRAME SRC=URL_1 NAME="Nombre de la frame1">
<FRAME SRC=URL_2 NAME="Nombre de la frame1">
. . .
<FRAME SRC=URL_N NAME="Nombre de la frameN">
</FRAMESET>

     Se definirá solo uno de los atributos, o la lista de filas (ROWS) o la lista de columnas (COLS).

     Se definirá separado por comas el tamaño de cada una de las frames. De esta forma se dividirá la pantalla de forma horizontal, según cada una de las filas definidas. El tamaño de la frame, puede expresarse de las siguientes formas:

Ejemplo
Inst. HTMLMuestra
<FRAMESET ROWS="100, 50%, *">
<FRAME SRC="frame1.htm" NAME="frame1">
<FRAME SRC="frame2.htm" NAME="frame2">
<FRAME SRC="frame3.htm" NAME="frame3">
</FRAMESET>
Se definen tres frames horizontales, la primera (roja) ocupará 100 puntos de la pantalla, la segunda (azul) el 50% del tamaño de la ventana del navegador y la tercera (verde) el espacio restante, si se varía el tamaño de la ventana del navegador, cambiará el tamaño de las dos últimas.

     Toma los mismos posibles valores que ROWS, pero en este caso para las columnas, se definirán las frames de forma vertical.

Ejemplo
Inst. HTMLMuestra
<FRAMESET COLS="100, 50%, *">
<FRAME SRC="frame1.htm" NAME="frame1">
<FRAME SRC="frame2.htm" NAME="frame2">
<FRAME SRC="frame3.htm" NAME="frame3">
</FRAMESET>
En este caso se definen las frames de forma vertical, guardando la misma proporción que en el caso anterior.

     Una vez definida el número de frames por fila o por columna se definirá el contenido de cada una de estas con la etiqueta FRAME, pero igualmente se podría definir frames dentro de frames, de forma que cada una de las definidas anteriormente podría estar divida en varias frames, esto se hará incluyendo dentro de la instrucción FRAMESET, nuevas instrucciones FRAMESET que dividirán esta en las frames indicadas, como se ve en el siguiente ejemplo:

Ejemplo
Inst. HTMLMuestra
<FRAMESET ROWS="100, 50%, *">
<FRAME SRC="frame1.htm" NAME="frame1">
<FRAMESET COLS="2*,*">
<FRAME SRC="frame2.htm" NAME="frame2">
<FRAME SRC="frame3.htm" NAME="frame3">
</FRAMESET>
<FRAMESET COLS="50%, 30%, 20%">
<FRAME SRC="frame4.htm" NAME="frame4">
<FRAME SRC="frame5.htm" NAME="frame5">
<FRAME SRC="frame6.htm" NAME="frame6">
</FRAMESET>
</FRAMESET>
Tomando como base las frames que se definieron en un ejemplo anterior, hemos dividido dos de las frames en nuevas frames, formando en este caso un documento con 6 frames, en cada una se muestra un fichero distinto y tienen un nombre distinto. Dentro de las frames definidas se podrían definir nuevas frames, pudiendo dividir la ventana, tantas veces como se desee.

<FRAME ...> Definición de cada una de las frames

     Como se ha visto en el apartado anterior con la etiqueta FRAME definiremos el documento que se mostrará en la frame y su nombre. Esta etiqueta presenta además algunos otros atributos:

<FRAME SRC="URL" NAME="Nombre de la frame" MARGINWIDTH="ancho del margen" MARGINHEIGHT="alto del margen" SCROLLING=YES | NO | AUTO NORESIZE>

     Como su nombre indica, especifica el documento HTML o fichero que se mostrará en la frame definida. Si no se especifica documento alguno se mostrará la frame vacía.

     Indica el nombre de la frame, este nombre es importante ya que se usará en los hiperenlaces (normalmente en los documentos de las otras frames) para indicar la frame de destino del documento. Si no se indica el nombre solo se podrá mostrar el documento actual, sin que sea posible cambiarlo mediante hiperenlaces.

     Indica el ancho del margen, este atributo es opcional y normalmente el navegador ajusta todos los márgenes al mismo tamaño, si se especifica se valor será en puntos de la pantalla.

     Igual que en el caso anterior pero para el alto de los márgenes. Lo normal es no especificar ninguno de estos dos atributos.

     Indica si la frame tendrá o no una barra de scroll, la barra de scroll se muestra en el lateral y permite desplazarse por el documento, pulsando con el ratón en ella. Si toma el valor YES, siempre se mostrará esta barra, para el valor AUTO solo se mostrará si el documento no cabe en la frame, si es necesaria. Y por último NO indica que en ningún caso se muestre la barra de scroll. Si no se indica nada se toma por defecto el valor AUTO.

     Indica que la frame no debe ser variada de tamaño por el usuario, se puede variar el tamaño de una frame situando el cursor del ratón encima y arrastrando en la dirección deseada. Con este atributo el usuario no podrá cambiar el tamaño de la frame en ningún caso. Por defecto todas las frames pueden variar su tamaño.

TARGET: Atributo para indicar la frame de destino

     El uso de frames introduce un nuevo atributo a alguna de las etiquetas especificadas con anterioridad, este atributo es TARGET que indicará la frame de destino de la operación. Normalmente, en páginas sin frames, cuando se seguía un hiperenlaces este se mostraba en la ventana del navegador sustituyendo el documento actual, con las frames se puede especificar que frame será la de destino, no siendo necesario que sea la frame del documento actual.

     Como nombre de la frame su usará el nombre que se especifico en el atributo NAME de la etiqueta FRAME. Estas instrucciones se utilizarán normalmente en los documentos que se incluyen dentro de las frames.

     Las etiquetas que permiten el uso de TARGET son las siguientes:

     En los hiperenlaces indicará la frames donde se mostrará el documento, una vez que se siga el hiperenlace.

<A HREF="url" TARGET="frame">

     Indicará la frame en la que se mostrará por defecto todos los hiperenlaces del documento actual. Se debe especificar en la cabecera del documento (HEAD).

<BASE TARGET="frame">

     En la definición de imágenes sensibles en el cliente, se indica la frame donde se verá el documento que se activa en la zona correspondiente de la imagen.

<AREA SHAPE=RECT COORDS="x,y,..." HREF="url" TARGET="frame">

     Indicará la frame de destino del resultado del formulario.

<FORM ACTION="url" TARGET="frame">

     Existen unos valores especiales de TARGET que nos permitirán definir destinos distintos a las frames definidas. Estos valores son los siguientes:

Manual de HTML