HTML e CSS - Roberto Mana

Transcript

Tecnologie - Classe Terza
robertomana.it
HTML E CSS
HTML e CSS
Rev. Digitale 2.1 del 15/12/2016
HTML
Struttura della pagina HTML …………………………………………………………………..….…
Formattazione del testo ……………………………………………………………………………….
Elenchi Puntati e Numerati …………………………………………………………………………..
Collegamenti Ipertestuali …………………………………………………………………………….
Immagini ……………………………………………………………………………………………..
Mappe Immagine …………………………………………………………………………………….
Tabelle ……………………………………………………………………………………………….
Moduli ………………………………………………………………………………………………..
Frames ………………………………………………………………………………………………..
Il tag META ………………………………………………………………………………………….
2
3
4
5
5
6
7
9
11
12
CSS
Introduzione ai Fogli di Stile …………………………………………………………………….…..
CSS property 2.0 : Color, Font, Div, Elementi Block e Elementi inline …………..…………….…..
Le proprietà relative ai Font …..…..…..………………………….…………………………….…..
Le proprietà relative ai Testi …..…..…..………………………….…………………………….…..
Le proprietà relative ai Bordi…..…..…..………………………….…………………………….…..
Le proprietà relative allo Sfondo …..…..…..………………………….……………………………..
Le proprietà relative a Margin e Padding …..…..…..…………………….…………………………..
La proprietà Overflow …..…..…..………………………….………………….………………….…..
Le proprietà ListStyle e Cursor …..…..…..………………………….………………….……….…..
La proprietà Float …..…..…..………………………….…………………….……………..…….…..
Posizionamento Assoluto e Relativo …..…..…..………….………………….……………..…….…..
z.index, visibility, opacity …..…………....…..………….………………….……………..…….…..
Approfondimenti su selettori e pseudoselettori …..…..…..………………………….…………..…..
Elenco di effetti realizzabili tramite CSS ………………………………………………………….....
13
15
17
18
18
19
19
21
22
23
24
25
26
28
pag. 1
robertomana.it
HTML E CSS
Il Linguaggio HTML
HTML (HyperText Markup Language) è il metalinguaggio standard per la formattazione delle pagine web.
Metalinguaggio nel senso che non è un vero e proprio linguaggio di programmazione, ma è costituito da una serie
di marcatori (TAG) interpretati dal browser. I Tag Html sono indipendenti dalla piattaforma su cui vengono scritti
/ utilizzati (windows, unix, linux). Il Browser è semplicemente un visualizzatore di documenti HTML
Un TAG Html è un comando che specifica sostanzialmente quali effetti applicare ad esempio ad un testo. Un tag è
racchiuso tra i caratteri < >. Qualunque pagina Html inizia col tag <html> e termina col tag </html>. Tutti i tag,
tranne qualche rara eccezione, devono essere “chiusi” dal corrispondente /tag. Alcuni tag sono accompagnati da
ATTRIBUTI e VALORI, sostanzialmente parametri che indicano come deve essere perseguito lo scopo del tag.
HTML non è case sensitive, anche se da HTML 4, è vivamente raccomandata la scrittura dei tag in minuscolo.
Dal browser è possibile visualizzare il codice html di una qualsiasi pagina web (comando Visualizza/html oppure
tasto destro che è l‟unica soluzione nel caso dei frames). Il codice html della pagina viene visualizzato all‟interno di
Note Pad. La Home Page di un sito deve avere nome index.htm (unix/linux). oppure default.htm (windows) .
Gli editor HTML sono di solito WYSIWYG : What You See Is What You Got
Elenco dei principali TAG
<HTML> </HTML> Inizio e fine di una singola pagina html
<HEAD> </HEAD> Intestazione della pagina, entro i quali si scrivono meta tag, titolo, scripts.
<BODY> </BODY> Contenuto della vera e propria pagina web.
<TITLE> </TITLE> Titolo della pagina web che sarà visualizzato nella barra del titolo del browser
Utilizzato anche per aggiungere la pagina sulla barra dei preferiti. Max 64 chr
Esempio :
<!DOCTYPE html>

<html lang=”it”>
<head>
<meta charset="UTF-8">
<title> Modello </title>
</head>
<body>
……………………………
</body>
</html>
Attributi del tag BODY
TEXT colore di default per il testo della pagina.
BGCOLOR colore di sfondo della pagina. Colori fondamentali: White, Black, Red, Green, Blue, Magenta, Yellow, Cyan
BACKGROUND immagine di sfondo che viene ripetuta fino al completo riempimento della pagina
LeftMargin, TopMargin Margini sinistro/desto, superiore/inferiore espressi in pixel. Dreamweaver presenta al
suo interno anche la versione Netscape di questi attributi: MarginWidth e MarginHeight
RightMargin, BottomMargin Margini desto e inferiore espressi in pixel. Se non sono specificati vengono
rispettivamente assunti uguali a LeftMargin e TopMargin. DEPRECATI
LINK <BODY LINK = “colore1” VLINK = “colore2” ALINK = “colore3” > consentono di impostare (ad un
valore diverso dal default) il colore assunto dai collegamenti ipertestuali quando sono Unvisited, Visited, e Active
(dove Active significa attivo, cioè l‟ultimo selezionato).
Se non si specifica il link, il browser utilizza le proprie impostazioni di default (Opzioni Internet / Generale /
Colori): Unvisited=Blu, Visited=Viola, onMouseOver=Rosso. Gli Active Link (link clickato) non hanno per
default un colore proprio, ma mantengono, a seconda del loro stato, lo stesso colore dei Visited/Unvisited.
Il Colore Rosso di onMouseOver non sembra modificabile in HTML tradizionale.
Per riportare ad Unvisited un link Visited occorre rimuovere la cache del browser.
pag. 2
robertomana.it
HTML E CSS
Formattazione del testo
<P> testo </P> Inizio e Fine paragrafo. In corrispondenza del fine paragrafo il cursore va a capo. Il testo interno
a questi tag, anche se costituito da righe multiple, viene visto come una unica riga, che va a capo automaticamente
al raggiungimento del margine destro. L‟attributo ALIGN. <P ALIGN = ”LEFT” - ”CENTER” -”RIGHT”>
indica l‟allineamento del testo. Esiste anche un tag <CENTER> testo </CENTER>.
<FONT> testo </FONT> Specifica il tipo di Font da utilizzare nel paragrafo. Viene utilizzato in abbinamento a
<p>, all‟esterno o all‟interno del paragrafo o applicato anche a singole parti di testo. Dispone dei seguenti attributi
<FONT FACE = “NomeFont”> i nomi disponibili sono gli Screen.Fonts presenti sul client. Font particolari
possono anche essere “allegati” alla pagina stessa mediante l‟utilizzo di un apposto meta Tag dichiarativo.
<FONT COLOR = “RED” opp “#FF0000”>
Non è riconosciuto l‟attributo ALIGN che fa parte del tag <P>
<FONT SIZE = 4> Dimensione del carattere espresso in PUNTI WEB da 1 a 7. Il default è 3
All‟interno di SIZE, al posto del valore assoluto, si può specificare un incremento / decremento della
dimensione rispetto al default. Es: FONT SIZE = +1 equivale a FONT SIZE = 4
Oltre ai punti web, esistono diverse altre unità di misura che però non sono utilizzabili in HTML tradizionale
ma solo all‟interno dei CSS. Di seguito una tabella indicante la reale dimensione dei punti web:
1
8 pt
2
10 pt
3
12 pt (valore di default usato da tutti i browser)
4
14 pt
5
18 pt
6
24 pt
7
36 pt
<B> testo </B>
Grassetto (analogo a <strong>)
<I> testo </I>
Corsivo (analogo a <em>)
<U> testo </U>
Sottolineato
<STRIKE> testo </STRIKE>
Barrato
<TT> testo </TT>
Testo Teletype a spaziatura fissa, stile macchina da scrivere.
<SUP> testo </SUP> Apice
<SUB> testo </SUB> Pedice
<blockquote> testo </blockquote> Testo a margini rientrati. E‟ possibile l‟annidamento.
<BR> consente di andare a capo all‟interno di un paragrafo senza lasciare righe vuote (Shift Invio).
NB - All’interno dei TAG HTML occorre SEMPRE OMETTERE l’unità di misura. (usata solo nei CSS).
Ogni attributo può avere UNA SOLA UNITA‟ di MISURA, cha va sempre omessa, qualunque essa sia.
<HR> Inserisce una linea orizzontale per l‟intera larghezza della pagina. Divisore di pagina.
L‟attributo SIZE indica l‟altezza in pixel della riga. La riga viene sempre disegnata in rilievo (cioè con un‟ombra
inferiore). NOSHADE disegna invece una linea piena senza l‟ombra inferiore.
Altri attributi sono ALIGN (Left, Right e Center), WIDTH e COLOR.
Es: <HR SIZE = “20” NOSHADE ALIGN = “RIGHT” WIDTH = “80%” COLOR = “RED”>
<DIV> testo </DIV> Tag base per l‟utilizzo dei CSS. E‟ un contenitore molto simile a <p>, però mentre p
è utilizzato normalmente per i testi, div è un contenitore generico in grado di contenere qualsiasi oggetto ed è
usato per suddividere una pagina HTML in più sezioni. Presenta il solo attributo ALIGN, deprecato in HTML5.
TITOLI
Per i titoli sono stati definiti appositi TAG H che vanno da H1 (6 punti web grassetto) fino ad H6 (1 punto web).
Un tag H2 è equivalente a <P> <FONT SIZE=”5”> <B> testo </B> </FONT> </P>
In realtà il tag H1 raddoppia il valore del font rispetto allo standard, che da 12 pt diventa 24 pt; e raddoppia anche
le dimensioni del padding che da 16px diventa 32px. H2 applica un aumento del 50% (font 18pt e padding 24px),
H3 applica un aumento del 16,5% (metà di 33) (font 14 pt e padding19px), H4 lascia il font base immutato, H5
applica una riduzione di 16,5% (font 20 pt padding 13px) H6 applica una riduzione di 33% (font 8 pt paddg 10px)
pag. 3
robertomana.it
HTML E CSS
Regole Base per la scrittura dei tag HTML4



i tag dovrebbero essere scritti solo in minuscolo anche se al momento i browser supportano anche il maiuscolo
Tutti i tag devono essere chiusi. Se un tag non prevede la chiusura, si usa la chiusura abbreviata />. Es: <br/>
Tutti gli attributi devono sempre essere racchiusi tra virgolette (anche quelli numerici)
Elenchi puntati e numerati
<UL> Elenco Voci </UL> Unordered List. Elenco puntato.
L‟attributo TYPE consente di specificare quale punto elenco si intende utilizzare. Es:
<UL TYPE = ”disc”>
puntino (default)
<UL TYPE = “square”> quadratino
<UL TYPE = “circle”> cerchio vuoto
<OL> Elenco Voci </OL> Ordered List. Elenco numerato.
<OL TYPE = ”1”>
numeri decimali (default)
<OL TYPE = “A”>
lettere maiuscole
<OL TYPE = “a”>
<OL TYPE = “I”>
numeri romani
<OL TYPE = “i”>
lettere minuscole
numeri romani minuscoli
<LI> singola voce </LI> List Item. Definisce un singola voce di un elenco puntato UL o numerato OL
<DL> Elenco Voci </DL> Definition List. Elenco a chiavi.
Le liste DL sono strutturate in modo un po‟ diverso rispetto alle precedenti. Esempio:
<dl>
<dt>autore:</dt>
<dd> indirizzo mail dell’autore</dd>
<dt>categoria: </dt>
<dd> Link alla pagina web relativa alla categoria</dd>
<dt> Offerta Economica: </dt>
<dd> Link alla pagina web relativa all’offerta economica</dd>
</dl>
dove :
<dt> = definition Tag consente di assegnare un titolo al Parafrafo
<dd> = definition descriptor consente di assegnare una descrizione che verrà visualizzata indentata a destra
rispetto al titolo
Caratteri Particolari
 
