Lenguaje HTML

Anexo 2

Adaptacin: Aldo Velsquez Huerta febrero de 2012

24

Lenguaje HTML Anexo 2

Cada vez ms empresas, grandes organizaciones e incluso particulares en general tienen la necesidad de publicar informacin en Internet, dando a conocer sus productos, informando a los clientes, o simplemente presentando nuestras aficiones o quizs el curriculum al resto del mundo. Todos estos tipos de pginas 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 grficos) se puede acceder a otras posiciones de la pgina. Durante todo este manual se intentar explicar lo ms claramente posible algunas de las caractersticas ms importantes de HTML, sin pretender hacer un desarrollo completo, sino intentando guiar al lector en sus primeros pasos pudiendo despus ampliar su formacin con otros textos. Se expondr tambin gran cantidad de ejemplos, tanto el cdigo como la visin final en alguno de los navegadores del mercado. Si desea comprobar el funcionamiento de los mismos, modificarlos con sus propias pruebas, etc., slo tendr que escribir el cdigo 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 continuacin grabarlo en un fichero con extensin .HTM o .HTML (en caso que el sistema operativo admita nombres largos). Para visualizar el resultado en su navegador habitual, ejectelo, vaya al men "Archivo/Abrir pgina" y busque el fichero con el cdigo 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 intrprete es el navegador, por lo que para desarrollar pginas web slo necesitamos un editor de texto ASCII (por ejemplo en Notepad) y un navegador para poder ver el resultado de lo que estamos haciendo.
1.

VERSIONES DE HTML

HTML 2.0 Internet, en sus comienzos, prcticamente slo era usada para la difusin de proyectos de investigacin 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 estticos, sino que lo ms importante de las pginas web era la informacin que contenan. Por esta razn las primeras versiones de HTML, cuando lleg el verdadero desarrollo de Internet, no tenan un control demasiado avanzado de los documentos.

HTML 3.0
La compaa del navegador Netscape comenz a ampliar las funcionalidades de este lenguaje, pero sin seguir ningn estndar, por lo que el IETF (organismo que decida los estndares de Internet) decidi elaborar la versin 3.0. Pero sta result ser demasiado compleja para la poca, porque no tuvo la aceptacin esperada en el mercado.

25

Lenguaje HTML Anexo 2

HTML 3.2
Las empresas lderes en el mercado del momento (Netscape, Sun, Microsoft, etc... ) crearon un nuevo comit para la realizacin de estndares 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 versin 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 da en las versiones de HTML no es demasiado difcil, ya que siempre tenemos a nuestra disposicin gratuitamente todos los manuales de las versiones que van apareciendo en algunas pginas web. No podemos pasar por alto el resto de lenguajes que siguieron apareciendo a raz del HTML y que en unos casos le complementan y en otros le sustituyen por completo, como son HTML Dinmico, JavaScript, Java, XML, VBScript, etc., pero estos se salen del campo de este seminario.

2. PRIMEROS PASOS

Las etiquetas
Para comenzar, se ver que el HTML es un lenguaje que se basa en SGML (estndar internacional para la definicin de mtodos de representacin de texto en forma electrnica no ligados a ningn sistema ni a ningn dispositivo), lo que quiere decir que todo ir encerrado entre dos etiquetas, normalmente, una que indica el comienzo de algn elemento del documento y otra que indica el final del mismo. Estas son de la forma:
<ETIQUETA parmetros> </ETIQUETA>

Cada una va entre los signos de "menor que " (<) y "mayor que " (>). Como podemos ver, para cerrar el elemento ir una "barra" (/) despus de la indicacin de comienzo de una etiqueta. Al principio y final del texto tenemos la etiqueta HTML, que indica que estamos ante una pgina web programada en HTML.

<HTML> Indica el comienzo de un documento en formato HTML. </HTML> Indica el final del documento.
Estas dos etiquetas siempre aparecern en los ficheros programados en HTML para indicarle al navegador que lo que est interpretando es lenguaje HTML.

26

Lenguaje HTML Anexo 2

El interior de un documento.
Como se ha comentado en el apartado anterior, toda pgina 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 informacin relativa a la pgina 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 ttulo de la pgina de la siguiente forma:
<TITLE> Ttulo de nuestra pgina web </TITLE>

Ms adelante, cuando se tengan los conocimientos bsicos, se comentara algunas cosas ms que se pueden hacer con las cabeceras. En el cuerpo ir la informacin que se ver en la pantalla del navegador y por lo tanto, la mayora de las etiquetas que veremos en el resto del seminario. Vase un ejemplo: Cdigo ejemplo 1:
<HTML> <HEAD> <TITLE> Titulo de mi pgina</TITLE> </HEAD> <BODY> Esta podra ser mi primera pgina Web, creada en lenguaje HTML. </BODY> </HTML>

