Cursus HTML 4.01 : handleiding werken met frames

Het werken met frames geeft je de mogelijkheid het scherm te verdelen in meerdere 'vensters'. Deze vensters kunnen onafhankelijk van elkaar gemanipuleerd worden.

Voor het werken met frames is er een pagina nodig waar je de verdeling in frames opgeeft. Dergelijke pagina's zie je hieronder. Deze pagina bevat enkel de informatie over het verdelen van het venster, geen inhoud. Vandaar dat de BODY-tags hier niet voorkomen. Ze werden vervangen door de FRAMESET-tags.

De pagina's waarnaar wordt verwezen in de FRAME-tags worden afzonderlijk aangemaakt. Je kan de broncode van deze pagina's zien door in IE met de rechtermuisknop in de frame te klikken en te kiezen voor bron weergeven.

Een frameset-waarbij de pagina wordt verdeeld in twee kolommen, de eerste kolom neemt 20% van de breedte in beslag, de tweede kolom 80%:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
   "http://www.w3.org/TR/html4/frameset.dtd">
<HTML>
<HEAD>
<TITLE>Een eenvoudig frameset document</TITLE>
</HEAD>
<FRAMESET cols="20%, 80%">
      <FRAME src="vb1_inhoud_frame1.html">
      <FRAME src="vb1_inhoud_frame2.html">
</FRAMESET>
</HTML>

Een frameset-waarbij de pagina wordt verdeeld in drie rijen. De eerste rij is 200 pixels hoog, de tweede rij 100 pixels, de derde rij neemt de rest van de beschikbare hoogte, dit wordt aangegeven met *:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
   "http://www.w3.org/TR/html4/frameset.dtd">
<HTML>
<HEAD>
<TITLE>Een eenvoudig frameset document</TITLE>
</HEAD>
<FRAMESET rows="200, 100, *">
     <FRAME src="vb1_inhoud_frame1.html">
     <FRAME src="vb1_inhoud_frame2.html">
     <FRAME src="vb1_inhoud_frame3.html">
</FRAMESET>
</HTML>

Een frameset-waarbij de pagina wordt verdeeld in drie rijen. De tweede rij is 250 pixels hoog, de eerste rij neemt van de resterende hoogte 25% in beslag, de derde rij 75% (1* en 3*):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
   "http://www.w3.org/TR/html4/frameset.dtd">
<HTML>
<HEAD>
<TITLE>Een eenvoudig frameset document</TITLE>
</HEAD>
<FRAMESET rows="1*, 250, 3*">
   <FRAME src="vb1_inhoud_frame1.html">
   <FRAME src="vb1_inhoud_frame2.html">
   <FRAME src="vb1_inhoud_frame3.html">
</FRAMESET>
</HTML>

Een frameset met een verdeling in twee rijen en drie kolommen. Dit resulteert in 6 deelvensters die onafhankelijk gevuld kunnen worden:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
   "http://www.w3.org/TR/html4/frameset.dtd">
<HTML>
<HEAD>
<TITLE>Een eenvoudig frameset document</TITLE>
</HEAD>
<FRAMESET rows="300,*" cols="30%,1*,2*">
   <FRAME src="vb1_inhoud_frame1.html">
   <FRAME src="vb1_inhoud_frame2.html">
   <FRAME src="vb1_inhoud_frame3.html">
   <FRAME src="vb1_inhoud_frame4.html">
   <FRAME src="vb1_inhoud_frame5.html">
   <FRAME src="vb1_inhoud_frame6.html">
</FRAMESET>
</HTML>

De FRAMESET-tag

De FRAMESET-tag duidt aan dat je de pagina in deelvensters wenst te verdelen.

Met de attributen cols en rows geef je in de FRAMESET-tag aan welke verdeling je wenst : kolommen of in rijen.

De attributen cols en rows hebben als attribuutwaarde een lijst van getallen die de breedte van de kolommen of de hoogte van de rijen aangeven. Deze getallen zijn afmetingen in pixels of percentages (%).

