Hello World in HTML
👩💻 Hands-on Demo: Hello Jupiter in HTML met Visual Studio Code
We gaan dezelfde website als daarstraks opnieuw maken, alleen deze keer met de juiste workflow met Visual Studio Code!
- Maak en nieuwe map aan genaamd
hello-jupiter - Open deze map via Visual Studio Code
- Via het projectpaneel, maak hierin een nieuw bestand aan genaamd
index.html - Bouw jouw tweede webpagina op!
- Gebruik elementen (DOCTYPE declaratie, HTML-element, head-element, body-element, h1-element, p-element, etc.) om jouw HTML document op te bouwen.
- Raadpleeg W3Schools als je vastzit (Google-Fu!)
- (Extra) Gebruik het img-element om een afbeelding in te laden.
- Gebruik deze keer sneltoetsen en snuifjes van Visual Studio Code om sneller aan de slag te gaan.
- Gebruik Live Server om jouw webpagina te openen en live te kunnen updaten.
- Maak een aanpassing aan jouw inhoud en sla jouw bestand op om het live te zien veranderen in de webbrowser.
Oplossingen
🕵️♂️ Klik hier om de oplossingen te tonen
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hello Jupiter</title>
</head>
<body>
<h1>Hello Jupiter</h1>
<p>Dit is mijn tweede website</p>
</body>
</html>