Page Template - HTML Onderdelen

Updated on Jun 18, 2025

Je kunt HTML-code gebruiken om bepaalde handige functionaliteiten in Brightspace te zetten.

Er zijn al standaard templates voor pagina's, zoals een blanco pagina met banner, een contactpagina, een pagina met tabellen etc. Zie Hoe gebruik ik Page templates in mijn content? voor meer informatie en Beschikbare Templates voor voorbeelden.

Ook zijn er andere templates voor inhoudsonderdelen. Hierdoor worden lange teksten of pagina’s met veel informatie leesbaarder en overzichtelijker. Dit zijn:

Accordeons;
Flipcards;
Tabs.

Als je niet een template wilt gebruiken, maar wel het onderdeel, dan worden hieronder de HTML-opties behandeld, inclusief de kopieerbare html-code die je hiervoor moet gebruiken. Wil je de templates gebruiken, klik dan hier.

Let op! De HTML-code kun je met het "Click to Copy" teken onderaan de code kopiëren. Plak de code eerst in Word met 'Alleen tekst behouden' en kopieer dit dan in de Source Code (stap 3 hieronder). Doe je dit niet, dan werkt de functionaliteit niet.

Werkwijze

In Brightspace ga je naar de course en dan de Unit of Lesson waarin je de functionaliteit wilt plaatsen. Klik dan op Create New > Page.

In het nieuwe scherm klik je op het </> logo (source code);
Hier verwijder je alles wat er al staat;
Voor elke functionaliteit kopieer en plak je de desbetreffende code;
Klik hierna op Save;
Nu kun je de inhoud van de functionaliteit aanpassen, bijvoorbeeld titel en inhoud van een Flipcard;
Wanneer je klaar bent, klik op Save and Close.

Edit Activity - Alma Kamphuis Sandbox - Google Chrome

Je kunt ook zelf experimenteren en code combineren. Let dan wel op: elk stukje code heeft begin- en eindcode dat in elke te kopiëren tekst staat. Dit gebruik je per pagina echter maar één keer:

Begincode

Eindcode

Accordeons

Wat zijn accordeons?

Met een accordeon kun je een uitklapbaar blok maken in je course content. Je kunt dus bijvoorbeeld hoofdstukken maken, waarbij je alleen de hoofdstuktitels toont. Wanneer iemand op zo'n titel klikt, dan wordt het daadwerkelijke hoofdstuk getoond.

Bij lange teksten kan zo'n accordeon er voor zorgen dat alles wat gemakkelijker leesbaar en overzichtelijker wordt.

Voorbeelden

Accordion

Accordion Groep van 2

Accordeon

Te kopiëren tekst:

<!DOCTYPE html>

<title>Dynamic Component: Accordions</title>

</head><body><div class="container-fluid">

<p>Optionele Starttekst </p>

<h2 class="card-title">Accordion Title</h2> </div> <div class="collapse">

<p>Insert Accordion content here.</p>

</div>

</div> </div>

<p>

</script>

</p>

<p>

</p>

</div>

<p>Optionele Eindtekst</p></body></html>

Click to copy

Accordeon: Groep van 2

Te kopiëren tekst:

<!DOCTYPE html>

<title>Dynamic Component: Accordions</title>

</head><body><div class="container-fluid">

<p>Optionele Starttekst</p>

<p class="instruction">Select each item to learn more.</p>

<p class="btn btn-secondary expandall">Open All Panels</p>

<!-- Comment out this button to add the custom open/close text

<button type="button" data-panel-open="Open All Panels" data-panel-close="Close All Panels" class="btn ac-btn btn-secondary expandall" aria-expanded="false">Open All Panels</button> -->

<h2 class="card-title">Accordion 1 of 2</h2>

</div>

<p>Insert Accordion 1 of 2 content here.</p>

</div>

<h2 class="card-title">Accordion 2 of 2</h2>

</div>

<p>Insert Accordion 2 of 2 content here.</p>

</div>

<p>

</script>

</p>

<p>

</p>

</div>

<p>Optionele Eindtekst</p></body></html>

Click to copy

Accordeon: Groep van 3

Te kopiëren tekst:

<!DOCTYPE html>

<title>Dynamic Component: Accordions</title>

</head><body><div class="container-fluid">

<p>Optionele Starttekst </p>

<p class="instruction">Select each item to learn more.</p>

<p class="btn btn-secondary expandall">Open All Panels</p>

<!-- Comment out this button to add the custom open/close text

<button type="button" data-panel-open="Open All Panels" data-panel-close="Close All Panels" class="btn ac-btn btn-secondary expandall" aria-expanded="false">Open All Panels</button> -->

<h2 class="card-title">Accordion 1 of 3</h2>

</div>

<p>Insert Accordion 1 of 3 content here.</p>

</div>

<h2 class="card-title">Accordion 2 of 3</h2>

</div>

<p>Insert Accordion 2 of 3 content here.</p>

</div>

<h2 class="card-title">Accordion 3 of 3</h2>

</div>

<p>Insert Accordion 3 of 3 content here.</p>

</div>

<p>

</script>

</p>

<p>

</p>

</div>

<p>Optionele Eindtekst</p></body></html>

Click to copy

Accordeon: Groep van 4

Te kopiëren tekst:

<!DOCTYPE html>

<title>Dynamic Component: Accordions</title>

</head><body><div class="container-fluid">

<p>Optionele Starttekst </p>

<p class="instruction">Select each item to learn more.</p>

<p class="btn btn-secondary expandall">Open All Panels</p>

<!-- Comment out this button to add the custom open/close text

<button type="button" data-panel-open="Open All Panels" data-panel-close="Close All Panels" class="btn ac-btn btn-secondary expandall" aria-expanded="false">Open All Panels</button> -->

<h2 class="card-title">Accordion 1 of 4</h2>

</div>

<p>Insert Accordion 1 of 4 content here.</p>

</div>

<h2 class="card-title">Accordion 2 of 4</h2>

</div>

<p>Insert Accordion 2 of 4 content here.</p>

</div>

<h2 class="card-title">Accordion 3 of 4</h2>

</div>

<p>Insert Accordion 3 of 4 content here.</p>

</div>

<h2 class="card-title">Accordion 4 of 4</h2>

</div>

<p>Insert Accordion 4 of 4 content here.</p>

</div>

<p>

</script>

</p>

<p>

</p>

</div>

<p>Optionele Eindtekst</p></body></html>

Click to copy

Flip Cards

Wat zijn Flip Cards?

Simpel gezegd is een flip card een effectief leermiddel met informatie op één of beide zijden. Meestal bevat de ene kant een vraag, term of concept, terwijl de andere kant het antwoord of de uitleg bevat. Door op de card te klikken, draait deze om en zie je het juiste antwoord of meer informatie.

Voorbeelden

Flip Cards Groep van 2

Flip Cards: Group of 2 - Alma Kamphuis Sandbox - Google Chrome

Flip Cards Gecentreerde Kop Groep van 3

Flip Cards w/ Centered Header: Group of 3 - Alma Kamphuis Sandbox - Google Chrome

Flip Cards: Groep van 2

Te kopiëren tekst:

<!DOCTYPE html>

<title>Dynamic Component: Accordions</title>

</head><body><div class="container-fluid">

<p>Optionele Starttekst </p>

<p class="instruction">Select each item to learn more.</p>

<h4>Flip Card Front</h4>

<p>Add content here.</p>

</div>

<p>Add content here.</p>

</div>

<h4>Flip Card Front</h4>

<p>Add content here.</p>

</div>

<p>Add content here.</p>

</div>

<p>

</script>

</p>

<p>

</p>

</div>

<p>Optionele Eindtekst</p></body></html>

Click to copy

Flip Cards Gecentreerde Kop: Groep van 2

Te kopiëren tekst:

<!DOCTYPE html>

<title>Dynamic Component: Accordions</title>

