andrea spinelli linguaggio html lezioni 4-5: cornici tabelle meta-elementi
TRANSCRIPT
![Page 1: Andrea Spinelli Linguaggio HTML Lezioni 4-5: Cornici Tabelle Meta-elementi](https://reader035.vdocuments.net/reader035/viewer/2022081602/5542eb5c497959361e8cb34c/html5/thumbnails/1.jpg)
Andrea SpinelliLinguaggio HTML
Lezioni 4-5:CorniciTabelle
Meta-elementi
![Page 2: Andrea Spinelli Linguaggio HTML Lezioni 4-5: Cornici Tabelle Meta-elementi](https://reader035.vdocuments.net/reader035/viewer/2022081602/5542eb5c497959361e8cb34c/html5/thumbnails/2.jpg)
Cornici
![Page 3: Andrea Spinelli Linguaggio HTML Lezioni 4-5: Cornici Tabelle Meta-elementi](https://reader035.vdocuments.net/reader035/viewer/2022081602/5542eb5c497959361e8cb34c/html5/thumbnails/3.jpg)
Elemento FRAMESET
● Collezione di riquadri● alternativo a BODY● attributi: ROWS, COLS● contiene
– FRAME
– FRAMESET
![Page 4: Andrea Spinelli Linguaggio HTML Lezioni 4-5: Cornici Tabelle Meta-elementi](https://reader035.vdocuments.net/reader035/viewer/2022081602/5542eb5c497959361e8cb34c/html5/thumbnails/4.jpg)
Elemento FRAME
● Singolo riquadro● Attributi
– SRC
– NAME
![Page 5: Andrea Spinelli Linguaggio HTML Lezioni 4-5: Cornici Tabelle Meta-elementi](https://reader035.vdocuments.net/reader035/viewer/2022081602/5542eb5c497959361e8cb34c/html5/thumbnails/5.jpg)
Strutture a frame
FRAMESET
FRAME FRAME
![Page 6: Andrea Spinelli Linguaggio HTML Lezioni 4-5: Cornici Tabelle Meta-elementi](https://reader035.vdocuments.net/reader035/viewer/2022081602/5542eb5c497959361e8cb34c/html5/thumbnails/6.jpg)
Esercizio04-01.html
● Semplice struttura a due frame, sinistra/destra● A sinistra il vostro curriculum● a destra la lista della spesa
![Page 7: Andrea Spinelli Linguaggio HTML Lezioni 4-5: Cornici Tabelle Meta-elementi](https://reader035.vdocuments.net/reader035/viewer/2022081602/5542eb5c497959361e8cb34c/html5/thumbnails/7.jpg)
Riferimenti tra frame
● Elemento A: l'attributo TARGET● Combinazione con l'attributo NAME● E' utile HREF con
– file.html#ancora
![Page 8: Andrea Spinelli Linguaggio HTML Lezioni 4-5: Cornici Tabelle Meta-elementi](https://reader035.vdocuments.net/reader035/viewer/2022081602/5542eb5c497959361e8cb34c/html5/thumbnails/8.jpg)
Esercizio04-02.html
● Indice degli esercizi su riquadri● Creare una struttura a riquadri destra/sinistra
– piccolo frame a sx, restante a dx● a sinistra l'elenco degli esercizi svolti● a destra il testo degli esercizi
![Page 9: Andrea Spinelli Linguaggio HTML Lezioni 4-5: Cornici Tabelle Meta-elementi](https://reader035.vdocuments.net/reader035/viewer/2022081602/5542eb5c497959361e8cb34c/html5/thumbnails/9.jpg)
FRAMESET innestati
FRAMESET
FRAME
FRAME
FRAME
FRAMESET
![Page 10: Andrea Spinelli Linguaggio HTML Lezioni 4-5: Cornici Tabelle Meta-elementi](https://reader035.vdocuments.net/reader035/viewer/2022081602/5542eb5c497959361e8cb34c/html5/thumbnails/10.jpg)
Altri TARGET
● _BLANK : nuova finestra● _SELF : sostituisce il frame corrente● _PARENT : sostituisce il FRAMESET padre● _TOP : sostituisce tutta la finestra
![Page 11: Andrea Spinelli Linguaggio HTML Lezioni 4-5: Cornici Tabelle Meta-elementi](https://reader035.vdocuments.net/reader035/viewer/2022081602/5542eb5c497959361e8cb34c/html5/thumbnails/11.jpg)
Esercizio04-03.html● Struttura a riquadri innestati: indice a sx, due
riquadri a dx● dx in alto: esercizi svolti● dx in basso: “glossario” (area di rete)● sx: collegamenti a
– esercizi
– termini del glossario
– nuove finestre (_BLANK)
![Page 12: Andrea Spinelli Linguaggio HTML Lezioni 4-5: Cornici Tabelle Meta-elementi](https://reader035.vdocuments.net/reader035/viewer/2022081602/5542eb5c497959361e8cb34c/html5/thumbnails/12.jpg)
Tabelle
● Elemento TABLE● Contenuti
– Elemento CAPTION
– Elemento TR
– Elementi TH e TD
![Page 13: Andrea Spinelli Linguaggio HTML Lezioni 4-5: Cornici Tabelle Meta-elementi](https://reader035.vdocuments.net/reader035/viewer/2022081602/5542eb5c497959361e8cb34c/html5/thumbnails/13.jpg)
Esercizio04-04.html
● Tabella di pezzi musicali● CAPTION● Colonne: Pezzo, autore, genere, epoca, note● Canone di Pachelbel, Variazioni Goldberg,
Magnificat di Bach, Nona di Beethoven, Yesterday, Certe Notti (per esempio!)
![Page 14: Andrea Spinelli Linguaggio HTML Lezioni 4-5: Cornici Tabelle Meta-elementi](https://reader035.vdocuments.net/reader035/viewer/2022081602/5542eb5c497959361e8cb34c/html5/thumbnails/14.jpg)
Attributi di tabella
● TABLE
– SUMMARY
– BORDER● TD, TH
– ROWSPAN
– COLSPAN
![Page 15: Andrea Spinelli Linguaggio HTML Lezioni 4-5: Cornici Tabelle Meta-elementi](https://reader035.vdocuments.net/reader035/viewer/2022081602/5542eb5c497959361e8cb34c/html5/thumbnails/15.jpg)
Esercizio04-05.html
● Modificare l'esercizio 04-04● Aggiungere una riga sopra l'intestazione con i
gruppi “generale” e “dettagli”● “generale” raccoglie Titolo e Autore,”dettagli”
tutto il resto● Aggiungere il contorno e inserire un sommario
![Page 16: Andrea Spinelli Linguaggio HTML Lezioni 4-5: Cornici Tabelle Meta-elementi](https://reader035.vdocuments.net/reader035/viewer/2022081602/5542eb5c497959361e8cb34c/html5/thumbnails/16.jpg)
Commenti
• <!-- ...testo del commento... -->
• Invisibili• Indispensabili!
![Page 17: Andrea Spinelli Linguaggio HTML Lezioni 4-5: Cornici Tabelle Meta-elementi](https://reader035.vdocuments.net/reader035/viewer/2022081602/5542eb5c497959361e8cb34c/html5/thumbnails/17.jpg)
Metainformazione
• Elemento META
• Attributi principali– NAME– CONTENT
• Nomi ricorrenti:– AUTHOR, DESCRIPTION, GENERATOR,
KEYWORDS
![Page 18: Andrea Spinelli Linguaggio HTML Lezioni 4-5: Cornici Tabelle Meta-elementi](https://reader035.vdocuments.net/reader035/viewer/2022081602/5542eb5c497959361e8cb34c/html5/thumbnails/18.jpg)
Esercizio05-01.html
• Documentare l'esercizio 04-04 con: Autore, descrizione, generatore, keywords
![Page 19: Andrea Spinelli Linguaggio HTML Lezioni 4-5: Cornici Tabelle Meta-elementi](https://reader035.vdocuments.net/reader035/viewer/2022081602/5542eb5c497959361e8cb34c/html5/thumbnails/19.jpg)
URL relative
• Nome di un file nella stessa cartella
– “file.html”• Nome di un file in una sottocartella
– “img/immagine.jpg”• Nome di un file nella cartella superiore
– “../file.html”• ... in una sottocartella della cartella superiore
– “../cartella/file.html”
![Page 20: Andrea Spinelli Linguaggio HTML Lezioni 4-5: Cornici Tabelle Meta-elementi](https://reader035.vdocuments.net/reader035/viewer/2022081602/5542eb5c497959361e8cb34c/html5/thumbnails/20.jpg)
Esercizio05-02
● Creare una struttura di sottocartelle:
– <principale>● belli
– img
● brutti● in belli/Esercizio05-02.html riferirsi a una
immagine in img, e includere in una cornice un file in brutti
![Page 21: Andrea Spinelli Linguaggio HTML Lezioni 4-5: Cornici Tabelle Meta-elementi](https://reader035.vdocuments.net/reader035/viewer/2022081602/5542eb5c497959361e8cb34c/html5/thumbnails/21.jpg)
Anatomia di una URL
● http:● //www.repubblica.it● /2003-01-01/articoli● editoriale.html● http://www.repubblica.it/2003-01-01/articoli/editoriale.html