COMUNICAZIONE ONLINE, RETI E VIRTUALITA’ MATTEO CRISTANI INDICE CICLO DELLE LEZIONI LEZ. 1 LEZ. 2 LEZ. 3 LEZ. 4 LEZ. 5 LEZ. 6 INTRODUZIONE AL CORSO LA RETE INTERNET IL WEB LA POSTA ELETTRONICA LE RETI P2P CLASSI DI APPLICAZIONI WEB LEZ. 7 LEZ. 8 LEZ. 9 LEZ. 10 LEZ. 11 LEZ. 12 PORTALI E MOTORI DI RICERCA I SOCIAL NETWORKS CONCETTO DI IPERTESTO PROGETTO DI IPERTESTI IL LINGUAGGIO HTML ESERCITAZIONE SU HTML LEZ. 13 LEZ. 14 LEZ. 15 LEZ. 16 LEZ. 17 LEZ. 18 LABORATORIO DI SVILUPPO DI PAGINE WEB LABORATORIO DI SVILUPPO DI PAGINE WEB WEB 2.0 LABORATORIO DI SVILUPPO WEB 2.0 LABORATORIO DI SVILUPPO WEB 2.0 SOMMARIO DEL CORSO AGENDA IMMAGINI TABELLE SFONDI IMMAGINI La sintassi di base per inserire un'immagine all'interno di una pagina web è la seguente <img src="url dell'immagine" alt="testo alternativo"> ATTRIBUTI DELLE IMMAGINI Attributo Significato border identifica il bordo che a 0 non è presente, salendo con i numeri aumenta di spessore title width height testo informativo, visualizzato posizionando il cursore sopra l'immagine forza la dimensione della foto in larghezza forza la dimensione della foto in altezza alt permette di specificare un testo alternativo, descrittivo dell'immagine ESEMPIO <body> <img src = "http://it.wikibooks.org/skins1.5/monobook/user.gif" alt="immagine utente" height="30" width="20" title="Immagine Utente" /> </body> ALLINEAMENTO L'HTML permette di definire l'allineamento delle immagini rispetto al testo tramite l'attributo align che può assumere i seguenti valori: bottom (default): il bordo inferiore dell'immagine risulta allineato verticalmente con la prima linea del testo. middle: la prima riga del testo è allineato con il centro dell'immagine. Dopo la prima riga, il testo scorre sotto l'immagine. top: la prima riga del testo è allineata con il bordo superiore dell'immagine. left: l'immagine risulta allineata a sinistra del testo right: l'immagine risulta allineata a destra del testo MAPPE Le mappe d'immagine sono delle mappe costituite da un'immagine sulla cui area sono disposti diversi link. L'esempio più eclatante è la penisola italiana: cliccando, ad esempio, sull'immagine del Lazio si verrà indirizzati verso le pagine inerenti al Lazio; al contrario, cliccando sull'immagine della Sardegna si verrà indirizzati verso le pagine inerenti alla Sardegna. Per ottenere ciò si usa il tag area. Area è un oggetto XML DOM utilizzato per creare una mappa immagine ovvero per rendere attiva una (o una o più porzioni di) immagine in un documento HTML. Proprietà Funzione accessKey Imposta o restituisce un tasto per l'accesso all'area attiva da tastiera Imposta o restituisce un testo alternativo per i browser che non supportano l'oggetto Area alt hash Imposta o restituisce una sequenza di lunghezze (separate da virgole) che costituiscono le coordinate dell'area interattiva. Imposta o restituisce la parte dell'URL costituita dal link (preceduto da #) impostato all'interno dell'oggetto. host Imposta o restituisce il nome dell'host e la porta dell'URL. hostname href Imposta o restituisce il nome dell'host e l'Indirizzo IP dello stesso. Imposta o restituisce l'intero URL. id Imposta o restituisce l'id associato all'oggetto. noHref pathname port Imposta o restituisce lo stato di inattività dell'area Imposta o restituisce il pathname dell'URL Imposta o restituisce la porta dell'URL. protocol Imposta o restituisce il protocollo dell'URL (ad esempio: "http:" o "https:"). search Imposta o restituisce la query-string dell'URL, preceduta dal carattere '?'. shape Imposta o restituisce la forma (rect, circle, poly) dell'area attiva. tabIndex Imposta o restituisce un indice sequenziale delle aree attive dell'immagine per spostarsi dall'una all'altra con il tasto tab. target Imposta o restituisce il nome di destinazione del link dell'URL. coords EVENTI Evento Funzione onClick Esegue una porzione di codice dopo un singolo click del mouse sull'area attiva. onDblClick Esegue una porzione di codice dopo un doppio click del mouse sull'area attiva. onMouseOut Esegue una porzione di codice all'uscita del puntatore del mouse dall'area attiva. onMouseOver Esegue una porzione di codice all'ingresso del puntatore del mouse dall'area attiva. IMMAGINE NELLA BARRA L'HTML ci permette attraverso il tag <link> di inserire un'immagine nella barra degli indirizzi accanto all'url del sito che si sta visitando. L'immagine che vorremmo usare a tale scopo dovrà avere necessariamente il nome di favicon, dovrà essere grande 16x16px o maggiore e potrà essere dei seguenti formati: .gif, .ico o .jpg. <head> <link rel="icon" href="http://<percorso>/favicon.ico"> </head> TABELLE Il tag usato per la creazione delle tabelle è <table> in coppia con il suo tag di chiusura </table>. È tra questi due tag che si devono inserire colonne e righe, le prime si creano attraverso il tag <tr> (Table Row); le seconde, attraverso il tag <td> (Table Data). È importante notare come è sempre una riga ad includere una colonna: cioè il tag <td> è sempre incluso in un tag <tr>. Se si vuole indicare al browser di creare una cella che faccia da intestazione ad una colonna (solitamente renderizzata con il contenuto in neretto e centrato) si può usare il tag <th> (Table Header), ideato appositamente per questo tipo di funzione. TABELLE Anche se essi sono attualmente deprecati in quanto contengono informazioni di stile, è possibile aggiungere a colonne e righe atributi quali align (alignment) e valign (Vertical alignment); per modificare la dimensione semantica di una colonna si utilizza l'attributo colspan (Column span), mentre rowspan è l'equivalente per le colonne. TABELLE align: allinea il testo della cella a destra (right), sinistra (left) e centrato (center). valign: allinea il testo della cella sul margine superiore (top), sul margine inferiore (bottom), e in mezzo (middle) colspan: quante colonne pesa una singola <td> rowspan: quante righe pesa una singola <td> Le celle e le colonne supportano anche gli attributi height e width. DIDASCALIE Vi è un tag interessante che è <caption> che permette di aggiungere una descrizione alla tabella (una sorta di didascalia) che supporta l'attributo align pertanto si posizionerà o sopra o sotto la tabella secondo il valore specificato in tale attributo. ATTRIBUTI DELLE TABELLE Attributo Significato border Stabilisce la dimensione del bordo esterno alla tabella. Il valore di default è 0 (ossia assente). width Stabilisce la larghezza della tabella height Stabilisce la lunghezza della tabella cellspacing Stabilisce la spaziatura tra le celle cellpadding Stabilisce la spaziatura tra il testo e la cella che lo contiene ESEMPIO <table width="100%" height="30%" cellspacing="4" cellpadding="2" border="1"> <caption align="bottom">Questa è una tabella di esempio </caption> <tr> <th>Intestazione 1</th> <th>Intestazione 2</th> </tr> <tr> <td align="center">Cella 1 colonna 1</td> <td valign="top">Cella 1 colonna 2 </td> </tr> <tr> <td>Cella 2 colonna 1</td> <td width="70%">Cella 2 colonna 2</td> </tr> </table> SFONDO Per poter settare un colore come sfondo di una pagina è sufficiente servirsi dell'attributo bgcolor che va inserito all'interno del tag <body>. L'attributo bgcolor sta per background color che com'è facile intuire corrisponde all'italiano: colore di sfondo. Come valore dell'attributo bgcolor si può impostare qualsiasi colore, sia attraverso il suo valore nominale che attraverso il suo valore esadecimale. SFONDO La sintassi per l'uso di bgcolor: <body bgcolor="#FFFF00"> La pagina avrà uno sfondo di colore giallo (valore esadecimale) </body> <body bgcolor="black"> La pagina avrà uno sfondo di colore nero (valore nominale) </body> IMMAGINE DI SFONDO Una volta settata un'immagine come sfondo di una pagina essa verrà ripetuta sia orizzontalmente che verticalmente, bisognerà quindi stare attenti alla colorazione del testo in modo che questo sia in ogni caso leggibile. È possibile anche combinare un'immagine di sfondo con una colorazione di modo che nell'attesa del caricamento dell'immagine l'utente possa comunque leggere il testo. L'attributo per poter inserire un'immagine di sfondo è background che va inserito sempre all'interno di <body>, il suo valore ovviamente sarà l'url che porterà all'immagine in questione. ESEMPIO <body bgcolor="#FFFF00" background="immagine.jpg"> Questa pagina contiene un'immagine come sfondo, tuttavia mentre essa verrà caricata vedrai uno sfondo di colore giallo </body>
Scarica
