1 I.T. Carlo Alberto Dalla Chiesa Prof. Di Fede Ettore
Internet
2 I.T. Carlo Alberto Dalla Chiesa Prof. Di Fede Ettore
Richiami sul modello Client/Server
(per il servizio WWW – World Wide Web – WEB versione 2.0)
3 I.T. Carlo Alberto Dalla Chiesa Prof. Di Fede Ettore
Modello Client/Server per il servizio WWW
Programma Browser (sfogliatore) (esempi: Microsoft Explorer,
Mozilla Firefox, Opera, Chrome,…)
Richiesta di una pagina
CLIENT (di solito, un Personal Computer)
SERVER (calcolatore connesso alla rete)
4 I.T. Carlo Alberto Dalla Chiesa Prof. Di Fede Ettore
Modello Client/Server per il servizio WWW
Pagina HTML
CLIENT (di solito, un Personal Computer)
SERVER (calcolatore connesso alla rete)
Programma Server (esempi: Microsoft IIS,
Apache,
Netscape Enterprise)
5 I.T. Carlo Alberto Dalla Chiesa Prof. Di Fede Ettore
URL (Uniform Resource Locator)
protocollo (servizio)
servizio
dominio
directory/file
Hyper Text Transefr Protocol
World Wide Web
http://www.unitus.it/ingegneria/index.html
6 I.T. Carlo Alberto Dalla Chiesa Prof. Di Fede Ettore
URL (Uniform Resource Locator)
dominio
http://www.unitus.it/ingegneria/index.html
Estensione Descrizione
.com organizzazione commerciale
.edu education e indica Scuole o Università;
.it Italia
.uk Regno Unito
.fr Francia
.de Germania
7 I.T. Carlo Alberto Dalla Chiesa Prof. Di Fede Ettore
Linguaggio HTML
8 I.T. Carlo Alberto Dalla Chiesa Prof. Di Fede Ettore
HTML
HTML è un acronimo:
Hyper
Text
Markup
Language Linguaggio di marcatura per ipertesti
9 I.T. Carlo Alberto Dalla Chiesa Prof. Di Fede Ettore
HTML
IPERTESTO: Complesso strutturato e organicamente articolato di informazioni, note, illustrazioni e talvolta inserti audiovisivi, connessi secondo un sistema di collegamenti che ne permettono l'esplorazione a mezzo di elaboratore elettronico, secondo percorsi non sequenziali (DIZIONARIO HOEPLI)
Segui questo link
html html
10 I.T. Carlo Alberto Dalla Chiesa Prof. Di Fede Ettore
HTML
HTML é un linguaggio che utilizza contrassegni (markup), chiamati TAG (etichetta), per la formattazione di ipertesti.
Esempio: tag <H1> … </H1> per i titoli di primo livello Quasi tutti i tag hanno un’apertura (es. <H1>) ed una
chiusura (es. </H1>), contraddistinta dalla barra “/” HTML non fa differenza tra maiuscole e minuscole
(“case-insensitive”): anche <h1> … </h1> va bene
11 I.T. Carlo Alberto Dalla Chiesa Prof. Di Fede Ettore
Attributi dei TAG
I TAG possono avere degli attributi
Gli attributi aggiungono/specificano delle caratteristiche del TAG
Per esempio, i TAG di struttura <p>, <h1>, <h2>, <h3>, ecc. possono avere l’attributo ALIGN=“center” per centrare il testo.
12 I.T. Carlo Alberto Dalla Chiesa Prof. Di Fede Ettore
Struttura Fondamentale di una pagina HTML
<!DOCTYPE html> <HTML lang="it"> <HEAD> ………… ………… </HEAD> <BODY> ……… ……… </BODY> </HTML>
13 I.T. Carlo Alberto Dalla Chiesa Prof. Di Fede Ettore
Titolo della pagina HTML
<!DOCTYPE html> <HTML lang="it"> <HEAD> <TITLE>Pagina di prova</TITLE> </HEAD> <BODY> ……… ……… </BODY> </HTML>
14 I.T. Carlo Alberto Dalla Chiesa Prof. Di Fede Ettore
I metadata o metatag
<!DOCTYPE html> <HTML lang="it"> <HEAD> <TITLE>…………</TITLE> <META charset="UTF-8" /> <META name="author" content= "Università di Bari" /> <META name="keywords" content= " HTML,CSS,XML" /> </HEAD> <BODY> ……… </BODY> </HTML>
I metatag forniscono informazioni sulla pagina WEB, non sono visibili all’utente ma utili per i
motori di ricerca
15 I.T. Carlo Alberto Dalla Chiesa Prof. Di Fede Ettore
Attributi di <BODY>
<!DOCTYPE html> <HTML lang="it"> <HEAD> …………… </HEAD> <BODY bgcolor= "black" text= "white" background= "…" > ……… </BODY> </HTML>
16 I.T. Carlo Alberto Dalla Chiesa Prof. Di Fede Ettore
Attributi di <BODY>
<BODY bgcolor=“blue” text=“silver”> ………………… ………………… </BODY>
17 I.T. Carlo Alberto Dalla Chiesa Prof. Di Fede Ettore
Attributi di <BODY> - Colori RGB
Tonalità dei tre colori: da 0 a 255 in decimale, da 00 a FF in esadecimale
Rosso 255,0,0 FF 00 00
Verde 0,255,0 00 FF 00
Blu 0,0,255 00 00 FF
Nero 0,0,0 00 00 00
Bianco 255,255,255 FF FF FF
Giallo 255,227,172 FF E3 AC
I Colori Red, Green, Blue
18 I.T. Carlo Alberto Dalla Chiesa Prof. Di Fede Ettore
Attributi di <BODY> - Colori RGB
I Colori Red, Green, Blue
Per esempio:
<BODY BGCOLOR="#FFFFFF"> colore di sfondo bianco
<BODY BGCOLOR="white"> colore di sfondo bianco
19 I.T. Carlo Alberto Dalla Chiesa Prof. Di Fede Ettore
Tag HTML (1- Effetti tipografici)
<EM> enfatizzato </EM>
<STRONG> testo forte</STRONG>
<B> grassetto </B>
<I> corsivo </I>
<U> sottolineato </U>
<STRIKE> barrato </STRIKE>
<MARK> evidenziato </MARK>
<!-- commenti -->
Emphasized
Boldface
Italic
Underlined
20 I.T. Carlo Alberto Dalla Chiesa Prof. Di Fede Ettore
Tag HTML (2- Effetti tipografici)
<BIG> Più grande </BIG> testo normale
<SMALL> Più piccolo </SMALL> testo normale
<SUB> Pedice </SUB> testo normale
<SUP> Apice </SUP> testo normale
Più grande testo
normale
Più piccolo testo
normale
Pedice testo normale
Apice testo normale
21 I.T. Carlo Alberto Dalla Chiesa Prof. Di Fede Ettore
Tag HTML (3- Effetti tipografici)
<B> <I> Grassetto Corsivo </I> </B>
Grassetto Corsivo
22 I.T. Carlo Alberto Dalla Chiesa Prof. Di Fede Ettore
Tag HTML (1 - le entità carattere)
Caratteri particolari o simboli
23 I.T. Carlo Alberto Dalla Chiesa Prof. Di Fede Ettore
Tag HTML (2 - le entità carattere)
Caratteri particolari o simboli
spazio (non breaking space)
< <
> >
& &
€ €
è è
È È
à à
24 I.T. Carlo Alberto Dalla Chiesa Prof. Di Fede Ettore
Tag HTML (Struttura del testo)
<H1> titolo primo livello </H1> <H2> titolo secondo livello </H2> <H3> titolo terzo livello </H3> <H4> titolo quarto livello </H4> <H5> titolo quinto livello </H5> <H6> titolo sesto livello </H6>
<P> paragrafo con spaziatura prima e dopo </P> <DIV> paragrafo senza spaziatura prima e dopo </DIV> <BR/> a capo <HR/> linea orizzontale (linea separatrice)
Senza Chiusura!
Senza Chiusura!
25 I.T. Carlo Alberto Dalla Chiesa Prof. Di Fede Ettore
Tag HTML (allineamento del testo)
<H1 align=“left/right/center/justify”> …..</H1> <H2 align=“left/right/center/justify”> …… </H2> …………………… <H6 align=“left/right/center/justify”> ……… </H6> <P align=“left/right/center/justify”> …. </P>
<DIV align=“left/right/center/justify”> …. </DIV>
26 I.T. Carlo Alberto Dalla Chiesa Prof. Di Fede Ettore
Tag HTML (font del testo e dimensione)
<FONT FACE=“Arial” SIZE=“1/2/3/4/5/6/7” COLOR=“RED”> ………………… ………………… </FONT>
27 I.T. Carlo Alberto Dalla Chiesa Prof. Di Fede Ettore
Tag HTML (elenchi puntati/numerati)
<P align=“left”> <FONT FACE=“Comic sans MS” size=“4”> <OL TYPE=“1/A/a/I/i” START=“valore iniziale”> <LI> Latte </LI> <LI> Caffè </LI> <LI> Zucchero </LI> </OL> </FONT> </P>
Per gli elenchi numerati si utilizza il TAG <OL> (Ordered List). Ogni elemento della lista viene identificato con il TAG <LI> (List Item)
28 I.T. Carlo Alberto Dalla Chiesa Prof. Di Fede Ettore
Tag HTML (elenchi puntati/numerati)
<P align=“left”> <FONT FACE=“Comic sans MS” size=“4”> <UL TYPE=“circle/square/disc” > <LI> Latte </LI> <LI> Caffè </LI> <LI> Zucchero </LI> </UL> </FONT> </P>
Per gli elenchi puntati si utilizza il TAG <UL> (Unordered List). Ogni elemento della lista viene identificato con il TAG <LI> (List Item)
29 I.T. Carlo Alberto Dalla Chiesa Prof. Di Fede Ettore
Tag HTML (elenchi puntati/numerati)
<P align=“left”> <FONT FACE=“Comic sans MS” size=“4”> <UL TYPE=“circle” > <LI> Latte </LI> <OL TYPE=“I”> <LI> Parmalat </LI> <LI> Sole </LI> </OL> <LI> Caffè </LI> <LI> Zucchero </LI> </UL> </FONT> </P>
È possibile definire un elenco numerato dentro un elenco puntato e viceversa.
30 I.T. Carlo Alberto Dalla Chiesa Prof. Di Fede Ettore
Tag HTML (1- tabelle)
<TABLE> <CAPTION> titolo tabella </CAPTION> <TR> <TH> intestazione </TH> </TR>
<TR>
<TD> dato </TD>
</TR>
</TABLE>
(inizio tabella)
Nome della tabella
Table Row (inizio riga)
Table Header
(fine riga)
cella normale
(fine tabella)
31 I.T. Carlo Alberto Dalla Chiesa Prof. Di Fede Ettore
Tag HTML (2- tabelle)
<TABLE border=“0/1/2/…” bgcolor=“red” align=“left/right/center”> ………… </TABLE>
Bordo, Colore di sfondo e Allineamento della tabella
32 I.T. Carlo Alberto Dalla Chiesa Prof. Di Fede Ettore
Tag HTML (3- tabelle)
<TABLE width=“50%”> ………… </TABLE>
Larghezza della tabella
Crea una tabella che occupa metà pagina orizzontale
50% 50%
33 I.T. Carlo Alberto Dalla Chiesa Prof. Di Fede Ettore
Tag HTML (4- tabelle)
<TABLE border="1" align="left" width="50%">
<CAPTION> Tabella 2x2 </CAPTION>
<TR><TD>Prima Riga Prima Cella</TD>
<TD>Prima Riga Seconda Cella</TD>
</TR>
<TR><TD>Seconda Riga Prima Cella</TD>
<TD>Seconda Riga Seconda Cella</TD>
</TR>
</TABLE>
ESEMPIO
34 I.T. Carlo Alberto Dalla Chiesa Prof. Di Fede Ettore
Tag HTML (5- tabelle)
Allineamento verticale, orizzontale e Colore di sfondo della riga
<TR align=“left/right/center/justify” valign=“top/middle/bottom” bgcolor=“…” > ………… </TR>
35 I.T. Carlo Alberto Dalla Chiesa Prof. Di Fede Ettore
Tag HTML (6- tabelle)
Allineamento verticale, orizzontale e Colore di sfondo della riga
36 I.T. Carlo Alberto Dalla Chiesa Prof. Di Fede Ettore
Tag HTML (7- tabelle)
<TD align=“left/right/center/justify” valign=“top/middle/bottom” bgcolor=“…” > ………… </TD>
Allineamento verticale, orizzontale e Colore di sfondo della cella
<TH align=“left/right/center/justify” valign=“top/middle/bottom” bgcolor=“…” > ………… </TH>
37 I.T. Carlo Alberto Dalla Chiesa Prof. Di Fede Ettore
Tag HTML (8- tabelle)
Allineamento verticale, orizzontale e Colore di sfondo della cella
38 I.T. Carlo Alberto Dalla Chiesa Prof. Di Fede Ettore
Tag HTML (9- tabelle)
<TH width=“130px”> ………… </TH>
Larghezza della cella (in pixel e percentuale)
<TD width=“130px”> ………… </TD>
39 I.T. Carlo Alberto Dalla Chiesa Prof. Di Fede Ettore
Tag HTML (10- tabelle)
<TH height=“130px”> ………… </TH>
Altezza della cella (solo in pixel)
<TD height=“130px”> ………… </TD>
40 I.T. Carlo Alberto Dalla Chiesa Prof. Di Fede Ettore
Tag HTML (11- tabelle) unione
Attributo COLSPAN (ROWSPAN per le righe)
<table width="200px" border="1">
<tr>
<th colspan="3">Primo trimestre</th>
</tr>
<tr>
<td>Gennaio</td>
<td>Febbraio</td>
<td>Marzo</td>
</tr>
</table>
41 I.T. Carlo Alberto Dalla Chiesa Prof. Di Fede Ettore
Tag HTML (12- tabelle) unione
Attributo COLSPAN (ROWSPAN per le righe) <table width="200px" border="1">
<tr>
<th rowspan=“4">Primo trimestre</th>
</tr>
<tr>
<td>Gennaio</td>
</tr>
<tr>
<td>Febbraio</td>
</tr>
<tr>
<td>Marzo</td>
</tr>
</table>
42 I.T. Carlo Alberto Dalla Chiesa Prof. Di Fede Ettore
Tag HTML (13- tabelle) stile bordo
Attributo style (per modificare lo stile e il colore del bordo)
<table width="200px" border="1“ style=“border-collapse:collapse; border-color:red;”>
<tr>
<th rowspan=“4">Primo trimestre</th>
</tr>
<tr>
<td>Gennaio</td>
</tr>
<tr>
<td>Febbraio</td>
</tr>
<tr>
<td>Marzo</td>
</tr>
</table>
43 I.T. Carlo Alberto Dalla Chiesa Prof. Di Fede Ettore
Tag per i link
<A HREF=“…”> collegamento </A>
HREF è un attributo obbligatorio per i riferimenti
Il valore di HREF è un URL di un’altra pagina
L’URL può essere assoluto (http://www.miosito.it/) o relativo (./index.html)
In HREF è possibile inserire il link ad una mail (mailto:) o ad un dispositivo mobile (tel:)
44 I.T. Carlo Alberto Dalla Chiesa Prof. Di Fede Ettore
Tag per i link
Esempio:
<a href="seconda.html">Vai alla seconda pagina</a>
Cliccando sulla scritta "Vai alla seconda pagina"
(hotword-parola calda)
Il browser aprirà la pagina
"seconda.html"
45 I.T. Carlo Alberto Dalla Chiesa Prof. Di Fede Ettore
Tag per i link
Differenza tra URL assoluto e relativo:
L’URL seconda.html è di tipo relativo perché si specifica solo il nome di un file o di una cartella. Vengono utilizzati per creare collegamenti a diverse pagine del sito
(LINK INTERNI).
L’URL http://www.miosito.com/seconda.html è di tipo assoluto perché si specifica l’intero percorso. Vengono utilizzati per raggiungere risorse presenti all'interno di altri siti web
(LINK ESTERNI).
46 I.T. Carlo Alberto Dalla Chiesa Prof. Di Fede Ettore
Tag per i link
Esempio:
<a href="seconda.html" target="_blank">Vai alla seconda pagina </a>
L’attributo target specifica dove deve essere aperta la nuova pagina, col valore _blank apre il collegamento in una nuova finestra. Se si usa il valore _self, il collegamento si apre nella stessa finestra.
47 I.T. Carlo Alberto Dalla Chiesa Prof. Di Fede Ettore
Tag per i link
Attributo title:
<a href= "http://www.google.it" title="motore di ricerca">Vai su google</a>
L’attributo title visualizza il messaggio indicato (tooltip) quando il mouse passa sopra l’hotword
(parola calda).
48 I.T. Carlo Alberto Dalla Chiesa Prof. Di Fede Ettore
Tag per i link
pagina2.htm
<a href="index.html">torna alla home page</a>
index.html (home page)
i nostri prodotti
pagina2.htm
torna alla home page
index.html (home page)
<a href="pagina2.htm">i nostri prodotti</a>
49 I.T. Carlo Alberto Dalla Chiesa Prof. Di Fede Ettore
Tag per i link a una sezione (segnalibro)
Àncora: <A NAME="parte2">……….</A>
Link alla parte:
<A HREF="#parte2">parola</A>
Link da un documento diverso:
<A HREF="docy.htm#parte2">parola</A>
50 I.T. Carlo Alberto Dalla Chiesa Prof. Di Fede Ettore
Tag per i link a una sezione (segnalibro)
Il segnalibro può essere creato con qualsiasi TAG e con l’utilizzo dell’attributo id (abbreviazione di identification)
Esempio con un titolo di livello 2: <H1 id="parte2">……..</H1>
Link alla parte:
<A HREF="#parte2">parola</A>
Link da un documento diverso:
<A HREF="docy.htm#parte2">parola</A>
51 I.T. Carlo Alberto Dalla Chiesa Prof. Di Fede Ettore
Incorporamento di un’immagine
Formati immagini per il WEB (GIF,JPG,PNG)
<img src="MIAIMMAGINE.JPG">
Il tag <img> è un tag che non prevede chiusura (TAG VUOTO)
L‘attributo SRC è obbligatorio per i riferimenti e può includere sia URL relativi che assoluti
Il tag <IMG> include altri attributi come:
ALT(etichetta);BORDER(bordo);
Width(larghezza in pixel);
Height(altezza in pixel);Align(allineamento del testo)
52 I.T. Carlo Alberto Dalla Chiesa Prof. Di Fede Ettore
Incorportamento di un’immagine
Creazione di un’immagine cliccabile
<a href="sito.html"> <img src="URL IMMAGINE" alt="ETICHETTA IMMAGINE"/> </a>
ESEMPIO:
Inserendo il seguente URL : http://www.tradingmatica.com/Images/cliccaqui.gif
al posto di "URL IMMAGINE" nel codice, al click dell’immagine apriremo il sito "sito.html"
53 I.T. Carlo Alberto Dalla Chiesa Prof. Di Fede Ettore
Incorportamento di un’immagine
<img src="immagine.jpg" align="top" alt="descrizione alternativa"
width="150" height="93"/> ALT visualizza un testo al posto dell’immagine (tooltip) WIDTH larghezza dell’immagine in pixel HEIGHT altezza dell’immagine in pixel
Allineamento del testo
ALIGN = "TOP" (vicino al bordo superiore dell’immagine)
ALIGN = "MIDDLE" (al centro dell’immagine)
ALIGN = "BOTTOM" (vicino al bordo inferiore)
54 I.T. Carlo Alberto Dalla Chiesa Prof. Di Fede Ettore
Le immagini come link
Le immagini come link <a href="http://www.mondoviaggi.it">
<img src="mare.jpg" alt="catalogo mare"
width="699" height="433" />
</a>
55 I.T. Carlo Alberto Dalla Chiesa Prof. Di Fede Ettore
Audio
<audio controls>
<source src="canzone.mp3" type="audio/mpeg" />
</audio>
56 I.T. Carlo Alberto Dalla Chiesa Prof. Di Fede Ettore
Audio di sottofondo
<embed src="tenerezza.mp3" autostart="true" loop="false" volume="80" hidden="true">
</embed>
57 I.T. Carlo Alberto Dalla Chiesa Prof. Di Fede Ettore
Video
<video width="580" height="240" controls>
<source src="corso.mp4" type="video/mp4" />
</video>
58 I.T. Carlo Alberto Dalla Chiesa Prof. Di Fede Ettore
Moduli (FORM)
<FORM METHOD=“post” ACTION=“…”>
… </FORM>
Il valore di ACTION è (di solito) una pagina WWW che elabora i dati immessi nel modulo
Ci possono essere delle azioni da compiere al verificarsi di EVENTI
59 I.T. Carlo Alberto Dalla Chiesa Prof. Di Fede Ettore
Elementi di un modulo
<INPUT • TYPE=“SUBMIT”
• NAME=“…”
• VALUE=“visualizzato”>
Visualizza un “Bottone” cliccabile, A cui possono essere associate delle azioni
60 I.T. Carlo Alberto Dalla Chiesa Prof. Di Fede Ettore
I Fogli di Stile CSS
61 I.T. Carlo Alberto Dalla Chiesa Prof. Di Fede Ettore
I CSS
Il foglio CSS (Cascading Style Sheet, foglio di stile a cascata) è un documento in formato testuale che definisce il controllo sulla visualizzazione della pagina HTML e sul suo layout, cioè la disposizione degli elementi nella pagina, con le caratteristiche di stile riguardanti i font, i colori, gli allineamenti e le spaziature.
62 I.T. Carlo Alberto Dalla Chiesa Prof. Di Fede Ettore
Fogli di stile in linea
le proprietà di stile in linea vengono innestate direttamente in corrispondenza del TAG con l’attributo STYLE:
<P STYLE="font-family: Arial; font-size: 22pt; color: red; background-color:yellow"> Le Regioni italiane </P>
63 I.T. Carlo Alberto Dalla Chiesa Prof. Di Fede Ettore
Fogli di stile incorporati
Stile definito, attraverso il TAG <STYLE> all’interno dell’intestazione del documento
<HTML> <HEAD> <STYLE TYPE="text/css"> H1 { font-family: Arial; font-size: 23px; color: red; } </STYLE > </HEAD>
64 I.T. Carlo Alberto Dalla Chiesa Prof. Di Fede Ettore
Fogli di stile collegati
Definizione di un foglio di stile separato dal documento e registrato in un file esterno avente estensione .css.
Questo file viene collegato alla pagina attraverso il TAG <LINK>.
<HTML> <HEAD> <LINK REL="stylesheet" HREF="stile.css" TYPE="text/css“/> </HEAD>
65 I.T. Carlo Alberto Dalla Chiesa Prof. Di Fede Ettore
Sintassi CSS
Per ogni selettore si dichiara una o più proprietà di stile: ogni proprietà di stile va separata da un punto e virgola. L’insieme delle proprietà è raggruppato da una coppia di parentesi graffe.
selettore { proprietà: valore; proprietà: valore; proprietà: valore; ...; }
66 I.T. Carlo Alberto Dalla Chiesa Prof. Di Fede Ettore
Sintassi CSS
Un selettore può essere: un TAG predefinito del linguaggio HTML (<H1>,
<P>, <TD>, ecc.) una classe definita dall’utente; lo stile viene poi
richiamato nella pagina HTML con l’attributo CLASS="nomeclasse"
un identificatore definito dall’utente che individua le caratteristiche di una parte del documento; lo stile viene richiamato nella pagina HTML con l’attributo
ID="identificatore"
67 I.T. Carlo Alberto Dalla Chiesa Prof. Di Fede Ettore
Sintassi CSS
La classe definisce le caratteristiche di paragrafi e singole parti di una pagina HTML
L’identificatore è utilizzato per definire i contenitori (o sezioni) di una pagina , identificati con i tag <DIV> … <DIV>.
<DIV ID="identificatore"> ... <P CLASS="nomeclasse"> ... </P> ... </DIV>
68 I.T. Carlo Alberto Dalla Chiesa Prof. Di Fede Ettore
Sintassi CSS
Esempio di classe
... <STYLE type="text/css"> .testoblu {color:blue;} </STYLE> ... <P CLASS="testoblu"> Testo colore blu </P> ...
69 I.T. Carlo Alberto Dalla Chiesa Prof. Di Fede Ettore
Sintassi CSS
Esempio di identificativo
... <STYLE type="text/css"> #testorosso {color:red;} </STYLE> ... <DIV ID="testorosso"> Testo colore rosso </DIV> ...
70 I.T. Carlo Alberto Dalla Chiesa Prof. Di Fede Ettore
Formattare un documento con i CSS
font-family
... <STYLE type="text/css"> p {font-family: Arial, Verdana, sans-serif;} </STYLE>
La proprietà font-family serve a impostare il tipo di carattere tipografico per una qualunque porzione di testo.
Vengono usati i font Arial e Verdana senza grazie (sans-serif).
71 I.T. Carlo Alberto Dalla Chiesa Prof. Di Fede Ettore
Formattare un documento con i CSS
font-size
<STYLE type="text/css"> P {font-size: 12px;}
DIV {font-size: 50%;}
H2 {font-size: 1.2em;}
</STYLE>
Definisce la dimensione del carattere
Sono valori assoluti:
le sette parole chiave xx-small, x-small, small, medium, large, x-large, xx-large;
quelli espressi con le seguenti unità di misura: pixel (px), centimetri (cm),
millimetri (mm), punti (pt), picas (pc), pollici (in), x-height (ex).
72 I.T. Carlo Alberto Dalla Chiesa Prof. Di Fede Ettore
Formattare un documento con i CSS
font-weight
... <STYLE type="text/css"> div {font-weight: 900;} </STYLE>
Serve a definire la consistenza o "peso" visivo del testo
73 I.T. Carlo Alberto Dalla Chiesa Prof. Di Fede Ettore
Il "peso" visivo di un carattere può essere espresso con una scala numerica o con parole chiave. Valori numerici: 100 – 200 – 300 – 400 – 500 – 600 – 700 – 800 – 900 ordinati in senso crescente (dal più leggero al più pesante);
normal: valore di default, è l’aspetto normale del font ed equivale al valore 400;
bold: il carattere acquista l’aspetto che definiamo in genere ‘grassetto’, equivale a 700;
Formattare un documento con i CSS
font-weight
74 I.T. Carlo Alberto Dalla Chiesa Prof. Di Fede Ettore
Formattare un documento con i CSS
font-style
... <STYLE type="text/css"> p {font-style: italic;}
</STYLE>
Imposta le caratteristiche del testo in base ad uno di questi tre valori:
normal: il testo mantiene il suo aspetto normale; italic: formatta il testo in corsivo; oblique: praticamente simile a italic.
75 I.T. Carlo Alberto Dalla Chiesa Prof. Di Fede Ettore
Formattare un documento con i CSS
line-height
... <STYLE type="text/css"> p {line-height: 1.5;} body {line-height: 15px;} </STYLE>
Definisce l’interlinea del paragrafo:
76 I.T. Carlo Alberto Dalla Chiesa Prof. Di Fede Ettore
Formattare un documento con i CSS
font
... <STYLE type="text/css"> P {font: italic bold 12px/1.5 Georgia, "Times New Roman",
serif;} </STYLE>
Una proprietà a sintassi abbreviata che serve a impostare con una sola dichiarazione tutte le principali caratteristiche del testo.
77 I.T. Carlo Alberto Dalla Chiesa Prof. Di Fede Ettore
Formattare un documento con i CSS
text-align
...
<STYLE type="text/css"> p {text-align: center;}
div {text-align: justify;}
</STYLE>
La proprietà serve a impostare l’allineamento del testo
78 I.T. Carlo Alberto Dalla Chiesa Prof. Di Fede Ettore
Formattare un documento con i CSS
text-decoration
... <STYLE type="text/css"> P {text-decoration: none;}
A { text-decoration: underline;}
</STYLE>
Imposta particolari decorazioni e stili per il testo.
none: il testo non avrà alcuna decorazione particolare;
underline: il testo sarà sottolineato;
overline: il testo avrà una linea superiore;
line-through: il testo sarà attraversato da una linea orizzontale al centro;
blink: testo lampeggiante.
Top Related