Quando scrivi in HTML, capita spesso di dover inserire un’interruzione di riga. Un'interruzione di riga è fondamentale in indirizzi, poesie o quando il testo supera la larghezza disponibile del browser. Se non inserisci manualmente i tuoi "a capo", il testo potrebbe essere formattato in modo anomalo.

In questo tutorial, ti mostrerò come inserire interruzioni di riga nel tuo codice HTML con alcuni esempi "con e senza", così potrai usarle correttamente e migliorare la formattazione del tuo testo.

Sintassi base per andare a capo in HTML

Puoi inserire un’interruzione di riga in HTML usando il tag <br>, che equivale al tasto "Invio" sulla tastiera.

Tieni presente che HTML ignora le interruzioni di riga fatte con il tasto "Invio".

<br />

Se ti stai chiedendo perché nel tag <br> a volte c’è una barra /, è perché era necessaria ai tempi di HTML4. Con HTML5 non è più obbligatorio usare la barra, ma entrambe le versioni funzionano allo stesso modo.

Se usi un formattatore di codice come prettier, vedrai che inserirà automaticamente la barra / quando salvi o incolli il codice, anche se tu non l’avevi messa.

Come inserire interruzioni di riga negli indirizzi

Quando scrivi un indirizzo in una lettera, un’interruzione di riga è importante per poterlo formattare correttamente.

Ecco un esempio di indirizzo senza interruzioni di riga

Un indirizzo senza interruzioni di riga (cioè senza i tag <br>) appare così:

<p>
     The White House, 1600 Pennsylvania Avenue NW Washington, DC 20500, USA.
</p>

Ho aggiunto un po’ di codice CSS per centrare il contenuto con Flexbox e ingrandire leggermente il testo:

body {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    font-size: 3rem;
    max-width: 1000px;
    margin: 0 auto;
}

Ecco come appare nel browser:

Ecco un indirizzo con interruzioni di riga

E così possiamo aggiungere interruzioni di riga per formattare correttamente il nostro indirizzo:

<p>
    The White House <br />
    1600 Pennsylvania Avenue <br />
    NW Washington, DC <br />
    20500 <br />
    USA
</p>

Ecco come appare nel browser:

Come aggiungere interruzioni di riga nelle poesie

Di norma le poesie sono scritte in frasi brevi interrotte, per creare gerarchie visive e una formattazione gradevole.

Quindi, se vuoi scrivere una poesia nel tuo codice HTML, il tag <br> rende il processo di formattazione molto più semplice.

Una poesia senza interruzioni di riga

<p>
      I dabbled around a lot when I decided to learn to code 
      I went from A to Z with resources 
      When I decided to make my own things 
      I discovered I've been in the old all while 
      So I remained a novice in coding 
      But then I found freeCodeCamp 
      I got my hands on the platform 
      I went from novice to ninja in coding 
     And now I'm a camper for life
</p>

Ecco come appare nel browser:

Puoi vedere che la poesia non ha alcuna gerarchia visiva, non è formattata correttamente, e di conseguenza risulta illeggibile come poesia.

Una poesia con interruzioni di riga

<p>
      I dabbled around a lot when I decided to learn to code <br />
      I went from A to Z with resources <br />
      When I decided to make my own things <br />
      I discovered I've been in the old all while <br />
      So I remained a novice in coding <br />
      But then I found freeCodeCamp <br />
      I got my hands on the platform <br />
      I went from novice to ninja in coding <br />
      And now I'm a camper for life <br />
</p>

Ho anche modificato leggermente la dimensione del font nel CSS:

body {
   display: flex;
   align-items: center;
   justify-content: center;
   height: 100vh;
   font-size: 2.5rem;
   max-width: 1000px;
   margin: 0 auto;
}

Ecco come appare ora nel browser:

Ora puoi vedere che la poesia è più leggibile e formattata nel modo corretto.

Un consiglio utile: non usare il tag <br> per forzare uno spazio tra elementi a livello di blocco (<p>, <h1>, <h2>, <h3>, <div>, ecc.). Per gestire gli spazi tra questi elementi, usa la proprietà CSS margin.

Forse ti starai chiedendo: dato che il tag <br> è un elemento, è possibile applicargli dello stile?

Sì, è possibile — ma non c’è una reale necessità pratica, poiché tutto ciò che fa è inserire uno spazio.

Conclusione

Spero che questo tutorial ti abbia fornito le conoscenze di base necessarie per utilizzare correttamente il tag <br>, così da migliorare l’aspetto del tuo testo in HTML.

Grazie per la lettura, e continua a programmare!

L'HTML costituisce le fondamenta di qualsiasi sito web. È la prima cosa che le persone vedono. Senza di esso, non ci sarebbe alcun sito web.

Per questo motivo, è importante attenersi alle buone pratiche di scrittura di codice. Se non segui le migliori pratiche, creerai un'esperienza utente negativa per chi naviga sul web.

C'è sempre qualcosa di nuovo da imparare in HTML, che tu sia un novellino a programmare o un professionista con tanta esperienza alle spalle.

In questo articolo, parleremo delle migliori pratiche di base in HTML.

Iniziamo. 💃

Le migliori pratiche HTML

Le migliori pratiche HTML sono regole che ti aiuteranno a creare siti web facili da mantenere e leggere.

Qui illustriamo alcune linee guida da tenere a mente quando si costruisce un sito web basato sull'HTML:

Usa un solo elemento h1 per pagina

Ci sono 6 diversi tag di intestazione in HTML, da <h1> a <h6>. Il tag <h1> è l'intestazione principale (il soggetto della pagina web), mentre il tag <h6> è l'intestazione meno importante.

Il tag <h1> è più grande del tag <h2> , il tag <h2> è più grande del tag <h3>, e così via fino al tag <h6>. Ciascuna di queste intestazioni diminuisce di dimensione in base alla sua importanza.

È importante evitare di usare più di un elemento <h1> per pagina.

Non fare questo ⬇️:

<main>
<div>
<h1>Programmare può essere divertente?</h1>
<p>Più scrivi codice, più migliori.</p>
</div>

<div>
<h1>Programmare è divertente</h1>
<p>È sempre meglio quando ci si diverte a scrivere codice</p>
</div>
</main>

Nell'esempio precedente, abbiamo usato il tag <h1> nel primo e secondo <div>. Programmare in questo modo funzionerà, ma sebbene tu raggiunga lo stesso obiettivo, questa non è una buona pratica.

Fai così invece ⬇️:

<main>

<div>
<h1>Programmare può essere divertente?</h1>
<p>Più scrivi codice, più migliori</p>
</div>

<div>
<h2>Programmare è divertente</h2>
<p>È sempre meglio quando ti diverti a scrivere codice</p>
</div>

</main>

Avere un solo elemento <h1> in una pagina web è fondamentale per l'ottimizzazione dei motori di ricerca (Search Engine Optimization, SEO). Aiuta i motori di ricerca a capire di cosa tratta una pagina web (l'idea principale di una pagina).

Non saltare i livelli di intestazione in HTML

Quando si usano i tag di intestazione, è fondamentale procedere da <h1> a <h2>, <h3>, <h4> e così via...

Non usare <h1> e saltare poi subito a <h3> quando usi i tag di intestazione. È difficile per i visitatori del web usare uno screen reader per capire il contenuto della tua pagina web quando salti i livelli di intestazione.

Uno screen reader è una tecnologia che aiuta le persone con difficoltà visive ad accedere a contenuti digitali come siti web o applicazioni ed interagire con essi tramite audio o touch. Gli utenti principali degli screen reader sono persone non vedenti o con una vista molto limitata.

Non fare questo ⬇️:

<h1>Programmare è divertente</h1>
<h3>È sempre meglio quando ci si diverte a scrivere codice</h3>
<h5>La consistenza è chiave</h5>

Fai così invece⬇️:

<h1>Programmare può essere divertente?</h1>
<h2>Più scrivi codice, più migliori</h2>
<h3>Programmare è divertente</h3>

Usa l'elemento figure per aggiungere didascalie alle tue immagini in HTML

È consigliabile usare l'elemento <figure> quando si aggiungono didascalie alle immagini. È importante usare l'elemento <figcaption> insieme all'elemento <figure> affinché funzioni.

Non fare questo ⬇️:

<div>
<img src=“a-man-coding.jpg” alt=“Un uomo che lavora al computer”>
<p>Questa è una foto di un uomo che lavora al computer</p>
</div>

L'esempio precedente funzionerà come previsto, ma non è il modo migliore per farlo. In una situazione in cui l'immagine non si carica, verranno visualizzati sullo schermo il testo alternativo alt e il testo nell'elemento <p>. Sarà difficile per un visitatore usare uno screen reader per distinguere i testi del paragrafo e dell'alt.

Tieni sempre a mente che il fatto che il tuo codice funzioni, non vuol dire che stai seguendo le migliori pratiche.

Fai così invece ⬇️:

<figure>
<img src=“a-man-coding.jpg” alt=“Un uomo che lavora al computer”>
<figcaption> Questa è una foto di un uomo che lavora al computer</figcaption>
</figure>

L'esempio precedente è il modo migliore per aggiungere didascalie alle tue immagini.

È importante aggiungere didascalie alle tue immagini in questo modo per:

• Ottimizzazione dei motori di ricerca: è più facile trovare le tue immagini sui motori di ricerca.
• Sarà più semplice per i visitatori del sito che usano gli screen reader capire il contenuto della tua pagina web.

Non usare div per creare intestazioni e piè di pagina - usa invece gli elementi semantici

Gli elementi semantici HTML rendono la struttura di un documento più significativa su una pagina web. È buona pratica usare gli elementi semantici HTML per il corretto assemblaggio della tua pagina web.

Evita di usare <div> al posto degli elementi semantici HTML. Non usare gli elementi <div> per mostrare intestazioni o piè di pagina sulla tua pagina web. Al loro posto usa gli elementi semantici <header> e <footer>.

L'elemento <header> mostra la navigazione o la parte iniziale della pagina web.

L'elemento <footer> mostra le informazioni sul copyright o i link di navigazione della pagina web.

Non fare questo ⬇️:

<div class="header">
<a href="index.html">Home</a>
<a href="#">About</a>
<a href="#">Contact</a>
</div>

<div class="footer">
<a href="index.html">Home</a>
<a href="#">About</a>
<a href="#">Contact</a>
</div>

Nell'esempio sopra, abbiamo usato il tag <div> come un contenitore per l'intestazione e il piè di pagina . Scriverlo così funzionerà, ma anche se raggiungi lo stesso obiettivo, questa non è questa una buona pratica.

Fai così invece ⬇️:

<header>
<h1></h1>
</header>

<footer>
<a href="index.html">Home</a>
<a href="#">About</a>
<a href="#">Contact</a>
</footer>

L'esempio precedente è il modo migliore per aggiungere piè di pagina ed intestazioni alla tua pagina web.

È importante aggiungere piè di pagina e intestazioni usando gli elementi HTML semantici perché:

• Usare gli elementi semantici per l'intestazione (header) e il piè di pagina (footer) rende il tuo codice più leggibile.
• Fornisce una migliore esperienza utente per i visitatori del sito. Sarà più facile per i visitatori che usano uno screen reader per capire il contenuto della tua pagina web.

Dai un'occhiata a questo articolo per sapere di più sugli elementi HTML semantici.

Evita di usare <b> e <i> per il grassetto o il corsivo del testo di una pagina web

I tag <b> e <i> sono anche conosciuti come i tag per il grassetto e il corsivo. Sono entrambi usati per evidenziare le parole in un testo su una pagina web.

Non dovresti usare <b> e <i> per il grassetto e il corsivo perché non hanno un significato semantico. Usa la proprietà CSS font-weight o usa i tag <strong> e <em> invece.

Usi il tag <strong> per rendere importante un testo su una pagina web. Evidenzia o rende in grassetto un testo su una pagina web. Il tag <em> enfatizza il testo in una pagina web. Mostra anche il testo in corsivo come lo farebbe il tag <i>.

Non fare questo ⬇️:

<p><i>Programma al tuo ritmo</i><p>

<p><b>programma al tuo ritmo</b><p>

I testi visualizzati saranno in grassetto e in corsivo nell'esempio sopra. Questo non avrà nessuna rilevanza per l'utente del web che usa uno screen reader. Non ha alcun significato semantico.

Le specifiche di HTML5 dicono che i tag <b> e <i> dovrebbero essere usati come come ultima risorsa se nessun altro tag è disponibile.

Fai così invece ⬇️:

<p><strong>Programma al tuo ritmo</strong><p>

<p><em>programma al tuo ritmo</em><p>

Non posizionare elementi block-level dentro elementi inline

Gli elementi block-level iniziano in una nuova linea su una pagina web. Di default, occupano una riga intera su una pagina. Non sarai in grado di aggiungere contenuti inline a un elemento block-level senza usare CSS.

Gli elementi <p>, <h1>-<h6> e <div> sono alcuni degli esempi di un elemento block-level.

Gli elementi inline occupa l'area più piccola su una pagina web. Non iniziano su una nuova riga su una pagina web.

Gli elementi <span>, <em> e <a> sono alcuni esempi di elementi inline.

Non puoi posizionare elementi block-level all'interno di elementi inline.

Non fare questo ⬇️:

<a href="#" >

    <p> Visita freecodecamp </p>

</a>

Non puoi inserire un <p> dentro un <a> perché <p> è un elemento block-level e <a> è un elemento inline.

Fai così invece ⬇️:

<p>
Visita <a href="www.freecodecamp. org" target="_blank">FreecodeCamp</a> 
per imparare Javascript
</p>

L'esempio sopra è il modo migliore per annidare elementi inline all'interno un elemento block-level.

È importante notare che:

• L'elemento block-level non può essere annidato dentro un elemento inline.
• L'elemento inline può essere annidato dentro un elemento block-level.
• Elementi inline e block-level possono essere annidati dentro un elemento block-level.

Una nota veloce: annidare, nell'esempio precedente, significa "posizionare all'interno". Perciò, quando dico che non può essere annidato, mi riferisco al fatto che un elemento non può essere collocato all'interno di un altro.

Spero che tu abbia compreso queste tre semplici regole usate per annidare elementi.

È anche possibile convertire elementi block-level in elementi inline e viceversa, usando il CSS. Scrivi display: inline-block e display: inline per convertire un elemento da block-level a inline.

È importante ricordare che solo perché il tuo codice funziona non vuol dire che stai seguendo le pratiche migliori.

Questo è il motivo per cui ti consiglio di usare sempre il servizio di convalida del markup W3C per controllare il tuo codice.

Questo validatore controlla la validità del markup dei documenti HTML, XHTML, SMIL, MathML, ecc.

Puoi controllare il tuo codice copiando il suo URL e incollandolo sul sito o caricando il tuo file HTML.

Conclusione

Spero che questo articolo ti abbia aiutato a imparare qualcosa di nuovo sulle migliori pratiche HTML. Ho provato a includere solo i consigli più utili, così che tu possa iniziare ad usarli fin da subito!

Se hai altre domande o commenti, sentiti libero/a di contattarmi in qualsiasi momento su Twitter @cessss_ e LinkedIn: Success

Proverò a rispondere il prima possibile! Grazie per aver letto questo articolo 💙.

I pulsanti sono una parte essenziale delle pagine web. Sono utili per vari scopi, dall'inviare di informazioni e accedere a più contenuti, fino a collegare tra loro sezioni di pagine web o altri siti web.

Il linguaggio HTML fornisce vari metodi per aggiungere pulsanti al tuo progetto: puoi usare gli elementi button,  anchor o input di tipo button e submit.

In questo articolo ti guiderò all'utilizzo di questi 4 metodi, così saprai come aggiungere pulsanti al tuo sito senza difficoltà.

Come aggiungere tasti al tuo sito con il tag button

Il tag button è uno dei metodi più semplici per aggiungere pulsanti al tuo sito web. Per utilizzarlo basta aggiungere il testo che il pulsante dovrà mostrare tra i tag di apertura e chiusura, in questo modo:

<button>Sample Button</button>

Ho posizionato il pulsante al centro, utilizzando le proprietà flexbox, margin (margine), e height (altezza):

body {
        background-color: #8d8d8d;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto;
        height: 100vh;
      }

Aggiungendo queste proprietà CSS, da questo momento in poi gli elementi della pagina saranno sempre centrati.

Per poter rendere questo pulsante interattivo, bisogna aggiungere JavaScript. Attraverso le seguenti righe di codice JavaScript inline, farò in modo che il pulsante faccia comparire una finestra di dialogo nel browser, ogni qual volta verrà cliccato.

<button onclick="alert('Hello Campers')">Sample Button</button>

Come aggiungere pulsanti al tuo sito attraverso il tag anchor

