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ì
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
Una pagina HTML Inizia con <html> e finisce con </html> <head> informazioni preliminari, come il titolo della pagina </head> <body> contenuto principale della pagina </body> </html>
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
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
Spazio bianco Spazio inserito per facilitare la leggibilità 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
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 <
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>
Collegamenti e àncore (1) Un collegamento ipertestuale è costituito di due parti: Àncora (il testo che nel documento attuale è evidenziato) 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
À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
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 Indirizzo simbolico di dominio o indirizzo IP Specifica di protocollo “cammino” verso il file Path relativo (file corrente: magritte.html) chagall.html ../sci/russell.html pictures/notpipe.html