World Wide Web e linguaggio HTML

Transcript

I principi del Web
Il World Wide Web
Il Web è un sistema basato su Internet che utilizza la tecnologia degli
ipertesti per “distribuire”
distribuire documenti,
documenti file
file, immagini
immagini, ...
Il Web è un sottoinsieme di Internet
nasce all’inizio degli anni ‘90 al CERN
di Ginevra, come mezzo per la
distribuzione e condivisione di
documenti scientifici
Tim Berners-Lee
Marco Porta - CIM: Web Design & Technologies
1
I principi del Web
Ipertesto e Ipermedia
Ipertesto (Hypertext)
ttesto
t in
i cuii sono presentiti collegamenti
ll
ti (li
(link)
k) ad
d altri
lt i d
documentiti Fornisce un metodo di consultazione non sequenziale
Ipermedia (Hypermedia)
ipertesto con collegamenti a
documenti testuali, immagini,
suoni,, filmati,, ...
2
1
I principi del Web
Il browser
Il browser web è lo strumento (il programma) che permette di
“navigare” tra le pagine presenti in rete
browser "storici": MS Internet Explorer e Netscape Navigator
3
I principi del Web
URL
URL = Uniform Resource Locator
rappresenta
t l’indirizzo
l’i di i
((unico)
i ) di un d
documento,
t pagina
i o fil
file
presente in Internet
Esempio:
http://www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimerAll.html
metodo d’accesso
indirizzo del server
percorso
documento
L’HTTP (Hyper Text Transfer Protocol) è il protocollo utilizzato per la
comunicazione via Web
4
2
I principi del Web
Architettura clientclient-server…
Server
– macchina
hi che
h ffornisce
i
qualche
l h titipo di servizio
i i ((es. HTTP
HTTP, FTP
FTP, …))
– software che gestisce qualche tipo di servizio
detto anche daemon; sta “in ascolto” su determinate porte (es. di
solito HTTP  porta 80, Telnet  porta 23, …)
Client
– macchina che usufruisce di qualche tipo di servizio remoto
es. PC dell’utente
– software che utilizza qualche tipo di servizio remoto
es. browser Web
5
I principi del Web
… architettura clientclient-server
Il Web si basa su una tipica architettura client-server
macchine
hi client
li t (i computer
t d
deglili utenti)
t ti) richiedono
i hi d
servizi
i i (l
(le
pagine) a una macchina server (il server Web)
6
3
I principi del Web
Il protocollo HTTP…
= HyperText Transfer Protocol
– è il protocollo
t
ll di comunicazione
i
i
utilizzato
tili
t per il W
Web
b
– si basa sul paradigma richiesta/risposta
– opera al livello applicazione
Modalità di interazione
1. il client apre una connessione TCP con un server HTTP e invia una
richiesta ((in formato testo,, cioè caratteri ASCII))
2. il server risponde inviando i dati (anche non testuali) al richiedente
e chiude la connessione
7
I principi del Web
… il protocollo HTTP…
Richieste
sono formate
f
t da:
d
• un metodo (es. GET, POST, PUT, …)
• un URL (es. www.unipv.it)
• una versione (es. 1.1)
• un messaggio “MIME-like”
• un eventuale corpo di dati
Esempio:
GET htt
http://www.unipv.it
//
i
it HTTP/
Accept: text/plain
Accept: text/html
User-Agent: MS Exporer 5.0
1
1.1
1
8
4
I principi del Web
… il protocollo HTTP
Risposte
sono formate
f
t da:
d
• vari headers (specificati secondo una sintassi MIME-like),
contenenti, ad esempio, informazioni sull’esito della richiesta, il
tipo di dati che saranno restituiti, …
• il corpo della risposta (es. il contenuto di una pagina HTML)
Esempio:
HTTP/1.0 200 OK
Content-Type:
Content
Type: text/html
Content-Length: 104
.....
<HTML>
..... .....
</HTML>
9
I principi del Web
MIME…
Multipurpose Internet Mail Extension
– sviluppato
il
t per allegare
ll
fil
file di vario
i titipo aii messaggii E
E-mailil
– usato anche per la comunicazione HTTP
7 tipi principali di dati
testo, immagini, audio, video, messaggio, multipart, application
Vari sottotipi
es. text/plain, audio/basic, video/mpeg, application/msword, …
10
5
I principi del Web
… MIME
Es. E-mail con file PDF allegato
Return-Path:
Return
Path: <marco
<[email protected]>
porta@unipv it>
Received: from ...
Message-ID:
<013301c4a7a8$628eda50$3e00a8c0@marte>
Reply-To: "Marco Porta"
<[email protected]>
From: "Marco Porta" <[email protected]>
To: "Marco Porta" <[email protected]>
Subject: Prova
Date: Fri, 1 Oct 2004 12:18:31 +0100
MIME-Version: 1.0
Content-Type: multipart/mixed;
boundary="---=_NextPart_000_0130_01C4A7B0.C40856A0"
This is a multi-part
multi part message in MIME
format.
-----=_NextPart_000_0130_01C4A7B0.C40856A0
Content-Type: text/plain;
charset="Windows-1252"
Content-Transfer-Encoding: 7bit
Prova
-----=_NextPart_000_0130_01C4A7B0.C40856A0
Content-Type: application/pdf;
name="stm-ing-1.pdf"
Content-Transfer-Encoding: base64
Content-Disposition: attachment;
filename="stm-ing-1.pdf"
JVBERi0xLjMNJeLjz9MNCjEgMCBvYmoNPDwgDS9U
eXBlIC9QYWdlIA0vUGFyZW50IDY4IDAgUiAN
L1Jlc291cmNlcyAyIDAgUiANL0NvbnRlbnRzIDMg
MCBSIA0vTWVkaWFCb3ggWyAwIDAgNTk1IDg0
... ... ...
11
Il linguaggio HTML
Origini e caratteristiche dell'HTML...
HTML = Hyper Text Markup Language
è un lilinguaggio
i di markup
k molto
lt semplice,
li
che
h non richiede
i hi d alcuna
l
conoscenza della programmazione - Dà una descrizione del
documento
Deriva da SGML (Standard Generalized Markup Language)
un metalinguaggio per creare linguaggi
Un documento HTML è un file di testo contenente la codifica
di una pagina
quindi una pagina Web può essere creata utilizzando un editor
qualunque
12
6
Il linguaggio HTML
... origini e caratteristiche dell’HTML
L’HTML è stato creato con l’obiettivo di essere device
independent
il suo scopo originario era quello di descrivere la struttura di un
documento, non l’aspetto (compito lasciato al browser)
Ma il WWW si è diffuso molto rapidamente...
dalle comunità scientifiche e militari si è esteso ad altri ambiti (ad
esempio, quello commerciale...)
Il lilinguaggio
i è stato
t t quindi
i di via
i via
i modificato
difi t per iincludere
l d
anche una descrizione della formattazione
contro l’intento originale...
13
Il linguaggio HTML
I tag
Specificano gli elementi strutturali in un documento HTML
definiscono
d
fi i
come sarà
à visualizzata
i
li
t lla porzione
i
di ttesto
t che
h
includono, quali connessioni ci devono essere ad altri documenti,
quali immagini o elementi multimediali devono essere visualizzati, ...
Sono racchiusi tra parentesi angolari
es.: <body>, <h1>, ...
In genere
genere, si usano a coppie
ogni “tag di apertura” ha associato un corrispondente “tag di
chiusura” (es.: <body> ... </body>, <head> ... </head>, ...)
14
7
Il linguaggio HTML
Un’introduzione all’HTML
La versione attuale è la 4.01
la specifica ufficiale si può trovare sul sito www.w3.org, del
World Wide Web Consortium (l’organo internazionale che si
occupa della standardizzazione di tutto “ciò” che riguarda il Web)
Sul Web (e non solo) è possibile reperire una quantità
"sterminata" di materiale riguardante l'HTML e i linguaggi
collegati…
15
Il linguaggio HTML
Struttura generale di un documento HTML
<HTML>
<HEAD>
<TITLE> ... </TITLE>
...
</HEAD>
<BODY>
...
...
</BODY>
</HTML>
16
8
Il linguaggio HTML
I tag base
<html>
dichiara che il file contiene codice HTML
<head>
identifica la sezione “introduttiva” del documento
<title>
specifica
spec
ca il ttitolo
to o pe
per il docu
documento
e to
<body>
definisce il corpo principale del documento
17
Il linguaggio HTML
Heading e paragrafi
Esistono sei livelli di heading
hanno un significato logico (<h1> più importante
importante, <h6> meno
importante - il browser li visualizza in modo diverso)
I paragrafi definiscono il “testo normale”
– il tag <p> non ha strettamente bisogno di un corrispondente tag di
chiusura... però è meglio usarlo…
– Gli spazi e i ritorni a capo non contano (non solo per <p>, ma anche
nel resto del documento))
– Ogni volta che incontra il tag <p>, il browser, in genere, lascia una
riga vuota...
18
9
Il linguaggio HTML
Gli attributi
Ai tag possono essere associati attributi
Ad esempio,
i se voglio
li che
h il testo
t t di un paragrafo
f sia
i centrato:
t t
<p align="center">Questo è il testo del paragrafo
Gli attributi definiscono delle proprietà per i tag
possono essere più d’uno e hanno la struttura
nomeattributo="valoreattributo"
Quelli “deprecati” non si dovrebbero usare...
19
Il linguaggio HTML
Liste
Tre tipi possibili:
Unnumbered lists  tag <ul>
< l> e <li>
per creare liste non ordinate
Numbered lists  tag <ol> e <li>
per creare liste ordinate
Definition lists  tag <dl>, <dt> e <dd>
per creare liste di definizione
Si possono anche
h avere liliste
t annidate
id t una d
dentro
t
l’altra
20
10
Il linguaggio HTML
Testo preformattato
Utile quando si vuole essere certi che gli spazi e i ritorni a
capo vengano inseriti esattamente dove vogliamo
il tag <pre> rappresenta l’eccezione che conferma la regola...
Utilizzato spesso per riportare codice di programmi
i programmi scritti con linguaggi di programmazione ad alto
livello includono g
generalmente delle indentazioni...
21
Il linguaggio HTML
Line break e barre orizzontali
Anche se l’HTML
l HTML ignora i ritorni a capo nel testo, è
possibile forzarli
attraverso il tag <br>
Per separare zone diverse di uno stesso documento può
essere utile utilizzare delle barre orizzontali
per il tag <hr> si possono specificare gli attributi size e width
Esempio:
<hr size="4" width="50%">
22
11
Il linguaggio HTML
Stili logici e stili fisici
Stili logici
danno un’informazione sul tipo di contenuto (la loro
rappresentazione è lasciata completamente al browser)
Esempi: <em>, <strong>, <code>, ...
Stili fisici
specificano l’aspetto del contenuto (che il browser dovrà
rispettare)
Esempi: <b>, <i>, ...
23
Il linguaggio HTML
Sequenze di escape
Servono per inserire nella pagina caratteri speciali
che
h non possono essere utilizzati
tili
ti di
direttamente
tt
t perché
hé h
hanno un
significato particolare per l’HTML
Esempi:
< = <
> = >
& = &
è = è
é = é
È = È
24
12
Il linguaggio HTML
Link ...
Permettono di creare collegamenti ad altri documenti
Struttura:
<a href="indirizzo">...</a>
Esempio:
<a href="http://www.unipv.it">Università di
Pavia</a>
I “pathname” possono essere anche relativi
Esempio:
<a href="xxx/miofile.html">Università di
Pavia</a>
25
Il linguaggio HTML
... link
È anche possibile creare collegamenti all’interno dello stesso
documento o a sezioni specifiche di un altro documento
Esempio:
<a href="#sez1">Sezione 1</a> crea un link a “sez1” nel
documento corrente
<a href="MioFile.html#sez1">Sezione 1</a> crea un
link a “sez1” nel file MioFile.html
““sez1”
1” sarà
àd
definito
fi it d
da:
<a name="sez1">Questa è la sezione 1</a>
26
13
Il linguaggio HTML
Link a indirizzi ee-mail
Permettono di aprire il programma per la composizione del
messaggio con un clic
Esempio:
<p>
L’ing. <a href="mailto:[email protected]">Marco Porta</a>
può essere contattato ....
</p>
L’ing.
g Marco Porta ppuò essere contattato ....
27
Il linguaggio HTML
Includere immagini...
Si possono utilizzare immagini in formato GIF, JPEG e PNG
attraverso il tag <IMG> (non richiede il tag di chiusura)
Esempio:
<img src="MiaImmagine.gif">
È possibile specificare le dimensioni
anche se non è strettamente necessario...
Esempio:
<img src="MiaImmagine.gif" width="300" height="138">
È utile specificare anche testo “alternativo”
28
14
Il linguaggio HTML
... includere immagini
È possibile specificare la posizione del testo rispetto
alle immagini
attraverso l’attributo align
Esempio:
default: <img src="MiaImmagine.gif">
top: <img src="MiaImmagine.gif"
align="top">
"
"
center: <img src="MiaImmagine.gif"
align="center">
29
Il linguaggio HTML
Il colore di sfondo della pagina
Se nessun colore è specificato, il default è bianco o grigio
il colore è impostato attraverso l’attributo
l attributo bgcolor
b
l del tag <BODY>
Esempio:
<body bgcolor="yellow">
Esistono 16 colori “testuali” predefiniti (aqua, black, blue, fuchsia,
gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white,
yellow)
È possibile specificare il colore anche con la codifica
esadecimale
Esempio: bgcolor="#02FC16"
30
15
Il linguaggio HTML
Immagini di sfondo
È possibile specificare un’immagine da visualizzare come
sfondo della pagina
attraverso l’attributo background del tag <BODY>
Esempio:
<body background="MiaImmagine.gif">
L’immagine viene ripetuta “automaticamente”
in modo che,
che indipendentemente dalle sue dimensioni
dimensioni, copra tutto lo
sfondo
31
Il linguaggio HTML
Link a elementi multimediali
Un link può anche riferirsi a un’immagine, un’animazione, ...
basta specificare l’elemento multimediale nell’attributo href
Esempio:
<a href="MiaImmagine.gif">Immagine 1</a>
<a href="MioFilmato.mov">Filmato 1</a>
Un’immagine può anche essere un link
Esempio:
<a href="MiaImmagine.gif">
<img src="ImmaginePiccola.gif">
</a>
32
16
Il linguaggio HTML
I font
Con l’HTML è possibile specificare il tipo di font da utilizzare
per un certo elemento
“famiglia”, colore, dimensione, …
Si utilizza il tag <font>
con gli attributi face, color, size, …
Esempio:
<font face="sans-serif"
face= sans-serif color=
color="red"
red size=
size="+2">
+2 >
<h1>Questo è un titolo con carattere <em>sans-serif
</em>, colore rosso e dimensione <EM>+2</EM> rispetto
al font di default</h1>
</font>
33
Il linguaggio HTML
Tabelle...
Permettono una suddivisione in righe e colonne
utili
tili per strutturare
t tt
informazioni
i f
i i intrinsecamente
i ti
t tabellari
t b ll i
Sono fondamentali per layout non banali della pagina
consentono di strutturare la pagina in diverse aree
Sono descritte in termini di righe e colonne
tabella  tag <table>
righe  tag <tr>
colonne  tag <td> e <th>
34
17
Il linguaggio HTML
... tabelle...
Tabella con n righe e m colonne:
<table>
<tr>
<td>Riga
....
<td>Riga
</tr>
....
<tr>
<td>Riga
g
....
<td>Riga
</tr>
</table>
1, Colonna 1</td>
Celle riga 1
Riga 1
1, Colonna m</td>
Tabella
n,
, Colonna 1</td>
/
Celle riga n
Riga n
n, Colonna m</td>
35
Il linguaggio HTML
... tabelle
Attributi di <table>
width  larghezza; border  bordo; align  allineamento orizzontale;
valign
li  allineamento verticale; cellpadding
ll ddi  spazio all’interno delle
celle; cellspacing  spazio tra le celle; bgcolor  colore di sfondo;
background  immagine di sfondo
Attributi di <tr>
align  allineamento orizzontale; valign  allineamento verticale;
bgcolor  colore di sfondo
Attributi di <td> e <th>
width  larghezza; height  altezza; bgcolor  colore di sfondo;
background  immagine di sfondo; align  allineamento orizzontale;
valign  allineamento verticale; colspan  numero di colonne occupate;
rowspan  numero di righe occupate
36
18
Il linguaggio HTML
HTML "avanzato" - I form
form...
...
Permettono all’utente di fornire degli input
E
Esempio:
i
37
Il linguaggio HTML
... i form...
Sono definiti attraverso il tag <form>
Il tag <input> permette di creare vari tipi di controlli
• text  finestrelle di input testuale
• checkbox  opzioni selezionabili
• radiobutton  opzioni mutuamente
esclusive
• password
d  finestrelle
fi
t ll iinputt
password
• image  immagini (es. bottoni
disegnati)
• button  bottoni
• submit  bottoni invio
form
• reset  bottoni reset form
• file
fil  invio
i i fil
file
• hidden  dati “nascosti”
38
19
Il linguaggio HTML
... i form
Altri tipi di input
•
•
•
•
t <button>  bottoni
tag
b tt i ((possono contenere
t
immagini)
i
i i)
tag <textarea>  aree per l’immissione di testo (su più righe)
tag <select> e <option>  elenchi
tag <label>  etichette
Una volta inseriti, i dati devono essere inviati a “qualcuno”
tipicamente, a un server che li elaborerà (attributo action del
tag <form>)
Due “metodi” disponibili per l’invio
GET e POST (attributo method del tag <form>)
39
Il linguaggio HTML
HTML "avanzato" - I frame...
Permettono di suddividere la finestra del browser in più
sottofinestre
tt fi
t
Esempio:
Importante: per
ragioni di usabilità
e accessibilità, i
frame andrebbero
sempre evitati!!
40
20
Il linguaggio HTML
... i frame
Si creano attraverso i tag <frameset> e <frame>
ogni sottofinestra contiene un documento HTML diverso
È possibile specificarne le caratteristiche
se devono avere i bordi, lo spessore dei bordi, lo spazio tra un
frame e l’altro, se possono essere ridimensionati, se devono
avere le barre di scorrimento, ...
attributi frameborder,, border,, framespacing
p
g del tag
g
<frameset>
attributi noresize, scrolling, ... del tag <frame>
41
Il linguaggio HTML
… i frame – Un esempio…
<HTML>
<HEAD>
<TITLE>Un semplice documento con frame</TITLE>
</HEAD>
<FRAMESET cols="20%, 80%">
<FRAMESET rows="100, 200">
<FRAME src="http://www.virgilio.it/">
<FRAME src="http://www.altavista.com/">
</FRAMESET>
<FRAME src="http://www.google.com/">
<NOFRAMES>
<P>Spiacente, questo sito utilizza i frame...
</NOFRAMES>
</FRAMESET>
</HTML>
42
21
Il linguaggio HTML
… i frame
E’ possibile fare in modo che cliccando su un link in un
frame venga caricata una pagina in un altro frame
il frame destinazione deve avere un nome
Esempio:
file2.html
<HTML>
<HEAD>
<TITLE>Frame e target</TITLE>
</HEAD>
<FRAMESET rows=“50%,50%”>
<FRAME name=“main” src=“file1.html”>
<FRAME src=“file2.html”>
</FRAMESET>
</HTML>
<HTML>
<HEAD>
<TITLE>Frame e target</TITLE>
</HEAD>
<BODY>
...
<A href=“http://...” target=“main”>xxx</A>
...
</BODY>
</HTML>
43
22

World Wide Web e linguaggio HTML

Transcript

Documenti analoghi

cantiere in movimento

Esempio di tema d`esame - Università degli studi di Pavia

laboratori creativi

Gruppo di Famiglia

Aspetti avanzati dell`interazione multimediale

Congresso Parigi 2004 - CIM | Confederazione Italiani nel Mondo

Sistema Operativo

case history outdry.indd

Commercio elettronico