HTML & CSS per principianti

HTML & CSS per principianti (Parte 12): Definire i collegamenti ipertestuali (2)

Tutti i video del tutorial HTML & CSS per principianti

Potete inserire collegamenti ipertestuali sugli indirizzi e-mail. Prima di mostrare come funziona, alcuni chiarimenti a riguardo. Personalmente non sono un fan di questi collegamenti e-mail. Sono più adatti i moduli. Se non è installato un client e-mail o non è configurato per l'utente attuale, i collegamenti e-mail non funzionano correttamente. Tuttavia, alla fine dovete decidere voi stessi se volete utilizzare collegamenti e-mail o moduli. Informazioni dettagliate sui moduli seguiranno naturalmente nel corso di questa serie.

Se si fa clic su un collegamento e-mail, di solito si apre una finestra di posta elettronica per il visitatore.

HTML & CSS per principianti (Parte 12): Definizione dei collegamenti ipertestuali (2)

Tuttavia, questo non è garantito. L'utente deve avere effettuato effettivamente le impostazioni corrispondenti. Ancora una volta: la soluzione dei collegamenti e-mail non è ideale. Tuttavia, è possibile avere bisogno di un tale collegamento ogni tanto. Ecco quindi la sintassi:

<a href="mailto:contatto@psd-tutorials.it">contatto@psd-tutorials.it</a>



Come potete vedere, si tratta innanzitutto di un classico collegamento ipertestuale.

HTML & CSS per principianti (Parte 12): Definire i collegamenti ipertestuali (2)

Tuttavia, ciò che viene assegnato come valore all'attributo href è ciò che conta. La destinazione inizia sempre con mailto, seguito da due punti. A questo segue l'indirizzo e-mail desiderato.

Per quanto riguarda i riferimenti e-mail, fate attenzione a cosa inserite come testo del collegamento. È meglio inserire sempre di nuovo l'indirizzo e-mail. In questo modo, gli utenti che, dopo aver cliccato sul collegamento ipertestuale, non vedono nulla accadere o non si apre un client di posta elettronica, possono comunque copiare l'indirizzo e inviarvi una e-mail.

Quando definite i collegamenti e-mail, avete anche a disposizione altre possibilità oltre a poter specificare solo l'indirizzo del destinatario. Fate attenzione che le cose descritte qui non sono uno standard HTML, ma sono supportate per la maggior parte dai browser.

Innanzitutto, potete specificare direttamente un destinatario in Cc.

<a href="mailto:contatto@psd-tutorials.it?cc=info@psd-tutorials.it">contatto@psd-tutorials.it</a>



Aggiungete, dopo l'indirizzo del destinatario effettivo, un punto interrogativo. Segue cc e un segno uguale, seguito dall'indirizzo a cui si desidera inviare una copia visibile della e-mail. In alternativa a cc, potete anche altro. In questo caso, l'indirizzo specificato viene trasferito nel campo Ccn, la e-mail viene inviata come copia invisibile a questo indirizzo.

Se volete specificare un soggetto predefinito, è possibile anche questo.

<a href="mailto:contatto@psd-tutorials.it?subject=Post%20a%20PSD-Tutorials.it">contatto@psd-tutorials.it</a>



Aggiungete il soggetto desiderato dopo subject. Per fare in modo che funzioni correttamente, non dovreste utilizzare spazi nel soggetto o mascherarli specificamente tramite la stringa %20.

Se lo desiderate, potete anche specificare direttamente il testo della e-mail o una parte di esso. Per questo, si utilizza il parametro body.

<a href="mailto:contattato@psd-tutorials.it?body=Ciao%20PSD-Tutorials.it">contattato@psd-tutorials.it</a>



HTML & CSS per principianti (Parte 12): Definire i collegamenti ipertestuali (2)



In questo caso valgono le stesse condizioni descritte in precedenza in relazione a soggetto.

Offrire file in download

Se volete offrire file in download sul vostro sito web, potete farlo naturalmente. (Non considero gli aspetti legali in questo contesto). È possibile realizzarlo molto facilmente. Si definisce un collegamento ipertestuale e si indica il file corrispondente come destinazione.

<a href="libro.zip"&gt>I download del libro</a>



In questo caso, la destinazione del link è un file Zip. Se si fa clic sul collegamento, in genere il browser offrirà una finestra di download o scaricherà direttamente il file.

HTML & CSS per principianti (Parte 12): Definire i collegamenti ipertestuali (2)



Potete scaricare il file tramite questa finestra. Alla fine, tuttavia, i browser sono quelli che decidono come trattare i file specificati.

I file PDF di solito sono visualizzati direttamente dai browser quando si fa clic sul relativo link. Questo è naturalmente nella maggior parte dei casi assolutamente corretto. Tuttavia, può darsi che si vogliano offrire anche file PDF in download. (Naturalmente gli utenti possono fare clic con il pulsante destro del mouse sul link e scaricare il file. Tuttavia, non si dovrebbe necessariamente presumere che tutti i visitatori del sito web conoscano questa possibilità).

In HTML5 è possibile etichettare effettivamente i collegamenti ipertestuali come collegamenti di download. Per fare ciò, si utilizza l'attributo download.

<a href="ebook.pdf" download>Scarica</a>



Un link dotato di questo attributo – sempre a condizione che il browser supporti l'attributo – scaricherà il file.

Di default, il file viene salvato con il nome originale. Anche questo è in genere accettabile. Tuttavia, può darsi che si desideri assegnare un altro nome al file scaricato. Anche questo è assolutamente possibile. Si utilizza nuovamente l'attributo download. A questo attributo si assegna come valore il nome desiderato.

<a href="ebook.pdf" download="dk.pdf">Scarica</a>



Se il browser supporta questa funzionalità, quando si scarica utilizza il nome assegnato all'attributo download.

HTML & CSS per principianti (Parte 12): Definire gli hyperlink (2)

Indicare relazioni logiche

Un attributo che può essere interessante nel contesto della definizione dei collegamenti ipertestuali è rel. Questo attributo consente di specificare in quale relazione logica si trova il collegamento ipertestuale con la destinazione del riferimento. Ad esempio, i browser potrebbero utilizzare queste informazioni per visualizzare icone appropriate quando si passa sopra i collegamenti con il mouse. Attualmente, però, non lo fanno ancora. Quindi, l'attributo rel non ha effetti visibili.

<a href="zwei.htm" rel="next">successivo</a>



Per l'attributo rel sono disponibili i seguenti valori:

alternate – Collegamento a una versione alternativa del documento.

author – Collegamento all'autore del documento.

bookmark – Collegamento permanente del documento che può essere utilizzato come segnalibro.

help – Collegamento a un file di aiuto.

license – Collegamento alle informazioni sul copyright.

next – Collegamento al documento successivo.

nofollow – Per specificare che i motori di ricerca non devono seguire il collegamento.

noreferrer – Il browser non invia l'intestazione HTTP-Referrer.

prefetch – Il documento deve essere caricato nella cache.

prev – Collegamento al documento precedente.

search – Collegamento a uno strumento di ricerca per il documento.

tag – Una parola chiave che descrive il documento.

In questo modo è possibile descrivere più dettagliatamente la relazione tra la destinazione del riferimento e i collegamenti ipertestuali.