Het doel van de Next Web Coding lessen is het maken van een simpele website in HTML/CSS. We zullen leren hoe je HTML en CSS codeert in Visual Studio Code. Vervolgens maken we met ‘mediaqueries’ de website responsive, waardoor de site verandert afhankelijk van het apparaat, mobiel of desktop.
In deze video wordt de les stapsgewijs doorlopen. Dezelfde stappen lees je ook hieronder.
Download het pakket voor jouw besturingssysteem op https://code.visualstudio.com/Download.
Mac gebruikers let op: Op de site van VSCode download je een zip bestand. Dit bestand kun je uitpakken door er op dubbel te klikken. Vergeet niet om het nieuwe Visual Studio Code
icoontje vervolgens naar je Applications
folder te verplaatsen. Kijk de video als je niet weet hoe dit moet.
Als je VSCode voor het eerst opstart zie je een scherm dat er zo uit ziet:
x
om de tab te sluiten. Sluit deze tab.workbench.activityBar.visible
en zet het vinkje uit:Zoek daarna op explorer.openEditors.visible
en verander het getal naar 0:
Visual Studio Code is op zich al een compleet programma, maar doordat enthousiastelingen nóg meer mogelijkheden maken, kunnen we allemaal handigheidjes toevoegen. Dit noemen we extensions.
Live Server
.Beautify
(gemaakt door HookyQR)format
.📂 CMD
┃
┗ 📂 websites
┃
┣ 📂 les1
┃ ┃
┃ ┗ 📄 bestandenvoorles1
┃
┣ 📂 les2
┣ 📂 les3
┗ ...
Leer jezelf ook aan om NOOIT hoofdletters, spaties of bijzondere leestekens te gebruiken in de namen van bestanden en mappen die je gebruikt voor websites. Gebruik alleen kleine letters en cijfers
Als je de map hebt aangemaakt, kun je deze in Visual Studio Code openen.
Klik op File > Open (mac) of File > Open Folder… (windows). Selecteer je map en klik op Open (mac) of Select Folder (windows).
Je ziet nu dat de lege map in het Explorer
menu (zie plaatje) van VSCode zichtbaar is.
Klik op het icoontje voor New File. Je wordt gevraagd om de bestandsnaam van je nieuwe bestand. Typ daar index.html
index.html is de standaard bestandsnaam van de eerste pagina van je website. Noem je eerste bestand daarom altijd zo.
Typ in het bestand html:5
en druk op enter. Je ziet nu code verschijnen. Druk op tab totdat Document
geselecteerd is. Vervang die tekst door Welkom!
Druk nog een keer op tab, nu staat de cursor tussen <body>
en </body>
. Typ hier Hello World!
Sla het bestand op met ⌘-S (mac) of Ctrl-S (windows).
Rechtsklik in de Explorer op een HTML bestand en kies Open with Live Server. De pagina opent in je standaard browser.
Maak een wijziging in je HTML of CSS bestand en sla op. De browser wordt automatisch ververst, je hoeft de pagina niet opnieuw te openen.
Zoals je ziet negeert HTML enters. Het maakt voor de browser niet uit of je alle code op één regel zet, of dat je alles netjes onder elkaar zet. Natuurlijk is het voor de leesbaarheid van de code wel handig om enters te gebruiken.
Als je een paragraaf (een stuk tekst met een witregel erna) wilt maken, zet je de tekst tussen <p> en </p> tags.
<p>Dit is een paragraaf.</p>
<p>En dit is de volgende paragraaf.</p>
Als je nieuwe regel wilt beginnen zonder witruimte (een line break), gebruik je de <br> tag aan het eind van de zin. De <br> tag heeft geen sluittag.
<p>Dit is een paragraaf <br> met een enter er in.</p>
Eigenschappen van elementen
Soms heeft een element meer informatie nodig. Bijvoorbeeld een hyperlink, die link moet niet alleen weten welke tekst hij moet tonen, maar ook naar welke pagina of site hij je moet brengen nadat je er op klikt. Die extra informatie geven we met een attribuut.
• Attributen staan altijd in de begintag.
• Attributen zijn altijd een combinatie van een naam en een waarde: naam="waarde"
De tag voor een hyperlink is <a>. De naam van het attribuut die aangeeft waar de link je heen stuurt is href. Een hyperlink maak je dus als volgt:
<a href="http://www.google.com">Klik hier!</a>
┃ ┗━━━━━━━━━━━━┳━━━━━━━━━━━━━┛
a-tag href-attribuut
Ook een afbeelding is een voorbeeld van een HTML-tag met attributen.
img
<img src="img/jouwafbeelding.jpg" alt="een beschrijving">