Laboratorio di reti I: HTTP e HTML

Stefano Brocchi brocchi@dsi.uni.it

9 novembre, 2009

Stefano Brocchi

Laboratorio di reti I: HTTP e HTML

9 novembre, 2009

1 / 44

Il protocollo HTTP

Il protocollo HTTP

Il protocollo HTTP (HyperText Tranfer Protocol) viene utilizzato in internet per richiedere e trasmettere informazioni Utilizzato sia per le pagine web che per il trasferimento di le generici Il protocollo ` stateless, la connessione viene cio` interrotta appena la e e richiesta viene soddisfatta
Questo ` utile per poter mantenere il numero di connessioni aperte e minimale Daltra parte questo non permette di associare automaticamente pi` u richieste fatte dallo stesso client; questo rende necessario lutilizzo di altri mezzi come luso di cookie o di sessioni

Stefano Brocchi

Laboratorio di reti I: HTTP e HTML

9 novembre, 2009

2 / 44

Il protocollo HTTP

Richieste HTTP

Una richiesta HTTP pu` avvenire tramite vari metodi. I principali o sono GET, HEAD e PUT Il metodo GET richiede una risorsa sullhost remoto; pu` utilizzare o una serie di parametri che vanno a far parte dellURL I parametri saranno specicati nellURL dopo il nome del le tramite la sintassi ?nomeParametro=valore&nomeParametro2 =valore2 &...
Es. http://www.google.it/search?q=test&num=15 specica che nella richiesta ci sar` un parametro q di valore test ed un parametro num di a valore 15

Stefano Brocchi

Laboratorio di reti I: HTTP e HTML

9 novembre, 2009

3 / 44

Il protocollo HTTP

Richieste HTTP

Il metodo HEAD funziona in modo del tutto simile a GET ma richiede solo lintestazione HTML della pagina richiesta e non il suo contenuto. Pu` essere utile per vedere per esempio se una pagina ` o e stata cambiata rispetto alla copia locale in cache Il metodo POST funziona in modo simile al metodo GET ma invece di inserire i parametri nellURL li mette nel corpo nella richiesta HTTP

Stefano Brocchi

Laboratorio di reti I: HTTP e HTML

9 novembre, 2009

4 / 44

Il protocollo HTTP

Richieste HTTP

Gli altri metodo di richiesta HTTP sono meno utilizzati e sono OPTIONS, PUT, DELETE, TRACE e CONNECT La prima riga della richiesta HTTP comprende il nome del metodo utilizzato, lURL richiesta e la versione del protocollo Grazie ad altri campi ` possibile specicare varie altre informazioni e come le seguenti
Il programma dal quale ` stata generata la richiesta e I formati della risposta accettati I tipi di codica supportati

Stefano Brocchi

Laboratorio di reti I: HTTP e HTML

9 novembre, 2009

5 / 44

Il protocollo HTTP

Esempio di richiesta HTTP

