Sei sulla pagina 1di 68

Progettazione di siti web

con linguaggio HTML

A cura della prof.ssa Valeria Valecchi

Istituto d’Istruzione Superiore Polo-Bonghi Assisi (PG)


WWW (World Wide Web)

• sito Internet o sito Web o sito WWW:


insieme delle pagine che si riferiscono ad uno
stesso utente, argomento o azienda,
registrate su un server Internet
• browser : programma che gli utenti Internet
usano per visualizzare le pagine (Internet
Explorer, Mozilla Firefox, Google Chrome,
Safari, Opera)
Cosa significa WEB

La parola WEB
in inglese significa
RAGNATELA

WWW = World Wide Web


RAGNATELA MONDIALE
A cosa serve un sito web

CONDIVIDERE
• Progetti
• Informazioni
• Archivi dati
PRESENTARE
• Prodotti commerciali
• Attività
• Servizi
• Iniziative
• Corsi
• Interessi presonali
Cosa contiene un sito web

• TESTO

• GALLERIE DI IMMAGINI

• SUONI

• FILMATI

da scaricare (download)

da vedere in rete (streaming)


Un sito web efficace

Partire da una IDEA

ORIGINALE CHE RISPONDA AI


BISOGNI DEGLI UTENTI

Valutare il TARGET:

Genere, età, conoscenze e competenze


dei possibili visitatori
Un sito aziendale…

 Deve rispondere alle


esigenze dell’azienda

 Soddisfare le richieste del


mercato

 Soddisfare le richieste dei


consumatori
Fasi di progettazione di un sito web

1) ANALISI DI MERCATO
Che comprende anche l’analisi
dei competitors per lasciare
inalterate le formule vincenti e
proporre qualcosa di innovativo
e originale
Fasi di progettazione di un sito web

2) PROGETTAZIONE DELLA STRUTTURA E


DELL’ESTETICA
 Valutare le mode e le tendenze più in voga
senza perdere di vista gli obiettivi funzionali

 Definire le modalità di erogazione dei contenuti


(variano in base al dispositivo per la navigazione)
Fasi di progettazione di un sito web

2) PROGETTAZIONE DELLA STRUTTURA E


DELL’ESTETICA
 Il sito deve comunicare qualcosa non appena
viene visualizzata la pagina senza doverla
scorrere tutta

 Quantità di informazioni: NON ELEVATA

 NO Immagini di grandi dimensioni

 NO troppe immagini
(si rischiano lunghi tempi di attesa
per il caricamento)
Layout della pagina

Il layout è l’interfaccia grafica, cioè il modo in cui


i contenuti sono distribuiti all’interno della pagina
Web.

WEB DESIGNER:
figura professionale che si occupa della
progettazione di un sito Web e del suo
layout
Progettare un sito
Si parte da una bozza su carta…

banner = in inglese significa striscione


è una forma di pubblicità che consiste in una immagine a striscia
Analizziamo la struttura
di un sito Web
www.ferrari.com
Siti Web

• pagine Web: documenti pronti per essere


registrati su un server Internet
• hosting (residenza) delle pagine Web su un
server (Internet provider):
può essere una sottocartella (directory) di un
sito già esistente, oppure nuovo sito
• nome di dominio per il sito
(indirizzo Internet): www.prova.it
• URL (Uniform Resource Locator) per le pagine
e i file: www.prova.it/nuovo/pagina.html
Strumenti per realizzare pagine Web

• PC , modem, periferiche multimediali


• editor di testo (Blocco note o WordPad) oppure Web editor
• browser
• programma di grafica per trattare immagini e
fotografie
• programma per FTP (File Transfer Protocol):
Web Editor

Esistono programmi chiamati Web Editor che


semplificano il lavoro di scrittura del codice per
creare pagine web

WEB EDITOR WEB EDITOR


NON VISUALI VISUALI

Esempi: Adobe Dreamweaver,


Microsoft Office FrontPage, Microsoft Expression
Web, Microsoft SharePoint Designer
Il linguaggio HTML

(HyperText Markup Language)


• Linguaggio per scrivere pagine Web
• non è un linguaggio di programmazione, ma
piuttosto di un linguaggio di formattazione
della pagina
• Testo + codici (Tag)
• il browser interpreta i codici contenuti nel
testo HTML e li trasforma in comandi per la
costruzione della pagina in forma grafica
• I testi scritti in HTML hanno l'estensione .html
o .htm nel nome del file.
Per vedere il codice HTML
Clic con il tasto destro del
mouse sulla pagina: comando
Tag = codici
per la visualizzazione del
distribuiti all’interno
del testo e codice HTML, di solito HTML o
racchiusi tra una Visualizza sorgente pagina o
coppia di segni Ctrl + U
< >.
Questi sono i
codici che
consentono al
browser la
formazione della
pagina in formato
grafico.
Organizzazione ipertestuale

• ipertesto: un insieme di documenti che può


essere consultato in modo non sequenziale
• passaggio da un documento all’altro
attraverso collegamenti (link) sui quali fare
clic con il mouse (parole o immagini)
• link ad altri siti Internet utilizzando gli indirizzi
(URL)
• navigazione nella rete (netsurfing)
Come creare un documento HTML

1. Aprire il Blocco note, negli Accessori di


Windows
2. Scrivere il testo in HTML
3. Nel menu File di Blocco note scegliere Salva
con nome…
4. Nella finestra fornire come Nome file
prova.htm e nella casella Salva come scegliere
la dicitura Tutti i file
5. Chiudere il programma Blocco note
6. Il file salvato ha assunto come icona il logo del
browser
7. Fare doppio clic sull’icona per visulaizzare la
pagina Web ( Non in linea)
Tag HTML

Struttura generale di un tag HTML


<codice> ……. </codice>
Per esempio:
<B> ………. </B>
inizio e fine delle parole evidenziate in grassetto
Struttura del documento HTML

<!DOCTYPE html> tipo di documento


<HTML>

<HEAD> informazioni sulle


<TITLE> … </TITLE> caratteristiche della pagina:
<META> titolo e metadati
</HEAD>

<BODY>

il testo della pagina con paragrafi, immagini e link

</BODY>
</HTML>
Titolo
Meta Tag
Codifica UTF-8
Entità carattere

• Stringhe particolari (sequenze di escape)


interpretate dal browser: per esempio
&lt; <
&gt; >
&amp; &
&euro; €
&egrave; è
&Egrave; È
&agrave; à
Entità carattere

• Per i caratteri Unicode: &#numerocodice;


Per esempio: &#27700; 水
DOCTYPE

In HTML4 la specifica del doctype è facoltativa mentre nella


versione HTML5 è obbligatorio
DOCTYPE (2)
Modello di base di una pagina HTML
Formattazione del testo

• <Hn>...</Hn> inserisce un titolo con una certa


dimensione dei caratteri
n da 1 a 6 (1 = grande, 6 = piccolo)
• <I>...</I> ; <B>...</B> ; <U>...</U>
evidenziazioni in corsivo, neretto, sottolineato
• <CENTER>…. </CENTER>
riga o paragrafo centrato
Carattere e dimensione

Esempio:
<font face="Verdana" size="2">….</font>

Ovvero Carattere Verdana, dimensione 2

Il valore di default della dimensione è 3,

può variare tra 1 e 7

N.B. La formattazione del testo in puro linguaggio HTML oggi è


superata dai fogli di stile che andremo ad analizzare in seguito.
Esempio

Cosa si ottiene con questo codice?


Esempio
Paragrafi

• <P> … </P> paragrafo


L’imporre un ritorno a capo con il tasto Invio in HTML non produce

l’effetto desiderato

• <BR /> ritorno a capo

• <NOBR>….</NOBR> impedisce il ritorno a capo

• <HR /> linea orizzontale

• <PRE> … </PRE> testo preformattato


I colori RGB (Red, Green, Blue)
• Tonalità dei tre colori: da 0 a 255 in decimale, da 00 a
FF in esadecimale
• Rosso 255,0,0 FF 00 00
• Verde 0,255,0 00 FF 00
• Blu 0,0,255 00 00 FF
• Nero 0,0,0 00 00 00
• Bianco 255,255,255 FF FF FF
• Giallo 255,227,172 FF E3 AC
• Anche nomi simbolici: red, blue, lightyellow, …
<BODY BGCOLOR="#FFFFFF"> colore di sfondo (bianco)
<BODY BGCOLOR="white"> colore di sfondo (bianco)
<font color ="navy"> prova</font> prova scritto in blu
Tabella colori

Linguaggio html e tabella colori


Scrivere una pagina Web
• Aprire Blocco Note in
Accessori, scrivere il
testo con i tag
<!DOCTYPE html>
<html>
<head>
<title>La mia home page</title>
</head>
<body bgcolor="#FFFFFF">
<h1>Benvenuto nel mio sito</h1>
Dalla <b>home page</b> puoi visitare le altre
pagine<br />
in modo anche non sequenziale
<p>Segui i <i>link</i><br />
<hr />
</body> Dal menu File, Salva con
</html>
nome…; Salva come: Tutti i
file; assegnare il nome
Prova.htm
Visualizzazione nel browser

