Mini cursus HTML voor beginners
Als u zelf een website wilt maken, of gewoon nieuwsgierig bent hoe het allemaal in elkaar steekt heb ik hier een mini-cursus.
HTML staat voor HyperText Markup Language en is de basistaal voor het bouwen van websites. In deze cursus leer je de basisprincipes van HTML en hoe je een eenvoudige webpagina kunt maken. Laten we beginnen!
Les 1: Basisstructuur van een HTML-pagina
Een HTML-pagina heeft een specifieke structuur. Hier is een voorbeeld van een eenvoudige HTML-pagina:
<!DOCTYPE html>
<html>
<head>
<title>Mijn eerste webpagina</title>
</head>
<body>
<h1>Dit is een kop</h1>
<p>Dit is een alinea.</p>
</body>
</html>
In deze code hebben we de volgende onderdelen:
- `<!DOCTYPE html>`: Dit definieert het documenttype als HTML5.
- `<html>`: Dit is het startpunt van de HTML-code.
- `<head>`: Dit gedeelte bevat metadata zoals de paginatitel.
- `<title>`: Dit is de titel van de webpagina die wordt weergegeven in de browser.
- `<body>`: Dit is het belangrijkste deel van de webpagina en bevat de zichtbare inhoud.
- `<<h1>`: Dit is een kop, waarbij "1" de grootste formaat is en "6" het kleinste formaat.
- `<p>`: Dit is een alinea.
Les 2: Tekst opmaken
HTML biedt verschillende tags om tekst op te maken. Hier zijn enkele voorbeelden:
- `<b>`: Deze tag maakt tekst vetgedrukt.
- `<i>`: Deze tag maakt tekst cursief.
- `<u>`: Deze tag onderstreept tekst.
- `<<s>`: Deze tag doorstreept tekst.
Je kunt deze tags gebruiken binnen een alinea (`<p>`) of kop (`<h1>` - `<h6>`).
Les 3: Lijsten
HTML biedt ook verschillende manieren om lijsten weer te geven. Hier zijn enkele voorbeelden:
- Ongenummerde lijst: `<ul>` met bijbehorende lijstitems (`<li>`).
- Genummerde lijst: `<ol>` met bijbehorende lijstitems (`<li>`).
Hier is een voorbeeld van een ongenummerde lijst:
<ul><li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
Les 4: Links en afbeeldingen
Een van de krachtige functies van HTML is het kunnen toevoegen van links en afbeeldingen aan een webpagina. Hier zijn enkele voorbeelden:
- Link: `<a>` met de `href` attribuut voor de URL van de bestemming.
- Afbeelding: `<img>` met het `src` attribuut voor de URL van de afbeelding.
Hier is een voorbeeld van een link en een afbeelding:
<a href="https://www.example.com">Bezoek Example.com</a>
<img src="afbeelding.jpg" alt="Beschrijving van de afbeelding">
Les 5: Tabellen
HTML maakt het ook mogelijk om tabellen weer te geven. Hier is een voorbeeld van een eenvoudige tabel:
<table>
<tr>
<th>Naam</th>
<th>Leeftijd</th>
</tr>
<tr>
<td>John</td>
<td>25</td>
</tr>
<tr>
<td>Jane</td>
<td>30</td>
</tr>
</table>
In deze code hebben we een tabel met twee kolommen en drie rijen. De eerste rij bevat de koppen van de kolommen (`<th>`) en de volgende rijen bevatten de gegevens (`<td>`).
Dit was een korte introductie van HTML voor beginners. Er is nog veel meer te leren, maar dit geeft je een goede basis om mee te beginnen. Succes met het bouwen van je eerste webpagina!
