# Projekt Terrarij, 1. del: Uvod v HTML ![Uvod v HTML](../../../../translated_images/webdev101-html.4389c2067af68e98280c1bde52b6c6269f399eaae3659b7c846018d8a7b0bbd9.sl.png) > Sketchnote avtorja [Tomomi Imura](https://twitter.com/girlie_mac) ## Predhodni kviz [Predhodni kviz](https://ff-quizzes.netlify.app/web/quiz/15) > Oglejte si video > > [![Video o osnovah Git in GitHub](https://img.youtube.com/vi/1TvxJKBzhyQ/0.jpg)](https://www.youtube.com/watch?v=1TvxJKBzhyQ) ### Uvod HTML ali HyperText Markup Language je 'okostje' spleta. Če CSS 'obleče' vaš HTML in JavaScript vdahne življenje, je HTML telo vaše spletne aplikacije. Sintaksa HTML celo odraža to idejo, saj vključuje oznake "head", "body" in "footer". V tej lekciji bomo uporabili HTML za postavitev 'okostja' vmesnika našega virtualnega terarija. Imel bo naslov in tri stolpce: desni in levi stolpec, kjer bodo živele premikajoče se rastline, ter osrednje območje, ki bo dejanski stekleni terarij. Do konca te lekcije boste lahko videli rastline v stolpcih, vendar bo vmesnik videti nekoliko nenavadno; ne skrbite, v naslednjem delu boste dodali CSS sloge, da bo vmesnik videti bolje. ### Naloga Na svojem računalniku ustvarite mapo z imenom 'terrarium' in v njej datoteko z imenom 'index.html'. To lahko storite v Visual Studio Code, potem ko ustvarite mapo terrarium, tako da odprete novo okno VS Code, kliknete 'open folder' in poiščete svojo novo mapo. Kliknite majhen gumb 'file' v raziskovalnem podoknu in ustvarite novo datoteko: ![raziskovalec v VS Code](../../../../translated_images/vs-code-index.e2986cf919471eb984a0afef231380c8b132b000635105f2397bd2754d1b689c.sl.png) Ali Uporabite te ukaze v svojem git bash: * `mkdir terrarium` * `cd terrarium` * `touch index.html` * `code index.html` ali `nano index.html` > Datoteke index.html brskalniku sporočajo, da je to privzeta datoteka v mapi; URL-ji, kot je `https://anysite.com/test`, so lahko zgrajeni z uporabo strukture map, ki vključuje mapo z imenom `test` in datoteko `index.html` v njej; `index.html` ni nujno prikazan v URL-ju. --- ## DocType in oznake html Prva vrstica datoteke HTML je njen doctype. Presenetljivo je, da mora biti ta vrstica na samem vrhu datoteke, vendar pove starejšim brskalnikom, da mora brskalnik stran prikazati v standardnem načinu, ki sledi trenutni specifikaciji HTML. > Nasvet: v VS Code lahko z miško premaknete nad oznako in dobite informacije o njeni uporabi iz referenčnih vodnikov MDN. Druga vrstica mora biti začetna oznaka ``, takoj za njo pa zaključna oznaka ``. Te oznake so korenski elementi vašega vmesnika. ### Naloga Dodajte te vrstice na vrh svoje datoteke `index.html`: ```HTML ``` ✅ Obstaja nekaj različnih načinov, ki jih je mogoče določiti z nastavitvijo DocType z nizom poizvedbe: [Quirks Mode in Standards Mode](https://developer.mozilla.org/docs/Web/HTML/Quirks_Mode_and_Standards_Mode). Ti načini so bili namenjeni podpori resnično starim brskalnikom, ki se danes običajno ne uporabljajo (Netscape Navigator 4 in Internet Explorer 5). Držite se standardne deklaracije doctype. --- ## 'Head' dokumenta Območje 'head' dokumenta HTML vključuje ključne informacije o vaši spletni strani, znane tudi kot [metadata](https://developer.mozilla.org/docs/Web/HTML/Element/meta). V našem primeru strežniku, na katerega bo ta stran poslana za prikaz, sporočimo te štiri stvari: - naslov strani - metapodatke strani, vključno z: - 'character set', ki pove, kakšno kodiranje znakov se uporablja na strani - informacije o brskalniku, vključno z `x-ua-compatible`, ki označuje, da je podprt brskalnik IE=edge - informacije o tem, kako naj se obnaša viewport ob nalaganju. Nastavitev viewporta na začetno merilo 1 nadzoruje raven povečave ob prvem nalaganju strani. ### Naloga Dodajte blok 'head' v svoj dokument med začetne in zaključne oznake ``. ```html Welcome to my Virtual Terrarium ``` ✅ Kaj bi se zgodilo, če bi nastavili meta oznako viewport, kot je ta: ``? Preberite več o [viewportu](https://developer.mozilla.org/docs/Web/HTML/Viewport_meta_tag). --- ## 'Body' dokumenta ### Oznake HTML V HTML dodajate oznake v svojo datoteko .html, da ustvarite elemente spletne strani. Vsaka oznaka običajno ima začetno in zaključeno oznako, kot je ta: `

