Appunti di Web Design Technologies

TESTO PREFORMATTATO

Utile quando gli spazi e i ritorni a capo contano

il tag <pre> rappresenta l’eccezione che conferma la regola

dentro il pre vengono presi tutti gli spazi così come sono.

Utilizzato spesso per riportare codice (HTML, CSS, programmi, ecc.)

il codice include generalmente delle “indentazioni”, e i ritorni a capo sono importanti per la

comprensione della sua struttura

LINE BREAK e BARRE ORIZZONTALI

Anche se l’HTML ignora i ritorni a capo nel testo, è possibile forzarli attraverso il tag <br> 11

Per separare zone diverse di uno stesso documento è possibile utilizzare barre orizzontali

con il tag <hr> (si possono specificare gli attributi size e width)

Esempio: <hr size="4" width=“50%">

STILI LOGICI e STILI FISICI

Concetto che vale sia per tag che per attributi

Stili logici: danno un’informazione sul tipo di contenuto (la loro rappresentazione è lasciata

completamente al browser)

Esempi: <em>, <strong>, <code>, ...

Stili fisici: specificano l’aspetto del contenuto (che il browser dovrà rispettare)

Esempi: <b>, <i>, align, bgcolor, …

Gli stili fisici andrebbero sempre evitati.

SEQUENZE DI ESCAPE

Servono per inserire nella pagina caratteri speciali

che non possono essere utilizzati direttamente perché non appartengono alle 26 lettere

dell’alfabeto inglese o hanno un significato particolare per l’HTML

Esempi:

&lt; = <

&gt; = >

&amp; = &

&egrave; = è

&eacute; = é

&Egrave; = È

LINK

Permettono di creare collegamenti ad altri documenti

Struttura:

<a href="indirizzo">...</a>

Esempio:

<a href="http://www.unipv.it">Universit&agrave; di Pavia</a>

collegamento ad un sito che è collegato ad un altro server

I “pathname” possono essere anche relativi (***molto importante per l’esame***)

Esempio:

<a href="xxx/miofile.html">Universit&agrave; di Pavia</a>

Dice dove si trova un file rispetto alla posizione = posizione sul disco del server web. Sto dicendo

che deve essere caricato un file il cui nome è miofile.html che si trova nella cartella xxx che si trova

nella stessa cartella che contiene il file che contiene questo link.

Quando il link inizia con una stringa e non con http:// è un link relativo.

Percorsi (pathnames) relativi

indicano dove si trova una risorsa (file) rispetto alla posizione (directory/cartella) del file che

contiene il collegamento alla risorsa stessa

Esempio: link nel file f.html

• <a href="f1.html">Link 1</a>

f1.html si trova nella stessa cartella che contiene f.html

• <a href="c1/f1.html">Link 1</a>

f1.html si trova nella cartella c1, che si trova nella stessa cartella che contiene f.html

<a href="c1/c2/f1.html">Link 1</a>

• 12

f1.html si trova nella cartella c2, che si trova nella cartella c1, che si trova nella stessa cartella

che contiene f.html

• <a href="../f1.html">Link 1</a>

f1.html si trova nella cartella che contiene la cartella in cui si trova f.html

Percorsi (pathnames) assoluti

indicano dove si trova una risorsa (file) rispetto alla directory di root (la cartella del web server nella

quale sono memorizzati i file del sito) – L’indirizzo inizia sempre con ‘/’ o con ‘http://’

Esempio: link nel file f.html (e la directory di root è c:\internet\www\)

• <a href="/f1.html">Link 1</a>

f1.html si trova nella directory di root del server che ospita f.html (cioè in c:\internet\www\)

• <a href="/c1/f1.html">Link 1</a>

f1.html si trova nella sottocartella c1 della directory di root del server che ospita f.html (cioè in c:

\internet\www\c1\)

• <a href="http://www.esempio.com">Link 1</a>

il collegamento è a un file “di default” (il cui nome, configurabile nelle impostazioni del web

server, è tipicamente index.html, home.html o welcome.html) contenuto nella directory di root del

server identificato dall’indirizzo www.esempio.com

• <a href="http://www.esempio.com/f1.html">Link 1</a>

il collegamento è al file f1.html contenuto nella directory di root del server identificato

dall’indirizzo www.esempio.com

Lezione 8

SELETTORI

È possibile specificare lo stile da applicare ad un selettore in corrispondenza di certe classi definite

nel documento HTML

Esempio: h1.titolo_blu { color: blue; }

significa che quando l’attributo class di un elemento H1 è posto uguale a titolo_blu, il

colore del testo deve essere blue

<h1 class="titolo_blu">Un titolo ...</h1>

Esempio: *.verde { color: green }

significa che quando l’attributo class di un qualsiasi elemento vale verde, il colore del testo

per quell’elemento deve essere green

Esempio: .verde { color: green }

stesso significato: la classe verde viene definita per qualunque elemento

È anche possibile usare CLASSI MULTIPLE

Esempio: <p class="verde centrato”>

Pseudo-classe :first-child

Esempio: div>p:first-child{text-indent:0}

