*Linux Guide

Fare Web - Progetto e Realizzazione - Parte 3

*

La Struttura

È giunto veramente il momento di dare fuoco alle polveri e realizzare davvero la pagina base del sito. Questa pagina poi servirà come base a tutte le altre che comporranno il sito.
Lanciamo l'editor xhtml testuale e clicchiamo sui comandi per generare un nuovo documento, di solito File> Nuovo o File> New. In genere compare una pagina con alcune stringhe di codice già presente che potremmo chiamare la dotazione minima indispensabile, in altri editor compare la finestra di dialogo dove si deve scegliere che tipo di documento si vuole produrre e questa è la condizione migliore. Tra quelli che abbiamo provato e che offrono questa opportunità ci sono SEEdit 2.0 per Mac, Web Design 2.6 per Mac, Page Spinner per Mac, mentre HTML-kit per windovs apre una nuova pagina con dati preimpostati che poi si possono cambiare facilmente. In Linux l'editor Quanta imposta una pagina vuota sulla quale inserire i dati mano a mano necessitanti.
In ogni caso sceglieremo di produrre un documento xhtml 1.0 transitional e le righe di codice prestabilite sono le seguenti:


[ 1 ] <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
[ 2 ] <html xmlns="http://www.w3.org/1999/xhtml">
[ 3 ] <head>
[ 4 ] <title>Untitled Webpage</title>
[ 5 ] <meta name="generator" content="/" />
[ 6 ] </head>
[ 7 ] <body>

[ 8 ] <!--Inserisci qui il contenuto-->

[ 9 ] </body>
[ 10 ] </html>

E' un codice che va preservato con cura e che analizzeremo subito.
La prima stringa di codice è quella di definizione tipologica del documento e si chiama DTD o Document Type Declaration ovvero la dichiarazione dell'indirizzo al quale il browser si rivolge per ottenere le specifiche relative al tipo di documento dichiarato. E' una stringa di codice indispensabile in quanto la sua assenza crea difficoltà negli strumenti alternativi e assistivi che necessitano di sapere come e con quali regole rendere disponibile un documento. Le tipologie di documento a marcatori possono essere fondamentalmente due, HTML o XHTML, di cui ognuna ha alcune varianti. Dal momento che produrremo documenti XHTML, ci interessa di sapere che potremmo realizzare pagine secondo i tre standard propri di XHTML in versione 1.0 : Strict, Transitional o Frameset. La prima è la più rigorosa e non accetta attributi e valori relativi alla presentazione del documento. La seconda invece è più indulgente e tollera la presenza di attributi e valori presentazionali, la terza si riferisce alle pagine con struttura basata sui frames, deprecabile e da evitare [ 1 ]. Parleremo più dettagliatamente di Presentazione nella parte riguardante i CSS.

La seconda stringa di codice è il marcatore di apertura del documento xhtml e contiene delle informazioni importanti relative alla tipologia di linguaggio che viene usato nel documento stesso. Sarebbe importante inserire in questo marcatore anche la dichiarazione di linguaggio primario usato nel documento, nel nostro caso l'italiano, e per farlo basterà inserire l'attributo "lang" ed il valore "it", in modo che l'intera stringa di codice risulti essere :
<html xmlns="http://www.w3.org/1999/xhtml" lang="it">
La terza stringa è rappresentata dal marcatore di apertura della sezione di testa del documento dove viene ospitato il titolo della pagina rappresentato dalla quarta stringa di codice. Si nota come il titolo (title) sia composto sia dal marcatore di apertura (<title>) che da quello di chiusura (</title>) all'interno del quale dovremo mettere il titolo della pagina. E' sempre bene immettere il titolo della pagina specie per chi usa tecnologie assistive o browser testuali o alternativi. Nel nostro caso inseriremo il titolo "Pagina Base".
La quinta stringa di codice è relativa ai Meta marcatori, veicoli di informazioni supplementari ed intrinseche utili ai motori di ricerca per indicizzare le pagine nei loro database. Sono marcatori che accolgono quello che si potrebbe definire come codice genetico della pagina. Quello illustrato si riferisce all'informazione sullo strumento che ha generato la pagina ed è una informazione non molto importante. altre informazioni ben più importanti sono le seguenti:


<meta name="description" content="Descrivi il contenuto del sito">
<meta name="keywords" content="Le, parole, chiave, del, sito">
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta http-equiv="content-language" content="it">
<meta name="copyright" content="Titolo del Sito http://urldelsito.xxx">
<meta name="robots" content="noindex">
<meta http-equiv="reply-to" content="maildelsito@provider.xxx">
<meta name="author" content="Nome dello autore, maildellautore@provider.xxx">
<meta name="identifier-url" content="http://urldelsito.xxx">

