HTMLi kursus #8 – Back-end

HTMLi kursus #8 – Back-end

Eelmine osa: HTMLi kursus #7 – Formid

Tänases HTMLi kursuse osas võtame ette siis HTML back-endi ehk tagaplaani.

Tegelikkuses ei ole HTMLil tagaplaani, sest HTML on ise täielikult front-end ehk esiplaani tehnoloogia, kuid andsin postitusele sellise nime, sest neid elemente, mis on siin lahti seletatud, ei näe kasutaja (veebilehel).

Jätsin välja ka elemendid, mis võib olla kuuluksid HTML “tagaplaani”, kuid kuna neid peaks skriptidega kasutajale nähtavaks tegema, siis otsustasin, et neid tänases postituses ei ole.

Kui sa ei tea, siis back-end on osa veebilehest, mida kasutaja ei näe (erinevad andmebaasid jne) ja front-end on veebilehe osa, mida kasutaja näeb (veebilehe kujundus, interaktiivsus jne).

Nagu ikka on valmis tehtud näidisleht ja konspekt. Näidislehe interaktiivne näide siin ja konspekti interaktiivne näide siin.

Rikun natukene küll JSFiddle eeskirju, aga pole hullu

Siin osas peab kindlasti veebilehte inspekteerima. Kui eelnevates osades oli see olnud tugevalt soovitatud, siis selles osas on inspekteerimine kohustuslik, sest back-end elemente ei ole visuaalselt näha.

Natukene üldisemalt back-end elementidest

Enamus tagaplaanist on elemendi sees

Tavaliselt märgitakse enamus back-end elemendid <head> elemendi sisse. Nii et kui seletan tagaplaani elemente lahti, siis teadke, et need tuleb defineerida <head> elemendis, kui just ei ole teisiti öeldud.

Osi elemente ei saa veel kasutada

Jah, tänases postituses on olemas elemente, mida ma oletan, et sa veel ei oska kasutada, sest nagu ka meediafailide keerulisemas osas, vajavad need elemendid töötamiseks teist tüüpi tehnoloogiaid.

Ma seletan need siiski lahti, et ei tekiks teadmatuse momenti, kui järjest uusi asju juurde õpid.

Kui sa oskad neid kasutada, siis ma ei tea, miks sa seda postitust loed.

Back-end elemendid seletatult

<head></head> – ma seletan ka lahti igaksjuhuks <head>, et sulle meelde tuletada, mida see tegi. Nimelt defineerib <head> dokumendi info – erinevad back-end elemendid ja käsklused. Siia sisse käivad meta-andmed, skriptimis- ja stiilimisfailid, brauseri seadistused jne. <head> elementi ei ole kasutajale näha. Sõna head on inglise keelne sõna, mis tähendab eesti keeles pead.

Näidises kasutasin <head> elementi ikka selleks, et defineerida veebilehe info ja ka panin sinna sisse <title>.

 

<title></title> – võib olla see ei ole päris tagaplaani element, sest seda on teatud juhul kasutajale näha. Nimelt määrab <title> ära dokumendi ehk veebilehe üldise pealkirja. Kasutaja näeb seda brauseri vahelehtedes, kuid kuna see otseselt ei ole seotud veebilehe sisuga, siis tõin selle siiski välja. Ma olen tegelikkuses selle ka HTMLi kursuse teises osas lahti seletanud. Mis veel <title> tagaplaanisust toetab on see, et otsingumootoritele on <title> väga tähtis. HTML dokumendis ei tohi olla rohkem kui üks <title> ja see on kohustuslik <head> lapselement. Sõna title tuleb inglise keelest ja tähendab eesti keeles pealkirja.

Enda veebilehes kasutasin <title> elementi veebilehe pealkirjastamiseks. Vaata brauseri veebilehe vahelehte (seal peaks kirjas olema “Best website everah” 😀 ).

 

<meta /> – isesulguv element; arvatavasti kõige kuulsam back-end element. Nimelt saab <meta> elementi kasutada väga paljude tagaplaani operatsioonide jaoks. Alustades veebilehe kujunduse ja lõpetades SEOga. Tänu atribuutidele on <meta> elemendil palju otstarbeid. Iseenesest on meta või inglise keeles metadata andmed andmete kohta ehk põhiliselt annab <meta> andmeid dokumendi (ehk veebilehe) kohta, mis on tegelikult ju arvutikood. Lühend meta tuleb inglise keelsest sõnast metadata, mis tähendab eesti keeles meta-andmeid.

