En este tutorial les voy a mostrar el Enlace o Vinculo (link) tambien llamado Hiperenlace o Hipervinculo (Hyperlink) veremos la sintaxis para implementarlo dentro del documento HTML, utilizando la etiqueta <a> sus caracteristicas que tiene y sus atributos.
El Enlace
El Enlace es una parte fundamental en el diseño web, ya que permite enlazar diversos recursos en Internet dando clic en el, nos permite enlazar con sitios externos, enlazarnos a otras pagina dentro de un mismo sitio web y enlazar con un contenido especifico dentro de una pagina con muncho contenido.
El Elemeto <a> y El Atributo href
La etiqueta <a> (hace referencia a anchor, ancla en Español) se utiliza para anclar el Enlace en el documento junto con el atributo href Hypertext Reference (Referencia de Hipertexto), el atributo href hace referencia a la direccion de destino del ancla, en el contenido del elemento lleva un texto que es el que sera mostrado por el navegador, para poder hacer clic en el y nos envie a la direccion del enlace.
El texto que se mostrara en el navegador puede ser cualquier frase que se relacione con la direccion del enlace a visitar o la direccion del enlace mismo textualmente, ejemplos
<a href="https://www.google.com">https://www.google.coml</a>
<a href="https://www.google.com">Buscar en Google</a>
Las Caracteristicas del Enlace
Las caracteristicas que tienen los enlaces es que los navegadores los muestra por defecto con distintos colores, los enlaces que no has visitado los muestra de color azul, los que ya has visitado de color purpura o morado y cuando haces clic en el enlace sin soltarlo (se le conoce como enlace activo) lo muestra de color rojo, ademas de mostrarlo con una linea debajo del texto.
Estas caracteristicas las podemos modificar con estilos o reglas CSS, enseguida veremos como, anteriormente vimos como implementar un enlace aun sitio web externo, igual se hace con una pagina interna del mismo sitio, con una direccion URL Uniform Resource Locator (Localizador Uniforme de Recursos) o Enlace ya creadao y asignado, este enlace se crea automaticamente cuando el sito se ha subido a internet por medio de un hosting o servidor web, ejemplo.
<a href="https://www.google.com/imagenes">Buscar imagenes en Google</a>
Enlaces Locales
Tambien lo podemos hacer con la ruta (path) en el documento HTML, si el projecto del sitio web consta de varias paginas caga pagina debe de ser un documento .html aparte con su nombre propio por ejemplo inicio.html, productos.html, ofertas.html, informacion.html, contacto.html, etc.
Para enlazar cada pagina con su respectivo nombre, por ejemplo inicio.html, (este ejemplo es el mas utilizado en la mayoria de sitios y lo suelen poner en todas las paginas del sitio), ha estos enlaces se les conoce como enlaces locales y se hace de la siguiente forma.
<a href="index.html">Volver al Inicio</a>
NOTA:
Por regla general,cuando se sube un sitio web a un servior, el primer o principal documento HTML, siempre se debe nombrar como index.html, por que es el indice o el principio del sitio o pagina web, recuerden que este es el nombre del documento HTML, el nombre de la pagina es el que se ingresa en el elemento title, en la etiqueta head.
Cambiar el Color del enlace con CSS
Para cambiar el color del enlace y quitar la linea debajo del texto del enlace, se usan los siguientes estilos o reglas CSS, estas reglas se pueden colocar en un archivo .css externo o en la etiqueta <head> dentro de las etiquetas <style>.
/* Cambia el Color y elimina la linea debajo del Elnace sin Visitar */
a:link {
color: green;
text-decoration: none;
}
/* Cambia el color y elimina la linea debajo del Enlace Visitado */
a:visited {
color: pink;
text-decoration: none;
}
/* Cambia el Color y elimina la linea debajo del Enlace
al pasa el Cursor del Raton sobre el Enlace */
a:hover {
color: red;
text-decoration: none;
}
/* Cambia el Color y elimina la linea debajo del Enlace
al hacer Clic sobre el Enlace */
a:active {
color: yellow;
text-decoration: none;
}
En las reglas CSS anteriores utilizamos un selector para la etiqueta <a>, seguida de dos puntos (:) y una pseudo-clase que se utiliza para definir un estado especial de un elemento, en la parte de arriba de cada regla, he puesto un comentario para que sepan que es lo que hace cada regla CSS.
El Atributo Target
El atributo target (destino) se utiliza para especificar en cual pestaña o ventana del navegador se abira el documento del enlace, El atributo target puede tener uno de los siguientes valores.
- _blank: abre el documento vinculado en una nueva pestaña
- _self: abre el documento vinculado en la misma pestaña en la que se hizo clic (es el valor por defecto)
- _parent: abre el documento vinculado en el marco (frame) principal
- _top: abre el documento vinculado en todo el cuerpo de la ventana
Los dos primeros valores se usan con paginas que se muestran normalmente en el navegador y todos los valores se aplican si la pagina esta incrustada en un marco (frame o iframe, una ventana pequeña dentro de una pagina normal), el atributo target se implementa de la siguiente manera.
<a href="https://www.google.com" target="_blank">Buscar en Google</a>
Usar Imagenes como Enlace
Un enlace no tiene que ser solo texto, puede ser una imagen o cualquier elemento HTML, este es un ejemplo con una imagen, dentro del elemento <a> si dan clic en la imagen de abajo los enviara a Facebook.
<a href="https://www.facebook.com" target="_blank"><img src="img/faceboock.jpg" alt="Logo de FaceBook"a></a>
Crear Marcadores
Los marcadores HTML se utilizan para permitir a los lectores saltar a partes específicas de una página web, los marcadores pueden ser útiles si la página web es muy larga, para hacer un marcador, primero debe crear el marcador y luego agregarle un enlace, cuando se hace clic en el enlace, la página se desplazará a la ubicación con el marcador.
Para crear un marcador se usa un selector id, el selector id se utiliza para asignar reglas CSS y manipular los elementos HTML con JavaScript, JQuery, PHP, etc, en este caso se utiliza para marcar un elemento HTML, (puede ser cualquier elemento HTML que se desee) para poder acceder al marcador desde cualquier parte de la pagina o de otra pagina del sitio web mediante un enlace.
El id puede tener el nombre que deseen, pero no puede empezar con un numero o caracter especial, en el siguiente ejemplo he creado un id dentro de un encabezado <h2> .
<h2 id="C2">Capitulo 2</h2>
Haora se debe crear un enlade para enlazar el Capitulo 2, con el marcador (id="C2"), esto se hace de la siguiente manera
<a href="#C2">Volver al Capitulo 2</a>
Como se ve en el enlace anterior el id debe llevar al principio un signo almohadilla o numeral (#) si no lo lleva no funcionara el enlace, este enlace se puede poner en un capitulo mas abajo en la pagina, que haga referencia al cpitulo 2, indicando que sedebe volver a revisar el capitulo 2-
Tambien se puede enlazar el marcador con el id C2 desde otra pagina del mismo sitio, implementando un enlace que indique en cual pagina se encuentra el marcador o id C2, se enlaza el nombre de la pagina que contiene el marcador en este caso (ejemplo_capitulos.html) y en seguida se coloca el id del marcador (#C2) sin espacios, en el siguiente ejemplo vemos como se hace.
<a href="ejmplo_capitulos.html#C2"a>Volver al Capitulo 2<aa>
Resumen
El enlace se utiliza para navegar entre sitios web externos e internosLa etiqueta <a> se usa para implementar el enlace
El atributo href define la direccion del enlace
El atributo target define en en cual pestaña o ventana se abrira el enlace
El selector id se utiliza para crear un marcador (id="C2")
El marcador se enlaza con el atributo href (href="#C2")
En el proximo tutorial veremos la etiqueta <img> que se utiliza para implementar las imagenes en el documento HTML.
Saludos y que estén bien, nos leemos en el siguiente tutorial, hasta la proxima Amigos.
No hay comentarios.:
Publicar un comentario