In HTML, per creare collegamenti ipertestuali e inserire immagini, si utilizzano i tag <a> e <img>.

Di seguito, ti spiego in dettaglio come funzionano e come personalizzarli.

1. Creare Collegamenti Ipertestuali con

Il tag <a> viene utilizzato per creare collegamenti ipertestuali, cioè link che, quando cliccati, portano l’utente a una pagina web specifica, a un’altra sezione della stessa pagina o a un documento. La sintassi di base è:

1
<a href="URL">Testo del link</a>

Spiegazione degli attributi principali:

1
<a href="https://www.esempio.com">Vai a esempio.com</a>

Per collegarsi a una pagina interna del sito:

1
<a href="pagina_interna.html">Pagina interna</a>

Per creare un collegamento a un’ancora (un punto specifico) della stessa pagina:

1
<a href="#sezione1">Vai alla Sezione 1</a>

Per inviare un’email:

1
<a href="mailto:email@esempio.com">Invia una mail</a>

target:

Indica dove aprire il link. I valori principali sono: _self (predefinito): apre il link nella stessa scheda/finestra. _blank: apre il link in una nuova scheda/finestra.

Esempio: html <a href="https://www.esempio.com" target="_blank">Apri in una nuova scheda</a>

title: Fornisce una descrizione o un suggerimento quando l’utente passa il mouse sul link.

Esempio:

1
<a href="https://www.esempio.com" title="Visita il nostro sito">Vai a esempio.com</a>

Esempio:

1
<a href="https://www.esempio.com" target="_blank" title="Visita il nostro sito">Vai a esempio.com</a>

1. Inserire Immagini con

Il tag <img> serve per inserire immagini all’interno di una pagina web. Diversamente da altri tag, <img> è un tag autochiudente, cioè non ha un tag di chiusura.

La sintassi di base è:

1
<img src="URL_dell_immagine" alt="Descrizione dell'immagine">

Spiegazione degli attributi principali:

src: Specifica la posizione dell’immagine. Questo può essere un URL esterno (come un link web) o un percorso locale (come un file nel server).

Esempio:

1
<img src="immagine.jpg" alt="Descrizione dell'immagine">

alt: Fornisce un testo alternativo che appare se l’immagine non può essere caricata. È fondamentale per l’accessibilità (ad esempio, gli screen reader lo leggono per gli utenti con disabilità visive) e migliora la SEO.

Esempio:

width e height: Specificano le dimensioni dell’immagine in pixel o percentuale. È sempre preferibile specificare solo una di queste proprietà, per evitare distorsioni dell’immagine.

Esempio:

1
<img src="immagine.jpg" alt="Foto di un paesaggio marino" width="300">

title: Fornisce un testo che appare quando si passa il mouse sull’immagine. Esempio:

1
<img src="immagine.jpg" alt="Foto di un paesaggio marino" title="Paesaggio marino">

Esempio completo:

1
<img src="https://www.esempio.com/immagine.jpg" alt="Descrizione dell'immagine" width="300" height="200" title="Testo alternativo">

Modificare le dimensioni e lo stile dell’immagine tramite CSS

È anche possibile controllare l’aspetto delle immagini con il CSS, specialmente se si vuole applicare lo stesso stile a più immagini:

1
<img src="immagine.jpg" alt="Foto di un paesaggio marino" class="immagine-personalizzata">

E poi nel file CSS:

1
2
3
4
5
.immagine-personalizzata {
    width: 50%;
    border: 2px solid black;
    border-radius: 8px;
}

Esempio Combinato: Collegare un’Immagine con e

È possibile inserire un’immagine all’interno di un link, in modo che l’immagine stessa diventi cliccabile. Ecco un esempio:

1
2
3
<a href="https://www.esempio.com" target="_blank">
    <img src="immagine.jpg" alt="Vai al sito esempio.com" width="200">
</a>

In questo modo, l’immagine diventa un link e, cliccandola, si aprirà la pagina specificata.

Conclusione

La gestione di link e immagini in HTML è essenziale per migliorare la navigabilità e l’esperienza visiva di un sito web. Utilizzando correttamente i tag <a> e <img>, è possibile creare contenuti ricchi e interattivi, ottimizzati per la SEO e accessibili per tutti gli utenti. Ricorda di inserire descrizioni efficaci e testi alternativi alle immagini per favorire l’indicizzazione sui motori di ricerca e migliorare l’accessibilità.

In definitiva, padroneggiare questi elementi HTML è un passo fondamentale per costruire pagine web ben strutturate, user-friendly e SEO-friendly, con contenuti che rispondano alle esigenze degli utenti e siano ottimizzati per i motori di ricerca.

Spero che ora tu abbia una visione completa di come utilizzare i tag <a> e <img> in HTML per creare collegamenti e inserire immagini nelle tue pagine web!

Capitolo 5:”Formattazione Semantica”