Primi passi con il linguaggio HTML

In questa lezione muoviamo i primi passi con il linguaggio HTML e iniziamo a scrivere le prime righe di codice per creare un nuova pagina web.

HTML sta per Hypertext Markup Language, ovvero un linguaggio che fa uso di marcatori per descrivere gli elementi strutturali di una pagina.

Il termine markup o marcatura  era utilizzato in ambiente tipografico per marcare delle parti di testo su cui apportare correzioni e migliorie.

La tecnica di scrittura di un documento scritto in HTML è piuttosto simile e consiste nel contrassegnare gli elementi della pagina con dei marcatori che attribuiscono ulteriori informazioni ai contenuti.

Qualsiasi browser che interpreta il linguaggio HTML è perciò in grado di tradurre ogni singola linea di codice convertendola in un elemento strutturale della pagina.

Ipotizziamo di far leggere al browser il seguente codice:

<!DOCTYPE html>
<html>
  <head> 
    <title>Pagina Saluto</title> 
  </head> 
  <body> 
    <p>Ciao Mondo!</p> 
  </body> 
</html>

Osservate questo codice senza concentrarvi troppo sulla sintassi e andate alla ricerca di quelle parole o frasi che riuscite a capire. Questo piccolo esercizio può essere utile per permettervi di prendere visivamente confidenza  con una struttura HTML – seppure si tratta di una struttura molto minimal.

Avete trovato le frasi “Pagina Saluto” e “Ciao Mondo” nel codice? Effettivamente, ciò che ho scritto nello snippet in alto verrà interpretato dal browser come una pagina intitolata Pagina Saluto, con all’interno un paragrafo che dice:”Ciao Mondo!“.

In questa e nelle prossime lezioni, vedrete come arrivare gradualmente ad un risultato simile comprendendo esattamente il significato di ciascun elemento.

I tag HTML

Osservando il codice in alto con maggiore attenzione, possiamo notare la presenza di parole speciali circondate da parentesi angolari (es. <body>). Questo tipo di sintassi serve a definire gli elementi HTML attraverso l’utilizzo di speciali marcatori che chiamiamo tag.

I tag hanno lo scopo di descrivere la funzione strutturale e semantica dei contenuti, di modo che il browser possa capire se mostrare un paragrafo, un titolo, una lista, ecc…

Un elemento HTML è composto in genere da:

  1. tag di apertura
  2. contenuto del tag
  3. tag di chiusura

Un esempio di tag HTML che mostra un testo in formato titolo è:

<h1>Titolo di un paragrafo</h1>

Allo stesso modo possiamo specificare un tag che contenga del testo da inserire in un paragrafo in questo modo:

<p>Testo del paragrafo</p>

Ogni tag può specificare come proprio contenuto, altri tag. Come vedremo anche più avanti, questa tecnica di scrittura è molto intuitiva e garantisce un’ottima leggibilità.

<hgroup>
  <h1>Titolo</h1>
  <h2>Sottotitolo</h2>
</hgroup>

Quello che vedete nell’esempio è un tag HTML usato per la creazione di un gruppo di intestazioni (hgroup sta per heading group). Osserviamo che l’elemento <hgroup> ha al suo interno una coppia di tag che definiscono due titoli di formato diverso (il primo più grande, il secondo più piccolo).

Per il momento è bene non entrate troppo nel merito dei singoli tag, l’importante è che abbiate chiara l’idea di come si compone un elemento HTML. Prima di iniziare a prendere dimestichezza  con la sintassi…

Ricapitoliamo:

I contenuti di una pagina web sono espressi attraverso una serie di elementi standard contrassegnati da tag. Ciascun elemento mostra un certo contenuto o raggruppa una serie di altri elementi specificando un tag  di <apertura> e un tag di  </chiusura>.

Facciamo pratica con i tag HTML

Proviamo a creare i primi tag HTML andando su codepen.io, un sito molto comodo che ci permette di effettuare dei rapidi test. Dimentichiamo per un attimo la struttura che abbiamo visto all’inizio della lezione e cerchiamo di concentrarci solo sulla parte visibile della pagina, ovvero quella che normalmente va scritta all’interno dell’elemento <body>.

