Een Code Editor om HTML te Coderen!
Hoe Schrijven we HTML Code?
- Maak een .html bestand (bv. index.html)
- Begin met HTML te schrijven!
- Kan in kladblok of Notepad++ als je echt wil…
- Zo maak je jouw leven zuurder!
- Zwart op wit 🤢
- Gemakkelijk fouten maken
- Geen instant preview van wat je maakt
- Traag
- Onproductief
- Niet leuk
👩💻 Hands-on Demo: Hello World in HTML met Kladblok
We gaan een eerste basis website maken door wat HTML code te schrijven in Kladblok (Notepad)!
- Maak en nieuwe map aan genaamd
hello-world - Maak hierin een nieuw bestand aan genaamd
my-website.html - Bouw jouw eerste 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.
- Open jouw webpagina met jouw lievelingswebbrowser
- (Extra) Wat gebeurt er nu wanneer je <h1> verandert naar <mickeyMouse>?
Oplossingen
🕵️♂️ Klik hier om de oplossingen te tonen
<!DOCTYPE html>
<html>
<head>
<title>Hello World</title>
</head>
<body>
<h1>Hello World</h1>
<p>Dit is mijn eerste website!</p>
</body>
</html>
Beter met een Code Editor!
- Programma speciaal voor te coderen!
- Bv. Visual Studio Code, Sublime Text, Atom, Brackets, etc.
- Syntax highlighting (leuke, handige kleurtjes)
- IntelliSense (slimme suggesties en auto-completion)
- Emmet voor ultrasnel te coderen
- Handige plugins
- Van leesbaarheid, snelheid, productiviteit en mooie themes word je blijer!
Onze Aanrader: Visual Studio Code
- Visual Studio Code
- Code editor (zoals kladblok maar opgepimpt voor mee te coderen)
- Gratis
- Van Microsoft
- Multi-platform (Windows, Linux, Mac)
- Leuke plugins!
- Niet te verwarren met Visual Studio (volwaardige IDE voor C++, .NET, etc.)
In het volgende gedeelte leer je over hoe je Visual Studio Code kan installeren.