# Terrarium projekt Osa 1: Sissejuhatus HTML-i ```mermaid journey title Sinu HTML õppimisreis section Alus Looge HTML-fail: 3: Student Lisage DOCTYPE: 4: Student Struktureerige dokument: 5: Student section Sisu Lisage metaandmed: 4: Student Lisage pildid: 5: Student Korraldage kujundus: 5: Student section Semantika Kasutage õigeid silte: 4: Student Parandage ligipääsetavust: 5: Student Ehitage terrarium: 5: Student ``` ![Sissejuhatus HTML-i](../../../../translated_images/et/webdev101-html.4389c2067af68e98.webp) > Sketchnote autorilt [Tomomi Imura](https://twitter.com/girlie_mac) HTML ehk hüperteksti märgistuskeel on iga veebilehe aluseks, mida sa kunagi külastanud oled. Mõtle HTML-ile kui skeletile, mis annab veebilehtedele struktuuri – see määrab, kuhu sisu läheb, kuidas see on organiseeritud ja mida iga osa esindab. Kuigi CSS "riietab" su HTML-i hiljem värvide ja paigutustega ning JavaScript toob selle ellu interaktiivsusega, annab HTML vajaliku põhistruktuuri, mis muudab muu võimalikuks. Selles õppetükis lood HTML-struktuuri virtuaalsele terrariumiliidesele. See praktiline projekt õpetab sulle HTML-i põhimõtteid, samal ajal midagi visuaalselt köitvat ehitades. Õpid, kuidas sisu organiseerida semantiliste elementide abil, kuidas töötada piltidega ja luua alused interaktiivsele veebirakendusele. Selle õppetüki lõpuks on sul töötav HTML-leht, mis kuvab taimede pilte organiseeritud veergudes, valmis järgmiseks õppetükiks stiilimiseks. Ära muretse, kui see alguses lihtne välja näeb – just nii peabki HTML enne CSS-i visuaalset lihvi näitama. ```mermaid mindmap root((HTML Põhitõed)) Structure DOCTYPE deklaratsioon HTML element Pea sektsioon Sisu keha Elements Sildid & Atribuudid Isekitsenevad sildid Pesastatud elemendid Blokk vs Rida Content Tekstielemendid Pildid Konteinereid (div) Listid Semantics Mõttelised sildid Juurdepääsetavus Ekraanilugejad SEO eelised Best Practices Õige pesastamine Kehtiv märgend Kirjeldav alt tekst Korraldatud struktuur ``` ## Ettelugemise eelküsimustik [Ettelugemise eelküsimustik](https://ff-quizzes.netlify.app/web/quiz/15) > 📺 **Vaata ja õpi**: Vaata seda abistavat videoülevaadet > > [![HTML põhitõed video](https://img.youtube.com/vi/1TvxJKBzhyQ/0.jpg)](https://www.youtube.com/watch?v=1TvxJKBzhyQ) ## Projekti seadistamine Enne kui sukeldume HTML-i koodi, seadistame korraliku töökeskkonna sinu terrariumiprojektile. Alustades organiseeritud failistruktuuri loomine on oluline harjumus, mis teenib sind hästi kogu veebiarenduse teekonna jooksul. ### Ülesanne: Loo oma projekti struktuur Sa lood spetsiaalse kausta terrariumiprojekti jaoks ja lisad esimese HTML-faili. Siin on kaks lähenemist, mida saad kasutada: **Võimalus 1: Visual Studio Code'i kasutamine** 1. Ava Visual Studio Code 2. Klõpsa "Fail" → "Ava kaust" või kasuta `Ctrl+K, Ctrl+O` (Windows/Linux) või `Cmd+K, Cmd+O` (Mac) 3. Loo uus kaust nimega `terrarium` ja vali see 4. Avastusaknas klõpsa "Uus fail" ikoonile 5. Nyimesta oma fail nimega `index.html` ![VS Code Exploreri ekraanipilt, kus luuakse uus fail](../../../../translated_images/et/vs-code-index.e2986cf919471eb9.webp) **Võimalus 2: Terminalikäskluste kasutamine** ```bash mkdir terrarium cd terrarium touch index.html code index.html ``` **Need käsud teevad järgneva:** - **Loovad** uue kataloogi nimega `terrarium` sinu projekti jaoks - **Sisenemisel** terrariumi kataloogi - **Loovad** tühja `index.html` faili - **Avavad** faili Visual Studio Codes redigeerimiseks > 💡 **Pro nipp**: Failinimi `index.html` on veebiarenduses eriline. Kui keegi külastab veebisaiti, otsivad brauserid automaatselt vaikimisi lehtena faili `index.html`. See tähendab, et URL nagu `https://mysite.com/projects/` serveerib automaatselt `index.html` faili `projects` kaustast ilma failinime täpsustamata. ## HTML dokumendi struktuuri mõistmine Iga HTML dokument järgib spetsiifilist struktuuri, mida brauserid vajavad, et mõista ja korrektselt kuvada. Mõtle sellele struktuurile nagu ametlikule kirjale – tal on vajalikud elemendid kindlas järjekorras, mis aitavad sisutöötlejatel (antud juhul brauseril) sisu õieti töödelda. ```mermaid flowchart TD A[""] --> B[""] B --> C[""] C --> D[""] C --> E["<meta charset>"] C --> F["<meta viewport>"] B --> G["<body>"] G --> H["<h1> Pealkiri"] G --> I["<div> Konteinerid"] G --> J["<img> Pildid"] style A fill:#e1f5fe style B fill:#f3e5f5 style C fill:#fff3e0 style G fill:#e8f5e8 ``` Alustame olulise alusega, mis on vajalik iga HTML dokumendi jaoks. ### DOCTYPE deklaratsioon ja juurelement HTML-faili esimesed kaks rida toimivad dokumendi "sissejuhatusena" brauserile: ```html <!DOCTYPE html> <html></html> ``` **Mida see kood teeb:** - **Deklaratsioon** dokumendi tüübiks on HTML5, kasutades `<!DOCTYPE html>` - **Luuakse** juurelement `<html>`, mis sisaldab kogu lehe sisu - **Kehtestatakse** tänapäevased veebistandardid korrektseks brauseri kuvamiseks - **Tagatakse** ühtlane kuvamine erinevates brauserites ja seadmetes > 💡 **VS Code näpunäide**: Liiguta kursor mõnele HTML-tägile VS Codes, et näha MDN Web Docsi kasulikku infot, sealhulgas kasutusnäiteid ja brauserite ühilduvust. > 📚 **Lisateave**: DOCTYPE deklaratsioon hoiab ära brauserite ülemineku "quirks mode" režiimi, mida kasutati väga vanade veebisaitide toetamiseks. Kaasaegne veebiarendus kasutab lihtsat `<!DOCTYPE html>` deklaratsiooni, mis tagab [standarditele vastava kuvamise](https://developer.mozilla.org/docs/Web/HTML/Quirks_Mode_and_Standards_Mode). ### 🔄 **Pedagoogiline vahekokkuvõte** **Peatu ja mõtiskle**: Enne jätkamist veendu, et saad aru: - ✅ Miks igas HTML dokumendis on vaja DOCTYPE deklaratsiooni - ✅ Mida sisaldab `<html>` juurelement - ✅ Kuidas see struktuur aitab brauseritel lehti õigesti kuvada **Kiire enesehinnang**: Kas suudad oma sõnadega seletada, mida tähendab "standarditele vastav kuvamine"? ## Vajalikud dokumendi metaandmete lisamine HTML dokumendi `<head>` osa sisaldab olulist infot, mida brauserid ja otsingumootorid vajavad, kuid mida külastajad otse lehel ei näe. Mõtle sellele kui "tagatseeni" infole, mis aitab su veebilehel õigesti töötada ja kuvada korrektselt erinevatel seadmetel ja platvormidel. See metaandmestik ütleb brauseritele, kuidas lehte kuvada, millist märgistikku kasutada ja kuidas erinevate ekraanisuurustega toime tulla – kõik see on vajalik professionaalsete ja ligipääsetavate veebilehtede loomiseks. ### Ülesanne: Lisa dokumendi päis Lisa see `<head>` sektsioon oma `<html>` elemendi avamise ja sulgemise vahel: ```html <head> <title>Welcome to my Virtual Terrarium ``` **Mida iga element teeb:** - **Määrab** lehe tiitli, mis ilmub brauseri vahelehtedel ja otsingutulemustes - **Seab** UTF-8 märgistikku tekstide korrektsel kuvamisel kogu maailmas - **Tagab** ühilduvuse Internet Exploreri kaasaegsete versioonidega - **Konfigureerib** reageeriva disaini, seadistades vaateaken (viewport) seadme laiusele - **Juhtcontrolib** esialgset suumimistaset, kuvades sisu loomulikus suuruses > 🤔 **Mõtle sellele**: Mis juhtuks, kui seaksid vaateakna meta-tägi järgmiselt: ``? See sunniks lehte alati olema 600 pikslit lai, rikkudes reageeriva disaini põhimõtteid! Loe rohkem [õige vaateakna seadistuse kohta](https://developer.mozilla.org/docs/Web/HTML/Viewport_meta_tag). ## Dokumendi keha ülesehitamine `` element sisaldab kogu veebilehe nähtavat sisu – kõike, mida kasutajad näevad ja millega suhtlevad. Kui `` osa andis brauserile juhiseid, siis `` sisaldab tegelikku sisu: teksti, pilte, nuppe ja muid elemente, mis loovad kasutajaliidese. Lisame keha struktuuri ja mõistame, kuidas HTML-tägid koos töötavad tähendusliku sisu loomiseks. ### HTML-tägi struktuuri mõistmine HTML kasutab paaristähti elementide määratlemiseks. Enamus täge on avamistäht nagu `

` ja sulgemistäht nagu `

`, mille vahele tuleb sisu: `

Tere, maailm!

`. See loob lõigu, mis sisaldab teksti "Tere, maailm!". ### Ülesanne: Lisa `` element Uuenda oma HTML-faili nii, et see sisaldaks `` elementi: ```html Welcome to my Virtual Terrarium ``` **Selle struktuuriga saad:** - **Määratleda** põhilise HTML5 dokumendi raamistiku - **Lisada** vajalikud metaandmed korrektsel brauseri kuvamisel - **Luua** tühja keha, mis on valmis nähtavaks sisuks - **Järgida** kaasaegseid veebiarenduse parimaid tavasid Nüüd oled valmis lisama oma terrariumi nähtavad elemendid. Kasutame `
` elemente konteineritena erinevate sisuosade organiseerimiseks ja `` elemente taimede piltide kuvamiseks. ### Töötamine piltide ja kujunduskonteineritega Pildid HTML-is on erisugused, kuna nad kasutavad "ise sulguvat" märgistust. Erinevalt elementidest nagu `

`, mis katavad sisu, sisaldab `` märk see info, mida ta vajab, otse tagsis endas, kasutades atribuute nagu `src` pildifaili asukoha jaoks ja `alt` ligipääsetavuse tagamiseks. Enne piltide lisamist HTML-i pead korralikult organiseerima oma projekti failid, luues kausta piltide jaoks ja lisades taimede graafika. **Kõigepealt seadista oma pildid:** 1. Loo kaust nimega `images` oma terrariumi projekti kausta sees 2. Laadi taimepildid alla [lahenduse kaustast](../../../../3-terrarium/solution/images) (kokku 14 taimepilti) 3. Kopeeri kõik taimepildid uude kausta `images` ### Ülesanne: Loo taimede kuvamise paigutus Nüüd lisa taimepildid, organiseerituna kahe veeruna, oma `` siltide vahele: ```html
plant
plant
plant
plant
plant
plant
plant
plant
plant
plant
plant
plant
plant
plant
``` **Järjekorras, mis koodis toimub:** - **Luuakse** põhikonteiner lehel ID-ga `page`, mis hoiab kogu sisu - **Määratakse** kaks veergude konteinerit: `left-container` ja `right-container` - **Organiseeritakse** 7 taime vasakusse ja 7 paremasse veergu - **Pakendatakse** iga taime pilt konteinerisse `plant-holder` individuaalse asukoha jaoks - **Rakendatakse** ühtsed klassinimed CSS stiilimiseks järgmisel õppetunnil - **Määratakse** iga taime pildile unikaalne ID JavaScripti jaoks hiljem - **Sisaldab** korrektseid failiteid, mis viitavad kaustale images > 🤔 **Mõtle sellele**: Pane tähele, et kõigil piltidel on hetkel samasugune alternatiivtekst "plant". See pole ligipääsetavuse seisukohast optimaalne. Ekraanilugerite kasutajad kuuleksid 14 korda "plant" järjest ilma teadmiseta, millisest konkreetsest taimest pilt räägib. Kas suudad välja mõelda paremaid ja kirjeldavamaid alt-tekste iga pildi jaoks? > 📝 **HTML elemendi tüübid**: `
` elemendid on "plokitasemel" ja võtavad kogu olemasoleva laiuse, samas kui `` elemendid on "joonekaaslased" ja võtavad vaid vajaliku laiuse. Mida sa arvad, mis juhtuks, kui selle koodis kõik `
` märgendid vahetaksid ``-ide vastu? ### 🔄 **Pedagoogiline vahekokkuvõte** **Struktuuriteadmised**: Võta hetk, et üle vaadata oma HTML struktuur: - ✅ Kas suudad tuvastada oma paigutuse põhilised konteinerid? - ✅ Kas mõistad, miks igal pildil on unikaalne ID? - ✅ Kuidas kirjeldaksid `plant-holder` div-de eesmärki? **Visuaalne kontroll**: Ava oma HTML fail brauseris. Sa peaksid nägema: - Lihtsat taimede piltide nimekirja - Pildid organiseeritud kaheks veeruks - Lihtsat, stiliseerimata paigutust **Pane tähele**: See lihtne välimus ongi see, kuidas HTML peaks enne CSS stiilimist välja nägema! Selle märgistuse lisamisega ilmuvad taimed ekraanile, kuigi veel pole need lihvitud – seda teeb järgmisel õppetunnil CSS! Praegu on sul kindel HTML-põhi, mis korrektselt organiseerib su sisu ja järgib ligipääsetavuse parimaid tavasid. ## Semantilise HTML kasutamine ligipääsetavuse jaoks Semantiline HTML tähendab HTML elementide valimist nende tähenduse ja eesmärgi põhjal, mitte ainult välimuse järgi. Semantilise märgistuse kasutamisel annad brauseritele, otsingumootoritele ja abitehnoloogiatele (näiteks ekraanilugeritele) teada oma sisu struktuurist ja tähendusest. ```mermaid flowchart TD A[Kas tuleb sisu lisada?] --> B{Milline tüüp?} B -->|Põhitekst| C["

"] B -->|Alapealkiri| D["

,

, jne."] B -->|Paragrahv| E["

"] B -->|Loend| F["

    ,
      "] B -->|Navigatsioon| G["