Pdf downloaden Pdf downloaden

Visual Studio Code is een door Microsoft ontworpen broncodebewerker die beschikbaar is voor Windows, macOS en Linux. Je kunt er codes mee schrijven en bewerken in allerlei verschillende codetalen, waaronder HTML. Vraag je je af hoe je een HTML-code kunt laten draaien om het resultaat te zien? Om te beginnen bestaan er allerlei extensies waarmee je heel makkelijk een HTML-code kunt laten draaien in Visual Studio Code. Maak je kunt ook de Terminal gebruiken om het HTML-bestand te laten draaien. In dit artikel lees je hoe je op verschillende manieren een HTML-bestand kunt draaien in Visual Studio Code.

Methode 1
Methode 1 van 4:

Een HTML-bestand aanmaken, openen en opslaan

Pdf downloaden
  1. Visual Studio Code heeft een icoontje dat eruitziet als een blauw strikje. Klik op het icoontje van Visual Studio Code om de codebewerker te openen. Je vindt het in het startmenu van Windows, de Apps-map op je Mac, of in het Appsmenu van Linux.
    • Als je dat niet al gedaan hebt, kun je Visual Studio Code gratis downloaden op https://code.visualstudio.com/ . Klik gewoon op de knop Downloaden op de website en open het installatiebestand vanuit je webbrowser of je map met gedownloade bestanden. Follow the instructions to complete the installation.
  2. Gebruik een van de stappen hieronder om een bestand te openen of een nieuw bestand aan te maken:
    • Klik om een nieuw bestand aan te maken op Bestand in de menubalk bovenaan. Klik vervolgens op Nieuw bestand . Begin met het typen van je HTML-code .
    • Klik om een bestaand bestand te openen op Bestand in de menubalk bovenaan. Klik vervolgens op Bestand openen . Surf naar het HTML-bestand dat je wilt openen en klik erop om het te selecteren. Klik vervolgens op Openen .
  3. Als je klaar bent om een HTML-bestand te laten draaien in Visual Studio Code, zul je het bestand eerst als HTML-bestand op moeten slaan. Zodra je het HTML-bestand hebt opgeslagen, kun je het laten draaien in een willekeurige browser. Volg om je HTML-bestand op te slaan in Visual Studio Code de volgende stappen:
    • Klik op Bestand in de menubalk bovenaan.
    • Klik op Opslaan als .
    • Voer naast "Bestandsnaam" een naam in voor het bestand.
    • Gebruik het uitklapmenu naast "Opslaan als type" om " HTML " te selecteren.
    • Klik op Opslaan .
    Advertentie
Methode 2
Methode 2 van 4:

De Terminal gebruiken

Pdf downloaden
  1. Je herkent Visual Studio Code aan het symbooltje in de vorm van een blauw strikje. Open Visual Studio Code door op dat strikvormige icoontje te klikken. Je vindt het in het startmenu van Windows, in de Apps-map op je Mac, of in het app-menu van Linux.
  2. Als je dat nog niet gedaan hebt, open dan een bestaand HTML-bestand, of maak een nieuw HTML-bestand aan en sla het op in HTML-formaat. Als je al een HTML-bestand open hebt staan, klik dan op de tab met het HTML-bestand bovenaan op het scherm om het te kunnen zien.
  3. Klik hiervoor op Terminal bovenaan op het scherm. Klik vervolgens op Nieuwe Terminal . De Terminal is de enige manier waarmee je een HTML-bestand kunt laten draaien in Visual Studio Code zonder gebruik te hoeven maken van een extensie. Het is ook de ingewikkeldste manier.
    • Een andere manier is om op Inzien bovenaan te klikken, en vervolgens op Terminal .
  4. Zo ga je naar de locatie van je HTML-bestand. Als je HTML-pagina bijvoorbeeld in een HTML-bestand in je map met Documenten staat, zou je cd \Gebruikers\gebruikersnaam\Documenten invullen en op Enter drukken.
    • Als het HTML-bestand is opgeslagen in een andere driveletter dan je besturingssysteem, zul je die driveletter in de terminal moeten veranderen voordat je naar het pad van het HTML-bestand kunt gaan. Typ hiervoor gewoon de driveletter (d.w.z. D: voor een D: drive) in en druk op Enter .
    • Als je niet precies weet waar het HTML-bestand is opgeslagen, kun je met de rechtermuisknop op de tab met je HTML-bestand bovenaan op het scherm klikken en vervolgens op Pad kopiëren . Typ cd in in de Terminal en plak vervolgens het pad er direct achter. Verwijder de bestandsnaam aan het eind van het pad en druk op Enter .
    • Als er in één of meer van de namen van de mappen in het pad naar je HTML-bestand een spatie staat, zal de Terminal niet naar de map kunnen gaan. Gebruik de Bestandsverkenner op een pc met Windows of de Finder op een Mac om naar een map te gaan met een spatie in de naam en wijzig de namen van die mappen om alle eventuele spaties te verwijderen (als je bijvoorbeeld een map hebt met de naam "Bestanden in HTML", verander de naam dan in "HTML-bestanden".)
  5. Als je bijvoorbeeld de Index.HTML-pagina wilde laten draaien, zou je start index.html intypen en op Enter drukken. Op die manier open je het HTML-bestand in een apart venster waardoor je een voorbeeldweergave van de HTML-pagina kunt zien.
    • Klik om de voorbeeldweergave te sluiten simpelweg op het kruisje ("x") bovenaan op het scherm. [1]
    Advertentie
Methode 3
Methode 3 van 4:

De extensie "HTML voorbeeldweergave" gebruiken

Pdf downloaden
  1. Het symbooltje van Visual Studio Code heeft de vorm van een blauw strikje. Open Visual Studio Code door op dat icoontje te klikken. Je vindt het in het startmenu van Windows op een pc met Windows, in de Apps-map op een Mac, of in het app-menu in Linux.
  2. Klik hiervoor op het icoontje dat de vorm heeft van vier vierkantjes in de menubalk links. Je krijgt dan het zoekmenu met Extensies te zien.
  3. De zoekbalk staat bovenaan in het menu met Extensies aan de linkerkant. Je krijgt dan een lijst te zien met alle extensies die overeenkomen met jouw zoekopdracht. "Voorbeeldweergave van HTM-pagina" is een extensie voor Visual Studio Code waarmee je een voorbeeldweergave van HTML-bestanden kunt zien binnen Visual Studio Code in de modus gesplitst of de modus volledig scherm.
  4. Als het goed is, is het de eerste extensie bovenaan in de lijst met extensies. Hij is gecreëerd door Thomas Haakon Townsend. De extensie bevat een icoontje dat op een oranje schildje lijkt met een "5" in het midden (het logo van HTML 5).
  5. Het staat onder het kopje "Voorbeeldweergave van HTML-pagina" op de informatiepagina rechts van het extensiemenu. Zo installeer je de extensie. Wacht een paar minuten tot het installatieproces voltooid is.
  6. Als je dat nog niet gedaan hebt, open dan een bestaand HTML-bestand of maak een nieuw HTML-bestand aan en sla het op in HTML-formaat. Als je al een HTML-bestand geopend hebt, klik dan op de tab met het HTML-bestand bovenaan op het scherm om het te kunnen zien.
  7. Klik daarvoor op het icoontje dat eruitziet als een gesplitst scherm met op de linkerkant een vergrootglaasje. Het staat rechts bovenaan in de hoek van het scherm. Zo open je een voorbeeldweergave van een HTML-bestand in een gesplitst scherm in Visual Studio Code.
    • Houd de toets Alt ingedrukt en klik op de voorbeeldweergaveknop om een voorbeeldweergave van de HTML-code op volledig scherm te zien.
    • Klik om het scherm te sluiten simpelweg op het kruisje "x" in de voorbeeldweergave-tab bovenaan op het scherm.
    Advertentie
Methode 4
Methode 4 van 4:

De extensie "Openen in browser" gebruiken

Pdf downloaden
  1. Je herkent Visual Studio Code aan het icoontje in de vorm van een blauw strikje. Klik op het icoontje van Visual Studio Code om Visual Studio Code te openen. Je vindt het in het startmenu van Windows, in de Apps-map op een Mac of in het app-menu in Linux.
  2. Het is het icoontje in de vorm van vier vierkantjes in de menubalk aan de linkerkant. Je krijgt dan het zoekmenu met meerdere extensies te zien.
  3. De zoekbalk staat bovenaan links in het menu met Extensies. Je krijgt dan een lijst met extensies te zien die overeenkomen met jouw zoekopdracht. "In een browser openen" is een extensie voor Visual Studio Code waarmee je een HTML-bestand kunt openen in een browser naar keuze vanuit Visual Studio Code.
  4. Als het goed is is dat de eerste extensie bovenaan op de lijst. Het is de extensie die volledig uit kleine letters bestaat en gecreëerd is door TechER. Klik op de extensie om hem te selecteren.
  5. Je vindt deze optie onder het kopje "in een browser openen" op de informatiepagina rechts van het extensiemenu. Zo installeer je de extensie. Wacht een paar minuten totdat het installatieproces voltooid is.
  6. Open als je dat nog niet gedaan hebt een bestaand HTML-bestand of maak een nieuw HTML-bestand aan en sla het op in HTML-formaat. Als je al een HTML-bestand open hebt staan, klik dan op de tab die je HTML-bestand bevat bovenaan op het scherm om het te bekijken.
  7. Er verschijnt dan een contextmenu.
  8. Zo open je het HTML-bestand in je standaardbrowser. Zo kun je het HTML-bestand bekijken. [2]
    • Of je kunt op In een andere browser openen klikken en vervolgens twee keer klikken op een webbrowser naar keuze.
    • Als je gevraagd wordt om een standaardbrowser te selecteren, klik dan op de browser waarin je het bestand wilt openen en klik vervolgens op Ok .
    Advertentie

Over dit artikel

Deze pagina is 2.060 keer bekeken.

Was dit artikel nuttig?

Advertentie