HTML, HyperText Markup Language
Antonio Pescapè (pescape at unina.it)
Scopo della lezione
• Mostrare, nella pratica, il concetto di ipertesto.
• Fornire, in pratica, il concetto di interprete.
• Senza avere alcuna conoscenza di
programmazione scrivere (forse per la prima
volta) un semplice programma (… la “L” di HTML
sta per Language…).
• Fornire conoscenze di base per costruire pagine
web statiche senza l’ausilio di editor specializzati
(Frontpage, HTML Edit, …).
• Fornire conoscenze per la costruzione di pagine
web elementari nelle quali poter ospitare i vostri
“contributi multimediali”.
a.a. 2006/2007
HTML: un po’ di storia
• Il WWW (World Wide Web) fu inventato nel 1991 da
Tim Berners Lee al CERN di Ginevra.
• Esso consisteva in un sistema per rendere disponibili
su Internet dei contenuti di testi ed immagini (pagine
Web) con facilità, mediante protocolli di
comunicazione (HTTP), linguaggi di codifica dei
contenuti (HTML), e sintassi per indicare la
collocazione dei contenuti (URL).
• Lo standard HTML fu inizialmente sviluppato
dall’IETF.
• Oggi le specifiche dello standard e le sue evoluzioni
sono manutenute dal World Wide Web
Consortium (www.w3c.org).
a.a. 2006/2007
HTML: le specifiche standard
• Lo standard HTML si è evoluto in diverse
versioni successive: 1.0, 2.0, 3.0, 3.2, 4.0,
4.01.
• Un cambio nel nome: la versione attualmente
più recente si chiama XHTML 1.0.
• Molto simile alla precedente HTML 4.01.
• Il cambiamento da HTML a XHTML riguarda
principalmente l’adozione delle regole più
rigide utilizzate già da XML (un altro tipo di
markup language usato per altri scopi e
leggermente più complesso) per HTML, in
modo da renderlo più facile da processare e
manutenere.
a.a. 2006/2007
HTML: i tag
• Un documento HTML è composto sia
dal contenuto che da comandi
comandi.
• Il contenuto è ciò che viene visualizzato
dall’utente con un browser.
• I comandi (o tag
tag) sono le istruzioni che
fanno sì che il documento venga
visualizzato correttamente in tutte le sue
parti così come appare nel browser.
a.a. 2006/2007
HTML: il formato dei tag
• Le pagine Web, dunque, contengono due tipi di
oggetti:
1. Il testo del documento;
2. I tag HTML che indicano gli elementi, la struttura, la
formattazione e i link ipertestuali con altre pagine, ….
• In generale i tag hanno il seguente aspetto:
• <NomeTag> testo su cui il tag ha effetto </NomeTag>
• <NomeTag attributo=“valore”> contenuto </NomeTag>
a.a. 2006/2007
HTML: il compito dei tag
•
HTML è un “markup language”
•
partendo dal testo si possono poi applicare alcuni
particolari tag a parole e paragrafi per ottenere la
formattazione richiesta.
I tag definiscono:
•
•
intestazioni, paragrafi, elenchi e tabelle
•
lo stile dei caratteri, ad esempio il grassetto
•
…
a.a. 2006/2007
HTML: come scrivere una semplice pagina
•
Una pagina Web è un file con estensione .htm o .html
•
Il modo migliore per iniziare a creare pagine Web è quello di usare
un semplice editor di testi, ad esempio Notepad o Wordpad.
Esistono anche:
•
editor grafici di HTML (es. Front Page di Microsoft, Dreamweaver, HTML
Edit…)
•
•
editor a Tag
•
programmi convertitori (Word, WordPerfect ecc.)
L’altro strumento di cui avremo bisogno per visualizzare le pagine
che scriveremo è il browser.
a.a. 2006/2007
HTML: struttura di una pagina
• Ciò che dobbiamo inizialmente scrivere è:
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>
a.a. 2006/2007
HTML: primo esempio
<HTML>
<HEAD>
<TITLE> Home Page di Nome </TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>
a.a. 2006/2007
HTML: il tag <body>
• Dopo l'intestazione deve essere inserito il corpo del
documento, identificato dal marcatore <body>:
<body>...</body>
• Il testo del documento va inserito tra questi due
marcatori, includendo tutti gli altri marcatori con i quali
si vorrà descriverne la struttura e la forma.
• L'elemento '<body>' prevede alcuni attributi che
analizzeremo in seguito.
a.a. 2006/2007
HTML: prima pagina (1/2)
•
Cominciamo, dunque, a comporre la nostra pagina digitando quanto
segue:
<html>
<head>
<title>La mia prima pagina Web </title>
</head>
<body>
<h1>Questa e’ la Home page di Nome
Cognome</h1>
<p>Questa e’ la mia prima pagina in HTML.</p>
</body>
</html>
a.a. 2006/2007
HTML: prima pagina (2/2)
a.a. 2006/2007
HTML: i tag <hn
<hn>
• I titoli di un documento possono essere articolati su vari
livelli gerarchici (titolo di sezione, titolo di capitolo, titolo di
paragrafo etc.)
• Gli elementi per codificare questi titoli interni hanno un
marcatore della forma <hn>
• In HTML sono disponibili sei diversi livelli di titoli: <h1> è il
livello più alto e <h6> il più basso
• Il primo viene solitamente utilizzato per marcare il titolo di un
capitolo, o di una sezione importante, e i successivi per indicare
sottosezioni progressivamente più piccole.
a.a. 2006/2007
HTML: esempio tag <hn
<hn> (1/2)
Un esempio:
<html>
<head>
<title>La mia prima pagina Web </title>
</head>
<body>
<h1>Questa e’ la Home page di Nome Cognome</h1>
<p>Questa e’ la mia prima pagina in HTML.</p>
<h1>Primo livello</h1>
<h2>Secondo livello</h2>
<h3>Terzo livello</h3>
<h4>Quarto livello</h4>
<h5>Quinto livello</h5>
<h6>Sesto livello</h6>
</body>
</html>
a.a. 2006/2007
HTML: esempio tag <hn
<hn> (2/2)
a.a. 2006/2007
HTML: attributi dei tag <hn
<hn>
•
E’ possibile inserire più titoli all'interno della pagina, anche dello stesso
livello.
•
Tutti i marcatori di questi titoli interni supportano un attributo che permette
di specificare l'allineamento del testo.
•
Il nome dell'attributo è 'align', e i valori possibili, che specificano il tipo di
allineamento, sono:
•
1.
center
2.
left
3.
right
Ad esempio:
<h1 align="center">Home page di Nome Cognome</h1>
a.a. 2006/2007
HTML: il tag <p>
• Un documento HTML può essere diviso in
capoversi (paragrafi): a tale fine va utilizzato
l'elemento <p>.
• L'effetto visivo di questa istruzione è quello di
inserire un ritorno a capo e una riga vuota nel testo
a video.
• Si noti che dopo ogni titolo <hn> il browser va a
capo automaticamente.
a.a. 2006/2007
HTML: esempio tag <p>
• Riportiamo nel nostro file le due parti che
seguono:
<p>Questa riga</p><p>va a capo.</p>
<p>Quest'altra,invece,
appare scritta su
un’unica riga
nonostante ci siano degli a
capo.</p>
a.a. 2006/2007
HTML: attributi del tag <p>
•
L’esempio che abbiamo appena visto ci dice che l’HTML visualizza i
capoversi separandoli in funzione dell'istruzione <p> e non degli 'a capo'
eventualmente presenti nel nostro file.
•
Anche il marcatore <p> può avere degli attributi di tipo 'align'.
<p align="right">, ad esempio, sposterà a destra il capoverso.
•
•
Un altro marcatore che riguarda la gestione dei salti di linea è <br>
(break).
•
La sua funzione è quella di provocare un 'ritorno a capo' senza
introdurre una riga vuota.
•
<br> non ha un marcatore di chiusura in quanto indica
semplicemente il punto in cui intervenire.
•
Ricorrendo a più marcatori <br> in sequenza si possono creare
delle spaziature verticali.
a.a. 2006/2007
HTML: le liste non numerate
•
In un documento possono comparire anche elenchi ordinati di voci, o
liste che possono essere numerate (ad ogni voce della lista è assegnato
automaticamente un numero progressivo) o non numerate (ogni voce
della lista è preceduta da un pallino).
•
HTML fornisce una serie di elementi per inserire liste all'interno di
pagine Web.
•
La sintassi per le liste non numerate è la seguente:
<ul>
<li>prima voce</li>
<li>seconda voce</li>
<li>terza voce</li>
</ul>
a.a. 2006/2007
HTML: le liste numerate
• Le liste numerate si costruiscono nello stesso
modo, ma il tag di apertura è <ol> (ordered list) e
quello di chiusura, ovviamente, </ol>. All'interno,
ancora una serie di elementi <li>
<ol>
<li>prima voce</li>
<li>seconda voce</li>
<li>terza voce</li>
</ol>
a.a. 2006/2007
HTML: esempio liste
a.a. 2006/2007
HTML: attributi delle liste
• Il formato delle liste può essere controllato
mediante alcuni attributi tra cui:
•
type="x“ dove x può assumere uno dei
seguenti valori:
circle = cerchio
square = quadratino
I = numeri romani maiuscole
i = numeri romani minuscoli
A = lettere minuscole
a = lettere maiuscole
a.a. 2006/2007
HTML: Gli stili di carattere (1/2)
• In genere gli stili di carattere sono corsivo,
grassetto, sottolineato.
• HTML dispone dei seguenti stili
<strong>...</strong>
Testo molto rilevante (viene reso di norma in grassetto)
<em>...</em>
Testo enfatizzato (viene reso di norma in corsivo)
<cite>...</cite>
Testo citato (viene reso di norma in corsivo)
<address>...</address>
Indirizzo (viene reso in corsivo o in grassetto con un carattere piccolo)
a.a. 2006/2007
HTML: Gli stili di carattere (2/2)
<b>...</b> Grassetto
<u>...</u> Sottolineato
<i>...</i> Italico o corsivo
<big>...</big> carattere più grande
<small>...</small> carattere più piccolo
•
Gli stili possono essere sommati; ad esempio, per ottenere un testo corsivo neretto si
può scrivere:
<b><i>Questa riga è in neretto e corsivo</i></b>
La cosa importante è creare codice nidificato
a.a. 2006/2007
HTML: esempio stile carattere
a.a. 2006/2007
HTML: le righe orizzontali
•
L'elemento <hr> ha lo scopo di inserire una linea
orizzontale fra blocchi di testo o immagini all'interno di una
pagina Web. Si tratta di un marcatore che non richiede tag
di chiusura. Alcuni attributi applicabili sono:
•
size="n“ dove n indica lo spessore della riga (es.: <hr size="5">);
•
Noshade serve a eliminare l'effetto 'ombra' della linea (es.: <hr
noshade>);
•
width="n% | n" regola la larghezza della riga, sia in percentuale,
relativamente alla larghezza dello schermo, sia in assoluto, in pixel
(es.: <hr width="50%"> oppure <hr width="250">);
•
align="left | center | right“ allinea la riga rispettivamente a sinistra, al
centro e a destra, ad es.: <hr align="right" width="80%">
a.a. 2006/2007
HTML: esempio righe orizzontali
a.a. 2006/2007
HTML: Attributi del BODY
•
Ci sono degli attributi che possono essere aggiunti all'elemento <body> per
specificare l'aspetto del testo e dello sfondo in una pagina Web:
background="file-grafico"
•
permette di indicare un file grafico (in formato GIF o JPEG) che viene inserito sullo sfondo della pagina; se
l'immagine è più piccola rispetto alla pagina, essa viene automaticamente duplicata e affiancata alle sue copie
bgcolor="#colore RGB"
•
permette di assegnare un colore allo sfondo
text="#colore RGB"
•
indica il colore del testo all'interno della pagina
link="#colore RGB"
•
indica il colore dei link
vlink="#colore RGB"
•
indica il colore dei link già attivati
alink="#colore RGB"
•
a.a. 2006/2007
indica il colore dei link mentre si attivano con il mouse
HTML: i colori
Colore
Esadecimale
Arancione
#FF8000
Bianco
#FFFFFF
Blu
#0000FF
Celeste
#80FFFF
Giallo
#FFFF00
Grigio
#C0C0C0
Marrone
#804040
Nero
#000000
Rosa
#FF8080
Rosso
#FF0000
Verde
#00FF00
Viola
#8080FF
a.a. 2006/2007
• Il valore che segue l’attributo
BGCOLOR è un valore esadecimale
che indica il colore.
• Il colore è dato dalla fusione dei tre
colori principali, il Rosso, il Verde e il
Blu.
• Le prime due cifre indicano la
quantità di Rosso, le seconde la
quantità di Verde mentre le terze la
quantità di Blu (#rrvvbb).
Tabella dei colori ai siti
http://www.molly.com/molly/webdesign/136_colors.html
http://www.molly.com/molly/webdesign/colorchart.html
HTML: esempio tabella di colori
a.a. 2006/2007
HTML: esempio colore di sfondo (1/2)
<HTML>
<HEAD>
<TITLE>IMMAGINE</TITLE>
</HEAD>
<BODY BGCOLOR=“#00FF00”>
<B> Prova colore sfondo</B>
<P>
</BODY>
</HTML>
a.a. 2006/2007
HTML: esempio colore di sfondo (2/2)
a.a. 2006/2007
HTML: dimensionamento dei caratteri (1/2)
Nel caso di dimensionamento in termini assoluti si
usa il seguente marcatore:
<font size="n">testo</font>
Dove 'n' è un numero che va da 1 a 7, ad es.:
<font size="4">Prova</font>.
• La dimensione normale del font è 3. Dunque se
si usano gli indici 1 o 2 si ottiene un font ridotto
rispetto al testo normale, mentre con 4, 5, 6 e 7
si ottiene un font ingrandito.
a.a. 2006/2007
HTML: dimensionamento dei caratteri (2/2)
• Nel caso di dimensionamento in termini relativi si
usa la seguente marcatura:
<font size="+/- n">testo</font>
• In questo caso n può variare da -2 a +4. Usando in
modo combinato i vari tag è possibile ottenere
effetti come questo:
<font size="+4">H</font><font size="+3">
E</font><font size="-1">L</font><font
size="+2">LO</font>
a.a. 2006/2007
HTML: le immagini
<HTML>
<HEAD>
<TITLE>Esempio pagina contenente una IMMAGINE</TITLE>
</HEAD>
<BODY BGCOLOR=“#000000”>
<IMG SRC="tango1.jpg" alt="Hugo Pratt/Corto Maltese e il tango">
<P>
</BODY>
</HTML>
•
•
Se il file che contiene l’immagine non si trova nella stessa
directory del file html che lo include, si dovranno specificare
anche i nomi delle directory (cartelle) fino a quella in cui si trova
il file HTML (specificare il path), separati dalla barra (/) , in
questo modo: < img src='‘immagini/tango1.jpg''>
L’attributo alt
a.a. 2006/2007
HTML: esempio immagine
a.a. 2006/2007
HTML: immagine in movimento
<HTML>
<HEAD>
<TITLE>Esempio pagina contenente una IMMAGINE</TITLE>
</HEAD>
<BODY>
<FONT SIZE="3" COLOR="BLUE">
ESEMPIO DI IMMAGINE in movimento (orizzontale)</FONT>
<P>
<MARQUEE>
<IMG SRC="lungomaltese.jpg">
</MARQUEE>
</P>
</BODY>
</HTML>
a.a. 2006/2007
HTML: attributi del tag <img>
L'elemento <img> è corredato da diversi attributi:
•
per modificare le dimensioni (consigliati programmi di grafica) si può disporre degli attributi
width e height . Ad esempio: <img scr
scr=”esempio.gif” height
height=“150” width
width=“45”>
>
•
Attributo alt consente di inserire un testo accanto all’immagine:
•
Attributo align per definire posizione dell'immagine rispetto al testo
align =“top”
alt=”testo alternativo”
alt=
testo allineato in alto
align =“middle” testo allineato in centro
align =“bottom” testo allineato in basso
Altri attibuti
hspace =
spaziatura orizzontale (in pixel)
vspace =
spaziatura verticale (in pixel)
border =
•
in pixel
Come già detto, un’immagine può essere usata anche come sfondo: <body
background=“path completo”>
background
>
a.a. 2006/2007
HTML: link e riferimenti
I documenti HTML sono degli ipertesti il cui funzionamento è dovuto agli HyperLink o
ancoraggi, il cui tag specifico è <A>: <A HREF>
•
L'elemento <A> (Anchor) ha bisogno di un tag di apertura e chiusura e al suo interno
è possibile inserire testo, immagini o altri elementi multimediali.
•
HREF (abbreviazione di Hypertext Reference) contiene l'URL o la pagina da linkare:
<A HREF="http://www.repubblica.it/"> Visita il sito del quotidiano “La
Repubblica”</A>
•
•
E' possibile sostituire al testo un'immagine
Grazie a TARGET è possibile caricare un pagina associata a HREF in un'altra finestra
del browser, attraverso la seguente sintassi:
<A HREF=“http://www.ciao.it” TARGET="_new">Visita www.ciao.it </A>
• L'attributo TARGET="_new" indica al browser di caricare il link a http://www.ciao.it in
una nuova (_new) finestra.
•
a.a. 2006/2007
HTML: link a mail
• E' possibile inserire collegamenti anche verso
indirizzi e-mail, attraverso una sintassi
leggermente diversa da quella indicata per le
URL:
<A HREF="mailto:[email protected]">Scrivimi!</A>
• Cliccando su questo link viene automaticamente
aperto il programma di posta predefinito con il
campo TO/A già impostato su
[email protected].
a.a. 2006/2007
HTML: le tabelle
Per creare una tabella in HTML si usano i tag:
<table>…….</table>
all’interno dei quali si deve definire il contenuto della tabella.
Per definire una tabella si procede nel modo seguente:
•
si realizza la prima riga facendo uso del tag <tr> = table row
•
si indicano le varie celle facendo uso:
• del tag <th> per le intestazioni di cella </th> = table header
• del tag <td> per i dati della cella </td> = table data
•
a.a. 2006/2007
si passa alla seconda riga con le relative celle avendo cura di usare il tag </tr>
HTML: esempio tabelle (1/2)
<HTML>
<HEAD><TITLE>Esempio di TABELLA</TITLE>
</HEAD>
<BODY>
<CENTER>
Tabella<P>
<TABLE border=1>
<TR><TD>uno<TD>due
<TR><TD>tre <TD>quattro
<TR><TD>cinque<TD>sei
</TABLE>
</CENTER>
</BODY>
</HTML>
a.a. 2006/2007
HTML: esempio tabelle (2/2)
a.a. 2006/2007
HTML: attributi tabelle
border="n" (es.: <table border="1">)
•
rende visibile il bordo della tabella. Il valore n è in pixel.
cellpadding="n" (es.: <table cellpadding="10">)
•
è lo spazio tra il bordo della tabella e il testo contenuto all'interno delle celle.
cellspacing="n" (es.: <table cellspacing="5">)
•
è la distanza tra una cella e un'altra.
width="n | n%" (es.: <table width="100%"> oppure <table width="250">)
•
la larghezza della tabella relativamente allo schermo, espressa con i valori
percentuali, oppure in assoluto, in pixel.
bgcolor="#rrggbb" (es.: <table bgcolor="#FF0000"> oppure < table bgcolor="red">)
•
determina il colore di sfondo della tabella. La sintassi di rrggbb è la medesima vista
per attribuire colori allo sfondo del documento o ai caratteri. In alternativa ai valori
esadecimali si possono anche qui usare i nomi dei colori, in inglese (red, green,
ecc.).
a.a. 2006/2007
HTML: caratteri speciali
CARATTERI SPECIALI:
&lt;
&gt;
&le;
&ge;
&deg;
&agrave;
&eacute;
&egrave;
&igrave;
&ograve;
&ugrave;
&amp;
&nbsp;
&euro;
APICE E PEDICE:
<sup>
</sup>
<sub>
</sub>
a.a. 2006/2007
>
<
≤
≥
°
à
é
è
ì
ò
ù
&
spazio
€
HTML: i frame
•
Una pagina WEB può essere suddivisa in più aree
indipendenti denominate frame.
•
Permettono di visualizzare più elementi di interesse
primario
•
Migliorano l’aspetto finale della pagina WEB
•
E’ consigliabile non eccedere nel loro uso per non
appesantire la realizzazione del sito.
•
Un punto a loro sfavore è l’incompatibilità con alcuni
browser che non supportano il loro utilizzo per cui, di
norma, si crea una versione del sito con frame ed una
versione senza frame.
a.a. 2006/2007
HTML: un esempio di utilizzo dei frame
FRAME PER IL
DOCUMENTO
FRAME
DI
NAVIGAZIONE
HOME
CONTENUTO
Link1
DELL’HOME PAGE
Link2
Link3
a.a. 2006/2007
HTML: suddivisione orizzontale con frame
Oppure…
RIGA
RIGA
a.a. 2006/2007
HTML: tag per creare i frame
Occorre utilizzare i TAG
<FRAMESET> </FRAMESET>
che servono per delimitare la definizione di
tutta la struttura
… e i TAG
<FRAME SRC=“nome1.htm” NAME=alias1>
<FRAME SRC=“nome2.htm” NAME=alias2>
che servono per definire il nome
convenzionale delle righe o delle colonne
a.a. 2006/2007
HTML: tag per creare i frame
• <frameset> è il tag iniziale (sostituisce a tutti gli effetti il tag
<body>) e raccoglie la descrizione dei frame presenti nella
<body>
pagina. Quando la lista dei frame termina, si inserisce il tag
finale </frameset>
• Il tag <frame> serve alla definizione di ogni singolo frame e
non necessita di chiusura dato che esso termina quando se ne
definisce uno nuovo oppure quando si usa il tag </frameset>
• Per organizzare una pagina con frame occorre dapprima
costruire e predisporre le pagine html che riempiranno i diversi
frame e successivamente definire i frame all’interno della
pagina principale.
a.a. 2006/2007
HTML: frame, struttura colonne
<HTML>
<HEAD>
<TITLE>Pagina con Frame</TITLE>
</HEAD>
<FRAMESET COLS=“15%, 85%">
<frame src=“primo.html" name="menu">
<frame src=“secondo.html" name="mypage">
</FRAMESET>
</HTML>
a.a. 2006/2007
HTML: frame, struttura colonne
a.a. 2006/2007
HTML: frame, struttura righe
<HTML>
<HEAD>
<TITLE>Pagina con Frame</TITLE>
</HEAD>
<FRAMESET ROWS="25%, 75%">
<frame src=“primo.html" name="menu">
<frame src=“secondo.html" name="mypage">
</FRAMESET>
</HTML>
a.a. 2006/2007
HTML: frame, struttura righe
a.a. 2006/2007
HTML: commenti
•
Sintassi per un commento (ovunque nel file):
<!--commento-->
•
Utilizzati per segnalare delle sezioni di codice o
altre informazioni utili a chiunque utilizzi la
pagina HTML
•
NON interpretate da BROWSER
•
Utilizzare la scrittura indentata (soprattutto per
programmi particolarmente lunghi)
a.a. 2006/2007
Recenti evoluzioni di HTML: fogli di stile
• HTML tradizionale: i tag sono usati sia per
specificare la struttura che l’aspetto del
documento.
• Problemi di manutenibilità, compatibilità, verifiche di
correttezza, etc..
• Separazione:
• HTML sempre più orientato alla struttura (tag come
<font …> destinati a cadere in disuso)
• Gli stylesheets specificano come una pagina deve
apparire
a.a. 2006/2007
HTML: CSS
• CSS (Cascading Style Sheet): File (o area del
sorgente HTML) in cui viene definito l’aspetto
desiderato per gli elementi di una pagina Web.
body { color: purple }
body { background-color: #d8da3d; font-weight: normal }
h1 { font-family: Helvetica, Geneva, Arial, sans-serif }
a:link { color: blue }
a:visited { color: purple }
.titolo { color: white; background: red; }
.sottotitolo { color: red; background: white; }
a.a. 2006/2007
HTML: fogli di stile collegati
<HTML>
<HEAD>
<TITLE>Usare i fogli di stile</TITLE>
<LINK REL="stylesheet" TYPE="text/css" HREF="stile.css">
</HEAD>
<BODY>
...
</BODY>
</HTML>
•
Lo stesso file può essere richiamato da più pagine Web !
•
Gli attributi del tag <LINK …>
•
•
•
•
REL: descrive il tipo di relazione tra il documento e il file collegato. Per i CSS due sono i
valori possibili: stylesheet e alternate stylesheet.
HREF: serve a definire l'URL assoluto o relativo del foglio di stile.
TYPE: identifica il tipo di dati da collegare. Per i CSS l'unico valore possibile è text/css.
MEDIA: con questo attributo si identifica il supporto (schermo, stampa, etc) cui applicare
un particolare foglio di stile. Unico di questi attributi ad essere opzionale.
a.a. 2006/2007
HTML: fogli di stile incorporati
• Lo “stile” va comunque indicato all’interno della
sezione HEAD:
<HTML>
<HEAD>
<TITLE>Usare i fogli di stile</TITLE>
<STYLE TYPE="text/css">
body {
background: #FFFFCC;
}
</style>
</HEAD>
<BODY>
...
</BODY>
</HTML>
a.a. 2006/2007
HTML: fogli di stile in linea
• Ad esempio, si vuole formattare un titolo H1 in
modo che abbia il testo di colore rosso e lo
sfondo nero, scriveremo:
<h1 style="color: red; background: black;">...</h1>
a.a. 2006/2007
HTML: Quando usare i diversi tipi di CSS
•
In base al meccanismo del cascading, si
sfruttano le priorità:
1. In linea
2. Incorporati
3. Collegati
•
Nota: l'uso estensivo di fogli in linea rischia di
compromettere uno dei principali vantaggi dei CSS,
ovvero avere pagine più leggere e facili da gestire. Il
loro uso è ultimamente considerato deprecato anche
dal W3C
a.a. 2006/2007
HTML: stile_di_esempio.css
/* Definisco le regole per il corpo del documento */
body {
background: White; /* Prima dichiarazione: notate il punto e virgola finale!*/
font-family: Verdana, Geneva, Arial, Helvetica; /* Seconda dichiarazione*/
font-size: 12px; /* Terza dichiarazione */
}
/* Titolo di primo livello */
h1 { color: black; }
/* Paragrafo generico */
p {
color: black;
font: 12px/1.5 Georgia, "Times New Roman", serif;
}
#div1 {
background: Silver; /* Sfondo color argento */
width: 300px;
}
#div2 {
background: Silver; width: 300px; position: absolute; top: 400px; left: 400px;
}
a.a. 2006/2007
HTML: sintassi dei fogli di stile
• Come è fatta una regola:
a.a. 2006/2007
HTML: CSS – Selettore Class
• Per definire una classe si usa far precedere il nome da
un semplice punto:
<style type="text/css">
.testorosso {
font: 12px Arial, Helvetica, sans-serif;
color: #FF0000;
}
</style>
• Per applicarla ad un elemento della pagina Web:
<p class="testorosso"> In questo paragrafo
parleremo di ....</p>
a.a. 2006/2007
HTML: CSS – Selettore ID
• La sintassi per la definizione di un ID. Basta far
precedere il nome dal simbolo di cancelletto:
<style type="text/css">
#titolo {color: blue;}
</style>
• Per applicarla ad un elemento della pagina Web:
<h1 id="titolo"> Titolo dell’articolo...</h1>
a.a. 2006/2007
HTML: CSS – Classe o ID ?
• I selettori di tipo Class e ID funzionano nello stesso
modo, ma con una sola fondamentale differenza: è ad
essa che dovete fare riferimento per scegliere se
usare una classe o un ID.
• In un documento (X)HTML l'attributo id è usato per
identificare in modo univoco un elemento. In pratica,
se assegno ad un paragrafo l'id "testorosso", non
potrò più usare questo valore nel resto della pagina.
Di conseguenza, l'ID #testorosso dichiarato nel CSS
trasformerà solo quel paragrafo specifico.
• Una singola classe, al contrario, può essere
assegnata a più elementi, anche dello stesso tipo.
a.a. 2006/2007
HTML: CSS – Pseudo
Pseudo--classi
• Una pseudo-classe non definisce un elemento ma un
particolare stato di quest'ultimo. In pratica imposta uno stile per
un elemento al verificarsi di certe condizioni.
• La seguente regola vuol dire: i collegamenti ipertestuali (<A>)
che non siano stati visitati (:link) avranno il colore blue.
a:link {color: blue;}
La seguente regola vuol dire: i collegamenti ipertestuali
(<A>) che sono stati visitati (:visited) avranno il
colore purple.
a:visited { color: purple }
a.a. 2006/2007