è
&
<
>
"
Spazio
è
&
< Segno di minore
> Segno di maggiore
“ Doppie virgolette
±
€
£
©
®
±
€
£
© Copyright
® Marchio depositato
&#CodiceAscii
Esempio:
<p>   </p>
Codice Ascii di un qualsiasi carattere, tra 0 e 255.
&#39 = apice.
pag. 4
robertomana.it
HTML E CSS
Global attributes
Attributi applicabili a tutti gli elementi della pagina HTML.
TITLE Rappresenta un tooltip visualizzato posizionando il mouse sopra l‟elemento.
Fornisce una breve descrizione dell‟elemento stesso.
TABINDEX: Specifica l‟ordine con cui gli elementi possono essere selezionati mediante il tabulatore.
CLASS e STYLE attributi per la gestione dei CSS
name e ID
Alcuni tag HTML (a, map, tutti i controlli) utilizzano l‟attributo name per identificare ad esempio un‟ancora a cui
puntare oppure una mappa immagine. Con gli anni è comparso anche un nuovo attributo simile ID che consente di
identificare univocamente un tag HTML. Sono entrambi case sensitive.
Il loro significato riamane è il seguente:
 ID consente di identificare univocamente ciascun tag ed è il principale strumento di accesso da JavaScript
 name non è univoco (possono esistere più tag con lo stesso name) ed è usato principalmente come
identificatore per i valori da restituire al server nel caso di pagine dinamiche
Collegamenti ipertestuali
<A> </A> A = ancora Il testo contenuto nel tag diventa un link alla URL indicata.
 Si tratta di un tag INLINE, cioè che non va a capo ma viene visualizzato in linea con il testo
 L‟attributo HREF (HyperText Reference) definisce la URL del collegamento.
Ogni ancora può puntare :
 ad una altra pagina del sito,
<A HREF = “pagina2.htm”> Vai a Pagina 2 </A>.
 ad una pagina di un alto sito. In questo caso occorre anteporre http://
<A HREF = “http://www.vallauri.edu”> sito Vallauri </A>
 ad un‟ancora della stessa pagina o di un‟altra pagina.
I link ad un‟ancora provocano uno scroll all‟elemento rappresentato dall‟ancora stessa.
<A HREF = “#Sezione2”> vai a Sezione2 </A>
<P ID = “Sezione2”> </P> // ancora
Il simbolo # indica un riferimento interno alla pagina L‟attributo ID di un qualsiasi controllo definisce
una ancora di collegamento a cui può puntare il tag <A HREF>.
E‟ anche possibile definire link ad un‟ancora contenuta su una pagina diversa:
<A HREF = “Pag9.htm#Sezione5”>
HREF = “#” ritorna in cima alla pagina (senza però ricaricare la pagina dal server).
HREF = “” ricarica la pagina dal server.
 ad un file esterno (immagine, eseguibile o altro). Il browser controlla dapprima il formato del file da aprire.
- Se il formato è riconosciuto dal browser (es jpg) il file viene aperto in una nuova scheda
- Se il formato non è riconosciuto dal browser (es exe) viene chiesto dove scaricarlo
<A HREF = “documenti/mioFile.pdf”> open PDF file ..</A>.
Nelle opzioni dei browser è possibile configurare, per ogni formato, l‟azione di default da intraprendere.
 ad un indirizzo di posta elettronica,
<A HREF = “mailto:[email protected]”> Apre una finestra in cui si può scegliere fra una
web mail ed un client di posta locale da ricercare sulla macchina. Oggi poco usato.
TARGET controlla la modalità di apertura della nuova pagina a cui punta il collegamento ipertestuale
Può assumere i valori “_self” “_blank” “_top” “_parent” (frames annidati), “Nome di un frame”.
pag. 5
robertomana.it
HTML E CSS
Immagini
<IMG SRC = “filename.jpg”/>
Immagini GIF, JPEG, PNG. Non ha tag di chiusura. Attributi:
SRC definisce il nome e percorso dell‟immagine (percorso assoluto o relativo).
WIDTH e HEIGHT larghezza e altezza a cui ridimensionare l‟immagine
Il valore può essere assoluto (in pixel) oppure in % rispetto alle dimensioni della pagina. Impostando soltanto uno
dei due, (width o height) l‟altro viene calcolato automaticamente mantenendo le proporzioni dell‟immagine.
HSPACE definisce lo spazio orizzontale destro e sinistro che separano l‟immagine dal testo
VSPACE definisce lo spazio verticale superiore e inferiore che separano l‟immagine dal testo
ALT rappresenta il testo alternativo da visualizzare se il caricamento dell‟immagine fallisce.
Riconosciuto dagli screenReader per la lettura vocale del testo ai non vedenti.
BORDER definisce l‟ampiezza di un eventuale bordo di colore fisso pari ad un link non ancora visitato. Lo
spessore del bordo vale per default 0 (1 nel caso di IE).
ALIGN indica l‟allineamento dell‟immagine rispetto al testo circostante. E‟ riferito sia all‟allineamento orizzontale
sia all‟allineamento verticale, che dunque non possono mai essere settate contemporaneamente.
Per l‟Allineamento Verticale i valori possibili sono BOTTOM (default) CENTER e TOP. Se fa parte di un
paragrafo P, l‟immagine viene inserita inline nella riga esattamente dove si trova il tag IMG e viene espansa verso
l‟alto per la sua intera altezza. A fianco rimane però tutto spazio bianco. Utilizzando ALIGN = TOP l‟immagine
viene estesa verso il basso ma rimane lo stesso problema. Utilizzando ALIGN = MIDDLE, la riga si troverà a metà.
Per l‟Allineamento Orizzontale i valori possibili sono LEFT e RIGHT. Utilizzando ALIGN = “LEFT”,
l‟immagine diventa fluttuante e viene ancorata a sinistra mentre il testo la avvolge sulla destra. Vengono accettati
anche paragrafi multipli fino all‟occupazione dell‟intero spazio. ALIGN = RIGHT provoca allineamento a destra.
Per terminare il testo a fianco dell‟immagine e „andare‟ sotto l‟immagine occorre impostare
<BR CLEAR = “LEFT/RIGHT/ALL”>.
Notare che l‟attributo CLEAR (peraltro deprecato in HTML5) è riconosciuto dal tag BR ma non da DIV, P, H.
Per applicare un collegamento ipertestuale ad una immagine, occorre inserire il tag dell‟immagine all‟interno
del tag di link: <A HREF = “http://www.vallauri.edu”> <IMG SRC = “img.jpg”> </A>
Mappe Immagine
Consentono di creare collegamenti ipertestuali multipli a partire da una unica immagine, suddivisa in diverse aree
sensibili. L‟angolo superiore sinistro dell‟immagine rappresenta il punto di coordinate (0,0). L‟asse delle Y è
rivolto verso il basso dell‟immagine. . Sono consentite aree sensibili di forma:
-
Rettangolare: occorre specificare le coordinate dell‟angolo superiore sinistro e dell‟angolo inferiore destro
Ovale: occorre specificare le coordinate del centro ed il raggio
Poligonale generica: occorre specificare le coordinate di ciascun angolo della poligonale.
10, 10
C = 20, 65 px
R 10 px
120, 40
RMIN = 10 px
Per definire una mappa immagine occorre specificare l‟attributo USEMAP all‟interno del tag IMG:
<IMG SRC = “filename.jpg” USEMAP = “#mappa>,
in cui mappa è un target impostabile mediante l‟attributo NAME del tag MAP.
<MAP NAME = “mappa” TITLE=”Piccolo Tooltip replicato su tutte le aree sensibili della mappa”>
<AREA SHAPE = “RECT” COORDS = “10,10,120,40” HREF = “pag1.htm”>
<AREA SHAPE = “CIRCLE” COORDS = “20,65,10” HREF = “pag2.htm” >
<AREA SHAPE = “POLY” COORDS = “78,309,183,255,” TITLE=”Piccolo Tooltip relativo alla singola area”>
</MAP>
pag. 6
robertomana.it
HTML E CSS
Tabelle
<TABLE> </TABLE>
<TR> </TR>
<TH> </TH>
<TD> </TD>
Attributi di Table:
WIDTH
HEIGHT
BORDER
COLS
ALIGN
CELLPADDING
CELLSPACING
BGCOLOR
Inizio e Fine di una tabella. All‟interno saranno racchiuse tutte i tag sulla tabella
Inizio e Fine di una riga. Una riga può contenere celle di dati o celle di intestazione
Inizio e Fine di una cella di intestazione con testo grassetto e centrato.
Inizio e Fine di una cella di dati con testo normale allineato a sinistra
Larghezza complessiva della tabella, compresi BORDER e CELLSPACING (omettere px)
Il WIDTH viene solitamente espresso come % rispetto alla larghezza della pagina:
WIDTH = 80%. La larghezza rimane così indipendente dalla risoluzione del browser
Altezza complessiva della tabella. L‟altezza delle tabella non viene quasi mai impostata, ma
risulterà dalla somma dell‟altezza delle singole celle
Spessore del bordo esterno della tabella. Il bordo interno ha spessore fisso = 1. Impostando il
valore BORDER = 0 (default) spariscono sia il bordo esterno sia quelli interni.
Numero di colonne della tabella
Allineamento della tabella (LEFT, CENTER, RIGHT) rispetto alla pagina
Crea una spaziatura interna alla cella tutto intorno al testo. Il valore di CellPadding funge
in pratica da margine superiore, inferiore, destro e sinistro del testo all‟interno della cella.
Spaziatura in pixel fra le celle
Colore di sfondo dell‟intera tabella
Non esiste un attributo per settare il font-color di una intera tabella, ma occorre racchiudere la tabella dentro un tag
<FONT>. Nulla si può fare sull‟intera riga. E‟ invece possibile impostare un <FONT> dentro la singola cella.
Attributi delle Righe TR ( Il TAG TR non dispone degli attributi Width e Height)
ALIGN
Allineamento del testo in tutte le celle costituenti la riga (LEFT, CENTER, RIGHT, JUSTIFY)
VALIGN
Allineamento verticale del testo nella riga (TOP, MIDDLE, BOTTOM)
HEIGHT
Altezza della riga. Può essere una % della height della tabella. ES HEIGHT = 25%
BGCOLOR Colore di sfondo della riga
Attributi delle Celle TH e TD
WITDH
Larghezza della singola cella. Può essere scritta come % rispetto alla width della tabella
HEIGHT
Altezza della singola cella. Può essere una % della height della tabella. HEIGHT = 25%
ALIGN
Allineamento del testo nella singola cella (LEFT, CENTER, RIGHT, JUSTIFY)
VALIGN
Allineamento verticale della singola cella (TOP, MIDDLE, BOTTOM)
BGCOLOR Colore di sfondo della singola cella
BACKGROUND
Immagine di sfondo della singola cella. Interpretato solo da IE4 in avanti. Insieme al background è
bene specificare sempre anche il bgcolor che dovrà essere utilizzato in caso di non caricamento dell‟immagine
COLSPAN
Numero di colonne su cui estendere la cella.
ROWSPAN Numero di righe su cui estendere la cella. Utili per intestazioni di righe o di colonne.
NoWrap
Il testo all‟interno della cella non va a capo automaticamente.
E‟ possibile inserire una immagine all‟interno di ogni singola cella usando il tag IMG. Per ottenere una buona
impaginazione, impostare le dimensioni della cella allo stesso valore delle dimensioni dell‟immagine.
NOTE: Se non viene specificata nessuna Width né Height, altezza e larghezza delle celle vengono automaticamente
impostate al valore minimo richiesto dal testo. Width e Height della tabella sono prioritarie rispetto alle dimensioni
delle singole celle. Se si impostano Width e Height sulla tabella, altezza e larghezza delle singole celle vengono
automaticamente dimensionate in modo da coprire l‟intera tabella.
Sulla larghezza delle singole celle si imposta in genere un valore % facendo in modo che la somma sia 100. Se si imposta una
larghezza specifica per ogni singola cella, la somma deve coincidere con la larghezza della tabella, altrimenti una o più celle
vengono automaticamente ridimensionate. Se non ci specifica la larghezza dell’ultima cella, questa si estenderà in automatico.
Se si specificano altezze diverse per celle appartenenti alla stessa riga, viene applicata alla seconda l’altezza della prima cella..
<CAPTION ALIGN = TOP / BOTTOM> Didascalia </CAPTION>
Da utilizzare prima o dopo del tag <TABLE>. Aggiunge una didascalia sopra o sotto della tabella.
pag. 7
robertomana.it
HTML E CSS
Note
 Una tabella deve sempre mantenere una struttura regolare. Non sono ammesse su una stessa colonna celle a
larghezza differente. Devono avere tutte la stessa larghezza.
Al più possono estendersi su più colonne o più righe.
 La ripartizione dello spazio fra e varie colonne non segue un criterio ben definito.
Meglio sempre specificare su ogni cella <TH> una larghezza percentuale ben definita a somma 100.
Esempio 1 di utilizzo di COLSPAN e ROWSPAN
Promossi
Respinti
Rossi
Verdi
Bianchi
Gialli
Voti
29
28
25
21
<TABLE border = 4 cols = 3 width=80% align=center>
<TR>
<TH width=25% ROWSPAN=3> Promossi </TH>
<TD align = center COLSPAN=2> Voti </TD> „includo nel TR la 1° delle righe successive
</TR>
<TR>
<TD > Rossi </TD>
<TD > 29 </TD>
</TR>
<TR>
<TD > Verdi </TD>
<TD > 28 </TD>
</TR>
<TR>
<TH width=25% ROWSPAN=2> Respinti </TH>
<TD > Bianchi </TD>
<TD > 25 </TD>
</TR>
<TR>
<TD > Gialli </TD>
<TD > 21 </TD>
</TR>
</TABLE>
Esempio 2 di Creazione di una barra di navigazione
<TABLE align = center border = 0 cols = 5 width = 60%>
<TR align = center>
<TD> <A HREF ="principale.htm"> Home </A> </TD>
<TD width=1%>|</TD>
<TD> <A HREF ="pagina2.htm"> Pagina 2 </A> </TD>
<TD width=1%>|</TD>
<TD> <A HREF ="pagina3.htm"> Pagina 3 </A> </TD>
</TR>
</TABLE>
pag. 8
robertomana.it
HTML E CSS
I Moduli
</FORM> segnano l‟inizio e la fine di un modulo.
Tutti i controlli devono essere inseriti all‟interno di un tag Form. Attributi del tag <form> :
NAME: Nome della form
ACTION indica la pagina HTML che deve essere richiamata in corrispondenza del click sul pulsante di submit.
In corrispondenza del click viene automaticamente passato alla nuova pagina il contenuto di tutti i controlli
presenti all‟interno della form, nel formato Name = Value. Il contenuto dei controlli che non hanno il Name
NON viene inviato, come anche i controlli Disabled.
TARGET = finestra di visualizzazione dell‟Action
<FORM>
I CONTROLLI
La maggior parte dei controlli è introdotta dal tag <INPUT> che NON ha il corrispondente tag di chiusura.
Attributi comuni ai diversi controlli
TYPE: Specifica il tipo di controllo che si intende inserire.
I Valori possibili sono: “text”, “password”, “hidden” “checkbox”, “radio”, “button”, “file”, “image”.
NAME: Nome del controllo.
Controlli dello stesso tipo con lo stesso nome vengono considerati facenti parte di un vettore
(a base zero). Per accedere all‟i-esimo controllo di un vettore scrivere form1.txtNome.(i).Value = “”. .
VALUE: di tipo testo, rappresenta il contenuto del controllo (valore trasmesso in corrispondenza del submit)
DISABLED: True/False. Consente di disabilitare un controllo
TABINDEX: Ordine di tabulazione del controllo. E‟ consentito lasciare degli spazi vuoti nella numerazione.
Per gli attributi Boolean, per settarli occorre scrivere soltanto il nome dell‟attributo (es CHECKED), omettendo
= TRUE oppure ripetere dentro il valore il nome dell‟attributo. Es checked=”checked”.
Se il nome dell‟attributo viene omesso, l‟attributo si intende impostato a FALSE..
Text Box
Esistono 4 possibili tipi di text box
TYPE = “TEXT”
MAXLENGTH Specifica il numero max di caratteri digitabili all‟interno del text box.
SIZE Specifica le dimensioni del campo espresse come numero di caratteri.
Un campo può avere dimensioni inferiori (o comunque diverse) rispetto al max numero di caratteri inseribili. In tal
caso viene automaticamente attivato uno scorrimento del testo verso sinistra.
VALUE rappresenta il contenuto del text box che può essere inizializzato da codice.
READONLY True/False. Consente di utilizzare il Text Box in sola lettura
TYPE=”PASSWORD” text box di tipo password, cioè con tutti i caratteri vengono visualizzati come *.
TYPE=”HIDDEN” si ottiene un text box nascosto utile per memorizzare informazioni senza visualizzarle.
TYPE=”FILE” si ottiene un text box in cui si richiede all‟utente di scrivere il nome di un file. Anziché scriverlo
direttamente, l‟utente lo può ricercare utilizzando il tipico SFOGLIA di windows.
Check Box
TYPE = “CHECKBOX”
CHECKED Se specificato il text box risulterà inizialmente selezionato.
Questo attributo può essere utilizzato in lettura / scrittura dagli script come True / False
VALUE: Valore trasmesso al server in corrispondenza del submit.
Es <INPUT NAME = “chkMaggiorenne” TYPE = “checkbox” VALUE = “si”> Maggiorenne.
Se l‟opzione è selezionata verrà restituita la stringa “chkMaggiorenne = si”, altrimenti stringa vuota.
Radio Button
TYPE = “RADIO”
Vengono considerati come parte dello stesso gruppo tutti i “radio buttons” con lo stesso name
pag. 9
robertomana.it
HTML E CSS
CHECKED Se specificato il radio button risulta inizialmente selezionato.
VALUE: Valore trasmesso in corrispondenza del submit.
Es <P> Avete un computer?
<INPUT NAME = “optComputer” TYPE = “radio” VALUE = “si”> si
<INPUT NAME = “optComputer” TYPE = “radio” VALUE = “no”> no
Verrà restituito “optComputer=si” oppure “optComputer=no”
Pulsanti
</P>
Per i pulsanti VALUE rappresenta la caption del pulsante
TYPE = “BUTTON” Pulsante “normale” per richiamare procedura javascript
TYPE = “SUBMIT” Consente di inviare al server il contenuto della form. Richiama la pagina indicata in ACTION.
TYPE = “RESET” In corrispondenza del click, si limita ad azzerare tutti i campi del modulo.
TYPE = “IMAGE” Pulsante submit di tipo grafico. SRC=”img.jpg” ALT consente di inserire un tool tip alternativo
Da HTML4 in avanti esiste anche il TAG <BUTTON TYPE=”.”>. Attenzione che il default è TYPE=SUBMIT
<TEXTAREA> testo </TEXTAREA> Text Box a righe multiple. Riconosce il placeholder
Dispone dei seguenti attributi già visti nei casi precedente: Name, Disabled, ReadOnly, TabIndex.
TextArea non ha l‟attributo Value. Viene comunque restituito l‟intero testo con i caratteri vbCr e vbCrLf
COLS: Numero di colonne. TextArea usa un carattere teletype a spaziatura fissa, quindi COLS rappresenta in
pratica il numero di caratteri utilizzabili per ogni riga.
ROWS: Numero di righe visibili all‟interno della TextArea. Si possono comunque scrivere più righe che verranno
visualizzate mediante la barra di scorrimento verticale
WRAP: “on” / ”off”. Se viene impostato wrap = “off” i caratteri possono estendersi oltre il valore di COLS con
comparsa automatica della barra di scorrimento orizzontale (fino a quando non viene premuto INVIO):
<SELECT> opzioni </SELECT> List Box / Combo Box
All‟interno dei tag SELECT occorre inserire uno o più tag OPTION. Ad esempio per scegliere un colore:
<OPTION > Rosso </OPTION>
<OPTION SELECTED> Verde </OPTION>
Attributi di SELECT:
SIZE: Numero di righe da visualizzare all‟interno del List Box (in pratica altezza del List Box).
Utilizzando il valore 1 (default), il List Box si comporta come un Combo Box con pulsante di apertura. Il primo
elemento della lista compare visualizzato (ma non selezionato) all‟interno della casella di testo.
MULTIPLE: Consente di selezionare (mediante i tasti Shift e Ctrl) più opzioni all‟interno del List Box.
Es <SELECT Name = LstColori MULTIPLE> ……. </SELECT>.
Ogni voce scelta verrà aggiunta alla stringa SUBMIT nel formato LstColori = Colore1 & LstColori = Colore2
SelectedIndex: Indice della voce attualmente selezionata all‟interno del List Box (partendo da 0).
Utilizzabile soltanto in javascript. Impostando da javascript selectedIndex=-1 compare in testa una riga vuota che
scompare automaticamente in corrispondenza della selezione di una voce sul ListBox.
Attributi di OPTION:
SELECTED: L‟opzione indicata sarà preselezionata all‟avvio. Se nessuna opzione viene impostata SELCTED,
non ci saranno opzioni preselezionate, e, nel caso del combo, verrà visualizzata la prima opzione della lista.
DISABLED: La singola opzione risulterà disabilitata
VALUE: Valore che verrà restituito nel caso in cui, al momento del SUBMIT, l‟opzione risulti selezionata.
Il tag SELECT (a differenza di checkbox e radiobutton) dispone anche di un attributo VALUE che contiene in
ogni momento il value della voce attualmente selezionata (molto comodo).
Il tag LABEL
Tag inline. Applica una etichetta ad un controllo.
In corrispondenza del click sull‟etichetta il focus viene automaticamente spostato sul controllo.
<label for=”txtNome”> Nome: </label>
<input Type=”text” id=”txtNome” />
pag. 10
robertomana.it
HTML E CSS
Frames
I frames consentono di suddividere una pagina web in due o più parti completamente indipendenti fra loro. Per
poter lavorare con i frames occorre innanzitutto definire un FRAMESET, cioè un file.htm che definisce il layout
dei frames nella pagina web e specifica il loro contenuto. Il Frameset dovrà costituire il file index del sito.
In ciascun frame potrà poi essere caricata una pagina html differente.
Per creare una frameset con il seguente layout
Titolo
Barra
Navigazione
Pagina 1
creare un file index.htm (privo dei tag Body che è esclusivo rispetto a Frameset) con i seguenti tag:
<FRAMESET rows = 30%,70%> oppure <FRAMESET rows = 180, * >
30%,70% senza spazi !
<FRAME SRC="Titolo.htm">
<FRAMESET cols = 25%,75% > oppure <FRAMESET cols = 200, * >
<FRAME SRC="BarraNavigazione.htm">
<FRAME SRC="Pagina1.htm" NAME = "frmPrincipale">
La prima riga è alta 180 pixel. La seconda
</FRAMESET>
riga copre tutto lo spazio rimanente
</FRAMESET>
Attributi del tag <FRAMESET>
ROWS Serve ad indicare che il frameset corrente è un FRAMESET Orizzontale costituito da 2 righe.
Esprime inoltre l’altezza di ciascuna riga. L‟* indica che le dimensioni della Riga verranno determinate
automaticamente , occupando tutto lo spazio libero.
COLS Serve ad indicare che il frameset corrente è un FRAMESET Verticale costituito da 2 colonne.
Esprime inoltre la larghezza (di solito in percentuale rispetto alla larghezza di pagina) di ciascuna colonna.
FRAMESPACING Indica lo spazio libero BIANCO tra i vari frame. Indicare 0 per avere continuità.
All‟interno di questo FrameSpace si può inserire un bordo colorato di dimensioni NON superiori alle dimensioni
del FrameSpace stesso. Se superiori vengono comunque troncate a quelle del FrameSpace. Def=6
BORDERCOLOR imposta il colore del bordo (se visualizzato) Es. BORDERCLOR = “RED”
FRAMEBORDER visualizza / nasconde il bordo. FRAMEBORDER = “NO” / ”YES”
BORDER dovrebbe impostare le dimensioni del bordo. Non sembra funzionare. Forse integrato in FrameBorder.
Attributi del tag <FRAME>
SRC = “filename.htm” indica il nome del file che deve inizialmente essere caricato all‟interno del frame
SCROLLING Consente di visualizzare / nascondere le barre di scorrimento di un frame.
“NO” = Mai visualizzate, “YES” = sempre visualizzate, “AUTO” = visualizzate se necessario.
NORESIZE Fa sì che il visitatore non possa ridimensionare il frame (ammesso che i bordi siano visualizzati).
Questo attributo non ha valori ma deve semplicemente essere aggiunto all‟interno del tag.
MARGINWIDTH Imposta un margine su entrambi i lati del frame. Il default è 8 pixel
MARGINHEIGHT Imposta i margini inferiore e superiore del frame. Il default è 8 pixel
NAME Assegna un nome (target) al frame. Consente di accedere al frame dall‟interno di altri frames.
Es. all‟interno della pagina BarraNavigazione possiamo scrivere:
<A HREF = “pagina2.htm” TARGET = “frmPrincipale” > Pagina 2 </A>
Pagina2 verrà aperta all‟interno del frame frmPrincipale
ALT + CLICK in Dreamweaver consente di selezionare i singoli frames costituenti la pagina
IFRAME
IFRAME è un frame senza FrameSet. Rappresenta in pratica una casella di testo all‟interno della quale può essere
caricata una seconda pagina HTML indipendente dalla prima. Presenta soltanto gli attributi indicati nell‟esempio:
<iframe name="myFrame" src="pag.htm" width="80%" height="380" frameborder="1"
allowfullscreen scrolling=”no”> </iframe>
Molto utilizzato per inserire in una pagina un link verso un filmato di YouTube o una Google Map.
pag. 11
robertomana.it
HTML E CSS
I META TAG
I META TAG servono per memorizzare nella sezione di head informazioni relative al contenuto della pagina,
come ad esempio le informazioni per l‟indicizzazione dei motori di ricerca. Non hanno in genere tag di chiusura
Il meta-tag META - due attributi principali :


HTTP-EQUIV, utilizzato per impostare le intestazioni relative alle HTTP Request
NAME, utilizzato per memorizzare contenuti descrittivi della pagina non presenti nell‟intestazione HTTP..
Alcuni server però ignorano gli HTTP-EQUIV per cui, allo stato attuale, i due attributi sono utilizzati
abbastanza indifferentemente. In entrambi i casi l‟attributo CONTENT memorizza il contenuto del meta tag.


<META NAME="tipo di attributo" CONTENT="descrizione">
<META HTTP-EQUIV=" tipo di attributo " CONTENT=" descrizione ">
Elenco dei principali META TAG di tipo NAME
"Keywords" Content="gatti, gatto, cani, cane, addestramento”
Elenco di parole chiave utilizzabili dai motori per aggiornare i loro cataloghi. E‟ raccomandato il minuscolo.
"Description" Content="Sito che tratta dell‟addestramento di cani e gatti”
Descrizione che verrà visualizzata dal motore in caso di esito positivo della ricerca. Max 120 chr
"Author" Content="Nome dell‟Autore” Colui che ha creato il sito.
Es
<meta name="keywords"
content="gatti, gatto, cani, cane, addestramento”>
<meta name="description" content=" Sito che tratta di cani e gatti”>
Elenco dei principali META TAG di tipo HTTP-EQUIV
"Content-Type" Content="text/html” E‟ il tag che dreamweaver aggiunge automaticamente a tutte le pagine
create. Indica il formato della pagina espresso nel tipico formato MIME.
"Content-Language" Content="it-IT” Linguaggio utilizzato nel contenuto della pagina: italiano - Italia
"Expires" Content="data ora”
Data Ora assoluta o relativa oltre la quale la pagina è da considerare obsoleta. In corrispondenza della scadenza i
proxy elimineranno la pagina dalla cache. Il valore 0 significa in pratica no-cache.
"Pragma" Content="no-cache” Avvisa i client (proxy e browser) che la pagina non deve essere messa in cache
"Cache-Control" Content="Private | Public | No-cache | No-store” E‟ la versione HTTP1.1 del precedente
Private = La pagina può solo essere salvata in cache private
Public = La pagina può solo essere salvata in cache pubbliche
No-cache = non può essere messa in cache
No-store = può essere messa in cache ma non archiviata.
"Refresh" Content="4” oppure Content=”4; url=newPage.htm”
Provoca un refresh della pagina ogni 4 secondi (come se si cliccasse sul pulsante Aggiorna”, oppure, in
corrispondenza del Refresh, esegue un Redirect sulla nuova Pagina che viene caricata al posto della corrente.
Es
<meta http-equiv="Cache-control" content="no-cache">
<meta http-equiv="Pragma" content="no-cache">
Il meta-tag LINK
Consente di collegare la pagina corrente d una risorsa esterna. Utilizzato soprattutto per collegare la pagina con il
relativo foglio di stile. Due attributi obbligatori : rel indica il tipo di risorsa a cui sta accedendo, href indica la
destinazione: Esempio :
<link rel="stylesheet" href="mioFile.css">
<link rel="icon" href="myIcon.ico" type="image/ico" size="16x16">
Gli attributi type e size sono facoltativi
pag. 12
robertomana.it
HTML E CSS
I Fogli di Stile -
Cascading Style Sheets
HTML non consente approfondite formattazioni sui caratteri e sulla grafica. Ad esempio il tag FONT consente di
definire alcuni attributi principali sul tipo di font da utilizzare senza tuttavia consentire caratteri di ampie dimensioni
o con uno specifico colore di sfondo. Anziché incrementare il numero di attributi dei vari TAG, da HTML 4.0 in
avanti si è preferito seguire un‟altra strada, introducendo un attributo STYLE, che consente di definire delle
Proprietà di Stile che sono ortogonali rispetto a tutti i TAG HTML, cioè che possono essere applicati
indistintamente a qualsiasi TAG HTML, sempre allo stesso modo e con gli stessi valori.
Le proprietà di STILE negli ultimi anni sono state molto potenziate rispetto agli attributi HTML e costituiscono una
immensa risorsa per la personalizzazione grafica dei siti. Le proprietà di stile vengono di solito scritte in un file
esterno rispetto al file HTML, (in un file con estensione .CSS ) consentendo in questo modo una netta separazione
fra i contenuti (scritti nel file HTML) e la formattazione grafica (impostata nel file .CSS).
Le proprietà di stile possono essere scritte in tre posizioni differenti:
(1) direttamente all’interno dei tag HTML (stili INLINE)
In questo caso le proprietà di stile sono introdotte dall‟attributo STYLE e sono inserite all‟interno di una UNICA
stringa nel tipico formato NOME: VALORE, col punto e virgola come separatore. Il punto e virgola dopo l‟ultima
voce è facoltativo. Es:
<p style =
“color:red; font-size:30pt;” >
Salve a Tutti
</p>
(2) Nell’intestazione della pagina (stili INCORPORATI nella pagina)
<head>
<STYLE>
P { color: green;
</STYLE>
</head>
font-family: verdana,helvetica,sans-serif;
}
<body>
<P>
Questo viene scritto in helvetica di colore verde </P>
</body>
Molto più compatto e dunque molto più leggibile, ma occorre ripetere gli stili in ogni pagina.
(3) In un apposito File Esterno (Fogli di stile ESTERNI memorizzati in un file .css)
Consente una reale parametrizzazione dello stile, visibile in tutte le pagine HTML dell‟intero sito.
Le varie pagine HTML, nella sezione HEAD, dovranno richiamare il file CSS mediante il tag LINK :
<head>
<link
</head>
rel="stylesheet"
href="mioStile.css" >
All‟interno del file .CSS il TAG STYLE può essere OMESSO, iniziando subito a scrivere gli stili:
/* File CSS */
P {color: blue; font-family: time new roman,times,serif;
}
Uno stesso tag può essere ridefinito sia su un file .CSS esterno, sia nell‟intestazione della pagina, sia direttamente
nel TAG (InLine). In tal caso l’ultima definizione nasconde le precedenti.
Cioè gli stili inline sovrascrivono sia quelli della head sia quelli del file esterno.
Le definizioni scritte nella head oppure in un file esterno sono equivalenti. Prevalgono quelle scritte dopo.
Cioè se richiamo il file esterno dopo gli stili definiti all‟interno di <style>, gli stili del file esterno prevalgono su
quelli definiti dentro <style>. In caso contrario prevalgono quelli definiti dentro <style>.
pag. 13
robertomana.it
HTML E CSS
I SELETTORI di stile
Le proprietà di stile possono essere definite mediante tre diversi SELETTORI :
 SELETTORI di TAG, cioè ridefinizione di un tag HTML come negli esempi precedenti
 SELETTORI di CLASSE cioè ridefinizione di uno stile ex-novo associabile a uno o più TAG HTML
 SELETTORI di ELEMENTO (o selettori assoluti) cioè ridefinizione di uno stile ex-novo associabile ad
un unico TAG HTML tramite ID
I Selettori di classe
Talvolta, all‟interno di una stessa pagina, occorre ridefinire lo stile di un tag in più modi differenti a seconda dei
contesti. A tal fine occorre definire un selettore di classe in grado di creare tante classi differenti dello stesso tag,
associabili poi, a seconda dei contesti, a istanze diverse dello stessol tag.
Esempio di selettori di classe scritti in un file .CSS :
p.titolo {
color : red;
font-size : 30pt}
p.sottotitolo {
color : RGB(125,125,255);
font-size : 20pt}
NB: p.titolo SENZA SPAZI !
I selettori di classe potranno poi essere associati alle varie istanze del tag mediante l‟utilizzo dell‟attributo CLASS
<body>
<P class="titolo"> Questo è un titolo </P>
<P class="sottotitolo"> Questo è un sottotitolo
</P>
E‟ anche possibile definire un selettore di classe generico, cioè senza anteporre davanti il nome di nessun tag, ma
semplicemente cominciando a scrivere direttamente il puntino. Si crea così un selettore generico che potrà essere
associato a qualsiasi tag HTML (compatibilmente con gli stili definiti al suo interno). Esempio:
.nuovoStile { font-size:24pt; color:red; }
.nuovoStileBold { font-size:24pt; color:red; font-weight:bold;}
<p class="NuovoStile"> Questo è il nuovo stile
<span class="NuovoStileBold"> creato </span> </p>
All‟interno del selettore di classe, oltre agli stili del tag, è possibile ridefinire anche un singolo attributo HTML :
.colore:hover{
color : yellow;
}
<div class="colore"> Quando il mouse passa qui la scritta diventa gialla</div>
I Selettori di Elemento (selettori assoluti)
Dato un tag avente un identificativo ID univoco, il Selettore di Elemento consente di associare uno stile a quel
singolo elemento HTML. Il selettore di Elemento è rappresentato con un simbolo # (pound) anteposto al nome del
selettore. Essendo ID univoco nella pagina, ogni selettore assoluto può essere associato ad un unico elemento
HTML.
#BOX { }
#BOX a { }
#BOX a:hover { }
definisce lo stile di base di un certo livello BOX
ridefinisce le caratteristiche del tag a tutte le volte che viene utilizzato all‟interno di BOX
ridefinisce l‟attributo hover del tag a sempre all‟interno del livello BOX
<div id="BOX">
<a href="Pagina2.html"> Questo link è scritto con stile BOX a </a>
</div>
pag. 14
robertomana.it
HTML E CSS
#BOX {
margin: 0 auto;
border-top: 2px solid #dadada;
width: 760px;
text-align: center;
color: #808080;
font-size: 0.9em;
}
# BOX p {
padding: 0;
margin: 0; }
# BOX a {
color: #808080;
background-color: #CCC; }
# BOX a:hover {
color: #ff0000; }
Regole di applicazione dei selettori











I vari selettori di stile possono far riferimento a tag istanziati uno dentro l‟altro. Ad esempio
a) div.class1 div.class2 significa tag div con stile class2 definito all‟interno di un tag
div con stile class1
b) #liv1 p a significa tag a inserito all‟interno di un tag p inserito all‟interno del tag #liv1
Oltre ai tag, dopo un selettore assoluto si possono indicare anche delle classi:
#box .red significa classe red all‟interno del tag #box
#box p.red significa tag p classe red al‟interno del tag #box
Davanti al selettore assoluto si può facoltativamente inserire il tipo del tag in cui il selettore assoluto è stato
definito: div#liv1 label
Le regole di stile possono essere assegnate contemporaneamente a più tag / classi.
A tal fine occorre separare i tag mediante una VIRGOLA
div, p, .riga { } significa applicare ai tag div, p e alla classe .riga
Le varie regole possono essere arbitrariamente combinate insieme.
div#liv1 label, div#liv2 label, div#liv2 p a,
.riga {
}
Gli stili vengono assegnati in cascata. A parità di importanza il successivo copre il precedente
Il selettori di elemento (assoluto) è prioritario rispetto agli altri due selettori,
cioè prevale anche anche si viene scritto prima
Il selettori di classe è prioritario rispetto al selettore di tag
cioè prevale anche anche si viene scritto prima
I selettori più specifici sono prioritari rispetto a quelli più generici
div #box1 {color:red}
#box1 {color:green}
box1 avrà color red
Uh qualsiasi elemento può implementare contemporaneamente più classi
semplicemente separandole mediante uno spazio. Es <div class=”box graphics”>
Non è consentito assegnare agli ID dei nomi numerici
Analisi delle Property CSS 2.0
I seguenti stili sono applicabili a TUTTI i tag HTML. Per comodità verranno analizzati per categoria.
I campi COLOR possono assumere i seguenti valori:
#RRGGBB Colore espresso mediante le componenti esadecimali R G B
RGB (r, g, b) Le componenti RGB sono questa volta espresse mediante numeri interi decimali compresi tra 0 e 255.
RGBa (r, g, b, a) Solo CSS3. alfa indica la trasparenza ed è un numero decimale compreso tra 0 (trasparente) e 1 (solido).
16 colori della palette VGA: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white yellow
pag. 15
robertomana.it
HTML E CSS
I campi Dimensionali (width, height, etc) possono assumere i seguenti valori:
Assoluti
px (pixel)
pt (points; 1pt=1/72 pollice) (come li intende Word)
in (inches; 1in=2.54cm)
cm, mm, pc (picas; 1pc=12pt)
Attenzione che tra il valore numerico e l‟unità di misura non devono essere lasciati degli spazi.
Font ed em
Il font può essere espresso in una delle seguenti Unità di Misura:
punti web
1
2
3
4
5
6
7
em
0,625 em
0,82 em
1 em
1.13 em
1.5 em
2 em
3 em
px
10 px
13 px
16 px
18 px
24 px
32 px
48 px
pt
7,5 pt
10 pt
12 pt (default)
13,5 pt
18 pt
24 pt
36 pt
1pt = 4/3 px
pt
xx-small
x-small
small
medium
large
x-large
xx-large
- 1px = 3/4
em è una unità di misura relativa. Un font-size espresso in em indica un fattore di ridimensionamento del font
corrente rispetto al valore del genitore. La property font-size infatti viene ereditata dall’elemento genitore (a
differenza ad esempio di padding, margin, e background-color che assumono il valore di default del tag in cui si
trovano). In quest‟ottica font-size:1.5em significa incrementare il font-size di un 50 % rispetto al font del genitore
(arrivando eventualmente fino al valore del body che ha un font-size di default pari a 16px = 12 pt (3 punti web).
Riferito invece a margin e padding, em indica la loro dimensione rispetto al font-size. Impostare padding:1em
significa assegnare al paddding lo stesso valore del font-size. Se l‟elemento utilizza un font-size maggiore, il padding
aumenterà di conseguenza. Idem se il font-size si riduce.
Elementi BLOCK ed Elementi INLINE
I Tag block sono contenitori che occupano un blocco di spazio sulla pagina. Vanno a capo in corrispondenza del
chiuso tag. In genere sono preposti a contenere testo o altri oggetti ( DIV, P, H, LI, TABLE, etc).
 hanno come default la proprietà display:block;
 non accettano altri oggetti sulla stessa riga (salvo utilizzo della proprietà float)
 riconoscono le proprietà Width Height e Text-Align, ma non Vertical-Align
Width e Height
Il valore di default di width è l‟intera larghezza della pagina (o del contentore)
Il valore di default di height è auto. Significa che l‟altezza si adatta automaticamente al contenuto.
Il valore percentuale (Width:50%) è riferito rispetto alle dimensioni del genitore
I Tag inline (a, img, b, i, u, span, input) vengono visualizzati in linea con il testo circostante.
Sono generalmente contenuti all‟interno di un paragrafo insieme al normale testo.
 hanno come default la proprietà display:inline;
 possono essere inseriti all‟interno di una riga come il normale testo
 non riconoscono le proprietà Width Height (che vengono assegnate in base al contenuto dell‟oggetto) e
Text-Align (che non è significativa). ma riconoscono Vertical-Align. Ad esempio, se un link ha
un testo che occupa 100px in larghezza, anche impostando una larghezza maggiore, lo spazio occupato
dall‟elemento sarà sempre di 100 pixel. Questo problema può risultare scomodo soprattutto nei menu dove
spesso l‟area cliccabile deve essere maggiore di quella effettivamente occupata dall‟elemento.
pag. 16
robertomana.it
HTML E CSS
E‟ sempre possibile modificare qualunque tag da BLOCK a INLINE e viceversa.
 Se su un tag P (o DIV) si imposta la proprietà DISPLAY:INLINE, il paragrafo si posiziona immediatamente
dopo rispetto al tag precedente e “libera” lo spazio sulla sua destra.
 Se su un tag A si imposta la proprietà DISPLAY:BLOCK, il tag si comporta come un paragrafo, cioè occupa
tutta l‟area a sua disposizione forzando il prossimo elemento sotto di lui (a meno di utilizzare float:left).
Se il tag A è definito all‟interno di un tag DIV, il tag <a> coprirà completamente la larghezza di <DIV>
Sia i block tag che gli inline tag hanno per default sfondo trasparente
Il tag DIV
Il tag DIV rappresenta un contenitore generico preposto a contenere qualsiasi oggetto (testo, immagini, video, etc).
 Se non si specifica la posizione o l‟allineamento i tag DIV vengono posizionati uno sotto l‟altro esattamente
come i paragrafi (default: position = static).
 Se non si specificano le dimensioni i tag DIV occupano come larghezza l‟intera riga e come altezza lo
spazio necessario a contenere quanto inserito all‟interno, esattamente come per i paragrafi
Se dentro il tag DIV c‟è una immagine, il tag occupa una altezza pari a quella dell‟immagine.
 Se si specificano width e height, questi rappresentano NON la reale dimensione del box, ma l’area utile
interna. A questi valori occorre ancora sommare l‟eventuale dimensione del padding e del bordo.
 Sui tag DIV si può realizzare il cosiddetto posizionamento assoluto in un certo punto della pagina
 I tag DIV possono essere visualizzata uno a fianco dell‟altro impostando la proprietà float=left/right
Viceversa il tag P è un tag preposto a contenere solo testi e elementi INLINE in genere. Non può invece contenere
BLOCK tag, nel qual caso verrebbe falsata il normale utilizzo degli stili.
Ridefinizione di un singolo ATTRIBUTO HTML
E‟ anche possibile ridefinire i singoli attributi di un TAG scrivendo TAG:ATTRIBUTO. Es:
a:hover { color : yellow; }
Le proprietà relative ai Font
Font-Family
Font-Size
Font-weight
Font-style
Font-variant
Font
[[<family-name> | <generic-family>],]
Nomi dei font separati da virgola. Se il browser dispone del primo font, utilizza quello, altrimenti passa
al secondo e così via. Si mettono davanti i Font più specifici ed in coda quelli più generici.
Non c‟è valore di default, che dipende dalle impostazioni del Browser. Le generic-family sono :
 serif - sans-serif - monospace
 cursive (e.g., Zapf-Chancery) - fantasy (e.g., Western)
Font-Family: Verdana, Arial, Helvetica, sans-serif;
Font-Family: Times News Roman, Times, serif;
font-size: <absolute-size> | <relative-size> | <length> | <percentage>
dimensione del font in punti, in pixel, pollici, centimetri, punti web, etc
<absolute-size> sono i 7 valori HTML: xx-small | x-small | small | medium | large | x-large | xx-large
<relative-size> può essere larger | smaller. <length> valore del Font Size in pt o px
<percentage> percentuale rispetto all‟attuale element‟s font. Per element’s font si intende il size attuale
del font stabilito dal Font genitore (eventuale tag esterno). Se i tag esterni non definiscono il Font, per
element’s font di intende il font – size di default.
<normal | light | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 >
Spessore del carattere. 100=Light, 400=Normal, 700=Bold, 900=Bolder
<normal | italic | oblique> (simile all‟italic ma più inclinato).
<normal | SMALL-CAPS > SMALL CAPS SIGNIFICA CHE ANCHE LE MINUSCOLE SONO SCRITTE IN
MAIUSCOLO, MA SONO LEGGERMENTE PIU‟ PICCOLE,
Consente di specificare tutte le proprietà di Font in un‟unica dichiarazione, tranne font-family che può
essere espresso con un singolo nome oppure dichiarato a parte. Es font: 50px bold italic
pag. 17
robertomana.it
HTML E CSS
Le proprietà relative ai Testi
Color
Text-Decoration
Text-Align
Vertical-Align
Line-Height
Word-Spacing
Letter-Spacing
Text-Indent
Text-Transform
< color > di primo piano. Il default dipende dal Browser.
< none | [ underline || overline || line-through || blink ] >
Il valore none può essere utilizzato per eliminare la sottolineatura dai collegamenti ipertestuali
< left | right | center | justify >. Il valore di default dipende dall‟impostazione del Browser
Applicabile soltanto agli elementi di tipo BLOCK
< baseline | sub | super | top | text-top | middle | bottom | text-bottom | <percentage> >
Applicabile soltanto per i tag INLINE <percentage> è riferito al valore di line-height
 baseline (align baselines of element and parent)
 middle (align vertical midpoint of element with baseline)
 sub (subscript) super (superscript)
 text-top (align tops of element and parent's font) relative positioning
 text-bottom (align bottoms of element and parent's font) relative positioning
 top (align top of element with tallest element on the line)
 bottom (align bottom of element with lowest element on the line)
<normal | <number> | <length> | <percentage> >
Definisce l‟altezza della riga, Normal significa Line-Height = Font-Size, cioè la riga avrà una
altezza pari a Font-Size. Eventuali bordi vengono tracciati sul perimetro del testo.
Impostando un valore inferiore rispetto al Font-size, eventuali bordi avrebbero interferenza con
il testo ed il testo sfocerebbe nella zona del margine. Number è un numero puro (senza unità di
misura e senza %), che produce una altezza pari a N * Font-Size. percentage è riferito al FontSize Il testo viene centrato verticalmente rispetto al valore di Line-Height
<normal | <length>
Definisce una spaziatura addizionale fra le parole. Sono ammessi valori negativi,.
<normal | <length>
Definisce una spaziatura addizionale fra i singoli caratteri. Sono ammessi valori negativi.
Indentazione della prima linea di testo. Applicabile soltanto ai Block Elements
<length> | <percentage> Default 0.
<percentage> è riferito al valore di Width
<none | capitalize | uppercase | lowercase>
 capitalize (Converte in maiuscolo il primo carattere di ogni parola)
 uppercase (Converte in maiuscolo l‟intera parola)
 lowercase (Converte in minuscolo l‟intera parola)
La proprietà Vertical-Align
Questa proprietà, nel caso dei tag inline, definisce l‟allineamento verticale del tag inline rispetto al testo circostante.
 Notare che il vertical-align NON sortisce alcun effetto rispetto al contenitore esterno, ma si limita ad allineare
l‟oggetto rispetto alla riga in cui si trova. Inoltre, nel caso di una immagine, è possibile allineare l‟immagine in
alto/basso/centro rispetto alla riga, ma non è possibile aggregare il testo a fianco, nel qual caso occorre float.
 Nel caso in cui l‟oggetto si trovi all‟interno di una TableCell, vertical-align è invece riferito alla cella
all‟interno della quale si trova l‟oggetto.
I BORDI di un contenitore
Border-Top-Width
Border-Left-Width
Border-Right-Width
Border-Bottom-Width
Border-Width
Border- Color
<thin | medium | thick | <length> > Spessore del bordo superiore. Solo valori positivi.
Spessore del bordo sinistro
Spessore del bordo destro
Spessore del bordo inferiore
Consente di specificare tutti quattro i bordi nel seguente ordine: top, right, bottom, left
Specificando un solo parametro, il valore viene applicato a tutti quattro i bordi.
Specificando 2 parametri, il 1° valore viene applicato a top/bottom, il 2° a left/right
<color> Colore dei bordi. Per default viene assunto il valore della Proprietà COLOR.
Può contenere 1 – 2 – 4 valori nel seguente ordine: top, right, bottom, left
Specificando un solo colore, il valore viene applicato a tutti quattro i bordi.
E‟ possibile utilizzare le proprietà singole Border-Top –Color, etc su ciascun bordo
pag. 18
robertomana.it
HTML E CSS
Border-Style
Border-Top
Border Left
Border Right
Border Bottom
Border
[ none | dotted | dashed | solid | double | groove | ridge | inset | outset ]
Stile dei Bordi. Si possono specificare fino a quattro valori, nel qual caso il primo valore è
riferito al Top Border, il secondo al Right-Border, Bottom Border e Left Border
E‟ possibile utilizzare le proprietà singole Border-Top –Style, etc su ciascun bordo
<border-top-width> || <border-style> || <color>
Consente di impostare in un sol colpo width, style e color del Top Border
Consente di impostare in un sol colpo width, style e color del Left Border
Consente di impostare in un sol colpo width, style e color del Right Border
Consente di impostare in un sol colpo width, style e color del Bottom Border
Consente di impostare in un sol colpo width, style e color di tutti quattro i bordi. Es
A:active { border: thick double red }
Lo SFONDO di un contenitore
La proprietà Background consente di impostare lo sfondo di un Tag (cioè il colore e/o un‟eventuale immagine di
sfondo). Applicabile al body ma anche a tutti i tag di tipo BLOCK.
Background-Color
Background-Image
Background-Repeat
Background-Attachment
Background-Position
Background
<color> | transparent > Colore di sfondo dell‟elemento (nel caso l‟img non venga caricata)
< url(img/sfondo.gif) | none | initial (valore originario)> Immagine di sfondo.
Se il nome del file contiene degli spazi occorrono gli apici : url(“mio file.jpg”);
<repeat | repeat-x | repeat-y | no-repeat>
repeat = ripete l‟immagine di sfondo sia orizzontale sia verticale riempiendo la pagina. Default
repeat-x = ripete l‟immagine di sfondo soltanto in orizzontale (tile orizzontale)
repeat-y = ripete l‟immagine di sfondo soltanto in verticale (tile verticale)
<scroll | fixed> Con scroll l‟immagine di sfondo scorre insieme al contenuto della pagina
Con fixed l‟immagine di sfondo rimane fissa sul video anche quando si fa scorrere il contenuto
[<percentage> | <length>] | [top | center | bottom] | [left | center | right]
Specifica l‟allineamento dell‟immagine di sfondo rispetto al contenitore.
Es: background: bottom right #00cc00
In caso di ambiguità, il primo valore indica la posizione
orizzontale, il secondo la posizione verticale. Se si specifica
un solo valore si intende orizzontale, ed il verticale è assunto
= center
Per default l‟allineamento è LEFT TOP (0%, 0%) e l‟immagine si estende x le sue dimensioni
<length> indica le coordinate assolute x y di posizionamento dell‟immagine.
Consente di specificare tutte le proprietà di Background in un‟unica dichiarazione
MARGIN e PADDING. Area di occupazione degli oggetti
Margin rappresenta il margine esterno di un elemento. Consente di distanziare / avvicinare un elemento rispetto
agli elementi vicini. Applicabile soltanto ai tag di tipo BLOCK, cioè ai contenitori.
Margin-Top
Margin-Left
Margin-Right
Margin-Bottom
Margin
<length> | <percentage> | < auto >
Margine superiore dell’elemento rispetto al genitore. Sono ammessi valori negativi
<percentage> è riferito alle dimensioni del genitore
Consente di specificare tutti quattro i margini nel seguente ordine: top, right, bottom, left
Specificando un solo parametro, il valore viene applicato a tutti quattro i margini.
Specificando 2 parametri, il primo valore viene applicato a top/bottom, il secondo a left/right
Specificando tre parametri il significato è il seguente: top, right/left, bottom
E’ possibile utilizzare il valore AUTO per eseguire la centratura (tipicamente centratura
orizzontale). In tal caso l‟oggetto viene centrato rispetto all‟oggetto genitore.
Padding rappresenta invece lo “spazio interno" tra il bordo e il contenuto del tag.
Il padding non influisce sulla distanza dell'elemento dagli altri elementi.
pag. 19
robertomana.it
HTML E CSS
Padding-Top
Padding-Left
Padding-Right
Padding-Bottom
Padding
<length> | <percentage> Default: 0
Distanza tra il contenuto dell‟elemento ed il bordo superiore. Soltanto valori positivi.
<percentage> è riferito alle dimensioni del genitore.
NON è CONSENTITO usare AUTO con PADDING
Consente di specificare tutti quattro i padding esattamente come per margin.
Il padding può anche essere utilizzato per impostare l‟indentazione del tag blockquote o di un paragrafo.
blockquote { padding-left: 10px; }
BLOCK TAG
Nel caso dei block tag Padding contribuisce ad aumentare le dimensioni dell’oggetto.
Si consideri il seguente esempio:
p {
font-size:16px;
border: solid #000000 2px;
margin: 50px;
width:400px;
height:30px;
padding: 20px 40px 20px 80px;
}
50 px
524 px
50px
Oltre ai 400 px di larghezza del paragrafo, vengono lasciati 40px a dx e 80 a sx per cui il paragrafo alla fine avrà
una Width complessiva di 400 + 40 (right padding) + 80 (left padding) + 4 (bordi) = 524 px.
La stessa cosa vale per Height che rappresenta l‟altezza interna del contenitore. Al valore di Height, occorre poi
sommare PaddingTop, PaddingBottom e Bordi. Nell‟esempio precedente, con Height:30 px, l‟altezza reale
complessiva sarà PaddingTop + Height + PaddingBottom + Bordi = 74px.
Se non si specifica il valore di height, il browser lascia esattamente 20px sia sopra che sotto, per cui il testo
risulterà perfettamente centrato in verticale. Se invece si specifica il valore di height, per avere allineamento
verticale height dovrebbe avere lo stesso valore dell‟occupazione verticale del testo.
 Se Height è superiore rispetto all’occupazione verticale del testo (cioè se il testo occupa verticalmente
non 30px ma ad es solo 20px) la scritta non risulterà centrata verticalmente ma risulterà più spostata verso
l‟alto. I 10 px di eccedenza vengono infatti aggiunti sotto la scritta prima del Padding Bottom.
 Se Height è inferiore rispetto all’occupazione verticale del testo, il testo deborderà al di sotto dell‟area
occupata dal paragrafo, andando eventualmente ad interferire con gli elementi successivi.
Margin definisce invece il margine esterno all‟oggetto al di la del bordo. Non interviene nel computo delle
dimensioni dell‟oggetto.
Notare che se il tag P precedente fosse inserito all‟interno di un DIV l‟eventuale padding del tag DIV (es 20px) si
somma al margin del tag P (50px) per cui il livello esterno avrà:
larghezza complessiva = 524 + 50 + 50 (margin del tag P) + 20 + 20 (padding del tag DIV) = 664 px
altezza complessiva = 74 + 50 + 50 (margin del tag P) + 20 + 20 (padding del tag DIV) = 214 px
INLINE TAG
Nel caso degli tag inline vi sono invece notevoli differenze:
 WIDTH e HEIGHT non vengono riconosciuti. La larghezza complessiva del tag viene calcolata in
automatico come Lunghezza del testo + PaddingLeft + PaddingRight + Bordi, mentre l‟altezza complessia
viene anch‟essa calcolata in automatico come Altezza del testo + PaddingTop + PaddingBottom + Bordi.
pag. 20
robertomana.it
HTML E CSS
 Sono normalmente riconosciute le proprietà background-color, font-size, margini laterali e padding laterali.
 Margin-Top e Margin-Bottom non sono riconosciuti.
 Padding-Top e Padding-Bottom sono riconosciuti (la loro area viene infatti ricolorata del colore definito
in background-color), però non consentono di spaziare l‟elemento inline rispetto al testo antecedente o
successivo, che deborda all‟interno dell‟eventuale padding dell‟elemento corrente.
Centratura verticale di una singola riga : la proprietà LineHeight
Se la riga da centrare è una sola, il modo più semplice per eseguire la centratura verticale è quella di utilizzare la
proprietà line-height, impostando il valore di line-height allo stesso valore di height .
.box
{
width: 250px;
height: 90px;
line-height: 90px; }
La proprietà Line Height indica l‟occupazione verticale della singola riga. Il default è Line-Height = Font-Size, cioè
la riga avrà una altezza pari a Font-Size. Eventuali bordi vengono tracciati sul perimetro del testo. Impostando un
valore inferiore rispetto al Font-size, eventuali bordi andrebbero ad interferire con il testo.
 Se all‟interno del paragrafo c‟è una sola riga, Line Height e Height sono sostanzialmente la stessa cosa.
 Nel caso invece di righe multiple, impostando Line Height le righe risulterebbero decisamente spaziate con un
effetto abbastanza „brutto‟. Nel caso di righe multiple la soluzione più semplice è quella di omettere Height e
agire sul Padding.
La proprietà Overflow
Ha senso quando il testo interno eccede le dimensioni di un contenitore che deve avere dimensioni fisse e non può
estendersi in altezza per contenere tutto il teso.
<div style="width:160px; height:80px;
I possibili valori che può assumere sono:
 visible La porzione eccedente le dimensioni del box viene mostrata eccedendo le dimensioni (defult).
 hidden La porzione eccedente le dimensioni del box non viene mostrato
 scroll Indipendentemente dal contenuto, sul contenitore vengono applicate sia la barra di scorrimento
verticale che quella orizzontale. La barra di scorrimento orizzontale ha senso se all‟interno del contenitore ci
sono degli elementi (es immagini) la cui larghezza eccede le dimensioni del box, oppure degli elementi con
position:absolute in posizioni che eccedono la larghezza del box.
 auto Se si impostano Width e Height, viene visualizzata la barra di scorriemento necessaria (verticale o
orizzontale o entrambe) solo se il testo eccede le dimensioni del contenitore.
oveflow:auto è anche utilizzato, sempre su un contenitore, per “sentire” anche gli elementi FLOAT interni
(nel qual caso occorre NON impostare width e height).
Utilizzo della slide bar su un contenitore interno
Impostando su un contenitore una altezza fissa (con relativo padding) con overflow:auto c‟è però il piccolo
inconveniente che il testo, durante il trascinamento della slide bar, tenderebbe a invadere sia il padding inferiore
che quello superiore. Per evitare questo inconveniente una soluzione spesso adottata è quella inserire un box
interno impostando sul contenitore interno stesso overflow:auto, margin:0, padding:0, width e height pari a quelle
definite per il contenitore esterno (area client). In questo modo il testo non può uscire dal contenitore interno e non
potrà quindi invadere il padding del contenitore esterno.
pag. 21
robertomana.it
HTML E CSS
Centratura di un box all’interno di un altro box
Un‟altra soluzione per centrare un box all‟interno di un altro box è quella di eseguire un posizionamento assoluto
del contenitore interno nell‟area client del contenitore esterno:

sul contenitore esterno la proprietà POSITION:RELATIVE in modo da poter eseguire al suo
interno un allineamento assoluto sugli oggetti figli.
 sul contenitore interno si posiziona il punto TopLeft al centro del contenitore esterno (valore=50%)
e poi si imposta un margine superiore pari alla metà della altezza del contenitore interno ed un
margine sinistro pari alla metà della larghezza del contenitore interno.
#inner {
#container{
position:absolute;
position:relative;
width:200px; height:200px;
width:600px;
top:50%; left:50%;
height:200px;
margin-top:-100px;
padding:0px; }
margin-left:-100px; }
LIST Properties (Elenchi puntati e numerati)
List-Style-Type
List-Style-Image
List-Style-Position
List-Style
disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none
Applicabile a UL e OL. Indica il tipo di marker da utilizzare
Esempio: OL { list-style-type: upper-alpha }
Impostando margin:0 e padding:0 il List-Style-Type viene automaticamente impostato a none
<url> | none Indica l’immagine da utilizzare come marker al posto dei puntini.
Prioritaria rispetto a List-Style-Type
inside | outside Inside fa sì che la seconda riga continui sotto il puntino
Consente di impostare in un sol colpo le tre proprietà precedenti.
La proprietà cursor per cambiare forma al cursore del mouse
Esempio:
div:hover { cursor: pointer; }
Nei CSS3 sono stati introdotti i seguenti cursori:
Personalizzare l’aspetto dei Link: Le pseudoclassi
Oltre che ai tag, le proprietà di stile possono essere applicate anche ad alcuni attributi dei tag.
Nei CSS 2 sono state definite diverse pseudoclassi introdotte tramite i due punti :
a:link, a:visited, a:hover, a:active, indicano un link a riposo, visited, hover, e active (clickato)
:focus generico (cioè applicabile a più tag) indica la presenza del focus. Utile per modificare lo stile di un campo
di input nel momento in cui riceve il focus. Per quanto concerne il tag a, in realtà l‟attributo focus in condizioni
normali non è quasi mai attivo in quanto, quando l‟elemento riceve il focus dopo essere stato clickato, di solito
viene richiamata un‟altra pagina o un‟altra sezione della stessa pagina, per cui l‟elemento perde immediatamente il
focus. L‟unico caso in cui l‟elemento mantiene il focus è il quando il collegamento contiene un link alla default
route href=”/”, link che in realtà non viene eseguito, per cui il fuoco rimane sull‟elemento.
Poichè HTML non ha memoria, non esiste un a:current, che può essere gestito solo attraverso Java Script.
pag. 22
robertomana.it
HTML E CSS
CSS Reset
Quando si progetta un foglio di stile, bisogna tener conto anche degli stili di default utilizzati in ogni browser.
Purtroppo in questo non esiste uno standard, così i valori iniziali possono variare da browser a browser per cui, in
fase di realizzazione del layout, si possono ottenere risultati abbastanza diversi nei vari browser. La soluzione più
semplice a questo problema è quella di impostare inizialmente un file di reset che resetti tutti i valori di default.
A tale scopo sono stati realizzati diversi fogli di stile chiamati CSS Reset e vanno inseriti prima delle altre regole
CSS del progetto. Tra i più noti Eric Meyer CSS Reset e Yahoo CSS Reset.
Esempio:
* {
margin: 0;
padding: 0;
…………… }
* rappresenta il cosiddetto selettore universale che consente di applicare lo stile a tutti i tag.
La proprietà FLOAT
La proprietà float consente di rimuovere un elemento dal normale flusso del documento e ancorarlo su uno dei
lati (destro o sinistro) del suo elemento contenitore. Il contenuto che circonda l‟elemento scorrerà intorno ad
esso sul lato opposto rispetto a quello indicato come valore di float. Gli elementi float non vengono conteggiati nel
normale rendering della pagina,
 Quando si imposta float:left su un elemento, questo non si estende più per tutta la riga, ma solo
per la larghezza necessaria per visualizzare il suo contenuto. L‟elemento in sostanza si comporta come
un elemento INLINE ma mantiene le caratteristiche degli elementi BLOCK, come ad es WIDTH e HEIGHT
 L‟eventuale elemento float deve essere dichiarato “prima” degli elementi non float, in modo che questi
possano andare ad occupare l‟area intorno all‟elemento float.
 Gli elementi successivi all‟elemento float, se non sono dichiarati float, vengono “sovrapposti” agli
elementi float (che non sono conteggiati nel rendering), a meno che l‟elemento successivo non venga
dichiarato overflow:auto, nel qual caso andrà ad occupare l‟intero spazio orizzontale a sua
disposizione. In genere si imposta float:left su una sequenza di elementi, di cui l‟ultimo avrà float:none e
overflow:auto in modo da occupare tutto lo spazio rimanente fino a fine riga.
Un‟altra tecnica talvolta utilizzata. è quella di inserire tre livelli, il primo float:left, il secondo float:right ed
il terzo non fluttuante (con overflow:auto) in modo che vada ad occupare interamente tutta l‟area centrale.
Questo terzo elemento può non essere dichiarato overflow:auto, ma è sufficiente che abbia un margin-left o
un padding-left adeguati in modo da non sovrapporsi al primo elemento float di sinistra
Gestione del wrapper esterno
Il contenitore esterno non “sente” gli elementi float contenuti al suo interno. Occorre quindi:
 Specificare manualmente width e height del contenitore in modo che riesca a “contenere” gli elementi float
 Fare in modo che gli elementi float vadano ad occupare un‟area „inutilizzata‟ del contenitore (ad esempio un
float rigth a destra di uno o più elementi che non occupano tutta la riga)
 Dichiarare il contenitore float oppure overflow:auto. In entrambi i casi l‟altezza del contenitore si
adatta in modo da contenere tutti gli elementi float interni. Per quanto concerne la larghezza, nel caso di
overflow:auto occupa tutta la riga, mentre nel caso float occupa soltanto lo spazio minimo necessario a
contenere gli elementi interni. In entrambi i casi è consigliato specificare manualmente la larghezza desiderata
Limiti:
 Nel caso di contenitore float :
- Non sente margin:0 auto per cui il contenitore non può essere centrato nella pagina
- Occorre impostare float su tutta la catena degli antenati (a meno che non abbiano la loro altezza)

Nel caso di contenitore overflow:auto si ha un problema nel caso del DRAG & DROP dove risulta
impossibile trascinare gli elementi al di fuori del contenitore, in quanto il contenitore si „allarga‟
introducendo la barra di scorrimento.
pag. 23
robertomana.it
HTML E CSS
Posizionamento Assoluto e Relativo
Position
Left / Right
Top / Bottom
Display
Float
Clear
Whitespace
< Static Absolute Relative Fixed>
STATIC = segue il normale posizionamento HTML
<length> | <percentage> | auto Posizione x dell‟elemento
Definendo una sola delle proprietà, l‟altra viene desunta automaticamente in base a WIDTH
L‟impostazione Position:Absolute; Right:30px; esegue un allineamento a destra a 30px di distanza
dal bordo destro del genitore
<length> | <percentage> | auto Posizione y dell‟elemento
Definendo una sola delle proprietà, l‟altra viene desunta automaticamente in base a HEIGHT
L‟impostazione Position:Absolute; Bottom:30px; esegue un allineamento in basso 30px al di sopra
del bordo inferiore del genitore
block | inline | list-item | none. Consente di modificare il modo di visualizzare gli elementi HTML da
INLINE a BLOCk e viceversa.
 block L‟elemento viene visualizzato come block, riempiendo tutta l‟area a sua
disposizione e con line break before and after.
 inline L‟elemento viene visualizzato come inline (no line break)
 none (no display) L‟elemento NON viene visualizzato (es solo testo)
 table il contenitore si comporta come una tabella
 table-cell il contenitore si comporta come una table-cell (che però deve essere in un
contenitore table) per cui il suo contenuto si comporta come testo inline interno alla cell
left | right | none Un elemento può flottare a destra o a sinistra rispetto al genitore. Consente. ad
esempio, di inserire all‟interno di un livello una immagine allineata a sinistra e circondata dal testo
( simile agli attributi HTML ALIGN=left e ALIGN=right del tag IMG)
Impostando cioè float:left e width:xx ad un certo oggetto, gli oggetti HTML successivi vengono
posizionati alla sua destra anziché sotto (finché ce ne stanno). Volendo gestire più livelli su colonne
successive, è possibile impostare sui vari livelli float:left e questi verranno visualizzati uno a fianco
dell‟altro. Nel caso di soli 3 livelli si può impostare sul primo float:left sul 2° float:right ed il terzo
verrà posizionato in mezzo. Applicabile sia ai Tag Block che ai Tag Inline.
none | left | right | both La proprietà clear serve per controllare il comportamento degli elementi
che seguono elementi flottanti. Per default gli elementi successivi si muovono in modo da riempire lo
spazio disponibile lasciato libero quando un oggetto viene flottato da un lato. Impostando
CLEAR:BOTH riconosciuto SOLO dal tag <BR>, riporta gli elementi successivi al di sotto
dell’oggetto floating. Clear:left interrompe il solo floating sinistro
< normal | pre | nowrap > normal (Gli spazi multipli sono compattati in un unico spazio)
 pre (Gli spazi multipli non vengono compattati)
Position:RELATIVE : Impostando Position=Relative su un elemento, i sui valori di top, left, right e bottom non
saranno più riferiti alla pagina ma alla posizione iniziale dell’elemento (offset). Ad esempio top:10px consente di
spostare l‟elemento di 10px in basso rispetto alla posizione originale. Viceversa bottom:10px consente di spostare
l‟elemento in alto di 10px rispetto alla posizione originale. top:10px è equivalente a bottom:-10px;
Position:ABSOLUTE : Impostando Position=Absolute su alcuni elementi, il loro posizionamento diventa assoluto
rispetto alla pagina. Impostando invece Position=Relative su un contenitore e Position=Absolute sugli elementi
interni, il posizionamento degli elementi interni diventa ASSOLUTO rispetto al contenitore e non più rispetto alla
pagina. Attenzione che con position:absolute l‟elemento Block non occupa più tutta la riga ma SOLO lo spazio
necessario alla visualizzazione del suo contenuto per cui, con position:abosolute diventa indispensabile
assegnare anche width.
position:abosolute prevale anche sulla proprietà float. Comunque in genere o si usa uno oppure l’altro.
Gli elementi position:relativi e position:absolute non vengono conteggiati nel normale
rendering della pagina, per cui più elementi possono essere sovrapposti.
Se in un punto ci sono già altri oggetti si avrà una sovrapposizione che dovrà essere gestita tramite z-index.
Position:FIXED: Posizionamento assoluto insensibile anche allo scroll della pagina. Un elemento FIXED viene
automaticamente visualizzato davanti rispetto a quelli non-fixed, senza bisogno di z-index.
pag. 24
robertomana.it
HTML E CSS
Altre Proprietà CSS 2.0
z-index = valore numerico
Introduce, oltre a x e y, un terzo asse relative alla profondità. Elementi con z-index maggiore vengono visualizzati
davanti (sopra) rispetto ad elementi con z-index minore. Il default è zero. Utile per sovrapporre immagini che
hanno position == absolute o relative. Il testo solitamente ha z-index=0. Assegnando ad una
immagine z-index=-1 ed una posizione assoluta, questa viene visualizzata al di sotto del testo presente in quella
posizione.
visibility Consente di nascondere / mostrare un elemento. Può assumere i valori hidden visibile collapse.
visibility:hidden, a differenza di display:none, nasconde l‟elemento senza rimuovere la sua occupazione spaziale.
opacity Numero con la virgola tra 0 (Transparent) e 1 (default, Completamente solido). Utile per rendere
semitrasparente un contenitore rispetto allo sfondo. Notare che, a differenza di quanto avviene con la funzione
RGBa, il valore di Opacity viene ereditato da tutti gli elementi interni al box (testo e immagini)
Zoom Applica uno zoom al tag. Es "zoom:200%" Deprecato in CSS3 a favore di 2D transform: scale()
Clip clip: top right bottom left. Esempio: clip:25px 125px 125px 25px
Crea delle aree di visibilità. Solo ciò che sta dentro l‟area viene visualizzato.
Utile per visualizzare porzioni di immagini o per creare aree bianche intorno agli elementi
min-width: larghezza minima dell‟elemento,
max-width: larghezza minima dell‟elemento,
min-height: altezza minima dell‟elemento;
max-height: altezza massima dell‟elemento.
Il significato del valore inherits
Assegnare ad una Property CSS di un certo elemento il valore inherit, significa che quella property in quell
elemento deve ereditare il valore della stessa property nell’elemento genitore (contenitore esterno), che
peraltro rappresenta il comportamento di default di molti tag (tutti quelli relativi al testo, compreso color).
Questo non vale invece, ad esempio, per padding, margin, background-color, border che, indipendentemente
dal genitore, utilizzano il valore di default per quel tag.
L‟impostazione del valore inherit ha senso per quelle proprietà che non ereditano automaticamente oppure per
quelle proprietà il cui valore è stato modificato tramite CSS.
body {
color:black;
font-family:Georgia;
}
h2 {
color:violet;
font-family:Arial;
}
#sidebar h2 {
color: inherit;
font-family: inherit;
}
h2 all‟interno di sidebar non sarà violet ma eredita il valore di sidebar il quale a sua volta sarà ereditato da
body, quindi il suo colore sarà nero.
h3 {
color: inherit;
font-family: inherit;
}
Queste assegnazioni sono inutili in quanto, salvo diverse indicazioni, h3 eredita automaticamente da body senza
bisogno di scriverlo esplicitamente.
pag. 25
robertomana.it
HTML E CSS
Note su tag H e font-size
I tag H anziché ereditare normalmente il font-size del genitore in cui si trovano, “modificano” il valore
ereditato applicando un fattore moltiplicativo o di riduzione (2 nel caso di h1, 1,5 nel caso di h2, 1/6 nel caso
di h3 come anticipato a pag 16 quando si sono introdotti i tag H).
Se però il tag H1 anziché trovarsi dentro un normalissimo tag DIV si trova dentro ad uno dei nuovi tag HTML5
(section article, nav, aside), il fattore moltiplicativo di H1 diventa solo più 1,5.
Per fare in modo che H1 si comporti sempre allo stesso modo indipendentemente dal tag genitore, si può
impostare all‟interno del file reset.css la seguente property:
h1 {font-size:2em}
cioè h1 deve sempre raddoppiare il font-size del genitore, indipendentemente dal contenitore in cui si trova.
Approfondimenti su selettori e pseudoselettori
 Il selettore > indica Figlio diretto. Il seguente indica i tag p direttamente scritti all’interno dei tag div
