Page 1

TECHNOLOGY INTEGRATION IN EDUCATION

Gianfranco D’Aversa

PROGRAMMARE IN HTML ANALISI E STRUTTURA DI UN TEMPLATE (Versione italiana)

www.gianfrancodaversa.com


Programmare in HTML Analisi e struttura di un template in HTML I documenti web devono essere costruiti in modo logico. Affinché un documento sia conforme e superi la convalida, è necessario che contenga determinati elementi. Conformità significa che un documento rispetta effettivamente il linguaggio e la versione del linguaggio con cui è scritto. La convalida è invece la procedura tecnica con cui testiamo la conformità, per trovare eventuali errori. La prima cosa che si può fare per essere assolutamente certi che le pagine abbiano la massima probabilità di essere conformi è inserire tutti gli elementi richiesti e strutturali che occorrono, prima di cominciare ad aggiungere testo e altro contenuto. In realtà, è solo col senno di poi che la maggior parte delle persone che lavorano su siti web hanno migliorato il modo di usare la marcatura. Il web ha attraversato un periodo di evoluzione e rapida crescita tale che molti nuovi elementi e nuove caratteristiche sono stati aggiunti tutti insieme ai browser e ad HTML. Molte di queste caratteristiche si sono trasformate nelle attuali specifiche, ma molte no. Inoltre, elementi delle pagine HTML che si sarebbero dovuti includere dall'inizio spesso sono stati ignorati, anche dai professionisti. Potremmo chiederci come ciò sia possibile. Occorre tener presente che il principale software usato per interpretare l'HTML è il browser web desktop. Questi browser da sempre perdonano molti errori, ma ne introducono anche molti! I browser sono stati al tempo stesso la benedizione e la maledizione del web in quanto è vero che hanno consentito l'innovazione, ma spesso hanno dato più importanza all'aggiunta di caratteristiche divertenti che non al supporto di base per determinati linguaggi. Il web è perciò oggi un terreno selvaggio in cui l'HTML è usato senza molte regole, spesso non è conforme e valido, e di frequente è creato senza i componenti strutturali di base richiesti dal linguaggio. È attivo un movimento che ha lo scopo di migliorare gli standard dei browser e gli strumenti usati per sviluppare siti web, oltre che aiutare tutti coloro che desiderano creare pagine che non solo funzionano ma che funzionano bene, indipendentemente dal fatto che siano personali o professionali. In questa Guida verrà illustrato come creare un template che conterrà tutte le informazioni tecniche e strutturali necessarie e utili che formano la base di un documento che sarà conforme e valido.

Come dichiarare e identificare il documento La prima cosa che occorre fare nella nostra pagina sarà aggiungere un po' di codice che dichiari il tipo di documento che stiamo usando e identifichi la versione del linguaggio. Possiamo farlo con SGML (Standardized General Markup Language), il linguaggio padre di HTML, che appare in questa importante dichiarazione, detta dichiarazione DOCTYPE. La dichiarazione è una porzione di codice univoca, e in tutti i documenti che si creano occorre usare una dichiarazione adeguata. L'esempio 1.1 mostra la dichiarazione DOCTYPE che useremo in tutti i nostri esempi: ESEMPIO 1.1. La dichiarazione DOCTYPE per XHTML 1.0 Transitional <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitiona1//EN" "http://www.w3.org/TR/xhtm11/DTD/xhtml1-transitional.dtd">

Se ci sembra un po' strana, non dobbiamo preoccuparci: la esamineremo dettagliatamente in modo da capire cosa significa ogni sua parte. Prima di tutto compare l'apertura < ! ; molti utenti che hanno visto codice HTML potrebbero

Gianfranco D’Aversa

1


PROGRAMMARE IN HTML

Analisi e struttura di un template in HTML

