Szöveg. Dokumentum. Kezdjük ennél.
A sima szövegfájlban formázás nélküli karakterek (betűk+számok+jelek) vannak, vagyis egyéb információ nincs a fájlban, csak a szöveg. Ezt nevezik plain text -nek. (Néha írok ilyesmit, hogy szokjad a szakzsargont)
Windowson ezt a sima notepad-dal meg lehet nyitni, az ilyen fájlok .txt kiterjesztésűek.
A .htm vagy a .html kiterjesztésű fájlok is csak szövegek, épp annyi pusztán a különbség, hogy vannak benne blokkok, jelölőelemek, amik nem karakterekként fognak megjelenni, hanem a blokkban lévő dolgokat írják le. Egy dokumentumban (mint például egy Word vagy LibreOffice doksiban, vagy ebben is, amit most írok) ugyanis nem csak karakterek vannak, hanem bekezdések, kiemelt-formázott szövegrészek, táblázatok, képek, stb. is.
Most például nyomtam egy enter-t , ezzel egy új bekezdést kezdtem, html-ben ez így néz ki:
<p>
Most például nyomtam egy enter-t , ezzel egy új bekezdést kezdtem, html-ben ez így néz ki: </p>Egy blokk tehát két jelölő közt van, a jelölők nyitó-záró kacsacsőrökből állnak, köztük a blokk típusának jele (itt "p") ... a blokk kezdetét jelző jelölő a blokk zárótól abban különbözik, hogy a záróban a nyitó kacsacsőr után egy perjel is van. A <p> és a </p> között van a blokk tartalma, belső része, amibe (bizonyos megkötésekkel) szinte bármilyen más html elemet (blokkot) beletehetünk, ezért ezt a belső részt szokás innerHTML-nek nevezni.
Ezek a blokkjelölők tehát nem jelennek meg magukban, hanem ezeket a böngésző értelmezi (legalábbis megpróbálja). A html fájlokat ugyanis nem a notepad nyitja meg, hanem a böngésző, ami egy sokkal okosabb program. Meg lehet nyitni a html-t a notepadban is, de ebben az esetben plain textként jelenik meg, vagyis a html elemek nem kerülnek értelmezésre. De ebben a formában legalább át is írhatjuk őket. Próbáld ki, csinálj egy html fájlt!
Egyszerű, csinálj egy mappát, majd benne jobbklikk, uj-> szöveges dokumentum -> majd kiterjesztéssel együtt írd át a nevét mondjuk elsohtml.html -re. (Figyelmeztetni fog, hogy megváltoztatod a kiterjesztést, de pont ezt akarjuk. Ha nem fog figyelmeztetni, akkor rejtve van a kiterjesztés, ezt állítsd be a windowson, hogy jelenítse meg: egy programozónak illik minden fájl kiterjesztését látnia :-) )
Az elsohtml.html fájlt nyisd meg egy notepaddal, és írd bele (aztán mentés!):
<html>
<head>
<title>
Ez az első HTML-em!
</title>
</head>
<body>
Ez a doksi teste.
<p>
Ez az első paragrafus.
Hiába van ez előtt soremelés, ez nem látszik.
</p>
<p>
Ez a második bekezdés, hejj, de jó!
</p>
</body>
</html>
Most nyiss egy böngészőt, és nyisd meg vele az elsohtml.html fájlt, és ez lesz benne:
*******
Ez a doksi teste.
Ez az első paragrafus. Hiába van ez előtt soremelés, ez nem látszik.
Ez a második bekezdés, hejj, de jó!
*******
Az html jelölők közül semmi sem látszódik, csak a bennük lévő dolgok, de az se mind.
Ugyanis a böngésző értelmezte ezeket és megfelelően cselekedett.
Miket tartalmaz ez a fájl?
Az egyész két <html> jelölő közt van, ez így illik. (Még egy csomó más dolog is illene, ezt nevezik szabványnak, de ezekre majd később térünk ki)
A <html> blokk innerHTML-je két egymásutáni blokkot tartalmaz: <head> és <body>.
A head részben lévő dolgok nem szigorúan a dokumentum részei, inkább kiegészítő infót tartalmaznak.
A <head> rész innerHTML-jében van páldául a <title> rész, aminek az innerHTML-je a címsorban fog megjelenni, konkrétan, hogy "Ez az első HTML-em!"
A <body> blokk viszont már konkrétan a dokumentum, ebben 3 rész van most:
1. Egy szöveg magában ("Ez a doksi teste")
2. egy <p> blokk, és
3. még egy <p> blokk.
Amin most így végigmentünk, az a dokumentum szerkezete, a böngésző is így megy végig a fájlon és próbálja értelmezni. Ha hibát vétünk, akkor nem tudhatjuk majd biztosan, hogy mi fog megjelenni, például ha elrontjuk és <body> helyett <sody>-t írunk, vagy a <p> elemhez nem írunk záró </p> -t, akkor nem tudhatjuk biztosan, hogy mit fog produkálni a böngésző.
Ha nincsenek a dokumentumunkban hibák, akkor a dokumentumunk szabványos, elvárható, hogy minden böngészőben megfelelően, egyformán jelenjen meg (jobb esetben ez így is lesz).
A HTML struktúrában tehát ahogy végigmentünk, blokkokat, blokktípusokat találtunk, ezeket objektumokként is értelmezhetjük. Mivel dokumentumról van szó, és egy szabványos modellnek felel meg, ezért ezt a struktúrát DOM-nak szokás emlegetni.
Szeretném, hogy lásd, milyen egyszerű alapokon van ez az egész, ezért eleinte semmi olyan fejlesztőeszközt nem fogunk használni, ami bármit is elrejt vagy bonyolít. Ezért amire a továbbiakban szükséged lesz:
Firefox, rajta a Firebug bővítmény;
notepad++
Légyszi töltsd le ezeket, tedd fel, aztán folytatjuk.
Nincsenek megjegyzések:
Megjegyzés küldése