iSpazio DevResources 03: Nozioni Generali di HTML

28 Marzo 2011 +

Benvenuti ad un nuovo appuntamento per la programmazione web di iSpazio DevResources!

Questa volta faremo una panoramica sulle caratteristiche generiche del linguaggio HTML ed in particolare sui “mattoni” che lo costruiscono direttamente secondo le direttive che lo standard ci propone.
Questa lezione quindi, vuole essere uno spunto per consentire agli utenti di conoscere le caratteristiche fondamentali del linguaggio HTML, descrivendo solo gli aspetti utili per un approfondimento successivo.

Ma iniziamo subito…

Come abbiamo precedentemente detto, il linguaggio HTML (che è acronimo di Hypertext Markup Language) è un linguaggio di Markup, cioè un linguaggio che consente di “descrivere” il contenuto della nostra pagina web, ben diverso da quello che è un linguaggio di programmazione (in quanto, per esempio, l’HTML non ci consente di gestire operazioni condizionali come il classifo if, then, else).

Lo scopo del linguaggio è quello di consentire ad uno “user-agent” (nel nostro caso il browser) di leggere ed interpretare correttamente la nostra pagina, rappresentandola in tutte le sue caratteristiche indipendentemente da quale sia il dispositivo che lo “valuta”. I documenti HTML possono essere difatti interpretati da un enorme numero di dispositivi video, attraverso un sintetizzatore vocale, o anche su un display braille.

I documenti HTML normalmente hanno un estensione .html o .htm (per la compatibilità con i tempi dei sistemi operativi con supporto ad estensioni file da 3 caratteri), ed è possibile crearli o editarli per mezzo di un semplice editor di testo, nonostante siano presenti sul mercato numerosissimi editor specifici sia commerciali che open source.

E’ possibile approfondire l’argomento e vedere un elenco di software alla pagina: http://it.wikipedia.org/wiki/Lista_di_editor_HTML

La struttura dei documenti

Ogni documento HTML è costituito da una struttura ad albero di elementi e testi che definiscono la struttura della pagina che deve essere interpretata dal browser.

Gli elementi HTML che compongono la struttura ad albero possono rappresentare intestazioni, paragrafi, collegamenti ipertestuali, elenchi, immagini, oggetti multimediali e tanti altri tipi di strutture utili a descrivere e popolare al meglio la nostra pagina web.

Ognuno di questi elementi deve essere rappresentato sul documento HTML per mezzo di Tag, che sono gli “ormai famosi” descrittori indicati dalle parentesi acute < e >
I tag possono essere scritti indistintamente sia in minuscolo che in maiuscolo e, consentono al browser di interpretare correttamente i singoli elementi della pagina e la struttura gerarchica che li correla.

Per chiarire un pò questi concetti è sicuramente più semplice vedere come si presenta un documento HTML base:

<!DOCTYPE html><html>
<head>
<title>Titolo per la barra titolo del browser</title>
</head>
<body>
<h1>Titolo della pagina</h1>
<p>Questo è un paragrafo</p>
<!– e questo invece è un commento –>
<p>Questo è un paragrafo
<a href=”test2.html”>con un link contenuto in esso</a>
</p>
</body>
</html>

L’elemento radice di questo albero è l’elemento <html>, che è l’elemento sempre presente nei documenti HTML, e che contiene due elementi ulteriori <head> e <body> che tratteremo meglio in seguito.

Descrivere Elementi HTML con i Tag

La tipologia degli elementi HTML è suddivisa in 5 macro categorie a seconda del tipo di tag da utilizzare per la pagina web:

Normali: ritentrano in questa categoria gli elementi che consentono di contenere al loro interno ulteriori dati che vanno dal semplice contenuto testuale sino ad arrivare ad altri elementi HTML.

Normalmente questo tipo di elementi sono descritti per mezzo di un tag di apertura (ad esempio <p> che è il tag di apertura per i paragrafi) ed uno di chiusura (ad esempio </p> che è il tag di chiusura per i paragrafi).
Nell’esempio su riportato possiamo notare tra i tag normali gli elementi <p> (uno di essi ad esempio contiene a sua volta un tag collegamento ipertestuale <a>, le intestazioni <h1>, etc…).

<p>Questo è un paragrafo</p>

Vuoti: rientrano in questa categoria gli elementi che non consentono di contenere nulla al loro interno e sono descritti per mezzo di tag cosi detti ‘vuoti’.

In questo caso non esiste un tag di apertura ed uno di chiusura, bensì vengono indicati con un tag unico, come ad esempio <img> che consente di definire le immagini:

<img src=”foto.jpg” alt=”questa è una foto” />

o evitando lo slash finale e quindi:

<img src=”foto.jpg” alt=”questa è una foto” >

Contenuto “Foreign” (Estraneo): rientrano in questa categoria gli elementi che fanno parte di altre specifiche esterne ad HTML (come SVG, MathML, etc…), ma che possono essere incluse nelle pagine web HTML.

Testo “Raw” (Grezzo): rientrano in questa categoria gli elementi che consentono di includere script <script> e stili <style> nella pagina HTML.

Questi elementi sono anch’essi descritti con tag di apertura e chiusura.

RCDATA: rientrano in questa categoria gli elementi di tipo titolo <title> e Area di testo <textarea>. Questi elementi consentono di avere un testo incluso trattato come “testo letterale”, in modo da ignorare ciò che altrimenti potrebbe essere interpretato come un tag o un carattere speciale.

E’ utile sapere che è possibile includere nei documenti anche dei commenti testuali (non valutati dai browser) inserendoli tra la combinazione di caratteri <!– e –>.
I commenti possono essere anche distribuiti su più righe.

