docIl Web Cos`è il Web - Politecnico di Torino
download 
Reclamo Transcript
Il Web Cos`è il Web - Politecnico di Torino
Il Web Cos’è il Web • • • • Un concetto Un insieme di protocolli Una raccolta di software L’universo dell’informazione on-line 1 Ma prima... un po’ di storia • 1980: Un consulente del CERN, Tim Berners-Lee, scrive un programma per collegare tra loro documenti con link ipertestuali • 1989: TBL fa circolare in CERN un documento sull’Information Management attraverso ipertesti; il documento è ignorato • 1990: nuova proposta del documento. Il progetto è battezzato “World Wide Web” anziché “Information Mine” o “Information Mesh” Storia del Web (2) • 1991 : CERN rilascia un primo browser testuale per VAX, rs6000 e Sun4, con accesso a files e news • 1991 : nascono le prime mailing list e Usenet newsgroup con argomento il WWW • 1992 : diffusi i primi esempi di browser grafici per Xwindows: Erwise, Viola e Midas • 1993 : Marc Andreessen di NCSA sviluppa e rilascia Mosaic per Xwindow e poi per PC e Mac 2 Storia del Web (3) • 1993 : il traffico Web è l’1% del traffico Internet. New York Times, The Guardian e The Economist pubblicano brevi articoli sul WWW • 1994 : Andreessen e alcuni colleghi lasciano NCSA e fondano la “Mosaic Communications Corp.”, ora “Netscape Communications” • 1994 : ragioni di budget obbligano il CERN a lasciare lo sviluppo del WWW ad INRIA (Francia) Storia del Web (4) • 1995 : Netscape batte, in diffusione, l’ormai obsoleto Mosaic • 1995 : Microsoft inizia la distribuzione di Internet Explorer. Nasce la “guerra dei browser” • 1995 : Netscape include la tecnologia JAVA nel suo browser, su licenza di Sun 3 Le idee-guida del Web • • • • • Leggibilità universale Informazione in formato ipertestuale Indicizzazione e Ricerca dell’informazione Modello client-server distribuito Negoziazione dei formati e flessibilità verso estensioni del linguaggio Elementi del linguaggio HTML 4 Alcune sigle • WWW t World Wide Web • SGML t Standard Generalized Markup Language • URL t Uniform Resource Locator • HTML t Hyper Text Markup Language Perché conoscere HTML • Oggi esistono strumenti che permettono di “comporre” una pagina HTML (FrontPage, Netscape Composer, PageMill, i filtri HTML di MS Office...) • Tuttavia, è consigliabile una conoscenza “minima” dei formati HTML per poter intervenire di persona quando il risultato non sia quello voluto 5 Il Linguaggio HTML • Il linguaggio HTML è composto da un insieme di elementi che definiscono un documento e ne regolano la visualizzazione su appositi ‘interpreti di HTML’ • “Interpreti di HTML” sono le applicazioni, o browser, quali Netscape Navigator e Communicator, Microsoft Explorer, Mosaic... Gli Ipertesti ed i link • I documenti realizzati attraverso HTML hanno l’aspetto di ipertesti • Ipertesto: modo di preparare e pubblicare documenti che consentano al lettore di seguire il proprio percorso attraverso una serie di informazioni • Un ipertesto è composto da nodi e collegamenti (link) 6 Struttura di un elemento HTML <etichetta> testo </etichetta> oppure <etichetta attributo=argomento> testo </etichetta> • L’etichetta (o tag) indica quale formattazione assumerà il testo • Essendo HTML un linguaggio di formattazione, non è necessario preoccuparsi dei ritorni a capo • Gli elementi HTML sono case unsensitive Struttura di un documento HTML • Un documento HTML è composto da elementi strutturati in un’intestazione (head) e da un corpo (body) • Il documento è delimitato da <html> </html> • L’intestazione è delimitata da <head> </head> • Il corpo è delimitato da <body> </body> 7 Elementi in Head • L’Header può contenere il seguente elemento: <title>... </title> : il titolo del documento; nel browser appare solitamente sulla barra della finestra t Non confondere <title> con quello che è, nel senso comune, il ‘titolo’ di un testo (solitamente posto in cima alla pagina scritta) t Bla Bla <title> sdfdflsjf sdjfskd sdfskj sdfklsd dsfdlklskf lsdf sdfjsdlfksdlfsd Elementi in Head • <base HREF=“...”> usato per impostare la URL di riferimento e risolvere URL relativi (non ha tag di chiusura) • <meta ...> contenitore per informazioni accessorie sul documento (no tag di chiusura) 8 Il Body • Attributi di body: t t t t t t bgcolor=“#RGBcode” colore sfondo pagina background=“nomefile” immagine da usare come sfondo della pagina text=“#RGBcode” colore testo della pagina link=“#RGBcode” colore collegamento ipertestuale alink=“#RGBcode” colore collegamento ipertestuale attivo (click del mouse) vlink=“#RGBcode” colore collegamento ipertestuale visitato Il Body • Nota: i colori definiti nel body possono essere ridefiniti dalle impostazioni del singolo browser 9 Il Body - Elementi di testo • <p> Fine paragrafo. Va a capo e salta una riga • <br> Impone un ritorno a capo, ma non salta una riga • <pre>...</pre> Identifica una parte di testo preformattato, da visualizzarsi così com’è. • <blockquote>...</blockquote> indenta una porzione di testo, ma non conserva una precedente formattazione. • <pre> riconosce eventuali elementi HTML al suo interno: perché ciò non accada usare <xmp> Gruppo Reti - Politecnico di Torino Il Body - Headers • Gli ‘Headers’ sono i veri e propri titoli (a differenza di <title>) e sono disponibili in 6 livelli: <h1> Titolo </h1> Titolo <h2> Titolo </h2> Titolo <h3> <h4> <h5> <h6> Titolo Titolo Titolo Titolo </h3> </h4> </h5> </h6> Titolo Titolo Titolo Titolo 10 Il Body - Stili logici e stili fisici • Stili logici: <em>...</em> per dare enfasi al testo t <strong>...<strong> per dare maggior enfasi t • Stili fisici: <i> stile italics t <b> stile boldface t <tt> stile typewriter t Formattazione di carattere • Può essere eseguita con l’etichetta <font> ed i suoi attributi size - color - face t t t size specifica la dimensione del carattere in valore numerico assoluto o come differenza rispetto al font di default color indica le componenti RGB del colore prescelto, in formato esadecimale face imposta un tipo di font (es. Arial), che verrà usato solo se presente sulla macchina di chi consulta la pagina 11 Liste non ordinate • Le liste di elementi non ordinate si possono realizzare con: <ul> ... </ul> • Ogni elemento della lista viene introdotto da: <li> • E’ possibile specificare l’attributo type con il quale cambiare la forma dei ‘bullets’: <ul type=...> e le scelte possibili sono: disc - circle - square Liste ordinate • Se si vuole assegnare una preferenza o un ordine agli elementi di una lista, si usa: <ol>...</ol> • Ogni elemento viene sempre introdotto da <li> • E’ possibile specificare il tipo di numerazione da adottare con <ol type=...> • le scelte sono: ‘A‘, ‘a‘, ‘I‘, ‘i‘, e ‘1‘ (default). Con l’attributo <...start=...> è possibile specificare il valore con cui iniziare il conto. 12 Definition Lists • Per creare elenchi di definizioni, si usano le seguenti etichette: <dl> <dt> Primo termine da definire <dd> Definizione del primo termine <dt> Secondo termine da definire <dd> Definizione del secondo termine </dl> Entità • &parola-chiave; serve a visualizzare caratteri particolari, quali lettere accentate o caratteri di alfabeti stranieri • Esempio: t t è ç ` &ccedi; • Analogamente, il carattere può essere specificato dal suo equivalente ASCII con: &#numero; • Esempio: t @ @ 13 Link a parti del documento • Occorre ‘segnare’ il punto di destinazione con: <a name=“destinazione”> ... </a> • Dopo che è stata definita la destinazione, si può ‘linkarla’ con: <a href=“#destinazione”> ... </a> • Tutto ciò che è compreso tra <a href...> e </a> viene evidenziato dal browser usato Link ad altri files • In questo caso non occorre ‘segnare’ la destinazione • Il link ad un altro file si può realizzare indicandone il nome e (eventualmente) il percorso <a href=“file”> ...</a> • Tutto ciò che è compreso tra <a href...> e </a> viene evidenziato dal browser usato 14 Link a parti di altri files • Per linkare parti di altri files, si combinano le due tecniche viste in precendenza • Dopo aver segnato la destinazione con <a name=“destinazione”...>, la si può linkare con: <a href=“file#destinazione”>...</a> Inclusione di immagini (1) • Si possono includere immagini .gif e .jpg in un documento HTML, decidendo come disporre il testo attorno all’immagine • Per includere un immagine: <img src=“filename”> • Con l’attributo ALT si può indicare un testo da accompagnare all’immagine, che verrà visualizzato quando il mouse si trova sopra di essa all’interno del browser 15 Inclusione di immagini (2) • altri attributi di img: border=“...” spessore del bordo (spesso antiestetico) t align=“...” specifica come distribuire il testo attorno all’immagine, con argomento: t • left, right : l’immagine si allinea al margine sinistro (destro) e il testo di distribuisce alla sua destra (sinistra) • top, middle, bottom: l’immagine si allinea a sinistra, e il testo si posiziona a destra in alto (in mezzo; in basso) Inclusione di immagini (3) width=... height=... permettono di calcolare le dimensioni dell’immagine prima di caricarla (velocizza formattazione di pagina) t vspace=... hspace=... indicano a quale distanza in verticale (o in orizzontale) deve mantenersi il testo dall’immagine. t • Aggiungendo a <br> l’attributo clear=left (right) si indica che, dopo un’interruzione di linea, il testo deve riprendere appena a sinistra (destra) è terminata l’immagine 16
