Come utilizzare un'immagine come collegamento in HTML

HTML è una lingua utilizzata nel web design e nello sviluppo. Con l'utilizzo dell'unico HTML, possiamo fare pagine Web statiche. L'allineamento e la progettazione sono eseguiti tramite CSS. Come altri linguaggi di programmazione, ci sono anche codici/comandi noti come tag. Questi tag sono scritti con parentesi angolari.

Potremmo trovare alcuni siti Web modulari integrati interattivi che utilizzano un approccio di trascinamento e drop, che sono tutti costituiti da HTML. Possiamo aggiungere molti elementi nell'HTML come testo, immagini, video, ecc. Ogni elemento ha un tag separato scritto all'interno del corpo tag HTML. HTML ha molte funzioni da applicare. Uno dei quali è un collegamento. Link è una funzione che trasforma la pagina corrente in un'altra. Un link dietro l'immagine è l'argomento di oggi da spiegare qui.

Essenziale richiesto

Esistono due strumenti di base utilizzati per l'implementazione del codice HTML.

• Un editor di testo
• Un browser

Uno strumento viene utilizzato come strumento di input mentre l'altro funge da software di output. Nell'editor di testo, scriviamo il codice che deve essere eseguito sull'altro software. Questo editor funge da strumento di input. D'altra parte, il browser funge da strumento di output. È una piattaforma che esegue il codice HTML scritto nell'editor.

Dato che stiamo eseguendo questa attività su Windows, l'editor di testo è notevole per impostazione predefinita. Puoi usare sublime, blocco note ++, ecc. mentre il browser è Internet Explorer. Ma nella nostra guida useremo Google Chrome e Blocco note, che è facilmente accessibile.

Manuale HTML

Se vogliamo elaborare il concetto di collegamento nell'immagine, dobbiamo prima capire il funzionamento di HTML. Il corpo HTML è diviso in due parti. Uno è la testa e il secondo è il corpo. La parte della testa è prima scritta. In quella parte, includiamo il titolo della pagina web. È noto che la parte funzionale è la porzione del corpo dell'HTML. Perché tutte le proprietà di HTML sono definite qui.

Tutti i tag tra cui HTML hanno tag di apertura e chiusura. Il codice HTML che è scritto nei blocchi note viene salvato nelle estensioni del blocco note e del browser. IL .TXT Extension, viene salvato come codice, mentre con HTML viene salvato per il browser. Il file dell'editor di testo deve essere salvato con l'estensione HTML. Ad esempio, link.html. Quindi, vedrai che il file viene salvato con l'icona del browser corrente che stai usando a questo scopo.

..
.. .

L'immagine seguente è un codice di esempio di HTML. Nella parte della testa, abbiamo aggiunto il nome del titolo della pagina. E nella porzione del corpo, viene aggiunto un testo semplice.

Creazione di un semplice collegamento ipertestuale

Potresti aver osservato i collegamenti sui siti Web sotto forma di testo o immagine. Questi sono sviluppati utilizzando i collegamenti ipertestuali nel codice HTML. Questa è la caratteristica delle pagine Web statiche e dinamiche. Ha tag sia di apertura che di chiusura. è noto come un tag di ancoraggio. La sintassi è riportata di seguito.

..

Href è per il riferimento della pagina. Qui, scriviamo l'indirizzo di quel sito Web o una pagina Web specifica in cui vogliamo andare facendo clic sul link. Mentre all'interno del corpo del tag di ancoraggio, scriviamo il testo a cui vogliamo collegare. Ad esempio, abbiamo usato un po 'di testo di seguito.

https: // linuxhint.com">
Il mio grande link

Mentre scriviamo l'indirizzo, puoi vedere che è automaticamente sottolineato e il suo colore è cambiato. Implica la differenziazione tra il testo semplice e il collegamento ipertestuale. Mentre all'interno del corpo, abbiamo usato una semplice frase. Considera l'esempio di cui sopra nello stato di lavoro.

Come abbiamo scritto questo codice nel blocco note, ora lo eseguiremo per ottenere l'output dal browser.

Dall'output, puoi osservare che il testo che abbiamo aggiunto è sottolineato, il che mostra che si tratta di un collegamento. Mentre passiamo il puntatore del mouse al collegamento, il puntatore viene convertito nel simbolo della mano.

Tag immagine in HTML

L'immagine è il contenuto di base dell'HTML. C'è un tag specifico utilizzato. Il tag immagine è un po 'diverso dagli altri tag. In quanto non contiene tag di apertura e chiusura. L'immagine può essere aggiunta direttamente dal sistema o anche Internet. La fonte dell'immagine è menzionata. Nella sorgente, si aggiunge la posizione/indirizzo dell'immagine, è in qualsiasi cartella o posizionata su qualsiasi sito Web.

< img src = “c:\users\USER\DESKTOP\13.png”>

Qui, il tag immagine è . 'Src' sta per la fonte. Questo è il percorso dell'immagine con l'estensione del file.

Vedere l'output di seguito.

Immagine e un collegamento

Collega un sito Web con l'immagine

Devi aver trovato i siti Web, specialmente nei negozi di siti Web o nei siti Web di shopping online. Ci sono tonnellate di immagini che si aprono in un'altra pagina facendo clic. Aggiungiamo un link per l'immagine o colleghiamo due pagine tramite un collegamento. Questa pagina può essere una pagina statica o dinamica. Abbiamo bisogno di due elementi tagga. Uno è il tag immagine e l'altro è il tag di collegamento.

Il codice dell'immagine viene aggiunto all'interno del tag di ancoraggio poiché vogliamo che l'immagine si comporti come un collegamento. Di seguito è riportato il codice HTML completo.

Ora eseguiremo questo codice in Google Chrome.

Attraverso l'immagine, non sarà possibile spiegare accuratamente. Ma quando ti pratichi, lo vedrai quando si passa il mouse, l'immagine mostra la mano del puntatore, mostrandolo come un link. Quando facciamo clic sull'immagine, si aprirà nel sito Web, il cui indirizzo è menzionato nella porzione di riferimento. Verrà aperto il sito Web di seguito.

Collega una pagina Web statica con l'immagine

Se sei disposto ad aggiungere la pagina Web statica nel codice, quindi sostituisci semplicemente l'indirizzo del sito Web con la pagina presente nel sistema.

< a href = “sample.html”>

Nel browser, vedrai che la pagina di esempio statica è aperta il cui indirizzo è stato riportato all'interno del tag.

Attributo alt e collegamento immagine

Questo attributo aiuta a descrivere qualcosa sull'immagine. Questo viene visualizzato solo quando per qualche motivo, l'immagine non viene caricata o la connessione Internet potrebbe essere lenta. Quindi, questa descrizione viene mostrata che aiuta il lettore a conoscere qualcosa sull'immagine o su un sito Web.

< img alt= “image is not available” src= “C:\users\USERS\DESKTOP\13.png”>

Questo è il tag. L'attributo ALT è scritto all'interno del tag IMG.

L'output è mostrato di seguito che mostra l'alternativa di testo all'immagine.

Conclusione

In questo articolo, abbiamo usato i semplici tag sia di un link che di un'immagine. Inoltre, utilizziamo un'immagine come collegamento con molti esempi. Ci possono essere molti modi per elaborare questo concetto. Abbiamo menzionato alcuni semplici esempi in questa guida.