# Terrarium Projektas 1 dalis: Įvadas į HTML ```mermaid journey title Jūsų HTML mokymosi kelionė section Pagrindai Sukurti HTML failą: 3: Studentas Pridėti DOCTYPE: 4: Studentas Strukturizuoti dokumentą: 5: Studentas section Turinys Pridėti metaduomenis: 4: Studentas Įtraukti paveikslėlius: 5: Studentas Organizuoti maketą: 5: Studentas section Semantika Naudoti tinkamus žymeklius: 4: Studentas Pagerinti prieinamumą: 5: Studentas Sukurti terariumą: 5: Studentas ``` ![Įvadas į HTML](../../../../translated_images/lt/webdev101-html.4389c2067af68e98.webp) > Sketchnote autorius [Tomomi Imura](https://twitter.com/girlie_mac) HTML arba HyperText Markup Language yra kiekvieno jūsų lankyto interneto svetainės pagrindas. Galvokite apie HTML kaip apie skeletą, kuris suteikia struktūrą tinklalapiams – jis apibrėžia, kur dedamas turinys, kaip jis organizuotas ir ką kiekvienas elementas reiškia. Nors CSS vėliau „papuoš“ jūsų HTML spalvomis ir išdėstymu, o JavaScript suteiks jam gyvybės su interaktyvumu, HTML suteikia būtiną struktūrą, dėl kurios visa kita tampa įmanoma. Šios pamokos metu sukursite virtualaus terariumo sąsajos HTML struktūrą. Šis praktinis projektas išmokys pagrindines HTML sąvokas, tuo pačiu kuriant vizualiai patrauklų rezultatą. Išmoksite, kaip organizuoti turinį naudojant semantinius elementus, dirbti su paveikslėliais ir sukurti pagrindą interaktyviai interneto programai. Pamokos pabaigoje turėsite veikiančią HTML puslapį, kuriame bus rodomi augalų paveikslėliai organizuotose stulpeliuose, paruoštus stilizavimui kitoje pamokoje. Nesijaudinkite, jei jis iš pradžių atrodo paprastas – būtent taip ir turi būti HTML prieš pridedant vizualinį apipavidalinimą su CSS. ```mermaid mindmap root((HTML Pagrindai)) Structure DOCTYPE Deklaracija HTML Elementas Head Skyrius Body Turinys Elements Žymės ir Atributai Savarankiškos Žymės Įdėti Elementai Bloko prieš Į eilutę Content Teksto Elementai Nuotraukos Talpyklos (div) Sąrašai Semantics Reikšmingos Žymės Prieinamumas Ekrano Skaitytuvai SEO Privalumai Best Practices Teisingas Įdėjimas Galiojantis Žymėjimas Aprašomasis Alt Tekstas Organizuota Struktūra ``` ## Priešpaskaitinis testas [Priešpaskaitinis testas](https://ff-quizzes.netlify.app/web/quiz/15) > 📺 **Žiūrėkite ir mokykitės**: Peržiūrėkite šį naudingą vaizdo įrašo apžvalgą > > [![HTML pagrindai video](https://img.youtube.com/vi/1TvxJKBzhyQ/0.jpg)](https://www.youtube.com/watch?v=1TvxJKBzhyQ) ## Projekto parengimas Prieš pradėdami rašyti HTML kodą, susikurkite tinkamą darbo vietą savo terariumo projektui. Iš karto sukuriant tvarkingą failų struktūrą yra svarbi įprotis, kuris jums labai pasitarnaus visos interneto svetainių kūrimo kelionės metu. ### Užduotis: Sukurkite savo projekto struktūrą Sukursite atskirą aplanką savo terariumo projektui ir pridėsite pirmąjį HTML failą. Štai du būdai, kuriuos galite naudoti: **Variantas 1: Naudojant Visual Studio Code** 1. Atidarykite Visual Studio Code 2. Spauskite „File“ → „Open Folder“ arba naudokite `Ctrl+K, Ctrl+O` (Windows/Linux) arba `Cmd+K, Cmd+O` (Mac) 3. Sukurkite naują aplanką `terrarium` ir jį pasirinkite 4. „Explorer“ lange spauskite „New File“ ikoną 5. Pavadinkite savo failą `index.html` ![VS Code Explorer rodo naujo failo kūrimą](../../../../translated_images/lt/vs-code-index.e2986cf919471eb9.webp) **Variantas 2: Naudojant terminalo komandas** ```bash mkdir terrarium cd terrarium touch index.html code index.html ``` **Štai ką šios komandos atlieka:** - **Sukuria** naują katalogą `terrarium` jūsų projektui - **Pereina** į terrarium katalogą - **Sukuria** tuščią `index.html` failą - **Atidaro** failą Visual Studio Code redagavimui > 💡 **Pro patarimas**: Failo vardas `index.html` yra ypatingas interneto programavimo srityje. Kai kas nors apsilanko tinklalapyje, naršyklės automatiškai ieško `index.html` kaip numatytojo puslapio. Tai reiškia, kad URL kaip `https://mysite.com/projects/` automatiškai pateiks `index.html` failą iš katalogo `projects`, nereikalaujant nurodyti failo pavadinimo URL. ## HTML dokumento struktūros supratimas Kiekvienas HTML dokumentas turi specifinę struktūrą, kurią naršyklės turi suprasti ir teisingai atvaizduoti. Galvokite apie šią struktūrą kaip apie oficialų laišką – ji turi privalomus elementus tam tikra tvarka, kurie padeda gavėjui (šiuo atveju naršyklei) tinkamai apdoroti turinį. ```mermaid flowchart TD A[""] --> B[""] B --> C[""] C --> D[""] C --> E["<meta charset>"] C --> F["<meta viewport>"] B --> G["<body>"] G --> H["<h1> Antraštė"] G --> I["<div> Dėžutės"] G --> J["<img> Paveikslėliai"] style A fill:#e1f5fe style B fill:#f3e5f5 style C fill:#fff3e0 style G fill:#e8f5e8 ``` Pradėkime pridėdami esminį pamatą, kurio kiekvienas HTML dokumentas reikalauja. ### DOCTYPE deklaracija ir šakninis elementas Pirmos dvi bet kokio HTML failo eilutės veikia kaip dokumento „įžanga“ naršyklei: ```html <!DOCTYPE html> <html></html> ``` **Suprasdami ką daro šis kodas:** - **Deklaruoja** dokumento tipą kaip HTML5 naudojant `<!DOCTYPE html>` - **Sukuria** šakninį `<html>` elementą, kuriame bus visa puslapio turinys - **Nustato** šiuolaikinius interneto standartus teisingam naršyklių atvaizdavimui - **Užtikrina** vienodą rodymą skirtingose naršyklėse ir įrenginiuose > 💡 **VS Code patarimas**: Užveskite pelę ant bet kurio HTML žymės VS Code, kad gautumėte naudingą informaciją iš MDN Web Docs, įskaitant naudojimo pavyzdžius ir naršyklių suderinamumo detales. > 📚 **Sužinokite daugiau**: DOCTYPE deklaracija apsaugo naršykles nuo „quirks režimo“, kuris buvo naudojamas labai senų svetainių palaikymui. Šiuolaikinė interneto kūrimo praktika naudoja paprastą `<!DOCTYPE html>` deklaraciją, kuri užtikrina [standartų atitinkantį atvaizdavimą](https://developer.mozilla.org/docs/Web/HTML/Quirks_Mode_and_Standards_Mode). ### 🔄 **Pedagoginė peržiūra** **Sustokite ir apmąstykite**: Prieš tęsdami, įsitikinkite, kad suprantate: - ✅ Kodėl kiekvienas HTML dokumentas turi DOCTYPE deklaraciją - ✅ Ką talpina šakninis `<html>` elementas - ✅ Kaip ši struktūra padeda naršyklėms teisingai atvaizduoti puslapius **Greitas savitikrinimas**: Ar galite savo žodžiais paaiškinti, ką reiškia „standartų atitinkantis atvaizdavimas“? ## Esminių dokumento metaduomenų pridėjimas `<head>` sekcija HTML dokumente talpina svarbią informaciją, kurios reikia naršyklėms ir paieškos sistemoms, bet kurios lankytojai tiesiogiai nemato puslapyje. Galvokite apie tai kaip apie „užkulisių“ informaciją, kuri padeda jūsų tinklalapiui tinkamai veikti ir taisyklingai atrodyti įvairiuose įrenginiuose bei platformose. Šie metaduomenys nurodo naršyklėms, kaip rodyti jūsų puslapį, kokį simbolių kodavimą naudoti ir kaip valdyti skirtingų ekrano dydžių palaikymą – visa tai būtina norint kurti profesionalias, prieinamas interneto svetaines. ### Užduotis: Pridėkite dokumento antraštę Įterpkite šią `<head>` sekciją tarp atidarančių ir uždarančių `<html>` žymių: ```html <head> <title>Welcome to my Virtual Terrarium ``` **Išskaidant ką daro kiekvienas elementas:** - **Nustato** puslapio pavadinimą, kuris rodomas naršyklės skirtukuose ir paieškos rezultatuose - **Nurodo** UTF-8 simbolių kodavimą, kad tekstas būtų tinkamai rodomas visame pasaulyje - **Užtikrina** suderinamumą su naujesnėmis Internet Explorer versijomis - **Konfigūruoja** reaguojantį dizainą nustatydama viewport dydį pagal įrenginio plotį - **Valdo** pradinį padidinimą, kad turinys būtų rodomas natūraliu dydžiu > 🤔 **Pagalvokite apie tai**: Kas nutiktų, jei nustatytumėte viewport meta žymę taip: ``? Tai priverstų puslapį visada būti 600 pikselių pločio, sulaužydama reaguojantį dizainą! Sužinokite daugiau apie [teisingą viewport konfigūravimą](https://developer.mozilla.org/docs/Web/HTML/Viewport_meta_tag). ## Dokumento turinio kūrimas `` elementas talpina visą matomą jūsų tinklalapio turinį – viską, ką vartotojai matys ir su kuo bendraus. Kol `` sekcija pateikia naršyklei instrukcijas, `` sekcija turi faktinį turinį: tekstą, paveikslėlius, mygtukus ir kitus elementus, kurie sudaro vartotojo sąsają. Pridėkime kūno struktūrą ir supraskime, kaip HTML žymės veikia kartu, kad sukurtų prasmingą turinį. ### HTML žymių struktūros supratimas HTML naudoja porines žymes elementams apibrėžti. Dauguma žymių turi atidarančią `

