HTML Tutorial

HTML Tutorial

Sei alla ricerca di una guida in italiano sull'HTML? Allora sei nel posto giusto. Continua a leggere questa guida per scoprire come utilizzare questo linguaggio markup per la creazione del tuo sito web.

Pubblicato il 6 Settembre, 2019

Scritto da Matteo Feduzi

HTML, Linguaggi informatica

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:

VersioneAnno
HTML1991
HTML 2.01995
HTML 3.21997
HTML 4.011999
XHTML2000
HTML52014

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.

Il tag di chiusura deve obbligatoriamente contenere la barra “/” prima del nome del tag.

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.

Deve apparire una sola volta, nella parte superiore della pagina prima di qualsiasi tag HTML.

<!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:

Esempio di pagina HTML

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>

I collegamenti HTML sono definiti con il tag <a>.

<a href="https://matteofeduzi.com">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.

Sono presenti 2 commenti

  1. Marco
    #

    Ciao Matteo, farai altre guide di questo tipo?

    1. Matteo Feduzi
      #

      Ciao Marco! Certo, realizzeremo altre guide di questo tipo. A breve anche relative a CSS e PHP.

      Un abbraccio,
      Matteo.

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *