Reader voor Les 1: Kennismaking met Webontwikkeling

Les1

Doelgroep: MBO niveau 2 – Oriëntatie op Software Development
Module: Introductie tot Webontwikkeling

Inhoudsopgave

  1. Wat is Webontwikkeling?
  2. Basiscomponenten van een Website
  3. Installatie van Tools
  4. Eerste HTML-pagina Maken
  5. Oefeningen en Voorbeelden

1. Wat is Webontwikkeling?

Webontwikkeling is het maken van websites. Het gaat om het bouwen van pagina’s die je op internet kunt bekijken. Denk aan websites zoals YouTube, Bol.com of zelfs de website van je school. Webontwikkelaars gebruiken speciale codes om deze websites te maken. De belangrijkste codes die ze gebruiken zijn HTML, CSS en JavaScript.

Voorbeeld:
Stel je voor dat je een website maakt voor een pizzeria.

  • HTML zorgt voor de structuur: de naam van de pizzeria, de menu-items en de prijzen. Je kunt HTML vergelijken met het skelet of geraamte, net als in het menselijk lichaam.

  • CSS zorgt voor de opmaak: de kleuren, lettertypen en hoe de pagina eruitziet. Wanneer we dezelfde vergelijking maken met het menselijk lichaam dan zou je dit kunnen zien als de huid. Net als bij de mens bepaald je huid voor een groot deel hoe je er uit ziet net als bij een webpagina.

  • JavaScript zorgt voor interactiviteit: bijvoorbeeld een knop om een pizza te bestellen. Ook hier kun je de mens als vergelijking nemen, in dit geval de spieren en zenuwstelsel. Het zenuwstelsel zorgt ervoor dat het lichaam kan reageren op prikkels, zoals het aanraken van iets heets of het bewegen van een arm. JavaScript zorgt ervoor dat een website kan reageren op wat de gebruiker doet.

2. Basiscomponenten van een Website

Een website bestaat dus uit drie belangrijke onderdelen:

  1. HTML (HyperText Markup Language):
    Dit is de basis van een website. Het bepaalt wat er op de pagina staat, zoals tekst, afbeeldingen en koppen.
  2. CSS (Cascading Style Sheets):
    Dit bepaalt hoe de website eruitziet, zoals de kleuren, lettertypen en de lay-out.
  3. JavaScript:
    Dit zorgt ervoor dat de website interactief wordt, bijvoorbeeld door knoppen die iets doen als je erop klikt.

Voorbeeld:

<!DOCTYPE html>
<html>
<head>
    <title>Mijn Eerste Webpagina</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f0f0f0;
        }
        h1 {
            color: blue;
        }
    </style>
</head>
<body>
    <h1>Welkom op mijn website!</h1>
    <p>Dit is een eenvoudige webpagina.</p>
</body>
</html>

3. Installatie van Tools

Om te beginnen met webontwikkeling, hebben we een paar tools nodig:

  1. Visual Studio Code (VS Code):
    Dit is een programma waar je code in kunt schrijven. Het is gratis en makkelijk te gebruiken.
  2. Webbrowser:
    Gebruik een browser zoals Google Chrome of Mozilla Firefox om je webpagina’s te bekijken.

Stappen om VS Code te installeren:

  1. Ga naar de website van Visual Studio Code.
  2. Download de versie voor jouw computer (Windows, macOS of Linux).
  3. Volg de instructies om het programma te installeren.
  4. Open VS Code en maak een nieuw bestand aan (File > New File).

4. Eerste HTML-pagina Maken

Laten we beginnen met het maken van een eenvoudige HTML-pagina.

Stappen:

  1. Open Visual Studio Code.
  2. Maak een nieuw bestand en sla het op als index.html.
  3. Voeg de volgende code toe:
<!DOCTYPE html>
<html>
<head>
    <title>Mijn Eerste Webpagina</title>
</head>
<body>
    <h1>Hallo Wereld!</h1>
    <p>Dit is mijn eerste webpagina.</p>
</body>
</html>
  1. Sla het bestand op en open het in je browser door het bestand naar de browser te slepen of door rechts te klikken en “Openen met” te selecteren.

5. Oefeningen en Voorbeelden

Oefening 1: Maak een Eenvoudige Webpagina

  • Maak een nieuwe HTML-pagina met de naam oefening1.html.
  • Voeg een titel toe aan de pagina met <h1>.
  • Voeg een paragraaf toe met <p>.
  • Voeg een afbeelding toe met <img> (gebruik een online afbeelding of een lokale afbeelding).

Voorbeeld:

<!DOCTYPE html>
<html>
<head>
    <title>Oefening 1</title>
</head>
<body>
    <h1>Mijn Eerste Oefening</h1>
    <p>Dit is een eenvoudige webpagina met een afbeelding.</p>
    <img src="https://via.placeholder.com/150" alt="Voorbeeldafbeelding">
</body>
</html>
  • Maak een nieuwe HTML-pagina met de naam oefening2.html.
  • Voeg een titel en een paragraaf toe.
  • Voeg een link toe naar een andere website met <a>.

Voorbeeld:

<!DOCTYPE html>
<html>
<head>
    <title>Oefening 2</title>
</head>
<body>
    <h1>Welkom bij Oefening 2</h1>
    <p>Bezoek <a href="https://www.google.com">Google</a> voor meer informatie.</p>
</body>
</html>

Oefening 3: Maak een Lijst

  • Maak een nieuwe HTML-pagina met de naam oefening3.html.
  • Voeg een ongeordende lijst toe met <ul> en <li>.
  • Voeg een geordende lijst toe met <ol> en <li>.

Voorbeeld:

<!DOCTYPE html>
<html>
<head>
    <title>Oefening 3</title>
</head>
<body>
    <h1>Lijsten in HTML</h1>
    <h2>Ongeordende Lijst</h2>
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ul>
    <h2>Geordende Lijst</h2>
    <ol>
        <li>Eerste item</li>
        <li>Tweede item</li>
        <li>Derde item</li>
    </ol>
</body>
</html>

Tips voor Succes

  • Begin Simpel: Maak eerst een eenvoudige webpagina en voeg daarna steeds meer toe.
  • Gebruik de Browser Developer Tools: Druk op F12 in je browser om te zien hoe de website is opgebouwd.
  • Blijf Oefenen: Hoe meer je oefent, hoe beter je wordt in het maken van websites.

Einde van de Reader

Dit is het einde van de reader voor Les 1. In de volgende les gaan we dieper in op HTML-tags en het opbouwen van een website-structuur. Veel succes met de oefeningen!