Welkom bij de handleiding voor het maken van lesmateriaal. Op ons platform schrijf je lessen en opdrachten in Markdown. Het systeem zet deze bestanden via lezer.php automatisch om naar overzichtelijke webpagina's.
In dit document vind je een compleet overzicht van alle opmaakmogelijkheden die je kunt gebruiken.
Tip Cursusmateriaal toevoegen kan op verschillende manieren. Markdown is één van de opties, maar als je dat te technisch vindt, staat de online builder voor je klaar. Daarmee bouw je je pagina eenvoudig op door blokken toe te voegen, te verslepen of te wissen. Heb je al een .md-bestand geüpload? Ook dat pas je achteraf heel makkelijk aan in de builder.
Elk .md-bestand moet bovenaan beginnen met een metadata-blok. Dit blok staat tussen twee regels met drie streepjes (---).
Hier is een voorbeeld van de velden die je invult:
"cursus" in voor theorielessen of "opdracht" voor oefeningen."4", "5", of "4,5,6".html, css, javascript, php of markdown.Voorbeeld van de YAML voor deze pagina
---
titel: "Handleiding: Markdown Schrijven voor Leerkrachten"
type: "cursus"
jaar: "4,5,6"
onderwerp: "markdown"
---
Gebruik hekjes (#) aan het begin van een regel om koppen te maken. Ons platform ondersteunt vier niveaus:
# Hoofdtitel van de les (H1)
## Hoofdstuk of Onderwerp (H2)
### Subkop voor verdieping (H3)
#### Detailkop of opmerking (H4)
Tip: Het platform maakt automatisch een inhoudsopgave op basis van de koppen die je in de tekst gebruikt.
Je kunt woorden op de volgende manieren accentueren:
**Vette tekst**: Zet twee sterretjes voor en achter de tekst, zoals
*Cursieve tekst*: Zet één sterretje voor en achter de tekst, zoals
~~Doorgestreepte tekst~~: Zet twee tildes voor en achter de tekst, zoals
Gebruik een minteken (-) met een spatie voor opsommingen:
- HTML5 semantische elementen
- CSS Flexbox en Grid layout
- Responsive design principes
Gebruik een nummer met een punt (1.) voor een chronologische lijst:
index.html.1. Open Visual Studio Code.
2. Maak een nieuw bestand aan en sla het op als `index.html`.
3. Voeg de HTML5-basisstructuur toe.
4. Open het bestand in de browser.
Gebruik een groter-dan-teken (>) aan het begin van de regel om een opvallend vak te maken met een blauwe rand.
Dit is een gewone quote (zonder kleur).
> [groen] **Tip:** Dit verschijnt in een groen succesblok.
> [geel] **Opgelet:** Dit verschijnt in een geel waarschuwingsblok.
> [rood] **Fout:** Dit verschijnt in een rood gevaarblok.
> [blauw] **Info:** Dit verschijnt in een blauw infoblok.
> Dit is een gewone quote (zonder kleur).
Upload afbeeldingen via de afbeeldingen map op het dashboard . Gebruik een uitroepteken, rechte haakjes voor de beschrijving, en ronde haakjes voor het pad:
Gebruik rechte haakjes voor de linktekst en ronde haakjes voor het webadres:
Bezoek de officiële MDN Web Docs[Bezoek de officiële MDN Web Docs](https://developer.mozilla.org)
Voor langere stukken code gebruik je drie backticks. Vermeld direct na de eerste drie backticks de programmeertaal (html, css, javascript of php).
<div class="kaart">
<h2>Titel van de kaart</h2>
<p>Dit is een HTML element.</p>
</div>
.kaart {
background-color: #f4f4f4;
border-radius: 8px;
padding: 20px;
}
const knop = document.getElementById('mijnKnop');
knop.addEventListener('click', () => {
alert('Er is geklikt!');
});
<?php
$titel = "Welkom bij de les";
echo "<h1>" . htmlspecialchars($titel) . "</h1>";
?>
Gebruik verticale strepen (|) en koppeltekens (-) om een tabel te maken:
| Criterium | Voldoende (1pt) | Goed (2pt) |
|---|---|---|
| HTML Structuur | Basistags zijn aanwezig. | Semantische tags zijn correct gebruikt. |
| CSS Styling | De pagina heeft kleur. | Flexbox of Grid is correct toegepast. |
| Criterium | Voldoende (1pt) | Goed (2pt) |
| :--- | :--- | :--- |
| **HTML Structuur** | Basistags zijn aanwezig. | Semantische tags zijn correct gebruikt. |
| **CSS Styling** | De pagina heeft kleur. | Flexbox of Grid is correct toegepast. |
Voeg eenvoudig embeds toe van Youtube, Codepen of Figma door simpelweg iframe code te plaatsen in je markdown bestand. Zorg ervoor dat je een enter voor en na de iframe code plaatst!
Voorbeeld
<iframe height="300" style="width: 100%;" scrolling="no" title="Position fixed vs sticky" src="https://codepen.io/Arne-Wambeke/embed/KwMVJpa?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true">
See the Pen <a href="https://codepen.io/Arne-Wambeke/pen/KwMVJpa">
Position fixed vs sticky</a> by Arne Wambeke (<a href="https://codepen.io/Arne-Wambeke">@Arne-Wambeke</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>
## Opdracht: Maak een Visitekaartje in HTML & CSS
### Doel
Maak een eenvoudige webpagina die dient als online visitekaartje.
### Verwachte Output
- Een opgeslagen bestand `index.html`.
- Een bijbehorend stijlbestand `style.css`.
- Een afbeelding in de map `images/profiel.jpg`.
### Stappenplan
1. Maak een nieuwe projectmap aan.
2. Voeg de HTML-structuur toe met een titel en profielfoto.
3. Koppel het CSS-bestand en voeg styling toe.
4. Controleer de weergave in Google Chrome.
> **Inleveren:** Upload je uitgewerkte mappenstructuur via het leersysteem.