Oggi parleremo di altri due tag: il tag strong e il tag em. Il tag strong serve per mettere in grassetto una singola parola o un’intera fase. È dunque un tag di enfatizzazione.
Dal punto di vista semantico il tag strong è rilevante per la SEO, perchè sta ad indicare al motore di ricerca che il contenuto che è messo in grassetto è importante e che quindi deve essere considerato per l’indicizzazione.
Ecco perché in un articolo è buona norma inserire delle keywords in grassetto, usando il tag strong.
Attenzione però a non abusarne perché potrebbe produrre l’esatto contrario. Non evidenziate termini poco significativi, ma solo quelli che volete mettere in risalto.
Ovviamente da solo non basta per arrivare in cima ai motori di ricerca, ci sono requisiti più importanti di cui vi ho parlato nei precedenti articoli, ma insieme a tanti altri piccoli accorgimenti, può fare la differenza.
Tag b al posto di strong
Esiste anche il tag <b> per indicare il grassetto, ma ormai è deprecato (cioè sconsigliato) dal W3C.
Chi è il W3C?
Il W3C è il World Wide Web Consortium, ovvero un’organizzazione non governativa internazionale che ha lo scopo di sviluppare tutte le potenzialità del World Wide Web. Il sito è https://www.w3.org/ e quello in italiano http://www.w3c.it/.
Non c’è comunque alcuna differenza visiva tra l’uso di strong o b in un pagina, la differenza è solo dal punto di vista semantico.
Inoltre il tag strong può essere interpretato dai lettori vocali e quindi facilita l’accessibilità del sito per persone con disabilità.
Il web si sta sempre più orientando verso la semantica, è dunque importante utilizzare gli strumenti giusti per farsi trovare dai motori di ricerca.
Utilizzo del tag strong
Il tag strong si utilizza semplicemente in questo modo:
<strong>…</strong>
Dove al posto dei puntini si mette la parola o la frase da enfatizzare.
Tag em
Il tag em viene utilizzato per il corsivo, ed è il tag che ha sostituito l’ormai deprecato tag <i>…</i>.
Si usa semplicemente inserendo la parola o la frase da enfatizzare tra questi due tag di apertura e chiusura.
<em>…</em>
In passato si utilizzavo molto il tag <u>…</u> che è il tag per sottolineare una parola o frase, ma anche questo tag è deprecato dal W3C.
Oggi vedremo come utilizzare i collegamenti all’interno di una pagina web, ovvero quei link che se cliccati rimandano ad una parte della pagina stessa.
I collegamenti interni ad una pagina web sono molto utili quando il documento è molto lungo da leggere e quindi per spostarsi da un punto all’altro della pagina. Chiameremo questi punti segnalibri.
Tag per realizzare collegamenti all’interno di una pagina web
Il tag utilizzato per creare collegamenti interni è sempre <a>.
Occorre procedere in questo modo:
Creare un segnalibro, ovvero il punto in cui si vuole andare;
creare il link che conduce al segnalibro.
Per creare il segnalibro utilizzeremo questo tag: <aname=”nome_elemento“>…</a>
Il link che rimanderà al segnalibro sarà: <ahref=”#nome_elemento“>…</a>
Quindi per richiamare il segnalibro si utilizza il simbolo # seguito dal nome dell’elemento. Dunque il simbolo # indica al browser che l’ancora va ricercata all’interno della pagina attuale.
Chiaramente i nomi devono essere univoci.
Facciamo un esempio:
<!DOCTYPE html>
<html lang="it">
<head><title>Coding Creativo</title></head>
<body>
<h1>Coding Creativo</h1>
<a name="up"></a>
<ol>
<li><a href="#scratch">Scratch</a>
<ol>
<li>Tutorial scratch</li>
<li>Giochi con scratch
<ol><li>Giochi per la primaria</li>
<li>Giochi per la secondaria</li>
</ol>
</li>
</ol>
</li>
<li><a href="#algobuild">Algobuild</a></li>
<li>Linguaggio C</li>
<li>Php</li>
</ol>
<p>Il blog Coding Creativo nasce per condividere articoli sul coding.<br>
Proporre il coding fin dalla scuola primaria oggi è fondamentale.<br>
Penso che attraverso gli esempi e i giochi è possibile imparare a programmare.<br>
</p>
<br><br>
<table border="1">
<thead>
<tr><th colspan="3">Visite al sito</th></tr>
</thead>
<tbody>
<tr><td>pagine</td><td>provenienza maggiore</td>
<td>visitatori giornalieri</td>
</tr>
<tr><td>scratch</td><td>organic search</td><td>1.200</td></tr>
<tr><td>algobuild</td><td>referral</td><td>800</td></tr>
<tr><td>linugaggio C</td><td>social</td><td>600</td>
</tr>
</tbody>
<tfoot>
<tr><td colspan=2>visite totali</td><td>2.600</td></tr>
</tfoot>
</table>
<br><br>
<h2><a name="scratch">Scratch</a></h2>
<p>Scratch è un ambiente di programmazione gratuito ed è ideale per imparare il coding.
<br> L'interfaccia grafica è 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>
<p>Alcuni esempi di giochi realizzati con scratch:
<ul>
<li>Tabellina con scratch;</li>
<li>Giochino alto - basso con scratch;</li>
<li>Gioco morra cinese con scratch;</li>
<li>Morra cinese con scratch.</li>
</ul>
</p>
<h2><a name="algobuild">Algobuild</a></h2>
<p>Algobuild è un programma molto utile per disegnare ed eseguire gli algoritmi.
<br>Con algobuild è possibile utilizzare il diagramma a blocchi.
<br>Sul sito <a href="https://www.codingcreativo.it">Coding Creativo</a> troverete tanti esempi ed esercizi realizzati con algobuild.</p>
<br>
<p>Alcuni esempi:
<ul>
<li>Numeri primi con algobuild;</li>
<li>Massimo di tre numeri.</li>
</ul>
</p>
<p><a href="#up">Torna su</a></p>
</body></html>
Se provate questo esempio e cliccate sulla parola dell’elenco Scratch vi porterà alla parte relativa alla descrizione di Scratch, allo stesso modo se cliccate su algobuild. Se fate clic in basso nella pagina su torna su, il link vi riporterà in alto nella pagina.
Uso dei segnalibri con id
I segnalibri possono essere inseriti anche all’interno di altri tag, utilizzando l’attribuo id.
Ad esempio: <h1 id=”coding”>Coding creativo</h1>
e il relativo collegamento si realizza con:
<a href=”#coding”>Coding creativo</a>
Collegamento ad un segnalibro di un’altra pagina
Il collegamento ad un segnalibro di un’altra pagina si realizza inserendo sempre il segnalibro nel punto desiderato e poi con un collegamento del tipo:
<a href=”https://www.codingcreativo.it/tabellina.html#tabellina”>tabellina con Scratch</a>
Chiaramente questi sono solo degli esempi, adattate pure gli esercizi alle vostre esigenze
Continuiamo 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.
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.
In questo articolo intitolato “target _blank” parleremo del tag a, dell’attributo href ma anche del suo attributo target. Infatti il tag <a> ha degli attributi e fino ad adesso abbiamo visto come si usa l’attributo href. Ma un altro attributo importante che citerò in questa breve lezione è target, <a href=”…” target=”…”>…</a> a cui vedremo uno dei valori associati è _blank.
I valori che target può assumere dunque sono:
_blank – apre il
collegamento in una nuova finestra; è utile quando vogliamo che il
visitatore una volta chiusa la pagina rimane ancora nel nostro sito web
(quindi è indicato principalmente per i collegamenti esterni);
_self – apre invece il collegamento nella stessa finestra che ha generato il collegamento;
_parent – apre il collegamento nel frame di origine;
_top – apre il collegamento al livello superiore.
Tra questi, il valore che è più utilizzato è _blank; gli altri valori si usano meno in quanto l’uso dei frame (cioè la suddivisione delle pagine in riquadri) non è molto consigliabile per un buon posizionamento nei motori di ricerca.
Vediamo adesso un esempio pratico di utilizzo dell’attributo target _blank.
<h2>Coding Creativo<h2>
<h3>Scratch</h3>
<p>Scratch è un ambiente di programmazione gratuito ed è ideale per imparare il coding. L'interfaccia grafica è 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>
Se fate click su scratch.mit.edu si aprirà una nuova finestra, in modo tale che dopo il download potete ritornare tranquillamente nella pagina del sito coding creativo.
Questa funzionalità come potete vedere è molto utile.
Chiaramente questo è solo una semplice dimostrazione dell’utilizzo del tag a href con l’attributo target _blank.
Oggi vedremo come creare i collegamenti ipertestuali, che sono alla base delle pagine web. I collegamenti ipertestuali non sono altro che i link che ci consentono di andare da una pagina web all’altra.
Definizione di documenti ipertestuali e collegamenti ipertestuali
Con il termine di documenti ipertestuali si intendono quei documenti che possono essere visionati in maniera non sequenziale, ma secondo collegamenti di tipo logico, che consentono di passare da una pagina all’altra dello stesso sito web o anche verso altri siti web esterni.
I link si possono attivare non solo su parole o frasi, ma anche su immagini, elementi multimediali, ecc…
Quando si crea un collegamento il cursore del mouse, che vi passa sopra, assume la forma di una piccola mano con il dito indice sollevato.
Tag per creare un collegamento ipertestuale
Il tag per creare un collegamento ipertestuale è <a></a> dove a sta per anchor (ancora). Questo tag è seguito dall’attributo href (hypertest reference ovvero riferimento ipertestuale), il cui valore è l’indirizzo della pagina di destinazione del link.
Per spiegare l’inserimento dei collegamenti ipertestuali, riprendiamo l’esempio già visto sui paragrafi, dove avevamo inserito questo codice per generare una semplice pagina web:
<h1>Coding Creativo<h1>
<h2>Scratch</h2>
<p>Scratch è un ambiente di programmazione gratuito ed è ideale per imparare il coding. L'interfaccia grafica è molto intuitiva e semplice da usare.
<br>Sul sito Coding Creativo troverete tanti esempi ed esercizi su scratch.</p>
<br><br>
<p>Alcuni esempi di giochi realizzati con scratch:
<ul>
<li>Tabellina con scratch;</li>
<li>Morra cinese.</li>
</ul>
</p>
Dunque ipotizziamo di voler creare un collegamento ipertestuale al sito web https://www.codingcreativo.it, esattamente quando clicchiamo sulla parola Coding Creativo.
Per farlo dobbiamo inserire un collegamento ipertestuale del tipo:
<h2>Coding Creativo<h2>
<h3>Scratch</h3>
<p>Scratch è un ambiente di programmazione gratuito ed è ideale per imparare il coding. L'interfaccia grafica è 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>Tabellina con scratch;</li>
<li>Morra cinese.</li>
</ul>
</p>
I link di default sono evidenziati di colore blu quando la pagina non è mai stata visitata, invece sono di colore viola quando la pagina è stata già visitata.
Ecco dunque l’esempio sotto:
Coding Creativo
Scratch
Scratch è un ambiente di programmazione gratuito ed è ideale soprattutto per imparare il coding. L’interfaccia grafica è infatti molto intuitiva e semplice da usare. Sul sito Coding Creativo troverete tanti esempi ed esercizi su Scratch.
Ecco dunque alcuni esempi di giochi realizzati con Scratch:
Tabellina con Scratch;
Morra cinese.
Ma potremmo inserire anche altri collegamenti ipertestuali alle varie pagine.
Ad esempio quando selezioniamo tabellina con Scratch dovremmo poter visualizzare la pagina relativa alla tabellina che in questo caso è: https://www.codingcreativo.it/gioco-della-tabellina-con-scratch/
Per visualizzare invece la pagina inerente la morra cinese dobbiamo aggiungere questo link: https://www.codingcreativo.it/morra-cinese-con-scratch/
Quindi modifichiamo nuovamente il codice in questo modo:
<h2>Coding Creativo<h2>
<h3>Scratch</h3>
<p>Scratch è un ambiente di programmazione gratuito ed è ideale per imparare il coding. L'interfaccia grafica infatti è 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>Ecco dunque 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>
Otterremo questo risultato:
Coding Creativo
Scratch
Scratch è un ambiente di programmazione gratuito ed è ideale soprattutto per imparare il coding. L’interfaccia grafica è infatti molto intuitiva e semplice da usare. Sul sito Coding Creativo troverete tanti esempi ed esercizi su Scratch.
Ecco dunque alcuni esempi di giochi realizzati con Scratch:
