Sei sulla pagina 1di 48

COME CREARE

UNA PAGINA
WEB
Ing. Bellia Paolo A.A. 2012 - 2013
INDICE
La nascita di Internet;
Modalit di costruzione;
HTML;
LA NASCITA DI INTERNET
Lo sbarco delluomo sulla Luna stato
indubbiamente
levento che ha caratterizzato il 1969 come lalba
di
una nuova era. Ma esiste almeno un altro motivo
perch
lo si possa ritenere epocale:
il 1969 lanno di nascita di
Internet
Esiste una stretta correlazione tra Internet e la
conquista dello spazio.
LA NASCITA DI INTERNET
Nel 1957 lUnione Sovietica realizz un
importantissimo progetto spaziale: La messa in
orbita dello Sputnik.
LA NASCITA DI INTERNET
Fu un evento che diede un notevole scossone tanto
allorgoglio tecnologico degli Stati Uniti dAmerica
quanto alla loro sicurezza di primato in campo
militare.
Il Dipartimento della Difesa degli Stati Uniti nel 1958
diede vita allARPA (Advanced Research Projects Agency)
LA NASCITA DI INTERNET
Dopo lulteriore successo sovietico in campo
spaziale (1961 Primo uomo sulla luna, Yuri Gagarin),
Gli Stati Uniti decisero di stanziare maggiori
finanziamenti nel campo della ricerca aerospaziale e
costituirono la NASA.
lArpa dovette cercarsi un nuovo oggetto di studio
parallelo; lo trov nella scienza dellinformazione e
della comunicazione.
LA NASCITA DI INTERNET
Lagenzia decise quindi di avviare un progetto, che
desse la possibilit alle macchine che avevano a
disposizione, di comunicare e trasferire dati.
1969 nasce
ARPAnet.
LA NASCITA DI INTERNET
Secondo molte biografie, lobiettivo primario di
Arpanet era di garantire la sicurezza dei dati in caso
di guerra nucleare.
In realt lo scopo iniziale, era quello di ottimizzare lo
sfruttamento delle costose risorse informatiche nel
campo della ricerca;
Questa ipotesi militare, dovuta alla locazione
della sede dellArpa (Pentagono, Washington).
LA NASCITA DI INTERNET
UCLA (Universit di Los Angeles)
dotata di un Xerox DSX-7
UCSB (Universit di Santa Barbara)
dotata di un IBM 360/75
lUniversit dello Utah
dotata di un un DEC PDP-10
SRI (Stanford Research Institute)
dotata di un XDS 940
Ad ognuno di essi fu
consegnato:
IMP (Interface Message
Processor);
computer dedicato alla
gestione del
traffico dati;
LA NASCITA DI INTERNET
Come primo esperimento di collegamento, il
professor
Kleinrock dellUCLA tent, da Los Angeles, di
accedere al sistema Xds di
Stanford con un
gruppo di studenti
che seguiva le
operazioni per
telefono, collegato
con altri studenti
presso lo SRI.
LA NASCITA DI INTERNET
Nel 1971 Arpanet era formata da 15 nodi e 23 host,
fra i quali entr a far parte anche la Nasa; gli utenti
erano qualche centinaio.
I software di
interfacciamento
e di trasferimento
dati
seguivano


un protocollo denominato FTP (File Transfer
Protocol, utilizzato ancor oggi).
LA NASCITA DI INTERNET
Gli sviluppi erano molto interessanti, per cui nel 1972
fu indetta LInternational Conference on Computer
Communications.

Levento ebbe
successo e
costitu lo
stimolo a
continuare
gli studi e le
ricerche.
LA NASCITA DI INTERNET
Grazie alla nascita di studi paralleli (Aloha-net,
sistema basato sulle comunicazioni satellitari, fu
condotto dalluniversit delle Hawaii), ci fu una
crescita esponenziale delle modifiche. La pi
importante fu linserimento di nuove specifiche di
comunicazione dei dati, TCP (Transmission Control
Protocol).
LA NASCITA DI INTERNET
nel 1978 la DARPA svilupp unevoluzione del
protocollo, che fu scomposto in due parti:
TCP per la gestione dei pacchetti di dati;
IP (Internet Protocol) per la loro canalizzazione;
LA NASCITA DI INTERNET
Agli inizi degli anni 80 Arpanet fu estesa dalla
National Science Foundation (NSF), che inizi la
costruzione
di reti pi economiche
tra i vari poli
universitari,
collegate
tra loro
mediante
il TCP/IP.

LA NASCITA DI INTERNET
Nel 1983 Arpanet fu divisa dalla Defense
Communication Agency in due sezioni:
Nello stesso periodo, John Postel cre un nuovo
protocollo
per la gestione della posta elettronica ( SMTP -
Simple Mail
Transfer Protocol), ed insieme a Craig Partridge e
Paul Mockapetris studi un nuovo sistema di
identificazione
dei nodi della rete.
La prima chiusa ed a carattere militare (Milnet);
La seconda a carattere scientifico (Arpanet);
LA NASCITA DI INTERNET
Il risultato della loro
ricerca fu il Domain
Name System (che
nella rete ci
consente di
identificare, ad
esempio, il server
che ha numero
ip 15.61.3.56 con
un determinato nome,
come hotmail.com).
LA NASCITA DI INTERNET
Da quel momento in avanti lo sviluppo della
tecnologia della rete and a toccare unaltra
caratteristica:
la velocit di trasmissione dei dati
Le Universit di Princeton e Pittsburgh, assieme ad
altri tre centri di ricerca, furono collegate dalla NSF
con una dorsale con una linea a 56K.
Il successo del collegamento convinse tutte le
universit
americane a sottoscrivere lofferta della NSF,
originando NSFnet.
LA NASCITA DI INTERNET
La vecchia Arpanet segnava il passo ed in
confronto a NSFnet si dimostrava ormai obsoleta.
Nel 1989 la Darpa trasfer sulla nuova rete tutti i siti e
decret ufficialmente la fine di Arpanet.
Tutto questo avvenne parallelamente alla caduta del
Muro di Berlino, che segn unaltra fine: quella della
guerra fredda, che vide nascere e crescere una rete
che avrebbe
cambiato il mondo.
LA NASCITA DI INTERNET
Allinizio degli anni 90 le politiche di accesso a
NSFnet vennero modificate per consentire lingresso
nella rete anche per fini commerciali.
La crescita del numero di utenti divenne quasi
incontrollabile. Dal momento che non era possibile
tenere sotto controllo anche la loro qualit, ben presto
si rese necessario pensare alle misure di sicurezza da
adottare sulla rete.
Philip Zimmerman inventa Pretty Good Privacy
(PGP)
LA NASCITA DI INTERNET
Nel 1991 inizi la collaborazione europea alla
struttura di Internet: il Cern di Ginevra svilupp un
sistema per consultare in modo intuitivo informazioni,
dati e immagini, che diede corpo al World Wide
Web.
La consultazione fu cos fluida da essere definita
surfing, questo avvenne grazie allHyper Text
Markup Language (HTML), il linguaggio con cui da
quel momento in avanti vennero composti i dati da
consultare.
LA NASCITA DI INTERNET
Presto nacquero anche gli strumenti di consultazione
e ricerca come Veronica (1992), che precedette i
capostipiti
degli attuali browser:
Tutte queste premesse costituirono la base di una
rete caratterizzata dal rapido sviluppo commerciale
e dallaccesso sempre pi capillare.
Mosaic (1993);

Netscape Navigator (1994);