chiedersi cosa significa. La parentesi angolare è un componente familiare di HTML, ma il punto esclamativo appare solo in un altro ambito, i commenti, che saranno descritti più avanti. Questo simbolo non è usato molto spesso in quanto nel contesto di HTML è usata la sua sintassi SGML. Qui significa semplicemente che sta per iniziare una dichiarazione. Di seguito si trova DOCTYPE, che indica che il codice dichiara il tipo di documento. La parte successiva è html, che dichiara che questo tipo di documento è scritto in HTML. Notiamo che la parola "html" qui è in minuscolo. Questo è significativo in quanto stiamo usando XHTML: poiché XHTML è sensibile alle maiuscole, questa particolare sezione della dichiarazione deve essere in minuscolo. In caso contrario, il documento non sarà convalidato. La parola PUBLIC è un'informazione importante. Significa che il particolare tipo di documento referenziato è un documento pubblico. Molte società creano versioni univoche di XHTML, con elementi e attributi personalizzati. Per i nostri scopi, la versione pubblica di HTML che useremo è assolutamente sufficiente. La sintassi successiva, "-//W3C//DTD XHTML 1.0 Transitional//EN", definisce l’host del tipo di linguaggio e versione del documento (The World Wide Web Consortium, W3C), e dichiara che il documento sarà scritto secondo l’XHTML 1.0 Transitional Document Type Defmition (DTD). Un DTD è semplicemente un lungo elenco di elementi e attributi consentiti per quel linguaggio e versione. Infine, c'è un completo URL che collega al DTD "http://www.w3.org/TR/xhtml1/DTD/ xhtml1transitional.dtd". Se carichiamo questo codice nel browser, vedete l'effettivo DTD, per XHTML 1.0 Transitional (figura 1.1).

FIGURA 1.1 - Una porzione dell’XHTML Transitional DTD

Con questa dichiarazione all'inizio del documento, possiamo creare il documento e poi eseguirlo in un validator per controllarne la conformità. Il validator usa le informazioni della dichiarazione e confronta il documento al DTD che abbiamo dichiarato. Se seguiamo le regole consentite nel DTD che abbiamo dichiarato qui, non dovremmo avere errori, cosa che naturalmente è il nostro obiettivo. SUGGERIMENTI UTILI A causa di discrepanze, esistenti nel passato, nel modo in cui molti browser gestivano vari aspetti di HTML e CSS, occorreva un modo per ottenere migliori prestazioni per i documenti scritti secondo la specifica.

Gianfranco D’Aversa

2


PROGRAMMARE IN HTML

Analisi e struttura di un template in HTML

