Gestione dell informazione. Master Catalogazione AA 2009/10 Maria A. Alberti. Il linguaggio HTML 1. HTML in breve. HyperText Markup Language:

Transcript

1 HTML in breve HyperText Markup Language: background e linguaggio Master Catagolazione AA 2009/10 Definito sull base di SGML In particolare come una SGML DTD per descrivere le pagine del Web Solo un linguaggio di markup Separa la definizione della struttura dal suo layout Titoli, paragrafi e sottoparagrafi, liste Pochi controlli tipografici: italico, grassetto Tavole e moduli interattivi Integrazione di media e introduce i legami ipertestuali Versione standard è HTML Generalità Un documento HTML è un file di testo ASCII dotato di opportuni tag che svolgono diverse funzioni formattazione dello stile del testo rimandi (link) ad altre risorse disponibili sul WWW definizione di maschere di inserimento dati inclusione di altri oggetti complessi Evoluzioni di HTML I fogli di stile CSS (Cascading Style Sheet) per controllare il layout e posizionare correttamente immagini e testo sulla pagina Introduce maggiori capacità di layout DHTML (Dynamic HTML) In accordo con un CSS consente di cambiare dinamicamente la posizione di un elemento di stile Introduce animazione nella pagina 3 4 HTML oggi Commercializzazione dei browser (metà 90) Numerose estensioni proprietarie non standard Uso indebito dei tag Per controllare il formato del testo Uso massiccio di grafica Per controllare meglio il formato Persino per le formule matematiche Limiti HTML Tag non sufficienti per descrivere la grande varietà di documenti Non consente la definizione di nuovi tag Es: un ristorante vuole i menù su web. Quali tag si usano per definire le diverse entrate? Si useranno i tag delle sezioni solo perché il loro display finale e simile all importanza che vogliamo dare ai diversi piatti Il markup NON descrive correttamente la struttura del documento ma una struttura che si presenta simile Si perde il vantaggio della strutturazione: un motore di ricerca non potrebbe cercare i primi piatti ad esempio Necessaria un evoluzione 5 6 Il linguaggio HTML 1

2 Contenuto vs presentazione HTML struttura documenti per rendere il contenuto più accessibile Titoli, liste, paragrafi, immagini Non struttura il contenuto come il linguaggio che lo segue nell evoluzione: il linguaggio XML (extensibile Markup Language) Non controlla il layout finale extensibile Markup Language Raccomandazione del W3C nel 1998 Adattamento di un sottoinsieme SGML per il Web Consente di definire DTD per ogni tipo di documenti, superando i limiti di HTML Esperti definiscono DTD specifiche, che condividono caratteristiche di base di XML Browser le interpretano XML diventa un infrastruttura che supporta vari meccansimi per strutturare testi e documenti multimediali non solo per il web 7 8 Esempi di DTD per XML SMIL (Synchronized Multimedia Integration language) linguaggio per la presentazione di coreografie multimediali, in cui audio, video testo e grafica sono integrati e sincronizzati in tempo reale Consente di specificare cosa e quando presentare: una frase sincronizzata con un immagine SVG (Standard Vector Graphics) Linguaggio per la definizione di grafica vettoriale, inteso a superare le gravi limitazioni di HTML nella gestione di documenti ricchi in multimedialità Esempi di DTD per XML MathML (Math Markup Language) XFDL (extensibile Forms Decsription Language) RDF (Resource Description Farmework) Fornisce uno standard per la definizione di metadati Metadati: dati sul documento, il linguaggio o etichette per la descrizione del contenuto 9 10 Strumenti di sviluppo Minimo: un editor di testi (NotePad o SimpleText) e un browser Applicazioni di tipo WYSIWYG (What You See Is What You Get) dedicate (NetscapeComposer, W3C Amaya) Cautela: supporto allo standard 4.0 Comporre i documenti e poi inserire i tag oppure inserire i tag durante la composizione? Controllori di sintassi: HTML Tidy distribuito dal W3C Il linguaggio HTML 11 Il linguaggio HTML 2

