## Tehtävä
Luo HTML-dokumentti Flutter-kehitysyhtiön verkkosivustolle käyttämällä <u>semanttisia HTML-elementtejä</u> parantaaksesi saavutettavuutta ja hakukoneoptimointia.

Varmista, että jokainen verkkosivun osa on kääritty asianmukaisiin semanttisiin HTML-elementteihin (`<header>`, `<nav>`, `<section>`, `<footer>`).

PCFET0NUWVBFIGh0bWw+CjxodG1sPgogIDxoZWFkPgogICAgPHRpdGxlPkZsdXR0ZXIgTWFpbiBDb21wYW55PC90aXRsZT4KICAgIDxtZXRhIGNoYXJzZXQ9IlVURi04IiAvPgogIDwvaGVhZD4KICA8Ym9keT4KICAgIDwhLS0gU3RlcCAxOiBQcm92aWRlIHRoZSBjb3JyZWN0IHRhZyBmb3IgdGhlIGhlYWRlciBzZWN0aW9uIC0tPgogICAgPF9fX19fPgogICAgICA8aDE+Rmx1dHRlciBNYWluIENvbXBhbnk8L2gxPgogICAgICA8IS0tIFN0ZXAgMjogUHJvdmlkZSB0aGUgY29ycmVjdCB0YWcgZm9yIG5hdmlnYXRpb24gbWVudSAtLT4KICAgICAgPF9fX19fPgogICAgICAgIDx1bD4KICAgICAgICAgIDxsaT48YSBocmVmPSIjIj5BYm91dCBVczwvYT48L2xpPgogICAgICAgICAgPGxpPjxhIGhyZWY9IiMiPlNlcnZpY2VzPC9hPjwvbGk+CiAgICAgICAgPC91bD4KICAgICAgPC9fX19fXz4KICAgIDwvX19fX18+CgogICAgPCEtLSBTdGVwIDM6IFByb3ZpZGUgdGhlIGNvcnJlY3QgdGFnIGZvciB0aGUgJ2Fib3V0IHVzJyBzZWN0aW9uIC0tPgogICAgPF9fX19fPgogICAgICA8aDI+QWJvdXQgVXM8L2gyPgogICAgICA8cD4KICAgICAgICBXZWxjb21lIHRvIEZsdXR0ZXIgTWFpbiBDb21wYW55LCB5b3VyIHByZW1pZXIgZGVzdGluYXRpb24gZm9yCiAgICAgICAgcHJvZmVzc2lvbmFsIEZsdXR0ZXIgYXBwIGRldmVsb3BtZW50IHNlcnZpY2VzLgogICAgICA8L3A+CiAgICA8L19fX19fPgoKICAgIDwhLS0gU3RlcCAzOiBQcm92aWRlIHRoZSBjb3JyZWN0IHRhZyBmb3IgdGhlICdzZXJ2aWNlcycgc2VjdGlvbiAtLT4KICAgIDxfX19fXz4KICAgICAgPGgyPk91ciBTZXJ2aWNlczwvaDI+CiAgICAgIDx1bD4KICAgICAgICA8bGk+Rmx1dHRlciBBcHAgRGV2ZWxvcG1lbnQ8L2xpPgogICAgICAgIDxsaT5Dcm9zcy1QbGF0Zm9ybSBEZXZlbG9wbWVudDwvbGk+CiAgICAgICAgPGxpPlVJL1VYIERlc2lnbjwvbGk+CiAgICAgICAgPGxpPlRlc3RpbmcgYW5kIFF1YWxpdHkgQXNzdXJhbmNlPC9saT4KICAgICAgPC91bD4KICAgIDwvX19fX18+CgogICAgPCEtLSBTdGVwIDQ6IFByb3ZpZGUgdGhlIGNvcnJlY3QgdGFnIGZvciB0aGUgZm9vdGVyIHNlY3Rpb24gLS0+CiAgICA8X19fX18+CiAgICAgIDxwPiZjb3B5OyAyMDI0IEZsdXR0ZXIgTWFpbiBDb21wYW55LiBBbGwgUmlnaHRzIFJlc2VydmVkLjwvcD4KICAgICAgPHVsPgogICAgICAgIDxsaT48YSBocmVmPSIjIj5Qcml2YWN5IFBvbGljeTwvYT48L2xpPgogICAgICAgIDxsaT48YSBocmVmPSIjIj5UZXJtcyBvZiBTZXJ2aWNlPC9hPjwvbGk+CiAgICAgICAgPGxpPjxhIGhyZWY9IiMiPkNvbnRhY3QgVXM8L2E+PC9saT4KICAgICAgPC91bD4KICAgIDwvX19fX18+CiAgPC9ib2R5Pgo8L2h0bWw+