div > p
 I selettori scritti in modo più specifico prevalgono su quelli scritti in modo più generico, anche se
questi ultimi sono scritti dopo rispetto ai precedenti.
section section p {color:red}
section p {color:blue}
Quegli elementi p contenuti all’interno di una section a sua volta contenuta all’interno di un’altra
section avranno colore rosso e non blu, in quanto il primo CSS è più specifico.
In alternativa si potrebbe scrivere all’interno del secondo CSS:
section p {color:blue !important;}
In questo modo la nuova regola diventa prioritaria rispetto a quelle più specifiche, indipendentemente
dalla posizione in cui è scritta.
Pseudo Selettori
:radio
// Equivalente a input:radio e input[type=radio]
:checkbox
// Equivalente a input:checkbox e input[type=chekbox]
:text
// Equivalente a input:text e input[type=text]
:button
// Equivalente a input:button e input[type=button]
:submit
// Equivalente a input:submit e input[type=submit]
:enabled
:disabled
:checked
:selected
input:radio[name=opt1]
// Vale solo per qualche attributo specifico e non per tutti gli attributi
input:radio[name=opt1]:checked
:visible
:hidden
:not(selettore_Secondario)
:contains(testo);
#menu li:has(ul)
// Es :radio:not(:checked)
// TRUE se l’elemento contiene il testo indicato (anche annidto)
// Le voci di menu che contengono un sottomenu (anche annidato)
pag. 26
robertomana.it
HTML E CSS
PseudoClassi di filtro su un gruppo di elementi
:first-child
:first-of-type
// Primo figlio generico (indipendentemente dal tipo)
// Primo elemento del suo tipo
:first-child restituisce true se l’elemento corrente gode della proprietà di essere primo figlio
(primogenito) del proprio genitore, qualunque esso sia, e indipendentemente dal proprio tipo. Esempio:
<div id=”wrapper”>
<p> …… </p>
<p> <input ……> </p>
<input ……>
<p> …… </p>
</div>
Il primo <input> presenta :first-child uguale a true perché è in assoluto il primo figlio di <p>
Il secondo <input> presenta :first-child uguale a false perché dentro wrapper, prima di lui, ci
sono altri figli. Il primo <input> presenta :first-of-type uguale a true perché, rispetto al proprio
padre, è il primo elemento di tipo input. Il secondo <input> presenta :first-of-type uguale a
true perchè, all’interno di wrapper, è il primo elemento di tipo input
:last-child
:last-of-type
// Ultimo figlio generico (indipendentemente dal tipo)
// Ultimo elemento del suo tipo
:nth-child(i)
:nth-of-type(i)
// i-esimo figlio generico (indipendentemente dal tipo) (a base 1)
// i-esimo elemento del suo tipo (a base 1)
p:nth-child(i)
p:nth-of-type(i)
// i-esimo figlio generico ,ma solo se di tipo p
// i-esimo elemento del suo tipo, ma solo se di tipo p
Se nth-child non è di tipo p, il selettore restituisce false
// i-esimo elemento generico contenuto in un tag div
// i-esimo elemento del suo tipo contenuto in un tag div
div :nth-child(i)
div :nth-of-type(i)
Gli pseudoselettori :nth-child() e nth-of-type() oltre all’indice i-esimo accettano come
parametro anche i valori: even: tutti gli elementi pari - odd: tutti gli elementi dispari
Gli pseudoselettori :first e :last possono essere ulteriormente accodati a nth-child e nth-oftype per restituire primo ed ultimo elemento della collezione.
Sono analoghi ai metodi jQuery .first() e .last()
pag. 27
robertomana.it
HTML E CSS
Esempi di Effetti CSS
Allineamento di una immagine rispetto al testo circostante
Quando si ha la necessità di inserire delle immagini all‟interno del normale flusso di testo di una pagina web,
spesso si hanno alcuni problemi con l‟allineamento. Questo accade perché, di default, le immagini hanno la
proprietà float impostata su none e l‟immagine viene normalmente inserita inline rispetto al testo.
Per allineare un‟immagine ai lati del testo è sufficiente agire sulla proprietà float impostando per l‟immagine una
classe di allineamento:
.alignleft { float: left; padding: 15px 15px 15px 0; } /* 0 a sinistra */
Dopo di che il tag <img> può tranquillamente essere inserito in qualunque punto all‟interno del flusso di testo e
verrà visualizzata lateralmente senza provocare interruzione del flusso.
Trasparenza e Bordo “spaziato”
Per ottenere un bordo spaziato è sufficiente assegnare all‟immagine una apposita Proprietà PADDING:
img.imgStyle1 {
opacity: 0.7; /* 1=solido */
border: 1px solid #000;
padding: 5px;
}
Il padding viene però applicato SOLO se l‟immagine NON eccede le dimensioni del contenitore.
Eliminazione del bordo blu intorno alle immagini-link
Una immagine utilizzata come collegamento ipertestuale viene di solito visualizzata con un bordo blu intorno.
Questo perchè i browser impostano di default il bordo blu sui link. Per eliminare il bordo occorre impostare :
img { border: none;
}
Inserimento di un testo all’interno di una immagine
Per ottenere l‟effetto di un testo sovrapposto ad una immagine si può sfruttare la proprietà background
inserendo l‟immagine come sfondo del blocco testuale;
<div class="imgStyle2"> Lorem Ipsum</div>
div.imgStyle2 {
width: 400px;
height: 300px;
background-image: url('img.jpg');
background-repeat: no-repeat;
text-align: center;
line-height: 450px; /*225px superiori rispetto al centro
scritta*/
}
All‟interno del block DIV verrà caricata l‟immagine di sfondo che deve avere le stesse dimensioni del contenitore
oppure verrà visualizzata soltanto la porzioni di immagine in alto a sinistra con dimensioni pari alle
dimensioni del box . Impostando line-height > width la scritta verrà
visualizzata nella parte inferiore dell’immagine.
pag. 28
robertomana.it
HTML E CSS
Inserimento di un testo a comparsa all’interno di un’immagine
<div class="comparsa">
<p> Lorem Ipsum </p>
</div>
div.comparsa {
width: 400px;
height:300px;
background-image: url('img.jpg');
background-repeat: no-repeat;
position:relative;
padding: 0;
}
div.comparsa p {
background: rgba(0,0,0,0.5); /* nero semitrasparente */
color:#EEEEEE;
/* colore del testo */
display:none;
/* nasconde la scritta */
position:absolute;
left:0px;
bottom:0px;
margin: 0;
height:40px;
line-height:40px;
padding-left:10px;
/* piccolo spaziatura del testo a sinistra */
width:390px;
}
Invece di impostare width:390px si potrebbe impostando width: 100% in modo che il tag <p> occupi la stessa
larghezza del genitore. Avendo però impostato un padding di 10, (ed essendo width espresso al netto del padding)
questo padding andrà a sommarsi alle dimensioni dell‟area del tag p, eccedendo le dimensioni del contenitore. Il
problema può essere risolto impostando sul contenitore esterno overflow: hidden. In questo modo, se le
dimensioni del tag p interno eccedono le dimensioni del contenitore (come effettivamente è), la parte eccedente non
viene mostrata.
Per far comparire il testo in corrispondenza del mouse over è sufficiente impostare;
div.comparsa:hover p {
display: block; }
Posizionamento di una Barra a fondo pagina insensibile allo scroll
Si utilizza un primo DIV container largo quanto la pagina, avente position:fixed (che lo rende insensibile
allo scroll) e bottom:0 che lo posiziona allineato al bordo inferiore del genitore (la pagina HTML).
Si utilizza quindi un innerObject contenente gli oggetti desiderati.
#footer_bar {
position: fixed;
bottom: 0;
width: 100%;
}
#bar_innerObject {
background: #FAA53A;
width: 900px;
height: 35px;
margin: 0 auto;
overflow: hidden;
}
pag. 29

HTML e CSS - Roberto Mana

Transcript

Documenti analoghi

(VI) - Italy TEL: +39/0445/579035 FAX: +39/0445/575708

sizzix.co.uk

Diapositiva 1

Html: style, span, div

Software di supervisione Vijeo Citect

Maria Sharapova campionessa a Parigi

Page 6 of 12 Albenga, la partita scalda 2000 cuori | Tgevents.it 08

Zortam Mp3 Media Studio

Lezione 1 (stampa)

TAG Heuer e Modena Cento Ore Iscriviti alla nostra newsletter