La presentazione è in caricamento. Aspetta per favore

La presentazione è in caricamento. Aspetta per favore

Gena - a.a. 2004/2005Web Design1 Pagine Web statiche: HTML HTML (HyperText Markup Language) è un linguaggio di mark-up per scrivere pagine Web (ipertesti)

Presentazioni simili


Presentazione sul tema: "Gena - a.a. 2004/2005Web Design1 Pagine Web statiche: HTML HTML (HyperText Markup Language) è un linguaggio di mark-up per scrivere pagine Web (ipertesti)"— Transcript della presentazione:

1 Gena - a.a. 2004/2005Web Design1 Pagine Web statiche: HTML HTML (HyperText Markup Language) è un linguaggio di mark-up per scrivere pagine Web (ipertesti) Linguaggi di mark-up separazione tra contenuto (testo) e aspetto (indicazioni che vengono interpretate dal programma che visualizza il documento) pagina Web = file di testo (per es. home.html) che contiene indicazioni per: (a) i link (connessioni ipertestuali) (b) la visualizzazione Pagine Web statiche: HTML

2 Gena - a.a. 2004/2005Web Design2 HTML: introduzione home page: link1 link2 pagina papers: link3 pagina di un editore pagina del celi link4 (a) I link (connessioni ipertestuali) home.html: contenuto + link + aspetto pagina Web visualizzata da un Web browser (per es. Microsoft Interner Explorer) interpretati

3 Gena - a.a. 2004/2005Web Design3 HTML: introduzione (b) la visualizzazione (esempio): cosa si vede...

4 Gena - a.a. 2004/2005Web Design4 HTML: introduzione... Le attività Il nido è aperto dal Lunedì al Venerdì dalle 7.30 alle Qualche foto dei nostri locali I bambini si divertiranno a manipolare la pasta colorata (simil pongo), con cui potranno creare oggetti e animali, con l'ausilio di apposite "formine", ma soprattutto utilizzando la loro fantasia. Le attività si svolgeranno tutti i giorni con il seguente orario: al mattino, dalle alle al pomeriggio, dalle alle aspetto contenuto (b) la visualizzazione (esempio): … cosa c’è dietro

5 Gena - a.a. 2004/2005Web Design5 HTML: introduzione Premessa: Esistono molti strumenti per costruire pagine Web, cioè per “scrivere HTML senza vederlo”, per es. Deamweaver (Macromedia), FrontPage (Microsoft), Netscape Composer Tuttavia è importante capire “cosa ci sta sotto” per due ragioni principali:  è importante capire ciò che il programma che usiamo sta effettivamente scrivendo per capirne meglio il comportamento  talvolta è necessario intervenire manualmente sul codice HTML generato da un programma

6 Gena - a.a. 2004/2005Web Design6 HTML: i tag In un file HTML contiene indicazioni per il browser (che interpreta il linguaggio HTML ) sotto forma di tag: testo NB: HTML non è case-sensitive NB:  Struttura di un documento HTML: inizio del file HTML fine del file HTML intestazione contenuto della pagina spesso funziona anche senza virgolette, ma è meglio metterle sempre!

7 Gena - a.a. 2004/2005Web Design7 HTML: l'intestazione L'intestazione di un file HTML può contenere vari tag; i principali sono: Master in Editoria Multimediale

8 Gena - a.a. 2004/2005Web Design8 HTML: l'intestazione Master in Editoria Multimediale titolo della finestra

9 Gena - a.a. 2004/2005Web Design9 HTML: l'intestazione Comunica al browser il set di caratteri usato Descrivono le parole-chiave e il contenuto della pagina (vengono generalmente usate dai motori di ricerca) NB: spesso il tag META non è chiuso (ma funziona lo stesso!)

10 Gena - a.a. 2004/2005Web Design10 HTML: il tag BODY All'interno del tag BODY si trova il documento vero e proprio (il contenuto della pagina Web) Gli attributi del tag BODY : ...

11 Gena - a.a. 2004/2005Web Design11 HTML: il tag BODY

12 Gena - a.a. 2004/2005Web Design12 HTML: il tag BODY

