Continuiamo le nostre lezioni sul tag a href, e vediamo come creare link per email e telefono, approfondendone l’utilizzo con tanti altri esempi pratici.
a href per creare collegamenti ipertestuali ad altri file
Dunque è possibile realizzare collegamenti ipertestuali ad altri file; ad esempio ad immagini, a file musicali, a video, a documenti pdf, ecc…
L’importante è inserire il percorso corretto.
Ad esempio colleghiamo la parola interfaccia grafica ad un’immagine di Scratch.
Per fare ciò dobbiamo innanzitutto controllare il percorso della nostra immagine. Se ad esempio l’immagine si trova nello stesso percorso del file posso inserire <a href=”scratch.jpg” target=_blank>L’interfaccia grafica </a>.
Quindi ho utilizzato il tag a href specificando l’immagine e inserendo l’attributo target con il valore _blank, per non far uscire l’utente dal nostro sito web.
<h1>Coding Creativo<h1>
<h2>Scratch</h2>
<p>Scratch è un ambiente di programmazione gratuito ed è ideale per imparare il coding. <a href="scratch.jpg" target="_blank"> L'interfaccia grafica </a> è molto intuitiva e semplice da usare
<br>Sul sito <a href="https://www.codingcreativo.it">Coding Creativo</a> troverete tanti esempi ed esercizi su scratch.</p>
<br><br>
<p>Alcuni esempi di giochi realizzati con scratch:
<ul>
<li><a href="https://www.codingcreativo.it/gioco-della-tabellina-con-scratch/">Tabellina con scratch</a>;</li>
<li><a href="https://www.codingcreativo.it/morra-cinese-con-scratch/">Morra cinese</a>.</li>
</ul>
</p>
<p>Potete scaricare la nuova versione di scratch da questo sito web <a href="https://scratch.mit.edu/download" target="_blank">scratch.mit.edu</a>
</p>Il percorso dell’immagine poteva anche essere diverso. Ad esempio sarebbe preferibile inserire le immagini di un sito in una cartella che ad esempio chiamo img. Allora in questo caso devo specificare il percorso in questo modo: <a href=”img/scratch.jpg” target=_blank>L’interfaccia grafica </a>.
Allo stesso modo si realizzano i collegamenti ipertestuali ad altri file.
Collegamenti ipertestuali ad un indirizzo mail
Utilizzando il tag a href è possibile inserire un collegamento ipertestuale ad un indirizzo mail, il procedimento è molto semplice.
Inseriamo, ad esempio, dopo l’ultimo paragrafo dell’esempio precedente questo codice:
<p><a href=”mailto:newsletter@codingcreativo.it”>scrivi a coding creativo</a></p>
In questo modo, quando si clicca sul link, si andrà direttamente nel programma di posta elettronica del nostro computer impostato di default, se installato, e l’utente così può scrivere un messaggio all’indirizzo che in automatico compare nel campo To.
Collegamenti ipertestuali ad un numero di telefono
Per il collegamento da smartphone è utile inserire anche un collegamento del tipo:
<a href=”tel:333…..”>Tel: 333….</a>
In questo modo si inoltra la chiamata al numero indicato quando si fa clic sul telefono.
Collegamenti ipertestuali sulle immagini
Anche le immagini possono essere dei collegamenti ipertestuali ad altre immagini o ad una pagina web.
Per realizzare un collegamento si opera allo stesso modo di come abbiamo agito con le parole.
Esempio di collegamento di un’immagine ad una pagine web.
<a href="https://www.codingcreativo.it/gioco-della-tabellina-con-scratch/"><img src="tabellina_scratch.jpg" alt="tabellina scratch"></a>In genere, quando si crea una galleria fotografica è necessario inserire le immagini in dimensioni ridotte e successivamente renderle cliccabili verso le stesse immagini ma più grandi.
Esempio di collegamento di un’immagine ad un’altra immagine.
<a href="img/tabellina_scratch.jpg"><img src="tabellina_scratch_small.jpg" alt="tabellina scratch"></a>Allo stesso modo si realizzano i collegamenti ipertestuali di altri oggetti audio, video, ecc…
Questi sono solo degli esempi pratici sull’utilizzo del tag a href.
Alcuni link utili
Collegamenti interni ad una pagina web
Inserire immagini in una pagina web
Come trovare immagini per il sito web
Quali colori scegliere per un sito web
Quali font scegliere per un sito web