HTML — veebilehtede märgistuskeel: mis see on ja kuidas töötab

Hyper Text Markup Language (HTML) on märgistuskeel veebilehtede loomiseks. Veebilehti kuvavad tavaliselt veebibrauserid ning need võivad sisaldada teksti, linke, pilte, helifaile ja videot. HTML-i kasutatakse sisu struktuuri ja tähenduse märgistamiseks, et brauser oskaks selle õiges järjekorras ja korrektselt kuvada. Lisaks sisu märgistamisele saab HTML-iga lisada lehele metaandmeid — näiteks autoreid, lehe kirjeldust või märksõnu — mida brauserid tavaliselt otseselt ei kuva, kuid mis on olulised otsingumootoritele ja jagamiseks.

Kuidas HTML töötab

HTML-dokumendid koosnevad hierarhilistest elementidest (märkidest), mida tähistatakse nurksulgudega, näiteks <p> lõigete jaoks või <a> linkide jaoks. Brauser loeb HTML-koodi ja konstrueerib sellest arusaadava dokumendipuu (DOM — Document Object Model), mille põhjal ta sisu kuvab. Lehe välimuse ja paigutuse määrab tavaliselt CSS (Cascading Style Sheets), käitumise ja interaktiivsuse lisab JavaScript.

Põhistruktuur

Tüüpiline HTML-leht sisaldab vähemalt neid osi:

DOCTYPE — deklaratsioon lehe alguses: <!DOCTYPE html>, mis ütleb brauserile, et tegemist on HTML5 dokumendiga.
<html> — juurelement, mis sisaldab kõike dokumentis.
<head> — meta- ja konfiguratsiooniosakond (meta charset, pealkiri <title>, stiililehed ja scriptid).
<body> — nähtav sisu: lõigud (<p>), pealkirjad (<h1>…<h6>), pildid (<img>), lingid (<a>), vormid (<form>) jpm.

Tavalised elemendid ja atribuudid

<a href="..."> — hüperlink. (Säilita olemasolevad ja muud lingid.)
<img src="..." alt="..."> — pilt koos alternatiivse tekstiga ligipääsetavuse tagamiseks.
<ul>, <ol>, <li> — loendid.
<form>, <input>, <button> — andmete kogumine kasutajalt.
Atribuudid (näiteks class, id, src, alt, rel) annavad elementidele täiendavat tähendust või metaandmeid.

Semantiline HTML ja ligipääsetavus

HTML5 tõi kasutusele palju semantilisi elemente (<header>, <nav>, <main>, <article>, <section>, <footer>), mis aitavad paremini väljendada lehe struktuuri nii brauseritele, otsingumootoritele kui ka abivahenditele (ekraanitutid, lugejad). Semantiline märgistamine parandab ligipääsetavust ja otsingutulemite kvaliteeti. Lisaks tuleks kasutada alt-tekste piltidel ja ARIA atribuute keerukamate interaktiivsete komponentide puhul.

HTML ja teised tehnoloogiad

HTML-i kasutatakse koos CSS-iga (stiilide jaoks) ja JavaScript-iga (käitumise ja dünaamika jaoks). Serveripoolne töö (nt andmebaasid, API-d) toob sisu HTML-i, mis seejärel esitatakse kasutajale. Modernsed veebiraamistikud (React, Vue, Angular) genereerivad HTML-i kas serveris või kliendis, kuid põhimõte jääb samaks: struktureeritud märgistus + stiil + käitumine.

HTML standardid ja areng

HTML-i esimeseid standardeid on varasemalt haldanud World Wide Web Consortiumi (W3C). Tänapäeval hooldab HTML-i peamiselt WHATWG kui „living standard“ (elu-standard), kuid W3C avaldab samuti ametlikke väljatrükke ja soovitusi. HTML5 lisas palju uusi võimalusi multimeediumile, semantikale ja vormidele; alates sellest on standard pidevalt arenenud.

Hea tava ja tööriistad

Kasutage UTF-8 märgistikku (meta charset) ja lisage <meta name="viewport" content="width=device-width, initial-scale=1"> mobiilisõbralikkuse tagamiseks.
Kirjutage semantiliselt ja lisage alt-tekst piltidele ning piisavad pealkirjad ja loogiline järjestus.
Testige lehte erinevates brauserites ja ekraanisuurustes; kasutage brauserite arendustööriistu.
Kontrollige koodi W3C valideerijaga ja testige ligipääsetavust (nt pöördseadmete ja klaviatuuriga navigeerimisega).

Kust alustada

Algajatele on hea alustada lihtsa HTML-dokumendi kirjutamisest, õppida peamisi elemente ja atribuutide kasutust ning seejärel katsetada CSS-i ja JavaScripti lisamist. Õppematerjalid nagu dokumentatsioon ja juhendid annavad näiteid ning samm-sammult harjutusi. Praktika läbi tekib arusaam sellest, kuidas HTML, CSS ja JavaScript koos töötavad, et luua kaasaegseid, ligipääsetavaid ja responsiivseid veebilehti.

Kui soovite, võin näidata lihtsat HTML-malli (DOCTPE, <head> ja <body>), mida saab kohe kasutada õppimiseks ja testimiseks.

Sildid

