programmare in html

Gianfranco D’AversaGianfranco D’Aversa

PROGRAMMARE IN HTMLPROGRAMMARE IN HTML ANALISI E STRUTTURA DI UN TEMPLATEANALISI E STRUTTURA DI UN TEMPLATE

(Versione italiana)(Versione italiana)

TECHNOLOGY INTEGRATION IN EDUCATION

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 han-

no 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 in-

sieme 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 de-

terminati 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 pro-

fessionali.

In questa Guida verrà illustrato come creare un template che conterrà tutte le informazioni tecni-

che e strutturali necessarie e utili che formano la base di un documento che sarà conforme e vali-

do.

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 por-

zione di codice univoca, e in tutti i documenti che si creano occorre usare una dichiarazione ade-

guata.

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 mo-

do 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

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 DOCTY-

PE, che indica che il codice dichiara il tipo di documento.

La parte successiva è html, che dichiara che questo tipo di documento è scritto in HTML. Notia-

mo che la parola "html" qui è in minuscolo. Questo è significativo in quanto stiamo usando

XHTML: poiché XHTML è sensibile alle maiuscole, questa particolare sezione della dichiara-

zione 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 referenzia-

to è 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 è assoluta-

mente 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/ xhtml1-

transitional.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 dichiarazio-

ne 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.

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 correg-

geva 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 dichia-

razione 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. Que-

sto 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 que-

sto elemento si collocano tutte le cose necessarie per la visualizzazione del documento e le presta-

zioni, 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>



</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 codifi-

ca 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 incor-

porato 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'e-

sempio 1.5.

ESEMPIO 1.5 - Titolo con il nome del sito e la posizione per l'orientamento dell'utente

<title>mony.com - books - HTML & 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 tecni-

co 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à & per creare il simbolo &.



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 limi-

ti. 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, develop-

ment, 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.



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 develop-

ment 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 risor-

se come i motori di ricerca.

NOTA

Altri utilizzi dell'elemento meta sono aggiornare automaticamente i documenti e limitare i motori di ricer-

ca 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 ap-

paiono 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 com-

patibilità 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 tra-

mite commenti.

ESEMPIO 1.13 - Nascondere contenuto di testo e marcatura

<body>



<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>





</body>

Infine i commenti sono un modo utile per fornire istruzioni (esempio 1.15).

ESEMPIO 1.15 - Fornire istruzioni in un commento

<body>



</body>

Il template completo Ora è il momento di concludere la nostra esplorazione del template mettendo insieme tutti i do-

cumenti (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>



</body>

</html>

Copiate questa marcatura, salvatela in una cartella di lavoro sul computer e denominatela in-

dex.html. Questo sarà il file che dovrà essere aperto per aggiungere il contenuto e la necessaria

marcatura mentre si procederà nel lavoro.

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, includ-ing 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 domi-nio, 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

Documents

che appare

poi che

che dichiara che questo

conformit significa

caratteristiche divertenti

templateanalisi e struttura

html analisi e struttura

movimento che ha