internet e html diffusione di informazioni mediante la rete internet

Internet e HTMLInternet e HTMLDiffusione di informazioni mediante la Diffusione di informazioni mediante la

rete Internetrete Internet

Navigazione: il Navigazione: il modello client - modello client -

serverserver

ClientClientcomputer collegato a computer collegato a Internet in modo Internet in modo permanente o permanente o temporaneo.temporaneo.

Hardware e software Hardware e software di qualsiasi tipo.di qualsiasi tipo.

Sul client gira un Sul client gira un software client http software client http (browser) (browser) (es. Internet Explorer, (es. Internet Explorer, Mozilla Firefox …)Mozilla Firefox …)

ServerServerComputer sempre Computer sempre collegato a collegato a Internet.Internet.

Hardware e Hardware e software di software di qualsiasi tipo.qualsiasi tipo.

Sul server gira un Sul server gira un software server software server http (es. Microsoft http (es. Microsoft IIS, Apache …) IIS, Apache …)

Richiesta del Richiesta del clientclient

Client: Client: Richiede un servizio specificando un URLRichiede un servizio specificando un URL

Es. http://www.itis.pr.it/documenti/index.htmlEs. http://www.itis.pr.it/documenti/index.html

Server:Server:Se il documento è presente viene inviato al Se il documento è presente viene inviato al client.client.

Si tratta di un documento di testo.Si tratta di un documento di testo.

Se il server non esiste o non risponde o sul Se il server non esiste o non risponde o sul server non è presente la cartella o il file viene server non è presente la cartella o il file viene inviato un messaggio di erroreinviato un messaggio di errore

VisualizzazioneVisualizzazioneClient:Client:

Riceve il documento ed inizia a visualizzarlo Riceve il documento ed inizia a visualizzarlo interpretando alcuni comandi di interpretando alcuni comandi di formattazione testoformattazione testoSe nel file html è presente un riferimento ad Se nel file html è presente un riferimento ad un’immagine o a un file multimediale, il un’immagine o a un file multimediale, il client richiede al server di inviare il file client richiede al server di inviare il file (potrebbe essere un diverso server)(potrebbe essere un diverso server)Riceve l’immagine e la visualizza nella Riceve l’immagine e la visualizza nella posizione specificata o gestisce il file posizione specificata o gestisce il file multimedialemultimedialeDopo varie interazioni con il server la pagina Dopo varie interazioni con il server la pagina è completaè completa

NavigazioneNavigazioneL’utente può cliccare L’utente può cliccare su una zona su una zona sensibile del sensibile del documento documento interattivo (testo o interattivo (testo o immagine) e immagine) e richiedere a un richiedere a un server l’invio di un server l’invio di un nuovo documento nuovo documento html.html.

HTMLHTMLHYPER TEXT MARK-UP LANGUAGEHYPER TEXT MARK-UP LANGUAGE

HTMLHTMLHyper Text Mark-Up LanguageHyper Text Mark-Up Language

Linguaggio di marcatura per ipertestiLinguaggio di marcatura per ipertesti

E’ un linguaggio di formattazione usato E’ un linguaggio di formattazione usato per descrivere i documenti ipertestuali per descrivere i documenti ipertestuali disponibili nel World Wide Webdisponibili nel World Wide Web

I siti web sono scritti in HTMLI siti web sono scritti in HTML

Il codice viene letto ed elaborato dal Il codice viene letto ed elaborato dal browser, il quale genera la pagina che browser, il quale genera la pagina che viene visualizzata sullo schermoviene visualizzata sullo schermo

Cosa sono le Cosa sono le pagine HTMLpagine HTML

Ogni volta che Ogni volta che navighiamo in rete navighiamo in rete visualizziamo pagine visualizziamo pagine HTMLHTML

Che contengono Che contengono testo, immagini, testo, immagini, suoni ecc.suoni ecc.

E sono collegate fra E sono collegate fra loro in modo da loro in modo da formare un ipertestoformare un ipertesto

Un esempio di Un esempio di pagina HTMLpagina HTML

<html><html> <head><head> <title> Esempio </title><title> Esempio </title> </head></head> <body><body> <h1> Buongiorno </h1><h1> Buongiorno </h1> <p>Questo è un documento HTML</p><p>Questo è un documento HTML</p> <p>a cura di</p><p>a cura di</p> <hr /><hr /> <address><address> <a href=<a href=““http://www.itis.pr.ithttp://www.itis.pr.it””>clicca qui </a>>clicca qui </a> </address></address> </body></body></html></html>

RisultatoRisultato

Alcuni tagAlcuni tagI tag sono racchiusi fra parentesi angolariI tag sono racchiusi fra parentesi angolari

Quasi sempre esiste un tag di apertura a cui ne Quasi sempre esiste un tag di apertura a cui ne corrisponde uno di chiusuracorrisponde uno di chiusura

<html>...</html> Racchiude l’intero documento HTML<html>...</html> Racchiude l’intero documento HTML

