Oefening: eenvoudige HTML toevoegen aan uw web-app

  • 10 minuten

Op dit moment heeft uw website een leeg HTML-bestand. Laten we wat code toevoegen. Het doel is om hypertext markup language (HTML) te gebruiken om de webpagina te beschrijven die de browsers van uw klanten moeten weergeven. Zou het niet leuk zijn om een beginsjabloon te hebben? Editors kunnen gemakkelijk een deel van de typische standaard- of HTML-structuur voor u invullen.

In deze les voegt u eenvoudige HTML-inhoud toe, opent u de HTML-pagina in een browser en bekijkt u de ontwikkelhulpprogramma's voor het eerst.

Html-code toevoegen

Visual Studio Code biedt standaardondersteuning voor HTML-programmering. Er zijn syntaxismarkeringen, slimme voltooiingen met IntelliSense en aanpasbare opmaak.

  1. Open de map van uw website in Visual Studio Code en open het index.html bestand door het te selecteren in De Verkenner.

  2. Typ op de index.html pagina en selecteer html:5. HTML5-sjablooncode wordt toegevoegd aan het bestand.

    Notitie

    Als de HTML5-sjablooncode niet aan het index.html bestand is toegevoegd, sluit u het bestand en opent u het opnieuw.

  3. Bewerk de sjablooncode zodat deze er ongeveer als volgt uitziet. Sla het bestand vervolgens op door Control+S te selecteren in Windows of Command+S in macOS.

    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>

</body>
</html>

Er zijn verschillende versies van HTML. Het doctype<!DOCTYPE html> geeft aan dat dit HTML-document HTML5-code bevat.

Hoewel we niet diep ingaan op de betekenis van alle HTML-elementen, willen we enkele belangrijke items aanwijzen. De meta tag geeft metagegevensgegevens aan die doorgaans niet zichtbaar zijn voor de viewer, tenzij ze de broncode in hun browser bekijken. Meta-elementen of tags bevatten beschrijvende informatie over de webpagina. Ze helpen zoekmachines bijvoorbeeld bij het verwerken van de informatie op uw webpagina's die moeten worden geretourneerd in zoekresultaten.

De tekenset (charset) voor UTF-8 lijkt misschien onbelangrijk, maar het is van cruciaal belang voor het bepalen hoe computers tekens interpreteren. Als de metagegevens voor de tekenset ontbreken, kan dit leiden tot gecompromitteerde beveiliging. Er is nogal wat geschiedenis- en technische informatie achter het kenmerk charset, maar het belangrijkste voordeel van deze oefening is dat de Visual Studio Code-standaard een aantal verstandige standaardwaarden biedt.

Het hoofd bewerken

Het <head> element in uw HTML-code bevat informatie over uw website die niet zichtbaar is in het browsertabblad.

De metagegevens definiëren gegevens over het HTML-document, zoals tekenset, scripts en in welke browser de webpagina wordt geopend.

De titel van een webpagina wordt boven aan een browservenster weergegeven en is op veel manieren aanzienlijk. De titel wordt bijvoorbeeld gebruikt door en weergegeven in zoekmachines. Laten we een titel toevoegen.

Belangrijk

Vanaf dit punt geeft het beletselteken (...) aan dat eerder gedeclareerde code voorafgaat aan of volgt. Er moet voldoende code beschikbaar zijn als context om de benodigde wijzigingen aan te brengen of uw werk bij te werken, maar u moet het beletselteken niet kopiëren en plakken in uw code.

  1. Wijzig het <title> element in de editor zodat het lijkt op het volgende voorbeeld.

    ...
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Simple website</title>
...

Als u stijlen wilt toepassen op de HTML-elementen op de webpagina, kunt u de CSS-code rechtstreeks in de hoofd van de webpagina schrijven. Het schrijven van CSS op de HTML-pagina wordt interne CSS genoemd. Het is echter een best practice om HTML-structuur en CSS-stijl te scheiden. Het hebben van een afzonderlijke CSS-pagina wordt externe CSS genoemd. Code is meestal gemakkelijker te lezen wanneer deze beknopt en gecompartimentaliseerd is. U kunt een of meer externe opmaakmodellen gebruiken om meerdere webpagina's te gebruiken. In plaats van elke HTML-pagina bij te werken met gerepliceerde CSS-code, kunt u wijzigingen aanbrengen in één CSS-bestand en deze updates toepassen op alle afhankelijke webpagina's. We gaan een koppeling maken naar een extern CSS-bestand.

  1. Voeg in de Visual Studio Code-editor een lege regel toe na het <title> element, typ linken selecteer vervolgens Enter. Visual Studio Code moet de volgende regel toevoegen aan uw index.html bestand.

    <link rel="stylesheet" href="">

  2. Werk het href= bestand bij naar href="main.css"en sla het op door Control+S te selecteren in Windows of Command+S in macOS.

    ...
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Simple website</title>
  <link rel="stylesheet" href="main.css">
