HTML

Il codice HTML

HTML (Hypertext Markup Language) è un linguaggio di marcatura utilizzato per creare pagine web. Consiste in un insieme di tag e attributi che vengono utilizzati per definire la struttura e il contenuto di una pagina web. Ad esempio, i tag <h1> e <p> vengono utilizzati per definire il testo come un titolo o un paragrafo, mentre gli attributi vengono utilizzati per definire le proprietà dei tag, come il colore o la dimensione del testo.

HTML è stato creato nel 1989 da Tim Berners -Lee, un ingegnere del CERN (Organizzazione Europea per la Ricerca Nucleare) in Svizzera. Berners-Lee ha creato HTML come parte di un progetto più ampio chiamato World Wide Web, che ha anche incluso il browser web “WorldWideWeb” (in seguito ribattezzato “Nexus”) e il protocollo di trasferimento ipertestuale (HTTP). L’obiettivo di Berners-Lee era quello di creare un sistema che consentisse ai ricercatori di condividere facilmente informazioni e documenti utilizzando ipertesti, cioè collegamenti tra documenti. HTML è stato il primo linguaggio di marcatura utilizzato per creare pagine web e ancora oggi è uno dei principali linguaggi utilizzati per creare siti web.

HTML è stato sviluppato e migliorato nel corso degli anni per soddisfare le esigenze dei creatori di siti web e dei navigatori web.

HTML 1.0: La prima versione di HTML, rilasciata nel 1993, era molto semplice e supportava solo pochi tag, come <p>, <h1> e <a>.

HTML 2.0: La seconda versione di HTML, rilasciata nel 1995, ha introdotto nuovi tag come <ul>, <ol> e <li> per creare elenchi non ordinati e ordinati.

HTML 3.2: La terza versione di HTML, rilasciata nel 1997, ha introdotto nuovi tag come <table> e <form>, nonché supporto per il colore e le immagini.

HTML 4.0: La quarta versione di HTML, rilasciata nel 1997, ha introdotto nuovi tag come <div> e <span> per la strutturazione del contenuto, nonché supporto per i CSS (Fogli di Stile in cascata) e gli script.

HTML 5: La quinta versione di HTML, rilasciata nel 2014, ha introdotto nuovi tag come <video>, <audio>, <canvas> e <svg> per il supporto dei media, nonché nuovi tag semantici come <header>, <nav>, <article> e <section> per la strutturazione del contenuto. Negli anni a seguire sono state rilasciate versioni minori fino ad arrivare alla 5.4 nel 2020.

In generale, ogni nuova versione di HTML ha introdotto nuovi tag e funzionalità per rendere più facile la creazione di siti web e per fornire maggiori opportunità per gli sviluppatori di creare contenuti interattivi e multimediali.

Nello 1994 viene fondato il World Wide Web Consortium, in seguito alla forte adozione del linguaggio dopo le prime applicazioni web commerciali. Da quel momento in poi, il W3C sarà responsabile dello sviluppo dell’HTML.

HTML è un linguaggio di pubblico dominio.

Struttura della pagina

<!DOCTYPE html>
<!-- definisco la lingua del contenuto della pagina -->
<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>HTML - Struttura della pagina</title> 
</head>
<body>

<!-- Il tuo codice HTML va qui -->

</body>
</html>

Nota:
<!DOCTYPE html> definisce che il file è una pagina HTML e in particolare che si tratta di un documento secondo lo standard HTML5. Va sempre inserito.

<html lang="it"> è la radice del documento, si trova all’inizio e alla fine del codice. L’attributo lang="it", definisce la lingua del contenuto del documento. In questo, il caso sarà italiano.

<head> è l’intestazione, che non verrà visualizzata nel contenuto della pagina, contiene varie meta-informazioni (titolo, autore, parole chiave, link alle risorse da caricare).

<title> è il titolo del documento che non verrà visualizzato nel contenuto della pagina, ma nella barra del browser e nei risultati di ricerca di Google.