Vediamo un esempio di pacchetto di richiesta HTTP: GET /dir/file.html HTTP/1.1 Host: 127.0.0.1 User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.0; it; rv:1.8.1.7) Gecko/20070 914 Firefox/2.0.0.7 Accept: text/xml,application/xml,application/xhtml+xml, text/html;q=0.9,text/plain;q=0.8,image/png,*/*;q=0.5 Accept-Language: it-it,it;q=0.8,en-us;q=0.5,en;q=0.3 Accept-Encoding: gzip,deflate Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7 Keep-Alive: 300 Connection: keep-alive

Stefano Brocchi

Laboratorio di reti I: HTTP e HTML

9 novembre, 2009

6 / 44

Il protocollo HTTP

Risposta HTTP
Il server dopo aver ricevuto una richiesta mander` al client come a risposta unintestazione HTTP seguita dal contenuto dellURL richiesta La prima linea dellintestazione conterr` il codice di risposta che a indica se la richiesta pu` essere soddisfatta. I codici si possono o raggruppare in 5 tipi:
1xx Per codici di tipo informativo 2xx Per richieste andate a buon ne 3xx Per redirezioni: la pagina ` disponibile ma ad unURL diversa da quella e richiesta 4xx Per quando la risorsa non ` disponibile a causa di una richiesta errata e 5xx Per quando la risorsa non ` raggiungibile a causa di un errore del server e o di unincompatibilit` del protocollo a

Stefano Brocchi

Laboratorio di reti I: HTTP e HTML

9 novembre, 2009

7 / 44

Il protocollo HTTP

Risposta HTTP

Nella risposta HTTP viene inoltre specicato nel campo Content-type il tipo di contenuto della risposta; per pagine HTML il tipo sar` text/html seguito dalla codica dei caratteri utilizzata a Altre informazioni contenute nella risposta possono comprendere informazioni sul server, sulla gestione della cache o sul contenuto della pagina

Stefano Brocchi

Laboratorio di reti I: HTTP e HTML

9 novembre, 2009

8 / 44

Il protocollo HTTP

Esempio di risposta HTTP

Vediamo un esempio di intestazione di risposta HTTP: HTTP/1.0 200 OK Date: Mon, 28 Jun 2004 10:47:31 GMT Server: Apache/1.3.29 (Unix) PHP/4.3.4 X-Powered-By: PHP/4.3.4 Vary: Accept-Encoding,Cookie Cache-Control: private, s-maxage=0, max-age=0, must-revalidate Content-Language: it Content-Type: text/html; charset=utf-8 Age: 7673 X-Cache: HIT from 127.0.0.1 Connection: close Se la risposta va a buon ne a seguire troviamo il contenuto richiesto
Stefano Brocchi Laboratorio di reti I: HTTP e HTML 9 novembre, 2009 9 / 44

Il linguaggio HTML

Il linguaggio HTML

Stefano Brocchi

Laboratorio di reti I: HTTP e HTML

9 novembre, 2009

10 / 44

Il linguaggio HTML

Il linguaggio HTML

Il linguaggio HTML (HyperText Markup Language) ` il linguaggio e utilizzato per denire le pagine web La principale funzione che contraddistingue lHTML (o un generico ipertesto) ` quella di poter saltare da un punto allaltro del testo in e modo non lineare
Questo ` quello che succede quando clicchiamo su di un qualsiasi link e in una pagina HTML

Esistono comunque numerose altre funzionalit` dellHTML, come la a possibilit` di inserire immagini o altri oggetti nella pagina a

Stefano Brocchi

Laboratorio di reti I: HTTP e HTML

9 novembre, 2009

11 / 44

Il linguaggio HTML

Tag HTML

E un linguaggio a tag; un tag di apertura ` una stringa della forma e <nometag > ed uno di chiusura ha invece la forma </nometag > Ad ogni tag di apertura deve corrispondere un tag di chiusura; tale tag pu` talvolta essere per` implicito o o Si pu` utilizzare la notazione <nometag / > come forma abbreviata di o <nometag > < /nometag > Un documento HTML ` formato da una serie di tag di apertura e e chiusura annidati correttamente contenenti il testo della pagina

Stefano Brocchi

Laboratorio di reti I: HTTP e HTML

9 novembre, 2009

12 / 44

Il linguaggio HTML

Tag HTML necessari

I quattro tag che devono essere presenti in ogni documento HTML sono <html>, <head>, <title> e <body> Il tag <html> contiene lintera pagina rappresentata Il tag <head> contiene le informazioni che rappresentano unintestazione della pagina Il tag <title> deve essere contenuto nel tag <head> e contiene il titolo della pagina Il tag <body> deve iniziare dopo la chiusura di <head> e contiene il corpo della pagina

Stefano Brocchi

Laboratorio di reti I: HTTP e HTML

9 novembre, 2009

13 / 44

Il linguaggio HTML

Pagina Hello World

Vediamo di seguito una semplice pagina in HTML: <html> <head> <title> Pagina di prova </title> </head> <body> Hello world ! </body> </html>

Stefano Brocchi

Laboratorio di reti I: HTTP e HTML

9 novembre, 2009

14 / 44

Il linguaggio HTML

Attributi dei tag

I tag possono contenere degli attributi che specicano informazioni su come vada elaborato il suo contenuto La sintassi di un tag con attributi ` <nometag attributo1 = valore, e attributo2 = valore2 ...>
Per esempio tramite lattributo bgcolor di body si pu` specicare il o colore di fondo di una pagina; specicando <body bgcolor=#FFFFAA> si otterr` uno sfondo giallo a

Stefano Brocchi

Laboratorio di reti I: HTTP e HTML

9 novembre, 2009

15 / 44

Il linguaggio HTML

Parametri di risposta HTTP

Si possono specicare i valori dei parametri della risposta HTTP in una pagina web tramite il tag <meta> da specicare allinterno del tag <head> E necessario specicare lattributo http-equiv specicante il nome del parametro e lattributo content che ne indica il valore Particolarmente importante ` lindicare il tipo di dato restituito dal e server, cio` testo html di un determinato set di caratteri. Questo si e pu` realizzare con un tag come la seguente: o <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

Stefano Brocchi

Laboratorio di reti I: HTTP e HTML

9 novembre, 2009

16 / 44

Il linguaggio HTML

Visualizzazione di pagine web

Esistono numerosi tag da utilizzare per dare alla pagina laspetto desiderato; il browser utilizzato per aprire la pagina si occuper` di a visualizzarne correttamente il contenuto Anche il testo contenuto nei tag verr` formattato automaticamente a dal browser Purtroppo sebbene esista una specica di come lHTML debba venire visualizzato, questa non ` seguita rigidamente da molti browser e
Nel creare pagine web eettuare sempre del testing con vari browser

Esistono molti editor graci per creare pagine web. E comunque importante capire i meccanismi e la sintassi del linguaggio utilizzato

Stefano Brocchi

Laboratorio di reti I: HTTP e HTML

9 novembre, 2009

17 / 44

Il linguaggio HTML

Alcuni tag HTML per laspetto del testo

Tag sici e tag logici

I tag per laspetto della pagina si possono suddividere in tag sico e tag logici I tag sici specicano direttamente come deve apparire il testo I tag logici specicano leetto che vogliamo realizzare; non sono legati ad un aspetto graco sso, ed il risultato della visualizzazione di un tag logico verr` denito altrove a
Consideriamo i due tag <b>, per il testo in neretto (bold), e <strong>, per specicare una porzione di testo che deve apparire in modo forte. Di default realizzano esattamente lo stesso eetto, ma mentre un testo nel tag <b> sar` sempre in neretto quello nel tag a <strong> potr` essere visualizzato diversamente se specichiamo un a diverso signicato per questo tag

Per garantire una certa coerenza nella visualizzazione, ` bene usare o e solo tag sici o solo tag logici
Stefano Brocchi Laboratorio di reti I: HTTP e HTML 9 novembre, 2009 18 / 44

Il linguaggio HTML

Alcuni tag HTML per laspetto del testo

Alcuni tag sici

Vediamo alcuni semplici tag sici:
<b> <i> <big> <small> <u> Testo Testo Testo Testo Testo in neretto in corsivo pi` grande u pi` piccolo u sottolineato

Il tag <font> imposta il testo di un determinato carattere, colore e dimensione specicati tramite i suoi attributi
face Imposta il carattere del testo (es. <font face=Courier>) size Specica la dimensine del teso, anche relativamente a quella in uso (es. <font size=5> o <font size=+2> color Indica il colore del testo; come per colori in altri tag il colore pu` essere o specicato tramite alcune stringhe note (es. color=green) o tramite tre coppie di cifre esadecimali rappresentanti i tre colori primari (es. color=#FF0000)
Stefano Brocchi Laboratorio di reti I: HTTP e HTML 9 novembre, 2009 19 / 44

Il linguaggio HTML

Alcuni tag HTML per laspetto del testo

Alcuni tag logici

Vediamo alcuni semplici tag logici:

<em> <strong> <q> <code> Testo da enfatizzare Testo pi` forte u Testo rappresentante una quotazione Testo rappresentante del codice (di solito utilizzati caratteri equispaziati come questo carattere)

I tag <h1-6 > rappresentano un determinato livello di intestazione; il tag <h1> solitamente visualizzer` il testo pi` grande ed in risalto ed i a u tag da <h2> ad <h6> genereranno testo via via pi` piccolo u

Stefano Brocchi

Laboratorio di reti I: HTTP e HTML

9 novembre, 2009

20 / 44

Il linguaggio HTML

Alcuni tag HTML per laspetto del testo

Vari tag utili

Altri tag utili:

<br> Tag che specica linizio di una nuova riga (un a capo); non richiede tag di chiusura <! > Tag rappresentante un commento ( sono due trattini). Tutto quanto viene scritto al suo interno viene ignorato dal browser. Un esempio: <! testo di commento > <p> Tag che indica linizio e la ne di un paragrafo. Tramite lattributo align ` possibile specicarne lallineamento (i valori possibili sono e center, left e right). <pre> Tag per specicare del testo pre formattato, cio` che non verr` e a formattato dal browser ma sar` visualizzato cos` come ` nel le HTML. a e Utile per esempio per visualizzare del codice

Stefano Brocchi

Laboratorio di reti I: HTTP e HTML

9 novembre, 2009

21 / 44

Il linguaggio HTML

Tag HTML per collegamenti ed immagini

Uso di collegamenti
Per i collegamenti (link) in HTML viene utilizzato il tag <a>. Il contenuto del tag rappresenter` il testo sul quale, cliccando, a verremo rediretti alla nuova destinazione La pagina di destinazione viene specicata tramite lattributo href Quando il mouse viene posizionato sopra il link alcuni browser visualizzano un messaggio che descrive la destinazione; questo ` e personalizzabile tramite lattributo title
Un esempio: Per il sito delluniversita di Firenze cliccare <a href="http://www.unifi.it" title="Sito delluniversita"> qui </a>

Se lURL indicata in href inizia con la specica del protocollo (es. http://) questa viene considerata assoluta; altrimenti viene trattata come unURL relativa che verr` concatenata con lURL della pagina a corrente per determinarne la destinazione
Stefano Brocchi Laboratorio di reti I: HTTP e HTML 9 novembre, 2009 22 / 44

Il linguaggio HTML

Tag HTML per collegamenti ed immagini

Uso di immagini
Le immagini possono essere visualizzate in un documento html tramite il tag <img> Quando il browser incontra un tag <img> con un riferimento ad unimmagine, provvede a scaricare limmagine e a visualizzarla dove indicato Attributi del tag <img>:
src Indica il percorso assoluto o relativo dellimmagine in questione alt Indica una stringa che descrive limmagine. Questa verr` visualizzata al a posto dellimmagine se questa non ` stata ancora caricata e width Specica la larghezza dellimmagine; se non corrisponde alla larghezza originale, limmagine verr` ridimensionata a height Per impostare laltezza dellimmagine. Come sopra, pu` causare il suo o ridimensionamento

Il tag <img> non richiede tag di chiusura Inserendo unimmagine allinterno di un tag <a> si pu` utilizzare o limmagine come un collegamento ad unaltra pagina
Stefano Brocchi Laboratorio di reti I: HTTP e HTML 9 novembre, 2009 23 / 44

Il linguaggio HTML

Uso di form per linvio di parametri in GET o in POST

Inserimento di dati da utente tramite form

E possibile specicare in HTML meccanismi per inviare dati in GET o POST ad una determinata pagina. Questo si realizza tramite il tag <form> I suoi principali attributi sono action, specicante lURL di destinazione, e method, che indica se il metodo di richiesta ` GET o e POST Per specicare il valore dei parametri da inviare e dare la possibilit` a allutente di inserirli dentro il tag <form> devono essere inseriti una serie di tag <input>

Stefano Brocchi

Laboratorio di reti I: HTTP e HTML

9 novembre, 2009

24 / 44

Il linguaggio HTML

Uso di form per linvio di parametri in GET o in POST

Inserimento di dati da utente: tag input

Ogni tag <input> pu` specicare nei due attributi name e value il o nome ed il valore del parametro da passare Lattributo <type> indica come viene ottenuto il parametro da inviare:
input Indicher` al browser di creare una casella di testo nella pagina, il cui a contenuto verr` inviato come valore del parametro a password Ha lo stesso eetto di input con lunica dierenza che nella casella di testo verranno visualizzati degli asterischi invece del testo inserito dallutente checkbox Crea una casella selezionabile. Il parametro ed il valore specicati saranno inviati solo se lutente seleziona questa casella radio Simile a checkbox ma solitamente utilizzato quando si vuole imporre la scelta di ununica casella fra pi` opzioni possibili u

Stefano Brocchi

Laboratorio di reti I: HTTP e HTML

9 novembre, 2009

25 / 44

Il linguaggio HTML

Uso di form per linvio di parametri in GET o in POST

Inserimento di dati da utente: tag input

Altri valori per lattributo <type>:

hidden Specica unattributo che verr` inviato comunque con un determinato a valore submit Crea un pulsante che, quando premuto, invier` i dati alla pagina a destinazione. Sul pulsante verr` visualizzato il contenuto dellattributo a value reset Crea un pulsante che, quando premuto, azzerer` tutti i valori del form a

A seconda del tipo di input specicato, pu` essere necessario o utilizzare anche altri attributi, ad esempio size per determinare la dimensione dellelemento visualizzato, checked per specicare che un checkbox o un radio button sono, di default, selezionati o readonly per specicare che un campo non pu` essere modicato. o

Stefano Brocchi

Laboratorio di reti I: HTTP e HTML

9 novembre, 2009

26 / 44

Il linguaggio HTML

Sequenze di escape

Caratteri di escape

Per rappresentare alcuni caratteri speciali lHTML utilizza dei caratteri di escape nel formato &codice; alcuni sono i seguenti:
&lt; &gt; &nbsp; &aacute; Per il simbolo < (less than) Per il simbolo > (greater than) Per uno spazio (non breaking space) Per il carattere `; esistono analogamente &eacute; &iacute; &oacute; a ed &uacute; &agrave; Per il carattere ; esistono analogamente &egrave; &igrave; &ograve; a ed &ugrave; &quot; Per il carattere &amp; Per il carattere &

Stefano Brocchi

Laboratorio di reti I: HTTP e HTML

9 novembre, 2009

27 / 44

Il linguaggio HTML

Tag HTML per liste e tabelle

Elencazioni
Per creare delle elencazioni ` possibile utilizzare i tag <ol> ed <ul> e rappresentanti, rispettivamente, liste ordinate e non ordinate Ogni elemento della lista deve essere contenuto in un tag <li> Il tag <li> permette una chiusura implicita; se </li> non viene specicato, il codice viene interpretato come se fosse prima dellinizio del successivo tag <li> o del tag di ne lista Un esempio di lista ordinata: <ol> <li> Primo elemento <li> Secondo elemento <li> Terzo elemento </ol>

Stefano Brocchi

Laboratorio di reti I: HTTP e HTML

9 novembre, 2009

28 / 44

Il linguaggio HTML

Tag HTML per liste e tabelle

Elenchi di denizioni
In modo simile alle elencazioni, ` possibile creare un elenco di e denizioni tramite il tag <dl> Allinterno di <dl> dobbiamo inserire una serie di tag <dt>, usati per i termini di denizione, e di tag <dd>, utilizzati per le denizioni stesse I tag <dd> e <dl> possono essere chiusi implicitamente in modo del tutto simile ai tag <li> Un esempio di elenco di denizioni: <dl> <dt> A <dd> Definizione di A <dt> B <dd> Definizione di B <dt> C <dd> Definizione di C </dl>
Stefano Brocchi Laboratorio di reti I: HTTP e HTML 9 novembre, 2009 29 / 44

Il linguaggio HTML

Tag HTML per liste e tabelle

Tabelle

Una tabella pu` venir creata tramite il tag <table> o Il tag table supporta diversi attributi per denire le caratteristiche della tabella:
width Per specicare la larghezza della tabella; esprimibile in punti (es. <table width=700>) o in una percentuale relativa alla larghezza delloggetto che la contiene (es. <table width=80%>) border Per impostare lo spessore dei bordi della tabella, in pixel cellspacing Per specicare, in pixel, la spaziatura tra le caselle della tabella bgcolor Per imporre il colore di fondo della tabella

Stefano Brocchi

Laboratorio di reti I: HTTP e HTML

9 novembre, 2009

30 / 44

Il linguaggio HTML

Tag HTML per liste e tabelle

Tabelle

Una riga della tabella ` delimitata dal tag <tr>; e Fra i suoi attributi ci sono width e height, che permettono di specifcare la larghezza e laltezza della riga, o in punti o con una percentuale relativa alla dimensione della tabella Il tag <tr> ammette chiusura implicita

Stefano Brocchi

Laboratorio di reti I: HTTP e HTML

9 novembre, 2009

31 / 44

Il linguaggio HTML

Tag HTML per liste e tabelle

Tabelle

Una cella di una tabella pu` venir specicata tramite il tag <td> o Se non diversamente specicato, tutte le celle di una colonna avranno uguale larghezza denita dalla cella che contiene il testo pi` lungo u Attributi di <dt>:
rowspan Specica che la cella si estender` per un numero specicato di righe a (es. <td colspan = 2>) colspan Specica che la cella si estender` per un numero specicato di colonne a (es. <td colspan = 3>) align Per specicare lallineamento (orizzontale) del contenuto della cella valign Per specicare lallineamento verticale del contenuto della cella; possibili quattro valori: top, middle, bottom e baseline

Stefano Brocchi

Laboratorio di reti I: HTTP e HTML

9 novembre, 2009

32 / 44

Il linguaggio HTML

Tag HTML per liste e tabelle

Tabelle: un esempio

Supponiamo per esempio di voler ottenere una tabella come la seguente...

Tabella di esempio con celle di dimensioni diverse Studenti Studenti di Siena Studenti di Firenze Marco Rossi Giulio Verdi Luca Bianchi Votazioni 22 27 28 28 25 30 Media 25 26 29

Stefano Brocchi

Laboratorio di reti I: HTTP e HTML

9 novembre, 2009

33 / 44

Il linguaggio HTML

Tag HTML per liste e tabelle

Tabelle: un esempio
... dovremo realizzare il seguente codice: <table width ="600" border = 1> <tr> <td colspan = 5 align = "center"> Tabella di esempio con celle di dimensioni diverse <tr> <td colspan = 2> Studenti <td colspan = 2> Votazioni <td> Media <tr> <td rowspan = 2> Studenti di Siena <td> Marco Rossi <td> 22 <td> 28 <td> 25 <tr> <td> Giulio Verdi <td> 27 <td> 25 <td> 26 <tr> <td> Studenti di Firenze <td> Luca Bianchi <td> 28 <td> 30 <td> 29 </table>
Stefano Brocchi Laboratorio di reti I: HTTP e HTML 9 novembre, 2009 34 / 44

Il linguaggio HTML

Tag HTML per liste e tabelle

Utilizzo di tabelle

E possibile inserire nelle celle di una tabella qualsiasi tipo di oggeto, come immagini o altre tabelle Le tabelle sono uno strumento molto duttile in HTML, tanto che alcuni editor graci le utilizzano per lallineamento del testo; questa tuttavia ` una cattiva pratica in quanto si ha una peggiore possibilit` e a di dividere la graca dal contenuto come con altri costrutti come il tag <div>

Stefano Brocchi

Laboratorio di reti I: HTTP e HTML

9 novembre, 2009

35 / 44

Il linguaggio HTML

Tag HTML per liste e tabelle

Il tag div

Il tag <div> permette di denire un generico contenitore in HTML, di cui sar` possibile denire posizionamento, stile dei caratteri a contenuti e colore Per denire tali caratteristiche si pu` utilizzare il tag style che o accetta una striga che a sua volta contiene una lista di parametri
Ad esempio <DIV STYLE="background:#BBCCFF; position:absolute; left:180pt">

La manipolazione delle caratteristiche dei vari tag <div>, come le caratteristiche di stile degli altri tag, viene gestita tipicamente tramite i Cascading Style Sheets (CSS); per questo studieremo lutilizzo del tag <div> pi` avanti u

Stefano Brocchi

Laboratorio di reti I: HTTP e HTML

9 novembre, 2009

36 / 44

Il linguaggio HTML

Validazione HTML

Interpretazione e correttezza di pagine HTML

Una pagina HTML verr` in qualche modo interpretata da un browser a anche se contiene errori o incoerenze nei tag
Per esempio se viene incontrato una chiusura di un tag che non ` mai e stato aperto questo viene semplicemente ignorato

Questo pu` sembrare comodo in quanto spesso pagine HTML con o qualche errore verranno visualizzate comunque correttamente, ma in realt` porta a diversi problemi: a
Nel caso di errori che non causano problemi di visualizzazione pu` o portare a pratiche di cattiva programmazione, in quanto il programmatore pu` essere tentato a ignorare il problema o Nel caso di errori che causano uneetto negativo sulla pagina, questo meccanismo spesso occulta la causa del problema rendendone pi` u dicile la risoluzione

Stefano Brocchi

Laboratorio di reti I: HTTP e HTML

9 novembre, 2009

37 / 44

Il linguaggio HTML

Validazione HTML

Validazione HTML

Per vericare che una pagina sia scritta correttamente si pu` ricorrere o a strumenti di validazione, creati per stabilire se una pagina HTML contiene qualcosa di sbagliato Si pu` richiedere la validazione di una qualsiasi pagina in rete o segnalandone lURL sul sito http://validator.w3.org/ Denite diverse speciche per la validit` dei documenti HTML; a a seconda di quali di queste venga utilizzata ` possibile specicare ed e autoimporre controlli pi` o meno rigidi sulla propria pagina web u

Stefano Brocchi

Laboratorio di reti I: HTTP e HTML

9 novembre, 2009

38 / 44

Il linguaggio HTML

Validazione HTML

Validazione HTML

E necessario dichiarare allinizio della pagina web che tipo di norme di correttezza essa segua Si deve utilizzare una sintassi del tipo <!DOCTYPE parametri >
Una possibile dichiarazione che specica regole abbastanza elastiche per il documento (permettendo tag deprecati) ` e <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

In alternativa alle speciche HTML ` possibile seguire le speciche e dellXHTML; questa ` una riformulazione dellHTML che segue anche e le speciche del linguaggio XML. In altre parole, documenti XHTML rappresentano sia pagine HTML che documenti XML.

Stefano Brocchi

Laboratorio di reti I: HTTP e HTML

9 novembre, 2009

39 / 44

Pubblicazione di una pagina in rete

Pubblicazione di una pagina HTML

Vediamo ora i passi necessari a pubblicare in rete un documento HTML Il primo passo da eseguire ` quello di installare un server HTTP per e poter mandare la pagina in risposta ad eventuali richieste HTTP
Uno dei pi` noti e collaudati ` Apache, scaricabile gratuitamente da u e http://httpd.apache.org/

Segnalare al server i documenti che vogliamo rendere disponibili

Come comportamento di default Apache pubblica tutti i documenti nella sua sottocartella htdocs

A questo punto la pagina ` gi` disponibile dalla rete, e si pu` ottenere e a o digitando su di un browser lindirizzo ip della macchina server seguito dal percorso ed il nome del le

Stefano Brocchi

Laboratorio di reti I: HTTP e HTML

9 novembre, 2009

40 / 44

Pubblicazione di una pagina in rete

Pubblicazione di una pagina HTML

Per poter utilizzare una macchina come server in modo continuo sono necessarie, oltre a vari requisiti tecnici della macchina per garantire la continuit` del servizio, altre due caratteristiche: a Un indirizzo IP sso per poter garantire ai client che la pagina sar` a sempre reperibile ad un determinato indirizzo. Solitamente i provider non orono tale caratteristica se non specicamente richiesta. Una servizio di DNS che permetta lassociazione di una stringa rappresentante il nome dellhost (es. www.google.com) allindirizzo IP del server

Stefano Brocchi

Laboratorio di reti I: HTTP e HTML

9 novembre, 2009

41 / 44

Pubblicazione di una pagina in rete

Pubblicazione di una pagina HTML

I servizi descritti sono comunemente oerti insieme al servizio di hosting da numerose societ`. a Solitamente per pubblicare un sito si atta dello spazio web in un server remoto che ci mette a disposizione un IP sso ed un servizio di DNS A questo punto sar` necessario trasferire le pagine ed i vari le a necessari sul server; questo solitamente si fa utilizzando il protocollo ftp, pi` eciente di http per il trasferimento dei le. u
Le modalit` di accesso al server sono comunque specicate da chi a fornisce il servizio di hosting

Stefano Brocchi

Laboratorio di reti I: HTTP e HTML

9 novembre, 2009

42 / 44

Esercizio

Esercizio

Realizzare un semplice sito web formato da qualche pagina Collegare le pagine tra loro tramite link; inserire inoltre link a siti esterni Utilizzare i vari tag per la manipolazione del testo Inserire inoltre nel sito elencazioni, immagini e tabelle Pubblicare la pagina in rete tramite apache Vericare eventuali problemi nella pagina tramite validazione

Stefano Brocchi

Laboratorio di reti I: HTTP e HTML

9 novembre, 2009

43 / 44

Esercizio

Esercizio
Inserire nel sito una pagina che permetta di eettuare ricerche con google
Se il sito creato fosse indicizzato su Google, potremmo utilizzare una maschera simile per eettuare ricerche allinterno del nostro sito

A questo scopo inserire una form con (almeno) i seguenti input:

Unarea di testo per specicare la stringa di ricerca Una serie di radio button che permettano di specicare se visualizzare 10, 20 o 30 risultati per pagina Unopzione che permetta di richiedere la visualizzazione di pagine solo in lingua inglese

Per eettuare la richiesta a google richiedere la pagina www.google.it/search?q=query &num=numeroRisultati[&hl=eng]; query e numeroRisultati saranno i parametri immessi dallutente, lultimo parametro hl=eng ` da inserire solo se ` stata selezionata e e lopzione solo pagine inglesi
Stefano Brocchi Laboratorio di reti I: HTTP e HTML 9 novembre, 2009 44 / 44