HTML bevezető lecke

📖 Mi az HTML?

HTML (HyperText Markup Language) a weboldalak létrehozásának alapvető nyelve. Ez mondja meg a böngészőnek, hogyan jelenítse meg egy weboldal tartalmát.

Fontos: HTML nem programozási nyelv, hanem jelölőnyelv (markup language). Ez strukturálja a weboldalak tartalmát.

🏗️ HTML dokumentum alapvető szerkezete

Minden HTML dokumentumnak van egy alapvető szerkezete, amely a következő elemeket tartalmazza:

<!DOCTYPE html> <!– Dokumentumtípus deklaráció –>

<html> <!– Gyökérelem –>

<head> <!– A dokumentum fejléce (információk a böngésző számára) –>

<title>Az oldal címe</title>

</head>

<body> <!– A dokumentum törzse (látható tartalom) –>

Az oldal tartalma

</body>

</html>

🔤 Alapvető HTML címkék (tag-ek)

1. <html>

A fő címke, amely tartalmazza a teljes oldalt. Minden más elem ezen belül található.

2. <head>

Információkat tartalmaz az oldalról (metaadatok). Nem látható a böngészőben, de fontos, mert tartalmazza a címet, CSS fájlokra mutató hivatkozásokat stb.

3. <title>

Meghatározza az oldal címét, amely a böngésző címsorában és a keresőmotor eredményeiben jelenik meg.

4. <body>

Tartalmazza az oldal összes látható tartalmát: szöveget, képeket, táblázatokat stb.

5. <p> – Bekezdés

Szöveges bekezdések létrehozására szolgál.

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

<p>Ez egy másik bekezdés.</p>

6. <h1>, <h2>, <h3>…

Címek és alcímek létrehozására szolgálnak. A <h1> a legfontosabb, a <h6> a legkevésbé fontos.

<h1>Főcím</h1>

<h2>Alcím</h2>

<h3>Al-alcím</h3>

🎨 Body attribútumok (elavultak, de hasznosak a megértéshez)

A bgcolor attribútum

Meghatározza az oldal háttérszínét (elavult, modern HTML-ben CSS-t használunk).

<body bgcolor=”lightblue”>

<h1>Az én oldalam</h1>

<p>Ez egy példa.</p>

</body>

A background attribútum

Háttérképet ad az oldalhoz (elavult, modern HTML-ben CSS-t használunk).

<body background=”kep.jpg”>

<h1>Az én oldalam</h1>

<p>Ez egy példa.</p>

</body>

💻 Gyakorlati példák

1. példa: Egyszerű HTML oldal

<!DOCTYPE html>

<html>

<head>

<title>Első HTML oldalam</title>

</head>

<body>

<h1>Üdvözöllek!</h1>

<p>Ez az első HTML oldalam.</p>

<p>Az HTML nagyon szórakoztató!</p>

</body>

</html>

2. példa: Színes háttérű oldal

<!DOCTYPE html>

<html>

<head>

<title>Színes oldalam</title>

</head>

<body bgcolor=”lightgreen”>

<h1>Az én iskolám</h1>

<p>A nevem [a te neved].</p>

<p>8. osztályos tanuló vagyok.</p>

<p>Szeretem az IKT tantárgyat!</p>

</body>

</html>

📝 Házi feladat

Készíts egy HTML oldalt magadról:

Használj egy főcímet <h1> a neveddel
Adj hozzá legalább 3 bekezdést <p> amely leírja:
- Mit szeretsz csinálni szabadidődben
- Mi a kedvenc tantárgyad
- Mit tanultál ma IKT órán
Kísérletezz különböző háttérszínekkel (bgcolor)
Mentsd el a fájlt .html kiterjesztéssel (pl: en_oldalam.html)

💡

Gyakorlati tipp

Hogy lásd, hogyan működik a HTML kód, mentsd el a fájlt .html kiterjesztéssel (pl: oldal.html) és nyisd meg dupla kattintással egy böngészőben (Chrome, Firefox, Edge).

🌟 Az HTML jelentősége

HTML minden weboldal vázát (skeleton) alkotja
Minden weboldal, amit meglátogatsz, HTML-t használ
Ez az első lépés a webprogramozás tanulásában
CSS-sel és JavaScripttel együtt alkotják a modern web alapját
Lehetővé teszi saját személyes weboldalad létrehozását

📚 Szótár – Kulcsfogalmak magyarul

HTML =

HyperText Markup Language
HyperText Jelölőnyelv

Tag =

Címke
(pl: <p>, <h1>)

Attribute =

Attribútum
(pl: bgcolor=”blue”)

Element =

Elem
(nyitó címke + tartalom + záró címke)

Browser =

Böngésző
(Chrome, Firefox, Edge)

Markup =

Jelölés
(a HTML célja)