HTML/Alustame

Natuke terminoloogiast

Veebilehel on lühidalt öeldes kaks peamist koostisosa - sisu ja struktuur. Sisu all mõistame materjali, mida soovime lugejale esitada (tekst, pildid, helid), struktuuri all aga selle materjali ülesehitust - lõigud, pealkirjad, tabelid jne.

Veebilehe struktuur antakse edasi HTML-i märgendite abil. Märgendid (inglise keeles tag) kirjutatakse < (väiksem-kui) ja > (suurem-kui) märkide vahele ning kasutatakse tüüpiliselt näiteks nii:

Siin on üks <strong>eriti tähtis</strong> asi - "eriti tähtis" on paksus kirjas.

Märgendeid kasutatakse reeglina paarikaupa - märgistatava tekstilõigu alguses ja lõpus. Lõppmärgend erineb algusmärgendist kaldkriipsu poolest märgendi alguses. Seega ülalolevas näites on <strong> algusmärgend ja </strong> lõpumärgend.

Algus ja lõpumärgend koos nende vahel asetseva tekstiga moodustavad elemendi. Seega eelmises näites on meil strong-element, mis tervikuna on selline: <strong>eriti tähtis</strong>.

Lisaks algus- ja lõpumärgendile kuuluvad HTML-i elementide juurde ka atribuudid ning nende väärtused. Näiteks:

Siin on üks <strong title="vahva kirjeldus">eriti tähtis</strong> asi.

Siin on title on atribuut ning tema väärtuseks on vahva kirjeldus. Nagu näha, siis on atribuut seotud oma väärtusega võrdusmärgi abil. Atribuudi väärtus peab aga alati olema jutumärkide vahel (alternatiivina võib kasutada ka ülakomasid - ').

Peamised terminid selged, võime asuda oma esimese veebilehe koodi kallale.

HTML-Dokument vanasti

HTML-dokumendil on mõned kohustuslikud märgendid, mis määravad dokumendi piirid ja põhilise jaotuse. Esmalt tuleb määrata "algus ja ots" ehk dokumendi piirid. Varem oli asi hoopis lihtne:

<HTML>
<HEAD>
  <TITLE>Minu esimene veebileht</TITLE>
</HEAD>
<BODY>

  <H1>Pealkiri</H1>

  <P>Üks rida teksti...</P>

</BODY>
</HTML>

Dokumendi alguses ja lõpus asuvad HTML-märgendid ning vahepealne jaguneb "peaks" ehk päiseks (HEAD) ja "kehaks" ehk põhiosaks (BODY). Päis on mõeldud dokumenti iseloomustava info jaoks, selle sisse aga paigutatakse omaette TITLE-märgendite vahele dokumendi pealkiri (ilmub harilikult veebilehitseja tiitliribal). Kehaosas asub kogu ülejäänud tekst.

HTML-Dokument tänapäeval

Seoses XMLi nõuetega XHTMLis on siin asi mõnevõrra keerulisem - XML vajab lisaks veel infot lehekülje kodeeringu ja muu sarnase kohta. Nii on sama pilt XHTMLis selline:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="et" lang="et">
<head>
  <title>Minu esimene veebileht</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>

  <h1>Pealkiri</h1>

  <p>Üks rida teksti...</p>

</body>
</html>

Kahtlemata näib see algajale keeruline, kuid üldiselt võib selle algosa lahtiseletamise jätta hiljemaks ja kasutada sellist dokumendipäist mõnda aega lihtsalt pimesi - aeg luua esimene veebileht.

Esimese veebilehe loomine

Ava oma lemmik tekstiredaktor ja kopeeri ülaltoodud näites olev tekst sinna täht-tähelt ümber. Võid muidugi ka käsitsi kirjutada, aga kopeerides saab lihtsalt rutem.

Kui tekstiredaktor on sinu jaoks ebaselge termin, siis vali üks lihtne programm, millega saab harilikku tekstifaili kirjutada. Windowsi kasutajatele sobib selleks hästi Notepad, aga kindlasti mitte Word. Linuxi kasutajatel on reeglina palju mitmesuguseid tekstiredaktoreid: Vi, Emacs, pico, nano, Kate... - kõik need sobivad suurepäraselt.

Seejärel salvesta fail, andes talle nime, mille lõpus on ".html", näiteks "esimene.html".

Notepadi puhul vali "File" -> "Save As...".

Faili nimeks kirjuta "esimene.html",
faili tüübiks määra "All files",
faili kodeeringuks pane "ANSI"

ning kliki "Save".

Notepad'iga HTML faili salvestamine

Kui fail salvestatud, siis ava see oma veebibrauseris, näiteks tehes topeltkliki faili ikoonil või valides brauseri menüüst "File" -> "Open..." ning otsides üles vastava faili.

Kui kirjutasid faili täpselt selle teksti, mis näites toodud, siis avaneb brauseris üks suhteliselt tühi lehekülg lühikese igava tekstiga "dokumendi sisu". Kui vaatad brauseri tiitelribale (programmiakna kõige ülemisele ribale, mille paremas otsas on "X" nupp), siis seisab seal uhke tekst "Minu esimene veebileht".

Veebilehe kuvamine MS Internet Explorer'iga

Järgnev peatükk räägib sellest, mida on võimalik kirjutada <body> ja </body> vahele.

Raamat: HTML

Lihtsa lehekülje loomine >>

Sisukord