La vinculación en código HTML se hace con la etiqueta de anclaje, la etiqueta <A>. La letra La "A" de la etiqueta va seguida de un atributo. Para un enlace a otro la "A" va seguida de "HREF". Para establecer un marcador en la misma página, la "A" va seguida de "NOMBRE", lo cual para ver cómo hacerlo después.

Echa un vistazo a este ejemplo, que es un enlace al popular motor de búsqueda Google:

http://www.google.com/"> Google Motor de búsqueda </A>

Fíjese dónde están todos los corchetes de ángulo (< >) en el enlace. Después de la La primera, tenemos la parte "A" de la etiqueta. Luego tenemos el HREF parte, que significa un enlace a otra página web. Después de eso viene un signo igual (=). Después del signo igual viene la dirección de la propia página web. La dirección es sensible a las mayúsculas y minúsculas, así que si hay una letra mayúscula en la dirección, asegúrese de para incluirlo. Esta dirección www.google.com es diferente de esta dirección www.gOOgle.com .

Después de la dirección viene el paréntesis del ángulo recto ( ). A continuación viene el texto que la gente ve, el texto en el que quieres que hagan clic. Para cerrar un enlace de anclaje, usas la etiqueta del ancla final. Que es esta: </A>

Pero hagamos un trabajo práctico.

Abre el archivo de texto de tu plantilla. Haz clic en File > Save As en el menú en el Bloc de Notas (o cualquier editor de texto que esté usando). Cuando el diálogo Guardar como aparece navegar a tu carpeta de HTML:

Enlaces a otras páginas web

Así que vamos a guardar la nueva página web fuera de la carpeta de páginas.

En el cuadro de nombre de archivo, escriba index.html. Asegúrate de que el Save As Type El área dice Todos los Archivos, si usas Windows. Antes de hacer clic en el botón Guardar su ventana del Explorador debería verse así:

Enlaces a otras páginas web

Cuando se hace clic en el botón Guardar, se debe tener una página web llamada index.html en la carpeta HTML:

Enlaces a otras páginas web

Lo que vamos a hacer es colocar un hipervínculo en nuestra página de índice . Cuando Si se hace clic en este hipervínculo, le diremos al navegador que cargue una página llamada about.html . Guardaremos esta nueva página about en nuestra carpeta de páginas.

Así que, usa tu plantilla de archivo de texto para crear una nueva página web. Cuando guardas el página, haga doble clic en la carpeta de páginas para moverse dentro de ella. En el cuadro de nombre de archivo, type about.html . Entonces guarda tu página:

Enlaces a otras páginas web

Así que tenemos una página web en la carpeta HTML y una página web en la carpeta de páginas. Ahora tenemos que enlazarlas entre sí.

Abre tu código para la página index.html. Inserte la siguiente línea entre las dos etiquetas del cuerpo:

A HREF="pages/about.html%20"* este sitio</Americanos;

Tu código debería ser así (hemos añadido un TÍTULO):

Enlaces a otras páginas web

Guarda tu trabajo y carga la página en tu navegador. Deberías ver esto:

Enlaces a otras páginas web

¡Y eso es un hipervínculo! Noten que la única cosa en la página que se puede ver el visitante es el texto "Acerca de este sitio". El código que escribimos gira de un texto normal a un enlace en el que la gente puede hacer clic. El código en sí mismo era esto:

<A HREF="pages/about.html"> Acerca de este sitio </A>

Así que para convertir el texto en un enlace, se empieza con un paréntesis de ángulo seguido por el letra A. Después de un espacio, escriba HREF. A continuación, un signo de igualdad. La página que quieres para vincularlo va entre comillas. Pero noten que comenzamos con la carpeta nombre: pages/about.html. Esto dice, "Busca una página llamada about.html. Esta página está en la carpeta de páginas".

Escriba un ángulo recto para terminar la primera parte del código de enlace. El texto que quieres que la gente vea viene a continuación "Acerca de este sitio". Para envolver todo, necesitas la etiqueta de cierre de hipervínculos :...

Al hacer clic en tu enlace, deberías encontrar una página en blanco que se carga en el navegador. Si miras en la barra de direcciones, deberías ver que dice about.html en el final. ¡Has enlazado con éxito a una nueva página!

Para volver a la página de índice, necesitas otro enlace.

Abre tu código para la página about.html. Para la página about , necesitamos para construir el HREF correcto. No podemos hacer esto:

<A HREF="pages/index.html"> Go a la página de inicio </A>

El HREF anterior apunta a una página de índice en la carpeta de páginas. Pero nuestro índice La página no está en esta carpeta. Está en la carpeta HTML, que es una carpeta arriba de las páginas. Como hicimos con las imágenes, podemos usar dos puntos y una barra inclinada:

https://www.homeandlearn.co.uk/index.html">

