Aggiungi un collegamento a un'immagine in HTML

Autore: Christy White
Data Della Creazione: 12 Maggio 2021
Data Di Aggiornamento: 1 Luglio 2024
Anonim
How to link one page to another page using Image in html
Video: How to link one page to another page using Image in html

Contenuto

Con una singola riga di codice HTML, puoi aggiungere un'immagine cliccabile a quasi tutti i siti web. Ci sono due cose di cui avrai bisogno per fare in modo che funzioni. Hai bisogno di un URL per l'immagine e anche l'URL di un sito web.

Al passo

Metodo 1 di 2: scrivi il codice HTML

  1. Crea un file HTML. Apri un editor di testo e quindi crea un nuovo file. Salva il file come index.html.
      • Puoi utilizzare qualsiasi editor di testo che desideri, anche i semplici editor di testo di Windows (Blocco note) e Mac OS X (TextEdit).
      • Se desideri utilizzare un editor di testo concepito per lavorare con HTML, fai clic qui per scaricare Atom, un editor di testo per Windows, Mac OS X e Linux.
      • Se stai usando TextEdit, fai clic sul menu Formato prima di creare il file HTML, quindi fai clic su Crea testo normale. Questa impostazione garantisce che il file HTML venga caricato correttamente in un browser web.
      • Gli elaboratori di testi come Microsoft Word non sono particolarmente adatti per scrivere HTML, perché aggiungono caratteri invisibili e formattazione che possono danneggiare il file HTML e renderlo visualizzato in modo errato in un browser web.
  2. Copia e incolla il codice HTML standard. Seleziona e copia il codice HTML di seguito e incollalo nel tuo index.html aperto.

    a href = "target url"> img src = "image url" /> / a>

  3. Trova l'URL della tua immagine. Trova un'immagine sul Web, fai clic con il pulsante destro del mouse e (a seconda del browser) fai clic su Copia URL immagine, Copia indirizzo immagine o Copia posizione immagine.
      • Firefox e Internet Explorer utilizzano Copia percorso immagine. Chrome utilizza Copia URL immagine. Safari utilizza Copia indirizzo immagine.
  4. Aggiungi l'URL dell'immagine. Nel file index.html, fare clic e trascinare per selezionare l'URL dell'immagine con il mouse, quindi premere CTRL + V per incollare l'URL.
  5. Aggiungi l'URL di destinazione. In index.html elimina l'URL di destinazione e digita https://www.startpage.com.
      • È possibile utilizzare qualsiasi URL come URL di destinazione.
  6. Salva il file HTML.
  7. Apri il file HTML in un browser web. Fare clic con il pulsante destro del mouse su index.html e quindi aprire questo file nel browser Web di propria scelta.
      • Se il browser si apre ma non vedi l'immagine, assicurati di aver digitato correttamente il nome del file immagine nel file index.html.
      • Quando il browser si apre, ma vedi il codice HTML invece dell'immagine di sfondo, il tuo index.html viene salvato come file .rtf (file rich text). Prova a modificare il file HTML in un altro editor di testo.

Metodo 2 di 2: comprendere il codice HTML

  1. Comprendi il tag di ancoraggio. Il codice HTML consiste nell'apertura e nella chiusura dei tag. Il tag a href = ""> è il tag di inizio e / a> è il tag di fine. Questo è chiamato un tag di ancoraggio e viene utilizzato per aggiungere collegamenti a una pagina web.
    • Il un dice a un browser di creare un collegamento. Il href è un'abbreviazione di riferimento HTML, il = dice al browser di cambiare tutto tra ’ ’ creare un collegamento. Qualsiasi URL può essere inserito tra le due virgolette.
    • Il / a> dice al browser che il tag di ancoraggio è chiuso.
    • Quando aggiungi del testo tra a href = ""> e / a> quel testo diventa un collegamento cliccabile in una pagina web. Per esempio: a href = "https://www.google.com"> Google / a> crea un collegamento a Google.
  2. Comprendi il tag immagine. Il tag img> è un tag chiuso. Puoi chiuderlo con img src = "" /> o img src = ""> / img>.
    • Il img Il tag indica a un browser di visualizzare un'immagine. Il src è un'abbreviazione di source, de = dice al browser di eliminare tutto ciò che si trova tra i file ’ ’ e recuperare l'immagine da quella posizione.
    • Il /> dice a un browser di chiudere il tag immagine.
    • Ad esempio: {samp [} ottiene l'immagine da quell'URL, quindi la visualizza in un browser web.
  3. Usa questo codice ovunque. Ora che conosci questo codice, puoi a href = "target url"> img src = "image url" /> / a> per aggiungere immagini cliccabili a qualsiasi pagina web con codice HTML.