Terug

HTML 1 – Programma’s Installeren

Visual Studio Code installeren

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. Vraag hulp als je niet weet hoe dit moet.

Als je VSCode voor het eerst opstart zie je een scherm dat er zo uit ziet:

  1. Je ziet dat het ‘Welcome’ tabblad geopend is. Als je met de muis over de titel van de tab beweegt zie je een x om de tab te sluiten. Sluit deze tab.
  2. We doen een kleine aanpassing in de instellingen zodat een aantal overbodige menu’s verborgen worden.
    Ga naar File > Preferences > Settings (Windows) of Code > Preferences > Settings.
    Zoek op workbench.activityBar.visible en zet het vinkje uit:

    Zoek daarna op explorer.openEditors.visible en verander het getal naar 0:

Extensies installeren

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.

  1. Ga in VSCode naar View > Extensions.
    Typ in het zoekveld open in browser.
    Klik bij het eerste resultaat (gemaakt door TechER) op Install.
    Het Extensions menu kun je weer sluiten door te klikken op View > Explorer.

Chrome installeren

  1. Als je Chrome nog moet installeren, volg dan de aanwijzingen op
    Chrome downloaden
    Chrome instellen als uw standaardbrowser

Hello World!

  1. We gaan nu ons eerste project maken. Maak daarvoor in je finder of verkenner een nieuwe map aan. Het is erg belangrijk om meteen vanaf de eerste dag een goede bestandsstructuur aan te houden. Dit voorkomt – niet overdreven – minstens 50% van de problemen later. Wij raden aan om bijvoorbeeld de volgende structuur te gebruiken:
    ๐Ÿ“‚ CMD
     โ”ƒ
     โ”— ๐Ÿ“‚ websites
          โ”ƒ
          โ”ฃ ๐Ÿ“‚ les1
          โ”ƒ    โ”ƒ
          โ”ƒ    โ”— ๐Ÿ“„ bestanden_voor_les1
          โ”ƒ
          โ”ฃ ๐Ÿ“‚ 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, cijfers en underscores ( _ )


  1. 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.

  2. 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.

  3. 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).

    Open het bestand in de browser met Alt-B.
    Als de webpagina niet in Chrome opent, doe je Alt-Shift-B en kies je Google Chrome.

  4. Kijk nu weer naar je code. Verander de tekst Welkom! en Hello World!. Sla je bestand op, druk op โŒ˜-tab of alt-tab om terug te gaan naar je browser en druk op โŒ˜-R (mac) of F5 (windows) om de pagina te herladen. Wat is er veranderd?