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

Esempi: Adobe Dreamweaver,

Microsoft Office FrontPage, Microsoft Expression

Web, Microsoft SharePoint Designer

WEB EDITOR NON VISUALI

WEB EDITOR VISUALI

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

Tag = codici

distribuiti all’interno

del testo e

racchiusi tra una

coppia di segni

< >.

Questi sono i

codici che

consentono al

browser la

formazione della

pagina in formato

grafico.

Clic con il tasto destro del

mouse sulla pagina: comando

per la visualizzazione del

codice HTML, di solito HTML o

Visualizza sorgente pagina o

Ctrl + U

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

<!DOCTYPE html>

<HTML>

<HEAD>

<TITLE> … </TITLE>

<META>

</HEAD>

<BODY>

</BODY>

</HTML>

Struttura del documento HTML

informazioni sulle

caratteristiche della pagina:

titolo e metadati

il testo della pagina con paragrafi, immagini e link

tipo di documento

Titolo

Meta Tag

Codifica UTF-8

• Stringhe particolari (sequenze di escape) interpretate dal browser: per esempio

&lt; <

&gt; >

&amp; &

&euro; €

&egrave; è

&Egrave; È

&agrave; à

• Per i caratteri Unicode: &#numerocodice;

Per esempio: &#27700; 水

Entità carattere

Entità carattere

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

<!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>

• Aprire Blocco Note in Accessori, scrivere il testo con i tag

Dal menu File, Salva con

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

Conversione automatica dei documenti Office in

testi HTML: da Word, Excel, Access.

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

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

pagina2.htm

<a href="index.html">torna alla home page</a>

Index.html (home page)

i nostri prodotti

pagina2.htm

torna alla home page

Index.html (home page)

<a href="pagina2.htm">i nostri prodotti</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 numerata <ol> <li>Roma <li>Milano <li>Napoli </ol>

Lista puntata <ul> <li>Roma <li>Milano <li>Napoli </ul>

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>

<td>c2</td>

</tr>

</table>

<TH> … </TH> al posto di <TD> crea

un’intestazione con titoli in grassetto

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

<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>

• selezione singola

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.