Veebilehtede loomine/Maailma lihtsaim veebileht

Kuid aitab lobast, aeg luua esimene veebileht. Et asja mitte keerukaks ajada, seame eesmärgiks luua maailma kõige lihtsam lehekülg.

Vahendid

Nii nagu puussepp ei torma paljaste kätega plangu kallale, vaid otsib välja oma sae, höövli ja teised riistad, nii vaatame meiegi enne veebilehe loomise kallale asumist järele, kas meil on olemas tarvilikud tööriistad. Arvutimaailmas on tööriistadeks muidugi programmid. Seega, milliseid programme me vajame?

Tekstiredaktor

UNIX'i laadsetes operatsioonisüsteemides (Mac OS X, Linux, BSD) on reeglina olemas konsoolipõhised tekstiredaktorid nagu vi, pico ja emacs. Graafilistest tekstiredaktoritest on levinumad Mac OS X'i TextEdit, KDE keskkonna KWrite ja Kate ning Gnome keskkonna gedit. Käesolev peatükk kasutab näitliku tekstiredaktorina Notepad'i, kuid õpetus on üldjoontes rakendatav ka teiste graafiliste redaktorite puhul.

Nagu eelnevast peatükist juba aimata võis, pole veebileht midagi muud, kui üks lihtne tekstifail. Täpselt nagu need failid, millel on .txt laiend, ainult et HTML keelsetel veebilehtedel on .html laiend.

Tekstiredaktoriks nimetame aga programmi, millega me saame selliseid tavalisi tekstifaile kirjutada. Igas Windows'iga arvutis on selliseks programmiks Notepad.

NB! Päris kindlasti ei sobi tekstiredaktorina kasutamiseks MS Word ega OpenOffice Writer või mõni muu sarnane programm. Sellised programmid salvestavad lisaks tekstile faili veel hulga informatsiooni lehekülje paigutuse, teksti suuruse jms kohta, kuid meil on tarvis vaid teksti ilma igasuguste lisanditeta.

Brauser

Peale seda, kui oleme veebilehe valmis teinud, on meil tarvis programmi, mille abil seda vaadata. Selleks sobib meile suvaline veebilehitseja: Internet Explorer, Firefox, Opera, Safari või mis iganes meil parajasti käepärast on.

Nüüd, kus vahendid on olemas, võime alustada.

Esimene lehekülg

Avame tekstiredaktori ja kirjutame sinna teksti, mis meie lihtsamast-lihtsamal veebilehel võiks ilutseda. Näiteks nõnda:

Minu esimene veebileht.

Notepad'iga HTML faili salvestamine

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

Notepadis vali "File" -> "Save As...".

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

ning kliki "Save". (Salvestamise protsess on näitlikustatud ka juuresoleval pildil.)

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 kõik läks õnnelikult, siis avaneb brauseri aknas veebileht, mille sisuks on see tekst, mille sa faili kirjutasid.

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 kirjutatakse "<" (väiksem-kui) ja ">" (suurem-kui) märkide vahele ning kasutatakse tüüpiliselt nõndaviisi:

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 - ').

Kuid meie esimesel veebilehel pole kasutatud veel ainsatki märgendit, atribuutidest rääkimata. Selle vea parandame kohe, lisades oma leheküljele iga HTML faili kohustusliku osa - pealkirja.

Lehekülje pealkiri

Veebilehe kuvamine MS Internet Explorer'iga - üksjagu iganenud screenshot

Just pealkiri on see osa, mis on iga veebilehe juures kohustuslik. Kui vaatad brauseri tiitelribale (programmiakna kõige ülemisele ribale, mille paremas otsas on "X" nupp), siis seisab seal tekst "Untitled document". Tõepoolest, brauser lausa kaebab, et sellel lehel puudub pealkiri. Egas siis midagi - lisame oma lehele ka pealkirja.

Avame uuesti Notepad'iga oma HTML faili ning lisame selle algusesse kaks märgendit <title> ja </title>, ning nende vahele oma pealkirja:

<title>Maailma lihtsaim lehekülg</title>
Minu esimene veebileht.

Kui me oma lehekülje nüüd uuesti brauseris avame, ilutseb tiitelribal uhke tekst "Maailma lihtsaim lehekülg". Nüüd võime lugeda oma lehekülje valminuks.