Kodulehe loomine, 3. kord

29.09.2021
 |  Kommentaare pole

Kommenteerimine

Seekord alustame kommenteerimisest. Koodi sisse on hea lisama märkusi, et hilisemal koodi ülevaatamisel kiiremini leida vajalikku kohta üles.

HTML-keeles tuleb kommentaar kirjutada märkide <!– ja –> vahele:

<!-- siit algab lehe sisu -->
<body>
   <p>See on esimene lõik.</p>
</body>

CSS-keeles tuleb kommentaar kirjutada märkide /* ja */ vahele:

/* lõigu kujundus */
p
{
  /* muudame teksti värvi */
  color: red;
}

Kujundusinfo paigutamine eraldi faili

Kui eelmisel korral tutvustasime kujundusinfo lisamiseks elemendi enda juurde ja HTML-dokumendi päisesse, siis kolmandaks variandiks on kujundusinfo paigutamine eraldi faili.

Selleks on:

  1. vaja luua CSS-fail, Notepad++’is:
    • lisada uus fail:
      • vajutada ikooniribal kõige vasakpoolsemale ikoonile (New) või
      • valida menüüribalt File -> New või
      • vajutada klahvikombinatsiooni Ctrl + N
    • salvestada lisatud fail:
      • valida menüüribalt File -> Save As
      • anda failile, kirjutada see lahtrisse File name – stiilifaili nimeks võib näiteks olla kujundus
      • valida salvestatava faili formaat, Save as type nimekirjast valida Cascade Style Sheets File, mille tulemusena on Notepad++ võimeline eristama CSS-keelt, selle tulemusena saab fail leiandiks css ja faili täielikuks nimeks kujundus.css (NB! Meie näite puhul peaks fail asuma esialgse HTML-failiga samas kataloogis)
      • vajutada Save nupule
    • lisada sellesse faili soovitud kujundusinfo:
    • p
{    
  /* muudame teksti värvi */    
  color: red;

}
  2. lisada esialgse HTML-faili päisesse (märgendite <head> ja </head> vahele link failile kujundus.css:
<head>
  <title>Minu esimene leht</title>
  <link rel="stylesheet" href="kujundus.css">
</head>

kus rel sisaldab infot selle kohta, kuidas lingitud fail on seotud antud HTML-failiga – kujunduse puhul stylesheet, ja href viidet failile

Erinevad värvisüsteemid

HTML-is saab kasutada järgmisi erinevaid värvisüsteeme:

  1. nimetusega – täielik nimekiri nimetustest on leitav siit (NB! neid toetavad kõik kaasaegsemad veebilehitsejad), nt punane tekstivärv – color: red;
  2. RGB (red, green, blue) koodina, kus 3 numbri abil defineeritakse värv, rgb(0,0,0) – esimene tähendab punase osakaalu, teine rohelise osakaalu ja kolmas sinise osakaalu, väärtustega 0 kuni 255 (NB! seda toetavad kõik olulisemad veebilehitsejad), nt punane tekstivärv – color: rgb(255,0,0); (valgele värvile vastab rgb(255,255,255) ja mustale värvile rgb(0,0,0)
  3. HEX (16-süsteemi) koodina, kus 6 numbri abil defineeritakse värv (NB! number on 16-süsteemis – 0-9 ja A-F), #000000 – esimesed kaks numbrit tähendavad punase intensiivust, teised kaks rohelise intensiivsust ja kolmandad kaks sinise intensiivsust (NB! seda toetavad kõik veebilehitsejad), nt punane tekstivärv – color: #FF0000; (valgele värvile vastab #FFFFFF ja mustale värvile #000000)
  4. HSL (hue, saturation, lightness) koodina, kus 3 numbri abil defineeritakse värv hsl(0,0%,0%) – esimene number tähistab asukohta värviringis, väärtused 0-360, kusjuures 0 ja 360 vastavad punasele värvile, teine number küllastust ja kolmas number heledust (NB! seda toetavad kõik olulisemad veebilehitsejad), nt punane tekstivärv – color: hsl(0, 100%, 50%);
  5. HWB (hue, whiteness, blackness) koodina, kus 3 numbri abil defineeritakse värv, hwb(0,0%,0%) – esimene number tähistab asukohta värviringis, väärtused 0-360, kusjuures 0 ja 360 vastavad punasele värvile, teine number tähistab valge värvi osakaalu, väärtusele 0% vastab punane, väärtusele 100% vastab valge värv, kolmas number tähistab musta värvi osakaalu, väärtusele 0% vastab punane, väärtusele 100% vastab must värv (NB! see süsteem on kõige uuema CSSi soovitatav standard, mida HTML veel ei toeta), nt punane tekstivärv – color: hwb(0,0%,0%);
  6. CMYK (cyan, magenta, yellow, black) koodina, kus 4 numbri abil defineeritkase värv, cmyk(0%,0%,0%,0%) – esimene number tähistab tsüaansinise osakaalu, teine number magentapunase osakaalu, kolmas number kollase osakaalu ja neljas number musta osakaalu protsentides (NB! see süsteem on kõige uuema CSSi soovitatav standard, mida HTML veel ei toeta), nt punane taustavärv – color:cmyk(0%, 99%, 100%, 0%);

Läbipaistvus

Kujunduse jaoks on mõnikord tarvis kasutada elementide läbipaistvust. Selles osas on kasu eelnevalt nimetatud värvisüsteemidest:

  1. RGBA (red, green, blue, alpha), kus RGB-koodile lisatakse veel üks väärtus, mis tähistab läbipaistvust – väärtustega 0.0 kuni 1.0, kus 0.0 on täielikult läpipaistev ja 1.0 on täiesti läbipaistmatu, nt täiesti 25% läbipaistev punane tekst – color: rgba(255,0,0,0.25);
  2. HSLA (hue, saturation, lightness, alpha), kus HSL-koodile lisatakse veel üks väärtus, mis tähistab läbipaistvust – väärtustega 0.0 kuni 1.0, kus 0.0 on täielikult läpipaistev ja 1.0 on täiesti läbipaistmatu, nt täiesti 25% läbipaistev punane tekst – color: hsla(0,100%,50%,0.25);

HTML-elementide värvid

Teksti värv:

color: red;

Tausta värv:

backgound-color: red;

Joone värv (lisaks tuleb määratleda joone paksus ja stiil (kas tegu on pideva joone või katkendliku joonega)):

border: 1px solid red;

Kuna HTML-elemente käsitletakse kastidena, siis on võimalik defineerida kastide kõigi külgede jooni selliselt:

border-bottom: 5px solid red;

border-left: 2px dotted blue;

border-top: 1px dashed grey;

border-right: 3px double yellow;