Leer HTML en CSS: Bouw je eigen Website
Wat is HTML en CSS en wat kun je ermee?
HTML en CSS zijn de twee belangrijkste bouwstenen van een website. HTML staat voor HyperText Markup Language en wordt gebruikt om de structuur van de inhoud van een website te definiëren. CSS staat voor Cascading Style Sheets en wordt gebruikt om de presentatie en het uiterlijk van een website te definiëren.
HTML wordt gebruikt om webpagina’s te maken en om de inhoud van die pagina’s te structureren. Het wordt gebruikt om tekst, afbeeldingen, video’s, formulieren en andere elementen op een webpagina te plaatsen en te organiseren. CSS wordt gebruikt om de visuele stijl van die elementen te bepalen, zoals kleuren, lettertypen, achtergronden, marges en uitlijning.
Met HTML en CSS kun je vrijwel alles maken wat je maar wilt op het gebied van webdesign. Van eenvoudige blogposts tot complexe e-commerce websites en webapplicaties: HTML en CSS bieden de nodige flexibiliteit en functionaliteit om het allemaal mogelijk te maken.
De standaard opbouw van een website met voorbeeldcode
De standaard opbouw van een website bestaat uit verschillende onderdelen, namelijk de doctype-declaratie, het html-element, het head-element en het body-element. Hieronder vind je een voorbeeld van hoe de HTML-code voor een standaard website eruit kan zien:
<!DOCTYPE html>
<html>
<head>
<title>Mijn website</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>Welkom op mijn website</h1>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Over ons</a></li>
<li><a href="#">Diensten</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
<main>
<section>
<h2>Onze diensten</h2>
<ul>
<li>Webdesign</li>
<li>Webontwikkeling</li>
<li>Zoekmachine-optimalisatie</li>
</ul>
</section>
<section>
<h2>Onze projecten</h2>
<ul>
<li><a href="#">Project 1</a></li>
<li><a href="#">Project 2</a></li>
<li><a href="#">Project 3</a></li>
</ul>
</section>
</main>
<footer>
<p>© Mijn bedrijf 2023</p>
</footer>
</body>
</html>In deze voorbeeldcode wordt de standaard opbouw van een website weergegeven. Het doctype-declaratie geeft aan welke versie van HTML wordt gebruikt.
Het html-element omvat de hele webpagina en bevat alle andere elementen. Het head-element bevat informatie over de pagina, zoals de titel, metadata en links naar externe bronnen, zoals stijlbladen en JavaScript-bestanden. Een body-element bevat alle zichtbare inhoud van de webpagina, zoals koppen, tekst, afbeeldingen, formulieren en links.
Wat is er op een website te zien?
Een website kan verschillende soorten inhoud bevatten, afhankelijk van het doel en de functie van de site. Hieronder volgen enkele veelvoorkomende elementen die je op een website kunt vinden:
- Koppen (
h1tot en meth6): worden gebruikt om de hiërarchie van de inhoud aan te geven. Deh1is de belangrijkste kop op de pagina, gevolgd door deh2,h3, enzovoort. - Tekst (
p): wordt gebruikt om alinea’s met tekst weer te geven. Je kunt ook andere tekstgerelateerde elementen gebruiken, zoalsem(voor nadruk) enstrong(voor extra nadruk). - Afbeeldingen (
img): worden gebruikt om afbeeldingen weer te geven. Je kunt ook andere media-elementen gebruiken, zoalsaudioenvideo. - Lijsten (
ul,ol,li): worden gebruikt om lijsten met items weer te geven, zoals navigatiemenu’s en lijsten met producten. - Formulieren (
form,input,button): worden gebruikt om informatie van gebruikers te verzamelen, zoals naam, e-mailadres en bericht. - Links (
a): worden gebruikt om te verwijzen naar andere pagina’s of bronnen op het web.
Dit zijn slechts enkele voorbeelden van de elementen die je op een website kunt vinden. Er zijn nog veel meer elementen en mogelijkheden die je kunt gebruiken om een website te bouwen.
Dit is hoe CSS werkt
Met CSS kun je de visuele stijl van de elementen op een webpagina bepalen. Hieronder vind je enkele voorbeeldregels voor CSS:
body {
font-family: Arial, sans-serif;
background-color: #f2f2f2;
}
header {
background-color: #333;
color: #fff;
padding: 10px;
}
h1 {
font-size: 36px;
margin: 0;
}
nav {
display: flex;
justify-content: space-between;
align-items: center;
}
nav a {
color: #fff;
text-decoration: none;
padding: 10px;
}
nav a:hover {
background-color: #555;
}
section {
padding: 20px;
border: 1px solid #ccc;
margin-bottom: 20px;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
ul li {
margin-bottom: 10px;
}
a {
color: #007bff;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}In deze CSS-code worden enkele stijlregels gedefinieerd voor de elementen in de HTML-code van de voorbeeldwebsite. Zo wordt de achtergrondkleur van de pagina ingesteld op lichtgrijs (#f2f2f2), het lettertype van de body ingesteld op Arial of een ander sans-serif lettertype en de achtergrondkleur van de header ingesteld op donkergrijs (#333) met witte letters.
De nav bevat links naar de verschillende pagina’s van de site. De stijl van de navigatiebalk is aangepast door het gebruik van display: flex zodat de elementen naast elkaar worden weergegeven en door het gebruik van justify-content en align-items worden ze in het midden uitgelijnd. Links hebben een witte kleur (color: #fff) en geen onderstreepte stijl (text-decoration: none) en krijgen een donkergrijze achtergrondkleur (background-color: #555) wanneer de gebruiker er met de muis overheen gaat (:hover).
De section elementen bevatten de inhoud van de pagina en hebben een witte achtergrond met een grijze rand (border: 1px solid #ccc). De ul en li elementen worden gebruikt voor de lijsten met items en zijn op een nette manier weergegeven door gebruik te maken van list-style: none en het toevoegen van marges.
Ten slotte worden de links (a elementen) ingesteld op een blauwe kleur (color: #007bff) en krijgen ze onderstreepte stijl (text-decoration: underline) wanneer de gebruiker er met de muis overheen gaat.
Dit zijn slechts enkele voorbeelden van de mogelijkheden die CSS biedt om de visuele stijl van een webpagina aan te passen. Er zijn nog tal van andere eigenschappen en waarden die je kunt gebruiken om je website er precies zo uit te laten zien als jij dat wilt.
HTML en CSS Samengevat
HTML en CSS zijn de bouwstenen van vrijwel elke website op het internet. Met HTML definieer je de structuur en inhoud van de pagina, terwijl CSS zorgt voor de visuele stijl en vormgeving. Door het gebruik van deze twee talen kun je op een relatief eenvoudige manier een professionele en goed ogende website maken.
Als je wilt leren hoe je zelf een website kunt bouwen, zijn er veel bronnen op internet beschikbaar. Er zijn online tutorials en handleidingen te vinden die je stap voor stap door het proces leiden. Met de kennis van HTML en CSS kun je je website volledig aanpassen aan jouw wensen en eisen.
Trainingsmaterialen en informatie over HTML & CSS
Codecademy – Codecademy biedt een grote variatie aan gratis trainingen welke ideaal zijn voor beginners. Je wordt stap voor stap meegenomen vanaf het begin en leert hiermee de fundamentele onderdelen van HTML en CSS. De uitgebreide cursussen bestaan uit tal van opdrachten die je als beginnend websitebouwer nodig zult hebben.
W3CSchools.com – W3C staat voor World Wide Web Consortium. Over de loop van tijd zijn er bepaalde afspraken gemaakt over hoe men HTML en CSS zou moeten gebruiken. Op W3CSchools.com vind je altijd de meest recente volledig bijgewerkte informatie wat betreft de algemene standaarden.
Bouw je eigen webscraper – Leer hoe je met Python data van een website kunt halen.
