Övning – Lägga till grundläggande HTML i webbappen

10 minuter

För närvarande har webbplatsen en tom HTML-fil. Nu ska vi lägga till lite kod! Målet är att använda hypertextmarkeringsspråk (HTML) för att beskriva webbsidan som kundernas webbläsare ska visa. Skulle det inte vara trevligt att ha en startmall? Redigerare kan enkelt fylla i några av de typiska pannplattorna eller HTML-strukturen åt dig.

I den här lektionen lägger du till grundläggande HTML-innehåll, öppnar HTML-sidan i en webbläsare och får en första titt på utvecklarverktygen.

Lägg till html-kod

Visual Studio Code ger grundläggande stöd för HTML-programmering direkt. Det finns syntaxmarkering, smarta slutföranden med IntelliSense och anpassningsbar formatering.

Öppna din webbplatsmapp i Visual Studio Code och öppna sedan filen genom att välja den index.html i Utforskaren.
På sidan index.html skriver du html:5och väljer sedan Retur. HTML5-mallkod läggs till i filen.

Kommentar

Om HTML5-mallkoden inte läggs till i index.html filen kan du försöka stänga och öppna filen igen.

Redigera mallkoden så att den liknar följande. Spara sedan filen genom att välja Control+S i 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>

Det har funnits olika versioner av HTML. anger att det här HTML-dokumentet innehåller HTML5-kod.

Även om vi inte kommer att fördjupa oss i innebörden av alla HTML-element, vill vi påpeka några viktiga objekt. Taggen meta anger metadatainformation som vanligtvis inte är synlig för visningsprogrammet om de inte visar källkoden i webbläsaren. Metaelement eller taggar ger beskrivande information om webbsidan. De hjälper till exempel sökmotorer att bearbeta vilken information på dina webbsidor som ska returneras i sökresultaten.

Teckenuppsättningen (charset) för UTF-8 kan verka obetydlig, men det är viktigt för att fastställa hur datorer tolkar tecken. Om metadata för teckenuppsättningen saknas kan det leda till komprometterad säkerhet. Det finns en hel del historik och teknisk information bakom teckenuppsättningsattributet, men det viktiga med den här övningen är att Pannplåten i Visual Studio Code innehåller några lämpliga standardvärden.

Redigera huvudet

Elementet <head> i HTML-koden innehåller information om din webbplats som inte visas på webbläsarfliken.

Metadata definierar data om HTML-dokumentet, till exempel teckenuppsättning, skript och vilken webbläsare webbsidan öppnas i.

Rubriken på en webbsida visas överst i ett webbläsarfönster och är betydande på många sätt. Titeln används till exempel av och visas i sökmotorer. Nu ska vi lägga till en rubrik.

Viktigt!

Från och med nu anger ellipsen (...) att tidigare deklarerad kod föregår eller följer. Det bör finnas tillräckligt med kod som kontext för att göra nödvändiga ändringar eller uppdatera ditt arbete, men du bör inte kopiera och klistra in ellipsen i koden.

Ändra elementet <title> i redigeraren så att det liknar följande exempel.

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

Om du vill använda format på HTML-elementen på webbsidan kan du skriva CSS-koden direkt i webbsidans huvud. Att skriva CSS på HTML-sidan kallas intern CSS. Det är dock bästa praxis att separera HTML-struktur och CSS-formatering. Att ha en separat CSS-sida kallas extern CSS. Kod brukar vara lättare att läsa när den är koncis och uppdelad. Du kan använda ett eller flera externa formatmallar för att betjäna flera webbsidor. I stället för att uppdatera varje HTML-sida med replikerad CSS-kod kan du göra ändringar i en enskild CSS-fil och låta uppdateringarna tillämpas på alla beroende webbsidor. Nu ska vi länka till en extern CSS-fil.

I Visual Studio Code-redigeraren lägger du till en tom rad efter elementet <title> , skriver linkoch väljer sedan Retur. Visual Studio Code bör lägga till följande rad i index.html filen.
```
<link rel="stylesheet" href="">
```

href= Uppdatera till href="main.css"och spara filen genom att välja Control+S i 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>
...

Redigera brödtexten

Nu ska vi börja fylla i elementet <body> .

Elementet <body> innehåller webbplatsens innehåll som är synligt för dina kunder i deras webbläsare.

I elementet <body> lägger du till ett rubrikelement<h1> följt av ett styckeelement<p> och skapar sedan en osorterad lista<ul> som innehåller flera listobjektelement<li> .

Redigera koden eller kopiera och klistra in så att den ser ut som i följande exempel.

<!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 använda ett ID-attribut (används i elementet <p> ) för att formatera ett element, medan klassattributet (som används i elementet <li> ) används för att formatera alla element i samma klass.

Innan nästa steg kontrollerar du att filen sparas genom att välja Kontroll+S eller Kommando+S.

Öppna i webbläsaren

Du kan förhandsgranska webbsidan lokalt genom att öppna HTML-filen i en webbläsare. I stället för en webbplatsadress som börjar med https://pekar webbläsaren på den lokala filsökvägen, som bör se ut ungefär C:/dev/simple-website/index.htmlsom .

Om du vill förhandsgranska med Visual Studio Code högerklickar du och väljer index.html eller väljer filen och använder kortkommandot index.html.

Viktigt!

Om du har problem kontrollerar du att du högerklickar direkt på filnamnsikonen eller texten. Om en Visual Studio Code-dialogruta visas väljer du Ja, jag litar på författarna. Det här är funktionen Förtroende för arbetsyta som gör att du kan bestämma om dina projektmappar ska tillåta eller begränsa automatisk kodkörning. Du har precis skapat filen, så den är säker.

Webbsidan öppnas i standardwebbläsaren.

Visa sidan med hjälp av utvecklarverktyg

Du kan inspektera en webbsida med hjälp av utvecklarverktygen i webbläsaren. Vi gör ett försök.

Öppna Utvecklarverktyg genom att högerklicka på webbsidan och välja Inspektera, eller prova följande genvägar:
- Tryck på kortkommandot för Developer Tools, som är F12.
- Tryck på Ctrl+Skift+I i Windows och Linux eller Option+Command+I på en Mac.
Dessa kortkommandon fungerar i Microsoft Edge, Chrome och Firefox. Om du använder Safari kan du läsa webbutvecklingsverktygen. När du är installerad väljer du Safari-inställningar >och sedan Avancerat. Längst ned i fönstret väljer du kryssrutan Visa utveckla-menyn i menyraden . Välj Utveckla > Visa webbkontroll. Mer information finns i dokumentationen för Safari Web Inspector.

Mer information om hur du öppnar utvecklarverktyg och de viktigaste tillgängliga funktionerna finns i artikeln Översikt över DevTools.
Välj fliken Element .
Flytta musen över HTML-elementen som visas på fliken Element och expandera innehållet i de olika elementen.

Fliken Element i utvecklarverktygen visar dokumentobjektmodellen (DOM) som återges i webbläsaren. När du felsöker är det ofta viktigt att se hur webbläsaren tolkar källkoden.

När du inspekterar sidan i en webbläsare finns all slags användbar information som kan hjälpa dig att felsöka problem. Du kan också visa CSS-information med inspektören, som du ser i nästa avsnitt.

Feedback

Var den här sidan till hjälp?