Elit Hardver
1. HTML-oldalak felépítése
A HTML (HyperText Markup Language) a modern weboldalak alapja. Ebben a cikkben megismerkedhetsz a HTML dokumentumok alapszerkezetével, a kötelező elemekkel és a szemantikus HTML használatával.
Érettségi információ
Ez a lecke VEGYES tartalmú!
- Érettségi anyag: HTML dokumentum szerkezete (DOCTYPE, html, head, body, meta elemek)
- Bónusz: Szemantikus HTML elemek (header, main, footer)
Az alapszerkezet kötelező érettségi anyag. A szemantikus elemek hasznos tudás, de nem követelmény.
Alapszerkezet: A HTML dokumentum váza EMELT SZINT
Minden HTML dokumentum egy jól definiált struktúrát követ. Az alábbi elemek nélkülözhetetlenek minden HTML oldalon:
1. DOCTYPE deklaráció
A <!DOCTYPE html> deklaráció közli a böngészővel, hogy HTML5 dokumentummal van dolga. Ez mindig a dokumentum legelső sora kell legyen.
Miért fontos?
A DOCTYPE nélkül a böngésző "quirks mode"-ba kapcsol, ami inkonzisztens megjelenítést eredményezhet. A HTML5 DOCTYPE egyszerű és univerzális.
2. HTML elem
A <html> elem a gyökér (root) elem, amely az összes többi HTML elemet tartalmazza. A lang attribútum megadása fontos a keresőmotorok és képernyőolvasók számára:
<html lang="hu">
<!-- A teljes oldal tartalma ide kerül -->
</html>3. HEAD elem - Metainformációk
A <head> elem olyan információkat tartalmaz, amelyek nem jelennek meg közvetlenül az oldalon, de fontosak a böngésző és a keresőmotorok számára.
4. BODY elem - Látható tartalom
A <body> elem tartalmazza az oldal összes látható tartalmát: szövegeket, képeket, linkeket, stb.
Teljes példa: Minimális HTML dokumentum EMELT SZINT
<!DOCTYPE html>
<html lang="hu">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Az oldal címe</title>
</head>
<body>
<h1>Üdvözöllek az oldalon!</h1>
<p>Ez egy egyszerű HTML dokumentum.</p>
</body>
</html>Metaelemek: Fontos információk a HEAD-ben EMELT SZINT
A <head> elemben különböző metaelemek helyezkednek el, amelyek az oldal működését és megjelenítését befolyásolják:
Karakterkódolás (charset)
A <meta charset="UTF-8"> elem biztosítja, hogy az ékezetes betűk és speciális karakterek helyesen jelenjenek meg:
<meta charset="UTF-8">UTF-8 előnyei
Az UTF-8 univerzális karakterkódolás, amely támogatja az összes nyelv karaktereit: magyar ékezetes betűk, emoji-k, kínai karakterek, stb.
Viewport beállítás (reszponzív design)
A viewport meta tag nélkülözhetetlen a mobilbarát weboldalakhoz:
<meta name="viewport" content="width=device-width, initial-scale=1.0">- width=device-width: Az oldal szélessége igazodik az eszköz képernyőjéhez
- initial-scale=1.0: Az alapértelmezett zoom szint 100%
Title elem - Az oldal címe
A <title> elem szövege jelenik meg a böngésző fülén és a keresési találatokban:
<title>HTML-oldalak felépítése - HTML5 Blog</title>Fontos tudnivalók:
- Maximális hossz: 50-60 karakter (hosszabb címet levágja a Google)
- Legyen egyedi minden oldalon
- Tartalmazza a főbb kulcsszavakat
- Segíti a SEO-t (keresőoptimalizálást)
Description meta tag - Oldal leírása
A description meta tag rövid leírása az oldalról, amely megjelenik a keresési találatok alatt:
<meta name="description" content="Tanuld meg a HTML oldalak alapszerkezetét: DOCTYPE, html, head, body elemek, metaadatok és szemantikus struktúra.">Legjobb gyakorlatok:
- Maximális hossz: 150-160 karakter
- Vonzó, informatív szöveg
- Befolyásolja a kattintási arányt (CTR)
CSS stíluslap belinkelése - A LINK tag
A <link> tag külső erőforrásokat kapcsol be a HTML dokumentumba. Leggyakrabban CSS stíluslapok belinkelésére használjuk, de más célokra is alkalmas (favicon, betűtípusok, stb.).
CSS fájl belinkelése
A <link rel="stylesheet"> tag segítségével kapcsolhatjuk be a CSS stíluslapot, amely az oldal megjelenését szabályozza:
<link rel="stylesheet" type="text/css" href="style.css">A LINK tag legfontosabb attribútumai:
- rel="stylesheet": Meghatározza, hogy CSS stíluslapot linkelünk be (relationship = kapcsolat típusa)
- href="style.css": A CSS fájl elérési útvonala (relatív vagy abszolút)
- type="text/css": A fájl MIME típusa (opcionális, alapértelmezett érték)
Miért fontos a CSS belinkelése?
A CSS (Cascading Style Sheets) felelős az oldal vizuális megjelenéséért: színek, betűtípusok, elrendezés, reszponzív design. A külső CSS fájl használata:
- Szétválasztja a tartalmat (HTML) és a megjelenést (CSS)
- Több oldalon is újrafelhasználható
- Gyorsabb betöltés (a böngésző cache-eli a CSS fájlt)
- Könnyebb karbantartás (egy helyen módosíthatjuk a stílusokat)
A LINK tag elhelyezése és sorrendje
A <link> tagek mindig a <head> részben helyezkednek el. Az ajánlott sorrend:
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Oldal címe</title>
<meta name="description" content="Oldal leírása">
<!-- CSS stíluslap - ezt érdemes a favicon ELŐTT belinkelni -->
<link rel="stylesheet" type="text/css" href="style.css">
<!-- Favicon - később is betöltődhet -->
<link rel="icon" type="image/png" href="favicon.png">
</head>Miért fontos a sorrend?
- A böngésző sorban dolgozza fel a HTML elemeket
- A CSS betöltése fontosabb az oldal megjelenítéséhez, mint a favicon
- Ha a CSS későn töltődik be, villoghat az oldal (FOUC - Flash of Unstyled Content)
- A favicon később is betöltődhet anélkül, hogy zavarna a felhasználói élményt
Több CSS fájl belinkelése
Ha több CSS fájlunk van (pl. külön fájl a responsív designhoz vagy animációkhoz), azokat egymás után linkelhetjük:
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="responsive.css">
<link rel="stylesheet" type="text/css" href="animations.css">A CSS fájlok felülről lefelé haladva töltődnek be és alkalmazódnak. Ha ugyanaz a CSS szabály többször is szerepel, az utolsó érvényes (ezért "Cascading" = lépcsőzetes).
Relatív és abszolút elérési útvonalak
A href attribútumban különböző típusú útvonalakat használhatunk:
<!-- Relatív útvonal (ugyanabban a mappában) -->
<link rel="stylesheet" type="text/css" href="style.css">
<!-- Relatív útvonal (almappában) -->
<link rel="stylesheet" type="text/css" href="css/style.css">
<!-- Gyökér relatív útvonal (a domain gyökerétől) -->
<link rel="stylesheet" type="text/css" href="/css/style.css">
<!-- Abszolút URL (külső szerverről, pl. CDN) -->
<link rel="stylesheet" type="text/css" href="https://cdn.example.com/style.css">Favicon - Az oldal ikonja
A favicon a kis ikon, amely a böngésző fülön és a könyvjelzőkben jelenik meg:
<link rel="icon" type="image/png" sizes="32x32" href="images/favicon.png">Ajánlott méretek: 16x16, 32x32 vagy 64x64 pixel PNG vagy ICO formátumban.
Szemantikus HTML: Header, Main, Footer BÓNUSZ
A szemantikus HTML elemek jelentéssel bíró címkék, amelyek segítik a böngészőket, keresőmotorokat és képernyőolvasókat az oldal struktúrájának megértésében.
Header - Fejléc szakasz
A <header> elem az oldal vagy egy szakasz fejlécét tartalmazza (logó, navigáció):
<header>
<h1>Weboldal címe</h1>
<nav>
<ul>
<li><a href="index.html">Főoldal</a></li>
<li><a href="about.html">Rólunk</a></li>
<li><a href="contact.html">Kapcsolat</a></li>
</ul>
</nav>
</header>Main - Fő tartalom
A <main> elem az oldal fő tartalmát jelöli. Oldalanként csak egy <main> elem lehet:
<main>
<article>
<h2>Cikk címe</h2>
<p>A cikk tartalma...</p>
</article>
</main>Footer - Lábléc szakasz
A <footer> elem az oldal vagy egy szakasz lábléc információit tartalmazza (copyright, linkek):
<footer>
<p>© 2025 Weboldal neve. Minden jog fenntartva.</p>
<nav>
<a href="privacy.html">Adatvédelem</a>
<a href="terms.html">Felhasználási feltételek</a>
</nav>
</footer>Teljes példa: Szemantikus HTML oldal BÓNUSZ
Íme egy komplett példa, amely egyesíti az összes eddig tanult elemet:
<!DOCTYPE html>
<html lang="hu">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Modern HTML5 weboldal szemantikus elemekkel">
<title>Példa weboldal - HTML5 struktúra</title>
<link rel="icon" type="image/png" href="favicon.png">
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>Weboldal címe</h1>
<nav>
<ul>
<li><a href="index.html">Főoldal</a></li>
<li><a href="blog.html">Blog</a></li>
<li><a href="contact.html">Kapcsolat</a></li>
</ul>
</nav>
</header>
<main>
<article>
<h2>Cikk címe</h2>
<p>Ez egy bekezdés a cikkben. A szemantikus HTML
segít a keresőmotoroknak és a böngészőknek
megérteni az oldal struktúráját.</p>
<p>További tartalom itt...</p>
</article>
<aside>
<h3>Kapcsolódó tartalom</h3>
<p>Oldalsó információk és hivatkozások.</p>
</aside>
</main>
<footer>
<p>© 2025 Weboldal neve. Minden jog fenntartva.</p>
</footer>
<script src="script.js"></script>
</body>
</html>Összefoglalás
Ebben a cikkben megismerkedtél a HTML dokumentumok alapvető felépítésével:
- DOCTYPE, html, head, body: Az alapszerkezet kötelező elemei
- Meta elemek: charset, viewport, description, title
- Favicon: Az oldal ikonja
- Szemantikus HTML: header, main, footer elemek használata
A következő cikkben részletesebben megismerkedünk a szemantikus HTML elemekkel és azok szerepével az akadálymentességben és a SEO-ban.
Példák a weboldalunkon
Nézd meg, hogyan használjuk a HTML alapszerkezetet a gyakorlatban:
- Főoldal - Teljes HTML5 dokumentum szerkezet
- Processzor oldal - Metaadatok és SEO optimalizálás
- Kapcsolat oldal - Szemantikus elemek használata
Következő lépések
Gyakorold az itt tanultakat: hozz létre egy egyszerű HTML oldalt a fenti példa alapján, és nyisd meg egy böngészőben!
Következő cikk: Szöveges elemek HTML-ben - Ismerd meg a címsorokat (h1-h6), bekezdéseket, valamint a szemantikus és vizuális kiemelések közötti különbségeket. Tanuld meg a span elem használatát inline formázáshoz!