ÜDV A WEB VILÁGÁBAN!
🌍 Mi az a weboldal?
Képzeld el, hogy van egy varázskönyved, amelyben minden egyes oldal egy másik történetet mesél el. Egy weboldal pontosan ilyen! Az internet tele van weboldalakkal, amelyeken információkat találhatsz, játékokat játszhatsz, videókat nézhetsz vagy akár saját tartalmat is létrehozhatsz.
Amikor megnyitsz egy weboldalt a böngésződben (például Google Chrome, Mozilla Firefox vagy Microsoft Edge), valójában egy szerver nevű számítógépről kapsz adatokat. Ez a szerver tárolja az összes weboldal tartalmát, és amikor beírod egy weboldal címét, a böngésződ elküld egy kérést a szervernek, amely válaszul visszaküldi az oldal adatait. Ezeket az adatokat a böngésződ értelmezi, és megjeleníti a képernyődön.
De hogyan jön létre egy ilyen weboldal? Ki készíti el őket? És hogyan tudsz te is saját weboldalt létrehozni? A válasz a HTML-ben, azaz a HyperText Markup Language-ben rejlik!
🖥️ Mi az a HTML?
A HTML (HyperText Markup Language) egy speciális számítógépes nyelv, amelyet a weboldalak készítésére használnak. A HTML segítségével megadhatjuk, hogy milyen elemek jelenjenek meg egy oldalon: szövegek, képek, gombok, linkek és sok más érdekesség.
Ha például szeretnénk egy weboldalon megjeleníteni ezt a mondatot: „Helló, világ!”, akkor ezt egy HTML-kóddal kell megírnunk.
Íme egy egyszerű HTML-kód:
<!DOCTYPE html>
<html>
<head>
<title>Az első weboldalam</title>
</head>
<body>
<h1>Helló, Világ!</h1>
<p>Ez az első weboldalam! Készen állsz a kalandra?</p>
</body>
</html>
Ez egy teljesen működőképes weboldal, amelyet saját számítógépeden is megnyithatsz! Elsőre talán furcsának tűnik ez a sok kód, de ne aggódj, hamarosan mindent megértesz! 😉
🛠️ Első lépések: Írjuk meg az első weboldalunkat!
Most elkészítjük az első saját weboldalunkat! Ehhez egy egyszerű szövegszerkesztőt és egy böngészőt fogunk használni.
📌 1️⃣ Nyiss meg egy Jegyzettömböt vagy egy kódíró programot
Minden programozás a kódszerkesztővel kezdődik. Ha Windows-t használsz, nyisd meg a Jegyzettömböt (Notepad). Ha pedig Mac-ed van, a TextEdit is megfelelő.
Ha komolyabban szeretnél foglalkozni a weboldalak készítésével, érdemes letölteni egy fejlettebb szerkesztőt, például:
- Visual Studio Code – kezdőknek is ideális, és segíti a kódolást.
- Atom – egyszerű, gyors és testreszabható.
- Notepad++ – a Jegyzettömb fejlettebb változata, több hasznos funkcióval.
Bármelyik szerkesztőt választod, a lényeg, hogy meg tudj benne írni és elmenteni egy egyszerű szöveges fájlt.
📌 2️⃣ Másold be ezt a kódot:
Most másold be az alábbi HTML-kódot a szövegszerkesztődbe:
<!DOCTYPE html>
<html>
<head>
<title>Az első oldalam</title>
</head>
<body>
<h1>Helló, Világ!</h1>
<p>Most tanulom a HTML-t, és már el is készítettem az első oldalamat!</p>
</body>
</html>
Ez a kód egy alapvető weboldalt hoz létre. Nézzük meg részletesebben, mit jelentenek az egyes sorok:
<!DOCTYPE html>– Ez azt mondja a böngészőnek, hogy egy HTML5 dokumentumot olvas.<html>– A teljes weboldal ezen a nyitó- és zárócímkén belül helyezkedik el.<head>– Itt találhatók az oldal háttér-információi, például a cím (<title>) is.<body>– Itt található minden tartalom, amit a felhasználó lát.<h1>– Ez egy főcím, amit nagyobb betűkkel jelenít meg a böngésző.<p>– Ez egy bekezdés, amely szöveget tartalmaz.
📌 3️⃣ Mentsd el a fájlt!
- Kattints a Fájl menüre, majd válaszd a Mentés másként… lehetőséget.
- A fájl neve legyen: elso_oldal.html
- A fájl típusa legyen: Minden fájl („.*”)
- Kattints a Mentés gombra.
📌 4️⃣ Nyisd meg a böngészőben!
- Keresd meg a mentett elso_oldal.html fájlt a számítógépeden.
- Kattints rá duplán, és nézd meg, hogy megnyílik-e a böngésződben!
Ha minden jól ment, egy üzenetet kell látnod: „Helló, Világ!” 🎉
🎯 Kihívás: Tedd egyedivé az oldalt!
Most próbáld meg egy kicsit személyre szabni az oldalt! Próbáld ki ezeket a feladatokat:
1️⃣ Módosítsd a <h1> és <p> elemeket úgy, hogy a saját neved és egy üdvözlő üzenet jelenjen meg! 2️⃣ Adj hozzá egy új bekezdést (<p>...</p>) arról, hogy mit szeretsz csinálni! 3️⃣ Próbálj meg egy új címsort (<h2>...</h2>) hozzáadni, amelyben leírod a kedvenc hobbid!
🔥 Mit tanultunk ma?
✅ Megtudtuk, mi az a weboldal és hogyan működik.
✅ Megismerkedtünk a HTML fogalmával és szerkezetével.
✅ Elkészítettük és megnyitottuk az első saját weboldalunkat!
Nagyszerű munka! A következő fejezetben még izgalmasabb dolgokat fogunk tanulni: megismerjük a címeket, bekezdéseket és linkeket! 🚀