</head><body><div class="container-fluid">

<p>Optionele Starttekst </p>

<p class="instruction">Select each item to learn more.</p>

<h4>Flip Card Front</h4>

</div>

<p>Add content here.</p>

</div>

<h4>Flip Card Front</h4>

</div>

<p>Add content here.</p>

</div>

<p>

</script>

</p>

<p>

</p>

</div>

<p>Optionele Eindtekst</p></body></html>

Click to copy

Flip Cards: Groep van 3

Te kopiëren tekst:

<!DOCTYPE html>

<title>Dynamic Component: Accordions</title>

</head><body><div class="container-fluid">

<p>Optionele Starttekst </p>

<p class="instruction">Select each item to learn more.</p>

<h4>Flip Card Front</h4>

<p>Add content here.</p>

</div>

<p>Add content here.</p>

</div>

<h4>Flip Card Front</h4>

<p>Add content here.</p>

</div>

<p>Add content here.</p>

</div>

<h4>Flip Card Front</h4>

<p>Add content here.</p>

</div>

<p>Add content here.</p>

</div>

<p>

</script>

</p>

<p>

</p>

</div>

<p>Optionele Eindtekst</p></body></html>

Click to copy

Flip Cards Gecentreerde Kop: Groep van 3

Te kopiëren tekst:

<!DOCTYPE html>

<title>Dynamic Component: Accordions</title>

</head><body><div class="container-fluid">

<p>Optionele Starttekst </p>

<p class="instruction">Select each item to learn more.</p>

<h4>Flip Card Front</h4>

</div>

<p>Add content here.</p>

</div>

<h4>Flip Card Front</h4>

</div>

<p>Add content here.</p>

</div>

<h4>Flip Card Front</h4>

</div>

<p>Add content here.</p>

</div>

<p>

</script>

</p>

<p>

</p>

</div>

<p>Optionele Eindtekst</p></body></html>

Click to copy

Flip Cards met afbeelding: Groep van 2

Te kopiëren tekst:

<!DOCTYPE html>

<title>Dynamic Component: Accordions</title>

</head><body><div class="container-fluid">

<p>Optionele Starttekst </p>

<p class="instruction">Select each item to learn more.</p>

<h4>Flip Card Front</h4>

<p>Add content here.</p>

</div>

<p>Add content here.</p>

</div>

<h4>Flip Card Front</h4>

<p>Add content here.</p>

</div>

<p>Add content here.</p>

</div>

<p>

</script>

</p>

<p>

</p>

</div>

<p>Optionele Eindtekst</p></body></html>

Click to copy

Flip Cards met afbeelding: Groep van 3

Te kopiëren tekst:

<!DOCTYPE html>

<title>Dynamic Component: Accordions</title>

</head><body><div class="container-fluid">

<p>Optionele Starttekst </p>

<p class="instruction">Select each item to learn more.</p>

<h4>Flip Card Front</h4>

<p>Add content here.</p>

</div>

<p>Add content here.</p>

</div>

<h4>Flip Card Front</h4>

<p>Add content here.</p>

</div>

<p>Add content here.</p>

</div>

<h4>Flip Card Front</h4>

<p>Add content here.</p>

</div>

<p>Add content here.</p>

</div>

<p>

</script>

</p>

<p>

</p>

</div>

<p>Optionele Eindtekst</p></body></html>

Click to copy

Click and Reveal: Standard

Click and Reveal is een andere vorm van een Flip Card.

Voorbeeld

Click and Reveal: Standard - Alma Kamphuis Sandbox - Google Chrome

Te kopiëren tekst:

<!DOCTYPE html>

<title>Dynamic Component: Accordions</title>

</head><body><div class="container-fluid">

<p>Optionele Starttekst </p>

<p>Johnny's mother has three children. The first child is named April. The second child is named May. What is the third child's name?</p>

<p class="btn btn-primary btn-reveal">Show Answer</p>

<p>Johnny, of course!</p>

</div>

<p>

</script>

</p>

<p>

</p>

