![Page 1: Progettazione di siti web con linguaggio HTML · •sito Internet o sito Web o sito WWW: insieme delle pagine che si riferiscono ad uno stesso utente, argomento o azienda, registrate](https://reader035.vdocuments.mx/reader035/viewer/2022070913/5fb4b47d54b7db063163926f/html5/thumbnails/1.jpg)
Progettazione di siti web con linguaggio HTML
A cura della prof.ssa Valeria Valecchi
Istituto d’Istruzione Superiore Polo-Bonghi Assisi (PG)
![Page 2: Progettazione di siti web con linguaggio HTML · •sito Internet o sito Web o sito WWW: insieme delle pagine che si riferiscono ad uno stesso utente, argomento o azienda, registrate](https://reader035.vdocuments.mx/reader035/viewer/2022070913/5fb4b47d54b7db063163926f/html5/thumbnails/2.jpg)
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)
![Page 3: Progettazione di siti web con linguaggio HTML · •sito Internet o sito Web o sito WWW: insieme delle pagine che si riferiscono ad uno stesso utente, argomento o azienda, registrate](https://reader035.vdocuments.mx/reader035/viewer/2022070913/5fb4b47d54b7db063163926f/html5/thumbnails/3.jpg)
Cosa significa WEB
La parola WEB
in inglese significa
RAGNATELA
WWW = World Wide Web
RAGNATELA MONDIALE
![Page 4: Progettazione di siti web con linguaggio HTML · •sito Internet o sito Web o sito WWW: insieme delle pagine che si riferiscono ad uno stesso utente, argomento o azienda, registrate](https://reader035.vdocuments.mx/reader035/viewer/2022070913/5fb4b47d54b7db063163926f/html5/thumbnails/4.jpg)
A cosa serve un sito web
CONDIVIDERE
• Progetti
• Informazioni
• Archivi dati
PRESENTARE
• Prodotti commerciali
• Attività
• Servizi
• Iniziative
• Corsi
• Interessi presonali
![Page 5: Progettazione di siti web con linguaggio HTML · •sito Internet o sito Web o sito WWW: insieme delle pagine che si riferiscono ad uno stesso utente, argomento o azienda, registrate](https://reader035.vdocuments.mx/reader035/viewer/2022070913/5fb4b47d54b7db063163926f/html5/thumbnails/5.jpg)
Cosa contiene un sito web
• TESTO
• GALLERIE DI IMMAGINI
• SUONI
• FILMATI
da scaricare (download)
da vedere in rete (streaming)
![Page 6: Progettazione di siti web con linguaggio HTML · •sito Internet o sito Web o sito WWW: insieme delle pagine che si riferiscono ad uno stesso utente, argomento o azienda, registrate](https://reader035.vdocuments.mx/reader035/viewer/2022070913/5fb4b47d54b7db063163926f/html5/thumbnails/6.jpg)
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
![Page 7: Progettazione di siti web con linguaggio HTML · •sito Internet o sito Web o sito WWW: insieme delle pagine che si riferiscono ad uno stesso utente, argomento o azienda, registrate](https://reader035.vdocuments.mx/reader035/viewer/2022070913/5fb4b47d54b7db063163926f/html5/thumbnails/7.jpg)
Un sito aziendale…
Deve rispondere alle
esigenze dell’azienda
Soddisfare le richieste del
mercato
Soddisfare le richieste dei
consumatori
![Page 8: Progettazione di siti web con linguaggio HTML · •sito Internet o sito Web o sito WWW: insieme delle pagine che si riferiscono ad uno stesso utente, argomento o azienda, registrate](https://reader035.vdocuments.mx/reader035/viewer/2022070913/5fb4b47d54b7db063163926f/html5/thumbnails/8.jpg)
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
![Page 9: Progettazione di siti web con linguaggio HTML · •sito Internet o sito Web o sito WWW: insieme delle pagine che si riferiscono ad uno stesso utente, argomento o azienda, registrate](https://reader035.vdocuments.mx/reader035/viewer/2022070913/5fb4b47d54b7db063163926f/html5/thumbnails/9.jpg)
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)
![Page 10: Progettazione di siti web con linguaggio HTML · •sito Internet o sito Web o sito WWW: insieme delle pagine che si riferiscono ad uno stesso utente, argomento o azienda, registrate](https://reader035.vdocuments.mx/reader035/viewer/2022070913/5fb4b47d54b7db063163926f/html5/thumbnails/10.jpg)
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)
![Page 11: Progettazione di siti web con linguaggio HTML · •sito Internet o sito Web o sito WWW: insieme delle pagine che si riferiscono ad uno stesso utente, argomento o azienda, registrate](https://reader035.vdocuments.mx/reader035/viewer/2022070913/5fb4b47d54b7db063163926f/html5/thumbnails/11.jpg)
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
![Page 12: Progettazione di siti web con linguaggio HTML · •sito Internet o sito Web o sito WWW: insieme delle pagine che si riferiscono ad uno stesso utente, argomento o azienda, registrate](https://reader035.vdocuments.mx/reader035/viewer/2022070913/5fb4b47d54b7db063163926f/html5/thumbnails/12.jpg)
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
![Page 13: Progettazione di siti web con linguaggio HTML · •sito Internet o sito Web o sito WWW: insieme delle pagine che si riferiscono ad uno stesso utente, argomento o azienda, registrate](https://reader035.vdocuments.mx/reader035/viewer/2022070913/5fb4b47d54b7db063163926f/html5/thumbnails/13.jpg)
Analizziamo la struttura di un sito Web
www.ferrari.com
![Page 14: Progettazione di siti web con linguaggio HTML · •sito Internet o sito Web o sito WWW: insieme delle pagine che si riferiscono ad uno stesso utente, argomento o azienda, registrate](https://reader035.vdocuments.mx/reader035/viewer/2022070913/5fb4b47d54b7db063163926f/html5/thumbnails/14.jpg)
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
![Page 15: Progettazione di siti web con linguaggio HTML · •sito Internet o sito Web o sito WWW: insieme delle pagine che si riferiscono ad uno stesso utente, argomento o azienda, registrate](https://reader035.vdocuments.mx/reader035/viewer/2022070913/5fb4b47d54b7db063163926f/html5/thumbnails/15.jpg)
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):
![Page 16: Progettazione di siti web con linguaggio HTML · •sito Internet o sito Web o sito WWW: insieme delle pagine che si riferiscono ad uno stesso utente, argomento o azienda, registrate](https://reader035.vdocuments.mx/reader035/viewer/2022070913/5fb4b47d54b7db063163926f/html5/thumbnails/16.jpg)
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
![Page 17: Progettazione di siti web con linguaggio HTML · •sito Internet o sito Web o sito WWW: insieme delle pagine che si riferiscono ad uno stesso utente, argomento o azienda, registrate](https://reader035.vdocuments.mx/reader035/viewer/2022070913/5fb4b47d54b7db063163926f/html5/thumbnails/17.jpg)
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.
![Page 18: Progettazione di siti web con linguaggio HTML · •sito Internet o sito Web o sito WWW: insieme delle pagine che si riferiscono ad uno stesso utente, argomento o azienda, registrate](https://reader035.vdocuments.mx/reader035/viewer/2022070913/5fb4b47d54b7db063163926f/html5/thumbnails/18.jpg)
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
![Page 19: Progettazione di siti web con linguaggio HTML · •sito Internet o sito Web o sito WWW: insieme delle pagine che si riferiscono ad uno stesso utente, argomento o azienda, registrate](https://reader035.vdocuments.mx/reader035/viewer/2022070913/5fb4b47d54b7db063163926f/html5/thumbnails/19.jpg)
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)
![Page 20: Progettazione di siti web con linguaggio HTML · •sito Internet o sito Web o sito WWW: insieme delle pagine che si riferiscono ad uno stesso utente, argomento o azienda, registrate](https://reader035.vdocuments.mx/reader035/viewer/2022070913/5fb4b47d54b7db063163926f/html5/thumbnails/20.jpg)
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)
![Page 21: Progettazione di siti web con linguaggio HTML · •sito Internet o sito Web o sito WWW: insieme delle pagine che si riferiscono ad uno stesso utente, argomento o azienda, registrate](https://reader035.vdocuments.mx/reader035/viewer/2022070913/5fb4b47d54b7db063163926f/html5/thumbnails/21.jpg)
Tag HTML
Struttura generale di un tag HTML
<codice> ……. </codice>
Per esempio:
<B> ………. </B> inizio e fine delle parole evidenziate in grassetto
![Page 22: Progettazione di siti web con linguaggio HTML · •sito Internet o sito Web o sito WWW: insieme delle pagine che si riferiscono ad uno stesso utente, argomento o azienda, registrate](https://reader035.vdocuments.mx/reader035/viewer/2022070913/5fb4b47d54b7db063163926f/html5/thumbnails/22.jpg)
<!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
![Page 23: Progettazione di siti web con linguaggio HTML · •sito Internet o sito Web o sito WWW: insieme delle pagine che si riferiscono ad uno stesso utente, argomento o azienda, registrate](https://reader035.vdocuments.mx/reader035/viewer/2022070913/5fb4b47d54b7db063163926f/html5/thumbnails/23.jpg)
Titolo
![Page 24: Progettazione di siti web con linguaggio HTML · •sito Internet o sito Web o sito WWW: insieme delle pagine che si riferiscono ad uno stesso utente, argomento o azienda, registrate](https://reader035.vdocuments.mx/reader035/viewer/2022070913/5fb4b47d54b7db063163926f/html5/thumbnails/24.jpg)
Meta Tag
![Page 25: Progettazione di siti web con linguaggio HTML · •sito Internet o sito Web o sito WWW: insieme delle pagine che si riferiscono ad uno stesso utente, argomento o azienda, registrate](https://reader035.vdocuments.mx/reader035/viewer/2022070913/5fb4b47d54b7db063163926f/html5/thumbnails/25.jpg)
Codifica UTF-8
![Page 26: Progettazione di siti web con linguaggio HTML · •sito Internet o sito Web o sito WWW: insieme delle pagine che si riferiscono ad uno stesso utente, argomento o azienda, registrate](https://reader035.vdocuments.mx/reader035/viewer/2022070913/5fb4b47d54b7db063163926f/html5/thumbnails/26.jpg)
• Stringhe particolari (sequenze di escape) interpretate dal browser: per esempio
< <
> >
& &
€ €
è è
È È
à à
• Per i caratteri Unicode: &#numerocodice;
Per esempio: 水 水
Entità carattere
Entità carattere
![Page 27: Progettazione di siti web con linguaggio HTML · •sito Internet o sito Web o sito WWW: insieme delle pagine che si riferiscono ad uno stesso utente, argomento o azienda, registrate](https://reader035.vdocuments.mx/reader035/viewer/2022070913/5fb4b47d54b7db063163926f/html5/thumbnails/27.jpg)
DOCTYPE
In HTML4 la specifica del doctype è facoltativa mentre nella
versione HTML5 è obbligatorio
![Page 28: Progettazione di siti web con linguaggio HTML · •sito Internet o sito Web o sito WWW: insieme delle pagine che si riferiscono ad uno stesso utente, argomento o azienda, registrate](https://reader035.vdocuments.mx/reader035/viewer/2022070913/5fb4b47d54b7db063163926f/html5/thumbnails/28.jpg)
DOCTYPE (2)
![Page 29: Progettazione di siti web con linguaggio HTML · •sito Internet o sito Web o sito WWW: insieme delle pagine che si riferiscono ad uno stesso utente, argomento o azienda, registrate](https://reader035.vdocuments.mx/reader035/viewer/2022070913/5fb4b47d54b7db063163926f/html5/thumbnails/29.jpg)
Modello di base di una pagina HTML
![Page 30: Progettazione di siti web con linguaggio HTML · •sito Internet o sito Web o sito WWW: insieme delle pagine che si riferiscono ad uno stesso utente, argomento o azienda, registrate](https://reader035.vdocuments.mx/reader035/viewer/2022070913/5fb4b47d54b7db063163926f/html5/thumbnails/30.jpg)
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
![Page 31: Progettazione di siti web con linguaggio HTML · •sito Internet o sito Web o sito WWW: insieme delle pagine che si riferiscono ad uno stesso utente, argomento o azienda, registrate](https://reader035.vdocuments.mx/reader035/viewer/2022070913/5fb4b47d54b7db063163926f/html5/thumbnails/31.jpg)
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.
![Page 32: Progettazione di siti web con linguaggio HTML · •sito Internet o sito Web o sito WWW: insieme delle pagine che si riferiscono ad uno stesso utente, argomento o azienda, registrate](https://reader035.vdocuments.mx/reader035/viewer/2022070913/5fb4b47d54b7db063163926f/html5/thumbnails/32.jpg)
Esempio
Cosa si ottiene con questo codice?
![Page 33: Progettazione di siti web con linguaggio HTML · •sito Internet o sito Web o sito WWW: insieme delle pagine che si riferiscono ad uno stesso utente, argomento o azienda, registrate](https://reader035.vdocuments.mx/reader035/viewer/2022070913/5fb4b47d54b7db063163926f/html5/thumbnails/33.jpg)
Esempio
![Page 34: Progettazione di siti web con linguaggio HTML · •sito Internet o sito Web o sito WWW: insieme delle pagine che si riferiscono ad uno stesso utente, argomento o azienda, registrate](https://reader035.vdocuments.mx/reader035/viewer/2022070913/5fb4b47d54b7db063163926f/html5/thumbnails/34.jpg)
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
![Page 35: Progettazione di siti web con linguaggio HTML · •sito Internet o sito Web o sito WWW: insieme delle pagine che si riferiscono ad uno stesso utente, argomento o azienda, registrate](https://reader035.vdocuments.mx/reader035/viewer/2022070913/5fb4b47d54b7db063163926f/html5/thumbnails/35.jpg)
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
![Page 37: Progettazione di siti web con linguaggio HTML · •sito Internet o sito Web o sito WWW: insieme delle pagine che si riferiscono ad uno stesso utente, argomento o azienda, registrate](https://reader035.vdocuments.mx/reader035/viewer/2022070913/5fb4b47d54b7db063163926f/html5/thumbnails/37.jpg)
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
![Page 38: Progettazione di siti web con linguaggio HTML · •sito Internet o sito Web o sito WWW: insieme delle pagine che si riferiscono ad uno stesso utente, argomento o azienda, registrate](https://reader035.vdocuments.mx/reader035/viewer/2022070913/5fb4b47d54b7db063163926f/html5/thumbnails/38.jpg)
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>
![Page 39: Progettazione di siti web con linguaggio HTML · •sito Internet o sito Web o sito WWW: insieme delle pagine che si riferiscono ad uno stesso utente, argomento o azienda, registrate](https://reader035.vdocuments.mx/reader035/viewer/2022070913/5fb4b47d54b7db063163926f/html5/thumbnails/39.jpg)
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.
![Page 40: Progettazione di siti web con linguaggio HTML · •sito Internet o sito Web o sito WWW: insieme delle pagine che si riferiscono ad uno stesso utente, argomento o azienda, registrate](https://reader035.vdocuments.mx/reader035/viewer/2022070913/5fb4b47d54b7db063163926f/html5/thumbnails/40.jpg)
Esportazione dai prodotti Office
Conversione automatica dei documenti Office in
testi HTML: da Word, Excel, Access.
Salva come: Pagina Web (*.htm, *.html)
![Page 41: Progettazione di siti web con linguaggio HTML · •sito Internet o sito Web o sito WWW: insieme delle pagine che si riferiscono ad uno stesso utente, argomento o azienda, registrate](https://reader035.vdocuments.mx/reader035/viewer/2022070913/5fb4b47d54b7db063163926f/html5/thumbnails/41.jpg)
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
![Page 42: Progettazione di siti web con linguaggio HTML · •sito Internet o sito Web o sito WWW: insieme delle pagine che si riferiscono ad uno stesso utente, argomento o azienda, registrate](https://reader035.vdocuments.mx/reader035/viewer/2022070913/5fb4b47d54b7db063163926f/html5/thumbnails/42.jpg)
Link (àncora)
![Page 43: Progettazione di siti web con linguaggio HTML · •sito Internet o sito Web o sito WWW: insieme delle pagine che si riferiscono ad uno stesso utente, argomento o azienda, registrate](https://reader035.vdocuments.mx/reader035/viewer/2022070913/5fb4b47d54b7db063163926f/html5/thumbnails/43.jpg)
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>
![Page 44: Progettazione di siti web con linguaggio HTML · •sito Internet o sito Web o sito WWW: insieme delle pagine che si riferiscono ad uno stesso utente, argomento o azienda, registrate](https://reader035.vdocuments.mx/reader035/viewer/2022070913/5fb4b47d54b7db063163926f/html5/thumbnails/44.jpg)
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>
![Page 45: Progettazione di siti web con linguaggio HTML · •sito Internet o sito Web o sito WWW: insieme delle pagine che si riferiscono ad uno stesso utente, argomento o azienda, registrate](https://reader035.vdocuments.mx/reader035/viewer/2022070913/5fb4b47d54b7db063163926f/html5/thumbnails/45.jpg)
Creare un indice con link interni
![Page 46: Progettazione di siti web con linguaggio HTML · •sito Internet o sito Web o sito WWW: insieme delle pagine che si riferiscono ad uno stesso utente, argomento o azienda, registrate](https://reader035.vdocuments.mx/reader035/viewer/2022070913/5fb4b47d54b7db063163926f/html5/thumbnails/46.jpg)
Liste
Lista numerata <ol> <li>Roma <li>Milano <li>Napoli </ol>
Lista puntata <ul> <li>Roma <li>Milano <li>Napoli </ul>
![Page 47: Progettazione di siti web con linguaggio HTML · •sito Internet o sito Web o sito WWW: insieme delle pagine che si riferiscono ad uno stesso utente, argomento o azienda, registrate](https://reader035.vdocuments.mx/reader035/viewer/2022070913/5fb4b47d54b7db063163926f/html5/thumbnails/47.jpg)
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
![Page 48: Progettazione di siti web con linguaggio HTML · •sito Internet o sito Web o sito WWW: insieme delle pagine che si riferiscono ad uno stesso utente, argomento o azienda, registrate](https://reader035.vdocuments.mx/reader035/viewer/2022070913/5fb4b47d54b7db063163926f/html5/thumbnails/48.jpg)
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>
![Page 49: Progettazione di siti web con linguaggio HTML · •sito Internet o sito Web o sito WWW: insieme delle pagine che si riferiscono ad uno stesso utente, argomento o azienda, registrate](https://reader035.vdocuments.mx/reader035/viewer/2022070913/5fb4b47d54b7db063163926f/html5/thumbnails/49.jpg)
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>
![Page 50: Progettazione di siti web con linguaggio HTML · •sito Internet o sito Web o sito WWW: insieme delle pagine che si riferiscono ad uno stesso utente, argomento o azienda, registrate](https://reader035.vdocuments.mx/reader035/viewer/2022070913/5fb4b47d54b7db063163926f/html5/thumbnails/50.jpg)
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
![Page 51: Progettazione di siti web con linguaggio HTML · •sito Internet o sito Web o sito WWW: insieme delle pagine che si riferiscono ad uno stesso utente, argomento o azienda, registrate](https://reader035.vdocuments.mx/reader035/viewer/2022070913/5fb4b47d54b7db063163926f/html5/thumbnails/51.jpg)
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>
![Page 52: Progettazione di siti web con linguaggio HTML · •sito Internet o sito Web o sito WWW: insieme delle pagine che si riferiscono ad uno stesso utente, argomento o azienda, registrate](https://reader035.vdocuments.mx/reader035/viewer/2022070913/5fb4b47d54b7db063163926f/html5/thumbnails/52.jpg)
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>
![Page 53: Progettazione di siti web con linguaggio HTML · •sito Internet o sito Web o sito WWW: insieme delle pagine che si riferiscono ad uno stesso utente, argomento o azienda, registrate](https://reader035.vdocuments.mx/reader035/viewer/2022070913/5fb4b47d54b7db063163926f/html5/thumbnails/53.jpg)
Casella di testo
• Input standard
<INPUT TYPE="text"
NAME="nome" SIZE="50" MAXLENGHT="30" />
![Page 54: Progettazione di siti web con linguaggio HTML · •sito Internet o sito Web o sito WWW: insieme delle pagine che si riferiscono ad uno stesso utente, argomento o azienda, registrate](https://reader035.vdocuments.mx/reader035/viewer/2022070913/5fb4b47d54b7db063163926f/html5/thumbnails/54.jpg)
Password
<INPUT TYPE="password" NAME="pwd"
SIZE="10" MAXLENGHT="10" />
![Page 55: Progettazione di siti web con linguaggio HTML · •sito Internet o sito Web o sito WWW: insieme delle pagine che si riferiscono ad uno stesso utente, argomento o azienda, registrate](https://reader035.vdocuments.mx/reader035/viewer/2022070913/5fb4b47d54b7db063163926f/html5/thumbnails/55.jpg)
Area di testo
• con barre di scorrimento
<TEXTAREA NAME="richiesta" ROWS="3"
COLS="50">scrivi il tuo commento </TEXTAREA>
![Page 56: Progettazione di siti web con linguaggio HTML · •sito Internet o sito Web o sito WWW: insieme delle pagine che si riferiscono ad uno stesso utente, argomento o azienda, registrate](https://reader035.vdocuments.mx/reader035/viewer/2022070913/5fb4b47d54b7db063163926f/html5/thumbnails/56.jpg)
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>
![Page 57: Progettazione di siti web con linguaggio HTML · •sito Internet o sito Web o sito WWW: insieme delle pagine che si riferiscono ad uno stesso utente, argomento o azienda, registrate](https://reader035.vdocuments.mx/reader035/viewer/2022070913/5fb4b47d54b7db063163926f/html5/thumbnails/57.jpg)
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
![Page 58: Progettazione di siti web con linguaggio HTML · •sito Internet o sito Web o sito WWW: insieme delle pagine che si riferiscono ad uno stesso utente, argomento o azienda, registrate](https://reader035.vdocuments.mx/reader035/viewer/2022070913/5fb4b47d54b7db063163926f/html5/thumbnails/58.jpg)
Casella combinata
<FORM> <SELECT NAME=“regione"> <OPTION VALUE="1" >Nord</OPTION> <OPTION VALUE="2" >Centro</OPTION> <OPTION VALUE="3" >Sud</OPTION> </SELECT> </FORM>
![Page 59: Progettazione di siti web con linguaggio HTML · •sito Internet o sito Web o sito WWW: insieme delle pagine che si riferiscono ad uno stesso utente, argomento o azienda, registrate](https://reader035.vdocuments.mx/reader035/viewer/2022070913/5fb4b47d54b7db063163926f/html5/thumbnails/59.jpg)
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>
![Page 60: Progettazione di siti web con linguaggio HTML · •sito Internet o sito Web o sito WWW: insieme delle pagine che si riferiscono ad uno stesso utente, argomento o azienda, registrate](https://reader035.vdocuments.mx/reader035/viewer/2022070913/5fb4b47d54b7db063163926f/html5/thumbnails/60.jpg)
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.
![Page 61: Progettazione di siti web con linguaggio HTML · •sito Internet o sito Web o sito WWW: insieme delle pagine che si riferiscono ad uno stesso utente, argomento o azienda, registrate](https://reader035.vdocuments.mx/reader035/viewer/2022070913/5fb4b47d54b7db063163926f/html5/thumbnails/61.jpg)
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>
![Page 62: Progettazione di siti web con linguaggio HTML · •sito Internet o sito Web o sito WWW: insieme delle pagine che si riferiscono ad uno stesso utente, argomento o azienda, registrate](https://reader035.vdocuments.mx/reader035/viewer/2022070913/5fb4b47d54b7db063163926f/html5/thumbnails/62.jpg)
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>
![Page 63: Progettazione di siti web con linguaggio HTML · •sito Internet o sito Web o sito WWW: insieme delle pagine che si riferiscono ad uno stesso utente, argomento o azienda, registrate](https://reader035.vdocuments.mx/reader035/viewer/2022070913/5fb4b47d54b7db063163926f/html5/thumbnails/63.jpg)
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>
![Page 64: Progettazione di siti web con linguaggio HTML · •sito Internet o sito Web o sito WWW: insieme delle pagine che si riferiscono ad uno stesso utente, argomento o azienda, registrate](https://reader035.vdocuments.mx/reader035/viewer/2022070913/5fb4b47d54b7db063163926f/html5/thumbnails/64.jpg)
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; ...; }
![Page 65: Progettazione di siti web con linguaggio HTML · •sito Internet o sito Web o sito WWW: insieme delle pagine che si riferiscono ad uno stesso utente, argomento o azienda, registrate](https://reader035.vdocuments.mx/reader035/viewer/2022070913/5fb4b47d54b7db063163926f/html5/thumbnails/65.jpg)
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"
![Page 66: Progettazione di siti web con linguaggio HTML · •sito Internet o sito Web o sito WWW: insieme delle pagine che si riferiscono ad uno stesso utente, argomento o azienda, registrate](https://reader035.vdocuments.mx/reader035/viewer/2022070913/5fb4b47d54b7db063163926f/html5/thumbnails/66.jpg)
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>
![Page 67: Progettazione di siti web con linguaggio HTML · •sito Internet o sito Web o sito WWW: insieme delle pagine che si riferiscono ad uno stesso utente, argomento o azienda, registrate](https://reader035.vdocuments.mx/reader035/viewer/2022070913/5fb4b47d54b7db063163926f/html5/thumbnails/67.jpg)
Esempio di foglio di stile
#sinistra { position: absolute; width: 20%; left: 0px; top: 80px; background-color: #FFFFFF; } .menu { text-align: center; font-size: 110%; }
![Page 68: Progettazione di siti web con linguaggio HTML · •sito Internet o sito Web o sito WWW: insieme delle pagine che si riferiscono ad uno stesso utente, argomento o azienda, registrate](https://reader035.vdocuments.mx/reader035/viewer/2022070913/5fb4b47d54b7db063163926f/html5/thumbnails/68.jpg)
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.