Germano Pettarin. Manuale HTML

Transcript

1 A01 99

2

3 Germano Pettarin Manuale HTML

4 Copyright MMVII ARACNE editrice S.r.l. via Raffaele Garofalo, 133 A/B Roma (06) ISBN I diritti di traduzione, di memorizzazione elettronica, di riproduzione e di adattamento anche parziale, con qualsiasi mezzo, sono riservati per tutti i Paesi. Non sono assolutamente consentite le fotocopie senza il permesso scritto dell Editore. I edizione: ottobre 2007

5 A mio padre e mia nonna

6

7 INDICE INTRODUZIONE...11 UNA PRIMA PAGINA HTML...13 ELEMENTI DI BASE DEL LINGUAGGIO HTML...15 IL TAG <HTML>...</HTML>...16 LA STRUTTURA DI UNA PAGINA HTML...16 DEFINIRE IL TITOLO DI UN DOCUMENTO...17 IL CORPO DI UN DOCUMENTO...18 MODIFICARE IL COLORE DI SFONDO...19 INSERIRE UNA IMMAGINE COME SFONDO...20 LA POSIZIONE DEL FILE...21 L ESTENSIONE DEL FILE...22 ALCUNE ESTENSIONI DEI FILE...26 DELLE IMMAGINI PARTICOLARI: LE GIF ANIMATE...27 MODIFICARE IL COLORE DEL TESTO...27 MODIFICARE I MARGINI DEL TESTO...28 L IMPORTANZA DI COMMENTARE IL CODICE...28 ESERCIZI...29 FORMATTARE I TESTI IN MODO PARTICOLARE...31 COME ANDARE A CAPO IN UNA PAGINA WEB...31 ALLINEAMENTO DEL TESTO...31 CAMBIARE COLORE, GRANDEZZA E FONT DI UN TESTO...31 ESERCIZI...32 SCRIVERE IN GRASSETTO, CORSIVO, SOTTOLINEATO...33 ESERCIZI...34 UN TESTO SCORREVOLE...35 BEHAVIOR...35 BGCOLOR...36 DIRECTION...36 HSPACE...36 LOOP...36 WIDTH...36 TITOLI...37 INSERIRE UNA RIGA SEPARATRICE...37 ALIGN...38 COLOR...38 SIZE...38 NOSHADE...38 WIDTH...38 APICE E PEDICE...39 vii

8 CREARE UNO SPAZIO...39 ESERCIZI...39 I PARAGRAFI...42 ESERCIZI...43 IMMAGINI, SUONI E FILMATI...45 INSERIRE UNA IMMAGINE...45 WIDTH HEIGHT...46 ALIGN...46 BORDER...48 INSERIRE UN SUONO...49 <LOOP>...51 DOVE TROVARE FILE MIDI E MP INSERIRE UN FILMATO...53 WIDTH HEIGHT...54 AUTOSTART...54 START...55 DOVE TROVARE DEI FILMATI...55 ESERCIZI...57 LE LISTE...61 LISTE NON NUMERATE...61 TYPE...61 LISTE NUMERATE...62 TYPE...63 START...63 ESERCIZI...64 I LINK...67 <A HREF>...</A>...68 <A NAME>...</A>...69 MAILTO...71 I COLORI DEI LINK...71 LINK...71 VLINK...72 ALINK...72 ESERCIZI...72 TABELLE...77 <TABLE>...</TABLE>...77 BORDER...77 BORDERCOLOR...78 ALIGN...78 BGCOLOR...79 viii

9 DEFINIZIONE DI UNA TABELLA...79 I TAGS <TH>...</TH>...82 ROWSPAN E COLSPAN...82 ESERCIZI...83 I FRAMES...89 <FRAMESET>...</FRAMESET>...89 ROWS...89 COLS...91 <FRAME>...92 SCROLLING...94 NORESIZE...95 FRAMEBORDER...95 MARGINHEIGHT, MARGINWIDTH...95 SUDDIVIDERE UN FRAME IN ALTRI FRAMES...96 ESERCIZI...98 GLI OGGETTI HTML...99 CASELLA DI TESTO...99 CASELLA DI CONTROLLO PULSANTE DI OPZIONE CASELLA DI RIEPILOGO RIQUADRO DI TESTO I PULSANTI ESERCIZI APPLET DOVE TROVARE DEGLI APPLET? IL TAG <APPLET> PUBBLICARE IL SITO PUBBLICARE UN SITO SU ALTERVISTA APPENDICE GLOSSARIO ix

10

11 INTRODUZIONE L HTML ( Hyper Text Markup Language) è il linguaggio per creare delle pagine Web, cioè le pagine che sono visualizzate in Internet. Tutti noi abbiamo visualizzato un sito Web formato da testi, foto, animazioni e soprattutto link che permettono di navigare tra le altre pagine. L HTML è il codice che permette di creare ed inserire tutte questi oggetti nella pagina. I comandi HTML sono interpretati dal browser (il programma che permette di navigare sulla rete World Wide Web esplorandone i contenuti) che legge le istruzioni HTML, le esegue e visualizza a video quanto scritto. Netscape Navigator, Internet Explorer, Mosaic, sono tutti browser. L HTML non è un vero e proprio linguaggio di programmazione dato che non possiede i comandi tipici di questi linguaggi: è comunque un linguaggio che permette all utente di acquisire le qualità di base di un buon programmatore: l ordine, la precisione e la chiarezza nella scrittura del codice. Per la scrittura del codice, in questo manuale, si fa uso di un normale editor di testi, anche se i più recenti tra i wordprocessor dispongono di funzioni di traduzione automatica dal proprio formato a quello HTML ed esistono dei programmi che agevolano la scrittura del software. Si è voluto di proposito evitare queste agevolazioni per due motivi. Il primo è un motivo di spesa: il codice può essere scritto con un qualunque editor di testi (nel manuale si usa il Blocco Note di Windows) non serve acquistare un software specifico. Inoltre si possono ottenere degli ottimi risultati anche con hardware obsoleti: le possibilità di questo codice rimangono le stesse sia con computer tipo Pentium 1 che con gli ultimi modelli (c è solo qualche differenza di prestazione). Il secondo motivo è puramente didattico: utilizzando un normale editor di testi per il codice si favorisce la precisione e la correttezza nella scrittura. Questo manuale non ha la pretesa di insegnare tutte le istruzioni l HTML: sono illustrati i comandi fondamentali e quelli didatticamente validi. Esistono dei manuali più tecnici se si vorranno approfondire gli argomenti. 11

12

