UNIVERSIDAD DON BOSCO FACULTAD DE ESTUDIOS TECNOLOGICOS ESCUELA DE COMPUTACION

Transcripción

1 UNIVERSIDAD DON BOSCO FACULTAD DE ESTUDIOS TECNOLOGICOS ESCUELA DE COMPUTACION CICLO GUIA DE LABORATORIO N 7 Nombre de la práctica: Vínculos, hipervínculos o enlaces. Lugar de ejecución: Laboratorio de Informática. Tiempo estimado: 2 horas y 30 minutos. Materia: Introducción a Internet. I.Objetivos Que el estudiante sea capaz de: 1. Crear vínculos o enlaces en una misma página. 2. Crear vínculos o enlaces hacia sitios web fuera del dominio de una página. 3. Crear vínculos o enlaces entre páginas de un mismo sitio web 4. Crear vínculos a direcciones de correo electrónico. 5. A utilizar imágenes como vínculos o enlaces. II. Introducción Teórica Definición Un vínculo es una conexión desde un recurso web a otro. Esto constituye la estructura básica del hipertexto. Un vínculo o enlace tiene dos extremos o anclas, llamadas ancla origen, donde se origina el vínculo, y un ancla destino, a donde lleva el vínculo, que puede ser cualquier recurso de la web, como por ejemplo: una imagen, un videoclip, un archivo de sonido, un programa, un documento HTML o un elemento dentro de un documento HTML. El comportamiento por defecto de un vínculo o enlace es la obtención de otro recurso web. La manera tradicional de activar un vínculo o enlace es hacer clic sobre un texto o imagen de una ancla origen. En HTML se pueden distinguir cinco tipos de vínculos o enlaces, que son: a) Vínculos internos b) Vínculos locales. c) Vínculos remotos 1

2 d) Vínculos con direcciones de correo electrónico. e) Vínculos a archivos Enlaces internos Son vínculos en un mismo documento web o página web; es decir, el ancla de origen y destino están en la misma página. Este tipo de vínculo es conocido también, como navegación interna. Enlaces locales Son los vínculos que se dirigen a otras páginas del mismo sitio web. Este tipo de vínculo es normal en sitios con muchas páginas web, organizadas de alguna forma. Enlaces remotos Son vínculos con otros sitios web fuera de nuestro dominio. Este tipo de enlace se hace necesario cuando existen sitios que muestran información relacionada con los temas presentados en nuestro sitio, y quieren mostrarse como referencia para los lectores de nuestro sitio. Enlaces con direcciones de correo electrónico Se utilizan cuando se desean crear vínculos a direcciones de correo electrónico, con el objeto de poder enviar un a una dirección específica. La acción de hacer clic en uno de estos vínculos abre un formulario con el campo A: (To:) lleno con la dirección de correo electrónico especificada en el enlace. Enlaces hacia archivos Estos enlaces se utilizan para poder facilitar la descarga de recursos en Internet. Estos archivos, pueden ser imágenes, vídeos, audio, etc. La etiqueta HTML utilizada para definir vínculos o enlaces es la etiqueta <A> la cual tiene la siguiente sintáxis: <A propiedad="valor" propiedad="valor"...>hiperenlace</a> Posee una serie de propiedades o argumentos que deben utilizarse para definir bien el enlace. Entre los principales tenemos: href="ruta" Que define el nombre del anclaje o la ruta URL ( o la URI) del documento con el que va a conectarnos el hiperenlace. En el caso de un documento, éste normalmente será otra página web, pero puede ser cualquier otro 2

3 tipo de documento: imágenes, documentos de texto, de Word, hojas de cálculo, ficheros JavaScript, CSS, etc. Si tenemos nuestro navegador configurado para abrir el tipo de documento solicitado en el hiperenlace, se abrirá en la propia ventana de éste, y si no es así, se nos abrirá un cuadro de dialogo para que permitamos abrirlo con el programa asociado al fichero o guardarlo en nuestro disco duro. Las únicas restricciones que tenemos respecto a los valores que puede tomar esta propiedad es que la URI o URL del fichero enlazado tenga una sintaxis correcta y que el documento exista en el servidor web. Si no es así, obtendremos el conocido ERROR 404, que corresponde a un documento no encontrado. target="nombre" Esta propiedad va a fijar la ventana en la que se va a abrir el documento solicitado en el hiperenlace (siempre que sea un fichero que pueda abrir el propio navegador). Si imaginamos que trabajamos en una página con frames, los posibles valores que puede tomar el atributo nombre son: 1) nombre_ventana: que es el valor del atributo name que le hayamos dado en una página de frameset a un frame o a una ventana flotante en la que queramos que se abra el documento. 2) _self: representa al propio frame o ventana en que se encuentra el enlace, y es el valor por defecto. El documento solicitado se cargará en la página actual, reemplazando a la que lo ha solicitado. 3) _parent: representa al frame padre del que contiene la página con el enlace, es decir, al que se encuentra inmediatamente por encima del actual en la jerarquía de frames de la página. 4) _top: que representa al frame padre de todos los de la ventana del navegador, con lo que el documento solicitado se cargará en la pantalla actual, ocupando toda la ventana y destruyendo la estructura de frames anterior. 5) _blank: que representa a una pantalla en blanco, por lo que el documento se abrirá en una nueva ventana del navegador. Note el guión bajo existente en los 4 últimos casos. name="nombre" Que fija un nombre identificador único para el enlace. Es ésta una propiedad muy importante, ya que por un lado va a ser la referencia de llamada en el caso de que usemos anclajes en una página, y por otro es el identificador mediante el cual podremos acceder dinámicamente a las propiedades del enlace mediante lenguajes como JavaScript. La única limitación que tendremos a la hora de elegir un nombre será la propia del lenguaje de script que usemos. Así, si vamos a acceder luego al link mediante JavaScript, que será lo más normal, el nombre no puede empezar por un caracter numérico, por un símbolo extraño ni por un caracter que no pertenezca al conjunto de caracteres anglosajón (una ñ, por ejemplo). id="nombre" Propiedad análoga a la anterior en cuanto a su utilidad, pero diferente en el planteamiento. En un 3