Selezioniamo dal menu la voce create e creiamo un nuovo pen. Questa schermata è l’equivalente di una pagina web vuota. I tre riquadri in alto fanno riferimento ai tre linguaggi che il browser legge ed interpreta per creare una pagina web (HTML, CSS, Javascript), mentre la schermata bianca in basso mostra un’anteprima della pagina che si aggiornerà ad ogni nostro cambiamento.

Mettiamo da parte le schermate CSS e Javascript e focalizziamoci sull’area di lavoro del codice HTML. Non ci resta che provare a scrivere subito qualcosa!

[immagine hello world]

Come vedete, codepen è piuttosto reattivo e mostra nella preview la copia di ciò che abbiamo digitato nel riquadro dell’HTML. Tutto sembra funzionare correttamente e il browser interpreta il nostro testo come contenuto puro, ovvero una stringa completamente priva di formattazione. Proviamo ora ad andare a capo e aggiungere altro testo.

[immagine hello creativecode]

Possiamo notare che in questo caso la risposta del browser nella preview non corrisponde esattamente a quanto abbiamo scritto nell’HTML, lasciando “Hello Creative Code!” sulla stessa riga di “Hello World!”. Questo accade perché ciò che abbiamo specificato nell’HTML oltre ad essere un contenuto senza formattazione, è anche privo di qualsiasi indicazione circa il layout che vorremmo avere. In questo caso abbiamo bisogno di un elemento che dica al browser di interrompere la riga e andare a capo. Il tag che svolge questo compito è il <br /> (break row).

Proviamo ad aggiungere l’interruzione di riga fra “Hello World!” e “Hello Creative Code”. In questo caso il browser interpreta correttamente la marcatura e stampa “Hello Creative Code” al rigo successivo.

Self-Closing Tag

Come potete notare, il <br /> viene specificato con un solo tag e non attraverso un’apertura ed una chiusura come abbiamo visto nella prima parte della lezione per <hgroup>, <h1> e <p>. Questo accade perché esistono degli elementi che non necessitano di alcun contenuto e che da soli hanno un valore  e un significato strutturale. I tag privi di contenuto prendono il nome di self-closing e sono scritti in questa forma: <tag />, oppure più semplicemente <tag>. Un altro esempio di self-closing tag è l’hr, un elemento che consente di tracciare una linea orizzontale per separare visivamente un testo da un altro.

Commentare il codice

Una pagina web piuttosto ricca può essere lunga diverse centinaia di righe di comando. Questa lunghezza può portare confusione e non permette una buona gestione della pagina nel corso del tempo.

Immaginate di dover riprendere dopo diverso tempo una pagina HTML di 1000 righe per correggere il percorso di un’immagine. Solitamente i designer inseriscono i commenti per tenere traccia delle modifiche, dei punti più importanti del documento o per descrivere la funzione di un particolare elemento. 

Inserire i commenti aiuta inoltre tutta la community a rendere leggibile il codice. Non dimenticate che l’HTML è un linguaggio open source! Lavorate affinché il vostro codice possa essere letto, interpretato e utilizzato come fonte di ispirazione anche da altri designer come voi.

<!-- Titolo del mio sito web -->
<h1>creativecode.it</h1>

<!-- Paragrafo principale -->
<p>Affina le tue capacità creative attraverso l’apprendimento delle tecnologie per il web.</p>

<!-- Paragrafo secondario -->
<p>Impara a progettare applicazioni interattive seguendo un approccio lineare, incentrato sul tuo reale apprendimento.</p>

Come potete osservare dall’esempio in alto, ho commentato il mio codice descrivendo la funzione dei singoli elementi HTML. Per scrivere un commento nel codice viene utilizzata questa sintassi: <!-- qui va il commento --> che non va ad incidere in alcun modo sul lato di visualizzazione del mio sito web.

Lascia un commento

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