🌐 HTML Programozás

A weboldalak nyelve

Középiskolai oktatóanyag

Használd a ← → nyilakat vagy az alábbi gombokat a navigáláshoz

🖥️ Hogyan készülnek a weboldalak?

A weboldalak szöveges fájlok, amelyeket a böngésző értelmez és jelenít meg.

A weboldal készítés lépései:

1. Tervezés: Megtervezzük, mit szeretnénk a weboldalon
2. HTML írás: Létrehozzuk a tartalom struktúráját
3. CSS formázás: Megszépítjük a megjelenést
4. JavaScript: Interaktivitást adunk hozzá
5. Közzététel: Feltöltjük egy szerverre

💡 Fontos: Minden weboldal HTML-ből épül fel, ez az alapja mindennek!

📝 Mi is az a HTML?

HTML = HyperText Markup Language

(Hiperszöveges Jelölőnyelv)

Jellemzői:

📌 Nem programozási nyelv, hanem jelölőnyelv (markup language)
🏗️ Meghatározza a weboldal szerkezetét és tartalmát
🏷️ Tagekkel (címkékkel) dolgozik
📄 Sima szövegfájl, bármilyen szövegszerkesztővel írható
🌍 A böngészők értelmezik és jelenítik meg

Példa: Ahogy egy könyvnek van címe, fejezete, bekezdései, úgy a HTML-ben is vannak címsorok, bekezdések, listák stb.

🏷️ Mi az a HTML tag?

A tagek (címkék) mondják meg a böngészőnek, hogyan jelenítse meg a tartalmat.

Tag felépítése:

<tagnév>Tartalom</tagnév>

Példák:

<p>Ez egy bekezdés</p>

<h1>Ez egy címsor</h1>

<strong>Vastag szöveg</strong>

Részek:

<tagnév> - nyitó tag
Tartalom
</tagnév> - záró tag

Kivétel: Van pár önmagukban záródó tag is:

<br> <img> <hr>

📄 HTML dokumentum alapszerkezete

Minden HTML oldal ugyanígy épül fel:

<!DOCTYPE html>
<html lang="hu">
  <head>
    <meta charset="UTF-8">
    <title>Az oldal címe</title>
  </head>
  <body>
    <h1>Üdvözöllek!</h1>
    <p>Ez az első weboldalad.</p>
  </body>
</html>

📌 <!DOCTYPE html> - HTML5 verzió jelzése
📌 <html> - a dokumentum gyökéreleme
📌 <head> - metainformációk (nem látható)
📌 <body> - látható tartalom

✍️ Szövegformázó alaptagek

Címsorok:

<h1>

<h2>

<h3>

<h4>

<h5>

<h6>

h1 a legnagyobb, h6 a legkisebb

Bekezdés:

<p>

A sima szöveges bekezdésekhez

Szöveg kiemelése:

Fontos szöveg (vastag)

<em>

Hangsúlyos szöveg (dőlt)

<br>

Sortörés

<hr>

Vízszintes vonal

📋 Listák

Számozott lista:

<ol>
  <li>Első elem</li>
  <li>Második elem</li>
  <li>Harmadik elem</li>
</ol>

Eredmény:

Első elem
Második elem
Harmadik elem

Felsorolás:

<ul>
  <li>Alma</li>
  <li>Körte</li>
  <li>Barack</li>
</ul>

Eredmény:

Alma
Körte
Barack

🔗 Hivatkozások és képek

Hivatkozás (link):

<a href="https://www.google.com">Google keresőhöz</a>

href - a link célpontja (hova vezet)
A tagek közötti szöveg lesz kattintható

Kép beszúrása:

<img src="kep.jpg" alt="Kép leírása">

src - a kép elérési útvonala
alt - alternatív szöveg (ha a kép nem töltődik be)
Önmagában záródó tag, nincs záró párja!

💡 A képek formátuma lehet: JPG, PNG, GIF, SVG, WebP

📊 Táblázatok

