AOT AOT LAB LAB

(1)

Agent and Object Technology Lab

Dipartimento di Ingegneria dell’Informazione Università degli Studi di Parma

AOT AOT LAB LAB

Fondamenti di Informatica Fondamenti di Informatica Fondamenti di Informatica Fondamenti di Informatica

Reti di calcolatori e Internet

Michele Tomaiuolo

(2)

AOT AOT LAB LAB

MODEM

Reti di calcolatori Reti di calcolatori Reti di calcolatori Reti di calcolatori

MODEM

(3)

AOT AOT

LAB LAB

Una rete di calcolatore offre alcuni vantaggi rispetto all’uso di un calcolatore isolato

Condivisione dell’informazione

Condivisione delle risorse

Accesso a risorse remote

Alta affidabilità

Convenienza economica

Crescita graduale

(4)

AOT AOT

LAB LAB

Le reti sono classificate in base alla loro dimensione

Rete locale (LAN)

Rete Metropolitana (MAN)

Rete Geografica (WAN)

(5)

AOT AOT

LAB LAB

Reti localiReti localiReti localiReti locali

(6)

AOT AOT

LAB LAB

Reti di interconnessioneReti di interconnessioneReti di interconnessioneReti di interconnessione

(7)

AOT AOT

LAB LAB

Prestazioni di una retePrestazioni di una retePrestazioni di una retePrestazioni di una rete

Le prestazioni di una rete sono indicate con la larghezza di banda

La larghezza di banda indica la quantità di informazione che la rete è in grado di trasmettere nell’unità di tempo

La larghezza di banda viene misurata in bit al secondo

Un collegamento telefonico via modem (fino a 56 Kbps)

Un collegamento ISDN o ADSL (fino a ~20Mbps)

Un collegamento di una rete locale (fino ad alcuni Gbps)

(8)

AOT AOT

LAB LAB

TrasmissioneTrasmissioneTrasmissioneTrasmissione datidatidatidati

Doppino telefonico

Modem su linea telefonica commutata 56 kbit/s

ISDN 128 Kbit/s

ADSL 640 Kbit/s, fino ad alcuni Mbit/s

Cavo coassiale

Su brevi distanze 10 MBit/s

Su lunghe distanze 100 Kbit/s

Fibra ottica Tbit/s

Onde elettromagnetiche

BlueTooth (brevissime distanze) 700 kbit/s

WiFi (decine/centinaia di metri) 54 Mbit/s

Via satellite

(9)

AOT AOT

LAB LAB

TrasmissioneTrasmissioneTrasmissioneTrasmissione datidatidatidati

54 Mbit/s

< 500 m WiFi

700 Kbit/s

< 100 m BlueTooth

Onde

elettromagnetiche

Tbit/s Fibra ottica

100 Kbit/s

> 1 Km

10 Mbit/s

< 1 Km Cavo coassiale

640 Kbit/s-20Mbit/s ADSL

128 Kbit/s ISDN

56 Kbit/s Modulazione

Linea telefonica analogica

Velocità Diametro

Tipo

trasmissione Media

(10)

AOT AOT

LAB LAB

ÎnternetÎnternetÎnternetÎnternet

Internet è una rete di calcolatori che permette la comunicazione tra tutti i calcolatori del mondo

Un indirizzo diverso per ogni calcolatore (indirizzo IP)

Un stack di protocolli di comunicazione comune

(TCP/IP) per lo scambio di messaggi (pacchetti) tra i calcolatori

Per ogni pacchetto viene scelto un percorso

• Commutazione di pacchetto anziché di circuito

(11)

AOT AOT

LAB LAB

ÂrpanetÂrpanetÂrpanetÂrpanet

Arpa – Advanced Research Projects Agency

Ottobre 1969: primi due nodi di Internet

Università della California di Los Angeles

Stanford Research Institute

Collegamento telefonico da computer a computer

1973: Transmission Control Protocol (Tcp)

1978: Internet Protocol (Ip)

1983: Milnet

1990: Inizia privatizzazione di Arpanet

(12)

AOT AOT

LAB LAB

ÛsenetÛsenetÛsenetÛsenet

1974: Bell Labs rilasciano Unix