Tantek Celik, in seguito sviluppatore per Microsoft, creò un meccanismo di commutazione in IE che correggeva numerosi problemi. Questo meccanismo usa dichiarazioni DOCTYPE adeguatamente formate per commutare il browser dalla modalità quirks (la modalità che perdona tutto, a cui abbiamo accennato nell'introduzione) alla modalità compliance, che permette ai siti scritti con marcatura e CSS conformi di eseguirsi con un'efficienza molto maggiore. Una cosa importante: non mettete mai nulla sopra una dichiarazione DOCTYPE, o avrete problemi di visualizzazione nel browser.

Inserire l'elemento html Dopo la dichiarazione DOCTYPE, iniziamo a costruire il nostro documento dall'elemento root. Uso il termine root di proposito, in quanto tutti i documenti creano una struttura ad albero, come avremo modo di vedere ampiamente. Capire la struttura ad albero creata dai documenti HTML è importante per riuscire a formattare in modo efficace i documenti tramite CSS. L'elemento html è considerato l'elemento root di qualsiasi documento HTML. Ricordate che la dichiarazione non è un elemento HTML, ma è SGML. Il primo elemento che appare assume perciò l'importante status di root. L'esempio 1.2 mostra l'elemento html, con il suo tag di apertura e il suo tag di chiusura. ESEMPIO 1.2 - L'elemento HTML root <htm1> </htm1>

In XHTML dobbiamo aggiungere un'altra importante informazione al tag di apertura, ovvero il namespace XML per XHTML. Questo è soltanto un altro modo per identificare il linguaggio usato nel documento. Non entrerò nelle ragioni ideologiche di ciò, ma basti sapere che questa informazione deve esserci perché il documento sia convalidato (esempio 1.3). ESEMPIO 1.3 - L'elemento HTML root con il valore e l'attributo namespace XML <html xmlns="http://www.w3.org/1999/xhtmT' xml:lang="en" lang="en"> </html>

Potete vedere l'attributo xml ns, che sta per "XML namespace", e il valore, che è un URL. Questo URL non porta a nulla di interessante, mostra solo una pagina che dice che avete raggiunto il namespace XML per XHTML. Questo è soltanto un altro identificativo. NOTA Noterete altre caratteristiche della sintassi, compreso l'attributo xml : lang, che definisce il linguaggio del documento che usa la sintassi XML (ricordate che XHTML è una combinazione di HTML e XML), in questo caso en per "inglese", e l'attributo lang di HTML, che dichiara la stessa informazione. Questi sono attributi opzionali, ma li useremo entrambi per una completa compatibilità.

Gli elementi head e title Ora sappiamo come iniziare un documento: con la dichiarazione DOCTYPE e l'elemento root. Adesso occorre aggiungere altre importanti informazioni, iniziando con l'elemento head. In questo elemento si collocano tutte le cose necessarie per la visualizzazione del documento e le prestazioni, anche se non si vedono nella finestra del browser. Per creare la sezione head, dobbiamo soltanto aggiungere i tag head nella parte superiore del template, subito sotto il tag di apertura <html> (esempio 1.4). ESEMPIO 1.4 - Creare il template: aggiungere una sezione head <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtmll/ DTD/xhtmll-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml " xml:1ang="en" lang="en"> <head>

Gianfranco D’Aversa

3


PROGRAMMARE IN HTML

Analisi e struttura di un template in HTML

</head> </html>

Osservate che l'elemento head non richiede attributi ma ha soltanto un tag di apertura e uno di chiusura. Essi identificano l'area head. Nella tabella 1.1 ho riportato alcuni dei vari elementi che è possibile inserire nell'area head del documento. TABELLA 1.1 - Elementi dell’area head del documento title

Permette di aggiungere un titolo al documento. Il titolo apparirà nella barra del titolo del browser. L'elemento title è richiesto meta L'elemento meta è utilizzato per vari scopi, fra cui l'aggiunta di keyword e descrizioni, della codifica dei caratteri e degli autori del documento. L'elemento meta non è richiesto, e il suo utilizzo varierà secondo le esigenze specifiche. script Questo elemento permette di inserire script direttamente nel documento oppure, a seconda delle preferenze, collegare la pagina allo script desiderato. È utilizzato all'occorrenza. style L'elemento style permette di inserire informazioni di stile nella singola pagina. È detto stile incorporato e viene utilizzato all'occorrenza. link L'elemento link è quello più usato per collegarsi a un foglio stile esterno, sebbene possa essere usato per altri scopi, come collegarsi a una pagina alternativa per l'accessibilità o a un favicon, le note icone che si vedono nella barra indirizzo per certi siti web.

L'elemento title nei dettagli L'elemento title è l'unico elemento richiesto all'interno dell'elemento head. Esso mostra il testo specificato nella barra del browser (figura 1.2) insieme al nome del browser, che appare alla fine del testo e nella barra del titolo del browser. Appurata la necessita di inserire l'elemento title, scrivere titoli efficaci è un'importante tecnica che permette di ottenere tre scopi:  fornire un titolo alla pagina;  offrire agli utenti un orientamento, ovvero li aiuta a capire dove si trovano sul web e nel sito;  offrire informazioni aggiuntive sulla pagina. Scrivere titoli efficaci significa raggiungere questi tre obiettivi. Un titolo efficace è quello dell'esempio 1.5. ESEMPIO 1.5 - Titolo con il nome del sito e la posizione per l'orientamento dell'utente <title>mony.com - books - HTML &amp; CSS</title>

Osserviamo che la pagina ha come titolo il nome del sito, la sezione del sito e la sottosezione, fornendo utili informazioni per il visitatore. Un titolo non efficace è quello dell'esempio 1.6 che segue. ESEMPIO 1.6 - Titolo non efficace <title>Read my books!</titie>

In questo titolo non ci sono informazioni che ci possono aiutare. Perciò mentre il requisito tecnico di avere un titolo è soddisfatto, le esigenze pratiche non lo sono. NOTA Non possiamo usare l'HTML all'interno di un titolo, ma possiamo usare le entità carattere, come si vede nell'esempio 1.5, dove si usa l'entità &amp; per creare il simbolo &.

Gianfranco D’Aversa

4


PROGRAMMARE IN HTML

Analisi e struttura di un template in HTML

L'elemento meta Sebbene non sia richiesto in un documento, l'elemento meta esegue così tante funzioni diverse che è utile imparare a conoscerlo subito.

Codifica del documento Codifica del documento significa impostare il set di caratteri per la pagina, cosa particolarmente importante quando si scrivono documenti in lingue particolari. Per molti anni le pagine scritte nelle lingue con caratteri latini hanno usato il set di caratteri ISO 8859-1.1 set e i sottoset ISO coprono molte lingue. Oggi invece abbiamo UTF-8, un formato più universale che segue uno standard diverso dai valori ISO. UTF-8 può essere utile in molti browser, ma ci sono alcuni limiti. Se occorre pubblicare in un'altra lingua, come il russo o il giapponese, sarà necessaria una codifica ISO anziché Unicode. NOTA Idealmente, la codifica dei caratteri è impostata sul server e non in un elemento meta. Tuttavia, è possibile impostarla usando un elemento meta. L'esempio 1.7 mostra un elemento meta che definisce il formato UTF-8, adatto per i documenti in inglese oltre che in altre lingue, a seconda del supporto browser. ESEMPIO 1.7 - Usare meta per dichiarare la codifica del documento con Unicode

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> L'esempio 1.8 che segue, invece, mostra un elemento meta per un documento scritto in russo, tramite il metodo ISO. ESEMPIO 1.8 - Usare meta per dichiarare la codifica del documento per il cirillico, tramite ISO <meta http-equiv="Content-Type" content="text/htrn1 ; charset= iso-8859-5" />

Keyword, descrizione e autore L'elemento meta può anche essere usato per indicare keyword, riportare una descrizione del sito e dichiarare l'autore. Questo è molto utile per i motori di ricerca pubblici oltre che per qualsiasi motore di ricerca che potreste eseguire sul vostro sito. Le keyword sono singole parole e combinazioni di parole che potrebbero essere usate in una ricerca, e il loro scopo è aiutare le persone a trovare specifici argomenti (esempio 1.9). ESEMPIO 1.9 - Usare meta per le keyword e le combinazioni di keyword <meta name="keywords" content="molly, molìy.com, html, xhtml, css, design, web design, development, web development, peri, color, web coler, blog, web log, weblog, books, computer books, articles, tutorials, learn, author, instructor, instruction, instructing, training, education, consult, consultation, consultant, famous people page, famous people ìist, standards, web standards, web standards project, wsp, wasp, digitai web, digitai web magazine, web techniques, web techniques magazine, web review, webreview, webreview.com, wow, world organization of webmasters, conference, conferences, user interface, usability, accessibility, internationalization, web culture" />

Noterete che, anche se ho usato molto la parola "web", essa è combinata con altre keyword. Molti motori di ricerca vi escludono se usate molte keyword singole. Questo in passato era un modo per far arrivare la pagina ai primi posti nei risultati delle ricerche, ma oggi non funziona più. Usate keyword sensate oppure, se volete avere più decorrenze di una parola, usatela in una combinazione realistica.

Gianfranco D’Aversa

5


PROGRAMMARE IN HTML

Analisi e struttura di un template in HTML

Le descrizioni sono tipicamente di 25 parole o meno ed esprimono lo scopo del documento (esempio 1.10). ESEMPIO 1.10 - L'elemento meta utilizzato per la descrizione del sito o della pagina <meta name="description" content="I'm Molly E. Holzschlag, and this Web site shares my Web development work and personal thoughts." />

Un altro utilizzo è indicare l'autore del documento, come nell'esempio 1.11 che segue. ESEMPIO 1.11 - Usare meta per indicare l'autore della pagina <meta name="Author" content="Molly E. Holzschlag" />

Naturalmente, questa informazione non è mai visualizzata sulla pagina web, ma come tutti gli elementi e gli attributi nella porzione head di un documento, è utilizzata dal browser e altre risorse come i motori di ricerca. NOTA Altri utilizzi dell'elemento meta sono aggiornare automaticamente i documenti e limitare i motori di ricerca nella registrazione di determinate pagine.

L’elemento body L'elemento body è quello in cui avvengono tutte le azioni. Qui deve essere inserito il contenuto della pagina e la formattazione tramite XHTML per ottenere la struttura adeguata. L'elemento body va posto accanto all'elemento html, subito sotto head (esempio 1.12). ESEMPIO 1.12 - Inserire l'elemento body <html> <head> <title>Appropriate Title Text Here</title> </head> <body> </body> </html>

Quando sono visualizzate nel browser, le informazioni nell'elemento body sono quelle che appaiono nella finestra del browser, anche detta viewport. Questa è la sola area del contenuto (esclusi i componenti dell'interfaccia, come le barre di scorrimento e le barre di stato).

