Marcos para el manual

ste

manual tiene como objetivo ensear todos los entresijos del lenguaje HTML para que todo el mundo pueda hacerse su pgina Web. En l vais a poder encontrar no slo las etiquetas tpicas del HTML y sus atributos, sino tambin etiquetas y atributos propietarios de Netscape o Microsoft y trucos de todo tipo para que vuestra pgina no sea igual que la del vecino (adems, la de mi vecino es hortera a ms no poder). He intentado que los ejemplos empleados sean fciles de entender y variados en cantidad, as que si tenis alguna queja... si tenis alguna queja... os la guardis, que no estoy para reproches (bueno, si son pequeitos, los acepto :-). El mximo inconveniente que vais a encontrar a este manual es la larga espera entre captulo y captulo. Como comprenderis, hacer una manual de este tipo no se hace en dos das, as que voy colgando en esta web un captulo por mes, aunque cada captulo tiene varios apartados que podran corresponder perfectamente a varios captulos de cualquier otro manual. no de los mayores alicientes de este manual, y que lo diferencia de otros, es el Test de las 10 preguntas. Es un apartado que podris encontrar al final de cada captulo (o de casi todos) y en el que podris probar vuestros conocimientos de HTML recin adquiridos. Si alguien quiere saltarse la teora del manual y pasar directamente al Test all l y su conciencia!, pero estis en vuesto derecho internetstico. Yo os puedo asegurar que si leis con detenimiento cada captulo, estaris en condiciones de contestar todas las preguntas a la primera. ueno, espero que disfrutis de este manual y no acabis taraos con tanto HTML por mi culpa. Si tenis alguna pregunta que hacerme sobre este lenguaje, mi direccin de correo electrnico est desperdigada por todas las pginas de esta web, por ejemplo, aqu mismo, [email protected]. dems, ahora puedes bajarte el manual en formato PDF, aunque para ello necesitars una contrasea que te proporcionar si rellenas mi cuestionario del libro de visitas y seleccionas la casilla "Quiero la contrasea para bajarme el manual HTML". Eso s, no olvides especificarme tu e-mail, sino no sabr dnde enviarte la contrasea. Si ya tienes la contrasea, pulsa AQU.
http://personal1.iddeo.es/joseriki/man_marc.htm (1 de 2) [18/11/2000 16:21:03]

Marcos para el manual

Volver a la seccin

http://personal1.iddeo.es/joseriki/man_marc.htm (2 de 2) [18/11/2000 16:21:03]

Captulo 1. Introduccin al HTML

Introduccin
l HTML (HyperText Mark-Up Language) es un lenguaje de codificacin creado a partir del lenguaje de estructuracin y formato SGML (Standard Generalized Mark-Up Language), y que es la base para la creacin de una pgina web. Y digo que es la base porque hoy da tambin se utilizan otros lenguajes y tecnologas para dejar la mar de chulo nuestro rinconcito en la Red: Java, JavaScript, VBScript, JScript, DHTML, CSS, VRML y Scripts desarrollados con muchos otros lenguajes como C, Perl, Tcl, Visual Basic, Pascal, etc. l estndar vigente de HTML es el 3.2, aunque el 4.0 ya est totalmente desarrollado y los navegadores de ltima generacin como Netscape 4.0 o IExplorer 4.0 ya lo implementan o al menos en parte, como es el caso de Netscape 4.0, que todava no soporta la mayora de las nuevas especificaciones. ste lenguaje y las nuevas especificaciones son llevadas a cabo por el W3C (Word Wide Web Consortium), compuesto por empresas como Netscape Corporation, Microsoft, Sun MicroSystems, IBM, Symantec, entre otras. l manual que vais a poder seguir en esta web mensualmente dar debida cuenta del estndar vigente, aunque me reservo para el final un captulo en el que explicar las nuevas etiquetas, atributos y especificaciones de la versin 4.0. Al paso que voy, ya estoy viendo que, para cuando haya acabado este manual, habr aparecido la versin 5.0 o el XML (eXtensible Mark-Up language) habr sustituido al HTML. Uy! Me he colao! No tena que haberos dicho nada del XML, sino ahora perderis el inters en aprender el HTML. Ejem, ejem, francamente, creo que el HTML no se extinguir, aunque s es cierto que aparecern lenguajes alternativos que doten de un cierto dinamismo a las pginas web. Y ahora ya, POR FIN, vamos a comenzar con el curso. En sus puestos, preparados, listos... GO.

El lenguaje de marcas o etiquetas

http://personal1.iddeo.es/joseriki/m_estru.htm (1 de 7) [18/11/2000 16:22:35]

Captulo 1. Introduccin al HTML

omo ya decamos antes, el lenguaje HTML es un lenguaje de codificacin, no de programacin; es decir, mediante las etiquetas creamos la estructura, damos formato al texto e insertamos objetos. El problemilla es que su simplicidad da poco de s, vamos, que lo que aparecer en la pgina no cambiar por s slo, ni podremos darle mucho movimiento a los elementos de las pginas, a menos que nos apasione picar, una y otra vez, en la flechita negra que acompaa a las listas desplegables.
Pica aqu para que me desplegue

procesador, a menos que este programa para la edicin sea un Editor de HTML.Pero ste es un tema del que ya hablaremos unas lneas ms abajo. En este manual escribiremos la etiquetas y atributos en maysculas pero no es necesario. i vamos a crear una pgina web con un editor de textos, lo mejor es que ste sea sencillo, pues sencillo es sinnimo de "programa que ocupa poca memoria y no consume muchos recursos del sistema". De este modo, podris tener abierto uno o dos navegadores y vuestro editor de textos favorito sin necesidad de comprar 16 megabytes de RAM adicionales y, sobre todo, sin tener que escuchar el eterno ronroneo del disco duro, cuando va escaso de memoria. as etiquetas en HTML no son ms que un cdigo que est entre los smbolos "<" y ">", como por ejemplo, un dos tres, responda otra vez: <BODY>. Si la etiqueta se cierra, debe ponerse la misma etiqueta pero con una barra diagonal delante del cdigo de sta: </BODY>. Estas etiquetas pueden tener atributos, que son unas palabras clave que describen o modifican el comportamiento de la etiqueta. Por ejemplo, si inserto en el cdigo de la pgina la etiqueta <P> (creacin de un prrafo), comenzar un nuevo prrafo con una alineacin a la derecha; en cambio, si le aado el atributo ALIGN=RIGHT de esta forma <P ALIGN=RIGHT>, el prrafo estar alineado a la derecha.

Y es que hay gente que tiene unos entretenimientos la mar de raros, o no? ero bueno, lo fantstico que tiene el HTML es que es superfcil aprenderlo y que podemos escribirlo en cualquier procesador de texto: Block de Notas del Pc, SimpleText de Mac, Emacs de Unix, etc.; cuanto ms cutre y sencillo sea el procesador mucho mejor. Lo nico que debemos hacer es guardar el documento con la extensin .htm o .html "Ah! Pues yo tengo el MS-Word y le quiero sacar provecho, as que paso del Block de Notas!"- me dice mi vecino. "Pues all t y tu conciencia" -le digo yo. Bueno, no es que sea pecado ni mucho menos utilizar un procesador potente para este menester, pero para qu? Tened en cuenta que el HTML es texto ASCII, sin formato, y que los saltos de lnea, tabulaciones, espacios, color, tamao y tipo de letra se tienen que hacer con etiquetas del HTML no con los elementos del mismo

http://personal1.iddeo.es/joseriki/m_estru.htm (2 de 7) [18/11/2000 16:22:35]

Captulo 1. Introduccin al HTML

la hora de definir las etiquetas deberamos hacer un par de clasificaciones: segn el cierre y segn los atributos. Segn el cierre quiere decir que hay etiquetas que aplican un formato o una caracterstica al texto y, para concretar de qu texto se trata, se colocan delante y detrs de l: <B>Esta frase est en negrita</B> y sta, en cambio, no. El resultado sera: Esta frase est en negrita y sta, en cambio, no. Ha quedado claro qu es esto del cierre? Lo digo porque es la base del HTML y el hecho de dejarnos una etiqueta de cierre, puede dar a lugar un resultado muy diferente al que esperbamos. Pero no os asustis, nunca se colgar el navegador ni el sistema operativo por culpa de un fallo en el cdigo, as que cuando se os cuelgue Windows 95 no le echis la culpa al HTML, sino a Mocosoft. Pues como os iba diciendo, una primera clasificacin de las etiquetas la podramos hacer en funcin de si necesitan o no etiquetas de cierre. De este modo tenemos tres tipos de etiquetas G Cierre obligatorio: las etiquetas que siempre deben de cerrarse, como las de formato de fuente: negrita, cursiva, superndice; las de los hipervnculos, algunas de formato de prrafo: sangra, encabezado, etc. G Cierre implcito: las etiquetas que pueden cerrarse, pero que, si no se cierran, no pasa nada, como las de alineacin de prrafo, listas de definicin, listas ordenadas, etc. G nicas: las etiquetas que nunca se cierran, como la de salto de lnea, lnea horizontal, insercin de imgenes, sonido, informacin, etc. a otra clasificacin sera en funcin de los atributos que pueden llevar, que puede ser uno, varios o ninguno. En el caso de que se utilicen varios, el orden es absolutamente indiferente, tanto da <FONT FACE="Arial" SIZE=5> como <FONT SIZE=5 FACE="Arial">. Y a la hora de cerrar una etiqueta con atributos slo se cierra la etiqueta, sin los atributos, es decir, de esta manera: <FONT SIZE=5> Hola a todos</FONT> y no <FONT SIZE=5>Hola a todos</FONT SIZE=5>. G Sin atributos: son las etiquetas que no llevan atributos de ningn tipo, como la negrita, o la sangra:
<B>
G

Pueden llevar atributos, pero no son obligatorios: aquellas etiquetas como <P>, que tambin puede aparecer como <P ALIGN=CENTER>, si queremos que la alineacin sea al centro. De atributo o atributos obligatorios: son las etiquetas que necesitan como mnimo un atributo para que tengan alguna utilidad, como <IMG SRC="Imagen.gif">, donde SRC es el atributo que sirve para definir la imagen que se va a insertar (Ya me diris qu gracia tendra poner la etiqueta para insertar imgenes <IMG> sin decirle qu imagen tengo que insertar!).

La estructura del HTML

ueno, despus de un poco de historia y de conocer qu es y para qu sirve este lenguaje, lleg la hora de empezar a hacer nuestros primeros pinitos con l. Saca papel, lpiz, la cmara de vdeo, los klinex y un zumo de pia para coger fuerzas y dile a los nios que estn a tu alrededor que dejen de hacer ruido, que necesitas concentracin. Arllurredi? Pues ya puedes abrir el bloc de notas y empezar a hachetemelear un rato. Lo primero que hay que tener en cuenta a la hora de crear una pgina Web es que deberemos establecer una estructura de documento como la que aparece a continuacin:

http://personal1.iddeo.es/joseriki/m_estru.htm (3 de 7) [18/11/2000 16:22:35]

Captulo 1. Introduccin al HTML

<HTML> <HEAD> <TITLE>Mi primera pgina web</TITLE> </HEAD> <BODY> El contenido de mi pgina </BODY> </HTML>

ara que el navegador sepa que se trata de un documento HTML se pone la etiqueta <HTML> que englobar todas las etiquetas del documento. Seguro que ms de uno debis de estar pensando: "este to est ms atrasado que los relojes de arena. Yo no pongo estas etiquetas y mi pgina se ve la mar de bien". Cierto, se ve, pero se ve porque estis utilizando un navegador de ltima generacin. El estndar vigente de HTML es el 3.2 y en ste se ha especificado que deben usarse estas etiquetas para crear la estructura del documento: encabezado (<HEAD>) y cuerpo (<BODY>).

n la versin 4.0 del HTML (que ya llevan aos diciendo que ser el estndar vigente, pero que si quieres arroz Catalina), la nica etiqueta indispensable de estructura ser la <TITLE>, pero de momento... pensad que no todo el mundo utiliza navegadores que soporten el HTML 4.0 como el Internet Explorer 4.0 o el Netscape Communicator 4.0, as que si queris que TODO el mundo pueda ver vuestra pgina, haced un esfuerzo (s,s, ya s que es mucho pedir, pero es el precio que hay que pagar si queremos que visiten nuestra web 5.000 personas cada da, como mnimo!).

Etiquetas Meta
entro de la cabecera de una pgina web (entre <HEAD> y </HEAD>) es donde se colocan las denominadas etiquetas de metainformacin: <META>. Estas etiquetas sirven para, entre otras cosas, indicar a los motores de bsqueda que hay en Internet la informacin que queremos que se almacenen en stos; por ejemplo, ttulo de la pgina, temtica de sta o las palabras por las cuales deseamos que localicen nuestra pgina en Internet. Esto se consigue mediante una serie de atributos que pasamos a describir a continuacin: CONTENT Este atributo va siempre emparejado con el atributo NAME o con el HTTP-EQUIV y contendr un texto que se corresponder con el valor del atributo al que acompaa. En el atributo NAME se detallan los posibles valores que puede contener. NAME El atributo NAME sirve para indicar el tipo de elemento meta que se va a utilizar. Existen muchos tipos, pero slo se utilizan los siguientes:

http://personal1.iddeo.es/joseriki/m_estru.htm (4 de 7) [18/11/2000 16:22:35]

Captulo 1. Introduccin al HTML

Author: cuando utilizamos este valor, en el atributo CONTENT indicaremos quien es el autor de la pgina. Normalmente slo se coloca en la primera pgina de nuestra web. Ejemplo: <META NAME = "author" CONTENT = "Jos Luis Iglesias Jckle"> Generator: este valor lo suelen colocar los programas de edicin de HTML, indicando en el atributo CONTENT el nombre y versin del programa. Ejemplo: <META NAME = "generator" CONTENT = "Macromedia Dreamweaver 2.01"> Keywords: este es posiblemente el valor ms til y empleado de todos, pues le acompaa el atribut CONTENT con todas las palabras claves por las que queremos que los buscadores encuentren e indexen nuestra pgina. Las palabras que pongamos en el atributo CONTENT deben ir separadas por comas y, a ser posible, sin espacios. Ejemplo: <META NAME = "keywords" CONTENT = "coches,mecnica,automvil,cars,carreras automovilsticas"> Description: este avalor del atributo NAME va acompaado de un CONTENT con la descripcin de nuestra pgina, la cual tambin se almacenar en los buscadores. Aqu s que podemos dejar espacios, pero no se debe de sobrepasar los 250 caracteres en la descripcin, espacios incluidos. Ejemplo: <META NAME = "description" CONTENT = "Catlogo de los mejores coches de la historia, mecnica e historia del automovilismo"> Distribution: la distribucin es el alcance de tu web. Normalmente se utiliza el valor Global en el atributo CONTENT para indicar que tu web quede indexada en cualquier buscador a nivel mundial. Pero siempre hay gente que slo quiere que la visite personas de una zona determinada: Hispanoamrica, Francia, Japn, San Marino, Portugalete, etc. Pues bien, en tal caso slo debemos introducir el rea deseada en el atributo CONTENT de esa etiqueta Ejemplo: <META NAME = "distribution" CONTENT = "global"> Resource.Type: este valor hace referencia al tipo de recurso que se est utilizando, normalmente una pgina web, es decir, un Document. Pero hay otros tipos de recursos: bases de datos, apndices, etc. Ejemplo: <META NAME = "resource-type" CONTENT = "document">

http://personal1.iddeo.es/joseriki/m_estru.htm (5 de 7) [18/11/2000 16:22:35]

Captulo 1. Introduccin al HTML

Robots: los buscadores que utilizamos para encontrar todo tipo de informacin en Internet utilizan unos diminutos programas (aunque de complejo desarrollo, pues muchos utilizan rutinas de inteligencia artificial) que navegan todo el tiempo por Internet y recogen la informacin que se encuentra en las etiquetas META y TITLE o a veces en las primeras lneas de texto de la primera pgina. Estos programillas se les conoce como robots o araas y los hay de diferentes tipos. Si queremos que nuestra web sea revisada por uno de estos robots slo tenemos utilizar como valor del atributo CONTENT el nombre de ste, aunque si ponemos ALL, dejaremos paso a todos ellos. Si no queremos que entren estos robots (vete a saber que esondes en la pgina para que no quieras que te la encuentren) basta con poner NoRobots. Ejemplo: <META NAME = "robots" CONTENT = "all""> HTTP-EQUIV Este atributo es muy especial y no se suele utilizar muy a menudo, aunque muchos editores de HTML lo ponen automticamente con el valor Content-Type. Pero este valor no es el nico que se utiliza, ni mucho menos, pues hay otros 3: Content-Type: mediante el atributo CONTENT indicaremos el tipo de documento que hemos elaborado y el juego de caracteres que hemos utilizado. A menos que hagsi pginas en rabe, japones, ruso o swagili, el juego de caracteres que utilizaris es el denominado Latin1, cuyo cdigo de ISO es el 8859-1 (no me preguntis por qu tiene este cdigo, porque no tengo ni la ms remota idea). Ejemplo: <META HTTP-EQUIV="Content-Type" CONTENT = "text/html;charset=iso-8859-1"> mediante este valor podemos indicar en el atributo CONTENT que cargue una pgina determinada despus de que pase un tiempo especificado por nosotros. Si queris ver ms ejemplos, slo tenis que ir al capitulo sobre Efectos Especiales. Ejemplo: <META HTTP-EQUIV="Refresh" CONTENT="10;URL=http://www.lpis.com"> mediante este valor y el atributo CONTENT podemos informar a los buscadores acerca de cundo va a caducar nuestra web para que nos eliminen de su base de datos. Lo cierto es que esto est pensado ms para empresas que para usuarios finales, porque ya me diris si sabis cuando vais a cambiar de servidor! Ejemplo: <META HTTP-EQUIV="Expire" CONTENT = "10-10-2036">

Refresh:

Expire:

http://personal1.iddeo.es/joseriki/m_estru.htm (6 de 7) [18/11/2000 16:22:35]

Captulo 1. Introduccin al HTML

Set-Cookie:

este slo se utiliza cuando se trabaja con cookies. Las cookies o galletitas son pequeos programitas o rutinas desarrolladas en lenguaje script interpretado (Javascript o VBScript) y que sirven para enviar al visitante de nuestra pgina un pequeo fichero en el cual se almacenar informacin acerca de cundo se conect a la pgina, cunto tiempo estuvo conectado, cuntas veces ha accedido, etc. Si se tienen buenos conocimientos de programacin (o deseamos guardar uns simple informacin del usuario), no es complicado hacer un cookie de estos pero si slo lo hacemos para presumir, ms vale que os abstengis. Ejemplo: <META HTTP-EQUIV="Set-Cookie" CONTENT = "nombre_usuario"=pepito;path=info/;domain=personal1.iddeo.es>

ero lo ms curioso del tema es que existen multitud de pginas en Internet que te ayudan a rellenar estas etiquetas de la manera ms correcta. Algunas de estas pginas son de pago y adems se encargan de darte de alta en cientos de buscadores a nivel mundial. Otras, en cambio, son gratuitas y nos hacen un favor al crearnos estas cabeceras tan engorrosas a veces. La que ms me ha gustado desde siempre es la de Landaluze Productions, la pgina Dejar Huella.

Hasta aqu el primer captulo de este tremendo manual. Ahora convendra que pasaseis al segundo captulo, en el que veremos cmo aplicar diferentes formatos a nuestras pginas: formato de texto, formato de prrafo y formato de pgina. En el prximo captulo podris estrenar el test de las 10 preguntas, que en esta ocasin se referirn a los contenidos de los dos primeros captulos. Este manual ha sido ntegramente elaborado con el sudor y el coco de Jos Luis Iglesias Jckle. En el caso de que queris copiarlo, pedid permiso a vuestra mam y no quitis el nombre del autor, ok? La ltima vez que se me ha ocurrido modificar este manualillo fue ayer mismo, 5/08/99

Yo me vuelvo a la seccin

http://personal1.iddeo.es/joseriki/m_estru.htm (7 de 7) [18/11/2000 16:22:35]

Captulo 2. Aplicar formatos a las pginas

El formato de Texto
ues bueno, una vez creada la estructura, el siguiente paso es poner algo de chicha, contenido: chistes, fotos de nuestra primera comunin, el ltimo chismorreo del barrio, etc. Y una vez puesto el texto, habr que darle formato. Existen tres tipos de formato: el formato de fuente, el formato de prrafo y el formato de documento. El formato de fuente es aquel que se puede aplicar desde a un carcter hasta todo el documento, es decir, el color, el tamao, el tipo de fuente, el estilo de negrita, cursiva, subrayado, letra teletipo o incluso de superndice o subndice. El formato de prrafo es aquel que se aplica como mnimo a un prrafo, como la alineacin, la sangra, el salto de lnea y algunos formatos especiales como el de encabezado, direccin y preformateado. Por ltimo, el formato de documento es aquel que se aplica a todo el documento, como la fuente por defecto, el color del texto por defecto o el color del fondo de la pgina, entre otros.

El Formato de Texto lo componen las siguientes etiquetas y atributos:

<B>...</B> (Bold -negrita-). Ejemplo: Manolito <I>...</I> (Italic -cursiva-). Ejemplo: Crispin <U>...</U> (Underline -subrayado-). Ejemplo: Increble <S>...</S> (StrikeTrought -tachado-). Ejemplo: abolicin <TT>...</TT> (TeleType -teletipo o mquina de escribir-). Ejemplo: mquina de escribir <SUP>...</SUP> (Superindex -superndice-). Ejemplo: X2 <SUB>...</SUB> (Subindex -subndice-). Ejemplo: H2O <FONT>...</FONT> (Font -fuente-). Necesita cualquiera de los tres atributos que tiene para poder funcionar
G

SIZE = nmero del 1 al 7. Tamao de la letra entre 8 y 20 puntos. Ejemplo. Hola a todos y a

todas
G

FACE = nombre de la fuente. Tipo de fuente, como Arial, Desdemona, Courier, Impact, etc. Ejemplo: Arial e Impact COLOR = nombre de un color o su equivalente en cdigo hexadecimal. Si queremos utilizar un nombre de un color, tenemos 140 para escoger y si preferimos poner el cdigo hexadecimal

http://personal1.iddeo.es/joseriki/m_format.htm (1 de 7) [18/11/2000 16:23:07]

Captulo 2. Aplicar formatos a las pginas

(#FF00F8) podremos escoger entre una gama de 16 millones, aunque la paleta de los navegadores slo soporta 216. Ejemplo: colorn colorado, este cuento se ha acabado. La manera de poner e interpretar el color segn el cdigo hexadecimal es sencilla: El cdigo hexadecimal es parecido al decimal (0123456789), pero en vez tener 10 elementos que van del 0 al 9, tiene 16 elementos que van del 0 a la letra F (0123456789ABCDEF). Si hacemos agrupamos estos nmeros en grupos de dos para componer una cifra, tenemos pares del tipo 34, A5, DC, 9E, 0F, etc. Teniendo en cuenta que para definir un color se utiliza la tricotoma RGB (Rojo, Verde, Azul), la manera de expresar el valor de un color ser con una cifra de este tipo para cada color: #RRGGBB, donde RR es la cifra en cdigo hexadecimal par determinar la cantidad de rojo, GG para la cantidad de verde y BB para la cantidad de azul. De este modo, un color como #FF0000, sera el mximo de rojo, nada de verde ni de azul, luego sera rojo puro. Otros colores caractersticos podra ser #000000 para el negro, #FFFFFF para el blanco, #00FF00 para el verde, y segn vamos poniendo una cifra inferior, se va oscureciendo el color.

El formato de Prrafo
ues una vez visto cmo se ponen formato al texto, vamos a ver cmo podemos utilizar formatos de prrafo. Los formatos de prrafo se pueden dividir en dos grupos: estructura y diseo. Dentro del primer grupo encontramos las etiquetas siguientes: <P>...</P> (Paragraph -prrafo-). Crea un nuevo prrafo, dejando un espacio considerable con el anterior. Tiene un atributo opcional, ALIGN, que tiene los siguientes tres valores: RIGHT, LEFT y CENTER. (aunque Netscape y la versin 4 de IExplorer aceptan tambin el valor JUSTIFY). Ejemplo: Este texto est alineado a la izquierda Este texto est alineado al centro Este texto est alineado a la derecha <DIV>...</DIV> (Division -divisin-). Sirve para alinear elementos sin necesidad de crear un nuevo prrafo. Tiene un atributo obligatorio, ALIGN, que tiene los siguientes tres valores: RIGHT, LEFT y CENTER. Ejemplo: Este texto est alineado a la izquierda Este texto est alineado al centro Este texto est alineado a la derecha <CENTER>...</CENTER> (Center -centrar-). Sirve para centrar elementos en las pginas, sin tener que usar el <DIV ALIGN=CENTER> o el <P ALIGN=CENTER>. Ejemplo: Este texto y esta lnea estn centrados
http://personal1.iddeo.es/joseriki/m_format.htm (2 de 7) [18/11/2000 16:23:07]

Captulo 2. Aplicar formatos a las pginas

<BLOCKQUOTE>...</BLOCKQUOTE> (Blockquote -sangrado de prrafo-).Hace que el prrafo se sangre por ambos lados, izquierda y derecha. Ejemplo: Este prrafo no est sangrado y por lo tanto va de un extremo al otro de la pgina sin ninguna dificultad. Es como si fuera una sangra de valor cero o algo as. Este prrafo, en cambio est sangrado, es decir, est metido unos cinco caracteres hacia adentro. Este mtodo se utiliza mucho para hacer citas poticas o indicar que un texto est incluido dentro de otro. Si se desea hacer la sangra ms grande, slo es necesario aadir un <BLOCKQUOTE> detrs de otro; pero cuidado con pasarnos, porque ms de 5 seguidos no queda muy bien que digamos. <BR> (Break Row -salto de lnea-). Esta etiqueta ser la que utilizaremos para saltar de lnea sin necesidad de crear un prrafo nuevo. Tiene un atributo opcional, CLEAR, que puede tener como valores LEFT, RIGHT y ALL. El atributo CLEAR sirve para que busque el primer espacio libre a la izquierda, derecha o a cualquiera de los dos lados. Ejemplo: Este es un prrafo pequeito pequeito. Para hacer esta nueva lnea he insertado un <BR>, pero si quisiera que esta nueva lnea apareciese debajo de la imagen, entonces debera aadir a la etiqueta <BR> el atributo CLEAR=LEFT o CLEAR=ALL de la siguiente manera <BR
CLEAR=LEFT>

<NOBR>...</NOBR>(No Break Row -no hacer salto de lnea-). Esta etiqueta sirve para evitar que el navegador haga un salto de lnea en un lugar donde nosotros no nos gustara, como puede ser entre las palabras Banco de Santander. El nico problema que tiene es que no sirve para IExplorer 3.0. Ejemplo: Sin un <NOBR> me podra quedar hecho un churro un prrafo que contuviese el nombre de una empresa como rea Metropolitana de Barcelona. Con un <NOBR> antes y despus del nombre de esta empresa forzaramos a que apareciese en la misma lnea a cambio de que el usuario tuviese que desplazarse con la barra de desplazamiento para verla toda, lo cual puede resultar incmodo en determinados casos. Para ver un ejemplo ms claro, podis ver la zona de ejemplos picando el botn de Formato de Prrafo del final de la pgina. <WBR> (Word Break Row -corte de palabra-). Como sabis, el navegador siempre pone las palabras enteras al principio de una lnea, lo cual hace que el texto tenga la apariencia de una sierra. Si tenemos una palabra muy larga podemos utilizar esta etiqueta para que el navegador corte la palabra si fuese necesario. La etiqueta debe ponerse all donde queramos que el navegador corte la palabra. Al igual que la anterior, esta etiqueta tampoco sirve para la versin 3 de IExplorer. Ejemplo: Yo tena una empresa de construccin que un buen da se fusion con otra empresa del sector de la termodinamohipermetalurgia. Como esta palabra es muy larga, el prrafo me queda echo un asco, as que probaremos con un <WBR> a ver qu pasa. Yo tena una empresa de construccin que un buen da se fusion con otra empresa del sector de la termodinamohipermetalurgia. No es fabuloso? La ha cortado!
http://personal1.iddeo.es/joseriki/m_format.htm (3 de 7) [18/11/2000 16:23:07]

Captulo 2. Aplicar formatos a las pginas

<SPACER>...</SPACER> y <MULTICOL>...</MULTICOL>. Estas dos etiquetas las pongo juntas porque son slo para el navegador Netscape 3.x o superior. <SPACER> sirve para dejar espacios entre palabras o entre lneas (interlineado); <MULTICOL>, en cambio, sirve para hacer columnas periodsticas, como las que veis al principio del manual, aunque las mas las he tenido que hace con tablas, habida cuenta de la falta de tolerancia por parte de Internet Explorer. Los atributos que se aplican a estas etiquetas los podis encontrar en el glosario de trminos que se encuentra en el apartado de Ayuda HTML. ues hasta aqu las etiquetas que tienen que ver con la estructura en el formato de prrafo y ahora vienen las de diseo, que no son otras que las etiquetas que ponen formato de fuente a todo el prrafo y que tienen unas cualidades de lo ms interesante. Algunas, ms que poner un formato especial, recogen varios formatos y los ponen al mismo tiempo. Estas etiquetas son las siguientes: <H1>...</H1>(Heading 1 -primer encabezado-). Esta etiqueta sirve para poner un tamao grande (ms o menos 20 puntos) y estilo negrita a todo el texto del prrafo, como si de un ttulo se tratase. Si deseamos que este tamao sea un poco menor, tenemos hasta un total de 6 tamaos diferentes para escoger; lo nico que debemos hacer es cambiar el 1 por un nmero entre el 2 y el 6 (y no valen decimales, que conste que os lo he advertido). De esta manera, tenemos tamaos como el <H2>, el <H3> o el <H6>. Cuanto ms alto es el nmero, ms pequea es la letra. Ejemplo:

Este prrafo esta hecho con el estilo <H1>

Este otro, en cambio, tiene un <H3> para que quede un poco ms discretito.
<ADDRESS>...</ADDRESS> (Address -direccin-). Esta etiqueta hace que el texto de todo el prrafo aparezca con un tamao de letra 3 (el normal, vamos) y con estilo cursiva. Sirve para poner esas frases que nos hacen populares en Internet, como el Copyright, la fecha de la ltima modificacin de la pgina, los agradecimientos a nuestros seres queridos, la novia/o, el gato, la abuelita Pilarn o el aparato de televisin. Ejemplo: Este prrafo sale en cursiva porque se me ha ocurrido la brillante idea de ponerle el formato de prrafo <ADDRESS>. Y seguro que ahora os estaris preguntando "Por qu no le pones un <I> al principio y otro al final? S, ya lo s. Hay algunas etiquetas que no son de mucha utilidad que digamos. <PRE>...</PRE> (Preformatted -preformateado-). Este estilo es bastante especial. Recordis que al principio del manual os comentaba que los espacios, los saltos de lnea o el formato, entre otros elementos, se deban poner con el cdigo del HTML y no con el procesador y que por ello era mejor utilizar un procesador de textos sencillo? Fiiiiiu, que pregunta ms larga! Pues bueno, por si no os enterasteis muy bien os lo explico ahora. Aunque pulsemos la tecla ENTER o la barra espaciadora repetidas veces, no vamos a conseguir que esto lo interprete el navegador; no, a menos que englobemos este texto entre la etiqueta <PRE> y </PRE>. El texto que tengamos entre estas etiquetas aparecer con letra teletipo (aquella de la mquina de escribir, o sea, tipo Courier), pero exactamente como lo introduzcamos
http://personal1.iddeo.es/joseriki/m_format.htm (4 de 7) [18/11/2000 16:23:07]

Captulo 2. Aplicar formatos a las pginas

en el procesador de texto aparecer en el navegador. Esto que puede parecer un panacea, no lo es tanto ni mucho menos. Como todo lo que pongamos en el procesador dentro de estas etiquetas aparecer tal cual, quiere decir que, si el texto supera la anchura del navegador, no se cortar automticamente, sino que deberemos utilizar una barra de desplazamiento para poder verlo al completo. No obstante, es ideal para dibujo en modo ASCII, como el que aqu aparece. Ejemplo: ______ _ _ / _____) | | | | / | | _ ____ ____| | _ _ _ | | | || \ / _ ) ___) || \| | | | | \_____| | | ( (/ ( (___| | | | |_| | \______)_| |_|\____)____)_| |_|\____|

El formato de Pgina
omo decamos con anterioridad, el formato de pgina es aquel que se aplica a todo el documento. En este caso no lo conforman etiquetas, sino atributos de una etiqueta: <BODY>. Mediante estos atributos podremos poner color al fondo o una imagen y cambiar los colores por defecto del navegador: color del texto y de los diferentes hipervnculos. A continuacin vamos a ver cuales son esos atributos. TEXT (texto). El atributo TEXT debe ser igual a un color, ya sea en cdigo hexadecimal o con uno de los nombres de colores. El color que escojamos tiene que contrastar con el color que se utilice de fondo para no forzar la vista del internauta. El color que aqu escojamos ser el de la fuente por defecto, pero si queremos utilizar otro cualquiera ya sabis que tenis la etiqueta <FONT COLOR="Elcolorquequeramos"> para cambirselo. Ejemplo:
<BODY TEXT=RED> En este caso el color de la letra de la pgina sera rojo.

LINK(vnculo). El atributo LINK tambin ser igual a un color, pero en este caso el atributo slo sirve para poner un color al texto o borde de imagen cuando estos hacen de hipervnculos. Si no se pone nada suele salir de color azul, pero esto es debido a que en nuestros navegadores tenemos puestos unos colores por defecto para el color de la letra, color de los vnculos normales, visitados o activos, y para el color del fondo. Os aconsejo que siempre les deis un valor a estos atributos; de lo contrario, estis dejando a merced del usuario el diseo de vuestra pgina. Ejemplo:
<BODY LINK=LIME> Este vnculo est de color verde lima y es que tengo que reconocer que un poco

hortera s que soy. VLINK (vnculo visitado). El atributo VLINK sirve para controlar el color de los vnculos visitados. Un vnculo visitado no es ms que un vnculo normal, pero que tiene un color diferente para indicarnos que hemos hecho clic sobre l en los ltimos X das, donde X es el nmero de das que pongamos en nuestro historial del navegador. Si no lo hemos modificado, es 9. Ejemplo:
<BODY VLINK=ORANGE> Como este vnculo est de color naranja me est indicando que he hecho clic

sobre l en los ltimos 9 das. S, ya s que tampoco os gusta el naranja, pero es que me gusta ser original.
http://personal1.iddeo.es/joseriki/m_format.htm (5 de 7) [18/11/2000 16:23:07]

Captulo 2. Aplicar formatos a las pginas

ALINK (vnculo activo). El atributo ALINK es para controlar el color del vnculo activo. Y ese cul es? Pues bien, os habis fijado alguna vez que mientras pulsis sobre un hipervnculo, el color cambia? Como esta accin suele durar menso de medio segundo no es extrao que no os hayis percatado. No es que se muy importante,pero queda la mar de potito. Ejemplo:
<BODY ALINK=RED> Cuando me pulses sobre este vnculo, fjate bien. Si no te da tiempo, mantnlo

pulsado y vers. BGCOLOR (color de fondo). Este atributo es muy importante porque es el que le pone un color de fondo a todo el documento Como ya dijimos con el atributo TEXT, es importante saber escoger el color de fondo, no slo para que contraste con el color del texto, sino tambin para que no moleste al internauta y de paso para que las imgenes que insertemos parezca que pertenezcan la mismo fondo en vez de ir por encima de l. Ejemplo:
<BODY BGCOLOR=BLACK> Este es un color de fondo muy utilizado, y si no os lo creis slo tenis que

navegar un poco por Internet y me daris la razn. BACKGROUND (fondo). Este atributo es uno de los ms utilizados, pues sirve para poner una imagen de fondo de pgina. No es necesario que la imagen ocupe toda la superficie, pues el mismo navegador crear un efecto de mosaico para repartir la imagen por toda la pgina. Curiosamente, cuanto ms pequea sea la imagen mejor, pues antes se cargar. A la hora de escoger una imagen de fondo, no os dejis engaar por el sugerente dibujo de una textura cualquiera. Al igual que con el color de fondo, el color de la imagen debe de contrastar con el color del texto. Si colocamos los atributos BGCOLOR y BACKGROUND en al etiqueta <BODY>, siempre prevalecer el BACKGROUND sobre el BGCOLOR, aunque este segundo se cargar primero. la imagen que se ponga de fondo puede ser de formato GIF (Graphic Interchange Format), JPEG (Joined Photograph Expert Group) o el nuevo PNG (Portable Networking Graphics), aunque os recomiendo los dos primeros, pues el tercero no lo aceptan todos los navegadores. Ejemplo:
<BODY BGCOLOR=SILVER BACKGROUND="Textura_gris.gif"> Como primero se cargar el color he puesto

un color parecido al que dar la textura, que por cierto, es la que podis ver en esta pgina. BGPROPERTIES, TOPMARGIN, LEFTMARGIN (propiedades de fondo, margen superior y margen inferior). Estas tres propiedades las explico juntas porque no son propias del estndar HTML, sino que son slo para el navegador Internet Explorer 3.x o superior. BGPROPERTIES=FIXED hace que la imagen de fondo permanezca esttica cuando se utiliza la barra de desplazamiento vertical, en vez de acompaar al texto. Esto hace que cree un efecto de marca de agua la mar de chulo (lstima que no se vea en Netscape!). Por supuesto, slo sirve si se pone una imagen de fondo. TOPMARGIN y LEFTMARGIN sirven para establecer una anchura en pixeles del margen superior y del margen izquierdo, para todos aquellos que no les gusta que el texto este demasiado pegado a los extremos. Ejemplo:
<BODY BACKGROUND="Agua.jpg" BGPROPERTIES=FIXED TOPMARGIN=15 LEFTMARGIN=20> Sobran palabras para

describirlo. Hasta aqu el segundo captulo de este fabuloso manual (bueno, qu pasa?, es mi pgina y la llamo como quiero!). El siguiente captulo trata las Listas (listas de definicin, listas ordenadas y listas desordenadas o de vietas) y los smbolos del cdigo ASCII que se utilizan en el cdigo HTML.
http://personal1.iddeo.es/joseriki/m_format.htm (6 de 7) [18/11/2000 16:23:07]

Captulo 2. Aplicar formatos a las pginas

Ahora slo os falta poner a prueba vuestros recin adquiridos conocimientos realizando este sencillo test de 10 preguntas. Si consegus entre un 50% y un 70% de acierto es que os ha ido la mar de bien.

Este manual ha sido ntegramente elaborado con el sudor y el coco de Jos Luis Iglesias Jckle. En el caso de que queris copiarlo, pedid permiso a vuestra mam y no quitis el nombre del autor, ok? La ltima vez que se me ha ocurrido modificar este manualillo fue ayer mismo, 20/09/99

Yo me vuelvo a la seccin

http://personal1.iddeo.es/joseriki/m_format.htm (7 de 7) [18/11/2000 16:23:07]

Captulo 3. Las listas y los smbolos del HTML

Las Listas
l igual que un procesador de textos convencional, el HTML permite agrupar frases en forma de lista para que quede ms presentable, bonito y dems. Una lista no es ms que una enumeracin de elementos, aunque las hay de diferentes tipos: las listas numeradas, las listas de vietas y las listas de definicin. Las primeras son las que utilizan nmeros para hacer referencia al elemento de la lista, indicando que el orden de stos es importante; por eso tambin se las conoce como listas ordenadas. Las segundas, las de vietas (bullets, topos, puntitos o lo que sea), son las que utilizan smbolos para hacer referencia al elemento y, por lo tanto, el orden no suele ser importante; en HTML se las conoce como Unordered Lists (listas desordenadas). Por ltimo, tenemos las listas de definicin, que son las que se utilizan en los diccionarios para describir un trmino. Pero lo mejor es que veamos como funcionan y seguro seguro que nos queda ms claro qu son.

Listas numeradas
ara crear una lista numerada se utiliza la etiqueta <OL> (Ordered List -Lista Ordenada-) y cuando queramos acabar con sta deberemos cerrarla mediante la etiqueta </OL>. Una vez creada la estructura, para cada uno de los elementos de la lista colocaremos la etiqueta <LI> (List Item -tem de la lista-); <LI> es una etiqueta de cierre implcito, que, como seguro que recordamos (verdad?), significaba que no era necesario cerrarla mediante </LI>, pero que si lo hacamos no pasaba nada.
<OL> <LI> Primer Elemento <LI> Segundo Elemento <LI> Tercer Elemento </OL>

A la izquierda observamos el cdigo que dara lugar a la lista de la derecha. Si es que est chupao!

1. Primer Elemento 2. Segundo Elemento 3. Tercer Elemento

os nmeros de la lista siempre son del mismo tamao y el hecho de aumentar la letra no hace que stos tambin aumenten (OOOoooohhh!, Qu lstima!). Y no slo eso, sino que el color de estos nmeros depende del color por defecto del texto de la pgina Web, as que no los podemos colorear mucho que digamos. Adems, la etiqueta <OL> hace que la lista aparezca sangrada, lo cual, en determinados casos provoca un efecto que no es de nuestro agrado (pero slo para los muy exigentes, ya se sabe). Este es uno de los muchos motivos por los cuales mucha gente prefiere escribir los nmeros sin usar estas etiquetas y luego ponerles directamente el formato para que queden ms o menos as:

1. Primer Elemento 2. Segundo Elemento 3. Tercer Elemento

1.- Primer Elemento 2/ Segundo Elemento 3) Tercer Elemento

1. Primer Elemento 1.1. Segundo Elemento 1.1.1 Tercer Elemento

ero no todo son carencias y problemas de diseo. La etiqueta <OL> permite cinco tipos de listas diferentes que podremos elegir a partir de la modificacin de un atributo opcional llamado TYPE (tipo). Este atributo nos permite elegir entre 5 tipos diferentes de listas: las de nmeros, las de letras en maysculas, la de letras en minsculas, la de nmeros romanos en minsculas y la versin de stos en maysculas; para ello slo debemos poner como valor de TYPE las palabras : A, a, I o i. Por ejemplo, <OL TYPE=A> dara como resultado una lista alfabtica. Estos son algunos modelos: Sin TYPE 1. Primer Elemento 2. Segundo Elemento 3. Tercer Elemento Mediante TYPE=A . Primer Elemento B. Segundo Elemento C. Tercer Elemento Mediante TYPE=a Mediante TYPE=I Mediante TYPE=i . Primer Elemento b. Segundo Elemento c. Tercer Elemento I. Primer Elemento II. Segundo Elemento III. Tercer Elemento i. Primer Elemento ii. Segundo Elemento iii. Tercer Elemento

http://personal1.iddeo.es/joseriki/m_listas.htm (1 de 4) [18/11/2000 16:23:32]

Captulo 3. Las listas y los smbolos del HTML

dems de este atributo, <OL> tambin tiene el atributo START (comienzo) igual a un nmero, el nmero por el que quiero que empiece la lista; de esta manera, si creo, por poner un ejemplo, una lista con 6 elementos, luego escribo uno o ms prrafos o inserto una imagen, tabla, formulario, etc. y despus quiero continuar por el elemento 7 de la lista, slo tendr que aadir el atributo START = 7 y listos (aunque sea una lista alfabtica tambin se pone un nmero en START, nunca una letra). Estos son algunos ejemplos: <OL START=8> 8. Primer Elemento 9. Segundo Elemento 10. Tercer Elemento <OL TYPE=A <OL TYPE=I <OL TYPE=a START=15> START=74> START=96> O. Primer Elemento XLVI. Primer Elemento rrrr. Primer Elemento P. Segundo Elemento XLVII. Segundo Elemento ssss. Segundo Elemento Q. Tercer Elemento XLVIII. Tercer Elemento tttt. Tercer Elemento

omo se observa en estos ejemplos, en el caso de las listas de letras, cuando pasamos de la Z empezamos con pares de letras, en plan AA, AB, AC, hasta la ZZ y despus continuaramos con nmeros. Pero como no creo que lleguis a una lista de ms de 200 elementos no hay motivo por el que preocuparse (UUUUFF!). ara acabar con este tipo de listas, slo hace falta hacer mencin a los atributos que pueden aparecer en la etiqueta <LI>: VALUE y TYPE. El atributo TYPE hace lo mismo que en la etiqueta <OL>, pero si lo pongo en un elemento de la lista, cambiar el tipo a partir de ese elemento. En atributo VALUE sirve para poner un valor diferente en un elemento de la lista. Por ejemplo, en una lista numerada alfabtica de la A a la M, pongo en el elemento 5 (la E) el VALUE=15 y la lista pasar de la D a la O y seguir con la P hasta la W. Algo como esto:
<OL TYPE=A> <LI> Primer Elemento <LI TYPE=I> Segundo Elemento <LI> Tercer Elemento </OL>

. Primer Elemento B. Segundo Elemento C. Tercer Elemento

<OL TYPE=A> <LI> Primer Elemento <LI VALUE=6>Segundo Elemento <LI>Tercer Elemento </OL>

. Primer Elemento B. Segundo Elemento C. Tercer Elemento

Listas de vietas
as listas de vietas son las ms utilizadas de las tres, aunque no se suelen hacer con las etiquetas propias del HTML, sino con imgenes. Para crear una lista de vietas con HTML se utiliza la etiqueta <UL> (Unordered List -Lista desordenada-) conjuntamente con la de cierre </UL> y las de los elementos <LI>. Al igual que en las listas numeradas, existe un atributo para <UL>, el TYPE, que puede ser igual a CIRCLE, SQUARE o DISC, segn queramos una circunferencia, un cuadrado del color de la letra por defecto o un crculo tambin con color. ste es un ejemplo: <UL TYPE=CIRCLE> Primer Elemento H Segundo Elemento H Tercer Elemento
H

<UL TYPE=SQUARE> Primer Elemento I Segundo Elemento I Tercer Elemento

I

G G G

<UL TYPE=DISC> Primer Elemento Segundo Elemento Tercer Elemento

l valor DISC es el valor por defecto, as que si soy muy vago y no le pongo el atributo TYPE, aparecer el puntito negro por defecto. Algunas versiones de Explorer no aceptan este atributo y slo aparece el disquito escuchimizao este. Adems este atributo tambin se puede poner en la etiqueta <LI>, como ya suceda en las listas numeradas. S, ya s que no parecen gran cosa, por eso se utilizan ms bien poco. La mayora de la gente utiliza listas de vietas con imgenes como las que se ven en este ejemplo: Primer Elemento Segundo Elemento Tercer Elemento Primer Elemento Segundo Elemento Tercer Elemento Primer Elemento Segundo Elemento Tercer Elemento Primer Elemento Segundo Elemento Tercer Elemento

a me diris si no quedan mucho mejor. El mayor problema y que ocupan ms espacio (aunque no mucho ms) y que son un poco ms complicadas de poner, porque para que un elemento de la lista aparezca debajo de otro deberemos utilizar la etiqueta <BR> y nunca la <LI> o sino tendremos las vietas del HTML y las de las imgenes. En fin, en vuestras manos est tomar la decisin ms acertada para cada momento
http://personal1.iddeo.es/joseriki/m_listas.htm (2 de 4) [18/11/2000 16:23:32]

Captulo 3. Las listas y los smbolos del HTML

Listas de definicin
Lista de definicin Dcese de la lista que tiene dos elementos (trmino a definir y definicin de ste). Se utiliza para definir trminos en plan diccionario o para lucir nuestros conocimientos de HTML con la vecina del tercero. Como ya os habris dado cuenta, esto es una lista de definicin, aunque la negrita del trmino definido se la he puesto yo por mi cuenta. ara crear una lista de definicin se utilizan tres etiquetas: <DL> (Definition List -Lista de definicin-), que sirve para crear la estructura y que debe cerrarse obligatoriamente mediante </DL>. Despus, cada elemento de esta lista se compondr de dos partes: <DT> (Definition Term -Trmino de la definicin-) y <DD> (Definition description -Descripcin de la definicin-). Estas dos etiquetas son de cierre implcito, as que no ser necesario cerrarlas. La etiqueta <DT> no muestra ningn formato en especial, pero, gracias a ella, la segunda etiqueta, <DD> aparecer sangrada por la izquierda y slo por la izquierda, no como la etiqueta de prrafo <BLOCKQUOTE> que sangra a los dos lados. Al poner una nueva etiqueta <DT> volver a su posicin inicial en el siguiente prrafo. He aqu el ejemplo que os sacar de toda duda existencial, material y terminolgica (qu bien me ha quedao esto!):
<DL> <DT> <DD> <DT> <DD> </DL> HTML HyperText Mark-up Language o Lenguaje de marcas de hipertexto, o lo que es lo mismo, lenguaje para hacer pginas web. Profesor de HTML Individuo que se lo pasa bomba haciendo pginas web y que, si le sobra tiempo, intenta comunicar sus conocimientos sobre la materia.

HTML HyperText Mark-up Language o Lenguaje de marcas de hipertexto, o lo que es lo mismo, lenguaje para hacer pginas web. Profesor de HTML Individuo que se lo pasa bomba haciendo pginas web y que, si le sobra tiempo, intenta comunicar sus conocimientos sobre la materia.

Los Smbolos ASCII en HTML

e da en la nariz que ya debis de estar un poco cansados de tanto HTML, as que el prximo tema ser breve, brevsimo. Un problema del que no hemos hablado todava es el de los smbolos que se utilizan en las pginas. Imaginemos que queremos poner una frmula matemtica y utilizamos los smbolos "<", "=" o ">". El navegador podra interpretar estos smbolos como el comienzo o el final de una etiqueta o como el valor de un atributo. Pare evitar un posible conflicto entre los caracteres de nuestra pgina, existen una serie de smbolos que nos permitirn insertar estos elementos y cualquier otro del lenguaje que sea. a estructura de estos smbolos consta de tres elementos: comienzan por el smbolo ampersan (&) y acaban por el punto y coma (;); entre estos dos elementos deber ir la palabra que definir el smbolo que vamos a utilizar. As, por ejemplo, si queremos aadir un smbolo de mayor que (>), deberemos utilizar este texto: &gt;. Si deseamos utilizar el smbolo de Copyright usaremos &copy; y si deseamos poner un espacio de ms podemos probar con &nbsp;. Cuando lo que deseamos es utilizar diacrticos (acentos graves y agudos, diresis, tildes, etc.) deberemos aadir al smbolo la letra a la cual le vamos a colocar el diacrtico. Por ejemplo, una "a" acentuada sera &aacute; y una "O" mayscula acentuada sera &Oacute;. i queris saber qu smbolos podemos utilizar del alfabeto europeo occidental (conocido como el Latin-1), slo tenis que ir al apartado de smbolos del HTML que se encuentra en esta web. Los smbolos que all no aparecen es porque no son necesarios. Por ejemplo, est el smbolo "" de apertura de interrogacin (&iquest;), pues los britnicos no lo tienen, pero no est el smbolo de cierre de interrogacin "?", pues ste aparece en todas las lenguas del Latin-1. Por ltimo, slo me queda deciros que estos smbolos siempre deben de ir en minsculas, menos, por supuesto, la letra implicada, como en el caso de la "O" mayscula acentuada (&Oacute;), donde la "O" aparece en mayscula pero el resto no.

Hasta aqu el tercer captulo del manual de HTML con ms clase y chavacanera de por estos alrededores. El captulo que viene por fin empezaremos con elementos grficos: las imgenes y las lneas horizontales. Seguro que ya estis ansiosos por meteros delante de la pantalla a aprender un poquito ms este fenomenal lenguaje, pues no lo dejis para maana. Este captulo no tiene test, as que si queris saber hasta dnde llega vuestra sabidura en este tema deberis ir al Test del captulo de las imgenes. Este manual ha sido ntegramente elaborado con el sudor y el coco de Jos Luis Iglesias Jckle. En el caso de que queris copiarlo, pedid permiso a vuestra mam y no quitis el nombre del autor, ok? La ltima vez que se me ha ocurrido modificar este manualillo fue ayer mismo, 20/09/99
http://personal1.iddeo.es/joseriki/m_listas.htm (3 de 4) [18/11/2000 16:23:32]

Captulo 3. Las listas y los smbolos del HTML

Yo me vuelvo a la seccin

http://personal1.iddeo.es/joseriki/m_listas.htm (4 de 4) [18/11/2000 16:23:32]

Captulo 4. Las imgenes y las lneas horizontales

Introduccin a las Imgenes

por fin ha llegado ese captulo que todos estabais esperando rabiosamente; porque una pgina Web sin imgenes es como un rbol sin hojas: TRISTE (me parece que es un proverbio chino,... o andaluz). Pero tampoco conviene pasarse con la cantidad, pues todas las cosas tienen sus justa medida (lo siento, pero hoy me he levantado de un refranero subido). No deberamos poner demasiadas imgenes en una pgina y, sobre todo, stas no deben ser de ms de 100 Kbytes y si lo son intentad ponerlas en forma de Thumbnail (no os preocupis, luego os explico qu rayos quiere decir esto). Lo primero que vamos a ver es cmo se inserta una imagen en una pgina y luego ya hablaremos de los posibles atributos de stas, de los diferentes formatos que aceptan los navegadores y de algunos truquillos que siempre van bien a la hora de disear nuestra pgina. ues bien, para insertar una imagen usaremos la etiqueta <IMG> (Image -Imagen-), aunque ella sola no puede hacer nada, necesita obligatoriamente de un atributo SRC (Source -Fuente u origen-) que ser igual a la imagen que queramos insertar. Claro, es normal; si le decimos al navegador "inserta una imagen" y no le decimos qu imagen ha de insertar, el pobre no har nada de nada (s, ya s que hay quien piensa: "pues ya podra adivinarlo el ordenador, que dicen que ahora son tan listos y tal y tal)". Pues no, no adivinan nada. Si quiero poner la imagen Pepito.gif deber poner esta etiqueta: <IMG SRC="Pepito.gif">. Por supuesto, esto ser as siempre y cuando la imagen se encuentre en el mismo directorio que la pgina web. Si se encuentra dentro de una carpeta (por ejemplo, la carpeta Imgenes) un nivel por debajo, la etiqueta ser esta otra: <IMG SRC="Imgenes/Pepito.gif">. Si queris evitaros quebraderos de cabeza con este tema, os aconsejo que metis vuestras pginas, imgenes y todo tipo de ficheros que utilicis para vuestras pginas, en el mismo directorio. Pensad que, aunque en vuestro ordenador se vea bien, luego no se quedar en l, sino que la enviaris va FTP hacia vuestro servidor, y una vez all, la ruta que le hayis puesto (si es algo as como SRC="file:///c|/Mis pginas web/mis imgenes/Pepito.gif"), no tiene porqu funcionar. Bueno, luego volveremos con este tema, pero ahora vamos a ver qu atributos se le pueden poner a la etiqueta <IMG>.

Atributos
Los atributos que describiremos a continuacin son todos opcionales, aunque algunos como ALIGN, BORDER o ALT se utilizan muy, pero que muy a menudo.

http://personal1.iddeo.es/joseriki/m_imagen.htm (1 de 8) [18/11/2000 16:23:56]

Captulo 4. Las imgenes y las lneas horizontales

ALIGN
(Alignement -Alineacin-)

Este atributo puede ser igual a los siguientes valores: LEFT, RIGHT, CENTER, MIDDLE, ABSMIDDLE, BASELINE, BOTTOM, ABSBOTTOM , TOP y TEXTTOP. De entre todas estas posibles maneras de alinear una imagen respecto a la pgina y el texto de su alrededor, slo hay dos que permiten que el texto de un prrafo fluya al lado de la imagen: LEFT y RIGHT. Mediante estos valores podremos alinear la imagen a la izquierda o derecha de la pgina y, al mismo tiempo que el texto fluya a su alrededor, como se observa en las letras capitales que aparecen al principio de cada prrafo.. El atributo CENTER, como cabra suponer, no alinea la imagen en el centro de la pgina, sino que hace que la primera del prrafo aparezca a media altura de la imagen. de hecho, todos los valores menos el LEFT y el RIGHT se comportan de una forma parecida, cambiando solamente la posicin de esta primera lnea del prrafo respecto a la imagen. De esta manera, tenemos que MIDDLE, ABSMIDDLE y CENTER hacen lo mismo (pues apenas se observa la diferencia), colocar la primera lnea a media altura de la imagen; BOTTOM, ABSBOTTOM y BASELINE colocan la primera lnea del prrafo al pie de la imagen (aunque BOTTOM parece que la coloca una pizca ms arriba); por ltimo, TEXTTOP y TOP la colocan a la cabeza de la imagen. Menos los dos primeros valores citados, los dems slo se utilizan con imgenes pequeas, aunque tambin lo puedes hacer con imgenes grandes (All t y tu conciencia!) Estos atributos sirven para dejar un espacio (en pixeles) entre la imagen y otro elemento (imagen o texto). Vamos, para que no aparezca el texto pegado literalmente a la imagen, que no suele quedar muy fino que digamos. VSPACE deja espacio por encima y por debajo de la imagen y HSPACE por ambos lados de la imagen. En las letras capitales antes citadas se ha colocado el atributo HSPACE = 4 y ya veis lo bien que ha quedado, o no? S, ya s que ste no necesitaba traduccin, pero lo hago para mantener el diseo de la pgina. Este atributo es igual (en pixeles) al grosor del borde de la imagen, pero este borde slo es visible cuando la imagen funciona como enlace de hipertexto. Lo cierto es que hasta la fecha no conozco ninguna pgina que utilice este atributo para poner bordes gruesos a sus imgenes; el valor que se utiliza es prcticamente siempre el 0, para evitar precisamente que aparezca dicho borde y nos destroce la apariencia transparente de algunas imgenes. As que ya lo sabis, un BORDER = 0 puede sernos de gran utilidad con las imgenes que hacen de enlace.

VSPACE y HSPACE
(Vertical Space y Horizontal Space -Espacio vertical y horizontal-)

BORDER
(Border -Borde-)

http://personal1.iddeo.es/joseriki/m_imagen.htm (2 de 8) [18/11/2000 16:23:56]

Captulo 4. Las imgenes y las lneas horizontales

HEIGHT y WIDTH
(Height y Width -Alto y ancho-)

Estos dos atributos permiten cambiar el tamao real de la imagen en pixeles o en porcentaje. No obstante, su uso no es muy frecuente debido a un par de detalles que hay que tener en cuenta: si hacemos ms pequea una imagen slo estamos provocando que se vea ms pequea, pero tardar el mismo tiempo en llegarnos al navegador, pues lo que cambiamos es la manera de mostrarla el navegador, no el tamao en s. Si lo que deseamos es que ocupe menos, deberemos cambiar su tamao desde un programa de retoque de imgenes como PhotoShop, PhotoPaint, PhotoStyler, PaintShopPro, etc. Si por el contrario la hacemos ms grande, debemos tener cuidado con el aumento que realizamos, pues al aumentar el tamao del pixelado en exceso la imagen perder nitidez. Si en vez de cambiar el tamao mediante pxeles lo hacemos en porcentaje, debemos tener en cuenta que ello puede producir un deformacin considerable de la imagen, pues no se ver igual en monitores con resolucin de pantalla de 640 x 480 que con los de 800 x 600, y hoy en da son dos tipos de resoluciones muy comunes en Internet. Cuando creamos una galera de imgenes pequeitas que enlazan con la misma imagen en grande deberamos utilizar el mtodo de los Thumbnails en vez de hacerlas pequeas mediante estos atributos. Pero si an as no os he convencido, la manera de poner estos atributos sera, por ejemplo, algo as: HEIGHT = 300 o HEIGHT = 35%. Este atributo s que se utiliza mucho y ms con los nuevos navegadores que han aadido una caracterstica adicional a ste. El atributo ALT es igual a un texto, al texto que queramos que aparezca en la posicin de la imagen mientras esta se carga o en el caso de que esta no se cargue (pues podemos tener desactivada la opcin del navegador para visualizar imgenes). Para los navegadores Netscape Navigator 4.0 e Internet Explorer 3.0 y 4.0, se le aade una funcin, conocida por los programadores como ToolTipText, y que no es ms hacer aparecer el texto que lleva este atributo cuando dejamos el puntero encima de la imagen. Para los que utilizis programas de Windows, es ese titulito de fondo amarillo que aparece cuando dejamos un par de segundos el puntero encima de un botn. No olvidis que el texto siempre debe ir entre comillas: ALT = "Esta imagen lleva un texto muy chulo", como en este ejemplo. Este atributo era, hasta la aparicin de la versin 4 de Netscape, exclusivo de Internet Explorer, pues es propiedad de Microsoft, no un atributo del estndar HTML 3.2. Pero a Netscape le gust y lo incorpor a la ltima versin de su famoso navegador, aunque el efecto que crea en ste no es el mismo que en el Internet Explorer. La utilidad de este atributo es la de mantener la atencin del internauta mientras se carga una imagen de gran tamao. Cuando una imagen es muy grande puede tardar varios minutos en cargarse, lo cual puede acabar con la paciencia del usuario, sobre todo, si no ve ni tan solo un poquitn de sta hasta pasados 30 o 50 segundos. Pero si, mientras se carga esta imagen, apareciese alguna otra imagen que nos mantuviera atentos hasta que acabase de cargarse la grande, seguro estaramos ms contentos. Este es el fin de esta etiqueta; LOWSRC ser igual a una imagen de menor resolucin que la grande, aunque puede ser del mismo tamao en pxeles. Al ser de baja resolucin y con menos colores, se ver peor pero se

ALT
(Alternative Text -Texto alternativo-)

LOWSRC
(Low Source -Carga alternativa-)

http://personal1.iddeo.es/joseriki/m_imagen.htm (3 de 8) [18/11/2000 16:23:56]

Captulo 4. Las imgenes y las lneas horizontales

cargar mucho antes, para que as ya veamos algo aunque no sea una imagen fantstica. De este modo, se cargar primero la imagen de baja resolucin (la que est en el atributo LOWSRC) y cuando acabe de cargarse la imagen de alta resolucin (la que est en el atributo SRC) desaparecer la primera para mostrar la segunda. El problema est con Netscape, pues el tamao en pxeles de ambas imgenes deber ser el mismo, ya que la imagen de alta resolucin se cargar en el espacio que ocupaba la imagen de baja resolucin. La manera de incluirlas sera sta:
<IMG SRC = "AltaResolucion.jpg" LOWSRC = "BajaResolucion.jpg">

Los formatos de las imgenes

xisten tres formatos para las imgenes en Internet (GIF, JPEG y PNG), aunque en realidad se utilizan bsicamente dos: GIF y JPEG. Dependiendo de la calidad con la que queramos visualizar la imagen, el tiempo de carga en el navegador, el tiempo de transferencia por Internet, el detalle de la imagen, los efectos que le queremos dar a la imagen, etc. escogeremos un formato u otro. Para ayudaros en esta difcil eleccin vamos a ver qu caractersticas tienen cada uno de estos formatos.

GIF (Graphics Interchange Format) es un formato propiedad de la empresa Compuserve. Existen dos
tipos: el 87a y el 89a, de los cuales el ms utilizado hoy en da es el segundo ya que permite los efectos de transparencia, entrelazado y compilacin de imgenes de los cuales hablaremos a continuacin. Entre las caractersticas que definen este lenguaje tenemos las siguientes: G Color de 8 bits (256 colores). Ideal para dibujos, iconos, logotipos y, en general, imgenes que no requieran de una definicin excelente. G Compresin sin prdidas mediante el algoritmo LZW, propiedad de UniSys. Este algoritmo permite que al guardar una imagen de 256 colores en formato GIF, no sufra ningn tipo de prdida en los detalles. G Un color transparente. Mediante un programa de edicin de imgenes o uno de tantos editores de HTML que hay en el mercado, podemos hacer que uno de los colores de la imagen pase a ser transparente. Este color suele ser el de fondo de la imagen, con lo cual no se ver el contorno y parecer que est superpuesta en el texto. Ejemplo de ello es la imagen de la mano que se observa un poco ms arriba. G Entrelazado. El efecto de entrelazado consiste en hacer que el navegador no cargue la imagen lnea a lnea, sino en lneas alternativas: la primera, luego la cuarta, la octava, etc. Esto provoca ese efecto que vemos a menudo en las imgenes: al principio ya se ve casi toda la imagen, pero borrosa y, a medida que se va cargando, se va dilucidando mejor su contenido. G Imgenes animadas. Este formato permite juntar varias imgenes y compilarlas mediante un programa especial para ello para generar lo que se denomina un GIF animado. Los programas que se encargan de compilar estas imgenes pueden tambin crear banners y transiciones de todo tipo entre las imgenes, lo cual los hace casi indispensables hoy en da para cualquier diseador de pginas web. Entre los ms conocidos tenemos programas como Gif Construction Set, MS-Gif Animator, Animagic Gif, PhotoImpact Gif Animator, Egor 3.4, o incluso algunos que generan gifs animados en tres dimensiones como Xara 3D, Crystal 3D Impact o el fabuloso Ulead Cool 3D. La
http://personal1.iddeo.es/joseriki/m_imagen.htm (4 de 8) [18/11/2000 16:23:56]

Captulo 4. Las imgenes y las lneas horizontales

mayora son shareware y los podis encontrar en Internet o en algn CD-Rom de las principales revistas de informtica (PCActual o PCWorld).

JPEG (Joined Photograph Expert Group): En la dcada de los 80 se form un consorcio de grafistas,
fotgrafos e informticos con la intencin de desarrollar un formato de compresin mejor que el LZW (y a la vez no tener que pagar royalties a UniSys por usar el algoritmo LZW de su propiedad). Lo cierto es que lo consiguieron y hoy por hoy es el formato que comprime ms de cuantos hay, aunque es un tipo de compresin con prdidas. Cuanto ms comprimamos la imagen, ms detalles perderemos. Estas son algunas de las caractersticas que lo definen. G Color de 24 bits (16,7 millones de colores). Pues s, como lo os. Tiene ms colores que los sombreros de Paco Clavel. Este formato es ideal para imgenes de calidad fotogrfica como paisajes, la foto de la familia o el rostro de mi querida Aitana Snchez-Gijn. G Tamao reducido. Gracias al extraordinario algoritmo de compresin que utiliza, podremos comprimir una imagen 10 veces ms de lo que lo hara el algoritmo LZW con una imagen GIF. De esta manera, y aunque parezca increble, una imagen JPEG suele ocupar menos que una GIF del mismo tamao en pantalla. El inconveniente es que este formato de compresin es con prdidas, es decir, la imagen comprimida no ser la misma que la original. Como no quiero agobiaros con rollos filosficos si estis interesados en saber cmo funciona este sistema de compresin, slo tenis que enviarme un e-mail solicitndomelo. Eso s, este tipo de imgenes tardan ms en cargarse una vez han llegado al navegador que las GIF, aunque es cuestin de pocos segundos. G Diferentes grados de compresin. Cuando pasis una imagen a formato JPEG tendris la opcin de escoger entre 10 grados de compresin; cuanto mayor sea la compresin, peor ser la definicin de la imagen. Si pensamos en poner imgenes para que los usuarios hagan psters o se deleiten con los detalles, es mejor comprimirlas poco, pero si son slo para mostrar una cara como la ma, la podis comprimir tanto como queris (seguro que ms de uno os lo agradecer). G Sin Efectos. Los efectos que queramos hacer no dependern del formato sino de nuestra habilidad con el programa editor de imgenes. De este modo, podremos simular fondos transparentes con los canales o efectos de sombreado que quedan la mar de chulos, pero ya podis olvidaros de las imgenes animadas (no obstante, siempre tenis la posibilidad de convertir a GIF las imgenes JPEG).

PNG (Portable Networking Graphics). Este es un formato que fue creado para no tener que pagar
derechos a UniSys por su formato de compresin LZW. Parece ser que se trata de un formato intermedio entre GIF y JPEG, pues admite muchos colores y ocupa menos que un GIF. Pero su gran inconveniente es que los navegadores necesitan, de momento, un Plugin para poder visualizar este tipo de imgenes, motivo ms que suficiente para que los diseadores no lo incluyan en sus pginas, ya que estn seguros que la mayora de las personas hoy da conectadas a la Red no tienen instalado este Plugin. Los ltimos navegadores empiezan a incorporar de serie este plugin, as que veamos cules son sus caractersticas. G Color de 16bits (65.000 colores). No tiene tantos colores como el JPEG, pero os aseguro que son ms que suficientes para ver una imagen con calidad fotogrfica G Tamao reducido. Este formato utiliza un nuevo formato de compresin a caballo entre el JPEG y el LZW, aunque ocupa un poco ms que este primero. Lo bueno es que ocupa ms o menos como el GIF, pero tiene ms colores, as que vale la pena. G Entrelazado y transparencia. Al igual que el formato GIF, este formato permite el entralazado y una capa de transparencia. El entrelazado es doble; es decir, carga las lneas de arriba a abajo y de
http://personal1.iddeo.es/joseriki/m_imagen.htm (5 de 8) [18/11/2000 16:23:56]

Captulo 4. Las imgenes y las lneas horizontales

izquierda a derecha, haciendo dos barridos, lo cual hace que se cargue antes. Es una lstima que no est muy de moda. dems de estos tres formatos, tambin podemos encontrarnos con imgenes de otro tipo, como las animaciones de MacroMedia Director, Macromedia Flash, Macromedia Shockwave o Corel Draw, pero se necesitan Plugins propios de estas casas para poder visualizarlos, as que no os comis ms el coco y seguid con las GIF y JPEG, que no tendris problemas. Un hurra por el GIF! HURRA!, Un hurra por el JPEG! HURRA HURRA! Ah, se me olvidava! La resolucin de la imagen que se usa en Internet es bsicamente la de 72 puntos por pulgada; si las guardamos con una mayor resolucin para ver mejor los detalles slo conseguiremos que las personas que visiten nuestra pgina se cansen de esperar, pues ocupan ms espacio y apenas se nota la diferencia (a menos que la imagen sea enorme, lo cual retrasar cuantiosamente el tiempo de carga).

Lneas horizontales
, ya s que una lnea horizontal no es una imagen, pero es un elemento grfico la mar de chulo que nos puede servir, entre otras cosas para separar captulos o apartados de una pgina, como hago yo con sta. Las lneas horizontales se pueden hacer con HTML o insertando una imagen. La primera opcin es ms sencilla y ocupa menos espacio, pero la segunda nos permite mucha ms variedad de formas y un mayor colorido. ara insertar una lnea horizontal con HTML se utiliza la etiqueta nica <HR> (Horizontal Rule -Barra horizontal-). Esta etiqueta, como la mayora, permite varios atributos que modificarn su apariencia. Si solamente utilizamos la etiqueta sin atributos, tendremos una lnea que ir de lado a lado de la pgina y que tendr un efecto de relieve, o hundido si prefers, que le da un toque de distincin. pero una imagen vale ms que mil palabras, as que ah va una y luego os muestro los atributos.
G

WIDTH (ancho): Este atributo nos permitir darle longitud a la lnea, es decir, qu parte de la pantalla va a ocupar a lo largo. El valor que utilizaremos para darle longitud podr ser en pxeles o en porcentaje. En este caso se utiliza ms el sistema de porcentaje que el de pxeles, pues generalmente queremos que ocupe una parte determinada de la pantalla (el 50%, el 70%, etc.) y si le ponemos la medida en pxeles no vern el mismo tamao los que tengan resoluciones distintas de pantalla. Esta lnea tiene una anchura del 40%. <HR WIDTH = 40% ALIGN = LEFT> SIZE (tamao). El tamao hace alusin a su altura o grosor, tambin determinado en pxeles. Por defecto, el tamao es de 2 pxeles y no conviene pasar de ms de 20, porque entonces, ms que una lnea parece un cuadro. Esta lnea tiene un grosor de 10 pxeles. <HR SIZE = 10 ALIGN = CENTER
WIDTH = 80%>

ALIGN (alineacin). Este atributo puede ser igual a los tres valores tpicos de un prrafo: LEFT, RIGHT y CENTER. No hace falta decir que estos atributos slo los utilizaremos cuando la longitud de la lnea sea inferior a la de la pgina. Esta lnea est alineada a la derecha. <HR ALIGN = RIGHT
WIDTH = 40%>

NOSHADE (sin relieve): Este atributo hace que desaparezca el efecto de relieve que queda tan

http://personal1.iddeo.es/joseriki/m_imagen.htm (6 de 8) [18/11/2000 16:23:56]

Captulo 4. Las imgenes y las lneas horizontales

bien (particularmente, es lo nico que me gusta de este elemento). Esta lnea no tiene relieve <HR
NOSHADE>

Tambin existe un atributo que hace que la lnea aparezca de un color en detrimento del efecto de relieve; es el atributo COLOR = color cualquiera. No obstante, este atributo es slo visible en Internet Explorer, pero no es nada espectacular que digamos. l otro tipo de lneas son las que insertamos como imgenes, es decir, slo necesitaremos utilizar la etiqueta <IMG SRC = "nombre_de_la_lnea" y ya tendremos una lnea horizontal. Lo que ya es ms difcil es insertar una lnea vertical, pues debemos rotarla (o cambiarle el tamao de la anchura por el de la altura) y luego alinearla a la izquierda o a la derecha. Otra manera muy efectiva de colocarla es mediante una tabla, con lo cual puedes controlar dnde queremos que aparezca exactamente. Una clara muestra de la alineacin a la izquierda la tenemos en esta lnea de colores; para insertarla se ha utilizado la siguiente etiqueta <IMG SRC ="l_color.gif" HEIGHT=222 WIDTH=8 ALIGN =LEFT HSPACE =6 ALT ="Lnea puesta en vertical">. En cambio, para insertar esta misma lnea horizontalmente se ha utilizado la etiqueta <IMG SRC = "l_color.gif" WIDTH =100% ALT ="Lnea horizontal">.

Thumbnails y otros truquillos de inters

s frecuente ver en Internet enormes catlogos de productos, galeras de imgenes de todo tipo (s ya s en qu estis pensando, pervertidos!), interminables exposiciones de cuadros, etc. Como estas imgenes pueden llegar a tener un gran tamao, los diseadores las suelen mostrar una por pgina o mejor an, todas en la misma pgina pero en pequeito. Cuando la ves en pequeito ya te haces una idea y cmo es y si lo que deseas es verla en grande slo tienes que picar en un la misma imagen o en un enlace cercano que nos permita verla a lo bestia. ues bien, a la tcnica de crear una imagen pequea que enlace con la misma imagen en grande se conoce como Thumbnail (ua del pulgar). Para crear la rplica en pequeo, lo nico que necesitamos es abrir la imagen grande en cualquier editor de imgenes y a continuacin cambiar el tamao de sta, para luego guardarla con otro nombre. Es cierto que de este modo tenemos dos imgenes en vez de una, pero la pequea ocupar muy poco espacio y a cambio ganaremos en velocidad (recordad lo antes dicho sobre qu pasaba si hacamos pequea una imagen mediante los atributos HEIGHT y WIDTH). Si queris ver ejemplos de Thumbnails, slo tenis que visitar el final de mi seccin de "Ficha Personal"; all encontraris fotos de mis amigos y compaeros de trabajo en forma de thumbnail. tro de los trucos ms utilizados por los diseadores de pginas web es el del punto transparente. A menudo deseamos dejar un espacio determinado de X pxeles entre lneas o entre palabras, o para separar imgenes, crear sangras en primera lnea o sangras francesas. Qu s yo. Espacios en general. Pues bien, existe un truco que nos permitir hacerlo de una manera muy fcil y que no implicar un aumento de tiempo de carga de la pgina. Lo primero que debemos hacer es ir al un programa de edicin de imgenes (estilo PhotoShop) y crear una imagen nueva sobre fondo transparente con las dimensiones de 1 x 1 pxel; despus guardaremos tal imagen en formato GIF y ya est. Una vez creada esta imagen que podemos llamarla PuntoT.gif, la insertaremos all donde
http://personal1.iddeo.es/joseriki/m_imagen.htm (7 de 8) [18/11/2000 16:23:56]

Captulo 4. Las imgenes y las lneas horizontales

queramos dejar un espacio. Si el espacio que queremos dejar es a lo ancho de 25 pxeles slo deberemos poner la etiqueta con los atributos HEIGHT y WIDTH, como en este ejemplo. <IMG SRC = "PuntoT.gif" HEIGHT = 2 WIDTH = 60>. Sin ir ms lejos, yo acabo de conseguir una sangra en primera lnea utilizando este mtodo y como podis ver no slo es fcil de utilizar, sino que los resultados no pueden ser mejores. Adems tenemos la ventaja de que este tipo de imgenes ocupan menos de 1 KByte y que al estirarlas quizs aumente el pixelado y pierdan definicin, pero a quin le importa si son transparentes! ara aquellos que ya sabis cmo crear tablas, otro truco curioso consiste en poner una imagen de fondo de celda en vez de insertarla en la celda en cuestin. De esta manera nos aseguramos que la imagen ocupe todo el espacio reservado para la celda y no sobrar nada nada nada. El nico inconveniente es que slo sirve para los navegadores Netscape 4.0 y Explorer 3.0 y 4.0. Pero que le vamos a hacer, no todo iba a ser perfecto!, digo yo. or ltimo, si me permits un consejo, poned siempre el nombre de la imagen igual que como sta est grabada, es decir, si la imagen se llama Pepito.gif, no la pongis en la etiqueta como PEPITO.GIF, ni pepito.gif, pues en vuestro ordenador funcionar a las mil maravillas (si es un PC o un MAC ya que no distinguen entre maysculas y minsculas, pero en vuestro servidor es posible que no sea as, ya que la mayora de los servidores donde se alojan las pginas funcionan bajo el sistema operativo UNIX y este sistema S discrimina entre maysculas y minsculas y supondr que Pepito.gif y pepito.gif son ficheros distintos. Hasta aqu el cuarto captulo del mejor manual de HTML que hay en el mundo y parte de la galaxia lactosa (modestia aparte). El siguiente captulo tratar de explicaros todos los secretos de los enlaces de Hipertexto. . Ahora slo os falta poner a prueba vuestros recin adquiridos conocimientos realizando este sencillo test de 10 preguntas. Si consegus entre un 60% y un 80% de acierto, es que os ha ido la mar de bien.

Este manual ha sido ntegramente elaborado con el sudor y el coco de Jos Luis Iglesias Jckle. En el caso de que queris copiarlo, pedid permiso a vuestra mam y no quitis el nombre del autor, ok? La ltima vez que se me ha ocurrido modificar este manualillo fue ayer mismo, 20/09/99

Yo me vuelvo a la seccin

http://personal1.iddeo.es/joseriki/m_imagen.htm (8 de 8) [18/11/2000 16:23:56]

Captulo 5. Los enlaces de hipertexto

Los Enlaces de HiperTexto

na de las cosas que ha colaborado en mayor medida a la expansin y fama del servicio ms utilizado en Internet, la World Wide Web (WWW), es sin lugar a dudas el Hipertexto. El Hipertexto son esas palabras subrayadas y de color azul que a menudo vemos en las pginas web y que, al pulsar encima de ellas (cuando el puntero del ratn se ha convertido en una mano), nos conducen a otra pgina web que puede estar al otro lado del mundo, en un idioma que vete a saber quin lo entiende. A veces la gente se refiere al hipertexto con otros nombres como Hipervnculos, vnculos de texto, links, enlaces, hiperenlaces, etc. A m tanto me da, porque yo sigo prefiriendo llamarlos enlaces de hipertexto y eso es lo que voy a hacer durante este captulo. El HTML es un lenguaje de marcas que utiliza el hipertexto, pero no es el nico que existe (aunque quizs s el ms conocido hoy en da). Por poner un ejemplo, la ayuda que utilizan la mayora de los programas que tenemos instalados en el ordenador funcionan mediante hipertexto y, si no me creis, slo tenis que abrir cualquier programa que tengis, ir al apartado de la ayuda y buscad cualquier cosa; entre las explicaciones que os den es muy probable que tengis palabras de otro color que al pulsarlas os conducen a otro tema relacionado. Eso es hipertexto. xisten tres tipos de enlaces de hipertexto, fundamentalmente: los enlaces internos, los enlaces externos y los marcadores. Los dos primeros son enlaces a una pgina web determinada y el tercero es un enlace a una posicin concreta de una pgina web. Tambin existen las mezclas entre marcadores y los enlaces internos o externos, pero vamos a comenzar por lo ms sencillo o sino se os va a poner una cabeza como un bombo en una pera de Wagner.

Los Enlaces Internos

iempre que queramos crear un enlace, sea del tipo que sea, deberemos insertar la etiqueta <A> (Anchor -Ancla-), pero sta es de esas etiquetas que necesitan obligatoriamente de al menos un atributo, que no es otro que el que contendr el nombre del lugar al que vamos a hacer el enlace; este atributo es HREF (Hipertext Reference -Referencia de hipertexto-) y ser igual a la pgina web y ubicacin de sta si es necesario. Despus de poner esta etiqueta, introduciremos el texto o imagen que servir de enlace y por ltimo cerraremos la etiqueta mediante </A>. Por ejemplo, si yo tengo una pgina que se llama Gamascolores.htm que trata sobre los colores que se pueden poner en una pgina web (Qu casualidad! Porque en realidad s que la tengo) y deseo hacer en este mismo prrafo un enlace a esa pgina, debera poner esta etiqueta <A HREF="Gamascolores.htm">Pica aqu para ir a la pgina del Cubo de color </A> y quedara de la siguiente forma: Pica aqu para ir a la pgina del Cubo de color. Lo cierto es
http://personal1.iddeo.es/joseriki/m_hiper.htm (1 de 6) [18/11/2000 16:24:23]

Captulo 5. Los enlaces de hipertexto

que eso de poner Pica aqu... queda un poco cutre patatero; con poner "El cubo de color" ya hubiera sido ms que suficiente. ues bien, ste es un enlace interno, y se llama as porque enlaza con una pgina de mi misma web y no con una del vecino, ni con una pgina que est al otro lado del mundo. Para crear este enlace hemos utilizado una referencia de hipertexto relativa, lo cual quiere decir, ni ms ni menos que no hemos puesto la direccin completa en donde se encuentra esta pgina en Internet (http://personal.redestb.es/joseriki/Gamascolores.htm) Por qu? Pues muy sencillo, si hubisemos puesto <A HREF="http://personal.redestb.es/joseriki/Gamascolores.htm">Cubo color</A> habra funcionado exactamente igual que si hubisemos puesto slo <A HREF="Gamascolores.htm">Cubo color</A> debido a que la pgina Gamascolores.htm se encuentra en la misma carpeta (directorio) que la pgina que contiene el enlace, es decir, sta. Si tuviese la pgina Gamascolores.htm dentro de otra carpeta en mi web (que se llamase, vamos a poner, PepitosColors), la etiqueta del enlace debera ser algo as <A HREF="PepitosColors/Gamascolores.htm">Cubo color</A>. Ms adelante, el el apartado de Tipos de Referencias de Hipertexto, ya tocaremos ms en profundidad lo que se denomina el protocolo de fichero. Pero la diferencia fundamental entre poner una referencia relativa y una absoluta no es slo el espacio que ocupan, sino que la absoluta slo funciona en el servidor pero no en mi ordenador; en cambio, la relativa funciona en ambos sitios. na de las cosas a las que no les solemos dar importancia a la hora de escribir el cdigo de una pgina web es a las maysculas y minsculas. A menudo pensamos que es indiferente poner una palabra en maysculas o en minsculas o, como mnimo, inconsecuente, pero no es as. Resulta que si yo tengo una pgina web a la que he llamado Gamascolores.htm, puedo crear un enlace a esta pgina mediante la etiqueta <A HREF="Gamascolores.htm">Cubo color</A> o <A HREF="gamascolores.htm">Cubo color</A> o incluso <A HREF="GAMASCOLORES.HTM">Cubo color</A> y en nuestro querido sistema operativo funcionar a las mil maravillas a menos que ste sea UNIX, pues Unix es sensible a maysculas y minsculas y slo la primera de las tres opciones funcionara. Y ahora estaris pensando: "UUUUFF! Menos mal! Mi sistema operativo es Windows 95 o System Mac! No tengo que preocuparme de esto". Pues precisamente, sois los que debis preocuparos ms, porque cualquiera de las tres opciones anteriores se ver bien en vuestro ordenador, pero cuando subis la pgina a vuestro servidor en Internet (Y la mayora de los servidores todava funcionan bajo UNIX!) slo los que hayis seguido mi fantstico, sublime, ingenioso y acertado consejo tendris un enlace que funcione. Bueno, no tenis que darme ms las gracias; con ingresar un cheque de 4 cifras en mi cuenta bancaria ser suficiente. os enlaces internos no son slo para pginas web, pues a menudo haremos enlaces a imgenes, como en el caso de los thumbnails que ya vimos en el anterior captulo. Si deseamos que al pulsar sobre un enlace se cargue una imagen en vez de una pgina web, deberemos substituir la pgina.htm por una imagen GIF o JPEG. En este enlace podremos ver un ejemplo de lo que os digo y de paso disfrutaris un ratillo con mi querida Aitana, Que no va a ser todo estudiar! El cdigo que he utilizado para crear este enlace es <A HREF="Aitana1.jpg">Aitana</A> y si no me creis, peor para vosotros. dems de hacer enlaces a imgenes, tambin podemos hacer que una imagen acte como enlace. Para ello slo tenemos que incluir la etiqueta de insercin de la imagen, por ejemplo <IMG SRC="Pepito.gif">, en lugar del texto del enlace que va entre las etiquetas <A HREF="URL"> y </A>. Por poner un ejemplo ms claro, aqu tenis una imagen que es un enlace de hipertexto. Prueba
http://personal1.iddeo.es/joseriki/m_hiper.htm (2 de 6) [18/11/2000 16:24:23]

Captulo 5. Los enlaces de hipertexto

de ello es que, si situis el puntero del ratn encima de ella, ste se convierte en una mano y en la barra de estado del navegador aparece una direccin como http://personal.redestb.es/joseriki/personal.htm, indicando a donde conduce el enlace. Slo tenis que pulsar encima de la imagen y veris que os cargar la pgina de mi ficha personal. Por cierto, si no deseis que aparezca el borde azul de la imagen, recordad que tan slo necesitamos aadir a la etiqueta de la imagen el atributo BORDER=0.

Los Enlaces Externos

ues si os ha parecido que es fcil colocar un enlace interno, cuando veis cmo se pone un enlace externo seguro que pensaris: "Pero si esto est requetechupao!.Y yo sin probarlo antes!". Lo nico que no debemos olvidar es que, en los enlaces externos, debemos poner siempre (salvo en excepciones) la direccin de Internet completa: protocolo, DNS, carpetas y nombre del fichero si hace falta. Por ejemplo, si deseo que alguien entre en la pgina del buscador Ol a travs de mi pgina, puedo insertar esta etiqueta: <A HREF="http://www.ole.es">Buscador Ol</A>. Se llaman externos porque son externos a mi pgina web, pero podra ser que una persona quisiera hacer un enlace externo a una pgina de una persona que se halla ubicada en el mismo servidor que en el mo, de manera que no sera necesario poner la direccin absoluta, sino una direccin relativa, pero de esto ya hablaremos ms adelante. Con franqueza, os aconsejo que siempre utilicis referencias absolutas para vuestros enlaces externos y os evitaris algn que otro quebradero de cabeza. Si queris ver una lista enorme de este tipo de enlaces, podis visitar mi pgina de direcciones interesantes y observad el cdigo con el que sta ha sido desarrollada.

Los Marcadores
os dos primeros tipos de enlaces que hemos vistos son enlaces a pginas y al pulsar sobre ellos estaremos cargando un pgina de mi web, de Fulanito o de Menganito, pero en cualquiera de los casos, la pgina que se cargue nos aparecer desde el principio. Pero los enlaces de hipertexto no slo nos sirven para movernos por diferentes pginas, sino tambin por diferentes lugares de una misma pgina. Seguro que habis visto en incontables ocasiones un tipo de enlace al final de una pgina que rezaba algo as como Volver al principio de la pgina y que al pulsarlo iba a parar al principio. Bueno, pues esto es debido a que al principio de la pgina se ha colocado un marcador. S, s, como en los procesadores de texto. os marcadores son una etiqueta que da un nombre (o marca) a una zona del documento. La etiqueta para definir un marcador es la misma que la que utiliza para los enlaces de hipertexto, <A>, pero en este caso el atributo no es HREF, sino NAME, y ste ser igual a una palabra que utilizaremos como marcador. Despus, para llamar a este marcador utilizaremos una etiqueta <A HREF="#nombre_del_marcador">Ir al marcador</A>. S, s, ya s; mejor con un ejemplo. Pues vamos all. Si deseo que al hacer clic sobre la frase Ir al principio de la pgina, me aparezca en pantalla el principio, deber insertar una etiqueta que diga, por ejemplo, <A NAME="principio"></A> al principio de todo de la pgina (por supuesto, por debajo de la etiqueta <BODY>) y la etiqueta <A HREF="#principio">Ir al principio de la pgina</A> all donde queramos que aparezca esta frase. El resultado lo tenis unas 4 lneas ms arriba. Pulsad y veris. esde luego, no slo haremos enlaces de arriba a bajo o viceversa. Una de las aplicaciones que se le dan con ms frecuencia a los marcadores son los ndices. Imaginaos un ndice al principio de
http://personal1.iddeo.es/joseriki/m_hiper.htm (3 de 6) [18/11/2000 16:24:23]

Captulo 5. Los enlaces de hipertexto

una pgina con todos los nombres de los apartados que contiene el documento. Cada vez que pulsamos en un elemento de este ndice, el enlace nos llevar hasta el principio del apartado en cuestin. Un claro ejemplo de lo que os estoy contando es, de nuevo, la pgina de las Direcciones interesantes; en ella podris encontrar al final de cada apartado un vnculo que nos conduce al ndice de materias que hay al principio de la pgina, aunque este ndice, en vez de ser texto es una imagen mapeable, tema del que podris empaparos unas lneas ms abajo. o obstante, los marcadores dentro de la misma pgina no se utilizan mucho, pues hoy en da lo que se lleva es hacer marcos o utilizar una combinacin entre enlaces internos y marcadores. Sin ir ms lejos, a estas alturas seguro que os habis percatado de que tenis una pequea ventanita de color negro con una lista de elementos la mar de chula que os sirven de tabla de contenidos del captulo. Pues bien, cada vez que pulsis un elemento de esta lista, os aparece en pantalla el apartado seleccionado como por arte de magia (perdn, quiero decir, por arte de HTML) y ello es debido a que en esta pgina hay un marcador al principio de cada apartado, marcador que es llamado con un enlace interno de hipertexto desde la ventanita negra. Para ello, el cdigo del marcador ser el mismo, pero el cdigo del enlace cambiar un poquito: en vez de poner <A HREF="#link_interno">Enlaces internos</A> pondr <A HREF="manual_hiper.htm#link_interno">Enlaces internos</A>; es decir, antes del smbolo de la almohadilla (#) que precede al nombre del marcador, escribiremos el nombre de la pgina en la que se halla dicho marcador; de lo contrario, el navegador buscara el marcador en la misma pgina en la que se halla el enlace y, al no encontrarlo, dara un error. or ltimo, un par o tres de consejillos de quita y pon. 1) El nombre de los marcadores debera ser siempre una sola palabra; sin sents una necesidad imperiosa por llamar a vuestro marcador "La casa de doa Pepita", podris ponerlo de esta manera "La_casa_de_doa_pepita", es decir, separado por guiones de concatenado. 2) Es recomendable utilizar siempre minsculas, no sea que luego nos equivoquemos con alguna mayscula y no funcione el enlace (recordad lo explicado en el apartado de los truquillos con las imgenes respecto al sistema operativo UNIX). 3) Si alguna vez os da algn problema un enlace a un marcador que se encuentra al final del todo de la pgina web (justo antes de la etiqueta </BODY>), probad a escribir entre este marcador y la etiqueta </BODY> el smbolo &nbsp; y problema solucionado.

Tipos de Referencias de Hipertexto

espus de estar todo el da navegando de una pgina a otra, seguro que os suena una barbaridad el protocolo HTTP (HiperText Transfer Protocol -Protocolo de transferencia de hipertexto-). ste es el protocolo que se utiliza para transferir las pginas web. No os preocupis, no os voy a hinchar la cabeza con complejas definiciones de lo que son los protocolos y para qu sirven. Lo que s deberais saber es que cada servicio que hay en Internet tiene un protocolo diferente: el correo electrnico tiene el protocolo MAILTO, el servicio de chat tiene el IRC, el servicio de transferencia de ficheros tiene el FTP, el de grupos de noticias tiene el NEWS, el de control remoto el TELNET, etc. De todos ellos, sin lugar a dudas, el ms incluido en las pginas web es el de correo electrnico, el cual nos servir para que al pulsar encima del enlace que lo contiene, se abra el gestor de correo electrnico del usuario. Ya va, ya va, ya pongo el ejemplo. Si deseamos que alguien pueda enviarnos un mensaje de correo electrnico a nuestro buzn desde nuestra pgina web, podis incluir una etiqueta como sta all donde mejor os parezca <A HREF="mailto:mi_nombre@mi_servidor.es">Envame un mensajillo resultn</A>. Y si en vez de poner "Envame un mensajillo", ponis una imagen de correo electrnico, el diseo puede quedar chupi-lerendi. Y sino, slo tenis que echar un vistazo a esta web y os daris cuenta de que mi
http://personal1.iddeo.es/joseriki/m_hiper.htm (4 de 6) [18/11/2000 16:24:23]

Captulo 5. Los enlaces de hipertexto

direccin de correo electrnico est por todas partes. ues, si para que me enven un mensaje de correo electrnico utilizo el protocolo MAILTO, para los dems servicios podemos utilizar los protocolos antes citados. Dnde colocarlos? Pues en el atributo de la Referencia de Hipertexto, HREF, de la etiqueta <A> .Si lo que deseamos es que, al pulsar sobre un enlace, el usuario se descargue en su pgina un fichero de cualquier tipo, slo es necesario poner el nombre del fichero. Por ejemplo, <A HREF="manolito.zip">Bjate el fichero comprimido Manolito.zip</A>. Si queremos utilizar otros protocolos, aqu van algunos ejemplos que os pueden ser de utilidad:
G

Para correo electrnico <A HREF="mailto:[email protected]">Mi

direccin de correo</A>

Para transferencia de ficheros <A HREF="ftp://ftp.microsoft.com">Servidor de

Mocosoft</A>

G G

Para Telnet <A HREF="telnet://archie.rediris.es">Buscador Archie</A> Para grupos de noticias <A HREF="news:news.redestb.es">Grupos de noticias de
RedesTb</A>

Para el chat <A HREF="irc://irc.arrakis.es">Servidor de chat de Arrakis</A>

dems de estos protocolos, existe un protocolo del que an no hemos hablado. Se trata del protocolo de fichero: FILE. Este protocolo es el que substituye al protocolo HTTP mientras las pginas se encuentran en nuestro ordenador en vez de en el servidor. Su sintaxis es algo diferente a la de los dems protocolos (ntese las tres barras despus del protocolo en vez de dos, y la barra vertical despus del nombre de la unidad de almacenamiento, barra que puede substituirse por el signo de los dos puntos): file:///Unidad|/carpetas/fichero.extensin, aunque quizs con un ejemplo se vea mejor: file:///c|/Archivos de programa/Pepeswebs/index.htm. Este tipo de protocolo se usa slo en modo local, nunca en Internet, y os digo esto porque muchos editores de texto utilizan este sistema para vincular las pginas, imgenes o sonidos a nuestra web cuando stos elementos no se encuentran en el mismo directorio que la pgina en la que van insertados. Recordad que cuando coloquis vuestra pgina en Internet, no debe de haber ningn protocolo de fichero en vuestras pginas o nadie podr ver ese elemento. Hasta aqu el tercer captulo del manual de HTML que hace las delicias de todo aquel que aprecia las buenas explicaciones y bla, bla, bla (si es que tengo un rollo que ni el del perro de Scotex). El prximo captulo es primordial, as que ya podis prepararos porque empezamos con uno de los temas fuertes: las tablas. Ahora slo os falta poner a prueba vuestros recin adquiridos conocimientos realizando este sencillo test de 10 preguntas. Menos de un 70% es falta de estudio y ms de un 90% es peligroso para mi futuro, porque eso quiere decir que habis aprendido demasiado y mi trabajo corre peligro.

Este manual ha sido ntegramente elaborado con el sudor y el coco de Jos Luis Iglesias
http://personal1.iddeo.es/joseriki/m_hiper.htm (5 de 6) [18/11/2000 16:24:23]

Captulo 5. Los enlaces de hipertexto

Jckle. En el caso de que queris copiarlo, pedid permiso a vuestra mam y no quitis el nombre del autor, ok? La ltima vez que se me ha ocurrido modificar este manualillo fue ayer mismo, 20/09/99

Yo me vuelvo a la seccin

http://personal1.iddeo.es/joseriki/m_hiper.htm (6 de 6) [18/11/2000 16:24:23]

Captulo 6. Las tablas

Las Tablas
unque parezca mentira, el 99'9% de las pginas web que hay desperdigadas por Internet usan tablas, aunque no siempre stas se ven. Si ya habis comenzado a hacer alguna que otra paginilla, seguro que se os planteado el dilema de la colocacin de los elementos que integran la pgina. Si queremo poner el texto en columnas periodsticas y deseamos que todo el mundo pueda apreciar este formato (recordemos que existe un etiqueta para hacer columnas, <MULTICOL>, pero que slo es para Netscape 3 o superior), no nos quedar otro remedio que crear una tabla con dos celdas como mnimo; en la celda de la izquierda pondramos el contenido de la primera columna y en la segunda el contenido pensado para la segunda columna. Pero ste no es el nico problema con el que nos encontraremos. Como aperitivo, podis volver al captulo 1 o al captulo 3 y podris ver que he utilizado tablas para crear las columnas. Pero dejmonos de prembulos y rollos varios y vamos directos al grano. Cmo piiiiiiiiiiiiiiiiiiiiiiiiiipp se hacen las tablas? (substityase el pitido por el taco que ms apetezca en el da de hoy).

Estructura de una tabla

as tablas en HTML 3.2 estn constituidas por filas y celdas, as que en vez de decirle al navegador que tengo una tabla de tres filas por 2 columnas, le dira que tengo una tabla con tres filas con dos celdas en cada una. En la versin 4.0 del HTML se podr utilizar una nueva distribucin que s que permite etiquetas para las columnas, pero como de momento el estndar sigue siendo el 3.2 dejaremos de lado nuestra chulera espaola y sumisamente acataremos las normas del W3C. Pues bien, si la estructura viene dada por el nmero de filas y de celdas, seguro que tendremos una etiqueta para las filas y otra para las celdas. Pues S, lo has acertado! Tenemos a nuestra entera disposicin un total de 5 etiquetas para crear tablas: G <TABLE></TABLE> (Tabla). Esta etiqueta establece el principio y el fin de la tabla y adems incorpora una serie de atributos que modificaran el diseo de sta. G <TR></TR> Table Row (Fila de la tabla). Establece el principio y el final de una fila de la tabla y mediante los atributos que puede contener modificara las celdas que se hallen dentro. G <TD></TD> Table Description (Descripcin de la tabla). Establece el principio y el final de una celda de la tabla y mediante sus atributos puede modificar su formato G <TH></TH> Table Heading (Celda de cabecera). Establece el principio y el final de una celda de la tabla que tendr una peculiaridad: su contenido estar en negrita y centrado por defecto. G <CAPTION></CAPTION> (Ttulo). Establece el ttulo que se desea poner a una tabla. Aparecer encima o debajo de la tabla dependiendo del valor de su nico atributo, ALIGN que puede tener los valores TOP o BOTTOM segn queramos que el ttulo aparezca encima o debajo de la tabla, respectivamente. De esta manera, una tabla como la que se encuentra bajo ests lneas, tendra un cdigo tan chulo como ste (me he permitido la frivolidad de poner un borde a la tabla, porque as parece ms tabla, o no?).:
<TABLE BORDER> <TR><TD>1</TD><TH>2</TH><TD>3</TD></TR> <TR><TD>Uno</TD><TH>Dos</TH><TD>Tres</TD></TR> <CAPTION ALIGN=TOP>Mi primera (snif!) Tabla</CAPTION>
</TABLE>

1 Uno

Mi primera (snif!) Tabla 2 3 Dos Tres

omo se aprecia en esta tabla, los elementos de la segunda columna estn en negrita y centrados respecto a su celda debido a que he utilizado un etiqueta <TH> en vez de <TD>. El ttulillo aparece encima de la tabla porque su atributo as lo marca; y el borde de la tabla se ve gracias al atributo BORDER. Pero adems de BORDER hay mucho ms atributos que se pueden colocar dentro de cualquiera de estas etiquetas. Vamos a presentarlos: "Aqu los atributos, aqu los usuarios de Internet". Bueno, una vez hechas las presentaciones, vamos a describirlos un poco y como veo que son muy educados, dejar que se describan ellos mismos. Podis empezar vosotros, los atributos de <TABLE>.

Atributos de la etiqueta <Table>

BORDER (Borde). Hola, soy uno de los atributos ms utilizados, ya que sin m no se puede ver el borde de la tabla, pues el valor por
http://personal1.iddeo.es/joseriki/m_tablas.htm (1 de 5) [18/11/2000 16:24:53]

Captulo 6. Las tablas

defecto es 0, sin bonde. Si utilizzamos este atributo como en la tabla anterior, tendremos un borde de 1 pxel y si lo que deseamos es que este borde sea ms grueso tan slo deberemos indicarle de cuntos pxeles lo queremos. P.e. BORDER=5, teniendo en cuenta que al aumentar el grosor del borde se acentuar el efecto de biselado que tiene ste. No se recomienda que el borde exceda de los 10 pxeles, porque sino, ms que una tabla parecer una pirmide o un botn muy profundo. Borde 1 de pxel Borde 3 de pxeles Borde 5 de pxeles Borde 20 de pxeles

HEIGHT y WIDTH (Height y Width -Alto y ancho-): Estos dos atributos permiten establecer el tamao de la tabla en pixeles o en porcentaje. El atributo HEIGHT no se utiliza mucho, ya que la altura de la tabla la determina generalmente el texto o la imagen que introduzcamos en las celdas. A la hora de decidirnos entre usar la escala en pxeles o la de porcentaje, deberemos tener en cuenta si lo primordial es que la tabla ocupe un determinado espacio en proporcin a la pgina (porcentaje) o si lo ms importante es que siempre tenga el mismo tamao (pxeles). Quizs se utiliza ms la escala percentual que la absoluta, pero la decisin es vuestra, siempre vuestra (bueno, en el caso de las mujeres s, en el de los hombres, no est tan claro). Ocupa el 50% del ancho de la pgina

ALIGN (Alignment -Alineacin-): Este atributo puede ser igual a los valores LEFT, RIGHT y CENTER, segn queramos que la tabla est alineada a la izquierda,derecha o en el centro respecto a nuestra pgina. El valor por defecto es a la izquierda, aique que si no ponis este atributo, la tendris a un lado. Por supuesto, si le damos una anchura del 100% de la pgina no har falta que os preocupis de ste atributo. Ocupa el 60 % del ancho de la pgina y est alineada al centro BGCOLOR (Background Color -Color de fondo-). Como su mismo nombre indica, este atributo tiene como valor un color que se aplicar a toda la tabla, a menos que se aplique a una celda directamente, ya que las celdas tienen prioridad al conjunto de la tabla. El fondo de esta tabla es de color azul turquesa (que es la mujer del turco)

BACKGROUND (Imagen de fondo). Al igual que para la etiqueta <BODY>, este atributo es para hacer que aparezca una imagen de fondo en vez de un inspido color. El problema es que se crea un mosaico de imgenes y eso puede hacer que no siempre quede como a nosotros nos gustara. Adems, este atributo no es soportado por la versin 3 de Netscape Navigator

CELLSPACING (Espacio entre celdas). ste es el atributo que nos va a permitir dar una mayor separacin a las celdas; es decir, establece el grosor en pxeles del borde interior de la tabla. Cuandos ms pxeles le pongamos, ms grueso ser este borde. Y si no me creis, slo tenis que echarle un vistazo a los ejemplos de abajo. interior de pxeles

Espacio 1

interior de pxel

Espacio 3

interior de pxeles

Espacio 5

interior de pxeles

Espacio 15

CELLPADDING (Espacio interior de la celda). Como su traduccin indica, este atributo establece el espacio que habr alrededor del texto o imgen que se halla en la celda. Mediante este atributo podemos hacer que el texto no parezca enganchado a los bordes y pueda respirar un poco ms. Queda ms bonito aunque ocupa ms espacio. Y si no me te haceas a la idea, mir estos ejemplos. interior de

Relleno 1

interior de pxel

Relleno 3

interior de pxeles

Relleno 5

interior de pxeles

Relleno

15

pxeles

BORDERCOLOR (Color del borde). Volvemos con las batallitas entre Netscape y Microsoft, porque este atributo tinen un resultado diferente segn el navegador que se utilice para visualizar la pgina. En el caso de Microsoft IExplorer se vern todos los bordes (el exterior y el interior) del color que le asignemos a este atributo; en cambio, en Netcape Navigator 4.0 (la versin 3 de este popular navegador no soporta este atributo) slo se ver del color asignado el borde exterior. Para ms recochineo, existen dos atributos
http://personal1.iddeo.es/joseriki/m_tablas.htm (2 de 5) [18/11/2000 16:24:53]

Captulo 6. Las tablas

complementarios que slo se podrn ver con IExplorer.

BORDERCOLORDARK y BORDERCOLORLIGHT, que establecern el color del borde inferior-derecha y superior-izquierda,

respectivamente para el borde exterior y al contrario para los bordes interiores. La verdad es que la mejor manera de entender esto es verlo con un ejemplo, aunque, REPITO, estos dos ltimos atributos slo pueden apreciarse con Internet Explorer.
BORDERCOLOR = BLUE BORDERCOLOR = RED BORDERCOLORDARK = PURPLE BORDERCOLORDARK = LIME BORDERCOLORDARK = TEAL BORDERCOLORDARK = AQUA

Borde azul

exterior

Borde rojo

exterior

Borde verde lima

exterior y prpura

Borde aguamarina

exterior y verde-azul

Atributos de las etiquetas <TR> <TH> y <TD>

e entre todos los atributos que voy a describir a continuacin la etiqueta <TR> slo admite cuatro: BGCOLOR, BACKGROUND, ALIGN y VALIGN, ya que todo atributo que se inserte a esta etiqueta tendr vigor en toda la fila, a menos que una celda incluya el mismo atributo y este contraponga la accin del que se halle en <TR>. No, no me estoy quedando con vosotros, simplemente trato de explicar un concepto de la manera ms rebuscada posible. Lo que esto viene a decir es que si pongo el atributo BGCOLOR = BLUE a la etiqueta <TR> toda la fila tendr el color azul de fondo a menos que le ponga el atributo BGCOLOR = RED a una celda de esa misma fila, ya que los atributos en las celdas tienen preferencia sobre los que se hayan en la etiqueta de fila. BGCOLOR (Color de fondo). Pues lo mismo que el atributo BGCOLOR de la etiqueta <TABLE>. Si aplicamos este atributo a la etiquetas <TD> o <TH> prevalecer frente al color que le hayamos asignado al fondo de toda la tabla. Veamos el siguiente ejemplo.
<TABLE BGCOLOR = AQUA> <TABLE BGCOLOR = AQUA> <TR BGCOLOR = YELLOW> <TABLE BGCOLOR = AQUA> <TR BGCOLOR = YELLOW> <TD BGCOLOR = LIME>

Fondo

color aguamarina

Fila color amarillo Fondo color aguamarina

Celda verde lima Fondo color

Fila color amarillo aguamarina

BACKGROUND (Imagen de fondo). Al igual que para la etiqueta <TABLE>, BACKGROUND tiene como valor una imagen que queramos poner de fondo, pero en este caso de fondo de la celda en cuestin o de la fila que queramos. El efecto no es siempre el deseado, ya que la imagen (si no se trata de una textura) debera ser del mismo tamao que la celda o la fila de la tabla para que se viese bien, ya que al hacer el efecto de mosaico puede quedar todo como un churro. Fondo la tabla Fondo la tabla de toda Fondo de una No se ver con sola fila todos los navegadores Fondo de una sola celda de toda Fondo de una sola fila Fondo de una sola celda

ALIGN (Alineacin). Pues eso, la alineacin horizontal del texto o la imagen en la celda. Al igual que el anterior atributo, tendr preferencia la celda frente a la fila y sta frente a toda la tabla. Recordad que los valores del atributo ALIGN pueden ser RIGHT, CENTER o LEFT. VALIGN (Alineacin vertical). A diferencia del anterior atributo, ste sirve para alinear el contenido de una celda veticalmente y para ello puede tener estos cuatro valores: TOP, MIDDLE, BASELINE y BOTTOM, segn queramos alinear el contenido arriba del todo de la celda, en el medio, a la altura del texto de la celda colindante (aunque lo vais a ver diferente segn el navegador) o abajo, respectivamente. S, s, ya s; se ve mejor con ejemplos. Pues ah tenis unos cuantos. Arriba Centrado Lnea base texto texto Abajo

HEIGHT y WIDTH (Alto y ancho): Estos dos atributos permiten establecer el tamao de la celda, si bien el alto se suele dejar que lo coja la misma celda segn pongamos ms o menos cantidad de texto e imgenes. Si deseamos que las celdas sean del mismo tamao, es importante que el valor del atributo WIDTH sea en porcentaje; de lo contrario, dependiendo del tamao que necesite, se ampliar ella solita.
http://personal1.iddeo.es/joseriki/m_tablas.htm (3 de 5) [18/11/2000 16:24:53]

Captulo 6. Las tablas

ROWSPAN y COLSPAN (Filas combinadas y columnas combinadas). ste es uno de los atributos ms importantes de las tablas, aunque tambin es el ms difcil de utilizar, si no utilizamos un editor de HTML para tal funcin. ROWSPAN y COLSPAN tienen como valores el nmero de filas y columnas respectivamente que van a combinar en una sola. Aqu s que es necesario poner ejemplos porque sino vais a ir ms perdidos que un pulpo en un garaje.
ROWSPAN=2 ROWSPAN=3 COLSPAN=2 COLSPAN=3

Una celda que vale por 2 filas

1 2

Una celda que equivale a tres filas

1 2 3

Una celda que vale por 2 columnas 1 2

Una celda que vale por 3 columnas 1 2 3

ste sera el cdigo de esta tabla de 14 celdas que parece tan complicada. Agarraos fuerte!
<table border="1" bgcolor="White"> <tr> <td rowspan="2" valign="middle" align="center">1</td> <td colspan="3" valign="middle" align="center">2</td> <td rowspan="2" valign="middle" align="center">3</td> </tr> <tr> <td valign="middle" align="center">4</td> <td colspan="2" rowspan="2" valign="middle" align="center">5</td> </tr> <tr> <td rowspan="2" valign="middle" align="center">6</td> <td valign="middle" align="center">7</td> <td rowspan="3" valign="middle" align="center">8</td> </tr> <tr> <td valign="middle" align="center">9</td> <td valign="middle" align="center">10</td> <td valign="middle" align="center">11</td> </tr> <tr> <td colspan="2" valign="middle" align="center">12</td> <td valign="middle" align="center">13</td> <td valign="middle" align="center">14</td> </tr> </table>

La tabla ms compleja del sistema solar

1 6 12 2 4 7 9 10 13 5 11 14 8 3

Esta tabla tiene: 5 filas 1 fila: 3 celdas(1, 2, 3). La primera y la tercera se expanden en dos filas y la segunda se expande en tres columnas 2 fila: 2 celdas (4, 5). La segunda se expande en dos filas y dos columnas. 3 fila: 3 celdas (6, 7, 8). La primera se expande en dos filas y la tercera se expande en tres filas 4 fila: 3 celdas (9, 10, 11). 5 fila: 3 celdas (12, 13, 14). La primera se expande en dos columnas.

NOWRAP (Sin ajuste de lnea). Este atributo sirve para evitar que el texto de un prrafo haga un salto de lnea automtico cuando llegue al lmite derecho de la celda. Pero, claro, si no pude hacer un salto de lnea seguir y seguir y har que se ample el tamao de la celda hasta que puede que la tabla sea ms ancha que la pantalla del navegador. Prubalo y vers. Escribe este cdigo en una celda de una tabla y luego escribe una frase muy larga, con espacios entre las palabras, pero sin poner <BR> ni <P> entre medio: <TD NOWRAP> frase larga</TD> sta es una celda que no tiene puesto el Aqu no hay nada atributo NOWRAP y por eso hay varias lneas Aqu no Esta es una celda con el atributo NOWRAP puesto hay nada

Cmo y para qu utilizar las tablas

ues ya se han acabado los atributos. Que an querais ms? Pues ya sabis, os vais a la pgina del W3C y os echis un vistazo a los atributos para el estndar 4.0 del HTML. Pero recordad que son atributos que slo soporta en este momento el Internet Explorer, as que hasta que Netscape saque su versin 5.0 creo que con los atributos que tenis en este captulo vais sobrados. Y ahora, sin ms dilacin, vamos a ver algunos usos interesantes que le podis dar a las tablas. Como por ejemplo, uno dos tres, responda otra vez: Hacer columnas periodsticas. o hay nada ms fcil. Primero creas una tabla de una fila con tantas celdas como columnas desees y luego pones en cada celda el contenido de la columna que deseas (AH! Y no le pongas borde). El problema es calcular cunto texto o imgenes cabr en cada celda, pero para evitar que se noten descompensadas es conveniente que tengan una alineacin vertical superior (VALIGN = TOP).Como s que eres muy observador /a, ya te habrs dado cuenta de que esta explicacin est dos en columnas, y es que as me ahorro el ejemplo.

http://personal1.iddeo.es/joseriki/m_tablas.htm (4 de 5) [18/11/2000 16:24:53]

Captulo 6. Las tablas

hora bien, lo que ya no es tan evidente es cmo hacer que haya mayor espacio entre las columnas o que haya una lnea vertical separadora. Vamos a verlo. Para dejar ms espacio entre dos columnas podemos crear tres celdas en vez de dos y dejar los espacios en la del centro mediante el carcter &nbsp; repetidas veces o mediante el truco del punto transparente explicado en el captulo de las imgenes. si en vez de un punto transparente ponemos una imagen que sea una lnea vertical ya tenemos una lnea separadora. Pues s, pero no. Me explico. Dicha lnea debera tener la misma longitud que las columnas que separa y para ello deberemos calcular en pxeles el tamao; pero luego resulta que no todo el mundo utiliza la misma resolucin de pantalla ni el mismo navegador y esto puede provocar que la lnea separadora se vea ms larga o ms corta que el texto circundante (Uy, qu tecnico me he vuelto de repente!).

tra manera algo ms chavacana es utilizar los atributos CELLSPACING o CELLPADDING antes comentados para hacer que los bordes invisibles sean ms anchos. Aunque en este caso el resultado no es siempre el deseado, ya que se ampla por todos los lados. Para estas dos columas se ha utilizado el mtodo del punto transparente y el resultado es el ideal, modestia aparte. a solucin pasa por no poner una imagen como separador sino una lnea de color. Sabis que mediante el atributo BGCOLOR se puede cambiar el fondo de una celda, pues a la celda del medio, la que tiene el punto transparente, le ponis el fondo del color que queris y ya tenis la lnea separadora, como podis observar en estas columnas.. Bueno, yo adems le he puesto dos celdas a los lados para que haya ms espacio.

tra de las utilidades que se le dan a las columnas es la cuadrcula, para hacer galeras de imgenes y esas cosas. Si, por ejemplo, necesitase tener una imagen a la izquierda, texto en el centro y otra imagen a la derecha, necesitara utilizar una tabla con tres columnas (una fila que tuviese tres celdas), o almenos dos, una que contuviese la imagen y el texto y la segunda la otra imagen. Este mtodo de estructura es archiconocido y superutilizado; de hecho, no exageraba al principio de este captulo cuando deca que el 99,9% de las pginas en Internet utilizan tablas. Principalmente, sta es la funcin que se le da. No obstante, hoy en da existe una nueva manera de crear estructuras que permite una precisin mxima en la colocacin de cualquier elemento, hasta el punto de que pueden estar superpuestos (por ejemplo, una imagen encima de otra). A esta nueva tecnologa se la ha denominado CSS (Cascade Style Sheets) o Hojas de Estilo en Cascada; el inconveniente es que son mucho ms fciles de utilizar las tablas que las hojas de estilo y adems las CSS slo las soportan las ltimas versiones de los navegadores (y en algunas cosas tambin la versin 3 de IExplorer). En la seccin Ayuda HTML hay un apartado dedicado a las Hojas de Estilo; aunque todava no he puesto demasiada cosa, slo por ver el ttulo ya vale la pena. Hasta aqu el sexto captulo del manual ms... ms... , bueno, del manual de HTML. Y el prximo captulo... nos esperan los marcos. Preparaos, porque es el tema ms complejo de cuantos tiene el HTML. As que despejaros antes de leer el manual. Ahora slo os falta poner a prueba vuestros recin adquiridos conocimientos realizando este sencillo test de 10 preguntas. Si consegus entre un 70% y un 90% de acierto, es que os sois un fenmeno de la naturaleza.

Este manual ha sido ntegramente elaborado con el sudor y el coco de Jos Luis Iglesias Jckle. En el caso de que queris copiarlo, pedid permiso a vuestra mam y no quitis el nombre del autor, ok? La ltima vez que se me ha ocurrido modificar este manualillo fue ayer mismo, 20/09/99

Yo me vuelvo a la seccin

http://personal1.iddeo.es/joseriki/m_tablas.htm (5 de 5) [18/11/2000 16:24:53]

Captulo 7. Los frames

Introduccin a los frames

ueno, bueno, bueno. Aqu viene el tema estrella de este curso, no slo porque es el ms complicado, sino porque no suele estar muy bien explicado en la mayora de los manuales. As que aqu me tenis, dispuesto a echaros una manita. Lo primero de todo ser definir qu rayos es un frame (tambin conocido como panel o marco). Pues bien, las pginas de frames son una manera de mostrar el contenido de ms de una pgina web en el navegador; es decir, lo que muestra el navegador no es una sola pgina web sino dos o tres o... bueno, las que queramos. Pero, quizs, la manera de entender esto ms fcilmente es mediante un ejemplo. Veamos las dos imgenes que hay bajo estas lneas.

a imagen de la izquierda, que supongo que ya habrs reconocido, es una pgina que ocupa el 100% de la ventana del navegador; la imagen de la derecha, en cambio, muestra dos pginas web: una con un fondo azulado (que ocupa un 20% de la ventana) y otra con un fondo blanco y una imagen enorme que dice Programacin de TV (que ocupa el 80% de la ventana). Pues cada uno de los lugares donde se cargan las pginas que se visualizan en una ventana del navegador es lo que llamamos un frame; o sea, la pgina es el contenido y el frame es el contenedor. la!Cmo lo has hecho? os estaris preguntando. Pues he creado una pgina de frames en la cual defino la disposicin de las pginas y el nmero de stas que van a aparecer en la ventana. Si habis entrado en esta pgina del manual habris pasado antes por otras pginas, la mayora de ellas con frames. Por ejemplo, la pgina donde escogis el captulo al que queris ir es una pgina con dos frames (la que aparece en esta imagen), lo que pasa es que no se ve la lnea que las separa; pero si utilizis la barra de desplazamiento que hay a la derecha de la pgina, veris que slo se mueve un trozo de la pgina y no todo el conjunto. u utilidad tiene hacer una pgina de frames? Pues, poniendo como ejemplo la pgina esta tan chula de la Ayuda HTML, podris observar que podemos ver todo el contenido de esta pgina sin que desaparezca de nuestra vista el selector de captulos que hay a la izquierda. ero, desde luego, no es sta su nica utilidad. Se pueden hacer verdaderas birgueras con los frames, aunque para ello necesitaris an un poco de prctica. As que voy a cortar el rollo por lo sano y a empezar con lo que os interesa: montar una pgina de frames.
http://personal1.iddeo.es/joseriki/m_frames.htm (1 de 10) [18/11/2000 16:26:17]

Captulo 7. Los frames

Pginas de estructura: los framesets y los frames.

as pginas de frames no tienen contenido (o, al menos, no generalmente), porque el cdigo HTML que contienen sirve slo para establecer la disposicin de las pginas en la ventana del navegador. As pues, antes de hacer una pgina de frames, es recomendable haber creado ya las pginas que aparecern en cada uno de stos frames. maginemos que deseamos crear una pgina de frames como aquella de la Programacin de TV que vimos antes. Supongamos, si no es mucho suponer, que la pgina del fondo azulado se llama menu.htm y la pgina de la imagen enorme se llama principal.htm. S? Pues sigamos. a pgina de frames que vamos a crear a continuacin se va a llamar frame1.htm, estis de acuerdo? Bueno, pues me es igual, a quien no le guste, que se compre un manual, porque esto es gratis y le pongo el nombre que quiero, faltaba ms!. Las pginas de frames tambin tienen una cabecera (aquello del <head> y el <title>, recuerdas?), pero, a diferencia de las pginas tradicionales, donde va la etiqueta <body> ahora tendremos otras etiquetas: los framesets. Veamos un ejemplo:
<HTML> <HEAD> <TITLE>Programaci&oacute; de TV</TITLE> </HEAD> <FRAMESET COLS="20%,80%"> <FRAME SRC="menu.htm"> <FRAME SRC="principal.htm"> </FRAMESET> </HTML>

on este ejemplo de cdigo HTML hemos creado nuestra primera pgina de frames; si queris probarlo slo tenis que copiar este cdigo y pegarlo en una pgina web, pero sin olvidar que las pginas menu.htm y principal.htm deben existir y estar ubicadas en el mismo directorio que la pgina de frames. ara que os aclaris un poco ms con esto de los frames, vamos a analizar las dos etiquetas principales que intervienen: <FRAMESET> y <FRAME>. La etiqueta <FRAMESET> es la que determina la estructura. Es una etiqueta de cierre obligatorio y debe llevar un atributo como mnimo, aunque ste puede ser COLS o ROWS (tambin pueden ir ambos , pero no es muy comn). i queremos que la disposicin de los frames sea en columnas, utilizaremos el atributo COLS y si deseamos que sea en filas, pues el ROWS, fcil eh?. Estos atributos tendrn como valor las dimensiones de los frames, las cuales pueden darse en pixeles, porcentaje o relativas. Por ejemplo, del cdigo anterior (COLS="20%,80%") podemos deducir que hay dos frames dispuestos en columnas; el primero ocupa el 20% de la ventana del navegador y el otro el resto, el 80%. Si quisiesemos tener 3 frames dispuestos en filas y que ocupasen respectivamente el 15%, el 50% y el resto, podramos poner este atributo: ROWS="15%,50%,35%". i queremos utilizar un tamao absoluto es mejor trabajar con pixeles; el tamao relativo sirve para no tener que pensar en tamaos y dejar que la resolucin de pantalla decida por nosotros. ??? Me parece que no me he expresado con claridad, vamos con un ejemplo. esulta que deseamos tener un pgina con dos frames en lneas; en el primero, deseo que se vea una pgina que tiene una imagen de 100 pixeles de alto. Est claro que deber dar un tamao absoluto al frame superior (es decir, en pixeles) porque, si utilizo tamaos relativos como el porcentaje, dependiendo de la resolucin de pantalla puede ser que no vea toda la imagen o que vea ms de lo que quisiera. Pero si el frame superior es de 100 pixeles, de cunto ser el inferior? No podemos utilizar un valor absoluto, porque depender de la resolucin de pantalla, ni un valor de porcentaje, por idnticos motivos; lo ideal sera poder decirle que el frame inferior ocupase el resto de ventana, y esa es la funcin del tamao relativo, simbolizado mediante el asterisco (*). QUIERO MS EJEMPLOS, POR FAVOR! Pues all van: Cdigo del Frameset Ventana resultante

http://personal1.iddeo.es/joseriki/m_frames.htm (2 de 10) [18/11/2000 16:26:17]

Captulo 7. Los frames

<FRAMESET COLS="20%,*"> <FRAME SRC="menu.htm"> <FRAME SRC="principal.htm"> </FRAMESET>

La ventana del navegador no ocupa el 100% de la pantalla; no obstante, el frame de la izquierda es el 20% y el de la derecha representa el resto hasta completar el 100%, o lo que es lo mismo, ocupa el 80%.

<FRAMESET ROWS="100,*"> <FRAME SRC="menu.htm"> <FRAME SRC="principal.htm"> </FRAMESET>

El frame superior ocupa 100 pixeles y el inferior ocupa el resto de la ventana del navegador.

<FRAMESET ROWS="*,2*,*"> <FRAME SRC="menu.htm"> <FRAME> <FRAME SRC="principal.htm"> </FRAMESET>

Este tercer ejemplo es de una pgina de 3 frames, de los cuales el segundo ocupa el doble que los otros dos frames, independientemente del tamao de la ventana o de la resolucin de la pantalla. El frame central no carga ninguna pgina, luego no tendr contenido. Bueno, espero que no vayis muy liados, porque despus vendr el verdadero folln cuando empecemos a anidar framesets. De momento vamos a explicar la otra etiqueta importante: <FRAME>. a etiqueta <FRAME> es una etiqueta nica (que no se cierra) y debe llevar al menos un atributo, porque solita da un poco de pena. El atributo es cuestin no es otro que SRC, como las imgenes, que indica origen, y que tendr como valor el nombre y ruta de la pgina que deseamos que se cargue en ese frame. Si observamos detenidamente los ejemplos anteriores, enseguida nos percataremos de que en esta etiqueta est el nombre de la pgina que deseamos ver (y no aparece la ruta porque todo est dentro del mismo directorio). Si nos equivocamos con el nombre o la ubicacin, nos dar el tpico error de pgina no encontrada y el frame quedar vaco. El orden de las etiquetas <FRAME> dentro de un Frameset es crucial, pero eso seguro que ya os lo habais imaginado.
http://personal1.iddeo.es/joseriki/m_frames.htm (3 de 10) [18/11/2000 16:26:17]

Captulo 7. Los frames

Atributos
quellos atributos que aparecen en la etiqueta <FRAMESET> y que tienen que ver con el diseo del borde entre paneles tambin pueden aparecen en la etiqueta <FRAME>, aunque su comportamiento no variar en absoluto, aplicndose a todo el Frameset. Estis listos? Pues vamos pall.

Atributos de <FRAMESET>:
COLS ROWS BORDER Como ya hemos visto antes, este atributo especifica el nmero de frames dispuestos en columnas en el frameset, adems de darles el tamao. Al igual que el anterior, este atributo especifica el nmero de frames dispuestos en filas en el frameset, adems de darles el tamao. Mediante este atributo podemos dar un grosor (en pixeles) al borde ese tan feo que aparece entre los paneles. La verdad es que el tamao ms indicado es casi siempre el 0, pero si queris ver algo chavacano y cutre patatero, probad con un tamao 30.

BORDERCOLOR Adems de poder cambiar el tamao del borde, tambin podemos cambiar el color de ste, pero si ya de por s el color gris queda mal, ya me diris cmo va a quedar un verde esmeralda!. El color se pone igual que con los dems atributos
BORDERCOLOR=color

FRAMEBORDER Este atributo estaba pensado para que el usuario le pusiese borde o no a los frames; si el valor era 1 llevaba borde y si era 0, no lo llevaba. Hoy en da, si queremos que no se vea el borde, deberemos poner FRAMEBORDER=0. FRAMESPACING Aunque parezca mentira, incluso poniendo los atributos BORDER y FRAMEBORDER a 0, todava quedaba una pequea franja entre los frames, una franja del color del fondo por defecto del navegador. Si deseamos que no haya tal franja, simplemente usaremos FRAMESPACING=0.

Atributos de <FRAME>:
SRC Este es el atributo ms importante, pues en el va el nombre dela pgina que deseamos cargar. Si no aparece este atributo, se cargar el panel vaco, con el color de fondo por defecto del navegador. Si como valor de SRC ponemos simplemente unas comillas vacas (""), se ver el contenido de la carpeta en la que se encuentra la pgina de los frames. Los frames deben llevar un nombre para poder decirle al navegador en qu frame quiero cargar una pgina. Este nombre se pone en este atributo y, a ser posible, debera estar en minsculas y sin espacios ni smbolos raros. Este atributo determina el espacio a ambos lados del frame. Por defecto, el margen derecho e izquierdo de un frame suele ser de 5 pixeles, as que, mediante este atributo podemos hacer que no haya margen o que sea superior a 5.

NAME

MARGINWIDTH

MARGINHEIGHT Lo mismo que el anterior pero para los mrgenes superior e inferior SCROLLING Gracias a este atributo, podremos evitar que aparezca la "graciosa" y "elegante" barra de desplazamiento. Este atributo tiene 3 valores posibles: Auto Valor por defecto; la barra de desplazamiento aparecer slo si es necesario; es decir, cuando el frame no pueda mostrar todo el contenido de la pgina al mismo tiempo. No Cuando no queramos que aparezca la barra de desplazamiento; y es que, a veces, se hace un poco pesadita. Yes Cuando queramos que aparezca siempre la barra de desplazamiento, aunque no lo necesite. Quien invent este valor acababa de tomarse 6 tequilas en un concurso de tontos del bote.
http://personal1.iddeo.es/joseriki/m_frames.htm (4 de 10) [18/11/2000 16:26:17]

Captulo 7. Los frames

NORESIZE

No s si a estas alturas os habris dado cuenta, pero si colocamos el puntero del ratn encima del borde este de los frames, nos aparecer una doble flechita que indica a los que ven la pgina que pulsando sobre l podemos hacer ms ancho o estrecho el frame. Pues bien, si utilizamos el atributo NORESIZE, as, sin ms, no aparecer esa flechita y no podrn cambiarle el tamao.

Pues aqu va un ejemplo de una pgina de frames para que veis como se aplican estos atributos:
<HTML> <HEAD> <TITLE> </TITLE> </HEAD> <FRAMESET FRAMEBORDER="0" FRAMESPACING="0" BORDER="0" COLS="170,*"> <FRAME NAME="contenido" SRC="menu.htm" SCROLLING="auto" NORESIZE> <FRAME NAME="principal" SRC="principal.htm" SCROLLING="auto"> <NOFRAMES> <BODY> <P>Esta pgina usa marcos, pero su explorador no los admite.</P> </BODY> </NOFRAMES> </FRAMESET> </HTML>

La etiqueta <NOFRAMES>
unque ya estamos ms que acostumbrados a ver frames por doquier, lo cierto es que los primeros navegadores no soportaban este tipo de etiquetas. Ciertamente, quien no tiene hoy en da un navegador que acepte frames es porque no quiere, porque son gratis. Pero todava parece que hay nostlgicos o gente que an navega con un PC 286 que no quieren desprenderse de su Mosaic 1.0, su Nescape 1.2 o su IExplorer 2.0. stos navegadores no admiten frames y si intentan cargar una pgina de stas, el navegador se hace un lo macabeo y slo aparecen signos extraos, sin poder ver nada de lo que deberan ver. Pero gracias a la etiqueta <NOFRAMES> s pueden ver alguna cosa. Esta etiqueta permite que los navegadores que no soportan frames puedan ver el contenido de la etiqueta <BODY>, aunque normalmente no se suele poner ms que una indicacin a cerca de que no se pueden ver frames con este navegador o un enlace a otra pgina que no tiene frames. Como se puede apreciar en el cdigo de ejemplo anterior, esta etiqueta es de cierre obligatorio y envuelve a la etiqueta <BODY>. Lo ms probable es que dentro de unos aos deje de utilizarse, pero mientras tanto...

Los Targets
adre ma, qu rollo! Hasta ahora hemos visto cmo hacer una pgina de frames, pero NO su verdadera utilidad. Y A QU ESTAMOS ESPERANDO? Dejad todo lo que estis haciendo y prestad mucha mucha atencin, que VOOOOOY! uando creamos dos o ms frames en una pgina, generalmente utilizamos el primero (el de la izquierda o arriba) para colocar los hiperenlaces, y el segundo, para cargar las pginas a las que llamamos mediante los hiperenlaces. As pues, podemos decir que tendremos una pgina origen y una o ms pginas destino. Que conste que no digo que sta sea la nica posibilidad, pero desde luego es la ms comn. Si tenis presente mi web, quizs recordis la seccin Ficha Personal o Libro de Visitas; en ambas secciones aparece un frame a la izquierda que sirve para ir a cualquiera de las dems secciones de mi pgina. o primero que debemos hacer para crear frames de destino es ponerles un nombre. Si recordis, en el apartado de los atributos hablbamos de un atributo de la etiqueta <FRAME> que se llamaba NAME; pues ste es el encargado de contener
http://personal1.iddeo.es/joseriki/m_frames.htm (5 de 10) [18/11/2000 16:26:17]

Captulo 7. Los frames

el nombre del frame. Recordad que este nombre no es el de la pgina, sino el del frame donde se cargarn las pginas. Vamos con uno de esos ejemplos tan fciles de entender. Creamos una pgina que ser la que se cargar en el frame origen; la llamaremos "menu.htm". Luego crearemos otra pgina, a la que llamaremos "provisional.htm", que ir provisionalmente en el frame destino. Bajo estas lneas veremos el aspecto que tendrn ambas pginas:

menu.htm

provisional.htm

a estn creadas? Pues vamos con la pgina de frames que las contendr. A esta pgina de frames la llamaremos frames00.htm y a los dos paneles les llamaremos origen (el de la izquierda) y destino (el de la derecha). Por supuesto, el nombre que les pongis depende de vosotros, pero no pongis nombres raros, porque luego os liaris. Los paneles que crearemos sern en dos columnas, del 20% la priemra y el resto la segunda. Este ser el cdigo y el resultado es la imagen que hemos visto antes (pulsa aqu para echarle un vistazo):
<HTML> <HEAD> <TITLE>Mi primer frame </TITLE> </HEAD> <FRAMESET COLS="20%,*"> <FRAME NAME="origen" SRC="menu.htm"> <FRAME NAME="destino" SRC="provisional.htm"> <NOFRAMES> <BODY> <P>Esta pgina usa marcos, pero su explorador no los admite.</P> </BODY> </NOFRAMES> </FRAMESET> </HTML>

enga, que ya queda menos. Ahora toca la parte que no conocis. Habris visto que en la pgina menu.htm hay varios hiperenlaces, pues se trata de que al pulsar sobre cada uno de estos hiperenlaces se cargue la correspondiente pgina en el frame de destino. Para ello tan slo debemos hacer los hiperenlaces como siempre hasta ahora, con la etiqueta <A HREF="...">, pero adems deberemos aadir un nuevo atributo llamado target, cuyo valor ser igual al nombre del panel destino. Por ejemplo, si queremos que el enlace llamado TV3 cargue la pgina de TV3 en el panel destino, slo deberemos poner este cdigo en la pgina menu.htm: <A HREF = "http://www.tvcatalunya.com" TARGET = "destino">TV3</A>. i en una pgina tenis muchos hiperenlaces que queris que tengan el mismo target, no es necesario que pongis a cada una de las etiquetas <A> el atributo TARGET. Existe una manera para hacer que los hiperenlaces de una pgina vayan apunten por
http://personal1.iddeo.es/joseriki/m_frames.htm (6 de 10) [18/11/2000 16:26:17]

Captulo 7. Los frames

defecto a un panel; esto se consigue con una etiqueta que se coloca en la cabecera de la pgina (dentro del <HEAD>) y que se llama <BASE TARGET="nombre_del_panel">. Se trata de una etiqueta nica, as que no ser necesario que la cerris. Si un hiperenlace no queris que se cargue donde marca esta etiqueta, deberis colocarle el atributo TARGET y ya est.

Targets especiales
asta aqu todo es bien fcil, pero no siempre desearemos que al pulsar sobre un hiperenlace la pgina se cargue en un panel determinado, sino que se cargue en otra ventana o que se olvide de los frames y ocupe toda la ventana del navegador. Esto se consigue con los targets especiales, que son cuatro: _top, _self, _blank y _parent. Como podis observar, todos empiezan por el smbolo del concatenado (el guin ese que va a ras del texto) Veamos para qu sirven.

_top:

si colocamos este valor en un target de un hiperenlace haremos que la pgina siempre se cargue en toda la amplitud de la ventana del navegador, independientemente de en el frame en que se encuentre el hiperenlace . este es el valor por defecto que tienen los targets; es decir, si no colocamos un target en un hiperenlace, el efecto conseguido ser ste. Lo que hace es cargar la pgina en el mismo frame en que se encuentra el hiperenlace, algo muy poco frecuente, pero hay gente para todo :-) mediante este valor podremos hacer que un hiperenlace cargue una pgina en otra ventana del navegador; que s, que s, que ser como si tuviesemos abiertos dos navegadores. Es ideal para cargar pginas que el usuario slo debe echarles un vistazo rpido y luego volver a la anterior; de esta manera, slo deber cerrar la ventana y ya tendr la otra all. este es el ms complejo de explicar, porque slo se utiliza en frames enlazados, y todava no os los he explicado, as que an tendris que esperar un poquito. Sirve para cargar una pgina en el frame de nivel superior ms prximo Este frame es confundido constantemente con el _top, llegndose a utilizar uno u otro indistintamente. Paciencia; un poco ms abajo est explicado.

_self:

_blank:

_parent:

Los framesets enlazados

os framesets enlazados pueden ser de dos tipos: enlazados en la misma pgina y enlazados en ms de una pgina. Empezaremos con los primeros. Quizs deseemos crear a veces una estructura de frames en la que haya no slo filas y columnas, sino ambas combinadas; para ello necesitamos enlazar framesets. Veamos un ejemplo esclarecedor (tambin podis echar un vistazo a la seccin Direcciones de Inters, pues hay un frameset enlazado muy currado):
<HTML> <HEAD> <TITLE>Programacin TV </TITLE> </HEAD> <FRAMESET COLS="20%,*"> <FRAME NAME="origen" SRC="menu.htm"> <FRAMESET ROWS="150,*"> <FRAME NAME="superior" SRC="arriba.htm"> <FRAME NAME="inferior" SRC="contenido.htm"> </FRAMESET> <NOFRAMES> <BODY> <P>Esta pgina usa marcos, pero su explorador no los admite.</P> </BODY> </NOFRAMES> </FRAMESET> </HTML>

http://personal1.iddeo.es/joseriki/m_frames.htm (7 de 10) [18/11/2000 16:26:17]

Captulo 7. Los frames

stras!Qu pasada!Y para qu sirve? -os estaris preguntando. Pues la respuesta es sencilla. Si el frame de la izquierda serva para hacer de men, el frame superior puede servir para hacer de submen, con enlaces entre el texto o en las imgenes que cargarn una o ms pginas en el frame inferior.En este tipo de pginas se suele recurrir a mapas de imgenes que enlazan mediante marcadores con una zona de pgina que carga en el frame inferior. Dentro de poco colocar un captulo dedicado a las imgenes mapeables, para que podis hacer cosas como las que aparecen en el apartado Glosario de Etiquetas de la seccin Ayuda HTML. Adems, no existe un lmite prctico para enlazar framesets, si bien es recomendable que no haya ms de 3 framesets en la misma pgina. En el siguiente ejemplo puede verse una pgina con 3 framesets enlazados.
<HTML> <HEAD> <TITLE>Programacin TV </TITLE> </HEAD> <FRAMESET COLS="20%,*"> <FRAME NAME="origen" SRC="menu.htm"> <FRAMESET ROWS="150,*"> <FRAME NAME="superior" SRC="arriba.htm"> <FRAMESET COLS="50%,*"> <FRAME NAME="izquierda" SRC="contenido.htm"> <FRAME NAME="derecha" SRC="logotve.htm"> </FRAMESET> </FRAMESET> <NOFRAMES> <BODY> <P>Esta pgina usa marcos, pero su explorador no los admite.</P> </BODY> </NOFRAMES> </FRAMESET> </HTML>

ale. Hasta aqu, fenomenal. Pero no es oro todo lo que reluce. Tambin los frames tienen sus limitaciones.Volvamos al ejemplo de la Programacin de TV. La pgina que se carga al principio y que consta de un frameset de dos frames, no se puede convertir por arte de mga en otra pgina en otra pgina con dos framesets, de manera que cuando pulsamos sobre uno de los enlaces del men, lo que sucede es que cargamos una nueva pgina de frames en el frame de la derecha. Esto es lo que se llama frames enlazados de pginas diferentes; es decir, una pgina de frames carga otra pgina de frames. Es entonces cuando hablamos de niveles; pero lo mejor es que lo veamos con un ejemplo:

e puesto un recuadro de color rojo alrededor del frame de la primera imagen (pgina principal) para indicar que ah se cargar la segunda imagen (la pgina 2); el resultado es la imagen tres. Ms grfico, IM-PO-SI-BLE. Bueno, pues las imgenes 1 y 2 tienen slo un nivel y, en cambio, la imagen 3 tiene dos niveles. De esta manera, si colocamos un hiperenlace en el frame inferior izquierda (o derecha) y le ponemos un TARGET = _parent, la pgina que le digamos que se cargue lo har NO en toda la amplitud del navegador (como ocurrira en el ejemplo de un poco ms arriba, sino en la amplitud de su nivel superior, que no es otro que la zona marcada de rojo de la imagen 1. hora ya slo os queda practicar; practicar mucho. Porque con frames se pueden realizar verdaderas birgueras. Y cuando dominis el HTML, intentad estudiar un poco de Javascript y ya veris las cosas que se pueden hacer con este lenguaje y los frames. Tremendas! Pero no slo de frames vive el hombre (y la mujer), sino de muchas otras cosas y en esta geb intentar enseroslas.

La ltima paranoia de Microsoft: los inline frames

http://personal1.iddeo.es/joseriki/m_frames.htm (8 de 10) [18/11/2000 16:26:17]

Captulo 7. Los frames

omo Microsoft siempre tiene que dar la nota, un buen da se le ocurri la "brillante" idea de de hacer un frames que se cargasen dentro de una pgina en vez de determinar la estructura. Como son parte del contenido de una pgina no van en una pgina aparte, sino dentro del BODY del documento. Eso s, este tipo de frames SLO se pueden ver con el Internet Explorer, as que los que estis viendo esta pgina con Netscape, me temo que no vais a poder ver mucha cosa.SNIF SNIF!. Este es el cdigo de un iframe:
<IFRAME SRC="index.htm" HEIGHT=250 WIDTH=350> Si no puedes ver el <I>iframe</I> <BR>es porque no ests utilizando un navegador Internet Explorer </IFRAME>

Si no puedes ver el iframe es porque no ests utilizando un navegador Internet Explorer

os iframes necesitan obligatoriamente el atributo SRC para indicar al navegador qu pgina han de cargar. Los atributos HEIGHT y WIDTH sirven para dar tamao (en porcentaje o pixeles) al iframe; si no se colocan estos dos atributos, el tamao ser de aproximadamente de 150 x 300 pixeles. Tambin se pueden utilizar los atributos NAME y SCROLLING de la misma manera que con los frames normales. El ejemplosobre estas lneas est muy bien para la gente que tiene IExplorer, pero para el resto no se ve nada claro, as que ms abajo os he puesto una imagen de cmo se ve un iframe y su cdigo:
<P><CENTER><B>Programaci&oacute;n TV<BR> </B><HR></CENTER></P> <TABLE WIDTH=100%> <TR> <TD> <P><IMG SRC="Piedra_v.gif"> <A HREF="frametv3.html" TARGET="tv">TV3</A></P> <P><IMG SRC="Piedra_v.gif"> <A HREF="http://www.telecinco.es/" TARGET="tv">Tele5</A></P> <P><IMG SRC="Piedra_v.gif"> <A HREF="frameat3.html" TARGET="tv">Antena3TV</A></P> <P><IMG SRC="Piedra_v.gif"> <A HREF="frametve.html" TARGET="tv">TVE</A></P> <P><IMG SRC="Piedra_v.gif"> <A HREF="http://www.cplus.es/" TARGET="tv">Canal+</A></P> </TD> <TD> <IFRAME SRC="provisional.htm" HEIGHT=320 WIDTH=600 NAME="tv"> Si no puedes ver el <I>iframe</I> <BR>es porque no ests utilizando un navegador Internet Explorer </IFRAME> </TD> </TR> </TABLE>

Hasta aqu el sptimo y ms difcil captulo del manual entre manuales. Y el prximo captulo... nos esperan los efectos especiales. Preparaos, porque ste tampoco se queda corto. Ahora slo os falta poner a prueba vuestros recin adquiridos conocimientos realizando este sencillo test de 10 preguntas. Si consegus entre un 70% y un 90% de acierto, es que os sois un fenmeno de la naturaleza y tal y tal.

http://personal1.iddeo.es/joseriki/m_frames.htm (9 de 10) [18/11/2000 16:26:17]

Captulo 7. Los frames

Este manual ha sido ntegramente elaborado con el sudor y el coco de Jos Luis Iglesias Jckle. En el caso de que queris copiarlo, pedid permiso a vuestra mam y no quitis el nombre del autor, ok? La ltima vez que se me ha ocurrido modificar este manualillo fue ayer mismo, 20/09/99

Yo me vuelvo a la seccin

http://personal1.iddeo.es/joseriki/m_frames.htm (10 de 10) [18/11/2000 16:26:17]

Captulo 8. Efectos especiales

Introduccin a los Efectos Especiales

menudo no tenemos suficiente con con un texto interesante y unas imgenes fabulosas para llamar la atencin de los y las internautas, de manera que debemos recurrir a otros elementos: elementos animados, interactividad con la pgina, sonido, vdeo, etc. Desgraciadamente, estas posibilidades no estn al alcance de todos los usuarios, no slo porque muchas de ellas necesitan de programacin, sino porque no todos los navegadores aceptan algunas de las cosas que vamos a explicar en este captulo. entro de los efectos especiales podramos hacer dos grupos: los efectos que se consiguen con tan slo el cdigo HTML y los que necesitan de un lenguaje de programacin (Javascript, VBScript, DHTML, Java, VRML, ASP, Perl, etc.). En este captulo no vamos a comeros el coco con programacin, pues se escapa de la temtica del manual y ya hay muchas pginas en las que podis encontrar informacin al respecto; pero incluiremos algunas tcnicas sencillas para que vayis cojiendo el gustillo. Estis preparados? Pues adelante.

Sonido, Vdeo y animaciones

l sonido o msica que puede reproducir el ordenador es sonido digitalizado y se puede clasificar en dos tipos: sonido sintetizado y datos de sonido. El sintetizado se produce a travs de un reproductor sintetizador denominado MIDI (Music Instrument Digital Interface); cuando se reproduce una nota, un comando MIDI es enviado a al chip sintetizador, el cual se encarga de reproducir el sonido especfico. La unidad de medida del sonido es el el Herzio y las muestras de sonido suelen estar representadas por el kiloherzio (KHz), el cual describe la calidad del sonido. Por otro lado, el tamao de la muestra de sonido se mide en bits 8-bits o 16 bits) y determina la cantidad de informacin almacenada en cada muestra. Por ejemplo, un CD de audio suele estar grabado a 44KHz y un tamao de muestra de 16 bits, calidad calidad! ada vez es ms comn adornar una pgina con un poco de musiquilla; digo musiquilla porque es de esperar que no se reproducir el Requiem de Mozart junto a una pgina, aunque est dedicada a este ilustre compositor. El motivo es uno: el tamao del fichero.Una pgina con un fichero de sonido registrado a 44 khz. (y 16 bits) de no ms de 30 segundos puede ocupar la friolera de 2,5 megabytes, lo que significa que puede tardar en cargarse una hora o 30 minutos con suerte y una buena conexin. Afortunadamente existen 5 formatos de audio y unos cuantos ms de vdeo cuyas diferentes caractersticas nos permitirn escoger entre el ms adecuado para cada ocasin.
http://personal1.iddeo.es/joseriki/m_efecto.htm (1 de 13) [18/11/2000 16:26:54]

Captulo 8. Efectos especiales

WAV Wave Form Audio File Format (wav)

Este formato, tambin conocido como RIFF WAVE, es el formato tpico de Windows y, desde luego, es el de mayor calidad de todos los existentes en la actualidad. De hecho, es el formato en el que se guarda una grabacin de CD, en la cual el ruido de fondo es nulo. Tiene un rango de frecuencia de 44 Khz (y 16 bits) y es el ms adecuado para registrar voz humana o polifnica. Pero tiene en gran inconveniente para utilizarlo por Internet: el tamao. Como ya hemos comentado antes, una cancin de 4 minutos puede ocupar 35 megabytes, lo cual lo hace casi intransferible (nos gastaramos ms dinero bajando el fichero a travs de Internet que comprndonos el LP en CD). Es ideal, no obstante, para ruidos, frases o palabras sueltas.

Audio Formato de gran calidad, pero no tanta como la del waves, ya que normalmente se halla Interchange comprimido. AIFF es probablemente la mejor eleccin para aquellos que trabajis con File Format (aif, aiff) varias plataformas (Mac, Unix, Windows) a la vez, ya que soporta 16-bit a 44 khz de

sonido estreo, as como sonido polifnico. No obstante, no se utiliza demasiado debido al coste del software utilizado para trabajar con este formato y la dificultad de manejo de sus tipos de compresin: MACE y ADPCM/IMA. Los fichero comprimidos mediante MACE son bastante raros, pues aunque su codificacin y decodificacin es muy rpida. la calidad es bastante penosa; el sistema ADPCM/IMA es mucho mejor, pero no s si hay reproductores para Windows.

-law Este es el formato de sonido original de las mquinas NeXt, de una calidad similar a la Format del WAV, auqnue no tan extendido como ste. Utiliza la extensin .au en los fichero y (au)

se suele pronunciar "miu-lo", aunque a veces se hace referencia a este formato como el Aka Sun Audio o el NeXt audio.

RealAudio Formato propio del plug-in RealAudio. Su calidad no est mal, aunque personalmente (rmp, ra) creo que no es ninguna birguera; eso s, est muy comprimido, lo cual lo hace muy

transportable, aunque slo puede reproducirse con el RealPlayer o RealVideo.

MIDI Formato de tabla de ondas. Los ficheros mid tienen la peculiaridad de que no contienen (mid) el sonido que se va a reproducir sino el cdigo que la tarjeta de sonido que tenemos

instalada interpretar; para ello, la tarjeta debe ser compatible MIDI (no os preocupis, hoy en da todas lo son). Como slo se guarda este cdigo, un fichero de este tipo no puede reproducir voz humana, slo los sonidos que puede crearse con una tabla de ondas. La buena noticia es que ocupa infinitamente menos espacio que cualquier otro fichero de audio. Por poneros un ejemplo, la musiquilla que estis escuchando (la de Expediente X) dura 30 segundos y ocupa slo 9 Kbs. TREMENDO!! Si no tenis conectados los altavoces, no s a qu esperis.

http://personal1.iddeo.es/joseriki/m_efecto.htm (2 de 13) [18/11/2000 16:26:54]

Captulo 8. Efectos especiales

MPEG Y con este formato lleg el escndalo. Se trata de un formato desarrollado por el grupo (mp3) de desarrolladores Moving Picture Expert Group, el mismo que se encarg en su da de

desarrollar el formato de compresin de vdeo MPEG por capas y que hoy en da en su versin 3 (tres capas) es el que se utiliza para las pelculas de los DVD. Pues bien, este formato comprime el sonido utilizando dos estrategias: agrupacin de secuencias de sonidos y limitacin de la frecuencia de muestreo de la seal a 16 Khz. Como el umbral auditivo del ser humano est entre 20 hz y 16 khz, los sonidos que estn ms all de este umbral no los podemos percibir ni discriminar, as que este formato se los come. Lo cierto es que no se nota la diferencia de calidad con el WAVES y ocupa 10 VECES MENOS.!! Y adems puedes elegir entre diferentes niveles de compresin.
MOD Los ficheros MOD llegaron a ser muy populares en la plataforma Amiga, de manera que

(mod) migraron a otras plataformas. Al igual que los ficheros MIDI, almacenan msica o datos que intrepeta la tarjeta de sonido, pero adems puede almacenar tambin trozos digitalizados de instrumentos musicales. Para colmo, no necesita que la tarjeta sea compatible MIDI o un reproductor como el QuickTime para escuchar los sonidos en Mac, pues cualquier mquina con una trajeta de 8-bits puede reproducirlos, aunque ello implica que tambin ocuparn bastante ms espacio. La reproduccin de estos ficheros est ms pensada para plataformas Mac y Amiga (incluso Unix) que para Windows, de ah que no se haya odo hablar mucho de este formato.
Otros Luego tambin hay cosas ms raras como el formato propio de Netscape (Netscape

Packetized Audio, con las extensiones .lma o .la), el formato .snd de Amiga (y Mac) o el VOC de la SoundBlaster para ficheros de voz. Pero no creo que los llegis a utilizar nunca en vuestras pginas web (entre otras cosas, porque se necesitan plug-ins para reproducirestos ficheros). i queris ms informacin acerca de estos formatos, de cmo se produce el sonido y esas cosas interesantes que slo los entendidos dominan (bueno, yo me incluyo porque entre otras cosas son licenciado en Filologa, pero reconozco que no est al alcance de cualquiera) siempre podis buscar pginas y ms pginas que traten este tema, como por ejemplo.. http://www.lib.rochester.edu/multimed/contents.htm o http://home.sprynet.com/sprynet/cbagwell/audio.html ueno, pues ya slo falta ver como se inserta un sonido en una pgina web. Existen dos maneras, segn se dese escuchar con el Internet Explorer o con el Netscape Navigator. Afortunadamente, no son incompatibles entre ellas, de manera que podemos poner las dos para que as lo puedan escuchar todos nuestros visitantes. Eso s, cada una de las dos maneras tiene sus propios atributos y comportamiento.

Para Netscape e Internet Explorer 4.0 o superior

partir de la versin 3.2 del HTML se estableci que la etiqueta <EMBED> fuese la indicada para insertar cualquier elemento ajeno al navegador y que necesitase de un plug-in para su reproduccin. Un plug-in es un complemento diseado por la misma casa del navegador o por terceros y que sirve para aumentar las capacidades multimedia de los navegadores. Normalmente, los navegadores incorporan una serie de plug-ins por defecto y el resto debemos instalarlos si deseamos
http://personal1.iddeo.es/joseriki/m_efecto.htm (3 de 13) [18/11/2000 16:26:54]

Captulo 8. Efectos especiales

poder visualizar animaciones de macromedia Flash, ver pginas VRML, escuchar la radio, etc. Pero de esto hablaremos ms adelante. Bueno, por dnde iba? Ah, s! Pues como iba diciendo, la etiqueta <EMBED> nos permitir insertar cualquier elemento ajeno al navegador; que este elemento lo pueda ver o no el visitante depender del plug-in que tenga instalado. a sintaxis de esta etiqueta es similar a la e una imagen, ya que necesita obligatoriamente el atributo SRC que ser igual a la ruta y el nombre del fichero de audio que deseamos reproducir. Sin embargo, a diferencia de la etiqueta utilizada para las imgenes, sta necesita que se cierre mediante </EMBED> (aunque nunca he sabido por qu, porque si no la cierras tambin funciona). Veamos un ejemplo: <EMBED SRC="xfiles.mid"></EMBED>. omo casi todas las etiquetas, la etiqueta <EMBED> tiene atributos, pero muchos de ellos no se refieren directamente al sonido sino al pequeo reproductor de audio que aparece cuando utilizamos esta etiqueta. este reproductor es conocido com el Crescendo y consta de tres botones (Play, Pause y Stop) y un control de volumen (aunque en Explorer 4.0 es diferente y slo tiene los botones de Play y Stop). Pero lo mejor es que lo comprobis vosotros mismos; aqu tenis un ejemplo. abis probado ya el cachivache este? Pues eso quiere decir que vuestro navegador no es el Explorer 3.0, porque este no os mostrara nada. Bueno, pues ahora os explico los atributos que puede llevar: tamao del reproductor, autoarranque, nmero de reproducciones seguidas, etc. Este reproductor tiene un tamao aproximado de 145 pixels de ancho por 60 de alto (medidas para Netscape). Si queremos que no se vea el control de volumen, slo tenemos que hacerlo ms corto y ya est. Pero si queremos que no se vea en absoluto, es mejor utilizar el atributo HIDDEN = TRUE. Veamos los atributos
SRC Como ya hemos indicado antes, este es el atributo en que que pondremos el nombre

del fichero de sonido que deseamos reproducir. No olvidis poner la extensin y la ruta si es necesario. Ejemplo: <EMBED SRC="cancion.wav"></EMBED>
HEIGHT Mediante estos atributos estableceremos el tamao del reproductor de audio. Para WIDTH Netscape, por defecto, creo recordar que es algo as como 32 x 32 de manera que

queda cortado por todos lados. En cambio, Explorer lo hace ms grande de lo que necesita. Vamos, que conseguir el tamao ideal para ambos navegadores se hace una tarea difcil. Ejemplo: <EMBED SRC="cancion.wav" HEIGHT=145 WIDTH=60 ></EMBED>
AUTOSTART Mediante este atributo podemos hacer que nada ms cargarse la pgina empiece a

reproducirse el sonido, lo cual nos permite ocultar el reproductor. Su valor es de TRUE o FALSE, aunque poco sentido tiene poner AUTOSTART=FALSE cuando con no poner este atributo basta. Ejemplo: <EMBED SRC="cancion.wav" AUTOSTART=FALSE></EMBED>
LOOP Este atributo nos permitir reproducir el sonido ininterrumpidamente; cuando acabe

empieza de nuevo. Desgraciadamente, slo podemos decirle si queremos que se produzca el bucle o no (LOOP=TRUE). Ejemplo: <EMBED SRC="cancion.wav" AUTOSTART=TRUE LOOP=TRUE></EMBED>
http://personal1.iddeo.es/joseriki/m_efecto.htm (4 de 13) [18/11/2000 16:26:54]

Captulo 8. Efectos especiales

HIDDEN Si deseamos que no se vea el reproductor (porque a veces hace feo), basta con que le pongamos este atributo igual a TRUE. Eso s, no os olvidis de ponerle el atributo AUTOSTART=TRUE o tendris un sonido que no habr manera de reproducir. Ejemplo: <EMBED SRC="cancion.wav" AUTOSTART=TRUE LOOP=TRUE HIDDEN=TRUE></EMBED> ALIGN Los siguientes 4 atributos son los mismos que se le pueden poner a cualquier objeto en una pgina web. ALIGN es para alinear el reproductor respecto al texto de

alrededor. Ejemplo: <EMBED SRC="cancion.wav" HEIGHT=145 WIDTH=60 ALIGN=LEFT></EMBED>

VSPACE Al igual que para las imgenes, estos ds atributos sirven para dejar un cierto espacio HSPACE entre el reproductor y el texto cuando este primero utiliza la alineacin a la derecha

o izquierda. Ejemplo: <EMBED SRC="cancion.wav" VSPACE=5 HSPACE=10 ALIGN=LEFT></EMBED>

BORDER Este atributo slo se utiliza cuando el reproductor hace de enlace y as no se vea el

borde, como ocurre con las imgenes. Esto puede pasar cuando utilizamos el atributo PLUGINSPAGE. Ejemplo: <EMBED SRC="cancion.wav" BORDER=0 PLUGINSPAGE="http://www.macromedia.com">
NAME Al igual que ocurre con otros objetos, cuando utilizamos un lenguaje de

programacin necesitamos referirnos aestos mediante un nombre. Este nombre ir dentro de este atributo NAME. Ejemplo: <EMBED SRC="cancion.wav" NAME="sonido"></EMBED>
PLUGINSPAGE Como ya hemos indicado en la descripcin del atributo BORDER, podemos aadir

este atributo para que cuando el usuario no tenga instalado el plug-in que muestra el efecto deseado (en este caso el sonido) pueda pulsar sobre la imagen del plug-in y sta le conducir a la direccin de Internet indicada en el atributo. Ejemplo: <EMBED SRC="cancion.wav" PLUGINSPAGE="http://www.macromedia.com"></EMBED>
TYPE Por ltimo, este atributo sirve apar indicar al cliente HTTP el tipo de MIME que

estamos utilizando, lo cual es transparente para el usuario. Yo no lo he utilizado nunca y no he tenido problemas. Ejemplo: <EMBED SRC="cancion.wav" TYPE="audio/midi"></EMBED>

Para Internet Explorer 3.0

uestro querido Bill Gates siempre tiene que dar la nota, as que se le ocurri en su da utilizar un sistema diferente que el que usaba Netscape. En vez de utilizar la etiqueta EMBED utilizaba una propia llamada BGSOUND (sonido de fondo) que haca que se reprodujese un sonido de fondo, sin
http://personal1.iddeo.es/joseriki/m_efecto.htm (5 de 13) [18/11/2000 16:26:54]

Captulo 8. Efectos especiales

posibilidad de utilizar un reproductor. Los atributos que tiene son slo 2: SRC para indicarle el fichero de sonido, y LOOP para indicar el nmero de veces que deseamos que se reproduzca.; a diferencia del LOOP de Netscape, ste es igual a un nmero o a la palabra Infinite, para que se reproduzca hasta que salgamos de la pgina. Ejemplo: <BGSOUND SRC="cancion.wav" LOOP=3>

Vdeo
luego est el vdeo, aunque no se utiliza mucho debido a su elevado tamao de los ficheros. Existen 3 formatos de vdeo para Internet: AVI, MOV y MPEG. Al igual que pasa con el sonido, el formato AVI es el de mayor calidad aunque tambin el de mayor tamao de fichero: un fichero de 9 segundos puede ocupar 800 kb, as que ya me diris; adems de la calidad cuenta con la baza de ser de Microsoft, de manera que lo podemos reproducir sin problemas en el navegador. El formato MOV es el fichero del programa Quick Time, una programa de compresin de vdeo de alta calidad licenciado por Apple; es ms reducido en tamao que el AVI, pero necesita de un plu-in para poderse visualizar en el navegador. El formato MPG es el ms reducido de los tres, pero tambin el de peor calidad (aunque se ve bastante bien); lamentablemente, tambin es necesario un plug-in para verlo en el navegador o un reproductor MPEG (nuestro programa de reproduccin de DVD puede servir). aro sera que no hubiese problemas con el cdigo HTML. Como ya pasara con el sonido, para insertar vdeo tambin hay dos formas diferentes, segn se visualice con Internte Explorer 3.0 u otro (Netscape o Explorer 4.0). Para el Netscape se utiliza el mismo sistema que para el sonido, es decir, la etiqueta <EMBED>; lo nico que debemos hacer es cambiar el fichero de audio por uno de vdeo y ya est. Eso s, las dimensiones del vdeo debern ser mayores que la del reproductor de audio. Ejemplo: <EMBED SRC="manos.avi" HEIGHT=150 WIDTH=150></EMBED> ependiendo del navegador que estis utilizando para seguir este curso veris mejor o peor este vdeo. Seguro que no he acertado con el tamao y me sobra espacio, pero bueno, no es tarea fcil que digamos. Eso s, las ltimas versiones de Netscape no incorporan controles para reproducir o parar ya que se puede hacer con un simple clic de ratn o mediante el men contextual que aparece al pulsar con el botn derecho del ratn sobre el vdeo. i deseis que se pueda ver en Internet Explorer 3.0 deberis de utilizar otro sistema. La etiqueta es la misma que la de las imgenes, pero en vez del atributo SRC se utiliza el DYNSRC (origen dinmico) igual al fichero de vdeo en cuestin. Por ejemplo, <IMG DYNSRC="manos.avi" controls>. El atributo controls es para que aparezcan los controles de reproduccin (Play, Stop y control de secuencias).

Animaciones
dems de insertar sonido y vdeo, y animar las pginas con programacin (Java, Javascript, VBScript, DHTML, etc.), mediante la etiqueta <EMBED> (o la etiqueta <OBJECT> en HTML 4.0) tambin podemos insertar ficheros de animacin, muchos de los cuales permiten interactividad con el usuario. Dentro de este tipo de ficheros tenemos los de Director (.cdr), Shockwave (.swf), Flash (.fla) (todos ellos de la casa Macromedia), VRML (.wrl), etc., los cuales ocupan muy poco espacio, si bien tienen el inconveniente de que necesitan de un plug-in para poderse visualizar. A continuacin he
http://personal1.iddeo.es/joseriki/m_efecto.htm (6 de 13) [18/11/2000 16:26:54]

Captulo 8. Efectos especiales

insertado una animacin de Shockwave que slo podris ver aquello que dispongis de la ltima versin del plugin de Macromedia Flash o Shockwave (podis ir a buscarlo a su pgina, es gratis!). Probad a pasar el ratn por las zonas y a pulsar en el signo de interrogacin.

Efectos con el Texto

ay un par de etiquetas del HTML que sirven para dar adornar un poco el texto con algo de dinamismo: <BLINK> y <MARQUEE>. La primera es slo para Netscape y sirve para hacer que el texto parpadee como podis ver los que tengis ese navegador. Este es un ejemplo: <BLINK>ATENCIN!!!</BLINK>. La etiqueta <MARQUEE> es slo para Explorer, as que los usuarios de Netscape no podris vibrar con ella. Desde luego, entre las dos yo me quedo con esta segunda porque hace que el texto que contenga se desplace como si de una marquesina se tratase (como aquel salvapantallas de Windows). La forma de utilizarla es la siguiente: <MARQUEE> Texto que se desplaza </MARQUEE>. Los que estis viendo esta pgina con Netscape veris este texto esttico, pero no as los de Explorer. a etiqueta BLINK no tiene atributos, pero s la MARQUEE y bastantes, por cierto. Pero antes de empezar con estos atributos os dir que est etiqueta hace que se cree una zona alrededor del texto, zona que se puede cambiar de tamao, de color de fondo, etc. Ahora s que vamos con los atributos:
DIRECTION Indica la direccin por donde va a salir el texto: por la derecha o por la

izquierda. Ejemplo: <MARQUEE DIRECTION=LEFT>Texto desplazndose</MARQUEE>

BEHAVIOUR Indica el comportamiento del texto y hay tres posibles: el comportamiento por

defecto es el de aparecer por un lado y ocultarse por el otro; con el valor Slide el texto se desplaza hasta el otro lado y luego se queda all, esttico; con el valor Alternate el texto se desplaza de un lado al otro rebotando. Ejemplo: <MARQUEE BEHAVIOUR=ALTERNATE>Texto desplazndose</MARQUEE>
BGCOLOR Indica el color de fondo de la zona de la marquesina delimitada con los atributos HEIGHT y WIDTH. Ejemplo: <MARQUEE BGCOLOR=WHITE>Texto desplazndose</MARQUEE> ALIGN Indica la alineacin vertical respecto a la zona de la marquesina. Los valores son TOP, MIDDLE y BOTTOM. Ejemplo: <MARQUEE ALIGN=TOP>Texto desplazndose</MARQUEE> LOOP Indica el nmero de veces que realizar el desplazamiento. Ejemplo: <MARQUEE LOOP=5>Texto desplazndose</MARQUEE>

http://personal1.iddeo.es/joseriki/m_efecto.htm (7 de 13) [18/11/2000 16:26:54]

Captulo 8. Efectos especiales

SCROLLDELAY Indica el tiempo en milisegundos que tardar en aparecer de nuevo por un lado despus de desaparecer por el otro. Ejemplo: <MARQUEE SCROLLDELAY=200>Texto desplazndose</MARQUEE> HEIGHT Indica el tamao en pixels de la zona de la marquesina. Por defecto, si no se WIDTH indica el tamao, la zona ocupar el 100% de la pgina y tendr el ancho del

texto. Ejemplo: <MARQUEE HEIGHT=70 WIDTH=400>Texto desplazndose</MARQUEE>

SCROLLAMOUNT Indica la velocidad en milisegundos por caracter a la que se desplaza el texto. El

valor por defecto est alrededor de los 30 mseg/c. Ejemplo: <MARQUEE SCROLLAMOUNT=18>Texto desplazndose</MARQUEE>

Efectos con Enlaces

nteresante? Pues todava no habis visto lo mejor. Vamos a ver algunos efectos que tienen que ver con los enlaces de hipertexto. Comenzaremos con un efecto al que ya hicimos una breve alusin en el captulo de introduccin: el de cambio de pgina automtico. Si recordis lo dicho en el captulo Estructura del HTML acerca de las etiquetas de cabecera, <META>, tal vez recordis que hablamos de un atributo llamado HTTP-EQUIV="Refresh". Pues bien este atributo sirve para al cabo de un tiempo determinado se cargue la pgina que le indiquemos Dnde? Pues en el atributo CONTENT de esa misma etiqueta. Veamos un ejemplo (recordad que este cdigo debe ir en la cabecera de la pgina, eh?): <META HTTP-EQUIV="Refresh" CONTENT="15;URL=http://www.stignasi.es"> l contenido del atributo CONTENT lo podemos interpretar de la siguiente forma: despus de 15 segundos de cargarse la pgina, se cargar automticamente la pgina http://www.stignasi.es. La utilidad que puedes darle a este efecto es tan variada como la lista de novias del conde Lequio. Por ejemplo, puedes mostrar una pgina con imagen cada 5 segundos o puedes cargar una pgina que ponga "Se est cargando. Por favor, espere" y que luego cargue tu pgina. Tambin se utiliza para llevar al usuario a nuestra nueva ubicacin cuando la antigua todava existe. Si sabis de programacin, podis crear un subrutina que compruebe el navegador que est utilizando el usuario o la resolucin de pantalla de su monitor y dirijirlo a una pgina o a otra automticamente. Y LO QUE SE OS OCURRA. tro efecto utilizado a menudo es el de hacer que desaparezca el subrayado de los enlaces de hipertexto. Para esto debemos de utilizar la codificacin de las Hojas de Estilo en Cascada. No, no os preocupis, no os har estudiaros estas especificaciones ahora. Slo tenis que insertar las 4 lneas que os indico ahora en la cabecera de vuestra pgina y ya est. Si queris saber ms sobre los atributos que se utilizan en con las Hojas de Estilo en Cascada, podis ver el apartado del mismo nombre en la seccin Ayuda HTML

http://personal1.iddeo.es/joseriki/m_efecto.htm (8 de 13) [18/11/2000 16:26:54]

Captulo 8. Efectos especiales

<STYLE TYPE="text/css"> a:link{text-decoration:none} a:vlink{text-decoration:none} </STYLE> i adems utlizamos un poquito de Javascript podremos hacer algunos truquillos para desplazarnos por nuestras pginas. Para empezar tenemos un par de secuencias que nos pueden servir para ir a la pgina anteior o a la pgina siguiente, igual que los botones de la barra de navegacin del navegador (valga la redundancia). Podemos probar a utilizar este cdigo para ir a la pgina anteriormente visitada: <A HREF="javascript:history.back()">Ir a la pgina anterior</A>, o a la siguiente, que ya habamos visitado: <A HREF="javascript:history.forward()">Ir a la pgina anterior</A>. Si no me crees slo tienes que probar a pulsar en este botn

Truquillos con Javascript y Java

enomenal, verdad? Lo de los botones queda la mar de chulo. Pues es muy fcil implementarlos, slo hace falta poner un para de etiquetas y en paz. Cuando leis el captulo sobre formularios (s, ya s que todava no lo he publicado, pero es que... estoy m ocupao, pero pronto, palabra de programador) veris que stos deben de ir dentro de una etiqueta llamada <FORM> que tiene unos atributos muy majos y que se debe cerrar para delimitar la zona del formulario. Pues bien, todos aquellos elementos que tengan a ver con los formularios van dentro de esta zona: casillas de texto, listas de elementos, botones de opcin, botones de envo, listas desplegables, etc. ara crear un botn que realice una accin determinada, basta con poner la etiqueta <INPUT TYPE=BUTTON ONCLICK="accin que realizar">, aunque est etiqueta debe estar dentro de una zona de formulario, como se puede observar en el ejemplo bajo este prrafo. Adems, tambin podemos cambiar el texto del botn mediante el atributo VALUE de la etiqueta <INPUT>. Fjate en este cdigo: CDIGO <FORM> <INPUT TYPE=BUTTON VALUE="Plsame!!" ONCLICK="alert('Has pulsado el botn')" NAME="B1"> </FORM> RESULTADO

so s, en este caso el atributo ONCLICK slo contiene una simple sentencia de javascript, pero podramos ejecutar una funcin compleja que adorne tu pgina web simplemente llamndola desde este atributo u otro. Este truquillo parece bastante tonto, pero pensad que es interesante que podamos hacer aparecer cuadro de dilogo para informar al usuario de cualquier cosa. Veamos algun truquillo ms, pero esta vez con funciones. Las funciones que aqu os escribo las podis hacer servir sin problemas de copyright y esas cosas, al fin y al cabo, no las he inventado yo!!! AH!, no
http://personal1.iddeo.es/joseriki/m_efecto.htm (9 de 13) [18/11/2000 16:26:54]

Captulo 8. Efectos especiales

olvidis que las funciones van en la cabecera de la pgina, dentro de la etiqueta <SCRIPT> -mirad el cdigo de esta pgina si tenis dudasObjetivo Funcin para cargar una ventana del navegador, con las dimensiones que deseemos Cdigo <SCRIPT LANGUAGE="Javascript"> function ventanamarco(){ window.open('intro2.gif','ventana','height=100,width=420'); } </SCRIPT> <!--Cuerpo de la pgina--> <A HREF="javascript:ventanamarco()" TARGET="_self">Ver imagen</A> Ver imagen Ejemplo

<SCRIPT LANGUAGE="Javascript"> function BrowserInfo() { Funcin alert("Navegador: para hacer \t"+navigator.appName+"\r"+"Versin: aparecer un \t"+navigator.appVersion+"\r") cuadro de } dilogo con </SCRIPT> informacin <!--Cuerpo de la pgina--> sobre <FORM> nuestro <INPUT TYPE=BUTTON NAME="MiNavegador" navegador VALUE="Mi navegador es..." ONCLICK="BrowserInfo()"> </FORM> <SCRIPT LANGUAGE="Javascript"> function MensajePersonal(){ var mensaje="Escriba aqui su mensaje"; mensaje=window.prompt("Mensaje",mensaje); if (mensaje!=null) if (window.confirm("Emitir el mensaje?")) window.alert(mensaje); else window.alert("Sin mensaje"); } </SCRIPT> <!--Cuerpo de la pgina--> <FORM> <INPUT TYPE=BUTTON NAME="Mensaje" VALUE="Emitir Mensaje" ONCLICK="MensajePersonal()"> </FORM>

Funcin para que el usuario pueda insertar texto en un cuadro de dilogo

http://personal1.iddeo.es/joseriki/m_efecto.htm (10 de 13) [18/11/2000 16:26:54]

Captulo 8. Efectos especiales

Imagen RollOver (ese tipo de imagen que cambia al pasar el ratn por encima) -Slo es vlido para Javascript 1.2-

<SCRIPT LANGUAGE="Javascript"> una=new Image() una.src="introd1.jpg" dos=new Image() dos.src="introd2.jpg" </SCRIPT> <!--Cuerpo de la pgina--> <A HREF="m_estru.htm" ONMOUSEOVER="prim.src=dos.src" ONMOUSEOUT="prim.src=una.src"> <IMG SRC="introd1.jpg" NAME="prim" BORDER="0"></A>

para que no os quejis, os he elaborado una lista con todos los atributos relacionados con Javascript que podis utilizar en vuestras pginas. En este tabla tambin indico en qu elementos deben o pueden ponerse. Ya slo os har falta probarlos, verdad? ATRIBUTO EMPLEO

onload ocurre cuando el navegador acaba de descargar toda la pgina o todos los frames de un frameset. Se utiliza en las etiquetas BODY y FRAMESET. onunload este evento ocurre cuando se desaparece la pgina en la que se halla incluido. Slo se usa en las etiquetas BODY y FRAMESET. onclick ocurre cuando se hace clic sobre el elemento que lo contiene. Puede ser utilizado en la mayora de las etiquetas ondblclick lo mismo que el anterior pero con doble clic. onmousedown ocurre cuando pulsamos con el puntero del ratn sobre el elemento que lo contiene. Puede ser utilizado con la mayora de las etiquetas. onmouseup ocurre cuando dejamos de pulsar con el puntero del ratn sobre el elemento que lo contiene. Puede ser utilizado con la mayora de las etiquetas. onmouseover ocurre cuando el puntero del ratn se sita sobre el elemento que lo contiene. Puede ser utilizado con la mayora de las etiquetas. onmousemove ocurre cuando movemos el puntero del ratn por la superficie del elemento que lo contiene. Puede ser utilizado con la mayora de las etiquetas. onmouseout ocurre cuando el puntero de ratn se desplaza fuera de la superficie del elemento que lo contiene. Puede ser utilizado con la mayora de las etiquetas. onfocus ocurre cuando el elemento recibe el foco, ya sea por hacer clic con el ratn o mediante la tabulacin. Se utiliza con las etiquetas LABEL, INPUT, SELECT, TEXTAREA, y BUTTON.

http://personal1.iddeo.es/joseriki/m_efecto.htm (11 de 13) [18/11/2000 16:26:54]

Captulo 8. Efectos especiales

onblur ocurre cuando un elemnto pierde el foco, , ya sea por hacer clic con el ratn o mediante la tabulacin. Se utiliza con las etiquetas LABEL, INPUT, SELECT, TEXTAREA, y BUTTON. onkeypress ocurre cuando se ha pulsado una tecla y la hemos. Puede ser utilizado con la mayora de las etiquetas. onkeydown ocurre cuando hemos pulsado una tecla. Puede ser utilizado con la mayora de las etiquetas. onkeyup ocurre cuando hemos dejado de pulsar una tecla. Puede ser utilizado con la mayora de las etiquetas. onsubmit ocurre cuando es enviado el formulario. Slo se utiliza en la etiqueta FORM. onreset ocurre cuando un formulario es reseteado. Slo para la etiqueta FORM. onselect ocurre cuando el usuario selecciona texto en un campo de texto. Slo se utiliza con los elementos INPUT y TEXTAREA onchange ocurre cuando un elemento pierde el foco y su valor ha sido modificado desde la ltima vez que tuvo el foco. Se utiliza en los elementos INPUT, SELECT y TEXTAREA. ::.::::::::::::::.:

JAVA
rabajar con JAVA es otro cantar. Java es un lenguaje de alto nivel, compilado (bueno, semicompilado en un cdigo conocido como bytecode), con clases, ejecutable directamente en el navegador y, desde luego, complejo, aunque no tanto para quien conozca el lenguaje C++, pues Java est basado en este conocido lenguaje. Esta web no trata de ensearos a programar en Java, entre otras cosas porque yo todava estoy en paales en este lenguaje (quizs dentro de un tiempo...), as que lo nico que os ensear es cmo insertar un applet de Java en vuestra pgina. n applet es una pequea aplicacin hecha con Java y que por su reducido tamao es fcil de cargar en el navegador. Es por este motivo y por ser multiplataforma (es decir, que se puede ejecutar en un PC con Windows, OS2, Linux, Mac, Unix, etc.) que hoy en da la Red de redes est plagada de estos pequeos programillas. Si tenis oportunidad, os recomiendo que busquis el programa AnfyJava, el cual contiene gran variedad de applets de fcil parametrizacin. Para insertar un applet se utilizan las etiquetas <APPLET> y <PARAM> que van en el cuerpo de la pgina como casi todas las dems. Veamos un ejemplo:
CDIGO EJEMPLO

http://personal1.iddeo.es/joseriki/m_efecto.htm (12 de 13) [18/11/2000 16:26:55]

Captulo 8. Efectos especiales

<APPLET CODE=SineText.class WIDTH=450 HEIGHT=75> <PARAM NAME=Text VALUE="The

Chechu's World!!!"> <PARAM NAME=Rate VALUE="3"> <PARAM NAME=Font VALUE="Arial"> <PARAM NAME=ForeGround VALUE="ff00ff"> <PARAM NAME=BackGround VALUE="ffffde"> Lo siento, pero no puedes ver este applet funcionando. Ya es hora de que te actualices el navegador, que es GRATIS! </APPLET>

Lo siento, pero no puedes ver este applet funcionando. Ya es hora de que te actualices el navegador, que es GRATIS!

mpresionante, verdad? Pues lo ms alucinante del caso es que simplemente cambiando los valores de los parmetros (el tipo de letra, la velocidad del texto, el color de la letra o el fondo o el texto) podis tener un texto que ser la envidia de vuestros y vuestras coleguis. Y lo ms chulo de este applet es que le podis cambiar la direccin del texto con slo hacer un clic sobre el cuando se est reproduciendo. Cuando se lo cuentes a Mari Puri no se lo va a creer.

Hasta aqu este captulo del manual de HTML del mejor profe que hay en Internet (s, lo s, no est bien echarse tantas flores uno mismo, pero si no lo hago yo... El prximo captulo tratar sobre Imgenes Mapeadas, pero todava no lo tengo elaborado. Paciencia. Para probar vuestros conocimientos sobre este tema deberis ir al captulo sobre las imgenes mapeadas (pero como todava no lo he creado... tendris que esperar un poquito ms). En fin, practicad creando pginas, que es la mejor manera, y si tenis dudas, ya sabis donde encontrarme. Este manual ha sido ntegramente elaborado con el sudor y el coco de Jos Luis Iglesias Jckle. En el caso de que queris copiarlo, pedid permiso a vuestra mam y no quitis el nombre del autor, ok? La ltima vez que se me ha ocurrido modificar este manualillo fue ayer mismo, 26/09/99

Yo me vuelvo a la seccin

http://personal1.iddeo.es/joseriki/m_efecto.htm (13 de 13) [18/11/2000 16:26:55]

Captulo 9. Imgenes mapeadas

Introduccin a las Imgenes Mapeadas

o primero que voy a hacer es definir esto de las imgenes mapeadas (o clicables, como dicen algunos) para que no vayis perdidos nada ms empezar; slo faltaba. Pues bien, una imagen mapeada o mapa de imagen es una imagen con una o ms de una zona sensible que utilizaremos para enlazar otra pgina. Me parece que como definicin no es muy... buena. Probemos de otra manera. Recordis que cuando explicamos los hiperenlaces comentamos que podamos hacer que una imagen fuese un hiperenlace? Pues imaginaos que diferentes zonas de esa imagen pudiesen conducirnos a diferentes pginas. Eso es una imagen mapeada. Veamos un ejemplo: Esta imagen que tenis a la izquierda del prrafo es una imagen cualquiera (un GIF en este caso), pero tiene asociado un mapa; de esta manera, podris comprobar que haciendo clic sobre cada uno de estos personajes iremos a una pgina distinta. No s si los habis reconocido, pero son los protagonistas del la serie america Friends. Pues bien, como la biografa de estos personajes est situada en la misma pgina, he pensado que cada uno de ellos enlazar con una de las pginas de su web. Para probar, no tenis ms que pulsar sobre ellos (con cuidado, no les hagis dao, que son muy sensibles). o es fabuloso!!! Pues a esto se le llama una imagen mapeada. Hay 3 maneras de hacer una imagen mapeada, una de ellas muy sencilla (mediante cdigo HTML), otra muy complicada (mediante JAVA) y una ltima en desuso (mediante ficheros MAP). Para desarrollar un mapa de estos se utilizan dos mtodos: Client-side (del lado del cliente, o sea, nosotros) y Server-side (del lado del servidor, es decir, de nuestro Proveedor de Internet). El mtodo Client-side es el que se utiliza hoy en da en un 99,9% de las pginas, luego os comento por qu.

El mtodo Client-side
ue duda cabe de que todo aquello que podamos hacer nosotros mismos sin necesidad de programas complejos siempre acaba siendo la mejor solucin. Este es uno de los motivos de que se crease el mtodo Client-side, porque antes se utilizaba el Server-side y necesitabamos de programas ajenos al editor de HTML para crear los mapas de imagen (ficheros de extensin .map). Pero esta historia me la reservo para ms adelante. Vamos a ver en qu consiste este mtodo del lado del cliente. l mtodo Client-side se llama as porque la informacin acerca de dnde se hallan las coordenadas del mapa y a dnde apunta cada zona de ste se encuentra descrita en la pgina web, de manera que es el navegador el que se encarga de interpretar toda la informacin. La descripcin del mapa se puede encontrar en la misma pgina que la imagen mapeada o en otra pgina, aunque es preferible que siempre se encuentren en la misma para aligerar la carga de sta. Para crear un mapa debemos utilizar un par de etiquetas nuevas: <MAP> y <AREA>. a etiqueta <MAP> slo contiene un atributo, NAME, en el cual ir el nombre del mapa. De esta manera podremos tener muchos mapas en una misma pgina sin que se confundan entre ellos. Esta etiqueta es de cierre obligatorio y entre la etiqueta de inicio y la de cierre irn todas las etiquetas <AREA> que necesitemos, una por cada zona del mapa que queramos definir. La etiqueta <AREA> tiene 3 atributos obligatorios (SHAPE, COORDS y HREF) y tres ms opcionales y poco usados, debido a su incompatibilidad de dos de ellos con algunos navegadores; me refiero a los atributos TARGET, ALT y TITLE. Y como s que estis impacientes por empezar a hacer mapas, no me enrollo ms. Veamos ante todo un ejemplo de cdigo:
http://personal1.iddeo.es/joseriki/m_mapas.htm (1 de 5) [18/11/2000 16:27:36]

Captulo 9. Imgenes mapeadas

Cdigo
<IMG SRC="friendsm.gif" BORDER=0 USEMAP="#amigos"> <MAP NAME="amigos"> <AREA SHAPE="poly" COORDS="164,72,175,60,190,67,203,96,204,129,185,128,171,96,161,77,164,73" HREF="http://friends.warnerbros.com" TARGET="_blank" ALT="Joey: Pgina principal" TITLE="Joey"> <AREA SHAPE="poly" COORDS="140,76,158,77,175,113,176,127,139,131,133,99,137,75" HREF="http://friends.warnerbros.com/cmp/poll.htm" TARGET="_blank" ALT="Fibi: Un poco de juego"> <AREA SHAPE="poly" COORDS="130,15,154,20,163,50,152,71,131,68,123,35,129,14,130,12,131,13" HREF="http://friends.warnerbros.com/cmp/stations.htm" TARGET="_blank" ALT="Ross: Estaciones" TITLE="Ross"> <AREA SHAPE="poly" COORDS="92,28,103,3,134,5,129,19,119,25,127,47,135,92,112,101,101,64,94,36,93,23" HREF="http://friends.warnerbros.com/cmp/today.htm" TARGET="_blank" ALT="Rachel: Qu pasa hoy" TITLE="Rachel"> <AREA SHAPE="circle" COORDS="73,59,27" HREF="http://friends.warnerbros.com/cmp/backstge.htm" TARGET="_blank" ALT="Chandler: El espectculo"> <AREA SHAPE="rect" COORDS="6,64,53,132" HREF="http://friends.warnerbros.com/cmp/meetstar.htm" TARGET="_blank" ALT="Monica: Conoce a las estrellas"> </MAP>

Resultado

Pues vamos a analizar y describir cada uno de los atributos que aparecen en la etiqueta <AREA>. Coged papel y boli.

SHAPE El valor de este atributo indica la forma del rea de mapa, la cual puede ser un (Forma) crculo (circle), un rectngulo (rect), un zona poligonal (poly) o un punto (point); el resto de la imagen ser la zona por defecto (default). Dependiendo de la forma de la zona, las corrdenadas sern de un tipo o de otro, como veremos en el prximo atributo, COORDS. El valor "point" no es muy utilizado (de hecho, llevo mucho tiempo haciendo y viendo pginas web y todava no lo he visto utilizar nunca) y lo nico que hace es apuntar aun pixel en la imagen, hay que tener punteria para dar con l!. La zona "default" no se suele poner, pero sirve para hacer que haya un enlace en el rea de imagen que no ha sido definida.
(Coordenadas)

COORDS El atributo COORDS contendr las coordenadas del rea definida, separadas por comas. En funcin de la forma del rea, habr ms o menos coordenadas. Circle: cuando la forma es el crculo este atributo contiene 3 nmeros: la coordenadas X eY representan el punto central de la circunferencia y el tercer nmero indica la longitud en pixeles del radio de sta. Por ejemplo:
SHAPE="circle" COORDS="73,59,27"

Rect: cuando la forma es el rectngulo este atributo contiene 4 nmeros: los dos primeros determinan las coordenadas X,Y de la esquina superior izquierda y los otros dos determinan las coordenadas X,Y de la esquina inferior derecha. Por ejemplo: SHAPE="rect" COORDS="6,64,53,132" Point: cuando la forma es el punto este atributo contiene 2 nmeros que determinan las coordenadas X,Y dentro de la imagen. Y A BUSCAR!. Por ejemplo: SHAPE="rect" COORDS="10,94" Poly: cuando la forma es el polgono este atributo contiene tantos nmeros como vrtices mltiplicado por 2; es decir, si el polgono tiene 12 vrtices, habr 24 nmeros, pues cada vrtice deber estar representado por sus coordenadas X,Y. dentro de la imagen. Por ejemplo:
http://personal1.iddeo.es/joseriki/m_mapas.htm (2 de 5) [18/11/2000 16:27:36]

Captulo 9. Imgenes mapeadas

SHAPE="poly" COORDS="92,28,103,3,134,5,129,19,119,25,127,47,135,92,112,101,101,64" Default: este valor del atributo SHAPE no lleva coordenadas, ya que sirve para

indicar que hacemos referencia a la zona de la imagen que no tiene ningn rea definida, es decir, el resto de la imagen HREF
(Hypertext Reference -Referencia de Hipertexto-)

Este atributo ya lo conecis muy bien, as que no har falta definirlo mucho. Slo deciros que funciona igual que el que se utiliza en la etiqueta <A>. Pero qu pasa cuando se solapan dos o ms reas? A qu pgina iremos a parar? Pues bien, para este caso el orden de las etiquetas es fundamental. La etiqueta que se encuentre primero (de arriba abajo) tendr prioridad a las siguientes, as que vigilad con el orden. Por ejemplo: <AREA SHAPE="rect"
COORDS="10,50,200,100" HREF="http://"chechusworld.mocosoft.com"> <AREA SHAPE="rect" COORDS="0,0,120,70" HREF="http://"pepito.com">

Estas dos rea se solapan, pero la primera funcionar toda y, en cambio, la segunda slo tendr disponible la esquina de arriba (la zona que va de 0,0 a 9,49).
(Sin referencia de Hipertexto)

NOHREF Este atributo se utiliza en substitucin del atributo HREF cuando queremos definir una zona que no tenga ningn enlace. S ya s que os estaris preguntando que con no definir el rea ya est, no? Pues no, porque a veces interesa crear un rea sin enlace que solape a una con enlace para dar una forma diferente a esta segunda. Por ejemplo, tenemos una imagen rectangular que tendr un enlace, pero en el centro de la imagen aparece un crculo y no queremos que el crculo tenga enlace, de manera que definimos primero el crculo y le ponemos el NOHREF este. ALT Este atributo es el mismo que se utiliza en las imgenes. Si recordis, una de sus caractersticas era que mostraba un titulillo con el texto cuando pasbamos el ratn por encima de la imagen. Pues bien, la idea es que haga lo mismo cuando pasa por encima del rea definida. Pero no siempre funciona. Cuando se solapan reas, parece que se encasquillen y adems funcionan en Netscape, pero no en IExplorer. Para IExplorer se utiliza otro atributo que hace lo mismo, TITLE, y parece ser que no tiene tantos problemas. Para que probis lo que os digo, fijaos en la imagen de ejemplo de antes; los que tengis Netscape veris el ttulo en algunos personajes (por ejemplo, Ross o Fibi), pero en las zonas que se solape (por ejemplo, Chandler) nada de nada. En cambio, los que tengis IExplorer veris el ttulo en los personajes Rachel, Ross y Joey, los nicos que tienen el atributo TITLE.
la zona de destino del enlace y tiene como valores el nombre del panel o aquellos cuatro valores especiales: _top, _parent, _self y _blank.

(Alternative Text -Texto alternativo-)

TARGET Si habis ledo el captulo dedicado a los frames, ya sabris para qu sirve este atributo, indica
(Destino)

TITLE Como ya hemos dicho antes, hace lo mismo que el atributo ALT, pero para el (Ttulo) navegador Internet Explorer, a partir de la versin 4.0, ya que es un atributo propio del estndar HTML 4.0. Lo que hacemos muchos programadores es poner ambos atributos a los mapas; de esta manera, se podr ver, tenga el usuario el navegador que sea. ero eso no es todo, pues a la etiqueta <IMG> de la imagen que hace de mapa hay que aadirle un nuevo atributo. Se trata del atributo USEMAP, el cual tendr como valor un texto, adivinis cul? Pues s, el nombre del mapa. Y antes del texto no debemos olvidarnos de colocar el smbolo de la almohadilla, #. Por ejemplo: <IMG SRC="friendsm.gif" BORDER=0 USEMAP="#amigos">. Si el mapa se encuentra en una pgina diferente a la que se encuentra la imagen, deberemos colocar la ruta en la que se encuentra y el nombre de su pgina antes de la almohadilla, como se aprecia en el siguiente ejemplo: <IMG SRC="friendsm.gif" BORDER=0
USEMAP="http://www.pepe.com/friends.htm#amigos">.

http://personal1.iddeo.es/joseriki/m_mapas.htm (3 de 5) [18/11/2000 16:27:36]

Captulo 9. Imgenes mapeadas

esde luego, poner las coordenadas a las diferentes zonas de una imagen puede ser trabajo de chinos. Recuerdo cuando empec con esto del HTML que abra la imagen en un programa grfico e iba calculando las coordenadas de las zonas. Pero era una tarea muy pesada, sobre todo cuando se trataba de reas poligonales. Con la aparicin de los primeros editores de HTML se fue solucionando el problema, pues algunos de ellos incorporaban una herramienta para hacer este tipo de mapas. Pero al mismo tiempo que iban apareciendo editores, tambin aparecieron en escena programas para hacer mapas de imagen, ya fueran Client-side o Server-side. Uno de los programas ms conocidos de este tipo (y adems GRATIX!!!) es el archiconocido MapThis!; un programa sencillo de manejar y que ocupaba poco espacio. uego salieron programas como el WebImage o el MapEdit, este ltimo mucho ms sencillo y con ms opciones que el MapThis!, entre otras cosas porque est adaptado a las nuevas especificaciones del estndar HTML 4.0. WebImage, es un programa ms avanzado, pues no slo hace mapas de imagen Server-side, sino que puedes crear GIFs transparentes, retocar imgenes, aadirle texto, rotarlas y esas cosillas que tanto nos gustan. ambin tenemos opciones ms avanzadas para crear imgenes mapaedas Client-side: la programacin en JAVA. Existen programas como CoolMap que sirven para crear mapas, con la caracterstica aadida de que puedes hacer que las zonas se muevan, le aparezcan decorativos textos o reproduzcan sonidos al pasar el ratn por encima o cuando pulsamos sobre ellas. El problema, como siempre, es que el JAVA carga bastante una pgina y adems suelen ser applets en versin shareware y, si no soltamos un poco de dinerillo, aparecen anuncios por todas partes u otros problemillas.

El mtodo Server-side
uando se creo el primer el primer estndar HTML se incorpor un sistema para hacer que una imagen pudiera tener zonas sensibles que condujesen, al igual que un enlace, a otra pgina u otra parte de un documento. El sistema en cuestin, creado por el CERN pero patentado por la NCSA para su navegador Mosaic, consista en crear un fichero de extensin .map en el cual se guardaban las coordenadas del mapa. El fichero en cuestin se llamara igual que la imagen que contendra los enlaces, ya fuese sta un GIF, un JPEG o un PNG (por ejemplo, para una imagen Pepito.gif el fichero del mapa sera Pepito.map. Despus se creaba un enlace de hipertexto con la imagen en cuestin y se colgaban ambos en el servidor. Tenis ms informacin en la pgina de la NCSA on en las siguientes direcciones: http://www.ncsa.uiuc.edu/SDG/Software/Mosaic/Demo/metamap.html http://ils.unc.edu/ils/lab/tutorials/mapthis.html http://www.mediatec.com http://www.abdn.ac.uk/tools/ibmpc/mapthis/ http://www.lib.msu.edu/science/innopac/mapthis/ l mayor handicap de este sistema fue que las coordenadas no las lea el navegador, sino que cuando el usuario pulsaba sobre una de las reas, el navegador consultaba al servidor en el cual se alojaba la web, a qu pgina deba dirigirse. Claro, al principio pareca un sistema fenomenal, teniendo en cuenta que hace 7 u 8 aos no haba mucha gente en la Red de redes. Pero en el momento en que empezamos a ser muchos usuarios, surgi lo inevitable: la sobrecarga del servidor. La verdad es que estoy exagerando para justificar el cambio a la tecnologa Client-side. Tampoco es que se sobrecargase el servidor, pero desde luego iba ms despacio, pues tena que dar ms pasos. n la versin 2.0 del HTML se prob con el sistema actual, el Client-side, para evitar que se hiciese una llamada al servidor cada vez que se utilizaba uno de estos mapas. Con el mtodo Cliente ya no es necesario que vaya al servidor a preguntar nada, ya que el navegador lo interpreta todo todito. Adems, con el mtodo no se poda probar la efectividad de los enlaces en el mismo ordenador, sino hasta que no se colgaba la pgina en el servidor.Todava encuentro en algn servidor algn fichero MAP (me temo que ms por la pereza de cambiarla, que por la utilidad que tiene),
http://personal1.iddeo.es/joseriki/m_mapas.htm (4 de 5) [18/11/2000 16:27:36]

Captulo 9. Imgenes mapeadas

pero cada vez son menos las pginas que contienen este tipo de mtodo (incluso podis encontrar pginas como http://www.glenns.org/writing/convertmaps.html que convierten los ficheros MAP al sistema Client-side). Eso s, para los nostgicos, os he puesto una imagen GIF asociada a un fichero MAP para que recordis viejos tiempos haciendo clic sobre ella.

a slo me queda deciros cmo se utiliza un fichero.map en una pgina web. Pues es sistema es similar al de aadir una imagen y ponerle un enlace de hipertexto, aunque la imagen deber llevar un atributo que le indique al navegador que debe preguntar al servidor por el destino de las zonas. Ese atributo se denomina ISMAP. Fijaos en la barra de estado del navegador cuando os movis por la imagen; s, s, no indica la pgina a la que enlaza, sino la coordenada en pixeles de la imagen). Este es un ejemplo de una imagen MAP en una pgina (si no me creis, mirad el cdigo de esta pgina):
<A HREF="friends.map"><IMG SRC="friends.gif" BORDER=0 ISMAP"></A>

Hasta aqu el noveno captulo del manual HTML ms elogiado de mi barrio (bueno, es que vivo en un barrio muy chico). El siguiente captulo se adentrar en el fascinante mundo de los formularios. No os lo perdis si queris saber cmo se hace un libro de visitas o que hacer aparecer un alista desplegable. Ahora slo os falta poner a prueba vuestros recin adquiridos conocimientos sobre los efectos especiales y las imgenes mapeadas realizando este sencillo test de 10 preguntas. Si consegus entre un 70% y un 80% de acierto, es que os ha ido la mar de bien.

Este manual ha sido ntegramente elaborado con el sudor y el coco de Jos Luis Iglesias Jckle. En el caso de que queris copiarlo, pedid permiso a vuestra mam y no quitis el nombre del autor, ok? La ltima vez que se me ha ocurrido modificar este manualillo fue ayer mismo, 11/10/99

Yo me vuelvo a la seccin

http://personal1.iddeo.es/joseriki/m_mapas.htm (5 de 5) [18/11/2000 16:27:36]

Captulo 10. Los Formularios

Introduccin
ste captulo es un poco ms complicado que los anteriores, por eso lo he dejado para el final. Bueno, tampoco quiero asustaros, porque si alguna vez habis trabajado con bases de datos la dificultad ser mnima. Los formularios son contenedores de controles (casillas de texto, casillas de opcin, listas desplegables, botones, etc.) y tiene como funcin, adems de contener estos controles, de enviar la informacin que en ellos insertemos hacia lo que se denomina un agente de proceso de informacin (el servidor de correo electrnico, el servidor web, etc.). i todava no acabis de relacionar lo que os digo con algo con cara y pies, podis ir un momento a la seccin Libro de Visitas de mi web; all podris ver las distintas formas que tienen estos controles y la utilidad que suponen para una web. Los formularios no slo sirven para que el usuario introduzca informacin propia, sino que pueden servir para facilitar el acceso a informacin o mejorar el diseo y estructura de la pgina. Pero claro, hasta que no veis las cosas que se pueden conseguir con estas etiquetas, seguiris poniendo cara de asombro y estupefaccin. ara los que no tenis ni idea de qu es una base de datos y cmo se estructura, ser mejor que os comente cuatro cosillas. Una base de datos es un sistema de almacenamiento en el que la informacin se estructura mediante lo que se denomina Campos y Registros (algunos los conoceris como tuplas). Los campos son los elementos mediante los cuales clasificamos la informacin; los registros son la informacin para cada uno de esos campos (aunque no necesariamente todos). Veamos una tabla sencillita de ejemplo: Nmero 1 2 3 Nombre Lourdes Paco Priscilo Apellido Carriada Jones Torpedete Sexo Mujer Hombre Edad Direccin 27 Matalascaas, 34 2 1 45 Trinidad av., 234 23 Bajo un puente, 78

ues bien, en esta tabla de empleados de una empresa hay 6 campos (Nmero, Nombre, Apellido, etc.) y 3 registros, por ahora. El tercer registro no tiene valor para el campo Sexo y no porque esa persona no tenga sexo, sino porque la persona que tom los datos no consider que fuese necesario (quizs no lo tena muy claro). Con esto quiero decir que en muchas tablas habr valores en blanco que el usuario introducir de forma opcional. Pero eso es algo que depender de la persona que disee la base de datos.

http://personal1.iddeo.es/joseriki/m_forms.htm (1 de 11) [18/11/2000 16:28:10]

Captulo 10. Los Formularios

La estructura de un formulario
ueno, vamos a darle un poco de caa al asunto. Para crear un formulario necesitaremos dos elementos, fundamentalmente: la etiqueta de formulario <FORM> (que es de cierre obligatorio) y las etiquetas de los controles: <INPUT>, <SELECT> y <TEXTAREA>, las dos ltimas, de cierre obligatorio. Desde luego, no slo hay 3 tipos de controles, sino bastantes ms, pero para elegir cul utilizaremos deberemos utilizar atributos de estas etiquetas. a etiqueta <FORM> determina la accin que llevar acabo el formulario y antes de su cierre debern incluirse todos los controles que deseemos utilizar en el formulario. Lo ms comn es que encontris la etiqueta <FORM> con al menos un atributo, ACTION, aunque si slo queris un formulario para incluir botones, no ser necesario poner nada ms. Pero no os preocupis, en este captulo veremos todas las posibilidades que nos brinda esta etiqueta y para ello deberemos aprender algo sobre sus atributos. Los atributos de la etiqueta <FORM> son 4: ACTION, METHOD, ENCTYPE y NAME. G ACTION es la URL del servidor de informacin que se encargar, mediante un script CGI o el protocolo SMTP, de gestionar el contenido del formulario que hemos enviado; si se omite la URL, el servidor entender que el script est ubicado en la misma direccin que la pgina del formulario. Si nuestro ISP nos lo permite (o nos lo proporciona) podremos utilizar un script CGI que se encargue de gestionar la informacin (agruparla en tablas, realizar estadsticas, enviar una pgina de confirmacin, etc.). Ejemplo: <FORM ACTION="http://personal.iddeo.es/chechusworld/cuestionario.cgi"> Por otro lado, si nuestro servidor no nos deja o simplemente no queremos complicarnos la vida con CGIs, tambin la opcin de utilizar una cuenta de correo electrnico a la que se enviarn los contenidos del formulario. Este mtodo es muy utilizado por usuarios personales, dada su fcil implementacin; el nico problema serio es que Internet Explorer 3.0 no soporta esta opcin. Ejemplos: <FORM ACTION="mailto:[email protected]?subject=Formulario"> <FORM ACTION="mailto:[email protected]"> METHOD es el mtodo HTTP/1.0 usado para enviar los contenidos del formulario al servidor que gestionar la informacin. Existen dos mtodos: GET y POST; la utilizacin de uno u otro depender de cmo trabaje nuestro servidor particular, pero ltimamente se recomienda que se utilice exclusivamente el mtodo post (de hecho, la mayora de los servidores estn migrando hacia este sistema). GET Este es el mtodo por defecto (si no se indica el mtodo se deducir que se trata de este sistema) y causa que los contenidos con los que hemos completado el formulario se aadan a la URL como si de una consulta se tratase. POST Este mtodo hace que los contenidos del formulario sean enviados al servidor en un bloque de datos mejor que como parte de una URL. Mediante este sistema se evita el exceso de caracteres en una URL (URL superlargas), lo cual suele provocar un congestionamiento del flujo de datos y, en ocasiones, la prdida de la informacin hacia el servidor.
http://personal1.iddeo.es/joseriki/m_forms.htm (2 de 11) [18/11/2000 16:28:10]

Captulo 10. Los Formularios

ENCTYPE especifica la codificacin para los contenidos del formulario. Este atributo slo se aplica cuando se utiliza el mtodo POST y, as y todo, no hay muchos valores que se puedan utilizar (por defecto, application/x-www-form-urlencoded); para informacin textual est text/plain) y cuando se trata de informacin binaria se utiliza multipart/form-data). Ejemplo: <FORM ACTION="http://personal.iddeo.es/Chechusworld/form.pl" METHOD=POST ENCTYPE="multipart/form-data"> NAME indica el nombre del formulario, pero slo se utiliza cuando se trabaja con Javascript o VBScript, pues es la manera de hacer referencia a este elemento dentro de una web. <FORM ACTION="http://personal.iddeo.es/chechusworld/cuestionario.cgi" NAME="quest">

ue conste que no os explico esto para que lo pongis en todos vuestros formularios, sino para que sepis cul es su utilidad. A la larga veris que el atributo ENCTYPE no lo utilizaris nunca y que la mayora de las etiquetas form que empleis en vuestras pginas las insertaris a partir de un cdigo que os proporcione el que ha creado el script CGI. Y es que poner nuestro propio CGI en nuestra propia web, a menudo queda en un simple prposito. or lo general, los ISP (Internet Service Providers) no permiten que sus usuarios alojen sus propios scripts CGI en su espacio web, principalmente por tres motivos: seguridad, saturacin e ingresos. No s si sois conscientes de que estos pequeos programas se ejecutan en el Sistema Operativo que abastece el servidor y si no se ha desarrollado bien el programa (que tenga un bug o un virus) podra afectar al resto de procesos que se estn ejecutando al mismo tiempo; adems, si todo el mundo que tiene una cuenta FTP en el servidor le da por ponerse un CGI, el servidor ira mucho ms lento porque debera ejecutar muchos programas a la vez. Pero la razn que no suelen dar, por lo general, es la econmica; los scripts suponen una fuente de ingresos formidable para el ISP, no slo por desarrollar el script, sino tambin por su posterior mantenimiento. Resumiendo, la estructura de un formulario ser parecida a sta: <FORM ACTION="URL" METHOD=POST> Controles y texto del formulario </FORM>

La etiqueta <INPUT> y sus controles

Bueno, bueno, bueno. Vamos a empezar con los controles bsicos. Pero antes, un par de apuntes que conviene que no olvidis nunca a la hora de hacer un formulario. G Todos los controles que aportan informacin (cuadro de texto, botones de opcin, listas, etc.) debern llevar obligatoriamente un atributo name que identifique el control respecto a su formulario.
http://personal1.iddeo.es/joseriki/m_forms.htm (3 de 11) [18/11/2000 16:28:10]

Captulo 10. Los Formularios

Todos los formularios que contengan informacin para enviar a un servidor debern tener un botn de envo y, opcionalmente, otro de borrado. La mejor manera de distribuir los elementos de un formulario en mediante tablas.

a sintaxis de la etiqueta <INPUT> es la siguiente: <INPUT TYPE=tipocontrol NAME="nombre_control" atributos> y nunca se cierra. El atributo TYPE puede tener muchos valores distintos, cada uno de los cuales determinar el aspecto y comportamiento del control. Los dems atributos se explican ms abajo, aunque en la siguiente tabla de valores del atributo TYPE podremos saber en qu controles se pueden emplear. Tipo
TEXT
Texto

Descripcin y ejemplo Este es el valor por efecto, de manera que si no se ponen el atributo TYPE aparecer este control, la casilla de texto. Necesita obligatoriamente el atributo name y adems acepta los atributos VALUE, SIZE y MAXLENGTH.Ejemplo: <INPUT TYPE=TEXT NAME="telefono" SIZE=15 MAXLENGTH=9>

PASSWORD

Al igual que control anterior, ste tambin crea una casilla de texto, pero el contenido aparecer con una mscara de asteriscos, para que nadie pueda ver qu estamos tecleando. Por supuesto, cuando se enve la informacin al servidor no se vern estos asteriscos, sino lo que se ha tecleado. Acepta los mismos atributos que el anterior control, aunque nunca se utiliza el VALUE. Ejemplo: <INPUT TYPE=PASSWORD NAME="Cuenta" SIZE=10 MAXLENGTH=8>

CHECKBOX


Subscribirse?

Este valor crea una casilla de verificacin para indicar un valor lgico. Acepta los atributos VALUE y CHECKED. El texto que se escriba en el atributo VALUE ser el que se almacene en la base de datos, pero no ser visible para el usuario de la pgina. Ejemplo: <INPUT TYPE=CHECKBOX NAME="suscribirse" VALUE="Suscrito" CHECKED> Subscribirse?

RADIO

Varn Mujer

Este valor crea botones de opcin (radiobuttons). Este elemento siempre debe ir en grupo, y es imprescindible que el valor del atributo NAME sea idntico para todos los elementos del grupo, de lo contrario no funcionarn como tal. Acepta el atributo CHECKED. Ejemplo: <INPUT TYPE=RADIO NAME="sexo" VALUE="Hombre">Varn <BR> <INPUT TYPE=RADIO NAME="sexo" VALUE="Mujer">Mujer

SUBMIT
Enviar Datos

Este es uno de los controles principales, pues es el que utilizar el usuario para que la informacin que ha estado rellenando sea enviada al servidor. Tiene el atributo VALUE para poner un texto al botn; si se omite este atributo, el texto del botn ser Submit Query o Enviar Consulta, segn el idioma del navegador.Ejemplo: <INPUT TYPE=SUBMIT VALUE="Enviar Datos">

http://personal1.iddeo.es/joseriki/m_forms.htm (4 de 11) [18/11/2000 16:28:10]

Captulo 10. Los Formularios

RESET
Borrar Datos

Este botn sirve para restablecer la informacin original del formulario, por si queremos repetirlo. Al igual que el anterior botn, el atributo VALUE sirve para poner un texto al botn, en el que por defecto se leer Reset o Restablecer, segn el idioma del navegador.Ejemplo: <INPUT TYPE=RESET VALUE="Borrar Datos">

BUTTON

Este control slo se utiliza con programacin (Javascript o VBScript) y sirve para que se produzca una accin al pulsar sobre l. En este botn es muy importante que se aada el atributo NAME y el atributo VALUE, pues no aparece ningn texto por defecto. Adems de estos dos atributos, debe ir acompaado de un atributo manejador de evento (ver captulo 9 sobre los efectos especiales) como onClick. Ejemplo: <INPUT TYPE=BUTTON VALUE="Pulsa" NAME="A1" onClick="Func()">

IMAGE

Este control tiene el aspecto de una imagen pero sirve para lo mismo que el botn SUBMIT, enviar informacin al servidor. Adems, tambin se enva informacin acerca de las coordenadas X e Y donde se puls en la imagen. Necesita el atributo SRC para indicar la imagen y puede llevar cualquier otro atributo que haya en la etiqueta <IMG>. Ejemplo: <INPUT TYPE=IMAGE SRC="imgenviar.gif" BORDER=0>

FILE

Este control sirve para que el usuario pueda enviar un fichero al servidor. Basta que pulse sobre el botn Examinar y seleccione el fichero. Acepta los atributos SIZE y MAXLENGTH. Ejemplo: <INPUT TYPE=FILE NAME="Fichero" SIZE=10>

HIDDEN

Este valor de la etiqueta <INPUT> no crea un control; slo sirve para almacenar un valor que luego se enviar al servidor. Ejemplo: <INPUT TYPE=HIDDEN NAME="Num_Form" VALUE="Form1">

Atributos que pueden aparecer en la etiqueta <INPUT>

dems del atributo TYPE y el atributo name, prcticamente siempre presente en todos los controles, algunos controles pueden llevar otros atributos, los cuales se comportan de distinta manera segn el tipo de control al que acompaen. En la siguiente tabla podemos observar todas las posibilidades de combinacin. Atributo Descripcin y Ejemplo

http://personal1.iddeo.es/joseriki/m_forms.htm (5 de 11) [18/11/2000 16:28:10]

Captulo 10. Los Formularios

VALUE

Este atributo tiene como valor alfanumrico, incluyendo espacios entre las palabras. Se puede utilizar en todos los controles de la etiqueta <INPUT> menos en el FILE y el IMAGE. En los controles TEXT y PASSWORD sirve para poner un valor por defecto; en los botones sirve para especificar el texto que queremos que aparezca; en la casilla de verificacin y los botones de opcin indican el valor que se enviar al servidor si se selecciona el control. Ejemplo: <INPUT TYPE=TEXT NAME="Pas" VALUE="Espaa">

SIZE

Indica el tamao de la casilla de texto en los controles TEXT, FILE y PASSWORD. Este tamao es igual al nmero de caracteres que se vern en el control, aunque despus se inserten ms; es decir, si el tamao es 10 y escribimos 15 caracteres, se enviarn los 15 pero en pantalla slo se vern los 10 ltimos. Ejemplo: <INPUT TYPE=TEXT NAME="telefono" SIZE=10>

MAXLENGTH

Indica el nmero mximo de caracteres para los controles TEXT, FILE y PASSWORD. Aunque un control tenga el atributo SIZE=20, si el MAXLENGTH=10 slo podr escribir 10 caracteres, espacios inclusive. Ejemplo: <INPUT TYPE=TEXT NAME="telefono" MAXLENGTH=9>

CHECKED

Este atributo booleano sirve para indicar que el control aparecer seleccionado por defecto. Vale tanto para las casillas de verificacin como para los botones de opcin, aunque en estos ltimos slo uno de los botones podr llevarlo. Ejemplo: <INPUT TYPE=CHEKBOX NAME="EnviarInformacin" CHECKED >

DISABLED

Este atributo slo existe para Internet Explorer (versiones 4 en adelante). Se puede aadir a cualquier control y har que permanezca inactivo hasta que mediante Javascript o VBScript se vuelva a activar. Ejemplo: <INPUT TYPE=TEXT NAME="telefono" DISABLED >

Las listas y reas de texto

as listas son uno de los elementos ms vistosos de los formularios, adems de los ms utilizados, pues no comportan que el usuario tenga que escribir, lo cual, en ocasiones, le resulta un poco pesado. Por otro lado, una lista de elementos es la mejor manera de limitar la eleccin a unos valores constantes, lo cual elimina el problema de errores tipogrficos por parte del usuario. Vamos, que las vais a utilizar ms que el cepillo de dientes. xisten dos tipos de listas: las listas desplegables (listas pop-up) y las listas de seleccin mltiple. Las primeras son aquellas que pulsamos sobre una flechita y slo se puede elegir un elemento de la lista; las segundas son las que se ven varios elementos y, en ocasiones, una barra de desplazamiento que nos permite acceder a los elementos que no se ven en un principio. Estas segundas pueden ser de seleccin nico o mltiple; es decir, que si mantenemos pulsadas la tecla Control o la de maysculas podemos seleccionar ms de un elemento. Aqu tenemos unos ejemplos para ir entrando en materia.
http://personal1.iddeo.es/joseriki/m_forms.htm (6 de 11) [18/11/2000 16:28:10]

Captulo 10. Los Formularios

Tipo de lista Listas desplegables

Ordenadores

Ejemplo

Descripcin Lista pop-up que se desplega cuando se pulsa sobre la flechita de la derecha Lista de cuatro elementos y ningn elemento oculto

Coches Deportes Ordenadores Cmics

Listas de seleccin nica

Coches Deportes Ordenadores Cmics
Coches Deportes Ordenadores Cmics

Lista de 3 elementos visibles y alguno oculto, de manera que aparece una barra de desplazamiento vertical Lista de 3 elementos visibles y alguno oculto y en la que se puede seleccionar ms de un elemento

Lista de seleccin mltiple

omo podis ver en estos ejemplos, el ancho de las listas ser el mismo que el del elemento ms largo de sta. Y ya no se me ocurre ningn ejemplo ms, por el momento; pero no os preocupis si no os queda claro todava, porque ahora viene lo mejor: Cmo montar un lista de estas. Y veris que sencillito que es. as listas se crean mediante la etiqueta <SELECT>, la cual, a diferencia de la etiqueta <INPUT>, es de cierre obligatorio. Cada uno de los elementos que componen la lista irn precedidos por otra etiqueta denominada <OPTION>, que es de cierre implcito, as que si la queris cerrar o no es cosa vuestra. El texto que pongamos en esta etiqueta <OPTION> ser el que se enviar como valor del campo de la lista. Comencemos por un ejemplo para una lista desplegable: Cdigo <SELECT NAME="aficciones"> <OPTION>Coches <OPTION>Deportes <OPTION>Ordenadores <OPTION>Cmics </SELECT> Ejemplo Pulse sobre la flechita que aparece a la derecha de la lista para que sta se desplegue y muestre sus elementos

Coches

uando se crea una lista de este tipo, por defecto aparece el primer elemento de la lista. Una vez pulsamos sobre la flechita negra que aparece a la derecha de la lista, se despliega sta y aparecen todos los elementos que contiene. En el momento en que pulsemos sobre uno de ellos, la lista se volver a encoger (para pasar el tiempo, podis cronometrar cunto tarda en encogerse la lista; es de lo ms entretenido!). ara evitar que el usuario deje el valor por defecto en la lista (en este caso, Coches) los desarrolladores de pginas web suelen utilizar el truquillo de poner un texto informativo como
http://personal1.iddeo.es/joseriki/m_forms.htm (7 de 11) [18/11/2000 16:28:10]

Captulo 10. Los Formularios

primer elemento de Seleccione un elemento de la lista lista, aunque despus deben de poner una condicin (con cdigo Javascript) para que el usuario seleccione obligatoriamente un elemento de lista. Imagnate que te enva el usuario el formulario con el campo Aficiones=Selecciona un elemento de la lista! ueno, vamos con el otro tipo de lista. Para crear una lista de seleccin slo es necesario incluir un atributo ms a la etiqueta <SELECT>: el atributo SIZE, que ser igual al nmero de elementos que deseemos que se vean en la lista, o mejor dicho, el nmero de filas de la lista. Si el valor del atributo SIZE es inferior al nmero de elementos de la lista, automticamente aparecer una barra de desplazamiento vertical que nos permitir ir al resto de elementos. Cdigo <SELECT NAME= "aficiones" SIZE=4> <OPTION>Coches <OPTION>Deportes <OPTION>Ordenadores <OPTION>Cmics </SELECT> <SELECT NAME= "aficiones" SIZE=3> <OPTION>Coches <OPTION>Deportes <OPTION>Ordenadores <OPTION>Cmics </SELECT> Ejemplo
Coches Deportes Ordenadores Cmics

Descripcin

Lista de seleccin de un solo elemento y sin barra de desplazamiento

Coches Deportes Ordenadores Cmics

Lista de seleccin de un solo elemento y con barra de desplazamiento

luego estn las listas en las que se permite seleccionar ms de un elemento, al igual que seleccionamos varios ficheros en Windows, mediante las teclas Control o Shift, Control para selecciones discontinuas y Shift para selecciones continuas. Para ello tan slo debemos aadir un nuevo atributo a los dos existentes, el atributo MULTIPLE. Veamos un ejemplo: Cdigo <SELECT NAME= "aficiones" SIZE=5 MULTIPLE> <OPTION>Coches <OPTION>Deportes <OPTION>Ordenadores <OPTION>Cmics <OPTION>Cromos <OPTION>Leer </SELECT> Ejemplo Descripcin Lista de seleccin de ms de un elemento y con barra de desplazamiento. Si quieres ver como se comporta, utiliza la teclas Control o Shift para selecionar ms de un elemento de la lista.

Coches Deportes Ordenadores Cmics Cromos Leer

ero aqu no acaba todo, porque todava falta por comentar dos atributos ms que pueden ir dentro de la etiqueta <OPTION>. Se trata de los atributos VALUE y SELECTED. Cuando se enva el contenido del formulario al servidor, el valor del campo de la lista es el texto que aparece junto a la etiqueta <OPTION>, que es el mismo texto que aparece en la lista. Sin embargo, no es necesario que el texto que aparece en la lista sea el que se enva al servidor, aunque si deseamos que sea as, deberemos
http://personal1.iddeo.es/joseriki/m_forms.htm (8 de 11) [18/11/2000 16:28:10]

Captulo 10. Los Formularios

utilizar el atributo value. Pongamos un ejemplo: esulta que tengo un formulario en el que la informacin est en ingls para que la pueda leer cualquier persona en la Red; de esta manera, en la lista de aficiones aparecen los elementos en ingls, pero deseamos que la informacin sea enviada en castellano a nuestra base de datos. Para ello podemos crear una lista como la que se observa a continuacin: Cdigo <SELECT NAME= "aficiones" SIZE=4> <OPTION VALUE="Coches">Cars <OPTION VALUE="Deportes">Sports <OPTION VALUE="Ordenadores">Computers <OPTION VALUE="Cmics">Comics </SELECT> Ejemplo Descripcin Lista de seleccin de un elemento con valores de envo diferentes de los valores de la lista

Cars Sports Computers Comics

i luego, adems, deseamos que aparezca un elemento de la lista seleccionado por defecto, tan slo tenemos que aadir a la etiqueta <OPTION> el atributo SELECTED. Si se trata de una lista de seleccin mltiple podremos poner este atributo en ms de una etiqueta <OPTION>. Por si hay alguna duda despus de ver este ejemplo, lo mejor es que lo probis vosotros mismos. Cdigo <SELECT NAME= "aficiones" SIZE=4> <OPTION VALUE="Coches">Cars <OPTION VALUE="Deportes" SELECTED>Sports <OPTION VALUE="Ordenadores">Computers <OPTION VALUE="Cmics">Comics </SELECT> Ejemplo Descripcin

Cars Sports Computers Comics

Lista de seleccin de un elemento con el segundo elemento de la lista seleccionado por defecto.

ues hasta aqu las listas. Ahora vamos a hablar un poco de lo que son las reas de texto. Las reas de texto son aquellos elementos, tan presentes en todos los formularios, que sirven para que el usuario pueda escribir hasta que le entren calambres. Son zonas muy utilizadas para comentarios y descripciones y se crean mediante la etiqueta <TEXTAREA>. Aqu va un ejemplo: Cdigo <TEXTAREA ROWS=3 COLS=20 NAME="comentarios"> </TEXTAREA> Ejemplo Descripcin rea de texto de 20 caracteres de ancho y 3 filas.

omo habis podido ver en el ejemplo sobre estas lneas, la etiqueta <TEXTAREA> utiliza, adems del ya conocido atributo name, los atributos que determinarn el tamao de este elemento en la pantalla (COLS y ROWS), pero nunca la longitud del texto que ir que los usuarios escribirn dentro. El atributo COLS determina el nmero de caracteres que se vern a lo ancho y ROWS determina el nmero de filas que se vern. Eso s, os recomiendo que antes de colgar la pgina le echis un vistazo en los dos navegadores ms utilizados, Netscape y IExplorer, pues no mantienen el mismo tamao en pantalla, ya que Internet Explorer utiliza letra ms pequea que Netscape.
http://personal1.iddeo.es/joseriki/m_forms.htm (9 de 11) [18/11/2000 16:28:10]

Captulo 10. Los Formularios

Cdigo <TEXTAREA ROWS=3 COLS=20 NAME="comentarios"> </TEXTAREA> <TEXTAREA ROWS=3 COLS=20 NAME="comentarios"> </TEXTAREA>

Ejemplo

Descripcin rea de texto de 20 caracteres de ancho y 3 filas en Microsoft Internet Explorer rea de texto de 20 caracteres de ancho y 3 filas en Netscape Navigator

esa no es la nica diferencia entre ambos elementos entre formularios. Desde luego, no creo que se os haya pasado por alto que en Netscape aparece una antiesttica barra de desplazamiento horizontal adems de la vertical. Cuando escribis en ambos navegadores encontraris otra diferencia notable: cuando escribimos en el rea de texto del Explorer se hacen saltos de lnea automticamente al llegar al lmite de ancho; en cambio, en Netscape necesitamos pulsar la tecla ENTER para hacer el cambio de lnea, de lo contrario, la lnea ser tan larga como queramos. Este fenmeno se puede controlar mediante un atributo denominado WRAP, el cual tiene 3 posibles valores: OFF, VIRTUAL y PHYSICAL. G El valor OFF es el que tiene por defecto Netscape, as que si queremos que Explorer se comporte como Netscape, slo tenemos que ponerle ese valor. G El valor VIRTUAL es el que tiene por defecto Explorer, pero cuando se reciben los datos slo aparecern los saltos de lnea donde se hay pulsado ENTER. G El valor PHYSICAL tiene el mismo resultado en pantalla que el VIRTUAL, pero con la diferencia que lo que tal como aparece en el rea de texto ser como se enviar al servidor. Cdigo <TEXTAREA ROWS=3 COLS=20 NAME="comentarios" WRAP=VIRTUAL> </TEXTAREA> Ejemplo Descripcin rea de texto que va a hacer un salto de lnea automtico

ara acabar, falta comentar que podemos hacer que aparezca un texto simplemente escribindolo entre la etiqueta de apertura y la de cierre. Eso s, no se le puede poner formato, pues cualquier etiqueta que se incluya dentro de este espacio ser tratada como texto y no como cdigo. Yo ya os he advertido, que conste. Cdigo <TEXTAREA ROWS=3 COLS=20 NAME="comentarios" WRAP=VIRTUAL> Me parece que... </TEXTAREA> Ejemplo Descripcin

Me parece que...

rea de texto con texto dentro por defecto.

http://personal1.iddeo.es/joseriki/m_forms.htm (10 de 11) [18/11/2000 16:28:10]

Captulo 10. Los Formularios

Hasta aqu el dcimo y ltimo captulo del manual de HTML por autonomasia..., digo por Jos Luis Iglesias. A partir de ahora me dedicar en cuerpo y alma a crear el tan esperado manual de Hojas de Estilo en Cascada, pero no esperis que est hasta el mes de abril o mayo. Ya slo os falta poner a prueba vuestros recin adquiridos conocimientos realizando este sencillo test de 10 preguntas. Si consegus entre un 70% y un 90% de acierto, es que habis hecho los deberes como buenos estudiantes que sois.

Este manual ha sido ntegramente elaborado con el sudor y el coco de Jos Luis Iglesias Jckle. En el caso de que queris copiarlo, pedid permiso a vuestra mam y no quitis el nombre del autor, ok? La ltima vez que se me ha ocurrido modificar este manualillo fue ayer mismo, 16/1/2000

Yo me vuelvo a la seccin

http://personal1.iddeo.es/joseriki/m_forms.htm (11 de 11) [18/11/2000 16:28:10]

Ayuda HTML

Manual de HTML El cubo de color Los nombres de los colores Galera de Imgenes Glosario de etiquetas y atributos de HTML Hojas de Estilo en Cascada Los smbolos de HTML

n este apartado de mi Web podris encontrar todo tipo de ayuda para confeccionar vuestras pginas WEB: cdigo HTML, la paleta de 216 colores o los 140 nombres de colores que hay en HTML, un apndice sobre los diferentes atributos que se utilizan en las Hojas de Esilo en Cascada (CSS) y por ltimo una galera de imgenes para que podis adornar vuestras paginillas con algo ms que texto. La mayora de estas imgenes las he ido recogiendo de Internet, as que no os d reparo llevroslas (ya s que no, pero as quedo bien). El ltimo bombazo es el manual de HTML por captulos que acabo de inaugurar en esta seccin. Cada mes incluir un captulo con ejemplos y esas cosas que a todos los que empezis os gustan. n breve (bueno, es un decir), colgar una pgina que tengo a medio desarrollar sobre cmo utilizar las Hojas de Estilo y sobre el DHTML (Dynamic HTML), dos temas de los que seguro oiremos hablar con frecuencia de ahora en adelante. La galera de imgenes se ir reciclando cada mes, de este modo no tendr que colocar todas las imgenes el primer da (pues ya me diris quin es el guapo que se espera 30 minutos a que se cargue la pgina por completo si se me ocurre poner ms de cien imgenes). i tenis dudas sobre cualquier dato de los que aqu aparecen o sobre algn problema a la hora de crear una pgina (con HTML, FrontPage, Pagemill, Composer o Dreamweaver), podis enviarme un mail a esta direccin [email protected]

http://personal1.iddeo.es/joseriki/html1.htm (1 de 2) [26/11/2000 20:42:04]

Ayuda HTML

Ala!, a disfrutar con el HTML, que son dos das y uno es festivo.

http://personal1.iddeo.es/joseriki/html1.htm (2 de 2) [26/11/2000 20:42:04]

El Color Cube del navegador

#000000 #000000 #003300 #003300 #006600 #006600 #009900 #009900 #00cc00 #00cc00 #00ff00 #00ff00 #330000 #330000 #333300 #333300 #336600 #336600 #339900 #339900 #33cc00 #33cc00 #33ff00 #33ff00 #660000 #660000 #663300 #663300 #666600 #666600 #669900 #669900 #66cc00 #66cc00 #66ff00 #66ff00

#000033 #000033 #003333 #003333 #006633 #006633 #009933 #009933 #00cc33 #00cc33 #00ff33 #00ff33 #330033 #330033 #333333 #333333 #336633 #336633 #339933 #339933 #33cc33 #33cc33 #33ff33 #33ff33 #660033 #660033 #663333 #663333 #666633 #666633 #669933 #669933 #66cc33 #66cc33 #66ff33 #66ff33

#000066 #000066 #003366 #003366 #006666 #006666 #009966 #009966 #00cc66 #00cc66 #00ff66 #00ff66 #330066 #330066 #333366 #333366 #336666 #336666 #339966 #339966 #33cc66 #33cc66 #33ff66 #33ff66 #660066 #660066 #663366 #663366 #666666 #666666 #669966 #669966 #66cc66 #66cc66 #66ff66 #66ff66

#000099 #000099 #003399 #003399 #006699 #006699 #009999 #009999 #00cc99 #00cc99 #00ff99 #00ff99 #330099 #330099 #333399 #333399 #336699 #336699 #339999 #339999 #33cc99 #33cc99 #33ff99 #33ff99 #660099 #660099 #663399 #663399 #666699 #666699 #669999 #669999 #66cc99 #66cc99 #66ff99 #66ff99

#0000cc #0000cc #0033cc #0033cc #0066cc #0066cc #0099cc #0099cc #00cccc #00cccc #00ffcc #00ffcc #3300cc #3300cc #3333cc #3333cc #3366cc #3366cc #3399cc #3399cc #33cccc #33cccc #33ffcc #33ffcc #6600cc #6600cc #6633cc #6633cc #6666cc #6666cc #6699cc #6699cc #66cccc #66cccc #66ffcc #66ffcc

#0000ff #0000ff #0033ff #0033ff #0066ff #0066ff #0099ff #0099ff #00ccff #00ccff #00ffff #00ffff #3300ff #3300ff #3333ff #3333ff #3366ff #3366ff #3399ff #3399ff #33ccff #33ccff #33ffff #33ffff #6600ff #6600ff #6633ff #6633ff #6666ff #6666ff #6699ff #6699ff #66ccff #66ccff #66ffff #66ffff

http://personal1.iddeo.es/joseriki/gama_col.htm (1 de 2) [26/11/2000 20:44:07]

El Color Cube del navegador

#990000 #990000 #993300 #993300 #996600 #996600 #999900 #999900 #99cc00 #99cc00 #99ff00 #99ff00 #cc0000 #cc0000 #cc3300 #cc3300 #cc6600 #cc6600 #cc9900 #cc9900 #cccc00 #cccc00 #ccff00 #ccff00

#990033 #990033 #993333 #993333 #996633 #996633 #999933 #999933 #99cc33 #99cc33 #99ff33 #99ff33 #cc0033 #cc0033 #cc3333 #cc3333 #cc6633 #cc6633 #cc9933 #cc9933 #cccc33 #cccc33 #ccff33 #ccff33 #ff0000 #ff0000

#990066 #990066 #993366 #993366 #996666 #996666 #999966 #999966 #99cc66 #99cc66 #99ff66 #99ff66 #cc0066 #cc0066 #cc3366 #cc3366 #cc6666 #cc6666 #cc9966 #cc9966 #cccc66 #cccc66 #ccff66 #ccff66 #ff0033 #ff0033

#990099 #990099 #993399 #993399 #996699 #996699 #999999 #999999 #99cc99 #99cc99 #99ff99 #99ff99 #cc0099 #cc0099 #cc3399 #cc3399 #cc6699 #cc6699 #cc9999 #cc9999 #cccc99 #cccc99 #ccff99 #ccff99 #ff0066 #ff0066

#9900cc #9900cc #9933cc #9933cc #9966cc #9966cc #9999cc #9999cc #99cccc #99cccc #99ffcc #99ffcc #cc00cc #cc00cc #cc33cc #cc33cc #cc66cc #cc66cc #cc99cc #cc99cc #cccccc #cccccc #ccffcc #ccffcc

#9900ff #9900ff #9933ff #9933ff #9966ff #9966ff #9999ff #9999ff #99ccff #99ccff #99ffff #99ffff #cc00ff #cc00ff #cc33ff #cc33ff #cc66ff #cc66ff #cc99ff #cc99ff #ccccff #ccccff #ccffff #ccffff

http://personal1.iddeo.es/joseriki/gama_col.htm (2 de 2) [26/11/2000 20:44:07]

Valores de los Colores en HTML

Valores de los Colores por nombre y por cdigo hexadecimal

AliceBlue-F0F8FF AquaMarine-7FFFD4 Bisque-FFE4C4 Blue-0000FF BurlyWood-DEB887 Chocolate-D2691E Cornsilk-FFF8DC DarkBlue-0000FF DarkGray-A9A9A9 DarkMagenta- 8B008B DarkOrchid-9932CC DarkSeaGreen-8FBC8F DarkTurquoise-00CED1 DeepSkyBlue-00BFFF FireBrick-B22222 Fuchsia-FF00FF Gold-FFD700 Green-008000 HotPink-FF69B4 Ivory-FFFFF0 LavenderBlush-FFF0F5 LightBlue-ADD8E6 LightGoldenrodYellow-FAFAD2 LightPink-FFB6C1 LightSkyBlue--87CEFA LightYellow-FFFFE0 Linen-FAF0E6 MediumAquaMarine-66CDAA AntiqueWhite-FAF8FF Azure-F0FFFF Black-000000 BlueViolet-8A2BE2 CadetBlue-5F9EA0 Coral-FF7F50 Crimson-DC143C DarkCyan-008B8B DarkGreen-006400 DarkOliveGreen-556B2F DarkRed-8B0000 DarkSlateBlue-483D8B DarkViolet-9400D3 DimGray-696969 FloralWhite-FFFAF0 Gainsboro-DCDCDC Goldenrod-DAA520 GreenYellow-ADFF2F IndianRed-CD5C5C Khaki-F0E68C LawnGreen-7CFC00 LightCoral-F08080 LightGreen-90EE90 LightSalmon-FFA07A LightSlateGray-778899 Lime-00FF00 Magenta-FF00FF MediumBlue-0000CD Aqua-00FFFF Beige-F5F5DC BlancheDalmond-FFEBCD Brown-A52A2A Chartreuse-7FFF00 CornFlowerBlue-6495ED Cyan-00FFFF DarkGoldenrod-B8860B DarkKhaki-BDB76D DarkOrange-FF8C00 DarkSalmon-E9967A DarkSlateGray-2F4F4F DeepPink-FF1493 DodgerBlue-1E90FF ForestGreen-228B22 GhostWhite-F8F8FF Gray-808080 HoneyDew-F0FFF0 Indigo-4B0082 Lavender-E6E6FA LemonChiffon-FFFACD LightCyan-E0FFFF LightGrey-D3D3D3 LightSeaGreen-20B2AA LightSteelBlue-B0C4DE LimeGreen-32CD32 Maroon-800000 MediumOrchid-BA55D3

http://personal1.iddeo.es/joseriki/rgbvalue.htm (1 de 2) [26/11/2000 20:48:50]

Valores de los Colores en HTML

MediumPurple-9370DB MediumSpringGreen-00FA9A MidnightBlue-191970 Moccasin-FFE4B5 OldLace-FDF5E6 Orange-FFA500 PaleGoldenrod-EEE8AA PaleVioletRed-DB7093 Peru-CD853F PowderBlue-B0E0E6 RosyBrown-BC8F8F

MediumSeaGreen-C3B371 MediumTurquoise-48D1CC MintCream-F5FFFA NavajoWhite-FFDEAD Olive-808000 OrangeRed-FF4500 PaleGreen-98FB98 PapayaWhip-FFEFD5 Pink-FFC0CB Purple-800080 RoyalBlue-4169E1

MediumSlateBlue-7B68EE MediumVioletRed-C71585 MistyRose-FFE4E1 Navy-000080 OliveDrab-6B8E23 Orchid-DA70D6 PaleTurquoise-AFEEEE PeachPuff-FFDAB9 Plum-DDA0DD Red-FF0000

http://personal1.iddeo.es/joseriki/rgbvalue.htm (2 de 2) [26/11/2000 20:48:50]

Glosario de etiquetas y atributos de HTML

Descripcin
Formato HTML Encabezado Ttulo Cuerpo Comentarios Ejemplos de cdigo

Apertura <html> <head> <title> <body> <!----> <xmp>

Cierre </html> </head> </title> </body> </xmp>

Descripcin
Introducir un script

Apertura <script language= "lenguaje de program." >

Cierre </script>

URL y marco por defecto La pgina es un ndice Tamao de fuente origen Informacin

<base href="URL"> y <base target="tipo" (_top, etc)> <isindex prompt=... action=....> <basefont size=1-7> </basefont> <meta> Atributos <meta> refresh, set-cookie, expires

Recargar pantalla, cookie, fecha caducidad

http-equiv="..."

http://personal1.iddeo.es/joseriki/htmlmarc.htm (1 de 13) [26/11/2000 20:56:55]

Glosario de etiquetas y atributos de HTML

Esperar e ir a otra pgina o palabras claves Nombre

content="x" name="nombre"

x=contenido; 2;URL=...

Descripcin
Negrita Cursiva Subrayado Tachado

Apertura <b> <strong> <dfn> <i> <em><cite> <u> <s> o <strike> <tt> <code> <samp> <kbd> <var> <sup> <sub> <big>, <small> <font> Atributos <font> size=n; +n; -n color="color" face="fuente"

Cierre </b> </strong> </dfn> </i> <em> </cite> </u> </s> o </strike> </tt> </code> </samp> </kbd> </var> </sup> </sub> </big>, </small> </font> 1 al 7 en ingls o en hexadecimal Arial, desdemona, times, etc

Letra teletipo

Superndice Subndice +pequeo o +grande Tipo fuente del texto

Tamao Color

Fuente

http://personal1.iddeo.es/joseriki/htmlmarc.htm (2 de 13) [26/11/2000 20:56:55]

Glosario de etiquetas y atributos de HTML

Descripcin
Salto de lnea Nuevo prrafo (*) Lnea de separacin Sangrado Texto preformateado Tamao encabezado (*) n=n 1 6 Formato prrafo en cursiva Mltiples columnas (N3) Centrado Corta una palabra(N3)(e4) Espacios extras (N3) Que no se produzca un salto de lnea(N3)(e4) Cambio de alineacin (*)

Apertura <br> <p> <hr> <blockquote> <pre> <hn> <address> <multicol> <center> <wbr> <spacer> <nobr> <div> Atributos <body> Background="imagen.ext" Bgcolor="color" topmargin=n leftmargin=n text="color"

Cierre

</blockquote> </pre> </hn> </address> </multicol> </center> </spacer> </nobr> </div>

Imagen de fondo Color fondo Margen superior (e) Margen izquierdo (e) Color texto

ext=*.gif, *.jpeg

en ingls o en hexadecimal en pixels en pixels en ingls o en hexadecimal

http://personal1.iddeo.es/joseriki/htmlmarc.htm (3 de 13) [26/11/2000 20:56:55]

Glosario de etiquetas y atributos de HTML

Color enlace

link="color" vlink="color" alink="color" bgproperties=fixed Atributos <hr> width=n size=n color="color" align=posicin noshade Atributos <spacer> align=alineacin type=t height=pixels width=pixels size=pixels Atributos <br>

en ingls o en hexadecimal en ingls o en hexadecimal en ingls o en hexadecimal

Color enlace seguido

Color enlace activo Marca de Agua (e)

Longitud Grosor Color (e) Alineacin Sin sombra

en pixels o % Cualquiera en ingls o en hexadecimal center, right, left

Alineacin Tipo de espacio (**) Alto del espacio Ancho del espacio Tamao del espacio

misma que <img> t=horizontal, vertical, block para type=block para type=block para type=horiz. o verticical right, left, all

Busca el primer espacio

clear=posicin Atributos <multicol>

http://personal1.iddeo.es/joseriki/htmlmarc.htm (4 de 13) [26/11/2000 20:56:55]

Glosario de etiquetas y atributos de HTML

Espacio entre columnas Ancho de la columna Nmero de columnas (**)

gutter=n width=n cols=n columnas

en pixels (defecto 10) en pixels siempre misma anchura

Listas
tem de la lista Ordenadas Desordenadas Descriptiva Trmino Definicin Listas de directorio Lista de men

<li> <ol> <ul> <dl> <dt> <dd>

<dir> <menu>

Admite type y value </ol> </ul> </dl>

</dir> (igual <ul>) </menu> (igual <ul>) I, i, A, a Atributos <ol>

Tipo de lista N de inicio de la lista

type=tipo start=n Atributos <ul> type=forma Atributos <li>

Forma de la vieta (N)

disc, circle, square disc, square, circle, a, A, I, i nmero en listas ordenadas

tipo del item

type=valor value=n

valor del item

http://personal1.iddeo.es/joseriki/htmlmarc.htm (5 de 13) [26/11/2000 20:56:55]

Glosario de etiquetas y atributos de HTML

Descripcin
Anclaje

Apertura <a> Atributos <a> href="URL" href="#nombre1" href="URL#nombre1" name="nombre" target="nombre" </a>

Cierre

Referencia a otra pgina (**) Referencia en la pgina La mezcla de ambas Lugar de la referencia Objetivo en paneles

_blank, _self, _top, _parent

Descripcin
Comienzo y fin de tabla Filas Celda en negrita Celda Ttulo de la tabla

Apertura <table> <tr> <th> <td> <caption> Atributos <table> border=n cellpadding=n cellspacing=n width=n height=n </tr> </th> </td>

Cierre </table>

</caption> en pixels en pixels en pixels en pixels o % en pixels o %

Borde Espacio dentro celda Ancho de lnea celda Ancho de la tabla Alto de la tabla Imagen de fondo (e) (N4)

background="URL/imagen.gif "

http://personal1.iddeo.es/joseriki/htmlmarc.htm (6 de 13) [26/11/2000 20:56:55]

Glosario de etiquetas y atributos de HTML

Color del fondo Nmero de columnas (N) Espacio horizontal al texto circundante Espacio vertical al texto circundante Color del borde (e)

bgcolor="color" cols=n hspace=n vspace=n bordercolor="color" bordercolorlight="color" bordercolordark="color" Atribibutos <tr> <th> <td>

en ingls o en hexadecimal

en pixels en pixels en ingls o en hexadecimal en ingls o en hexadecimal en ingls o en hexadecimal en ingls o en hexadecimal top, middle, bottom, baseline right, center, left

Color del borde lumin. (e)

Color del borde oscuro (e)

Color fondo de la celda

bgcolor="color" valign=posicin vert. align=posicin horiz. Atributos <td> <th>

Alineacin vertical Alineacin horizontal

Imagen fondo de la celda (e)(N4) Mltiplo de columna Mltiplo de filas Ancho de la celda Alto de la celda No dividir la lnea

background="imagen" colspan=n columnas rowspan=n filas width=n height=n nowrap

gif o jpeg

en pixels o % en pixels o %

http://personal1.iddeo.es/joseriki/htmlmarc.htm (7 de 13) [26/11/2000 20:56:55]

Glosario de etiquetas y atributos de HTML

Atributos <caption>
Alineacin vertical

align=posicin vert.

top, bottom

Descripcin
Insertar imagen

Apertura <img> Atributos <img>

Cierre

Fuente (**) Fuente alternativa (e) y (N)? Alineacin vertical u horizontal Espacio vertical al texto Espacio horiz. al texto Ancho Alto Borde Nombre imagen Insertar vdeo (e) Para usar mapa (server-side) Para usar mapa (client-side)

src="URL/imagen.ext" lowsrc="URL/imagen" align=posicin vspace=n hspace=n width=n height=n border=n alt="texto"

extensin= gif o jpg (jpeg) mejor .gif top, middle, bottom, right, center, left, baseline en pixels en pixels en pixels en pixels en pixels

dynsrc="URL/video.ext" ext= .avi, .mpg, .flic ismap usemap="#nombreX" Atribibutos <img dynsrc> width=n height=n en pixels en pixels necesita imagen.map

Ancho imagen Alto imagen

http://personal1.iddeo.es/joseriki/htmlmarc.htm (8 de 13) [26/11/2000 20:56:55]

Glosario de etiquetas y atributos de HTML

Cmo se inicia Bucle Retardo del bucle Muestra los controles

start=x loop=n de veces loopdelay=n controls

x=fileopen, mouseover en milisegundos

Descripcin
Mapa Area del mapa

Apertura <map> <area> Atributos <map> name="nombreX" Atributos <area> </map>

Cierre

Nombre del mapa (**)

Forma del area (**)

shape=forma coords=x,y, x,y, x,y href="URL" nohref

circle, rect, poly, point, default segn la forma

Coords. de la forma (**) Referencia a la pgina (**) Zona no clicable

antes de las otras zonas

Descripcin
Divisin en zonas Caractersticas zona

Apertura <frameset> <frame>

Cierre </frameset>

http://personal1.iddeo.es/joseriki/htmlmarc.htm (9 de 13) [26/11/2000 20:56:55]

Glosario de etiquetas y atributos de HTML

Zona flotante (Inline frame)(e) Zona sin paneles

<iframe> <noframes> Atributos <frameset> rows=n o * cols=n o * frameborder=n framespacing=n bordercolor= "color" border=n Atributos <frame> src="URL" name="nombre" marginwidth=n marginheight=n scrolling="x" noresize

</iframe>dentro de <body> </noframes> en pixels, *, % en pixels, *, % n=0 es sin borde en pixels en pixels

N de filas (**) N de columnas (**) Borde entre paneles (N)(e4) Espacio desde el borde Color del borde (N)(e4) Grosor del borde (N)(e4)

Fuente (**) Nombre de la zona Espacio ancho al texto Espacio alto al texto Barra de desplazamiento No modificar tamao zona

en pixels en pixels x= yes, no, auto

Descripcin
Inicia formulario Zona de texto Definicin de los elementos

Apertura <form> <textarea> <input> </form> </textarea>

Cierre

http://personal1.iddeo.es/joseriki/htmlmarc.htm (10 de 13) [26/11/2000 20:56:55]

Glosario de etiquetas y atributos de HTML

Crear listas tems de la lista

<select> <option> method=tranferencia action="URL" /"e-mail" name="nombre" value="nombre" enctype="tipo"

</select> </option> tranferencia=get, post Atributos <form>

Mtodo de invocacin CGI Llamada al programa que gestiona el formulario (**) Nombre de la variable Contenido del campo Tipo de codificacin de los datos transferidos

tipo=multipart/form-data, text/plain segn caracteres segn filas virtual, physical, off

Atributos <textarea>
Columnas Filas Estilo del salto de lnea Nombre del rea (**)

cols=n rows=n wrap= "variable" name="nombre"

Atributos <input>
Tipo

type=valor maxlength=n checked name="nombre"

submit, checkbox, radio, password, reset, hidden, text, button, image (como submit) para text y password para radio y checkbox

Longitud celda Seleccionado por omisin Nombre (**)

http://personal1.iddeo.es/joseriki/htmlmarc.htm (11 de 13) [26/11/2000 20:56:55]

Glosario de etiquetas y atributos de HTML

Alineacin de una imagen Lo que ir en el botn

align=posicin value="valor" name="nombre" size=n multiple value="valor" selected

right, center, left segn tipo

Atributos <select>
Nombre (**) Nmero de lneas visible Seleccin mltiple

sin size= men pop-up con Ctrol. o Maysc. Atributos <option> Cualquiera

Valor si se desea Escoger la opcin

Descripcin
Aplett de Java Sonido plug-in (N)(e4) Para los que no tienen el plug-in (N)(e4) Sonido de fondo(e)

Apertura <applett> <embed> <noembed> <bgsound> Atributos <embed>

Cierre </applett>

</noembed>

Fuente (**) Ancho plug-in Alto plug-in Tipo de cdigo MIME Plug-in oculto

src="URL/sonido.ext" ext=.wav, .mid, .au, .aiff width=n heigth=n type=tipo de MIME hidden=valor valor= true / false 145 pixels; 2=no se ve 60 pixels; 0=no se ve

http://personal1.iddeo.es/joseriki/htmlmarc.htm (12 de 13) [26/11/2000 20:56:55]

Glosario de etiquetas y atributos de HTML

Empezar nada ms picar Ejecucin ininterrumpida

autostart=true loop=true Atributos <bgsound> src="URL/sonido" loop=n o infinite <marquee> <blink> Atributos <marquee>
directi

Fuente (**) Repeticin sonido Texto en movimiento (e) Parpadeante (N)

n de repeticiones </marquee> </blink>

Direccin del movimiento

http://personal1.iddeo.es/joseriki/htmlmarc.htm (13 de 13) [26/11/2000 20:56:55]

Hojas de Esilo en Cascada

(This page uses CSS style sheets) Hojas Estilo en DE CASCADA Estos son los atributos que se pueden utilizar en las Hojas de Estilo en Cascada segn el W3C

Atributo
font-size

Descripcin
Establece el tamao de texto Establece la fuente

Valores
puntos (pt), pulgadas (in), centmetros (cm), pixels (px)

Ejemplo
{font-size: 12pt}

font-family

nombre de la fuente: nombre {font-family: courier} de la familia de la fuente

font-weight

extra-light, light, demi-light, Establece el espesor de la {font-weight: bold} medium, demi-bold, bold, fuente extra-bold Convierte el texto a cursiva Establece la distancia entre lneas Establece el color del texto Subraya o remarca el texto Establece el margen izquierdo de la pgina Establece el margen derecho de la pgina Establece el margen superior de la pgina Normal, italic puntos (pt), pulgadas (in), centmetros (cm), pixels (px), porcentaje (%) nombre del color valores, RGB none, underline, italic, line-through Puntos (pt), pulgadas (in), centmetros (cm), pixels (px) puntos (pt), pulgadas (in), centmetros (cm), pixels (px) puntos (pt), pulgadas (in), centmetros (cm), pixels (px)* {font-style: italic}

font-style

line-height

{line-height: 24pt}

color text-decoration

{color: blue} {text-decoration: underline} {margin-left: 1in}

margin-left

margin-right

{margin-right: 1in}

margin-top

{margin-top: -20px}

http://personal1.iddeo.es/joseriki/csstabla.htm (1 de 2) [26/11/2000 21:03:28]

Hojas de Esilo en Cascada

text-align

Establece la justificacin del texto Establece la indentacin del texto Establece la imagen o el color del fondo

left, center, right puntos (pt), pulgadas (in), centmetros (cm), pixels (px) URL, nombre del color valor RGB

{text-align: right}

text-indent

{text-indent: 0.5in}

background

{background: #33CC00}

http://personal1.iddeo.es/joseriki/csstabla.htm (2 de 2) [26/11/2000 21:03:28]

Anexo sobre smbolos de HTML

Smbolos de HTML
Smbolo ASCII Descripcin Signo apertura exclamacin Signo apertura interrogacin Ampersan Punto medio (de L geminada) Comillas Nmero ordinal masculino Nmero ordinal femenino Acento circunflejo Acento cerrado (agudo) Acento abierto (grave) Acento cerrado sobre mayscula Smbolo HTML &iexcl; &iquest; &amp; &middot; &quot; &ordm; &ordf; &ocirc; &oacute; &ograve; &Oacute; Hola! Qu? Bonnie & Clyde collegi "torero" 1 2 Ctte accin histria ACCIN Ejemplo

& "

http://personal1.iddeo.es/joseriki/ascii.htm (1 de 3) [26/11/2000 21:09:52]

Anexo sobre smbolos de HTML

< >

Acento abierto sobre mayscula Diresis Diresis sobre mayscula Smbolo de menor que Smbolo de mayor que Doble mayor que Doble menor que C cedilla C cedilla en maysculas Barra vertical rota Smbolo de la (tilde) en maysculas Smbolo de la Beta Un medio Un cuarto

&Ograve; &ouml; &Ouml; &lt; &gt; &raquo; &laquo; &ccedil; &Ccedil; &brvbar; &ntilde; &Ntilde; &szlig; &frac12; &frac14;

HISTRIA pingino PINGINO x < 24 y > 36 Hola Hola caa CAA si no cuada CUADA unden kilo de kilo

http://personal1.iddeo.es/joseriki/ascii.htm (2 de 3) [26/11/2000 21:09:52]

Anexo sobre smbolos de HTML

Tres cuartos Smbolo de Copyright Smbolo de Registrado Smbolo de Trade Mark Espacio (no-breaking space)

&frac34; &copy; &reg; &trade; &nbsp;

de kilo Coca-Cola Nike Java Hola Pepe

Los smbolos que aqu no aparecen (p.e. "?") no necesitan de este sistema para que sean visualizados por el navegador, pues en cualquier idioma del Alfabeto Occidental aparecen. Si prefieres tener este fichero en formato Word97, puedes llevrtelo comprimido en simbolos.zip

http://personal1.iddeo.es/joseriki/ascii.htm (3 de 3) [26/11/2000 21:09:52]

La Estructura del HTML

Introduccin
l HTML (HyperText Mark-Up Language) es un lenguaje de codificacin creado a partir del lenguaje de estructuracin y formato SGML (Standard Generalized Mark-Up Language), y que es la base para la creacin de una pgina web. Y digo que es la base porque hoy da tambin se utilizan otros lenguajes y tecnologas para dejar la mar de chulo nuestro rinconcito en la Red: Java, JavaScript, VBScript, JScript, DHTML, CSS, VRML y Scripts desarrollados con muchos otros lenguajes como C, Perl, Tcl, Visual Basic, Pascal, etc. l estndar vigente de HTML es el 3.2, aunque el 4.0 ya est totalmente desarrollado y los navegadores de ltima generacin como Netscape 4.0 o IExplorer 4.0 ya lo implementan o al menos en parte, como es el caso de Netscape 4.0, que todava no soporta la mayora de las nuevas especificaciones. ste lenguaje y las nuevas especificaciones son llevadas a cabo por el W3C (Word Wide Web Consortium), compuesto por empresas como Netscape Corporation, Microsoft, Sun MicroSystems, IBM, Symantec, entre otras. l manual que vais a poder seguir en esta web mensualmente dar debida cuenta del estndar vigente, aunque me reservo para el final un captulo en el que explicar las nuevas etiquetas, atributos y especificaciones de la versin 4.0. Al paso que voy, ya estoy viendo que, para cuando haya acabado este manual, habr aparecido la versin 5.0 o el XML (eXtensible Mark-Up language) habr sustituido al HTML. Uy! Me he colao! No tena que haberos dicho nada del XML, sino ahora perderis el inters en aprender el HTML. Ejem, ejem, francamente, creo que el HTML no se extinguir, aunque s es cierto que aparecern lenguajes alternativos que doten de un cierto dinamismo a las pginas web. Y ahora ya, POR FIN, vamos a comenzar con el curso. En sus puestos, preparados, listos... GO.

El lenguaje de marcas o etiquetas

http://personal1.iddeo.es/joseriki/man_estr.htm (1 de 7) [26/11/2000 21:26:30]

La Estructura del HTML

omo ya decamos antes, el lenguaje HTML es un lenguaje de codificacin, no de programacin; es decir, mediante las etiquetas creamos la estructura, damos formato al texto e insertamos objetos. El problemilla es que su simplicidad da poco de s, vamos, que lo que aparecer en la pgina no cambiar por s slo, ni podremos darle mucho movimiento a los elementos de las pginas, a menos que nos apasione picar, una y otra vez, en la flechita negra que acompaa a las listas desplegables.
Pica aqu para que me desplegue

procesador, a menos que este programa para la edicin sea un Editor de HTML.Pero ste es un tema del que ya hablaremos unas lneas ms abajo. En este manual escribiremos la etiquetas y atributos en maysculas pero no es necesario. i vamos a crear una pgina web con un editor de textos, lo mejor es que ste sea sencillo, pues sencillo es sinnimo de "programa que ocupa poca memoria y no consume muchos recursos del sistema". De este modo, podris tener abierto uno o dos navegadores y vuestro editor de textos favorito sin necesidad de comprar 16 megabytes de RAM adicionales y, sobre todo, sin tener que escuchar el eterno ronroneo del disco duro, cuando va escaso de memoria. as etiquetas en HTML no son ms que un cdigo que est entre los smbolos "<" y ">", como por ejemplo, un dos tres, responda otra vez: <BODY>. Si la etiqueta se cierra, debe ponerse la misma etiqueta pero con una barra diagonal delante del cdigo de sta: </BODY>. Estas etiquetas pueden tener atributos, que son unas palabras clave que describen o modifican el comportamiento de la etiqueta. Por ejemplo, si inserto en el cdigo de la pgina la etiqueta <P> (creacin de un prrafo), comenzar un nuevo prrafo con una alineacin a la derecha; en cambio, si le aado el atributo ALIGN=RIGHT de esta forma <P ALIGN=RIGHT>, el

Y es que hay gente que tiene unos entretenimientos la mar de raros, o no? ero bueno, lo fantstico que tiene el HTML es que es superfcil aprenderlo y que podemos escribirlo en cualquier procesador de texto: Block de Notas del Pc, SimpleText de Mac, Emacs de Unix, etc.; cuanto ms cutre y sencillo sea el procesador mucho mejor. Lo nico que debemos hacer es guardar el documento con la extensin .htm o .html "Ah! Pues yo tengo el MS-Word y le quiero sacar provecho, as que paso del Block de Notas!"- me dice mi vecino. "Pues all t y tu conciencia" -le digo yo. Bueno, no es que sea pecado ni mucho menos utilizar un procesador potente para este menester, pero para qu? Tened en cuenta que el HTML es texto ASCII, sin formato, y que los saltos de lnea, tabulaciones, espacios, color, tamao y tipo de letra se tienen que hacer con etiquetas del HTML no con los elementos del mismo

http://personal1.iddeo.es/joseriki/man_estr.htm (2 de 7) [26/11/2000 21:26:30]

La Estructura del HTML

prrafo estar alineado a la derecha. la hora de definir las etiquetas deberamos hacer un par de clasificaciones: segn el cierre y segn los atributos. Segn el cierre quiere decir que hay etiquetas que aplican un formato o una caracterstica al texto y, para concretar de qu texto se trata, se colocan delante y detrs de l: <B>Esta frase est en negrita</B> y sta, en cambio, no. El resultado sera: Esta frase est en negrita y sta, en cambio, no. Ha quedado claro qu es esto del cierre? Lo digo porque es la base del HTML y el hecho de dejarnos una etiqueta de cierre, puede dar a lugar un resultado muy diferente al que esperbamos. Pero no os asustis, nunca se colgar el navegador ni el sistema operativo por culpa de un fallo en el cdigo, as que cuando se os cuelgue Windows 95 no le echis la culpa al HTML, sino a Mocosoft. Pues como os iba diciendo, una primera clasificacin de las etiquetas la podramos hacer en funcin de si necesitan o no etiquetas de cierre. De este modo tenemos tres tipos de etiquetas G Cierre obligatorio: las etiquetas que siempre deben de cerrarse, como las de formato de fuente: negrita, cursiva, superndice; las de los hipervnculos, algunas de formato de prrafo: sangra, encabezado, etc. G Cierre implcito: las etiquetas que pueden cerrarse, pero que, si no se cierran, no pasa nada, como las de alineacin de prrafo, listas de definicin, listas ordenadas, etc. G nicas: las etiquetas que nunca se cierran, como la de salto de lnea, lnea horizontal, insercin de imgenes, sonido, informacin, etc. a otra clasificacin sera en funcin de los atributos que pueden llevar, que puede ser uno, varios o ninguno. En el caso de que se utilicen varios, el orden es absolutamente indiferente, tanto da <FONT FACE="Arial" SIZE=5> como <FONT SIZE=5 FACE="Arial">. Y a la hora de cerrar una etiqueta con atributos slo se cierra la etiqueta, sin los atributos, es decir, de esta manera: <FONT SIZE=5> Hola a todos</FONT> y no <FONT SIZE=5>Hola a todos</FONT SIZE=5>. G Sin atributos: son las etiquetas que no llevan atributos de ningn tipo, como la negrita, o la sangra:
<B>
G

Pueden llevar atributos, pero no son obligatorios: aquellas etiquetas como <P>, que tambin puede aparecer como <P ALIGN=CENTER>, si queremos que la alineacin sea al centro. De atributo o atributos obligatorios: son las etiquetas que necesitan como mnimo un atributo para que tengan alguna utilidad, como <IMG SRC="Imagen.gif">, donde SRC es el atributo que sirve para definir la imagen que se va a insertar (Ya me diris qu gracia tendra poner la etiqueta para insertar imgenes <IMG> sin decirle qu imagen tengo que insertar!).

La estructura del HTML

ueno, despus de un poco de historia y de conocer qu es y para qu sirve este lenguaje, lleg la hora de empezar a hacer nuestros primeros pinitos con l. Saca papel, lpiz, la cmara de vdeo, los klinex y un zumo de pia para coger fuerzas y dile a los nios que estn a tu alrededor que dejen de hacer ruido, que necesitas concentracin. Arllurredi? Pues ya puedes abrir el bloc de notas y empezar a hachetemelear un rato. Lo primero que hay que tener en cuenta a la hora de crear una pgina Web es que deberemos establecer una
http://personal1.iddeo.es/joseriki/man_estr.htm (3 de 7) [26/11/2000 21:26:30]

La Estructura del HTML

estructura de documento como la que aparece a continuacin: <HTML> <HEAD> <TITLE>Mi primera pgina web</TITLE> </HEAD> <BODY> El contenido de mi pgina </BODY> </HTML>

ara que el navegador sepa que se trata de un documento HTML se pone la etiqueta <HTML> que englobar todas las etiquetas del documento. Seguro que ms de uno debis de estar pensando: "este to est ms atrasado que los relojes de arena. Yo no pongo estas etiquetas y mi pgina se ve la mar de bien". Cierto, se ve, pero se ve porque estis utilizando un navegador de ltima generacin. El estndar vigente de HTML es el 3.2 y en ste se ha especificado que deben usarse estas etiquetas para crear la estructura del documento: encabezado (<HEAD>) y cuerpo (<BODY>).

n la versin 4.0 del HTML (que ya llevan aos diciendo que ser el estndar vigente, pero que si quieres arroz Catalina), la nica etiqueta indispensable de estructura ser la <TITLE>, pero de momento... pensad que no todo el mundo utiliza navegadores que soporten el HTML 4.0 como el Internet Explorer 4.0 o el Netscape Communicator 4.0, as que si queris que TODO el mundo pueda ver vuestra pgina, haced un esfuerzo (s,s, ya s que es mucho pedir, pero es el precio que hay que pagar si queremos que visiten nuestra web 5.000 personas cada da, como mnimo!).

Etiquetas Meta
entro de la cabecera de una pgina web (entre <HEAD> y </HEAD>) es donde se colocan las denominadas etiquetas de metainformacin: <META>. Estas etiquetas sirven para, entre otras cosas, indicar a los motores de bsqueda que hay en Internet la informacin que queremos que se almacenen en stos; por ejemplo, ttulo de la pgina, temtica de sta o las palabras por las cuales deseamos que localicen nuestra pgina en Internet. Esto se consigue mediante una serie de atributos que pasamos a describir a continuacin: CONTENT Este atributo va siempre emparejado con el atributo NAME o con el HTTP-EQUIV y contendr un texto que se corresponder con el valor del atributo al que acompaa. En el atributo NAME se detallan los posibles valores que puede contener. NAME El atributo NAME sirve para indicar el tipo de elemento meta que se va a utilizar. Existen muchos tipos, pero slo se utilizan los siguientes:
http://personal1.iddeo.es/joseriki/man_estr.htm (4 de 7) [26/11/2000 21:26:30]

La Estructura del HTML

Author: cuando utilizamos este valor, en el atributo CONTENT indicaremos quien es el autor de la pgina. Normalmente slo se coloca en la primera pgina de nuestra web. Ejemplo: <META NAME = "author" CONTENT = "Jos Luis Iglesias Jckle"> Generator: este valor lo suelen colocar los programas de edicin de HTML, indicando en el atributo CONTENT el nombre y versin del programa. Ejemplo: <META NAME = "generator" CONTENT = "Macromedia Dreamweaver 2.01"> Keywords: este es posiblemente el valor ms til y empleado de todos, pues le acompaa el atribut CONTENT con todas las palabras claves por las que queremos que los buscadores encuentren e indexen nuestra pgina. Las palabras que pongamos en el atributo CONTENT deben ir separadas por comas y, a ser posible, sin espacios. Ejemplo: <META NAME = "keywords" CONTENT = "coches,mecnica,automvil,cars,carreras automovilsticas"> Description: este avalor del atributo NAME va acompaado de un CONTENT con la descripcin de nuestra pgina, la cual tambin se almacenar en los buscadores. Aqu s que podemos dejar espacios, pero no se debe de sobrepasar los 250 caracteres en la descripcin, espacios incluidos. Ejemplo: <META NAME = "description" CONTENT = "Catlogo de los mejores coches de la historia, mecnica e historia del automovilismo"> Distribution: la distribucin es el alcance de tu web. Normalmente se utiliza el valor Global en el atributo CONTENT para indicar que tu web quede indexada en cualquier buscador a nivel mundial. Pero siempre hay gente que slo quiere que la visite personas de una zona determinada: Hispanoamrica, Francia, Japn, San Marino, Portugalete, etc. Pues bien, en tal caso slo debemos introducir el rea deseada en el atributo CONTENT de esa etiqueta Ejemplo: <META NAME = "distribution" CONTENT = "global"> Resource.Type: este valor hace referencia al tipo de recurso que se est utilizando, normalmente una pgina web, es decir, un Document. Pero hay otros tipos de recursos: bases de datos, apndices, etc. Ejemplo: <META NAME = "resource-type" CONTENT = "document">

http://personal1.iddeo.es/joseriki/man_estr.htm (5 de 7) [26/11/2000 21:26:30]

La Estructura del HTML

Robots: los buscadores que utilizamos para encontrar todo tipo de informacin en Internet utilizan unos diminutos programas (aunque de complejo desarrollo, pues muchos utilizan rutinas de inteligencia artificial) que navegan todo el tiempo por Internet y recogen la informacin que se encuentra en las etiquetas META y TITLE o a veces en las primeras lneas de texto de la primera pgina. Estos programillas se les conoce como robots o araas y los hay de diferentes tipos. Si queremos que nuestra web sea revisada por uno de estos robots slo tenemos utilizar como valor del atributo CONTENT el nombre de ste, aunque si ponemos ALL, dejaremos paso a todos ellos. Si no queremos que entren estos robots (vete a saber que esondes en la pgina para que no quieras que te la encuentren) basta con poner NoRobots. Ejemplo: <META NAME = "robots" CONTENT = "all""> HTTP-EQUIV Este atributo es muy especial y no se suele utilizar muy a menudo, aunque muchos editores de HTML lo ponen automticamente con el valor Content-Type. Pero este valor no es el nico que se utiliza, ni mucho menos, pues hay otros 3: Content-Type: mediante el atributo CONTENT indicaremos el tipo de documento que hemos elaborado y el juego de caracteres que hemos utilizado. A menos que hagsi pginas en rabe, japones, ruso o swagili, el juego de caracteres que utilizaris es el denominado Latin1, cuyo cdigo de ISO es el 8859-1 (no me preguntis por qu tiene este cdigo, porque no tengo ni la ms remota idea). Ejemplo: <META HTTP-EQUIV="Content-Type" CONTENT = "text/html;charset=iso-8859-1"> mediante este valor podemos indicar en el atributo CONTENT que cargue una pgina determinada despus de que pase un tiempo especificado por nosotros. Si queris ver ms ejemplos, slo tenis que ir al capitulo sobre Efectos Especiales. Ejemplo: <META HTTP-EQUIV="Refresh" CONTENT="10;URL=http://www.lpis.com"> mediante este valor y el atributo CONTENT podemos informar a los buscadores acerca de cundo va a caducar nuestra web para que nos eliminen de su base de datos. Lo cierto es que esto est pensado ms para empresas que para usuarios finales, porque ya me diris si sabis cuando vais a cambiar de servidor! Ejemplo: <META HTTP-EQUIV="Expire" CONTENT = "10-10-2036">

Refresh:

Expire:

http://personal1.iddeo.es/joseriki/man_estr.htm (6 de 7) [26/11/2000 21:26:30]

La Estructura del HTML

Set-Cookie:

este slo se utiliza cuando se trabaja con cookies. Las cookies o galletitas son pequeos programitas o rutinas desarrolladas en lenguaje script interpretado (Javascript o VBScript) y que sirven para enviar al visitante de nuestra pgina un pequeo fichero en el cual se almacenar informacin acerca de cundo se conect a la pgina, cunto tiempo estuvo conectado, cuntas veces ha accedido, etc. Si se tienen buenos conocimientos de programacin (o deseamos guardar uns simple informacin del usuario), no es complicado hacer un cookie de estos pero si slo lo hacemos para presumir, ms vale que os abstengis. Ejemplo: <META HTTP-EQUIV="Set-Cookie" CONTENT = "nombre_usuario"=pepito;path=info/;domain=personal1.iddeo.es>

ero lo ms curioso del tema es que existen multitud de pginas en Internet que te ayudan a rellenar estas etiquetas de la manera ms correcta. Algunas de estas pginas son de pago y adems se encargan de darte de alta en cientos de buscadores a nivel mundial. Otras, en cambio, son gratuitas y nos hacen un favor al crearnos estas cabeceras tan engorrosas a veces. La que ms me ha gustado desde siempre es la de Landaluze Productions, la pgina Dejar Huella.

Hasta aqu el primer captulo de este tremendo manual. Ahora convendra que pasaseis al segundo captulo, en el que veremos cmo aplicar diferentes formatos a nuestras pginas: formato de texto, formato de prrafo y formato de pgina. En el prximo captulo podris estrenar el test de las 10 preguntas, que en esta ocasin se referirn a los contenidos de los dos primeros captulos. Este manual ha sido ntegramente elaborado con el sudor y el coco de Jos Luis Iglesias Jckle. En el caso de que queris copiarlo, pedid permiso a vuestra mam y no quitis el nombre del autor, ok? La ltima vez que se me ha ocurrido modificar este manualillo fue ayer mismo, 5/08/99

Yo me vuelvo a la seccin

http://personal1.iddeo.es/joseriki/man_estr.htm (7 de 7) [26/11/2000 21:26:30]

Los diferentes formatos del HTML

El formato de Texto
ues bueno, una vez creada la estructura, el siguiente paso es poner algo de chicha, contenido: chistes, fotos de nuestra primera comunin, el ltimo chismorreo del barrio, etc. Y una vez puesto el texto, habr que darle formato. Existen tres tipos de formato: el formato de fuente, el formato de prrafo y el formato de documento. El formato de fuente es aquel que se puede aplicar desde a un carcter hasta todo el documento, es decir, el color, el tamao, el tipo de fuente, el estilo de negrita, cursiva, subrayado, letra teletipo o incluso de superndice o subndice. El formato de prrafo es aquel que se aplica como mnimo a un prrafo, como la alineacin, la sangra, el salto de lnea y algunos formatos especiales como el de encabezado, direccin y preformateado. Por ltimo, el formato de documento es aquel que se aplica a todo el documento, como la fuente por defecto, el color del texto por defecto o el color del fondo de la pgina, entre otros.

El Formato de Texto lo componen las siguientes etiquetas y atributos:

<B>...</B> (Bold -negrita-). Ejemplo: Manolito <I>...</I> (Italic -cursiva-). Ejemplo: Crispin <U>...</U> (Underline -subrayado-). Ejemplo: Increble <S>...</S> (StrikeTrought -tachado-). Ejemplo: abolicin <TT>...</TT> (TeleType -teletipo o mquina de escribir-). Ejemplo: mquina de escribir <SUP>...</SUP> (Superindex -superndice-). Ejemplo: X2 <SUB>...</SUB> (Subindex -subndice-). Ejemplo: H2O <FONT>...</FONT> (Font -fuente-). Necesita cualquiera de los tres atributos que tiene para poder funcionar
G

SIZE = nmero del 1 al 7. Tamao de la letra entre 8 y 20 puntos. Ejemplo. Hola a todos y a

todas
G

FACE = nombre de la fuente. Tipo de fuente, como Arial, Desdemona, Courier, Impact, etc. Ejemplo: Arial e Impact COLOR = nombre de un color o su equivalente en cdigo hexadecimal. Si queremos utilizar un nombre de un color, tenemos 140 para escoger y si preferimos poner el cdigo hexadecimal (#FF00F8) podremos escoger entre una gama de 16 millones, aunque la paleta de los navegadores

http://personal1.iddeo.es/joseriki/man_fort.htm (1 de 5) [26/11/2000 21:31:42]

Los diferentes formatos del HTML

slo soporta 216. Ejemplo: colorn colorado, este cuento se ha acabado. La manera de poner e interpretar el color segn el cdigo hexadecimal es sencilla: El cdigo hexadecimal es parecido al decimal (0123456789), pero en vez tener 10 elementos que van del 0 al 9, tiene 16 elementos que van del 0 a la letra F (0123456789ABCDEF). Si hacemos agrupamos estos nmeros en grupos de dos para componer una cifra, tenemos pares del tipo 34, A5, DC, 9E, 0F, etc. Teniendo en cuenta que para definir un color se utiliza la tricotoma RGB (Rojo, Verde, Azul), la manera de expresar el valor de un color ser con una cifra de este tipo para cada color: #RRGGBB, donde RR es la cifra en cdigo hexadecimal par determinar la cantidad de rojo, GG para la cantidad de verde y BB para la cantidad de azul. De este modo, un color como #FF0000, sera el mximo de rojo, nada de verde ni de azul, luego sera rojo puro. Otros colores caractersticos podra ser #000000 para el negro, #FFFFFF para el blanco, #00FF00 para el verde, y segn vamos poniendo una cifra inferior, se va oscureciendo el color.

El formato de Prrafo
ues una vez visto cmo se ponen formato al texto, vamos a ver cmo podemos utilizar formatos de prrafo. Los formatos de prrafo se pueden dividir en dos grupos: estructura y diseo. Dentro del primer grupo encontramos las etiquetas siguientes: <P>...</P> (Paragraph -prrafo-). Crea un nuevo prrafo, dejando un espacio considerable con el anterior. Tiene un atributo opcional, ALIGN, que tiene los siguientes tres valores: RIGHT, LEFT y CENTER. (aunque Netscape y la versin 4 de IExplorer aceptan tambin el valor JUSTIFY). Ejemplo: Este texto est alineado a la izquierda Este texto est alineado al centro Este texto est alineado a la derecha <DIV>...</DIV> (Division -divisin-). Sirve para alinear elementos sin necesidad de crear un nuevo prrafo. Tiene un atributo obligatorio, ALIGN, que tiene los siguientes tres valores: RIGHT, LEFT y CENTER. Ejemplo: Este texto est alineado a la izquierda Este texto est alineado al centro Este texto est alineado a la derecha <CENTER>...</CENTER> (Center -centrar-). Sirve para centrar elementos en las pginas, sin tener que usar el <DIV ALIGN=CENTER> o el <P ALIGN=CENTER>. Ejemplo:

http://personal1.iddeo.es/joseriki/man_fort.htm (2 de 5) [26/11/2000 21:31:42]

Los diferentes formatos del HTML

Este texto y esta lnea estn centrados <BLOCKQUOTE>...</BLOCKQUOTE> (Blockquote -sangrado de prrafo-).Hace que el prrafo se sangre por ambos lados, izquierda y derecha. Ejemplo: Este prrafo no est sangrado y por lo tanto va de un extremo al otro de la pgina sin ninguna dificultad. Es como si fuera una sangra de valor cero o algo as. Este prrafo, en cambio est sangrado, es decir, est metido unos cinco caracteres hacia adentro. Este mtodo se utiliza mucho para hacer citas poticas o indicar que un texto est incluido dentro de otro. Si se desea hacer la sangra ms grande, slo es necesario aadir un <BLOCKQUOTE> detrs de otro; pero cuidado con pasarnos, porque ms de 5 seguidos no queda muy bien que digamos. <BR> (Break Row -salto de lnea-). Esta etiqueta ser la que utilizaremos para saltar de lnea sin necesidad de crear un prrafo nuevo. Tiene un atributo opcional, CLEAR, que puede tener como valores LEFT, RIGHT y ALL. El atributo CLEAR sirve para que busque el primer espacio libre a la izquierda, derecha o a cualquiera de los dos lados. Ejemplo: Este es un prrafo pequeito pequeito. Para hacer esta nueva lnea he insertado un <BR>, pero si quisiera que esta nueva lnea apareciese debajo de la imagen, entonces debera aadir a la etiqueta <BR> el atributo CLEAR=LEFT o CLEAR=ALL de la siguiente manera <BR
CLEAR=LEFT>

<NOBR>...</NOBR>(No Break Row -no hacer salto de lnea-). Esta etiqueta sirve para evitar que el navegador haga un salto de lnea en un lugar donde nosotros no nos gustara, como puede ser entre las palabras Banco de Santander. El nico problema que tiene es que no sirve para IExplorer 3.0. Ejemplo: Sin un <NOBR> me podra quedar hecho un churro un prrafo que contuviese el nombre de una empresa como rea Metropolitana de Barcelona. Con un <NOBR> antes y despus del nombre de esta empresa forzaramos a que apareciese en la misma lnea a cambio de que el usuario tuviese que desplazarse con la barra de desplazamiento para verla toda, lo cual puede resultar incmodo en determinados casos. Para ver un ejemplo ms claro, podis ver la zona de ejemplos picando el botn de Formato de Prrafo del final de la pgina. <WBR> (Word Break Row -corte de palabra-). Como sabis, el navegador siempre pone las palabras enteras al principio de una lnea, lo cual hace que el texto tenga la apariencia de una sierra. Si tenemos una palabra muy larga podemos utilizar esta etiqueta para que el navegador corte la palabra si fuese necesario. La etiqueta debe ponerse all donde queramos que el navegador corte la palabra. Al igual que la anterior, esta etiqueta tampoco sirve para la versin 3 de IExplorer. Ejemplo: Yo tena una empresa de construccin que un buen da se fusion con otra empresa del sector de la termodinamohipermetalurgia. Como esta palabra es muy larga, el prrafo me queda echo un asco, as que probaremos con un <WBR> a ver qu pasa.

http://personal1.iddeo.es/joseriki/man_fort.htm (3 de 5) [26/11/2000 21:31:42]

Los diferentes formatos del HTML

Yo tena una empresa de construccin que un buen da se fusion con otra empresa del sector de la termodinamohipermetalurgia. No es fabuloso? La ha cortado! <SPACER>...</SPACER> y <MULTICOL>...</MULTICOL>. Estas dos etiquetas las pongo juntas porque son slo para el navegador Netscape 3.x o superior. <SPACER> sirve para dejar espacios entre palabras o entre lneas (interlineado); <MULTICOL>, en cambio, sirve para hacer columnas periodsticas, como las que veis al principio del manual, aunque las mas las he tenido que hace con tablas, habida cuenta de la falta de tolerancia por parte de Internet Explorer. Los atributos que se aplican a estas etiquetas los podis encontrar en el glosario de trminos que se encuentra en el apartado de Ayuda HTML. ues hasta aqu las etiquetas que tienen que ver con la estructura en el formato de prrafo y ahora vienen las de diseo, que no son otras que las etiquetas que ponen formato de fuente a todo el prrafo y que tienen unas cualidades de lo ms interesante. Algunas, ms que poner un formato especial, recogen varios formatos y los ponen al mismo tiempo. Estas etiquetas son las siguientes: <H1>...</H1>(Heading 1 -primer encabezado-). Esta etiqueta sirve para poner un tamao grande (ms o menos 20 puntos) y estilo negrita a todo el texto del prrafo, como si de un ttulo se tratase. Si deseamos que este tamao sea un poco menor, tenemos hasta un total de 6 tamaos diferentes para escoger; lo nico que debemos hacer es cambiar el 1 por un nmero entre el 2 y el 6 (y no valen decimales, que conste que os lo he advertido). De esta manera, tenemos tamaos como el <H2>, el <H3> o el <H6>. Cuanto ms alto es el nmero, ms pequea es la letra. Ejemplo:

Este prrafo esta hecho con el estilo <H1>

Este otro, en cambio, tiene un <H3> para que quede un poco ms discretito.
<ADDRESS>...</ADDRESS> (Address -direccin-). Esta etiqueta hace que el texto de todo el prrafo aparezca con un tamao de letra 3 (el normal, vamos) y con estilo cursiva. Sirve para poner esas frases que nos hacen populares en Internet, como el Copyright, la fecha de la ltima modificacin de la pgina, los agradecimientos a nuestros seres queridos, la novia/o, el gato, la abuelita Pilarn o el aparato de televisin. Ejemplo: Este prrafo sale en cursiva porque se me ha ocurrido la brillante idea de ponerle el formato de prrafo <ADDRESS>. Y seguro que ahora os estaris preguntando "Por qu no le pones un <I> al principio y otro al final? S, ya lo s. Hay algunas etiquetas que no son de mucha utilidad que digamos. <PRE>...</PRE> (Preformatted -preformateado-). Este estilo es bastante especial. Recordis que al principio del manual os comentaba que los espacios, los saltos de lnea o el formato, entre otros elementos, se deban poner con el cdigo del HTML y no con el procesador y que por ello era mejor utilizar un procesador de textos sencillo? Fiiiiiu, que pregunta ms larga! Pues bueno, por si no os
http://personal1.iddeo.es/joseriki/man_fort.htm (4 de 5) [26/11/2000 21:31:42]

Los diferentes formatos del HTML

enterasteis muy bien os lo explico ahora. Aunque pulsemos la tecla ENTER o la barra espaciadora repetidas veces, no vamos a conseguir que esto lo interprete el navegador; no, a menos que englobemos este texto entre la etiqueta <PRE> y </PRE>. El texto que tengamos entre estas etiquetas aparecer con letra teletipo (aquella de la mquina de escribir, o sea, tipo Courier), pero exactamente como lo introduzcamos en el procesador de texto aparecer en el navegador. Esto que puede parecer un panacea, no lo es tanto ni mucho menos. Como todo lo que pongamos en el procesador dentro de estas etiquetas aparecer tal cual, quiere decir que, si el texto supera la anchura del navegador, no se cortar automticamente, sino que deberemos utilizar una barra de desplazamiento para poder verlo al completo. No obstante, es ideal para dibujo en modo ASCII, como el que aqu aparece. Ejemplo: ______ _ _ / _____) | | | | / | | _ ____ ____| | _ _ _ | | | || \ / _ ) ___) || \| | | | | \_____| | | ( (/ ( (___| | | | |_| | \______)_| |_|\____)____)_| |_|\____|

El formato de Pgina
omo decamos con anterioridad, el formato de pgina es aquel que se aplica a todo el documento. En este caso no lo conforman etiquetas, sino atributos de una etiqueta: <BODY>. Mediante estos atributos podremos poner color al fondo o una imagen y cambiar los colores por defecto del navegador: color del texto y de los diferentes hipervnculos. A continuacin vamos a ver cuales son esos atributos. TEXT (texto). El atributo TEXT debe ser igual a un color, ya sea en cdigo hexadecimal o con uno de los nombres de colores. El color que escojamos tiene

http://personal1.iddeo.es/joseriki/man_fort.htm (5 de 5) [26/11/2000 21:31:42]

Listas y smbolos

Las Listas
l igual que un procesador de textos convencional, el HTML permite agrupar frases en forma de lista para que quede ms presentable, bonito y dems. Una lista no es ms que una enumeracin de elementos, aunque las hay de diferentes tipos: las listas numeradas, las listas de vietas y las listas de definicin. Las primeras son las que utilizan nmeros para hacer referencia al elemento de la lista, indicando que el orden de stos es importante; por eso tambin se las conoce como listas ordenadas. Las segundas, las de vietas (bullets, topos, puntitos o lo que sea), son las que utilizan smbolos para hacer referencia al elemento y, por lo tanto, el orden no suele ser importante; en HTML se las conoce como Unordered Lists (listas desordenadas). Por ltimo, tenemos las listas de definicin, que son las que se utilizan en los diccionarios para describir un trmino. Pero lo mejor es que veamos como funcionan y seguro seguro que nos queda ms claro qu son.

Listas numeradas
ara crear una lista numerada se utiliza la etiqueta <OL> (Ordered List -Lista Ordenada-) y cuando queramos acabar con sta deberemos cerrarla mediante la etiqueta </OL>. Una vez creada la estructura, para cada uno de los elementos de la lista colocaremos la etiqueta <LI> (List Item -tem de la lista-); <LI> es una etiqueta de cierre implcito, que, como seguro que recordamos (verdad?), significaba que no era necesario cerrarla mediante </LI>, pero que si lo hacamos no pasaba nada.
<OL> <LI> Primer Elemento <LI> Segundo Elemento <LI> Tercer Elemento </OL>

A la izquierda observamos el cdigo que dara lugar a la lista de la derecha. Si es que est chupao!

1. Primer Elemento 2. Segundo Elemento 3. Tercer Elemento

os nmeros de la lista siempre son del mismo tamao y el hecho de aumentar la letra no hace que stos tambin aumenten (OOOoooohhh!, Qu lstima!). Y no slo eso, sino que el color de estos nmeros depende del color por defecto del texto de la pgina Web, as que no los podemos colorear mucho que digamos. Adems, la etiqueta <OL> hace que la lista aparezca sangrada, lo cual, en determinados casos provoca un efecto que no es de nuestro agrado (pero slo para los muy exigentes, ya se sabe). Este es uno de los muchos motivos por los cuales mucha gente prefiere escribir los nmeros sin usar estas etiquetas y luego ponerles directamente el formato para que queden ms o menos as:

1. Primer Elemento 2. Segundo Elemento 3. Tercer Elemento

1.- Primer Elemento 2/ Segundo Elemento 3) Tercer Elemento

1. Primer Elemento 1.1. Segundo Elemento 1.1.1 Tercer Elemento

ero no todo son carencias y problemas de diseo. La etiqueta <OL> permite cinco tipos de listas diferentes que podremos elegir a partir de la modificacin de un atributo opcional llamado TYPE (tipo). Este atributo nos permite elegir entre 5 tipos diferentes de listas: las de nmeros, las de letras en maysculas, la de letras en minsculas, la de nmeros romanos en minsculas y la versin de stos en maysculas; para ello slo debemos poner como valor de TYPE las palabras : A, a, I o i. Por ejemplo, <OL TYPE=A> dara como resultado una lista alfabtica. Estos son algunos modelos: Sin TYPE 1. Primer Elemento 2. Segundo Elemento 3. Tercer Elemento Mediante TYPE=A . Primer Elemento B. Segundo Elemento C. Tercer Elemento Mediante TYPE=a Mediante TYPE=I Mediante TYPE=i . Primer Elemento b. Segundo Elemento c. Tercer Elemento I. Primer Elemento II. Segundo Elemento III. Tercer Elemento i. Primer Elemento ii. Segundo Elemento iii. Tercer Elemento

http://personal1.iddeo.es/joseriki/man_list.htm (1 de 3) [26/11/2000 21:36:02]

Listas y smbolos

dems de este atributo, <OL> tambin tiene el atributo START (comienzo) igual a un nmero, el nmero por el que quiero que empiece la lista; de esta manera, si creo, por poner un ejemplo, una lista con 6 elementos, luego escribo uno o ms prrafos o inserto una imagen, tabla, formulario, etc. y despus quiero continuar por el elemento 7 de la lista, slo tendr que aadir el atributo START = 7 y listos (aunque sea una lista alfabtica tambin se pone un nmero en START, nunca una letra). Estos son algunos ejemplos: <OL START=8> 8. Primer Elemento 9. Segundo Elemento 10. Tercer Elemento <OL TYPE=A <OL TYPE=I <OL TYPE=a START=15> START=74> START=96> O. Primer Elemento XLVI. Primer Elemento rrrr. Primer Elemento P. Segundo Elemento XLVII. Segundo Elemento ssss. Segundo Elemento Q. Tercer Elemento XLVIII. Tercer Elemento tttt. Tercer Elemento

omo se observa en estos ejemplos, en el caso de las listas de letras, cuando pasamos de la Z empezamos con pares de letras, en plan AA, AB, AC, hasta la ZZ y despus continuaramos con nmeros. Pero como no creo que lleguis a una lista de ms de 200 elementos no hay motivo por el que preocuparse (UUUUFF!). ara acabar con este tipo de listas, slo hace falta hacer mencin a los atributos que pueden aparecer en la etiqueta <LI>: VALUE y TYPE. El atributo TYPE hace lo mismo que en la etiqueta <OL>, pero si lo pongo en un elemento de la lista, cambiar el tipo a partir de ese elemento. En atributo VALUE sirve para poner un valor diferente en un elemento de la lista. Por ejemplo, en una lista numerada alfabtica de la A a la M, pongo en el elemento 5 (la E) el VALUE=15 y la lista pasar de la D a la O y seguir con la P hasta la W. Algo como esto:
<OL TYPE=A> <LI> Primer Elemento <LI TYPE=I> Segundo Elemento <LI> Tercer Elemento </OL>

. Primer Elemento B. Segundo Elemento C. Tercer Elemento

<OL TYPE=A> <LI> Primer Elemento <LI VALUE=6>Segundo Elemento <LI>Tercer Elemento </OL>

. Primer Elemento B. Segundo Elemento C. Tercer Elemento

Listas de vietas
as listas de vietas son las ms utilizadas de las tres, aunque no se suelen hacer con las etiquetas propias del HTML, sino con imgenes. Para crear una lista de vietas con HTML se utiliza la etiqueta <UL> (Unordered List -Lista desordenada-) conjuntamente con la de cierre </UL> y las de los elementos <LI>. Al igual que en las listas numeradas, existe un atributo para <UL>, el TYPE, que puede ser igual a CIRCLE, SQUARE o DISC, segn queramos una circunferencia, un cuadrado del color de la letra por defecto o un crculo tambin con color. ste es un ejemplo: <UL TYPE=CIRCLE> H Primer Elemento H Segundo Elemento H Tercer Elemento <UL TYPE=SQUARE> I Primer Elemento I Segundo Elemento I Tercer Elemento
G G G

<UL TYPE=DISC> Primer Elemento Segundo Elemento Tercer Elemento

l valor DISC es el valor por defecto, as que si soy muy vago y no le pongo el atributo TYPE, aparecer el puntito negro por defecto. Algunas versiones de Explorer no aceptan este atributo y slo aparece el disquito escuchimizao este. Adems este atributo tambin se puede poner en la etiqueta <LI>, como ya suceda en las listas numeradas. S, ya s que no parecen gran cosa, por eso se utilizan ms bien poco. La mayora de la gente utiliza listas de vietas con imgenes como las que se ven en este ejemplo: Primer Elemento Segundo Elemento Tercer Elemento Primer Elemento Segundo Elemento Tercer Elemento Primer Elemento Segundo Elemento Tercer Elemento Primer Elemento Segundo Elemento Tercer Elemento

a me diris si no quedan mucho mejor. El mayor problema y que ocupan ms espacio (aunque no mucho ms) y que son un poco ms complicadas de poner, porque para que un elemento de la lista aparezca debajo de otro deberemos utilizar la etiqueta <BR> y nunca la <LI> o sino tendremos las vietas del HTML y las de las imgenes. En fin, en vuestras manos est tomar la decisin ms acertada para cada momento
http://personal1.iddeo.es/joseriki/man_list.htm (2 de 3) [26/11/2000 21:36:02]

Listas y smbolos

Listas de definicin
Lista de definicin Dcese de la lista que tiene dos elementos (trmino a definir y definicin de ste). Se utiliza para definir trminos en plan diccionario o para lucir nuestros conocimientos de HTML con la vecina del tercero. Como ya os habris dado cuenta, esto es una lista de definicin, aunque la negrita del trmino definido se la he puesto yo por mi cuenta. ara crear una lista de definicin se utilizan tres etiquetas: <DL> (Definition List -Lista de definicin-), que sirve para crear la estructura y que debe cerrarse obligatoriamente mediante </DL>. Despus, cada elemento de esta lista se compondr de dos partes: <DT> (Definition Term -Trmino de la definicin-) y <DD> (Definition description -Descripcin de la definicin-). Estas dos etiquetas son de cierre implcito, as que no ser necesario cerrarlas. La etiqueta <DT> no muestra ningn formato en especial, pero, gracias a ella, la segunda etiqueta, <DD> aparecer sangrada por la izquierda y slo por la izquierda, no como la etiqueta de prrafo <BLOCKQUOTE> que sangra a los dos lados. Al poner una nueva etiqueta <DT> volver a su posicin inicial en el siguiente prrafo. He aqu el ejemplo que os sacar de toda duda existencial, material y terminolgica (qu bien me ha quedao esto!):
<DL> <DT> <DD> <DT> <DD> </DL> HTML HyperText Mark-up Language o Lenguaje de marcas de hipertexto, o lo que es lo mismo, lenguaje para hacer pginas web. Profesor de HTML Individuo que se lo pasa bomba haciendo pginas web y que, si le sobra tiempo, intenta comunicar sus conocimientos sobre la materia.

HTML HyperText Mark-up Language o Lenguaje de marcas de hipertexto, o lo que es lo mismo, lenguaje para hacer pginas web. Profesor de HTML Individuo que se lo pasa bomba haciendo pginas web y que, si le sobra tiempo, intenta comunicar sus conocimientos sobre la materia.

Los Smbolos ASCII en HTML

e da en la n

http://personal1.iddeo.es/joseriki/man_list.htm (3 de 3) [26/11/2000 21:36:02]

Las imgenes y las lneas horizontales

Introduccin a las Imgenes

por fin ha llegado ese captulo que todos estabais esperando rabiosamente; porque una pgina Web sin imgenes es como un rbol sin hojas: TRISTE (me parece que es un proverbio chino,... o andaluz). Pero tampoco conviene pasarse con la cantidad, pues todas las cosas tienen sus justa medida (lo siento, pero hoy me he levantado de un refranero subido). No deberamos poner demasiadas imgenes en una pgina y, sobre todo, stas no deben ser de ms de 100 Kbytes y si lo son intentad ponerlas en forma de Thumbnail (no os preocupis, luego os explico qu rayos quiere decir esto). Lo primero que vamos a ver es cmo se inserta una imagen en una pgina y luego ya hablaremos de los posibles atributos de stas, de los diferentes formatos que aceptan los navegadores y de algunos truquillos que siempre van bien a la hora de disear nuestra pgina. ues bien, para insertar una imagen usaremos la etiqueta <IMG> (Image -Imagen-), aunque ella sola no puede hacer nada, necesita obligatoriamente de un atributo SRC (Source -Fuente u origen-) que ser igual a la imagen que queramos insertar. Claro, es normal; si le decimos al navegador "inserta una imagen" y no le decimos qu imagen ha de insertar, el pobre no har nada de nada (s, ya s que hay quien piensa: "pues ya podra adivinarlo el ordenador, que dicen que ahora son tan listos y tal y tal)". Pues no, no adivinan nada. Si quiero poner la imagen Pepito.gif deber poner esta etiqueta: <IMG SRC="Pepito.gif">. Por supuesto, esto ser as siempre y cuando la imagen se encuentre en el mismo directorio que la pgina web. Si se encuentra dentro de una carpeta (por ejemplo, la carpeta Imgenes) un nivel por debajo, la etiqueta ser esta otra: <IMG SRC="Imgenes/Pepito.gif">. Si queris evitaros quebraderos de cabeza con este tema, os aconsejo que metis vuestras pginas, imgenes y todo tipo de ficheros que utilicis para vuestras pginas, en el mismo directorio. Pensad que, aunque en vuestro ordenador se vea bien, luego no se quedar en l, sino que la enviaris va FTP hacia vuestro servidor, y una vez all, la ruta que le hayis puesto (si es algo as como SRC="file:///c|/Mis pginas web/mis imgenes/Pepito.gif"), no tiene porqu funcionar. Bueno, luego volveremos con este tema, pero ahora vamos a ver qu atributos se le pueden poner a la etiqueta <IMG>.

Atributos
Los atributos que describiremos a continuacin son todos opcionales, aunque algunos como ALIGN, BORDER o ALT se utilizan muy, pero que muy a menudo.

http://personal1.iddeo.es/joseriki/man_imgs.htm (1 de 9) [26/11/2000 21:41:10]

Las imgenes y las lneas horizontales

ALIGN
(Alignement -Alineacin-)

Este atributo puede ser igual a los siguientes valores: LEFT, RIGHT, CENTER, MIDDLE, ABSMIDDLE, BASELINE, BOTTOM, ABSBOTTOM , TOP y TEXTTOP. De entre todas estas posibles maneras de alinear una imagen respecto a la pgina y el texto de su alrededor, slo hay dos que permiten que el texto de un prrafo fluya al lado de la imagen: LEFT y RIGHT. Mediante estos valores podremos alinear la imagen a la izquierda o derecha de la pgina y, al mismo tiempo que el texto fluya a su alrededor, como se observa en las letras capitales que aparecen al principio de cada prrafo.. El atributo CENTER, como cabra suponer, no alinea la imagen en el centro de la pgina, sino que hace que la primera del prrafo aparezca a media altura de la imagen. de hecho, todos los valores menos el LEFT y el RIGHT se comportan de una forma parecida, cambiando solamente la posicin de esta primera lnea del prrafo respecto a la imagen. De esta manera, tenemos que MIDDLE, ABSMIDDLE y CENTER hacen lo mismo (pues apenas se observa la diferencia), colocar la primera lnea a media altura de la imagen; BOTTOM, ABSBOTTOM y BASELINE colocan la primera lnea del prrafo al pie de la imagen (aunque BOTTOM parece que la coloca una pizca ms arriba); por ltimo, TEXTTOP y TOP la colocan a la cabeza de la imagen. Menos los dos primeros valores citados, los dems slo se utilizan con imgenes pequeas, aunque tambin lo puedes hacer con imgenes grandes (All t y tu conciencia!) Estos atributos sirven para dejar un espacio (en pixeles) entre la imagen y otro elemento (imagen o texto). Vamos, para que no aparezca el texto pegado literalmente a la imagen, que no suele quedar muy fino que digamos. VSPACE deja espacio por encima y por debajo de la imagen y HSPACE por ambos lados de la imagen. En las letras capitales antes citadas se ha colocado el atributo HSPACE = 4 y ya veis lo bien que ha quedado, o no? S, ya s que ste no necesitaba traduccin, pero lo hago para mantener el diseo de la pgina. Este atributo es igual (en pixeles) al grosor del borde de la imagen, pero este borde slo es visible cuando la imagen funciona como enlace de hipertexto. Lo cierto es que hasta la fecha no conozco ninguna pgina que utilice este atributo para poner bordes gruesos a sus imgenes; el valor que se utiliza es prcticamente siempre el 0, para evitar precisamente que aparezca dicho borde y nos destroce la apariencia transparente de algunas imgenes. As que ya lo sabis, un BORDER = 0 puede sernos de gran utilidad con las imgenes que hacen de enlace.

VSPACE y HSPACE
(Vertical Space y Horizontal Space -Espacio vertical y horizontal-)

BORDER
(Border -Borde-)

http://personal1.iddeo.es/joseriki/man_imgs.htm (2 de 9) [26/11/2000 21:41:10]

Las imgenes y las lneas horizontales

HEIGHT y WIDTH
(Height y Width -Alto y ancho-)

Estos dos atributos permiten cambiar el tamao real de la imagen en pixeles o en porcentaje. No obstante, su uso no es muy frecuente debido a un par de detalles que hay que tener en cuenta: si hacemos ms pequea una imagen slo estamos provocando que se vea ms pequea, pero tardar el mismo tiempo en llegarnos al navegador, pues lo que cambiamos es la manera de mostrarla el navegador, no el tamao en s. Si lo que deseamos es que ocupe menos, deberemos cambiar su tamao desde un programa de retoque de imgenes como PhotoShop, PhotoPaint, PhotoStyler, PaintShopPro, etc. Si por el contrario la hacemos ms grande, debemos tener cuidado con el aumento que realizamos, pues al aumentar el tamao del pixelado en exceso la imagen perder nitidez. Si en vez de cambiar el tamao mediante pxeles lo hacemos en porcentaje, debemos tener en cuenta que ello puede producir un deformacin considerable de la imagen, pues no se ver igual en monitores con resolucin de pantalla de 640 x 480 que con los de 800 x 600, y hoy en da son dos tipos de resoluciones muy comunes en Internet. Cuando creamos una galera de imgenes pequeitas que enlazan con la misma imagen en grande deberamos utilizar el mtodo de los Thumbnails en vez de hacerlas pequeas mediante estos atributos. Pero si an as no os he convencido, la manera de poner estos atributos sera, por ejemplo, algo as: HEIGHT = 300 o HEIGHT = 35%. Este atributo s que se utiliza mucho y ms con los nuevos navegadores que han aadido una caracterstica adicional a ste. El atributo ALT es igual a un texto, al texto que queramos que aparezca en la posicin de la imagen mientras esta se carga o en el caso de que esta no se cargue (pues podemos tener desactivada la opcin del navegador para visualizar imgenes). Para los navegadores Netscape Navigator 4.0 e Internet Explorer 3.0 y 4.0, se le aade una funcin, conocida por los programadores como ToolTipText, y que no es ms hacer aparecer el texto que lleva este atributo cuando dejamos el puntero encima de la imagen. Para los que utilizis programas de Windows, es ese titulito de fondo amarillo que aparece cuando dejamos un par de segundos el puntero encima de un botn. No olvidis que el texto siempre debe ir entre comillas: ALT = "Esta imagen lleva un texto muy chulo", como en este ejemplo. Este atributo era, hasta la aparicin de la versin 4 de Netscape, exclusivo de Internet Explorer, pues es propiedad de Microsoft, no un atributo del estndar HTML 3.2. Pero a Netscape le gust y lo incorpor a la ltima versin de su famoso navegador, aunque el efecto que crea en ste no es el mismo que en el Internet Explorer. La utilidad de este atributo es la de mantener la atencin del internauta mientras se carga una imagen de gran tamao. Cuando una imagen es muy grande puede tardar varios minutos en cargarse, lo cual puede acabar con la paciencia del usuario, sobre todo, si no ve ni tan solo un poquitn de sta hasta pasados 30 o 50 segundos. Pero si, mientras se carga esta imagen, apareciese alguna otra imagen que nos mantuviera atentos hasta que acabase de cargarse la grande, seguro estaramos ms contentos. Este es el fin de esta etiqueta; LOWSRC ser igual a una

ALT
(Alternative Text -Texto alternativo-)

LOWSRC
(Low Source -Carga alternativa-)

http://personal1.iddeo.es/joseriki/man_imgs.htm (3 de 9) [26/11/2000 21:41:10]

Las imgenes y las lneas horizontales

imagen de menor resolucin que la grande, aunque puede ser del mismo tamao en pxeles. Al ser de baja resolucin y con menos colores, se ver peor pero se cargar mucho antes, para que as ya veamos algo aunque no sea una imagen fantstica. De este modo, se cargar primero la imagen de baja resolucin (la que est en el atributo LOWSRC) y cuando acabe de cargarse la imagen de alta resolucin (la que est en el atributo SRC) desaparecer la primera para mostrar la segunda. El problema est con Netscape, pues el tamao en pxeles de ambas imgenes deber ser el mismo, ya que la imagen de alta resolucin se cargar en el espacio que ocupaba la imagen de baja resolucin. La manera de incluirlas sera sta:
<IMG SRC = "AltaResolucion.jpg" LOWSRC = "BajaResolucion.jpg">

Los formatos de las imgenes

xisten tres formatos para las imgenes en Internet (GIF, JPEG y PNG), aunque en realidad se utilizan bsicamente dos: GIF y JPEG. Dependiendo de la calidad con la que queramos visualizar la imagen, el tiempo de carga en el navegador, el tiempo de transferencia por Internet, el detalle de la imagen, los efectos que le queremos dar a la imagen, etc. escogeremos un formato u otro. Para ayudaros en esta difcil eleccin vamos a ver qu caractersticas tienen cada uno de estos formatos.

GIF (Graphics Interchange Format) es un formato propiedad de la empresa Compuserve. Existen dos
tipos: el 87a y el 89a, de los cuales el ms utilizado hoy en da es el segundo ya que permite los efectos de transparencia, entrelazado y compilacin de imgenes de los cuales hablaremos a continuacin. Entre las caractersticas que definen este lenguaje tenemos las siguientes: G Color de 8 bits (256 colores). Ideal para dibujos, iconos, logotipos y, en general, imgenes que no requieran de una definicin excelente. G Compresin sin prdidas mediante el algoritmo LZW, propiedad de UniSys. Este algoritmo permite que al guardar una imagen de 256 colores en formato GIF, no sufra ningn tipo de prdida en los detalles. G Un color transparente. Mediante un programa de edicin de imgenes o uno de tantos editores de HTML que hay en el mercado, podemos hacer que uno de los colores de la imagen pase a ser transparente. Este color suele ser el de fondo de la imagen, con lo cual no se ver el contorno y parecer que est superpuesta en el texto. Ejemplo de ello es la imagen de la mano que se observa un poco ms arriba. G Entrelazado. El efecto de entrelazado consiste en hacer que el navegador no cargue la imagen lnea a lnea, sino en lneas alternativas: la primera, luego la cuarta, la octava, etc. Esto provoca ese efecto que vemos a menudo en las imgenes: al principio ya se ve casi toda la imagen, pero borrosa y, a medida que se va cargando, se va dilucidando mejor su contenido. G Imgenes animadas. Este formato permite juntar varias imgenes y compilarlas mediante un programa especial para ello para generar lo que se denomina un GIF animado. Los programas que se encargan de compilar estas imgenes pueden tambin crear banners y transiciones de todo tipo entre las imgenes, lo cual los hace casi indispensables hoy en da para cualquier diseador de
http://personal1.iddeo.es/joseriki/man_imgs.htm (4 de 9) [26/11/2000 21:41:10]

Las imgenes y las lneas horizontales

pginas web. Entre los ms conocidos tenemos programas como Gif Construction Set, MS-Gif Animator, Animagic Gif, PhotoImpact Gif Animator, Egor 3.4, o incluso algunos que generan gifs animados en tres dimensiones como Xara 3D, Crystal 3D Impact o el fabuloso Ulead Cool 3D. La mayora son shareware y los podis encontrar en Internet o en algn CD-Rom de las principales revistas de informtica (PCActual o PCWorld).

JPEG (Joined Photograph Expert Group): En la dcada de los 80 se form un consorcio de grafistas,
fotgrafos e informticos con la intencin de desarrollar un formato de compresin mejor que el LZW (y a la vez no tener que pagar royalties a UniSys por usar el algoritmo LZW de su propiedad). Lo cierto es que lo consiguieron y hoy por hoy es el formato que comprime ms de cuantos hay, aunque es un tipo de compresin con prdidas. Cuanto ms comprimamos la imagen, ms detalles perderemos. Estas son algunas de las caractersticas que lo definen. G Color de 24 bits (16,7 millones de colores). Pues s, como lo os. Tiene ms colores que los sombreros de Paco Clavel. Este formato es ideal para imgenes de calidad fotogrfica como paisajes, la foto de la familia o el rostro de mi querida Aitana Snchez-Gijn. G Tamao reducido. Gracias al extraordinario algoritmo de compresin que utiliza, podremos comprimir una imagen 10 veces ms de lo que lo hara el algoritmo LZW con una imagen GIF. De esta manera, y aunque parezca increble, una imagen JPEG suele ocupar menos que una GIF del mismo tamao en pantalla. El inconveniente es que este formato de compresin es con prdidas, es decir, la imagen comprimida no ser la misma que la original. Como no quiero agobiaros con rollos filosficos si estis interesados en saber cmo funciona este sistema de compresin, slo tenis que enviarme un e-mail solicitndomelo. Eso s, este tipo de imgenes tardan ms en cargarse una vez han llegado al navegador que las GIF, aunque es cuestin de pocos segundos. G Diferentes grados de compresin. Cuando pasis una imagen a formato JPEG tendris la opcin de escoger entre 10 grados de compresin; cuanto mayor sea la compresin, peor ser la definicin de la imagen. Si pensamos en poner imgenes para que los usuarios hagan psters o se deleiten con los detalles, es mejor comprimirlas poco, pero si son slo para mostrar una cara como la ma, la podis comprimir tanto como queris (seguro que ms de uno os lo agradecer). G Sin Efectos. Los efectos que queramos hacer no dependern del formato sino de nuestra habilidad con el programa editor de imgenes. De este modo, podremos simular fondos transparentes con los canales o efectos de sombreado que quedan la mar de chulos, pero ya podis olvidaros de las imgenes animadas (no obstante, siempre tenis la posibilidad de convertir a GIF las imgenes JPEG).

PNG (Portable Networking Graphics). Este es un formato que fue creado para no tener que pagar
derechos a UniSys por su formato de compresin LZW. Parece ser que se trata de un formato intermedio entre GIF y JPEG, pues admite muchos colores y ocupa menos que un GIF. Pero su gran inconveniente es que los navegadores necesitan, de momento, un Plugin para poder visualizar este tipo de imgenes, motivo ms que suficiente para que los diseadores no lo incluyan en sus pginas, ya que estn seguros que la mayora de las personas hoy da conectadas a la Red no tienen instalado este Plugin. Los ltimos navegadores empiezan a incorporar de serie este plugin, as que veamos cules son sus caractersticas. G Color de 16bits (65.000 colores). No tiene tantos colores como el JPEG, pero os aseguro que son ms que suficientes para ver una imagen con calidad fotogrfica G Tamao reducido. Este formato utiliza un nuevo formato de compresin a caballo entre el JPEG
http://personal1.iddeo.es/joseriki/man_imgs.htm (5 de 9) [26/11/2000 21:41:10]

Las imgenes y las lneas horizontales

y el LZW, aunque ocupa un poco ms que este primero. Lo bueno es que ocupa ms o menos como el GIF, pero tiene ms colores, as que vale la pena. Entrelazado y transparencia. Al igual que el formato GIF, este formato permite el entralazado y una capa de transparencia. El entrelazado es doble; es decir, carga las lneas de arriba a abajo y de izquierda a derecha, haciendo dos barridos, lo cual hace que se cargue antes. Es una lstima que no est muy de moda.

dems de estos tres formatos, tambin podemos encontrarnos con imgenes de otro tipo, como las animaciones de MacroMedia Director, Macromedia Flash, Macromedia Shockwave o Corel Draw, pero se necesitan Plugins propios de estas casas para poder visualizarlos, as que no os comis ms el coco y seguid con las GIF y JPEG, que no tendris problemas. Un hurra por el GIF! HURRA!, Un hurra por el JPEG! HURRA HURRA! Ah, se me olvidava! La resolucin de la imagen que se usa en Internet es bsicamente la de 72 puntos por pulgada; si las guardamos con una mayor resolucin para ver mejor los detalles slo conseguiremos que las personas que visiten nuestra pgina se cansen de esperar, pues ocupan ms espacio y apenas se nota la diferencia (a menos que la imagen sea enorme, lo cual retrasar cuantiosamente el tiempo de carga).

Lneas horizontales
, ya s que una lnea horizontal no es una imagen, pero es un elemento grfico la mar de chulo que nos puede servir, entre otras cosas para separar captulos o apartados de una pgina, como hago yo con sta. Las lneas horizontales se pueden hacer con HTML o insertando una imagen. La primera opcin es ms sencilla y ocupa menos espacio, pero la segunda nos permite mucha ms variedad de formas y un mayor colorido. ara insertar una lnea horizontal con HTML se utiliza la etiqueta nica <HR> (Horizontal Rule -Barra horizontal-). Esta etiqueta, como la mayora, permite varios atributos que modificarn su apariencia. Si solamente utilizamos la etiqueta sin atributos, tendremos una lnea que ir de lado a lado de la pgina y que tendr un efecto de relieve, o hundido si prefers, que le da un toque de distincin. pero una imagen vale ms que mil palabras, as que ah va una y luego os muestro los atributos.
G

WIDTH (ancho): Este atributo nos permitir darle longitud a la lnea, es decir, qu parte de la pantalla va a ocupar a lo largo. El valor que utilizaremos para darle longitud podr ser en pxeles o en porcentaje. En este caso se utiliza ms el sistema de porcentaje que el de pxeles, pues generalmente queremos que ocupe una parte determinada de la pantalla (el 50%, el 70%, etc.) y si le ponemos la medida en pxeles no vern el mismo tamao los que tengan resoluciones distintas de pantalla. Esta lnea tiene una anchura del 40%. <HR WIDTH = 40% ALIGN = LEFT> SIZE (tamao). El tamao hace alusin a su altura o grosor, tambin determinado en pxeles. Por defecto, el tamao es de 2 pxeles y no conviene pasar de ms de 20, porque entonces, ms que una lnea parece un cuadro. Esta lnea tiene un grosor de 10 pxeles. <HR SIZE = 10 ALIGN = CENTER
WIDTH = 80%>

http://personal1.iddeo.es/joseriki/man_imgs.htm (6 de 9) [26/11/2000 21:41:10]

Las imgenes y las lneas horizontales

ALIGN (alineacin). Este atributo puede ser igual a los tres valores tpicos de un prrafo: LEFT, RIGHT y CENTER. No hace falta decir que estos atributos slo los utilizaremos cuando la longitud de la lnea sea inferior a la de la pgina. Esta lnea est alineada a la derecha. <HR ALIGN = RIGHT
WIDTH = 40%>

NOSHADE (sin relieve): Este atributo hace que desaparezca el efecto de relieve que queda tan bien (particularmente, es lo nico que me gusta de este elemento). Esta lnea no tiene relieve <HR
NOSHADE>

Tambin existe un atributo que hace que la lnea aparezca de un color en detrimento del efecto de relieve; es el atributo COLOR = color cualquiera. No obstante, este atributo es slo visible en Internet Explorer, pero no es nada espectacular que digamos. l otro tipo de lneas son las que insertamos como imgenes, es decir, slo necesitaremos utilizar la etiqueta <IMG SRC = "nombre_de_la_lnea" y ya tendremos una lnea horizontal. Lo que ya es ms difcil es insertar una lnea vertical, pues debemos rotarla (o cambiarle el tamao de la anchura por el de la altura) y luego alinearla a la izquierda o a la derecha. Otra manera muy efectiva de colocarla es mediante una tabla, con lo cual puedes controlar dnde queremos que aparezca exactamente. Una clara muestra de la alineacin a la izquierda la tenemos en esta lnea de colores; para insertarla se ha utilizado la siguiente etiqueta <IMG SRC ="l_color.gif" HEIGHT=222 WIDTH=8 ALIGN =LEFT HSPACE =6 ALT ="Lnea puesta en vertical">. En cambio, para insertar esta misma lnea horizontalmente se ha utilizado la etiqueta <IMG SRC = "l_color.gif" WIDTH =100% ALT ="Lnea horizontal">.

Thumbnails y otros truquillos de inters

s frecuente ver en Internet enormes catlogos de productos, galeras de imgenes de todo tipo (s ya s en qu estis pensando, pervertidos!), interminables exposiciones de cuadros, etc. Como estas imgenes pueden llegar a tener un gran tamao, los diseadores las suelen mostrar una por pgina o mejor an, todas en la misma pgina pero en pequeito. Cuando la ves en pequeito ya te haces una idea y cmo es y si lo que deseas es verla en grande slo tienes que picar en un la misma imagen o en un enlace cercano que nos permita verla a lo bestia. ues bien, a la tcnica de crear una imagen pequea que enlace con la misma imagen en grande se conoce como Thumbnail (ua del pulgar). Para crear la rplica en pequeo, lo nico que necesitamos es abrir la imagen grande en cualquier editor de imgenes y a continuacin cambiar el tamao de sta, para luego guardarla con otro nombre. Es cierto que de este modo tenemos dos imgenes en vez de una, pero la pequea ocupar muy poco espacio y a cambio ganaremos en velocidad (recordad lo antes dicho sobre qu pasaba si hacamos pequea una imagen mediante los atributos HEIGHT y WIDTH). Si queris ver ejemplos de Thumbnails, slo tenis que visitar el final de mi seccin de "Ficha Personal"; all encontraris fotos de mis amigos y compaeros de trabajo en forma de thumbnail. tro de los trucos ms utilizados por los diseadores de pginas web es el del punto
http://personal1.iddeo.es/joseriki/man_imgs.htm (7 de 9) [26/11/2000 21:41:10]

Las imgenes y las lneas horizontales

transparente. A menudo deseamos dejar un espacio determinado de X pxeles entre lneas o entre palabras, o para separar imgenes, crear sangras en primera lnea o sangras francesas. Qu s yo. Espacios en general. Pues bien, existe un truco que nos permitir hacerlo de una manera muy fcil y que no implicar un aumento de tiempo de carga de la pgina. Lo primero que debemos hacer es ir al un programa de edicin de imgenes (estilo PhotoShop) y crear una imagen nueva sobre fondo transparente con las dimensiones de 1 x 1 pxel; despus guardaremos tal imagen en formato GIF y ya est. Una vez creada esta imagen que podemos llamarla PuntoT.gif, la insertaremos all donde queramos dejar un espacio. Si el espacio que queremos dejar es a lo ancho de 25 pxeles slo deberemos poner la etiqueta con los atributos HEIGHT y WIDTH, como en este ejemplo. <IMG SRC = "PuntoT.gif" HEIGHT = 2 WIDTH = 60>. Sin ir ms lejos, yo acabo de conseguir una sangra en primera lnea utilizando este mtodo y como podis ver no slo es fcil de utilizar, sino que los resultados no pueden ser mejores. Adems tenemos la ventaja de que este tipo de imgenes ocupan menos de 1 KByte y que al estirarlas quizs aumente el pixelado y pierdan definicin, pero a quin le importa si son transparentes! ara aquellos que ya sabis cmo crear tablas, otro truco curioso consiste en poner una imagen de fondo de celda en vez de insertarla en la celda en cuestin. De esta manera nos aseguramos que la imagen ocupe todo el espacio reservado para la celda y no sobrar nada nada nada. El nico inconveniente es que slo sirve para los navegadores Netscape 4.0 y Explorer 3.0 y 4.0. Pero que le vamos a hacer, no todo iba a ser perfecto!, digo yo. or ltimo, si me permits un consejo, poned siempre el nombre de la imagen igual que como sta est grabada, es decir, si la imagen se llama Pepito.gif, no la pongis en la etiqueta como PEPITO.GIF, ni pepito.gif, pues en vuestro ordenador funcionar a las mil maravillas (si es un PC o un MAC ya que no distinguen entre maysculas y minsculas, pero en vuestro servidor es posible que no sea as, ya que la mayora de los servidores donde se alojan las pginas funcionan bajo el sistema operativo UNIX y este sistema S discrimina entre maysculas y minsculas y supondr que Pepito.gif y pepito.gif son ficheros distintos. Hasta aqu el cuarto captulo del mejor manual de HTML que hay en el mundo y parte de la galaxia lactosa (modestia aparte). El siguiente captulo tratar de explicaros todos los secretos de los enlaces de Hipertexto. . Ahora slo os falta poner a prueba vuestros recin adquiridos conocimientos realizando este sencillo test de 10 preguntas. Si consegus entre un 60% y un 80% de acierto, es que os ha ido la mar de bien.

Este manual ha sido ntegramente elaborado con el sudor y el coco de Jos Luis Iglesias Jckle. En el caso de que queris copiarlo, pedid permiso a vuestra mam y no quitis el nombre del autor, ok? La ltima vez que se me ha ocurrido modificar este manualillo fue ayer mismo, 20/09/99

http://personal1.iddeo.es/joseriki/man_imgs.htm (8 de 9) [26/11/2000 21:41:10]

Las imgenes y las lneas horizontales

Yo me vuelvo a la seccin

http://personal1.iddeo.es/joseriki/man_imgs.htm (9 de 9) [26/11/2000 21:41:10]

Hipertexto e imgenes mapeables

Los Enlaces de HiperTexto

na de las cosas que ha colaborado en mayor medida a la expansin y fama del servicio ms utilizado en Internet, la World Wide Web (WWW), es sin lugar a dudas el Hipertexto. El Hipertexto son esas palabras subrayadas y de color azul que a menudo vemos en las pginas web y que, al pulsar encima de ellas (cuando el puntero del ratn se ha convertido en una mano), nos conducen a otra pgina web que puede estar al otro lado del mundo, en un idioma que vete a saber quin lo entiende. A veces la gente se refiere al hipertexto con otros nombres como Hipervnculos, vnculos de texto, links, enlaces, hiperenlaces, etc. A m tanto me da, porque yo sigo prefiriendo llamarlos enlaces de hipertexto y eso es lo que voy a hacer durante este captulo. El HTML es un lenguaje de marcas que utiliza el hipertexto, pero no es el nico que existe (aunque quizs s el ms conocido hoy en da). Por poner un ejemplo, la ayuda que utilizan la mayora de los programas que tenemos instalados en el ordenador funcionan mediante hipertexto y, si no me creis, slo tenis que abrir cualquier programa que tengis, ir al apartado de la ayuda y buscad cualquier cosa; entre las explicaciones que os den es muy probable que tengis palabras de otro color que al pulsarlas os conducen a otro tema relacionado. Eso es hipertexto. xisten tres tipos de enlaces de hipertexto, fundamentalmente: los enlaces internos, los enlaces externos y los marcadores. Los dos primeros son enlaces a una pgina web determinada y el tercero es un enlace a una posicin concreta de una pgina web. Tambin existen las mezclas entre marcadores y los enlaces internos o externos, pero vamos a comenzar por lo ms sencillo o sino se os va a poner una cabeza como un bombo en una pera de Wagner.

Los Enlaces Internos

iempre que queramos crear un enlace, sea del tipo que sea, deberemos insertar la etiqueta <A> (Anchor -Ancla-), pero sta es de esas etiquetas que necesitan obligatoriamente de al menos un atributo, que no es otro que el que contendr el nombre del lugar al que vamos a hacer el enlace; este atributo es HREF (Hipertext Reference -Referencia de hipertexto-) y ser igual a la pgina web y ubicacin de sta si es necesario. Despus de poner esta etiqueta, introduciremos el texto o imagen que servir de enlace y por ltimo cerraremos la etiqueta mediante </A>. Por ejemplo, si yo tengo una pgina que se llama Gamascolores.htm que trata sobre los colores que se pueden poner en una pgina web (Qu casualidad! Porque en realidad s que la tengo) y deseo hacer en este mismo prrafo un enlace a esa pgina, debera poner esta etiqueta <A HREF="Gamascolores.htm">Pica aqu para ir a la pgina del Cubo de color </A> y quedara de la siguiente forma: Pica aqu para ir a la pgina del Cubo de color. Lo cierto es

http://personal1.iddeo.es/joseriki/man_hipe.htm (1 de 6) [26/11/2000 21:47:12]

Hipertexto e imgenes mapeables

que eso de poner Pica aqu... queda un poco cutre patatero; con poner "El cubo de color" ya hubiera sido ms que suficiente. ues bien, ste es un enlace interno, y se llama as porque enlaza con una pgina de mi misma web y no con una del vecino, ni con una pgina que est al otro lado del mundo. Para crear este enlace hemos utilizado una referencia de hipertexto relativa, lo cual quiere decir, ni ms ni menos que no hemos puesto la direccin completa en donde se encuentra esta pgina en Internet (http://personal.redestb.es/joseriki/Gamascolores.htm) Por qu? Pues muy sencillo, si hubisemos puesto <A HREF="http://personal.redestb.es/joseriki/Gamascolores.htm">Cubo color</A> habra funcionado exactamente igual que si hubisemos puesto slo <A HREF="Gamascolores.htm">Cubo color</A> debido a que la pgina Gamascolores.htm se encuentra en la misma carpeta (directorio) que la pgina que contiene el enlace, es decir, sta. Si tuviese la pgina Gamascolores.htm dentro de otra carpeta en mi web (que se llamase, vamos a poner, PepitosColors), la etiqueta del enlace debera ser algo as <A HREF="PepitosColors/Gamascolores.htm">Cubo color</A>. Ms adelante, el el apartado de Tipos de Referencias de Hipertexto, ya tocaremos ms en profundidad lo que se denomina el protocolo de fichero. Pero la diferencia fundamental entre poner una referencia relativa y una absoluta no es slo el espacio que ocupan, sino que la absoluta slo funciona en el servidor pero no en mi ordenador; en cambio, la relativa funciona en ambos sitios. na de las cosas a las que no les solemos dar importancia a la hora de escribir el cdigo de una pgina web es a las maysculas y minsculas. A menudo pensamos que es indiferente poner una palabra en maysculas o en minsculas o, como mnimo, inconsecuente, pero no es as. Resulta que si yo tengo una pgina web a la que he llamado Gamascolores.htm, puedo crear un enlace a esta pgina mediante la etiqueta <A HREF="Gamascolores.htm">Cubo color</A> o <A HREF="gamascolores.htm">Cubo color</A> o incluso <A HREF="GAMASCOLORES.HTM">Cubo color</A> y en nuestro querido sistema operativo funcionar a las mil maravillas a menos que ste sea UNIX, pues Unix es sensible a maysculas y minsculas y slo la primera de las tres opciones funcionara. Y ahora estaris pensando: "UUUUFF! Menos mal! Mi sistema operativo es Windows 95 o System Mac! No tengo que preocuparme de esto". Pues precisamente, sois los que debis preocuparos ms, porque cualquiera de las tres opciones anteriores se ver bien en vuestro ordenador, pero cuando subis la pgina a vuestro servidor en Internet (Y la mayora de los servidores todava funcionan bajo UNIX!) slo los que hayis seguido mi fantstico, sublime, ingenioso y acertado consejo tendris un enlace que funcione. Bueno, no tenis que darme ms las gracias; con ingresar un cheque de 4 cifras en mi cuenta bancaria ser suficiente. os enlaces internos no son slo para pginas web, pues a menudo haremos enlaces a imgenes, como en el caso de los thumbnails que ya vimos en el anterior captulo. Si deseamos que al pulsar sobre un enlace se cargue una imagen en vez de una pgina web, deberemos substituir la pgina.htm por una imagen GIF o JPEG. En este enlace podremos ver un ejemplo de lo que os digo y de paso disfrutaris un ratillo con mi querida Aitana, Que no va a ser todo estudiar! El cdigo que he utilizado para crear este enlace es <A HREF="Aitana1.jpg">Aitana</A> y si no me creis, peor para vosotros. dems de hacer enlaces a imgenes, tambin podemos hacer que una imagen acte como enlace. Para ello slo tenemos que incluir la etiqueta de insercin de la imagen, por ejemplo <IMG SRC="Pepito.gif">, en lugar del texto del enlace que va entre las etiquetas <A HREF="URL"> y </A>. Por poner un ejemplo ms claro, aqu tenis una imagen que es un enlace de hipertexto. Prueba
http://personal1.iddeo.es/joseriki/man_hipe.htm (2 de 6) [26/11/2000 21:47:12]

Hipertexto e imgenes mapeables

de ello es que, si situis el puntero del ratn encima de ella, ste se convierte en una mano y en la barra de estado del navegador aparece una direccin como http://personal.redestb.es/joseriki/personal.htm, indicando a donde conduce el enlace. Slo tenis que pulsar encima de la imagen y veris que os cargar la pgina de mi ficha personal. Por cierto, si no deseis que aparezca el borde azul de la imagen, recordad que tan slo necesitamos aadir a la etiqueta de la imagen el atributo BORDER=0.

Los Enlaces Externos

ues si os ha parecido que es fcil colocar un enlace interno, cuando veis cmo se pone un enlace externo seguro que pensaris: "Pero si esto est requetechupao!.Y yo sin probarlo antes!". Lo nico que no debemos olvidar es que, en los enlaces externos, debemos poner siempre (salvo en excepciones) la direccin de Internet completa: protocolo, DNS, carpetas y nombre del fichero si hace falta. Por ejemplo, si deseo que alguien entre en la pgina del buscador Ol a travs de mi pgina, puedo insertar esta etiqueta: <A HREF="http://www.ole.es">Buscador Ol</A>. Se llaman externos porque son externos a mi pgina web, pero podra ser que una persona quisiera hacer un enlace externo a una pgina de una persona que se halla ubicada en el mismo servidor que en el mo, de manera que no sera necesario poner la direccin absoluta, sino una direccin relativa, pero de esto ya hablaremos ms adelante. Con franqueza, os aconsejo que siempre utilicis referencias absolutas para vuestros enlaces externos y os evitaris algn que otro quebradero de cabeza. Si queris ver una lista enorme de este tipo de enlaces, podis visitar mi pgina de direcciones interesantes y observad el cdigo con el que sta ha sido desarrollada.

Los Marcadores
os dos primeros tipos de enlaces que hemos vistos son enlaces a pginas y al pulsar sobre ellos estaremos cargando un pgina de mi web, de Fulanito o de Menganito, pero en cualquiera de los casos, la pgina que se cargue nos aparecer desde el principio. Pero los enlaces de hipertexto no slo nos sirven para movernos por diferentes pginas, sino tambin por diferentes lugares de una misma pgina. Seguro que habis visto en incontables ocasiones un tipo de enlace al final de una pgina que rezaba algo as como Volver al principio de la pgina y que al pulsarlo iba a parar al principio. Bueno, pues esto es debido a que al principio de la pgina se ha colocado un marcador. S, s, como en los procesadores de texto. os marcadores son una etiqueta que da un nombre (o marca) a una zona del documento. La etiqueta para definir un marcador es la misma que la que utiliza para los enlaces de hipertexto, <A>, pero en este caso el atributo no es HREF, sino NAME, y ste ser igual a una palabra que utilizaremos como marcador. Despus, para llamar a este marcador utilizaremos una etiqueta <A HREF="#nombre_del_marcador">Ir al marcador</A>. S, s, ya s; mejor con un ejemplo. Pues vamos all. Si deseo que al hacer clic sobre la frase Ir al principio de la pgina, me aparezca en pantalla el principio, deber insertar una etiqueta que diga, por ejemplo, <A NAME="principio"></A> al principio de todo de la pgina (por supuesto, por debajo de la etiqueta <BODY>) y la etiqueta <A HREF="#principio">Ir al principio de la pgina</A> all donde queramos que aparezca esta frase. El resultado lo tenis unas 4 lneas ms arriba. Pulsad y veris. esde luego, no slo haremos enlaces de arriba a bajo o viceversa. Una de las aplicaciones que se
http://personal1.iddeo.es/joseriki/man_hipe.htm (3 de 6) [26/11/2000 21:47:12]

Hipertexto e imgenes mapeables

le dan con ms frecuencia a los marcadores son los ndices. Imaginaos un ndice al principio de una pgina con todos los nombres de los apartados que contiene el documento. Cada vez que pulsamos en un elemento de este ndice, el enlace nos llevar hasta el principio del apartado en cuestin. Un claro ejemplo de lo que os estoy contando es, de nuevo, la pgina de las Direcciones interesantes; en ella podris encontrar al final de cada apartado un vnculo que nos conduce al ndice de materias que hay al principio de la pgina, aunque este ndice, en vez de ser texto es una imagen mapeable, tema del que podris empaparos unas lneas ms abajo. o obstante, los marcadores dentro de la misma pgina no se utilizan mucho, pues hoy en da lo que se lleva es hacer marcos o utilizar una combinacin entre enlaces internos y marcadores. Sin ir ms lejos, a estas alturas seguro que os habis percatado de que tenis una pequea ventanita de color negro con una lista de elementos la mar de chula que os sirven de tabla de contenidos del captulo. Pues bien, cada vez que pulsis un elemento de esta lista, os aparece en pantalla el apartado seleccionado como por arte de magia (perdn, quiero decir, por arte de HTML) y ello es debido a que en esta pgina hay un marcador al principio de cada apartado, marcador que es llamado con un enlace interno de hipertexto desde la ventanita negra. Para ello, el cdigo del marcador ser el mismo, pero el cdigo del enlace cambiar un poquito: en vez de poner <A HREF="#link_interno">Enlaces internos</A> pondr <A HREF="manual_hiper.htm#link_interno">Enlaces internos</A>; es decir, antes del smbolo de la almohadilla (#) que precede al nombre del marcador, escribiremos el nombre de la pgina en la que se halla dicho marcador; de lo contrario, el navegador buscara el marcador en la misma pgina en la que se halla el enlace y, al no encontrarlo, dara un error. or ltimo, un par o tres de consejillos de quita y pon. 1) El nombre de los marcadores debera ser siempre una sola palabra; sin sents una necesidad imperiosa por llamar a vuestro marcador "La casa de doa Pepita", podris ponerlo de esta manera "La_casa_de_doa_pepita", es decir, separado por guiones de concatenado. 2) Es recomendable utilizar siempre minsculas, no sea que luego nos equivoquemos con alguna mayscula y no funcione el enlace (recordad lo explicado en el apartado de los truquillos con las imgenes respecto al sistema operativo UNIX). 3) Si alguna vez os da algn problema un enlace a un marcador que se encuentra al final del todo de la pgina web (justo antes de la etiqueta </BODY>), probad a escribir entre este marcador y la etiqueta </BODY> el smbolo &nbsp; y problema solucionado.

Tipos de Referencias de Hipertexto

espus de estar todo el da navegando de una pgina a otra, seguro que os suena una barbaridad el protocolo HTTP (HiperText Transfer Protocol -Protocolo de transferencia de hipertexto-). ste es el protocolo que se utiliza para transferir las pginas web. No os preocupis, no os voy a hinchar la cabeza con complejas definiciones de lo que son los protocolos y para qu sirven. Lo que s deberais saber es que cada servicio que hay en Internet tiene un protocolo diferente: el correo electrnico tiene el protocolo MAILTO, el servicio de chat tiene el IRC, el servicio de transferencia de ficheros tiene el FTP, el de grupos de noticias tiene el NEWS, el de control remoto el TELNET, etc. De todos ellos, sin lugar a dudas, el ms incluido en las pginas web es el de correo electrnico, el cual nos servir para que al pulsar encima del enlace que lo contiene, se abra el gestor de correo electrnico del usuario. Ya va, ya va, ya pongo el ejemplo. Si deseamos que alguien pueda enviarnos un mensaje de correo electrnico a nuestro buzn desde nuestra pgina web, podis incluir una etiqueta como sta all donde mejor os parezca <A HREF="mailto:mi_nombre@mi_servidor.es">Envame un mensajillo resultn</A>. Y si
http://personal1.iddeo.es/joseriki/man_hipe.htm (4 de 6) [26/11/2000 21:47:12]

Hipertexto e imgenes mapeables

en vez de poner "Envame un mensajillo", ponis una imagen de correo electrnico, el diseo puede quedar chupi-lerendi. Y sino, slo tenis que echar un vistazo a esta web y os daris cuenta de que mi direccin de correo electrnico est por todas partes. ues, si para que me enven un mensaje de correo electrnico utilizo el protocolo MAILTO, para los dems servicios podemos utilizar los protocolos antes citados. Dnde colocarlos? Pues en el atributo de la Referencia de Hipertexto, HREF, de la etiqueta <A> .Si lo que deseamos es que, al pulsar sobre un enlace, el usuario se descargue en su pgina un fichero de cualquier tipo, slo es necesario poner el nombre del fichero. Por ejemplo, <A HREF="manolito.zip">Bjate el fichero comprimido Manolito.zip</A>. Si queremos utilizar otros protocolos, aqu van algunos ejemplos que os pueden ser de utilidad:
G

Para correo electrnico <A HREF="mailto:[email protected]">Mi

direccin de correo</A>

Para transferencia de ficheros <A HREF="ftp://ftp.microsoft.com">Servidor de

Mocosoft</A>

G G

Para Telnet <A HREF="telnet://archie.rediris.es">Buscador Archie</A> Para grupos de noticias <A HREF="news:news.redestb.es">Grupos de noticias de
RedesTb</A>

Para el chat <A HREF="irc://irc.arrakis.es">Servidor de chat de Arrakis</A>

dems de estos protocolos, existe un protocolo del que an no hemos hablado. Se trata del protocolo de fichero: FILE. Este protocolo es el que substituye al protocolo HTTP mientras las pginas se encuentran en nuestro ordenador en vez de en el servidor. Su sintaxis es algo diferente a la de los dems protocolos (ntese las tres barras despus del protocolo en vez de dos, y la barra vertical despus del nombre de la unidad de almacenamiento, barra que puede substituirse por el signo de los dos puntos): file:///Unidad|/carpetas/fichero.extensin, aunque quizs con un ejemplo se vea mejor: file:///c|/Archivos de programa/Pepeswebs/index.htm. Este tipo de protocolo se usa slo en modo local, nunca en Internet, y os digo esto porque muchos editores de texto utilizan este sistema para vincular las pginas, imgenes o sonidos a nuestra web cuando stos elementos no se encuentran en el mismo directorio que la pgina en la que van insertados. Recordad que cuando coloquis vuestra pgina en Internet, no debe de haber ningn protocolo de fichero en vuestras pginas o nadie podr ver ese elemento. Hasta aqu el tercer captulo del manual de HTML que hace las delicias de todo aquel que aprecia las buenas explicaciones y bla, bla, bla (si es que tengo un rollo que ni el del perro de Scotex). El prximo captulo es primordial, as que ya podis prepararos porque empezamos con uno de los temas fuertes: las tablas. Ahora slo os falta poner a prueba vuestros recin adquiridos conocimientos realizando este sencillo test de 10 preguntas. Menos de un 70% es falta de estudio y ms de un 90% es peligroso para mi futuro, porque eso quiere decir que habis aprendido demasiado y mi trabajo corre peligro.

http://personal1.iddeo.es/joseriki/man_hipe.htm (5 de 6) [26/11/2000 21:47:12]

Hipertexto e imgenes mapeables

Este manual ha sido ntegramente elaborado con el sudor y el coco de Jos Luis Iglesias Jckle. En el caso de que queris copiarlo, pedid permiso a vuestra mam y no quitis el nombre del autor, ok? La ltima vez que se me ha ocurrido modificar este manualillo fue ayer mismo, 20/09/99

Yo me vuelvo a la seccin

http://personal1.iddeo.es/joseriki/man_hipe.htm (6 de 6) [26/11/2000 21:47:12]

Las tablas

Las Tablas
unque parezca mentira, el 99'9% de las pginas web que hay desperdigadas por Internet usan tablas, aunque no siempre stas se ven. Si ya habis comenzado a hacer alguna que otra paginilla, seguro que se os planteado el dilema de la colocacin de los elementos que integran la pgina. Si queremo poner el texto en columnas periodsticas y deseamos que todo el mundo pueda apreciar este formato (recordemos que existe un etiqueta para hacer columnas, <MULTICOL>, pero que slo es para Netscape 3 o superior), no nos quedar otro remedio que crear una tabla con dos celdas como mnimo; en la celda de la izquierda pondramos el contenido de la primera columna y en la segunda el contenido pensado para la segunda columna. Pero ste no es el nico problema con el que nos encontraremos. Como aperitivo, podis volver al captulo 1 o al captulo 3 y podris ver que he utilizado tablas para crear las columnas. Pero dejmonos de prembulos y rollos varios y vamos directos al grano. Cmo piiiiiiiiiiiiiiiiiiiiiiiiiipp se hacen las tablas? (substityase el pitido por el taco que ms apetezca en el da de hoy).

Estructura de una tabla

as tablas en HTML 3.2 estn constituidas por filas y celdas, as que en vez de decirle al navegador que tengo una tabla de tres filas por 2 columnas, le dira que tengo una tabla con tres filas con dos celdas en cada una. En la versin 4.0 del HTML se podr utilizar una nueva distribucin que s que permite etiquetas para las columnas, pero como de momento el estndar sigue siendo el 3.2 dejaremos de lado nuestra chulera espaola y sumisamente acataremos las normas del W3C. Pues bien, si la estructura viene dada por el nmero de filas y de celdas, seguro que tendremos una etiqueta para las filas y otra para las celdas. Pues S, lo has acertado! Tenemos a nuestra entera disposicin un total de 5 etiquetas para crear tablas: G <TABLE></TABLE> (Tabla). Esta etiqueta establece el principio y el fin de la tabla y adems incorpora una serie de atributos que modificaran el diseo de sta. G <TR></TR> Table Row (Fila de la tabla). Establece el principio y el final de una fila de la tabla y mediante los atributos que puede contener modificara las celdas que se hallen dentro. G <TD></TD> Table Description (Descripcin de la tabla). Establece el principio y el final de una celda de la tabla y mediante sus atributos puede modificar su formato G <TH></TH> Table Heading (Celda de cabecera). Establece el principio y el final de una celda de la tabla que tendr una peculiaridad: su contenido estar en negrita y centrado por defecto. G <CAPTION></CAPTION> (Ttulo). Establece el ttulo que se desea poner a una tabla. Aparecer encima o debajo de la tabla dependiendo del valor de su nico atributo, ALIGN que puede tener los valores TOP o BOTTOM segn queramos que el ttulo aparezca encima o debajo de la tabla, respectivamente. De esta manera, una tabla como la que se encuentra bajo ests lneas, tendra un cdigo tan chulo como ste (me he permitido la frivolidad de poner un borde a la tabla, porque as parece ms tabla, o no?).:
<TABLE BORDER> <TR><TD>1</TD><TH>2</TH><TD>3</TD></TR> <TR><TD>Uno</TD><TH>Dos</TH><TD>Tres</TD></TR> <CAPTION ALIGN=TOP>Mi primera (snif!) Tabla</CAPTION>
</TABLE>

1 Uno

Mi primera (snif!) Tabla 2 3 Dos Tres

omo se aprecia en esta tabla, los elementos de la segunda columna estn en negrita y centrados respecto a su celda debido a que he utilizado un etiqueta <TH> en vez de <TD>. El ttulillo aparece encima de la tabla porque su atributo as lo marca; y el borde de la tabla se ve gracias al atributo BORDER. Pero adems de BORDER hay mucho ms atributos que se pueden colocar dentro de cualquiera de estas etiquetas. Vamos a presentarlos: "Aqu los atributos, aqu los usuarios de Internet". Bueno, una vez hechas las presentaciones, vamos a describirlos un poco y como veo que son muy educados, dejar que se describan ellos mismos. Podis empezar vosotros, los atributos de <TABLE>.

Atributos de la etiqueta <Table>

BORDER (Borde). Hola, soy uno de los atributos ms utilizados, ya que sin m no se puede ver el borde de la tabla, pues el valor por defecto es 0, sin bonde. Si utilizzamos este atributo como en la tabla anterior, tendremos un borde de 1 pxel y si lo que deseamos es
http://personal1.iddeo.es/joseriki/man_tabl.htm (1 de 5) [26/11/2000 21:54:58]

Las tablas

que este borde sea ms grueso tan slo deberemos indicarle de cuntos pxeles lo queremos. P.e. BORDER=5, teniendo en cuenta que al aumentar el grosor del borde se acentuar el efecto de biselado que tiene ste. No se recomienda que el borde exceda de los 10 pxeles, porque sino, ms que una tabla parecer una pirmide o un botn muy profundo. Borde 1 de pxel Borde 3 de pxeles Borde 5 de pxeles Borde 20 de pxeles

HEIGHT y WIDTH (Height y Width -Alto y ancho-): Estos dos atributos permiten establecer el tamao de la tabla en pixeles o en porcentaje. El atributo HEIGHT no se utiliza mucho, ya que la altura de la tabla la determina generalmente el texto o la imagen que introduzcamos en las celdas. A la hora de decidirnos entre usar la escala en pxeles o la de porcentaje, deberemos tener en cuenta si lo primordial es que la tabla ocupe un determinado espacio en proporcin a la pgina (porcentaje) o si lo ms importante es que siempre tenga el mismo tamao (pxeles). Quizs se utiliza ms la escala percentual que la absoluta, pero la decisin es vuestra, siempre vuestra (bueno, en el caso de las mujeres s, en el de los hombres, no est tan claro). Ocupa el 50% del ancho de la pgina

ALIGN (Alignment -Alineacin-): Este atributo puede ser igual a los valores LEFT, RIGHT y CENTER, segn queramos que la tabla est alineada a la izquierda,derecha o en el centro respecto a nuestra pgina. El valor por defecto es a la izquierda, aique que si no ponis este atributo, la tendris a un lado. Por supuesto, si le damos una anchura del 100% de la pgina no har falta que os preocupis de ste atributo. Ocupa el 60 % del ancho de la pgina y est alineada al centro BGCOLOR (Background Color -Color de fondo-). Como su mismo nombre indica, este atributo tiene como valor un color que se aplicar a toda la tabla, a menos que se aplique a una celda directamente, ya que las celdas tienen prioridad al conjunto de la tabla. El fondo de esta tabla es de color azul turquesa (que es la mujer del turco)

BACKGROUND (Imagen de fondo). Al igual que para la etiqueta <BODY>, este atributo es para hacer que aparezca una imagen de fondo en vez de un inspido color. El problema es que se crea un mosaico de imgenes y eso puede hacer que no siempre quede como a nosotros nos gustara. Adems, este atributo no es soportado por la versin 3 de Netscape Navigator

CELLSPACING (Espacio entre celdas). ste es el atributo que nos va a permitir dar una mayor separacin a las celdas; es decir, establece el grosor en pxeles del borde interior de la tabla. Cuandos ms pxeles le pongamos, ms grueso ser este borde. Y si no me creis, slo tenis que echarle un vistazo a los ejemplos de abajo. interior de pxeles

Espacio 1

interior de pxel

Espacio 3

interior de pxeles

Espacio 5

interior de pxeles

Espacio 15

CELLPADDING (Espacio interior de la celda). Como su traduccin indica, este atributo establece el espacio que habr alrededor del texto o imgen que se halla en la celda. Mediante este atributo podemos hacer que el texto no parezca enganchado a los bordes y pueda respirar un poco ms. Queda ms bonito aunque ocupa ms espacio. Y si no me te haceas a la idea, mir estos ejemplos. interior de

Relleno 1

interior de pxel

Relleno 3

interior de pxeles

Relleno 5

interior de pxeles

Relleno

15

pxeles

BORDERCOLOR (Color del borde). Volvemos con las batallitas entre Netscape y Microsoft, porque este atributo tinen un resultado diferente segn el navegador que se utilice para visualizar la pgina. En el caso de Microsoft IExplorer se vern todos los bordes (el exterior y el interior) del color que le asignemos a este atributo; en cambio, en Netcape Navigator 4.0 (la versin 3 de este popular navegador no soporta este atributo) slo se ver del color asignado el borde exterior. Para ms recochineo, existen dos atributos

http://personal1.iddeo.es/joseriki/man_tabl.htm (2 de 5) [26/11/2000 21:54:58]

Las tablas

complementarios que slo se podrn ver con IExplorer.

BORDERCOLORDARK y BORDERCOLORLIGHT, que establecern el color del borde inferior-derecha y superior-izquierda, respectivamente para el borde exterior y al contrario para los bordes interiores. La verdad es que la mejor manera de entender esto es verlo con un ejemplo, aunque, REPITO, estos dos ltimos atributos slo pueden apreciarse con Internet Explorer.
BORDERCOLOR = BLUE BORDERCOLOR = RED BORDERCOLORDARK = PURPLE BORDERCOLORDARK = LIME BORDERCOLORDARK = TEAL BORDERCOLORDARK = AQUA

Borde azul

exterior

Borde rojo

exterior

Borde verde lima

exterior y prpura

Borde aguamarina

exterior y verde-azul

Atributos de las etiquetas <TR> <TH> y <TD>

e entre todos los atributos que voy a describir a continuacin la etiqueta <TR> slo admite cuatro: BGCOLOR, BACKGROUND, ALIGN y VALIGN, ya que todo atributo que se inserte a esta etiqueta tendr vigor en toda la fila, a menos que una celda incluya el mismo atributo y este contraponga la accin del que se halle en <TR>. No, no me estoy quedando con vosotros, simplemente trato de explicar un concepto de la manera ms rebuscada posible. Lo que esto viene a decir es que si pongo el atributo BGCOLOR = BLUE a la etiqueta <TR> toda la fila tendr el color azul de fondo a menos que le ponga el atributo BGCOLOR = RED a una celda de esa misma fila, ya que los atributos en las celdas tienen preferencia sobre los que se hayan en la etiqueta de fila. BGCOLOR (Color de fondo). Pues lo mismo que el atributo BGCOLOR de la etiqueta <TABLE>. Si aplicamos este atributo a la etiquetas <TD> o <TH> prevalecer frente al color que le hayamos asignado al fondo de toda la tabla. Veamos el siguiente ejemplo.
<TABLE BGCOLOR = AQUA> <TABLE BGCOLOR = AQUA> <TR BGCOLOR = YELLOW> <TABLE BGCOLOR = AQUA> <TR BGCOLOR = YELLOW> <TD BGCOLOR = LIME>

Fondo

color aguamarina

Fila color amarillo Fondo color aguamarina

Celda verde lima Fondo color

Fila color amarillo aguamarina

BACKGROUND (Imagen de fondo). Al igual que para la etiqueta <TABLE>, BACKGROUND tiene como valor una imagen que queramos poner de fondo, pero en este caso de fondo de la celda en cuestin o de la fila que queramos. El efecto no es siempre el deseado, ya que la imagen (si no se trata de una textura) debera ser del mismo tamao que la celda o la fila de la tabla para que se viese bien, ya que al hacer el efecto de mosaico puede quedar todo como un churro. Fondo la tabla Fondo la tabla de toda Fondo de una sola fila Fondo de una sola celda

de toda

Fondo de una No se ver con

sola fila todos los navegadores

Fondo de una

sola celda

ALIGN (Alineacin). Pues eso, la alineacin horizontal del texto o la imagen en la celda. Al igual que el anterior atributo, tendr preferencia la celda frente a la fila y sta frente a toda la tabla. Recordad que los valores del atributo ALIGN pueden ser RIGHT, CENTER o LEFT. VALIGN (Alineacin vertical). A diferencia del anterior atributo, ste sirve para alinear el contenido de una celda veticalmente y para ello puede tener estos cuatro valores: TOP, MIDDLE, BASELINE y BOTTOM, segn queramos alinear el contenido arriba del todo de la celda, en el medio, a la altura del texto de la celda colindante (aunque lo vais a ver diferente segn el navegador) o abajo, respectivamente. S, s, ya s; se ve mejor con ejemplos. Pues ah tenis unos cuantos. Arriba Centrado Lnea base texto texto Abajo

HEIGHT y WIDTH (Alto y ancho): Estos dos atributos permiten establecer el tamao de la celda, si bien el alto se suele dejar que lo coja la misma celda segn pongamos ms o menos cantidad de texto e imgenes. Si deseamos que las celdas sean del mismo tamao,

http://personal1.iddeo.es/joseriki/man_tabl.htm (3 de 5) [26/11/2000 21:54:58]

Las tablas

es importante que el valor del atributo WIDTH sea en porcentaje; de lo contrario, dependiendo del tamao que necesite, se ampliar ella solita. ROWSPAN y COLSPAN (Filas combinadas y columnas combinadas). ste es uno de los atributos ms importantes de las tablas, aunque tambin es el ms difcil de utilizar, si no utilizamos un editor de HTML para tal funcin. ROWSPAN y COLSPAN tienen como valores el nmero de filas y columnas respectivamente que van a combinar en una sola. Aqu s que es necesario poner ejemplos porque sino vais a ir ms perdidos que un pulpo en un garaje.
ROWSPAN=2 ROWSPAN=3 COLSPAN=2 COLSPAN=3

Una celda que vale por 2 filas

1 2

Una celda que equivale a tres filas

1 2 3

Una celda que vale por 2 columnas 1 2

Una celda que vale por 3 columnas 1 2 3

ste sera el cdigo de esta tabla de 14 celdas que parece tan complicada. Agarraos fuerte!
<table border="1" bgcolor="White"> <tr> <td rowspan="2" valign="middle" align="center">1</td> <td colspan="3" valign="middle" align="center">2</td> <td rowspan="2" valign="middle" align="center">3</td> </tr> <tr> <td valign="middle" align="center">4</td> <td colspan="2" rowspan="2" valign="middle" align="center">5</td> </tr> <tr> <td rowspan="2" valign="middle" align="center">6</td> <td valign="middle" align="center">7</td> <td rowspan="3" valign="middle" align="center">8</td> </tr> <tr> <td valign="middle" align="center">9</td> <td valign="middle" align="center">10</td> <td valign="middle" align="center">11</td> </tr> <tr> <td colspan="2" valign="middle" align="center">12</td> <td valign="middle" align="center">13</td> <td valign="middle" align="center">14</td> </tr> </table>

La tabla ms compleja del sistema solar

1 6 12 2 4 7 9 5 10 13 11 14 8 3

Esta tabla tiene: 5 filas 1 fila: 3 celdas(1, 2, 3). La primera y la tercera se expanden en dos filas y la segunda se expande en tres columnas 2 fila: 2 celdas (4, 5). La segunda se expande en dos filas y dos columnas. 3 fila: 3 celdas (6, 7, 8). La primera se expande en dos filas y la tercera se expande en tres filas 4 fila: 3 celdas (9, 10, 11). 5 fila: 3 celdas (12, 13, 14). La primera se expande en dos columnas.

NOWRAP (Sin ajuste de lnea). Este atributo sirve para evitar que el texto de un prrafo haga un salto de lnea automtico cuando llegue al lmite derecho de la celda. Pero, claro, si no pude hacer un salto de lnea seguir y seguir y har que se ample el tamao de la celda hasta que puede que la tabla sea ms ancha que la pantalla del navegador. Prubalo y vers. Escribe este cdigo en una celda de una tabla y luego escribe una frase muy larga, con espacios entre las palabras, pero sin poner <BR> ni <P> entre medio: <TD NOWRAP> frase larga</TD> sta es una celda que no tiene puesto el Aqu no hay nada atributo NOWRAP y por eso hay varias lneas Aqu no Esta es una celda con el atributo NOWRAP puesto hay nada

Cmo y para qu utilizar las tablas

http://personal1.iddeo.es/joseriki/man_tabl.htm (4 de 5) [26/11/2000 21:54:58]

Las tablas

ues ya se han acabado los atributos. Que an querais ms? Pues ya sabis, os vais a la pgina del W3C y os echis un vistazo a los atributos para el estndar 4.0 del HTML. Pero recordad que son atributos que slo soporta en este momento el Internet Explorer, as que hasta que Netscape saque su versin 5.0 creo que con los atributos que tenis en este captulo vais sobrados. Y ahora, sin ms dilacin, vamos a ver algunos usos interesantes que le podis dar a las tablas. Como por ejemplo, uno dos tres, responda otra vez: Hacer columnas periodsticas.

o hay nada ms fcil. Primero creas una tabla de una fila con tantas celdas como columnas desees y luego pones en cada celda el contenido de la columna que deseas (AH! Y no le pongas borde). El problema es calcular cunto texto o imgenes cabr en cada celda, pero para evitar que se noten descompensadas es conveniente que tengan una alineacin vertical superior (VALIGN = TOP).Como s que eres muy observador /a, ya te habrs dado cuenta de que esta explicacin est dos en columnas, y es que as me ahorro el ejemplo. tra manera algo ms chavacana es utilizar los atributos CELLSPACING o CELLPADDING antes comentados para hacer que los bordes invisibles sean ms anchos. Aunque en este caso el resultado no es siempre el deseado, ya que se ampla por todos los lados. Para estas dos columas se ha utilizado el mtodo del punto transparente y el resultado es el ideal, modestia aparte. a solucin pasa por no poner una imagen como separador sino una lnea de color. Sabis que mediante el atributo BGCOLOR se puede cambiar el fondo de una celda, pues a la celda del medio, la que tiene el punto transparente, le ponis el fondo del color que queris y ya tenis la lnea separadora, como podis observar en estas columnas.. Bueno, yo adems le he puesto dos celdas a los lados para que haya ms espacio.

hora bien, lo que ya no es tan evidente es cmo hacer que haya mayor espacio entre las columnas o que haya una lnea vertical separadora. Vamos a verlo. Para dejar ms espacio entre dos columnas podemos crear tres celdas en vez de dos y dejar los espacios en la del centro mediante el carcter &nbsp; repetidas veces o mediante el truco del punto transparente explicado en el captulo de las imgenes. si en vez de un punto transparente ponemos una imagen que sea una lnea vertical ya tenemos una lnea separadora. Pues s, pero no. Me explico. Dicha lnea debera tener la misma longitud que las columnas que separa y para ello deberemos calcular en pxeles el tamao; pero luego resulta que no todo el mundo utiliza la misma resolucin de pantalla ni el mismo navegador y esto puede provocar que la lnea separadora se vea ms larga o ms corta que el texto circundante (Uy, qu tecnico me he vuelto de repente!).

tra de las utilidades que se le dan a las columnas es la cuadrcula, para hacer galeras de imgenes y esas cosas. Si, por ejemplo, necesitase tener una imagen a la izquierda, texto en el centro y otra imagen a la derecha, necesitara utilizar una tabla con tres columnas (una fila que tuviese tres celdas), o almenos dos, una que contuviese la imagen y el texto y la segunda la otra imagen. Este mtodo de estructura es archiconocido y superutilizado; de hecho, no exageraba al principio de este captulo cuando deca que el 99,9% de las pginas en Internet utilizan tablas. Principalmente, sta es la funcin que se le da. No obstante, hoy en da existe una nueva manera de crear estructuras que permite una precisin mxima en la colocacin de cualquier elemento, hasta el punto de que pueden estar superpuestos (por ejemplo, una imagen encima de otra). A esta nueva tecnologa se la ha denominado CSS (Cascade Style Sheets) o Hojas de Estilo en Cascada; el inconveniente es que son mucho ms fciles de utilizar las tablas que las hojas de estilo y adems las CSS slo las soportan las ltimas versiones de los navegadores (y en algunas cosas tambin la versin 3 de IExplorer). En la seccin Ayuda HTML hay un apartado dedicado a las Hojas de Estilo; aunque todava no he puesto demasiada cosa, slo por ver el ttulo ya vale la pena. Hasta aqu el sexto captulo del manual ms... ms... , bueno, del manual de HTML. Y el prximo captulo... nos esperan los marcos. Preparaos, porque es el tema ms complejo de cuantos tiene el HTML. As que despejaros antes de leer el manual. Ahora slo os falta poner a prueba vuestros recin adquiridos conocimientos realizando este sencillo test de 10 preguntas. Si consegus entre un 70% y un 90% de acierto, es que os sois un fenmeno de la naturaleza.

Este manual ha sido ntegramente elaborado con el sudor y el coco de Jos Luis Iglesias Jckle. En el caso de que queris copiarlo, pedid permiso a vuestra mam y no quitis el nombre del autor, ok? La ltima vez que se me ha ocurrido modificar este manualillo fue ayer mismo, 20/09/99

Yo me vuelvo a la seccin

http://personal1.iddeo.es/joseriki/man_tabl.htm (5 de 5) [26/11/2000 21:54:58]

Los frames

Introduccin a los frames

ueno, bueno, bueno. Aqu viene el tema estrella de este curso, no slo porque es el ms complicado, sino porque no suele estar muy bien explicado en la mayora de los manuales. As que aqu me tenis, dispuesto a echaros una manita. Lo primero de todo ser definir qu rayos es un frame (tambin conocido como panel o marco). Pues bien, las pginas de frames son una manera de mostrar el contenido de ms de una pgina web en el navegador; es decir, lo que muestra el navegador no es una sola pgina web sino dos o tres o... bueno, las que queramos. Pero, quizs, la manera de entender esto ms fcilmente es mediante un ejemplo. Veamos las dos imgenes que hay bajo estas lneas.

a imagen de la izquierda, que supongo que ya habrs reconocido, es una pgina que ocupa el 100% de la ventana del navegador; la imagen de la derecha, en cambio, muestra dos pginas web: una con un fondo azulado (que ocupa un 20% de la ventana) y otra con un fondo blanco y una imagen enorme que dice Programacin de TV (que ocupa el 80% de la ventana). Pues cada uno de los lugares donde se cargan las pginas que se visualizan en una ventana del navegador es lo que llamamos un frame; o sea, la pgina es el contenido y el frame es el contenedor. la!Cmo lo has hecho? os estaris preguntando. Pues he creado una pgina de frames en la cual defino la disposicin de las pginas y el nmero de stas que van a aparecer en la ventana. Si habis entrado en esta pgina del manual habris pasado antes por otras pginas, la mayora de ellas con frames. Por ejemplo, la pgina donde escogis el captulo al que queris ir es una pgina con dos frames (la que aparece en esta imagen), lo que pasa es que no se ve la lnea que las separa; pero si utilizis la barra de desplazamiento que hay a la derecha de la pgina, veris que slo se mueve un trozo de la pgina y no todo el conjunto. u utilidad tiene hacer una pgina de frames? Pues, poniendo como ejemplo la pgina esta tan chula de la Ayuda HTML, podris observar que podemos ver todo el contenido de esta pgina sin que desaparezca de nuestra vista el selector de captulos que hay a la izquierda. ero, desde luego, no es sta su nica utilidad. Se pueden hacer verdaderas birgueras con los frames, aunque para ello necesitaris an un poco de prctica. As que voy a cortar el rollo por lo sano y a empezar con lo que os interesa: montar una pgina de frames.

http://personal1.iddeo.es/joseriki/man_fram.htm (1 de 10) [26/11/2000 22:20:47]

Los frames

Pginas de estructura: los framesets y los frames.

as pginas de frames no tienen contenido (o, al menos, no generalmente), porque el cdigo HTML que contienen sirve slo para establecer la disposicin de las pginas en la ventana del navegador. As pues, antes de hacer una pgina de frames, es recomendable haber creado ya las pginas que aparecern en cada uno de stos frames. maginemos que deseamos crear una pgina de frames como aquella de la Programacin de TV que vimos antes. Supongamos, si no es mucho suponer, que la pgina del fondo azulado se llama menu.htm y la pgina de la imagen enorme se llama principal.htm. S? Pues sigamos. a pgina de frames que vamos a crear a continuacin se va a llamar frame1.htm, estis de acuerdo? Bueno, pues me es igual, a quien no le guste, que se compre un manual, porque esto es gratis y le pongo el nombre que quiero, faltaba ms!. Las pginas de frames tambin tienen una cabecera (aquello del <head> y el <title>, recuerdas?), pero, a diferencia de las pginas tradicionales, donde va la etiqueta <body> ahora tendremos otras etiquetas: los framesets. Veamos un ejemplo:
<HTML> <HEAD> <TITLE>Programaci&oacute; de TV</TITLE> </HEAD> <FRAMESET COLS="20%,80%"> <FRAME SRC="menu.htm"> <FRAME SRC="principal.htm"> </FRAMESET> </HTML>

on este ejemplo de cdigo HTML hemos creado nuestra primera pgina de frames; si queris probarlo slo tenis que copiar este cdigo y pegarlo en una pgina web, pero sin olvidar que las pginas menu.htm y principal.htm deben existir y estar ubicadas en el mismo directorio que la pgina de frames. ara que os aclaris un poco ms con esto de los frames, vamos a analizar las dos etiquetas principales que intervienen: <FRAMESET> y <FRAME>. La etiqueta <FRAMESET> es la que determina la estructura. Es una etiqueta de cierre obligatorio y debe llevar un atributo como mnimo, aunque ste puede ser COLS o ROWS (tambin pueden ir ambos , pero no es muy comn). i queremos que la disposicin de los frames sea en columnas, utilizaremos el atributo COLS y si deseamos que sea en filas, pues el ROWS, fcil eh?. Estos atributos tendrn como valor las dimensiones de los frames, las cuales pueden darse en pixeles, porcentaje o relativas. Por ejemplo, del cdigo anterior (COLS="20%,80%") podemos deducir que hay dos frames dispuestos en columnas; el primero ocupa el 20% de la ventana del navegador y el otro el resto, el 80%. Si quisiesemos tener 3 frames dispuestos en filas y que ocupasen respectivamente el 15%, el 50% y el resto, podramos poner este atributo: ROWS="15%,50%,35%". i queremos utilizar un tamao absoluto es mejor trabajar con pixeles; el tamao relativo sirve para no tener que pensar en tamaos y dejar que la resolucin de pantalla decida por nosotros. ??? Me parece que no me he expresado con claridad, vamos con un ejemplo. esulta que deseamos tener un pgina con dos frames en lneas; en el primero, deseo que se vea una pgina que tiene una imagen de 100 pixeles de alto. Est claro que deber dar un tamao absoluto al frame superior (es decir, en pixeles) porque, si utilizo tamaos relativos como el porcentaje, dependiendo de la resolucin de pantalla puede ser que no vea toda la imagen o que vea ms de lo que quisiera. Pero si el frame superior es de 100 pixeles, de cunto ser el inferior? No podemos utilizar un valor absoluto, porque depender de la resolucin de pantalla, ni un valor de porcentaje, por idnticos motivos; lo ideal sera poder decirle que el frame inferior ocupase el resto de ventana, y esa es la funcin del tamao relativo, simbolizado mediante el asterisco (*). QUIERO MS EJEMPLOS, POR FAVOR! Pues all van: Cdigo del Frameset Ventana resultante

http://personal1.iddeo.es/joseriki/man_fram.htm (2 de 10) [26/11/2000 22:20:47]

Los frames

<FRAMESET COLS="20%,*"> <FRAME SRC="menu.htm"> <FRAME SRC="principal.htm"> </FRAMESET>

La ventana del navegador no ocupa el 100% de la pantalla; no obstante, el frame de la izquierda es el 20% y el de la derecha representa el resto hasta completar el 100%, o lo que es lo mismo, ocupa el 80%.

<FRAMESET ROWS="100,*"> <FRAME SRC="menu.htm"> <FRAME SRC="principal.htm"> </FRAMESET>

El frame superior ocupa 100 pixeles y el inferior ocupa el resto de la ventana del navegador.

<FRAMESET ROWS="*,2*,*"> <FRAME SRC="menu.htm"> <FRAME> <FRAME SRC="principal.htm"> </FRAMESET>

Este tercer ejemplo es de una pgina de 3 frames, de los cuales el segundo ocupa el doble que los otros dos frames, independientemente del tamao de la ventana o de la resolucin de la pantalla. El frame central no carga ninguna pgina, luego no tendr contenido. Bueno, espero que no vayis muy liados, porque despus vendr el verdadero folln cuando empecemos a anidar framesets. De momento vamos a explicar la otra etiqueta importante: <FRAME>. a etiqueta <FRAME> es una etiqueta nica (que no se cierra) y debe llevar al menos un atributo, porque solita da un poco de pena. El atributo es cuestin no es otro que SRC, como las imgenes, que indica origen, y que tendr como valor el nombre y ruta de la pgina que deseamos que se cargue en ese frame. Si observamos detenidamente los ejemplos anteriores, enseguida nos percataremos de que en esta etiqueta est el nombre de la pgina que deseamos ver (y no aparece la ruta porque todo est dentro del mismo directorio). Si nos equivocamos con el nombre o la ubicacin, nos dar el tpico error de pgina no encontrada y el frame quedar vaco.

http://personal1.iddeo.es/joseriki/man_fram.htm (3 de 10) [26/11/2000 22:20:47]

Los frames

El orden de las etiquetas <FRAME> dentro de un Frameset es crucial, pero eso seguro que ya os lo habais imaginado.

Atributos
quellos atributos que aparecen en la etiqueta <FRAMESET> y que tienen que ver con el diseo del borde entre paneles tambin pueden aparecen en la etiqueta <FRAME>, aunque su comportamiento no variar en absoluto, aplicndose a todo el Frameset. Estis listos? Pues vamos pall.

Atributos de <FRAMESET>:
COLS ROWS BORDER Como ya hemos visto antes, este atributo especifica el nmero de frames dispuestos en columnas en el frameset, adems de darles el tamao. Al igual que el anterior, este atributo especifica el nmero de frames dispuestos en filas en el frameset, adems de darles el tamao. Mediante este atributo podemos dar un grosor (en pixeles) al borde ese tan feo que aparece entre los paneles. La verdad es que el tamao ms indicado es casi siempre el 0, pero si queris ver algo chavacano y cutre patatero, probad con un tamao 30.

BORDERCOLOR Adems de poder cambiar el tamao del borde, tambin podemos cambiar el color de ste, pero si ya de por s el color gris queda mal, ya me diris cmo va a quedar un verde esmeralda!. El color se pone igual que con los dems atributos
BORDERCOLOR=color

FRAMEBORDER Este atributo estaba pensado para que el usuario le pusiese borde o no a los frames; si el valor era 1 llevaba borde y si era 0, no lo llevaba. Hoy en da, si queremos que no se vea el borde, deberemos poner FRAMEBORDER=0. FRAMESPACING Aunque parezca mentira, incluso poniendo los atributos BORDER y FRAMEBORDER a 0, todava quedaba una pequea franja entre los frames, una franja del color del fondo por defecto del navegador. Si deseamos que no haya tal franja, simplemente usaremos FRAMESPACING=0.

Atributos de <FRAME>:
SRC Este es el atributo ms importante, pues en el va el nombre dela pgina que deseamos cargar. Si no aparece este atributo, se cargar el panel vaco, con el color de fondo por defecto del navegador. Si como valor de SRC ponemos simplemente unas comillas vacas (""), se ver el contenido de la carpeta en la que se encuentra la pgina de los frames. Los frames deben llevar un nombre para poder decirle al navegador en qu frame quiero cargar una pgina. Este nombre se pone en este atributo y, a ser posible, debera estar en minsculas y sin espacios ni smbolos raros. Este atributo determina el espacio a ambos lados del frame. Por defecto, el margen derecho e izquierdo de un frame suele ser de 5 pixeles, as que, mediante este atributo podemos hacer que no haya margen o que sea superior a 5.

NAME

MARGINWIDTH

MARGINHEIGHT Lo mismo que el anterior pero para los mrgenes superior e inferior

http://personal1.iddeo.es/joseriki/man_fram.htm (4 de 10) [26/11/2000 22:20:47]

Los frames

SCROLLING

Gracias a este atributo, podremos evitar que aparezca la "graciosa" y "elegante" barra de desplazamiento. Este atributo tiene 3 valores posibles: Auto Valor por defecto; la barra de desplazamiento aparecer slo si es necesario; es decir, cuando el frame no pueda mostrar todo el contenido de la pgina al mismo tiempo. No Cuando no queramos que aparezca la barra de desplazamiento; y es que, a veces, se hace un poco pesadita. Yes Cuando queramos que aparezca siempre la barra de desplazamiento, aunque no lo necesite. Quien invent este valor acababa de tomarse 6 tequilas en un concurso de tontos del bote.

NORESIZE

No s si a estas alturas os habris dado cuenta, pero si colocamos el puntero del ratn encima del borde este de los frames, nos aparecer una doble flechita que indica a los que ven la pgina que pulsando sobre l podemos hacer ms ancho o estrecho el frame. Pues bien, si utilizamos el atributo NORESIZE, as, sin ms, no aparecer esa flechita y no podrn cambiarle el tamao.

Pues aqu va un ejemplo de una pgina de frames para que veis como se aplican estos atributos:
<HTML> <HEAD> <TITLE> </TITLE> </HEAD> <FRAMESET FRAMEBORDER="0" FRAMESPACING="0" BORDER="0" COLS="170,*"> <FRAME NAME="contenido" SRC="menu.htm" SCROLLING="auto" NORESIZE> <FRAME NAME="principal" SRC="principal.htm" SCROLLING="auto"> <NOFRAMES> <BODY> <P>Esta pgina usa marcos, pero su explorador no los admite.</P> </BODY> </NOFRAMES> </FRAMESET> </HTML>

La etiqueta <NOFRAMES>
unque ya estamos ms que acostumbrados a ver frames por doquier, lo cierto es que los primeros navegadores no soportaban este tipo de etiquetas. Ciertamente, quien no tiene hoy en da un navegador que acepte frames es porque no quiere, porque son gratis. Pero todava parece que hay nostlgicos o gente que an navega con un PC 286 que no quieren desprenderse de su Mosaic 1.0, su Nescape 1.2 o su IExplorer 2.0. stos navegadores no admiten frames y si intentan cargar una pgina de stas, el navegador se hace un lo macabeo y slo aparecen signos extraos, sin poder ver nada de lo que deberan ver. Pero gracias a la etiqueta <NOFRAMES> s pueden ver alguna cosa. Esta etiqueta permite que los navegadores que no soportan frames puedan ver el contenido de la etiqueta <BODY>, aunque normalmente no se suele poner ms que una indicacin a cerca de que no se pueden ver frames con este navegador o un enlace a otra pgina que no tiene frames. Como se puede apreciar en el cdigo de ejemplo anterior, esta etiqueta es de cierre obligatorio y envuelve a la etiqueta <BODY>. Lo ms probable es que dentro de unos aos deje de utilizarse, pero mientras tanto...

http://personal1.iddeo.es/joseriki/man_fram.htm (5 de 10) [26/11/2000 22:20:47]

Los frames

Los Targets
adre ma, qu rollo! Hasta ahora hemos visto cmo hacer una pgina de frames, pero NO su verdadera utilidad. Y A QU ESTAMOS ESPERANDO? Dejad todo lo que estis haciendo y prestad mucha mucha atencin, que VOOOOOY! uando creamos dos o ms frames en una pgina, generalmente utilizamos el primero (el de la izquierda o arriba) para colocar los hiperenlaces, y el segundo, para cargar las pginas a las que llamamos mediante los hiperenlaces. As pues, podemos decir que tendremos una pgina origen y una o ms pginas destino. Que conste que no digo que sta sea la nica posibilidad, pero desde luego es la ms comn. Si tenis presente mi web, quizs recordis la seccin Ficha Personal o Libro de Visitas; en ambas secciones aparece un frame a la izquierda que sirve para ir a cualquiera de las dems secciones de mi pgina. o primero que debemos hacer para crear frames de destino es ponerles un nombre. Si recordis, en el apartado de los atributos hablbamos de un atributo de la etiqueta <FRAME> que se llamaba NAME; pues ste es el encargado de contener el nombre del frame. Recordad que este nombre no es el de la pgina, sino el del frame donde se cargarn las pginas. Vamos con uno de esos ejemplos tan fciles de entender. Creamos una pgina que ser la que se cargar en el frame origen; la llamaremos "menu.htm". Luego crearemos otra pgina, a la que llamaremos "provisional.htm", que ir provisionalmente en el frame destino. Bajo estas lneas veremos el aspecto que tendrn ambas pginas:

menu.htm

provisional.htm

a estn creadas? Pues vamos con la pgina de frames que las contendr. A esta pgina de frames la llamaremos frames00.htm y a los dos paneles les llamaremos origen (el de la izquierda) y destino (el de la derecha). Por supuesto, el nombre que les pongis depende de vosotros, pero no pongis nombres raros, porque luego os liaris. Los paneles que crearemos sern en dos columnas, del 20% la priemra y el resto la segunda. Este ser el cdigo y el resultado es la imagen que hemos visto antes (pulsa aqu para echarle un vistazo):

http://personal1.iddeo.es/joseriki/man_fram.htm (6 de 10) [26/11/2000 22:20:47]

Los frames

<HTML> <HEAD> <TITLE>Mi primer frame </TITLE> </HEAD> <FRAMESET COLS="20%,*"> <FRAME NAME="origen" SRC="menu.htm"> <FRAME NAME="destino" SRC="provisional.htm"> <NOFRAMES> <BODY> <P>Esta pgina usa marcos, pero su explorador no los admite.</P> </BODY> </NOFRAMES> </FRAMESET> </HTML>

enga, que ya queda menos. Ahora toca la parte que no conocis. Habris visto que en la pgina menu.htm hay varios hiperenlaces, pues se trata de que al pulsar sobre cada uno de estos hiperenlaces se cargue la correspondiente pgina en el frame de destino. Para ello tan slo debemos hacer los hiperenlaces como siempre hasta ahora, con la etiqueta <A HREF="...">, pero adems deberemos aadir un nuevo atributo llamado target, cuyo valor ser igual al nombre del panel destino. Por ejemplo, si queremos que el enlace llamado TV3 cargue la pgina de TV3 en el panel destino, slo deberemos poner este cdigo en la pgina menu.htm: <A HREF = "http://www.tvcatalunya.com" TARGET = "destino">TV3</A>. i en una pgina tenis muchos hiperenlaces que queris que tengan el mismo target, no es necesario que pongis a cada una de las etiquetas <A> el atributo TARGET. Existe una manera para hacer que los hiperenlaces de una pgina vayan apunten por defecto a un panel; esto se consigue con una etiqueta que se coloca en la cabecera de la pgina (dentro del <HEAD>) y que se llama <BASE TARGET="nombre_del_panel">. Se trata de una etiqueta nica, as que no ser necesario que la cerris. Si un hiperenlace no queris que se cargue donde marca esta etiqueta, deberis colocarle el atributo TARGET y ya est.

Targets especiales
asta aqu todo es bien fcil, pero no siempre desearemos que al pulsar sobre un hiperenlace la pgina se cargue en un panel determinado, sino que se cargue en otra ventana o que se olvide de los frames y ocupe toda la ventana del navegador. Esto se consigue con los targets especiales, que son cuatro: _top, _self, _blank y _parent. Como podis observar, todos empiezan por el smbolo del concatenado (el guin ese que va a ras del texto) Veamos para qu sirven.

_top:

si colocamos este valor en un target de un hiperenlace haremos que la pgina siempre se cargue en toda la amplitud de la ventana del navegador, independientemente de en el frame en que se encuentre el hiperenlace . este es el valor por defecto que tienen los targets; es decir, si no colocamos un target en un hiperenlace, el efecto conseguido ser ste. Lo que hace es cargar la pgina en el mismo frame en que se encuentra el hiperenlace, algo muy poco frecuente, pero hay gente para todo :-) mediante este valor podremos hacer que un hiperenlace cargue una pgina en otra ventana del navegador; que s, que s, que ser como si tuviesemos abiertos dos navegadores. Es ideal para cargar pginas que el usuario slo debe echarles un vistazo rpido y luego volver a la anterior; de esta manera, slo deber cerrar la ventana y ya tendr la otra all. este es el ms complejo de explicar, porque slo se utiliza en frames enlazados, y todava no os los he explicado, as que an tendris que esperar un poquito. Sirve para cargar una pgina en el frame de nivel superior ms prximo Este frame es confundido constantemente con el _top, llegndose a utilizar uno u otro indistintamente. Paciencia; un poco ms abajo est explicado.

_self:

_blank:

_parent:

http://personal1.iddeo.es/joseriki/man_fram.htm (7 de 10) [26/11/2000 22:20:47]

Los frames

Los framesets enlazados

os framesets enlazados pueden ser de dos tipos: enlazados en la misma pgina y enlazados en ms de una pgina. Empezaremos con los primeros. Quizs deseemos crear a veces una estructura de frames en la que haya no slo filas y columnas, sino ambas combinadas; para ello necesitamos enlazar framesets. Veamos un ejemplo esclarecedor (tambin podis echar un vistazo a la seccin Direcciones de Inters, pues hay un frameset enlazado muy currado):
<HTML> <HEAD> <TITLE>Programacin TV </TITLE> </HEAD> <FRAMESET COLS="20%,*"> <FRAME NAME="origen" SRC="menu.htm"> <FRAMESET ROWS="150,*"> <FRAME NAME="superior" SRC="arriba.htm"> <FRAME NAME="inferior" SRC="contenido.htm"> </FRAMESET> <NOFRAMES> <BODY> <P>Esta pgina usa marcos, pero su explorador no los admite.</P> </BODY> </NOFRAMES> </FRAMESET> </HTML>

stras!Qu pasada!Y para qu sirve? -os estaris preguntando. Pues la respuesta es sencilla. Si el frame de la izquierda serva para hacer de men, el frame superior puede servir para hacer de submen, con enlaces entre el texto o en las imgenes que cargarn una o ms pginas en el frame inferior.En este tipo de pginas se suele recurrir a mapas de imgenes que enlazan mediante marcadores con una zona de pgina que carga en el frame inferior. Dentro de poco colocar un captulo dedicado a las imgenes mapeables, para que podis hacer cosas como las que aparecen en el apartado Glosario de Etiquetas de la seccin Ayuda HTML. Adems, no existe un lmite prctico para enlazar framesets, si bien es recomendable que no haya ms de 3 framesets en la misma pgina. En el siguiente ejemplo puede verse una pgina con 3 framesets enlazados.
<HTML> <HEAD> <TITLE>Programacin TV </TITLE> </HEAD> <FRAMESET COLS="20%,*"> <FRAME NAME="origen" SRC="menu.htm"> <FRAMESET ROWS="150,*"> <FRAME NAME="superior" SRC="arriba.htm"> <FRAMESET COLS="50%,*"> <FRAME NAME="izquierda" SRC="contenido.htm"> <FRAME NAME="derecha" SRC="logotve.htm"> </FRAMESET> </FRAMESET> <NOFRAMES> <BODY> <P>Esta pgina usa marcos, pero su explorador no los admite.</P> </BODY> </NOFRAMES> </FRAMESET> </HTML>

ale. Hasta aqu, fenomenal. Pero no es oro todo lo que reluce. Tambin los frames tienen sus limitaciones.Volvamos al ejemplo de la Programacin de TV. La pgina que se carga al principio y que consta de un frameset de dos frames, no se puede convertir por arte de mga en otra pgina en otra pgina con dos framesets, de manera que cuando pulsamos sobre uno de los enlaces del men, lo que sucede es que cargamos una nueva pgina de frames en el frame de la derecha. Esto es lo que se llama frames enlazados de pginas diferentes; es decir, una pgina de frames carga otra pgina de frames. Es entonces

http://personal1.iddeo.es/joseriki/man_fram.htm (8 de 10) [26/11/2000 22:20:47]

Los frames

cuando hablamos de niveles; pero lo mejor es que lo veamos con un ejemplo:

e puesto un recuadro de color rojo alrededor del frame de la primera imagen (pgina principal) para indicar que ah se cargar la segunda imagen (la pgina 2); el resultado es la imagen tres. Ms grfico, IM-PO-SI-BLE. Bueno, pues las imgenes 1 y 2 tienen slo un nivel y, en cambio, la imagen 3 tiene dos niveles. De esta manera, si colocamos un hiperenlace en el frame inferior izquierda (o derecha) y le ponemos un TARGET = _parent, la pgina que le digamos que se cargue lo har NO en toda la amplitud del navegador (como ocurrira en el ejemplo de un poco ms arriba, sino en la amplitud de su nivel superior, que no es otro que la zona marcada de rojo de la imagen 1. hora ya slo os queda practicar; practicar mucho. Porque con frames se pueden realizar verdaderas birgueras. Y cuando dominis el HTML, intentad estudiar un poco de Javascript y ya veris las cosas que se pueden hacer con este lenguaje y los frames. Tremendas! Pero no slo de frames vive el hombre (y la mujer), sino de muchas otras cosas y en esta geb intentar enseroslas.

La ltima paranoia de Microsoft: los inline frames

omo Microsoft siempre tiene que dar la nota, un buen da se le ocurri la "brillante" idea de de hacer un frames que se cargasen dentro de una pgina en vez de determinar la estructura. Como son parte del contenido de una pgina no van en una pgina aparte, sino dentro del BODY del documento. Eso s, este tipo de frames SLO se pueden ver con el Internet Explorer, as que los que estis viendo esta pgina con Netscape, me temo que no vais a poder ver mucha cosa.SNIF SNIF!. Este es el cdigo de un iframe:
<IFRAME SRC="index.htm" HEIGHT=250 WIDTH=350> Si no puedes ver el <I>iframe</I> <BR>es porque no ests utilizando un navegador Internet Explorer </IFRAME>

Si no puedes ver el iframe es porque no ests utilizando un navegador Internet Explorer

os iframes necesitan obligatoriamente el atributo SRC para indicar al navegador qu pgina han de cargar. Los atributos HEIGHT y WIDTH sirven para dar tamao (en porcentaje o pixeles) al iframe; si no se colocan estos dos atributos, el tamao ser de aproximadamente de 150 x 300 pixeles. Tambin se pueden utilizar los atributos NAME y SCROLLING de la misma manera que con los frames normales. El ejemplosobre estas lneas est muy bien para la gente que tiene IExplorer, pero para el resto no se ve nada claro, as que ms abajo os he puesto una imagen de cmo se ve un iframe y su cdigo:
<P><CENTER><B>Programaci&oacute;n TV<BR> </B><HR></CENTER></P> <TABLE WIDTH=100%> <TR> <TD> <P><IMG SRC="Piedra_v.gif"> <A HREF="frametv3.html" TARGET="tv">TV3</A></P> <P><IMG SRC="Piedra_v.gif"> <A HREF="http://www.telecinco.es/" TARGET="tv">Tele5</A></P> <P><IMG SRC="Piedra_v.gif"> <A HREF="frameat3.html" TARGET="tv">Antena3TV</A></P> <P><IMG SRC="Piedra_v.gif">

http://personal1.iddeo.es/joseriki/man_fram.htm (9 de 10) [26/11/2000 22:20:47]

Los frames

<A HREF="frametve.html" TARGET="tv">TVE</A></P> <P><IMG SRC="Piedra_v.gif"> <A HREF="http://www.cplus.es/" TARGET="tv">Canal+</A></P> </TD> <TD> <IFRAME SRC="provisional.htm" HEIGHT=320 WIDTH=600 NAME="tv"> Si no puedes ver el <I>iframe</I> <BR>es porque no ests utilizando un navegador Internet Explorer </IFRAME> </TD> </TR> </TABLE>

Hasta aqu el sptimo y ms difcil captulo del manual entre manuales. Y el prximo captulo... nos esperan los efectos especiales. Preparaos, porque ste tampoco se queda corto. Ahora slo os falta poner a prueba vuestros recin adquiridos conocimientos realizando este sencillo test de 10 preguntas. Si consegus entre un 70% y un 90% de acierto, es que os sois un fenmeno de la naturaleza y tal y tal.

Este manual ha sido ntegramente elaborado con el sudor y el coco de Jos Luis Iglesias Jckle. En el caso de que queris copiarlo, pedid permiso a vuestra mam y no quitis el nombre del autor, ok? La ltima vez que se me ha ocurrido modificar este manualillo fue ayer mismo, 20/09/99

Yo me vuelvo a la seccin

http://personal1.iddeo.es/joseriki/man_fram.htm (10 de 10) [26/11/2000 22:20:47]

Los efectos especiales

Introduccin a los Efectos Especiales

menudo no tenemos suficiente con con un texto interesante y unas imgenes fabulosas para llamar la atencin de los y las internautas, de manera que debemos recurrir a otros elementos: elementos animados, interactividad con la pgina, sonido, vdeo, etc. Desgraciadamente, estas posibilidades no estn al alcance de todos los usuarios, no slo porque muchas de ellas necesitan de programacin, sino porque no todos los navegadores aceptan algunas de las cosas que vamos a explicar en este captulo. entro de los efectos especiales podramos hacer dos grupos: los efectos que se consiguen con tan slo el cdigo HTML y los que necesitan de un lenguaje de programacin (Javascript, VBScript, DHTML, Java, VRML, ASP, Perl, etc.). En este captulo no vamos a comeros el coco con programacin, pues se escapa de la temtica del manual y ya hay muchas pginas en las que podis encontrar informacin al respecto; pero incluiremos algunas tcnicas sencillas para que vayis cojiendo el gustillo. Estis preparados? Pues adelante.

Sonido, Vdeo y animaciones

l sonido o msica que puede reproducir el ordenador es sonido digitalizado y se puede clasificar en dos tipos: sonido sintetizado y datos de sonido. El sintetizado se produce a travs de un reproductor sintetizador denominado MIDI (Music Instrument Digital Interface); cuando se reproduce una nota, un comando MIDI es enviado a al chip sintetizador, el cual se encarga de reproducir el sonido especfico. La unidad de medida del sonido es el el Herzio y las muestras de sonido suelen estar representadas por el kiloherzio (KHz), el cual describe la calidad del sonido. Por otro lado, el tamao de la muestra de sonido se mide en bits 8-bits o 16 bits) y determina la cantidad de informacin almacenada en cada muestra. Por ejemplo, un CD de audio suele estar grabado a 44KHz y un tamao de muestra de 16 bits, calidad calidad! ada vez es ms comn adornar una pgina con un poco de musiquilla; digo musiquilla porque es de esperar que no se reproducir el Requiem de Mozart junto a una pgina, aunque est dedicada a este ilustre compositor. El motivo es uno: el tamao del fichero.Una pgina con un fichero de sonido registrado a 44 khz. (y 16 bits) de no ms de 30 segundos puede ocupar la friolera de 2,5 megabytes, lo que significa que puede tardar en cargarse una hora o 30 minutos con suerte y una buena conexin. Afortunadamente existen 5 formatos de audio y unos cuantos ms de vdeo cuyas diferentes caractersticas nos permitirn escoger entre el ms adecuado para cada ocasin.

http://personal1.iddeo.es/joseriki/man_efec.htm (1 de 14) [26/11/2000 22:32:18]

Los efectos especiales

WAV Wave Form Audio File Format (wav)

Este formato, tambin conocido como RIFF WAVE, es el formato tpico de Windows y, desde luego, es el de mayor calidad de todos los existentes en la actualidad. De hecho, es el formato en el que se guarda una grabacin de CD, en la cual el ruido de fondo es nulo. Tiene un rango de frecuencia de 44 Khz (y 16 bits) y es el ms adecuado para registrar voz humana o polifnica. Pero tiene en gran inconveniente para utilizarlo por Internet: el tamao. Como ya hemos comentado antes, una cancin de 4 minutos puede ocupar 35 megabytes, lo cual lo hace casi intransferible (nos gastaramos ms dinero bajando el fichero a travs de Internet que comprndonos el LP en CD). Es ideal, no obstante, para ruidos, frases o palabras sueltas.

Audio Formato de gran calidad, pero no tanta como la del waves, ya que normalmente se halla Interchange comprimido. AIFF es probablemente la mejor eleccin para aquellos que trabajis con File Format (aif, aiff) varias plataformas (Mac, Unix, Windows) a la vez, ya que soporta 16-bit a 44 khz de

sonido estreo, as como sonido polifnico. No obstante, no se utiliza demasiado debido al coste del software utilizado para trabajar con este formato y la dificultad de manejo de sus tipos de compresin: MACE y ADPCM/IMA. Los fichero comprimidos mediante MACE son bastante raros, pues aunque su codificacin y decodificacin es muy rpida. la calidad es bastante penosa; el sistema ADPCM/IMA es mucho mejor, pero no s si hay reproductores para Windows.

-law Este es el formato de sonido original de las mquinas NeXt, de una calidad similar a la Format del WAV, auqnue no tan extendido como ste. Utiliza la extensin .au en los fichero y (au)

se suele pronunciar "miu-lo", aunque a veces se hace referencia a este formato como el Aka Sun Audio o el NeXt audio.

RealAudio Formato propio del plug-in RealAudio. Su calidad no est mal, aunque personalmente (rmp, ra) creo que no es ninguna birguera; eso s, est muy comprimido, lo cual lo hace muy

transportable, aunque slo puede reproducirse con el RealPlayer o RealVideo.

MIDI Formato de tabla de ondas. Los ficheros mid tienen la peculiaridad de que no contienen (mid) el sonido que se va a reproducir sino el cdigo que la tarjeta de sonido que tenemos

instalada interpretar; para ello, la tarjeta debe ser compatible MIDI (no os preocupis, hoy en da todas lo son). Como slo se guarda este cdigo, un fichero de este tipo no puede reproducir voz humana, slo los sonidos que puede crearse con una tabla de ondas. La buena noticia es que ocupa infinitamente menos espacio que cualquier otro fichero de audio. Por poneros un ejemplo, la musiquilla que estis escuchando (la de Expediente X) dura 30 segundos y ocupa slo 9 Kbs. TREMENDO!! Si no tenis conectados los altavoces, no s a qu esperis.

http://personal1.iddeo.es/joseriki/man_efec.htm (2 de 14) [26/11/2000 22:32:18]

Los efectos especiales

MPEG Y con este formato lleg el escndalo. Se trata de un formato desarrollado por el grupo (mp3) de desarrolladores Moving Picture Expert Group, el mismo que se encarg en su da de

desarrollar el formato de compresin de vdeo MPEG por capas y que hoy en da en su versin 3 (tres capas) es el que se utiliza para las pelculas de los DVD. Pues bien, este formato comprime el sonido utilizando dos estrategias: agrupacin de secuencias de sonidos y limitacin de la frecuencia de muestreo de la seal a 16 Khz. Como el umbral auditivo del ser humano est entre 20 hz y 16 khz, los sonidos que estn ms all de este umbral no los podemos percibir ni discriminar, as que este formato se los come. Lo cierto es que no se nota la diferencia de calidad con el WAVES y ocupa 10 VECES MENOS.!! Y adems puedes elegir entre diferentes niveles de compresin.
MOD Los ficheros MOD llegaron a ser muy populares en la plataforma Amiga, de manera que

(mod) migraron a otras plataformas. Al igual que los ficheros MIDI, almacenan msica o datos que intrepeta la tarjeta de sonido, pero adems puede almacenar tambin trozos digitalizados de instrumentos musicales. Para colmo, no necesita que la tarjeta sea compatible MIDI o un reproductor como el QuickTime para escuchar los sonidos en Mac, pues cualquier mquina con una trajeta de 8-bits puede reproducirlos, aunque ello implica que tambin ocuparn bastante ms espacio. La reproduccin de estos ficheros est ms pensada para plataformas Mac y Amiga (incluso Unix) que para Windows, de ah que no se haya odo hablar mucho de este formato.
Otros Luego tambin hay cosas ms raras como el formato propio de Netscape (Netscape

Packetized Audio, con las extensiones .lma o .la), el formato .snd de Amiga (y Mac) o el VOC de la SoundBlaster para ficheros de voz. Pero no creo que los llegis a utilizar nunca en vuestras pginas web (entre otras cosas, porque se necesitan plug-ins para reproducirestos ficheros). i queris ms informacin acerca de estos formatos, de cmo se produce el sonido y esas cosas interesantes que slo los entendidos dominan (bueno, yo me incluyo porque entre otras cosas son licenciado en Filologa, pero reconozco que no est al alcance de cualquiera) siempre podis buscar pginas y ms pginas que traten este tema, como por ejemplo.. http://www.lib.rochester.edu/multimed/contents.htm o http://home.sprynet.com/sprynet/cbagwell/audio.html ueno, pues ya slo falta ver como se inserta un sonido en una pgina web. Existen dos maneras, segn se dese escuchar con el Internet Explorer o con el Netscape Navigator. Afortunadamente, no son incompatibles entre ellas, de manera que podemos poner las dos para que as lo puedan escuchar todos nuestros visitantes. Eso s, cada una de las dos maneras tiene sus propios atributos y comportamiento.

Para Netscape e Internet Explorer 4.0 o superior

partir de la versin 3.2 del HTML se estableci que la etiqueta <EMBED> fuese la indicada para insertar cualquier elemento ajeno al navegador y que necesitase de un plug-in para su reproduccin. Un plug-in es un complemento diseado por la misma casa del navegador o por

http://personal1.iddeo.es/joseriki/man_efec.htm (3 de 14) [26/11/2000 22:32:18]

Los efectos especiales

terceros y que sirve para aumentar las capacidades multimedia de los navegadores. Normalmente, los navegadores incorporan una serie de plug-ins por defecto y el resto debemos instalarlos si deseamos poder visualizar animaciones de macromedia Flash, ver pginas VRML, escuchar la radio, etc. Pero de esto hablaremos ms adelante. Bueno, por dnde iba? Ah, s! Pues como iba diciendo, la etiqueta <EMBED> nos permitir insertar cualquier elemento ajeno al navegador; que este elemento lo pueda ver o no el visitante depender del plug-in que tenga instalado. a sintaxis de esta etiqueta es similar a la e una imagen, ya que necesita obligatoriamente el atributo SRC que ser igual a la ruta y el nombre del fichero de audio que deseamos reproducir. Sin embargo, a diferencia de la etiqueta utilizada para las imgenes, sta necesita que se cierre mediante </EMBED> (aunque nunca he sabido por qu, porque si no la cierras tambin funciona). Veamos un ejemplo: <EMBED SRC="xfiles.mid"></EMBED>. omo casi todas las etiquetas, la etiqueta <EMBED> tiene atributos, pero muchos de ellos no se refieren directamente al sonido sino al pequeo reproductor de audio que aparece cuando utilizamos esta etiqueta. este reproductor es conocido com el Crescendo y consta de tres botones (Play, Pause y Stop) y un control de volumen (aunque en Explorer 4.0 es diferente y slo tiene los botones de Play y Stop). Pero lo mejor es que lo comprobis vosotros mismos; aqu tenis un ejemplo. abis probado ya el cachivache este? Pues eso quiere decir que vuestro navegador no es el Explorer 3.0, porque este no os mostrara nada. Bueno, pues ahora os explico los atributos que puede llevar: tamao del reproductor, autoarranque, nmero de reproducciones seguidas, etc. Este reproductor tiene un tamao aproximado de 145 pixels de ancho por 60 de alto (medidas para Netscape). Si queremos que no se vea el control de volumen, slo tenemos que hacerlo ms corto y ya est. Pero si queremos que no se vea en absoluto, es mejor utilizar el atributo HIDDEN = TRUE. Veamos los atributos
SRC Como ya hemos indicado antes, este es el atributo en que que pondremos el nombre

del fichero de sonido que deseamos reproducir. No olvidis poner la extensin y la ruta si es necesario. Ejemplo: <EMBED SRC="cancion.wav"></EMBED>
HEIGHT Mediante estos atributos estableceremos el tamao del reproductor de audio. Para WIDTH Netscape, por defecto, creo recordar que es algo as como 32 x 32 de manera que

queda cortado por todos lados. En cambio, Explorer lo hace ms grande de lo que necesita. Vamos, que conseguir el tamao ideal para ambos navegadores se hace una tarea difcil. Ejemplo: <EMBED SRC="cancion.wav" HEIGHT=145 WIDTH=60 ></EMBED>
AUTOSTART Mediante este atributo podemos hacer que nada ms cargarse la pgina empiece a

reproducirse el sonido, lo cual nos permite ocultar el reproductor. Su valor es de TRUE o FALSE, aunque poco sentido tiene poner AUTOSTART=FALSE cuando con no poner este atributo basta. Ejemplo: <EMBED SRC="cancion.wav" AUTOSTART=FALSE></EMBED>

http://personal1.iddeo.es/joseriki/man_efec.htm (4 de 14) [26/11/2000 22:32:18]

Los efectos especiales

LOOP Este atributo nos permitir reproducir el sonido ininterrumpidamente; cuando acabe

empieza de nuevo. Desgraciadamente, slo podemos decirle si queremos que se produzca el bucle o no (LOOP=TRUE). Ejemplo: <EMBED SRC="cancion.wav" AUTOSTART=TRUE LOOP=TRUE></EMBED>
HIDDEN Si deseamos que no se vea el reproductor (porque a veces hace feo), basta con que le pongamos este atributo igual a TRUE. Eso s, no os olvidis de ponerle el atributo AUTOSTART=TRUE o tendris un sonido que no habr manera de reproducir. Ejemplo: <EMBED SRC="cancion.wav" AUTOSTART=TRUE LOOP=TRUE HIDDEN=TRUE></EMBED> ALIGN Los siguientes 4 atributos son los mismos que se le pueden poner a cualquier objeto en una pgina web. ALIGN es para alinear el reproductor respecto al texto de

alrededor. Ejemplo: <EMBED SRC="cancion.wav" HEIGHT=145 WIDTH=60 ALIGN=LEFT></EMBED>

VSPACE Al igual que para las imgenes, estos ds atributos sirven para dejar un cierto espacio HSPACE entre el reproductor y el texto cuando este primero utiliza la alineacin a la derecha

o izquierda. Ejemplo: <EMBED SRC="cancion.wav" VSPACE=5 HSPACE=10 ALIGN=LEFT></EMBED>

BORDER Este atributo slo se utiliza cuando el reproductor hace de enlace y as no se vea el

borde, como ocurre con las imgenes. Esto puede pasar cuando utilizamos el atributo PLUGINSPAGE. Ejemplo: <EMBED SRC="cancion.wav" BORDER=0 PLUGINSPAGE="http://www.macromedia.com">
NAME Al igual que ocurre con otros objetos, cuando utilizamos un lenguaje de

programacin necesitamos referirnos aestos mediante un nombre. Este nombre ir dentro de este atributo NAME. Ejemplo: <EMBED SRC="cancion.wav" NAME="sonido"></EMBED>
PLUGINSPAGE Como ya hemos indicado en la descripcin del atributo BORDER, podemos aadir

este atributo para que cuando el usuario no tenga instalado el plug-in que muestra el efecto deseado (en este caso el sonido) pueda pulsar sobre la imagen del plug-in y sta le conducir a la direccin de Internet indicada en el atributo. Ejemplo: <EMBED SRC="cancion.wav" PLUGINSPAGE="http://www.macromedia.com"></EMBED>
TYPE Por ltimo, este atributo sirve apar indicar al cliente HTTP el tipo de MIME que

estamos utilizando, lo cual es transparente para el usuario. Yo no lo he utilizado nunca y no he tenido problemas. Ejemplo: <EMBED SRC="cancion.wav" TYPE="audio/midi"></EMBED>

http://personal1.iddeo.es/joseriki/man_efec.htm (5 de 14) [26/11/2000 22:32:18]

Los efectos especiales

Para Internet Explorer 3.0

uestro querido Bill Gates siempre tiene que dar la nota, as que se le ocurri en su da utilizar un sistema diferente que el que usaba Netscape. En vez de utilizar la etiqueta EMBED utilizaba una propia llamada BGSOUND (sonido de fondo) que haca que se reprodujese un sonido de fondo, sin posibilidad de utilizar un reproductor. Los atributos que tiene son slo 2: SRC para indicarle el fichero de sonido, y LOOP para indicar el nmero de veces que deseamos que se reproduzca.; a diferencia del LOOP de Netscape, ste es igual a un nmero o a la palabra Infinite, para que se reproduzca hasta que salgamos de la pgina. Ejemplo: <BGSOUND SRC="cancion.wav" LOOP=3>

Vdeo
luego est el vdeo, aunque no se utiliza mucho debido a su elevado tamao de los ficheros. Existen 3 formatos de vdeo para Internet: AVI, MOV y MPEG. Al igual que pasa con el sonido, el formato AVI es el de mayor calidad aunque tambin el de mayor tamao de fichero: un fichero de 9 segundos puede ocupar 800 kb, as que ya me diris; adems de la calidad cuenta con la baza de ser de Microsoft, de manera que lo podemos reproducir sin problemas en el navegador. El formato MOV es el fichero del programa Quick Time, una programa de compresin de vdeo de alta calidad licenciado por Apple; es ms reducido en tamao que el AVI, pero necesita de un plu-in para poderse visualizar en el navegador. El formato MPG es el ms reducido de los tres, pero tambin el de peor calidad (aunque se ve bastante bien); lamentablemente, tambin es necesario un plug-in para verlo en el navegador o un reproductor MPEG (nuestro programa de reproduccin de DVD puede servir). aro sera que no hubiese problemas con el cdigo HTML. Como ya pasara con el sonido, para insertar vdeo tambin hay dos formas diferentes, segn se visualice con Internte Explorer 3.0 u otro (Netscape o Explorer 4.0). Para el Netscape se utiliza el mismo sistema que para el sonido, es decir, la etiqueta <EMBED>; lo nico que debemos hacer es cambiar el fichero de audio por uno de vdeo y ya est. Eso s, las dimensiones del vdeo debern ser mayores que la del reproductor de audio. Ejemplo: <EMBED SRC="manos.avi" HEIGHT=150 WIDTH=150></EMBED> ependiendo del navegador que estis utilizando para seguir este curso veris mejor o peor este vdeo. Seguro que no he acertado con el tamao y me sobra espacio, pero bueno, no es tarea fcil que digamos. Eso s, las ltimas versiones de Netscape no incorporan controles para reproducir o parar ya que se puede hacer con un simple clic de ratn o mediante el men contextual que aparece al pulsar con el botn derecho del ratn sobre el vdeo. i deseis que se pueda ver en Internet Explorer 3.0 deberis de utilizar otro sistema. La etiqueta es la misma que la de las imgenes, pero en vez del atributo SRC se utiliza el DYNSRC (origen dinmico) igual al fichero de vdeo en cuestin. Por ejemplo, <IMG DYNSRC="manos.avi" controls>. El atributo controls es para que aparezcan los controles de reproduccin (Play, Stop y control de secuencias).

http://personal1.iddeo.es/joseriki/man_efec.htm (6 de 14) [26/11/2000 22:32:18]

Los efectos especiales

Animaciones
dems de insertar sonido y vdeo, y animar las pginas con programacin (Java, Javascript, VBScript, DHTML, etc.), mediante la etiqueta <EMBED> (o la etiqueta <OBJECT> en HTML 4.0) tambin podemos insertar ficheros de animacin, muchos de los cuales permiten interactividad con el usuario. Dentro de este tipo de ficheros tenemos los de Director (.cdr), Shockwave (.swf), Flash (.fla) (todos ellos de la casa Macromedia), VRML (.wrl), etc., los cuales ocupan muy poco espacio, si bien tienen el inconveniente de que necesitan de un plug-in para poderse visualizar. A continuacin he insertado una animacin de Shockwave que slo podris ver aquello que dispongis de la ltima versin del plugin de Macromedia Flash o Shockwave (podis ir a buscarlo a su pgina, es gratis!). Probad a pasar el ratn por las zonas y a pulsar en el signo de interrogacin.

Efectos con el Texto

ay un par de etiquetas del HTML que sirven para dar adornar un poco el texto con algo de dinamismo: <BLINK> y <MARQUEE>. La primera es slo para Netscape y sirve para hacer que el texto parpadee como podis ver los que tengis ese navegador. Este es un ejemplo: <BLINK>ATENCIN!!!</BLINK>. La etiqueta <MARQUEE> es slo para Explorer, as que los usuarios de Netscape no podris vibrar con ella. Desde luego, entre las dos yo me quedo con esta segunda porque hace que el texto que contenga se desplace como si de una marquesina se tratase (como aquel salvapantallas de Windows). La forma de utilizarla es la siguiente: <MARQUEE> Texto que se desplaza </MARQUEE>. Los que estis viendo esta pgina con Netscape veris este texto esttico, pero no as los de Explorer. a etiqueta BLINK no tiene atributos, pero s la MARQUEE y bastantes, por cierto. Pero antes de empezar con estos atributos os dir que est etiqueta hace que se cree una zona alrededor del texto, zona que se puede cambiar de tamao, de color de fondo, etc. Ahora s que vamos con los atributos:
DIRECTION Indica la direccin por donde va a salir el texto: por la derecha o por la

izquierda. Ejemplo: <MARQUEE DIRECTION=LEFT>Texto desplazndose</MARQUEE>

BEHAVIOUR Indica el comportamiento del texto y hay tres posibles: el comportamiento por

defecto es el de aparecer por un lado y ocultarse por el otro; con el valor Slide el texto se desplaza hasta el otro lado y luego se queda all, esttico; con el valor Alternate el texto se desplaza de un lado al otro rebotando. Ejemplo: <MARQUEE BEHAVIOUR=ALTERNATE>Texto desplazndose</MARQUEE>

http://personal1.iddeo.es/joseriki/man_efec.htm (7 de 14) [26/11/2000 22:32:18]

Los efectos especiales

BGCOLOR Indica el color de fondo de la zona de la marquesina delimitada con los atributos HEIGHT y WIDTH. Ejemplo: <MARQUEE BGCOLOR=WHITE>Texto desplazndose</MARQUEE> ALIGN Indica la alineacin vertical respecto a la zona de la marquesina. Los valores son TOP, MIDDLE y BOTTOM. Ejemplo: <MARQUEE ALIGN=TOP>Texto desplazndose</MARQUEE> LOOP Indica el nmero de veces que realizar el desplazamiento. Ejemplo: <MARQUEE LOOP=5>Texto desplazndose</MARQUEE> SCROLLDELAY Indica el tiempo en milisegundos que tardar en aparecer de nuevo por un lado despus de desaparecer por el otro. Ejemplo: <MARQUEE SCROLLDELAY=200>Texto desplazndose</MARQUEE> HEIGHT Indica el tamao en pixels de la zona de la marquesina. Por defecto, si no se WIDTH indica el tamao, la zona ocupar el 100% de la pgina y tendr el ancho del

texto. Ejemplo: <MARQUEE HEIGHT=70 WIDTH=400>Texto desplazndose</MARQUEE>

SCROLLAMOUNT Indica la velocidad en milisegundos por caracter a la que se desplaza el texto. El

valor por defecto est alrededor de los 30 mseg/c. Ejemplo: <MARQUEE SCROLLAMOUNT=18>Texto desplazndose</MARQUEE>

Efectos con Enlaces

nteresante? Pues todava no habis visto lo mejor. Vamos a ver algunos efectos que tienen que ver con los enlaces de hipertexto. Comenzaremos con un efecto al que ya hicimos una breve alusin en el captulo de introduccin: el de cambio de pgina automtico. Si recordis lo dicho en el captulo Estructura del HTML acerca de las etiquetas de cabecera, <META>, tal vez recordis que hablamos de un atributo llamado HTTP-EQUIV="Refresh". Pues bien este atributo sirve para al cabo de un tiempo determinado se cargue la pgina que le indiquemos Dnde? Pues en el atributo CONTENT de esa misma etiqueta. Veamos un ejemplo (recordad que este cdigo debe ir en la cabecera de la pgina, eh?): <META HTTP-EQUIV="Refresh" CONTENT="15;URL=http://www.stignasi.es"> l contenido del atributo CONTENT lo podemos interpretar de la siguiente forma: despus de 15 segundos de cargarse la pgina, se cargar automticamente la pgina http://www.stignasi.es. La utilidad que puedes darle a este efecto es tan variada como la lista de novias del conde Lequio. Por ejemplo, puedes mostrar una pgina con imagen cada 5 segundos o puedes cargar una pgina que ponga "Se est cargando. Por favor, espere" y que luego cargue tu pgina. Tambin se utiliza para llevar al usuario a nuestra nueva ubicacin cuando la antigua todava existe. Si sabis de programacin,

http://personal1.iddeo.es/joseriki/man_efec.htm (8 de 14) [26/11/2000 22:32:18]

Los efectos especiales

podis crear un subrutina que compruebe el navegador que est utilizando el usuario o la resolucin de pantalla de su monitor y dirijirlo a una pgina o a otra automticamente. Y LO QUE SE OS OCURRA. tro efecto utilizado a menudo es el de hacer que desaparezca el subrayado de los enlaces de hipertexto. Para esto debemos de utilizar la codificacin de las Hojas de Estilo en Cascada. No, no os preocupis, no os har estudiaros estas especificaciones ahora. Slo tenis que insertar las 4 lneas que os indico ahora en la cabecera de vuestra pgina y ya est. Si queris saber ms sobre los atributos que se utilizan en con las Hojas de Estilo en Cascada, podis ver el apartado del mismo nombre en la seccin Ayuda HTML <STYLE TYPE="text/css"> a:link{text-decoration:none} a:vlink{text-decoration:none} </STYLE> i adems utlizamos un poquito de Javascript podremos hacer algunos truquillos para desplazarnos por nuestras pginas. Para empezar tenemos un par de secuencias que nos pueden servir para ir a la pgina anteior o a la pgina siguiente, igual que los botones de la barra de navegacin del navegador (valga la redundancia). Podemos probar a utilizar este cdigo para ir a la pgina anteriormente visitada: <A HREF="javascript:history.back()">Ir a la pgina anterior</A>, o a la siguiente, que ya habamos visitado: <A HREF="javascript:history.forward()">Ir a la pgina anterior</A>. Si no me crees slo tienes que probar a pulsar en este botn

Truquillos con Javascript y Java

enomenal, verdad? Lo de los botones queda la mar de chulo. Pues es muy fcil implementarlos, slo hace falta poner un para de etiquetas y en paz. Cuando leis el captulo sobre formularios (s, ya s que todava no lo he publicado, pero es que... estoy m ocupao, pero pronto, palabra de programador) veris que stos deben de ir dentro de una etiqueta llamada <FORM> que tiene unos atributos muy majos y que se debe cerrar para delimitar la zona del formulario. Pues bien, todos aquellos elementos que tengan a ver con los formularios van dentro de esta zona: casillas de texto, listas de elementos, botones de opcin, botones de envo, listas desplegables, etc. ara crear un botn que realice una accin determinada, basta con poner la etiqueta <INPUT TYPE=BUTTON ONCLICK="accin que realizar">, aunque est etiqueta debe estar dentro de una zona de formulario, como se puede observar en el ejemplo bajo este prrafo. Adems, tambin podemos cambiar el texto del botn mediante el atributo VALUE de la etiqueta <INPUT>. Fjate en este cdigo: CDIGO RESULTADO

http://personal1.iddeo.es/joseriki/man_efec.htm (9 de 14) [26/11/2000 22:32:18]

Los efectos especiales

<FORM> <INPUT TYPE=BUTTON VALUE="Plsame!!" ONCLICK="alert('Has pulsado el botn')" NAME="B1"> </FORM>

so s, en este caso el atributo ONCLICK slo contiene una simple sentencia de javascript, pero podramos ejecutar una funcin compleja que adorne tu pgina web simplemente llamndola desde este atributo u otro. Este truquillo parece bastante tonto, pero pensad que es interesante que podamos hacer aparecer cuadro de dilogo para informar al usuario de cualquier cosa. Veamos algun truquillo ms, pero esta vez con funciones. Las funciones que aqu os escribo las podis hacer servir sin problemas de copyright y esas cosas, al fin y al cabo, no las he inventado yo!!! AH!, no olvidis que las funciones van en la cabecera de la pgina, dentro de la etiqueta <SCRIPT> -mirad el cdigo de esta pgina si tenis dudasObjetivo Funcin para cargar una ventana del navegador, con las dimensiones que deseemos Cdigo <SCRIPT LANGUAGE="Javascript"> function ventanamarco(){ window.open('intro2.gif','ventana','height=100,width=420'); } </SCRIPT> <!--Cuerpo de la pgina--> <A HREF="javascript:ventanamarco()" TARGET="_self">Ver imagen</A> Ver imagen Ejemplo

<SCRIPT LANGUAGE="Javascript"> function BrowserInfo() { Funcin alert("Navegador: para hacer \t"+navigator.appName+"\r"+"Versin: aparecer un \t"+navigator.appVersion+"\r") cuadro de } dilogo con </SCRIPT> informacin <!--Cuerpo de la pgina--> sobre <FORM> nuestro <INPUT TYPE=BUTTON NAME="MiNavegador" navegador VALUE="Mi navegador es..." ONCLICK="BrowserInfo()"> </FORM>

http://personal1.iddeo.es/joseriki/man_efec.htm (10 de 14) [26/11/2000 22:32:18]

Los efectos especiales

Funcin para que el usuario pueda insertar texto en un cuadro de dilogo

<SCRIPT LANGUAGE="Javascript"> function MensajePersonal(){ var mensaje="Escriba aqui su mensaje"; mensaje=window.prompt("Mensaje",mensaje); if (mensaje!=null) if (window.confirm("Emitir el mensaje?")) window.alert(mensaje); else window.alert("Sin mensaje"); } </SCRIPT> <!--Cuerpo de la pgina--> <FORM> <INPUT TYPE=BUTTON NAME="Mensaje" VALUE="Emitir Mensaje" ONCLICK="MensajePersonal()"> </FORM> <SCRIPT LANGUAGE="Javascript"> una=new Image() una.src="introd1.jpg" dos=new Image() dos.src="introd2.jpg" </SCRIPT> <!--Cuerpo de la pgina--> <A HREF="m_estru.htm" ONMOUSEOVER="prim.src=dos.src" ONMOUSEOUT="prim.src=una.src"> <IMG SRC="introd1.jpg" NAME="prim" BORDER="0"></A>

Imagen RollOver (ese tipo de imagen que cambia al pasar el ratn por encima) -Slo es vlido para Javascript 1.2-

para que no os quejis, os he elaborado una lista con todos los atributos relacionados con Javascript que podis utilizar en vuestras pginas. En este tabla tambin indico en qu elementos deben o pueden ponerse. Ya slo os har falta probarlos, verdad? ATRIBUTO EMPLEO

onload ocurre cuando el navegador acaba de descargar toda la pgina o todos los frames de un frameset. Se utiliza en las etiquetas BODY y FRAMESET. onunload este evento ocurre cuando se desaparece la pgina en la que se halla incluido. Slo se usa en las etiquetas BODY y FRAMESET. onclick ocurre cuando se hace clic sobre el elemento que lo contiene. Puede ser utilizado en la mayora de las etiquetas ondblclick lo mismo que el anterior pero con doble clic. onmousedown ocurre cuando pulsamos con el puntero del ratn sobre el elemento que lo contiene. Puede ser utilizado con la mayora de las etiquetas.
http://personal1.iddeo.es/joseriki/man_efec.htm (11 de 14) [26/11/2000 22:32:18]

Los efectos especiales

onmouseup ocurre cuando dejamos de pulsar con el puntero del ratn sobre el elemento que lo contiene. Puede ser utilizado con la mayora de las etiquetas. onmouseover ocurre cuando el puntero del ratn se sita sobre el elemento que lo contiene. Puede ser utilizado con la mayora de las etiquetas. onmousemove ocurre cuando movemos el puntero del ratn por la superficie del elemento que lo contiene. Puede ser utilizado con la mayora de las etiquetas. onmouseout ocurre cuando el puntero de ratn se desplaza fuera de la superficie del elemento que lo contiene. Puede ser utilizado con la mayora de las etiquetas. onfocus ocurre cuando el elemento recibe el foco, ya sea por hacer clic con el ratn o mediante la tabulacin. Se utiliza con las etiquetas LABEL, INPUT, SELECT, TEXTAREA, y BUTTON. onblur ocurre cuando un elemnto pierde el foco, , ya sea por hacer clic con el ratn o mediante la tabulacin. Se utiliza con las etiquetas LABEL, INPUT, SELECT, TEXTAREA, y BUTTON. onkeypress ocurre cuando se ha pulsado una tecla y la hemos. Puede ser utilizado con la mayora de las etiquetas. onkeydown ocurre cuando hemos pulsado una tecla. Puede ser utilizado con la mayora de las etiquetas. onkeyup ocurre cuando hemos dejado de pulsar una tecla. Puede ser utilizado con la mayora de las etiquetas. onsubmit ocurre cuando es enviado el formulario. Slo se utiliza en la etiqueta FORM. onreset ocurre cuando un formulario es reseteado. Slo para la etiqueta FORM. onselect ocurre cuando el usuario selecciona texto en un campo de texto. Slo se utiliza con los elementos INPUT y TEXTAREA onchange ocurre cuando un elemento pierde el foco y su valor ha sido modificado desde la ltima vez que tuvo el foco. Se utiliza en los elementos INPUT, SELECT y TEXTAREA. ::.::::::::::::::.:

JAVA
rabajar con JAVA es otro cantar. Java es un lenguaje de alto nivel, compilado (bueno, semicompilado en un cdigo conocido como bytecode), con clases, ejecutable directamente en el navegador y, desde luego, complejo, aunque no tanto para quien conozca el lenguaje C++, pues Java est basado en este conocido lenguaje. Esta web no trata de ensearos a programar en Java, entre otras cosas porque yo todava estoy en paales en este lenguaje (quizs dentro de un tiempo...), as que lo nico que os ensear es cmo insertar un applet de Java en vuestra pgina.
http://personal1.iddeo.es/joseriki/man_efec.htm (12 de 14) [26/11/2000 22:32:18]

Los efectos especiales

n applet es una pequea aplicacin hecha con Java y que por su reducido tamao es fcil de cargar en el navegador. Es por este motivo y por ser multiplataforma (es decir, que se puede ejecutar en un PC con Windows, OS2, Linux, Mac, Unix, etc.) que hoy en da la Red de redes est plagada de estos pequeos programillas. Si tenis oportunidad, os recomiendo que busquis el programa AnfyJava, el cual contiene gran variedad de applets de fcil parametrizacin. Para insertar un applet se utilizan las etiquetas <APPLET> y <PARAM> que van en el cuerpo de la pgina como casi todas las dems. Veamos un ejemplo:
CDIGO <APPLET CODE=SineText.class WIDTH=450 HEIGHT=75> <PARAM NAME=Text VALUE="The EJEMPLO

Chechu's World!!!"> <PARAM NAME=Rate VALUE="3"> <PARAM NAME=Font VALUE="Arial"> <PARAM NAME=ForeGround VALUE="ff00ff"> <PARAM NAME=BackGround VALUE="ffffde"> Lo siento, pero no puedes ver este applet funcionando. Ya es hora de que te actualices el navegador, que es GRATIS! </APPLET>

Lo siento, pero no puedes ver este applet funcionando. Ya es hora de que te actualices el navegador, que es GRATIS!

mpresionante, verdad? Pues lo ms alucinante del caso es que simplemente cambiando los valores de los parmetros (el tipo de letra, la velocidad del texto, el color de la letra o el fondo o el texto) podis tener un texto que ser la envidia de vuestros y vuestras coleguis. Y lo ms chulo de este applet es que le podis cambiar la direccin del texto con slo hacer un clic sobre el cuando se est reproduciendo. Cuando se lo cuentes a Mari Puri no se lo va a creer.

Hasta aqu este captulo del manual de HTML del mejor profe que hay en Internet (s, lo s, no est bien echarse tantas flores uno mismo, pero si no lo hago yo... El prximo captulo tratar sobre Imgenes Mapeadas, pero todava no lo tengo elaborado. Paciencia. Para probar vuestros conocimientos sobre este tema deberis ir al captulo sobre las imgenes mapeadas (pero como todava no lo he creado... tendris que esperar un poquito ms). En fin, practicad creando pginas, que es la mejor manera, y si tenis dudas, ya sabis donde encontrarme. Este manual ha sido ntegramente elaborado con el sudor y el coco de Jos Luis Iglesias Jckle. En el caso de que queris copiarlo, pedid permiso a vuestra mam y no quitis el nombre del autor, ok? La ltima vez que se me ha ocurrido modificar este manualillo fue ayer mismo, 26/09/99

http://personal1.iddeo.es/joseriki/man_efec.htm (13 de 14) [26/11/2000 22:32:18]

Los efectos especiales

Yo me vuelvo a la seccin

http://personal1.iddeo.es/joseriki/man_efec.htm (14 de 14) [26/11/2000 22:32:18]

Las imgenes y las lneas horizontales

Introduccin a las Imgenes Mapeadas

o primero que voy a hacer es definir esto de las imgenes mapeadas (o clicables, como dicen algunos) para que no vayis perdidos nada ms empezar; slo faltaba. Pues bien, una imagen mapeada o mapa de imagen es una imagen con una o ms de una zona sensible que utilizaremos para enlazar otra pgina. Me parece que como definicin no es muy... buena. Probemos de otra manera. Recordis que cuando explicamos los hiperenlaces comentamos que podamos hacer que una imagen fuese un hiperenlace? Pues imaginaos que diferentes zonas de esa imagen pudiesen conducirnos a diferentes pginas. Eso es una imagen mapeada. Veamos un ejemplo: Esta imagen que tenis a la izquierda del prrafo es una imagen cualquiera (un GIF en este caso), pero tiene asociado un mapa; de esta manera, podris comprobar que haciendo clic sobre cada uno de estos personajes iremos a una pgina distinta. No s si los habis reconocido, pero son los protagonistas del la serie america Friends. Pues bien, como la biografa de estos personajes est situada en la misma pgina, he pensado que cada uno de ellos enlazar con una de las pginas de su web. Para probar, no tenis ms que pulsar sobre ellos (con cuidado, no les hagis dao, que son muy sensibles). o es fabuloso!!! Pues a esto se le llama una imagen mapeada. Hay 3 maneras de hacer una imagen mapeada, una de ellas muy sencilla (mediante cdigo HTML), otra muy complicada (mediante JAVA) y una ltima en desuso (mediante ficheros MAP). Para desarrollar un mapa de estos se utilizan dos mtodos: Client-side (del lado del cliente, o sea, nosotros) y Server-side (del lado del servidor, es decir, de nuestro Proveedor de Internet). El mtodo Client-side es el que se utiliza hoy en da en un 99,9% de las pginas, luego os comento por qu.

El mtodo Client-side
ue duda cabe de que todo aquello que podamos hacer nosotros mismos sin necesidad de programas complejos siempre acaba siendo la mejor solucin. Este es uno de los motivos de que se crease el mtodo Client-side, porque antes se utilizaba el Server-side y necesitabamos de programas ajenos al editor de HTML para crear los mapas de imagen (ficheros de extensin .map). Pero esta historia me la reservo para ms adelante. Vamos a ver en qu consiste este mtodo del lado del cliente. l mtodo Client-side se llama as porque la informacin acerca de dnde se hallan las coordenadas del mapa y a dnde apunta cada zona de ste se encuentra descrita en la pgina web, de manera que es el navegador el que se encarga de interpretar toda la informacin. La descripcin del mapa se puede encontrar en la misma pgina que la imagen mapeada o en otra pgina, aunque es preferible que siempre se encuentren en la misma para aligerar la carga de sta. Para crear un mapa debemos utilizar un par de etiquetas nuevas: <MAP> y <AREA>. a etiqueta <MAP> slo contiene un atributo, NAME, en el cual ir el nombre del mapa. De esta manera podremos tener muchos mapas en una misma pgina sin que se confundan entre ellos. Esta etiqueta es de cierre obligatorio y entre la etiqueta de inicio y la de cierre irn todas las etiquetas <AREA> que necesitemos, una por cada zona del mapa que queramos definir. La etiqueta <AREA> tiene 3 atributos obligatorios (SHAPE, COORDS y HREF) y tres ms opcionales y poco usados, debido a su incompatibilidad de dos de ellos con algunos navegadores; me refiero a los atributos TARGET, ALT y TITLE. Y como s que estis impacientes por empezar a hacer mapas, no me enrollo ms. Veamos ante todo un ejemplo de cdigo:

http://personal1.iddeo.es/joseriki/man_maps.htm (1 de 5) [26/11/2000 22:37:47]

Las imgenes y las lneas horizontales

Cdigo
<IMG SRC="friendsm.gif" BORDER=0 USEMAP="#amigos"> <MAP NAME="amigos"> <AREA SHAPE="poly" COORDS="164,72,175,60,190,67,203,96,204,129,185,128,171,96,161,77,164,73" HREF="http://friends.warnerbros.com" TARGET="_blank" ALT="Joey: Pgina principal" TITLE="Joey"> <AREA SHAPE="poly" COORDS="140,76,158,77,175,113,176,127,139,131,133,99,137,75" HREF="http://friends.warnerbros.com/cmp/poll.htm" TARGET="_blank" ALT="Fibi: Un poco de juego"> <AREA SHAPE="poly" COORDS="130,15,154,20,163,50,152,71,131,68,123,35,129,14,130,12,131,13" HREF="http://friends.warnerbros.com/cmp/stations.htm" TARGET="_blank" ALT="Ross: Estaciones" TITLE="Ross"> <AREA SHAPE="poly" COORDS="92,28,103,3,134,5,129,19,119,25,127,47,135,92,112,101,101,64,94,36,93,23" HREF="http://friends.warnerbros.com/cmp/today.htm" TARGET="_blank" ALT="Rachel: Qu pasa hoy" TITLE="Rachel"> <AREA SHAPE="circle" COORDS="73,59,27" HREF="http://friends.warnerbros.com/cmp/backstge.htm" TARGET="_blank" ALT="Chandler: El espectculo"> <AREA SHAPE="rect" COORDS="6,64,53,132" HREF="http://friends.warnerbros.com/cmp/meetstar.htm" TARGET="_blank" ALT="Monica: Conoce a las estrellas"> </MAP>

Resultado

Pues vamos a analizar y describir cada uno de los atributos que aparecen en la etiqueta <AREA>. Coged papel y boli.

SHAPE El valor de este atributo indica la forma del rea de mapa, la cual puede ser un (Forma) crculo (circle), un rectngulo (rect), un zona poligonal (poly) o un punto (point); el resto de la imagen ser la zona por defecto (default). Dependiendo de la forma de la zona, las corrdenadas sern de un tipo o de otro, como veremos en el prximo atributo, COORDS. El valor "point" no es muy utilizado (de hecho, llevo mucho tiempo haciendo y viendo pginas web y todava no lo he visto utilizar nunca) y lo nico que hace es apuntar aun pixel en la imagen, hay que tener punteria para dar con l!. La zona "default" no se suele poner, pero sirve para hacer que haya un enlace en el rea de imagen que no ha sido definida.
(Coordenadas)

COORDS El atributo COORDS contendr las coordenadas del rea definida, separadas por comas. En funcin de la forma del rea, habr ms o menos coordenadas. Circle: cuando la forma es el crculo este atributo contiene 3 nmeros: la coordenadas X eY representan el punto central de la circunferencia y el tercer nmero indica la longitud en pixeles del radio de sta. Por ejemplo:
SHAPE="circle" COORDS="73,59,27"

Rect: cuando la forma es el rectngulo este atributo contiene 4 nmeros: los dos primeros determinan las coordenadas X,Y de la esquina superior izquierda y los otros dos determinan las coordenadas X,Y de la esquina inferior derecha. Por ejemplo: SHAPE="rect" COORDS="6,64,53,132" Point: cuando la forma es el punto este atributo contiene 2 nmeros que determinan las coordenadas X,Y dentro de la imagen. Y A BUSCAR!. Por ejemplo: SHAPE="rect" COORDS="10,94" Poly: cuando la forma es el polgono este atributo contiene tantos nmeros como vrtices mltiplicado por 2; es decir, si el polgono tiene 12 vrtices, habr 24 nmeros, pues cada vrtice deber estar representado por sus coordenadas X,Y.
http://personal1.iddeo.es/joseriki/man_maps.htm (2 de 5) [26/11/2000 22:37:47]

Las imgenes y las lneas horizontales

dentro de la imagen. Por ejemplo:

SHAPE="poly" COORDS="92,28,103,3,134,5,129,19,119,25,127,47,135,92,112,101,101,64" Default: este valor del atributo SHAPE no lleva coordenadas, ya que sirve para

indicar que hacemos referencia a la zona de la imagen que no tiene ningn rea definida, es decir, el resto de la imagen Este atributo ya lo conecis muy bien, as que no har falta definirlo mucho. Slo (Hypertext deciros que funciona igual que el que se utiliza en la etiqueta <A>. Pero qu pasa Reference cuando se solapan dos o ms reas? A qu pgina iremos a parar? Pues bien, -Referencia de Hipertexto-) para este caso el orden de las etiquetas es fundamental. La etiqueta que se encuentre primero (de arriba abajo) tendr prioridad a las siguientes, as que vigilad con el orden. Por ejemplo: <AREA SHAPE="rect" HREF
COORDS="10,50,200,100" HREF="http://"chechusworld.mocosoft.com"> <AREA SHAPE="rect" COORDS="0,0,120,70" HREF="http://"pepito.com">

Estas dos rea se solapan, pero la primera funcionar toda y, en cambio, la segunda slo tendr disponible la esquina de arriba (la zona que va de 0,0 a 9,49).
(Sin referencia de Hipertexto)

NOHREF Este atributo se utiliza en substitucin del atributo HREF cuando queremos definir una zona que no tenga ningn enlace. S ya s que os estaris preguntando que con no definir el rea ya est, no? Pues no, porque a veces interesa crear un rea sin enlace que solape a una con enlace para dar una forma diferente a esta segunda. Por ejemplo, tenemos una imagen rectangular que tendr un enlace, pero en el centro de la imagen aparece un crculo y no queremos que el crculo tenga enlace, de manera que definimos primero el crculo y le ponemos el NOHREF este. ALT Este atributo es el mismo que se utiliza en las imgenes. Si recordis, una de sus caractersticas era que mostraba un titulillo con el texto cuando pasbamos el ratn por encima de la imagen. Pues bien, la idea es que haga lo mismo cuando pasa por encima del rea definida. Pero no siempre funciona. Cuando se solapan reas, parece que se encasquillen y adems funcionan en Netscape, pero no en IExplorer. Para IExplorer se utiliza otro atributo que hace lo mismo, TITLE, y parece ser que no tiene tantos problemas. Para que probis lo que os digo, fijaos en la imagen de ejemplo de antes; los que tengis Netscape veris el ttulo en algunos personajes (por ejemplo, Ross o Fibi), pero en las zonas que se solape (por ejemplo, Chandler) nada de nada. En cambio, los que tengis IExplorer veris el ttulo en los personajes Rachel, Ross y Joey, los nicos que tienen el atributo TITLE.
la zona de destino del enlace y tiene como valores el nombre del panel o aquellos cuatro valores especiales: _top, _parent, _self y _blank.

(Alternative Text -Texto alternativo-)

TARGET Si habis ledo el captulo dedicado a los frames, ya sabris para qu sirve este atributo, indica
(Destino)

TITLE Como ya hemos dicho antes, hace lo mismo que el atributo ALT, pero para el (Ttulo) navegador Internet Explorer, a partir de la versin 4.0, ya que es un atributo propio del estndar HTML 4.0. Lo que hacemos muchos programadores es poner ambos atributos a los mapas; de esta manera, se podr ver, tenga el usuario el navegador que sea. ero eso no es todo, pues a la etiqueta <IMG> de la imagen que hace de mapa hay que aadirle un nuevo atributo. Se trata del atributo USEMAP, el cual tendr como valor un texto, adivinis cul? Pues s, el nombre del mapa. Y antes del texto no debemos olvidarnos de colocar el smbolo de la almohadilla, #. Por ejemplo: <IMG SRC="friendsm.gif" BORDER=0 USEMAP="#amigos">. Si el mapa se encuentra en una pgina diferente a la que se encuentra la imagen, deberemos colocar la ruta en la que se encuentra y el nombre de su pgina antes de la almohadilla,

http://personal1.iddeo.es/joseriki/man_maps.htm (3 de 5) [26/11/2000 22:37:47]

Las imgenes y las lneas horizontales

como se aprecia en el siguiente ejemplo: <IMG SRC="friendsm.gif" BORDER=0 USEMAP="http://www.pepe.com/friends.htm#amigos">. esde luego, poner las coordenadas a las diferentes zonas de una imagen puede ser trabajo de chinos. Recuerdo cuando empec con esto del HTML que abra la imagen en un programa grfico e iba calculando las coordenadas de las zonas. Pero era una tarea muy pesada, sobre todo cuando se trataba de reas poligonales. Con la aparicin de los primeros editores de HTML se fue solucionando el problema, pues algunos de ellos incorporaban una herramienta para hacer este tipo de mapas. Pero al mismo tiempo que iban apareciendo editores, tambin aparecieron en escena programas para hacer mapas de imagen, ya fueran Client-side o Server-side. Uno de los programas ms conocidos de este tipo (y adems GRATIX!!!) es el archiconocido MapThis!; un programa sencillo de manejar y que ocupaba poco espacio. uego salieron programas como el WebImage o el MapEdit, este ltimo mucho ms sencillo y con ms opciones que el MapThis!, entre otras cosas porque est adaptado a las nuevas especificaciones del estndar HTML 4.0. WebImage, es un programa ms avanzado, pues no slo hace mapas de imagen Server-side, sino que puedes crear GIFs transparentes, retocar imgenes, aadirle texto, rotarlas y esas cosillas que tanto nos gustan. ambin tenemos opciones ms avanzadas para crear imgenes mapaedas Client-side: la programacin en JAVA. Existen programas como CoolMap que sirven para crear mapas, con la caracterstica aadida de que puedes hacer que las zonas se muevan, le aparezcan decorativos textos o reproduzcan sonidos al pasar el ratn por encima o cuando pulsamos sobre ellas. El problema, como siempre, es que el JAVA carga bastante una pgina y adems suelen ser applets en versin shareware y, si no soltamos un poco de dinerillo, aparecen anuncios por todas partes u otros problemillas.

El mtodo Server-side
uando se creo el primer el primer estndar HTML se incorpor un sistema para hacer que una imagen pudiera tener zonas sensibles que condujesen, al igual que un enlace, a otra pgina u otra parte de un documento. El sistema en cuestin, creado por el CERN pero patentado por la NCSA para su navegador Mosaic, consista en crear un fichero de extensin .map en el cual se guardaban las coordenadas del mapa. El fichero en cuestin se llamara igual que la imagen que contendra los enlaces, ya fuese sta un GIF, un JPEG o un PNG (por ejemplo, para una imagen Pepito.gif el fichero del mapa sera Pepito.map. Despus se creaba un enlace de hipertexto con la imagen en cuestin y se colgaban ambos en el servidor. Tenis ms informacin en la pgina de la NCSA on en las siguientes direcciones: http://www.ncsa.uiuc.edu/SDG/Software/Mosaic/Demo/metamap.html http://ils.unc.edu/ils/lab/tutorials/mapthis.html http://www.mediatec.com http://www.abdn.ac.uk/tools/ibmpc/mapthis/ http://www.lib.msu.edu/science/innopac/mapthis/ l mayor handicap de este sistema fue que las coordenadas no las lea el navegador, sino que cuando el usuario pulsaba sobre una de las reas, el navegador consultaba al servidor en el cual se alojaba la web, a qu pgina deba dirigirse. Claro, al principio pareca un sistema fenomenal, teniendo en cuenta que hace 7 u 8 aos no haba mucha gente en la Red de redes. Pero en el momento en que empezamos a ser muchos usuarios, surgi lo inevitable: la sobrecarga del servidor. La verdad es que estoy exagerando para justificar el cambio a la tecnologa Client-side. Tampoco es que se sobrecargase el servidor, pero desde luego iba ms despacio, pues tena que dar ms pasos. n la versin 2.0 del HTML se prob con el sistema actual, el Client-side, para evitar que se hiciese una llamada al

http://personal1.iddeo.es/joseriki/man_maps.htm (4 de 5) [26/11/2000 22:37:47]

Las imgenes y las lneas horizontales

servidor cada vez que se utilizaba uno de estos mapas. Con el mtodo Cliente ya no es necesario que vaya al servidor a preguntar nada, ya que el navegador lo interpreta todo todito. Adems, con el mtodo no se poda probar la efectividad de los enlaces en el mismo ordenador, sino hasta que no se colgaba la pgina en el servidor.Todava encuentro en algn servidor algn fichero MAP (me temo que ms por la pereza de cambiarla, que por la utilidad que tiene), pero cada vez son menos las pginas que contienen este tipo de mtodo (incluso podis encontrar pginas como http://www.glenns.org/writing/convertmaps.html que convierten los ficheros MAP al sistema Client-side). Eso s, para los nostgicos, os he puesto una imagen GIF asociada a un fichero MAP para que recordis viejos tiempos haciendo clic sobre ella.

a slo me queda deciros cmo se utiliza un fichero.map en una pgina web. Pues es sistema es similar al de aadir una imagen y ponerle un enlace de hipertexto, aunque la imagen deber llevar un atributo que le indique al navegador que debe preguntar al servidor por el destino de las zonas. Ese atributo se denomina ISMAP. Fijaos en la barra de estado del navegador cuando os movis por la imagen; s, s, no indica la pgina a la que enlaza, sino la coordenada en pixeles de la imagen). Este es un ejemplo de una imagen MAP en una pgina (si no me creis, mirad el cdigo de esta pgina):
<A HREF="friends.map"><IMG SRC="friends.gif" BORDER=0 ISMAP"></A>

Hasta aqu el noveno captulo del manual HTML ms elogiado de mi barrio (bueno, es que vivo en un barrio muy chico). El siguiente captulo se adentrar en el fascinante mundo de los formularios. No os lo perdis si queris saber cmo se hace un libro de visitas o que hacer aparecer un alista desplegable. Ahora slo os falta poner a prueba vuestros recin adquiridos conocimientos sobre los efectos especiales y las imgenes mapeadas realizando este sencillo test de 10 preguntas. Si consegus entre un 70% y un 80% de acierto, es que os ha ido la mar de bien.

Este manual ha sido ntegramente elaborado con el sudor y el coco de Jos Luis Iglesias Jckle. En el caso de que queris copiarlo, pedid permiso a vuestra mam y no quitis el nombre del autor, ok? La ltima vez que se me ha ocurrido modificar este manualillo fue ayer mismo, 11/10/99

Yo me vuelvo a la seccin

http://personal1.iddeo.es/joseriki/man_maps.htm (5 de 5) [26/11/2000 22:37:47]

Los Formularios

Introduccin
ste captulo es un poco ms complicado que los anteriores, por eso lo he dejado para el final. Bueno, tampoco quiero asustaros, porque si alguna vez habis trabajado con bases de datos la dificultad ser mnima. Los formularios son contenedores de controles (casillas de texto, casillas de opcin, listas desplegables, botones, etc.) y tiene como funcin, adems de contener estos controles, de enviar la informacin que en ellos insertemos hacia lo que se denomina un agente de proceso de informacin (el servidor de correo electrnico, el servidor web, etc.). i todava no acabis de relacionar lo que os digo con algo con cara y pies, podis ir un momento a la seccin Libro de Visitas de mi web; all podris ver las distintas formas que tienen estos controles y la utilidad que suponen para una web. Los formularios no slo sirven para que el usuario introduzca informacin propia, sino que pueden servir para facilitar el acceso a informacin o mejorar el diseo y estructura de la pgina. Pero claro, hasta que no veis las cosas que se pueden conseguir con estas etiquetas, seguiris poniendo cara de asombro y estupefaccin. ara los que no tenis ni idea de qu es una base de datos y cmo se estructura, ser mejor que os comente cuatro cosillas. Una base de datos es un sistema de almacenamiento en el que la informacin se estructura mediante lo que se denomina Campos y Registros (algunos los conoceris como tuplas). Los campos son los elementos mediante los cuales clasificamos la informacin; los registros son la informacin para cada uno de esos campos (aunque no necesariamente todos). Veamos una tabla sencillita de ejemplo: Nmero 1 2 3 Nombre Lourdes Paco Priscilo Apellido Carriada Jones Torpedete Sexo Mujer Hombre Edad Direccin 27 Matalascaas, 34 2 1 45 Trinidad av., 234 23 Bajo un puente, 78

ues bien, en esta tabla de empleados de una empresa hay 6 campos (Nmero, Nombre, Apellido, etc.) y 3 registros, por ahora. El tercer registro no tiene valor para el campo Sexo y no porque esa persona no tenga sexo, sino porque la persona que tom los datos no consider que fuese necesario (quizs no lo tena muy claro). Con esto quiero decir que en muchas tablas habr valores en blanco que el usuario introducir de forma opcional. Pero eso es algo que depender de la persona que disee la base de datos.

http://personal1.iddeo.es/joseriki/man_form.htm (1 de 11) [26/11/2000 22:47:31]

Los Formularios

La estructura de un formulario
ueno, vamos a darle un poco de caa al asunto. Para crear un formulario necesitaremos dos elementos, fundamentalmente: la etiqueta de formulario <FORM> (que es de cierre obligatorio) y las etiquetas de los controles: <INPUT>, <SELECT> y <TEXTAREA>, las dos ltimas, de cierre obligatorio. Desde luego, no slo hay 3 tipos de controles, sino bastantes ms, pero para elegir cul utilizaremos deberemos utilizar atributos de estas etiquetas. a etiqueta <FORM> determina la accin que llevar acabo el formulario y antes de su cierre debern incluirse todos los controles que deseemos utilizar en el formulario. Lo ms comn es que encontris la etiqueta <FORM> con al menos un atributo, ACTION, aunque si slo queris un formulario para incluir botones, no ser necesario poner nada ms. Pero no os preocupis, en este captulo veremos todas las posibilidades que nos brinda esta etiqueta y para ello deberemos aprender algo sobre sus atributos. Los atributos de la etiqueta <FORM> son 4: ACTION, METHOD, ENCTYPE y NAME. G ACTION es la URL del servidor de informacin que se encargar, mediante un script CGI o el protocolo SMTP, de gestionar el contenido del formulario que hemos enviado; si se omite la URL, el servidor entender que el script est ubicado en la misma direccin que la pgina del formulario. Si nuestro ISP nos lo permite (o nos lo proporciona) podremos utilizar un script CGI que se encargue de gestionar la informacin (agruparla en tablas, realizar estadsticas, enviar una pgina de confirmacin, etc.). Ejemplo: <FORM ACTION="http://personal.iddeo.es/chechusworld/cuestionario.cgi"> Por otro lado, si nuestro servidor no nos deja o simplemente no queremos complicarnos la vida con CGIs, tambin la opcin de utilizar una cuenta de correo electrnico a la que se enviarn los contenidos del formulario. Este mtodo es muy utilizado por usuarios personales, dada su fcil implementacin; el nico problema serio es que Internet Explorer 3.0 no soporta esta opcin. Ejemplos: <FORM ACTION="mailto:[email protected]?subject=Formulario"> <FORM ACTION="mailto:[email protected]"> METHOD es el mtodo HTTP/1.0 usado para enviar los contenidos del formulario al servidor que gestionar la informacin. Existen dos mtodos: GET y POST; la utilizacin de uno u otro depender de cmo trabaje nuestro servidor particular, pero ltimamente se recomienda que se utilice exclusivamente el mtodo post (de hecho, la mayora de los servidores estn migrando hacia este sistema). GET Este es el mtodo por defecto (si no se indica el mtodo se deducir que se trata de este sistema) y causa que los contenidos con los que hemos completado el formulario se aadan a la URL como si de una consulta se tratase. POST Este mtodo hace que los contenidos del formulario sean enviados al servidor en un bloque de datos mejor que como parte de una URL. Mediante este sistema se evita el exceso de caracteres en una URL (URL superlargas), lo cual suele provocar un congestionamiento del flujo de datos y, en ocasiones, la prdida de la informacin

http://personal1.iddeo.es/joseriki/man_form.htm (2 de 11) [26/11/2000 22:47:31]

Los Formularios

hacia el servidor. ENCTYPE especifica la codificacin para los contenidos del formulario. Este atributo slo se aplica cuando se utiliza el mtodo POST y, as y todo, no hay muchos valores que se puedan utilizar (por defecto, application/x-www-form-urlencoded); para informacin textual est text/plain) y cuando se trata de informacin binaria se utiliza multipart/form-data). Ejemplo: <FORM ACTION="http://personal.iddeo.es/Chechusworld/form.pl" METHOD=POST ENCTYPE="multipart/form-data"> NAME indica el nombre del formulario, pero slo se utiliza cuando se trabaja con Javascript o VBScript, pues es la manera de hacer referencia a este elemento dentro de una web. <FORM ACTION="http://personal.iddeo.es/chechusworld/cuestionario.cgi" NAME="quest">

ue conste que no os explico esto para que lo pongis en todos vuestros formularios, sino para que sepis cul es su utilidad. A la larga veris que el atributo ENCTYPE no lo utilizaris nunca y que la mayora de las etiquetas form que empleis en vuestras pginas las insertaris a partir de un cdigo que os proporcione el que ha creado el script CGI. Y es que poner nuestro propio CGI en nuestra propia web, a menudo queda en un simple prposito. or lo general, los ISP (Internet Service Providers) no permiten que sus usuarios alojen sus propios scripts CGI en su espacio web, principalmente por tres motivos: seguridad, saturacin e ingresos. No s si sois conscientes de que estos pequeos programas se ejecutan en el Sistema Operativo que abastece el servidor y si no se ha desarrollado bien el programa (que tenga un bug o un virus) podra afectar al resto de procesos que se estn ejecutando al mismo tiempo; adems, si todo el mundo que tiene una cuenta FTP en el servidor le da por ponerse un CGI, el servidor ira mucho ms lento porque debera ejecutar muchos programas a la vez. Pero la razn que no suelen dar, por lo general, es la econmica; los scripts suponen una fuente de ingresos formidable para el ISP, no slo por desarrollar el script, sino tambin por su posterior mantenimiento. Resumiendo, la estructura de un formulario ser parecida a sta: <FORM ACTION="URL" METHOD=POST> Controles y texto del formulario </FORM>

La etiqueta <INPUT> y sus controles

Bueno, bueno, bueno. Vamos a empezar con los controles bsicos. Pero antes, un par de apuntes que

http://personal1.iddeo.es/joseriki/man_form.htm (3 de 11) [26/11/2000 22:47:31]

Los Formularios

conviene que no olvidis nunca a la hora de hacer un formulario. G Todos los controles que aportan informacin (cuadro de texto, botones de opcin, listas, etc.) debern llevar obligatoriamente un atributo name que identifique el control respecto a su formulario. G Todos los formularios que contengan informacin para enviar a un servidor debern tener un botn de envo y, opcionalmente, otro de borrado. G La mejor manera de distribuir los elementos de un formulario en mediante tablas. a sintaxis de la etiqueta <INPUT> es la siguiente: <INPUT TYPE=tipocontrol NAME="nombre_control" atributos> y nunca se cierra. El atributo TYPE puede tener muchos valores distintos, cada uno de los cuales determinar el aspecto y comportamiento del control. Los dems atributos se explican ms abajo, aunque en la siguiente tabla de valores del atributo TYPE podremos saber en qu controles se pueden emplear. Tipo
TEXT
Texto

Descripcin y ejemplo Este es el valor por efecto, de manera que si no se ponen el atributo TYPE aparecer este control, la casilla de texto. Necesita obligatoriamente el atributo name y adems acepta los atributos VALUE, SIZE y MAXLENGTH.Ejemplo: <INPUT TYPE=TEXT NAME="telefono" SIZE=15 MAXLENGTH=9>

PASSWORD

Al igual que control anterior, ste tambin crea una casilla de texto, pero el contenido aparecer con una mscara de asteriscos, para que nadie pueda ver qu estamos tecleando. Por supuesto, cuando se enve la informacin al servidor no se vern estos asteriscos, sino lo que se ha tecleado. Acepta los mismos atributos que el anterior control, aunque nunca se utiliza el VALUE. Ejemplo: <INPUT TYPE=PASSWORD NAME="Cuenta" SIZE=10 MAXLENGTH=8>

CHECKBOX


Subscribirse?

Este valor crea una casilla de verificacin para indicar un valor lgico. Acepta los atributos VALUE y CHECKED. El texto que se escriba en el atributo VALUE ser el que se almacene en la base de datos, pero no ser visible para el usuario de la pgina. Ejemplo: <INPUT TYPE=CHECKBOX NAME="suscribirse" VALUE="Suscrito" CHECKED> Subscribirse?

RADIO

Varn Mujer

Este valor crea botones de opcin (radiobuttons). Este elemento siempre debe ir en grupo, y es imprescindible que el valor del atributo NAME sea idntico para todos los elementos del grupo, de lo contrario no funcionarn como tal. Acepta el atributo CHECKED. Ejemplo: <INPUT TYPE=RADIO NAME="sexo" VALUE="Hombre">Varn <BR> <INPUT TYPE=RADIO NAME="sexo" VALUE="Mujer">Mujer

http://personal1.iddeo.es/joseriki/man_form.htm (4 de 11) [26/11/2000 22:47:31]

Los Formularios

SUBMIT
Enviar Datos

Este es uno de los controles principales, pues es el que utilizar el usuario para que la informacin que ha estado rellenando sea enviada al servidor. Tiene el atributo VALUE para poner un texto al botn; si se omite este atributo, el texto del botn ser Submit Query o Enviar Consulta, segn el idioma del navegador.Ejemplo: <INPUT TYPE=SUBMIT VALUE="Enviar Datos">

RESET
Borrar Datos

Este botn sirve para restablecer la informacin original del formulario, por si queremos repetirlo. Al igual que el anterior botn, el atributo VALUE sirve para poner un texto al botn, en el que por defecto se leer Reset o Restablecer, segn el idioma del navegador.Ejemplo: <INPUT TYPE=RESET VALUE="Borrar Datos">

BUTTON

Este control slo se utiliza con programacin (Javascript o VBScript) y sirve para que se produzca una accin al pulsar sobre l. En este botn es muy importante que se aada el atributo NAME y el atributo VALUE, pues no aparece ningn texto por defecto. Adems de estos dos atributos, debe ir acompaado de un atributo manejador de evento (ver captulo 9 sobre los efectos especiales) como onClick. Ejemplo: <INPUT TYPE=BUTTON VALUE="Pulsa" NAME="A1" onClick="Func()">

IMAGE

Este control tiene el aspecto de una imagen pero sirve para lo mismo que el botn SUBMIT, enviar informacin al servidor. Adems, tambin se enva informacin acerca de las coordenadas X e Y donde se puls en la imagen. Necesita el atributo SRC para indicar la imagen y puede llevar cualquier otro atributo que haya en la etiqueta <IMG>. Ejemplo: <INPUT TYPE=IMAGE SRC="imgenviar.gif" BORDER=0>

FILE

Este control sirve para que el usuario pueda enviar un fichero al servidor. Basta que pulse sobre el botn Examinar y seleccione el fichero. Acepta los atributos SIZE y MAXLENGTH. Ejemplo: <INPUT TYPE=FILE NAME="Fichero" SIZE=10>

HIDDEN

Este valor de la etiqueta <INPUT> no crea un control; slo sirve para almacenar un valor que luego se enviar al servidor. Ejemplo: <INPUT TYPE=HIDDEN NAME="Num_Form" VALUE="Form1">

Atributos que pueden aparecer en la etiqueta <INPUT>

dems del atributo TYPE y el atributo name, prcticamente siempre presente en todos los controles, algunos controles pueden llevar otros atributos, los cuales se comportan de distinta manera segn el
http://personal1.iddeo.es/joseriki/man_form.htm (5 de 11) [26/11/2000 22:47:31]

Los Formularios

tipo de control al que acompaen. En la siguiente tabla podemos observar todas las posibilidades de combinacin. Atributo
VALUE

Descripcin y Ejemplo Este atributo tiene como valor alfanumrico, incluyendo espacios entre las palabras. Se puede utilizar en todos los controles de la etiqueta <INPUT> menos en el FILE y el IMAGE. En los controles TEXT y PASSWORD sirve para poner un valor por defecto; en los botones sirve para especificar el texto que queremos que aparezca; en la casilla de verificacin y los botones de opcin indican el valor que se enviar al servidor si se selecciona el control. Ejemplo: <INPUT TYPE=TEXT NAME="Pas" VALUE="Espaa">

SIZE

Indica el tamao de la casilla de texto en los controles TEXT, FILE y PASSWORD. Este tamao es igual al nmero de caracteres que se vern en el control, aunque despus se inserten ms; es decir, si el tamao es 10 y escribimos 15 caracteres, se enviarn los 15 pero en pantalla slo se vern los 10 ltimos. Ejemplo: <INPUT TYPE=TEXT NAME="telefono" SIZE=10>

MAXLENGTH

Indica el nmero mximo de caracteres para los controles TEXT, FILE y PASSWORD. Aunque un control tenga el atributo SIZE=20, si el MAXLENGTH=10 slo podr escribir 10 caracteres, espacios inclusive. Ejemplo: <INPUT TYPE=TEXT NAME="telefono" MAXLENGTH=9>

CHECKED

Este atributo booleano sirve para indicar que el control aparecer seleccionado por defecto. Vale tanto para las casillas de verificacin como para los botones de opcin, aunque en estos ltimos slo uno de los botones podr llevarlo. Ejemplo: <INPUT TYPE=CHEKBOX NAME="EnviarInformacin" CHECKED >

DISABLED

Este atributo slo existe para Internet Explorer (versiones 4 en adelante). Se puede aadir a cualquier control y har que permanezca inactivo hasta que mediante Javascript o VBScript se vuelva a activar. Ejemplo: <INPUT TYPE=TEXT NAME="telefono" DISABLED >

Las listas y reas de texto

as listas son uno de los elementos ms vistosos de los formularios, adems de los ms utilizados, pues no comportan que el usuario tenga que escribir, lo cual, en ocasiones, le resulta un poco pesado. Por otro lado, una lista de elementos es la mejor manera de limitar la eleccin a unos valores constantes, lo cual elimina el problema de errores tipogrficos por parte del usuario. Vamos, que las vais a utilizar ms que el cepillo de dientes.

http://personal1.iddeo.es/joseriki/man_form.htm (6 de 11) [26/11/2000 22:47:31]

Los Formularios

xisten dos tipos de listas: las listas desplegables (listas pop-up) y las listas de seleccin mltiple. Las primeras son aquellas que pulsamos sobre una flechita y slo se puede elegir un elemento de la lista; las segundas son las que se ven varios elementos y, en ocasiones, una barra de desplazamiento que nos permite acceder a los elementos que no se ven en un principio. Estas segundas pueden ser de seleccin nico o mltiple; es decir, que si mantenemos pulsadas la tecla Control o la de maysculas podemos seleccionar ms de un elemento. Aqu tenemos unos ejemplos para ir entrando en materia. Tipo de lista Listas desplegables Ejemplo
Seleccione un elemento de la lista

Descripcin Lista pop-up que se desplega cuando se pulsa sobre la flechita de la derecha Lista de cuatro elementos y ningn elemento oculto

Coches Deportes Ordenadores Cmics

Listas de seleccin nica

Coches Deportes Ordenadores Cmics

Lista de 3 elementos visibles y alguno oculto, de manera que aparece una barra de desplazamiento vertical Lista de 3 elementos visibles y alguno oculto y en la que se puede seleccionar ms de un elemento

Lista de seleccin mltiple

Coches Deportes Ordenadores Cmics

omo podis ver en estos ejemplos, el ancho de las listas ser el mismo que el del elemento ms largo de sta. Y ya no se me ocurre ningn ejemplo ms, por el momento; pero no os preocupis si no os queda claro todava, porque ahora viene lo mejor: Cmo montar un lista de estas. Y veris que sencillito que es. as listas se crean mediante la etiqueta <SELECT>, la cual, a diferencia de la etiqueta <INPUT>, es de cierre obligatorio. Cada uno de los elementos que componen la lista irn precedidos por otra etiqueta denominada <OPTION>, que es de cierre implcito, as que si la queris cerrar o no es cosa vuestra. El texto que pongamos en esta etiqueta <OPTION> ser el que se enviar como valor del campo de la lista. Comencemos por un ejemplo para una lista desplegable: Cdigo <SELECT NAME="aficciones"> <OPTION>Coches <OPTION>Deportes <OPTION>Ordenadores <OPTION>Cmics </SELECT> Ejemplo Pulse sobre la flechita que aparece a la derecha de la lista para que sta se desplegue y muestre sus elementos

Coches

http://personal1.iddeo.es/joseriki/man_form.htm (7 de 11) [26/11/2000 22:47:31]

Los Formularios

uando se crea una lista de este tipo, por defecto aparece el primer elemento de la lista. Una vez pulsamos sobre la flechita negra que aparece a la derecha de la lista, se despliega sta y aparecen todos los elementos que contiene. En el momento en que pulsemos sobre uno de ellos, la lista se volver a encoger (para pasar el tiempo, podis cronometrar cunto tarda en encogerse la lista; es de lo ms entretenido!). ara evitar que el usuario deje el valor por defecto en la lista (en este caso, Coches) los desarrolladores de pginas web suelen utilizar el truquillo de poner un texto informativo como primer elemento de Seleccione un elemento de la lista lista, aunque despus deben de poner una condicin (con cdigo Javascript) para que el usuario seleccione obligatoriamente un elemento de lista. Imagnate que te enva el usuario el formulario con el campo Aficiones=Selecciona un elemento de la lista! ueno, vamos con el otro tipo de lista. Para crear una lista de seleccin slo es necesario incluir un atributo ms a la etiqueta <SELECT>: el atributo SIZE, que ser igual al nmero de elementos que deseemos que se vean en la lista, o mejor dicho, el nmero de filas de la lista. Si el valor del atributo SIZE es inferior al nmero de elementos de la lista, automticamente aparecer una barra de desplazamiento vertical que nos permitir ir al resto de elementos. Cdigo <SELECT NAME= "aficiones" SIZE=4> <OPTION>Coches <OPTION>Deportes <OPTION>Ordenadores <OPTION>Cmics </SELECT> <SELECT NAME= "aficiones" SIZE=3> <OPTION>Coches <OPTION>Deportes <OPTION>Ordenadores <OPTION>Cmics </SELECT> Ejemplo
Coches Deportes Ordenadores Cmics

Descripcin

Lista de seleccin de un solo elemento y sin barra de desplazamiento

Coches Deportes Ordenadores Cmics

Lista de seleccin de un solo elemento y con barra de desplazamiento

luego estn las listas en las que se permite seleccionar ms de un elemento, al igual que seleccionamos varios ficheros en Windows, mediante las teclas Control o Shift, Control para selecciones discontinuas y Shift para selecciones continuas. Para ello tan slo debemos aadir un nuevo atributo a los dos existentes, el atributo MULTIPLE. Veamos un ejemplo: Cdigo Ejemplo Descripcin

http://personal1.iddeo.es/joseriki/man_form.htm (8 de 11) [26/11/2000 22:47:31]

Los Formularios

<SELECT NAME= "aficiones" SIZE=5 MULTIPLE> <OPTION>Coches <OPTION>Deportes <OPTION>Ordenadores <OPTION>Cmics <OPTION>Cromos <OPTION>Leer </SELECT>

Coches Deportes Ordenadores Cmics Cromos Leer

Lista de seleccin de ms de un elemento y con barra de desplazamiento. Si quieres ver como se comporta, utiliza la teclas Control o Shift para selecionar ms de un elemento de la lista.

ero aqu no acaba todo, porque todava falta por comentar dos atributos ms que pueden ir dentro de la etiqueta <OPTION>. Se trata de los atributos VALUE y SELECTED. Cuando se enva el contenido del formulario al servidor, el valor del campo de la lista es el texto que aparece junto a la etiqueta <OPTION>, que es el mismo texto que aparece en la lista. Sin embargo, no es necesario que el texto que aparece en la lista sea el que se enva al servidor, aunque si deseamos que sea as, deberemos utilizar el atributo value. Pongamos un ejemplo: esulta que tengo un formulario en el que la informacin est en ingls para que la pueda leer cualquier persona en la Red; de esta manera, en la lista de aficiones aparecen los elementos en ingls, pero deseamos que la informacin sea enviada en castellano a nuestra base de datos. Para ello podemos crear una lista como la que se observa a continuacin: Cdigo <SELECT NAME= "aficiones" SIZE=4> <OPTION VALUE="Coches">Cars <OPTION VALUE="Deportes">Sports <OPTION VALUE="Ordenadores">Computers <OPTION VALUE="Cmics">Comics </SELECT> Ejemplo Descripcin Lista de seleccin de un elemento con valores de envo diferentes de los valores de la lista

Cars Sports Computers Comics

i luego, adems, deseamos que aparezca un elemento de la lista seleccionado por defecto, tan slo tenemos que aadir a la etiqueta <OPTION> el atributo SELECTED. Si se trata de una lista de seleccin mltiple podremos poner este atributo en ms de una etiqueta <OPTION>. Por si hay alguna duda despus de ver este ejemplo, lo mejor es que lo probis vosotros mismos. Cdigo <SELECT NAME= "aficiones" SIZE=4> <OPTION VALUE="Coches">Cars <OPTION VALUE="Deportes" SELECTED>Sports <OPTION VALUE="Ordenadores">Computers <OPTION VALUE="Cmics">Comics </SELECT> Ejemplo Descripcin

Cars Sports Computers Comics

Lista de seleccin de un elemento con el segundo elemento de la lista seleccionado por defecto.

ues hasta aqu las listas. Ahora vamos a hablar un poco de lo que son las reas de texto. Las reas de texto son aquellos elementos, tan presentes en todos los formularios, que sirven para que el usuario pueda escribir hasta que le entren calambres. Son zonas muy utilizadas para comentarios y
http://personal1.iddeo.es/joseriki/man_form.htm (9 de 11) [26/11/2000 22:47:31]

Los Formularios

descripciones y se crean mediante la etiqueta <TEXTAREA>. Aqu va un ejemplo: Cdigo <TEXTAREA ROWS=3 COLS=20 NAME="comentarios"> </TEXTAREA> Ejemplo Descripcin rea de texto de 20 caracteres de ancho y 3 filas.

omo habis podido ver en el ejemplo sobre estas lneas, la etiqueta <TEXTAREA> utiliza, adems del ya conocido atributo name, los atributos que determinarn el tamao de este elemento en la pantalla (COLS y ROWS), pero nunca la longitud del texto que ir que los usuarios escribirn dentro. El atributo COLS determina el nmero de caracteres que se vern a lo ancho y ROWS determina el nmero de filas que se vern. Eso s, os recomiendo que antes de colgar la pgina le echis un vistazo en los dos navegadores ms utilizados, Netscape y IExplorer, pues no mantienen el mismo tamao en pantalla, ya que Internet Explorer utiliza letra ms pequea que Netscape. Cdigo <TEXTAREA ROWS=3 COLS=20 NAME="comentarios"> </TEXTAREA> <TEXTAREA ROWS=3 COLS=20 NAME="comentarios"> </TEXTAREA> Ejemplo Descripcin rea de texto de 20 caracteres de ancho y 3 filas en Microsoft Internet Explorer rea de texto de 20 caracteres de ancho y 3 filas en Netscape Navigator

esa no es la nica diferencia entre ambos elementos entre formularios. Desde luego, no creo que se os haya pasado por alto que en Netscape aparece una antiesttica barra de desplazamiento horizontal adems de la vertical. Cuando escribis en ambos navegadores encontraris otra diferencia notable: cuando escribimos en el rea de texto del Explorer se hacen saltos de lnea automticamente al llegar al lmite de ancho; en cambio, en Netscape necesitamos pulsar la tecla ENTER para hacer el cambio de lnea, de lo contrario, la lnea ser tan larga como queramos. Este fenmeno se puede controlar mediante un atributo denominado WRAP, el cual tiene 3 posibles valores: OFF, VIRTUAL y PHYSICAL. G El valor OFF es el que tiene por defecto Netscape, as que si queremos que Explorer se comporte como Netscape, slo tenemos que ponerle ese valor. G El valor VIRTUAL es el que tiene por defecto Explorer, pero cuando se reciben los datos slo aparecern los saltos de lnea donde se hay pulsado ENTER. G El valor PHYSICAL tiene el mismo resultado en pantalla que el VIRTUAL, pero con la diferencia que lo que tal como aparece en el rea de texto ser como se enviar al servidor. Cdigo Ejemplo Descripcin

http://personal1.iddeo.es/joseriki/man_form.htm (10 de 11) [26/11/2000 22:47:31]

Los Formularios

<TEXTAREA ROWS=3 COLS=20 NAME="comentarios" WRAP=VIRTUAL> </TEXTAREA>

rea de texto que va a hacer un salto de lnea automtico

ara acabar, falta comentar que podemos hacer que aparezca un texto simplemente escribindolo entre la etiqueta de apertura y la de cierre. Eso s, no se le puede poner formato, pues cualquier etiqueta que se incluya dentro de este espacio ser tratada como texto y no como cdigo. Yo ya os he advertido, que conste. Cdigo <TEXTAREA ROWS=3 COLS=20 NAME="comentarios" WRAP=VIRTUAL> Me parece que... </TEXTAREA> Ejemplo Descripcin

Me parece que...

rea de texto con texto dentro por defecto.

Hasta aqu el dcimo y ltimo captulo del manual de HTML por autonomasia..., digo por Jos Luis Iglesias. A partir de ahora me dedicar en cuerpo y alma a crear el tan esperado manual de Hojas de Estilo en Cascada, pero no esperis que est hasta el mes de abril o mayo. Ya slo os falta poner a prueba vuestros recin adquiridos conocimientos realizando este sencillo test de 10 preguntas. Si consegus entre un 70% y un 90% de acierto, es que habis hecho los deberes como buenos estudiantes que sois.

Este manual ha sido ntegramente elaborado con el sudor y el coco de Jos Luis Iglesias Jckle. En el caso de que queris copiarlo, pedid permiso a vuestra mam y no quitis el nombre del autor, ok? La ltima vez que se me ha ocurrido modificar este manualillo fue ayer mismo, 16/1/2000

Yo me vuelvo a la seccin

http://personal1.iddeo.es/joseriki/man_form.htm (11 de 11) [26/11/2000 22:47:32]