1 e Sono due elementi generici, DIV sta per division ed è un elemento a blocco; SPAN è un generico...
8
1 <DIV> e <SPAN> • Sono due elementi generici, DIV sta per division ed è un elemento a blocco; SPAN è un generico elemento in linea. • I div (e gli span) possono essere annidati • div e span si utilizzano con id, style e class e permettono una suddivisione più razionale del documento
-
Upload
anjelica-giglio -
Category
Documents
-
view
218 -
download
0
Transcript of 1 e Sono due elementi generici, DIV sta per division ed è un elemento a blocco; SPAN è un generico...
1
<DIV> e <SPAN>
• Sono due elementi generici,DIV sta per division ed è un elemento a blocco; SPAN è un generico elemento in linea.
• I div (e gli span) possono essere annidati
• div e span si utilizzano con id, style e class e permettono una suddivisione più razionale del documento
2
Pagine a FRAME
• E' possibile dividere lo spazio della finestra del browser in tante sottofinestre, ognuna delle quali può contenere un documento.
• In questo caso la finestra principale ospiterà un documento html particolare, dove al posto del consueto <BODY> viene dichiarata la struttura <FRAMESET>
• Gli attributi cols= e/o rows= permettono di dimensionare le varie sottofinestre. Viene utilizzata una lista di misure (in pixel o in percentuale o con *)
• Ogni sottofinestra viene indicata con il tag <FRAME>Il parametro src= indica il percorso della pagina.
Il parametro name= viene usato dal target del tag <A>
3
Strutture di FRAME
• L'intera finestra del browser può essere divisa in varie righe (attributo rows=) oppure in varie colonne (cols=), oppure contemporaneamente in righe e colonne.
<frameset rows="25%,*,25%"> <frame name="alto" src="http://www.repubblica.it"> <frame name="centrale" src="http://www.lasentinella.it"> <frame name="basso" src="http://www.lastampa.it"></frameset>
<frameset cols="25%,*,25%"> <frame name="destra" src="http://www.repubblica.it"> <frame name="centro"
src="http://www.lasentinella.it"> <frame name="sinistra" src="http://www.lastampa.it"></frameset>
4
Strutture di FRAME
<frameset cols="50%,50%" rows="50%,50%"> <frame name="uno" src="http://www.repubblica.it"> <frame name="due" src="http://www.lasentinella.it"> <frame name="tre" src="http://www.lastampa.it"> <frame name="quattro"
src="http://www.ilsole24ore.com"></frameset>
• E' possibile sostituire un frame con un'intera struttura frameset (frame annidati) creando configurazioni a T <frameset rows="25%,*"> <frame name="alto" src="http://memo.ghiglieno.it"> <frameset cols="25%,*">
<frame name="destra" src="html_base.htm"> <frame name="sinistra" src="tab_img.htm">
</frameset></frameset>
5
Attributi di <frame> e <frameset>
• è possibile specificare la possibilità di variare le proporzioni tra una finestra e l'altra resize, bordi, margini e barre di scorrimento
• <FRAMESET frameborder="YES|NO" border="n"
bordercolor="rgb">
• <FRAMEscrolling="YES|NO|AUTO"
marginwidth="pixel" marginheight="pixel"
noresize>
6
I frames: quando e perchè
• Le pagine contenute nei frame sono difficilmente indicizzabili
• Quand'anche siano indicizzate dai motori di ricerca, difficilmente si può ricreare la struttura originaria.
• Nella barra rimane fisso l'indirizzo• Non tutti i browser leggono i frames
• E' un metodo molto veloce per integrare dei contributi (per chi produce, non per chi naviga)
• Il W3C ne sconsiglia l'uso
7
IFrame - inLine Frame
• Esiste un modo più semplice di lavorare cin i frame, non supportato da tutti i browser.
• Il tag <IFRAME> consente di creare in un punto qualsiasi della pagina un frame, semplicemente specificando nome, altezza e larghezza
<BODY><h1 align="center">Questo è un esempio di
iframe</h1><table border=10 height="80%" width="100%"
align="center" cellspacing=10 ><tr>
<td><iframe src="http://www.virgilio.it" width="300" height="300" name="a"></td>
<td><iframe src="http://www.yahoo.it" width="300" height="300" name="b"></td>
<td><iframe src="http://www.excite.it" width="300" height="300" name="c"></td>
</tr></table>
</BODY>
8
…verso l'HTML 5
• Utilizzo di tag descrittivi al posto di generici <div> <header>, <footer>, <nav>, <aside>, <section>, <article>, <hgroup>, <nav>, <output>, <progress>, …
• Utilizzo di <CANVAS> area "grafica" programmabile • Form più evoluti:
– type="email,url,date,number,range,…."– autofocus– required placeholder="…."
• tag <video src="…"> e <audio src="...">