</head>
...

De hoofdtekst bewerken

Laten we nu beginnen met het invullen van het <body> element.

Het <body> element bevat de inhoud van uw website die zichtbaar is voor uw klanten in hun browsers.

  1. Voeg in het <body> element een kopelement<h1> toe, gevolgd door een alinea-element<p> , en maak vervolgens een niet-geordende lijst<ul> die verschillende lijstitemelementen<li> bevat.

  2. Bewerk uw code of kopieer en plak deze, zodat deze eruitziet als in het volgende voorbeeld.

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Simple website</title>
    <link rel="stylesheet" href="main.css">
  </head>
  <body>
    <h1>Task List</h1>
    <p id="msg">Current tasks:</p>
    <ul>
      <li class="list">Add visual styles</li>
      <li class="list">Add light and dark themes</li>
      <li>Enable switching the theme</li>
    </ul>
  </body>
</html>

U kunt een id-kenmerk (gebruikt in het element) gebruiken voor het <p> opmaken van één element, terwijl het klassekenmerk (gebruikt in het <li> element) is voor het opmaken van alle elementen van dezelfde klasse.

Voordat u de volgende stap uitvoert, controleert u of het bestand is opgeslagen door Control+S of Command+S te selecteren.

Openen in browser

U kunt een voorbeeld van uw webpagina lokaal bekijken door het HTML-bestand in een browser te openen. In plaats van een websiteadres waarmee u begint https://, verwijst uw browser naar het lokale bestandspad, dat er ongeveer als volgt C:/dev/simple-website/index.htmluitziet.

  • Als u een voorbeeld wilt bekijken met Visual Studio Code, klikt u met de rechtermuisknop en index.html selecteert u Openen in standaardbrowser, of selecteert u het index.html bestand en gebruikt u de sneltoets Alt+B.

    Schermopname van het contextmenu-item Openen in browser in Visual Studio Code.

    Belangrijk

    Als u problemen ondervindt, controleert u of u rechtstreeks met de rechtermuisknop op het bestandsnaampictogram of de tekst klikt. Als er een Visual Studio Code-dialoogvenster wordt weergegeven, selecteert u Ja, ik vertrouw de auteurs; dit is de functie Werkruimtevertrouwen waarmee u kunt bepalen of uw projectmappen automatische uitvoering van code moeten toestaan of beperken. U hebt het bestand zojuist gemaakt, dus het is veilig.

    De webpagina wordt geopend in uw standaardbrowser.

De pagina weergeven met hulpprogramma's voor ontwikkelaars

U kunt een webpagina inspecteren met behulp van de ontwikkelhulpprogramma's in uw browser. Laten we dat eens proberen.

  1. Open Ontwikkelhulpprogramma's door met de rechtermuisknop op de webpagina te klikken en Inspect te selecteren of probeer de volgende sneltoetsen:

    • Druk op de sneltoets voor Ontwikkelhulpprogramma's, F12.

    • Druk op Ctrl+Shift+I in Windows en Linux of Option+Command+I op een Mac.

    Deze sneltoetsen werken in Microsoft Edge, Chrome en Firefox. Als u Safari gebruikt, raadpleegt u de webontwikkelingsprogramma's. Wanneer de installatie is uitgevoerd, selecteert u Safari-voorkeuren >en selecteert u Geavanceerd. Schakel onder in het deelvenster het selectievakje voor 'Ontwikkelmenu weergeven in de menubalk' in. Selecteer > ontwikkelen. Raadpleeg de documentatie van Safari Web Inspector voor meer informatie.

    Raadpleeg het artikel Overzicht van DevTools voor meer informatie over het openen van Ontwikkelhulpprogramma's en de belangrijkste beschikbare functies.

  2. Selecteer het tabblad Elementen .

    Schermopname van een browservenster met de website en de ontwikkelhulpprogramma's ernaast met het tabblad Elementen geselecteerd.

  3. Beweeg de muis over de HTML-elementen die worden weergegeven op het tabblad Elementen en vouw de inhoud van de verschillende elementen uit.

Op het tabblad Elementen in ontwikkelhulpprogramma's ziet u het documentobjectmodel (DOM) zoals weergegeven in de browser. Bij foutopsporing is het vaak belangrijk om te zien hoe de browser uw broncode interpreteert.

Het inspecteren van de pagina in een browser biedt allerlei nuttige informatie en kan u helpen bij het oplossen van problemen. U kunt ook CSS-details weergeven met de inspector, zoals u in de volgende sectie ziet.