Pagine HTML. Appendice G. Concetti chiave Basi del linguaggio HTML Realizzare semplici pagine statiche. G.1 Tag

Transcript

1 Appendice G Pagine HTML Concetti chiave Basi del linguaggio HTML Realizzare semplici pagine statiche G.1 Tag Accludiamo questa appendice al fine di dare al lettore non esperto della materia gli elementi di base necessari per comprendere e utilizzare i programmi introdotti nel Capitolo 25, dove abbiamo trattato lo sviluppo di applicazioni in architettura Internet. In Figura G.1 vediamo un esempio di quella che potrebbe essere la pagina principale della versione ipertestuale di questo libro. La pagina presenta in alto il titolo, alcune informazioni bibliografiche e i nomi degli autori: facendovi un clic sopra è possibile inviare loro un messaggio di posta elettronica. Sempre in alto, ma a sinistra, troviamo un immagine con il logo della casa editrice e un ipotetica divisione editoriale cui il testo fa capo, Istruzione scientifica: si tratta di un collegamento con il quale si accede direttamente alla home page della McGraw-Hill Italia. Nella parte inferiore della pagina abbiamo invece un indice del libro, contenente link grazie ai quali possiamo visualizzare i vari capitoli. Segue poi, ripetuto ancora, l elenco dei capitoli; questa volta però un clic sul collegamento provocherà il trasferimento del corrispondente file di testo dal server remoto al nostro computer.

2 Figura G.1 La possibile pagina iniziale della rappresentazione in formato HTML di questo libro Listato G.1 Lo script HTML che visualizza la pagina di Figura G.1 <HTML> <HEAD> <TITLE> Linguaggio C</TITLE> </HEAD> <BODY BGCOLOR="#FFFF10"> <IMG SRC="McGraw.gif" ALT=" LogoMcGraw " ALIGN=LEFT> <H1 ALIGN=CENTER>Linguaggio C</H1> <H3 ALIGN=CENTER>McGraw-Hill Companies, Publishing Group Italia, Giugno 2009</H3> <H4 ALIGN=CENTER> di <A Guidi</A> e

3 <A Bellini</A> </H4 ALIGN=CENTER> <H4><A HREF= Istruzione scientifica</a></h4> <HR SIZE=2> <P> I nuovi linguaggi che si sono presentati sulla scena dell informatica devono molto al C, la cui conoscenza costituisce un ottimo viatico per il loro rapido apprendimento. Siamo convinti che - prima di affrontare il paradigma degli oggetti, tipico dei linguaggi quali C++, un superinsieme del C, e Java - il miglior approccio didattico sia apprendere la programmazione strutturata e modulare. E' ciò che facciamo con questo testo, che è un corso completo di C, un linguaggio largamente utilizzato in tutti gli ambiti applicativi, il quale per l'eleganza della sintassi e la compattezza dei costrutti è una sfida permanente alle capacità intellettuali del progettista software nonché una utilissima palestra per il giovane programmatore. </P> <UL> <H3> Capitolo 1 <A HREF="Capitolo1.html"> Computer</A> Capitolo 2 <A HREF="Capitolo2.html"> Sistemi operativi</a> Capitolo 3 <A HREF="Capitolo3.html"> Algoritmi</A> Capitolo 4 <A HREF="Capitolo4.html"> Programmazione</A> Capitolo 5 <A HREF="Capitolo5.html"> Sequenza</A> Capitolo 6 <A HREF="Capitolo6.html"> Tipo fondamentali</a>... Download Capitolo 1 <A HREF=Capitolo1.zip> Computer </A> Download Capitolo 2 <A HREF=Capitolo2.zip> Sistemi operativi </A>... </UL> </BODY> </HTML> I contrassegni o tag HTML sono parole riservate racchiuse fra parentesi angolari; spesso si presentano in coppie, in cui il tag di chiusura ha lo stesso nome del tag di apertura ma è preceduto da una barra, /. Ogni pagina, anche quella del Listato G.1, si apre sempre con <HTML>, si chiude con </HTML> ed è suddivisa in intestazione, che contiene il titolo della pagina, e corpo. L intestazione è racchiusa fra i tag <HEAD> e </HEAD>, nell esempio: <HEAD> <TITLE> Linguaggio C </TITLE> </HEAD> All interno dell intestazione appare il titolo della pagina Linguaggio C racchiuso fra i tag <TITLE> e </TITLE>. Il titolo permette di identificare la pagina, per esempio nei segnalibri e nella cronologia dei browser. Il resto della pagina è costituito dal corpo, compreso tra <BODY> e </BODY>. Nel tag di apertura possiamo inserire alcune caratteristiche generali della pagina; per esempio, nel Listato G.1, da cui si ottiene la visualizzazione di Figura G.1, abbiamo:

