Progettazione di siti web con linguaggio HTML · •sito Internet o sito Web o sito WWW: insieme...
68
Progettazione di siti web con linguaggio HTML A cura della prof.ssa Valeria Valecchi Istituto d’Istruzione Superiore Polo-Bonghi Assisi (PG)
Transcript of Progettazione di siti web con linguaggio HTML · •sito Internet o sito Web o sito WWW: insieme...
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
< <
> >
& &
€ €
è è
È È
à à
• Per i caratteri Unicode: &#numerocodice;
Per esempio: 水 水
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
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à</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à</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.