<head>...</head> Racchiude l’intestazione del <head>...</head> Racchiude l’intestazione del documento HTMLdocumento HTML

<body>...</body> Racchiude il corpo del documento <body>...</body> Racchiude il corpo del documento HTMLHTML

I tag funzionano come comandi per il browser; ce ne I tag funzionano come comandi per il browser; ce ne sono per indicare il testo in grassetto, per creare sono per indicare il testo in grassetto, per creare elenchi, per mostrare un link e altro ancora. elenchi, per mostrare un link e altro ancora.

HTML file di testoHTML file di testoUn file HTML è un file di testo quindi Un file HTML è un file di testo quindi potrebbe essere generato da un potrebbe essere generato da un qualunque editor di testo (es. qualunque editor di testo (es. blocconote)blocconote)

Fra gli editor testuali consigliamo Fra gli editor testuali consigliamo Notepad++Notepad++

http://notepad-plus-plus.org/http://notepad-plus-plus.org/

Editor wysiwygEditor wysiwygEsistono vari editor ad alto livello che Esistono vari editor ad alto livello che facilitano il compito di realizzazione di facilitano il compito di realizzazione di pagine webpagine web

WYSIWYG (What You See Is What You WYSIWYG (What You See Is What You Get) (Ciò che vedi è ciò che ottieni) … Get) (Ciò che vedi è ciò che ottieni) … quasi …quasi …

Gli Editor avanzati evitano all’utente di Gli Editor avanzati evitano all’utente di conoscere e maneggiare i tag, che conoscere e maneggiare i tag, che restano dietro le quinte.restano dietro le quinte.

DreamweaverDreamweaverDreamweaver è un programma per la realizzazione di siti Dreamweaver è un programma per la realizzazione di siti web prodotto da Macromedia (dal 2005 società di web prodotto da Macromedia (dal 2005 società di proprietà di Adobe Systems) è tra i programmi più proprietà di Adobe Systems) è tra i programmi più utilizzati nel suo campo utilizzati nel suo campo

Il programma utilizza un'interfaccia visuale (definito Il programma utilizza un'interfaccia visuale (definito anche editor visuale) del tipo WYSIWYG (What You See Is anche editor visuale) del tipo WYSIWYG (What You See Is What You Get): con esso si possono realizzare pagine What You Get): con esso si possono realizzare pagine web, scrivendo semplicemente del testo, inserendo web, scrivendo semplicemente del testo, inserendo immagini e collegamenti ipertestuali, senza dover immagini e collegamenti ipertestuali, senza dover conoscere il linguaggio HTML. conoscere il linguaggio HTML.

