L’HTML è la base del web, c’è dappertutto! Ogni pagina internet che visualizzi ha del codice HTML al suo interno. Se vuoi diventare uno sviluppatore web quindi la prima cosa da fare è un corso intensivo di HTML!
Questo corso è rivolto ai principianti, pertanto se conosci già l’HTML questo articolo non fa per te, se invece sei agli inizi BENVENUTO e buono studio! Vedrai che imparerai presto a cerare fantastici contenuti web!
L’HTML non è proprio un linguaggio di programmazione, ma è un linguaggio di markup, infatti HTML è l’acronimo di HyperText Markup Language.
Ciò significa che l’HTML non fa operazioni di calcolo, ma sostanzialmente indica al browser come montare la pagina, cosa posizionare e come posizionarlo.
Cosa serve per iniziare
Per iniziare a scrivere codice HTML** non servono super computer** nè programmi pesanti e costosi.
Se vuoi iniziare a sviluppare contenuti per il web inizialmente** ti bastano 2 cose:**
web browser
editor di testo
Web Browser
Sviluppando qualcosa che sarà fruibile attraverso un browser,** il browser è fondamentale**. Ne esistono veramente molti e tutti validi, ma il mio consiglio è di utilizzare** Google Chrome**.
Se non sei un fan del browser di google eccoti alcune alternative:
L’altro software **fondamentale **per sviluppare per il web è un editor di testo.
Un editor di testo è un programma che consente di scrivere il codice. Si potrebbe utilizzare banalmente il classico editor di testo del sistema operativo (Blocco note o Text edit), ma fortunatamente esistono software dedicati allo sviluppo che rendono la scrittura del codice molto più semplice.
Il mio consiglio è di utilizzare VS Code, a mio avviso in questo momento è il migliore in assoluto.
Anche qui hai comunque molta scelta! Ecco alcune delle migliori **alternative **a VS Code:
Ora che hai scaricato un browser e un editor di testo, possiamo crerare il nostro primo file HTML.
Creiamo una **cartella **sul desktop chiamata “HTML“. Ora apriamo questa cartella con VS Code, facendo click con il tasto destro del mouse all’interno della cartella e cliccando “Apri con Code“
Ora possiamo creare il nostro file con VS Code.
Clicchiamo “CTRL+N” per creare un nuovo file e poi “CTRL+S” per salvarlo, con il nome “index.html“.
Tutti i file HTML devono avere estensione .html, cioè finire con .html, questo farà capire al browser il tipo di file che sta leggendo.
Puoi creare i file anche tramite il menù in alto, cliccando su “File-New File” oppure con l’icona specifica nella barra laterale sulla sinistra.
PERFETTO! Abbiamo creato il nostro primo file HTML!
Struttura base
Ogni pagina HTML è diversa, ma tutte hanno una struttura base comune, uno _**scheletro **_sul quale sono costruite.
VS Code ci permette di creare questo scheletro in maniera semplicissima e molto veloce.
Ci basterà aprire il file, inserire un punto esclamativo e cliccare il tasto “tab“. In questo modo VS Code creerà la struttura base della nostra pagina HTML in automatico.
Se hai fatto questa operazione dovresti vedere comparire questo codice all’interno del file:
Questo è lo _**scheletro **_di ogni pagina HTML. Andiamo ad analizzarlo!
I tag HTML
L’HTML è un linguaggio basato sui tag.
Ogni tag indica una** tipologia di contenuto.**
Struttura base: contenuto
Qualsiasi contenuto è sempre inserito all’interno di un tag, che indica al browser come trattare quel tipo di contenuto.
Generalmente i tag hanno un inizio e una fine, il tag di fine inizia con uno slash(/).
Esistono però alcuni tag senza tag di chiusura, come il tag , che è utilizzato per andare a capo.
Esempi di tag:
<html></html>
Questi tag indicano dove inizia e dove finisce la pagina HTML. Tutto il contenuto va inserito fra questi due!
<head></head>
Questo tag permette di inserire delle informazioni relative alla pagina, come il titolo, gli stili da inserire, gli script etc. (Questo ti sarà più chiaro man mano che andrai avanti)
<body></body>
All’interno di questi tag c’è il vero e proprio contenuto della pagina
<h1>La mia prima pagina web</h1>
I titoli sono inseriti dentro i tag heading, che vanno dall’1 al 6, in ordine di importanza. Il titolo della pagina deve essere inserito fra i tag
, il sottotitolo e così via.
<br>
Questo tag indica al browser di andare a capo.
<!-- Questo è un commento -->
In qualiasi tipo di codice è molto importante inserire i commenti. Questi permettono di inserire delle note all’interno del codice, per poter capire meglio cosa si sta scrivendo o per inserire delle frasi rivolte ai colleghi etc.
<ul>
<li>Questo è un item di un elenco</li>
<li>Questo è un altro item</li>
</ul>
Il tag <ul> permette di inserire un elenco. Per inserire un elenco numerato c’è il tag «
« (Unordered List e Ordered List).
Ogni elemento di un elenco deve essere inserito con il tag <li> (List Item)
Sporchiamoci le mani
Iniziamo ora a modificare lo **_scheletro _**della nostra pagina HTML.
Iniziamo a modificare la lingua, modificando “en” con “it” nella **riga 2 **del nostro file.
La riga 2 sarà quindi così:
<html lang="en">
Ora andiamo sulla riga 6 e modifichiamo il titolo, nel tag </em></strong>.</p>
<p>Chiamiamo questa pagina “<strong>La mia prima pagina web</strong>“</p>
<pre class="wp-block-code"><code><title>La mia prima pagina web</title></code></pre>
<p>Ora salviamo il file e apriamolo, semplicemente aprendo la cartella “<strong>HTML</strong>” e facendoci <strong>doppio click</strong> sopra.</p>
<p>Ci troveremo di fonte una <strong>pagina completamente bianca</strong>, perché non abbiamo ancora inserito nessun codice nel contenuto.</p>
<p>Possiamo vedere però che il nome della scheda in alto è “<strong>La mia prima pagina web</strong>“. Questo è il <strong><em><title></em></strong> della nostra pagina.</p>
<p><strong>Ora inseriamo un po’ di contenuto.</strong></p>
<p>Andiamo <strong>fra i tag <body></body></strong> e inseriamo questo:</p>
<pre class="wp-block-code"><code> <h1>La mia prima pagina web</h1>
<p>Benvenuto nella mia prima pagina web!</p>
<br><!-- questo è un a capo-->
<p>Questo è il secondo paragrafo della mia prima pagina web</p>
<br>
<h2>Elenco</h2>
<ul>
<li>Primo Item</li>
<li>Secondo Item</li>
</ul></code></pre>
<p>Ora** salva la pagina e aggiornala nel browser**, vedrai comparire del contenuto!</p>
<div class=""><img class="img-fluid "
src="/img/uploads/2022/03/image-1-1400x1028.png"
srcset="/img/uploads/2022/03/image-1-576x423.webp 576w, /img/uploads/2022/03/image-1-768x564.webp 768w, /img/uploads/2022/03/image-1-992x728.webp 992w, /img/uploads/2022/03/image-1-1200x881.webp 1200w, /img/uploads/2022/03/image-1-1400x1028.webp 1400w" sizes="100vw"
height="1028"
width="1400"
>
</div>
<p>Non è difficile da capire, ogni tag spiega se stesso.</p>
<p><strong>CONGRATULAZIONI!</strong></p>
<p><strong>Hai appena creato la tua prima pagina web!</strong></p>
<p>Ma addentriamoci ancora un po’ nell’HTML.</p>
<h2 id="inseriamo-unimmagine" class="heading">Inseriamo un’immagine <a href="#inseriamo-unimmagine" aria-labelledby="inseriamo-unimmagine">
<!-- <i class="fas fa-link anchor"></i> --><svg class="svg-inline--fa fas fa-link anchor" fill="currentColor" aria-hidden="true" role="img" viewBox="0 0 640 512"><path d="M579.8 267.7c56.5-56.5 56.5-148 0-204.5c-50-50-128.8-56.5-186.3-15.4l-1.6 1.1c-14.4 10.3-17.7 30.3-7.4 44.6s30.3 17.7 44.6 7.4l1.6-1.1c32.1-22.9 76-19.3 103.8 8.6c31.5 31.5 31.5 82.5 0 114L422.3 334.8c-31.5 31.5-82.5 31.5-114 0c-27.9-27.9-31.5-71.8-8.6-103.8l1.1-1.6c10.3-14.4 6.9-34.4-7.4-44.6s-34.4-6.9-44.6 7.4l-1.1 1.6C206.5 251.2 213 330 263 380c56.5 56.5 148 56.5 204.5 0L579.8 267.7zM60.2 244.3c-56.5 56.5-56.5 148 0 204.5c50 50 128.8 56.5 186.3 15.4l1.6-1.1c14.4-10.3 17.7-30.3 7.4-44.6s-30.3-17.7-44.6-7.4l-1.6 1.1c-32.1 22.9-76 19.3-103.8-8.6C74 372 74 321 105.5 289.5L217.7 177.2c31.5-31.5 82.5-31.5 114 0c27.9 27.9 31.5 71.8 8.6 103.9l-1.1 1.6c-10.3 14.4-6.9 34.4 7.4 44.6s34.4 6.9 44.6-7.4l1.1-1.6C433.5 260.8 427 182 377 132c-56.5-56.5-148-56.5-204.5 0L60.2 244.3z"/></svg>
</a></h2>
<p>Per inserire un’immagine in una pagina HTML bisogna utilizzare il tag <strong><img/></strong>, con alcuni attributi.</p>
<p>Gli **attributi **forniscono **informazioni aggiuntive **ai tag html. Per esempio il tag <img/> indicherà al browser di inserire un’immagine, ma quale immagine? A questa domanda rispondiamo con l’attributo “<strong>src</strong>“, cioè la sorgente da cui il browser può attingere per inserire l’immagine.</p>
<p>Esempio:</p>
<pre class="wp-block-code"><code><img src="immagini/foto.jpg"></code></pre>
<p>In questo esempio il browser inserirà l’immagine** foto.jpg **presente nella cartella “<strong>immagini</strong>“.</p>
<p>Proviamo ora ad inserire un’immagine nella nostra pagina.</p>
<p>Andiamo nella nostra cartella “<strong>HTML</strong>” sul desktop e creiamo una cartella chiamata “<strong>img</strong>“, all’interno di questa cartella inseriamo ora una qualsiasi immagine in formato <strong>JPG</strong>.</p>
<p>Adesso** richiamiamo l’immagine nel nostro file <em>index.html</em>,** in questo modo:</p>
<pre class="wp-block-code"><code><img src="img/immagine.jpg"></code></pre>
<p>Ora **salviamo **il file e **aggiorniamo **il browser.</p>
<div class=""><img class="img-fluid "
src="/img/uploads/2022/03/image-2-768x370-1-1400x674.png"
srcset="/img/uploads/2022/03/image-2-768x370-1-576x278.webp 576w, /img/uploads/2022/03/image-2-768x370-1-768x370.webp 768w, /img/uploads/2022/03/image-2-768x370-1-992x478.webp 992w, /img/uploads/2022/03/image-2-768x370-1-1200x578.webp 1200w, /img/uploads/2022/03/image-2-768x370-1-1400x674.webp 1400w" sizes="100vw"
height="674"
width="1400"
>
</div>
<p>Vediamo che l’immagine viene visualizzata nella nostra pagina html.</p>
<p>Però è un po’** troppo grande!** Almeno nel mio caso, questo dipende dalle dimensioni dell’immagine.</p>
<p>Per visualizzare l’immagine in modo più carino possiamo aggiungere un altro attributo al nostro tag <img/>: <strong>l’attributo height o width</strong></p>
<pre class="wp-block-code"><code> <img src="img/immagine.jpg" width="200"></code></pre>
<p>In questo modo sto <strong>impostando la larghezza dell’immagine a 200px.</strong> Ed ecco che si vede tutto decisamente meglio.</p>
<div class=""><img class="img-fluid "
src="/img/uploads/2022/03/image-3-1400x1660.png"
srcset="/img/uploads/2022/03/image-3-576x683.webp 576w, /img/uploads/2022/03/image-3-768x911.webp 768w, /img/uploads/2022/03/image-3-992x1176.webp 992w, /img/uploads/2022/03/image-3-1200x1423.webp 1200w, /img/uploads/2022/03/image-3-1400x1660.webp 1400w" sizes="100vw"
height="1660"
width="1400"
>
</div>
<p>In questo modo posso **ridimensionare **l’immagine.</p>
<p>Ora **andiamo ancora più a fondo **nell’html.</p>
<h2 id="i-contenitori" class="heading">I contenitori <a href="#i-contenitori" aria-labelledby="i-contenitori">
<!-- <i class="fas fa-link anchor"></i> --><svg class="svg-inline--fa fas fa-link anchor" fill="currentColor" aria-hidden="true" role="img" viewBox="0 0 640 512"><path d="M579.8 267.7c56.5-56.5 56.5-148 0-204.5c-50-50-128.8-56.5-186.3-15.4l-1.6 1.1c-14.4 10.3-17.7 30.3-7.4 44.6s30.3 17.7 44.6 7.4l1.6-1.1c32.1-22.9 76-19.3 103.8 8.6c31.5 31.5 31.5 82.5 0 114L422.3 334.8c-31.5 31.5-82.5 31.5-114 0c-27.9-27.9-31.5-71.8-8.6-103.8l1.1-1.6c10.3-14.4 6.9-34.4-7.4-44.6s-34.4-6.9-44.6 7.4l-1.1 1.6C206.5 251.2 213 330 263 380c56.5 56.5 148 56.5 204.5 0L579.8 267.7zM60.2 244.3c-56.5 56.5-56.5 148 0 204.5c50 50 128.8 56.5 186.3 15.4l1.6-1.1c14.4-10.3 17.7-30.3 7.4-44.6s-30.3-17.7-44.6-7.4l-1.6 1.1c-32.1 22.9-76 19.3-103.8-8.6C74 372 74 321 105.5 289.5L217.7 177.2c31.5-31.5 82.5-31.5 114 0c27.9 27.9 31.5 71.8 8.6 103.9l-1.1 1.6c-10.3 14.4-6.9 34.4 7.4 44.6s34.4 6.9 44.6-7.4l1.1-1.6C433.5 260.8 427 182 377 132c-56.5-56.5-148-56.5-204.5 0L60.2 244.3z"/></svg>
</a></h2>
<p>Nelle nostre pagine html possiamo inserire dei <strong>contenitori</strong>, nei quali inserire del contenuto. Questi sono molto utili per <strong>suddividere le pagine e gestire i contenuti al meglio.</strong></p>
<h3 id="div" class="heading"><div> <a href="#div" aria-labelledby="div">
<!-- <i class="fas fa-link anchor"></i> --><svg class="svg-inline--fa fas fa-link anchor" fill="currentColor" aria-hidden="true" role="img" viewBox="0 0 640 512"><path d="M579.8 267.7c56.5-56.5 56.5-148 0-204.5c-50-50-128.8-56.5-186.3-15.4l-1.6 1.1c-14.4 10.3-17.7 30.3-7.4 44.6s30.3 17.7 44.6 7.4l1.6-1.1c32.1-22.9 76-19.3 103.8 8.6c31.5 31.5 31.5 82.5 0 114L422.3 334.8c-31.5 31.5-82.5 31.5-114 0c-27.9-27.9-31.5-71.8-8.6-103.8l1.1-1.6c10.3-14.4 6.9-34.4-7.4-44.6s-34.4-6.9-44.6 7.4l-1.1 1.6C206.5 251.2 213 330 263 380c56.5 56.5 148 56.5 204.5 0L579.8 267.7zM60.2 244.3c-56.5 56.5-56.5 148 0 204.5c50 50 128.8 56.5 186.3 15.4l1.6-1.1c14.4-10.3 17.7-30.3 7.4-44.6s-30.3-17.7-44.6-7.4l-1.6 1.1c-32.1 22.9-76 19.3-103.8-8.6C74 372 74 321 105.5 289.5L217.7 177.2c31.5-31.5 82.5-31.5 114 0c27.9 27.9 31.5 71.8 8.6 103.9l-1.1 1.6c-10.3 14.4-6.9 34.4 7.4 44.6s34.4 6.9 44.6-7.4l1.1-1.6C433.5 260.8 427 182 377 132c-56.5-56.5-148-56.5-204.5 0L60.2 244.3z"/></svg>
</a></h3>
<p>Un primo tipo di contenitore è il tag <strong><div></strong>. Questo crea una <strong>sezione <strong>nella pagina. È un <strong>block element</strong>, cioè il contenuto dopo questo tag è inserito</strong> a capo</strong>.</p>
<h3 id="span" class="heading"><span> <a href="#span" aria-labelledby="span">
<!-- <i class="fas fa-link anchor"></i> --><svg class="svg-inline--fa fas fa-link anchor" fill="currentColor" aria-hidden="true" role="img" viewBox="0 0 640 512"><path d="M579.8 267.7c56.5-56.5 56.5-148 0-204.5c-50-50-128.8-56.5-186.3-15.4l-1.6 1.1c-14.4 10.3-17.7 30.3-7.4 44.6s30.3 17.7 44.6 7.4l1.6-1.1c32.1-22.9 76-19.3 103.8 8.6c31.5 31.5 31.5 82.5 0 114L422.3 334.8c-31.5 31.5-82.5 31.5-114 0c-27.9-27.9-31.5-71.8-8.6-103.8l1.1-1.6c10.3-14.4 6.9-34.4-7.4-44.6s-34.4-6.9-44.6 7.4l-1.1 1.6C206.5 251.2 213 330 263 380c56.5 56.5 148 56.5 204.5 0L579.8 267.7zM60.2 244.3c-56.5 56.5-56.5 148 0 204.5c50 50 128.8 56.5 186.3 15.4l1.6-1.1c14.4-10.3 17.7-30.3 7.4-44.6s-30.3-17.7-44.6-7.4l-1.6 1.1c-32.1 22.9-76 19.3-103.8-8.6C74 372 74 321 105.5 289.5L217.7 177.2c31.5-31.5 82.5-31.5 114 0c27.9 27.9 31.5 71.8 8.6 103.9l-1.1 1.6c-10.3 14.4-6.9 34.4 7.4 44.6s34.4 6.9 44.6-7.4l1.1-1.6C433.5 260.8 427 182 377 132c-56.5-56.5-148-56.5-204.5 0L60.2 244.3z"/></svg>
</a></h3>
<p>Lo <strong><span></strong> è un contenitore ma <strong>inline</strong>, cioè <strong>non va a capo</strong> dopo di esso.</p>
<p>Se voglio creare un quadrato verde nel sito dovrò utilizzare un <div>, se invece voglio colorare una parola di rosso allora userò il tag <span>.</p>
<p><strong>Eccoti un esempio:</strong></p>
<p>Aggiungi questo codice a_** index.html**_</p>
<pre class="wp-block-code"><code> <div style="background-color: green;">
Questo è un contenitore con sfondo verde
</div>
<p>
Questo è un paragrafo con del testo inserito a caso. In questo testo voglio <span style="color:red">colorare</span> una parola di rosso
</p></code></pre>
<p>ed ecco il <strong>risultato</strong></p>
<p>Per inserire i colori ho utilizzato l’attributo “style”, che permette di inserire del codice CSS all’interno dell’HTML, ma lo vedremo meglio nella<a href="/le-basi-del-css/"> guida</a> <a href="/le-basi-del-css/">al CSS.</a></p>
<h2 id="i-form" class="heading">I form <a href="#i-form" aria-labelledby="i-form">
<!-- <i class="fas fa-link anchor"></i> --><svg class="svg-inline--fa fas fa-link anchor" fill="currentColor" aria-hidden="true" role="img" viewBox="0 0 640 512"><path d="M579.8 267.7c56.5-56.5 56.5-148 0-204.5c-50-50-128.8-56.5-186.3-15.4l-1.6 1.1c-14.4 10.3-17.7 30.3-7.4 44.6s30.3 17.7 44.6 7.4l1.6-1.1c32.1-22.9 76-19.3 103.8 8.6c31.5 31.5 31.5 82.5 0 114L422.3 334.8c-31.5 31.5-82.5 31.5-114 0c-27.9-27.9-31.5-71.8-8.6-103.8l1.1-1.6c10.3-14.4 6.9-34.4-7.4-44.6s-34.4-6.9-44.6 7.4l-1.1 1.6C206.5 251.2 213 330 263 380c56.5 56.5 148 56.5 204.5 0L579.8 267.7zM60.2 244.3c-56.5 56.5-56.5 148 0 204.5c50 50 128.8 56.5 186.3 15.4l1.6-1.1c14.4-10.3 17.7-30.3 7.4-44.6s-30.3-17.7-44.6-7.4l-1.6 1.1c-32.1 22.9-76 19.3-103.8-8.6C74 372 74 321 105.5 289.5L217.7 177.2c31.5-31.5 82.5-31.5 114 0c27.9 27.9 31.5 71.8 8.6 103.9l-1.1 1.6c-10.3 14.4-6.9 34.4 7.4 44.6s34.4 6.9 44.6-7.4l1.1-1.6C433.5 260.8 427 182 377 132c-56.5-56.5-148-56.5-204.5 0L60.2 244.3z"/></svg>
</a></h2>
<p>Un altro elemento molto importante di una pagina web è il <strong>form</strong>.</p>
<p>Navigando online avrai compilato moltissime volte dei <strong>moduli</strong>, che siano di contatto, di prenotazione etc.</p>
<p>Per inserire un form occorre utilizzare il tag <strong><form></form></strong> e al suo interno inserire **le tipologia di input **richieste.</p>
<p>**Esempio **di form:</p>
<pre class="wp-block-code"><code> <form>
<input type="text" placeholder="Nome">
<br><br>
<input type="text" placeholder="Cognome">
<br><br>
<select name="select" id="">
<option value="0">Opzione 1</option>
<option value="1">Opzione 2</option>
<option value="2">Opzione 3</option>
</select>
<br><br>
<textarea name="" id="" cols="30" rows="10" placeholder="Inserisci il testo qui."></textarea>
<br><br>
<input type="checkbox" name="privacy" value="0">Accetto la Privacy Policy
<br><br>
<button>Invia</button>
</form></code></pre>
<p>Prova a inserire questo codice in**_ index.html_**, salvare e aggiornare.</p>
<p>Vedrai comparire dei campi compilabili.</p>
<p><strong>Questi campi sono</strong></p>
<ul>
<li>input di tipo text nel caso del nome e del cognome.</li>
<li>select nel caso del menù a tendina</li>
<li>textarea nel caso dell’area di testo</li>
<li>input di tipo checkbox per accettare la privacy</li>
<li>button per il bottone di invio</li>
</ul>
<p>Premendo sul tasto “<strong>Invia</strong>” non succederà nulla. Per far svolgere un’azione alla nostra pagina html occorre integrarla con altri linguaggi. Ricordi che <strong>l’HTML è solamente un linguaggio di markup</strong>, non di programmazione.</p>
<p>Per questa guida è tutto. Ti lascio ancora **il codice per intero della nostra <em>index.html</em> **con i **commenti **che spiegano cosa fa ogni cosa.</p>
<pre class="wp-block-code"><code><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>La mia prima pagina web</title><!-- Il titolo della pagina che appare nella scheda del browser -->
</head>
<body>
<!-- Titolo -->
<h1>La mia prima pagina web</h1>
<!-- Paragrafo -->
<p>Benvenuto nella mia prima pagina web!</p>
<br><!-- questo è un a capo-->
<!-- Sottotitolo -->
<h2>Sottotitolo</h2>
<p>Questo è il secondo paragrafo della mia prima pagina web</p>
<br>
<h2>Elenco</h2>
<!-- Elenco -->
<ul>
<li>Primo Item</li><!-- Item di un elenco -->
<li>Secondo Item</li>
</ul>
<!-- Immagine -->
<img src="img/immagine.jpg" width="200">
<!-- DIV: block element -->
<div style="background-color: green;">
Questo è un contenitore con sfondo verde
</div>
<!-- SPAN: inline element -->
<p>
Questo è un paragrafo con del testo inserito a caso. In questo testo voglio
<span style="color:red">colorare</span> una parola di rosso
</p>
<!-- FORM -->
<form>
<!-- Casella di testo -->
<input type="text" placeholder="Nome">
<br><br>
<input type="text" placeholder="Cognome">
<br><br>
<!-- Menù a tendina -->
<select name="select" id="">
<option value="0">Opzione 1</option>
<option value="1">Opzione 2</option>
<option value="2">Opzione 3</option>
</select>
<br><br>
<!-- Area di testo -->
<textarea name="" id="" cols="30" rows="10" placeholder="Inserisci il testo qui."></textarea>
<br><br>
<!-- Checkbox-->
<input type="checkbox" name="privacy" value="0">Accetto la Privacy Policy
<br><br>
<!-- Bottone -->
<button>Invia</button>
</form>
</body>
</html></code></pre>
<p><strong>Ora puoi iniziare a smanettare un po’ con i tag</strong> che hai imparato, provando a <strong>creare e modificare qualche pagina HTML!</strong></p>
<p class="has-text-align-right">
Leggi anche <em><a href="/le-basi-del-css/">Le basi del CSS >></a></em>
</p>
<div class="wp-block-buttons is-content-justification-right is-layout-flex wp-container-core-buttons-is-layout-2 wp-block-buttons-is-layout-flex">
</div>
<p></span></div></span></span></div></div>
