›_ ebskola.lv
← 1.1 1.3 →

1.2 HTML skelets un satura strukturēšana

Stundas uzdevums: 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.

70 min darba sadalījums: 1. uzdevums (~20 min) - atjauno teorijas piemēru vai minimālo prototipu; 2. uzdevums (~25 min) - pielieto to galvenajā uzdevumā; 3. uzdevums (~25 min) - pārbaudi rezultātu, izlabo kļūdas un tikai beigās pieraksti vienu secinājumu. Papildus/4. līmeņa uzdevums ir paredzēts tikai tad, ja pamatdarbs ir pabeigts.

Pirms sāc: izmanto iepriekš apgūto un šīs lapas teorijas/koda piemērus. Ja vajadzīga jauna komanda vai rīks, vispirms atrodi tās paraugu teorijas sadaļā.

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:

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ē.

Praktiskie uzdevumi

1. uzdevums - Iesildies ar gatavu piemēru

Šis ir īss iesildīšanās uzdevums. Nokopē sagatavi, ielīmē to pareizajā koda vietā un palaid. Šeit pietiek droši izmēģināt tēmu 1.2 HTML skelets un satura strukturēšana; detalizētu izpratni veidosi nākamajos uzdevumos.

Kopējamais piemērs vai sagatave: izmanto šo bloku kā starta punktu, nevis kā gala risinājumu.

<section class="iesildisanas-demo">
  <h2>1.2 HTML skelets un satura strukturēšana</h2>
  <p id="rezultats">Sākuma teksts</p>
  <button id="poga">Pārbaudīt</button>
</section>
.iesildisanas-demo {
  padding: 16px;
  border: 2px solid #FFB142;
  border-radius: 6px;
}

.iesildisanas-demo button {
  cursor: pointer;
}
const rezultats = document.querySelector("#rezultats");
const poga = document.querySelector("#poga");

poga.addEventListener("click", () => {
  rezultats.textContent = "Kods darbojas: 1.2 HTML skelets un satura strukturēšana";
});
  1. Atver darba failu vai rīku. Sagataves ievieto atbilstošajos projekta failos: index.html, style.css un script.js.
  2. Nokopē visu piemēra bloku no šī uzdevuma un ielīmē to norādītajā vietā.
  3. Palaid kodu tieši tādu, kāds tas ir, un pārliecinies, ka parādās rezultāts, izvade vai vismaz nav kļūdas paziņojuma.
  4. Atrodi vienu drošu vietu, ko drīkst mainīt: tekstu, skaitli, krāsu, mainīgā vērtību vai testa ierakstu.
  5. Maini tikai šo vienu vērtību un palaid kodu vēlreiz.
  6. Salīdzini rezultātu pirms un pēc izmaiņas. Ja parādās kļūda, atcel pēdējo izmaiņu un palaid vēlreiz.
  7. Turpini pie 2. uzdevuma tikai tad, kad šis mazais piemērs darbojas.

2. uzdevums - Ievieto algoritmu projektā

Pievieno šīs stundas paņēmienu kā nelielu, lietotājam redzamu projekta daļu.

  1. Atver index.html un pārbaudi, vai pirmajā rindā ir <!DOCTYPE html> un <html lang="lv">.
  2. Pievieno iekšā <body> trīs semantiskus tagus: <header>, <main> un <footer>.
  3. Ielīmē <header> iekšā virsrakstu <h1>[Tavas spēles nosaukums]</h1>.
  4. Ielīmē <main> iekšā divus blokus: <div id="menu"></div> un <div id="spele"></div>.
  5. Ielīmē <footer> iekšā <p>Autors: [tavs vārds]</p>.
  6. Saglabā un atver failu pārlūkā (Live Server) - pārbaudi, vai virsraksts un autora teksts ir redzami.
  7. Salabo pirmo kļūdu, piemēram, aizmirstu aizverošo tagu vai kļūdainu ligzdojumu.
  8. Veic git commit -m "Add semantic HTML page structure".

3. uzdevums - Testē kodu un izdari secinājumu

Pārbaudi, vai algoritms darbojas paredzami vairākās situācijās.

  1. Atver index.html pārlūkā - pārbaudi, ka virsraksts <h1> ir redzams un nekāds teksts nav "pazudis".
  2. Spied F12 → cilne "Elements" - pārbaudi, ka HTML koks ir: html → head → body → header + main + footer.
  3. Nomaini <h1> tekstu uz citu nosaukumu - pārlādē lapu un pārbaudi, ka izmaiņa redzama.
  4. Pievieno papildu <p> elementu <main> iekšā un pārbaudi, vai tas parādās lapā.
  5. Pārbaudi validator.w3.org - ielīmē savu HTML un skatī, vai nav kļūdu paziņojumu.
  6. Salabo vismaz vienu W3C brīdinājumu, ja tāds parādās.
  7. Pieraksti vienu secinājumu: kāpēc <main> ir labāks par <div id="main">.

Papildu uzdevums - Pievieno mazu funkciju

Ja pamatdarbs ir pabeigts, paplašini projektu ar vienu nelielu programmētu uzlabojumu.

  1. Pievieno <nav> iekšā <header> ar divām saitēm: <a href="#menu">Spēle</a> un <a href="#footer">Par</a>.
  2. Pievieno id="menu" atribūtu pie <main> bloka un id="footer" pie <footer>.
  3. Atver lapu pārlūkā un noklikšķini uz navigācijas saitēm - pārbaudi, vai lapa ritina uz pareizo vietu.
  4. Pievieno <head> sadaļā <meta name="description" content="Mana spēle">.
  5. Salabo jebkuru neprecizitāti, ko pamana DevTools konsolē.
  6. Veic git commit -m "Add nav links and meta description".
  7. Parādi lapu klasesbiedram - pajautā, vai struktūra un saites ir skaidras bez papildu paskaidrojumiem.

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

Koda piemērs

<!DOCTYPE html>
<html lang="lv">
<head>
    <meta charset="UTF-8">
    <title>Mana Spēle</title>
</head>
<body>
    <h1>Klases Punktu Panelis</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>
Klases Punktu Panelis

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

Galvenie mērķi:

  • Savākt zvaigznes
  • Izvairīties no asteroīdiem
⬅ Iepriekšējā stunda Nākamā stunda ➡