WebThings - by Jan Weijers
Alle hoofdstukken...
Inhoudsopgave
Inleiding
Een eenvoudig HTML document
Afbeeldingen
Lijsten
Links
Tabellen
Frames
Formulieren
Cascading stylesheets
JavaScript
PHP programmeren
Server side includes
CGI & Perl
Speciale tekens
Kleurvoorbeelden
Meer informatie
Software
Recente toevoegingen
Alfabetische index
In dit hoofdstuk...
Frames
Inline Frames

 

 

Language choice...
You have chosen to use Dutch as your preferred language.Nederlands vlaggetje Click here to switch to English.

Frames

Frames

Als je een venster met frames bekijkt, bekijk je in feite meerdere HTML documenten. Het eerste is een document dat de verdeling van een venster in verschillende frames specificeert en het bestand wat in elk frame staat. Dat kan er bijvoorbeeld zo uitzien:

<HTML><HEAD>
<TITLE>This is a frametest</TITLE>
</HEAD>

<FRAMESET COLS=25%,*>

<FRAMESET ROWS=30%,*,30%>

<FRAME SRC="content_a.html" NAME="aaaa" SCROLLING="no">
<FRAME SRC="content_b.html" NAME="bbbb" SCROLLING="yes">
<FRAME SRC="content_c.html" NAME="cccc">

</FRAMESET>

<FRAME SRC="content_d.html" NAME="dddd" SCROLLING="auto">

<NOFRAMES>This document can only be viewed by a browser capable of using Frames.
Sorry. you will have to return to the chapter on <A HREF="../frames.php">Frames</A>.</NOFRAMES>

</FRAMESET>
</HTML>

Om te beginnen valt op dat dit document de gebruikelijke <HTML> en <HEAD> tags heeft maar geen <BODY> tag. Die is vervangen door de <FRAMESET> tag.

Het eerste element om aandacht aan te besteden is NOFRAMES. Browsers die frames kunnen tonen negeren dit element. Browsers die geen frames kunnen tonen, tonen juist de tekst tussen de NOFRAMES tags. Dit kun je gebruiken om een boodschap te tonen voor de lezers die de frames niet kunnen zien. Je kunt bijvoorbeeld een link tonen naar een pagina die geen gebruik maakt van frames.

Het FRAMESET element definieert twee of meer frames, in rijen of in kolommen. Zoals je kunt zien zijn er twee framesets in dit document. De eerste verdeelt de pagina in een smalle linkerkolom en een brede rechterkolom. De tweede verdeelt de linkerkolom in drie frames. Daarom heeft het eerste FRAMESET element een COLS attribuut en het tweede een ROWS attribuut. Je kunt onbeperkt framesets binnen framesets gebruiken.

Het ROWS en het COLS attribuut kunnen elk aantal waarden krijgen, gescheiden door komma's. Als je vier waarden geeft, resulteert dat in vier rijen of kolommen. Als je twee waarden geeft, krijg je twee rijen of kolommen. Waarden kunnen een percentage zijn (bijvoorbeeld 25%), een aantal pixels (als geheel getal) of een ster (*). Een ster betekent dat de waarde door de browser wordt bepaald, afhankelijk van de beschikbare ruimte. Je kunt een * ook nog een vermenigvuldigingsfactor geven. Bijvoorbeeld, COLS="*, *, 2*" resulteert in drie kolommen waarvan de derde twee keer zo breed is als de eerste en de tweede.

Het is ook mogelijk allerlei combinaties van die waarden te gebruiken. COLS="20%,30,2*,*" resulteert in vier kolommen waarvan de eerste een breedte heeft van 20% van het venster en de tweede een breedte van 30 beeldpunten. De overgebleven ruimte wordt verdeeld over de derde en vierde kolom, waarbij de derde kolom twee keer breder is dan de vierde kolom.

Het FRAME element heeft een SRC attribuut om het bronbestand te kiezen en een NAME attribuut om de naam van het frame te bepalen. Die naam gebruik je later om te linken naar een frame.

Het FRAME element heeft ook een SCROLLING attribuut. Dit attribuut geeft aan of het frame scrolbalken krijgt. Als de waarde "no" is, krijgt het frame geen scrolbalken, ook niet als het brondocument niet in het frame past. Als de waarde "ja" is krijgt het frame altijd scrolbalken, ook als het brondocument zo klein is dat scrolbalken eigenlijk niet nodig zijn. De laatste mogelijkheid is "auto". Met deze waarde krijgt het frame scrolbalken als de inhoud zo groot is dat dit nodig is.

Bekijk nu eens het voorbeeld van het gebruik van framesets.

To the top

Bestand: content_a.html

Het eerste bestand voor de frames heeft alleen maar een link terug naar deze pagina. Dit bestand wordt linksboven getoond. Het ziet er zo uit:

<HTML><HEAD>
</HEAD>

<BODY>

<P><A HREF="../frames.php#back" TARGET="_top">Back to the HTML guide</A></P>

<P>This link will bring you back the chapter about frames in the original
window.</P>

</BODY></HTML>

Het HREF attribuut geeft de link terug, zoals we dat in een eerder hoofdstuk hebben gezien. Het TARGET attribuut geeft aan hoe het document wordt getoond na klikken op de link. Als je hier de naam van een frame opgeeft wordt het bestand in dat frame getoond. Met de waarde TARGET="_top" wordt het document in het huidige venster getoond maar zonder frames. Zonder TARGET attribuut wordt het document getoond in het frame waar de link staat.

