Üheleheline Õppeveeb

Sissejuhatus

Mis on HTML?

HTML (HyperText Markup Language) on keel, millega märgendatakse veebilehti. Selle abil loome veebilehele struktuuri, pannes ritta elemendid, millest veebileht koosneb.. HTML ei ole programmeerimiskeel, see on lihtsalt märgistuskeel. HTML paneb paika üksnes dokumendi struktuuri, kuid võimaldab veebilehele kaasata skripte, eeskätt JavaScripti ja CSS-i, millega kirjeldatakse lehe kujundus. HTML ja CSS on veebi alustalad. Keerulisemate funktsioonide jaoks kasutavad arendajad tavaliselt programmeerimiskeelt, näiteks JavaScripti. Standardid (nt HTML5) tagavad, et kood töötab ühtemoodi igas brauseris.

Teooria

Olulisem info

• HTML ja CSS roll veebilehel: HTML loob struktuuri ja CSS annab sellele välimuse.
• CSS pannakse eraldi faili, sest siis on kood puhtam, ühte CSS koosi saab kasutada mitmel lehel, brauser laeb kiiremini, sest brauserid salvestavad CSS-faili vahemällu, muudatused CSS-failis mõjuvad kõikjal.
• Semantilised HTML elemendid annavad sisule tähenduse.
• Olulisemad semantilised elemendid: <header>, <nav>, <section>, <article>, <aside> ja <footer>.
• Tavaline pildi lisamine: <img src="..." alt="...">, alt tekst on vajalik ligipääsetavuse jaoks.
• Erinevad mõõtühikud CSS-i kasutades on: px, rem ja em. px-väiksed detailid, rem-sobib tekstile ja em-suurus on seotud vanema elemendiga.
• Pseudoklassid kirjeldavad elemendi eriseisundit. Erinevad pseudoklassid sisaldavad: :hover, :focus, :active jm.
• Pseudoelemente kasutatakse dekoratiivsete või tüpograafiliste efektide jaoks. Erinevad pseudoelemendid on: ::before, ::after, ::first-line jm.
• Lehe paigutus CSS-is määrab, kuidas elemendid lehel asetsevad. Kaasaaegsed tööriistad selleks on Flexbox ja Grid.
• Flexbox sobib horisontaalse või vertikaalse elemendirea joondamiseks. Nt navigeerimisriba, nupurea, vormielemendi jaoks.
• Grid sobib keerukamate lehtede ja kaartide paigustamiseks. Nt galeriide, terve lehe layout-i jaoks.
• Kohanduvus on tähtis, et veebilehed näeksid igal ekraanil headd välja - arvutis, telefonis kui ka tahvlis.
• Hea praktika on planeerida kohanduvus ja ligipääsetavus algusest peale, kasutada validator.w3.org validaatorit ja testida veebilehte reaalselt seadmes.

Kontakt

Adele Maria Peters

adele-maria.peters@voco.ee

Portfoolio

Tagasi Üles