• Aprire il file htm dal browser (non in linea): doppio clic


sull’icona del file

<DOCTYPE html>
<html>
<head>
<title>La mia home page</title>
</head>
<body bgcolor="#FFFFFF">
<h1>Benvenuto nel mio sito</h1>
Dalla <b>home page</b> puoi visitare le altre
pagine<br />
in modo anche non sequenziale
<p>Segui i <i>link</i><br />
<hr />
</body>
</html>
Modifica della pagina

• Dal menu Visualizza oppure dal menu di scelta


rapida, che si apre facendo clic con il pulsante
destro del mouse in un punto qualsiasi della
pagina: scegliere HTML.
• Si apre il programma Blocco Note per
visualizzare il testo con i simboli e codici HTML;
modificare il testo.
• Salvare la pagina modificata (menu File, Salva)
• Nel browser fare clic sull’icona Aggiorna
nella barra degli strumenti: la pagina viene
visualizzata nella versione modificata.
Esportazione dai prodotti Office

Salva come: Pagina Web (*.htm, *.html)

Conversione automatica dei documenti Office in


testi HTML: da Word, Excel, Access.
Link (àncora)

• <A HREF ="nomefile"> parola </A>


per esempio:

<a href ="http://www.unive.it"> fai clic qui per accedere al sito


dell’Universit&agrave;</a>

• Nella pagina Web la frase tra <A> …. </A>


compare in colore e sottolineata
Link (àncora)
Link tra le pagine

Index.html (home page) Index.html (home page)

<a href="pagina2.htm">i nostri i nostri prodotti


prodotti</a>

pagina2.htm pagina2.htm
<a href="index.html">torna alla torna alla home page
home page</a>
Link a una sezione della pagina

• Àncora:
<A NAME="parte2"> </A>
• Link alla parte:
<A HREF="#parte2">parola</A>
• Link da un documento diverso:
<A HREF="docy.htm#parte2">parola</A>
Creare un indice con link interni
Liste

Lista puntata
<ul>
<li>Roma
<li>Milano
<li>Napoli
</ul>
Lista numerata
<ol>
<li>Roma
<li>Milano
<li>Napoli
</ol>
Tabelle

<table width="100%" border="1">


<tr>
<th>nome</th>
<th>cognome</th>
<th>citt&agrave;</th>
</tr>
<tr>
<td>a2</td>
<td>b2</td> <TH> … </TH> al posto di <TD> crea
<td>c2</td> un’intestazione con titoli in grassetto
</tr>
</table>
Unione di celle

• Attributo COLSPAN
(ROWSPAN per le righe)
<table width="200" border="1">
<tr>
<th colspan="3">Primo trimestre</th>
</tr>
<tr>
<td>Gennaio</td>
<td>Febbraio</td>
<td>Marzo</td>
</tr>
</table>
Immagini

<IMG SRC="nomeimmagine" parametri>


Per esempio:
<img src="mare.jpg" alt="catalogo mare"
width="699" height="433" />

Le immagini come link


<a href=http://www.mondoviaggi.it>
<img src="mare.jpg" alt="catalogo mare">
</a>
Attributi del tag immagine
<img src="immagine.jpg" align="top"
alt="descrizione alternativa"
width="150" height="93">
• Allineamento
ALIGN = "TOP" (vicino al bordo superiore dell’immagine)
ALIGN = "MIDDLE" (al centro dell’immagine)
ALIGN = "BOTTOM" (vicino al bordo inferiore)
• ALT visualizza un testo al posto dell’immagine qualora
questa non possa essere visualizzata (tooltip
sull’immagine)
• WIDTH, HEIGHT: misure in pixel della larghezza e
dell’altezza
Video e audio

<VIDEO SRC=nomeFileVideo
POSTER=nomeFileCopertina
CONTROLS="controls">
messaggioErrore
</VIDEO>

<AUDIO CONTROLS="controls">
<SOURCE SRC="./musicaPreferita.mp3"
TYPE="audio/mp3" />
Attenzione: il tuo browser non supporta il tag AUDIO.
</AUDIO>
I form

Moduli o questionari da compilare, formati da


caselle di testo, pulsanti di opzione e bottoni
grafici.

I moduli (form) in HTML sono racchiusi tra la


coppia di tag:
<FORM>…</FORM>
Casella di testo

• Input standard

<INPUT TYPE="text"
NAME="nome" SIZE="50" MAXLENGHT="30" />
Password

<INPUT TYPE="password" NAME="pwd"


SIZE="10" MAXLENGHT="10" />
Area di testo