Dos puntos y una barra oblicua, recuerden, significan "Subir una carpeta".

Así que inserta el siguiente código en tu página about.html :

https://www.homeandlearn.co.uk/index.html"> Ir a la página de inicio </A>

Guarda tu trabajo y actualiza la página en tu navegador. Haga clic en su hipervínculo en la página about.html. Deberías encontrar que la página de índice se cargará. Cuando usted haga clic en el enlace de la página de índice, la página "Acerca de" se cargará.

Ejercicio
Crear una tercera página web. Guárdala en tu carpeta de páginas y llámala contact.html . Crea un enlace desde la página del índice a esta nueva página. Crear un enlace de vuelta de la página de contacto a la página de índice .

Cuando complete el ejercicio anterior, tendrá dos enlaces en la página del índice. Pueden verse así:

Enlaces a otras páginas web

Puedes usar las técnicas de HTML que has aprendido hasta ahora para mejorar el aspecto de estos enlaces. Por ejemplo, puede que quieras que los enlaces vayan en vertical en lugar de horizontalmente. En ese caso, rodea tu código de hipervínculos con etiquetas P. Aquí está el código de dos enlaces verticales en la página del índice:

Enlaces a otras páginas web

El resultado se vería así:

Enlaces a otras páginas web

Sin embargo, no se preocupe demasiado por la presentación por ahora como verá cómo mejorar los enlaces de navegación con las listas CSS y HTML un poco más tarde. Pero pruebe este ejercicio.

Ejercicio
Tiene dos enlaces en cada una de sus tres páginas. La página about.html debe tener enlaces que conducen a la página de índice y a la página de contacto. La página de conact.html debe tener enlaces a la página de índice y a la página "Acerca de".

La parte difícil del ejercicio anterior es hacer bien la parte del HREF. Sólo recuerda que cuando las páginas html están en la misma carpeta sólo tienes que escribir el nombre de la página a la que estás enlazando. Así que esto:

HREF="nombre_de_página_aquí.html"

en lugar de esto:

HREF="../nombre_de_la_página_aquí.html"

o esto:

HREF="pages/page_name_here.html"

Sólo estás usando las mismas reglas de referencia de archivos que aprendiste en las imágenes sección.

El Atributo del Objetivo

Al igual que la etiqueta IMG, la etiqueta A HREF puede tomar atributos. Uno de ellos es llamado TARGET. El atributo TARGET se usa para decirle al navegador dónde quiere para abrir el enlace. Por ejemplo, puedes decirle al navegador que abra la página enlazada en una nueva ventana del navegador. Hay varios valores para elegir:

...en la que se ha hecho un gran esfuerzo para que la gente se sienta segura... ...padre... ...y no se puede hacer nada más... ...en la parte superior...

Sin embargo, el único realmente útil en la versión 5 de HTML es BLANCO. El valor por defecto es SELF, así que no necesitas especificar un atributo de TARGET la mayoría de las veces. Si quieres que el enlace se abra en una nueva ventana, el código es este:

A HREF="pages/about.html" TARGET="_blank" ;About este sitio </A>

Fíjese en el carácter de subrayado antes de la palabra "blanco". Echa de menos esto y tu atributo de OBJETIVO no funcionará.

Los otros dos atributos de TARGET son para cuando su sitio web utiliza algo llamado MARCOS. Los marcos están fuera de uso, sin embargo, y no se recomiendan para HTML5.

Colores de los hipervínculos

Puedes crear tus propios colores para los hipervínculos. El valor por defecto es lo que sea el que el usuario ha configurado en el navegador, normalmente en azul, con un subrayado azul. Pero no tienen que tener el azul. La etiqueta A viene con tres atributos que pueden ayudarte a anular el valor por defecto del navegador:

LINK
Poner el color de un enlace antes de que se haya pulsado en

ALINK
Establecer el color de un enlace cuando se hace clic en el enlace

VLINK
Establecer el color de un enlace después de que se ha hecho clic en

La A y la V de arriba significan Activo y Visitante. Las usas así:

A HREF="pages/about.html" LINK="red" este sitio</Americanos;

Así que seleccionas el atributo que quieres usar, y luego eliges un color para tu enlaces. También puede ser un valor hexadecimal o RGB.

Pruébelos usted mismo con los enlaces de cualquiera de sus tres páginas web. Oso en mente, sin embargo, que la gente espera que un hipervínculo sea azul con un subrayado - es una pista visual de que estás enlazando con algún contenido extra. Además, los colores de los enlaces usados de esta manera están ahora fuera de moda. Es mejor usar estilos CSS para su hipervínculos. Verás cómo hacerlo en una lección posterior.

En la próxima lección, aprenderás sobre otros tipos de hipervínculos.

| Otros hipervínculos | Otros hipervínculos

Volver a la página de inicio

Recomendado para ti