Link, elenchi e immagini di ricerca

  • 5 minuti

La parola "ipertesto" significa che è possibile visualizzare non solo testo su una pagina Web. HTML offre la possibilità di creare collegamenti ad altre risorse e di aggiungere immagini a una pagina.

I collegamenti ipertestuali (o solo i collegamenti) consentono a un utente di passare ad altri elementi. Potrebbe trattarsi di un'altra pagina del sito Web, di un sito Web completamente separato o anche di un indirizzo di posta elettronica. Uno degli obiettivi principali del codice HTML era quello di consentire l'aggiunta di questi "puntatori" a una pagina per facilitare l'accesso. Questa operazione viene eseguita tramite collegamenti.

Il tag usato per creare un collegamento è a, che è l'abbreviazione per l'ancoraggio. Il contenuto tra il tag aperto e close a diventa ipertesto che consente a un utente di accedere alla risorsa.

La risorsa a cui si fa riferimento è indicata tramite un attributo denominato href (o riferimento ipertestuale). Gli attributi vengono aggiunti all'interno del tag di apertura e sono in genere un nome associato a un valore (denominato coppie chiave-valore) con il valore contenuto tra virgolette.

<a href="some url">clickable text</a>

Le coppie di chiavi e valori vengono utilizzate nei moduli. Se si compila un modulo, è possibile che venga richiesto il nome e il cognome separatamente. Il modulo ha un'etichetta Nome e uno spazio vuoto e un'altra etichetta Cognome e uno spazio vuoto. Le etichette sono come chiavi negli attributi HTML e qualsiasi elemento inserito nello spazio vuoto sia il valore. Negli attributi HTML, la chiave e il valore vengono uniti da un segno di uguale per mostrare che appartengono insieme.

Indicatori delle risorse

Esistono molti tipi di risorse a cui può puntare un collegamento. Molte volte i collegamenti puntano ad altre pagine Web o siti Web. Ma un collegamento può anche puntare a un indirizzo di posta elettronica, un file (ad esempio un documento PDF), un video o un'immagine.

Per creare un collegamento a un sito esterno, usare l'indirizzo completo del sito. Ad esempio, per creare un collegamento al sito della documentazione di Microsoft, è possibile usare:

<a href="/">Microsoft Technical Documentation</a>

È possibile collegarsi a un indirizzo di posta elettronica. Questo tipo di collegamento aprirà automaticamente il client di posta elettronica dell'utente e completerà il campo A con l'indirizzo indicato dopo la mailto: direttiva.

<a href="mailto:someone@example.com">Email us!</a>

Se si inserisce un collegamento nella pagina HTML che si sta creando, si nota che il testo tra (non all'interno) il tag di apertura e chiusura diventa blu. Si noterà anche che l'indirizzo è nascosto. Infine, si nota che la parola è ora selezionabile. Vale a dire, si seleziona la parola per accedere alla risorsa.

Il testo visualizzato come collegamento è noto come testo del collegamento. L'uso di testo di collegamento valido è una chiave per garantire che la pagina sia accessibile a tutti gli utenti. Frasi come "clicca qui" sono dirompenti per i lettori di schermo e altri strumenti utilizzati per navigare il Web senza browser. Come procedura consigliata, usare sempre il testo del collegamento che descrive brevemente la risorsa a cui si fa riferimento. Per altre informazioni su come garantire l'accessibilità, vedere il modulo Accessibility Learn.

Immagini

Il img tag viene usato per visualizzare le immagini in una pagina. A differenza della maggior parte degli altri elementi, img non ha alcun tag di chiusura. L'attributo src viene usato per puntare alla posizione dell'immagine da visualizzare nella pagina e alt descrive il contenuto dell'immagine per elementi come motori di ricerca e utilità per la lettura dello schermo.

Importante

Anche se gli height attributi e width possono essere usati per specificare l'altezza e la larghezza della visualizzazione dell'immagine, non ridimensionano il file di immagine stesso. La procedura consigliata consiste nel rendere il file di immagine le dimensioni usate nella pagina.

<img src="headshot.png" alt="Picture of an employee.">

Creazione di elenchi

È spesso necessario visualizzare un elenco di informazioni in una pagina. Quando si compila il curriculum, si vogliono elencare i ruoli o le qualifiche precedenti. HTML offre due tipi diversi di elenchi, ordinati e non ordinati.

Per creare un elenco, si deciderà prima di tutto il tipo di elenco che si desidera creare. Un elenco ordinato viene ordinato con numeri (impostazione predefinita) o lettere e usa ol per l'elenco ordinato. Un elenco non ordinato usa punti e viene identificato con ul per definire l’elenco non ordinato. Gli articoli sono indicati con li per ogni voce dell'elenco.

Elenco non ordinato

Di seguito viene creato un elenco non ordinato:

<ul>
    <li>First item</li>
    <li>Second item</li>
    <li>Third item</li>
</ul>

Elenco generato:

  • Primo elemento
  • Secondo elemento
  • Terzo elemento

Elenco ordinato

Di seguito viene creato un elenco ordinato:

<ol>
    <li>First item</li>
    <li>Second item</li>
    <li>Third item</li>
</ol>

Elenco generato:

  1. Primo elemento
  2. Secondo elemento
  3. Terzo elemento