Visto en el navegador:

3. ETIQUETAS BSICAS

27

Lenguaje HTML Anexo 2

Para dar formato al texto y grficos que aparecen en el cuerpo, se tiene una serie de etiquetas bsicas:

<BR> Salto de lnea. Es para obligar al navegador a meter un salto de lnea despus de esta etiqueta. No hay que cerrarla. Si no se pone esta etiqueta y el texto rebasa el tamao de la ventana del navegador, los saltos de lnea se producen automticamente. Por tanto esta etiqueta se usa para obligar a que se produzcan estos saltos en sitios determinados. <HR> Barra horizontal. Introduce una lnea horizontal que cruza la pantalla. Tampoco hay que cerrarla. Adems a esta etiqueta sae le pueden poner atributos que modifiquen el aspecto de esta barra, como son WIDTH (para el tamao de izquierda a derecha) y SIZE (para el espesor, de arriba abajo). Ya veremos un ejemplo de cmo 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 seales no lo tendr en cuenta el navegador. Hay una excepcin 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: Cdigo 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 cmo 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> <!-- Este es un comentario, por lo que no aparecer en el navegador -- > <HR WIDTH="25%" SIZE="2"> <HR WIDTH="50%" SIZE="3"> <HR WIDTH="75%" SIZE="4"> <HR WIDTH="100%" SIZE="5"> </BODY> </HTML>

Vista en el navegador:

28

Lenguaje HTML Anexo 2

4. MAQUETACIN BSICA.
En esta parte se expondr algunas etiquetas dedicadas a la maquetacin del texto y los grficos de las pginas. Se separan en 3 subconjuntos:

Maquetacin de prrafos
Se vern algunas etiquetas encargadas de dar a un prrafo completo un aspecto especial: <P> Nuevo prrafo. Al poner esta etiqueta se inserta una lnea en blanco para delimitar el texto anterior del posterior que corresponderan a prrafos distintos. Como es lgico 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 cdigo fuente de programas. Adems, al cerrar la etiqueta insertar un salto de lnea. <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> Direccin 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 mrgenes a ambos lados del texto, por lo que ste queda en el medio y diferente del resto. Cdigo ejemplo 3:
<HTML> <HEAD>

29

Lenguaje HTML Anexo 2

<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 tamao.</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>

Vista en el navegador:

Si se observa un poco la imagen que aparece en el navegador, se ver que el texto preformateado tiene un pequeo problema, y es que no hace los saltos de lnea automticos, por lo que se le tiene que obligar a que los haga poniendo etiquetas <BR>.

30

Lenguaje HTML Anexo 2

Cdigo 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>

Vista en el navegador:

Maquetacin de caracteres
Como es lgico tambin se puede cambiar el tamao del texto, poner letras en cursiva, negrita, subndices, etc. A continuacin se ver como. <H1></H1> Es un tamao de letra muy grande para ttulos, o cabeceras de documentos, etc. Pero se tienen otras para tamaos diferentes. Todas estas etiquetas son, de mayor tamao 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 del mismo tamao y se suelen usar para escribir cdigo fuente.

31

Lenguaje HTML Anexo 2

<SUP></SUP> Superndice. Como por ejemplo: x = y2 <SUB></SUB> Subndice. Como por ejemplo: xi,j = 5 <BIG></BIG> Aumenta tamao de letra. <SMALL></SMALL> Disminuye el tamao de letra. Vase un ejemplo muy sencillo con algunas de estas etiquetas. Cdigo ejemplo 5:
<HTML> <HEAD> <TITLE>Mi quinta pagina web </TITLE> </HEAD> <BODY> <CENTER> <H1>Texto <H2>Texto <H3>Texto <H4>Texto <H5>Texto <H6>Texto con con con con con con H1</H1> H2</H2> H3</H3> H4</H4> H5</H5> 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>

Vista en el navegador:

32

Lenguaje HTML Anexo 2