` ir uždarančią `

` žymes, su turiniu tarp jų: `

Labas, pasauli!

`. Tai sukuria paragrafą su tekstu „Labas, pasauli!“. ### Užduotis: Pridėkite kūno elementą Atnaujinkite savo HTML failą, kad jis turėtų `` elementą: ```html Welcome to my Virtual Terrarium ``` **Štai ką suteikia ši pilna struktūra:** - **Nustato** pagrindinę HTML5 dokumento schemą - **Įtraukia** svarbius metaduomenis teisingam naršyklės atvaizdavimui - **Sukuria** tuščią kūną, pasiruošusį jūsų matomam turiniui - **Laikosi** modernių interneto kūrimo geriausių praktikų Dabar esate pasiruošę pridėti savo terariumo matomus elementus. Naudosime `
` elementus kaip konteinerius skirtingoms turinio dalims organizuoti ir `` elementus augalų paveikslėliams rodyti. ### Darbas su paveikslėliais ir išdėstymo konteineriais Paveikslėliai HTML yra specialūs, nes naudoja „savą uždarymą“ - žymę. Skirtingai nei elementai kaip `

`, kurie apima turinį, `` žymė turi visą informaciją savyje naudodama atributus, tokius kaip `src` – paveikslėlio failo keliui ir `alt` – prieinamumui. Prieš pridėdami paveikslėlius į HTML, turėsite tinkamai susiorganizuoti savo projekto failus sukurdami paveikslėlių aplanką ir pridėdami augalų grafikas. **Pirmiausia, paruoškite savo paveikslėlius:** 1. Sukurkite aplanką `images` savo terariumo projekto aplanko viduje 2. Atsisiųskite augalų paveikslėlius iš [sprendimo aplanko](../../../../3-terrarium/solution/images) (iš viso 14 augalų paveikslėlių) 3. Nukopijuokite visus augalų paveikslėlius į naują `images` aplanką ### Užduotis: Sukurkite augalų rodymo išdėstymą Dabar pridėkite augalų paveikslėlius, organizuotus dviejuose stulpeliuose tarp `` žymių: ```html
plant
plant
plant
plant
plant
plant
plant
plant
plant
plant
plant
plant
plant
plant
``` **Žingsnis po žingsnio, štai kas vyksta šiame kode:** - **Sukuria** pagrindinį puslapio konteinerį su `id="page"`, kuris laiko visą turinį - **Nustato** du stulpelių konteinerius: `left-container` ir `right-container` - **Organizuoja** 7 augalus kairiajame stulpelyje ir 7 augalus dešiniajame stulpelyje - **Įdeda** kiekvieną augalo paveikslėlį į `plant-holder` `div` atskiram pozicionavimui - **Priskiria** nuoseklias klasės pavadinimus CSS stilizavimui kitoje pamokoje - **Pateikia** unikalius ID kiekvienam paveikslėliui interaktyvumui su JavaScript vėliau - **Nurodo** teisingus failų kelius į paveikslėlių aplanką > 🤔 **Apmąstykite tai**: Pastebėkite, kad visų paveikslėlių `alt` tekstas dabar yra „plant“. Tai nėra idealu prieinamumui. Ekrano skaitytuvų vartotojai girdėtų „plant“ pakartotinai 14 kartų nežinodami, kuris konkretus augalas kiekviename paveikslėlyje. Ar galite sugalvoti geresnį, išsamesnį `alt` tekstą kiekvienam paveikslėliui? > 📝 **HTML elementų tipai**: `
` elementai yra „blokinio lygio“ ir užima visą plotį, o `` elementai yra „eilutės lygio“ ir užima tik reikiamą plotį. Ką manote, kas nutiktų, jei pakeistumėte visas `
` žymes į `` žymes? ### 🔄 **Pedagoginė peržiūra** **Struktūros supratimas**: Skirkite akimirką peržiūrėti savo HTML struktūrą: - ✅ Ar galite identifikuoti pagrindinius jūsų išdėstymo konteinerius? - ✅ Ar suprantate, kodėl kiekvienas paveikslėlis turi unikalų ID? - ✅ Kaip apibūdintumėte `plant-holder` divų paskirtį? **Vizualinė apžvalga**: Atidarykite HTML failą naršyklėje. Turėtumėte matyti: - Paprastą augalų paveikslėlių sąrašą - Paveikslėlius suskirstytus dviem stulpeliais - Paprastą, nestilizuotą išdėstymą **Prisiminkite**: Ši paprasta išvaizda yra būtent tai, kaip turi atrodyti HTML prieš CSS stilizavimą! Su šiuo žymėjimu augalai pasirodys ekrane, nors dar neatrodys tvarkingai – tam reikalingas CSS kitame pamokoje! Dabar turite tvirtą HTML pagrindą, kuris tinkamai organizuoja jūsų turinį ir laikosi geriausių prieinamumo praktikų. ## Semantinio HTML naudojimas prieinamumui Semantinis HTML reiškia HTML elementų pasirinkimą pagal jų prasmę ir paskirtį, ne tik pagal išvaizdą. Naudodami semantinį žymėjimą perduodate struktūrą ir turinio prasmę naršyklėms, paieškos sistemoms ir pagalbinėms technologijoms, pvz., ekrano skaitytuvams. ```mermaid flowchart TD A[Reikia pridėti turinį?] --> B{Kokio tipo?} B -->|Pagrindinis antraštė| C["

"] B -->|Paantraštė| D["

,

, ir kt."] B -->|Pastraipa| E["

"] B -->|Sąrašas| F["

    ,
      "] B -->|Naršymas| G["