html - calciffer.files.wordpress.com · etiquetas del fichero .html y sacará el resultado por...

Internet, el instrumento esencial de la diplomacia del siglo XXI

Introducción al diseño de páginas Web - 24 -

Anexo I

HTML

1. INTRODUCCIÓN

Cada vez más empresas, grandes organizaciones e incluso particulares en general tienen la necesidad de publicar información en Internet, dando a conocer sus productos, informando a los clientes, o simplemente presentando nuestras aficiones o quizás el curriculum al resto del mundo.

Todos estos tipos de páginas web se pueden realizar mediante HTML, HyperText Markup

Language. Es un lenguaje de hipertexto, lo que quiere decir que mediante unas determinadas zonas calientes (texto o gráficos) se puede acceder a otras posiciones de la página. Se supone que el usuario ya ha usado navegadores como Netscape Navigator o Internet Explorer.

Durante todo este manual se intentará explicar lo más claramente posible algunas de las

características más importantes de HTML, sin pretender hacer un desarrollo completo, sino intentando guiar al lector en sus primeros pasos pudiendo después ampliar su formación con otros textos.

Se expondrá también gran cantidad de ejemplos, tanto el código como la visión final en alguno

de los navegadores del mercado. Si desea comprobar el funcionamiento de los mismos, modificarlos con sus propias pruebas, etc., sólo tendrá que escribir el código tal cual en un editor de texto ascii puro, como puede ser el comando EDIT de MS-DOS o el bloc de notas de Windows. A continuación grabarlo en un fichero con extensión .HTM o .HTML (en caso que el sistema operativo admita nombres largos).

Para visualizar el resultado en su navegador habitual, ejecútelo, vaya al menú “Archivo/Abrir

página” y busque el fichero con el código HTML que se ha creado. El navegador interpretará las etiquetas del fichero .HTML y sacará el resultado por pantalla.

No hace falta compilador alguno, es decir, el lenguaje HTML es interpretado y el intérprete es el

navegador, por lo que para desarrollar páginas web sólo necesitamos un editor de texto ascii (por ejemplo en Notepad) y un navegador para poder ver el resultado de lo que estamos haciendo.

2. VERSIONES DE HTML ♦ HTML 2.0

Internet, en sus comienzos, prácticamente sólo era usada para la difusión de proyectos de investigación en las Universidades y para usos en que primaba el contenido y no el aspecto visual de éstos, por lo que no se miró tanto por los detalles estéticos, sino que lo más importante de las páginas web era la información que contenían. Por esta razón las primeras versiones de HTML, cuando llegó el verdadero desarrollo de Internet, no tenían un control demasiado avanzado de los documentos.



♦ HTML 3.0

La compañía del navegador Netscape comenzó a ampliar las funcionalidades de este lenguaje, pero sin seguir ningún estándar, por lo que el IETF (organismo que decidía los estándares de Internet) decidió elaborar la versión 3.0. Pero ésta resultó ser demasiado compleja para la época, por que no tuvo la aceptación esperada en el mercado.

♦ HTML 3.2

Las empresas líderes en el mercado del momento (Netscape, Sun, Microsoft, etc...) crearon un nuevo comité para la realización de estándares para las posteriores versiones de HTML. Este comité se llamó W3C, que en la actualidad sigue validando las nuevas versiones. ♦ HTML 4.0

El 17 de septiembre de 1997 se aprobó la versión 4.0 en la que se introdujeron cosas como los marcos (frames), los scripts, las hojas de estilo, etc.

♦ Notas sobre las versiones

Estar al día en las versiones de HTML no es demasiado difícil, ya que siempre tenemos a nuestra disposición gratuitamente todos los manuales de las versiones que van apareciendo en algunas páginas web.

No podemos pasar por alto el resto de lenguajes que siguieron apareciendo a raíz del HTML y

que en unos casos le complementan y en otros le sustituyen por completo, como son HTML Dinámico, JavaScript, Java, XML, VBScript, etc., pero estos se salen del campo de este seminario.



3. PRIMEROS PASOS ♦ Las etiquetas

Para comenzar, se verá que el HTML es un lenguaje que se basa en SGML (estándar internacional para la definición de métodos de representación de texto en forma electrónica no ligados a ningún sistema ni a ningún dispositivo), lo que quiere decir que todo irá encerrado entre dos etiquetas, normalmente, una que indica el comienzo de algún elemento del documento y otra que indica el final del mismo. Estas son de la forma:

<ETIQUETA parámetros> </ETIQUETA>

Cada una va entre los signos de “menor que” (<) y “mayor que” (>). Como podemos ver, para

cerrar el elemento irá una “barra” (/) después de la indicación de comienzo de una etiqueta. Al principio y final del texto tenemos la etiqueta HTML, que indica que estamos ante una página

web programada en HTML. <HTML> Indica el comienzo de un documento en formato HTML. </HTML> Indica el final del documento. Estas dos etiquetas siempre aparecerán en los ficheros programados en HTML para indicarle al

navegador que lo que está interpretando es lenguaje HTML.

♦ El interior de un documento.

Como se ha comentado en el apartado anterior, toda página en HTML tendrá al principio la etiqueta <HTML> y al final </HTML>. El interior del documento se compone de una cabecera y un cuerpo. En la cabecera se pondrá la información relativa a la página y en el cuerpo, el contenido de ésta.

Cada una de estas partes tiene su etiqueta de comienzo y fin (ver ejemplo 1). Dentro de la cabecera se puede poner el título de la página de la siguiente forma: <TITLE> Título de nuestra página web </TITLE> Más adelante, cuando se tengan los conocimientos básicos, ser comentaran algunas cosas más

que se pueden hacer con las cabeceras. En el cuerpo irá la información que se verá en la pantalla del navegador y por lo tanto, la

mayoría de las etiquetas que veremos en el resto del seminario.



Véase un ejemplo: Código ejemplo 1:

<HTML> <HEAD> <TITLE> Titulo de mi pagina</TITLE> </HEAD> <BODY> Esta podria ser mi primera pagina Web, creada en lenguaje HTML. </BODY> </HTML>

Visto en el navegador:

4. ETIQUETAS BÁSICAS

Para dar formato al texto y gráficos que aparecen en el cuerpo, se tiene una serie de etiquetas básicas:

<BR> Salto de línea. Es para obligar al navegador a meter un salto de línea después de esta

etiqueta. No hay que cerrarla. Si no se pone esta etiqueta y el texto rebasa el tamaño de la ventana del navegador, los saltos de línea se producen automáticamente. Por tanto esta etiqueta se usa para obligar a que se produzcan estos saltos en sitios determinados.

<HR> Barra horizontal. Introduce una línea horizontal que cruza la pantalla. Tampoco hay que cerrarla. Además a esta etiqueta sae le pueden poner atributos que modifiquen el aspecto de esta barra, como son WIDTH (para el tamaño de izquierda a derecha) y SIZE (para el espesor, de arriba abajo). Ya veremos un ejemplo de cómo se hace esto.

<CENTER></CENTER> Centrar. Todo lo que tenga entre la apertura y cierre de la etiqueta

quedará perfectamente centrado en la pantalla.  Comentario. Todo lo que aparezca entre estas señales no lo tendrá en cuenta el

navegador. Hay una excepción en caso del JavaScript, pero no entra en las expectativas de este seminario.

Se va a utilizar todo lo aprendido hasta ahora en un ejemplo: Código ejemplo 2:

<HTML> <HEAD> <TITLE> Mi segunda pagina web </TITLE> </HEAD> <BODY> Ejemplo numero 2:<BR>Comprobamos el funcionamiento de las etiquetas aprendidas hasta ahora. Veamos como se formatea el texto en el navegador.<BR><BR> <HR WIDTH="100" SIZE="5"> <HR WIDTH="75" SIZE="5"> <HR WIDTH="50" SIZE="5"> <HR WIDTH="25" SIZE="5"> <BR> <CENTER>Texto Centrado</CENTER> <BR>  <HR WIDTH="25%" SIZE="2"> <HR WIDTH="50%" SIZE="3"> <HR WIDTH="75%" SIZE="4"> <HR WIDTH="100%" SIZE="5"> </BODY> </HTML>




Es recomendable que el alumno haga modificaciones sobre los ejemplos y visualice el resultado

en algún navegador.



5. MAQUETACIÓN BÁSICA.

En esta parte se expondrá algunas etiquetas dedicadas a la maquetación del texto y los gráficos de las páginas. Se separan en 3 subconjuntos:

♦ Maquetación de párrafos

Se verán algunas etiquetas encargadas de dar a un párrafo completo un aspecto especial: <P> Nuevo párrafo. Al poner esta etiqueta se inserta una línea en blanco para delimitar el texto

anterior del posterior que corresponderían a párrafos distintos. Como es lógico no hace falta cerrarlo. <PRE></PRE> Texto preformateado. Presenta un texto con un tipo de letra de paso fijo, lo que

quiere decir, que todas las letras miden lo mismo de ancho y de alto. Se suele usar bastante para representar código fuente de programas. Además, al cerrar la etiqueta insertará un salto de línea.

<DIV ALIGN=x></DIV> Justificar texto. Permite alinear el texto a la izquierda (ALIGN=LEFT),

a la derecha (ALIGN=RIGHT), al centro (ALIGN=CENTER) o justificarlo a ambos lados (ALIGN=JUSTIFY).

<ADDRESS></ADDRESS> Dirección tradicional. Se usa para poner direcciones de personas. En

realidad lo que hace es poner la letra en cursiva. <BLOCKQUOTE></BLOCKQUOTE> Citas. Es para cuando se cita un texto de otra persona. En

realidad lo único que hace es meter dos márgenes a ambos lados del texto, por lo que éste queda en el medio y diferente del resto.



Código ejemplo 3:

<HTML> <HEAD> <TITLE> Mi tercera pagina web </TITLE> </HEAD> <BODY> Ejemplo numero 3:<P>Se comprobará el funcionamiento de las etiquetas aprendidas hasta ahora.<BR><BR> <PRE>Este es un texto preformateado. Como se puede ver, todas las letras tienen igual tamaño.</PRE> <DIV ALIGN="left">Texto a la izquierda</DIV><BR> <DIV ALIGN="center">Texto centrado</DIV><BR> <DIV ALIGN="right">Texto a la derecha</DIV><BR> <DIV ALIGN="justify">Texto justificado: Para poder ver este tipo de alineacion del texto se debe poner varias lineas y se verá como las justifica a los dos margenes del texto.</DIV><BR><BR> <ADDRESS>Pilar Fuentes Conte.<BR> NACIONES UNIDAS<BR> Despacho S-1037 A<BR> New York, NY 10017, EE.UU.</ADDRESS> </BODY> </HTML>




Si se observa un poco la imagen que aparece en el navegador, se verá que el texto preformateado tiene un pequeño problema, y es que no hace los saltos de línea automáticos, por lo que se le tiene que obligar a que los haga poniendo etiquetas <BR>.

Código ejemplo 4:

<HTML> <HEAD> <TITLE>Mi cuarta pagina web </TITLE> </HEAD> <BODY> El comienzo de "El Quijote" es: <BR> <BLOCKQUOTE> En un lugar de la Mancha, <BR> de cuyo nombre no quiero acordarme.... </BLOCKQUOTE> </BODY> </HTML>




♦ Maquetación de caracteres

Como es lógico también se puede cambiar el tamaño del texto, poner letras en cursiva, negrita, subíndices, etc. A continuación se verá como.

<H1></H1> Es un tamaño de letra muy grande para títulos, o cabeceras de documentos, etc. Pero se tienen otras para tamaños diferentes. Todas estas etiquetas son, de mayor tamaño a menor, <H1></H1>, <H2></H2>, <H3></H3>, <H4></H4>, <H5></H5>, <H6></H6>.

<B></B> Negrita. Pone el texto en letra negrita. <I></I> Cursiva. <U></U> Subrayada. <S></S> Tachada. Es un texto tachado. <TT></TT> Letra de paso fijo. Como se vio en apartados anteriores, las letras de paso fijo son

aquellas que tienen todas el mismo tamaño y se suelen usar para escribir código fuente. <SUP></SUP> Superíndice. Como por ejemplo: x = y2

<SUB></SUB> Subíndice. Como por ejemplo: xi,j = 5 <BIG></BIG> Aumenta tamaño de letra. <SMALL></SMALL> Disminuye el tamaño de letra. <BLINK></BLINK> Texto parpadeante. Sólo en Netscape. No es una etiqueta estándar.



Véase un ejemplo muy sencillo con algunas de estas etiquetas. Código ejemplo 5:

<HTML> <HEAD> <TITLE>Mi quinta pagina web </TITLE> </HEAD> <BODY> <CENTER> <H1>Texto con H1</H1> <H2>Texto con H2</H2> <H3>Texto con H3</H3> <H4>Texto con H4</H4> <H5>Texto con H5</H5> <H6>Texto con H6</H6> Texto en: <B>negrita</B>, <I>cursiva</I>, <U>subrayado</U>, <S>tachado</S>, <TT>prefijado</TT>, <SUP>superindice</SUP> y <SUB>subindice</SUB> </CENTER> </BODY> </HTML>




♦ Maquetación de frases

Son poco utilizados, ya que no permite saber exactamente como quedará finalmente en el navegador, por lo que simplemente se citarán, animando al alumno a probar con ellas o buscar en otros textos la funcionalidad de estas etiquetas.

<CITE></CITE> Cita de un texto. <CODE></CODE> Código fuente. (parecido a la anterior) <STRONG></STRONG> Mayor importancia. <EM></EM> Enfatizar. <SAMP></SAMP> Caracteres literales. <ABBR></ABBR> Abreviaturas.

♦ Caracteres especiales

Puede que a estas alturas del manual se hayan dado cuenta que en el código, hasta el momento, no he puesto ninguna palabra acentuada, ni ninguna ñ, ni caracteres especiales como paréntesis, corchetes, etc. Ahora sabrán el por qué.



Internet es una red de carácter mundial, y por lo tanto nuestras páginas podrán ser vistas desde

cualquier parte del mundo. Para ello la información viaja a través de máquinas de diferentes fabricantes ubicadas en diversos países. Al pasar por la red caracteres como las palabras acentuadas o la ñ, pueden llegar a máquinas que no los contengan en sus tablas de caracteres por lo que éstos serán interpretados de forma errónea.

Cada ordenador tiene sus caracteres codificados en tablas, de tal forma que lo que pasa por la red

