Codigos HTML

Cabecera de un documento <HEAD> <TITLE> <META> Cuerpo de un documento <BODY> 1.
. Tamaos y tipos de letra <Hx> <FONT SIZE> <FONT FACE> 2. Texto de colores <FONT COLOR> 3. Prrafos. Saltos de lnea. Bloques tabulados. Lnea horizontal. Divisiones. Recuadros <P> <BR> <BLOCKQUOTE> <HR> <DIV> <SPAN> <FIELDSET> 4. Texto preformateado <PRE> <SPACER> &nbsp 5. Negrita. Itlica. Centrado. Otros efectos <B> <I> <CENTER> <ACRONYM> Otros 6. Lista desordenada. Lista ordenada. Men. Lista de definicin. Directorio <UL> <OL> <MENU> <DL> <DIR> <LI> <DT> <DD> 1. Ejemplos de listas 7. Tablas <TABLE> <TR> <TD> <TH> 1. Ejemplos de tablas 8. Cdigos de colores <FONT COLOR> <BODY BGCOLOR> 1. Combinacin de efectos de colores <BODY BGCOLOR FGCOLOR TEXT LINK VLINK ALINK> 9. Por qu hay que usar cdigos? &#xxx; &alias; 1. Tabla de cdigos de caracteres 10. Creando enlaces (links) <A> 11. Insertando imgenes <IMG> <MAP> 1. Usar una imagen como fondo de pgina <BODY BACKGROUND> 2. Usar una imagen como marca decorativa de una lista 3. Grficos animados 12. Introduccin a los formularios 13. Cmo se escriben formularios? <FORM> <INPUT> <SELECT> <TEXTAREA> 1. Ejemplos de formularios 2. Tabla de cdigos de conversin en formularios 14. Frames <FRAMESET> <FRAME> <IFRAME> 15. Insertando objetos. Pginas multimedia <EMBED> <OBJECT> 1. El reproductor DEW Player 16. Bloques en movimiento <MARQUEE>
17.
Icono de favoritos favicon.ico 18. Canales RSS ltimas innovaciones del HTML. 1. Estilos <STYLE> 1. Escribiendo hojas de estilo 2. Diseando un blog de ejemplo 3. Ejemplo de un blog con XHTML + CSS 2. El XHTML 1. Diferencias entre el HTML y XHTML 3. El HTML5 Introduccin a las aplicaciones de gestin 1. 2. 3. Cmo empezar? Algo sobre seguridad Qu es el ODBC? 1. Cmo se instala el ODBC de Accees? 2. Cmo se instala el ODBC de SQL Server? Qu es el IDC? Cmo se escriben ficheros para el IDC? 1. Ejemplo de aplicacin IDC (Ver todos los registros) 2. Ejemplo de aplicacin IDC (Ver lista desplegable) 3. Ejemplo de aplicacin IDC (Insertar un registro) Qu es el ASP? 1. Cmo se escribe el ASP? 2. Un modelo de aplicacin ASP 3. Nociones de ASP 4. Objetos de ASP 1. Application 2. ASPError 3. Session 4. Request 5. Response 6. Server 1. CreateObject("ADODB.Connection") CreateObject("ADODB.Recordset") 2. CreateObject("Scripting.FileSystemObject") 3. CreateObject("ADODB.Stream") 4. GetFile() - GetFolder() 7. ObjectContext VBScript en el servidor. Procedimientos Sub y Function 1. Constantes y Variables 2. Operadores 3. Instrucciones 4. Funciones numricas 5. Funciones de texto
4. 5.
6.
7.
6. 7. 8.
Funciones de fecha y hora Otras funciones
VBScript en el navegador 1. Cmo se escriben los scripts para el IE? 2. Los objetos del Internet Explorer 1. Window 1. Location 2. Document 1. Link 2. Form 1. Controles HTML 3. Los eventos en general Los lenguajes JavaScript y Java en el navegador <SCRIPT> <APPLET> 1. Cmo se escriben los JavaScript? 2. Funciones. 3. Operadores 4. Instrucciones. 5. Los objetos y funciones de JavaScript. 6. Los objetos del navegador 1. window 7. Ejemplos de JavaScript. Adiciones a la gua
9.
Cabecera (HEAD) de un documento HTML

La HEAD es la primera de las dos partes en que se estructura un documento HTML. En la HEAD reside informacin acerca del documento, y generalmente no se ve cuando se navega por l. En la HEAD se pone el elemento lleno <TITLE> que es una breve descripcin que identifica la pgina. Es lo que el navegador se guarda en el "Bookmarks" (libro de marcas o libro de direcciones), con lo que crea la lista que aparece en la orden "Go" de la barra de rdenes, lo que aparece en la esquina superior izquierda cuando se imprime el documento, y lo que aparece en el marco de la ventana del navegador. Tambin lo guarda en su cach, y servir para mostrar la pgina, cuando sea llamada otra vez, sin necesidad de conectarse de nuevo al servidor de origen. No hay que confundir el elemento <TITLE> con el nombre del fichero. Por ejemplo, esta pgina est contenida en un fichero llamado head.htm y el texto de su <TITLE> es: Head de un documento. Se escibir asi:
<HEAD> <TITLE>Head de un documento </TITLE> </HEAD>
Dentro de la HEAD puede utilizarse otro elemento: META. Por ejemplo, si se escribe:
<HEAD> <TITLE>Head de un documento </TITLE> <META HTTP-EQUIV="Refresh" CONTENT="10"> </HEAD>
Esto hace que el visualizador vuelva a cargar la pgina activa al cabo de 10 segundos. Tambin puede hacerse a un servidor. As:
<HEAD> <TITLE>Head de un documento </TITLE> <META HTTP-EQUIV="Refresh" CONTENT="10; URL=http://miservidor/mipagina.htm"> </HEAD>
Utiliza esto con precaucin. Si sabes que el contenido de la pgina no va a cambiar, es intil hacer esto, y si lo haces contra un servidor, puedes sobrecargarlo. Este elemento, slo tendr utilidad en casos muy especiales. Otra opcin es forzar la expiracin inmediata en la cach del navegador de la pgina recibida, lo que provoca que la pgina sea solicitada de nuevo al servidor cada vez, en lugar de cargar la copia que ya existe en la mquina del cliente. Se escribe as:
<HEAD> <TITLE>Head de un documento </TITLE> <META HTTP-EQUIV="Expires" CONTENT="Tue, 20 Aug 1996 14:25:27 GMT"> </HEAD>
Si se pone una fecha ya pasada, como la que hay en el ejemplo, el navegador elimina inmediatamente de la cach la pgina recibida, y si no es pasada, lo har en el momento indicado por la misma. Tambin se le puede dar valor cero a la fecha de expiracin:
<HEAD> <TITLE>Head de un documento </TITLE> <META HTTP-EQUIV="Expires" CONTENT="0">
</HEAD>
Otra opcin es impedir directamente que el navegador guarde en cach la pgina. Esto es especialmente til cuando se trabaja con formularios que consultan datos dinmicos:
<HEAD> <TITLE>Head de un documento </TITLE> <META HTTP-EQUIV="Expires" CONTENT="no-cache"> </HEAD>
Si tienes inters en que tus pginas aparezcan en los grandes buscadores de Internet, y puedan ser encontradas con facilidad, puedes poner las palabras clave que contiene la pgina separadas por comas. Por ejemplo:
<HEAD> <TITLE>Head de un documento </TITLE> <META NAME="keywords" CONTENT="HTML, internet </HEAD>
">
Este otro sirve para que los buscadores puedan ofrecer un breve resumen de los contenidos de tu pgina:
<HEAD> <TITLE>Head de un documento </TITLE> <META NAME="description" CONTENT="Manual para escribir HTML."> </HEAD>
El siguiente es importante con los nuevos navegadores, ya que le indica la tabla de caracteres que se ha empleado al escribir la pgina. De no usarlo, puede ocurrir que el navegador no muestre correctamente los caracteres especiales no ascii, tales como acentos, letras de alfabetos no occidentales, etc., que se hayan quedado sin codificar de la forma tpica en html.
<HEAD> <TITLE>Head de un documento </TITLE> <meta http-equiv="Content-Type" content="text/html; charset=iso-88591"> </HEAD>
Los charset ms habituales suelen ser:

<meta http-equiv="Content-Type" <meta http-equiv="Content-Type" 1"> <meta http-equiv="Content-Type" html5"> <meta http-equiv="Content-Type" 15"> <meta http-equiv="Content-Type" 1252"> content="text/html; charset=utf-8"> content="text/html; charset=iso-8859content="text/html; charset=utf-8 / content="text/html; charset=iso-8859content="text/html; charset=windows-
Puedes poner todos los elementos <META> que creas necesarios, pero sin repetirlos.
Habrs notado que se ha utilizado la palabra "cach", y tal vez no sepas a qu se refiere. Todos los navegadores, por defecto, siempre
que reciben una pgina de un servidor se hacen una copia de la misma en el disco de tu mquina. Con esto se pretende que si vuelves a solicitar la misma pgina, en lugar de pedirla de nuevo al servidor, te mostrar la que tiene guardada en el disco. A esta rea del disco donde el navegador va poniendo las pginas visitadas, se le denomina cach. El tamao de la cach lo puedes modificar desde las opciones de configuracin del navegador, e incluso puedes darle tamao cero, con lo que siempre que veas una pgina, sta habr sido solicitada al servidor independientemente de lo que digan las instrucciones META.
Hay otros elementos que pueden aparecer en la HEAD, como ISINDEX, NEXTID, LINK o BASE, pero son de uso muy especializado y poco corriente, algunos ya en desuso, y ninguno obligatorio (<TITLE> s lo es).
Cuerpo (BODY) de un documento

El cuerpo (BODY) es la segunda y ltima de las dos partes en que se estructura un documento HTML. Por supuesto es obligatoria, ya que es aqu donde reside el verdadero contenido de la pgina, y por tanto, al contrario de la HEAD s se ve cuando navegamos por ella. Se escibir asi:
<BODY> texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto </BODY>
Como ya habrs visto, los navegadores, por defecto, presentan el texto de una pgina ajustando los contenidos a la esquina superior izquierda de la pantalla. El elemento BODY tiene parmetros que permiten modificar los mrgenes por defecto. Lo malo es que cada navegador los interpreta de una manera. Por ejemplo, Netscape utiliza solamente dos instrucciones que afectan simultneamente a los mrgenes superior e inferior e izquierdo y derecho respectivamente: marginwidth="pixels", para los mrgenes izquierdo y derecho. marginheight="pixels", para los mrgenes superior e inferior. En cambio, el Internet Explores, utiliza uno para cada cual: leftmargin="pixels", para el margen izquierdo topmargin="pixels", para el margen superior rightmargin="pixels", para el margen derecho bottommargin="pixels", para el margen inferior Donde pixels es el nmero de pixels que se quiere mover cada margen hacia el interior de la pgina. Estos parmetros tambin son accesibles desde instrucciones de estilo.
Otro problema que suele presentarse con los mrgenes es que a la hora de imprimir una pgina, cada impresora, junto con el navegador, se las ingeniarn para hacer justo lo contrario de lo que se desea... Tal vez algun dia todo esto funcione bien. Otra cosa que puede controlarse desde BODY es el color que tomarn los links que pongamos en la pgina. Por ejemplo, para hacer que los links sean amarillos antes de ser visitados, azul-verde cuando son activados, y verdes despus de haber sido utilizados, se escribe: <BODY LINK="#FFFF00" VLINK="#22AA22" ALINK="#0077FF"> Veamos a hora los elementos ms habituales del lenguaje que deben escribirse en el BODY.
Tamaos y tipos de letra en HTML

Para definir distintos tamaos de letra, en HTML se utiliza el elemento lleno <Hx> </Hx> donde x es un nmero que puede variar entre 1 y 6, siendo 1 el tamao mayor.
Se escribirn as:
<H1> <H2> <H3> <H4> <H5> <H6> Texto Texto Texto Texto Texto Texto de de de de de de prueba prueba prueba prueba prueba prueba (H1)</H1>. (H2)</H2> (H3)</H3> (H4)</H4> (H5)</H5> (H6)</H6>
y este sera el resultado:
Texto de prueba (H1)

Texto de prueba (H3) Texto de prueba (H4) Texto de prueba (H5) Texto de prueba (H6) No hay que olvidar poner el cierre </Hx> a cada elemento utilizado. Este tipo de elemento se suele utilizar para escribir encabezamientos, ya que despus del cierre automticamente el visualizador inserta un salto de prrafo.
Por ejemplo: si escribes

<H1> Texto en H1 </H1> <H3> Texto en H3 </H3>
se ver:
Texto en H1
Texto en H3 Y no una cosa al lado de la otra, como cabra esperar. Este elemento admite un parmetro de alineacin. As, si escribes:
<H3 align=center> Texto en H3 </H3>
Texto en H3
Otra forma de cambiar los tamaos de letra es utilizar el elemento <FONT > con el atributo VALOR, que es un nmero entre 1 y 7. El valor por defecto del texto es 3. La gran diferencia de esta notacin respecto a la anterior es que no se produce un salto de prrafo despus de cada cambio, por lo que pueden hacerse cosas como esta:
<FONT SIZE=3>A</font><FONT SIZE=4>A</font><FONT SIZE=5>A</font> <FONT SIZE=6>A</font><FONT SIZE=7>A</font><FONT SIZE=6>A</font> <FONT SIZE=5>A</font><FONT SIZE=4>A</font><FONT SIZE=3>A</FONT>
Dar como resultado:
AAA
AAAAAA
Se puede cambiar el tamao por defecto (3) de toda la pgina con el elemento <BASEFONT SIZE=valor>. El texto tomar el tamao indicado por valor y lo mantendr hasta que aparezca otro elemento <BASEFONT SIZE=valor> y lo restaure o lo cambie por otro diferente. Tanto si se ha establecido un valor base como si se utiliza el valor por defecto, los tamaos tambin pueden indicarse de forma relativa, por lo que el valor puede ser positivo (+) o negativo (-) respecto al tamao base. Por ejemplo estos dos valores dan el mismo resultado:
<FONT SIZE=5>ABcde</FONT> <FONT SIZE=+2>ABcde</FONT>
ABcde ABcde
Con la versin 3.0 de Netscape se ha implementado un nuevo atributo del elemento <FONT> que permite elegir tipos de letra entre los varios de que dispone por defecto Windows. Se trata del atributo FACE. Este atributo permite forzar el tipo de letra que el diseador de la pgina quiere que vea el cliente, sin importar el que por defecto tenga establecido el visualizador.
Si escribes
<FONT FACE="arial">Texto de prueba 12345 con tipo ARIAL</FONT> <FONT FACE="times new roman">Texto de prueba 12345 con tipo TIMES NEW ROMAN</FONT> <FONT FACE="courier new">Texto de prueba 12345 con tipo COURIER NEW</FONT> <FONT FACE="courier">Texto de prueba 12345 con tipo COURIER</FONT> <FONT FACE="roman">Texto de prueba 12345 con tipo ROMAN</FONT> <FONT FACE="small fonts">Texto de prueba 12345 con tipo SMALL FONTS</FONT>
Se ver:
Texto de prueba 12345 con tipo ARIAL Texto de prueba 12345 con tipo TIMES NEW ROMAN Texto de prueba 12345 con tipo COURIER NEW Texto de prueba 12345 con tipo COURIER Texto de prueba 12345 con tipo ROMAN Texto de prueba 12345 con tipo VERDANA Texto de prueba 12345 con tipo SMALL FONTS Por supuesto, este atributo es compatible con todos los dems ya conocidos, como color y tamao. Por ejemplo, si escribes
<FONT FACE="impact" SIZE=6 COLOR="red"> Texto de prueba 12345 con tipo IMPACT</FONT>
Se ver:
Texto de prueba 12345 con tipo IMPACT

Se pueden hacer todas la combinaciones que se quieran, pero hay que tener presente que si en la mquina cliente no est instalada una determinada fuente, sta no se ver y en su lugar aparecer la fuente por defecto del visualizador. No es interesante por tanto, definir tipos raros, que probablemente, no llegarn a verse nunca. Si a pesar de todo, se define un tipo del que se tienen dudas de que exista en el cliente, se pueden indicar otros tipos alternativos, de forma que el navegador si no tiene el primer tipo, utilizar el siguiente, y si tampoco lo tiene el prximo, etc. As:
<FONT FACE="raro, courier" SIZE=4 COLOR="red"> Texto de prueba 12345 con tipos alternativos</FONT>
Se ver:
Texto de prueba 12345 con tipos alternativos

Como puedes ver, se ha declarado como primer tipo de letra el llamado "raro" que, por supuesto, no existe, y el navegador pasa a utilizar el siguiente, "courier", que s es habitual.
Texto en color
Se puede controlar el color del texto utilizando el elemento <FONT> con el atributo COLOR="xxx", donde "xxx" es el nombre en ingls del color que se desea. Hay que tener presente que algunos no se vern o se vern mal si la mquina no soporta, por lo menos, 256 colores. Por supuesto, este efecto es anidable con el de tamao y todos los dems. Si escribes:
<B><FONT COLOR="red">Texto ROJO </FONT> <br> <FONT COLOR="blue">Texto AZUL </FONT> <br> <FONT COLOR="navy">Texto AZUL MARINO </FONT> <br> <FONT COLOR="green">Texto VERDE </FONT> <br> <FONT COLOR="olive">Texto OLIVA </FONT> <br> <FONT COLOR="yellow">Texto AMARILLO </FONT> <br> <FONT COLOR="lime">Texto LIMA </FONT> <br> <FONT COLOR="magenta">Texto MAGENTA </FONT> <br> <FONT COLOR="purple">Texto PURPURA </FONT> <br> <FONT COLOR="cyan">Texto CYAN </FONT> <br> <FONT COLOR="brown">Texto MARRON </FONT> <br> <FONT COLOR="black">Texto NEGRO </FONT> <br> <FONT COLOR="gray">Texto GRIS </FONT> <br> <FONT COLOR="teal">Texto TEAL </FONT> <br> <FONT COLOR="white">Texto BLANCO </FONT> <br> </B>
Se ver: Texto ROJO Texto AZUL Texto AZUL MARINO Texto VERDE Texto OLIVA Texto AMARILLO Texto LIMA Texto MAGENTA Texto PURPURA Texto CYAN Texto MARRON Texto NEGRO
Texto GRIS Texto TEAL Texto BLANCO He aqu una combinacin de colores y tamaos: Si escribes:
<FONT SIZE=6 COLOR="red">E</FONT><FONT SIZE=4>sto es una </FONT> <FONT SIZE=6 COLOR="red">P</FONT><FONT SIZE=4>rueba </FONT>
Resulta:
Esto es una Prueba