Nagu ka varem mainisin, on <meta> elemendil üsnagi palju atribuute:

  • charset="tähestiku_kood" – määrab ära, mis tähestiku koodis on terve dokument ehk veebileht. See tähendab seda, et mis tähti veebileht toetab. Näiteks HTML ühtegi täpitähte ei toeta, kuid kasutades charset atribuuti on võimalik täpitähtede toetus lubada. Terve nimekirja tähestiku koodidest võib leida siit. Kõige kasutatum ja soovitatuim on UTF-8, mis toetab väga paljusid (erilisi) tähti ja sümboleid, sealhulgas ka täpitähti.
     
  • content="text" – paneb paika, kuidas kasutatakse <meta> elementi just atribuutidega name ja http-equiv (nendel kahel on mitmeid väärtusi, milleks just <meta> element mõeldud on) ehk määrab ära <meta> sisu. Atribuut content peab olema defineeritud kui atribuudid name või http-equiv on defineeritud. Kui aga ükski kahest eelnimetatud atribuutidest ei ole esindatud, ei tohi ka content kirjas olla.
     
  • http-equiv="content-type | default-style | refresh | Content-Security-Policy" – määrab ära, milleks kasutatakse <meta> elementi, kuid erinevalt name atribuudist on http-equiv rohkem serveripoolsem. Atribuut http-equiv töötab täielikult ainult, siis kui tal endal on väärtus ja atribuudil content. content paneb paika, kuidas <meta> elementi kasutatakse.
    • "content-type" – tema ülesandeks on määrata ära HTMLi MIME-type tihti koos tähestikukoodiga. content väärtuseks on MIME-type, millele järgneb semikooloniga eraldatud tähestikukood ehk <meta> koos "content-type" pannakse kirja järgmiselt: <meta http-equiv="content-type" content="text/html; charset=UTF-8" />. Isiklikult ei soovitaks seda atribuuti kasutada, sest tegemist on juba mahajäänud tehnoloogiaga. "content-type" asemel kasutaksin mina atribuuti charset.
    • "default-style" – paneb paika eelistatud stiilimisfaili veebilehele. content väärtuseks peab olema kas stiilimisfailile viitava <link> elemendi (globaalne) atribuut title või HTMLi sisese stiili (globaalse) atribuudi title väärtus.
    • "refresh" – defineerib ära, millal veebileht ennast ise värskendab või viib kasutaja teisele lehele. content väärtuseks peab olema positiivne number, mis vastab sekunditele. Kui on soov, et kasutaja viiakse mõnele teisele veebilehele, siis tuleb semikooloniga eraldada number ja semikooloni taha panna URL="http://vastav.url".
    • "Content-Security-Policy" – paneb paika soovitud sisu turvalisuse poliitika ehk kuidas (õigemini mis allikatest) veebileht välissisu alla tõmbab. Ma ei lasku praegu siinkohal detailidesse, kuid seda kasutatakse tihti selleks, et hoida ära XSS rünnakuid. Päris korralikud õpetused "Content-Security-Policy" peale leiad siit, siit ning ühe veel siit.
       
  • name="application-name | author | description | generator | keywords | viewport" – paneb paika, milleks <meta> elementi kasutatakse. name atribuuti ei tohiks kasutada, siis kui <meta> elemendil on juba olemas (globaalne) atribuut itemprop, http-equiv või charset. Kõik reaalsed väärtused, nagu http-equiv atribuudiga oli, tuleb edasi anda content atribuudiga (nt. kui name väärtuseks on "author", siis autori nimi tuleb kirja panna content atribuudis; <meta name="author" content="Oliver Paljak" />). Nagu näha, on name atribuudil mitmeid väärtusi:
    • "application-name" – paneb paika äpi nime, mida veebileht esindab (päris äpi nimi tuleb content atribuuti). Kui veebileht ei ole äpp, siis seda väärtust ei tohiks kasutada.
    • "author" – määrab ära kogu veebilehe autori nime.
    • "description" – defineerib veebilehe lühikese kirjelduse, mida kasutatakse palju SEOs. Kirjelduse pikkuseks on soovitavalt 150-160 tähte.
    • "generator" – paneb paika, mis programmi poolt oli HTML kirjutatud. Selle all ei mõelda tekstiredigeerijaid, vaid automaatseid veebiehitamisprogramme (nagu näiteks Adobe Dreamweaver või WordPress).
    • "keywords" – defineerib veebilehe otsinguterminid. Kunagi mängis see väga suurt rolli SEOs, aga tänapäeval otsingumootorid ignoreerivad seda, sest <meta name="keywords" content="erinevad, otsinguterminid, siia" /> elementi kasutati väga valesti. Erinevad terminid tuleb üksteisest komadega eraldada, aga erilist kasu see veebilehele ei too.
    • "viewport" – tegemist on natukene erilisema väärtusega, sest see on tihedalt seotud RWD’ga. Ma räägin sellest täpsemalt allpool.