3 Elementi e tag Un documento HTML è strutturato in elementi La struttura logica: sezioni e paragrafi Un elemento può contenerne altri Una sezione ad esempio può avere diversi paragrafi Un elemento è introdotto da un tag di apertura e finisce con un tag di chiusura Es: <P> contenuto dell elemento paragrafo </P> Tra i due tag c è il contenuto dell elemento Gli elementi devono essere correttamente innestati Ogni elemento fa parte del contenuto di un unico elemento genitore I tag I tag HTML sono racchiusi tra i simboli < e > : <tag> alcuni tag prevedono un identificatore di inizio <tag> e di fine marcatura </tag> Codifica non standard per rappresentare in modo universale ed indipendente dalla piattaforma i caratteri ASCII speciali e altri simboli (es: lettere accentate) Elementi vuoti Alcunit ag singoli, es: <HR>, <BR> Elementi vuoti sono senza contenuto Quindi non hanno i tag di chiusura I tag di chiusura possono essere omessi se non c è ambiguità Es: <P>primo paragrafo</p> <P>secondo paragrafo</p> Interpretazione dei tag È il browser utilizzato dall'utente ad occuparsi di tradurre correttamente i tag HTML visualizzando una pagina leggibile ed includendo eventuali oggetti complessi immagini animazioni suoni Esempi di tag Tag per la formattazione titoli: <H1>...</H1>, <H2>...</H2>,...,<H6>...</H6> paragrafo: <P ALIGN=RIGHT LEFT CENTER>...</P> fine riga: <BR> linea: <HR SIZE=n WIDTH=m ALIGN=x NOSHADE> testo a spaziatura fissa preformattato: <PRE>...</ PRE> Caratteri speciali lettere accentate : à=à è=è é=é ì=ì ò=ò ù=ù simboli : >=> <=< &=& 17 I tag per controllare i caratteri tipo caratteri: <FONT SIZE=n COLOR=#rrggb FACE="font">...</FONT> stile del testo: bold: <B>...</B> italic: <I>...</I> typewriter: <TT>...</TT> enfatizzato: <EM>...</EM> sottolineato: <U>...</U> ingrandimento <BIG>...</BIG> riduzione <SMALL>...</SMALL> della dimensione del carattere apici: <SUP>...</SUP> e pedici <SUB>...</SUB> 18 Il linguaggio HTML 3

4 Attributi di un elemento Gli attributi specificano proprietà dell elemento e sono descritti nella DTD Vanno inseriti nel tag d apertura dell elemento <HR size = 12 width = 50% > Il simbolo = si riferisce ad un operazione di assegnamento di valore alla variabile corrispondente all attributo Non esistono valori booleani (vero o falso) <HR noshade = noshade > assegna valore vero, ma = noshade può essere omesso Un primo documento HTML <HTML> apertura di un tag <HEAD> area per metadati <TITLE>titolo appare nel browser</title> chiusura di un tag </HEAD> <BODY> <H2>Il mio primo documento</h2> <! Documento 10 marzo Master Catalogazione. --> commento <P>Il primo paragrafo: un <A href = alberti/ > legame ipertestuale</a> </P> ancora per link <P>Il secondo paragrafo con un po di <EM>enfasi nel testo</em> </P> </BODY> </HTML> Interpretazione del browser Un secondo esempio <HTML> <HEAD> <TITLE>La mia pagina</title> </HEAD> <BODY BGCOLOR=#ffffff> <H1>Benvenuti!</H1> Questa è una pagina di prova. Visita il sito del <A HREF=" </BODY> </HTML> Struttura di un documento HTML Gli elementi strutturali obbligatori introdotti dai tag: <HTML>, <HEAD>, <BODY> <TITLE>, il titolo appare solo nel browser e nei bookmark e appartiene al corpo della sezione head Commenti Tag <!-- --> Non sono visualizzati dal browser, ma sono visibili a tutti: informazioni importanti per la manutenzione del file Testo Tutto il resto, strutturato con diversi tag Multimedia Non fanno parte del documento HTML, ma sono file separati di diversi formati Si includono i riferimenti nel file che li deve contenere con tag specifici 23 Il testo I tag per gestire il testo sono i più numerosi L integrazione con i multimedia è posteriore HTML è orientato alla struttura del testo HTML non è orientato al controllo completo del layout HTML suggerisce un layout non lo assume I fine riga e gli spazi vengono usualmente trascurati e vanno usati per strutturare e rendere leggibile il sorgente HTML La visualizzazione dipende dalla dimensione della finestra di browser Quindi non è molto adatto per la stampa 24 Il linguaggio HTML 4

5 Tag di intestazione Le diverse sezioni di un testo possono avere intestazioni <H1> <H6>, 6 livelli gerarchici di intestazione Vengono visualizzati con dimensione di font decrescente dall 1 al 6 e viene lasciato dello spazio tra intestazione e testo Struttura del testo I tag <DIV>, <P> per indicare divisioni e paragrafi del documento, formattabili con un foglio di stile e l attributo align e valori right, left, center, justify <BR> per interrompere la riga corrente L interruzione può avvenire in ogni punto in cui ci sia uno spazio Per impedirlo occorre inserire un carattere speciale non breaking space E pessima abitudine usare questi caratteri speciali per forzare un paragrafo ad essere indentato <HR> introduce una riga orizzontale di separazione <PRE> per testo pre-formattato Il tag Paragrafo <P> segna l inizio di un paragrafo La chiusura del tag è spesso omessa Meglio usarlo esplicitamente </P> Viene reso con una spaziatura maggiore L allineamento può essere controllato con l attributo align Come le divisioni, i paragrafi possono essere associati a eventi scatenati dall utente con il mouse, mediante JavaScript. Il tag Divisioni HTML definisce esplicitamente le suddivisioni con il tag <DIV> DIV come P identifica una suddivisione logica che può essere formattata con opportunamente con un foglio di stile e a cui può essere dato un nome Tag di stile fisico HTML non è un word processor Ma consente qualche funzione di controllo esplicito del display del contenuto <I> per lo stile italico <B> per lo stile grassetto <TT> per lo stile macchina da scrivere Non abusarne, meglio usare i tag orientati al contenuto Tag orientati al contenuto Orientati al significato, oltre che contenere qualche indicazione di stile <CITE> per inserire citazioni <EM>, <STRONG> per evidenziare testo <CODE> per indicare codice <DFN> per le difinizioni <VAR> per i nomi di variabili <SAMPLE> per marcare il testo come esempio <CAPTION> per inserire didascalie Il linguaggio HTML 5

6 Caratteri di testo speciali Non possono essere introdotti dalla tastiera semplicemente Preceduti dal carattere & Terminati dal carattere ; è è é é à à &, & >, < < > Liste non ordinate Liste non ordinate <UL> L attributo type modifica il simbolo della lista Con valori dell attributo disc, circle o square L attributo dir specifica l allineamento del testo Con valori ltr o rtl Gli elementi della lista <LI> </LI> Liste ordinate Liste ordinate <OL> L attributo type modifica la numerazione Con valori i, per numerali romani (i, ii, iii) Con valore1, per numerali arabi (1, 2, 3) Con valore A o a, per caratteri alfabetici L attributo start specifica il valore di partenza della numerazione Es: start= 5 Gli elementi della lista <LI> </LI> <UL TYPE=CIRCLE> <LI> Primo elemento <LI> Secondo elemento <LI> Terzo elemento </UL> <OL> <LI> Primo elemento <LI> Secondo elemento <LI> Terzo elemento </OL> Liste ed elenchi Liste di definizione Liste di definizione <DL> Gli elementi della lista: il termine <DT> e la definizione <DD> Validi solo all interno del tag <DL>, supportano gli attributi style e class per controllare meglio la visualizzazione Le liste possono essere indentate Ancore Il tag <A> identifica l ancora della sorgente e la destinazione di un link L attributo name specifica la destinazione di un link interno al documento L attributo href specifica la sorgente del link Il valore è l URL (Uniform Resource Locator) di un altro documento o un altra posizione nel documento URL assoluti: l indirizzo completo per identificare la risorsa richiesta URL relativi all indirizzo di base o in caso questo manchi dall indirizzo del documento da cui parte la richiesta Il linguaggio HTML 6

7 URL Un URL HTTP è usato per localizzare un documento nella rete: indirizzo è il nome in rete, l indirizzo, del server che contiene il documento: cammino è il cammino per raggiungere il documento nel file system del server: lezioni/html/esempio.html Hyperlink Il contenuto del tag <A> può essere un immagine o una combinazione imm./testo <A href="/ > <IMG src="logo.gif" alt="home page"> </A> <A href="/"> <IMG src="logo.gif" alt="home page"> La nostra istituzione </A> Ancore e link La destinazione di un link viene introdotta con l attributo name <H2><A name = luoghi_interessanti"> Luoghi d interesse</a></h2> L ancora può essere poi referenziata <LI><a href = "#luoghi_interessanti"> Visitate i luoghi interessanti</a> </LI> oppure <A href = " milano.html#luoghi_interesse" Luoghi d interesse a Milano</A> Ancore oltre ai documenti HTML Un ancora può richiamare altri servizi Internet oltre al protocollo http Protocolli ftp, telnet, mail Eventualmente in finestre diverse o documenti diversi da HTML Necessari plugin o applicazioni helper per la visualizzazione File pdf, doc Video, audio Immagini Immagini Le immagini sono trattate in modo speciale e possono essere visualizzate nel testo dai browser È necessario indicare il nome del file informato GIF o JPEG specificandone la collocazione mediante un URL: Il tag <IMG> con attributo obbligatorio src Specifica l indirizzo del file contenente l immagine Altri attributi width, height,alt e longdesc Attributo align con valore top, middle e bottom controlla il layout del testo adiacente l immagine <IMG SRC=" ISMAP HEIGHT=h WIDTH=w BORDER=n ALIGN=RIGHT LEFT TOP MIDDLE BOTTOM ALT="testo alternativo"> Il linguaggio HTML 7

8 Testo e immagini L attributo align nel tag IMG controlla il display del testo adiacente un immagine align= left testo a destra align= right testo a sinistra Per forzare a riprendere sotto all immagine <br clear="all"> esempio <IMG SRC="/gif/mczolor.gif" ALT="Mozilla"> Questa è una immagine visualizzata alla destra del testo Esempio inserzione immagine <IMG src = fotografia.jpg width= 200 height = 150 alt= fotografia dell autore longdesc = autore.html > src, width, height,alt e longdesc sono attributi del tag IMG La dimensione è espressa in pixel. Per chi ha disattivato lo scaricamento di immagini o per chi non vede le immagini. Attributo border Attributo src ha come valore il cammino del file Formati delle immagini I browser supportano diversi formati di immagini. I formati specificano il tipo di compressione sull immagine GIF, JPEG, PNG i più comuni GIF o PNG adatti alla grafica a colori pieni JPEG adatto alle fotografie o per sfumature Supportano la resa progressiva a video Mappe di immagini Immagini che possono contenere ancore Lato server. Oggi poco usato. Attributo ismap del tag IMG serve per catturare la posizione xy del mouse sull immagine e mandarle al server che decide l azione di conseguenza Richiede l accesso al server e script nella dir cgibin Lato client. Oggi il più adottato L attributo usemap del tag IMG con i tag corrispondenti MAP e AREA Mappe d immagini lato client Includere una mappa di coordinate per descrivere la regione sensibile al mouse <IMG src= fig/map.gif usemap= #mappa alt= una mappa > Il valore dell attributo usemap è l indirizzo della mappa delle coordinate e i relativi link In questo caso contenuta nel documento stesso Il browser traduce le coordinate nelle azioni corrispondenti Numerosi javascript forniscono effetti speciali Il linguaggio HTML 8

