Øvelse – Føj grundlæggende HTML til din webapp

10 minutter

I øjeblikket har dit websted en tom HTML-fil. Lad os tilføje noget kode! Målet er at bruge HTML (hypertext markup language) til at beskrive den webside, som kundernes browsere skal vise. Ville det ikke være rart at have en startskabelon? Redaktører kan nemt udfylde nogle af de typiske standardtekster eller HTML-struktur for dig.

I dette undermodul tilføjer du grundlæggende HTML-indhold, åbner HTML-siden i en browser og får det første kig på udviklerværktøjerne.

Tilføj noget HTML-kode

Visual Studio Code giver grundlæggende understøttelse af HTML-programmering uden for kassen. Der er syntaksfremhævning, intelligente fuldførelser med IntelliSense og tilpasset formatering.

Åbn din webstedsmappe i Visual Studio Code, og åbn derefter filen index.html ved at vælge den i Explorer.
Skriv index.htmlpå siden html:5 , og vælg derefter Angiv. HTML5-skabelonkoden føjes til filen.

Seddel

Hvis HTML5-skabelonkoden ikke føjes til filen index.html, kan du prøve at lukke og åbne filen igen.

Rediger skabelonkoden, så den ligner følgende. Gem derefter filen ved at vælge Control+S- på Windows eller Command+S på 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>

Der har været forskellige versioner af HTML. Den dokumenttype<!DOCTYPE html> angiver, at HTML-dokumentet indeholder HTML5-kode.

Selvom vi ikke vil dykke dybt ned i betydningen af alle HTML-elementer, vil vi gerne påpege nogle få vigtige elementer. Mærket meta angiver, metadata oplysninger, der normalt ikke er synlige for fremviseren, medmindre de får vist kildekoden i deres browser. Metaelementer eller -mærker indeholder beskrivende oplysninger om websiden. De hjælper f.eks. søgemaskiner med at behandle, hvilke oplysninger på dine websider der skal returneres i søgeresultater.

Det tegnsæt (charset) for UTF-8 kan virke ubetydeligt, men det er afgørende for at fastslå, hvordan computere fortolker tegn. Hvis metadataene for tegnsættet mangler, kan det føre til kompromitteret sikkerhed. Der er en hel del historie og tekniske oplysninger bag charset-attributten, men den vigtige fordel ved denne øvelse er, at Visual Studio Code-standarden giver nogle fornuftige standarder.

Rediger hovedet

Det <head> element i HTML-koden indeholder oplysninger om dit websted, der ikke er synlige under browserfanen.

De metadata definerer data om HTML-dokumentet, f.eks. tegnsæt, scripts, og hvilken browser websiden åbnes i.

Titlen på en webside vises øverst i et browservindue og er vigtig på mange måder. Titlen bruges f.eks. af og vises i søgemaskiner. Lad os tilføje en titel.

Vigtig

Fremover angiver ellipsen (...) , at tidligere erklæret kode står foran eller følger. Der skal være tilstrækkelig kode som kontekst til at foretage nødvendige ændringer eller opdatere dit arbejde, men du bør ikke kopiere og indsætte ellipsen i din kode.

Rediger elementet <title> i editoren, så det ligner følgende eksempel.

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

Hvis du vil anvende typografier på HTML-elementerne på websiden, kan du skrive CSS-koden direkte i websidens hoved. Skrivning af CSS på HTML-siden kaldes interne CSS-. Det er dog bedste praksis at adskille HTML-struktur og CSS-formatering. Hvis du har en separat CSS-side, kaldes det eksterne CSS-. Kode har en tendens til at være lettere at læse, når den er præcis og opdelt i segmenter. Du kan bruge et eller flere eksterne typografiark til at servicere flere websider. I stedet for at opdatere hver HTML-side med replikeret CSS-kode kan du foretage ændringer af en enkelt CSS-fil og få disse opdateringer anvendt på alle de afhængige websider. Lad os linke til en ekstern CSS-fil.

Tilføj en tom linje efter elementet <title> i Visual Studio Code-editoren, skriv link, og vælg derefter Enter. Visual Studio Code skal føje følgende linje til din index.html-fil.
```
<link rel="stylesheet" href="">
```

Opdater href= til href="main.css", og gem filen ved at vælge Control+S- på Windows eller Command+S på 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>
...

Rediger brødteksten

Lad os begynde at udfylde det <body> element nu.

Elementet <body> indeholder dit websteds indhold, der er synligt for dine kunder i deres browsere.

I <body>-elementet skal du tilføje en overskrift<h1> element efterfulgt af et afsnit<p> element og derefter oprette en usorteret liste<ul>, der indeholder flere listeelement<li> elementer.

Rediger din kode, eller kopiér og indsæt, så den ligner følgende eksempel.

<!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>

Du kan bruge en id-attribut (bruges i elementet <p>) til at formatere ét element, mens klasseattributten (der bruges i <li>-elementet) er til formatering af alle elementer i samme klasse.

Før næste trin skal du sørge for, at filen er gemt, ved at vælge Control+S eller Command+S.

Åbn i browser

Du kan få vist din webside lokalt ved at åbne HTML-filen i en browser. I stedet for en webstedsadresse, der starter med https://, peger browseren på den lokale filsti, som skal ligne C:/dev/simple-website/index.html.

Hvis du vil have vist et eksempel ved hjælp af Visual Studio Code, skal du højreklikke på index.html og vælge Åbn i standardbrowsereller vælge filen index.html og bruge tastaturgenvejen Alt+B.

Vigtig

Hvis du har problemer, skal du sørge for, at du højreklikker direkte på filnavnikonet eller teksten. Hvis dialogboksen Visual Studio Code vises, skal du vælge Ja, jeg har tillid til forfatterne; Dette er funktionen Tillid til arbejdsområde, der giver dig mulighed for at beslutte, om dine projektmapper skal tillade eller begrænse automatisk udførelse af kode. Du har lige oprettet filen, så det er sikkert.

Websiden åbnes i standardbrowseren.

Få vist siden ved hjælp af udviklerværktøjer

Du kan undersøge en webside ved hjælp af udviklerværktøjerne i din browser. Lad os prøve.

Åbn Udviklerværktøjer ved at højreklikke på websiden og vælge Undersøg, eller prøv disse genveje:
- Tryk på tastaturgenvejen for Developer Tools, som er F12.
- Tryk på Ctrl+Skift+I på Windows og Linux, eller Option+Command+I på en Mac.
Disse tastaturgenveje fungerer i Microsoft Edge, Chromeog Firefox. Hvis du bruger Safari, skal du se Web Development Tools. Når du er installeret, skal du vælge Safari > Indstillingerog derefter vælge Avanceret. Nederst i ruden skal du markere afkrydsningsfeltet Vis menuen Udvikl på menulinjen. Vælg Udvikl > Vis webfremviser-. Du kan få flere oplysninger i dokumentationen til Safari Web Inspector.

Du kan få mere at vide om, hvordan du åbner Udviklerværktøjer og de vigtigste tilgængelige funktioner, i artiklen Oversigt over DevTools.
Vælg fanen Elementer.
Flyt musen hen over de HTML-elementer, der vises under fanen Elementer, og udvid indholdet af de forskellige elementer.

Fanen Elementer i udviklerværktøjer viser dig DOM (document object model) som gengivet i browseren. Når du foretager fejlfinding, er det ofte vigtigt at se, hvordan browseren fortolker din kildekode.

Undersøgelse af siden i en browser indeholder alle mulige nyttige oplysninger og kan hjælpe dig med at foretage fejlfinding af problemer. Du kan også få vist CSS-oplysninger med fremviser, som du kan se i næste afsnit.

Feedback

Var denne side nyttig?