`-tageja luodaksesi erillisiä elementtejä sivulle. Luomme sarjan `

`-elementtejä, jotka sisältävät kuvia. ### Kuvat Yksi HTML-tagi, joka ei tarvitse sulkutagia, on ``-tagi, koska sillä on `src`-elementti, joka sisältää kaiken tarvittavan tiedon kohteen renderöimiseksi. Luo sovellukseesi kansio nimeltä `images` ja lisää siihen kaikki kuvat [lähdekoodikansiosta](../../../../3-terrarium/solution/images); (kansiossa on 14 kasvikuvan tiedostoa). ### Tehtävä Lisää nämä kasvikuvat kahteen sarakkeeseen ``-tagien väliin: ```html

``` > Huom: Spanit vs. Divit. Divit ovat 'block'-elementtejä, ja Spanit ovat 'inline'-elementtejä. Mitä tapahtuisi, jos muuttaisit nämä divit spaneiksi? Tällä merkinnällä kasvit näkyvät nyt näytöllä. Se näyttää melko huonolta, koska niitä ei ole vielä tyylitelty CSS:llä, mutta teemme sen seuraavassa oppitunnissa. Jokaisella kuvalla on alt-teksti, joka näkyy, vaikka et voisi nähdä tai renderöidä kuvaa. Tämä on tärkeä ominaisuus saavutettavuuden kannalta. Opit lisää saavutettavuudesta tulevissa oppitunneissa; toistaiseksi muista, että alt-attribuutti tarjoaa vaihtoehtoista tietoa kuvasta, jos käyttäjä ei jostain syystä voi nähdä sitä (hitaan yhteyden, src-attribuutin virheen tai ruudunlukijan käytön vuoksi). ✅ Huomasitko, että jokaisella kuvalla on sama alt-tagi? Onko tämä hyvä käytäntö? Miksi tai miksi ei? Voitko parantaa tätä koodia? --- ## Semanttinen merkintä Yleisesti ottaen on suositeltavaa käyttää merkityksellistä 'semantiikkaa' HTML:ää kirjoittaessa. Mitä tämä tarkoittaa? Se tarkoittaa, että käytät HTML-tageja edustamaan sitä tietotyyppiä tai vuorovaikutusta, jota varten ne on suunniteltu. Esimerkiksi sivun pääotsikon tekstin tulisi käyttää `

`-tagia. Lisää seuraava rivi heti avaus-``-tagisi alle: ```html

My Terrarium

``` Semanttisen merkinnän käyttäminen, kuten otsikoiden merkitseminen `

`-tageilla ja järjestämättömien listojen renderöiminen `
`-tageilla, auttaa ruudunlukijoita navigoimaan sivulla. Yleisesti ottaen painikkeet tulisi kirjoittaa `

`-tagin yläpuolelle: ```html

``` ✅ Vaikka lisäsit tämän merkinnän näytölle, et näe mitään renderöityvän. Miksi? --- ## 🚀Haaste HTML:ssä on joitakin vanhoja "villikortti"-tageja, joita on edelleen hauska kokeilla, vaikka sinun ei pitäisi käyttää vanhentuneita tageja, kuten [näitä tageja](https://developer.mozilla.org/docs/Web/HTML/Element#Obsolete_and_deprecated_elements), merkinnässäsi. Voitko käyttää vanhaa ``-tagia saadaksesi h1-otsikon vierimään vaakasuunnassa? (jos teet niin, muista poistaa se myöhemmin) ## Jälkikysely [Jälkikysely](https://ff-quizzes.netlify.app/web/quiz/16) ## Kertaus ja itseopiskelu HTML on "hyväksi havaittu" rakennusjärjestelmä, joka on auttanut rakentamaan verkon sellaiseksi kuin se on tänään. Opi hieman sen historiasta tutkimalla vanhoja ja uusia tageja. Voitko selvittää, miksi jotkut tagit poistettiin käytöstä ja toiset lisättiin? Mitä tageja voisi tulla tulevaisuudessa? Lisätietoja verkkosivustojen ja mobiililaitteille tarkoitettujen sivustojen rakentamisesta löydät [Microsoft Learnista](https://docs.microsoft.com/learn/modules/build-simple-website/?WT.mc_id=academic-77807-sagibbon). ## Tehtävä [Harjoittele HTML:ää: Rakenna blogin mallipohja](assignment.md) --- **Vastuuvapauslauseke**: Tämä asiakirja on käännetty käyttämällä tekoälypohjaista käännöspalvelua [Co-op Translator](https://github.com/Azure/co-op-translator). Vaikka pyrimme tarkkuuteen, huomioithan, että automaattiset käännökset voivat sisältää virheitä tai epätarkkuuksia. Alkuperäistä asiakirjaa sen alkuperäisellä kielellä tulee pitää ensisijaisena lähteenä. Kriittisen tiedon osalta suositellaan ammattimaista ihmiskääntäjää. Emme ole vastuussa tämän käännöksen käytöstä johtuvista väärinkäsityksistä tai virhetulkinnoista.