A HTML-programozás |
Manapság az Interneten több tízmillió honlap (vagy weblap, webpage,
homepage) található. Miért készítsünk mi is egyet? Ez bizony fogós kérdés.
Akinek nincsen komolyabb ötlete (vagy ismerete a HTML-programozás terén), az
készít egy személyes lapot, ahol bemutatkozik. Leírja ki is ő, illetve,
hogy mit szeret. Ezen oldalak nem örvendenek túl nagy látogatottságnak, de
legalább ismerőseinknek, barátainknak vagy munkatársainknak
bemutathatjuk őket. |
De hogyan készülnek a weblapok? |
Ezek az oldalak HTML-nyelvben íródtak. Persze vannak ezen belül további
érdekességek is (csak hogy megemlítsek egyet: a javascript nyelv), de a HTML
a lényeg. Ez a dokumentum valójában egy egyszerű szövegfájl, ami
utasításokat, úgynevezett tag-eket tartalmaz. Ezeket a parancsokat
természetesen majd tüzetesebben is megvizsgáljuk. Ilyen fájlok
készíthetők egyszerű szövegszerkesztőkkel is (erre a célra
alkalmas a DOS Editje, vagy a Windows Write-ja is, esetleg egy jegyzettömb,
nincs szükség Word-re). Persze itt is találhatunk remek
HTML-szerkesztőket, amelyek használatához nem is kell ismernünk a
nyelvet, de azért illik! És ilyen honlapszerkesztők nélkül is lehet
nagyszerű weboldalakat készíteni, sőt! Az ilyen
HTML-dokumentumok (vagy Internet-dokumentumok) megtekintéséhez nem
feltétlenül szükséges Internet. Amennyiben a merevlemezen tároljuk a fájlt
egyszerű böngészőprogrammal megtekinthetjük. Ilyen az Internet
Explorer, a Netscape Navigator vagy az Opera. Sajnos ahány böngésző
(vagy browser), annyi megjelenési forma. Ha elkészítünk egy jól mutató,
designos honlapot és Internet Exploreren teszteljük, az lehet, hogy Netscapen
nem lesz olyan szép. És az sem mindegy, hogy milyen felbontásban illetve
színmélységben teszteljük, mert Internet Explorer és Internet Explorer között
is lehet különbség! Ezután pedig nem árt figyelni a böngésző verziójára.
Ma már csak nagyon kevesen használnak régi típusú böngészőket és a
legújabbakat is kevesen használják, de annyival tartozik a honlap vezetője
(a webmester) a látogatóknak, hogy a lap, ha nem is ugyanúgy, de
megtekinthető legyen minden böngészőben. Ezek után persze nagyon
bonyolultnak tűnik a dolog, de még koránt sincs vége. Mindezek ellenére
nem szabad megijedni! Az
elkövetkezendőkben a HTML majd mindegyik elemét tárgyalni fogjuk.
Amelyek kimaradnak, azok nem túl megbízhatók, legalábbis nem minden esetben.
Ilyen az embded és a layer parancs. Az embded-et beillesztő webmesterek már kellő
jártasságot szereztek a HTML-programozásban, a layer-ek pedig megbízhatatlanok Internet Explorer
böngészőn. Ebből világossá válhat az is, hogy nem fogok foglalkozni
olyan részletekkel, melyek (több-kevesebb sikerrel) nem működnének a két
legnagyobb böngészőn, kivéve a marquee parancsot, amelyre egy egész cikket szánok. A cikksorozatban csak a
HTML-nyelv kap helyet, meg egy kis alapszintű javascript. |
Az alap utasítások |
Az utasítások mindig relációs jelek között vannak. A záró utasítás
előtt a / jel szerepel. A tag-okban alkalmazhatók idézőjelek, de
csak akkor, ha az egyértelmű a böngésző számára! Ha nem, a
böngésző egyszerűen figyelmen kívül hagyja az utasítást. A HTML
dokumentum megnyitását a <html> kóddal végezzük, így a lezárását a </html>-lel. A dokumentumnak két nagy része
van: a fejléc és a dokumentumtörzs vagy röviden csak törzs. Előbbi nyitó
utasítása a <head>, utóbbié a
<body>. A fejlécben kap még helyet a <title> parancs, ami az oldal nevét jelenti. A
dokumentumtörzsbe fognak kerülni a valódi formázások: a szövegek, a képek,
stb. A fejlécbe csak néhány különleges kód kerül, például sok javascript-kód.
Ha a szerkesztő utasításokat szeretne elhelyezni a dokumentumban (melyet
nem látnak a látogatók), azt is megteheti a <!—nyitó- és --> záró kód segítségével. Lássunk egy
egyszerű dokumentumot! <!—Ez itt a
szerkesztő üzenete --> <html> <head> <title>Első
weblapom</title> </head> <body> Ez itt a dokumentumtörzs...<br> Ez itt a szöveg...<p> Itt pedig egy új bekezdés látható... </body> </html> A példában két
új parancs is látható, a <br> és a <p>. Előbbi
egy új sort eredményez, utóbbi egy új paragrafust. Előbbi parancsot
sosem kell lezárnunk, utóbbit csak nagyritkán. Lehetőségünk van a
szöveghez különböző igazítást is rendelni, amelyet a <p> címke használatával tehetünk meg. A <p align=##> címke ilyen, ha a ## helyén az alábbi szavak valamelyike található: left, right, center. A left parancs balra, a right jobbra, a center pedig középre igazítja a szöveget egészen a
következő paragrafus megkezdéséig. Lehetőségünk van sorkizárt
szöveg írására is, amihez a <p align=justify> parancsot kell begépelnünk. Ez sajnos nem
működik minden böngészőnél. Címeket (vagy heading) is írhatunk. Ezeket a <hi> paranccsal lehet előcsalni, ha az i helyén egy szám áll 1-től 6-ig. Az
1-es áll a struktúra legtetején, azaz ez a legnagyobb. Természetesen a
betűk méretét nemcsak így befolyásolhatjuk! A <font> parancs mögé írt size paraméterrel is megváltoztathatjuk. Azaz a <font size=4> paranccsal négyes méretű
betűt írhatunk. Az alapértelmezett betűnagyság három. Természetesen
ez a méret nem egyezik meg a szövegszerkesztőkben megadott méretekkel.
Ez azért van így, mert utóbbiaknál a méretek széles skálája áll
rendelkezésünkre, míg a HTML-nyelvben csupán hét nagyságfokozat van. Ezek a
szövegszerkesztők által használt pont méretben a következők: 1 = 8 pont 2 = 10 pont 3 = 12 pont 4 = 14 pont 5 = 18 pont 6 = 24 pont 7 = 36 pont Természetesen
lehetőségünk van a jól ismert félkövér, dőlt illetve aláhúzott
formázásokat is elvégezni, sőt, egy fix szélességű font (vagy
betűtípus) is rendelkezésünkre áll. A félkövér betűket a <b>, a dőlteket az <i>, az aláhúzottakat az <u>, a fix szélességűt pedig a <tt> paranccsal lehet használni. Lássunk egy
egyszerű lapot ezek ismeretében! <html> <head> </head> <body> <h1>Egyszerű
példák a HTML-programozásról</h1> <h2>Az
igazítás</h2> <p
align=center>Ez a szöveg középen van!<p> <p
align=left>Ez bal oldalon!<p> <p
align=right>Ez pedig jobb oldalon!<p> <p
align=justify>Ez a szöveg pedig egy sorkizárt szöveg. Persze ezt csak
akkor lehet észre venni, ha végig ér.<p> <h3>A betűméret</h3> <font
size=1>Ez a betű 1-es méretű...<br> <font
size=3>Ez a betű 3-mas...<br> <font
size=7>Ez pedig 7-es!<br> <h6>A betűformázások</h6> Írhatunk
<b>félkövér</b>, <i>dőlt</i>,
<u>aláhúzott</u> vagy <tt>fix szélességű</tt>
betűket. </body> </html> Természetesen
nem csak a szöveggel lehet bűvészkedni, de erről egy kicsit
később! A
fejlécről még nem tettem elegendő említést! A <base href=elérési út> parancsot használva megadhatjuk az URL
báziscímet, de erre már nincsen szükség, amióta megjelentek a legújabb
kiszolgálók! A <basefont size =#> paranccsal pedig az alapértelmezett betűméretet adhatjuk meg. A <link> parancs jelzi a többi dokumentummal
való kapcsolatot, az <isindex> pedig a keresőknek, hogy indexlapról van-e szó. Mindezeket Önnek
nem kell használnia, hogy dokumentuma élvezhető legyen! |
Sípos Zoltán |