logo del sito

W3C

Al giorno d'oggi è importante che un sito Web, sia compatibile con gli standard del Consorzio Internazionale W3C.

HTML

Tutte le pagine dei siti web sono scritte in HTML, linguaggio che viene letto ed elaborato dal browser, il quale genera la pagina che viene visualizzata sullo schermo del nostro computer.

CSS

Con il termine CSS (dall'inglese Cascading Style Sheets) vengono semplicemente definiti appunto i "fogli di stile a cascata", usati per separare all'interno delle pagine di un sito, i contenuti dalla formattazione, permettendo una programmazione più facile per gli autori delle pagine HTML.

Cos'è l'attributo media

L'attributo media, è un tag molto importante, che andrà sempre più diffondendosi con l'ampliarsi dei mezzi di diffusione delle pagine (X)Html. Grazie ad esso possiamo impostare un foglio di stile per ogni supporto su cui la nostra pagina verrà implementata, come per es. la visualizzazione sui browser, oppure la possibilità di stampare il documento, o la capacità del documento stesso di essere proiettato a tutto schermo. Per non parlare poi dei software usati da disabili come i browser vocali. Questa è una soluzione interessante, perchè chissà in futuro magari i browsers, saranno sostituiti da palmari, cellulari e altri dispositivi, e la soluzione ideale sarebbe quindi nella creazione di fogli di stile ad hoc, mirati.

L'attributo media può essere inserito all'interno sia dell'elemento <link>, che dell'elemento <style>, come potete notare nella sintassi sottostante:

<link rel="stylesheet" type="text/css" media="print" href="print.css" />
<style type="text/css" media="screen">...</style>

Il valore di default è all, usato automaticamente in mancanza di una dichiarazione esplicita (ricordiamo infatti che media è un attributo opzionale). È possibile usare più di un valore, ma i nomi della lista vanno separati da una virgola:

<link rel="stylesheet" type="text/css" media="print, tv, aural"            href="stampa.css" />

Se noi vogliamo per es. che il nostro documento oltre che essere visualizzato correttamente sui normali browser, possa venire anche stampato, dobbiamo collegare al documento in questione, vari fogli di stile adatti ai supporti menzionati adesso. Lo user agent che visualizzerà la pagina sarà in grado, se conforme agli standard, di caricare quello giusto: nell'es. sottostante, nel codice Xhtml sono inseriti due link, che sono collegati a due CSS, rispettivamente uno per i normali browser (screen.css) e uno per la stampa (print.css).

<link  rel="stylesheet" type="text/css" media="screen"                 href="screen.css" />
<link rel="stylesheet" type="text/css" media="print, tv, aural"           href="print.css" />

Un'applicazione decisamente versatile, a patto di non usare browser di quarta generazione, è quella che prevede l'uso di un foglio di stile per la stampa. Le motivazioni per una simile soluzione possono essere diversi come l'uso di caratteri o colori particolari, e questo può portare alla necessità di adottare un CSS speciale. Un primo esempio lo potete valutare seguendo questo link. Provate a stamparlo. Il testo avrà caratteristiche diverse rispetto a quello che vedete sullo schermo: font, colore, dimensioni in punti e non in pixel. Una controprova: stampate questo documento, privo di fogli di stile speciali. Nessun cambiamento rispetto a quanto vedete sullo schermo.

^ Inizio pagina

Ricerca personalizzata


Lezione successiva successiva

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

Indice