Andrea SpinelliLinguaggio HTML

Lezioni 4-5:CorniciTabelle

Meta-elementi

Cornici

Elemento FRAMESET

● Collezione di riquadri● alternativo a BODY● attributi: ROWS, COLS● contiene

– FRAME

– FRAMESET

Elemento FRAME

● Singolo riquadro● Attributi

– SRC

– NAME

Strutture a frame

FRAMESET

FRAME FRAME

Esercizio04-01.html

● Semplice struttura a due frame, sinistra/destra● A sinistra il vostro curriculum● a destra la lista della spesa

Riferimenti tra frame

● Elemento A: l'attributo TARGET● Combinazione con l'attributo NAME● E' utile HREF con

– file.html#ancora

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

FRAMESET innestati

FRAMESET

FRAME

FRAME

FRAME

FRAMESET

Altri TARGET

● _BLANK : nuova finestra● _SELF : sostituisce il frame corrente● _PARENT : sostituisce il FRAMESET padre● _TOP : sostituisce tutta la finestra

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)

Tabelle

● Elemento TABLE● Contenuti

– Elemento CAPTION

– Elemento TR

– Elementi TH e TD

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

Attributi di tabella

● TABLE

– SUMMARY

– BORDER● TD, TH

– ROWSPAN

– COLSPAN

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

Commenti

• <!-- ...testo del commento... -->

• Invisibili• Indispensabili!

Metainformazione

• Elemento META

• Attributi principali– NAME– CONTENT

• Nomi ricorrenti:– AUTHOR, DESCRIPTION, GENERATOR,

KEYWORDS

Esercizio05-01.html

• Documentare l'esercizio 04-04 con: Autore, descrizione, generatore, keywords

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”

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

Anatomia di una URL

● http:● //www.repubblica.it● /2003-01-01/articoli● editoriale.html● http://www.repubblica.it/2003-01-01/articoli/editoriale.html