I pulsanti interattivi possono essere aggiunti anche attraverso il tag anchor. Il tag anchor è utilizzato principalmente per aggiungere link ai siti web, ma utilizzando i fogli di stile CSS possiamo dargli l'aspetto di un pulsante.  

Il vantaggio di questo metodo è che possiamo collegare il pulsante ad un'altra pagina web senza utilizzare JavaScript.

Nel seguente esempio, ho creato un pulsante con il tag anchor, collegandolo al sito ufficiale di freeCodeCamp:

<a href="https://freecodecamp.org">Learn Coding for Free</a>

Nel browser avrà l'aspetto di un link:

Possiamo dargli l'aspetto di un pulsante utilizzando il CSS. Rimuoviamo la sottolineatura standard e il colore del testo, applichiamo un colore allo sfondo e al primo piano, e infine aggiungiamo le proprietà padding e border radius:

 a {
        text-decoration: none;
        border: 0.2px solid #000;
        color: #000;
        background: #e6e4e4;
        padding: 5px;
        border-radius: 1px;
      }

Con questo CSS non ho fatto altro che riprodurre l'aspetto standard dei tasti HTML.

Il tag anchor adesso ha questo aspetto:

Come aggiungere pulsanti al tuo sito con il type button del tag input

È possibile aggiungere pulsanti al tuo sito anche attraverso il type button del tag input. Si comporta esattamente come il tag button.

Il tag input è un elemento vuoto, ciò vuol dire che non ha un tag di chiusura. Quindi come si può aggiungere il testo che dovrà mostrare? Attraverso l'attributo value!

<input type="button" value="Sample Button" />

Come aggiungere pulsanti al tuo sito attraverso il type submit  del tag input

Generalmente il type submit del tag input viene utilizzato all'interno di un elemento form, in modo che i dati inseriti dall'utente vengano inviati nel momento in cui il pulsante submit viene cliccato.  

Così come il tag input di tipo button, si tratta di un elemento vuoto, quindi c'è bisogno dell'attributo value per aggiungere del testo che comunichi lo scopo del pulsante.

<input type="submit" value="Another Button" />

La differenza tra il tag input con type button e type submit sta nel fatto che il type submit, aggiunto in un elemento form, invia i dati inseriti senza alcun tipo di manipolazione attraverso JavaScript.

Ma nel caso del tag input con type button, c'è bisogno di utilizzare JavaScript per far in modo che funzioni. Infatti, utilizzando il type button all'interno di un elemento form, i dati non vengono inviati automaticamente quando il pulsante è cliccato.

Mini progetto: come creare un pulsante con effetto neon con HTML e CSS

Il tasto a luci neon è un design molto in voga, data la sua bellezza estetica. Con le informazioni apprese in questo articolo, adesso potrai crearne uno utilizzando il tag button e del CSS.

Prima di tutto, dobbiamo cambiare gli stili standard del pulsante:

<button>Neon Light</button>

  button {
        background-color: #000;
        border: .5px solid crimson;
        border-radius: 10px;
        color: #fff;
        padding: 8px;
      }

Per adesso il pulsante ha questo aspetto:

Per implementare lo stile neon, possiamo utilizzare la proprietà box-shadow, che ci permette di aggiungere diversi valori necessari per creare questo effetto.  

button {
        background-color: #000;
        border: .5px solid crimson;
        border-radius: 10px;
        color: #fff;
        padding: 8px;
        box-shadow: 0 0 30px 0 crimson,
                    0 0 30px 0 crimson,
                    0 0 10px 0 crimson inset;
      }

Valori inseriti nella proprietà box-shadow:

• il primo valore rappresenta lo spostamento sull'asse x
• il secondo valore rappresenta lo spostamento sull'asse y
• il terzo valore rappresenta il raggio di sfumatura
• il quarto valore rappresenta l'estensione del raggio di sfumatura
• il quinto valore è il colore applicato all'ombra

Mi occorrevano solo l'estensione del raggio di sfumatura e il colore, quindi ho impostato gli altri valori a zero. Successivamente, ho fatto in modo che gli ultimi valori della proprietà box-shadow venissero applicati alla parte interna al tasto, aggiungendo inset.

Adesso il tasto presenta un effetto neon:

In conclusione

Questo articolo ti ha mostrato vari metodi per aggiungere pulsanti interattivi ai tuoi siti web. In HTML e CSS, ci sono sempre modalità diverse per raggiungere lo stesso scopo: questa è una delle ragioni per cui i pulsanti si possono aggiungere perfino attraverso il tag anchor.

È possibile anche creare un tasto che si comporta come un link, aggiungendo un tag anchor attorno ad un tag button.

Puoi anche aggiungere tasti attraverso qualunque altro tag, come ad esempio div, span e anche il tag p. Ma è meglio non utilizzare questi metodi per motivi di accessibilità, e per non danneggiare la SEO del tuo sito web.

Grazie per aver letto questo articolo.

Usiamo continuamente le liste nella nostra vita quotidiana.

Le creiamo per strutturare e organizzare le nostre giornate, e spesso le utilizziamo per fare elenchi di cose da fare. Le usiamo nelle ricette per non dimenticare nessun passaggio e quando vogliamo montare un mobile seguendo le istruzioni.

Questi sono solo alcuni esempi di come le liste ci aiutano a mantenere tutto in ordine.

Perciò, non sorprende che siano una funzionalità così comune e utile anche nello sviluppo web front-end.

In HTML, esistono tre tipi di liste: liste non ordinate, liste ordinate e liste descrittive.

In questo articolo, vedremo come creare una lista non ordinata. Scopriremo anche come personalizzare lo stile predefinito utilizzando poche righe di CSS.

Iniziamo!

Come creare una lista non ordinata in HTML

Le liste non ordinate in HTML sono raccolte di elementi che non richiedono un ordine specifico. Generalmente, si usano dei semplici punti elenco per visualizzare questi elementi.

Per creare una lista non ordinata, utilizziamo il tag ul, mentre per elencare ciascun elemento all'interno della lista usiamo il tag li.

Il tag <ul>, che sta per "unordered list" (lista non ordinata), è il genitore dei tag <li>. Questo significa che ogni <li> è un "figlio" di <ul>.

<ul>
    <li>Elemento</li>
    <li>Altro elemento</li>
    <li>Ancora un altro elemento</li>
</ul>

Risultato:

Questo tipo di elenco viene chiamato "puntato" perché lo stile predefinito prevede che ogni elemento della lista sia accompagnato da un punto.

Un dettaglio importante da ricordare è che <li> è l'unico figlio diretto di <ul>.

Ciò significa che, dopo aver aperto e chiuso i tag <ul>, il primo tag all'interno deve essere un <li>.

Ad esempio, non fare così:

<ul>
    <a href="#">Sono un link a qualcosa sul web!</a>
</ul>

Se desideri che gli elementi della tua lista non ordinata siano dei link, fai invece così:

<ul>
    <li>
        <a href="#">Link a qualcosa sul web!</a>
    </li>
</ul>

In questo caso, il tag <a> è figlio di <li> e, quindi, "nipote" di <ul>.

Come creare una lista annidata non ordinata

Una lista annidata è semplicemente una lista all'interno di un'altra lista.

Puoi creare una lista annidata non ordinata, una lista annidata ordinata o persino una lista annidata ordinata all'interno di una non ordinata.

Ricorda sempre che l'unico figlio diretto del tag <ul> deve essere un <li>.

Ecco come puoi creare una lista annidata non ordinata:

<ul><!-- inizio della lista principale -->
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript
        <ul><!-- inizio della lista annidata -->
            <li>Angular</li>
            <li>React</li>
            <li>Vue</li>
        </ul><!-- fine della lista annidata -->
    </li>
</ul><!-- fine della lista principale -->

Risultato:

Abbiamo creato una lista annidata non ordinata sotto l'elemento della lista principale scelto.

Come puoi vedere nell'esempio, la lista annidata è stata creata all'interno di un elemento della lista principale, che in questo caso è "JavaScript".

Assicurati sempre di aprire e chiudere correttamente i tag, perché può diventare complicato rapidamente.

Un buon consiglio per evitare confusione è aggiungere commenti al codice. E ricorda: usa le liste annidate solo quando ha senso dal punto di vista semantico.

Come personalizzare lo stile predefinito delle liste non ordinate

Come abbiamo visto, lo stile predefinito delle liste non ordinate prevede dei punti elenco accanto a ciascun elemento.

Ma puoi modificare questo stile utilizzando la proprietà list-style-type nel file CSS separato.

Il valore predefinito di questa proprietà è disc.

Come definire lo stile degli elementi della lista usando dei cerchi

Puoi cambiare i punti pieni in cerchi (punti vuoti) utilizzando il seguente codice:

<ul>
    <li>Elemento</li>
    <li>Altro Elemento</li>
    <li>Un Altro Elemento</li>
</ul>

ul {
    list-style-type: circle;
}

Output:

Come definire lo stile degli elementi della lista usando dei quadrati

Puoi anche trasformare i punti in quadrati:

<ul>
    <li>Elemento</li>
    <li>Altro Elemento</li>
    <li>Un Altro Elemento</li>
</ul>

ul {
    list-style-type: square;
}

Output:

Come rimuovere lo stile dagli elementi della lista

È possibile anche rimuovere completamente lo stile:

<ul>
    <li>Elemento</li>
    <li>Altro Elemento</li>
    <li>Un Altro Elemento</li>
</ul>

ul {
    list-style-type: none;
}

Output:

Questa tecnica è particolarmente utile quando vuoi disporre gli elementi della lista in orizzontale, magari per creare una barra di navigazione. Per fare questo, sarà necessario aggiungere qualche regola CSS in più.

Le liste sono elementi di blocco, ma cambiando gli elementi della lista in inline e utilizzando la regola Flexbox, puoi far sì che gli elementi si dispongano uno accanto all'altro.

Con lo stesso HTML di prima:

<ul>
    <li>Elemento</li>
    <li>Altro Elemento</li>
    <li>Un Altro Elemento</li>
</ul>

E aggiungendo qualche regola CSS extra:

ul {
    list-style-type: square;
    display:flex;
}

li{
    display:block;
    margin:10px;
}

Puoi disporre gli elementi della lista in orizzontale:

Come definire lo stile degli elementi della lista usando le emoji

Le possibilità di stile per gli elementi di una lista non ordinata sono abbastanza limitate.

Per rendere le liste più divertenti e originali, puoi aggiungere delle emoji utilizzando il pseudo-elemento ::before in CSS.

Ecco il codice HTML:

<ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ul>

Il primo passo è rimuovere il punto elenco predefinito aggiungendo la regola list-style-type: none; al tag <ul> e togliendo il padding e il margin predefiniti.

Successivamente, puoi aggiungere un'emoji a ciascun elemento li della lista tramite il pseudo-elemento ::before.  Puoi scegliere tra una lista completa di emoji in questo articolo.

ul {
    list-style-type: none;
    padding:0;
    margin:0;
}

li::before{
    content: "💻";
}

Output:

Per dare a ciascun elemento della lista una diversa emoji, utilizza il selettore :nth-child() sull'elemento della lista prima del pseudo-elemento ::before:

ul {
    list-style-type: none;
    padding:0;
    margin:0;
}

/*primo elemento della lista*/
li:nth-child(1)::before{
    content: "✍️";
}

/*secondo elemento della lista*/
li:nth-child(2)::before{
    content: "🎨";
}

/*terzo elemento della lista*/
li:nth-child(3)::before{
    content: "🔥";
}

Output:

Conclusioni

Ed eccoci qua! Ora sai come creare liste non ordinate in HTML e hai visto alcuni modi per impostarne lo stile.

Per continuare il tuo percorso di apprendimento HTML, guarda i seguenti video sul canale YouTube di freeCodeCamp:

• HTML Tutorial - Website Crash Course for Beginners (contenuto in inglese)
• HTML Full Course - Build a Website Tutorial  (contenuto in inglese)

freeCodeCamp offre anche una certificazione gratuita basata su progetti su Responsive Web Design.

È ideale per principianti assoluti e non richiede conoscenze precedenti. Inizierai dai fondamenti e costruirai le tue competenze man mano che prosegui. Alla fine, completerai cinque progetti.

Grazie per aver letto e buon proseguimento nello studio :)

Nei tuoi documenti HTML, spesso hai necessità di creare una lista di elementi. A questo scopo puoi usare gli elenchi puntati.

Puoi mostrare gli elenchi puntati con il relativo carattere (o entità) Unicode.

In questo articolo, ti mostrerò le entità Unicode e HTML utili a mostrare gli elenchi puntati in una pagina web.

Verso la fine di questo articolo, ti mostrerò inoltre le combinazioni a cinque caratteri che ti permettono di visualizzare il simbolo del punto.

Le entità Unicode e HTML per gli elenchi puntati

Il carattere Unicode per mostrare il simbolo del punto, o punto elenco, è U+2022.

