HTML/CSS uzdevums un špikeris

1. Pamatuzdevums – izveido dzīvnieka mājaslapu

Tev jāizveido neliela mājaslapa par kādu dzīvnieku, izmantojot HTML un mazliet arī CSS. Darbu veido Notepad++ vidē.

Kas jāizveido obligāti?

1. Index lapa (piemēram, index.html).
2. Vēl vismaz 2 citas lapas par šo pašu dzīvnieku.
3. Starp lapām jābūt saitēm.

Ko ievietot sākuma lapā?

• Dzīvnieka nosaukumu kā virsrakstu.
• Nelielu aprakstu par dzīvnieku.
• Sadaļu “Saites” ar sarakstu uz citām lapām.

Ko ievietot pārējās lapās?

Piemēri lapām:

• Vide – kur dzīvnieks dzīvo.
• Uzturs – ko dzīvnieks ēd.
• Interesanti fakti.
• Aizsardzība vai uzvedība.

Katrā lapā jābūt:

• virsrakstam,
• tekstam,
• vismaz vienai bildei.

2. Par ko var saņemt punktus?

Pamatprasības

Papildpunkti

Superbonuss – “vibe coded” lapa

Vari izveidot vēl vienu īpašu lapu, ko palīdz uztaisīt Gemini. Tā var būt:

• animācija par dzīvnieku,
• neliela spēle,
• interaktīva lapa,
• krāšņs pārsteigums par izvēlēto dzīvnieku.

3. HTML pamat-tagu špikeris

Pilns HTML tagu saraksts: MDN HTML elementi

<h1>Galvenais virsraksts</h1>
<h2>Mazāks virsraksts</h2>
<h3>Vēl mazāks virsraksts</h3>

<p>Šis ir paragrāfs.</p>

<p>Pirmā rinda.<br>
Otrā rinda.</p>

<b>Treknraksts</b>
<i>Slīpraksts</i>
<u>Pasvītrots</u>

<a href="vide.html">Par dzīvnieka vidi</a>

<a href="https://lv.wikipedia.org">
  Vikipēdija
</a>

<img src="lauva.jpg" alt="Lauva" width="300">

<ul>
  <li>Dzīvo mežā</li>
  <li>Ēd ogas</li>
</ul>

<ol>
  <li>Atrodi informāciju</li>
  <li>Saglabā bildi</li>
  <li>Izveido lapu</li>
</ol>

<a href="index.html">Atpakaļ uz sākumu</a>

Ļoti vienkāršs piemērs lapai

<h1>Panda</h1>

<p>Panda ir interesants dzīvnieks.</p>

<h2>Saites</h2>
<ul>
  <li><a href="vide.html">Vide</a></li>
  <li><a href="uzturs.html">Uzturs</a></li>
</ul>

4. CSS špikeris – pats vienkāršākais

Pilns CSS stilu saraksts: MDN CSS reference

CSS palīdz padarīt lapu skaistāku. Šobrīd var izmantot style atribūtu tieši tagā.

Krāsa un fona krāsa

<p style="color: blue;">Zils teksts</p>

<p style="background-color: yellow;">
  Teksts ar dzeltenu fonu
</p>

Vairāki stili vienā vietā

<p style="color: white; background-color: green; padding: 10px;">
  Šis teksts ir izcelts
</p>

Izmanto div kā “kasti”

<div style="background-color: lightblue; padding: 15px;">
  <h2>Mana sadaļa</h2>
  <p>Šeit ir teksts kastē.</p>
</div>

Izmanto span vienam teksta gabalam

<p>
  Mans dzīvnieks ir
  <span style="color: red; font-weight: bold;">ļoti ātrs</span>.
</p>

Noderīgi teksta stili

Bonusa efekti

<div style="background-color: white;
            padding: 15px;
            border-radius: 15px;
            box-shadow: 4px 4px 10px gray;">
  Skaista kastīte
</div>

<p style="outline: 3px dashed orange; padding: 10px;">
  Teksts ar īpašu kontūru
</p>

<h2 style="text-shadow: 2px 2px 4px gray;">
  Spīdīgs virsraksts
</h2>

<img src="lapsa.jpg" alt="Lapsa" width="250"
     style="border-radius: 20px; box-shadow: 5px 5px 12px gray;">

Viens vienkāršs noformēts piemērs

<div style="background-color: lightyellow;
            border: 2px solid orange;
            border-radius: 15px;
            padding: 15px;
            margin: 10px 0;">

  <h2 style="color: darkgreen; text-align: center;">Ezis</h2>

  <p>Ezis ir mazs dzīvnieks ar adatām.</p>

  <p>
    Tas ir
    <span style="color: red; font-weight: bold;">interesants</span>
    un gudrs.
  </p>
</div>

5. Gemini “vibe coding” špikeris

Gemini vari izmantot, lai izveidotu bonusa lapu ar kaut ko iespaidīgāku. Svarīgi: tev jāsaprot, ko kopē un ko ieliec savā failā.

Kā strādāt?

1. Izdomā ideju par dzīvnieku.
2. Uzraksti Gemini precīzu uzdevumu.
3. Nokopē HTML/CSS/JS kodu.
4. Ielīmē jaunā failā, piemēram, bonus.html.
5. Pārbaudi pārlūkā, kas strādā un kas nestrādā.
6. Ja vajag, palūdz Gemini izlabot kļūdas.

Piemēri, ko prasīt Gemini

Izveido vienkāršu HTML lapu par pandu.
Lapā vajag:
- lielu virsrakstu
- animētu fonu
- pogu, uz kuru uzspiežot parādās interesants fakts
- visu vienā HTML failā
- vienkāršu kodu, ko var saprast 6. klases skolēns

Izveido vienkāršu spēli vienā HTML failā par lauvu.
Spēlē jāklikšķina uz gaļas gabaliņiem, lai iegūtu punktus.
Lūdzu izmanto HTML, CSS un JavaScript.
Kods lai ir vienkāršs un ar komentāriem.

Izveido skaistu pārsteiguma lapu par delfīnu.
Lapā lai ir:
- zils fons
- kustīgi burbuļi
- bilde
- 3 interesanti fakti
- poga “Vēl fakts!”
Visu vienā HTML failā.

Ko rakstīt, ja kaut kas nestrādā?

Šis kods man nestrādā. Izlabo to.
Lūdzu atstāj vienā HTML failā.
Paskaidro, ko tu izmainīji.

Noņem sarežģīto daļu un uztaisi vienkāršāku versiju 6. klases skolēnam.

Pievieno komentārus kodā, lai es saprotu, kas ir virsraksts, poga, stils un JavaScript daļa.

Labs darba princips

• Vispirms uztaisi parasto mājaslapu.
• Tikai tad veido bonusa pārsteiguma lapu.
• Ja Gemini iedod pārāk sarežģītu kodu, palūdz vienkāršāku versiju.

6. Bonusa lapu idejas par dzīvniekiem