Se ti affacci a un linguaggio informatico per la prima volta potresti pensare che l’HTML non sia molto semplice, ma credimi, non è affatto così.
E ti prometto che alla fine di questa guida saprai cosa è l’HTML, come creare un documento HTML, come visualizzarlo e quali sono i tag principali.
Cos’è l’HTML?
L’HTML è un linguaggio markup standard utilizzato per la creazione di pagine web.
Esso deriva dall’acronimo Hyper Text Markup Language e il suo compito è quello di descrivere la struttura di una pagina web tramite una serie di elementi.
Gli elementi HTML indicano a un browser come Google, Safari, Firefox e tanti altri come visualizzare il contenuto.
Gli elementi sono rappresentati da tag che identificano parti del contenuto come titoli, paragrafi, tabelle e così via.
I browser si avvalgono quindi di questi tag per visualizzare il contenuto in base al loro tipo.
Versioni HTML
Ci sono varie versioni del linguaggio HTML:
Versione | Anno |
HTML | 1991 |
HTML 2.0 | 1995 |
HTML 3.2 | 1997 |
HTML 4.01 | 1999 |
XHTML | 2000 |
HTML5 | 2014 |
Documento HTML
Vediamo subito un semplice esempio di documento HTML.
<!DOCTYPE html>
<html>
<head>
<title>Titolo della pagina</title>
</head>
<body>
<h1>Questo è un titolo.</h1>
<p>Questo è un paragrafo.</p>
</body>
</html>
Spiegazione del documento HTML
<!DOCTYPE html>
: dichiarazione che definisce il documento come HTML5.<html>
: elemento che sta alla radice di una pagina HTML.<head>
: elemento che contiene le meta informazioni della pagina web.<tilte>
: elemento che specifica il titolo della pagina web.<body>
: elemento che contiene il contenuto visibile della pagina web.<h1>
: elemento che definisce un’intestazione.<p>
: elemento che definisce un paragrafo.
Struttura di un tag HTML
I tag HTML sono nomi di elementi racchiusi tra “< >”.
<tagname>Inserisci qui il contenuto.</tagname>
Come avrai notato i tag HTML hanno un tag di apertura <tagname>
e un tag di chiusura </tagname>
.
Puoi anche chiamare questi due tag corrispettivamente tag iniziale e tag finale.
Visualizzazione dell’HTML in un browser web
Qui sotto possiamo osservare il risultato generato dal documento HTML precedentemente illustrato.
Da questo esempio abbiamo l’opportunità di osservare come un browser (in questo caso Google), generi una pagina web grazie all’ausilio dei tag utilizzati.
Da considerare inoltre come i tag non vengano pubblicati nella pagina ma bensì utilizzati per visualizzare quest’ultima.
La dichiarazione <!DOCTYPE>
La dichiarazione <!DOCTYPE> rappresenta il tipo di documento e aiuta i browser a visualizzare correttamente le pagine web.
<!DOCTYPE> non fa alcuna distinzione tra maiuscole e minuscole, ciò vuol dire, per esempio, che possiamo utilizzare <h1>
o <H1>
indistintamente.
La dichiarazione <!DOCTYPE> per HTML5 è:
<!DOCTYPE html>
Iniziamo a scrivere HTML
Qualsiasi pagina web può essere creata e modificata utilizzando un editor HTML.
Ti consiglio di utilizzare Atom, uno dei migliori editor in circolazione per scrivere codice.
Se sei alle prime armi e ti rimane più semplice puoi anche utilizzare Blocco note su PC o TextEdit su Mac.
Passaggio 1: Apri il tuo editor
Cerca o scarica uno degli editor precedentemente indicati sul tuo computer dopodiché aprilo.
Ora siamo pronti per scrivere il nostro codice HTML.
Passaggio 2: Scriviamo un codice HTML
Scrivi o copia il seguente codice HTML nel tuo editor.
<!DOCTYPE html>
<html>
<head>
<title>Titolo della pagina</title>
</head>
<body>
<h1>Questo è un titolo.</h1>
<p>Questo è un paragrafo.</p>
</body>
</html>
Ecco come apparirà il seguente codice nel tuo editor se utilizzi Atom.
Passaggio 3: salviamo la pagina HTML
Ora salva e chiama il tuo file “index.html” o “index.htm”, non c’è alcuna differenza tra i due.
Se il tuo editor richiede di impostare una codifica imposta UFT-8.
Una volta salvato il file, su Atom, dovrebbe colorarsi la sintassi del testo.
Passaggio 4: visualizzare la pagina HTML nel browser
Ora non dovrai far altro che aprire il file appena salvato.
Questo è il risultato che dovresti ottenere:
Tag HTML essenziali
Fino adesso abbiamo utilizzato dei tag ancora non ben illustrati, vediamo quelli essenziali.
Intestazioni HTML
Le intestazioni HTML sono definite con i tag <h1>
, <h2>
, <h3>
, <h4>
, <h5>
e <h6>
.
<h1>
definisce l’intestazione più importante mentre <h6>
quella meno importante.
<h1>Questo è un tag di intestazione 1</h1>
<h2>Questo è un tag di intestazione 2</h2>
<h3>Questo è un tag di intestazione 3</h3>
<h4>Questo è un tag di intestazione 4</h4>
<h5>Questo è un tag di intestazione 5</h5>
<h6>Questo è un tag di intestazione 6</h6>
Paragrafi HTML
I paragrafi HTML sono definiti con il tag <p>
.
<p>Questo è un paragrafo.</p>
<p>Questo è un altro paragrafo.</p>
Link HTML
I collegamenti HTML sono definiti con il tag <a>
.
<a href="https://matteofeduzi.it">Questo è un link</a>
La destinazione del collegamento è definita nell’attributo href
.
Gli attributi vengono utilizzati per fornire informazioni aggiuntive sugli elementi HTML.
Immagini HTML
Le immagini HTML sono definite con il tag <img>
.
Il file di origine proviene dall’attributo src
, il testo alternativo da alt
mentre larghezza e altezza della foto corrispettivamente da width
e height
.
<img src="logo" alt="logo" width="40" height="40">Questo è un link</a>
Pulsanti HTML
I pulsanti HTML sono definiti con il tag <button>
.
<button>Cliccami</button>
Elenchi HTML
Gli elenchi HTML vengono definiti con il tag <ul>
(elenco puntato) o <ol>
(elenco numerato), seguito da il tag <li>
(elementi elenco).
<ul>
<li>Volkswagen</li>
<li>Fiat</li>
<li>Ferrari</li>
<li>Lamborghini</li>
</ul>
<ol>
<li>Volkswagen</li>
<li>Fiat</li>
<li>Ferrari</li>
<li>Lamborghini</li>
</ol>
Conclusioni
Oggi ho illustrato l’HTML, un linguaggio essenziale se si vuole realizzare una o più pagine web.
Cosa ne pensi? Hai avuto dei problemi durante la realizzazione dell’esempio?
Fammelo sapere nei commenti, sono qui per te!
Un abbraccio,
Matteo.
Lascia un commento
Ciao Matteo, grazie della guida! Discretamente utile
Ciao Francesco, sono molto contento ti sia stata utile.
Sentiti libero di suggerire qualsiasi altro miglioramento.
Un abbraccio,
Matteo.
Ciao Matteo, farai altre guide di questo tipo?
Ciao Marco! Certo, realizzeremo altre guide di questo tipo. A breve anche relative a CSS e PHP.
Un abbraccio,
Matteo.