Il linguaggio HTML
December 2nd, 2009 | 
Author: 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.
Posted in 
Tags: 
Aggiornamento della guida ad Expression Web 3
Nell’ultimo post, mentre annunciavo la pubblicazione della prima parte della mia guida ad Expression Web, anticipavo che, a causa dell’uscita sul mercato della versione 3 della suite Expression, avrei rivisto ed integrato la guida stessa, ove necessario, allo scopo di presentare anche le nuove caratteristiche del prodotto.
Nel frattempo è uscita anche la versione in italiano del software, la quale è già disponibile per i possessori di un abbonamento MSDN e probabilmente lo sarà presto anche per gli iscritti al programma MSDN Academic Alliance.
Ho deciso, quindi, prima di pubblicare gli articoli successivi della guida, di aggiornare il primo (già pubblicato): in particolare, ho cambiato gli screenshot, mentre il testo, a parte qualche dettaglio, è rimasto sostanzialmente invariato. Potete leggerlo a questa pagina.
Anche se, contrariamente alle mie intenzioni di qualche mese fa (quando ho cominciato a lavorarci), la guida farà riferimento alla versione 3, cercherò di evidenziare anche le differenze principali rispetto alla versione precedente, in modo che possa risultare di utilità anche agli utenti di Expression Web 2.
A presto.
Primo articolo su Expression Web
Ho pubblicato ieri, nella sezione relativa (vedi menu in alto) il primo di una serie di articoli su Expression Web. L’articolo era già stato pubblicato sul vecchio sito di Academic Club: in questa versione ho solo corretto qualche refuso ed apportato dei cambiamenti alla formattazione, necessari per il layout del nuovo blog.
Dal momento che sto lavorando a questa serie di articoli già da qualche mese, essi sono stati concepiti per la versione 2 del pacchetto Expression, mentre, come è noto, in questi giorni sta uscendo la 3.
Poiché l’esperienza mi insegna che la nuova versione di un software è sempre destinata a coesistere con la precedente per mesi (talvolta anche per anni) e inoltre, volendo dirla tutta, non ho molto tempo a disposizione, penso che lascerò sostanzialmente invariata l’impostazione degli articoli che sto scrivendo, continuando a riferirmi alla versione 2, ma aggiungendo, ove necessario, dei riferimenti alle nuove caratteristiche della 3.
A presto
Finalmente si parte!
Benvenuti!
Innanzitutto mi presento: mi chiamo Paolo Caramanica e sono un Microsoft Student Partner presso la Sapienza – Università di Roma e in questo blog, ospitato presso il portale dell’associazione Academic Club, mi occuperò di sviluppo web attraverso prodotti e tecnologie Microsoft.
La creazione di un sito web costituisce, oggigiorno, una materia molto vasta e trasversale, che non interessa solo informatici e programmatori, ma richiede anche l’intervento di altre figure professionali: grafici, editori, esperti di siurezza informatica, pubblicitari, esperti di usabilità, ecc…
Avendo a che fare con una materia tanto vasta, in queste pagine non potrò affrontarne tutti gli aspetti (né ho le competenze per farlo). Ciò che, invece, vi troverete è un insieme di tutorial, che creerò e arricchirò in corso d’opera, sulla creazione di pagine web, utilizzando, prevalentemente, prodotti e tecnologie Microsoft. Pur essendo, quindi, gli argomenti affrontati quasi esclusivamente tecnici, tuttavia, non trascurerò del tutto gli altri aspetti, soprattutto per quanto riguarda l’estetica e l’usabilità, e cercherò di rivolgermi a un pubblico più vasto possibile, costituito non soltanto a informatici e programmatori.
Per il momento non ho anora pubblicato nulla, ma entro qualche giorno comincerò a mettere online del materiale, di cui sto ultimando la preparazione, riguardante Expression Web 2; in ogni caso, vi terrò aggiornati.
Nella pagina Info potete trovare i miei contatti, altre informazioni su di me e sul blog, le condizioni di utilizzo del materiale pubblicato.
A presto.