Los colores tambin se pueden definir en hexadecimal (por ejemplo el rojo es <FONT COLOR=#FF0000>). Cuando son colores bsicos, como los del ejemplo de arriba, es ms cmodo escribir el nombre aunque sea en ingls, pero cuando se trata de definir un color que "no tiene nombre" no hay ms remedio que usar la codificacin hexadecimal. En el ndice encontrars una tabla con los cdigos de colores.
Cdigos hexadecimales de color

Estos cdigos de color se pueden utilizar como valor de atributo en los elementos <FONT COLOR> y <BODY BGCOLOR FGCOLOR TEXT LINK VLINK ALINK>. Algunos no funcionarn en ciertos visualizadores, as como si Windows no est configurado con 256 colores al menos. La codificacin de estos colores est basada en mezclas cromticas RGB (RED GREEN BLUE), es decir, se mezclan ciertas cantidades de los tres colores bsicos (rojo verde y azul), para conseguir el color deseado. La cantidad de cada color est definida por el cdigo que utilizamos, que tiene seis dgitos en hexadecimal. Si los cortamos en 3 grupos de dos de izquierda a derecha, obtendremos la cantidad (en hexadecimal) de cada color. La sintaxis para cambiar el fondo de la pgina (background) a color rojo es: <BODY BGCOLOR=#FF0000> y para dar color al texto, ver la pgina Texto de colores. Para combinaciones generales de colores, ver el ejemplo de control de colores.
Lista de cdigos RGB Puedes probar los diez primeros para hacerte una idea, o puedes verlos todos desde aqu
White rgb=#FFFFFF Red rgb=#FF0000 Green rgb=#00FF00 Blue rgb=#0000FF Magenta rgb=#FF00FF Cyan rgb=#00FFFF Yellow rgb=#FFFF00 Black rgb=#000000 Aquamarine rgb=#70DB93
Baker's Chocolate rgb=#5C3317 Blue Violet rgb=#9F5F9F Brass rgb=#B5A642 Bright Gold rgb=#D9D919 Brown rgb=#A62A2A Bronze rgb=#8C7853 Bronze II rgb=#A67D3D Cadet Blue rgb=#5F9F9F Cool Copper rgb=#D98719 Copper rgb=#B87333 Coral rgb=#FF7F00 Corn Flower Blue rgb=#42426F Dark Brown rgb=#5C4033 Dark Green rgb=#2F4F2F Dark Green Copper rgb=#4A766E Dark Olive Green rgb=#4F4F2F Dark Orchid rgb=#9932CD Dark Purple rgb=#871F78 Dark Slate Blue rgb=#6B238E Dark Slate Grey rgb=#2F4F4F Dark Tan rgb=#97694F Dark Turquoise rgb=#7093DB Dark Wood rgb=#855E42 Dim Grey rgb=#545454 Dusty Rose rgb=#856363 Feldspar rgb=#D19275 Firebrick rgb=#8E2323 Forest Green rgb=#238E23 Gold rgb=#CD7F32 Goldenrod rgb=#DBDB70 Grey rgb=#C0C0C0 Green Copper rgb=#527F76 Green Yellow rgb=#93DB70 Hunter Green rgb=#215E21 Indian Red rgb=#4E2F2F Khaki rgb=#9F9F5F Light Blue rgb=#C0D9D9 Light Grey rgb=#A8A8A8 Light Steel Blue rgb=#8F8FBD Light Wood rgb=#E9C2A6 Lime Green rgb=#32CD32 Mandarian Orange rgb=#E47833 Maroon rgb=#8E236B Medium Aquamarine rgb=#32CD99 Medium Blue rgb=#3232CD Medium Forest Green rgb=#6B8E23 Medium Goldenrod rgb=#EAEAAE Medium Orchid rgb=#9370DB Medium Sea Green rgb=#426F42 Medium Slate Blue rgb=#7F00FF
Medium Spring Green rgb=#7FFF00 Medium Turquoise rgb=#70DBDB Medium Violet Red rgb=#DB7093 Medium Wood rgb=#A68064 Midnight Blue rgb=#2F2F4F Navy Blue rgb=#23238E Neon Blue rgb=#4D4DFF Neon Pink rgb=#FF6EC7 New Midnight Blue rgb=#00009C New Tan rgb=#EBC79E Old Gold rgb=#CFB53B Orange rgb=#FF7F00 Orange Red rgb=#FF2400 Orchid rgb=#DB70DB Pale Green rgb=#8FBC8F Pink rgb=#BC8F8F Plum rgb=#EAADEA Quartz rgb=#D9D9F3 Rich Blue rgb=#5959AB Salmon rgb=#6F4242 Scarlet rgb=#8C1717 Sea Green rgb=#238E68 Semi-Sweet Chocolate rgb=#6B4226 Sienna rgb=#8E6B23 Silver rgb=#E6E8FA Sky Blue rgb=#3299CC Slate Blue rgb=#007FFF Spicy Pink rgb=#FF1CAE Spring Green rgb=#00FF7F Steel Blue rgb=#236B8E Summer Sky rgb=#38B0DE Tan rgb=#DB9370 Thistle rgb=#D8BFD8 Turquoise rgb=#ADEAEA Very Dark Brown rgb=#5C4033 Very Light Grey rgb=#CDCDCD Violet rgb=#4F2F4F Violet Red rgb=#CC3299 Wheat rgb=#D8D8BF Yellow Green rgb=#99CC32
Las distintas definiciones de los bloques. Separadores.

Si se analiza una pgina cualquiera veremos que, en realidad, est compuesta de distintos bloques. Es algo as como un mosaico en el que cada parte de la composicin final tiene sus propios contenidos, que pueden ser texto, grficos o las dos cosas. Dependiendo de la composicin que se quiera hacer, habr que elegir los elementos ms convenientes para que nuestros contenidos aparezcan finalmente con la alineacin debida, el tamao apropiado, etc.
Comenzaremos con el elemento <Hx> </Hx> donde x es un nmero que puede variar entre 1 y 6, siendo 1 el tamao mayor. Se escribirn as:
<H1> <H2> <H3> <H4> <H5> <H6> Texto Texto Texto Texto Texto Texto de de de de de de prueba prueba prueba prueba prueba prueba (H1)</H1>. (H2)</H2> (H3)</H3> (H4)</H4> (H5)</H5> (H6)</H6>

Texto de prueba (H3) Texto de prueba (H4) Texto de prueba (H5) Texto de prueba (H6) No hay que olvidar poner el cierre </Hx> a cada elemento utilizado. Este tipo de elemento suele emplearse para escribir encabezamientos, ya que despus del cierre, automticamente, el visualizador inserta un salto de prrafo.
Por ejemplo, si escribes:

<H1> Texto en H1 </H1> <H3> Texto en H3 </H3>
se ver:
Texto en H1
Texto en H3 Y no una cosa al lado de la otra, como cabra esperar. Este elemento admite un parmetro de alineacin. As, si escribes:
<H3 align=center> Texto en H3 </H3>
Texto en H3
Para definir los prrafos se utiliza el elemento lleno <P> </P> (por Paragraph). Aunque a menudo no se utiliza el cierre </P>, ya que el texto continuar normalmente hasta que encuentre otro prrafo <P>, es conveniente acostumbrarse a ponerlo siempre. En la nueva definicin del XHTML el cierre es obligatorio.
Se escribir as:
<P> Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 </P> <P> Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 </P>
Y este sera el resultado:
Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Como puede verse, hay una lnea en blanco entre los dos bloques. Si no se quiere dejar esa lnea vaca entre los dos prrafos puede utilizarse el elemento <BR> (por BReak). Es decir, que el elemento <BR> es un separador, no un indicador de bloque. Se escribir as:
<P>Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 <BR> Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 </P>
Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 El elemento <P> admite cuatro atributos de alineacin: ALIGN=LEFT (por defecto), ALIGN=RIGHT , ALIGN=CENTER y ALIGN=JUSTIFY Se escribirn as:
<P ALIGN=LEFT> Texto 1 Texto 1 Texto Texto 1 Texto 1 Texto <P ALIGN=RIGHT> Texto 2 Texto 2 Texto Texto 2 Texto 2 Texto <P ALIGN=CENTER> Texto 3 Texto 3 Texto Texto 3 Texto 3 Texto <P ALIGN=JUSTIFY> Texto 4 Texto 4 Texto Texto 4 Texto 4 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 </P> 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 </P> 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 </P> 4 Texto 4 Texto 4 4 Texto 4 Texto 4 Texto 4 Texto 4 Texto 4 Texto 4 Texto 4 Texto 4 </P>
Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 4 tex Texto 4 Texto 4 tex Texto 4 Texto 4 tex Texto 4 Texto 4 Texto 4 Texto 4 Texto 4 Texto 4 Texto 4 tex Texto 4 Texto 4 Texto 4 Texto 4 tex Texto 4 Texto 4 tex Texto 4 Texto 4 tex Texto tex 4 Texto 4 Texto 4 tex Texto 4 Texto 4 tex Texto 4 Texto 4 tex Texto tex 4 Texto 4 Texto 4 tex Texto 4 Texto 4 tex Texto 4 Texto 4 tex Texto tex 4 Texto 4 Texto 4 tex Texto 4 Texto 4 tex Texto 4 Texto 4 tex Texto tex 4 Texto 4
Un elemento que se comporta de forma parecida a <BR> es <DIV> pero que admite los mismos atributos que <P>: ALIGN=LEFT ALIGN=RIGHT y ALIGN=CENTER
Se escribe as:
<DIV ALIGN=LEFT> texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 </DIV> <DIV ALIGN=RIGHT> texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 < /DIV> <DIV ALIGN=CENTER> texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 </DIV>
texto1 texto1 texto1 texto1 texto2 texto2 texto2 texto2 texto2 texto3 texto3 texto3 texto3
Fjate en que aqu s se utiliza el cierre </DIV>. Este sera el resultado: texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2
texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3
Como puedes ver, salvo por las alineaciones, que ya se hacen con <P>, no tiene ninguna utilidad prctica, y en general solamente se utiliza para definir bloques especiales definidos con instrucciones de estilo (bordes, tamao, situacin, alineacin, color, etc., etc.)
Otro elemento que es casi igual que <DIV> pero que no admite atributos de alineado, y no produce separacin de prrafo ni de lnea es <SPAN>. En realidad, de forma directa no sirve para nada, y ha sido creado tambin para aplicar las hojas de estilo.
Se escribe as:
<SPAN> texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 </SPAN>
Otro interesante efecto es el elemento lleno <BLOCKQUOTE> que sirve para presentar prrafos adentrados (como si estuviesen tabulados).
Se escribir as:
<BLOCKQUOTE> texto texto texto texto texto texto <BLOCKQUOTE> texto texto texto texto texto texto </BLOCKQUOTE> </BLOCKQUOTE> texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto
Y este sera el resultado: texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto
Fjate que en este ejemplo hay un anidamiento, y por tanto, debe haber dos cierres </BLOCKQUOTE> al final Otro separador de bloques de texto es el elemento vaco <HR> (por Horizontal Rule). Este sera el resultado:
Al igual que al texto, se le puede incluir un parmetro de color, pero no funciona en todos los navegadores. Tambin se puede cambiar su apariencia aadindole el atributo <NOSHADE>. As:
<HR NOSHADE>
El resultado es:
El elemento <HR> admite dos parmetros: WIDTH y SIZE. El primero define la longitud de la lnea y el segundo su anchura. No es obligado usar los dos a la vez Por ejemplo, si escribes
<HR WIDTH=400 SIZE=5>
El resultado ser:
El valor del atributo WIDTH se puede expresar, como en el ejemplo anterior, en nmero de puntos (pxels), o en tantos por ciento referidos al ancho total de la ventana. As:
<HR WIDTH=80% SIZE=5>
El resultado ser:
Adems se puede indicar su posicin respecto a los mrgenes de la ventana con los atributos ALIGN=CENTER (por defecto) ALIGN=LEFT y ALIGN=RIGHT. Por ejemplo:
<HR WIDTH=80% SIZE=5 ALIGN=LEFT>
El resultado ser:
O bien:
<HR WIDTH=80% SIZE=5 ALIGN=RIGHT>
El resultado ser:
Hay otro elemento, aparecido en la versin 6 de Netscape, que permite rodear un texto con un marco, y opcionalmente ponerle una etiqueta. Se trata del elemento: <FIELDSET>. Recuerda que si no tienes la versin adecuada de navegador, en los siguientes ejemplos slo vers el texto, pero no los enmarcados. Si se escribe:
<FIELDSET> Esto es una prueba de enmarcado </FIELDSET>
Se obtiene:
Esto es una prueba de enmarcado
Este elemento tiene un parmetro que permite etiquetar el recuadro: <LEGEND> Si se escribe:
<FIELDSET> <LEGEND>Esto es una etiqueta</LEGEND> Esto es una prueba de enmarcado </FIELDSET>
Se obtiene:
Esto es una etiqueta Esto es una prueba de enmarcado
El parmetro <LEGEND> tiene tres atributos que indican la posicin de la etiqueta: LEFT (por defecto), RIGHT y CENTER, aunque no funciona en todos los navegadores. Por ejemplo:
<FIELDSET> <LEGEND ALIGN=CENTER> Esto es una etiqueta </LEGEND> Esto es una prueba de enmarcado </FIELDSET>
Se obtiene:
Esto es una etiqueta Esto es una prueba de enmarcado
Si en estos ejemplos no ves el recuadro o la etiqueta no est donde debiera, es porque no tienes una versin de navegador adecuada. Por supuesto, dentro del recuadro generado por <FIELDSET> se puede poner cualquier cosa: formularios, imgenes, texto, etc.
Textos preformateados
Posiblemente ya te habrs dado cuenta de que, cuando escribes un texto con tu editor, a la hora de ver lo hecho con el visualizador, algunas cosas no estn como t las pusiste... Como por ejemplo poner dos o tres espacios en blanco entre palabras, o intentar encolumnar los datos de una pequea tabla: acaba todo junto y en la misma lnea! Este efecto se puede eliminar con el elemento lleno <PRE> . Al texto que va dentro del elemento PRE se le pueden aplicar todos los elementos que se quiera, siempre que sean elementos que no alteren la posicin del texto. Por ejemplo si utilizas el elemento <H>, se rompera el preformateo pero no ocurrir lo mismo con <FONT SIZE>. Por defecto, los textos preformateados se ven con tipo de letra "curier", es decir de paso fijo y los no preformateados en "Times New Roman". Estos tipos son configurables en el visualizador.
Se escribir as: <PRE>

1 8 2 3 4 5 6 7 <B>Esto es una demostracion de</B> texto preformateado.
9 10 11 12 13 14
15 16 17 18 19 20 21
</PRE> y este sera el resultado:

1 8 2 3 4 5 6 7 Esto es una demostracion de texto preformateado.
9 10 11 12 13 14
15 16 17 18 19 20 21
Dentro de un bloque preformateado tambin se pueden poner links a otros documentos y codificacin para caracteres especiales (se ver ms adelante lo que es eso). Este elemento admite el parmetro WIDTH=x donde x define la mxima longitud de lnea visualizada. No funciona con Netscape. El navegador, por defecto, elimina varios espacios en blanco y los convierte en uno solo. Si lo que deseas es separar una palabra de otra ms de un espacio, se puede recurrir a una instruccin especial que le indica esto al navegador, pero hay que darla codificada; funciona como un avance de carro, y aunque en pantalla cumple su objetivo, cuando se imprime la pgina, no todas las impresoras son capaces de interpretarlo correctamente. Se escribe: y como alias se utiliza: Por ejemplo, si escribes:
texto texto texto texto
Se ve as: texto texto texto texto
Con Netscape 3.0 se ha implementado un nuevo elemento que permite definir espacios en blanco sin utilizar el elemento <PRE> Se trata del elemento <SPACER>. este elemento puede ir acompaado de los atributos TYPE y SIZE y se puede utilizar en cualquier zona de una pgina, pero donde ms se aprecia su efecto es en las columnas. Se escibir asi:
<MULTICOL COLS=2> <SPACER TYPE=HORIZONTAL SIZE=35> texto texto texto texto texto texto texto texto texto texto texto texto <P> <SPACER TYPE=HORIZONTAL SIZE=35> texto texto texto texto texto texto texto texto texto texto texto texto <SPACER TYPE=VERTICAL SIZE=35> texto texto texto texto texto texto texto texto texto texto texto texto
</MULTICOL>
Y se ve as: texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto Como puedes ver, con TYPE=horizontal deja espacio en blanco a la izquierda de la primera linea. Es el valor por defecto. TYPE=vertical deja espacio en blanco por arriba de la primera linea. Para ambos tipos el tamao del espacio se da en puntos (pixels) con el atributo SIZE. El valor por defecto es 0. Fjate en que entre las dos instrucciones con tipo horizontal hay un elemento <P>. En efecto, es necesario indicarle a <SPACER> donde termina el prrafo para que ejecute la siguiente instruccin del mismo tipo. Este elemento no funciona con el navegador de Microsoft. Para conseguir columnas sin utilizar este elemento la nica solucin es emplear tablas: <TABLE>
Otros efectos en el texto

Una o varias lneas de texto, pueden estar centradas respecto a los mrgenes de la ventana. Esto afecta slo al texto que hay entre <CENTER> y </CENTER>, pero no a todo el prrafo. Por ejemplo:
texto texto texto texto texto texto texto texto texto texto texto texto <CENTER>texto centrado texto centrado</CENTER> texto texto texto texto texto texto texto texto texto texto texto texto
Se ver: texto texto texto texto texto texto texto texto texto txto texto texto texto texto texto texto texto texto centrado texto centrado texto texto texto texto texto texto texto texto texto txto texto texto texto texto texto texto texto Esto, adems de a texto slo, se puede aplicar a una tabla, una imagen o cualquier otra cosa.
Quedan algunos otros elementos que modifican el aspecto del texto. Algunos, aparentemente, hacen la misma cosa, y otros no funcionan con el visualizador de Netscape, por lo que se omiten aqu. Texto en negrita:
<B>Texto en negrita</B>
Texto realzado:
<STRONG>Texto realzado</STRONG>
Texto en itlica:
<I>Texto en itlica</I>
Texto con nfasis:

<EM>Texto con nfasis</EM> Texto ejemplo de cdigo: <CODE>Texto ejemplo de cdigo</CODE> Texto teletipo: <TT>Texto teletipo</TT>
Texto subrayado:
<U>Texto subrayado</U>
Texto tachado:
<STRIKE>Texto tachado</STRIKE>
Texto de direccin:
<ADDRESS>Texto de direccin</ADDRESS>
Texto intermitente
<BLINK>Texto intermitente</BLINK>
Texto superndice
Texto normal nomal
<SUP>Texto Superndice</SUP>
Texto subndiceTexto
<SUB>Texto Subndice</SUB>
Texto grande
<BIG>Texto grande</BIG> Texto pequeo <SMALL>Texto pequeo</SMALL>
En los navegadores de ltima generacin se ha implementado un efecto que permite incluir explicaciones ocultas que aparecen al pasar el ratn por encima (sin pulsar), pero sin cambiar de pgina ni abrir ninguna ventana nueva. Por ejemplo, si escribes: <ACRONYM TITLE="Hyper Text Markup Language">HTML</ACRONYM> Al pasar el ratn sobre la palabra HTML, se desvela su significado: HTML De funcionamiento similar al anterior tambin tenemos el elemento <abbr> <abbr TITLE="Hyper Text Markup Language">HTML</abbr> Y este es el aspecto que toma el texto: HTML Este ltimo elemento NO funciona con el navegador IE. Como puedes ver, los dos trabajan de la misma forma que el parmetro title que se aplica al elemento <A> y se diferencian de ste solamente por el tipo de subrayado, que es ms ligero.
<A>
Creacin de enlaces (links)

El siguiente es sin duda el elemento ms importante del HTML, ya que permite realmente "navegar" por uno o varios documentos, que pueden residir en cualquier parte, parecindonos que siempre estamos en el mismo; a esto se le llama hipertexto ya que con esta posibilidad, en realidad, nuestro documento puede ser infinito... En efecto, para la persona que est leyendo sobre un determinado tema, no hay diferencias ostensibles que le hagan notar dnde est el documento que lee. Para el lector, todo parece un mismo documento, cuando en realidad, probablemente el conjunto de lo que lee est repartido por medio mundo, o en un plano ms modesto, el documento ledo puede estar compuesto en realidad por varios cientos de pginas que "saltan" de unas a otras sin notarlo.
Todo esto lo consigue el elemento <A> (por Anchor, en ingls = ancla o punto de anclaje). En lo sucesivo le llamaremos enlace o sinplemente link (en ingls link=eslabn o enlace). Pero seguramente te preguntars qu es eso de un "link". Pues un link es un rea de la pantalla, que puede contener una o varias palabras o una imagen, que es "sensible" al puntero del ratn, y al ponerlo sobre ella y pulsar el botn izquierdo el visualizador llamar a la pgina que tiene asignada el link. Habitualmente por defecto los visualizadores sealan un rea linkada subrayndola, si es texto, o ponindole un borde si es una imagen, ambas cosas en color azul. Por supuesto, eso se puede cambiar en las configuraciones de visualizador. Si no se desea que aparezca el subrayado para mejorar la esttica en algunos casos, se puede parametrizar con una instruccin de estilo. Se escribir:
<A HREF="http://www.miservidor.es/mifichero.htm"> Link de prueba </A>.
Y se vera as: Link de prueba Si lo que se desea es que aparezca sin subrayado o de otro color, o ambas cosas, se puede recurrir a una instruccin de estilo. As:
<A HREF="http://www.miservidor.es/mifichero.htm" style="color:red; text-decoration:none";> Link de prueba </A>.
Y se vera as: Link de prueba (Esto puede que no funcione en algunos navegadores antiguos)
El elemento <A> tiene dos atributos: HREF y NAME. En el ejemplo de arriba al atributo HREF se le asigna el valor que aparece entre comillas: "http://www.miservidor.es/mifichero.htm". El texto sobre el que se monta el enlace es Link de prueba y realiza un link con el fichero mifichero.htm que est en el servidor www.miservidor.es.
Esta forma de escribir la ruta del link de forma completa, se utiliza cuando hay que saltar de una mquina a otra, si el enlace es para otra pgina de nuestro propio servidor es suficiente escribir la ruta virtual corta: /mifichero.htm o bien: /otro_directorio/mifichero.htm segn proceda. Como has visto, el punto de enlace se realiza en el texto escrito antes del cierre del elemento </A>, pero tambin puede hacerse con una imagen cualquiera, que ira en lugar del texto, incluso puedes poner el texto junto con una imagen. Por ejemplo para hacer un link que nos lleve al ndice desde una bola roja, se escribe:
Ir al ndice <A HREF="indice.htm"> <img src="bolaroja.gif"> </A>.
Y este sera el resultado: Ir al ndice
Al igual que el texto aparece subrayado en azul cuando forma parte de un enlace, los grficos reciben un borde azul alrededor de toda la imagen, lo que a veces puede resultar poco esttico. Esto tambin tiene solucin, pero aqu se hace en la instruccin de la imagen:
Ir al ndice <A HREF="indice.htm"> <img src="bolaroja.gif" border=0> </A>.
Y este sera el resultado: Ir al ndice
El valor de los atributos hay que escribirlos EXACTAMENTE como se deba. En el ejemplo anterior no funcionara el link si escribiramos www.miservidor.es en maysculas o con alguna otra diferencia, eso es un nombre de mquina y sera interpretado como OTRA mquina. Esto es aplicable a todos los parmetros: servicio (http://) servidor (www.miservidor.es) y fichero (mifichero.htm). Estas precauciones son ineludibles en el caso de servidores montados en mquinas con sistema operativo UNIX. En el caso de que el servidor resida en una mquina con Windows NT o Windows 95/98, es indiferente. Si no se sabe el sistema que tiene la mquina, es mejor atenerse a la forma UNIX. Dentro de los parmetros pasados a HREF, podrs ver que al principio pone http://, esto es, el tipo de servicio al que el visualizador va a llamar, y hay varios :
Servicio http:// ftp:// Descripcin Ejemplo Efecto
Servicios WWW <A HREF="http://www.uv.es/"> WWW</A> WWW Servicios FTP <A HREF="ftp://ftp.uv.es/">FTP</A> FTP
news:// Servicios NEWS <A HREF="news://news.uv.es/">NEWS</A> NEWS mailto:// Servicios E-mail <A HREF="mailto:jac@uv.es/">E-mail</A> E-mail
file:///C| Fichero local
<A HREF="indice.htm/">Fichero</A>
Fichero
Adems de HREF, el elemento <A> puede tener otro atributo: TARGET. Se utiliza para ordenar la apertura de otra ventana del visualizador con la pgina que se desee. Se escribir:
<A HREF="indice.htm" TARGET="Ventana-2"> </A>
Esta instruccin mostrar la pgina indice.htm pero con otra ventana del visualizador, es decir tendremos lanzado el visualizador 2 veces.
Del mismo modo, el atributo TARGET puede utilizarse para salir de una pantalla compuesta de frames. En efecto, si estamos en una pantalla con, por ejemplo, dos frames, cualquier link invocado desde cualquiera de ellos, hace que la pgina llamada aparezca en ese mismo frame. Para volver a una pantalla "normal" sin frames, se puede escribir un link con la sintaxis siguiente:
<A HREF="indice.htm" TARGET="_parent"> </A>
Existen otros valores para TARGET:
TARGET="_blank": Para que el enlace se muestre en una nueva ventana vaca. Tambin puede darse un nombre cualquiera con el mismo efecto. TARGET="_self": Para mostrar el enlace en la misma ventana o frame que lo referencia (valor por defecto). TARGET="_top": El documento solicitado se cargar en la pantalla actual, ocupando toda la ventana y destruyendo la estructura de frames anterior, si existe. Como se acaba de ver, el atributo HREF sirve para enlazar con otro documento, que puede estar en un servidor o ser un fichero local, pero que siempre se nos presentar desde la primera lnea del mismo. El atributo NAME se utiliza para definir algo as como "un punto de aterrizaje" en cualquier lnea del documento de destino, de forma que nos aparecer en pantalla desde la lnea deseada y no desde el principio. Esto es muy til cuando se trata de documentos largos divididos en secciones. Se escribir as: En el documento activo:
<A HREF="http://www.miservidor.es/mifichero.htm#punto1"> Ir al punto 1</A>
En el documento destino:
<A NAME="punto1"></A>
NAME tambin puede utilizarse para saltar de una lnea a otra dentro de un mismo documento. Se escribir as:
Dentro del documento activo En la lnea de partida:

<A HREF="#punto1">Ir al punto 1</A>
En la lnea de destino
<A NAME="punto1"></A>
Por ejemplo, si haces "clik" aqu con el ratn, saltars al principio de esta pgina.
Como habrs visto en el cuadro de arriba, es posible enviar un e-mail desde un link con la instruccin: <A HREF="mailto:jac@uv.es">Enviar e-mail</A>. Con esta sintaxis se invoca al cliente de correo predeterminado para que abra una ventana con la direccin deseada ya escrita. Si adems quieres que dicha ventana se abra con el asunto (subject) y el texto (body) ya escritos se puede conseguir as: <A HREF="mailto:jac@uv.es?&subject=Asunto de prueba&body=Texto de prueba">Enviar e-mail</A> De forma similar, se puede escribir un enlace para que invoque a una funcin de JavaScript. Esto es muy til cuando se disean mens o contenidos dinmicos. Por ejemplo, si escribes: <a href="javascript:document.write('Prueba de JavaScript')">Prueba </A> Se obtiene: Prueba
Con los links, al igual que con los formularios, es posible moverse usando la tecla de tabulacin, para conseguir que el enfoque salte de un link a otro en un cierto orden. Para ello se utiliza el atributo tabindex. Por ejemplo, pulsa la tecla "Tab": Tablas Imgenes Body
Como puedes ver, los saltos en esta lnea se han producido siguiendo la numeracin indicada por los disintos tabindex, al resto de links se llega por orden de escritura. Se escribe:
<A HREF="tablas.htm" tabindex="2">Tablas</A> <A HREF="imagen1.htm" tabindex="3">Imgenes</A> <A HREF="body.htm" tabindex="1">Body</A>
Esto solamente funciona con versiones recientes de navegadores. Otro atributo reciente de los links es title que permite escribir una descripcin del link sin necesidad de pulsar en l, simplemente poniendo encima el puntero del ratn. Por ejemplo:
<A HREF="tablas.htm" title="Saltar a la seccin de tablas">Tablas</A>
Se obtiene: Tablas
Debes saber que...
El texto que pongas despus del smbolo # puede ser cualquiera, siempre que no tenga espacios en blanco, caracteres especiales ni caracteres codificados, y por supuesto, que no est repetido en el mismo documento de destino.
Si en el documento de destino no existe el punto definido en el documento de origen, el visualizador nos presentar en pantalla la ltima lnea del mismo. Cuando hagas un link, es preferible utilizar direcciones relativas. Si utilizas direcciones absolutas y despus tienes que mover los ficheros por cualquier razn, tendrs que modificar todas las direcciones. Si al hacer un link, despus del nombre de la mquina no pones el nombre de un fichero, por defecto el servidor entiende que se le pide la "home page" (pgina inicial) de ese directorio. Generalmente (aunque depende de la configuracin del servidor) el fichero inicial de un directorio suele ser index.htm o default.htm Si un servidor no tiene definida pgina inicial, simplemente nos mostrar una lista de todos los ficheros y directorios que tenga en el directorio definido como raz si el servidor tiene activada la opcin de listar directorios, en caso contrario, dar un error. Si despus de la direccin de la mquina a la que le haces el link en lugar de un nombre de fichero pones el de un directorio, generalmente el servidor nos mostrar un simple listado de los ficheros y directorios que ste contenga si el servidor tiene activada la opcin de listar directorios, en caso contrario, dar un error. No slo puedes montar el link sobre un texto, tambin puedes hacerlo sobre una imagen cualquiera. Es decir, despus del link y antes de </A> puedes poner lo que quieras. El arte de escribir buen HTML reside en dar una buena estructura a la informacin. Siempre que puedas huye de crear pginas muy largas. Crea cuantas necesites, con buena estructura y enlzalas con cuantos links sean precisos. Recuerda: si tu trabajo HTML no va a residir en un servidor en red, y has utilizado direcciones absolutas, al hacer un link, no empieces con aquello de: "http://....". No funcionar. Si continuas deseando poner direcciones absolutas con ficheros locales, tendr que ser as file:///C:/MIDIRECTORIO/mifichero.htm Despus de C (que puede ser A, B, D o la unidad de disco que quieras) fjate en que las barras que separan los directorios y ficheros son barras a la derecha.
Listas y mens
Hay elementos que permiten crear texto con varios formatos de listado: Estos pueden ser ordenados <OL> (se refiere a numerados, no ordenados por algun criterio), desordenados <UL> (no numerados), directorios <DIR>, menu <MENU> y listados de definicin <DL>. Veamos cmo es la sintaxis bsica y apariencia de estos elementos, a partir de los cuales, pueden hacerse combinaciones muy complejas mediante anidamientos de unos con otros, hasta conseguir prcticamente cualquier presentacin deseada: Esto es una lista ordenada (numerada): 1. Primera linea 2. Segunda linea Se escribe:
<OL> <LI>Primera linea <LI>Segunda linea
</OL>
Fjate en que los elementos <LI> no necesitan cierre. Terminan cuando aparece otro igual o se cierra la lista. Puede ser conveniente poner el cierre </LI> si se van a aplicar instrucciones de estilo. Esto es una lista desordenada ( no numerada):

Primera linea segunda linea
Se escribe:
<UL> <LI>Primera linea <LI>Segunda linea </UL>
En este caso los nmeros han sido sustituidos por unos puntos gruesos. Esa es la apariencia por defecto; se puede cambiar usando el atributo TYPE con tres valores (el valor por defecto es DISC). Con el valor CIRCLE se ver:
o o
Se escribe:
<UL TYPE=CIRCLE> <LI>Primera linea <LI>Segunda linea </UL>
Tambin puede usarse el valor SQUARE. As:

Se escribe:
<UL TYPE=SQUARE> <LI>Primera linea <LI>Segunda linea </UL>
Las listas ordenadas no slo se pueden ordenar con nmeros. Tambin se pueden utilizar letras y numeracin romana tanto en maysculas como minsculas. Para esto se utiliza el atributo TYPE del elemento <OL> con los siguientes valores: TYPE=1 (por defecto) para nmeros, TYPE=A para letras maysculas, TYPE=a para letras minsculas, TYPE=I para numeracin romana en maysculas y TYPE=i para numeracin romana en minsculas. Esto es una lista ordenada con letras maysculas: A. B. C. D. Primera linea Segunda linea Tercera linea Cuarta linea
Se escribe:
<OL TYPE=A> <LI>Primera linea <LI>Segunda linea <LI>Tercera linea <LI>Cuarta linea </OL>
Esto es una lista ordenada con letras minsculas: a. b. c. d. Primera linea Segunda linea Tercera linea Cuarta linea
Se escribe:
<OL TYPE=a> <LI>Primera linea <LI>Segunda linea <LI>Tercera linea <LI>Cuarta linea </OL>
Esto es una lista ordenada con numeracin romana en maysculas: I. II. III. IV. Primera linea Segunda linea Tercera linea Cuarta linea
Se escribe:
<OL TYPE=I> <LI>Primera linea <LI>Segunda linea <LI>Tercera linea <LI>Cuarta linea </OL>
Esto es una lista ordenada con numeracin romana en minsculas: i. ii. iii. iv. Primera linea Segunda linea Tercera linea Cuarta linea
Se escribe:
<OL TYPE=i> <LI>Primera linea <LI>Segunda linea <LI>Tercera linea <LI>Cuarta linea </OL>
En algunos casos puede interesarnos que la lista no comience por el nmero 1 (por ejemplo si es una lista que continua en otra pgina). Se puede conseguir con el atributo START combinado con TYPE. Esto es una lista ordenada con letras maysculas y que comienza por la E:
E. F. G. H.
Primera linea Segunda linea Tercera linea Cuarta linea
Se escribe:
<OL TYPE=A START=5> <LI>Primera linea <LI>Segunda linea <LI>Tercera linea <LI>Cuarta linea </OL>
El nmero que pones en el atributo START indica en que nmero o letra comenzar la lista. la E es la quinta letra. Esto es un men: Primera linea Segunda linea Se escribe:
<MENU> <LI>Primera linea <LI>Segunda linea </MENU>
La diferencia entre un men y una lista desordenada, es que las lneas en la lista desordenada comienzan en el margen izquierdo y las del men unas posiciones ms a la derecha (aunque eso depende del visualizador, con Netscape se ven igual). Esto es un directorio: Primera linea Segunda linea Se escribe:
<DIR> <LI>Primera linea <LI>Segunda linea </DIR>
Ocurre lo mismo que con el men, con Netscape no se aprecia diferencia. Esto es una lista de definicion: Primera linea Segunda linea Se escribe:
<DL> <DT>Primera linea <DD>Segunda linea </DL>
Fjate que ahora en lugar del elemento <LI> se utiliza <DT> y <DD>, y como tipo <DL>. Estos tres nuevos elementos tambin se pueden usar con cualquiera de los anteriores tipos de lista, alterando por completo su apariencia. Para hacerse una idea de la variedad de aspectos que se pueden conseguir, lo mejor es ver la pgina de ejemplos de listados.
Ejemplos de listas y mens Desordenadas

Desordenada simple con marcas

Linea de texto 1 Linea de texto 2 Linea de texto 3
Se escribe:
<UL> <LI>Linea de texto 1 <LI>Linea de texto 2 <LI>Linea de texto 3 </UL>
Desordenada simple sin marcas. Comienzo en margen izquierdo Linea de texto 1 Linea de texto 2 Linea de texto 3 Se escribe:
<DL> <DT>Linea de texto 1 <DT>Linea de texto 2 <DT>Linea de texto 3 </DL>
Desordenada simple sin marcas. Comienzo una posicin a la derecha Linea de texto 1 Linea de texto 2 Linea de texto 3 Se escribe:
<UL> <DT>Linea de texto 1 <DT>Linea de texto 2 <DT>Linea de texto 3 </UL>
Desordenada simple con marcas. Comienzo una posicin a la derecha

Se escribe:
<UL> <LI>Linea de texto 1 <LI>Linea de texto 2 <LI>Linea de texto 3 </UL>
Desordenada simple sin marcas. Comienzo dos posiciones a la derecha
Linea de texto 1 Linea de texto 2 Linea de texto 3 Se escribe:

<UL> <DD>Linea de texto 1 <DD>Linea de texto 2 <DD>Linea de texto 3 </UL>
Desordenada simple sin marcas. Comienzo tres posiciones a la derecha Linea de texto 1 Linea de texto 2 Linea de texto 3 Se escribe:
<UL> <UL> <DD>Linea de texto 1 <DD>Linea de texto 2 <DD>Linea de texto 3 </UL> </UL>
Desordenada simple con marcas. Comienzo dos posiciones a la derecha

o o o
Se escribe:
<UL> <UL TYPE=DISC> <LI>Linea de texto 1 <LI>Linea de texto 2 <LI>Linea de texto 3 </UL> </UL>
Desordenada con 4 niveles sin marcas Linea de texto 1 Linea de texto 2 Linea de texto 3 Linea de texto 3.1 Linea de texto 3.2 Linea de texto 3.2.1 Linea de texto 3.2.2 Linea de texto 3.2.2.1 Linea de texto 3.2.2.2 Linea 4 de texto Se escribe:
<DL> <DT>Linea de texto 1 <DT>Linea de texto 2 <DT>Linea de texto 3 <DL>
<DT>Linea de texto 3.1 <DT>Linea de texto 3.2 <DL> <DT>Linea de texto 3.2.1 <DT>Linea de texto 3.2.2 <DL> <DT>Linea de texto 3.2.2.1 <DT>Linea de texto 3.2.2.2 </DL> </DL> </DL> <DT>Linea 4 de texto </DL>
Desordenada con 4 niveles con marcas

Linea de texto 1 Linea de texto 2 Linea de texto 3 o Linea de texto 3.1 o Linea de texto 3.2 Linea de texto 3.2.1 Linea de texto 3.2.2 Linea de texto 3.2.2.1 Linea de texto 3.2.2.2 Linea 4 de texto
Se escribe:
<UL> <LI>Linea de texto 1 <LI>Linea de texto 2 <LI>Linea de texto 3 <UL> <LI>Linea de texto 3.1 <LI>Linea de texto 3.2 <UL> <LI>Linea de texto 3.2.1 <LI>Linea de texto 3.2.2 <UL> <LI>Linea de texto 3.2.2.1 <LI>Linea de texto 3.2.2.2 </UL> </UL> </UL> <LI>Linea 4 de texto </UL>
Ordenadas
Ordenada simple 1. Linea de texto 1 2. Linea de texto 2
3. Linea de texto 3 Se escribe:

<OL> <LI>Linea de texto 1 <LI>Linea de texto 2 <LI>Linea de texto 3 </OL>
Ordenada con 4 niveles, todos ordenados 1. Linea de texto 1 2. Linea de texto 2 3. Linea de texto 3 1. Linea de texto 3.1 2. Linea de texto 3.2 1. Linea de texto 3.2.1 2. Linea de texto 3.2.2 1. Linea de texto 3.2.2.1 2. Linea de texto 3.2.2.2 4. Linea de texto 4 Se escribe:
<OL> <LI>Linea de texto 1 <LI>Linea de texto 2 <LI>Linea de texto 3 <OL> <LI>Linea de texto 3.1 <LI>Linea de texto 3.2 <OL> <LI>Linea de texto 3.2.1 <LI>Linea de texto 3.2.2 <OL> <LI>Linea de texto 3.2.2.1 <LI>Linea de texto 3.2.2.2 </OL> </OL> </OL> <LI>Linea de texto 4 </OL>
Ordenada con 4 niveles, todos ordenados. Numeracin romana en maysculas y minsculas I. II. III. Linea de texto 1 Linea de texto 2 Linea de texto 3 i. Linea de texto 3.1 ii. Linea de texto 3.2 i. Linea de texto 3.2.1 ii. Linea de texto 3.2.2 i. Linea de texto 3.2.2.1
ii. IV. Linea de texto 4
Linea de texto 3.2.2.2
Se escribe:
<OL TYPE=I> <LI>Linea de texto 1 <LI>Linea de texto 2 <LI>Linea de texto 3 <OL TYPE=i> <LI>Linea de texto 3.1 <LI>Linea de texto 3.2 <OL TYPE=i> <LI>Linea de texto 3.2.1 <LI>Linea de texto 3.2.2 <OL TYPE=i> <LI>Linea de texto 3.2.2.1 <LI>Linea de texto 3.2.2.2 </OL> </OL> </OL> <LI>Linea de texto 4 </OL>
Ordenada con 4 niveles, 2 desordenados con marcas 1. Linea de texto 1 2. Linea de texto 2 3. Linea de texto 3 1. Linea de texto 3.1 2. Linea de texto 3.2 Linea de texto 3.2.1 Linea de texto 3.2.2 Linea de texto 3.2.2.1 Linea de texto 3.2.2.2 4. Linea de texto 4 Se escribe:
<OL> <LI>Linea de texto 1 <LI>Linea de texto 2 <LI>Linea de texto 3 <OL> <LI>Linea de texto 3.1 <LI>Linea de texto 3.2 <UL TYPE=SQUARE> <LI>Linea de texto 3.2.1 <LI>Linea de texto 3.2.2 <UL TYPE=CIRCLE> <LI>Linea de texto 3.2.2.1 <LI>Linea de texto 3.2.2.2 </UL> </UL> </OL> <LI>Linea de texto 4 </OL>
Ordenada con 4 niveles, 2 desordenados sin marcas 1. Linea de texto 1 2. Linea de texto 2 3. Linea de texto 3 1. Linea de texto 3.1 2. Linea de texto 3.2 Linea de texto 3.2.1 Linea de texto 3.2.2 Linea de texto 3.2.2.1 Linea de texto 3.2.2.2 4. Linea de texto 4 Se escribe:
<OL> <LI>Linea de texto 1 <LI>Linea de texto 2 <LI>Linea de texto 3 <OL> <LI>Linea de texto 3.1 <LI>Linea de texto 3.2 <DL> <DD>Linea de texto 3.2.1 <DD>Linea de texto 3.2.2 <DL> <DD>Linea de texto 3.2.2.1 <DD>Linea de texto 3.2.2.2 </DL> </DL> </OL> <LI>Linea de texto 4 </OL>
Tablas
Las tablas son sin duda uno de los elementos ms potentes del HTML. Con pocos elementos se pueden conseguir efectos espectaculares. En el interior de las celdas de una tabla, que pueden ser con borde visible o invisible, se puede poner cualquier cosa: texto de cualquier tamao y color, imgenes, links... Por supuesto, adems de permitir cualquier contenido, tienen sus propios atributos de alineacin tanto horizontal como vertical, y atributos de dimensionado. Por defecto se autodimensionan, es decir, se adaptan en tamao a su contenido, pero tambin es posible definirlo de forma fija. Las tablas han sido utilizadas largo tiempo para maquetar el contenido de las pginas, y aunque las nuevas tendencias aconsejen hacer esto con bloques (capas XHTML), no es un elemento que vaya a desaparecer, y es mucho ms sencillo de utilizar. El elemento bsico de definicin de tabla es <TABLE> </TABLE> y en su interior se disponen los sub elementos <TR> para definir una fila (Row) <TH> para definir una
cabecera (Header) <TD> para definir una celda de datos (Data). Estos sub elementos tambin han de llevar sus correspondientes cierres: </TR> </TH> </TD>. Una cabecera <TH> es lo mismo que una celda de datos <TD> pero de forma automtica el texto de su contenido recibe los atributos de negrita y centrado. Slo es posible definirlas al principio de las filas, de las columnas o de ambas a la vez. He aqu una tabla-resumen de los elementos utilizados y los atributos que admite cada uno: TABLE TR TD TH CAPTION X - - BORDER X - - BORDERCOLOR - X X ROWSPAN - X X COLSPAN X X X X ALIGN - X VALIGN X - X WIDTH X - X HEIGTH X - - CELLPADDING X - - CELLSPACING - X NOWRAP X X X X EVENTS Resumen de tablas Veamos el significado de cada atributo:

BORDER Indica el ancho de los bordes de la tabla. Se mide en pxels. Si no se escribe este atributo, es equivalente a BORDER=0 (por defecto). BORDERCOLOR Establece el color de los bordes de la tabla. No funciona igual en todos los navegadores. CELLSPACING Indica el nmero de pxels que separan una celda de otra. Aunque pueda parecerlo, no hace lo mismo que BORDER. Su valor por defecto es 2. CELLPADDING Indica los pxels de separacin entre el borde de la celda y su contenido. Su valor por defecto es 1. WIDTH Segn donde se escriba, sirve para controlar el ancho de toda la tabla o de sus columnas. Si se incluye en <TABLE> puede indicar el tamao tanto en pxels como en porcentaje respecto al ancho de la pantalla. ALIGN Indica la alineacin horizontal de los datos dentro de las celdas. Puede tener tres valores: LEFT (izquierda), RIGHT (derecha) y CENTER (centro). VALIGN Indica la alineacin vertical de los datos dentro de las celdas. Puede tener tres valores: TOP (arriba), BOTTOM (abajo) y MIDDLE (centro). ROWSPAN Se utiliza en la definicin de una celda (<TD>) o cabecera (<TH>) para indicar que su anchura o altura son equivalentes a un determinado nmero de filas.
COLSPAN Se utiliza en la definicin de una celda (<TD>) o cabecera (<TH>) para indicar que su anchura o altura son equivalentes a un determinado nmero de columnas. NOWRAP Para impedir que las lneas de texto dentro de una celda se trunquen en los espacios en blanco. EVENTS Se pueden capturar todos los eventos tpicos de los navegadores en cualquiera de las partes de una tabla. Para ello es necesario JavaScript, y no es compatible con todos los navegadores. Por ejemplo: <TABLE BORDER onMouseOver="javascript:alert('Aviso')"> ... </TABLE>
Recientemente se han implementado al elemento <TABLE> algunos atributos muy interesantes que permiten definir qu bordes o lneas de la tabla se mostrarn: Este atributo sirve para definir qu bordes del marco de la tabla sern visibles: <TABLE FRAME="valor"> ... </TABLE> donde valor puede ser:

void - Ningn lado (por defecto). above - Slo el borde superior below - Slo el borde inferior. hsides - Slo los bordes superior e inferior. vsides - Slo los lados derecho e izquierdo. lhs - Slo el lado izquierdo. rhs - Slo el lado derecho. box - Los cuatro lados. border - Los cuatro lados (no es lo mismo que el ya conocido)
Y este otro sirve para definir qu bordes de la tabla sern visibles: <TABLE RULES="valor"> ... </TABLE> donde valor puede ser:

none - Ninguna lnea de divisin (por defecto). groups - Slo aparecen lneas de divisin entre grupos de filas y grupos de columnas. cols - Slo aparecern lneas de divisin entre filas. rows - Slo aparece lneas de divisin entre columnas.
Estos ltimos atributos no funcionan igual en todos los navegadores, y no funcionan en absoluto si no son de la ltima generacin. Segn el navegador de que se trate, puede que haya que combinar ms de un atributo para conseguir el efecto deseado. Lo mejor es hacer pruebas con algunas versiones para asegurarse. Las posibilidades son tan amplias, que lo mejor es ver la pgina de ejemplos de tablas que encontrars en el ndice.
Ejemplos de tablas
Tabla bsica de 3x2 ABC DEF
<TABLE BORDER> <TR> <TD>A</TD> <TD>B</TD> <TD>C</TD> </TR> <TR> <TD>D</TD> <TD>E</TD> <TD>F</TD> </TR> </TABLE>
Dos ejemplos de lnea expandida <ROWSPAN> Item 1 Item 3 Item 2 Item 4 Item 5
<TABLE BORDER> <TR> <TD>Item 1</TD> <TD ROWSPAN=2>Item 2</TD> <TD>Item 3</TD> </TR> <TR> <TD>Item 4</TD> <TD>Item 5</TD> </TR> </TABLE>
Item 1
Item 2 Item 3 Item 4 Item 5 Item 6 Item 7

<TD ROWSPAN=2>Item 1</TD> <TD>Item 2</TD> <TD>Item 3</TD> <TD>Item 4</TD> </TR> <TR> <TD>Item 5</TD> <TD>Item 6</TD> <TD>Item 7</TD>
<TABLE BORDER> <TR>
</TR> </TABLE>
Ejemplo de columna expandida <COLSPAN> Item 1 Item 2 Item 3 Item 4 Item 5

<TABLE BORDER> <TR> <TD>Item 1</TD> <TD COLSPAN=2>Item 2</TD> </TR> <TR> <TD>Item 3</TD> <TD>Item 4</TD> <TD>Item 5</TD> </TR> </TABLE>
Tabla con cabeceras <TH> Head1 Head2 Head3 A B C D E F

<TABLE BORDER> <TR> <TH>Head1</TH> <TH>Head2</TH> <TH>Head3</TH> </TR>
<TR> <TD>A</TD> <TD>B</TD> <TD>C</TD> </TR> <TR> <TD>D</TD> <TD>E</TD> <TD>F</TD> </TR> </TABLE>
Combinacin de columna expandida y cabecera Head1 Head2 A B C D E F G H

<TABLE BORDER> <TR> <TH COLSPAN=2>Head1</TH> <TH COLSPAN=2>Head2</TH> </TR> <TR> <TD>A</TD> <TD>B</TD> <TD>C</TD> <TD>D</TD> </TR> <TR> <TD>E</TD> <TD>F</TD> <TD>G</TD> <TD>H</TD> </TR> </TABLE>
Combinacin de cabeceras mltiples y columnas expandidas Head1 Head2 Head 3 Head 4 Head 5 Head 6 A B C D E F G H
<TABLE BORDER> <TR> <TH COLSPAN=2>Head1</TH> <TH COLSPAN=2>Head2</TH> </TR> <TR> <TH>Head 3</TH> <TH>Head 4</TH> <TH>Head 5</TH> <TH>Head 6</TH> </TR> <TR> <TD>A</TD> <TD>B</TD> <TD>C</TD> <TD>D</TD> </TR> <TR> <TD>E</TD> <TD>F</TD> <TD>G</TD> <TD>H</TD> </TR> </TABLE>
Cabeceras laterales Head1 Item 1 Item 2 Item 3 Head2 Item 4 Item 5 Item 6 Head3 Item 7 Item 8 Item 9
<TABLE BORDER> <TR><TH>Head1</TH> <TD>Item 1</TD> <TD>Item 2</TD> <TD>Item 3</TD></TR>
<TR><TH>Head2</TH> <TD>Item 4</TD> <TD>Item 5</TD> <TD>Item 6</TD></TR> <TR><TH>Head3</TH> <TD>Item 7</TD> <TD>Item 8</TD> <TD>Item 9</TD></TR> </TABLE>
Combinacin de cabeceras laterales y lneas expandidas Item 1 Item 2 Item 3 Item 4 Head1 Item 5 Item 6 Item 7 Item 8 Head2 Item 9 Item 10 Item 3 Item 11
<TABLE BORDER> <TR><TH ROWSPAN=2>Head1</TH> <TD>Item 1</TD> <TD>Item 2</TD> <TD>Item 3</TD> <TD>Item 4</TD> </TR> <TR><TD>Item 5</TD> <TD>Item 6</TD> <TD>Item 7</TD> <TD>Item 8</TD> </TR> <TR><TH>Head2</TH> <TD>Item 9</TD> <TD>Item 10</TD> <TD>Item 3</TD> <TD>Item 11</TD> </TR> </TABLE>
Combinacin de cabeceras superiores y laterales. Tabla centrada. Contenidos centrados. Ttulo al pie. TABLE TR TD TH CAPTION X - - BORDER - X X ROWSPAN - X X COLSPAN X X X X ALIGN - X VALIGN X - X WIDTH X - X HEIGTH X - - CELLPADDING X - - CELLSPACING Resumen de tablas
<CENTER> <TABLE BORDER> <CAPTION ALIGN=bottom>Resumen de tablas</CAPTION> <TR> <TD><TH>TABLE</TH><TH>TR</TH><TH>TD</TH><TH>TH</TH><TH>CAPTION</TH></T D> </TR> <TR ALIGN=CENTER> <TH>BORDER</TH><TD>X</TD><TD>-</TD><TD>-</TD><TD>-</TD><TD>-</TD> </TR> <TR ALIGN=CENTER> <TH>ROWSPAN</TH><TD>-</TD><TD>-</TD><TD>X</TD><TD>X</TD><TD>-</TD> </TR>
<TR ALIGN=CENTER> <TH>COLSPAN</TH><TD>-</TD><TD>-</TD><TD>X</TD><TD>X</TD><TD>-</TD> </TR> <TR ALIGN=CENTER> <TH>ALIGN</TH><TD>-</TD><TD>X</TD><TD>X</TD><TD>X</TD><TD>X</TD> </TR> <TR ALIGN=CENTER> <TH>VALIGN</TH><TD>-</TD><TD>-</TD><TD>X</TD><TD>-</TD><TD>-</TD> </TR> <TR ALIGN=CENTER> <TH>WIDTH</TH><TD>X</TD><TD>-</TD><TD>X</TD><TD>-</TD><TD>-</TD> </TR> <TR ALIGN=CENTER> <TH>HEIGTH</TH><TD>X</TD><TD>-</TD><TD>X</TD><TD>-</TD><TD>-</TD> </TR> <TR ALIGN=CENTER> <TH>CELLPADDING</TH><TD>X</TD><TD>-</TD><TD>-</TD><TD>-</TD><TD>-</TD> </TR> <TR ALIGN=CENTER> <TH>CELLSPACING</TH><TD>X</TD><TD>-</TD><TD>-</TD><TD>-</TD><TD>-</TD> </TR> </TABLE> </CENTER>
Ejemplo con todos los elementos y parmetros Media Altura Peso 85 Hombres 1.9 Sexo 60 Mujeres 1.7
<TABLE BORDER> <TR> <TD><TH ROWSPAN=2></TH> <TH COLSPAN=2>Media</TH></TD> </TR> <TR> <TD><TH>Altura</TH><TH>Peso</TH></TD> </TR> <TR> <TH ROWSPAN=2>Sexo</TH> <TH>Hombres</TH><TD>1.9</TD><TD>85</TD> </TR> <TR> <TH>Mujeres</TH><TD>1.7</TD><TD>60</TD> </TR> </TABLE>
Otro ejemplo de lnea y columna expandidos 12 A 34 C D

<TABLE BORDER> <TR> <TD ALIGN=center ROWSPAN=2 COLSPAN=2>A</TD>
<TD>1</TD> <TD>2</TD> </TR> <TR> <TD>3</TD> <TD>4</TD> </TR> <TR> <TD ALIGN=center ROWSPAN=2 COLSPAN=2>C</TD> <TD ALIGN=center ROWSPAN=2 COLSPAN=2>D</TD> </TR> <TR> </TR> </TABLE>
Ajustando mrgenes y bordes

Tabla sin bordes Item 1 Item 3 Item 2 Item 4 Item 5
<TABLE> <TR> 3</TD> </TR> <TR> </TR> </TABLE> <TD>Item 4</TD> <TD>Item 5</TD> <TD>Item 1</TD> <TD ROWSPAN=2>Item 2</TD> <TD>Item
Aqu no es visible el borde de las celdas debido a que se ha omitido el atributo BORDER del elemento <TABLE>. La omisin o no es equivalente a parametrizarlo; se consigue lo mismo as: BORDER=0, y como ya habrs deducido, el valor de BORDER puede ser variable. Mira el siguiente ejemplo: Tabla con borde de 10 puntos Item 1 Item 2 Item 3 Item 4
<TABLE BORDER=10> <TR> <TD>Item 1</TD> <TD> Item 2</TD> </TR> <TR> <TD>Item 3</TD> <TD>Item 4</TD> </TR> </TABLE>
Dimensionado de celdas A D B E C F
<TABLE BORDER CELLPADDING=10 CELLSPACING=0> <TR> <TD>A</TD> <TD>B</TD> <TD>C</TD> </TR>
<TR> <TD>D</TD> <TD>E</TD> <TD>F</TD> </TR> </TABLE>
A B C D E F
<TABLE BORDER CELLPADDING=0 CELLSPACING=10> <TR> <TD>A</TD> <TD>B</TD> <TD>C</TD> </TR> <TR> <TD>D</TD> <TD>E</TD> <TD>F</TD> </TR> </TABLE>
A D
B E
C F
<TABLE BORDER CELLPADDING=10 CELLSPACING=10> <TR> <TD>A</TD> <TD>B</TD> <TD>C</TD> </TR> <TR> <TD>D</TD> <TD>E</TD> <TD>F</TD> </TR> </TABLE>
A D
B E
C F
<TABLE BORDER=5 CELLPADDING=10 CELLSPACING=10> <TR> <TD>A</TD> <TD>B</TD> <TD>C</TD> </TR> <TR> <TD>D</TD> <TD>E</TD> <TD>F</TD> </TR> </TABLE>
Alineacin, ttulos y subtablas

Lneas mltiples en un tabla Enero Febrero Marzo Otra celda Celda 3 Celda 6
Celda 1 Celda 2 Celda 4 y esta
es la celda 5
<TABLE BORDER> <TR> <TH>Enero</TH> <TH>Febrero</TH> <TH>Marzo</TH> </TR> <TR> <TD>Celda 1</TD> <TD>Celda 2</TD> <TD>Otra celda<br> Celda 3</TD> </TR> <TR> <TD>Celda 4</TD> <TD>y esta<br>es la celda 5</TD> <TD>Celda 6</TD> </TR> </TABLE>
Alineado horizontal del contenido de las celdas. ALIGN=LEFT | RIGHT | CENTER Se puede aplicar individualmente a una celda o a toda la lnea Marzo Otra celda Todas alineadas al centro Celda 2 Celda 3 Por defecto Alineado a la derecha Alineado al centro Alineado a la izquierda
<TABLE BORDER> <TR> <TH>Enero</TH> <TH>Febrero</TH> <TH>Marzo</TH> </TR> <TR ALIGN=center> <TD>Todas alineadas al centro</TD> <TD>Celda 2</TD> <TD>Otra celda<br> Celda 3</TD> </TR> <TR> <TD ALIGN=right>Alineado a la derecha</TD> <TD ALIGN=center>Alineado al centro</TD> <TD>Por defecto<br>Alineado a la izquierdat</TD> </TR> </TABLE>
Enero
Febrero
Alineado vertical del contenido de las celdas. VALIGN=TOP | BOTTOM | MIDDLE Se puede aplicar individualmente a una celda o a toda la columna Enero Febrero Marzo
Todas alineadas arriba Esta es la Celda 3 Celda 2 Alineado arriba Por defecto Alineado abajo Alineado al centro
<TABLE BORDER> <TR> <TH>Enero</TH> <TH>Febrero</TH> <TH>Marzo</TH> </TR> <TR VALIGN=top> <TD>Todas alineadas arriba</TD> <TD>Esta es la<br>Celda 2</TD> <TD>Celda 3</TD> </TR> <TR> <TD VALIGN=top>Alineado arriba</TD> <TD VALIGN=bottom>Alineado abajo</TD> <TD>Por defecto<br>Alineado al centro</TD> </TR> </TABLE>
Titulando las tablas. CAPTION=TOP | BOTTOM Ttulo arriba Enero Febrero Marzo Celda 1 Celda 2 Celda 3
<TABLE BORDER> <CAPTION ALIGN=top>Titulo arriba</CAPTION> <TR> <TH>Enero</TH> <TH>Febrero</TH> <TH>Marzo</TH> </TR> <TR> <TD>Celda 1</TD> <TD>Celda 2</TD> <TD>Celda 3</TD> </TR> </TABLE>
Enero Febrero Marzo Celda 1 Celda 2 Celda 3 Ttulo abajo

<TABLE BORDER> <CAPTION ALIGN=bottom>Titulo abajo</CAPTION> <TR> <TH>Enero</TH> <TH>Febrero</TH> <TH>Marzo</TH> </TR> <TR> <TD>Celda 1</TD> <TD>Celda 2</TD> <TD>Celda 3</TD> </TR> </TABLE>
Anidando tablas. La tabla ABCD dentro de la tabla 12345 3 12 AB CD 456

<TABLE BORDER> <TR>  <TD>1</TD> <TD>2</TD> <TD>3 <TABLE BORDER> <TR>  <TD>A</TD> <TD>B</TD> </TR> <TR>  <TD>C</TD> <TD>D</TD> </TR> </TABLE> </TD> </TR> <TR>  <TD>4</TD> <TD>5</TD> <TD>6</TD> </TR> </TABLE>
Longitud horizontal de las tablas

Tabla que ocupa el 50 % de la pantalla, y cuyas celdas estn dimensionadas al 50 % cada una respecto a la longitud total de la tabla Width=50% Celda 3 Width=50% Celda 4
<TABLE BORDER WIDTH="50%"> <TR><TD>Width=50%</TD><TD>Width=50%</TD> </TR> <TR><TD>Celda 3</TD><TD>Celda 4</TD> </TR> </TABLE>
Tabla dimensionada al 50 % de la pantalla, celdas sin dimensionar. Obsvese que se alargan ms de lo que lo haran sin forzar la longitud de la tabla Celda 1 Celda 3 2 4
<TABLE BORDER WIDTH="50%"> <TR><TD>Celda 1</TD><TD>2</TD>
</TR> <TR><TD>Celda 3</TD><TD>4</TD> </TR> </TABLE>
El mismo efecto anterior, pero con la tabla dimensionada al 100 % WIDTH=100% 3

<TABLE BORDER WIDTH="100%"> <TR><TD>WIDTH=100%</TD><TD>Celda 2</TD> </TR> <TR><TD>3</TD><TD>Celda 4</TD> </TR> </TABLE>
Celda 2 Celda 4
Centrado de una tabla en la pgina A B D E
C F
<CENTER> <TABLE BORDER WIDTH="50%"> <TR> <TD>A</TD> <TD>B</TD> <TD>C</TD> </TR> <TR> <TD>D</TD> <TD>E</TD> <TD>F</TD> </TR> </TABLE> </CENTER>
Tabla forzada al 50 % de la pgina, conteniendo otra tabla anidada en una de sus celdas. La segunda tabla est forzada a ocupar el 100 % de la celda receptora. Item 1 Item 2 Item A Item B Item 4
<TABLE BORDER WIDTH="50%"> <TR><TD>Item 1</TD><TD>Item 2</TD> </TR> <TR><TD> <TABLE BORDER WIDTH=100%> <TR><TD>Item A</TD><TD>Item B</TD> </TR> </TABLE> </TD> <TD>Item 4</TD> </TR> </TABLE>
Longitud vertical de las tablas

Tabla que ocupa el 50 % horizontal de la pantalla, y el 25 % vertical. HEIGHT=25%
HEIGHT=25% 3
Item 2 4
<TABLE BORDER WIDTH="50%" HEIGHT="25%"> <TR><TD>HEIGHT=15%</TD> <TD>Item 2</TD> </TR> <TR><TD>3</TD><TD>4</TD> </TR> </TABLE>
Fondos de colores o grficos en las tablas

Una tabla de cuatro celdas. Cada una de un color. Texto ROJO Texto VERDE Texto AZUL Texto AMARILLO
<TABLE BORDER> <TR><TD BGCOLOR="RED">Texto ROJO</TD> <TD BGCOLOR="green">Texto VERDE</TD> </TR> <TR><TD BGCOLOR="blue">Texto AZUL</TD> <TD BGCOLOR="YELLOW">Texto AMARILLO</TD> </TR> </TABLE>
En este ejemplo se ha dado color individualmente a cada celda. El atributo BGCOLOR="color" puede utilizarse en cada elemento de la tabla para efectos globales. Por ejemplo, para hacer toda la tabla en rojo, slo sera necesario escribir:
<TABLE BORDER BGCOLOR="red"> .... .... </TABLE>
Para toda la lnea:

<TABLE BORDER> <TR BGCOLOR="red"><TD> texto </TD></TR> .... </TABLE>
Tambin se puede usar una imagen como fondo de toda la tabla:

<TABLE BORDER BACKGROUND="yellow_r.gif"> .... .... </TABLE>
De slo una celda:

<TABLE BORDER> <TR><TD BACKGROUND="yellow_r.gif"> texto </TD></TR> .... </TABLE>
O de toda la fila:
<TABLE BORDER > <TR BACKGROUND="yellow_r.gif"><TD> texto </TD></TR> .... </TABLE>
Bordes de colores en las tablas

Se puede cambiar el color de los bordes de una tabla, aunque este atributo no funciona igual en todos los navegadores, ya que en el IE el color afecta a todas las lneas de la tabla, y en Mozilla solamente a los bordes exteriores. Por ejemplo: Ejemplo de bordes de color rojo Ejemplo de bordes de color rojo
<TABLE BORDER=2 bordercolor="red" > <TR><TD> Ejemplo de bordes</TD><TD> de color rojo </TD></TR> <TR><TD> Ejemplo de bordes</TD><TD> de color rojo </TD></TR> </TABLE>
Atributos de ltima generacin

Tabla que solamente muestra los cuatro bordes ABC DEF
<TABLE FRAME="border" RULES="none"> <TR> <TD>A</TD> <TD>B</TD> <TD>C</TD> </TR> <TR> <TD>D</TD> <TD>E</TD> <TD>F</TD> </TR> </TABLE>
Tabla que solamente muestra los bordes superior e inferior ABC DEF
<TABLE FRAME="hsides" RULES="none"> <TR> <TD>A</TD> <TD>B</TD> <TD>C</TD> </TR> <TR> <TD>D</TD> <TD>E</TD> <TD>F</TD> </TR> </TABLE>
Tabla que solamente muestra los bordes izquierdo y derecho ABC DEF
<TABLE FRAME="vsides" RULES="none"> <TR> <TD>A</TD> <TD>B</TD> <TD>C</TD> </TR> <TR> <TD>D</TD> <TD>E</TD> <TD>F</TD> </TR> </TABLE>
Tabla que solamente muestra las lneas de divisin entre columnas
ABC DEF
<TABLE FRAME="void" RULES="cols"> <TR> <TD>A</TD> <TD>B</TD> <TD>C</TD> </TR> <TR> <TD>D</TD> <TD>E</TD> <TD>F</TD> </TR> </TABLE>
Tabla que solamente muestra las lneas de divisin entre filas ABC DEF
<TABLE FRAME="void" RULES="rows"> <TR> <TD>A</TD> <TD>B</TD> <TD>C</TD> </TR> <TR> <TD>D</TD> <TD>E</TD> <TD>F</TD> </TR> </TABLE>
Ejemplo de tabla con agrupamientos de columnas y filas Ejemplo de grupos de columnas y lneas Columna1 Columna2 Columna3 Columna4 Columna5 Columna6 Columna7 C1L1 C2L1 C3L1 C4L1 C5L1 C6L1 C7L1 C1L2 C1L3 C1L4 C1L5 C1L6 C1L7 C2L2 C2L3 C2L4 C2L5 C2L6 C2L7 C3L2 C3L3 C3L4 C3L5 C3L6 C3L7 C4L2 C4L3 C4L4 C4L5 C4L6 C4L7 C5L2 C5L3 C5L4 C5L5 C5L6 C5L7 C6L2 C6L3 C6L4 C6L5 C6L6 C6L7 C7L2 C7L3 C7L4 C7L5 C7L6 C7L7
<TABLE border="1" frame="border" rules="groups"> <CAPTION>Ejemplo de grupos de columnas y lneas</CAPTION> <COLGROUP align="center"> <COLGROUP align="left"> <COLGROUP align="center" span="2"> <COLGROUP align="center" span="3"> <THEAD valign="top"> <TR> <TH>Columna1</TH> <TH>Columna2</TH> <TH>Columna3</TH> <TH>Columna4</TH> <TH>Columna5</TH> <TH>Columna6</TH> <TH>Columna7</TH></TR> <TBODY> <TR><TD>C1L1<TD>C2L1<TD>C3L1<TD>C4L1<TD>C5L1<TD>C6L1<TD>C7L1</TR> <TR><TD>C1L2<TD>C2L2<TD>C3L2<TD>C4L2<TD>C5L2<TD>C6L2<TD>C7L2</TR> <TR><TD>C1L3<TD>C2L3<TD>C3L3<TD>C4L3<TD>C5L3<TD>C6L3<TD>C7L3</TR>
<TR><TD>C1L4<TD>C2L4<TD>C3L4<TD>C4L4<TD>C5L4<TD>C6L4<TD>C7L4</TR> <TBODY> <TR><TD>C1L5<TD>C2L5<TD>C3L5<TD>C4L5<TD>C5L5<TD>C6L5<TD>C7L5</TR> <TR><TD>C1L6<TD>C2L6<TD>C3L6<TD>C4L6<TD>C5L6<TD>C6L6<TD>C7L6</TR> <TFOOT> <TR><TD>C1L7<TD>C2L7<TD>C3L7<TD>C4L7<TD>C5L7<TD>C6L7<TD>C7L7</TR> </TABLE>
Como puedes ver, existe un agrupamiento desde la lnea 1 a la 4, y otro de la 5 a la 6. A su vez, las columnas 3 y 4 forman un grupo, y la 5, 6 y 7 otro. Los dos agrupamientos de columnas se definen con las instrucciones:
<COLGROUP align="center" span="2"> <COLGROUP align="center" span="3">
Hay cuatro grupos de filas: La que aparece debajo de las cabeceras la escribe <THEAD> Las dos lneas que separan los grupos de filas centrales las producen las dos instrucciones <TBODY>, Y la ltima la produce <TFOOT>. Por supuesto, no es obligado que esten todas, puedes poner solamente las que necesites. Todo esto funciona solamente si en la definicin de la tabla se incluye el atributo rules="groups" Tablas con efectos compatibles con todos los navegadores... Como ya has podido ver, muchos de los efectos de ltima generacin mostrados no funcionan igual, o no funcionan en absoluto con todos los navegadores. Qu hacer entonces para conseguir tablas cuyas lneas de bordes se vean siempre bien? Pues la nica solucin es usar una tabla sin bordes. S, ya s que lo que buscas no es eso, pero si utilizando atributos de tabla para poner lneas de bordes donde queramos hay problemas con algunos navegadores, la solucin es utilizar otros recursos del HTML que sean admitidos por todos. No es ninguna solucin mgica: solamente tienes que crear un grfico con un punto (preferiblemente cuadrado) del color y grosor que quieras dar a tus lneas... y listo. Supongamos que queremos conseguir con una tabla representar un recuadro con bordes rojos. Para ello, utilizando cualquier editor de grficos creamos un fichero que contenga un punto de color rojo. Solamente uno, ser casi invisible. No necesitamos ms. Le llamaremos rojo.gif Ejemplo de recuadro con ngulos rectos. Y este sera del cdigo necesario:
<table width="300" height="50" cellspacing="0" cellpadding="0" border="0" bgcolor="#6a7da5" align="center"> <tr> <td rowspan="3" width="1" height="50"> <img src="rojo.gif" width="1px" height="50" border="0" alt=""></td> <td colspan="4" height="1"> <img src="rojo.gif" width="300" height="1" border="0" alt=""></td>
<td rowspan="3" width="1"> <img src="rojo.gif" width="1px" height="50" border="0" alt=""></td> </tr> <tr> <td colspan="4" align="center" height="48"> <font color="white"><b>Ejemplo de recuadro con ngulos rectos.</b></font></td> </tr> <tr> <td colspan="4" height="1"> <img src="rojo.gif" width="300" height="1" border="0" alt=""></td> </tr> </table>
Como puedes ver, el truco consiste en definir celdas alrededor de la celda que lleva el texto. Estas celdas que rodean a la principal solamente contienen el fichero grfico con el punto. Para conseguir que aparezcan las lneas, slo hay que "estirar" el punto contenido en nuestro fichero grfico rojo.gif. Esto nos permite "dibujar" las lneas que se quieran y donde se quieran, sin problemas de compatibilidad, ya que estos atributos del elemento <IMG> son completamente estandarizados (por lo menos de momento). Fjate en que adems de atributos propios del elemento IMG tambin se utiliza una instruccin de estilo: width="1px" para asegurar un grosor mnimo de la lnea. Este es el aspecto de la misma tabla con los bordes visibles: Horizontal arriba Vertical Ejemplo de recuadro Vertical izquierda con ngulos rectos. derecha Horizontal abajo -------------------Utilizando una tcnica parecida, tambin se pueden conseguir recuadros con las esquinas redondeadas. Al igual que en el anterior ejemplo, es necesario tener un grfico previamente, pero este nos dar algo ms de trabajo. Con cualquier editor de grficos (el "Paint" de Windows, por ejemplo) generas un crculo del color que quieras, y con el borde transparente o de otro color. A continuacin lo cortas en cuatro porciones, como una tarta, y guardas cada trozo con un nombre cualquiera, por ejemplo, angulo1, angulo2, etc. As
Recuadro con ngulos redondeados
Y este es el cdigo necesario:

<table border="0" cellspacing="0" cellpadding="0"> <tr> <td bgcolor="#DDE0FC" width="20"><img src="angulo1.gif" width="20" height="20"></td> <td bgcolor="#DDE0FC"> </td> <td bgcolor="#DDE0FC" width="20"><img src="angulo2.gif" width="20" height="20"></td> </tr> <tr> <td bgcolor="#DDE0FC" width="20"> </td>
<td bgcolor="#DDE0FC">Recuadro con ngulos redondeados</td> <td bgcolor="#DDE0FC" width="20"> </td> </tr> <tr> <td bgcolor="#DDE0FC" width="20"><img src="angulo4.gif" width="20" height="20"></td> <td bgcolor="#DDE0FC"> </td> <td bgcolor="#E5E7FD" width="20"><img src="angulo3.gif" width="20" height="20"></td> </tr> </table>
Como puedes ver, para que el efecto sea completo hay que dar el mismo color que tienen los grficos como fondo de las celdas. Estos son los cuatro grficos necesarios: angulo1.gif angulo2.gif angullo4.gif angulo3.gif
Control de colores
Este es un documento de ejemplo de control de color. El texto es gris claro sobre negro, y los links son amarillos al principio, azul-verde cuando son activados, y verdes despus de haber sido utilizados.
Todo son atributos del elemento <BODY>. Se escribe as:

<BODY BGCOLOR="#000000" FGCOLOR="#00FF00" TEXT="#F0F0F0" LINK="#FFFF00" VLINK="22AA22" ALINK="#0077FF">
Insertar imgenes
Insertar imgenes en un documento permite crear pginas mucho ms atractivas. Segn el tipo de grficos utilizado se pueden conseguir efectos realmente sorprendentes.
Para insertar una imagen en un documento HTML se utiliza el elemento <IMG>. Este elemento puede ir acompaado de los atributos SRC ALT ISMAP ALIGN WIDTH HEIGHT BORDER VSPACE HSPACE. Con las nuevas implementaciones que Netscape hace del elemento, se consiguen efectos de imagen flotante y por tanto se ha hecho necesario dotar al elemento <BR> del atributo CLEAR. Las imgenes utilizadas pueden estar en formato GIF o JPG. Estos formatos son interpretados directamente por el navegador. La diferencia entre estos dos formatos es su nivel de compresin. En efecto, el JPG tiene una compresin mucho mayor que el GIF, por lo que suele ser el formato ms utilizado en el mundo web, donde siempre se debe perseguir que las pginas sean lo ms ligeras posible. Por contra, cuanta mayor compresin tenga un grfico menor calidad se consigue, pero para usos generales el JPG
es perfectamente vlido. Se puede usar cualquier otro formato como el MPG o el AVI (ambos de vdeo), pero entonces el visualizador llamar a un programa auxiliar, que previamente le habrs definido, para que sea ste el que visualice el fichero. La desventaja de las imgenes en formatos no tratados por el propio visualizador es que no vers el texto junto con la imagen, y por tanto no podrs imprimir la pgina compuesta. para evitar esto, se utilizan los llamados "plug-in" que consisten en pequeos programas que permiten llamar a aplicaciones especficas ejecutndose como ventanas del navegador. Un ejemplo muy comn son los ficheros .pdf. Algunos navegadores no son capaces de tratar imgenes, o aunque el navegador s pueda, tal vez el cliente est navegando en modo solo texto, es decir, sin ver las imgenes, lo que permite moverse ms rpido. Para estos casos podemos recurrir al atributo ALT (por alternativo) para definir un texto que aparecer en lugar de la imagen. Esto es importante cuando una imagen, adems de ser un elemento decorativo o informativo, soporta un link. El uso de ALT es recomendado por la W3. Veamos ejemplos del uso de <IMG>:
Imagen alineada a la izquierda (por defecto)

<IMG SRC="sugeren.gif">texto texto texto texto texto texto texto texto
texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto
Imagen con un texto alternativo Sirve para que, si no es posible cargar la imagen, aparezca un texto en su lugar. Tambin se utiliza para que al colocar el puntero del ratn sobre la imagen, sin pulsar, aparezca el texto. Para verlo tienes de deshabilitar la opcin de cargar imgenes de tu visualizador (slo es posible con Netscape).
<IMG SRC="sugeren.gif" ALT="AQUI VA UNA IMAGEN">
Imagen alineada a la izquierda.Texto alineado arriba

<IMG SRC="sugeren.gif" ALIGN=TOP> texto texto texto texto texto texto exto texto texto texto texto texto
texto texto texto texto texto texto texto texto texto texzto texto texto texto texto texto texto texto texto
Imagen alineada a la izquierda.Texto alineado abajo

<IMG SRC="sugeren.gif" ALIGN=BOTTOM> texto texto texto texto texto texto exto texto texto texto texto texto
Imagen alineada a la izquierda.Texto alineado al centro

<IMG SRC="sugeren.gif" ALIGN=MIDDLE> texto texto texto texto texto texto exto texto texto texto texto texto
Imagen alineada a la izquierda.Texto alineado a la derecha de la imagen

<IMG SRC="sugeren.gif" ALIGN=LEFT> texto texto texto texto texto texto texto texto texto texto texto texto
texto texto texto texto texto texto texto texto texto texzto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto
Imagen alineada a la izquierda.Texto envolviendo la imagen

<IMG SRC="sugeren.gif" ALIGN=LEFT> texto texto texto texto texto <BR CLEAR> texto texto texto texto texto texto texto
Imagen alineada a la derecha.Texto alineado a la izquierda de la imagen

<IMG SRC="sugeren.gif" ALIGN=RIGHT> texto texto texto texto texto texto texto texto texto texto texto texto
Si tu visualizador no soporta esto, hay un truco para conseguir algo parecido:
<TABLE> <TR><TD>texto texto texto texto texto texto texto texto texto texto texto texto</TD><TD align=center><IMG SRC="sugeren.gif"></TD></TR> </TABLE>
texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto
Imagen redimensionada a ms.Texto alineado a la derecha de la imagen

<IMG SRC="sugeren.gif" ALIGN=LEFT WIDTH=272 HEIGHT=92 > texto texto texto texto texto texto texto texto texto texto texto texto
texto texto texto texto texto texto texto texto texto texzto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto.
Aqu la imagen es la misma de los ejemplos anteriores, pero ha sido redimensionada por el visualizador. Su tamao original es de 136x46 puntos. Este es su aspecto al doble: 272x92.
Imagen redimensionada a menos.Texto alineado a la derecha de la imagen

<IMG SRC="sugeren.gif" ALIGN=LEFT WIDTH=75 HEIGHT=20 > texto texto texto texto texto texto texto texto texto texto texto texto
texto texto texto texto texto texto texto texto texto texzto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto.
Aqu la imagen es la misma de los ejemplos anteriores, pero ha sido redimensionada por el visualizador. Su tamao original es de 136x46 puntos. Este es su aspecto a la mitad: 75x23
Consideraciones sobre WIDTH y HEIGHT Estos dos atributos, adems de para variar el tamao de un grfico, tambin pueden (casi deben) utilizarse con los valores naturales del mismo. Es decir, que no se pretende alterar las dimensiones del grfico. Y te preguntars que finalidad tiene esto. La razn estriba en cmo funcionan los navegadores. Cuando el navegador solicita una pgina y comienza a recibirla, lo primero que hace es leer la cabecera, a continuacin lee el cdigo del BODY y por ltimo carga las imgenes que contenga la pgina haciendo nuevas conexiones al servidor para cada una de ellas.
Esta forma de trabajar tiene como consecuencia, que si en el cdigo del BODY no hay instrucciones sobre el espacio que hay que reservar en pantalla para cada imagen, cuando stas lleguen en el ltimo paso de la carga de la pgina, el texto ya estar
compuesto, pero al no saber el tamao de las imgenes, no se habr reservado el espacio adecuado para insertarlas, por lo que todo el texto ser desplazado hacia abajo, con la consiguiente prdida del formato original de la pgina, ya que el navegador no va a recomponer el texto que ya estaba escrito.
Imagen alineada a la izquierda con marco.Texto alineado a la derecha de la imagen

<IMG SRC="sugeren.gif" ALIGN=LEFT BORDER=5> texto texto texto texto texto texto texto texto texto texto texto texto
Imagen alineada a la izquierda.Texto alineado a la derecha de la imagen. Espacios verticales y horizontales vacos forzados.
texto texto texto texto texto texto texzto texto texto texto texto texto <IMG SRC="sugeren.gif"> ALIGN=LEFT HSPACE=100 VSPACE=30> texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto
texto texto texto texto texto texto texzto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texzto texto texto texto texto texto texto texto texto texto texto texto texzto texto texto texto texto texto texto texto texto texto texto texto texzto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto
Usar una imagen como punto de montaje de un link

texto texto <A HREF="indice.htm"><IMG SRC="sugeren.gif" ></A>texto texto.
Como puedes ver, la imagen aparece rodeada de un marco de color como es habitual en los puntos de link (en el texto es el subrayado). Si quieres eliminar el marco, escribe:
.... IMG SRC="sugeren.gif" BORDER=0 >
Ahora que ya sabes cmo manejar las imgenes, veamos algunos efectos especiales algo ms complicados.
Mapeado de una imagen para usarla como direccionador

<A HREF="/cgi-bin/imagemap/mimapa"><IMG SRC="sugeren.gif" ISMAP></A>
Si mueves el ratn por encima de la imagen, vers que en la ventanita de estado del navegador (en la parte inferior izquierda de la ventana) aparecen junto a un interrogante unos nmeros que cambian segn muevas el ratn. Con cuidado intenta poner el puntero en la esquina superior izquierda y en la inferior derecha. Vers las cifras 1,1 y 136,46, respectivamente, que son las medidas en puntos que tiene el grfico. Como ya habrs supuesto, esto es un sistema de coordenadas, y para que nuestra imagen funcione como un men direccionador, lo que necesitamos es que algn elemento convierta esas coordenadas en una direccin del estilo ya conocido: "http://miservidor.es/mifichero.htm". Esto siginifica que con un solo link podemos obtener un enorme nmero de direcciones, tericamente tantas como pares de coordenadas tiene la imagen. En la prctica sern menos, ya que andar intentando atinar en el punto 11,32, por ejemplo, es un poco engorroso. Existen multitud de programas llamados mapeadores que parten la imagen en imaginarios trozos, y cada uno de ellos indica un link con alguna parte. Estos programas generan un fichero con todas las direcciones. Algo as:
rect http://miservidor.es/mifichero1.htm 12,35 rect http://miservidor.es/mifichero2.htm 90,42 rect http://miservidor.es/mifichero3.htm 112,46
Este podra ser el aspecto del fichero del ejemplo, el llamado mimapa. El parmetro rect significa rectngulo, y nos indica que la imagen ha sido troceada en rectngulos y las coordenadas indican la esquina superior izquierda y la inferior derecha. Tambin podra ser en crculos (circ) o polgonos (poly). Ahora veamos el resto de instrucciones del ejemplo:
<A HREF="/cgi-bin/imagemap/mimapa"><IMG SRC="sugeren.gif" ISMAP></A>
La primera parte A HREF ya la conocemos, es un link. Despus viene un directorio: cgi-bin. Este es un directorio especial que tienen los servidores http, donde se ejecutan los programas auxiliares del servidor, y al que normalmente slo puede acceder el administrador del sistema. En ese directorio hay un fichero llamado imagemap (segn el sistema puede ser otro) que es un programa que se encarga de leer tu fichero mimapa, capturar las coordenas que seale el puntero del ratn y servir la direccin que tiene asociada, con lo que acabamos obteniendo un link normal. Ya por ltimo, aparece ISMAP que es el que convierte una simple imagen en una potente herramienta.
Slo queda por decir que el fichero mimapa tiene que estar en otro directorio especial que tiene el servidor a estos efectos, y al que por supuesto, solo puede acceder el administrador del sitema.
Todo esto es suponiendo que el servidor est en una mquina UNIX. Si reside en tu propio PC con Windows o en un MAC (que los hay), tendrs que ver las instrucciones concretas del programa servidor. La forma de montar el mapa puede variar de un programa servidor a otro, pero la base de funcionamiento es siempre la misma. Otra forma alternativa de conseguir que una imagen responda con ciertas acciones, es operar con los elementos de formularios. En el ndice encontrars informacin sobre un tipo de formulario que devuelve un par de coordenadas, que una vez evaluadas permite ejecutar una accin.
Pero, una vez ms, Netscape ha propuesto una solucin mucho ms simple: que sea el propio visualizador quien haga las veces de programa conversor. En efecto, un recurso tan bueno como los mapas, no debe depender de tener tu mquina en red y de que haya un servidor http que te atienda. Adems, eso resta portabilidad a los documentos locales y a los trabajos personales en disquete. Para ello ha implementado el elemento MAP que acompaar a IMG.
Por ejemplo, en la siguiente imagen, la mitad izquierda nos enva a indice.htm y la mitad derecha a intro.htm. Mueve el puntero del ratn horizontalmente sobre la imagen y observa la ventanita de estado que hay en la parte inferior izquierda de la pantalla, vers como cambia el nombre del link.
Se escribe as:
<MAP NAME="nombre1"> <AREA SHAPE="rect" COORDS="1,1,75,46" HREF="indice.htm"> <AREA SHAPE="rect" COORDS="76,1,136,46" HREF="intro.htm"> </MAP> <IMG SRC="sugeren.gif" USEMAP="#nombre1">
Aunque se comprende a simple vista, analicmoslo:
En primer lugar tenemos el elemento MAP, que lo que est haciendo es definir un mapa de coordenadas. Va acompaado del atributo NAME que da nombre al mapa. Es necesario nombrarlo porque podra haber ms de uno en la misma pgina, y evidentemente, sus nombres no debern repetirse. A continuacin tenemos el atributo AREA que define las reas de la imagen. El parmetro SHAPE="rect" indica la figura geomtrica que estamos utilizando para ello. Al igual que con los otros mapas, puede ser rect circ y poly. El parmetro COORDS fcilmente se adivina que indica las coordenadas del rea, en este caso vrtice superior izquierdo e inferior derecho, respectivamente.
HREF ya sabemos lo que hace: indica un link con una pgina, pero esta vez no va acompaando al elemento <A>, digamos que es un atributo prestado. Hay un rea por cada link definido. Si un rea no queremos que tenga link se definir con NOHREF. IMG SRC tambin son conocidos: hacen que se visualice la imagen. Y por fin, USEMAP nos dice qu mapa de coordenadas hay que aplicar a la imagen. A una misma imagen se le pueden aplicar distintos mapas si se desea. Fjate en que nombre1, (el nombre del mapa) va precedido del smbolo #. Esto se debe a que, en este caso, el mapa al que se hace referencia est en la misma pgina que la instruccin IMG. Podra estar en otra, y en ese caso el smbolo tendra que estar despus del nombre de la pgina. Por ejemplo: otrapagina.htm#nombre1 Como ya se ha dicho ms arriba, hay tres figuras geomtricas definibles para las reas: rect, circle y poly. El rectngulo ya lo conocemos; consiste en parejas de coordenadas que indican los vrtices superior izquierdo e inferior derecho respectivamente del rea. Para el cculo (circ) son necesarios tres valores: x,y r donde x,y es el par de coordenas que indican el punto donde est el centro del cculo, y r es el radio del crculo medido en puntos. Para los polgonos (poly) se necesitan tantas parejas de coordenadas como vrtices tenga el polgono, procurando que la ltima pareja quede unida a la primera, ya que la figura debe estar cerrada. No es obligatorio que sean figuras regulares. En el caso de que se quiera emplear todo el grfico como rea de enlace, es decir, un solo link, se puede emplear default, y no es necesario indicar ninguna coordenada.
Imgenes de fondo
El fondo (background) de este documento es una imagen en formato GIF.
Es un atributo del elemento <BODY> Se escribe as:

<BODY BACKGROUND="yellow_r.gif">
Y es compatible con todos los dems atributos de este elemento.
Algunos ejemplos de imgenes en listas

Se escriben todas igual, slo hay que cambiar el nombre de los grficos:
<DL> <DT><IMG SRC="bolaroja.gif">Linea de texto <DT><IMG SRC="bolaroja.gif">Linea de texto <DT><IMG SRC="bolaroja.gif">Linea de texto </DL>
Linea de texto Linea de texto Linea de texto Linea de texto Linea de texto Linea de texto Linea de texto Linea de texto Linea de texto Linea de texto Linea de texto Linea de texto
Linea de texto Linea de texto Linea de texto Linea de texto Linea de texto Linea de texto Linea de texto Linea de texto Linea de texto Linea de texto
Linea de texto Linea de texto Linea de texto Linea de texto Linea de texto Linea de texto
Linea de texto Linea de texto
Grficos animados
Una nueva propiedad de algunos visualizadores es la posibilidad de presentar grficos con animacin. No hay que confundir los grficos animados en formato GIF con los "movies" o vdeos en formato MPG que no son tratados directamente por el visualizador, sino por una herramienta auxiliar que hay que definirle.
Los visualizadores suelen presentar correctamente los formatos GIF y JPG. Netscape ha implementado la posibilidad de mostrar un tipo de grfico tipo GIF que incluye en su interior una secuencia, que junto con instrucciones de repeticin (loop), espera (wait) y controles de cabecera permiten reproducir una animacin. La diferencia de tamao entre un GIF animado y un MPG es considerable. Evidentemente, las animaciones GIF tienen peor resolucin que las MPG, y slo estn pensadas para fines sencillos. La forma de incluir una imagen animada en el documento es la misma que una imagen fija. No se requiere ningun tipo de programa ni script, todo est definido en la propia imagen. Existen en la red en forma de shareware programas para hacer ficheros de imgenes animadas. Su construccin es muy sencilla: slo necesitas tener la serie de imgenes que quieres animar e ir ensamblndolas con algn programa al efecto, definir el tiempo entre imagen, el ciclo de repeticin... y listo. Los visualizadores que no soportan este efecto, lo que hacen es presentar solamente la primera o la ltima de las imgenes de la secuencia. Hay que tener esto presente, y no comenzar o terminar las secuencias con, por ejemplo, una imagen vaca. Aqu tienes dos ejemplos sencillos de GIF animado:
Una bola que corre.
Una carta que se mete en un sobre.
Para representarlos en la pgina se utiliza el mismo elemento HTML de los grficos normales: <IMG SRC="migrafico.gif">
Introduccin a los formularios
Generalidades Esta es una de las partes ms tcnicas y complejas del HTML. Los formularios o forms en ingls, son unas pginas especiales que se utilizan para realizar transacciones. En una pgina que contenga un formulario pueden adems existir todos los elementos hasta ahora conocidos, incluso el propio formulario puede estar integrado dentro de otros elementos, como por ejemplo una tabla. Los formularios, en algunas impresoras, pueden dar problemas al imprimir las pginas que los contienen. Cmo funcionan los formularios? El formulario no es ms que una pgina escrita en HTML como cualquier otra. Lo que la hace diferente es que permite capturar datos de varias maneras: directamente desde el teclado, escogiendo un valor de una lista desplegable o seleccionando una opcin desde botones fijos o de todas ellas combinadas.
Una vez terminada la captura de datos, estos forman un registro que es enviado a un servidor http (web) que lo procesar y devolver una respuesta (o no). Pueden utilizarse tambin para enviar su contenido a una direccin de correo electrnico, o que simplemente abran otra pgina. Si el formulario se disea para abrir una pgina o para ser enviado por e-mail, todo se reduce a escribir HTML, pero la cosa se complica cuando se trata de transacciones de datos que hay que guardar en un servidor (comercio electrnico). En este caso, en el servidor tiene que haber un programa especial, creado especficamente para ese formulario, que reciba los datos y sepa qu hacer con ellos, procesarlos y confeccionar la respuesta que remitir al navegadorr. A esa respuesta se le denomina documento virtual ya que esa pgina no est escrita en ninguna parte; es generada, enviada y destruida. A los programas que hacen de puente entre el formulario y el servidor, se les llama programas CGI (Common Gateway Interface) y no hay que confundirlos con las pginas dinmicas escritas en ASP o PHP, aunque se parecen mucho. Los programas CGI pueden estar escritos en cualquier lenguaje de programacin que sea soportado por el sistema operativo del servidor, y pueden estar diseados para cualquier funcin: desde una simple captura de datos que sern guardados en un fichero, hasta la ms sofisticada consulta a una base de datos.
Cmo es un CGI? Aunque el propsito de esta gua no es tratar temas de programacin, como breve orientacin se muestra un sencillo programa hecho con comandos shell de UNIX. Muestra los valores de las variables de servidor ms usuales, as como el nombre de los campos definidos en el formulario y contenido de cada uno de ellos. Ejemplo de programa CGI (shell UNIX)
#!/bin/sh echo Content-type: text/plain echo echo Test CGI. Se visualiza el contenido de las variables mas usuales
echo echo numero de argumentos: $#. valor argumentos: "$*". echo echo echo echo echo echo echo echo echo echo echo echo echo echo echo echo echo echo echo echo echo echo echo echo SERVER_SOFTWARE SERVER_NAME GATEWAY_INTERFACE SERVER_PROTOCOL SERVER_PORT REQUEST_METHOD HTTP_ACCEPT PATH_INFO PATH_TRANSLATED SCRIPT_NAME QUERY_STRING REMOTE_HOST REMOTE_ADDR REMOTE_USER REMOTE_IDENT AUTH_TYPE CONTENT_TYPE CONTENT_LENGTH HTTP_USER_AGENT HOME HTTP_FROM HTTP_REFERER REFERER_URL = = = = = = = = = = = = = = = = = = = = = = = $SERVER_SOFTWARE $SERVER_NAME $GATEWAY_INTERFACE $SERVER_PROTOCOL $SERVER_PORT $REQUEST_METHOD $HTTP_ACCEPT $PATH_INFO $PATH_TRANSLATED $SCRIPT_NAME $QUERY_STRING $REMOTE_HOST $REMOTE_ADDR $REMOTE_USER $REMOTE_IDENT $AUTH_TYPE $CONTENT_TYPE $CONTENT_LENGTH $HTTP_USER_AGENT $HOME $HTTP_FROM $HTTP_REFERER $REFERER_URL
if [ "$CONTENT_TYPE" = "application/x-www-form-urlencoded" ]; then read lo_que_viene echo echo ESTO VIENE POR echo echo $lo_que_viene exit 0 else echo NO VIENE NADA POR LA INPUT exit 0 fi
LA INPUT:
Esta sera la respuesta del CGI test2-cgi a un imaginario formulario llamado prueba.htm con dos campos de captura por teclado llamados CAMPO1 y CAMPO2 en los que hemos introducido: "Esto es una" y "demostracion de formularios" respectivamente. Ejemplo de respuesta del programa test2-cgi al formulario prueba.htm
Test CGI. Se visualiza el contenido de las variables mas usuales numero de argumentos: 0. valor argumentos: . SERVER_SOFTWARE = NCSA/1.3 SERVER_NAME = miserver.midominio.mipais GATEWAY_INTERFACE = CGI/1.1 SERVER_PROTOCOL = HTTP/1.0 SERVER_PORT = 80 REQUEST_METHOD = POST HTTP_ACCEPT = image/gif, image/x-xbitmap, image/jpeg, image/pjpeg, */*
PATH_INFO = PATH_TRANSLATED = SCRIPT_NAME = /cgi-bin/test2-cgi QUERY_STRING = REMOTE_HOST = mimaquina.misubdominio.midominio.mipais REMOTE_ADDR = 255.255.255.255 REMOTE_USER = REMOTE_IDENT = unknown AUTH_TYPE = CONTENT_TYPE = application/x-www-form-urlencoded CONTENT_LENGTH = 52 HTTP_USER_AGENT = Mozilla/2.02 (Win95; I) HOME = HTTP_FROM = HTTP_REFERER = http://sestud.uv.es/manual.esp/prueba.htm REFERER_URL = ESTO VIENE POR LA INPUT: CAMPO1=Esto+es+una&CAMPO2=demostracion+de+formularios
Fjate que las palabras aparecen separadas por el signo + y no por espacios como hemos escrito. Si adems hubiramos escrito algn carcter especial, no se vera como tal, sino su valor en hexadecimal precedido del carcter %. Por ejemplo, el cracter & es transferido como %26. Esta conversin se hace para no confundirlo con el separador de campos, que como puedes ver es el mismo smbolo. El signo = despus del nombre del campo, tambin lo pone el visualizador. Todo esto y algunas cosas ms (que habr que ver en la documentacin de referencia) han de tenerse presentes a la hora de realizar programas CGI. Para terminarlo de complicar, no todos los visualizadores utilizan la misma forma de enviar los datos recibidos, por lo que se plantea a menudo la necesidad de decidir para qu visualizador queremos programar nuestro WEB. Los programas de test, como el del ejemplo, son muy tiles cuando se estn diseando formularios, ya que permiten comprobar de forma real su funcionamiento y analizar el registro que envan, cosa imprescindible para poder programar el correspondiente CGI. Intenta hacer uno a tu medida, o simplemente copia ste, instlalo en tu servidor http, (si no tienes acceso, pide a tu administrador de sistema que lo haga), empieza a probar... y buena suerte.
Cmo se escriben los formularios ?

La base del formulario es el elemento <FORM>, y es el que define una zona de la pgina como formulario. En una pgina puede haber varias zonas definidas como formulario, en cuyo caso es conveniente darles distintos nombres a cada uno. Dentro de este elemento, que es un objeto, se insertan otros elementos, que a su vez son subobjetos del objeto FORM, que son los que realmente dibujan en pantalla los componentes del formulario. Se ver con detalle el concepto de objeto en las secciones de programacin de esta guia, ya que ahora no lo necesitamos. Hay tres clases de estos sub-objetos:
<INPUT>
Campos de entrada por teclado. Botones de seleccin. Casillas de marca. Botones de proceso. Botones de inicializacin (reset). Imgenes sensibles al ratn. <SELECT> Listas desplegables de valores. Listas fijas de valores. <TEXTAREA> Ventanas de escritura libre.
Este sera el ms elemental de los formularios, con slo un campo y un botn de envo:
Analicemos cmo se escribe:

<FORM NAME="MI_FORMULARIO" METHOD="POST" ACTION="http://miserver.midominio.mipais/cgi-bin/test2-cgi"> <INPUT NAME="campo1"> <INPUT TYPE="submit" VALUE="Procesar"></FORM>
En la primera lnea vemos el elemento de definicin de formulario: <FORM>. Va acompaado de tres atributos: NAME, METHOD y ACTION. NAME, evidentemente, se refiere al nombre que se le asigne al formulario. No es obligatorio, pero si el formulario va a ser utilizado en pginas ASP, PHP, o simplemente en VBScript o JavaScript, se necesitar un nombre, ya que el formulario ser considerado como un objeto. METHOD se refiere al mtodo que emplearemos para enviar los datos al servidor, y pueden ser dos: POST y GET. El optar por uno u otro obedece a complejas cuestiones de programacin basadas en la mxima longitud de registro que puede enviarse; cada uno usa un canal de salida distinto. El que soporta ms longitud es POST, y ser el que utilicemos en casi todos los ejemplos. Si el formulario solamente se utiliza para llamar a otras pginas, se utiliza el mtodo GET, y si se trata de envio de datos POST. Echale un vistazo a la respuesta del programa test2-cgi de la pgina anterior. Fjate en las variables QUERY_STRING e INPUT. Por la primera llegarn los datos cuando se utilice METHOD=GET y por la segunda cuando es POST el mtodo elegido. ACTION se refiere a la accin que queremos que ejecute el formulario en un servidor http o en local. Con el valor del ejemplo ACTION="http://miserver.midominio.mipais/cgi-bin/test2-cgi" se le est indicando que ejecute un programa llamado test2-cgi que est en el directorio /cgi-bin del servidor http miserver.midominio.mipais cuya respuesta ser similar a la que hemos visto en la pgina de introduccin a los formularios. Adems de enviar datos a un servidor, ACTION tambin puede realizar una accin en local, por ejemplo traer una pgina: Se escribe:
<FORM METHOD="POST" ACTION="indice.htm"> ...... </FORM>
En este caso el formulario funcionara igual que un link. Otra cosa que puede hacer ACTION, y que adems tiene la ventaja de que no sera preciso disear un CGI, es enviar un e-mail (correo electrnico) a un usuario o a una lista de usuarios. Los datos enviados por el formulario, tendrn la forma que ya conocemos, pero una vez recibidos por esta va, pueden ser tratados con programas de edicin de texto, y convertidos al formato que se quiera. Se escribe:
<FORM METHOD="POST" ACTION="mailto:mi-usuario@miservidor-e-mail"> ...... </FORM>
Si no quieres complicarte la vida con descodificaciones (depende de lo que se vaya a hacer con los datos recibidos), el navegador puede remitirlos con un formato ms sencillo y ya descodificado. Para ello slo hay que aadir el parmetro ENCTYPE con el valor TEXT/PLAIN. Se escribe as:
<FORM METHOD="POST" ACTION="mailto:mi-usuario@miservidor-e-mail" ENCTYPE="TEXT/PLAIN"> ...... </FORM>
Resumiendo: sin poner ningun parmetro al elemento ACTION los datos te llegarn as: CAMPO1=Esto+es+una&CAMPO2=demostracion+de+formularios y poniendo ENCTYPE="TEXT/PLAIN" as: CAMPO1=Esto es una CAMPO2=demostracion de formularios Al igual que con el elemento <A> es posible hacer que el asunto (subject) del e-mail se reciba con el texto que quieras, pero omitiendo la parte correspondiente al cuerpo (body) del mismo, ya que en este caso el contenido del e-mail son los campos del formulario:
<FORM METHOD="POST" ACTION= "mailto:mi-usuario@miservidor-e-mail?&subject=asunto de prueba" ENCTYPE="TEXT/PLAIN"> ...... </FORM>
Esto funcionar siempre que en la mquina del cliente haya instalado algun programa que permita enviar correo electrnico, si no es as hay que recurrir a un programa CGI o de otro tipo en el servidor que se encargue de hacerlo. No es buena idea presuponer que todo el mundo tiene un cliente de correo instalado en su mquina.
El elemento INPUT
INPUT sin ningn atributo define por defecto una ventana de escritura de 20 caracteres de longitud por una lnea de ancho:
Se escribe:
<FORM> <INPUT> </FORM>
<INPUT> admite varios atributos: SIZE define la longitud de la ventana de texto.
MAXLENGTH define la mxima longitud de la cadena que se puede escribir dentro de la ventana. NAME define el nombre de la ventana (que en realidad es un campo dentro del registro, que en conjunto, es el formulario). Si escribes:
<FORM> <INPUT SIZE=10 MAXLENGTH=10 NAME="campo1"></FORM>
Como puedes comprobar, slo se pueden escribir 10 caracteres dentro de la ventana, que tambin es de longitud 10. No es obligatorio que concidan ambos valores, puedes definir la ventana al valor que quieras y la longitud de la cadena puede ser mayor o menor. VALUE sirve para que la ventana aparezca con un valor predeterminado, y no vaca como hace por defecto:
HOLA
Se escribe:
<FORM> <INPUT VALUE="HOLA"> </FORM>
El valor puede ser modificado o barrado por el usuario. READONLY Sirve para que el valor de la ventana, que contiene un valor predeterminado, no pueda ser modificado por el usuario.
HOLA
Se escribe:
<FORM> <INPUT VALUE="HOLA" READONLY> </FORM>
No funciona en versiones antiguas de los navegadores. TYPE=TEXT Es el valor por defecto de TYPE. Puede omitirse. TYPE=PASSWORD para que el valor predeterminado de la ventana est en formato oculto:
****
Se escribe:
<FORM> <INPUT TYPE="PASSWORD" VALUE="HOLA"> </FORM>
TYPE=HIDDEN define que el valor predeterminado de la ventana y la ventana misma estn en formato oculto: Se escribe:
<FORM> <INPUT TYPE="HIDDEN" VALUE="HOLA"> </FORM>
Esta opcin se utiliza cuando es necesario enviar un valor fijo al servidor, pero no se desea que el usuario intervenga o que lo vea. CUIDADO, esto no es un formato encriptado, viendo el documento fuente se puede saber el valor de la ventana. TYPE=SUBMIT para generar un botn que al ser pulsado cierra la captura de datos del formulario y procede a ejecutar lo definido en el atributo ACTION que ya conocemos. Se escribe:
<FORM METHOD="POST" ACTION="http://miserver.midominio.mipais/cgibin/test2-cgi"> <INPUT NAME="campo1"> <INPUT TYPE="SUBMIT" VALUE="Procesar"></FORM>
VALUE puede acompaar a SUBMIT , y en este caso sirve para definir el texto que queremos que tenga el botn en su interior. Si se omite, por defecto el visualizador le da el valor "Submit Query". Existe otro tipo llamado TYPE=BUTTON que genera un botn igual al generado por el tipo submit, pero que no realiza ninguna accin; es simplemente un botn "muerto" en cuanto a acciones directas. Suele utilizarse para asociarle instrucciones en JavaScript o VBScript mediante el evento onClick.
Se escribe:
<FORM METHOD="POST" ACTION="http://miserver.midominio.mipais/cgibin/test2-cgi"> <INPUT NAME="campo1"> <INPUT TYPE="BUTTON" VALUE="No hace nada"></FORM>
TYPE=RESET para generar un botn que al ser pulsado inicializa todos los componentes del formulario. Se escribe:
<FORM METHOD="POST" ACTION="http://miserver.midominio.mipais/cgibin/test2-cgi"> <INPUT NAME="campo1"> <INPUT TYPE="RESET" VALUE="Inicializar"></FORM>
VALUE puede acompaar a RESET , y en este caso sirve para definir el texto que queremos que tenga el botn en su interior. Si se omite, por defecto el visualizador le da el valor "Reset". TYPE=FILE Este es un nuevo tipo que slo funciona con Netscape 3.0 o superior, y sirve para enviar un fichero a una mquina remota (hacer FTP), pero no funciona solo, necesita de ciertos acompaantes que hacen su uso un poco ms complicado: Aqu hay que echar mano de un atributo parametrizado de <FORM>: ENCTYPE="multipart/form-data" para generar un botn que permitir buscar un fichero en nuestra mquina, ponerlo en una ventanita de entrada como las ya conocidas (por tanto tanbin se puede escribir directamente el nombre del fichero en lugar de buscarlo) y junto con un botn tipo submit enviar el fichero. Enviar el fichero:
Se escribe:
<FORM enctype="multipart/form-data" ACTION="ftp://miservidor/" METHOD="POST"> Enviar el fichero: <INPUT NAME="mifichero" TYPE="FILE"> <INPUT TYPE="SUBMIT" VALUE="Enviar fichero"></FORM>
el botn generado aparece con el texto "Browse.." y no sirve de nada aadirle el parmetro VALUE para darle otro nombre, como se puede hacer con el botn de tipo submit. En este ejemplo se hara una conexin al servicio FTP general de la mquina remota, pero se puede hacer a un directorio en particular de un usuario concreto. Slo habra que cambiar la lnea
ACTION="ftp://miservidor/" METHOD="POST">
y escribir:
ACTION="ftp://miusuario@miservidor/" METHOD="POST">
Otra forma ms directa de hacer un FTP en las dos direcciones, es desde la ventana "Location" del visualizador. La sintaxis de los parmetros de ACTION son vlidos en esa ventana. Por supuesto, todo esto si no tienes cuenta y permiso de escritura en la mquina remota, no sirve para nada... Como ya se ha dicho antes, el atributo ACTION es capaz de enviar el contenido del formulario por correo electrnico, pero no slo es capaz de enviar el formulario: tambin puede adjuntar al e-mail un fichero cualquiera. Lo nico que hay que hacer es aadirle un instruccin como la que acabamos de ver para el FTP. As:
<FORM enctype="multipart/form-data" ACTION="mailto:mi-usuario@miservidor-e-mail/" METHOD="POST"> Adjuntar el fichero: <INPUT NAME="mifichero" TYPE="FILE"> <INPUT TYPE="SUBMIT" VALUE="Adjuntar fichero"></FORM>
TYPE=IMAGE hace que el visualizador presente una imagen que es sensible al ratn. Lo que el formulario enva al servidor es un registro cuyos campos son el nombre definido para la imagen seguido de los parmetros .x=n .y=n donde n son los nmeros de las coordenas x y del punto en el que estaba el ratn en el momento del envo. Para presentar la imagen se utiliza el atributo SRC del elemento IMG. Este sera un ejemplo de respuesta:
imagen.x=99&imagen.y=15
Prueba a pulsar en cualquier parte de esta imagen:
Se escribe:
<FORM METHOD="POST" ACTION="http://miserver.midominio.mipais/cgibin/test2-cgi"> <INPUT TYPE=IMAGE NAME="imagen" SRC="sugeren.gif"> </FORM>
Los formularios que utilicen este tipo de recursos pueden prescindir del tipo SUBMIT, ya que el formulario se cierra con la imagen. TYPE=RADIO genera botones circulares que permiten seleccionar un valor predeterminado o activar una opcin Clase A Clase B Se escribe:
<FORM METHOD="POST" ACTION="http://miserver.midominio.mipais/cgibin/test2-cgi"> <INPUT TYPE="SUBMIT" VALUE="Procesar"> <INPUT TYPE="RESET" VALUE="Inicializar"> Clase A <INPUT TYPE="RADIO" NAME="clase" VALUE="A"> Clase B <INPUT TYPE="RADIO" NAME="clase" VALUE="B"></form>
En este ejemplo, los botones permiten seleccionar la clase A, la clase B o ninguna de las dos. Si se desea que por defecto un valor est seleccionado, por ejemplo clase B, hay que aadir el parmetro CHECKED despus del valor:
... VALUE="B" CHECKED></form>
TYPE=CHECKBOX genera casillas de marca que permiten seleccionar un valor predeterminado o activar una opcin Clase A Clase B Se escribe:
<FORM METHOD="POST" ACTION="http://miserver.midominio.mipais/cgibin/test2-cgi"> <INPUT TYPE="SUBMIT" VALUE="Procesar"> <INPUT TYPE="RESET" VALUE="Inicializar"> Clase A <INPUT TYPE="CHECKBOX" NAME="clase" VALUE="A"> Clase B <INPUT TYPE="CHECKBOX" NAME="clase" VALUE="B"></form>
En este ejemplo, las casillas de marca permiten seleccionar la clase A, la clase B, ninguna, o las dos. Si se desea que por defecto un valor est seleccionado, por ejemplo clase B, hay que aadir el parmetro CHECKED despus del valor:
... VALUE="B" CHECKED></form>
El elemento SELECT
SELECT sin ningn atributo define por defecto una lista desplegable de toda la pantalla de alto y una columna de ancho: Se escribe:
<FORM> <SELECT> </SELECT> </FORM>
Como evidentemente esto no es muy prctico, hay que parametrizar el elemento. En primer lugar se le da nombre, ya que ste es un campo ms del formulario, la diferencia es que no hay que escribir en l sino escoger un valor de los que nos muestre al desplegarlo, se usar el atributo NAME, y para entrar valores en la lista se usa el atributo OPTION. Se escribe:
<FORM METHOD="POST" ACTION="http://miserver.midominio.mipais/cgibin/test2-cgi"> <INPUT TYPE="SUBMIT" VALUE="Procesar">
<INPUT TYPE="RESET" VALUE="Inicializar"> <SELECT NAME="lista1"> <OPTION>Valor 1 <OPTION>Valor 2 <OPTION>Valor 3 </SELECT> </FORM>
Se deben tener en cuenta varias cosas respecto a SELECT: La longitud de la ventana de seleccin se autoajusta al valor ms largo de la lista. La ventana de seleccin, por defecto, muestra una lnea, si se quieren mostrar ms se utilizar el atributo SIZE. Se debe procurar que los contenidos de los campos sean lo ms cortos posibles; una excesiva longitud implica mayor trfico por la red, pero se deben construir las listas de forma clara, y que resulten de fcil lectura al usuario, lo que puede aumentar la longitud de los valores. Para enviar un valor diferente del que aparece en la lista, se utiliza el parmetro VALUE asociado al atributo OPTION. Prueba con el valor 5 de la siguiente lista: Se escribe:
<FORM METHOD="POST" ACTION="http://miserver.midominio.mipais/cgibin/test2-cgi"> <INPUT TYPE="SUBMIT" VALUE="Procesar"> <INPUT TYPE="RESET" VALUE="Inicializar"> <SELECT NAME="lista1" SIZE=3> <OPTION>Valor 1 <OPTION>Valor 2 <OPTION>Valor 3 <OPTION>Valor 4 <OPTION VALUE="Valor 5">Este es el Valor 5 <OPTION>Valor 6 <OPTION>Valor 7 </SELECT> </FORM>
Esto siginifica que cuando selecciones "Este es el valor 5" en realidad lo que se enva al servidor es "Valor 5". Con las listas desplegables es obligatorio seleccionar siempre un valor, y si no hay ninguno seleccionado, por defecto el visualizador enviar el primer valor de la lista. Se puede hacer que haya un valor preseleccionado aadiendo el parmetro SELECTED al atributo OPTION, y si se quiere permitir ms de una seleccin, se pondr el atributo MULTIPLE al elemento SELECT. Para seleccionar y deseleccionar hay que atenerse a las normas de Windows. Se escribe:
<FORM METHOD="POST" ACTION="http://miserver.midominio.mipais/cgibin/test2-cgi"> <INPUT TYPE="SUBMIT" VALUE="Procesar"> <INPUT TYPE="RESET" VALUE="Inicializar"> <SELECT NAME="lista1" MULTIPLE SIZE=3> <OPTION>Valor 1
<OPTION SELECTED>Valor 2 <OPTION>Valor 3 <OPTION>Valor 4 <OPTION>Valor 5 <OPTION>Valor 6 <OPTION>Valor 7 </SELECT> </FORM>
Puede ocurrir que interese agrupar los valores de la lista desplegable, a fin de que resulte ms fcil encontrar la opcin adecuada, sobre todo si la lista es larga. Para ello se puede utilizar el parmetro optgroup. Por ejemplo: Y se escribe:
<select name="coches"> <option selected value="0">Ninguno <optgroup label="Coches de lujo"> <option value="1">Rolls Royce <option value="2">Ferrari <option value="3">Mercedes </optgroup> <optgroup label="Coches normales"> <option value="4">Renault <option value="5">Peugeot <option value="6">Seat </optgroup> </select>
El elemento TEXTAREA
Este elemento, como su nombre indica, permite definir un rea de texto en la pantalla en la que podemos escribir cualquier cosa. Se debe escribir ya parametrizada en cuanto a dimensiones, con los atributos ROWS (lneas) y COLS (COLUMNAS). No tiene otros atributos o posibles variantes. Por supuesto, para que sea operativo, deber ir acompaado de los componentes necesarios para enviar e inicializar.
Se escribe:
<FORM METHOD="POST" ACTION="http://miserver.midominio.mipais/cgibin/test2-cgi"> <INPUT TYPE="SUBMIT" VALUE="Procesar"> <INPUT TYPE="RESET" VALUE="Inicializar"> <TEXTAREA NAME="texto1" ROWS=5 COLS=40 ></TEXTAREA> </FORM>
Aunque no es habitual, dentro de un rea de texto puede haber un contenido por defecto (que puede ser borrado o modificado por el usuario). Para ello simplemente se escribir el texto entre <TEXTAREA> y </TEXTAREA>. As:
<TEXTAREA NAME="texto1" ROWS=5 COLS=40>
Contenido del area de texto </TEXTAREA>
El tratamiento de los datos recibidos en el servidor desde los formularios requiere conocer la tabla de conversin hexadecimal que utilizan la mayora de visualizadores. Recuerda que las palabras en destino aparecen separadas por el signo +, y las letras acentuadas y otros caracteres, por valores hexadecimales precedidos del smbolo % Se puede proceder a la descodificacin en el programa CGI que recibe los datos, o bien definir macros en programas auxiliares que sern ejecutados despus. En el ndice encontrars la tabla de conversiones utilizada con el visualizador Netscape desde Windows.
Estilos en los formularios

En las ltimas versiones de los dos navegadores ms utilizados, pueden aplicarse cambios de estilo a los formularios, lo que permite una presentacin ms sofisticada. ATENCION: Hay que tener en cuenta que los estilos no estan estandarizados, y hay cosas que se ven bien en unos navegadores y no se ven en otros, y hay solo unos pocos efectos que se vean en todos ellos. En los elementos de formulario pueden redefinirse casi todos los parmetros: colores de fondo, tipo y anchura de bordes, color y tipo de letra del texto, altura y anchura del elemento, alineacin del texto dentro del elemento, etc. Por ejemplo:
Solo lectura
Se escribe as:
<FORM METHOD="GET" ACTION=""> <INPUT TYPE="text" STYLE="background:yellow;color:red" NAME="campo1"> <INPUT TYPE="text" STYLE="border:1;background:yellow;color:blue" readonly NAME="campo2" VALUE="Solo lectura"> <INPUT TYPE="button" STYLE="background:transparent;color:red" VALUE="Procesar"> </FORM>
Problemas de privacidad en los formularios
En las ltimas versiones del navegador Internet Explorer de Microsoft, ha aparecido una nueva prestacin consistente en memorizar los datos introducidos en cualquier formulario de uso habitual. En efecto, muchas veces se utilizan formularios para tareas repetitivas, en las que casi siempre hay que introducir los mismos datos. Esto nos puede ahorrar tener que escribir cada vez lo mismo, y Microsoft pens que sera buena idea facilitar la labor del usuario haciendo que el navegador guarde en una lista desplegable todos los datos que se van escribiendo en cada transaccin, de manera que cuando se accede a la pgina, cada campo de texto (<INPUT TYPE="text">) queda convertido en una lista desplegable (<SELECT>) cuyo contenido son los datos que se han introducido en ese mismo campo en ocasiones anteriores. Visto as suena incluso interesante.... a condicin de que el usuario sea siempre el mismo, claro. Porque, qu ocurre si el formulario est incluido en una pgina que es utilizada por numerosas personas en una sala comn con mquinas pblicas, como una sala de usuarios o un cibercaf? Pues que si el siguiente usuario se conecta a la misma pgina, puede ver los datos que escribi su antecesor en esa mquina. Para evitarlo, existe un parmetro, poco conocido en general, que debe incluirse en la definicin del formulario, y que no tiene ningn efecto en los navegadores que no tienen la costumbre de ser tan indiscretos. As: <FORM NAME="MI_FORMULARIO" METHOD="POST" AUTOMPLETE="OFF"> ... ... </FORM>
Orden de tabulacin en los formularios

De forma predeterminada, el orden de tabulacin es el mismo que el orden en que los elementos se han escrito. Puede darse el caso de que necesites que el orden de tabulacin de los elementos de un formulario no sea el mismo en el que estan escritos. Para ello se puede incluir en todos los elementos el parmetro TABINDEX=n donde n es el nmero de orden deseado de cada uno. Si se va a alterar el orden natural de tabulacin, conviene hacerlo con todos los elementos del formulario. En cualquier caso, el navegador hace dos grupos de tabulacin, los que tienen el parmetro TABINDEX y los que no. Seguir el orden de los valores y a continuacin pasar a los que no tengan numeracin, siguiendo el orden de escritura. He aqu un ejemplo de la sintaxis: <FORM NAME="MI_FORMULARIO" METHOD="POST"> <INPUT TYPE="text" NAME="Campo1" TABINDEX=2> <INPUT TYPE="text" NAME="Campo2" TABINDEX=1> </FORM> En este caso, "Campo2" sera el primero en recibir el cursor. Todo esto slo funciona con navegadores de versiones recientes.
Desactivar elementos en los formularios

Con casi todos los navegadores modernos se pueden bloquear los elementos que forman un formulario, todos o algunos de ellos. Y puede que te preguntes qu inters tiene bloquear un formulario. Puede ser necesario en aplicaciones dinmicas en las que interese bloquear partes del formulario segn el usuario cumplimente unos opciones u otras. Para ello se utiliza el parmetro DISABLED. Este parmetro es accesible desde JavaScript y VBScript. Se escribe: <FORM NAME="MI_FORMULARIO" METHOD="POST"> <INPUT TYPE="text" NAME="Campo1" VALUE="Control desactivado" DISABLED> <INPUT TYPE="text" NAME="Campo2"> </FORM> Se puede aplicar a cualquier objeto contenido en el formulario. Este sera el resultado:
Control desac
Como puedes ver, el efecto es parecido al que se consigue con la opcin de estilo readonly, pero con DISABLED se impide incluso el que se pueda seleccionar el contenido del control (no se produce el evento onFocus) y con readonly no.
Ejemplos de formularios
Juego de botones direccionados a pginas LOCALES. Esto slo funciona abriendo la pgina como file:/// no como servicio http://.
<TABLE> <TR> <TD> <FORM METHOD="GET" ACTION="indice.htm"> <INPUT TYPE="SUBMIT" VALUE="Indice"> </FORM> </TD> <TD> <FORM METHOD="GET" ACTION="notas.htm"> <INPUT TYPE="SUBMIT" VALUE="Notas"> </FORM> </TD> <TD> <FORM METHOD="GET" ACTION="como.htm"> <INPUT TYPE="SUBMIT" VALUE="Cmo funciona?"> </FORM> </TD> </TR> </TABLE>
Juego de botones direccionados a pginas REMOTAS. Puede funcionar abriendo la pgina como servicio http:// o como file:///. pero deber utilizarse METHOD=GET en lugar de METHOD=POST.
<TABLE> <TR> <TD> <FORM METHOD="GET" ACTION="http://sestud.uv.es/manual.esp/indice.htm"> <INPUT TYPE="SUBMIT" VALUE="Indice"> </FORM> </TD> <TD> <FORM METHOD="GET" ACTION="http://sestud.uv.es/manual.esp/notas.htm"> <INPUT TYPE="SUBMIT" VALUE="Notas"> </FORM> </TD> <TD> <FORM METHOD="GET" ACTION="http://sestud.uv.es/manual.esp/como.htm"> <INPUT TYPE="SUBMIT" VALUE="Cmo funciona?"> </FORM> </TD> </TR> </TABLE>
1 campo vaco. Longitud no limitada. 1 campo vaco. Longitud limitada a 10

<FORM METHOD="POST" ACTION="http://miservidor/cgi-bin/test2-cgi"> <INPUT NAME="campo1"> <INPUT NAME="campo2" SIZE=10 MAXLENGTH=10> <P> <INPUT TYPE="submit" VALUE="Procesar"> <INPUT TYPE="reset" VALUE="Inicializar"></FORM>
1 campo vaco. Longitud no limitada. 1 campo con contenido visible. 1 campo con contenido oculto
TEXTO VISIBL ************
<form method="POST" action="http://miservidor/cgi-bin/test2-cgi"> <input name="campo1"> <input name="campo2" VALUE="TEXTO VISIBLE"> <input type="password" name="campo3" VALUE="TEXTO OCULTO"> <P> <input type="submit" value="Procesar"> <input type="reset" value="Inicializar"></form>
1 campo vaco. Longitud sin limitar. 1 campo vaco. Longitud limitada a 10. 2 botones de seleccin.
Clase A
Clase B
<FORM METHOD="POST" ACTION="http://miservidor/cgi-bin/test2-cgi"> <INPUT NAME="campo1"> <INPUT NAME="campo2" SIZE=10 MAXLENGTH=10> <P> Clase A <INPUT TYPE="RADIO" NAME="clase" VALUE="A"> Clase B <INPUT TYPE="RADIO" NAME="clase" VALUE="B"> <P> <INPUT TYPE="SUBMIT" VALUE="Procesar"> <INPUT TYPE="RESET" VALUE="Inicializar"> </form>
1 campo vaco. Longitud sin limitar. 1 campo vacio. Longitud limitada a 10. 2 botones seleccin 2 casillas seleccin
Clase A Tipo 1
Clase B Tipo 2
<FORM METHOD="POST" ACTION="http://miservidor/cgi-bin/test2-cgi"> <INPUT NAME="campo1"> <INPUT NAME="campo2" SIZE=10 MAXLENGTH=10> <P> Clase A <INPUT TYPE="RADIO" NAME="clase" VALUE="A"> Clase B <INPUT TYPE="RADIO" NAME="clase" VALUE="B"> <P> Tipo 1 <INPUT TYPE="CHECKBOX" NAME="tipo" VALUE="1"> Tipo 2 <INPUT TYPE="CHECKBOX" NAME="tipo" VALUE="2"> <P> <INPUT TYPE="SUBMIT" VALUE="Procesar"> <INPUT TYPE="RESET" VALUE="Inicializar"> </form>
1 lista desplegable de 3 valores. 1 visible

<FORM METHOD="POST" ACTION="http://miservidor/cgi-bin/test2-cgi"> <INPUT TYPE="SUBMIT" VALUE="Procesar"> <INPUT TYPE="RESET" VALUE="Inicializar"> <SELECT NAME="lista1"> <OPTION>Valor 1 <OPTION>Valor 2 <OPTION>Valor 3 </SELECT> </FORM>
1 lista desplegable de 5 valores. 3 visibles.

<FORM METHOD="POST" ACTION="http://miservidor/cgi-bin/test2-cgi"> <SELECT NAME="lista1" SIZE=3> <OPTION>Valor 1 <OPTION>Valor 2 <OPTION>Valor 3
<OPTION>Valor 4 <OPTION>Valor 5 </SELECT> <P> <INPUT TYPE="SUBMIT" VALUE="Procesar"> <INPUT TYPE="RESET" VALUE="Inicializar"> </FORM>
1 Ventana de texto de 5x40
<FORM METHOD="POST" ACTION="http://miservidor/cgi-bin/test2-cgi"> <TEXTAREA NAME="texto1" ROWS=5 COLS=40 ></TEXTAREA> <P> <INPUT TYPE="SUBMIT" VALUE="Procesar"> <INPUT TYPE="RESET" VALUE="Inicializar"> </FORM>
Un tpico y complejo formulario Nombre: Apellidos: Calle y nmero: Cdigo Postal: Provincia: Opcin: Comentarios personales: Pulse aqu:
<FORM ACTION="http://miserver.midominio.mipais/cgi-bin/test2-cgi" METHOD=POST> <CENTER> <TABLE BORDER> <TR> <TD>Nombre:</TD> <TD> <INPUT TYPE="text" NAME="nombre" SIZE=18 MAXLENGTH=18> F.Nac.: <INPUT TYPE="text" NAME="edad" SIZE=8 MAXLENGTH=8> DNI: <INPUT TYPE="text" NAME="dni" SIZE=8 MAXLENGTH=8></TD> <TR> <TD>Apellidos:</TD> <TD> <INPUT TYPE="text" NAME="apellidos" SIZE=48 MAXLENGTH=48></TD> <TR> <TD>Calle y nmero:</TD> <TD> <INPUT TYPE="text" NAME="domicilio" SIZE=48 MAXLENGTH=48></TD>
F.Nac.:
DNI:
Ciudad: Telfono: Escoja una opcin
<TR> <TD>Cdigo Postal:</TD> <TD> <INPUT TYPE="text" NAME="postal" SIZE=5 MAXLENGTH=5>Ciudad: <INPUT TYPE="text" NAME="localidad" SIZE=36 MAXLENGTH=36></TD> <TR> <TD>Provincia: </TD> <TD> <INPUT TYPE="text" NAME="provincia" SIZE=20 MAXLENGTH=20> Telfono: <INPUT TYPE="text" NAME="telefono" SIZE=19 MAXLENGTH=19></TD> <TR> <TD>Opcin:</TD> <TD> <SELECT NAME="OPCION"> <OPTION>OPCION 1 <OPTION>OPCION 2 <OPTION>OPCION 3 <OPTION>OPCION 4 <OPTION>OPCION 5 </SELECT>Escoja una opcin</TD> <TR> <TD>Comentarios<BR> personales:</TD> <TD> <TEXTAREA NAME="coment" ROWS=2 COLS=48></TEXTAREA></TD> <TR> <TD><B>Pulse aqu:</B></TD> <TD ALIGN=CENTER> <INPUT TYPE="submit" VALUE="Enviar datos "> <INPUT TYPE="reset" VALUE="Borrar los datos"></TD> </TABLE> </CENTER> </FORM>
Qu son los frames

Los frames (en ingls frame = cuadro, bastidor o marco) es un elemento implementado por Netscape, que permite dividir la pantalla en varias reas independientes unas de otras, y por tanto con contenidos distintos, aunque puedan estar relacionados. No hay lmites para el contenido de cada una de estas reas: tienen las mismas propiedades que la pantalla completa normal, tal y como la conocemos. No hay que confundir los frames con las tablas. Su apariencia, a veces, puede ser similar, pero mientras el contenido de la celda de una tabla es fijo, en un rea de pantalla creado por el elemento FRAME se dispone de todos los recursos del HTML. Es una zona viva.
Las pginas que contienen una definicin de FRAME no pueden contener el elemento BODY ni ninguno de los elementos que habitualmente aparecen en el BODY antes del elemento FRAMESET que es el que define la creacin del FRAME. Si esto no se cumple, el FRAME ser ignorado.
Algunos visualizadores no soportan los frames. Para que nuestra pgina con frames no resulte opaca a ellos, se utilizar el elemento NOFRAMES que permite ofrecer un texto alternativo en entorno normal. Los frames permiten una flexibilidad de presentacin extraordinaria, y para contenidos muy complejos, de difcil estructura por los medios convencionales del HTML, son casi insustituibles. De nuevo se presenta la duda de para qu visualizador es preferible programar nuestro WWW. Por supuesto, los frames son parametrizables en cuanto a tamao y nmero de reas, si stas se pueden redimensionar por el usuario o son fijas, si tienen o no barras de scrolling, se pueden anidar, relacionar sus contenidos, etc. Veamos algunos ejemplos prcticos y su sintaxis:
Un frame bsico. Sintaxis general En general, todas las pginas que contengan definiciones de frames, se comportan como si fuesen llamadores o "lanzaderas", y debern ser ms o menos as:
<HTML> <HEAD><TITLE> Mi titulo ></TITLE></HEAD> <FRAMESET> <NOFRAMES> <BODY> Su visualizador no soporta frames. Pulse <A HREF="indice.htm">aqui </A> para volver. </BODY> </NOFRAMES> <FRAME SRC="pagina1.htm" > <FRAME SRC="pagina2.htm" > </FRAMESET> </HTML>
Fjate en que no aparece el elemento <BODY> en su posicin habitual, sino dentro de un elemento especial que se activa slo cuando el visualizador no soporta los frames: NOFRAMES. Si no declaras el rea NOFRAMES y el visualizador no soporta este efecto, no se ver nada. Obviamente, los visualizadores que s soportan frames ignorarn el contenido del rea NOFRAMES.
Hasta aqu ya podemos hacernos una idea de cmo funcionan los frames: Lo primero es crear una minipgina con la definicin del frame, viene a ser algo as como una "lanzadera" y slo contiene la definicin del frame. Y por ltimo, crear las pginas que constituirn el contenido de cada una de las reas definidas en la "lanzadera". En el ejemplo anterior son pagina1.htm y pagina2.htm, y aqu es donde escribirs tus cosas; es decir que son pginas completamente normales, y que tambin pueden ser utilizadas de la forma habitual. A su vez, la "lanzadera" puede ser invocada con un link desde cualquier pgina normal. Como puedes ver, no es obligado crear todo tu documento con frames: puedes utilizarlos solamente all donde sea necesario, si quieres.
Es posible definir cualquier combinacin de reas verticales y horizontales. La clave est en combinar adecuadamente los anidamientos del elemento <FRAMESET> con sus atributos COLS o ROWS segn interese. Como puedes ver, el ms importante es el primer <FRAMESET>, ya que es el que define cmo va a ser "troceada" la pgina inicialmente, si en porciones verticales u horizontales, y sobre esta base se debern definir todos los dems anidamientos.
Un frame de 3 reas verticales (COLS) Se vera as: Y se escribira; as:

<FRAMESET COLS=30%,20%,50%> <FRAME SRC="a.htm"> <FRAME SRC="b.htm"> <FRAME SRC="c.htm"> </FRAMESET> Ejemplo real
Un frame de 3 reas horizontales (ROWS) Se vera as: Y se escribira as: A B C

<FRAMESET ROWS=25%,25%,50%> <FRAME SRC="a.htm"> <FRAME SRC="b.htm"> <FRAME SRC="c.htm"> </FRAMESET> Ejemplo real
Un frame combinado de un rea vertical y dos horizontales Se vera as: Y se escribira as:
<FRAMESET COLS=20%,*> <FRAME SRC="a.htm"> <FRAMESET ROWS=40%,*> <FRAME SRC="b.htm"> <FRAME SRC="c.htm"> </FRAMESET> </FRAMESET> Ejemplo real
B C
Un frame combinado de dos reas horizontales, la de abajo dividida en dos verticales Se vera as: Y se escribira as:
<FRAMESET ROWS=50%,*> <FRAME SRC="a.htm"> <FRAMESET COLS=50%,*> <FRAME SRC="b.htm"> <FRAME SRC="c.htm"> </FRAMESET> </FRAMESET> Ejemplo real
A B C
Habrs podido comprobar que los parmetros que dimensionan los frames actuan al presentar la pgina inicialmente. Despus, si el usuario lo desea, puede redimensionarlos como quiera. Esta es la opcin por defecto. Si no se quiere permitir el redimensionado, se aplica el atributo NORESIZE al elemento FRAME. As:
<FRAME NORESIZE SRC.....>
Algo parecido ocurre con las barras de scrolling. Estn regidas por el atributo SCROLLING, que puede valer YES NO o AUTO. Por defecto es AUTO. Con esta opcin el visualizador decide, en funcin del contenido, si son necesarias las barras o no. Con YES las pondr siempre, aunque no sean necesarias, y con NO no las pondr nunca, aunque sean necesarias.
<FRAME SCROLLING=YES ....>
Un frame con dos reas verticales. Una normal, la otra con mrgenes forzados para el texto (MARGINWIDTH MARGINHEIGHT) Se vera as: Y se escribira as:
<FRAMESET COLS=50%,50%> <FRAME SRC="a.htm"> <FRAME SRC="a.htm" MARGINWIDTH=50 MARGINHEIGHT=50> </FRAMESET> Ejemplo real
AAAA
AA AA
Un frame con referencias cruzadas (NAME TARGET) Se vera as: Y se escribira as: A B
<FRAMESET COLS=50%,50%> <FRAME SRC="aa.htm">
<FRAME SRC="bb.htm" NAME="VENTANA"> </FRAMESET> Ejemplo real
Esto de los cruces es un poco complicado... fjate en el contenido de cada pgina que entra en juego. Cuando actives Ejemplo real el fichero llamado es cruzado.htm. Prubalo. Fichero Contenido <A HREF="cc.htm" TARGET="VENTANA"> <A HREF="cc.htm"> bb.htm Esto es "VENTANA" <A HREF="bb.htm" TARGET="VENTANA"> <A HREF="aa.htm"> <FRAMESET> <FRAME SRC="aa.htm"> cruzado.htm <FRAME SRC="bb.htm" NAME="VENTANA"> </FRAMESET> Accin Pone CC en el frame derecho Trae CC No hace nada Pone BB en el frame derecho porque se llama "VENTANA" Trae AA Pone AA en el frame izqdo. Pone BB en el frame derecho y le da como nombre "VENTANA" -
aa.htm
cc.htm
Hasta aqui se ha utilizado el nombre de "VENTANA" como destino del atributo TARGET. Este nombre, como ya sabes, es el que hemos definido en el cdigo de este ejemplo. Si en lugar de poner el nombre de destino que se ha definido en el FRAMESET, pones otro cualquiera, el visualizador lo que hace es abrir otra ventana y colocar alli el contenido de la pagina. Evidentemente, cuantas mas ejecuciones del navegador haya en marcha, mas memoria del ordenador se necesita, y abrir una nueva ventana, implica ejecutar otra vez el navegador. Recuerda cuando hagas esto, que algunos no andan muy sobrados de memoria....
La versin 3.0 de Netscape, implementa dos nuevas posibilidades de los frames: la de darle color a la barra de separacin de los distintos frames o la de que no se vea dicha barra. Para ello se utilizan los nuevos atributos de FRAMESET y FRAME:
FRAMEBORDER se utiliza como atributo de FRAMESET y establece si sern visibles los bordes del frame o no. Puede tener dos valores: YES (por defecto) y NO. Si escribes:
<FRAMESET FRAMEBORDER=NO COLS=30%,30%,30%> <FRAME SRC="a.htm"> <FRAME SRC="b.htm"> <FRAME SRC="c.htm"> </FRAMESET>
Se obtiene un frame de tres columnas sin barras de separacin entre ellas. Ejemplo real
BORDERCOLOR se utiliza como atributo de FRAME y establece el color de los bordes visibles. Evidentemente, para que funcione, se tendr que haber establecido FRAMEBORDER=yes Si escribes:
<FRAMESET COLS=30%,30%,30%> <FRAME BORDERCOLOR="red" SRC="a.htm"> <FRAME BORDERCOLOR="blue"SRC="b.htm"> <FRAME SRC="c.htm"> </FRAMESET>
Se obtiene un frame de tres columnas con la primera barra de separacin roja y la segunda azul. Ejemplo real
Salir de una pantalla con frames
Para salir de una pantalla compuesta de frames es necesario definir algun link. En efecto, si estamos en una pantalla con, por ejemplo, dos frames, cualquier link invocado desde cualquiera de ellos, hace que la pgina llamada aparezca en ese mismo frame. Para volver a una pantalla "normal" sin frames, se puede escribir un link con la sintaxis siguiente:
<A HREF="indice.htm" TARGET="_parent">Ver ndice sin marcos </A>
El destino "_parent" indica que presente la pgina llamada por el link en el navegador que se esta ejecutando, sin marcos y sin abrir nuevas ocurrencias del navegador.
Existen otros valores predeterminados para el atributo TARGET: _blank que abre una nueva ventana del navegador, _self que llama el destino del enlace a la misma ventana en que se est (valor por defecto), y _top que funciona igual que _parent.
Controlar el contenido de los frames con formularios Hasta aqu hemos visto cmo hacer que los frames reciban sus contenidos siempre mediante links. No es la nica forma; tambin pueden utilizarse formularios para esta tarea. Los formularios, adems, nos pueden permitir definir ciertas selecciones previas para que el contenido invocado reuna determinados requisitos, as como elegir el frame de destino. Lo
malo de esta tcnica es que requiere escribir algo de JavaScript, lo que complica bastante la cosa. Veamos un ejemplo de pgina con cuatro frames. Por ejemplo, como este: Y se escribira as:
<FRAMESET ROWS=30%,*> <FRAME SRC="fraarriba.htm" NAME="arriba"> <FRAMESET COLS=33%,33%,*> <FRAME SRC="a.htm" NAME="izquierda"> <FRAME SRC="b.htm" NAME="centro"> <FRAME SRC="c.htm" NAME="derecha"> </FRAMESET> </FRAMESET> Ejemplo real
Arriba A B C
Puesto que se va a poder elegir el frame de destino, es importante que todos ellos tengan nombre. Este es el cdigo del frame arriba, que reside en la pgina que carga: fraarriba.htm
<HTML> <HEAD><TITLE>Frames y formularios</TITLE></HEAD> <BODY> <CENTER><H2>FRAMES Y FORMULARIOS</H2></CENTER> <TABLE BORDER=0 WIDTH="100%"><TR> <TD ALIGN=CENTER> <FORM> <SELECT NAME="list"> <OPTION VALUE="a.htm" >Contenido A <OPTION VALUE="b.htm" >Contenido B <OPTION VALUE="c.htm" >Contenido C </SELECT> <BR> <INPUT TYPE=button VALUE="Frame izquierdo" onClick= "parent.izquierda.location.href= this.form.list.options[this.form.list.selectedIndex].value"> </FORM> </TD> <TD ALIGN=CENTER> <FORM> <SELECT NAME="list"> <OPTION VALUE="a.htm" >Contenido A <OPTION VALUE="b.htm" >Contenido B <OPTION VALUE="c.htm" >Contenido C </SELECT> <BR> <INPUT TYPE=button VALUE="Frame central" onClick= "parent.centro.location.href= this.form.list.options[this.form.list.selectedIndex].value"> </FORM> </TD>
<TD ALIGN=CENTER> <FORM> <SELECT NAME="list"> <OPTION VALUE="a.htm" >Contenido A <OPTION VALUE="b.htm" >Contenido B <OPTION VALUE="c.htm" >Contenido C </SELECT> <BR> <INPUT TYPE=button VALUE="Frame derecho" onClick= "parent.derecha.location.href= this.form.list.options[this.form.list.selectedIndex].value"> </FORM> </TD></TR> </TABLE> </BODY> </HTML>
Como puedes ver, todo reside en el cdigo JavaScript que se ejecuta al pulsar el botn de cualquiera de los tres formularios definidos en el frame arriba. Mediante este cdigo se captura un evento: onClick que se produce al pulsar con el puntero del ratn en el botn del formulario. La primera parte de la instruccin ejecutada: parent.derecha.location.href= es la que establece en qu frame se va a cargar la pgina seleccionada en la lista desplegable, en este caso el llamado derecha. La segunda parte de la instruccin: this.form.list.options[this.form.list.selectedIndex].value es la que indica qu pgina hay que cargar en el frame definido en la primera parte de la instruccin. Si... esto suena a muy complicado. No es fcil entender la compleja estructura de objetos del navegador. Para ms detalle, puedes ver la seccin sobre JavaScript, en particular, y toda la seccin de programacin en general, de esta guia.
Otra cosa que hay que tener en cuenta cuando se escribe JavaScript, es que distingue entre maysculas y minsculas. En el ejemplo anterior, si los ficheros llamados por el formulario: a.htm b.htm c.htm se han guardado con el nombre en maysculas, como A.htm o B.htm, no funcionar si no se invocan escritos de la misma forma. Esto es especialmente importante cuando tengas tus pginas en servidores con sistemas operativos UNIX o LINUX, que son la mayora de ellos.
Frames incrustados Se puede insertar un frame en cualquier punto de una pgina, ya sea sta, a su vez, un frame o una pgina normal. Su apariencia recuerda a los grficos y a los formularios, pero su contenido es el de una pgina independiente. Por ejemplo, si se escribe:
<IFRAME NAME="indice" SRC="indice.htm" WIDTH="300" HEIGHT="100" FRAMEBORDER="1" MARGINWIDTH="5" MARGINHEIGHT="5" SCROLLING="Auto"></IFRAME>
Y este sera el resultado:
Analicemos sus atributos:

NAME Como ya habrs supuesto, es el nombre del frame incrustado. Puede omitirse si no es necesario. SRC Nombre de la pgina que se mostrar en el frame. WIDTH Nmero de pixels que tendr el frame de ancho. Tambin puede indicarse en tanto por ciento respecto al ancho total de la ventana, como se hace en los frames convencionales. HEIGHT Nmero de pixels que tendr el frame de alto. Tambin puede indicarse en tanto por ciento respecto al alto total de la ventana. FRAMEBORDER Indica si se debe mostrar el borde del frame. 1 = si (por defecto) 0 = no. MARGINWIDTH Indica el nmero de pixels que tendr el ancho de los mrgenes interiores izquierdo y derecho del frame respecto a su contenido. MARGINHEIGHT Indica el nmero de pixels que tendr el ancho de los mrgenes interiores superior e inferior del frame respecto a su contenido. SCROLLING Indica si hay que mostrar barras de scroll dentro del frame incrustado. Sus valores pueden ser: Yes, No y Auto (por defecto).
Pginas con ficheros multimedia (audio/video) y otros objetos

Pueden utilizarse indistintamente ficheros muultimedia con las extensiones .wav, .aiff, .au, .mid, .mp3, .mpg, .mpeg, .avi, .wmv, .rm, etc., etc. Los navegadores no admiten directamente ningn tipo de formato multimedia por defecto, y es necesario cargar un plugin, que el cliente tendr que buscar e instalar.
Un plugin es un pequeo programa que har las veces de conector entre el navegador y el fichero multimedia, es decir, que dotar al navegador de una cierta capacidad que de serie no tiene. Los plugins no solamente son necesarios para reproducir los ficheros multimedia, sino tambin para poder cargar cualquier otro tipo de fichero que no sea HTML, que es el nico formato que realmente entienden los navegadores. Casi todos los navegadores precisarn de un plugin para reproducir cualquier tipo de formato (multimedia o no), excepto el Internet Explorer que echa mano de los ActiveX propios de los sistemas operativos Windows. El primer elemento disponible en HTML para los ficheros multimedia fue <EMBED>. Este elemento, que en realidad nunca lleg a estar incluido oficialmente en el lenguaje por la w3c, todava funciona en todos los navegadores modernos, pero presenta algunos problemas, que al no estar sujeto a estandarizacin alguna, ha provocado que cada navegador interprete a su manera las cosas. No est en la especificacin del nuevo XHTML, que recomienda el uso del elemento <OBJECT> para estos menesteres. <EMBED> cuenta con un buen nmero de atributos: SRC, AUTOSTART, LOOP, STARTTIME, ENDTIME, VOLUME, WIDTH, HEIGHT, ALIGN, CONTROLS y HIDDEN.
SRC Indica dnde est el fichero a reproducir, pero no puede utilizarse solo, necesita la compaa de otros atributos del elemento, concretamente los que definen el tamao de la consola (que es un icono parecido al teclado que tiene un casette pequeo): WIDTH (largo) y HEIGHT (alto) Otro atributo de EMBED es AUTOSTART con dos posibles valores: FALSE (por defecto) y TRUE, y como ya habrs deducido, TRUE hace que comience la reproduccin inmediatamente despus de cargar la pgina, y sin necesidad de pulsar el botn "start" de la consola. El siguiente atributo a analizar es HIDDEN que slo tiene un valor: TRUE, y hace invisible la consola, pero evidentemente, si es invisible no puedes activar el sonido, y por tanto lo hace l mismo, siempre que no hayas puesto AUTOSTART=FALSE, claro. Un atributo de repeticin no poda faltar, y lo tenemos en LOOP y sus tres posibles valores: FALSE (por defecto), TRUE que fuerza a la repeticin sin fin de la audicin, e INTEGER donde INTEGER es el nmero de veces que deseas que se repita la audicin. No es obligado comenzar una audicin por el principio del fichero. Imagnate que tienes una serie de instrucciones habladas, y quieres dar la oportuna en cada momento, no todas de golpe. Para esto tenemos los atributos STARTTIME=mm:ss y ENDTIME=mm:ss donde mm son los minutos y ss los segundos del punto de comienzo o fin de la audicin. Cuidado: los valores hay que darlos con dos dgitos: Por ltimo tenemos el atributo ALIGN y sus valores TOP, BOTTOM, CENTER, LEFT, RIGHT, MIDDLE y TEXTTOP que funcionan igual que sus respectivos del elemento IMG, es decir, que no tiene efectos sobre el sonido o el vdeo, sino sobre la imagen de la consola y su alineacin con el texto de la pgina. He aqu un breve ejemplo con los atributos bsicos:
<EMBED SRC="minueto.mid" WIDTH=160 HEIGHT=70 AUTOSTART="FALSE">
Funciona bien con todos los navegadores, excepto con Opera.
El elemento <OBJECT> </OBJECT> Este nuevo elemento pretende evitar la necesidad de continuar creando elementos fijos cada vez que aparece un nuevo formato de ficheros, como ocurri, por ejemplo, con los multimedia y EMBED. En efecto, puesto que EMBED no ha resuelto las diferencias entre navegadores a la hora de cargar los distintos formatos, el XHTML ha implementado un elemento que puede incluir todos los parmetros que el formato a cargar precise, pero no con parmetros fijos como hasta ahora, sino "a la medida" de cada uno y tratndolos como objetos independientes. Como "objeto" se entender cualquier fichero externo, incluso HTML, que deba mostrarse en la pgina.
En el nuevo XHTML se ha eliminado el elemento iframe que era utilizado para insertar una ventana con contenido independiente al de la pgina que la soporta. Por ejemplo:
<IFRAME id="indice" SRC="indice.htm" WIDTH="600" HEIGHT="150" FRAMEBORDER="1" MARGINWIDTH="5" MARGINHEIGHT="5" SCROLLING="Auto"></IFRAME>

Y esta es la forma de sustituirlo:
<object id="indice" type="text/html" data="indice.htm" style="width:500; height:200px;"> <p>Texto alternativo, si la pgina no es encontrada</p>
</object> Y para un grfico sustituyendo a <IMG>: <object data="sugeren.gif" type="image/gif"> <p>Contenido alternativo, si el grfico no es encontrado</p></object> Dependiendo del tipo de fichero a tratar, no todos los navegadores funcionan correctamente con OBJECT. Los ms conocidos, como Firefox, IE, Opera, Chrome o Safari, en general, con los tipos de fichero ms habituales, suelen funcionar bastante bien si se afina la parametrizacin (<param name="valor">). Puede no resultar fcil encontrar plugins para algunos tipos de fichero. Y por supuesto, los parmetros necesarios pueden no ser los mismos para todos los navegadores. En el siguiente ejemplo se muestra el cdigo mnimo necesario para reproducir un fichero .mp3 y que generalmente, con todos los navegadores excepto el IE, solicitar al cliente que instale el plugin de QuickTime si no lo tiene ya: <object data="test.mp3" type="audio/x-mp3" height="50" width="300" > <param name="src" value="test.mp3" />
<param name="autostart" value="0" /> </object>
En la sintaxis de este elemento son clave los dos primeros atributos de la primera lnea: data indica la ruta del fichero a cargar (pueden ser tanto rutas relativas como absolutas). type indica al navegador el tipo de contenido del fichero, o lo que es igual el MIME type del que ya se ha hablado en otra seccin de esta gua. Segn el MIME declarado, el navegador cargar los recursos del sistema que tenga disponibles para reproducir correctamente el fichero. En general todos los navegadores mostrarn la consola del QuickTime y el IE la del Media Player. Es importante la eleccin del valor de type ya que eso definir que el navegador tenga que buscar un plugin o no. Por ejemplo, si en lugar de definirlo como est, con audio/x-mp3 (que parece el ms natural, dado el tipo de fichero) se define
como type="application/x-mplayer2" todos los navegadores presentarn la consola del Media Player sin necesidad de buscar nada. Parece la solucin ideal, pero si el cliente no se conecta desde una mquina Windows, no funcionar, ya que el Media Player es exclusivo de este sistema operativo. veamos un ejemplo para reproducir un fichero mp3:
<object height="80" width="300"type="application/x-mplayer2" data="test.mp3"> <param name="src" value="test.mp3" /> <param name="controller" value="false" /> <param name="autostart" value="0"> </object>
Tambin se puede utilizar para reproducir un video:

<object height="300" width="350"type="application/x-mplayer2" data="colon.avi"> <param name="src" value="colon.avi" /> <param name="controller" value="false" /> <param name="autostart" value="0"> </object>
Este ltimo no funciona bien con Opera. Hasta aqu hemos visto cmo presentar un fichero multimedia con el Media Player de Windows, pero solo uno. En efecto, qu hacer si tenemos un fichero de gran tamao troceado en varias partes? O simplemente, varios ficheros relacionados aunque no formen parte de uno solo. Si el nmero de partes es relativamente elevado, puede ser muy cargante presentarlos todos de la forma que ya conocemos, y lo que es peor, puede suceder que el navegador se cuelgue.
Existe una forma de acceder a una lista de ficheros multimedia utilizando el Media Player. Es decir, que escribiendo solamente una definicin de consola se puede ver o escuchar una serie de ficheros; hablamos de los ficheros .asx La particularidad reside en la extensin del fichero multimedia. No, no es un nuevo tipo de video super comprimido, es simplemente un fichero de texto, editado con cualquier editor, como el bloc de notas, que contiene la referencia a los ficheros que se desea encadenar. Por ejemplo, para encadenar dos pequeos ficheros multimedia de formato .mid se escribe:
Fichero lista.asx <ASX version = "3.0"> <ENTRY><REF HREF="minueto.mid"/></ENTRY> <ENTRY><REF HREF="adagio.mid"/></ENTRY> </ASX>
ATENCION: Todas las lneas de los ficheros .asx deben comenzar justo junto al margen izquierdo, sin ningun espacio en blanco.
El cdigo para mostrar la consola es el ya conocido, solamente cambia el fichero a reproducir, que puede incluir ficheros de distintos tipos:
<object height="300" width="350"type="application/x-mplayer2" data="lista.asx"> <param name="src" value="lista.asx" /> <param name="controller" value="false" /> <param name="autostart" value="0"> </object>
Un plugin universal?
Hay que tener en cuenta que para que un determinado fichero multimedia, por ejemplo un pequeo mp3, pueda oirse en tu pgina (oirse, no descargarse) intervendr una cadena de elementos compuesta por el sistema operativo de la mquina (SO), el navegador y los plugins que haya cargados, si es que hay alguno. Y puede que te preguntes por qu tantos eslabones para algo tan simple. Del primero, del SO, depender que por defecto haya herramientas ya instaladas que permitan reproducir el fichero, lo que evitara la necesidad de un plugin. Del segundo, el navegador, depender que por defecto sea capaz de reproducir el fichero o en su defecto, llamar al recurso de sistema necesario para ello. Y por fin, si todo lo anterior falla, el navegador deber tener
cargado el plugin necesario, que no olvidemos que para cada navegador ser diferente, an cuando el fichero a reproducir sea el mismo. Y cmo programar la pgina para asegurarnos que el mayor nmero posible de visitantes pueda oir nuestro fichero sin necesidad de hacer nada? Pues no es nada fcil. Lo ideal sera disponer de algo que sepamos de antemano que tienen instalado la mayora de mquinas en el mundo, es decir, un plugin casi universal. Y este es sin duda, y hasta que aparezca algo mejor, el plugin de Flash Player, que segn las ltimas encuestas tienen ms del 95% de las mquinas del mundo, independientemente de su sistema operativo. Cierto es tambin que el nmero de mquinas con sistemas operativos Windows es casi igual, lo que significa que casi todos nuestros visitantes tendrn instalado el Media Player, por lo que la reproduccin de ficheros de audio o video en los formatos ms habituales, como mpg, avi, o mp3 est asegurada sin necesidad de instalaciones adicionales. La firma francesa Alsacrations ha publicado bajo Creative Commons licence (cdigo libre y gratuito) un magnfico reproductor de mp3 con tecnologa flash. Se trata del Dewplayer. Este paquete contiene todo lo necesario para, mediante varios tipos de consola, reproducir ficheros mp3. Es recomendable utilizar ficheros codificados a 44.1 Khz para evitar aceleraciones indeseadas en la lectura (no funciona bien con mp3 de baja calidad). Para insertarlo en la pgina html se emplea el elemento OBJECT. Veamos cmo se utiliza. Con el siguiente cdigo se obtiene la ms simple de las consolas de reproduccin: la mini
<object type="application/x-shockwave-flash" data="dewplayer-mini.swf" width="200" height="20" id="dewplayer" name="dewplayer"> <param name="movie" value="dewplayer.swf" /> <param name="flashvars" value="mp3=test.mp3&autostart=0&autoreplay=1& showtime=1&randomplay=1&nopointer=1&bgcolor=FFFF00" /> </object>
Fjate en que cada parmetro est separado del anterior por el ampersand (&). Para obtener cualquiera de las otras consolas disponibles, solamente hay que cambiar el valor de data: con data="dewplayer.swf" tendremos la versin classic: data="dewplayer-bubble.swf" muestra la versin bubble: Esta es ms grande, por tanto las medidas cambian: width="250" height="65" data="dewplayer-multi.swf" para la versin multi: Esta versin permite especificar varios ficheros. Para ello solamente hay que escribirlos en los valores del parmetro "flashvars", por ejemplo:
<param name="flashvars" value="mp3=test.mp3|test.mp3|test.mp3& autostart=0&autoreplay=1&showtime=1&randomplay=1&nopointer=1&bgcolor=F FFF00" />
Fjate en que el smbolo que hace de separador entre los distintos ficheros mp3 es la "pipe" | (cdigo |) La versin playlist es parecida a la multi, pero mostrando la lista con el nombre de los ttulos que correspondan a cada fichero (no necesariamente el nombre del fichero). El cdigo cambia un poco:
<object type="application/x-shockwave-flash" data="dewplayerplaylist.swf" width="240" height="200" id="dewplayerpls" name="dewplayerpls"> <param name="movie" value="dewplayer-playlist.swf" /> <param name="flashvars" value="xml=playlist.xml" /> </object>
Como habrs supuesto, el secreto est en el fichero playlist.xml que es el que contiene la lista de ficheros que se reproducirn, pero puede contener mucha ms informacin aunque en la versin gratuita no se muestre, (esto est disponible solamente en las versiones "Pro"). Los ficheros xml son ficheros que se pueden escribir con cualquier editor, como los html. Es un formato estndar de intercambio de datos basado en etiquetas, es decir cada etiqueta indica un campo con ese nombre que contiene informacin. Por ejemplo, este sera un fichero playlist.xml tpico:
<?xml version="1.0" encoding="UTF-8"?> <playlist version="1" xmlns="http://xspf.org/ns/0/"> <title>Playlist</title> <creator>jac</creator> <link>http://sestud.uv.es/manual.esp/</link> <info>Lista de pruebas</info> <image>tracklist.jpg</image> <trackList> <track> <location>test.mp3</location> <creator>Jean-Pierre Claris</creator> <album>Exitos de siempre</album> <title>Plaisir d'amour</title> <annotation>I love this song</annotation> <duration>30000</duration> <image>autor.jpg</image>
<info>Info de pruebas</info> <link>http://fr.wikipedia.org/wiki/Plaisir_d%E2%80%99amour</link> </track> </trackList> </playlist>
Como es evidente, habr que incluir tantos registros <track> </track> como ficheros se vayan a incluir en la consola, y siempre dentro del agrupamiento <trackList> </trackList> Una particularidad de los ficheros xml, es que as como en un fichero tpico de datos un campo debe existir aunque est vaco, en xml si un campo no contiene valor, ni siquiera aparece en el fichero. En estas versiones libres del Dewplayer, puesto que nada es utilizado excepto el nombre (y localizacin) del fichero, el resto puede obviarse. Por tanto, el fichero playlist.xml puede quedar reducido a la mnima expresin:
<?xml version="1.0" encoding="UTF-8"?> <playlist version="1" xmlns="http://xspf.org/ns/0/"> <title>Playlist</title> <trackList> <track> <location>test.mp3</location> <title>Plaisir d'amour</title> </track> </trackList> </playlist>
ATENCION: En estos ejemplos se ha indicado el fichero mp3 a reproducir suponiendo que est en el mismo directorio en que se encuentra la pgina, pero se pueden escribir las rutas relativas que sean necesarias, y lo mismo para los ficheros .swf indicados en data o los playlist.xml Veamos ahora los distintos parmetros que se utilizan y sus posibles valores, que siempre son dos (excepto para volume): 0=false y 1=true, es decir, 0=desactivado 1=activado. autoplay Hace que la reproduccin del fichero comience en cuanto la pgina es cargada:
dewplayer.swf?mp3=test.mp3&autoplay=1
autoreplay Hace que se repita la reproduccin del fichero automtica e indefinidamente:

dewplayer.swf?mp3=test.mp3&autoreplay=1
randomplay Si se ha seleccionado el modelo multi, el primer fichero que se reproduzca ser cambiado aleatoriamente cada vez que se cargue la pgina. No tiene efecto en el resto de consolas:
dewplayer.swf?mp3=test.mp3&randomplay=1
showtime Hace que se muestre el tiempo que va a durar la reproduccin del fichero:
dewplayer.swf?mp3=test.mp3&showtime=1
volume indica el volumen por defecto de la consola al comenzar la reproduccin del fichero, deber ser un nmero entre 0 y 100:
dewplayer.swf?mp3=test.mp3&volume=50

Codigos HTML

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Codigos HTML

Uploaded by

Copyright:

Available Formats

Cabecera de un documento <HEAD> <TITLE> <META> Cuerpo de un documento <BODY> 1.

Funciones de fecha y hora Otras funciones

Cabecera (HEAD) de un documento HTML

Los charset ms habituales suelen ser:

Cuerpo (BODY) de un documento

Tamaos y tipos de letra en HTML

y este sera el resultado:

Texto de prueba (H1)

Texto de prueba (H2)

Por ejemplo: si escribes

Dar como resultado:

Texto de prueba 12345 con tipo IMPACT

Texto de prueba 12345 con tipos alternativos

Esto es una Prueba

Cdigos hexadecimales de color

Las distintas definiciones de los bloques. Separadores.

y este sera el resultado:

Texto de prueba (H1)

Texto de prueba (H2)

Por ejemplo, si escribes:

Y este sera el resultado:

y este sera el resultado:

y este sera el resultado:

Se escribir as: <PRE>

</PRE> y este sera el resultado:

Se ve as: texto texto texto texto

Otros efectos en el texto

Texto con nfasis:

Texto normal nomal

Creacin de enlaces (links)

Y este sera el resultado: Ir al ndice

Y este sera el resultado: Ir al ndice

file:///C| Fichero local

Existen otros valores para TARGET:

Dentro del documento activo En la lnea de partida:

Debes saber que...

Primera linea segunda linea

Primera linea segunda linea

Tambin puede usarse el valor SQUARE. As:

Primera linea segunda linea

Primera linea Segunda linea Tercera linea Cuarta linea

Ejemplos de listas y mens Desordenadas

Linea de texto 1 Linea de texto 2 Linea de texto 3

Desordenada simple con marcas. Comienzo una posicin a la derecha

Linea de texto 1 Linea de texto 2 Linea de texto 3

Desordenada simple sin marcas. Comienzo dos posiciones a la derecha

Linea de texto 1 Linea de texto 2 Linea de texto 3 Se escribe:

Desordenada simple con marcas. Comienzo dos posiciones a la derecha

Linea de texto 1 Linea de texto 2 Linea de texto 3

Desordenada con 4 niveles con marcas

3. Linea de texto 3 Se escribe:

ii. IV. Linea de texto 4

Linea de texto 3.2.2.2

Item 2 Item 3 Item 4 Item 5 Item 6 Item 7

<TABLE BORDER> <TR>

Ejemplo de columna expandida <COLSPAN> Item 1 Item 2 Item 3 Item 4 Item 5

Tabla con cabeceras <TH> Head1 Head2 Head3 A B C D E F

Combinacin de columna expandida y cabecera Head1 Head2 A B C D E F G H

Otro ejemplo de lnea y columna expandidos 12 A 34 C D

Ajustando mrgenes y bordes

<TABLE BORDER CELLPADDING=10 CELLSPACING=0> <TR> <TD>A</TD> <TD>B</TD> <TD>C</TD> </TR>

<TR> <TD>D</TD> <TD>E</TD> <TD>F</TD> </TR> </TABLE>

Alineacin, ttulos y subtablas

Celda 1 Celda 2 Celda 4 y esta