Veebilehe tegemise õpetus

Mis on HTML?

HTML (Hyper Text Markup Language) on veebilehtede loomise jaoks tehtud standardne märgistuskeel.

Seda kasutades on võimalik luua veebilehele sisu ning struktuuri.

See on aluseks igale veebilehele ning tänu sellele on võimalik määrata kuidas erinevad elemendid (tekst, pildid, lingid, videod) kuvatakse.

HTML võimaldab ka kasutada lisa keeli (CSS, JavaScript), millega on võimalik veebilehekülge kujundada.

Kuidas see välja näeb?


            

HTML koosneb erinevatest elementidest, mida kutsutakse siltideks (inglise k. "tag"). Need sildid ümbritsevad sisu ja annavad veebilehele teada, kuidas seda kuvada.

Silt enamasti algab < > ning lõppeb < /> märkidega. On olemas ka erand. Näiteks silt <br> (line break) ei vaja lõpu silti.

Ülal toodud HTML koodis, on näha kõige levinumaid silte, mida kasutatakse igal veebilehel.

Järgnevalt seletame lahti, mida iga silt sellel näitel tähendab.

<!DOCTYPE html> defineerib, et tegu on HTML5 tüüpi veebilehekülje dokumendiga.

<html> on HTML-dokumendi juurelement, mis tähistab kogu veebilehe sisu.

<head> sisaldab metaandmeid dokumendi kohta. Näiteks saame tänu sellele ühendada ära CSS ja JavaScript failid, et need töötaksid veebilehel.

<title> sellega on võimalik määrata veebileheküljele pealkirja.

<body> defineerib kogu veebilehekülje nähtavat sisu (tekst, pildid, tabelid).

<h1> tähistab kõige suurimat pealkirja (inglise k. "heading").

<p> tähistab veebileheküljes mingit paragraafi.

Atribuudid

HTML-is on võimalik lisada siltidele rohkem informatsiooni ehk teisisõnu atribuute

Näiteks, kui me soovime mingit silti eristada teisest, saaksime lisada sellele "id" atribuudi. See atribuut tuleb kasuks JavaScriptis, kui on vaja kindlale sildile funktsiooni rakendada.

See näeks välja nii:


        

Pange tähele, et siin lõigus on samuti näha "class" atribuuti.

Seda saab kasutada näiteks siis, kui on vaja mitmele sildile sarnast CSS stiili rakendada.


Mõnedel siltidel on ka spetsiifilised atribuudid:


        

Siin "src" soovib pildi jaoks faili teed.

Veel kasulikke silte ja atribuute

Järgnevalt tutvustame veel silte/atribuute, mida veebilehtede loomise juures võiks kasuks tulla.

Sildid

<div> defineerib jaotust või sektsiooni, mida on võimalik kasutada teiste elementide jaoks nagu konteinerina.

<img> võimaldab lisada veebilehele pilte.

<a> element, mis annab võimaluse vajutusel suunata mingi teise lingile.

<input> element defineerib sisendit, kuhu kasutaja saab andmeid sisestada.

Atribuudid

"href" - Kasutatakse tavaliselt <a> sildis. See atribuut küsib hyperlinki, kuhu kasutajat suunata.

"placeholder" - Võimaldab lisada teksti sisendile vihje, mida kasutaja võiks kirjutada.

"style" - Võimaldab elemendile lisada CSS stiili.

"type" - Mõeldud rohkem <input> sildile. Sellega saab defineerida sisendi tüübi (Nt. tekst, range, checkbox).

"alt" - Pildi asemel on võimalik lisada pilti kirjeldatav tekst.

Näidis:


            

Lisa lugemist

Kindlasti soovitame veel lisa infot lugeda nendelt lehtedelt: