HTML - Frame
I frame HTML vengono utilizzati per dividere la finestra del browser in più sezioni in cui ogni sezione può caricare un documento HTML separato. Una raccolta di frame nella finestra del browser è nota come set di frame. La finestra è suddivisa in frame in modo simile alle tabelle sono organizzate: in righe e colonne.
Svantaggi dei frame
Ci sono pochi inconvenienti nell'utilizzo dei frame, quindi non è mai consigliabile utilizzare i frame nelle tue pagine web:
Alcuni dispositivi più piccoli non sono in grado di gestire i frame spesso perché il loro schermo non è abbastanza grande per essere diviso.
A volte la tua pagina verrà visualizzata in modo diverso su computer diversi a causa della diversa risoluzione dello schermo.
Il pulsante Indietro del browser potrebbe non funzionare come spera l'utente.
Ci sono ancora pochi browser che non supportano la tecnologia frame.
Creazione di cornici
Per usare i frame su una pagina usiamo il tag <frameset> invece del tag <body>. Il tag <frameset> definisce come dividere la finestra in frame. Ilrows l'attributo del tag <frameset> definisce i frame orizzontali e colsl'attributo definisce i frame verticali. Ogni frame è indicato dal tag <frame> e definisce quale documento HTML deve essere aperto nel frame.
Note- Il tag <frame> è obsoleto in HTML5. Non utilizzare questo elemento.
Esempio
Di seguito è riportato l'esempio per creare tre cornici orizzontali:
<!DOCTYPE html>
<html>
<head>
<title>HTML Frames</title>
</head>
<frameset rows = "10%,80%,10%">
<frame name = "top" src = "/html/top_frame.htm" />
<frame name = "main" src = "/html/main_frame.htm" />
<frame name = "bottom" src = "/html/bottom_frame.htm" />
<noframes>
<body>Your browser does not support frames.</body>
</noframes>
</frameset>
</html>Questo produrrà il seguente risultato:
Esempio
Mettiamo l'esempio sopra come segue, qui abbiamo sostituito l'attributo righe con cols e abbiamo cambiato la loro larghezza. Questo creerà tutti e tre i frame verticalmente -
<!DOCTYPE html>
<html>
<head>
<title>HTML Frames</title>
</head>
<frameset cols = "25%,50%,25%">
<frame name = "left" src = "/html/top_frame.htm" />
<frame name = "center" src = "/html/main_frame.htm" />
<frame name = "right" src = "/html/bottom_frame.htm" />
<noframes>
<body>Your browser does not support frames.</body>
</noframes>
</frameset>
</html>Questo produrrà il seguente risultato:
Gli attributi del tag <frameset>
Di seguito sono riportati importanti attributi del tag <frameset>:
| Suor n | Attributo e descrizione |
|---|---|
| 1 | cols Specifica quante colonne sono contenute nel set di frame e la dimensione di ciascuna colonna. Puoi specificare la larghezza di ciascuna colonna in uno dei quattro modi: Valori assoluti in pixel. Ad esempio, per creare tre frame verticali, usa cols = "100, 500, 100" . Una percentuale della finestra del browser. Ad esempio, per creare tre frame verticali, usa cols = "10%, 80%, 10%" . Utilizzando un carattere jolly. Ad esempio, per creare tre frame verticali, usa cols = "10%, *, 10%" . In questo caso il carattere jolly occupa il resto della finestra. Come larghezze relative della finestra del browser. Ad esempio, per creare tre frame verticali, usa cols = "3 *, 2 *, 1 *" . Questa è un'alternativa alle percentuali. È possibile utilizzare larghezze relative della finestra del browser. Qui la finestra è divisa in seste: la prima colonna occupa metà della finestra, la seconda occupa un terzo e la terza occupa un sesto. |
| 2 | rows Questo attributo funziona esattamente come l'attributo cols e accetta gli stessi valori, ma viene utilizzato per specificare le righe nel set di frame. Ad esempio, per creare due fotogrammi orizzontali, utilizza righe = "10%, 90%" . È possibile specificare l'altezza di ciascuna riga nello stesso modo spiegato sopra per le colonne. |
| 3 | border Questo attributo specifica la larghezza del bordo di ogni frame in pixel. Ad esempio, border = "5". Un valore di zero significa nessun bordo. |
| 4 | frameborder Questo attributo specifica se deve essere visualizzato un bordo tridimensionale tra i frame. Questo attributo assume valore 1 (sì) o 0 (no). Ad esempio frameborder = "0" non specifica alcun bordo. |
| 5 | framespacing Questo attributo specifica la quantità di spazio tra i frame in un set di frame. Può assumere qualsiasi valore intero. Ad esempio framespacing = "10" significa che dovrebbe esserci una spaziatura di 10 pixel tra ogni frame. |
Gli attributi del tag <frame>
Di seguito sono riportati gli attributi importanti del tag <frame>:
| Suor n | Attributo e descrizione |
|---|---|
| 1 | src Questo attributo viene utilizzato per fornire il nome del file che deve essere caricato nel frame. Il suo valore può essere qualsiasi URL. Ad esempio, src = "/html/top_frame.htm" caricherà un file HTML disponibile nella directory html. |
| 2 | name Questo attributo ti permette di dare un nome a un frame. Viene utilizzato per indicare in quale frame deve essere caricato un documento. Ciò è particolarmente importante quando si desidera creare collegamenti in un frame che caricano pagine in un altro frame, nel qual caso il secondo frame ha bisogno di un nome per identificarsi come destinazione del collegamento. |
| 3 | frameborder Questo attributo specifica se vengono visualizzati o meno i bordi di quel frame; sovrascrive il valore fornito nell'attributo frameborder sul tag <frameset> se ne viene fornito uno, e questo può assumere valori 1 (sì) o 0 (no). |
| 4 | marginwidth Questo attributo consente di specificare la larghezza dello spazio tra la sinistra e la destra dei bordi della cornice e il contenuto della cornice. Il valore è espresso in pixel. Ad esempio marginwidth = "10". |
| 5 | marginheight Questo attributo consente di specificare l'altezza dello spazio tra la parte superiore e inferiore dei bordi della cornice e il suo contenuto. Il valore è espresso in pixel. Ad esempio marginheight = "10". |
| 6 | noresize Per impostazione predefinita, puoi ridimensionare qualsiasi frame facendo clic e trascinando sui bordi di un frame. L'attributo noresize impedisce a un utente di ridimensionare il frame. Ad esempio noresize = "noresize". |
| 7 | scrolling Questo attributo controlla l'aspetto delle barre di scorrimento che appaiono sul frame. Questo assume valori "yes", "no" o "auto". Ad esempio scrolling = "no" significa che non dovrebbe avere barre di scorrimento. |
| 8 | longdesc Questo attributo consente di fornire un collegamento a un'altra pagina contenente una lunga descrizione del contenuto del frame. Ad esempio longdesc = "framedescription.htm" |
Supporto del browser per i frame
Se un utente sta utilizzando un qualsiasi browser precedente o qualsiasi browser che non supporta i frame, l'elemento <noframes> dovrebbe essere visualizzato all'utente.
Quindi devi posizionare un elemento <body> all'interno dell'elemento <noframes> perché l'elemento <frameset> dovrebbe sostituire l'elemento <body>, ma se un browser non comprende l'elemento <frameset> allora dovrebbe capire cosa c'è dentro il Elemento <body> contenuto in un elemento <noframes>.
Puoi mettere un bel messaggio per il tuo utente con vecchi browser. Ad esempio, scusa !! Il tuo browser non supporta i frames. come mostrato nell'esempio sopra.
Nome del frame e attributi di destinazione
Uno degli usi più popolari dei frame è posizionare le barre di navigazione in un frame e quindi caricare le pagine principali in un frame separato.
Vediamo il seguente esempio in cui un file test.htm ha il seguente codice:
<!DOCTYPE html>
<html>
<head>
<title>HTML Target Frames</title>
</head>
<frameset cols = "200, *">
<frame src = "/html/menu.htm" name = "menu_page" />
<frame src = "/html/main.htm" name = "main_page" />
<noframes>
<body>Your browser does not support frames.</body>
</noframes>
</frameset>
</html>Qui abbiamo creato due colonne da riempire con due frame. Il primo fotogramma è largo 200 pixel e conterrà la barra dei menu di navigazione implementata damenu.htmfile. La seconda colonna riempie lo spazio rimanente e conterrà la parte principale della pagina ed è implementata damain.htmfile. Per tutti e tre i collegamenti disponibili nella barra dei menu, abbiamo menzionato il frame di destinazione comemain_page, quindi ogni volta che fai clic su uno dei link nella barra dei menu, il link disponibile si aprirà nella pagina principale.
Di seguito è riportato il contenuto del file menu.htm
<!DOCTYPE html>
<html>
<body bgcolor = "#4a7d49">
<a href = "http://www.google.com" target = "main_page">Google</a>
<br />
<br />
<a href = "http://www.microsoft.com" target = "main_page">Microsoft</a>
<br />
<br />
<a href = "http://news.bbc.co.uk" target = "main_page">BBC News</a>
</body>
</html>Di seguito è riportato il contenuto del file main.htm -
<!DOCTYPE html>
<html>
<body bgcolor = "#b5dcb3">
<h3>This is main page and content from any link will be displayed here.</h3>
<p>So now click any link and see the result.</p>
</body>
</html>Quando cariciamo test.htm file, produce il seguente risultato:
Ora puoi provare a fare clic sui collegamenti disponibili nel pannello di sinistra e vedere il risultato. L' attributo target può anche assumere uno dei seguenti valori:
| Suor n | Opzione e descrizione |
|---|---|
| 1 | _self Carica la pagina nel frame corrente. |
| 2 | _blank Carica una pagina in una nuova finestra del browser. Apertura di una nuova finestra. |
| 3 | _parent Carica la pagina nella finestra genitore, che nel caso di un singolo frameset è la finestra principale del browser. |
| 4 | _top Carica la pagina nella finestra del browser, sostituendo eventuali frame correnti. |
| 5 | targetframe Carica la pagina in un frame di destinazione denominato. |