Ievads HTML

HTML (Hyper Text Markup Language)

Piezīme:

Iesākumā HTML koda rakstīšanai iesaku izmantot MS Windows iebūvēto "Notepad" vai arī lejupielādēt brīvprogrammatūru "Notepad 2". Uzrakstīto kodu jāsaglabā nevis ar "Notepad" noklusēti piedāvāto faila (datnes) palašinājumu ".txt", bet ar ".html" (starp citu - var lietot arī ".htm", bet tomēr ieteicams ir ".html"). Faila nosaukumā nevajadzētu lietot latviešu, krievu u.c. īpašos burtus, kā arī lietot atstarpes starp vārdiem. Starp vārdiem var lietot apakšsvītru, piemēram, "saturs_1.html".
Šī HTML mācību materiāla mērķis ir iemācīt rīkoties ar HTML elementiem, bet to noformējumam jau ieteicams izmantot CSS, tamdēļ noformējumam, kas veicams ar HTML iekšējiem līdzekļiem, pieskaršos minimāli.
HTML, CSS standartus regulē organizācija "W3C" (World Wide Web Consortium), uz kuriem centīšos balstīties arī šajā mācību materiālā.

Sintakse

Lai atvieglotu uztveri, salīdzināsim HTML ar daudziem droši vien ierasto MS Word. Kas tad ir "mājaslapa"? Ļoti vienkāršojot, tas ir noformēts materiāls, kas ievietots internetā. MS Word-ā elementus (piemēram, virsrakstu, rindkopu, tabulu, šriftu) noformēt (piemēram, nocentrēt, pasvītrot) mācētu droši vien jau katrs - atliek tikai nospiest attiecīgo podziņu. Taču ievērosim, ka interneta "mājaslapas" jau neatveras MS Word-ā, bet gan interneta pārlūkprogrammā, piemēram, Internet Explorer. Kā lai pārlūkprogrammai pasaka kādi elementi tiek lietoti un kā tie noformēti? HTML valodā to dara ar tagu palīdzību. Tagu raksturo šādi norobežojošie elementi: <>. Piemēram, lai pateiktu, ka attēlojamais teksts jāuztver kā rindkopa (paragraph), lieto rindkopas tagu: <p>, t.i., starp norobežojošajiem elementiem iesprauž attēlojamā elementa (virsraksta - "h1", rindkopas - "p", tabulas - "table" u.c.) apzīmējumus, piemēram:

<p>Es pašlaik mācos HTML!</p>

Interneta pārlūkprogrammā šāds kods tiktu attēlots kā sekojoša rindkopa:

Es pašlaik mācos HTML!

Vēl ievērosim, ka mums arī bija jāpasaka, kur rindkopa beidzas. To izdara ar noslēdzošo tagu (</p>), kurš no atverošā, jeb rindkopu iesākošā (<p>) atšķiras tikai ar slīpsvītru pirms attēlojamā elementa apzīmējuma! Šādi noslēdzošie tagi jālieto gandrīz visiem HTML tagiem. Un vēl - katram atverošajam tagam pienākas savs noslēdzošais tags! Piemēram, nedrīkst noslēgt vairākas rindkopas ar vienu noslēdzošo tagu.

Lai elementus noformētu, tiem var piešķirt vienu vai vairākas īpašības jeb atribūtus (attributes). Atribūtus raksta konkrētajā atverošajā tagā uzreiz aiz elementa un starp tiem nekādas atdalošas pieturzīmes nelieto, piemēram, <table align="center">. Šajā gadījumā mēs izveidojām tabulu ("table") un tai piešķīrām atribūtu jeb īpašību - nodefinējām tās novietojumu ("align"), kam piešķīrām vērtību "nocentrēta" ("center"). Ievērosim, ka definējot atribūta vērtību, lietojama "=" zīme un vērtība liekama pēdiņās!

Tātad, runājot par HTML sintaksi nākas saskarties ar trim lietām:

tags (tag) - <>;
elements (element) - konkrēts taga veids, piemēram, <table>;
atribūti jeb īpašības (attribute) - noformē, jeb piešķir kādu īpašību attēlojamajam elementam, piemēram, tabula tiek nocentrēta <table align="center">.

Lūk visvienkāršākās web lapas piemērs. Iekopējiet šo kodu "Notepad-ā", saglabājiet, piemēram, ar nosaukumu "index.html" (bez pēdiņām) un tad atveriet failu ar interneta pārlūkprogrammu (konkrēts lietoto tagu apskats meklējams jau nākamajās stundās):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
</head>

<body>
<p align="center">Mana web lapa!</p>
</body>

</html>

Interneta pārlūkprogrammā vajadzētu tikt attēlotam šādam rezultātam:

Mana web lapa!

Sākumlapa

Tālāk >>