Näidises kasutasin <meta> elementi mitut moodi: defineerisin ära autori ja kirjelduse. Veel lisasin ka viewport atribuudiga <meta>.

 

<base /> – see element annab kõikidele teistele (hüper)lingi elementidele ette baaslingi. Seda kasutatakse, siis kui paljusid andmeid ja resursse saadakse ühest ja kindlast veebilehest (õigemini veebiserverist). Näiteks kui ma kasutan pildi saamiseks välisallikat (http://mingiteineveebileht.com/lind.jpg), siis ma võin lihtsalt kirjutada “lind.jpg”. See toimib juhul kui minu <base> element on defineeritud koos URLiga http://mingiteineveebileht.com. <base> element tuleks panna <head> elemendis esimeseks, sest siis saavad kõik lingid seda kasutada. Sõna base tuleb inglise keelest ja tähendab eesti keeles baasi.

<base> elemendil on kaks atribuuti:

  • href="URL" – defineerib ära baaslingi, et teised lingid saaksid seda kasutada.
  • target="_blank | _parent | _self | _top" – määrab ära, kuidas peaks linke avama. Täpsemalt leiad selle kohta HTMLi kursuse kolmandas osas (<a> juures)

Enda veebilehes kasutasin <base> elementi defineerimaks linki, kust saab see veebileht kõik oma pildid.

 

<link /> – tema ülesandeks on siduda veebileht mõne välise allikaga või saada mingi resurss (teisest) veebilehest. Kõige tihedamini kasutatakse seda arvatavasti CSSi stiilifaili ühendamiseks veebilehega. <link> elemendil on palju atribuuti, mis loomulikult mõjutavad tema otstarbet. Sõna link on ingliskeelne sõna ja tähendab eesti keeles linki/sidet.

<link> elemendi atribuudid on järgmised:

  • crossorigin="anonymous | use-credentials" – tegemist on atribuudiga, mille ma jätsin korra välja lihtsamast meediafailide postitusest <img> elemendi juures, sest ei pidanud seda tol hetkel väga tähtsaks. Ma ei pea seda ka praegu, kuid ma arvan, et oleks hea, kui sa vähemalt midagi sellest teaksid. Täpselt samamoodi saab kasutada atribuuti crossorigin ka <img> elemendi atribuudina. crossorigin töötab koos tehnoloogiaga CORS, mille ülesandeks on vahetada ja jagada andmeid erinevate veebilehtede vahel turvaliselt. Tegemist on ka autoriõiguste kaitsega. Näiteks, kui lisad <canvas> elementi pildi ja pildil ei ole crossorigin atribuuti, siis sa võid rikkuda brauserite sama allika poliitikat, mis ei luba sul <canvas> elemendis olevat pilti JavaScriptiga lugeda. crossorigin atribuut ongi mõeldud selleks, et see lahendada.
     
  • href="URL" – paneb paika allika, kust veebileht saab vajaliku ressursi. Tihti on selleks CSSi stiilifail.
     
  • hreflang="keele_kood"– määrab ära, mis keeles on antud allikas. Seda kasutataks ainult, siis kui href on defineeritud. Terve nimekirja keelte koodidest võib leida siit.
     
  • type="MIME_type" – defineerib, mis on antud allika failitüüp. Päris suure nimekirja failitüüpidest võid leida siit. Stiilimisfaili tüübiks on "text/css".
     
  • rel="väärtused" – paneb paika, milline on veebilehe suhe/otstarbe välisallikaga. Sellel on väga palju väärtusi:
    • "stylesheet" – link on CSSi stiilifailile viitaja. Seda kasutatakse väga tihti.
    • "alternate" – määrab ära lingi veebilehe alternatiivsele versioonile (nt. prinditav versioon), kuid kasutades "alternate" väärtuse "stylesheet" ees ("alternate stylesheet"), muutub see ka alternatiivseks stiilifailiks – siinkohal peab ka (globaalne) atribuut title <link> elemendil esindatud olema.
    • "author" – defineerib viite veebilehe autorile.
    • "help" – paneb paika abistamisveebilehe (nt. korduma kippuvad küsimused vms) seose algse veebilehega.
    • "icon" – määrab ära ikooni veebilehele. Ikooni on võimalik näha tavaliselt <title> elemendi kõrval brauseri vahelehel.
    • "license" – defineerib autoriõiguse informatsiooni/faili lingi.
    • "next" – paneb paika lingi järgmisele dokumendile, mis on praeguse dokumendiga samas seerias/kategoorias.
    • "prev" – määrab ära lingi eelmisele dokumendile, mis on praeguse dokumendiga samas seerias/kategoorias.
    • "search" – link on mõeldud otsimiseks just praeguses veebilehes.
    • "pingback" – defineerib ära tagasiviite veebilehele. Seda kasutatakse kommenteerimisel. Näiteks keegi kommenteerib seda postitust ja siis ta saab "pingback" atribuudiga postitusele tagasi viidata. Nii saan ka mina teada, et keegi kommenteeris minu postitust.
    • "dns-prefetch" – ütleb brauserile, et selle lingiga tuleb ära teha DNS otsing. Kui allikat vajatakse, siis DNS otsingut enam ei tehta (see on tehtud)
    • "preconnect" – annab brauserile teada, et selle lingiga tuleks avada ühendus (tehakse ära nii DNS kui ka TCP), et kui linki vajatakse, siis laeb brauser kiiremini uue allika ära.
    • "prefetch" – annab brauserile teada, et see link tuleks varukalt meelde jätta, sest seda läheb arvatavasti varsti vaja (vajadusel brauser laeb allika ära kiiresti). Erinevus atribuutide "preconnect" ja "prefetch" vahel on see, et "preconnect" ainult avab ühenduse, kuid "prefetch" ka salvestab allika brauseri vahemällu.
    • "preload" – ütleb brauserile, et erinevalt eelmisest kahest atribuudist, tuleb allikas ära laadida (kuid mitte ära renderdada), sest seda läheb kindlalt vaja. "preload" atribuudiga käib <link> elemendis kaasas veel üks atribuut ja see on as="script | style | image | media | document | font", mis annab täpselt teada, milleks <link> elementi kasutatakse (as atribuudil on veel väärtusi, mis võib leida siit):
      • "script"<link> elementi kasutatakse skripti laadimiseks
      • "style"<link> elementi kasutatakse stiilifaili laadimiseks
      • "media" – pildi/meedia laadimiseks
      • "document" – teise veebilehe (see tähendab <iframe> elemendi) laadimiseks
      • "font" – fondi laadimiseks
    • "prerender" – ütleb brauserile, et antud allikas tuleb avada, salvestada vahemällu, alla laadida ja ka ära renderdada. See tähendab, et brauser tekitab kõrvale antud allikast nagu nähtamatu vahelehe, mis on kasutamisel ülikiiresti olemas. Seda peaks kasutama ainult, siis kui on 100% kindel, et antud allikat kasutatakse.

     Viimase viie atribuudi põhimõte ongi kontrollida brauseri allikate laadimisjärjekorda.
     

  • media="media_query" – seda atribuuti kasutatakse ainult, siis kui rel="stylesheet". See määrab ära ekraani suuruse järgi, millal kasutatakse antud stiilifaili. Täpsemalt tegin media querydest juttu HTMLi kursuse 6.3 osas.
     
  • sizes="KõrgusxLaius | any" – kui media atribuuti kasutati ainult koos rel väärtusega "stylesheet", siis sizes kasutatakse ainult koos rel väärtusega "icon". sizes määrab ära, milline on ikooni oodatav suurus
    • "KõrgusxLaius" – siin pannakse ikooni suurus täpselt paika pikslites (nt. 16x16 jne). Mitme väärtuse korral tuleb need üksteisest tühikuga eraldada (16x16 32x32).
    • "any" – ikooni suurus on muutuv, ei ole kindel. Ikooniks võib näiteks olla SVG pilt, mis on skaleeruv.

Enda veebilehes kasutasin <link> elementi viitamaks veebilehe autorile, ikooni seadmiseks ning ka litsentsi lisamiseks.

Litsentsiks on Unlicense, mis tegelikult vabastab tarkvara litsentsist. Üldiselt veebilehtedel litsentsi pole, sest kõik on põhimõtteliselt avalik, aga näiteks sobis see väga hästi.

 

Nüüd järgnevad elemendid, mida sa võib olla nii pea ei kasuta.

 

<style></style> – selle elemendi ülesandeks on lisada veebilehte sisemine stiil. Kui on soov lisada välisallikast saadud stiilifail, siis tuleb kasutada <link> elementi. <style> sisse käib CSSi kood, millega saab kujundada veebilehte. Ingliskeelne sõna style tähendab eesti keeles stiili.

<style> elemendil on kolm atribuuti:

  • media="media_query" – määrab ekraani suuruse järgi ära, millal kasutatakse antud sisemist stiili.
  • scoped="scoped" – kahendloogika atribuut; paneb paika, et stiilid ainult kehtivad sellele elemendile ja tema lapselementidele, kus <style> defineeriti.
  • type="text/css" – paneb paika, mis failitüüp on <style>. Praegu on ainult lubatud väärtuseks "text/css", sest rohkem võimalusi peale CSSi veebimaailmas ei ole. Õigemini üks on, aga seda kasutatakse üliharva (peaaegu, et välja surnud tehnoloogia).

Näidises kasutasin <style> elementi veebilehe stiilimiseks (inspekteeri <head> elementi).

 

<script></script> – seda kasutatakse, et veebilehte lisada kas väline või sisene skript. Kui skript on veebilehe sisene, siis kirjutatakse skripti sisu <script> elemendi sisse. Tavaliselt on skriptiks JavaScripti kood. Vastasel juhul, kui skript on väline, laetakse see läbi atribuutide veebilehte. Enamus atribuute ongi seotud välisest allikast skripti kätte saamisega. Sõna script on inglise keelne sõna ja tähendab eesti keeles skripti (või ka skriptimiskeelt).

<script> elemendil on üsnagi vähe atribuute:

  • src="URL" – selle abil saab skripti välisallikast kätte.
  • type="MIME_type" – defineerib, mis on antud skripti failitüüp. Tavaliselt on selleks "text/javascript".
  • async="async" – kahendloogika atribuut; defineerib, et skript käivitatakse sama aegselt kui veebilehte laetakse. Seda atribuuti saab kasutada ainult välisallika skriptiga.
  • defer="defer" – kahendloogika atribuut; paneb paika, et skripti saab käivitada ainult siis kui veebileht on ära laetud. Sarnaselt async atribuudiga, saab seda ainult kasutada välisallikaga.
  • charset="tähestiku_kood" – paneb paika, mis on skripti tähestiku kood. Seda kasutatakse harva, sest tavaliselt on kõik skriptid inglise keeles, seega ühtegi täpitähte ega muud kavalat sümbolit ei ole. Töötab ainult välisallikaga.
  • crossorigin="anonymous | use-credentials" – välisallika skripti päritolu atribuut; vaata täpsemalt <link> elemendi atribuutide seletamist.

<script> elementi kasutasin enda veebilehes lausa kolmel korral. Kõik skriptid lisasin enne <body> lõppu. Kaks esimest on JavaScripti teegid ja viimane on siseskript, mis on minu poolt tehtud. See kast liigubki ja vahetab värvi skriptide tõttu (loodetavasti on sul JavaScript lubatud).

Ma räägin skriptide lisamisest veebiehte natukene täpsemalt allpool.

 

<noscript></noscript> – elemendi ülesandeks on näidata alternatiivset sisu kui skriptid ei ole kasutaja brauseris toetatud või lubatud. <noscript> element võib olla nii <head> kui ka <body> elemendis. Kui <noscript> asub <head> sees, siis <noscript> sisuks võivad olla ainult järgnevad elemendid: <link>, <style> ning <meta>. <body> elemendis võib olla <noscript> elemendi sisuks ükskõik, mis element. Fraas noscript tuleb ingliskeelsetest sõnadest no ja script, mis eesti keeles tähendab mitte skripti, kuid targem oleks sellest mõelda kui skript pole toetatud.

<noscript> elementi kasutasin näidises pärast skripte. Kui millegipärast ei ole kasutajal skriptid lubatud või toetatud, siis peaks veebilehele ilmuma tekst “Sul ei ole skriptid lubatud/toetatud!”.

Skriptide lisamisest

Skriptide lisamisel on tegelikult mitu moodust.

Esimene võimalus on lisada skript ükskõik, mis kohta. See tähendab seda, et skript käivitakse koheselt, kui brauser on oma järjekorraga jõudnud <script> elemendi juurde.

Selline moodus võib tekitada üsnagi suuri probleeme, sest kui veebileht pole ilusti laetud ja skript üritab veebilehte muuta, siis tekivad vead.

Teine ja kõige vanem võimalus on lisada skripte enne elemendi <body> lõppu.

See lubab brauseril ilusti veebilehe ära renderdada ja siis alles skriptid käivitada.

Tänapäeval on rohkem kasutust leidnud atribuudid defer ja async.

defer ülesanne on lihtne – oodata, millal veebileht ära laeb (õigemini renderdab) ja siis skript käivitada. Põhimõtteliselt sama, mis <body> lõppu lisamine.

async aga käivitab skriptid paralleelselt, siis kui brauser parajasti veebilehte renderdab.

See kõik on muidu väga tore, aga millal peaks üht või teist kasutama?

Mina soovitaksin kasutada vanamoodsat võimalust (lisa skript <body> lõppu), sest see töötab kõikides (ka vanemates) brauserites ning erilist vahet selle mooduse ja defer atribuudil ei ole.

async atribuuti soovitaks ma ainult kasutada, siis kui skripti käivitamise aeg ei ole tähtis.

Võib olla praegu ei ütle need moodused sulle midagi, kuid arvatavasti varsti saad nendest asjadest aru.

<meta> elemendi atribuut viewport

Ma otsustasin viewport atribuudi eraldi välja tuua, sest tegemist on ünsagi pika ja RWD’ga seotud atribuudiga.

Tavaliselt kasutatakse viewport atribuuti selleks, et panna paika kuidas veebilehte rendertakse nutiseadmetel.

Kui nutiseadme brauser renderdab veebilehte ja viewport ei ole defineeritud, siis on oht, et veebileht rendertakse nagu arvutis.

See tähendab, et kasutaja peab sisse suumima, mis on väga ebamugav.

Et sellist olukorda ei tekiks, siis pannake <meta> koos atribuudiga viewport kirja järgmiselt:

&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot; /&gt;

See on kõige levinum viis, kuid atribuuti viewport on võimalik veel muuta.

Nagu näed kogu <meta> elementi reguleeriv sisu käib atribuudi content sees

Tegelikkuses on sellel <meta> elemendil veel palju omadusi (omadusteks pean ma siin content sees olevaid neid väärtusi, mis on enne võrdusmärki):

  • width – see paneb paika viewport laiuse (viewport on nagu vaateaken, mille läbi kasutaja veebilehte näeb). Väärtuseks võib olla, kas device-width (räägin allpool sellest) või number, mis esindab piksleid.
  • height – vaateakna kõrgus. Väärtuseks võib olla, kas device-height (räägin allpool sellest) või number, mis esindab piksleid.
  • initial-scale – esialgne suumimise väärtus vaateaknale. Kui väärtuseks on 1.0, siis suumi ei ole.
  • minimum-scale – minimaalne suumi väärtus, mis on kasutajale lubatud. Kui väärtuseks on 1.0, siis välja suumimine ei ole lubatud.
  • maximum-scale – maksimaalne suumi väärtus, mis on kasutajale lubatud. Kui väärtuseks on 1.0, siis sisse suumimine ei ole lubatud.
  • user-scalable – kas kasutajal on suumine lubatud. Väärtusteks on vastavalt "yes" (suumimine on lubatud) või "no" (suumimine ei ole lubatud)

Kaks väärtust device-width ja device-height on väärtused, mis vastavad ekraani suurusele. Brauser ise annab nendele reaalsed väärtused.

Kui me kirjutame, et width=device-height, siis see tähendab seda, et vaateakna laius on päris ekraani laiune. Kõrgusega samamoodi.

<meta> elementi koos atribuudi name väärtusega "viewport" kasutasin enda veebilehes pärast teisi <meta> elemente.

 

Jällegi on üks HTMLi kursuse osa läbi võetud.

Nagu ikka on ka täna olemas kodune ülesanne. Tee enda veebileht koos varasemalt õpitud elementidega ja lisa võimalikult palju neid back-end atribuute. Kindlasti inspekteeri minu näited ja vaata konspekti.

Kui sul tekkis küsimusi/probleeme, siis küsi neid julgelt kommenteerides 🙂 !


Senikaua ole tugev ja kohtume juba järgmistes postitustes,

Tähelepanu eest tänades – Oliver Paljak

P.S! Kui oled huvitatud animatsioonilisest veebilehest, siis võta minuga julgelt ühendust AnsiVeebi kodulehel.

Leave a Reply

Your email address will not be published. Required fields are marked *