Summary  
This chapter covers using HTML5 semantic elements to organize a document’s structure into a header, main section with multiple articles (each containing headings, paragraphs, images, and categories), and a footer.  

General domain of usage  
Building a blog website

## Tavoite
Ensiksi luodaan verkkosivustomme perusrakenne. Haluamme lisätä kolme artikkelia. Jokaisessa artikkelissa tulee olla artikkelin otsikko, sisältöä sekä kuva.

## Mahdollinen kehotus
Luo HTML-dokumentin rakenne blogisivustolle, joka mahdollistaa kolmen artikkelin julkaisemisen. Jokaisen artikkelin tulee sisältää:
- Otsikko (heading);
- Useita tekstikappaleita;
- Kuva;
- Aihe tai kategoria.

HTML-rakenteen tulee olla selkeä ja looginen, hyödyntäen HTML-tunnisteita ja semanttista merkitystä asianmukaisesti.

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxtZXRhIGNoYXJzZXQ9IlVURi04IiAvPgogICAgPG1ldGEgbmFtZT0idmlld3BvcnQiIGNvbnRlbnQ9IndpZHRoPWRldmljZS13aWR0aCwgaW5pdGlhbC1zY2FsZT0xLjAiIC8+CiAgICA8dGl0bGU+TXkgQmxvZzwvdGl0bGU+CiAgPC9oZWFkPgogIDxib2R5PgogICAgPGhlYWRlcj4KICAgICAgPGgxPldlbGNvbWUgdG8gTXkgQmxvZzwvaDE+CiAgICA8L2hlYWRlcj4KCiAgICA8bWFpbj4KICAgICAgPGFydGljbGU+CiAgICAgICAgPGgyPkFydGljbGUgMTogRXhwbG9yaW5nIE5hdHVyZTwvaDI+CiAgICAgICAgPHA+CiAgICAgICAgICBMb3JlbSBpcHN1bSBkb2xvciBzaXQgYW1ldCwgY29uc2VjdGV0dXIgYWRpcGlzY2luZyBlbGl0LiBTZWQgZXVpc21vZCwgdG9ydG9yIG5vbgogICAgICAgICAgdWxsYW1jb3JwZXIgY29tbW9kbywganVzdG8gbGliZXJvIG1heGltdXMgcHVydXMsIHZlbCBwdWx2aW5hciB0dXJwaXMgcXVhbSB2aXRhZSBtaS4gTnVsbGFtCiAgICAgICAgICBhdWN0b3IsIHRvcnRvciBpZCBzYWdpdHRpcyBmZXJtZW50dW0sIGxlbyBsYWN1cyB2ZW5lbmF0aXMgdG9ydG9yLCBhdCB0cmlzdGlxdWUgbGVvIG1hZ25hCiAgICAgICAgICBpbiBsb3JlbS4KICAgICAgICA8L3A+CiAgICAgICAgPGltZyBzcmM9Im5hdHVyZS5qcGciIGFsdD0iTmF0dXJlIEltYWdlIiAvPgogICAgICAgIDxwPkNhdGVnb3J5OiBOYXR1cmU8L3A+CiAgICAgIDwvYXJ0aWNsZT4KCiAgICAgIDxhcnRpY2xlPgogICAgICAgIDxoMj5BcnRpY2xlIDI6IENvb2tpbmcgQWR2ZW50dXJlczwvaDI+CiAgICAgICAgPHA+CiAgICAgICAgICBQaGFzZWxsdXMgcnV0cnVtIHRpbmNpZHVudCBzYXBpZW4sIHNlZCB2ZXN0aWJ1bHVtIHZlbGl0IHZlaGljdWxhIG5lYy4gU2VkIHBoYXJldHJhIGR1aSBpbgogICAgICAgICAgZmVybWVudHVtIHNvZGFsZXMuIFBlbGxlbnRlc3F1ZSBoYWJpdGFudCBtb3JiaSB0cmlzdGlxdWUgc2VuZWN0dXMgZXQgbmV0dXMgZXQgbWFsZXN1YWRhCiAgICAgICAgICBmYW1lcyBhYyB0dXJwaXMgZWdlc3Rhcy4KICAgICAgICA8L3A+CiAgICAgICAgPGltZyBzcmM9ImNvb2tpbmcuanBnIiBhbHQ9IkNvb2tpbmcgSW1hZ2UiIC8+CiAgICAgICAgPHA+Q2F0ZWdvcnk6IENvb2tpbmc8L3A+CiAgICAgIDwvYXJ0aWNsZT4KCiAgICAgIDxhcnRpY2xlPgogICAgICAgIDxoMj5BcnRpY2xlIDM6IFRyYXZlbGluZyBBcm91bmQgdGhlIFdvcmxkPC9oMj4KICAgICAgICA8cD4KICAgICAgICAgIE51bGxhbSBlZmZpY2l0dXIgbGFjdXMgbmVjIHVybmEgZnJpbmdpbGxhLCB1dCB2ZW5lbmF0aXMgdG9ydG9yIGxhY2luaWEuIER1aXMgdml0YWUgbWF1cmlzCiAgICAgICAgICBzZWQgbWkgc2VtcGVyIGFsaXF1ZXQuIEFlbmVhbiB2ZXN0aWJ1bHVtIGxpYmVybyBlZ2V0IG5pYmggbWFsZXN1YWRhLCBpZCBsdWN0dXMgbGliZXJvCiAgICAgICAgICBwaGFyZXRyYS4gRnVzY2UgYXVjdG9yIG1hdXJpcyBzZWQgdHJpc3RpcXVlIGVmZmljaXR1ci4KICAgICAgICA8L3A+CiAgICAgICAgPGltZyBzcmM9InRyYXZlbC5qcGciIGFsdD0iVHJhdmVsIEltYWdlIiAvPgogICAgICAgIDxwPkNhdGVnb3J5OiBUcmF2ZWw8L3A+CiAgICAgIDwvYXJ0aWNsZT4KICAgIDwvbWFpbj4KCiAgICA8Zm9vdGVyPgogICAgICA8cD4mY29weTsgMjAyNCBNeSBCbG9nLiBBbGwgcmlnaHRzIHJlc2VydmVkLjwvcD4KICAgIDwvZm9vdGVyPgogIDwvYm9keT4KPC9odG1sPg==

Jos haluat perehtyä tarkemmin koodiin ja ymmärtää sen toiminnallisuutta, käytä alla olevaa <span style="padding: 0 10px; border: 2px solid lightgray; border-radius: 10px; color: black; background-color: #fff;">Koodin kuvaus</span> -painiketta. Jos tämä ei ole tarpeen, voit siirtyä suoraan seuraavaan lukuun.

Opi web-kehityksen perusteet hyödyntäen tekoälytyökaluja, kuten ChatGPT:tä. Ymmärrä HTML:n, CSS:n ja JavaScriptin roolit verkkosivustojen rakentamisessa sekä kuinka tekoäly voi nopeuttaa koodaustasi ja lisätä luovuuttasi. Harjoittele tehokkaiden kehotteiden laatimista ja koodin tuottamista ChatGPT:n avulla. Rakenna kokonainen blogisivusto alusta alkaen tekoälyn avustamana ja hanki käytännön taitoja omia web-projektiasi varten.

Johdatus web-kehityksen keskeisiin käsitteisiin ja teknologioihin, mukaan lukien tekoälyn rooli nykyaikaisessa koodauksessa. Tämä osio luo perustan oppimispolullesi käsittelemällä web-kehityksen perusteita sekä sitä, miten tekoäly parantaa tuottavuutta, luovuutta ja tehokkuutta koodauksessa.

Opi keskeiset web-kehitysteknologiat. Syvenny HTML:n, CSS:n ja JavaScriptin perusteisiin, selvittäen niiden yksittäiset toiminnot ja yhteinen rooli digitaalisen ympäristön muovaamisessa.

Tutustu ChatGPT:n mahdollisuuksiin ja sen tehokkaaseen hyödyntämiseen. Saat tietoa kehotteiden laatimisesta ja koodin käsittelystä ChatGPT:n avulla. Lopuksi käytännön vinkkejä ChatGPT:n hyödyntämiseen eri sovelluksissa.

Rakenna blogisivusto. Luo täydellinen ja toimiva blogisivusto alusta alkaen hyödyntäen erilaisia web-kehitystekniikoita ChatGPT:n avulla.

HTML-Dokumentin Rakenteen Luominen

Tavoite

Mahdollinen kehotus

Tulokset

Verkkosivuston tila