Capitolo 1 Intro e alcuni tag
Server e Browser Internet Explorer Netscape Navigator Opera Server
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
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
Pag4: html source
Pag5: html results
Tag: Tag contenitore –html –head –title –body –h1 … h6 –p –em Tag vuoti –Img –
Esercizio pag10 20 min
Fotocopie pag 10 e pag 38 Aprire html-kit Creare, salvare, visualizzare file Partire da file –Testo_ex_starbuzz_index_html.txt index.html
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; }
Esercizio perfile mission.html Fotocopia tazza pag 27
Capitolo 2 ancore
Esercizio aggiunta ancore pag47
Da file in cartella –HFHTML_ch02 Aggiunger al file lounge.html le ancore –Fotocopia pag 46
Esercizio aggiunta ancore pag47 Creazione cartelle Modifica path da file lounge –Fotocopia pag 57 Link al padre pag 63
Eserc pag70-71 Capire i link! –Fotocopi pag 70-71
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.
Cap 3 Quote e liste nesting entities
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)
Eserc Pag le liste Pag 102 il risultato Pag 104 il source Unordered list (pag 107) (file journal.html)
Nesting eserc pag 112 Distribuire fotocopie pag 112 o visualizzarla a video
Riapsso tag eser. Pag 113 Alla lavagna chiedere
Entities!! <html> See w3schools.com/tags/ref_entities.asp
Es pag115 Crack the location! Fotocopie da consegnare
Pag 116 esercizio per casa Consegnare fotocopie
Cap 5 Atributo alt, width, heigth su img Uso di programmi grafica Lo fa pamela
Fare anche colori a pag
Cap 6-7 Fino a XHTML
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
Esercizio pag 260 Trovare gli errori
Pag 268: come passare a xhtml Pag 272 xhtml check list
Cap 8 Intro to css
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
Esercizio: pag 304 Creare file lounge.css E linkarlo come foglio stile da lounge.html, elixir.html e directions.html
Eredita’ pag Selettori di classe!! Pag Classi multiple e regole di priorita’
Esercizio pag 323
Esercizio pag 326
Esercizio pag 327
Validazione di fogli stile –
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
Cap 9 Css fonts and colors
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!!)
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
Cap Box model
Lounge da quello visualizzato a pag 386 A quella visualizzata a pag 387
Esercizio pag 388- Da lounge.html del cap 10, –Aggiungere foglio stile (388) –A casa, provate esercizio pag 390
Box-model pag 391 Pag : giocare con boxes, borders, padding, margin, content area Esempio pag !!
Esercizio: box verde pag
Tipi di bordi: pag
Id: pag
Pag 421 Using multiple stylesheets
Stle sheets for seveal media!
Cap 11
Div!! Esempio cat and dogs pag
Div in the elixir!! Da pag 439 a pag 443
Pag Spiegazione proprieta’ width dell’oggetto, del pading, del bordo e del margin –Sommandoli si ottiene la larghezza totale
Continuando con elixir: Padding e margin, text-align: pag Esercizio pag 450! Color for h2 figlio di div! Pag Line height: 456
Alcuni shortcuts Pag
Uso di span. Eserc pag 462 e pag 466
Styling pag 469, 471
Altre pseudo-class: –:first-child
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
Es per casa pag 481 (float: right)
Cap 12 Disposizione elementi (block and inline)
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
Funzionamento di float pag –E come ha funzionato su lounge.html 497
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)
Problem footer overlap 509 –Soluzione proprieta’ clear: right
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
Frozen layout 517 Aggiungere un div contenitore di larghezza fissa Per migliorarlo: –Jello (gelato ) con margin left/right auto!! Centra il contenitore 519
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
Using absolute position 523 Cosa succede: 525 –La sidebar scende sul footer (clear non lo sente piu!!!) Soluz: cambiare larghezza footer 527
Ricapitolando: 526 Float Jello absolute
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
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!!
Esercizio pag 533
Fixed positioning Relative:
Esempio 3 colonne 541 Altri esempi: … vedi link a pag 541
Cap 13 tabelle
Pag 554 Summary and caption pag 557 Styling the table pag (tony’s diary!!)
Tabelle: –Border, margin (della tabella), border-spacing (delle celle) Celle: –Padding, border, border-spacing Altro: border-collapse
Rowspan, colspan 569 Table inside a table : esercizio
Style list!! Pam: sito con i tantissimi tipi di liste
Cap 14 forms
Forms: 592,593,594,595, 596 Elementi di una form: 598—601
Esercizio pag 602 (vedi pag 607 per attributi usabili) –Submit: Value –Input/textarea: Maxlength –Tutti meno options: name
Styling the form!! Pag 626
Altri elementi: 632 –Fieldset, legned, label Altri input: 633 –Password –File –Multiple selection