¿Qué es un enlace o vínculo?
Es un acceso o direccionamiento:
- A una página HTML
- A una zona dentro de una página HTML
- A una imagen
- A servicios como transferencia de ficheros o correo electrónico
Es necesario definir en nuestras páginas las palabras o imágenes que servirán como enlaces para dar acceso a dichos recursos. MUY IMPORTANTE: definir una estructura de navegación clara y efectiva |
Tipos de Enlaces
- Enlaces externos
- Enlaces internos
- Tablas de contenidos
- De descargas
- De correo
- Mapas sensibles
- Enlaces antispam
- Redireccionamiento con etiquetas metas
Enlaces externos
- Dentro de nuestra WEB
-
seleccionar previamente la palabra o imagen que va a servir de soporte a dicho enlace y elegir el archivo de enlace
- A otra WEB
-
- Indicar protocolo y dirección → http://
- URL relativa o absoluta
Dirección URL absoluta: Hay que indicar todos los datos de la dirección donde se encuentra el documento web destino. Dirección URL relativa: Basta indicar el resto de los datos de la dirección donde se encuentra el documento web destino, tomando como origen el lugar de la página desde la que realizamos el enlace:
URL absoluta: http://www.miWEB.es/ruta1/ruta2/pagina2.html
URL relativa: /ruta1/ruta2/pagina2.html
|
ETIQUETA PARA CREAR ENLACES
La etiqueta para crear un enlace es <a> junto con los atributos que indican la página de destino, el texto alternativo, etc:
<a href="destino.htm" title="Descripción del destino“ alt=“Texto alternativo” target="donde abrir el documento">Texto o imagen del enlace</a>
El atributo target indica donde se abrirá el documnento del enlace:
<a target="_blank|_self|_parent|_top|framename">
Ejercicios Guiados
Enlace1) Crea un nuevo documento e introduce un texto en el que menciones el servidor del ITE, Instituto de Tecnologías Educativas.
- Si dispones de conexión a Internet elige alguna palabra del texto que te parezca adecuada como indicativo del enlace, escribe en vínculo en la ventana de propiedades la dirección http://www.ite.educacion.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 enlace1.html y comprueba que tu enlace funciona correctamente.
Enlace2) Abre la página enlace1.html si la habías cerrado.
Añade el atributo title al vinculo textual que enlazaba con la página del ITE.
Inserta una imagen que enlace al buscador Google y añádele a la misma texto alternativo y título emergente (alt y title) utilizando un texto diferente para cada uno de ellos.
Guarda la página como enlace2.html y ábrela en el navegador.
Comprueba como aparece el texto correspondiente a los atributos title de los enlaces cuando pasas sobre ellos.
Si quieres comprobar la forma en que se muestra el texto alt sin necesidad de desactivar la presentación de imágenes en todas las páginas puedes recurrir a un pequeño truco: modifica manualmente el nombre de la imagen para que no corresponda con una imagen disponible y guarda la página, con lo que conseguirás que se reserve el espacio de la imagen antigua y puedas ver el texto alternativo a la vez que se muestra el consejo al colocar el ratón sobre el hueco vacío. (Para que puedas ver el texto alternativo es necesario que la imagen tenga un tamaño suficiente, por lo que si era muy pequeña puedes modificar sus dimensiones para que se le reserve un espacio mayor)
Enlace interno
¿Qué es un enlace interno?
- Es una referencia a un párrafo o epígrafe dentro de la propia página web o dentgro de otra página web
-
Es necesario crear :
-
El enlace interno donde queremos hacer referencia
→ si utilizamos Dreamweaver (Menú Insertar/ opción Anclaje con nombre) -
El enlace externo en la palabra o imagen que nos llevará a esa referencia
→ si utilizamos Dreamweaver (Menú Insertar/ Hipervínculo)
-
El enlace interno donde queremos hacer referencia
Etiquetas para los enlaces internos
-
Anclaje
- <a name=“articulo1“>Artículo 1</a>
-
Referencia al anclaje en la propia página
- <a href="#articulo1">Ir al Artículo 1</a>
-
Referencia al anclaje en otra página
- <a href="Noticias.htm#articulo2">Ir al Artículo 2</a>
- Destino <a href="destino.htm" target="_blank“ >texto del enlace</a>
Ejercicio Guiado
Enlace4)
-
Abre en Dreamweaver la página PrensaEscolar.html.
El texto no tiene prácticamente formato: apenas las separaciones de párrafo necesarias y una lista de epígrafes al inicio. Si lo consideras necesario lo primero que habría que hacer sería dar formato a los elementos del texto para resaltar visualmente los que consideres necesarios. Puedes optar por hacer que el resaltado sea únicamente visual, pero también puedes pensar qué etiquetas te permitirán modificar el aspecto visual y, a la vez, estructurar el contenido del texto. - Introduce los anclajes con nombre que consideres necesarios nombrándolos de forma que sea fácilmente identificable el texto al que corresponden. No olvides crear un enlace o anclaje en el principio del documento.
- Ve al índice inicial y crea los vínculos con cada uno de los epígrafes del documento.
-
Introduce una palabra o una imagen que te sirva para volver al índice después de cada epígrafe. Puedes guardar con el botón derecho el siguiente icono
-
Crea los enlaces de vuelta al índice.
Teniendo en cuenta que todos los enlaces de vuelta atrás apuntan al mismo lugar puedes crear el primero, copiarlo, e irlo pegando en cada uno de los sitios en los que deba aparecer. - Guarda el trabajo como enlace4.html y comprueba que los enlaces funcionan correctamente.
Enlace5) Puedes utilizar el archivo enlace4.html para hacer que alguno de los destinos se abra en una ventana diferente
Crea un enlace que apunte al Registro de publicaciones de prensa juvenil en España (http://www.prensajuvenil.org/)
Haz que dicho enlace se abra en una nueva ventana.
Guarda el archivo como enlace5.html
Vínculos de descarga
- <a title="Archivo con los textos y actividades del curso. 890KB" href="materiales.zip">Descargar</a>