a href

Continuaimo le nostre lezioni sul tag a href 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

Tag semantici

Form in html

Tag strong ed em

Collegamenti interni ad una pagina web

Inserire immagini in una pagina web

Paragrafi in html

Tabelle in html

Elenchi in html

Tag dei titoli

Il linguaggio html

Come trovare immagini per il sito web

Quali colori scegliere per un sito web

Quali font scegliere per un sito web

Autore dell'articolo: Cristina

Avatar per Coding Creativo

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *