Università degli Studi di Modena e Reggio Emilia. Facoltà di Ingegneria Reggio Emilia CORSO DI TECNOLOGIE E APPLICAZIONI WEB HTML. Ing.

Transcript

1 Università degli Studi di Modena e Reggio Emilia Facoltà di Ingegneria Reggio Emilia CORSO DI TECNOLOGIE E APPLICAZIONI WEB HTML Ing. Marco Mamei Anno Accademico M. Mamei - Tecnologie e Applicazioni Web 1

2 Cos e HTML? HTML = Hyper Text Markup Language Hyper Text = testo (o più in generale documento) iper-dimensionale, con più di una dimensione. I testi tradizionali sono mono-dimensionali, isomorfi a una retta. Si leggono in una direzione unica. I testi iper-dimensionali permettono dimensioni multiple di lettura. Si parla quindi di Navigazione. Pezzi di documento si collegano a altri pezzi o a altri documenti. Nel Web, questo si traduce nel creare ragnatele ( Webs ) di documenti anche su siti diversi, e collegati tra loro secondo il collegamento logico e di interesse tra loro. MarkUp Language: linguaggio di strutturazione documenti. Documento = Contenuto + Informazioni Strutturali Contenuto = l informazione pura del testo Struttura = ciò che serve per rendere efficacemente intelleggibile l informazione (anche visualizzazione) Esempio: un libro contiene testi e figure, e anche indice, sommario, titoli, etc Markup: un modo per associare informazione strutturale a un testo. M. Mamei - Tecnologie e Applicazioni Web 2

3 Marking Up a Document Anche scrivendo documenti Word, dovrebbe essere chiara la distinzione tra contenuto (ciò che noi scriviamo da tastiera) e struttura (che noi diamo attraverso comandi opportuni per impaginare, mettere in grassetto le parole, etc. etc.). Closed representations: Il documento è rappresentato in forma binaria e proprietaria non facile vedere come è rappresentato internamente il documento, e come si riesce ad associare ciò che si scrive e la struttura associata a ciò che si scrive. Tipica scelta di ambienti What You See Is What You Get. Si nasconde all utente la parte descrittiva della struttura, per fare visualizzare direttamente il risultato della composizione contenuto+struttura. Open Representations: Il documento è rappresentato in forma testuale (ASCII o.txt), e le informazioni di struttura sono inserite tramite sequenze standardizzate e note di caratteri speciali. Diventa molto chiara la distinzione tra informazione (puto testo) e struttura (descritta da sequenza di caratteri speciali). I caratteri speciali sono appunto i Marks. Chiaramente, si richiedono programmi appositi per passare dalla open representation alla versione rendered (visualizzabile o stampabile) del documento. M. Mamei - Tecnologie e Applicazioni Web 3

4 Examples of Markup Languages Il Linguaggio Tex. Word processor utile per documenti matematici o chimici, che contengono formule particolari che difficilmente si riescono a scrivere usando una normale tastiera. Ciao, la prossima parola e\egrave in \bf {grassetto} e poi adesso scrivo una sommatoria per i da 1 a N eccola: $\sum{i,1,n}(i+2)$. Un programma speciale ( compilatore Tex ) può quindi leggere il documento e, riconoscendo le informazioni strutturali, trasformarlo, p.e., in un PDF. Il linguaggio SGML Deriva da uno sforzo di organizzazioni di standardizzazione (ISO e ANSI) per stanrdadizzare il mark up di documenti elettronici. Tra il 1970 e il SGML definisce come si definiscono i markup (tipicamente racchiudendoli tra i segno < e >) e come si associano significati ai markup (attraverso il cosiddetto Document Type Definition ). Specifici gruppi di interesse, poi, possono definire i loro specifici TAG e l associato significato. Sono istanze specializzate di SGML. Esempio: i chimici definiscono TAG per rappresentare struttura di composti chimici e il significato di questi TAG definisce che tipo di legame chimico il TAG rappresenta e come questo si deve visualizzare. M. Mamei - Tecnologie e Applicazioni Web 4

5 Il Linguaggio HTML Nasce verso il Progettato dal Gruppo di Ricerca di Tim Berners Lee, colui che ha progettato la prima architettura del Web. C era bisogno di un linguaggio per rappresentare in forma aperta (leggibile da tutti i calcolatori e scrivibile senza far ricorso a programmi particolari) gli ipertesti, le loro informazioni di visualizzazione, e le informazioni per il collegamento di ipertesti tra loro, oltre che per la inclusione di immagini in ipertesti. SI fece riferimento allo standard SGML. Si definì HTML come una istanza specifica di HTML: fissando un certo numero di TAG associando a questi TAG uno specifico comportamento del browser, rispetto alla loro visualizzazione e alla navigazione (i.e., click su un link per trasferirsi su un altra pagine). Nel corso degli anni, si sono estese le funzionalità iniziali di HTML con l aggiunta di altri TAG con particolari funzionalità (p.e., tabelle, frames, Applets, etc..) M. Mamei - Tecnologie e Applicazioni Web 5

6 Perché imparare l HTML??? Diversi programmi permettono di editare un documento in modalità WYSIWYG e poi salvarlo in formato HTML. Ad esempio, Word e tutti i programmi di Office permettono di salvare in HTML. Inoltre esistono programmi specifici (Front-page, Dreamweaver) per creare pagine web. Quindi perché imparare l HTML? È anacronistico??? Premesso che per applicazioni veramente professionali è importante saper usare sia programmi avanzati sia l HTML per eventuali ritocchi finali. Per i nostri scopi ci sono due motivazioni principali per imparare l HTML. - Velocità: per creare pagine web semplici e fare piccole modifiche, è più veloce scrivere direttamente l HTML che non utilizzare programmi sofisticati - Copia-e-Incolla: un modo molto veloce per fare pagine web carine è copiarle! Si trova un sito web che vada bene si salva (anche tramite browser) il file HTML corrispondente. Quindi si edita l HTML cambiando titoli e quant altro per ottenere l effetto desiderato M. Mamei - Tecnologie e Applicazioni Web 6

7 Struttura pagina HTML <HTML> <!-- questo e un commento --> <! il tag HTML specifica il lunguaggio con cui e scritto il file, tipicamente HTML generico, ma si puo specificare anche una versione particolare di HTML --> <HEAD> <!-- il tag HEAD deve include specifiche - -> <TITLE> The title of your document goes here. </TITLE> <! TITLE significa che va sulla sbarra della finestra windows --> </HEAD> <BODY> Tutto cio che e compreso tra i tag di body rappresenta il testo del documento. </BODY> </HTML> M. Mamei - Tecnologie e Applicazioni Web 7

8 Il Tag Body Il tag <BODY> stabilsce l aspetto generale del documento. Default (come esempio di prima): testo nero sfondo bianco link in blu link visitati in viola Si possono specificare attributi specifici per il body tag: Esempio: <BODY BGCOLOR="black" TEXT="#30ff3d" LINK="#f89400" ALINK="purple" VLINK="#FF8DDD"> Colori specificati Con notazione RGB Con nomi simbolici NOTA: per quasi tutti i tag HTML si possono specificare attributi che caratterizzano le proprieta di (parti del) documento e del testo M. Mamei - Tecnologie e Applicazioni Web 8

9 Il testo HTML Paragrafi (Intesi come il testo compreso tra due punti e a capo). <p> Testo del paragrafo.</p> <p ALIGN="CENTER">Testo di un paragrafo allineato al centro, i.e., giustificato, Gli altri allineamenti sono center e left</p> Ritorno di Linea: tag <br> Bold (grassetto): il testo che segue <b>va in grassetto</b> fino a qui Italic (corsivo): il testo che segue <i>corsivo</i> fino a qui Underline (grassetto): il testo che segue <u>sottolineato</u> fino a qui FONT Specificano il tipo e il formato del carattere da usare. Molti attributi: SIZE: <FONT SIZE="-2">piccolo</FONT> (cambia rispetto alla dimensione corrente) oppure <FONT SIZE="4"> (dimensione assoluta) FACE: tipo di carattere (se esistente sul sistema) <FONT FACE="Coronet, Times New Roman >Ecco il font Coronet</FONT> in ordine il primo trovato nella lista COLOR M. Mamei - Tecnologie e Applicazioni Web 9

10 Titoli (Headings) Servono per formattare il testo con i titoli dei capitoli e sottocapitoli I vari livello hanno il testo che cala col crescere del livello <h1> Titolo di primo livello </h1> <h2> Titolo di secondo livello </h2>. <h6> Titolo di sesto livello </h6> Si puo ottenere la stessa cosa usando FONT SIZE, ma e piu scomodo. M. Mamei - Tecnologie e Applicazioni Web 10

11 Elenchi puntati e Numerati Per dare rilevanza a liste/insiemi di concetti frasi. Il tag <ul> include i punti di un elenco puntato. Il tag <li> indica i vari punti. Ecco dei punti importanti: <ul> <li>primo punto <li>secondo punto</li> </ul> Che significano che. Ecco dei punti importanti: Primo punto Secondo punto Che significano che Con il tag <ol> invece di <ul> si ottengono elenchi numerati: Ecco dei punti importanti: 1. Primo punto 2. Secondo punto Che significano che Si possono anche innestare tra loro. Linea orizzontale <hr> Inserisce una linea orizzontale nel testo (si puo specificare la lunghezza <HR WIDTH= 50% > M. Mamei - Tecnologie e Applicazioni Web 11

12 LINK (collegamenti ipertestuali) Il tag <A> serve per la strutturazione ipertestuale dei documenti: attributo HREF per indicare un collegamento a un altro punto del documento oppure a un altra pagina HTML, oppure a un indirizzo di mail attributo NAME per dare un nome a un punto del documento a cui ci si vuole collegare One excellent Web directory is <A HREF=" Yahoo links to all sorts of pages such as the <A HREF= " University of Modena home page</a>. Franco attends the University of Modena; you can Franco (<A HREF="mailto:zambo@unimo.it"> zambo@unimo.it </A>). When loaded in a Web browser, the above text will look like this: One excellent Web directory is Yahoo. Yahoo links to all sorts of pages such as the University of Modena home page. Franco attend the University of Modena; you can Franco (franco.zambonelli@unimo.it). M. Mamei - Tecnologie e Applicazioni Web 12

13 LINK (collegamenti ipertestuali) attributo NAME per dare un nome a un punto del documento a cui ci si vuole collegare Questo e il mio documento PIPPO <A NAME= primo > <H1> Primo Capitolo <h1> </A> Bla Bla Bla <H2> Secondo Capitolo </h2> Bla2 Bla2 Bla2 Adesso metto un link <A HREF= #primo > Clicckando qui si torna all inizio del primo capitolo di questo documento</a>. Oppure in un altro documento HTML <A HREF= > Clicckando qui si torna all inizio del primo capitolo di questo documento del documento pippo su zambo.it</a> M. Mamei - Tecnologie e Applicazioni Web 13

14 INSERIMENTO DELLE IMMAGINI E possibile inserire qualsiasi immagine, in qualsiasi punto dello schermo. Le immagini devono essere in formato GIF o in formato JPG. Tag/Attribute Use <IMG> evidenzia un immagine all interno di un documento HTML ALT= specifica testi alternativi che sono mostrati se un immagine non appare SRC= indica un file di immagine da includere (URL) HEIGHT=n specifica l altezza finale di un immagine in pixel WIDTH=n specifica la larghezza finale di un immagine in pixel BORDER=n specifica la larghezza del bordo attorno a un immagine in pixel ALIGN= Specifica allineamenti di immagine come TOP, MIDDLE, BOTTOM, LEFT or RIGHT Esempi: <IMG src= stella.jpg height=300 width=180> <IMG src= > E una immagine puo essere un link: <a href= <IMG src= myckeymouse.jpg > </a> M. Mamei - Tecnologie e Applicazioni Web 14

15 IMMAGINI MAPPA Non solo e possibile avere delle immagini che sono link, ma e possibile definire collegamenti diversi a punti diversi di una immagine. Bisogna definire quali le aree di una immagine su cui si puo clicckare e a cose si collegano questi aree. <img src="pages.gif" width="384" height="245" usemap= #miamappa > <map name="miamappa"> <area shape="circle" coords="186,44,45" href="overview.html"> <area shape="circle" coords="42,171,45" href="style.html> <area shape="circle" coords="186,171,45" href= MyFile.html > <area shape="circle" coords="318,173,45" href="advanced.html"> </map> ALTERNATIVE: <area shape= rect coords= left-x, top-y, right-x, bottom-y> <area shape= circle coords= center-x, center-y, radius > M. Mamei - Tecnologie e Applicazioni Web 15

16 TABELLE Le tabelle sono alla base di tutte le formattazioni di paragrafi. Qualsiasi tipo di allineamento e di struttura grafica/logica della pagina può essere realizzata attraverso l uso appropriato delle tabelle. Le tabelle sono costruite per righe. E possibile inserire un intestazione alla colonna e una intestazione alla tabella stessa. Tag <TABLE> <TR> <TD> <TH> Use Inserisce una tabella dentro un documento HTML Evidenzia una linea dentro la tabella; il comando di chiusura è opzionale Evidenzia una cella (table data) all interno di una riga Evidenzia una cella di intestazione dentro una linea M. Mamei - Tecnologie e Applicazioni Web 16

17 ESEMPIO DI TABELLA <table> <tr><th>eta</th><th>altezza</th></tr> <tr><td>9</td><td>125</td></tr> <tr><td>12</td><td>135</td></tr> <tr><td>16</td><td>159</td></tr> </table> APPARE COSI : Eta Altezza M. Mamei - Tecnologie e Applicazioni Web 17

18 SPANNINGS ROWS AND COLUMNS Spannings si riferisce alla possibilità di estendere una cella su più linee o colonne. Attribute ROWSPAN=n COLSPAN=n Use Usato nei comandi <TH> e <TD> indica quante linee la cella dovrebbe contenere Usato nei comandi <TH> e <TD> indica quante colonne la cella dovrebbe ricoprire AGGIUNGENDO CAPTIONS Un caption è un testo di spiegazione o descrittivo che di solito compare sopra la tabella. TAG/ATTRIBUTE <CAPTION> ALIGN= USE usato dentro una tabella per identificare il testo del table caption colloca il caption all inizio o alla fine della tabella (rispettivamente TOP e BOTTOM) M. Mamei - Tecnologie e Applicazioni Web 18

19 FORMATTAZIONE DELLE TABELLE Una volta che è stata predisposta una tabella, è possibile aggiungere un certo numero di opzioni di formattazione che migliorano il suo aspetto globale. In particolare è possibile utilizzare le seguenti possibilità: 1. aggiungere bordi 2. includere colori di sfondo e immagini 3. aggiustare lo spazio e il margine interno delle celle 4. aggiustare l allineamento delle celle 5. specificare la dimensione delle celle 6. specificare l allineamento delle tabelle M. Mamei - Tecnologie e Applicazioni Web 19

20 BORDI DI TABELLE I bordi delle tabelle si specificano usando un attributo e un numero, misurati in pixel, che comunicano al browser l ampiezza del bordo. Per fare questo bisogna agire sul tag <TABLE> aggiungendo le opzioni di seguito elencate. Attribute BORDER=n BORDERCOLOR= #rrggbb BGCOLOR= BACKGROUND=... Use specifica la larghezza del bordo di una tabella, che è misurato in pixel. A numero elevato corrisponde un bordo più spesso serve a specificare un colore per il bordo della tabella come numero o come nome uso di un colore di sfondo uso di un immagine di sfondo Allineamento delle celle Il contenuto di una cella può essere allineato rispetto al bordo della cella sia orizzontalmente sia verticalmente. Per fare questo è necessario introdurre come attributo del tag <TD> le seguenti opzioni: Attributi Usi ALIGN=n Specifica l allineamento orizzontale del contenuto delle celle, come LEFT, CENTER, o RIGHT VALIGN=n Specifica l allineamento verticale del contenuto delle celle, come TOP, MIDDLE, BOTTOM, o BASELINE M. Mamei - Tecnologie e Applicazioni Web 20

21 Ampiezza delle tabelle e del text wrap Le celle possono essere dimensionate secondo dimensioni volute e si può forzare il browser a non effettuare andate a capo su sezioni di testo indicate. Per fare questo è necessario introdurre come attributo del tag <TD> le seguenti opzioni: Attributi WIDTH= n NOWRAP Usi Specifica l ampiezza delle celle in pixel o come percentuale dell ampiezza della tabella Impedisce la sovrapposizione del testo all interno delle celle cosi richiede che tutto il testo appaia in un unica linea E possibile modificare sia lo spazio tra una cella e l altra sia lo spazio tra la linea che separa le celle e il testo stesso. Le spaziature scelte devono però essere uniformi all interno della stessa tabella. Si agisce sul comando <TABLE> con i seguenti attributi: Attributi CELLSPACING=n CELLPADDING=n Usi Specifica in pixel lo spazio esistente tra le celle Specifica in pixel lo spazio esistente tra il contenuto e il bordo delle celle M. Mamei - Tecnologie e Applicazioni Web 21

22 Allineamento e dimensionamento della tabella La tabella può essere opportunamente dimensionata e opportunamente allineata all interno del documento. Si usano i seguenti attributi del comando <TABLE> Attribute WIDTH=n ALIGN=... Use Indica la dimensione della tabella o in numero di pixel o in percentuale della dimensione della finestra Indica l allineamento della tabella come LEFT, RIGHT, CENTER UN ALTRO ESEMPIO: <TABLE CELLPADDING="5" CELLSPACING="10" BORDER="2" WIDTH="100" HEIGHT="100"> <TR ALIGN ="CENTER"> <TD><STRONG>Item One</STRONG></TD> <TD BGCOLOR="#888fff">Item Two</TD> </TR> <TR BGCOLOR="#ffaaff"> <TD COLSPAN="2">Item Three, plus a description</td> </TR> </TABLE> M. Mamei - Tecnologie e Applicazioni Web 22

23 FRAMES Per gestire riquadri multipli di pagine HTML. In pratica, un sito a frame suddivide lo schermo del browser in piu riquadri, su ognuno dei quali vi sara una pagina HTML. Nella pagina iniziale: <FRAMESET> rimpiazza <BODY> e con essa definisco l insieme di frame nel quale saranno inserite pagine HTML. Attributi: COLS, ROWS, specificano il numero e la dimensione dei frame.la dimenzione puo essere in pixel o in percentuale sulla dimensione totale della pagina. La wildcard (*) indica cio che rimane. Il tag <FRAME> Serve per: attributo SRC: il nome del file HTML che dovrá apparire nel frame attributo NAME: specificare il nome dei vari frame M. Mamei - Tecnologie e Applicazioni Web 23

24 ESEMPIO DI FRAMES Il frameset crea tre colonne, una larga il 20% della pagina, l ultima larga duecento pixel, e quella in mezzo dimensionata di conseguenza. La colonna di sinistra e poi spezzata in due righe, quella alta di altezza 250 pixel, quella bassa dimensionata di conseguenza. <FRAMESET COLS="20%,*,200"> <FRAMESET ROWS="250,*"> <FRAME SRC="a.html" NAME="A"> <FRAME SRC="b.html" NAME="B"> </FRAMESET> <FRAME SRC="c.html" NAME="C"> <FRAME SRC="d.html" NAME="D"> </FRAMESET> M. Mamei - Tecnologie e Applicazioni Web 24

25 NOME E TARGET Il nome (attributo NAME) di un frame puó essere usato per specificare il frame di destinazione di un link: serve l attributo TARGET per il link. Esempio: <A HREF="target.html" TARGET="body">Why don't you click here?</a> In una pagina a frame con un frame che si chiama body facendo click su quel link si fa in modo che la nuova pagina appaia sul frame di nome body. ALTRI ATTRIBUTI PER I FRAME SCROLLING per mettere la sparra di scorrimento. Valori possibili: YES, NO, o AUTO NORESIZE Serve per specificare se a un ridimensionamento della finestra del browser deve seguire un ridimensionamento del frame o meno. Valori possibili: YES o NO. M. Mamei - Tecnologie e Applicazioni Web 25

26 Alcuni Link Interessanti M. Mamei - Tecnologie e Applicazioni Web 26