WORLD WIDE WEB Il World Wide Web (Web, WWW o W3) è un'architettura software utilizzata per fornire l'accesso e la navigazione ad un insieme molto vasto di documenti collegati fra loro e situati su un gran numero di computer. Questo insieme di documenti forma un ipertesto (hypertext), cioè un testo che viene percorso in modo non lineare o sequenziale. In generale, il World Wide Web (“ragnatela attorno al mondo”) è una applicazione progettata all'inizio degli anni novanta che, tramite il linguaggio HTML per la creazione di pagine Internet e il primo browser Mosaic, ha reso Internet facile da utilizzare. Permette di visualizzare contenuti in forma testuale contenenti suoni, immagini fisse e in movimento e collegamenti (link) ad altre pagine. Informatica – Prof. Nicola BRUNO

collegamenti (link o hyperlink) ad altre pagine web; I documenti che costituiscono l'ipertesto gestito dal Web sono detti pagine web, e possono contenere, oltre al normale testo formattato, anche: collegamenti (link o hyperlink) ad altre pagine web; immagini fisse o in movimento; suoni e video; scenari tridimensionali interattivi; codice eseguibile localmente. Informatica – Prof. Nicola BRUNO

L’architettura software del Web è costituita da tre standard: URL (Uniform Resource Locator): sistema di indirizzamento utilizzato per fare riferimento alle risorse esistenti all’interno del Web. HTTP (HyperText Transfer Protocol): protocollo utilizzato per la comunicazione nel Web. HTML (HyperText Markup Language): linguaggio per la realizzazione delle pagine Web. Informatica – Prof. Nicola BRUNO

URL http://www.regione.basilicata.it/dipformazione/index.html Lo standard URL costituisce il riferimento a una qualunque risorsa accessibile nel Web. È costituito da tre parti: metodo di accesso (indica come si vuole accedere alla risorsa); host che detiene la risorsa (indica dove è localizzata fisicamente la risorsa); identità della risorsa (indica come è identificata la risorsa). Esempio tipico di URL: http://www.regione.basilicata.it/dipformazione/index.html http:// metodo di accesso www.regione.basilicata.it nome dell’host dipformazione/index.html identità della risorsa Informatica – Prof. Nicola BRUNO

1) Metodo di accesso Il metodo di accesso indica il modo di accedere alla risorsa, ovvero il tipo di protocollo usato per comunicare con il server che contiene la risorsa. I metodi più comuni sono: HTTP protocollo nativo del Web, FTP file transfer protocol, NEWS protocollo per l'accesso ai gruppi di discussione, MAILTO usato per spedire posta, TELNET protocollo di terminale virtuale, per effettuare login remoti, FILE accesso a documenti locali. Informatica – Prof. Nicola BRUNO

3) Identità della risorsa 2) Nome dell’host Rappresenta l'indirizzo IP numerico o il nome DNS dell’host che contiene la risorsa. 3) Identità della risorsa Contiene l’indicazione del nome di un file e del percorso in cui si trova la risorsa. Ad esempio, la URL http://www.regione.basilicata.it/dipformazione/index.html specifica il file index.html contenuto nella cartella dipformazione, a sua volta contenuta nella cartella radice dell'host www.regione.basilicata.it. Informatica – Prof. Nicola BRUNO

HTTP HTTP è un protocollo ASCII, cioè i messaggi scambiati nel Web sono costituiti da sequenze di caratteri ASCII. In ambito di HTTP, un messaggio rappresenta la richiesta del client oppure la risposta del server, costituita da una informazione di controllo di tipo ASCII. In ambito di URL, invece, la risorsa richiesta non è necessariamente ASCII, ma può essere rappresentata da dati multimediali (immagini, filmati, suoni, codice eseguibile). Informatica – Prof. Nicola BRUNO

HTML (HyperText Markup Language) HTML è stato progettato appositamente per un utilizzo nell'ambito del Web. In generale, un markup language si chiama così perché utilizza particolari comandi, detti tag, per la formattazione del testo. I tag sono inseriti in modo esplicito nel testo, a differenza di quanto avviene in un word processor visuale, di tipo WYSWYG (What You See What You Get), nel quale il testo appare formattato, come effettivamente stampato. Esempio di HTML: ...stile<B>grassetto</B> fine grassetto... indica che la parola grassetto deve essere visualizzata in grassetto (bold). Risultato: …stile grassetto fine grassetto... Il ruolo di HTML è quindi quello di definire il modo in cui deve essere visualizzata una pagina Web (pagina HTML). Una pagina HTML è un documento di tipo testuale, contenente opportuni tag di HTML. Informatica – Prof. Nicola BRUNO

TAG HTML non è un vero e proprio linguaggio di programmazione, ma un sistema di contrassegno, i cui tag vengono riconosciuti ed interpretati dai browser (Netscape, MSIE, Opera, ecc). Questa peculiarità rende HTML un sistema facile da comprendere perché non presuppone alcuna conoscenza tecnica preesistente. Chiunque può avvicinarsi al Web Publishing senza prerequisiti di specializzazione sui concetti fondamentali della programmazione, compilazione, ecc. I tag possono essere divisi in due categorie: tag per la formattazione di testo; tag per altre finalità (inclusione di immagini, interazione con l'utente, elaborazione locale, ecc.). In generale, i tag hanno la forma: <direttiva> ... </direttiva> possono contenere eventualmente dei parametri: <direttiva parametro1="valore"...> ... </direttiva> Esempio: <B> ... </B> Grassetto (Bold) <I> ... </I> Corsivo (Italic) <font color="red">colore rosso</font> Informatica – Prof. Nicola BRUNO

Editor Editor HTML: tipo di software specializzato nella creazione di pagine HTML. Due tipi: 1) Editor testuali. Si tratta di programmi che propongono modifiche dirette sul codice HTML puro, con possibilità di anteprima del risultato. Vantaggio: padronanza del codice HTML puro. Svantaggio: ostico, apprendimento più difficile rispetto agli editor WYSIWYG. 2) Editor WYSWYG. Programmi che non visualizzano il codice HTML, ma esclusivamente gli oggetti, le immagini ed il testo (Front Page). In questo modo lo sviluppatore non si trova a lavorare su codice HTML ma sulla pagina così come verrà visualizzata dal browser: spostando oggetti con il semplice trascinamento del mouse, sfruttando layout predefiniti, ecc. Vantaggio: lo sforzo di comprensione delle specifiche HTML è ridotto al minimo; tempo di apprendimento brevissimo. Svantaggio: non dà la possibilità di comprendere l'HTML e di personalizzarne l'uso. Informatica – Prof. Nicola BRUNO

MARCATURA HTML è un sistema di contrassegno che produce i suoi effetti su testo e immagini. Il termine marcatura deriva dalla seguente caratteristica: gli effetti si producono perché codici specifici vengono assegnati a testo o immagini della pagina HTML. Esempio di un normale testo senza specificazione di nessun tag HTML : Corso di Informatica. Il browser formatta il testo come quello che lo precede, senza nessuna modifica (tipo Times, dimensione 20, colore nero). Supponiamo di voler invece visualizzare il testo con il colore rosso: si marca il testo con lo specifico tag HTML che determina il colore del testo: <font color="red"> Corso di Informatica</font> Il tag <font color="red"> è posto immediatamente prima e dopo la frase da formattare in rosso. L'unica differenza è che il tag prima della frase è <font color="red">, mentre quello che chiude è </font>. Esistono TAG che non hanno bisogno di chiusura, perché la loro funzione non è quella di marcare un elemento, ma di fornire informazioni di diverso tipo (<HR>). Informatica – Prof. Nicola BRUNO

Il codice <font color="red"> … </font> MARCATURA I tag HTML sono case insensitive, cioè sono indipendenti dal maiuscolo e minuscolo. Il codice <font color="red"> … </font> ha gli stessi effetti del codice: <FONT COLOR="RED"> … </font> Per essere visualizzati su Internet, i documenti vengono salvati in formato testo e contengono i tag necessari ad informare il browser sulla visualizzazione. In generale, un documento contenente testo, salvato in formato .htm senza alcun tag HTML viene comunque visualizzato dal browser, ma privo di qualsiasi formattazione: senza ritorni a capo, paragrafi, testo centrato, grassetto, corsivo ecc. Lo scopo di HTML è quello di fornire, attraverso i comandi TAG, una formattazione al documento, oltre all'inserimento di immagini ed altri elementi multimediali. Il lavoro che uno sviluppatore Web effettua all'interno di un documento HTML consiste nel fornire tutte le informazioni e i codici necessari al browser per interpretare e quindi visualizzare opportunamente la pagina. Informatica – Prof. Nicola BRUNO

Una pagina HTML ha la seguente struttura: <HTML> <HEAD>   Una pagina HTML ha la seguente struttura: <HTML> <HEAD> ... <TITLE>...</TITLE> </HEAD > <BODY> </BODY> </HTML> Informatica – Prof. Nicola BRUNO

Inizio e fine del documento. HTML Inizio e fine del documento. Tutti gli elementi ed il contenuto di un documento HTML sono compresi all'interno dei marcatori <HTML> e </HTML>, che hanno il compito di aprire e chiudere il file. I tag <HTML></HTML> indicano al browser che il documento è marcato in HTML. Informatica – Prof. Nicola BRUNO

Questa parte non viene visualizzata. HEAD Questa parte non viene visualizzata. Contiene metainformazioni sul documento (creatore, data, titolo, ecc.). Gli elementi <HEAD></HEAD> sono posti immediatamente dopo l'apertura del tag <HTML> e racchiudono l'intestazione vera e propria del documento. Questa parte contiene tutte le informazioni necessarie al browser ed ai motori di ricerca. È il primo elemento letto dal browser. All’interno di <HEAD></HEAD> va inserito il titolo del documento e altre informazioni. Informatica – Prof. Nicola BRUNO

Sintassi per il tag TITLE: <TITLE>ADAFOR SRL</TITLE> L'elemento <TITLE></TITLE> è il più utilizzato all'interno del tag <HEAD>, in quanto fornisce il titolo del documento. Il titolo viene visualizzato dal browser nell'intestazione di pagina. Sintassi per il tag TITLE: <TITLE>ADAFOR SRL</TITLE> Informatica – Prof. Nicola BRUNO

BODY Il suo contenuto viene visualizzato nella finestra. L'elemento <BODY> è posto in posizione immediatamente successiva alla chiusura del tag </HEAD> e comunque all'interno degli elementi <HTML></HTML>. Ha un tag di apertura e uno di chiusura, ed all'interno di esso si sviluppa il corpo del documento. A differenza del tag <HEAD>, che contiene metadati (non materialmente visualizzati dal browser), la funzione del tag <BODY> è quella di mostrare gli oggetti della pagina (testo, immagini, suoni, ecc). La sintassi è: <BODY> Contenuto del documento </BODY> Informatica – Prof. Nicola BRUNO

BODY È utilizzato anche per impostare vari attributi di visualizzazione per il documento. BGCOLOR imposta un colore unitario di sfondo. Sintassi: <BODY BGCOLOR="red"> È possibile sostituire valori esadecimali al nome in inglese: <BODY BGCOLOR="#ff0000"> L'utilità dei colori esadecimali si ha quando non si vuole un colore standard ma sfumato o con diversa tonalità. BACKGROUND ha una funzione simile a BGCOLOR, ma mentre il secondo mostra un tinta unica del colore, il primo visualizza sullo sfondo un'immagine in formato grafico .gif o .jpg. Esempio: realizzazione di uno sfondo con l'immagine di nome sfondo.gif: <BODY BACKGROUND="sfondo.gif"> Il browser visualizza l'immagine sfondo.gif e la ripete su ogni punto dello schermo disponibile. Non si limita a visualizzare l'immagine una sola volta, ma riempie ogni spazio disponibile. Informatica – Prof. Nicola BRUNO

BODY 3. BGPROPERTIES Mediante l'attributo BACKGROUND, è possibile inserire una immagine come sfondo. Se la pagina è tanto lunga da attivare la barra di scorrimento (scroller) laterale, lo sfondo e l'immagine associata scorrono insieme alla pagina. Grazie alla proprietà BGPROPERTIES è possibile rendere lo sfondo immobile rispetto allo scroller di pagina. Sintassi: <BODY BACKGROUND="sfondo.gif" BGPROPERTIES="fixed"> Questa proprietà funziona solo con MSIE e non con Netscape che invece continua ad effettuare lo scrolling della pagina. Informatica – Prof. Nicola BRUNO

TAG PER LA FORMATTAZIONE Esempi di tag per la formattazione del testo: <B>, <I>, <U> sono tre dei più usati tag di formattazione. Tutti vanno aperti e successivamente richiusi: <B> Testo grassetto </B> Il testo compreso tra questi tag è trasformato in grassetto (la B sta per BOLD). <I> Testo corsivo </I> Il testo compreso tra questi tag è formattato in corsivo (la I sta per ITALIC) <U> Testo sottolineato </U> Il testo compreso tra questi tag è sottolineato pur non essendo un link (la U sta per UNDERLINE). Informatica – Prof. Nicola BRUNO