quando un elemento p è il primo figlio di un elemento div, viene eliminata l’indentazione 13

Pseudo-classi :link e :visited

Esempio: a:link { color: red }

a:visited { color: blue }

specifica che un link non ancora visitato deve essere rosso, mentre un link già visitato deve essere

blu

Pseudo-classi dinamiche :hover e :active

Esempio: a:hover { color: yellow }

a:active { color: blue }

specifica che: 1) quando il cursore del mouse (o di un altro dispositivo di puntamento) è sopra un

link, il link deve essere giallo; 2) quando un link sta per essere attivato (ad esempio, l’utente ha

premuto il pulsante del mouse ma non l’ha ancora rilasciato), il suo colore deve essere blu.

Pseudo-classe :lang

Esempio: html:lang(fr) { quotes: '«' '»' }

html:lang(de) { quotes: '»' '«' }

specifica quali devono essere le virgolette aperte e chiuse a seconda che la lingua dichiarata per il

documento sia il francese o il tedesco

Pseudo-elemento :first-line

Esempio p:first-line { text-transform: uppercase }

specifica che la prima riga di ogni paragrafo deve essere tutta in maiuscolo

Pseudo-elementi :before e:after

Esempio: p:before { content: "-->" }

inserisce prima di ogni paragrafo la stringa “-->”

Pseudo elemento :first-letter

permette di mostrare il primo carattere in modo diverso

Lezione 9

Gestione degli elementi della pagina

Il BOX MODEL

Ad ogni elemento HTML corrisponde un’area rettangolare, detta box

Ogni box è suddiviso in un’area di contenuto ed in eventuali aree di padding, di bordo e di margine

Esempio:

... ...

<style type="text/css">

p{

background: yellow;

padding: 3em;

border: solid red 10px;

margin: 50px;

}

</style>

</head>

<body>

<p>Questo &egrave; il

contenuto del

paragrafo

</p> 14

</body>

</html>

Proprietà delle aree di padding

padding-top, padding-bottom, padding-left e padding-right

specificano la larghezza delle corrispondenti aree di padding padding da solo permette di

impostare il valore per tutte e

quattro le aree “in un sol colpo” (es. padding: 3em)

se è specificato un solo valore, questo viene applicato a tutte le aree

• se sono specificati due valori, si riferiscono, rispettivamente, alle aree superiore e inferiore e alle

• aree di sinistra e di destra

se sono specificati tre valori, si riferiscono, rispettivamente, all’area superiore, alle aree di sinistra

• e di destra e all’area inferiore

se sono specificati quattro valori, si riferiscono, rispettivamente, all’area superiore, all’area di

• destra, all’area inferiore e all’area di sinistra

Proprietà dei bordi

border-top-width, border-right-width, border- bottom-width e border-left-width

specificano lo spessore delle corrispondenti aree di bordo

valori "qualitativi" thin, medium e thick o un valore esplicito; con border-width si imposta il valore

sui quattro lati

border-top-color, border-right-color, border- bottom-color e border-left-color

specificano il colore delle corrispondenti aree di bordo

con border-color si imposta il valore sui quattro lati

border-top-style, border-right-style, border-bottom-style e border-left-style

specificano lo "stile" delle corrispondenti aree di bordo

valori none (default), hidden, dotted, dashed, solid, double, groove, ridge, inset, outset ; con

border-style si imposta il valore sui quattro lati

border-top, border-right, border-bottom e border-left

riassumono globalmente le proprietà delle corrispondenti aree di bordo (es. border-bottom: thick

solid red)

border

imposta le stesse proprietà per le quattro aree di bordo (es. border: solid red 3px)

Proprietà dei margini

margin-top, margin-bottom, margin-left e margin- right

specificano il valore per le corrispondenti aree di margine margin da solo permette di impostare il

valore per tutte e quattro le aree "in un sol colpo" (es. margin: 3em)

valgono le considerazioni fatte per le aree di padding (es. se sono specificati due valori, si

riferiscono, rispettivamente, alle aree superiore e inferiore e alle aree di sinistra e di destra, ecc.)

Tipi di box

Block-level box

nei “media visivi” (browser, stampanti, ... ) vengono rappresentati

come “blocchi” separati (es. l’elemento <p>); 15

Inline-level box

non sono rappresentati come blocchi separati (es. l’elemento <em>)

Proprietà display

permette di specificare come un elemento HTML deve essere disposto nel visual user agent

Es. p { display: block }

em { display: inline }

img { display: none }

Controllo delle dimensioni del box

Proprietà width e height

specificano, rispettivamente, la larghezza e l’altezza della "contentarea" dei box generati da

elementi di tipo block, possono assumere un valore in pixel o un valore percentuale

Esempio: p {

width: 100px;

height 200px

}

Proprietà min-width, max-width, min-height, max- height

specificano le dimensioni (larghezza e altezza) minime e massime che un box può avere

POSIZIONAMENTO del box A FLUSSO NORMALE

Box di tipo block:

sono disposti uno di seguito all’altro, verticalmente, partendo dall’alto del blocco contenitore

la distanza