Dette er del 2 af en artikelserie rettet mod den absolutte begynder i webudvikling, og kan ses som yderligere materiale til bogen ‘Introduktion til webudvikling‘. I denne artikel vil du lege lidt med HTML. Artiklen forudsætter at du har værktøjer installeret jf. del 1.
HTML
HTML (HyperText Markup Language) er et opmærkningssprog som beskriver indholdet på en webside som eksempelvis overskrifter, tekster, tabeller, links, billeder med videre. Alle opmærkninger har fået et standard design gennem det CSS-stylesheet som alle browsere har implementeret kaldet user agent stylesheet. Derfor har ‘rå’ HTML allerede et (noget kedeligt) design, men det kan ændres ved at overskrive det indbyggede stylesheet. Det vil du se i seriens del 3 – i denne artikel fokuserer vi på at prøve den rene HTML.
Start med at skabe en tom mappe et ønsket sted, åbn Visual Studio Code, og prøv Open folder på Fil-menuen til at åbne den oprettede tomme mappe. Nu vil du kunne se alle filer i mappen i Explorer-vinduet til venstre, Lige nu er der ingen filer i mappen så vinduet er tomt.
Tip: Du kan også højre klikke på en mappe i Stifinder (Windows) og vælge ‘Åbn i Visual Studio Code’. Alternativt fra en kommandoprompt skrive ‘code .’
Tilføj en ny HTML-fil ved at trykke ctrl+n eller via file-menuen og gem filen (ctrl+s) med det samme som eksempelvis index.html. Nu kan du tilføje HTML opmærkninger men det nemmeste er at få Emmet-snippets til at hjælpe. Prøv at skrive ! og tryk enter.
Det skulle gerne resultere i noget der minder om følgende opmærkninger:
<!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>I mellem body-start og body-slut opmærkningerne kan du tilføje din HTML. Der er masser af opmærkninger nævnt i bogen du kan lege med, men prøv eksempelvis en overskrift, paragraf og en liste:
<!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>
<h1>Overskrift</h1>
<p>Tekst Tekst Tekst</p>
<ul>
<li>Punkt</li>
<li>Punkt</li>
<li>Punkt</li>
</ul>
</body>
</html>For at se resultatet kan du højreklikke et sted i dokumentet og vælge ‘Open with live server’ (se del 1 af serien). Det vil åbne en browser så du kan se resultatet.
Nu kan du lege med de opmærkninger der er nævnt i bogen. Når du gemmer filen i Visual Studio Code vil browseren automatisk opdatere så du kan se resultatet.
Det er ikke super kønt men design er håndteret i CSS og ikke i HTML – så i næste del af serien ser vi nærmere på hvordan du kan tilføje farve, margin, placering med videre.
