Õppeveeb

Sissejuhatus

HTML on veebilehtede alustala, olles vastutav lehe struktuuri ja sisu eest. CSS aga annab lehele stiili ja kujunduse, muutes selle visuaalselt atraktiivseks. Koos moodustavad need kaks keelt tänapäeva veebi nurgakivid. Siin on lihtne juhend HTML-i ja CSS-i kohta, mis on hea spikker ka tulevikus.

Teooria

HTML – veebilehe struktuur

HTML ehk HyperText Markup Language on märgistuskeel, mida kasutatakse veebilehtede loomiseks. See koosneb elementidest, mis kirjeldavad lehe sisu. Iga element algab avatagiga (<tag>) ja lõpeb lõputagiga (<tag>). Mõned elemendid on isesulguvad, näiteks <img> ja <input>.

Põhilised HTML-elemendid:

  • <!DOCTYPE html>: Määrab dokumendi tüübiks HTML5. See on alati esimene rida.
  • <html>: Kogu lehe juurelement.
  • <head>: Sisaldab metaandmeid, nagu lehe pealkiri (<title>) ja lingid stiilifailidele.
  • <body>: Sisaldab kogu nähtavat sisu.
  • <h1> kuni <h6>: Pealkirjad, <h1> on kõige olulisem.
  • <p>: Lõik ehk paragrahv.
  • <a>: Hüperlink. Oluline omadus on href, mis määrab lingi sihtkoha.
  • <img>: Pilt. Olulised omadused on src (pildi asukoht) ja alt (alternatiivne tekst).
  • <ul> ja <ol>: Loendid. <ul> (unordered) on nummerdamata loend ja <ol> (ordered) on nummerdatud loend.
  • <li>: Loendi element.
  • <div>: Üldine plokielement sisu grupeerimiseks.
Unsplash näidis

CSS – veebilehe stiilid

CSS ehk Cascading Style Sheets on stiilikeel, mida kasutatakse veebilehe kujunduse ja paigutuse määramiseks. Stiilireeglid koosnevad selektorist ja deklaratsiooniplokist. Selektor valib HTML-elemendi, mida stiilida, ja deklaratsioonid (omadus-väärtus paarid) määravad selle stiili.

Peamised CSS-i omadused:

  • color: Teksti värv.
  • background-color: Taustavärv.
  • font-size: Kirja suurus.
  • font-family: Fondi tüüp.
  • margin: Välisäär.
  • padding: Siseäär.
  • border: Ääris.
  • display: Määrab elemendi paigutuse, näiteks block, inline, flex või grid.
Mine visiitkaartini

Klassid ja ID-d

Lisaks elemenditüüpidele saad HTML-elementidele anda ka klasse (class) ja ID-sid (id), et neid CSS-is täpsemalt valida.

  • Klassid (.nimi) saab anda mitmele elemendile ja need on mõeldud korduvate stiilide rakendamiseks.
  • ID-d (#nimi) peavad olema unikaalsed ühel lehel ja neid kasutatakse konkreetse elemendi valimiseks.

CSS-i lisamine HTML-lehele

CSS-i saab lisada HTML-lehele kolmel viisil:

  1. Väline stiilifail (<link>): See on kõige parem ja levinum meetod. Lood eraldi .css faili ja lingid sellele <head> sektsioonis.
  2. Sisemine stiil (<style>): Paigutad CSS-i otse <style> tagi sisse <head> sektsioonis. Hea väiksemate projektide puhul.
  3. Inline-stiil (style omadus): Lisad stiili otse HTML-elemendi style omadusele. Seda tuleks kasutada harva, kuna see teeb koodi raskesti hallatavaks.

Spikker - olulised teadmised

HTML

  • Struktuur: <!DOCTYPE html>, <html>, <head>, <body>.
  • Sisu: <h1>-<h6>, <p>, <a>, <img>, <ul>, <li>, <div>, <span>.
  • Semantika: Kasuta semantilisi tage (<header>, <nav>, <main>, <section>, <footer>), et anda sisule tähendus. See on oluline SEO ja ligipääsetavuse jaoks.

CSS

  • Süntaks: selektor { omadus: väärtus; }.
  • Box Model: Igal elemendil on sisu (content), siseäär (padding), ääris (border) ja välisäär (margin).
  • Paigutus: display: flex; ja display: grid; on kaasaegsed ja võimsad viisid lehe paigutuse loomiseks.
rand

Sten Laisaar

Voco õpilane