Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Lære Bygge et Komplett Nettsted med HTML | Seksjon
HTML-Grunnleggende

bookBygge et Komplett Nettsted med HTML

Sveip for å vise menyen

Vi har nå dekket de viktigste HTML-konseptene og er klare til å bygge et komplett én-sides porteføljenettsted fra bunnen av.

Du kan prøve å bygge det selv, eller følge denne trinnvise veiledningen med kode for hver del.

Trinnvis veiledning

1. Plan for nettstedets struktur

Vår porteføljeside vil inneholde:

  • Topptekst: nettstedets tittel og navigasjonslenker;
  • Om: en kort introduksjon om eieren;
  • Portefølje: prosjekter med bilder, titler og korte beskrivelser;
  • Kontakt: et skjema for besøkende som ønsker å ta kontakt;
  • Bunntekst: opphavsrett og kontakt-/sosiallenker.

2. Strukturér innhold med semantisk HTML

Opprett en ny index.html-fil og legg til den grunnleggende HTML-strukturen med <!DOCTYPE html>, <html>, <head>, og <body>.

index.html

index.html

copy

3. Toppseksjon

Legg til en <header> med eierens navn og en <nav> som inneholder lenker som hopper til seksjonene Om, Portefølje og Kontakt.

index.html

index.html

copy

4. Om-seksjon

Opprett en <section id="about"> med en overskrift og et kort avsnitt som beskriver eieren.

index.html

index.html

copy

5. Portefølje-seksjon

Legg til en <section id="portfolio"> som viser prosjekter med bilder, titler og korte beskrivelser.

index.html

index.html

copy

6. Kontaktseksjon

Opprett en <section id="contact"> med et enkelt kontaktskjema som samler inn navn, e-post og melding.

index.html

index.html

copy

7. Bunnseksjon

Avslutt siden med en <footer> som inkluderer opphavsrettstekst og lenker til sosiale medier, telefon og e-post.

index.html

index.html

copy

Bonus

For å gjøre siden mer visuelt tiltalende, kan vi koble til en CSS-fil og style HTML-en vår. CSS styrer farger, mellomrom, skrifttyper og oppsett, og hjelper samme struktur til å se langt mer profesjonell ut.

Sammenlign hvordan siden ser ut med kun HTML, og hvordan den endres når grunnleggende CSS-stiler legges til.

index.html

index.html

index.css

index.css

copy

Her er lenken til det komplette nettstedet som ble bygget i dette kapittelet: Julias nettsted

Hva du har bygget

Du har laget en komplett nettside ved hjelp av HTML med struktur, innhold og grunnleggende elementer.

Hva som mangler

Siden din fungerer, men den ser veldig enkel ut. HTML definerer struktur, ikke design.

Hva er neste steg

For å style siden din, trenger du CSS for å legge til farger, layout og visuell finish.

Alt var klart?

Hvordan kan vi forbedre det?

Takk for tilbakemeldingene dine!

Seksjon 1. Kapittel 24

Spør AI

expand

Spør AI

ChatGPT

Spør om hva du vil, eller prøv ett av de foreslåtte spørsmålene for å starte chatten vår

Seksjon 1. Kapittel 24
some-alt