FIGYELEM!
Szeretsz programozni? Szereted a kihívásokat? Szeretnél pénzt is keresni?
Az új CodeX ForeX minderre ITT lehetoséget ad!




A HTML-programozás

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