Mi az HTML?
Az Alapvető HTML Tag-ek
1. Dokumentum Struktúra
<!DOCTYPE html>
<html>
<head>
<title>Oldal címe</title>
</head>
<body>
<!– Ide kerül a látható tartalom –>
</body>
</html>
<!DOCTYPE html>– Megmondja a böngészőnek, hogy HTML5 dokumentumot olvas<html>– A teljes HTML dokumentum kezdete és vége<head>– A fejléc, ahol az oldal metaadatai vannak<title>– Az oldal címe, ami a böngésző fülén látszik<body>– A törzs, ahol a látható tartalom van
2. Címsorok
<h1>Ez egy főcím (legnagyobb)</h1>
<h2>Ez egy alcím</h2>
<h3>Ez egy kisebb alcím</h3>
<h4>Még kisebb cím</h4>
<h5>Kicsi cím</h5>
<h6>Legkisebb cím</h6>
3. Bekezdések és Szövegformázás
<p>Ez egy bekezdés szövege. Itt írhatod a tartalmadat.</p>
<strong>Ez a szöveg félkövér lesz</strong>
<em>Ez a szöveg dőlt lesz</em>
<br> <!– Ez egy sortörés –>
<hr> <!– Ez egy vízszintes vonal –>
4. Listák
<!– Rendezett lista (számokkal) –>
<ol>
<li>Első elem</li>
<li>Második elem</li>
<li>Harmadik elem</li>
</ol>
<!– Rendezetlen lista (pontokkal) –>
<ul>
<li>Alma</li>
<li>Banán</li>
<li>Narancs</li>
</ul>
5. Linkek és Képek
<!– Link másik oldalra –>
<a href=”https://www.pelda.hu”>Kattints ide!</a>
<!– Kép beszúrása –>
<img src=”kep.jpg” alt=”Kép leírása”>
6. Táblázatok
<table>
<tr>
<th>Név</th>
<th>Életkor</th>
<th>Város</th>
</tr>
<tr>
<td>Anna</td>
<td>14</td>
<td>Budapest</td>
</tr>
<tr>
<td>Béla</td>
<td>15</td>
<td>Debrecen</td>
</tr>
</table>
Teljes Példa Weboldal
<html>
<head>
<title>Az Én Első Weboldalam</title>
<meta charset=”UTF-8″>
</head>
<body>
<h1>🎉 Üdvözöllek a Weboldalamon! 🎉</h1>
<h2>Rólam</h2>
<p>Én vagyok <strong>Kiss Anna</strong>, 14 éves tanuló a <em>Példa Középiskolában</em>.</p>
<h2>Hobbiim</h2>
<ul>
<li>💻 Programozás</li>
<li>🎮 Videójátékok</li>
<li>📚 Olvasás</li>
<li>⚽ Futball</li>
</ul>
<h2>Iskolai Tantárgyaim</h2>
<ol>
<li>Matematika</li>
<li>Magyar irodalom</li>
<li>Angol nyelv</li>
<li>Informatika</li>
<li>Történelem</li>
</ol>
<h2>Barátaim</h2>
<table border=”1″>
<tr>
<th>Név</th>
<th>Évfolyam</th>
<th>Kedvenc tantárgy</th>
</tr>
<tr>
<td>Nagy Béla</td>
<td>8. osztály</td>
<td>Matematika</td>
</tr>
<tr>
<td>Szabó Eszter</td>
<td>8. osztály</td>
<td>Angol</td>
</tr>
<tr>
<td>Tóth Máté</td>
<td>8. osztály</td>
<td>Tesibőrőd</td>
</tr>
</table>
<h2>Hasznos Linkek</h2>
<p>Látogasd meg ezeket az oldalakat:</p>
<ul>
<li><a href=”https://www.oktatas.hu”>Oktatási Hivatal</a></li>
<li><a href=”https://www.wikipedia.org”>Wikipedia</a></li>
<li><a href=”https://www.code.org”>Code.org – Programozás tanulása</a></li>
</ul>
<hr>
<p><em>Weboldal készítve 2026-ban | Minden jog fenntartva</em></p>
</body>
</html>
Gyakorlati Feladatok 📝
1. Feladat: Saját Weboldal Készítése
- Főcímet a neveddel
- Egy rövid bemutatkozást
- Hobbijaid listáját
- Egy táblázatot az osztálytársaidról (név, életkor, kedvenc tantárgy)
- 3 hasznos linket
2. Feladat: Családfa Oldal
- Különböző címsorokat
- Rendezett és rendezetlen listákat
- Képeket (ha van)
- Linkeket rokonok weboldalaira (ha vannak)
3. Feladat: Iskolai Projekt Oldal
- Projektek címeit és leírásait
- Csoporttagok neveit táblázatban
- Hasznos források linkjeit
Tipp az Úton! 💡
<tag>) és záró (</tag>) tag. Kivéve néhány speciális tag-et, mint a <br> és <hr>..html kiterjesztéssel (pl. oldalam.html), és nyisd meg böngészőben a megtekintéshez!