HTML cursus

Les 5: Frames

Soms kan het handig zijn om een webpagina op te splitsen in secties of delen. Deze delen noemen we frames en zijn zelf ook webpagina's. De verschillende frames vormen de frameset. Hoe je dit doet, wordt hier besproken.

Pagina verticaal opdelen in frames

Om meteen een idee te geven hoe frames er uit (kunnen) zien, beginnen we met een voorbeeldje.

<html>
<head>
<title>Werken met frames</title>
</head>
<frameset cols="25%,*">
<frame src="frame1.html">
<frame src="frame2.html">
</frameset>
</html>
Bekijk het resultaat van bovenstaande code. Resultaat

Op de plaats van de body tag staat nu de frameset tag. Deze vertelt de browser dat we de pagina geen klassieke pagina is maar één die bestaat uit frames. Het attribuut cols zegt dat dit verticaal moet gebeuren. De eerste waarde van dit attribuut zegt dat de eerstvolgende frame 25% van de ruimte van de pagina zal innemen. De tweede waarde is een * (ook wel een wildcard genoemd), deze maakt de browser duidelijk dat de frame die als tweede gedefinieerd wordt de rest van de pagina moet innemen.

Vervolgens worden de frames gedefinieerd met behulp van de frame tag. Het attribuut src bepaalt welk document in dat deel van de pagina komt. Met andere woorden frame1.html zal 25% van de pagina innemen en frame2.html de rest.

Opmerking

In het voorbeeld wordt een percentage gebruikt, maar men kan hier — zoals gewoonlijk — ook gewoon een getal invullen dat dan bepaalt hoeveel pixels de frame breed is.

Merk ook op dat je in het voorbeeld de breedte van de frames kan aanpassen door met de scheidingslijn te slepen.

Pagina horizontaal opdelen in frames

<html>
<head>
<title>Werken met frames</title>
</head>
<frameset rows="25%,*">
<frame src="frame1.html">
<frame src="frame2.html">
</frameset>
</html>
Bekijk het resultaat van bovenstaande code. Resultaat

Dit verloopt natuurlijk volledig analoog met het verticaal opdelen van een pagina. Het enige verschil is dat hier het rows attribuut gebruikt moet worden.

Verticaal en horizontaal

<html>
<head>
<title>Werken met frames</title>
</head>
<frameset rows="100,*">
<frame src="boven.html">
<frameset cols="200,*">
<frame src="links.html">
<frame src="rechts.html">
</frameset>
</frameset>
</html>
Bekijk het resultaat van bovenstaande code. Resultaat

Eerst komt de frameset die zegt dat de pagina horizontaal opgedeeld moet worden en dat de eerste frame 100 pixels groot is en de tweede de rest van de pagina inneemt. De eerste frame wordt gedefinieerd als boven.html, de tweede is opnieuw een frameset. Deze splitst de rest van de pagina verticaal op. Hierbij is links.html 200 pixels groot en rechts.html neemt dan de rest van de pagina in.

Attributen van frameset

  • cols

    Dit attribuut verdeelt de pagina verticaal.

  • rows

    Dit attribuut verdeelt de pagina horizontaal.

  • frameborder

    Dit attribuut bepaalt of er een rand is tussen de frames. Er zijn twee mogelijke waarden: 1 en 0. De standaardwaarde is 1. 1 zorgt dat er een rand is en 0 zorgt dat er geen is.

  • border

    Hiermee bepaal je de dikte van de randen tussen de frames.

  • bordercolor

    Bepaalt de kleur van de frameranden. Je kan hier als waarde een Engelse kleurnaam of een RGB waarde invullen.