## Vihje
- Vaihe 1: Käytä `header`-elementtiä pääbrändäyselementtien ja navigoinnin sisältämiseen.
- Vaihe 2: Hyödynnä `nav`-elementtiä navigointivalikkoa varten.
- Vaihe 3: Kääri jokainen erillinen sisältöosio `section`-elementtiin.
- Vaihe 4: `footer`-elementin tulisi sisältää tekijänoikeustiedot, käytäntölinkit ja yhteystiedot.

PCFET0NUWVBFIGh0bWw+CjxodG1sPgogIDxoZWFkPgogICAgPHRpdGxlPkZsdXR0ZXIgTWFpbiBDb21wYW55PC90aXRsZT4KICAgIDxtZXRhIGNoYXJzZXQ9IlVURi04IiAvPgogIDwvaGVhZD4KICA8Ym9keT4KICAgIDwhLS0gU3RlcCAxOiBQcm92aWRlIHRoZSBjb3JyZWN0IHRhZyBmb3IgdGhlIGhlYWRlciBzZWN0aW9uIC0tPgogICAgPGhlYWRlcj4KICAgICAgPGgxPkZsdXR0ZXIgTWFpbiBDb21wYW55PC9oMT4KICAgICAgPCEtLSBTdGVwIDI6IFByb3ZpZGUgdGhlIGNvcnJlY3QgdGFnIGZvciBuYXZpZ2F0aW9uIG1lbnUgLS0+CiAgICAgIDxuYXY+CiAgICAgICAgPHVsPgogICAgICAgICAgPGxpPjxhIGhyZWY9IiMiPkFib3V0IFVzPC9hPjwvbGk+CiAgICAgICAgICA8bGk+PGEgaHJlZj0iIyI+U2VydmljZXM8L2E+PC9saT4KICAgICAgICA8L3VsPgogICAgICA8L25hdj4KICAgIDwvaGVhZGVyPgoKICAgIDwhLS0gU3RlcCAzOiBQcm92aWRlIHRoZSBjb3JyZWN0IHRhZyBmb3IgdGhlICdhYm91dCB1cycgc2VjdGlvbiAtLT4KICAgIDxzZWN0aW9uPgogICAgICA8aDI+QWJvdXQgVXM8L2gyPgogICAgICA8cD4KICAgICAgICBXZWxjb21lIHRvIEZsdXR0ZXIgTWFpbiBDb21wYW55LCB5b3VyIHByZW1pZXIgZGVzdGluYXRpb24gZm9yCiAgICAgICAgcHJvZmVzc2lvbmFsIEZsdXR0ZXIgYXBwIGRldmVsb3BtZW50IHNlcnZpY2VzLgogICAgICA8L3A+CiAgICA8L3NlY3Rpb24+CgogICAgPCEtLSBTdGVwIDM6IFByb3ZpZGUgdGhlIGNvcnJlY3QgdGFnIGZvciB0aGUgJ3NlcnZpY2VzJyBzZWN0aW9uIC0tPgogICAgPHNlY3Rpb24+CiAgICAgIDxoMj5PdXIgU2VydmljZXM8L2gyPgogICAgICA8dWw+CiAgICAgICAgPGxpPkZsdXR0ZXIgQXBwIERldmVsb3BtZW50PC9saT4KICAgICAgICA8bGk+Q3Jvc3MtUGxhdGZvcm0gRGV2ZWxvcG1lbnQ8L2xpPgogICAgICAgIDxsaT5VSS9VWCBEZXNpZ248L2xpPgogICAgICAgIDxsaT5UZXN0aW5nIGFuZCBRdWFsaXR5IEFzc3VyYW5jZTwvbGk+CiAgICAgIDwvdWw+CiAgICA8L3NlY3Rpb24+CgogICAgPCEtLSBTdGVwIDQ6IFByb3ZpZGUgdGhlIGNvcnJlY3QgdGFnIGZvciB0aGUgZm9vdGVyIHNlY3Rpb24gLS0+CiAgICA8Zm9vdGVyPgogICAgICA8cD4mY29weTsgMjAyNCBGbHV0dGVyIE1haW4gQ29tcGFueS4gQWxsIFJpZ2h0cyBSZXNlcnZlZC48L3A+CiAgICAgIDx1bD4KICAgICAgICA8bGk+PGEgaHJlZj0iIyI+UHJpdmFjeSBQb2xpY3k8L2E+PC9saT4KICAgICAgICA8bGk+PGEgaHJlZj0iIyI+VGVybXMgb2YgU2VydmljZTwvYT48L2xpPgogICAgICAgIDxsaT48YSBocmVmPSIjIj5Db250YWN0IFVzPC9hPjwvbGk+CiAgICAgIDwvdWw+CiAgICA8L2Zvb3Rlcj4KICA8L2JvZHk+CjwvaHRtbD4=

