texto del manual de html_mejorado2010

8/7/2019 TEXTO DEL MANUAL DE HTML_MEJORADO2010

1/64


2/64

MATERIAL PROGRAMACION EN INTERNET

LIC. ZARA YUJRA CAMA

2

1. Una pgina bsica

El principio esencial del lenguaje HTML (HyperText Markup Language) es el uso de las

etiquetas (tags). Funcionan de la siguiente manera:

Este es el inicio de una etiqueta. Este es el cierre de una etiqueta.

Las letras de la etiqueta pueden estar en maysculas o minsculas, indiferentemente. Porclaridad, se usarn en este manual slamente las maysculas

Lo que haya entre ambas etiquetas estar influenciada por ellas. Por ejemplo, todo eldocumento HTML debe estar entre las etiquetas y :

[Todo el documento]

El documento en s est dividido en dos zonas principales:

El encabezamiento, comprendido entre las etiquetas y El cuerpo, comprendido entre las etiquetas y

Dentro del encabezamiento hay informacin del documento, que no se ve en la pantallaprincipal, principalmente el ttulo del documento, comprendido entre las etiquetas y . El ttulo debe ser breve y descriptivo de su contenido, pues ser loque vean los dems cuando aadan nuestra pgina a su bookmark (o agenda de

direcciones).

Dentro del cuerpo est todo lo que queremos que aparezca en la pantalla principal (texto,imgenes, etc.)

Por tanto, la estructura queda de esta manera:

Ttulo de la pgina

[Aqu van las etiquetas que visualizan la pgina]


3/64



3

Antes de crear nuestra primera pgina, unas consideraciones sobre el texto: Cuandoescribimos en el documento el texto que queremos que aparezca en la pantalla, veremosque ste se acomoda a ella, sin que tengamos que pulsar el retorno del carro. Si queremos

separar el texto en distintos prrafos debemos usar la etiqueta

, (que no tiene sucorrespondiente etiqueta de cierre
).
El texto puede tener unas cabeceras, comprendidas entre las etiquetas y , y , etc. (hasta el nmero 6), siendo el nmero indicativo del tamao. El tamaomayor es el correspondiente al nmero 1. Puedes experimentar en el ejemplo que sigue,cambiando el nmero para comprobar el efecto que se logra.

Una etiqueta muy interesante es la de centrado y (no la soportantodos los navegadores, aunque s la mayora de ellos). Nos centra todo lo que est dentro deella, ya sea texto, imgenes, etc.

Tambin tenemos los separadores (horizontal rules), que se consiguen con la etiqueta (no existe la correspondiente de cierre). Con ella se obtiene una raya horizontal tanancha como la pantalla, y con la apariencia de estar embutida sobre el fondo, como sepuede observar a continuacin:

Ejemplo prctico: Guardar como Pag1.html

En el procesador de texto copiamos lo siguiente:

Mi pagina del Web - 1

Primera pagina Esta es mi primera pagina, aunque todavia es muy sencilla. Como el

lenguaje HTML no es dificil, pronto estare en condiciones de hacercosas mas interesantes.

Aqui va un segundo parrafo.

(Repsese lo dicho en la pgina de portada en Mtodo de trabajo, acerca del procesador detextos y cmo cargar el documento en el navegador)

Las lneas en blanco y las indentaciones del texto se han puesto para mayor claridad, perono son necesarias. De hecho, podra estar todo en una sola lnea. Lo importante es el ordencorrecto de las etiquetas. Por cierto, una etiqueta puede estar anidada dentro de otra. Vaseen el ejemplo cmo lo est la etiqueta dentro de la etiqueta . Es muyimportante, en estos casos, que las etiquetas de inicio y de cierre vayan en el ordencorrecto, pues de lo contrario se produciran errores.


4/64



4

Obsrvese adems la falta de los acentos. Se hablar ms adelante sobre el motivo de ello.

Guardamos el fichero en el procesador de textos con el nombre de mipag1.html y lo

cargamos en el navegador. Este ser el resultado.

Habr un fichero distinto para cada captulo; conviene crear un directorio especfico e irlosguardando en l, para poder repasar lo aprendido, aparte de que pueden ser necesarios paraejecutar otros ejemplos prcticos.

2. Dando forma al texto.-

Como hemos visto en el ejemplo del captulo anterior, cuando queremos poner un texto sinninguna caractersca especial, lo ponemos directamente. Unicamente, la separacin entreprrafos (dejando una lnea en blanco) la conseguimos con la etiqueta

.

Si queremos separar los prrafos, o cualquier otra cosa, pero sin dejar una lnea en blanco,usamos una etiqueta parecida
(break, o romper). Tampoco tiene etiqueta de cierre.

Si queremos obtener mltiples lneas en blanco no basta con repetir la etiqueta

, sinoque hay que combinarla con la etiqueta
. As por ejemplo, si queremos obtener cuatrolneas en blanco, pondramos:

Con lo que se obtiene:

Al escribir el texto, si ponemos ms de un espacio en blanco entre dos palabras observamosque el navegador slo reconoce uno de ellos. Si queremos forzarle a que lo haga, debemosponer el cdigo "" (non-breaking space).

Para destacar alguna parte del texto se pueden usar:

y para poner algo en negrita (bold).

y para poner algo en cursiva (italic).

Otra etiqueta interesante es y . El texto que se encuentre entre ella estarpreformateado, es decir que aparecer como si hubiera sido escrito con una mquina deescribir, con una fuente de espaciado fijo (tipo Courier). Adems se respetarn los espaciosen blanco y retornos del carro, tal como estaban en nuestro documento HTML (lo cual noocurre normalmente, como hemos visto anteriormente). Es muy apropiada paraconfeccionar tablas y otros documentos similares.

Con la etiqueta y conseguimos tambin que el texto tenga un tamao menor yla apariencia de los caracteres de una mquina de escribir (typewriter). La diferencia con la


5/64



5

anterior es que no preformatea el texto, sino que nicamente cambia su apariencia.

La etiqueta y se utiliza para destacar una cita

textual dentro del texto general. Este prrafo est escrito entre ambas etiquetas. Obsrveselos mrgenes a ambos lados.

En las frmulas matemticas puede interesar poder escribir ndices y subndices, que seconsiguen con las etiquetas y respectivamente. As, porejemplo:

m2 se consigue de la siguiente manera: m2vx se consigue con: vx

A menudo nos interesar presentar las cosas en forma de listas. Podemos escoger entre tres

tipos distintos:

1.Listas desordenadas (no numeradas)2.Listas ordenadas (numeradas)3.Listas de definicin.

Las listas desordenadas (unordered lists) sirven para presentar cosas que, por no tener unorden determinado, no necesitan ir precedidas por un nmero. Su estructura es la siguiente:

Una cosa

Otra cosa Otra ms Etc.

Es decir, toda la lista est dentro de la etiqueta y , y luego cada cosa vaprecedida de la etiqueta (list item). El resultado de lo anterior es el siguiente:

Una cosaOtra cosaOtra ms

Etc.

Se puede anidar una lista dentro de otra. Por ejemplo:

Mamferos Peces

Sardina Bacalao


6/64



6

Aves

Que dara el siguiente resultado:

MamferosPeces

SardinaBacalao

Aves

Las listas ordenadas (ordered lists) sirven para presentar cosas en un orden determinado. Suestructura es muy similar a la anterior. La diferencia estriba en que en el resultadoaparecer automticamente un nmero correlativo para cada cosa.

Primera cosa Segunda cosa Tercera cosa Etc.

El resultado es:

1.Primera cosa

2.Segunda cosa3.Tercera cosa4.Etc.

Al igual que las listas desordenadas, tambin se pueden anidar las listas ordenadas.

El tercer tipo lo forman las listas de definicin. Como su nombre indica, son apropiadaspara glosarios (o definiciones de trminos). Toda la lista debe ir englobada entre lasetiquetas y . Y a diferencia de las dos que hemos visto, cada rengln de la listatiene dos partes:

1) el nombre de la cosa a definir , que se consigue con la etiqueta (definition term)2) la definicin de dicha cosa, que se consigue con la etiqueta (definitiondefinition)

Una cosa a definir

La definicin de esta cosa Otra cosa a definir

La definicin de esta otra cosa


7/64



7

Su resultado es:

Una cosa a definir

La definicin de esta cosaOtra cosa a definir

La definicin de esta otra cosa

Comentarios no visibles en la pantalla

A veces es muy til escribir comentarios en el documento HTML sobre el cdigo queescribimos, que nos pueden servir para recordar posteriormente sobre lo que hicimos, y queno queremos que se vean en pantalla.

Esto se consigue encerrando dichos comentarios entre estos dos smbolos:

Ejemplo:


En el procesador de textos copiamos:


Mis aficiones Sin un orden particular, mis aficiones son las siguientes:

El cine El deporte

Natacion Baloncesto

La musica

La musica que mas me gusta es (en orden de preferencia):

El rock El jazz La musica clasica

Guardamos el fichero de texto con el nombre Pag2.html y lo cargamos en el navegador.


8/64



8

3. Enlaces con otras pginas

La caracterstica que ms ha influido en el espectacular xito del Web (o tela de araa) ha

sido, aparte la de su carcter multimedia, la posibilidad de unir los distintos documentosrepartidos por todo el mundo por medio de enlaces hipertexto.

Estructura de los enlaces

En general, los enlaces tienen la siguiente estructura:

yyy

donde xxx es el destino del enlace (Obsrvese las comillas).yyy es el texto indicativo en la pantalla del enlace (con un color especial y generalmente

subrayado)

Tipos de enlaces

Vamos a distinguir cuatro tipos de enlaces:

1.Enlaces dentro de la misma pgina2.Enlaces con otra pgina nuestra3.Enlaces con una pgina fuera de nuestro sistema4.Enlaces con una direccin de email

1. Enlaces dentro de la misma pgina

A veces, en el caso de documentos (o pginas) muy extensos, nos puede interesar dar unsalto desde una posicin a otra determinada.

