Om frames aan te maken op pagina beginnen we altijd met de label <FRAMESET> en eindigen we met </FRAMESET>, hiertussen gebeurd het allemaal. Aan deze label wordt de attribuut ROWS="x%, x%" toegevoegd om deze horizontaal (rijen) te verdelen. Of de attribuut COLS="x%, x%" gebruikt om het geheel vertikaal (kolommen) te verdelen. Ik gebruik op dit moment procenten bij ROWS en COLS, maar pixel-maten zijn hier ook van toepassing, hierover later meer. Daarna worden zoveel pagina's opgevraagd als er opgegeven zijn in COLS of ROWS, in dit geval twee. Dit gebeurd door <FRAME SRC="pagina.html"> in te voegen. Hierdoor worden de pagina's ingeladen in de desbetreffende pagina. Het geheel wordt afgesloten door de label </FRAMESET>.
Het voorgaande kan er dan als volgt uit komen te zien:

<HTML>
<HEAD>
<TITLE>De titel van de homepage </TITLE>
</HEAD>

</HTML>

Klik hier voor dit voorbeeld.

Goed, we hebben nu dus een pagina verdeeld in twee delen. Boven en onder. U ziet dat er geen BODY element wordt gebruikt. En het bovenstaande HTML-dokumentje is het enige wat nodig is om de twee andere dokumenten te openen. Er is maar weinig fantasie nodig om te bedenken wat hier allemaal mee mogelijk is.

In het voorbeeld heb ik de ROWS (rijen) verdeeld met 20% voor boven en 80% voor onder. Dit wordt altijd automatisch aangepast als de browser vergroot/verkleind wordt. Het feit dat we twee waardes aangeven (welke ook pixels hadden kunnen zijn) betekend automatisch dat er ook twee pagina's geopend moeten worden. Daarom komt u tweemaal FRAME SRC tegen. Als wij met pixels gaan werken of een combinatie hiervan, bedenk dan dat je uit moet komen op een vol venster. Met procenten is dit simpel, maar met pixels zorgt u ervoor dat er 'ergens' een wildcard inzit. Stel dat u de pagina wilt opdelen in drie kolommen. Dan kan dit als volgt: COLS="100, 150, *". De 1e kolom wordt 100 pixels, de 2e 150 en de 3e de overgebleven ruimte. Dit is afhankelijk van de breedte het venster. Let er op dat de afmetingen altijd tussen aanhalingstekens worden geplaatst en onderling met een komma scheidt. Omdat wij uiteraard niet kunnen weten met welke monitor deze pagina wordt bekeken, is het raadzam, bij gebruik van afmetingen met pixels, altijd tenminste 1 variable afmeting (asterisk of wildcard) te gebruiken.

<FRAME SRC="pagina.html">

De pagina's die worden opgeroepen door middel van FRAME SRC, en die worden gebruikt in de frame zijn gewone pagina's. En kunnen ook alszodanig wordt gemaakt. Alle mogelijkheden die voor een normale pagina gelden, gelden ook voor deze pagina's. Inclusief de achtergronden, afbeeldingen, links, vet, italic enz.

TARGET="..."

Iedereen kan zich voorstellen dat deze frames ideaal zijn voor bv. een inhoudsopgave. Aan de linkerzijde de inhoud en als een bezoeker hier een link aankiest dan komt de tekst aan de rechterzijde. Dit kan gelukkig. Maar er moet wel aan de link worden verteld waar deze geopend moet worden. Anders zou deze in dezelfde frame worden geopend. En dit wordt eigenlijk al bepaald op het moment dat FRAME SET wordt gedefineerd.
Dit kan door <FRAME SRC> uit te breiden met NAME="...". Hiermee kan het desbetreffende frame een (vrije) naam worden geven. Ik zal dit illustreren met een voorbeeld:

<HTML>
<HEAD>
<TITLE>De titel van de homepage </TITLE>
</HEAD>

</HTML>

Door in een link de toevoeging target="rechts" te gebruiken zal er gerefereerd worden naar het betreffende frame (<A HREF="pagina.html" target="rechts">link</A>). Dus pagina.html zal worden geopend in het frame welke rechts heet. Er zijn trouwens meer mogelijkheden met targets. target="_new" zal de pagina in een nieuw venster openen, target="_top" zal de pagina in hetzelfde venster openen,... dus in principe over alles heen.

<NOFRAME> </NOFRAME>

Helaas, maar niet iedere (vooral oudere) browser ondersteund de FRAME SET. Dat is jammer. Deze bezoekers zien dus werkelijk helemaal niets. Om hier toe in te voorzien is er een mogelijkheid geschapen. De label NOFRAME. Om ervoor te zorgen dat gebruikers van een andere browser niet tegen een wit (of grijs) scherm aan te laten staren kunnen wij na de FRAME SET en voor de pagina-afsluiten NOFRAME opgeven. Hiertussen kunnen wij de tekst (en afbeeldingen en links) invullen. Het geheel worden afgesloten met </NOFRAME>. Om te kijken of dit wel goed is gelukt kan men dit testen met een oude browser. Het zou er dan als volgt uit kunnen zien:

<HTML>
<HEAD>
<TITLE>De titel van de homepage </TITLE>
</HEAD>

Hier komt de tekst welke is bedoeld voor gebruikers die een browser hebben die geen frames ondersteunt.

</NOFRAME>

</HTML>

<NAME="x>

Als de homepage in twee frames, wordt verdeeld met links een kleinere frame waarin de inhoudsopgave komt met hyperlinks naar je overige pagina's, en rechts een groot frame waarin deze pagina's geopend dienen te worden. Hiervoor worden dus drie html-bestanden aangemaakt.

Eén met de frame-definities zoals boven omschreven (denk aan <NOFRAME> voor de niet-frame gebruikers!)
Eén met de inhoudsopgave, uiteraard met hyperlinks naar de desbetreffende pagina's.
Eén met een welkomsscherm.

En dan..... blijkt het fout te gaan. Als je in de inhoudsopgave een link aanklikt blijkt de op te roepen pagina in het kleine frame te worden geplaatst. Om dit te voorkomen zullen we de frames eerst voor de browser herkenbaar moeten maken, door ze een naam te geven. Dit doe je door <FRAME SRC> uit te breiden met het attribuut NAME="naam". Dus bijvoorbeeld <FRAME SRC="frame1.htm" NAME="naam">.

Een homepage (index.html) die een pagina op deze wijze in tweeën verdeeld zou er dus als volgt uit kunnen zien:
frames

<HTML>
<HEAD><TITLE>mijn homepage</TITLE></HEAD>

<FRAMESET COLS="150,*">
<FRAME SRC="inhoud.html" NAME="inhoud">
<FRAME SRC="welkom.html" NAME="hoofdscherm">
</FRAMESET>

<NOFRAME>
pagina-inhoud voor niet-frame gebruikers
</NOFRAME>

</HTML>

Wanneer iemand deze pagina oproept zal zijn/haar scherm in tweeën worden gesplitst. Links een kolom van 150 pixels breed met de naam "index", waarin de pagina "inhoud.html" wordt getoond, de rest van het scherm wordt een groot frame met de naam "hoofdscherm" en daarin wordt de pagina "welkom.htm" weergegeven.
De pagina "inhoud.html" bestaat uit een opsomming van hyperlinks naar andere pagina's. Om nu een opgeroepen pagina in het grote frame weer te geven moeten we aan <A HREF="pagina.html"> nog het attribuut TARGET="naam" toevoegen. Om dus in bovenstaand voorbeeld een pagina over bijvoorbeeld onze hobbies in het grote venster weer te laten geven, maken we uiteraard eerst een pagina "hobbies.htm" aan. Vervolgens nemen we in de pagina "inhoud.html" de volgende regel op:
<A HREF="hobbies.html" TARGET="hoofdscherm">hobbies</A>
Wanneer iemand nu in het linker frame (de index) op het woordje 'hobbies' klikt, zal de pagina "hobbies.html" in het rechterframe worden geopend.

Achter TARGET vult u dus de naam in van een frame op uw pagina. Behalve een frame-naam kent TARGET ook nog enkele standaard opties:

TARGET="_blank" om een pagina in een nieuw schoon, dus frame-loos venster weer te geven.
TARGET="_self" om een pagina in het zelfde frame weer te geven als waar de link in stond (is dus hetzelfde als wanneer TARGET er niet staat).
TARGET="_parent" om een pagina weer te geven in een frame op een hoger niveau. Dit klinkt ingewikkeld, maar kan van toepassing zijn wanneer in een frame een pagina is weergegeven waarin ook weer frames voorkomen.
TARGET="_top" om een pagina weer te geven in een frame op het hoogste niveau. In de praktijk is dit de meest veilige manier om een pagina op een andere site te openen.
TARGET="_new" om een pagina in een nieuw te openen versie van de browser te openen. De bezoeker van uw pagina heeft nu dus twee versies van zijn/haar faforiete browser tegelijk open.

Let op de aanhalingstekens en op de 'underscore', het laagliggende streepje.

In de praktijk zult u het meest gebruik maken van TARGET="frame-naam" om een eigen pagina op te roepen, en TARGET="_top" om een pagina van iemand anders op te roepen.

Frames combineren (geneste frames)

Binnen een <FRAMESET> kunnen we een nieuwe <FRAMESET> openen. Klinkt ingewikkeld? Valt wel mee.
Laten we eens uitgaan van het eerder gebruikte voorbeeld. Links een inhoudsopgave (150 pixels breed) en rechts het hoofdvenster. Boven dat hoofdvenster willen we een smal gedeelte hebben met daarin een vaste tekst of logo, een soort briefhoofd dus.

frames

