Amikor egy weboldalt készítünk, az első lépés a megfelelő szerkezet kialakítása. A HTML (HyperText Markup Language) az internet alapvető nyelve, amely lehetővé teszi, hogy a böngészők értelmezzék és megjelenítsék a tartalmakat. Ebben a cikkben bemutatjuk, hogyan épül fel egy HTML alapú weboldal, milyen főbb elemeket kell használni, és hogyan lehet egy jól strukturált, könnyen karbantartható honlapot létrehozni.
1. A HTML alapjai – hogyan működik?
A HTML egy jelölőnyelv, amely címkék (tagek) segítségével határozza meg a weboldal struktúráját. Egy alapvető HTML dokumentum mindig a következő szerkezettel rendelkezik:
<!DOCTYPE html>
<html lang="hu">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Weboldal címe</title>
</head>
<body>
<h1>Üdvözlünk a weboldalon!</h1>
<p>Ez itt egy alapvető HTML oldal.</p>
</body>
</html>
A fenti kódban látható a HTML dokumentum alapvető struktúrája, amely három fő részre oszlik: doctype deklaráció, head és body.
2. A HTML dokumentum szerkezete
Egy teljes HTML oldal szerkezetileg több részből áll. Nézzük meg ezeket részletesen:
2.1. Doctype deklaráció
A <!DOCTYPE html> sor a dokumentum típusát határozza meg, és jelzi a böngészőknek, hogy HTML5 nyelvet használunk.
2.2. Head szekció – metaadatok és külső hivatkozások
A <head> rész tartalmazza az oldalhoz kapcsolódó információkat, például a karakterkódolást, a mobilbarát beállításokat, a CSS fájlokat és a keresőoptimalizálási (SEO) szempontból fontos metaadatokat.
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Ez egy minta weboldal HTML alapokon.">
<title>HTML weboldal felépítése</title>
<link rel="stylesheet" href="style.css">
</head>
2.3. Body szekció – a tényleges tartalom
A <body> szekció tartalmazza a weboldal látható tartalmát, mint például a szövegek, képek, hivatkozások és egyéb elemek.
<body>
<h1>Üdvözöljük a weboldalon!</h1>
<p>Ez egy példa HTML oldal, amely bemutatja a weboldalak szerkezetét.</p>
</body>
3. A HTML oldal főbb elemei
Egy jól felépített weboldal többféle HTML elemből áll, amelyek segítenek a megfelelő szerkezet kialakításában. Nézzük meg a legfontosabbakat:
3.1. Címsorok
A címsorokat a <h1>–<h6> tagekkel lehet definiálni. Ezek segítenek a tartalom strukturálásában és a keresőoptimalizálásban.
<h1>Főcím</h1> <h2>Második szintű cím</h2> <h3>Harmadik szintű cím</h3>
3.2. Bekezdések
A bekezdéseket a <p> tag segítségével hozzuk létre.
<p>Ez egy bekezdés, amely egy HTML oldal része.</p>
3.3. Linkek
A hivatkozásokat az <a> (anchor) taggel lehet létrehozni.
<a href="https://example.com">Kattints ide</a>
3.4. Képek
A képek beillesztése az <img> tag segítségével történik.
<img src="kep.jpg" alt="Egy minta kép">
3.5. Listák
A HTML kétféle listát támogat: számozatlan (<ul>) és számozott (<ol>) listákat.
<ul>
<li>Első elem</li>
<li>Második elem</li>
</ul>
<ol>
<li>Első elem</li>
<li>Második elem</li>
</ol>
3.6. Táblázatok
A táblázatok segítenek az adatok rendezett megjelenítésében.
<table border="1">
<tr>
<th>Név</th>
<th>Kor</th>
</tr>
<tr>
<td>Péter</td>
<td>30</td>
</tr>
</table>
4. CSS és JavaScript integrálása
Egy modern weboldal nemcsak HTML-ből áll, hanem CSS és JavaScript segítségével kap dizájnt és interaktív funkciókat.
4.1. CSS hozzáadása
A stíluslapokat a <link> taggel vagy közvetlenül a HTML kódba illesztve adhatjuk hozzá.
<style>
body {
background-color: lightblue;
}
</style>
4.2. JavaScript használata
Interaktív funkciókat JavaScript segítségével adhatunk hozzá.
<script>
alert("Üdvözlünk a weboldalon!");
</script>
5. Összegzés
A HTML egy erőteljes és könnyen tanulható nyelv, amely lehetővé teszi weboldalak létrehozását. A jól strukturált HTML dokumentum segít az oldalak keresőoptimalizálásában és könnyebb karbantartásában. Ha ezt a cikket követed, akkor már egy stabil alapod van ahhoz, hogy saját weboldalt hozz létre!
