Padroneggiare LPI WDE #2: HTML, le fondamenta del Web

Quando navighiamo in Internet, passiamo da una pagina web all’altra, estraendo una miriade di tipi di informazioni e utilizzando vari servizi. È come consultare un’immensa biblioteca virtuale dove ogni libro può essere paragonato a una pagina web interconnessa con altre pagine sulla rete.

Una pagina web è un documento digitale che contiene informazioni di vario tipo accessibili da un utente finale. Ma come è possibile creare tali documenti?

L’importanza dell’HTML

Alla base di ogni pagina web c’è il linguaggio HTML. Nato alla fine degli anni ’80, è l’acronimo di HyperText Markup Language. HTML è il linguaggio attraverso il quale possiamo specificare semanticamente quali elementi vogliamo visualizzare all’interno di una pagina web e come disporli. Attraverso questo linguaggio, possiamo creare esperienze utente piacevoli utilizzando il testo, incluso:

• Formattare testi (creare titoli e paragrafi, mettere in grassetto o corsivo parole o porzioni di testo, ecc.)
• Creare elenchi numerati e puntati
• Inserire link
• Inserire contenuti integrati (immagini, audio, video)
• Creare moduli da compilare e inviare.
• Creare tabelle

Ogni pagina web segue una struttura ben definita, e ogni singola parte che la compone ha un significato specifico: Titoli, paragrafi, liste, tabelle e parole in grassetto o enfatizzate sono specificate attraverso tag o etichette appropriate, i marcatori HTML che danno istruzioni al browser su come formattare e visualizzare il contenuto dei tag stessi.

Un esempio:

<p Ciao LPI! /p > <>

In questo modo, definiamo un paragrafo che verrà visualizzato nel browser. Il tag corrispondente che indica al browser di creare un elemento paragrafo è “p”, e in questo caso, “<p>” è il tag di apertura, mentre “</p>” è il tag di chusura. I tag non saranno visibili al visitatore del sito web, ma il testo “Ciao LPI!” contenuto tra i tag di apertura e chiusura sarà mostrato sullo schermo.

Non preoccuparti! All’inizio, scrivere in HTML può sembrare un po’ strano. Tuttavia, man mano che ci si abitua a questo linguaggio, diventerà naturale, come se si stesse scrivendo un semplice testo. Come per ogni cosa, è sufficiente esercitarsi!

Nel tuo percorso per conseguire il Certificato Web Development Essentials di Linux Professional Institute (LPI), imparerai come creare e formattare pagine web comprendendo i principali tag che definiscono gli elementi essenziali in un documento, il loro significato semantico e i loro principali attributi utili per specificare i dettagli dell’elemento a cui si riferiscono.

Okay, Iniziamo!?

Imparare il linguaggio HTML è spesso considerato il primo passo verso il mondo della programmazione web. Per scrivere pagine HTML non sono necessari strumenti complessi; basta un comune editor di testo come il classico Notepad (vim o Kate se si desidera rimanere FOSS).

Alcuni tool per iniziare:

• Visual Studio Code: Un semplice editor di codice sorgente di Microsoft con funzionalità aggiuntive come il debug, il completamento del codice e il controllo di versione. È liberamente scaricabile, multipiattaforma, flessibile e ha molte estensioni per espandere le sue funzionalità secondo le tue esigenze. Ideale per principianti.
• Komodo Edit: editor di testo gratuito e open source, molto potente e altamente personalizzabile. Ha le classiche funzionalità di un editor di codice come il completamento automatico e l’indentazione, ma purtroppo non supporta il debugging.
• Sublime Text: editor di codice sorgente multipiattaforma e multilingua. Dispone di numerosi plug-in che lo rendono altamente versatile e adatto a ogni necessità. Può essere utilizzato gratuitamente per un tempo illimitato, ma la versione gratuita mostra frequenti messaggi di allerta che invitano l’utente a passare alla versione pro.

Per iniziare, ti suggerisco di utilizzare un semplice editor di testo sul tuo computer: in questo modo, puoi familiarizzare con i principali tag e i loro attributi, consolidando il più possibile la tua conoscenza. Una volta acquisita familiarità con il linguaggio HTML, è possibile utilizzare un editor di testo come quelli appena citati ed esplorarne le funzionalità. Scoprire le caratteristiche di un editor di questo tipo può essere molto interessante per il tuo percorso di apprendimento.

Avrai sicuramente sentito parlare di Visual Studio di Microsoft o di Xcode di Apple, solo per citare due degli IDE più popolari in circolazione. Anche in questo caso, ci sono molte alternative FOSS: Eclipse, MonoDevelop, o Apache NetBeans, per esempio.

Esistono anche ambienti di sviluppo più sofisticati e completi che incontrerai senza dubbio una volta nel mondo del lavoro. Si chiamano ambienti desktop integrati (integrated desktop environments, IDE) e sono progettati per semplificare la vita degli sviluppatori, in modo che possano lavorare in modo più efficiente, supportati da un unico programma. Un ambiente di sviluppo integrato fornisce ai programmatori un editor di testo e altri strumenti più o meno sofisticati che coprono l’intero processo di sviluppo del software: La creazione e l’automazione del codice, il completamento intelligente, la compilazione, il test e il debug sono alcune delle funzionalità offerte da un IDE che vi permetteranno di migliorare la vostra produttività e di diventare un programmatore più efficiente.

Come mostrato nella Figura 1, la funzionalità di un editor di codice è un sottoinsieme della funzionalità di un IDE.

Passi successivi

Come descritto nell’articolo precedente, l’HTML è, insieme a CSS e JavaScript, un linguaggio di programmazione front-end, poiché crea la parte del sito web visibile all’utente finale ed elaborata sul lato client. Una volta definita la struttura di una pagina web e i suoi elementi fondamentali, è necessario personalizzarla dal punto di vista grafico. A questo scopo, ci viene in soccorso il linguaggio CSS. I CSS sono responsabili della progettazione e della presentazione delle pagine web da un punto di vista estetico e, pertanto, sono complementari all’HTML. Vedremo i dettagli nel prossimo episodio della serie.

<< Leggi l’articolo precedente di questa serie | Leggi l’articolo successivo di questa serie >>