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 (;) < 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
Scarica
