WEB

1.0
HTML e dintorni

Informa7ca 2014/15

World Wide Web

La data di nascita del World Wide Web viene comunemente
indicata nel 6 agosto 1991, giorno in cui l'informa7co inglese
Tim Berners-Lee pubblic il primo sito web dando cos vita al
fenomeno "WWW" (deMo anche "della tripla W").

Informa7ca 2014/15

World Wide Web

Il conceMo del Web ha integrato mol7 diversi sistemi
informa7vi dispara7, creando uno spazio immaginario
astraMo in cui le dierenze tra essi fossero ininuen7.
Il Web doveva includere ogni sorta di informazione su
qualunque sistema. Lunica idea comune necessaria a meMere
ci assieme fu iden7care un documento tramite lo Universal
Resource Iden1er (URI).
DireMamente da ci sono come piovute architeMure (design)
di protocollo (come h-p) e di forma7 di da7 (come HTML)
che hanno permesso ai computer di scambiarsi informazioni
mappando i propri forma7 locali in standard in grado di
orire interoperabilit globale.
Informa7ca 2014/15

Storia del Web

WEB 1.0 (Web dei da7)
Pagine web i cui contenu7 sono crea7 dai tecnici del web
Motori di ricerca basa7 su parole chiave

WEB 2.0 (Web dei da7)

Si7 i cui da7 vengono crea7 dagli uten7 stessi del web
eBay
Wikipedia
Blog

Motori di ricerca

Web 3.0 (web dei signica7)

Web seman7co?

Informa7ca 2014/15

Denizioni
WWW -- una infrastruMura soaware costruita
sopra Internet
HTTP -- HyperText Transport Protocol,
u7lizzato per trasmeMere le pagine web
HTTPS -- HTTP Sicuro (usa la cifratura)
HTML -- HyperText Markup Language,
linguaggio per descrivere le pagine web

Informa7ca 2014/15

HTML
HTML
HyperText Markup Language
Sviluppato al CERN dal 1989
Pubblicato nel 1991
Browser: Mosaic
Web rende i servizi esisten7 obsole7
WAIS, Hytelnet, Gopher

Informa7ca 2014/15

HTML
LHTML un linguaggio di marcatura per la creazione di
ipertes7 (Hyper-Text Markup Language)
LHTML non un linguaggio di programmazione. LHTML un
linguaggio di descrizione della struMura e delle pagine di un
documento web.

Informa7ca 2014/15

Strumen7
Browser
Ha il compito di mostrare le pagine HTML
Esempi:
Internet Explorer, Firefox, Safari, Opera, Chrome

Editor
Crea e modica le pagine HTML.
Esempi:
Notepad, TextPad, editor HTML
Informa7ca 2014/15

Editor HTML
Editor HTML Online:
hMp://www.quackit.com/html/online-html-editor/

hMp://htmledit.squarefree.com

Informa7ca 2014/15

Funzionamento (1)
1. La visione di una pagina web inizia digitandone l'URL
nell'apposito campo del browser web oppure cliccando su un
collegamento ipertestuale presente in una pagina web
precedentemente visualizzata o in altra risorsa come ad
esempio un'e-mail. Il browser web a quel punto dietro le
quinte inizia una serie di messaggi di comunicazione con il
web server che ospita quella pagina con lo scopo di
visualizzarla sul terminale utente.
2. Per prima cosa la porzione di server-name dell'URL risolta
in un indirizzo IP usando il database globale e distribuito
conosciuto come Domain Name System (in sigla DNS).
Questo indirizzo IP necessario per inviare e ricevere
pacchem dal server web.
Informa7ca 2014/15

10

Funzionamento (2)
3. A questo punto il browser richiede le informazioni inviando
una richiesta a quell'indirizzo. In caso di una 7pica pagina
web, il testo HTML di una pagina richiesto per primo ed
immediatamente interpretato dal browser web che,
successivamente, richiede eventuali immagini o le che
serviranno per formare la pagina deni7va.
4. Una volta ricevu7 i le richies7 dal web server, il browser
formaMa la pagina sullo schermo seguendo le speciche
HTML, CSS, o di altri linguaggi web. Ogni immagine e le altre
risorse sono incorporate per produrre la pagina web che
l'utente vedr.
Informa7ca 2014/15

11

Principi di HTML

Informa7ca 2014/15

12

Elemen7 e tag
Gli elemen5 forniscono la struMura di un documento HTML e
dicono come il browser dovr visualizzare il tuo sito web. In
generale gli elemen7 sono forma7 da un marcatore (tag)
iniziale, del contenuto e un tag nale.
Tag sono le e7cheMe che si usano per marcare l'inizio e la ne
di un elemento.
Tum i tag hanno lo stesso formato: iniziano con il segno
minore di "<" e terminano con il segno maggiore di ">".
I tag di apertura: <html> e i tag di chiusura: </html>

Informa7ca 2014/15

13

Tag
Tag di
Apertura

<h1>Testo da formaMare</h1>

Tag di
Chiusura

Marcatori di formaMazione senza testo.

<br/>
Un tag pu avere degli aMribu7

<meta name ="Author" content =Pinco Pallino">

Tag

AMributo

Valore dellaMributo
Informa7ca 2014/15

14

Esempio
L'elemento b viene usato per i caraMeri in grasseMo. TuMo il
testo tra il tag di apertura <b> e il tag di chiusura </b> viene
visualizzato sul browser con caraMeri in grasseMo. ("b"
l'abbreviazione della parola inglese "bold".)

<b>This text must be bold.</b>

This text must be bold.

Informa7ca 2014/15

15

Esempio
Gli elemen7 h1, h2, h3, h4, h5 e h6 vengono usa7 per i 7toli
(h l'iniziale della parola inglese "heading"), dove h1 il
primo livello e normalmente il testo pi grande, h2 il
secondo livello e normalmente un testo leggermente pi
piccolo, e h6 il sesto e ul7mo livello della gerarchia dei 7toli
e normalmente viene rappresentato con un testo piccolo.
<h1>This is a heading</h1>
<h2>This is a subheading</h2>

This is a heading!
This is a subheading
Informa7ca 2014/15

16

HTML
LHTML un linguaggio di marcature che ci permeMe di
rendere visibili le nostre informazioni sul web formaMando i
nostri tes7 allinterno di pagine web

Informa7ca 2014/15

17

HTML
LHTML un linguaggio di marcature che ci permeMe di
rendere visibili le nostre informazioni sul web formaMando i
nostri tes7 allinterno di pagine web

Marcatori HTML
Informa7ca 2014/15

18

HTML
LHTML un linguaggio di marcature che ci permeMe di
rendere visibili le nostre informazioni sul web formaMando i
nostri tes7 allinterno di pagine web
<B>

Possiamo formaMare il testo in

grasseMo (B = BOLD) o in
corsivo (I = ITALICS)

Informa7ca 2014/15

<I>

19

HTML
LHTML un linguaggio di marcature che ci permeMe di
rendere visibili le nostre informazioni sul web formaMando I
nostri tes7 allinterno di pagine web

Possiamo suddividerlo in
paragra (<DIV>)

Informa7ca 2014/15

<DIV>

20

HTML
LHTML un linguaggio di marcature che ci permeMe di
rendere visibili le nostre informazioni sul web formaMando I
nostri tes7 allinterno di pagine web

E allinearlo a destra (aMributo

ALIGN) Informa7ca 2014/15

ALIGN = right

21

Approfondimen7
Esistono pochi elemen7 che hanno l'apertura e la chiusura
nello stesso tag. Ques7 elemen7 vengono chiama7 elemen7
vuo7. Non sono collega7 a specici passaggi nel testo, ma
piuMosto sono e7cheMe isolate, come per esempio, a linea
vuota che si indica con <br />.
A mol7 browser non interessa se scrivi i tag tum maiuscoli,
tum minuscoli o mis7. <HTML>, <html> o<HtMl>
normalmente forniscono lo stesso risultato. In ogni caso il
modo corre-o quello di scriverli tum con i cara-eri
minuscoli.
Un sito web con7ene uno o pi documen7 HTML. La
navigazione sul Web consiste nellaprire diversi documen7
HTML.
Informa7ca 2014/15
22

StruMura di un documento HTML

<html>
<head>

</head>
<body>

</body>
</html>

Informa7ca 2014/15

23

HTML Page Format

<HTML>
<HEAD>
<TITLE> Qis web! </TITLE>
</HEAD>
<BODY>
<H1> Hello World </H1>
<! Rest of page goes here. This is a comment. >
</BODY>
</HTML>

Informa7ca 2014/15

24

Il Linguaggio HTML: Head

Il tag <head> opzionale

Il tag <head> pu contenere:

Il Tag <7tle>

<7tle>The global structure of an HTML Document</7tle>

Pi Meta Tags <meta>

<meta name="Author" content=Pinco Pallino">

Informa7ca 2014/15

25

Il Linguaggio HTML: Body

Il tag <body> delimita il corpo del documento.
Alcuni AMribu7:

background = uri
Denisce lURI di una immagine da usare come sfondo per la pagina.
text = color
Denisce il colore del testo.
bgcolor= color
In alterna7va a background denisce il colore di sfondo della pagina

Il Colore: #RRGGBB


Red = "#FF0000

Blue = "#0000FF"

Black = "#000000
Yellow = "#FFFF00

Informa7ca 2014/15

26

Headings
<H1 ...> text </H1> -- largest of the six
<H2 ...> text </H2>
<H3 ...> text </H3>
<H4 ...> text </H4>
<H5 ...> text </H5>
<H6 ...> text </H6> -- smallest of the six

ALIGN="posi1on" --lea (default), center or right
Informa7ca 2014/15

27

Headings
<HTML>
<HEAD>
<TITLE>Document Headings</TITLE>
</HEAD>
<BODY>
Samples of the six heading types:
<H1>Level-1 (H1)</H1>
<H2 ALIGN="center">Level-2 (H2)</H2>
<H3><U>Level-3 (H3)</U></H3>
<H4 ALIGN="right">Level-4 (H4)</H4>
<H5>Level-5 (H5)</H5>
<H6>Level-6 (H6)</H6>
</BODY>
</HTML>

Informa7ca 2014/15

28

Il Linguaggio HTML: Paragra

Il Tag <p> delimita un paragrafo:
<p>Quel ramo del lago di Como, che volge a
mezzogiorno, tra due catene non interroMe di mon7,
tuMo a seni e a gol, a seconda dello sporgere e del
rientrare di quelli, vien, quasi a un traMo, a
ristringersi, e a prender corso e gura di ume, tra un
promontorio a destra, e un'ampia cos7era dall'altra
parte;<br/> e il ponte, che ivi congiunge le due rive,
par che renda ancor pi sensibile all'occhio questa
trasformazione, e segni il punto in cui il lago cessa, e
l'Adda rincomincia, per ripigliar poi nome di lago dove
le rive, allontanandosi di nuovo, lascian l'acqua
distendersi e rallentarsi in nuovi gol e in nuovi
seni.</p>

AMribu7 del Tag <p>:

align = lea|center|right|jus7fy
Informa7ca 2014/15

29

CaraMeri speciali
Character

Use

<

&lt;

>

&gt;

&

&amp;

"

&quot;

Space

&nbsp;
Informa7ca 2014/15

30

Il Linguaggio HTML: Font Style

FormaMazione del testo:


<M>monospaced text</M> monospaced text
<i>italic text</i>

italic text
<b>bold text</b>

bold text
<big>big text</big>

big text
<small>small text</small> small text
<u>underlined text</u>
underlined text

Informa7ca 2014/15

31

Fonts
<FONT COLOR="red" SIZE="2" FACE="Times Roman">
This is the text of line one </FONT>
<FONT COLOR="green" SIZE="4" FACE="Arial">
Line two contains this text </FONT>
<FONT COLOR="blue" SIZE="6" FACE="Courier"
The third line has this additional text </FONT>
This is the text of line one

Line two contains this text

The third line has this additional text

Nota: <FONT> stata deprecata in Informa7ca

favore d2ei
CSS.
014/15

32

S7li di caraMere: sico

<H1>Physical Character Styles</H1>
<B>Bold</B><BR>
<I>Italic</I><BR>
<TT>Teletype (Monospaced)</TT><BR>
<U>Underlined</U><BR>
Subscripts: f<SUB>0</SUB> + f<SUB>1</SUB><BR>
Superscripts: x<SUP>2</SUP> + y<SUP>2</SUP><BR>
<SMALL>Smaller</SMALL><BR>
<BIG>Bigger</BIG><BR>
<STRIKE>Strike Through</STRIKE><BR>
<B><I>Bold Italic</I></B><BR>
<BIG><TT>Big Monospaced</TT></BIG><BR>
<SMALL><I>Small Italic</I></SMALL><BR>
<FONT COLOR="GRAY">Gray</FONT><BR>
<DEL>Delete</DEL><BR>
<INS>Insert</INS><BR>

Informa7ca 2014/15

33

S7li di caraMere: logico

<H1>Logical Character Styles</H1>
<EM>Emphasized</EM><BR>
<STRONG>Strongly Emphasized</STRONG><BR>
<CODE>Code</CODE><BR>
<SAMP>Sample Output</SAMP><BR>
<KBD>Keyboard Text</KBD><BR>
<DFN>Definition</DFN><BR>
<VAR>Variable</VAR><BR>
<CITE>Citation</CITE><BR>
<EM><CODE>Emphasized Code</CODE></EM><BR>
<FONT COLOR="GRAY">
<CITE>Gray Citation</CITE></FONT><BR>
<ACRONYM TITLE="Java Development Kit">
JDK Acronym</ACRONYM>

Informa7ca 2014/15

34

Ordered (Numbered) Lists

<OL TYPE="1">
<LI> Item one </LI>
<LI> Item two </LI>
<OL TYPE="I" >
<LI> Sublist item one </LI>
<LI> Sublist item two </LI>
<OL TYPE="i">
<LI> Sub-sublist item one </LI>
<LI> Sub-sublist item two </LI>
</OL>
</OL>
</OL>
Informa7ca 2014/15

35

Il Linguaggio HTML: Liste

Liste non ordinate:

Type: disc,circle,square

<ul type=disc>
<li>Unordered informa7on.</li>
<li>Ordered informa7on.</li>
<li>Deni7ons.</li>
</ul>

Liste ordinate:

Unordered informa7on.
Ordered informa7on.
Deni7ons.

Type: 1 (1,2,..), a (a,b,..), A (A,B,..), i (i,ii,..), I (I,II,..)

<ol type=I>
<li>Unordered informa7on.</li>
<li VALUE=4>Ordered informa7on.</li>
<li>Deni7ons. </li>
</ol>

I.
V.
VI.

Unordered informa7on.
Ordered informa7on.
Deni7ons.

Liste di denizione:
<dl>
<dt><strong>UL</strong></dt>
<dd>Unordered List.</dd>
<dt><strong>OL</strong></dt>
<dd>Ordered List.</dd>
</dl>

UL
Unordered List.
OL
Ordered List.

Informa7ca 2014/15

36

Il Linguaggio HTML: Links

Il Link il costruMo di base dellipertesto.
Il Link una connessione fra una risorsa Web ed unaltra.
ConceMo semplice, ma chiave per laermazione dellHTML
Link due estremi dem anchors e una direzione
source anchor des7na7on anchors
Il des7na7on anchors pu essere una qualsiasi risorsa web
(un immagine, un video, un eseguibile, un documento HTML)
La risorsa di des7nazione si omene visitando il link

Informa7ca 2014/15

37

<A> Anchors (HyperLinks)

Link a URL assoluta:

If you get spam, contact <A HREF="hMp://www.microsoa.com">
Microsoa</A> to report the problem.

Link a URL rela5va:

See these <A HREF=/references"> references </A>
concerning our ne products.

Link a una sezione di una URL:

Amazon provided a <A HREF="www.amazon.com/#reference">
reference for our company. </A>
Informa7ca 2014/15

38

Hyperlinks
<BODY>
<H3>Welcome to <A HREF="http://www.cs.virginia.edu">
<STRONG>Computer Science</STRONG></A>
at the <A HREF="www.virginia.edu">University of Virginia.</A>
</H3>
</BODY>

Informa7ca 2014/15

39

Il Linguaggio HTML: Immagini

Tag: <img>
AMributo SRC (obbligatorio)
WIDTH, HEIGHT possono essere in pixel o percentuali
dellimmagine
WIDTH="357"
HEIGHT="50%"

Limmagine viene scalata per rispeMare le dimensioni

Informa7ca 2014/15

40

Il Linguaggio HTML: Tabelle

<TABLE> table tag
<CAPTION> op7onal table 7tle
<TR> table row
<TH> table column header
<TD> table data element

Informa7ca 2014/15

41

Il Linguaggio HTML: Tabelle

<TABLE BORDER=1>
<CAPTION>Table Caption</CAPTION>
<TR><TH>Heading1</TH><TH>Heading2</TH></TR>
<TR><TD>Row1 Col1 Data</TD><TD>Row1 Col2 Data</TD></TR>
<TR><TD>Row2 Col1 Data</TD><TD>Row2 Col2 Data</TD></TR>
<TR><TD>Row3 Col1 Data</TD><TD>Row3 Col2 Data</TD></TR>
</TABLE>

Informa7ca 2014/15

42

Il Linguaggio HTML: Tabelle

<table border="1" >
<cap7on align=top><em>A test table with merged cells</em></cap7on>
<tr>
<th rowspan="2"></th>
<th colspan="2">Average</th>
<th rowspan="2">Red<br/>eyes</th>
</tr>
<tr><th>height</th><th>weight</th></tr>
<tr><th>Males</th><td>1.9</td><td>0.003</td><td>40%</td></tr>
<tr><th>Females</th><td>1.7</td><td>0.002</td><td>43%</td></tr>
</table>

Informa7ca 2014/15

43

Il Linguaggio HTML: Tabelle -

Esempio

Informa7ca 2014/15

44

CSS

Informa7ca 2014/15

45

Il Linguaggio HTML: Style sheets

LHTML nato in ambien7 scien7ci
Linguaggio orientato pi ai contenu7 che alla
presentazione
Sono state faMe forzature per aggirare le limitazioni
Estensioni proprietarie
Conversione del testo in immagini
Uso di immagini per il controllo degli spazi bianchi
Uso delle tabelle per la formaMazione

Le forzature presentano spesso eem collaterali

Scopo degli Style sheets risolvere parte di tali limitazioni
CSS = Cascading Style Sheet
Informa7ca 2014/15

46

Il Linguaggio HTML: id e class

AMributo id
id = name
assegna un nome univoco ad un elemento
id u7lizzato per:

seleMore per gli style sheet

des7na7on anchor

reference per gli script client side

AMributo class
class = list
assegna una classe o un set di classi ad un elemento

Informa7ca 2014/15

47

CSS
Forma generale:
selector {property: value}
oppure
selector {property1: value1;
property2: value2;
...
propertyn: valuen }
selector denito come:
Nome del tag
Nome del tag . class
Nome del tag #id
Informa7ca 2014/15

48

CSS
H1 {text-align: center;
color: blue;
font: Arial, Times New Roman}
P {text-align: left;
color: red;
font-family: Tahoma, Arial Narrow;
font-style: italics}

Informa7ca 2014/15

49

CMS
Content Management Systems

Informa7ca 2014/15

50

Cos un CMS ?
Un Content Management System
(CMS)
un sistema utile alla gestione
dinamica di contenuti informativi
come ad esempio:
(articoli, rubriche, notizie, faq, etc)
da pubblicare su siti e portali web

Informa7ca 2014/15

51

Cos un CMS ?

Un Content Management System permette
quindi, di gestire l'aggiornamento ed il
flusso delle informazioni attraverso
soluzioni software che rendono semplici ed
affidabili i processi di gestione e di
aggiornamento dei contenuti, e cio:
linserimento di notizie, news ed immagini
Il controllo degli accessi e gestione di aree
riservate
Disponibilit di mezzi di interazione (chat,
forum, ecc.)
Report dettagliati

Informa7ca 2014/15

52

Cos un CMS ?
Quali sono le caratteristiche che deve avere un buon CMS?
Aggiornamento e gestione del sito via browser web
Gestione di ruoli distinti degli utenti
Database separato per larchiviazione dei contenuti
testuali e grafici
Facile integrazione con contenuti provenienti da altri sistemi
informatici presenti sul WEB
Gestione di mailing list e messaggistica
Gestione e classificazione di link, notizie, faq, eventi, immagini
Funzionalit avanzate di interrogazione e ricerca interna
Personalizzazione dei criteri grafici di presentazione dei contenuti.
Informa7ca 2014/15

53

Cos un CMS ?

Quindi con un CMS,

chiunque pur non
conoscendo l'HTML o il
PHP, pu arrivare a
gestire la creazione, la
modifica e la rimozione di
contenuti di un sito web e
di renderlo interattivo,
senza aver bisogno delle
conoscenze tipiche di un
webmaster!
Informa7ca 2014/15

54

Cos un CMS ?
Vantaggi:

Aggiornamento automatico dei contenuti senza intervenire sul codice pagina;

Gestione decentralizzata da un normalissimo browser come Explorer;
Accessi e ruoli degli utenti altamente configurabile; ogni utente pu cambiare solo
i contenuti che autorizzato a cambiare e non pu intervenire su altri;
Ambiente facilitato per autori di contenuti non particolarmente esperti;
Il CMS favorisce e facilita la cooperazione nella creazione di contenuti a pi mani;
Pi utenti possono lavorare alla stessa pagina: uno sui testi, un altro sulle foto,
ecc)
Contenuti gestibili per tempo e durata (funzione scheduling)
Contenuti memorizzati in un database che pu essere interrogato da fonti esterne;
gli stessi contenuti possono essere riutilizzati in altre aree del sito in maniera
assolutamente automatica e dinamica;
Il Webmaster pu essere affiancato facilmente da altre figure che lo assistono per
la gestione di alcune aree in particolare ecc
Sono possibili ulteriori implementazioni di funzioni in modo semplice da pannello
di controllo che le abilita o disabilita
(ad es.
Chat, forum, mail, ecc)
Informa7ca
2014/15
55

Cos un CMS ?
Svantaggi:

Occorre una certa manualit informatica nella gestione del CMS, non quindi
adattissimo a chi inizia a mettere le mani nella costruzione di siti web; ma una
volta presa manualit riesce a restituire grandi soddisfazioni
I maggiori CMS lavorano con linguaggi lato-server come il PHP; tali linguaggi
non consentono di lavorare visivamente come si fa con lHTML e quindi
risultano pi ostici nella modifica della grafica e delle funzioni.
Linstallazione stessa comporta un minimo di complessit dovuta anche alla
presenza del database MySql che deve essere richiesto assieme allo spazio
web al provider, al momento dellacquisto dellhosting.
Struttura visiva abbastanza rigida che fa uso di templates grafici reperibili anche
gratuitamente sul web e che conferiscono aspetti simili a siti anche diversi tra
loro; per evitare questo problema il webmaster, che voglia ottenere una nota di
originalit, si deve impegnare in una ristrutturazione grafica del layout grafico
del sito.

Informa7ca 2014/15

56

Cos un CMS ?
Tirando le somme:
Possibilit di distribuire
lamministrazione dei contenuti
Sistema di autorizzazione alla
pubblicazione
Archiviazione strutturata
Scalabilit di funzioni ed add-on
Motore di ricerca affidabile
Contentuto svincolato dal
contenitore (con il database)
Interattivit e dinamicit dei
contenuti
Informa7ca 2014/15

57

CMS
Esempi:
OpenCms open source basato sulla piaMaforma Java e tecnologia
XML
Drupal scriMo in linguaggio PHP e distribuito soMo licenza GNU GPL.
Joomla! scriMo completamente in linguaggio PHP. pubblicato con
licenza open source GNU GPL v.2. nato nel seMembre 2005 da una
scissione dal codice del CMS Mambo
Mambo stato rilasciato lul7ma volta nel 2008, dopodich gli uten7
hanno preferito i suoi fork, principalmente Joomla e MiaCMS
WordPress una piaMaforma soaware di "personal publishing" e
CMS, sviluppata in PHP e che usa come database MySQL. Creata da
MaM Mullenweg, distribuita con la licenza GNU General Public
License.
Informa7ca 2014/15

58