CORSO WEB
DESIGN
Lezione 2: I linguaggi della grafica web
Che cos’è un server
Il server è il computer che consente a tutti coloro che sono
connessi alla rete di utilizzare le risorse condivise (dati,
programmi e dispositivi hardware).
Quindi Il sito web o le pagine web di solito (anzi sempre),
risiedono su un computer, chiamato anche "server" visto
che 'serve' le pagine a chi le consulta.
Sul server si trova il file in cui sono registrati tutti i dati
che consentono agli utenti di accedere alla rete web
Internet

URL= Uniform Resources Locator
URL sta per Uniform Resource Locator ed è un path, cioè
un percorso che indica in modo univoco dove è situata una
risorsa. Ad esempio http://it.answers.yahoo.com indica al
server dove deve andare a recuparare la pagina di yahoo
answer, il server dopo averla trovata la invia al tuo browser
(as esempio internet explorer o firefox) che infine te la
visualizza.
Internet
http://www.disney.com/personaggi/pippo.html
SERVER
DIRECTORY
FILE

I PROTOCOLLI
Il protocollo è un metodo standard che permette la
comunicazione tra i processi (eventualmente su
terminali diversi), cioè un insieme di regole e
procedure da rispettare per emettere e ricevere dei
dati su una rete.

I PROTOCOLLI
Su internet, i protocolli usati fanno parte di un insieme
di protocolli collegati fra loro. Questa serie di
protocollo si chiamaTCP/IP.

I PROTOCOLLI
•Il Protocollo TCP
TCP gestisce l'organizzazione dei dati e il
controllo della trasmissione. Ridimensiona la
grandezza dei dati da inviare, li spezzetta in
pacchetti più piccoli e li ricompone nel momento
in cui arrivano al computer di destinazione.

I PROTOCOLLI
•Il Protocollo IP
Il Protocollo IP trasmette i dati e gestisce il traffico
fra i diversi computer collegati; impacchetta i dati
in uscita e li invia scegliendo la strada migliore per
arrivare a destinazione. Il Protocollo IP basa l’invio
dei dati su di un sistema di indirizzi numerici
univoci

I PROTOCOLLI
:
•HTTP
•FTP
•ARP
•ICMP
•TCP
•UDP
•SMTP
•Telnet
•NNTP

I PROTOCOLLI
:
•HTTP
•scopo del protocollo HTTP è di permettere un
trasferimento di file (essenzialmente in formato HTML)
localizzati grazie ad una stringa di caratteri dettaURL tra
un navigatore (il client) e un server web (detto http d sui
terminali UNIX).
•

I PROTOCOLLI
:
•SMTP
•
protocollo SMTP (Simple Mail Transfer Protocol, tradotto
Protocollo Semplice di Trasferimento della Posta) è il
protocollo standard che permette di trasferire la posta da
un server ad un altro con una connessione point to
point.