4 <BODY BGCOLOR="#FFFF10"> che definisce come giallo il colore dello sfondo. Il codice FFFF10, che rappresenta il colore, è in formato esadecimale, ovvero in un sistema di numerazione basato su 16 cifre. Per inserire un immagine possiamo utilizzare il tag IMG SRC seguito da = e dal nome del file tra doppi apici; nel caso dell esempio, McGraw.gif: <IMG SRC="McGraw.gif" ALT=" LogoMcGraw " ALIGN=LEFT> ALT definisce il nome che viene mostrato tenendo leggermente premuto il tasto sinistro del mouse quando si è posizionati sopra l immagine; in questo caso LogoMcGraw. Invece la specifica ALIGN permette di centrare o allineare a sinistra o a destra l immagine rispettivamente con ALIGN CENTER, ALIGN LEFT, ALIGN RIGHT. Il nome del file dell immagine sorgente è in realtà il cammino o pathname che lo identifica univocamente nel file system. Sarebbe stato in effetti preferibile scrivere: <IMG SRC=" C:\documenti\gabriele\immagini\McGraw.gif"> precisando così che McGraw.gif si trova nella cartella immagini, contenuta nella cartella gabriele a sua volta contenuta in documenti nel disco C. Al contrario, nel nostro esempio, riportando solo il nome del file, viene sottinteso che l immagine è posizionata nella stessa cartella in cui è contenuto il file del Listato G.1. Il corpo può contenere titoli di livello diverso, ottenuti con i tag <H1>, <H2>, <H3>,... in base alla loro importanza. Il testo da visualizzare va posto fra il tag di apertura e quello di chiusura. Nell esempio abbiamo: <H1 ALIGN=CENTER>Linguaggio C</H1> che fa della frase Linguaggio C un titolo di primo livello centrato. Così, per esempio: <H1></H1> <H2></H2> <H3></H3> <H4></H4> mostreranno sulla pagina qualcosa di simile: Dunque anche il testo può essere centrato, allineato a sinistra o a destra con la specifiche ALIGN CENTER, ALIGN LEFT, ALIGN RIGHT: <H1 ALIGN=RIGHT></H1> visualizzerà: mentre nel Listato G.1 il tag: <H3 ALIGN=CENTER>McGraw-Hill Companies, Publishing Group Italia, Giugno 2009</H3> centra il nome dell editore e la data dell edizione. Una porzione di testo o un immagine, oltre a essere attivati come collegamenti con altre pagine Web, possono essere utilizzati anche per attivare servizi Internet quali la posta elettronica, una connessione Telnet o un servizio FTP sia sul sistema locale sia su altri siti Web. Il clic dell utente sul collegamento scatenerà l azione associata. Per creare

