En esta primera práctica de la obra se propone crear un sitio Web REAL poniendo en práctica los conocimientos adquiridos hasta ahora. En él incluiremos imágenes, varios titulares párrafos de texto de distinto tipo y enlaces hipertexto a otras páginas.
En la figura 2.12 se muestra una captura de un navegador visitando la página tal y como debe quedar al final. Se propone al lector intentar imitar la apariencia de esta página usando únicamente las etiquetas HTML explicadas hasta ahora.
Figura 2.12. La práctica 1 propone realizar un página a partir de lo mostrado en esta
figura.
Para empezar a realizar la página debe abrirse un editor de textos o de HTML (es indiferente). Algunos ejemplos de programas que pueden servir son notepad™, emacs™, vi™, HomeSite™, etc. Una vez abierto se puede empezar a escribir la página tal y como se ha explicado, comenzando por la cabecera y siguiendo con el resto de la página. A continuación se muestran las primeras líneas que podría contener el archivo a modo de elemplo:
<html> <head> <title>
La chistera - Humor y magia </title>
</head> <body>
Tras escribir el código debe guardarse con terminación “.html” y ya está lista para ser visualizada con cualquier navegador. Tras abrir éste hay que seleccionar la opción Archivo/Abrir...Examinar... (o similar) y elegir el archivo en el que habíamos guardado la página. En ese momento debe mostrarse en pantalla la página creada. Lo habitual es tener que realizar cambios en el código HTML, volver al navegador, volver a hacer cambios y así hasta que se obtiene el resultado deseado. ¡suerte!
La solución
En esta primera práctica se va a mostrar a continuación el código completo de la página resultado. Por supuesto, conviene intentarlo antes de mirarlo. También hay que tener en cuenta que no hay un único resultado y es posible que un código ligeramente diferente de lugar a una página prácticamente idéntica al verla con el navegador.
<html>
<head> <title>
La chistera - Humor y magia </title> </head> <body> <center> <h1> <img src="imagenes/chistera.gif"> LA CHISTERA - Humor y magia </h1>
</center> <h2>
Quienes somos </h2>
<p>La chistera es un grupo de artistas
dedicados al mundo de la magia, la comedia y el espectáculo. Entre nosotros podrás encontrar humoristas, magos, showmen, etc.</p>
<p>Si usted o su empresa necesita crear
un espectáculo y no quiere quedar decepcionado no dude en escribirnos AHORA MISMO. Nuestra dirección es:</p> <center>
[email protected] </center>
<h2>
</h2>
<p>Cada día le mostramos ejemplos
distintos de nuestro amplísimo y novedoso repertorio de chistes: <blockquote>
Era un tío tan gafe, tan gafe, que se sentó en un pajar y se clavó la aguja.
</blockquote> <blockquote>
Doctor, Doctor, ¿cuanto tiempo me queda de vida? <br>
5... 4... 3... 2... </blockquote>
</p> <h2>
Enlaces a páginas relacionadas </h2>
<p>
<a href="http://www.ciudadfutura.com/areirse ">¡A Reírse Toca, ¡Ja, ja, ja!
</a>: Si te aburres, estás deprimido,
o simplemente quieres reír, pásate por mi página y disfrutarás de los más de 110 chistes que tiene. ¡Con posibilidad de enviar tú el tuyo!
<p> <a
href="http://www.geocities.com/BourbonStreet/Delta/3543/" >1er Concurso de feos por
Internet</a>: 1er Concurso de Feos por Internet participa y gana tu premio. </p> <p>
<a
href="http://www.geocities.com/Hollywood/8620">Albert Grau’s Web</a>
: En esta pagina encontrarás un listado de dichos
populares, y las 50 cosas que se deberían cambiar para mejorar la vida terrícola de nuestro querido planeta Tierra
</p>
<hr size="5"> <address>
Página creada por el equipo de programación Web de LA CHISTERA <br> Ultima actualización: 32-12-1997 ;-)
</address> </body> </html>
Nota
Una vez hemos comprobado que con nuestro navegador habitual la página es mostrada correctamente conviene probarla con otros incluyendo alguno en modo texto (Lynx) y diferentes tamaños de pantalla. A veces las diferencias serán sorprendentes.
Anclas
Después de realizar nuestra primera práctica continuamos los enlaces hipertexto con unos elementos muy relacionados con ellos: las anclas, que nos permitirán crear enlaces especificando a que lugar concreto de una página queremos saltar.
¿Qué es un ancla?
Un enlace normal tiene la estructura que podemos ver en la figura 2.13.
Figura 2.13. Estructura de los enlaces normales. Al pulsar sobre el texto activo no
podemos elegir el lugar de la página al que saltamos, iremos siempre al comienzo.
Desde una página cualquiera y en cualquier lugar de ella se escribe el código para crear un enlace. Cuando se pulsa sobre el texto activo se salta al comienzo de otra página, tal y como indica la flecha. Usando enlaces a anclas se puede cambiar este comportamiento.
Un ancla es una marca que se sitúa en un punto determinado de una página. Posteriormente se podrá crear un enlace a ese ancla de manera que al pulsar sobre el texto apropiado en vez de saltar a otra página se salta al lugar donde esté el ancla, es decir, ya no se va al comienzo de la página como con los enlaces vistos hasta ahora. Dicho de otra forma usando anclas es posible que un enlace apunte al lugar concreto de una página que se desee.
Creando anclas
Para crear anclas usamos, al igual que para crear enlaces, la etiqueta<a>, sin embargo no debe confundirse el lector porque aunque ambos elementos estén relacionados y se use la misma etiqueta para crearlos las funciones
de cada uno son radicalmente diferentes. Las anclas sólo son marcas y son invisibles cuando visualizamos la página con el navegador. Por esta razón las anclas no definen ningún texto activo.
A pesar de ello es habitual encontrar texto entre las instrucciones de inicio y de fin como en el siguiente ejemplo:
<a name="nombreAncla">Comienzo</a>
Este texto no tiene ningún significado especial y será interpretado por los navegadores de igual forma que el texto de alrededor.
Como se ha adelantado en el ejemplo anterior, al crear anclas no se emplea el atributo ’href’. En su lugar se usa otro llamado ’name’. Con este atributo se da un nombre al ancla que luego nos servirá para referirse a ella. Un ejemplo donde la utilidad de las anclas se hace evidente es en aquellas páginas en las que nos encontramos una lista ordenada alfabéticamente. Si la lista es muy larga moverse hasta la letra S, por ejemplo puede hacerse molesto. Pero usando anclas el autor de la página puede incluir todas las letras al principio de manera que si se pulsa sobre una letra se salta al lugar de la lista donde empiecen las entradas de la letra S. En la figura 2.14 podemos ver un ejemplo real capturado de la página del buscador español OZÚ ™.
Figura 2.14. En la sección superior puede verse ver una serie de enlaces (las letras
mayúsculas) a anclas. En la sección superior se muestra el lugar al que se ha saltado
al pulsar sobre la letra S. Podemos deducir que antes de la palabra Salud hay un ancla.
En este caso se detallan todas las secciones del Web ordenadas alfabéticamente. Al principio de la página hay un listado con todas las letras del abecedario de manera que al pulsar sobre una letra vas al lugar de la página donde están las secciones que empiezan con esa letra. ¿Cómo se hace esto? Es muy sencillo, el proceso consta de dos pasos:
1. Primero hay que insertar el ancla en el lugar de la página donde se quiere poder saltar. Tomando como ejemplo una una página web que contiene un diccionario se emplearía el siguiente código:
... <a name="S"> </a> Salud Santa Claus Seguridad ...
2. En segundo lugar se crea un enlace al principio de la página un que apunte al ancla. En este ejemplo el código usado es:
<a href="#S">S </a>
En este ejemplo al pulsar sobre la letra S se salta directamente al lugar de la página donde se encuentra la palabra salud, que es la primera de las que comienzan con “S”, que es el efecto deseado. Para especificar que el enlace apunta a un ancla se ha incluido un signo # seguido del nombre del ancla.
La estructura de un enlace a un ancla que se encuentre en la misma página como el de este ejemplo es la que puede verse en la figura 2.15.
Figura 2.15. Estructura de un enlace a un ancla de la misma página. Cuando pulsamos
sobre el enlace el navegador nos transporta hasta el lugar de la página donde está el ancla.
En ella hemos usado un dibujo de un ancla para señalar donde existe un ancla, en un documento real en realidad no existe ningún elemento visual que la identifique, tal y como hemos visto en el ejemplo de OZÚ™.
Enlaces a anclas de otras páginas
También es posible crear un enlace a un ancla de otra página. Para ello hay que incluir la página, bien sea mediante su dirección URL o mediante su ruta de directorios, y posteriormente poner el símbolo “#” seguido del nombre del ancla. En este caso es obligatorio poner el nombre del archivo, aunque seaindex.html. Siguiendo con el ejemplo anterior para crear un enlace a los términos que empiezan por ’S’ de la página donde se situó el ancla puede emplearse el siguiente código:
<a href="http://www.ozu.es/a-z.html#S">Letra S</a>
Suponiendo que el diccionario estaba en un archivo llamadoa-z.htmlen el servidor de nombre www.ozu.es [http://www.ozu.es].
La estructura de los enlaces es ligeramente más complicada que los anteriores. Para crearlos hay que seguir los siguientes pasos:
1. Se parte de un ancla existente en otra página o se crea uno 2. Se crea un enlace a esa página
3. Se añade a la dirección del enlace el símbolo ’#’ seguido del nombre del ancla
En primer lugar deberemos crear un ancla en la página objetivo. Después deberemos escribir el enlace con la sintaxis explicada anteriormente indicando el nombre de la página y el nombre del ancla. La flecha de la figura 2.16 nos indica el salto que se producirá al pulsar sobre el enlace. Ya no iremos al comienzo de la página como pasaba con los enlaces normales sino que iremos al lugar concreto que hemos elegido (y donde hay un ancla).
Figura 2.16. Estructura de un enlace a un ancla de otra página. Cuando pulsamos sobre
el enlace vamos hasta otra página, pero no al comienzo sino al lugar concreto donde está
el ancla.
Sugerencia
Aunque pueden crearse enlaces a anclas que se encuentren en páginas creadas por otros, no es posible modificar las anclas existentes o añadir anclas nuevas con lo que debemos confiar que el autor haya puesto una donde interese. Para averiguar si es así se puede revisar el código de dicha página buscando una cadena de la forma<a name="...">. Hay que tener cuidado con este tipo de enlaces porque el autor de la otra página puede decidir quitar el ancla y todos los enlaces que hagan referencia a ella quedarán inutilizados.
Uso de enlace y ancla en la misma etiqueta
Hasta ahora hemos visto el uso de la etiqueta<a ...>..</a%gt; de dos maneras diferentes: para crear enlaces hipertexto o para crear anclas. En el primero de los casos se usaba el atributo ’href’ para especificar la página que se querías enlazar. En el segundo caso, al crear el ancla, se usaba el atributo ’name’ para darle un nombre con el que poder identificarle. Pero ¿qué ocurre si usamos los dos atributos a la vez?, ¿Está permitido? La respuesta es SÍ. En ese caso se estará creando ambas cosas a la vez un enlace o un ancla. Por ejemplo:
<a href="http://es.gnome.org" name="enlace_gnome_hispano"> GNOME Hispano
</a>
En este caso al pulsar sobre la palabra ’GNOME Hispano’ se salta a la página de GNOME Hispano. Y por otro lado se puede acceder al lugar de la página donde está este enlace creando una referencia al ancla denominada ’enlace_gnome_hispano’. Es decir, la línea anterior es equivalente a poner las dos siguientes:
<a name="enlace_gnome_hispano"> <a href="http://es.gnome.org"> GNOME Hispano
/a>
Todavía puede plantearse otra pregunta: ¿para que puede servir un enlace-ancla? Esta pregunta tiene mucha lógica porque para lo único que sirve un ancla es para crear un enlace a ella. En el ejemplo anterior se podrías escribir en algún otro lugar de la página:
<a href="#enlace_gnome_hispano"> página de GNOME Hispano</a>
Pero ¿por qué no poner directamente?:
<a href="http://es.gnome.org"> página de GNOME Hispano™
</a>
Parece más lógico y así no se forza al visitante de la página a dar dos pasos en vez de uno. Sin embargo puede encontrar casos en que el enlace-ancla puede ser conveniente. Por ejemplo, puede ocurrir que se desee poner un enlace a la página de GNOME Hispano desde una página principal. Pero también se quiere hacer caso al consejo de ciertos diseñadores web experimentados de no poner enlaces externos en ella. ¿Cómo solucionarlo?
Seguramente el lector ya lo sabrá: se puede tener una página especial con todos los enlaces externos llamada por ejemplolinks.html donde estuviese el enlace-ancla anterior. Entonces desde la página principal se escribiría:
<a href="links.html#enlace_gnome_hispano"> GNOME Hispano</a>
Con lo que además hemos conseguido que el usuario visite otra de nuestras páginas, que en definitiva es uno de los objetivos de todo programador Web: que sus páginas sean vistas.
El atributo ’title’
El lenguaje HTML define, además de los vistos, otro atributo interesante para la etiqueta<a>..</a>: ’title’. Con este atributo puede escribirse un título o una descripción breve del link. Los navegadores pueden mostrar esta información al usuario de varias maneras:
• En un margen de la pantalla o mediante una caja de texto (en ocasiones llamadas bocadillos) que aparezca cuando se sitúen el ratón encima de la zona activa del link. Este es el método usado por Explorer ™.
• Cuando el link ya ha sido pulsado y se esté esperando recibir la página puede mostrarse como texto de espera o anticipo a lo que va a llegar.
• Leyendo el texto (con un sintetizador de voz) cuando se selecciona o se pasa por encima • etc.
Nota
No es habitual encontrar el atributo ’title’ en muchas páginas, quizá porque Netscape™ ha decidido ignorarlo y sus usuarios no verán la información que introduzcamos en él de ninguna manera.
Para ver un ejemplo de su uso se utilizá la página titulada "La chistera - Humor y magia" realizada en la primera práctica. En ella se cambia la línea de código:
<p><a
href="http://www.ciudadfutura.com/areirse"> ¡A Reírse Toca, ¡Ja, ja, ja!</a>
</p>
Por esta otra con el atributo ’title’:
<p><a
href="http://www.ciudadfutura.com/areirse" title="Yo me reí mucho">¡A Reírse Toca, ¡Ja, ja, ja! </a></p>.
El resultado puede verse en la figura 2.17. Al pasar el cursor por encima del texto activo nos aparece un bocadillo con el texto del atributo ’title’.
Figura 2.17. Con el atributo ’title’ podemos incluir información adicional sobre el Link.
Explorer™ mostrará esta información con un bocadillo.
Sugerencia
Es aconsejable usar ’title’ siempre. De esta manera aquellos usuarios (que visiten la página) con navegadores que entiendan este atributo (como Explorer™) disfrutarán de una información extra y los que usen otros navegadores que no lo entiendan (como Netscape) se quedarán como si no hubiéramos incluido dicha información, pero en ningún caso saldrán perjudicados.
Los atributos ’rel’ y ’rev’
Antes de terminar con la etiqueta<a>...</a>es conveniente comentar algunos atributos más que completan su repertorio y que no han sido mencionados hasta ahora porque no son muy usados.
Entre estos destacan ’rel’ y ’rev’ porque en los últimos estándares de HTML en los que han trabajado conjunta- mente Microsoft™, Netscape™ y muchas otras compañías y organizaciones, se les ha dado mayor importancia de la que tienen actualmente.
Estos atributos fueron creados para establecer relaciones entre las páginas enlazadas entre sí. Sin embargo no se ha especificado todavía para que pueden servir estas relaciones. ’rel’ y ’rev’ sólo existen con vistas a que en un futuro se les dé algún uso. El nombre ’rel’ proviene de la palabra inglesa relation (relación) mientras que ’rev’ proviene de REVerse relation (relación inversa).
Un ejemplo podría consistir en un libro publicado en Internet donde cada capítulo se ha escrito en una página (capitulo1.html,capitulo2.html, etc.) Puede ser interesante establecer una relación entre cada una de las páginas. Así en el capítulo 4 se podría emplear lo siguiente:
<a href="capitulo3.html" rel="anterior">Capítulo 3 </a>
<a href="capitulo5.html" rel="siguiente"> Capítulo 5</a>
Es decir el capítulo 3 se relaciona con el actual (el cuarto) en que es el anterior y el 5 en que es el siguiente. Un posible uso (futuro) que podría darse a este tipo de relaciones podría ser con vistas a imprimir el libro completo. El atributo ’rev’ establece la misma relación que ’rel’ pero a la inversa. En el ejemplo anterior hubiese sido equivalente escribir:
<a href="capitulo3.html" rev="anterior"> Capítulo 3
</a>
<a href="capitulo5.html" rev="siguiente"> Capítulo 5</a>
El capítulo actual es el siguiente al tercero y el anterior al quinto.
Por último, para terminar por completo la etiqueta< a>...</a>, sólo nos queda comentar dos atributos: ’urn’ y ’methods’. Estos dos atributos existían en los orígenes del lenguaje HTML pero fueron eliminados por su poca utilidad. Los mencionamos únicamente para que el lector no se extrañe si los ve en alguna página, pero no recomendamos su uso.
Jorge Ferrer
Victor García
Versión 1.0
Copyright Jorge Ferrer y Victor García. Se otorga permiso para copiar, distribuir y/o modificar este docu- mento bajo los términos de la Licencia de Documentación Libre GNU, Versión 1.1 o cualquier otra ver- sión posterior publicada por la Free Software Foundation. Puede consultar una copia de la licencia en: http://www.gnu.org/copyleft/fdl.html
Ha llegado el momento de estudiar todas las posibilidades que ofrece el lenguaje HTML para dar formato al texto e insertar caracteres especiales, pasando por la inserción de texto preformateado.
En la página creada en el capítulo anterior se pusieron en práctica todos los conocimientos del lenguaje HTML