En este caso, lo que antes hemos llamado XXX, es decir, el destino del enlace, en este casoel sitio dentro de la pgina a donde queremos saltar, se sustituye por #marca (la palabramarca puede ser cualquier palabra que queramos). Lo que hemos llamado antes YYY es lapalabra (o palabras) que aparecern en la pantalla en color (en forma de hipertexto). Suestructura es, entonces:

YYY

Y en el sitio exacto a donde queremos saltar, debemos poner la siguiente etiqueta:

Por ejemplo, si quiero saltar desde aqu a la pantalla final, pongo la siguiente etiqueta:

Pulsa para ir al final

Que resulta como: Pulsa para ir al final (Puedes comprobar cmo salta a la pantalla final)


9/64



9

Y en el final del documento he puesto esta otra etiqueta:

2. Enlaces con otra pgina nuestra

Puede ser que tengamos una sola pgina. Pero lo ms frecuente es que tengamos variaspginas, una inicial (o principal) y otras conectadas a ella, e incluso entre ellas mismas.

Supongamos que queremos enlazar con la pgina creada en el ejemplo del captulo anterior,que la hemos llamado Pag2.html. En este caso, simplemente sustituimos lo que hemosllamado XXX (el destino del enlace) por el nombre del fichero:

Ejemplo del captulo 2

Que resulta como: Ejemplo del captulo 2 (Puedes comprobar cmo carga esa pgina)

Si queremos que vaya a un sitio concreto de otra pgina nuestra en vez de ir al principio dela pgina, adonde va por defecto, en ese sitio tenemos que colocar una marca (vase laseccin anterior), y completar el enlace con la referencia a esa marca.

Lo veremos con el siguiente ejemplo: Quiero poner un enlace desde aqu al captulo 4, peroa un sitio concreto, donde he puesto la marca . Entonces laetiqueta tiene que ser: Capitulo 4 Que resulta:Capitulo 4 (Obsrvese cmo al pulsar el enlace salta al captulo 4, pero no al comienzo,

sino a donde yo quiero que lo haga) .

Una observacin importante: Estoy suponiendo que la pgina en la que estoy escribiendoesta etiqueta y la otra pgina a la que quiero saltar estn en el mismo directorio. Porquepudiera ocurrir que he organizado mi sitio del Web con un directorio principal, y otrossubdirectorios auxiliares. Si la pgina a la que quiero saltar est, p. ej. en el subdirectoriosubdir, entonces en la etiqueta tendra que haber puesto "subdir/mipag2.html".

Y a la inversa, si quiero saltar desde una pgina a otra que est en un directorio anterior, enla etiqueta tendra que haber puesto "../mipag2.html". Esos dos puntos hace que se dirija aldirectorio anterior. Obsrvese que se debe utilizar el smbolo / para indicar los

subdirectorios, y no este otro \, que es propio nicamente de Windows.

Si nos queremos evitar todas estas complicaciones, podemos tener todo junto en un nicodirectorio, pero esto tiene el inconveniente de que est todo ms desordenado, y sean msdifciles de hacer las futuras modificaciones.

3. Enlaces con una pgina fuera de nuestro sistema

Si queremos enlazar con una pgina que est fuera de nuestro sistema (es decir, que est enun servidor distinto al que soporta nuestra pgina), es necesario conocer su direccin


10/64



10

completa, o URL (Uniform Resource Locator). El URL podra ser, adem s de la direccinde una pgina del Web, una direccin de ftp, gopher, etc.

Una vez conocida la direccin (o URL), lo colocamos en vez de lo que hemos llamadoanteriormente xxx (el destino del enlace). Si queremos enlazar con la pgina de Netscape(cuyo URL es: http://home.netscape.com/), la etiqueta sera:

Pgina inicial de Netscape

Que dara como resultado: Pgina inicial de Netscape

Es muy importante copiar estas direcciones correctamente (respetando las maysculas yminsculas, pues los servidores UNIX s las distinguen)

4. Enlaces con una direccin de email

En este caso, sustituimos lo que se ha llamado antes xxx (el destino del enlace) por mailto:seguido de la direccin de email. La estructura de la etiqueta es:

Texto del enlace

Un ejemplo de esto est al final de la pgina principal de este manual. Podra haber puesto:

Comentarios a Francisco Arocena

Que resultara:


Pero hay algunos navegadores que no reconocen este tipo de enlace, y lo veran de estamanera:


y no tendran ningn medio de conocer la direccin de email. Por lo tanto, es ms seguroponer algo as como: Comentarios a Francisco Arocena en [email protected] Que resulta:

Comentarios a Francisco Arocena en [email protected]

Es decir, es conveniente, por la razn dicha anteriormente, poner tambin en el texto delenlace la direccin de email.




11/64



11


Mis paginas favoritas

Estas son mis paginas favoritas:

Netscape
Microsoft
Yahoo!


4. Imgenes

La etiqueta que nos sirve para incluir imgenes en nuestras pginas del Web es muy similara la de enlaces a otras pginas, que hemos visto en el captulo anterior. La nica diferenciaes que, en lugar de indicar al programa navegador el nombre y la localizacin de undocumento de texto HTML para que lo cargue, se le indica el nombre y la localizacin deun fichero que contiene una imagen.

La estructura de la etiqueta es:

Con el comando IMG SRC (image source, fuente de la imagen) se indica que se quierecargar una imagen llamada imagen.gif (o el nombre que tenga).

Dentro de la etiqueta se pueden aadir otros comandos, tal como ALT

Con el comando ALT se introduce una descripcin (una palabra o una frase breve)indicativa de la imagen. Este comando, que en principio se puede omitir, es en beneficio delos que accedan a nuestra pgina con un programa navegador en forma de texto slo. Yaque no son capaces de ver la imagen, por lo menos pueden hacerse una idea sobre ella. Perono es slo por esto. Hay casos, como veremos ms adelante, en los que se utiliza unaimagen como enlace a otra pgina.

Si se omitiera este comando, los que utilizan dichos navegadores no podran de ningunamanera acceder a esas pginas.


12/64



12

Con respecto a la localizacin del fichero de esa imagen, se puede decir aqu lo mismo queen el captulo anterior referente a los enlaces. Si no se indica nada especial, como en el casoque se ha expuesto, quiere decir que el fichero imagen.gif est en el mismo directorio que el

documento HTML que estamos escribiendo. Si no es as, se siguen los mismos criterios quelos indicados para los enlaces.

Al igual que una pgina con la que queremos enlazar puede estar fuera de nuestro sistema,(en cuyo caso haba que indicar su URL o direccin completa), podemos cargar una imagenque no est en nuestro sistema siguiendo el mismo mtodo, es decir, indicar en la etiquetael URL completo de la imagen. Aunque esto no es muy aconsejable, pues alargarainnecesariamente el tiempo de carga de nuestra pgina.

Las imgenes deben estar guardadas en un formato de fichero especial llamado GIF. (Haytambin otro formato ms avanzado, del que se hablar ms adelante). Este formato GIF

almacena las imgenes con un mximo de 256 colores, en forma comprimida. Hayprogramas grficos (como el Paint Shop Pro para el PC, o el Graphic Converter para elMac) que nos permiten guardar las imgenes en este formato, adems de cumplir otrasmuchas tareas de manipulacin de las mismas.

Un aspecto muy importante a tener en cuenta es el tamao de las imgenes, pues unaimagen grande supone un fichero grande, y esto puede resultar en un tiempo excesivo decarga, con el consiguiente riesgo de que quien est intentando cargar nuestra pgina secanse de esperar, y desista de ello.

Para elegir la posicin de la imagen con respecto al texto hay distintas posibilidades. La

ms sencilla es colocarla entre dos prrafos, con un titular a un lado. Los navegadores msactuales (como el Netscape Navigator y el Microsoft Internet Explorer) permiten que eltexto pueda rodear a la imagen (como se ver ms adelante, en el Captulo 8).

De momento nos vamos a limitar a escoger la posicin del titular con respecto a la imagen(si es que queremos ponerle un titular, claro est). Se puede poner arriba, en medio o abajodel lado de la imagen. Para ello se aade el comando ALIGN a la etiqueta, de la siguientemanera:

Titular alineado arriba

Titular alineado arriba

Titular alineado en medio

Titular alineado en medio

Titular alineado abajo

Titular alineado abajo

Vanse las extensiones de Netscape de esta etiqueta en el Captulo 8


13/64



13

Otra posibilidad muy interesante es la de utilizar una imagen como enlace a otra pgina.Para estos casos se utilizan generalmente imgenes pequeas (iconos), aunque se puede

usar cualquier tipo de imagen.

Segn vimos en el captulo anterior, la estructura general de un enlace es:

yyy

donde xxx era el destino del enlace e yyy el texto del enlace (o ms generalmente hablando,lo que aparece en la pantalla como el enlace; en el captulo anterior era un texto, y en steva a ser una imagen). En este caso sustituimos xxx por el nombre del fichero de la pgina ala que queremos acceder. Y en lugar de yyy ponemos la etiqueta completa de la imagen(que queda as englobada dentro de la etiqueta del enlace)

Como ejemplo vamos a utilizar la imagen (hombre.gif) para acceder al ejemplo prcticodel captulo 2 (Pag2.html):

que da como resultado:

Pulsando la imagen comprobamos cmo efectivamente enlaza con la pgina deseada.Obsrvese adems que la imagen est rodeada de un rectngulo del color normal en losenlaces. Si no se desea que aparezca ese rectngulo, hay que incluir dentro de la etiqueta de

la imagen el atributo BORDER=0, es decir:

que da como resultado:

Posicionando el cursor sobre esta ltima imagen, comprobamos que acta tambin comoenlace aunque carezca del rectngulo de color. Esto puede resultar ms esttico, pero secorre el riesgo de que el usuario no se d cuenta de que la imagen sirve de enlace.

Tambin podemos utilizar una imagen para enlazar con otra imagen. En este caso

sustituimos xxx (el destino del enlace) con el nombre del fichero de la imagen a la quequeremos acceder e yyy (lo que aparece en pantalla como el enlace) por la etiquetacompleta de la imagen que queremos que aparezca en la pantalla como el enlace de la otra.

Supongamos que queremos enlazar con la imagen isla.gif por medio de esta otra imagen:(casa.gif):


14/64



14

Por ltimo, otra posibilidad es la de utilizar un texto para enlazar con una imagen. En estecaso sustituimos xxx (el destino del enlace) con el nombre del fichero de la imagen a la quequeremos acceder e yyy (lo que aparece en pantalla como el enlace) por el texto.

Supongamos que queremos enlazar con la imagen isla.gif por medio del texto "un parasotropical":

un paraso tropical

Que da como resultado: un paraso tropical

Se pueden capturar las imgenes que aparecen en pantalla, con objeto de guardarlaspermanentemente en nuestro disco duro. En los navegadores ms actuales se hace pulsandosobre la imagen con la tecla derecha del ratn, con lo que se obtiene un men en el que est

la posibilidad de guardar la imagen.

Un tipo de imgenes del que se hace abundante uso y que sirven para mejorar lapresentacin de la pgina son los iconos, botones, barras separadoras, etc. A pesar de sutamao o forma, son imgenes como cualquier otra.

Por ejemplo, vamos a capturar en la Pgina Principal el botn dorado que est junto alnombre de cada captulo. Colocamos el puntero del ratn justo en el botn, y pulsamos latecla derecha.

Si nuestro navegador implementa esta caracterstica, aparece un men en el que est la

posibilidad de guardar esta imagen (bgold.gif). Lo hacemos, en el mismo directorio en elque va a estar nuestro documento. Para utilizarlo en el comienzo de una lnea, escribiramosen el sitio correspondiente:

Esta linea esta debajo de una barra separadora dorada.

Que resulta:Esta linea esta debajo de una barra separadora dorada.

Para ampliar el tema de este captulo, ver:Captulo 8: Alineacin y dimensionado de imgenesCaptulo 9: Formato de las imgenes


15/64



15

Ejemplo prctico: Pag4.html

Primeramente es necesario capturar las tres imgenes que se han utilizado en este captulo:isla.gif, hombre.gif y casa.gif y guardarlas en el mismo directorio en el que se guardar elfichero de texto que se va a crear a continuacin, junto con los de los captulos anteriores.



Mi pagina del Web

Esta es mi pagina del Web. No es muy extensa, pero tiene todos loselementos basicos. Espero que os guste. Poco a poco le ire anadiendomas cosas interesantes.

Mis aficiones

Mis paginasfavoritas Un lugar ideal para mis vacaciones

Guardamos el fichero de texto con el nombre Pag4.html y lo cargamos en el navegador.Este es el resultado.

5. Caracteres especiales

Existen algunas limitaciones para escribir el texto. Una de ellas es debido a que lasetiquetas se forman como un comando escrito entre los smbolos "". Por tanto, si se

quisieran escribir estos caracteres como parte normal del texto, dara esto lugar a unaambigedad, ya que el programa navegador podra interpretarlos como el comienzo o finalde una etiqueta, en vez de un carcter ms del texto.

Para resolver este problema, existen unos cdigos para poder escribir estos caracteres yotrosrelacionados con las etiquetas.

< para < (less than, menor que)> para > (greater than, mayor que)& para & (ampersand)" para " (double quotation)


16/64



16

Como se ve, estos cdigos empiezan siempre con el signo & y acaban siempre con ;

De una manera similar, existen cdigos para escribir letras especficas de distintos idiomas.Hay muchos de ellos, pero, lgicamente, los que ms nos interesan son los propios delcastellano (las vocales acentuadas, la y los signos y )

Los cdigos de las vocales acentuadas se forman comenzando con &, seguido de la vocalen cuestin, seguido de la palabra acute (aguda) y terminando con el signo ;

para la para la para la para la

para la para la para la para la para la para la

El resto de los cdigos son:

para la para la

para la para la para para

Todo esto, que como se ve es muy laborioso, puede parecer intil ya que si escribimosnuestro texto sin hacer ningn caso de estas convenciones, escribiendo las letras acentuadasdems signos directamente, es muy posible que el resultado lo veamos correctamente ennuestro navegador, pero nunca podremos estar seguros que les ocurra lo mismo a todos losque accedan a nuestras pginas con otros navegadores distintos.

En la prctica, el problema no es tan grave, pues los programas editores de HTML suelentener la posibilidad de escribir los cdigos automticamente (como es el caso del utilizadopara confeccionar este manual, HotDog Pro).

Incluso si se escribe en un procesador de textos de forma manual, se puede escribir el textoen una primera etapa de forma normal y luego aplicarle algn de los programas que hacenla conversin adecuada.


17/64



17

Ejemplo prctico:Guardar como Pag5.html

Como ejercicio de este captulo vamos a sustituir en el ejemplo prctico del captulo

anterior (Pag4.html) las vocales acentuadas por sus correspondientes cdigos.

Quedar de esta manera:

Mi pgina del Web - 4

Mi pgina del Web

Esta es mi pgina del Web. No es muy extensa, pero tiene todos loselementos bsicos. Espero que os guste. Poco a poco le iraadiendo ms cosas interesantes.

Mis aficiones

Mis pginasfavoritas Un lugar ideal para mis vacaciones


6. Los estndares del HTML

Hasta hace poco, la ltima versin oficial del HTML era la HTML 2.0. Cumpla su funcinperfectamente, pero muchos usuarios del HTML queran tener un control mayor sobre susdocumentos, tanto en el formateo del texto como en la apariencia de la pgina.

HTML 3.0

Mientras tanto, Netscape, que era en esa poca el lder indiscutible de los navegadores,introduca con cada nueva versin etiquetas y atributos no contemplados en el estndaroficial,con gran escndalo de algunos.


18/64



18

Debido a su amplia difusin y aceptacin, otros navegadores intentaban copiar esasinnovaciones, pero debido a que Netscape no especificaba completamente sus nuevasetiquetas, los resultados no eran siempre los deseados. Todo ello provocaba una gran

confusin, y numerosos problemas, cuando los autores utilizaban estos elementos ycomprobaban que no funcionaba como queran en otros navegadores.

Por esa poca, el comit de trabajo del HTML de la IETF, propuso un borrador de un nuevoestndar, el HTML 3.0 que inclua numerosas y tiles mejoras. Pero debido a que eraexcesivamente extenso y ambicioso, los navegadores slo utilizaban una pequea parte delnuevo estndar, lo que produca an mayor confusin y por lo que acab finalmente siendoabandonado.

HTML 3.2

Cada vez era ms evidente la necesidad de un nuevo estndar que fuera aceptado por todos.Se form otro comit, el W3C, apoyado por los principales vendedores de software (entreello, IBM, Microsoft, Novell, Netscape, Sun, etc.). El nuevo estndar ha sido desarrolladodurante todo el ao 1996 por el W3C con el sobrenombre de Wilbur, y finalmente, enEnero de 1997 ha sido aprobado como el HTML 3.2 .

El HTML 3.2 es totalmente compatible con el estndar anterior, pero incorpora muchas delas innovaciones de los navegadores comerciales (Netscape y Explorer principalmente),tales como tablas, applets, texto que bordea las imgenes, etc., aunque no todas, como porejemplo los frames.

Se puede consultar la documentacin oficial del HTML 3.2 en Introducing HTML 3.2, peroes ms manejable y prctica la presentada en Wilbur - HTML 3.2, donde se pueden ver condetalle las distintas etiquetas, e incluso obtener una versin off-line del nuevo estndar.

Primer borrador pblico del HTML 4.0

En Julio de 1997 se ha presentado el primer borrador pblico del prximo estndar oficialHTML 4.0 (que tiene el nombre clave de Cougar). En l se incorporan las especificacionessobre tablas, frames, scripts, hojas de estilo, accesibilidad por distintos medios, einternacionalizacin (incluyendo el uso de Unicode, en lugar del Latin-1).

Este estndar propuesto representa un gran avance con respecto a los anteriores. Existe uncomunicado de prensa de la W3C. El borrador, que es muy extenso, se puede consultar enesta direccin.

Los estndares y este manual

En los captulos anteriores a ste (HTML esencial) se han explicado, en lneas generales,las etiquetas que cumplan con la anterior norma HTML 2.0. En los captulos que siguen sehablar de las etiquetas incorporadas al nuevo estndar, ms algunas otras que no lo estn,pero que son implementadas por los navegadores ms importantes (Netscape y Explorer).


19/64



19

Ejemplo de etiqueta no estndar: el parpadeo

Slo es implementada por Netscape y caus en su da un gran escndalo:

ESTE TEXTO PARPADEA

Que resulta:

ESTE TEXTO PARPADEA

Debe usarse prudentemente, para cosas realmente urgentes.(No es implementada por el Explorer)

Separador horizontal

Un ejemplo de ampliacin de una etiqueta que ha sido recogida en el nuevo estndarHTML 3.2 es la del separador , con las que se puede modificar su apariencia yposicionamiento:

Ocupa el 75% de su anchura (width) normal.

Tiene una anchura de 300 pixels.

Se puede alinear a la izquierda:

O a la derecha:

Se puede variar su espesor:

Tambin se puede hacer que sea una lnea slida, no embutida sobre el fondo:

Tamao de las fuentes

En el nuevo estndar HTML 3.2 se admite el atributo SIZE para cambiar el tamao de lasfuentes:

Texto en tamao 5


20/64



20

Texto en tamao 5

Texto en tamao 6

Texto en tamao 6

Los tamaos del texto van, de menor a mayor, del 1 al 7. El tamao normal (o tamao base)es el 3. Se puede tambin cambiar relativamente con respecto a este tamao normal.

Texto algo menor

Texto algo menor

Texto algo mayor

Texto algo mayor

Texto an mayor

Texto an mayorSe puede cambiar incluso el tamao base para toda la pgina, poniendo al comienzo deldocumento (a continuacin de la etiqueta ) esta etiqueta que cambiara el tamaobase de 3 a 5:

Tipos de las fuentes

Hay otro atributo para cambiar el tipo de fuentes empleada. No est recogido en el estndarHTML 3.2, pero s es implementado por las ltimas versiones del Netscape y del Explorer.

Los navegadores utilizan por defecto un tipo de fuentes, generalmente Times New Roman,y que el usuario puede cambiar por otro tipo en la configuracin de su navegador. Si as lohace, todas las pginas que cargue tendrn el texto escrito en esa nueva fuente escogida.

Pero al confeccionar una pgina del Web, su autor puede forzar a que el texto adopte un

determinado tipo de fuentes, distinto del que tiene configurado el usuario. Pero, para queesto ocurra, el usuario debe tener instalado en su disco duro ese tipo de fuentes (y ademscon el mismo nombre). Si no lo tiene instalado, entonces ver el texto con la fuente porefecto de su navegador.

Esto se consigue con el atributo FACE="Nombre de la fuente". Por ejemplo, para forzar aque el texto adopte la fuente Verdana, pondramos:

Este texto se ver con la fuente Verdana

Que resulta:


21/64



21

Este texto se ver con la fuente Verdana

(quien no tenga instalada esta fuente, no notar nada de particular)

Se pueden indicar en el atributo varias fuentes distintas, separadas por una coma. Si falla laprimera, entonces el texto adopta la forma de la segunda, y as sucesivamente. Si fallantodas, el texto adopta entonces la fuente por defecto. As, por ejemplo:

Este texto se ver con la fuente Impact, o en su defectocon Arial

Que resulta:

Este texto se ver con la fuente Impact, o en su defecto con Arial (quien no tengainstaladas ninguna de las dos fuentes, tampoco notar nada de particular).

Por lo dicho anteriormente, es decir, que este atributo no es estndar y que depende ademsde las fuentes instaladas en el ordenador del usuario, no es conveniente basar el diseo deuna pgina exclusivamente en un tipo de fuente. Hay que tener en cuenta que el tamao delas letras vara mucho de una fuente a otra (vase los ejemplos empleados de fuentesVerdana e Impact).

Vase en el Captulo 7 sobre el color en las fuentes.

Ejemplo prctico

Vamos a aumentar el tamao de la fuente de las frases "Mis aficiones" y "Mis pginasfavoritas" del ejemplo prctico del captulo anterior (Pag5.html). Para ello, cargamos estefichero y englobamos dichas frases dentro de la etiqueta:

y

Guardamos este fichero con el nombre Pag6.html y lo cargamos en el navegador paravisualizarlo.

7. Fondos

Se puede cambiar el fondo de dos maneras distintas:

1.Con un color uniforme2.Con una imagen

Fondos con un color uniforme

Se consigue aadiendo el comando BGCOLOR a la etiqueta (situada al principiodel documento), de la siguiente manera:


22/64



22

donde:

XX es un nmero indicativo de la cantidad de color rojoYY es un nmero indicativo de la cantidad de color verdeZZ es un nmero indicativo de la cantidad de color azul

Estos nmeros estn en numeracin hexadecimal. Esta numeracin se caracteriza por tener16 dgitos (en lugar de los diez de la numeracin decimal habitual). Estos dgito son:

0 1 2 3 4 5 6 7 8 9 A B C D E F

Es decir, que en nuestro caso, el nmero menor es el 00 y el mayor el FF. As, por ejemplo,el color rojo es el #FF0000, porque tiene el mximo de rojo y cero de los otro dos colores .

Los colores primarios son:

#FF0000 - Rojo#00FF00 - Verde#0000FF - Azul

Otros colores son:

#FFFFFF - Blanco#000000 - Negro#FFFF00 - Amarillo

Para hacer un color ms oscuro, hay que reducir el nmero de su componente, dejando losotros dos invariables. As, el rojo #FF0000 se puede hacer ms oscuro con #AA0000, o anms oscuro con #550000.

Para hacer que un color tenga un tono ms suave (ms pastel), se deben variar los otros doscolores hacindolos ms claros (nmero ms alto), en una cantidad igual. As, podemosconvertir el rojo en rosa con #FF7070.

Podemos hacer nuestros propios experimentos, pero si desea, existen pginas del Web enlas que se pueden elegir los colores directamente, como por ejemplo en:

Background Colors

Colores del texto y de los enlaces

Si no se variasen los colores habituales del texto y de los enlaces (negro y azul,respectivamente), podra ocurrir que su lectura contra un fondo oscuro fuese muydificultosa, o incluso imposible, si el fondo fuese precisamente negro o azul.


23/64



23

Para evitar esto, se pueden escoger los colores del texto y de los enlaces, aadiendo a laetiqueta (si se desea) los siguientes comandos:

TEXT - color del textoLINK - color de los enlacesVLINK - color de los enlaces visitadosALINK - color de los enlaces activos (el que adquieren en el momento de serpulsados)

Los cdigos de los colores son los mismos que los que se han visto anteriormente.

La etiqueta, con todas sus posibilidades, sera:

Ejemplo.

Cambio del color de una parte del texto

El comando TEXT explicado anteriormente (que va englobado dentro de la etiqueta) cambia el color de la totalidad del texto de la pgina.

Tanto el Netscape Navigator 2, como el Microsoft Explorer soportan una etiqueta de colorde la fuente con la que se puede cambiar slo una parte del texto:

Este texto es de color rojo

Que resulta:

Este texto es de color rojoFondos con una imagen

El fondo de una pgina puede ser tambin una imagen, ya sea en formato GIF o JPEG. Estaimagen se repite por toda la pgina, de una manera anloga al tapiz de Windows. Laestructura de la etiqueta es:

o bien:

No todos los navegadores soportan este formato


24/64



24

Se pueden aadir tambin a esta etiqueta todos los comandos para cambiar los colores deltexto y de los enlaces, vistos anteriormente. Esto es imprescindible a veces para conseguirque el texto sea legible, en contraste con el fondo.

Dos ejemplos de fondos (Plsalos para ver su efecto)

brickz.gifnubes.jpg

Hay que prever la posibilidad de que quien acceda a nuestra pgina haya deshabilitado lacarga automtica de imgenes, en cuyo caso tampoco cargara la imagen que sirve comofondo y slo vera el fondo estndar de color gris. Esto podra ser muy perjudicial si hemosescogido unos colores para el texto y los enlaces que no contrastan bien con ese fondo gris.La solucin a este problema es poner dentro de la etiqueta los dos comandos

BACKGROUND y BGCOLOR (en este orden), teniendo cuidadado en escoger un coloruniforme de fondo parecido al de la imagen.

Por ejemplo, supongamos que queremos poner como fondo la imagen nubes.jpg.Escogemos entonces un color de fondo azul claro, (p. ej. #CCFFFF). La etiqueta quedaraas:

Esto tiene la ventaja adicional de que, incluso aunque no se deshabilite la carga automticade imgenes, al cargar la pgina, lo primero que se ve es ese fondo de color uniforme, queluego es reemplazado por el de la imagen.

Cmo conseguir un fondo para nuestra pgina?

Tericamente, cualquier imagen puede servir como fondo, pero unas son ms apropiadasque otras. Adems, podemos querer crear un fondo nosotros mismos, o capturarlo de otraspginas.

En esta otra pgina se trata sobre todos estos temas.

En WebStore encontrars una colecin de fondos, preparados para ser capturados.

Elementos para pginas del Web

Ejemplo prctico

Vamos a poner como fondo la imagen nubes.jpg, junto con un fondo alternativo de colo razul claro y hacer que el texto sea de color rojo oscuro, en el ejemplo prctico del captulo6 (mipag6.html). Para ello es necesario antes capturar la imagen y guardarla en el mismodirectorio en donde vamos a guardar el fichero que vamos a crear.

(Si nuestro navegador no soporta el formato jpg, lo hacemos con el otro fondo, brickz.gif)


25/64



25

Cargamos en el editor de textos mipag6.html y sustituimos la etiqueta por estaotra:

Guardamos este fichero como mipag7.html y lo cargamos en el navegador paravisualizarlo.

8. Alineacin y dimensionado de imgenes

Alineacin de las imgenes

La alineacin de las imgenes fue, en su da, el primer golpe de efecto del programaNavigator de Netscape. Permiti alinear una imagen a la izquierda o a la derecha de la

pgina y hacer que el texto la rodee completamente, consiguindose as una aparienciasimilar a la de una revista. Es el caso de este prrafo con respecto a la imagen de la derecha.

Obsrvese cmo las lneas, cuando rebasan su parte inferior, continan normalmente hastael margen derecho de la pgina. De manera anloga, se puede alinear la imagen a laizquierda, comportndose el texto de una forma equivalente. Esto se consigue con lasextensiones de la etiqueta ALIGN, (que ya se vi en el Captulo 4 con los comandos TOP,MIDDLE y BOTTOM). Pero entonces slo se haca referencia al titular de la imagen, esdecir, a un texto explicativo, pero menor que una lnea completa, pues en caso de rebasarla,el texto saltaba a la parte inferior de la imagen, dejando un hueco en blanco, con lo que suutilidad era muy limitada. Este inconveniente queda solventado

con los comandos de Netscape RIGHT (derecha) y LEFT (izquierda). Laimagen de arriba, "doom.gif", alineada a la derecha, se ha obtenido con la

etiqueta:

y la imagen de abajo, "doom2.gif", alineada a la izquierda, se ha obtenido con la etiqueta:

Si se quiere interrumpir el proceso de rellenado del texto a los lados de la imagen, para quesalte hasta debajo de ella, es decir, dejar un espacio en blanco parcialmente, se puedenemplear las siguientes extensiones de la etiqueta
:

Busca el primer margen libre (clear) a la izquierda.
Busca el primer margen libre a la derecha.
Busca el primer margen libre a ambos lados.

Un ejemplo para aclarar esto:

Este texto esta a un lado de la imagen.


26/64



26

Este tambien esta a un lado de la imagen, en la linea siguiente.
Este otro texto, en cambio, ha buscado el primer margenlibre a la izquierda.

Que resulta:

Este texto esta a un lado de la imagen.Este tambin esta a un lado de la imagen, en la lnea siguiente.

Este otro texto, en cambio, ha buscado el primer margen libre a la izquierda.

Dimensionando la imagen

Los programas navegadores cuando cargan un documento HTML y encuentran una etiqueta

de una imagen, interrumpen el proceso de carga y solicitan al servidor que le enve dichaimagen, quedando a la espera hasta que se complete el envo, repitindose este proceso concada una de las imgenes.

Esto es especialmente molesto cuando, como ocurre frecuentemente, en la cabecera de lapgina se encuentra una imagen grande, ya que durante un tiempo relativamente largo no sever nada en la pantalla.

Para evitar este inconveniente existen unas extensiones de la etiqueta de la imagen que sirven para indicar al navegador cules son sus dimensiones enpixels. (Este dato lo habremos obtenido previamente de algn programa grfico).

En este caso, el navegador acta de una forma ms favorable, ya que entonces, comoconoce las dimensiones de las imgenes les reserva un espacio en la pantalla y vacolocando el texto de forma apropiada, sin ninguna interrupcin, a la vez que va rellenandoesos espacios reservados a las imgenes.

Estos comandos son WIDTH (ancho) y HEIGHT (alto).

Por ejemplo, para la imagen isla.gif situada ms arriba:

Es conveniente hacer esto con todas las imgenes, incluso con las ms pequeas (iconos,botones, etc), para que no haya ninguna interrupcin en el proceso de carga del documento.

Se pueden tambin, si se quiere, dimensionar las imgenes con unos valores distintos a losque realmente tienen, variando el tamao, la anchura o la altura. Esto es muy conveniente,por ejemplo para poner en la pgina un thumbnail (reproduccin en pequeo de unaimagen), que hace de enlace a la imagen en su verdadero tamao. De esta manera norecargamos demasiado una pgina, y el usuario ser quien decida qu imgenes deseacargar.


27/64



27

He aqu un ejemplo de thumbnail:

La imagen, "nytimes.gif", tiene realmente unas dimensiones de 575x300

pixels (datos obtenidos de un programa grfico). Para dimensionar elthumbnail a 150x75 (guardando unas proporciones parecidas al original,de 2:1), lo conseguimos con:

Para hacer que esta imagen reducida sea el enlace con la imagen en su tamao original, loconseguimos con:

Tambin se puede conseguir esto de otra manera, ms correcta aunque ms laboriosa. Es lade reducir en un programa grfico esta imagen a 150x75, guardarla con otro nombre, yluego hacer que la pequea sea el enlace de la grande. Es ms correcta esta otra solucinporque no todos los navegadores reconocen los comandos WIDTH y HEIGHT, inclusotampoco algunas de las versiones ms antiguas de Netscape.


Partiendo del ejemplo prctico del captulo anterior, mipag7.html, vamos a dimensionar lasimgenes existentes y aadir otra, doom.gif, como ejemplo de imagen alineada a laizquierda, con su texto correspondiente.

Capturamos la imagen "doom.gif" y la guardamos junto con el fichero que vamos a crear.Cargamos el fichero mipag7.html y cambiamos las etiquetas de las imgenes de la siguientemanera:

por por por

(La imagen del fondo "nubes.jpg" no se dimensiona).

Adems de esto, aadimos entre las etiquetas y (al final deldocumento), lo siguiente:


28/64



28

Una de mis

aficiones favoritas son los juegos tipo "Doom", con los que paso horas incontables.

Guardamos este fichero como Pag8.html y lo cargamos en el navegador para verlo.

9. Formato de las imgenes

Tamao de las imgenes

Cuando vamos navegando por las pginas del Web parece a veces que todo se detienecompletamente. Esto es algo que por desgracia ocurre muy a menudo. Pueden ser muchaslas causas: conexiones de la red defectuosas, servidores lentos, etc. Son cosas que engeneral no nos queda ms remedio que soportar.

Pero hay una causa particularmente irritante, y es que hayamos ido a parar a una pgina quepadece del Sndrome de la Imagen Gigantesca, que es la mala costumbre de poner en lapgina imgenes enormes, lo que se traduce en ficheros de imagen a cargar con un tamaoexcesivo.

Hay unas cuantas maneras de minimizar el tamao de los ficheros de imagen:

Reducir el tamao de la imagen con un programa grfico. Esto har que haya menospixels que almacenar, y por tanto menos kilobytes que cargar.

Reducir el nmero de colores utilizados en la imagen. Una imagen GIF puede tener unmximo de 256 colores, pero podemos a veces reducir este nmero. Por ejemplo, se puedeconseguir un logo atractivo para encabezar las pginas con slo dos colores, uno de primerplano y el otro de fondo. Con un programa grfico adecuado se pueden hacer estascomprobaciones y reducciones.

Simplificar las imgenes. El formato GIF comprime la imagen buscando las secuencias

repetidas en los datos y abrevindolas. Esto quiere decir que las zonas grandes de un slocolor se comprimen muy bien, al contrario de las que tienen muchos tonos y graduaciones.


29/64



29

Como referencia, el fichero de una imagen no debe sobrepasar los 100k, mejor an mspequeo. Tampoco conviene que el tamao de la imagen en la pantalla sea mayor de00x400 pixels, para no obligar al usuario a tener que desplazarla con los cursores.

Si a pesar de todo, las imgenes que queremos poner siguen teniendo un tamao de ficherodemasiado grande, se puede elegir la solucin, vista en el captulo anterior, de utilizarthumbnails (reproducciones en pequeo que enlazan con la imagen grande). De esta maneraes el usuario quien elige qu imgenes cargar.

Otra prctica muy aconsejable, tambin vista en el captulo anterior, es la de dimensionartodas las imgenes con los comandos WIDTH y HEIGHT.

Cuando se carga la imagen de una pgina queda almacenada en el cach. Por tanto, si estamisma imagen se utiliza en otras pginas no ser requerida al servidor para ser cargada de

nuevo. Por ello, siempre que se pueda, es conveniente repetir la misma imagen en otraspginas, como por ejemplo para los botones, iconos, barras de separacin, etc.

El formato JPEG

El mtodo de compresin utilizado por el formato GIF es muy conveniente para comprimirreas monocolor, como las que puede haber por ejemplo en un diagrama sencillo. Pero noes tan conveniente para cosas ms complicadas, como por ejemplo fotografas de objetos dela vida real. Adems estos objetos no presentan un aspecto nada favorable si estnreducidos a los 256 colores de este formato.

Para realizar este tipo de tareas se cre el formato JPEG. Almacena las imgenes con 16.7millones de colores, que es mucho ms de lo que el ojo humano puede distinguir, y haceuso de complicados algoritmos matemticos para comprimir el tamao de los ficheros hastala dcima parte de su tamao original. Esto quiere decir que una imagen complicada que sehaya comprimido con este formato tendr, comparando con el formato GIF, una calidadmayor y un tamao de fichero menor.

Su nico inconveniente es que hay navegadores que no son capaces de manejardirectamente estos ficheros y que tienen que traspasarlos a un programa auxiliar paraejecutarlos. Esto quiere decir, que si se quiere tener en cuenta a esos navegadores, no sedeben poner imgenes con este formato directamente en la pgina. Un recurso muy

utilizado para solventar esto es el de poner thumbnails en formato GIF que enlacen con lasimgenes en tamao natural y formato JPEG.


30/64



30

De todas maneras, tngase en cuenta que los navegadores que s pueden manejar esteformato son, con mucho, los ms utilizados, como son los de Netscape y Microsoft.

GIFs transparentes

Una caracterstica muy til del formato GIF es la opcin de hacer transparente un colordeterminado, es decir, que en la pgina del Web ese color concreto no se vea, siendoreemplazado por el fondo de la pgina. Por tanto, si en una imagen escogemos el color desu fondo como transparente, parecer flotar sobre el fondo de la pgina (sea ste el que sea,incluso un fondo de imgenes) .

Esta es la imagen original, con un fondo blanco no transparente.

La misma imagen, pero con el color blanco transparente.

Pero no todas las imgenes son apropiadas para conseguir este efecto. Es condicinindispensable que la imagen tenga un fondo de color uniforme. No vale una imagen con unfondo multicolor.

La imagen de la izquierda tiene un fondo aparentementeuniforme, pero en realidad no es as. La manipulamos con unprograma grfico para proporcionarle uno uniforme. Noimportara de qu color sea, puesto que no se va ver, pero esmejor elegir un gris claro, para que en los navegadores que noimplementen esta caracterstica de la transparencia, la imagen

parezca "casi" transparente. (Los valores RGB para un colorgris claro son 207,207,207). Es lo que se ha hecho en laimagen de la derecha.

Hay otro apecto que hay que tener en cuenta y es que el formato GIF tiene dos subformatosdiferentes. El ms comn es el GIF 87a, con el que no se pueden conseguir colorestransparentes. El formato adecuado para ello es el GIF 89a. Por tanto, el programa grficodebe tener la posibilidad de convertir las imgenes a este subformato.

El ltimo aspecto a tener en cuenta es el siguiente: los programas grficostienen normalmente un color de primer plano (foreground) y otro de fondo

(background). Para conseguir nuestro propsito tenemos que forzar alprograma grfico para que su color de fondo sea precisamente el color quequeremos hacer transparente (en este ejemplo, el color gris claro). Ya noqueda ms que guardar la imagen en formato GIF 89A e indicar que el color defondo (comn a la imagen y al programa grfico) sea transparente.


31/64



31

Estos ejemplos se han realizado con el programa para Windows Paint Shop Pro 3.12. Alguardar la imagen (Save As) como GIF 89a, hay que pulsar "Options" y marcar "Set theTransparency Value to the Background".

Otro programa para Windows: LView ProPara usuarios del Mac: TransparencyReferencia de consulta: Transparent Background Images

GIFs entrelazados.-

Normalmente, un fichero GIF contiene los datos de cada lnea de la imagen de una maneraordenada, de tal manera que al ser cargada por el navegador aparecer dibujada lnea a lneadesde arriba hasta abajo.

Se puede cambiar este comportamiento si se ha guardado la imagen como un GIFentrelazado (interlaced GIF). En este caso, las lneas quedan guardadas no de una maneraconsecutiva, sino en saltos de de cuatro en cuatro, y al llegar al final recomienza desde elprincipio con otra secuencia diferente, tambin de cuatro en cuatro, as hasta completar laimagen.

Por ejemplo, una imagen de 20 lneas sera guardada con estas secuencias:

lneas 1, 5, 9, 13, 17lneas 2,6,10,14,18lneas 3, 7 ,11, 15, 19

lneas 4, 8, 12, 16, 20

El propsito de esto es que al ser cargada esta imagen por un navegador que implementeesta caracterstica (Netscape, Explorador de Microsoft, etc), se ver la imagen completadesde el principio, comenzando con una definicin muy grosera que luego se va afinandopoco a poco.

El tiempo de carga de una imagen entrelazada y de la misma no entrelazada es el mismo,pero en el primer caso nos hacemos rpidamente una idea del tipo de imagen que es, lo cualpuede ser muy conveniente a veces.

Los programas grficos ms completos suelen tener esta posibilidad (p. ej. el Paint ShopPro), que conviene aprovechar.

He aqu un ejemplo de cmo se carga de distinta manera una imagen relativamente grande(35kb) primero no entrelazada y luego entrelazada


32/64



32


Partiendo del ejemplo prctico del captulo anterior, mipag8.html, vamos a aadirle las dos

imgenes transparentes que se han comentado en el captulo. Capturamos primero ambasimgenes (bluerib.gif y 3mulder.gif) y las guardamos en el mismo directorio que eldocumento HTML que vamos a crear.

Luego aadimos entre las etiquetas y , situadas al final, lo siguiente:

"The truth is out there"

Guardamos este fichero como mipag9.html y lo cargamos en el navegador para verlo.

10. Tablas.-

Hasta que no se empezaron a usar las tablas, la nica manera de tabular las cosas erautilizar la etiqueta de preformateado, con la que es necesario poner manualmente losespacios en blanco para que quede todo alineado formando filas y columnas, con unresultado muy poco esttico.

Estructura de una tabla

Vamos a ver ordenadamente (de fuera hacia dentro) las etiquetas necesarias paraconfeccionar las tablas.

1. La etiqueta general, que engloba a todas las dems es y . Esdecir:

[resto de las etiquetas]

Con esto se presentaran los datos tabulados, pero faltara la caracterstica que hace msatractivas a las tablas, y es que estos datos vayan dentro de unos cajetines formados porun borde. Para esto tenemos que aadir el atributo BORDER a la etiqueta, es decir:

[resto de las etiquetas]

2. En el siguiente nivel, dentro de la anterior, estn las etiquetas para formar cada fila(row) de la tabla, que son y . Hay que repetirlas tantas veces como filasqueremos que tenga la tabla. Es decir, para una tabla con dos filas, sera:


33/64



33

[etiquetas de las distintas celdas de la primera fila]

[etiquetas de las distintas celdas de la segunda fila]

3. En el ltimo nivel (dentro de las anteriores) estn las etiquetas de cada celda, que son y , que engloban el contenido de cada celda concreta (texto, imgenes,etc.). Hay que repetirla tantas veces como celdas queremos que haya en esa fila.

Veamos un ejemplo de una tabla con dos filas. Cada fila va a tener tres celdas. Dentro decada celda vamos a poner un texto indicativo de la posicin de dicha celda:

fila1-celda1 fila1-celda2 fila1-celda3fila2-celda1 fila2-celda2 fila2-celda3

Que resulta:

fila1-celda1fila1-celda2



Filas con desigual nmero de celdas

En este ejemplo hemos puesto dos filas con igual nmero de celdas. Qu pasa si esenmero es distinto? Pues el navegador forma el nmero de filas y columnas que haga falta,dejando espacios en blanco en las filas que tengan menos celdas.

Si en el ejemplo anterior eliminamos la tercera celda de la segunda fila, es decir siborramos

fila2-celda3, resultar:



34/64



34


fila2-celda2

Titular de la tabla

Se puede aadir un titular (caption) a la tabla, es decir un texto situado encima de la tablaque indica cul es su contenido. Se consigue con la etiqueta y .

Si en el ejemplo anterior aadimos la siguiente lnea:

Ejemplo de filas desiguales , resulta:

Ejemplo de filas desiguales



fila2-celda2

Variando el espesor de los bordes

El atributo BORDER (visto ms arriba) pone por defecto un borde de espesor igual a launidad. Pero se puede hacer que este borde sea tan grueso como queramos, poniendo:

Si en el ejemplo anterior ponemos:

Resultar:Ejemplo de filas desiguales



fila2-celda2


35/64



35

Celdas de cabecera

Adems de las celdas que contienen datos normales, podemos poner, si nos conviene,

celdas de cabecera (header), que se distinguen por estar el texto de dichas celdas en negritay centrado.

Esto se consigue con la etiqueta y (en vez de la normal y )

Vamos a aadir, en el ejemplo anterior, una fila de estas celdas de cabecera, antes de lasotras dos que ya existan:

Columna 1 Columna 2 Columna 3

Que resulta:Ejemplo de filas desiguales

Columna 1Columna 2

Columna 3fila1-celda1



Se pueden colocar en el sitio que se quiera, aunque lo normal es que vayan en los bordes,encabezando las columnas o las filas.

Contenido de las celdas

Hasta ahora, en todos los ejemplos se ha puesto un texto normal dentro de las distintasceldas. Pero se puede poner en ellas cualquier otro elemento de los que van en undocumento HTML, como imgenes, enlaces, etc. No hay ms que poner dentro de laetiqueta de la celda la etiqueta correspondiente a una imagen, un enlace, etc.

Ejemplo con una imagen:

Ejemplo con un enlace:

Pgina principal


36/64



36

Pgina principal

Posicionamiento del contenido dentro de la celda

Normalmente, el contenido de una celda est alineado a la izquierda. Pero se puede cambiaresto aadiendo dentro de la etiqueta de la celda los siguientes atributos:

Al centro A la derecha Cabecera a la izquierda (Recurdese que por defecto estncentradas)

Ejemplos de alineamiento horizontal dentro de la celda

Al centroA la derecha

Cabecera a la izquierda

El alineamiento por defecto en el sentido vertical es en el medio. Tambin se puedecambiar, aadiendo dentro de la etiqueta de la celda los siguientes atibutos:

Arriba Abajo

ArribaAbajo

Variando las dimensiones de la tabla

El navegador se encarga normalmente de dimensionar el tamao total de la tabla de acuerdocon el nmero de filas, de columnas, por el contenido de las celdas, espesor de los bordes,etc.

A veces nos puede convenir forzarle para que la tabla tenga unas dimensiones totalesmayores que las que le corresponden, tanto en anchura como en longitud. Esto se consigueaadiendo dentro de la etiqueta de la tabla los atributos WIDTH y HEIGHT igual a unporcentaje de la dimensin de la pantalla, o a una cifra que equivale al nmero de pixels.

Por ejemplo, si en el ltimo ejemplo ponemos:

Arriba

Abajo


37/64



37

O, si en ese mismo ejemplo, ponemos:

ArribaAbajo

Celdas que abarcan a otras varias

A veces puede interesarnos que una celda se extienda sobre otras varias. Esto se consigueaadindo dentro de la etiqueta de la celda los atributos COLSPAN=nmero paraextenderse sobre un nmero determinado de columnas, o ROWSPAN=nmero paraextenderse verticalmente sobre un nmero determinado de filas.

Por ejemplo, en la primera tabla de este captulo vamos a aadir una fila con una sola celda,que abarca a dos columnas:

Celda sobre 2 columnas Celda sobre 2 columnasfila1-celda1



fila2-celda3

O, en la misma tabla, vamos a aadir una celda en la primera fila. pero que abarque tambina la siguiente:

Celda junto a 2 filas Celda junto a 2 filas



fila2-celda2

fila2-celda3

Color de fondo en las tablas

Podemos conseguir que las tablas tengan un color de fondo, siguiendo un procedimientototalmente anlogo al empleado para que una pgina tenga un color de fondo uniforme(segn vimos en el captulo 7). Para ello debemos utilizar el atributoBGCOLOR="#XXYYZZ", visto en dicho captulo.

Se puede conseguir:


38/64



38

1. Que la totalidad de la tabla tenga un color de fondo. Para ello, colocamos el atributodentro de la etiqueta TABLE. Por ejemplo, vamos a hacer que la tabla tenga un fondoverde (#00FF00):

fila1-celda1 fila1-celda2 fila2-celda1 fila2-celda2

Que resulta:fila1-celda1


fila2-celda2

2. Que slamente una celda determinada tenga un color de fondo. Para ello, colocamos elatributo dentro de la etiqueta de la celda correspondiente. Por ejemplo, vamos a hacerque slo la celda 1 de la fila 1 tenga un color verde:

fila1-celda1

fila1-celda2 fila2-celda1 fila2-celda2

Que resulta:

fila1-celda1fila1-celda2fila2-celda1

fila2-celda2

3. Que la generalidad de las celdas tenga un color, pero que alguna celda tenga unoparticular. El atributo del color general se coloca en la etiqueta TABLE, y el del colorparticular en la etiqueta de la celda en cuestin (una combinacin de los dos casosanteriores). por ejemplo, vamos a hacer que la generalidad de la tabla sea de color rojo(#FF0000), pero que la celda 1 de la fila 1 sea de color verde (#00FF00):


fila2-celda1 fila2-celda2

Que resulta:fila1-celda1


fila2-celda2


39/64



39

Imgenes de fondo en las tablas

El Explorer de Microsoft soporta la colocacin de imgenes de fondo en el interior de lastablas, de una manera anloga a como se hace en una pgina (segn vimos en el captulo 7).Para ello debemos utilizar el atributo BACKGROUND="imagen.gif" oBACKGROUND="imagen.jpg", visto en dicho captulo.

Si se utiliza dentro de la etiqueta la imagen en cuestin se multiplicar detrs detodas las celdas.

Por ejemplo, si ponemos:

(Se omite el resto de las etiquetas de la tabla)

Obtenemos:



(Con el Netscape no se ver ninguna imagen de fondo, slo con el Explorer)Si, por el contrario, slo se pone este atributo dentro de la etiqueta de una celda concreta

( o ), entonces la imagen de fondo se ver slo en esa celda, como por ejemplo:



Separacin entre las celdas de una tabla

Por defecto, la separacin entre las distintas celdas de una tabla es de dos pixels. Pero sepuede variar esto con el atributo CELLSPACING, que se pone dentro de la etiqueta

TABLE.

Por ejemplo, para obtener una separacin de 20 pixels entre celdas ponemos:



40/64



40

Con lo que se obtiene:fila1-celda1


fila2-celda2

A primera vista parece como si esto fuera lo mismo que si hubiramos aumentado elespesor de los bordes. Pero para comprobar que no es as, hagamos que en el caso anterior,tenga adems unos bordes de 5 de espesor:

Con lo que se obtiene:



Separacin entre el borde y el contenido dentro de las celdas. Por defecto, la separacinentre el borde y el contenido dentro de las celdas es de un pixel. Se puede cambiar esto conel atributo CELLPADDING, que se pone dentro de la etiqueta TABLE.

Por ejemplo, para obtener una separacin de 20 pixels entre el contenido y los bordes,dentro de cada celda:




fila2-celda2

Se puede combinar este atributo con CELLSPACING (visto en el apartado anterior).

Por ejemplo, una tabla con bordes de 5 de espesor, separacin entre celdas de 15 yseparacin del contenido con respecto a los bordes de las celdas de 20, lo obtendramoscon:


41/64



41




fila2-celda2


Partiendo del ejemplo prctico del captulo anterior, mipag9.html, vamos a crear una tablade dos filas, con una celda cada una. La primera, como cabecera, con el texto "Un lugar

ideal para mis vacaciones", y la segunda con la imagen isla.gif. Adems vamos a alargar alo ancho la tabla al 75% de la pantalla.

Para ello sustituimos:

Un lugar ideal para mis vacaciones

Por lo siguiente:

Un lugar ideal para mis vacaciones

Guardamos este fichero como Pag10.html y lo cargamos en el navegador para verlo.

11. Formularios.-

La manera general para que los lectores de nuestra pgina se puedan comunicar connosotros es por medio de un enlace a nuestra direccin de email, con lo que recibiramos unemail convencional.

Pero puede ser que lo que necesitemos sea solamente una respuesta concreta a unasopciones que presentaremos nosotros mismos, o un comentario del usuario, para lo que lesuministraremos un espacio en donde introducirlo.


42/64



42

Se puede hacer todo esto, adems de otras cosas, utilizando los formularios, con los que sepueden confeccionar pginas que contengan los elementos necesarios para ello, tal como

botones de radio, listas de seleccin, cajetines de introduccin de texto y de control, etc.,como vamos a ver.

Los formularios permiten que los dems nos enven la informacin directamente a nosotroso bien a nuestro servidor, en donde hemos instalado un programa que procese estainformacin.

Por ejemplo, vamos a suponer que queremos crear una lista de correo. Los usuarios puedenintroducir sus nombres y direcciones de email y pulsar un botn de envo. Esos datos lospodemos recibir "en bruto" en nuestro correo, con los que confeccionaramos manualmentedicha lista de correo, sin necesitar ningn programa para ello. Este proceso es el que vamos

a comentar en este captulo.

La otra posibilidad, de la que nicamente se va a hacer esta mencin, es que hubiramosinstalado en nuestro servidor un programa especial para procesar esos datos y aadirlos a lalista de correo, y que incluso pudiera devolver automticamente al usuario algn tipo deinformacin. Para conseguir esto, los formularios necesitan ejecutar programas o scripts pormedio del CGI (Common Gateway Interface). El CGI permite a los formularios serprocesados por programas escritos en cualquier lenguaje, aunque los ms usados en Internetson el Perl y el C.

Para saber ms sobre el CGI:

En castellano:Manual de CGI, por Diego Sebastin QuirogaEjecutables CGI-BIN, en Tejedores del Web, por Carlos CastilloFAQ de la lista HTML de la UBALibrera CGI 3.0

En ingls:Web Developper's Virtual Library: CGICGI Index (Yahoo!)

NOTA:El tipo de formulario que se describe a continuacin podr ser utilizado por la mayora delos navegadores, con la notable excepcin del Explorer (incluso la versin 3.0), por lo quees conveniente suministrar al final del formulario, como una alternativa para estos casos, unenlace de email ordinario (ver el Captulo 3)


43/64



43

Estructura de un formulario

La estructura general de un formulario es:

1.Etiqueta de inicio:

2.Cuerpo del formulario, con los distintos elementos para poder introducir los datos.3.Botones de envo y de borrado.4.Etiqueta de cierre

Etiqueta de inicio

El atributo ACTION indica la accin que se debe efectuar y que es que los datos seanenviados por email a la direccin indicada. (Si hiciramos uso del CGI, sera precisamenteaqu donde indicaramos su localizacin en el servidor, que habitualmente es el directoriocgi-bin, para que procese los datos).

El atributo METHOD=POST indica que los datos sean inmediatamente enviados por correoa la direccin de email, nada ms pulsar el usuario el botn de envo.

Con el atributo ENCTYPE="TEXT/PLAIN" se consigue que las respuestas las recibamoscomo un fichero de texto, perfectamente legible y sin codificar.

Elementos para introducir los datos

Los vamos a dividir en tres clases:

1.Introduccin por medio de texto2.Introduccin por medio de mens3.Introduccin por medio de botones

La introduccin de los datos se consigue por medio de la etiqueta:

En donde:xxx es la palabra que indica el tipo de introduccin.yyy es el nombre que le asignamos nosotros a la variable de introduccin del dato.zzz es la palabra asociada a un elemento.


44/64



44

Todo esto, que de momento parece muy confuso, se aclarar al ir viendo los distintos casos.

Introduccin por medio de texto (una lnea)

En este caso es xxx=text, es decir, INPUT TYPE="text". El atributo VALUE no procede eneste caso.

Vamos a poner un ejemplo: solicitamos el apellido del usuario.

Escribe tu apellido:

Que resulta:

Escribe tu apellido: (un recuadro de texto)

Si el usuario introduce su apellido, p. ej. Ruiz, y pulsa el botn de envo (que veremos msadelante), recibiremos un email suyo con el siguiente texto:

Apellido=Ruiz

La longitud de este formulario es por defecto de 20 caracteres. Se puede variar incluyendoen la etiqueta el atributo SIZE="nmero". Por otra parte, sea cual sea la longitud delformulario, si no se indica nada, el usuario puede introducir el nmero de caracteres quequiera. Se puede limitar esto, incluyendo en la etiqueta el atributoMAXLENGTH="nmero".

En el caso que hemos visto, si hubiramos cambiado la etiqueta correspondiente por:

Habramos obtenido:

Escribe tu apellido: (Se puede comprobar cmo no se pueden introducir ms de 12caracteres).


45/64



45

Tambin se puede hacer que el texto introducido no sea reconocible, es decir que todos loscaracteres se representen por asteriscos. Basta con cambiar en la etiqueta INPUT

TYPE="text" por INPUT TYPE="password". En el ltimo ejemplo, si cambiamos laetiquea correspondiente por:

Obtenemos:

Escribe tu apellido: (Se puede comprobar como los caracteres introducidos se representanpor asteriscos)

Introduccin por medio de texto (mltiples lneas)

Cuando el texto a introducir puede alcanzar una gran longitud, por ejemplo un comentario,es conveniente utilizar un formulario de texto de mltiples lneas.

Esto se consigue con la etiqueta de inicio:

(en donde no se utiliza INPUT TYPE y donde ROWS representa el nmero de filas, yCOLS el de columnas) y la de cierre:

Ejemplo: un formulario solicitando los comentarios del usuario:

Introduce tus comentarios:

Que resulta:

Introduce tus comentarios:

(El salto de lnea del texto introducido no se efecta automticamente).Una vez que el usuario haya escrito sus comentarios dentro del formulario, y haya pulsadoel botn de envo, recibiremos un email suyo con el siguiente texto:


46/64



46

Comentarios=Bla bla bla...

Introduccin por medio de mens

Si queremos que el usuario, en vez de introducir un texto, como hemos visto en los casosanteriores, escoja entre varias opciones que le presentamos nosotros, haremos uso de unformulario en forma de men.

Se consigue con la etiqueta de inicio y la de cierre .Las distintas opciones a escoger se consiguen con la etiqueta .

Ejemplo: Pedimos al usuario que elija su color preferido:

Cul es tu color preferido?
RojoVerdeAzulAmarillo

Que resulta:

Cul es tu color preferido?Si el usuario ha escogido, p. ej. Azul y ha pulsado el botn de envo, recibiremos un emailsuyo con el texto: ColorPreferido=Azul.

En el ejemplo anterior, slo es visible en el formulario una opcin. Si queremos que seanvisibles mltiples opciones a la vez, aadimos en la etiqueta los atributos MULTIPLESIZE="nmero", donde especificamos el nmero de opciones visibles.

Si cambiamos en el ejemplo anterior la etiqueta correspondiente por:


47/64



47

Obtenemos:

Cul es tu color preferido? (ver lista de valores a seleccionar)

Formulario de confirmacin (checkbox)

Si queremos que el usuario confirme una opcin determinada, podemos hacer uso de unformulario de confirmacin, o checkbox, que se consigue con la etiqueta:

Ejemplo: Solicitamos al usuario que confirme su inclusin en una lista de correo:

S, deseo ser incluido en la lista de correo.

Que resulta:S, deseo ser incluido en la lista de correo.Si el usuario marca este formulario y pulsa el botn de envo, recibiremos un email suyocon el texto: Lista=On.

Si queremos que el formulario aparezca inicialmente como marcado (el usuario nonecesitar hacerlo), basta con aadir el atributo CHECKED dentro de la etiqueta. En elejemplo anterior si sustituimos la etiqueta equivalente por:

Obtenemos:S, deseo ser incluido en la lista de correo.

Botones de radio

Cuando queremos que el usuario elija una nica opcin entre varias, podemos hace uso delos botones de radio, que se consiguen con la etiqueta:


48/64



48

Donde yyy es el nombre que le ponemos a la variable que se trata de elegir, y zzz es elnombre de cada una de las opciones en concreto.

Ejemplo: solicitamos al usuario que defina cul es su sistema operativo preferido:

Cul es tu sistema operativo preferido?
PC Mac Unix

Que resulta:Cul es tu sistema operativo preferido?

PC Mac Unix

Obsrvese el atributo opcional CHECKED que se ha aadido en la primera etiqueta. Esaser la opcin que aparece marcada por defecto.

Obsrvese tambin que no es posible escoger ms de una opcin.

Si el usuario ha escogido la opcin PC y pulsa el botn de envo, recibiremos un email suyocon el texto: SistemaOperativo=PC.

Botones de envo y de borrado

Hasta ahora, en todos los ejemplos que hemos visto, faltaba un elemento esencial encualquier formulario, y es el botn de envo de los datos, que se consigue con la etiqueta:

En donde zzz es el texto que queremos que aparezca en el botn.

Vamos a aadirlo al primer ejemplo, en el que se solicitaba el apellido del usuario:



49/64



49

Que resulta:Escribe tu apellido:

Otro botn interesante es el de borrado de los datos introducidos, muy conveniente en unformulario con muchos elementos. Es muy similar al de envo, pues se consigue con laetiqueta:

En donde zzz es el texto que queremos que aparezca en el botn.

Si aadimos al ejemplo anterior la etiq ueta:

resulta:


Se puede comprobar su funcionamiento, escribiendo algo en el formulario y pulsando luegoel botn de borrado.

Consideraciones finales

Hasta ahora hemos visto uno a uno los diferentes elementos que se pueden utilizar. Pero no

hay ningn inconveniente en usar, dentro del mismo formulario, distintos tipos deintroduccin de datos. Al pulsar el usuario el botn de envo recibiramos en email suyocon las distintas parejas NAME=VALUE de cada elemento, encadenadas con el smbolo &.

Por ejemplo, con este formulario, con dos elementos distintos:Escribe tu apellido:Cul es tu color preferido?recibiramos un email con el texto (p. ej.):Apellido=RuizColorPreferido=Azul.

Para ampliar el tema de formularios:Carlos' Forms Tutorial


Partiendo del ejemplo prctico del captulo anterior, Pag10.html, vamos a aadirle un "librode visitas". Para ello, aadimos lo siguiente, entre las etiquetas y situadasal final, lo siguiente:

Libro de visitas


50/64



50

Tu nombre:

Escribe tus comentarios:

(Cada uno puede poner en mailto:[email protected] su propia direccin de email)Guardamos este fichero como mipag11.html y lo cargamos en el navegador para verlo.Resultado.

12. GIFs animados.-

Ya se ha hecho mencin anteriormente en este manual de los dos formatos GIF (ver en elcaptulo 9), en relacin a las imgenes con fondo transparente. All vimos que el formatoGIF 87a no era el adecuado para ello, sino que lo era el formato GIF 89a.

Estos nmeros de los formatos hacen referencia a los aos en los que se publicaron sus

respectivas especificaciones (1987 y 1989).

En 1989 se estableci la posibilidad de la existencia de colores transparentes, as como queun fichero GIF pudiera contener internamente mltiples imgenes, visibles durante untiempo determinado, con lo que se poda obtener una imagen animada. Pero esta interesantecaracterstica permaneci prcticamente en el olvido hasta finales de 1995, cuandoNetscape la implement en su navegador, adquiriendo muy pronto una gran popularidad.

Hay otros tipos de animaciones, como las obtenidas con:

Quicktimes, FLIC, AVI, etc., que tienen el gran inconveniente de que requieren, para poder

ser contempladas, de programas auxiliares previamente instalados. Java, que requiere unnivel de conocimientos de este lenguaje de programcin que no est al alcance decualquiera.

Las animaciones basadas en los servidores, que tienen el inconveniente de que consumenel ancho de banda e incrementan el trfico de datos, debido a que deben estar alimentandocontinuanemte la animacin desde el servidor.

Las animaciones basadas en el formato GIF 89a eliminan todos estos problemas, pues:


51/64



51

No requieren de ningn programa auxiliar, siempre que se utilice el navegador adecuadopara poder contemplarlas.

Son tan fciles de utilizar en una pgina del Web como cualquier imagen GIF fija.No incrementan el trfico de datos, pues el usuario la carga de una sola vez y se ejecutanluego desde el cach del navegador.

Programas para crear animaciones

Para crear una animacin, en primer lugar, hay que crear una a una las distintas imgenesque van a constituir la animacin. Cualquier programa grfico que sea capaz de guardar lasimgenes en formato GIF es vlido para este propsito.

En segundo lugar, es necesario un programa que ensamble estas imgenes individuales de

una manera apropiada para crear la animacin. Los programas ms utilizados para ello son:

Windows:GIF Construction Set (Win3.1x y Win95)Gif Animator de Microsoft (Win95)Mac:GifBuilderUnix:WhirlGIF

13. Mapas

Hemos visto anteriormente dos maneras distintas de enlazar una pgina con otra: por mediode un enlace de texto (captulo 3) o por medio de una imagen (captulo 4). Pero en esteltimo caso se haca uso de una imagen para enlazar a una nica pgina.

Se puede utilizar una nica imagen para enlazar con varias pginas, yendo a una u otrasegn la zona en donde se pulse el ratn. Este tipo de imgenes se llaman mapas.

Veremos cmo se crea un mapa partiendo de una imagen, y cmo se implementa dichomapa con el lenguaje HTML en nuestra pgina.

Hay dos tipos de mapas:1.Mapas gestionados por el servidor2.Mapas gestionados por el cliente

Mapas gestionados por el servidor

En este tipo de mapas al desplazar el cursor sobre la imagen que forma el mapa se vanobteniendo las distintas coordenadas. Cuando se pulsa el ratn en un punto determinado, elnavegador enva esas coordenadas al servidor, y ste comprueba en un fichero MAP(situado en en su directorio cgi-bin) cul es la pgina que se corresponde con estas


52/64



52

coordenadas, enva esta informacin al navegador, y ste solicita a su vez al servidor que leenlace con dicha pgina.

Estos mapas, que fueron los que aparecieron inicialmente, tienen una ventaja: que puedenser utilizados por todos los navegadores, incluso por las versiones ms antiguas.

Pero tienen varios inconvenientes: No todos los servidores tienen implementado elprograma CGI necesario para que pueda funcionar un mapa de este tipo. Adems hay queconocer el tipo de servidor (NCSA, el ms comn, o CERN), pues el cdigo a aplicar esdistinto en un caso u otro.. Por otra parte, al requerir un trasiego de informacin entre elnavegador y el servidor, el tiempo de respuesta es mayor que en el otro tipo, comoveremos.

Para ms informacin sobre este tipo de mapas:

The Imagemap Help Page

Mapas gestionados por el cliente

Estos mapas son gestionados por el cliente (es decir, nuestro navegador) y no por elservidor, como en el caso anterior.

En este tipo de mapas, al ir desplazando el cursor se observa que en ciertas zonas seconvierte en el smbolo normal para enlazar con otras pginas (una mano, habitualmente).Si se pulsa en estas zonas activas (hotspots), el navegador consulta con el documentoHTML que ha recibido, y decide a qu pgina o direccin corresponde esa zona activa.

Es decir, no necesita enviar la informacin al servidor y esperar la respuesta de ste, con loque el proceso es ms rpido que en el caso anterior, reducindose adems el trfico dedatos y la sobrecarga al servidor. Otras ventajas son que al pasar por una zona activa semuestra la direccin a la que se corresponde (al contrario que en el caso anterior, en la queslo se ven unas coordenadas). Adems, estos mapas se pueden utilizar off- line, al contrariotambin que en el otro tipo, ya que no requieren la ayuda del servidor.

Pero tiene el inconveniente de que estos mapas no son implementados por todos losnavegadores, como en el caso anterior, aunque s por la mayora de los utilizados

actualmente, desde las versiones siguientes: Netscape 2.0, Microsoft Explorer 2.0, Mosaic2.1, etc. Pero se puede obviar este inconveniente suministrando enlaces alternativos paralos navegadores que no implementen este tipo de mapas, como veremos.

En lo que sigue, vamos a ver exclusivamente cmo implementar este tipo de mapas, esdecir, mapas gestionados por el cliente (client-side image maps).

Confeccin de la imagen del mapa

Antes que nada, es necesario confeccionar la imagen que va a servir como mapa. Se harcon un programa grfico, y pueden utilizarse los formatos GIF o JPG (ver el captulo 9).


53/64



53

Vamos a crear una mapa para utilizarlo en el ejemplo prctico de este captulo, con doszonas activas rectangulares que enlancen con los ejemplos prcticos de los captulos 2 y 3.

Se confecciona con un programa grfico la imagen quenos va a servir como mapa, tal como la situada a laizquierda, que todava no es un mapa.

Para definir un rea activa rectangular, necesitamosconocer las coordenadas de su ngulo superiorizquierdo y las de su ngulo inferior derecho.

Estas coordenadas las obtenemos con el programa grfico con el que hemos confeccionadola imagen. Estos valores son los siguientes:

Para la primera zona activa "Mis aficiones": (46,40) y (250,75)Para la segunda zona activa "Mis pginas favoritas": (46,100) y (250,135)

Ya tenemo

texto del manual de html_mejorado2010

Documents