9 Il tag MAP Nel documento HTML che usa mappe di immagini ci deve essere la dichiarazione delle zone sensibili, introdotte dal tag MAP Il tag MAP contiene Ancore tradizionali a documenti A Una collezione di tag AREA, in alternativa, per definire le aree di una immagine sensibili al mouse <MAP name= mappa > <AREA shape= rect coords= 75, 75, 100, 100 > <AREA shape= circle coords= 50, 50,25 > </MAP> Per definire zone complesse non sensibili e sensibili. NB l ordine è importante. <AREA shape="circle" coords="186,44,50" nohref> <AREA shape="circle" coords="186,44,100" 49 </MAP> Il tag AREA Oltre contenere gli attributi shape e coords per definire le aree sensibili rect: left-x, top-y, right-x, bottom-y circle: center-x, center-y, radius poly: x1,y1, x2,y2,... xn,yn L attributo href definisce i link delle aree sensibili <MAP name= mappa > <AREA shape= rect coords= 75, 75, 100, 100 href= link.html > <AREA shape= circle coords= 50, 50,25 href= javascript:window.alert( mi fai solletico ) > 50 Approfondimento: mappe d immagini Creare la mappa: Aprire l immagine nel programma Definire l area sensibile con i tool disponibili (rett., crf, poligono) Con l area selezionata inserire l URL Definire l URL di default per immagini lato server Immagini lato server salvate in un file.map sul server Immagini lato client sono embedded nel file.html Approfondimento: mappe lato client Lato client ha 3 componenti: Un file d immagine.gif,.jpg o.png Una mappa delimitata dai tag <map> </map> contenente nei tag <area> le coordinate e l URL per ogni area sensibile L attributo usemap nel tag <img> per indicare la mappa a cui ci si riferisce Vantaggi Sono auto-contenute nel file.html e non richiedono il server Forniscono l informazione sull URL di destinazione Approfondimento: mappa lato client Esempio: <map name = bar > inizio mappa <area shape = rect coords= 200, 20,220,40 HREF = > <area shape = circle coords= 300, 60, 40 HREF = > </map> fine mappa <img src = mia_img.gif width= height= border=0 usemap = #bar > Tabelle Il tag <TABLE> consente di definire tabelle di dati Si descrivonoriga per riga: tag <TR> Una riga speciale per l intestazione: tag <TH> Il tag <TD> definisce il contenuto delle celle di ogni riga, quindi delle colonne Le celle contengono i dati: testo, immagini o anche altre tabelle Il linguaggio HTML 9