5 una connessione usiamo il tag HREF che inizia con A HREF= seguito, nel caso della posta elettronica, da mailto: e dall indirizzo di . Successivamente dovrà essere indicato il testo che l utente vedrà nella pagina, quindi il tag dovrà essere chiuso con </A>. Normalmente i browser visualizzeranno il testo che è racchiuso fra i due tag come testo sottolineato e in un colore differente, proprio per indicare all utente che si tratta di un link. Nel nostro esempio abbiamo: <A HREF=mailto:abel@mathema.com>Alessandro Bellini</A> Un clic su Alessandro provocherà l impostazione di una diretta ad abel@mathema.com. Per navigare verso un altra risorsa usiamo ancora A HREF= seguito dall indirizzo URL posto fra doppi apici, dal testo che l utente vedrà nella pagina e infine da </A> che chiude il tag: <A HREF= scientifica</a> Di nuovo il browser visualizzerà il testo racchiuso fra i due tag, nello specifico Istruzione scientifica, anche in questo caso sottolineato e con un colore differente per indicare all utente che si tratta di un collegamento che fa riferimento a un indirizzo URL. Continuando l esame del Listato G.1, il tag HR visualizza una linea orizzontale: <HR SIZE=2> mentre SIZE ne indica lo spessore. HR è un esempio di tag che non necessita del corrispondente tag di chiusura </HR>. Quindi P indica l inizio di un nuovo paragrafo: <P> I nuovi linguaggi che si sono presentati sulla scena dell informatica devono molto al C, la cui conoscenza costituisce un ottimo viatico per il loro rapido apprendimento. Siamo convinti che - prima di affrontare il paradigma degli oggetti, tipico dei linguaggi quali C++, un superinsieme del C, e Java - il miglior approccio didattico sia apprendere la programmazione strutturata e modulare. E' ciò che facciamo con questo testo, che è un corso completo di C, un linguaggio largamente utilizzato in tutti gli ambiti applicativi, il quale per l'eleganza della sintassi e la compattezza dei costrutti è una sfida permanente alle capacità intellettuali del progettista software nonché una utilissima palestra per il giovane programmatore. </P> </P> chiude il paragrafo. Il corpo della pagina può anche contenere degli elenchi di elementi; nella nostra pagina abbiamo l elenco dei capitoli preceduto dal tag <UL> e chiuso da </UL>: <UL> <H3> Capitolo 1 <A HREF="Capitolo1.html"> Computer</A> Capitolo 2 <A HREF="Capitolo2.html"> Sistemi operativi</a>... I tag effettuano un salto a linea nuova mentre all interno di ogni elemento abbiamo un collegamento a una URL, l indirizzo della risorsa che conterrà il capitolo corrispondente. Per esempio, con un clic su Computer accederemo alla pagina HTML che contiene il primo capitolo. Successivamente nello stesso elenco troviamo linee come: Download Capitolo 1 <A HREF=Capitolo1.zip> Computer</A> che permettono di scaricare il file indicato sul nostro computer. Un clic su Computer provocherà infatti il trasferimento dal server remoto a quello locale del file Capitolo1.zip. Si osservi come questi file siano spesso in formato compresso, nel nostro caso un file.zip, così da avere dimensioni più ridotte e poter essere trasferiti più velocemente.

6 G.2 Colori Abbiamo definito il colore dello sfondo assegnando a BGCOLOR il codice esadecimale FFFF10 preceduto dal carattere # e inserito tra doppi apici: <BODY BGCOLOR="#FFFF10"> In Tabella G.1 riportiamo i colori, i codici mnemonici e quelli esadecimali corrispondenti che si riferiscono al formato RGB (Red, Green, Blue) in cui vengono definiti i valori dei colori rosso, verde e blu usati per formare il colore desiderato. Tabella G.1 Tabella dei colori Colore Codice mnemonico Codice esadecimale Acqua Aqua "#00FFFF" Argento Silver "#C0C0C0" Bianco White "#FFFFFF" Blu Blue "#0000FF" Blu marina Navy "#000080" Calce Lime "#00FF00" Castano Maroon "#800000" Fucsia Fuchsia "#FF00FF" Giallo Yellow "#FFFF00" Grigio Gray "#808080" Nero Black "#000000" Porpora Purple "#800080" Rosso Red "#FF0000" Verde Green "#008000" Verde oliva Olive "#808000" In realtà potremmo utilizzare anche il codice mnemonico scrivendo semplicemente, per esempio: <BODY BGCOLOR="Yellow"> Con i codici esadecimali si riesce comunque a ottenere una più ampia varietà di sfumature, trovando facilmente il colore con la tonalità preferita, come abbiamo fatto nel Listato G1. Si provi per esempio a verificare le varie tonalità di rosso che si hanno sostituendo al codice FF0000, che corrisponde a Red, gli altri codici che si ottengono modificando le ultime quattro cifre fino a FF9999. All interno del tag di apertura del corpo della pagina possono essere impostate le variabili: BGCOLOR TEXT BACKGROUND colore dello sfondo colore del testo immagine da utilizzare come sfondo Scrivendo: <BODY BGCOLOR="Silver" TEXT="Red"> otterremmo una pagina con il colore di fondo argento e il testo in rosso; lo stesso effetto si otterrebbe anche utilizzando i codici esadecimali: <BODY BGCOLOR="#C0C0C0" TEXT="#FF0000"> Invece con il tag:

7 <BODY BACKGROUND="McGraw.gif"> l immagine McGraw.gif sarebbe utilizzata come sfondo di tutta la pagina. Altri tag come FONT permettono la definizione del colore mediante parametri come COLOR. G.3 Testo Abbiamo già introdotto alcuni dei contrassegni mostrati in Tabella G.2, che permettono la formattazione del testo. Normalmente la visualizzazione dei paragrafi non tiene conto degli spazi bianchi tra una parola e l altra, delle tabulazioni orizzontali e della scrittura del testo su più righe, a meno di indicarlo espressamente utilizzando opportuni tag. Se per esempio nel Listato G.1, al posto di <P>, avessimo usato <PRE> (preformattato) allora il testo sarebbe stato visualizzato nella pagina di Figura G.1 esattamente come lo avevamo scritto all interno del listato. Tabella G.2 Alcuni tag di formattazione Tag Effetto <B> il testo seguente viene visualizzato in grassetto salta una linea <CENTER> centra il testo all interno della finestra di visualizzazione <FONT> controlla la dimensione del carattere da visualizzare <HR> visualizza una linea orizzontale. <I> il testo seguente viene visualizzato in corsivo/italico <P> indica l inizio di un paragrafo <PRE> (preformattato) visualizza il testo esattamente così come viene scritto Per esempio <B>Bold (grassetto)</b> visualizza: Bold (grassetto) Con la composizione degli appositi tag: <B><I>Grassetto corsivo</i></b> otteniamo il grassetto corsivo: Grassetto corsivo In questo caso è indifferente l ordine dei fattori di formattazione, ma questa regola non è sempre valida nella composizione dei tag. Come abbiamo già detto, il contrassegno <HR> permette di disegnare una linea orizzontale definendone, se lo si desidera, lunghezza e spessore. Il campo WIDTH ne definisce invece la lunghezza in percentuale della finestra di visualizzazione, eventualmente allineandola a sinistra, destra o al centro con il parametro ALIGN seguito rispettivamente dai valori LEFT, RIGHT o CENTER. Il campo SIZE definisce lo spessore della linea in base al valore intero che lo segue: più grande è il valore, tanto maggiore è il suo spessore. Nel caso che non sia specificato né il campo WIDTH né quello SIZE, come nell esempio del Listato G.1, la linea andrà dal margine sinistro a quello destro della finestra e il suo spessore corrisponderà all intero 1. Il tag FONT definisce, oltre al colore del testo con il parametro COLOR, anche la dimensione del carattere da visualizzare per mezzo del parametro SIZE, che assume valori da 1 a 7 (default = 3). Inoltre, se il valore di SIZE è preceduto dal segno meno, la dimensione del carattere verrà diminuita rispetto a quella base. Così la sequenza:

8 <FONT SIZE=1>Uno</FONT> <FONT SIZE=2>Due</FONT> <FONT SIZE=3>Tre</FONT> <FONT SIZE=4>Quattro</FONT> <FONT SIZE=5>Cinque</FONT> <FONT SIZE=6>Sei</FONT> <FONT SIZE=7>Sette</FONT> visualizzerà: UnoDueTreQuattroCinqueSeiSette Mentre <FONT SIZE=14 COLOR=RED>Dimensione 14, colore rosso<font> visualizzerà: Dimensione 14, colore rosso con la scritta in colore rosso. Il corpo della pagina può contenere degli elenchi che iniziano con i tag <UL> od <OL>, dove ogni singolo elemento è indicato dal tag <LI>. Nel primo caso si tratterà di una lista di elementi puntati, nel secondo numerati; per esempio: <OL> <LI> Computer <LI> Sistemi operativi <LI> Algoritmi </OL> visualizzerà sulla pagina web: 1. Computer 2. Sistemi operativi 3. Algoritmi Il tag <DL> apre invece un elenco composto da una lista di elementi preceduti da <DT> e dalle corrispondenti definizioni, precedute da <DD>. Il listato: <DL> <DT>Capitolo 1 <DD>Computer <DT>Capitolo 2 <DD>Sistemi operativi <DT>Capitolo 3 <DD>Algoritmi </DL> restituirà: Capitolo 1

9 Computer Capitolo 2 Sistemi operativi Capitolo 3 Algoritmi Per posizionare le immagini e i paragrafi di testo in vari punti della pagina dobbiamo invece utilizzare i tag TOP, BOT e MID (cima, fondo, mezzo). Infine, in un listato HTML, si possono inserire anche dei commenti che ne consentiranno una maggiore leggibilità ma non avranno alcuna influenza sulla visualizzazione della pagina, come per esempio il tag: <! È un commento -->s G.4 Form All interno di una pagina Web possono essere inseriti dei contrassegni che permettono di interagire con l utente, rendendo disponibili operazioni di ricerca ma anche di modifica e inserimento di dati in archivi centralizzati. Il tag <FORM ACTION=... METHOD=...>... </FORM> permette l inserimento di dati e può comprendere caselle di testo, di selezione, di riepilogo a discesa oppure pulsanti di comando. Il tag include spesso i comandi Reset e Submit, che consentono rispettivamente di annullare la compilazione dei campi di testo e di eseguire l azione specificata dall attributo ACTION di <FORM>, utilizzando il programma di elaborazione specificato dall attributo METHOD. L operazione compiuta è in genere l invio di un messaggio di ; con il diffondersi delle applicazioni Internet e Intranet viene però usato sempre più spesso anche in sostituzione di applicazioni tradizionali o per coprire nuove aree applicative. In questo caso i dati inviati dal client al server vengono processati da quest ultimo e possono dar vita a una complessa iterazione con l utente. Verifica le abilità 1. Cos è un tag? 2. Definire HEAD e BODY. 3. Come si possono ottenere caratteri differenti per tipo e dimensione, in una pagina HTML? Fare alcuni esempi significativi. 4. Come si possono ottenere caratteri e sfondi di colore differente, in una pagina HTML? 5. È possibile inserire in una pagina HTML immagini e farle apparire nella posizione voluta? 6. Come si può fare in modo che un clic su una parte della pagina HTML scateni l invio di una mail all indirizzo desiderato? 7. Come si può fare in modo che un clic su una parte della pagina HTML faccia aprire una pagina diversa? 8. Quante e quali impostazioni di elenchi sono state presentati nel capitolo? 9. Qual è lo scopo del tag FORM? 10. Prendere la pagina di un libro cartaceo di proprio interesse e provare a trasformarla in una pagina visibile da browser. Se non si conoscono i tag per ottenere l effetto voluto, basterà fare una ricerca su Internet per trovare numerosi siti, anche in lingua italiana, che contengono le specifiche del linguaggio HTML. Si impara molto anche confrontando le pagine visualizzate con il loro sorgente: per vederlo esiste sempre un opzione del browser in uso che ce ne dà la possibilità (comando HTML o Page Source del menu Visualizza o View).