Lære Bygge Et Komplett Nettsted Med HTML

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 å lage det selv, eller følge denne trinnvise veiledningen med kode for hver del.

Trinnvis veiledning

1. Plan for nettstedstruktur

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

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

4. Om-seksjon

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

index.html

5. Portefølje-seksjon

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

index.html

6. Kontaktseksjon

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

index.html

7. Bunnseksjon

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

index.html

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 den samme strukturen til å se langt mer profesjonell ut.

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

index.html

index.css

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

Alt var klart?

Takk for tilbakemeldingene dine!

Seksjon 5. Kapittel 4

Spør AI

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

Suggested prompts:

Can you show me the full HTML code for the portfolio website?

What are some tips for customizing the sections for my own portfolio?

How can I add more projects or sections to the website?

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 å lage det selv, eller følge denne trinnvise veiledningen med kode for hver del.

Trinnvis veiledning

1. Plan for nettstedstruktur

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

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

4. Om-seksjon

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

index.html

5. Portefølje-seksjon

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

index.html

6. Kontaktseksjon

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

index.html

7. Bunnseksjon

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

index.html

Bonus

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

index.html

index.css

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

Alt var klart?

Takk for tilbakemeldingene dine!

Seksjon 5. Kapittel 4