Bekijk de voorbeelden voor meer informatie.

De FRAME-tag

Voor elke verdeling die met de FRAMESET-tag maakt, verschijnt in de browser een venster. Deze vensters moeten met inhoud gevuld worden. Dit doe je met de FRAME-tag en het attribuut src.

De FRAME-tag kent volgende attributen:

longdesc: link naar een bestand met een uitgebreide beschrijving.
name: je kan een fame een naam geven, zodat je later vanuit een andere frame de inhoud van deze frame kan veranderen.
src: bestandsnaam voor de inhoud van deze frame
frameborder: waarde 0 of 1 - heeft deze frame een rand?
standaard: 1 - de frame heeft een rand
marginwidth: breedte van de marge in pixels
marginheight: hoogte van de marge in pixels
noresize: waarde noresize om gebruikers niet toe te staan zelf de afmetingen van de frame te veranderen.
srolling: yes, no of auto - kan de gebruiker scrollen binnen deze frame?
standaard: auto - scrolbar zichtbaar indien nodig.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
   "http://www.w3.org/TR/html4/frameset.dtd">
<HTML>
<HEAD>
<TITLE>Een eenvoudig frameset document</TITLE>
</HEAD>
<FRAMESET rows="300,*" cols="30%,1*,2*">
   <FRAME src="vb1_inhoud_frame1.html" frameborder="0">
   <FRAME src="vb1_inhoud_frame2.html" frameborder="0">
   <FRAME src="vb1_inhoud_frame3.html" scrolling="yes">
   <FRAME src="vb1_inhoud_frame4.html" marginwidth="60">
   <FRAME src="vb1_inhoud_frame5.html" marginheight="50">
   <FRAME src="vb1_inhoud_frame6.html" noresize>
</FRAMESET>
</HTML>

Nesten van FRAMESET-elementen

Voor complexere vensterstructuren is het mogelijk FRAMESETS te nesten.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
   "http://www.w3.org/TR/html4/frameset.dtd">
<HTML>
<HEAD>
<TITLE>Geneste framesets</TITLE>
</HEAD>
<FRAMESET rows="20%,80%" >
   <FRAME src="vb1_inhoud_frame1.html">
   <FRAMESET cols="*,200">
      <FRAME src="vb1_inhoud_frame2.html">
      <FRAME src="vb1_inhoud_frame3.html">
   </FRAMESET>
</FRAMESET>
</HTML>

Wisselwerking tussen frames: target

Target in de A-tag

Wanneer in één van de deelframes gebruik maakt van hyperlinks, dan zal de gekoppelde pagina standaard geopend worden in de frame waar de hyperlink zich bevindt.

Dit is niet altijd de bedoeling!

Open ter illustratie onderstaand voorbeeld:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
   "http://www.w3.org/TR/html4/frameset.dtd">
<HTML>
<HEAD>
<TITLE>Wisselwerking tussen frames: target</TITLE>
</HEAD>
<FRAMESET rows="80,*" >
   <FRAME src="titel.html">
   <FRAMESET cols="150,*">
      <FRAME src="navigatie.html">
      <FRAME name="inhoud" src="intro.html">
   </FRAMESET>
</FRAMESET>
</HTML>

Code van het document navigatie.html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
 <TITLE>Framesets : IVO - cursussen : navigatie</TITLE>
 <STYLE type="text/css">
  BODY { 
  	background:#FFFFCC;
	margin-top:40px;
  }
 </STYLE>
</HEAD>
<BODY>
<a href="informatica.html" target="inhoud">Informatica</a><br>
<a href="talen.html" target="inhoud">Talen</a><br>
<a href="koken.html" target="inhoud">Koken</a><br>
<br>
<a href="intro.html" target="inhoud">Intro</a><br>
</BODY>
</HTML>

Toon (deel van een framesdocument, werkt niet naar behoren indien zelfstandig geopend)

Wanneer je een hyperlink aanklikt in het navigatiegedeelte merk je dat de pagina opent in het rechtergedeelte van het scherm.