10 Fogli di stile I browser applicano una visualizzazione di default I fogli di stile permettono una migliore tipografia ed un maggior controllo del layout Indentazioni, colori, spaziatura, margini e posizioni degli elementi Lo stile si separa totalmente dalla struttura Occorre essere consistenti e non usare le funzioni di presentazione di HTML FONT Ritorno agli intenti originali di HTML che si riavvicina a SGML Documenti potenzialmente più piccoli Manutenzione del documento più semplice 55 Cascading Style Sheet I fogli di stile più supportati dai browser Ma i vecchi browser NO. La sintassi Una regola è composta da 2 parti: un selettore e una dichiarazione selettore {dichiarazione} La dichiarazione è composta da proprietà: valore Più proprietà sono separate da ; P {text-indent: 4pc; color: red; font-size: 12pt; line-height: 120%} Le regole possono essere innestate I valori delle proprietà sono specificati con valori appropriati Master Catalogazione In % relativo AA 2009/10 alla dimensione 56 della fonte di caratteri I valori delle proprietà Codice Unità di misura Descrizione px pixel Relativa al monitor pt point Tipica della tipografia tradizionale pc pica Idem, equivale 6pt em em la metà della lettera M nel font corrente, circa l ampiezza del font corrente ex ex Unità relativa. Pari all altezza della lettera x in inches Standard in US mm, cm millimetri, centimetri Sistema decimale metrico Per nome Specificare il colore aqua gray navy silver black green olive teal blue lime purple white fuchsia maroon red yellow Per valore RGB o il corrispondente codice esadecimale #FF0000 rgb(255,0,0) Nomi dei colori e valori RGB Colori in RGB e esadecimale black = "#000000" green = "#008000" silver = "#C0C0C0" lime = "#00FF00" gray = "#808080" olive = "#808000" white = "#FFFFFF" yellow = "#FFFF00" maroon = "#800000" navy = "#000080" red = "#FF0000" blue = "#0000FF" purple = "#800080" teal = "#008080" fuchsia = "#FF00FF" aqua = "#00FFFF" La tripla di numeri decimali RGB compresi tra 0 e 255 (255, 255, 255) per il bianco La seguenza composta da # e da 6 cifre esadecimali #FFFFFF Ogni coppia di cifre rappresenta il valore R G B Il linguaggio HTML 10

11 Diverse basi cifre binario decimale esadecimale Contare in esadecimale A B C D E F A 1B 1C 1D 1E 1F A 2F A0 176 B0 192 C0 208 D0 224 E0 =112+7= F0 FF 62 Convertitori RGB esadecimale rgb2hex.html 63 Strategie per aggiungere stile Lo stile in linea, inserendo l attributo style nel tag di elementi HTML <H1 style= color: red >, <P style= font-size:12pt > Fogli di stile embedded, con il tag <STYLE> Nella sezione HEAD e commentata per i browser vecchi che non la riconoscono <STYLE type= text/css > </STYLE> Fogli di stile esterni: con il tag <LINK> (1 foglio per documento) o importando (per uso di fogli multipli) <LINK rel= stylesheet href= /path/ stylesheet.css type= text/css > ( </STYLE> 64 Attributo classe L attributo class, specificato negli elementi HTML, consente di identificare sottoinsiemi di elementi dello stesso tipo <P class= indent > </P Viene applicato ai paragrafi della classe specificata e la regola più generale a tutti gli altri P.noindent { text-indent: 0pc; } P.hang { text-indent: -40pt; margin-left: 4pc; } Gli elementi DIV e SPAN Il tag <DIV> consente di definire elementi strutturali di un documento a cui applicare uno stile <DIV STYLE= color: red > <H1>Titolo</ H1></DIV> Il tag <SPAN> per specificare il range di validità di una dichiarazione di stile <P>Il testo da qui in avanti deve <SPAN STYLE= color: red >essere in rosso</span> e poi non più</p> Il linguaggio HTML 11

12 Il tag DIV Attributo align Valori left, right, center e justify Ogni ulteriore specifica di allineamento innestato ha precedenza Può essere referenziato con l attributo id <DIV id=sommario> Il riferimento si può usare rapporto.html#sommario Può essere definito uno stile locale con gli attributi style e class Form È possibile costruire delle maschere (form) di input di dati da passare come parametri a procedure CGI (Common Gateway Interface) appositamente predisposte sul server web che acquisiscono i dati e li elaborano Form <HTML> <HEAD> <TITLE> Form</TITLE> </HEAD> <BODY> <FORM method="post" action="invio.php"> <P>Your Name:<br> <INPUT type="text" name="sender_name" size=30> </p> <P>Your Address:<br> <INPUT type="text" name="sender_ " size=30> </p> <P>Message:<br> <textarea name="message" cols=30 rows=5></textarea> </p> <INPUT type="submit" value="send This Form"> </FORM> </BODY> </HTML> Il linguaggio HTML 12