Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Lære Opbygning af et Komplet Website med HTML | Avanceret HTML
HTML-Grundlæggende

bookOpbygning af et Komplet Website med HTML

Vi har gennemgået alle de væsentlige HTML-emner og er nu klar til at opbygge et komplet website fra bunden. Lad os oprette et et-sides porteføljewebsite til at fremvise dine projekter og færdigheder.

Du kan enten arbejde selvstændigt eller følge vejledningen nedenfor, hvor vi giver dig trinvise instruktioner og kode til hvert trin.

Trin-for-trin guide

1. Plan for websitets struktur

Vores website vil bestå af flere nøglesektioner:

  1. Header: Denne sektion vil tydeligt vise porteføljeejerens navn og muliggøre navigation på websitet;
  2. Om: Her vil besøgende finde relevant information om ejeren af websitet, hvilket giver indsigt i deres baggrund og ekspertise;
  3. Portefølje: Denne sektion vil fremvise forskellige projekter, hver med projektbilleder, titler, beskrivelser og de anvendte teknologier;
  4. Kontakt: Vi vil inkludere en formular til at indsamle besøgendes oplysninger;
  5. Footer: Foden vil være den afsluttende sektion og indeholde copyright-information samt links til sociale medier, telefonkontakt og e-mailadresse.

2. Strukturér indhold med semantisk HTML

Opret en ny index.html-fil og opsæt den grundlæggende HTML-dokumentstruktur.

index.html

index.html

copy

3. Header-sektion

Byg header med webstedsejerens navn og navigationslinks.

index.html

index.html

copy

4. Om-sektion

Afsnit dedikeret til en kort introduktion og information om ejeren.

index.html

index.html

copy

5. Porteføljeafsnit

I porteføljeafsnittet fokuserer vi på projekterne med beskrivelser og billeder.

index.html

index.html

copy

6. Kontaktsektion

Vi opretter kontaktformularen for at komme i kontakt med ejeren.

index.html

index.html

copy

7. Fodsektion

Afslutningsvis tilføjes copyright-oplysninger og links til sociale medier.

index.html

index.html

copy

Bonus

Lad os forbedre udseendet af vores hjemmeside, ikke kun for søgemaskiner, men også for brugere. Dette kan opnås ved hjælp af CSS, som står for Cascading Style Sheets. Selvom vi ikke har dækket CSS i dette kursus, er det en vigtig del af webdesign.

CSS er et stylesheet-sprog, der gør det muligt at angive præsentation og styling af et dokument skrevet i et markup-sprog som HTML. Det kan være det næste skridt efter at have lært HTML — mere om dette i næste kapitel. For nu, lad os se, hvordan CSS forbedrer HTML.

index.html

index.html

index.css

index.css

copy

Videovejledning

Her er linket til den komplette hjemmeside, der blev opbygget i dette kapitel: Julias hjemmeside

Var alt klart?

Hvordan kan vi forbedre det?

Tak for dine kommentarer!

Sektion 5. Kapitel 4

Spørg AI

expand

Spørg AI

ChatGPT

Spørg om hvad som helst eller prøv et af de foreslåede spørgsmål for at starte vores chat

Awesome!

Completion rate improved to 3.13

bookOpbygning af et Komplet Website med HTML

Stryg for at vise menuen

Vi har gennemgået alle de væsentlige HTML-emner og er nu klar til at opbygge et komplet website fra bunden. Lad os oprette et et-sides porteføljewebsite til at fremvise dine projekter og færdigheder.

Du kan enten arbejde selvstændigt eller følge vejledningen nedenfor, hvor vi giver dig trinvise instruktioner og kode til hvert trin.

Trin-for-trin guide

1. Plan for websitets struktur

Vores website vil bestå af flere nøglesektioner:

  1. Header: Denne sektion vil tydeligt vise porteføljeejerens navn og muliggøre navigation på websitet;
  2. Om: Her vil besøgende finde relevant information om ejeren af websitet, hvilket giver indsigt i deres baggrund og ekspertise;
  3. Portefølje: Denne sektion vil fremvise forskellige projekter, hver med projektbilleder, titler, beskrivelser og de anvendte teknologier;
  4. Kontakt: Vi vil inkludere en formular til at indsamle besøgendes oplysninger;
  5. Footer: Foden vil være den afsluttende sektion og indeholde copyright-information samt links til sociale medier, telefonkontakt og e-mailadresse.

2. Strukturér indhold med semantisk HTML

Opret en ny index.html-fil og opsæt den grundlæggende HTML-dokumentstruktur.

index.html

index.html

copy

3. Header-sektion

Byg header med webstedsejerens navn og navigationslinks.

index.html

index.html

copy

4. Om-sektion

Afsnit dedikeret til en kort introduktion og information om ejeren.

index.html

index.html

copy

5. Porteføljeafsnit

I porteføljeafsnittet fokuserer vi på projekterne med beskrivelser og billeder.

index.html

index.html

copy

6. Kontaktsektion

Vi opretter kontaktformularen for at komme i kontakt med ejeren.

index.html

index.html

copy

7. Fodsektion

Afslutningsvis tilføjes copyright-oplysninger og links til sociale medier.

index.html

index.html

copy

Bonus

Lad os forbedre udseendet af vores hjemmeside, ikke kun for søgemaskiner, men også for brugere. Dette kan opnås ved hjælp af CSS, som står for Cascading Style Sheets. Selvom vi ikke har dækket CSS i dette kursus, er det en vigtig del af webdesign.

CSS er et stylesheet-sprog, der gør det muligt at angive præsentation og styling af et dokument skrevet i et markup-sprog som HTML. Det kan være det næste skridt efter at have lært HTML — mere om dette i næste kapitel. For nu, lad os se, hvordan CSS forbedrer HTML.

index.html

index.html

index.css

index.css

copy

Videovejledning

Her er linket til den komplette hjemmeside, der blev opbygget i dette kapitel: Julias hjemmeside

Var alt klart?

Hvordan kan vi forbedre det?

Tak for dine kommentarer!

Sektion 5. Kapitel 4
some-alt