HTML Alapok – Bevezetés

Üdvözöllek a HTML világában! Ha most vágsz bele a webfejlesztésbe, az első és legfontosabb dolog, amit meg kell értened, az a HTML, vagyis a HyperText Markup Language. Ne ijedj meg a nevének hosszúságától, valójában ez sokkal egyszerűbb, mint amilyennek elsőre tűnik.

A HTML nem más, mint a weboldalak váza. Olyan, mint amikor egy házat építesz: a téglák és a falak azok a struktúrák, amik köré minden mást építesz. Egy weboldalon ezeket a téglákat és falakat a HTML elemei alkotják.

Gyakran hallani, hogy „a HTML csak egy jelölőnyelv” — és ez igaz is. Ez azt jelenti, hogy nem programozási nyelv, tehát nem fogsz vele műveleteket, számításokat végezni. A HTML a tartalom leírására és strukturálására szolgál. Megmondod vele a böngészőnek: „ez itt egy cím”, „ez itt egy bekezdés”, „ez egy kép”, „ez egy link”.

Hogyan néz ki egy HTML oldal?

Minden HTML oldal egy fa-struktúrára épül, ahol van egy „gyökér”, és azon belül ágaznak le a különböző részek. Az alapvető felépítése nagyon egyszerű: van egy fejrész (<head>) és egy törzs (<body>). A fejrészben helyezed el a háttérinformációkat (mint a cím, a karakterkódolás, vagy a stíluslapok hivatkozásai), míg a törzsben van maga a tartalom, amit az oldal látogatói látni fognak.

Az interneten minden weboldal HTML-re épül — még azok is, amik modern keretrendszerekkel, dizájnos felületekkel készültek. Ha a HTML szerkezete rossz, vagy átláthatatlan, akkor a böngésző sem fogja tudni megfelelően megjeleníteni az oldalt. Ráadásul a Google és más keresőmotorok is a HTML-t olvassák, hogy megértsék, miről szól az oldalad. Szóval, ha már az elején tisztán, jól strukturáltan tanulod meg felépíteni a HTML-t, később rengeteg időt és bosszúságot spórolsz meg.

A HTML fejlődése

A HTML folyamatosan fejlődött. Ma már a HTML5 szabványt használjuk, amely rengeteg új, modern elemet hozott magával. Például már külön elemek vannak a navigációra (<nav>), láblécre (<footer>), fő tartalomra (<main>) vagy éppen cikkekre (<article>). Ezek nemcsak segítenek a kódod átláthatóságában, de a keresőmotorok és a kisegítő technológiák (például képernyőolvasók) számára is sokkal egyértelműbbé teszik a tartalmad szerkezetét.

A HTML és a stílus

Fontos megérteni: a HTML a szerkezet, a CSS pedig a stílus. Ez azt jelenti, hogy míg a HTML leírja, mi van az oldalon (pl. cím, szöveg, lista), a CSS mondja meg, hogyan nézzen ki. Most, kezdésként, elég, ha a HTML-t érzed magabiztosan. A stílusok később jönnek, és akkor sokkal könnyebben lesz őket kezelni, ha már biztos kézzel írod a HTML-t.

Összefoglalva

A HTML egy barátságos, logikus, könnyen tanulható nyelv. Lehet, hogy most még sok új címkével és szabállyal találkozol, de pár nap múlva már úgy fogsz rá tekinteni, mint egy második nyelvre. Ha egyszer megérted az alapelveit, minden webes technológia, amit később tanulsz (legyen az CSS, JavaScript vagy valamilyen keretrendszer), sokkal könnyebben érthetővé válik.

És ne feledd: minden egyes hatalmas weboldal – legyen az Google, Facebook, vagy a ReadyTools – azzal kezdődött, hogy valaki leírta:

... <h1>Hello, world!</h1>

Ez a világ nyitómondata. Innen indul minden. 🙂