La presentazione è in caricamento. Aspetta per favore

La presentazione è in caricamento. Aspetta per favore

Capitolo 1 Intro e alcuni tag. Server e Browser Internet Explorer Netscape Navigator Opera Server.

Presentazioni simili


Presentazione sul tema: "Capitolo 1 Intro e alcuni tag. Server e Browser Internet Explorer Netscape Navigator Opera Server."— Transcript della presentazione:

1 Capitolo 1 Intro e alcuni tag

2 Server e Browser Internet Explorer Netscape Navigator Opera Server

3 Server = computer particolari che forniscono servizi di accesso alle informazioni su rete –sempre collegati tra loro e alla rete –contengono tutti i file del sito –basta conoscere l’indirizzo del server –ricevuta la richiesta di visualizzare una pagina del sito, il server invia i file che la compongono

4 Browser Browser = programma per visualizzare le pagine web (ed accederle tramite Internet) –comunica col server chiede la pagina riceve tutti i dati (spediti a “pacchetti”) li interpreta, ricostruendo la pagina visualizza il risultato sullo schermo

5 Pag4: html source

6 Pag5: html results

7 Tag: Tag contenitore –html –head –title –body –h1 … h6 –p –em Tag vuoti –Img –

8 Esercizio pag10 20 min

9

10 Fotocopie pag 10 e pag 38 Aprire html-kit Creare, salvare, visualizzare file Partire da file –Testo_ex_starbuzz_index_html.txt index.html

11

12

13

14

