martedì 23 marzo 2010

Guida ad Expression Web 3: pronto il terzo articolo

Pubblico di seguito la terza parte della mia guida ad Expression Web 3. I primi due articoli possono essere reperiti in Expression (il mio blog sul portale Academic Club), che sto riorganizzando, e precisamente qui e qui. Nei prossimi giorni predisporrò una pagina del mio sito da cui sarà possibile scaricare tutti gli articolo, anche in formato pdf.

L'annidamento dei tag

Abbiamo visto, nei primi due articoli, come il tag sia l’elemento principale della sintassi dell’html, la differenza tra tag vuoti e tag contenitori e, per questi ultimi, il ruolo del tag di apertura e di quello di chiusura.

I tag contenitori, come pure abbiamo già detto, marcano, cioè qualificano, in qualche modo, tutto ciò che è racchiuso tra l’apertura e la chiusura, ovvero ciò che contengono. Ad esempio, nella riga di codice

<h1>Introduzione ad Expression Web 3</h1>

il tag h1 qualifica come titolo di primo livello ciò che contiene, cioè il testo “Introduzione ad Expression Web 3”.

Un tag può contenere solo testo? Evidentemente no: un tag può contenere altri tag e, ognuno di questi può, a sua volta, contenerne altri, un po’ come delle scatole cinesi; è proprio ciò a cui ci si riferisce parlando di annidamento dei tag. Quando si utilizzano tag annidati, bisogna prestare la massima attenzione all’ordine in cui vengono aperti e chiusi: in particolare, un tag non può essere chiuso prima che siano stati chiusi tutti quelli contenuti al suo interno; in questo compito, tuttavia, la funzione di completamento automatico di Expression Web ci viene in aiuto.

Allo scopo di rendere più interessanti gli esempi, cominciamo con l’introdurre due nuovi tag: em e strong. Il primo, em, indica che il testo contenuto al suo interno deve essere enfatizzato e il browser, se non viene diversamente specificato nei fogli di stile (che vedremo più avanti), rende questo testo in corsivo, mentre strong indica che il testo in esso contenuto deve essere molto enfatizzato e il browser, se non diversamente indicato, lo rende in grassetto.

Come abbiamo imparato negli articoli precedenti, creiamo un nuovo sito a pagina singola e chiamiamolo “Tag annidati”, passiamo alla visualizzazione del codice della pagina default.html e apportiamo le modifiche indicate nel seguente listato:

<!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>Tag annidati</title>
</head>
<body>
<h1>Esperimenti con i tag annidati</h1>
<p>In questa semplice pagina web vediamo gli effetti dei tag em e strong, mentre sperimentiamo l’annidamento dei tag.</p>
<p>In questo paragrafo vediamo <em>l’effetto del tag em</em>, e quello <strong>del tag strong</strong>.</p>
<p>I due tag possono essere <strong><em>usati insieme</em></strong>, anche <em><strong>nell’ordine inverso</strong></em>
</body>
</html>

Prima di proseguire, salviamo il lavoro e verifichiamo l’effetto in un browser, come abbiamo imparato. In figura vediamo il risultato.

FIGURA 1

Durante la digitazione, abbiamo avuto modo di sperimentare la chiusura automatica dei tag e l’IntelliSense, di cui abbiamo parlato nel primo articolo: ora che possediamo le prime nozioni di html, siamo in grado di apprezzare meglio queste caratteristiche.

Partendo proprio dalla chiusura automatica, vediamo che appena viene aperto un tag, ad esempio il tag p, digitando <p>, immediatamente alla destra del cursore appare la relativa chiusura </p>: in questo modo, possiamo concentrarci sul contenuto del paragrafo, senza preoccuparci della chiusura; la stessa cosa, ovviamente, è successa per i tag em, strong, h1 e title.

Una considerazione a parte merita l’esempio nell’ultimo paragrafo, in cui, per avere un testo contemporaneamente in grassetto e in corsivo, abbiamo usato em e strong annidati l’uno dentro l’altro: pur non essendo importante l’ordine in cui si usano i due tag, è però fondamentale che l’ordine di chiusura sia l’inverso di quello di apertura, e anche in questo caso abbiamo potuto apprezzare la funzione di chiusura automatica dei tag, che ci permette di evitare errori.

Anche se non lo abbiamo detto esplicitamente, in realtà fin dal primo articolo abbiamo fatto uso di annidamento dei tag, infatti l’intero documento, a parte il DOCTYPE è racchiuso nel tag html: i tag head e body, che individuano, rispettivamente, l’intestazione e il corpo del documento, sono annidati in html, mentre title è annidato in head e p e h1 sono annidati in body.
L’altra caratteristica saliente dell’editor di codice di Expression Web (condivisa con altri ambienti di sviluppo Microsoft) è l’IntelliSense: mentre abbiamo digitato il codice mostrato sopra, abbiamo certamente notato che, appena aperta la parentesi angolare <, a destra del cursore appare un menu a discesa con un elenco di tag (vedi figura 2).

FIGURA 2

Appena appare il menu contestuale, usando i tasti freccia, possiamo selezionare una delle voci e premere ENTER per inserirla.

L’utilità di questa funzione è molto di più che non il semplice risparmio di tasti digitati. L’elenco mostrato dall’IntelliSense, infatti, è contestualizzato, cioè cambia a seconda del punto del documento in cui ci si trova: in un documento html, non tutti i tag possono stare dappertutto. Ad esempio, il tag p può essere usato solo all’interno di body, mentre il tag title solo all’interno di head: se proviamo ad aprire una parentesi angolare all’interno di head e poi all’interno di body, vediamo che l’elenco di tag suggeriti da IntelliSense è completamente diverso nei due casi: a seconda del punto del documento in cui ci troviamo, o, più precisamente, a seconda del tag all’interno del quale ci troviamo, ci vengono mostrati tutti e soli i tag che possono essere in esso annidati.

Finora abbiamo considerato siti web molto elementari composti da una sola pagina. Prima di passare a considerare elementi più complessi, come tabelle o immagini, e l’uso dei fogli di stile, allo scopo di rendere più interessanti gli esempi, conviene prima occuparci dei siti composti da più pagine e dell’inserimento di link: di questo parleremo nel prossimo articolo.

A presto.

Nessun commento:

Posta un commento

Poiché ho attivato la moderazione dei commenti, possono trascorrere diverse ore, dal momento in cui vengono postati, prima che siano visibili al pubblico.
Mi riservo di eliminare i commenti che risultino volgari, offensivi o, comunque, con contenuto illecito, nonché eventuali commmenti con spam.
Tutti gli altri interventi (osservazioni, precisazioni, richieste, critiche...) sono sempre graditi.

Powered By Blogger