Il linguaggio HTML
Di seguito riporto il secondo articolo su Expression Web 3. Per comodità, raggrupperò tutti gli articoli sullo stesso argomento in un insieme di pagine statiche: per accedere a tutti gli articoli su Expression Web 3, seguite il link omonimo nella barra del menu in alto.
Nell’ultimo articolo abbiamo visto, sommariamente, come si può creare un semplice sito utilizzando Expression Web: in particolare, abbiamo creato un semplice sito di una pagina e abbiamo visto come apportare modifiche al codice HTML tramite l’editor di Expression, abbiamo salvato il lavoro e, infine, abbiamo controllato il risultato in un browser.
Il linguaggio HTML, come abbiamo accennato, serve per descrivere in modo formale il contenuto di ogni pagina web; un browser è in grado di visualizzare la pagina web interpretando il file html che la descrive. Più in particolare, tramite tale linguaggio possiamo definire i vari elementi della pagina (titoli, sottotitoli, paragrafi, elenchi, ecc…), l’ordine e le relazioni gerarchiche in cui stanno e, almeno fino a qualche anno fa, anche il loro aspetto grafico ed estetico. Oggi, in realtà, nella progettazione delle pagine web, si tende a tenere separata la struttura della pagina (il contenuto vero e proprio), che è definita tramite l’html, dagli aspetti grafici (come il contenuto deve apparire: tipo di carattere, colore, ecc…), che invece vengono curati con l’impiego dei fogli di stile (CSS, Cascading Style Sheet); di questi ultimi parleremo nei prossimi articoli.
Un’altra caratteristica dell’html, a cui pure abbiamo accennato, è che si tratta di un linguaggio comprensibile ai browser direttamente, senza bisogno di elaborazioni preliminari, cioè, come si dice in gergo, è un linguaggio interpretato. In sostanza, Expression Web (o qualunque altro tool di sviluppo) ci assiste nella fase della scrittura dei file, ma, una volta terminata la stesura, non fa altro che salvarli sul disco così come sono, senza effettuarne, come accade nel caso di molti linguaggi di programmazione, la compilazione (cioè la traduzione in linguaggio macchina, comprensibile al computer).
Per renderci conto di questa caratteristica, ricreiamo lo stesso piccolo sito che abbiamo costruito nello scorso articolo senza usare Expression Web, ma solo il Blocco Note di Windows. Apriamo, dunque, il Blocco Note e digitiamo il seguente testo:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns=http://www.w3.org/1999/xhtml> <head> <meta content=”text/html; charset=utf-8” http-equiv=”Content-Type” /> <title>La mia prima pagina web</title> </head> <body> <h1>Prima pagina web</h1> <p>Salve, questa è la mia prima pagina web.</p> </body> </html>
Salviamo il file con un nome qualunque, purché con estensione .html, e proviamo ad aprirlo con un browser: otteniamo lo stesso identico risultato della scorsa volta! Questo spiega perché, nel corso di questo articolo dedicato all’html, non faremo troppo riferimento ad Expression Web.
Passiamo, quindi, a descrivere più dettagliatamente il linguaggio, facendo riferimento all’esempio sopra riportato. La prima riga del file è il cosiddetto DOCTYPE, che definisce la versione di html usata: questa riga viene inserita in modo automatico da Expression Web e, per il momento, conviene lasciarla com’è.
L’elemento alla base della sintassi del linguaggio è il tag, o marcatore, costituito da una parola chiave racchiusa tra parentesi angolari (ad esempio <head>, <h1>, ecc...). L’intero file html, ad eccezione del DOCTYPE, è racchiuso tra i due tag <html> e </html>: il documento html, a sua volta, si divide in un’intestazione, racchiusa tra i tag <head> e </head> e un corpo, racchiuso tra i tag <body> e </body>. Il compito di questi tre tag è quello di delimitare delle porzioni significative del documento; ad esempio, l’intestazione inizia con il tag <head> e termina con </head>: il primo è detto tag di apertura, il secondo di chiusura. Questa caratteristica è comune a molti tag html, detti tag contenitori, che prevedono un’apertura e una chiusura, tra le quali è presente la porzione di documento che il tag individua.
Ad esempio, il contenuto di un singolo paragrafo è marcato dal tag <p>: il paragrafo inizia con <p>, tag di apertura, e termina con </p>, tag di chiusura (vedi la terzultima riga del codice); un titolo di livello 1 (il livello più alto) è individuato dal tag <h1> ed è compreso tra la sua apertura <h1> e la sua chiusura </h1> (vedi l’uso che se ne fa nello stesso codice).
Oltre ai tag contenitori, esistono anche alcuni tag, detti vuoti, che non hanno apertura e chiusura: un esempio è il tag <br />, che aggiunge un ritorno a capo e di cui vedremo tra poco qualche esempio di utilizzo.
Tornando un momento alla struttura di un documento html, abbiamo detto che si divide in intestazione e corpo: nell’intestazione ci sono delle informazioni riguardanti il documento, delle quali, al momento, non ci occupiamo; l’unica cosa che per il momento ci interessa dell’intestazione è il tag contenitore <title> che demarca il titolo della pagina (quello che appare nella barra superiore del browser); nel corpo, invece, è presente tutto il contenuto del documento, cioè tutto ciò che viene visualizzato nella finestra del browser e di questo ci occuperemo principalmente.
Nel seguente esempio, vedremo meglio l’utilizzo dei tag <p> ed <h1>, oltre ad introdurre i tag <br /> e <h2>: riprendiamo il codice scritto prima, modifichiamo il tag <title> come segue
<title>La mia seconda pagina web</title>
Riscriviamo, poi, l’intero contenuto del tag <body>:
<body> <h1>Introduzione ad Expression Web</h1> <p>In questa guida presenteremo le caratteristiche principali di Expression Web</p> <h2>Il linguaggio HTML</h2> <p>In questo paragrafo introdurremo le principali caratteristiche del linguaggio html. In particolare parleremo di <br /> tag contenitori<br /> tag vuoti.</p> <h2>Titolo del secondo paragrafo</h2> <p>Questo è il secondo paragrafo della guida.</p> </body>
Salviamo il file, sempre con estensione .html, ed apriamolo con un browser: il risultato, limitato al solo contenuto della finestra, è mostrato in figura 1.
Visualizzazione nel browser
Innanzitutto, vediamo il ruolo svolto dai tag <h1> e <h2>: questi hanno il compito di marcare i titoli all’interno della pagina; <h1>, in particolare, i titoli di primo livello (cioè di livello gerarchico più alto all’interno della pagina, mentre <h2> quelli di livello immediatamente inferiore.
Osserviamo che il browser mostra i titoli di secondo livello a caratteri più piccoli rispetto a quello di livello più alto; l’html prevede, inoltre, anche i tag per i titoli di livello via via più basso, da <h3> fino ad <h6>.
Il tag <p>, come abbiamo già osservato, permette di identificare un paragrafo, ovvero un blocco di testo che comincia (e finisce) con un ritorno a capo; se, all’interno di un paragrafo, vogliamo inserire artificialmente un ritorno a capo, senza tuttavia iniziare un nuovo paragrafo, possiamo usare il tag <br />, il cui funzionamento appare evidente osservando l’esempio.
Abbiamo accennato, nel primo articolo, alle caratteristiche dell’editor di Expression Web, in modo particolare al Completamento Automatico e all’IntelliSense: queste caratteristiche, dicevamo, possono in un primo momento sembrare inutili, se non, addirittura, fastidiose. Sulla scorta dei primi rudimenti sulla sintassi html, che abbiamo appena presentato, nel prossimo articolo torneremo a lavorare nell’ambiente di sviluppo di Expression Web ed evidenzieremo meglio le caratteristiche del suo editor, mostrandone l’utilità; parallelamente, introdurremo qualche altra nozione di html.