di cui fornisco una breve descrizione nel box a fondo pagina. Sono marcatori che non vanno mai dimenticati aggiungendo un valore anche semantico alla pagina che ne è provvista.
La sesta stringa di codice è il marcatore di chiusura dell'area di testa della pagina e si comprende come l'area di testa sia un vero e proprio contenitore che può accogliere non solo quanto illustrato (titolo e meta tags) ma molto altro ancora che vedremo durante il proseguimento di questo tutorial.
La settima stringa è il tag di apertura dell'area "corpo" della pagina, quell'area nella quale andranno collocati i contenuti veri e propri (testo, immagini, filmati, file audio od altro). In genere un editor xhtml inserisce un testo d'esempio per orientare il webdesigner a inserire correttamente i contenuti come nel nostro caso (stringa 8).
La nona stringa è il tag (o marcatore) di chiusura dell'elemento "corpo" della pagina, mentre la decima stringa è il tag di chiusura del documento xhtml.

Abbiamo quindi visto come la struttura basilare di una pagina sia molto semplice e nel nostro caso il codice complessivo della pagina, con le piccole modifiche che abbiamo apportato, sarà il seguente :


<!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" lang="it">
<head>
<title>Pagina Base</title>
<meta name="description" content="Pagina di esempio sulla realizzazione di pagine web corrette">
<meta name="keywords" content="html,webdesign,tutorial,pagine web,sito">
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta http-equiv="content-language" content="it">
<meta name="copyright" content="Samp Site http://www.btre.it">
<meta name="robots" content="noindex">
<meta http-equiv="reply-to" content="borgio3@supereva.it">
<meta name="author" content="Giorgio Beltrammi, borgio3@supereva.it">
<meta name="identifier-url" content="http://www.btre.it">
</head>
<body>

<!--Inserisci il contenuto qui-->

</body>
</html>

Se ci facciamo caso la struttura illustrata assomiglia moltissimo alla cellula in cui una parte è costituita dal nucleo - rappresentata dall'area di testa - una parte dal citoplasma - rappresentata dall'elemento "corpo" - e da una parte dalla membrana esterna - rappresentata dall'elemento html. E' importante quindi capire che le varie strutture della cellula non si intersecano tra loro, ma rimangono ben distinte e questo deve accadere assolutamente anche per pagina web. Una pagina in cui ci sia una buona organizzazione e dei precisi annidamenti, è una pagina "ben formata".
Salviamo questa pagina con il nome "Pagina_base" e con l'estensione ".htm" in una cartella dal nome "SampSite" che porremo nella directory "Documenti" della vostra /home.

<< Precedente | Indice | Successiva >>

[ 1 ] Attributi e valori presentazionali

Diffrenze di dichiarazione stilistica

Il modo con il quale si vuole che i contenuti di una pagina siano visti (colore del testo, di sfondo, tipo di carattere, grandezza, ecc.) possono essere gestiti in due modi principali : uno a ridosso dell'elemento che si vuole presentare ed uno con richiami a strutture esterne che contengono gli stessi dati. Supponiamo che si voglia colorare di rosso una scritta particolare. Lo si può fare rivestendo la scritta di un messaggio che indica che la scritta deve apparire rossa, oppure lo si può fare inserendo un comando che dice al browser di leggere il foglietto di istruzioni, dove è indicato che la scritta, a cui è collegato il foglietto, deve essere visualizzata in rosso (vedi la figura sopra).
Il primo tipo di soluzione si può definire come dichiarazione presentazionale inline che non viene tollerata da XHTML 1.0 Strict, mentre è accettata dalla variante Transitional. La seconda soluzione si può definire dichiarazione presentazionale esterna ed è tollerata sia da XHTML 1.0 Strict che da XHTML 1.0 Transitional.


I Meta Tags e il loro significato
<meta name="description" content="Descrivi il contenuto del sito">
contiene informazioni descrittive sui contenuti della singola pagina
<meta name="keywords" content="Le, parole, chiave, del, sito">
contiene le parole chiave che identificano i contenuti della pagina. Sono parole separate da una virgola e senza spazi vuoti
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
contiene informazioni sul tipo di codice impiegato per la visualizzazione dei caratteri speciali.
<meta http-equiv="content-language" content="it">
indica il linguaggio primario del documento.
<meta name="copyright" content="Titolo del Sito http://urldelsito.xxx">
indica a chi rivolgersi per i diritti d'autore sui contenuti del documento
<meta name="robots" content="noindex">
comunica agli spider dei motori di ricerca come sia stato indicizzato il documento e come si debbano comportare nei suoi confronti
<meta http-equiv="reply-to" content="maildelsito@provider.xxx">
indica a chi rispondere o a chi inviare comunicazioni riguardo ai contenuti del documento
<meta name="author" content="Nome dello autore, maildellautore@provider.xxx">
indica chi sia l'autore del documento e la sua mail
<meta name="identifier-url" content="http://urldelsito.xxx">
indica l'indirizzo completo della pagina

Linux Guide | Torna in alto