Maquetacin de frases
Son poco utilizados, ya que no permite saber exactamente como quedar finalmente en el navegador, por lo que simplemente se citarn, 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> Cdigo 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 cdigo, hasta el momento, no he puesto ninguna palabra acentuada, ni ninguna , ni caracteres especiales como parntesis, corchetes, etc. Ahora sabrn el por qu. Internet es una red de carcter mundial, y por lo tanto nuestras pginas podrn ser vistas desde cualquier parte del mundo. Para ello la informacin viaja a travs de mquinas de diferentes fabricantes ubicadas en diversos pases. Al pasar por la red caracteres como las palabras acentuadas o la , pueden llegar a mquinas que no los contengan en sus tablas de caracteres por lo que stos sern interpretados de forma errnea. Cada ordenador tiene sus caracteres codificados en tablas, de tal forma que lo que pasa por la red es el nmero que lo representa. Si dos mquinas tienen diferentes tablas, la informacin pasada de uno a otro no tendr nada que ver entre s. Para ello aparecieron las tablas de caracteres estandarizadas. La ms 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 estndar la ISO-Latin-1, que comparte con la tabla ASCII los 127 primeros caracteres e incluye hasta el 255 como caracteres extendidos, pero codificados slo con los 127 primeros para no tener problemas de transmisin por la red. Se ver esto un poco ms claro. Los caracteres especiales se codifican entre los caracteres & y ;, que estn entre los 127 primeros. Por ejemplo para poner la palabra Espaa se tendra que escribir: Espa&ntilde;a , ya que &ntilde; es la forma de transmitir de forma segura por la red una . Si se escribiera dentro del cdigo HTML, acentos, ees, etc. en nuestro ordenador al visualizarlo lo veramos correctamente, pero si subimos esta pgina a algn servidor, seguramente a muchas personas les llegaran smbolos extraos a sus navegadores. Por este motivo habr que tener cuidado de no cometer estos errores si de verdad se quiere tener una pgina web de calidad, y legible desde cualquier parte del mundo.

33

Lenguaje HTML Anexo 2

Por supuesto no se vern todos y cada uno de estos caracteres extendidos, se tratarn nicamente a los que ms se usa normalmente: &aacute; . Letra a minscula y acentuada. &Aacute; . Letra A mayscula y acentuada. &eacute; . Letra e minscula y acentuada. &Eacute; . Letra E minscula y acentuada. El resto de vocales son idnticas a las anteriores, nicamente cambiando la primera letra, la que est despus del smbolo &. &ntilde; . Letra minscula. &Ntilde; . Letra mayscula. &iquest; . Abrir interrogacin. El cierre de interrogacin (?) est dentro de los caracteres normales, por lo que no tiene ninguna representacin especial. &iexcl; . Abrir admiracin. Al cierre de admiracin le pasa igual que al cierre de interrogacin visto con anterioridad. &ordm; . Para poner cosas como n. &ordf; . Para M, por ejemplo. &#153; Para el smbolo . &copy; &reg; &nbsp; Es un espacio en blanco. En el ejemplo veremos el por qu. Cdigo ejemplo 6:
<HTML> <HEAD> <TITLE>Mi sexta p&aacute;gina web </TITLE> </HEAD> <BODY> <CENTER> <P>&iquest;Por qu&eacute; en Espa&ntilde;a hay tantos Monumentos? <P>Santa M&ordf; del Naranco es un Monumento. <P>Copyright &copy; <P>Marca Registrada &reg; </CENTER> Veamos los espacios.<BR> &nbsp;&nbsp;&nbsp;&nbsp;Veamos los espacios.<BR> </BODY> </HTML>

Vista en el navegador:

34

Lenguaje HTML Anexo 2

Como se puede ver, cuando hay espacios al principio de una lnea, el navegador los ignora, por lo que si se quiere obligar a ponerlos, se har con &nbsp;. Pasa algo parecido con los espacios entre palabras, solamente se toma en consideracin uno, el resto se omiten, debiendo obligarle mediante el carcter especial. Caracteres de control El lenguaje HTML slo tiene cuatro caracteres de control, que son <, >, & y . Pero puede que se necesite usarlos en nuestros textos, por lo que se tendra que diferenciar los que son caracteres de control de los que no lo son. La representacin de stos es: &lt; <. Smbolo especial de menor que. &gt; >. Smbolo especial de mayor que. &amp; &. &quot; . Smbolo de comillas.

Cdigo ejemplo 7:
<HTML> <HEAD> <TITLE>Mi s&eacute;ptima p&aacute;gina web </TITLE> </HEAD> <BODY> <P>Ya sabemos que 5&lt;4 y que 7&gt;3 <P>Bocatas &amp; Company <P>El m&aacute;s peque&ntilde;o coment&oacute;: <I>Mira este &quot;peluco&quot;</I> </BODY> </HTML>

Vista de navegador:

35

Lenguaje HTML Anexo 2

6. LOS ENLACES
Qu es un enlace?
Esta parte seguramente sea la ms 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 llevarn 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 pgina, 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 pgina. Enlace a otra pgina almacenada en el mismo servidor web. Enlace a una pgina 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 direccin correspondiente.

</A> Cierra enlace.

Todo lo que se tiene entre estas dos etiquetas ser considerado como un enlace, ya sean grficos, texto o las dos cosas. Adems 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 grficos tendrn 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 direccin es donde aparece el nombre del fichero o el URL a donde se desea ir mediante ese enlace.

36

Lenguaje HTML Anexo 2

