un’introduzione a html (i)

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

un’introduzione a html (i)

Documents