I commenti HTML Un'altra importante marcatura che dovreste iniziare a usare subito sono i commenti HTML. I commenti vi permettono di nascondere contenuto o marcatura per scopi temporanei o per compatibilità con le versioni precedenti, di descrivere le sezioni del documento e di fornire istruzioni per altre persone che potrebbero lavorare sulla pagina. La sintassi di un commento HTML è la seguente: <!-- -->

Ciò che volete nascondere o la spiegazione che volete dare va incluso fra la porzione di apertura e quella di chiusura di un commento. L'esempio 1.13 nasconde il contenuto di testo di body tramite commenti.

Gianfranco D’Aversa

6


PROGRAMMARE IN HTML

Analisi e struttura di un template in HTML

ESEMPIO 1.13 - Nascondere contenuto di testo e marcatura <body> <!-<p>The content of this paragraph will not appear within the body so long as it's within a comment.</p> --> <p>The content of this paragraph will be displayed, because it's outside of the comment field.</p> </body>

Potete denotare le sezioni del documento, come si vede nell'esempio 1.14. ESEMPIO 1.14 - Nascondere contenuto di testo e marcatura <body> <!-- begin primary content --> <!--begin footer information--> </body>

Infine i commenti sono un modo utile per fornire istruzioni (esempio 1.15). ESEMPIO 1.15 - Fornire istruzioni in un commento <body> <!-- Angie: please be sure to use lists instead of tables in this section --> </body>

