Post on 23-Oct-2015
description
Approfondimenti di HTML
Realizzato dalla prof.ssa Paola Pucci
I frameGli hyperlink con l’uso dei frameMappe sensibili o image mapI formI Css o fogli di stileFine
I frame (riquadri) servono a suddividere la finestra del browser in sotto-finestre tra loro indipendenti, nelle quali si possono caricare documenti, file HTML, diversi.
E' possibile adottare contemporaneamente una divisione sia in colonne (cols) che in righe (rows), in modo tale da creare una finestra divisa in più frames.
Che cosa sono i frame?
Dal punto di vista dell’utente:
navigazione del sito più rapida in quanto solo una parte dello schermo viene ricaricata o aggiornata;
navigazione più comoda in quanto i frame
permettono di mantenere sempre in vista alcuni punti del layout (ad esempio il menù di navigazione).
Dal punto di vista del webmaster:
i frame hanno la caratteristica di utilizzare una struttura che consente di includere il layout comune in pochi files.
E’ preferibile non eccedere nell’uso dei frame per non appesantire la realizzazione del sito.
Per alcuni browser si possono verificare problemi di compatibilità in quanto non supportano l’utilizzo dei frame; è preferibile pertanto creare due versioni del sito, una con frame ed una senza frame.
Indicazioni: quando si vuole utilizzare i frame per creare una pagina web si prevede un file iniziale che funge da indice e definisce la struttura del documento.
I contenuti veri e propri sono in altri file HTML che vengono collegati al primo.
Ad esempio, se vogliamo dividere la finestra in tre riquadri abbiamo bisogno di quattro file: uno per la struttura e tre per “riempire” le cornici.
Frame
Esempio di uso di frame
<html> <head> <title> Esempio di frame </title></head> <frameset rows="15%,*"> <frame src="file1.htm"> <frame src="file2.htm"> </frameset></html>
Il file HTML che rappresenta l’intera pagina contiene le istruzioni per la suddivisione della finestra:<frameset rows ="20%, 80%"> <frame name ="upperbar" src="title.htm"> <frameset cols =”30%, 70%"> < frame name = "leftbar" src=”left.htm"> < frame name = "mainarea" src=”main.htm"> </frameset ></frameset >
title.htm
left.htm main.htm
"upperbar" (20%)
"mainarea"(70% di 80%)
"leftbar" (30% di 80%)
80%
1. Definire la struttura da dare alla pagina
Dimensionamento dei frame
sx dx
25% 75%
sinistra.htm destra.htm
Come si costruisce una pagina con FRAME
Come si costruisce una pagina con FRAME
2. Costruire la pagina HTML con la definizione della struttura
<HTML><HEAD></HEAD><FRAMESET COLS = “25%,75%”>
<FRAME SRC = “sinistra.htm” NAME = “sx”>
<FRAME SRC = “destra.htm” NAME = “dx”>
</FRAMESET></HTML>
Dimensionamento dei frame:si possono definire frame a colonne (cols)
o righe (rows).La dimensione può essere espressa in % o in pixel
Nome del file html da visualizzare nel 1^ frame definito
Nome attribuito al 1^ frame
Come si costruisce una pagina con FRAME
3. Costruire le pagine HTML sinistra.htm e destra.htm che verranno visualizzate nei rispettivi frame.
Esempi
<HTML><HEAD></HEAD><BODY>Contenuto file <br><B>sinistra.htm</
B><br>nel frame <I><U>sx</U></I>
</BODY></HTML>
sinistra.htm <HTML>
<HEAD></HEAD><BODY><CENTER>Contenuto file <br><B>destra.htm</
B><br>nel frame <I><U>dx</U></I></CENTER>
</BODY></HTML>
destra.htm
Come si costruisce una pagina con FRAMEalto
bassobasso.htm
alto.htm 20%
* (80%)
<HTML><HEAD></HEAD><FRAMESET ROWS = “20%,*”>
<FRAME SRC = “alto.htm” NAME = “alto”>
<FRAME SRC = “basso.htm” NAME = “basso”>
</FRAMESET></HTML>
Come si costruisce una pagina con FRAME
uno
due
tre
quattro
uno.htm
due.htm
La pagina dovrà essere divisa in 2 colonne.La seconda colonna dovrà poi essere divisa in 3
righe.Nella slide successiva c’è la realizzazione.
tre.htm
10%
20%
* (70%)
quattro.htm
25%
* (75%)
Come si costruisce una pagina con FRAME
<HTML><HEAD></HEAD><FRAMESET COLS = “25%,75%”> <FRAME SRC = “uno.htm” NAME = “uno”> <FRAMESET ROWS = “10%,20%,*”> <FRAME SRC = “due.htm” NAME =
“due”> <FRAME SRC = “tre.htm” NAME = “tre”> <FRAME SRC = “quattro.htm” NAME =
“quattro”> </FRAMESET>
</FRAMESET></HTML>
*
*
*
*
*
*
<html><head> <title>Esempio di frame annidati</title> </head> <frameset cols="40%,*"> <frame src="file1.htm"> <frameset rows="40%,33%,*"> <frame src="file2.htm"> <frame src="file3.htm"> <frame src="file4.htm"> </frameset> </frameset></html>
Il tag FRAMESET non permette di visualizzare informazioni, ma serve solamente per creare la struttura di una pagina con frame.
Serve per definire la struttura interna della finestra del browser.
Il tag FRAME permette di definire il contenuto di ogni cornice e quindi di visualizzare le informazioni.
Il file che contiene tutti i frame (frame.htm):non ha il comando <BODY> ... </BODY>
che è rimpiazzato dal tag<FRAMESET>...</FRAMESET>
ha il tag <FRAME> che definisce quali pagine sono contenute nei frame
ha una parte finale <NOFRAMES>...</NOFRAMES>
che viene visualizzata nel caso in cui il browser non supporti i frame .
Il tag <FRAMESET> ha sostanzialmente due importanti attributi: Rows, permette di specificare il numero e la grandezza delle righe, nel caso in cui venga omesso, significa che ci troviamo di fronte a una struttura a colonne, Cols, permette di specificare il numero e la grandezza delle colonne e, nel caso in cui venga omesso significa che ci troviamo di fronte una struttura a righe .
Il browser associa in modo sequenziale i frame al file HTML, adottando il seguente criterio:da sinistra a destra per le colonne,dall’alto in basso per le righe.
dimensione fissa
Questa sintassi crea un frameset di 2 righe con 3 colonne ciascuna, per un totale di 6 riquadri:<frameset rows="150,*" cols="100,200,*">L’altezza della 1° riga è di 150 pixel, mentre la seconda si adatta al resto della pagina. Le tre colonne sono larghe rispettivamente: 100 pixel, 200 pixel, e la terza colonna si adatta al resto della pagina
percentuale Questa sintassi crea un frameset che si adatta alla risoluzione. La grandezza dei riquadri è espressa in percentuale:<frameset rows="20%,80%" cols="25%,25%,50%">
proporzionale
In questo caso la ripartizione è proporzionale:<frameset rows="1*,3*" cols="3*,2*,1*"> per quel che riguarda le righe: l’altezza viene suddivisa in 4 parti (1+3); la prima riga ne occupa una parte e la seconda riga ne occupa 3 per quel che riguarda le colonne: l’altezza viene suddivisa in 6 parti (3+2+1); la prima colonna occupa 3 parti, la seconda riga ne occupa 2 e la terza 1
• frameborder = "no/yes" (di default è yes), specifica se i bordi esterni dei frame devono essere visualizzati o meno
• framespacing = " numero", definisce lo spessore dei bordi in pixel, imposta lo spazio fra un frame e l’altro, funziona solo con Internet Explorer
• border = ”numero”, indica lo spessore del bordo dei bordi in pixel
• bordercolor = ”colore”, definisce il colore del bordo del frameset
<frameset frameborder="no" cols="25%,75%">
L’attributo frameborder (di default impostato a “yes”) permette di specificare se nel frameset devono essere presenti i bordi.
<frameset framespacing="20" border=”20” cols="25%,75%">
framespacing funziona solo con Internet Explorer e permette di impostare lo spazio tra un frame e l’altro. Di fatto equivale all’attributo border, che permette di specificare lo spessore dei bordi in pixel.
<frameset border="10" framespacing="10" bordercolor=”#FF0000” cols="25%,75%">
bordercolor permette di specificare il colore dei bordi del frameset.
<Frame> si usa per indicare quali file.htm devono essere contenuti nei frame definiti con FRAMESETNB: ci sarà un tag <frame> per ogni riga e/o colonna<FRAME•src = "URL" {URL del file .htm}•name = "nome della finestra" {usato per riferimenti}•scrolling = "yes" | "no" | "auto"{specifica se deve esserci la barra laterale di scorrimento della finestra}•noresize = "no" {impedisce che un client possa ridimensionare il singolo frame} Noresize, se impostato, evita al frame di essere ridimensionato. Se usato in unione con scrolling =”no”, di fatto “blocca” il contenuto del frame. •marginwidth ="numero" {larghezza dei margini : distanza orizzontale, in pixel, non accetta il valore 0}•marginheight ="numero" {altezza dei margini: distanza verticale, in pixel, non accetta il valore 0} >
<frame src=”nomefile.html” scrolling=”no”><frame src=”nomefile.html” scrolling=”auto”>
L’attributo scrolling (di default impostato a “yes”) specifica se si vuol consentire o meno all’utente di poter scorrere il frame. Nel caso sia impostato a “no”, il frame non ha la barra di scorrimento anche nel caso in cui il contenuto della pagina HTML vado oltre la cornice. “scrolling” può anche essere impostato ad “auto”. In questo caso la barra di scorrimento compare in automatico, ma solo se necessario.
<frame src=”nomefile.html” scrolling=”no”><frame src=”nomefile.html” scrolling=”no” noresize>
noresize impedisce al singolo frame di essere ridimensionato. Se usato insieme a scrolling=”no”, di fatto “blocca” il contenuto del frame. Un uso maldestro di questa tecnica potrebbe però impedire all'utente la corretta visualizzazione dei contenuti.
IFRAME, il frame interno:La coppia di tag <iframe></iframe> ci permette di inserire un frame interno, in un punto ben definito di una pagina web, e di richiamare al suo interno un qualsiasi file HTML (come per i normali frame). La sintassi utilizzata è la seguente: <iframe src="pagina.html" width="200" height = "300"></iframe>Il tag IFRAME è stato inserito con la versione 4.0 del linguaggio HTML e non è compatibile con tutti i browser di navigazione.
Un FRAMESET si dice annidato se è contenuto all’interno di un frame. Il frame contenitore si chiama parent (padre, genitore).
I frame possono essere annidati in modo:1.diretto (directly nested frame);2.indiretto (undirectly nested frame).Nel caso 1, il frame viene suddiviso in frameset e
l’URL del contenuto del frame è specificato da un ulteriore <FRAMESET> annidato direttamente nella dichiarazione. L’inconveniente è di richiedere un’ulteriore etichetta <FRAMESET>, rendendo difficile l’assegnazione dei nomi ai frame.
<frameset rows =“*,*">
<frame src=“a.htm“ name=“superiore”>
<frameset cols =“*,*">
<frame src=“b1.htm">
<frame src=“b2.htm">
</frameset>
</frameset>
La riga inferiore non ha un nome, perchè composta da due parti.Nel caso 2, si indica nel frame inferiore l’URL di un documento che contiene un’ulteriore definizione di <FRAMESET> .
<frameset rows =“*,*">
<frame src=“a.htm“ name=“superiore”>
<frame src=“b.htm" name=“inferiore”>
</frameset>
Il file b.htm contiene la suddivisione ulteriore:
<frameset cols =“*,*">
<frame src=“b1.htm“ name=“inferiore1”>
<frame src=“b2.htm" name=“inferiore2”>
</frameset>
La tecnica dell’annidamento direttoriduce il numero dei file a discapito della leggibilità, mentre quella dell’indiretto aumenta il numero dei file, ma migliora la leggibilità del codice HTML della pagina.
<html> <head>
<title>prova di frame</title> </head> <frameset rows="50%,50%" cols="50%, 50%"> <frame src="prima.htm"> <frame src="seconda.htm"> <frame src="terza.htm"> <frame src="quarta.htm"> <noframes> <p>Qui può essere indicato il link a<A href="senzaFrame.htm"> una versione del sito</a> che non utilizzi un layout a
frame</p> </noframes> </frameset> </html>
ATTENZIONE AL MODO IN CUI I TAG SONO ANNIDATI!!!
Documento Frame
<FRAMESET>
</FRAMESET> (al posto di <BODY>)
altezza in righe
<FRAMESET Rows=,,,>
</FRAMESET>
(pixel o %)
altezza in righe
<FRAMESET Rows=*>
</FRAMESET> (* = misura relativa)
larghezza in colonne
<FRAMESET Cols=,,,>
</FRAMESET>
(pixel o %)
larghezza in colonne
<FRAMESET Cols=*>
</FRAMESET>
(* = misura relativa)
cornice <frameset Frameborder ="yes|no">
colore della cornice <frameset Bordercolor ="#$$$$$$">
larghezza della cornice <frameset Border=?>
Definizione del frame
<frame>
contenuto di ogni singolo riquadro
documento da visualizzare
<frame src="url">
denominazione del frame
<frame name="***"|_blank|_self| _parent|_top>
larghezza dei margini <frame marginwidth=?>
margine destro e sinistro
altezza dei margini <frame marginheight=?> margine alto e basso
barra di scorrimento?
<frame scrolling="yes|no|auto">
dimensione non modificabile
<frame noresize>
Definizione del frame
<frame>
contenuto di ogni singolo riquadro
documento da visualizzare
<frame src="url">
denominazione del frame
<frame name="***"|_blank|_self| _parent|_top>
larghezza dei margini <frame marginwidth=?>
margine destro e sinistro
altezza dei margini <frame marginheight=?> margine alto e basso
barra di scorrimento?
<frame scrolling="yes|no|auto">
dimensione non modificabile
<frame noresize>
cornice <frame frameborder="yes|no">
colore della cornice <frame bordercolor="#$$$$$$">
contenuto in assenza di frame
<noframes> </noframes> per i vecchi browser
Gli hyperlink con l’utilizzo di frame
sx
Link a dxlink.htm
dxsin.htm des.htm
Nel file sin.htm, visualizzato nel frame sx, è presente un collegamento ipertestuale al file dxlink.htm e si desidera che al click del mouse il suo contenuto venga visualizzato nel frame con nome dx.
Quindi nel file sinistra.htm sarà presente il seguente collegamento:
<A HREF = “dxlink.htm” TARGET = “dx”>link a dxlink.htm</A>
25%
* (75%)
L’attributo target consente di specificare qual è la destinazione del link; con questa sintassi siamo dunque in grado di caricare il contenuto di un collegamento nel riquadro che riteniamo più opportuno:
<a href=”paginaDaLinkare.htm” target=”nomeDelFrame”> Esistono, poi, delle parole chiave che consentono di ricaricare i link in
destinazioni predefinite:
target=”_blank”
Apre il link in una nuova finestra, senza nome
target=”_self” Apre il link nel frame stesso (è così di default)
target=”_parent”
Il documento viene caricato nel frameset precedente a quello corrente (più esattamente nel frame genitore). Il comportamento di “_parent” è particolarmente evidente in una struttura annidata in cui alcune pagine HTML contengono a loro volta dei frameset: in questo caso viene caricato il contenuto del link nel frameset immediatamente precedente alla pagina del link.
target=”_top” Il documento viene caricato nella finestra originale, cancellando ogni struttura a frame. Più esattamente il documento viene caricato nella parte più alta ("top") della struttura, ed è questo il motivo per cui il frameset stesso viene annullato e sostituito dal contenuto del link.
Target può avere i seguenti attributi
• target="_self" {la finestra stessa: default}
• target="_top" {nella finestra intera}
• target="_blank"{nuova finestra}
• target="_parent" {nel frameset in cui è il frame}
L’attributo TARGET:
"upperbar"
"leftbar""mainarea"...pubblicazioni...
Ipotesi 1: voglio caricare la pagina pubblicazioni.htm al posto dell'intera pagina:
Pubblicazioni...
Ipotesi 2: voglio caricare la pagina pubblicazioni.htm nel frame "mainarea":
Pubblicazioni...
"upperbar"
"leftbar"
"mainarea"
Pubblicazioni...
Ipotesi 1: voglio caricare la pagina pubblicazioni.htm al posto dell'intera pagina:
Pubblicazioni...
Ipotesi 2: voglio caricare la pagina pubblicazioni.htm nel frame "mainarea":
Pubblicazioni...
"upperbar"
"leftbar"
"mainarea"
Pubblicazioni...
pubblicazioni = <A HREF="pubblicazioni.htm" TARGET="_top">pubblicazioni</A>
carica nella finestra intera
pubblicazioni = <A HREF="pubblicazioni.htm" TARGET="_self">pubblicazioni</A>
carica nel frame in cui ti trovi(NB: equivale a non indicare il TARGET)
I link possono essere rappresentati anche da mappe sensibili. Si tratta di immagini per effettuare collegamenti ipertestuali multipli, basati sulla posizione relativa del click all’interno della mappa. La mappa viene suddivisa in aree, denominate hot spot (punti caldi), ciascuna delle quali contiene il collegamento ad altri documenti oppure oggetti.
Per prima cosa bisognerà costruire le forme di cui avremo bisogno nella nostra pagina. Avremo bisogno, quindi, di uno strumento idoneo all’identificazione delle dimensioni dei componenti da realizzare: per esempio Paint, Adobe PhotoShop, Gimp, etc.
<MAP name=“nome mappa”> dettagli </MAP>I dettagli riguardano la forma (o le forme) della mappa.
<MAP name=“nome mappa”> <AREASHAPE=“rect|circle|poly|default”coords=“x1,y1,x2,y2” (rettangolo)“x1,y1,...,xn,yn” (poligono)“x,y,r” (cerchio)href=“URL|nome.htm”>
</MAP>
<img src=“immagine.gif” usemap=“#mappa”><map name=“mappa“><area shape=“rect” coords=“50,50,100,100”href=“...”><area shape=“polygon”coords=“120,130,180,200,400,400” href=“...”>/map>
click qui per caricare kit.htm
click qui per caricare tex.htm
click qui per caricare tiger.htm
click qui per caricare carson.htm
Un’image map è un’immagine suddivisa in “aree sensibili” che, al click del mouse, si comportano come link.
Per esempio, consideriamo l’immagine willer.gif.
Per costruire un image map:Si dichiara che, in corrispondenza di una certa immagine, verrà usata una certa "mappa" (con l'attributo USEMAP) <IMG SRC="willer.gif" USEMAP="#miamappa">Si definisce la "mappa" (con il tag MAP) <MAP NAME="miamappa"> <AREA SHAPE="rect" COORDS="55,25,100,70" HREF="kit.htm"> <AREA SHAPE="rect" COORDS="125,25,160,70" HREF="tiger.htm"> <AREA SHAPE="rect" COORDS="165,25,220,70" HREF="tex.htm"> <AREA SHAPE="rect" COORDS="80,75,125,125" HREF="carson.htm"> </MAP>
NB: Come si fanno a conoscere le coordinate?
Si può caricare l'immagine con l'attributo ISMAP e poi leggere le coordinate sulla barra di stato, muovendosi con il mouse (NB: l'origine delle coordinate è in alto a sinistra):<A HREF="#"><IMG SRC="willer.gif"ISMAP></A>
NB: Gli strumenti di sviluppo (come Dream-weaver, FrontPage, ...) generalmente forniscono metodi per costruire automaticamente le mappe!
In alcuni documenti HTML può essere utile creare dei moduli che possono essere riempiti da chi consulta le pagine stesse e inviati a chi gestisce il sito o al server stesso.
Le informazioni inserite possono poi essere spedite per e-mail o attraverso una tecnologia server (pagine php, asp, …).
Per creare i moduli si deve usare il tag:
<FORM>
modulo
</FORM>
I parametri principali contenuti nel tag, sono:<ACTION> </ACTION> stabilisce la destinazione del FORM, specifica l’azione indicata dopo aver premuto il tasto di invio, in generale un URL di un file.
<METHOD> </METHOD> che specifica come le informazioni contenute nel FORM debbano essere passate al server.
get: indica al browser di inviare i dati inseriti dall’utente nel form, separandoli dal nome della pagina destinazione con punto di domanda. Inseriti in una stringa lunga max. 256 caratteri.
post: si rende invisibile all’utente stringa inviata al server, perché inclusa nel corpo del messaggio, più sicuro.
enctype: originariamente usati per allegati di posta elettronica, ora servono per conoscere natura file presenti nel web. Composti da 2 parti uno principale e uno specifico: esempio "image/gif ", "text/plain " "text/html ".
Elementi basilari che compongono i form sono suddivisi in 4 tag:<INPUT>: determina un input da parte dell’utente,<TEXTAREA>: usato per inserire testi molto lunghi,<SELECT>: si usa per creare menù di scelta,<FIELDSET>: permette di raggruppare i campi per tipologia.
<input type = "text" {input di testo}
"radio" {crea radio box}
"checkbox" {crea checkbox}
"password" {crea un campo password}
“hidden" {crea un campo nascosto}
“file" {per inserire dei file}
"submit“ - "reset " >
Il tag input ha degli attributi che dipendono dal type.
Ogni elemento deve avere un nome univoco che sarà associato ai dati inseriti dall’utente (nella forma nome = valore).
< input type ="text"
name ="nome del campo di input"
size ="numero"{larghezza in numero di caratteri, per lo scrolling }
value = "testo" {testo di default–di solito vuoto} maxlength = "numero" {numero massimo di caratteri inseribili} >
Esempio: < input type = "text" name = "nazionalita"
size = “20” value = "italiana“ maxlength = “50” >
readonly = "true/false" : se si vuole che i campi di testo siano/non siano editabili,enabled = "true/false" : abilita o disabilta il campo testo
E’ una casella di testo a riga singola.
I dati sono in formato alfanumerico.
testo {questo è il testo che appare accanto al bottone}
<input type = "radio"
name = "nome del gruppo di bottoni"
value = "valore di risposta del bottone"
{valore che viene restituito quando il bottone viene
selezionato}
checked {il bottone è selezionato di default}
>
E’ una scelta esclusiva, una sola tra le diverse alternative.
testo {questo è il testo che appare accanto al bottone}
<input type = "checkbox"
name = "nome del gruppo di checkbox"
value = "valore di risposta del box"
{valore restituito quando si seleziona il bottone}
checked {bottone selezionato per default}
>A differenza di radio, in checkbox tutti gli elementi hanno name diversi!!!!
E’ una scelta multipla, più di una tra le diverse alternative.
<input type = "password"
name = "nome campo"
size = "numero"
{larghezza del campo password}
value = "testo"
{non ha molto senso metterlo in questo caso…}
>
E’ una casella di testo, in cui non è visibile il contenuto, perché sostituito da una serie di asterischi.
<input type = "submit"
type = "reset"
value = "testo che compare sul
bottone "
>
Il comando di "submit" deve sempre essere presente (a meno che si sostituisca la sua funzione con del codice Javascript)
•"submit" (pulsante di invio) quando viene cliccato spedisce il modulo (o meglio esegue l’azione specifica nell’action),
•"reset" (pulsante di reset) quando cliccato annulla tutte le opzioni scelte dall’utente, incluso il testo scritto nelle caselle.
type=“hidden”
<input name="hiddenField" type="hidden" value="nessuno mi vede" >
type=“file”
L’oggetto INPUT è arricchito con due attributi che permettono di controllare il focus e aggiungere suggerimenti agli utenti:• placeholder: contiene una stringa che
sarà visualizzata in un campo di testo se il focus non è su quel campo,
• autofocus: indica il campo sul quale posizionare il focus al caricamento del form,
• image: permette di inserire un’immagine al posto del pulsante di Invio.
Per creare un campo di testo di più righe, serve per i commenti,
<textarea
name = "nome" {nome del campo}
rows = "numero" {numero di righe per scrivere}
cols = "numero" {numero di colonne per scrivere}
wrap = "virtual/off"{se off testo va a capo solo se utente preme invio, se virtual lo fa automaticamente}>
testo {questo è il testo che appare}
</textarea>
I menù si chiamano anche caselle combinate. Il tag utilizzato è <select></select>
che permette di creare dei menù a selezione singola o multipla. Per ogni riga del menù si usa il tag <option> elemento del menu </option>.
<selectname = "nome del campo"size = "numero" {quante righe del menù devono essere
visualizzate}multiple{permette la selezione multipla; altrimenti si
ha la selezione singola}
> …….</select>
<optgroup label = "nome" {raggruppa gli elementi tra loro, assegnando un titolo a ogni gruppo, con l’attributo label }<option
value = "valore restituito"{valore restituito quando viene
selezionata la riga}selected{riga selezionata di default}
>testo che compare nel menù
</option>
Esempio di selezione singola
Esempio di selezione multipla
Le informazioni contenute nei menù a scelta possono essere usate da altri programmi. Ad esempio, i form sono utili in combinazione con i database: ogni dato del form viene memorizzato in un database per elaborazioni successive.
Si possono raggruppare, incorniciandoli automaticamente, più campi modulo all’interno dei form.L’uso di questo tag ha un carattere più estetico che pratico. Si raggruppano tutti i controlli presenti tra <FIELDSET> e </FIELDSET> all’interno di una cornice.
<form action = " nomefile " method = " get|post|enctype "<fieldset><legend align = "center "| "top"|"bottom"| " left "| " right " >testo</legend></fieldset></form>
Introduzione Tipi di fogli CSSSintassi del CSSProprietà dello sfondoProprietà del testoProprietà delle listeProprietà dei riquadriProprietà dei filtriProprietà del
posizionamentoProprietà del mouse
Esempi di uso CSSLe classiLe pseudoclassi
Col passare del tempo, il web si è diffuso a macchia d'olio, gli utenti sono diventati moltissimi, e i designer hanno cominciato a curare l'aspetto comunicativo delle pagine e a preoccuparsi anche della loro presentazione grafica. È in questo momento che si scoprono tutti i problemi legati all’HTML e soprattutto alla sua gestione, i web designers si sono visti costretti ad aggirare i limiti stilistici che pone l’HTML, scontrandosi però con nuovi problemi.
Vediamo quali sono i limiti pratici principali:conversione del testo in immagini, uso di immagini per il controllo dello spazio bianco, uso di tabelle per l'impaginazione, scrittura di programmi in sostituzione dell’HTML,difficile gestione degli aggiornamenti, modifiche da effettuare sui singoli file.
I CSS (Cascade Style Sheets), che in italiano significa fogli di stile a cascata, risolvono gran parte dei problemi di gestione e organizzazione delle pagine web.
Il vantaggio fondamentale che offrono i fogli di stile, rispetto all’HTML, è il controllo dello stile delle pagine web attraverso la separazione tra contenuti, struttura e stile.
I fogli di stile permettono di specificare in modo semplice la spaziatura delle righe, i rientri, i colori usati per il testo e gli sfondi, il corpo e lo stile dei caratteri e una moltitudine di altri dettagli.
I fogli di stile separano lo stile dal contenuto.
Purtroppo uno dei limiti dei fogli di stile è che non sono compatibili con tutti browser, nonostante siano stati approvati dal W3C.
Ma cosa si intende per stile? Uno stile è un gruppo di attributi di formattazione che definiscono l'aspetto di una parte di testo, all'interno di un singolo documento.
Si può utilizzare un foglio di stile CSS per controllare molti documenti, contemporaneamente, e comprendere in un unico foglio tutti gli stili di un documento. Attraverso l'uso combinato di un foglio di stile CSS e uno stile HTML si ha il vantaggio di collegare più documenti.
Per fare in modo che gli stili CSS controllino la formattazione di un paragrafo, è necessario eliminare tutta la formattazione HTML manuale o gli stili HTML.
I documenti HTML possono contenere regole di stile direttamente al loro interno o possono importare i fogli di stile, infatti, lo stile può essere definito all’interno o all’esterno del documento HTML, con estensione .css.
Separare i fogli di stile dai documenti HTML offre svariati benefici:si possono condividere i fogli di stile per un gran numero di documenti (e siti), si può cambiare il foglio di stile senza che ciò richieda modifiche al documento,la formattazione HTML manuale ha la precedenza, rispetto alla formattazione applicata da uno stile css.
Possiamo dividere i fogli di stile in tre categorie:fogli di stile inline: con questo metodo si utilizza uno stile da applicare ad un singolo tag HTML; fogli di stile interni: con questo metodo si definisce lo stile, non per il singolo tag, ma per tutta la pagina; fogli di stile esterni: con questo metodo lo stile che si definisce può essere utilizzato da più pagine web, infatti la definizione viene data all'interno di un file esterno (con estensione .css ) che viene linkato alla pagina con un apposito costrutto.
Quando si ha la necessità che lo stile sia relativo al solo blocco che stiamo trattando, senza che questo vada ad influire su altre parti dello stesso documento o pagina web. Si usa, quindi quando uno stile deve essere usato una sola volta.
Per esempio un paragrafo <p> che debba avere determinate caratteristiche, ma con la certezza che queste non siano estese a tutti gli altri paragrafi <p> contenuti all'interno dello stesso documento. esempio :
<p style="text-align : justify; text-indent : 12px">
Tutto ciò che sarà scritto tra l'elemento di apertura <p style= ..... > (paragrafo) e fino al suo elemento di chiusura </p> avrà come stile: giustificato con una indentazione di 12 pixel.
Si possono combinare fra di loro più stili, la sintassi corretta prevede di racchiudere il tutto fra doppi apici separando i vari attributi di stile con il punto e virgola.
L’uso dell'elemento / (tag) di chiusura, in questo caso </p>, che per HTML non era indispensabile, lo diventa invece nel caso dei CSS.
La chiusura di questo elemento, infatti determina anche la chiusura e quindi la fine dello stile, per cui meglio prendere la sana abitudine di chiudere sempre l'elemento (tag) aperto.
Si noti come lo stile sia stato associato all'elemento <p>, semplicemente avendo introdotto lo stile all'interno delle sue stesse parentesi angolari < > allo stesso identico modo avrebbe potuto essere associato a qualsiasi altro elemento valido di HTML.
Con i CSS si adoperano di solito due elementi di HTML che non hanno altro scopo, se non quello di fare da contenitore, questi due elementi infatti non producono alcun effetto se adoperati da soli, ma ad essi è possibile associare tutti vari stili, e sono rispettivamente <div></div> e <span></span>Per cui avrei potuto ottenere la stessa cosa nidificando un contenitore all'interno dell'elemento P a questo modo:
<div style="text-align : justify; text-indent : 12px"><p>tutto il testo del paragrafo</p></div>
Uno stile incorporato, cioè quando allo stesso stile fanno riferimento diversi elementi (tags) HTML. Sarebbe infatti estremamente dispersivo, oltre che laborioso, definire lo stesso stile più volte all'interno della stessa pagina, quando poi servirebbe sempre per lo stesso identico scopo. Molto meglio definirlo una sola volta, ad inizio pagina. Così facendo tutti gli elementi interessati seguiranno quello stesso stile. Si usa quando un singolo documento ha un solo stile.
In questo caso le istruzioni non saranno più inserite all'interno del singolo elemento (tag), ma ad inizio pagina dichiarate dagli elementi (tags) <style> e </style> posti all'interno della sezione <head> </head>.
Questo metodo non impedisce però di fare uso anche di eventuali definizioni di stile in linea, le quali avrebbero priorità sulle dichiarazioni di stile inserite ad inizio pagina.La sintassi è:
<style type="text/css"> <!-- p { text-align : justify; text-indent : 12px } --> </style>
Adesso tutto ciò che si troverà all'interno di qualsiasi paragrafo definito con la consueta forma <p></p> subirà lo stile impostato a inizio pagina, a meno che non ne venga creato uno in linea il quale, come ho detto sopra, avrebbe la priorità rispetto all'altro.
In questo contesto sono proprio loro, i tags chiusi, a decretare la fine dello style oltre che quella del paragrafo.
Tornando al codice dell'esempio, i due elementi <!-- e --> posti ad inizio e fine blocco, sono gli stessi adoperati in HTML. Questi elementi, infatti, così come in HTML hanno significato di commento, senza influenzare in alcun modo il browser.
Nell'esempio è stato adoperato l'elemento (tag) <p>, ma potevamo usare qualsiasi altro elemento valido di HTML.
<head><style type = "text/css ">hr {color : blue}p {margin-top : 10 px}body {background-image : url (" immagini/sfondo.gif ")}</style></head>
Cosa significa foglio di stile esterno ?Significa che se gli stili definiti sono molti, o meglio ancora molte sono le pagine web che ne faranno uso, la cosa migliore sarà quella di creare una struttura alla quale tutte le pagine possano fare riferimento, questa struttura altro non sarebbe che il nostro foglio di style, un documento di testo normalissimo, ma con estensione finale .css, dove al suo interno saranno contenute tutte le dichiarazioni valide per un foglio di style, adoperando le stesse regole sintattiche viste per il foglio incorporato a inizio pagina.
Proviamo ad immaginare i vantaggi, pensate di dover fare una modifica all'intero sito, magari semplicemente per cambiare un tipo di font che non vi piace più, o sostituire un colore con un altro, sarà sufficiente apportare la modifica una sola volta a quel singolo foglio per vedere poi immediatamente su tutte le pagine il risultato della modifica.
Sono finiti i tempi in cui si passavano ore ed ore a rielaborare tutte le pagine dove poi immancabilmente se ne dimenticava sempre qualcuna.Per creare questo foglio esterno, sarà sufficiente ancora una volta un editor, lo stesso che adoperate per HTML, meglio ancora se uno specifico per css, anche se comunque uno qualsiasi va benissimo, l'importante sarà salvare sempre in formato ASCII, cioè privo di particolari formattazioni, avendo cura di fare in modo che il file così salvato sia di tipo .css e non .txt come normalmente avviene.
Esaminiamo più attentamente il nostro foglio esterno:
p { text-align: justify; text-indent: 12px } si noterà che praticamente è lo stesso usato
nello "style incorporato" con la sola differenza che non ha più gli elementi iniziali che ne dichiaravano lo stile, questo perchè essendo un foglio esterno la dichiarazione viene messa nel documento HTML che lo richiama.
Facendo uso delle seguente sintassi:<link rel="stylesheet" type="text/css "href="nome_assegnato.css" > Avendo cura di posizionare questa riga di richiamo fra gli elementi (tags) <head> e </head> del file HTML, dove nome_assegnato.css sarà il nome esatto che avrete deciso di assegnare al file stesso.
Ovviamente questa riga deve essere inserita in tutte le pagine web che fanno riferimento al foglio di style così creato.
Un foglio di style esterno tipo potrebbe essere questo:
BODY{ margin-left : .5cm; margin-right : .5cm; color : #000099; font-family : Verdana, Arial, Helvetica; font-
size : 10pt; }
Vediamo adesso quello che è il più comodo e pratico dei sistemi, quello in cui esiste un foglio esterno separato dal documento e, nel quale, scrivere tutti gli stili.
Anche nel caso in cui decidessimo di fare uso di un foglio di style esterno, sarà possibile definire all'occorrenza stili ad inizio pagina o stili in linea e questi avrebbero la precedenza sul nostro foglio esterno.
Vediamo cosa ridefinisce, tanto per capire meglio e cominciare a familiarizzare con le varie sigle:body, tutto quello dichiarato all'interno di questo elemento sarà esteso a tutto il documento, per cui tutta la pagina web farà uso del font Verdana, nel caso in cui questo non fosse installato nel PC del visitatore si cercherà di fare uso di Arial, se anche questo dovesse mancare allora Helvetica, dopo di che sarà assunto il font di default =font-family : Verdana, Arial, Helvetica;
Margine laterale dai bordi destro e sinistro: 0,5cm =margin-left : .5cm; margin-right : .5cm;
Colore del testo: blu scuro =color : #000099;
Dimensione del font: 10 punti =font-size : 10pt;
A:LINK{ text-decoration : none; color : #009900 } A:VISITED{ text-decoration : none; color : gray } A:HOVER{ Color : #ffff00; text-decoration : none; } TD{ font-family : "MS Sans Serif"; font-size : 12pt } p{ text-align: justify; text-indent: 12px }
Link da visitare: non sottolineati di colore verde =A:LINK{text-decoration : none; color : #009900}
Link visitati: non sottolineati di colore grigio =A:VISITED{text-decoration : none; color : gray}
Cambio colore al passaggio del mouse: non sottolineati di colore grigio =A:HOVER{text-decoration :none; color : #ffff00}
Tabelle: font Ms Sans Serif dimensione 12 punti=TD{font-family : "MS Sans Serif"; font-size : 12pt}
Paragrafo: allineamento giustificato, indentazione 12 pixel=p{text-align: justify; text-indent: 12px}
La sintassi di uno stile si compone di tre parti:
un elemento,una proprietà,un valore.
Uno Style Sheet è un insieme di regole che si applicano a un documento HTML.
Regola:• Selector
specifica l’elemento del documento HTML a cui applicare la Declaration,• Declaration
definisce le proprietà da applicare all’elemento definito dal Selector.Dichiarazione:• Property
proprietà dell’elemento,• Value
valore della proprietà.
Un foglio di stile è quindi una collezione di regole stilistiche.
La sintassi da usare nei fogli di stile è la seguente :inserire gli attributi dentro le parentesi graffe { } separare gli argomenti consecutivi dal segno
punto e virgola (;), invece che dalla virgola usare i due punti (:) al posto del segno uguale (=) separare con un trattino (-) gli attributi composti
da più termini.
Per inserire i fogli di stile su una pagina HTML bisogna inserire, tra il tag di apertura e di chiusura <head>, il tag <style> in questo modo :<head> <style type="text/css">...</stile> </head>
body {background-color : colore di sfondo o in inglese o in esadecimale preceduto da # o transparent, colore di sfondo trasparente;}in questo modo indico lo sfondo della mia pagina.
Se si vuole specificare la stessa proprietà in più elementi è necessario separarli con la virgola, mentre se si vogliono inserire più proprietà vanno separate dal punto e virgola.
body {background-image: url (immagine.gif); indirizzo dell’immagine di sfondo o none, nessuna immagine di sfondo;}in questo modo indico lo sfondo della mia pagina attraverso un’immagine o senza nessun’immagine.
body { background-repeat : repeat indica che l'immagine deve essere replicata sia in orizzontale sia in verticale indica che l'immagine deve essere replicata sia in orizzontale sia in verticale | repeat-x deve essere replicata soltanto in orizzontale | repeat-y deve essere replicata soltanto in verticale | no-repeat l’immagine non viene ripetuta; }serve per specificare come disporre le immagini di sfondo, quando non si tratta di uno sfondo omogeneo che riempie tutta la pagina
Logicamente questo attributo deve essere adoperato in abbinamento a background-image. {background-image : url(logo.gif); background-repeat : repeat-x } (esempio della slide precedente)background-repeat : repeat-y } (esempio di questa slide)
body { background-position: top left in alto a sinistra, top center in alto al centro, top right in alto a destra, center left a metà pagina sul bordo sinistro, center center al centro della pagina, center right a metà pagina sul bordo destro, bottom left in basso a sinistra, bottom center in basso al centro, bottom right in basso a destra, x - % y - % il 1° valore è la posizione orizzontale, il 2° quella verticale. Angolo in basso a sinistra 0% 0%, angolo in basso a destra 100% 100% ;}imposta la posizione di un’immagine di sfondo.
Esempi:{background-image : url(logo.gif); background-repeat : repeat-y; background-position : 50% 50%}{background-image : url(logo.gif); background-repeat : repeat-x; background-position : 50% 50%} {background-image : url(logo.gif); background-repeat : repeat-x; background-position : 10% 10%}
body { background-attachment : scroll l’immagine scorre sullo schermo insieme al resto della pagina | fixed l’immagine resta fissa sullo sfondo ; }definisce come si comporta l'immagine usata nel momento in cui si scorre la pagina, con le barre di scorrimento. Background è la proprietà di sintesi da dichiarare in un’unica volta, posso mettere da 1 a 5 proprietà:colorimagerepeatattachmentposition
body {color: colore o in inglese, o in esadecimale preceduto da #, o da un valore RGB (255, 0, 0) ;}imposta il colore del testoL’attributo per il posizionamento dei livelli è PP {letter-spacing: valore indica lo spazio tra i caratteri |normal definisce lo spazio normale tra i caratteri ;}modifica lo spazio fra i caratteri e il suo valore può essere anche negativo
P {text-align : left a sinistra, right a destra, center centrato, justify giustificato;}
allinea il testoP {text-indent : valore definisce un’indentazione fissa, % definisce un’indentazione espressa in percentuale rispetto alla larghezza dell’elemento che contiene il testo;}indenta la prima linea di un testo
P {text-decoration : overline sopralineato | underline sottolineato | line-through sbarrato | none nessuna decorazione | blink intermittente;}
Aggiunge decorazioni al testo E' anche possibile combinarne più di uno, per esempio inserendo sia underline che overline. None lo si adopera in particolar modo con i link in quanto toglie la fastidiosa sottolineatura che altrimenti avrebbero per default.
P {text-transform : none intermittente | capitalize ogni parola del testo inizia con la maiuscola | uppercase tutto maiuscolo | lowercase tutto minuscolo;}controlla il maiuscolo e il minuscolo
<body><p style = " font-family : serif graziato | san-serif elvetica | monospace monospaziato | cursive corsivo | fantasy dipende dal browser | font qualsiasi nome di font "definisce la forma del carattere
<body><p style = {font-family: Verdana, Arial, sans-serif}Quando si mettono più valori per una proprietà si sceglie sempre il primo, se questo va; poi si continua in sequenza.
p {font-size: xx-small | x-small |small |medium |large | x-large | xx-large impostano le dimensioni del font |smaller diminuisce il font rispetto a quello corrente |larger aumenta il font rispetto a quello corrente | valore fissa l’altezza del carattere |% altezza espressa in percentuale rispetto all’altezza dell’elemento che contiene il testo ;}
imposta l’altezza del carattere
p {font-style : normal normale| italic corsivo| oblique obliquo ;}
sceglie il carattere tra normale o obliquo
p {font-variant : normal normale| small-caps | maiuscoletto ;}
imposta il maiuscoletto
p { font-weight : bold grassetto | bolder più nero rispetto al carattere corrente | lighter più chiaro rispetto al carattere corrente | normal normale;}
imposta lo spessore del testo. Oltre ai parametri suddetti è possibile introdurre anche un numero da 100 a 900 con incrementi di 100, e soltanto a partire dal valore 700 si avvertirà l'effetto grassetto, 400 è normale.
font è la proprietà di sintesi per impostare tutte le proprietà di font in un’unica dichiarazione.
I valori ammessi sono:font-stylefont-variant si possono specificare da 1 a 5 prop.font-size/line-heightfont-familyinoltre posso avere:caption definisce i font utilizzati per i controlli che
un’intestazione all’interno di un formicon definisce i controlli usati per le etichette con iconamenu definisce i font usati per i menu a cascatamessage-box definisce i font usati per le finestre di dialogostatus-bar definisce i font usati per le barre di stato dei form
Alcuni esempi di possibili stili: body {font-size : 10pt; color : #000099} B {font-size : 12pt; color : #ff0000} I {font-size : 8pt; font-style : italic} Vediamo i tre esempi visti sopra:body ha un font formato da 10 punti e di colore blu
scuro, per cui tutto il testo all'interno di quella pagina seguirà questo stile, perchè l'elemento HTML body si riferisce a tutto il documento HTML.
B ( bold: grassetto in HTML) invece, aumenta il font di 2 punti rispetto a quello definito in body, così da evidenziarlo maggiormente e in più ne cambia anche il colore passando dal blu al rosso.
I ( italico: corsivo in HTML ) mantiene lo stile italic, ma ne riduce il font di due punti rispetto a quello standard definito nel body.
Le proprietà permettono di scegliere tra diversi marcatori di una voce di lista o di impostare un’immagine come marcatore.UL {list-style-image: none nessuna immagine | url (immagine.gif) percorso per l’immagine ; }imposta l’immagine come marcatore di una lista
UL {list-style-position: inside il marcatore e il testo sono rientrati | outside mantiene il marcatore incolonnato a sinistra ; }posiziona il marcatore nella lista
UL {list-style-type : none nessun marcatore | disc disco pieno, default | circle solo circonferenza | square quadrato | decimal numero decimale | lower-roman numeri romani minuscoli i | upper-roman numeri romani maiuscoli I | lower-alpha alfabeto minuscolo a| upper-alpha alfabeto maiuscolo A ; }imposta il tipo di marcatore
UL {list-style è la proprietà di sintesi per impostare tutte le proprietà di una lista in un’unica dichiarazione e può avere da 1 a 3 proprietà tra:typepositionimage
I riquadri o box sono formati da un’area per il contenuto che può essere un testo o un’immagine, da una spaziatura (padding) che racchiude l’area del contenuto, da un bordo e da un margine.
P {margin : auto l’ampiezza del margine è determinata automaticamente dal browser | valore indica l’ampiezza del margine | % percentuale rispetto all’ampiezza dell’elemento contenitore ; }imposta l’ampiezza del margine (sempre trasparente)P {border-width : thin sottile | medium medio| thick grosso |valore misura dell’ampiezza del bordo ; }definisce l’ampiezza del bordo
P {border-style : none nessun bordo| hidden bordo nascosto | dotted punteggiato | dashed tratteggiato | solid continuo | double doppio | groove incassato | ridge in rilievo | inset incassato in 3D | outset in rilievo in 3D ; }definisce lo stile del bordoP {border-color : può essere di qualsiasi colore valido; }definisce il colore del bordoP {padding : valore indica l’ampiezza del padding | % percentuale rispetto all’ampiezza dell’elemento contenitore ; }
imposta l’ampiezza del padding
{ height : auto l’altezza è scelta dal browser | valore altezza dell’elemento | % percentuale rispetto all’altezza dell’elemento contenitore ; }imposta l’altezza di un elemento{width : auto la larghezza è scelta dal browser | valore larghezza dell’elemento | % percentuale rispetto alla larghezza dell’elemento contenitore ; }imposta la larghezza di un elemento{ line-height : normal interlinea 1| numero numero di interlinee | valore distanza tra due linee | % distanza espressa in % rispetto all’altezza del contenitore ;}imposta la distanza tra due linee
{ display : none l’elemento non viene visualizzato | block l’elemento viene visualizzato con l’interruzione di una riga prima o dopo il box dell’elemento | inline l’elemento viene visualizzato senza l’interruzione di riga | list-item l’elemento viene considerato come la voce di una lista | run-in il browser sceglie se applicare l’opzione block o inline ;}specifica se un box deve essere visualizzato e con quali modalità
{ position : absolute l’elemento è posizionato in un punto qualsiasi della pagina. La dislocazione dell’elemento è descritta dalle proprietà: left, right, top e bottom | relative sposta l’elemento a partire dalla posizione assunta dal browser | static La posizione dell’elemento è statica e definita dal browser | fixed come absolute, ma supporta operazioni di scroll e di paginazione ; }specifica il tipo di posizionamento dell’elemento
top : specifica il posizionamento del margine superioreright : specifica il posizionamento del margine destrobottom : specifica il posizionamento del margine inferioreleft : specifica il posizionamento del margine sinistroi valori ammessi sono: valore indica la distanza | % distanza in percentuale rispetto alle dimensioni dell’elemento che lo contiene | auto la distanza è decisa dal browser ;
In generale, il contenuto di un box è confinato nel perimetro del box stesso. In certi casi il contenuto può superare (overflow) i limiti del box. Può accadere quando: un box contenuto in un altro è troppo ampio rispetto al box contenitore;l’altezza di un elemento supera l’altezza dichiarata esplicitamente per il box che contiene l’elemento;un box è posizionato in modo assoluto;un box ha margini con valori negativi.
{ overflow : visible viene mostrata la parte eccedente | hidden resta nascosta la parte eccedente | scroll attiva le barre di scorrimento in ogni caso | auto attiva le barre di scorrimento solo se necessarie per mostrare tutto il contenuto ;}
specifica come e se un box è inserito nella pagina, cioè come deve essere visualizzato il contenuto di un elemento se oltrepassa il box.
Una regione di clipping (ritaglio) definisce quale porzione del contenuto di un elemento può essere visibile. In mancanza di indicazioni, la regione di clipping ha le stesse dimensioni del box dell’elemento. La regione di clipping può essere modificata.{ clip : auto la regione di clipping ha dimensioni uguali a quelle del box | rect ( top right bottom left) top right bottom left: dimensioni delle operazioni di ritaglio ; }definisce la regione di clipping
Un float box viene trattato come un box e viene trascinato a sinistra o a destra fino al punto in cui il suo margine esterno tocca il margine del blocco che lo contiene. { float : left trascina a sinistra | right trascina a destra | none nessun trascinamento }serve per trascinare un box a destra o a sinistra sulla linea corrente
Le proprietà dell’elemento di filtro colore definiscono l’opacità e altri particolari effetti di visibilità dell’elemento. La proprietà più utilizzata è alpha.{ alpha : opacity percentuale da 0 a 100. 0 per trasparente, 100 per normale | finishOpacity stabilisce l’opacità finale per l’oggetto, così la trasparenza dell’oggetto diventa graduale | style stabilisce il tipo di gradiente = 1 gradiente lineare, = 2 gradiente radiale, = 3 gradiente rettangolare | startx starty finishx finishy stabiliscono le coordinate da cui avrà inizio e in cui avrà fine l’applicazione della proprietà opacity ;}specifica come deve essere visualizzato il contenuto di un elemento se oltrepassa il box
{ blur : add stabilisce se l’oggetto originale viene aggiunto a quello filtrato, add = true/1 – vero, add = false/0 – falso | enabled stabilisce se il filtro viene o meno applicato add = true/1 – vero, add = false/0 – falso, se viene tralasciato si assume add = true | direction stabilisce la direzione della scia tenuto conto del sistema di riferimento indicato | strenght stabilisce l’ampiezza in pixel della scia; }l’elemento presenta una scia, come una macchia lasciata dalla carta assorbente
{ gray : nessuno }l’elemento viene trasformato in una scala di grigi{ invert : nessuno }l’elemento viene invertito nei colori{ xray : nessuno }l’elemento viene trasformato in negativo in bianco e nero
{ wave : add 1 aggiunge l’immagine originale a quella ondulata, 0 no | freq indica il numero delle onde | light indica la luminosità dell’ondulazione, da 0 a 100 | phase indica l’angolazione d’inizio delle ondulazioni, da 0 a 100 | strenght stabilisce l’intensità dell’effetto ondulatorio; }viene aggiunto un disturbo ondulatorio all’elemento
Il posizionamento avviene, oltre che sulle due coordinate dello schermo, su una sorta di "terza dimensione " che specifica come si dispone un elemento rispetto agli elementi che occupano la stessa area dello schermo.{ z-index : valore valori interi, sia positivi che negativi ; }serve per controllare quali elementi verranno disposti "sopra" o "sotto" rispetto alla profondità dello schermo.Elementi con z-index maggiore verranno disposti sopra. Senza l’uso di questa proprietà l’ordine prevede priorità crescente per l’ultimo elemento.
Si può intervenire per modificare la forma del mouse a seconda dell’elemento della pagina su cui è posizionato. { cursor : default forma assunta in mancanza di indicazioni | auto la forma del puntatore è decisa dal browser | crosshair croce sottile + | pointer mano con indice puntato usata per i link | text cursore testuale I | wait clessidra | help aiuto | url link all’immagine personalizzata da assegnare al cursore }specifica per un elemento il tipo di cursore da visualizzare
H1 { font: 36pt serif }H1 { font-size: 36pt; font-family: serif; font-style: normal; font-weight: normal; font-variant: normal; line-height: normal;}UL { font-style:
italic }
UL { font-style: italic; font-weight: bold; }
A: link { text-decoration: underline }
A: link, A: visited { text-decoration: none } A: hover { background: cyan }
Definizione del linguaggio di default per i fogli di stile:
<meta http-equiv="Content-Style-Type" content=“text/css” >
HTTP Header:
Content-Style-Type: text/css
<html> <head> <link href="special.css" rel="stylesheet" type="text/css"> </head> <body> <p class="special” > This paragraph should have special green text. </p> </body></html>
special.cssP.special {
color : green; border: solid red;
}
E’ possibile definire stili differenti per il medesimo elemento di HTML utilizzando le classi. Si supponga di voler disporre di due tipi di paragrafo da utilizzare in un documento: un paragrafo giustificato a destra e un altro centrato. Definizione delle classi paragrafo:
P.right { text-align: right }
P.center { text-align: left } Nel documento HTML si possono usare gli attributi di classe
Nel documento HTML si possono usare gli attributi di classe:<P class = “right“>Questo paragrafo è allineato a destra </P><P class = “center“>Questo paragrafo è allineato a sinistra </P>Solo un attributo di classe può essere usato per un elemento di HTML. Il codice seguente non è ammesso:<P class = “right“ class = “center“>
Se invece di indicare il nome di un elemento per definire una classe si usa il carattere “ . “ (punto), si definisce una classe generica che può essere applicata a qualsiasi elemento di HTML. Nell’esempio seguente tutti gli elementi conclass = “centrata“ vengono centrati..centrata { text-align: center }Nel codice seguente la classe “centrata“ viene applicata sia all’elemento H1, che all’elemento P.
Significa che entrambi gli elementi seguono le regole definite nella descrizione di questa classe di appartenenza.<H1 class = “centrata“ > La prima intestazione è centrata </H1><H2> La seconda non è centrata </H2><P class = “centrata“> Il paragrafo invece sì </P>
Alcune caratteristiche della visualizzazione di un documento non sono direttamente dipendenti dalla struttura del documento, ma sono piuttosto funzioni dell’interazione utente-browser, per esempio quando viene modificato il colore dei link dopo averli visitati. Questi aspetti sono gestiti dalle pseudoclassi, che sono definibili solo per alcuni tag, possiedono un nome e si indicano nella definizione dell’elemento dopo i due punti ( : ). La sintassi è la seguente:nome_classe : pseudoclasse {proprietà : valore;}
La pseudoclasse :link si applica ai link che non sono stati visitati. La pseudoclasse :visitated si applica quando un link è stato visitato dall’utente. In questo caso tutti i link:a: link {color : red;}a: visited {color : green;}Un elemento può acquisire o perdere una pseudoclasse quando l’utente interagisce con il browser; browser interattivi possono infatti cambiare l’aspetto della pagina in risposta ad azioni dell’utente. Per esempio la pseudoclasse :hover si applica quando l’utente ha selezionato un elemento, ma non lo ha ancora attivato, in sostanza è sopra il link con il cursore del mouse, ma non ha ancora premuto il tasto del mousea: hover {color : blue;}
Nel caso precedente il mouse passa sopra il link ed esso diventerà di colore blu. Questi tipi di pseudoclassi prendono il nome di pseudoclassi dinamiche. A questa categoria appartengono anche : active e : focus. La prima si applica quando un elemento è stato attivato dall’utente, dal momento in cui l’utente preme il bottone del mouse al momento in cui lo rilascia. La seconda si applica invece quando un elemento riceve il focus, ma non è attivo in Internet Explorer. Per esempio:a: link {color : red;}a: visited {color : blue;}a: active {color : lime;}a: hover {color : yellow;}
E’ importante rispettare la sequenza delle pseudoclassi dinamiche. Inoltre le pseudoclassi a : link, a : visited e a : active corrispondono nell’HTML agli attributi del tag body link, vlink e alink, i quali consentono di cambiare il colore di default dei link non visitati, dei link visitati e dei link attivi.
FINE