Introduzione allo sviluppo Web. Studium Generale, a.a , II semestre

Dimensione: px

Iniziare la visualizzazioe della pagina:

Download "Introduzione allo sviluppo Web. Studium Generale, a.a. 2013-2014, II semestre"

Marino Greco
8 anni fa
Visualizzazioni

1 Introduzione allo sviluppo Web Studium Generale, a.a , II semestre 1

2 Contatto Daniel Graziotin e-allo-sviluppo-web 2

3 Ciao mondo File di testo Aprite Sublime Text Scrivete Ciao, mondo! Salvatelo nella cartella ISW (o www) come ciaomondo.txt 3

4 Ciao mondo Aprite Sublime Text Scrivete Ciao, mondo! Salvatelo nella cartella ISW (o www) come ciaomondo.txt Andate su 4

5 Parentesi Client e server 5

6 Client e server Cosa succede? Avete un server nel vostro PC Di solito Mio PC Internet Internet Sito Web 6

7 Client e server Cosa succede? Avete un server nel vostro PC Di solito Mio PC Internet Internet Sito Web Mio PC Sito Web Internet Invece 7

8 Client e server Dualismi Client Server Internet Mio PC unibz.it

9 Client e server Dualismi Client Server Client Client Internet Server Client Client Server Mio PC unibz.it

10 Client e server Complicazione: sviluppo Web in locale Client Server Client Internet Server Mio PC localhost

11 Client e server Client Il vostro PC quando visualizzate un sito Web Il vostro tablet/smartphone quando visualizzate un sito Web Il vostro tablet/smartphone quando leggete le 11

12 Client e server Client Il vostro PC quando visualizzate un sito Web Il browser nel vostro PC Il vostro tablet/smartphone quando visualizzate un sito Web Il browser nel vostro tablet/smartphone Il vostro tablet/smartphone quando leggete le Il programma di posta elettronica nel vostro tablet/smartphone 12

13 Client e server Quiz WhatsApp (o programmi simili)? Lanciare una stampa su una stampante di rete? Le Webmail (Gmail, Outlook Webmail,..,?) 13

14 Torniamo a Ciao mondo 14

15 Ciao mondo HTML Scaricate Scompattate il file zip e otterrete ciaomondo.html Trascinate ciaomondo.html nella cartella ISW (o www) Andate su 15

16 Ciao mondo I tag <!DOCTYPE html> <html> <head> <title>titolo della pagina</title> </head> <body> Ciao, mondo! </body> </html> 16

17 Ciao mondo I tag Dei marcatori per istruire il browser Definiscono il markup, la struttura del documento Sono sempre nella struttura <qualcosa>, dove qualcosa è il nome del tag Il browser ha sempre bisogno di capire quanto qualcosa inizia e finisce Il tag si apre <qualcosa> e si chiude </qualcosa> Non <\qualcosa> (sempre lo slash /) Il testo «e si chiude» è racchiuso dai tag Eccezioni? 17

18 Ciao mondo Parlare con il browser <!DOCTYPE html> <html> <head> Ciao browser, leggi il seguito come documento HTML (5) Inizia il documento Iniziano le intestazioni del document <title>titolo della pagina</title> Inizia il titolo, che è Titolo della pagina, finisce il titolo </head> <body> Basta intestazioni Inizia il corpo della pagina Ciao, mondo! Ciao, mondo! </body> Finisce il corpo della pagina </html> Finisce il documento 18

19 Ciao mondo Parlare con il browser <!DOCTYPE html> <html> Ciao browser, leggi il seguito come documento HTML (5) <head> Inizia il documento <title> Titolo della pagina </title> Iniziano le intestazioni del document Inizia il titolo, che è Titolo della pagina, finisce il titolo Basta intestazioni </head> <body> Inizia il corpo della pagina Ciao, mondo! Ciao, mondo! Finisce il corpo della pagina </body> Finisce il documento </html> 19

20 Ciao mondo Parlare con il browser <!DOCTYPE html> <html> <head> <title>titolo della pagina</title> </head> <body> Ciao, mondo! </body> </html> Ciao browser, leggi il seguito come documento HTML (5) Inizia il documento Iniziano le intestazioni del document Inizia il titolo, che è Titolo della pagina, finisce il titolo Basta intestazioni Inizia il corpo della pagina Ciao, mondo! Finisce il corpo della pagina Finisce il documento 20

