Introduzione all'HTML

Scopriamo le basi dell'HTML: elementi, attributi e tutti gli altri concetti fondamentali di questo linguaggio che serve a strutturare il web.

Cos'è l'HTML?

HTML non è un linguaggio di programmazione ma un linguaggio di markup che dice al browser come strutturare le pagine web.

Consiste di una serie di elementi che usi per racchiudere diverse parti del contenuto per farli apparire in un certo modo. Considerare esempio questa riga di testo:

Per dire che questo testo deve stare in un paragrafo a se lo inseriamo in una coppia di tag P (paragrafo):

 

Anatomia di un elemento

Analizziamo il nostro paragrafo:

• Tag di aperta
• Contenuto
• Tag di chiusura

 

Elementi annidati

Gli elementi possono essere inseriti all'interno di altri elementi:

Come si fa con le parentesi nelle espressioni matematiche, il tag che si apre per primo (p) deve chiudersi per ultimo.

Questo ad esempio è un modo sbagliato di fare l'annidamento:

 

Block e inline

• gli elementi di tipo block formano un blocco visibile nella pagina. Appaiono sempre in una nuova riga. Esempi: paragrafi, liste, menù...
• gli elementi di tipo inline racchiudono piccole parti del documento, e non vengono mandati a capo.

Esempio:

Verrà mostrato così:

 

Elementi vuoti

Non tutti gli elementi seguono il modello visto sopra, coi tag che racchiudono una parte di documento. Alcuni consistono in un solo tag, come nel caso delle immagini (img):

 

 

Attributi

Gli attributi forniscono alcune informazioni aggiuntive sul tag.

In questo esempio al tag <p> viene aggiunto un attributo class che fornisce informazioni sullo stile, e cioè su come dovrà essere visualizzato il testo:

 

Anatomia di un documento HTML

Ecco la struttura di una tipica pagina HTML:

• doctype: dice al browser che la pagina è scritta in HTML5
• tag html: racchiudono tutto il contenuto della pagina
• tag head: racchiudono l'intestazione della pagina, che fornisce informazioni come il titolo, gli stili usati e altro
• meta charset: specifica di usare i caratteri utf-8, con accenti e lettere degli alfabeti usati nella maggior parte delle lingue
• title: racchiude il titolo della pagina, che viene mostrato nella parte superiore del browser
• tag body: racchiudono il contenuto vero e proprio della pagina

 

Indentazione

Osserva l'esempio sopra: ogni volta che inserisci un tag annidato all'interno di un altro, usa il tasto tab o inserisci due spazi per rientrare il codice verso destra. Molti IDE lo fanno automaticamente.

 

Uso degli spazi

Non importa quanti spazi metti: il browser li considera sempre come un solo spazio:

 

Commenti

Se devi inserire delle note che rendano più leggibile il codice (per te o per altri usa questa sintassi:

I commenti vengono ignorati dal browser.

• HTML