En el caso de ser un fichero .HTML que est en la misma mquina que el otro, la direccin ser la ruta relativa de ese documento. En el caso de ser otra direccin, ver el apartado siguiente. Vase un ejemplo en el que tenemos 4 ficheros: El primero tendr un ndice mediante el cual se podr ir a los otros 3 ficheros, y tambin unas flechas para seguir un orden de navegacin en caso de que as lo desee el usuario. El segundo, tercero y cuarto tendrn enlaces para ir al ndice o para pasar a la pgina siguiente o a la anterior.

Con el siguiente grfico comprender mucho mejor el flujo de navegacin posible entre las pginas.

Cdigo del ejemplo 8. Fichero ndice.html:

<HTML> <HEAD> <TITLE>P&aacute;gina &Iacute;ndice</TITLE> </HEAD> <BODY> <CENTER> <H1>P&aacute;gina &Iacute;ndice</H1><BR><BR><BR> <A HREF="1X.HTML">Ir a p&aacute;gina 1</A><BR><BR> <A HREF="2X.HTML">Ir a p&aacute;gina 2</A><BR><BR> <A HREF="3X.HTML">Ir a p&aacute;gina 3</A><BR><BR> </CENTER> </BODY> </HTML>

Cdigo del ejemplo 8. Fichero 1X.html:

<HTML> <HEAD> <TITLE>P&aacute;gina 3</TITLE> </HEAD> <BODY> <CENTER> <H1>P&aacute;gina 1</H1><BR><BR><BR> <A HREF="indice.HTML">Ir a p&aacute;gina &iacute;ndice</A> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <A HREF="2X.HTML">Ir a p&aacute;gina siguiente.</A> </CENTER> </BODY> </HTML>

Cdigo del ejemplo 8. Fichero 2X.html:

<HTML> <HEAD> <TITLE>P&aacute;gina 2</TITLE> </HEAD> <BODY>

37

Lenguaje HTML Anexo 2

<CENTER> <H1>P&aacute;gina 2</H1><BR><BR><BR> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <A HREF="1X.HTML">Ir a p&aacute;gina anterior</A> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <A HREF="indice.HTML">Ir a p&aacute;gina &Iacute;ndice.</A> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <A HREF="3X.HTML">Ir a p&aacute;gina siguiente</A> </CENTER> </BODY> </HTML>

Cdigo del ejemplo 8. Fichero 3X.html:

<HTML> <HEAD> <TITLE>P&aacute;gina 3</TITLE> </HEAD> <BODY> <CENTER> <H1>P&aacute;gina 3</H1><BR><BR><BR> <A HREF="2X.HTML">Ir a p&aacute;gina anterior</A> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <A HREF="indice.HTML">Ir a p&aacute;gina &Iacute;ndice.</A> </CENTER> </BODY> </HTML>

Visto en el navegador el fichero ndice:

Qu son los URL? En el apartado anterior se ha comentado que al pulsar un enlace, ste les lleva a otra pgina de cualquier parte del mundo. Bueno, pues para que esto sea posible, se tendra que

38

Lenguaje HTML Anexo 2

indicar al enlace el servicio que proporcionar, y la direccin en la que se ubica. El URL son estas dos cosas juntas, el servicio y la direccin donde se encuentra. Se pondrn de la siguiente forma: Servicio://mquina:puerto/ruta/fichero@usuario A continuacin se comentarn cada una de estas partes: Servicio: Se puede indicar que se quiere hacer transferencia de pginas web, ficheros, acceder a news, hacer telnet, etc. Los servicios disponibles son: http Que es el que normalmene se usar en las pginas. Quiere decir que se conectar a un servidor que les proporcionar pginas web. ftp Se acceder a servidores annimos de ficheros. Sirve para poder descargar ficheros desde estas mquinas.

mailto Al pinchar sobre un enlace mailto les aparecer una ventana que les permitir mandar un mail a la persona que pertenezca la direccin posterior. News les llevar al programa que tenga asociado para visualizar grupos de news. En este caso la direccin es el nombre del grupo. Telnet Permite conectarese a la mquina de la direccin como si se estuviera en la consola de la mquina.

Cdigo ejemplo 9:

Ya se ha visto como acceder desde una pgina a otra del mismo servidor, a una de cualquier parte del mundo, as que ya slo les queda ver como se puede acceder a una parte de una misma pgina web.

39

Lenguaje HTML Anexo 2

Enlaces a la misma pgina

Para poder saltar a una zona de la misma pgina se debe tener una especie de secciones dentro de la misma, haciendo posteriormente enlaces que saltaran a estas posiciones del documento. Para crear una seccin utilizaremos la etiqueta:
<A NAME=nombre de la seccin>

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 despus las secciones, depender de cada situacin. Para hacer un enlace a una seccin:
<A HREF=#nombre de la seccin></A>

Cdigo ejemplo 10:

<HTML> <HEAD> <TITLE>P&aacute;gina web de enlaces en la misma p&aacute;gina</TITLE> </HEAD> <BODY> <CENTER> <A NAME="indice_seccion"> <H1>P&aacute;gina web de enlaces en la misma p&aacute;gina.</H1><BR><BR><BR> <A HREF="#primera_seccion">Primera secci&oacute;n</A><BR> <A HREF="#segunda_seccion">Segunda secci&oacute;n</A><BR> <A HREF="#tercera_seccion">Tercera secci&oacute;n</A><BR> <A HREF="#cuarta_seccion">Cuarta secci&oacute;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&iacute;amos seguir escribiendo m&aacute;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">

40

Lenguaje HTML Anexo 2

<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 cmo se puede acceder a una determinada seccin de un documento distinto al que se est viendo. Si por ejemplo se quiere acceder a la seccin 3 de la pgina del ejemplo anterior, pero desde cualquier otro documento.
<A HREF=pagina.html#tercera_seccion>Enlace</A>

41

Lenguaje HTML Anexo 2

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 vern los bsicos. Listas con smbolos En este caso se utilizar la etiqueta de tipo de lista <UL>. Vase el ejemplo y todo quedar ms claro. Cdigo ejemplo 11:
<HTML> <HEAD> <TITLE>Lista con s&iacute;mbolos</TITLE> </HEAD> <BODY> <UL> <LI>Elemento1 <LI>Elemento2 <LI>Elemento3 </UL> </BODY> </HTML>

Visto en el navegador:

42

Lenguaje HTML Anexo 2

