Manuali.net Corso base per la gestione di Siti Web Nevio Martini 2009
Il Linguaggio HTML 1 parte Introduzione Internet è un fenomeno in continua espansione e non accenna a rallentare, anzi è in permanente evoluzione, così come il numero degli utenti che aumenta ogni anno in modo vertiginoso. Tutto questo ha portato in pochissimo tempo ad avere un numero elevato di siti Web e quindi una moltitudine di informazioni fruibili su ogni tipo di argomento. Infatti molte aziende, scuole, agenzie di informazioni, enti, comuni, province, o semplicemente persone private, hanno messo a disposizione i propri dati per essere consultati più o meno liberamente. Figura 1 Le tecnologie utilizzate per realizzare i siti Web sono di diverso tipo come: HTML (HyperText Markup Language), CSS, XML, Java Script, Java, Flash, PHP, ASP, JSP.. In particolare il linguaggio HTML è stato il primo ad essere utilizzato per la realizzazione delle pagine Web che compongono i siti Internet, ed è ancora oggi molto usato per la costruzione dei siti. Nevio Martini - Manuali.Net 2009 Tutti i diritti riservati 2
Oltre alle pagine Web un sito Internet può contenere immagini, video, animazioni, presentazioni, suoni o file musicali. Lo standard del linguaggio HTML è definito dal W3C (World Wide Web Consortium), un consorzio che si è occupato di uniformare la sintassi del linguaggio HTML e che ha rilasciato, in questi anni, varie versioni di questo importante linguaggio (HTML 2.0, HTML 3.2, HTML 4.0), fino all ultima rilasciata cioè l HTML 4.01, attualmente è in fase di lavorazione la versione 5. Figura 2 W3C Per migliorare e facilitare la realizzazione di siti Web, è opportuno utilizzare un programma, chiamato web editor, che permette di lavorare sulle pagine in modo visuale (WYSIWYG - What You See Is What You Get - "quello che vedi è quello che ottieni"), cioè consente di crearle e visualizzarle sul video del proprio computer, così come poi saranno aperte nel browser, generando direttamente il codice HTML. In questo modo si permette a chi crea le pagine Web, di lavorare senza dover ricordare a memoria tutti i comandi HTML e la loro sintassi. Programmi di questo tipo sono: Adobe Dreamweaver, Microsoft Expression Web (sostituto di Front Page) e il software open source KompoZer. Figura 3 Web Editor Comunque è molto importante per chi si accinge a intraprendere questo tipo di lavoro, conoscere i principali comandi del linguaggio HTML, in modo da comprenderne il significato e poter effettuare delle modifiche, quando necessario, direttamente sul codice generato da questi software. Inoltre la conoscenza dell HTML permette di verificare che il codice delle pagine Web create, sia corrispondente allo standard definito dal W3C, in modo che sia interpretato correttamente dai browser degli utenti. Nevio Martini - Manuali.Net 2009 Tutti i diritti riservati 3
La realizzazione di siti Web presuppone, oltre all utilizzo di un web editor e di un browser, anche l impiego di un editor grafico come Adobe Photoshop, Corel Paint Shop Pro Photo o GIMP e un programma FTP (File Transfert Protocol) per il trasferimento dei file all interno del proprio spazio Web del Provider Internet scelto. Le pagine Web Le pagine Web sono realizzate utilizzando tecnologie ideate per la gestione degli ipertesti, infatti un ipertesto è formato da un serie di documenti consultabili in modo non sequenziale. I vari documenti sono poi collegati tra loro tramite collegamenti ipertestuali (link o hyperlink) realizzati tramite testo o immagini. Figura 4 - Ipertesto In particolare una pagina Web è formata da un file di testo, contenente etichette o istruzioni (tag) di formattazione in linguaggio HTML e collegamenti a immagini, video, suoni o file multimediali e ad altre pagine Web. Il browser scarica le pagine Web, che si trovano sul server Internet del sito visitato e che fanno riferimento a un certo indirizzo Web, sul proprio computer (tutte le pagine pubblicate in Internet hanno un loro indirizzo specifico chiamato URL o Uniform Resources Locators) e, interpretando le istruzioni e i collegamenti HTML, dispone i vari files associati a quel documento (le immagini, le animazioni, i filmati in flash..) sul monitor, mostrando la pagina Web in tutta la sua interezza. La fase di visualizzazione di una pagina Web da parte del browser viene definita col nome di rendering della pagina, il Motore di rendering è quindi quella parte del browser che ha il compito di mostrare sul monitor il documento HTML definitivo. Nevio Martini - Manuali.Net 2009 Tutti i diritti riservati 4
Il linguaggio HTML, ha quindi la funzione di segnalare al browser come i vari elementi del documento richiamato devono essere distribuiti all interno della pagina che si sta visualizzando. Attualmente i browser più utilizzati sono Internet Explorer, Mozzilla Firefox, Apple Safari, Google Chrome e Opera. Figura 5 I vari browser È buona norma per chiunque si cimenti nella realizzazione di pagine Web, di testare il proprio lavoro con i browser più utilizzati, in quanto ognuno di questi interpreta i comandi HTML con diverse sfumature. Figura 6 Le finestre di alcuni browser Nevio Martini - Manuali.Net 2009 Tutti i diritti riservati 5
Per evitare quindi che vi sia una evidente diversità di visualizzazione delle pagine Web tra un browser ed un altro, occorre controllare che il codice HTML inserito rispetti le norme del W3C. In alternativa all utilizzo manuale dei browser si può usare il servizio online open-source offerto da BrowserShots all indirizzo http://browsershots.org/. BrowserShots apre le pagine Web segnalate su anteprime (screenshot), che rappresentano la visualizzazione di diversi browser. Per usare questo servizio occorre selezionare i browser su cui visualizzare la propria pagina e inserire l indirizzo da testare nell apposita casella, quindi è necessario aspettare il tempo di risposta di BrowserShots. Il Linguaggio HTML 1 parte Figura 7 - BrowserShots Come abbiamo già anticipato, le pagine web sono formate in gran parte da testo, quindi per realizzare la struttura di pagine elementari basta un editor semplice e molto facile da usare, come per esempio il Blocco Note (Notepad) di Windows, col quale si lavora direttamente sul codice HTML. Prima di iniziare a lavorare si deve tenere in considerazione alcuni fattori importanti quali: Normalmente tutti i siti Web, prima di essere pubblicati, sono realizzati in locale, cioè sul proprio computer. Nevio Martini - Manuali.Net 2009 Tutti i diritti riservati 6
Solo in un secondo momento, quando si è sicuri dell operato fatto, vengono pubblicati in Internet. I nomi dei file e le rispettive estensioni conviene scriverli con caratteri minuscoli. Nei nomi dei file è opportuno non inserire degli spazi vuoti e scrivere per esempio chi_siamo.htm e non chi siamo.htm. Conviene lavorare, inserire e salvare tutti i documenti del web in un unica cartella, all interno si possono poi inserire delle sottocartelle per contenere le immagini, i suoni o i video, in modo da ottenere una struttura del sito più ordinata. La struttura di una pagina HTML I documenti HTML per poter essere visualizzati correttamente in Internet, devono contenere le istruzioni (tag) necessarie per fornire al browser le indicazioni per visualizzare le pagine Web. I tag sono costituiti da stringhe di caratteri compresi tra i simboli < minore e > maggiore. In una pagina Web, per prima cosa è necessario indicare al browser dove comincia e dove finisce il documento HTML, questo si ottiene con le semplici istruzioni: <html> e </html>. Inoltre un file HTML si divide in due parti fondamentali: l intestazione (head) e il corpo del documento (body) e, naturalmente, occorre anche indicare al browser dove iniziano e dove finiscono queste parti con queste istruzioni: <head> </head> e <body> </body>. Figura 8 Pertanto un file html contiene sempre obbligatoriamente queste istruzioni: <html> <head> </head> <body> </body> </html> Il corpo del documento contiene tutti i componenti che formano la pagina Web: il testo, le immagini, i suoni, i video ecc.. Nevio Martini - Manuali.Net 2009 Tutti i diritti riservati 7
L intestazione racchiude invece delle informazioni non immediatamente comprensibili, ma che si riferiscono al modo in cui il documento deve essere letto e interpretato dal browser e dai server Web. Qui si trova, per esempio, il titolo della pagina, che verrà visualizzato in alto nello schermo, al di sopra dei vari menù e pulsanti cliccabili del browser. Per fare questo si usano semplicemente i seguenti tags: <title> </title>. <html> <head> <title> Titolo della pagina </title> </head> <body> </body> </html> Codice scritto con Blocco note: Figura 9 Visualizzazione della pagina con IE: Figura 10 CONTINUA NELLA PROSSIMA LEZIONE Nevio Martini - Manuali.Net 2009 Tutti i diritti riservati 8