:
I PROTOCOLLI
•POP3
•
•protocollo POP (Post Office Protocol tradotto con
"protocollo dell'ufficio postale") permette come
indicato dal suo nome di andare a recuperare la
propria posta su un server remoto (server POP). E'
necessario per le persone che, non essendo connesse
in permanenza ad internet, devono consultare le
proprie mail off-line.
Il formato JPG e il formato GIF
I formati che vengono usati nel web supportati da
tutti i browser sono di due tipi: JPEG e GIF.
Li esamineremo velocemente entrambi.
Un formato di file è semplicemente un modo per
salvare le parti elettroniche che compongono i file
di un computer.
I diversi formati strutturano le varie parti in
maniera differente.
Il formato JPG ,GIF e PNG
I formati che vengono usati nel web supportati da
tutti i browser sono di due tipi: JPEG e GIF.
Un formato di file è semplicemente un modo per
salvare le parti elettroniche che compongono i file
di un computer.
I diversi formati strutturano le varie parti in
maniera differente.
Il formato jpeg
La sigla JPEG o JPG è l'acronimo di Joint
Photographic Experts Group.
Questo tipo di immagine usa una compressione
con perdita di dati.
La perdita dei dati consiste nel fatto che alcuni
dati che formavano la tua immagine vengono
persi durante il processo di compressione.
Questo corrisponde a una perdita di qualità
nell'immagine, direttamente proporzionale al
livello di compressione che sceglierai.
Possiamo dire che a bassi livelli di compressione la
perdita di qualità è praticamente nulla e non si
percepisce a occhio nudo, ma se aumentiamo il
livello di compressione dobbiamo controllare che
l'immagine sia comunque di buona qualità, perché
la perdita di dati in questo caso può essere rilevante.
Qualsiasi sia il numero di profondità dei colori
dell'immagine sorgente il formato JPEG supporta
colori a 24 bit.
Questo tipo di formato va usato per immagini a tinte
non piatte, cioè per immagini fotografiche o con
immagini con sfumature leggere e continue.
Il formato Jpeg non è sicuramente adatto per il
trattamento di immagini vettoriali o contenenti testo.
Questo formato di esportazione (Jpeg) va usato per
riportare sul web immagini ottenute tramite scansione
di fotografie, e comunque per tutte quelle che
necessitano di un numero di colori superiore a 256.
Dato che il formato è a perdita di dati non è una
buona soluzione salvare un'immagine JPEG da
un'altra immagine JPEG.
La cosa migliore è ottenere immagini JPEG
dall'immagine originale.
Il formato gif
La sigla GIF è acronimo di Graphic Interchange
Format.
Questo tipo di compressione, al contrario del
JPEG non lavora a perdita di dati, ma può
esportare solo immagini che contengono al
massimo 256 colori.
Se l'originale contiene un numero più elevato di
colori, la perdita di qualità sarà significativa.
Il formato GIF usa colori a 8 bit ed è efficace per
comprimere immagini vettoriali, geometriche o
testo.
Le immagini GIF ti permettono anche di creare
delle piccole animazioni, le GIF ANIMATE, perché
supportano anche fotogrammi multipli.
I GIF animati si realizzano con semplici tool
grafiche e con la tecnica del cartone animato.
Il formato png
Il formato PNG è acronimo di Portable Network
Graphic.
Questo tipo di formato non è supportato da tutti i
tipi di browser, ma è tuttavia possibile installare
un plug-in per visualizzare le immagini PNG.
Questo formato supporta colori fino a 32 bit
E' un tipo di compressione senza perdita di dati,
anche per alte profondità di colore. Purtroppo
però produce file di grandi dimensioni.

. PNG-8
usa colori a 8 bit e presenta molte
analogie con i file di tipo GIF. Risulta utile per
la compressione di aree a tinta unita e mantiene
i dettagli nitidi.
PNG-24
supporta colori a 24 bit e
presenta molte analogie con i file di tipo
JPEG. È adatto sia per le immagini
fotografiche che per le immagini
geometriche e in più ha il vantaggio di
supportare la trasparenza anche su più livelli.
La risoluzione
La dimensione del file di un'immagine è
proporzionale alla sua dimensione in pixel, il
numero di pixel visualizzato per unità di lunghezza
in un'immagine viene chiamato RISOLUZIONE
dell'immagine.
La risoluzione delle immagini viene misurata in
pixel per pollice.
Nel web la risoluzione dell'immagine è
condizionata dalla risoluzione del monitor.
Il numero di pixel visualizzati per unità di lunghezza
sul monitor variano a seconda della macchina che stai
usando:


PC: ha una risoluzione del monitor pari a 96 dpi (punti
per pollice)
Mac: ha una risoluzione del monitor pari a 72 dpi
Se si considera che la risoluzione usata per la stampa è
di 300 pixel per pollice, si comprende quanto sia
differente preparare un'immagine per il web piuttosto
che un'immagine che debba poi essere stampata.
Intuitivamente si capisce che se un'immagine ha una
risoluzione più alta della risoluzione del monitor, questa
apparirà molto più grande delle sue dimensioni reali.
Suggerimenti

Impostare sempre immagini con risoluzione a 72
dpi, in modo tale da permettere a tutti i tipi di
computer di poterle visualizzare correttamente.

Se si deve ridimensionare un'immagine, ricordarsi
che nel passaggio da un'alta risoluzione a una bassa
risoluzione non c'è sostanziale perdita di qualità, ma
quando si cambia la risoluzione di un'immagine da
una più bassa a una più alta il rischio è di perdere
qualità dell'immagine
Concetti di base dell'HTML
L’ HTML (Hyper Text Mark-up Language) nasce come
linguaggio per la descrizione di testi strutturati.
.
Un file HTML non è altro che un file di testo che
può essere creato con un comune editor testuale
come il blocco note di windows
Concetti di base dell'HTML
TAG (Markup TAGs = marcatori)= non sono
altro che parole chiave contenute all'interno dei
simboli "<" (maggiore) e ">" . I TAG
forniscono le indicazioni per la formattazione al
documento oltre che all'inserimento di immagini
e altri elementi multimediali
<TAG DI INIZIO>Elemento cui si applica l'istruzione</TAG
DI FINE>

