Introduzione a Image Link in HTML
Link immagine In HTML si trova in quasi tutte le pagine in quanto ci aiutano a navigare da una pagina all'altra su un sito Web. Una combinazione popolare è quella di utilizzare il tag anchor HTML con il tag img HTML . Con questa combinazione, possiamo consentire lo spostamento degli utenti da una pagina all'altra facendo clic su un'immagine. Prima di approfondire questo argomento, comprendiamo innanzitutto il funzionamento e il rendering degli elementi di ancoraggio e di immagine singolarmente, quindi combinali per ottenere un'immagine collegata.
Tag di ancoraggio HTML
Il tag di ancoraggio HTML viene utilizzato per creare collegamenti ipertestuali HTML ad altre pagine Web o contenuti multimediali ospitati sul Web. Facciamo riferimento alla sintassi seguente per capire come funzionano i tag anchor e i loro attributi di base
Clicca qui!!
Nell'esempio sopra, l'attributo "href" specifica l'URL della pagina Web a cui vorremmo reindirizzare l'utente mentre fai clic sul testo "Fai clic qui !!".
Vediamo il codice completo di seguito:
Produzione
->
Con l'esempio sopra, sarai in grado di fare le seguenti osservazioni
- Un collegamento non visualizzato apparirà sottolineato e di colore blu. Per es. Questo è un link non visitato
- Un link visitato apparirà sottolineato e di colore viola. Per es. Questo è un link già visitato
- Un collegamento attivo appare sottolineato e di colore rosso. Per es. Questo è un collegamento attivo
Tag immagine HTML
Durante la navigazione in Internet, sono sicuro che devi aver trovato diverse pagine Web che contengono varie forme di contenuti multimediali. Soprattutto le immagini sono una forma popolare di multimedia che può essere trovata in quasi tutte le pagine Web interattive e siti Web oggi. Comprendiamo il tag immagine e la sua implementazione in HTML con l'esempio seguente:
Sintassi
Cerchiamo ora di capire come funzionano tutti gli attributi nel tag img:
- src: l'attributo src definisce il percorso del file immagine che stiamo cercando di caricare con questo tag. Può essere un collegamento a un'immagine ospitata sul Web con il formato come example.com/images/dummy.png.webp oppure può un file di immagine ospitato localmente sullo stesso server della pagina Web.
- alt: l'attributo alt definisce il testo e la descrizione dell'immagine che vorremmo visualizzare nel caso in cui le immagini non si caricassero a causa della connettività di rete o di qualsiasi altro problema.
- Larghezza e altezza: la larghezza e l'altezza di entrambi gli attributi definiscono la larghezza e l'altezza dell'immagine che vorremmo visualizzare sulla pagina web. In caso contrario, l'immagine funzionerebbe con un'altezza e una larghezza predefinite del 100%.
Ora vediamo il codice HTML completo richiesto per caricare un'immagine su una pagina web. Salvare l'immagine seguente con il nome "sunset.png.webp" in una cartella denominata "image_test" nell'unità locale.
Ora nella stessa cartella creiamo un file HTML chiamato sunset.html con il seguente codice HTML:
Ora vai a un browser sul tuo computer e digita il percorso del file .html. I miei file sono memorizzati nell'unità D, quindi il percorso per me sarebbe
D: /image_test/sunset.html
E ora possiamo vedere che la pagina HTML renderizzata ha caricato l'immagine del tramonto sul nostro browser. Con l'aiuto di CSS e
tag, possiamo anche visualizzare il testo secondo il nostro requisito intorno all'immagine. I tag anchor e img sono compatibili con tutti i browser come Google Chrome, Safari, Microsoft Edge, Firefox e Internet Explorer.
Immagini collegate in HTML
Ora che abbiamo capito con esempi come il tag di ancoraggio e il tag di immagine funzionano individualmente, ora capiamo come possiamo combinare le due funzionalità per realizzare uno scenario in cui vorremmo che gli utenti venissero reindirizzati a una nuova pagina web con un clic di un'immagine . Per rendere un'immagine selezionabile e reindirizzare l'utente su un'altra pagina Web, è sufficiente nidificare l'immagine in un tag di ancoraggio. Nell'esempio seguente, proveremo ad arruolare i primi 3 motori di ricerca Web utilizzati in tutto il mondo. Nel nostro elenco, mostreremo i loghi dei 3 motori di ricerca e facendo clic su uno dei loghi l'utente verrà reindirizzato alla rispettiva pagina del motore di ricerca. Creiamo una cartella denominata "test di reindirizzamento" e nella stessa cartella salviamo le immagini seguenti
1. Google
2. Yahoo
3. Bing
Ora creeremo un .html con il nome imageredirection.html nello stesso file. Imageredirection.html conterrà il seguente codice
Ora dobbiamo accedere alla pagina HTML dal browser, per il quale digiterò il mio percorso locale "D: / redirectiontest / imageredirection.html". il browser eseguirà quindi il rendering del file HTML per generare il seguente risultato:
->
Gli utenti potranno accedere al rispettivo motore di ricerca facendo clic sul loro logo. Dall'esempio sopra, possiamo osservare che HTML è un linguaggio semplice e flessibile che ci consente di combinare più tag insieme e ottenere una funzionalità complessa come questa. La combinazione di utilizzo di img e tag anchor è una combinazione popolare. Con la codifica HTML aggiuntiva possiamo anche aggiungere diversi elementi HTML come la visualizzazione di immagini collegate in un elenco ordinato o non ordinato utilizzando
- o
- Attributi HTML
- Tag di formato HTML
- Vantaggi dell'HTML
- Tag immagine HTML
- Frame HTML
- Blocchi HTML
- Imposta un colore di sfondo in HTML con Esempio
- Elenco HTML ordinato | Tipi di attributi con sintassi
- . L'estrema flessibilità e semplicità fornite da HTML con ogni versione rilasciata, aiuta i progettisti di UI e UX a progettare pagine Web interattive e intuitive che vediamo durante la navigazione in Internet per attività quotidiane.