Pero no siempre tienen que ser redondos estos smbolos, a partir de la versin 3.2 de HTML se incorpor un atributo a la etiqueta <UL> (cambiando el tipo de smbolo en toda la tabla) y a la <LI> (para cambiar el tipo de smbolo 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 crculo con el medio transparente, y - SQUARE, que es un cuadrado.

Cdigo ejemplo 12:

<HTML> <HEAD> <TITLE>Lista con s&iacute;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>

Visto en el navegador:

43

Lenguaje HTML Anexo 2

Listas ordenadas
En este caso las listas aparecen con algn tipo de ordenacin a la izquierda de cada uno de los elementos, que pueden ser nmeros, letras y nmeros romanos. La etiqueta usada en esta ocasin ser <OL> que tiene dos atributos principalmente: - TYPE, que le indicar el tipo de numeracin de cada elemento de la lista, es decir, si se quieren nmeros (TYPE=1), letras minsculas (TYPE=a), maysculas (TYPE=A), nmeros romanos en minscula (TYPE=i), o en mayscula (TYPE=i). Este atributo se incorpor tambin a <LI> para dar mayor flexibilidad, aunque no tiene demasiado sentido estar cambiando el tipo de numeracin en cada elemento. - START=nmero, indica el nmero por el que se empezar a contar los elementos de la lista. Para <LI> se tiene un atributo ms, que sirve para continuar numerando desde ese elemento en adelante a partir de un nmero determinado. Este es VALUE=num. Cdigo 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>

Visto en el navegador:

44

Lenguaje HTML Anexo 2

Listas de definiciones
La etiqueta ser <DL>. Estas listas son un tipo que se salen de lo comn, 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 definicin. Cdigo ejemplo 14:
<HTML> <HEAD> <TITLE>Listas de definici&oacute;n</TITLE> </HEAD> <BODY> PRIMERA LISTA DE DEFINICI&Oacute;N<BR> <DL> <DT>Le&oacute;n<DD>Mam&iacute;fero felino de pelaje amarillo rojizo, cabeza grande, dientes y u&ntilde;as muy fuertes. <DT>Gallina<DD>Hembra del Gallo.<DD>Persona cobarde. <DT>Jabal&iacute;<DD>Mam&iacute;fero paquidermo, suido, de pelaje tupido y fuerte, colmillos grandes y salientes. </DL> </BODY> </HTML>

Visto en el navegador:

45

Lenguaje HTML Anexo 2

7. LOS GRFICOS Los grficos irn en ficheros a parte. Estos pueden ser de los formatos .gif y .jpg, que son los dos formatos estndar para la mayora de los navegadores del mercado. Muchos han incluido tambin 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 grfica que se tiende a incluir en las pginas 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 pgina en cargar por completo. A parte de la congestin de la red en determinados momentos o la lentitud de algunos servidores y dems cuestiones ajenas a este seminario, el tiempo de carga viene dado por el tamao de los ficheros (tanto los .HTML, que son casi despreciables, como los grficos). Los dos formatos grficos estndar tienen un grado de compresin alto, de esta forma ocuparn 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 ms 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 compresin con prdida de informacin. Dicho todo esto, se pasa a lo que nos ocupa, que es el lenguaje HTML. La etiqueta de las imgenes es <IMG> y puede tener los siguientes atributos: - SRC=fichero_grfico es para indicar cual es la ruta donde se encuentra el fichero grfico. - ALT=texto_alternativo. Hay navegadores que no aceptan grficos, es decir, las pginas web las vern en modo texto, aunque tienden a desaparecer, y los que s los aceptan casi siempre tienen una opcin para deshabilitarlos y as navegar mucho ms rpido. El texto

46

Lenguaje HTML Anexo 2

alternativo saldr en lugar de las imgenes. Adems en muchos navegadores, adems de ver las imgenes, el texto alternativo sale como informacin 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 pgina perfectamente maquetada, sin cambiar el diseo despus de cargados todos los grficos. - BORDER, es el tamao del borde de las imgenes cuando estas hacen de enlaces. La mayora 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 imgenes respectivamente.

Resumiendo, que para poner un grfico en pantalla, slo se tiene obligacin de poner:
<IMG SRC=grafico.gif>

Pero siempre ser mejor definir el resto de los atributos para: Que el navegador sepa como maquetar la pgina sin necesidad de tener todos los grficos cargados. Que no les aparezcan bordes indeseables alrededor de los grficos. Que se pueda ver la pgina en navegadores en modo texto o aquellos en modo grfico que tengan estos deshabilitados. Cdigo ejemplo 15:
<HTML> <HEAD> <TITLE>Los gr&aacute;ficos</TITLE> </HEAD> <BODY> Primer gr&aacute;fico:<IMG SRC="imagen.jpg" WIDTH="62" HEIGHT="65" BORDER="0" ALT="Este es el texto alternativo de mi primer grfico"> Si seguimos escribiendo, el texto nos aparece a continuaci&oacute;n de la imagen. <BR> <BR><BR><BR> Segundo gr&aacute;fico:<IMG SRC="imagen.jpg" WIDTH="63" HEIGHT="65" BORDER="3" VSPACE="20" HSPACE="100" ALT="Texto alternativo del segundo gr&aacute;fico"> <BR> <BR><BR><BR> Tercer gr&aacute;fico:<A HREF="otra.html"><IMG SRC="imagen.jpg" WIDTH="63" HEIGHT="65" ALIGN="Right" BORDER="0" ALT="Imagen alineada a la derecha, con un enlace y sin borde"></A> <BR> <BR><BR><BR> Cuarto gr&aacute;fico:<A HREF="otra.html"><IMG SRC="imagen.jpg" WIDTH="63" HEIGHT="65" ALIGN="Left" ALT="Imagen alineada a la izquierda, con un enlace y sin el atributo BORDER"></A><BR> </BODY>

47

Lenguaje HTML Anexo 2

</HTML>

Visto en el navegador:

9. TABLAS
Todos conocen las tablas que se puede crear en cualquier procesador de textos, pero en HTML no slo sirven para esto, sino que es la mejor forma de maquetar texto y grficos en posiciones que simplemente con el atributo ALIGN no se puede llegar a conseguir. Se tienen 3 etiquetas bsicas: <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 caractersticas de la tabla, despus las de cada fila y dentro de estas, cada celda. Se ver el primer ejemplo de tablas, una de las ms sencillas. Cdigo ejemplo 16:
<HTML> <HEAD> <TITLE>Nuestra primera tabla</TITLE> </HEAD> <BODY>

48

Lenguaje HTML Anexo 2

<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. Vase las caractersticas de las tablas, de las filas y por ltimo, las de las celdas.

La tabla
Se vern 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 vea 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.

49

Lenguaje HTML Anexo 2

CELLPADDING, establece el nmero 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 nmero 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).

Cdigo 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>

Visto en el navegador:

50

Lenguaje HTML Anexo 2

Las filas Ya se ha comentado en los apartados anteriores que para declarar una fila se usa la etiqueta <TR>, pues en esta ocasin 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. Cdigo 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>

51

Lenguaje HTML Anexo 2

</TABLE> </BODY> </HTML>

Cdigo ejemplo 18:

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 nmero de celdas de la fila que se unirn a la actual y hacia la derecha. Con el ejemplo se ver todo ms claro. ROWSPAN, hace lo mismo que el atributo anterior, pero esta vez para el nmero de celdas hacia abajo que se unirn para formar una sola.

Se pasa al ejemplo para aclarar sobre todo estos dos ltimos atributos. Cdigo ejemplo 19:
<HTML> <HEAD> <TITLE>Nuestra tercera tabla</TITLE> </HEAD> <BODY>

52

Lenguaje HTML Anexo 2

<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>

Visto en el navegador:

9. TEXTO AVANZADO
Por supuesto, no slo se va a poder cambiar el tamao del texto, o ponerlo en negrita cursiva, etc.

53

Lenguaje HTML Anexo 2