Tutti gli elementi ed il contenuto di un
documento HTML sono compresi all'interno
dei marcatori <html> e </html>. Il simbolo
"/" (slash) indica la fine del TAG.


Per scrivere codice HTML puoi utilizzare
qualsiasi editor HTML testuale, ma anche solo
il Blocco Notes di Windows.
i siti Web, prima della pubblicazione, vanno
creati in locale, cioè sul tuo hard disk. Solo in
un secondo momento vengono trasferiti nei
server attraverso (in genere) programmi di
FTP (= File transfer Protocol) mediante
passord e UserID, per cui nessuno oltre te
dovrebbe poter modificare le tue pagine.
Anatomia di una pagina Web
Il codice HTML si caratterizza sempre per la presenza al
suo interno di tre TAG fondamentali:
<HTML>
<HEAD>
<BODY>
La struttura di base di ogni documento HTML è quindi
articolata in questo modo:
<HTML>
<HEAD>
</HEAD>
<BODY>
</BODY>
</HTML>
Progettare una pagina web con notebook
<html>
<head>
<title> Benvenuti nel mio sito </title>
</head>
<body>
entra nel mio sito
</body>
</html>
Il browser sa che deve leggere tutto ciò che è contenuto
entro i TAG <HTML>...</HTML> come codice HTML
ed è in grado di riconoscere il punto di inizio e quello di
chiusura rispettivamente della testa e del corpo del
documento.
Un documento HTML si divide in due parti fondamentali:
l'intestazione e il corpo del documento.
<head> = intestazione
Gli elementi <head> e </head> sono posti
immediatamente dopo l'apertura del TAG <html> e
racchiudono l'intestazione vera e propria del documento.
In questa parte del codice si deve mettere tutte le
informazioni necessarie al browser per una corretta
interpretazione del documento, l'utente non le visualizzerà
sullo schermo.
Tali informazioni verranno visualizzate solo aprendo la
finestra del browser che fa visualizzare il codice sorgente.
L'intestazione fornisce: il titolo della pagina e le parole
chiave per i motori di ricerca.
Le parole chiave altro non sono che delle informazioni che
vengono passate al browser tramite dei TAG specifici, e
che servono ai motori di ricerca per comprendere il
contenuto del sito.
<html>
<head>
<title>titolo del documento</title>
</head>
<body>
</body>
</html>
Il tag BODY
La sezione <BODY> è il corpo principale del documento
HTML dove vanno inseriti tutti i contenuti che devono
apparire nella pagina web.
Vedremo adesso alcune caratteristiche generali del corpo
del documento, come lo sfondo della pagina, il colore del
testo ed il colore dei collegamenti ipertestuali, che possono
essere specificate mediante attributi da aggiungere al tag
<BODY>.
Per impostare un colore come sfondo della pagina web si
usa l'attributo BGCOLOR.
Se vogliamo realizzare una pagina con lo sfondo nero
scriveremo allora:
<BODY BGCOLOR="#000000">
dove il codice del colore è in formato esadecimale.
Si può indicare il colore mediante il nome in inglese
anziché il formato esadecimale:
<BODY BGCOLOR="black">
possibile impostare come sfondo della pagina web
un'immagine in formato GIF o JPEG utilizzando
l'attributo BACKGROUND secondo la sintassi:
<BODY BACKGROUND="percorso e nome del
file">
Per impostare a priori il colore del testo del testo della
pagina si usa l'attributo <TEXT> secondo la sintassi:
<BODY TEXT="#codice del colore">
Paragrafi (Tag BR, P, DIV)


