Home Stampante Corso HTML e Css

Lezione 4 - I collegamenti ipertestuali - 1.

Collegamenti ipertestuali. Consentono di spostarsi da un documento all'altro del web e/o da un punto all'altro di uno stesso documento.

1 - L'elemento a

L'elemento a - a stà per ancora - consente di passare da un documento all'altro presente nel web, o ad un'altra posizione all'interno del documento stesso. Questa, anche se immediatamente comprensibile, è una definizione riduttiva. E' più corretto dire che l'elemento a consente di raggiungere qualsiasi elemento indirizzabile mediante un URL, Universal Resource Locator. Conformemente alle caratteristiche dell'oggetto indirizzato il browser ne riprodurrà il contenuto.

2 - Attributi dell'elemento a.

Il comportamento dell'elemento a è determinato dal valore dei seguenti attributi:

In questa lezione approfondiremo solo gli attributi più comunemente usati: href, target e download.

2.1 - L'attributo href.

L'attributo href specifica la risorsa da restituire. Può essere l'URL di un'altra pagina web, o di un qualunque altro file che sarà restituito in funzione del tipo di risorsa puntata oppure può essere un riferimento ad un'altra posizione dello stesso documento. In questo caso il punto da raggiungere è referenziato con una dichiarazione dell'attributo id.

Esempi

<a href="Lezione_3.html" target="_blank"> Lezione_3 </a> punta ad una pagina html nella directory corrente. Ecco come si comporta: Lezione_3.

<a href="images/Stampante.svg" target="_blank"> Icona della stampante </a> punta ad un file grafico in una directory (images) figlia della directory corrente. Ecco come si comporta: Icona della stampante.

<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a" target="_blank">Developer Mozilla The Anchor element</a> richiama un documento del sito developper dell'organizzazione Mozilla. Ecco come si comporta: Developer Mozilla The Anchor element.

<a href="#inizio" target="_self">inizio pagina</a> rimanda all'elemento di questa pagina taggato con l'attributo id="inizio". Per inciso, l'ho messo nell'intestazione h1 contenente il titolo della lezione. Ecco come si comporta: inizio pagina.

2.2 - L'attributo target.

Il valore assegnato all'attributo target indica dove restituire la risorsa referenziata con l'attributo href.

Negli esempi precedenti abbiamo già visto in azione:

Il valore di default di target è "_self".

Altri possibili valori di target sono "_auto" e "_parent" che tratteremo in una prossima lezione dedicata allo stesso argomento, quando avremo trattato i contesti in cui tali valori saranno rilevanti.

Per il momento fissiamo che con "_self" la restituzione dell'oggetto referenziato viene fatta nella stessa scheda della pagina corrente sostituendone il contenuto, mentre con "_blank" la restituzione viene fatta in una nuova scheda del browser.

2.3 - L'attributo download.

L'attributo download specifica la risorsa da scaricare. Può essere l'URL di un'altra pagina web, o di un qualunque altro file che sarà scaricato nella cartella di download dell'utente richiedente.

Esempi

In questa pagina utilizzo l'attributo download per chi desidera scaricare la cartella con gli esercizi. Ecco come ho fatto:

<a href="HTML_04.rar" download="HTML_04.rar"> Download del file HTML_04.rar </a> scarica il file HTML_04.rar. Ecco come si comporta: Download di HTML_04.rar.

Esercizi.

Per prima cosa scarica il file HTML_04.rar nella cartella CorsoHTML che avrai creato in precedenza.

Estrai la cartella HTML_04 e apri in Notepad++ i file HTML_04.html e HTML_04.css.

Esegui gli esercizi proposti.

Se vuoi vedere il file dell'esempio prima di scaricarlo clicca qui.

Nota.

Il lettore potrà ora fare altre prove ed eventualmente annotare propri appunti nella sezione dedicata.

Un ultima raccomandazione:durante gli esercizi tenere aperti di due strumenti di validazione del codice: W3C Markup Validation Service e W3C CSS Validation Service e verificare i file su cui si è lavorato dopo aver eseguito le modifiche. I browser sono molto tolleranti, e visulizzano bene le pagine anche in presenza di errori, ma gli errori è meglio evitarli.

Per approfondire.

Nelle specifiche ufficiali del w3 consortium puoi consultare:

Nel sito developer mozilla puoi consultare: