Øvelse – opret en HTML-side

  • 5 minutter

I denne øvelse begynder du at oprette websiden til dit CV. Du starter med at tilføje nogle oplysninger på højt niveau, f.eks. dit navn og sektionsoverskrifter. Du tilføjer også et par kommentarer, som vi bruger som markører for, hvor du kan tilføje oplysninger i en senere øvelse.

I denne øvelse bruges vscode.dev – en webbaseret version af Visual Studio Code og CodeSwing. Disse værktøjer hjælper med at strømline udviklingsprocessen. Der kræves ingen lokal installation for at gennemføre de efterfølgende øvelser.

Opret en HTML-side med CodeSwing

Du starter med at oprette en mappe, konfigurere dit værktøj og oprette et "sving" ved hjælp af CodeSwing i vscode.dev. Et sving viser automatisk resultaterne af din kode, som du opretter i vscode.dev. Dette giver dig mulighed for hurtigt at foretage ændringer, og opdateringerne sker i realtid.

I følgende video kan du se, hvordan du installerer CodeSwing i Visual Studio Code. Disse trin er også i øvelsestrinnene.

  1. Opret en mappe på skrivebordet med navnet CV.
  2. Åbn vscode.dev.
  3. Vælg Åbn mappe.
  4. Gå til den cv-mappe , du oprettede tidligere, og vælg Vælg mappe.
  5. Når du bliver bedt om at lade webstedsvisningsfilerne blive vist, skal du vælge Vis filer.
  6. Vælg knappen udvidelser.

    Skærmbillede af ikonet Udvidelser.

  7. I tekstfeltet Søgeudvidelser i Marketplace skal du skrive CodeSwing.
  8. Vælg Installér for at installere CodeSwing.
  9. Åbn kommandopaletten ved at vælge Ctl-Shift-P eller Cmd-Shift-P på en Mac.
  10. Skriv CodeSwing i kommandopaletten, og vælg CodeSwing: New Swing in Directory....
  11. Vælg Vælg mappe for at bruge den aktuelle mappe (som er den, du oprettede i et tidligere trin).
  12. Vælg Grundlæggende: Kun HTML.
  13. Når du bliver bedt om at gemme ændringer for at fortsætte, skal du vælge Gem ændringer.

Visual Studio Code opretter to vinduer side om side. Venstre side er din editor, hvor du kan angive html-koden. Højre side fungerer som en browser og viser resultaterne af din HTML-kode.

Tilføj HTML for at oprette sidens struktur

Derefter skal du tilføje HTML-koden for at oprette sidens struktur. Du opretter de tre hovedelementer i html, headog body. bodyI kan du tilføje et afsnit, der indeholder generelle oplysninger om dig, f.eks. dit navn og oplysninger om sociale medier. Du kan derefter tilføje sektioner, der viser din uddannelse og erfaring.

Følgende video viser, hvordan du opretter HTML i Visual Studio Code og får kodegengivelsen i CodeSwing. Disse trin er også i øvelsestrinnene.

Du er velkommen til at erstatte Dit navn med dit navn. I andre øvelser opretter du lister og links til din mailadresse, sociale mediehåndtag samt uddannelse og erfaring.

Når du har tilføjet koden, skal du gennemse, hvilken kode der er tilføjet.

  1. Tilføj følgende HTML i index.html:
<html>
<head>
  <title>Your Name resume</title>
</head>
<body>
  <h1>My Name</h1>
  <!-- email address -->
  <h2>Social Media</h2>
  <!-- social media -->
  <h2>Education</h2>
  <!-- education -->
  <h2>Experience</h2>
  <!-- experience -->
</body>
</html>

Hvert af elementerne i HTML-koden gør bestemte ting. I følgende tabel beskrives de koder, du brugte i HTML-koden, og hvordan browseren forstår dem.

Tag Beskrivelse
<html> Koden "objektbeholder" for hele HTML-dokumentet. Alle andre mærker skrives i HTML-elementet.
<head> Headerobjektbeholderen. Sidehovedet indeholder typisk referencer til andre filer, som siden eller webstedet skal bruge. Det kan også omfatte data, som søgemaskiner og sociale medier websteder bruger til bedre at finde dit websted.
<body> Dette mærke opretter brødtekstobjektbeholderen for websiden. De fleste af visningselementerne findes i brødtekstelementet.
<div> Divisionskoden opretter en sektion i HTML. Sektioner har normalt lignende indhold eller indhold, der er relateret til hinanden.
<h1> - <h6> Dette er overskriftskoder. De giver noget struktur til HTML-dokumentet. De beder browseren om at formatere teksten mellem dem på en bestemt måde for at vise dette hierarki.
<!-- comment text --> Disse mærker er kommentarer i HTML. De opretter ikke gengivet output. De bruges af udviklere til at gøre deres kode nemmere at finde, dele og forstå.
/* CSS comment */ Disse kommentarkoder bruges i overlappende typografiark.
  1. Når du skriver, opdateres siden automatisk. det endelige resultat ligner følgende billede:

Skærmbillede af cv-struktur.

Gennemser koden

Alle HTML-sider har html som rodkerneelementet, hvor alt indhold er indeholdt i den. html har normalt to direkte underordnede, head, der indeholder metadata, og body, der indeholder de oplysninger, der skal vises.

Bemærk, hvordan du kun bruger ét h1 element til dit navn og h2 elementer til overskrifter for hver af sektionerne. Dette er for at hjælpe med at fremhæve de vigtigste dele af siden. Dit navn er den vigtigste oplysning på siden. det får derfor top fakturering med h1.

Endelig er der kommentarer til mailadresse, sociale medier, uddannelse og erfaring. Disse bruges som pladsholdere og erstattes i en senere øvelse i dette modul.