Ecco il risultato della verifica, che ci dice che il nostro foglio è in regola per il W3C.
Bene adesso iniziamo a svilupparlo.
Template Responsive
I template responsive sono quei modelli di pagine web che si adattano a ciascun dispositivo.
Oggi ormai è un requisito indispensabile perché circa il 70-80 % delle visite ad un sito web arrivano proprio da smartphone.
Il modello che vi presento non ha codice JavaScript per il menù ma lo adatta in maniera molto semplice.
Quando inizierò la guida su JavaScript vi insegnerò ad inserire il menù dinamico che automaticamente si trasforma per gli smartphone o altri dispositivi mobili.
Struttura del template responsive con HTML
Pensiamo a come strutturare la pagina:
Header – dove si inserisce il logo e magari un banner.
Nav – dove si inserisce la barra di navigazione del sito.
Slider – sezione dedicata alle immagini a scorrimento, ma per il momento lasceremo un’immagine statica.
Sezione articoli – qui inseriremo i nostri articoli.
Sidebar -Barra laterale dove inseriremo i collegamenti agli ultimi post per ciascun argomento.
Footer – ripeteremo il menù principale e citeremo il web-master.
Bene, queste sono le varie parti del nostro modello.
Iniziamo a scrivere il codice html e quindi apriamo il nostro editor. Come vi dicevo, vi consiglio di utilizzare notepad++ che potete scaricare gratuitamente da questo sito web https://notepad-plus-plus.org/
Quando utilizziamo i tag meta nell’attributo name indichiamo l’oggetto che vogliamo trattare e nel content l’azione che deve essere compiuta.
In questo caso stiamo dicendo al browser di impostare la larghezza della viewport, ovvero dell’area di visualizzazione, in base alla larghezza dello schermo del dispositivo. Cioè widht=device-width ovvero larghezza=larghezza del device. Separati da virgole possiamo aggiungere altre proprietà. Ad esempio aggiungiamo initial-scale=1 per indicare che vogliamo un rapporto 1:1.
Ci sono altri parametri che è possibile indicare ma ve ne parlerò in seguito con degli esempi pratici.
Continuiamo la creazione della nostra pagina.
Come vi dicevo sono importanti i tag semantici per la costruzione di un sito web.
Quindi struttureremo il nostro sito tenendone conto.
Corpo della pagina
Iniziamo adesso a progettare il nostro template responsive strutturando il corpo della nostra pagina.
Dunque, dopo il tag body come prima cosa inseriamo il tag div che sarà il contenitore di tutto il contenuto della nostra pagina web (in pratica si chiuderà prima del tag </body>) e che convenzionalmente prende nome di wrapper (traduzione avvolgere – perché è come se avvolgesse tutta la pagina).
Dopo aggiungiamo il tag semantico header, dove all’interno per il momento inseriremo solo il logo del sito web.
Sezione header
Il logo si trova dentro un’apposita cartella di nome images, dunque scrivo:
Notate che ho inserito all’interno del tag img una classe (selettore CSS) di nome img, che vedremo sarà indispensabile per visualizzare bene un’immagine anche su smartphone.
Sezione nav
Dopo l’header inserisco la barra di navigazione, utilizzando il tag semantico nav e un elenco puntato <ul> che poi formatterò con i CSS.
Utilizzo il tag semantico figure a cui assegno un id di nome logo che poi formatterò con i CSS.
Sezione principale del sito
Per realizzare il nostro esempio di template responsive ho pensato di strutturare il corpo del sito inserendo tutto all’interno di un livello div a cui ho assegnato un id di nome container.
Dopo ho creato la sezione principale dove ho inserito i vari articoli, usando il tag semantico article, seguendo una struttura ben precisa.
Per separare un articolo dall’altro ho utilizzato il tg <hr> che produce una linea di separazione. Questo tag non ha una chiusura.
<div id="container">
<div id="content">
<article class="post">
<h2 class="entry-title">Olimpiadi di matematica con scratch</h2>
<p>Sei nell'articolo: olimpiadi di matemativa - <a href="#">Scratch</a></p>
<figure><a href="#"><img src="images/gara_nazionale.jpg" class="img" alt="anno bisestile"></a></figure>
<div class="entry-content">In questo esempio realizzeremo un algoritmo per la risoluzione di un quesito matematico proposto alle gare nazionali.
</div>
</article>
<hr>
<article class="post">
<h2 class="entry-title">Anno bisestile con scratch</h2>
<p>Sei nell'articolo: anno bisetile - <a href="#"> Scratch</a></p>
<figure><a href="#"><img src="images/sfondo_bisestile.jpg" class="img" alt="scratch bisestile"></a></figure>
<div class="entry-content">In questo esempio realizzeremo un algoritmo per il calcolo dell'anno bisestile</div>
</article>
<hr>
</div>
<aside id="sidebar">
<div class="widget">
<h3>Scratch</h3>
<ul>
<li><a href="">Olimpiadi di matematica con scratch</a></li>
<li><a href="">Olimpiadi di informatica con scratch</a></li>
<li><a href="">Massimo tra n numeri con scratch</a></li>
<li><a href="">Anno bisestile con scratch</a></li>
</ul>
</div>
<div class="widget">
<h3>Algobuild</h3>
<ul>
<li><a href="">Olimpiadi di matematica con algobuild</a></li>
<li><a href="">Olimpiadi di informatica con algobuild</a></li>
<li><a href="">Massimo tra n numeri con algobuild</a></li>
<li><a href="">Anno bisestile con algobuild</a></li>
</ul>
</div>
<div class="widget">
<h3>CSS</h3>
<ul>
<li><a href="#">Template responsive</a></li>
<li><a href="#">Pseudo-classi</a></li>
<li><a href="#">Link</a></li>
</ul>
</div>
</aside>
</div><!--chiude il div class="container" -->
Infine c’è da creare il piede della pagina, dove inserisco il menù di navigazione e l’autore del sito.
Il livello dove ho indicato la classe clear serve ad evitare possibili allineamenti di altri oggetti a destra o a sinistra. Chiaramente deve essere impostata con i CSS, come vi dirò nel tutorial sul foglio di stile creato per questa pagina web.
Ovviamente non dobbiamo dimenticare di inserire i due tag di chiusura:
</body>
</html>
Ecco quindi quello che è solo un possibile esempio di template responsive con HTML5.
Adesso occorre formattare la pagina perché sia gradevole ed effettivamente adattabile su tutti i dispositivi. Perciò occorre andare nella sezione sui CSS, dove vi spiego come creare il foglio di stile in modo tale da rendere responsive il nostro sito web.
Il tag div è un importante elemento strutturale di una pagina web. È nato con la versione di HTML 4 ed è un tag che è molto legato ai fogli di stile, in quanto senza una corretta formattazione dice ben poco.
La funzione principale del tag div è quella di dividere una pagina in varie zone, permettendo di personalizzare ciascuna zona come si vuole. È dunque un contenitore generico dove all’interno si inseriscono immagini, testi, tabelle, ecc…
Prima dell’avvento dell’HTML5 veniva utilizzato per strutturare una pagina web senza l’ausilio dei tag semantici che invece hanno permesso la sostituzione di gran parte dei div che venivano utilizzati.
In questo modo avremo la parte alta del sito strutturata con un logo ed una frase che, con una opportuna formattazione, sistemeremo sotto il logo.
Facciamo un altro esempio, utilizzando div prima e dopo il tag semantico article.
<div>
<article>
<h2>Olimpiadi di matematica con scratch</h2>
<p><a>Leggi tutti gli articoli di Scratch</a></p>
<figure><a><img src="images/gara_nazionale.jpg" alt="anno bisestile"></a></figure>
<div>In questo esempio realizzeremo un algoritmo per la risoluzione di un quesito matematico proposto alle gare nazionali.
</div>
</article>
</div>
La differenza con il tag p è che div non presenta la spaziatura con l’elemento che lo precede e quello che lo segue.
Se prendiamo il blocco note e scriviamo questo codice in aggiunta alla nostra pagina già creata noteremo, anche senza l’uso dei CSS, la differenza tra il tag p e il tag div.
<div>In questo esempio realizzeremo un algoritmo per la risoluzione di un quesito matematico proposto alle gare nazionali con l'utilizzo di scratch.
</div>
<div>Algoritmo per cercare il massimo fra tre numeri con algobuild.
</div>
<p>Olimpiadi di matematica con scratch.</p>
<div>Algoritmo per verificare se due figure sono equivalenti con i diagrammi di flusso.</div>
Otterremo questo risultato:
In questo esempio realizzeremo un algoritmo per la risoluzione di un quesito matematico proposto alle gare nazionali con l’utilizzo di scratch. Algoritmo per cercare il massimo fra tre numeri con algobuild.
Olimpiadi di matematica con scratch.
Algoritmo per verificare se due figure sono equivalenti con i diagrammi di flusso.
I tag semantici sono stati introdotti con l’HTML 5. Questo perché l’HTML si è evoluto sulla base del web semantico. I tag semantici come abbiamo già detto sono importanti per la SEO.
Analizziamo innanzitutto quali vantaggi ci sono nell’utilizzarli:
Innanzitutto la leggibilità del codice da parte dei motori di ricerca. I tag semantici hanno lo scopo di specificare ai motori di ricerca di cosa si sta parlando;
In genere fra i due tag si includono, il logo e/o una frase con i titoli h1, h2 e/o un’immagine, ecc…
Il tag semantico footer
Il tag <footer>…<footer> è utilizzato per inserire elementi in fondo alla pagina. Ad esempio si inserisce il copyright, l’autore del sito web, ecc…
Il tag semantico nav
Il tag <nav>…<nav> specifica che in quell’area ci sono gli strumenti di navigazione del sito, ovvero il menù. In sostanza in quell’area si collocano gli elementi del menù.
I tag semantici article
Il tag <article>…</article> è utilizzato per definire ad esempio un articolo di un blog o di una rivista. All’interno ci possono essere più sezioni.
I tag semantici section
Il tag section <section>…<section> è utilizzato ad esempio per specificare una sezione nella pagina web per un raggruppamento tematico degli articoli. Ad esempio un capitolo può essere suddiviso in più section.
Il tag semantico aside
Il tag <aside>…</aside> specifica gli elementi che sono nella barra laterale, cioè la sidebar.
Esempio di struttura con i tag semantici
Adesso sviluppiamo una struttura semplificata di un sito utilizzando i tag semantici. Consideriamo uno schema come questo:
Inserendo le varie parti si ottiene quindi questo codice:
<!DOCTYPE html>
<html lang="it">
<head><title>Coding Creativo</title>
</head>
<body>
<header>
<h1>Coding Creativo</h1>
<h2>Fare coding divertendosi</h2>
</header>
<nav>
<ul><li><a href="https://www.codingcreativo.it/scratch/">Scratch</a><li>
<li><a href="https://www.codingcreativo.it/algobuild/">Algobuild</a></li>
<li><a href="https://www.codingcreativo.it/siti-web/html/">HTML</a>
</li>
<li><a href="https://www.codingcreativo.it/linguaggio-c/">C</a></li>
</ul>
</nav>
<article>
<section>
<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>
</section>
<section>
<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>
</p>
</section>
</article>
<aside>
...
</aside>
<footer>
<p>Creato da Coding creativo</p>
</footer>
</body></html>
A conclusione di quanto detto, cerchiamo di utilizzare questi tag per indirizzarci verso un web semantico.
Adesso diventa indispensabile affrontare div e i fogli di stile per rendere il sito web più gradevole.
Questi dati vengono poi inviati quando si clicca il pulsante invia. Dove vengono inviati? Vengono inviati al server web che poi provvederà a interpretarli ed inviarli a chi è stato programmato l’invio.
Innanzitutto perché creare un form in html?
Perché magari abbiamo bisogno di interagire con l’utente in qualche modo, creando un semplice form di contatto o una newsletter o ancora un form per raccogliere dati statistici.
Ecco allora come predisporre la pagina html che da sola non basterà per inviare dati attraverso un form. Infatti avremo bisogno anche di linguaggi di scripting come ad esempio PHP.
Tag form in html
Un form in html si indica col il tag <form>….</form>.
In genere si aggiungono gli attributi name, action, method e enctype.
L’attributo action serve a specificare l’azione che il browser deve effettuare quando il form viene sottomesso, ovvero quando si fa clic sul pulsante invia.
L’attributo action può avere come valore un URL oppure un indirizzo mail e come attributo di default ha la pagina stessa.
Per intenderci l’URL (Universal Resource Locator) è una stringa di caratteri che identifica in maniera univoca una pagina all’interno della rete.
Ad esempio, un URL può avere una forma del tipo:
https://www.codingcreativo.it/tag-form/
Dove https è il protocollo, in questo caso è https ma potrebbe anche essere diverso;
www.codingcreativo.it convenzionalmente è il nome di dominio, più precisamente definito Authority.
/tag-form/ è il path ovvero il cammino per raggiungere la pagina.
<form action=”URL_personalizzata“>…</form>
Oppure si può indicare un indirizzo mail usando mailto, come da esempio:
<form action=”mailto:nomecognome@gmail.com“>
Attributo method del tag form in html
L’attributo method determina il modo in cui i dati vengono mandati al server e può assumere due valori:
get – valore di default che passa i parametri che saranno visibili in alto nell’url della barra degli indirizzi.
post – invia i dati in modo che non possono essere tracciati nella barra degli indirizzi del browser.
Rinvio la spiegazione più tecnica di quanto avviene dopo avervi spiegato cosa sono le query string e le CGI.
Adesso mi preme solo farvi capire che dunque post è il metodo più sicuro se si vogliono inviare dati di un form di registrazione.
L’attributo enctype indica il tipo di codifica da utilizzare.
Questo attributo di default è impostato su questo valore: “application/x-www-form-urlencoded”, che sta ad indicare che tutti i caratteri vengono codificati e i caratteri speciali vengono convertiti. Quindi se vogliamo trasmettere solo dati questo attributo può essere omesso.
Nel momento in cui invece dobbiamo trasmettere un file, come ad esempio un’immagine allora dobbiamo modificarlo nel valore: “multipart/form-data“.
C’è anche un altro valore da poter inserire: “text/plain”, il quale indica che i caratteri non devono essere codificati ma è usato molto più raramente.
Tag input per i form in html
Continuiamo a costruire il nostro form html utilizzando il tag <input> si inserisce sotto il tag <form> prima della sua chiusura </form>.
Il tag <input> non ha il tag di chiusura e permette l’inserimento da parte dell’utente di un determinato valore.
Viene utilizzato con vari attributi, tra cui type, name,value, e placeholder.
Attributo name
L’attributo name serve a specificare il nome del campo e in genere si scrive un nome identificativo per quel tipo di dato. È un dato importante perché in questo modo si identificano i dati da inviare.
Ecco alcuni esempi:
<input name=”cognome”>
<input name=”mail”>
<input name=”invia”>
Attributo placeholder
L’attributo palceholder è stato introdotto con l’HTML5 ed è molto utile, infatti consente di visualizzare un suggerimento all’interno del campo da compilare.
Visualizzo i campi del form html come in figura sotto:
Attributo type
L’attributo type può assumere questi valori:
text – di default, se omesso infatti il campo input è una casella di testo semplice;
submit – indica un pulsante (ad esempio può essere utilizzato per il tasto invia);
button – indica un semplice bottone da inserire nel form e su di esso è possibile attivare ad esempio alcuni eventi come onClick;
checkbox – è utilizzato per selezionare più caselle contemporaneamente in un elenco di voci accanto a dei piccoli riquadri;
radio – è indicato per effettuare una scelta da un elenco di voci indicate da caselle che sono dei piccoli cerchi. L’eventuale elemento preselezionato si indica con checked. Tutti gli elementi devono avere lo stesso valore per l’attributo name;
reset – il pulsante reset serve a svuotare il form;
image – permette ad esempio di impostare un’immagine per un pulsante di invio;
Il campo hidden è un campo non visibile necessario quando occorre memorizzare dei dati per poi inviarli, ma al tempo stesso non devono essere visibili nella pagina web.
<p><input name="pw" type="hidden"></p>
Tag textarea
Continuaimo a costruire il form in html utilizzando il tag textarea che permette di creare un’area nella quale inserire del testo, specificando l’attributo name, il numero di righe con l’attributo rows e il numero di colonne con l’attributo cols. In pratica rows e cols non sono altro che la larghezza e l’altezza di una textarea.
Il tag select si inserisce all’interno del form e consente di effettuare una scelta da un elenco di voci specificate dal tag option.
Tag select
Il tag select in genere ha l’attributo name, come da esempio:
<select name=””> … </select>
Tag option
Il tag option si inserisce all’interno del tag select e ha in genere l’attributo name che specifica il nome, l’attributo value che specifica il valore che deve essere inviato e l’attributo selected che specifica la voce preselezionata.
I dati da inserire possono essere descritti da un’etichetta rappresentata dal tag label. L’attributo che si specifica all’interno è for ed ha lo stesso valore dell’attributo name che abbiamo visto sopra per gli altri tag.
La label è importante perché gli screen reader possono leggerla.
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.
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>.
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