Un’introduzione a HTML
(I)
Un’introduzione a HTML
• I tag descrivono le caratteristiche grafiche di
una pagina web
• Formattare con i tag:
– parole racchiuse tra parentesi angolari < >
– si usano a coppie (apertura e chiusura):
• <title>
</title>
– I tag non distinguono tra maiuscole e minuscole,
ma il testo al’interno dei tag sì
4-2
Tag per grassetto e corsivo
• Bold:
<b>
</b>
• Italic:
<i>
</i>
• La coppia di tag racchiude il testo da formattare
• Potete applicare più di un tipo di formattazione alla volta
• <b><i>Veni, Vidi, Vici!</i></b> produce:
Veni, Vidi, Vici!
• L’ordine non ha importanza, ma i tag devono essere
nidificati correttamente
• Alcuni tag non sono a coppie e non hanno una chiusura:
– <hr> riga orizzontale di separazione
– <br> interruzione di riga
4-3
Una pagina HTML
Inizia con <html> e finisce con </html>
<html>
<head>
informazioni preliminari, come il titolo della pagina
</head>
<body>
contenuto principale della pagina
</body>
</html>
4-4
Strutturare i documenti
• un linguaggio di markup descrive la relazione
tra le diverse parti di un documento
• Intestazioni:
– dal livello 1 per i titoli e le intestazioni più grandi,
fino al livello 8
– un’intestazione è visualizzata con un corpo più
grande su una nuova riga
<h1>Papa</h1><h2>Cardinale</h2><h3>Arcivescovo</h3>
produce:
Papa
Cardinale
Arcivescovo
4-5
Il formato del codice HTML
• Nell’esempio precedente, codice HTML
scritto su una sola riga è visualizzato su tre
righe separate
• L’HTML dice al browser come produrre
l’immagine formattata in base al significato
dei tag, non dell’aspetto del codice sorgente
• Normalmente si cerca di scrivere l’HTML in
una forma ben strutturata per renderne facile
la comprensione e la manutenzione
4-6
Spazio bianco
• Spazio inserito per facilitare la leggibilità
– spazi
– tabulazioni
– a capo
• Il browser trasforma ogni sequenza di spazi
bianchi in un singolo carattere di spazio prima
di cominciare l’elaborazione del codice HTML
– eccezione: l’informazione cosiddetta
“preformattata”, ovvero inclusa nei tag <pre> e
</pre> viene sempre visualizzata così come
appare nel codice sorgente
4-7
Caratteri speciali: il simbolo di escape
• Se la nostra pagina dovesse contenere una
relazione matematica come
0<p>r
• Il browser potrebbe interpretare < p > come
un tag di paragrafo e potrebbe non
visualizzare correttamente il testo
• Per indicare i simboli di maggiore e minore si
utilizza il simbolo di escape, cioè la E
commerciale o ampersand (&), seguito da un
codice distinto e da un punto e virgola (;)
&lt; compare sulla pagina come <
4-8
Attributi dei tag in HTML
• L’allineamento richiede ulteriori informazioni
• Per giustificare un testo, dobbiamo specificare se
desideriamo farlo a sinistra, a destra o centrato
• Gli attributi sono aggiunti all’interno delle parentesi
angolari
<p align = "center">
(di default la giustificazione è a sinistra)
• Attributi per la riga orizzontale: la larghezza e lo
spessore possono essere specificati oppure lasciati
con i valori di default
<hr width = “50%“ size=4>
4-9
Collegamenti e àncore (1)
•
Un collegamento ipertestuale è costituito di due
parti:
1. Àncora (il testo che nel documento attuale è
evidenziato)
2. Riferimento ipertestuale (l’indirizzo dell’altra pagina
web)
•
Cominciate con <a seguito da uno spazio
•
Specificate il riferimento ipertestuale con
href="nome del file"
•
Chiudete con </a>
4-10
Collegamenti e àncore (2)
• Esempio:
<a href= http://www.unimi.it ”> Università degli Studi di Milano </a>
Riferimento ipertestuale
(hyperlink)
àncora
Àncore (cont.)
• Path assoluti: il riferimento a pagine su altri
siti web è costituito da un URL
• Path relativi: riferimento alle pagine
memorizzate localmente (se nella stessa
directory basta solo il nome del file)
– i path relativi sono più flessibili — permettono di
spostare un gruppo di file anche su un altro server
– i path relativi possono anche far riferimento a una
cartella più in basso o in alto nella gerarchia delle
directory
4-12
La gerarchia delle directory è localizzata sul server web con
indirizzo di dominio: www.bioz.com
4-13
Path relativi ed assoluti: esempi
• Path assoluto:
http://www.bioz.com/bios/art/magritte.html
Specifica di
protocollo
Indirizzo
simbolico di
dominio o
indirizzo IP
“cammino”
verso il file
• Path relativo (file corrente: magritte.html)
– chagall.html
– ../sci/russell.html
– pictures/notpipe.html
4-15
4-16