<body> Il corpo del documento. Tutto il contenuto visibile nel browser è contenuto in questo tag.

Commenti

<!-- Questo è un commento  -->

Nota:
Questo codice sarà ignorato e non verrà visualizazto nel browser.
Si consiglia di scrivere il codice in modo esplicito in modo da evitare la scrittura di commenti.

Titoli

<h1>
  Sono il titolo più importante
</h1>
<h2>
  Sì, vero h1, ma poi ci sono io
</h2>
<h3>
  Anch'io vengo utilizzato, eh!
</h3>
<h4>
  Hello!
</h4>
<h5>
  Ciao, io sono il tag h5
</h5>
<h6>
  Gli ultimi saranno i primi
</h6>

Nota:
Il tag <h1> deve essere presente una sola volta nella pagina.

Tutti i tag <h*> sono elementi di tipo block.

Paragrafi

<p>
  Imparare a scrivere codice ti aiuterà a pulire meglio la casa.
</p>

Nota:
I tag <p> è un elemento di tipo block.

Lista non ordinata

<ul>
  <li>
    Gatto numero uno
  </li>
  <li>
    Gatto numero due
  </li>
  <li>
    Gatto numero tre
  </li>
  <li>
    Gatto numero quattro
  </li>
</ul>

Nota:
<ul> può avere solo <li> come discendenti diretti.

I tag <ul> e <li> sono elementi di tipo block.

Lista ordinata

<ol>
  <li>
    Topo numero uno
  </li>
  <li>
    Topo numero due
  </li>
  <li>
    Topo numero tre
  </li>
  <li>
    Topo numero quattro
  </li>
</ol>

La lista ordinata si contraddistingue per la numerazione degli elementi.
Aggiungendo l’attributo type all’interno del tag <ol> possiamo indicare se le voci in elenco possono iniziare con numeri, lettere o con i numeri romani.

<ol type="1"> numeri interi “arabi” (valore di default, non serve specificarlo)
<ol type="a"> alfabeto minuscolo
<ol type="A"> alfabeto maiuscolo
<ol type="i"> numeri romani minuscoli
<ol type="I"> numeri romani maiuscoli

Inoltre, è possibile gestire la numerazione aggiungendo l’attributo start al tag <ol>, oppure, aggiungendo l’attributo value al tag <li> per gestire la partenza della numerazione da un certo valore.
Vale anche per l’alfabeto.

<ol start="10"> indica il valore iniziale da cui far partire la numerazione della lista, in questo caso partirà dal numero 10
<li value="30"> indica il valore applicato alla numerazione di un certo elemento e modifica la numerazione anche degli elementi successivi nella lista.

I tag <ol> e <li> sono elementi di tipo block.

Lista di definizione

<dl>
    <dt>Cane</dt>
    <dd>Abbaia ma non morde</dd>
    <dt>Gatto</dt>
    <dd>Fa le fusa ma ti graffia</dd>
    <dt>Topo</dt>
    <dd>Vuole solo il formaggio</dd>
</dl>

Le liste di definizione sono un elemento poco utilizzato nelle pagine web.

Il loro scopo è quello di elencare descrittivamente una serie di elementi costituiti da termine e descrizione.

<dl> è il contenitore della lista di definizione
<dt> contiene il termine
<dd> contiene la descrizione

I tag <dl>, <dt> e <dd> sono elementi di tipo block.

Bold, grassetto

<strong>Oggi non voglio fare nulla.</strong>

Nota:
È possibile utilizzare anche il tag <b> ma non ha lo stesso valore semantico di <strong>.

Il tag <strong> è un elemento di tipo inline.

Italic, corsivo

<em>Voglio andare sulla luna.</em>

Nota:
È possibile utilizzare anche il tag <i> ma non ha lo stesso valore semantico di <em>.

I tag <em> è un elemento di tipo inline.

Interruzione di riga, andare a capo

Puoi imparare a scrivere il codice<br>
anche stando sul divano,<br>
ti basta un computer.

Il tag <br> è un elemento di tipo inline.

Linea orizzontale

Oggi voglio andare al mare.
<hr>
Sono bravo nei lavori domestici.

Il tag <hr> viene utilizzato per definire un cambio di tematica.
Disegna una riga retta.

Il tag <hr> è un elemento di tipo block.

div

<div>Il codice HTML</div>
<div class="coding-sleep">aiuta a rilassarsi.</div>

Nota:
Il tag <div> è un contenitore generico non semantico.
È utilizzato per dividere e separare contenuti in html.

Il tag <div> è un elemento di tipo blocco.

article

<article>
    <h2>Il caffè</h2>
    <p>Il caffè ti accompagnerà per tutti i progetti che dovrai realizzare.</p>
</article>

<article>
    <h2>Il the</h2>
    <p>Il the, forse, lo prenderai la domenica in compagnia del tuo animale domestico.</p>
</article>

<article>
    <h2>Un bicchiere d'acqua</h2>
    <p>Bisogna pur risciacquare la bocca dopo aver lavato i denti.</p>
</article>

Nota:
Il tag <article> definisce un contenuto indipendente.
Deve aver senso da solo indipendentemente dal resto del contenuto del sito web.

Alcuni esempi di utilizzo:

Messaggi di blog
Schede di un prodotto
Articolo di giornale

Il tag <article> è un elemento di tipo blocco.

aside

<p>Ho deciso di acquistare un bulldog Francese. È pigro come me.
<aside>
    <h4>Bulldog Francese</h4>
    <p>Il bulldog Francese è una razza di tipo molossoide di taglia piccola.<br>
    Il Bulldog Francese è una razza che raggiunge un peso compreso  fra gli 8kg e i 14kg.</p>
</aside>

Nota:
Il tag <aside> ha contenuti che sono marginalmente correlati al contenuto circostante.
Spesso, viene utilizzato come barra laterale in un documento.

Il tag <aside> è un elemento di tipo blocco.

details

<details>
  <summary>Bulldog francese</summary>
  <p>l bulldog francese è una razza di tipo molossoide di taglia piccola.<br>
    Il bulldog francese è una razza che raggiunge un peso compreso fra gli 8kg e i 14kg.</p>
</details>

<!-- con l'aggiunta dell'attributo open, l'elemento appare subito aperto. -->
<details open="open">
  <summary>Bulldog francese</summary>
  <p>l bulldog francese è una razza di tipo molossoide di taglia piccola.<br>
    Il bulldog francese è una razza che raggiunge un peso compreso fra gli 8kg e i 14kg.</p>
</details>

Nota:
Il tag <details> permette di avere un elemento con contenuti aggiuntivi che l’utente può aprire e chiudere su richiesta.

L’impostazione predefinita è chiuso. Quando è aperto, si espande e visualizza il contenuto al suo interno.
Aggiungendo l’attributo open="open" l’elemento è aperto e il contenuto visualizzato.

All’interno del tag è possibile inserire qualsiasi tipo di contenuto.

Suggerimento: il tag <details> viene usato assieme al tag <summary> per specificare un titolo visibile per i dettagli.

Il tag <details> è un elemento di tipo blocco.

figcaption

<figure>
  <img src="bulldog.jpg" alt="Bulldog Francese">
  <figcaption>Fig.1 - Bulldog Francese</figcaption>
</figure>

Nota:
Il tag <figcaption> (opzionale) definisce una didascalia per il contenuto del tag <figure>.
Può essere collocato come primo o come ultimo elemento all’interno del tag <figure>.

Il tag <figcaption> è un elemento di tipo blocco.

figure

<figure>
  <img src="bulldog.jpg" alt="Bulldog Francese">
  <figcaption>Fig.1 - Bulldog Francese</figcaption>
</figure>

Nota:
Il tag <figure> definisce un contenuto supplementare e autonomo, come illustrazioni, diagrammi, immagini, elenchi di codici, ecc.

Il tag <figure> è un elemento di tipo blocco.

