HTML - I frame

  »   HTML di base  »   HTML Tutorial - Using Frames in HTML

I frame (o cornici) sono utilizzati per visualizzare più di un documento HTML sulla stessa pagina. Ciò significa che si avrà un contenuto senza contenuto, che solamente avrà il ruolo di mostrare al browser quali pagine devono essere visualizzate. Con l'avvento di PHP e CSS questa tecnica viene utilizzata sempre meno.

HTML - Frame, pagina del credito

Solitamente le cornici vengono utilizzate per mostrare il menu separato dal contenuto. Una volta cliccato su un link un'altra pagina visualizzerà il contenuto.

Eccone un esempio:

html<html>
	<head></head>

	<frameset cols="30%,*">
		<frame src="menu.html">
		<frame src="content.html">
	</frameset>

</html>
  • frameset - Questa è l'etichetta che stabilisce le caratteristiche dei frame, al suo interno verranno definiti i singoli frame.
  • frameset cols="#%, *" - "Cols" stabilisce l'altezza che avrà ogni cornice. Nell'esempio precedente abbiamo stabilito che il primo frame (menu) occuperà il 30% dell'area mostrata, e abbiamo usato il segno " * " per indicare al browser che nel resto della pagina verrà mostrato il contenuto.
  • frame src="" -l'indirizzo dei file che verranno visualizzati come menu e contenuto.

HTML - Frame - Aggiunta di un banner o di un titolo

Osserva il seguente codice:

html<html>
	<head></head>
	
	<frameset rows="20%,*">
		<frame src="title.html">
		<frameset cols="30%,*">
			<frame src="menu.html">
			<frame src="content.html">
		</frameset>
	</frameset>
</html>

frameset rows="#%, *" - "rows" stabilisce l'altezza di ogni cornice che verrà visualizzata. Nell'esempio precedente abbiamo scelto che il primo frame sarà del 20%, e il resto dello spazio rimasto sarà diviso tra menu.html e content.html.

HTML - Frame - Borders and Spaces

Dovete aver notato che tra un frame e l'altro ci sono alcune linee grigie che la maggior parte delle volte non sono desiderate. È possibile cancellarle utilizzando i tag frameborder e framespacing. Questi attributi saranno introdotti sotto l'etichetta frameset.

**Note: Frameset e frameborder sono lo stesso attributo. Ci sono alcuni browser che non li riconoscono entrambi, solo uno di essi. Per questo, il nostro consiglio è di usare entrambi per una maggiore sicurezza.

  • frameborder"#" - Il valore 0 significa che non ci sarà un bordo
  • border="#" - modifica lo spessore del bordo (usato da Netscape)
  • framespacing="#" - modifica lo spessore del bordo (utilizzato da Internet Explorer)

Ecco un esempio pratico:

html<html>
	<head></head>

	<frameset border="0" frameborder="0" framespacing="0" rows="20%,*">
		<frame src="title.html">
		<frameset border="0" frameborder="0" framespacing="0" cols="30%,*">
			<frame src="menu.html">
			<frame src="content.html">
		</frameset>
	</frameset>
</html>

HTML - "Frame name" e "Frame target"

Per mantenere il menu nella sua posizione attuale e che quando clicchiamo sulla pagina dei contatti da aprire, ad esempio, al posto della pagina di contenuto, daremo un nome ad ogni frame e specificheremo il luogo in cui si aprirà utilizzando il tag 'target base'.

Ecco il codice per la nostra pagina:

html<html>
	<head>
		<base target="content">
	</head>

	<frameset rows="20%,*">
		<frame name="title" src="title.html">
		<frameset cols="30%,*">
			<frame name="menu" src="menu.html">
			<name="content" src="content.html">	
		</frameset>
	</frameset>
</html>

Noresize e scrolling

Puoi personalizzare le cornici utilizzando noresize e scrolling

html<html>
	<head></head>
	
	<frameset border="2" frameborder="1" framespacing="2" rows="20%,*">
		<frame src="title.html" noresize scrolling="no">
		<frameset border="4" frameborder="1" framespacing="4" cols="30%,*">
			<frame src="menu.html" scrolling="auto" noresize>
			<frame src="content.html" scrolling="yes" noresize>
		</frameset>
	</frameset>
</html>
  • noresize - non consente al frame di cambiare la sua dimensione in base allo schermo dell'utente.
  • scrolling="(yes/no)" - permette, o non permette, di utilizzare lo scroll in una cornice.
HTML - Lo sfondo
HTML - I layout
HTML di base
Riferimenti
Varie
More CSS Tutorials