hello

` za označitev odstavka. Ustvarite telo svojega vmesnika tako, da dodate par oznak `` znotraj para oznak ``; vaša oznaka zdaj izgleda takole: ### Naloga ```html Welcome to my Virtual Terrarium ``` Zdaj lahko začnete graditi svojo stran. Običajno uporabljate oznake `
` za ustvarjanje ločenih elementov na strani. Ustvarili bomo serijo elementov `
`, ki bodo vsebovali slike. ### Slike Ena oznaka HTML, ki ne potrebuje zaključne oznake, je oznaka ``, ker ima element `src`, ki vsebuje vse informacije, ki jih stran potrebuje za prikaz predmeta. Ustvarite mapo v svoji aplikaciji z imenom `images` in vanjo dodajte vse slike iz [mape s kodo](../../../../3-terrarium/solution/images); (na voljo je 14 slik rastlin). ### Naloga Dodajte te slike rastlin v dva stolpca med oznake ``: ```html
plant
plant
plant
plant
plant
plant
plant
plant
plant
plant
plant
plant
plant
plant
``` > Opomba: Spans proti Divs. Divs veljajo za 'blokovne' elemente, Spans pa za 'v vrstici'. Kaj bi se zgodilo, če bi te divs spremenili v spans? S to oznako se rastline zdaj prikažejo na zaslonu. Videti je precej slabo, ker še niso oblikovane s CSS, kar bomo storili v naslednji lekciji. Vsaka slika ima alt besedilo, ki se prikaže, tudi če slike ne morete videti ali prikazati. To je pomemben atribut za vključitev zaradi dostopnosti. Več o dostopnosti boste izvedeli v prihodnjih lekcijah; za zdaj si zapomnite, da atribut alt zagotavlja alternativne informacije za sliko, če uporabnik iz kakršnega koli razloga ne more videti slike (zaradi počasne povezave, napake v atributu src ali če uporabnik uporablja bralnik zaslona). ✅ Ste opazili, da ima vsaka slika enak alt atribut? Ali je to dobra praksa? Zakaj ali zakaj ne? Ali lahko izboljšate to kodo? --- ## Semantična oznaka Na splošno je priporočljivo uporabljati smiselno 'semantiko' pri pisanju HTML. Kaj to pomeni? Pomeni, da uporabljate oznake HTML za predstavitev vrste podatkov ali interakcije, za katero so bile zasnovane. Na primer, glavno besedilo naslova na strani naj uporablja oznako `

`. Dodajte naslednjo vrstico takoj pod začetno oznako ``: ```html

My Terrarium

``` Uporaba semantične oznake, kot je uporaba naslovov `

` in neurejenih seznamov `
    `, pomaga bralnikom zaslona pri navigaciji po strani. Na splošno naj bodo gumbi napisani kot `

`: ```html
``` ✅ Čeprav ste dodali to oznako na zaslon, se ne prikaže ničesar. Zakaj? --- ## 🚀Izziv Obstajajo nekateri 'starejši' elementi v HTML, ki so še vedno zabavni za uporabo, čeprav ne bi smeli uporabljati zastarelih oznak, kot so [te oznake](https://developer.mozilla.org/docs/Web/HTML/Element#Obsolete_and_deprecated_elements) v svoji oznaki. Kljub temu, ali lahko uporabite staro oznako `` za premikanje naslova h1 vodoravno? (če to storite, ne pozabite, da jo kasneje odstranite) ## Zaključni kviz [Zaključni kviz](https://ff-quizzes.netlify.app/web/quiz/16) ## Pregled in samostojno učenje HTML je 'preizkušen in zanesljiv' sistem gradnikov, ki je pomagal zgraditi splet v to, kar je danes. Naučite se nekaj o njegovi zgodovini, tako da preučite stare in nove oznake. Ali lahko ugotovite, zakaj so bile nekatere oznake zastarele in nekatere dodane? Katere oznake bi lahko bile uvedene v prihodnosti? Več o gradnji spletnih mest za splet in mobilne naprave si preberite na [Microsoft Learn](https://docs.microsoft.com/learn/modules/build-simple-website/?WT.mc_id=academic-77807-sagibbon). ## Naloga [Vadite svoj HTML: Zgradite maketo bloga](assignment.md) --- **Omejitev odgovornosti**: Ta dokument je bil preveden z uporabo storitve za prevajanje z umetno inteligenco [Co-op Translator](https://github.com/Azure/co-op-translator). Čeprav si prizadevamo za natančnost, vas prosimo, da upoštevate, da lahko avtomatizirani prevodi vsebujejo napake ali netočnosti. Izvirni dokument v njegovem izvirnem jeziku je treba obravnavati kot avtoritativni vir. Za ključne informacije priporočamo profesionalni človeški prevod. Ne prevzemamo odgovornosti za morebitna nesporazumevanja ali napačne razlage, ki bi nastale zaradi uporabe tega prevoda.