Een website maken met behulp van eenvoudige frames
In je website kun je werken met tabellen en frames. Dit is een persoonlijke keuze en vaak gebaseerd op iemands eigen voorkeur. Door gebruik te maken van frames wordt je scherm verdeeld in meerdere vensters. Zo breng je op een eenvoudige manier structuur aan in je website, wat ook door de bezoeker van jouw website gewaardeerd zal worden. In dit artikel wordt een begin gemaakt met het maken van frames en wordt uitgelegd hoe je een door jou gemaakte pagina in het juiste frame geplaatst krijgt.
De mogelijkheden van frames
Stel dat je vier frames wilt gaan gebruiken dan wordt je scherm (venster van de browser) verdeeld in vier aparte vakken. Ieder frame is een apart zelfstandig vak en kan zijn eigen webpagina bevatten compleet met scrollbar, achtergrond, afbeeldingen, links etc. De inhoud van een frame is volledig vrij en in handen van de bouwer van de website. In het ene frame kun je een afbeelding plaatsen, in het andere een menu en in weer een ander de inhoud van je website. De mogelijkheden zijn eindeloos.TIP: Zorg ervoor dat de verschillende frames qua stijl en kleur bij elkaar passen.
De eerste pagina van je website heet altijd "index.html". De frames maak je in deze indexpagina. De pagina's die in de frames moeten worden geplaatst kun je van te voren al helemaal klaar maken. Deze pagina's ofwel de inhoud van je website ga je in de diverse frames verdelen. In de indexpagina "index.html" komen dus alleen de frames te staan en niet de inhoud van je website.
In een html-document staat standaard de broncode. Deze ziet er als volgt uit:
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
<head>
<title></title>
</head>
<body>
</body>
</html>
Al deze bovenstaande codes noem je tags. De broncode voor de frames komt tussen de </head> en <body> tag. De broncode voor het maken van een frame is:
<frameset></frameset>
Tussen deze beide tags komt het frame te staan:
<html>
<head>
<title>Index</title>
</head>
<frameset>
</frameset>
<body>
</body>
</html>
<head>
<title>Index</title>
</head>
<frameset>
</frameset>
<body>
</body>
</html>
Een eenvoudig begin:
<html>
<head>
<title>Index</title>
</head>
<frameset rows="20%,80%">
<frame src="boven.html">
<frame src="onder.html">
</frameset>
<body>
</body>
</html>
<head>
<title>Index</title>
</head>
<frameset rows="20%,80%">
<frame src="boven.html">
<frame src="onder.html">
</frameset>
<body>
</body>
</html>
Door bovenstaand voorbeeld is je scherm verdeeld in twee horizontale vakken: het bovenste vak neemt 20% van je scherm in beslag en het onderste 80%. Door gebruik te maken van procenten past de browser automatisch de grote aan bij het vergroten of verkleinen van het scherm. Ook in geval de bezoeker van je website een kleiner of groter scherm bezit. Let wel op dat je altijd in totaal op 100% uitkomt.
In het volgende voorbeeld is het scherm verdeeld in drie horizontale vakken:
<html>
<head>
<title>Index</title>
</head>
<frameset rows="30%,50%,20%">
<frame src="boven.html">
<frame src="midden.html">
<frame src="onder.html">
</frameset>
<body>
</body>
</html>
<head>
<title>Index</title>
</head>
<frameset rows="30%,50%,20%">
<frame src="boven.html">
<frame src="midden.html">
<frame src="onder.html">
</frameset>
<body>
</body>
</html>
Het bovenste frame neemt 30% van het scherm in beslag, het middelste 50% en het onderste frame neemt 20% van het scherm in beslag.
Binnen de broncode van de frames zie je ook het attribuut src staan. Src staat voor source en door dit attribuut te gebruiken zeg je welke pagina van je website in welk frame moet komen te staan. Wanneer je je scherm hebt verdeeld in drie vakken ofwel drie frames, heb je dus driemaal het attribuut src nodig om die vakken te vullen. Dit is een verplicht attribuut.
In deze voorbeelden staat boven.html, midden.html en onder.html. Dit is om aan te geven waar de pagina in de frames zitten. In de website gebruik je hier natuurlijk de verwijzing naar je eigen pagina's.
Procenten of pixels?
In de eerste twee voorbeelden bepaalden we de grote van een frame met behulp van procenten. Een tweede mogelijkheid is het gebruik van pixels. Dit kan er als volgt uitzien: <frameset rows="200,500,*">.Het eerste vak is 200 pixels, het tweede 500 de laatste neemt de overgebleven ruimte in beslag. Dit geef je aan met een sterretje *. Dit laatste is niet verplicht. Het voordeel is echter wel dat het scherm zich door de variabele afmeting aan zal passen aan de verschillende groottes beeldscherm van de bezoekers van je website.
De grootte van de frames kun je dus aangeven met pixels en met procenten. Het voordeel van procenten is dat je het minst afhankelijk bent van de browserinstellingen van je bezoekers. Let goed op het plaatsen van de komma's en aanhalingstekens! De afmetingen staan altijd tussen aanhalingstekens en worden onderling gescheiden door komma's.
Rows en cols
In de eerste twee voorbeelden zag je ook de code 'rows'. Met deze code bepaal je de horizontale splitsing van je pagina.In het volgende voorbeeld wordt ook de code 'cols' gebruikt. Hiermee wordt de pagina verticaal gesplitst. Je kunt zoveel frames maken als je wilt, afhankelijk van wat je opgeeft bij rows en cols.
Een voorbeeld van frames met rows, cols en pixels:
<html>
<head>
<title>Index</title>
</head>
<frameset rows="550,*">
<frameset cols="200,*" border="0">
<frame src="links.html" name="links">
<frame src="rechts.html" name"rechts">
</frameset>
<frameset rows="550,*" border="0">
<frame src="onder.html" name="onder">
</frameset>
<body>
</body>
</html>
<head>
<title>Index</title>
</head>
<frameset rows="550,*">
<frameset cols="200,*" border="0">
<frame src="links.html" name="links">
<frame src="rechts.html" name"rechts">
</frameset>
<frameset rows="550,*" border="0">
<frame src="onder.html" name="onder">
</frameset>
<body>
</body>
</html>
Nu heb je onderaan je website over de gehele breedte van het scherm een apart vak. Het grote vak dat overblijft erboven wordt verdeeld in twee vakken waarvan de linkse een stuk smaller is (links en rechts).
Tip: Gebruik altijd kleine letters bij de naamgeving van de pagina's van je website en bij de hyperlinks die naar die pagina's verwijzen. Je hebt het volgende opgeslagen: Beginpagina.html. Nu verwijs je m.b.v een hyperlink naar <h ref="beginpagina.html"></a>. Doordat de ene keer de B als hoofdletter is geschreven en de andere keer als kleine letter, kan dit voor problemen zorgen tijdens de weergave van je website. Veel browsers kunnen de pagina dan namelijk niet vinden.
De keuzes voor de toepassing van frames zijn eindeloos. Je kunt gebruik maken van slechts twee frames, je kunt er ook acht gaan gebruiken. De beste methode om te leren werken met frames is spelen met de broncodes en de attributen. Vervolgens kijk je steeds wat het resultaat is.
Een aantal attributen:
- src; staat voor source. Betreft het document dat wordt weergegeven in het frame.
- name; de naam die je aan een frame geeft. Als je vanuit het ene frame een pagina in een ander frame wilt laden, moet je de frames een unieke naam geven zodat de browser weet waar hij de pagina moet plaatsen. Dit heeft niets te maken met het adres van het frame.
- marginwidth; bepaald de dikte van de linker- en rechtermarge in pixels m.b.t. de inhoud van een frame.
- marginheight; bepaald de hoogte van de 'top' en 'bottom' marge van het frame in pixels.
- scrolling; hiermee kun je instellen of je scrollen in het frame mogelijk wilt maken of juist niet. De waardes zijn 'yes', 'no' en 'auto'. Bij de waarde 'auto' wordt scrolling automatisch ingesteld indien nodig. Voorbeeld: scrolling="auto"
- noresize; in het frametag zetten zonder waarde maakt dat de grootte van het scherm niet kan worden aangepast door de bezoeker.
- frameborder/border; hiermee kun je een rand tussen de frames instellen. Standaard staat het op 'yes'. Wanneer je 'no' instelt zie je tussen de frames geen randen. Je kunt ook een getal opgeven waarmee je de dikte van een rand bepaald.
- framespacing; stelt de ruimte in tussen de verschillende frames. Mogelijke waarden zijn getallen of pixels.
- noframes; handig voor de bezoeker met een computer die geen frames ondersteunt. in deze tag kun je een alternatieve url opnemen waar bezoekers heengestuurd.
Hieronder nog een voorbeeld om indien noodzakelijk een beter beeld te krijgen hoe de atributen geplaatst worden.
<frame name="boven" src="menu.html" frameborder="3" marginwidth="0" marginheight="10" scrolling="no" noresize>
Tot slot het 'target' attribuut.
Target is een belangrijk attribuut want het zorgt ervoor dat je bijvoorbeeld in het linkerframe een opdracht geeft om een pagina in het rechterframe te openen. Dit is vaak het geval bij de zgn. menu's.Achter het attribuut target komt de naam van het frame te staan.
Voorbeelden:
<a href="beginpagina.html" target="midden">beginpagina</a>
<a href="beginpagina.html" target="boven">beginpagina</a>
<a href="beginpagina.html" target="onder">beginpagina</a>
Eindwoord
In dit artikel is een start gemaakt met het maken van en werken met frames. De mogelijkheden zijn eindeloos. Door veel te oefenen met het maken van verschillende frames leer je de html-taal uiteindelijk begrijpen.© 2009 - 2024 Jack, het auteursrecht van dit artikel ligt bij de infoteur. Zonder toestemming is vermenigvuldiging verboden. Per 2021 gaat InfoNu verder als archief, artikelen worden nog maar beperkt geactualiseerd.
Websites maken voor beginners: HTMLVrijwel alle websites zijn grotendeels in HTML geschreven. Maar wat is HTML precies en hoe kun je er een website mee mak…
Wat is HTML of Hypertext Markup Language? (De basis)Een browser, zoals Google Chrome, Mozilla Firefox of Internet Explorer, heeft gegevens nodig om een website weer te geve…
Blender 3D, spelen met licht en schaduwNadat je je eerste simpele ontwerpen gemaakt hebt, en daar een paar afdrukken van bekeken hebt, blijf je met het gevoel…
Meer tijd om artikelen te schrijven op internet 7 tipsHet schrijven van artikelen kan een hele leuke en ook nog winstgevende hobby zijn. Door tijdgebrek kan het echter moeili…
Gerelateerde artikelen
Websites maken voor beginners: HTMLVrijwel alle websites zijn grotendeels in HTML geschreven. Maar wat is HTML precies en hoe kun je er een website mee mak…
Wat is HTML of Hypertext Markup Language? (De basis)Een browser, zoals Google Chrome, Mozilla Firefox of Internet Explorer, heeft gegevens nodig om een website weer te geve…Hulp bij aankoop van skates: skeelerframesVoor de serieuze beginnende skater is het erg lastig om het goede materiaal te kiezen. Er zijn zeer veel verschillende s…
Werking PHP websiteVoor veel mensen is het nog onduidelijk hoe PHP nu eigenlijk werkt. Ik leg in dit artikel uit wat er gebeurt als u een w…
Blender 3D, spelen met licht en schaduwNadat je je eerste simpele ontwerpen gemaakt hebt, en daar een paar afdrukken van bekeken hebt, blijf je met het gevoel…
Meer tijd om artikelen te schrijven op internet 7 tipsHet schrijven van artikelen kan een hele leuke en ook nog winstgevende hobby zijn. Door tijdgebrek kan het echter moeili…Bronnen en referenties
- www.cyberdots.nl
- www.eridu.eu/edu/html.frames.htm
- Home.concepts-ict.nl/~michael1/lesfr03.html
- Boek: Peter Kassenaar, Basiscursus HTML 4.01
- Boek: Peter Kassenaar, HTML voor gevorderden
Jack (7 artikelen)
Laatste update: 12-10-2009
Rubriek: Pc en Internet
Subrubriek: Tutorials
Bronnen en referenties: 5
Laatste update: 12-10-2009
Rubriek: Pc en Internet
Subrubriek: Tutorials
Bronnen en referenties: 5
Per 2021 gaat InfoNu verder als archief. Het grote aanbod van artikelen blijft beschikbaar maar er worden geen nieuwe artikelen meer gepubliceerd en nog maar beperkt geactualiseerd, daardoor kunnen artikelen op bepaalde punten verouderd zijn. Reacties plaatsen bij artikelen is niet meer mogelijk.