1978: Unix-to-unix copy protocol (Uucp)

1978: Due studenti dell’Università di Chicago creano il Computer Bulletin Board System

1983: Fido, Fidonet (PC, Dos)

1979: Usenet News

1979: Primo ponte tra Arpanet e Usenet a Berkeley, nasce Internet

(13)

AOT AOT

LAB LAB

Indirizzi IPIndirizzi IPIndirizzi IPIndirizzi IP

Un indirizzo IP è composto da una sequenza di quattro numeri compresi tra 0 e 255

160.78.28.83 192.168.1.1 127.0.0.1

Esiste un sistema detto Domain Name Server (DNS) che permette di associare dei nomi

simbolici agli indirizzi IP

www.repubblica.it www.google.com

www.unipr.it, WWW.UniPR.IT

(14)

AOT AOT

LAB LAB

Indirizzi IPIndirizzi IPIndirizzi IPIndirizzi IP

I nomi simbolici associati agli indirizzi IP non sono liberi, ma assegnati da uffici appositi

Il simbolo terminale (tld) è assegnato a livello internazionale e può essere di due tipi:

Indicante il tipo di organizzazione

com, edu, gov, net, mil, org

Indicante la nazione

it, uk, fr, …

(15)

AOT AOT

LAB LAB

Pacchetto IPPacchetto IPPacchetto IPPacchetto IP

(16)

AOT AOT

LAB LAB

Pacchetto IPPacchetto IPPacchetto IPPacchetto IP

Version – 4 per IPv4

Internet Header Length – 4 bit, 5-15 parole da 32 bit

Type of Service

3 bit precedenza, latenza, throughput, affidabilità, 2 bit riservati

Identification

Identifica il datagram, assegnato dal mittente per aiutare il destinatario ad assemblare i frammenti

Flags e fragment offset

Riservato, don’t fragment (DF), more fragments (MF)

Blocchi da 8 byte

Ethernet: Maximum transmission unit = 1500 bytes

Time to live – Decrementato ad ogni hop

Protocol – 6 = TCP, 17 = UDP (User datagram protocol)

(17)

AOT AOT

LAB LAB

Servizi di InternetServizi di InternetServizi di InternetServizi di Internet

La rete internet fornisce quattro servizi principali:

FTP (File Transfer Protocol)

SMTP (Simple Mail Transfer Protocol)

TELNET

HTTP (HyperText Transport Protocol)

(18)

AOT AOT

LAB LAB

Modello OSI/ISO Modello OSI/ISO Modello OSI/ISO Modello OSI/ISO

Hardware Fisico

1

Trasmissione e ricezione dati dipendente dal tipo di hardware Collegamento dati

2

Protocollo IP Rete

3

Protocolli TCP e UDP Trasporto

4

Protocolli dei servizi:

FTP, HTTP, SMTP, RPC, ...

Sessione 5

Definizione standard

del formato dei dati utilizzati Presentazione

6

Applicazioni Applicazione

7

Descrizione Definizione

Livello

(19)

AOT AOT

LAB LAB

World Wide WebWorld Wide WebWorld Wide WebWorld Wide Web

Assieme alla posta elettronica, World Wide Web (WWW o Web) è il modo più diffuso di utilizzare la rete Internet

Il Web permette agli utenti di internet di mettere a disposizione e di accedere a documenti via HTTP

Il Web si basa su due programmi

Il Web server

Il Web client (browser)

(20)

AOT AOT

LAB LAB

World Wide WebWorld Wide WebWorld Wide WebWorld Wide Web

1990: World Wide Web (Html+Http)

Sistema per la condivisione di informazioni in ipertesto

Sviluppato da Tim Berners-Lee

CERN (Centro Europeo per la ricerca nucleare)

1993: Mosaic, primo browser grafico

Marc Andreessen

1994: Netscape Navigator

1995: Internet Explorer

(21)

AOT AOT LAB LAB

