Post on 01-May-2015
transcript
Un’introduzione a HTML(I)
4-2
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-3
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-4
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-5
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:
PapaCardinale Arcivescovo
4-6
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-7
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-8
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 (;)
< compare sulla pagina come <
4-9
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-10
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>
Collegamenti e àncore (2)
• Esempio:
<a href= http://www.unimi.it ”> Università degli Studi di Milano </a>
Riferimento ipertestuale
(hyperlink)àncora
4-12
À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-13
La gerarchia delle directory è localizzata sul server web con indirizzo di dominio: www.bioz.com
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