es el número que lo representa. Si dos máquinas tienen diferentes tablas, la información pasada de uno a otro no tendrá nada que ver entre sí. Para ello aparecieron las tablas de caracteres estandarizadas. La más conocida es el ASCII.

Todos los ordenadores de la actualidad tienen una tabla ASCII cuyos primeros 127 caracteres

son iguales. Para los Americanos éstos eran suficientes, pero para otros idiomas no, como por ejemplo el castellano.

Por este motivo, el HTML 2.0 tomó como su tabla estándar la ISO-Latin-1, que comparte con la

tabla ASCII los 127 primeros caracteres e incluye hasta el 255 como caracteres extendidos, pero codificados sólo con los 127 primeros para no tener problemas de transmisión por la red.

Se verá esto un poco más claro. Los caracteres especiales se codifican entre los caracteres & y ;,

que están entre los 127 primeros. Por ejemplo para poner la palabra España se tendría que escribir: España , ya que ñ es la forma de transmitir de forma segura por la red una ñ.

Si se escribiera dentro del código HTML, acentos, eñes, etc. en nuestro ordenador al visualizarlo

lo veríamos correctamente, pero si subimos esta página a algún servidor, seguramente a muchas personas les llegarían símbolos extraños a sus navegadores. Por este motivo habrá que tener cuidado de no cometer estos errores si de verdad se quiere tener una página web de calidad, y legible desde cualquier parte del mundo.

Por supuesto no se verán todos y cada uno de estos caracteres extendidos, se tratarán únicamente

a los que más se usa normalmente: á á. Letra a minúscula y acentuada. Á Á. Letra A mayúscula y acentuada. é é. Letra e minúscula y acentuada. É Á. Letra E minúscula y acentuada. El resto de vocales son idénticas a las anteriores, únicamente cambiando la

primera letra, la que está después del símbolo &. ñ ñ. Letra ñ minúscula.



Ñ Ñ. Letra Ñ mayúscula. ¿ ¿. Abrir interrogación. El cierre de interrogación (?) está dentro de los caracteres

normales, por lo que no tiene ninguna representación especial. ¡ ¡. Abrir admiración. Al cierre de admiración le pasa igual que al cierre de interrogación

visto con anterioridad. º º. Para poner cosas como nº. ª ª. Para Mª, por ejemplo. Para el símbolo ™. © © ® ® Es un espacio en blanco. En el ejemplo veremos el por qué. Código ejemplo 6:

<HTML> <HEAD> <TITLE>Mi sexta página web </TITLE> </HEAD> <BODY> <CENTER> <P>¿Por qué en España hay tantos Monumentos? <P>Santa Mª del Naranco es un Monumento. <P>Copyright © <P>Marca Registrada ® </CENTER> Veamos los espacios.<BR> Veamos los espacios.<BR> </BODY> </HTML>




Como se puede ver, cuando hay espacios al principio de una línea, el navegador los ignora, por

lo que si se quiere obligar a ponerlos, se hará con . Pasa algo parecido con los espacios entre palabras, solamente se toma en consideración uno, el resto se omiten, debiendo obligarle mediante el carácter especial. ♦ Caracteres de control

El lenguaje HTML sólo tiene cuatro caracteres de control, que son <, >, & y “. Pero puede que se

necesite usarlos en nuestros textos, por lo que se tendría que diferenciar los que son caracteres de control de los que no lo son.

La representación de éstos son: < <. Símbolo especial de “menor que”. > >. Símbolo especial de “mayor que”. & &. " “. Símbolo de comillas.



Código ejemplo 7:

<HTML> <HEAD> <TITLE>Mi séptima página web </TITLE> </HEAD> <BODY> <P>Ya sabemos que 5<4 y que 7>3 <P>Bocatas & Company <P>El más pequeño comentó: <I>Mira este "peluco"</I> </BODY> </HTML>




6. LOS ENLACES ♦ ¿Qué es un enlace?

Esta parte seguramente sea la más importante, la que da potencia a este lenguaje. Como ya se comentó al principio de este manual, HTML significa que es un lenguaje de hipertexto, lo que quiere decir que van a tener zonas en los documentos que al pinchar sobre ellas les llevarán a otra parte de ese mismo documento o de cualquier otro. Estas zonas son los enlaces.

La potencia real del HTML bajo la red Internet es que un enlace les puede llevar a cualquier

parte de la red, desde una parte de la misma página, pasando por cualquier otra de nuestro servidor, o viajando a la otra punta de la Tierra.

Podremos programar tres enlaces diferentes: - Enlace a una zona de la misma página. - Enlace a otra página almacenada en el mismo servidor web. - Enlace a una página de cualquier parte del mundo.

♦ La etiqueta de los enlaces

Los tres enlaces vistos se programan mediante la misma etiqueta. <A HREF=”direccion”> Abre enlace a la dirección correspondiente. </A> Cierra enlace. Todo lo que se tiene entre estas dos etiquetas será considerado como un enlace, ya sean gráficos,

texto o las dos cosas. Además decir que todo lo que esté entre dos etiquetas se verá de forma distinta en el navegador (el texto aparecerá subrayado y de diferente color y los gráficos tendrán un borde que los rodeará) y al pasar por encima de ellos el puntero les cambiará por el de una mano. Se supone que el alumno ha usado un navegador alguna vez. En el atributo dirección es donde aparece el nombre del fichero o el URL a donde se desea ir mediante ese enlace.

En el caso de ser un fichero .HTML que está en la misma máquina que el otro, la dirección será

la ruta relativa de ese documento. En el caso de ser otra dirección, ver el apartado siguiente. Véase un ejemplo en el que tenemos 4 fichero:

- El primero tendrá un índice mediante el cual se podrá ir a los otros 3 ficheros, y también unas

flechas para seguir un orden de navegación en caso de que así lo desee el usuario. - El segundo, tercero y cuarto tendrán enlaces para ir al índice o para pasara a la página

siguiente o a la anterior. Con el siguiente gráfico comprenderá mucho mejor el flujo de navegación posible entre las

páginas.



Código del ejemplo 8. Fichero Índice.html:

<HTML> <HEAD> <TITLE>Página Índice</TITLE> </HEAD> <BODY> <CENTER> <H1>Página Índice</H1><BR><BR><BR> <A HREF="1.HTML">Ir a página 1</A><BR><BR> <A HREF="2.HTML">Ir a página 2</A><BR><BR> <A HREF="3.HTML">Ir a página 3</A><BR><BR> </CENTER> </BODY> </HTML>

Código del ejemplo 8. Fichero 1.html:

<HTML> <HEAD> <TITLE>Página 3</TITLE> </HEAD> <BODY> <CENTER> <H1>Página 1</H1><BR><BR><BR> <A HREF="indice.HTML">Ir a página índice</A> <A HREF="2.HTML">Ir a página siguiente.</A> </CENTER> </BODY> </HTML>




<HTML> <HEAD> <TITLE>Página 2</TITLE> </HEAD> <BODY> <CENTER> <H1>Página 2</H1><BR><BR><BR> <A HREF="1.HTML">Ir a página anterior</A> <A HREF="indice.HTML">Ir a página Índice.</A> <A HREF="3.HTML">Ir a página siguiente</A> </CENTER> </BODY> </HTML>