footer

<footer>
  <p>Copyright © 1854 - 1892 • Bulletti Ciotole • Tutti i diritti risevati.</p>
</footer>

Nota:
Il tag <footer> definisce il piè pagina di un documento o di una sezione.
Ad esempio, può contenere queste informazioni:

informazioni sull’autore
informazioni sul copyright
informazioni di contatto
mappa del sito

È possibile avere più tag <footer> nello stesso documento.

Il tag <footer> è un elemento di tipo blocco.

header

<header>
  <h1>Il titolo principale della pagina</h1>
  <p>Creata da Carlotta Bulletti</p>
</header>

Nota:
Il tag <header> definisce l’intestazione di un documento o di una sezione.

All’interno del tag <header> generalmente possiamo trovare:

un titolo (<h1> – <h6>)
logo
informazioni sull’autore
navigazione

Attenzione: l’elemento <header> non può essere inserito all’interno del tag <footer>, <address> o di un altro tag <header>.

È possibile avere più tag <header> nello stesso documento.

Il tag <header> è un elemento di tipo blocco.

main

<main>
  <h1>Le bevande di tutti i giorni</h1>
  <p>Caffè, the e acqua, le bevande preferite di chi non finisce le</p>

  <article>
    <h2>Il caffè</h2>
    <p>Il caffè ti accompagnerà per tutti i progetti che dovrai</p>
  </article>

  <article>
    <h2>Il the</h2>
    <p>Il the, forse, lo prenderai la domenica in compagnia del</p>
  </article>

  <article>
    <h2>Un bicchiere d'acqua</h2>
    <p>Bisogna pur risciacquare la bocca dopo aver</p>
  </article>
</main>

Nota:
Il tag <main> definisce il contenuto principale di una pagina.

Il contenuto presente nel tag <main> deve essere esclusivo. Al suo interno non devono essere presenti elementi che si ripetono in tutte le pagina, come barre laterali, link di navigazione, informazioni sul copyright, loghi del sito e moduli di ricerca.

In una pagina web, il tag <main>, può essere presente una sola volta. Inoltre, non deve essere inserito all’interno di un elemento <article>, <aside>, <footer>, <header>.

Il tag <main> è un elemento di tipo blocco.

mark

<p>Tanto va la <mark>gatta</mark> al lardo che ci lascia lo zampino</p>

Nota:
Il tag <mark> serve a evidenziare il testo.

Il tag <mark> è un elemento di tipo inline.

nav

<nav>
  <a href="i-gatti.html">I Gatti</a>
  <a href="i-cani.html">I Cani</a>
  <a href="i-topi.html">I Topi</a>
  <a href="tu.html">Chi scrive codice</a>
</nav>

Nota:
Il tag <nav> definisce una sezione della pagina che contiene i link di navigazione.

Attenzione: non tutti i link di navigazione devono trovarsi all’interno del tag <nav>.
Il tag <nav> è riservato principalmente a grandi menu di navgazione

Il tag <nav> è un elemento di tipo blocco.

section

<section>
  <h2>Sviluppatore Web</h2>
  <p>Un programmatore è una persona che inizia a contare da zero.</p>
</section>

<section>
  <h2>Unicorno</h2>
  <p>Sei un designer e anche uno sviluppatore</p>
</section>

Nota:
Il tag <section> definisce una sezione di una pagina web che raggruppa contenuti tematici, generalmente, con un titolo.

Aluni esempi di utilizzo del tag <section>:

Introduzione
gruppi di notizie
informazioni di contatto

Il tag <section> è un elemento di tipo blocco.

summary

<details>
  <summary>Bulldog francese</summary>
  <p>l bulldog francese è una razza di tipo molossoide di taglia piccola.<br>
    Il bulldog francese è una razza che raggiunge un peso compreso  fra gli 8kg e i 14kg.</p>
</details>

Nota:
Il tag <summary> definisce l’intestazione visibile per l’elemento <details>. Cliccando l’elemento <summary> si potrà visualizzare/nascondere l’elemento <details>.

