TECHNOLOGY INTEGRATION IN EDUCATION                     Gianfranco D’Aversa    PROGRAMMARE IN HTMLANALISI E STRUTTURA DI U...
Programmare in HTMLAnalisi e struttura di un template in HTMLI documenti web devono essere costruiti in modo logico. Affin...
PROGRAMMARE IN HTML                                             Analisi e struttura di un template in HTMLchiedersi cosa s...
PROGRAMMARE IN HTML                                                Analisi e struttura di un template in HTMLTantek Celik,...
PROGRAMMARE IN HTML                                              Analisi e struttura di un template in HTML</head></html>O...
PROGRAMMARE IN HTML                                              Analisi e struttura di un template in HTMLLelemento metaS...
PROGRAMMARE IN HTML                                             Analisi e struttura di un template in HTMLLe descrizioni s...
PROGRAMMARE IN HTML                                                  Analisi e struttura di un template in HTMLESEMPIO 1.1...
TITOLO ORIGINALEProgramming in HTML. Analysis and structure of a template.Ali rights reserved. No part of this book may be...
Upcoming SlideShare
Loading in …5
×

Programmare in HTML

744 views
629 views

Published on

Gianfranco D'Aversa | ICT Teacher | Apple Distinguished Educator | Google Certified Teacher | He leads workshops to teachers and media professionals.

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
744
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
6
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Programmare in HTML

  1. 1. TECHNOLOGY INTEGRATION IN EDUCATION Gianfranco D’Aversa PROGRAMMARE IN HTMLANALISI E STRUTTURA DI UN TEMPLATE (Versione italiana) www.gianfrancodaversa.com
  2. 2. Programmare in HTMLAnalisi e struttura di un template in HTMLI documenti web devono essere costruiti in modo logico. Affinché un documento sia conforme esuperi la convalida, è necessario che contenga determinati elementi. Conformità significa cheun 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 eventualierrori.La prima cosa che si può fare per essere assolutamente certi che le pagine abbiano la massimaprobabilità 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 erapida 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 attualispecifiche, ma molte no. Inoltre, elementi delle pagine HTML che si sarebbero dovuti includeredallinizio spesso sono stati ignorati, anche dai professionisti.Potremmo chiederci come ciò sia possibile. Occorre tener presente che il principale softwareusato per interpretare lHTML è il browser web desktop. Questi browser da sempre perdonanomolti errori, ma ne introducono anche molti! I browser sono stati al tempo stesso la benedizionee la maledizione del web in quanto è vero che hanno consentito linnovazione, ma spesso hannodato più importanza allaggiunta di caratteristiche divertenti che non al supporto di base per de-terminati linguaggi. Il web è perciò oggi un terreno selvaggio in cui lHTML è usato senza molteregole, spesso non è conforme e valido, e di frequente è creato senza i componenti strutturali dibase richiesti dal linguaggio.È attivo un movimento che ha lo scopo di migliorare gli standard dei browser e gli strumentiusati per sviluppare siti web, oltre che aiutare tutti coloro che desiderano creare pagine che nonsolo 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 documentoLa prima cosa che occorre fare nella nostra pagina sarà aggiungere un po di codice che dichiariil tipo di documento che stiamo usando e identifichi la versione del linguaggio. Possiamo farlocon SGML (Standardized General Markup Language), il linguaggio padre di HTML, che apparein 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.Lesempio 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 lapertura < ! ; molti utenti che hanno visto codice HTML potrebberoGianfranco D’Aversa 1
  3. 3. PROGRAMMARE IN HTML Analisi e struttura di un template in HTMLchiedersi cosa significa. La parentesi angolare è un componente familiare di HTML, ma il puntoesclamativo appare solo in un altro ambito, i commenti, che saranno descritti più avanti. Questosimbolo 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 usandoXHTML: poiché XHTML è sensibile alle maiuscole, questa particolare sezione della dichiara-zione deve essere in minuscolo. In caso contrario, il documento non sarà convalidato. La parolaPUBLIC è uninformazione importante. Significa che il particolare tipo di documento referenzia-to è un documento pubblico. Molte società creano versioni univoche di XHTML, con elementi eattributi 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 dilinguaggio e versione del documento (The World Wide Web Consortium, W3C), e dichiara cheil 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 eversione.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 leffettivo DTD, per XHTML1.0 Transitional (figura 1.1).FIGURA 1.1 - Una porzione dell’XHTML Transitional DTDCon questa dichiarazione allinizio del documento, possiamo creare il documento e poi eseguirloin 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 consentitenel DTD che abbiamo dichiarato qui, non dovremmo avere errori, cosa che naturalmente è ilnostro obiettivo.SUGGERIMENTI UTILIA causa di discrepanze, esistenti nel passato, nel modo in cui molti browser gestivano vari aspetti di HTMLe CSS, occorreva un modo per ottenere migliori prestazioni per i documenti scritti secondo la specifica.Gianfranco D’Aversa 2
  4. 4. PROGRAMMARE IN HTML Analisi e struttura di un template in HTMLTantek 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 percommutare il browser dalla modalità quirks (la modalità che perdona tutto, a cui abbiamo accennatonellintroduzione) alla modalità compliance, che permette ai siti scritti con marcatura e CSS conformi dieseguirsi con unefficienza molto maggiore. Una cosa importante: non mettete mai nulla sopra una dichia-razione DOCTYPE, o avrete problemi di visualizzazione nel browser.Inserire lelemento htmlDopo la dichiarazione DOCTYPE, iniziamo a costruire il nostro documento dallelemento root.Uso il termine root di proposito, in quanto tutti i documenti creano una struttura ad albero, comeavremo 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.Lelemento html è considerato lelemento root di qualsiasi documento HTML. Ricordate che ladichiarazione non è un elemento HTML, ma è SGML. Il primo elemento che appare assumeperciò limportante status di root.Lesempio 1.2 mostra lelemento html, con il suo tag di apertura e il suo tag di chiusura.ESEMPIO 1.2 - Lelemento HTML root<htm1></htm1>In XHTML dobbiamo aggiungere unaltra importante informazione al tag di apertura, ovvero ilnamespace XML per XHTML. Questo è soltanto un altro modo per identificare il linguaggiousato nel documento. Non entrerò nelle ragioni ideologiche di ciò, ma basti sapere che questainformazione deve esserci perché il documento sia convalidato (esempio 1.3).ESEMPIO 1.3 - Lelemento HTML root con il valore e lattributo namespace XML<html xmlns="http://www.w3.org/1999/xhtmT xml:lang="en" lang="en"></html>Potete vedere lattributo 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 ilnamespace XML per XHTML. Questo è soltanto un altro identificativo.NOTANoterete altre caratteristiche della sintassi, compreso lattributo xml : lang, che definisce il linguaggio deldocumento che usa la sintassi XML (ricordate che XHTML è una combinazione di HTML e XML), in questocaso en per "inglese", e lattributo lang di HTML, che dichiara la stessa informazione. Questi sono attributiopzionali, ma li useremo entrambi per una completa compatibilità.Gli elementi head e titleOra sappiamo come iniziare un documento: con la dichiarazione DOCTYPE e lelemento root.Adesso occorre aggiungere altre importanti informazioni, iniziando con lelemento 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, dobbiamosoltanto 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
  5. 5. PROGRAMMARE IN HTML Analisi e struttura di un template in HTML</head></html>Osservate che lelemento head non richiede attributi ma ha soltanto un tag di apertura e uno dichiusura. Essi identificano larea head. Nella tabella 1.1 ho riportato alcuni dei vari elementi che èpossibile inserire nellarea head del documento.TABELLA 1.1 - Elementi dell’area head del documentotitle Permette di aggiungere un titolo al documento. Il titolo apparirà nella barra del titolo del browser. Lelemento title è richiestometa Lelemento meta è utilizzato per vari scopi, fra cui laggiunta di keyword e descrizioni, della codifi- ca dei caratteri e degli autori del documento. Lelemento 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 alloccorrenza.style Lelemento style permette di inserire informazioni di stile nella singola pagina. È detto stile incor- porato e viene utilizzato alloccorrenza.link Lelemento 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 laccessibilità o a un favicon, le note icone che si vedono nella barra indirizzo per certi siti web.Lelemento title nei dettagliLelemento title è lunico elemento richiesto allinterno dellelemento head. Esso mostra il testospecificato nella barra del browser (figura 1.2) insieme al nome del browser, che appare alla finedel testo e nella barra del titolo del browser.Appurata la necessita di inserire lelemento title, scrivere titoli efficaci è unimportante tecnicache 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 delle-sempio 1.5.ESEMPIO 1.5 - Titolo con il nome del sito e la posizione per lorientamento dellutente<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 dellesempio 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.NOTANon possiamo usare lHTML allinterno di un titolo, ma possiamo usare le entità carattere, come si vedenellesempio 1.5, dove si usa lentità &amp; per creare il simbolo &.Gianfranco D’Aversa 4
  6. 6. PROGRAMMARE IN HTML Analisi e struttura di un template in HTMLLelemento metaSebbene non sia richiesto in un documento, lelemento meta esegue così tante funzioni diverseche è utile imparare a conoscerlo subito.Codifica del documentoCodifica del documento significa impostare il set di caratteri per la pagina, cosa particolarmenteimportante quando si scrivono documenti in lingue particolari. Per molti anni le pagine scrittenelle lingue con caratteri latini hanno usato il set di caratteri ISO 8859-1.1 set e i sottoset ISOcoprono molte lingue. Oggi invece abbiamo UTF-8, un formato più universale che segue unostandard diverso dai valori ISO. UTF-8 può essere utile in molti browser, ma ci sono alcuni limi-ti. Se occorre pubblicare in unaltra lingua, come il russo o il giapponese, sarà necessaria unacodifica ISO anziché Unicode.NOTAIdealmente, la codifica dei caratteri è impostata sul server e non in un elemento meta. Tuttavia, è possibileimpostarla usando un elemento meta. Lesempio 1.7 mostra un elemento meta che definisce il formatoUTF-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" />Lesempio 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 autoreLelemento meta può anche essere usato per indicare keyword, riportare una descrizione del sitoe dichiarare lautore. Questo è molto utile per i motori di ricerca pubblici oltre che per qualsiasimotore di ricerca che potreste eseguire sul vostro sito.Le keyword sono singole parole e combinazioni di parole che potrebbero essere usate in unaricerca, 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, userinterface, 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 unmodo per far arrivare la pagina ai primi posti nei risultati delle ricerche, ma oggi non funzionapiù. Usate keyword sensate oppure, se volete avere più decorrenze di una parola, usatela in unacombinazione realistica.Gianfranco D’Aversa 5
  7. 7. PROGRAMMARE IN HTML Analisi e struttura di un template in HTMLLe descrizioni sono tipicamente di 25 parole o meno ed esprimono lo scopo del documento(esempio 1.10).ESEMPIO 1.10 - Lelemento meta utilizzato per la descrizione del sito o della pagina<meta name="description" content="Im Molly E. Holzschlag, and this Web site shares my Web develop-ment work and personal thoughts." />Un altro utilizzo è indicare lautore del documento, come nellesempio 1.11 che segue.ESEMPIO 1.11 - Usare meta per indicare lautore della pagina<meta name="Author" content="Molly E. Holzschlag" />Naturalmente, questa informazione non è mai visualizzata sulla pagina web, ma come tutti glielementi e gli attributi nella porzione head di un documento, è utilizzata dal browser e altre risor-se come i motori di ricerca.NOTAAltri utilizzi dellelemento meta sono aggiornare automaticamente i documenti e limitare i motori di ricer-ca nella registrazione di determinate pagine.L’elemento bodyLelemento body è quello in cui avvengono tutte le azioni. Qui deve essere inserito il contenutodella pagina e la formattazione tramite XHTML per ottenere la struttura adeguata. Lelementobody va posto accanto allelemento html, subito sotto head (esempio 1.12).ESEMPIO 1.12 - Inserire lelemento body<html><head><title>Appropriate Title Text Here</title></head><body></body></html>Quando sono visualizzate nel browser, le informazioni nellelemento body sono quelle che ap-paiono nella finestra del browser, anche detta viewport. Questa è la sola area del contenuto(esclusi i componenti dellinterfaccia, come le barre di scorrimento e le barre di stato).I commenti HTMLUnaltra importante marcatura che dovreste iniziare a usare subito sono i commenti HTML. Icommenti 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 istruzioniper 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 aperturae quella di chiusura di un commento. Lesempio 1.13 nasconde il contenuto di testo di body tra-mite commenti.Gianfranco D’Aversa 6
  8. 8. PROGRAMMARE IN HTML Analisi e struttura di un template in HTMLESEMPIO 1.13 - Nascondere contenuto di testo e marcatura<body><!--<p>The content of this paragraph will not appear within the body so long as its within a comment.</p>--><p>The content of this paragraph will be displayed, because its outside of the comment field.</p></body>Potete denotare le sezioni del documento, come si vede nellesempio 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 completoOra è 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><!-- main content section --></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 necessariamarcatura mentre si procederà nel lavoro.Gianfranco D’Aversa 7
  9. 9. TITOLO ORIGINALEProgramming 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 ledizione italiana: © Gianfranco D’Aversa.Traduzione, revisione tecnica e realizzazione editoriale: Digital Media Center SrlLe aziende, le organizzazioni, i Ioghi, i prodotti, i nomi di dominio, gli indirizzi di posta elettronica, le persone, i luoghi e gli eventi citati negliesempi 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é DigitalMedia Center Srl possono assumersi alcuna responsabilità derivante dallutilizzo 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 questapubblicazione a scopo editoriale e a beneficio delle relative società.© 2012 DIGITAL MEDIA CENTER SRLPrima Edizione: Marzo 2012

×