<HTML> <HEAD> <TITLE>Página 3</TITLE> </HEAD> <BODY> <CENTER> <H1>Página 3</H1><BR><BR><BR> <A HREF="2.HTML">Ir a página anterior</A> <A HREF="indice.HTML">Ir a página Índice.</A> </CENTER> </BODY> </HTML>



Visto en el navegador el fichero índice:

Se recomienda hacer este ejercicio e incluso practicas con cualquier otro que se le pueda ocurrir

al alumno. Como ya se comentó, los enlaces son unas de las partes más importantes dentro del lenguaje HTML.

♦ ¿Qué son los URL?

En el apartado anterior se ha comentado que al pulsar un enlace, éste les lleva a otra página de cualquier parte del mundo. Bueno, pues para que esto sea posible, se tendría que indicar al enlace el servicio que proporcionará, y la dirección en la que se ubica. El URL son estas dos cosas juntas, el servicio y la dirección donde se encuentra.

Se pondrán de la siguiente forma:

Servicio://máquina:puerto/ruta/fichero@usuario

A continuación se comentarán cada una de estas partes: Servicio: Se puede indicar que se quiere hacer transferencia de páginas web, ficheros, acceder a

news, hacer telnet, etc. Los servicios disponibles son: http Que es el que normalmene se usará en las páginas. Quiere decir que se conectará a un

servidor que les proporcionará páginas web. ftp Se accederá a servidores anónimos de ficheros. Sirve para poder descargar ficheros desde

estas máquinas.



mailto Al pinchar sobre un enlace mailto les aparecerá una ventana que les permitirá mandar un

mail a la persona que pertenezca la dirección posterior. News les llevará al programa que tenga asociado para visualizar grupos de news. En este caso la

dirección es el nombre del grupo. Telnet Permite conectarese a la máquina de la dirección como si se estuviera en la consola de la

máquina. https Es como el http, pero en este caso se accede a un web que usa encriptación para proteger

los datos. De esta forma se aumenta la seguridad en transacciones que deberían ser confidenciales y que en algunos casos no resultan serlo.

Código ejemplo 9:

<HTML> <HEAD> <TITLE>Página web de enlaces</TITLE> </HEAD> <BODY> <CENTER> <H1>Página web de enlaces</H1><BR><BR><BR> <A HREF="http://www.fi.upm.es">Página de la Facultad de informática.</A><BR> <A HREF="news:es.alt.hespana">Grupo de news de Historia de España.</A><BR> <A HREF="telnet://zipi.fi.upm.es":>Acceso a una máquina mediante telnet.</A><BR> <A HREF="mailto:[email protected]">Mail a la autora de este manual.</A><BR> </CENTER> </BODY> </HTML>




Ya se ha visto como acceder desde una página a otra del mismo servidor, a una de cualquier parte del mundo, así que ya sólo les queda ver como se puede acceder a una parte de una misma página web.

♦ Enlaces a la misma página

Para poder saltar a una zona de la misma página se debe tener una especie de secciones dentro de la misma, haciendo posteriormente enlaces que saltaran a estas posiciones del documento. Para crear una sección utilizaremos la etiqueta:

<A NAME=”nombre de la sección”>

Una vez que se tienen todas las secciones declaradas en el documento, se pueden hacer los

enlaces que salten a las mismas. No es necesario seguir este orden, se puede primero declarar los enlaces y después las secciones, dependerá de cada situación.

Para hacer un enlace a una sección:

<A HREF=”#nombre de la sección”></A>



Código ejemplo 10: <HTML> <HEAD> <TITLE>Página web de enlaces en la misma página</TITLE> </HEAD> <BODY> <CENTER> <A NAME="indice_seccion"> <H1>Página web de enlaces en la misma página.</H1><BR><BR><BR> <A HREF="#primera_seccion">Primera sección</A><BR> <A HREF="#segunda_seccion">Segunda sección</A><BR> <A HREF="#tercera_seccion">Tercera sección</A><BR> <A HREF="#cuarta_seccion">Cuarta sección</A><BR> <BR><BR><BR><BR><BR> <A NAME="primera_seccion"> <H2>PRIMERA SECCION</H2> Esta es una de las primeras secciones que tendremos a lo largo de este ejemplo. <BR><BR><BR><BR> <A HREF="#indice_seccion">Volver al indice</A><BR> <A NAME="segunda_seccion"> <H2>SEGUNDA SECCION</H2> Podríamos seguir escribiendo más secciones. <BR><BR><BR><BR><BR><BR> <A HREF="#indice_seccion">Volver al indice</A><BR> <A NAME="tercera_seccion"> <H2>TERCERA SECCION</H2> <BR><BR><BR><BR><BR> <A HREF="#indice_seccion">Volver al indice</A><BR> <A NAME="cuarta_seccion"> <H2>CUARTA SECCION</H2> <A HREF="#indice_seccion">Volver al indice</A><BR> <BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR> Fin de la historia. </CENTER> </BODY> </HTML>



Vista en un navegador:

Ya para terminar con los enlaces, indicar cómo se puede acceder a una determinada sección de un documento distinto al que se está viendo. Si por ejemplo se quiere acceder a la sección 3 de la página del ejemplo anterior, pero desde cualquier otro documento.

<A HREF=”pagina.html#tercera_seccion”>Enlace</A>



7. LISTAS DE ELEMENTOS En HTML se tiene una gran variedad de tipos de listas, pero todas siguen la misma estructura a la

hora de programarlas.

<tipo_de_lista> <LI>Elemento <LI>Elemento <LI>Elemento </tipo_de_lista>

El nombre de la etiqueta “tipo_de_lista” puede ser de muchos tipos diferentes. Se verán los

básicos.

♦ Listas con símbolos En este caso se utilizará la etiqueta de tipo de lista <UL>. Véase el ejemplo y todo quedará más

claro. Código ejemplo 11:

<HTML> <HEAD> <TITLE>Lista con símbolos</TITLE> </HEAD> <BODY> <UL> <LI>Elemento1 <LI>Elemento2 <LI>Elemento3 </UL> </BODY> </HTML>




Pero no siempre tienen que ser redondos estos símbolos, a partir de la versión 3.2 de HTML se incorporó un atributo a la etiqueta <UL> (cambiando el tipo de símbolo en toda la tabla) y a la <LI> (para cambiar el tipo de símbolo de cada uno de los elementos de la lista). El atributo es TYPE y puede tener tres valores diferentes:

- DISC, que es el que está por defecto, - CIRCLE, que nos da un círculo con el medio transparente, y - SQUARE, que es un cuadrado. Código ejemplo 12:

<HTML> <HEAD> <TITLE>Lista con símbolos</TITLE> </HEAD> <BODY> PRIMERA LISTA <BR> <UL TYPE="CIRCLE"> <LI>Elemento1 <LI>Elemento2 <LI>Elemento3 </UL> <P> SEGUNDA LISTA <BR> <UL TYPE="SQUARE"> <LI>Elemento1 <LI>Elemento2 <LI>Elemento3 </UL> </BODY> </HTML>




♦ Listas ordenadas

En este caso las listas aparecen con algún tipo de ordenación a la izquierda de cada uno de los

elementos, que pueden ser números, letras y números romanos. La etiqueta usada en esta ocasión será <OL> que tiene dos atributos principalmente: - TYPE, que le indicará el tipo de numeración de cada elemento de la lista, es decir, si se