Attenzione: il tag <summary> deve essere il primo tag all’interno del tag <details>.

Il tag <summary> è un elemento di tipo blocco.

address

<address>
Scritto da <a href="mailto:carlotta.bulletti@icanirussatori.com">Carlotta Bulletti</a>.<br>
Vieni a trovare Carlotta a:<br>
Parco dei Bulletti<br>
6900 Lugano<br>
Svizzera
</address>

Alcune informazioni di contatto che possono essere inserite all’interno del rag <address> possono essere:

il tag <address> racchiude le informazioni di contatto dell’autore di un documento o di un articolo.

un indirizzo e-mail
un URL
un indirizzo fisico

Attenzione: solitamente il testo all’interno del tag <address> viene visualizzato in corsivo.

Il tag <address> è un elemento di tipo blocco.

Form

<form action="login.php" method="post" enctype="multipart/form-data" name="login_form">
<!-- elementi del formulario -->
</form>

Il tag <form> è un elemento utilizzato per la creazione di moduli per l ‘immissione di dati da parte dell’utente.

action è l’attributo necessario in cui inserire l’indirizzo della pagina che riceverà i dati del formulario. Può essere un link relativo oppure un link assoluto.

method è l’attributo che definisce la modalità in cui verranno spediti i dati del formulario. Esistono due valori possibili:

get, i dati vengono visualizzati nella barra dell’indirizzo del browser, ha un limite di circa 3000 caratteri (lunghezza massima si un URL), non utilizzarlo per inviare dati sensibili
post, i dati inviati non vengono visualizzati nella barra di indirizzo del browser, non ha limiti di dimensione

enctype opzionale, è l’attributo che definisce la codifica dell’invio dei dati del formulario.
Esistono tre valori possibili:

application/x-www-form-urlencoded, è l’impostazione predefinita se non viene indicato. Tutti i caratteri sono codificati prima dell’invio (gli spazi sono convertiti in simboli “+” e i caratteri speciali sono convertiti in valori ASCII HEX).
multipart/form-data necessario quando nel formulario è presente la possibilità di caricare uno o più file.
text/plain sconsigliato, invia i dati senza nessuna codifica.

name opzionale, definisce il nome del formulario, utile nel caso nella stessa pagina sono presenti più formulari.

Il tag <form> è un elemento di tipo blocco.

input

Il tag <input> specifica un campo di input in cui l’utente può inserire dei dati.
È l’elemento più importante del formulario.

L’elemento <input> può essere visualizzato in diversi modi, a seconda del valore dell’attributo type.

Il tag input è un elemento di tipo inline.

button

<input type="button" value="Click me" onclick="popup()">

Il tag <input type="button"> definisce un bottone cliccabile.
Spesso è utilizzato per richiamare uno script in Javascript.

value è l’attributo che definisce la scritta del bottone.