Tuttavia, per usare questo carattere Unicode correttamente, sostituisci U+ con una "e" commerciale (&), cancelletto (#) e x. Quindi digita il numero 2022 ed aggiungi un punto e virgola. In questo modo, diventa •.

Apparirà così:

<h1>Languages of the web</h1>
<h3>&#x2022; HTML</h3>
<h3>&#x2022; CSS</h3>
<h3>&#x2022; JavaScript</h3>
<h3>&#x2022; PHP</h3>

Oltre al carattere Unicode • puoi anche usare le entità HTML  • e • per mostrare elenchi puntati o simboli punto elenco sulla pagina web.

<h1>Languages of the web</h1>
<h3>&#8226; HTML</h3>
<h3>&bull; CSS</h3>
<h3>&#8226; JavaScript</h3>
<h3>&bull; PHP</h3>

L'output rimane lo stesso:

Combinazione di tasti rapida per digitare il simbolo del punto

Per digitare il simbolo del punto sulla tua tastiera, attiva il tastierino numerico premendo BlocNum, tieni premuto Alt e digita 0, 1, 4, e 9  in successione.

Se non digiti i numeri con il tastierino numerico, il punto non apparirà.

Grazie per aver letto l'articolo!

I form (moduli) sono una delle parti più importanti del web. Senza di essi, non ci sarebbe un modo facile per raccogliere dati, cercare risorse o effettuare un'iscrizione per ricevere informazioni preziose.

Puoi inserire i form nelle pagine web con l'elemento HTML form. All'interno di questo elemento possono essere inseriti parecchi elementi input, noti anche come controlli del form.

In questo tutorial, esploreremo l'elemento HTML form, i vari tipi di elementi input che può contenere e come creare un pulsante di invio con il quale inviare i dati.

Alla fine, conoscerai il funzionamento dei form e sarai in grado di realizzarli con sicurezza.

Sintassi Base per un Form HTML

<form action="mywebsite.com" method="POST">
    <!--Input di qualsiasi tipo ed elementi textarea vanno qui-->
</form>

Tipi di Input per i Form HTML

Si utilizza il tag <input> per creare diversi controlli in un form HTML. È un elemento in linea e riceve attributi come type, name, minlength, maxlength, placeholder e così via. Ciascuno di essi hanno specifici valori che possono ricevere.

L'attributo placeholder è importante in quanto aiuta l'utente a capire a cosa serve il campo di input prima che possa digitare qualcosa.

Ci sono 20 tipi di input diversi, e li esamineremo uno ad uno.

Tipo Text

Questo tipo di input ottiene il valore di  “text” e crea una riga singola di testo da inserire.

<input type="text" placeholder="Enter name" />

Un input di tipo text viene presentato come nella videata seguente:

Tipo Password

Come suggerisce il nome, questo tipo di input si utilizza per richiedere password. Rende automaticamente invisibile all'utente quanto sta digitando, a meno che l'elemento non venga manipolato tramite JavaScript.

<input type="password" placeholder="Enter your password" />

Tipo Email

Un input di tipo email definisce un campo per digitare un indirizzo email. L'input viene automaticamente validato per verificare la conformità con la sintassi di un indirizzo email.

<input type="email" placeholder="Enter your email" />

Tipo Number

Questo tipo consente all'utente di inserire solamente numeri.

<input type="number" placeholder="Enter a number" />

Tipo Radio

Talvolta gli utenti devono effettuare una scelta tra diverse opzioni. Questo tipo di input consente all'utente di scegliere un elemento tra quelli proposti.

 <input type="radio" />

Tipo Checkbox

Con l'input di tipo radio gli utenti possono effettuare una scelta tra le opzioni proposte, ma se volessi rendere possibili tante scelte contemporaneamente? Ecco a cosa serve un input di tipo checkbox.

<input type="checkbox" />

Tipo Submit

Questo tipo si usa per aggiungere un pulsante di invio a un form. Quando l'utente fa click sul pulsante, il form viene inviato. Riceve un attributo value che definisce il testo che appare all'interno del pulsante.

<input type="submit" value="Enter to Win" />

Tipo Button

Questo tipo di input crea un pulsante, che può essere manipolato con JavaScript con un event listener per l'evento onClick. Crea un pulsante come il tipo submit, ma il valore del testo del pulsante deve essere specificato.

<input type="button" value="Submit" />

Tipo File

Definisce un campo per l'invio di uno o più file. Quando un utente fa click su questo controllo, gli viene richiesto di scegliere il file da inserire, che potrebbe essere un'immagine, un PDF e così via.

<input type="file" />

Ecco come viene presentato un input di tipo file:

Tipo Color

Questo tipo di input è stato introdotto con HTML5. Con questo l'utente può scegliere un colore. Il nero (codice esadecimale #000000) è il valore predefinito, ma può essere modificato inserendo nel parametro value il colore desiderato in formato esadecimale.

Molti sviluppatori hanno usato questo elemento per poter scegliere le varie tonalità di colore nei formati RGB, HSL e alfanumerico

<input type="color" />

Ecco come viene presentato questo tipo di input, una volta che l'utente ha fatto click sull'elemento:

Tipo Search

Questo tipo di input definisce un campo di testo, proprio come il tipo text. Ma ha il solo scopo di consentire all'utente di effettuare una ricerca. Un pulsante di cancellazione (una x) all'interno dell'elemento appare una volta che si è iniziato a digitare.

<input type="search" />

Tipo URL

Quando viene impostato un elemento input con questo attributo, viene mostrato un campo che può essere usato per digitare un URL.

<input type="url" />

Tipo Tel

Questo tipo consente di ottenere numeri di telefono dagli utenti.

<input type="tel" />

Tipo Date

Potresti esserti registrato in un sito web che richiede l'inserimento di una data per un certo evento. Questo sito probabilmente usa un input di questo tipo.

<input type="date" />

Ecco come viene presentato questo tipo di input:

Tipo Datetime-local

Funziona come il tipo date, ma consente all'utente anche di scegliere un orario oltre a una data.

<input type="datetime-local" />

Tipo Week

Questo tipo consente all'utente di selezionare una particolare settimana in un anno.

<input type="week" />

Tipo Month

Con questo tipo di input vengono presentati i mesi, affinché l'utente possa effettuare una scelta facendo click su uno di essi.

<input type="month" />

Textarea

Ci sono situazioni nelle quali un utente deve riempire più righe di testo, pertanto il tipo di input text non sarebbe adatto, in quanto consente di riempire solo una riga di testo.

textarea consente all'utente di inserire testo su più righe. Tramite gli attributi cols e rows consente di impostare rispettivamente il numero di colonne e di righe per l'elemento.

<textarea cols="50" rows="20"></textarea>

Select

È come avere le funzionalità di un elemento di tipo radio e di tipo checkbox assieme. Viene inserito nel form tramite due elementi, l'elemento select propriamente detto e, al suo interno, tanti elementi option quante sono le opzioni da offrire.

Nella modalità predefinita, l'utente può scegliere solo una opzione ma con l'attributo multiple è possibile selezionare più opzioni.

<select>
      <option value="HTML">Select a Language</option>
      <option value="HTML">HTML</option>
      <option value="CSS">CSS</option>
      <option value="JavaScript">JavaScript</option>
      <option value="React">React</option>
</select>

Come Abbinare un Etichetta agli Elementi Input

Assegnare etichette ai controlli di un form con l'elemento label è importante. Quando sono correttamente abbinate al relativo campo di input tramite il loro attributo for, che deve essere valorizzato con il contenuto dell'attributo id dell'elemento input relativo, facilitano anche l'utente in quando può cliccare sull'etichetta stessa per accedere al controllo input relativo.

<label for="name">Name</label>
<input type="text" id="name" /> <br />
<label for="check">Agree with terms</label>
<input type="checkbox" id="check" />

Come Funzionano i Form HTML

Quando un utente riempie i campi di un form, poi fa click sul pulsante di invio, manda i dati contenuti nei controlli del form al server tramite una richiesta con un metodo HTTP GET o POST .

Quindi come viene specificato il server? L'elemento form riceve un attributo action, che deve avere come valore l'URL del server al quale inviare i dati. Riceve anche un attributo method, che indica il metodo HTTP usato per veicolare i valori al server specificato.

Questo metodo potrebbe essere  GET o POST. Con il metodo GET i valori digitati dall'utente sono visibili nella stringa dell'URL quando viene inviato. Con il metodo POST i valori vengono inviati nel corpo della richiesta, di conseguenza non sono visibili nell'URL.

Se non viene usato l'attributo method, viene utilizzato il metodo GET come valore predefinito.

Quindi quando dovresti usare il metodo GET o POST? Usa GET per inviare dati non sensibili o per ottenere dati da un server (ad esempio durante una ricerca). Usa POST quando invii file o dati sensibili.

Mini Progetto: Creare un Form di Contatto di Base

Utilizziamo quanto appreso sugli elementi di un form per creare un semplice form di contatto. Introdurrò anche alcuni concetti ulteriori mentre lo sviluppiamo.

Ecco il Codice HTML:

<form action="example-server.com">
      <fieldset>
        <legend>Contact me</legend>
        <div class="form-control">
          <label for="name">Name</label>
          <input type="name" id="name" placeholder="Enter your name" required />
        </div>

        <div class="form-control">
          <label for="email">Email</label>
          <input
            type="email"
            id="email"
            placeholder="Enter your email"
            required
          />
        </div>

        <div class="form-control">
          <label for="message">Message</label>
          <textarea
            id="message"
            cols="30"
            rows="10"
            placeholder="Enter your message"
            required
          ></textarea>
        </div>
        <input type="submit" value="Send" class="submit-btn" />
      </fieldset>
</form>

Cosa succede in questo codice HTML?

Innanzitutto un elemento form racchiude tutti gli altri elementi. L'attributo action è impostato su “example-server.com”, un server fittizio dove saranno ricevuti i dati.

Dopo l'elemento form, ogni altro elemento è racchiuso tra un elemento fieldset al cui interno si trova un tag legend.

Usiamo l'elemento fieldset per raggruppare input correlati, il tag legend contiene un'intestazione che descrive quali dati verranno raccolti dalla sezione.

Gli elementi di input name, email e textarea sono tutti all'interno di un elemento div con la classe form-control, in modo che si comportino come un elemento di tipo blocco, per facilitare l'applicazione di uno stile CSS.

Sono anche validati con l'attributo required, pertanto il form non viene inviato se i campi caratterizzati con quell'attributo sono vuoti.

Dopo tutto questo, il form apparirà come nella videata seguente:

Molto brutto, non è vero? Dobbiamo applicare qualche stile al form!

Ecco il codice CSS:

body {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    font-family: cursive;
  }

 input,
    textarea {
    width: 100%;
    padding: 5px;
    outline: none;
  }

  label {
    line-height: 1.9rem;
  }

  input[type="submit"] {
   transform: translate(2.2%);
   padding: 3px;
   margin-top: 0.6rem;
   font-family: cursive;
   font-weight: bold;
  }

 fieldset {
   padding: 20px 40px;
 }

Cosa fa questo codice CSS?

Centriamo tutto orizzontalmente all'interno del tag body con Flexbox, e verticalmente dando un'altezza di viewport pari al 100%. Usiamo una famiglia di caratteri corsivi.

Diamo agli elementi di input e al textarea una larghezza del 100% in modo che si espandano orizzontalmente. Le etichette hanno un'altezza di riga minima di 1.9rem (30.4px), in modo che non siano troppo vicine ai loro rispettivi elementi input.

Abbiamo disegnato in modo specifico il pulsante (pulsante di tipo input) con la proprietà transform per spingerlo al centro, perché era un po' fuori centro. Gli abbiamo dato una spaziatura all'interno di 3px per avere più spazio attorno ad esso. Abbiamo quindi selezionato una famiglia di caratteri corsivi in grassetto.

Visto che il pulsante era troppo vicino all'elemento textarea, abbiamo impostato un margine superiore di 0.6rem per portarlo un poco più in basso.

All'elemento fieldset abbiamo applicato una spaziatura interna di 20px in alto e in basso e 40px a destra e sinistra per distanziarlo dal bordo che crea attorno all'elemento form nel quale è contenuto.

Alla fine di tutto questo, abbiamo questo bel form:

Conclusione

Spero che questo tutorial ti abbia aiutato a capire come funzionano i form. Ora dovresti avere le conoscenze necessarie per integrare i form nei tuoi siti web, in modo da poter iniziare a raccogliere dati.

Grazie per la lettura e buona programmazione.

In questo articolo, andremo a esplorare tre modi diversi per creare un pulsante HTML che funge da link.

Ecco i tre metodi che tratteremo:

1. Applicare uno stile a un link in modo che sembri un pulsante
2. Usare gli attributi  action e formaction in un form
3. Usare l'evento onclick di JavaScript

Prima però vediamo il metodo sbagliato.

Perché usare l'elemento a non funziona?

Il frammento di codice qui sotto rappresenta un pulsante che, quando cliccato, porta al sito di freeCodeCamp.

  <a href="https://www.freecodecamp.org/">
    <button>freeCodeCamp</button>
  </a> 

Tuttavia questo non è HTML valido

L'elemento a può essere utilizzato per racchiudere interi paragrafi, liste, tabelle e così via, anche intere sezioni, fintanto che non ci sia contenuto interattivo all'interno (vale a dire pulsanti o altri link). - (Fonte: Web Hypertext Application Technology Working Group)

Questa è considerata una cattiva pratica in quanto non rende chiara l'intenzione all'utente.

I link sono concepiti per portare l'utente in un'altra parte della pagina web oppure in un sito esterno, mentre i pulsanti sono concepiti per eseguire un'azione specifica come l'invio di un form.

Quando annidi l'uno all'interno dell'altro, fai sì che l'azione che vuoi eseguire non sia chiara. Ecco perché è meglio non annidare un pulsante all'interno di un tag a.

Come applicare uno stile CSS in modo che un link sembri un pulsante

Il primo metodo non usa button in alcun modo. Possiamo applicare uno stile tramite CSS in modo che un tag a sembri un pulsante.

Questo è lo stile predefinito per un tag a.

Possiamo aggiungere una classe al tag a, poi utilizzare il selettore di classe per applicare lo stile all'elemento.

  <a class="fcc-btn" href="https://www.freecodecamp.org/">freeCodeCamp</a>  

Se vuoi che il link si apra in un'altra pagina, puoi aggiungere l'attributo target="_blank" in questo modo:

  <a target="_blank" class="fcc-btn" href="https://www.freecodecamp.org/">freeCodeCamp</a>  

Poi puoi aggiungere un colore di sfondo e cambiare il colore del font, così:

.fcc-btn {
  background-color: #199319;
  color: white;
}

Il passo successivo sarà quello di aggiungere un po' di riempimento attorno al testo:

.fcc-btn {
  background-color: #199319;
  color: white;
  padding: 15px 25px;
}

Infine, possiamo usare la proprietà text-decoration per eliminare la riga di sottolineatura dal testo:

.fcc-btn {
  background-color: #199319;
  color: white;
  padding: 15px 25px;
  text-decoration: none;
}

Ora abbiamo ottenuto un tag a che sembra un pulsante.

Possiamo anche rendere questo "pulsante" un po' più interattivo modificando il colore di sfondo quando il mouse è situato all'interno dell'elemento.

.fcc-btn:hover {
  background-color: #223094;
}

Potremmo anche complicare il design, ma questo è solamente per mostrarti le basi di come fare in modo che un link sembri un pulsante tramite uno stile CSS.

Potresti anche scegliere di usare una libreria CSS come Bootstrap.

  <a class="btn btn-primary" href="https://www.freecodecamp.org/">freeCodeCamp</a>  

Se il tuo progetto già include Bootstrap, allora puoi usare i suoi stili integrati per i pulsanti. Ma non importerei Bootstrap solo per applicare uno stile a un link.

Quali sono i problemi con questo metodo?

C'è un po' di discussione sul fatto che sia un buona pratica applicare uno stile ai link in modo che sembrino pulsanti. Alcuni sostengono che i link dovrebbero sempre sembrare link e i bottoni dovrebbero sempre sembrare bottoni.

Nel libro online Resilient Web Design, Jeremy Keith afferma che

un materiale non dovrebbe essere usato come sostituto di un altro, altrimenti il risultato finale sarà ingannevole.

Perché mi sono presa la briga di citare questa discussione?

Il mio scopo non è di farti scegliere da che parte stare. Voglio solo che tu sia conscio che è in corso un dibattito.

Come usare gli attributi action e formaction per creare un pulsante in un form

Come usare l'attributo action

Un'altra alternativa è annidare il pulsante all'interno di un form e usare l'attributo action.

Esempio con il tag input:

  <form action="https://www.freecodecamp.org/">
    <input type="submit" value="freeCodeCamp">
  </form>

Esempio con il tag button:

  <form action="https://www.freecodecamp.org/">
    <button type="submit">freeCodeCamp</button>
  </form>

Questo è lo stile predefinito applicato al pulsante.

Potremmo usare gli stessi stili usati in precedenza, ma dovremmo aggiungere la proprietà cursor: pointer ed eliminare il contorno (border: none), in questo modo:

.fcc-btn {
  background-color: #199319;
  color: white;
  padding: 15px 25px;
  text-decoration: none;
  cursor: pointer;
  border: none;
}

Come usare l'attributo formaction

In modo simile al metodo precedente, possiamo creare un form e usare l'attributo formaction.

Esempio con il tag input:

  <form>
    <input type="submit" formaction="https://www.freecodecamp.org/" value="freeCodeCamp">
  </form>

Esempio con il tag button:

  <form>
    <button type="submit" formaction="https://www.freecodecamp.org/">freeCodeCamp</button>
  </form>

Puoi usare l'attributo formaction solo con i tag input e button che abbiano l'attributo type="image" oppure type="submit".

È semanticamente corretto?

Sebbene questa sembri una soluzione che funziona, ci si pone la domanda se sia semanticamente corretta.

Stiamo usando i tag di un form che in realtà non funziona come un vero form. Lo scopo di un form è di raccogliere e inviare dati, ma stiamo usando il pulsante di tipo submit per mandare l'utente in un'altra pagina.

Quando si parla di semantica, questo non è un buon modo per usare i tag form.

Effetti collaterali dell'uso degli attributi action e formaction

Quando fai click sul pulsante, talvolta accadono cose interessanti con l'URL. L'URL ora ha un punto interrogativo alla fine.

La ragione di questo è che il form sta usando il metodo GET. Potresti passare al metodo POST, ma potrebbero esserci casi in cui anche questa soluzione non è l'ideale.

  <form method="POST" action="https://www.freecodecamp.org/">
    <button type="submit">freeCodeCamp</button>
  </form>

Anche se questo metodo è HTML valido, contiene anche un effetto collaterale indesiderato.

Come usare l'evento JavaScript onclick per creare un pulsante

Negli approcci precedenti, abbiamo adottato soluzioni HTML e CSS. Possiamo anche usare JavaScript per ottenere lo stesso risultato.

Esempio con il tag input:

 <form>
    <input type="button" onclick="window.location.href='https://www.freecodecamp.org/';" value="freeCodeCamp" />
 </form>

Esempio con il tag button:

<button onclick="window.location.href='https://www.freecodecamp.org/';">freeCodeCamp</button>  

Window.location.href rappresenta la posizione di un URL specifico, in questo caso ritorna https://www.freecodecamp.org/.

Inconvenienti di questo metodo

Sebbene questa soluzione funzioni, ci sono alcuni potenziali problemi da considerare.

Se l'utente ha deciso di disabilitare JavaScript nel suo browser, chiaramente questa soluzione non funzionerà. Sfortunatamente, ciò potrebbe portare a una scarsa esperienza utente.

Conclusione

Lo scopo di questo articolo era di mostrarti tre modi diversi per fare in modo che i pulsanti agiscano come link.

Il primo metodo è progettare un link in modo che sembri un pulsante. Abbiamo anche considerato che modificare le sembianze di un link in modo che sembri un altro elemento può essere una buona idea o meno.

Il secondo metodo è usare gli attributi del form action e formaction, ma questa soluzione ha qualche effetto collaterale con l'URL e non è semanticamente corretta.

Il terzo metodo usa l'evento JavaScript onclick e Window.location.href. Ma abbiamo imparato che questo anche metodo potrebbe non funzionare se gli utenti decidono di disabilitare JavaScript nei loro browser.

Come sviluppatore, è davvero importante esaminare i pro e contro di un particolare metodo prima di adottarlo nel tuo progetto.

Spero tu abbia apprezzato questo articolo e imparato qualcosa di nuovo.

Buona programmazione!

HTML, o Hypertext Markup Language, è un linguaggio di markup per il web che definisce la struttura delle pagine web.

È uno degli elementi costitutivi di ogni sito web, ed è quindi un linguaggio fondamentale da imparare per intraprendere una carriera nello sviluppo web.

In questo articolo, ti illustrerò in dettaglio di cosa tratta l'HTML e come viene impiegato sulle pagine web; inoltre, toccheremo anche una parte davvero interessante dell'HTML: l'HTML semantico.

Cos'è l'HTML?

Per capire pienamente il significato di "HTML", diamo un'occhiata a ogni parola che compone l'acronimo:

Hypertext: testo (spesso anche con incorporamenti come immagini) organizzato in modo da collegare elementi correlati

Markup: una guida di stile per la composizione di qualsiasi cosa da stampare in formato cartaceo o digitale

Language: una lingua che un computer comprende e utilizza per interpretare i comandi.

L'HTML determina la struttura delle pagine web. Ma questa struttura da sola non è sufficiente per rendere una pagina web graficamente piacevole e interattiva. Quindi è necessario usare altre tecnologie, come CSS e JavaScript, rispettivamente per agire sull'estetica dell'HTML e per aggiungere interattività.

Per farti capire meglio, suddividiamo le tre tecnologie - HTML, CSS e JavaScript - in questo modo: sono come parti del  corpo umano.

• HTML è lo scheletro,
• CSS è la pelle,
• e JavaScript è il sistema circolatorio, digestivo e respiratorio che dà vita alla struttura e alla pelle.

Puoi anche guardare HTML, CSS e JavaScript in questo modo: HTML è la struttura di una casa, CSS è l'arredamento interno ed esterno, mentre JavaScript comprende l'elettricità, il sistema idrico e molte altre caratteristiche funzionali che rendono la casa vivibile.

Tag HTML

Poiché l'HTML definisce il markup per una particolare pagina web, è desiderabile che il testo, le immagini o altri contenuti incorporati appaiano in determinati modi.

Ad esempio, potresti volere che un testo sia grande, altro testo piccolo e dell'altro in grassetto, corsivo o come un punto di un elenco.

L'HTML ha dei "tag" che ti consentono di farlo. Ci sono tag per creare: intestazioni, paragrafi, parole in grassetto, parole in corsivo e altro ancora.

L'immagine seguente descrive l'anatomia di un tag HTML:

Elementi HTML

Un elemento è costituito dal tag di apertura, un carattere, il contenuto e un tag di chiusura. Alcuni elementi sono vuoti, ovvero non hanno un tag di chiusura ma hanno invece una fonte o un collegamento al contenuto da incorporare nella pagina web.

Un esempio di elemento vuoto è <img>, usato per incorporare immagini in una pagina web.

Gli elementi HTML sono spesso usati in modo intercambiabile con i tag, ma c'è una piccola differenza tra i due. Un elemento è la combinazione del tag di apertura e di chiusura e quindi del contenuto tra di essi.

Ho creato un'altra immagine per aiutarti a visualizzare l'anatomia di un elemento HTML:

Attributi HTML

I tag HTML accettano anche quelli che vengono chiamati attributi. Questi attributi vengono inseriti nel tag di apertura e vanno da style e id fino a class. Assumono valori, che trasmettono più informazioni sull'elemento e aiutano a fare cose come definire lo stile e la manipolazione con JavaScript.

Nell'infografica qui sotto, il tag di apertura contiene un attributo class con un valore di “text”. Questo può essere utilizzato per definire lo stile dell'elemento o selezionarlo con JavaScript per l'interattività.

Ecco l'anatomia di una pagina HTML di base:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Definition of HTML</title>
  </head>
  <body>
    <!--Il contenuto della pagina, come testo e immagini, va qui-->
  </body>
</html>

Diamo un'occhiata alle parti importanti del codice qui:

<!Doctype html>: specifica che stiamo usando HTML5 in questo codice. Prima dell'introduzione di HTML5, dovevi indicare esplicitamente quale versione di HTML stavi usando con il tag <!Doctype>. Ad esempio, HTML4.0, 3.2 e così via. Ma ora non ne abbiamo più bisogno. Quando "html" è scritto nel codice, il browser presuppone automaticamente che tu stia usando HTML5.

<html></html>: il "root", o elemento di primo livello di ogni documento HTML. Ogni altro elemento deve essere racchiuso al suo interno.

<head></head>: una delle parti più cruciali del documento HTML. I web crawler guardano all'interno dei tag head per ottenere informazioni importanti sulla pagina. Contiene informazioni come il titolo della pagina, fogli di stile, meta dati per SEO e molto altro.

<meta />: questo è un elemento vuoto che trasmette meta-informazioni sulla pagina. Tali informazioni possono includere l'autore, il tipo di codifica utilizzato (quasi sempre UTF-8), la responsività, la compatibilità e molto altro. I web crawler guardano usano i tag meta per ottenere informazioni sulla pagina web, che svolgerà un ruolo cruciale nella SEO.

<title></title>: definisce il titolo della pagina web. Viene sempre visualizzato nella scheda del browser.

<body></body>: tutto il contenuto del documento HTML si trova all'interno del tag body. Può esserci un solo tag <body> su tutta la pagina.

Cos'è l'HTML semantico?

HTML semantico significa che i tag HTML trasmettono il significato effettivo di ciò per cui sono utilizzati.

La semantica è stata parte integrante dell'HTML sin dal suo inizio nei primi anni '90. Ma non ha mai acquisito particolare rilevanza fino alla fine degli anni '90, quando il CSS ha iniziato a funzionare nella maggior parte dei browser.

Con l'HTML semantico, tag semanticamente neutri come <div> e <span> vengono accantonati poiché vengono preferiti tag semanticamente più descrittivi come <header>, <nav>, <main>, <section>, <footer>, <article>.

Un notevole vantaggio dell'utilizzo dei tag semantici è che i web crawler sono in grado di indicizzare facilmente la pagina web o il sito web, migliorando in cambio la SEO.

Inoltre, un sito web che utilizza la semantica diventa più informativo, adattabile e accessibile a coloro che utilizzano lettori di schermo o tecnologie assistive per accedere al web.

Tag semantici importanti e cosa fanno

Diamo un'occhiata ad alcuni dei tag HTML semantici più comunemente usati:

<header>: l'elemento <header> definisce la sezione introduttiva di una pagina web. Contiene elementi come il logo, la navigazione, il selettore di temi e la barra di ricerca.

<nav>: l'elemento<nav> specifica gli elementi di navigazione della pagina come home, contatti, informazioni, FAQ e così via.

<main>: l'elemento <main> è trattato convenzionalmente come l'immediato discendente del tag. Contiene le sezioni principali del documento HTML oltre a <header> e <footer>. Idealmente, dovrebbe essercene solo uno nell'intero documento HTML.

<section>: l'elemento <section> definisce una particolare sezione della pagina web. Questa può essere la sezione vetrina, la sezione informazioni, la sezione contatti o altro. Puoi utilizzare numerose sezioni in un singolo documento HTML.

<article>: l'elemento <article> rappresenta una certa parte di una pagina web che trasmette alcune informazioni particolari. Tali informazioni potrebbero essere una combinazione di testo, immagini, video e contenuti incorporati. Considera questo elemento come un post autonomo di un blog in una pagina contenente estratti di altri post di blog.

<aside>: come suggerisce il nome, rappresenta una barra laterale su una pagina web. Di solito è una parte della pagina web che non è direttamente correlata al contenuto principale.

<footer>: l'elemento<footer> ospita elementi come collegamenti rapidi, informazioni sul copyright o qualsiasi altro dato relativo all'intero sito web o pagina web.

Inoltre, poiché gli elementi semantici trasmettono il significato effettivo di ciò fa un particolare contenuto (come nav per la navigazione, aside per una barra laterale e così via), questi elementi non vengono posizionati automaticamente dove dovrebbero essere. La loro posizione deve essere stabilita nel CSS.

Un documento HTML semantico super semplice ha questo aspetto:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Definition of HTML</title>
  </head>

  <body>
    <header>
      <h1 class="logo">LOGO</h1>
      <nav>
        <ul>
          <li>Home</li>
          <li>About</li>
          <li>Contact</li>
          <li>FAQs</li>
        </ul>
      </nav>
    </header>
    <main>
      <section class="about-me">
        <article>
          Lorem ipsum dolor, sit amet consectetur adipisicing elit. Optio magni
          est asperiores nemo, adipisci minus itaque quam, rem libero aliquam
          nesciunt, nisi inventore assumenda earum repellat labore ratione
          architecto eos quis. Soluta mollitia cupiditate dolorem. Consequatur a
          soluta laudantium nihil. Molestias, officiis ut! Nobis adipisci
          voluptatem quam at officia beatae!
        </article>
      </section>
      <section class="contact-me">
        You can find me on
        <a href="https://twitter.com/koladechris">Twitter</a> You can find me on
        <a href="https://Instagram.com/koladechris">Instagram</a>
      </section>
      <aside class="address">My Address</aside>
    </main>
    <footer>© 2020 All Rights Reserved</footer>
  </body>
</html>

Ecco come appare nel browser:

Puoi notare che il contenuto all'interno del tag <aside> non è nella barra laterale e il contenuto all'interno del  tag <nav> non è automaticamente disponibile come barra di navigazione. Questo è il motivo per cui devi dare le istruzioni per farli apparire correttamente all'interno del CSS.

Conclusione

Spero che questo articolo ti abbia aiutato a imparare le basi dell'HTML e a cosa serve. Ora puoi iniziare a imparare tecnologie più avanzate come CSS e JavaScript, e quindi iniziare a formare le conoscenze necessarie per avere una solida carriera nello sviluppo web.

Grazie mille per aver letto e buon divertimento.

Quando programmi in HTML e scrivi del testo, sicuramente non lo lascerai così com'è perché vuoi che abbia un bell'aspetto.

Per fare ciò devi cambiare il suo aspetto attraverso le proprietà color e font-size del CSS.

In questo tutorial, ti mostrerò due modi diversi per migliorare l'estetica dei tuoi testi HTML.

Sintassi di base di font-size

selettore {
     font-size: valore;
     color: valore;
}

Come modificare la dimensione e il colore del testo all'interno di un tag HTML

Puoi cambiare il colore e la dimensione del testo direttamente all'interno del suo tag modificando le proprietà color e font-size. Questo modalità è detta CSS "inline" e per utilizzarla viene adoperato l'attributo style in HTML.

Nel codice HTML qui sotto, cambieremo il colore e la dimensione del testo freeCodeCamp.

<h1>freeCodeCamp</h1>

body {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
}

Nel browser apparirà così:

Per modificare la dimensione del testo, utilizzeremo l'attributo style, quindi imposteremo un valore con la proprietà font-size in questo modo:

<h1 style="font-size: 4rem">freeCodeCamp</h1>

Ora nel browser il testo apparirà così:

Se ti stai chiedendo cosa sia il rem, è un'unità di misura. 4rem equivalgono a 64 pixel, perché 16px equivale a un 1rem, a meno che non cambi la font-size della radice (html) in un altro valore.

Per cambiare il colore del testo, puoi utilizzare l'attributo style, quindi impostare un valore con la proprietà color:

<h1 style="color: #2ecc71">freeCodeCamp</h1>

Questo è ciò che ora appare nel browser:

La combinazione delle proprietà font-sizee color ci dà questo nel browser:

Con il codice:

<h1 style="font-size: 4rem; color: #2ecc71">freeCodeCamp</h1>

Come modificare la dimensione e il colore del testo in un file CSS esterno

Puoi anche modificare il colore e la dimensione del testo in un foglio di stile esterno. Ricorda però di collegare il CSS esterno nella sezione head del tuo HTML.

La sintassi di base è questa:

<link rel="stylesheet" href="percorso-del-file-css">

Ora, per modificare la dimensione e il colore del testo del testo freeCodeCamp, devi selezionarlo nel foglio di stile e applicargli le proprietà e i valori appropriati.

Ricorda che questo è il nostro codice HTML:

<h1>freeCodeCamp</h1>

Per modificare il colore e la dimensione del testo seleziona l'elemento (h1) e assegna i valori alle proprietà color e font-size:

 h1 {
    color: #2ecc71;
    font-size: 4rem;
}

Vedrai lo stesso risultato nel browser:

In Conclusione

Spero che questo tutorial ti dia le conoscenze per poter cambiare la dimensione e il colore del tuo testo HTML in modo che abbia l'aspetto che desideri.

Grazie per aver letto e continua a programmare.

In questo articolo imparerai come creare un campo di testo usando il tag input in HTML. Imparerai anche cosa sono i moduli web e otterrai una panoramica di come funzionano, poiché le caselle di testo sono una caratteristica fondamentale dei moduli.

Cominciamo!

Cosa sono i Moduli Web ?

I moduli sono un modo efficiente per raccogliere informazioni.

In molte occasioni potrebbe capitarti di compilare un modulo fisico, un documento stampato e fornire informazioni personali.

Per esempio, potresti compilare un modulo e consegnarlo a qualcuno quando stai iniziando un nuovo lavoro, o quando stai andando a fare un controllo medico, o quando sei in procinto di affittare/acquistare una casa – o in genere quando è necessario fornire delle informazioni.

Proprio come i moduli fisici, i moduli web sono un modo per ricevere e raccogliere input, informazioni e dati importanti da utenti e visitatori, ma utilizzando una combinazione di tecnologie web.

Un modulo web imita un modulo fisico contenendo spazi in cui gli utenti possono inserire le proprie informazioni.

I moduli web utilizzano una varietà di strumenti, o controlli del modulo, per raccogliere l'input dell'utente.

Un sito web può disporre di una casella di ricerca o di un campo di immissione del testo per l'immissione di una singola riga di testo. Ciò consente agli utenti di cercare qualcosa di specifico.

Un sito web può anche contenere un modulo di registrazione che consente agli utenti di iscriversi a una newsletter o ad altri aggiornamenti.

In questo caso, conterrebbe un campo di immissione del testo per l'inserimento del nome, del cognome e dell'indirizzo e-mail dell'utente.

Molti siti web dispongono anche di moduli di iscrizione/accesso quando si effettua un acquisto online, ad esempio, in cui gli utenti inseriscono il nome utente in un campo di testo e la password in un campo separato. Sebbene il campo della password sia anche un campo di testo, ogni carattere di testo è coperto da un punto nero per nascondere ciò che viene digitato.

Un sito web può anche avere un'area di testo più ampia per consentire agli utenti di inserire passaggi di testo più lunghi, utile per lasciare un commento sotto il post di un blog.

Molti moduli consentono inoltre all'utente di scegliere una particolare opzione tra una serie di alternative selezionando un pulsante di opzione.

I moduli web possono inoltre consentire all'utente di scegliere più di un'opzione selezionando/deselezionando una casella di spunta.

Infine, tutti i moduli hanno un pulsante di invio, per inviare i dati a un server dove verranno archiviati o elaborati.

Come Funzionano i Moduli Web

Internet è una grande rete globale che collega milioni di computer in tutto il mondo.

I computer che fanno parte della rete comunicano tra di loro inviando e ricevendo informazioni.

Questo avviene grazie all'architettura di richiesta/risposta client/server del web.

Il client, che in genere è un browser come Google Chrome, invia una richiesta a un server web.

Un server web è un componente hardware o software del computer che memorizza i file che compongono i siti web e li distribuisce ogni volta che riceve una richiesta.

La richiesta potrebbe essere quella di visualizzare un modulo che fa parte di una pagina web.

Il server restituisce i file che compongono il modulo web come risposta. Il browser quindi assembla i file e l'utente visualizza il modulo nel browser.

Questo ciclo di richiesta/risposta è strutturato da un protocollo, chiamato HTTP (che sta per HyperText Transfer Protocol).

Pertanto, quando si utilizza un modulo web, l'utente inserisce i dati richiesti dal modulo. Quindi, dopo la convalida lato client che controlla se tutti i campi obbligatori sono stati compilati e se i dati sono nel formato corretto, l'utente fa clic sul pulsante di invio.

I dati vengono quindi inviati al server in coppie nome-valore in una richiesta HTTP. Questo metodo di organizzazione delle informazioni in coppie nome-valore assicura che i dati corretti corrispondano all'elemento del modulo corretto.

Quindi viene utilizzato un linguaggio lato server come PHP, Ruby o Python per elaborare le informazioni e memorizzarle in un database per un uso successivo o il recupero.

Come Creare Moduli Web in HTML

Per creare un modulo in HTML, è necessario utilizzare l'elemento <form> utilizzato per raccogliere informazioni.

L'elemento <form> ha un tag di apertura <form> e un tag di chiusura </form>.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Web form</title>
</head>
<body>
    <form>
        
    </form>
</body>
</html>

L'elemento <form> accetta due attributi:

• L'attributo action , che specifica l'URL in cui si desidera inviare ed elaborare i dati.
• L'attributo method che accetta come valore uno dei due verbi HTTP,  GET o POST. Se non è incluso alcun attributo method, per impostazione predefinita viene utilizzato il metodo GET.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Web form</title>
</head>
<body>
    <form action="/url" method="GET">

    </form>
</body>
</html>

Tuttavia, questo da solo non raccoglie alcun input dell'utente.

Cosa è l'elemento input in HTML?

L'elemento <input> è più comunemente usato per raccogliere e recuperare i dati utente da un modulo web.

È dove gli utenti inseriscono i propri dati.

È annidato all'interno dell'elemento <form> ed è un elemento che si chiude automaticamente. Ciò significa che non richiede un tag di chiusura (i tag di chiusura hanno una barra, </>).

Si usa per creare diversi stili di campi di input, o controlli di input del modulo, per consentire agli utenti di inserire una varietà di informazioni diverse.

Crea campi di testo, campi e-mail, campi password, caselle di spunta, pulsanti di opzione, menu a tendina, pulsanti di invio, inoltre offre la possibilità di selezionare e caricare file e immagini dal computer dell'utente e molto altro.

Il modo per determinare il tipo di campo di input, o controllo di input del modulo, consiste nell'impostare l'attributo type e assegnargli un valore.

La sintassi generale di <input> è simile a questa:

<input type="value"> <!-- il valore dell'attributo type determina lo stile del campo di input -->

Ad esempio, per creare un campo che consenta agli utenti di caricare un file, l'elemento <input> avrà il seguente aspetto:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Web form</title>
</head>
<body>
    <form action="/url" method="GET">
        <input type="file">
    </form>
</body>
</html>

L'attributo type determina che tipo di dati può accettare l'elemento input.

Come Creare un Campo di Input di una Casella di Testo HTML

Il valore predefinito dell'attributo type di un input, quando non specificato è text. Quindi l'input di testo è lo stile di input più comune.

La riga <input type="text"> crea un campo di input di testo a riga singola, in cui l'utente può digitare qualsiasi input di testo.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Web form</title>
</head>
<body>
    <form action="/url" method="GET">
        <p>Please enter some text below:</p>
        <input type="text">
    </form>
</body>
</html>

Quando visualizzi la pagina nel browser, vedrai che è stato creato un campo di input di testo a riga singola:

Come Aggiungere Testo Segnaposto a un Campo di Testo

Il testo segnaposto, chiamato anche testo di riempimento, è un modo per richiedere e fornire un suggerimento agli utenti sul tipo di informazioni di cui hanno bisogno per compilare il modulo. Può anche offrire un valore predefinito prima che inizino a digitare.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Web form</title>
</head>
<body>
    <form action="/url" method="GET">
        <p>Please enter your first and last name:</p>
        <input type="text" placeholder="John">
        <input type="text" placeholder="Doe">
    </form>
</body>
</html>

Il codice qui sopra viene visualizzato così:

L'Importanza dell'Attributo name nei Campi di Testo

Quando si invia il modulo e questo viene trasmesso al server, il server deve distinguere e differenziare tra i diversi tipi di dati inviati che deve raccogliere.

Ad esempio, deve sapere qual è il nome utente, qual è la password e qual è l'indirizzo e-mail.

Ciò significa che ogni campo di testo necessita di un attributo name e di un valore per rendere più chiari i tipi di dati inviati.

Ad esempio, puoi utilizzare quanto segue per chiedere a qualcuno di inserire il proprio nome completo in un campo di testo:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Web form</title>
</head>
<body>
    <form action="/url" method="GET">
        <p>Please enter your full name:</p>
        <input type="text" name="name" placeholder="John Doe">
    </form>
</body>
</html>

Supponiamo che l'utente inserisca il nome "John Bexley" nel campo di testo. Questo diventerà quindi il valore dell'attributo name.

Come accennato in precedenza, i dati nei moduli vengono inviati in coppie nome-valore. In questo caso, il server saprebbe che il nome (name) dell'utente è John Bexley, in particolare sarebbe name=John Bexley.

Per fare un altro esempio:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Web form</title>
</head>
<body>
    <form action="/url" method="GET">
        <p>Please enter your first  name:</p>
        <input type="text" name="first_name" placeholder="John">
        <p>Please enter your last  name:</p>
        <input type="text" name="last_name" placeholder="Doe">
    </form>
</body>
</html>

Il codice sopra ha due campi di testo separati in cui l'utente può inserire il proprio nome e cognome separatamente.

Se ha inserito "John" come nome, la coppia nome-valore inviata al server sarà first_name=John".

Se ha inserito "Bexley" come cognome, la coppia nome-valore inviata al server sarà last_name=Bexley.

Come Rendere Obbligatorie le Informazioni di Testo

Puoi fare in modo che determinati campi siano obbligatori e debbano essere compilati dagli utenti.

HTML5 ha introdotto la convalida lato client.

Questa è una funzione grazie alla quale viene visualizzato un messaggio se l'utente non ha compilato i campi richiesti o non ha inserito le informazioni correttamente. Significa anche che non sarà in grado di inviare il modulo.

Tutto quello che devi fare per abilitare questa funzione è aggiungere l'attributo required all'elemento <input>. Questo attributo non deve avere un valore.

Tieni a mente che quando aggiungi più attributi all'elemento <input>, non è necessario aggiungere gli elementi in un certo ordine.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Web form</title>
</head>
<body>
    <form action="/url" method="GET">
        <p>Please enter your first  and last name:</p>
        <input type="text" name="first_name" placeholder="John" required>
        <input type="text" name="last_name" placeholder="Doe" required>
        <button type="submit">Submit</button>  
    </form>
</body>
</html>

Guarda cosa succede se un utente non compila uno dei campi:

Apparirà un messaggio e l'utente non sarà in grado di inviare il modulo se i campi richiesti non sono stati compilati.

Come Impostare un Numero Minimo e Massimo di Caratteri in una Casella di Testo

È possibile specificare il numero minimo e massimo di caratteri che un utente può immettere in un campo di testo.

Per creare un numero minimo di caratteri, utilizzare l'attributo minlength.

Ad esempio, puoi impostarlo in modo che il nome utente sia lungo almeno tre caratteri:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Web form</title>
</head>
<body>
    <form action="/url" method="GET">
        <p>Please enter your username</p>
        <input type="text" name="username" minlength="3" required>
        <button type="submit">Submit</button>  
    </form>
</body>
</html>

L'utente non sarà in grado di inviare il modulo se il nome utente è più corto di tre caratteri:

Per limitare il numero di caratteri immessi da un utente in un campo di testo, utilizza l'attributo maxlength.

Un esempio di combinazione degli attributi minlength e maxlength potrebbe essere simile al seguente:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Web form</title>
</head>
<body>
    <form action="/url" method="GET">
        <p>Please enter your username</p>
        <input type="text" name="username" minlength="3" maxlength="20" required>
        <button type="submit">Submit</button>  
    </form>
</body>
</html>

Nell'esempio qui sopra, il nome utente deve essere lungo almeno 3 caratteri e non più di 20 caratteri.

Come Etichettare i Controlli del Modulo con l'Elemento label

Finora ho utilizzato un elemento <p> per scrivere del testo prima di usare la casella di testo, in modo da dare un'indicazione all'utente sulla compilazione.

Ma questa non è una buona pratica e non è accessibile.

Ogni controllo del modulo, in questo caso ogni campo di testo, dovrebbe avere il proprio elemento <label>.

Ciò rende il modulo accessibile agli utenti ipovedenti che utilizzano tecnologie assistive come i lettori di schermo.

Un modo per usarlo è annidare qualsiasi testo introduttivo e <input type="text"> in un elemento <label> in questo modo:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Web form</title>
</head>
<body>
    <form action="/url" method="GET">
        <label>
            Please enter your username
            <input type="text" name="username" minlength="3" maxlength="20" required>
        </label>
        <button type="submit">Submit</button>  
    </form>
</body>
</html>

Un altro modo per utilizzare <label> e ottenere lo stesso risultato è separarlo dall'elemento <input>.

In questo caso, l'attributo for deve essere aggiunto a <label> e l'attributo id aggiunto a <input>, per poterli associare tra loro.

Il valore di for sarà lo stesso di id.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Web form</title>
</head>
<body>
    <form action="/url" method="GET">
        <label for="username"> Please enter your username:</label>
            <input type="text" id="username" name="username" minlength="3" maxlength="20" required>
        <button type="submit">Submit</button>  
    </form>
</body>
</html>

In Conclusione

Riassumendo, per creare un campo di input di testo in HTML, è necessario almeno:

• Un elemento <input>, che in genere va all'interno di un elemento <form>.
• Impostare l'attributo type in modo che abbia il valore di text. Questo creerà un campo di input di testo a riga singola.
• Non dimenticare di aggiungere un attributo name. Questo identifica le informazioni per ogni controllo del modulo che viene creato e rende le cose più chiare per il server.

Per saperne di più su HTML e CSS, dai un'occhiata alla certificazione Responsive Web Design di freeCodeCamp, dove imparerai in modo interattivo mentre costruisci progetti divertenti lungo il percorso.

Grazie per la lettura e buona programmazione!

Il tag HTML select viene utilizzato per creare menu a discesa, in modo che gli utenti possano selezionare il valore che vogliono. È una caratteristica strumentale nella raccolta dei dati da inviare a un server.

Il tag select normalmente si trova all'interno di un elemento form, con le opzioni tra cui scegliere codificate all'interno di un altro tag,  <option>. Può anche essere un elemento a sé stante, ma comunque associato a un form con uno dei suoi attributi speciali, form.

In questo tutorial, ti guiderò nella creazione di un menu a discesa con il tag select, in modo che tu possa iniziare a usarlo nel codice dei tuoi progetti per raccogliere dati. Parlerò anche di come applicare uno stile al tag select perché è notoriamente difficile da definire.

Attributi del Tag Select

Prima di approfondire come creare un menu a discesa con il tag select, dobbiamo discutere gli attributi che esso possiede.

Gli attributi sono:

• name (nome):  devi attribuire un nome a ogni elemento di un form, poiché sarà usato per referenziare i dati dopo che sono stati inviati al server.
• multiple (multiplo): questo attributo consente all'utente di selezionare opzioni multiple dal menu a discesa.
• required (richiesto): è tipicamente usato per la validazione. Con questo attributo il form non invierà i dati a meno che l'utente non scelga almeno una opzione dal menu a discesa.
• disabled (disabilitato): questo attributo impedisce all'utente l'interazione con le opzioni.
• size (dimensione): espressa con un valore numerico, questo attributo viene usato per specificare quante opzioni saranno visibili alla volta.
• autofocus: questo attributo può essere usato su tutti gli elementi di un form, select incluso, per specificare quale di essi dovrebbe ricevere il focus quando la pagina viene caricata.

Come Creare un Menu a Discesa con il Tag Select

Per creare un menu a discesa con il tag select, innanzitutto ti serve un elemento form. Questo perché dovrai anche avere un pulsante di tipo submit all'interno del form stesso per poter inviare i dati al server.

<form action="#">
      <label for="lang">Language</label>
      <select name="languages" id="lang">
        <option value="javascript">JavaScript</option>
        <option value="php">PHP</option>
        <option value="java">Java</option>
        <option value="golang">Golang</option>
        <option value="python">Python</option>
        <option value="c#">C#</option>
        <option value="C++">C++</option>
        <option value="erlang">Erlang</option>
      </select>
      <input type="submit" value="Submit" />
</form>

Ho aggiunto qualche semplice regola CSS per centrare il menu a discesa e il pulsante, e dare al corpo uno sfondo grigio chiaro:

body {
     display: flex;
     align-items: center;
     justify-content: center;
     margin: 0 auto;
     height: 100vh;
     background-color: #f1f1f1;
   }

input {
     display: flex;
     align-items: center;
     justify-content: center;
     margin: 0 auto;
   }

Per renderlo più elaborato e accessibile, potresti anche associare all'elemento select un'etichetta, vale a dire un elemento label, in modo che riceva il focus quando viene fatto click sul testo dell'etichetta stessa. Puoi farlo con questo codice:

<form action="#">
      <label for="lang">Language</label>
      <select name="languages" id="lang">
        <option value="javascript">JavaScript</option>
        <option value="php">PHP</option>
        <option value="java">Java</option>
        <option value="golang">Golang</option>
        <option value="python">Python</option>
        <option value="c#">C#</option>
        <option value="C++">C++</option>
        <option value="erlang">Erlang</option>
      </select>
      <input type="submit" value="Submit" />
</form>

Ho inserito un cancelletto (#) come valore dell'attributo action in modo che non si ottenga un errore 4o4 quando si fa click sul pulsante di invio.

Ora però dobbiamo fare una piccola modifica nel CSS:

 body {
     display: flex;
     align-items: center;
     justify-content: center;
     margin: 0 auto;
     height: 100vh; 
     background-color: #f1f1f1;
   }

input {
     display: flex;
     align-items: center;
     justify-content: center;
     margin: 0 auto;
   }

label {
     display: flex;
     align-items: center;
     justify-content: center;
     margin: 0 auto;
   }

select {
     margin-bottom: 10px;
     margin-top: 10px;
   }

Alla fine questo è il risultato:

Non finisce qui. Uno degli elementi del menu a discesa appare come predefinito e verrebbe scelto se l'utente facesse click sul pulsante di invio immediatamente, una volta arrivato sulla pagina.

Questa non è una buona esperienza utente. Puoi rimediare inserendo un elemento fittizio tipo "select a language" (seleziona un linguaggio) come primo elemento del menu a discesa.

 <form action="#">
      <label for="lang">Language</label>
      <select name="languages" id="lang">
        <option value="select">Select a language</option>
        <option value="javascript">JavaScript</option>
        <option value="php">PHP</option>
        <option value="java">Java</option>
        <option value="golang">Golang</option>
        <option value="python">Python</option>
        <option value="c#">C#</option>
        <option value="C++">C++</option>
        <option value="erlang">Erlang</option>
      </select>
      <input type="submit" value="Submit" />
</form>

Quando l'utente fa click sull'elemento per selezionare un'opzione, il menu a discesa va a coprire il pulsante di invio – un'altra cosa che influisce negativamente su una buona esperienza utente.

Puoi modificare questo con l'attributo size, che mostrerà un predefinito numero di opzioni e mostrerà una barra di scorrimento verticale per le restanti  nel menu a discesa.

Questo ti consente anche di sbarazzarti della prima opzione fittizia "select a language", visto che alcuni degli elementi saranno visibili all'utente automaticamente e nessuno di essi sarà selezionato.

 <form action="#">
      <label for="lang">Language</label>
      <select name="languages" id="lang" size="4">
        <option value="javascript">JavaScript</option>
        <option value="php">PHP</option>
        <option value="java">Java</option>
        <option value="golang">Golang</option>
        <option value="python">Python</option>
        <option value="c#">C#</option>
        <option value="C++">C++</option>
        <option value="erlang">Erlang</option>
      </select>
      <input type="submit" value="Submit" />
</form>

Con l'attributo multiple puoi consentire all'utente di selezionare più opzioni dal menu a discesa

 <form action="#">
      <label for="lang">Language</label>
      <select name="languages" id="lang" multiple>
        <option value="javascript">JavaScript</option>
        <option value="php">PHP</option>
        <option value="java">Java</option>
        <option value="golang">Golang</option>
        <option value="python">Python</option>
        <option value="c#">C#</option>
        <option value="C++">C++</option>
        <option value="erlang">Erlang</option>
      </select>
      <input type="submit" value="Submit" />
</form>

Questo rende visibili 4 elementi nella modalità predefinita. Per selezionare più opzioni, l'utente deve tenere premuto il tasto "shift" o "ctrl" mentre effettua la selezione con il mouse.

Questo non è tutto quello che si può fare con i tag select e <option>. Puoi anche creare un elemento select multi livello  inserendo l'elemento <optgroup> all'interno di un tag <select> .

Per crearlo puoi utilizzare il menu a discesa già fatto modificando il codice in questo modo:

<form action="#">
      <label for="lang">Language</label>
      <select name="languages" id="lang">
        <optgroup label="first-choice">
          <option value="select">Select a language</option>
          <option value="javascript">JavaScript</option>
          <option value="php">PHP</option>
          <option value="java">Java</option>
          <option value="golang">Golang</option>
        </optgroup>
        <optgroup label="second-choice">
          <option value="python">Python</option>
          <option value="c#">C#</option>
          <option value="C++">C++</option>
          <option value="erlang">Erlang</option>
        </optgroup>
      </select>
      <input type="submit" value="Submit" />
</form>

Come Dare uno Stile all'Elemento Select

Applicare uno stile all'elemento select è spesso fonte di confusione e non c'è uniformità nella presentazione dello stesso da parte dei browser. Puoi tuttavia provare quanto segue:

 <form action="#">
      <label for="lang">Language</label>
      <select name="languages" id="lang">
        <option value="select">Select a Language</option>
        <option value="javascript">JavaScript</option>
        <option value="php">PHP</option>
        <option value="java">Java</option>
        <option value="golang">Golang</option>
        <option value="python">Python</option>
        <option value="c#">C#</option>
        <option value="C++">C++</option>
        <option value="erlang">Erlang</option>
      </select>
      <input type="submit" value="Submit" />
</form>

 select {
        margin-bottom: 10px;
        margin-top: 10px;
        font-family: cursive, sans-serif;
        outline: 0;
        background: #2ecc71;
        color: #fff;
        border: 1px solid crimson;
        padding: 4px;
        border-radius: 9px;
      }

Nel frammento di codice CSS qui sopra ho dato al testo che appare nella casella di selezione il seguente aspetto:

• famiglia di font cursive e colore bianco,
• ho eliminato il brutto contorno che appare quando l'elemento riceve il focus, dando alla proprietà outline il valore di 0,
• uno sfondo verdastro,
• un bordo spesso 1 pixel di colore cremisi,
• un leggero arrotondamento degli angoli del bordo di 4 pixel tramite la proprietà border-radius,
• un riempimento di 4 pixel per meglio spaziare il testo all'interno della casella di selezione.

La casella di selezione ora ha un aspetto migliore:

Conclusione

Il tag select è molto utile quando si creano menu a discesa o elenchi combinati in HTML. È come avere caselle di spunta e pulsanti di opzione in un singolo pacchetto.

Ricordati che con un pulsante di opzione puoi selezionare solo un elemento da una lista – ma con una casella di spunta puoi selezionare più elementi. Select è più flessibile, in quanto lo puoi configurare affinché accetti una singola opzione o più opzioni.

Un problema è che è molto difficile applicare uno stile al tag select. Una soluzione ragionevole è usare una libreria CSS che offre delle buone classi di utilità per applicare uno stile a un form, compreso l'elemento select.

Spero che questo tutorial ti abbia reso più familiare con il tag select, in modo che tu possa iniziare a utilizzarlo nei tuoi progetti.

Grazie per avere letto e continua a programmare.

In questo articolo, imparerai come aggiungere commenti su una singola riga e commenti multi-riga ai tuoi documenti HTML.

Vedrai anche perché i commenti sono considerati una buona pratica quando si scrive del codice HTML.

Iniziamo!

Il tag di commento HTML

La sintassi generica per un commento HTML è la seguente:

<!-- Sono un commento! -->

I commenti in HTML iniziano con <!-- e terminano con -->.

Non dimenticare il punto esclamativo all'inizio del tag! Ma non c'è bisogno di aggiungerlo alla fine.

Il tag circonda qualsiasi testo o altro tag HTML che vuoi trasformare in un commento.

Quando usare i commenti HTML

I commenti HTML non vengono mostrati nel browser. Ciò vuol dire che ogni commento che aggiungi al tuo codice sorgente HTML non sarà visualizzato quando il documento viene renderizzato in una pagina web.

Detto ciò, tieni a mente che chiunque può vedere il codice sorgente di praticamente qualsiasi sito web pubblicato su Internet andando su Visualizza sorgente pagina – e questo include anche tutti i commenti!

Quindi i tuoi commenti saranno visibili se rendi pubblico il documento HTML e qualcuno decide di guardare il codice sorgente.

Scrivere commenti può essere utile ed è una buona pratica da seguire quando si scrive del codice sorgente. I commenti ti aiutano a documentare il codice e comunicare informazioni riguardo al codice e al ragionamento che hai seguito, per te stesso e per gli altri. Sono utili anche per ricordarti cosa stavi pensando/facendo quando torni su un progetto dopo mesi in cui non ci stavi lavorando.

I commenti aiutano anche a comunicare con gli altri sviluppatori che lavorano su un progetto con te. Dei commenti possono spiegar loro chiaramente perché hai aggiunto certe righe di codice.

Come scrivere commenti su riga singola in HTML

Un commento su singola riga occupa soltanto una riga. Come detto precedentemente, la riga non verrà mostrata nel browser.

Usa un commento su singola riga quando vuoi spiegare e chiarire il motivo alla base del codice che lo segue oppure quando vuoi aggiungere dei promemoria per te stesso come:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- Aggiungere navbar qui -->
    <h2>About me</h2>
    <p>I am learning to code with freeCodeCamp.</p>
    <p>I am going through each and every one of their awesome and super helpful  certifications. </p>
    <p>I am on my way to becoming a fullstack web developer!</p>
    <h3>Work Experience</h3>
</body>
</html>

I commenti su riga singola sono anche utili quando vuoi chiarire dove finisce un tag. Torna utile in documenti HTML lunghi e complessi in cui c'è un sacco di roba e potresti fare confusione riguardo a dove si trova un tag di chiusura.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <section class="contact">
    </section> <!--il tag di chiusura della sezione contact è qui-->
</body>
</html>

Come scrivere commenti in linea in HTML

Puoi anche aggiungere dei commenti nel mezzo di una frase o di una riga di codice.

Solo il testo contenuto in <!-- --> sarà trasformato in un commento e il resto del testo nel tag non sarà influenzato.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>I am <!--going to be--> a web developer</p>
</body>
</html>

Come scrivere commenti multi-riga in HTML

Usando esattamente la stessa sintassi che hai visto finora, i commenti possono occupare più righe.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>I am  a web developer</p>
    <!--Questo sarà il mio portfolio
    Dove inserirò i progetti di cui sono più soddisfatto.
    Posso continuare ad andare avanti su cosa voglio aggiungere
    perché sto scrivendo un commento multi-riga-->
</body>
</html>

Come trasformare un tag in un commento in HTML

E se volessi trasformare un tag in un commento in HTML?

Devi inserire il tag in <!-- -->, in questo modo:

!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h2>My portfolio page</h2>
    <h3>freeCodeCamp certification projects</h3>
    <!-- <section class="hero">
    </section>  -->
    <h2>About Me</h2>
</body>
</html>

Trasformare dei tag in commenti aiuta con il debugging.

Quando qualcosa non funziona come dovrebbe o come desideri, inizia a trasformare i tag in commenti, uno alla volta. Questo ti permette di testarli e vedere quale sta causando il problema.

Scorciatoie da tastiera per aggiungere commenti HTML

Esistono delle scorciatoie che puoi usare per aggiungere commenti – e probabilmente finirai per utilizzarle spesso. La scorciatoia è Command / per gli utenti Mac o Control / per gli utenti Windows e Linux.

Per aggiungere un commento su riga singola, premi semplicemente la combinazione di tasti mostrata qui sopra all'interno dell'editor di codice. Poi l'intera riga diventerà un commento. Però tieni a mente che dato che tutta la riga diventerà un commento, questa scorciatoia funziona solo per i commenti su riga singola. Dovrai inserire manualmente i commenti in linea.

Per aggiungere i commenti multi-riga, seleziona ed evidenzia tutto il testo o i tag che vuoi trasformare in commento e premi la combinazione di tasti mostrata precedentemente. Ogni riga selezionata diventerà un commento.

Conclusione

E il gioco è fatto – adesso sai come usare i commenti in HTML!

Impara di più sull'HTML con il corso gratuito di freeCodeCamp sul Web Design Responsivo (disponibile in italiano!).

È ideale per principianti e non necessita di conoscenze pregresse. Inizierai dalle basi e migliorerai le tue abilità con la pratica. Alla fine dovrai completare cinque progetti per ottenere la certificazione.

Grazie per aver letto questo articolo e buono studio :)

Quando stai realizzando un progetto e hai bisogno di rappresentare dei dati, è importante mostrare le informazioni in modo che siano facili da leggere e da comprendere.

A seconda del tipo di dati, puoi scegliere diversi metodi di rappresentazione con degli elementi HTML.

Nella maggior parte dei casi, le tabelle sono il modo più conveniente per visualizzare grandi quantità di dati strutturati in modo gradevole. Ecco perché in quest'articolo impareremo come usare le tabelle HTML e come impostarne lo stile.

Ma prima di tutto: cos'è una tabella in HTML?

Cos'è una tabella in HTML?

Una tabella è una rappresentazione di dati disposti in righe e colonne. In realtà, è più simile a un foglio di calcolo. In HTML, con l'aiuto delle tabelle, puoi disporre dati come immagini, testo, link e così via, in righe e colonne formate da celle.

Recentemente, l'uso delle tabelle nel web è diventato più popolare grazie a dei fantastici tag HTML, che ne semplificano la creazione e il design.

Per creare una tabella in HTML devi usare diversi tag. Il più importante è il tag <table>, il contenitore principale della tabella, che indica dove inizia e finisce la tabella.

Tag HTML comuni per le tabelle

Altri tag sono:

• <tr> - rappresenta le righe
• <td> - usato per creare celle di dati
• <th> - usato per aggiungere le intestazioni della tabella
• <caption> - usato per inserire didascalie
• <thead> - aggiunge un'intestazione separata alla tabella
• <tbody> - indica il corpo principale della tabella
• <tfoot> - crea un piè di pagina separato per la tabella

Sintassi delle tabelle HTML:

<table>
  <tr>
    <td>Cella 1</td>
    <td>Cella 2</td>
    <td>Cella 3</td>
  </tr>
  <tr>
    <td>Cella 4</td>
    <td>Cella 5</td>
    <td>Cella 6</td>
  </tr>
</table>

Ora che sai cos'è una tabella HTML e come crearne una, proseguiamo e vediamo in che modo possiamo utilizzare tutti questi tag per creare tabelle con più funzionalità.

Come aggiungere un'intestazione a una tabella in HTML

<th> viene usato per aggiungere un'intestazione a una tabella. In un design di base, l'intestazione della tabella occupa sempre la riga in cima, quindi vuol dire i <th> devono essere presenti nella prima riga della tabella, seguiti dai dati effettivi. Come impostazione predefinita, il testo delle intestazioni è centrato e in grassetto.

Un esempio dell'uso di <th>

<table>
  <tr>
    <th>Nome</th>
    <th>Cognome</th>
    <th>Indirizzo Email</th>
  </tr>
  <tr>
   <td>Hillary</td>
   <td>Nyakundi</td>
   <td>tables@mail.com</td>
  </tr>
  <tr>
    <td>Lary</td>
    <td>Mak</td>
    <td>developer@mail.com</td>
  </tr>
</table>

Dall'esempio qui sopra, siamo in grado di dire che tipo di informazione contiene ogni colonna. Questo è possibile grazie all'uso dei tag <th>.

Come aggiungere una didascalia a una tabella

L'utilizzo principale dell'aggiunta di una didascalia a una tabella è fornire una descrizione circa i dati rappresentati nella tabella. La didascalia può essere posizionata sia sopra che sotto la tabella e, di default, sarà sempre centrata.

Per aggiungere una didascalia in una tabella, usiamo il tag <caption>.

Sintassi di caption

<table>
  <caption></caption>
  <tr> </tr>
</table>

Un esempio dell'uso di <caption>

<table>
  <caption>Risorse gratuite per imparare a programmare</caption>
  <tr>
    <th>Siti</th>
    <th>Canali Youtube</th>
    <th>App Mobile</th>
  </tr>
  <tr>
    <td>Freecode Camp</td>
    <td>Freecode Camp</td>
    <td>Enki</td>
  </tr>
  <tr>
    <td>W3Schools</td>
    <td>Academind</td>
    <td>Programming Hero</td>
  </tr>
  <tr>
    <td>Khan Academy</td>
    <td>The Coding Train</td>
    <td>Solo learn</td>
  </tr>
</table>

Come usare l'attributo scope nelle tabelle HTML

L'attributo scope è usato per definire se una specifica intestazione è dedicata a una colonna, una riga o a  gruppi di entrambe. La definizione potrebbe essere fuorviante, ma aspetta un attimo – con l'aiuto del prossimo esempio capirai meglio.

Lo scopo principale dell'attributo scope è indicare i dati di riferimento, in modo che l'utente non debba basarsi su delle supposizioni. L'attributo viene dichiarato nel tag di apertura <th> e accetta i valori col, row, colgroup e rowgroup.

I valori col e row indicano che la cella di intestazione fornisce informazioni per una colonna o una riga, rispettivamente.

Sintassi di scope

<table>
 <tr>
   <th scope="valore">
 </tr>
</table

Un esempio dell'utilizzo di <scope>

<table>
  <tr>
    <th></th>
    <th scope="col">Semestre</th>
    <th scope="col">Voto</th>
  </tr>

  <tr>
    <td>1</td>
    <td>Jan - April</td>
    <td>Credit</td>
  </tr>

  <tr>
    <td>2</td>
    <td>May - August</td>
    <td>Pass</td>
  </tr>
    
  <tr>
    <td>2</td>
    <td>September - December</td>
    <td>Distinction</td>
  </tr>
</table>

Ciò che fa l'attributo scope è indicare se l'intestazione di una cella appartiene alla colonna, alla riga o a un gruppo di entrambe.

In questo caso, le intestazioni appartengono alle colonne, perché le abbiamo impostate così nel codice. Puoi sbizzarrirti cambiando il valore dell'attributo per ottenere risultati diversi.

Come estendere le celle in una tabella HTML

Forse, potresti aver incontrato delle celle che si estendono su due o più colonne o righe in una tabella. Questo è ciò che viene chiamato "cell spanning".

Se hai lavorato con programmi come MS Office o Excel, probabilmente hai ottenuto questo design con l'uso di funzioni evidenziando delle celle, cliccando il comando, e voilà!  

La stessa funzionalità può essere applicata in una tabella HTML usando due attributi di cella, colspan per l'estensione orizzontale e rowspan per l'estensione verticale. Ai due attributi sono assegnati dei numeri maggiori di zero che indicano il numero delle celle da occupare.

Un esempio dell'uso di span

<table>
  <tr>
    <th>Nome</th>
    <th>Materia</th>
    <th>Voto</th>
  </tr>
  <tr>
    <td rowspan = "2">Hillary</td>
    <td>Advanced Web</td>
    <td>75</td>
  </tr>
  <tr>
    <td>Operating System</td>
    <td>60</td>
  </tr>
      <tr>
    <td rowspan = "2">Lary</td>
    <td>Advanced Web</td>
    <td>80</td>
  </tr>
  <tr>
    <td>Operating System</td>
    <td>75</td>
  </tr>
  <tr>
     <td></td>
    <td colspan="3">Total Average: 72.5</td>
  </tr>
</table>

Nell'esempio qui sopra, abbiamo una cella che occupa due colonne e due celle che occupano due righe. In questo modo, abbiamo applicato lo span sia orizzontalmente che verticalmente.

Quando usi i valori colspan e rowspan, assicurati di dichiararli correttamente per evitare di sovrapporre delle celle.

Come aggiungere testata, corpo e piè di pagina nelle tabelle HTML

Proprio come un sito web o qualsiasi altro documento, una tabella ha tre sezioni principali – la testata, il corpo e il piè di pagina.

In una tabella, sono divise grazie ai tag:

• <thead> - fornisce una testata separata per la tabella
• <tbody> - racchiude il contenuto principale della tabella
• <tfoot> - crea un piè di pagina separato per la tabella

Un esempio dell'uso di <thead>, <tbody> & <tfoot>

<table>
  <thead>
    <tr>
      <th colspan="2">Ottobre</th>
      <th colspan="2">Novembre</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>Vendite</td>
      <td>Guadagno</td>
      <td>Vendite</td>
      <td>Guadagno</td>
    </tr>
    <tr>
      <td>$200,00</td>
      <td>$50,00</td>
      <td>$300,000</td>
      <td>$70,000</td>
    </tr>
  </tbody>
    
  <tfoot>
    <tr>
      <th colspan= "4">Novembre è stato più produttivo</th>
    </tr>
  </tfoot>
</table>

Nell'esempio qui sopra, la testata corrisponde al nome dei mesi, la parte con le vendite e il guadagno di entrambi i mesi è il corpo della tabella, mentre il commento finale rappresenta il piè di pagina della tabella.

Un'altra cosa importante da notare è che una tabella può avere più di un corpo. In una situazione del genere, ogni corpo raggruppa insieme le righe che sono correlate.

Come impostare lo stile delle tabelle HTML con il CSS

Anche se le tabelle sono ampiamente utilizzate oggigiorno, è molto raro trovarne una che non abbia uno stile particolare. La maggior parte delle tabelle ha diverse forme di stile, che si tratti del colore, dei caratteri, di evidenziare valori importanti e via dicendo.

Lo stile rende le tabelle più professionali e accattivanti alla vista. In fin dei conti, non vuoi di certo che il tuo lettore si ritrovi a fissare dei dati divisi da una singola linea.

A differenza di altri linguaggi o strumenti, in HTML è necessario usare un altro file con una estensione .css, creato per personalizzare lo stile e collegato al file HTML.

Qui sotto, puoi trovare del codice con un esempio di tabella con stile personalizzato. Sentiti libero di curiosare per vedere come le diverse impostazioni influiscono sul risultato finale.

Nel pen qui sopra, ho creato una tabella e impostato il suo stile usando alcuni degli attributi trattati in questo articolo.

Lo stile è stato impostato usando un file CSS, in cui sono stati aggiunti colori e bordi per rendere la tabella più leggibile e per abbellirla. La tabella possiede anche una intestazione fissa, così da poter scorrere i dati potendo sempre vedere l'intestazione di una particolare colonna.

Abbiamo visto cos'è una tabella, ne abbiamo create alcune e abbiamo anche fatto un altro passo avanti applicando uno stile personalizzato.

Ma avere queste conoscenze senza sapere quando applicarle non è di nessun aiuto. Detto ciò, dove e quando dovresti usare usare delle tabelle?

Quando usare una tabella

Ci sono molte situazioni in cui le tabelle possono tornare utili nello sviluppo dei tuoi progetti:

• Puoi usare delle tabelle quando vuoi confrontare dei dati con delle caratteristiche comuni come differenze tra due oggetti A e B o i punteggi della squadra X rispetto a Y.
• Puoi usare una tabella anche per dare una panoramica di dati numerici. Un buon esempio è la rappresentazione dei voti di studenti o addirittura i risultati delle squadre di un campionato.
• Una tabella può aiutare i lettori a trovare velocemente delle informazioni specifiche disposte in modo chiaro. Ad esempio, nel caso di una lunga lista di nomi, una tabella può essere usata per suddividere la lista e semplificare la lettura.

In conclusione

La tabelle sono un ottimo modo di rappresentare dati e puoi crearle usando elementi HTML di base come table, tr e td.

Puoi anche aggiungere degli stili per abbellirle e presentare i dati in modo chiaro con l'aiuto di un file CSS.

Per concludere, ecco una tabella che riassume tutto ciò che abbiamo trattato in questo articolo. Confronta il tuo design con la tabella nel pen qui sotto:

L'HTML fornisce la struttura dei siti web. In quest'articolo, vedremo alcuni esempi di come utilizzare la sintassi HTML per costruire siti web e alcuni esempi riguardanti le caratteristiche del nuovo HTML5.

L'attributo href negli elementi a

L'attributo href fa riferimento a una destinazione indicata da un link. L'elemento <a> è spacciato senza un attributo href. Delle volte, durante il tuo lavoro, potresti non volere un link live o non conoscere ancora la destinazione di un link. In questo caso, è utile impostare il valore dell'attributo href su "#" per creare un link morto. L'attributo href può essere usato per linkare file locali o file su internet.

Ad esempio:

<html>
  <head>
    <title>Esempio attributo href</title>
  </head>
  <body>
    <h1>Esempio attributo href</h1>
    <p>
      <a href="https://www.freecodecamp.org/contribute/">The freeCodeCamp Contribution Page</a> shows you how and where you can contribute to freeCodeCamp's community and growth.
    </p>
  </body>
</html>

<a href> è supportato da tutti i browser.

Altri attributi:

hreflang : specifica la lingua della risorsa linkata. target : specifica il contesto in cui la risorsa linkata verrà aperta. title : definisce il titolo di un link, che appare all'utente come descrizione.

Esempi

<a href="#">Questo è un link morto</a>
<a href="https://www.freecodecamp.org">Questo è un link a freeCodeCamp</a>
<a href="https://html.com/attributes/a-href/">Altro sull'attributo a href</a>

Ancoraggio all'interno della pagina

È anche possibile impostare un'ancora in una certa posizione della pagina. Per fare ciò, dovresti prima di tutto aggiungere un'etichetta nella posizione della pagina con un elemento con l'attributo "name" necessario, avente una parola chiave descrittiva, in questo modo:

<a name="top"></a>

Una volta fatto ciò, aggiungi il link che porta all'ancora in qualsiasi punto della pagina desideri. Devi utilizzare l'attributo "href" con il simbolo # (cancelletto) e la parola chiave descrittiva dell'ancora, proprio così:

<a href="#top">Go to Top</a>

Link a immagini

<a href="#"> può essere anche applicato a immagini o altri elementi HTML.

Esempio

<a href="#">
  <img itemprop="image" style="height: 90px;" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back.">
</a>

L'attributo target

L'attributo target specifica dove aprire il documento linkato in un elemento di ancoraggio a.

Esempi:

Un attributo target con il valore di “_blank” apre il documento linkato in una nuova scheda o finestra.

<a href="https://www.freecodecamp.org/" target="_blank">freeCodeCamp</a>

Un attributo target con il valore di “_self” apre il documento linkato nella stessa finestra o scheda in cui è stato cliccato (questa è l'impostazione predefinita e di solito non è necessario specificarla).

<a href="https://www.freecodecamp.org/" target="_self">freeCodeCamp</a>

<a href="https://www.freecodecamp.org/">freeCodeCamp</a>

Un attributo target con il valore di “_parent” apre il documento linkato in nella finestra principale.

<a href="https://www.freecodecamp.org/" target="_parent">freeCodeCamp</a>

Un attributo target con il valore di “_top” apre il documento linkato nel livello più alto.

<a href="https://www.freecodecamp.org/" target="_top">freeCodeCamp</a>

Un attributo target con il valore di “framename” apre il documento linkato in un riquadro dal nome specifico.

<a href="https://www.freecodecamp.org/" target="framename">freeCodeCamp</a>

L'attributo background nel body

Se vuoi aggiungere un'immagine di sfondo invece di un colore di sfondo, una soluzione è l'attributo background, che specifica un'immagine di sfondo per il documento HTML.

Sintassi:

<body background="URL">

Attributo:

background - URL dell'immagine di sfondo

Esempio:

<html>
  <body background="https://assets.digitalocean.com/blog/static/hacktoberfest-is-back/hero.png">
  </body>
</html>

L'attributo background nel body è sconsigliato

L'attributo background nel body è sconsigliato in HTML5. Il modo corretto di agire sullo stile dell'elemento <body> è usare il CSS.

Esistono svariate proprietà CSS da utilizzare per lo sfondo di un elemento e possono essere sfruttate per impostare lo sfondo dell'intera pagina.

L'attributo bgcolor nel body

L'attributo bgcolor assegna un colore di sfondo a un documento HTML.

Sintassi:

<body bgcolor="color">

Il valore del colore può essere un nome (come purple) o un valore esadecimale (come #af0000).

Per aggiungere un colore di sfondo a una pagina web puoi usare <body bgcolor="######">, specificando il colore da visualizzare nel documento HTML.

Ad esempio:

<html>
  <head>
    <title>Esempio attributo bgcolor</title>
  </head>
  <body bgcolor="#afafaf">
    <h1>Questa pagina ha un colore di sfondo.</h1>
  </body>
</html>

Puoi cambiare il colore sostituendo a ###### un valore esadecimale. Per i colori semplici puoi anche usare le parole chiave, come “red” o “black”.

Tutti i principali browser supportano l'attributo bgcolor.

Nota:

• L'HTML 5 non supporta <body bgcolor>. Usa il CSS per questo scopo. Come? Tramite il seguente codice: <body style="background-color: color">. Ovviamente, puoi anche farlo in un documento a parte invece del metodo inline.
• Non usare valori RGB in <body bgcolor> perché rgb() è soltanto per il CSS, quindi, non funzionerà in HTML.

L'attributo align in un elemento div

<div align=""> viene utilizzato per allineare il testo di un elemento div a sinistra, destra, al centro, o per giustificarlo.

Ad esempio:

<html>
  <head>
    <title>Div Align Attribute</title>
  </head>
  <body>
    <div align="left">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
      labore et dolore magna aliqua.
    </div>
    <div align="right">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
      labore et dolore magna aliqua.
    </div>
    <div align="center">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
      labore et dolore magna aliqua.
    </div>
    <div align="justify">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
      labore et dolore magna aliqua.
    </div>
  </body>
</html>

Importante!

Quest'attributo non è supportato in HTML5, quindi occorre usare il CSS.

L'attributo align può essere usato per allineare orizzontalmente il contenuto di un div. Nell'esempio qui sotto, il testo viene centrato all'interno dell'elemento div.

<div align="center">
  Questo testo sarà centrato
</div>

**Questo attributo non è supportato in HTML5 e  occorre usare la proprietà CSS text-align

L'attributo color in un elemento font

Questo attributo viene usato per impostare il colore del testo racchiuso in un elemento <font>.

Importante:

Quest'attributo non è supportato in HTML5. Questo articolo di freeCodeCamp specifica quale metodo CSS può essere usato in questo caso.

Nota:

Un colore può essere specificato usando un codice esadecimale o rgb invece di usare il nome del colore.

Esempio:

Nome del colore

<html>
  <body>
    <font color="green">Font color example using color attribute</font>
  </body>
</html>

Codice esadecimale

<html>
  <body>
    <font color="#00FF00">Font color example using color attribute</font>
  </body>
</html>

Codice RGB

<html>
  <body>
    <font color="rgb(0,255,0)">Font color example using color attribute</font>
  </body>
</html>

L'attributo size in un elemento font

Questo attributo specifica la dimensione del carattere sia come valore numerico che relativo. I valori numerici sono compresi tra 1 e 7 con 1 come carattere più piccolo e 3 come dimensione di default. Può essere definita usando un valore relativo, come +2 o -3, che la imposta relativamente al valore dell'attributo size dell'elemento <basefont>, o rispetto a 3, il valore predefinito, nel caso non esista.

Sintassi:

<font size="number">

Esempio:

<html>
  <body>
    <font size="6">Questo è testo!</font>
  </body>
</html>

Nota: l'attributo size per <font> non è supportato in HTML5, quindi devi utilizzare il CSS.

L'attributo align in un elemento img

L'attributo align di un'immagine, specifica dove quest'ultima dovrebbe essere allineata rispetto all'elemento che la contiene.

Valori dell'attributo:
right - allinea l'immagine a destra
left - allinea l'immagine a sinistra
top - allinea l'immagine in alto
bottom - allinea l'immagine in basso
middle - allinea l'immagine al centro

Ad esempio:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Img Align Attribute</title>
  </head>
  <body>
    <p>
      Questo è un esempio. <img src="image.png" alt="Image" align="middle" /> Altro testo qui
      <img src="image.png" alt="Image" width="100" />
    </p>
  </body>
</html>

Possiamo anche allineare a destra se lo vogliamo:

<p>Questo è un altro esempio<img src="image.png" alt="Image" align="right" /></p>

Nota che l'attributo align non è supportato in HTML5, quindi devi fare uso del CSS. Nonostante ciò, viene ancora supportato dalla maggior parte dei browser.

L'attributo width in un elemento img

L'attributo width fa riferimento alla larghezza di un'immagine e il suo valore, compreso tra virgolette, è espresso in pixel.

Ad esempio, se hai già un link a un'immagine impostato con un attributo src, puoi aggiungere l'attributo width, in questo modo:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Img Width Attribute</title>
  </head>
  <body>
    <img src="image.png" alt="Image" width="100" />
  </body>
</html>

Nel blocco di codice qui sopra, la larghezza dell'immagine nell'elemento <img> è impostata a 100 pixel (width="100").

L'attributo src in un elemento img

L'attributo src si riferisce alla sorgente dell'immagine che vuoi visualizzare. Il tag img non mostrerà nessuna immagine se non possiede un attributo src. Devi impostare la sorgente con la posizione dell'immagine, e allora, potrai visualizzare qualsiasi immagine.

Ecco un'immagine del logo di freeCodeCamp all'indirizzo https://avatars0.githubusercontent.com/u/9892522?v=4&s=400

Puoi impostarla come immagine tramite l'attributo src.

<html>
  <head>
    <title>Img Src Attribute Example</title>
  </head>
  <body>
    <img src="https://avatars0.githubusercontent.com/u/9892522?v=4&s=400" />
  </body>
</html>

Il codice qui sopra viene visualizzato così:

L'attributo src è supportato da tutti i browser.

Puoi anche utilizzare un'immagine memorizzata localmente.

Ad esempio, <img src="images/freeCodeCamp.jpeg> funziona se aggiungi una cartella chiamata images che al suo interno contiene freeCodeCamp.jpeg, finché la cartella images si trova nella stessa posizione del file index.html.

../files/index.html

..files/images/freeCodeCamp.jpeg

Entità HTML

Cosa sono le entità HTML?

Alcuni caratteri sono riservati in HTML. Se usi i segni minore (<) o maggiore (>) all'interno del testo, il browser potrebbe confonderli con i tag. Le entità HTML sono caratteri che vengono usati per sostituire caratteri riservati o per caratteri che non appaiono sulla tastiera.

Come si utilizzano?

Un carattere entità ha quest'aspetto:

<!-- format &[nome_entità]; -->
<!-- esempio per il segno minore (<) -->
&lt;

O

<!-- &#[numero_entità]; -->
<!-- esempio per il segno minore (<) -->
&#60;

Questa qui sotto, non è affatto una lista esaustiva, ma contiene le entità principali di cui potresti avere bisogno.

Carattere	Nome Entità	Numero Entità	Descrizione
 	Spazio
!		!	Punto esclamativo
”		"	Virgolette
#		#	Cancelletto
$		$	Simbolo valuta Dollaro americano
¢	¢	¢	Simbolo del Cent
€	€	€	Simbolo valuta Euro
£	£	£	Simbolo valuta Sterlina britannica
¥	¥	¥	Simbolo valuta Yen
%		%	Percentuale
&	&	&	E commerciale
’		'	Apostrofo
(		(	Parentesi sinistra
)		)	Parentesi destra
*		*	Asterisco
+		+	Più
,		,	Virgola
-		-	Trattino
.		.	Punto
/		/	Barra obliqua
©	©	©	Copyright
®	®	®	Marchio registrato
”	"	"	Virgolette doppie
>	>	>	Segno maggiore di
<	&lt;	&#60;	Segno minore di
•	&bull;	&#8226	Punto elenco

Moduli HTML

Fondamentalmente, i moduli vengono usati per raccogliere dati inseriti da un utente, che poi vengono inviati a un server per essere ulteriormente processati. Possono essere utilizzati per diversi tipi di input utente, come nome, email e altro.

I moduli contengono degli elementi di controllo racchiusi tra i tag <form></form>, come gli input, che possono essere di diversi tipi:

• text
• email
• password
• checkbox
• radio
• submit
• range
• search
• date
• time
• week
• color
• datalist

Esempio di codice:

<form>
  <label for="username">Username:</label>
  <input type="text" name="username" id="username" />
  <label for="password">Password:</label>
  <input type="password" name="password" id="password" />
  <input type="radio" name="gender" value="male" />Male<br />
  <input type="radio" name="gender" value="female" />Female<br />
  <input type="radio" name="gender" value="other" />Other
  <input list="Options" />
  <datalist id="Options">
    <option value="Option1"></option>
    <option value="Option2"></option>
    <option value="Option3"></option>
  </datalist>

  <input type="submit" value="Submit" />
  <input type="color" />
  <input type="checkbox" name="correct" value="correct" />Correct
</form>

Altri elementi che un modulo può contenere sono:

• textarea - è un campo di testo su più righe, usato spesso per aggiungere del testo (ad esempio commenti). La dimensione dell'elemento textarea viene definita dal numero di righe e colonne.
• select - insieme ai tag <option></option> crea un menu di selezione a tendina.
• button - questo elemento può essere usato per creare un pulsante cliccabile.

Altre informazioni sui moduli HTML

I moduli HTML sono richiesti quando vuoi raccogliere dei dati dai visitatori di un sito. Ad esempio, durante la registrazione, potresti raccogliere informazioni come nome, indirizzo email, carta di credito, ecc.

Un modulo accetterà un input da un visitatore del sito e poi lo invierà a un'applicazione back-end come CGI, uno script ASP o PHP ecc. L'applicazione back-end svolgerà l'elaborazione dei dati richiesta in base alla logica di business al suo interno.

Ci sono varie forme di elementi disponibili come campi di testo, aree di testo, menu a tendina, pulsanti di opzione, caselle di spunta.

L'elemento HTML <form> viene usato per creare un modulo HTML e ha la seguente sintassi:

<form action="Script URL" method="GET|POST">form elements like input, textarea etc.</form>

Se method non viene definito, sarà GET di default.

form può anche avere un attributo target che specifica dove verrà aperto il link: in una finestra del browser, in un riquadro o nella finestra corrente.

L'attributo action definisce l'azione da svolgere una volta che il modulo viene inviato. Normalmente, quando l'utente clicca sul pulsante di invio, i dati del modulo vengono inviati a una pagina web localizzata a "Script URL". Se l'attributo action viene omesso, l'impostazione predefinita rimanda alla pagina corrente.

Elementi semantici HTML5

Gli elementi semantici descrivono chiaramente il loro significato. Elementi come <header>, <footer> e <article> vengono considerati semantici perché descrivono accuratamente lo scopo dell'elemento e il tipo di contenuto al loro interno.

Un po' di storia

L'HTML è stato originariamente creato come linguaggio di markup per descrivere documenti ai primordi di internet. Con lo sviluppo di internet e il suo utilizzo da parte di sempre più persone, ha avuto bisogno di cambiamenti. Mentre internet era originariamente pensato per la condivisione di documenti di carattere scientifico, adesso le persone lo usano anche per molti scopi diversi. Molto velocemente, le persone hanno iniziato a desiderare di migliorare l'aspetto del web, che inizialmente non è stato progettato per questo. Per questo motivo, i programmatori hanno iniziato a usare diversi trucchetti per agire sul layout delle pagine web in modi diversi. Ad esempio, usando <table></table> per posizionare elementi sulla pagina, invece che mostrare delle informazioni in una tabella. Con l'evoluzione del design del layout, i programmatori hanno iniziato a usare  tag generici "non semantici" come <div>, attribuendo loro attributi class o id per descriverne lo scopo. Ad esempio, scrivendo <div class="header"> invece di <header>. Visto che l'HTML5 è relativamente nuovo, questo uso degli elementi non semantici è attualmente ancora molto comune.

Lista dei nuovi elementi semantici

Gli elementi semantici aggiunti in HTML5 sono:

• <article>
• <aside>
• <details>
• <figcaption>
• <figure>
• <footer>
• <header>
• <main>
• <mark>
• <nav>
• <section>
• <summary>
• <time>

Elementi come <header>, <nav>, <section>, <article>, <aside> e <footer> agiscono più o meno come elementi <div>. Raggruppano in sezioni altri elementi all'interno della pagina. Però, mentre un <div> può contenere qualsiasi tipo di informazione, è semplice identificare il contenuto di un elemento semantico come <header>.

Un esempio di layout con elementi semantici da w3schools

Vantaggi degli elementi semantici

Analizziamo i vantaggi dell'uso degli elementi semantici osservando due blocchi di codice HTML. Il primo blocco contiene elementi HTML semantici:

<header></header>
<section>
  <article>
    <figure>
      <img />
      <figcaption></figcaption>
    </figure>
  </article>
</section>
<footer></footer>

Mentre il secondo utilizza elementi non semantici:

<div id="header"></div>
<div class="section">
  <div class="article">
    <div class="figure">
      <img />
      <div class="figcaption"></div>
    </div>
  </div>
</div>
<div id="footer"></div>

Il primo risulta molto più leggibile. Questa è la prima cosa che puoi notare guardando il blocco con gli elementi semantici. È un semplice esempio, ma come programmatore, potresti aver bisogno di leggere centinaia o migliaia di righe di codice e un codice più semplice da leggere e capire, semplifica notevolmente il lavoro.

Inoltre, è più accessibile. Non sei il solo a trovare gli elementi semantici più facili da comprendere, infatti, anche i motori di ricerca e le tecnologie assistive (come lettori di schermo per utenti ipovedenti) sono in grado di avere una migliore comprensione del contesto e del contenuto dei siti web, fornendo una migliore esperienza per gli utenti.

Nel complesso, gli elementi semantici portano a un codice più coerente. Un programmatore può realizzare un'intestazione con elementi non semantici con <div class="header">, <div id="header">, <div class="head"> o semplicemente con <div>. Ci sono moltissimi modi di creare un'intestazione e la scelta dipende fondamentalmente dalla preferenza personale del programmatore. Un elemento semantico standard, rende tutto più semplice.

Dall'ottobre 2014, l'HTML4 è stato aggiornato a HTML5 e adesso contiene alcuni nuovi elementi semantici. In molti sono confusi dal gran numero di elementi diversi che non sembrano mostrare cambiamenti consistenti.

<section> e <article>

"Qual è la differenza?", ti starai chiedendo. Entrambi questi elementi vengono usati per dividere del contenuto in sezioni e possono essere usati in modo intercambiabile, a seconda della situazione. L'HTML4 offriva soltanto un tipo di elemento contenitore, ovvero il <div>. Nonostante sia ancora utilizzato, l'HTML5 fornisce gli elementi <section> e <article> che possono essere usati per sostituire un <div>.

Gli elementi <section> e <article> sono concettualmente simili e intercambiabili. Per decidere quale dei due utilizzare, considera che:

1. Un <article> è pensato per essere distribuibile indipendentemente o riutilizzabile.
2. Un <section> consiste in raggruppamento tematico di contenuto.

<section>
  <p>Top Stories</p>
  <section>
    <p>News</p>
    <article>Story 1</article>
    <article>Story 2</article>
    <article>Story 3</article>
  </section>
  <section>
    <p>Sport</p>
    <article>Story 1</article>
    <article>Story 2</article>
    <article>Story 3</article>
  </section>
</section>

<header> e <hgroup>

L'elemento <header> è generalmente situato nella parte superiore di un documento, di una sezione o di un articolo e, di solito, contiene l'intestazione principale e alcuni strumenti di navigazione e ricerca.

<header>
  <h1>Company A</h1>
  <ul>
    <li><a href="/home">Home</a></li>
    <li><a href="/about">About</a></li>
    <li><a href="/contact">Contact us</a></li>
  </ul>
  <form target="/search">
    <input name="q" type="search" />
    <input type="submit" />
  </form>
</header>

L'elemento <hgroup> dovrebbe essere usato se vuoi avere un'intestazione principale con una o più sotto-intestazioni.

<hgroup>
  <h1>Titolo 1</h1>
  <h2>Sottotitolo 1</h2>
  <h2>Sottotitolo 2</h2>
</hgroup>

Ricorda che l'elemento <header> può avere qualsiasi contenuto, ma l'elemento  <hgroup> può contenere soltanto altre intestazioni, cioè da <h1> a <h6>, <hgroup> incluso.

<aside>

L'elemento <aside> è pensato per del contenuto che non fa parte del flusso del testo in cui appare, ma vi è correlato in qualche modo. Pensa ad <aside> come a una barra laterale per il contenuto principale della pagina.

<aside>
  <p>
    Questa è una barra laterale, ad esempio, usata per definire un termine o per un breve riferimento storico.
  </p>
</aside>

Prima dell'HTML5, i menu venivano creati con elementi <ul> e <li>. Adesso, insieme a questi, possiamo separare gli oggetti menu con un <nav>, per navigare tra le pagine. Puoi avere un qualsiasi numero di elementi <nav> all'interno di una pagina. Ad esempio, è comune avere una barra di navigazione globale nella parte superiore (in un <header>) e una barra laterale di navigazione locale (in un elemento <aside>).

<nav>
  <ul>
    <li><a href="/home">Home</a></li>
    <li><a href="/about">About</a></li>
    <li><a href="/contact">Contact us</a></li>
  </ul>
</nav>

<footer>

Se c'è un <header>, deve esserci anche un <footer>. Il <footer> si trova generalmente nella parte inferiore di un documento, una sezione o un articolo. Proprio come per <header>, di solito,  il suo contenuto è costituito da meta-informazioni come dettagli sull'autore, informazioni legali e/o link a informazioni inerenti. È possibile anche aggiungere elementi <section> all'interno del <footer>.

<footer>&copy;Company A</footer>

<small>

L'elemento <small> appare spesso all'interno degli elementi <footer> o <aside> contenenti informazioni legati al copyright o note legali e altre postille. Comunque, non è pensato per rendere il testo più piccolo. Descrive soltanto il suo contenuto, senza influenzarne il layout.

<footer><small>&copy;Company A</small> Date</footer>

<time>

L'elemento <time> permette di inserire una data ISO 8601 non ambigua in una versione facilmente leggibile da una persona.

<time datetime="2017-10-31T11:21:00+02:00">Tuesday, 31 October 2017</time>

Perché preoccuparsi di <time>? Mentre le persone possono leggere l'ora e risalire al valore corretto attraverso il contesto, i computer leggono le date in formato ISO 8601, risalendo alla data, all'ora e al fuso orario.

<figure> e <figcaption>

L'elemento <figure> viene usato per racchiudere immagini e <figcaption> per assegnar loro una didascalia.

<figure>
  <img src="https://en.wikipedia.org/wiki/File:Shadow_of_Mordor_cover_art.jpg" alt="Shadow of Mordor" />
  <figcaption>Cover art for Middle-earth: Shadow of Mordor</figcaption>
</figure>

Audio in HTML5

Prima dell'HTML5, i file audio dovevano essere riprodotti in un browser usando un plugin come Adobe Flash.

Il prossimo blocco di codice, aggiunge un file audio denominato tutorial.ogg o tutorial.mp3.

Esempio 1

<audio controls>
  <source src="tutorial.ogg" type="audio/ogg" />
  <source src="tutorial.mp3" type="audio/mpeg" />
  Il tuo browser non supporta elementi audio.
</audio>

Esempio 2

<audio src="https://s3.amazonaws.com/freecodecamp/simonSound1.mp3" controls loop autoplay></audio>

L'attributo controls include controlli audio come play, pausa e volume. Se non usi quest'attributo, i controlli non verranno mostrati.

L'elemento <source> ti permette di indicare un file audio alternativo. Il browser utilizzerà il primo formato riconosciuto. Il testo contenuto tra i tag <audio> e </audio> può essere mostrato nei browser che non supportano l'elemento HTML5 <audio>.

L'attributo autoplay riprodurrà automaticamente il tuo file audio in background. Far scegliere agli utenti di riprodurre l'audio è considerato una pratica migliore.

L'attributo preload indica al browser cosa fare se il lettore non è impostato su autoplay.

Se menzionato, l'attributo loop riprodurrà l'audio in ciclo continuo.

Dato che questo è HTML5, alcuni browser non lo supportano. Puoi verificare quali su https://caniuse.com/#search=audio

Video in HTML5

Prima dell'HTML5, per riprodurre un video in una pagina web, era necessario usare un plugin come Adobe Flash Player. Con l'introduzione dell'HTML5, puoi inserirlo direttamente della pagina web stessa.

Per incorporare un file video in una pagina web, aggiungi questo blocco di codice cambiando l'attributo src del file video.

<video controls>
  <source src="tutorial.ogg" type="video /ogg" />
  <source src="tutorial.mp4" type="video /mpeg" />
 Il tuo browser non supporta gli elementi video. Per favore, aggiornalo alla versione più recente.
</video>

L'attributo controls include i controlli video come play, pausa e volume.

Questa funzione è supportata da tutti browser moderni/aggiornati. Tuttavia, non tutti supportano lo stesso formato video. La mia raccomandazione per un ampio range di compatibilità è il formato MP4, dato che è quello più riconosciuto. Ci sono anche altri due formati (WebM and Ogg) supportati da Chrome, Firefox e Opera.

L'elemento <source> ti permette di indicare un file video alternativo. Il browser sceglierà il primo formato valido. In HTML5, i 3 formati supportati sono: MP4, WebM e Ogg.

Il  testo tra i tag verrà mostrato nel caso in cui il browser non supporti il formato del video.

autoplay

autoplay può essere impostato su true (se aggiunto nel tag) o false (se non viene aggiunto). Se impostato su true, il video verrà riprodotto non appena ne avviene il caricamento. Molte persone trovano che l'autoplay per i video sia fastidioso, quindi usa questa opzione con moderazione. Nota anche che alcuni browser mobile, come Safari per iOS, ignorano questo attributo.

<video autoplay>
  <source src="video.mp4" type="video/mp4" />
</video>

poster

L'attributo poster corrisponde all'immagine che viene mostrata sul video finché l'utente non vi clicca sopra per riprodurlo.

<video poster="poster.png">
  <source src="video.mp4" type="video/mp4" />
</video>

controls

L'attributo controls può essere impostato su true (se aggiunto al tag) o false (se non presente nel tag) e gestisce i controlli come i pulsanti play/pausa o il volume.

<video controls>
  <source src="video.mp4" type="video/mp4" />
</video>

Oltre a quelli menzionati, esistono molti altri attributi opzionali da poter aggiungere per personalizzare il lettore video nella pagina.

Archiviazione web in HTML5

L'archiviazione web permette ad applicazioni web di memorizzare fino a 5 MB di informazioni nel browser per origine (dominio e protocollo).

Tipi di archiviazione web

Esistono due oggetti per memorizzare dati sul client:

window.localStorage: archivia dati senza scadenza e li mantiene finché non vengono rimossi.

// Memorizza
localStorage.setItem("foo", "bar");

// Ottieni
localStorage.getItem("foo"); //restituisce "bar"

window.sessionStorage: archivia dati per una sessione e vengono persi chiudendo il browser o la scheda del browser.

// Memorizza
sessionStorage.setItem("foo", "bar");

// Ottieni
sessionStorage.getItem("foo"); //restituisce "bar"

Dato che l'implementazione attuale supporta soltanto una mappatura stringa-stringa, per altre strutture di dati avrai bisogno di effettuare una conversione in stringhe.

Per questo puoi usare JSON.stringify() e JSON.parse().

Per un dato JSON:

var jsonObject = { 'one': 1, 'two': 2, 'three': 3 };

Convertiamo prima l'oggetto JSON in una stringa e lo salviamo nello storage locale:

localStorage.setItem('jsonObjectString', JSON.stringify(jsonObject));

E per ottenere l'oggetto JSON dalla stringa archiviata:

var jsonObject = JSON.parse(localStorage.getItem('jsonObjectString'));

Link mailto

Un link mailto è un tipo di hyperlink (<a href=""></a>) con parametri speciali che ti permettono di specificare destinatari aggiuntivi, una riga di oggetto e/o un corpo di testo.

La sintassi di base con un destinatario è:

<a href="mailto:friend@something.com">Testo</a>

Aggiungere l'oggetto all'email:

Se vuoi aggiungere un oggetto specifico all'email, fai attenzione ad aggiungere %20 o + ovunque ci sia uno spazio nella riga dell'oggetto. Un modo semplice per assicurarti di avere una formattazione corretta è fare uso di un Decoder / Encoder URL.

Aggiungere il corpo del messaggio:

Analogamente, puoi aggiungere del testo specifico nel corpo dell'email: anche in questo caso gli spazi devono essere sostituiti da %20 o +. Dopo il parametro oggetto, ogni altro parametro aggiuntivo deve essere preceduto da &.

Ipotizza di voler inviare un'email a un amico per comunicargli i tuoi progressi su Free Code Camp:

Address: vuoto

Subject: Grandi notizie

Body: Sto diventando un programmatore

Il tuo link html:

<a href="mailto:?subject=Grandi%20notizie&body=Sto%20diventando%20un%20programmatore">Invia email!</a>

Qui abbiamo lasciato vuoto mailto (mailto:?). Così facendo, si aprirà il client email dell'utente, che dovrà aggiungere l'indirizzo del destinatario.

Aggiungere più destinatari:

Allo stesso modo, puoi aggiungere parametri in Cc e Ccn. Separa ogni indirizzo con una virgola, e ricorda che i parametri devono essere preceduti da &.

<a href="mailto:firstfriend@something.com?subject=Grandi%20notizie&cc=secondfriend@something.com,thirdfriend@something.com&bcc=fourthfriend@something.com">Invia email!</a>

Grazie per aver letto quest'articolo.

Buona programmazione!

A volte potresti voler usare un pulsante per linkare ad un altra pagina o un altro sito web invece di usarlo per consegnare un modulo o scopi simili. Questo è abbastanza facile da fare e può essere realizzato in vari modi.

Come creare un pulsante HTML usando il tag Button dentro un tag A

Un modo semplice è annidare un elemento button dentro un elemento a:

<a href='https://www.freecodecamp.org/'><button>Link To freeCodeCamp</button></a>

Questo trasforma tutto il tuo pulsante in un link.

Come trasformare un link in un pulsante con CSS

Una seconda opzione è creare il tuo link come faresti normalmente usando il tag <a> e stilizzandolo con CSS:

<a href='https://www.freecodecamp.org/'>Link To freeCodeCamp</a>

Una volta che hai creato il tuo link puoi usare CSS per farlo sembrare un pulsante. Per esempio puoi aggiungere un bordo, un colore di sfondo, degli stili per quando ci si passa il mouse sopra.

Puoi leggere di più su come stilizzare i link con CSS qui.

Come mettere un pulsante dentro un modulo usando HTML

Un altro modo per aggiungere un pulsante è annidare un elemento input dentro un elemento form. Specifica l'URL target nell'attributo action dell'elemento form.

<form action="http://google.com">
    <input type="submit" value="Go to Google" />
</form>

Spero che hai trovato questo tutorial utile. Buon apprendimento!