▶ ⭐ Bevezető — mi a HTML, és mik a tagek?

A HTML (HyperText Markup Language) egy jelölőnyelv. Nem programozási nyelv: nem számol és nem dönt — csak leírja a böngészőnek, mi és hova kerüljön az oldalon.

A leírást úgynevezett tagekkel végezzük. Egy tag mindig szögletes zárójelek között áll, és a legtöbbnek van nyitó és záró változata:

<h1>Ez egy nagy cím</h1>  ·  <p>Ez egy bekezdés</p>  ·  <button>Kattints!</button>

A böngésző elolvassa a tageket, és azok alapján rajzolja ki az oldalt. Az olvasó a kódot soha nem látja — csak a kész eredményt.

Az első weboldalad

A fenti sávban a mappa ikon menüpont alatt nyisd meg az index.html fájlt — ebben él a játék váza.

1) Adj nevet a játékodnak

Keresd meg ezt a sort:

<h1>Süti Klikker</h1>

A jobb oldali előnézetben azonnal látod, mit változtattál.

A <h1> a legnagyobb címsor — a két tag közé bármit írhatsz. Pár ötlet:

• <h1>Anna pizza klikkere 🍕</h1>
• <h1>Marci unikornis hadserege 🦄</h1>
• <h1>Peti űrhajó-vadászat 🚀</h1>

Az alatta lévő <p> egy bekezdés — ennek a szövegét is bátran cseréld le valamire, ami illik a játékodhoz.

2) Válassz emojit a gombnak

Az oldalon van egy kattintható gomb:

<button id="suti-gomb">🍪</button>

Cseréld ki a 🍪-t arra, amit szeretsz. A lenti táblázatban kattints a kívánt emojira, hogy kijelöld (ha kell, húzással jelöld ki pontosan). Másold a vágólapra Ctrl+C-vel — Macen ⌘+C (a Command billentyű + C). Ezután a kódszerkesztőben kattints oda a <button id="suti-gomb">...</button> soron belül, ahová az emojit szeretnéd (pl. a 🍪 helyére), és illeszd be Ctrl+V-vel — Macen ⌘+V (ez a beillesztés gyorsbillentyűje).

Téma	Emojik
Kaja	🍕 🌮 🍔 🍩 🍦 🥐 🍜
Állat	🐶 🐱 🦊 🐼 🦄 🐉 🐸
Sport	⚽ 🏀 🏐 🎾 🏈 🏆
Jármű	🚀 🚗 ✈️ 🚂 🛸
Egyéb	🌟 💎 ⚡ 🔥 ❤️ 🎮

Az id="suti-gomb" részhez ne nyúlj hozzá — ezzel találja majd meg a gombot a JavaScript a következő lépésekben.

A mai napon egy klikker játékot fogunk építeni. Ha rákattintasz egy gombra, növelni fogod tudni a sütijeid számát.

Feladat ellenőrzése

Ha úgy érzed, minden lépést megcsináltál ebben a feladatban: a jobb oldali előnézet felső sávjában, a frissítés gomb mellett a zöld pipás gomb (Feladat tesztelése) lefuttatja az aktuális feladat automatikus ellenőrzését. Előtte mentsd a változtatásaidat; ha az előnézet nem frissült, nyomd meg a környíl (előnézet frissítése) gombot, majd utána a tesztet.