quieren números (TYPE=”1”), letras minúsculas (TYPE=”a”), mayúsculas (TYPE=”A”), números romanos en minúscula (TYPE=”i”), o en mayúscula (TYPE=”i”). Este atributo se incorporó también a <LI> para dar mayor flexibilidad, aunque no tiene demasiado sentido estar cambiando el tipo de numeración en cada elemento.

- START=número, indica el número por el que se empezará a contar los elementos de la lista.

Para <LI> se tiene un atributo más, que sirve para continuar numerando desde ese elemento en

adelante a partir de un número determinado. Este es VALUE=”num”.



Código ejemplo 13:

<HTML> <HEAD> <TITLE>Listas ordenadas</TITLE> </HEAD> <BODY> PRIMERA LISTA ORDENADA<BR> <OL> <LI>Elemento1 <LI>Elemento2 <LI>Elemento3 </OL> <P> SEGUNDA LISTA ORDENADA<BR> <OL TYPE=”A”> <LI>Elemento1 <LI>Elemento2 <LI>Elemento3 </OL> <P> TERCERA LISTA ORDENADA<BR> <OL TYPE=”i” START=”3”> <LI>Elemento1 <LI>Elemento2 <LI>Elemento3 <LI VALUE=”10”>Elemento4 <LI>Elemento5 </OL> </BODY> </HTML>




♦ Listas de definiciones

La etiqueta será <DL>. Estas listas son un tipo que se salen de lo común, no utilizan la etiqueta <LI>, ya que para cada elemento de la lista se tiene que usar dos etiquetas: <DT> para el elemento y <DD> para su definición.

Código ejemplo 14:

<HTML> <HEAD> <TITLE>Listas de definición</TITLE> </HEAD> <BODY> PRIMERA LISTA DE DEFINICIÓN<BR> <DL> <DT>León<DD>Mamífero felino de pelaje amarillo rojizo, cabeza grande, dientes y uñas muy fuertes. <DT>Gallina<DD>Hembra del Gallo.<DD>Persona cobarde. <DT>Jabalí<DD>Mamífero paquidermo, suido, de pelaje tupido y fuerte, colmillos grandes y salientes. </DL> </BODY> </HTML>



8. LOS GRÁFICOS

Los gráficos irán en ficheros a parte. Estos pueden ser de los formatos .gif y .jpg, que son los dos formatos estándar para la mayoría de los navegadores del mercado. Muchos han incluido también el formato .PNG, aunque no todos, por lo que nos es muy normal utilizarlo.

Debido a la velocidad de Internet, que no es mucha, y a la sobrecarga gráfica que se tiende a

incluir en las páginas web debido a su mayor vistosidad, habrá que tener mucho cuidado con lo que pueden llegar a ocupar, y por tanto el tiempo que tardará la página en cargar por completo. A parte de la congestión de la red en determinados momentos o la lentitud de algunos servidores y demás cuestiones ajenas a este seminario, el tiempo de carga viene dado por el tamaño de los ficheros (tanto los .HTML, que son casi despreciables, como los gráficos).

Los dos formatos gráficos estándar tienen un grado de compresión alto, de esta forma ocuparán

mucho menos espacio. De todas formas siempre habrá que tener cuidado con las paletas de colores. Una imagen de 16 millones de colores ocupará mucho más que otra de 256, y en muchas ocasiones no se notará a penas la diferencia.

Otra forma de que ocupen menos es haciendo que tengan una compresión con pérdida de

información. Dicho todo esto, se pasa a lo que nos ocupa, que es el lenguaje HTML. La etiqueta de las

imágenes es <IMG> y puede tener los siguientes atributos: - SRC=”fichero_gráfico” es para indicar cual es la ruta donde se encuentra el fichero gráfico. - ALT=”texto_alternativo”. Hay navegadores que no aceptan gráficos, es decir, las páginas

web las verán en modo texto, aunque tienden a desaparecer, y los que sí los aceptan casi siempre tienen una opción para deshabilitarlos y así navegar mucho más rápido. El texto alternativo saldrá en lugar de las imágenes. Además en muchos navegadores, además de ver las imágenes, el texto alternativo sale como información adicional.

- WIDTH y HEIGHT, es decir, ancho y alto de la imagen en pixels. Es muy importante poner

estos dos atributos, ya que de esta manera antes de cargar la imagen completa se puede tener la página perfectamente maquetada, sin cambiar el diseño después de cargados todos los gráficos.

- BORDER, es el tamaño del borde de las imágenes cuando estas hacen de enlaces. La mayoría

de las veces no se desea este borde, ya que hace que pierda vistosidad, por lo que se le pondrá a cero.

- TOP, MIDDLE, BOTTOM (por defecto), LEFT y RIGHT. Son las posiciones del texto con

respecto a la imagen y se asocian al atributo ALIGN.

- VSPACE y HSPACE, que nos marcan la distancia vertical y horizontal de la imagen con respecto al texto y al resto de imágenes respectivamente.



Resumiendo, que para poner un gráfico en pantalla, sólo se tiene obligación de poner: <IMG SRC=”grafico.gif”> Pero siempre será mejor definir el resto de los atributos para: - Que el navegador sepa como maquetar la página sin necesidad de tener todos los gráficos

cargados. - Que no les aparezcan bordes indeseables alrededor de los gráficos. - Que se pueda ver la página en navegadores en modo texto o aquellos en modo gráfico que

tengan estos deshabilitados.

Código ejemplo 15:

<HTML> <HEAD> <TITLE>Los gráficos</TITLE> </HEAD> <BODY> Primer gráfico:<IMG SRC="grafico.gif" WIDTH="37" HEIGHT="63" BORDER="0" ALT="Este es el texto alternativo de mi primer gráfico"> Si seguimos escribiendo, el texto nos aparece a continuación de la imagen.<BR><BR><BR><BR> Segundo gráfico:<IMG SRC="grafico.gif" WIDTH="37" HEIGHT="63" BORDER="3" VSPACE="20" HSPACE="100" ALT="Texto alternativo del segundo gráfico"><BR><BR><BR><BR> Tercer gráfico:<A HREF="otra.html"><IMG SRC="grafico.gif" WIDTH="37" HEIGHT="63" ALIGN="Right" BORDER="0" ALT="Imagen alineada a la derecha, con un enlace y sin borde"></A><BR><BR><BR><BR> Cuarto gráfico:<A HREF="otra.html"><IMG SRC="grafico.gif" WIDTH="37" HEIGHT="63" ALIGN="Left" ALT="Imagen alineada a la izquierda, con un enlace y sin el atributo BORDER"></A><BR> </BODY> </HTML>



9. TABLAS

Todos conocen las tablas que se puede crear en cualquier procesador de textos, pero en HTML no sólo sirven para esto, sino que es la mejor forma de maquetar texto y gráficos en posiciones que simplemente con el atributo ALIGN no se puede llegar a conseguir.

Se tienen 3 etiquetas básicas: - <TABLE> con su cierre </TABLE>, que sirve para identificar que lo que se tiene entre estas

dos etiquetas es una tabla.

- <TR> con su cierre </TR>. Esto les define una fila de la tabla.

- <TD> junto con </TD>. En este caso les dice que se tiene una celda.

Para definir una tabla, primero se dará a conocer las características de la tabla, después las de cada fila y dentro de estas, cada celda. Se verá el primer ejemplo de tablas, una de las más sencillas.

