La progettazione delle pagine Web PDF

1 La progettazione delle pagine Web La rapida espansione di Internet e del numero dei suoi utenti ha comportato in pochi anni l’aumento dei siti e della quantità di informazioni disponibili in rete. Moltissime aziende...

1 La progettazione delle pagine Web La rapida espansione di Internet e del numero dei suoi utenti ha comportato in pochi anni l’aumento dei siti e della quantità di informazioni disponibili in rete. Moltissime aziende, agenzie di notizie, società di servizi, enti, università, scuole, ma anche singole persone hanno creato un proprio sito Internet per mettere in condivisione progetti, informazioni o archivi di dati, per presentare prodotti commerciali, attività, servizi, iniziative, corsi o semplicemente interessi personali. L’insieme delle pagine che si riferiscono a uno stesso ente, a uno stesso argomento o a Che cos’è un sito? una stessa azienda forma un sito Internet o sito Web. I siti Web sono la modalità più diffusa di trasmissione delle informazioni in Internet. Un sito può contenere pagine con brevi presentazioni oppure informazioni e gallerie di im- download magini, oltre a tutti gli altri oggetti multimediali, come suoni o filmati da scaricare o poter streaming vedere direttamente in rete. 10.1 Due esempi di Home Page di siti 370 PARTE TERZA LE PAGINE WEB © Istituto Italiano Edizioni Atlas Tra le pagine sono stabiliti collegamenti che consentono di navigare in modo ipertestuale, link cioè non sequenziale, tra le varie parti del sito, ma anche di passare ad altri siti secondo percorsi di consultazione decisi dall’utente. Questa è l’idea alla base del Web (letteralmente Che cos’è un link? ragnatela). I siti Web aziendali non sono solo vetrine statiche formate da testi e immagini, ma presen- tano anche contenuti multimediali, animazioni, cataloghi sfogliabili, moduli da compilare per l’assistenza al cliente e chat in tempo reale. Un sito Web efficace si sviluppa attorno a un’idea che racchiude il senso e gli obiettivi del sito; nello stesso tempo occorre definire il target del sito, in termini di genere, età, conoscenze, competenze dei possibili visitatori: il successo o il fallimento di un sito Web dipendono esclusivamente dalla sua originalità e dalla rispondenza ai bisogni degli utenti. La progettazione di un sito aziendale deve tenere conto dei fattori considerati punti chiave da rispettare per rispondere alle esigenze aziendali e per soddisfare le richieste del mercato e dei consumatori. Il primo passo nella realizzazione di un sito consiste nell’analisi di mercato e nello studio delle esigenze dei clienti potenziali o già acquisiti. Questa fase procede di pari passo con la definizione degli obiettivi aziendali, cercando di delineare in modo preciso la strategia da attuare per raggiungerli. In secondo luogo, il progetto deve essere originale, in modo da colpire il navigatore per funzionalità, estetica, ricercatezza e distinguersi dal mercato dei concorrenti. È importante effettuare un’analisi preliminare dei competitors, valutando cosa offrono e at- traverso quali strumenti, in modo da mantenere inalterate le formule già vincenti e al tempo stesso proporre qualcosa di innovativo e originale. Terminata questa prima fase di studio, si passa alla progettazione della struttura e dell’e- stetica del sito, valutando le mode e le tendenze più in voga ma senza perdere di vista gli obiettivi funzionali da raggiungere. Vengono definiti in questa fase le modalità di erogazione dei contenuti e i canali comuni- cativi per trasmettere agli utenti l’idea di fondo del sito che riassume l’identità dell’azienda. Le modalità possono variare in base al dispositivo che sarà usato per la navigazione: PC desktop, portatili oppure dispositivi mobili, come smartphone e tablet. Una pagina Web deve comunicare qualcosa non appena viene visualizzata da un utente, senza la necessità di doverla scorrere per tutta la sua lunghezza. La quantità di informazioni nelle pagine è un fattore critico per il successo di un sito Web: poche o troppe informazioni possono indurre l’utente ad abbandonare subito il sito. Di che cosa si deve Un’altra buona regola di carattere generale consiste nell’evitare pagine contenenti immagini tener conto per di grandi dimensioni oppure piccole, ma in numero elevato: esse provocano lunghi tempi di progettare un sito? attesa per il caricamento delle pagine e una perdita di interesse nell’utente che si è collegato. La disposizione degli elementi (layout della pagina), sia in senso verticale sia orizzontale, deve tener conto delle regole pratiche appena descritte. Un layout è il modo in cui i contenuti sono distribuiti all’interno della pagina Web. Che ruolo svolge La figura professionale che si occupa della progettazione di un sito Web e del suo layout si un Web designer? chiama Web designer. L’ideazione e le componenti di un sito Ogni sezione del sito deve essere facilmente riconoscibile e avere una struttura analoga alle altre; i titoli devono essere formattati usando lo stesso font e la stessa dimensione per il carattere. Per progettare un sito occorre prima creare una bozza su carta, per avere un’idea di quale sarà poi la realizzazione a video: vengono tracciate le aree dell’intestazione, del contenuto, la posizione della barra di navigazione, le aree dedicate agli spazi pubblicitari, ecc. Ogni area della pagina ha in questo modo una sua funzione specifica e dei contenuti propri. È anche opportuno predisporre uno storyboard del sito, con la composizione delle pagine e uno schizzo di ciascuna, per facilitare la comprensione della struttura e per definire quali informazioni presentare e in quale modo. © Istituto Italiano Edizioni Atlas CAPITOLO 10 IL LINGUAGGIO HTML E I FOGLI DI STILE 371  la progettazione del layout intestazione banner barra di navigazione contenuti in evidenza foto box informazioni contenuti pubblicità piè di pagina link ai social network header Solitamente la pagina è divisa in 4 macroaree: intestazione con barra di navigazione, banner footer grafico a scorrimento, contenuti, piè di pagina con link e informazioni sull’azienda. Ogni macroarea, a sua volta, è organizzata in sottoaree contenenti vari elementi. Quali sono Gli elementi più frequenti nei siti Web sono: le macroaree l’intestazione contenente il logo e la barra di navigazione; di una pagina? l’area login per l’accesso all’area riservata; le icone dei social network; il piè di pagina con informazioni e note legali; una guida all’uso del sito; l’indicazione degli eventuali collaboratori o sponsor; un programma di ricerca all’interno del sito; una pagina di link ad altri siti di interesse generale o che trattano argomenti simili; un modulo con il quale l’utente può inviare richieste, messaggi o osservazioni (feedback). In particolare, la barra di navigazione consente di muoversi facilmente tra le varie pagine di un sito in modo che i principali contenuti siano accessibili con un solo clic e in pochi secondi. Altri strumenti di navigazione sono: i link inseriti all’interno del testo (di solito sottolineati e in colore blu); le icone e le immagini usate come link; le breadcrumb (letteralmente, briciole di pane), che sono un elenco di parole, corrispondenti a diversi link per l’utente, disposte in orizzontale e separate da frecce o da caratteri > con lo scopo di fornire una traccia della posizione attuale del visitatore all’interno del sito, in modo da permettere di tornare facilmente indietro nella navigazione; esempio Home Page > Tecnologia > Economia digitale > Connessioni alla rete le schede, contrassegnate da linguette, per individuare facilmente le principali categorie del sito; la mappa del sito, cioè uno schema con l’elenco dei contenuti organizzati solitamente in modo gerarchico. L’area riservata è caratterizzata dai link Login e Registrati e dalla presenza di caselle per l’inserimento di username e password. 372 PARTE TERZA LE PAGINE WEB © Istituto Italiano Edizioni Atlas I rimandi ai social network sono un elemento essenziale nelle pagine Web per consentire un collegamento veloce alle versioni social del sito. Le pagine aziendali e i canali sui social network permettono di mantenere differenziati i con- tenuti ufficiali del sito istituzionale dall’ambiente sociale, meno strutturato e più interattivo. La pagina iniziale del sito, Home Page, è la pagina che si apre quando l’utente Internet scrive nella casella del browser l’indirizzo Web (URL) del sito dove si trovano le pagine. Poiché questa pagina è quella che viene vista per prima dal visitatore di un sito, è opportuno che contenga sommari, titoli ed elementi grafici che devono suscitare attrattiva e interesse, invogliando l’utente a guardare le altre pagine del sito. Un sito Internet è raggiungibile da qualsiasi area del pianeta: perciò, se esso contiene infor- mazioni di interesse per un pubblico vasto ed eterogeneo, è meglio produrre diverse versioni delle pagine, in italiano, in inglese e in altre lingue straniere, offrendo all’utente la possibilità di scelta della lingua a partire dalla pagina iniziale. Prima della pubblicazione delle pagine Web, occorre effettuare il controllo lessicale e gram- maticale dei testi e validare il funzionamento dei link interni ed esterni delle pagine. 2 Gli strumenti per realizzare pagine Web La tecnologia software mette a disposizione gli strumenti per realizzare con facilità pagine in formato Web, cioè pronte per essere caricate su un server Internet e visualizzabili con un browser dagli utenti che si collegano; molte aziende offrono la possibilità di creare il proprio sito Internet gratuitamente, fornendo lo spazio su un server e, in alcuni casi, anche gli strumenti necessari per la creazione delle pagine Web. Nel caso di necessità specifiche un utente o un’a- zienda può acquistare uno spazio maggiore per ospitare le pagine Web su un computer server. Per preparare pagine Web basta un qualsiasi personal computer con le caratteristiche minime necessarie a trattare documenti multimediali. Le pagine, completate e verificate nel funzionamento, devono essere trasferite sul server dove si trova il sito e spesso devono essere modificate o aggiornate in momenti successivi; quindi è opportuno avere un collegamento a Internet veloce, allo scopo di diminuire i tempi per le operazioni di caricamento dei file. upload Il caricamento dei file UPLOAD server Internet Le pagine da pubblicare su Internet sono realizzate usando il linguaggio HtMl (HyperText Markup Language, cioè linguaggio di marcatura per la formazione di ipertesti), in modo Che cos’è che possano essere correttamente interpretate dal browser e visualizzate in forma grafica. il linguaggio HTML? I Web editor Per la costruzione di un sito, è sufficiente utilizzare un programma qualsiasi di editor di testi, per esempio il programma Blocco note o WordPad. Esistono però programmi, chiamati Web editor, che semplificano il lavoro di scrittura del codice. © Istituto Italiano Edizioni Atlas CAPITOLO 10 IL LINGUAGGIO HTML E I FOGLI DI STILE 373  I programmi di Web editor si suddividono in due categorie: Web editor non visuali: facilitano la scrittura del codice, che però non viene generato automaticamente; esempio Colorano alcuni termini specifici in maniera differente rispetto al resto del testo, completano automaticamente il codice oppure segnalano gli errori di sintassi. Web editor visuali: generano automaticamente il codice HTML utilizzando un’interfaccia Che cos’è un Web visuale. Questi programmi vengono indicati con l’acronimo WYSIWYG (What You See editor e a che cosa serve? Is What You Get, in italiano quello che vedi è quello che ottieni) per indicare che in ogni istante viene visualizzato l’aspetto finale del sito. In Internet si possono creare siti in maniera gratuita, utilizzando uno spazio Web e una piat- template taforma in grado di generare siti in maniera semiautomatica partendo da modelli predefiniti e senza conoscere il linguaggio HTML. In alternativa, si possono costruire interi siti Web ed effettuare la loro manutenzione in modo facile, utilizzando i software cMS (Content Management System, sistemi di gestione dei contenuti, vedi Inserto B a pag. 426). Tuttavia una conoscenza del linguaggio HTML permette di comprendere il codice della pagina Web e di gestire in maniera più competente la creazione e l’aggiornamento di siti. L’uso di un Web editor presuppone la disponibilità di un programma browser (Firefox, Chrome, Opera, Safari, Internet Explorer) per verificare la corretta visualizzazione delle pagine. Inoltre è sicuramente utile un programma di grafica per creare o trattare immagini e fotografie (per esempio, il software open source GIMP oppure Adobe Photoshop). Le pagine devono essere infatti attraenti per il visitatore e devono contenere poco testo e molti elementi grafici: disegni, anche scelti da collezioni già esistenti (clipart), animazioni, fotografie, sfondi, bottoni, linee di separazione. A che cosa serve un programma per FTP? Per il trasferimento dei file contenenti le pagine dal disco del proprio computer al server Internet dove devono essere pubblicate, si usa un programma per FtP (File Transfer Protocol). Per effettuare questa operazione l’utente deve possedere il permesso di accesso (account), tramite un nome di identificazione e una password, forniti dall’amministratore del server Web. directory Le pagine create possono essere ospitate in una sottocartella di un sito già esistente, oppure possono diventare un nuovo sito. In questo secondo caso il sito Internet viene identificato attraverso un indirizzo simbolico del tipo www.sitointernet.it. 3 Il linguaggio HTML Le pagine di Internet, in particolare tutti i documenti scritti per la tecnologia WWW (World Wide Web), sono redatte con un linguaggio studiato per la gestione degli ipertesti: non si tratta di un linguaggio di programmazione (in quanto non viene utilizzato per svolgere elaborazioni), ma di un linguaggio di formattazione della pagina. Un ipertesto nel Web è un insieme di documenti, residente su uno o più server della rete Internet, che ha la possibilità di essere consultato in modo non sequenziale, passando da un documento all’altro attraverso collegamenti (link) realizzati mediante parole o immagini, sulle quali occorre fare clic con il mouse. Esso può contenere non solo elementi testuali ma anche immagini, suoni, filmati e qualunque tipo di oggetto trattabile da un sistema informatico. In ambiente Internet, utilizzando i riferimenti URl (Uniform Resource Locator), cioè gli indirizzi delle pagine Web, si può accedere da un documento a un altro registrato su un computer ubicato in qualsiasi parte del mondo, realizzando così un’attività che viene comunemente definita navigazione nella rete. Il linguaggio HtMl consente di sfruttare i vantaggi e le prestazioni derivanti dall’organizzazione ipertestuale e dall’uso degli oggetti multimediali: questo linguaggio è diventato lo standard nell’architettura WWW per creare e riconoscere i documenti ipermediali (ipertesti multimediali). 374 PARTE TERZA LE PAGINE WEB © Istituto Italiano Edizioni Atlas Le specifiche del linguaggio sono stabilite da W3c (World Wide Web Consortium), l’ente che Che cosa indica regola gli standard del Web: www.w3.org oppure www.w3c.it per la versione in lingua italiana. la sigla W3C? Le esigenze di inserimento di informazioni sempre più sofisticate e la necessità di rendere interattive con l’utente le pagine stesse hanno introdotto via via numerose modifiche e am- pliamenti al linguaggio stesso, creando versioni diverse. La versione consolidata è HtMl4 che è compatibile con tutti i browser. La successiva versione HtMl5, rilasciata nell’ottobre 2014, risponde alle necessità delle applicazioni che utilizzano la banda larga e il Web 2.0 e aggiunge nuove funzionalità che possono agevolare la consultazione delle pagine Web anche da dispositivi mobili (tablet e smartphone). I documenti WWW, tipicamente scritti in HTML, sono dei normali testi di caratteri e di con- seguenza sono visibili e modificabili con qualunque programma di trattamento dei testi, dal word processor come Word al semplice editor di testi come Blocco note. Un documento in formato Web può essere aperto con un browser, attraverso un collegamento a Internet (on line) oppure caricandolo dal disco del proprio computer senza connettersi alla rete (off line). Sullo schermo viene visualizzata una pagina in formato grafico: la visualizza- zione è il risultato di un’elaborazione del browser che interpreta i codici contenuti nel file e li trasforma in comandi per la costruzione della pagina. I testi scritti in HTML si distinguono dai normali file con estensione.txt o comunque da Come si identifica file di testo non HTML tramite l’estensione.html o.htm. un testo HTML? Il suffisso non è un elemento obbligatorio, ma è utilizzato normalmente per identificare il tipo di file. I documenti in HTML vengono rappresentati con un’icona che raffigura il logo del browser predefinito nel computer dell’utente. Tali documenti, quindi, non sono altro che dei normali file di caratteri, in cui vengono aggiunti i codici di formazione della pagina che prendono il nome di tag (cioè etichetta di contrasse- gno, da cui deriva il termine Markup della sigla di HTML), consistenti in sequenze di caratteri proprie del linguaggio HTML, che non fanno parte del testo normale e che consentono di realizzare gli elementi caratteristici dell’ipertesto: i link e gli oggetti grafici e multimediali. Altri codici servono per semplificare l’impaginazione dei documenti (stili del testo, titolo dei docu- menti, paragrafi, liste), così da rendere il linguaggio utile anche per creare documenti complessi. In ogni caso un testo normale (per esempio un file con l’estensione.txt), senza codici HTML, è accettato e trascritto tale e quale da un interprete HTML, cioè dal browser di pagine Internet. esempio I prodotti Microsoft Office (Word, (1) per creare un documento HTML con il programma Excel, Access) offrono la possibilità Word, aprire il programma e scrivere alcune righe di testo di creare documenti che possono essere convertiti in modo automa- tico in testi con codice HTML, per ottenere una o più pagine visualiz- zabili con un browser. (2) nel menu File, clic su Salva con nome (3) assegnare il nome al file da registrare (4) scegliere il tipo di file Pagina Web (*.htm; *.html) Il documento viene salvato come un testo in formato HTML e può essere successivamente letto e visualizzato con un browser. © Istituto Italiano Edizioni Atlas CAPITOLO 10 IL LINGUAGGIO HTML E I FOGLI DI STILE 375  I tag del linguaggio HTML sono costituiti da stringhe di caratteri comprese tra i simboli di minore ().... L’azione di un tag ha effetto sul testo compreso tra il tag stesso e il tag di chiusura, solita- mente rappresentato da un tag con lo stesso nome preceduto dalla barra. esempio Il tag attiva il neretto nella scrittura dei caratteri; per specificare la fine del neretto si usa il tag che indica la fine dell’azione:. Tutti i caratteri del testo compresi tra e saranno visualizzati in neretto dal browser. Il seguente frammento di codice HTML: Cognome: Rossi Nome: Giovanni viene interpretato dal browser in questo modo: I tag HTML possono essere indifferentemente scritti in caratteri maiuscoli o minuscoli, ma nella consuetudine i comandi sono scritti in minuscolo (a eccezione della parola chiave DOCTYPE, vedi pag. 378). Di norma un testo HTML viene suddiviso in almeno due sezioni: head la sezione intestazione contenente informazioni sulla pagina; body la sezione corpo, contenente il documento vero e proprio con tutti gli elementi carat- teristici di un ipertesto. La codifica di queste due sezioni avviene attraverso i tag: per l’intestazione; per il corpo. Inoltre un documento HTML è di norma delimitato dai tag e , perché alcuni browser devono essere informati sulla porzione di testo alla quale è necessario applicare l’interpretazione del linguaggio HTML. Quindi un documento HTML ha la seguente struttura di base: 10.2 La struttura di un documento HTML informazioni sulle caratteristiche della pagina il testo della pagina con i paragrafi e i link Quali sono le sezioni principali di un testo HTML? L’intestazione All’interno della sezione di intestazione viene descritta la pagina, in particolare vengono inseriti il titolo e, utilizzando particolari tag chiamati meta tag, le informazioni sulla pagina (o metadati). Il titolo A ogni pagina HTML è associato un titolo che ne descrive il contenuto e che viene riportato nella barra del titolo della finestra del browser di Internet. Il titolo è usato principalmente per identificare il documento (per esempio quando si cerca un documento tra tanti attraverso un motore di ricerca oppure quando una pagina viene inserita in un bookmark di siti preferiti): è opportuno quindi che ogni titolo sia diverso dagli altri all’interno dell’insieme di pagine che formano un sito e che sia formato da una frase significativa per ricordarne il contenuto. 376 PARTE TERZA LE PAGINE WEB © Istituto Italiano Edizioni Atlas Il titolo viene racchiuso tra la coppia di tag e viene mostrato sulla barra del titolo della finestra oppure sulle linguette delle pagine Web se, nel browser, esse sono organizzate a schede. I meta tag Nella sezione di intestazione della pagina HTML, tra …, sono inseriti anche Quali tag è possibile inserire nella sezione i meta tag: sono i tag che contengono i metadati della pagina, cioè informazioni sul con- ? tenuto della pagina, le parole chiave e l’autore. I meta tag sono identificati dal tag. La struttura generale della frase è: I valori più usati per l’attributo name sono: description per la descrizione; keywords per le parole chiave; author per l’autore. esempio La pagina di un sito Web scolastico può contenere metadati come i seguenti: Un’importante informazione riguarda la specifica della codifica della pagina. Se non si specifica la codifica corretta, può accadere che alcuni caratteri non standard, per esempio le lettere accentate, non vengano visualizzati correttamente. Per specificare la codifica UtF-8, che contiene tutti i caratteri dell’Europa occidentale, si utilizza il codice: Nella versione HTML5 la dichiarazione è più concisa: PER APPROFONDIRE lE ENtItÀ cARAttERE Il linguaggio HTML è stato originariamente progettato per la comunicazione anche tra terminali che usano solo codifiche ASCII a 7 bit, cioè 128 caratteri; di conseguenza, se non si specifica una codifica estesa, tutti i caratteri con codice ASCII formato da 8 bit (per esempio le lettere accentate della lingua italiana, che sono identificate con un codice ASCII superiore al 127 decimale) devono essere rappresentati in modo particolare. In HTML, per visualizzare i caratteri speciali, si utilizzano le sequenze di escape (escape sequence), ovvero delle stringhe particolari che all’atto dell’interpretazione da parte del browser vengono tradotte con i caratteri desiderati. Una prima categoria di caratteri riguarda quelli che il linguaggio HTML utilizza per la rappresentazione dei tag, quali , & o le virgolette, che verrebbero quindi considerati come facenti parte del codice del linguaggio e perciò ignorati. Per questo motivo si usano, precedute dal carattere &, le sequenze di caratteri con il punto e virgola finale: &lt; per < &gt; per > &amp; per & &quot; per “ esempio Per le lettere accentate si usano le seguenti rappresentazioni: perch&eacute; perché &egrave; per è attivit&agrave; attività &Egrave; per È pu&ograve; può &eacute; per é a &gt; b a>b Ci sono rappresentazioni analoghe per le altre vocali a, o, i, u. © Istituto Italiano Edizioni Atlas CAPITOLO 10 IL LINGUAGGIO HTML E I FOGLI DI STILE 377  esempio Altri simboli di uso comune sono: &euro; simbolo dell’euro € La lettera ç, usata nella lingua francese, corri- &copy; simbolo del copyright © sponde al codice numerico &reg; simbolo di marchio registrato ® &#199; &frac12; frazione ½ che è equivalente al codice testuale &sum; simbolo di sommatoria Ʃ &ccedil; &infin; simbolo di infinito ∞ Il simbolo cinese dell’acqua può essere rap- &alfa; lettera greca alfa α presentato con la sequenza &#27700; &beta; lettera greca beta β NoTA BeNe &gamma; lettera greca gamma γ Utilizzando la codifica UTF-8 la maggior parte dei In alternativa si possono usare anche i valori numerici caratteri speciali viene interpretata correttamente. dei codici dei caratteri Unicode preceduti dai simboli Nei Materiali multimediali è riportato l’elenco & e # e seguiti dal punto e virgola finale. completo delle entità carattere. Il DOCTYPE È buona norma indicare all’inizio della pagina Web il linguaggio utilizzato e la versione. Elenco entità carattere Queste informazioni si possono inserire utilizzando il tag. Il codice di base è: che semplicemente specifica che la pagina è scritta in HTML. Si possono aggiungere ulteriori indicazioni riguardanti il codice: dove: PUblIc indica che il documento è pubblico; W3c indica che vengono utilizzate le specifiche rilasciate dal W3C; Quali informazioni DtD HtMl 4.01 transitional (Document Type Definition, definizione del tipo di docu- contiene il DOCTYPE? mento) significa che il documento segue le specifiche della versione 4.01 Transitional; EN indica che il documento è scritto in inglese. Segue poi l’URL dove si trova il documento DTD con le specifiche. Come si vede, oltre alla versione (4.01) viene specificato anche il termine Transitional. La versione 4.01 ammette infatti tre specifiche differenti: Strict è la versione più pura di HTML, che contiene esclusivamente tag e attributi ed è senza frame. Sono ammessi solo i tag ufficiali. Non ci può essere nessuna descrizione del layout; transitional è la versione più elastica in cui si può descrivere il layout della pagina e deprecated utilizzare tag sconsigliati, cioè non più in uso; Frameset indica la presenza di frame, ovvero di una porzione di pagina dove viene visualizzata una pagina Web differente. Per esempio in una zona laterale della finestra viene mostrato un menu e nella parte centrale i contenuti situati in altre pagine Web. Anche se questo metodo è da considerarsi superato dall’utilizzo dei fogli di stile CSS e del linguaggio JavaScript, alcuni siti ne fanno ancora uso. In HTML4 la specifica del DOCTYPE è facoltativa mentre nella versione HTML5 è obbliga- toria e, non essendoci di fatto la necessità di utilizzare sottoversioni, si utilizza il codice abbreviato: 378 PARTE TERZA LE PAGINE WEB © Istituto Italiano Edizioni Atlas Il modello di base di una pagina HTML è il seguente: Titolo della pagina Contenuto della pagina PROVIAMO INSIEME 1 GUARDA Il cODIcE Visualizzare il codice HTML di una pagina Web Per visualizzare il codice HTML di una pagina Web si deve fare clic con il tasto destro del mouse sul file che contiene la pagina Web, scegliere Apri con: e selezionare il nome del browser. Il testo sorgente HTML può essere visualizzato con differenti modalità nei diversi browser. Per esempio in Internet Explorer premere il tasto Alt per visualizzare la Barra dei menu; nel menu Visualizza scegliere Origine (scorciatoia da tastiera: ctrl + U), oppure tasto destro del mouse sulla pagina, e poi sce- gliere HtMl. In Google Chrome tasto destro del mouse sulla pagina e scelta Visualizza sorgente pagina (scorciatoia da tastiera: ctrl + U). Pagina Web aperta nel browser: © Istituto Italiano Edizioni Atlas CAPITOLO 10 IL LINGUAGGIO HTML E I FOGLI DI STILE 379  Codice sorgente HTML della pagina: La finestra del codice sorgente contiene un testo con simboli e comandi distribuiti all’interno del testo e rac- chiusi tra una coppia di segni < >. Questi sono i tag che consentono al browser la formazione della pagina in formato grafico. Si può anche esaminare il codice HTML di un’intera pagina Web, oppure di una parte selezionata con il mouse o di un singolo elemento, con la scelta Ispeziona, nel menu che si apre facendo clic nella pagina con il tasto destro del mouse: 380 PARTE TERZA LE PAGINE WEB © Istituto Italiano Edizioni Atlas  Verifica della compatibilità del browser con la versione HTML5 Programmi per l’editing di pagine Web con guida pratica per il loro utilizzo 4 La formattazione La soluzione più efficace per formattare le pagine Web si basa sull’uso dei fogli di stile (vedi pag. 398). Il linguaggio HTML comprende alcuni tag che permettono di cambiare lo stile del testo e della pagina (tag stilistici). Di seguito sono illustrati i tag più importanti che servono per impostare la formattazione di un testo in linguaggio HTML. La dimensione e lo stile dei caratteri Solitamente è necessario differenziare le dimensioni dei caratteri, anche solo per distinguere il titolo dal resto del testo o comunque per definire i sottotitoli o gli elementi testuali evi- denziati. Per questo è prevista una serie di sei codici per altrettante dimensioni dei caratteri. I valori di queste dimensioni sono preceduti nel tag dalla lettera h:... dove n indica il codice numerico corrispondente alla dimensione del carattere. Il numero tra 1 e 6 specifica in effetti l’importanza del sottotitolo (1 risulta essere il più importante). HTML © Istituto Italiano Edizioni Atlas CAPITOLO 10 IL LINGUAGGIO HTML E I FOGLI DI STILE 381  esempio Con il seguente codice: Mobile marketing e social marketing Strategie promozionali delle aziende Tecnologie Web e informatica mobile si ottiene nel browser la seguente pagina: Con quale tag si cambia la dimensione dei sottotitoli? Alcune parti di testo possono essere evidenziate usando uno stile diverso dal testo normale, come il corsivo, il neretto o il sottolineato. La parte di testo deve essere racchiusa tra una delle seguenti coppie di tag:... per ottenere il testo in corsivo (italic);... per il neretto o grassetto (bold);... per il sottolineato (underline). esempio Con il codice seguente: Le tecnologie per l'informatica mobile e le applicazioni del Web 2.0 hanno consentito alle aziende di sviluppare forme di &quot;marketing non convenzionale&quot; attuato mediante strategie promozionali che sfruttano metodi di comunicazione, con i potenziali clienti, pi&ugrave; efficaci rispetto alla classica attivit&agrave; pubblicitaria. Questa &egrave; l'evoluzione del marketing che si presenta con due aspetti: mobile marketing, realizzato attraverso specifiche app per smartphone e tablet, e social marketing, basato sull'uso dei social network. si ottiene: I paragrafi Un paragrafo è una porzione di testo separata dalle altre da una riga di spazio o semplice- mente da un ritorno a capo. Per specificare un paragrafo si utilizza il tag …; l’inserimento di questo codice, oltre a creare una riga di separazione tra paragrafi, viene utilizzato per assegnare le impostazioni tipografiche al paragrafo stesso. Il codice è anche utilizzato per imporre un salto di paragrafo quando serve. NoTA BeNe A differenza di quanto avviene nei programmi di word processing, in HTML l’imporre un ritorno a capo con il tasto Invio per portare a riga nuova il testo scritto non produce l’effetto desiderato: quando si edita un testo, se si finisce una frase in mezzo a una riga con un punto e si va a capo, quello che si scrive nella riga seguente apparirà subito dopo il punto. Come si inserisce un a capo di paragrafo Per inserire invece un ritorno a capo si usa il tag per l’interruzione di riga, che si può in HTML? scrivere ovunque serva. 382 PARTE TERZA LE PAGINE WEB © Istituto Italiano Edizioni Atlas Talvolta può essere utile separare un paragrafo da un altro attraverso una linea orizzontale: questa riga viene inserita con il tag. I tag e non hanno il corrispondente tag di chiusura. Per questo motivo si possono scrivere anche nella forma e , con la barra finale. Più spazi di seguito vengono raggruppati in un unico spazio (l’indentazione tramite spazi non funziona in HTML). HTML adotta il word-wrapping, cioè ridimensiona la finestra in cui il documento appare, scalando il testo per permetterne la visione integrale. Per evitare questa operazione occorre racchiudere la parte di testo tra la coppia di tag in- dicanti il testo preformattato:... che consente anche di mantenere il formato originale di un testo creato con un word pro- cessor, comprese le tabulazioni e i rientri. Il tag è da considerarsi obsoleto, per cui è opportuno dare la preferenza alle impostazioni tramite i fogli di stile. I colori Per rappresentare i colori dei caratteri o dello sfondo di una pagina, il linguaggio HTML utilizza una combinazione dei tre colori fondamentali RGb (Red, Green, Blue) attraverso tre Che cosa indica numeri, compresi ciascuno tra 0 e 255, che specificano la gamma cromatica del rosso, del la sigla RGB? verde e del blu. Questi valori sono scritti in formato esadecimale (base 16) e quindi variano da 00 a FF, essendo FF la rappresentazione in base 16 del numero 255 (2 cifre esadecimali per ciascuno dei tre colori). esempio codice colore Spiegazione 000000 Nero Livello di rosso, di verde e di blu a zero; equivale a nessun colore FFFFFF Bianco Livello di rosso, di verde e di blu al valore massimo; la somma di tutti i colori corrisponde al bianco FF0000 Rosso Livello di rosso al massimo, verde e blu a zero: rosso puro 00FF00 Verde Livello di verde al massimo, rosso e blu a zero: verde puro 0000FF Blu Livello di blu al massimo, rosso e verde a zero: blu puro I colori intermedi corrispondono a valori compresi tra 00 e FF per i tre colori. esempio codice colore Spiegazione FF9999 Rosa Livello massimo di rosso, livello medio di blu e verde 33CC99 Verde acqua Livello alto di verde, medio di blu e basso di rosso 999999 Grigio Tutti i colori allo stesso livello Per assegnare un colore di sfondo a una pagina si usa l’attributo bgcolor del tag. esempio Il tag: consente di visualizzare una pagina con lo sfondo bianco. Anche lo sfondo della pagina può essere più opportu- esempio namente definito all’interno di un foglio di stile, anziché #000 equivale a #000000 con l’attributo bgcolor. #00F equivale a #0000FF Se le cifre esadecimali del colore sono uguali, si può usare #3C6 equivale a #33CC66. una formula abbreviata (color shorthand). © Istituto Italiano Edizioni Atlas CAPITOLO 10 IL LINGUAGGIO HTML E I FOGLI DI STILE 383  I colori possono essere specificati anche con un nome simbolico predefinito (in inglese) al posto del valore esadecimale. esempio Per ottenere uno sfondo giallo chiaro, si può usare uno dei seguenti tag: oppure: Tabella dei colori Con il tag font si può impostare il colore di un testo. esempio Il seguente tag scrive un titolo con dimensione in colore blu (nome simbolico navy): Nazioni europee NoTA BeNe Per rendere più leggibile il codice e illustrare il significato delle diverse sezioni, nella pa- gina Web si possono inserire commenti, anche su più righe, delimitandoli con i simboli: PROVIAMO INSIEME 1 UNA PAGINA IN HtMl Scrivere un semplice documento in formato HTML controllandone il funzionamento con un browser Aprire un programma di trattamento del testo, per esempio Blocco note, negli Accessori di Windows. Scrivere il seguente testo: Un nuovo documento La rete per comunicare Una rete si collega a un'altra rete e forma una rete di reti. I computer delle reti comunicano tra loro. Nel menu File di Blocco Note scegliere Salva con nome... 384 PARTE TERZA LE PAGINE WEB © Istituto Italiano Edizioni Atlas  Inserire il nome con l’estensione.html nella casella Nome file, scegliere l’opzione Tutti i file (*.*), anziché il formato.txt, nella casella Salva come e poi fare clic sul pulsante Salva. nome del file.html scelta Tutti i file (*.*) Il file HTML assume come icona il logo del browser predefinito nel sistema. NoTA BeNe Per visualizzare l’e- stensione dei file, mettere il segno di spunta all’opzione Estensioni nomi file nella scheda Visua- lizza della cartella. Facendo doppio clic sull’icona si apre il programma browser. La pagina viene visualizzata in forma grafica e in modalità Non in linea. Clic con il tasto destro e scelta Visualizza sorgente pagina. © Istituto Italiano Edizioni Atlas CAPITOLO 10 IL LINGUAGGIO HTML E I FOGLI DI STILE 385  Come si può notare, il tag è in una posizione errata e spezza la frase in modo inatteso. Tornare in Blocco Note, cancellare il tag e salvare la nuova versione del testo. tag posizionato in maniera errata Clic sull’icona Aggiorna nel browser per visualizzare la pagina nella versione corretta. I link La principale caratteristica di un ipertesto è la possibilità di consultare il documento in modo non sequenziale attraverso l’uso di collegamenti ad altri oggetti o pagine. Con i link si effettuano riferimenti a file remoti o ad altre parti del documento stesso oppure si può passare velocemente da un indice alla voce richiesta. Il link appare nella pagina come un’immagine, un’animazione o semplicemente una parola (o una breve frase), di norma sottolineata e di colore blu: passando su di esso, il puntatore del mouse si trasforma, diventando una piccola mano con il dito indice alzato; questo simbolo indica che si può attivare il collegamento premendo il tasto del mouse. Un link già visitato, di solito, assume il colore rosso porpora. La struttura del tag che definisce un link ipertestuale è la seguente: parola Qual è la struttura dove nomerisorsa è la destinazione del link, indicata con la sintassi degli indirizzi URL, e del tag di un link? parola è il testo che compare sottolineato e in colore per rappresentare il link. 386 PARTE TERZA LE PAGINE WEB © Istituto Italiano Edizioni Atlas La lettera a, all’inizio e alla fine del tag, sta per àncora, cioè punto di attracco, destinazione anchor del salto ipertestuale; quindi questo link specifica il riferimento ipertestuale (href) di un’àncora. esempio NoTA BeNe La riga: L’URL prova.html si dice relativo se il file Prova è situato nella stessa produce sul video la parola Prova sottolineata e in colore; se con il mouse si fa clic su di directory in cui è essa, il browser richiama il file prova.html, realizzando un link ipertestuale a un’altra pagina. presente la pagina che lo richiama. Con i link definiti dal tag... si può produrre un salto ipertestuale a un altro sito Indicando invece il Internet, specificandone l’indirizzo URL: percorso completo per raggiungere il Vai su Google file, si usa un URL assoluto. Sul video la frase Vai su Google appare sottolineata e in colore; passando sopra di essa il Per esempio: puntatore del mouse diventa una mano e, facendo clic su di essa, il browser richiama la http://www.scuola1. pagina di apertura del sito richiesto. it/documenti/ Si può anche specificare il nome della finestra di destinazione del salto ipertestuale dove prova.html deve essere visualizzata la nuova pagina, attraverso l’attributo target. In particolare, il valore _blank apre la pagina del link in una nuova finestra del browser: Vai su Google I link possono riguardare anche parti specifiche di un documento o possono essere utiliz- zati per spostarsi all’interno dello stesso documento, oppure a una determinata posizione interna a un altro documento, facendo riferimento alle sue sezioni. Si supponga di voler creare un link da un punto di una pagina Web a un punto successivo denominato sezione2. La sezione a cui si fa riferimento deve iniziare con un tag HTML definito nel modo seguente:... Il punto dove viene inserito il tag... specifica il nome dell’àncora, cioè del anchor name punto di arrivo di un salto ipertestuale. Il salto alla sezione2 della pagina è realizzato dal link: Vai alla seconda sezione La frase Vai alla seconda sezione risulta sottolineata e in colore, per segnalare all’utente la presenza di un link. I link interni possono essere utili per organizzare i contenuti di una pagina di grandi dimen- sioni, inserendo un indice iniziale: Indice dei contenuti Introduzione Le regole del linguaggio l’àncora inizio per dare la possibilità, alla fine di ogni Esempi sezione, di tornare all’indice Introduzione...... Torna all'indice Le regole del linguaggio le àncore delle sezioni...... Torna all'indice Esempi...... © Istituto Italiano Edizioni Atlas CAPITOLO 10 IL LINGUAGGIO HTML E I FOGLI DI STILE 387  Il collegamento alla sezione di una pagina diversa dall’attuale si realizza inserendo, nell’at- tributo href, il nome della pagina HTML prima del nome dell’àncora. Si supponga che nella pagina docy.html sia presente un riferimento: Se si vuole inserire in una pagina docx.html un salto alla sezione2 della pagina docy.html, si deve scrivere il seguente link: Vai alla seconda sezione Il carattere # separa il nome del documento dal nome della sezione. Il collegamento docx.html docy.html a una sezione di un’altra pagina