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:
Vedremo oggi come usare il tag img per inserire immagini in una pagina web. Innanzitutto occorre dire che le immagini di un sito web costituiscono una parte importante per la SEO.
Inoltre è opportuno dare alle immagini nomi inerenti gli argomenti trattati, così da essere indicizzate anche da Google come immagini.
Se ad esempio andate su Google nella sezione immagini e cercate frazioni Scratch, vedrete che ci sono tante immagini in prima posizione del sito coding creativo, questo perché sono state opportunamente create con nomi idonei.
In sostanza bisogna raccontare al motore di ricerca che cosa si vuole comunicare con quell’immagine.
Ma il nome delle immagini non è l’unica cosa importante per la SEO, andando avanti nella guida scopriremo cosa inserire per essere apprezzati da Google.
Formato per le immagini di una pagina web
Innanzitutto conosciamo i formati delle immagini che si possono inserire nel nostro sito web. Sono principalmente tre:
gif – formato di immagini che include al massimo 256 colori, viene utilizzato principalmente per le immagini animate, in altri casi infatti si preferiscono formati che hanno una quantità di colori molto più elevata.
jpeg – è il formato più conosciuto e utilizzato per il web e per le fotografie digitali.
png – è il formato utilizzato soprattutto quando vogliamo inserire delle immagini con sfondo trasparente ed è un formato che garantisce un’alta qualità delle immagini.
Quindi scegliete il formato in base alle vostre esigenze.
Le immagini non devono essere troppo pesanti, ma devono essere dimensionate tanto da riuscire a mantenere una certa qualità. Programmi come Adobe Photoshop o Gimp (free) vi consentono di salvare le immagini per il web. (Nella prossima guida sui programmi di foto-ritocco vi spiegherò come fare).
In alternativa esistono altri programmi tipo TinyPNG e JPEGmini che consentono di comprimere le immagini direttamente online.
È consigliabile non superare i 70 – 80 kB per immagine se si vuole avere una buona resa della pagina.
Ricordate che un’immagine troppo pesante appesantisce la pagina e penalizza il vostro sito per la SEO.
Tag img per inserire un’immagine in una pagina web
Adesso vediamo quale tag permette di inserire un’immagine in una pagina web.
Il tag per l’inserimento delle immagini è <img> ed è un tag che non ha bisogno di chiusura.
Attributo src
L’attributo src deve essere sempre presente perché è quello che specifica il percorso dell’immagine.
Ad esempio: <img src=”frazioni_scratch.jpg”>
Attributo alt del tag img
Anche l’attributo alt deve essere sempre presente, se non lo inseriamo l’immagine si vedrà lo stesso, ma questo attributo è importantissimo per la SEO.
In definitiva l’attributo alt è l’elemento che aiuta i motori di ricerca a identificare l’immagine grazie alla presenza di una o più keywords.
Quindi ad esempio nel caso delle frazioni di Scratch inserisco questo tag:
<img src=”frazioni_scratch.jpg” alt=”frazioni con scratch”>
Facciamo un esempio completo:
<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 realizzati con scratch: </p>
<p><img src="frazioni_scratch.jpg" alt="frazioni con scratch"></p>
<p><img src="tabellina_scratch.jpg" alt="tabelline con scratch"></p>
Attenzione in questo caso le immagini si trovano nella stessa cartella della nostra pagina html.
Sarebbe opportuno creare una cartella, ad esempio di nome img, che contiene tutte le immagini e quindi, dopo aver fatto questa operazione, bisognerà cambiare il percorso:
<p><img src="img/frazioni_scratch.jpg" alt="frazioni con scratch"></p>
<p><img src="img/tabellina_scratch.jpg" alt="tabelline con scratch"></p>
Attributi width ed height del tag img
Width ed height sono gli attributi che indicano la larghezza e l’altezza dell’immagine, non sono obbligatori e se li utilizzate comunque indicate le dimensioni esatte dell’immagine in uso, perché non è questo infatti il modo per scalarle, ma come vi dicevo prima con i programmi appositi.
<img src="img/frazioni_scratch.jpg" alt="frazioni con scratch" width="260" height="120">
Si può utilizzare anche solo width per indicare la larghezza, in tal caso l’altezza sarà presa in automatico.
Il valore espresso è in pixel.
Attributo title del tag img
L’attributo title del tag img è quello che si visualizza quando con il mouse ci avviciniamo all’immagine.
Come fattore di indicizzazione è meno rilevante, ma inserirlo è buona norma.
<img src="img/frazioni_scratch.jpg" alt="frazioni con scratch" title="frazioni con scratch" width="260" height="120">
Tag semantici figure e figcaption
Con l’avvento dell’HTML 5 sono stati introdotti altri due tag semantici:
<figure> …</figure> e <figcaption>…</figcaption>
<figure>
<img src="img/frazioni_scratch.jpg" alt="frazioni con scratch">
<figcaption>Le frazioni con scratch</figcaption>
</figure>
L’elemento <figure> consente di rappresentare un insieme di elementi composti da immagini e testo, infatti all’interno si può includere <figcaption> necessario se si vuole inserire una didascalia. Si possono anche inserire più immagini all’interno di <figure>.
L’elemento figcaption non è obbligatorio.
Il mio consiglio è quello di utilizzare in ogni caso <figure>.
Vediamo un esempio:
<figure>
<img src="img/frazioni_scratch.jpg" alt="frazioni con scratch">
<img src="img/tabellina_scratch.jpg" alt="tabelline con scratch">
<figcaption>Le frazioni con scratch</figcaption>
</figure>
L’elemento figure trova la sua utilità anche per inserire dei video o delle citazioni.
In questa lezione parliamo di paragrafi in html e del tag br che serve per andare a capo.
I paragrafi in html si inseriscono con il tag <p></p>, dove p è chiaramente l’iniziale di paragraph.
I paragrafi sono fondamentali per una pagina web e se ne possono inserire anche più di uno. Tra un paragrafo e l’altro si genera dello spazio che poi posso personalizzare con i CSS.
Vediamo subito un esempio di inserimento di due paragrafi in html.
Dunque apriamo la nostra pagina html di esempio che abbiamo creato nella scorsa lezione o in alternativa ne creiamo una nuova e digitiamo il codice sotto:
...
<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.</p>
<p>Sul sito Coding Creativo troverete tanti esempi ed esercizi su scratch</p>
...
Otterremo quindi questo risultato:
Coding Creativo
Scratch
Scratch è un ambiente di programmazione gratuito ed è ideale per imparare il coding. L’interfaccia grafica è molto intuitiva e semplice da usare.
Sul sito Coding Creativo troverete tanti esempi ed esercizi su Scratch.
Tag <br> per andare a capo in html
Il tag <br> sta per break line, è utilizzato per andare a capo e a differenza del tag pragrafo <p> non necessita della chiusura.
Quando si va a capo con il tag <br> in html, tra una riga e l’altra non si genera uno spazio vuoto così come con il tag <p>.
Vediamo quindi un esempio di utilizzo del tag <p> e del tag <br>.
...
<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.</p>
<br>Sul sito Coding Creativo troverete tanti esempi ed esercizi su scratch.
...
Ecco cosa otterrete, notate che lo spazio tra usare e Sul sito non è più come prima.
Coding Creativo
Scratch
Scratch è un ambiente di programmazione gratuito ed è ideale per imparare il coding. L’interfaccia grafica è molto intuitiva e semplice da usare. Sul sito Coding Creativo troverete tanti esempi ed esercizi su Scratch.
Più spazi tra i paragrafi in html
Se si desidera lasciare più spazi si possono inserire anche più di un <br> e si possono inserire anche tra un paragrafo e l’altro.
Facciamo dunque un esempio, dove tra un paragrafo e l’altro ho inserito due <br>.
All’interno dell’ultimo un paragrafo ho anche inserito la lista.
<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>Ecco quindi alcuni esempi di giochi realizzati con Scratch:
<ul>
<li>Tabellina con Scratch;</li>
<li>Morra cinese.</li>
</ul>
</p>
Ecco dunque il risultato:
Coding Creativo
Scratch
Scratch è un ambiente di programmazione gratuito ed è ideale per imparare il coding. L’interfaccia grafica è molto intuitiva e semplice da usare. Sul sito Coding Creativo troverete tanti esempi ed esercizi su Scratch.
Ecco quindi alcuni esempi di giochi realizzati con Scratch:
Tabellina con Scratch;
Morra cinese.
Attributi dei paragrafi in html
In passato si utilizzavano vari attributi per il tag paragrafo, ad esempio per dare uno sfondo oppure per allineare del testo. Queste proprietà oggi sono deprecate e si preferisce usare i CSS.
Vediamo come inserire alcuni tag all’interno del tag body.
Siamo dunque all’interno della sezione body, dove vedremo una vasta serie di tag da poter inserire all’interno della pagina per creare una formattazione piacevole alla lettura.
Facciamo una premessa riguardo al tag <body>, molti manuali ancora trattano di proprietà tipo bgcolor, background, ecc… Come in questo esempio: <body bgcolor=”#ff0000″> che serve a dare il colore di sfondo alla pagina.
Dobbiamo dire che queste proprietà sono in disuso, quindi magari proporvele per poi dirvi che non si usano, non mi sembra costruttivo. Perciò le ometterò.
Mi potreste chiedere, ma allora coma si fa ad esempio a dare uno sfondo ad una pagina? Bene vi risponderò a questo quando parleremo dei CSS e vi farò vedere in dettaglio come si fa.
Partiamo adesso dai tag che servono per i titoli degli articoli che scriverete all’interno della vostra pagina.
Tag titoli all’interno del tag body
I tag per scrivere i titoli di un articolo si rappresentano con la lettera H, seguita da un numero che va da 1 a 6. Più piccolo è il numero, più grande sarà il carattere.
I tag titoli si inseriscono subito dopo il tag <body> e chiaramente si decide quale utilizzare in base alle proprie esigenze.
Potete notare sotto un esempio di utilizzo dei tag h3 e h4.
<h3>Tutorial sul linguaggio html creato da coding creativo</h3>
<h4>Tutorial sul linguaggio html creato da coding creativo</h4>
Noterete che a mano a mano la dimensione del carattere diminuisce.
Il tag h1 in genere viene utilizzato per il titolo principale della pagina e viene posizionato nella parte alta dell’articolo. Per le tecniche SEO (ovvero per un buon posizionamento nei motori di ricerca) sarebbe opportuno inserire la parola chiave nel tag h1.
Non a caso infatti tornando all’esempio precedente, l’articolo sulle frazioni ha come titolo frazioni con scratch, che è la parola chiave principale con la quale voglio farmi trovare da Google.
Chiaramente può anche essere diverso dal tag title, anzi è consigliabile che non sia proprio uguale e che si possa combinare abilmente con il suddetto tag.
Vi ricordo che nel tag title inerente l’articolo sulle frazioni avevamo inserito questo:
<title>Frazioni con scratch, frazioni proprie, improprie e apparenti con scratch</title>
Anche qui vale la regola di utilizzare tag h1 diversi per ogni pagina.
Un’altra regola è quella di non inserire il punto alla fine di un titolo e in generale sarebbe opportuno non inserire nessuna punteggiatura.
La lunghezza del tag h1 deve essere compresa tra i 5 e i 70 caratteri.
In una pagina html, è bene distribuire i titoli e i sottotitoli, quindi utilizzate bene anche gli altri tag, inserendo se possibile qualche altra parolina chiave!
Prima pagina in HTML
Adesso iniziamo a creare la nostra prima pagina in html.
Prendiamo il semplice programma per scrivete dei testi che troverete nella sezione Accessori Windows – Blocco note, come da figura sotto:
Quando si aprirà il blocco note scrivete queste semplici righe di codice:
<!DOCTYPE html>
<html lang="it">
<head><title>Coding Creativo</title></head>
<body><h1>Sto realizzando la mia prima pagina</h1></body></html>
Non badiamo molto all’indentazione, ovvero allo spazio vuoto inserito all’inizio di un riga di testo, come invece si faceva una volta, in quanto addirittura adesso si utilizza la tecnica di minimizzare tutti i codici e dunque anche l’html, in modo tale da rendere più leggera la pagina.
Dopo occorre salvare la pagina con un nome, in questo la chiamo titolo.html, ma poi è importante selezionare l’opzione tutti i file, in quanto di default è impostato come documento di testo (file con estensione .txt).
Bene, adesso andate nella cartella dove è salvato il file e lo aprite. Si aprirà la pagina creata, nel browser predefinito, con il contenuto della vostra prima pagina web.
A breve pubblicherò altri interessanti articoli sull’argomento!
Commenti recenti