Lära Bygga en Komplett Webbplats med HTML

Vi har nu gått igenom de grundläggande HTML-koncepten och är redo att bygga en komplett en-sidig portföljsajt från grunden.

Du kan försöka bygga den själv eller följa denna steg-för-steg-guide med kod för varje del.

Steg-för-steg-guide

1. Webbplatsstrukturplan

Vår portföljsida kommer att innehålla:

Header: webbplatsens titel och navigationslänkar;
Om: en kort introduktion om ägaren;
Portfolio: projekt med bilder, titlar och korta beskrivningar;
Kontakt: ett formulär för besökare att ta kontakt;
Footer: upphovsrätt och kontakt-/sociala länkar.

2. Strukturera innehåll med semantisk HTML

Skapa en ny index.html-fil och lägg till den grundläggande HTML-strukturen med <!DOCTYPE html>, <html>, <head> och <body>.

index.html

3. Header-sektion

Lägg till en <header> med ägarens namn och en <nav> som innehåller länkar som hoppar till sektionerna Om, Portfolio och Kontakt.

index.html

4. Om-sektion

Skapa en <section id="about"> med en rubrik och ett kort stycke som beskriver ägaren.

index.html

5. Portföljsektion

Lägg till en <section id="portfolio"> som listar projekt med bilder, titlar och korta beskrivningar.

index.html

6. Kontaktsektion

Skapa en <section id="contact"> med ett enkelt kontaktformulär som samlar in namn, e-postadress och meddelande.

index.html

7. Sidfot

Avsluta sidan med en <footer> som innehåller upphovsrättstext samt länkar till sociala medier, telefon och e-post.

index.html

Bonus

För att göra sidan mer visuellt tilltalande kan vi koppla en CSS-fil och styla vår HTML. CSS styr färger, avstånd, typsnitt och layout, vilket hjälper samma struktur att se mycket mer professionell ut.

Jämför nu hur sidan ser ut med enbart HTML och hur den förändras när grundläggande CSS-stilar tillämpas.

index.html

index.css

Här är länken till den kompletta webbplatsen som byggdes i detta kapitel: Julias webbplats

Var allt tydligt?

Tack för dina kommentarer!

Avsnitt 5. Kapitel 4

Fråga AI

Fråga vad du vill eller prova någon av de föreslagna frågorna för att starta vårt samtal

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?

Svep för att visa menyn

Vi har nu gått igenom de grundläggande HTML-koncepten och är redo att bygga en komplett en-sidig portföljsajt från grunden.

Du kan försöka bygga den själv eller följa denna steg-för-steg-guide med kod för varje del.

Steg-för-steg-guide

1. Webbplatsstrukturplan

Vår portföljsida kommer att innehålla:

Header: webbplatsens titel och navigationslänkar;
Om: en kort introduktion om ägaren;
Portfolio: projekt med bilder, titlar och korta beskrivningar;
Kontakt: ett formulär för besökare att ta kontakt;
Footer: upphovsrätt och kontakt-/sociala länkar.

2. Strukturera innehåll med semantisk HTML

Skapa en ny index.html-fil och lägg till den grundläggande HTML-strukturen med <!DOCTYPE html>, <html>, <head> och <body>.

index.html

3. Header-sektion

Lägg till en <header> med ägarens namn och en <nav> som innehåller länkar som hoppar till sektionerna Om, Portfolio och Kontakt.

index.html

4. Om-sektion

Skapa en <section id="about"> med en rubrik och ett kort stycke som beskriver ägaren.

index.html

5. Portföljsektion

Lägg till en <section id="portfolio"> som listar projekt med bilder, titlar och korta beskrivningar.

index.html

6. Kontaktsektion

Skapa en <section id="contact"> med ett enkelt kontaktformulär som samlar in namn, e-postadress och meddelande.

index.html

7. Sidfot

Avsluta sidan med en <footer> som innehåller upphovsrättstext samt länkar till sociala medier, telefon och e-post.

index.html

Bonus

Jämför nu hur sidan ser ut med enbart HTML och hur den förändras när grundläggande CSS-stilar tillämpas.

index.html

index.css

Här är länken till den kompletta webbplatsen som byggdes i detta kapitel: Julias webbplats

Var allt tydligt?

Tack för dina kommentarer!

Avsnitt 5. Kapitel 4