Agregar un enlace a una imagen en HTML

Autor: Christy White
Fecha De Creación: 12 Mayo 2021
Fecha De Actualización: 24 Junio 2024
Anonim
9. LOS LINKS EN HTML | USAR IMAGENES COMO LINKS | Curso HTML 5 Fácil
Video: 9. LOS LINKS EN HTML | USAR IMAGENES COMO LINKS | Curso HTML 5 Fácil

Contenido

Con una sola línea de código HTML, puede agregar una imagen en la que se puede hacer clic en casi cualquier sitio web. Hay dos cosas que necesitará para que esto funcione. Necesita una URL para la imagen y también la URL de un sitio web.

Al paso

Método 1 de 2: escriba el código HTML

  1. Crea un archivo HTML. Abra un editor de texto y luego cree un nuevo archivo. Guarde el archivo como index.html.
      • Puede utilizar cualquier editor de texto que desee, incluso los editores de texto simples de Windows (Bloc de notas) y Mac OS X (TextEdit).
      • Si desea utilizar un editor de texto diseñado para trabajar con HTML, haga clic aquí para descargar Atom, un editor de texto para Windows, Mac OS X y Linux.
      • Si está utilizando TextEdit, haga clic en el menú Formato antes de crear el archivo HTML, luego haga clic en Convertir en texto sin formato. Esta configuración garantiza que el archivo HTML se cargue correctamente en un navegador web.
      • Los procesadores de texto como Microsoft Word no son realmente buenos para escribir HTML, porque agregan caracteres invisibles y formatos que pueden dañar el archivo HTML y hacer que se muestre incorrectamente en un navegador web.
  2. Copie y pegue el código HTML estándar. Seleccione y copie el código HTML a continuación y péguelo en su index.html abierto.

    a href = "URL de destino"> img src = "URL de la imagen" /> / a>

  3. Busque la URL de su imagen. Busque una imagen en la web, haga clic con el botón derecho en ella y (según su navegador) haga clic en Copiar URL de imagen, Copiar dirección de imagen o Copiar ubicación de imagen.
      • Firefox e Internet Explorer utilizan Copiar ubicación de imagen. Chrome usa Copiar URL de imagen. Safari utiliza Copiar dirección de imagen.
  4. Agrega la URL de la imagen. En el archivo index.html, haga clic y arrastre para seleccionar la URL de la imagen con el mouse, luego presione CTRL + V para pegar la URL.
  5. Agregue la URL de destino. En index.html elimine la URL de destino y escriba https://www.startpage.com.
      • Puede utilizar cualquier URL como URL de destino.
  6. Guarde el archivo HTML.
  7. Abra el archivo HTML en un navegador web. Haga clic con el botón derecho en index.html y luego abra este archivo en el navegador web de su elección.
      • Si el navegador se abre pero no ve la imagen, asegúrese de haber escrito correctamente el nombre del archivo de imagen en el archivo index.html.
      • Cuando se abre el navegador, pero ve el código HTML en lugar de la imagen de fondo, su index.html se guarda como un archivo .rtf (archivo de texto enriquecido). Intente editar el archivo HTML en otro editor de texto.

Método 2 de 2: comprender el código HTML

  1. Comprende la etiqueta de anclaje. El código HTML consta de etiquetas de apertura y cierre. La etiqueta a href = ""> es la etiqueta de inicio y / a> es la etiqueta de finalización. Esto se denomina etiqueta de anclaje y se utiliza para agregar enlaces a una página web.
    • La a le dice a un navegador que cree un enlace. La href es una abreviatura de referencia HTML, la = le dice al navegador que cambie todo entre ’ ’ crear un enlace. Cualquier URL se puede colocar entre las dos comillas.
    • La / a> le dice al navegador que la etiqueta de anclaje está cerrada.
    • Cuando agrega texto entre a href = ""> y / a> ese texto se convierte en un enlace en el que se puede hacer clic en una página web. Por ejemplo: a href = "https://www.google.com"> Google / a> crea un enlace a Google.
  2. Comprende la etiqueta de la imagen. La etiqueta img> es una etiqueta cerrada. Puede cerrarlo con img src = "" /> o img src = ""> / img>.
    • La img La etiqueta le dice a un navegador que muestre una imagen. La src es una abreviatura de fuente, de = le dice al navegador que elimine todo entre los ’ ’ y recuperar la imagen de esa ubicación.
    • La /> le dice a un navegador que cierre la etiqueta de imagen.
    • Por ejemplo: {samp [} obtiene la imagen de esa URL y luego la muestra en un navegador web.
  3. Use este código en todas partes. Ahora que conoce este código, puede a href = "URL de destino"> img src = "URL de la imagen" /> / a> para agregar imágenes en las que se puede hacer clic a cualquier página web con código HTML.