Lære Opbygning af Et Komplet Website med HTML

Vi har nu gennemgået de centrale HTML-koncepter og er klar til at opbygge et komplet et-sides porteføljewebsite fra bunden.

Du kan prøve at bygge det selv eller følge denne trin-for-trin guide med kode til hver del.

Trin-for-trin guide

1. Plan for websitets struktur

Vores porteføljeside vil indeholde:

Header: sidetitel og navigationslinks;
Om: en kort introduktion om ejeren;
Portefølje: projekter med billeder, titler og korte beskrivelser;
Kontakt: en formular, så besøgende kan tage kontakt;
Footer: ophavsret og kontakt-/sociale links.

2. Strukturér indhold med semantisk HTML

Opret en ny index.html-fil og tilføj den grundlæggende HTML-struktur med <!DOCTYPE html>, <html>, <head> og <body>.

index.html

3. Header-sektion

Tilføj en <header> med ejerens navn og en <nav>, der indeholder links, som springer til sektionerne Om, Portfolio og Kontakt.

index.html

4. Om-sektion

Opret en <section id="about"> med en overskrift og et kort afsnit, der beskriver ejeren.

index.html

5. Portfolioafsnit

Tilføj en <section id="portfolio">, der viser projekter med billeder, titler og korte beskrivelser.

index.html

6. Kontaktsektion

Opret en <section id="contact"> med en simpel kontaktformular, der indsamler navn, e-mail og besked.

index.html

7. Fodsektion

Afslut siden med en <footer>, der indeholder ophavsretstekst samt links til sociale medier, telefon og e-mail.

index.html

Bonus

For at gøre siden mere visuelt tiltalende kan vi tilknytte en CSS-fil og style vores HTML. CSS styrer farver, afstande, skrifttyper og layout, hvilket hjælper med at få den samme struktur til at se langt mere gennemarbejdet ud.

Sammenlign indtil videre blot, hvordan siden ser ud med ren HTML, og hvordan den ændrer sig, når grundlæggende CSS-stilarter anvendes.

index.html

index.css

Her er linket til det komplette website, der blev bygget i dette kapitel: Julias Website

Var alt klart?

Tak for dine kommentarer!

Sektion 5. Kapitel 4

Spørg AI

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

Stryg for at vise menuen

Vi har nu gennemgået de centrale HTML-koncepter og er klar til at opbygge et komplet et-sides porteføljewebsite fra bunden.

Du kan prøve at bygge det selv eller følge denne trin-for-trin guide med kode til hver del.

Trin-for-trin guide

1. Plan for websitets struktur

Vores porteføljeside vil indeholde:

Header: sidetitel og navigationslinks;
Om: en kort introduktion om ejeren;
Portefølje: projekter med billeder, titler og korte beskrivelser;
Kontakt: en formular, så besøgende kan tage kontakt;
Footer: ophavsret og kontakt-/sociale links.

2. Strukturér indhold med semantisk HTML

Opret en ny index.html-fil og tilføj den grundlæggende HTML-struktur med <!DOCTYPE html>, <html>, <head> og <body>.

index.html

3. Header-sektion

Tilføj en <header> med ejerens navn og en <nav>, der indeholder links, som springer til sektionerne Om, Portfolio og Kontakt.

index.html

4. Om-sektion

Opret en <section id="about"> med en overskrift og et kort afsnit, der beskriver ejeren.

index.html

5. Portfolioafsnit

Tilføj en <section id="portfolio">, der viser projekter med billeder, titler og korte beskrivelser.

index.html

6. Kontaktsektion

Opret en <section id="contact"> med en simpel kontaktformular, der indsamler navn, e-mail og besked.

index.html

7. Fodsektion

Afslut siden med en <footer>, der indeholder ophavsretstekst samt links til sociale medier, telefon og e-mail.

index.html

Bonus

Sammenlign indtil videre blot, hvordan siden ser ud med ren HTML, og hvordan den ændrer sig, når grundlæggende CSS-stilarter anvendes.

index.html

index.css

Her er linket til det komplette website, der blev bygget i dette kapitel: Julias Website

Var alt klart?

Tak for dine kommentarer!

Sektion 5. Kapitel 4