Abbiamo visto nella lezione precedente come poter suddividere all'occorrenza una pagina web in più finestre (cornici) ognuna delle quali richiamava una propria pagina web risultando di fatto come una sola ed unica pagina. Vediamo adesso come richiamare sempre una pagina esterna facendo uso di iframe, praticamente un frame interno che non altera la struttura principale perché consente semplicemente un richiamo della pagina più o meno come avviene per l'inserimento di una immagine.

Gli Iframes altro non sono che dei frames in linea, in qualsiasi punto della pagina è possibile creare un iframe e richiamare così al suo interno un'altra pagina.

Nel caso di iframe non è necessario usare una DOCTYPE DTD con dichiarazione frameset perchè non si tratta di una struttura a frames ma di una normale pagina che incorpora un frame.

L'elemento <iframe> col relativo elemento di chiusura </iframe> ha diversi attributi, alcuni di questi sono indispensabili: src (source) che richiama la pagina html vera e propria. name o id che attribuiscono un nome all' iframe in modo da poterlo usare per richiamare al suo interno una pagina da un link, vedremo più avanti come fare con target. scrolling con i parametri: autoyes o no per la gestione della barra di scorrimento laterale, se non specificato si intende auto.width e height rispettivamente per impostare le misure orizzontali e verticali,frameborder con valori 0 o 1 per nascondere o mostrare il bordo. marginwidth e marginheight per la distanza dal margine laterale sinistro e distanza dal margine superiore. Vediamo un esempio, questo il codice xhtml:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="it" lang="it">
<head>
<title> Titolo della mia pagina Web</title>
<link rel="stylesheet" type="text/css" href="foglio.css" />
</head>
<body>
<p>Questa è la mia prima pagina web in xhtml</p>
<iframe src="nome_pagina.html" id="prova_intro" name="prova_intro" width="300" height="150" marginwidth="3" marginheight="3">
</iframe>
</body>
</html>

Questo il risultato:

Da notare che il testo contenuto nell'iframe supera volutamente le dimensioni della finsetra impostata dando vita automaticamente alla barra di scorrimento. Si noti anch eil bordo nero intorno a tutta la finestra. Vediamo lo stesso codice adoperato per l'esempio sopra con l'attributo frameborder impostato a 0

Adesso si vede soltanto la barra di scorrimento generata automaticamente, vediamo ancora lo stesso codice adoperato per l'esempio sopra con frameborder = 0 e scrolling = no

Sono sparite le barre di scorrimento, se avessi usato un colore di sfondo bianco nessuno si sarebbe accorto che si tratta di una finestra esterna richiamata da iframe, ho invece volutamente usato un colore diverso per meglio rendere l'idea dei confini dell'iframe. Ovvio che se ho più testo delle dimensioni della finestra, come in questo esempio, e sopprimo le barre di scorrimento, risulterà impossibile leggere il restante contenuto che supera le dimensioni della finestra stessa.

Ricordatevi i nomi che avete assegnato ai vostri iframes, per nomi intendo quelli specificati con gli attributi name e id, saranno questi nomi che se dichiarati all'interno dell'attributo target, che abbiamo visto per i links, decideranno su quale iframes aprire e richiamare quanto associato al link stesso. Provate a fare clik su questo link, la pagina richiamata si aprirà sull'iframe immediatamente sopra. Con questo link rimetteremo la pagina originale. L'uso di target è deprecato nella forma strict di xhtml.

Con questa lezione avete imparato ad includere all'interno di una vostra pagina web un'altra pagina web facendo in modo che risulti come se fosse una sola unica pagina.

Ci avviciniamo alla fine di questo corso e nella prossima lezione, vedremo come inserire effetti speciali quali: audio, applets, scripting.

Se avete domande potete scrivere sul forum di supporto, gratuito e aperto a tutti.

Di Redazione

La nostra redazione è costantemente impegnata nel ricercare fonti attendibili e produrre contenuti informativi, guide e suggerimenti utili gratuiti per i lettori di questo sito.

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

NON seguire questo link o sarai bannato dal sito!