HTML tagek
Ezen tagok segítségével tudjuk leírni a böngészők számára, hogy mit kell megjeleníteni, milyen formában és melyik elem után.
Jelölésük: kacsacsőrnek nevezett jelek közé írjuk a tag nevét, ebből tudja a böngésző, hogy az egy specilás szöveg, amelyet a böngésző kell értelmezzen, majd végre kell hajtsa. pl: <head>, <body>, <title>
Két különböző csoportot különböztethetünk meg:
- - Páros tagek
- - Páratlan tagek
1. A páros tageknek nevezzük azokat, melyeknek a végét párjuk leírásával jelezzük.
Ez azt jelenti, hogy: a páros tagek rendelkeznek egy záró taggel mely ugyancsak azzal a névvel rendelkező tag, de előtte ellátjuk egy "/" jellel, pl: <a>-nak a </a> a zárótagje, <p>-nek a </p>, <h1>-nek a </h1>.
2. A páratlan tagek, melyeknek nincs záró elempárjuk. Ezek esetében a nyitótag bezárásánál, a ">" jel elé teszünk egy "/" jelet, ezáltal jelezve az elem végét, pl: <input />, <img />.
Másféle csoportosításban szintén 3 másik csoportra oszthatjuk a HTML tagokat:
- - Blokk elemek
- - Inline elemek
- - Formázó elemek
1. A Blokk elemek azok az elemek, melyek a képernyőn szélességben akkora helyet foglalnak el, amekkorát csak tudnak, így ha van lehetőségük a képernyő bal oldalától a jobb oldaláig tartanak, ezáltal abban a sorban már más elemek nem fognak elférni, így ezért a következő elem tartalma biztos, hogy új sorba fog kerülni.
pl. Ahogy az alábbi képen is látható a h1 elem egy teljes sort foglal el (a kék terület jelzi), így a h2 elem új sorba került.
2. Az Inline elemek azok az elemek, melyek akkora helyet foglalnak el, amekkora a bennük levő tartalom mérete, ezért ha többet leírunk egymás után, amíg egy sorban elférnek, az elemek tartalma egymás mellé fog kerülni.
pl. Ahogy az alábbi képen is látható az a, span és label elemek elférnek egy sorban, ezért egymásmellé kerülnek.
3. A Formázó elemek olyan elemek melyek stílust adnak a kirakott tartalomnak, pl színt vagy vastagítást a szövegeknek, igazítást, elhelyezést, pl. amikor négyzetet írunk vagy egyszerű matematikai képletet.
pl. Ahogy az alábbi képen is látszik, betűket vagy szavakat vastagíthatunk, dőlthetünk meg, aláhúzhatunk, stb.
A három legfontosabb tag a: <html>, <head>, <body>
Ezek segítségével mondjuk meg a böngészők számára, hogy a tartalom amit kap, az egy HTML forráskód. Azon belül a <head> tag segítségével tudunk beállításokat végrehajtani, és a <body> tagben mondjuk meg, a böngésző számára megjelenítendő tartalmat.
Pl. a formázó elemeknél található példából a böngészőnk a címsorba beírja, hogy "Wannacode.com" és az oldalon csak annyit fog megjeleníteni, hogy:
Ez a szöveg a formázó elemeket mutatja be, melyekben írhatunk megdõlt vagy akár aláhúzott betûkkel is.
Minden tag rendelkezik sok különböző tulajdonságokkal, mint pl. a type, value, href, src, stb., de persze vannak olyan tulajdonságok is, amelyekkel minden tag rendelkezik, ilyenek pl. a:
- class - egy vagy több osztálynevet lehet megadni, amire majd CSS-ből lehet hivatkozni
- name - az elemnek adhatunk egy nevet, erre szintén lehet majd hivatkozni
- id - az elemnek adhatunk egy egyedi azonosít, melyre hivatkozhatunk
- title - beállíthatunk egy szöveget, amely akkor jelenik meg, ha az egeret az elem fölé helyezzük
Ezeket a tulajdonságokat a nyitótagen belül kell meghatározni az alábbi formában:
<div class="ide_egy_vagy_tobb_classnev" id="azonosito">
Ide akármilyen tartalom
</div>
<div name="div neve" title="div címe">
Ide akármilyen tartalom
</div>
A class és name tulajdonságok értékeit több HTML tag is felveheti ugyanazon az oldalon, pl. több div class tulajdonságának az értéke lehet: "header_div", vagy több checkbox-nak a neve lehet "username".
Az id tulajdonság értéke egy adott oldalon egyszerre csak egyetlen egy tagnél szerepelhet! Ha több tagnél is szerepel, akkor a böngésző mindig a találatokból származó első elemet fogja visszaadni.