4 principio, cuando se implementó la etiqueta Anchor, fue necesario establecer la propiedad NAME para fijar los anclajes en una página, y posteriormente, cuando se desarrolló el lenguaje JavaScript, se creó en este lenguaje un objeto links y otro anchors que contenían los enlaces de una página y que permitía acceder a sus propiedades mediante el nombre asignado con la propiedad NAME. para acceder mediante estos objetos a cualquier elemento de una página es preciso que éste tenga un nombre identificador único, y es ahí donde entra la propiedad ID, siendo el nombre asignado mediante ella el que disponemos para acceder a un enlace y leer y/o modificar sus propiedades. El hecho de que esta etiqueta posea o pueda poseer dos nombres diferentes no entra en contradicción mutua. Podemos acceder a las propiedades de un enlace considerándolo como perteneciente al objeto links de JavaScript por su nombre asignado mediante NAME, y podemos acceder a esas mismas propiedades si lo consideramos un objeto de la colección all o getelementbyid mediante su nombre asignado con ID. title="cadena" Mediante esta propiedad podemos fijar un texto descriptivo del destino del enlace o de la funcionalidad del mismo, que aparecerá cuando el puntero del ratón se posicione sobre el enlace, en forma del conocido "tip" o bocadillo explicativo, común a diferentes aplicaciones. El mensaje a mostrar quedará definido mediante el valor "cadena". Es ésta una propiedad muy interesante, ya que en muchas ocasiones el texto o imagen que actúan como enlace no son lo suficientemente significativos, por lo que el usuario puede no tener claro dónde le va a enviar el enlace. Esta confusión podemos corregirla empleando TITLE, que dará al usuario la suficiente información sobre la utilidad final del enlace. 4

5 III. Requerimientos N Cantidad Descripción 1 1 PC con Windows XP con uno de los editores de páginas Web: BlueFish, Notepad ++, HTML Kit y cualquiera de los navegadores siguiente: Internet Explorer 8 o 9, Firefox (última versión disponible), Google Chrome (última versión disponible), Opera (última versión disponible), Safari (última versión disponible). 2 1 Guía de Laboratorio #7 de Introducción a Internet 3 1 Memoria USB IV. Procedimiento Digite los siguientes ejercicios y guárdelos todas las páginas web en archivos separados con extensión.html. Luego abra un navegador para observar los resultados. Crear una carpeta en el escritorio que tenga como nombre su número de carnet. Cuando termine comprima la carpeta de trabajo y envíela por correo a la dirección de su instructor. Ejercicio 1. En este ejercicio creará varios archivos Primer archivo: estilo.css 5

6 Segundo archivo: ejercicio1.imagelinks.html (página principal) Tercer archivo: asia.html 6

7 Tercero archivo: Africa.html Cuarto archivo: America.html 7

8 Quinto archivo: Antartida.html sexto archivo: Asia.html 8

9 Séptimo archivo: Europa.html Octavo archivo: Oceania.html Guardarlo en la carpeta que creo al inicio de la práctica, Ejer1_Guia6.html Visualice en cualquier navegador su página Web 9

10 Ejercicio 2. Dentro de CSS, puedo crear una clase y asignársela a una imagen o a un texto, de manera que formateemos visualmente su aspecto. Pero el caso de los hipervínculos es algo distinto, y para formatearlos visualmente, aparte de las propiedades que ya conocemos, podemos usar unas pseudo- clases especificas para ellos. En este código se ha especificado tres clases distintas para tres tipos de hipervínculos. Lo he hecho así para ver el orden en el que se coloquen estas pseudo-clases es importante. Se puede ver que:link y :visited deben estar en primer lugar, que :hover irá después (si la ponemos antes no le hace caso) y que :active debe ir detrás de :hover porque si no tampoco la considerara. 1. Guardar el archivo con el nombre Ejer2_Guia7.html 2. Visualizar su página Web en el navegador de su preferencia 10

11 V. Ejercicio complementario Ejercicio 1. Crear una página Web que muestre información sobre HTML5 y debe implementar todos los tipos de vínculos vistos en esta guía. VI. Análisis de resultados 1. Investigue cómo realizar una página con vínculos hacia archivos y correos electrónicos. Y realizar la página web de acuerdo a la siguiente imagen. Todos los vínculos deben ser mediante imágenes. VII. Bibliografia 1. La Biblia HTML./ Francisco Charte Ojeda. 1ra Edición. Editorial Anaya Multimedia Madrid, España. Autor: Charte Ojeda, Francisco Biblioteca UDB Clasificación: Ch Programación CSS, DHTML y AJAX. 1ra Edición. Editorial Anaya Multimedia Madrid, España. Autor: Jason Cranford Teague Biblioteca UDB Clasificación: T