En este artículo, analizaremos la vinculación de una imagen, un sitio web y una dirección de correo electrónico a un sitio web.
- La etiqueta HTML img se utiliza para vincular una imagen a un sitio web.
- La etiqueta de anclaje HTML se utiliza para vincular un sitio web agregando la ruta del sitio web en el atributo de referencia de hipertexto ( href) .
- Para vincular una dirección de correo electrónico, especificamos mailto al principio de la dirección de correo electrónico y pasamos esta ruta en el atributo href de la etiqueta de anclaje .
Vincular una imagen: La etiqueta “ img ” se utiliza para agregar o vincular una imagen. La etiqueta de imagen es una etiqueta de cierre automático, lo que significa que no requiere una etiqueta de cierre. Requiere una lista de atributos como src y alt.
Sintaxis:
<img src = "image__source" alt = "alternative__text">
Ejemplo: El siguiente ejemplo agrega una imagen a una página web. Hemos especificado la ruta de la imagen en el atributo source(src) y un texto alternativo en el atributo alt . Consulte la etiqueta HTML <img> para una mejor comprensión.
HTML
<!DOCTYPE html> <html lang="en"> <body> <h2 style="color:green;">GeeksforGeeks </h2> <img src= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png" alt="GeeksforGeeks"> </body> </html>
Producción:
Vincular sitio web: la etiqueta de anclaje se utiliza para vincular un sitio web, tenemos que especificar la ruta del sitio web en el atributo href .
Sintaxis:
<a href = "path"> Link Name </a>
Ejemplo: El siguiente código demuestra vincular un sitio web utilizando el enfoque anterior. Hemos agregado la ruta del sitio web, cuando hacemos clic en el texto debajo de la etiqueta de anclaje , redirigirá la página al enlace especificado.
HTML
<!DOCTYPE html> <html lang="en"> <body> <h2>Click the link</h2> <a href="https://www.geeksforgeeks.org/"> GeeksforGeeks </a> </body> </html>
Producción:
Vincular dirección de correo electrónico: para vincular una dirección de correo electrónico, especificamos mailto al comienzo de la dirección de correo electrónico y pasamos esta ruta en el atributo href de la etiqueta de anclaje .
Sintaxis:
<a href = "mailto:email__address"> Email Address </a>
Ejemplo: El siguiente ejemplo demuestra la vinculación de un correo electrónico. Cuando hacemos clic en el enlace que se muestra, redirigirá nuestra página a la dirección de correo especificada. Consulte el artículo HTML mailto para una mejor comprensión.
HTML
<!DOCTYPE html> <html lang="en"> <body> <h2>Click the link</h2> <a href="mailto:feedback@geeksforgeeks.org"> Email at GeeksforGeeks </a> </body> </html>
Producción:
Diferencia entre vincular a una imagen, un sitio web y una dirección de correo electrónico:
| imagen de enlace | sitio web de enlace | dirección de correo electrónico de enlace |
|---|---|---|
| La etiqueta de imagen (img) se utiliza para insertar la imagen en la página web. | La etiqueta Anchor(a) se utiliza para vincular un sitio web a la página web. | La etiqueta Anchor(a) se utiliza para especificar la dirección de correo electrónico de una página web. |
| La ruta o dirección de la imagen se coloca en el atributo fuente ( src ) de la etiqueta de la imagen. | La ruta o la dirección del sitio web se coloca en el atributo de referencia de hipervínculo ( href ) de la etiqueta de anclaje. | La dirección de correo electrónico se coloca en el atributo de referencia de hipervínculo ( href ) con una propiedad mailto al comienzo de la dirección de correo electrónico. |
Publicación traducida automáticamente
Artículo escrito por anuragsingh1022 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA