IMMAGINI INTRODUZIONE Prima di inserire le immagini nella pagina HTML, le stesse devono essere copiate all interno della cartella del progetto (Sito). La loro copia può avvenire o tramite Risorse del Computer o tramite la finestra Esplora Soluzioni dell ambiente Visual Studio. Si consiglia di creare, se non ancora presente, una cartella di nome Immagini (all interno della cartella di progetto), che servirà a contenere (in modo organizzato) tutte le immagini del nostro sito internet. A tal proposito, cliccare con il pulsante destro del mouse sul percorso del progetto nella finestra Esplora Soluzioni (in alto a destra), e selezionare il comando Nuova Cartella dal menù che compare; assegnare alla nuova cartella il nome Immagini (Figura 9.1). Figura 9.1 A questo punto cliccare sulla cartella Immagini (appena creata) con il tasto destro del mouse e, dalla finestra di menù che compare, selezionare il comando Aggiungi elemento esistente. Si aprirà la solita finestra di dialogo sfoglia che consentirà di selezionare i file di immagine da aggiungere al progetto (Figura 9.2). Figura 9.2 Attenzione che il tipo di file impostato sia il tipo Immagine (elenco a discesa in basso a destra, vicino al nome del file) al fine di poter vedere un elenco corretto nella parte centrale della finestra. Selezionare uno o più file che si vogliono inserire, dopo di che premere il pulsante aggiungi. A questo punto le immagini vengono copiate all interno del progetto divenendo disponibili per il loro utilizzo. Nell esempio precedente sono state inserite le immagini jellyfish.jpg e Koala.jpg (Figura a fianco). 1
IMMAGINI TAG <IMG> Per poter inserire immagini nella pagina HTML si possono utilizzare due diverse tecniche: 1) In modalità progettazione/origine trascinare l immagine dalla finestra Esplora Soluzioni nella pagina; 2) In modalità origine scrivere il Tag HTML <IMG> secondo la sua sintassi caratteristica Entrambe le tecniche produrranno lo stesso risultato. SINTASSI GENERALE DEL TAG <IMG> <img src="nome del file" alt="descrizione immagine" style="attributi di stile"/> SRC (obbligatorio): Nome del file dell immagine da inserire. Il nome del file deve essere comprensivo del percorso relativo; ALT (facoltativo): testo descrittivo delle immagini (utilizzato da programmi per non vedenti per descrivere vocalmente l immagine); STYLE (facoltativo): attributi di stile per modificarne l aspeto (dimensioni, allineamento,ecc). Se volessimo inserire il file Koala.jpg dell esempio precedente nella nostra pagina HTML, una sintassi possibili può essere la seguente: <img src="immagini/koala.jpg" alt="foto di un Koala" style ="width:100px;height:100px"/> che permette di ottenere il risultato mostrato nella figura successiva. ALLINEAMENTO DELLE IMMAGINI Capita spesso che, una volta inserita un immagine, il testo già presente nel documento venga spostato per dare spazio all immagine inserita. Per allineare l immagine rispetto al testo presente si possono scegliere diverse opzioni in funzione del tipo di allineamento che si desidera impostare. Riporto di seguito gli attributi di STYLE con i relativi risultati. 2
ATTRIBUTI DI STILE CARATTERISTICI L immagine scaricata è sempre delle stesse dimensioni originali e quindi il tempo richiesto non si riduce. E conveniente, per ridurre il tempo di download, convertire l immagine nelle nuove dimensioni con un programma di elaborazione immagini. IMMAGINI DI SFONDO: Per inserire un immagine di sfondo in un documento, dopo aver importato l immagine nel sito, si deve impostare l attributo background-image di STYLE nell elemento BODY. <body style="background-image:url(immagini/jellyfish.jpg);"> 3
LINK TAG <A> E giunto il momento di affrontare l argomento che dà vita alla grande rete: i link cioè quelle scritte interattive che se cliccate col mouse danno modo di saltare da una pagina all altra o da un sito all altro. Sono proprio i link che hanno decretato il successo del web. In un documento HTML è possibile creare un link utilizzando l elemento A, chiamato àncora, i cui tag di apertura e chiusura sono, rispettivamente <A> e </A>. I link possono essere Esterni al documento HTML o Interni. Per predisporre un link occorre: Indicare una stringa (o immagine), che verrà visualizzata in colore diverso e sottolineata (impostazione browser di default); Specificare il documento da richiedere nel caso in cui il link venga attivato con un click. LINK ESTERNI I link esterni sono collegamenti ad altri documenti HTML oppure oggetti multimediali (immagini, suoni, animazioni). Per realizzare un link esterno in un documento HTML si utilizza il TAG <A> nel seguente modo: <a href="url">descrizione</a> Dove: href (obbligatorio): riferimento al file o alla pagina da aprire al click sul link; descrizione: testo descrittivo del link. URL (Universal Resource Locator) è un indirizzo in un formato specifico che può identificare in modo univoco la posizione di un oggetto sul web. Si distinguono due tipologie di URL: un URL assoluto: URL completo che specifica l esatta posizione dell oggetto sul web come http://www.istitutoguala.it/docenti.htm un URL relativo: che fornisce la posizione di un oggetto relativamente alla posizione della pagina che contiene l URL, come pagina2.htm ; si suppone che pagina2.htm appartenga alla stessa cartella della pagina corrente. È anche possibile inserire un riferimento che permette di inviare un messaggio di posta elettronica mediante il browser, utilizzando nuovamente le ancore e un particolare formato di URL: <a href="mailto:indirizzoemailcorretto">descrizione</a> LINK INTERNI Un link interno è un collegamento a una determinata posizione nello stesso documento HTML. Capita spesso di visualizzare documenti molto lunghi, per la lettura dei quali sarebbe necessario scorrerli per intero. La presenza di specifiche ancore per muoversi in modo mirato all interno del documento garantisce una maggiore leggibilità al documento stesso. Per realizzare un link interno in un documento HTML si utilizza il TAG <A> nel seguente modo: <a href="#nome">descrizione</a> 4
Il nome deve essere definito all interno dello stesso documento con l attributo NAME. <a name="nome"></a> Per realizzare un link a un punto interno di un altra pagina si utilizza invece: <a href="url#nome">descrizione</a> IMMAGINI E ANCORE Spesso non si inserisce direttamente una immagine nel documento HTML, ma la si associa ad una àncora. <a href="immagini/guala.jpg">istituto Guala</a> Con questo codice, cliccando su Istituto Guala, otteniamo l immagine della scuola. Se, invece, si vuole utilizzare una immagine piccola, una icona, come àncora per una immagine di dimensioni maggiori, scriveremo: <a href="immagini/guala_grande.jpg"> <img src="immagini/guala_piccola.jpg"> </a> In questo caso abbiamo due TAG annidati: il tag più esterno che rappresenta il LINK mentre al posto della descrizione è stato inserito un tag IMMAGINE che visualizza un immagine. Il link sarà in questo caso l immagine. 5
LE TABELLE Le tabelle rappresentano uno degli strumenti più utilizzati e potenti nella formattazione di documenti HTML. Gli elementi fondamentali per definire la struttura di una tabella sono: TABLE, che indica l elemento tabella, caratterizzato dai Tag <TABLE> e </TABLE>; TR, che indica l inizio di una nuova riga, caratterizzato dai Tag <TR> e </TR>; TD, che indica l inizio di una nuova cella (colonna) all interno di una riga, caratterizzato dai Tag <TD> e </TD> Esempio di tabella <table border='1' style="width:100%;"> <tr> <td style="width:33%;">cella 1 1</td> <td style="width:33%;">cella 1 2</td> <td style="width:33%;">cella 1 3</td> </tr> <tr> <td>cella 2 1</td> <td>cella 2 2</td> <td>cella 2 3</td> </tr> <tr> <td>cella 3 1</td> <td>cella 3 2</td> <td>cella 3 3</td> </tr> </table> In questo esempio, le dimensioni specificate sono in % e stanno a significare larghezze in funzione della dimensione del contenitore superiore. La tabella è larga il 100% rispetto alla finestra del browser; le colonne sono il 33% rispetto alla dimensione della tabella, ecc... Anche in questo caso si possono specificare delle lunghezze (px,pt,cm,mm, ecc..). 6