Hipervinculos
Una Pagina web es un archivo HTML, en el que podemos incluir, entre otras cosas, textos formateados a nuestro gusto e imágenes, por lo que un sitio Web puede ser considerado como el conjunto de archivos HTML que constituyen el contenido al que el navegante tiene acceso
Sin embargo, no podra hablarse de navegantes o de navegación si estos archivos HTML no estuviesen conectados por medio de enlaces hipertexto.
Para colocar un enlace nos serviremos de las etiquetas <a>...</a> y de sus atributos a través de la siguiente sintaxis
<a href="pagina"> enlace </a>
En donde:
pagina= Es la pagina a la que nos queremos dirigir
enlace= a la imagen o texto que queremos que nos lleve a la pagina seleccionada dondo clic sobre el
Ejemplo:
<a href="http://google.com"> ir a Google </a>
seria en el navegador
Tipos de Hipervinculos
Enlaces a Paginas HTML
Se utiliza para insertar enlaces a paginas creadas por nosotros y su estructura se realiza de la siguiente manera:
<a href="nombre_pagina.html"> nombre del enlace</a>
Enlaces a Direcciones Web
Se utiliza para insertar enlaces a paginas de Internet, es muy parecida a la anterior solo que en la dirección se antepone el "http://" para indicar que es una pagina externa y su estructura se realiza de la siguiente manera:
<a href="http://nombre_pagina.html"> nombre del enlace</a>
Enlaces Internos en una pagina HTML
También denominados anclas, se usa para llevar a lugares dentro de la misma pagina que nos encontramos, en Internet es muy usado en casos de que la pagina sea muy extensa su estructura es un poco diferente a el vinculo normal ya que necesita de dos partes.
La primera necesitaremos la etiqueta <a> con el atributo "name='nombre'" el cual nos permitirá situar un punto especifico de la pagina html bajo el nombre que designamos
<a name="aqui"> anclas en html </a>
Lo segundo, necesitaremos un enlace que nos lleve a la el vinculo mencionado anteriormente para ello se creara un enlace con la siguiente estructura:
<a href="#aqui"> ir al ancla </a>
como podrás observar se coloco un hipervinculo en donde la dirección indicada en el "href" se antepuso el simbolo "#" y el nombre que designamos en la primera parte, con esto hecho al dar clic encima de el hipervinculo la pagina se dirigirá a donde creamos el vinculo con el atributo "name" indicado
Enlaces a Correos Electrónicos
También podemos crear hipervinculos que nos permitan enviar correos electronicos para ellos se debe de seguir la siguiente estructura
<A HREF="mailto:direccion@correo.com?cc=otradir@correo.es&subject=Burro">
Escribeme</A>
vamos a desglosar un poco la anterior estructura ya que es un poco largadentro del "href" escribiremos inicialmente (mailto:) para indicar que es un enlace a correo electrónico luego escribimos la dirección de correo electrónico al cual deseamos enviar el correo seguido de un (?) donde agregaremos los datos adicionales como el cc (dirección de envío de copia del mensaje) o el subject (Asunto). Nota: al colocar varias opciones adicionales se debe de escribir el símbolo (&) para indicar que un atributo es diferente del otro como se aprecia en el ejemplo
Uso del atributo Target="objetivo"
Los hipervinculos por defecto utilizan la misma ventana que estamos visualizando para llevarnos a la pagina que esta designada por el hipervinculo sin embargo ese "destino" del hipervinculo puede ser modificado mediante el atributo target para ello es necesario la siguiente estructura:
<a href="http://nombre_pagina.html" target="destino"> nombre del enlace</a>
Donde dentro del atributo target destino puede ser:
- _blank
- _self
- _parent
- _top
- nombre del frame
_blank: abre el vinculo en una nueva ventana o tabulador
_self: abre el vinculo en la misma ventana o frame (esta por defecto)
_parent: abre el vinculo en un frame padre
_top: abre el vinculo en la misma ventana ignorando los demás frames
nombre del frame: permite designar mediante el nombre el frame en el cual se abrira el vinculo
Nota: para los que desconocen lo que es un frame vean la parte 5 de HTML
Demostración de hipervinculos
Aquí un vídeo demostrando el uso de los diferentes tipos de vínculos
No hay comentarios:
Publicar un comentario