Introduzione all' HTML

Quando guardi una pagina web in un browser, vedi, a livello base, delle parole. Queste parole solitamente hanno alcune caratteristiche di stile, come ad esempio caratteri di differenti grandezze e colori. In molti casi una pagina presenta anche immagini o video. A volte può esserci un form dove puoi inserire (o ricercare) informazioni, oppure personalizzare la visualizzazione secondo il tuo gradimento. Spesso una pagina contiene animazioni e contenuti che cambiano mentre il resto della pagina rimane uguale.

Diverse tecnologie (come CSS, JavaScript, Flash, AJAX, JSON) possono essere usate per definire gli elementi di una pagina web. Tuttavia, di base, una pagina web è definita usando l'  HTML (HyperText Markup Language) , letteralmente "Linguaggio di contrassegno per gli Ipertesti". Senza HTML, non esiste una pagina web.

Questo articolo fornisce un introduzione all' HTML. Se ti sei mai chiesto cosa succede dietro le quinte nel tuo browser web, questo articolo è il posto dove iniziare ad imparare.

Una breve storia dell' HTML

Alla fine degli anni 80, Tim Berners-Lee stava lavorando come fisico al CERN (l' Organizzazione europea per la ricerca sul nucleare). Egli escogitò un sistema che permettesse agli scenziati di condividere documenti su internet. Prima della sua invenzione, la comunicazione via internet era limitata al testo base, usando tecnologie come email, FTP (Protocollo di Trasferimento File), e schede di discussione basate su Usenet. L'invenzione dell' HTML consentì l'uso di un modello in base al quale i contenuti memorizzati in un server centrale potessero essere trasferiti e visualizzati in una postazione di lavoro locale per mezzo di un browser. 

Che cos'è l' HTML?

L' HTML è un linguaggio di contrassegno. Esso "dice" al browser come visualizzare i contenuti. L' HTML separa il "contenuto" (parole, immagini, audio, video, ecc.) dalla "presentazione" (la definizione del tipo di contenuto e le istruzioni per come quel tipo di contenuto debba essere visualizzato). L' HTML usa un set di elementi predefiniti per identificare il tipo di contenuto.

Per esempio, l' elemento paragrafo consiste del tag iniziale "<p>" e del tag di chiusura "</p>". L' esempio di seguito mostra un paragrafo contenuto nel corrispondente elemento HTML:

<p>My dog ate all the guacamole.</p>

Ecco come viene visualizzato il contenuto in un browser:

Il browser usa i tag come indicatori di come visualizzare il contenuto di quest' ultimi.

Gli elementi che inlcudono contenuto possono solitamente contenere a loro volta altri elementi. Per esempio, l'elemento enfatizzato ("<em>") può essere inserito nell' elemento paragrafo:

<p>My dog ate <em>all</em> the guacamole.</p>

Ecco come viene visualizzato:

Alcuni elementi non ne contengono altri. Per esempio, il tag immagine ("<img>") specifica semplicemente il nome del file del contenuto (un immagine appunto) come un attributo:

<img src="smileyface.jpg">

Spesso una barra viene inserita prima del simbolo di maggiore per indicare la fine del tag. Questo è opzionale nell' HTML ma obbligatorio nell' XHTML (che è uno schema XML che implementa gli elementi HTML).

Il resto di questo articolo approfondirà i concetti introdotti in questa sezione. Tuttavia, se volessi vedere l' HTML in azione, dai un' occhiata a Mozilla Thimble, che è un editor interattivo on-line che ti insegnerà come scivere il codice HTML. Inoltre, guarda HTML Elements per una lista degli elementi disponibili ed una descrizione sul loro utilizzo.

Elementi — I blocchi costruttori di base

L' HTML consiste in una serie di elementi. Tali elementi definiscono il significato semantico del loro contenuto. Gli elementi inlcudono tutto ciò che è contenuto tra i tag di apertura e chiusura, inclusi i tag stessi. Per esempio, l' elemento "<p>" indica un paragrafo; l' elemento "<img>" indica un immagine. Guarda la pagina HTML Elements per una lista completa.

Alcuni elementi hanno un significato ben preciso, come "questa è un immagine", "questa è una testata", oppure "questa è una lista ordinata". Altri sono meno specifici, came "questa è una sezione nella pagina", oppure "questo è parte del testo". Altri ancora sono usati per ragioni tecniche, come "questa è una informazione identificativa della pagina che non dovrebbe essere visualizzata". Malgrado tutto, in un modo o nell' altro tutti gli elementi HTML hanno valore semantico.

La maggior parte degli elementi possono contenerne altri, formando una struttura gerarchica. Una molto semplice ma completa pagina web potrebbe essere questa:

<html>
  <body>

    <p>My dog ate all the guacamole.</p>

  </body>
</html>

Come puoi vedere, gli elementi <html> inglobano il resto del documento, e l' elemento <body> include il contenuto della pagina. Questa struttura è spesso rappresentata come un albero con i suoi rami (in questo caso, gli elementi <body> e <p>) che nascono dal tronco (<html>). Questa struttura gerarchica viene chiamata DOM: the Document Object Model (Modello ad oggetti del documento).

Tag

I documenti HTML sono scritti in testo comune. Essi possono essere scritti in qualunque editor di testo che consente di salvare come testo (anche se la maggior parte degli autori di HTML preferisce usare un editor specializzato che evidenzia la sintassi e mostra il DOM). I nomi dei tag possono essere scritti indifferentemente in minuscolo o maiuscolo. Tuttavia, il W3C (il consorzio globale che si occupa degli standard HTML) raccomanda l' uso del minuscolo (e XHTML richiede il minuscolo).

L' HTML attribuisce un significato speciale a qualunque cosa inizi col simbolo minore ("<") e finisca col simbolo maggiore (">"). Questo contrassegno viene chiamato tag. Di seguito un semplice esempio:

<p>This is text within a paragraph.</p>

In questo esempio è presente un tag di inizio e un tag di chiusura. I tag di chiusura sono identici a quelli di inizio ma contengono anche una barra immediatamente dopo il simbolo di minore. Most elements in HTML are written using both start and closing tags. I tag di inizio e fine dovrebbero essere opportunamente nidificati, cioè i tag di chiusura dovrebbero essere scritti in ordine opposto rispetto a quelli di apertura. Una corretta nidificazione costituisce una regola che deve essere rispettata al fine di scrivere del codice che sia valido.

Questo è un esempio di codice valido:

<em>I <strong>really</strong> mean that</em>.

Questo è un esempio di codice non valido:

Invalid: <em>I <strong>really</em> mean that</strong>.

Nota come nell' esempio di codice valido, il tag di chiusura per l'elemento interno viene posizionato prima del tag di chiusura dell' elemento contenitore.

Alcuni elementi non contengono alcun testo o altri elementi. Questi sono elementi vuoti e non necessitano del tag di chusura. Di seguito un esempio:

<img src="smileyface.jpg">

Molte persone contrassegnano gli elementi vuoti usando una barra finale (che è obbligatoria in XHTML).

<img src="smileyface.jpg" />

In HTML questa barra non ha funzionalità tecnica e il suo utilizzo è una pura scelta stilistica.

Ecco la lista dei tag più usati, come usarli e il loro effetto:

<p>Questo serve per scrivere un paragrafo, lascia uno spazio vuoto sopra e sotto di esso</p>

<div>Questo è principalmente un contenitore utile per applicare classe e id e formattazione base, ma se al suo interno viene inserito del testo questo verrà messo a video. Non lascia spazi prima e dopo</div>

<pre>Questo, a differenza dei precedenti, non è soggetto a formattazione data da codice e CSS, ovvero la formattazione avviene da come lo si scrive. Gli altri, indipendentemente che si vada a capo o meno nel codice, risultano tutti sulla stessa riga fino a che non trovano un margine e allora vanno a capo. Con questo tag se si inserisce "un a capo" questo ci va come se gli si fosse dato il coando di a capo tramite codice molto utile e viene usato quando che da esporre del codice, ma non come parte del corpo, ma come viene usato in questa pagina dove vedete del codice esplicito </pre>

<br> Come si va a capo quindi senza usare <pre></pre>? Il tag <br> è ciò che vi serve. Come potrete notare non ha il suo corrispettivo tag di chiusura, con HTML5 e già da versioni precedenti alcuni tag di chiusura sono stati tolti.

<img src="images/foto.jpg">Inserire un immagine, in SRC ci va il percorso di dove si trova l'immagine. Ci sono due tipi di percorsi: assoluti o relative(come quello in esempio). Preferisco i secondi perchè sono più comodi, per i primi è come inserire l'URL della risorsa da trovare</img>

<h1></h1>  <h2></h2>  <h3></h3> <h4></h4> <h5></h5> sono tag che servono per indicare la grandezza di un testo, li si usa principalmente per i titoli. Li trovo un po' scomodi, ma sono tuttosommato utili

Ci sarebbero tanti altri tag, come tabelle e liste, ma questi sono i principale, gli altri si possono trovare in Internet e vi ricordo che per la formattazione grafica è più comodo e veloce imparare il CSS.

Attributi

Il tag di inizio può contenere informazioni addizionali, come nel precedente esempio. Tale informazione viene chiamata attributo. Gli attributi solitamente sono composti da 2 parti:

• Un nome dell' attributo.
• Un valore dell' attributo.

Alcuni attributi possono avere solo un valore. Essi sono attributi booleani e possono essere abbreviati specificando solo il nome dell' attributo o lasciandone il valore vuoto. Perciò, i seguenti 3 esempi hanno lo stesso significato:

<input required="required">

<input required="">

<input required>

I valori degli attributi che consistono in una singola parola o un singolo numero possono essre scritti come sono, ma quando ci sono due o più stringhe di caratteri nel valore, devono essere scritti tra apici. Sono permessi sia gli apici (') che le virgolette ("). Molti sviluppatori preferiscono usare sempre usare le virgolette (o gli apici) per rendere il codice meno ambiguo alla vista e evitare errori. Di seguito un errore:

<p class=foo bar> (Beware, this probably does not mean what you think it means.)

In questo esempio il valore doveva essere "foo bar" ma, visto che non erano presenti le virgolette, il codice viene interpretato come se fosse stato scritto così:

<p class="foo" bar="">

Riferimenti nominali a caratteri

I Riferimenti nominali a caratteri (spesso con noncuranza chiamati entità) sono usati per stampare caratteri che hanno un particolare significato in HTML. Per esempio, HTML interpreta i simboli di minore e maggiore come delimitatori di tag. Quando vogliamo visualizzare un simbolo di maggiore ne testo, possiamo usare un riferimento nominale al carattere. Ci sono quattro riferimenti nominali a caratteri che si devono conoscere:

• > denota il simbolo di maggiore (>)
• < denota il simbolo di minore (<)
• & denota l' ampersand o e commerciale (&)
• " denota le virgolette (")

Ci sono molte altre entità, ma queste quattro sono le più importanti poichè rappresentano caratteri che hanno un significato speciale in HTML.

Doctype (tipo Documento) e commenti

Oltre ai tag, al testo e ai riferiementi nominali, un documento HTML deve contenere una dichiarazione del tipo di documento (doctype) come prima riga. Nel moderno HTML questo è scritto come di seguito:

<!DOCTYPE html>

Il doctype ha una storia lunga ed intricata, ma per ora tutto quello che ti serve sapere è che questo doctype dice al browser di interpretare il codice HTML e CSS secondo gli standard W3C e non fingendo che sia Internet Explorer dagli anni 90. (Guarda quirks mode.)

L' HTML ha un meccanismo per inserire commenti che non sono mostrati quando la pagina viene caricata dal browser. Questo è utile per spiegare una sezione del codice, oppure per lasciare note per altre persone che potrebbero lavorare sulla pagina, oppure per lasciare dei promemoria per se stessi. I commenti HTML sono racchiusi in simboli come segue:

<!-- This is comment text -->

Un documento  completo ma piccolo

Mettendo tutto insieme si ha un piccolo esempio di un documento HTML. Puoi copiare questo codice in un editor di test, salvarlo come myfirstdoc.html e caricarlo in un browser. Assicurati di salvarlo usando la codifica per i caratteri UTF-8. Visto che questo documento non usa stili sembrerà piuttosto chiaro, ma è solo un piccolo inizio.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>A tiny document</title>
</head>
<body>
  <h1>Main heading in my document</h1>
  <!-- Note that it is "h" + "1", not "h" + the letter "one" -->
  <p>Loook Ma, I am coding <abbr title="Hyper Text Markup Language">HTML</abbr>.</p>
</body>
</html>

Come iniziare a scrivere in HTML

Per iniziare a scrivere in HTML serve anzitutto un editor di testo (Notepad++, Word, Blocco note, etc...). Aperto l'editor non resta che iniziare con lo scrivere le basi per far riconoscere il documento come una reale pagine web al vostro browser... speriamo sia Mozilla! Vediamo come iniziare.

<!DOCTYPE html>
<html lang="it-IT">
<head>
  <meta charset="utf-8" />
  <title>Inizio editing</title>
</head>
<body>

</body>
</html>

Descriviamo ciò che è stato scritto molto semplicemente: fra i tag <html> </html> ci sarà tutto ciò che il browser tradurrà per l'utente di modo che sia più fruibile che una serie di righe incasinate. Nei tag <head> </head> vanno posti: i caratteri da caricare, utf-8, è quello che usualmente si usa, per lingue con caratteri differenti si deve caricare un altro set di caratteri, <title> e </title> racchiudono ciò che viene visualizzato nella linguetta che segna la pagina attiva e poi, eventualmente, gli script Javascript (<script> </script>) e i fogli di stile CSS (<link> </link>) e altro che si carica con il medesimo tag; nei tag <body> </body> va tutto ciò che è, appunto, il corpo della pagina. Se dovessi esemplificare il tutto è come se i tag <html> </html> servissero per capire di che documento si tratta, gli <head> </head> per il titolo, con tutto ciò che comporta. E il body è il corpo,, come quando si scrive a Word, è quella cosa che sta subito sotto al titolo, come per il paragrafo e il titolo del paragrafo.