Unidad 4. HiperenlacesVamos a ver qué son los hiperenlaces, para qué sirven y cómo crearlos, ya que son unelemento esencia...
Referencia relativa al documento:Conduce a un documento situado dentro del mismo sitio que el documento actual, peropartie...
Para insertar el enlace:Habría que escribir:<a href="http://www.utcd.edu.py" target ="_blank">Visita www.utcd.edu.py en un...
Cuando se haya visitado la página www.utcd.edu.py, el enlace será de color naranja(#FF9900):Puntos de fijación. AnclasCuan...
Otros tipos de enlacesExisten otros tipos de enlaces que no conducen a otra página web, los veremos a continuación:  Víncu...
Prueba evaluativa de la unidad 4.   HiperenlacesSolo una respuesta es válida por pregunta.    1. Un hiperenlace es lo mism...
Upcoming SlideShare
Loading in …5
×

Unidad 4

236 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
236
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Unidad 4

  1. 1. Unidad 4. HiperenlacesVamos a ver qué son los hiperenlaces, para qué sirven y cómo crearlos, ya que son unelemento esencial para cualquier página web.Hiperenlace <a>Un hiperenlace, hipervínculo, o vínculo, no es más que un enlace, que al ser pulsadolleva de una página o archivo.Aquellos elementos (texto, imágenes, etc.) sobre los que se desee insertar un enlace hande encontrarse entre las etiquetas <a> y </a>.A través del atributo href se especifica la página a la que está asociado el enlace, lapágina que se visualizará cuando el usuario haga clic en el enlace.Por ejemplo, para insertar el enlace:Habría que escribir:<a href="http://www.utcd.edu.py"> Ingrese UTCD</a>Tipos de referenciasExisten diferentes formas de expresar una referencia a una página a través del atributo href. Referencia absoluta:Conduce a una ubicación externa al sitio en el que se encuentra el documento. Laubicación es en Internet, en este caso hay que empezar la referencia por http:// , elnombre del dominio y algunas veces el nombre de la página.Por ejemplo, para insertar el enlace:Habría que escribir:<a href="http://www.utcd.edu.py"> Ingrese UTCD</a>
  2. 2. Referencia relativa al documento:Conduce a un documento situado dentro del mismo sitio que el documento actual, peropartiendo del directorio en el que se encuentra el actual.Por ejemplo, teniendo en cuenta que el documento t_4_1.htm se encuentra dentro de lamisma carpeta que el documento actual, para insertar el enlace:Enlace a Tema 4: HiperenlacesHabría que escribir:<a href="t_4_1.htm">Enlace a Tema 4: Hiperenlaces</a> Punto de fijación:Conduce a un punto dentro de un documento, ya sea dentro del actual o de otrodiferente. Para ello el vínculo debe ser "nombre_de_documento#nombre_de_punto".Por ejemplo, para insertar el enlace:Punto de fijacion Tipos de enlacesHabría que escribir:<a href="t_4_1.htm#tipos">Punto de fijacion Tipos de enlaces</a>Teniendo en cuenta que el documento se llama t_4_1.htm y el punto de fijación sellama tipos.Al final de este tema verás cómo definir el punto de fijaciónDestino del enlaceEl destino del enlace determina en qué ventana va a ser abierta la página vinculada, seespecifica a través del atributo target al que se le puede asignar los siguientes valores: _blank:Abre el documento vinculado en una ventana nueva del navegador. _self:Es la opción predeterminada. Abre el documento vinculado en el mismo marco oventana que el vínculo.
  3. 3. Para insertar el enlace:Habría que escribir:<a href="http://www.utcd.edu.py" target ="_blank">Visita www.utcd.edu.py en una ventananueva</a>Es interesante utilizar esta opción cuando la página de destino está fuera de nuestro sitio paraque cuando el usuario cierre la ventana del explorador, se encuentre automáticamente en lapágina desde la que había salido (que vuelva a nuestro sitio).Formato de los enlacesEn general, un texto que tiene un vínculo asociado suele aparecer subrayado.Tanto si el vínculo se asigna a un texto como a una imagen, el cursor cambia de forma alsituarse encima del vínculo. Suele adquirir la apariencia de una mano señalando.Normalmente los vínculos de texto cambian de color cuando el enlace ha sido yapulsado o cuando el puntero del ratón se posiciona sobre él, estos cambios estánpredefinidos en cada navegador, pero nosotros podemos cambiar esos colores.Los colores de los vínculos pueden especificarse a través de las propiedades de lapágina, en la etiqueta <body>. Estos colores se asignan a través de los atributos alink(vínculo activo), y vlink (vínculo visitado).alink permite determinar el color del enlace activo (enlace que acaba de ser pulsado).vlink permite determinar el color de los enlaces visitados (enlaces que ya han sidopulsados).Por ejemplo, al insertar el siguiente código:<body vlink="#FF0099" alink="#FF9900"><a href="http://www.utcd.edu.py" target ="_blank">Ingrese UTCD</a>Mientras la página www.utcd.edu.py sea la última visitada, el enlace será de color fucsia(#FF0099):
  4. 4. Cuando se haya visitado la página www.utcd.edu.py, el enlace será de color naranja(#FF9900):Puntos de fijación. AnclasCuando se tienen documentos extensos, divididos en varios apartados, es preferiblepoder ir directamente al apartado deseado, en lugar de ir al comienzo del documento.Para ello se utilizan las anclas, o puntos de fijación, muy útiles a la hora de crearíndices.Un ancla necesita que se inserten las <a> y </a>, con el atributo name, que puede tomarcualquier valor inventado por el usuario, se recomienda no utilizar caracteres especiales.Por ejemplo, para insertar un punto de fijación delante del siguiente texto:Texto con anclaHabría que escribir:<a name="miancla"></a>Texto con anclaComo puedes ver, no es necesario insertar nada entre las etiquetas <a> y </a>, y que sinmirar el código no hay nada que indique que delante del texto haya un ancla.Teniendo en cuenta que el documento actual se llama t_4_3.htm, y que el ancla anteriorse llama miancla, podríamos crear un enlace que nos llevara directamente a la línea detexto en la que se encuentra el ancla. Por ejemplo:Enlace al anclaHabría que escribir:<a href="t_4_3.htm#miancla">Enlace al ancla</a>Si pulsas sobre el enlace verás como se vuelve a cargar el documento actual, pero enlugar de cargarse desde el principio, la primera línea de texto será la línea en la quehemos insertado el ancla.Cuando el ancla se encuentra en el mismo documento que el enlace, como ocurre eneste caso, podemos prescindir de poner el nombre de la página en el atributo href.En el ejemplo anterior podríamos haber escrito:<a href="#miancla">Enlace al ancla</a>
  5. 5. Otros tipos de enlacesExisten otros tipos de enlaces que no conducen a otra página web, los veremos a continuación: Vínculo a ficheros para descarga:El valor del atributo href normalmente será una página web (con extensión htm, html,asp, php...) pero también puede ser un fichero comprimido, una hoja de Excel, undocumento Word, un documento con extensión pdf. Cuando el enlace no es a unapágina Web nos aparecerá el cuadro de diálogo que seguro habrás visto alguna vez en elque el navegador le pide al usuario permiso para descargar el fichero en su ordenador.Por ejemplo, en la carpeta donde se encuentra la página tenemos el fichero Word carta.doc yqueremos que nuestros visitantes puedan visualizar e incluso descargar el fichero en su discoduro, en este caso definiremos el enlace:haz clic aquí para descargarte el ficheroDe la siguiente forma:<a href="carta.doc" tarjet=_blank >haz clic aqu&iacute; para descargarte elfichero</a> Vínculo vacío:Al pulsar sobre un enlace vacío no se abre ninguna página ni archivo, pero el formato esel mismo que el de cualquier otro enlace. El vínculo debe ser el símbolo almohadilla"#".Por ejemplo, para insertar el enlace vacío:vinculo vacioHabría que escribir:<a href="#">vinculo vacio</a>Este tipo de enlace resulta útil para trabajar con comportamientos javascript.
  6. 6. Prueba evaluativa de la unidad 4. HiperenlacesSolo una respuesta es válida por pregunta. 1. Un hiperenlace es lo mismo que un hipervínculo, un vínculo, o un enlace. a) Verdadero b) Falso 2. Es posible abrir el documento vinculado en una ventana nueva del navegador. a) Verdadero b) Falso 3. Un enlace a un punto de fijación conduce a un punto dentro de un documento. a) Verdadero b) Falso 4. La ruta de acceso se especifica a través del atributo href. a) Verdadero. b) Falso. 5. El cursor cambia de forma al situarse encima del vínculo en el navegador. a) Verdadero b) Falso 6. . El destino del enlace se especifica mediante el atributo... a) target. b) href. c) link.

×