Hallitse HTML:n perusteet rakentaaksesi hyvin jäsenneltyä ja saavutettavaa verkkosisältöä. Opi jäsentämään dokumentteja käyttämällä tageja, elementtejä ja attribuutteja. Käsittele sujuvasti tekstiä, listoja, kuvia, ääntä ja videota rikastuttaaksesi verkkosivuja. Luo taulukoita järjestetyn datan esittämiseen ja lomakkeita käyttäjän syötteiden ja vuorovaikutuksen mahdollistamiseen. Tutustu semanttiseen HTML:ään saavutettavuuden parantamiseksi ja rakenna kokonaisia, toiminnallisia verkkosivustorakenteita alusta alkaen.

Saat johdannon verkkoon ja HTML:ään, mukaan lukien tunnisteiden, elementtien ja attribuuttien merkitys. Tutustu HTML-dokumentin perusrakenteeseen ja verkon lyhyeen historiaan.

Hallitse HTML-merkkauskielen perusteet keskittyen erityistekstin muotoiluun ja luetteloihin sekä niiden merkitykseen sisällön jäsentelyssä HTML-dokumentissa. Syvenny HTML-dokumentin rakenteen yksityiskohtiin ja kehitä tekstin merkkaustaitoja.

Hyödynnä visuaalisen ja auditiivisen sisällön mahdollisuudet web-kehityksessä oppimalla liittämään kuvat, videot ja äänielementit saumattomasti HTML-dokumentteihin. Tutustu erilaisten mediaformaattien sisällyttämisen yksityiskohtiin.

Perehdy tietojen esittämisen ja käyttäjävuorovaikutuksen yksityiskohtiin kattavan HTML-taulukoiden ja lomakkeiden käsittelyn avulla, mukaan lukien taulukkorakenteet, lomakkeiden luominen ja syötekentät. Saavuta osaaminen lomakkeiden syötekenttien toteuttamisessa ja attribuuttien hyödyntämisessä toiminnallisuuden parantamiseksi.

Nosta HTML-osaamisesi uudelle tasolle syventymällä semanttisiin HTML-elementteihin, mikä mahdollistaa hyvin jäsennellyn ja saavutettavan verkkosisällön luomisen. Aloita ensimmäisen verkkosivustosi rakentaminen ja hyödynnä uutta osaamistasi ideoidesi toteuttamiseen.

Haaste: Semanttisten Elementtien Toteuttaminen

Tehtävä

Vihje

Awesome!

Haaste: Semanttisten Elementtien Toteuttaminen

Tehtävä

Vihje