Web design – Nozioni base: HTML

Nel precedente articolo di questa rubrica abbiamo introdotto i concetti base del web (protocolli HTTP, differenza tra internet e web, sistema client-server) .

In questo articolo, invece, entreremo nello specifico e parleremo di HTML, cercando di capire cos’è una Pagina HTML e come funziona il linguaggio con il quale viene “scritta”.

Cos’è l’HTML

Innanzitutto, diciamo che una pagina HTML non è altro che un documento di testo, molto simile ad un documento word o .txt, scritto con un linguaggio di formattazione, appunto linguaggio HTML. Si, avete letto bene: tutte quelle straordinarie pagine dei siti web, con video, immagini, animazioni e interazioni stupefacenti sono tutte rese possibile da un semplice documento di testo, o per essere più precisi, di ipertesto.

In un qualsiasi sito, le pagine scritte in HTML rappresentano la base strutturale delle pagina web. Tali pagine possono essere un file HTML “puro” (.html) o un file di altro tipo contenente codice scritto con linguaggio html. Quindi:

l’HTML prima di tutto è un linguaggio.

A rendere questi file delle vere e proprie pagine web è il browser, ovvero, un software capace di interpretare il linguaggio HTML (insieme ad altri linguaggi) ed eseguire le istruzioni contenute all’interno dei nostri file. Senza il browser la nostra pagina web apparirebbe come una serie di stringhe di codice.

Cos’è l’ipertesto

Come abbiamo accennato, per comprendere l’HTML dobbiamo prima capire cos’è l’ipertesto. Un ipertesto è un testo contenente particolari parole chiave che mettono in relazione un insieme di documenti. Tali documenti risultano, quindi, essere collegati tra loro in una rete di informazioni non lineari, formata, cioè, da nodi di collegamento detti “collegamenti ipertestuali” o link.

Grazie a questa rete di collegamenti ipertestuali, qualsiasi documento può essere “il successivo” in base alla scelta del lettore, che può “viaggiare” senza un ordine prestabilito, da un documento all’altro, grazie a tali collegamenti.

Ad esempio: Se cliccate su questo testo “precedente articolo di questa rubrica ” verrete portati ad un’altra pagina. Ecco questo è un tipico collegamento ipertestuale. Il design nel tempo ha imparato a trasformare questi link facendoli apparire come elementi grafici: un pulsante, un’immagine, le voce di menù o il video di Youtube sulla bacheca del nostro social, sono tutti collegamenti ipertestuali.

Dall’ipertesto all’HTML

Il concetto di ipertesto esiste da molto prima della nascita di internet, prima della nascita del design stesso, è un concetto radicato nella storia della comunicazione. Proviamo a ripercorrere brevemente la sua storia:

1. L’ipertesto è un evoluzione tecnologia e teorica della scrittura: Dai primi pittogrammi nelle caverne ad oggi, la scrittura ha reso disponibili le informazioni che possono essere consultate anche a distanza di tempo.
2. I libri sono un invenzione cruciale, in cui ogni informazione ha un ordine prestabilito e ogni pagina segue quella precedente. Con l’ipertesto si vuole superare questo concetto di ordine.
3. La prima forma di ipertesto la si può fare risalire ad Agostino Ramelli, progettista rinascimentale che, nella seconda metà del 1500 ha ideato la “ruota dei libri”, con il quale si poteva passare da un libro all’altro in base alle informazioni che si volevano approfondire.
4. Fu però Ted Nelson, che coniò il termine hypertext molti secoli dopo, nel 1965. Egli definì ipertesto qualsiasi sistema di scrittura non lineare che utilizza l’informatica.
5. Nel 1989 Tim Berners-Lee, il ricercatore inglese del CERN che inventò il World Wide Web, sfruttò il conetto di hypertext di Nelson per ideare un sistema di condivisione di documenti ipertestuali.
6. Così, arriviamo allo sviluppo dell’HTML. Nel 1993, insieme al gruppo di lavoro dell’Internet Engineering Task Force (IETF) del CERN, chiamato “Integration of Internet Information Resources”, Berners-Lee insieme a Daniel Connolly, firmano la prima versione del HTML.

Da quel momento, per la prima volta una tecnologia permetteva alle persone di accedere ad informazioni in maniera arbitraria, passando da una pagina all’altra e senza un ordine prestabilito, cambiando di fatto il modo in cui pensiamo e ci rapportiamo con il sapere:

Nel web, teoricamente, non c’è qualcuno che sceglie con quale sequenza leggere le informazioni ma è l’utente stesso che sceglie le informazioni da reperire e l’ordine da utilizzare.

Lo sviluppo dei browser

Come detto, per poter visualizzare una pagina web e interpretare il linguaggio HTML, è necessario un particolare software chiamato browser. Fu lo stesso team di Berners-Lee ha sviluppare, nel 1990, il primo browser della storia, il WorldWideWeb, che però era riservato all’uso interno del CERN.

Circa tre anni dopo, il National Center for Supercomputing Applications (NCSA), all’Università dell’Illinois, rese pubblica la prima versione del loro browser pubblico, il Mosaic. Molto popolare nella comunità scientifica, offriva un’interfaccia di facile utilizzo che contribuì alla sua diffusione, facendo impazzire il traffico web, che passò da soli 500 web server a oltre 10.000 in un solo anno.

Negli anni successivi, le maggiori aziende di informatica svilupparono i loro browser, così in poco tempo si diffusero i celebri Internet Explorer, Netscape, Safari, Opera fino ai più recenti Mozilla Firefox, Google Chrome e l’ultimo arrivato Microsoft Edge.

Come funziona l’HTML

Ovviamente, in questo articolo ci limiteremo ad descrivere il funzionamento base del linguaggio HTML ma se volete imparare il linguaggio e scoprire i segreti del coding vi suggerisco di consultare uno dei miei riferimenti preferiti “HTML.it” e tenere in casa libri come: “HTML e CSS. Progettare e costruire siti web“, di Jon Duckett – edizioni Wiley.

Torniamo al funzionamento di questo affascinate linguaggio. HTML sta per HyperText Markup Language, si tratta quindi di un “linguaggio di marcatura d’ipertesto”. Questo vuol dire che l’HTML non è un vero e proprio linguaggio di programmazione, come ad esempio il C o il Basic, e chi fa coding HTML non si può definire un vero e proprio programmatore.

In particolare l’HTML è, più propriamente, un linguaggio di formattazione per marcatura, o markup, di dominio pubblico e, come tutti i linguaggi, regolato da un preciso codice e sintassi. Quest’ultimi vengono stabiliti e regolati dal World Wide Web Consortium (W3C).

Ma vediamo come funziona: I marcatori dell’HTML vengono rappresentati da una sequenza di caratteri detta tag, che per essere considerati validi dal browser devono essere racchiusi dalle due parentesi uncinate “<>”

Esempio

<div id="testoprova">Questo è un testo di prova</div>

Esempio di sintassi: stringa HTML, costituita dal tag "div", aperto tramite "<div>" al quale è stato assegnato l'attributo "id" con valore "testoprova". Alla fine della stringa troviamo "</div>" rappresenta la chiusura del tag "div". All'interno del tag (tra l'apertura e la chiusura), c'è il contenuto che verrà mostrato a schermo dal browser "Questo è un testo di prova".

Non essendo un linguaggio di programmazione, l’HTML non prevede alcuna struttura dati, funzioni o strutture di controllo, il suo codice è in grado soltanto di strutturare e stilizzare dati testuali. Tuttavia, esso ha il grande “potere” di integrare script e collegarsi a file esterni o includere elementi multimediali (quali immagini, video e audio) rendendo possibile la creazione di pagine interattive, complesse e visivamente pensate per una navigazione gradevole e un’esperienza utente completa.

Caratteristiche di un documento HTML

La “lettura” di un documento HTML segue le logiche della scrittura occidentale latina. Tali documenti hanno quindi le seguenti caratteristiche:

Verso

Sembra banale ma per per chi si occupa di programmazione vi assicuro che non lo è affatto: Come in un tradizionale file di testo, se un tag nel codice è scritto prima apparirà per primo nella pagina, se è scritto dopo apparirà dopo. Semplice no? Seguendo il verso di lettura da sinistra verso destra e dall’alto verso il basso.

Esempio

<p>Primo Elemento</p><p>Secondo Elemento</p><p>Terzo Elemento</p><p>Quarto Elemento</p><p>Quinto Elemento</p>

Tale codice html verrà mostrato così:

Gerarchia

Se un elemento nel codice è ramificato in un altro, cioè se un tag si trova ad esempio tra l’apertura e la chiusura di un altro tag, egli verrà tendenzialmente rappresentato all’interno dell’elemento genitore. I tag possono essere viste come delle scatole, che contengono altre scatole, che contengono a loro volta altri elementi.

Esempio

<div style="border: solid 1px #000;">
Primo Elemento
<div style="border: solid 1px #000; margin:5px;">
Secondo Elemento
<div style="border: solid 1px #000; margin:5px;">
Terzo Elemento<p>Quarto Elemento</p><p>Quinto Elemento</p>
</div>
</div>
</div>

Il secondo elemento è all'interno del primo (tra l'apertura e la chiusura). Il terzo è all'interno del secondo. Il quarti e il quinto sono allo stesso livello all'interno del terzo. I primi tre tag "div" hanno l'attributo "style" con una regola che gestisce l'aspetto del bordo del contenitore. Questo codice verrà interpretato dal browser così:

Struttura di un documento HTML

Un documento HTML è anche caratterizzato da una struttura. Essa viene utilizzata per convenzione e definita come detto dalla W3C. Tale struttura prevede tue macro sezioni, tag della head e tag del body, in cui inserire rispettivamente informazioni relative al documento stesso (principalmente metadata e script non html) e i tag che rappresentano il contenuto del documento. Tali tag struttutali vanno sempre messi all’interno al tag che informa il browser del tipo di documento, in questo caso:

<html>[...]</html>

Tag della head

La sezione head si inserisce, con tag “head“, subito dopo il tag di apertura “html“.

<html>
<head>[...]</head>
[...]
</html>

I tag utilizzati nella sezione head non vengono visualizzati dal browser ma servono come informazioni di servizio quali:

• metadata per indicare informazioni utili al browser (es. codifica dei caratteri, tipo di alfabeto, tipo di documento)
• matadata per il titolo, la descrizione e le parole chiavi associate alla pagina.
• metadata di tipo http-equiv per controllare informazioni aggiuntive nel protocollo HTTP
• collegamenti verso file di risorse esterne (fogli di stile CSS, icone visualizzabili nella barra degli indirizzi del browser)
• inserimento di script (codice eseguibile), non html, utilizzati dal documento
• informazioni di stile (CSS locali)

Tag del body

La sezione body si inserisce, con tag “body“, dopo la chiusura del tag “head“.

<html>
<head>[...]</head>
<body>[...]</body>
</html>

All’interno della sezione di body, si utilizzano i tag specifici previsti per la formattazione dei contenuti, quindi:

• testo (quindi titoli, testo indentato, paragrafi)
• aspetto del testo (come grassetto e corsivo)
• elenchi e liste (numerate, generiche, di definizione)
• tabelle
• moduli elettronici (campi compilabili, campi selezionabili, menu a tendina e pulsanti)
• collegamenti ipertestuali e ancore
• inserimento di immagini e contenuti multimediali
• contenuti interattivi (script, applicazioni esterne)

All’interno del body, si può creare, attraverso i tag, il layout della nostra pagina web anch’essa con una struttura convenzionale che potete approfondire in questo articolo.

Associazione con il CSS

Dopo i primi anni di diffusione del web, nacque la necessità di migliorare l’aspetto visivo delle pagine, per superare la struttura rigida e tabellare dell’HTML e ampliare le possibilità creative. Per questo motivo furono ideati i così detti “fogli di stile“. Tali documenti possono essere associati ad un documento HTML per descrivere l’aspetto dei vari elementi della pagina, attraverso il linguaggio CSS.

Oggi l’accoppiata HTML/CSS rappresenta uno standard imprescindibile per la creazione di pagine e siti web, anche perché più file HTML possono essere associati ad un singolo documento CSS così da avere uno stile coordinato e uniformare le singole pagine di un sito web.

Conclusione

Il linguaggio HTML ha rappresentato una rivoluzione nello scambio di informazioni in rete e rappresenta ancora oggi un fondamentale strumento per la creazione di siti internet e applicazioni browser. Con la crescente necessità di sfruttare il web per la comunicazione, sono state sviluppate versioni HTML e CSS sempre più efficaci e flessibili, portando il mondo del web design a risultati impensabili fino a soli 20 anni fa.

Oggi, grazie all’HTML5 e al CSS3, si possono creare siti internet personalizzati, facilmente navigabili e adattabili ad ogni dispositivo e schermo dell’utente. Proprio pe questo, nel prossimo articolo ci occuperemo del fedele compagno del HTML, il CSS.