</div>

<p>Optionele Eindtekst</p></body></html>

Click to copy

Tabs

Wat zijn tabs?

Tabs zijn paneeltjes of vensters die je gebruikt om verschillende secties van een pagina te organiseren en te laten zien. Ze zorgen ervoor dat je verschillende soorten informatie op een overzichtelijke manier kunt presenteren.

Voorbeelden

Tabs: Groep van 2

Tabs: Group of 2 - Alma Kamphuis Sandbox - Google Chrome

Tabs: Groep van 4

Tabs: Group of 4 - Alma Kamphuis Sandbox - Google Chrome

Tabs: Groep van 2

Te kopiëren tekst:

<!DOCTYPE html>

<title>Dynamic Component: Accordions</title>

</head><body><div class="container-fluid">

<p>Optionele Starttekst </p>

<p class="instruction">Select each tab to learn more.</p>

<div class="list-group flex-md-row text-center"><a class="list-group-item list-group-item-action active">Horizontal Tab 1 of 2 </a> <a class="list-group-item list-group-item-action">Horizontal Tab 2 of 2</a></div>

</div>

<p>Horizontal Tab 1 of 2 content</p>

</div>

<p>Horizontal Tab 2 of 2 content</p>

</div>

<p>

</script>

</p>

<p>

</p>

</div>

<p>Optionele Eindtekst</p></body></html>

Click to copy

Tabs: Group of 3

Te kopiëren tekst:

<!DOCTYPE html>

<title>Dynamic Component: Accordions</title>

</head><body><div class="container-fluid">

<p>Optionele Starttekst </p>

<p class="instruction">Select each tab to learn more.</p>

<div class="list-group flex-md-row text-center"><a class="list-group-item list-group-item-action active">Horizontal Tab 1 of 3</a> <a class="list-group-item list-group-item-action">Horizontal Tab 2 of 3</a> <a class="list-group-item list-group-item-action">Horizontal Tab 3 of 3</a></div>

</div>

<p>Horizontal Tab 1 of 3 content</p>

</div>

<p>Horizontal Tab 2 of 3 content</p>

</div>

<p>Horizontal Tab 3 of 3 content</p>

</div>

<p>

</script>

</p>

<p>

</p>

</div>

<p>Optionele Eindtekst</p></body></html>

Click to copy

Tabs: Group of 4

Te kopiëren tekst:

<!DOCTYPE html>

<title>Dynamic Component: Accordions</title>

</head><body><div class="container-fluid">

<p>Optionele Starttekst </p>

<p class="instruction">Select each tab to learn more.</p>

<div class="list-group flex-md-row text-center"><a class="list-group-item list-group-item-action active">Horizontal Tab 1</a> <a class="list-group-item list-group-item-action">Horizontal Tab 2</a> <a class="list-group-item list-group-item-action">Horizontal Tab 3</a> <a class="list-group-item list-group-item-action">Horizontal Tab 4</a></div>

</div>

<p>Horizontal Tab 1 of 4 content</p>

</div>

<p>Horizontal Tab 2 of 4 content</p>

</div>

<p>Horizontal Tab 3 of 4 content</p>

</div>

<p>Horizontal Tab 4 of 4 content</p>

</div>

<p>

</script>

</p>

<p>

</p>

</div>

<p>Optionele Eindtekst</p></body></html>

Click to copy

Code voor:

Begin

<!DOCTYPE html>

<title>Dynamic Component: Accordions</title>

</head><body><div class="container-fluid">

<p>Optionele Starttekst </p>

Click to copy

Eindcode

<p>

</script>

</p>

<p>

</p>

</div>

<p>Optionele Eindtekst</p></body></html>

Click to copy

Previous Article Beschikbare Templates

Next Article Content verwijderen

Brightspace-support

Page Template - HTML Onderdelen

Wat zijn accordeons?

Wat zijn Flip Cards?

Wat zijn tabs?

Code voor:

Begin

Eindcode

What's New?

Cursusinhoud en activiteiten