Attributen van frame

  • src

    Hiermee vertel je de browser welk document de frame bevat.

  • name

    Hiermee geef je de frame een naam, dit zal handig blijken wanneer je vanuit een frame bij een klik op een link een pagina in een andere frame wilt openen. Dit doe je door bij het target attribuut van de link de naam van de gewenste frame op te geven. In het algemene voorbeeld is hier gebruik van gemaakt.

  • noresize

    Als je dit attribuut gebruikt, kan de bezoeker de breedte of hoogte van de frame niet aanpassen.

  • scrolling

    Hiermee vertel je de browser of er al dan niet een scrollbar (schuifbalk) aanwezig is in de frame. De mogelijke waarden zijn yes, no en auto. Als je kiest voor de eerste waarde, is er altijd een scrollbar aanwezig in de frame. Als je voor no kiest, zijn er nooit scrollbars aanwezig. Als je de laatste waarde gebruikt, zal er enkel een scrollbar zijn wanneer die nodig is. Deze is de standaardwaarde.

  • marginwidth

    Dit attribuut bepaalt de afstand tussen de inhoud en de linker- en rechterkant van de frame.

  • marginheight

    Dit attribuut bepaalt de afstand tussen de inhoud en de boven- en onderkant van de frame.

Uitbreiding wildcard (*)

We weten reeds dat deze dient voor het aanduiden van de resterende ruimte van een pagina. Wanneer er meerdere wildcards worden gebruikt in een frameset, wordt de resterende ruimte gelijk verdeeld. Je kan er ook voor zorgen dat de ene frame het dubbele dan de andere inneemt. Bijvoorbeeld *,2*,* heeft hetzelfde effect als 25%,50%,25%.

De noframes tag

De laatste tag die we in deze les bespreken, is de noframes tag. Deze gebruiken we voor de bezoekers die een browser hebben die geen frames ondersteunt. Het gebruik hiervan zal in het algemeen voorbeeld verduidelijkt worden.

Algemeen voorbeeld

Hier volgt het algemeen voorbeeld die alles combineert dat we deze les gezien hebben.

<html>
<head>
<title>Algemeen voorbeeld met frames</title>
</head>
<frameset rows="80,*" framespacing="0" frameborder="0">
<frame src="header.html" name="header" scrolling="no" noresize>
<frameset cols="160,*,160">
<frame src="linkermenu.html" name="links" noresize>
<frame src="inhoud.html" name="inhoud" scrolling="yes" noresize>
<frame src="rechtermenu.html" name="rechts" noresize>
</frameset>
<noframes>
<body bgcolor="white">
Je browser ondersteunt geen frames, klik <a href="versie_zonder_frames.html">hier</a> om een versie zonder frames van deze website te bekijken.
</body>
</noframes>
</frameset>
</html>
Bekijk het resultaat van bovenstaande code. Resultaat
Opmerking

Om de broncode van een frame te bekijken, dien je met de rechtermuisknop in de gewenste frame te klikken en dan op iets als Paginabron bekijken te klikken. Wil je de code waar de frameset gedefineerd is bekijken, moet je dat via het menu van de webbrowser doen. Meer informatie vind je bij het FAQ gedeelte document aanpassen onder de titel Via het menu van de webbrowser.

Opmerking

Vele webmasters raden het gebruik van frames af, de volgende argumenten geven ze dan:

  1. Het gebruik van frames wordt niet door alle browsers ondersteunt, vooral oudere browsers hebben er last mee.
  2. Zoekmachines hebben het vaak moeilijk met het indexeren van een pagina met frames, waardoor jouw pagina' mogelijk een lagere ranking krijgen van zoekmachines.
  3. Zoals je in dit lesje hebt geleerd, gebruik je meerdere documenten op één pagina als je frames gebruikt. Wanneer de bezoeker een van de frames afzonderlijk bekijkt, is je lay-out naar de vaantjes want dan wordt het document uit de frameset gehaald.

Of jij frames nu gaat gebruiken op je website of niet, moet jij zelf beslissen. Er zijn namelijk ook tegenargumenten voor bovenstaande argumenten:

  1. Bijna niemand heeft nog een browser die geen frames ondersteunt.
  2. Geen tegenargument.
  3. Er is een scriptje dat ervoor zorgt dat de pagina niet kan bekeken worden zonder de frameset.
    <script type="text/javascript">
    <!--
    if(parent.frames.length == 0){
    // Vervang index.html door de URL van je indexpagina
    window.location.replace("index.html");
    }
    //-->
    </script>
    Dit scriptje plaats je dan in de head sectie van je broncode.