internet e html - ettoredifede.files.wordpress.com · i.t. carlo alberto dalla chiesa prof. di fede...
TRANSCRIPT
![Page 1: Internet e HTML - ettoredifede.files.wordpress.com · I.T. Carlo Alberto Dalla Chiesa Prof. Di Fede Ettore 2 Richiami sul modello Client/Server (per il servizio WWW – World Wide](https://reader031.vdocuments.pub/reader031/viewer/2022021807/5c6a2c3609d3f27a7e8c4365/html5/thumbnails/1.jpg)
1 I.T. Carlo Alberto Dalla Chiesa Prof. Di Fede Ettore
Internet
![Page 2: Internet e HTML - ettoredifede.files.wordpress.com · I.T. Carlo Alberto Dalla Chiesa Prof. Di Fede Ettore 2 Richiami sul modello Client/Server (per il servizio WWW – World Wide](https://reader031.vdocuments.pub/reader031/viewer/2022021807/5c6a2c3609d3f27a7e8c4365/html5/thumbnails/2.jpg)
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)
![Page 3: Internet e HTML - ettoredifede.files.wordpress.com · I.T. Carlo Alberto Dalla Chiesa Prof. Di Fede Ettore 2 Richiami sul modello Client/Server (per il servizio WWW – World Wide](https://reader031.vdocuments.pub/reader031/viewer/2022021807/5c6a2c3609d3f27a7e8c4365/html5/thumbnails/3.jpg)
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)
![Page 4: Internet e HTML - ettoredifede.files.wordpress.com · I.T. Carlo Alberto Dalla Chiesa Prof. Di Fede Ettore 2 Richiami sul modello Client/Server (per il servizio WWW – World Wide](https://reader031.vdocuments.pub/reader031/viewer/2022021807/5c6a2c3609d3f27a7e8c4365/html5/thumbnails/4.jpg)
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)
![Page 5: Internet e HTML - ettoredifede.files.wordpress.com · I.T. Carlo Alberto Dalla Chiesa Prof. Di Fede Ettore 2 Richiami sul modello Client/Server (per il servizio WWW – World Wide](https://reader031.vdocuments.pub/reader031/viewer/2022021807/5c6a2c3609d3f27a7e8c4365/html5/thumbnails/5.jpg)
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
![Page 6: Internet e HTML - ettoredifede.files.wordpress.com · I.T. Carlo Alberto Dalla Chiesa Prof. Di Fede Ettore 2 Richiami sul modello Client/Server (per il servizio WWW – World Wide](https://reader031.vdocuments.pub/reader031/viewer/2022021807/5c6a2c3609d3f27a7e8c4365/html5/thumbnails/6.jpg)
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
![Page 7: Internet e HTML - ettoredifede.files.wordpress.com · I.T. Carlo Alberto Dalla Chiesa Prof. Di Fede Ettore 2 Richiami sul modello Client/Server (per il servizio WWW – World Wide](https://reader031.vdocuments.pub/reader031/viewer/2022021807/5c6a2c3609d3f27a7e8c4365/html5/thumbnails/7.jpg)
7 I.T. Carlo Alberto Dalla Chiesa Prof. Di Fede Ettore
Linguaggio HTML
![Page 8: Internet e HTML - ettoredifede.files.wordpress.com · I.T. Carlo Alberto Dalla Chiesa Prof. Di Fede Ettore 2 Richiami sul modello Client/Server (per il servizio WWW – World Wide](https://reader031.vdocuments.pub/reader031/viewer/2022021807/5c6a2c3609d3f27a7e8c4365/html5/thumbnails/8.jpg)
8 I.T. Carlo Alberto Dalla Chiesa Prof. Di Fede Ettore
HTML
HTML è un acronimo:
Hyper
Text
Markup
Language Linguaggio di marcatura per ipertesti
![Page 9: Internet e HTML - ettoredifede.files.wordpress.com · I.T. Carlo Alberto Dalla Chiesa Prof. Di Fede Ettore 2 Richiami sul modello Client/Server (per il servizio WWW – World Wide](https://reader031.vdocuments.pub/reader031/viewer/2022021807/5c6a2c3609d3f27a7e8c4365/html5/thumbnails/9.jpg)
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
![Page 10: Internet e HTML - ettoredifede.files.wordpress.com · I.T. Carlo Alberto Dalla Chiesa Prof. Di Fede Ettore 2 Richiami sul modello Client/Server (per il servizio WWW – World Wide](https://reader031.vdocuments.pub/reader031/viewer/2022021807/5c6a2c3609d3f27a7e8c4365/html5/thumbnails/10.jpg)
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
![Page 11: Internet e HTML - ettoredifede.files.wordpress.com · I.T. Carlo Alberto Dalla Chiesa Prof. Di Fede Ettore 2 Richiami sul modello Client/Server (per il servizio WWW – World Wide](https://reader031.vdocuments.pub/reader031/viewer/2022021807/5c6a2c3609d3f27a7e8c4365/html5/thumbnails/11.jpg)
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.
![Page 12: Internet e HTML - ettoredifede.files.wordpress.com · I.T. Carlo Alberto Dalla Chiesa Prof. Di Fede Ettore 2 Richiami sul modello Client/Server (per il servizio WWW – World Wide](https://reader031.vdocuments.pub/reader031/viewer/2022021807/5c6a2c3609d3f27a7e8c4365/html5/thumbnails/12.jpg)
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>
![Page 13: Internet e HTML - ettoredifede.files.wordpress.com · I.T. Carlo Alberto Dalla Chiesa Prof. Di Fede Ettore 2 Richiami sul modello Client/Server (per il servizio WWW – World Wide](https://reader031.vdocuments.pub/reader031/viewer/2022021807/5c6a2c3609d3f27a7e8c4365/html5/thumbnails/13.jpg)
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>
![Page 14: Internet e HTML - ettoredifede.files.wordpress.com · I.T. Carlo Alberto Dalla Chiesa Prof. Di Fede Ettore 2 Richiami sul modello Client/Server (per il servizio WWW – World Wide](https://reader031.vdocuments.pub/reader031/viewer/2022021807/5c6a2c3609d3f27a7e8c4365/html5/thumbnails/14.jpg)
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
![Page 15: Internet e HTML - ettoredifede.files.wordpress.com · I.T. Carlo Alberto Dalla Chiesa Prof. Di Fede Ettore 2 Richiami sul modello Client/Server (per il servizio WWW – World Wide](https://reader031.vdocuments.pub/reader031/viewer/2022021807/5c6a2c3609d3f27a7e8c4365/html5/thumbnails/15.jpg)
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>
![Page 16: Internet e HTML - ettoredifede.files.wordpress.com · I.T. Carlo Alberto Dalla Chiesa Prof. Di Fede Ettore 2 Richiami sul modello Client/Server (per il servizio WWW – World Wide](https://reader031.vdocuments.pub/reader031/viewer/2022021807/5c6a2c3609d3f27a7e8c4365/html5/thumbnails/16.jpg)
16 I.T. Carlo Alberto Dalla Chiesa Prof. Di Fede Ettore
Attributi di <BODY>
<BODY bgcolor=“blue” text=“silver”> ………………… ………………… </BODY>
![Page 17: Internet e HTML - ettoredifede.files.wordpress.com · I.T. Carlo Alberto Dalla Chiesa Prof. Di Fede Ettore 2 Richiami sul modello Client/Server (per il servizio WWW – World Wide](https://reader031.vdocuments.pub/reader031/viewer/2022021807/5c6a2c3609d3f27a7e8c4365/html5/thumbnails/17.jpg)
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
![Page 18: Internet e HTML - ettoredifede.files.wordpress.com · I.T. Carlo Alberto Dalla Chiesa Prof. Di Fede Ettore 2 Richiami sul modello Client/Server (per il servizio WWW – World Wide](https://reader031.vdocuments.pub/reader031/viewer/2022021807/5c6a2c3609d3f27a7e8c4365/html5/thumbnails/18.jpg)
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
![Page 19: Internet e HTML - ettoredifede.files.wordpress.com · I.T. Carlo Alberto Dalla Chiesa Prof. Di Fede Ettore 2 Richiami sul modello Client/Server (per il servizio WWW – World Wide](https://reader031.vdocuments.pub/reader031/viewer/2022021807/5c6a2c3609d3f27a7e8c4365/html5/thumbnails/19.jpg)
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
![Page 20: Internet e HTML - ettoredifede.files.wordpress.com · I.T. Carlo Alberto Dalla Chiesa Prof. Di Fede Ettore 2 Richiami sul modello Client/Server (per il servizio WWW – World Wide](https://reader031.vdocuments.pub/reader031/viewer/2022021807/5c6a2c3609d3f27a7e8c4365/html5/thumbnails/20.jpg)
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
![Page 21: Internet e HTML - ettoredifede.files.wordpress.com · I.T. Carlo Alberto Dalla Chiesa Prof. Di Fede Ettore 2 Richiami sul modello Client/Server (per il servizio WWW – World Wide](https://reader031.vdocuments.pub/reader031/viewer/2022021807/5c6a2c3609d3f27a7e8c4365/html5/thumbnails/21.jpg)
21 I.T. Carlo Alberto Dalla Chiesa Prof. Di Fede Ettore
Tag HTML (3- Effetti tipografici)
<B> <I> Grassetto Corsivo </I> </B>
Grassetto Corsivo
![Page 22: Internet e HTML - ettoredifede.files.wordpress.com · I.T. Carlo Alberto Dalla Chiesa Prof. Di Fede Ettore 2 Richiami sul modello Client/Server (per il servizio WWW – World Wide](https://reader031.vdocuments.pub/reader031/viewer/2022021807/5c6a2c3609d3f27a7e8c4365/html5/thumbnails/22.jpg)
22 I.T. Carlo Alberto Dalla Chiesa Prof. Di Fede Ettore
Tag HTML (1 - le entità carattere)
Caratteri particolari o simboli
![Page 23: Internet e HTML - ettoredifede.files.wordpress.com · I.T. Carlo Alberto Dalla Chiesa Prof. Di Fede Ettore 2 Richiami sul modello Client/Server (per il servizio WWW – World Wide](https://reader031.vdocuments.pub/reader031/viewer/2022021807/5c6a2c3609d3f27a7e8c4365/html5/thumbnails/23.jpg)
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)
< <
> >
& &
€ €
è è
È È
à à
![Page 24: Internet e HTML - ettoredifede.files.wordpress.com · I.T. Carlo Alberto Dalla Chiesa Prof. Di Fede Ettore 2 Richiami sul modello Client/Server (per il servizio WWW – World Wide](https://reader031.vdocuments.pub/reader031/viewer/2022021807/5c6a2c3609d3f27a7e8c4365/html5/thumbnails/24.jpg)
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!
![Page 25: Internet e HTML - ettoredifede.files.wordpress.com · I.T. Carlo Alberto Dalla Chiesa Prof. Di Fede Ettore 2 Richiami sul modello Client/Server (per il servizio WWW – World Wide](https://reader031.vdocuments.pub/reader031/viewer/2022021807/5c6a2c3609d3f27a7e8c4365/html5/thumbnails/25.jpg)
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>
![Page 26: Internet e HTML - ettoredifede.files.wordpress.com · I.T. Carlo Alberto Dalla Chiesa Prof. Di Fede Ettore 2 Richiami sul modello Client/Server (per il servizio WWW – World Wide](https://reader031.vdocuments.pub/reader031/viewer/2022021807/5c6a2c3609d3f27a7e8c4365/html5/thumbnails/26.jpg)
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>
![Page 27: Internet e HTML - ettoredifede.files.wordpress.com · I.T. Carlo Alberto Dalla Chiesa Prof. Di Fede Ettore 2 Richiami sul modello Client/Server (per il servizio WWW – World Wide](https://reader031.vdocuments.pub/reader031/viewer/2022021807/5c6a2c3609d3f27a7e8c4365/html5/thumbnails/27.jpg)
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)
![Page 28: Internet e HTML - ettoredifede.files.wordpress.com · I.T. Carlo Alberto Dalla Chiesa Prof. Di Fede Ettore 2 Richiami sul modello Client/Server (per il servizio WWW – World Wide](https://reader031.vdocuments.pub/reader031/viewer/2022021807/5c6a2c3609d3f27a7e8c4365/html5/thumbnails/28.jpg)
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)
![Page 29: Internet e HTML - ettoredifede.files.wordpress.com · I.T. Carlo Alberto Dalla Chiesa Prof. Di Fede Ettore 2 Richiami sul modello Client/Server (per il servizio WWW – World Wide](https://reader031.vdocuments.pub/reader031/viewer/2022021807/5c6a2c3609d3f27a7e8c4365/html5/thumbnails/29.jpg)
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.
![Page 30: Internet e HTML - ettoredifede.files.wordpress.com · I.T. Carlo Alberto Dalla Chiesa Prof. Di Fede Ettore 2 Richiami sul modello Client/Server (per il servizio WWW – World Wide](https://reader031.vdocuments.pub/reader031/viewer/2022021807/5c6a2c3609d3f27a7e8c4365/html5/thumbnails/30.jpg)
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)
![Page 31: Internet e HTML - ettoredifede.files.wordpress.com · I.T. Carlo Alberto Dalla Chiesa Prof. Di Fede Ettore 2 Richiami sul modello Client/Server (per il servizio WWW – World Wide](https://reader031.vdocuments.pub/reader031/viewer/2022021807/5c6a2c3609d3f27a7e8c4365/html5/thumbnails/31.jpg)
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
![Page 32: Internet e HTML - ettoredifede.files.wordpress.com · I.T. Carlo Alberto Dalla Chiesa Prof. Di Fede Ettore 2 Richiami sul modello Client/Server (per il servizio WWW – World Wide](https://reader031.vdocuments.pub/reader031/viewer/2022021807/5c6a2c3609d3f27a7e8c4365/html5/thumbnails/32.jpg)
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%
![Page 33: Internet e HTML - ettoredifede.files.wordpress.com · I.T. Carlo Alberto Dalla Chiesa Prof. Di Fede Ettore 2 Richiami sul modello Client/Server (per il servizio WWW – World Wide](https://reader031.vdocuments.pub/reader031/viewer/2022021807/5c6a2c3609d3f27a7e8c4365/html5/thumbnails/33.jpg)
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
![Page 34: Internet e HTML - ettoredifede.files.wordpress.com · I.T. Carlo Alberto Dalla Chiesa Prof. Di Fede Ettore 2 Richiami sul modello Client/Server (per il servizio WWW – World Wide](https://reader031.vdocuments.pub/reader031/viewer/2022021807/5c6a2c3609d3f27a7e8c4365/html5/thumbnails/34.jpg)
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>
![Page 35: Internet e HTML - ettoredifede.files.wordpress.com · I.T. Carlo Alberto Dalla Chiesa Prof. Di Fede Ettore 2 Richiami sul modello Client/Server (per il servizio WWW – World Wide](https://reader031.vdocuments.pub/reader031/viewer/2022021807/5c6a2c3609d3f27a7e8c4365/html5/thumbnails/35.jpg)
35 I.T. Carlo Alberto Dalla Chiesa Prof. Di Fede Ettore
Tag HTML (6- tabelle)
Allineamento verticale, orizzontale e Colore di sfondo della riga
![Page 36: Internet e HTML - ettoredifede.files.wordpress.com · I.T. Carlo Alberto Dalla Chiesa Prof. Di Fede Ettore 2 Richiami sul modello Client/Server (per il servizio WWW – World Wide](https://reader031.vdocuments.pub/reader031/viewer/2022021807/5c6a2c3609d3f27a7e8c4365/html5/thumbnails/36.jpg)
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>
![Page 37: Internet e HTML - ettoredifede.files.wordpress.com · I.T. Carlo Alberto Dalla Chiesa Prof. Di Fede Ettore 2 Richiami sul modello Client/Server (per il servizio WWW – World Wide](https://reader031.vdocuments.pub/reader031/viewer/2022021807/5c6a2c3609d3f27a7e8c4365/html5/thumbnails/37.jpg)
37 I.T. Carlo Alberto Dalla Chiesa Prof. Di Fede Ettore
Tag HTML (8- tabelle)
Allineamento verticale, orizzontale e Colore di sfondo della cella
![Page 38: Internet e HTML - ettoredifede.files.wordpress.com · I.T. Carlo Alberto Dalla Chiesa Prof. Di Fede Ettore 2 Richiami sul modello Client/Server (per il servizio WWW – World Wide](https://reader031.vdocuments.pub/reader031/viewer/2022021807/5c6a2c3609d3f27a7e8c4365/html5/thumbnails/38.jpg)
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>
![Page 39: Internet e HTML - ettoredifede.files.wordpress.com · I.T. Carlo Alberto Dalla Chiesa Prof. Di Fede Ettore 2 Richiami sul modello Client/Server (per il servizio WWW – World Wide](https://reader031.vdocuments.pub/reader031/viewer/2022021807/5c6a2c3609d3f27a7e8c4365/html5/thumbnails/39.jpg)
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>
![Page 40: Internet e HTML - ettoredifede.files.wordpress.com · I.T. Carlo Alberto Dalla Chiesa Prof. Di Fede Ettore 2 Richiami sul modello Client/Server (per il servizio WWW – World Wide](https://reader031.vdocuments.pub/reader031/viewer/2022021807/5c6a2c3609d3f27a7e8c4365/html5/thumbnails/40.jpg)
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>
![Page 41: Internet e HTML - ettoredifede.files.wordpress.com · I.T. Carlo Alberto Dalla Chiesa Prof. Di Fede Ettore 2 Richiami sul modello Client/Server (per il servizio WWW – World Wide](https://reader031.vdocuments.pub/reader031/viewer/2022021807/5c6a2c3609d3f27a7e8c4365/html5/thumbnails/41.jpg)
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>
![Page 42: Internet e HTML - ettoredifede.files.wordpress.com · I.T. Carlo Alberto Dalla Chiesa Prof. Di Fede Ettore 2 Richiami sul modello Client/Server (per il servizio WWW – World Wide](https://reader031.vdocuments.pub/reader031/viewer/2022021807/5c6a2c3609d3f27a7e8c4365/html5/thumbnails/42.jpg)
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>
![Page 43: Internet e HTML - ettoredifede.files.wordpress.com · I.T. Carlo Alberto Dalla Chiesa Prof. Di Fede Ettore 2 Richiami sul modello Client/Server (per il servizio WWW – World Wide](https://reader031.vdocuments.pub/reader031/viewer/2022021807/5c6a2c3609d3f27a7e8c4365/html5/thumbnails/43.jpg)
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:)
![Page 44: Internet e HTML - ettoredifede.files.wordpress.com · I.T. Carlo Alberto Dalla Chiesa Prof. Di Fede Ettore 2 Richiami sul modello Client/Server (per il servizio WWW – World Wide](https://reader031.vdocuments.pub/reader031/viewer/2022021807/5c6a2c3609d3f27a7e8c4365/html5/thumbnails/44.jpg)
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"
![Page 45: Internet e HTML - ettoredifede.files.wordpress.com · I.T. Carlo Alberto Dalla Chiesa Prof. Di Fede Ettore 2 Richiami sul modello Client/Server (per il servizio WWW – World Wide](https://reader031.vdocuments.pub/reader031/viewer/2022021807/5c6a2c3609d3f27a7e8c4365/html5/thumbnails/45.jpg)
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).
![Page 46: Internet e HTML - ettoredifede.files.wordpress.com · I.T. Carlo Alberto Dalla Chiesa Prof. Di Fede Ettore 2 Richiami sul modello Client/Server (per il servizio WWW – World Wide](https://reader031.vdocuments.pub/reader031/viewer/2022021807/5c6a2c3609d3f27a7e8c4365/html5/thumbnails/46.jpg)
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.
![Page 47: Internet e HTML - ettoredifede.files.wordpress.com · I.T. Carlo Alberto Dalla Chiesa Prof. Di Fede Ettore 2 Richiami sul modello Client/Server (per il servizio WWW – World Wide](https://reader031.vdocuments.pub/reader031/viewer/2022021807/5c6a2c3609d3f27a7e8c4365/html5/thumbnails/47.jpg)
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).
![Page 48: Internet e HTML - ettoredifede.files.wordpress.com · I.T. Carlo Alberto Dalla Chiesa Prof. Di Fede Ettore 2 Richiami sul modello Client/Server (per il servizio WWW – World Wide](https://reader031.vdocuments.pub/reader031/viewer/2022021807/5c6a2c3609d3f27a7e8c4365/html5/thumbnails/48.jpg)
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>
![Page 49: Internet e HTML - ettoredifede.files.wordpress.com · I.T. Carlo Alberto Dalla Chiesa Prof. Di Fede Ettore 2 Richiami sul modello Client/Server (per il servizio WWW – World Wide](https://reader031.vdocuments.pub/reader031/viewer/2022021807/5c6a2c3609d3f27a7e8c4365/html5/thumbnails/49.jpg)
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>
![Page 50: Internet e HTML - ettoredifede.files.wordpress.com · I.T. Carlo Alberto Dalla Chiesa Prof. Di Fede Ettore 2 Richiami sul modello Client/Server (per il servizio WWW – World Wide](https://reader031.vdocuments.pub/reader031/viewer/2022021807/5c6a2c3609d3f27a7e8c4365/html5/thumbnails/50.jpg)
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>
![Page 51: Internet e HTML - ettoredifede.files.wordpress.com · I.T. Carlo Alberto Dalla Chiesa Prof. Di Fede Ettore 2 Richiami sul modello Client/Server (per il servizio WWW – World Wide](https://reader031.vdocuments.pub/reader031/viewer/2022021807/5c6a2c3609d3f27a7e8c4365/html5/thumbnails/51.jpg)
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)
![Page 52: Internet e HTML - ettoredifede.files.wordpress.com · I.T. Carlo Alberto Dalla Chiesa Prof. Di Fede Ettore 2 Richiami sul modello Client/Server (per il servizio WWW – World Wide](https://reader031.vdocuments.pub/reader031/viewer/2022021807/5c6a2c3609d3f27a7e8c4365/html5/thumbnails/52.jpg)
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"
![Page 53: Internet e HTML - ettoredifede.files.wordpress.com · I.T. Carlo Alberto Dalla Chiesa Prof. Di Fede Ettore 2 Richiami sul modello Client/Server (per il servizio WWW – World Wide](https://reader031.vdocuments.pub/reader031/viewer/2022021807/5c6a2c3609d3f27a7e8c4365/html5/thumbnails/53.jpg)
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)
![Page 54: Internet e HTML - ettoredifede.files.wordpress.com · I.T. Carlo Alberto Dalla Chiesa Prof. Di Fede Ettore 2 Richiami sul modello Client/Server (per il servizio WWW – World Wide](https://reader031.vdocuments.pub/reader031/viewer/2022021807/5c6a2c3609d3f27a7e8c4365/html5/thumbnails/54.jpg)
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>
![Page 55: Internet e HTML - ettoredifede.files.wordpress.com · I.T. Carlo Alberto Dalla Chiesa Prof. Di Fede Ettore 2 Richiami sul modello Client/Server (per il servizio WWW – World Wide](https://reader031.vdocuments.pub/reader031/viewer/2022021807/5c6a2c3609d3f27a7e8c4365/html5/thumbnails/55.jpg)
55 I.T. Carlo Alberto Dalla Chiesa Prof. Di Fede Ettore
Audio
<audio controls>
<source src="canzone.mp3" type="audio/mpeg" />
</audio>
![Page 56: Internet e HTML - ettoredifede.files.wordpress.com · I.T. Carlo Alberto Dalla Chiesa Prof. Di Fede Ettore 2 Richiami sul modello Client/Server (per il servizio WWW – World Wide](https://reader031.vdocuments.pub/reader031/viewer/2022021807/5c6a2c3609d3f27a7e8c4365/html5/thumbnails/56.jpg)
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>
![Page 57: Internet e HTML - ettoredifede.files.wordpress.com · I.T. Carlo Alberto Dalla Chiesa Prof. Di Fede Ettore 2 Richiami sul modello Client/Server (per il servizio WWW – World Wide](https://reader031.vdocuments.pub/reader031/viewer/2022021807/5c6a2c3609d3f27a7e8c4365/html5/thumbnails/57.jpg)
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>
![Page 58: Internet e HTML - ettoredifede.files.wordpress.com · I.T. Carlo Alberto Dalla Chiesa Prof. Di Fede Ettore 2 Richiami sul modello Client/Server (per il servizio WWW – World Wide](https://reader031.vdocuments.pub/reader031/viewer/2022021807/5c6a2c3609d3f27a7e8c4365/html5/thumbnails/58.jpg)
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
![Page 59: Internet e HTML - ettoredifede.files.wordpress.com · I.T. Carlo Alberto Dalla Chiesa Prof. Di Fede Ettore 2 Richiami sul modello Client/Server (per il servizio WWW – World Wide](https://reader031.vdocuments.pub/reader031/viewer/2022021807/5c6a2c3609d3f27a7e8c4365/html5/thumbnails/59.jpg)
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
![Page 60: Internet e HTML - ettoredifede.files.wordpress.com · I.T. Carlo Alberto Dalla Chiesa Prof. Di Fede Ettore 2 Richiami sul modello Client/Server (per il servizio WWW – World Wide](https://reader031.vdocuments.pub/reader031/viewer/2022021807/5c6a2c3609d3f27a7e8c4365/html5/thumbnails/60.jpg)
60 I.T. Carlo Alberto Dalla Chiesa Prof. Di Fede Ettore
I Fogli di Stile CSS
![Page 61: Internet e HTML - ettoredifede.files.wordpress.com · I.T. Carlo Alberto Dalla Chiesa Prof. Di Fede Ettore 2 Richiami sul modello Client/Server (per il servizio WWW – World Wide](https://reader031.vdocuments.pub/reader031/viewer/2022021807/5c6a2c3609d3f27a7e8c4365/html5/thumbnails/61.jpg)
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.
![Page 62: Internet e HTML - ettoredifede.files.wordpress.com · I.T. Carlo Alberto Dalla Chiesa Prof. Di Fede Ettore 2 Richiami sul modello Client/Server (per il servizio WWW – World Wide](https://reader031.vdocuments.pub/reader031/viewer/2022021807/5c6a2c3609d3f27a7e8c4365/html5/thumbnails/62.jpg)
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>
![Page 63: Internet e HTML - ettoredifede.files.wordpress.com · I.T. Carlo Alberto Dalla Chiesa Prof. Di Fede Ettore 2 Richiami sul modello Client/Server (per il servizio WWW – World Wide](https://reader031.vdocuments.pub/reader031/viewer/2022021807/5c6a2c3609d3f27a7e8c4365/html5/thumbnails/63.jpg)
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>
![Page 64: Internet e HTML - ettoredifede.files.wordpress.com · I.T. Carlo Alberto Dalla Chiesa Prof. Di Fede Ettore 2 Richiami sul modello Client/Server (per il servizio WWW – World Wide](https://reader031.vdocuments.pub/reader031/viewer/2022021807/5c6a2c3609d3f27a7e8c4365/html5/thumbnails/64.jpg)
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>
![Page 65: Internet e HTML - ettoredifede.files.wordpress.com · I.T. Carlo Alberto Dalla Chiesa Prof. Di Fede Ettore 2 Richiami sul modello Client/Server (per il servizio WWW – World Wide](https://reader031.vdocuments.pub/reader031/viewer/2022021807/5c6a2c3609d3f27a7e8c4365/html5/thumbnails/65.jpg)
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; ...; }
![Page 66: Internet e HTML - ettoredifede.files.wordpress.com · I.T. Carlo Alberto Dalla Chiesa Prof. Di Fede Ettore 2 Richiami sul modello Client/Server (per il servizio WWW – World Wide](https://reader031.vdocuments.pub/reader031/viewer/2022021807/5c6a2c3609d3f27a7e8c4365/html5/thumbnails/66.jpg)
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"
![Page 67: Internet e HTML - ettoredifede.files.wordpress.com · I.T. Carlo Alberto Dalla Chiesa Prof. Di Fede Ettore 2 Richiami sul modello Client/Server (per il servizio WWW – World Wide](https://reader031.vdocuments.pub/reader031/viewer/2022021807/5c6a2c3609d3f27a7e8c4365/html5/thumbnails/67.jpg)
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>
![Page 68: Internet e HTML - ettoredifede.files.wordpress.com · I.T. Carlo Alberto Dalla Chiesa Prof. Di Fede Ettore 2 Richiami sul modello Client/Server (per il servizio WWW – World Wide](https://reader031.vdocuments.pub/reader031/viewer/2022021807/5c6a2c3609d3f27a7e8c4365/html5/thumbnails/68.jpg)
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> ...
![Page 69: Internet e HTML - ettoredifede.files.wordpress.com · I.T. Carlo Alberto Dalla Chiesa Prof. Di Fede Ettore 2 Richiami sul modello Client/Server (per il servizio WWW – World Wide](https://reader031.vdocuments.pub/reader031/viewer/2022021807/5c6a2c3609d3f27a7e8c4365/html5/thumbnails/69.jpg)
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> ...
![Page 70: Internet e HTML - ettoredifede.files.wordpress.com · I.T. Carlo Alberto Dalla Chiesa Prof. Di Fede Ettore 2 Richiami sul modello Client/Server (per il servizio WWW – World Wide](https://reader031.vdocuments.pub/reader031/viewer/2022021807/5c6a2c3609d3f27a7e8c4365/html5/thumbnails/70.jpg)
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).
![Page 71: Internet e HTML - ettoredifede.files.wordpress.com · I.T. Carlo Alberto Dalla Chiesa Prof. Di Fede Ettore 2 Richiami sul modello Client/Server (per il servizio WWW – World Wide](https://reader031.vdocuments.pub/reader031/viewer/2022021807/5c6a2c3609d3f27a7e8c4365/html5/thumbnails/71.jpg)
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).
![Page 72: Internet e HTML - ettoredifede.files.wordpress.com · I.T. Carlo Alberto Dalla Chiesa Prof. Di Fede Ettore 2 Richiami sul modello Client/Server (per il servizio WWW – World Wide](https://reader031.vdocuments.pub/reader031/viewer/2022021807/5c6a2c3609d3f27a7e8c4365/html5/thumbnails/72.jpg)
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
![Page 73: Internet e HTML - ettoredifede.files.wordpress.com · I.T. Carlo Alberto Dalla Chiesa Prof. Di Fede Ettore 2 Richiami sul modello Client/Server (per il servizio WWW – World Wide](https://reader031.vdocuments.pub/reader031/viewer/2022021807/5c6a2c3609d3f27a7e8c4365/html5/thumbnails/73.jpg)
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
![Page 74: Internet e HTML - ettoredifede.files.wordpress.com · I.T. Carlo Alberto Dalla Chiesa Prof. Di Fede Ettore 2 Richiami sul modello Client/Server (per il servizio WWW – World Wide](https://reader031.vdocuments.pub/reader031/viewer/2022021807/5c6a2c3609d3f27a7e8c4365/html5/thumbnails/74.jpg)
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.
![Page 75: Internet e HTML - ettoredifede.files.wordpress.com · I.T. Carlo Alberto Dalla Chiesa Prof. Di Fede Ettore 2 Richiami sul modello Client/Server (per il servizio WWW – World Wide](https://reader031.vdocuments.pub/reader031/viewer/2022021807/5c6a2c3609d3f27a7e8c4365/html5/thumbnails/75.jpg)
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:
![Page 76: Internet e HTML - ettoredifede.files.wordpress.com · I.T. Carlo Alberto Dalla Chiesa Prof. Di Fede Ettore 2 Richiami sul modello Client/Server (per il servizio WWW – World Wide](https://reader031.vdocuments.pub/reader031/viewer/2022021807/5c6a2c3609d3f27a7e8c4365/html5/thumbnails/76.jpg)
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.
![Page 77: Internet e HTML - ettoredifede.files.wordpress.com · I.T. Carlo Alberto Dalla Chiesa Prof. Di Fede Ettore 2 Richiami sul modello Client/Server (per il servizio WWW – World Wide](https://reader031.vdocuments.pub/reader031/viewer/2022021807/5c6a2c3609d3f27a7e8c4365/html5/thumbnails/77.jpg)
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
![Page 78: Internet e HTML - ettoredifede.files.wordpress.com · I.T. Carlo Alberto Dalla Chiesa Prof. Di Fede Ettore 2 Richiami sul modello Client/Server (per il servizio WWW – World Wide](https://reader031.vdocuments.pub/reader031/viewer/2022021807/5c6a2c3609d3f27a7e8c4365/html5/thumbnails/78.jpg)
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.