Dreamweaver è utile anche per i programmatori che Dreamweaver è utile anche per i programmatori che preferiscono scrivere autonomamente il codice: il preferiscono scrivere autonomamente il codice: il programma aiuta l'utente dando suggerimenti mentre programma aiuta l'utente dando suggerimenti mentre vengono scritti i tag e gli attributi (ad esempio, scrivendo vengono scritti i tag e gli attributi (ad esempio, scrivendo le prime due lettere di tag e attributi viene proposta le prime due lettere di tag e attributi viene proposta automaticamente una lista tra cui scegliere, una funzione automaticamente una lista tra cui scegliere, una funzione molto simile all'IntelliSense di Microsoft). molto simile all'IntelliSense di Microsoft).

tag <title>tag <title>Viene visualizzato dal browser Viene visualizzato dal browser all’apertura della pagina stessaall’apertura della pagina stessa

Nell’intestazione si inserisce il tag <title>Nell’intestazione si inserisce il tag <title>

EsempioEsempio

<head><head>

<title>Titolo della pagina</title><title>Titolo della pagina</title>

</head></head>

Formattazione del Formattazione del testotesto

Il testo va inserito nel tag <body>Il testo va inserito nel tag <body>

6 tipi di titoli (variano le dimensioni)6 tipi di titoli (variano le dimensioni)

EsempiEsempi<h1>Titolo di grandezza massima</h1><h1>Titolo di grandezza massima</h1><h2>Titolo piu’ piccolo</h2><h2>Titolo piu’ piccolo</h2><h6>Titolo di dimensione minima</h6><h6>Titolo di dimensione minima</h6>

Paragrafi: per delimitare un paragrafo si utilizza Paragrafi: per delimitare un paragrafo si utilizza il tag <p>il tag <p>

Al termine di un paragrafo il testo va a capoAl termine di un paragrafo il testo va a capo

<p>Questo e’ un paragrafo</p><p>Questo e’ un paragrafo</p>

Suddivisione del Suddivisione del documento in documento in

blocchiblocchiIl tag <div> permette di creare un blocco che può Il tag <div> permette di creare un blocco che può contenere testo immagini contenere testo immagini

In un blocco è possibile definire l’allineamento con In un blocco è possibile definire l’allineamento con l’attributo alignl’attributo align

Esempio:Esempio:<div align=“center”>Testo</div><div align=“center”>Testo</div>

Testo sottolineato <u> … </u>Testo sottolineato <u> … </u>

Testo in corsivo <i> … </i>Testo in corsivo <i> … </i>

Testo in grassetto <b> … </b>Testo in grassetto <b> … </b>

Inserimento di riga orizzontale <hr />Inserimento di riga orizzontale <hr />

Elenchi ordinatiElenchi ordinati<ol><ol>

<li>elemento 1</li><li>elemento 1</li>



</ol></ol>

Elenchi non Elenchi non ordinatiordinati

<ul><ul>




</ul></ul>

ImmaginiImmaginiLe immagini sono esterne alle pagine htmlLe immagini sono esterne alle pagine html

Nel codice html va inserito un riferimento al Nel codice html va inserito un riferimento al file che contiene l’immaginefile che contiene l’immagine

Attenzione a non utilizzare percorsi assoluti Attenzione a non utilizzare percorsi assoluti per fari riferimento alle immaginiper fari riferimento alle immagini

Utilizzare percorsi relativiUtilizzare percorsi relativi<img src=“percorso/fileImmagine” ><img src=“percorso/fileImmagine” >

EsempioEsempio<img src=“foto/irene.jpg” ><img src=“foto/irene.jpg” >

Attributi del tag Attributi del tag <img><img>

width e height definiscono larghezza e width e height definiscono larghezza e altezza dell’immaginealtezza dell’immagine

alt definisce il testo alternativo per chi non alt definisce il testo alternativo per chi non visualizza l’immaginevisualizza l’immagine

align definisce l’allineamento dell’immagine align definisce l’allineamento dell’immagine rispetto al testo (right, keft, top, bottom, rispetto al testo (right, keft, top, bottom, middle)middle)

Un esempioUn esempio

<img src=“foto/irene.,jpg”width=“400” <img src=“foto/irene.,jpg”width=“400” height=“300” align=“top” > height=“300” align=“top” >

I linkI linkPer collegare le pagine fra loro si utilizzano i Per collegare le pagine fra loro si utilizzano i link che permettono di costruire la struttura link che permettono di costruire la struttura ipertestuale del sitoipertestuale del sito

Per i link si utilizza il tag <a> con l’attributo Per i link si utilizza il tag <a> con l’attributo hrefhref

Link a una pagina sullo stesso sitoLink a una pagina sullo stesso sito

<a href=“altrapagina.html”> collegamento a <a href=“altrapagina.html”> collegamento a un’altra pagina del sito</a>un’altra pagina del sito</a>

<a href=“http://www.altrosito.it”> <a href=“http://www.altrosito.it”> collegamento a un altro sito</a>collegamento a un altro sito</a>

Immagine come Immagine come linklink

Il tag <img> può essere utilizzato Il tag <img> può essere utilizzato all’interno del tag <a> per fare in modo all’interno del tag <a> per fare in modo che una immagine diventi un link per che una immagine diventi un link per una nuova pagina una nuova pagina

TabelleTabelleLe tabelle sono definite dal tag <table>Le tabelle sono definite dal tag <table>

Il tag <table> contiene righe di celle, definite dal Il tag <table> contiene righe di celle, definite dal tag <tr>tag <tr>

Ogni tag <tr> contiene celle di dati, definite dal Ogni tag <tr> contiene celle di dati, definite dal tag <td>tag <td>

Le celle di titolo sono definite dal tag <th>Le celle di titolo sono definite dal tag <th>

Le righe procedono dall’alto verso il bassoLe righe procedono dall’alto verso il basso

Le celle procedono da sinistra a destraLe celle procedono da sinistra a destra

Ogni cella di dati può contenere tutto ciò che si Ogni cella di dati può contenere tutto ciò che si vuolevuole

collegamenti, immagini, liste e anche altre tabellecollegamenti, immagini, liste e anche altre tabelle

Un esempio di Un esempio di tabellatabella

<table border="1"><table border="1">

<tr><tr>

<td>cella 1 riga 1</td><td>cella 1 riga 1</td>


</tr></tr>

<tr><tr>



</tr></tr>

</table></table>

Direttive per la Direttive per la realizzazione del realizzazione del

sitositoCreare una cartella che conterrà Creare una cartella che conterrà tutti e solitutti e soli i i file del nostro sito (es. cartella sito sotto a file del nostro sito (es. cartella sito sotto a documenti)documenti)

Creare un documento e assegnare subito il Creare un documento e assegnare subito il titolo, il colore del testo e dello sfondo (file-titolo, il colore del testo e dello sfondo (file-proprietà) proprietà)

Salvare il file nella cartella con un nome Salvare il file nella cartella con un nome significativo (tutto minuscolo, niente spazi e significativo (tutto minuscolo, niente spazi e nessun carattere particolare) (es. nessun carattere particolare) (es. lamiapagina.html)lamiapagina.html)

Il nome della pagina iniziale del sito è Il nome della pagina iniziale del sito è opportuno che sia index.htmlopportuno che sia index.html

internet e html diffusione di informazioni mediante la rete internet

Documents