Áttekintés
Mi a HTML?
A HTML a HyperText Markup Language rövidítésre, melyet magyarra hiperszöveges jelölőnyelvként lehetne fordítani. Ahogy a nevéből is következik, ez egy jelölő nyelv, amely tehát a szövegen kívül formázási utasításokat és egyéb elemeket is tartalmaz. A HTML elsősorban a weboldalak leírására alkalmas, a megjelenítés tehát a böngészőben történik.
A HTML sajnos tartalmaz logikai és fizikai formázó elemeket is, mely minden bizonnyal a kezdeti átgondolatlanság eredménye. Az újabb szabványokban tudatosan mozdítják el azt abba az irányba, hogy lehetőleg csak szöveget és logikai formázásokat tartalmazzon, a fizikai formázást pedig egy mások szabványra, a CSS-re bízza.
Mivel a HTML célja elsősorban a weboldal statikus megformázása, a weboldalak viszont ma már alapvetően dinamikusak, több évtizedes feszültség húzódik e kettő között. A kezdeti verziókban nagyon kevés dinamikus lehetőség volt a weboldalak készítésében:
- Mindenekelőtt a linkeket érdemes megemlíteni, ami annyira alapvető újítás volt, hogy a szabvány nevébe is belekerült (a linket hiperhivatkozásnak is nevezzük).
- Talán a legjelentősebb, és a legtöbb lehetőséget tartalmazó technológia az űrlapok kezelése volt.
- Végül az animált gif kép a web hajnalán élte reneszánszát, ami az egyetlen olyan lehetőség volt kezdetben, ami a már betöltött oldalon dinamikát tartalmazott.
Akkoriban tehát rendkívül kevés lehetőség volt bármiféle dinamizmust belevinni az oldalakba, és ami még zavaróbb volt az az, hogy mindezt csakis úgy lehetett, hogy a böngésző újratöltötte a teljes oldalt. Maga a HTML szabvány nem nyújt megoldást erre a problémára. Az idők folyamán számos próbálkozás született arra, hogy dinamizmust vegyenek az alapvetően statikus HTML-be, melyeket át fogjuk tekinteni.
Sablon
Hozzuk létre a következő példát, pl. helloworld.html néven, és nyissuk meg egy böngészőben:
<!DOCTYPE html> <html> <head> <title>Hello, világ!</title> </head> <body> <p>Ez egy HTML <i>helló világ</i> példa.</p> <p>Ez pedig egy <a href="http://faragocsaba.hu/html">HTML tananyag</a>.</p> </body> </html>
Ez egy jól felépített példa; a böngészők ennél "lazábban" felépített oldalt is képesek megnyitni. Magyarázat:
- Az első sorral azt jelöljük, hogy ez egy HTML oldal.
- Az egész oldalt <html> ún. tag-ek közé írtuk. Figyeljük meg az elején a nyitó <html> tag-et, és a végén a záró </html>-t.
- Az oldal két fő részből áll: <head> és <body>. Az első a fejléc metainformációkat tartalmazza (ezekről egy küön szakaszban lesz szó), a második pedig magát a tartalmat (lényegében erről szól ez az oldal).
- A <body> rész két paragrafust (<p>) tartalmaz, az egyik dőlt betűs (<i>) részt is, a másik pedig egy linket (<a>).
Az anyag nagy része olyan, hogy a <body>…</body> részen belülre kell írni; a fenti példát használhatjuk sablonként.
Komponensek
A fenti példából már sejthetjük, hogy a HTML eléggé bőbeszédű. A fő komponensek az alábbiak:
- Tag-ek: ezek a legfontosabb elemei a HTML-nek. A tag-ek többségének van nyitó és záró része is. Pl. a <b> hatására (ld. lejjebb) addig vastag betűvel írja, amíg nem fut bele egy lezáró </b>-be. Az XML-lel ellentétben a HTML-ben vannak olyan tag-ek is, amelyeknek nincs lezáró párjuk; ilyen pl. a képet megjelenítő <img> (ld. lejjebb). A HTML szabvány előírja, hogy egymásba ágyazás esetén a lezárás fordított sorrendű legyen (pl. <b><i>…</i></b>), viszont a tapasztalat az, hogy a böngészők megbirkóznak a nem "élére vasalt" HTML oldalakkal is (pl. <b><i>…</b></i>).
- Attribútumok: az attribútumok segítségével a tag-ek működése "finomhangolható". Vannak olyan tag-ek, melyek értelmetlenek attribútum nélkül; ilyen pl. a már bemutatott <a> tag href attribútuma, ami a link URL-jét adjuk meg. Az attribútumok tulajdonképpen kulcs-érték párok, egyenlőségjellel elválasztva. A kulcsot idézőjelek nélkül kell megadni, az értéket pedig célszerű idézőjelek közé tenni, bár a HTML szabvány eléggé megengedő ezzel kapcsolatban. Használhatunk egyszeres ('…') és kétszeres ("…") idézőjelet is, ill. egy szavas értéke setén el is hagyhatjuk az idézőjelet. Pl. az alábbiak egyenértékűek: <a href="http://faragocsaba.hu">FCS</a>, <a href='http://faragocsaba.hu'>FCS</a>, <a href=http://faragocsaba.hu>FCS</a>. Az ajánlott mód a kétszeres idézőjel. Egy tag-nek több attribútuma is lehet; ez esetben szóközzel elválasztva kell megadni őket.
A következő szempontokat érdemes figyelembe vennünk:
- A HTML az ún. fehér karaktereket (szóköz, tabulátor, új sor) összevonja. Tehát tetszőleges számú szóközt, tabulátor vagy akár új sort írhatunk, az olyan, mintha egyetlen szóközt írtunk volna. Ha pl. új sort szeretnénk írni, azt explicit jelezni kell HTML tag-gel, pl. a <br> (paragrafusok belüli) új sort kezd.
- A megjegyzés meglepően összetett a HTML-ben: <!— ez egy megjegyzés —>.
- A HTML szabvány érzéketlen a kis- és nagybetűre, tehát a <html>, a <HTML> és a <Html> egyenértékű, sőt, keverhető. Ugyanez igaz az attribútumok kulcsaira is. A kialakult konvenció szerint a tag-eket és az attribútumok kulcsait csupa kisbetűvel írjuk.
- A HTML-nek már számos verziója létezett, új HTML tag-ek jelentek meg ill. váltak elavulttá. Ráadásul kiterjeszthetővé is tették, azaz különböző keretrendszerek segítségével saját tag-eket definiálhatunk. Érdemes tudni, hogy a nyelv gondozói elvként lerögzítették azt, hogy a jövőben az összes tag egy szavas lesz, kötőjel nélkül. Ha biztosak szeretnénk lenni abban, hogy a saját tag-ünk semmilyen jövőbeli szabványos HTML tag-gel nem ütközik, akkor legyen a saját tag-ünk két szavas, kötőjellel elválasztva.
Szöveg formázás
A web hajnalán a HTML elsősorban szöveg formázására volt alkalmas; valójában nem volt sokkal több, mint egy nyomtatott szöveg, monitoron olvasva. Sajnos logikai és fizikai formázási lehetőségeket is beletettek, amitől mind a mai napig nem sikerült teljesen megszabadulni. A cél az lenne, hogy a HTML csak logikai formázásokat tartalmazzon, és minden fizikai formázás CSS segítségével történjen.
Fejlécek
A szöveg logikai struktúráját hat fejléc tag segíti elő, rendre <h1>…</h1>, <h2>…</h2>, …, <h6>…</h6>, pl.:
<h1>Első fejezet</h1>
<h2>Első alfejezet</h2>
Szöveg.
<h3>Első al-alfejezet</h3>
Szöveg.
<h3>Második al-alfejezet</h3>
Szöveg.
<h2>Második alfejezet</h2>
Szöveg.
<h1>Második fejezet</h1>
Szöveg.Kinézet:
A böngészők sajnos a fejléceket nem túl szépen jelenítik meg, és ez különösen igaz a legnagyobbra, így a fejlesztők sajnos gyakran eleve kettessel szinttel kezdik. Ill. az is előfordul, hogy valamelyik fejléc megtetszik, és azt használják pl. kiemelésre. Egyik sem jó gyakorlat.
Fizikai formázások
A szöveg fizikai kinézetét befolyásoló
TODO: B, I, BR, PRE
Logikai formázások
Logikai egységek
TODO: P, DIV, SPAN, HR
Táblázatok
Felsorolások
Űrlapok
TODO: FORM
Grafika
Képek
Canvas
SVG
Média
Fejléc információk
HTML API
Kiegészítések
CSS
JavaScript
Kliens oldali binárisok
A történelmi hűség céljából érdemes említést tenni a böngésző oldali binárisokról, amelyek egykor elengedhetetlen részét képezték a weboldalaknak, idővel viszont a támogatásukat megszüntették, a weboldalak pedig átálltak HTML5-re.
- Applet: Java-ban írt kisebb alkalmazások.
- Flash: a Macromedia ill. az Adobe terméke.
- ActiveX: a Microsoft terméke.