Capitolo 1

(1)

Capitolo 1

Intro e alcuni tag

(2)

Server e Browser

Internet Explorer Netscape Navigator Opera

Server

(3)

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

(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

– <!– commenti!!!!!! -->

(8)

Esercizio pag10 20 min

(9)

(10)

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

(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)

Esercizio aggiunta ancore pag47

• 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 <q> e <blockquote>

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 80-81-82) – Risultato pag 84

– Es1: Partire da file

• journal_html.txt

– Esercizio 2:

• Sostituire virgolette con <q> </q> e per blocchi <blockquote>

e <br>(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

(33)

(34)

(35)

Riapsso tag eser. Pag 113

• Alla lavagna chiedere

(36)

Entities!!

• <html> <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

(39)

(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/

(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 <a> 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!!) <html> è 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