Tweet
In questa seconda lezione vedremo più in dettaglio i vari marcatori che ci permettono di rendere più accattivante la grafica delle pagine web che andremo a creare. Prima di cominciare, però, occorre fare una precisazione: fino ad ora si è parlato di "marcatori", cioè quelle speciali parole delimitate dai segni di minore e maggiore, che ci permettono di assegnare delle proprietà al testo ed agli elementi grafici che compongono la pagina. Il nome generico utilizzato per questi marcatori è la parola TAG quindi da adesso in poi utilizzerò sempre questo termine per riferirmi a quest'ultimi.
Nella scorsa lezione abbiamo visto come fare per ottenere un testo in grassetto. Esistono altri tag che ci permettono di formattare il testo a nostro piacimento. Vediamoli insieme:
<b> : Testo in grassetto
<i> : Testo in corsivo
<u> : Testo sottolineato
<s> : Testo barrato
<tt> : Font monospaziato
<big> : Carattere maggiore rispetto al testo normale
<small>: Carattere minore rispetto al testo normale
<sub> : Pedice
<sup> : Apice
Esiste anche una serie di tag chiamati "High Font" che sono specificati dalla lettera H seguita da un numero compreso tra 1 e 7. Maggiore è il numero e minore sarà il testo racchiuso tra questi tag.Inoltre il testo racchiuso tra questi tag sarà espresso in grassetto (diviene quindi inutile specificare dopo un tag "Hight Font" un tag <b>)
Ognuno di questi tag prende questa forma:
<h1> : Testo più grande rispetto al testo normale
.....
<h7> : Testo più piccolo rispetto al testo normale
Per modificare la dimensione del font è anche possibile utilizzare un altro tipo di tag: il tag <font>.
Con questo tag introduciamo anche un ulteriore argomento riguardante il linguaggio HTML: gli attributi.
Ogni tag come già detto è espresso tramite una parola racchiusa tra segno minore e maggiore. Mentre ci sono tag preposti ad un'unico compito (ad esempio il tag <b> ha come scopo quello di rendere il testo che segue in grassetto), altri tag possono svolgere diverse operazioni. Per fare questo questi tag, oltre al nome con cui vengono identificati, prevedono all'interno dei segni minore e maggiore anche degli attributi. Questi non sono altro che parole riservate utilizzate per specificare determinate proprietà associate al tag.
Nel nostro esempio, tramite il tag font è possibile specificare diverse proprietà attribuibili al testo che segue, come ad esempio, la dimensione, il colore, ed il font utilizzato per descriverlo.
Vediamo le varie proprietà e poi vediamo un esempio su come utilizzarle:
[LIST]face : Permette di definire un font da utilizzarsi per descrivere il testo che segue. Se il font specificato non viene trovato sul computer di chi sta visualizzando la pagina web, il browser utilizzerà per il testo il font di default[/LIST][LIST]color : Permette di specificare un colore da attibuire al testo che segue. Il colore può essere espresso in due modi differenti: o tramite notazione RGB (Red Green Blue) oppure specificando direttamente il nome del colore. quest'ultima, però, oltre a limitarsi a poche combinazioni, non sempre è supportata dai browser, quindi il mio consiglio è di utilizzare sempre il metodo RGB. Chi volesse maggiori informazioni riguardo il metodo RGB chieda pure sul forum e verà data una spiegazione più esauriente su cosa si intende e su come si rappresentano i colori con questo metodo.[/LIST][LIST]size : Permette di assegnare una dimensione al testo che segue. I valori che possono essere espressi tramite l'attributo size variano devono essere compresi (come per gli "High Font") tra un minimo di 1 ad un massimo di 7. In questo caso, però, il valore 1 rappresenta la dimensione minima, mentre 7 rappresenta la dimensione massima che il testo può assumere. La dimensione assunta di default è rappresentata dal valore 3.[/LIST]
Vedremo più avanti nel corso che è possibile specificare anche una dimensione in termini di pixel (quindi molto più precisa). Questo però è possibile tramite i fogli di stile.
Ogni tag può comprendere uno o più attributi specificati all'interno dello stesso tag. Quindi tramite il tag <font> è possibile, attraverso l'utilizzo di un unico tag, specificare font, dimensione e colore. Se vogliamo rappresentare la scritta "Ciao mondo!" con font verdana, di dimensione 5 e di colore rosso possiamo scrivere:
<font face="verdana" size="5" color="#FF0000">Ciao mondo!</font>
La stessa cosa la si poteva rappresentare in questo modo:
<font face="verdana"><font size="5"><font color="#FF0000F">Ciao mondo!</font></font></font>
Per finire vanno segnalati due tag molto particolari:
<blink> : Rende il testo che segue lampeggiante (non funziona su Internet Explorer)
<marquee>: Fa scorrere il testo (o le immagini) nella pagina
Il tag <marquee> possiede anche degli attributi:
loop : Indica quante volte il testo (o le immagini) devono scorrere all'interno della pagina. Se non espressamente indicato oppure dove il valore vale -1, lo scorrimento è continuo
behavior : Indica il tipo di scorrimento. Può assumere tre valori differenti:[LIST]scroll (valore predefinito): Il testo scorre senza fermarsi da una parte all'altra dello schermo[/LIST][LIST]slide : Una volta terminati i giri prestabiliti dall'attributo loop il testo si ferma[/LIST][LIST]alternate: Il testo rimbalza da una parte all'altra dello schermo[/LIST]
direction: Indica il verso di scorrimento. Può assumere quattro valori differenti:[LIST]left (valore predefinito): Il testo scorre da destra a sinistra[/LIST][LIST]right : Il testo scorre da sinistra verso destra[/LIST][LIST]up : Il testo scorre dal basso verso l'alto[/LIST][LIST]down : Il testo scorre dall'alto verso il basso[/LIST]
scrolldelay: Indica il numero di millisecondi relativi ad ogni singolo spostamento
scrollamount: Indica di quanti pixel il testo si deve spostare
bgcolor : Indica un colore di sfondo sul quale il testo effettua il suo scorrimento
title : Indica un messaggio che appare nel caso in cui l'utente si sposti con il mouse sopra il testo in movimento
align : Indica l'allineamento rispetto al testo che lo circonda. Può assumere tre diversi valori:[LIST]top: Allineamento in alto[/LIST][LIST]middel: Allineamento centrato[/LIST][LIST]bottom: Allineamento in basso[/LIST]
height: Indica l'altezza dello spazio occupato dal testo in movimento
width: Indica la larghezza dello spazio occupato dal testo in movimento
hspace: Distanza in orizzontale del testo dallo spazio totale occupato
vspace: Distanza in verticale del testo dallo spazio totale occupato
Per questa seconda lezione è tutto. Vi consiglio di fare delle prove su ciò che è stato detto in questa seconda lezione. E se avete dubbi, chiedete pure!
Nella scorsa lezione abbiamo visto come fare per ottenere un testo in grassetto. Esistono altri tag che ci permettono di formattare il testo a nostro piacimento. Vediamoli insieme:
<b> : Testo in grassetto
<i> : Testo in corsivo
<u> : Testo sottolineato
<s> : Testo barrato
<tt> : Font monospaziato
<big> : Carattere maggiore rispetto al testo normale
<small>: Carattere minore rispetto al testo normale
<sub> : Pedice
<sup> : Apice
Esiste anche una serie di tag chiamati "High Font" che sono specificati dalla lettera H seguita da un numero compreso tra 1 e 7. Maggiore è il numero e minore sarà il testo racchiuso tra questi tag.Inoltre il testo racchiuso tra questi tag sarà espresso in grassetto (diviene quindi inutile specificare dopo un tag "Hight Font" un tag <b>)
Ognuno di questi tag prende questa forma:
<h1> : Testo più grande rispetto al testo normale
.....
<h7> : Testo più piccolo rispetto al testo normale
Per modificare la dimensione del font è anche possibile utilizzare un altro tipo di tag: il tag <font>.
Con questo tag introduciamo anche un ulteriore argomento riguardante il linguaggio HTML: gli attributi.
Ogni tag come già detto è espresso tramite una parola racchiusa tra segno minore e maggiore. Mentre ci sono tag preposti ad un'unico compito (ad esempio il tag <b> ha come scopo quello di rendere il testo che segue in grassetto), altri tag possono svolgere diverse operazioni. Per fare questo questi tag, oltre al nome con cui vengono identificati, prevedono all'interno dei segni minore e maggiore anche degli attributi. Questi non sono altro che parole riservate utilizzate per specificare determinate proprietà associate al tag.
Nel nostro esempio, tramite il tag font è possibile specificare diverse proprietà attribuibili al testo che segue, come ad esempio, la dimensione, il colore, ed il font utilizzato per descriverlo.
Vediamo le varie proprietà e poi vediamo un esempio su come utilizzarle:
[LIST]face : Permette di definire un font da utilizzarsi per descrivere il testo che segue. Se il font specificato non viene trovato sul computer di chi sta visualizzando la pagina web, il browser utilizzerà per il testo il font di default[/LIST][LIST]color : Permette di specificare un colore da attibuire al testo che segue. Il colore può essere espresso in due modi differenti: o tramite notazione RGB (Red Green Blue) oppure specificando direttamente il nome del colore. quest'ultima, però, oltre a limitarsi a poche combinazioni, non sempre è supportata dai browser, quindi il mio consiglio è di utilizzare sempre il metodo RGB. Chi volesse maggiori informazioni riguardo il metodo RGB chieda pure sul forum e verà data una spiegazione più esauriente su cosa si intende e su come si rappresentano i colori con questo metodo.[/LIST][LIST]size : Permette di assegnare una dimensione al testo che segue. I valori che possono essere espressi tramite l'attributo size variano devono essere compresi (come per gli "High Font") tra un minimo di 1 ad un massimo di 7. In questo caso, però, il valore 1 rappresenta la dimensione minima, mentre 7 rappresenta la dimensione massima che il testo può assumere. La dimensione assunta di default è rappresentata dal valore 3.[/LIST]
Vedremo più avanti nel corso che è possibile specificare anche una dimensione in termini di pixel (quindi molto più precisa). Questo però è possibile tramite i fogli di stile.
Ogni tag può comprendere uno o più attributi specificati all'interno dello stesso tag. Quindi tramite il tag <font> è possibile, attraverso l'utilizzo di un unico tag, specificare font, dimensione e colore. Se vogliamo rappresentare la scritta "Ciao mondo!" con font verdana, di dimensione 5 e di colore rosso possiamo scrivere:
<font face="verdana" size="5" color="#FF0000">Ciao mondo!</font>
La stessa cosa la si poteva rappresentare in questo modo:
<font face="verdana"><font size="5"><font color="#FF0000F">Ciao mondo!</font></font></font>
Per finire vanno segnalati due tag molto particolari:
<blink> : Rende il testo che segue lampeggiante (non funziona su Internet Explorer)
<marquee>: Fa scorrere il testo (o le immagini) nella pagina
Il tag <marquee> possiede anche degli attributi:
loop : Indica quante volte il testo (o le immagini) devono scorrere all'interno della pagina. Se non espressamente indicato oppure dove il valore vale -1, lo scorrimento è continuo
behavior : Indica il tipo di scorrimento. Può assumere tre valori differenti:[LIST]scroll (valore predefinito): Il testo scorre senza fermarsi da una parte all'altra dello schermo[/LIST][LIST]slide : Una volta terminati i giri prestabiliti dall'attributo loop il testo si ferma[/LIST][LIST]alternate: Il testo rimbalza da una parte all'altra dello schermo[/LIST]
direction: Indica il verso di scorrimento. Può assumere quattro valori differenti:[LIST]left (valore predefinito): Il testo scorre da destra a sinistra[/LIST][LIST]right : Il testo scorre da sinistra verso destra[/LIST][LIST]up : Il testo scorre dal basso verso l'alto[/LIST][LIST]down : Il testo scorre dall'alto verso il basso[/LIST]
scrolldelay: Indica il numero di millisecondi relativi ad ogni singolo spostamento
scrollamount: Indica di quanti pixel il testo si deve spostare
bgcolor : Indica un colore di sfondo sul quale il testo effettua il suo scorrimento
title : Indica un messaggio che appare nel caso in cui l'utente si sposti con il mouse sopra il testo in movimento
align : Indica l'allineamento rispetto al testo che lo circonda. Può assumere tre diversi valori:[LIST]top: Allineamento in alto[/LIST][LIST]middel: Allineamento centrato[/LIST][LIST]bottom: Allineamento in basso[/LIST]
height: Indica l'altezza dello spazio occupato dal testo in movimento
width: Indica la larghezza dello spazio occupato dal testo in movimento
hspace: Distanza in orizzontale del testo dallo spazio totale occupato
vspace: Distanza in verticale del testo dallo spazio totale occupato
Per questa seconda lezione è tutto. Vi consiglio di fare delle prove su ciò che è stato detto in questa seconda lezione. E se avete dubbi, chiedete pure!
Comment