Los enlaces se definen en HTML mediante el elemento a. Antes de mostrarte cómo utilizarlo, aquí tienes algunos consejos generales sobre los hipervínculos. Asegúrate de pensar en buenos textos para los enlaces. Un simple "atrás" no suele ayudar a nadie. (Si un visitante viene de una página externa, normalmente no sabe lo que significa back ). Intente elegir textos de enlace descriptivos.
Los hipervínculos siguen siempre el mismo principio en HTML.
<a href="videos.html">Vídeos actuales</a>
El atributo href se asigna al elemento a. Este href espera a su vez el destino del enlace como valor. En el ejemplo anterior, se hacía referencia al archivo videos.html. Éste se encuentra en el mismo directorio que el fichero HTML en el que se ha definido el hiperenlace.
Al definir los hiperenlaces, también se aplican las reglas que se presentaron en relación con la integración de gráficos.
Por cierto, no sólo se pueden definir enlaces internos al proyecto. También se pueden definir hipervínculos a archivos y dominios externos.
<a href="http://www.psd-tutorials.de">PSD-Tutorials.de</a>
El texto entre la apertura < ;a> y el cierre </a> es en última instancia el texto del enlace. Por defecto, los navegadores subrayan este texto.
Especificar la ventana de destino
Si hace clic en un hipervínculo, el enlace de destino se abre en la ventana actual del navegador. Esto suele ser perfectamente correcto. Sin embargo, puede ocurrir que haya establecido un enlace a un dominio externo, por ejemplo. Si un visitante hace clic en este enlace, el destino del enlace debería abrirse en una nueva ventana o pestaña del navegador. La ventaja de esta variante es que su sitio web permanece abierto en segundo plano.
Sin embargo, no debe abrir todos los hipervínculos de su sitio en una ventana externa, ya que esto molesta rápidamente a los visitantes.
El atributo target del elemento a puede utilizarse para determinar la ventana de destino en la que debe abrirse el enlace correspondiente. HTML ofrece inicialmente tres valores estándar para target.
- _blank - El destino del enlace se muestra en una nueva ventana del navegador.
- _self - Abre el enlace en la ventana actual del navegador.
- _parent - Aquí puede salir del marco. (Tenga en cuenta que los marcos no son compatibles con HTML5. En cualquier caso, esta tecnología ya no debería utilizarse, pues hoy en día existen alternativas mejores. Si quieres saber más sobre marcos, encontrarás lo que buscas en http://de.wikipedia.org/wiki/Frame_(HTML), por ejemplo).
- _top - También se utiliza en relación con los marcos. Puede utilizarlo para abrir el enlace de destino fuera del conjunto de marcos.
He aquí un ejemplo de cómo utilizar el atributo target:
<a href="http://www.psd-tutorials.de" target="_blank">PSD-Tutorials.com</a>
En este caso, el enlace http://www.psd-tutorials.de se abriría en una nueva ventana o pestaña. También se conseguiría el mismo efecto si utilizara un nombre de fantasía como halligalli en lugar del nombre reservado _blank. Sin embargo, si utiliza target, yo recomendaría utilizar uno de los nombres reservados.
Determinar la base de referencia
Puede definir una denominada base de referencia en el área head del archivo HTML. Una base de enlaces de este tipo garantiza que todos los destinos de los enlaces se muestren en una ventana específica del navegador. Por supuesto, esto también es de interés principalmente en relación con los marcos.
Sin embargo, también es práctico si, por ejemplo, desea mostrar todos los enlaces en una nueva ventana del navegador utilizando _blank. Imagine una lista de enlaces. Si sus enlaces debieran abrir siempre una nueva ventana, tendría el siguiente aspecto
<a href="http://www.facebook.com/psdtutorials" target="_blank">http://www.facebook.com/psdtutorials</a> <br /> <a href="http://www.facebook.com/psdDarkArt" target="_blank">http://www.facebook.com/psdDarkArt</a> <br /> <a href="http://www.facebook.com/HowToNetzwerk" target="_blank">http://www.facebook.com/HowToNetzwerk</a>
Por lo tanto, tendría que asignar un atributo target a cada una de las definiciones.
Como puede ver, esto no es especialmente eficaz. Y aún menos si dentro de unos meses decide no abrir los enlaces en una ventana nueva. En ese caso, tendría que ajustar los atributos de destino de todos los enlaces. Esto puede evitarse mediante la mencionada base de ventana de destino. Esto se define a través del elemento base dentro de head. Al elemento base se le asigna el atributo target con el valor deseado. He aquí un ejemplo de cómo podría verse:
<!DOCTYPE html> <html lang="en"> <head> <title>PSD-Tutorials.de</title> <meta charset="UTF-8" /> <base target="_blank"> </head> <body> <a href="http://www.facebook.com/psdtutorials">http://www.facebook.com/psdtutorials</a> <br /> <a href="http://www.facebook.com/psdDarkArt">http://www.facebook.com/psdDarkArt</a> <br /> <a href="http://www.facebook.com/HowToNetzwerk">http://www.facebook.com/HowToNetzwerk</a> </body> </html>
Esto te ahorra mucho tecleo.
Definir anclas
Ya ha visto cómo puede establecer hipervínculos a otros archivos. Sin embargo, también puede definir las llamadas anclas dentro de un fichero HTML. A continuación, puede establecer referencias a estas anclas. Esto resulta práctico, por ejemplo, para páginas extensas. De este modo, se puede definir un índice de contenidos al principio del documento, que los visitantes pueden utilizar para saltar a las secciones pertinentes sin tener que desplazarse por la ventana del navegador.
Las anclas se crean mediante el elemento a. Sin embargo, a las definiciones de anclas no se les asigna un atributo href, sino un atributo name.
<a name="inicio de página">Contenido</a> <a name="capítulo1">Contenido capítulo 1</a> <p>Aquí sigue mucho texto.</p> <a name="capítulo2">Contenido capítulo 2</a> <p>Aquí sigue mucho texto.</p> <p>
Puedes asignar libremente los nombres de los anclajes. Sin embargo, te recomiendo que sean lo más cortos posible, utilices sólo minúsculas y evites los caracteres especiales.
Para hacer referencia a un ancla, defina un hipervínculo normal, como se muestra al principio de este tutorial.
<a href="#inicio de página">Al inicio de la página</a>
El nombre del ancla se asigna al atributo href como valor. Sin embargo, es importante que el nombre del ancla vaya precedido de un signo de almohadilla.
También puede establecer referencias a anclas a través de archivos. En el siguiente ejemplo, asumo que hay un archivo news .htm en el mismo directorio que el archivo HTML actual. Dentro de news. htm, se ha definido el inicio de página de anclaje. Para referirse a ella, se anota un signo de almohadilla después del nombre del archivo de destino(news.htm). A continuación aparece el nombre del ancla.
<a href="news.htm#inicio de página">Al inicio de la página</a>
Así de fácil es establecer referencias a anclas en cualquier archivo.
