Enlaces

Las siglas HTML corresponden a Hyper Text Mark-up Language, esto es, Lenguaje de marcas de hipertexto. Hasta ahora hemos ido describiendo y practicando sobre los aspectos referentes a la "M", las marcas o etiquetas que nos permiten definir el aspecto de una página WEB, pero lo verdaderamente importante es el aspecto hipertextual.

Podríamos decir que un hipertexto es aquel documento que presenta una estructura arborescente, con relaciones múltiples entre sus contenidos, que posibilitan la consulta no lineal de la información. (Seguro que encontrarás definiciones más acertadas, pero ésta puede valernos para el propósito de este curso).

Así pues, desde una página escrita en HTML podremos saltar a otro punto de la misma página, a otra página perteneciente a la misma sede WEB o a cualquier otra página que esté publicada en Internet o acceder a servicios tales como la transferencia de ficheros o el correo electrónico. Para que esto ocurra deberemos haber definido en nuestra página las palabras o imágenes que servirán como enlaces para dar acceso a dichos recursos.

Enlaces externos

Para crear un enlace a otra página diferente elegiremos una palabra, icono o imagen y la seleccionaremos con el ratón. A continuación pincharemos en el icono que presenta unos eslabones e introduciremos la dirección de destino.

Práctica 10

Crea un nuevo documento e introduce un texto en el que menciones el servidor del PNTIC.

Si dispones de conexión a Internet elige alguna palabra del texto que te parezca adecuada como indicativo del enlace, pulsa el botón para crear el enlace y escribe la dirección http://www.pntic.mec.es como destino.
Si no dispones de conexión a Internet o prefieres hacer pruebas en modo local elige una palabra y cuando vayas a establecer el enlace pincha en Examinar archivo y elige alguno de los trabajos que has guardado previamente.

Pasa al navegador guardando el trabajo como ej10.htm y comprueba que tu enlace funciona correctamente.

Práctica 10-b

Dirígete a ColorVivo para obtener algún icono o utiliza alguno de los que aparecen en estas páginas.
Abre el documento ej10.htm, pulsa el botón destinado a incluir imágenes y selecciona un icono.
Pulsa con el botón derecho sobre la imagen que acabas de insertar y elige la pestaña Enlace de la opción Propiedades de la imagen. A partir de aquí los pasos son idénticos al ejercicio anterior.
Guarda el trabajo como ej10b.htm y comprueba el funcionamiento del nuevo enlace.

Enlaces internos

Una forma bastante efectiva de organizar una página con abundante información textual es incluir al principio de la misma un "indice" formado por enlaces a los diferentes apartados de forma que el visitante no tenga que ir deplazando manualmente la página para buscarlos.

El complemento lógico de esta estructura es que, al final de cada epígrafe, encontremos un enlace que nos devuelva al principio de la página para poder consultar nuevamente el índice.

Práctica 10-c

Tienes disponible un texto para facilitarte la tarea. Cuando aparezca en tu pantalla tendrás que seleccionarlo con el ratón y pulsar en el menú Edición / Copiar . Cuando lo hayas hecho pulsa la flecha de regreso para volver a esta página. Ahora puedes cargar el texto

Crea un documento nuevo en blanco y con Edición / Pegar inserta el texto que acabas de copiar.

Fíjate en los apartados que constituyen el índice. Localiza el principio de los epígrafes correspondientes y pulsa el botón con forma de diana para darles un nombre a cada uno de ellos.

Vuelve al principio del documento y crea un nuevo destino al que llamaremos inicio.

Selecciona el primer apartado del índice y pulsa el botón de crear enlaces. Observarás que en la parte inferior de la ventana aparecen los nombres de los destinos que acabas de definir. Elige el adecuado y vuelve a repetir la operación con el resto de los apartados del índice.

Desplázate al final del primer apartado y escribe el texto Volver al Índice. Crea un enlace que te lleve al destino que habíamos llamado inicio. Haz lo mismo en los siguientes apartados (puedes optar por copiar la vuelta del primer epígrafe e irla pegando en el resto)

Guarda el trabajo como ej10c.htm y comprueba como funcionan los enlaces.

Enlaces de correo

Si Internet es en esencia un medio de comunicación no está de más que facilitemos a los visitantes una forma rápida de ponerse en contacto con nosotros. Para ello se utiliza un tipo de enlace especial que se encarga de arrancar el programa de correo que el visitante utilice incluyendo como destinatario del mensaje la dirección que hayamos puesto al crear el enlace.

Los elementos que soportan el enlace suelen ser un icono que haga referencia al correo (sobre, pluma, buzón...) y la propia dirección de correo. La presentación en pantalla de la dirección de correo electrónico se apoya en que así se facilita al usuario la copia directa de la misma.

Práctica 10-d

Baja a tu disco el siguiente icono con el método que ya conoces de guardar la imagen.

Crea un documento nuevo e inserta en el la imagen que acabas de capturar. Escribe a su lado tu propia dirección de correo o bien una dirección inventada, como mitutor@platea.pntic.mec.es

Pulsa en la imagen y crea un enlace poniendo como destino mailto:mitutor@platea.pntic.mec.es o mailto:tu_dirección_de correo

Guarda el documento como ej10d.htm y pasa al navegador para comprobar cómo ambos enlaces activan la aplicación de correo.