Manual HTML

El Lenguaje HTML 1 - Etiquetas del lenguaje HTML
Las Etiquetas Atributos de las Etiquetas Etiquetas correctas
2 - Formato de las URL

Definicin Uso y Formato
3 - Estructura de un documento HTML

Estructura Bsica Comentarios
4 - Cabecera de un documento HTML

Introduccin <TITLE>: Ttulo del documento <BASE>: URL base del documento <ISINDEX>: El documento es un ndice <META>: Indica refresco del documento
5 - Cuerpo de un documento HTML

Introduccin Definicin de colores Atributos de <BODY> Ejemplos
5.1 - Espaciados y saltos de lnea

El espaciado en HTML <P> Cambio de prrafo <BR> Salto de lnea <HR> Regla Horizontal
<PRE> Texto preformateado <CENTER> Centrado de texto e imgenes Espacios en blanco
5.2 - Caracteres latinos y especiales

Como representar caracteres especiales Elementos del lenguaje HTML Caracteres acentuados Otros Simbolos
5.3 - Cabeceras

<H1> - <H6> Cabeceras de titulos <Hn ALIGN=CENTER>: Alineacin de la cabecera Ejemplos
5.4 - Tamao y Color de las fuentes de caracteres

Utilidad <FONT SIZE=n> : Tamao de la fuente Ejemplos de tamaos de fuentes <BASEFONT SIZE=n> : Fuente por defecto <FONT COLOR=texto color rrvvaa> : Color de la fuente Ejemplos de definicin de colores de fuentes
5.5 - Estilos fsicos y lgicos

Estilos fsicos y Estilos lgicos Estilos Fsicos Estilos Lgicos
5.6 - Definicin de listas

Las listas en HTML <UL> Listas no ordenadas o Ejemplos <OL> Listas ordenadas o Ejemplos <DL> Listas de definiciones o Ejemplos
5.7 - Hiperenlaces

Hiperenlaces <A HREF=...> Hiperenlace
URL absolutas y relativas o Ejemplos <A NAME=...> Elemento Ancla
5.8 - Imgenes

Imgenes en los documentos HTML <IMG SRC=...> Inclusin de Imgenes <IMG ... ALT=...> Texto alternativo <IMG .. ALIGN=...> Alineacin de la imgen <IMG .. BODER=...> Borde de la imgen <IMG .. HEIGHT=... WIDTH=...> Tamao de la imgen <IMG .. HSPACE=... VSPACE=...> Espaciado de separacin de la imgen
5.9 - Imgenes Sensibles

Imgenes Sensibles o Ejemplo ISMAP como referenciar la imgen sensible o Ejemplo Imgenes sensibles definidas desde el cliente o Ejemplo
5.10 - Inserccin de elementos multimedia

Multimedia ? Extensiones Multimedia de Internet Explorer Plug-in's <EMBED> Insertar Ficheros
5.11 - Tablas

Introduccin <TABLE> Definicin de la Tabla <CAPTION> Titulo de la tabla <TR> Fila de la tabla <TH> y <TD> Una celda de la tabla
5.12 - Formularios

Introduccin <FORM> Definicin de formularios <INPUT> Entrada bsica de datos <INPUT TYPE=TEXT...> Texto corto <INPUT TYPE=PASSWORD...> Palabras secretas <INPUT TYPE=CHECKBOX> Botones de seleccin
<INPUT TYPE=RADIO...> Seleccin entre multiples opciones <INPUT TYPE=HIDDEN...> Parametros ocultos <INPUT TYPE=SUBMIT...> Enviar Datos <INPUT TYPE=IMAGE...> Boton de Envio grfico <INPUT TYPE=RESET...> Borrar los datos <TEXTAREA> Texto en multiples lneas <SELECT> Eleccin entre multiples opciones
7 - CGI (Common Gateway Interface), ejecucin de binarios.

Definicin Variables de entorno Entrada de datos al cgi-bin Salida de datos del cgi-bin
8 - Documentos con frames.

Introduccin Definicin <FRAMESET ...> Definicin de las frames <FRAME ...> Definicin de cada una de las frames TARGET: Atributo para indicar la frame de destino
1 - Etiquetas del lenguaje HTML
Las Etiquetas
El lenguaje HTML es un lenguaje de marcas, estas marcas sern fragmentos de texto destacado de una forma especial que permiten la definicin 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 sern la base principal del lenguaje HTML. En documento HTML ser un fichero texto con etiquetas que variarn la forma de su presentacin. Una etiqueta ser un texto incluido entre los smbolos menor que < y mayor que >.. El texto incluido dentro de los smbolos ser explicativo de la utilidad de la etiqueta. Por ejemplo: <B> Letra Negrita, del ingls Bold (negrita).
<TABLE> Definir una tabla. <IMG> Inclusin de una IMaGen.
Existe normalmente una etiqueta de inicio y otra de fin, la de fin contendr el mismo texto que la de inicio aadindole 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 necesitarn la de fin, sern aquellas en las que el final este implcito, por ejemplo <P> prrafo, <BR> salto de lnea <IMG> inclusin de una imagen. Definen un efecto que se producir en un punto determinado sin afectar a otros elementos.
El uso de maysculas o minsculas en las etiquetas es indiferente, se interpretarn del mismo modo en ambos casos, pero lo normal es expresarlas en maysculas para que destaquen con ms nitidez del texto normal.
Atributos de las Etiquetas