Andere mogelijke waarden voor het TARGET attribuut zijn "_blank" en "_self" waarbij de laatste de standaardwaarde is. Als de waarde "_blank" is wordt het document in een nieuw venster getoond. Als de waarde "_self" is, toont de browser het document in hetzelfde frame waar de link stond.

To the top

Bestand: content_b.html

Dit is de bron van het bestand in het middelste frame van de linkerkolom. Het is een voorbeeld van het gebruik van de waarde "_blank" voor het TARGET attribuut. Klikken op de link opent het hoofdstuk over frames (wat je nu leest) in een nieuw venster.

<HTML><HEAD>
</HEAD>

<BODY>

<P><A HREF="../frames.php#back" TARGET="_blank">Back to the HTML guide</A></P>

<P>This will give you the chapter about frames in a new window! After you clicked here you can see you have two open windows.</P>

</BODY></HTML>

To the top

Bestand: content_c.html

Dit is het derde bronbestand. Deze gebruikt het TARGET="dddd" attribuut. Je herinnert je dat "dddd" de naam is die we aan het rechterframe gaven. Als je dus op een van de links in dit frame klikt worden die documenten getoond in het grote frame aan de rechterkant wat een NAME="dddd" attribuut heeft.

<HTML><HEAD>
</HEAD>

<BODY>

<P>Some chapters of the HTML guide.</P>

<P>* <A HREF="../intro.php" TARGET="dddd">Introduction</A><BR>
* <A HREF="../body.html" TARGET="dddd">Body text, pre-formatted text and font sizes</A><BR>
* <A HREF="../images.php" TARGET="dddd">Images</A></P>

</BODY></HTML>

To the top

Bestand: content_d.html

Tenslotte, is dit het vierde bronbestand.

<HTML><HEAD>
</HEAD>

<BODY>

<CENTER><H1>Frametest</H1></CENTER>

<H3>If you click any of the chapters of the HTML Guide in the lower left
frame, they will appear in this frame.</H3>

<P>Or you can click to get my <A HREF="../../index.php" TARGET="_self">homepage</A>
displayed in this frame.</P>

</BODY></HTML>

Dit bronbestand is een voorbeeld van het TARGET="_self" attribuut. Als je op de link klikt, wordt mijn homepage getoond in dat zelfde frame.

To the top

Inline Frames

De HTML 4 standaard geeft de mogelijkheid frames midden in de pagina te plaatsen, zogenaamde "inline frames" of "floating frames". Hier is een eenvoudig voorbeeld van een inline frame:

<IFRAME SRC="parts/guide.css" WIDTH="300" HEIGHT="200"></IFRAME>

Voor het SRC attribuut kun je absolute en relatieve links gebruiken. Je kunt linken naar documenten op je eigen site of op andere sites. De WIDTH en HEIGHT attributen geven de grootte van het frame in pixels. Volgens de HTML 4 specificatie is het niet mogelijk voor de gebruiker de grootte van het frame te veranderen dus een NORESIZE attribuut is hier niet nodig en niet mogelijk. Inline frames hebben een FRAMEBORDER attribuut waarmee je instelt of het frame een rand krijgt of niet. FRAMEBORDER kan de waarde "0" hebben wat betekent dat het frame geen rand krijgt of de waarde "1" wat betekent dat er een rand om het inline frame wordt getekend.

<IFRAME SRC="tables.php" WIDTH="300" HEIGHT="100" FRAMEBORDER="1" SCROLLING="yes"><B>Sorry, uw browser ondersteunt geen inline frames.</B></IFRAME>

In dit voorbeeld zie je tekst tussen <IFRAME> en </IFRAME>. Dat is de tekst die wordt getoond door browsers die geen inline frames ondersteunen.

Het scrolling attribuut vertelt de browser wel of geen scrolbalken te tekenen. Als je voor "auto" kiest worden scrolbalken getekend als de inhoud van het frame dat nodig maakt. Een waarde "ja" betekent dat de browser altijd scrolbalken tekent. De waarde "nee" betekent dat er nooit scrolbalken te zien zijn, ook als de inhoud van het venster dat wel nodig maakt.

Je kunt links gebruiken om tekst of afbeeldingen in een inline frame te tonen. Om dit te doen moet je het frame een naam geven met een NAME attribuut:

<IFRAME SRC="" NAME="myinlineframe" WIDTH="300" HEIGHT="100" FRAMEBORDER="1" SCROLLING="yes" ALIGN="right"><P CLASS="example"><B>Sorry, uw browser ondersteunt geen inline frames.</B></P></IFRAME>

<P><A HREF="styles.common.css" TARGET="myinlineframe">Toon stylesheet</A><BR>

<A HREF="css.gif" TARGET="myinlineframe">Toon CSS logo</A></P>

Toon stylesheet

Toon CSS logo


Als je nu op de links klikt zie het stylesheet of het logo verschijnen in het inline frame. Let op dat het TARGET attribuut bij de link verwijst naat het NAME attribuut bij het frame. Overigens heb je in de bovenstaande voorbeelden kunnen zien dat je inline frames alleen links of rechts kunt uitlijnen, je kunt ze dus niet centreren.

To the top

 

Reacties welkom...

Ik hoor graag je mening over deze gids, informatie die je graag toegevoegd zou willen zien of eventuele fouten die je hebt ontdekt. Klik hier.

 

Open standaarden...

Deze site is volledig conform de open standaarden van het World Wide Web Consortium (W3C). Je kunt op de logo's klikken om dat te verifiëren.

HTML 4 logo

CSS logo

 

 

©1995-2017 Jan Weijers, the Netherlands. All rights reserved.
No reproduction by any means or in any language without prior permission of the author.