13 UNA PRIMA PAGINA HTML Per poter scrivere il codice HTML si deve avere a disposizione una pagina web. È possibile utilizzare la pagina iniziale del vostro browser. Infatti quando aprite il programma per navigare in internet inizialmente appare la home page: in figura la home page è il motore di ricerca Google ( e il browser è Internet Explorer. Salviamo questa pagina per utilizzarla per le nostre prove: dal menu File scegliere la voce Salva con nome. 13

14 14 Capitolo 1 Salvate il file nella cartella che preferite, con tipo Pagina Web, completa (*.htm, *.html) e con nome pagina di prova. Adesso abbiamo a disposizione una pagina web da utilizzare per scrivere il codice. Nota: quando si salva una pagina web dal browser, si crea un documento HTML e una cartella con nome nome del documento_file. Questa cartella contiene i file delle immagini, filmati, suoni presenti nella pagina salvata. È una questione di ordine: è buona regola di programmazione tenere tutti i file che riguardano gli oggetti di una pagina web in una stessa cartella. In alternativa, se si ha a disposizione il programma Microsoft Word si può creare una pagina web in questo modo: 1. aprire Word 2. salvare il file con nome a piacere e tipo Pagina web 3. Uscire da Word. Il file viene così salvato in formato HTML. Una volta creato il documento su cui fare le prove lo si può aprire con un doppio clic: dato che sono pagine internet vengono aperte con Internet Explorer (o altro browser). Apriamo ad esempio la pagina di Google Questa è a tutti gli effetti una pagina web ed è quindi definita tramite il codice HTML. Per visualizzare il codice basta fare un clic con il tasto destro del mouse in una zona vuota della pagina: dal menu che appare scegliere la voce HTML. In alternativa scegliere dal menu Visualizza la voce HTML. Si apre il programma Blocco note (il più semplice editor di testo) con il codice.

15 Una prima pagina HTML 15 Ovviamente non si capisce nulla: la pagina web è molto particolare e non abbiamo la pretesa di arrivare a un tale livello di complessità. Possiamo comunque utilizzare la pagina web per scrivere il nostro codice: per prima cosa ripuliamo la pagina: dal menu Modifica (del Blocco note) scegliere la voce Seleziona tutto; premere il tasto CANC per cancellare tutto. La pagina del Blocco note ora è completamente vuota; chiudiamo il Blocco note salvando le modifiche; aggiorniamo, con il pulsante Aggiorna ( ) o in alternativa il tasto funzione F5, la pagina di Google. Dato che abbiamo cancellato tutto il codice che la definisce appare completamente vuota. Adesso abbiamo a disposizione una pagina web dove fare le prove con il codice HTML. Se si apre la pagina web creata con Word i passaggi sono identici. ELEMENTI DI BASE DEL LINGUAGGIO HTML Abbiamo detto che HTML non è un vero e proprio linguaggio di programmazione, o almeno non quello che si pensa quando si parla di programmazione. HTML è molto più semplicemente un insieme di istruzioni: queste istruzioni prendono il nome di Tag, che il browser legge in maniera sequenziale, dall'alto verso il basso, da sinistra verso destra; esattamente come noi leggiamo un testo. Le istruzioni HTML, i tag, sono sempre rinchiusi fra parentesi angolari: <,>. Quindi una tipica istruzione HTML ha questo aspetto: <Istruzione> Quasi tutti i tag dell HTML sono a coppie: c è un tag di apertura, che indica dove inizia l istruzione e il rispettivo tag di chiusura che indica dove finisce: il tag di chiusura è identico a quello di apertura ma è preceduto da una barra retroversa. Quindi i tag sono scritti in questo modo: <Istruzione> Tag di apertura. </Istruzione> Tag di chiusura Nel Tag di apertura sono definite le varie opzioni che può avere l istruzione. Nota. Il linguaggio HTML non fa distinzione tra lettere maiuscole o minuscole quindi è indifferente scrivere il codice in maiuscolo o in minuscolo.

16 16 Capitolo 1 IL TAG <HTML>...</HTML> Il primo di tutti i tag è l'istruzione <HTML>: questa istruzione viene scritta all inizio del codice ed indica che tutto quanto segue è scritto in HTML. Come detto in precedenza, questo tag è abbinato al suo corrispondente tag di chiusura </HTML>, che deve essere scritto alla fine del documento HTML. <html> altro codice HTML </html> Attenzione alla scrittura!! Dato che per scrivere il codice HTML utilizziamo un semplicissimo editor di testi, non abbiamo alcun aiuto o messaggio se il codice è sbagliato Un classico errore è quello di scrivere il tag di chiusura in questo modo <\HTML>, cioè con l altro tipo di barra In questi casi il Browser non è in grado di comprendere l'istruzione, ignora questo tag e quindi la pagina web non verrà visualizzata nel modo desiderato. Anche se abbiamo introdotto una sola istruzione vediamo subito un primo esempio di codice HTML. Aprite la pagina web che avete creato con un doppio clic sulla sua icona: se avete seguito le istruzioni precedenti dovrebbe aprirsi il vostro browser visualizzando una pagina web vuota. Fate un clic con il tasto destro in un punto qualunque della pagina e scegliete il comando HTML (o dal menu Visualizza scegliere il comando HTML). Appare il Blocco note. Scrivete le seguenti istruzioni <HTML> Ciao a tutti </HTML> Chiudete il Blocco note salvando le modifiche. Nella finestra del browser premete il pulsante Aggiorna ( ) o in alternativa il tasto F5. Compare nella pagina web l testo che avete scritto tra i tag <HTML> </HTML>. LA STRUTTURA DI UNA PAGINA HTML Per scrivere una pagina HTML si segue un ordine ben preciso. Innanzitutto abbiamo detto che all inizio ci deve essere il tag <HTML> e alla fine il tag </HTML>.

17 Una prima pagina HTML 17 Tra questi due tag si scrive il resto del codice che normalmente suddiviso in due parti: 1. la prima parte è chiamata l intestazione del documento ed è delimitata dai tag <HEAD></HEAD>: all interno di questi tag si scrivono delle istruzioni che non vengono visualizzate, ma che forniscono al browser informazioni sul documento: queste istruzioni possono essere il titolo della pagina web, Meta comandi, richiami ai fogli di stile, codice di altri linguaggi (come ad esempio Javascript) che interagiscono con l HTML, ecc. In questo manuale vedremo soltanto come definire il titolo della pagina web. 2. La seconda parte è detta corpo del documento ed è delimitata dai tag <BODY> </BODY>: all interno di questi tag si scrivono le istruzioni che effettivamente saranno visualizzate nella pagina web. Quindi la struttura di documento HTML è simile alla seguente <HTML> <HEAD> </HEAD> <BODY> </BODY> </HTML> DEFINIRE IL TITOLO DI UN DOCUMENTO Tra i Tag <TITLE> </TITLE> si può scrivere il titolo da assegnare alla pagina web. La sintassi è quindi: <TITLE>Titolo della pagina web</title> Il titolo del documento appare in due posti: 1. nella barra del titolo 2. nel pulsante nella barra delle applicazioni. Vediamo un esempio: 1. aprite la pagina web che avete modificato in precedenza 2. visualizzate il codice HTML e scrivete il seguente codice

18 18 Capitolo 1 <HTML> <HEAD> <TITLE>saluti</TITLE> </HEAD> <BODY> Ciao a tutti </BODY> </HTML> al codice precedente è stato aggiunto il titolo della pagina web (all interno dei tag <HEAD> </HEAD>) e il testo da visualizzare è stato racchiuso tra i tag <BODY> </BODY> 3. chiudete il Blocco note salvando le modifiche 4. nella finestra del browser premete il pulsante Aggiorna ( ) o in alternativa il tasto F5. la pagina dovrebbe apparire come in figura. Titolo della pagina web IL CORPO DI UN DOCUMENTO Tra i tag <BODY></BODY> si scrive il codice della pagina vera e propria, o almeno quello che si vedrà a video. Quindi il testo, le immagini, i link e tutti gli elementi che forniscono il controllo e la formattazione della pagina stessa. All interno del tag di apertura <BODY> è possibile definire delle caratteristiche della pagina web. Ad esempio il colore di sfondo, il colore del testo, la distanza dai margini, ecc.

19 Una prima pagina HTML 19 Non esamineremo tutte le caratteristiche possibili, ma solo quelle che si considerano più interessanti e didatticamente valide. MODIFICARE IL COLORE DI SFONDO Per modificare il colore di sfondo della pagina HTML si deve inserire all interno del tag <BODY> l attributo BGCOLOR con il nome del colore. Quindi la sintassi è: <BODY BGCOLOR = NomeColore > I colori utilizzabili sono riportati in questa tabella. Aliceblue antiquewhite aqua aquamarine Azure beige bisque black Blanchedalmond blue blueviolet brown Burlywood cadetblue chartreuse chocolate Coral comflowerblue comsilk crimson Cyan darkblue darkcyan darkgoldenrod Darkgray darkgreen darkkhaki darkmagenta Darkolivegreen darkorange darkorchid darkred Darksalmon darkseagreen darkslateblue darkslategray Darkturquoise darkviolet deeppink deepskyblue Dimgray dodgerblue firebrick floralwhite Forestgreen fuchsia gainsboro ghostwhite Gold goldenrod gray green Greenyellow honeydew hotpink indianred Indingo khaki lavender lavenderblush Lawngreen lemonchiffon lightblue lightcoral Lightcyan lightgoldenrodyellow lightgreen lightgrey Lightpink lightsalmon lightseagreen lightskyblue Lightslategray lightsteelblue lightyellow lime Limegreen linen magenta maroon Mediumaquamarine mediumblue mediumorchid mediumpurple Mediumseagreen mediumslateblue mediumspringgreen mediumturquoise Mediumvioletred midnightblue mintcream mistyrose Moccasin navajowhite navy oldlace Olive olivedrab orangered orchid Palegoldenrod palegreen paleturquoise palevioletred Papayawhip peachpuff pink plum Powderblue purple red rosybrown Royalblue saddlebrown salmon sandybrown Seagreen seashell sienna silver Skyblue slateblue slategray snow Springgreen steelblue tan tesi Thistle tornato turquoise violet Wheat white whitesmoke yellow Yellowgreen

20 20 Capitolo 1 Quindi se modifichiamo il codice HTML della pagina web di prova, in questo modo <HTML> <HEAD> <TITLE>saluti</TITLE> </HEAD> <BODY BGCOLOR="GREEN"> Ciao a tutti </BODY> </HTML> La pagina web appare con sfondo verde. Nota. Per colorare lo sfondo della pagina di una tinta unita, il colore può essere espresso sia col nome inglese che con un codice numerico. Questo valore deve essere espresso in notazione esadecimale e secondo la notazione standard RGB (Red, Green, Blue). In pratica i colori vanno inseriti nella forma #RRGGBB, dove RR, GG e BB sono le quantità in sistema esadecimale (da 00 a FF) di rosso, verde e blu. Ad esempio l istruzione <BODY BGCOLOR="GREEN"> corrisponde a <BODY BGCOLOR="#006600"> In questo manuale utilizziamo la notazione per nome che è sicuramente più semplice. La notazione esadecimale ha come vantaggio di poter scegliere fra una tavolozza di ben 16 Milioni di colori. INSERIRE UNA IMMAGINE COME SFONDO Se al posto dell istruzione BGCOLOR si utilizza l istruzione BACKGROUND si può inserire una immagine come sfondo della pagina. Quindi potete avere come sfondo una foto scaricata da internet, una fotografia scattata con il cellulare o la macchina fotografica digitale, un disegno fatto al computer o caricato con lo scanner, ecc. Indipendentemente dalle dimensioni, l immagine verrà usata a riempimento di tutta la finestra del browser. La sintassi di questa istruzione è

21 Una prima pagina HTML 21 <BODY BACKGROUND = "posizione_immagine\nome_immagine.estensione_immagine" > Analizziamo in dettaglio questo codice: l istruzione BACKGROUND si scrive all interno del tag di apertura del body (come l istruzione BGCOLOR). Dopo l uguale è specificata l immagine da utilizzare. Ma come si indica al browser qual è l immagine da collocare sullo sfondo? Dobbiamo aprire una parentesi su come si identifica una immagine (e un qualunque file) in Windows. In generale, un file in Windows è identificato da: 1. il nome del file: è chiaramente il nome con cui il file è stato salvato nel Pc: quindi relazione gita, Luca Poli, testo da controllare, sono tutti esempi di nomi di file 2. la posizione del file: indica il percorso per trovare la cartella dove è memorizzato il file 3. l estensione del file: indica il tipo, il formato del file. Vediamo in dettaglio gli ultimi due punti. LA POSIZIONE DEL FILE Per posizione del file si intende il percorso (o path) per arrivare alla cartella dove è memorizzato il file. In Windows è possibile creare all interno del disco rigido (e anche nelle altre unità disco: il floppy disk, la usb pen ) delle cartelle: all interno di una cartella è possibile creare altre cartelle (dette sottocartelle) e così via. La sequenza di cartelle, partendo dal disco rigido, viene detto il percorso per giungere ad una determinata cartella. Come si scrive questo percorso? Per motivi storici il disco rigido è indicato con la sigla C:. Poi si deve scrivere la sequenza di cartelle e sottocartelle separate dal simbolo di barra rovesciata (\). Quindi se nel disco rigido si crea una cartella di nome matematica con all interno una cartella di nome algebra con all interno una cartella di nome polinomi il percorso è: C:\matematica\algebra\polinomi Per indicare il file esercizio contenuto nella cartella polinomi si scrive C:\matematica\algebra\polinomi\esercizio

22 22 Capitolo 1 L ESTENSIONE DEL FILE Quando si salva un file, di solito, si specifica il suo nome e la cartella dove vogliamo salvare. In realtà, durante questa operazione viene associato al file un altro valore: la sua estensione. Infatti il nome di un file è composto da due parti: 1. Il nome vero e proprio, assegnato dall'utente 2. l estensione del file (normalmente di tre caratteri) assegnata dal programma con cui il file è creato. L estensione di un file è, in pratica, la parte del nome che indica il tipo di file: un file di testo (in questo caso, l estensione può essere doc, txt, rtf, ecc.), un file grafico (bmp, gif, jpg, ecc.), un suono (wav, mid, ecc.) o altro. Si può fare un paragone tra l estensione del file e il titolo di studio che si pone in un biglietto da visita: ad esempio, Ing. Ronchesi o Dott. Filippi. Il titolo Ing. e Dott. servono per specificare la categoria della persona. Normalmente in Windows l estensione di un file non è visualizzata. Per visualizzare le estensioni selezionare il comando Strumenti\Opzioni cartella, come in figura. Appare la finestra Opzioni cartella.

23 Una prima pagina HTML 23 In questa finestra scegliere la scheda Visualizzazione. L opzione Nascondi le estensioni dei tipi di file conosciuti è la voce che abilita o disabilita la visualizzazione delle estensioni di un file. Normalmente questa opzione è attiva. Disattivate questa opzione, in modo da abilitare la visualizzazione delle estensioni e premete il pulsante OK per chiudere la finestra Opzioni cartella. Adesso l estensione dei file è visibile.

24 24 Capitolo 1 Come si vede in figura il nome del file è sempre separato dalla sua estensione da un punto. Per questo motivo, quando si deve dare un nome ad un file, il punto non può essere utilizzato. Per nascondere le estensioni basta riattivare l opzione Nascondi le estensioni dei tipi di file conosciuti. Alla fine del capitolo è presente una tabella delle principali estensioni e dei programmi associati. Quindi, in conclusione, indicare al browser dov è una immagine (e in generale un file) è come identificare una persona, specificando dove abita (il path), il suo nome (nome del file) e il suo titolo (l estensione). Vediamo un esempio: nella pagina web di prova si vuole inserire come sfondo l immagine chiamata Caffè (uno degli sfondi del Desktop in XP), con estensione bmp, memorizzata nella cartella Windows del disco rigido. Il codice HTML corrispondente è: <HTML> <HEAD> <TITLE>saluti</TITLE> </HEAD> <BODY BACKGROUND="C:\windows\Caffè.bmp"> Ciao a tutti </BODY> </HTML> La pagina web appare in questo modo

25 Una prima pagina HTML 25 È molto importante capire bene questi concetti, soprattutto il percorso e l estensione di un file. Infatti tutto questo sarà utilizzato quando si deve inserire in una pagina web immagini, filmati, suoni e per creare i link. Nota. Per semplificare la scrittura del codice è una buona norma di programmazione memorizzare le immagini (assieme ai suoni, ai filmati ) utilizzate in una pagina web in una cartella con lo stesso nome della pagina web. Quindi se si ha una pagina web chiamata W la matematica si crea una cartella con lo stesso nome (o ad esempio W la matematica_file ) che contiene tutti gli oggetti che inseriamo nella pagina web. Se si memorizza questa cartella nella stessa cartella dove si trova la pagina web non serve specificare l intero percorso ma basta indicare il nome della cartella. Ad esempio se si ha una pagina web chiamata W la matematica con la sua cartella di immagini W la matematica_file con all interno una immagine matematica.tiff da usare come sfondo, l istruzione è <BODY BACKGROUND="W la matematica_file\w la matematica.tiff"> Nota. Con versioni non recenti di Windows o del browser, alcuni tipi di immagine potrebbero non essere visualizzate; sicuramente sono visibili le immagini con estensione di tipo.gif e.jpg. Nota. Nei computer con sistema operativo Windows XP esiste la cartella Immagini campione (all interno della cartella Immagini nella cartella Documenti) che contiene qualche immagine d esempio.

26 26 Capitolo 1 ALCUNE ESTENSIONI DEI FILE Si riporta un elenco delle principali estensioni dei file, con il relativo programma associato: per la miriade di programmi esistenti, non è esaustivo. Estensione: Programma: RTF Estensione relativa ad un file di testo, associata solitamente al programma Wordpad. DOC Estensione relativa ad un file di testo, associata solitamente al programma Microsoft Word. TXT Estensione relativa ad un file di testo, associata solitamente al programma Blocco note. XLS Estensione relativa ad un file di tipo foglio elettronico, associata solitamente al programma Microsoft Excel. PPT Estensione relativa ad un file di tipo presentazione, associata solitamente al programma Microsoft PowerPoint. TMP Estensione relativa ad un file di tipo temporaneo, che si crea quando avviene una interruzione accidentale di un programma. ZIP Estensione relativa ad un file di tipo compresso, associata solitamente al programma WinZip. BMP Estensione relativa ad un file di tipo grafico, associata solitamente al programma Microsoft Paint. HTML, HTM Estensione relativa ad un file di tipo pagina di Internet, associata solitamente al programma Internet Explorer. EXE Estensione relativa ad un file di tipo eseguibile: questi file sono veri e propri programmi. MDB Estensione relativa ad un file di tipo database, associata solitamente al programma Microsoft Access. GIF Estensione relativa ad un file di tipo grafico: può essere associata a diversi programmi di grafica. Salva le immagini con 256 colori. WAV, MID, Estensione relativa a file musicali. L estensione WMA è associata ai file MIDI, WMA, dei cd musicali, l estensione MID o MIDI a file sonori di dimensioni ridotte MP3, CDA TIFF Estensione relativa ad un file di tipo grafico: può essere associata a diversi programmi di grafica. La qualità e dimensione dell immagine elevata JPG Estensione relativa ad un file di tipo grafico: è il formato grafico più diffuso nel web. Salva le immagini con 16 milioni di colori; essendo molto compresso, richiede più tempo per essere visualizzato. AVI acronimo di Audio Video Interleaved ( (Audio e Video Inframezzati). L'AVI è un formato contenente video/audio compressi. I file AVI sono in circolazione fin dai tempi di Windows 3.1: non si tratta di una scoperta recente e, probabilmente, si tratta del formato più diffuso nel settore. WMV È il formato per antonomasia dei formati video in generale e definisce lo standard per il video digitale MPEG È il formato sviluppato dalla Microsoft per la riproduzione e la compressione video. MOV Formato video digitale della Apple che può essere visualizzato con il programma freeware QuickTime.

27 Una prima pagina HTML 27 DELLE IMMAGINI PARTICOLARI: LE GIF ANIMATE Si può rendere una pagina web particolare inserendo un particolare tipo di immagini: le GIF animate. Le GIF animate sono delle immagini che contengono parecchie immagini all' interno. Quando un browser legge una GIF animata, legge tutte le immagini contenute al suo interno. È lo stesso principio dei film: parecchie immagini mostrate rapidamente una dopo l'altra. L' occhio umano conserva ogni immagine per un decimo di secondo, per questo durante un' animazione non si vedono le pause tra una immagine e l altra. Alcune GIF animate sono davvero di alto livello e sembrano dei piccoli cartoni animati. Ci sono programmi adatti a costruire delle GIF animate, come GIF Construction Set, GIF Animator, GIF Builder ed altri, ma è molto più semplice cercarle in internet e scaricarle nel proprio computer. Esistono moltissimi siti dove si possono recuperare GIF animate scaricabili gratuitamente e divisi per categoria (animali, piante, persone, scuola ). Basta cercare GIF animate con un qualunque motore di ricerca In figura vediamo alcune GIF animate di animali presenti nel sito della Microsoft. MODIFICARE IL COLORE DEL TESTO Si può cambiare il colore del testo della sezione BODY inserendo all interno del tag <BODY> l attributo TEXT e il nome del colore. La sintassi è: <BODY TEXT = NomeColore >

28 28 Capitolo 1 I colori utilizzabili sono gli stessi indicati nella tabella per l attributo BGCOLOR. Quindi se si vuole una pagina con sfondo rosso e scritte bianche l istruzione è: <BODY BGCOLOR="RED" TEXT = WHITE > Fate attenzione a non assegnare colori assomiglianti allo sfondo, scelta che renderebbe il testo quasi invisibile. MODIFICARE I MARGINI DEL TESTO TOPMARGIN, BOTTOMMARGIN, LEFTMARGIN, RIGHTMARGIN sono i quattro attributi per definire la distanza in pixel (i pixel sono i piccoli puntini luminosi e colorati che compongono lo schermo del computer) del testo rispettivamente da: margine superiore, margine inferiore, margine sinistro e margine destro. Un margine uguale a zero farà si che il testo inizi praticamente sul bordo della finestra del browser. Alcuni esempi: <BODY TOPMARGIN="30"> <BODY BOTTOMMARGIN="30"> <BODY LEFTMARGIN="30"> <BODY RIGHTMARGIN="30"> Riassumendo, questa potrebbe essere una definizione del corpo (body), di una pagina che abbia uno sfondo rosso come riempimento, con un testo di colore argento, il tutto con una distanza dai quattro margini di 50 pixel. <BODY BGCOLOR="RED" TEXT=" SILVER" TOPMARGIN="50" BOTTOMMARGIN="50" LEFTMARGIN="50" RIGHTMARGIN="50" > L IMPORTANZA DI COMMENTARE IL CODICE È buona norma di programmazione commentare il codice, ovvero aggiungere porzioni di codice che non verranno interpretate dal browser come comandi HTML e non verranno stampate a video. Sono solo delle note esplicative per il programmatore che può scrivere come promemoria il come e il perché del codice e la tecnica che ha usato per ottenere quel risultato. Il TAG  consente di lasciare un testo di commento all'interno del listato HTML senza che questo possa influire o essere visualizzato dal browser. Esempio:

29 Una prima pagina HTML 29  ESERCIZI 1. Crea una pagina HTML che abbia come sfondo il colore verde, come colore del testo il giallo e margine sinistro a 40 pixel. Inserite all interno della parte <BODY> una frase a vostro piacere. Inserite un titolo a vostro piacere. SOLUZIONE <HTML> <HEAD> <TITLE>L INFORMATICA CI RENDE FELICI</TITLE> </HEAD> <BODY BGCOLOR="GREEN" TEXT="YELLOW" LEFTMARGIN="40" > QUESTO TESTO È DI COLORE VERDE SU SFONDO GIALLO CON MARGINE SINISTRO DI 40 PIXEL. </BODY> </HTML> 2. Crea una pagina HTML che abbia come sfondo il colore blu, come colore del testo rosso margine superiore 50 pixel e margine sinistro a 40 pixel. Inserite all interno della parte <BODY> una frase a Vs piacere. SOLUZIONE <HTML> <HEAD> </HEAD> <BODY BGCOLOR="BLUE" TEXT=""RED" LEFTMARGIN="40" TOPMARGIN="50"> QUESTO TESTO È DI COLORE ROSSO SU SFONDO BLU CON MARGINE SINISTRO DI 40 PIXEL E MARGINE SUPERIORE DI 50 PIXEL. </BODY> </HTML> 3. Crea una pagina HTML che abbia: 1. Come titolo la frase Prima prova

30 30 Capitolo 1 2. Il corpo abbia il testo di colore bianco e lo sfondo di colore blu 3. Nel corpo devi inserire il nome e cognome di 5 tuoi amici 4. Nel corpo devi inserire un commento che contiene il tuo indirizzo 5. Nella parte HEAD devi inserire un commento a piacere 6. Dopo il tag <HTML> un commento a piacere SOLUZIONE <HTML>  <HEAD> <TITLE >PRIMA PROVA</TITLE>  </HEAD> <BODY BGCOLOR = BLUE TEXT=WHITE> NOME COGNOME NOME COGNOME NOME COGNOME NOME COGNOME NOME COGNOME  </BODY> </HTML>

31 FORMATTARE I TESTI IN MODO PARTICOLARE COME ANDARE A CAPO IN UNA PAGINA WEB Se avete provato l ultimo esercizio del capitolo precedente avrete notato che i nomi e cognomi degli amici non vanno a capo, ma sono tutti sulla stessa riga, in questo modo: NOME COGNOME NOME COGNOME NOME COGNOME NOME COGNOME NOME COGNOME Il tag <BR> specifica quando un testo deve andare a capo. Scrivere il tag <BR> è equivalente a premere il tasto Invio: più <BR> consecutivi equivalgono a più righe saltate. Questo tag non ha un corrispondente tag di chiusura. ALLINEAMENTO DEL TESTO I tag <DIV ALIGN> </DIV ALIGN> permettono di allineare tutto il testo compreso tra questi tag a sinistra (LEFT), al centro (CENTER) o a destra (RIGHT). Basta specificare dopo l attributo ALIGN il tipo di allineamento desiderato. Ad esempio il codice: <DIV ALIGN="CENTER"> Questa riga di testo ed anche eventuali altri elementi,se presenti, <BR> subiranno in questo caso l'allineamento centrato. </DIV> Fornisce questo risultato Questa riga di testo ed anche eventuali altri elementi,se presenti, subiranno in questo caso l'allineamento centrato. CAMBIARE COLORE, GRANDEZZA E FONT DI UN TESTO Abbiamo visto nel capitolo precedente che l attributo TEXT inserito nel tag di apertura del BODY permette di specificare il colore di tutto il testo presente nel BODY. Il testo appare nella pagina web con il tipo di carattere (font) e la dimensione impostata per il browser. 31

32 32 Capitolo II Se si vuole ottenere dei testi con tipo di carattere, dimensioni e colori diversi tra loro si possono utilizzare i tag <FONT> </FONT>. Gli attributi che si associano a questi tag sono: FACE = nome del carattere. L'attributo FACE imposta il tipo di carattere (font): i tipi di caratteri sono ad esempio Times new roman, Arial, Courier, ecc. Il font deve essere già installato nel computer dell'utente. COLOR= nome in inglese del colore. L attributo COLOR imposta il colore del carattere. I nomi dei colori sono quelli della tabella precedente. SIZE = n, con n un numero compreso fra 1 e 7. L'attributo SIZE imposta la dimensione del carattere Gli attributi possono essere utilizzati contemporaneamente. Ad esempio con il codice: <FONT FACE="ARIAL" COLOR="GREEN" SIZE="3"> Testo con font Arial di colore verde e dimensione 3 </FONT> Si ha il risultato Testo con font Arial di colore verde e dimensione 3 Il testo che non è compreso tra i tag <FONT> </FONT> mantiene le eventuali impostazioni di colore definite dall attributo TEXT nel tag di apertura del BODY. ESERCIZI Crea una pagina HTML in modo che il testo sia tutto al centro, ogni parola vada a capo, con carattere di dimensione, tipo e colore diverso. Alla fine inserite un commento a Vostro piacere. Ad esempio: NON TUTTE LE CIAMBELLE RIESCONO CON IL BUCO

33 Formattare i testi in modo particolare 33 SOLUZIONE <HTML> <HEAD> <TITLE>ciambelle</TITLE> </HEAD> <BODY> <DIV ALIGN = CENTER> <FONT FACE = "Verdana" COLOR="green" size= "1" >NON</FONT><BR> <FONT FACE="Comic Sans MS" COLOR="red" SIZE="7">TUTTE</FONT><BR> <FONT FACE = "Times new roman" COLOR="blue" size= "3" >LE</FONT><BR> <FONT FACE="arial" COLOR="red" SIZE="7">CIAMBELLE</FONT><BR> <FONT FACE = "Verdana" COLOR="green" size= "2" >RIESCONO</FONT><BR> <FONT FACE="Comic Sans MS" COLOR="red" SIZE="7">CON</FONT><BR> <FONT FACE = "Times new roman" COLOR="blue" size= "6" >IL</FONT><BR> <FONT FACE="arial" COLOR="BLACK" SIZE="5">BUCO</FONT><BR> </DIV>  </BODY> </HTML> SCRIVERE IN GRASSETTO, CORSIVO, SOTTOLINEATO È possibile scrivere in una pagina web un testo in grassetto, corsivo o sottolineato. In particolare: Tag <B>...</B>: il blocco di testo scritto tra questi tag appare in grassetto (bold). Ad esempio con il codice: Studio <B>Informatica</B> e <B>matematica</B> e sono felice appare Studio Informatica e matematica e sono felice

34 34 Capitolo II Tag <I>...</I>: il blocco di testo scritto tra questi tag appare in corsivo (italic). Ad esempio con il codice: Studio <I>Informatica</I> e <I>matematica</I> e sono felice appare Studio Informatica e matematica e sono felice Tag <U>...</U>: il blocco di testo scritto tra questi tag appare sottolineato (underline). Ad esempio con il codice: Studio <U>Informatica</U> e <U>matematica</U> e sono felice appare: Studio Informatica e matematica e sono felice Questi tag possono essere combinati tra loro: per esempio posso scrivere in modo marcato, inclinato e sottolineato. Ad esempio con il codice: Studio <I><U><B> Informatica </I></U></B> e <I><U><B> matematica </I></U></B> e sono felice appare Studio Informatica e matematica e sono felice ESERCIZI Crea una pagina HTML che abbia come sfondo il colore blu, il carattere Times con dimensione 12, allineato a sinistra. Inserite all interno della parte <BODY> gli appositi tag, in modo che l aspetto sia simile al seguente. testo in grassetto testo in corsivo testo sottolineato testo in grassetto corsivo sottolineato SOLUZIONE

35 Formattare i testi in modo particolare 35 <HTML> <HEAD> <Title>L'informatica ci rende liberi</title> </HEAD> <body bgcolor="blue" > <DIV align="left"> <FONT FACE="Times" SIZE="12"> <b>testo in grassetto</b> <br> <i>testo in corsivo</i> <br> <u>testo sottolineato</u> <br> <b><i><u>testo in grassetto corsivo sottolineato</b></i></u> </font> </div> </BODY> </HTML> UN TESTO SCORREVOLE Il tag <MARQUEE>...</MARQUEE> serve per creare un testo che scorre sullo schermo. Questo comando funziona solo se si utilizza come browser Internet Explorer. Ci sono molti attributi per questo comando: ne vediamo solo alcuni. BEHAVIOR Permette di scegliere il tipo di spostamento del testo, in uno dei tre modi possibili SCROLL: è l impostazione tipica. Inizia lo spostamento e ricomincia ogni volta che il testo è sparito dalla finestra. SLIDE: permette lo scorrimento una sola volta prima di trasformarsi in testo fisso. ALTERNATE: una volta raggiunto il margine opposto questo rimbalza continuando lo spostamento nel lato opposto. Ad esempio: <MARQUEE BEHAVIOR="ALTERNATE"> Frase che scorre </MARQUEE>

36 36 Capitolo II BGCOLOR Questo attributo specifica il colore di sfondo, con il nome del colore in lingua inglese. Ad esempio: <MARQUEE BGCOLOR="green"> Frase che scorre </MARQUEE>  DIRECTION Questo attributo specifica la direzione di scorrimento: per default è destra verso sinistra. È possibile invertire il senso adoperando RIGHT. Ad esempio: <MARQUEE DIRECTION="RIGHT"> Frase che scorre </MARQUEE>  HSPACE Si adopera questo attributo per determinare quanto spazio (in numero di pixels) deve rimanere libero ai due lati della scritta. Ad esempio: <MARQUEE HSPACE="200"> Frase che scorre </MARQUEE>  LOOP Questo attributo specifica il numero di volte che il testo scorre: senza questo attributo il testo gira per infinite volte. Altrimenti, una volta eseguito il numero di cicli impostati con loop, il testo scomparirà lasciando lo spazio vuoto. Ad esempio: <MARQUEE LOOP="3"> Frase che scorre </MARQUEE>  WIDTH Questo attributo specifica quanto è largo lo spazio per lo scorrimento del testo: è espresso in pixel o come percentuale della larghezza dello schermo. Ad esempio: <MARQUEE WIDTH="70"> Frase che scorre </MARQUEE>  <MARQUEE WIDTH="50%"> Frase che scorre </MARQUEE>

37 Formattare i testi in modo particolare 37 Chiaramente tutti questi attributi possono essere associati assieme. Ad esempio: <MARQUEE BEHAVIOR="ALTERNATE" BGCOLOR="red" DIRECTION="RIGHT" LOOP="3"> Frase che scorre! </MARQUEE> <!-- il testo rimbalza, ha uno sfondo rosso, scorre da sinistra verso destra per tre volte - -> TITOLI Con i tag <Hx>...</Hx> (x rappresenta un numero da 1 a 6) è possibile scrivere il testo tra i tag con sei tipi di titolo che dimensionano i caratteri. Il più alto livello è <H1>. Per gli altri livelli diminuisce man mano la grandezza del carattere e lo spazio libero lasciato sopra e sotto. Di seguito sono riportate le caratteristiche generale dei vari livelli di titolo. <H1>...</H1> Grassetto, carattere molto grande e centrato, una o due righe vuote sopra e sotto; <H2>...</H2> Grassetto, carattere grande a sinistra, una o due righe vuote sopra e sotto; <H3>...</H3> Corsivo, carattere grande leggermente rientrato sul margine sinistro, una o due righe vuote sopra e sotto; <H4>...</H4> Grassetto, carattere normale, rientro maggiore rispetto a H3, una riga vuota sopra e sotto; <H5>...</H5> Corsivo, carattere normale, rientro normale come H4, una riga vuota sopra; <H6>...</H6> Grassetto, rientro come testo normale ma più di H5, una riga vuota sopra. I titoli possono avere come attributo ALIGN (visto in precedenza per il tag <DIV>) che permette di allineare il testo nei modi: CENTER, LEFT, RIGHT. Ad esempio: <H1 ALIGN="CENTER">TESTO AL CENTRO</H1> INSERIRE UNA RIGA SEPARATRICE Il Tag <HR> (abbreviazione di Horizontal Rules) visualizza una linea orizzontale utilizzata per creare delle divisioni nella pagina web. Normalmente questa linea è ombreggiata e in rilievo. Questo tag, come <BR>, non ha un

38 38 Capitolo II corrispondente tag di chiusura. Gli attributi che si possono associare a questo comando sono: ALIGN Questo attributo, già stato visto per il tag <DIV>, specifica se la barra deve stare a sinistra (LEFT), al centro (CENTER) o a destra (RIGHT). Basta specificare dopo l attributo ALIGN il tipo di allineamento desiderato. Ad esempio: <HR ALIGN="center">  COLOR L attributo COLOR, già visto per il tag <FONT>, imposta il colore della barra. I nomi dei colori possibili sono quelli indicati nella tabella precedente. Ad esempio: <HR COLOR="red">  NOSHADE La barra appare senza ombreggiatura, praticamente una barra solida. Ad esempio: <HR NOSHADE>  <HR WIDTH="50%">

39 Formattare i testi in modo particolare 39 Chiaramente tutti questi attributi possono essere associati assieme. Ad esempio: <HR color = "RED" WIDTH = "50%" size = "15">  APICE E PEDICE Il testo racchiuso tra i tag <SUB> </SUB> appare in pedice. Ad esempio: H<SUB>2</SUB>O diventa H 2 O Il testo racchiuso tra i tag <SUP> </SUP> appare in apice. Ad esempio: X<SUP>2</SUP> diventa X 2 CREARE UNO SPAZIO Per creare uno spazio, in modo da spostare in avanti delle parole dall inizio della riga, si deve usare il codice &nbsp (in minuscolo). Ad esempio se scriviamo il codice: &nbsp &nbsp &nbsp Testo con tre spazi iniziali nella pagina web il testo appare spostato di tre spazi avanti rispetto al margine sinistro della pagina, in questo modo: Testo con tre spazi iniziali ESERCIZI 1. Crea una pagina HTML che 1. Abbia come sfondo il colore blu 2. ci sia una riga di colore rosso di spessore 15 pixels. 3. sotto la riga ci sia una frase a Vostro piacere tale che: a. abbia carattere Arial di grandezza 2 di colore verde b. sia allineata al centro c. il testo scorra da destra verso sinistra per tre volte rimbalzando e solo sul 70% della pagina.

40 40 Capitolo II SOLUZIONE <HTML> <HEAD> </HEAD> <BODY BGCOLOR="BLUE" > <HR COLOR = "RED" SIZE = "15"> <DIV ALIGN="CENTER"> <FONT FACE="ARIAL" SIZE="2" COLOR = GREEN > <MARQUEE BEHAVIOR="ALTERNATE" WIDTH="70%" DIRECTION="RIGHT" LOOP="3"> QUESTO TESTO HA CARATTERE ARIAL, GRANDEZZA 2, COLORE VERDE, ALLINEATO AL CENTRO E SCORREVOLE </MARQUEE> </FONT> </DIV> </BODY> </HTML> 2. Crea una pagina HTML con delle equazioni di vario grado, in questo modo a. Ci sia una equazione di 2 grado (ad esempio x 2 + 3x + 2 = 0) che scorra da sinistra verso destra per 2 volte con il testo di colore blu e carattere arial b. Ci sia una equazione di 3 grado (ad esempio x 3 + x 2 + x + 1 = 0) che scorra da destra verso sinistra per 3 volte con il testo di colore rosso e carattere courier c. Ci sia una equazione di 4 grado (ad esempio x 4-1 = 0) che scorra da sinistra verso destra per 4 volte rimbalzando con il testo di colore verde e carattere times Le equazioni devono essere una sotto l altra, separate da riga orizzontali centrate su metà pagina. L aspetto della pagina web deve essere simile al seguente: x 2 +3x + 2 = 0 x 3 +x 2 +x + 1 = 0 x 4-1 = 0

41 Formattare i testi in modo particolare 41 SOLUZIONE <HTML> <HEAD></HEAD> <BODY> <FONT FACE="ARIAL" COLOR = BLUE > <MARQUEE LOOP="2"> x<sup>2</sup>+3x + 2 = 0 </MARQUEE> </FONT> <DIV ALIGN="CENTER"> <HR COLOR = "GOLD" WIDTH="50%"> </DIV> <FONT FACE="COURIER NEW" COLOR = RED > <MARQUEE DIRECTION="RIGHT" LOOP="3"> x<sup>3</sup>+x<sup>2</sup>+x + 1 = 0 </MARQUEE> </FONT> <DIV ALIGN="CENTER"> <HR COLOR = "GOLD" WIDTH="50%"> </DIV> <FONT FACE="TIMES NEW ROMAN" COLOR = GREEN > <MARQUEE BEHAVIOR="ALTERNATE" LOOP="4"> x<sup>4</sup>-1 = 0 </MARQUEE> </FONT> <DIV ALIGN="CENTER"> <HR COLOR = "GOLD" WIDTH="50%"> </DIV> </BODY> </HTML> 3. Crea una pagina HTML che abbia come sfondo il colore verde e margine sinistro a 40 pixel. Inserite all interno della parte <BODY> gli appositi comandi per i livelli di titolo, in modo che l aspetto sia simile al seguente. Ogni frase deve avere un colore diverso. Frase a piacere Frase a piacere Frase a piacere

42 42 Capitolo II Frase a piacere Frase a piacere Frase a piacere SOLUZIONE <HTML> <HEAD> </HEAD> <BODY BGCOLOR="GREEN" LEFTMARGIN="40" > <DIV ALIGN="CENTER"> <H1><FONT COLOR = "BLUE">Frase a piacere</font></h1> <HR> <H2><FONT COLOR = "RED">Frase a piacere</font></h2> <HR> <H3><FONT COLOR = "AZURE"Frase a piacere</font></h3> <HR> <H4><FONT COLOR = "AQUAMARINE">Frase a piacere </FONT></H4> <HR> <H5><FONT COLOR = "LIME">Frase a piacere</font></h5> <HR> <H6><FONT COLOR = "BLACK"> Frase a piacere</font></h6> </DIV> </BODY> </HTML> I PARAGRAFI Nella grammatica italiana per paragrafo si intende tutto il testo compreso tra due invio a capo. Quindi con il tasto Invio si inizia un nuovo paragrafo. In HTML per specificare che parte di un testo è un paragrafo, lo si racchiude tra i tag <P>...</P>. Il tag <P> ha come attributo ALIGN, già visto in precedenza, che permette di allineare il testo in quattro possibili modi: CENTER, LEFT, RIGHT, JUSTIFY, rispettivamente per: Centrato, a sinistra, a destra, giustificato. Ad esempio, con il codice: <P ALIGN="LEFT"> paragrafo allineato a sinistra.</p>

43 Formattare i testi in modo particolare 43 si ottiene: paragrafo allineato a sinistra. Con il codice: <P ALIGN="RIGHT"> paragrafo allineato a destra.</p> si ottiene: paragrafo allineato a destra. Con il codice: <P ALIGN="CENTER"> paragrafo allineato al centro.</p> si ottiene: paragrafo allineato al centro. Con il codice: <P ALIGN="JUSTIFY"> paragrafo giustificato.</p> si ottiene: paragrafo giustificato ESERCIZI 1. Crea una pagina HTML che abbia come sfondo il colore azzurro. Inserite all interno della parte <BODY> gli appositi tag, in modo che appaiano tre paragrafi uno allineato a sinistra, uno a destra e uno al centro. L aspetto sia simile al seguente. Pagina web: Paragrafo a sinistra blu. Paragrafo centrato verde. Paragrafo a destra rosso.

44 44 Capitolo II SOLUZIONE <HTML> <HEAD> </HEAD> <BODY BGCOLOR="AZURE" > <P ALIGN="LEFT"><FONT COLOR="BLUE">Paragrafo a sinistra blu.</font></p> <P ALIGN="RIGHT"><FONT COLOR="RED">Paragrafo a destra rosso.</font></p> <P ALIGN="CENTER"><FONT COLOR="GREEN">Paragrafo centrato verde. </FONT></P> </BODY> </HTML>

45 IMMAGINI, SUONI E FILMATI INSERIRE UNA IMMAGINE Nel Capitolo 1 abbiamo parlato dei formati e delle dimensioni delle immagini: abbiamo visto come inserire una immagine come sfondo della pagina web. In realtà è possibile inserire una immagine in un qualunque punto della pagina web, esattamente come un testo: quindi è possibile creare una pagina web piena di immagini. Comunque si deve sempre tenere d occhio la pesantezza della pagina: sicuramente un'immagine ravviva una pagina e la rende più interessante. Chiunque abbia provato a navigare in Internet, avrà comunque notato che caricare le immagini costa tempo. Per questo è utile usare le immagini con parsimonia, risparmiando, se possibile, sulla dimensione e facendo attenzione al formato: diciamo che.gif e.jpg sono quelli più adatti. Vediamo quindi la sintassi dell istruzione per inserire le immagini e i suoi attributi principali L istruzione per inserire una immagine ha la seguente sintassi: <IMG SRC = "posizione_immagine\nome_immagine.estensione_immagine" > Questa istruzione è molto simile all istruzione <BODY BACKGROUND> che permette di utilizzare una immagine come sfondo. Anche in questo caso si deve specificare: 1. posizione_immagine: il percorso per individuare la cartella dove è memorizzata l immagine; 2. nome_immagine: il nome dell immagine; 3. estensione_immagine: l estensione, cioè il formato dell immagine. Anche in questo caso vale il suggerimento di creare una cartella, con lo stesso nome della pagina web e nella stessa posizione, dove memorizzare le immagini (assieme ai suoni, ai filmati ) utilizzate in una pagina web. Quindi per inserire una immagine chiamata equazione.jpg in una pagina web chiamata W la matematica, con la sua cartella di immagini W la matematica_file, l istruzione è < IMG SRC = "W la matematica_file\equazione.jpg"> Vediamo alcuni possibili attributi dell istruzione <IMG SRC>. 45

46 46 Capitolo III WIDTH HEIGHT L'attributo WIDTH, così come l'attributo HEIGHT, sono tra gli attributi più importanti dato che sono adoperati per specificare le dimensioni orizzontale e verticale dell'immagine. Quindi permettono di regolare la dimensione dell immagine nella pagina web con precisione, in modo che non appaia troppo piccola o troppo grande. Questa è la sintassi: <IMG SRC = "equazione.jpg" WIDTH="114" HEIGHT="75"> La dimensione della larghezza (WIDTH) e dell altezza (HEIGHT) è espressa in pixel. Chiaramente dovete cercare di non deformare l immagine, esagerando con l altezza o la larghezza: le due dimensioni devono rimanere proporzionate. ALIGN Questo comando specifica come si deve disporre il testo che segue una immagine: se non si specifica nulla, il testo si dispone sul fianco destro dell immagine in fondo per proseguire nella parte sottostante come in figura. L'attributo ALIGN permette di specificare l allineamento tra il testo e l immagine: i parametri più comuni sono: LEFT, RIGHT, TOP, MIDDLE, BOTTOM. Vediamo i diversi casi: <IMG SRC = "equazione.jpg"align=left>: il testo si dispone sul fianco destro dell immagine in alto: poi prosegue contornando l immagine come in figura.

47 Immagini, suoni e filmati 47 <IMG SRC = "equazione.jpg" ALIGN=RIGHT>: l immagine viene posizionata sul margine destro della pagina. Il testo si dispone sul fianco sinistro dell immagine in alto: poi prosegue contornando l immagine come in figura. <IMG SRC = "equazione.jpg" ALIGN=TOP>: il testo si dispone sul fianco destro dell immagine in alto: poi prosegue sotto l immagine come in figura.

48 48 Capitolo III <IMG SRC = "equazione.jpg" ALIGN=MIDDLE>: il testo si dispone sul fianco destro dell immagine al centro: poi prosegue sotto l immagine come in figura. <IMG SRC = "equazione.jpg" ALIGN=BOTTOM>: il testo si dispone sul fianco destro dell immagine in fondo: poi prosegue sotto l immagine come in figura. È come non si specificasse nulla. BORDER L'attributo BORDER permette di specificare lo spessore del bordo intorno all immagine. Lo spessore del bordo è espresso in numero di pixel. Il valore zero corrisponde a nessun bordo. A esempio con il codice: <IMG SRC = "equazione.jpg" BORDER = 6> si ha come risultato:

49 Immagini, suoni e filmati 49 INSERIRE UN SUONO Uno degli aspetti più affascinanti del linguaggio HTML è la possibilità di inserire un file audio nella pagina web, che viene eseguito all apertura della pagina come una piacevole colonna sonora. Il tag <BGSOUND SRC> serve proprio a questo. La sintassi di questa istruzione è <BGSOUND SRC = "posizione_suono\nome_suono.estensione_suono"> Questa istruzione può essere collocata in un qualunque punto del codice HTML. Dato che il codice viene eseguito dal browser in modo sequenziale può essere conveniente posizionare l istruzione all interno della sezione HEAD in modo che sia eseguito appena si apre il file. Comunque non è obbligatorio. L istruzione <BGSOUND SRC> è molto simile come struttura all attributo BACKGROUND del tag BODY: avevamo visto che questa istruzione permette di inserire una immagine come sfondo della pagina. Anche per l istruzione <BGSOUND SRC> si deve specificare la posizione, il nome e l estensione del suono che si vuole eseguire, quindi valgono le stesse considerazioni che abbiamo visto per i file di immagini. Ad esempio l istruzione <BGSOUND SRC = "Ramazzotti\un equazione_per_sempre.mid"> indica che si vuole inserire come musica di sottofondo, il file chiamato un equazione_per_sempre con estensione mid (un file midi) che si trova nella cartella chiamata Ramazzotti memorizzata nella stessa cartella della pagina web.

Vedere altro