Las etiquetas pueden presentar modificadores que llamaremos atributos que permitirn definir diferentes posibilidades de la instruccin HTML. Estos atributos se definirn en la etiqueta de inicio y consistirn 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 ms 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 podra 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 afectarn 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 ningn tipo de error. Dejndose el texto o las etiquetas a las que afectaba como si no existiera la etiqueta extraa. Cuando se comete un error sintctico al expresar una etiqueta o un atributo no se producir ningn error, simplemente no de obtendr el efecto que desebamos. El lenguaje HTML es un lenguaje que evoluciona muy rpidamente y cada nueva versin de los programas navegadores presenta etiquetas nuevas que causan efectos ms espectaculares o atributos nuevos de las etiquetas ya existentes. Esto causa que los programas ms antiguos no entiendan estas nuevas etiquetas y por tanto las considere errneas y no realice la accin que desebamos. Dndose el caso de atributos que son validos solo para un nico navegador.
Cuando creemos cdigo HTML hay que hacerlo lo ms estndar 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 pginas no tendrn en la mayora de los casos el mismo que nosotros. Tambien es interesante como se vera el documento en los distintos tamaos de la ventana del navegador, teniendo en cuenta que todos no tienen un monitor con la misma resolucin. En este manual se han tratado de incluir las caractersticas ms estndar de HTML y en caso de tratarse de instrucciones ms particulares se indicar convenientemente.
2 - Formato de las URL
Definicin
URL es el acrnimo 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 informacin de servicios que antes eran incompatibles entre s, tratando de conseguir que todos los servicios de internet sean accesibles a travs 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 informacin en servicios como FTP, gopher, WAIS, etc ...
Uso y Formato
Las URL se utilizarn para definir el documento de destino de los hiperenlaces, para referenciar los grficos 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 pginas HTML en servidores WWW debern ser referenciadas mediante este servicio. Indicar conexin a un servidor de la WWW.
https: (HyperText Transport Protocol Secure), es el protocolo para la conexin a servidores de la WWW seguros. Estos servidores son normalmente de mbito comercial y utilizan encriptacin para evitar la intercepcin de los datos enviados, usualmente numeros de tarjeta de credito, datos personales, etc ..., realizar una conexin a un servidor de la WWW seguro. ftp: (File Transfer Protocol), utilizar el protocolo FTP de transferencia de ficheros. Se utilizar cuando la informacin que se desee acceder se encuentre en un servidor de ftp. Por defecto se acceder a un servidor annimo (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 localizacin de informacin, 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: Emulacin de terminal remota, para conectarse a maquina multiusuario, se utiliza para acceder a cuentas pblicas como por ejemplo la de biblioteca. Lo normal es llamar a una aplicacin externa que realice la conexin. En este caso se indicar la maquina y el login: telnet://maquina.dominio@login. mailto: Se utilizar para enviar correo electrnico, todos los navegadores no son
capaces. En este caso solo se indicar la direccin de correo electrnico 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 conectarn a nuestras pginas desde servidores externos a nuestra red local por tanto si no indicamos el dominio las URL que especifiquemos no podran 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 ms usadas como servidores. El nombre de los subdirectorios y del fichero referenciado puede ser de ms de ocho caracteres y se tendr en cuenta la diferencia entre maysculas y minsculas en el nombre. La extensin de los ficheros ser tambin 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 ms normales con sus tipos correspondientes son: Tipo MIME text/html text/plain image/gif image/jpeg Extensin Tipo de fichero
html .htm, documento HTML .txt .gif jpg .jpeg por defecto, texto plano imagen de formato GIF imagen de formato JPEG
El navegador de la WWW, realiza una accin para cada tipo de fichero, solo los que sean del tipo text/html sern 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 pgina html por defecto de ese directorio. En el servidor estn 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 pgina inicial (home page) del servidor o del espacio Web. Algunos ejemplos de URL podran ser: URL Definicin
http://www.uca.es
En este caso solo se indica el servicio y la maquina y dominio. El resto de los parmetros se toman por defecto, el puerto 80, el directorio, el raz del servidor y el documento por defecto de ese directorio. Esta URL est ms completa en este caso se accede al
http://www.uca.es/internet/internet.html fichero internet.html que se encuentra en el directorio

internet del servidor de la WWW, www.uca.es.
http://www2.uca.es/serv/sii ftp://ftp.uca.es/imagenes/globo.gif
Se acceder al fichero por defecto del directorio /serv/sii del servidor de la WWW, www2.uca.es En este caso se acceder a un servidor de FTP annimo, ftp.uca.es por el protocolo FTP y se acceder al fichero globo.gif del directorio de imagenes. En 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 opcin solo es soportada por los navegadores ms modernos. Enviar un mail al equipo de la WWW de la UCA, esta opcin solo es soportada por los navegadores ms modernos.
news:uca.es
mailto://www-team@uca.es
3 - Estructura de un documento HTML
Estructura Bsica
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 ningn problema sin incluir estas etiquetas de identificacin. Si se utilizan elementos que forzosamente deban ser incluidos en la cabecera (como la etiqueta de titulo), no sern reconocidos correctamente si no se incluyen entre las etiquetas de <HEAD>. En los prximos 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  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>. Tambin aunque ya con menos utilidad para comentar cualquier instruccin o circunstancia del documento. Los comentarios no se muestran en el documento HTML y el nico modo de verlo es viendo el cdigo HTML fuente del documento, cosa que permiten algunos navegadores de la WWW.
4 - Cabecera de un documento HTML
Introduccin
La cabecera de un documento HTML est delimitado por las etiquetas <HEAD> y </HEAD>, en esta se incluirn las definiciones generales que afectarn a todo el documento. Todas sus etiquetas son opcionales y se utilizarn 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 continuacin se citan los distintos componentes que pueden formar la cabecera de un documento HTML.
<TITLE>: Ttulo del documento
Especificar el ttulo del documento HTML, todo documento HTML debe tener un titulo. El titulo debe guardar relacin con el contenido del documento y definirlo de forma general, su tamao 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 ttulo 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 pgina en los bookmarks (marcadores) y las history list (lista de documentos accedidos) y tambin se utiliza por algunos servidores de bsqueda como resultado de una busqueda para poder intuir el contenido del documento. El titulo deber guardar relacin 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 imgenes. 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 bsqueda en l. Presentar un indicador preguntando la palabra clave de la bsqueda.
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 bsqueda. Presenta dos atributos, PROMPT que indica el texto que aparecer como inductor de la bsqueda y ACTION que especifica el fichero cgi que trata la consulta, por defecto ser el documento actual.
<META>: Indica refresco del documento

Aunque tiene ms utilidades, la principal es indicar documentos con refresco automtico. Se indicar un documento que debe sustituir al actual en un determinado nmero de segundos. El formato es el siguiente: <META HTTP-EQUIV="REFRESH" CONTENT="nmero_segundos ;URL=URL_de_refresco"> Se indica el nmero de segundos que deben pasar antes del refresco y el documento HTML que sustituye al actual. Si se indica cero segundos la transicin 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 actualizarn, o documentos que deban ser vistos de forma secuencial, se empieza por un documento pasando a los siguientes transcurrido un perodo de tiempo sin necesidad de accin alguna por parte del lector.
5 - Cuerpo de un documento HTML
Introduccin
El cuerpo de un documento HTML estar delimitado por las etiquetas <BODY> y </BODY> y en el se incluirn todas las instrucciones HTML y el texto que forman el documento, es similar al BEGIN { de un lenguaje de programacin. Al igual que la cabecera (HEAD) es opcional, pero se recomienda para la buena identificacin de las distintas zonas del documento. Si un documento no presenta ninguna de las etiquetas de identificacin de sus distintas partes (<HTML>, <HEAD> <BODY>) se considerar que todo lo que se defina pertenece al cuerpo del documento.
Definicin 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 proporcin de rojo, verde y azul que forma el color deseado. El smbolo # es opcional. Un nmero hexadecimal es un nmero en base 16, la base normal utilizada es base 10 o decimal del 0 al 9. En este caso los nmero validos sern del 0 al 9 aadiendo desde la a A a la f F. Por tanto el nmero 0F ser el 15, 0E ser 14. En la especificacin del color utilizaremos para definir la proporcin de cada color un nmero del 0 al FF (255), 0 indica nada de ese color y FF la mayor proporcin del color. Algunos ejemplos de colores sern: #000000 Negro(Negro)
#FFFFFF Blanco(Blanco) #FF0000 #00FF00 #0000FF Rojo(Rojo) Verde(Verde) Azul(Azul)
Algunos colores estn predefinidos y pueden ser referenciados por su nombre, estos solo sern validos para Netscape e Internet Explorer de Microsoft, estos colores predefinidos son: Color Predefinido black teal blue navy lime white purple Muestra negro teal azul azul marino lima blanco purpura Color Predefinido Muestra olive red maroon gray fuchsia green silver oliva rojo marron gris fucsia verde plata
yellow
amarillo
aqua
agua
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 definicin global para todo el documento, estos definirn los colores y el fondo del documento HTML. Los atributos de BODY son: <BODY BACKGROUND="URL" BGCOLOR=#rrvvaa TEXT=#rrvvaa LINK=#rrvvaa VLINK=#rrvvaa >
BACKGROUND="URL":
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 imgenes 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.
BGCOLOR=#rrvvaa nombre del color:
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.
TEXT=#rrvvaa nombre del color:
Especificar el color del texto normal dentro del documento HTML. Por defecto ser normalmente negro.
LINK=#rrvvaa nombre del color:
Indicar el color que tendrn los hiperenlaces que no han sido accedidos. Por defecto ser azul.
VLINK=#rrvvaa nombre del color:
Color de los enlaces que ya han sido visitados. Por defecto es un color azul ms oscuro.
Ejemplos
Algunos ejemplos podran ser: <body background= "http://www2.uca.es/fondos1/fondo15.gif"> <body bgcolor=blue text=white link=red vlink=aqua> <body bgcolor=0000FF text=FFFFFF link=FF0000 vlink=008200>
El documento tendr como fondo la imagen indicada en la URL En este caso el fondo ser azul, el texto blanco, los enlaces rojos y los enlaces visitados color agua 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
5.1 - Espaciados y saltos de lnea
El espaciado en HTML
En HTML no est permitido ms de un elemento blanco (espacios, tabuladores, saltos de lnea) separando cualquier elemento o texto, todos estos son convertidos a un nico espacio blanco y el resto se omiten en la representacin 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 continuacin se detallar cada una de ellas.
<P> Cambio de prrafo :

Definir un prrafo, se usar al comienzo o al final de un prrafo de texto e introducir un espaciado de separacin (normalmente dos lneas) con el prximo 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 prrafo </P> es opcional no siendo necesario incluirla. Existen elementos HTML que ya introducen separaciones de lneas, tanto antes como despues, por tanto en estos casos no es necesario, pero s posible, introducir el elemento de nuevo prrafo. No es necesario utilizar esta etiqueta ni antes ni despus de cabeceras <Hn>, despus 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 Resul tado Explica cin Esta es una frase que forma un parrafo.<P>Este es el otro parrafo.
Esta es una frase que forma un parrafo. Este es el otro parrafo.

En el punto donde se ha introducido la instruccin HTML de nuevo parrafo se observa una separacin de dos lneas.
<BR> Salto de lnea :

Su utilidad es similar al anterior pero en este caso el espaciado del texto es menor, se pasar a la lnea siguiente, sin dejar una lnea de separacin. En este caso ser un cambio de lnea y no de parrafo. Igualmente no es necesario usarlo tras los elementos que llevan implcitos un salto de lnea, ni tampoco es necesaria la etiqueta de fin </BR>. Ejemplo
Inst. HTML Resul tado Explica cin Esta es una frase de la primera lnea.<BR>Esta es la siguiente lnea
Esta es una frase de la primera lnea. Esta es la siguiente lnea

En el punto donde se ha introducido la instruccin HTML de nueva lnea se observa el cambio de lnea.
<HR> Regla Horizontal :

<HR ALIGN=LEFT|RIGTH|CENTER NOSHADE SIZE=n WIDTH=n> Se usa para dividir un documento en distintas secciones, mostrar una lnea horizontal de tamao determinable. Se asemejar al salto de pgina dentro de un documento. Si no se especifican atributos dibujar una lnea que ocupe el ancho de la pantalla del navegador y introduciendo una separacin con el texto anterior y siguiente, equivalente a cambio de prrafo. No es necesaria la etiqueta de fin </HR>. Con los atributos podemos especificar su forma y tamao, esto atributos son:
ALIGN=LEFT, RIGTH CENTER:
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.
NOSHADE:
No muestra la sombra de la barra, evitando el efecto en tres dimensiones.
SIZE=n:
Indicar la altura de la regla en puntos de la pantalla.
WIDTH=n n%:
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 Resul tado Explica cin Inst. HTML Resul tado Explica cin Inst. HTML Resul tado Explica cin Mostrar un lnea que ocupa el cincuenta por ciento del ancho disponible, es de 5 de alto y est alineada a la izquierda. Mostrar un lnea que ocupa todo el ancho disponible, es de 5 de alto y no tiene sombra ni efecto dimensional. Mostrar un lnea que ocupa todo el ancho disponible y de altura 1 con sombra. <HR>
<HR SIZE=5 NOSHADE>
<HR SIZE=5 WIDTH=50% ALIGN=LEFT>
<PRE> Texto preformateado :

Muestra un porcin de texto en el que se respetan los saltos de lnea, 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 ms pequea que el texto normal. Presenta un problema cuando la lnea es demasiado larga, ya que no la corta el navegador y se mostrara tal y como aparece en el fichero fuente. No se recomienda como forma rpida de convertir un documento texto a formato visible en HTML ya que presenta muchas limitaciones y no se obtiene una buena presentacin. Dentro de la etiqueta PRE no tendrn validez la mayora de las instrucciones HTML, solo se podrn utilizar <B>, <I> y los hiperenlaces. El resto de las etiquetas HTML son ignoradas. Ejemplo
Inst. HTML Resul tado Explica cin <PRE>Este texto tal y como se escribi. </PRE> se ver
Este texto se ver tal y como se escribi. Como se ve utiliza otra fuente de caracteres distintas de espaciado fijo y se respetan los espacios en blanco y los saltos de lnea de la instruccin original.
<CENTER> Centrado de texto e imgenes :

Se utilizar para centrar lneas de texto, imgenes 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 Resul tado Explica cin <CENTER> Este texto se ver centrado </CENTER>
Este texto se ver centrado

El texto aparece centrado en el navegador. Se puede utilizar tanto para una lnea como para un prrafo, y para cualquiera de la instrucciones del lenguaje HTML.
Inst. HTML Resul tado Explica cin
<CENTER> El texto y la imagen se centran<BR> <IMG SRC="/iconos1/or_star.gif"> </CENTER>
El texto y la imagen se centran

Como se ve la etiqueta de centrado puede afectar a otros elementos como una imagen o cualquier otra estructura del lenguaje HTML.
Espacios en blanco :

Con esta secuencia de caracteres conseguiremos espacios en blanco que se mostrarn de forma efectiva, pudiendo mostrar ms de un espacio en blanco de separacin. Se incluirn tantas expresiones como espacios en blanco se desee conseguir.
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 carcter deseado. Estas secuencias de escape comienzan todas con el smbolo ampersand (&), seguido de un texto (siempre en minsculas) que define el carcter deseado y termina con el smbolo punto y coma (;). El error ms comn 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 carcter deseado. No es necesario dejar espacios en blanco ni antes ni despus 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 smbolo menor que (<) o mayor que (>) se interpretar siempre como la definicin de una etiqueta y por tanto no se mostrarn al interpretar el documento.
Para expresar estos smbolos y otros del lenguaje HTML usaremos las siguientes secuencias de escape: Sec. Escape < > & " Signo < (menor que) Signo > (mayor que) Signo & (ampersand) Se mostrar el signo de comillas " Simbolo
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 mostrarn correctamente. Usted en su ordenador con su navegador podr leer estos caracteres correctamente siempre y cuando tenga el mismo cdigo (espaol) que el autor del documento. Los primeros 127 caracteres del cdigo ASCII son comunes para todos los pases e incluyen todas las letras del alfabeto, a partir del 128 son especficos para cada lenguaje, entre estos se incluyen los caracteres acentuados y la letra , por tanto si alguien desde otro pas que tenga un cdigo incompatible intenta leer su documento, probablemente encuentre caracteres extraos 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 maysculas como para las minsculas. Por tanto incluiremos el smbolo de ampersand (&) la vocal que deseamos acentuar, la palabra acute y el smbolo punto y coma (;). Representndose los acentos de la forma: Sec. Escape Letra á é í ó ú Sec.Escape Letra Á É Í Ó Ú
Para la letra usaremos la secuencia tilde, del siguiente modo: Sec. Escape Letra ñ Sec.Escape Letra Ñ
Para el acento grave usaremos grave, siendo en este caso la representacin: Sec. Escape Letra à è ì ò ù Sec.Escape Letra À È Ì Ò Ù
Otros Smbolos
Para expresar una carcter por su valor en el cdigo ASCII, usaremos el smbolo #, seguido de su equivalente numrico. Para el acento circunflejo utilizaremos el literal circ y para la diresis utilizaremos el literal uml. Para expresar los smbolos de apertura interrogacin, apertura de exclamacin y estos acentos usaremos: Sec. Escape Letra ¿ ü î Sec.Escape Letra ¡ Ü Î
Algunos otros smbolos especiales sern los siguientes.
Sec. Escape ç ® &#nnn;
Simbolo
Sec.Escape Ç ©
Simbolo
Smbolo de registrado
Smbolo de Copyright.
Donde nnn es un nmero decimal, el carcter nnn del cdigo ISO8859-1 (ASCII).
5.3 - Cabeceras
<H1> - <H6> Cabeceras de ttulos

En un documento HTML es posible definir seis tipos distintos de cabeceras que sern normalmente el ttulo del documento y los distintos subapartados que lo forman. La etiquetas que definen las cabeceras sern <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 instruccin: <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 ... Utilizndolas 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> itlica y grande.
<Hn ALIGN=CENTER>: Alineacin 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
5.4 - Tamao y Color de las fuentes de caracteres
Utilidad
En el apartado anterior se vio el modo de definir los distintos ttulos de documento, mediante cabeceras. Estas son poco flexibles y predeterminadas. Existe otra etiqueta HTML que permite una ms sencilla adaptacin del tamao de las fuentes y permite adems modificar su color. Con esta podremos incluir texto resaltado en medio de una frase, con las cabeceras no es posible ya que estas introducen automticamente un salto de lnea detrs, y permitir incluir prrafos de distintos tamaos o colores, proporcionando una mayor versatilidad y pudiendo crear efectos ms espectaculares. La etiqueta que permite esto se llama FONT y presenta atributos que nos permiten modificar el tamao y color del texto incluido entre la etiqueta de inicio y fin.
<FONT SIZE=n> : Tamao de la fuente

El atributo SIZE permite indicar el tamao de la fuente, su valor puede estar entre 1 y 7. Incrementndose de tamao progresivamente desde 1, que es la fuente de menor tamao, hasta 7 que la fuente de mayor tamao. El texto normal equivale a la fuente de tamao 3, por tanto los valores menores que 3 sern fuentes ms pequeas que el texto normal y las mayores que 3 sern de mayor tamao.
El tamao tambin 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 tamao 4. Existe una etiqueta que redefine la fuente por defecto, esta etiqueta es: <BASEFONT SIZE ...> Los elementos de tamao de fuentes pueden ser definidos para todo un documento, teniendo validez dentro de elementos tales como listas y formularios, pero no tendrn validez global en las tablas, debiendo definir cada una de las celdas al tamao de fuente deseado.
Ejemplos de tamaos de fuentes

Inst. HTML Muestra Explicacin
<FONT SIZE=2>Muestra</FONT> <FONT SIZE=6>Muestra</FONT> <FONT SIZE=1>Muestra</FONT>
Muestra
Obtendriamos en este caso texto de tamao de fuente 2 Este texto es de tamao de fuente 6 Obtendriamos tambin en este caso texto de tamao de fuente 2, pero lo definiramos de forma relativa: 31=2 As definiramos fuente de tamao 6 de forma relativa: 3+2=5
Muestra
Muestra
<FONT SIZE=+2>Muestra</FONT>
Muestra
<FONT SIZE=6> Muestra <FONT SIZE=1> Muestra </FONT> Muestra </FONT>
Muestra
Muestra
Muestra
Muestra Muestra Muestra
Se pueden combinar en una misma frase varios tamaos de fuentes
<FONT SIZE=4> Muestra <B> <I> < A HREF="http://www.uca.es"> Muestra </A> </I> Muestra </B> </FONT>
Se pueden combinar con elementos de resalte e hiperenlaces
<BASEFONT SIZE=n> : Fuente por defecto
Definir el tamao de la fuente que se considerar como base para definir los tamaos de fuente relativos. Esta etiqueta no define el tamao de la fuente por defecto, para el texto normal, y solo se usa para clculos de tamao de fuente relativos. La utilidad no es muy amplia, y se podra utilizar cuando en un documento en el que todos los tamaos estn definidos de forma relativa y se desee cambiar de forma global el tamao de las fuentes. Si no incluye esta etiqueta el valor base para estos clculos es 3, con esta se puede variar, como se ve en el ejemplo. Inst. HTML Muestra Explicacin
<FONT SIZE=2>Muestra</FONT>
Muestra
<BASEFONT SIZE=5> <FONT SIZE=2>Muestra</FONT>
Muestra
El nuevo valor para el calculo del tamao relativo ser 6, notndose el efecto en el tamao 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 versin 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 tamao ser el de la fuente base. Al igual que en el caso del tamao 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, utilizndose para estos el color por defecto definido en la etiqueta BODY.
Ejemplos de definicin de colores de fuentes

Algunos ejemplos de la definicin de colores de fuente podran ser: Inst. HTML Muestra Explicacin
<FONT COLOR=FF00FF>Muestra</FONT>
Muestra Muestra
El texto se mostrar de un color lila, al mezclar los colores rojo y azul. Tambin se puede utilizar uno de los colores predefinidos. Se puede combinar con el tamao de fuente Se pueden combinar varios colores en una misma frase o palabra. Pueden ser utilizados junto con otros elementos de resalte como cabeceras, estilos fsicos y lgicos, etc ...
<FONT COLOR=AQUA>Muestra</FONT> <FONT SIZE=5 COLOR=red> Muestra </FONT> <FONT COLOR=NAVY> Mue<FONT SIZE=4 COLOR=BLUE>str</FONT>a </FONT>
Muestra
Muestra
<H3> <FONT COLOR=81426E> Mu<I>es</I>tra </FONT> </H3>
Muestra
5.5 - Estilos fsicos y lgicos
Estilos fsicos y Estilos lgicos

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 lgicos y los fsicos. Los fsicos son aquellos que siempre causan un mismo efecto (negrita, cursiva, ...) y los lgicos indicarn un tipo de texto (cita, nombre de persona) que por sus caractersticas 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 fsico (negrita) o el estilo lgico (STRONG) y en ambos casos el resultado puede ser el mismo.
Es ms recomendado, sin embargo, utilizar el estilo lgico, 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 presentacin personalizada. Adems en un futuro los navegadores podran aadir modos ms sofisticados de presentar los distintos estilos y si estn definidos de forma lgica la adaptacin es ms sencilla. Y por ltimo y ms importante, al utilizar estilos lgicos el modo de escribir HTML se hace independiente de como se presentar finalmente el texto, se utilizar el estilo segn el tipo de texto que sea y no segn como se debe presentar. La tendencia actual de los navegadores es el uso de los estilos fsicos olvidando un poco la versatilidad de los estilos lgicos, pero sin embargo ambos estilos pueden ser usados indistintamente, sin ningn problema.
Estilos Fsicos.
El efecto se aplicar al texto expresado entre la etiquetas de inicio y fin. Los estilos fsicos son los siguientes: Etiqueta HTML <B> <I> <TT> <BLINK> <SUB> <SUP> <BIG> <SMALL>
Ejemplo Ejemplo Ejemplo

Ejemplo
Descripcin Negrita. Cursiva. Maquina de escribir, muestra una fuente de caracteres de espaciado fijo. Parpadeo. Subndice. Para Netscape 2.0+ Superndice. Para Netscape 2.0+ Texto grande, se utilizar el mayor tamao de fuente. Para Texto pequeo, se utilizar la fuente de menor tamao. Para Netscape 2.0+
Ejemplo
Ejemplo Ejemplo
Ejemplo Netscape 2.0+

Ejemplo
Los estilos se pueden combinar entre s obteniendo cualquier efecto deseado. Ejemplo
Inst. Este texto es <B>negrita, <I>cursiva y <BLINK>parpadeante </BLINK></I></B>
HTML Resul tado Explica cin
Este texto es negrita, cursiva y parpadeante

El texto es por tramos negrita, cursiva y parpadeante.
Estilos lgicos
En este caso se definen las situaciones o tipos de frases y estas tomarn la representacin ms adecuada a cada caso. Estos estilos son: Etiqueta HTML <ADDRESS> Ejemplo Ejemplo Descripcin Se utilizar para especificar direcciones de correo electrnico. Introduce citas textuales o texto destacado, en este caso el texto se separar del texto circundante y se ajustar a los mrgenes derecho e izquierdo. Indica el titulo de una pelcula o un libro. Cdigo fuente de un lenguaje de programacin. Especifica una definicin. Indicar enfasis. Texto introducido desde el teclado.
<BLOCKQUOTE> Ejemplo <CITE> <CODE> <DFN> <EM> <KBD> <SAMP> <STRIKE> <STRONG> <VAR> Ejemplo
Ejemplo
Ejemplo Ejemplo
Ejemplo
Ejemplo Mensajes de estado de la computadora. Ejemplo Ejemplo Ejemplo Texto desechado, tachado. Especificar texto resaltado. Indicar una variable.
5.6 - Definicin 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 indicarn 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 usarn unos smbolos, 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 explicarn en los proximos apartados. Ejemplos
<UL > <LH> Titulo </LH> <LI> Elemento 1 <LI> Elemento 2 <LI> Elemento 3 </UL>
Inst. HTML
Titulo
Resul tado
Elemento 1 Elemento 2 Elemento 3
Explica cin
Este ser el caso bsico de lista no ordenada. Se podrn incluir tantos elementos como se deseen y estos podrn ser texto normal, texto resaltado con alguno de los estilos, imgenes, etc ... <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>
Inst. HTML
Resul tado
Elemento 1 Elemento 2 o Elemento 3.1 o Elemento 3.2 Elemento 4
Explica cin
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 tambin usamos distintos elementos definibles con TYPE, para indicar los componentes de la lista.
<OL> Listas ordenadas

Estas listas sern similares al caso anterior pero en este se usa un nmero para indicar el orden de cada elemento de la lista. El ser ordenada no significa que ordene los elementos alfabticamente sino que los elementos guardan un orden que es el nmero 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 numeracin puede seleccionarse con el atributo TYPE. Sus posibles valores son:

A : Letras maysculas. a : Letras minsculas. I : Nmero romanos en maysculas. i : Nmero romanos en minsculas. 0 : Nmeros (es por defecto por tanto no hay que indicarlo). Ejemplos
<OL > <LI> Elemento 1 <LI> Elemento 2 <LI> Elemento 3 </OL>
Inst. HTML
Resul tado
1. Elemento 1 2. Elemento 2 3. Elemento 3
Explica cin
Este ser el caso bsico 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>
I. II.
Resul tado
III.
Explica cin
Elemento 1 Elemento 2 a. Elemento 3.1 b. Elemento 3.2 Elemento 4
Ahora definimos una lista anidada y usamos distintos elementos para la numeracin de las opciones.
<DL> Listas de definiciones
En esta lista existirn dos elementos la definicin y el termino, se usar principalmente para listas en las que se incluirn una palabra o frase y su definicin (diccionario). El termino aparecer pegado en el borde izquierdo y la definicin aparecer ligeramente tabulada a partir del borde izquierdo. Se puede usar de forma separada la definicin y el termino, pudiendo por tanto incluir solo definiciones o solo trminos. El incluir solo trminos podra usarse para sangrar el comienzo de un prrafo. <DL> <LH>Titulo de la lista </LH> <DT>Termino 1 <DD>Definicin 1 <DT>Termino 2 <DD>Definicin 2 ... <DD>Termino N <DT>Definicin N </DL> El titulo de las lista <LH> como en los casos anteriores es opcional. Ejemplos
<DL > <DT> Coche <DD> Vehiculo de cuatro ruedas <DT> Moto <DD> Vehiculo de dos ruedas </DL>
Inst. HTML
Coche
Resul tado
Vehiculo de cuatro ruedas Moto Vehiculo de dos ruedas
Explica cin
Como se ve se coloca en una posicin la definicin y en otra el termino.
Ejemplos
<dl> Inst. HTML <dd><font SIZE=+1><img src="/servicios/iconos/confis.gif" align=middle border=0> Conexin 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
conexin a Red.</A> <dd><A HREF="/servicios/conecfisica/software.htm"><img src="http://www2.uca.es/iconos1/redstar.gif" align=middle border=0> Instalacin 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> Actualizacin 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> Mensajera Electrnica.</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 Prctico de Eudora.</A> <dd><A HREF="/servicios/correo/mensaje_institu.html"><img src="http://www2.uca.es/iconos1/redstar.gif" align=middle border=0>Mensajera Institucional.</A> </dl> </dl>
Conexin a la Red.
Normativa de conexin a Red. Instalacin de Software de Comunicaciones. Solicitud de Servicios de Comunicaciones. Servidores Proxy.
Resul tado
Actualizacin del Software de Comunicaciones. Mensajera
Electrnica.
Manual Prctico de Eudora. Mensajera Institucional.
Explica cin En este ejemplo utilizaremos solo los elementos DD (definiciones) para crear un menu, en el que se incluyen tanto imgenes 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.
5.7 - Hiperenlaces
Hiperenlaces
Es la utilidad bsica del hipertexto, permite indicar zonas de texto o imgenes 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, prrafos de texto, tablas, formularios. El texto del hiperenlace aparece normalmente resaltado sobre el texto normal, en azul y subrayado, en el caso de las imgenes, si tienen definido un borde este aparecer resaltado en color azul. La mayora de los navegadores cuando la zona por la que pasa el cursor es sensible, este cambia de aspecto indicndolo 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 prrafo donde se englobe, se debe evitar el uso de pulse aqu. Por ejemplo:
Puede encontrar mas informacin sobre vacas pulsando aqu se podra sustituir por: Disponible ms informacin 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 inclusin de la imagen, tambin 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 sera:
<A HREF="URL a la que se accede"><IMG SRC="Imagen"> y tambin 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 podrn localizarlo, pero para maquinas externas la referencia podra 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 informacin. 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:

Por una barra /, que indica que el camino del fichero se especifica desde el directorio raiz del servidor. Por dos puntos y una barra ../, significa subir en la estructura del directorio. Se considerar a partir del directorio anterior. Por un nombre de fichero o directorio, considerandose este a partir del directorio actual.
Algunos ejemplos seran: Ejemplos

Nos encontramos en el documento http://www.uca.es/visita/cadiz.html y en este se encuentran los siguientes hiperenlaces. URL rela tiva URL que se activa Explica cin URL rela tiva URL que se <A HREF="../internet/internet.html"> ..
http://www.uca.es/internet/internet.html
En este caso se indica la URL completa, por tanto no es relativa y no se podr utilizar ningn dato de la posicin actual.
<A HREF="/internet/internet.html"> ..
http://www.uca.es/internet/internet.html
activa Explica cin 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 raz del servidor, no siendo valido en este caso ningn dato del directorio actual.
URL rela tiva URL que se activa Explica cin
<A HREF="bahia/cadiz.html"> ...
http://www.uca.es/visita/bahia/cadiz.html
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 URL que se activa Explica cin
<A HREF="bahia.html"> ...
http://www.uca.es/visita/bahia.html
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, adems de ahorrar escritura, permite que la pgina pueda ser cambiada de directorio o de servidor sin necesidad de cambiar todos los enlaces, haciendo por tanto al documento ms portable. Como se vio en el capitulo dedicado a la cabecera de un documento HTML, la etiqueta BASE indica la direccin por defecto en los enlaces, esto tendr efecto en las URL relativas, caso de indicarse se considerar esta como direccin 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 ningn 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 haba marcado con la etiqueta indicada. Tambin es posible acceder a un ancla de un documento externo de la forma:
<A HREF="Direccin 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 creacin 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.
5.8 - Imgenes
Imgenes en los documentos HTML

Una de las caractersticas principales del lenguaje HTML y de la WWW es la introduccin de elementos multimedia, en este apartado veremos como introducir grficos y ficheros de imgenes en un documento HTML. En un documento HTML se puede incluir cualquier imagen en alguno de los siguientes formatos grficos: GIF, JPEG XBM. El formato ms extendido y practico es el GIF, todos los navegadores grficos de la Web soportan este formato, adems existen gran cantidad de programas de tratamiento de grficos que permiten grabar los grficos o convertir grficos a GIF. Este formato, as mismo, utiliza algoritmos de compresin que hacen que sus ficheros sean de corto tamao y apropiados para su transmisin por la red. El formato GIF es ms recomendado para iconos, grficas, ... y el formato JPEG es ms til para imgenes reales como paisajes, personas, ... Para poder utilizar otro formato grfico, necesitar usar un enlace cuyo destino sea el fichero del grfico. Al seguir el enlace se le pedir que indique un programa externo que se
encargue de mostrar los ficheros de ese formato grfico, por lo tanto no pueden insertarse dentro de documentos HTML.. Existe unos casos especiales en las imagenes GIF, que son las imgenes transparentes y las imgenes animadas.
<IMG SRC=...> Inclusin de Imgenes

La etiqueta encargada de mostrar imgenes 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 algn 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 extensin apropiada a su formato, por ejemplo si es GIF la extensin ser .gif, si es JPEG la extensin 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 imgenes en servidores externos puede ser ms lento. Por tanto conviene copiar las imgenes e iconos que se usen al servidor local. A continuacin 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 imgenes, sean solo texto o tenga inhabilitado el mostrar imgenes. Se recomienda cuando existan en el documento imgenes usadas como botones, para mostrar un texto en vez del botn en navegadores que
no puedan mostrar grficos, de esta forma se consigue que todos los usuarios puedan consultar sus pginas.
<IMG .. ALIGN=...> Alineacin de la imgen

Indica como se alinea el texto que sigue a la imgen con respecto a esta. Indicar si la primera frase del texto se colocar en la parte alta de la imgen, TOP, en el punto medio de la imagen, MIDDLE, o en la parte de abajo de la imgen, BOTTOM. Tambien se pueden utilizar alineaciones un poco ms avanzada, TEXTTOP se alinea justo al comienzo del texto ms alto de la lnea (TOP se alinea al tamao del primer carcter de la lnea). 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 ms precisa la alineacin, aunque solo son validos para los navegadores ms avanzados. Ejemplos
Inst. HTML <IMG SRC="/iconos1/phone5.gif" ALIGN=TOP><B>Numero de Telefono<B>. En este apartado se indica el nmero de telfono que puede utilizar si tiene cualquier duda o pregunta que hacer sobre este manual.
Resul tado
Numero de Telfono. En este apartado se indica el nmero de telfono que puede utilizar si tiene cualquier duda o pregunta que hacer sobre este manual.
Como se ve solo aparece la primera frase alineada en la parte alta (TOP) de la imgen.
Explica cin
Inst. HTML
<IMG SRC="/iconos1/phone5.gif" ALIGN=MIDDLE><B>Numero de Telefono<B>. En este apartado se indica el nmero de telfono que puede utilizar si tiene cualquier duda o pregunta que hacer sobre este manual.
Resul tado
En este caso el texto est alineado en la parte central de la imgen.
Explica cin Inst.
<IMG SRC="/iconos1/phone5.gif" ALIGN=BOTTOM><B>Numero de Telefono<B>. En este
HTML
apartado se indica el nmero de telfono que puede utilizar si tiene cualquier duda o pregunta que hacer sobre este manual.
Resul tado
El texto est alineado en la parte baja de la imgen.
Explica cin Inst. HTML
<IMG SRC="/iconos1/phone5.gif" ALIGN=MIDDLE><IMG SRC="/iconos1/q__mark2.gif">
Resul tado
Explica cin
Tambin es posible alinear imgenes entre s y imgenes respecto a otros elementos HTML
En los casos anteriores solo se especifica donde se coloca la primera lnea del texto y el resto se incluyen debajo de la imgen quedando un efecto muy feo cuando el texto tiene ms de una lnea. Existen otras alineaciones que incluirn a la imgen insertada dentro del texto. La imgen puede quedar a la izquierda, LEFT o a la derecha, RIGHT. No se podr utilizar en combinacin 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 nmero de telfono 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 nmero de telfono que puede utilizar si tiene cualquier duda o pregunta que hacer sobre este manual.
En este caso aparece la imgen insertada en el texto, de forma que esta se integra en prrafo que la rodea, al contrario que en los casos anteriores <IMG SRC="/iconos1/phone5.gif" ALIGN=RIGHT><B>Numero de Telefono<B>. En este apartado se indica el nmero de telfono que puede utilizar si tiene cualquier duda o pregunta que hacer sobre este manual.
Explica cin
Inst. HTML
Resul tado
Numero de Telefono. En este apartado se indica el nmero de telfono que puede utilizar si tiene cualquier duda o pregunta que hacer sobre este manual.
Explica cin
En este ejemplo aparece la imgen alineada a la derecha.
<IMG .. BODER=...> Borde de la imgen

Indicar el tamao 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 Resul tado Explica cin Inst. HTML Resul tado Explica cin Con el atributo BORDER al valor 0 no se muestra este borde entorno a la imgen, que sirve de hiperenlace. Como se ve si no se indica nada se muestra un borde entorno a la imgen que activa el hiperenlace. <A HREF="imagenes.htm"><IMG SRC="/iconos1/q_mark3.gif"></A>
<A HREF="imagenes.htm"><IMG SRC="/iconos1/q_mark3.gif BORDER=0"></A>
<IMG .. HEIGHT=... WIDTH=...> Tamao de la imgen

Es posible cambiar el tamao de la imgen 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 tamao del documento. En caso de que la imagen sea mayor o menor se escalar a este tamao.
El atributo WIDTH indica el ancho al que se mostrar la imagen, escalndola a este tamao. Tambin 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, ajustndose la otra a la proporcin de la imagen. Es recomendable indicar solo uno de estos parmetros para que la imgen no se muestre deformada. Igualmente se debe usar el valor relativo en tanto por ciento si se desea que la imgen guarde siempre una misma proporcin con respecto al texto. Si se desea mostrar dos imgenes 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 ningn caso el alto (HEIGHT), de esta forma independientemente como sea el tamao de la ventana del navegador e independientemente del monitor del cliente, siempre se podrn mostrar ambas imgenes en la misma lnea. Ejemplos
Inst. HTML Resul tado Explica cin Inst. HTML Resul tado Explica cin Inst. HTML En este se ve como al indicar uno solo de los parmetros, el otro se ajusta apropiadamente a la proporcin de la imgen. Si no se indican bien ambos valores, teniendo en cuenta la proporcin de la imgen esta puede aparecer deformada. <IMG SRC="/iconos1/world.gif" WIDTH=100 HEIGHT=25>
<IMG SRC="/iconos1/world.gif" WIDTH=75>
<IMG SRC="imagenes/obra_ani.gif" ALIGN=MIDDLE WIDTH=9%> <IMG SRC="/barras1/constr.gif" WIDTH=89%> Resultado
Explica cin
Si varia el tamao de la ventana de su navegador, comprobar que el tamao de las imgenes cambia, pero guardan la misma proporcin, el obrero ocupa un 9% de la ventana y la barra el 86% restante. Y siempre se mostrarn ambas imgenes en la misma lnea.
<IMG .. HSPACE=... VSPACE=...> Espaciado de separacin de la imgen

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 adems es posible indicar separadamente el margen horizontal y el vertical. Con el atributo VSPACE se indica el margen vertical. Ejemplos
Inst. HTML Resul tado Explica cin Como se ve en el segundo caso las imgenes aparecen separadas 100 puntos. El espaciado es igual a la derecha que a la izquierda, por tanto tambin aparece la imagen separada del borde. <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">
Creacin de una imagen GIF transparente

En una imagen GIF se puede definir un nico color transparente, de forma que en la parte de la imgen que contena ese color se ver el fondo definido para la pgina 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 opcin 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 imgen. La forma ms comoda de seleccionar el color transparente es la opcin Dropper , al activarla nos permitir seleccionar el color transparente directamente pulsando sobre un color de la imgen. S no aparece esta ventana entonces tendr que guardar la imgen como GIF89, y volver a cargar la imgen otra vez a fin de que se produzca el cambio de formato.
5.9 - Imgenes Sensibles
Imgenes Sensibles
Una de las caractersticas principales del lenguaje HTML es la posibilidad de crear imgenes sensibles o mapeadas, que son imgenes 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 imgen se dividir en distintas reas que definirn documentos a los que es posible acceder. Para crear una imagen sensible ser necesaria la especificacin 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 algn programa. Existen programas que permiten la definicin de las imgenes sensibles, en estos se presentar la imagen en pantalla y mediante un puntero se podrn ir indicando las distintas zonas. Estas zonas podrn ser: rectngulo, circulo, lnea 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 extensin .map que ser el que defina el mapa de la imagen. El contenido normal de este tipo de ficheros sern lneas del estilo: figura_geomtrica URL coord1 coord2 ... coordn Donde figura_geomtrica podr ser una de:

default: Indicar la accin a realizar si se pulsa en un lugar no definido en el mapeado. circle: Definir un circulo. En un servidor del NCSA las coordenadas se definen el centro del circulo y un punto externo (que es el caso de nuestro servidor), en uno del CERN se definir el centro del circulo y el radio. poly: Una lnea poligonal de a lo sumo 100 vrtices. Se definir tantas coordenadas como vrtices formen la lnea poligonal y no ser necesario cerrar la figura. rect: Definir un rectngulo. Las coordenadas indicaremos el vrtice de la esquina superior izquierda y la esquina inferior derecha. point: Indicar un punto. Si en la figura se definen diversos puntos se activar el enlace del punto ms cercano al lugar donde se pulso en la imagen.
La URL del enlace podr ser una local, que debe empezar desde el directorio raz, no vale relativa, o bien indicar la URL completa. Las coordenadas sern 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 imgenes 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 ms prximo a un punto. En otro caso siempre ser necesario indicar la direccin 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 ms antiguos, y programas de indexacin, los robots de busqueda ms 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 imgen 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 imgen 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:
En los antiguos servidores que no permiten soporte interno a imgenes sensibles:
<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 los servidores que poseen soporte interno de imgenes sensibles:
En este caso no es necesario poner el camino al programa imagemap sino solo la referencia al fichero del mapa. El mismo grfico 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 extensin .map del fichero que mapea la imagen. El segundo caso es ms rpido 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 mtodo, en nuestro caso usaremos el segundo.
Ejemplo Imgenes sensibles definidas desde el cliente

En el caso anterior la interpretacin del mapa de la imagen sensible corresponda al servidor, por tanto cuando el usuario pulsa sobre una imgen sensible, las coordenadas se pasan al servidor y este se encarga de comprobar usando el fichero que mapeaba la imgen. Por tanto para activar un enlace hara 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 ms lenta. Y adems 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 imgenes sensibles definidas desde el cliente, de esta forma es el cliente (su navegador de la WWW) el que interpreta la imgen 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 podrn activar las zonas tiles de la imgen. Existe una nueva etiqueta HTML que permite definir estas imgenes 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 lneas con la etiqueta AREA, definen una zona sensible. Actualmente solo es posible definir zonas sensibles delimitadas por rectngulos, no pudiendo definir otras. Con el atributo COORDS se definen las coordenadas de la zona sensible, estas sern la coordenada del primer vrtice xi1, yi1 y la coordenada del vrtice 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 imgen la forma ser: <IMG SRC="..." USEMAP="#nombre" > Como nombre utilizaremos el nombre que se le dio al mapa su definicin.
Esta etiqueta solo es soportada por los navegadores ms modernos, Internet Explorer de Microsoft y el Netscape 2.0, por tanto los navegadores antiguos no podran interpretar este tipo de mapas, sin embargo es posible utilizar ambas formas de definicin 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
Ejemplo de Imgen Sensible
Creacin de una Imgen sensible

En este apartado se explicar paso a paso, la creacin de una imgen sensible. Para ello se utilizar el programa ms bsico para ello, mapedit, que se incluye en el Paquete Bsico para la Creacin 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 imgen (Map File), que deber tener la extensin .map, este ser el fichero que habr que transferir al servidor para referenciar la imgen sensible, lo llameremos ejemplo.map, en el apartado siguiente indicaremos el fichero GIF sobre el que se aplicar la imgen sensible (GIF Filename).
Una vez cargada la imgen obtenemos la siguiente pantalla:
En la que se muestra la imgen y sobre la que ser posible ya definir las zonas sensibles de la imgen. en el men Tools, estan expresadas todas las figuras que se pueden utilizar en la imgen, estas son: Polygon, para una lnea poligonal, Circle, para definir un circulo y Rectangle, define un rectngulo.
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 botn izquierdo del ratn, fijando el primer vertice, luego arrastraremos hasta situarnos en el vertice opuesto, y ah pulsaremos el botn derecho del ratn 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 botn izquierdo del ratn todos los puntos que forman el polgono y cuando lleguemos a su fin
pulsaremos el botn derecho del ratn y podremos introducir la URL, la lnea poligonal no ser necesario terminarla, uniendose automticamente el primer y ltimo vertice. Una vez que definamos todas las zonas sensibles de la imgen, podemos utilizar la opcin Test+Edit, que nos permir probar y en su caso editar las distintas zonas de la imgen, obteniendo un muestra de la zona activa como se ve en la imgen:
La opcin 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 imgen y la URL por defecto, podremos grabar el mapa de la imgen 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 existirn dos formas de referenciarlo: Imgen sensible interpretada por el servidor
Inst. HTML <A HREF="ejemplo.map"><IMG SRC="imgmap.gif" ISMAP> </A>
Resul tado
Explica cin
Como se ve pulsando en las distintas zonas de la imgen se activan los enlaces correspondientes, pero no hay forma de saber que zonas son sensibles y que enlaces se activan en cada zona. Imgen sensible interpretada por el cliente
Inst. HTML
<MAP NAME="ejemplo"> <AREA SHAPE=RECT COORDS="8,10,61,63" HREF="http://www2.uca.es/manualhtml/prueba/boton1.htm" > <AREA SHAPE=RECT COORDS="62,10,134,36" HREF="http://www2.uca.es/manualhtml/prueba/boton2.htm" > <AREA SHAPE=RECT COORDS="62,36,134,64 " HREF="http://www2.uca.es/manualhtml/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] En este caso la definicin es ms 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 imgen y muestra en la parte inferior de la ventana los enlaces que se activan cuando se pulsa en cada zona. Explica Ademas es ms rpida la identificacin de que enlace se activa en cada zona. cin 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 imgen se han incluido los enlaces que activa en formato texto para el caso de que el navegador no soporte imgenes sensibles (o sea un robot de busqueda).
5.10 - Insercin de elementos multimedia
Multimedia ?
Como se ha explicado hasta ahora las posibilidades multimedia del lenguaje HTML se limita a insertar imgenes dentro de un texto, mostrar un fondo en el documentos y modificar los colores que presentarn los distintos textos. Con las instrucciones bsicas de HTML que hemos visto hasta ahora esto es lo mximo que se puede conseguir, la
posibilidad de mostrar vdeo o sonido en un documento HTML esta limitada a la capacidad y a la configuracin del navegador. La forma bsica 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 aplicacin externa que trate este tipo de ficheros. El navegador tendr definida una lista aplicaciones que trabajarn con los formatos ms comunes de fichero de vdeo, audio o imgenes. Esta opcin es poco operativa ya que no podran 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 estndar y se puede asegurar que no ser posible verlos en maquinas distintas a los PC con windows, ni en navegadores distintos a este. Otra aproximacin la ha realizado Netscape con la inclusin de los Plug-ins, estos son programas que se aaden al navegador de Netscape versin 2.0 y permiten tratar diversos tipos de ficheros, de esta forma podr insertarse estos tipos de ficheros dentro de una pgina HTML, permitiendo mostrar vdeo 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 estndar ni estn realizados por el mismo fabricante, ni son todos de libre distribucin, y adems solo son validos hasta ahora en PCs con windows. Adems la correcta visin del documento depender de que el usuario disponga del plug-in correspondiente instalado. En la ltima versin de Netscape (3.0 aunque todava es beta), se incluyen por defecto plug-ins para audio, vdeo y VRML, por lo tanto cuando se extienda el uso de este navegador se podra asegurar la reproduccin de este tipo de ficheros.
Extensiones Multimedia de Internet Explorer

El Internet Explorer de Microsoft permite mostrar vdeo en formato AVI y reproducir sonido, de una forma sencilla, para eso aade una nueva etiqueta y un atributo a la etiqueta de mostrar imgenes.
<BGSOUND ...> Reproduccin de audio

<BGSOUND SRC="fichero de sonido" LOOP= n INFINITE> Incluiremos una nica vez esta etiqueta en el fichero que deseemos tenga msica 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 nmero o INFINITE que indicar de forma indefinida.
<IMG DYNSRC ...> Reproduccin de vdeo
<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 imgen mostrar un vdeo en formato AVI (Vdeo for Windows), se puede utilizar todas los atributos normales de IMG, pudiendo usar las distintas alineaciones y colocaciones respecto al texto, adems se podr variar el tamao del vdeo con los atributos HEIGHT y WIDTH. Se aaden otros atributos que solo se pueden aplicar al vdeo, el atributo IMGSRC indica la URL del fichero que se mostrar, el atributo LOOP indica el nmero de veces que se mostrar el vdeo, el atributo CONTROLS indicar si se mostrarn los botones de control, que permitirn para, volver a reproducir, rebobinar, .... El atributo START indica si la secuencia de vdeo empezar al abrir el fichero (FILEOPEN) o cuando pase el cursor del ratn encima (MOUSEOVER). De no poder mostrar el vdeo por tratarse de otro navegador (por ejemplo Netscape), se podr indicar una imgen 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 vdeo, audio, ficheros de un determinado formato (ficheros PDF, presentaciones de ASAP, fichero VRML, etc ...). No existe actualmente un conjunto estndar de plug-ins para cada tipo de ficheros, sino que existen diversas aplicaciones, realizadas por diversos fabricantes, y no todas de libre distribucin. Se puede asegurar que todas las aplicaciones sern compatibles y si por ejemplo se referencia un fichero de sonido en formato .wav en su pgina, este podr ser odo por todos aquellos que tengan un plug-in para este tipo de ficheros. Para que un fichero multimedia que es incluido en una pgina sea visible por el usuario debe cumplir dos condiciones: la primera es que posea el navegador de Netscape en su versin 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-ins utilizando ficheros que sean de formatos comunes y un uso complementario en una pgina, ya que muchos usuarios no podrn 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 instruccin que permite incluir cualquier tipo de archivo dentro de un documentos HTML, pero se ver en el prximo apartado.
<EMBED> Insertar Ficheros

Esta instruccin permite la inclusin de cualquier tipo de fichero en la posicin del documento HTML donde se especifique. Su funcionalidad es similar a la IMG para incluir imgenes. 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 tamao que tendr en objeto insertado, siendo estos opcionales. El fichero que podr ser un fichero de vdeo, audio, imgen de algn 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 pelculas de vdeo o incluir sonido de fondo. Se recomienda un uso limitado de esta posibilidad, ya que existirn muchas personas que no posean el Netscape 2.0, y no posean el plug-in correspondiente, y por lo tanto no podrn ver todo el esplendor de su pgina.
5.11 - TABLAS
Introduccin
Permite la representacin de datos por filas y columnas, en forma tabular. La definicin es muy flexible indicando solo los elementos que forman cada fila y columna, calculndose de forma automtica el tamao 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 nmero de filas o columnas ya que estas se calculan segn se va definiendo la tabla. En el caso que una fila tenga ms columnas que otra, en las otras filas las columnas se representarn vacias, no siendo necesario que todas las filas sean iguales.
<TABLE> Definicin de la Tabla

Para definir una tabla usaremos la etiqueta <TABLE>, que tiene el siguiente formato: <TABLE BORDER="tamao del borde" > ... Definicin de la tabla ... </TABLE> En la etiqueta inicial TABLE definiremos los atributos que afectarn a toda la tabla, todos los atributos son opcionales. Todo lo que se incluya dentro de la instruccin de tabla se considerar como tal, pudiendo definir tablas anidadas (tablas dentro de tablas).
Ejemplo de tabla 1
Puede presentar los siguientes atributos:
BORDER =n
Si se especifica se dibujar un borde alrededor de la tabla y separanado los distintos campos que presenta. Indicaremos un nmero que especificar el tamao del borde, por defecto ser 0, es decir, no se dibujar ningn 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
CELLSPACING=n
Indica el espacio que debe existir entre las distintas celdas de la tabla. Por defecto ser 2. Si se indica 0 no habr ningn espacio entre las celdas.
CELLPADDING=n
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 aparecern sin separacin.
Ejemplo de tabla 6
WIDTH=valor o porcentaje%:
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 funcin del tamao del documento (tamao de la ventana del visualizador). Se recomienda utilizar
tamaos de tabla en porcentaje del documento, ya que de esta forma la tabla queda perfectamente ajustada para cualquier tamao del documento.
Ejemplo de tabla 9
HEIGHT=valor o porcentaje%
Definir el alto de la tabla, a igual que WIDTH, se puede indicar en valor absoluto o en porcentaje. En este caso es ms recomendado en valor absoluto ya que el alto es ms dificil que pueda coincir con el tamao de la ventana. Dentro de la instruccin de la tabla se incluirn 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 parmetros que afectarn 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 alineacin que tendrn los elementos dentro de las celdas.
ALIGN = LEFT CENTER RIGHT
Indica la alineacin 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: Alineacin a la izquierda de la celda. Este el valor que se toma por defecto RIGHT: Alineacin a la derecha. CENTER: Indicar centrado.
VALIGN = TOP MIDDLE BOTTOM:
Indicar la alineacin vertical del dato dentro de la celda. Se podr especificar donde se colocarn los datos dentro de la celda. Afectarn 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.
BGCOLOR:
Indicar el color de fondo que tendrn 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 mostrarn 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=Tamao 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=Tamao 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:
ALIGN:
Indica la alineacin 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
VALIGN:
Indicar la alineacin 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
WIDTH:
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 tamao de la tabla.
BGCOLOR:
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
ROWSPAN:
Indicar el nmero 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
COLSPAN:
Indicar el nmero 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
NOWRAP:
Se usar para que no se divida la lnea por defecto. Si la usamos las lneas de texto no se dividirn dentro de la celda en varias lneas. Por tanto si la linea es muy larga la columna de la tabla ser tan ancha como la lnea, solo se dividir si se usa el elemento
Ejemplos de Tablas
Una Tabla Simple:
123 456 <TABLE BORDER> <TR> <TD>1 <TD> 2 <TD> 3 <TR> <TD>4 <TD> 5 <TD> 6 </TABLE>
Demostracin de TH, COLSPAN y ROWSPAN:

Numeros Num 1 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>
Demostracin de Multiples Cabeceras:

Datos1 Datos2 Datos1.1 Datos1.2 Datos2.1 Datos2.2
1 5
2 6
3 7
4 8
<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:

123 456 <TABLE> <TR> <TD>1 <TD> 2 <TD> 3 <TR> <TD>4 <TD> 5 <TD> 6 </TABLE>
Tabla con Borde=15:

123 456 <TABLE BORDER=15> <TR> <TD>1 <TD> 2 <TD> 3 <TR> <TD>4 <TD> 5 <TD> 6 </TABLE>
Ejemplos con CELLPADDING y CELLSPACING:

1 4 2 5 3 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 4
2 5
3 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 Celda 1 Celda 5 Celda 8 Celda 7 Celda 12 Celda 10 Celda 9 <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 Cabecera de Titulo Cabecera de Titulo 2 3 Celda 2 Celda 3 Cabecera de Titulo 4 Celda 4
<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 4 Celda 2 Celda 5 Celda 3 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 tamaos de tablas:
WIDHT=10%
y por ltimo Esta es esta es la celda La la nmero dos celda 1 nmero 3 Celda 1 dos y por segunda 2 ltimo fila fila esta es
la celda nmero 3 de la ltima fila
WIDHT=50%
y por ltimo esta es la celda nmero 3
Esta es la La celda nmero dos 1 Celda 1 segunda fila
y por ltimo esta es la dos 2 celda nmero 3 de la fila ltima fila
WIDHT=75%
La dos y por ltimo esta es la celda nmero 3 dos 2 fila y por ltimo esta es la celda nmero 3 de la ltima fila
Esta es la celda nmero 1 Celda 1 segunda fila
WIDHT=100%
y por ltimo esta es la celda nmero 3
Esta es la celda nmero 1 La dos Celda 1 segunda fila
dos 2 fila y por ltimo esta es la celda nmero 3 de la ltima fila
5.12 - FORMULARIOS (FORM).
Introduccin
Los formularios son plantillas que permiten la creacin de documentos HTML con peticiones de datos. La principal utilidad de los formularios es la posibilidad de crear cuestionarios, encuestas, pginas de comentarios o cualquier documento en la que se desee una interaccin por parte del usuario. Se podrn definir distintos tipos de recuadros de dialogo, botones de seleccin, mens de mltiples opciones, ... Para permitir obtener los datos de una manera ms intuitiva.
<FORM> Definicin de formularios

Existe una instruccin HTML para la creacin 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 definirn los distintos elementos de peticin de datos. Estas instrucciones que se explicarn a continuacin definirn los tipos de botones, cajas de dialogo y ventanas para la introduccin de datos. Y definirn las variables que almacenarn los datos introducidos por el usuario. Estas etiquetas se incluirn entre la de definicin 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 algn lenguaje de programacin. A este programa se pasar como parmetros los datos introducidos en el formulario y retornar un cdigo 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 envo de los datos. Con POST enva los datos en la entrada estndar del programa que trata el formulario y con GET los datos se pasan por parmetro, en la lnea de comandos, al programa. El usar uno o otro mtodo vendr determinado por como son tratados los parmetros en el formulario en el (CGI-BIN). El mtodo de uso ms normal ser POST.
Una vez definidas las caractersticas globales del formulario incluiremos los distintos botones y cajas de dialogo que lo constituyen. Dentro de la instruccin del formulario podrn incluirse cualquier texto o instruccin 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 bsica de datos

La etiqueta INPUT se utiliza para definir gran variedad de tipos de campos de entrada de datos. Por lo general sern entradas de texto corto (a lo sumo una frase) o opciones. El formato bsico es el siguiente: < INPUT TYPE = ( TEXT | PASSWORD | CHECKBOX | RADIO | HIDDEN | SUBMIT | IMAGE | RESET ) NAME = "Variable que toma el valor" VALUE = "Valor de Inicializacin" > El atributo TYPE se usa para determinar el tipo de recuadro de dialogo de entrada que se est definiendo, a continuacin se explicarn 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 inicializacin, que ser el valor por defecto. A continuacin 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, nmeros, fechas o diversos datos que se puedan expresar en una lnea de texto. Se mostrar un recuadro que ocupa una lnea y la que ser posible especificar este texto. El formato de la instruccin es el siguiente: < INPUT TYPE=TEXT NAME="variable" VALUE="valor inicial" SIZE="tamao" MAXLENGTH="longitud mxima" > El tamao de la ventana de introduccin de texto se fija con el atributo SIZE, que indica el tamao de la ventana en caracteres. Aqu solo se define la parte visible, pero el usuario podr introducir ms texto si lo desea. Para indicar el mximo nmero 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 inicializacin
del campo. De todos los atributos solo ser obligatorio NAME, siendo el resto opcionales. En la entrada se podrn usar cualquier tipo de caracteres incluso los acentuados, en su formato normal. Ejemplos
Inst. HTML Resul tado Explica cin Inst. HTML Resul tado Explica cin Inst. HTML Resul tado Explica cin Nombre: <INPUT TYPE=TEXT NAME=variable>
Nombre:
Ser una introduccin de texto bsica.
Nombre: <INPUT TYPE=TEXT NAME=variable VALUE="Texto de Inicializacin">

Texto de Inicia
Nombre:
En este caso introduciremos un texto de inicializacin que ser el texto por defecto y es editable por el usuario. Nombre: <INPUT TYPE=TEXT NAME=variable VALUE="Texto de Inicializacin" SIZE=50 MAXLENGHT=55>
Nombre:
Texto de Inicializacin
Ahora definimos con SIZE un mayor tamao del recuadro y con MAXLENGHT definimos el nmero mximo de caracteres que se pueden introducir.
<INPUT TYPE=PASSWORD...> Palabras secretas

Es similar al anterior pero en este caso no se imprimen los caracteres segn se van introduciendo, se muestra un asterisco en vez de los caracteres. Solo se puede ver el nmero de caracteres, pero no valor. Se usa para la introduccin 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="tamao" MAXLENGTH="li>longitud mxima" > Ejemplo
Inst. HTML Resul tado Explica cin
Password: <INPUT TYPE=PASSWORD NAME=variable VALUE="password">
Password:
El texto introducido no puede ser visto, pero si es posible saber el nmero de caracteres que se introducen.
<INPUT TYPE=CHECKBOX> Botones de seleccin

El checkbox es un botn 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 sern on off, dependiendo de su estado. Si el botn estaba activado cuando se envan 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 botn se encontrar activado en la inicializacin. Si se indica el atributo VALUE,cuando se envian los datos con el botn activado se mandar la variable con el valor indicado y en caso contrario no se mandar ningn valor. Ejemplo
Inst. HTML Resul tado Explica cin Inst. HTML Resul tado Explica cin <INPUT TYPE=CHECKBOX NAME= variable> Opcin
Opcin
En este caso esta desactivado por defecto y su utilizar en caso de los valores on y off para definir su estado.
<INPUT TYPE=CHECKBOX NAME= variable CHECKED> Opcin
Opcin
Ahora se especifica CHECKED para indicar que por defecto debe estar activado.
<INPUT TYPE=RADIO...> Seleccin entre mltiples opciones
Se usa cuando la opcin 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 opcin. Para inicializarlo se usa el atributo CHECKED que se indicar solo en la opcin que se quiera especificar por defecto. Ejemplo
Inst. HTML <INPUT TYPE=RADIO NAME= variable VALUE=opcion1 >Opcin 1<BR> <INPUT TYPE=RADIO NAME= variable VALUE=opcion2 CHECKED>Opcin 2<BR> <INPUT TYPE=RADIO NAME= variable VALUE=opcion3 >Opcin 3<BR> <INPUT TYPE=RADIO NAME= variable VALUE=opcion4 >Opcin 4<BR>
Opcin 1
Resul tado
Opcin 2 Opcin 3 Opcin 4
Explica cin
En este caso solo es posible seleccionar uno de los posibles valores, la opcin CHECKED indica cual es la opcin activa por defecto.
<INPUT TYPE=HIDDEN...> Parmetros ocultos

En este caso no se muestra ningn 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 informacin de estado control para enviar algn tipo de informacin 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 botn se usa para enviar los datos del formulario, al pulsar el usuario este botn, se acaba la introduccin del formulario y pasa el control al programa indicado en ACTION. En todo formulario debe existir al menos un botn 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 botn de envo. Lo normal es que este botn no enve 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 Resul tado Explica cin < INPUT TYPE=SUBMIT VALUE="Enviar Datos" >
Enviar Datos
El texto indicado en VALUE es el que etiqueta el botn, al pulsar sobre l se enviarn los datos del formulario
<INPUT TYPE=IMAGE...> Botn de Envo grfico

Su funcionalidad es similar al botn de SUBMIT, se usa igualmente para enviar los datos de un formulario, pero en este caso se presenta una imagen como botn. Igualmente al pulsar sobre el botn 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 tambin es pasado al programa interprete del formulario, de forma que la imagen igualmente podra ser un mapa sensible. Se pasarn dos parmetros 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 cin
Se muestra la imagen como botn de envo, sustituyendo al botn de SUBMIT.
<INPUT TYPE=RESET...> Borrar los datos

Este botn 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 botn.
<TEXTAREA> Texto en mltiples lneas

Permite la introduccin de un texto que puede abarcar varias lneas, introduciendo este en forma de prrafo. El formato general ser: <TEXTAREA NAME="variable" ROWS=Filas COLS=Columnas> Texto de Inicializaci& oacute;n que puede incluir varias líneas. </TEXTAREA> En este caso se presenta una ventana del tamao 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 podrn incluir las marcas del lenguaje HTML, pero solo se tendrn en cuenta para incluir acentos y otro tipo de efectos. Los atributos ROWS y COLS determinan el tamao de la ventana visible, el texto se podr extender ms all de estos limites. Ejemplo
Inst. HTML <TEXTAREA NAME=variable ROWS=10 COLS=54> Texto de Inicialización que puede incluir varias líneas. </TEXTAREA>
Texto de Inicializacin que puede incluir varias lneas.
Resul tado
Explica cin
Se puede especificar el tamao de la ventana para introducir datos e indicar un texto de inicializacin, aunque este ser opcional.
<SELECT> Eleccin entre mltiples opciones

Se usa para mens simple o mltiples. Define mens de tipo pop-up (men de barras) y ofrece una alternativa ms compacta al uso de botones RADIO o CHECKBOX. Su formato es el siguiente: <SELECT NAME="variable"> < OPTION SELECTED VALUE=valor1> Opcin Primera < OPTION VALUE=valor2> Opcin Segunda ... < OPTION VALUE=valorn> Opcin Ensima </SELECT> Si se desea que sea un men mltiple se deber incluir el atributo MULTIPLE en la etiqueta de SELECT, en este caso se mostrarn todas las opciones en forma de tabla, en el otro caso se mostrar la opcin activa y un botn para poder modificar esta opcin. En ambos casos solo podr seleccionarse una de las opciones. Cuando se enva el resultado del formulario la variables NAME tomar el valor de la opcin que este activa. La etiqueta OPTION que contenga el atributo SELECTED ser considerada la opcin por defecto, caso de no especificarse ninguna se considerar la primera de las opciones. Ejemplos
<SELECT NAME="variable"> <OPTION VALUE=1> Opcin Primera <OPTION SELECTED VALUE=2> Opcin Segunda <OPTION VALUE=3> Opcin Tercera </SELECT>
Inst. HTML
Resul tado Explica cin
Opcin Segunda
Se muestra la opcin activa que puede ser cambiada, por defecto esta activada la segunda opcin.
Inst. HTML
<SELECT NAME="variable" MULTIPLE> <OPTION VALUE=1> Opcin Primera <OPTION SELECTED VALUE=2> Opcin Segunda <OPTION VALUE=3> Opcin Tercera </SELECT>
Opcin P era rim
Resul tado Explica cin
En este caso al ser mltiple se muestran todas las opciones posibles, de las que solo es posible seleccionar una.
7 - CGI (Common Gateway Interface), ejecucin de binarios.
Definicin
Los cgi-bin son programas que se ejecutan en el servidor, pueden servir para tratar informacin, como pasarela con una aplicacin o base de datos o para generar documentos html de forma automtica. 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 programacin 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 ms 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 extensin 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 extensin 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 podrn escribir con las instrucciones normales del lenguaje de programacin 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 ms interesantes son:
REQUEST_METHOD
El mtodo 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.
PATH_INFO
El cgi-bin puede ser llamado directamente desde el cliente, en esta variable se incluir toda la informacin que siga al nombre del cgi-bin, por ejemplo: http://www2.uca.es/binarios/cgibin.cgi/camino/fichero PATH_INFO = /camino/fichero Ser la informacin adicional que se aade tras el nombre de cgi-bin. La informacin 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 cdigo ASCII en hexadecimal del caracter. Esto debe ser tenido en cuenta cuando se interprete la informaci obtenida en formato URL.
PATH_TRANSLATED
Una versin decodificada de PATH_INFO, obtiene el camino y lo convierte de camino virtual (en referencia del servidor) a camino real (camino completo).
SCRIPT_NAME
Nombre por el que fue llamado el cgi-bin.
QUERY_STRING
La informacin que sigue al smbolo ? en la URL que referencia al cgi-bin. Ser algn tipo de consulta que se realice al cgi-bin. No necesita ser decodificada de ninguna manera. Cuando se utiliza el mtodo 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
REMOTE_HOST
El ordenador desde el que se ejecuto el cgi-bin.
REMOTE_ADDR
Direccin IP del ordenador remoto que ejecuto el cgi-bin.
CONTENT_LENGTH
El nmero de caracteres enviados por el cliente al cgi-bin.
HTTP_USER_AGENT
El cliente de la WWW que ejecuta el cgi-bin, el formato general es: programa/versin libreria/versin El cgi-bin podra enviar un distinto cdigo HTML segn cada cliente.
Entrada de datos al cgi-bin

Para los formularios que utilizan el mtodo POST, la informacin es enviada al cgi-bin por la entrada estndar (stdin). El servidor enva 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 informacin con codificacin URL. En esta codificacin como se vio antes los espacios se convierten en signos '+' y los caracteres especiales se codifican de la forma %xx, donde xx el cdigo ASCII en hexadecimal del carcter. Por tanto esto debe ser tenido en cuenta cuando se interpreten los datos enviados del formulario. Las variables del formulario se enviarn 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 estndar (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 pequea cabecera que identificar al documento. Las directivas que definen esta cabecera sern:
Content-type:
Es el tipo MIME del documento que se retorna. Si tuviera el valor text/html la salida se interpretara como cdigo html. Por tanto la salida del cgi-bin podra 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" );
Sera el comienzo de la salida de cgi-bin escrito en C que comienza a generar cdigo html.
Location:
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 direccin. Esta permitido el uso de informacin adicional (PATH_INFO) y la directiva ?, pero no la directiva # para indicar un punto determinado dentro de un documento.
Status:
Indicar un cdigo de estado para indicar errores. El formato ser nnn xxxxxxx, donde nnn es un nmero de tres dgitos y xxxxxxx es una cadena de caracteres. Tras la cabecera se incluirn 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 cgibin podra 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.
8 - Documentos con Frames
Introduccin
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:
Mostar su propia URL, diferenciada del resto de las frames de la pantalla, de esta forma un hiperenlace puede tener como destino un documento y la frame en el que se mostrar. Tendrn asociado un nombre, que las distinguirn del resto de las frames de la pantalla y permitir usarlo en los hiperenlaces. En el caso que se cambie el tamao de la ventana, se podr determinar si la frame se ajusta a este tamao o mantiene su tamao intacto.
Esto permite crear nuevos tipos de documentos, en los que por ejemplo se mantendr una regin esttica (lista de enlaces, barra de botones, formulario) y otra zona dinmica en la que se mostrar el resultado. De esta forma una de las principales utilidades de las frames es la creacin de pginas con un ndice (por ejemplo un manual) o una cabecera esttica, consiguiendo as una mejora de la navegacin al poder acceder al ndice de una manera ms rapida y efectiva. El uso de las frames es til para cierto tipo de documentos, pero puede llegar a dificultar la navegacin, dentro de un documento con frames no tendr utilidad los botones de documento previo (back) ni documento siguiente (forward), ya que ambos nos trasladarn fuera del documento con frames. Para ver el documento previo en una de las frames debemos utilizar el botn derecho del ratn sobre ella y seleccionar la opcin volver en el frame (Back in Frame). Esto hace que cuando se utilicen frames haya que cuidar la correcta transicin 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.
Definicin
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> Definicin 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 explicacin de que el documento solo es visible con el navegadores que soporten frames, o bien incluir una versin del documento que se muestre sin necesidad de frames.
<FRAMESET ...> Definicin de las frames.

Con esta instruccin definiremos las frames que formarn 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).
ROWS:
Se definir separado por comas el tamao de cada una de las frames. De esta forma se dividir la pantalla de forma horizontal, segn cada una de las filas definidas. El tamao de la frame, puede expresarse de las siguientes formas:
En valor absoluto, que indicar el tamao en puntos de la pantalla. En este caso si todas las frames se indican de este modo, los valores se ajustarn para que las frames ocupen la totalidad del espacio de la ventana del navegador, no guardando siempre la proporcin con la que se definen las frames. En tanto por ciento sobre el tamao de la ventana, en este caso si los porcentajes suman un valor distinto del 100%, se ajustarn para que coincidan con el tamao de la ventana. Se podr combinar con el apartado anterior de forma que algunas frames se definan en valor absoluto y otras en porcentaje. De forma relativa con el smbolo * que indica el tamao restante de la ventana. Si se indica una frame como 2* y otra como *, la primera ocupar dos tercios del espacio restante y la segunda un tercio del espacio restante. Se puede combinar con las definiciones anteriores. Ejemplo Inst. HTML Muestra
<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 tamao de la ventana del navegador y la tercera (verde) el espacio restante, si se vara el tamao de la ventana del navegador, cambiar el tamao de las dos ltimas.
COLS:
Toma los mismos posibles valores que ROWS, pero en este caso para las columnas, se definirn las frames de forma vertical.
Ejemplo Inst. HTML Muestra
<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 proporcin que en el caso anterior.
Una vez definida el nmero de frames por fila o por columna se definir el contenido de cada una de estas con la etiqueta FRAME, pero igualmente se podra definir frames dentro de frames, de forma que cada una de las definidas anteriormente podra estar divida en varias frames, esto se har incluyendo dentro de la instruccin FRAMESET, nuevas instrucciones FRAMESET que dividirn esta en las frames indicadas, como se ve en el siguiente ejemplo: Ejemplo Inst. HTML
<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 podran definir nuevas frames, pudiendo dividir la ventana, tantas veces como se desee.
Muestra
<FRAME ...> Definicin 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 adems algunos otros atributos: <FRAME SRC="URL" NAME="Nombre de la frame" MARGINWIDTH="ancho del margen" MARGINHEIGHT="alto del margen" SCROLLING=YES | NO | AUTO NORESIZE>
URL:
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 vaca.
NAME:
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.
MARGINWIDTH:
Indica el ancho del margen, este atributo es opcional y normalmente el navegador ajusta todos los mrgenes al mismo tamao, si se especifica se valor ser en puntos de la pantalla.
MARGINHEIGHT:
Igual que en el caso anterior pero para el alto de los mrgenes. Lo normal es no especificar ninguno de estos dos atributos.
SCROLLING:
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 ratn 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 ningn caso se muestre la barra de scroll. Si no se indica nada se toma por defecto el valor AUTO.
NORESIZE:
Indica que la frame no debe ser variada de tamao por el usuario, se puede variar el tamao de una frame situando el cursor del ratn encima y arrastrando en la direccin deseada. Con este atributo el usuario no podr cambiar el tamao de la frame en ningn caso. Por defecto todas las frames pueden variar su tamao.
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 operacin. Normalmente, en pginas sin frames, cuando se segua 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 utilizarn normalmente en los documentos que se incluyen dentro de las frames. Las etiquetas que permiten el uso de TARGET son las siguientes:
A:
En los hiperenlaces indicar la frames donde se mostrar el documento, una vez que se siga el hiperenlace. <A HREF="url" TARGET="frame">
BASE:
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">
AREA:
En la definicin de imgenes 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">
FORM:
Indicar la frame de destino del resultado del formulario. <FORM ACTION="url" TARGET="frame"> Existen unos valores especiales de TARGET que nos permitirn definir destinos distintos a las frames definidas. Estos valores son los siguientes:
TARGET="_blank": Indica que se muestre en una nueva ventana vaca, para

seguir el enlace se lanza otra ventana distinta del navegador. TARGET="_self":Se mostrar en la misma ventana o frame que lo referencia, se puede usar para modificar el valor dado por BASE. TARGET="_parent": Se muestra en la frame o estructura de frames que llam al documento actual. TARGET="_top": Indica que se muestre en la ventana completa, eliminando la estructura de frames que tenga la ventana.

Manual HTML

Transféré par

Informations du document

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Manual HTML

Transféré par

Droits d'auteur :

Formats disponibles

El Lenguaje HTML 1 - Etiquetas del lenguaje HTML

Las Etiquetas Atributos de las Etiquetas Etiquetas correctas

2 - Formato de las URL

Definicin Uso y Formato

3 - Estructura de un documento HTML

Estructura Bsica Comentarios

4 - Cabecera de un documento HTML

5 - Cuerpo de un documento HTML

Introduccin Definicin de colores Atributos de <BODY> Ejemplos

5.1 - Espaciados y saltos de lnea

5.2 - Caracteres latinos y especiales

<H1> - <H6> Cabeceras de titulos <Hn ALIGN=CENTER>: Alineacin de la cabecera Ejemplos

5.4 - Tamao y Color de las fuentes de caracteres

5.5 - Estilos fsicos y lgicos

Estilos fsicos y Estilos lgicos Estilos Fsicos Estilos Lgicos

5.6 - Definicin de listas

Hiperenlaces <A HREF=...> Hiperenlace

URL absolutas y relativas o Ejemplos <A NAME=...> Elemento Ancla

5.9 - Imgenes Sensibles

5.10 - Inserccin de elementos multimedia

Multimedia ? Extensiones Multimedia de Internet Explorer Plug-in's <EMBED> Insertar Ficheros

7 - CGI (Common Gateway Interface), ejecucin de binarios.

8 - Documentos con frames.

1 - Etiquetas del lenguaje HTML

<TABLE> Definir una tabla. <IMG> Inclusin de una IMaGen.

Atributos de las Etiquetas

2 - Formato de las URL

http: (HyperText Transport Protocol), es el protocolo utilizado para transmitir

http://www.uca.es/internet/internet.html fichero internet.html que se encuentra en el directorio

3 - Estructura de un documento HTML

4 - Cabecera de un documento HTML

<TITLE>: Ttulo del documento

<BASE>: URL base del documento.

<ISINDEX>: El documento es un ndice

<META>: Indica refresco del documento

5 - Cuerpo de un documento HTML

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

BGCOLOR=#rrvvaa nombre del color:

TEXT=#rrvvaa nombre del color:

LINK=#rrvvaa nombre del color:

VLINK=#rrvvaa nombre del color:

5.1 - Espaciados y saltos de lnea

<P> Cambio de prrafo :

Esta es una frase que forma un parrafo. Este es el otro parrafo.

<BR> Salto de lnea :

Esta es una frase de la primera lnea. Esta es la siguiente lnea

<HR> Regla Horizontal :

ALIGN=LEFT, RIGTH CENTER:

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

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

<HR SIZE=5 NOSHADE>

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

<PRE> Texto preformateado :

<CENTER> Centrado de texto e imgenes :

Este texto se ver centrado

Inst. HTML Resul tado Explica cin

<CENTER> El texto y la imagen se centran<BR> <IMG SRC="/iconos1/or_star.gif"> </CENTER>

El texto y la imagen se centran

&nbsp; Espacios en blanco :

5.2 - Caracteres latinos y especiales

Como representar caracteres especiales

Elementos del lenguaje HTML

Algunos otros smbolos especiales sern los siguientes.

Sec. Escape &ccedil; &reg; &#nnn;

Espacios en blanco :

Sec. Escape ç ® &#nnn;

Sec.Escape Ç ©