Scaricare la presentazione
La presentazione è in caricamento. Aspetta per favore
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
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
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; }
17
Esercizio perfile mission.html Fotocopia tazza pag 27
18
Capitolo 2 ancore
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
24
Eserc pag70-71 Capire i link! –Fotocopi pag 70-71
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
30
Esercizio pag78 Creare la pag web per la pag 78 –Prima disegnarla su carta –Poi fare blocchi e poi aggiungere tag (pag 80-81-82) –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 102-104 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
35
Riapsso tag eser. Pag 113 Alla lavagna chiedere
36
Entities!! <html> See w3schools.com/tags/ref_entities.asp www.unicode.org/charts/
37
Es pag115 Crack the location! Fotocopie da consegnare
38
Pag 116 esercizio per casa Consegnare fotocopie
40
Cap 5 Atributo alt, width, heigth su img Uso di programmi grafica Lo fa pamela
41
Fare anche colori a pag 364-374
42
Cap 6-7 Fino a XHTML
43
Nesting immagini solo dentro un blocco! Doctype e meta per charset iso-8859-1 Validare a validator.w3.org pagine fatte finora (dopo aver aggiunto doctype e meta) Fotocopie pag 253-254 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 311-315 Selettori di classe!! Pag 316-320 Classi multiple e regole di priorita’ 319-320
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 342-354 –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 10-11 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 394-395: giocare con boxes, borders, padding, margin, content area Esempio pag 397-398!!
62
Esercizio: box verde pag 399-409
63
Tipi di bordi: pag 410-411
64
Id: pag 416-417
65
Pag 421 Using multiple stylesheets
66
Stle sheets for seveal media! 422-423
67
Cap 11
68
Div!! Esempio cat and dogs pag 433--436
69
Div in the elixir!! Da pag 439 a pag 443
70
Pag 444-446 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 447-449 Esercizio pag 450! Color for h2 figlio di div! Pag 452-455 Line height: 456
72
Alcuni shortcuts Pag 458-460
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 495-496 –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 511-512
83
Pag 515-516 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)!! 520-521 –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 528-529 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 534-538 Relative: 539-540
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 560-561 (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 573 575-575: esercizio
97
Style list!! 578-579 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
Presentazioni simili