Il tag <BR> equivale ad un'interruzione di riga che non
spezza il paragrafo. Infatti, il testo che segue va a capo
mantenendo tutte le caratteristiche del testo precedente
e senza che si crei spazio vuoto tra le righe. Il tag
<BR> non richiede un corrispondente tag di chiusura,
basta inserirlo nel punto in cui si vuole che la frase vada
a capo.
Il tag <P> crea invece un'interruzione di paragrafo; il
testo successivo va a capo, lasciando una riga di spazio
vuoto, e può essere formattato in maniera diversa
rispetto al testo precedente. Il tag <P> può essere usato
singolo oppure con la rispettiva chiusura </P>.
Formattazione
I principali tag di formattazione sono:
<B>... </B> : testo in grassetto;
<I>... </I> : testo in corsivo;
<U>... </U> : testo sottolineato;
<STRIKE>... </STRIKE> : testo barrato o depennato;
<SUP>... </SUP> : testo apice;
<SUB>... </SUB> : testo pedice.
Usare il tag <U>... </U> è sconsigliabile perché un testo
sottolineato può creare confusione con i collegamenti
ipertestuali che solitamente appaiono sottolineati.
Allineamenti di testo
Per impostare gli allineamenti di testo che valgono
paragrafo per paragrafo si usa l'attributo ALIGN del
tag <P> secondo la sintassi:
<P ALIGN="valore">paragrafo da allineare</P>
dove il valore di ALIGN può essere:




left per l'allineamento a sinistra,
center per l'allineamento al centro,
right per quello a destro
justify per l'allineamento giustificato
Titoli
Il tag per definire un titolo è <H>... </H> dove n è
un valore che va da 1 a 6. Ciò significa che si possono
avere sei livelli di titolazione, da <H1> (livello
superiore) a <H6> (livello inferiore).
È importante inserire dei titoli nei testi delle pagine web
perché questo incrementa notevolmente la leggibilità e
perché i motori di ricerca, quando catalogano i siti web,
spesso si basano anche sui titoli presenti nella pagina
per classificarne gli argomenti.
Immagini: Il tag IMG
Per inserire un'immagine in una pagina HTML basta
inserire il tag: <IMG SRC="nome immagine">; questo
tag non ha bisogno di chiusura.
Affinché l'immagine venga visualizzata nella pagina web
bisogna specificarne il nome, l'estensione e l'eventuale
percorso.
Usando il tag in questo modo l'immagine appare allineata
alla base della riga di testo corrispondente, senza spazi
aggiuntivi e mantiene le sue dimensioni assolute.
Adesso vedremo gli attributi del tag <IMG> che ci
permettono di personalizzare l'impaginazione
dell'immagine.
Possiamo definire le dimensioni di visualizzazione di
un'immagine specificando gli attributi WIDTH (larghezza
in pixel) e HEIGHT (altezza in pixel).
<IMG SRC="image.jpg" WIDTH="100" HEIGHT="50">
Quando si specificano le dimensioni di un'immagine è
necessario conoscerne le dimensioni effettive per
mantenere inalterato il rapporto larghezza/altezza
evitando così di deformare l'immagine.
Si può anche aggiungere un bordo intorno all'immagine
tramite l'attributo BORDER che deve essere espresso in
pixel secondo la sintassi:
<IMG SRC="image.jpg" BORDER="5">
Un attributo fondamentale del tag <IMG> è ALT (testo
alternativo). Grazie a tale attributo si può definire una
didascalia associata all'immagine.
La sintassi corretta è:
<IMG SRC="nome immagine" ALT="breve descrizione
testuale">
Pagina web-Curriculum vitae
<html>
<head>
<title> Curriculum-vitae </title>
</head>
<body bgcolor="gray">
<font face=Verdana" size"1">
<font color="blue">
<h1><a name="sopra">La mia prima pagina web </a> </h2>
</font>
<h2>Curriculum-vitae</h2>
<p><b>cognome e nome:</b> </p>
<p><b>professione:</b></p>
<p><b>esperienze lavorative:</b></p>
<p><a href=contatti.html">contatti</a></p>
</font>
</body>
</html>
Tabelle(<TABLE>)
Il tag per creare una tabella è
<TABLE> con il rispettivo </TABLE>. Nell'area compresa
tra <TABLE> e </TABLE>
ogni riga si definisce con la coppia di tag <TR>....</TR>
(Table row).
All'interno di ogni riga si creano le celle desiderate; ogni cella
si definisce
con la coppia di tag <TD>.....</TD> (Table data).
<head>
<title> tabella menù</title>
</head>
<body>
<table border="2">
<tr>
<td>pagina 1 </td>
<td>pagina 2 </td>
<td>pagina 3</td>
</tr>
</table>
<body>
</html>
I Frame
I frame sono entrati ormai nella consuetudine del web,
anche se hanno creato intorno alla loro presenza pareri
discordanti tra che li ama e chi li odia.
La parola frame significa riquadro, cornice.
Nel codice HTML puoi si possono utilizzare i frame
all'interno di una pagina Web per suddividerla in più
riquadri, o meglio in più pagine HTML.
Regola numero uno: ogni frame è una pagina HTML
indipendente.
I frame che compongono una pagina web funzionano
insieme mediante l'uso di uno o più set di frame.
Il set di frame altro non è che una pagina HTML che
definisce la struttura e le proprietà della pagina Web,
comprese le informazioni sul numero di frame
visualizzati su una pagina, la dimensione dei frame,
l'origine della pagina caricata in un frame e altre proprietà
definibili.
La pagina di un set di frame non viene visualizzata nei
browser, serve solo a memorizzare le modalità di
visualizzazione dei frame.
Supponiamo di voler costruire una pagina web che
contiene tre frame.
Di quante pagine HTML hai bisogno?
La risposta è semplice: le pagine che ti occorrono sono
quattro: il file del set di frame e i tre file con il contenuto
che viene visualizzato all'interno dei frame.
Quando si progetta una pagina mediante i set di frame, si
deve salvare ciascuno di questi quattro file per garantire
che la pagina funzioni correttamente nel browser.
I frame vengono generalmente utilizzati perché
facilitano la navigazione e l'organizzazione della
navigazione di un sito internet, a patto di non abusarne e
di saperli gestire nel migliore dei modi.
Ad esempio, in una pagina Web un frame può contenere
il menu di navigazione e un altro frame può essere
riservato al contenuto.
Poiché il menu di navigazione si trova in un frame, il
visitatore del sito può fare clic su una voce di menu e il
contenuto viene visualizzato nell'apposito frame senza
che il menu di navigazione venga modificato.
In questo modo, gli utenti si orientano più facilmente
all'interno del sito.
Tuttavia, poiché gestire un sito realizzato con i frames
può risultare complesso, spesso è possibile creare una
pagina Web senza frames in grado di fornire lo stesso
effetto di una pagina che utilizza i frames.
Ad esempio, se si desidera avere la struttura di
navigazione sul lato sinistro della pagina, è possibile
suddividere la pagina in due frames oppure includere la
struttura di navigazione sul lato sinistro di ogni pagina
del sito.
Progettare una pagina web con notebook
<html>
<head>
<title> Benvenuti nel mio sito </title>
</head>
<body>
Contenuto del mio sito
</body>
</html>
<html>
<head>
<title> Curriculum-vitae </title>
</head>
<body bgcolor="gray">
<font face=Verdana" size"1">
<font color="blue">
<h1><a name="sopra">La mia prima pagina web </a> </h2>
</font>
<h2>Curriculum-vitae</h2>
<p><b>cognome e nome:</b> </p>
<p><b>professione:</b></p>
<p><b>esperienze lavorative:</b></p>
<p><a href=contatti.html">contatti</a></p>
</font>
</body>
</html>
Disegnare un “template”
body {
margin: 0;
padding: 0;
background-color: #636363;
font-family: verdana, arial, sans-serif;
font-size: 12px;
color: #70695A;
}
Incollando il codice in un nuovo foglio di stile tramite Top Style, e
agganciandolo ad una pagina in Dreamweaver, ottenete l’anteprima
della pagina principale del sito.
56
Lezione 8
Progettare una pagina web con notebook
<html>
<head>
<title> Benvenuti nel mio sito </title>
</head>
<body>
entra nel mio sito
</body>
</html>
Contenuto tag <body>
<body>
<div id="pagina">
<div id="header">Inserire qui il contenuto per id
"header"</div>
</div>
</body>
Bisogna usare tag div annidati se vogliamo che i box siano
contenuti uno nell’altro!! Nel caso dell’esempio il tag con
id=“pagina” contiene il nostro primo box con tag id=“header”.
58
Lezione 8
Progettare una pagina web con notebook
<html>
<head>
<title> Benvenuti nel mio sito </title>
</head>
<body>
entra nel mio sito
</body>
</html>
Progettare una pagina web con notebook
<html>
<head>
<title> Benvenuti nel mio sito </title>
</head>
<body>
entra nel mio sito
</body>
</html>