We beginnen met het indelen in twee kolommen. Dus <FRAMESET COLS="150,*">. Daarna definiëren we de inhoud van het eerste (linker) frame: <FRAME SRC="inhoud.htm" NAME="inhoud">
Tot zover niks nieuws, maar i.p.v. dat we nu een pagina oproepen voor het rechter frame, geven we opnieuw de opdracht <FRAMESET> om het rechter frame in tweeën te delen. Ditmaal met het attribuut ROWS= want we willen nu een horizontale verdeling maken.
Dus bijvoorbeeld <FRAMESET ROWS="75,*"> zodat we een smalle strook krijgen van 75 pixels hoog. Nu kunnen we de inhoud voor deze twee frames aanroepen met twee keer <FRAME SRC=......>. Vervolgens deze laatste <FRAMESET> afsluiten met </FRAMESET> en daarna de eerste <FRAMESET> niet vergeten af te sluiten, dus nog eens een keer </FRAMESET>.

Punten om goed op te letten

Na elke FRAMESET moeten er net zoveel pagina's worden opgeroepen of nieuwe FRAMESET worden gedefiniëerd als dat er achter ROWS= of COLS= is aangegeven.
Elke FRAMESET dient ook weer te worden afgesloten met </FRAMESET>.
Als u de frame afmetingen in procenten opgeeft, zorg er dan voor dat het totaal nooit boven de 100% uitkomt.
Als u de frame afmetingen in pixels opgeeft, gebruik dan tenminste één asterisk om een variabele breedte weer te geven, zodat de frames op elk formaat monitor mooi beeldvullend kunnen worden weergegeven.
Als u afbeeldingen op een pagina gebruikt en de framebreedte in pixels opgeeft, zorg dan dat het frame tenminste even groot is als de afbeelding.
Houd er bij het vaststellen van de afmetingen rekening mee dat niet iedereen 800 of zelfs 1024 pixels breed kan weergeven. (de gemiddelde internetter werkt met een schermresolutie 800 X 600 pixels).
Als u links opneemt naar pagina's van anderen, gebruik dan altijd het attribuut TARGET="_top" om een nieuw schoon scherm te openen. Stel dat 'die ander' ook frames toepast, of links heeft naar pagina's met frames, krijg je frames in frames (...in frames ...in frames etc). Daar blijft dus niks leesbaars van over.

<FRAMESET="x, x" NORESIZE SCROLLING="x BORDER="x>

Wanneer iemand je pagina met frames bekijkt, kan met de muis de positie van de frames wiizigen. Simpelweg door de scheiding tussen de frames te verslepen. Deze mogelijkheid kan worden uitgeschakeld met het attribuut NORESIZE in de <FRAME>-tag <FRAME NAME="naam" SRC="pagina.htm" NORESIZE>

Wanneer de inhoud van een pagina niet binnen het frame past krijgt men langs de rechterzijkant, en, als er een afbeelding of zeer lange woorden in de pagina voorkomen, waarschijnlijk ook langs de onderzijde, schuifbalken zodat u door de pagina kan scrollen. Net zoals dat overigens ook in andere windows schermen gebeurd.
Deze schuifbalken kunnen worden kunnen uitgeschakeld met het attribuut SCROLLING="NO".
<FRAME NAME="rechts" SRC="pagina2.htm" SCROLLING="NO">
Er bestaat ook nog zoiets als SCROLLING="YES", maar aangezien dit standaard is, heeft dit weinig nut.

Beide attributen, SCROLLING en NORESIZE kunnen ook samen worden gebruikt, maar wees voorzichtig: Wanneer iemand met een klein beeldscherm werkt zou het wel eens voor kunnen komen dat hij/zij een deel van de pagina nooit te zien krijgt!

De dikke kaderrand tussen de frames, de frameborder, kunnen we ook nog aanpassen. Microsoft en Netscape verschillen hierover echter van mening.
Voor Netscape gebruikers voeg je aan <FRAMESET>- het attribuut BORDER="n" toe. Waarbij je voor n een dikte in pixels dient in te vullen. Dit kan natuurlijk ook een 0 (nul) zijn, zodat de kaderrand dus helemaal niet meer zichtbaar is. Omdat dit attribuut in de <FRAMESET>-tag wordt geplaatst heeft het betrekking op alle frames.

Microsoft gaat hier een stapje verder. Voor Explorer gebruikers is het attribuut FRAMEBORDER="n" die je plaatst in elke afzonderlijk <FRAME>-tag. Je kunt hier dus voor elk frame een andere dikte opgeven.

Omdat Explorer en Netscape niet op dezelfde wijze met de border-attributen omgaan, doe je er verstandig aan om je pagina's met beide browsers uit te testen voor je ze op het net zet. Als je zelf niet over beide programma's beschikt, zet je pagina dan op een flop en probeer het uit bij iemand die wel dat andere pakket gebruikt. Want: wat in de ene browser een prachter lay-out geeft, kan in een andere browser niet om aan te zien zijn.