Tweet
In questa nuova lezione vedremo di definire altri tag per modellare graficamente la nostra pagina web. Nella lezione due abbiamo visto come sia possibile modificare a nostro piacimento colore, dimensione e font utilizzato per descrivere il testo. Se volessimo modificare a questo punto l'intero sfondo della pagina web dovremo agire sul tag <body>. Questo tag lo avevamo già visto nella prima lezione, infatti è il tag che racchiude tutto il corpo della pagina web, e più precisamente, all'interno di questo tag vengono descritti i contenuti che la pagina dovrà possedere. E' logico quindi pensare che se volessimo assegnare un colore allo sfondo differente dal colore predefinito rappresentato dal bianco, lo possiamo fare agendo direttamente su questo tag. Il tag <body> possiede alcuni attributi:
bgcolor: Tramite questo attributo è possibile assegnare un colore di sfondo all'intera pagina web
background: Tramite questo attributo possiamo, invece, assegnare un immagine di sfondo
text: Permette di attribuire un colore all'intero testo presente nella pagina
leftmargin: Definisce la distanza degli argomenti dal margine sinistro della pagina
topmargin: Definisce la distanza degli argomenti dal margine superiore della pagina
Il tag <body> permette, sempre tramite i suoi attributi, di assegnare un colore a quelli che saranno i link presenti all'interno della pagina. La definizione di "link" verrà data in una successiva lezione. Gli attributi sono i seguenti:
link: colore assegnato ai collegamenti attivi
vlink: colore assegnato ai collegamenti che non sono mai stati utilizzati
alink: colore assegnato ai collegamenti già visitati
Abbiamo visto come assegnare un immagine all'intero sfondo della pagina. Ma se invece volessimo visualizzare un immagine? Per questa operazione esiste un tag specifico chiamato <img> che comprende anche diversi attributi. In realtà questo tag da solo, non dà nessun risultato significativo. Vediamo, allora, quali sono gli attributi che permettono di sfruttarlo al meglio:
src: Questo è l'attributo più importante in quanto viene utilizzato per specificare il percorso dove si trova l'immagine che vogliamo visualizzare. Può essere specificato sia un percorso assoluto che un percorso relativo. Sicuramente per tutte le immagini che vorrete visualizzare vi conviene utilizzare un percorso relativo che ne permette una migliore gestione. I percorsi assoluti vengono talvolta utilizzati per inserire un'immagine che risiede su un server diverso da quello che ospita il proprio sito web. Ad esempio si potrebbe voler visualizzare un'immagine presente in un altro sito.
width: Permette di assegnare una dimensione in larghezza dell'immagine.
height: Permette di assegnare una dimensione in altezza dell'immagine. Entrambi gli attributi width ed height possono dare una visione distorta dell'immagine finale. INoltre, spesso, vengono utilizzati per ridurne le dimensioni; questo, però, non modifica le dimensioni originali, bensì soltanto le dimensioni riferite alla visualizzazione all'interno della pagina.
align: Questo attributo specifica come sarà allineata l'immagine rispetto al testo che segue, e può assumere tre diversi valori:
[LIST]left: L'immagine sarà posta alla sinistra del testo.[/LIST][LIST]right: L'immagine sarà posta alla destra del testo.[/LIST][LIST]top: Il testo viene rappresentato in alto alla destra dell'immagine, ma dopo una prima riga testuale, se dovesse essercene ancora, verrà inserito alla fine dell'immagine, nella prima riga disponibile.[/LIST][LIST]middle: Il testo viene rappresentato al centro ed alla destra dell'immagine, ma dopo una prima riga testuale, se dovesse essercene ancora, verrà inserito alla fine dell'immagine, nella prima riga disponibile.[/LIST][LIST]bottom: Il testo viene rappresentato nell'ultima riga alla destra dell'immagine. Tutto il testo che segue verrà inserito a partire dalla prima riga disponibile.[/LIST]
vspace: Permette di specificare lo spazio vuoto che intercorre fra i margini superiore ed inferiore dell'immagine ed un eventuale testo
hspace: Permette di specificare lo spazio vuoto che intercorre fra i margini sinistro e destro dell'immagine ed un eventuale testo
alt: Tramite questo attributo è possibile specificare una stringa di testo che viene visualizzata quando il puntatore del mouse si sofferma sull'immagine. E' un attributo molto utile, soprattutto per dare modo a chi utilizza browser unicamente testuali, di conoscere cosa si vuole rappresentare.
border: Con questo attributo è possibile specificare un bordo colorato da assegnare all'immagine. Il valore attribuito specifica lo spessore del bordo (più è grande il valore e più spesso apparirà il bordo). Se non si vuole visualizzare alcun bordo basta specificare l'attributo assegnandogli il valore 0. Questa è anche la modalità predefinita di visualizzazione, quindi volendo si può anche omettere l'attributo. Attenzione, però: nel caso in cui si voglia "linkare" un immagine (vedremo più avanti nel corso cosa significa questo termine), il valore predefinito assegnato sarà 1, quindi se si vuole omettere il bordo risulta indispensabile specificare anche questo attributo
Sempre per quanto riguarda le immagini va detto che i formati riconosciuti dai vari browser sono essenzialmente tre e più precisamente:
GIF (Graphic Interchange Format): Formato composto da un massimo di 256 colori. Permette di avere aree trasparenti oltre che di poter produrre animazioni composte da più fotogrammi in successione
JPEG o JPG (Joint Photographic Experts Group): Formato compresso utilizzato per immagini di alta qualità
PNG (Portable Network Graphic): Formato che unisce la possibilità di immagini ad alta qualità a caratteristiche molto buone quali ad esempio supporto al canale alfa
Tramite le immagini è possibile creare delle "mappe". Queste definiscono delle zone cliccabili all'interno dell'immagine facendo in modo che la stessa possa contenere più link e quindi possa redirigere l'utente verso pagine diverse. Analizzeremo più in dettaglio questa possibilità in una lezione a parte. Prima delle mappe vanno sicuramente spiegati cosa sono i link!
Anche questa terza lezione è completata. La prossima volta cominceremo a vedere altri tag che permettono di organizzare le informazioni testuali in maniera ordinata: gli elenchi e le tabelle
bgcolor: Tramite questo attributo è possibile assegnare un colore di sfondo all'intera pagina web
background: Tramite questo attributo possiamo, invece, assegnare un immagine di sfondo
text: Permette di attribuire un colore all'intero testo presente nella pagina
leftmargin: Definisce la distanza degli argomenti dal margine sinistro della pagina
topmargin: Definisce la distanza degli argomenti dal margine superiore della pagina
Il tag <body> permette, sempre tramite i suoi attributi, di assegnare un colore a quelli che saranno i link presenti all'interno della pagina. La definizione di "link" verrà data in una successiva lezione. Gli attributi sono i seguenti:
link: colore assegnato ai collegamenti attivi
vlink: colore assegnato ai collegamenti che non sono mai stati utilizzati
alink: colore assegnato ai collegamenti già visitati
Abbiamo visto come assegnare un immagine all'intero sfondo della pagina. Ma se invece volessimo visualizzare un immagine? Per questa operazione esiste un tag specifico chiamato <img> che comprende anche diversi attributi. In realtà questo tag da solo, non dà nessun risultato significativo. Vediamo, allora, quali sono gli attributi che permettono di sfruttarlo al meglio:
src: Questo è l'attributo più importante in quanto viene utilizzato per specificare il percorso dove si trova l'immagine che vogliamo visualizzare. Può essere specificato sia un percorso assoluto che un percorso relativo. Sicuramente per tutte le immagini che vorrete visualizzare vi conviene utilizzare un percorso relativo che ne permette una migliore gestione. I percorsi assoluti vengono talvolta utilizzati per inserire un'immagine che risiede su un server diverso da quello che ospita il proprio sito web. Ad esempio si potrebbe voler visualizzare un'immagine presente in un altro sito.
width: Permette di assegnare una dimensione in larghezza dell'immagine.
height: Permette di assegnare una dimensione in altezza dell'immagine. Entrambi gli attributi width ed height possono dare una visione distorta dell'immagine finale. INoltre, spesso, vengono utilizzati per ridurne le dimensioni; questo, però, non modifica le dimensioni originali, bensì soltanto le dimensioni riferite alla visualizzazione all'interno della pagina.
align: Questo attributo specifica come sarà allineata l'immagine rispetto al testo che segue, e può assumere tre diversi valori:
[LIST]left: L'immagine sarà posta alla sinistra del testo.[/LIST][LIST]right: L'immagine sarà posta alla destra del testo.[/LIST][LIST]top: Il testo viene rappresentato in alto alla destra dell'immagine, ma dopo una prima riga testuale, se dovesse essercene ancora, verrà inserito alla fine dell'immagine, nella prima riga disponibile.[/LIST][LIST]middle: Il testo viene rappresentato al centro ed alla destra dell'immagine, ma dopo una prima riga testuale, se dovesse essercene ancora, verrà inserito alla fine dell'immagine, nella prima riga disponibile.[/LIST][LIST]bottom: Il testo viene rappresentato nell'ultima riga alla destra dell'immagine. Tutto il testo che segue verrà inserito a partire dalla prima riga disponibile.[/LIST]
vspace: Permette di specificare lo spazio vuoto che intercorre fra i margini superiore ed inferiore dell'immagine ed un eventuale testo
hspace: Permette di specificare lo spazio vuoto che intercorre fra i margini sinistro e destro dell'immagine ed un eventuale testo
alt: Tramite questo attributo è possibile specificare una stringa di testo che viene visualizzata quando il puntatore del mouse si sofferma sull'immagine. E' un attributo molto utile, soprattutto per dare modo a chi utilizza browser unicamente testuali, di conoscere cosa si vuole rappresentare.
border: Con questo attributo è possibile specificare un bordo colorato da assegnare all'immagine. Il valore attribuito specifica lo spessore del bordo (più è grande il valore e più spesso apparirà il bordo). Se non si vuole visualizzare alcun bordo basta specificare l'attributo assegnandogli il valore 0. Questa è anche la modalità predefinita di visualizzazione, quindi volendo si può anche omettere l'attributo. Attenzione, però: nel caso in cui si voglia "linkare" un immagine (vedremo più avanti nel corso cosa significa questo termine), il valore predefinito assegnato sarà 1, quindi se si vuole omettere il bordo risulta indispensabile specificare anche questo attributo
Sempre per quanto riguarda le immagini va detto che i formati riconosciuti dai vari browser sono essenzialmente tre e più precisamente:
GIF (Graphic Interchange Format): Formato composto da un massimo di 256 colori. Permette di avere aree trasparenti oltre che di poter produrre animazioni composte da più fotogrammi in successione
JPEG o JPG (Joint Photographic Experts Group): Formato compresso utilizzato per immagini di alta qualità
PNG (Portable Network Graphic): Formato che unisce la possibilità di immagini ad alta qualità a caratteristiche molto buone quali ad esempio supporto al canale alfa
Tramite le immagini è possibile creare delle "mappe". Queste definiscono delle zone cliccabili all'interno dell'immagine facendo in modo che la stessa possa contenere più link e quindi possa redirigere l'utente verso pagine diverse. Analizzeremo più in dettaglio questa possibilità in una lezione a parte. Prima delle mappe vanno sicuramente spiegati cosa sono i link!
Anche questa terza lezione è completata. La prossima volta cominceremo a vedere altri tag che permettono di organizzare le informazioni testuali in maniera ordinata: gli elenchi e le tabelle