HTML elemek és tagek
A HTML dokumentum egy elemekből álló szerkezet. Ezek az elemek határozzák meg, mi jelenjen meg az oldalon és hogyan.
-
Egy elem lehet egy szöveg, egy kép, vagy akár egy űrlap is.
-
A tagek mutatják meg, hol kezdődik és hol ér véget az elem.
Például egy bekezdést így jelölünk:
<p>Itt egy szöveg</p>-
<p> a nyitó tag,
-
</p> a záró tag,
-
közöttük pedig a tartalom.
Tagek és elemek felépítése
Egy HTML elem 3 részből áll:
-
Nyitó tag
-
Tartalom
-
Záró tag
A nyitó tag tartalmazhat attribútumokat is, amelyek további információkat adnak az elemről. Ezek név-érték párok formájában jelennek meg, pl. alt=”leiras”.
Vannak önzáró tagek is, mint pl.:
<img src="kep.jpg" alt="leírás">Ezek nem tartalmaznak záró taget, mert nincs bennük tartalom.
Tagek és elemek – miben különböznek?
-
A tag csak a jelölés: <p> vagy </p>.
-
Az elem pedig a teljes rész: tag + tartalom + záró tag.
A HTML5 (3. Modul) több mint 140 beépített taget tartalmaz, de lehetőség van saját elemek létrehozására is.
Blokkszintű és soron belüli elemek
A HTML elemek két csoportra oszthatók:
-
Blokkszintű elemek: Teljes sort elfoglalnak, pl.:
-
<h1> – Címsor
-
<p> – Bekezdés
-
-
Soron belüli elemek: Egy soron belül maradnak, pl.:
-
<a> – Link
-
<span> – Stílusozás
-
<img> – Kép
-
Head és body tagek
A HTML dokumentum fő szerkezeti elemei:
-
<html> – a dokumentum gyökere
-
<head> – metaadatok (nem látszanak)
-
<body> – amit a felhasználó lát
A <head> tartalmazhat:
-
Címet: <title>
-
Metaadatokat: <meta>
-
Stílusokat: <link>
-
Szkripteket: <script>
-
Karakterkódolást: <meta charset=”UTF-8″>
A <body> tartalmazza az érdemi tartalmat:
-
Szövegek, címek, bekezdések
-
Képek, videók
-
Linkek, űrlapok
-
Listák, táblázatok
Ez a rész az, ahol a kreativitásod kibontakozhat!
HTML megjegyzések
A megjegyzések segítenek a kódban eligazodni. A böngésző nem jeleníti meg őket, de a forráskódban ott vannak.
<!-- Ez egy megjegyzés -->Ne rejts bizalmas infókat megjegyzésbe, mert a keresők és fejlesztők is láthatják.
