Oppiskele Kokonaisen Verkkosivuston Rakentaminen HTML:llä

Olemme nyt käyneet läpi HTML:n keskeiset käsitteet ja olemme valmiita rakentamaan kokonaisen yhden sivun portfolioverkkosivuston alusta alkaen.

Voit kokeilla rakentaa sen itse tai seurata tätä vaiheittaista opasta, jossa on koodi jokaiseen osaan.

Vaiheittainen opas

1. Verkkosivun rakennesuunnitelma

Portfolio-sivumme sisältää:

Ylätunniste: sivuston otsikko ja navigointilinkit;
Tietoa: lyhyt esittely sivuston omistajasta;
Portfolio: projektit kuvineen, otsikoineen ja lyhyine kuvauksineen;
Yhteystiedot: lomake vierailijoiden yhteydenottoa varten;
Alatunniste: tekijänoikeus sekä yhteys-/sosiaalisen median linkit.

2. Rakenna sisältö semanttisella HTML:llä

Luo uusi index.html-tiedosto ja lisää perusrakenne käyttäen <!DOCTYPE html>, <html>, <head> ja <body>.

index.html

3. Ylätunnisteosio

Lisää <header>, jossa on omistajan nimi, sekä <nav>, joka sisältää linkit, jotka siirtyvät Tietoa, Portfolio ja Yhteystiedot -osioihin.

index.html

4. Tietoa-osio

Luo <section id="about">, jossa on otsikko ja lyhyt kappale omistajan esittelyä varten.

index.html

5. Portfolio-osio

Lisää <section id="portfolio">, joka luettelee projektit kuvien, otsikoiden ja lyhyiden kuvausten kanssa.

index.html

6. Yhteystieto-osio

Luo <section id="contact">, jossa on yksinkertainen yhteydenottolomake, joka kerää nimen, sähköpostin ja viestin.

index.html

7. Alatunnisteosio

Päätä sivu käyttämällä <footer>-elementtiä, joka sisältää tekijänoikeustekstin sekä linkit sosiaaliseen mediaan, puhelimeen ja sähköpostiin.

index.html

Bonus

Sivun ulkoasun parantamiseksi voidaan liittää CSS-tiedosto ja muotoilla HTML-koodia. CSS hallitsee värejä, välistyksiä, fontteja ja asettelua, mikä auttaa samaa rakennetta näyttämään huomattavasti viimeistellymmältä.

Tällä kertaa vertaile vain, miltä sivu näyttää pelkällä HTML:llä ja miten se muuttuu, kun perus CSS-tyylit lisätään.

index.html

index.css

Tässä on linkki kokonaiseen verkkosivustoon, joka rakennettiin tässä luvussa: Julian verkkosivusto

Oliko kaikki selvää?

Kiitos palautteestasi!

Osio 5. Luku 4

Kysy tekoälyä

Kysy mitä tahansa tai kokeile jotakin ehdotetuista kysymyksistä aloittaaksesi keskustelumme

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?

Pyyhkäise näyttääksesi valikon

Olemme nyt käyneet läpi HTML:n keskeiset käsitteet ja olemme valmiita rakentamaan kokonaisen yhden sivun portfolioverkkosivuston alusta alkaen.

Voit kokeilla rakentaa sen itse tai seurata tätä vaiheittaista opasta, jossa on koodi jokaiseen osaan.

Vaiheittainen opas

1. Verkkosivun rakennesuunnitelma

Portfolio-sivumme sisältää:

Ylätunniste: sivuston otsikko ja navigointilinkit;
Tietoa: lyhyt esittely sivuston omistajasta;
Portfolio: projektit kuvineen, otsikoineen ja lyhyine kuvauksineen;
Yhteystiedot: lomake vierailijoiden yhteydenottoa varten;
Alatunniste: tekijänoikeus sekä yhteys-/sosiaalisen median linkit.

2. Rakenna sisältö semanttisella HTML:llä

Luo uusi index.html-tiedosto ja lisää perusrakenne käyttäen <!DOCTYPE html>, <html>, <head> ja <body>.

index.html

3. Ylätunnisteosio

Lisää <header>, jossa on omistajan nimi, sekä <nav>, joka sisältää linkit, jotka siirtyvät Tietoa, Portfolio ja Yhteystiedot -osioihin.

index.html

4. Tietoa-osio

Luo <section id="about">, jossa on otsikko ja lyhyt kappale omistajan esittelyä varten.

index.html

5. Portfolio-osio

Lisää <section id="portfolio">, joka luettelee projektit kuvien, otsikoiden ja lyhyiden kuvausten kanssa.

index.html

6. Yhteystieto-osio

Luo <section id="contact">, jossa on yksinkertainen yhteydenottolomake, joka kerää nimen, sähköpostin ja viestin.

index.html

7. Alatunnisteosio

Päätä sivu käyttämällä <footer>-elementtiä, joka sisältää tekijänoikeustekstin sekä linkit sosiaaliseen mediaan, puhelimeen ja sähköpostiin.

index.html

Bonus

Tällä kertaa vertaile vain, miltä sivu näyttää pelkällä HTML:llä ja miten se muuttuu, kun perus CSS-tyylit lisätään.

index.html

index.css

Tässä on linkki kokonaiseen verkkosivustoon, joka rakennettiin tässä luvussa: Julian verkkosivusto

Oliko kaikki selvää?

Kiitos palautteestasi!

Osio 5. Luku 4