• con barre di scorrimento

<TEXTAREA NAME="richiesta" ROWS="3"


COLS="50">scrivi il tuo commento </TEXTAREA>
Caselle di controllo

• selezione multipla
<FORM>
Cosa ti piace fare nel tempo libero<BR>
<INPUT TYPE="checkbox" NAME="CB1" VALUE="1" checked
/>Leggere
<BR />
<INPUT TYPE="checkbox" NAME="CB2" VALUE="2" />Cantare
<BR />
<INPUT TYPE="checkbox" NAME="CB3" VALUE="3" />Sport
<BR />
<INPUT TYPE="checkbox" NAME="CB4" VALUE="4" />Danza
<BR />
</FORM>
Pulsanti di opzione

• selezione singola

<FORM>
Classe di appartenenza<br>
<INPUT TYPE="radio" NAME="CB1" VALUE="IIIB"
checked />IIIB<BR />
<INPUT TYPE="radio" NAME="CB1" VALUE="IVB" />
IVB<BR />
<INPUT TYPE="radio" NAME="CB1" VALUE="VB" />
VB<BR />
</FORM>
Casella combinata

<FORM>
<SELECT NAME=“regione">
<OPTION VALUE="1" >Nord</OPTION>
<OPTION VALUE="2" >Centro</OPTION>
<OPTION VALUE="3" >Sud</OPTION>
</SELECT>
</FORM>
Bottoni

• Pulsanti di comando

<FORM>
<H1>bottone per inviare i dati:</H1>
<BR />
<INPUT TYPE="submit" NAME="B1"VALUE="Invia" />
<INPUT TYPE="reset" NAME="B2" VALUE="Annulla" />
</FORM>
Fogli di stile CSS

Il foglio CSS (Cascading Style Sheet, foglio


di stile a cascata) è un documento in
formato testuale che definisce il controllo
sulla visualizzazione della pagina HTML e sul
suo layout, cioè la disposizione degli
elementi nella pagina, con le caratteristiche
di stile riguardanti i font, i colori, gli
allineamenti e le spaziature.
Fogli di stile in linea

• le proprietà di stile in linea vengono


innestate direttamente in corrispondenza
del tag con l’attributo STYLE:

<P STYLE="font-family: Arial; font-size: 9px;


color: #FF0000; background-color:#FFFF33">
Le Regioni italiane
</P>
Fogli di stile incorporati

• Stile definito, attraverso il tag <STYLE>,


all’interno dell’intestazione del documento

<HTML>
<HEAD>
<STYLE TYPE="text/css">
H1 { font-family: Arial; font-size: 23px;
color: #0099CC }
</STYLE >
</HEAD>
Fogli di stile collegati

• Definizione di un foglio di stile separato dal


documento e registrato in un file esterno
avente estensione .css.
• Questo file viene collegato alla pagina
attraverso il tag <LINK>.

<HTML>
<HEAD>
<LINK REL="stylesheet" HREF="stile.css"
TYPE="text/css">
</HEAD>
Sintassi CSS

• Per ogni selettore si dichiara una o più


proprietà di stile: ogni proprietà di stile va
separata da un punto e virgola. L’insieme delle
proprietà è raggruppato da una coppia di
parentesi graffe.
selettore {
proprietà: valore;
proprietà: valore;
proprietà: valore;
...;
}
Selettori

Un selettore può essere:


• un tag predefinito del linguaggio HTML (<H1>,
<P>, <TD>, ecc.)
• una classe definita dall’utente; lo stile viene poi
richiamato nella pagina HTML con l’attributo
CLASS="nomeclasse"
• un identificatore definito dall’utente che individua
le caratteristiche di una parte del documento; lo stile
viene richiamata nella pagina HTML con l’attributo
ID="identificatore"
Classi e identificatori

• La classe definisce le caratteristiche di paragrafi e


singole parti di una pagina HTML
• L’identificatore è utilizzato per definire i contenitori
(o sezioni) di una pagina , identificati con i tag
<DIV> … <DIV>.

<DIV ID="identificatore">
...
<P CLASS="nomeclasse">
...
</P>
...
</DIV>
Esempio di foglio di stile

#sinistra {
position: absolute;
width: 20%;
left: 0px;
top: 80px;
background-color: #FFFFFF;
}
.menu {
text-align: center;
font-size: 110%;
}
Accessibilità e usabilità

• Accessibilità:
realizzare contenuti che siano facilmente
fruibili da tutte le persone, comprese
quelle con disabilità fisiche.
• Usabilità
un sito deve rispondere alle esigenze
della tipologia di utenza per cui è stato
creato.