25 HTML päis
HTML dokumendi päises (element <head>) on elemendid, mida veebilehe vaataja reeglina otseselt ei näe. Nende abil määratakse siiski mitmeid veebilehe väljanägemist määravaid parameetreid nagu veebilehe pealkiri, tekstikodeering, stiilid, skriptid jm.
<head> element paigutatakse lehel <html> elemendi ja <body> elemendi vahele.
<!DOCTYPE html> <html> <head> ... </head> <body> ... </body> </html>
Veebilehe pealkiri
Veebilehe pealkiri defineeritakse HTML dokumendi päises elemendiga <title>. See pealkiri paigutatakse veebilehitseja tiitliribale, seda kasutatakse veebilehe salvestamisel lemmikute või järjehoidjate (favorites või bookmarks) hulka.
<title>Rocca al Mare Kool</title>
Selle elemendi toime avaldub veebilehitseja tiitliribal järgmiselt:
NB! Tegemist on veebilehe päise kohustusliku elemendiga!
Kujunduse lisamine
Veebilehtede kujundus lisatakse tänapäeval küll eelkõige väliseid CSS stiililehti kasutades, kuid vajadusel saab CSS-stiili kirjutada ka otse HTML-koodi sisse, selleks kasutatakse elementi <style>.
<style>
body {background-color: lightblue;}
p {color:red;}
</style>
Teiste ressursside linkimine
Väliste ressursside (CSS stiililehed, favicon jms) sidumiseks veebilehega kasutatakse elementi <link>. Tegemist on tühja elemendiga ehk tal puudub lõpumärgend.
<link> elemente võib veebilehe päises olla ka mitu. Elemendiga koos saab kasutada järgnevaid atribuute:
rel– kohustuslik atribuut, mis määrab antud veebilehe ja välise ressursi vahelise seose. Võimalikud väärtused on näiteks stylesheet, alternate, author jt.href− lingitava materjali URL (aadress).media– meediapäring, millise seadmega kuvamiseks on antud ressurss mõeldud. Võimalikud väärtused on näiteks all, print, screen, tv jne.
Stiililehe linkimine
Lisame veebilehele stiililehe nimega stiilileht.css:
<link rel="stylesheet" href="stiililehet.css“>
Favicon
Favicon on pisike ikoon, mida kasutatakse veebilehe tähistamiseks järjehoidjate (bookmarks) ja lemmikute (favorites) nimekirjas. Nimetus tulenebki ingliskeelsest väljendist favorites icon.
Faviconi lisamiseks veebilehele HTML-koodi kasutades tuleb dokumendi päisesse lisada element <link> (sarnaselt css faili linkimisega). Näiteks kõige tavapärasema .ico faili linkimiseks:
<link rel="icon" href="ico_faili_URL">
Kasutades jpg, png või gif faili, tuleks määrata ka failitüüp. Näiteks:
<link rel="icon" type="image/jpg" href="jpg_faili_URL"> <link rel="icon" type="image/png" href="png_faili_URL"> <link rel="icon" type="image/gif" href="gif_faili_URL">
Metaandmed
Metaandmed (Metadata) on info andmete kohta ehk siis veebilehe kontekstis info veebilehe sisu kohta.
Metaandmete lisamiseks kasutatakse HTML dokumendi päises <meta> elementi. Elementi kasutatakse tavaliselt lehe kirjelduse, märksõnade, dokumendi autori, viimati muudetud kuupäev ja muu metainfo täpsustamiseks. Näited metaandmetest:
Tekstikodeering
Erinevates keeltes esineb väga erinevaid tähemärke, mille korrektseks kuvamiseks on vaja määrata, millist kodeeringut kasutades antud veebilehte avada tuleb. Veebilehitsejad püüavad reeglina küll automaatselt tuvastada, millist kodeeringut peaks kasutama kuid autori poolt tehtud määrangud tagavad kindla tulemuse.
Tekstikodeeringu määramiseks tuleb HTML dokumendi päisesse kirjutada metamärgend atribuudiga charset. Soovituslik on kasutada tekstikodeeringut “UTF-8”:
<meta charset="utf-8">
Veebilehe kirjeldus
Veebilehe kohta saab ja on lausa kasulik lisada ka pisut kirjeldavat infot, mida kasutavad näiteks otsingumootorid ja mis muudavad veebilehe kergemini leitavaks. Veebilehe kirjelduse jaoks lisatakse HTML dokumendi päisesse järgmine rida:
<meta name="description" content="Veebilehe lühikirjeldus">
Märksõnad
Veebilehe kohta saab lisada ka märksõnu. Google on märksõnade arvestamist otsingumootorites suurel määral vähendanud kuna neid kasutati kurjalt ära. Pole kindel, kui palju Google otsingumootor märksõnu veebilehtede järjekorda seadmisel veel arvestab, kuid siiski võib nende lisamine veebilehele tuua mõningast kasu:
<meta name="keywords" content="võtmesõna1, võtmesõna2, võtmesõna3, …">
Veebilehe autor
Veel saab metaandmetena määrata veebilehe autori:
<meta name="author" content="Mikk Oad">
Veebilehe värskendamine (refresh)
Saame panna veebilehe ennast automaatselt teatud aja tagant värskendama. Näiteks iga 5 sekundi tagant:
<meta http-equiv="refresh" content="5">
Vaateava
Vaateava ehk viewport võimaldab disaineritel luua kohanduvat (responsive) kujundust vastavalt veebilehe vaatamiseks kasutatava seadme ekraani suurusele. Vaateava annab brauserile juhised, kuidas veebilehe mõõtusid hallata, elemente suurendada/vähendada.
Vaateava defineeritakse järgmise meta-elemendiga veebilehe päises:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Atribuudi content väärtuse sisuks on omakorda vaateava atribuudid:
width=device-width– käsib lehe suuruse seada vastavusse kasutatava seadme ekraaniga;initial-scale=1.0– määrab lehe laadimisel kasutatava esialgse suurendusastme (zoom level).
Skripti lisamine
Javascripti lisamiseks dokumendi päisesesse saame kasutada <script> elementi. Näiteks kuvame kasutajale ühe hüpiakna tekstiga “Tere!”.
<script>
alert("Tere!");
</script>
Vaikeväärtused hüperlinkidele
Juhul, kui soovime oma lehel kasutada relatiivseid aadresse, millede kõigi algus on sarnane, saame aadressi alguse määrata elemendiga <base>.
Kui me näiteks teame, et kõikide veebilehel asuvate piltide aadressid on kujul:
https://ramkool.edu.ee/pildid/banaan.jpg
https://ramkool.edu.ee/pildid/pirn.jpg
https://ramkool.edu.ee/pildid/õun.jpg
….
, saame <base> elemendiga määrata vaikeväärtusena lingi alguse:
<base href="https://ramkool.edu.ee/pildid/">
ning edaspidi piltidele viidata ainult nende nime pidi:
<img src="banaan.jpg" alt="Banaan"> <img src="pirn.jpg" alt="Pirn"> <img src="õun.jpg" alt="Õun">
Kui me aga soovime et kõik lingid meie lehel avaneksid näiteks uues aknas, saame selle jaoks kasutada atribuuti target.
<base target="_blank">
