Corso di HTML. Prerequisiti. Modulo L3. 1-Concetti generali. Browser Rete Internet Client e server. M. Malatesta 1-Concetti generali-12 28/07/2013

Dimensione: px

Iniziare la visualizzazioe della pagina:

Download "Corso di HTML. Prerequisiti. Modulo L3. 1-Concetti generali. Browser Rete Internet Client e server. M. Malatesta 1-Concetti generali-12 28/07/2013"

Barbara Vaccaro
8 anni fa
Visualizzazioni

1 Corso di HTML Modulo L3 1-Concetti generali 1 Prerequisiti Browser Rete Internet Client e server 2 1

2 Introduzione In questa Unità introduciamo alcuni semplici elementi del linguaggio HTML, con il quale è possibile creare documenti che è possibile visualizzare mediante un qualunque browser. L organo ufficiale del linguaggio HTML è il World Wide Web Consortium (W3C) che ha pubblicato molte versioni di HTML. La versione attuale è la 4.01, che è quella che utilizziamo in queste Unità. Alcuni produttori di browser (Netscape, Microsoft, ) hanno spesso sviluppato delle proprie estensioni HTML al di fuori degli standard, per cui alcune funzionalità specifiche potrebbero non dare i risultati attesi. 3 HTML La sigla HTML è l acronimo di Hyper Text Mark-up Language, ovvero linguaggio per la definizione di ipertesti. Mediante l HTML si possono creare pagine web con effetti anche molto sofisticati. Una pagina web può essere: ipertestuale multimediale ipermediale 4 2

Alcuni produttori di browser (Netscape, Microsoft, ) hanno spesso sviluppato delle proprie estensioni HTML al di fuori degli standard, per cui alcune funzionalità specifiche potrebbero non dare i

3 Documenti ipertestuali Un documento ipertestuale è un testo che non si deve obbligatoriamente leggere dall'inizio alla fine, ma che può essere consultato direttamente in qualsiasi punto, contenente all'interno dei rimandi (link) ad altre parti del documento che generalmente approfondiscono un determinato argomento. un link 5 Documenti multimediali Un documento multimediale è invece un insieme di informazioni che possono assumere diverse forme integrate fra loro: testo, immagini, filmati, suoni, ecc. Esempio di documento multimediale : Humphrey Bogart: Fare clic sul pulsante per attivare i file multimediali 6 3

4 Documenti ipermediali Un documento ipermediale è un documento in cui si fondono le caratteristiche di un documento ipertestuale e di uno multimediale Le pagine web sono esempi di documenti ipermediali. 7 World Wide Web Il World Wide Web (WWW, o letteralmente ragnatela intorno al mondo ), rappresenta uno degli aspetti più affascinanti della rete Internet. E un servizio di Internet che mette a disposizione di milioni di persone in tutto il mondo informazioni e documenti di ogni genere, contenenti immagini, suoni e collegamenti ad altri documenti. Il web entrò in linea nel 1992 presso il laboratorio europeo di fisica nucleare a Ginevra. Il web era nato all inizio come sistema di solo testo; oggi è un misto di testo, grafica, suoni, animazioni e realtà virtuale. 8 4

E un servizio di Internet che mette a disposizione di milioni di persone in tutto il mondo informazioni e documenti di ogni genere, contenenti immagini, suoni e collegamenti ad altri documenti.

5 World Wide Web Sul Web si possono trovare informazioni di ogni tipo. E come se in ogni nodo della ragnatela si trovasse un informazione. L HTML è divenuto famoso con il World Wide Web. Con HTML è possibile per chiunque la scrittura di documenti ipertestuali e multimediali con estrema facilità, essendo stato ottimizzato per tale scopo 9 I tag L HTML è un linguaggio, che si basa su indicazioni dette tag atte a creare effetti speciali in una pagina web. Ad esempio, con appositi tag è possibile scrivere in diversi font di caratteri; formattare il testo in modo desiderato (centrare, giustificare); inserire immagini e suoni; inserire collegamenti (link) con altri documenti. I tag sono parole chiave di HTML racchiusi tra una coppia di parentesi angolari ( < e > ). 10 5

basa su indicazioni dette tag atte a creare effetti speciali in una pagina web.

6 Struttura documento HTML Un documento HTML ha la struttura: Il tag <html> </html> specifica che il <!DOCTYPE html> documento contiene <html> elementi HTML e <head> racchiude il resto del <title> Qui compare il itolo del documento </title> </head> documento. <body> Qui compaiono testo, immagini, link etc. </body> </html> All interno della sezione html abbiamo le due sezioni head (intestazione) e body (corpo). 11 Struttura documento HTML L intestazione Un documento HTML ha la struttura: <!DOCTYPE html> informazioni <html> corretta <head> <title> Qui compare il itolo del documento visualizzate dello stesso. </title> </head> <body> Qui compaiono testo, immagini, link etc. </body> </html> Il corpo (body) del documento contiene tutti gli elementi della pagina ( testo, immagini, applet Java, codice Javascript) che verranno visualizzati dal browser. (head) contiene una serie di necessarie al browser per una interpretazione del documento, ma non all'interno 12 6

<body> Qui compaiono testo, immagini, link etc. </body> </html> All interno della sezione html abbiamo le due sezioni head (intestazione) e body (corpo).

7 I tag <head>, <title>, <body> In genere, i tag di HTML si presentano a coppia, uno di inizio e uno di fine. Il tag di inizio, imposta una data caratteristicha della pagina, il tag di fine serve a dire al browser smetti di visualizzare in quel modo. All interno dello spazio tra i due tag, si scrive il testo che comparirà nella pagina. Ad esempio: <head> e </head> delimitano l intestazione della pagina <title> e </title> servono ad impostare il titolo della pagina nella barra del titolo. <body> e </body> sono i tag che racchiudono il corpo della pagina (testo, immagini, formattazione, colori). 13 La pagina web commento) Per scrivere una pagina web utilizzando HTML è sufficiente il Blocco note di Windows o un altro editor qualunque. <!- Esempio 1.html --> <html> <head> <title> Questo è il titolo della pagina</title> </head> <body>questo testo si trova nel body</body> </html> Si scrivono nel file i comandi come nell esempio e lo si salva con estensione html. Aprendo il file mediante un browser (Mozilla, Explorer) si ottiene la visualizzazione della pagina. 14 7

All interno dello spazio tra i due tag, si scrive il testo che comparirà nella pagina.

8 La pagina web Ovviamente, se si modifica il testo, occorre salvarlo prima di visualizzarlo nuovamente La visualizzazione si effettua mediante il tasto Aggiorna (o Reload) presente su tutti i browser. Per visualizzare il codice HTML di una pagina web in Internet Explorer è sufficiente: in Internet Explorer scegliere Visualizza HTML; In Mozilla, selezionare dal menu rapido (tasto destro) l opzione Visualizza sorgente pagina. 15 Pagine locali e in rete La pagina web di esempio ora scritta è modificabile e visualizzabile solo sul nostro computer. Si tratta di una pagina locale. Come si fa a renderla visibile in rete? Per rispondere dobbiamo introdurre in modo intuitivo alcuni concetti preliminari. 16 8

Per visualizzare il codice HTML di una pagina web in Internet Explorer è sufficiente: in Internet Explorer scegliere Visualizza HTML; In Mozilla, selezionare dal menu rapido

9 Provider e pubblicazione La nostra pagina, affinchè sia visibile in rete, deve essere pubblicata. Per fare questo è necessario: a. avere a disposizione uno spazio web (gratis o a pagamento) tra i tanti offerti dai numerosi fornitori di servizi web (detti provider), i quali hanno dei server dedicati a questo scopo; b. copiare la nostra pagina, caricandola sul server sul quale abbiamo acquisito lo spazio web. 17 Provider e pubblicazione a. Struttura dello spazio web Quando si acquisisce uno spazio web personale da un provider, in genere è indicato con: Questo indirizzo, detto indirizzo web o URL (Uniform Resource Location) è accessibile da qualunque postazione client presente sulla rete. All interno dello spazio web possiamo creare cartelle in modo simile a quanto facciamo sull hard disk. In tal caso, per referenziare una pagina sarà necessario indicare anche il nome della cartella. /NomeCartella/NomePagina Si noti che, diversamente dallo stile DOS, che usa la barra inversa ( \, backslash) nell URL si usa la barra /, slash) 18 9

copiare la nostra pagina, caricandola sul server sul quale abbiamo acquisito lo spazio web. 17 Provider e pubblicazione a.

10 Provider e pubblicazione b. Caricamento della pagina Quando si acquisisce uno spazio web, vengono forniti anche servizi online per trasferire le nostre pagine: dal client al server (uploading) dal server al client (downloading). La pubblicazione e le altre attività connesse alla progettazione e realizzazione si un sito esulano da questo corso e si rimanda ai corsi specifici. 19 I tag <center>, , Vediamo un esempio di altri semplici tag. <!- Esempio 2.html --> <html> <head> <title>esempio 2</title> </head> <body> <center> Questa riga è centrata</center> Questa riga non è centrata un nuovo paragrafo inizia con interlinea doppia l'interlinea semplice è per scrivere a capo. </body> </html> 20 10

client (downloading). La pubblicazione e le altre attività connesse alla progettazione e realizzazione si un sito esulano da questo corso e si rimanda ai corsi specifici.

11 I tag <center>, , Notiamo che: <center> e </center> centra il testo compreso e imposta un nuovo paragrafo (interlinea doppia) scrive a capo il testo che segue. Il tag non richiede il tag di fine. 21 Argomenti HTML Documenti ipertestuali Documenti multimediali Documenti ipermediali World Wide web I tag Struttura documento HTML I tag <head>, <title>, <body> La pagina web Pagine locali e in rete Provider e pubblicazione a. Struttura dello spazio web b. Caricamento della pagina I tag <center>, , 22 11

21 Argomenti HTML Documenti ipertestuali Documenti multimediali Documenti ipermediali World Wide web I tag Struttura documento HTML I

12 Altri testi di riferimento

Documenti analoghi

Per accedere clicca su START o AVVIO (in basso a sinistra sul tuo schermo), poi su PROGRAMMI, ACCESSORI e infine su BLOCCO NOTE.

Per accedere clicca su START o AVVIO (in basso a sinistra sul tuo schermo), poi su PROGRAMMI, ACCESSORI e infine su BLOCCO NOTE. Cos'è l'html HTML è una sigla che viene da una frase inglese che vuol dire: " Linguaggio di contrassegno di ipertesti" (Hyper Text Markup Language) L'Html non è un vero e proprio linguaggio di programmazione,