13 Gena - a.a. 2004/2005Web Design13 HTML: la codifica dei colori Ogni colore può essere rappresentato mediante tre numeri, compresi tra 0 e 255, che rappresentano la quantità di rosso (Red), verde (Green) e blu (Blue) presenti  codifica RGB La codifica usata è quella esadecimale (base 16) Si possono rappresentare più di 16 milioni di colori diversi => nero = R:0, G:0, B:0 = # bianco= R:255, G:255, B:255 = #FFFFFF rosso= R:255, G:0, B:0= #FF0000 verde acqua = R:105, G:247, B:222 = #69F7DE Esistono dei nomi mnemonici per i colori più comuni (per es. “red”, “acquamarine”, “beige”, ecc.)

14 Gena - a.a. 2004/2005Web Design14 HTML: titoli Possiamo usare vari tag per strutturare il documento (cioè il contenuto della pagina Web), racchiuso all'interno del tag... I titoli (headers): Titolo di primo livello  Titolo di primo livello Titolo di primo livello  Titolo di secondo livello Titolo di primo livello  Titolo di terzo livello

15 Gena - a.a. 2004/2005Web Design15 HTML: titoli La pubblicazione on-line Progettazione e costruzione di siti Web... Materiale e riferimenti bibliografici:... Informazioni generali:

16 Gena - a.a. 2004/2005Web Design16 HTML: paragrafi Paragrafo Allineamento (attributo di P): Paragrafo Per andare a capo senza creare un nuovo paragrafo: NB: Alcuni tag (per es. BR, HR e IMG) si possono scrivere senza chiusura (cioè senza..., o ). Questo, benché non sia formalmente corretto, viene interpretato correttamente dai browser, cioè: 

17 Gena - a.a. 2004/2005Web Design17 HTML: paragrafi L'esame si compone... La relazione scritta... La verifica orale... NB: equivale a (cioè "LEFT" è il valore di default dell'attributo ALIGN ) a capo

18 Gena - a.a. 2004/2005Web Design18 HTML: paragrafi L'esame si compone... La relazione scritta... La verifica orale... a capo

19 Gena - a.a. 2004/2005Web Design19 HTML: paragrafi L'esame si compone... La relazione scritta... La verifica orale... a capo

20 Gena - a.a. 2004/2005Web Design20 HTML: paragrafi L'esame si compone... La relazione scritta... La verifica orale... a capo

21 Gena - a.a. 2004/2005Web Design21 HTML: caratteri grassetto oppure grassetto  grassetto corsivo oppure corsivo  corsivo codice oppure codice  codice testo grande 3 unità  testo grande 3 unità testo in font Arial  testo in font Arial testo blu  testo blu

22 Gena - a.a. 2004/2005Web Design22 HTML: caratteri La pubblicazione on-line: progettazione e costruzione di siti Web... Principi di Interazione Uomo-Macchina... [Prof. Giovanna Petrone]...

23 Gena - a.a. 2004/2005Web Design23 HTML: elenchi (liste) Liste non numerate: Principi di Interazione Uomo-Macchina Progettazione di siti Web Architettura dell'informazione Realizzazione di siti Web statici e dinamici Cenni a usabilità e accessibilità

24 Gena - a.a. 2004/2005Web Design24 HTML: elenchi (liste) Liste numerate: Principi di Interazione Uomo-Macchina Progettazione di siti Web Architettura dell'informazione Realizzazione di siti Web statici e dinamici Cenni a usabilità e accessibilità

25 Gena - a.a. 2004/2005Web Design25 HTML: commenti e linee orizzontali Commenti (il browser NON legge il testo commentato) : Linee orizzontali: Esempio:

26 Gena - a.a. 2004/2005Web Design26 HTML: immagini descrizione NB: Il tag IMG si può scrivere senza chiusura; il browser lo interpreta come: 

27 Gena - a.a. 2004/2005Web Design27 HTML: immagini Università di Torino

28 Gena - a.a. 2004/2005Web Design28 HTML: suoni NB: Anche il tag BGSOUND si può scrivere senza chiusura; il browser lo interpreta come: 

