Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Oppiskele Kokonaisen Verkkosivuston Rakentaminen HTML:llä | Edistynyt HTML
HTML:n Perusteet

bookKokonaisen Verkkosivuston Rakentaminen HTML:llä

Olemme käsitelleet kaikki olennaiset HTML-aiheet ja olemme nyt valmiita rakentamaan kokonaisen verkkosivuston alusta alkaen. Luodaan yksisivuinen portfolio-sivusto, jolla voit esitellä projektejasi ja taitojasi.

Voit työskennellä itsenäisesti tai seurata alla olevaa ohjetta, jossa annamme vaiheittaiset ohjeet ja koodiesimerkit jokaiseen vaiheeseen.

Vaiheittainen opas

1. Verkkosivun rakennesuunnitelma

Sivustomme koostuu useista keskeisistä osioista:

  1. Ylätunniste: Tämä osio esittelee näkyvästi portfolion omistajan nimen ja mahdollistaa navigoinnin sivustolla;
  2. Tietoa: Tässä osiossa kävijät löytävät tietoa sivuston omistajasta, mukaan lukien taustatiedot ja osaaminen;
  3. Portfolio: Tässä osiossa esitellään erilaisia projekteja, joista jokaisessa on projektikuva, otsikko, kuvaus ja käytetyt teknologiat;
  4. Yhteystiedot: Lisäämme lomakkeen kävijätietojen keräämistä varten;
  5. Alatunniste: Alatunniste on sivun viimeinen osio, jossa on tekijänoikeustiedot sekä linkit sosiaalisen median profiileihin, puhelinnumeroon ja sähköpostiosoitteeseen.

2. Jäsennä sisältö semanttisella HTML:llä

Luodaan uusi index.html-tiedosto ja määritetään perus HTML-dokumentin rakenne.

index.html

index.html

copy

3. Ylätunnisteosio

Rakennetaan header, jossa on sivuston omistajan nimi ja navigointilinkit.

index.html

index.html

copy

4. Tietoa-osio

Osio, joka on omistettu lyhyelle esittelylle ja omistajaa koskeville tiedoille.

index.html

index.html

copy

5. Portfolio-osio

Portfolio-osiossa keskitytään projekteihin, joissa on kuvaukset ja kuvat.

index.html

index.html

copy

6. Yhteystieto-osio

Rakennetaan yhteydenottolomake, jolla voi ottaa yhteyttä omistajaan.

index.html

index.html

copy

7. Alatunnisteosio

Lopuksi lisätään tekijänoikeustiedot ja linkit sosiaaliseen mediaan.

index.html

index.html

copy

Bonus

Parannetaan verkkosivustomme ulkoasua paitsi hakukoneita myös käyttäjiä varten. Tämä onnistuu CSS:n eli Cascading Style Sheetsin avulla. Vaikka emme käsitelleet CSS:ää tässä kurssissa, se on tärkeä osa verkkosivujen suunnittelua.

CSS on tyylisivukieli, jonka avulla voidaan määrittää merkintäkielellä, kuten HTML:llä, kirjoitetun dokumentin esitystapa ja ulkoasu. Se voi olla seuraava askel HTML:n oppimisen jälkeen — lisää tästä seuraavassa luvussa. Tarkastellaan nyt, miten CSS parantaa HTML:ää.

index.html

index.html

index.css

index.css

copy

Videotutoriaali

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

Oliko kaikki selvää?

Miten voimme parantaa sitä?

Kiitos palautteestasi!

Osio 5. Luku 4

Kysy tekoälyä

expand

Kysy tekoälyä

ChatGPT

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

Awesome!

Completion rate improved to 3.13

bookKokonaisen Verkkosivuston Rakentaminen HTML:llä

Pyyhkäise näyttääksesi valikon

Olemme käsitelleet kaikki olennaiset HTML-aiheet ja olemme nyt valmiita rakentamaan kokonaisen verkkosivuston alusta alkaen. Luodaan yksisivuinen portfolio-sivusto, jolla voit esitellä projektejasi ja taitojasi.

Voit työskennellä itsenäisesti tai seurata alla olevaa ohjetta, jossa annamme vaiheittaiset ohjeet ja koodiesimerkit jokaiseen vaiheeseen.

Vaiheittainen opas

1. Verkkosivun rakennesuunnitelma

Sivustomme koostuu useista keskeisistä osioista:

  1. Ylätunniste: Tämä osio esittelee näkyvästi portfolion omistajan nimen ja mahdollistaa navigoinnin sivustolla;
  2. Tietoa: Tässä osiossa kävijät löytävät tietoa sivuston omistajasta, mukaan lukien taustatiedot ja osaaminen;
  3. Portfolio: Tässä osiossa esitellään erilaisia projekteja, joista jokaisessa on projektikuva, otsikko, kuvaus ja käytetyt teknologiat;
  4. Yhteystiedot: Lisäämme lomakkeen kävijätietojen keräämistä varten;
  5. Alatunniste: Alatunniste on sivun viimeinen osio, jossa on tekijänoikeustiedot sekä linkit sosiaalisen median profiileihin, puhelinnumeroon ja sähköpostiosoitteeseen.

2. Jäsennä sisältö semanttisella HTML:llä

Luodaan uusi index.html-tiedosto ja määritetään perus HTML-dokumentin rakenne.

index.html

index.html

copy

3. Ylätunnisteosio

Rakennetaan header, jossa on sivuston omistajan nimi ja navigointilinkit.

index.html

index.html

copy

4. Tietoa-osio

Osio, joka on omistettu lyhyelle esittelylle ja omistajaa koskeville tiedoille.

index.html

index.html

copy

5. Portfolio-osio

Portfolio-osiossa keskitytään projekteihin, joissa on kuvaukset ja kuvat.

index.html

index.html

copy

6. Yhteystieto-osio

Rakennetaan yhteydenottolomake, jolla voi ottaa yhteyttä omistajaan.

index.html

index.html

copy

7. Alatunnisteosio

Lopuksi lisätään tekijänoikeustiedot ja linkit sosiaaliseen mediaan.

index.html

index.html

copy

Bonus

Parannetaan verkkosivustomme ulkoasua paitsi hakukoneita myös käyttäjiä varten. Tämä onnistuu CSS:n eli Cascading Style Sheetsin avulla. Vaikka emme käsitelleet CSS:ää tässä kurssissa, se on tärkeä osa verkkosivujen suunnittelua.

CSS on tyylisivukieli, jonka avulla voidaan määrittää merkintäkielellä, kuten HTML:llä, kirjoitetun dokumentin esitystapa ja ulkoasu. Se voi olla seuraava askel HTML:n oppimisen jälkeen — lisää tästä seuraavassa luvussa. Tarkastellaan nyt, miten CSS parantaa HTML:ää.

index.html

index.html

index.css

index.css

copy

Videotutoriaali

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

Oliko kaikki selvää?

Miten voimme parantaa sitä?

Kiitos palautteestasi!

Osio 5. Luku 4
some-alt