Consejos útiles

Hipervínculos HTML

Pin
Send
Share
Send
Send


Meet tag (de anclaje-anclaje), puede incluir texto o una imagen que se convierta en un enlace a ciertos documentos. Atributo de etiqueta href establece el nombre y la ruta del documento al que apunta el enlace.

Todo está escrito así:

Como probablemente entendió, primer.html es el nombre de nuestro segundo documento html, y la inscripción "¡Aquí están mis fotos!" Este es un texto del archivo index.html.

Por analogía con las imágenes, la ruta de enlace al documento que se abre se registra de la misma manera:

Aquí están mis fotos !! - Tal registro implica que en el directorio donde se encuentra nuestro primer documento html hay una carpeta stranica en la que se encuentra el archivo primer.html
Aquí están mis fotos !! - Y esto significa que el archivo primer.html se coloca un nivel más alto del documento
Aquí están mis fotos !! - el documento se encuentra en el sitio www.site.ru ..

Bueno, vamos a intentarlo? A continuación se muestra un ejemplo de dos documentos a la vez que contienen enlaces que apuntan entre sí.



Hacer un enlace un fragmento de texto


Dime, querido niño: ¿en qué oído está zumbando?

Contenido de la lección:

  • Términos
  • § 1. Enlace al archivo, enlace al sitio, enlace a la página
  • § 2. Creación de enlaces externos.
    • § 2.1 Enlaces gráficos (enlaces de imágenes)
  • § 3. Enlaces internos
  • § 4. Referencias absolutas y relativas
  • § 5. Enlace al correo electrónico
  • § 6. Atributos de la etiqueta "A"
    • § 6.1 objetivo de atributo
    • § 6.2 El atributo de título
    • § 6.3 El atributo rel = "nofollow"
  • § 7. Conclusión

Enlaces de anclaje (del ingles "Ancla" - "ancla") Es lo que hay en el código de hipervínculo entre las etiquetas y. Por ejemplo, podría haber:

§ 1. Enlace al archivo, enlace al sitio, enlace a la página

Numerosas preguntas sobre cómo el enlace al archivo difiere del enlace al sitio o su página separada, me obligaron a responder al comienzo de esta lección. La respuesta es: nada. Todos los enlaces enumerados son externos a fuente página y se crean de la misma manera.

Para no difundir el pensamiento en el árbol, mostraré todo con un ejemplo.

Y entonces código de enlace del sitio se ve así:

En el navegador veremos esto:

Código de enlace de página se ve así:

En el navegador veremos esto:

Código de enlace de archivo se ve así:

En el navegador veremos esto:

Como puede ver, todos los tipos de enlaces se crean exactamente igual. La unica diferencia es la direccion El objeto de referencia. Ahora pasemos a la parte principal de la lección.

§ 2. Creación de enlaces externos.

Los enlaces entre ellos difieren en externo y domesticoasí como textual y grafica. Los enlaces externos van más allá de los "límites" de la página html, internos a varias partes lo mismo páginas Los enlaces de texto son texto (de forma predeterminada, está resaltado en azul y subrayado), y los enlaces gráficos contienen algún tipo de imagen como un objeto al que debe hacer clic para saltar. Todos estos tipos de enlaces se crean en HTML usando una etiqueta. (abreviatura de ancla inglesa - ancla). Consideremos con más detalle.

Para crear un enlace externo a un sitio, página o archivo, use el atributo de etiqueta - href. Como valor, este atributo toma Url sitio, página o archivo (hablamos de esto anteriormente). Entre etiquetas y La parte visible del enlace (enlace de anclaje) se encuentra, es decir, lo que vemos en la pantalla del navegador. El enlace de anclaje puede ser texto sin formato (enlace de texto) o imagen gráfica (enlace de imagen). Link-picture se crea insertando una etiqueta que nos resulta familiar de la última lección entre etiquetas y . En general, la sintaxis para crear un enlace se ve así:

Por ejemplo, para crear un enlace de texto a la página principal de este sitio, debe escribir el siguiente código HTML:

En un navegador, se verá así:

Como escribí al comienzo de esta lección, el color del texto del enlace (ancla) se puede cambiar usando los atributos de la etiqueta BODY. En general, se pueden aplicar las mismas opciones de formato al texto de los enlaces que al texto principal de la página, es decir, negrita, cursiva, encabezados, etc.

