HTML logoApgūstot mājas lapu veidošanu, pirmā lieta, ko vajadzētu sākt mācīties, ir HTML — Hiperteksta iezīmēšanas valoda (HyperText Markup Language).

Jebkura interneta lapa būtībā ir vienkāršs teksta dokuments, kurā ar speciālām iezīmēm jeb HTML tagiem ir atzīmēti dažādi elementi — virsraksti, teksta rindkopas, saraksti, attēli u.c. Interneta pārlūkprogramma šo speciāli iezīmēto tekstu apstrādā un parāda lietotājam saprotamā veidā.

HTML valoda ir paredzēta, lai piešķirtu elementiem nozīmi, nevis izskatu. Pēc tam, kad elementiem piešķirta nozīme, to izskatu var aprakstīt, izmantojot CSS.

Pašlaik aktuālā versija ir HTML5, kas ievieš daudzus jauninājumus — semantiskos elementus, multimediju atbalstu, uzlabotas formas un daudz ko citu.

Kas nepieciešams, lai sāktu mācīties?

Lai sāktu apgūt HTML, nepieciešama tikai interneta pārlūkprogramma un teksta redaktors. Pārlūkprogramma Tev acīmredzot jau ir, tāpēc pievērsīsimies teksta redaktoram.

Ērtības labad iesaku izvēlēties kādu šim mērķim pielāgotu redaktoru, kurš iekrāso HTML tagus un atvieglo darbu. Šeit ir dažas populāras bezmaksas programmas:

  • Visual Studio Code — vispopulārākais koda redaktors ar automātisko pabeigšanu, iebūvētu termināli un simtiem paplašinājumu. Brīvi pieejams visām operētājsistēmām.
  • Sublime Text — ātrs un ērts redaktors ar labu HTML atbalstu.
  • Notepad++ — vienkāršs un populārs redaktors Windows lietotājiem.

Var izmantot arī tiešsaistes redaktorus, piemēram, CodePen vai JSFiddle, kuros var uzreiz redzēt koda rezultātu bez nepieciešamības saglabāt failus datorā.

Pārlūkprogrammas izstrādātāja rīki

Visas modernās pārlūkprogrammas (Chrome, Firefox, Edge) piedāvā iebūvētus izstrādātāja rīkus (DevTools), kurus var atvērt nospiežot taustiņu F12. Ar tiem var apskatīt jebkuras lapas HTML kodu, CSS stilus un eksperimentēt ar izmaiņām reāllaikā. Tas ir neatsverams rīks gan mācību procesā, gan ikdienas darbā ar mājas lapām.

Vienkāršs HTML dokuments

Kad esi izvēlējies sev vēlamo programmu, laiks izmēģināt vienkārša HTML dokumenta izveidi. Par katra elementa nozīmi sīkāk tiks izklāstīts nākamajās sadaļās. Pagaidām pietiks, ja iekopēsi zemāk redzamo kodu savā teksta redaktorā un saglabāsi kā failu "lapa.html"

<!DOCTYPE html>

<html lang="lv">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mana mājas lapa</title>
</head>

<body>
<h1>Sveiki!</h1>
<p>Šī ir mana pirmā mājas lapa!</p>
</body>

</html>

Kad tas izdarīts, atver jaunizveidoto failu ar interneta pārlūkprogrammu. Ja redzams aptuveni šāds logs, tad viss ir izdarīts pareizi:

Sveiki! Šī ir mana pirmā mājas lapa!

Ja tomēr, atverot failu ar pārlūkprogrammu, ir redzams nevis šāds teksts, bet viss iepriekš nokopētais kods, tad pārliecinies, vai fails patiešām ir saglabāts HTML, nevis TXT formātā. Windows operētājsistēma bieži vien ir konfigurēta tā, lai faila paplašinājumi nebūtu redzami. Šādā gadījumā, failu saglabājot, iespējams, tā nosaukumu ir jāieliek pēdiņās — "lapa.html"

Laboja mad, labots 2x