Standardizzato dal W3C (http://www.w3.org)

Linguaggio per pubblicare informazioni a livello globale

Una sorta di lingua madre che tutti I computer sono potenzialmente in grado di capire

HTML fornisce agli autori degli strumenti per:

Pubblicare documenti online con titoli, testo, tabelle, foto ecc.

Recuperare informazioni online attraverso collegamenti ipertestuali, con un click del mouse

Disegnare module per condurre transazioni con servizi remoti, da usare per cercare informazioni, prenotare, ordinare prodotti ecc.

Includere fogli di calcolo, video, audio e altre applicazioni direttamente nei documenti

Html HyperText Markup Language

(22)

AOT AOT LAB LAB

HTML dichiara tipi di elementi che permettono di strutturare I documenti (paragrafi, collegamenti ipertestuali, liste,

tabelle, immagini ecc.)

Ogni dichiarazione di tipo di elemento generalmente

descrive tre parti: un tag di apertura, un contenuto e un tag di chiusura

Testo normale. <b>Testo in grassetto.</b> Normale.

La maggior parte dei tag permette la definizione di attributi

Leggi su <a href="http://aot.ce.unipr.it">AOTLab</a>.

I tag semplici non hanno un contenuto

Html Tag ed elementi

(23)

AOT AOT LAB LAB

Anatomia di una pagina Html

Tipo di documento – All’inizio e alla fine del file

Intestazione – Informazioni descrittive, come il titolo

Titolo – Deve essere nell’intestazione

Corpo – Parte principale della pagina, contenuto del documento

<html>

<head>

<title>Hello, world</title>

</head>

<body>

Hello, world.

</body>

</html>

Html Anatomia di una pagina

(24)

AOT AOT LAB LAB

Grassetto e corsivo

<strong>testo in grassetto</strong>

<em>testo in corsivo</em>

Titoli

<h1>Il titolo più grande</h1>

...

<h6>Il titolo più piccolo</h6>

Paragrafi

<p>Questo è un paragrafo.</p>

Html Tag di formattazione testo

(25)

AOT AOT LAB LAB

Testo preformattato

<pre>viene usato un font a larghezza fissa, gli spazi e I ritorni a capo sono preservati</pre>

Riga orizzontale di separazione

<hr />

Interruzioni di linea

Prima linea.<br />Seconda linea.

Commenti

Html Tag di formattazione testo

(26)

AOT AOT LAB LAB

Url è un acronimo per Uniform Resource Locator ed è un riferimento (indirizzo) per una risorsa sul Internet

Il nome della risorsa è il suo indirizzo completo e dipende interamente dal protocollo – Per Http include:

Nome dell’host – Il nome della macchina su cui risiede la risorsa

Numero di porta – Num porta a cui collegarsi (di solito omesso)

Nome del file – Percorso completo della risorsa sulla macchina

Frammento – Riferimento ad una sezione con id univoco all’interno della risorsa, ad una porzione di testo (di solito omesso)

http://www.ietf.org:80/rfc/rfc2732.txt

Html Url

(27)

AOT AOT LAB LAB

Collegamenti ad altre pagine

<a href="http://aot.ce.unipr.it">AOTLab</a>

Collegamenti con immagini

Se la risorsa (immagine o documento) si trova nella stessa cartella della pagina, allora basta un url relativo

Collegamenti e-mail

Dì al <a href="mailto:[email protected]">

Html Collegamenti

(28)

AOT AOT LAB LAB

Un collegamento può indicare ad una parte della stessa pagina, o al centro di un’altra pagina

Si deve assegnare all’elemento puntato un nome univoco con l’attributo id, oppure porre dove richiesto un elemento di anchor

Si deve aggiungere un frammento alla url del collegamento

<html>

<body>

<p id="paragraph1">Il primo paragrafo. <a href="#paragraph2">Vai al secondo paragrafo.</a></p>

<p><a name="paragraph2">Il secondo paragrafo.</a> <a href="#paragraph1">Vai al primo paragrafo.</a></p>

<p>Il terzo paragrafo. <a

href="http://somehost.com/anotherpage.html#frag1">Vai ad un frammento in un’altra pagina.</a></p>

</body>

</html>

Html Collegamenti

(29)

AOT AOT LAB LAB

<ul>

<li>First item</li>

<li>Second item</li>

<li>Third item</li>

</ul>

Html Liste non ordinate

(30)

AOT AOT LAB LAB

<ol>

<li>First item</li>

<li>Second item</li>

<li>Third item</li>

</ol>

Html Liste ordinate

(31)

AOT AOT LAB LAB

<dl>

<dt>First term</dt>

<dd>Definition of first term.</dd>

<dt>Second term</dt>

<dt>Third term</dt>

<dd>Definition of second and third term.</dd>

<dd>Alternate definition of second and third term.</dd>

</dl>

Html Liste di definizione

(32)

AOT AOT LAB LAB

Le tabelle html permettono di mostrare dati

Le tabelle sono definite dal tag <table>

Il tag <table> contiene righe di celle, definite dal tag <tr>

Ogni tag <tr> contiene celle di dati, definite dal tag <td>

Le celle di titolo sono definite dal tag <th>

Le righe sono definite dall’alto verso il basso

Le celle sono definite da sinistra a destra

Ogni cella di dati può contenere tutto ciò che si vuole – collegamenti, immagini, liste e anche altre tabelle

Html Tabelle

(33)

AOT AOT LAB LAB

<table border="1">

<tr>

<td>northwest</td>

<td>northeast</td>

</tr>

<tr>

<td>southwest</td>

<td>southeast</td>

</tr>

</table>

Html Una tabella semplice

(34)

AOT AOT LAB LAB

<table border="1">

<caption><i>A test table with merged cells</i></caption>

<tr>

<th rowspan="2"></th>

<th colspan="2">Average</th>

<th rowspan="2">Red eyes</th>

</tr>

<tr>

<th>height</th>

<th>weight</th>

</tr>

<tr><th>Males</th><td>1.9</td><td>0.003</td><td>40%</td></tr>

<tr><th>Females</th><td>1.7</td><td>0.002</td><td>43%</td></tr>

</table>

Html Una tabella con celle unite

(35)

AOT AOT

LAB LAB

^Html^Html^Html^Html

Elementi di raggruppamento Elementi di raggruppamentoElementi di raggruppamento Elementi di raggruppamento

Gli elementi div e span, assieme agli attributi id e class, offrono un meccanismo generico per

aggiungere struttura ai documenti

L’elemento span raggruppa contenuto inline

L’elemento div raggruppa contenuto di livello blocco

Non impongono nessun altro vincolo di presentazione al contenuto

Gli autori possono usare questi elementi assieme a fogli di stile per adattare i doc html ai loro bisogni e gusti

(36)

AOT AOT

LAB LAB

^MarkupMarkup semantico^Markup^Markup semanticosemanticosemantico Linee guida generali Linee guida generaliLinee guida generali Linee guida generali

Definire un ricco vocabolario di classi semantiche

… la cui presentazione può essere specificata in fogli di stile validi per tutto il sito web

Abbastanza da poter scrivere documenti lunghi e complessi senza introdurre elementi di presentazione

Prendono il posto dei vecchi template di presentazione

La presentazione è ora definita nei fogli di stile, permettendo al markup di rimanere semantico

Riferimenti per il markup di mozilla.org

http://www.mozilla.org/contribute/writing/markup

Tecniche e linee guida per l’accessibilità dei contenuti web

http://www.w3.org/TR/WCAG10-HTML-TECHS/

(37)

AOT AOT

LAB LAB

^MarkupMarkup semantico^Markup^Markup semanticosemanticosemantico Sezioni Sezioni Sezioni Sezioni

Usare <p> per marcare I paragrafi

Usare I tag per racchiudere I paragrafi, non persepararli

Usere <div class="section"> per marcare le sezioni all’interno di un documento

Racchiudere sia il titolo che il contenuto della sezione

Le sezioni sono tipicamente un po’ rientrate rispetto al testo vicino

<div class="section">

<h2 id="structure">General Structure</h2>

<p>...</p>

</div>

(38)

AOT AOT

LAB LAB

^MarkupMarkup semantico^Markup^Markup semanticosemanticosemantico Citazioni Citazioni Citazioni Citazioni

Usare <blockquote> con <address>

Paragrafi o altri contenuti di livello blocco

Si può indicare una attribuzione con <address> proprio prima del tag di chiusura

Epigraffi: “epigraph” come classe

<blockquote cite="http://www.faqs.org/rfcs/rfc1866.html">

<p>The BLOCKQUOTE element contains text quoted from another source.</p>

<p>A typical rendering might be a slight extra left and right indent, and/or italic font. The BLOCKQUOTE typically provides space above and below the quote.</p>

<address><a href="http://www.faqs.org/rfcs/rfc1866.html">HTML 2.0</a></address>

</blockquote>

(39)

AOT AOT

LAB LAB

Linee guida Linee guida mozilla.orgLinee guida Linee guida mozilla.orgmozilla.orgmozilla.org Note di vario tipo Note di vario tipoNote di vario tipo Note di vario tipo

Commenti dell’autore o dell’editor (in una bozza)

<div class="remark">

<span class="remark">

Note generiche

<span class="note">

<p class="note">

<div class="note">

Note chiave

<div class="key-point">

Avvisi importanti (cioè da leggere)

(40)

AOT AOT

LAB LAB

Linee guida Linee guida mozilla.orgLinee guida Linee guida mozilla.orgmozilla.orgmozilla.org Figure ed

Figure ed Figure ed

Figure ed esempiesempiesempiesempi

Figure

<div class="figure">

Esempi

<div class="example">

<div class="good example">

<div class="bad example">

Racchiudere frammenti di codice in blocchi <code>

(41)

AOT AOT

LAB LAB

Linee guida Linee guida mozilla.orgLinee guida Linee guida mozilla.orgmozilla.orgmozilla.org Computer Computer Computer Computer

Codice inline: <code>

Blocchi di codice: <pre class="code">

Comandi: <code class="command">

Nomi di file e url: <code class="filename">

Input da tastiera: <kbd>

Variabili e costanti: <var>

Catture di schermate testuali (blocchi di output)

<pre class="screen"> e <div class="screen">

Output inline: <samp>

(42)

AOT AOT

LAB LAB

Linee guida Linee guida mozilla.orgLinee guida Linee guida mozilla.orgmozilla.orgmozilla.org Navigazione NavigazioneNavigazione Navigazione

Indice (table of contents):

<ol class="toc"> e <ul class="toc">

Navigazione locale:

<ul class="snav">

Breadcrumb (navigazione gerarchica) :

<p class="crumbs">

Riferimenti esterni al sito:

<a class="ex-ref">

(43)

AOT AOT

LAB LAB

^Css^Css^Css^Css

Cascading Cascading Cascading

Cascading Style Style Style SheetsStyle SheetsSheetsSheets

Gli stili definiscono come visulalizzare gli elementi html

Gli stili sono di solito memorizzati in fogli di stile

Gli stili sono stati aggiunti ad html (v4.0) per risolvere un problema

I fogli di stile esterni fanno risparmiare un sacco di lavoro

I fogli di stile esterni sono memorizzati in file css

Definizioni di stile multiple sono trattate a cascata in un una sola definizione

(44)

AOT AOT

LAB LAB

^Css^Css^Css^Css

Gli stili risolvono un problema Gli stili risolvono un problemaGli stili risolvono un problema Gli stili risolvono un problema

I tag html erano stati in origine studiati per definire il contenuto di un documento html

Dovevano dire: “Questo è un titolo", “Questo è un

paragrafo”, “Questa è una tabella", usando tag come

<h1>, <p>, <table>, e così via

Il layout del documento doveva essere preso in carica dal browser, senza usare tag di formattazione

(45)

AOT AOT

LAB LAB

^Css^Css^Css^Css

Gli stili risolvono un problema Gli stili risolvono un problemaGli stili risolvono un problema Gli stili risolvono un problema

I due browser principali – Netscape e Internet

Explorer – hanno continuato ad aggiungere nuovi tag e attributi (come il tag <font> e l’attributo color) alle specifiche html originali

Sempre più difficile creare siti web dove il contenuto fosse separato dal layout di presentazione

Per risolvere questo problema, il W3C ha creato gli stili in aggiunta ad Html 4.0

Gli stili in Html 4.0 definiscono la visualizzazione degli elementi, sostituendo <font> e color di Html 3.2

Sia Netscape 4.0 che Internet Explorer 4.0 supportano i Cascading Style Sheets

(46)

AOT AOT

LAB LAB

_Gli_Gli_Gli_{Gli stili}_stilistili fanno_stili fannofanno risparmiarefanno risparmiarerisparmiarerisparmiare lavorolavorolavorolavoro^Css^Css^Css^Css

Css segna una svolta nei progetti web perché

permette agli sviluppatori di controllare in un sol colpo lo stile e la disposizione di molte pagine web

Stili normalmente in un file esterno alle pagine html

Uno sviluppatore web può definire uno stile per ciascun elemento html ed applicarlo a tutte le pagine che vuole

Modifica globale - es. modificare il font o il colore di tutti i titoli in tutte le pagine di un sito

Basta cambiare lo stile, e tutti gli elementi nel sito si aggiornano automaticamente

Css può far risparmiare un sacco di lavoro

(47)

AOT AOT

LAB LAB

^Css^Css^Css^Css

Come inserire un foglio di stile Come inserire un foglio di stileCome inserire un foglio di stile Come inserire un foglio di stile

Fogli di stile esterni

Fogli si stile interni

Stile inline

(48)

AOT AOT

LAB LAB

^Css^Css^Css^Css

Fogli di stile esterni Fogli di stile esterniFogli di stile esterni Fogli di stile esterni

Foglio esterno: ideale per l’applicazione a molte pagine

Si può cambiare l’aspetto di un intero sito modificando un solo file

Ogni pagina deve essere collegata al foglio di stile per mezzo del tag <link>

Il tag <link> va all’interno della sezione head

<head>

<link rel="stylesheet" type="text/css" href="mystyle.css" />

</head>

Il browser leggerà le definizioni di stile dal file mystyle.css, e formatterà il documento di conseguenza

Un foglio di stile esterno può essere scritto in qualsiasi editor di testo

Il file non deve contenere alcun tag html

Il foglio di stile deve essere salvato con estensione .css

Un esempio di foglio di stile è mostrato sotto:

body {background-image: url("images/back40.gif")}

p {margin-left: 20px}

(49)

AOT AOT

LAB LAB

^Css^Css^Css^Css

Fogli di stile interni Fogli di stile interni Fogli di stile interni Fogli di stile interni

Un foglio di stile interno può essere usato quando un documento html ha uno stile unico

Un foglio di stile interno si definisce nella sezione head usando il tag <style>

<head>

<style type="text/css">

hr {color: sienna}

p {margin-left: 20px}

body {background-image: url("images/back40.gif")}

</style>

</head>

Il browser leggerà le definizioni di stile, e formatterà il documento in accordo ad esse

(50)

AOT AOT

LAB LAB

^Css^Css^Css^Css

Stile Stile Stile

Stile inlineinlineinlineinline

Uno stile inline fa perdere molti dei vantaggi dei fogli di atile, perché mischia il contenuto con la presentazione

Metodo da usare con parsimonia, quando uno stile deve essere applicato ad una solo occorrenza di un elemento in un documento

Per definire uno stile inline si usa l’attributo style dell’elemento da formattare

L’attributo style può contenere qualsiasi proprietà css

L’esempio mostra come cambiare il colore e il margine sinistrao di un singolo paragrafo

<p style="color: sienna; margin-left: 20px">

This is a paragraph

</p>

(51)

AOT AOT

LAB LAB

^Css^Css^Css^Css

Ordine di cascata Ordine di cascata Ordine di cascata Ordine di cascata

I fogli di stile permettono di specificare informazioni di stile in vario modo

Gli stili possono essere specificati in un singolo elemento html, nella sezione <head> di una pagina html, o in un file css esterno

È possibile fare riferimento pure a diversi fogli esterni in una stessa pagina html

Quale stile sarà usato quando è specificato più di uno stile per un elemento html?

Tutti gli stili vengono raccolti a cascata in un nuovo foglio di stile virtuale secondo le seguenti regole

Default del browser default (priorità più bassa)

Foglio di stile esterno

Foglio di stile interno (nella sezione <head>)

Stile inline (nell’elemento html – priorità più alta)

(52)

AOT AOT

LAB LAB

^Css^Css^Css^Css

Sintassi SintassiSintassi Sintassi

La sintassi css è composta di tre parti: un selettore, una proprietà ed un valore:

selector {property: value}

Il selettore è di colito l’elemento/tag html che si vuole definire

La proprietà è l’attributo che si vuole cambiare, ed ogni proprietà può avere un valore

La proprietà e il valore sono separati da due-punti e racchiusi tra parentesi graffe

body {color: black}

(53)

AOT AOT

LAB LAB

^Css^Css^Css^Css

Sintassi SintassiSintassi Sintassi

Se il valore è composto da più parole, bisogna racchiuderlo tra virgolette doppie

Se si vuole specificare più di una proprietà, bisogna separarle con un punto-e-virgola

L’esempio sotto mostra come definire un paragrafo con allineamento centrato e colore del testo rosso

p {

text-align: center;

color: red;

font-family: "sans serif";

}

(54)

AOT AOT

LAB LAB

^Css^Css^Css^Css

Raggruppare i selettori Raggruppare i selettoriRaggruppare i selettori Raggruppare i selettori

Si possono raggruppare i selettori: bisogna separare i selettori con una virgola

Nell’esempio sotto, gli elementi di titolo sono raggruppati; ogni elemento di titolo sarà verde

h1, h2, h3, h4, h5, h6 { color: green;

}

(55)

AOT AOT

LAB LAB

^Css^Css^Css^Css

Selettore di classe Selettore di classe Selettore di classe Selettore di classe

Con il selettore di classe si possono definire stili diversi per uno stesso tipo di elemento html

Es. due tipi di paragrafo: uno allineato a destra e uno allineato al centro

p.signature {text-align: right}

p.important {text-align: center}

Bisogna impostare l’attributo class nel doc html

<p class="signature">

This paragraph will be right-aligned.

</p>

<p class="important">

This paragraph will be center-aligned.

</p>

Si può specificare solo un attributo class per ciascun elemento html

(56)

AOT AOT

LAB LAB

^Css^Css^Css^Css

Selettore di classe Selettore di classe Selettore di classe Selettore di classe

Si può anche omettere il nome di tag nel selettore per definire uno stile da applicare a tutti gli

elementi html di una certa classe

Allineare al centro tutti gli elementi di classe important

.important {text-align: center}

Sia l’elemento h1 che quello p sono di classe important;

questo significa che entrambi gli elementi seguiranno le regole del selettore .important

<h1 class="important">

This heading will be center-aligned

</h1>

<p class="important">

This paragraph will also be center-aligned.

</p>

(57)

AOT AOT

LAB LAB

^Css^Css^Css^Css

Selettore di Selettore di Selettore di Selettore di idididid

Il selettore id è diverso dal selettore class

Mentre un selettore class può applicarsi a molti elementi su una pagina, il selettore id si applica ad un solo elemento

Un attributo id deve essere unico all’interno del documento

La regola di stile qui sotto sarà applicata ad un elemento p che ha il valore di id posto a para1

p#para1 {

color: red;

}