<table>
  <tr>
    <th>Név</th>
    <th>Kor</th>
  </tr>
  <tr>
    <td>Anna</td>
    <td>15</td>
  </tr>
  <tr>
    <td>Béla</td>
    <td>16</td>
  </tr>
</table>

📌 <table> - maga a táblázat
📌 <tr> - table row (sor)
📌 <th> - table header (fejléc cella)
📌 <td> - table data (adat cella)

📦 Konténer elemek

DIV - Blokk szintű konténer:

<div>
  <h2>Címsor</h2>
  <p>Bekezdés</p>
</div>

Nagyobb tartalmi részek csoportosítására
Új sorban kezdődik, teljes szélességet elfoglalja
CSS-sel formázható

SPAN - Soron belüli konténer:

<p>Ez egy <span style="color: red;">színes</span> szöveg.</p>

Soron belüli szövegrészek formázására
Nem töri meg a sort

📝 Űrlapok (Formok)

<form>
  <label>Neved:</label>
  <input type="text" name="nev">
  
  <label>E-mail:</label>
  <input type="email" name="email">
  
  <button type="submit">Küldés</button>
</form>

Gyakori input típusok:

type="text" - szöveges mező
type="email" - email cím
type="password" - jelszó mező
type="number" - szám bevitel
type="checkbox" - jelölőnégyzet
type="radio" - választógomb

⚙️ HTML Attribútumok

Az attribútumok további információkat adnak a tageknek.

Általános felépítés:

<tag attribútum="érték">Tartalom</tag>

Legfontosabb attribútumok:

id - egyedi azonosító (csak 1x használható)
class - osztály (többször is használható)
style - közvetlen CSS formázás
title - súgó szöveg (tooltip)
href - hivatkozás célja (linkeknél)
src - forrás fájl (képeknél, scripteknél)

Példa:

<p id="bevezeto" class="kek-szoveg" title="Ez egy bekezdés">
  Szöveg
</p>

🎯 Szemantikus HTML elemek

A HTML5 értelmes, beszédes tageket adott a jobb szerkezethez:

Fejléc rész

<nav>

Navigációs menü

<main>

Fő tartalom

Független tartalom

Tartalmi szekció

<aside>

Oldalsáv, mellék info

Lábléc

Miért jók? Könnyebb eligazodni a kódban, jobb a keresőoptimalizálás (SEO), akadálymentesebb.

🚀 Hogyan kezdj el HTML-t írni?

1. Szövegszerkesztő:

Visual Studio Code (ajánlott, ingyenes)
Notepad++ (Windows)
Sublime Text
Akár egyszerű Notepad is elég!

2. Fájl létrehozása:

Hozz létre egy új fájlt: index.html
Írd bele az alap HTML struktúrát
Mentsd el .html kiterjesztéssel

3. Megnyitás böngészőben:

Dupla kattintás a fájlon, vagy
Jobb klikk → Megnyitás böngészővel

💡 Hasznos tippek és források

Tanulási források:

🌐 W3Schools - w3schools.com/html
🌐 MDN Web Docs - developer.mozilla.org
🌐 HTML.com - html.com

Jó gyakorlatok:

✅ Használj helyes tageket (szemantikus HTML)
✅ Mindig zárd le a tageket
✅ Használj behúzásokat (indent) az átláthatósághoz
✅ Add meg az alt attribútumot a képekhez
✅ Teszteld különböző böngészőkben

🎓 Emlékezz: A gyakorlás teszi a mestert! Próbálj ki minden tagot, kísérletezz!

📚 Összefoglalás

Mit tanultunk?

✅ Mi a HTML és mire használjuk
✅ Hogyan épül fel egy HTML dokumentum
✅ Mi az a tag és hogyan működik
✅ Alapvető HTML tagek (címsorok, bekezdések, listák)
✅ Linkek, képek, táblázatok beszúrása
✅ Űrlapok létrehozása
✅ Szemantikus HTML elemek