Marcar Hipervínculos

Un enlace de marcador (comúnmente llamado enlace de anclaje) es útil cuando su página web es bastante larga, y los usuarios tienen que desplazarse hacia abajo para leerla toda. Puedes insertar Marque los enlaces para ayudar a la navegación. Cuando los usuarios hacen clic en sus enlaces, ellos saltar a diferentes secciones de sus páginas web. Incluso puedes usar un enlace de marcador para saltar a una página web diferente, y volver al mismo lugar donde se fueron.

Hay dos partes en el marcador: El propio enlace clicable, y el lugar a donde quieres saltar.

El lugar al que quieres saltar, el destino del clic, utiliza de nuevo la etiqueta. Esta vez, el atributo añadido no es HREF sino ID (utilizó en las versiones anteriores de HTML). Luego rodeas algún texto o imagen con la etiqueta. Así:

<A ID = "section1"> In </a> en esta primera sección, discutiremos los enlaces

Hemos rodeado la palabra "In" con nuestro marcador de destino. El El nombre de la identificación en sí, la parte después del signo igual, puede ser lo que quieras. Pero usarás esa identificación en la parte de enlace del marcador. Aquí está el enlace real, la parte que la gente ve y en la que hace clic.

<A HREF = "#sección1"> Haga clic aquí para la Sección Uno </A>

Note que volvemos al atributo de la HREF. Esta vez, después del signo de igualdad, hay un símbolo de hachís/libra ( # ). Después del símbolo hash se escribe la identificación que usado en el primer paso. Luego escribes el texto sobre el que la gente hará clic. Por último, cierras la etiqueta con...

Puedes añadir un marcador a otra página web, si quieres. En cuyo caso, el el enlace sería este:

<A HREF = "page2.html#section2"> Click aquí para la Sección Dos </A>

Fíjate dónde está el símbolo del hash ahora, después del nombre de una página web. El ID de el marcador de destino sigue el símbolo del hash. No hay espacio entre los dos.

El enlace de destino en sí mismo iría entonces a algún lugar de la página 2.html. Si tuvieras otro marcador en la página dos, podrías hacer que el usuario salte de nuevo a la misma ...en el lugar donde se fueron.

Enlaces de correo electrónico

También se puede añadir un enlace de correo electrónico a las páginas web. Cuando la gente hace clic en este correo electrónico su software de correo electrónico se pondrá en marcha. En la casilla "Para" del correo electrónico software, aparecerá su dirección de correo electrónico. El código para un enlace de correo electrónico es este:

<A HREF = "MailTo:[email protected]"> Email us </A>

Fíjese que el enlace es del tipo HREF. Después del signo de igualdad tienes esto:

Mailto:

Mailto es una sola palabra, seguida de dos puntos. Luego pones tu correo electrónico dirección después del colon, sin escribir un espacio. Luego escribes un ángulo recto entre paréntesis ( > ) antes de escribir el texto que quieres que la gente haga clic para enviar un correo electrónico. La etiqueta de cierre de Anchor... termina con todo.

Y eso es todo para la dirección de correo electrónico, ¡bastante simple!

Pruebe el código de correo electrónico en una página web, guarde su trabajo y vea qué pasa cuando ves la página web y haces clic en el enlace del correo electrónico.

Sin embargo, hay un gran peligro de usar un enlace de correo electrónico en sus páginas web: los spammers han escrito programas llamados "bots" para rastrear la Internet buscando para MailTo. Si el "bot" lo encuentra, su dirección de correo electrónico será recogida. En resumen, es mejor no usar la etiqueta de correo electrónico. Mucho mejor es usar el scripting para sus direcciones de correo electrónico. Por ejemplo, aquí hay algo de JavaScript que hace el trabajo mejor, ya que los "bots" automatizados de los spammers no pueden leerlo:

SCRIPT LANGUAGE="JavaScript" type="text/javascript">

document.write("P")/Public.P.)/Centro Me</H1;/Centro&")

document.write("<P align = Center >Haga clic abajo para enviarme un correo electrónico</P>")
var atSign = "@"
var firstPart = "onl"
var ispP1 = "ine"
var ispP2 = "homeand"
var ispP3 = "learn.co.uk"
var wholeAddress = firstPart + ispP1 + atSign + ispP2 + ispP3

var mToPart1 = "mai"
var mToPart2 = "lto:"
var mt = mToPart1 + mToPart2
var hrefP1 = "<a href= " + mt + wholeAddress + ">Click aquí para enviarme un correo electrónico..."

document.write("<Center>" + hrefP1 + "</Center>")

No necesitas ser capaz de entender todo el código anterior. Pero fíjate en cómo la dirección de correo electrónico se corta en pedazos con estas líneas:

var atSign = "@"
var firstPart = "onl"
var ispP1 = "ine"
var ispP2 = "homeand"
var ispP3 = "learn.co.uk"

La dirección es la de ellos reensamblados más tarde y escrita.

Enlaces a otros archivos (documentos de Word, archivos ZIP, PDFs, etc.)

Puedes poner un enlace en tu página web a otros archivos que no sean imágenes y páginas web. Se puede hacer un enlace a todo tipo de archivos diferentes. Por ejemplo, si tienen un archivo PDF que quieren compartir con otros, el código sería este:

<A HREF = "MyPDF.pdf"> Descargar mi PDF </A>

Al hacer clic en el enlace, el navegador verá la extensión del archivo .pdf y ...tratar de abrirla. Puedes hacer que el documento se abra en una nueva ventana añadiendo TARGET="_blank" al código A HREF, tal como lo hiciste arriba.

No tienes que añadir nada especial para que la gente descargue archivos como PDFs, o documentos de Word, o archivos comprimidos. Sólo un enlace normal con el nombre de la después de que la parte de la HREF lo haga.

Imágenes como enlaces

Puedes convertir las imágenes en hipervínculos. Lo único que necesitas hacer es rodear tu imagen con una etiqueta A HREF. Como esta:

A HREF="pages/about.html">

img src="https://www.homeandlearn.co.uk/WD/nav_icon.gif"> Acerca de este sitio

...y que no se puede hacer nada..;

El resultado sería este, en el navegador web Firefox:

Otros tipos de hipervínculos

Sin embargo, Internet Explorer mostrará el icono de la siguiente manera:

Otros tipos de hipervínculos

Los iconos ahora tienen un rectángulo azul alrededor de ellos. Esto se debe a que son hipervínculos primero y las imágenes segundo. Para deshacerse del rectángulo azul puedes añadir esto a la etiqueta IMG:

A HREF="pages/about.html">

BORDE="nav_icon.gif" BORDER="0"0"0; Acerca de este sitio

Así que hemos puesto el atributo BORDER a cero. Esto elimina el rectángulo azul de Internet Explorer.

En la próxima lección, aprenderás sobre el CSS y los hipervínculos.

| CSS e hipervínculos