Stap 16 – Frames

Laatste update: 4 maart 2019

Voor veel mensen is frames het meest complexe HTML dat je kunt leren. Gelukkig wordt het niet meer zoveel gebruikt.

Deze tags worden in HTML5 niet meer ondersteund. CSS biedt ontzettend veel leuke alternatieven.

Een website dat frames gebruikt, laadt diverse HTML bestanden tegelijk in. De eerste HTML file, dat aangeroepen wordt in de browser, zal alleen een zogehete FRAMESET bevatten. Deze roept alle andere HTML bestanden aan. Dit zorgde voor best wat zwevende content, die vervolgens opgepikt werd door zoekmachines. Het is natuurlijk niet fijn als je dan via een trefwoord bij een deel van een website terecht komt, maar je krijgt de rest van de site niet te zien. Vandaar dat zoekmachines hun eisen al snel bijstele en frames in de ban gooiden. Wil je toch nog het idee van frames hebben, kijk dan naar de mogelijkheden met CSS.

Frameset

Laten we een frameset maken. Neem dit over en sla het op als frames.html

<html>
<head><title>Mijn frames website</title></head>
<frameset rows="50, *">

<frame src="boven-frame.html" />
<frame src="onder-frame.html" />
</frameset>
</html>


Dit is een FRAMESET, waarmee het beeld in twee horizontale delen gesplitst wordt. Vervolgens wordt deze gevuld met twee andere HTML files. Als je dit nu opvraagt in de browser, krijg je foutmeldingen te zien, omdat we de HTML bestanden waarmee de frames gevuld moeten worden, nog niet bestaan. Echter zie je wel de splitsing van het scherm.

Je ziet ook dat er geen BODY-tag wordt gebruikt bij het aanmaken van een FRAMESET. 

We gaan een stapje verder:

<html>
<head><title>Mijn frames website</title></head>
<frameset rows="50, *">

<frame src="boven-frame.html" />
  <frameset cols="140, *">

  <frame src="linker-frame.html" />
<frame src="rechter-frame.html" />

  </frameset>
</frameset>
</html>

Met bovenstaande codering vorm je drie frames. Een frame boven, een linker frame en een groot frame rechts. 

Rows

Met 

<frameset rows="50, *">

open je een FRAME bestaande uit twee bestanden. Met ROWS geef je aan dat je het beeldscherm horizontaal wilt delen. Het bovenste stuk moet 50 pixels hoog zijn. Het sterretje (*) betekent dat de rest van het scherm voor het tweede gedeelte gebruikt mag worden. 
Het bovenste frame (die van 50 pixels hoog) moet een andere HTML file weergeven: 

<frame src="boven-frame.html" />

Zorg ervoor dat niet dezelfde frameset oproept als je waar je al mee bezig bent (in dit geval frames.hml). Wanneer je dit wel doet, zal er een loop ontstaan waar de browser niet uit zal komen en de kans is groot dat deze zal vastlopen. Wel is het mogelijk een tweede frameset te openen, die weer andere HTML files oproept dan de huidige. 

Cols

Het onderste (tweede) frame heb je verdeeld in twee verticale delen; kolommen dus (COLS). 

<frameset cols="140, *">

Het eerste gedeelte mag 140 pixels breed zijn. Vervolgens, krijgt de tweede kolom de resterende hoeveelheid pixels van het beeldscherm toegewezen. Het linker kolom moet gevuld worden met de HTML file “linker-frame.html”: 

<frame src="linker-frame.html" />

en de rechter met “rechter-frame.html”:

<frame src="rechter-frame.html" />

Omdat er twee FRAMESETS geopend zijn, worden er ook twee afgesloten: 

</frameset>
</frameset>


Dus om dit alles te laten werken heb je 4 HTML documenten nodig, namelijk:

1. frames.html
2. boven-frame.html
3. linker-frame.html
4. rechter-frame.html

Uiteindelijk open je alleen frames.html in een browser. Die regelt de rest. De HTML bestanden 2 t/m 4 kun je vullen met wat je maar wilt.

Borders

Zou je dit bekijken in de browser, dan zie je de randen van de frames heel duidelijk. Je kunt de border (rand) uitzetten. Dit doe je zo:

<html>
<head><title>Mijn frames website</title></head>
<frameset rows="50, *" border="0" border="0" marginheight="0" marginwidth="0" frameborder="0">

<frame src="boven-frame.html"/>
<frameset cols="140, *" border="0" marginheight="0" marginwidth="0" frameborder="0">

  <frame src="linker-frame.html" />
<frame src="rechter-frame.html" />

  </frameset>
</frameset>
</html>

Met de toevoegingen BORDER=0 MARGINHEIGHT=0 MARGINWIDTH=0 FRAMEBORDER=0 aan de FRAMESETS zijn alle borders uitgezet en eventuele extra witruimtes ook. Hierdoor wordt de FRAMESET onzichtbaar en zal het het beeld van de rest van het uiterlijk niet verstoren. 

Resize en Scrolling

Standaard kunnen mensen de rand van een frame oppakken en verslepen naar een andere locatie. Hiermee wordt het formaat dus aangepast. Daarnaast zal er automatisch een scrollbalk zichtbaar worden als de inhoud groter is dan het frame. Dit kun je ook aanpassen:

<html>
<head><title>Miijn frames website</title></head>
<frameset rows="50, *" border="0">

<frame src="boven-frame.html" noresize scrolling="no" />
<frameset cols="140, *">

  <frame src="linker-frame.html" noresize scrolling="no" />
<frame src="rechter-frame.html" noresize scrolling="auto" />

  </frameset>
</frameset>
</html>

Met NORESIZE kan de bezoeker geen invloed hebben op de maat van het frame. Zou je dit niet toevoegen dan kan iemand de rand van een frame verslepen naar een ander formaat.

Met SCROLLING=AUTO activeer je, indien nodig, een scrollbar aan de rechterkant van het frame. Door dit op NO te zetten laat je dit nooit toe. Voeg je dit helemaal niet toe, dan staat de SCROLLING altijd op AUTO. 

Frame-namen en linken van frame naar frame

Om te kunnen linken tussen frames, moet elk frame een unieke naam hebben. Zo zou je in het linkerframe op een link kunnen klikken en de content kunnen laten veranderen van het rechterframe.

<html>
<head><title>Mijn frames website</title></head>
<frameset rows="50, *" border="0">

<frame src="boven-frame.html" name="boven" />
<frameset cols="140, *">

  <frame src="linker-frame.html" name="links" />
<frame src="rechter-frame.html" name="rechts" />

  </frameset>
</frameset>
</html>

Met de toevoegingen NAME-attribuut aan de FRAME-tag geef je een naam aan een frame.

Stel dat je met bovenstaande frameset het linker-frame.html te gebruikt voor buttons en rechter-frame.html voor de hoofdtekst. Dan wil je dat de tekst in het rechterframe verschijnt, wanneer er in het linkerframe geklikt is. De linkjes achter de buttons moeten dan van een TARGET voorzien zijn: Een bestemming. 

Voorbeeld: 
<a href="index.html" target="rechts">Home</a>

Als bovenstaande link opgenomen zou zijn in het linkerframe (linker-frame.html), dan zou de file index.html zichtbaar worden in de frame die “rechts” heet. Stel je geen TARGET aan binnen een FRAMESET, dan zal de file zichtbaar worden in de frame waar de link zich ook al bevond (dus het linkerframe).

Naar stap 17

Bookmark the permalink.

Comments are closed.