# Terrarium Projektas 1 dalis: Įvadas į HTML

> Sketchnote sukūrė [Tomomi Imura](https://twitter.com/girlie_mac)
## Klausimai prieš paskaitą
[Klausimai prieš paskaitą](https://ff-quizzes.netlify.app/web/quiz/15)
> Peržiūrėkite vaizdo įrašą
>
> [](https://www.youtube.com/watch?v=1TvxJKBzhyQ)
### Įvadas
HTML, arba HyperText Markup Language, yra interneto „skeletas“. Jei CSS „aprengia“ jūsų HTML, o JavaScript suteikia jam gyvybės, HTML yra jūsų interneto aplikacijos kūnas. HTML sintaksė netgi atspindi šią idėją, nes ji apima „head“, „body“ ir „footer“ žymes.
Šioje pamokoje naudosime HTML, kad sukurtume virtualaus terariumo sąsajos „skeletą“. Jame bus pavadinimas ir trys stulpeliai: dešinysis ir kairysis stulpeliai, kuriuose bus perkeliamieji augalai, ir centrinė zona, kuri bus stiklinis terariumas. Pamokos pabaigoje galėsite matyti augalus stulpeliuose, tačiau sąsaja atrodys šiek tiek keistai; nesijaudinkite, kitame skyriuje pridėsite CSS stilius, kad sąsaja atrodytų geriau.
### Užduotis
Savo kompiuteryje sukurkite aplanką pavadinimu „terrarium“, o jame – failą „index.html“. Tai galite padaryti Visual Studio Code programoje, atidarę naują VS Code langą, paspaudę „open folder“ ir pasirinkę naują aplanką. Explorer skydelyje paspauskite mažą „file“ mygtuką ir sukurkite naują failą:

Arba
Naudokite šias komandas git bash programoje:
* `mkdir terrarium`
* `cd terrarium`
* `touch index.html`
* `code index.html` arba `nano index.html`
> index.html failai nurodo naršyklei, kad tai yra numatytasis failas aplanke; URL, pvz., `https://anysite.com/test`, gali būti sukurtas naudojant aplanko struktūrą, kurioje yra aplankas „test“ su „index.html“ viduje; „index.html“ nebūtinai turi būti rodomas URL.
---
## DocType ir html žymės
Pirmoji HTML failo eilutė yra jo doctype. Gali būti šiek tiek netikėta, kad ši eilutė turi būti pačiame failo viršuje, tačiau ji nurodo senesnėms naršyklėms, kad puslapis turi būti pateikiamas standartiniu režimu, laikantis dabartinės HTML specifikacijos.
> Patarimas: VS Code programoje galite užvesti pelės žymeklį ant žymės ir gauti informaciją apie jos naudojimą iš MDN Reference vadovų.
Antroji eilutė turėtų būti `` žymės atidarymo žymė, o po jos – uždarymo žymė ``. Šios žymės yra jūsų sąsajos šakniniai elementai.
### Užduotis
Pridėkite šias eilutes savo `index.html` failo viršuje:
```HTML
```
✅ Yra keletas skirtingų režimų, kuriuos galima nustatyti naudojant DocType su užklausos eilute: [Quirks Mode ir Standards Mode](https://developer.mozilla.org/docs/Web/HTML/Quirks_Mode_and_Standards_Mode). Šie režimai buvo naudojami palaikyti labai senas naršykles, kurios šiais laikais paprastai nebenaudojamos (pvz., Netscape Navigator 4 ir Internet Explorer 5). Galite laikytis standartinio doctype deklaracijos.
---
## Dokumento 'head'
HTML dokumento 'head' sritis apima svarbią informaciją apie jūsų tinklalapį, dar vadinamą [metaduomenimis](https://developer.mozilla.org/docs/Web/HTML/Element/meta). Mūsų atveju, mes nurodome interneto serveriui, kuriam šis puslapis bus siunčiamas, šiuos keturis dalykus:
- puslapio pavadinimą
- puslapio metaduomenis, įskaitant:
- 'character set', nurodantį, kokia simbolių koduotė naudojama puslapyje
- naršyklės informaciją, įskaitant `x-ua-compatible`, kuris nurodo, kad palaikoma IE=edge naršyklė
- informaciją apie tai, kaip turėtų elgtis viewport, kai jis įkeliamas. Nustatant viewport pradinį mastelį 1, kontroliuojamas priartinimo lygis, kai puslapis pirmą kartą įkeliamas.
### Užduotis
Pridėkite 'head' bloką savo dokumente tarp `` žymių.
```html
Welcome to my Virtual Terrarium
```
✅ Kas nutiktų, jei nustatytumėte viewport meta žymę taip: ``? Skaitykite daugiau apie [viewport](https://developer.mozilla.org/docs/Web/HTML/Viewport_meta_tag).
---
## Dokumento `body`
### HTML žymės
HTML faile pridedate žymes, kad sukurtumėte tinklalapio elementus. Kiekviena žymė paprastai turi atidarymo ir uždarymo žymę, pvz., `
hello
`, kad nurodytumėte pastraipą. Sukurkite savo sąsajos kūną, pridėdami `` žymių rinkinį tarp `` žymių; jūsų žymėjimas dabar atrodo taip:
### Užduotis
```html
Welcome to my Virtual Terrarium
```
Dabar galite pradėti kurti savo puslapį. Paprastai naudojate `
` žymes, kad sukurtumėte atskirus puslapio elementus. Sukursime seriją `
` elementų, kuriuose bus vaizdai.
### Vaizdai
Viena HTML žymė, kuriai nereikia uždarymo žymės, yra `` žymė, nes ji turi `src` elementą, kuriame yra visa informacija, reikalinga puslapiui, kad būtų pateiktas elementas.
Sukurkite aplanką savo aplikacijoje pavadinimu `images` ir jame pridėkite visus vaizdus iš [source code folder](../../../../3-terrarium/solution/images); (yra 14 augalų vaizdų).
### Užduotis
Pridėkite tuos augalų vaizdus į du stulpelius tarp `` žymių:
```html
```
> Pastaba: Spans vs. Divs. Divs laikomi 'blokų' elementais, o Spans – 'eilutės'. Kas nutiktų, jei šiuos divs pakeistumėte į spans?
Su šiuo žymėjimu augalai dabar rodomi ekrane. Tai atrodo gana prastai, nes jie dar nėra stilizuoti naudojant CSS, ir tai padarysime kitoje pamokoje.
Kiekvienas vaizdas turi alt tekstą, kuris pasirodys net jei negalite matyti ar pateikti vaizdo. Tai yra svarbus atributas, kurį reikia įtraukti dėl prieinamumo. Sužinokite daugiau apie prieinamumą būsimose pamokose; kol kas prisiminkite, kad alt atributas pateikia alternatyvią informaciją apie vaizdą, jei vartotojas dėl kokios nors priežasties negali jo matyti (dėl lėto ryšio, klaidos src attribute arba jei vartotojas naudoja ekrano skaitytuvą).
✅ Ar pastebėjote, kad kiekvienas vaizdas turi tą patį alt tekstą? Ar tai gera praktika? Kodėl arba kodėl ne? Ar galite patobulinti šį kodą?
---
## Semantinis žymėjimas
Apskritai, rašant HTML, geriau naudoti prasmingą 'semantiką'. Ką tai reiškia? Tai reiškia, kad naudojate HTML žymes, kad atspindėtumėte duomenų tipą ar sąveiką, kuriai jos buvo sukurtos. Pavyzdžiui, pagrindinis puslapio pavadinimo tekstas turėtų naudoti `
` žymę.
Pridėkite šią eilutę tiesiai po atidarymo `` žyme:
```html
My Terrarium
```
Naudojant semantinį žymėjimą, pvz., antraštėms `
` ir nesutvarkytoms sąrašams `
`, padedama ekrano skaitytuvams naršyti puslapyje. Apskritai, mygtukai turėtų būti rašomi kaip `
` žymės:
```html
```
✅ Nors pridėjote šį žymėjimą ekrane, nieko nematote. Kodėl?
---
## 🚀Iššūkis
HTML yra keletas senų 'laukinės' žymių, kurios vis dar smagu naudoti, nors neturėtumėte naudoti pasenusių žymių, tokių kaip [šios žymės](https://developer.mozilla.org/docs/Web/HTML/Element#Obsolete_and_deprecated_elements) savo žymėjime. Vis dėlto, ar galite naudoti seną `