Categorie
Web development

Tutorial HTML

html tutorial

In questa pagina troverai un tutorial HTML, adatto sia ai principianti che agli sviluppatori web professionisti.

Cosa è HTML

HTML, acronimo di HyperText Markup Language, è un linguaggio di markup, progettato per descrivere la struttura di documenti solitamente destinati ad essere letti tramite un web browser, come Google Chrome e Mozilla Firefox.

In altre parole, il browser è un programma in grado di disegnare una pagina leggendo del codice HTML.

Solitamente, è utilizzato insieme a CSS e JavaScript.

Il primo regola la disposizione degli elementi nella pagina, mentre il secondo è un linguaggio di programmazione che può alterare la struttura della pagina dinamicamente.

Dall’avvento degli smartphone, il linguaggio HTML trova applicazione anche nello sviluppo di app, siano esse native (ad esempio tramite WebView) o Progressive Web Apps (PWA).

Struttura pagina HTML

Per comprendere il seguito, è importante che tu conosca il principio su cui si basa la sintassi di HTML.

Tale principio è basato su ‘tag’ di apertura e chiusura, che possono contenere a loro volta altri tag, oppure semplice testo.

<p class="selettore">Del testo</p>

Nell’esempio qui sopra, puoi vedere una porzione di HTML che descrive un paragrafo (il tag p indica appunto un paragraph).

Tale paragrafo conterrà la sequenza di caratteri ‘Del testo’.

Ogni tag può contenere uno o più attributi. Nel caso dell’esempio, è presente l’attributo class con il valore selettore.

Questo attributo, insieme all’attributo id permettono di caratterizzare gli elementi della pagina, affinché essi siano selezionabili tramite selettori CSS.

Se volessi approfondire l’argomento, ti invito a leggere i seguenti articoli:

Avendo appreso questi semplici concetti, vediamo ora la struttura base di un documento HTML.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>La mia pagina</title>
  </head>
  <body>
    <p class="tutorial">Del testo</p>
  </body>
</html>

Nel seguito analizzeremo lo scopo dei tag presenti nell’estratto di codice precedente, come il DOCTYPE, il tag html, la sezione head e la sezione body.

DOCTYPE HTML

Quando HTML non era ancora una tecnologia ‘matura’, questo tag veniva utilizzato per identificare un set di regole al quale il documento era aderente. Oggi, è presente solamente per motivi storici.

E’ quindi sufficiente includere il seguente tag all’inizio del documento HTML, affinché esso sia considerato valido:

<!DOCTYPE html>

Il tag html

Questo elemento contiene tutti i tags che compongono il documento HTML. Per questo motivo, viene anche definito ‘root’ element.

La sezione head

Questa porzione del documento contiene tutte le informazioni che non concorrono a formare il contenuto della pagina.

Tra queste informazioni, possiamo ad esempio trovare:

  • Il titolo del documento, solitamente visualizzato come titolo della tab / finestra del browser
  • Uno o più <link> tag, utilizzato ad esempio per indicare la relazione tra il documento corrente e una risorsa esterna, come un documento CSS
  • Uno o più meta tag, utilizzati per dichiarare valori di proprietà note, come il charset utilizzato nel documento HTML (nell’esempio precedente, utf-8)
  • Uno o più tag <script>, che possono contenere porzioni di codice JavaScript, oppure far riferimento a documenti contenenti codice JavaScript

Nel seguito di questa sezione, approfondiremo l’utilizzo di ciascuno di questi elementi.

Il tag title

Come già anticipato in precedenza, questa tag determina il titolo del documento HTML.

La sintassi del tag è la seguente:

<title>Tutorial HTML - Dario Capozzi</title>

Utilizzando il codice proposto, la pagina visualizzata dal browser avrà il titolo ‘Tutorial HTML – Dario Capozzi’.

Il <link> tag

L’elemento HTML link è utilizzato per esplicitare il collegamento a risorse esterne del documento HTML.

Consideriamo una porzione dell’head di questa pagina:

<link rel="stylesheet" href="https://www.dariocapozzi.it/wp-includes/css/dashicons.min.css?ver=6.0.1" />
<link rel="icon" href="/favicon.ico">

La prima riga di codice specifica il link di un foglio di stile associato alla pagina. Tale documento conterrà un insieme di regole CSS che verranno applicate a questa pagina.

La seconda riga specifica l’indirizzo dove è disponibile la favicon, un’icona utilizzata dal browser per la visualizzazione del tab. Solitamente, tale icona viene visualizzata in prossimità del titolo del documento.

I meta tags

Questi elementi sono utilizzati per esprimere informazioni a consumo di browser e siti di terze parti, come social networks e motori di ricerca.

Nel seguito troverai alcuni esempi di meta tags:

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" >
<meta name="robots" content="index, follow, max-image-preview:large, max-snippet:-1, max-video-preview:-1" />
<meta property="og:locale" content="it_IT" />
<meta property="og:type" content="article" />
<meta property="og:title" content="Tutorial HTML - Dario Capozzi" />

Il primo meta tag serve per specificare il character set (charset) del documento.

Il secondo meta tag definisce delle regole riguardo al viewport, ovvero la porzione del documento visibile tramite la finestra del browser.

Nella pratica, è sufficiente inserire il tag dell’esempio per indicare al browser che il documento HTML è responsive, ovvero si adatta alla risoluzione dello schermo del dispositivo utilizzato per visualizzare la pagina.

Il terzo meta tag esplicita delle policies ad uso dei motori di ricerca. Ad esempio, è possibile indicare ai motori di ricerca se il documento debba essere indicizzato, utilizzando il valore ‘index’ o ‘no-index’.

