Se pensiamo al web e a tutto quello che ci offre oggi, di cui non possiamo praticamente più fare a meno, lo dobbiamo molto all’HTML, un linguaggio nato nei primi anni 90, grazie al quale è possibile creare le pagine web che ci permettono di essere connessi con il mondo e di usufruire di infiniti servizi online. Ma cos’è HTML? A cosa serve esattamente e come funziona?
Se hai mai provato a studiare qualcosa a proposito di sviluppo di siti Internet o applicazioni web in genere, cercando di capire come creare anche solo un semplice sito web, avrai sicuramente incontrato durante la tua ricerca il termine HTML, magari associato ad altri termini come CSS, javascript o qualche linguaggio di programmazione “lato server” come ad esempio PHP. Nonostante siano tanti i termini che puoi aver incontrato durante la tua ricerca, e di conseguenza tante sono le tecnologie che interessano il mondo del web, imparare l’HTML è il primo passo da compiere se vuoi imparare a creare siti web e viene considerato, in genere, la parte più “facile” di uno studio simile in quanto ha una sintassi abbordabile, non è criptico come il CSS e non essendo un vero e proprio linguaggio di programmazione non richiede logica da programmatori come Javascript e PHP.
Ok, è vero che non sia così complesso, ma ha un’importanza fondamentale nel panorama dell’Informatica e questa guida vuole metterlo bene in evidenza sottolineando la validità che può avere la sua conoscenza nell’arricchimento della tua professionalità. Iniziamo quindi a conoscerlo meglio.
Il Wold Wide Web o WWW, come spesso si dice, è così diffuso e coincide così tanto con l’idea che l’utente ha di Internet che le loro identità vengono spesso confuse. Ciò è assolutamente errato. Internet è la cosiddetta “rete delle reti”, una via di comunicazione intricata e gigantesca che permette di offrire qualsiasi tipo di servizio. Affonda le sue radici verso la metà del secolo scorso e nasce come una forma di contatto tra pochi centri di ricerca degli Stati Uniti. Insomma, Internet può essere pensata come una sorta di gigantesca rete stradale dei dati che copre il pianeta intero.
Il WWW è invece un’applicazione che viaggia su Internet, la sua applicazione principale se vogliamo essere precisi, nata nel 1989 ad opera di una delle maggiori personalità dell’Informatica di oggi e di sempre: Tim Berners-Lee.
Questi, dai laboratori presso il CERN di Ginevra, propose un progetto di condivisione di ipertesti basato sul protocollo http ed il formato HTML (HyperText Markup Language). Gli ipertesti sono, in generale, quello che oggi chiamiamo pagine Web ovvero dei documenti che, oltre a contenere testo, sono in grado di offrire contenuti multimediali quali suoni, video, immagini, animazioni e link ad altre pagine e risorse.
Per poter diffondere questi ipertesti serviva però preparare un insieme di strumenti. Era necessario che:
Quindi HTML sin dall’inizio ricoprì un ruolo fondamentale nel WWW, ruolo in cui venne affiancato da altri formalismi quali CSS ed i vari linguaggi, senza perdere la sua importanza. Cosa eccezionale fu che, nonostante nei decenni Internet cambiasse così tanto vedendo la nascita di motori di ricerca, e-commerce, Social Network ed altro, HTML cambiò molto lentamente richiedendo sedici anni per passare dalla sua versione 4.01, quella con cui il WWW conquistò il mondo, alla versione 5, pubblicata nel 2014. Quale ne fu il motivo? Probabilmente, non è da individuare nella pigrizia di chi avrebbe potuto aggiornarla, ma in una sua completezza originaria piuttosto avanzata rispetto a quella che era la sua mission.
Entriamo ora però nei dettagli tecnici.
Innanzitutto, HTML non è da considerare come un linguaggio di programmazione pertanto in HTML non ci si programma, e questo rende il suo studio davvero semplice e alla portata di tutti. Possiamo considerarlo un formato di marcatura dei contenuti e ottimi professionisti che lo usano in qualità di web designer non sono affatto programmatori.
Per vedere come è fatto HTML, basta aprire una comune pagina web, fare click con il tasto destro del mouse e selezionare una voce che tutti i browser hanno (“Visualizza sorgente pagina”, “HTML” o simili) che serve a mostrare il sorgente HTML della pagina. Se provate a visualizzare ora l’html ad esempio di questa pagina non spaventatevi, è davvero più semplice di quanto si possa credere a prima vista.
Il fatto che si possa vedere l’HTML di qualsiasi pagina a piacimento dimostra subito una cosa: l’HTML che costituisce una pagina è pubblico proprio perché deve viaggiare sulla comunicazione http e passare dal server al browser. Questo succede anche per CSS e Javascript e tutto ciò che costituisce il “lato client” o se vogliamo il “front-end” di un’applicazione o di un sito web. Affinché il browser interpreti questi contenuti deve possederli fisicamente e non vige alcuna regola di riservatezza perché non possa mostrarli all’utente. Il discorso cambia per PHP ed il resto del codice “lato server” o “back-end” che viene eseguito sul server e con la sua elaborazione produce buona parte di HTML inviato al client.
Sicuramente il contenuto HTML che appare in questo modo nel browser non è molto comprensibile: si tratta spesso di pagine professionali pertanto piuttosto complesse. Per questo motivo, per capire com’è fatto HTML conviene partire da esempi iniziali più facili al fine di familiarizzare con la sua sintassi.
Vediamo quindi subito un esempio di HTML. Questa è una pagina web, scritta utilizzando appunto il linguaggio HTML molto basilare:
<!doctype html>
<html lang="it">
<head>
<meta charset="UTF-8">
<title>Prima pagina Web</title>
</head>
<body>
<h1>Benvenuti!</h1>
<p>Questo è un esempio molto semplice di HTML</p>
</body>
</html>
Per vedere cosa questo codice produce possiamo scrivere in un qualsiasi editor di testo il codice e salvarlo quindi in un file con estensione .html ed aprirlo infine con un browser per ottenere quanto mostrato in figura:
Il formato HTML si distingue per le notazioni a tag come ad esempio
<h1>
Questo è il tag h1 ed è contenuto tra le parentesi uncinate < .. >. Un linguaggio che usa questo tipo di notazioni prende il nome di linguaggio a tag. I tag non vengono mostrati nel browser ma sarà visibile solo l’effetto che essi producono nei contenuti.
Ad esempio
<h1>
crea un titolo, un testo più grande ed evidenziato, mentre
<p>
è un paragrafo di testo normale. Osservando la figura, infatti, puoi notare la differenza che c’è tra il modo in cui appare “Benvenuti!” e l’aspetto di “Questo è un esempio molto semplice di HTML”.
Il codice:
<h1>Benvenuti!</h1>
compone un nodo che inizia con il tag di apertura:
<h1>
e finisce con il tag di chiusura:
</h1>
Un tag di chiusura è uguale a quello di apertura, ma contiene come secondo carattere uno slash (/). L’espressione “Benvenuti!” è il contenuto del nodo.
Oltre ai contenuti, un tag può contenere degli attributi come
<meta charset="UTF-8">
che include un attributo charset il cui valore è impostato a UTF-8.
La struttura di una pagina HTML, sommariamente, è concentrica nel senso che è composta da più strutture, annidate l’una nell’altra. Il documento inizia con l’espressione
<!doctype html>
e subito dopo vede un tag di apertura
<html>
Nota che tale tag viene chiuso all’ultima riga da
</html>
in fondo alla pagina, pertanto potremmo dire che l’intero documento è il suo contenuto.
Internamente a <html> vi sono due sezioni fondamentali:
<head> e <body>
La prima contiene le intestazioni, una serie di configurazioni, per così dire, della pagina nel suo complesso. Ad esempio, il nodo:
<head>
contiene:
<title>Prima pagina Web</title>
ed infatti se guardi in alto nella figura il titolo della scheda è impostato proprio a “Prima pagina Web”.
Il blocco:
<body>
contiene tutto ciò che è destinato a costituire ciò che l’utente vedrà ed utilizzerà della pagina web quindi proprio qui si focalizzerà il grosso del lavoro del web designer.
Da studiare nel linguaggio HTML c’è ancora molto oltre a questi concetti di base e fortunatamente il nostro sito offre tutte le informazioni necessarie. Molto importante però è tenere presente che HTML da solo non basta. Se si vuole diventare creatori di pagine web è necessario, almeno, affiancare a questo lo studio di CSS e framework collegati.
Negli anni, ad HTML è stato lasciato il ruolo importantissimo di fornire un’architettura alla pagina ed un significato alle sue componenti: cosa ne costituisce una sezione; cosa ne rappresenta un contenuto; qual è il suo header e il suo footer, etc. Tutti i tag dedicati per lo più alla formattazione dei contenuti come colori, stile ed evidenziazioni sono stati rimossi o sono caduti in disuso in quanto l’aspetto esteriore degli elementi è affidato ai CSS. Questa è la tecnologia dei cosiddetti fogli di stile, un insieme di regole applicate ai tag, che entrano in funzione una volta che il foglio è associato ad una pagina HTML.
Il vantaggio dell’uso dei CSS è fondamentale in quanto uno stile può essere associato facilmente a più pagine e su di queste modificato uniformemente. Pertanto, HTML e CSS costituiscono la base per realizzare le pagine web e, se vuoi cimentarti un po’ con la programmazione, studiando Javascript ed i framework su di esso basati come Vue.js, React o Angular potrai diventare un completo realizzatore di interfacce utente per siti Internet.
