HTML on lühend mõistest Hyper Text Markup Language. See on standardkeel veebilehtede loomiseks. HTML kirjeldab veebilehe struktuuri ja koosneb mitmetest elementidest. Nende elementide alusel teab veebilehitseja, kuidas mingeid andmeid kuvada.
HTML lehe üldine struktuur on selline:
<!DOCTYPE html> <html> <head> <title>Minu esimene leht</title> </head> <body> <h1>Kõige suurem pealkiri</h1> <p>Minu lehe peatükk</p> </body> </html>
Eelneva lahtiseletus on siis järgmine:
<!DOCTYPE html> – määratletakse, et tegu on HTML5 standardile vastava dokumendiga (teiste võimalike dokumendiliikide määratlused on leitavad siit).
<html> – HTML lehe põhielement ja selle algusmärgend (tag – märgend), peaaegu kõigil HTML lehe elementidel on algus- ja lõpumärgend, ehk siis konkreetse elemendiga seotud info peab jääma algus- ja lõpumärgendi vahele (erisuseks on nö tühjad elemendid, millel puudub sisu – nt reavahetuse element <br>. Algus- ja lõpumärgend erinevad teineteisest selle poolest, et lõpumärgendi ees on kaldkriips – / . St et algusmärgendile <html> vastab lõpumärgend </html>.
<head> – HTML lehe metaandmete jaoks vajalik algusmärgend. Sellesse ossa lisatakse nt info selle kohta, missugust sümbolite kodeeringut kasutatakse, viiteid teistele failidele (nt stiilifailid) ja lehtedele, mida lehe kuvamisel tuleb kasutada, lehe kohta käivad metaandmed, mille järgi on võimalik lehte leida jms. Lõpumärgendiks on </head>.
<body> – HTML lehe sisu jaoks vajalik algusmärgend. Sellesse ossa kirjutatakse kogu HTML lehe sisu, mida kuvatakse. Lõpumärgendiks on </body>.
<h1> – kõige suurem pealkiri. HTML keeles on pealkirjade suurused <h1> kuni <h6>. Neid on oluline kasutada otsingumootorite jaoks. Algusmärgendiga <h1> seotud lõpumärgend on </h1>. Nende vahel olev tekst Kõige suurem pealkiri kuvatakse veebilehele esimesena.
<p> – tähistab HTML lehe peatükki (paragraph – peatükk). Veebilehitseja lisab peatüki ette ja järele ühe tühja rea. Lõpumärgendiks on </p>.
NB! Kui elemendil on lõpumärgend, ei tohi seda kunagi ära unustada. Kuigi veebilehitseja suudab mõnel juhul lõpumärgendi puudumisest hoolimata lehe kuvada, on siiski parem harjutada endale sisse harjumus lõpumärgendeid ka lisada!
Eelnev kood on jagatud puustruktuuriks – sel moel on võimalik koodi paremini jälgida. Nt on kogu lehe struktuur, märgendite <html> ja </html> vahel “puu” ühel tasemel. Elemendid <head> ja </head> ning <body> ja </body> teisel tasemel (kuna tegu on sama taseme elementidega). Ja eelnevate elementide alla kuuluvad elemendid juba järgmisel tasemel.
Koodi kirjutamiseks kasutame programmi Notepad++, mis suudab eristada erinevaid programmeerimiskeeli.
Programmi avades, kui ei ole tühja dokumenti ees, tuleb see lisada – ülevalt vasakpoolsest nurgast, menüü alt, kõige vasakpoolsem nupp – New.
Seejärel on mõistlik koheselt ka fail ära salvestada:
- menüüribalt File -> Save as
- määratleda failinimi, kirjutada see lahtrisse File name – veebilehtede avalehe vaikimisi failinimi index
- valida salvestatava faili formaat, Save as type nimekirjast valida Hyper Text Markup File, mille tulemusena on Notepad++ võimeline eristama HTML-keelt, selle tulemusena saab fail leiandiks html ja faili täielikuks nimeks index.html
- vajutada Save nupule
Kui nüüd lisada eelnev kood faili, on HTML märgendid ja elemendid erinevate värvidega eristatud.
Selleks, et näha, kuidas leht veebilehitsejas välja näeb, tuleb menüüst valida soovitud veebilehitseja:
View -> View Current File in -> ja valikust valida soovitud veebilehitseja.