Código ejemplo 16:

<HTML> <HEAD> <TITLE>Nuestra primera tabla</TITLE> </HEAD> <BODY> <TABLE> <TR> <TD>1</TD> <TD>2</TD> <TD>3</TD> </TR> <TR> <TD>4</TD> <TD>5</TD> <TD>6</TD> </TR> <TR> <TD>7</TD> <TD>8</TD> <TD>9</TD> </TR> </TABLE> </BODY> </HTML>




Hasta ahora parecen muy sencillas, pero se irá complicando poco a poco. Véase las características de las tablas, de las filas y por último, las de las celdas.

♦ La tabla

Se verán 5 atributos sencillos para la etiqueta <TABLE>, que son: - BORDER, para especificar el grosor del borde de la tabla. En el ejemplo anterior no se veía

el borde, esto es debido a que por defecto el borde de la tabla es cero. - CELLSPACING, controla el espacio entre las celdas contado en pixels.

- CELLPADDING, establece el número de pixels que habrá entre el borde de una celda y el

contenido de la misma.

- WIDTH, es para la anchura de la tabla y se controla por el número de pixels o por un porcentaje.

- ALIGN, como en todos los casos anteriores, les permite alinear la tabla a la izquierda

(LEFT), derecha (RIGHT) o centro (CENTER).



Código ejemplo 17:

<HTML> <HEAD> <TITLE>Nuestra segunda tabla</TITLE> </HEAD> <BODY> <TABLE BORDER="5" CELLSPACING="10" CELLPADDING="15"> <TR> <TD>1</TD> <TD>2</TD> <TD>3</TD> </TR> <TR> <TD>4</TD> <TD>5</TD> <TD>6</TD> </TR> <TR> <TD>7</TD> <TD>8</TD> <TD>9</TD> </TR> </TABLE> </BODY> </HTML>




♦ Las filas

Ya se ha comentado en los apartados anteriores que para declarar una fila se usa la etiqueta <TR>, pues en esta ocasión se verá uno de los atributos que afectan a esta etiqueta y por tanto a las filas.

- ALIGN, para alinear el contenido de las celdas de una fila horizontalmente, es decir,

izquierda, derecha y centrado. Código ejemplo 18:

<HTML> <HEAD> <TITLE>Nuestra tercera tabla</TITLE> </HEAD> <BODY> <TABLE BORDER="5" CELLSPACING="10" CELLPADDING="15" WIDTH="75%" ALIGN="CENTER"> <TR ALIGN="RIGHT"> <TD>1</TD> <TD>2</TD> <TD>3</TD> </TR> <TR ALIGN="CENTER"> <TD>4</TD> <TD>5</TD> <TD>6</TD> </TR> <TR ALIGN="LEFT"> <TD>7</TD> <TD>8</TD> <TD>9</TD> </TR> </TABLE> </BODY> </HTML>




♦ Las celdas

Para las celdas tenemos dos etiquetas, <TD>, que es la que se ha estado usando desde el primer momento y <TH>, que es como la anterior, pero sirve como encabezados ya que por defecto pone la letra de esa celda en negrita y centrada. Los atributos de estas etiquetas son:

- ALIGN, igual que siempre, pero solo para una celda. - WIDTH, especifica el ancho de las celdas. Se especifica en pixels o en porcentaje.

- COLSPAN, es para especificar el número de celdas de la fila que se unirán a la actual y hacia

la derecha. Con el ejemplo se verá todo más claro.

- ROWSPAN, hace lo mismo que el atributo anterior, pero esta vez para el número de celdas hacia abajo que se unirán para formar una sola.



Se pasa al ejemplo para aclarar sobre todo estos dos últimos atributos. Código ejemplo 19:

<HTML> <HEAD> <TITLE>Nuestra tercera tabla</TITLE> </HEAD> <BODY> <TABLE BORDER="5" CELLSPACING="10" CELLPADDING="15" WIDTH="75%" ALIGN="CENTER"> <TR ALIGN="RIGHT"> <TD COLSPAN="2">1</TD> <TD>2</TD> </TR> <TR ALIGN="CENTER"> <TD ROWSPAN="2">4</TD> <TD>5</TD> <TD>6</TD> </TR> <TR ALIGN="LEFT"> <TD>7</TD> <TD>8</TD> </TR> </TABLE> </BODY> </HTML>




10. TEXTO AVANZADO

Por supuesto, no sólo se va a poder cambiar el tamaño del texto, o ponerlo en negrita cursiva, etc. Según se iba avanzando en las versiones de HTML, se fue buscando una mejor apariencia, por lo que se sacó la etiqueta FONT. Con ella se puede dar un formato mucho más fino a nuestros textos, desde cambiar el color, hasta el tipo de letra.

Los atributos de la etiqueta FONT pueden ser: - SIZE, que como se pueden imaginar, sirve para cambiar el tamaño de la letra de forma

diferente a la etiqueta H1, H2, etc. El tamaño por defecto que se verá en los navegadores es el número 3. También se puede indicar incrementos y decrementos en el tamaño de letra actual (el último definido), esto ser hará poniendo como tamaño –1, -2, -3, +1, +2 , +3, etc.

- FACE, con el que se indica el tipo de letra que se quiere. Pero esto tienen un inconveniente, y

es que no se sabe los tipos de letra que tiene instalado el ordenador donde se verá la página (puede ser de cualquier punto de la red). Esto se soluciona poniendo varios tipos de letra separados por comas, y si el usuario no tiene ninguna de ellas instaladas, se seguirá con el tipo de letra por defecto. Algunos tipos de letra pueden ser: Helvetica, Arial, Times, etc. Aunque parezca algo muy normal cambiar el tipo de letra en un procesador de textos, no lo es tanto en un página web, ya que no se sabe la apariencia final que puede tener en diferentes usuarios de esa página.

- COLOR, que sirve para cambiar el color del texto. Esto se puede hacer mediante el nombre

del color (en ingles), o mediante el porcentaje de rojo, verde y azul (código RGB) del mismo y expresado en hexadecimal.

Respecto al tema de los porcentajes de rojo, verde y azul, indicar el número hexadecimal irá

precedido de un símbolo #, y que los dos primeros dígitos hexadecimales corresponden a la cantidad de rojo, los dos siguiente a la cantidad de verde y los dos últimos a la cantidad de azul (Red, Green, Blue -> RGB).



Código ejemplo 20:

<HTML> <HEAD> <TITLE>Texto avanzado</TITLE> </HEAD> <BODY> <P><FONT FACE="Arial" SIZE="5" COLOR="red">Este texto está en rojo, con tamaño 5 y Arial.</FONT> <P><FONT FACE="Courier New" SIZE="+3" COLOR="#6666CC">Courier New con texto +3 y color en hexadecimal.</FONT> <P><FONT FACE="Times New Roman" SIZE="-2" COLOR="#CCFF00">Times New Roman, a -2 y con color en hexadecimal.</FONT> </BODY> </HTML>




11. FORMULARIOS Cuando se quiere que las personas que visiten la página comenten algo sobre la misma, se puede