Microsoft Internet Explorer (1995);
MODALIT DI COSTRUZIONE
Per creare una pagina web, devi prima di tutto
scegliere se vuoi una soluzione gratuita o a
pagamento.
Soluzione gratuita: puoi utilizzare dei servizi gratuiti
che permettono di creare pagine web senza
spendere nulla e che ospitano fisicamente anche i
tuoi contenuti.
MODALIT DI COSTRUZIONE
La maggior parte di servizi che ti permette di creare
una pagina web gratis, o un sito web gratuito nata
anni fa come piattaforma per creare blog.
Un blog un piccolo sito, generalmente utilizzato
per pubblicare articoli e news personali.
L'evoluzione del blog il vero e proprio sito
internet, di cui fanno parte tutte le pagine web che
desideri creare. Quindi il sito non pi uno spazio
dove si pubblicano news, ma diventa a tutti gli
effetti un contenitore.
MODALIT DI COSTRUZIONE
Fra i vari Hosting gratuiti che vi sono in rete, i pi famosi sono:

Blogger ti permette di creare un blog, ma anche di
espanderlo fino a farlo diventare un sito ricco di diverse
pagine web;

Doodlekit una piattaforma web che ti permette di creare
pagine web ricche di grafica, video, immagini e contenuti. Le
pagine create con questo servizio sono ospitate all'interno
della piattaforma Doodlekit. Questo significa che non saranno
posizionate su un sito di tua propriet, ma rimarranno ospitate
gratuitamente in un sottodominio di doodlekit;
MODALIT DI COSTRUZIONE
Virgilio Siti Xoom ti da a disposizione uno spazio web
gratuito, dove puoi caricare le tue pagine web. Si prevede che
tu abbia creato le tue pagine web precedentemente;

Webnode ti permette di creare pagine web gratis
selezionando diversi template preimpostati. Questo significa
che puoi creare il testo delle tue pagine, includendo foto e
video senza doverti preoccupare del "vestito" del tuo sito web
poich puoi scegliere tra diversi modelli preconfezionati;

Jimdo di questa applicazione web-based ti permette di
creare una pagina passo passo, seguendo i suggerimenti che
ti vengono dati dall'interfaccia del programma;
MODALIT DI COSTRUZIONE
Soluzione a pagamento: si ha il vantaggio di essere
indipendente da chi ospita le tue pagine e di avere la
massima libert nei contenuti, nella grafica e nella
progettazione. Si compone di tre passaggi:

Registrare un dominio;
Scegliere una piattaforma di pubblicazione
(scegliere
lHosting);
Imparare a scrivere dei contenuti che portano visite;

HTML
il linguaggio che
permette
di descrivere una pagina
web
HTML
W3C: World Wide Web Consortium

L'organizzazione che si occupa di standardizzare
la
sintassi del linguaggio HTML;

Ha rilasciato negli anni diverse versioni di questo
linguaggio
I. HTML 2.0 (1993)
II. HTML 3.2 (1997)
III. HTML 4.0 (1997)
IV. HTML 4.0.1 (1999)

L'HTML si recentemente evoluto in XHTML
(HTML
riformulato come linguaggio XML)
HTML
Il formato da utilizzare per costruire la propria pagina
il seguente:
Ogni elemento racchiuso all'interno di marcatori
detti tag, costituite da una sequenza di caratteri
racchiusa tra due parentesi angolari.
Esempio: Ciao <br> a tutti, dar
come output della pagina web:


il tag serve per indicare un ritorno a
capo
Ciao
a tutti
<marcatore> Testo </marcatore>
<TAG attributi> contenuto </TAG>
HTML
HTML case insensitive.
del tutto indifferente scrivere i tag in maiuscolo o in
minuscolo :
<p align=right> = <P ALIGN=RIGHT>
Alcuni particolari tag non hanno contenuto perch ad
esempio indicano la posizione di alcuni elementi
(come il tag delle immagini), conseguentemente
questi tag non hanno neanche chiusura. La loro
forma sar dunque:
<IMG widht="20" height="20" src="Immagine.gif">
HTML
Un documento HTML comincia con
l'indicazione della definizione del tipo di
documento da caricare . (Document Type
Definition o DTD).
La struttura pi esterna (<html> e </html>)
quella che delimita l'intero documento.
All'interno dei tag <html> lo standard
prevede la definizione di due sezioni:













La sezione di intestazione o header, che
contiene informazioni di controllo che non
vengono visualizzate dal browser;
La sezione del corpo o body, che
contiene la parte informativa vera e
propria, ossia il testo, le immagini e i
collegamenti che costituiscono la
parte visualizzata dal browser.
HTML
<html>

<head>
<title>La prima pagina Web di Mario Rossi</title>
</head>

<body>
<h1 align="center">Home page di Mario Rossi</h1>
<p>Questa &egrave; la mia prima pagina in HTML.</p>
</body>

</html>
HTML
I Tag dellHTML si suddividono nelle seguenti categorie:
Basilari;
Formattazione;
Moduli;
Frames;
Immagini;
Collegamenti (Ipertesti);
Liste;
Tabelle;
Stili;
Metainformazioni;
Programmazione;
HTML
<h1> to <h6> Definizione delle intestazioni HTML;
<!--...--> Definisce un commento;
<html>
<head>
<title>La prima pagina Web di Mario Rossi</title>
</head>
<body>
<h1 align="center">Home page di Mario Rossi</h1>
<p>Questa &egrave; la mia prima pagina in HTML.</p>
<! ciaoooooo >
<h2>Intestazione di secondo livello</h2>
<h3>Intestazione di terzo livello</h3>
<h4>Intestazione di quarto livello</h4>
<h5>Intestazione di quinto livello</h5>
<h6>Intestazione di sesto livello</h6>
</body>
</html>
HTML
<p> Definisce un paragrafo;
<p>Questa riga</p><p>appare spezzata.</p>
<p>Quest'altra
riga, invece,
appare scritta tutta
di seguito
nonostante gli a capo.</p>
Questa riga
appare spezzata.
Quest'altra riga, invece, appare scritta tutta di seguito nonostante gli a capo.
HTML
<ul><li></li><ul> oppure <ol><li></li><ol> definiscono le liste;
<ul>
<li>prima voce</li>
<li>seconda voce</li>
<li>terza voce</li>
</ul>
Prima voce
Seconda voce
Terza voce
<ol type=1>
<li>prima voce</li>
<li>seconda voce</li>
<li>terza voce</li>
</ol>
1. Prima voce
2. Seconda voce
3. Terza voce
HTML
<p align=right">testo</p> allinea il testo a destra;
<p align="right"> Nel mezzo del cammin di nostra vita mi
ritrovai per una selva oscura ch la diritta via era smarrita </p>
Nel mezzo del
cammin di nostra vita
mi ritrovai per una
selva oscura ch la
diritta via era smarrita
HTML
<strong></strong> Testo molto rilevante (viene di norma
reso
in grassetto);
<em></em> Testo enfatizzato (viene reso di norma in
corsivo);
<cite></cite> Testo citato (viene reso di norma in corsivo);
<address></address> Indirizzo (viene reso in corsivo o in
grassetto con un carattere piccolo
e
allineato a sinistra);
<b></b> Bold (grassetto);
<i></i> Italic (corsivo);
<u></u> Underlined (sottolineato);
<big></big> Carattere grande;
<small></small> Carattere piccolo;
HTML
background="file-grafico"
permette di indicare un file grafico (in formato GIF o Jpeg) che viene
inserito sullo sfondo della pagina; se l'immagine pi piccola rispetto alla
pagina, essa viene automaticamente duplicata e affiancata alle sue copie
come mattonelle su una parete;
bgcolor="#colore RGB" permette di assegnare un colore allo sfondo;
text="#colore RGB" indica il colore del testo all'interno della pagina;
link="#colore RGB" indica il colore dei link;
vlink="#colore RGB" indica il colore dei link gi seguiti;
alink="#colore RGB" indica il colore dei link mentre si attivano con il
mouse;
Gli attributi di Body:
Ad esempio:
<body bgcolor="#FFFFFF" text="#990000" link="00FF00" vlink="#00AA00" alink="#FFFF00">
HTML
<font size="n">testo</font>
Dove 'n' un numero che va da 1 a 7, ad es.: <font
size="4">testo</font>;
Gli attributi di font:
<font size="+4" color=red face=Arial>Ciao a tutti</font>
<font color=blue>testo blu</font>
Dove blue il colore che si vuole dare alla scritta;
<font face=Arial>testo</font>
Dove Arial il tipo di carattere che si vuole dare alla scritta;
Ciao a tutti
HTML
<img src=logo.gif alt=ciao a tutti />
Fino ad ora abbiamo visto come inserire e formattare il testo
allinterno delle nostre pagine Web. Naturalmente possiamo
inserire anche delle immagini: diagrammi e grafici, fotografie
etc
I formati ammessi nel Web sono sostanzialmente tre: GIF - JPG - PNG
Keyword Descrizione
img Abbreviazione di image (immagine), il nome del tag per inserire
le immagini
src Sta per source (origine), il percorso (URL) in cui il browser
trover il file da mostrare
alt il testo alternativo, ovvero il testo che appare se, per qualche
motivo, il browser non riesce a mostrare limmagine. Possiamo
anche omettere questo attributo, ma risulta utile per laccessibilit e
per i motori di ricerca
HTML
Dal momento che il browser normalmente non sa quali siano
le dimensioni dellimmagine, finch questa non sia caricata
completamente, unottima abitudine quella di indicare gi
nel codice la larghezza (width) e laltezza (height)
dellimmagine: in questo modo si evita di vedere la pagina
costruirsi man mano che viene caricata, poich stiamo dando
al browser unidea dellingombro. Ad esempio:
<img src="logo.gif" border="3" width="224" height="69" />
inoltre possibile specificare la grandezza (in pixel) del bordo
attorno allimmagine.
HTML
Una delle caratteristiche che ha fatto la fortuna del web
lessere costituito non da testi ma da ipertesti.
I link sono il ponte che consente di passare da un testo
allaltro. In quanto tali, i link sono formati da due componenti:
il contenuto che nasconde
il collegamento
la parte visibile del link, e proprio per questo
lutente deve essere sempre in grado di capire
quali sono i collegamenti da cliccare allinterno
della pagina
la risorsa verso cui il
collegamento punta
Si tratta di unaltra pagina (sullo stesso server o
su un server diverso), oppure un collegamento
interno a un punto della pagina stessa
HTML
Ecco la sintassi per creare un link con riferimento a un sito web:
<a href="url del documento di destinazione">
testo</a>
<a href="mario.htm">testo cliccabile</a>
Il file 'mario.htm' si trova nella stessa directory nella quale
memorizzato il file che contiene il link
<a href="biografia/mario.htm">testo cliccabile</a>
Il file 'mario.htm' si trova in una sub-directory ('biografia' nel
nostro caso)
<a href="../mario.htm">testo cliccabile</a>
Il file 'mario.htm' si trova nella directory superiore rispetto a quella
che contiene il link
<a href="../biografia/mario.htm">testo cliccabile</a>
Il file 'mario.htm' si trova in una directory che gerarchicamente
allo stesso livello di quella che contiene il link
HTML
Tabelle
<caption
>
il titolo con un commento
esplicativo sulla tabella
<thead> lintestazione, la parte
iniziale della tabella, quella
che contiene ad esempio
indicazioni sul contenuto
delle celle
<tfoot> il piede, la conclusione
della tabella, quella che
consente ad esempio di
tirare le somme
<tbody> il corpo, la parte centrale
con il contenuto vero e
proprio della tabella
HTML
Tabelle
<table width="300" height=200
border="1">
<tr>
<td>prima cella</td>
<td>seconda cella</td>
</tr>
<tr>
<td>terza cella</td>
<td>quarta cella</td>
</tr>
</table>
prima cella seconda cella
terza cella quarta cella


HTML