onclick="popup()" `è l’attributo che definisce richiama lo script in Javascript, in questo caso una funzione dal nome popup().

Il tag <input type="button"> è un elemento di tipo inline.

checkbox

<form action="color.php">
    <div>
        <label for="giallo">Giallo</label>
        <input type="checkbox" id="giallo" name="color" value="giallo">
    </div>
    <div>
        <label for="verde">Verde</label>
        <input type="checkbox" id="verde" name="color" value="verde">
    </div>
    <div>
        <label for="viola">Viola</label>
        <input type="checkbox" id="viola" name="color" value="viola">
    </div>
    <button type="submit">Invia la tua scelta</button>
</form>

Il tag <input type="checkbox"> è utilizzato per consentire all’utente di selezionare una o più opzioni.

type definisce il tipo di input. In questo caso checkbox.

id è l’identificativo, univoco, del tag input. L’attributo id è opzionale ma obbligatorio quando si vuole associare il tag input al tag label.

name è il nome della checkbox. Assegnando lo stesso valore a più checkbox, si creerà un associazione allo stesso gruppo di opzioni.

value è il valore della checkbox.

checked è un valore booleano. Se è presente la checkbox sarà già selezionata.

Suggerimento: per migliorare le pratiche di accessibilità, associa sempre il tag <label>.
Per associare il tag label al tag input è sufficiente che l’attributo for, presente nel tag label, abbia lo stesso valore dell’attributo id presente nel tag input.

Il tag <input type="checkbox"> è un elemento di tipo inline.

color

<form action="color.php">
      <div>
          <label for="favcolor">Scegli il tuo colore preferito</label>
          <input type="color" id="favcolor" name="favcolor" value="#ff0000">
      </div>
      <button type="submit">Invia la tua scelta</button>
</form>

Il tag <input type="color"> definisce un selezionatore di colori (colopicker).

type definisce il tipo di input. In questo caso color.

id è l’identificativo, univoco del tag input. L’attributo id è opzionale ma obbligatorio quando si vuole associare il tag input al tag label.

name è il nome del tag input.

value è il valore predefinito del tag input.

Attenzione: l’attributo color non è supportato in Internet Explore 11 e Safari 9.1 o precedenti.

Il tag <input type="color"> è un elemento di tipo inline.

date

<form action="compleanno.php">
    <div>
        <label for="birthday">Il tuo compleanno:</label>
        <input type="date" id="birthday" name="birthday">
    </div>
    <button type="submit">Invia la data del tuo compleanno</button>
</form>

Il tag <input type="date"> definisce un selezionatore di data (datepicker).

type definisce il tipo di input. In questo caso date.

id è l’identificativo, univoco del tag input. L’attributo id è opzionale ma obbligatorio quando si vuole associare il tag input al tag label.

name è il nome del tag input.

Attenzione: l’attributo date non è supportato in Internet Explore 11 e Safari 14.1 o precedenti

Il tag <input type="date"> è un elemento di tipo inline.

datetime-local

<form action="compleanno.php">
    <div>
        <label for="birthdaytime">Il tuo compleanno (data e ora):</label>
        <input type="datetime-local" id="birthdaytime" name="birthdaytime">
    </div>
    <button type="submit">Invia la data del tuo compleanno</button>
</form>

il tag <input type="datetime-local"> definisce un selezionatore di data e ora (datepicker).

type definisce il tipo di input. In questo caso datetime-local.

id è l’identificativo, univoco del tag input. L’attributo id è opzionale ma obbligatorio quando si vuole associare il tag input al tag label.

name è il nome del tag input.

Attenzione: l’attributo datetime-local non è supportato in Internet Explore 11 e Safari 14.1 o precedenti

Il tag <input type="datetime-local"> è un elemento di tipo inline.

email

<form action="compleanno.php">
    <div>
        <label for="email">Inserisci la tua email:</label>
        <input type="email" id="email" name="email">
    </div>
    <button type="submit">Invia il tuo contatto</button>
</form>

<!--  Esempio con valore predefinito preimpostato -->
<form action="compleanno.php">
    <div>
        <label for="email">Inserisci la tua email:</label>
        <input type="email" id="emails" name="email" value="mario@rossi.com">
    </div>
    <button type="submit">Invia il tuo contatto</button>
</form>

<!--  Esempio con inserimento multiplo di indirizzi email-->
<span>Separa ogni indirizzo email con un a virgola</span>
<form action="compleanno.php">
    <div>
        <label for="email">Inserisci la tua email:</label>
        <input type="email" id="emails" name="email" multiple>
    </div>
    <button type="submit">Invia il tuo contatto</button>
</form>

Il tag <input type="mail"> definisce un campo per un indirizzo email.

type definisce il tipo di input. In questo caso mail.

id è l’identificativo, univoco del tag input. L’attributo id è opzionale ma obbligatorio quando si vuole associare il tag input al tag label.

name è il nome del tag input.

value permette di inserire un valore predefinito.

mulitpli è l’attributo che permette l’inserimento di più indirizzi email

Il tag <input type="email"> è un elemento di tipo inline.