poner una dirección de correo electrónico. Los formularios son para cuando se quiere que éstos envíen una información concreta y prefijada por el usuario, es decir, como cualquier formulario que rellenamos cuando se va a renovar el carnet de identidad por ejemplo. Estos les llegarán en forma de mail o se introducirán como datos en un cgi (programa que se alberga en el servidor). Sólo se verá la opción del correo electrónico, ya que los cgis se salen del cometido de este seminario, en el que sólo se dará una pequeña introducción.

Esta parte seguramente sea la más complicada de comprender, por lo que se irá paso a paso

exponiendo gran cantidad de ejemplos.

♦ <FORM> Para comenzar, todo formulario debe ir entre las etiquetas. <FORM> Comienza el formulario. </FORM> Concluye el formulario. Esta etiqueta tiene dos propiedades principalmente: - ACTION, define la URL que controlará la información. Si es un cgi, será la dirección del

mismo, y si es por mail, pues será una dirección de correo electrónico. Como podrá comprobar el alumno, los datos por mail llegan bastante mal formateados, con la información amontonada y difícil de leer. Por esta razón se suelen usar formularios para los cgis.

- METHOD, es la forma en que se mandará el formulario, para este seminario usaremos sólo la

opción METHOD=POST, quedando por parte del alumno la investigación de otros métodos.

Dentro de estas etiquetas habrá una serie de componentes que conformarán el formulario. Cada uno de éstos tiene asociado un nombre de variable donde se almacenará el valor que el usuario de la página introduzca y que después se nos enviará, en nuestro caso, por correo. Para poner el nombre de variable, cada componente tiene un atributo llamado NAME. Por tanto, los formularios serán una colección de variables a rellenar. ♦ Cajas de texto

Éstos sirven para introducir textos pequeños y en una sola línea. Puede ser texto normal o como si fuera una caja de texto donde introducir un password. Las etiquetas son:

<INPUT TYPE=TEXT NAME=”variable1”> <INPUT TYPE=PASSWORD NAME=”variable2”> Para esta etiqueta tenemos tres atributos:



- SIZE, tamaño de la caja de texto. - MAXLENGTH, número máximo de caracteres que el usuario podrá introducir.

- VALUE, si se quiere que la caja aparezca con un texto por defecto, este es el lugar para

ponerlo. ♦ Cuadros de texto

Es otra forma de introducir texto, pero esta vez será un campo grande y con varias líneas que el usuario podrá rellenar.

<TEXTAREA NAME=”variable3”>Texto por defecto</TEXTAREA> Tiene dos atributos: - ROWS y COLS, son las filas y columnas que tendrá la caja de texto.

♦ Opciones (Checkbox)

Las opciones o checkbox, que son para seleccionar alguna opción de una lista dada. Para crear

esa lista será, por ejemplo: Sr.<INPUT NAME=”var4” TYPE=RADIO VALUE=”Hombre”> Sra.<INPUT NAME=”var4” TYPE=RADIO VALUE=”Mujer”>

Les daría a elegir si es un señor o una señora, y dependiendo de la elección, se asignaría a la

variable “var4” el valor “Hombre” o “Mujer”. Si se pone en una de las opciones el atributo CHECKED, se quedaría elegida por defecto.

♦ Opciones desplegables (ComboBoxes)

Es una especie de cuadro de texto con un botón pequeño pegado a su derecha, que les indicará que para rellenar ese cuadro, se tiene que elegir una de las opciones de la lista. Por ejemplo:

<SELECT NAME=”var5”> <OPTION>Churros <OPTION>Porras <OPTION>Donut <OPTION>Palmera </SELECT> La etiqueta SELECT tendrá dos atributos: - SIZE, es el número de opciones que puedo ver dentro de la lista, es decir, si tengo 10

opciones y solo puedo ver 5, habrá una barra de desplazamiento para poder ver todas.



- MULTIPLE, para cuando se quiere elegir más de una opción.

La etiqueta OPTION tendrá otros dos: - VALUE, el valor que asigna a la variable en caso de se elegida. - SELECTED, para seleccionar una por defecto.

♦ Los botones

Una vez que se tiene el formulario lleno de información, se oprime un botón para indicar que puede transferir los datos. Se tienen dos tipos de botones, uno para enviar el formulario y otro para limpiarlo.

<INPUT TYPE=SUBMIT> <INPUT TYPE=RESET> Para poner el texto que se quiere a los botones, se le indicará mediante el atributo VALUE.



12. MARCOS

Un marco es una zona del navegador donde se puede cargar una página web. Por tanto se puede dividir la pantalla en varios marcos y cargar diferentes páginas en ellos. Se dará una introducción a este tema, exponiendo los puntos básicos con los que el alumno podrá comenzar a investigar. Por ejemplo:

En el frame o marco de la izquierda podríamos poner una especie de índice de la página y en el

de la derecha presentar el contenido de cada una de las secciones del índice, de esta forma la navegación será sencilla, ya que se podrá ir a cualquier parte pinchando en el índice que siempre e tendrá visible en el marco de la izquierda.

Para hacer esto, se tiene que tener un fichero html que declare los marcos y después otro .html

para cargar en cada frame. Por ejemplo, para hacer una página como la del dibujo anterior se necesitan 3 ficheros, uno que declare los marcos, otro para el marco 1 y otro para el marco 2. El que les interesa ahora es el programa los frames. Todas las etiquetas que se exponen a continuación irán en este archivo.

♦ Etiqueta <FRAMESET>

Sirve, entre otras cosas, para indicar al navegador el número de frames y el tamaño de los mismos. Algunos de sus atributos son:

- COLS, que indica que los marcos declarados por esta etiqueta formarán columnas. Se pueden

poner en tantos por ciento, con número exacto de pixel, o indeterminado con * .

- ROWS, igual, pero para que los marcos formen filas. ♦ Etiqueta <FRAME>

Define las características de un marco determinado. Una vez que se ha programado cuantos marcos habrá y lo que ocuparán, ahora definimos las características de cada uno de estos marcos mediante la etiqueta <FRAME>, cuyos atributos son:

- NAME, para darle un nombre al marco para posteriores utilizaciones. - SRC, indica el URL que irá en este marco. - SCROLLING, para decirle si tendrá o no barras de desplazamiento. - NORESIZE, para que el usuario no pueda cambiar el tamaño del marco. - FRAMEBORDER, indica el grosor del borde del frame.

♦ Uso de los marcos



Todo esto está muy bien, pero ¿Cómo se puede hacer que al pinchar sobre un enlace del frame de la izquierda, se les cambie la página del marco de la derecha?.

Esto es muy sencillo, simplemente habrá que poner un enlace del tipo: <A HREF=”fichero.html” TARGE=”nombre_marco”> Ahora se entiende por qué se le da nombre a los marcos.



13. MAPAS DE IMÁGENES.

Se ha visto anteriormente dos maneras distintas de enlazar una página con otra: por medio de un enlace de texto.

Se puede utilizar una única imagen para enlazar con varias páginas, yendo a una u otra según la zona en donde se pulse el ratón. Este tipo de imágenes se llaman mapas.

Se verá cómo se crea un mapa partiendo de una imagen, y cómo se implementa dicho mapa con

el lenguaje HTML en nuestra página.

Hay dos tipos de mapas:

Mapas gestionados por el servidor 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 van obteniendo las distintas coordenadas. Cuando se pulsa el ratón en un punto determinado, el navegador envía esas coordenadas al servidor, y éste comprueba en un fichero MAP (situado en su directorio cgi-bin) cuál es la página que se corresponde con estas coordenadas, envía esta información al navegador, y éste solicita a su vez al servidor que le enlace con dicha página.