§ 2.1 Enlaces gráficos (enlaces de imágenes)

Como dije anteriormente, para crear un enlace de imagen, debe usar una imagen en lugar de texto. Un ejemplo de dicho enlace se ve así:

Y el navegador mostrará:

Por defecto, el navegador rodea la imagen en el enlace gráfico. Si esto no es deseable, entonces el atributo de borde Etiqueta IMG necesita asignar el valor 0:

Los enlaces de texto e imagen se pueden combinar. Si escribes:

, el enlace será tanto una imagen como el texto "Inicio"

§ 3. Enlaces internos

Para una navegación cómoda a través de páginas con mucho contenido, se utilizan enlaces internos. Fue con su ayuda que hice el "Contenido de la Lección" (vea el comienzo de esta página). Los enlaces internos se crean con el mismo principio que los enlaces externos. Solo en el valor del atributo href indica el "ancla" del enlace. El ancla se crea con el atributo de nombre:

Y el "ancla" de mí se establece arbitrariamente. Aquí vale la pena decir que no todos los navegadores entienden los nombres rusos de "anclas", por lo que recomiendo usar el alfabeto latino. Texto entre etiquetas crear un "ancla" es opcional y, con mayor frecuencia, no se especifica.

"I sarampión" se encuentra en esos lugares de la página donde el usuario debe llegar después de hacer clic en el enlace.

