2. modul · HTML alapok · 3. lecke
Itt kezdődik az igazi HTML. Megtanulod, mi az az elem, mi a tag és mi az attribútum — és felépíted azt a keretet, ami minden weboldalban ott van, a legegyszerűbbtől a legbonyolultabbig.
<head>-be és mi a <body>-ba — és miért.charset, a lang és a viewport.Ezt a három szót a tananyag végéig használni fogjuk, és nem ugyanazt jelentik. Érdemes most, egyszer, tisztán megtanulni őket.
| Fogalom | Mit jelent? |
|---|---|
| Tag (magyarul: címke) |
A < és > közé írt jelölés önmagában. Például <p> vagy </p>. |
| Elem | A nyitó tag + a tartalom + a záró tag együtt. Tehát <p>Szia!</p> egy elem. |
| Attribútum | Extra információ az elemről, mindig a nyitó tagben, név="érték" formában. Például lang="hu". |
A záró tag mindig csak ennyi: </p>. Soha nem
</p title="Tipp">. Az attribútumok kizárólag a nyitó tagbe kerülnek.
A title attribútum egy súgószöveget ad az elemnek: ha ráviszed
az egeret, megjelenik egy kis buborék. Próbáld ki a jobb oldali eredményen — vidd rá az egeret a
második bekezdésre, és várj egy pillanatot!
<p>Ez egy sima bekezdés.</p> <p title="Ez a súgószöveg!"> Erre vidd rá az egeret. </p>
title, nem TITLE.title="Tipp".title = "Tipp" kerülendő.<p id="a" title="b">.Van néhány elem, amelyiknek nincs tartalma — ezért záró tagja sincs. Ezeket üres elemeknek hívjuk. Nem azért üresek, mert nem csinálnak semmit, hanem azért, mert önmagukban teljesek.
| Elem | Mit csinál? |
|---|---|
<br> | Sortörés a szövegen belül |
<hr> | Vízszintes elválasztó vonal |
<img> | Kép beszúrása (7. lecke) |
<meta> | Információ az oldalról, a head-ben |
<link> | Külső fájl (pl. stíluslap) becsatolása |
<input> | Űrlapmező (9. lecke) |
<p> Kovács Anna<br> Budapest<br> anna@example.com </p> <hr> <p>A vonal alatti rész.</p>
<br> tageknek nincs záró párjuk — nem is lenne mit bezárni.
Figyeld meg: a kódban lévő sortörések önmagukban nem okoznak sortörést (ezt az
1. leckében láttuk), a <br> viszont igen.
<br />?
Régebbi kódokban és más nyelvekben (pl. React) az üres elemeket perjellel zárják:
<br />. Ez egy korábbi szabvány, az XHTML öröksége.
A mai HTML-ben fölösleges, de nem hiba — a böngésző figyelmen kívül hagyja.
Mi végig a rövid alakot használjuk: <br>.
A lényeg az egységesség: ne keverd a kettőt egy fájlon belül.
A <br> nem a bekezdések elválasztására való! Ha két külön
gondolatot írsz, azok két külön <p> elem. A
<br>-t csak ott használd, ahol a sortörés a tartalom része —
például címben, versben.
Az elemek egymásba ágyazhatók: egy elem tartalma lehet egy másik elem. Így épül fel az egész oldal. Egyetlen szabály van, de azt szigorúan be kell tartani:
Amit később nyitottál, azt előbb kell bezárni. Az elemek nem keresztezhetik egymást — úgy kell egymásba illeszkedniük, mint az orosz babáknak.
<p>Ez <strong>fontos</strong> szó.</p>
<p>Ez <strong>fontos</p> szó.</strong>
A jobb oldali esetben a <p> hamarabb zárul, mint a benne kezdett
<strong>. A böngésző nem dob hibát — megpróbálja
kitalálni, mit akartál, és az eredmény kiszámíthatatlan lesz.
Nézd meg ugyanazt a kódot kétféle írásmóddal. A böngészőnek teljesen mindegy — neked viszont nem:
<div><h2>Cím</h2><p>Szöveg <em>kiemelve</em>.</p></div>
<div> <h2>Cím</h2> <p>Szöveg <em>kiemelve</em>.</p> </div>
Ugyanaz a két kód, karakterre azonos eredménnyel. A jobb oldaliból viszont
egy pillantás alatt látszik, hogy a h2 és a p
a div belsejében van, az em pedig a
p-n belül.
Most jön az, amit minden HTML-fájlod így fog kezdeni. Nézd meg, aztán szedjük szét soronként.
<!DOCTYPE html> <html lang="hu"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Kovács Anna oldala</title> </head> <body> <h1>Üdvözöllek!</h1> <p>Ez az első igazi weboldalam.</p> </body> </html>
<!DOCTYPE html>
Ez nem HTML-elem, hanem egy utasítás a böngészőnek: „ez a fájl a modern HTML
szabvány szerint készült, eszerint értelmezd". Mindig ez a fájl legelső sora —
még a <html> előtt.
A böngésző átvált egy régi, „bolondbiztos" üzemmódba (quirks mode), amiben a méretek és az elrendezés máshogy viselkednek. Ez később, CSS-nél okoz megmagyarázhatatlan hibákat. Egy sor — ne hagyd le.
<html lang="hu">
A gyökérelem: ezen belül van az oldal összes többi eleme. A
lang="hu" attribútum megmondja, hogy az oldal magyar
nyelvű. Ez nem kozmetika:
<head> — a „fej"Ide kerül minden, ami az oldalról szól, de nem látszik az oldalon: a cím, a kódolás, a stíluslap becsatolása. Gondolj rá úgy, mint egy könyv impresszumára.
<body> — a „törzs"Ide kerül minden, ami látszik: szöveg, kép, link, táblázat, űrlap, gomb. A könyv tartalma.
Szöveget írni a <head>-be. Ha oda teszel egy
<h1>-et, a böngésző „megjavítja": kidobja a
head-ből, és a body elejére rakja, de ettől függetlenül ne csináljunk ilyet szándékosan.
Ami látszani fog, az mindig a
body-ba megy.
<head> <title>Ez a böngészőfülön van</title> </head> <body> <h1>Ez az oldalon van</h1> </body>
title szövege sehol nem jelenik meg az oldalon —
a böngésző fülén látszik. Ezért nem látod itt a jobb oldali eredményben sem.
<meta charset="UTF-8"> — a karakterkódolás
Ez mondja meg a böngészőnek, hogyan fejtse vissza a fájl bájtjait betűkké.
Az UTF-8 az a kódolás, amiben a világ minden betűje elfér — beleértve az
ő, ű, á
karaktereket is.
Árvíztűrő tükörfúrógép
ÃrvÃztűrÅ‘ tükörfúrógép
Mert a böngésző nem tudja értelmezni a betűket addig, amíg meg nem tudja, milyen kódolásban
vannak. Ezért a charset legyen a <head>
első sora — még a title előtt, hiszen abban is
lehet ékezet.
<title> — az oldal címeEz a szöveg három helyen jelenik meg, és mindhárom számít:
<title>Document</title> <title>index</title> <title>Új lap</title>
<title>Kovács Anna – portfólió</title> <title>Kapcsolat | Anna oldala</title> <title>Rakott krumpli receptje</title>
Egy fájlban pontosan egy <title> lehet. Ha
többoldalas weboldalt készítesz, minden oldalnak saját, más címet adj — nem
mindegyiknek ugyanazt.
<meta name="viewport" ...> — a mobilnézetEnélkül a telefonok „becsapják" magukat: úgy tesznek, mintha egy 980 képpont széles asztali képernyő lennének, majd az egészet lekicsinyítik. Az eredmény: olvashatatlanul apró betűk, amiket nagyítgatni kell.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
| Rész | Mit jelent? |
|---|---|
width=device-width | „A lap szélessége legyen akkora, amekkora az eszköz képernyője valójában." |
initial-scale=1.0 | „Induláskor ne nagyíts és ne kicsinyíts." |
Ezt a sort most egyszerűen tedd be minden oldaladba. Hogy mire jó pontosan, és hogyan építesz rá igazi mobilnézetet, azt a 22. leckében (Reszponzív design) nézzük meg.
<link> — a stíluslap becsatolása
Ez lesz a leggyakoribb vendég a head-edben, amint elkezdünk CSS-t írni:
<link rel="stylesheet" href="style.css">
A rel="stylesheet" mondja meg, hogy ez egy stíluslap, a
href pedig azt, hol találja. Részletesen a 12. leckében.
| Elem | Mire való? |
|---|---|
<meta name="description" content="..."> | Az oldal rövid leírása — ez jelenhet meg a Google-találat alatti szürke szövegként. |
<meta name="author" content="..."> | A szerző neve. |
<link rel="icon" href="..."> | A böngészőfülön megjelenő kis ikon (favicon). |
<style> ... </style> | CSS közvetlenül az oldalba írva (12. lecke). |
<script src="..."></script> | JavaScript becsatolása — ezzel most nem foglalkozunk. |
Mivel az elemek egymásba ágyazódnak, az egész oldal egy fastruktúrát alkot. Ezt a szemléletet érdemes most rögzíteni, mert a CSS-nél (13. lecke) pontosan erre fogunk építeni: ott „szülőkről", „gyerekekről" és „testvérekről" beszélünk majd.
html a gyökér. A head és a body a gyerekei — és egymásnak testvérei.Nyomj F12-t bármelyik oldalon, és nézd meg az Elements fület. Pontosan ezt a fát látod ott, kis háromszögekkel nyitogatható ágakkal. A böngésző így tárolja az oldalt a memóriájában.
A HTML-nek teljesen mindegy, hogyan tördeled a kódot. Az alábbi három írásmód betűre ugyanazt az oldalt eredményezi. Mégis csak az egyik elfogadható.
| Szabály | Miért? |
|---|---|
| Egy beágyazási szint = 2 szóköz | Így ránézésre látszik, mi minek a gyereke. (Egyesek 4-et használnak — a lényeg, hogy végig ugyanazt.) |
| Minden elem új sorban kezdődjön | Kivéve a rövid, szövegen belüli elemeket, mint a <strong> vagy az <a>. |
| A záró tag a nyitóval egy oszlopban | Ha lefelé húzol egy képzeletbeli vonalat, párban kell állniuk. Ha nem állnak, hiba van. |
| Shift+Alt+F | A VS Code mindezt megcsinálja helyetted. Használd minden mentés előtt. |
Ha megnyomod a Shift+Alt+F-et, és egy blokk hirtelen váratlan mélységbe csúszik, az majdnem biztosan azt jelenti, hogy fentebb elfelejtettél bezárni valamit. Ez a leggyorsabb módja a hiányzó záró tag megtalálásának.
A komment olyan szöveg a kódban, amit a böngésző figyelmen kívül hagy. Neked szól, vagy annak, aki utánad olvassa a fájlt.
<!-- Ez itt a fejléc része --> <h1>Kovács Anna</h1> <!-- Ezt a bekezdést egyelőre kikapcsoltam: <p>Ez most nem látszik.</p> --> <p>Ez viszont igen.</p>
<!-- jellel kezdődik és -->
jellel végződik. Több sorra is kiterjedhet — így tudsz ideiglenesen „kikapcsolni"
egy kódrészletet anélkül, hogy törölnéd. A VS Code-ban ez a Ctrl+/.
A komment nem látszik az oldalon, de ott van a forráskódban — bárki megnézheti Ctrl+U-val. Soha ne írj kommentbe jelszót, személyes adatot vagy olyat, amit nem vállalsz.
<!-- ===== FEJLÉC ===== --> — hosszú fájlban aranyat ér.<!-- TODO: ide jön még a kapcsolat űrlap --></div><!-- /kartya -->| Szabály | Kötelező? | Megjegyzés |
|---|---|---|
| A tagek neve kisbetűs | Nem kötelező, de mindig így írjuk | A <P> is működik, de senki nem ír így. Legyél következetes. |
| Az attribútumérték idézőjelben | Egyszerű értéknél nem, de mindig tedd ki | class="nagy kek" — szóközös érték idézőjel nélkül azonnal eltörik. |
| Minden nyitott elem bezárva | Néhánynál elhagyható, de soha ne tedd | A </p> elméletben elhagyható — a gyakorlatban ez a hibák forrása. |
Egy <h1> oldalanként |
Nem kötelező, de erősen ajánlott | A h1 az oldal főcíme. Egy oldalnak egy főcíme van. (4. lecke) |
Egy <title> és egy <body> |
Igen, kötelező | Ezekből tényleg csak egy lehet egy dokumentumban. |
Van egy hivatalos ellenőrző: a W3C Validator
(validator.w3.org). Bemásolod a kódot, és kilistázza a hibákat.
A 25. leckében részletesen megnézzük — de már most kipróbálhatod az alapvázzal.
Előbb válaszolj magadban, csak utána nézd meg a megoldást.
1. Mi a különbség a tag és az elem között?
A tag a < és > közé írt jelölés önmagában (<p>). Az elem a nyitó tag, a tartalom és a záró tag együtt (<p>Szia!</p>).
2. Írd le fejből egy HTML-oldal teljes alapvázát!
<!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> </body> </html>
3. Miért hibás ez: <p>Nagyon <em>fontos</p></em>?
Az elemek keresztezik egymást: az em később nyílt, mégis később is zárul. Helyesen: amit később nyitottál, előbb kell bezárni — <p>Nagyon <em>fontos</em></p>.
4. Az oldaladon a magyar ékezetes betűk helyett krikszkrakszok jelennek meg. Mi hiányzik, és hova kell tenni?
A <meta charset="UTF-8">, méghozzá a <head> legelső soraként — még a title előtt, mert abban is lehet ékezet.
5. Hol jelenik meg a <title> tartalma?
Három helyen: a böngészőfülön, a könyvjelző nevében, és a keresőtalálatok kattintható címeként. Magán az oldalon sehol.
6. Miért nem jó ötlet jelszót írni HTML-kommentbe?
Mert a komment nem látszik az oldalon, de benne van a forráskódban, amit bárki megnézhet Ctrl+U-val.
7. Melyik elemnek nincs záró tagja, és miért? Mondj hármat!
Az üres elemeknek — például <br>, <hr>, <img>, <meta>, <link>, <input>. Azért, mert nincs tartalmuk: nincs mit közrefogni.
nev="ertek", kisbetűvel, idézőjelben, csak a nyitó tagben.br, hr, img, meta, link, input) nincs záró tagjuk.<!DOCTYPE html> → <html lang="hu"> → <head> + <body>.charset (elsőként!), viewport, title.<!-- ... -->) nem látszik az oldalon, de a forrásban ott van.