Estos mapas, que fueron los que aparecieron inicialmente, tienen una ventaja: que pueden ser utilizados por todos los navegadores, incluso por las versiones más antiguas.

Pero tienen varios inconvenientes: No todos los servidores tienen implementado el programa CGI necesario para que pueda funcionar un mapa de este tipo. Además hay que conocer el tipo de servidor (NCSA, el más común, o CERN), pues el código a aplicar es distinto en un caso u otro.. Por otra parte, al requerir un trasiego de información entre el navegador y el servidor, el tiempo de respuesta es mayor que en el otro tipo, como veremos. Mapas gestionados por el cliente

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

En este tipo de mapas, al ir desplazando el cursor se observa que en ciertas zonas se convierte en el símbolo normal para enlazar con otras páginas (una mano, habitualmente). Si se pulsa en estas zonas activas (hotspots), el navegador consulta con el documento HTML que ha recibido, y decide a qué página o dirección corresponde esa zona activa.

Es decir, no necesita enviar la información al servidor y esperar la respuesta de éste, con lo que el proceso es más rápido que en el caso anterior, reduciéndose además el tráfico de datos y la sobrecarga al servidor. Otras ventajas son que al pasar por una zona activa se muestra la dirección a la



que se corresponde (al contrario que en el caso anterior, en la que sólo se ven unas coordenadas). Además, estos mapas se pueden utilizar off-line, al contrario también 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 los navegadores, como en el caso anterior, aunque sí por la mayoría de los utilizados actualmente, desde las versiones siguientes: Netscape 2.0, Microsoft Explorer 2.0, Mosaic 2.1, etc. Pero se puede obviar este inconveniente suministrando enlaces alternativos para los navegadores que no implementen este tipo de mapas, como veremos.

En lo que sigue, se va a ver exclusivamente cómo implementar este tipo de mapas, es decir, mapas gestionados por el cliente (client-side image maps). Confección de la imagen del mapa

Se hará con un programa gráfico, y pueden utilizarse los formatos GIF o JPG.

Se va a crear un mapa para utilizarlo en el ejemplo práctico de este capítulo, con dos zonas activas rectangulares.

Figura 13.1

Se confecciona con un programa gráfico la imagen que nos va a servir como mapa, tal como lo muestra la Figura 13.1, que todavía no es un mapa.

Para definir un área activa rectangular, se necesita conocer las coordenadas de su ángulo superior izquierdo y las de su ángulo inferior derecho.

Estas coordenadas se obtienen con el programa gráfico con el que se ha confeccionado la imagen. Estos valores son los siguientes:

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

Ya se tienen los datos necesarios para escribir el código HTML que convierta esta imagen en

un mapa.



Código HTML para definir un mapa gestionado por el cliente

En este caso, el código que debemos escribir es el siguiente:

Código ejemplo 21:

<MAP NAME=="mi_mapa"> <AREA SHAPE ="RECT" COORDS="46,40,250,75" HREF="aficiones.htm"> <AREA SHAPE="RECT" COORDS="46,100,250,135" HREF="paginasfavoritas.htm"> <AREA SHAPE="DEFAULT" NOHREF> </MAP> <IMG SRC="pulsar.gif" USEMAP="#mi_mapa"> </MAP>


Véase ahora cada una de las etiquetas: <MAP NAME="mi_mapa"> Esta es la etiqueta de apertura del mapa, y en donde se define su nombre. <AREA SHAPE="RECT" COORDS="46,40,250,75" HREF=" aficiones.htm ">



Esta etiqueta define la primera zona activa. Se indica que su forma (shape , en inglés) es rectangular, y que las coordenadas de su ángulo superior izquierdo son (46,40), y que las del ángulo inferior derecho son (250,75). A continuación se indica cuál es enlace que se desea obtener, en este caso con la página aficiones.htm. La siguiente etiqueta es análoga, y se refiere a la segunda zona activa. <AREA SHAPE="DEFAULT" NOHREF> Con esta etiqueta se define el área completa del mapa, indicando que su forma es la que tiene por defecto (default ), o sea rectangular. Si se quisiera que el mapa no abarcara la totalidad de la imagen, o incluso que tuviera una forma distinta, habría que indicarlo aquí, en lugar de la instrucción DEFAULT, haciendo uso del mismo tipo de instrucciones que las de las zonas activas. A continuación se indica, con NOHREF, que el área completa de la imagen es una zona no activa, excepto en las áreas definidas anteriormente como activas. </MAP> Etiqueta de cierre del mapa. <IMG SRC="pulsar.gif" USEMAP="#mi_mapa"> Con esta etiqueta se solicita primero al servidor que envíe una imagen llamada pulsar.gif. Con USEMAP="#mi_mapa" se indica que esta imagen es el mapa definido anteriormente con ese nombre, y que debe actuar en consecuencia a las pulsaciones del ratón, solicitando un enlace determinado en las zonas activas, o no haciendo nada en el resto. Enlaces alternativos de texto

Como se ha dicho anteriormente, no todos los navegadores implementan este tipo de mapas gestionados por el cliente. Por ello, es necesario suministrar unos enlaces alternativos convencionales de texto, para obviar este inconveniente.

Por ejemplo, a continuación del mapa, se pueden poner estos dos enlaces de texto, correspondientes a las dos zonas activas (reduciendo la fuente, para hacerlo menos antiestético): <FONT SIZE=-1> <A HREF=" aficiones.htm ">Mis aficiones</A> | <A HREF=" paginasfavoritas.htm">Mis páginas favoritas</A> </FONT>



Que, una vez de colocado a continuación del código del mapa y centrado todo, resulta como:

Zonas activas en forma de círculos o polígonos

En el ejemplo que se ha visto anteriormente se han definido las dos zonas activas en forma de rectángulos. Pero se pueden definir también estas zonas activas como círculos o como polígonos.

Para definir una zona activa circular es necesario conocer las coordenadas de su centro (x,y) y la longitud de su radio (r). Una vez sabidos estos datos, la etiqueta es como sigue: <AREA SHAPE="CIRCLE" COORDS="x,y,r" HREF="dirección_de_la_página">

Para definir una zona activa poligonal hay que conocer las coordenadas de los distintos puntos (x1,y1), (x2,y2), (x3,y3), etc. Con estos datos, la etiqueta se escribe como sigue: <AREA SHAPE="POLYGON" COORDS="x1,y1,x2,y2,x3,y3,..." HREF="dirección_de_la_página"> Programas editores de mapas

Se ha visto cómo se debe escribir el código HTML para convertir una imagen en un mapa. Pero hay programas que lo hacen de una manera automática.

Partiendo de una imagen (confeccionada con un programa gráfico normal), con este tipo de programas no hay más que señalar con el ratón qué áreas se desean que sean activas (y qué forma deben tener) e indicar los enlaces para cada zona activa. Entonces, el programa escribe todo el código HTML de una forma automática, sin necesidad de tener que suministrar los datos de las coordenadas de cada zona activa. Programas:

Para PC y Unix: Mapedit. Para el Mac: WebMap. Existen otras herramientas para crear mapas.

html - calciffer.files.wordpress.com · etiquetas del fichero .html y sacará el resultado por...

Documents