Como dije anteriormente, en el atributo href en lugar de la dirección, el nombre del "anclaje" deseado con el símbolo de la libra requerida (#) delante de él. Tomemos un ejemplo.

Creé un "ancla" con el nombre de zagolovok y lo colocó en el código de la página al lado del título de esta lección ("Hipervínculos en HTML"). El código de anclaje es el siguiente:

H El código TML para el enlace interno se verá así:

, y en el navegador así:

Después de hacer clic en este enlace, accederá al título de esta lección.

Si lo notó, luego de hacer clic en el enlace interno al encabezado, la URL en la barra de direcciones del navegador ha cambiado:

A la dirección original:

Enlace interno D agregado:

¡Y utilizando esta función, puede vincular a un lugar específico en la página desde cualquier recurso en Internet! Es decir, supongamos que creó una página con un artículo voluminoso sobre algo (o publicó una gran cantidad de fotos en la página) y la marcó con enlaces internos. Al estar en la red social VKontakte, necesitaba referirse no solo a la página con el artículo (o fotos), sino a un lugar específico en él (o una foto específica). Usando la opción con un enlace interno en la dirección, puede obtener fácilmente lo que necesita.

§ 4. Referencias absolutas y relativas

También hay enlaces absoluto y pariente. Un enlace absoluto es un enlace regular de la forma:

Pero con enlaces relativos un poco más complicados. En dichos enlaces, la dirección se indica con respecto la carpeta raíz del sitio (en la que se encuentra la página principal), o relativa a la página original. Dichos enlaces son necesarios, por ejemplo, si el sitio está en una computadora doméstica. O esto no es un sitio, sino un puntero de página a otros documentos.

Primero, creemos un enlace. relativo a la carpeta raíz sitio.

D omita, necesitamos referirnos a la página klienty.htmlque miente en una carpeta con la página principal del sitio. Entonces el código del enlace relativo tomará la forma:

Ahora suponga que en la misma carpeta con la página principal está la carpeta zakazy y ya en ella la página klienty.html se encuentra. Entonces, el código del enlace relativo será así:

T E. Al formar un enlace relativo a la carpeta raíz del sitio, omitimos la parte inicial de la dirección http://www.seoded.ru y deja el resto. Usando la barra "/Al principio necesariamente!

Ahora considere crear hipervínculos. relativo a la página original. Digamos que tenemos una página price.html (la página original) y desde allí debe vincular a la página klienty.html Aquí están las siguientes opciones típicas:

1. Las páginas price.html y klienty.html son en una carpeta.

Entonces el código de enlace será así:

2. La página klienty.html y la carpeta zakazy son en la carpeta raíz del sitioprecio de página.html se encuentra en la carpeta zakazy (es decir, la página klienty.html relativa a la página original price.html es un nivel más).

El código se convertirá así:

Dos puntos indican que necesita salir de la carpeta actual un nivel más arriba.

3. La página klienty.html y la carpeta zakazy son en la carpeta raíz del sitiocarpeta mebel se encuentra en la carpeta zakazyprecio de página.html se encuentra en la carpeta mebel (es decir, la página klienty.html relativa a la página original price.html es dos niveles más altos).

El código de enlace tomará la forma:

Es decir, cada nivel está indicado por dos puntos y una barra "/».

4. La página price.html (la página original) y la carpeta zakazy son en la carpeta raíz del sitio, página klienty.html se encuentra en la carpeta zakazy (es decir, ahora la página klienty.html relativa a la página original price.html es un nivel más bajo).

Ahora el código de enlace será así:

En este caso, no se establecen períodos ni barras inclinadas.

5. La página price.html (la página original) y la carpeta zakazy son en la carpeta raíz del sitiocarpeta mebel se encuentra en la carpeta zakazy, página klienty.html se encuentra en la carpeta mebel (es decir, ahora la página klienty.html relativa a la página original price.html se encuentra dos niveles por debajo).

El código de enlace es este:

6. En la carpeta raíz del sitio dos carpetas mienten: zakazy y oplata. Klienty.html página se encuentra en la carpeta zakazy, la página original price.html se encuentra en la carpeta oplata (es decir, ambas páginas son en diferentes carpetas un nivel más bajo desde la carpeta raíz del sitio).

El código de enlace será el siguiente:

Por analogía, los enlaces relativos también se crean si las páginas están en diferentes niveles en relación con la carpeta raíz. Solo cambiará el número de indicadores de nivel (dos puntos y una barra) y la dirección de la página a la que se coloca el enlace.

§ 5. Enlace al correo electrónico

A crear un enlace de correo electrónico, necesita en lugar de la url en el valor del atributo href escriba una dirección de correo electrónico indicando el protocolo (mailto:) Y luego, cuando hace clic en dicho enlace, se abrirá una ventana del programa de correo con la dirección de correo electrónico ingresada en el campo "Para". En HTML, se ve así:

, y en el navegador así:

§ 6.1 objetivo de atributo

Por defecto, el navegador, al hacer clic en el enlace, abre una página en la misma ventana. Para cambiar esto, use el atributo de etiqueta A objetivo. Tiene los siguientes significados:

_en blanco - abre el enlace en una nueva ventana (en navegadores modernos en una nueva pestaña).

_parent - carga el enlace en la ventana principal.

_self - abre un enlace en la misma ventana. Este es el valor predeterminado para todos los enlaces (es decir, si el atributo de destino no se especifica en absoluto, este valor funcionará).

Estos no son todos los valores de atributos objetivoPero estos son los más básicos. Un ejemplo de uso de este atributo:

§ 7. Conclusión

Esta es información básica sobre Construcción de enlaces HTML. Esta lección se puede considerar completada. Y este hecho sugiere que ya ha dominado la mayoría de los conceptos básicos de HTML.

Le recomiendo que vuelva a las secciones anteriores nuevamente y luego cree una página HTML completa dedicada, por ejemplo, a su amada. Según su diseño y según sus deseos. Luego, póngalo en un hosting gratuito (por supuesto, si tiene un hosting pago, luego en él) y ya disfrute plenamente de su primer sitio.

Puedes mostrárselo a tus amigos u otra persona. En general, siéntase como el propietario de un sitio. Y luego, después de una pequeña juerga con motivo de tal evento, pase a la siguiente sección, en la que le contaré sobre la creación de tablas en HTML.

Y este será el primer paso en el camino para convertir una página personal en un recurso serio.

Atributos básicos de hipervínculo

Dentro de HTML, los hipervínculos pueden tener los siguientes parámetros:

1. título: le permite crear un texto de información sobre herramientas que aparece cuando pasa el mouse sobre un hipervínculo.

Puede tomar los siguientes valores:

  • _blank: el enlace debe abrirse en una pestaña nueva,
  • _self: el hipervínculo en HTML debe estar abierto en la pestaña actual. Valor por defecto
  • _parent: el navegador debe cargar el enlace en la ventana principal,
  • _top: el hipervínculo se carga en todo el espacio de la ventana del navegador (la división en marcos desaparece en este caso).

Por lo tanto, la respuesta a la pregunta "Cómo insertar un hipervínculo en HTML" a menudo se pregunta por los webmasters principiantes.

¡Le deseamos éxito en el aprendizaje de la programación web!

Pin
Send
Share
Send
Send