I frame in HTML sono un modo per dividere la finestra del browser in più sezioni, ognuna delle quali può caricare e visualizzare un documento HTML diverso. In questo articolo vedremo esempi pratici di frame in HTML.

Sebbene il suo utilizzo sia diminuito negli ultimi anni a causa dell'adozione di tecniche più moderne e flessibili, come CSS e JavaScript, può ancora essere trovato su alcuni siti Web, in particolare quelli creati negli anni '90 e all'inizio degli anni '90. quella del 2000.

Come funzionano i frame o i frame in HTML?

Le cornici sono composte da due elementi:

1. Cornice: L'elemento viene utilizzato per dividere la finestra del browser in sezioni rettangolari, ognuna delle quali può caricare un proprio documento HTML.

instagram story viewer

2. cornici: L'elemento è utilizzato all'interno di a per definire ciascuna delle singole sezioni. E invia a chiamare qualche altro documento che viene caricato all'interno del frameset.

• Segui con: Esempi di iFrame

Come creare cornici in HTML

Per creare un documento HTML con frame, segui due passaggi molto semplici:

1. Crea un documento HTML che definisce la struttura dei frame utilizzando l'elemento. Per esempio:

File 1: frameset.html

2. Crea uno o più documenti HTML da caricare all'interno dei frame.

File 2: frame1.html

Questo è il fotogramma 1

File 3: frame2.html

Questo è il fotogramma 2

Attributi frame in HTML

Alcuni degli attributi degli elementi più importanti Sono:

• scorrimento: Questo attributo viene utilizzato per controllare l'aspetto delle barre di scorrimento nel frame. Può avere i valori "auto", "yes" o "no".

• noresize: Questo attributo viene utilizzato per impedire all'utente di ridimensionare la cornice.

• patata dolce: Questo attributo viene utilizzato per assegnare un nome al frame, che può essere utile per fare riferimento al frame nei collegamenti e negli script.

• src: Questo attributo viene utilizzato per specificare l'URL del documento HTML da caricare nel frame.

• frameborder: Questo attributo specifica se i frame devono avere bordi o meno. I valori possibili sono "1" (per mostrare i bordi) o "0" (per non mostrare i bordi). Per esempio, .

• confine: Questo attributo definisce la larghezza del bordo tra i frame in pixel. Per esempio, creerà un bordo di 5px tra i fotogrammi.

• framespace: Questo attributo è simile a confine. Definisce anche lo spazio tra i fotogrammi in pixel. Per esempio, imposterà uno spazio di 10 px tra i fotogrammi.

• colore del bordo: Questo attributo ti permette di cambiare il colore del bordo delle cornici. È possibile specificare qualsiasi colore valido. Per esempio, renderà rosso il bordo delle cornici.

Esempio di utilizzo:

Come collegarsi a un frame specifico

Possiamo aprire un collegamento in un frame specifico utilizzando l'attributo bersaglio Nell'etichetta. Il valore di bersaglio dovrebbe essere uguale al nome del frame (patata dolce attributo di ). Per esempio:

nel menu.html
Pagina 1
Pagina 2

In questo caso, cliccando sui link "Pagina 1" o "Pagina 2" nel frame del menu, verrà caricata la pagina corrispondente nel frame "contenuto".

Come rompere le cornici

Se desideri che un collegamento apra una pagina al di fuori del frameset (ovvero sostituisca l'intero frameset), puoi utilizzare il valore speciale _superiore per l'attributo bersaglio. Per esempio:

nel menu.html
uscire dai frame

Quando fai clic su "Exit Frames", il browser caricherà "pageOutofFrames.html" nella finestra intera, sostituendo il frameset.

Esempio per dividere lo schermo in due colonne con cornici

Questo esempio divide lo schermo in due colonne di uguali dimensioni. Ogni colonna carica una pagina HTML diversa.

Esempio per creare una barra laterale di navigazione con frame

Questo esempio crea una barra laterale che occupa il 25% dello schermo e viene utilizzata per la navigazione. Il resto dello schermo viene utilizzato per visualizzare il contenuto principale.

Esempio per dividere lo schermo in righe e colonne

Questo esempio più complesso divide lo schermo in quattro parti uguali. Ogni sezione carica una pagina HTML diversa.

Esempio di navigazione dall'alto con frame HTML

Crea un file che definisce due fotogrammi di fila. I due file che definisce sono: uno per la navigazione (che occupa il 20% della larghezza della finestra) e uno per il contenuto principale (che occupa il resto della larghezza della finestra).

Successivamente, dovresti creare i file "navigation.html" e "content.html". Ad esempio, "navigation.html" potrebbe avere il seguente aspetto:

Pagina 1

Pagina 2

Pagina 3


E "content.html" potrebbe essere qualcosa del genere:

Benvenuti sul nostro sito web!

Qui andrà il contenuto della pagina selezionata nella navigazione.

In questo caso, quando clicchi su un link in "navigation.html", la pagina corrispondente viene caricata nel frame "content".