Progettazione di siti web con linguaggio HTML A cura della prof.ssa Valeria Valecchi

Transcript

1 Progettazione di siti web con linguaggio HTML A cura della prof.ssa Valeria Valecchi Istituto d Istruzione Superiore Polo-Bonghi Assisi (PG)

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

3 Cosa significa WEB La parola WEB in inglese significa RAGNATELA WWW = World Wide Web RAGNATELA MONDIALE

4 A cosa serve un sito web CONDIVIDERE Progetti Informazioni Archivi dati PRESENTARE Prodotti commerciali Attività Servizi Iniziative Corsi Interessi presonali

5 Cosa contiene un sito web TESTO GALLERIE DI IMMAGINI SUONI FILMATI da scaricare (download) da vedere in rete (streaming)

6 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

7 Un sito aziendale Deve rispondere alle esigenze dell azienda Soddisfare le richieste del mercato Soddisfare le richieste dei consumatori

8 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

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

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

11 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

12 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

13 Analizziamo la struttura di un sito Web

14 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): URL (Uniform Resource Locator) per le pagine e i file:

15 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):

16 Web Editor Esistono programmi chiamati Web Editor che semplificano il lavoro di scrittura del codice per creare pagine web WEB EDITOR NON VISUALI WEB EDITOR VISUALI Esempi: Adobe Dreamweaver, Microsoft Office FrontPage, Microsoft Expression Web, Microsoft SharePoint Designer

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

18 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

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

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

21 Tag HTML Struttura generale di un tag HTML <codice>. </codice> Per esempio: <B>. </B> inizio e fine delle parole evidenziate in grassetto

22 Struttura del documento HTML <!DOCTYPE html> <HTML> tipo di documento <HEAD> <TITLE> </TITLE> <META> </HEAD> informazioni sulle caratteristiche della pagina: titolo e metadati <BODY> il testo della pagina con paragrafi, immagini e link </BODY> </HTML>

23 Titolo

24 Meta Tag

25 Codifica UTF-8

26 Entità carattere Stringhe particolari (sequenze di escape) interpretate dal browser: per esempio < < > > & & è è È È à à Entità carattere Per i caratteri Unicode: &#numerocodice; Per esempio: 水 水

27 DOCTYPE In HTML4 la specifica del doctype è facoltativa mentre nella versione HTML5 è obbligatorio

28 DOCTYPE (2)

29 Modello di base di una pagina HTML

30 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

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

32 Esempio Cosa si ottiene con questo codice?

33 Esempio

34 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

35 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 Verde 0,255,0 00 FF 00 Blu 0,0, FF Nero 0,0, Bianco 255,255,255 FF FF FF Giallo 255,227,172 FF E3 AC Anche nomi simbolici: red, blue, lightyellow, <BODY BGCOLOR="#FFFFFF"> <BODY BGCOLOR="white"> <font color ="navy"> prova</font> colore di sfondo (bianco) colore di sfondo (bianco) prova scritto in blu

36 Tabella colori Linguaggio html e tabella colori

37 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> </html> Dal menu File, Salva con nome ; Salva come: Tutti i file; assegnare il nome Prova.htm

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

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

40 Esportazione dai prodotti Office Salva come: Pagina Web (*.htm, *.html) Conversione automatica dei documenti Office in testi HTML: da Word, Excel, Access.

41 Link (àncora) <A HREF ="nomefile"> parola </A> per esempio: <a href =" fai clic qui per accedere al sito dell Università</a> Nella pagina Web la frase tra <A>. </A> compare in colore e sottolineata

42 Link (àncora)

43 Link tra le pagine Index.html (home page) Index.html (home page) <a href="pagina2.htm">i nostri prodotti</a> i nostri prodotti pagina2.htm <a href="index.html">torna alla home page</a> pagina2.htm torna alla home page

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

45 Creare un indice con link interni

46 Liste Lista puntata <ul> <li>roma <li>milano <li>napoli </ul> Lista numerata <ol> <li>roma <li>milano <li>napoli </ol>

47 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

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

49 Immagini <IMG SRC="nomeimmagine" parametri> Per esempio: <img src="mare.jpg" alt="catalogo mare" width="699" height="433" /> Le immagini come link <a href= <img src="mare.jpg" alt="catalogo mare"> </a>

50 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

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

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

53 Casella di testo Input standard <INPUT TYPE="text" NAME="nome" SIZE="50" MAXLENGHT="30" />

54 Password <INPUT TYPE="password" NAME="pwd" SIZE="10" MAXLENGHT="10" />

55 Area di testo con barre di scorrimento <TEXTAREA NAME="richiesta" ROWS="3" COLS="50">scrivi il tuo commento </TEXTAREA>

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

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

58 Casella combinata <FORM> <SELECT NAME= regione"> <OPTION VALUE="1" >Nord</OPTION> <OPTION VALUE="2" >Centro</OPTION> <OPTION VALUE="3" >Sud</OPTION> </SELECT> </FORM>

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

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

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

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

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

64 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;...; }

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

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

67 Esempio di foglio di stile #sinistra { position: absolute; width: 20%; left: 0px; top: 80px; background-color: #FFFFFF; }.menu { text-align: center; font-size: 110%; }

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