Afegiu un enllaç a una imatge en HTML

Autora: Christy White
Data De La Creació: 12 Ser Possible 2021
Data D’Actualització: 1 Juliol 2024
Anonim
HTML5:  HTML Immagini (Lezione 12) ITA [2021]
Vídeo: HTML5: HTML Immagini (Lezione 12) ITA [2021]

Content

Amb una sola línia de codi HTML, podeu afegir una imatge on es pot fer clic a gairebé qualsevol lloc web. Hi ha dues coses que necessitareu perquè aquest treball funcioni. Necessiteu un URL per a la imatge i també l’URL d’un lloc web.

Per trepitjar

Mètode 1 de 2: escriviu el codi HTML

  1. Creeu un fitxer HTML. Obriu un editor de text i, a continuació, creeu un fitxer nou. Deseu el fitxer com a index.html.
      • Podeu utilitzar qualsevol editor de text que vulgueu, fins i tot els senzills editors de text de Windows (Bloc de notes) i Mac OS X (TextEdit).
      • Si voleu utilitzar un editor de text destinat a treballar amb HTML, feu clic aquí per descarregar Atom, un editor de text per a Windows, Mac OS X i Linux.
      • Si utilitzeu TextEdit, feu clic al menú Format abans de crear el fitxer HTML i, a continuació, feu clic a Fes text sense format. Aquesta configuració garanteix que el fitxer HTML es carregui correctament en un navegador web.
      • Els processadors de text com Microsoft Word no són realment bons per escriure HTML, ja que afegeixen caràcters i format invisibles que poden corrompre el fitxer HTML i mostrar-lo de manera incorrecta en un navegador web.
  2. Copieu i enganxeu el codi HTML estàndard. Seleccioneu i copieu el codi HTML següent i enganxeu-lo al vostre index.html obert.

    a href = "URL de destinació"> img src = "URL de la imatge" /> / a>

  3. Cerqueu l'URL de la vostra imatge. Cerqueu una imatge al web, feu-hi clic amb el botó dret i, segons el vostre navegador, feu clic a Copia l’URL de la imatge, Copia l’adreça de la imatge o Copia la ubicació de la imatge.
      • Firefox i Internet Explorer utilitzen la ubicació de la imatge de còpia. Chrome utilitza l’URL de la imatge de còpia. Safari utilitza l'adreça d'imatge de còpia.
  4. Afegiu l'URL de la imatge. Al fitxer index.html, feu clic i arrossegueu per seleccionar l'URL de la imatge amb el ratolí i premeu CTRL + V per enganxar l'URL.
  5. Afegiu l'URL de destinació. A index.html, suprimiu l'URL de destinació i escriviu https://www.startpage.com.
      • Podeu utilitzar qualsevol URL com a URL de destinació.
  6. Deseu el fitxer HTML.
  7. Obriu el fitxer HTML en un navegador web. Feu clic amb el botó dret a index.html i obriu aquest fitxer al navegador web que trieu.
      • Si el navegador s'obre però no veieu la imatge, assegureu-vos que heu escrit correctament el nom del fitxer d'imatge al fitxer index.html.
      • Quan s'obre el navegador, però veieu el codi HTML en lloc de la imatge de fons, el vostre index.html es desa com a fitxer .rtf (fitxer de text enriquit). Proveu d'editar el fitxer HTML en un altre editor de text.

Mètode 2 de 2: entendre el codi HTML

  1. Comprendre l’etiqueta d’ancoratge. El codi HTML consisteix en obrir i tancar etiquetes. L'etiqueta a href = ""> és l'etiqueta inicial i / a> és l'etiqueta final. Això s’anomena etiqueta d’ancoratge i s’utilitza per afegir enllaços a una pàgina web.
    • El a diu a un navegador que creï un enllaç. El href és una abreviatura de referència HTML, el fitxer = diu al navegador que ho canviï entre tots ’ ’ creeu un enllaç. Es pot col·locar qualsevol URL entre les dues cometes.
    • El / a> indica al navegador que l'etiqueta d'ancoratge està tancada.
    • Quan afegiu text entre a href = ""> i / a> aquest text es converteix en un enllaç on es pot fer clic en una pàgina web. Per exemple: a href = "https://www.google.com"> Google / a> crea un enllaç a Google.
  2. Comprendre l’etiqueta d’imatge. L'etiqueta img> és una etiqueta tancada. Podeu tancar-lo amb img src = "" /> o img src = ""> / img>.
    • El img L'etiqueta indica al navegador que mostri una imatge. El src és una abreviatura de font, de = diu al navegador que elimini tot el que hi hagi entre ’ ’ i recuperar la imatge des d’aquesta ubicació.
    • El /> diu a un navegador que tanqui l'etiqueta d'imatge.
    • Per exemple: {samp [} obté la imatge d'aquest URL i la mostra en un navegador web.
  3. Utilitzeu aquest codi a tot arreu. Ara que ja coneixeu aquest codi, podeu a href = "URL de destinació"> img src = "URL de la imatge" /> / a> per afegir imatges on es pot fer clic a qualsevol pàgina web amb codi HTML.