La regola di stile qui sotto sarà applicata al primo elemento avente id con valore wer345

#wer345 {color: green}

<h1 id="wer345">Some text</h1>

(58)

AOT AOT

LAB LAB

^Css^Css^Css^Css

Commenti CommentiCommenti Commenti

Per spiegare le regole, si possono inserire nel css dei commenti, che possono essere d’aiuto quando il codice sorgente deve essere in seguito

modificato

I commenti vengono ignorati dal browser

Un commento css comincia con /* e termina con */

/* This is a comment */

p {

/* This is another comment */

color: black;

font-family: arial;

(59)

AOT AOT

LAB LAB

^Css^Css^Css^Css

Sfondo Sfondo Sfondo Sfondo

background-color – Imposta il colore di sfondo di un elemento - color- rgb, color-hex, color-name, transparent

background-image – Imposta una immagine come sfondo – url, none

background-repeat – Imposta la ripetizione di una immagine di sfondo – repeat, repeat-x, repeat-y, no-repeat

background-attachment – Immagine di sfondo fissa o che scorre con il testo – scroll, fixed

background-position – Posizione di partenza di una immagine di

sfondo – top left, top center, top right, center left, center center, center right, bottom left, bottom center, bottom right, x-% y-%, x-pos y-pos

background – Imposta tutte assieme le proprietà dello sfondo

(60)

AOT AOT

LAB LAB

^Css^Css^Css^Css

Testo Testo Testo Testo

color – Colore del testo – color

direction – Direzione del testo – ltr, rtl

text-align – Allineamento – left, right, center, justify

text-decoration – Decorazione – none, underline, overline, line- through, blink

text-indent – Indentazione della prima riga – length, %

text-shadow – Ombra – none, color, length

text-transform – Controlla le lettere – none, capitalize, uppercase, lowercase

white-space – Trattamento degli spazi bianchi – normal, pre, nowrap

(61)

AOT AOT

LAB LAB

^Css^Css^Css^Css

Font FontFont Font

font-style – Stile, corsivo – normal, italic, oblique

font-variant – Maiuscoletto o normale – normal, small-caps

font-weight – Peso, grassetto – normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900

font-size – Dimensione – xx-small, x-small, small, medium, large, x- large, xx-large, smaller, larger, length, %

font-family – Lista con priorità di nomi di famiglie di font e/o nomi di famiglie generiche – family-name, generic-family

font – Imposta tutte le proprietà del font

(62)

AOT AOT

LAB LAB

^Css^Css^Css^Css

Box model Box model Box model Box model

(63)

AOT AOT

LAB LAB

^Css^Css^Css^Css

Bordi Bordi Bordi Bordi

border-width – Ampiezza dei quattro bordi, accetta da uno a quattro valori – thin, medium, thick, length

border-style – Quattro bordi, accetta da uno a quattro stili – none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset

border-color – Colore, da uno a quattro valori – color

border – Imposta tutte le proprietà dei bordi

I bordi top, right, bottom, left possono essere cambiati

indipendentemente usando proprietà separate: es. border-top-width

(64)

AOT AOT

LAB LAB

^Css^Css^Css^Css

Margini esterni e interni Margini esterni e interni Margini esterni e interni Margini esterni e interni

margin – Spazio attorno agli elementi

È possibile usare valori negativi per sovrapporre il contenuto

I margini top, right, bottom, left possono essere cambiati

indipendentemente usando propietà separate, es. margin-top

Possibile usare scorciatoia margin per impostare tutti i margini

padding – Spazio tra il bordo e il contenuto degli elementi

Non sono ammessi valori negativi

I padding top, right, bottom, left possono essere cambiati

indipendentemente usando proprietà separate, es. padding-top

Possibile usare scorciatoia padding per impostare tutti i padding

(65)

AOT AOT

LAB LAB

^Css^Css^Css^Css

Dimensioni Dimensioni Dimensioni Dimensioni

width – Ampiezza – auto, length, %

height – Altezza – auto, length, %

IE5 bug (?)

Se si vuole un box largo 100 pixel con 10 pixel di padding e 10 pixel di bordo, bisogna impostare una regola così:

width: 100px; padding: 10px; border: 10px

Per ottenere lo stesso effetto in Internet Explorer 5.x, si dovrebbe alterare la regola di stile a questo modo, per evitare di ottenere un box di 40 pixel più piccolo

width: 140px; padding: 10px; border: 10px

IE6 è finalmente conforme alle specifiche Css sulle dim del box

box-sizing – Proprietà Css3 per specificare se le

dimensioni del box comprendono bordi e margini o no – border-box, content-box

(66)

AOT AOT

LAB LAB

^Css^Css^Css^Css

Posizione Posizione Posizione Posizione

bottom – Distanza del limite inferiore di un

elemento rispetto all’elemento che lo contiene – auto, %, length

left – Sinistra … – auto, %, length

right – Destra … – auto, %, length

top – Superiore – auto, %, length

vertical-align – Allineamento verticale – baseline, sub, super, top, text-top, middle, bottom, text-

bottom, length, %

(67)

AOT AOT

LAB LAB

^Css^Css^Css^Css

Visibilit Visibilit Visibilit Visibilitàààà

z-index – Ordine nello stack (profondità) – auto, number

overflow – Impostazione per contenuto più ampio dell’area disponibile – visible, hidden, scroll, auto

visibility – Visibilità – visible, hidden