1.2. tēma: HTML skelets un satura strukturēšana

Tavs šīs stundas izaicinājums: Izveidot tehniski pareizu HTML5 dokumenta struktūru un strukturēt informāciju, izmantojot semantiskos tagus un hierarhiju.

2.6.1. Pieraksta algoritmu, izmantojot programmēšanas valodu; 2.3.3. Pārvalda un organizē datņu sistēmu.

Teorija: Tīmekļa lapas anatomija

Katrs HTML dokuments līdzinās koka struktūrai. Ir galvenais tags <html>, kurā iekšā ir divas lielas sadaļas:

<head> (Galva): Informācija pārlūkam un meklētājiem (nosaukums, kodējums, stili). Lietotājs lapā to neredz.
<body> (Ķermenis): Viss redzamais saturs — virsraksti, teksti, attēli un pogas.

Pārlūks lasa kodu no augšas uz leju. Lai kods būtu glīts un lasāms, mēs izmantojam atkāpes (indentation), kas parāda, kurš elements atrodas kura iekšpusē.

1. uzdevums: Standarta HTML5 skeleta izveide

Iemācīties izveidot obligāto koda struktūru, bez kuras lapa var darboties kļūdaini.

Izpildes soļi:

Atver iepriekšējā stundā izveidoto index.html failu VS Code vidē.
Izdzēs visu esošo saturu un ieraksti tikai izsaukuma zīmi !, pēc tam nospied Enter (Emmet saīsne).
Nomaini <html lang="en"> uz <html lang="lv"> un sadaļā <title> ieraksti "Mana Spēle - Sākums".
Saglabā failu un palaid Live Server (poga apakšējā joslā), lai redzētu tukšu lapu ar pareizu virsrakstu cilnē.

2. uzdevums: Virsrakstu hierarhija un rindkopas

Izveidot loģisku informācijas izkārtojumu, izmantojot <h1> līdz <h6> un <p> tagus.

Izpildes soļi:

Sadaļā <body> pievieno galveno virsrakstu <h1> ar savas topošās spēles nosaukumu.
Zem tā pievieno <h2> sadaļu "Par spēli" un uzraksti īsu rindkopu <p>, par ko būs tava spēle.
Izveido vēl vienu <h2> sadaļu "Kāpēc es izvēlējos šo tēmu?" un pievieno aprakstu. Ievēro, ka <h1> lapā drīkst būt tikai viens!

3. uzdevums: Saraksti un koda publicēšana

Strukturēt informāciju saraksta veidā un sinhronizēt darbu ar GitHub.

Izpildes soļi:

Pievieno <h3> virsrakstu "Plānotās funkcijas".
Izmanto <ul> (nenumurēts saraksts) un <li> tagus, lai uzskaitītu vismaz 3 lietas (piem., punktu skaitīšana, līmeņi, laika atskaite).
Veic Commit ar ziņu "Pievienota struktūra un saraksts" un Push, lai darbs būtu redzams GitHub.

Biežākās kļūdas (un kā tās labot):

Aizmirsts aizverošais tags: Ja nenoslēdz </h1>, viss teksts zem tā izskatīsies pēc milzīga virsraksta.
Nesting (ligzdošanas) kļūdas: Tags ir jāaizver tādā pašā secībā, kā tas tika atvērts (piem., <p><b>teksts</b></p>).
Garumzīmes: Ja lapā redzi dīvainus simbolus, pārliecinies, ka <head> sadaļā ir <meta charset="UTF-8">.

Koda piemērs

<!DOCTYPE html>
<html lang="lv">
<head>
    <meta charset="UTF-8">
    <title>Mana Spēle</title>
</head>
<body>
    <h1>Kosmosa Piedzīvojums</h1>
    <p>Šī būs spēle par ceļošanu galaktikā.</p>
    <h2>Galvenie mērķi:</h2>
    <ul>
        <li>Savākt zvaigznes</li>
        <li>Izvairīties no asteroīdiem</li>
    </ul>
</body>
</html>

Kosmosa Piedzīvojums

Šī būs spēle par ceļošanu galaktikā.

Galvenie mērķi:

Savākt zvaigznes
Izvairīties no asteroīdiem