15 Esercizio pag27 30 min Aggiungere le seguenti istruzioni di stile: body { background-color: #d2b48c; margin-left: 20%; margin-right: 20%; border: 1px dotted gray; padding: 10px 10px 10px 10px; font-family: sans-serif; }

16

17 Esercizio perfile mission.html Fotocopia tazza pag 27

18 Capitolo 2 ancore

19

20 Esercizio aggiunta ancore pag47

21 Da file in cartella –HFHTML_ch02 Aggiunger al file lounge.html le ancore –Fotocopia pag 46

22 Esercizio aggiunta ancore pag47 Creazione cartelle Modifica path da file lounge –Fotocopia pag 57 Link al padre pag 63

23

24 Eserc pag70-71 Capire i link! –Fotocopi pag 70-71

25

26

27 tecweb.unich.it/portanuova A questo punto chi vuol fare l’esame deve avere un account su tecweb (usare usernamee password dell’alula??) e registrarsi su moodle. Inoltre siti fatti da singoli, possibile avere contatti, un repository comune per informazioni e immagini prese da negozio. Elenco negozi che danno supporto alla cosa lungo via pindaro. Pam: tu devi creare contenitore (tipo mappa geografica della strada con possibilita’ di click) sul progetto eletto vincitore dal negoziante stesso in questo anno.

28 Cap 3 Quote e liste nesting entities

29

30 Esercizio pag78 Creare la pag web per la pag 78 –Prima disegnarla su carta –Poi fare blocchi e poi aggiungere tag (pag ) –Risultato pag 84 –Es1: Partire da file journal_html.txt –Esercizio 2: Sostituire virgolette con e per blocchi e (pag 90) Inline-vs-block (pag 94)

31 Eserc Pag le liste Pag 102 il risultato Pag 104 il source Unordered list (pag 107) (file journal.html)

32 Nesting eserc pag 112 Distribuire fotocopie pag 112 o visualizzarla a video

33

34

35 Riapsso tag eser. Pag 113 Alla lavagna chiedere

36 Entities!! <html> See w3schools.com/tags/ref_entities.asp

37 Es pag115 Crack the location! Fotocopie da consegnare

38 Pag 116 esercizio per casa Consegnare fotocopie

39

40 Cap 5 Atributo alt, width, heigth su img Uso di programmi grafica Lo fa pamela

41 Fare anche colori a pag

42 Cap 6-7 Fino a XHTML

43 Nesting immagini solo dentro un blocco! Doctype e meta per charset iso Validare a validator.w3.org pagine fatte finora (dopo aver aggiunto doctype e meta) Fotocopie pag Pag 259: cosa non si fa

44 Esercizio pag 260 Trovare gli errori

45 Pag 268: come passare a xhtml Pag 272 xhtml check list

46 Cap 8 Intro to css

47 Struttura regole di stile pag 289 Tag stile pag 291 o link a foglio esterno pag305 Esrcizio 292--: –settare a marrone il colore dei paragrafi del file lounge.html –Stile per headings (regole per piu’ di un elemento) –Seconda regola solo per h1 (che aggiunge proprieta’ non comuni ad h2) pag 296

48 Esercizio: pag 304 Creare file lounge.css E linkarlo come foglio stile da lounge.html, elixir.html e directions.html

49 Eredita’ pag Selettori di classe!! Pag Classi multiple e regole di priorita’

50 Esercizio pag 323

51 Esercizio pag 326

52 Esercizio pag 327

53 Validazione di fogli stile –http://jigsaw.w3.org/css-validator/http://jigsaw.w3.org/css-validator/

54 Esercizio property soup: Pag 330 Property soup –color, font-weight, left, line-height, top, letter- spacing, background-color, border, margin, font-size, text-align, font-style, list-style, background-image, font-family, border-bottom

55 Cap 9 Css fonts and colors

56 Font !! Pag –Specifica font per body (small or medium??) e poi usa font relativi al body con “%” o “em” –Ie e firefox possono rescalare la pagina a richiesta dell’utente se si usano le regole sopra (non usare px!!)

57 Pag 362: applicazione stile Visualizzare differenze con e senza stile pagina diario di bordo di Tony E completo con text decoration e border- bottom pag 378

58 Cap Box model

59 Lounge da quello visualizzato a pag 386 A quella visualizzata a pag 387

60 Esercizio pag 388- Da lounge.html del cap 10, –Aggiungere foglio stile (388) –A casa, provate esercizio pag 390

61 Box-model pag 391 Pag : giocare con boxes, borders, padding, margin, content area Esempio pag !!

62 Esercizio: box verde pag

63 Tipi di bordi: pag

64 Id: pag

65 Pag 421 Using multiple stylesheets

66 Stle sheets for seveal media!

67 Cap 11

68 Div!! Esempio cat and dogs pag

69 Div in the elixir!! Da pag 439 a pag 443

70 Pag Spiegazione proprieta’ width dell’oggetto, del pading, del bordo e del margin –Sommandoli si ottiene la larghezza totale

71 Continuando con elixir: Padding e margin, text-align: pag Esercizio pag 450! Color for h2 figlio di div! Pag Line height: 456

72 Alcuni shortcuts Pag

73 Uso di span. Eserc pag 462 e pag 466

74 Styling pag 469, 471

75 Altre pseudo-class: –:first-child

76 Cascade style sheets: –Browser –User –Author All’interno di ogni classe per specificita’ Gioco –000 da dx N. of element Classi Id –Es: 002 e’ piu’ spec di 001 –100 è piu’ spec di 001

77 Es per casa pag 481 (float: right)

78 Cap 12 Disposizione elementi (block and inline)

79 Disposizione blocchi 489 Disposizione inline 491 Insieme p 492 Come si comportano i margini in inline e block 493 (vedi anche 3^ dumb question pag 494

80 Funzionamento di float pag –E come ha funzionato su lounge.html 497

81 Il nuovo starbuzz Da 499 a rusutato two column 503 Facciamo come su lounge: risultato pag 506 –Soluz: right-margin come side bar (ricordate che float:right va sopra il blocco e contenuto inline scorre sotto. Inoltre immagini di sfondo non interessa margine che diventa quindi trasmarente (marrone nell’esempio) Soluz alternativa width di main-area? –No (pag 510)

82 Problem footer overlap  509 –Soluzione proprieta’ clear: right

83 Pag Ora fisso il main a sx e margini sulla sidebar a dx. Pos: viene prima il main (anche senza css o in pdas) Neg: la sidebar scala invece di restare fissa … Soluz: da liquid a frozen layout

84 Frozen layout 517 Aggiungere un div contenitore di larghezza fissa Per migliorarlo: –Jello (gelato ) con margin left/right auto!! Centra il contenitore 519

85 Altra poss: absolute position N.b. absolute position ESCE dal flusso! Gli inline non ne tengono conto (passano sotto)!! –z-index Position: static, float, absolute

86 Using absolute position 523 Cosa succede: 525 –La sidebar scende sul footer (clear non lo sente piu!!!) Soluz: cambiare larghezza footer 527

87 Ricapitolando: 526 Float Jello absolute

88 Qui gli studenti possono fare mille esercizi, anche quelli dello scorso anno, con medoti diversi, etc E dovrebbero gia’ avere idea di come strutturare il loro sito web

89 Pag 528: uso di z-index Pag 532: uso di absolute positioning (rispetto a primo contenitore posizionato absolute!!) è posizionato absolute!! –Nota: html definisce il bottom non la finedella pagina ma la fine della finestra del browser!! Quindi attenti a posizionamenti absolute con scarto dal bottom!!

90 Esercizio pag 533

91 Fixed positioning Relative:

92 Esempio 3 colonne 541 Altri esempi: … vedi link a pag 541

93 Cap 13 tabelle

94 Pag 554 Summary and caption pag 557 Styling the table pag (tony’s diary!!)

95 Tabelle: –Border, margin (della tabella), border-spacing (delle celle) Celle: –Padding, border, border-spacing Altro: border-collapse

96 Rowspan, colspan 569 Table inside a table : esercizio

97 Style list!! Pam: sito con i tantissimi tipi di liste

98 Cap 14 forms

99 Forms: 592,593,594,595, 596 Elementi di una form: 598—601

100 Esercizio pag 602 (vedi pag 607 per attributi usabili) –Submit: Value –Input/textarea: Maxlength –Tutti meno options: name

101 Styling the form!! Pag 626

102 Altri elementi: 632 –Fieldset, legned, label Altri input: 633 –Password –File –Multiple selection


Scaricare ppt "Capitolo 1 Intro e alcuni tag. Server e Browser Internet Explorer Netscape Navigator Opera Server."

Presentazioni simili


Annunci Google