Segn 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 ms 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 tamao de la letra de forma diferente a la etiqueta H1, H2, etc. El tamao por defecto que se ver en los navegadores es el nmero 3. Tambin se puede indicar incrementos y decrementos en el tamao de letra actual (el ltimo definido), esto ser har poniendo como tamao 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 pgina (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 pgina web, ya que no se sabe la apariencia final que puede tener en diferentes usuarios de esa pgina. 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 (cdigo RGB) del mismo y expresado en hexadecimal.

Respecto al tema de los porcentajes de rojo, verde y azul, indicar el nmero hexadecimal ir precedido de un smbolo #, y que los dos primeros dgitos 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). Cdigo ejemplo 20:
<HTML> <HEAD> <TITLE>Texto avanzado</TITLE> </HEAD> <BODY> <P><FONT FACE="Arial" SIZE="5" COLOR="red">Este texto est en rojo, con tamao 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>

Visto en el navegador:

54

Lenguaje HTML Anexo 2

10. FORMULARIOS
Cuando se quiere que las personas que visiten la pgina comenten algo sobre la misma, se puede poner una direccin de correo electrnico. Los formularios son para cuando se quiere que stos enven una informacin 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 llegarn en forma de mail o se introducirn como datos en un cgi (programa que se alberga en el servidor). Slo se ver la opcin del correo electrnico, ya que los cgis se salen del cometido de este seminario, en el que slo se dar una pequea introduccin. Esta parte seguramente sea la ms 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 informacin. Si es un cgi, ser la direccin del mismo, y si es por mail, pues ser una direccin de correo electrnico. Como podr comprobar el alumno, los datos por mail llegan bastante mal formateados, con la informacin amontonada y difcil de leer. Por esta razn se suelen usar formularios para los cgis. METHOD, es la forma en que se mandar el formulario, para este seminario usaremos slo la opcin METHOD=POST, quedando por parte del alumno la investigacin de otros mtodos.

55

Lenguaje HTML Anexo 2

Dentro de estas etiquetas habr una serie de componentes que conformarn el formulario. Cada uno de stos tiene asociado un nombre de variable donde se almacenar el valor que el usuario de la pgina introduzca y que despus 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 sern una coleccin de variables a rellenar.

Cajas de texto
stos sirven para introducir textos pequeos y en una sola lnea. 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, tamao de la caja de texto. MAXLENGTH, nmero mximo 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 lneas 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 opcin 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 dara a elegir si es un seor o una seora, y dependiendo de la eleccin, se asignara a la variable var4 el valor Hombre o Mujer. Si se pone en una de las opciones el atributo CHECKED, se quedara elegida por defecto.

Opciones desplegables (ComboBoxes)

Es una especie de cuadro de texto con un botn pequeo 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

56

Lenguaje HTML Anexo 2

<OPTION>Donut <OPTION>Palmera </SELECT> La etiqueta SELECT tendr dos atributos: SIZE, es el nmero 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 ms de una opcin.

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 informacin, se oprime un botn 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.

11. MARCOS
Un marco es una zona del navegador donde se puede cargar una pgina web. Por tanto se puede dividir la pantalla en varios marcos y cargar diferentes pginas en ellos. Se dar una introduccin a este tema, exponiendo los puntos bsicos con los que el alumno podr comenzar a investigar. Por ejemplo:

57

Lenguaje HTML Anexo 2

En el frame o marco de la izquierda podramos poner una especie de ndice de la pgina y en el de la derecha presentar el contenido de cada una de las secciones del ndice, de esta forma la navegacin 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 despus otro .html para cargar en cada frame. Por ejemplo, para hacer una pgina 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 continuacin irn en este archivo.

Etiqueta <FRAMESET>
Sirve, entre otras cosas, para indicar al navegador el nmero de frames y el tamao de los mismos. Algunos de sus atributos son: COLS, que indica que los marcos declarados por esta etiqueta formarn columnas. Se pueden poner en tantos por ciento, con nmero exacto de pixel, o indeterminado con *. ROWS, igual, pero para que los marcos formen filas.

Etiqueta <FRAME>
Define las caractersticas de un marco determinado. Una vez que se ha programado cuantos marcos habr y lo que ocuparn, ahora definimos las caractersticas 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 tamao del marco. FRAMEBORDER, indica el grosor del borde del frame.

Uso de los marcos

Todo esto est muy bien, pero Cmo se puede hacer que al pinchar sobre un enlace del frame de la izquierda, se les cambie la pgina 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.

12. MAPAS DE IMGENES.

Se ha visto anteriormente dos maneras distintas de enlazar una pgina con otra: por medio de un enlace de texto. Se puede utilizar una nica imagen para enlazar con varias pginas, yendo a una u otra segn la zona en donde se pulse el ratn. Este tipo de imgenes se llaman mapas. Se ver cmo se crea un mapa partiendo de una imagen, y cmo se implementa dicho mapa con el lenguaje HTML en nuestra pgina.

58

Lenguaje HTML Anexo 2

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 ratn en un punto determinado, el navegador enva esas coordenadas al servidor, y ste comprueba en un fichero MAP (situado en su directorio cgibin) cul es la pgina que se corresponde con estas coordenadas, enva esta informacin al navegador, y ste solicita a su vez al servidor que le enlace con dicha pgina. Estos mapas, que fueron los que aparecieron inicialmente, tienen una ventaja: que pueden ser utilizados por todos los navegadores, incluso por las versiones ms antiguas. Pero tienen varios inconvenientes: No todos los servidores tienen implementado el programa CGI necesario para que pueda funcionar un mapa de este tipo. Adems hay que conocer el tipo de servidor (NCSA, el ms comn, o CERN), pues el cdigo a aplicar es distinto en un caso u otro. Por otra parte, al requerir un trasiego de informacin 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 smbolo normal para enlazar con otras pginas (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 pgina o direccin corresponde esa zona activa. Es decir, no necesita enviar la informacin al servidor y esperar la respuesta de ste, con lo que el proceso es ms rpido que en el caso anterior, reducindose adems el trfico de datos y la sobrecarga al servidor. Otras ventajas son que al pasar por una zona activa se muestra la direccin a la que se corresponde (al contrario que en el caso anterior, en la que slo se ven unas coordenadas). Adems, estos mapas se pueden utilizar off-line, al contrario tambin 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 mayora de los utilizados actualmente, desde las versiones siguientes: 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 cmo implementar este tipo de mapas, es decir, mapas gestionados por el cliente (client-side image maps). Confeccin de la imagen del mapa Se har con un programa grfico, y pueden utilizarse los formatos GIF o JPG.

59

Lenguaje HTML Anexo 2

Se va a crear un mapa para utilizarlo en el ejemplo prctico de este captulo, con dos zonas activas rectangulares.

Figura 13.1 Se confecciona con un programa grfico la imagen que nos va a servir como mapa, tal como lo muestra la Figura 13.1, que todava 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 grfico 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 pginas favoritas": (46,100) y (250,135) Ya se tienen los datos necesarios para escribir el cdigo HTML que convierta esta imagen en un mapa.

Cdigo HTML para definir un mapa gestionado por el cliente En este caso, el cdigo que debemos escribir es el siguiente: Cdigo ejemplo 21:
<MAP NAME="mi_mapa"> <AREA SHAPE="RECT" coords="46,40,250,75" href="aficiones.html"> <AREA SHAPE="RECT" COORDS="46,100,250,135" HREF="paginasfavoritas.html"> <AREA SHAPE="DEFAULT" NOHREF> </MAP> <IMG SRC="pulsar.gif" USEMAP="#mi_mapa">

Visto en el navegador:

60

Lenguaje HTML Anexo 2

Vase 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 ingls) 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 continuacin se indica cul es enlace que se desea obtener, en este caso con la pgina aficiones.htm. La siguiente etiqueta es anloga, 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, habra que indicarlo aqu, en lugar de la instruccin DEFAULT, haciendo uso del mismo tipo de instrucciones que las de las zonas activas. A continuacin 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 enve una imagen llamada pulsar.gif. Con USEMAP="#mi_mapa" se indica que esta imagen es el mapa definido

61

Lenguaje HTML Anexo 2

anteriormente con ese nombre, y que debe actuar en consecuencia a las pulsaciones del ratn, 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 continuacin del mapa, se pueden poner estos dos enlaces de texto, correspondientes a las dos zonas activas (reduciendo la fuente, para hacerlo menos antiesttico): <FONT SIZE=-1> <A HREF=" aficiones.htm ">Mis aficiones</A> | <A HREF=" paginasfavoritas.htm">Mis pginas favoritas</A> </FONT> Que, una vez de colocado a continuacin del cdigo del mapa y centrado todo, resulta como:

Zonas activas en forma de crculos o polgonos En el ejemplo que se ha visto anteriormente se han definido las dos zonas activas en forma de rectngulos. Pero se pueden definir tambin estas zonas activas como crculos o como polgonos. 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="direccin_de_la_pgina">

62

Lenguaje HTML Anexo 2

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="direccin_de_la_pgina"> Programas editores de mapas Se ha visto cmo se debe escribir el cdigo HTML para convertir una imagen en un mapa. Pero hay programas que lo hacen de una manera automtica. Partiendo de una imagen (confeccionada con un programa grfico normal), con este tipo de programas no hay ms que sealar con el ratn 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 cdigo HTML de una forma automtica, sin necesidad de tener que suministrar los datos de las coordenadas de cada zona activa.