Cómo crear un enlace en un documento HTML. Etiqueta A - su sintaxis y atributos

1. URL o "dirección" de una página en internet
2. Etiqueta <A> y su sintaxis básica
3. Referencia absoluta y relativa.
4. Enlace relativo al directorio superior al actual
5. Atributos de la etiqueta <A>. Cómo abrir un documento por referencia en una nueva ventana
6. Enlace del título. El atributo de título para la etiqueta <A>
7. Atributo hipervínculo nofollow. Prohibir la transferencia de la "confianza" del sitio por referencia
8. Enlace interno o ancla dentro del documento.
9. Ancla de enlace - Imagen
10. Continuación

Las referencias (o hipervínculos) impregnan Internet como los vasos sanguíneos. Si no hubiera enlaces, no habría internet.

Cómo crear un enlace en un documento HTML y registrar correctamente sus atributos, qué es una URL y cómo se relacionan los motores de búsqueda con los enlaces, en esta próxima lección para principiantes que aprenden HTML.

URL o "dirección" de una página en internet

Cada documento HTML en la Web tiene su propia "dirección exacta". Se llama "URL", del inglés. URL - Localizador uniforme de recursos

La estructura de la URL es a menudo visible en la barra de direcciones del navegador. Incluye:

1. El nombre del protocolo es http: // o https: //
2. Dominio del sitio
3. la carpeta o ruta a la carpeta donde se encuentra este documento,
4. Nombre del archivo (no siempre puede ser).

Gracias a esta "dirección exacta" fue posible referirse a este documento desde el texto de otro documento.

Etiqueta <A> y su sintaxis básica

Espero que la palabra "sintaxis" ya no te asuste 🙂

<a href="http://domen-saita.ru/papka-na-servere/dokument.html"> texto del enlace </a>

Como puede ver, después del inicio de la etiqueta <A>, debe haber un atributo href obligatorio que especifique la dirección del documento al que desea ir.

Dentro de la etiqueta contenedora <A> hay un texto (aunque puede haber una imagen), que es el texto del enlace. También se le llama " Ancla " o simplemente - Ancla.

Referencia absoluta y relativa.

En los ejemplos anteriores, se utilizaron referencias absolutas . Aquellos que contienen la URL completa del documento.

En algunos casos, el atributo href no contiene una URL completa con el nombre del protocolo y el dominio del sitio. Si el documento al que se dirige el enlace se encuentra en el mismo sitio, puede utilizar el enlace relativo que va desde el lugar donde se encuentra el documento.

Esquema cuando se aplica referencia relativa

Ejemplo: un enlace del documento first.html conduce al archivo second.html, que se encuentra en la carpeta de noticias.

Enlace relativo al directorio superior al actual

Código:

<a href="../first.html"> este es un enlace relativo a un archivo en un directorio de nivel uno </a>

Este enlace conduce al archivo first.html en el directorio "padre", es decir, un nivel arriba

La combinación ../ indica una carpeta un nivel por encima de la posición dada del archivo desde el cual se realiza el enlace.

Atributos de la etiqueta <A>. Cómo abrir un documento por referencia en una nueva ventana

Para que el documento se abra en una nueva pestaña del navegador, debe usar el atributo target = "_ blank"

Enlace del atributo target = "_ blank"

No lo abuses. No es necesario realizar enlaces internos al sitio con este atributo. Los usuarios estarán molestos por la "ventana de chispas".

En general, con este atributo objetivo - toda la historia. Todavía hay una serie de sus significados, pero todos ellos rara vez se utilizan en la actualidad.

Esto se debe a que están diseñados para trabajar con el sitio en marcos que ya no son populares y, con la llegada de HTML5 , se están convirtiendo en una cosa del pasado.

Enlace del título. El atributo de título para la etiqueta <A>

Otro atributo útil es title = "Texto que explica a dónde conduce este enlace"

Sintaxis:

<a href="http://domen-saita.ru/papka-na-servere/dokument.html" title="the pop -up hint"> este es un enlace de pistas </a>

Como puede ver, el navegador lo muestra como una sugerencia de herramienta. Y sin embargo, tiene en cuenta los buscadores.

Atributo de pista para el título del enlace

Atributo hipervínculo nofollow. Prohibir la transferencia de la "confianza" del sitio por referencia

Hay un atributo más ambiguo para los enlaces rel = "nofollow"

Él le dice a los motores de búsqueda que el documento de enlace puede no ser confiable. Al mismo tiempo, los indicadores de confianza ("confianza") del sitio de origen no se transmiten al sitio por referencia.

El tema de "confianza" y la clasificación de enlaces aún está por venir, pero si es corto, el "destino" de los sitios en los motores de búsqueda también dependerá de la cantidad de enlaces que conducen a este sitio. Cuantos más, más vínculos de sitios con autoridad - más credibilidad del sitio por referencia.

En algunos casos, vale la pena "filtrar" los enlaces con este atributo. Por ejemplo, si escribes una crítica negativa sobre cualquier servicio.

<a href="http://bad-sait.ru/dokument.html" rel="nofollow"> sitio incorrecto </a>

Enlace interno o ancla dentro del documento.

En textos grandes, a menudo se requiere la instalación de los llamados “anclajes” en partes lógicas del documento. Entonces, está en este lugar, puede referirse.

La forma más fácil de usarlo es crear una tabla de contenido local a partir de hipervínculos que conducen a estos anclajes. Tales tablas de contenido se colocan generalmente al principio del artículo.

Cuando se crea tal ancla, se usa el atributo de nombre en lugar del atributo href.

La sintaxis para crear un ancla es:

<a name="top"> </a>

Al crear un enlace, al final de la URL agregue a través del signo # - el nombre del "ancla":

<p> <a href="#top"> Top </a> </ p>

La transición será exactamente a este lugar, es decir, El navegador colocará este lugar en su parte superior visible.

A menudo, en documentos largos, en la parte inferior ponen un enlace "Top".

... habiendo viajado por el mundo de granos fragantes, encontraron la más alta calidad de aquellos por los cuales África, Asia, Centro y Sudamérica son famosos. Así que hoy en las cafeterías de la marca. Grano de cafe Encontrará las mejores variedades de café de fabricantes reconocidos.

? A la cima ?

Desde otro documento, también puede ir a este lugar, si agrega al final de la URL a través del signo # nombre_accord

<a href="http://domen-saita.ru/dokument.html#top"> el texto del enlace conduce a un "top" en este documento </a>

Ancla de enlace - Imagen

Cualquier imagen puede ser un enlace.

Código:

<a href="http://sait.ru/dokument.html"> <img src = kartinka.jpg "width =" 100 "height =" 131 "/> </a>

De manera predeterminada, los enlaces están subrayados por el navegador con una línea azul continua, y las imágenes de enlace obtienen el marco azul.

Los enlaces-imagenes consiguen un marco azul.

Para deshacerse de él, se agrega una regla simple al archivo CSS para el sitio:

a {border: 0px;}

Esta es una instrucción para hacer que el grosor del borde sea cero para todos los enlaces de imagen.

Continuación

En la próxima publicación, hablaré sobre los enlaces de correo electrónico, sus atributos y métodos de "protección" contra los spammers.