HTML kasutab spetsiaalseid programmeerimiskeele tükke, mida nimetatakse "siltideks", et anda brauserile teada, kuidas veebileht peaks välja nägema. Sildid on tavaliselt paarikaupa: algussilt määratleb sisubloki alguse ja sulgemissilt selle sisubloki lõpu. Tagisid on palju erinevaid ja igaühel neist on erinev eesmärk. Näiteid siltide kohta vt allpool HTML-i põhitagide kohta.

Mõned sildid toimivad ainult teatud brauserites. Näiteks silt <menuitem>, mida kasutatakse selleks, et midagi ilmuks, kui inimene vajutab hiire paremat nuppu, töötab ainult Mozilla Firefoxi brauseris. Teised brauserid lihtsalt ignoreerivad seda tagi ja kuvavad kirjutise normaalselt. Paljud veebilehe loojad väldivad nende "mittestandardsete" siltide kasutamist, sest nad tahavad, et nende leheküljed näeksid kõigis brauserites ühesugused välja.

Näide

Siin on näiteleht HTML-keeles.

1 <!DOCTYPE html> 2 < html> 3 < head> 4 < title> See on lehekülje pealkiri. </title> 5 </head> 6 < body> 7 < p> See on lõik. </p> 8 < a href="https://www.domain.com"> See on link. </a> 9 < img src="image.jpg" alt="Image"> 10 </body> 11 </html>

Lihtne HTML-leht oleks selline: üks lõik "Hello world! " kirjutatud.

1 <!DOCTYPE html> 2 < html> 3 < head> 4 < title> Tere! </title> 5 </head> 6 < body> 7 < p> Hello world! </p> 8 </body> 9 </html>

Põhilised HTML-tähed

Sildi nimi	Nimi	Funktsioon	Koodinäide
`<!DOCTYPE>`	Doctype	Määratleb dokumendi tüübi	<!DOCTYPE html>
`<html>`	HTML	Määratleb HTML-dokumendi ja alustab HTML-dokumenti.	< html> Kogu kood</html>
`<head>`	Pea	Sisaldab mis tahes koodi, mida ei kasutata veebilehe elementide kuvamiseks.	<head></head>
`<title>`	Pealkiri	Määratleb veebilehe pealkirja (kuvatakse vahekaardil) ja sisestatakse `<head>` sisse.	< title> Veebileht</title>
`<body>`	Keha	Sisaldab veebilehe nähtavaid elemente (ja sisaldab lõiget ja muud)	< body> Html tags</body>
`<h1>` kuni `<h6>`	Rubriigid	Erineva suurusega pealkirjad (`<h1>` on suurim)	< h1> Pealkiri</h1>
	Paragrahv	Määratleb teksti lõigu	< p> TEKST</p>
	Ankur	Loob aktiivseid linke teistele veebilehtedele	< a href="www.domain.com"> Külastage meie veebilehte</a>
`<img>`	Pilt	Kuvab pildi lehel	< img src="ImageUrl" alt="Tekst kuvatakse, kui pilt ei ole saadaval">
`<br>`	Break	Sisestab ühe reavahetuse	Tekst < br> Tekst
`<center>`	Keskus	Liigutab sisu lehekülje keskele	< center> Kood</center>
`<script>`	Skript	Loob veebilehele skripti, mis on tavaliselt kirjutatud JavaScriptis.	< script> document. write("Hello World!")</script>

HTML-tippide kasutamine

Veebilehe tegemine

Veebilehe tegemine on lihtne.Kõik, mida pead meeles pidama, on sildid ja järjekord, et teha veebileht.

Kõigepealt peate leidma koha, kuhu sisestada HTML-tähed (ma soovitan märkmikku) ja kirjutama sildid.

Siin on veel üks näide HTML-sildi lehest.

<html>

<head>

<h1> Tere maailm!</h1>

</head>

<body>

<p>

See on HTML-sildi lehekülg.

</p>

Autor: *Siia nimi siia*

</footer>

</html>

Kui olete valmis, salvestage see sellisel kujul: helloworld.htm

(ärge pange tühikuid)

Ja sa oledgi valmis! Kui salvestate selle oma arvutisse, kui vajutate seda, saadab see teid oma veebilehele google'isse!

Küsimused ja vastused

K: Mis on HTML?

V: HTML on üks märgistuskeele tüüp, mida kasutatakse kirjutust, linke, pilte ja audiovisuaalset materjali sisaldavate veebilehtede loomiseks.

K: Milline on HTML-i funktsioon?

V: HTML-i ülesanne on öelda veebilehitsejatele, kuidas veebilehed peaksid välja nägema, ja lisada metaandmeid, näiteks veebilehe looja nimi.

K: Millised on mõned näited meediast, mida saab lisada HTML-i abil loodud veebilehtedele?

V: Mõned näited meedia kohta, mida saab lisada HTML-i abil loodud veebilehtedele, on helifailid ja videoklipid.

K: Kuidas CSS täiendab HTML-i?

V: CSS-i kasutatakse HTML-lehtede välimuse muutmiseks.

K: Milline on JavaScripti roll veebiarenduses?

V: JavaScript on veebiarenduses oluline skriptikeel, sest see ütleb veebilehtedele, kuidas nad peavad käituma, ja võib muuta HTML-i ja CSS-i välimust.

K: Kes vastutab HTML-i loomise eest?

V: HTMLi koostab World Wide Web Consortium (W3C).

K: Milline on HTMLi praegune standardversioon?

V: 2018. aasta septembri seisuga on HTML 5 uusim HTML-i standardversioon versioon 5.2.