29 Gena - a.a. 2004/2005Web Design29 HTML: link Link esterni e ancore interne: home.html: orario didattica  Attività didattica: Bla, bla, bla, orario.html link esterno ancora interna NB: può essere un file sullo stesso server (nel qual caso basta indicare il nome del file, con l'eventuale path), oppure un file su un server diverso (nel qual caso occorre specificare l'intero URL)

30 Gena - a.a. 2004/2005Web Design30 HTML: link Link esterni: link  link Per esempio: orario  orario = vai alla pagina orario.html (NB: deve trovarsi nella stessa cartella della pagina corrente!) orario  orario = vai alla pagina orario.html, che si trova nella cartella masterEM, nell'area dell'utente goy, sul server e utilizza il protocollo http (HyperText Transfer Protocol, utilizzato di default dai browser principali)

31 Gena - a.a. 2004/2005Web Design31 HTML: link Ancore interne: ancora  creo l'ancora link  link (interno) all'ancora Per esempio: Attività didattica  non ha effetti visibili... didattica  didattica = Vai al testo contrassegnato con l’etichetta dida (paragrafo “Attività didattica”) in questa pagina didattica  didattica = Vai al testo contrassegnato con l’etichetta dida (paragrafo “Attività didattica”) nella pagina home.html

32 Gena - a.a. 2004/2005Web Design32 HTML: tabelle TR = riga (Table Row) TD = cella (Table Data) TABLE = tabella contenuto cella 1 contenuto cella a riga 1 a colonna 2 a colonna

33 Gena - a.a. 2004/2005Web Design33 HTML: tabelle Attributi del tag TABLE :

NB: La maggioranza degli attributi di TABLE possono essere applicati anche a TR e a TD Attributi esclusivi del tag TD :
"> Gena - a.a. 2004/2005Web Design33 HTML: tabelle Attributi del tag TABLE : <TABLE BGCOLOR = colore dello sfondo della tablella ALIGN =

34 Gena - a.a. 2004/2005Web Design34 HTML: tabelle Docenti del modulo di Informatica Nome Cristina Gena cgena[at]di.unito.it

35 Gena - a.a. 2004/2005Web Design35 HTML: tabelle... Anna Goy goy[at]di.unito.it Giovanna Petrone giovanna[at]di.unito.it

36 Gena - a.a. 2004/2005Web Design36 HTML: tabelle

spazio intorno al testo
spazio intorno al testo "> Gena - a.a. 2004/2005Web Design36 HTML: tabelle <TABLE BGCOLOR= spazio intorno al testo spazio intorno al testo

37 Gena - a.a. 2004/2005Web Design37 HTML: tabelle Le tabelle possono essere usate per il layout, per esempio:

38 Gena - a.a. 2004/2005Web Design38 HTML: tabelle Nido L'Aquilone - Via Oltrebrenta, Noventa Padovana (PD) Per informazioni: Alessandra: Maria Carla: Stefania: (continua…)

39 Gena - a.a. 2004/2005Web Design39 HTML: tabelle (… continua) Nido per bimbi da 0 a 3 anni AVVISI: Nel periodo maggio-giugno l'asilo chiuderà alle Nei mesi giugno-luglio si accolgono bambini provenienti dagli asili comunali che in quel periodo resteranno chiusi Inoltre l'asilo resterà chiuso dal 5 al 30 di agosto Per appuntamenti e informazioni contattateci !

40 Gena - a.a. 2004/2005Web Design40 HTML: frame I frame servono a suddividere la finestra del browser in sotto-finestre tra loro indipendenti, nelle quali si possono caricare documenti (file HTML ) diversi

41 Gena - a.a. 2004/2005Web Design41 HTML: frame Il file HTML che rappresenta l’intera pagina contiene le istruzioni per la suddivisione della finestra: title.html left.htmlmain.html "upperbar" (20%) "mainarea" (70% di 80% ) "leftbar" (30% di 80% ) 80%

42 Gena - a.a. 2004/2005Web Design42 HTML: frame Attributi del tag FRAME :

43 Gena - a.a. 2004/2005Web Design43 HTML: frames L’attributo TARGET : "upperbar" "leftbar""mainarea"... pubblicazioni... Ipotesi 1: voglio caricare la pagina pubblicazioni.html al posto dell'intera pagina: Pubblicazioni... Ipotesi 2: voglio caricare la pagina pubblicazioni.html nel frame "mainarea": Pubblicazioni... "upperbar" "leftbar" "mainarea" Pubblicazioni...

44 Gena - a.a. 2004/2005Web Design44 HTML: frames Ipotesi 1: voglio caricare la pagina pubblicazioni.html al posto dell'intera pagina: Pubblicazioni... Ipotesi 2: voglio caricare la pagina pubblicazioni.html nel frame "mainarea": Pubblicazioni... "upperbar" "leftbar" "mainarea" Pubblicazioni... pubblicazioni = pubblicazioni carica nella finestra intera pubblicazioni = pubblicazioni carica nel frame in cui ti trovi (NB: equivale a non indicare il TARGET )

45 Gena - a.a. 2004/2005Web Design45 HTML: l'attributo TARGET L’attributo TARGET può essere usato anche indipendentemente dai frame, per aprire una nuova finestra; per esempio voglio che le home page si aprano in nuove finestre: ... carica in una nuova finestra

46 Gena - a.a. 2004/2005Web Design46 HTML: image map click qui per caricare kit.html click qui per caricare tex.html click qui per caricare tiger.html click qui per caricare carson.html Un’image map è un’immagine suddivisa in “aree sensibili” che, al click del mouse, si comportano come link. Per es, consideriamo l’immagine contenuta nel file willer.gif

47 Gena - a.a. 2004/2005Web Design47 HTML: image map Per costruire un image map: 1.Si dichiara che, in corrispondenza di una certa immagine, verrà usata una certa "mappa" (con l'attributo USEMAP ) 2.Si definisce la "mappa" (con il tag MAP ) NB: Come si fa a conoscere le coordinate?

48 Gena - a.a. 2004/2005Web Design48 HTML: image map Si può caricare l'immagine con l'attributo ISMAP e poi leggere le coordinate sulla barra di stato, muovendosi con il mouse ( NB : l'origine delle coordinate è in alto a sinistra): NB: Gli strumenti di sviluppo (come Dream- weaver, FrontPage,...) generalmente forniscono metodi per costruire automaticam. le mappe!

49 Gena - a.a. 2004/2005Web Design49 HTML: form Le form (moduli) sono un meccanismo per rendere interattiva una pagina Web, richiedendo informazioni (dati) all’utente e inviandole al server per l’elaborazione

50 Gena - a.a. 2004/2005Web Design50 HTML: form... campi del modulo... Attributi del tag FORM : METHOD: specifica il modo in cui vengono inviati i dati:  GET = "in chiaro" (in coda all' URL specificato nell'attributo ACTION )  POST = "nascosti" (all'interno dlel'oggetto che viene inviato al server)

51 Gena - a.a. 2004/2005Web Design51 HTML: form ACTION: è un URL che contiene il richiamo di un’azione, cioè un programma; può essere, per es.:  mailto:indirizzo-di-  invia una all’indirizzo specificato, con i dati del modulo  una Servlet Java o uno Script CGI  invia i dati del modulo ad un programma che è in grado di riceverli e decodificarli  una pagina ASP, PHP, JSP (cioè una pagina contenente un programma in grado di riceverle i dati del modulo e di decodificarli)

52 Gena - a.a. 2004/2005Web Design52 HTML: form I pulsanti:  viene eseguita l’azione specificata in ACTION  vengono cancellati tutti i dati già inseriti

53 Gena - a.a. 2004/2005Web Design53 HTML: form Campi del modulo (ovvero le modalità per richiedere i dati):

54 Gena - a.a. 2004/2005Web Design54 HTML: form fino a 5 anni da 6 a 11 anni...

55 Gena - a.a. 2004/2005Web Design55 HTML: struttura gerarchica I tag in un documento HTML definiscono una struttura gerarchica: HTML HEADBODY H1P... BA IMG l'elemento HTML è "genitore" degli elem. HEAD e BODY ; HEAD e BODY sono "figli" si HTML ; ecc...


Scaricare ppt "Gena - a.a. 2004/2005Web Design1 Pagine Web statiche: HTML HTML (HyperText Markup Language) è un linguaggio di mark-up per scrivere pagine Web (ipertesti)"

Presentazioni simili


Annunci Google