Template Responsive

Template Responsive

In quest’articolo impareremo a predisporre un semplice template responsive con HTML, che può essere utilizzato anche a scopo didattico.

Questo vuole rappresentare solo un buon punto di partenza per lo sviluppo di altri progetti più corposi.

Chiaramente poi sarà il foglio di stile che lo renderà responsive, ma occorre predisporre anche il codice HTML in maniera idonea.

Potete visionare il modello che impareremo a sviluppare al seguente link:

https://www.codingcreativo.it/coding_creativo_modello/


Validazione del codice secondo il W3C

Che cosa vuol dire validazione del codice secondo il W3C?

Vuol dire che il vostro sito web sta rispettando le giuste regole sia per l’HTML5, sia per il CSS3.

Questo semplice modello creato è valido secondo le regole del W3C ed è validato per HTML5 e per CSS3.

Es: Inserite tutto il percorso completo
https://www.codingcreativo.it/coding_creativo_modello/ nel sito del W3C come da figura sotto:

W3C validator CSS

Ecco il messaggio generato dal sistema che ci dice che non ci sono warnings ed errori nel codice.

W3C html validator

Proviamo la validazione anche del foglio di stile, cioè vediamo se il nostro CSS rispetta le regole del W3C.

Andate su questo sito per validare i CSS https://jigsaw.w3.org/css-validator/ e inserite nuovamente il percorso completo: https://www.codingcreativo.it/coding_creativo_modello/

Ecco il risultato della verifica, che ci dice che il nostro foglio è in regola per il W3C.

validator css

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 creare il template

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/

All’interno del codice html ho inserito le cassi e gli id per la formattazione con i CSS. Se volete sapere cosa sono i CSS, prima di continuare con l’esempio, potete consultare, se non l’avete già fatto, queste pagine:
https://www.codingcreativo.it/i-fogli-di-stile-css/
https://www.codingcreativo.it/fogli-di-stile-esterni/
https://www.codingcreativo.it/selettori-nei-css/

Oppure continuate a leggere inserendo comunque le proprietà class e id dove sono indicate all’interno dei tag.

Partiamo dall’head, ovvero dalla sezione del titolo, e dai tag che precedono title.

<!doctype html>
<html lang="it"> 
<head>
    <meta charset="utf-8" />
    <title>Coding Creativo, fare coding divertendosi</title>   
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 <link href="style.css" rel="stylesheet" type="text/css" media="all" />
</head>

Ho inserito il tag meta per i caratteri:

<meta charset="utf-8" />

E poi ho inserito anche il tag necessario per la visualizzazione del sito web sui dispositivi mobili.

<meta name="viewport" content="width=device-width, initial-scale=1" />

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:

<body>
<div id="wrapper">
 <header>   
      <figure>
        <img src="images/logo_coding_creativo.png" alt="coding creativo" class="img">
      </figure>	
   </header> 

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.

<nav>
    <ul>
     <li><a href="home.html" title="Home">Home</a></li>
     <li><a href="scratch.html" title="Scratch">Scratch</a></li>
     <li><a href="algobuild.html" title="Algobuild">Algobuild</a></li>
     <li><a href="linguaggio_c.html" title="linguaggio c">Linguaggio C </a></li>
     <li><a href="linguaggio_html.html" title="HTML">HTML</a></li>
     <li><a href="css.html" title="CSS">CSS</a></li>
    </ul>
</nav>

Sezione slider o immagine statica

Sotto il menù di navigazione inserisco un’immagine statica:

<figure><img src="images/logo_coding_creativo.png" alt="coding creativo" class="img"></figure>	

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.

<footer>
    <div id="sitemap">
	<a href="home.html" title="Home page">Home</a> | <a href="scratch.html" title="About Us">Scratch</a> | <a href="algobuild.html" title="Servizi">Algobuild</a> |
    </div>
    <p><a href="https://www.codingcreativo.it"> Coding creativo</a></p>
 </footer>
 <div class="clear"></div>
</div> <!--chiude il div class="wrapper" -->

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.


Alcuni link utili

Come trovare immagini per il sito web

Quali colori scegliere per un sito web

Quali font scegliere per un sito web


Tag div

Tag div

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.

Ad ogni modo è rimasto un tag fondamentale che si può inserire prima o dopo i tag semantici.

