HTMLi kursuse 8. osa konspekt - Back-end

Postituse enda võid leida siit

Mis asi on back-end?

Back-end (eesti keeles tagaplaan) on osa veebilehest, mida kasutaja ei näe. Tihtipeale käivad back-endis metaandmed ja veebilehele tähtsad resurssid.

Enamus tagaplaani elemente defineeritakse <head> elemendis

Back-end elemendid

<head> element

<head> tähistab veebilehe "päise". Siia sisse käivad enamus back-end elemendid ehk meta-andmed, skriptimis- ja stiilimisfailid, brauseri seadistused jne.

Täna erilisi näiteid ei ole, sest <head> ja ka teisi tagaplaani elemente pole kasutajale näha.

Kasutus:
<head>
 <!--Tagaplaani elemendid-->
</head>

<title> element

<title> defineerib veebilehe üldise pealkirja. Seda näeb brauseri vahelehtedel.

Kasutus:
<head>
 <title>Veebilehe pealkiri<title>
</head>

Näide:
Vaata selle veebilehe vahelehte :)

<base> element

<base /> paneb paika baaslingi teistele (hüper)linkidele. Nii saavad teised lingid resurssid lihtsamini kätte (kasutavad <base> elemendis defineeritud baaslinki)

Näide:
Inspekteeri seda elementi ja siis klikka sellel

Kasutus:
<head>
 <base href="http://lorempixel.com/400/200/" target="_blank" />
</head>

<meta> element

<meta /> esindab meta-andmeid (andmed andmete kohta). <meta> sõltub väga palju atribuuditest.

Kasutus:
<head>
 <!--Näide tähestiku koodi paika panekust-->
 <meta charset="utf-8" />
</head>

Näide:
Ilma ülemise <meta> elemendita sa praegu ei saaks lugeda täpitähti.

<link> element

<link /> defineerib veebilehele ära kasulikud resurssid või viited. Paljud atribuudid mõjutavad selle otstarbet.

Kasutus:
<head>
 <!--Näide veebilehe autorile viitmasisest-->
 <link rel="author" href="http://oliverpaljak.com" hreflang="et" type="text/html" />
</head>

<style> element

<style> defineerib veebilehes ära sisemise stiili. Välisallikaga seotud stiilifaili lisamiseks kasuta <link> elementi

Kasutus:
<head>
 <style>
  /*Siin käivad erinevad CSSi stiilid*/
   h1{
   color: red;
   }
 </style>
</head>

Näide:
Mina olen punane

<script> element

<script> defineerib veebilehes ära sisemise või välimise skripti. Kui tegemist on välise skriptiga, siis mängivad atribuudid suurt rolli.

<script> on soovitatav panna <body> elemendi lõppu

Kasutus:
Sisemine skript:
 <script type="text/javascript">
  //Siin on JavaScripti kood
  document.write("Hello World");
 </script>
Väline skript:
 <script src="https://code.jquery.com/jquery-3.2.1.min.js" type="text/javascript"></script>

Näide:

<noscript> element

<noscript> elementi kasutatakse, siis kui kasutajal ei ole millegipärast skriptid lubatud või teotatud.

<noscript> sisu näidatakse <script> elemendi asemel.

Kasutus:
<noscript>
 <!--Siin sees käib veatekst, kui skriptid ei ole lubatud/teotatud-->
 <p>Kahjuks ei saanud skripti käivitada</p>
<noscript>

Näide:
Kui sul ei ole skriptid lubatud/toetatud, siis sa peaksid nägema kasti sees olevat teksti.