I meta tags dal quarto al sesto forniscono informazioni a Facebook, nel caso in cui il documento venga condiviso sul social network. Nei meta tags presi in esame, vengono specificati la lingua dei contenuti, il tipo di contenuti ed il titolo da visualizzare.

I tag script

All’interno di questi tag è possibile inserire del codice JavaScript.

<script>
console.log("ciao");
</script>

Questo codice di esempio, quando verrà eseguito dal browser, scriverà nella console dello stesso la stringa ‘ciao’.

La sezione body

L’elemento body rappresenta il contenuto nel documento HTML. Il suo contenuto sarà quello che sarà utilizzato dal browser per ‘disegnare’ la pagina.

All’interno di questo elemento sono presenti altri elementi HTML, che definiscono la struttura del documento.

Nel seguito, puoi trovare un esempio di pagina HTML che fa uso dei principali tags.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>La mia pagina</title>
  </head>
  <body>
    <p>Un paragrafo</p>
    <p class="selettore">Un altro paragrafo.<br>Questa volta, con <span>uno span</span></p>
    <ul id="elenco">
      <li>Un lista</li>
      <li>Non ordinata</li>
    </ul>
    <ol>
      <li>Un lista</li>
      <li>ordinata</li>
    </ol>
    <img src="https://miosito.com/immagine.jpg" />
    <div>
     Questo è un div.
    </div>
    <a href="https://altrosito.com/">
      link ad un'altra pagina
    </a>
    <form>
      <input type="text" name="nome" />
      <input type="submit" value="Conferma" />
    </form>
    <table>
     <thead>
      <tr>
       <th>Col 1</th>
       <th>Col 2</th>
      </tr>
     </thead>
     <tbody>
       <tr>
        <td>A1</td>
        <td>A2</td>
      </tr>
      <tr>
        <td>B1</td>
        <td>B2</td>
      </tr>
     </tbody>
    </table>
  </body>
</html>

Analizzeremo quindi ciascuno di questi elementi HTML.

Elementi block vs elementi inline

Gli elementi HTML possono essere categorizzati attraverso il loro comportamento predefinito nella pagina.

Tali categorie sono denominate nel modo seguente:

  • Elementi block
  • Elementi inline

I primi occupano tutto lo spazio orizzontale presente nell’elemento genitore (ovvero quello che lo contiene). I secondi invece occupano solo lo spazio necessario al corretto rendering del loro contenuto.

Per questo motivo, senza esplicitare regole CSS, due elementi inline possono essere posizionati affinché uno sia adiacente all’altro, mentre due elementi block no, poiché saranno disegnati su due ‘righe’ differenti.

L’elemento p – paragrafi in HTML

Il tag p rappresenta un paragrafo in HTML. In genere contiene una porzione di testo e/o immagini.

Questo elemento è un elemento di tipo block.

Il tag span

L’elemento span viene solitamente utilizzato per caratterizzare una porzione di testo, ad esempio per applicare una determinata classe o ID CSS.

Questo elemento è di tipo inline.

L’elemento ul – elenco puntato HTML

Il tag ul rappresenta una lista non ordinata (acronimo delle parole inglesi unordered list). Ogni elemento della lista è contenuto dal tag li (acronimo delle parole inglesi list item).

Questo elemento è di tipo block.

Il tag ol – liste ordinate in HTML

L’elemento ol rappresenta una lista ordinata (acronimo delle parole inglesi ordered list). Ogni elemento della lista è contenuto dal tag li.

Questo elemento è di tipo block.

L’elemento img – le immagini in HTML

Il tag img è utilizzato in HTML per inserire le immagini all’interno del documento.

Per poter utilizzarlo correttamente, è necessario specificare un valore per l’attributo src. Tale valore indicherà al browser l’indirizzo al quale è disponibile il contenuto di quell’immagine.

Questo elemento è di tipo inline.

Il tag div in HTML

L’elemento div è utilizzato come ‘contenitore’ di altri elementi. Solitamente viene utilizzato per applicare un selettore CSS ad un set di elementi.

Questo elemento è di tipo block.

L’elemento a – i link in HTML

Il tag a viene utilizzato per specificare collegamenti ad altri risorse, siano esse interne o esterne al sito. Per indicare la destinazione del collegamento, è necessario indicare un valore per l’attributo href.

Questo elemento è di tipo inline.

Puoi approfondire l’utilizzo di tag leggendo l’articolo a href – il tag HTML per i link .

Il tag form e gli input in HTML

Questo elemento rappresenta un contenitore di elementi utilizzati per inoltrare informazioni dall’utente del sito al server.

Gli elementi utilizzati per contenere tali informazioni sono principalmente i tag input ed il tag select.

Solitamente, la parte di autenticazione dei siti web sono implementati facendo uso di questo tag.

Questo elemento è di tipo block.

Le tabelle in HTML

Le tabelle vengono rappresentate in HTML mediante il tag table.

La tabella è formata dalla testata (rappresentata dal tag thead) e dal corpo (rappresentato dal tag tbody).

Sia in testata che nel corpo le righe sono rappresentate dall’elemento tr (acronimo delle parole inglesi table row).

Le colonne sono rappresentate tramite il tag th nella testata, mentre nel corpo il tag utilizzato è td.

Approfondimenti HTML

Se hai letto questo articolo probabilmente sei interessato a temi legati allo web development.

Ecco alcuni articoli che puoi trovare su questo blog:

Conclusioni tutorial HTML

In questa pagina hai potuto apprendere la struttura base di un documento HTML ed i principali elementi che lo caratterizzano.

Puoi trovare altre risorse gratuite per complementare questo tutorial HTML qui sotto.