21 Ciao mondo Parlare con il browser Ciao browser, leggi il seguito come documento HTML (5) Inizia il documento Iniziano le intestazioni del document <!DOCTYPE html><html><head><title>titolo della pagina</title></head><body>ciao, mondo!</body></html> Inizia il titolo, che è Titolo della pagina, finisce il titolo Basta intestazioni Inizia il corpo della pagina Ciao, mondo! Finisce il corpo della pagina Finisce il documento 21

22 I tag Nuovo paragrafo e a capo Differenza? Vediamolo su Word prima 22

23 I tag p, per nuovo paragrafo Il tag p definisce i paragrafi nel testo Lo si apre e lo si chiude <p> e </p> 23

24 I tag p, per nuovo paragrafo Compito: Inserite 3 paragrafi nel file ciaomondo.html Servono paragrafi? 24

25 I tag br, per andare a capo Il tag br serve per andare a capo (break) Lo si apre e lo si chiude immediatamente <br /> 25

26 I tag br, per andare a capo Compito: Nei 3 paragrafi creati prima, inserite un «a capo» Ma solo nel primo paragrafo e nel secondo 26

27 I tag strong, per un testo forte Il tag strong serve per indicare un testo importante (strong, forte) Interpretato come grassetto Lo si apre e lo si chiude <strong> e </strong> 27

28 I tag strong, per un testo forte Compito: Nei 3 paragrafi creati prima, inserite cinque <strong> 2 per parole singole 2 per più di una parola 1 per un paragrafo intero 28

29 I tag em, per un testo enfatizzato Il tag em serve per indicare un testo con enfasi (emphasis) Interpretato come corsivo Lo si apre e lo si chiude <em> e </em> 29

30 I tag em, per un testo enfatizzato Compito: Nei 3 paragrafi creati prima, inserite tre <em> 30

31 I tag Markup o stile? Markup Stile Dinamicità 31

32 I tag Markup o stile? Markup Stile Dinamicità? <em> <strong> 32

33 I tag Markup o stile? Markup Stile Dinamicità <em> <strong> Il browser interpreta con grassetto e italico Storicamente, markup e stile erano una sola cosa <b> e <i> 33

34 I tag Titoli e sottotitoli I tag h1, h2, h3, h4, h5, h6 servono per indicare titoli di sezioni (o del documento) Interpretati come testo grande e in grassetto Li si apre e li si chiude <h1> e </h1> <h2> e </h2> <h3> e </h3> 34

35 I tag Titoli e sottotitoli I tag h1, h2, h3, h4, h5, h6 servono per indicare titoli di sezioni (o del documento) Interpretati come testo grande e in grassetto Li si apre e li si chiude <h1> e </h1> Prima o dopo un <p>, mai dentro 35

36 I tag Titoli e sottotitoli <h1>titolo</h1> <h2>sottotitolo</h2> <h3>sottosottotitolo</h3> Titolo Sottotitolo Sottosottotitolo 36

37 I tag ul, per liste puntate Il tag ul serve per impostare una lista puntata (unordered list) Lo si apre e lo si chiude <ul> e </ul> Prima o dopo un <p>, mai dentro Ogni elemento della lista deve essere racchiuso tra il tag li (list item) Lo si apre e lo si chiude <li> e </li> Fuori dai tag <li></li> non c è mai testo 37

38 I tag ul, per liste puntate <ul> <li>primo elemento</li> <li>secondo elemento</li> <li>terzo elemento</li> Primo elemento Secondo elemento Terzo elemento </ul> 38

39 I tag ol, per liste numerate Il tag ol serve per impostare una lista numerata (ordered list) Lo si apre e lo si chiude <ol> e </ol> Prima o dopo un <p>, non dentro Ogni elemento della lista deve essere racchiuso tra il tag li (list item) Lo si apre e lo si chiude <li> e </li> Fuori dai tag <li></li> non c è mai testo 39

40 I tag ol, per liste numerate <ol> <li>primo elemento</li> <li>secondo elemento</li> <li>terzo elemento</li> 1. Primo elemento 2. Secondo elemento 3. Terzo elemento </ol> 40

Documenti analoghi

Introduzione allo sviluppo Web. Studium Generale, a.a. 2013-2014, II semestre

Introduzione allo sviluppo Web Studium Generale, a.a. 2013-2014, II semestre 1 Contatto Daniel Graziotin graziotin@inf.unibz.it http://task3.cc/teaching/introduzion e-allo-sviluppo-web 2 Progettare un