Dipartimento di Elettronica ed Informazione Politecnico di Milano Informatica A - GES Prof. Plebani A.A. 2006/2007 HTML Guida di riferimento La presente dispensa e da utilizzarsi ai soli fini didattici previa autorizzazione dell autore. E severamente vietata la riproduzione anche parziale e la vendita. 10/01/2007 Cos è HTML È un linguaggio di definizione di ipertesti utilizzato principalmente per la realizzazione di documenti per il Web Non è un linguaggio di programmazione Utilizza delle strutture chiamate tag (marcatori) È un sistema di contrassegno indipendente dalla piattaforma Viene interpretato da particolari applicativi detti browser Corso di Informatica A - GES [E-OZ] - prof. Plebani 1
Definizioni Hypertext (ipertesto): indica un documento collegato ad un altro documento Markup: gestione dell'aspetto di un documento, ovvero la sua "presentazione", e non il suo contenuto Language: è un termine che in informatica indica una serie di regole, di costrutti e di parole chiave che permettono di definire particolari operazioni e sequenze di operazioni. Corso di Informatica A - GES [E-OZ] - prof. Plebani 2 Il primo file HTML <HTML> <HEAD> <TITLE>Prima</TITLE> </HEAD> <BODY> Hello world </BODY> </HTML> Corso di Informatica A - GES [E-OZ] - prof. Plebani 3
I Tag Hanno una sintassi del tipo <nome_tag> Tranne casi particolari esiste, per ogni tag di apertura, un tag di chiusura <nome_tag> tag di apertura </nome_tag> tag di chiusura Tutto ciò che è compreso tra i tag di apertura e chiusura viene formattato dal browser secondo le caratteristiche del tag Un tag identifica quindi un comando per il browser Corso di Informatica A - GES [E-OZ] - prof. Plebani 4 Attributi Oltre al nome, un tag può essere caratterizzato da attributi secondo la sintassi <nome_tag nome_attr=valore_attr> Gli attributi vanno indicati solo nei tag di apertura Specificano meglio il comando corrispondente al tag in cui sono inseriti definendo Corso di Informatica A - GES [E-OZ] - prof. Plebani 5
Tag speciali Alcuni tag non prevedono tag di apertura e di chiusura ma solo una forma compatta del tipo <nome_tag nome_attr=valore_attr/> Solitamente vengono utilizzati per cambiare le proprietà dell intero documento Oppure specificare una precisa posizione all interno del documento Corso di Informatica A - GES [E-OZ] - prof. Plebani 6 File HTML Sono file scritti con secondo il linguaggio html Si suddividono in due parti fondamentali: intestazione, corpo Corso di Informatica A - GES [E-OZ] - prof. Plebani 7
Struttura fondamentale Un file HTML ha la forma <HTML> <HEAD> intestazione </HEAD> <BODY> corpo </BODY> </HTML> Corso di Informatica A - GES [E-OZ] - prof. Plebani 8 Tag <HTML> Indica che tutti gli elemento ed i contenuti compresi fanno parte di un documento html HTML non è l'unico linguaggio di contrassegno presente sul WWW e il browser rischia di interpretare male i tag, confondendoli con altri linguaggi di markup Gli utenti che usano vecchi browser rischiamo di visualizzare un documento pessimamente formattato. Corso di Informatica A - GES [E-OZ] - prof. Plebani 9
Dipartimento di Elettronica ed Informazione Politecnico di Milano Informatica A - GES Prof. Plebani A.A. 2006/2007 Intestazione di un documento HTML Tag <HEAD> Racchiude le definizioni dell intestazione del documento HTML Contiene informazioni necessarie al browser per una corretta interpretazione del documento Non vengono visualizzate all interno del documento ma sono informazioni comunque fondamentali: Titolo della pagina Termini chiave per i motori di ricerca Tipo di html supportato Link base di riferimento Corso di Informatica A - GES [E-OZ] - prof. Plebani 11
Tag ammessi Tra i tag che permettono la definizione dell intestazione e che quindi caratterizzano una pagina si hanno: <DOCTYPE> <TITLE> <META> <SCRIPT> Corso di Informatica A - GES [E-OZ] - prof. Plebani 12 Tag <DOCTYPE> In realtà questo tag non è interno al tag <HEAD> ma viene posizionato all inizio del documento, anche prima del tag <HTML> non ha bisogno di chiusura ha il compito di fornire informazioni al server Web che ospita la pagina. Corso di Informatica A - GES [E-OZ] - prof. Plebani 13
Tag <DOCTYPE> <!DOCTYPE HTML PUBLIC ="-//IETF//DTD HTML 4.0//EN > Questa riga fornisce alcune informazioni sul documento: HTML PUBLIC: il documento è pubblico IETF: il tipo di HTML pubblico è gestito dalla Internet Engineering Task Force DTD HTML 4.0: la versione di HTML supportata è la 4.0 EN: la lingua del documento è l'inglese Corso di Informatica A - GES [E-OZ] - prof. Plebani 14 Tag <DOCTYPE> L'uso di DOCTYPE non è obbligatorio e può essere omesso. Il suo utilizzo aiuta il server Web ad interpretare correttamente il documento, ma la sua assenza non pregiudica una corretta visualizzazione. Come si nota agevolmente DOCTYPE è un tag che non prevede un elemento di chiusura (non va scritto in questo modo): <!DOCTYPE HTML PUBLIC ="-//IETF//DTD HTML 4.0//EN"></DOCTYPE>) Corso di Informatica A - GES [E-OZ] - prof. Plebani 15
Tag <TITLE> L'elemento <TITLE></TITLE> è il più utilizzato all'interno del tag <HEAD> e fornisce il titolo alla pagina. Il titolo viene solitamente visualizzato dai browser nell'intestazione di pagina. La sintassi è: <TITLE>La mia prima home page di prova</title> Corso di Informatica A - GES [E-OZ] - prof. Plebani 16 Tag <TITLE> <!DOCTYPE HTML PUBLIC ="-//IETF//DTD HTML 4.0//EN"> <HTML> <HEAD> <TITLE> La mia prima home page di prova</title> </HEAD> </HTML> Corso di Informatica A - GES [E-OZ] - prof. Plebani 17
Tag <META> Sintassi <META name= nome_info content= valore /> Permette di definire informazioni generiche sulla pagina quali l autore, software che ha generato la pagina <META name= author content= Pierluigi Plebani /> Viene solitamente utilizzato per caratterizzare la pagina secondo parole chiave che poi potranno essere utilizzate dai motori di ricerca per la classificazione del documento Es.: <META name= keywords content= primofile, prova /> Corso di Informatica A - GES [E-OZ] - prof. Plebani 18 Tag <SCRIPT> Al suo interno va inserito il codice eseguito lato client In questo modo si crea una pagina dinamica lato client Il linguaggio solitamente usato è una versione di Java detto JavaScript Non fa alcun riferimento a tecnologie quali JSP, ASP, CFM. Corso di Informatica A - GES [E-OZ] - prof. Plebani 19
Dipartimento di Elettronica ed Informazione Politecnico di Milano Informatica A - GES Prof. Plebani A.A. 2006/2007 Corpo del documento Tag <BODY> Contiene tutti gli elementi della pagina che vengono visualizzati È posto dopo </HEAD> e sempre all interno dei tag <HTML></HTML> Ha un tag di apertura e uno di chiusura, e un esso si sviluppo il corpo del documento Fornisce al browser indicazioni sulla posizione degli oggetti nel documenti Imposta vari attributi di visualizzazione per il documento Corso di Informatica A - GES [E-OZ] - prof. Plebani 21
Tag <BODY> Attraverso l attributo BGCOLOR è possibile definire il colore di sfondo della pagina <BODY BGCOLOR=#00FF00> Attraverso l attributo BACKGROUND è possibile far sì che un immagine sia lo sfondo della pagina <BODY BACKGROUND= imgsfondo.gif > Corso di Informatica A - GES [E-OZ] - prof. Plebani 22 Colori del Web I colori nelle pagine HTML vengono definiti secondo 3 coppie di cifre esadecimali con lo schema #RRGGBB Ogni coppia può assumere valori compresi tra 00 e FF Più basso è il valore, minore è l intensità della componente rappresentata dalla coppia in quel colore. Corso di Informatica A - GES [E-OZ] - prof. Plebani 23
Colori del Web Alcuni esempi: #000000 nero #FFFFFF bianco #FF0000 rosso #00FF00 verde #0000FF blue È comunque possibile, per i colori principali, utilizzare direttamente il nome dei colori: red, green, blue, white, black, Corso di Informatica A - GES [E-OZ] - prof. Plebani 24 Tag <P> Definisce un paragrafo, una porzione di testo tra due a capo (o carriage return) <HTML> <HEAD> <TITLE>Prima </TITLE> </HEAD> <BODY> <P>Hello world</p> <P>Hello world again</p> </BODY> </HTML> Corso di Informatica A - GES [E-OZ] - prof. Plebani 25
Allineamento del testo Attraverso l attributo ALIGN (che ammette i valori left, right, center) è possibile allineare il testo di un paragrafo <P ALIGN= right >Allineato a destra</p> <P ALIGN= left >Allineato a sinistra</p> <P ALIGN= center >Centrato</P> Corso di Informatica A - GES [E-OZ] - prof. Plebani 26 Tag <BR> Permette di andare a capo senza terminare un paragrafo <HTML> <HEAD> <TITLE>Prima </TITLE> </HEAD> <BODY> <P>Hello world<br> Hello world again</p> </BODY> </HTML> Va sottolineato che qualunque formattazione abbia il codice, questa viene ignorata dal browser che interpreta solo i tag Corso di Informatica A - GES [E-OZ] - prof. Plebani 27
Stile del testo Per caratterizzare un testo è possibile: Utilizzare formati predefiniti Applicare propri stili I formati predefiniti hanno un tag proprio detto tag logico: <H1> <H6> <ADDRESS> <CITE> <EM> <STRONG> <SUB> <SUP> Corso di Informatica A - GES [E-OZ] - prof. Plebani 28 Stile del testo Attraverso combinazioni dei seguenti tag, detti tag fisici, è possibile dare un particolare formato al testo <FONT face= nome_font size= dim color=colore> per cambiare il font <B> grassetto <I> italico <U> sottolineato Un aspetto avanzato di formattazione è possibile utilizzando i fogli di stile CSS Corso di Informatica A - GES [E-OZ] - prof. Plebani 29
Tag logici e fisici Di default i tag <ADDRESS> e <I> producono il medesimo risultato In realtà i tag logici definiscono la struttura del testo. È possibile infatti tale struttura facendo si che senza modificare il documento io possa avere un formato diverso <ADDRESS> I tag fisici sono invarianti rispetto alla presentazione Corso di Informatica A - GES [E-OZ] - prof. Plebani 30 Formattazione di sottoparagrafi È possibile applicare formattazioni anche a parti di un paragrafo Viene utilizzato il tag <DIV> che ammette l attributo ALIGN È possibile all interno di <DIV> applicare un particolare stile di testo Corso di Informatica A - GES [E-OZ] - prof. Plebani 31
Elenchi puntati <UL> definisce un elenco puntato al suo interno gli elementi sono definiti dal tag <LI> <HTML> <BODY> <UL> <LI>hello 1</LI> <LI>hello 2</LI> <LI>hello 3</LI> </UL> </BODY> </HTML> Corso di Informatica A - GES [E-OZ] - prof. Plebani 32 Elenchi puntati Il tag <OL> ammette l attributo type che permette di definire il tipo di puntatore <OL type= disc > <OL type= circle > <OL type= square > Corso di Informatica A - GES [E-OZ] - prof. Plebani 33
Elenchi numerati È identificato dal tag <OL> ed ha una sintassi identica al tag <UL> Il tag <OL> ammette l attributo type che permette di definire il tipo di numerazione <OL type= a > alfabeto minuscolo <OL type= a > alfabeto maiuscolo <OL type= i > romano minuscolo <OL type= I > romano maiuscolo Corso di Informatica A - GES [E-OZ] - prof. Plebani 34 Tabelle Introdotte per la presentazione di dati vengono speso usate per la creazione dei layout grafici Una tabella è definita dai tag <TABLE> delimita la tabella <TR> identifica una riga <TD> identifica una cella della riga in cui è inserita È possibile inserire anche <TH> riga particolare detta di intestazione Corso di Informatica A - GES [E-OZ] - prof. Plebani 35
Tabelle <BODY> <table border=1> <tr> <th>intestazione 1</th> <th>intestazione 2</th> </tr> <tr> <td>prima riga prima colonna</td> <td>prima riga seconda colonna</td> </tr> <tr> <td>seconda riga prima colonna</td> <td>seconda riga seconda colonna</td> </tr> </table> </BODY> Corso di Informatica A - GES [E-OZ] - prof. Plebani 36 Tabelle Il tag <TABLE> ammette attributi quali Border: definisce la dimensione in pixel del bordo delle celle height, weight: dimensione minima (compatibilmente con il contenuto) della tabella Cellpadding: margine del testo all interno della cella Cellspacing: distanza tra le celle Corso di Informatica A - GES [E-OZ] - prof. Plebani 37
Dimensioni in un file HTML Solitamente tutte le dimensioni vengono espresse in pixel Tutte le dimensioni possono essere espresse in due modi: Assolute: espresse in pixel Relative: espresse in percentuale. Nel secondo caso la dimensione è relativa alla dimensione dell elemento contenente l elemento di cui si sta definendo la dimensione Corso di Informatica A - GES [E-OZ] - prof. Plebani 38 Immagini Attraverso il TAG <IMG> è possibile inserire un immagine salvata in un file esterno I principali formati ammessi per le immagini sono:.gif,.jpg,.png. Sintassi <IMG src= nome_file height= altezza width= larghezza alt= testo alternativo /> Sono ammessi gli attributi ALIGN, BORDER Corso di Informatica A - GES [E-OZ] - prof. Plebani 39
Immagini 2 Indicando dimensioni diverse dall originale è possibile adattare l immagina Il testo alternativo viene visualizzato in caso di fallito caricamento dell immagine o accanto al mouse durante il passaggio sull immagine Corso di Informatica A - GES [E-OZ] - prof. Plebani 40 Elementi esterni È possibile all interno di un file HTML riferire, oltre alle immagini, altri elementi esterni che permettono di dare un carattere di multimedialità alla pagina Possono video, applet, file di formato particolare (shockwave) Corso di Informatica A - GES [E-OZ] - prof. Plebani 41
Pagina HTML vs File HTML Una file HTML è un documento scritto secondo il linguaggio HTML Una pagina HTML è l insieme dato da: File HTML Le immagini ed oggetti riferiti all interno del file HTML Corso di Informatica A - GES [E-OZ] - prof. Plebani 42 Pagina HTML Le immagini devono essere sufficientemente piccole per poter essere agevolemente scaricate anche attraverso un modem Solitamente la somma degli elementi di una pagina HTML non deve superare i 50Kb Corso di Informatica A - GES [E-OZ] - prof. Plebani 43
Link tra file L ipermedialità del file html è dato dalla possibilità di navigare tra le pagine: passare quindi da una pagina all altra Ogni link richiede la definizione di una sorgente e da una destinazione Sia la sorgente che la destinazione possono essere file html, immagini, video ecc. Il tag <A> racchiude la sorgente L attributo href, richiesto dal tag <A> identifica la destinazione Corso di Informatica A - GES [E-OZ] - prof. Plebani 44 Link tra file <HTML> <HEAD> <TITLE>Prima </TITLE> </HEAD> <BODY> <A HREF="www.polimi.it"> Politecnico di Milano</A> </BODY> </HTML> Corso di Informatica A - GES [E-OZ] - prof. Plebani 45
Colori dei Link I link assumono colori diversi a seconda che: Non siano mai stati visitati: colore blue Sia stati già visitati: colore viola Il mouse sta cliccando sul link (link attivo): colore blue Attraverso gli attributi LINK, ALINK e VLINK del tag <BODY> è possibile modificare i colori predefiniti Corso di Informatica A - GES [E-OZ] - prof. Plebani 46 Link interni ed esterni Non necessariamente un link deve avere come destinazione un elemento esterno alla pagina Attraverso le ancore io possono definire punti del documento che potranno essere destinazioni di link Un ancora è un elemento logico e quindi non visibile Il tag <A> viene utilizzato per definire le ancore nella forma: <A name= nome_ancora /> La sorgente che punta a questa ancora dovrà essere nella forma <A href= #nome_ancora >testo</a> Corso di Informatica A - GES [E-OZ] - prof. Plebani 47
Link relativi ed assoluti Quando si collega un file esterno esistono due modi per esprimere la posizione della destinazione Assoluto: viene espresso il percorso completo del file partendo dalla directory principale del sito Relativo: viene espresso il percorso da effettuare partendo dalla posizione del file sorgente per arrivare alla destinazione Attraverso il tag <BASE> è possibile modificare il punto di riferimento nel calcolo percorsi relativi Corso di Informatica A - GES [E-OZ] - prof. Plebani 48 Altri link È possibile definire come link un indirizzo di posta elettronica <A HREF=mailto:plebani@elet.polimi.it>Scrivi</A> In questo modo è possibile aprire direttamente una schermata di composizione del client di posta predefinito Corso di Informatica A - GES [E-OZ] - prof. Plebani 49
Bibliografia e ringraziamenti Le specifiche ufficiali sono reperibili all indirizzo: http://www.w3.org/markup/ Una guida esaustiva ed esempi pratici possono essere scaricati da: http://www.html.it Si ringrazia l ing. Alessandro Campi per la collaborazione Corso di Informatica A - GES [E-OZ] - prof. Plebani 50