Dit kan je bereiken door de doelframe een naam te geven met het attribuut name:

<FRAME name="inhoud" src="intro.html">

Deze naam gebruik je als waarde van het target-attribuut in de hyperlink:

<a href="informatica.html" target="inhoud">Informatica</a>

Deze hyperlink bevindt zich in het bestand navigatie.html.

Voorgedefiniëerde target-waarden

Andere target-waarden voor hyperlinks zijn:

_blank: openen in een nieuw browservenster
_parent: openen in de overkoepelende frameset
_top: openen in het volledige huidige venster
_self: openen in de huidige frame

Target in de BASE-tag

Je kan in de hoofding van een pagina de BASE-tag gebruiken met het attribuut target om aan te geven dat hyperlinks in dit document standaard in een andere frame moeten geopend worden.

<BASE target="inhoud">

Je kan van deze standaardwaarde nog afwijken door in een hyperlink het attribuut target te gebruiken met een andere waarde.

Het NOFRAMES-element

Om User Agents die het gebruik van frames niet ondersteunen toch de inhoud van uw pagina's te laten zien kan je gebruik maken van het NOFRAMES-element.

Dit element neem je op voor de laatste </FRAMESET>-tag.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
   "http://www.w3.org/TR/html4/frameset.dtd">
<HTML>
<HEAD>
<TITLE>Het NOFRAMES-element</TITLE>
</HEAD>
<FRAMESET rows="80,*" >
   <FRAME src="titel.html">
   <FRAMESET cols="150,*">
      <FRAME src="navigatie.html">
      <FRAME name="inhoud" src="intro.html">
   </FRAMESET>
   <NOFRAMES>
      <H1>Cursussen aan het IVO-Brugge</H1>
	  Uw browser ondersteunt geen frames - alternatieve navigatie:
	  <UL>
            <LI><a href="informatica.html">informatica</a>
            <LI><a href="talen.html">talen</a>
            <LI><a href="koken.html">koken</a>
	  </UL>
   </NOFRAMES>
</FRAMESET>
</HTML>

Het IFRAME-element

Met het IFRAME-element kan je een gebied op een webpagina gebruiken voor variabele inhoud. Je kan documenten openen in de IFRAME-met hyperlinks.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
   "http://www.w3.org/TR/html4/frameset.dtd">
<HTML>
<HEAD>
<TITLE>IFRAME: inline frames</TITLE>
 <STYLE type="text/css">
  BODY { background:#FFFF99 }
  td {
  	background:#9933FF;
	width:150px;
	height:40px;
	text-align:center;
	}
  a:link {
  	color:#FFFF00;
  }
  a:visited {
  	color:#FFFFFF;
  }
  a:active {
  	color:#FF3300;
  }
  a:hover {
  	color:#9933FF;
	text-decoration:none;
	background:#FFFFCC;
  }
 </STYLE>
</HEAD>
<BODY>
<h1>Beestenboel</h1>
<table>
<tr>
       <td><a href="koeien.html" target="beesten">Koeien</a></td>
       <td><a href="schapen.html" target="beesten">Schapen</a></td>
       <td><a href="geiten.html" target="beesten">Geiten</a></td>
</tr>
</table>
<IFRAME name="beesten" src="koeien.html" width="465" height="300"
             scrolling="auto" frameborder="1">
  Uw browser ondersteunt geen frames - geen alternatieve navigatie voorzien.
  </IFRAME>
</BODY>
</HTML>

attributen voor IFRAMES:

longdesc: verwijzing naar een bestand met een uitgebreide beshrijving.
name: naam van de IFRAME - voor verwijzingen met het attribuut target.
width: breedte van het IFRAME.
height: hoogte van het IFRAME.
scrolling: kan de gebruiker scrollen? (yes, no, auto)
frameborder: rand omheen de IFRAME
marginwidth: breedte van de marge
marginheight: hoogte van de marge
align: uitlijning van de IFRAME

HTML 4.01 : werken met frames

Voorbeelden