N.B. Nonostante sia possibile in casi particolari poter omettere la chiusura di tag, o l’omissione di interi tag (come ad esempio lo stesso <html> tag di apertura della pagina) si ritiene fortemente sconsigliato utilizzare queste scorciatoie sia per migliorare la leggibilità del codice, sia per l’interpretazione da parte dei browsers.

Nidificazione di Elementi HTML con i Tag

Tralasciando momentaneamente il significato dei singoli tag (che verranno man mano snocciolati con il divenire delle lezioni) è comunque possibile notare dall’esempio su riportato e dalla distinzione per tipologia degli elementi che un file HTML è composto da una serie di tag che descrivono la struttura del documento stesso, ed alcuni dei tag (quelli su descritti come “Normali” ad esempio) consentono di nidificare ulteriori elementi, offrendo così elevatissime possibilità di realizzazione dei contenuti e la creazione della struttura ad albero della pagina.

La possibilità di nidificare ha in ogni modo alcune regole:

E’ importante sapere che la nidificazione dei tag non deve avere sovrapposizioni tra di essi, e cioè che ogni tag deve essere completamente all’interno dell’elemento che lo contiene.
E’ inoltre necessaria una distinzione tra gli elementi di tipo block-level ed inline.

Un elemento di tipo block-level può contenere altri elementi dello stesso tipo, elementi testuali ed elementi inline. All’interno di una pagina un elemento di tipo block-level verrà sempre mostrato su una nuova riga, prenderà tutta la larghezza disponibile del suo tag “contenitore”, mentre l’altezza cambierà a seconda del suo contenuto.

Alcuni esempi di elementi HTML di tipo block-level sono: <div>, <h1>…<h6>, <p>, <ul>, <ol>, <dl>, <table>, <blockquote>, <form>

Un elemento di tipo inline potrà contenere solo ulteriori elementi dello stesso tipo.
Un elemento di tipo inline si disporrà orizzontalmente sulla riga corrente e prenderà la dimensione (sia in larghezza che in altezza) minima per il suo contenuto.

Alcuni esempi di elementi HTML inline sono: <span>, <a>, <strong>, <em>, <img />, <abbr>.

Gli Attributi

Ogni elemento può avere degli attributi che descrivono come deve comportarsi all’interno della pagina web stessa, come ad esempio consentire di avere un nome univoco per essere identificato, specificare l’appartenenza ad una specifica “classe” di elementi, essere visibile o meno, essere editabile o meno, e così via.

Gli attributi dei tag vanno indicati all’interno dell’apertura del Tag, e vanno indicati nel seguente modo Attributo=”valore attributo”.

Le virgolette (o eventualmente gli apici) possono essere omesse nel caso in cui il valore non contenga spazi, mentre sono obbligatorie in caso di stringhe vuote o di alcuni caratteri particolari come “, ‘, =, parentesi acute, etc…

<input name=ragsociale disabled="">

<input name=ragsociale maxlength=50>

<input name=ragsociale maxlength='50'>

<input name=ragsociale maxlength="50">

E’ necessario fare una distinzione. Esistono degli attributi di carattere Globale (cioè applicabili indistintamente a tutti gli elementi HTML) ed alcuni di carattere specifico (cioè applicabili solo ad alcuni specifici elementi HMTL).

Sono inoltre disponibili con l’avvento di HTML 5 anche degli attributi di tipo custom, che saranno comunque trattati al momento opportuno mentre inizieremo dal prossimo appuntamento a trattare gli attributi Globali.

Stili di una pagina HTML

Risulta necessario chiarire che in HTML viene descritta la struttura della pagina, mentre la gestione della formattazione viene delegata ai CSS (Cascading Style Sheets), cosi da rendere possibile la corretta visualizzazione su un enorme numero di dispositivi differenti.
Difatti la distinzione tra le due tecnologie rende possibile separare nettamente i contenuti della pagina, dalla formattazione grafica degli stessi consentendo uno sviluppo più semplice ed efficace anche su dispositivi di differente natura.

N.B. L’argomento CSS è estremamente ampio ed in questo corso non verrà trattato, ma si accennerà spesso a delle caratteristiche dello stesso per consentire un corretto svolgimento del corso.

Scripting

Come anticipato la scorsa volta il browser al momento del caricamento di un documento HTML si occuperà di valutare la struttura del documento per creare il DOM del documento stesso, che è una API di programmazione che offre una collezione di oggetti di tutti gli elementi che compongono la pagina stessa (oltre a degli oggetti globali) e che possono essere “gestiti” per mezzo di un linguaggio di scripting “DOM Oriented” come javascript.

Il DOM può essere manipolato dagli script nella pagina, che sono piccoli programmi (tipicamente in JavaScript) che possono essere incorporate utilizzando l’elemento <script>.

N.B. L’argomento Script e Javascript è estremamente importante per poter conoscere la specifica HTML 5, che basano moltissime delle novità proprio sullo scripting.
Il linguaggio Javascript risulta inevitalbimente un requisito fondamentale per la corretta comprensione del corso, anche se proveremo il più possibile ad essere chiari negli esempi.

Conclusioni

Concludiamo questo appuntamento sperando di aver saziato i palati di più lettori possibile facendo degli accenni generali al linguaggio ed ai “mattoni fondamentali” per la costruzione di pagine web.

Dal prossimo appuntamento comincieremo a fare sul serio iniziando ad analizzare i tag fondamentali presenti su ogni pagina (come su anticipato i vari <html>, <body>, etc…) ed i nuovissimi tag strutturali e semantici! Spero di esservi stato utile!

Alla prossima…

Francesco Sciuti

P.S. Per i più curiosi e studiosi vi suggerisco alcuni links dove poter trovare un’analisi dettagliata di ogni singolo tag presente nel nuovo standard HTML 5, ed anche dei tag ormai in disuso e deprecati.