Il template completo Ora è il momento di concludere la nostra esplorazione del template mettendo insieme tutti i documenti (esempio 1.16). ESEMPIO 1.16 - Struttura di un documento XHTML <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional .dtd"> <head> <title>your site : location within site : topic title</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta name="keywords" content="your, keywords, here" /> <meta name="description" content="your description here" /> <meta name="author" content="your name here" /> </head> <body> <!-- main content section --> </body> </html>

Copiate questa marcatura, salvatela in una cartella di lavoro sul computer e denominatela index.html. Questo sarà il file che dovrà essere aperto per aggiungere il contenuto e la necessaria marcatura mentre si procederà nel lavoro.

Gianfranco D’Aversa

7


TITOLO ORIGINALE Programming in HTML. Analysis and structure of a template. Ali rights reserved. No part of this book may be reproduced or transmitted in any form or by any means, electronic or mechanical, including photocopying, recording or by any information storage retrieval system, without permission from Digital Media Center Srl. Italian language edition published by Gianfranco D’Aversa. Nessuna parte del testo può essere in alcun modo riprodotta senza autorizzazione scritta di Digital Media Center Srl. Copertina per l'edizione italiana: © Gianfranco D’Aversa. Traduzione, revisione tecnica e realizzazione editoriale: Digital Media Center Srl Le aziende, le organizzazioni, i Ioghi, i prodotti, i nomi di dominio, gli indirizzi di posta elettronica, le persone, i luoghi e gli eventi citati negli esempi sono del tutto fittizi e non è presente nessuna associazione o riferimento ad aziende, organizzazioni, Ioghi, prodotti, nomi di dominio, indirizzi di posta elettronica, persone, luoghi o eventi reali. Ogni cura è stata posta nella raccolta e nella verifica della documentazione contenuta in questo libro. Tuttavia né gli autori, né Digital Media Center Srl possono assumersi alcuna responsabilità derivante dall'utilizzo della stessa. Lo stesso dicasi per ogni persona o società coinvolta nella creazione, nella produzione e nella distribuzione di questa pubblicazione. Tutti i nomi dei prodotti citati nella pubblicazione sono marchi registrati appartenenti alle rispettive società. Essi sono usati in questa pubblicazione a scopo editoriale e a beneficio delle relative società. © 2012 DIGITAL MEDIA CENTER SRL Prima Edizione: Marzo 2012

Programmare in HTML  

Gianfranco D'Aversa | ICT Teacher | Apple Distinguished Educator | Google Certified Teacher.

Read more
Read more
Similar to
Popular now
Just for you