Esempi di utilizzo

Innanzitutto lo inseriamo all’interno del tag semantico header, dove lo collochiamo ad esempio dopo il logo.

  <header>   
    <figure><img src="images/logo_coding_creativo.png" alt="coding creativo"></figure>
    <div>Fare coding divertendosi</div>
   </header> 

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.


Alcuni link utili:

Form in html

Tag strong

Collegamenti interni ad una pagina web

Collegamenti ipertestuali

Tag img e attributo alt per la SEO

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


Tag semantici

Tag semantici

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;

Miglioramento della leggibilità del codice durante la fase di progettazione, da parte del web-master;

Miglioramento della struttura della pagina web stessa, sia in fase di creazione che in fase di modifica.

Minore possibilità di fare errori nella struttura della pagina.


Vediamo quindi quali tag semantici si usano per strutturare una pagina web.

Elenchiamo alcuni tra i tag semantici più utilizzati

Il tag semantico header

Il tag <header>…</header> è utilizzato, come facilmente intuibile, per inserire all’interno elementi che si trovano in alto nella pagina web.

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:

tag semantici, web semantico

Il codice sarà dunque questo:

<!doctype html>
<html lang="it">
<head>
<title>Coding creativo, creare codice divertendosi</title>
</head>

<body>

<header>
</header>

<nav>
</nav>

<article>
<section>
</section>
</article>

<aside>
</aside>

<footer>
</footer>
</body>
</html>

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.

Alcuni link utili:

Form in html

Tag strong

Collegamenti interni ad una pagina web

Collegamenti ipertestuali

Tag img e attributo alt per la SEO

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


Form in html

Form in html

Oggi vedremo come creare un semplice form in html, ovvero un modulo che consente all’utente di inviare dei dati.

Per intenderci un form in html è qualcosa del tipo:

form html

Quindi ci sono degli spazi dove inserire i dati, ad esempio il nome, il cognome, il telefono, il messaggio, ecc…

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.

<form action=”” method=”” name=”” enctype=””>….</form>


Attributo action del tag form

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.

Quindi ad esempio indico come specificato sotto:

<form action=”URL_personalizzatamethod=”post”>…</form>


Attributo name del tag form in html

L’attributo name è il nome che si vuole assegnare al form, ad esempio:

<form name=”invio_dati” action=”URL_personalizzata” method=”post”>…</form>


Attributo enctype del tag form html

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“.

<form method="URL_personalizzata" method="post" enctype="multipart/form-data">
...
</form>

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.

Ad esempio inserendo semplicemente questo codice:

<form name="invio_dati" action="URL_personalizzata" method="post">
<p><input name="nome" placeholder="Nome"></p>
<p><input name="mail" placeholder="Email"></p>
</form>

Visualizzo i campi del form html come in figura sotto:

placeholder

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;

hidden – viene utilizzato per i campi nascosti.

Vediamo alcuni esempi di form html:

Primo esempio che include i radio button:

<form name="invio_dati" action="URL_personalizzata" method="post">
<p><input name="nome" placeholder="Nome"></p>
<p><input name="mail" placeholder="Email"></p>
<p>
<input name="sesso" type="radio" value="maschio" checked> maschio
<input name="sesso" type="radio" value="femmina"> femmina
</p>
<p>
<input name="invia" type="submit"></p>
</form>
Esempio con i radio button

Secondo esempio con i checkbox:

<form name="invio_dati" action="URL_personalizzata" method="post">
<p><input name="nome" placeholder="Nome"></p>
<p><input name="mail" placeholder="Email"></p>
<p>
<input name="c1" type="checkbox" value="tecnologia"> tecnologia
<input name="c2" type="checkbox" value="computer"> computer	
<input name="c3" type="checkbox" value="reti"> reti	
</p>
<p>
<input name="sesso" type="radio" value="maschio"> maschio
<input name="sesso" type="radio" value="femmina"> femmina
</p>
<p>
<input name="invia" type="submit"></p>
</form>
checkbox

Terzo esempio con il tasto reset:

<form name="invio_dati" action="URL_personalizzata" method="post">
<p><input name="nome" placeholder="Nome"></p>
<p><input name="mail" placeholder="Email"></p>
<p>
<input name="c1" type="checkbox" value="tecnologia"> tecnologia
<input name="c2" type="checkbox" value="computer"> computer	
<input name="c3" type="checkbox" value="reti"> reti	
</p>
<p>
<input name="sesso" type="radio" value="maschio"> maschio
<input name="sesso" type="radio" value="femmina"> femmina
</p>
<p>
<input name="invia" type="submit"></p>
</form>
reset html

Quarto esempio con i button:

<form name="invio_dati" action="URL_personalizzata" method="post">
<p><input name="nome" placeholder="Nome"></p>
<p><input name="mail" placeholder="Email"></p>
<p>
<input name="c1" type="checkbox" value="tecnologia"> tecnologia
<input name="c2" type="checkbox" value="computer"> computer	
<input name="c3" type="checkbox" value="reti"> reti	
</p>
<p>
<input name="sesso" type="radio" value="maschio"> maschio
<input name="sesso" type="radio" value="femmina"> femmina
</p>
<p>
<input type="button" value="saluto" onClick="alert('Ciao da Coding Creativo');" />
</p>
</form>
button in html

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.

Un esempio di form in html:

<form name="invio_dati" action="URL_personalizzata" method="post">
<p><input name="nome" placeholder="Nome"></p>
<p><input name="mail" placeholder="Email"></p>
<p>
<input name="c1" type="checkbox" value="tecnologia"> tecnologia
<input name="c2" type="checkbox" value="computer"> computer	
<input name="c3" type="checkbox" value="reti"> reti	
</p>
<p>
<input name="sesso" type="radio" value="maschio"> maschio
<input name="sesso" type="radio" value="femmina"> femmina
</p>
<p>
<textarea name="messaggio" rows="5" cols="50" placeholder="inserisci un messaggio"></textarea></p>
<p>
<input name="invia" type="submit">
</p>
</form>
textarea in html


Tag select e option

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.

<form name="invio_dati" action="URL_personalizzata" method="post">
<p><input name="nome" placeholder="Nome"></p>
<p><input name="mail" placeholder="Email"></p>
<p>
<input name="sesso" type="radio" value="maschio"> maschio
<input name="sesso" type="radio" value="femmina"> femmina
</p>
<select name="regione"> 
     <option value="1" selected>Abruzzo</option>
     <option value="2">Basilicata</option>
     <option value="2">Calabria</option>
     <option value="3">Campania</option>
     <option value="4">Emilia-Romagna</option>
     <option value="5">Friuli-Venezia Giulia</option>
     <option value="6">Lazio</option>
     <option value="7">Liguria</option>
     <option value="8">Lombardia</option>
     <option value="9">Marche</option>
     <option value="10">Molise</option>
     <option value="11">Piemonte</option>
     <option value="12">Puglia</option>
     <option value="13">Sardegna</option>
     <option value="14">Sicilia</option>
     <option value="15">Toscana</option>
     <option value="16">Trentino-Alto Adige</option>
     <option value="17">Umbria</option>
     <option value="18">Valle d'Aosta</option>
     <option value="19">Veneto</option>
</select>
<p>
<textarea name="messaggio" rows="5" cols="50" placeholder="inserisci un messaggio"></textarea></p>
<p>
<input name="invia" type="submit">
</p>
</form>
select option

Label

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.

Vediamo un esempio:

<p>
<label for="nome">Nome </label> 
<input name="nome" placeholder="Nome"></p>
<p>
<label for="nome">Email </label> 
<input name="mail" placeholder="Email"></p>
label form

Questi sono solo degli esempi di form in html, in base alle vostre esigenze potete creare il vostro form personalizzato.

Prossimamente vedremo altri esempi di form in html e come gestirne l’invio.


Alcuni link utili:

Collegamenti interni ad una pagina web

Collegamenti ipertestuali

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

Tag strong e tag em

Tag strong e tag em

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.



Alcuni link utili:

Tag semantici

Collegamenti interni ad una pagina web

Collegamenti ipertestuali

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


Collegamenti all’interno di una pagina web

Collegamenti all’interno di una pagina web

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:
<a name=”nome_elemento“>…</a>

Il link che rimanderà al segnalibro sarà:
<a href=”#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

Alcuni link utili:

Tag semantici

Form in html

Tag strong ed em

Collegamenti ipertestuali

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