A webprogramozás alapjai

A webprogramozás alapjai

1


jegyzet

Dr. Medzihradszky Dénes azonos címő

fıiskolai jegyzetének felhasználásával és kiegészítésével

készítette Dr. Kopácsi Sándor


2

Tartalomjegyzék:

1 Bevezetés ...................................................................................................................... 3

1.1 A tantárgy célkitőzése ............................................................................................ 3 1.2 Követelmények...................................................................................................... 4 1.3 Az Internet és a web kialakulása, története.............................................................. 4 1.4 Nyílt forráskódú szoftverek, szabad szoftverek ....................................................... 6 1.5 A World Wide Web Konzorcium (W3C)................................................................ 7 1.6 W3C javaslatok...................................................................................................... 8 1.7 Ellenırzı kérdések/feladatok................................................................................ 10

2 Web szerverek mőködése, a szerver oldal ................................................................. 11

2.1 Virtual hosting..................................................................................................... 11 2.2 Az Apache projekt ............................................................................................... 13 2.3 Erıforrások azonosítása, URL, URI ..................................................................... 14 2.4 Szerver oldali programnyelvek ............................................................................. 18 2.5 Ellenırzı kérdések............................................................................................... 19

3 Kommunikáció a kliens és a szerver között............................................................... 20

3.1 Az OSI modell és rétegei...................................................................................... 20 3.2 Az OSI modell megvalósulása TCP/IP esetén....................................................... 22 3.3 TCP/IP ................................................................................................................ 23 3.4 HTTP .................................................................................................................. 25 3.5 Ellenırzı kérdések............................................................................................... 27

4 Web alkalmazások tervezése, megvalósítása ............................................................. 28

4.1 Honlapok, webhelyek, portálok ............................................................................ 28 4.2 Dizájn és áttekinthetıség...................................................................................... 29 4.3 Navigálás............................................................................................................. 29 4.4 Ellenırzı kérdések............................................................................................... 30

5 Leíró nyelvek.............................................................................................................. 31

5.1 HTML ................................................................................................................. 33 5.2 XHTML .............................................................................................................. 35 5.3 XML ................................................................................................................... 83 5.4 Ellenırzı kérdések............................................................................................... 86

6 A JavaScript nyelv alapjai ......................................................................................... 87

6.1 A nyelv szerepe ................................................................................................... 88 6.2 JavaScript a weboldalon....................................................................................... 89 6.3 Dokumentáció...................................................................................................... 91 6.4 Nyelvi elemek...................................................................................................... 92 6.5 Őrlapok és JavaScript......................................................................................... 103 6.6 Ellenırzı kérdések............................................................................................. 105

7 Stílusok, stíluslapok ................................................................................................. 106

7.1 A stíluslapok szintjei.......................................................................................... 108 7.2 Stíluslapok hierarchiája ...................................................................................... 110 7.3 Stíluslap formátumok......................................................................................... 111 7.4 CSS szelektorok................................................................................................. 113 7.5 CSS deklaráció .................................................................................................. 119 7.6 Ellenırzı kérdések............................................................................................. 136

8 Irodalomjegyzék, referencia táblázatok, szabványok ............................................. 137


3

1 Bevezetés

1.1 A tantárgy célkitőzése

A tantárgy célja, hogy a különbözı informatikai háttérrel rendelkezı hallgatóknak

elméleti áttekintést adjon a webes információ-továbbítás technikáiról és a webes

információ prezentálás korszerő módszereirıl, a dinamikus webes alkalmazásokról és

azok fejlesztési kérdéseirıl. Az elméleti ismeretek mellett a tantárgy nagy súlyt fektet a

gyakorlati készségek elsajátítására, az alkalmazástervezésre és felépítésére, a

számításban vehetı eszközökre és azok megfelelı alkalmazására. A tantárgy oktatása

során az elıadások keretében feldolgozott alapvetı webes ismeretek kiterjednek a web

szerverek mőködésétıl kezdve a webes technológiák során használatos leírónyelvek és

a legfontosabb kliens oldali programnyelv megismerésére is, valamint a ma egyre

népszerőbb stíluslapok használatára Az alkalmazástervezés, fejlesztés után érdeklıdı

hallgatóknak az alapismeretek elsajátításán túl lehetıséget kívánunk biztosítani a több

számítógépen futó alkalmazások, rendszerek alapjainak megismerésére, a gyakrabban

alkalmazott módszerek ismeretére. Gyakorlati példákon keresztül tipikus technológiákat

mutatunk be, kliens oldalon elsısorban a JavaScript nyelv nyújtotta lehetıségek

körébıl. A dokumentumokat formailag leíró nyelveken túl tárgyalásra kerülnek olyan

alapismeretek is, mint például az XML nyelv és technológia. Ennek központi szerepe

van a korszerő informatikai megoldásokban, legyenek azok elektronikus ügyviteli

portálok vagy egyszerő szabványos dokumentumok. A szerver oldalon alkalmazható

technológiákat a tantárgy keretében csak ismereti szinten sajátítják el a hallgatók, azok

készség szintő megértése és alkalmazása további specializált tantárgyak keretében

történik.


4

1.2 Követelmények

A tananyag elsajátításához elengedhetetlenek a következık: Számítástechnikai

alapismeretek, a számítógépes hálózatok mőködésének alapjai, valamint

dokumentumkezelési alapok és készségek. A tantárgy során programozási feladatok

megoldására kerül sor, ezért elıny a C-típusú programnyelvekben (C, C++, C#, Java )

szerzett programozási jártasság, az objektum fogalmának ismerete és az objektumok

kezelése, alkalmazása. Sok esetben hivatkozunk az Interneten fellelhetı részletes

dokumentációkra, forrásokra, például a leírónyelvek, a webes technológiák

szabványaira, az ezekkel kapcsolatos ajánlásokra. A hivatkozott weboldalakon való

tájékozódáshoz elengedhetetlenül szükséges az angol nyelv minimum olvasási-

megértési szintő ismerete. Ismertnek tételezzük fel a Programozási alapok és a Vizuális

programozás tantárgyakat, az ismétlések elkerülésére gyakran történik hivatkozás a

tantárgy tankönyveiben fellelhetı ismeretekre.

1.3 Az Internet és a web kialakulása, története

Az Internet nem más, mint az Amerikai Védelmi Minisztérium kutatóintézetében

(Advanced Research Project Agency, ARPA) a hatvanas években kifejlesztett távolsági

számítógép-hálózat, amely 1969 decemberétıl állt az egyetemek és a kutatóintézetek

rendelkezésére. Az Internet azóta óriási változáson ment keresztül, legalábbis ami

kiterjedtségét, gyorsaságát, illetve tartalmát illeti. Kiterjedtségének drasztikus

növekedése hátterében – ami az elmúlt 10 évet öleli fel – a számítógép-hálózatok

fejlıdése áll, hiszen az Internet tulajdonképpen számítógépek hálózata, az internetes

tartalom pedig az ezeken a számítógépeken tárolt információk összessége.

A World Wide Web (WWW) egy független projektnek indult az 1990-es évek elején az

Európai Nukleáris Kutatási Szervezetnél (CERN), Genfben, ahol akkor Tim Berners-

Lee dolgozott és az ı agyában született meg az ötlet egy olyan világmérető információs

bankról, amely az akkor már létezı Internet, mint szuperhálózatot hardverként

használva lehetıvé tenné praktikusan végtelen mennyiségő információ elhelyezését és

elérését.

Az Internet hálózatába kötött számítógépek kommunikációja az IP-cím alapján – ami az

egyes számítógépeket egyértelmően azonosítja –, és a http protokoll segítségével – ami

a számítógépek közötti kommunikációs szabvány – történik.


5

Internet cím, IP-cím: a számítógépekhez rendelt azonosítót IP-címnek (IP address)

nevezzük. Az IP-cím egy 32 bites szám, amelyet a leggyakrabban az úgynevezett

pontozott tízes formában (dotted decimal form) írunk le, azaz négy darab 0 és 255

közötti decimális számmal. Például: 62.213.7.84. Ez alapján egyértelmően azonosítható

egy számítógép az interneten.

Mivel az IP-címek emberi fogyasztásra teljesen alkalmatlanok (legalábbis nehezen

memorizálhatóak), ezért szükség volt valami olyan azonosító megalkotására, amely az

IP-címre épülve, tulajdonképpen ehhez kapcsolódóan névvel látja el az interneten

elérhetı, információkat tároló számítógépeket. Kialakították tehát a domén-neveket,

amelyek általában értelmesebb rövidítések (például: gdf.hu). A domén-nevek

felépítésénél ugyanúgy szükség volt az egyértelmő azonosíthatóságra, mint az IP-címek

esetében. Ezért országjelzéssel és az adott szervezet megjelölésével is ellátták, a kettıt

pedig egy pont választja el egymástól. A gépek IP-címeinek domén-névhez rendelését

úgynevezett névszerverek végzik.

Domén (domain): részterület vagy címterület, önálló, betőkkel jelölt részterület az

interneten. Ennek a könnyebben olvasható és értelmezhetı névrendszernek hátterében a

gépek számára érthetı IP-címrendszer áll. Az ilyen címterületek ismertetı jele a címben

olvasható .hu, .de, .ch országkódok, vagy az .edu, .gov, .com stb. szakterületi rövidítés.

A 90-es évek elejére tehetı az internet olyan mértékő elterjedése, ami már lehetıséget

adott kereskedelmi célok megvalósítására. Innen ered az Egyesült Államok-béli domén

nevekben a .com végzıdés, ami a commercial (kereskedelem) szóból származik. Az

amerikai kormányzat például .gov (government = kormányzat), a felsıoktatás pedig

.edu (education = oktatás) végzıdéső domén-neveket használ. A legelterjedtebbek

mellett ma már lehetıség nyílik arra is, hogy magánszemélyek is bejegyeztethessék

saját domén neveiket, végzıdésre való korlátozás nélkül. A domén név bejegyzéseket

központilag tartják nyilván, egy világmérető „domén bankban”. Ha például holnaptól

saját domén név alatt szeretnénk publikálni az Interneten, választhatjuk a következı

nevet: „kattints.ide”, vagy „kovacs.hajnalka.hu” – feltéve, hogy a domén név még nem

foglalt, vagyis még nem regisztrálta elıttünk más. A regisztráció körül kialakult

problémákból adódóan évekkel ezelıtt elindult a domén nevekkel való kereskedés, ami

egyesek számára gyümölcsözı üzletággá nıtte ki magát. Például ha valaki a

britneyspears.com domén nevet mondjuk 10 évvel ezelıtt bejegyeztette volna, mára

dollármilliókat kérhetne érte.


6

A példaként leírt címben a már ismert domén néven kívül megtalálható a „WWW”

rövidítés, amely az Internet legsokoldalúbb szolgáltatása, a World Wide Web rövidítése.

A „WWW” rendszerben minden dokumentumot vagy más objektumot az URL, vagyis

az univerzális forrásazonosító jelöl. A „http” (HyperText Transfer Protocol) a World

Wide Web szolgáltatók egymáshoz és a felhasználókhoz való kapcsolásához használt

rendszer, kommunikációs szabvány. A http szabvány segítségével tudunk az Interneten

böngészve számítógépünkre dokumentumokat, weboldalakat letölteni, majd ezeket a

böngészınk automatikusan – külön utasítás nélkül – meg is jeleníti.

1.4 Nyílt forráskódú szoftverek, szabad szoftverek

Az Internet – érthetı módon – elıször az amúgy is számítógéppel foglakozók körében

vált népszerővé. A kezdetekben nem álltak még rendelkezésre a grafikus felülető

böngészık, így az egyszerő http kliensek mőködtetése némi szakértelmet igényelt, a

számítógép felhasználók pedig sokszor a saját igényeiknek megfelelıen alakították a

netet. Így nem meglepı, hogy az elsı kommunikációk tárgya maga a számítógép, a

szoftverek voltak és az elsı információcserék szinte kivétel nélkül a szigorúan vett

felhasználók érdeklıdésének megfelelı volt. Egymás segítése sokszor vezetett

szoftvercserékhez, amit egy-egy lelkes programozó megszerkesztett a saját használatára,

hamarosan a terülten dolgozók köztulajdona lett. Mivel az Internet elsı felhasználói

egyetemek, kutatóintézetek voltak, a többi tudományágban megszokott nyíltsággal

cserélték ki az információkat, az eszközöket. Így keletkeztek a nyílt forráskódú,

publikus szoftverek, ahol a szerzık pont azzal a céllal publikálták a forrást is, hogy az

majd valaki tovább építheti, bıvítheti és így az eredeti szerzı is egy jobb változathoz

juthat az idık során.

Hasonló elveken alapultak az Internetet mőködtetı elemek, a kliensek, a web szerverek,

így végül nem csoda, hogy az olyan alapvetı eszközök, mint például az Apache web

szerver nyílt forráskódban terjedtek. Az sem volt egy utolsó szempont, hogy mivel a

forráskód lefordítása és a mőködı szoftver elıállítása azon a gépen történt, amelyen a

futtatására sor került, lehetıség nyílt a géphez a lehetı legjobban illeszkedı futtatható

változatot elıállítani. Ezzel szinte minden gépen egyedi szoftver született, amely

maximálisan ki tudta használni az adott gép hardver lehetıségeit.


7

Ennek jelentısége ma már erısen csökkent, a nagysebességő processzorok, a bıven és

olcsón rendelkezésre álló memória miatt, de a szabadon felhasználható, nyílt forráskódú

szoftverek – amelyek ma már szinte kivétel nélkül elérhetık úgynevezett bináris

disztribúcióban – megmaradtak és jelentıségük a Linux terjedésével szintén növekszik.

1.5 A World Wide Web Konzorcium (W3C)

A W3C megalapítására 1994 októberében került sor Tim Berners-Lee vezetésével, azzal

a céllal, hogy a web ki tudja használni az összes lehetıségét közös protokollok és

nyelvek kifejlesztésével. Az alapítók együttmőködést hoztak létre a Massachusetts

Institute of Technology (MIT) és a European Organization for Nuclear Research

(CERN) között, amely együttmőködést nagymértékben támogatta az U.S. Defense

Advanced Research Project Agency (DARPA) és az Európai Közösség is. Ehhez

késıbb számtalan új tag csatlakozott, ma a tagok száma több százra tehetı1.

A közös protokollok és nyelvek biztosítják a web töretlen fejlıdését és a kifejlesztett

standardok teszik lehetıvé az általános használatát, a különbözı böngészık és web

szerverek együttmőködését.

A W3C egy úgynevezett tagi szervezet, a tagok hozták létre és mőködtetik. Ez a

szervezeti mód biztosítja, hogy egyetlen szervezet se nyerjen teljes kontrollt a web

fölött, annak fontosságára való tekintettel. Tag nagyjából bármely szervezet lehet,

egyetemek, kutatóintézetek, gazdasági szervezetek. A fı tevékenységi terület a web

standardizálása, bár fontos megjegyezni, hogy itt nem kötelezı standardokról van szó,

hanem inkább ajánlásokról. Egész pontosan nem is standardokról, hanem ajánlásokról

(recommendations) beszélünk. Ennek betartása nem kötelezı, de mivel az összes

számottevı szoftverfejlesztı cég is tagja a W3C szervezetének, az általuk közösen

megfogalmazott ajánlások betartása számukra is célszerő, ha a web lehetıségeit

maximálisan kihasználni tudó alkalmazásokat kívánnak kifejleszteni.

A W3C céljai között szerepel, hogy a web minden felhasználó számára hozzáférhetı

legyen, tekintet nélkül a kulturális, képzettségi, képességi és erıforrás különbségekre. A

célok között az is szerepel, hogy a web egyaránt használható legyen olyan személyek

1 http://www.w3.org/Consortium/Member/List


8

számára, akik különbözı fizikai korlátokkal rendelkeznek, mint például csökkent

látóképesség.

Munkája során a W3C több más standardokkal foglakozó szervezettel is kapcsolatot

épített ki, mint például az Internet Engineering Task Force, befogadta és terjeszti a

Wireless Application Protocols (WAP) Forum javaslatait és együttmőködik az Unicode

Consortiummal is.

A W3C szervezetének jelenleg három intézmény ad otthont, ezek a következık:

− Massachusetts Institute of Technology az Egyesült Államokban.

− A Francia Nemzeti Kutatóintézet Európában

− Keio Egyetem Japánban

1.6 W3C javaslatok

A W3C által végzett legfontosabb munka a webspecifikációk (úgynevezett

Recommendations, magyarul javaslatok) kidolgozása, ezek az alkalmazott nyelveket

vagy a megfelelı protokollokat is jelenthetik. Általában idetartozik minden építıelem,

amit a webfejlesztés során felhasználhatunk. Ezeknek kifejlesztése egy jól bevált eljárás

keretében történik, amelynek lépései a következık:

− a W3C-hoz benyújtásra kerül egy javaslat, ami többnyire egy jól megalapozott

ötlet valamely területen;

− a W3C egy Feljegyzést publikál, amely alapján a tagok áttanulmányozzák a

javaslatot

− a W3C létrehoz egy Munkacsoportot, amely tagokból és meghívott szakértıkbıl

áll. A munkacsoport meghallgatja különbözı társaságok és társszervezetek

véleményét, megvitatja az így beérkezett javaslatokat és létrehoz egy

Munkapéldányt;

− a W3C publikálja a Munkapéldányt;

− amennyiben jelentıs új javaslatok nem érkeznek be, a W3C egy Javaslat jelöltet

állít elı és közzéteszi;

− ebbıl a W3C egy Javaslat tervezetet állít össze és benyújtja a tagságnak és az

igazgatónak jóváhagyásra;

− a tagság és az igazgató formális jóváhagyásával a W3C publikálja az új Javaslatot.


9

Így végül, amíg a W3C publikál egy új web standardot (javaslatot) látható, hogy a

specifikáció az egyszerő ötlettıl kiindulva egy nagyon alapos kidolgozáson és

jóváhagyáson ment keresztül. A kidolgozók többnyire azok a szoftverfejlesztık és web-

orientált cégek, egyetemek, kutatóintézetek, amelyek számára létkérdés az új

webstandard elfogadása és betartása.

Nem csak ilyen nagyléptékő ajánlásokat tesz a W3C, ajánlásai sokszor tipp jellegőek és

szórólapokon is megjelennek. Az egyik ilyen ajánlás az úgynevezett Web Accessibility

Initiative, azaz Web Hozzáférhetıségi Kezdeményezés, amelynek célja, hogy

weboldalunkat mindenki számára tegyük elérhetıvé. Ennek rövid összefoglalója a

következı2:

Képek és animációk: Használjuk az alt attribútumot a képi információk szöveges

leírására.

Képrégiók kezelése: Használjunk kliens-oldali régiómegadást (a map teg

segítségével) a kiemelendı képrészletekhez és társítsunk ezekhez szöveges leírást.

Multimédia: Tegyük elérhetıvé az audio anyag szöveges változatát (feliratos formában

és külön állományként is), a videó anyagokról pedig készítsünk leírást.

Hivatkozások: A hivatkozás szövegezése legyen olyan, hogy a szövegkörnyezetbıl

kikerülve is utaljon a hivatkozás céljára. Kerüljük például a kattints ide típusú linkeket.

Oldalszerkezet: Használjunk fejlécet, listákat, és következetes struktúrát. Amennyiben

lehetséges, használjunk CSS-t a szerkezet és a stílus leírásához.

Grafikonok és diagramok: Készítsünk kivonatot, vagy használjuk a longdesc

attribútumot.

Szkriptek, appletek és plug-inek: Nyújtsunk alternatívát arra az esetre, ha az aktív

elemeket a böngészı nem támogatja.

Keretrendszer: Használjuk a noframes elemet és a tartalomra utaló keretneveket.

Táblázatok: Készítsünk olyan megjegyzéseket, amelyek a sorról-sorra olvasáskor a

megértést segítik, valamint készítsünk összegzést a táblázatok tartalmáról.

2 Az egyes fogalmakat majd a teljes anyag elsajátítása során tisztázzuk, itt inkább az ajánlások átfogó

jellege a figyelemre méltó. A teljes kezdeményezés megtalálható a www.w3.org/WAI/ oldalon.


10

Ellenırizzük le a munkánkat. Használjunk ellenırzı eszközöket, kérdıíveket és a

részletes útmutatókat.

1.7 Ellenırzı kérdések/feladatok

Mi a W3C szerepe az Internet fejlıdése szempontjából?

Mit jelent egy W3C Javaslat?

Keressen a W3C weboldalán javaslatokat a HTML, XHTML és a CSS témában!

Mit tartalmaz a Web Hozzáférhetıségi Kezdeményezés?


11

2 Web szerverek mőködése, a szerver oldal

Az Internetes weboldalak esetében a kliens számítógép (ezen fut a böngészınk) egy-egy

fájlt kér le, annak az egész Internetes hálózaton egyedi azonosítója alapján. Ezt a fájlt,

pontosabban annak HTML nyelven kódolt forrását a megfelelı web szervert üzemeltetı

számítógép fogja elküldeni. Bár egyszerő szöveges fájlról van szó, ez azonban

számunkra szinte érthetetlen. A kliens gépünkön futó böngészıprogram viszont

értelmezni tudja a kódokat és a készítıje szándéka szerint megjeleníti az oldalt. Vannak

olyan esetek is, ahol nincs kódolás, ilyenkor a böngészı, a kliens intelligenciáján múlik,

hogy meghívja a megfelelı olvasóprogramot (például Word vagy más hasonló

dokumentumszerkesztı) és megjelenítse a kért dokumentumot. Minden más esetben, ha

ez az intelligencia nem került beépítésre, a böngészı automatikusan letöltésre kapcsol

és az URL alapján azonosított fájl letöltését kínálja fel a kliensgépre. Innét már a

felhasználó egyéni döntése, hogy mi történik a következıkben a letöltött állománnyal,

milyen alkalmazást, szoftvert használ az állomány megjelenítésére, megtekintésére.

2.1 Virtual hosting

A HTTP protokoll magába foglalja a virtuális gép fogalmát, ahol egyetlen HTTP

szerver több gazdagépet is képviselhet ugyanazon IP címen.

Egy DNS szerver számos különbözı gazdagép nevet (domén nevet) rendelhet hozzá

ugyanazon IP címhez. Amikor egy HTTP kliens adott gazdagépnek kérést küld, a DNS

szervert használja fel arra, hogy a domén névnek megfelelı IP címet megtalálja és a

kérést erre az IP címre küldi.

A HTTP/1.0 protokollban a domén név nem került bele a HTTP üzenetbe, ez elveszett,

miután az IP címet feloldotta a DNS szerver és ezt megküldte a kliens gépnek. Ez tehát

azt jelentette, hogy ha egynél több erıforrás helyezkedett el az IP cím által azonosított

szerveren, a szerver nehézségekbe ütközött volna, hogy beazonosítsa, melyik erıforrás

készlet melyik domén névhez tartozik.


12

Azonban a HTTP/1.1 kérések továbbítják a domén nevet is a kérésben (általában ez egy

Host fejlécben történik). Így a domén név jelenléte az üzenetben képessé teszi a HTTP

szervert arra, hogy a különbözı gazdagép/domén neveket tartalmazó kéréseket a

megfelelı erıforráshoz irányítsa minden egyes gazdagép/domén esetében. A HTTP

ezen képességét nevezzük virtuális gazdagépnek.

Web szerver felépítése

A fentebb vázolt felállás egy speciális kliens-szerver rendszer, ahol a rendszer két

összetevıjének tevékenységi köre - bár kliensbıl akárhány lehet, ezek mind ugyanazt

képesek elvégezni - szigorúan meghatározott. Az ábrán jól látható az is, hogy a web

szerver, - amennyiben nem egyszerő oldal lekérésrıl van szó – a megfelelı üzleti logika

alkalmazásával dinamikusan reagálni is képes az egyes kérésekre, az elküldött adatok,

vagy más külsı tényezı figyelembe vételével.

Az egyik, leggyakrabban használt web szerver jelenleg az Apache web szerver,

ismerkedjünk meg ennek rendkívül érdekes hátterével is.


13

2.2 Az Apache projekt

Az Internet kialakulásakor a hálózat szervereit futtató gépek szinte kizárólag

úgynevezett nagygépek voltak, mainframe komputerek, amelyek az egyéb feladatok

mellett felvállalták a levelezés és a webhelyek tárolásának feladatait is. Ezek UNIX,

majd késıbb Linux alapon dolgoztak és logikus volt, hogy az elsı webszervereket

ezekre az operációs rendszerekre készítették el. Maga a honlap (home page) neve is

abból származott, hogy ezek az intézményi szintő nagygépek egy-egy, több lapból álló,

de mégis egyetlen webhelyet tartottak fent, amelynek indítólapja volt az angol

tartalomjegyzék szóból származó nevő index.html fájl. A UNIX, majd Linux

filozófiának fontos eleme volt a szabad hozzáférhetıség és általában nyitott a szabad

szoftverek világa felé. Ennek következtében számos fejlesztés végeztek (szoftverek,

osztályok és csomagok) különbözı nyitott projektek keretében. Ezek talán

legismertebbje az Apache projekt.

Kezdetben volt az Apache web szerver3, a web szerverek ısatyja és még ma is életképes

leszármazottja. Ennek elterjedésével elıször modulok, eszközök készültek hozzá,

szintén a szabad szoftverek leveinek megfelelıen (GNU licenc) majd a fejlesztıcsapat

nagyobb lélegzető vállalkozásba fogott és létrehozta a web szerver nevével fémjelzett

projektet. Ez ma már hatalmasra nıtt, jelenleg közel 30 Apache projekt létezik az

Apache Software Foundation keretén belül (www.apache.org).

Egyes projektek a fejlıdés során kikerülnek a rendszerbıl és saját útra térnek, ilyen

például az XML feldolgozáshoz szükséges Javás eszközöket kifejlesztı Xerces projekt

is.

Az Apache Software Alapítvány (ASF) szervezeti, jogi és pénzügyi támogatást biztosít

nyílt szoftver projektek széles körének. Az Alapítvány jól megalapozott keretet biztosít

a szellemi tulajdonhoz és a pénzügyi támogatásokhoz, amelyek egyidejőleg csökkentik

a résztvevık potenciális jogi szerepét. Együttmőködı fejlesztési folyamatban az Apache

projektek kereskedelmi szintő, szabadon hozzáférhetı szoftver termékeket hoznak létre,

amelyek a felhasználók nagy közösségét vonzzák. A pragmatikus Apache licenc az

3 Nevének több magyarázata létezik. Az egyik szellemes magyarázat szerint semmi köze sincs a híres

indián törzshöz, hanem az "a patchy server" szavakból lett összevonva és kissé átalakítva. Azaz olyan

szoftvert jelöl, amely modulokból, "foltokból" áll.


14

összes, gazdasági és egyéni felhasználónak egyszerővé teszi az Apache termékek

telepítését.

Korábban ezt a szervezetet mint az Apache Csoportot ismerték, de az Alapítvány

tagsági alapon szervezıdött, non-profit társaságként lett regisztrálva annak érdekében,

hogy az Apache projektek az egyénileg vállalkozó önkéntesek közremőködési

lehetıségein túl is mőködıképesek legyenek. Azok az egyének, akik kimutatták

elkötelezettségüket az együttmőködés keretében végzett nyílt forráskódú

szoftverfejlesztésre az alapítványi projektekben, tagságot nyerhetnek az ASF-ben. Az

egyén akkor kaphatja meg a tagságot, ha a már meglévı tagok többsége jelöli ıt és

jóváhagyja a kinevezését. Így az ASF-t az a közösség irányítja, amelyet közvetlenül

szolgál – a projektjein belül együttmőködı személyek.

2.3 Erıforrások azonosítása, URL, URI

Az egyik legfontosabb kérdés az erıforrások egyedi azonosítása a hálózatos

rendszerekben, így például az Interneten. Általánosságban ez az URI (Universal

Resource Identifier) alapján történik, amely alatt bármely olyan karakterláncot értünk,

amely egy erıforrás azonosít. Ennek speciális megvalósítása az URL (Uniform

Resource Locator), amely létezı erıforrást azonosít a hálózaton annak elhelyezkedése

(címe) alapján. Belátható, hogy a hétköznapi gyakorlatban a kettı egymástól nem

független és ezért bárhogy nevezhetnénk, de szakmai szempontból megkülönböztetjük

az erıforrás azonosítót és annak helyét, hiszen az esetek jelentıs részében nem annak

helye, hanem az erıforrás maga a lényeges. A hely pedig bármikor megváltozhat, de

nagy gondot okozna, ha emiatt nem találnánk meg az erıforrást.

Az URI és az URL koncepcióját az Internet Társaság és az IETF (Internet Engineering

Task Force) RFC 2396 azonosítószámú dokumentuma rögzíti, ezen belül az Uniform

Resource Identifiers (URI) általános szintaxisát Internethez méltó módon a következı

URI azonosítja: http://www.ietf.org/rfc/rfc2396.txt.

Egy URL a HTTP (vagy HTTPS) esetében általában három vagy négy elembıl áll:

Protokoll (schema): A protokoll azonosítja azt a szabályrendszert, amelyet az erıforrás

eléréshez használni kell az Interneten. Ez leggyakrabban a http protokoll, amely SSL

nélkül nem biztonságos, vagy a HTTPS protokoll, amely már magába foglalja az SSL-t

is. A legtöbb banki rendszer csak biztonságos, HTTPS kapcsolaton át érhetı el.


15

Gazdanév vagy domén név (host): Ez azonosítja azt a gazdát (host), amely az

erıforrást tárolja. Ilyen lehet például a www.weblabor.hu. A gazda nevében egy szerver

biztosítja a szolgáltatásokat, de a gazda és a szerver között nem szükségszerő az egy-az-

egyben való megfeleltetés. Adott szervergépen, amelyet az IP cím alapján találunk meg

a neten, több gazda, azaz domén is elhelyezkedhet. Erre kiváló példa a webhely

üzemeltetés, amikor bárki elhelyezheti saját tárhelyét egy szolgáltató szerverén a

megfelelı díjazás ellenében, de nem minden doménhez tartozik egyedi szervergép. A

medzi.hu, az sdp-city.hu, a pepint.hu, a stylo.hu, a brusszelimagyarok.com és még sok

másik domén például fizikailag mind a 82.79.96.173 IP címmel azonosított

számítógépen található.

A http kéréseket a gazdagép a 80-as porton, vagy kapun fogadja. Ezt a böngészı

alapértelmezettnek kezeli, azaz a http kéréshez automatikusan hozzáteszi a megfelelı

portszámot. Amennyiben más kaput rendeltünk a web szerverhez, vagy más

szolgáltatást akarunk használni, a portszámot meg kell adni az URI/URL-ben. Egy Java

alapú web szerver, az Apache Tomcat a kéréseket például a 8080-as porton fogadja, a

nagyon népszerő MySQL adatbázis kezelı pedig a 3306-os kapun fogadja a kéréseket.

Elérési út (path): A domén név vagy gazdanév egy adott könyvtárat, a

gyökérkönyvtárat azonosítja a szerver számítógépen. Ettıl a könyvtártól kiindulva az

elérési út azonosítja azt a specifikus erıforrást – például weboldalt – amit el akarunk

érni. Ennek megadása teljes mértékben megegyezik a számítógépek elérési útjainak

megadásával, így mindenki számára ismertnek tételezhetı fel.

Lekérdezési karakterlánc (query string): Valójában nem is lekérdezésrıl van szó,

hanem a http kéréshez tartozó adatok helye. A HTTP protokoll a lekért erıforrások

mellett adatok átvitelére is képes, ezeket az adatokat a megcímzett erıforrás kapja meg

és szerveroldalon feldolgozhatók. Az egyszerő protokoll csak karaktersorozat

formájában tudja szállítani az adatokat, egészen pontosan név-érték párok formájában.

Az ezekbıl összefőzött, továbbításra kész karakterlánc a lekérdezési karakterlánc,

amely az URI-hoz kapcsolva látható a böngészı lokátor sorában (címsorában) is.

Szerkezete szigorúan rögzített, az erıforrás azonosítótól a kérdıjel karakter választja el,

és az egyes név-érték párokat az angol "and" karakter, a & választja el. Így az URI/URL

könnyen feldolgozható, a ? mentén szétszedhetı adatokra és erıforrás azonosítóra, majd

az adatokat képviselı karakterlánc szétszedhetı név, érték párokra és átadható a kért

erıforrásnak. Ilyen adattovábbítás mőködik például egy Google keresésénél, figyeljük


16

meg, hogyan alakul ki a lekérdezés egy egyszerőbb részletes keresésnél. Az alábbi URL

egy adatokkal kiegészített kérés, három adat kerül továbbításra, egy webhely azonosító,

egy keresés azonosító és egy "from" nevő adat, amely azt tartalmazza, honnét érkezett

az illetı az oldalra:

http://www.designers.hu/request.php?SiteID=11&SearchID=26&from=google

A szabályos teljes URI/URL tehát a következı elemekbıl épül fel:

protokoll: http://

protokoll + domén név: http://akarhol.hu

protokoll + domén név + portszám: http://akarhol.hu:8080

protokoll + domén név + portszám + elérési út:

http://akarhol.hu:8080/fomappa/almappa/fooldal.html

protokoll + domén név + portszám + elérési út + lekérdezési karaktersorozat:

http://akarhol.hu:8080/fomappa/almappa/fooldal.html?nev=Hugó&allatfaj=viziló

Hosszabb weboldalak a jobb tájékozódás érdekében szegmentálhatók. Ebben az esetben

az egyes részek egyedileg is azonosíthatóak úgynevezett horgonyok (anchor)

segítségével és ez az URL-ben is jelölhetı a kettıs kereszt használatával az alábbi

módon:

http://budapestzoo.hu/allatok/fooldal.html#vizilo

Ebben az esetben a fenti weboldalra jutó látogató nem az oldal tetejét látja a

böngészıben, hanem a böngészı rögtön a hosszú weboldal aljára, a vízilovakhoz ugrik.

Nem csak a HTTP protokollt használhatjuk azonban, és más protokollok esetében

lehetnek eltérések, vagy nem értelmezett elemek az URL-ben. Így például FTP (File

Transfer Protocol, fájlátviteli protokoll) esetében nincs értelme az adattovábbításnak

sem a szegmentálásnak és csak fájlok nevei adhatók meg, mint erıforrás azonosítók.

2.3.1 Azonosítás, üzenetfogadás

Az URL - Uniform Resource Locator4 - vagy az újabban használt URI - Uniform

Resource Identifier5 - tökéletesen egyedi mutatót biztosít a teljes Interneten egy

4 http://archive.ncsa.uiuc.edu/SDG/Software/Mosaic/Demo/url-primer.html


17

meghatározott erıforráshoz (resource). Ez az erıforrás lehet egyszerő, mint például egy

fájl vagy egy mappa, de hivatkozhat egy bonyolultabb objektumra is, mint például egy

adatbázis lekérés vagy egy keresımotor. Ennek elérésére a számítógép IP címe szolgál,

ami a névszerverekben tárolt információk alapján egyértelmően megfeleltethetı az

egyes domén neveknek, továbbá a doménon belül - ez általában egy könyvtárnak felel

meg az azonosított számítógépen - az egyes almappák és végül a fájlok egyedi nevébıl

képezzük az URI-t.

A névszerver vagy domain névszerver (DNS) feladata, hogy az adott hálózati

szegmensen összekapcsolja a nevekkel jellemzett doméneket és a számítógépet

azonosító IP címet. Kérésre - ismét egy szerver! - megmondja, hogy a keresett nevő

domén melyik gépen, annak melyik könyvtárától kiindulva található meg. Országonként

hierarchikus felépítésben helyezkednek el a névszerverek, ugyanakkor bárki telepíthet

névszervert a saját gépére. Természetesen az Internetes forgalom címfeloldását végzı

névszerverek ismerik egymást és a hálózaton egymással kommunikálva képesek végül a

fizikai címet megadni.

Egy számítógép több szervert is futtathat, bizonyos határok között akárhány szervert,

amelyeket egymástól a port (azaz kapu) különböztet meg. A port azonosító biztosítja,

hogy az üzenet a megfelelı szerverhez jusson el a számítógépen. A számítógépes

szaknyelvben démonnak nevezik azokat az alkalmazásokat, amelyek egy-egy porton

figyelve fogadják a beérkezı kéréseket, üzeneteket. Ezért az egyes szerveroldali

alkalmazások kapcsolattartó részét is démonnak nevezzük. Ha beletekintünk valamely

alkalmazás bin vagy lib könyvtárába és ott d-re végzıdı programfájlt találunk, akkor

nagy valószínőséggel megtaláltuk a kapcsolattartásért felelıs elemet (például mysqld a

MySQL adatbázis-kezelı kapcsolattartó démonja és httpd a http kéréseket fogadó web

szerver (Apache) démonja.

Amint ezt feltételezhetıen már tapasztalatból tudja, az IP cím tetszés szerint beállítható.

A számítógépek megkülönböztethetıségét a fizikai szinten a hálózati kártyának a

gyártók által garantált egyedi azonosítószáma (hardware address vagy rövidítve HW

Address) biztosítja. Így például a 00:0C:76:94:A9:0E hexadecimális számmal

azonosított hálózati kártya az Interneten a 82.79.96.167 IP címmel rendelkezı

5 http://www.ietf.org/rfc/rfc2396.txt


18

számítógépben található a jegyzet írásának idıpontjában. Ebbıl az állításból az is

következik persze, hogy a hálózati kártya gyártók sehol ezen a Földön nem gyárthatnak

két azonos HW Address értékkel rendelkezı alkatrészt és persze folyamatosan

kommunikálniuk kell, megegyezve egymás között a felhasználandó azonosítószámok

tartományairól. Bıven van tartalék, mert a hexadecimális elrendezés miatt 2566 darab,

azaz kereken 280000 milliárd egyedi hálózati kártya gyártható le. Vessük össze ezt a

Föld jelenlegi lakosságával, ami ma 6 milliárd ember!

Az IP cím persze csak akkor tölti be feladatát, ha valóban egyedi és ki tudjuk szőrni az

emberi tévedést, tehát lehetıleg ne a számítógép kezelıje állítgassa. A cél az, hogy egy-

egy szolgáltatói alhálózaton belül gépi megoldással biztosítsuk az egyediséget. Ezt a

szerepet töltik be a DHCP alapú rendszerek, ahol a kiosztást a DHCP szerver végzi és

tartja nyilván, ez a szoftvereszköz tartja nyilván a már kiosztott címeket és ezek fizikai

azonosításához feljegyzi a kérdéses gép hardvercímét is a saját adatbázisában.

2.4 Szerver oldali programnyelvek

Ahhoz, hogy dinamikusan frissüljenek a weblapok - például az adatok változásának

megfelelıen - elengedhetetlen, hogy a web szerver ne egyszerően a tárolt lapokat küldje

le a böngészınek, hanem ezeket a lapokat dinamikusan állítsa elı. Ez gyakorlatilag

annyit jelent, hogy a HTML/XHTML forráskódot kell elıállítani, vagy esetleg csak egy

sablonhoz képest módosítani az adatoknak megfelelıen. Fájlokat bármely programnyelv

elı tud állítani, tehát nem tőnik lehetetlennek a kérés.

A korai próbálkozások idején ezeket a HTML fájlokat teljes egészében szerver oldali

programok segítségével írták, de a grafikus tartalmak megnövekedésével és a

bonyolultság növekedésével már az a helyzet alakult ki, hogy néhány százaléknyi

dinamikus tartalomért az egész oldalt újra és újra elı kellett állítani a HTTP kérés

befutása esetén. Több próbálkozás történt, hogyan lehetne összeépíteni a dinamikus

tartalmat és a statikust és a megoldást olyan programnyelvek jelentették, amelyek

egyrészt, mint szkript nyelvek lehetıvé tették a vizuális szerkesztést a statikus tartalom

mellett, másrészt az ezeket a programnyelveket értelmezı interpreter képes volt csak a

dinamikus tartalomnak megfelelı részek értelmezésére és a leküldésre kerülı fájlban az

összeillesztésére.


19

Jelenleg a szerver oldal talán legnépszerőbb nyelve egyszerősége miatt a PHP, de igen

jelentıs a szerepe az ASP-nek és a Java nyelvnek is, ez utóbbi esetében a JSP

technológiát lehet ezen a szinten említeni. Ez a két utóbbi nyelv számos szerver oldali

objektumot tud kezelni és így az alkalmazásukkal gyorsabban lehet megoldani a

feladatokat – természetesen ehhez megfelelı képzettséggel kell rendelkezni.

Mindezen nyelvek esetében közös, hogy az erre felkészített web szerver a lekért fájlról

elsı lépésben eldönti, hogy csak statikus tartalmat hordoz, vagy dinamikus elemek,

részletek is vannak benne. Ha a tartalom csak statikus, akkor kiszolgálja, ha dinamikus

részt is tartalmaz, akkor a fájlt elıször átadja a megfelelı feldolgozó programnak,

konténernek, ahol a dinamikus tartalmaz reprezentáló kódrészletek kerülnek

feldolgozásra. Amennyiben a dinamikus tartalom HTML/XHTML kimenetet generál,

ez bekerül a fájlba és ezzel kiegészítve kerül le a klienshez. Az is elıfordulhat persze,

hogy a dinamikus tartalom valamilyen kimenet nélküli üzleti logikát tartalmaz, vagy

például adatfelvitel végez. Ebben az esetben maximum egy értesítés kerül leküldésre, a

felhasználó tájékoztatására.

2.5 Ellenırzı kérdések


20

3 Kommunikáció a kliens és a szerver között

Az architektúrák tárgyalása során kiderült, hogy az elosztott rendszerek csak igen ritka

esetekben használnak közös memóriát, így az adatok memórián keresztül történı

átadása nem lehetséges. Ezért a kommunikáció az üzenetátadás szintjére szorul vissza,

azonban ez sem egyszerő, mert az üzenetküldı és az üzenetfogadó meg kell, egyezzen

az üzenet pontos szerkezetében is egymás között. A leggyakrabban persze nem

kétoldalú egyezkedésrıl van szó, hanem olyan általános és szabványosított rendszerrıl

(üzenetszerkezetrıl), amit a kommunikáció bármely résztvevıje megért és magára

nézve kötelezıként ismer el.

A tananyagnak nem célja, hogy átfogó hálózati ismereteket adjon, hiszen ezt más

tantárgyak már megtették. Mégis érdemes néhány gondolat erejéig átismételni, és egy-

két speciális területen elmélyíteni ezeket az ismereteket, hogy könnyen elsajátíthatók

legyenek a tananyag hálózatos ismeretekre támaszkodó részei. Kezdjük tehát az összes

hálózati kommunikáció alapjait képezı OSI modell felidézésével és a hálózati

protokollokkal.

3.1 Az OSI modell és rétegei

Az Open Systems Interconnection Reference Model, azaz az OSI modell teljes

mértékben lefedi a kommunikáció szintjeit. Szerzıi abból indultak ki, hogy a

kommunikáció egyes szintjeit elvi alapon elkülönítették, így hét szintet jelöltek ki, és

minden szintnek jól körülhatárolható felelısségeket adtak meg. A szintek között a

kommunikáció (vertikális kommunikáció) szabványosított felületeken át (interfész)

történik és a közvetlen kapcsolatért felelıs legalsó, úgynevezett fizikai réteg az

egyetlen, amely közvetlen horizontális kommunikációt is végre tud hajtani.

Réteg elnevezése A kapcsolatot létesítı protokoll

7 alkalmazási alkalmazási protokoll


21

6 megjelenítési megjelenítési protokoll

5 viszony viszonyprotokoll

4 szállítási szállítási protokoll

3 hálózati hálózati protokoll

2 adatkapcsolati adatkapcsolati protokoll

1 fizikai fizikai protokoll

A fizikai hálózat (hardver)

Az OSI modell rétegei

Egy alkalmazás szintő üzenet elküldése ebben a rendszerben úgy történik, hogy az adott

folyamat összeállítja az üzenetet, azt átadja az alkalmazási rétegnek, és ez a szoftver

hozzátesz egy fejlécet, amely saját magára utal és több-kevesebb "használati utasítást"

tartalmaz, majd átadja a lentebb elhelyezkedı rétegnek. Ott ugyanez történik, míg a

réteg specifikus fejlécekkel ellátott üzenet elérkezik a fizikai réteghez, ahol megtörténik

az üzenet elektromos jelek formájában történı elküldése. A fogadó oldalon ugyanennek

az üzenet becsomagolásnak a fordítottja zajlik, az egyes rétegek a nekik szánt fejlécek

alapján járnak el és továbbadják az így feldolgozott üzenet a felettük álló rétegnek, míg

ismét eljutunk az alkalmazás szintig. Itt a kapcsolódó folyamat (például szerver vagy

kliens) szoftver szinten feldolgozza az üzenetet, és ha válaszol rá, azt ugyanezen az úton

elindítja visszafelé.

Az alsó három réteg szerepe markánsan szétválik. A fizikai réteg felel a jelszintő

kommunikációért, a hardver elemek szabványaiért. A felette elhelyezkedı

adatkapcsolati réteg definiálja az adatkereteket, a hibák felfedéséért és sok esetben a

javításáért is. A hálózati réteg szerepe a hálózati kommunikáció meghatározása, ezért

mőködése jelentısen eltér helyi hálózaton vagy például az Interneten. Míg a helyi

hálózatnál a broadcast módszer tökéletesen megfelelı (kiküldjük az üzenetet minden

gépre és az illetékes elkapja) a nagytávolságú hálózat esetén már szükség van

útvonalválasztásra is, ami ennek a rétegnek az egyik szolgáltatása. Az üzenetküldés

protokolljai közül a jól ismert IP protokoll tartozik ehhez a réteghez.

A szállítási réteg elsıdleges szerepe a kommunikáció megbízhatóságának

megteremtése, ezért jellegében másként, mintegy interfészként mőködik a felsıbb

rétegek és az alsó három között. Az alkalmazásfejlesztık számára ez a réteg biztosítja

azt a "csıpostát" (pipeline) amelybe töltött üzenetek a fogadó végen sértetlenül


22

megérkeznek. Ennek megvalósítása történik ebben a rétegben, amelynek legismertebb

és a hálózati kommunikációban leggyakrabban használt protokollja a TCP

(Transmission Control Protocol, átvitelvezérlı protokoll). A gyakorlatban szinte

mindenütt TCP/IP protokollról beszélünk, érdemes megjegyezni, hogy a név két

szorosan összedolgozó, ám függetlenül is mőködıképes rétegprotokollt jelez. Az UDP,

az Universal Datagram Protocol lényegében egy kismértékben módosított IP Protocol.

Fontosságának megfelelıen a TCP protokollt is fejlesztik, újabb változata a tranzakciós

TCP, amely a kapcsolat felépítésétıl kezdve a válasz fogadásán keresztül a kapcsolat

lezárásáig mindent együtt kezel.

A felsıbb rétegek határai nem minden esetben élesek, azaz különbözı rendszerekben az

egyes feladatok összecsúszhatnak, vagy a réteghatárok eltolódhatnak. Így a viszony és a

megjelenítési réteg protokolljai gyakran összeolvadnak és az elosztott alkalmazások

esetében ezt a köztesréteg protokoll helyettesíti. Ezek a protokollok testesítik meg a

köztesréteg szolgáltatásokat és ezek az általános célú protokollok, amelyeket különbözı

alkalmazások egyaránt használnak. Így alakult ki a köztesréteg szerepe az elosztott

alkalmazásokban, mint magas szintő kommunikációs szolgáltatásokat nyújtó réteg.

Ezekbıl négyet emelünk ki, a távoli eljáráshívást, a távoli objektumhívást, az

üzenetorientált kommunikációt és az adatfolyam orientált kommunikációt.

3.2 Az OSI modell megvalósulása TCP/IP esetén

Ahhoz, hogy két pont közötti kommunikáció létrejöhessen, és a két végponton

elhelyezkedı alkalmazás vagy eszköz megértse egymást, standard protokollokra van

szükség, amit mindkét kommunikáló oldal értelmezni tud. Az internetes (webes)

alkalmazások esetében a hálózati kommunikációt többnyire a TCP/IP protokoll

biztosítja, de bizonyos esetekben az erre ráépülı HTTP protokoll biztosítja az

adatforgalmat. Ez utóbbi nagy elınye, hogy mivel karakterek átvitelére képes, kötött

formátumban, alkalmazható egyes tőzfallal védett rendszerek esetében is. Fontosságuk

miatt ismerkedjünk meg ezekkel kicsit részletesebben, de elıtte áttekintésképpen álljon

itt az említett protokollok elhelyezkedése az OSI modellben.

réteg sorszáma réteg elnevezése protokoll


23

7 alkalmazási HTTP

6 megjelenítési

5 viszony

4 szállítási TCP

3 hálózati IP

2 adatkapcsolati

1 fizikai

A webes alkalmazásokban gyakrabban használt protokollok elhelyezkedése az OSI

modell szerint.

3.3 TCP/IP

A TCP/IP protokoll az Internet, a böngészı-szerver kapcsolat, a HTTP kérések általános

kommunikációs protokollja, de más alkalmazások - például a levelezés - is használja ezt

a protokollt. A TCP/IP protokoll jelenleg a legelterjedtebb standard. Gyakran beszélünk

a TCP/IP protokollcsaládról, amelyen belül számos specializált protokoll található:

− TCP (Transmission Control Protocol) alkalmazások közötti

kommunikációt biztosító protokoll, amely állandó kapcsolatot igényel a két

alkalmazás között. Felépítéséhez a kommunikációt kezdeményezı alkalmazás

kapcsolatkérést küld egy pontos címmel rendelkezı számítógép (alkalmazás)

felé, majd "kézfogás" (handshaking) után a full duplex módon üzemelı

kommunikáció az egyik fél kapcsolat bontásáig marad fenn.

− UDP (User Datagram Protocol) kisebb adatcsomagok átvitelét

biztosító protokoll. Egyszerőbb a TCP-nél, nincs állandó kapcsolat a küldı és a

fogadó között. Egyszerő adattovábbításkor használják, például mérıberendezés

jelének az elküldésekor.

− IP (Internet Protocol) adatcsomagok továbbításán alapuló, kapcsolat

nélküli protokoll. Feladatai közé tartozik a csomagok útválasztása is (routing).

Az OSI modell kapcsolati rétegének megfelelı szintő protokoll.


24

− DHCP (Dynamic Host Configuration Protocol) dinamikus IP cím

kiosztást biztosító protokoll. Feladata az alhálózaton található számítógépek

ellátása IP címekkel a TCP/IP alapú kommunikáció céljára. Bár a címkiosztás

dinamikus, azaz az IP cím hozzárendelés esetleges, beállítható úgy is, hogy

adott hálózati kártyához (hardvercím, azaz HW Address) az alhálózatban

mindig azonos IP cím tartozzon. Így akár szerver is üzemeltethetı DHCP

címkiosztás mellett. Egyre több Internet szolgáltató használja ezt a rendszert,

mert így a hálózatban mőködı gépek egyértelmően azonosíthatóak.

− ICMP (Internet Control and Message Protocol) az esetleges

hibaüzeneteket és statisztikai adatokat szolgáltató protokoll.

− HTTP (HyperText Transfer Protocol) végzi a web böngészı és a web

szerver közötti kommunikációt, amelynek során alkalmazás szinten fejléccel

ellátott üzenetek (fájlok) kerülnek átvitelre. A fejlécben tárolt információ írja le

a HTTP kérésre leküldött fájl feldolgozásának/értelmezésének módját, de ez

nem azonos a head elemben kódolt információval.

− HTTPS (secure HTTP) a fentivel megegyezı feladatokat lát el, de a

kommunikációt biztonságos csatornán végzi, ezért alkalmas a HTTP

protokollhoz kapcsolódó bizalmas adatok továbbítására. Ezt a protokollt

használják például elektronikus banki rendszerekben vagy hitelkártya

tranzakcióknál, de a MS Outlook webes hozzáférése is ezzel a protokollal

megy.

− SSL (Secure Sockets Layer) protokollt használunk adatok

titkosításánál és azok biztonságos átvitelénél.

− SMTP (Simple Mail Transfer Protocol) az egyik leggyakrabban

alkalmazott levelezési protokoll. Csak szöveges átvitelt biztosít, ezért bináris

adatok/tartalom átvitelénél a MIME protokollra támaszkodik. Leggyakrabban

az elektronikus levelek elküldésénél alkalmazzuk, amikor a szolgáltatónk

SMTP szerverére juttatjuk el elıször a leveleinket az megíráshoz használt

kliensprogramból és a továbbítást már a szerver végzi. Letöltéshez általában a

POP vagy IMAP protokollokat használjuk.

− MIME (Multi-purpose Internet Mail Extensions) feladata a bináris

adatok (kép, hang vagy video fájlok, objektumok) szöveges információba

történı átkódolása, hogy az SMTP protokoll már kezelni tudja.


25

− IMAP (Internet Message Access Protocol) protokollt alkalmazunk az

e-mail üzeneteink letöltésére abban az esetben, ha lehetıséget akarunk

biztosítani a felhasználónak az üzenetek szerver oldali tárolására és/vagy

megtekintésére. Ezzel a protokollal már a szerveren törölhetjük a nem kívánt e-

mail üzeneteket, azaz kiváló eszköz a levélszemét kiszelektálására.

− POP (Post Office Protocol) egyszerő e-mail letöltı protokoll. Amikor

a postafiókunkat biztosító szerverhez POP protokollal csatlakozunk, az összes

levelünket letölti a kliens gépen futó levelezıprogram megfelelı mappáiba.

Szerver oldali szelektáláshoz az IMAP protokoll ajánlott.

− FTP (File Transfer Protocol) - régebben az egyik legnépszerőbb

protokoll volt, de még ma is sokan használják fájl letöltésekhez. Szerver

oldalon azonban nem túl biztonságos, ezért vagy dedikált szerveren helyezik el,

vagy helyette biztonságos letöltéseket nyújtó SCP protokollt támogató és/vagy

SSH-t (Secure Shell) használó programokat alkalmaznak (WinSCP), amelyek

már biztonságos csatornán kommunikálnak a szerverrel. Ezekkel, mint SFTP

(Secure File Transfer Protocol) is találkozhatunk.

− LDAP (Lightweight Directory Access Protocol) protokollt

alkalmazunk, amikor az Interneten a felhasználókról - e-mail postafiók

tulajdonosokról - és az e-mail címükrıl keresünk információkat. Ez fontos

lehet egy olyan alkalmazás esetén, amikor adatbevitelnél le akarjuk ellenırizni

a beírt e-mail cím hitelességét.

3.4 HTTP

A HTTP alkalmazás szintő protokoll, amely a TCP/IP protokollt használva egyszerő

szöveges információ átvitelére alkalmas. A HTML vagy az XML leírónyelveket

alkalmazva ez szöveges információ azonban biztosítani képes az adatok és a

böngészıben az egyes grafikus elemek megjelenítését, valamint a strukturált adatok

(akár teljes adatbázisok) átvitelét is. A jelenleg általánosan használt verziója a

HTTP/1.16, amely több funkcionalitást biztosít, mint a korábbi és esetenként még

6 HTTP/1.1 szabvány leírása: RFC 2616, HyperText Transfer Protocol - HTTP/1.1,

megtalálható a következı helyen: http://www.ietf.org/rfc/rfc2616.txt


26

elıbukkanó HTTP/1.07. A számunkra talán legfontosabb különbség, hogy az újabb

verzió a fejlécben átviszi a megcímzett domén (host) nevét is, ami lehetıséget biztosít

egy IP cím alatt több webhely üzemeltetésére (virtual host, késıbb részletesebben

tárgyaljuk). Értelemszerően a kliens és a szerver azonos HTTP verziót kell, hogy

használjon és ez a kérés vagy a válasz elsı sorában meg is kell adniuk.

A HTTP kérést a kliens indítja a névvel ellátott domén felé, amely egy szerveren

helyezkedik el. Ennek célja erıforrásokhoz való hozzájutás a szerveren. A kérés

megvalósításához a kliens az URI alapján állítja össze az információt, ami az erıforrás

eléréséhez kell.

Egy megfelelıen összeállított HTTP kérés a következı elemeket tartalmazza:

1. Kérés sora

2. HTTP fejlécek sorozata, vagy más néven fejléc mezık

3. Amennyiben szükséges, az üzenet törzse.

Mindegyik HTTP fejléc után egy soremelés következik, az utolsó fejléc után egy

további soremelésnek kell következnie, hogy üres sor maradjon. Az üzenet törzse csak

ezután kezdıdhet.

A kérés sora legalább három elembıl áll. Elıször meg kell határozni a kérés módját,

ami egyszavas parancs a szerver felé, hogy mit csináljon az erıforrással. Másodszor

meg kell adni az URI-ból az elérési utat, ami az erıforrást határozza meg a szerveren.

Harmadszor meg kell adni a HTTP verziószámát, amit a kliens alkalmazott az üzenet

összeállítása során.

Erre egy példa a következı kérés sor:

GET /konyvtar/archivum/index.html HTTP/1.1

A kérés sor tartalmazhat még adatokat az ismert név-érték párok formájában és az URI

egyéb komponenseit is, amennyiben ez egy abszolút elérési út. Ha a protokoll verziója

7 HTTP/1.0 szabvány leírása: RFC 1945, HyperText Transfer Protocol - HTTP/1.0,

megtalálható a következı helyen: http://www.ietf.org/rfc/rfc1945.txt


27

1.1, akkor vagy itt, az URI-ben vagy egy külön Host fejlécben kell a domén információt

hordoznia.

A HTTP fejlécek a fogadó oldalt látják el információval a küldırıl, a kommunikáció

módjáról, nyelvi megkötésekrıl, frissítési információkról.

Az alábbi fejlécek például megkötik, hogy csak német vagy francia nyelvő lehet az

erıforrás és csak akkor kéri a kliens, ha azt tavaly december 6. óta módosították.

Accept-Language: fr, de

If-Modified-Since: Fri, 10 Dec 2006 11:22:13 GMT

Hálózat, IP cím, alhálózat, alhálózati maszk, router (útválasztó) - ezek a kifejezések gyakran elıfordulnak

hálózati alkalmazások esetén. Tekintsük át röviden, mi mit jelent ebben a rendszerben. A hálózat egyaránt

jelent LAN-t és Internetet, ez utóbbi, mint a hálózatok hálózata a legnagyobb részben helyi hálózatokból épül

fel. A LAN és a világ többi része közötti kapcsolatot a router biztosítja, amely az alhálózati maszk

segítségével különbséget tud tenni a helyi hálózat és az ezen kívül elhelyezkedı gépek között. Az alhálózati

maszk egy, az IP címmel azonos felépítéső cím, amelyben az egyes mezıkben beállított értékek - összevetve

a címzésben megadott IP címmel - adják meg a számítógép hovatartozását és így az útválasztás irányát is.

Egy példán szemléltetve, a 192.168.1.25 IP cím és a 255.255.255.0 alhálózati maszk együtt egy olyan

számítógépet határoz meg, amely a 192.168.1 doménen belül helyezkedik el - azaz az Internet kikerülésével a

LAN hálózaton keresztül közvetlenül elérhetı - és a helyi hálózat 25-ös azonosítószámú gépe. Ezzel szemben

a 192.168.2 kezdető IP címrıl a router rögtön tudja - az alhálózati maszkkal összevetve, - hogy nem található

a LAN hálózaton belül, azaz az ide irányuló kérést a belsı hálózaton kívülre kell továbbítani.



28

4 Web alkalmazások tervezése, megvalósítása

Mind minden mérnöki munkánál, itt is a tervezéssel kell kezdeni. Még egyszerőbb

webhelyek esetében sem árt végiggondolni a teljes alkalmazást, mielıtt nekivágunk. Az

elsı a pontos specifikáció meghatározása. Mit akarunk elérni, kinek akarjuk a

webhelyet prezentálni? A webes alkalmazások esetében különös jelentısége van a

felhasználó barátságnak, mert nem nagyon van lehetıség részletes kézikönyvek

áttanulmányozására az alkalmazás futtatása közben. Publikus webhelyek esetében

semmi befolyásunk nincs a látogatókra, nem taníthatjuk be a felhasználókat,

mindenkinek magának kell eligazodnia a weboldalakon. Ezért a szoftver ergonómia

jelentısége rendkívül megnı.

4.1 Honlapok, webhelyek, portálok

Ez a három kifejezés erısen összemosódik és nehéz határokat hőzni közöttük. Aki

készíti az alkalmazást, az szereti felturbózni a munkáját, tehát a honlapot webhelynek és

a webhelyet portálnak fogja nevezni, de ezen nem kell meglepıdni. A szakirodalomban

azonban a portál fogalmat fenntartják azon bonyolultabb webhelyekre, amelyeket az

egyes felhasználók a saját elképzelésük szerint alakíthatnak, testre szabhatnak. Ilyen

portál az ILIAS rendszer, de a PHPNuke, a Drupal és még sok más hasonló rendszer is

ide számítható. Webhelyként hivatkozunk a weblapok azon összességére, amelyek

mögött dinamikus rendszer van, lehetıleg adatbázisban tároljuk az információt és mind

a feltöltés, mind a megjelenítés dinamikus rendszereken át megy.

4.1.1 Architektúrák, rétegek és komponensek

Egy ismert felosztás szerint egyrétegő, kétrétegő és háromrétegő alkalmazásokat

különböztetünk meg. Rétegnek akkor nevezhetünk egy komponenst, ha feladatában

önálló és bizonyos határok között cserélhetı, a rendszer egészét egy-egy rétegének

megváltoztatása nem befolyásolja. Amennyiben az egyes rétegek különbözı

számítógépeken helyezkednek el, már elosztott rendszerekrıl kell beszélnünk. Ilyen


29

rendszer lehet egy alkalmazás és a távoli adatbázis szerver közötti kapcsolat, vagy egy

kliens-szerver rendszer is. Többrétegő alkalmazások esetén az elosztott rendszer több

egyedi számítógépet is magába foglalhat, ennek tipikus példája egy olyan webes

alkalmazás, ahol a böngészıt futtató kliens gép kéréseivel távoli web szerverhez fordul,

az viszont a kérés teljesítése során, a hivatkozott szerver oldali program végrehajtása

közben (dinamikus weboldal) egy harmadik gépen tárolt, az alkalmazás futtatásához

szükséges adatbázist igyekszik elérni.

Elvben ugyan több réteg is bevezethetı, de a gyakorlatban csak az egyes fenti rétegek

bizonyos fokú megosztása kerül megvalósításra, így ezek több rétegbe sorolása

felesleges. Egy kivétel azonban lehet, és ez a nagyfokú mesterséges intelligencia

alkalmazása. Az itt szükségessé váló fokozott számításigény megkövetelhet különálló,

erre specializált komponenst, amely így külön réteget alkothat.

4.2 Dizájn és áttekinthetıség

Mint mővészi alkotás, ennek is divathullámai vannak és gyorsan változnak az elvek,

hogy mikor milyen alkalmazást illik készíteni. Alapvetı viszont, hogy néhány olyan

alkalmazás mellett, ahol a mővészi teljesítmény az egyetlen követelmény, az

áttekinthetıség a legfontosabb szempont – feltéve, hogy a weblapunkat azzal a céllal

készítettük, hogy sokan megtekintsék. Nem ajánlatos, hogy a grafika elnyomja az

információtartalmat és persze az eltérı ízlésvilág miatt nem lehet olyan webhelyet

alkotni, amely mindenki számára egyformán vonzó. Így érdemes a mővészi

teljesítményt a háttérbe szorítani és az információközlésre koncentrálni – ha fontos a

mővészet, akkor ezt képgalériákban lehet legjobban publikálni.

4.3 Navigálás

Talán ezzel lehet a legjobban megdobni egy webhelyet, ha alaposan átgondoljuk a

navigálás lépéseit, a várható látogatóközönség igényét. Nem csak a logikus oldalról-

oldalra navigálás a lényeges, hanem a közvetlen eljutás is a legfontosabb lapokra.

Sohase arra gondoljunk, hogy mi, akik ismerjük az oldal szerkezetét, mennyire

igazodunk el rajta, hanem győjtsük be olyanok véleményét, akik nem gyakorlott

internetezık. A gombok, linkek és kép linkek egyaránt jók, de minden ilyen elemnek

megvan a maga helye, nem érdemes összekeverni. Gombokkal érdemes megoldani a


30

navigációt a hivatalos tartalmaknál és ne feledjük el, hogy a linkek a maguk adatátviteli

lehetıségeivel egyszerő és elegáns megoldásokat biztosítanak.



31

5 Leíró nyelvek

Természetesen a HTML, mint leírónyelv sem egyszerre jött létre, hosszú idıbe telt, míg

a kezdetektıl eljutottunk a mai szabványos HTML 4.01 verzióig vagy az XHTML

nyelvig.

Az egész egy betőszóval az SGML rövidítéssel kezdıdött. Ezek a betők az angol

Standard Generalized Markup Language kifejezés - azaz szabványos általános

leírónyelv - kezdıbetői és a HTML ısének tekinthetı leírónyelvet azonosítják 1986-ból.

Érdemes megfigyelni, hogy ez az ıs sem igazán régi, bár húsz év az informatika

világában egy korszakot jelent.

Bár jól dokumentált volt és a nagyközönségnek is rendelkezésére bocsátották, továbbá

precízen képes volt leírni a dokumentum tartalmát - itt még a hangsúly nem a

formázáson volt! - továbbá rendelkezett azzal a behozhatatlan elınnyel, hogy független

volt az eszköztıl, nehézkessége miatt nem terjedt el kellıen és méltán utálták a kor

informatikusai.

1989-ben megérkezett az elsı HTML, az 1.0 változat Tim Berners-Lee szerkesztésében,

amit jókora viták követtek, de 1993 márciusára már sikerült megállapodni mindenben és

a szabványos HTML nyelv megszületett. Ez a "szülés" olyannyira sikeres volt, hogy a

HTML nyelvet már értelmezni képes elsı böngészı, a Mosaic már az 1993. év ıszére el

is készült, és azóta útja, ha nem is töretlen, de mindenképpen sikeres.

Lehet, hogy Tim Berners-Lee neve ismerısen cseng - de ez nem meglepı! İ javasolta

az Internet WWW szolgáltatásának létrehozását és ı írta az elsı programokat ennek

mőködtetésére. Érdemeiért 2004-ben lovaggá ütötték és az esemény kapcsán sokat

cikkeztek az Internetrıl, www-rıl. Ma kicsit sablonosan fogalmazva ıt tekintjük az

Világháló feltalálójának.

Közben létrejött a W3 Konzorcium (persze e mögött is Tim Berners-Lee volt) és ez

vezette a fejlesztéseket, a szabványosítást. Igyekeztek bıvíteni a nyelv lehetıségeit és


32

így áttörték az 1.0 változatban még szigorúan vett korlátot, hogy csak a tartalom

leírására összpontosítanak.

A HTML 2.0 változatát az Internet Engineering Task Force HTML Munkacsoport

fejlesztette ki 1996-ban, de ez a változat már annyira elavult, hogy a böngészık már

nem is kezelik.

A HTML 3.2 változat már, mint W3C Javaslat került kibocsátásra 1997 januárjában. Az

elızıkhöz képest ez már jelentıs elırelépést jelentett, hozzávettek olyan, széles körben

elterjedt Netscape elemeket, mint a fontok, táblázatok, appletek és még több mást is. Az

egyik igen jelentıs, ám késıbb sok zavart okozó elem a font teg volt, amely felrúgta az

addig többé-kevésbé betartott szabályt, nevezetesen a tartalom és a prezentáció (stílus)

szétválasztást.

A formázást biztosító elemek bekerülésével már nem csak a tartalom, hanem a külalak

is leírhatóvá vált. Ez a verzió túlélte a nagy böngészıháborút is, amikor a Netscape és a

Microsoft egymással nem kompatibilis elemeket szerkesztett bele - ezért van az még ma

is, hogy figyelni kell, melyik böngészıre fejlesztünk, illetve a böngészı-függetlenséget

csak különbözı trükkökkel és sok extra munkával lehet biztosítani.

A felmerülı problémák megoldására a HTML 4.0 változatot a W3C 1997

decemberében adta ki, amit néhány apróbb korrekció követett 1998 áprilisában. A

legfontosabb eleme ennek a változatnak a stíluslapok hozzáadása volt, amellyel helyre

kívánták állítani a tartalom és a külsı megjelenés szétválasztását. Ez annyira sikeres

volt, hogy a jelenleg is használt változat, a 4.01 csak apróbb javításokat tartalmazott és

így 1999-re kialakult a végleges, ma is használatos változat. Így amit a következı

oldalakon tanulni fog, az mind erre a változatra, pontosabban az ebbıl kifejlesztett

XHTML nyelvre lesz igaz elsısorban - persze az elemek jó része a korábbi

böngészıkkel is értelmezhetı lesz.

Ahhoz képest, hogy ennyi változatot élt át a HTML nyelv és milyen gyorsan változott,

felmerülhet a kérdés, hogy mi a helyzet jelenleg. Nos, a HTML nyelv fejlesztése leállt

és a W3C ettıl kezdve nem fejleszti tovább. Helyette azonban az XML elterjedésével

párhuzamosan fellépett az igény egy szigorúbb követelményő, jobban értelmezhetı

leírónyelvre. Így tehát a fejlıdés újabban más irányba megy már. Bevezették a

kötöttebb szintaktikájú XHTML 1.0 nyelvet, amely sokkal szigorúbb elvárásokat

testesít meg a kódszerkesztıtıl, nem olyan "laza", mint a korábbi szabványok. Ez


33

lényegében újraformálja a HTML nyelvet XML alapokon, és a jelenleg is érvényes

változatra a W3C javaslat 2000 januárjában jelent meg. A szigorú szintaktika miatt

alkalmas a mobilkommunikációban is, ahol a szőkös memória és képernyı

lehetıségeket kell optimálisan kihasználni. A másik fejlıdési irány az XML, amely

viszont csak formájában hasonlít a HTML-re - ebbıl is látszik, hogy milyen zseniális

ötlet volt a karakteres, olvasható tartalmi megjelenítés bevezetése - ám a technika nem

az adat (dokumentum, szöveg) tartalmi, formai megjelenítését hivatott leírni, hanem

tetszés szerint bıvíthetı tegjeivel az adatok összefüggéseit írja le, az adatokat jellemzi.

Például megmondja, hogy az adatként szereplı "hallgató" alatt diákot, rádióhallgatót

vagy éppen az eszközt (fülhallgatót) értjük. Használatával az adatokhoz nem kell külön

dokumentumot készíteni, amely ezt rögzíti, hanem az adatok továbbítására, tárolására

szolgáló fájl is tartalmazza az információt.

A fejlıdés azonban nem állt meg a fentebb említett nyelveknél. Ma már a leírónyelvek

egész családjáról beszélünk, amelyek azonos elveken, de egészen más dolgokat is

"közölni" tudnak. Így például rendelkezésre áll a SMIL leírónyelv, amely segítségével

multimédiás prezentációkat tudunk létrehozni, vagy a SVG (skálázható vektorgrafika,

Scalable Vector Graphics), amely lényegében XML nyelv, de adottak a tegek és így az

erre felkészített böngészıben grafikai elemeket lehet megjeleníteni a segítségével.

5.1 HTML

A HTML nyelv alapeleme a címke, vagy angol nyelven a tag (ejtsd teg)8. Ezek nyitó (<)

és záró (>) kacsacsır, vagy "kisebb, mint" illetve "nagyobb, mint" jelek közé zárt

egyszavas angol nyelvő dokumentum-elemnevek, vagy azok rövidítései (például

<body> teg jelzi, hogy a dokumentum törzse kezdıdik. Minden, a dokumentumot

alkotó szövegelem esetében meghatározzuk annak típusát (bekezdés, táblázat része,

stb.) és megadjuk a dokumentumon belüli elhelyezkedését. A legutolsó HTML nyelvi

változatban megadhatjuk a szövegelem külsı megjelenését is, azaz betőtípusát,

8 A magyar terminológiában mind a címke, mind a tag elnevezés elfogadott, ráadásul tag szót, magyar

kiejtéssel tagnak is mondják, és az „a” hanggal ragozzák (pl. többes számban tagok). A legújabb

ajánlások szerint a teg formát a legcélszerőbb használni, ugyanis a magyar tag homonima használata

félrevezetı, a tag idegen szóként ragozva (pl. tag-ek) pedig zavaró. Ugyanakkor címke vagy elem fordítás

is túl általános ill. túl konkrét.


34

karakterét, színét, nagyságát is. A leírónyelvek jellegébıl következik, hogy olyan

módon kell a dokumentumon belül az egyes szövegrészek megjelenítését megadni,

amely minden böngészı által egységesen értelmezhetı. Ez a megadási mód a kérdéses

szövegrész tegek közé zárása, egy nyitó és az ennek megfelelı záró teg között. A nyitó

teg belsejében különbözı attribútumok helyezhetık el, ezek módosítják a megjelenítést,

vagy az elem azonosítására szolgálnak. A nyitó és záró teg együttesen közrefog

valamilyen tartalmat, amire a teg vonatkozik. A tegeket és tartalmukat együtt HTML-

elemnek nevezzük. Példaként álljon itt egy HTML dokumentum részlete:

<p><font face="Ariel" size="3" color="#FF0000" ><b>Ez a

szövegrészlet Ariel betőtípussal, piros színnel, a böngészı által

biztosított 1-6 skálán közepes mérető betőkkel és félkövér (bold)

betővel fog megjelenni. A szövegelem egy bekezdést (paragrafus)

alkot, azaz új sorban kezdıdik és az utána következı szöveg is új

sorban lesz, kis helyköz kihagyással a sorok között</b></font></p>

A tegek segítségével a táblázat, vagy a HTML őrlapok egyes elemeinek leírásától az

egyszerő bekezdésekig sokféle elemet találunk, ezek közül a gyakrabban elıfordulókat

készség szintjén is ajánlatos ismerni, de gyakorlati célokra érdemes egy-egy bıséges

referenciát kéznél tartani. Ez utóbbi lehet nyomtatott könyv, de a téma jellegének

megfelelıen az fájlban vagy az Interneten elérhetı anyag a leginkább célravezetı.

Mivel a HTML nyelv értelmezése a böngészı feladata, nagy szerepe van a böngészıbe

épített intelligenciának az esetleges nem szabályos leírás értelmezésében. Vannak

továbbá olyan elemek is, amelyekre nem igaz a nyitó - záró teg pár és csak nyitótegeje

van. Ilyen a gyakrabban használtak közül a vízszintes vonal <hr>, vagy a sortörés

utasítás a <br>, illetve a képek megadására szolgáló <img> elem. Ennek belsejében

nagymennyiségő információt közölhetünk a kép megjelenítésével kapcsolatban, annak

értelmezéséhez. Kötelezıen meg kell adni a hivatkozott képfájl relatív elérési útját és

nevét, de megadható a kép mérete, a képhez megjelenı szöveg, ami leggyakrabban a

képet leíró szöveg és a látássérültek által használt böngészıprogramok ennek a leírásnak

alapján tudják "felolvasni" a weboldalt.

Ezzel azonban még messze vagyunk a HTML leírónyelv elsajátításától és bizonyos

okoknál fogva nem is foglalkozunk vele többet. Az ok valójában egyszerő. Bár a HTML

nyelv ma rendkívül népszerő, gyakran használt leírónyelv, a webes tartalmak leírásán

kívül is, napjainkban már elavult. Szerencsére van helyette más és arról a másról a külsı

szemlélı nem is tudja eldönteni, hogy ez valóban egy másik leírónyelv!


35

5.2 XHTML

Mi a HTML nyelv legfontosabb szerepe? Formázott megjelenítést biztosítani a

dokumentumoknak úgy, hogy a formázást leíró kód standardizált legyen, azaz a

különbözı olvasó/értelmezı programok egységes megjelenítést adjanak. Egyszerő

feltétel, de nem könnyő megvalósítani. A HTML nyelv az Internet gyerekkorának

nyelve és hasonlóan a gyerekekhez, sok mindent elnéztünk neki. Ehhez viszont

szükséges volt az intelligens értelmezésre és mivel itt idınkét ki kellett találni a

szerkesztı elképzelését, az nem mindig sikerült teljes mértékben.

Bevezetésre került tehát az XHTML nyelv, amely ezeket a félreértelmezéseket hivatott

visszaszorítani. A betőszó az EXtensible HyperText Markup Language szavakból

készült, és célja a HTML helyettesítése, nyugodtan mondhatjuk, hogy kiszorítása.

Ugyanakkor nem csak a neve csaknem azonos, hanem a nyelv is. Nyilvánvaló, hogy

úgy a legegyszerőbb egy népszerő dolog helyettesítése, ha azt mondhatjuk, az új

gyakorlatilag ugyanaz, csak másképp hívjuk…

Kijelenthetjük tehát, hogy az XHTML a HTML szigorúbb és tisztább változata,

amelyben a HTML elemeket az XML (lásd késıbb) eszközeivel írjuk le. Bár nevében

szerepel az extended (kiterjesztett) szó, semmi kiterjesztés nincs a nyelvben a HTML

nyelvvel összehasonlítva. A szigorúság annyit jelent, hogy minden teget egyformán

kezelünk, azaz nem alkalmazunk záró elem nélküli teget. Amennyiben a teg tipikusan

egysoros, itt is gondoskodunk a lezárás jelzésérıl. Nem fedhetnek át a tegek, de

(majdnem) tetszés szerint egymásba ágyazhatóak. Erre késıbb majd a tegek

tárgyalásánál láthatunk példákat. Nem tőnik túl lényegesnek, de az XHTML kódban

minden teg név kisbetővel írandó és nem keverhetı nagybetős írásmóddal. Ennek oka

egyszerően az, hogy a leírásra használt XML nyelv kisbető/nagybető érzékeny több

programozási nyelvhez hasonló módon és így az egységes írásmód ebbıl logikusan

következik. Természetesen a böngészı egyaránt fel kell, hogy ismerje a nagybetővel írt

elemeket is, a régi HTML szabványok alkalmazhatósága miatt, de mi próbáljuk meg

egységesen kisbetővel szerkeszteni XHTML dokumentumainkat. Egy validálás azonnal

jelezni fogja a keveredéseket!

Néhány példa a tegekre és azok lezárására az XHTML nyelvben

<head> </head> attribútumok nélküli többsoros teg, további tegeket tartalmazhat


36

<body bgcolor="#FFFFFF"> </body> attribútumokat is tartalmazó többsoros teg,

további tegeket, szöveget tartalmazhat

<img src="kep.jpg" height="200" width="300" /> attribútumokat is tartalmazó

egysoros teg

<br /> attribútumok nélküli egysoros teg

Természetesen az XHTML leírása is egy W3C Javaslat, annak elsı, 1.0 változata 2000-

ben került publikálásra és jelenleg már a 2.0 változat van kidolgozás alatt.

Nézzük meg tehát, hogyan épül fel egy XHTML dokumentum, melyek a gyakrabban

használt tegek és hogyan használjuk ezeket.

Alább látható egy XHTML oldal kódja. Ha ezt a kódot beillesztjük egy szöveges fájlba

és azt akarmi.html néven elmentjük, majd egy böngészıben megnyitjuk, csak annyit

látunk belıle, hogy Feldolgozott XHTML kód. Bármely böngészıben azonban

lehetıség van arra, hogy megtekintsük az oldal forrását, azaz az alábbi kód ismét

megjelenik. Ez böngészıtıl függı módon vagy a Jegyzettömb eszközzel jelenik meg

(Internet Explorer), vagy specifikus, szintaktikailag kiemelt módon (Firefox).

<!doctype html public "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>

<head>

<title>XHTML kódolás</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-

8859-2">

</head>

<body>

<b><font face="Arial, Helvetica, sans-serif" size="2">Feldolgozott

XHTML kód</font></b>

</body>

</html>

Mi történik tulajdonképpen? A böngészı a megjelenítés elıtt végigolvassa a szöveges

kódot és végrehajtja az abban megadott utasításokat. Az elsı sor - több más között -

jelzi, hogy XHTML típusú dokumentumról van szó és ez a World Wide Web

konzorcium által kiadott 1.0 XHTML verzió szerinti "Document Type Declaration,

DTD", azaz dokumentum típus deklaráció szerint készült. Ebbıl a böngészı sokat


37

megtud, például azt, hogyan kell kezelnie a dokumentumot, milyen régebbi verziókat és

szabványokat vegyen figyelembe. A tényleges kód ez után jön és a html teg jelzi a

dokumentum kezdetét, ami általában egy fejrésszel indul (head teg). A fejrészben ismét

fontos információk találhatók a böngészı számára, de ezekbıl csupán a title teg által

azonosított (a tegek felépítésérıl majd késıbb bıségesen lesz szó) szövegrész kerül

megjelenítésre, ez a cím, ami a böngészıben az ablak legfelsı keretében megjelenik. A

meta teg sorából a böngészı megtudja, hogy milyen a tartalom - jelen esetben ez

szöveges/html és egy nagyon fontos utasítás következik a böngészınek: milyen

karakterkészletet használjon a megjelenítéshez.

A karakterkészlet fontossága nem hangsúlyozható eléggé! Az iso-8859-2 teszi például

lehetıvé a normál "ő" és "ı" betők megjelenítését, más karakterkészletben a "kalapos"

ő, ı jelenik meg. Fontos, hogy a helyes karakterkészlet legyen beállítva!9

A megjelenítendı információ és annak leíró kódja a body teg után következik, azaz itt a

böngészı elolvassa a kódot és az utasításoknak megfelelı betőtípussal, nagysággal és

színnel, illetve kiemeléssel jeleníti meg. Ez az, amit látunk is majd a böngészı felületén.

Amennyiben új oldalra megyünk tovább - akár egy linket követve, akár új URL

megadásával - a böngészı az aktuális ablakban az új oldalt értelmezi, azt jeleníti meg.

Ne felejtsük el, hogy a megjelenítés mindig két dimenzióban történik, új oldalt - kivéve,

ha új ablakot nyitunk - csak a régi helyére tölthet be a böngészı! Ahogy ez elvárható az

XHTML nyelv esetében, a body részt lezárjuk (</body>) majd lezárjuk a

dokumentumot magát is (</html>). Az így elkészült jól formált dokumentum már

egyszerőbb böngészıkkel is megjeleníthetı.

Fontos megjegyezni, hogy alapértelmezetten az XHTML oldalon belül nincs lehetıség a

szöveg kliens oldalról történı megváltoztatásra, az XHTML nyelv önmaga nem

rendelkezik ezzel a képességgel, mindig teljes dokumentum újraírásról lehet csak szó.

Ugyanakkor az XHTML dokumentum minden eleme azonosítható a Dokumentum

Objektum Modell segítségével és így külsı programozói segédeszköz, a JavaScript

9 Sajnos még mindig átmeneti idıszakot élünk abban atekintetben, hogy egyrészt már erısen terjed az

unicode, azaz a két bájton tárolt karakterkódolás, de még számtalan esetben a szoftverek nem ismerik,

vagy nem tudják jól megjeleníteni. Ezért egyelıre törekedjünk a minimálisan jó karakterkészletre és csak

akkor használjunk magasabb szintő karakterkészletet, ha megbizonyosodtunk az alkalmazott böngészık

képességeirıl.

38

nyelv alkalmazásával ezek az objektumok módosíthatók. Ez azonban már a dinamikus

weboldalak területe és a jelen kurzusnak egy késıbbi részében foglalkozunk majd vele.

Így JavaScript alkalmazása nélkül böngészınk csak akkor tudja módosítani az oldalt, ha

megváltoztatott kóddal újra lekérjük azt a szerverrıl vagy újra behívjuk a böngészınkbe

(frissítés).

5.2.1 Head elem

Lássunk hozzá a tegek módszeres megismerésének és kezdjük a sokszor elhanyagolt,

ám rendkívül fontos head elem tanulmányozásával! Íme, egy példa10, amelyben

összezsúfoltunk miden fontosabb lehetıséget:

<head>

<title>A webprogramozás alapjai</title>


8859-2" />

<meta http-equiv="refresh" content="20" />

<meta name="keywords" content="webszerkesztés, XHTML, oktatás" />

<meta name="description" content="Tanulmányozzuk a head elemben

megadható elemeket és azok szerepét" />

<meta name="author" content="Medzihradszky Dénes" />

<meta name="generator" content="Jegyzettömb" />

<script language="JavaScript1.2">

function ujablak(file, nev, parameterek) {

window.open('file', 'nev', 'parameterek');

}

</script>

<link rel="stylesheet" href="medzi.css" type="text/css" />

<link href="index.html" id="index" />



10 A szövegben megadott példák általában az éppen tárgyalt területet emelik ki, ezért sohasem teljes

dokumentum részletek. Így szándékosan hiányoznak belılük azok az elemek, részletek, amelyek egy

valós esetben nem hanyagolhatók el, de itt a példa kiemelése érdekében eltekintünk ezektıl.


39

</head>

Az elsı fontos dolog, amit észre kell vennünk, hogy a head elem belsejében újabb

HTML-elemeket/tegeket hozhatunk létre! Ezt nevezzük az XHTML elemek egymásba

ágyazhatóságának és szigorú szabályok vonatkoznak arra, hogy egy-egy elem

belsejében milyen más elemeket helyezhetünk el. Az elem belseje alatt természetesen a

nyitó és a záró teg közötti dokumentumrészt értjük.

<title>A webprogramozás alapjai</title>

A title tegek közé írt szöveg az egyetlen, ami látható a head elem belsejében leírtak

közül, ez ugyanis a weboldal címe, ami megjelenik a böngészı felsı keretén.

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"

/>

A meta teggel jelölt elemnek nincs záró tegeje, csupán a teg belsejében, a "kacsacsırök"

között helyezhetünk el utasításokat a böngészı számára. Ahogy fentebb már láttuk, ez

vonatkozhat a dokumentum tartalom típusára (szöveg/html), vonatkozhat a karakterek

kódolására, hogy a megfelelı módon tudjuk megjeleníteni a karaktereket. Itt a

karakterkódolásnak a legújabb módját mutatjuk be, az UNICODE alapú kódolást, ezért

adtuk meg az UTF-8 karakterkészletet.

<meta http-equiv="refresh" content="120" />

Szintén a meta elemekkel irányíthatjuk az oldal betöltését, újratöltését illetve másik

oldalra ugrást is beállíthatunk. A fenti kód szerint a böngészı az oldalt 120

másodpercenként frissíti. Ennek akkor van például értelme, ha valahol dinamikus

elemeket akarunk elhelyezni az oldalon vagy a szerveren változik meg rendszeresen a

tartalom. A frissítés úgy dolgozik, mint egy idıkapcsolt hiperlink, azaz a beállított idı

elteltével a böngészı újra lekéri az oldalt a szerverrıl. Ha az oldal közben változott a

szerveren, akkor az újat kapjuk meg, ha nem, a régi oldal lesz ismét betöltve. Ez viszont

a böngészıt "nem érdekli" ı csak végrehajtja az utasítást…

Erre jó példát találunk egyes weblapokon, ahol valamely idıben változó folyamatot

mutatnak be webkamerák segítségével és a szerveren rendszeres idıközönként új képek

jelennek meg. Ilyen például a jelenleg (2010 január) is mőködı Kilauea tőzhányó Puu


40

Oo kráterének belsejét bemutató http://hvo.wr.usgs.gov/cam/index.htm weboldal, amely

180 másodperces frissítéssel dolgozik. Látogassa meg a linket és tekintse meg a

weboldal forrását is - ugyanakkor érdemes elgondolkodni azon, hogy az Internet

segítségével betekintést kaphat egy tőzhányó mindennapjaiba is. A Kilauea Hawaii

szigetén található, hozzánk képest az idıeltolódás 12 óra, azaz ne lepıdjön meg, ha

éjszakai képeket talál éppen!

Egyes webmesterek elıszeretettel alkalmazzák ezt a meta elemet a látogatók

irányítására és rövid idıt, vagy nulla idıt beállítva más oldalakra küldik a szörfölıket.

Erısen javasoljuk azonban, hogy ha valami rendkívüli oka nincs, ezt az új oldalra ugrást

ne alkalmazzuk! Erre két nagyon jó ok is van: (1) ha rövid vagy nulla idıvel

átirányítunk, ott többé nem lehet visszafelé navigálni a vissza gomb segítségével, mert

ugyan megtörténik a visszaugrás, de a beállított átirányítás miatt ismét visszadob a

rendszer oda, ahonnan elindultunk; (2) a látogatókat általában rendkívül idegesíti, ha

nem hagyjuk ıket a kedvük szerint böngészni!

A head elemen belül nincs korlátozva az információt hordozó meta elemek száma.

Minden informatív meta elem egységesen egy name attribútumból és annak

tartalmából (content) áll. Vannak szokásos attribútumok, mint például a "keywords"

(kulcsszavak) és a "description" (leírás). Ezek tartalmazzák a kereséskor elsıdlegesen

figyelembe vett tartalmi információkat, így megadásukkal az indexelı robotok munkáját

segítjük, tehát érdemes átgondoltan megadni.11

Ezeken túl tetszıleges name - content párokat hozhatunk létre egy-egy meta elemen

belül. Gyakrabban alkalmazzuk a szerzı nevének megadását, vagy megadjuk az

XHTML kódot legyártó szoftvereszköz nevét és még számos egyéb információt

közölhetünk a meta teg segítségével. Ezek természetesen nem kötelezı elemek, csupán

lehetıséget biztosítanak kereséshez, XHTML fájlok feldolgozásához.

<script language="JavaScript1.2">

function ujablak(file, nev, parameterek) {

window.open('file', 'nev', 'parameterek');

11 Füllenteni azonban nem tanácsos! A modern keresırobotok büntetıpontokat adnak - tehát hátrébb

sorolnak - azért, ha a kulcsszavak között vagy a leírásban megadott szavak, kifejezések nem fordulnak elı

az oldalakon!


41

}

</script>

A script nyitó és záró teg közé - a nevének megfelelıen - úgynevezett szkripteket, azaz

interpretált programozási nyelven írt kódokat helyezhetünk el. Ezeket nem csak a

head elemen belül használhatjuk, hanem a bárhol a body elem belsejében. Jelentıs

különbség van azonban az elhelyezésben, mert a head részben nem történik

megjelenítés - azaz a programrészlet lefut, de nem produkál kimenetet - viszont a body

belsejében megadott script elemben elhelyezett kód az adott pozícióban produkálhat

látható kimenetet, ugyanis a szkriptek értelmezése és végrehajtása az XHTML oldal

betöltésével egyidejőleg zajlik. A bemutatott példán egy JavaScript függvényt adtunk

meg a script tegek között, amelyet a body elemen belül bárhonnan meghívhatunk a

megfelelı paraméterekkel és egy új ablakot fog nyitni számunkra.

<link rel="stylesheet" href="web.css" type="text/css" />

<link href="index.html" id="index" />

Szintén a head elemen belül hivatkozhatunk további dokumentumokra, amelyek az

egész weboldalra vagy akár az egész webhelyre vonatkozó utasításokat tartalmazhatnak.

Az elsı hivatkozás egy úgynevezett lépcsıs stíluslapra ("Cascading Style Sheet, .css")

történik, amelyen be lehet állítani az egész webhelyre érvényes betőtípust, betőméretet

vagy beállítható az egyes XHTML elemek szokásostól eltérı megjelenítése is. A

második hivatkozás viszont egy HTML oldalra történik, amelyet még külön névvel (az

id attribútum értéke!) is azonosítunk.

A stíluslapok a HTML szabvány 4.0 verziójával jelentek meg és rohamosan tért

hódítottak. Segítségükkel egyszerőbb és fıleg rugalmasabb módon történhet a nagyobb

webhelyek külalakjának meghatározása és lehetıséget biztosítanak a változtatásokra is.

Sok stílus-meghatározó attribútum és paraméter szerepét vették át, ezeket korábban csak

a HTML kódból tudtuk állítani. Stílusokkal, stíluslapokkal részletesen majd egy késıbbi

fejezetben foglalkozunk.

Ha már a stíluslapok elıkerültek, nézzük meg, hogyan adhatunk meg az egész lapra

érvényes stílust, anélkül, hogy az egyes XHTML elemek nyitó tegejében kelljen

megadni:

<style type="text/css">

body {

42

font-family: Arial, Helvetica, sans-serif;

font-size: 10pt

}

</style>

A fenti kódrészlet a head elemen belül elhelyezett style elem segítségével a body

elemhez rendel hozzá 10 pont nagyságú Arial betőtípust. Ne keverjük össze még

véletlenül sem az XHTML font tegején belül megadható bető tulajdonságokkal, sem a

megadás formája, szintaktikája, sem az érvényességi köre nem hasonlít!



A fenti elem szokatlan formátumú, hiszen nem tartalmazza a szokásos szöveges nyitó -

záró tegeket. Szerepe is speciális, ez ugyanis nem teg, hanem egy megjegyzés,

segítségével a böngészı által figyelembe nem veendı kommentárokat, megjegyzéseket

helyezhetünk el az XHTML oldalon. Ez az elem sem korlátozódik a head elemre, bárhol

alkalmazhatjuk az oldalon! Jelentısége akkor nı meg, ha hosszú és bonyolult XHTML

oldalakat hozunk létre, vagy ami szintén nem ritka, több személy dolgozik együtt egy

oldalon és az ilyen beszúrt megjegyzésekkel nagymértékben segíthetjük egymás

munkáját. Áttekinthetıbbé teszi az oldalakat és néhány év elteltével mi is hálásan

fogadjuk majd, amikor bonyolult, több egymásba ágyazott táblázatot tartalmazó

oldalunkat kell módosítani. Ne legyünk hát lusták, minden komolyabb

szerkesztıeszközzel egyszerően elkészíthetık ezek a megjegyzések és késıbb sok

munkát és fejtörést takarítanak meg számunkra.

Az XHTML kódban a dokumentum típusleírásán kívül minden leíró vagy

megjelenítésre váró információ egy-egy elemen belül helyezkedik el, az egyetlen

megjegyzés kivételével. Így az oldal feldolgozásának sorrendjében folytatjuk az elemek

tanulmányozását a body elemmel.

5.2.2 Body elem

Gyakorlatilag minden ezért az elemért van, hiszen az ebben közölt információ

publikálása az egész megjelenítés célja. Magában a body elem nyitótegejében számos

attribútum elhelyezhetı. Ezek egyrészt az oldal formai megjelenítését (háttérszín,

háttérkép, betőszín és egyéb színek) biztosítják és a body elem egészére hatnak, de az

oldal betöltése, mint eseményhez kapcsolódó tevékenységek meghívása is az itt

elhelyezett utasításokkal történik. Minden olyan esetben például, amikor az oldal


43

betöltésekor egy ablak bukkan fel valamilyen információs tartalommal, itt, a body elem

nyitótegejében elhelyezett utasítás hajtódik végre. A body elemen belül helyezkedik el

minden olyan elem, amely az egyes dokumentumrészek megjelenítésre, vagy a

dokumentum elrendezésére vannak hatással. Ezeket vizsgáljuk meg a következı

fejezetekben.

5.2.3 Szövegtagolást biztosító elemek

A body elemen belül elhelyezhetı elemek egyik csoportját alkotják az úgynevezett

szövegtagolást biztosító elemek. Ezek felelısek a dokumentum szerkezetének

kialakításáért. Vizsgáljuk meg a legfontosabbakat, de elıre bocsátom, hogy nem

foglalkozunk az összes elem összes attribútumával, mert ez messze meghaladná a

tananyag lehetıségeit. Bárki, aki webmesterségre adja a fejét, gondoskodjon megfelelı

referencia anyagokról és azokban bármikor utána nézhet az adott elem összes

alkalmazási lehetıségének.

<p> </p>

A paragrafus, azaz bekezdés tegjei. Elıtte-utána nagyobb hely marad ki és persze

mindig új sort kezdünk ezzel az elemmel.

<body bgcolor="#FFFFFF" >

<p align="center" id="elso" class="bekezdes">Az Internet

népszerősége rohamosan nı </p>

</body>

A nyitó teg belsejében igazítási utasításokat helyezhetünk el, "left, right, center" értéket

adva az "align" attribútumnak. Ugyancsak a nyitó teg belsejében elhelyezhetünk egyedi

azonosítót is, amelynek segítségével az egész dokumentumban azonosíthatjuk az elemet

és a "class" attribútumnak értéket adva az XHTML elemhez - azaz az elem által

meghatározott dokumentumrészhez - stílusosztályt rendelhetünk. Ezzel állítható be a

kérdéses dokumentumrész megjelenése. Az elemen belül egyéb elemeket is

elhelyezhetünk, például szövegformázási, elhelyezési elemeket vagy akár táblázat

elemet is.

<div> </div>

<body>

<div align="right" id="div_elem" class="bekezdes">Nagy szükség van

jól képzett webmesterekre</div>


44

</body>

A div elem nagymértékben hasonlít a paragrafusra, de nem visz be sortávolság növelést

a szövegbe. Elsısorban akkor használjuk, ha a szövegre bekezdésváltás nélkül akarunk

speciális formázást rákényszeríteni. A paragrafushoz hasonló módon a nyitó teg

belsejében itt is elhelyezhetünk igazítást, azonosítást és hozzárendelhetünk stílusosztályt

is.

több blokkszintő (pl. bekezdést, h1, h2, stb.) magába foglaló nagyobb egységet

szeretnénk egyszerre formázni

<div id=”egyedi_stilus”>

<p>Elsı bekezdés.</p>

<p>Második bekezdés.</p>

</div>

<blockquote> </blockquote>

Ez az XHTML elem a közrezárt dokumentumrészt egységesen kezeli és - részben

böngészı beállítástól függı módon - behúzást végez a kérdéses dokumentumrészen.

<body>

<blockquote>Nagy szükség van jól képzett

webmesterekre</blockquote>

</body>

Azonban itt még nem merülnek ki lehetıségei. Mint minden egységet képezı elem

esetében, ennek belsejében is elhelyezhetık egyéb elemek (például div, p) és a

megjelenés ezek hatásainak az összessége lesz.

<body>

<blockquote>

<div align="center">

<p>Nagy szükség van jól képzett webmesterekre</p>

</div>

</blockquote>

</body>

Itt például div elem segítségével középre igazítottuk a kiválasztott szövegrészt és a div

elemen belül bekezdést is meghatároztunk. Ezek jelentısége ismét a stílusosztályok

hozzárendelésénél és a szövegrészek egymáshoz viszonyított elhelyezésénél jelentkezik.


45

<span> </span>

<body>

<span>Nagy szükség van jól képzett webmesterekre</span>

</body>

Érdekes módon került bele ez a teg a HTML, majd innét az XHTML fegyvertárába.

Míg a fentiekben tárgyalt elemek kisebb-nagyobb mértékben a szöveg elrendezését,

megjelenítését is érintik, a span teggel jelölt elem kizárólag kiegészítı attribútumokkal

hatásos, az elem szerepe önmagában csupán annyi, hogy ki tudjunk jelölni egy

dokumentumrészletet, amelyre speciális, stíluslapokkal beállítható formázást akarunk

ráhúzni.

ha egy sorban, vagy egy bekezdésen belül egy kifejezést máshogy szeretnénk

megjeleníteni, pl.:

<p>Egy mondatban <span style=”font-size: 24pt; color: red;”>kiemelt szavak</span>

lehetnek.</p>

A tananyagban már eddig is nagyon sokszor hivatkoztunk stílusokra, stíluslapokra,

holott errıl még nem beszéltünk részletesen. Belefutottunk abba az ördögi körbe, hogy

az XHTML elemek átfogó ismerete nélkül még nem tudunk errıl érdemben beszélni,

hiszen ezek hatásaikat az elemeken át fejtik ki, ugyanakkor a stíluslapokban

meghatározott stílusokat az XHTML elemek nyitó tegeiben kell megadni. Egyelıre

állapodjunk meg abban, hogy a stílus egy, a webszerkesztık által megadható

megjelenítési utasítás-csoport, azaz formázás, és ennek létrehozásáról majd az XHTML

elemek megismerése után tudunk érdemben beszélni, a tananyag egy késıbbi

fejezetében.

<pre> </pre> és <code> </code>

Ha már korábban megpróbálkozott HTML, vagy XHTML szerkesztéssel, valószínőleg

már rájött arra, hogy a szövegrészek tagolása nem történhet meg szóközök, tabulátorok

beütésével – ezeket szöveges dokumentumokban sem illik alkalmazni, de azért sokszor

elıfordul - mert az XHTML értelmezıje nem veszi figyelembe az egynél több szóközt,

a tabulátorral meg egyáltalán nem foglalkozik – egész pontosan egyszerő szóköznek


46

tekinti. Vannak azonban olyan esetek, amikor szükség van egy dokumentumrészlet

eredeti formájában történı visszaadására. Ezt a feladatot látja el a pre elem. Megırzi az

összes eredeti formázást, a szöveg elrendezését.

Ne feledjük azt sem, hogy a Világháló legszorgalmasabb látogatói, felhasználói a

számítógépes szakemberek, programozók, és kicsit a saját szükségleteik szerint

alakították a HTML, majd ebbıl átvéve az XHTML kódot is. Ezért vezették be a code

elemet, amely ugyan böngészı függı módon, de egységes kinézetet ad az egyes

programkódoknak, amelyeket a Világhálón közreadnak. Gyakran közöltek/közölnek

programkódokat, ahol az áttekinthetıség kedvéért szigorúan strukturálni kell a

forráskódot, erre pedig kiválóan alkalmas a pre elem. Nézzük meg ezek használatát a

gyakorlatban egy Java programrészlet példáján! (A programrészlet egyébként nem

tárgya a webprogramozás oktatásnak, csupán ez akadt a kezembe, amikor programozási

példát kerestem a code elem használatára.)

<html>

<head>

<title>XHTML elemek</title>


8859-2" />

</head>

<body bgcolor="white">

<code>

//ez a kódrészlet <code> elemben van<br />

public class HelloWorldApp {<br />

public static void main(String[] args){<br />

System.out.println("Szia vilag");<br />

}<br />

}

</code>

<pre>

//ez a kódrészlet <pre> elemben van

public class HelloWorldApp {

public static void main(String[] args){

System.out.println("Szia vilag");

}

}


47

</pre>

</body>

</html>

A kétféle kód szinte teljesen azonos, annyi különbséggel, hogy a pre elemen belül nem

használunk <br /> teget – ez az elem jelzi a böngészınek, hogy a feldolgozás során itt

új sort kell kezdeni - és mégis sortöréseket tapasztalunk majd a böngészıben történı

megjelenítéskor. A pre elem minden esetben pontosan úgy jeleníti meg a közézárt

szöveget, ahogyan az a forráskódba belekerül.

Ezeket az elemeket ismertetve egyúttal kihasználjuk a lehetıséget, hogy bemutassuk a

speciális karakterkódok használatát. Mindkét elemben a kacsacsıröket a megfelelı

kódokkal adtuk meg (e nélkül a böngészı tegnek értelmezné a code vagy a pre

szavakat!) és a code elemben még az idézıjel helyett is annak speciális HTML kódja

áll.

A böngészıben a következıt láthatjuk:

A pre elem hően megırizte a szöveg tabulálását, betőméretét és típusát és

áttekinthetıbb a programkód, mint a korábban megismert formázások esetében. A code

elem esetében a betőtípus az elemre jellemzı úgynevezett proporcionális font lett, de a

szöveg elrendezését nem ırizte meg. Érdemes megjegyezni hát, hogy ha el akarjuk


48

kerülni az XHTML formázásokat, használjunk pre elemeket az XHTML kódban a

szövegelrendezés megoldására. Van persze hátulütıje is, mert amennyiben a szöveg

nem fér el a böngészıablakban, nem törik a kerethez és egyszerően levágja az ablak

jobb széle, amelyben megjeleníteni akarjuk.

Próbálja ki, hogy a pre elemben elhelyezett szöveget a böngészıjében megjelenítve a

jobb oldali ablakkeretet húzza beljebb, mint a szöveg jobb széle! Mit tapasztal?

<br />

Ez és az utána következı elem különleges abban az értelemben, hogy a meta teghez

hasonlóan nincs záró párja, csupán egy nyitó tegbıl áll, az XHTML esetében kötelezı

zárást a teg belsejében hajtjuk végre. A meta elemmel szemben azonban a br esetében

semmiféle attribútumot nem lehet elhelyezni a teg belsejében, ez mindig önmagában áll.

Neve az angol "break" (törés) szó rövidítése, és funkciója is ez, sortörést helyez el a

szövegben. Nem azonos a p "paragrafus, bekezdés" elem által generált új sor kezdéssel,

mert ez a sortörés nem jár a sortávolság növekedésével. Minden olyan esetben ezt

használjuk, ahol tömör felsorolásra van szükségünk, vagy éppen a szöveg tagolása

igényli a sortörést. Ha figyelmesen megtekinti a korábbi kódrészleteket, talál bennük

bıven ilyen elemet.

<hr />

Ez az elem a br elemhez hasonlóan "magányos" és feladata érdekes módon nem a

szöveg megjelenésének beállítása, hanem egy vízszintes vonal ("horizontal row")

elhelyezése a szövegrészek között. Ez még abból az idıbıl maradt fenn a HTML

szabványban, amikor a képmegjelenítés gyerekcipıben járt. Ma már nem nagyon

használják a színes weblapok világában, de egyszerőbb esetekben, ahol a szöveges

információ a lényeg, egyszerő alkalmazni. Az alábbi kód egy 2 képpont vastag,

árnyékolás nélküli, kék színő, az oldal háromnegyedét kitevı, szimmetrikusan középre

igazított vonalat határoz meg:

<hr size="2" noshade color="blue" width="75%" align="center" />

A csoportosítás szempontjából ide tartozna a táblázat is, amely elvileg a szövegrészek

elrendezését hivatott megoldani, de ennek fontossága miatt egy külön fejezetben

foglalkozunk majd vele.


49

5.2.4 Szövegformázást biztosító elemek

<font> </font>

Elérkeztünk az egyik legfontosabb XHTML teg pároshoz, a font elemhez. Ennek

segítségével állíthatjuk be a szöveg betőtípusát, színét, nagyságát. Maga a font elem

persze erre önmagában nem alkalmas, a fenti teg páros csupán kijelöli azt a tartományt a

szövegben, amelyre a paraméterekkel (attribútumokkal) megadott formázások

vonatkoznak. Egy teljes formázáshoz az alábbi font elemre van szükség:

<font face="Arial, Helvetica, sans-serif" color="blue"

size="3">Erre vonatkozik a formázás</font>

Látható tehát, hogy megadhatjuk a betőtípust (font) magát (face attribútum), a betőszínt

(color attribútum) és a betőméretet (size attribútum) - ez utóbbit a HTML-ben

kifejlesztett speciális hétfokozatú skálán, amelyben a "2" méret felel meg körülbelül a

szövegszerkesztıkben alkalmazott, a nyomdászoktól átvett pontskálán a "10" méretnek.

Felmerülhet rögtön az a kérdés, hogy miért adunk meg rögtön háromféle betőtípust?

Ennek oka az, hogy nem tudhatjuk elıre, milyen fontkészlettel rendelkezik a

böngészıprogram, amelyik megjeleníti majd az oldalunkat. Ezért elıször az "Arial"

típusú fontot javasoljuk, ha ez nem áll rendelkezésre, akkor a "Helvetica" fontot

(hasonlít az Arialhoz) és ha egyik sem áll rendelkezésre, akkor bármilyen, nem talpas

fonttal jelenítse meg az oldalt12.

Késıbb még sokat foglalkozunk majd a fontok, stílusok használatával, mert a

weboldalak, mint kiadványok megjelenését jelentısen befolyásolja a fontválasztás. A

12 A szövegszerkesztı programok, mint a Word, az OpenOffice szövegszerkesztıje, vagy bármely

magasabb szintő szerkesztıprogram számos nyomdaipari szakkifejezést vett át. Ezeket a programokat -

pontosabban ezek nagyobb testvéreit, az úgynevezett kiadványszerkesztı (DTP, azaz DeskTop

Publishing) programokat intenzíven használja a nyomdaipar - gondoljunk csak arra, mennyivel könnyebb

a szedés mővelete szoftver segítségével, mint kézzel - és ezért a szövegszerkesztık, de még a

HTML/XHTML szerkesztık is illeszkednek a nyomdaipar nyelvezetéhez. Alapvetıen két gyakori

fontcsaládot különböztetünk meg, a talpas fontokat, ahol a betők mindegyike a lefelé futó vonalak, szárak

végén talpszerően kiszélesedik (például Times) illetve a talp nélkülieket, ahol a szár lefutása egyenes,

nincs kiszélesedı talp (Arial).


50

szín és a méret megadása egyszerően átlátható, a színeknél a gyakoribb színeket angol

nyelvi megfelelıjükkel adhatjuk meg, illetve a késıbb tárgyalt színkódokat is

használhatjuk és ez utóbbival sokkal finomabb színárnyalatokat is meghatározhatunk.

<hx> </hx>

A hx teg a heading elemet vezeti be, ahol az x az 1-6 tartományba esı számot jelent. Ez

az XHTML elem egyszerő méretformázást tesz lehetıvé, úgynevezett címsorokat

határoz meg, ahol az "1" számmal jelölt címsorral jár a legnagyobb betőméret, míg a

"6" számmal jelölthöz tartozik a legkisebb (ez egy elég komoly ellentmondás, amikor

épp most volt szó arról, hogy a méretmegadáshoz speciális, hétfokozatú skálát kell

használni az XHTML szerkesztésben, de hát ez a hagyomány). Ugyanakkor viszont, ha

megelégszünk ezzel a formázással, gyorsan, kevés kóddal meghatározhatók a

betőméretek. Nézzünk rá egy példát, hogyan néznek ki az így meghatározott címsorok a

böngészıben:

A megjelenítést pedig a következı kód végzi:

<html>

<head>

<title>Címsorok</title>


8859-2" />


51

</head>

<body bgcolor="#FFFFFF">

<h1>címsor 1</h1>

<h2>címsor 2</h2>

<h3>címsor 3</h3>

<h4>címsor 4</h4>

<h5>címsor 5</h5>

<h6>címsor 6</h6>

</body>

</html>

Látható, hogy minden címsor, az eltérı méret ellenére egységesen félkövér stílussal

jelenik meg. Ez a formázási utasítás tehát lehetıséget nyújt gyors és egyszerő

stílusbeállításokra, érdemes megjegyezni!

<b> </b>

Most, hogy már szó került a félkövér betőstílusról, tanuljuk meg ennek közvetlen

beállítását is a b (bold, azaz félkövér) elemen keresztül. Amit a fenti teg pár közé írunk,

az félkövéren fog megjelenni, az egyéb beállítások figyelmen kívül hagyásával. Ezt az

elemet szintén gyakran használjuk, ha valamit ki akarunk emelni a weboldalon. Ha

kipróbálja az itt megadott kódokat, hamar rájön arra, hogy az egyes formázási

utasítások nem kapcsolják ki a már beállított stílust, így ezek összeadódnak és a

megjelenítés ezek együttes hatása szerint történik meg. Természetesen az azonos hatást

kiváltó elemek nem fokozzák egymás hatásait, azaz a hx elemmel beállított címsorra

hiába húzunk rá még egy b elemet, ettıl a bető megjelenítés nem lesz kétszer olyan

vastag.

<i> </i>

A másik szintén gyakran használt stílusformázó elem, a nyomdaiparból átvett, dılt

betős szedésre utal az i elem (italic, azaz dılt betővel szedett). Használata pontosan

megegyezik az elızı bekezdésben bemutatott b elem használatával, de természetesen itt

már igaz az együttes hatás, ha például mindkettıt használjuk, akkor félkövér dılt betős

szedést kapunk.

52

<sup> </sup> és <sub> </sub>

Gyakran elıfordul, hogy szeretnénk valamit alsó vagy felsı indexbe tenni és erre az

XHTML éppen úgy lehetıséget biztosít, mint a Word szövegszerkesztı, illetve

mondhatjuk, hogy bármely komolyabb szövegszerkesztı. Ezt a célt szolgálja ez a két

elem. Amint az a névbıl ki is található, a sup elem a "superscript" angol szó (a.m. "felsı

írás") rövidítése, míg a sub elem a "subscript" ("alsó írás") rövidítése. Ezen elemek

használatával tudunk például egy kémiai képletet összehozni, vagy a matematikában a

hatványozást tudjuk így ábrázolni.

Az ábrán látható szövegmegjelenítés mögött az alábbi XHTML kód áll:

<html>

<head>

<title>alsó és felsı index</title>


8859-2" />




</style>

</head>

<body bgcolor="#FFFFFF" >

<p>A mészkı (kémiai nevén kalcium-karbonát)<br />


53

tapasztalati képlete: CaCO<sub>3</sub></p>

<p>A 10 hatványai: <br />

10<sup>2</sup> = 100<br />

10<sup>3</sup> = 1000<br />

10<sup>4</sup> = 10000<br />

10<sup>5</sup> = 100000<br />

10<sup>6</sup> = 1000000<br />

</p>

</body>

</html>

<big> </big>, <small> </small>, <strong> </strong>

Valószínőleg most már elért arra a szintre, hogy komolyabb magyarázat nélkül, csupán

a tegek nevébıl kitalálja ezek hatását. Nem véletlen a leíró nyelvek népszerősége, mert

a forrás elolvasása önmagában is informatív és utal a dokumentum szerkezetére illetve a

dokumentum egyes részeinek formai megjelenítésére.

Ezek a tegek ismét azt a törekvést testesítik meg, hogy gyakoribb stílusokat egyszerően

lehessen beállítani. Ezeknek az elemeknek egységesen az a legértékesebb tulajdonsága,

hogy mindig az aktuális betőmérethez igazodva csökken illetve nı a méret. Nézzünk

rájuk egy-egy példát:

Az eddig tanultak alapján egyszerően átlátható a kód ehhez a megjelenítéshez, már

valószínőleg Ön is megírhatná. Lássuk együtt a teljes kódot:

<html>

<head>

54

<title>small - big - strong</title>


8859-2" />




body { font-family: Arial, Helvetica, sans-serif; font-size:

12pt}

</style>



</head>

<body>

<small>Ezt a szöveget small elembe tettük.</small><br />

<big>Ezt viszont big elembe!</big><br />

<strong>Íme, a strong elem hatása!</strong>

</body>

</html>

5.2.5 Kép elem

Az ember erısen vizuális beállítottságú, szemünk az elsıdleges érzékszervünk. Egész

kultúránk, életünk szempontjából az információközlés legfontosabb formája az

ábrázolás, a képi információ közlése. Ahogy hangulati hatásokban, érzelmekben a zene,

a dallam szerepe tekinthetı elsıdlegesnek, az oktatás, tanítás során a reálismeretek

átadása képek, ábrák nélkül – ha nem is lehetetlen – nagyon megnehezül. A képek

azonban informatikai szempontból nem gazdaságosak, adatként tárolva túlságosan sok

helyet igényelnek és így átvitelük is idıigényes. Ez azonban részben a képtömörítı

eljárásoknak (gif, jpg, png) köszönhetıen, részben a hardverek fejlıdésének és így a

sávszélesség korábban elképzelhetetlen megnövekedésének köszönhetıen napjainkban

már nem jelent korlátot. Ahogy a technikai lehetıségek kialakultak, a webes

dokumentumok fontos eleme lett a kép. Nem csak az információközlésre használjuk

azonban, hanem a weboldalak esztétikai megjelenítésére, az ember mővészi

ambícióinak kielégítésére is. Ma már elképzelhetetlen egy, a nagyközönségnek szóló

weboldal grafikai elemek nélkül. Így a webdokumentumok leírónyelvébe is bele kellett

építeni a képmegjelenítési lehetıségeket.

Ennek XHTML kódja a következı:

<img src="kep.xxx" alt="" width="" height="" />


55

Látható, hogy ismét egysoros teggel van dolgunk, ahol a tegen belül számos fontos

attribútum található. A teg egy kép forrásfájlt ad meg, amelyet a böngészı teg

dokumentumon belüli elhelyezkedése alapján a teg helyén jelenít meg. A forrás

természetesen hivatkozhat abszolút vagy relatív elérési úttal a megjelenítendı képre, így

tetszıleges URI adható meg. Alapértelmezetten a relatív hely az img elemet tartalmazó

fájltól számítódik, a gyökérkönyvtárig visszalépkedhetünk az elérési úttal. A

beilleszthetı képfájlok típusa a böngészı megjelenítési lehetıségeitıl függ, általában

gif13, jpg vagy png típusú képfájlok jeleníthetık meg.

Az alt attribútum valóban egy alternatív lehetıséget kínál fel, itt a kép rövid leírása

adható meg. Ezt két okból is ajánlatos megtenni. Az elsı, hogy ennek megadásával - ha

magának a képnek a megjelenítése nem sikerül- a böngészı a kép helyén a leírást

jeleníti meg, így a felhasználó nem csak azt látja, hogy hiányzik egy kép, hanem

információt kap a hiányzó kép tartalmáról is. A második ok még jelentısebb, sıt

validálási szempontból nélkülözhetetlen is az alt attribútum kitöltése. A látáscsökkent

vagy látássérült felhasználók számára készült felolvasóprogramok a képi információ

helyett az alt attribútum tartalmát olvassák fel és csak így biztosítható, hogy ezek a

felhasználók is közel teljes képet kapjanak az oldalról. Íme, egy példa:

<img src="angelfalls.jpg" alt="A közel ezer méteres Angel vízesés

képe, ahogy a tepui tetejérıl az alatta húzódó völgybe zuhan alá a

vízesést tápláló ıserdei folyó" />

A szélesség és magasság megadása a legtöbb HTML/XHTML szerkesztıeszköz

esetében automatikus, azaz a kép beillesztésekor nem csak a relatív elérési út kerül bele,

hanem a méretinformáció is. Ez azonban felülbírálható, mert a képet a böngészı nem az

eredeti méretben, hanem az itt megadott méretben fogja megjeleníteni. Ennek

különleges jelentısége van a grafikai elemeken alapuló dizájn esetén.

A képek, mint információ-hordozók eredeti jelentısége mellett nagyon sokszor

alkalmazzuk a képeket, mint dizájn elemeket. Egy mai, grafikailag is igényes weboldal

megszerkesztése elsı lépésben a grafikus feladata, aki képként készíti el a weboldalt,

13 A gif (Graphical Interchange Format) képtípus licensszel védett, így törvényes használata a licensz

megszerzését igényli. Érdekessége, hogy ezzel a képtípussal úgynevezett animált képek is létrehozhatóak,

azaz a megfelelı szerkesztıeszközzel elıállíthatók több képbıl álló sorozatok, amelyeket a böngészı a

bele kódolt gyakoriságnak megfelelıen váltogat és így mozgóképi hatások érhetık el. A jpg és a png

szabadon felhasználható.


56

megteremtve a szöveges elemek számára is a megjelenítéshez szükséges helyet,

megtervezve a betőtípust, háttérszínt és minden egyebet. Ezt követıen az így elkészített

kép alapján a grafikai szerkesztıprogram állítja elı az XHTML kódot a képet kisebb

részekre bontva és azokat egymáshoz illesztve például táblázat segítségével. A

legenerált kód persze még korrekciókra szorul, a generált képelemeket a

webszerkesztésben jártas grafikus a megjelenítés szempontjából átvariálhatja. Azok az

elemek, ahol szöveg lesz, természetesen nem képként, hanem szerkeszthetı felületként

kerülnek a kódba, a szükséges színbeállításokat a generálás során elıállított színkódok

biztosítják.

Az img elemekben hivatkozott képek pixelre pontosan illeszkednek, tehát két egymás

mögött elhelyezkedı elem képe egységes kép látszatát kelti, ha például a képek

magassága azonos volt. Amennyiben függılegesen illeszkednek a képek, a táblázat

segít, itt ugyanis az egyes cellákban elhelyezett képek a megfelelı cellabeállítások

mellett szintén pontosan illeszkednek. Erre majd a táblázat tárgyalásánál térünk ki

részletesen.

5.2.6 Kép részekre bontása, a map elem

Bizonyos értelemben ez az elem is a képekhez tartozik, legalább is szoros kapcsolatban

van velük. A map elem segítségével egy adott kép "feltérképezhetı" azaz meghatározott

darabokra bontható és az egyes darabokhoz különbözı linkek kapcsolhatók. Vegyük

például a következı megjelenéső képet, amelyen a piros téglalaphoz, a kék körhöz és a

zöld sokszöghöz egyaránt egy-egy link kapcsolódik.


57

Íme, egy ilyen felbontott kép hivatkozása és a képhez kapcsolódó map elem kódja.

Kattintson a kép egyes részeire a linkekhez

<img src="map.jpg" alt="navigációs kép map elemhez" width="300"

height="200" border="0" usemap="#navkep">

<map id="navkep" name="navkep">

<area shape="rect" coords="2,2,119,104" href="piros.html"

target="_blank">

<area shape="circle" coords="240,54,44" href="kek.html"

target="_blank">

<area shape="poly" coords="137,112,205,130,206,197,53,198"

href="zold.html" target="_blank">

</map>

Látható a kódból, hogy az alapul szolgáló tetszıleges kép kiegészül egy usemap

attribútummal, amelyben hivatkozunk a képet használó map elem azonosítójára. Ez az

azonosító a jelenleg is folyó HTML – XHTML átalakulás miatt, a teljes böngészı

kompatibilitás elérése érdekében mind a map elem name és id attribútumában szerepel.

Különbözı alakú területeket jelölhetünk ki, a formának megfelelı minimális

koordináták megadásával. Így a téglalap esetében (rect) a bal felsı és a jobb alsó sarok

koordinátáit adjuk meg, a kör esetében a középpont koordinátáit és a kör sugarát,

sokszög esetén viszont nincs más lehetıség, mint az összes csúcspont megadása

koordinátákkal.


58

Behoztunk viszont egy új attribútumot a target megadásával. Ez az attribútum valójában

a href attribútum kiegészítése és az adja meg, hogy a hivatkozott oldal hova töltıdjön be

– ebben az esetben a _blank érték egy új ablak (üres ablak = blank) megnyitását és a

hivatkozott fájl oda történı betöltését írta elı.

5.2.7 Táblázat elem

Az információk áttekinthetı elrendezésének egyik fı formája a táblázatos elrendezés.

Ezzel egyértelmően meghatározható vizuális eszközökkel, hogy mely adatok tartoznak

össze. Azt is rögtön meg kell jegyeznünk, hogy ez csak a vizuális összerendezést

biztosítja, a táblázatos formában feltüntetett adatok lényegi összefüggéseit az XHTML

eszközeivel nem tudjuk leírni. Egy táblázat általánosságban címsorból és adatsorokból

áll, az elıbbi tartalmazza az adatok megnevezését, az adatsorok viszont az adatok egyes

elıfordulásainak értékeit tartalmazzák.

Egy tipikus táblázat leírása az XHTML eszközeivel magába foglalja a táblázat

deklarálását és a teljes táblázatra vonatkozó attribútumok megadását a táblázat

nyitótegjén belül, a címsor kijelölését és a címsor celláinak megadását, majd sorokat és

a sorokon belül táblázat cellákat határozunk meg.

Az alábbi kód egy olyan táblázat XHTML kódja, amely három oszlopból áll, a címsor

alatt két sora van, a táblázat középre rendezett a képernyın és a teljes képernyı felét

foglalja el. Minden táblázat cellában a lényegi információ a cella határától számítva

minden irányban 6 pixelre kezdıdik és a táblázat sorai és oszlopai között nincsenek

szegélyek, azaz egész pontosan a szegélyek vastagsága zéróértékő.

<table align="center" border="0" width="50%"

cellspacing="6">

<thead>

<tr>

<th>balszélsı cím cella</th>

<th>középsı cím cella</th>

<th>jobbszélsı cím cella</th>

</tr>

</thead>

<tbody>

<tr>

<td>balszélsı cella</td>

<td>középsı cella</td>


59

<td>jobbszélsı cella</td>

</tr>

<tr>




</tr>

</tbody>

</table>

Ennek a kódnak a böngészıben a következı a megjelenítése:

Rögtön látható, hogy a kódban megadott táblázatfej és táblázat törzs formázást is

biztosít, egész pontosan a táblázat fejen belül megadott <th></th> (table header) tegek

közé írt szöveg félkövéren jelenik meg, míg az adatsorok <td></td> (table data) teg

párjai az oldal alapvetı betőtípusát használják. Az is látható, hogy a félkövér bető

mellett a címsor cellákban egy automatikus középre rendezés is történik. Ez így együtt

gyors formázást biztosít és a legtöbb esetben elég is a jól áttekinthetı táblázatos

megjelenítéshez.

Természetesen a táblázatok kódjában a <thead> (table head) és a <tbody> (table body)

megkülönböztetése nem szükségszerő, ezek nélkül is jó táblázatokat lehet készíteni. Az

alábbi kód a fenti táblázat kétsoros változata, ahol nincs címsor megadva:

<table align="center" border="0" width="50%"

cellspacing="6">

<tr>


60




</tr>

<tr>




</tr>

</table>

Az adatok rendezése mellett a táblázatos elrendezés hasonlóan fontos szerepe az oldalak

szerkezetének biztosítása. Az egyes oszlopok pixelben kifejezett pontos mérete is

megadható, képeket belehelyezve a cellák mintegy kimerevíthetık, a képek mérete adja

a cella pontos méretét is, így tetszıleges oldalszerkezet elkészíthetı. A keretes

elrendezésekkel szemben ezek jobban navigálhatók és így rendkívül népszerőek minden

olyan esetben, ahol a grafika jelentıs szerepet tölt be az oldalon. Nem csak a szigorúan

vett cellákkal lehet dolgozni, mind vízszintes, mind függıleges irányban a cellák

egyesíthetıek és így mindenféle elrendezés megvalósítható.

<table width="300" border="1" cellspacing="0" cellpadding="6">

<tr>

<td rowspan="2">egyesített sorok</td>

<td colspan="2">egyesített oszlopok</td>

</tr>

<tr>

<td> </td>

<td> </td>

</tr>

</table>

A táblázatban 1 pixeles szegélyt állítottunk be a láthatóság érdekében és két újabb

HTML/XHTML entitással, speciális kóddal ismerkedtünk meg, az í a hosszú í

helyett áll és az entitás a nem sortörı szóközt (non-breaking space) jelenti. Ez

utóbbi nélkül a böngészıben megjeleníteni kívánt táblázat üres cellái (karaktert/képet

nem tartalmazó cellák) nem jelennek meg megfelelıen.


61

5.2.8 Felsorolás elem

<li> </li>

Ez az elem a nevének és a rövidítésnek megfelelıen egy listát jelenít meg. Egyszerő

felsorolás lesz az eredmény, ahol a sorok mind külön-külön jelennek meg, de mivel a

böngészı nem tudja eldönteni, mit is akarunk, sorszámozott vagy csak bekezdésekbıl

álló listát, csupán a felsorolást jeleníti meg14.

A képen látható listának a HTML kódja így néz ki (a lista elemeiként megadott szöveg

illusztrációs célokat szolgál ☺):


Mi kell ahhoz, hogy valaki jó webmester legyen?

<li>Fantázia</li>

<li>Szorgalom</li>

<li>Az internet ismerete</li>

<li>Készség a tanulásra</li>

</body>

Ez azonban nem elégít ki minket, mert ilyen elrendezést a <br /> elem segítségével is

elıállíthatunk, semmi "listaszerő" nincs benne. Alapvetıen kétféle listát használunk a

dokumentumokban, ezek mindegyike elıállítható a leírónyelv eszközeivel. Az elsı

esetben karakterekkel kiemelt listát készítünk.

14 Ez nem teljesen igaz az Internet Explorer esetében, mert a beleépített szabályok szerint a külön nem

deklarált típusú listát ez a böngészı felsorolás-jellegő listának tekinti, és ennek megfelelıen jeleníti meg.

Ezen persze lehet vitatkozni, hogy meddig menjen el a böngészı a feltételezésekben…


62

<ul> </ul>

Ez már megfelel a követelményeknek, a felsorolás elemei bekezdéssel és karakterrel

kiemeltek, a felsorolás bevezetı sora is kiemelt, a sortávolság növekedett. Nézzük meg

az XHTML kódot:



<ul>

<li>Fantázia</li>

<li>Szorgalom</li>



</ul>

</body>

Itt már nem csak listaelemeket, hanem egy egész, úgynevezett rendezetlen listát

("unordered list", ul) határoztunk meg. Elemei a már korábban megismert <li> teggel

kijelölt listaelemek és mivel "rendezetlen", a bevezetı karakter alapértelmezetten egy

teli kör (Ugye már nem is kell külön említenünk, hogy ez is megváltoztatható

stíluslapok segítségével? ☺)

<ol> </ol>


63

Természetesen arra is van lehetıség, hogy számozott, azaz rendezett listát ("ordered

list", ol) hozzunk létre, ehhez csupán a listát meghatározó HTML elemet kell

megváltoztatni. Íme, a kódja:



<ol>

<li>Fantázia</li>

<li>Szorgalom</li>



</ol>

</body>

5.2.9 Színek a weboldalon

Színek sokfelé szerepelhetnek egy weboldalon, akár betőszínként, akár háttérszínként.

Háttérszíne sok elemnek lehet, így megállapítható háttérszín az egész oldalra a body

elem nyitó tegjén belül, de bármelyik táblázat cellára is megállapítható egyedi szín.

Ezek természetesen egymást felülírják, alapvetıen a gyerekobjektumra megállapított

háttérszín felülírja a szülıobjektumra megállapított színeket.

Kétféle módon adhatunk meg színértéket az egyes elemekre, használhatjuk az alapvetı

képernyıszínek angol elnevezéseit, mint például yellow, red, green, magenta vagy ezek

módosított neveit (lightblue, lightgreen, stb.). Ennél pontosabban adhatjuk meg a

színeket, ha az additív színkeverést használva minden szín esetében azok három bájton

ábrázolt hexadecimális kódját adjuk meg karakteres formában. Ennek pontos szerkezete

a következı:


64

#vörös_komponens zöld_komponens kék_komponens (szóközök nélkül!)

Azaz például #CC6633, ami egy világos barna szín kódja. Fontos, hogy a kód mindig

hat karakteres formában legyen megadva, vezetı nullákkal, ha szükséges, mert

kevesebb karakter esetében nem várt színeket kaphatunk.

A színek megfelelı alkalmazása grafikai-tipográfiai hozzáértést igényel. Általában

elmondható, hogy a világos háttéren sötét betők jobban olvashatók, mint fordítva. Ha

mindenképpen muszáj sötét háttéren például fehér betőket alkalmazni, akkor a jobb

olvashatóság érdekében sokszor érdemes félkövér betőket használni, hogy ugyanazt a

kontrasztot elérjük. Hasonló megfontolásokból ilyen esetekben érdemes az egyenes

lefutású, azaz sans serif betőket választani sötét háttér elıtt.

A színek megadására stíluslapok tárgyalásánál még visszatérünk.

5.2.10 Keretek (frame, iframe)

A leíró nyelvek fejlıdése érdekes görbén ment át az elmúlt években. A kilencvenes

évek közepén, végén nagyon népszerő volt az úgynevezett keretes elrendezés, ami

elıször tette lehetıvé, hogy a weboldalt ne kelljen teljes mértékben frissíteni az új

dokumentumrészek betöltése esetén, hanem csak a változó részt kelljen lekérni a

szerverrıl. Ez nagymértékben gyorsította a lekéréseket, mivel az oldal jelentıs

fájlmérető statikus grafikai elemeit csak egyszer kellett letölteni, és ez a korlátozott

sávszélességet figyelembe véve nagy elıny volt. A sávszélességek azonban

nagyságrendekkel bıvültek és a keretes rendszerek nem bizonyultak egyszerőnek a

navigáció szempontjából, a keresırobotok számára nehezen voltak követhetık a linkek

a kereteken át.

Ennek következtében visszatértek a táblázatos elrendezések, ahol ugyan a táblázat

elemeit újra le kellett kérni a szerverrıl, - de ezt részben a kliens tároló rendszere, a

cache tárolja – ugyanakkor a mai sávszélességek esetében nem okoz problémát a

letöltés. Nagy elıny továbbá az egyszerő navigáció és így a keresés számára teljes

mértékben rendelkezésre álló oldalak adta információáramlás.

A teljesség érdekében vizsgáljuk meg a keretes rendszerek felépítését és mőködését. Az

alábbi kódból látható, hogy egy speciális weboldalról van szó, amely a html nyitó- és

záró tegek között a már megszokott head és body elemek helyett egy úgynevezett

keretkészletet (frameset) tartalmaz. A keretkészlet nyitó tegjében adhatjuk meg, hogy az


65

oldalt függılegesen (cols, azaz oszlopok) vagy vízszintesen (rows, azaz sorok) kívánjuk

felosztani. Az alábbi felosztást értelmezve a teljes képernyıt (egészen pontosan az

ablakot!) három oszlopra osztottuk, amelyek közül az elsı kettı az ablak 25-25

százalékát teszi ki, a harmadiknak jut a maradék (*). Az így felosztott ablak három

részére egy-egy keretet definiálunk és megadjuk a keretet kitöltı HTML/XHTML fájl

relatív elérési útját és nevét. Ebbıl már látható, hogy az egyes XHTML fájlok

egyenként cserélhetık, a target = "_self" meghatározás a linkekben az adott fájl helyére

tölti be az új oldalt15.

<html>

<frameset cols = "25%, 25%,*">

<frame src ="bal.htm" />

<frame src ="kozepso.htm" />

<frame src ="jobb.htm" />

</frameset>

</html>

Nem elég persze, ha csak oszlopokra vagy csak sorokra tudjuk osztani az ablakot.

Keretkészletet viszont elhelyezhetı a keretkészleten belül is és ilyenkor a keretkészlet

veszi el egy-egy keret helyét. Könnyen belátható, hogy a klasszikus fejléc, jobb vagy

bal oldali statikus rész és érdemi rész elrendezéső weboldalakon minimum két,

egymásba ágyazott keretrendszert kell létrehozni az alábbiak szerint.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"

"http://www.w3.org/TR/html4/frameset.dtd">

<html>

<head>

<title>Keretrendszerek</title>


8859-2">

</head>

<frameset rows="150,*" frameborder="no">

<frame src="fejlec.html">

15 És rögtön itt van az elsı komoly probléma! Mivel a részoldalon olyan fájlokra is hivatkozhatunk,

azokra mutató linket is elhelyezhetünk, amelyeket nem az így rendelkezésre álló korlátozott helyre

szántak, teljesen el lehet rontani az oldal kinézetét.


66

<frameset cols="150,*" frameborder="no">

<frame src="menu.html">

<frame src="torzs.html">

</frameset>

</frameset>

<noframes>

<body>

</body>

</noframes>

</html>

Érdekességként megjegyezzük, hogy a legtöbb szerkesztıprogram automatikusan

beilleszt egy olyan kódot is, amit értelmezni tudnak azon böngészık, amelyek a

keretrendszereket nem képesek kezelni (<noframes> </noframes>). Ilyen azonban ma

már csak elvétve akad. Viszonylag jól mőködı keretes alkalmazást általában úgy

érdemes megvalósítani, hogy a bal oldali mezıben egy menüt helyezünk el, a felsı rész

a folyamatosan szükséges információ és a törzsmezı a bemutatásra váró információ

helye. Ilyen lehet például egy oktatóprogram elrendezése, a fejlécben az oktatási

anyagra, a belépett hallgatóra vonatkozó információ és a bal oldali oszlopban a

navigálást biztosító tartalomjegyzék. Ehhez hasonló elrendezéső az ILIAS elektronikus

tananyag felülete is.

Egy különleges keretbeillesztést tesz lehetıvé az úgynevezett iframe elem, amely az in-

line frame rövidítése. Itt is megadhatjuk azt a forrásfájlt, amelynek tatalma a keretben

megjelenik, és megadhatjuk a keret méretét, tovább sok egyéb tulajdonságát. Ezzel

mintegy ablakot hozhatunk létre az ablakon belül, de mégis viszonylag egyszerő a kód

és jól átlátható.

<body>

<iframe src ="iframe.html" width="200" height="100"></iframe>

</body>

Az XHTML lehetıségeinek csak egy részét érintettük, de már ez is bıven elég az

alapvetı munkákhoz. Speciális feladatokat további speciális elemekkel is

megoldhatunk, de nem árt tanulmányozni, hogy az egyes böngészık a különleges

elemeket hogyan kezelik.


67

5.2.11 Hogyan állítható elı egy XHTML oldal?

Itt az ideje, hogy a sok elméleti ismeret után megismerkedjünk egy XHTML oldal

gyakorlati elkészítésének menetével - elıre bocsátjuk, hogy kezdetben csak egyszerő

szerkezető oldalakat fogunk készíteni és majd ismereteink gyarapodásával jutunk el a

bonyolultabb oldalakhoz.

Többféle megközelítés lehetséges. Mivel az XHTML oldal lényegében speciális

kódokkal leírt szöveges dokumentum, az XHTML tegek ismeretében bármilyen

egyszerő szövegszerkesztı program - például Windows Jegyzettömb - segítségével

megírható a kódja és a böngészı ennek megfelelıen meg fogja jeleníteni. Fontos, hogy

csak egyszerő szövegszerkesztı alkalmazható, amely nem használ formázási

utasításokat, mert ezeket a böngészı nem képes értelmezni. Egy .doc fájlt például csak

úgy tud a böngészı "megjeleníteni", hogy meghívja a kliens gépen található Word

programot. Megoldhatjuk a dolgot úgy is, hogy Word program segítségével megírjuk a

kódot majd a fájlt egyszerő szövegfájlként mentjük el. Ilyenkor a Word "elfelejti" a

beállított formázásokat és csak a karaktersorozatokat adja vissza, amelyet viszont már a

böngészı értelmezni képes.

Ugyanakkor a Word vagy az Excel is alkalmas HTML elkészítésére, sıt a PowerPoint

dokumentum kimenete is lehet HTML, de ne feledjük, ezekben az esetekben az Office

programcsomagjába beépített fordítóprogramok állítják elı az XHTML kódot. Ehhez a

megfelelı programokból egyszerő módon a mentés html formában menüpontot kell

kiválasztani. Ezeket ki lehet próbálni, most csak annyit mutatunk be, hogyan néz ki egy

alapvetı HTML kód Word 97 programból elıállítva, azaz .html formába elmentve16:

<HTML>

<HEAD>

<META HTTP-EQUIV="Content-Type" CONTENT="text/html;

charset=windows-1250">

<META NAME="Generator" CONTENT="Microsoft Word 97">

<TITLE>Feldolgozott HTML kód</TITLE>

16 Nem véletlenül választottam egy régi Word programot. A jelenlegi Word 10 verzió nagyon hosszú és

szinte áttekinthetetlen kódot generál, stílusokat állít be és statisztikai információkat közöl a HTML fájlról.

Így egy tízsoros HTML kód Wordbıl lementve 10-15 kilobájt mérető fájlt hoz létre – tessék kipróbálni és

megtekinteni az így elıállított forrást!


68

</HEAD>

<BODY>

<B><FONT FACE="Arial" SIZE=2><P>Feldolgozott HTML

kód</P></B></FONT>

</BODY>

</HTML>

Az rögtön látható, hogy a kód nem XHTML kompatibilis, az egyes tegek nagybetősek,

egyes attribútumok nem kerültek idézıjelek közé. Ez nem túl meglepı, hiszen a Word

97 idején még nem volt elfogadott az XHTML nyelv. Egyébként sok változás nem

tapasztalható, a HTML tegek ugyan nagybetősek - ez teljesen mindegy a böngészı

szempontjából, mert a HTML nyelv szintaktikája nem különbözteti meg a kis- és

nagybetőket - de kisebb formai változtatásokkal egyértelmő a kód. A generátor program

beszúrt viszont egy plusz meta sort, ez az elıállítóra utal, és a megjelenítendı szöveget

paragrafusnak tekinti, ezért helyezte el a "<p>" paragrafus nyitó és "</p>" paragrafus

záró tegek közé.

Általában elmondható, hogy Word-bıl kiindulva nincs annyi befolyásunk a keletkezı

kódra, mint az erre a célra készült szerkesztıprogramok esetében (például PHP

Designer, Dreamweaver, Frontpage és társai).

5.2.12 A Jegyzettömb, mint HTML/XHTML szerkesztı eszköz

Szöveges fájlt a lehetı legegyszerőbb szerkesztıeszközzel is megírhatunk, persze ehhez

a teljes kód ismerete szükséges, hiszen semmi segítséget nem kapunk. Gyakorlásnak

azonban mindenképpen jó lesz. Ebben a fejezetben szinte kizárólag a Jegyzettömböt

használjuk szerkesztıeszközként és böngészıjével (Internet Explorer, Firefox, stb.)

fogja ezeket megjeleníteni, ezért a következıket javasoljuk: Hozzon létre egy webprog

elnevezéső mappát/könyvtárat a számítógépe merevlemezén (C meghajtó) amiben

elkészített fájljait tárolja. Készítsen parancsikont a Jegyzettömbhöz az Asztalra, hogy

gyorsan el tudja érni - persze csak akkor, ha nincs más egyéb, már beállított ikonja, és

már kezdıdhet is a gyakorlati munka. Az is egyszerősítheti a munkáját, ha a Start

menübıl elérhetı Futtatás parancsra kattint és a felbukkanó ablakban beírja: notepad.

Az Enter leütése máris elindítja a Jegyzettömböt és a Futtatás a legördülı menüjében

meg is ırzi a parancsot a továbbiakban.


69

Elıször is próbáljuk ki, mi az a minimális kód, amit egy böngészı megjeleníteni képes!

A megnyitott szerkesztıprogramban a felkínált új dokumentumba írja be a

következıket:

<html>

<head>

</head>

<body>

Minimális HTML kód

</body>

</html>

Az egyes sorokat nem feltétlenül kell egymáshoz képest eltolni a megadott módon, ezt

csak az áttekinthetıség miatt csináltuk. Az üres karaktereket és a sortöréseket a

böngészı az értelmezéskor nem veszi figyelembe, de a kód olvashatósága miatt

ajánlatos áttekinthetı szerkezetet létrehozni a fájlban. Mentse el a dokumentumot

például minimalis.html néven!

A Windows rendszer - beállítástól függıen - nem feltétlenül jeleníti meg a fájl

kiterjesztéseket, illetve a fájlt készítı programra jellemzı kiterjesztést sokszor

önkényesen hozzáragasztja a fájl nevéhez mentéskor. Így könnyen elıfordulhat, hogy

akaratlanul is minimalis.html.txt néven kerül mentésre az fentiek szerint elıállított fájl.

Ennek elkerülésére a mentéskor "minimalis.html" formában, idézıjelek között írja be a

fájlnevet és akkor az operációs rendszer nem illeszt hozzá semmiféle további

kiterjesztést!

Nyissa meg a böngészıjét és hívja be az így elkészített fájlt (Fájl → Megnyitás →

Tallózás → válassza ki a minimalis.html fájlt → OK) - meg fog jelenni a "Minimális

HTML kód" szöveg a böngészı ablakában! Ezzel megszületett elsı .html dokumentuma

- ha történetesen korábban még egyáltalán nem foglalkozott webszerkesztéssel.

A korábban bemutatott HTML kódokkal összehasonlítva látható tehát, hogy a fájl

keretének megadása bıven elég a megjelenítéshez. A böngészı eléggé "intelligens"

ahhoz, hogy ha nem adunk részletes utasítást a formátumra, akkor alapértelmezett

formátumokat állít be és azokat használja fel a megjelenítéshez. A minimálisnak

tekinthetı kód egy <html> nyitó teggel kezdıdik és </html> záró teggel végzıdik.

Ezen belül két részt lehet elkülöníteni, a <head> </head> nyitó-záró pár közé kerül


70

minden, amit nem akarunk megjeleníteni (kivéve a címet!), és úgynevezett metaadat

vagy csupán a böngészı számára szóló utasítás, és a <body> </body> nyitó-záró pár

közé kerül minden, amit látni és láttatni kívánunk.

Próbálja ki, hogy meddig lehet egyszerősíteni a kódot! Fokozatosan hagyja el az egyes

teg párokat és hívja be a böngészıbe az így elıállított fájlokat!

Bármilyen következtetésre is jutott ezen feladat elvégzése során, a továbbiakban azért

maradjon meg a kiindulási minimális szerkezetnél, hogy jobban át tudja tekinteni az

elkészített kódrészleteket!

A tegek természetesen nem lehetnek ékezetesek és adottak egy-egy HTML/XHTML

verzióban. Jelentését ismernünk kell az eredményes munkához még akkor is, ha

szerkesztıprogramot használva ezeket már nem saját kezőleg gépeljük majd be a kód

létrehozásához.

A vázat alkotó tegeket fentebb már részleteztük, most csak annyival egészítjük ki, hogy

míg a <html>, <head> nyitó tegek belsejében nem helyezhetünk el attribútumokat

(paramétereket), a <body> nyitó teg belsejében gyakran helyezünk el paramétereket,

amelyek megadják a dokumentum szöveges részének a megjelenítését. Ilyen lehet a

háttérszín, szövegszín, háttérként szolgáló képre történı hivatkozás, stílusbeállítás és

még sok mindent más. Általánosságban teljes szövegtörzsre (teljes oldalra) vonatkozó

tulajdonságokat határozhatunk meg ebben a tegeben.

Írja át a fenti minimalis.html fájlban a body teget, adjon hozzá paramétereket! Ehhez a

következıképpen kell módosítani a kérdéses sort: <body bgcolor="yellow" text="red">

majd mentse el és hívja be ismét a böngészıbe! Ha történetesen még nyitva van a

böngészı az elızı feladat után, akkor a Fájl → Szerkesztés menüpontból szintén el

lehet érni az alapértelmezett HTML szerkesztıprogramot (ez például az én gépemen a

Jegyzettömb) és máris szerkeszthetı a HTML dokumentum forrása.

Valószínőleg nem lepıdött meg nagyon, hogy sárga alapon piros betőkkel írt szöveget

kapott. A HTML leírónyelv egyik nagy elınye, hogy minimális angol nyelvtudással is

el lehet igazodni a kódban, mert eléggé "beszédesek" az egyes elemek, a paraméterek.

Egyúttal azt is megtanulta, hogy minden paramétert/attribútumot úgynevezett név =

"érték" pár formában kell megadni, mintegy értéket adva a megfelelı paraméternek.


71

5.2.13 Speciális karakterek a weboldalakon

A figyelmes olvasóban valószínőleg már fel is merült, hogy ha a kacsacsıröket a tegek

elkülönítésére használjuk, akkor hogyan lehet ezeket megjeleníteni? Honnan tudja azt a

böngészı, hogy mi most nem teghatárolóként, hanem karakterként akarjuk használni,

például egy matematikai egyenlıtlenség jelölésére? Nos, természetesen erre is van

megoldás és mivel nem csak ezekkel kapcsolatban merült fel a probléma, a megoldás is

általános.

Az XHTML leírónyelvben az alap ASCII-tól eltérı karaktereket kódolva adhatjuk meg

és ezt a szabványos kódolást mindegyik böngészı megérti és kódtáblázattól függetlenül

egységesen jeleníti meg. Az egységes megjelenítésben az "&" jel és a ";" jel között írjuk

le a karaktert, azaz szerkezete a következı:

&karakterleírás;

Így a "<" jel szabványos kódja "<" azaz az angol "less than" (kisebb, mint) rövidítés

és ennek megfelelıen a ">" jel kódja ">" azaz "greater than" (nagyobb, mint) lesz.

Talán már a szerkesztéseknél megfigyelte, hogy hiába üt be több üres karaktert, ennek

semmi hatása nincs a megjelenítésben, ugyanis a böngészı figyelmen kívül hagyja az

egynél több üres karaktert. A fenti logikát folytatva az idınként szükséges több üres

karaktert az kóddal vihetjük be. A leírás a "non-breaking space" szavak

kezdıbetőit rejti, azaz olyan üres karakter, amelynél nincs sortörés. Azt már biztosan

megfigyelte, hogy a hosszú sorok minden további nélkül törnek a megjelenítéskor, erre

nem kell külön figyelmet fordítani a HTML kódban, akárcsak szövegszerkesztésnél.

Egyes speciális jeleknek szintén megtalálható a kódmegfelelıje, így például a szerzıi

jogot jelzı (copyright) "" jel vagy a regisztrált áruvédjegy "" jele az "©"

illetve az "®" kódokkal vihetı be!

Számunkra talán legfontosabb viszont az ékezetes betők kezelése! Ez sok webmester

számára kínos és kellemetlen kötelesség és azt is megfigyelheti az Interneten a magyar

nyelvő oldalak között böngészve, hogy sokszor - még az igényesebb portálokon is! -

nem törıdnek vele. A baj okozói az "ı" és az "ő" betőink. Sajnos általános megoldás

még nincs, ezek szép megjelenítése csak a megfelelı kódlapok megadásával lehetséges,

illetve meg kell várnunk az UTF-8 kódolás elterjedését �.

Addig sem árt azonban tudni, hogyan kell magyar ékezetes betőkódokat létrehozni.

Összesen négy leírást alkalmazunk, az "uml" a kettıspontot, az "acute" a jobbra dılı


72

vesszıt, a "tilde" a hullámvonalat és a "circ" a kalapot jelenti. Az összeállításhoz a

kezdı "&" karakter után a módosítani kívánt alapkaraktert - például "a" vagy "A" -

adjuk meg és ezt követi a módosítójel leírása, ami esetünkben az "acute" majd a kódot a

pontosvesszı zárja. Az alábbi táblázatban láthatók a magyar ékezetes betők HTML

kódjai (ismét megjegyezzük, hogy az "ı" és "ő" esetében a probléma nem oldható meg

kielégítı módon:

Á - Á á - á É - É é - é Í - Í í - í

Ó - Ó ó - ó Ö - Ö ö - ö Õ - Õ õ - õ

Ú - Ú ú - ú Ü - Ü ü - ü Ő - Û ő - û

Jegyezze meg a következı, nem túl értelmes elnevezéső gép nevét: Árvíztőrı

tükörfúrógép. Használni ugyan sohasem fogja ☺, de a név tartalmazza az összes magyar

ékezetes karaktert. Ha ki akar próbálni egy kódtáblázatot vagy beállítást, ennek

segítségével ellenırizheti az ékezetes karakterek megjelenését. Szinte minden nyelvben

találhatók ilyen könnyen megjegyezhetı kifejezések vagy mondatok, amelyek szerepe a

karakterek tesztelése, kipróbálása. Többségük még az írógép korából maradt ránk,

amikor például a betők tisztaságát, a billentyők akadálymentes mőködését próbálták ki a

segítségükkel. Így az angol nyelvterületen a "the quick brown fox jumps over the lazy

dog" mondatot használják ilyen célokra.

Felmerülhet a kérdés, hogy mi van akkor, ha a fenti kódokban használt "&"

("ampersand") karaktert akarjuk megjeleníteni? Természetesen erre is találtak

megoldást, ennek HTML/XHTML kódja az "&" karaktersorozat és az idézıjelet is

leírhatjuk az """ kóddal.

Tovább is bonyolíthatjuk életünket, mert másféle, nehezebben megjegyezhetı, de

egységes kódolási rendszer is létezik. Ebben az ASCII kódokat használjuk fel, a

HTML-ben már megismert "&"kezdı és ";" lezáró karakterek között, ahol az ASCII

kódszámot egy "#" kettıs kereszt (hashmark) karakterrel kezdjük. Ebben a rendszerben

a "<" jelölése például "<", míg a ">" jelölése ">".


73

5.2.14 Dedikált HTML/XHTML szerkesztıprogramok

Ha a böngészınkben meghívjuk a www.google.com keresıprogramot és a részletes

keresésnél a kifejezésre keresésnél beírjuk a html editor szöveget, egymillió feletti

találatot kapunk. Még a html ide (integrated developer environment) kifejezésre is sok

tízezer találat érkezik. Természetesen ez nem azt jelenti, hogy több tízezer eszköz van

forgalomban, de azért tudjuk, hogy rengeteg eszköz áll rendelkezésünkre. Ezek 98

százaléka csak színezni tudja a kódot, nem tud grafikus alapon kódot beilleszteni, és

csak néhány tíz van, amelyek a kész kódot grafikusan módosítani is tudják. A

gyakorlatokon a PHP Designer 2005 (szabadon használható) szerkesztıeszközt

használjuk, ez letölthetı a www.medzi.hu helyrıl is. Van ennél újabb változata is, a

PHP Designer 2007 szintén letölthetı az eredeti MPSoftware weboldalról, de ennek már

nem minden változata szabad szoftver. Neve alapján elsısorban PHP programozásra

dolgozták ki, de jól használható HTML esetén is.

Az egyszerőbb HTML kódokat nem tudja beilleszteni automatikusan (bekezdés,

betőformázás), de a bonyolultabb esetekben, mint például képek, táblázatok, őrlapok és

őrlapelemek, a beillesztéshez sok segítséget kapunk.

5.2.15 A weboldalak megjelenítése

Egyszerő HTML, XHTML fájlokat a böngészıben megnyitva megtekinthetünk, a

megnyitás során a böngészı értelmezi a HTML kódot és az eredményt írja ki a

képernyıre. Ilyenkor a kód természetesen nem jelenik meg, csak a kódok által leírt

szövegelrendezést, formázást láthatjuk. Minden böngészı ugyanakkor lehetıséget

biztosít a kód megtekintésére, általában az operációs rendszerben található alapvetı

szerkesztıprogram meghívásával. A Firefox esetében ez nem a Jegyzettömb, hanem egy

beépített egyszerő szerkesztıeszköz és ezért a kód színezve, jól áttekinthetıen jelenik

meg.


74

Általában a szerkesztıeszközök rendelkeznek egyszerőbb vagy bonyolultabb

megjelenítı funkcióval is. Van, amikor az alapértelmezett böngészıt hívják meg, és van

olyan eszköz, amely saját beépített böngészıvel rendelkezik. Ez persze nem jelenti azt,

hogy a szerkesztıeszközhöz külön böngészıprogramot írnak, az esetek legnagyobb

részében valamely nyílt forráskódú böngészı beépítésérıl van szó. Így a PHP Designer

esetében az elkészített weboldalak megtekinthetık elınézetben a szerkesztıprogram

ablakában, de ez nem azonos funkcióit tekintve egy teljes értékő web szerver

biztosította megjelenéssel.

Ahhoz, hogy a weboldal egy valódi webszerverrıl letöltve jelenjen meg, szervergépre

van szükségünk. Szerencsére ehhez nem kell dedikált gép, a saját gépünkre is

feltelepíthetünk web szervert, amely a gép beépített domain nevén (localhost és az

ennek megfelelı IP cím, a 127.0.0.1) keresztül érhetı el és ettıl kezdve a böngészı

szabályosan, a http protokollon keresztül éri el a web szerver gyökérkönyvtárában

elhelyezett fájlokat és onnét tölti le a kért weboldalakat. A gyakorlatok során az

AppServ programcsomag által biztosított Apache web szerver lesz a webkiszolgálónk

és ennek c:\AppServ\www könyvtára lesz a gyökérkönyvtár.

Egy távoli web szerver eléréséhez ugyanakkor megfelelı fájlfeltöltési protokollra (ftp,

sftp, stb.) van szükség, de ezt például a Total Commander fájlkezelı szoftver


75

beépítetten biztosítja a kliens oldalon, míg a szerver gépekre biztosított belépési

lehetıség magába foglalja a szerverre történı fájlfeltöltés engedélyezését is. Minden

szerverüzemeltetı maga szabja meg, hogy a gépre történı fájlfeltöltés milyen protokoll

mellett és milyen szabályok alapján történik, ezért erre általános szabályok nem adhatók

meg.

5.2.16 Adatok formai leírása és összekapcsolása

A HTML, XHTML elsıdleges feladata a dokumentum jellegő adatok, vagy a

dokumentum formába hozható adatok megjelenítése. A web és a HTML népszerőségét

elımozdító nagy találmány viszont a hiperlink volt, amely lehetıséget biztosít egyes

szövegrészek és a hozzájuk tartozó információ összekapcsolására az egész World Wide

Web keretében, azaz mind a dokumentumon belül, mind az egyes dokumentumok

között.

Logikus követelmény, hogy például egy tartalomjegyzék esetében a tartalomjegyzék

által jelölt fejezetekre lehessen ugrani adott dokumentumon belül. Erre szolgál az

úgynevezett "named anchor" (megnevezett horgony) elem és az erre mutató hiperlink.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title>Linkek szerepe</title>


8859-2">

</head>

<body>

<p> <strong>Tartalomjegyzék</strong> </p>

<p> <a href="#bevezetes">Bevezetés </a><br>

<a href="#specifikacio">Specifikáció </a><br>

<a href="#tervezes">Tervezés </a><br>

<a href="#fejlesztes">Fejlesztési dokumentáció</a> <br>

<a href="#kezikonyv">Felhasználói kézikönyv </a></p>

<p> <a name="bevezetes"></a>Bevezetés fejezet</p>

<p> <a name="specifikacio"></a>Specifikáció fejezet</p>

<p> <a name="tervezes"></a>Tervezés fejezet</p>

<p> <a name="fejlesztes"></a>Fejlesztési dokumentáció fejezet</p>

<p> <a name="kezikonyv"></a>Felhasználói kézikönyv fejezet</p>


76

</body>

</html>

Látható a kódból, hogy a Tartalomjegyzék egyes fejezetcímeire hiperlinket állítottunk

be, ahol a href attribútum egy azonosítót tartalmaz és ez az azonosító az egyes

fejezetcímek elıtt álló megnevezett horgony name attribútumával van kapcsolatban. Így

a böngészı a hiperlinkre kattintva a dokumentum hivatkozott részletét fogja az aktív

ablakba betölteni, azaz addig görgeti a dokumentumot, amíg a kérdéses rész az ablakba

kerül. Ez kétségkívül nagyon elegáns megoldás a lapozásra…

A hiperlink azonban nem csak a dokumentumon belül, hanem a dokumentumok között

is mőködik és ebben az esetben a hivatkozott dokumentum relatív elérését (ha a

webhelyen belül van) vagy az abszolút elérését kell megadni (teljes URI) ha a

webhelyen kívül van.

A két lehetıség kombinálható is, azaz megadhatjuk a dokumentumot tartalmazó fájl

nevét, elérési útját és megadhatjuk a dokumentumon belül a hivatkozott részt is. A fenti

"szakdolgozat" Felhasználói kézikönyv fejezetére kívülrıl, a weben keresztül például a

következı módon hivatkozhatunk:

<a href="http://www.akarhol.hu/szakdolg/szoftfejl.html#kezikonyv">

Felhasználói kézikönyv </a>

Ebben az esetben nem egyszerően a hivatkozott weblap egésze, annak elsı részével az

ablakban fog megjelenni, hanem a weblap betöltése mellett a böngészı a hivatkozott

részig fogja görgetni a dokumentumot az aktív ablakban.

5.2.17 Adatok továbbítása XHTML őrlapokkal

A web népszerőségének növekedésével igény mutatkozott arra is, hogy különbözı

adatokat tudjunk a weblapok segítségével felvinni a szerverre, ahol majd az erre a célra

elkészített szerver oldali programok, alkalmazások az adatokat fel is tudják dolgozni. Ez

a feldolgozás lehet egyszerő adatrögzítés is adatbázisokban, de akár repülıgépes

helyfoglalás is, vagy bármely más elektronikus ügyintézés. Ehhez több dolgot kellett

megteremteni, mind a kliens oldalon, mind a szerver oldalon.

− Adatokat általában őrlapok segítségével veszünk fel, tehát a

HTML/XHTML nyelv kell, hogy rendelkezzen olyan elemekkel, amelyek a


77

böngészınek őrlap és adott őrlapobjektumok megjelenítéséhez adnak utasítást.

Ezek az őrlapelemek dinamikus felületek a képernyın.

− A kliens csak kéréseket intézhet a szerverhez, ezért a szerverre történı

adatküldéshez a kliens csak a http protokoll segítségével tudja elküldeni az

adatokat, egész pontosan fogalmazva a kliens mindig lekér egy weboldalt a

szerverrıl és a kéréshez mellékelhet adatokat.

− A http protokoll csak karakteres adatokat képes továbbítani név-érték

párok formájában, tehát az összes elküldendı adat esetében vagy maga az adat

karakteresen reprezentálható kell, legyen, vagy ennek megfelelı formába kell

hozni. Ez a referencia jellegő adatoknál megoldható például szerializálás17

segítségével.

− Meg kellett oldani a böngészı (kliens) oldalon, hogy az őrlap

elküldésére kiadott parancs (submit típusú gomb a HTML kódban)

mőködtetése esetén az őrlap objektum összes gyerekobjektuma (az

őrlapelemek) felvegye a bevitt értéket és ezeket egy metódus a http kérésbe

csomagolja. Ez a feladatot egy JavaScript metódus (submit() függvény) látja el

a kliens oldalon, ami hozzá lett kötve a submit típusú gomb onClick

eseményéhez.

− Végül a szerver oldalon meg kellett oldani, hogy a http kérésben

érkezı karakteres név-érték párokból valódi változók jöjjenek létre a

szervergép memóriájában. Ezeket a változókat ezután a szerver oldali

alkalmazás fel tudja dolgozni, a szükséges mőveleteket el tudja rajtuk végezni.

Azok számára, akik fel akarják használni a HTML/XHTML nyújtotta lehetıségeket,

elegendı az őrlapok, őrlapobjektumok mőködésének ismerete azonban, mert a fentebb

felsorolt mőveletekért a böngészı és a szerver oldali operációs rendszer felelıs.

Ismerjünk meg tehát az őrlapok mőködését, mőködtetését az XHTML kód szintjén.

Az őrlap XHTML kódja:

17 A szerializálás alatt olyan átalakítást értünk, amely például egy tömb típusú változó esetében létrehoz

egy karakteres leírást a tömb szerkezetérıl, amit majd a fogadó oldal képes visszaalakítani a tömb típusú

változóvá. Hasonló módon megoldható például egy objektum továbbítása is karakteres formában.


78

<form action="lekertlap.html" method="GET"

enctype="multipart/form-data" name="urlap" id="urlap" title="Ez az

őrlap megnevezése, ami tooltipben jelenik meg">

</form>

A form tegek határolják be az őrlap objektumot, a nyitó és záró elemek közé írt beviteli

mezık alkotják az őrlap törzsét. A nyitó teg action attribútuma adja meg, hogy mit is

csináljon az őrlap az adatokkal, azaz hová továbbítsa, adott esetben milyen lapot kér le.

Ez a hivatkozás lehet relatív, mint a fenti esetben, ekkor a böngészı az őrlapot

tartalmazó laphoz képest meghatározott elérési úton küldi el a kérést és az adatokat a

megadott lapnak, de lehet abszolút is, ebben az esetben az itt megadott URI alapján

történik a http kérés. Fontos megjegyezni, a kérés nem törıdik azzal, hogy a megadott

lap tud-e bármit is kezdeni az adatokkal! Ha a kért weboldal tartalmaz szerver oldali

kódot, amely ezeket feldolgozza, akkor az adatok feldolgozásra kerülnek. Az action

attribútum azonban nem csak weblap címeket tartalmazhat, hanem megadhatunk itt

végrehajtható programokat is. Ha azok a web szerver által biztosított speciális

mappában helyezkednek el, akkor a web szerver biztosítja az átküldött név-érték párok

feldolgozását az úgynevezett Common Gateway Interface (cgi)18 segítségével és ezeket

az adatokat a megcímzett program mint parancssori paramétereket kapja meg.

E-mail küldés őrlappal

Ebben az attribútumban hivatkozhatunk a mailto protokollra is egy e-mail cím

megadása mellett. Ebben az esetben a böngészı a kliens gépen található alapértelmezett

levelezıprogramot nyitja meg és annak törzsébe bemásolja az őrlap objektumok név-

érték pár formában megadott adatait. Abban az esetben, ha az így e-mail küldésre

használt őrlapra felvett adatokat szabályos e-mail üzenetként akarjuk elküldeni, nem

mindegy, hogy milyen nevet adunk az egyes beviteli mezıknek! Az e-mail üzenetek

ugyanis szabványos elnevezéső mezıkbıl állnak, és ha az őrlap beviteli mezık nevei

ezekkel megegyeznek, akkor a mezıelnevezések alapján a levelezıprogram ezeket a

megfelelı e-mail mezıkhöz veszi fel. Az alábbi HTML kód esetében egy szabványos e-

mail üzenet áll össze:

18 Ezekrıl egy külön fejezetben lesz majd szó.


79

<!doctype html public "-//W3C//DTD HTML 4.01//EN">

<html>

<head>

<title>

E-mail form

</title>

</head>

<body>

<form action="mailto:[email protected]" method="GET" >

Másolatot kap: <input type="text" name="cc" /> <br />

Titkos másolatot kap: <input type="text" name="bcc" /> <br />

Tárgy: <input type="text" name="subject" /> <br />

Az üzenet törzse: <input type="text" name="body" /> <br />

<input type="submit" value="E-mail küldés" />

</form>

</body>

</html>

A fenti kód végrehajtása esetén a böngészı nem a szerverhez fordul, hanem a kliens

gépen jelenik meg az alábbi e-mail küldı ablak:


80

A method attribútum értéke GET vagy POST lehet. A GET metódus használata esetén

az adatok, a név-érték párok az URI-hez kapcsolva jelennek meg a böngészı lokátor

sorában és a http kérés fejlécében kerülnek elküldésre. Ebben az esetben természetesen

bárki láthatja az adatokat és például egy jelszó beviteli mezı esetében hiába jelennek

meg csillagok a bevitel során, itt a jelszó mezı neve és a jelszó látható lesz. Ez a

beviteli módszer azonban tökéletesen megfelelı például keresések esetében, amikor

nincs értelme az őrlap mezıiben amúgy is látható keresı kifejezés, kulcsszó titkolására

és jó szolgálatot tesz a fejlesztés során is, mert egyszerően ellenırizhetı a segítségével

az őrlap mőködése.

A POST metódus esetében az adatok, a név-érték párok a http kérés törzsében kerülnek

továbbításra és értelemszerően nem láthatók a böngészıben. Így jelszavak, rejtett

adatok továbbítása esetében ezt ajánlatos választani.

A form nyitóteg többi attribútuma részben önmagában is értelmezhetı, részben más

elemek esetében már volt szó róluk. Fontos viszont, hogy megismerjük a szabványos

őrlap elemeket és azok kódját.

Egysoros szövegmezı, karakterek bevitelére szolgál. A számértékek is karakteres

formában kerülnek továbbításra, azok megfelelı értelmezése a szerver oldal feladata.

<input type="text" name="szoveg" value="Ez lesz a bevitt szöveg"

/>

Többsoros szövegmezı. Érdemes megfigyelni, hogy ez az elem nem egyszerő input

elem, hanem olyan HTML/XHTML objektum, amely az értékét a nyitó és záró tegek

közé kerülı karakterekként veszi át.

<textarea wrap="OFF" name="szovegmezo">Idekerül majd a bevitelre

szánt szöveg</textarea>

Egysoros rejtett szövegmezı, titkos információ, mint például a jelszó bevitelére

szolgál. A leütött karakterek helyett csillagok jelennek meg.

<input type="password" name="jelszomezo" value="abrakadabra" />


81

Rádiógomb csoport. A csoport tagjainak a name attribútuma azonos, így biztosítjuk a

csoportba tartozást. Az egyik kiválasztásával a radiogomb névhez a megfelelı érték

rendelıdik, amit az egyes gombok value attribútumában adunk meg. Amennyiben nem

adunk meg value attribútumot, a rákattintás az "on" értéket másolja be a name

attribútum értékeként. Ha azt akarjuk, hogy alapértelmezetten ki legyen választva az

egyik, akkor a checked = "checked" attribútum-érték párt is el kell helyezni az

alapértelmezett rádiógomb kódjában19.

<input type="radio" name="radiogomb" value="elsı érték" />

<input type="radio" name="radiogomb" value="második érték" />

<input type="radio" name="radiogomb" value="harmadik érték" />

Jelölımezı, mőködése sokban azonos a rádiógomb mőködésével, például abban az

esetben, ha a value attribútum nincs megadva. Ha azt akarjuk, hogy alapértelmezetten a

doboz be legyen jelölve, itt is meg kell adni a checked attribútumot, a rádiógombhoz

hasonló módon. Ha a name attribútum azonos értéket kap, azaz több jelölıdoboznak

azonos nevet adunk, akkor több, azonos nevő név-érték pár kerül továbbításra. Ennek

feldolgozása már a szerver oldali programnyelvtıl függ.

<input type="checkbox" name="jelolodoboz" value="ha bekattintják,

ez lesz elküldve"/>

Legördülı lista, jelen esetben egy ország név lista jelenik meg. Az option elemek

közötti rész az egyes sorok ablakban megjelenı tegje, a value attribútumban pedig a

továbbítandó hozzátartozó értéket adhatjuk meg, ebben az esetben például az ország

kódját.

<select name="orszaglista" />

<option value="HU">Magyarország</option>

<option value="IT">Olaszország</option>

<option value="SK">Szlovákia</option>

</select>

19 Ez az XHTML követelménye. HTML kód esetében elég a checked szó beillesztése a kódba, de az

XHTML nem engedi az úgynevezett rövidített attribútumok használatát.


82

Ez az őrlapelem fájlok feltöltésére szolgál, egy tallózási lehetıséget biztosít a fájlok

kiválasztásához. A kiválasztott fájl neve is a szerverre kerül, ennek alapján azonosítható

a fájl.

<input type="file" name="fajlnev" value="ide kerül a feltöltendı

fájl neve" />

Ez a mezı nem jelenik meg a böngészı ablakában, rejtett információk továbbítására

szolgál. Ez az információ elrejtés messze nem teljes, hiszen a weblap kódjában ott van

az információ. Csupán arra szolgál a beviteli mezı. hogy ne zavarjuk a felhasználót

olyan adatok megjelenítésével, amit nem szerkeszthet a felületen. Természetesen a leíró

nyelvekhez értı felhasználó számára nem okozna problémát az információ forráskódban

történı szerkesztése.

<input type="hidden" name="rejtettmezo" value="rejtett információ"

/>

Egyszerő, felirat nélküli nyomógomb, amely a jelen kód mellett nem csinál semmit. Ha

feladatot akarunk adni ennek a gombnak, hozzá kell rendelni egy eseménykezelıt

(például onClick) és meg kell írni az esemény kódját a kliens oldalon futtatható

programnyelv segítségével, ami többnyire JavaScript.

<input type="button" name="nyomogomb" />

Ez a gomb alapértelmezetten a submit() függvényt hívja meg rákattintás hatására, azaz

elküldi azon őrlap adatait, amelyhez tartozik a gomb.

<input type="submit" name="submit_gomb" />

Ez a gomb a reset() függvényt hívja meg az aktuális őrlap esetében. A függvényt az

őrlap gyerekobjektumokon végighaladva az egyes objektumok value attribútumaiban

található értékeket adja az elemeknek, így helyreállítja a betöltéskor kapott őrlap

alaphelyzetet.


83

<input type="reset" name="reset_gomb" />

Ez az elem egy képet állít be a submit gomb felirata helyett, azaz annak funkcióit (őrlap

elküldése) egy gombként viselkedı kép látja el. Elsıdleges jelentısége a dekoráció,

funkcionálisan nem különbözik a submit gombtól.

<input type="image" src="kep.jpg" border="0" width="50"

height="15" name="kepes_gomb" />

5.3 XML

Az XML az a mágikus szó, amelyrıl mindenki hallott már de kevesek vannak tisztában

használatával és jelentıségével. Ez a technika a legısibb információközlést, a karakteres

adattovábbítást emeli strukturált, magas szintre és így az alkalmazások közötti

adatátadásban kulcsszerepet játszik. Elıfutára és ıse az SGML (Standard Generalized

Markup Language), amelynek talán legnépszerőbb és legismertebb alkalmazása a

HTML, az adatok megjelenítésének verhetetlen eszköze. Ugyanakkor az XHTML,

amely a HTML szigorúan szabványosított, modern változatának tekinthetı, az XML

egyik praktikus alkalmazása lett. A világ nem állt meg itt és ma már a 3D grafikát leíró

nyelvek is ugyanezt a technikát kezdik követni.

Az XML nem törıdik az adatok megjelenítésével, csupán azok összefüggéseit,

egymáshoz való viszonyukat írja le szigorúan karakteres eszközökkel. Ebbıl logikusan

következik, hogy az XML elsıdleges területe az adattovábbítás. Kijelenthetjük, hogy

szinte bármilyen adat átvihetı karakteres formában, még a tipikus bináris adatok

esetében (standardizált képfájlok, hang és video fájlok) is megvan az a lehetıség, hogy

karakteres referenciát biztosítsunk az adatra és a tényleges adatátviteltıl elválasztva

oldjuk meg ezek célba juttatását. Az Internet és a szélessávú kapcsolatok terjedésével

általában nincs is szükség a tényleges bináris adatátvitelre, elég annak URI azonosítóját

célba juttatni.

Emlékeztetıül álljon itt egy XML fájl szerkezete, amely egy irodaház helyiségleltárát

írja le. Az alábbi fájl adatokat győjt össze és rendszerezett szerkezetben mutatja be

ezeket.


84

<?xml version="1.0"?>

<epulet>

<szint id="1" elnevezes="félemelet">

<helyiseg ajtoszam="12">

<butor tipus="íróasztal" szin="bükk">

<darabszam>3</darabszam>

<beszerzes>2002</beszerzes>

<ertek penznem="HUF">12000</ertek>

</butor>

<butor tipus="falipolc" szin="fekete">




</butor>

<butor tipus="ajtós szekrény" szin="bükk">




</butor>

</helyiseg>

<helyiseg ajtoszam="21">

<butor tipus="íróasztal" szin="bükk">




</butor>

<butor tipus="falipolc" szin="fekete">




</butor>

<pc:komputer xmlns:pc="http://www.medzi.hu/komputer">

<pc:darabszam>2</pc:darabszam>

<pc:beszerzes>2005</pc:beszerzes>

<pc:ertek penznem="HUF">200000</pc:ertek>

</pc:komputer>

</helyiseg>

</szint>

</epulet>

85

Az XML nyelv egyik kevésbé ismert ám nagyon elterjedt alkalmazása a szoftverek

paramétereinek beállítására használt, vagy a futási körülményeket, figyelembe veendı

adatokat meghatározó konfigurációs fájlok. Az alábbi példa a JBuilder lib könyvtárában

található library fájlok egyike, amely az egyik osztálykönyvtár, stílusosan az XML

feldolgozáshoz szükséges eszközöket tartalmazó Xerces könyvtár elemeit írja le.

A Xerces.library fájl tartalma:

<?xml version="1.0" encoding="UTF-8"?>

<library>



<fullname>Xerces</fullname>

<class>

<path>[xercesImpl.jar]</path>



<path>[xerces.jar]</path>

<path>[xmlParserAPIs.jar]</path>

</class>

<source>

<path>../extras/xerces/src</path>

</source>

<documentation>

<path>../extras/xerces/docs/javadocs/api</path>

<path>../extras/xerces/docs/javadocs/dom3-api</path>

<path>../extras/xerces/docs/javadocs/xerces2</path>

<path>../extras/xerces/docs/javadocs/xni</path>

<path>../extras/xerces/docs/javadocs/other</path>

</documentation>

</library>

A NetBeans Java szerkesztıeszközben is az egyes modulok betöltését, beállításait XML

fájlokban adják meg. Az alább következı fájl tartalma a NetBeans HTML szerkesztı

modulját állítja be.

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE module PUBLIC "-//NetBeans//DTD Module Status 1.0//EN"

"http://www.netbeans.org/dtds/module-status-1_0.dtd">

<module name="org.netbeans.modules.html.editor">

<param name="autoload">false</param>

<param name="eager">false</param>


86

<param name="enabled">true</param>

<param name="jar"> modules/org-netbeans-modules-html-editor.jar

</param>

<param name="release">1</param>

<param name="reloadable">false</param>

<param name="specversion">1.5.21</param>

</module>



87

6 A JavaScript nyelv alapjai

A JavaScript programnyelvet a weblapok dinamikus kezelhetısége, interaktivitása

érdekében fejlesztették ki és jelenleg a legnépszerőbb szkript nyelv az interneten,

amelyet sok millió weblapon használnak. Más szkript nyelvek is rendelkezésre állnak,

mint például a Visual Basic módosításával kialakított VBscript, de ezek népszerősége

jelentısen elmarad mögötte. Az általános hiedelemmel ellentétesen nem a Java nyelv

módosításával készült, hanem egy teljesen önálló fejlesztés eredménye – az igaz

viszont, hogy mind a Java nyelv, mind a JavaScript nyelv C-típusú nyelv, így a

hasonlóság a közös ısnek tulajdonítható. A nyelv a kliens oldalon mőködik, a böngészı

futtatja és így lehetıséget biztosít kliens oldali feladatok ellátására, mint például az

őrlapok ellenırzése, a böngészı lekérdezése, vagy kliens oldalon dinamikus tartalom

létrehozására. Ez utóbbi esetben például lehetıséget biztosít nagyobb, algoritmusokkal

leírható táblázatok megjelenítésére anélkül, hogy a táblázat teljes XHTML kódját le

kellene tölteni, vagy megvalósíthatók képcserék, az egérmutató mozgását érzékelı és

arra reagáló események is.

Gyakorlatilag az összes ma használatos böngészı támogatja a JavaScript nyelvet.

Nevének megfelelıen a JavaScript kód olvasható karakteres utasítás sorokból áll, ezek a

HTML/XHTML oldalba beágyazhatók és a kódot a böngészı értelmezi (interpretálja,

innét az interpretált nyelv elnevezés). Ennek megfelelıen a JavaScript kód az oldal

letöltése után, a böngészı által kerül értelmezésre – az ehhez szükséges interpretert

tehát a böngészı biztosítja – és az így elıállított kimenet az oldal szerves részét képezi.

Amennyiben ez a kimenet például XHTML kódot hoz létre, akkor a böngészı ezt meg

is jeleníti a szerverrıl letöltött statikus XHTML kóddal együtt.

A JavaScript nyelv objektum alapú programnyelv és a közhiedelemmel ellentétben nem

egy egyszerő, bárki által alapszinten és könnyen használható nyelv. Egy-két

szükségszerő korlátozástól eltekintve segítségével bármilyen program megvalósítható a

használatával. Vannak JavaScript nyelvő játékprogramok éppúgy, mint komolyabb

logikát igénylı alkalmazások és grafikai megoldások.


88

A nyelvbıl hiányzik azonban a fájlkezelés és ennek logikus következményeként az

adatbázis kezelés megvalósíthatósága is. Mivel egy letöltött weblapnál nem lehet elıre

eldönteni, hogy annak mi lehet a tartalma kódszinten, értelemszerően nem engedhetı

meg semmi olyan programnyelvi elem, ami a gyanútlan kliens gépen fájlokat,

adatbázisokat tudna kezelni, módosítani, hiszen ezzel mintegy kinyitnánk a gépünket

bárki számára az Interneten keresztül.

A fenti állítással – ti. nem tekinthetı minimális tudással, bárki által programozható,

egyszerő nyelvként a JavaScript – látszólag ellentmond az a tény, hogy az Interneten

számos JavaScript kódrészlet található és a szerzıi jogok tiszteletben tartása mellett

szabadon felhasználható. A kellıen dokumentált kódrészletek – amelyekben például

megjegyzésként ott szerepel az összes, a beillesztéskor elvégzendı módosítás leírása is

– ugyan egyszerően beilleszthetık, de a kódrészletek megírása profi programozói

feladat. Nem véletlen, hogy álláskeresésnél a webes területeken a JavaScript ismerete

komoly elıny lehet.

6.1 A nyelv szerepe

Az elmúlt néhány évben a JavaScript szerepe jelentısen megnıtt, mert az AJAX

technológia terjedésével lehetıvé vált a kliens oldalon teljes értékő, dinamikusan

kezelhetı felületek létrehozása. Ennek segítségével a háttérben kérés küldhetı a szerver

felé, anélkül, hogy a kéréssel frissítenénk az oldalt, vagy arról egy másik oldalra

lépnénk át. A kérésre kapott válasz a JavaScript segítségével feldolgozható

(megjegyezzünk, hogy például az URI-hez főzött adatok, a név-érték párok minden

további nélkül feldolgozhatók JavaScriptbıl) és ezek felhasználásával az oldal egyes

részei frissíthetık, felülírhatók. Ennek részletei azonban egy külön tantárgyat

igényelnének.

Összefoglalva tehát a JavaScript nyújtotta lehetıségek a következık:

− A több helyen, katalogizált webtárakban fellelhetı JavaScript

kódrészletek lehetıséget biztosítanak arra, hogy a programozáshoz csak

minimálisan értı webfejlesztı is be tudjon illeszteni dinamikus tartalmat a

fejlesztés alatt álló oldalára. Ezt segítik a komolyabb fejlesztıi eszközök által

felkínált kódrészletek is, ahol csak a beállításokat kell elvégezni.


89

− JavaScript segítségével dinamikusan felépíthetık a weboldal egyes

részei, ahol a szerkezet algoritmizálható. Például egy szorzótábla kirakása

néhány soros kóddal megoldható a kliens oldalon.

− A JavaScript segítségével a HTML/XHTML oldal objektumaihoz

kapcsolható eseményekre reagálni tudunk a megfelelı kódrészlet (függvény)

meghívásával.

− A HTML/XHTML dokumentum objektum modelljét kihasználva a

JavaScript segítségével az egyes elemek olvashatók és írhatók.

− A JavaScript lehetıséget biztosít arra, hogy egy őrlap mezıit az

elküldés elıtt ellenırizzük, különbözı számításokat elvégezzünk és/vagy

meggyızıdjünk a bevitt adatok formai megfelelıségérıl.

− A kliens oldalon futó JavaScript képes a böngészı felismerésére, a

szükséges információ lekérdezésére, így a böngészı típusának megfelelı kódot

tudunk biztosítani a leküldéshez, illetve a böngészı által kezelhetı

eseményeket, megoldásokat tudunk kiválasztani.

6.2 JavaScript a weboldalon

A JavaScript kód a weboldalba illeszthetı, ezért a HTML/XHTML elemek között

található <script></script> tegek határozzák meg a kód helyét az objektum modellben.

A teg pár elhelyezhetı a <head> elemen belül, ebben az esetben a webfejlesztı

felelıssége, hogy az itt megadott JavaScript kód ne tartalmazzon látható kimenettel

rendelkezı kódot, mint például kiíró utasítást. Ebben a részben célszerően csak

deklarálásról legyen szó, például egy függvény vagy változók megadásáról. Mivel a

head elem kiolvasása és végrehajtása megelızi a body elemét, az itt megadott

JavaScript függvények már az egész oldalon ismertek és elérhetık. Az itt elhelyezett, a

fenti szabályoknak megfelelı kód csak akkor kerül végrehajtásra, ha az adott függvényt

meghívjuk.

<!doctype html public "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

<head>

<title>JavaScript az oldalon</title>

<script type="text/javascript">


90

var uzenet = "A document.write() függvény a JavaScript kiíró

utasítása";

function tajekoztatas(uzenet) {

document.write(uzenet);

}

// A tajekoztatas(uzenet) függvényt a body elemen belül

bárhonnan meghívhatjuk

</script>

</head>

<body>

</body>

</html>

A body elemen belül tetszıleges helyen és tetszıleges számban elhelyezhetünk script

elemeket, amelyek viszont akkor kerülnek végrehajtásra, ha a böngészı a feldolgozás

során az elemhez ér. Az itt megadott JavaScript kód tehát azonnal végrehajtódik az

oldal betöltése során, külön meghívás nélkül. Természetesen egy itt deklarált függvényt

éppúgy meg kell hívni, mint a head elemben elhelyezettet, azonban a függvény csak a

megadás helyétıl lesz elérhetı a kódban. A fenti példa ismeretében például a következı

JavaScript kód jelenhet meg a body elemben:


var uzenet = "Aktuális üzenet";



}

</script>

Ennek kimenete az uzenet változóba bevitt szöveg megjelenítése ott, és úgy, ahogyan

ezt az XHTML elemek meghatározzák.

Lehetıség van arra is, hogy a JavaScript kódot egy külsı fájlban helyezzük el. Erre

akkor lehet szükség, ha a kódot több oldalon is fel akarjuk használni és annak esetleges

módosításait ebben az esetben nem kell az összes alkalmazási helyen végrehajtani. A

kód egyszerő szöveges fájlban helyezkedik el és a script elem nyitó tegjében

hivatkozunk rá. Hagyományosan az ilyen fájl kiterjesztése .js, utalva a tartalomra, de


91

bármilyen kiterjesztéső fájl használható. Ebben a fájlban szigorúan csak JavaScript

utasítások helyezhetık el, HTML/XHTML elemek nem.

<head>


<script type="text/javascript" src="uzenet.js">

</script>

</head>

Az uzenet.js fájl tartalma:

var uzenet = "A document.write() függvény a JavaScript kiíró

utasítása";



}

// A tajekoztatas(uzenet) függvényt a body elemen belül

bárhonnan meghívhatjuk

Látható, hogy minden érdemi kód a külsı fájlban van és ez a kód a script elem belsejébe

mintegy bemásolódik a fájlra való hivatkozással.

Ne feledjük el két fontos dolgot!

− A JavaScript nyelvet a böngészı értelmezi, ezért ha a böngészıben ezt

a lehetıséget kikapcsoljuk, a JavaScript kód élettelen lesz és semmit sem hajt

végre.

− A JavaScript kód publikus, ott van a weboldal forrásában. Ezért

semmivel sem lehet megakadályozni, hogy valaki belenyúljon, átírja,

módosítsa vagy akár teljesen kiiktassa. Így a késıbb tárgyalásra kerülı kliens

oldali ellenırzések nem biztonságosak, azokat feltétlenül követnie kell szerver

oldali ellenırzésnek. Arra viszont kiváló a JavaScript, hogy meggyorsítsa az

őrlapok ellenırzését, mert nem kell minden hiba esetében megvárni a szerver

válaszát.

6.3 Dokumentáció

Mivel a JavaScript kód publikus, az ezen a nyelven írt forráskódok is szükségszerően

publikusak, bárki számára megismerhetık, értelmezhetık. Ennek következtében a nyelv

rendkívül népszerő és számos oktató jellegő program, dokumentum született az évek


92

során. Számos könyv is készült mind magyar, mind idegen nyelven. Mivel azonban a

böngészık értelmezik, az egyes böngészıgyártók sokszor különbözı speciális elemeket

is belevittek, amit csak az adott böngészı képes kezelni. Mindezek miatt egyrészt nehéz

egységes szerkesztırendszert létrehozni, kevés olyan IDE található, amely valóban

alkalmas emelt szintő fejlesztési munkára és tesztelésre, másrészt a JavaScrip esetén

fokozott igény van a dokumentáció folyamatos tanulmányozására, hogy a böngészı-

specifikus elemeket figyelembe tudjuk venni. Ezért érdemes kéznél tartani olyan

kézikönyveket, amelyek a forráshoz nyúlnak vissza és az eredeti nyelvi specifikációkat

tartalmazzák. Ilyen például a http://developer.mozilla.org/en/docs/JavaScript linken

található dokumentáció, amely az alapvetı, úgynevezett core JavaScript leírást

tartalmazza.

6.4 Nyelvi elemek

A JavaScript strukturális nyelvi elemei a C-típusú nyelvi háttérnek megfelelıen jelentıs

mértékben megegyeznek a Java nyelvi elemeivel, ezért ebben a fejezetben csak az

eltérésekre hívjuk fel a figyelmet, nem ismételjük a máshol már elsajátított ismereteket.

6.4.1 Változók

A JavaScript nem típusos nyelv, ezért az egyes változók deklarálásakor nem kel típust

megadni, a változó típusa a belevitt érték típusának megfelelıen változik. Változót

deklarálhatunk a var kulcsszóval, de a változó nevének egyszerő leírása is létrehozza a

változót, azaz a

var valtozo;

var valtozo = "érték";

valtozo = "érték";

kifejezések egyenértékőek a változó létrehozása szempontjából. A pontosvesszı kitétele

nem kötelezı a sorok végén, kivéve, ha egy sorban több utasítást is leírunk. Gyakorlati

okokból azonban erısen ajánlott megszokni a pontosvesszı, mint utasítás lezáró jel

használatát.

A változó érvényességi köre a deklarálás helyétıl függ, ha metóduson (függvényen)

belül deklaráljuk (lokális változó), akkor csak annak belsejében lesz elérhetı, a

függvény lefutásával a változó értéke elvész. Azonos nevő változók különbözı

függvényekben egymástól függetlenül létezhetnek. A függvényeken kívül deklarált


93

változók érvényességi köre az egész oldal, akkor jön létre, amikor a kód végrehajtás a

változó deklarálásához és az oldal bezárásával a változó értéke elvész. Az ilyen

"globális" változót az oldal összes függvénye el tudja érni.

6.4.2 Nyelvi szerkezetek

A feltételes szerkezetek (if, if...else, if...elseif...else, switch szintaxisa és mőködése

teljes egészében megegyezik a Java nyelvnél tanultakkal. Az aritmetikai, értékadó,

összehasonlító, logikai operátorok hasonlóképpen azonosak és a Java esetében

megismert feltételes operátor is megtalálható a JavaScript nyelvben.

Az iterációk esetében is fennáll ez az azonosság, a JavaScript is ismeri a for, a while és

a do…while ciklusokat. Amennyiben a ciklus futását meg akarjuk szakítani itt is

rendelkezésünkre áll a break és a continue utasítás. Az elıbbi az egész ciklus elhagyja

és a program végrehajtás a ciklus utáni elsı utasításnál folytatódik, míg az utóbbi csak

az aktuális lépés futását szakítja meg és a végrehajtás a következı ciklussal folytatódik.

Egy speciális ciklus-szerő nyelvi szerkezet a for…in utasítás, amely segítségével

végiglépkedhetünk egy tömb értékein, vagy egy objektum tulajdonságain és mindegyik

elemen elvégezhetünk azonos mőveleteket. Ennek egy példája a következı kód:

<!doctype html public "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

<head>


</head>

<body>


var honapok = new Array("január", "február", "március",

"április");

var honap;

for (honap in honapok) {

document.write(honapok[honap] + "<br />");

}

</script>

</body>

</html>


94

A break szerepet kap a switch szerkezetben is, ha nem akarjuk, hogy a végrehajtás a

belépési blokk utáni blokkban folytatódjon, a break utasítás segítségével tudjuk ezt

megakadályozni.

6.4.3 Metódusok, függvények

A JavaScript esetében kiterjedten használunk metódusokat, amelyek eljárások vagy

függvények lehetnek. A metódusok esetében – a JavaScript automatikus

típusválasztásának megfelelıen – nincs lehetıség a visszatérési típus megadására, ezt a

programozónak kell figyelemmel kísérnie a kódírás során. A beépített metódusok

esetében a JavaScript megırzött annyi strukturális vonást, hogy számos függvény és

eljárás nem tartozik egyik objektumhoz sem, illetve olyan objektumhoz tartozik, amely

példányosítása nélkül is meghívható az adott metódus. Így egy kevert, részben

strukturális, részben objektum-orientált nyelv áll elıttünk.

Ezekre például szolgálhat három, gyakran használt metódus, amelyek figyelmeztetést,

megerısítést vagy változó értékadást végeznek az oldalon.

Általában figyelmeztetésre használjuk az alert box-ot, ezt a modális ablakban

megjelenı értesítés dobozt, amit csak az OK gombra kattintva lehet elhagyni. Szintaxisa

a következı:

alert("figyelmeztetés a felhasználó számára");20

Ez valójában a window objektum alert metódusa, de mivel az oldalon mindig a

window objektumon belül vagyunk, nem kell külön megadni.

Választási lehetıséget nyújt a felhasználó számára a szintén modálisan megjelenı

confirm box, amit a felhasználó vagy az elfogadás OK gombjával, vagy a mégse

gombra kattintva tud elhagyni. Amennyiben a felhasználó az OK gombra kattintott, a

függvény visszatérési értéke true lesz és ez feldolgozható egy szelekció feltételében.

Logikus, hogy a mégse gombra kattintva a visszatérési érték viszont false lesz, így ezzel

két lehetıség között választhat a felhasználó. A szintaxisa a következı:

confirm("Valóban befejezi a teszt kitöltését?");

20 A JavaScript sztring kezelése érdekes, mert akár az egyszeres idézıjel, azaz az aposztróf, akár a kettıs

idézıjel használható a sztring behatárolására. Ha az egyik féle idézıjellel kezdünk, a másik minden

további nélkül használható a sztringen belül, és az értelmezı nem veszi sztring határnak.


95

A prompt box egyszerő értékadási lehetıséget biztosít egy-egy változónak, amely

értéket az oldal betöltése során akarjuk feldolgozni. Itt is lehetıség van választásra,

amennyiben a felhasználó nem akar adatot megadni, úgy a mégse gombra kattintva

hagyja el ez a modális ablakot és ebben az esetben a prompt függvény visszatérési

értéke null lesz, pontosabban az értékre váró változó kap null értéket. A szintaxis a

következı:

prompt("valtozo_nev", "beviteli_ertek");

Ennek megjelenése az oldalon a következı:

6.4.4 Eseménykezelés

A JavaScript használatával lehetıségünk nyílik dinamikus weboldalak létrehozására, és

ehhez biztosít eszközöket a JavaScript az eseménykezelık biztosításával. Ezek észlelik

az eseményeket, amelyek lehetnek egéresemények, billentyőesemények és az oldal

betöltésével, az oldalon való navigálással kapcsolatos események is.

Tipikus események lehetnek például egy weboldalon:

• egérkattintás,

• egér mozgatása valamely kiemelt pont fölé az oldalon,

• beviteli mezı kiválasztása vagy elhagyása egy XHTML őrlapon,

• őrlap elküldése, alaphelyzetbe állítása,

• weblap, vagy kép betöltıdése


96

A cél az, hogy az észlelt eseményhez21 megfelelı függvényeket kapcsoljunk és az adott

függvény végrehajtását az esemény bekövetkezte indítsa meg.

Az onLoad és az onUnload események akkor keletkeznek, amikor a felhasználó

akciójának következtében egy oldal betöltıdik, vagy éppen elhagyjuk az oldalt. A

gyakorlatban az onLoad eseményt érdemes kihasználni a böngészı típusának

ellenırzésére és az így nyert információ alapján a megfelelı weboldal változatot lehet

betölteni a felhasználó számára. Hasonlóképpen, ha valami nagyon fontos dologra

akarjuk felhívni a felhasználó figyelmét, akkor az oldal betöltıdése során felbukkanó

ablakban helyezhetjük el az információt. Ezzel azonban óvatosan kell bánnunk, mert

sok esetben bosszantó lehet a sok felbukkanó ablak.

Az onUnload esemény viszont hasznos lehet olyan esetben, ha valamilyen kapcsolatot

kell megszüntetni a felhasználó távozása esetén (kilépés kezelése).

Őrlapokkal kapcsolatosan a leggyakrabban kihasznált három esemény az onFocus, az

onBlur és az onChange. Ezekhez köthetık a különbözı validáló függvények, amelyek

feladata a kliens oldali beviteli ellenırzés. Az onFocus akkor jön létre, ha belépünk egy

őrlapelembe, az onBlur az elhagyásakor aktiválódik – ez természetesen azzal jár, hogy

valamely másik elembe lépünk át – és az onChange minden olyan lépésre aktiválódik,

amikor az őrlapelem tartalma megváltozik, azaz például a szövegbevitel közben minden

karakter leütésére is.

Az események az egyes objektumokhoz köthetık, például a következı kóddal:

<input type="text" id="email" onChange="emailEllenorzes()" />

Ebben az esetben a célszerően a head elemben deklarált emailEllenorzes() függvény

hívódik meg, amely lehet egyszerő figyelmeztetés is, de az e-mail cím nem

megfelelısége miatt vissza is vihet a mezıbe. Erre késıbb láthatunk majd példát az

őrlapok JavaScript alapú ellenırzése során.

Az onSubmit esemény segítségével az őrlap összes mezıjét ellenırizhetjük, persze

ehhez meg kell írni az egyes őrlapmezık specifikus ellenırzı függvényeit. Az eseményt

az őrlap objektumhoz kapcsoljuk, azaz az őrlap elem nyitó tegjén belül helyezzük el a

következı módon:

21 A JavaScript által feldolgozható teljes esemény referenciát a következı helyen találhatja meg:

http://www.w3schools.com/jsref/jsref_events.asp


97

<form method="POST" action="feldolgoz.html" onSubmit="return

urlapEllenorzo()" >

A submit esemény bekövetkeztekor az eseményhez kapcsolt függvény meghívásra

kerül, és csak akkor zajlik le az őrlap adatok elküldése – azaz a http kérés összeállítása –

ha az esemény által aktivált függvény true értékkel tér vissza. Ellenkezı esetben a

submit nem zajlik le, így a függvényt úgy kell összeállítanunk, hogy mindenképpen

boolean értékkel térjen vissza.

Igen gyakran használjuk az egérmozgás eseményeit a weblapok dinamizmusának

biztosítására, itt elsısorban a különbözı animációk létrehozására. Mindenki tapasztalt

már olyan jelenséget, hogy az egérkurzor mozgatása során egy felirat, vagy kép

megváltozik, és amikor az egér "odébbáll", visszaáll az eredeti helyzet. Ezt az

onMouseOver és az onMouseOut eseményekhez kapcsolt függvények biztosítják, a

következık szerint:

<a href="aktiv_link.htm"

onMouseOver="document.images[0].src='aktiv.jpg';"

onMouseOut="document.images[0].src='eredeti.jpg';">

<img src="eredeti.jpg" width="60" height="12" border="0">

</a>

A fenti kód egy olyan hiperlink kódja, ahol a link fölé kerülı egér kiváltotta esemény

hatására az eredeti kép helyett (eredeti.jpg) egy másik kép (aktiv.jpg) töltıdik be, míg

az egérmutató távozása esetén az eredeti kép áll helyre. Ehhez két pixelre azonos mérető

képre van szükség, hogy az oldal ne mozduljon el, és kihasználtuk a dokumentum

objektum modell által biztosított images tömböt. Mivel az oldalon a kód értelmezése

sorrendjében ez a kép az elsı, így a tömb elsı eleme is ez a kép lesz, és a tömb minden

eleméhez tartozik egy src attribútum, amely a képfájl nevét és elérési útját tartalmazza.

Ezt változtatva a JavaScript segítségével a kép is megváltozik.

Az események egy speciális csoportját képezik az idızítı események. Sok esetben

szükséges lehet a dinamikus tartalom megjelenítése érdekében, hogy egyes JavaScript

függvények idıben egymás után, és/vagy adott rendszerességgel kerüljenek meghívásra.

Erre mutatunk be egy példát az alábbiakban, ahol a rendszeresen meghívott függvény a

rendszeridıt olvassa le és írja ki, ezzel mintegy órát mőködtetve a weblapon.


98

<html>

<head>

<title>Digitális óra</title>


8859-2">

<script language="JavaScript" >

var kezdIdo = new Date();

var kezdet = kezdIdo.getTime();

var setting = 500;

function dig_ora() {

most = new Date();

ora = most.getHours();

if (ora < 10)

ora = "0" + ora;

perc = most.getMinutes();

if (perc < 10)

perc = "0" + perc;

mperc = most.getSeconds();

if (mperc < 10)

mperc = "0" +mperc;

var msg = ora+":"+perc+":"+mperc ;

document.oraform.ora.value=msg;

setTimeout("dig_ora()",1000);

}

</script>

</head>

<body bgcolor="#FFFFFF" onLoad="dig_ora()">

<p>Hogyan készítsünk valódi órát?

<form name="oraform">

<input type="text" name="ora" size="6">

</form>

</body>

</html>

A kódból látható, hogy a dig_ora() függvény egy idıkiírást hoz létre, miután a Date

objektumtól elkéri a szükséges adatokat és ezt az idı sztringet az őrlap ora nevő

szövegmezıjébe írja be, kihasználva az objektum value tulajdonságának

módosíthatóságát. A mőködtetés a setTimeout() függvény feladata, az elsı paramétere

annak a függvénynek a neve, amelyet meg kell hívni, a második paraméter az

idıintervallum két meghívás között, milliszekundumokban megadva. Magát a dig_ora()


99

függvényt az onLoad eseményhez kapcsoltuk, azaz az oldal betöltésével indul és utána a

függvényhívások rekurzív módon zajlanak, azaz magából a lefutó függvénybıl hívódik

meg újra, a beállított késleltetéssel.

6.4.5 JavaScript objektumok

A JavaScript erejét a benne megvalósított objektumok és az általa elérhetı objektumok

adják. A teljes objektumreferencia, az egyes JavaScript verziók és az általuk ismert

metódusok részleteiben megtalálhatók a referenciákban. Itt most csak a legfontosabb

metódusokat és tulajdonságokat említjük meg, hogy elısegítsük a tájékozódást az

objektumok között.

String objektum

Karaktersorozatok, sztringek kezelésére szolgál, a létrehozása, mőködése nagyon

hasonlít a Java String objektum mőködéséhez.

A length tulajdonság az egyik leggyakrabban lekérdezett tulajdonság, a tárolt sztring

hosszát adja vissza.

A toUpperCase() metódus a sztring nagybetős reprezentációját adja vissza.

A match() metódus egy meghatározott sztring értékre kereshetünk rá a tárolt sztringen

belül.

Az indexOf() metódus egy megadott sztring (karakter) elsı elıfordulásának a

pozícióját adja vissza a tárolt sztringben.

A replace() metódus karaktereket helyettesíthetünk a tárolt sztringben megadott

karakterekkel.

Date objektum

A Date objektum dátumokkal és idıpontokkal való munkát tesz lehetıvé. Amennyiben

nem adunk meg kezdıértéket, automatikusan az aktuális dátumot és idıpontot tárolja.

Ezeket az értékeket a megfelelı formában kiolvashatjuk a Date objektum által

biztosított metódusok segítségével.

A getTime() metódus az eltelt idıt képes visszaadni egy meghatározott alapértéktıl

számítva.

A getFullYear(), getMonth(), getDate() metódusok, sorrendben megfeleltetve, a

beállított dátum objektumnak megfelelı év, hónap és nap értékeket adják vissza. Mindig


100

tartsuk szem elıtt az objektumreferenciát, mert például a logikusnak látszó getDay()

függvény a hét napját adja vissza szám formájában és nem a hónap napjait!

Két dátum objektum össze is hasonlítható, mert az objektum tetszés szerinti dátumra

állítható rá és így például vizsgálható, hogy a beállított dátumhoz képest hány nap van

még hátra, vagy hány nap telt el a kijelölt idıponttól.

Array objektum

Ez a JavaScript nyelvben használt tömb, de kezelése és mőködése inkább a Java-ban

megismert Vector objektumhoz hasonlít. Nem egyszerő változó, hanem objektum, a

megfelelı metódusokkal felszerelve. A for…in utasítás kapcsán már találkoztunk vele,

létrehozása az objektumokkal azonos módon a new kulcsszóval történik.

A concat() metódus két array objektum összekapcsolására szolgál.

A sort() metódus egy array objektum elemeinek a sorba rendezésére szolgál. Nem csak

az alapvetıen elvárható, számok esetén növekvı érték szerinti és sztringek esetén az abc

szerinti sorba rendezés oldható meg, hanem megadható az a függvény is, amely az

egyes elemek egymáshoz való viszonyát megállapítja. Ez hasonlóan mőködik, mint a

Java compareTo() metódusa, csak itt a konténer ismeri a sorba rendezés feltételét és

nem az objektum.

A push() és pop() metódusok segítségével az array objektumhoz elemeket adhatunk és

elemeket távolíthatunk el. Mőködésük nagymértékben analóg a Java Vector objektuma

add() és remove() metódusával.

Boolean objektum

Szerepe speciális, fı feladata, hogy tetszés szerinti nem boolean típusú értéket Boolean

értékké tudjunk alakítani. Létrehozása a new kulcsszóval történik, értéke mindenképpen

false, ha nincs kezdıértéke, vagy van, de a kezdıérték 0, negatív szám, null, üres

sztring, false, nem meghatározott (undefined)22 vagy nem szám (NaN). Az egyéb

esetekben az érték true.

Math objektum

22 Akkor lehet egy változó értéke undefined, ha még nem kapott értéket. Ilyen például egy őrlap elsı

betöltése esetén az összes, value attribútummal nem rendelkezı mezı értéke.


101

Ismét egy különleges objektum, nem kell létrehozni, nem tárol semmit, csak a

matematikai függvények, konstansok, összefüggések megvalósítására szolgál.

Gyakrabban használjuk a random(), max(), min(), vagy round() metódusát, ezek neve

egyértelmően jelzi a mögöttük meghúzódó funkciókat. Az alábbi példakód egy, a

megadott számtartományban véletlen egész számot generáló függvényt mutat be.

function vszam(elso, utolso){

return Math.floor(Math.random() * (utolso-elso+1)) + elso;

}

6.4.6 Böngészı objektumok

Nem csak a JavaScript saját objektumai állnak rendelkezésre, hanem a böngészı által

biztosított objektumok is. Ezek segítségével a környezetrıl, a böngészı mőködésérıl

kaphatunk adatokat. Értelemszerő, hogy ezek az objektumok a legkevésbé

szabványosak, hiszen minden böngészı gyártó többé-kevésbé a saját elképzeléseit

építette bele ezekbe az objektumokba.

Öt ilyen objektumot különböztetünk meg, a hierarchia csúcsán a window objektum áll,

amely a JavaScript hierarchiájának a legfelsı szintjén helyezkedik el. Ez az objektum

egy böngészıablakot képvisel és automatikusan jön létre, amikor egy body vagy

frameset elem végrehajtásra kerül.

A navigator objektum a kliens gépen futó böngészırıl tárol információt. Ezt kell

lekérdeznünk, ha a böngészık eltérı tulajdonságait figyelembe akarjuk venni, hogy az

eltérések ellenére is azonos megjelenéső és mőködéső weblapokat tudjunk létrehozni.

A screen objektum a kliens gép képernyıjét képviseli és arról rendelkezik

információkkal. Lekérdezésével megállapítható, hogy a kliens milyen felbontásban,

milyen képernyı beállításokkal dolgozik és lehetıséget biztosít a weboldalak testre

szabására.

A history objektum a böngészı ablakához kapcsoltan a meglátogatott weboldalak URI-

jeit tartalmazza. Ez teszi lehetıvé a visszalépést egy már korábban meglátogatott

weboldalra és amíg a böngészı példány fut a history-ban hivatkozhatók a meglátogatott

oldalak, a sorrendjük alapján. Például visszaugorhatunk tetszés szerinti számú lapot.


102

A location objektum viszont az éppen aktuális URI-rıl tárol információt, amire az

ismételten elküldött http kérések során van szükség. A location objektum reload() vagy

replace() függvényei segítségével egy új oldalt tudunk betölteni az aktuális helyére, ha

ezt a lefuttatott ellenırzés szükségessé teszi.

6.4.7 A document objektum és gyerekobjektumai

A HTML/XHTML Dokument Objektum Modellt és annak objektumait, a document

objektumot és gyerekobjektumait a böngészı biztosítja. Ez az objektum modell

platform és nyelvfüggetlen, bármely programozási nyelv, mint például a Java,

JavaScript és VBScript egyaránt hozzáférhet ezekhez. Az objektum faszerkezetét a

böngészı állítja fel a leírónyelv szabályai alapján. Ezen keresztül az összes XHTML

elem elérhetı, elérhetık azok attribútumai és az értékként szolgáló karakteres részek,

szövegek is. Ez a tartalom, mint az objektumok tulajdonságai, módosíthatók, de maguk

az objektumok is törölhetık vagy új objektumok adhatók a modellhez. Ezeken keresztül

biztosítható az XHTML dinamikussága.

Gyerekelemnek tekinthetı az összes XHTML elem, amely meghatározásra került az

XHTML Javaslatban. Mivel az elemek a name és jelenleg egyre inkább az id

attribútumaikon keresztül egyértelmően azonosíthatók, az egyes objektumok a

document objektum getElementById() metódusán keresztül kezelhetık, értékük

kiolvasható vagy módosítható a teljes hierarchia ismerete nélkül.

Az alábbi utasítás például egy szladatum azonosítóval rendelkezı beviteli mezıbe állítja

be a mai dátumot, a konkatenálással (összefőzéssel) megadott formátumban.

<body>

<input type="text" name="szladatum" id="szladatum" />

<script language="javascript1.2">

mainap = new Date();

dstring = mainap.getFullYear() + "/" + (mainap.getMonth()+1) + "/"

+mainap.getDate();

document.getElementById("szladatum").value = dstring;

</script>

</body>


103

6.5 Őrlapok és JavaScript

A korábbiakban már néhány példában látható volt, hogy a JavaScript kezelni képes az

őrlap objektumokat a többi objektumhoz hasonló módon. A legnagyobb jelentısége

azonban a JavaScript nyelvnek, hogy segítségével kliens oldali ellenırzések

végezhetık. Az alábbi gyakorlati példában többféle ellenırzés látható, amit az egyes

őrlapmezık esetén a JavaScript végrehajt. Nem csak ellenırzés van azonban, hanem a

külön megírt ellenırzı függvények – a moduláris programozás miatt ezek tetszés szerint

cserélhetık, csak az a lényeg, hogy egy boolean visszatérési értéket hoznak létre – a

mezı elhagyása után az onBlur eseményhez kapcsoltan lefutnak, és amennyiben nem jó

az érték, a felhasználót a select() metódus visszaviszi a rosszul kitöltött mezıbe.

Praktikusan addig nem lehet továbblépni, míg a kitöltés nem tökéletes – vagy a

JavaScripthez értı felhasználó ki nem kapcsolja a kódban az ellenırzést.

Érdemes megfigyelni még, hogy az objektumon, azaz a beviteli mezın belül a mezı

objektumra egyszerően a this lokális referenciával hivatkozhatunk, így nincs szükség az

objektummodell elemeit külön azonosítani.

<html>

<head>

<title>Őrlap ellenırzés JavaScript függvények segítségével</title>


8859-2">

<script language="Javascript1.2">

var neve;

function joirszam(irszam) {

if (!isNaN(irszam))

return true;

else

return false;

}

function jologin(login) {

if (login.length >= 6)

return true;

else

return false;

}


104

function joemail(email) {

if ((email.lastIndexOf('@') == -1) || (email.length < 6))

return false;

else

return true;

}

function jojelszo(jelszo) {

if (jelszo.match('[0-9]'))

return true;

else

return false;

}

</script>

</head>

<body bgcolor="#FFFFFF">

<p>Honnan tudjuk, hogy jó értéket vittek be? </p>

<form name="kontroll" method="post" action="">

<table width="90%" border="0" cellspacing="0" cellpadding="6">

<tr>

<td>login</td>

<td> <input name="login" type="text" id="login" size="30"

onBlur="if (!jologin(this.value)){window.alert('nem elég hosszú a

login!'); this.select();}"> </td>

</tr>

<tr>

<td>jelszó</td>

<td> <input name="jelszo" type="text" id="jelszo" size="20"

onBlur="if (!jojelszo(this.value)) {alert('nincs benne szám!');

this.select();}"> </td>

</tr>

<tr>

<td>irányítószám</td>

<td> <input type="text" name="irszam" size="4" maxlength="4"

onBlur="if (!joirszam(this.value)) {alert('nem jó az

irányítószám!'); this.select();}"> </td>

</tr>

<tr>

<td>email cím</td>


105

<td> <input type="text" name="email" size="30"

maxlength="30" onBlur="if (!joemail(this.value)) {alert('nem jó az

email cím!'); this.select();}"> </td>

</tr>

</table>

</form>

</body>

</html>

Természetesen számos egyéb ellenırzés lehetséges, nagyon jól mőködnek viszont a

formai ellenırzésben az úgynevezett reguláris kifejezés alapján történı

összehasonlítások. Ezekkel tetszés szerinti maszk készíthetı el és finom különbségek is

kiszőrhetık a bevitt értékekben. Az így elıkészített adatok gyorsabban feldolgozhatók,

mert csak a kifejezetten rosszindulatú felhasználó által szándékosan elkövetett hibákat

kell már csak kiszőrni a szerveroldalon.



106

7 Stílusok, stíluslapok

Ahogy azt a korábbi fejezetekben többször említettük, webdokumentumok

megjelenését szabályozó formai utasításokat nem célszerő HTML vagy XHTML

utasítások segítségével megadni, még ha erre ezek a nyelvek biztosítanak is néhány

alapvetı lehetıséget. A HTML nyelv eredetileg a tartalom jelölésére készült, de a

formai igények növekedtével fokozatosan bekerültek formázó utasítások is. Ilyen

például a betők kiemelését szabályozó <i> </i> (dılt betőt beállító) vagy <b></b>

(vastagbetőt beállító) tegek, amelyek például egy felolvasó böngészı számára

alapvetıen értelmezhetetlenek. Akkor már szerencsésebb ezek <em></em>

(emphasize - hangsúlyoz) ill. <strong></strong> (erıs) alternatíváit használni,

amelyek esetén a felolvasó böngészıben beállítható, hogy mennyire kell

hangsúlyozni az így megjelölt szavakat. A betők egyes tulajdonságai a <font> teg

segítségével közvetlenül is megváltoztathatók (pl. <font size="+3"

color="#FF0033">szöveg</font>), de ez további bonyodalmat okoz, mert ez a

megjelenést rögzíti, utólagos módosítása, minden egyes alkalmazott <font> teg

paramétereinek egyenkénti megváltoztatását igényli.

Ugyanakkor a stilisztikai igények folyamatos növekedésével egyre nagyobb igény

merült fel a stílusok egységes, kényelmes beállítására és változtatására. Ezen

igények kielégítésre a különbözı böngészıkben a stílusok egységes módosítására

létrehozták a saját leíró nyelvüket, amelyek egységesítésre született a CSS

(Cascading Style Sheets) nyelv. Ennek elsı verziója a W3C konzorcium ajánlásával

1996-ban jelent meg, majd ezt követte 1998-ban a CSS2, amely jelenleg is

érvényben van. 2009 szeptemberében jelentette meg a W3C a CSS2 módosítására

tett elsı javaslatait (CSS 2.1), miközben a CSS3-on 2007 májusa óta dolgozik a

konzorcium. (lásd http://www.w3.org/Style/CSS/current-work.)

A CSS a HTML vagy XHTML dokumentumok egységes stílusleíró nyelve, amely

segítségével egységesen állítható a betőméret, szín elrendezés, stb. Elıre

elhatározzuk, hogy mely elemek (pl. a címsorok különbözı szintjeinek) megjelenése


107

legyen megegyezı, ezeket azonos stílusokhoz rendeljük, míg magát a stílusokat

elegendı egyszer definiálni (szemben pl. a <font> teg minden egyes stílus

beállításakor történı megadásával).

Mivel a dokumentum struktúrája elkülönül a stílust szabályozó utasításoktól, ezért a

dokumentum megjelenése minimális változtatással gyorsan, hatékonyan

módosítható. Ugyanahhoz a tartalomhoz különbözı stílus definíciókat rendelhetünk,

így néhány apró változtatással egyik megjelenési módról egy másikra válthatunk.

Konfliktusok feloldása: lépcsızetesség

Egy dokumentumra egyszerre több stíluslapot is alkalmazhatunk, és ezeknek a

stíluslapoknak az érvényességi köre különbözı lehet. A különbözı érvényességi

körő stíluslapok hierarchiába rendezhetık, amely hierarchiában a nagyobb

prioritással rendelkezı stíluslapok lépcsızetesen felülbírálják a kisebb hierarchiával

rendelkezıket. Ez a lépcsızetesség elve (angolul cascade), innen származik a

stíluslapok Cascading Style Sheets elnevezése. A prioritás megállapításánál

ökölszabály, hogy minél specifikusabb egy stílus definíció, annál nagyobb a súlya.

A CSS elınyei

A Lépcsızetes Stíluslapok talán legfontosabb elınye, hogy a weblapok tartalma

szétválasztható a dokumentum formátumától, így újra megvalósítható az az eredeti

elképzelés, miszerint a HTML nyelvet a tartalom strukturálására kell használni. A


108

CSS másik nagy elınye, hogy a stíluslapok a tartalomtól függetlenül önállóan

tervezhetık, és más dokumentumokban újra felhasználhatóak. A CSS

szövegformázó utasításai segítségével olyan díszes feliratok készíthetık, amelyekre

eddig a HTML nem nyújtott lehetıséget. Ezeket a feliratokat a webfejlesztık

korábban grafikusan készítették el, és képként lehetett betölteni a dokumentumban.

Ez egyrészt lassította a weblapok betöltését, másrészt a keresı robotok a képként

betöltött szövegeket nem értelmezték, így ezekre keresni sem lehetett. Ugyancsak a

letöltés sebességét növeli, hogy a stíluslapokban megadott formázási szabályok csak

egyszer töltıdnek le a kliens gépére, a dokumentumban megadott formázási

utasítások már helyben kerülnek kiértékelésre.

A CSS segítségével könnyőszerrel biztosítható többoldalas webdokumentumok

egységes megjelenése, hiszen azt a külön szerkesztett stíluslapokban az összes

dokumentumra egyszerre definiáljuk. A CSS arra is lehetısét nyújt, hogy egy

weblapra alkalmazzunk az eszközfüggı megjelenést. Ez a legegyszerőbb módja

annak, ha a képernyın megjelenı sötét hátterő dokumentumot a nyomtatóra világos

hátérrel, esetleg kisebb betőkkel akarjuk küldeni. Nem kell mást tennünk, mint két

stíluslapot elkészítenünk, és az egyiket a képernyın történı megjelenítéskor

alkalmazni, a másikat pedig nyomtatáskor.

7.1 A stíluslapok szintjei

A stílusokat szabályozhatjuk a HTML tegek belsejébıl, a HTML dokumentum head

részébıl, és külsı fájlból. Ennek megfelelıen megkülönböztetünk belsı,

dokumentumszintő és külsı stíluslapot.

Ezek között a stíluslapok között a külsı a legáltalánosabb, hiszen több

dokumentumra is vonatkozhat, több weblap is használhatja. A dokumentum szintő

stíluslap már csak arra az adott dokumentumra vonatkozik, amelynek a fejlécébe

került, viszont ott – a megfelelı hivatkozások alkalmazásával - bármely tegre

vonatkozhat. A legspecifikusabb a belsı stíluslap, mert az csak arra a tegre

vonatkozik, ahol definiáljuk. Így a stíluslapok hierarchiájában a belsı stíluslapnak a

legnagyobb a prioritása, ezt követi a dokumentum szintő stíluslap, és végül a külsı

stíluslap zárja a sort. Ennek a rangsornak akkor van jelentısége, amikor egyszerre

több, különbözı szintő stíluslapot használunk ugyanarra a tegre vonatkozólag.

109

Ebben az esetben a specifikusabb (nagyobb prioritású) stíluslap felülbírálja a

magasabb szintő, általánosabb stílusdefiníciót. Most nézzük részletesen a különbözı

szintő stílusdefiníciókat.

7.1.1 Belsı stíluslapok

Belsı stíluslapot annak tegnek a belsejében kell definiálni, amelyre vonatkoztatni

szeretnénk. Megadása az adott teg style attribútuma segítségével történik az alábbi

módon:

style = ”tulajdonság1: érték1; tulajdonság2: érték2; …”

Ha például azt szeretnénk, hogy egy adott h2 teggel jelölt címsor 50-es betőmérettel

és pirosan jelenjen meg, azt kell írnunk, hogy

<h2 style="font-size:50; color:red;">Címsor 2</h2>

Az a tény, hogy egy belsı stíluslap mindig csak annak a tegnek a megjelenését

befolyásolja, amelyben definiáltuk, ellentmond a stíluslapok alapelvének, az

egységes stílus kialakításának. Használatukra mégis szükség lehet, ha a

lépcsızetesség elvét kihasználva valamilyen felsıbb (dokumentumszintő, vagy

külsı) stílusdefiníciót akarunk felülbírálni.

7.1.2 Dokumentumszintő stíluslapok

A dokumentumszintő stíluslap definícióját, amelyet a dokumentum törzsében

bármely tegre vonatkoztathatunk, a weblap <head> részében a <style> teg

tartalmaként kell megadni. Ehhez azonban a <style> teg type attribútumát "text/css"

értékre kell állítani. Mivel a <style> teg belsejében a stílusszabályok a CSS

szintaxisa szerint kell megadni, ezért ezek a kódok a HTML böngészık számára

nem érthetık. Hogy ebbıl ne származzon probléma, a stílusszabályokat a HTML

interpreter elıl megjegyzés jelöléssel () láthatatlanná kell tenni. Mint ahogy

azt korábban láttuk az XHTML nyelv a HTML-nél szigorúbb, ezért a stílusszabály

blokk kezdetét és végét a /*<![CDATA[*/ ill. /*]]>*/ kódokkal is meg kell jelölni.


/*<![CDATA[*/


110

/*]]>*/

</style>

7.1.3 Külsı stíluslapok

A stílusszabályokat külsı stíluslap esetén önálló, szövegformátumú (txt/css)

stílusfájlban kell megadni, amelynek kiterjesztése általában „.css”. A szabályok

formátuma megegyezik a dokumentumszintő stíluslapokban használt szabály lista

formátumával Külsı stíluslapon megadott szabályok minden olyan

webdokumentum törzsére vonatkozhatnak, amelyek hivatkozna az adott külsı

stíluslapra.

Külsı stíluslapra történı hivatkozás a weblap head részébıl a <link> teg

segítségével történik:

<head>

<title>document title</title>

<link rel="stylesheet" type="text/css" href="example.css">

</head>

7.2 Stíluslapok hierarchiája

A stíluslapok eddig említett három alapszintje (belsı, dokumentum szintő, külsı)

egyértelmő hierarchiába rendezhetı, minél specifikusabb egy stílusdefiníció, annál

nagyobb a prioritása. Így a külsı stíluslapban megfogalmazott valamely szabályt

felülírhatja egy ugyanarra a tulajdonságra vonatkozó dokumentumszintő definíció, de ez

is felülbírálható egy belsı stíluslappal. A stíluslapok további szintekre bonthatók, és

ezekre is alkalmazható a fenti szabály.

A stíluslapok legfelsıbb, legáltalánosabb, és ezáltal a legkisebb prioritással rendelkezı

szintje az a megjelenés, amit a böngészı alapbeállításai határoznak meg. Ez akkor lép

érvénybe, amikor semmilyen stílusbeállítást nem végzünk. Ezt a felhasználó a

böngészıben felülbírálhatja bizonyos beállításokkal, gondoljunk csak a leggyakrabban

alkalmazott szövegméret változtatásra. A stíluslapok következı szintje a külsı stíluslap,

amelyet a webprogramozó linkeléssel kapcsolhat össze a weboldallal. A linkelt


111

stíluslapnak kisebb a prioritása, mint az importáltnak. A dokumentumszintő és belsı

stíluslap alsóbb szintjeit és ezáltal nagyobb prioritását már tisztáztuk, de ezek súlya

tovább növelhetı az important jelöléssel, amelynek szintaxisa a következı:

!important

A stíluslapok hierarchiája röviden az alábbiak szerint foglalható össze:

1. böngészı alapbeállításai

2. a felhasználó stílusbeállításai

3. linkelt külsı stíluslap (<link>)

4. importált külsı stíluslap (@import)

5. dokumentumszintő stíluslap (style teg)

6. belsı stíluslap (style attribútum)

7. !important-nak jelölt stílusdefiníció

7.3 Stíluslap formátumok

Eddig sok szó esett a stíluslapok fajtáiról és hierarchiájáról, de még nem beszéltünk a

szabályoknak a formátumáról, amelyek segítségével a különbözı stílusokat

definiálhatjuk. A stíluslap formátuma alapvetıen kétféle lehet attól függıen, hogy 1.)

belsı illetve 2.) dokumentumszintő vagy külsı stíluslapot használunk-e. A

dokumentumszintő stíluslap, azaz a style teg belsejének formátuma szintaktikailag

megegyezik a külsı stíluslap formátumával.

7.3.1 Belsı stíluslap formátum

Belsı stíluslapok esetén a formázandó teg style attribútumában kell megadni a tegre

tulajdonságaira vonatkozó tulajdonság:érték párokat. A tulajdonság nevét a tulajdonság

értékétıl kettısponttal választjuk el (közte lehetnek még szóközök is), ha pedig több

tulajdonságot is szeretnénk szabályozni, akkor a tulajdonság:érték párokat egymástól

pontosvesszıvel választjuk el.

”tulajdonság1: érték1; tulajdonság2: érték2;” …

Ne felejtsük el, hogy belsı stíluslapban szereplı összes tulajdonság:érték párt a

formázandó teg style attribútumának értékként kell megadni, ezért az egész belsı


112

stíluslapot idézıjelek közé zárni, viszont éppen ezért – szemben az XHTML

hagyományokkal, és a külsı ill. dokumentumszintő stíluslapok elıírásaival - a belsı

stíluslapban szereplı egyes tulajdonság értékeket nem szabad idézıjelek közé tenni!

Lássunk erre egy példát:

7.3.2 Külsı és dokumentumszintő stíluslapok formátuma

A külsı és dokumentumszintő stíluslapok - pontosabban a dokumentumszintő stíluslap

<style> tegjének belsejében a(z) (X)HTML megjegyzésben lévı stílusutasítások -

formátuma megegyezik. Ezek stílusszabályok két részbıl állnak egy szelektorból és

egy deklarációból.

A szelektor a formázandó HTML elemet vagy elemcsoportot jelöl ki valamilyen

közvetett vagy közvetlen módon. Például ha a stílusszabállyal az összes h2 teg valamely

tulajdonságát vagy tulajdonságait szeretnénk megváltoztatni, akkor a szelektor

egyszerően h2.

A deklarációban határozzuk meg, hogy a szelektorban megadott tegnek vagy tegeknek

milyen legyen a formátuma. A deklarációnak két része van. ahogy a belsı

stíluslapoknál, itt is meg kell adni, hogy milyen tulajdonságot akarunk szabályozni, és

azt milyen értékre kell állítani.

A szelektor után a deklarációs részt kapcsos zárójelek közé kell tenni. A deklarációs

részben több tulajdonság:érték párt is megadhatunk, azokat egymástól pontosvesszıvel

elválasztva. Nem kötelezı, de a biztonság kedvéért már egyetlen tulajdonság:érték pár

után is érdemes kitenni a pontosvesszıt, vagy ha több párt adunk meg, akkor a

legutolsót is tanácsos pontosvesszıvel zárni, hogy bármikor bıvíthessük a deklarációs

listát, és az ezzel járó szintaktikai hiba lehetıségét minimalizáljuk. Az alábbi példa az

összes h2 teggel jelölt címsor betőszínét pirosra állítja:

<h2 style="font-size:50; color:red;">Címsor 2</h2>

tulajdonság érték tulajdonság érték


113

7.4 CSS szelektorok

A szelektorok megadásában nagyon sok lehetıség áll rendelkezésünkre, kezdve

valamely tegek vagy tegek, konkrét megadásától, az osztályok vagy azonosítók

használatán át, egészen az általános szelektor alkalmazásáig. A különbözı szelektor

megadási módszereket vesszük végig a következıkben.

7.4.1 Elem szelektor

Elem szelektort akkor használunk, ha egy teg típus (pl. <h2>, vagy <p>) tulajdonságát

akarjuk szabályozni. A szelektor megadása a teg nevének – a kisebb és nagyobb jelek

nélküli - feltüntetésével történik. Ezt követi a kapcsos zárójelek között megadott

deklaráció. Például

h2 {font-weight: bold; color: red;}

p {text-indent: 0.5in;}

7.4.2 Csoportosított szelektor

A csoportosított szelektor mindössze abban különbözik az elemszelektortól, hogy

egyszerre több teg típusnak a tulajdonságát szabályozhatjuk. A tegek neveit vesszıvel

elválasztva kell felsorolni. Ezt követi szokásos módon a kapcsos zárójelek között

megadott deklaráció. Például

h1, h2 {font-weight: bold; color: red;}

p, blockquote {text-indent: 0.5in;}

szelektor

h2 {color: red;}

tulajdonság érték

deklaráció


114

7.4.3 Származtatott szelektor

Ha nem figyelünk eléggé, és elfelejtünk a teg nevek közé vesszıt rakni, akkor a

csoportosított szelektorból könnyen származik ún. leszármaztatott szelektor. Ennek

megértéséhez a(z) (X)HTML dokumentumot, mint egy fa struktúrát kell elképzelnünk.

Az egymásba ágyazott (X)HTML utasítások a faszerkezet elágazásait képezik, a

legbelsıbb (X)HTML tegek pedig a fa levelei. Ha például a dokumentum törzsében egy

paragrafus és egy <h2> címsor elem mellett egy rendezetlen lista belsejében bizonyos

szavakat az <em> teg segítségével kiemelünk:

<body>

<p>Sima szövegben <em>kiemelt szó</em> és egy <em>másikkiemelt szó</em> </p>

<ul>

<li>nem kiemelt listaelem </li>

<li> elsı <em>kiemelt listaelem</em></li>

<li>második <em>kiemelt listaelem</em></li>

</ul>

<h2>címsor szöveg</h2>

</body>

akkor csak ezekre a kiemelt listaelemekre – de a más szinteken ugyancsak az <em> teg

segítségével kiemelt szavakra nem – definiálhatunk valamilyen speciális stílusutasítást.

Például: li em {color: red;}. Így csak a lista belsejében lévı kiemelt listaelemek színe

lesz piros.


115

Látható, hogy egyetlen vesszın múlik, hogy az összes <li> és <em> teg

tulajdonságát változtatjuk (ha a li és az em között van vesszı), vagy csak a listába

ágyazott kiemelt szövegek tulajdonságát (ha a li és az em között nincs vesszı).

7.4.4 Osztályszelektor

A CSS alkalmazásakor az osztályszelektorok használata a legelterjedtebb módszer

tulajdonságok definiálására, amikor nem adott teg típusok (pl. <h2>) tulajdonságait

változtatjuk meg, hanem minden olyan tegét, amely egy adott osztályhoz tartozik. Az

osztályba tartozást a dokumentum törzsében a tegek class attribútumának segítségével

adhatjuk meg. Az alábbi példában a <p> teg és a <h1> teg a „vastag” míg a <h2> teg a

„normál” osztályba fog tartozni:

<p class=”vastag”>

<h1 class=”vastag”>

<h2 class=”normal”>

A dokumentum fejében lévı <style> tegben vagy külsı stíluslapon megadott

stílusdefiníció szelektor részében a pont (.) karakter segítségével hivatkozhatunk az

elızıekhez hasonlóan megadott osztályokra. Az ílymódon képzett osztályszelektor,

amelyet generikus vagy globális osztályszelektornak nevezünk, vonatkozhat a class

attribútum álltál azonosított bármely tegre. Például ha azt szeretnénk, hogy minden


116

„normál” osztályba tartozó teg belsejében lévı szöveg fekete legyen, akkor a .normal

globális osztályszelektort, és a color: black deklarációt kell használnunk:

.normal {color: black;}.

Lehetıségünk van azonban az osztályszelektor érvényességét adott tegre leszőkíteni,

például ha azt szeretnénk, hogy a „vastag” osztályba tartozó <p> teg font-súlya legyen

bold, akkor teg típus nevét és az osztálynevét is meg kell adni a szelektorban egymástól

a pont karakterrel elválasztva (p.vastag) és ezt követi a kapcsos zárójelek közé zárt

deklaráció:

p.vastag {font-weight: bold;}

7.4.5 Pszeudo osztály szelektor

Az osztályszelektorokhoz igazából csak a nevében hasonlítanak a pszeudo osztály

szelektorok, amelyek segítségével bizonyos események bekövetkezéséhez vagy

speciális tulajdonságokhoz rendelhetünk stílusváltozást. A pszeudo osztály szelektorok

neve nem ponttal, hanem kettısponttal kezdıdik, és ezt követi az esemény vagy

tulajdonság neve, amelyek közül az alábbiak a leggyakoribbak:

:hover - amikor az egér az adott elem fölé kerül

:focus - amikor az adott elem fókuszt kap

:active - amikor az adott elem (pl. egy link) aktív

:link - még ki nem választott link

:visited - amikor egy linket már kiválasztották

A pszeudo osztályok segítségével bizonyos szelektorok (például az <a> elemszelektor)

viselkedéshez adhatunk speciális effektusokat:

117

Ebben a példában minden <a> teggel jelölt hiperhivatkozás színe alaphelyzetben fekete,

ha fölé húzzuk az egeret kék, és ha már meglátogattuk, akkor piros lesz.

7.4.6 ID szelektor

Az ID szelektor segítségével valamely egyedileg azonosított konkrét tegre

hivatkozhatunk, és szabályozhatjuk annak tulajdonságait. Az egyedi azonosítás a

dokumentum törzsében a teg id attribútumával történik, például:

<p id=”egyedi_1”>

A stíluslapon az ID szelektort a kettıs kereszt (#) karakterrel jelöljük, azt a szelektor

neve elé írjuk, például:

#egyedi_1 {color: red}

Ha még konkrétabbá akarjuk tenni teg kiválasztását, akkor az egyedi szelektort

összekapcsolhatjuk a teg típusával, egymástól a kettıs kereszt (#) karakterrel

elválasztva, például:

p#egyedi_1 {color: red}

Az esetek többségében erre a dupla hivatkozásra nincs szükség, hiszen ha szabályosan

használjuk az id attribútumot, akkor egy dokumentumon belül azt csak egy teghez

rendelhetjük hozzá, így az ID szelektor megadásával egyértelmően hivatkozunk arra az

egy konkrét tegre, amelyet egyedileg azonosítottunk az id attribútum segítségével. Ha

külsı stíluslapot alkalmazunk több dokumentumra, akkor elképzelhetı, hogy az egyes

dokumentumok valamely azonosítót szabályszerően csak egy konkrét tegre használnak,

viszont dokumentumonként más teg típusra (pl. az egyikben egy <p>-re, a másikban

egy <h1>-re, akkor ezzel a módszerrel választhatjuk ki, hogy az ID szelektor, melyik

tegre vonatkozzon. Más kérdés, hogy sokan az id attribútumot sokan nem használják


118

helyesen, és egy dokumentumon belül több teg is megkapja ugyanazt az azonosítót, így

ez esetben egy dokumentumon belül is van létjogosultsága teg név és ID szelektor

összekapcsolásának.

7.4.7 Általános szelektor

A szelektorok felsorolásának végén a teljesség kedvéért álljon egy viszonylag ritkán

használt szelektor, az ún. általános szelektor, amely a dokumentumon belül minden

tegre vonatkozik. Megadása a stíluslapon a csillag (*) karakter segítségével történik, ezt

követi a kapcsos zárójelek közé zárt stílusdeklaráció, például:

* {color: gray}

Értelemszerően az általános szelektort nincs értelme hozzákapcsolni teg típushoz,

hiszen az általános szelektor minden teget egyszerre szabályoz, így a csillag karakter a

szelektorban mindig önmagában áll.

7.4.8 Szelektorok hierarchiája

Ahogy a különbözı stíluslapok között prioritási sorrendet lehetett felállítani, úgy a

szelektorok is hierarchiába rendezhetık. A legáltalánosabb, és ezáltal a legkisebb a

prioritása az elemi és csoportosított szelektoroknak. A következı szint a származtatott

szelektorok szintje, amely nagyobb prioritással rendelkezik, mint az ugyanarra a tegre

vonatkozó elemi vagy csoportosított szelektor. Az osztály szelektor ennél specifikusabb,

ezért a prioritása is nagyobb. A sort a legnagyobb prioritású, legspecifikusabb ID

szelektor zárja. Sorrendben tehát

1. elemi és csoportosított szelektorok

2. származtatott szelektor

3. osztályszelektor

4. ID szelektor


119

7.5 CSS deklaráció

Az elızı nagy fejezet a CSS szelektorokkal foglalkozott, amelynek segítségével

kiválaszthatjuk, hogy a stílusszabály mely tegekre vonatkozzanak. Kevés szó esett

azonban eddig a stílusszabályok deklarációs részérıl, amely megmondja, hogy a

szelektor által kiválasztott tegek milyen tulajdonságokat vegyenek fel. A CSS

deklarációk segítségével közel 60 tulajdonságot szabályozhatunk, amelyek 6 fı

kategóriába sorolhatók.

7.5.1 Betőtulajdonságok

Talán mondani sem kell, hogy CSS-ben a betőtulajdonságok módosításának van a

legnagyobb szerepe, hiszen ez az a tulajdonság, ami a webdokumentumok

megjelenésében kiemelt szerepet kap. A betőtulajdonságok közül lehetıségünk van a

font típus (fontcsalád), méret, stílus (dıltbetős), súly (vastag betős), dekoráció

(aláhúzott, áthúzott, stb.) tulajdonságainak megváltoztatására. Most nézzük ezeket a

tulajdonságokat részletesebben.

7.5.1.1 Font család (font-family)

A font család meghatározásánál megadhatunk konkrét font típust (pl. Arial Black,

'Courier New', Times New Roman ), konkrét font családot (pl. arial, courier,

times),vagy általános font családot (pl. serif, sans-serif, monospace). Az alábbi ábra

néhány font családot és, konkrét font típust mutat be.


120

A fontoknak több nagy általános családját különböztetjük meg. A

legfontosabb kérdés, hogy a betők talpasak-e vagy sem, ugyanis a talpas

betőt nyomtatásban, míg a talp nélkülit a számítógép képernyıjén könnyebb

olvasni. Ezek szerint megkülönböztetünk Serif és Sans-serif általános

betőcsaládot. A Serif (magyarul talpas) betők bizonyos karaktereinek

végzıdésénél kicsi vonalak (talpak) láthatók. A „Sans” szó nélkülit jelent,

így a Sans-serif betőtípus a talp nélküli karaktereket jelöli (lásd a következı

ábrán).

konkrét típus általános font család


121

A monospace általános fontcsaládba tartozó betők mindegyike ugyanolyan

szélességő, pontosabban ugyanannyi helyet foglal el az ıt körülvevı térrel

együtt, függetlenül attól, hogy az egy W vagy egy i karakter. Általános

fontcsaládként megadhatjuk még a cursive vagy a fantasy típust is, ahol az

elıbbi kézírás szerő, míg az utóbb dekoratív fontokat eredményez.

A font család megadásánál általában nem egyetlen konkrét típust szoktunk

megadni, számítva arra, hogy a kliens gépe nem biztos, hogy rendelkezik az

általunk használni kívánt fonttal. A bevált megoldás, hogy elıször megadjuk

azt a konkrét fontot, amelyiket használni szeretnénk egy adott szöveg

megjelenítésére (pl. Courier Nev), majd megadunk még 1-2 ehhez hasonló

konkrét típust vagy fontcsaládot (pl. courier), végül azt az általános font

családot, amelybe az általunk elképzelt font tartozik (pl. monospace). A

böngészı elıször megpróbálja az elsıként megadott font típust alkalmazni,

ha ezt nem találja a kliens gépen telepítve, akkor próbálkozik a soron

következıvel és így tovább. Ha egyiket sem találja, akkor a sor végén lévı

általános font családokból biztos talál valamilyen típust a gépen, amelyikkel

meg tudja jeleníteni a szöveget. Az alábbi példa dokumentum törzsében lévı

összes fontot próbálja Courier New típusra állítani. Ha ez nem sikerül, akkor

valamilyen courier fontcsaládba tartozó betőtípust keres, és ha ilyen sincs a

kliens gépén, akkor a monospace általános font családba tartozó típust

választhat a böngészı.

body { font-family: ”Courier New”, courier, monospace; }

A példában arra hívnám fel a figyelmet, hogy ha olyan font típust

választunk, amelynek neve egynél több részbıl áll (pl. Courier New) akkor a

font nevet idézıjelek vagy aposztrófok közé kell tenni. Ha

dokumentumszintő, vagy külsı stíluslapon definiáljuk a fontot, akkor

használhatunk kettıs idézıjelet (”), de belsı stíluslap esetén aposztrófot (’)

kell használni. Ennek az az oka, hogy a belsı stíluslapoknál az egész style

attribútumot tesszük idézıjelek közé, és ekkor a font név elejére kitett

idézıjel a style attribútum értékmegadásának befejezését jelentené.


122

7.5.1.2 Font méret (font-size)

A font méret megadásánál a CSS-ben alapvetıen három lehetıség áll rendelkezésünkre.

A betők nagyságát megadhatjuk

� abszolút mértékegységgel, amely lehet

– pt - pont (1 pont = 1/72 inch)

– pc - pica (1 pica = 12 points)

– mm - milliméter

– cm - centiméter

– in - inch

� relatív mértékegységgel, amely lehet

– em - aktuális fontméret ”m” betőjének szélessége

– ex - aktuális fontméret "x" betőjének magassága

– px – az aktuális megjelenítı pixelszáma

– % - az aktuális fontméret százaléka

� kulcsszóval, amely lehet

– xx-small - nagyon-nagyon kicsi

– x-small - nagyon kicsi

– small - kicsi

– smaller - kisebb, mint az aktuális fontméret

– medium – alapértelmezett méret

– larger - nagyobb, mint az aktuális fontméret

– large - nagy

– x-large - nagyon-nagy

– xx-large - nagyon-nagyon nagy

Lássunk néhány példát a különbözı módszerekkel történı fontméretek megadására:

h1 { font-size: 20pt; }


123

h2 { font-size: 150%; }

h3 { font-size: x-large; }

A betőméret megadásánál számítanunk kell rá, hogy még az abszolút mértékegység

használatánál is a méret betőtípus függı. Ez még inkább igaz a relatív vagy kulcsszavas

megadásnál. Ez utóbbit jól illusztrálja az alábbi példa:

7.5.1.3 font stílus (font-style)

A CSS-ben a font stílus elnevezés egy kicsit félrevezetı, mert a font stílussal itt

mindössze azt szabályozhatjuk, hogy a bető dılt legyen-e. Megkülönböztetünk igazi

(italic) és imitált (oblique, magyarul ferde) dıltbetős írásmódot. Az igazi dılt betőket

megjelenítéséhez a böngészı az eredeti font dıltbetős fontkészletét használja, míg a

ferde betőknél a böngészı maga próbálja a betőket megdönteni. A legtöbb böngészı ez

utóbbit nem is támogatja, helyette egyszerően az italic fontot jeleníti meg. Az italic és

az oblique fontok közötti különbséget mutatja az alábbi példa:

p.ferde {font-style:oblique}

p.dolt {font-style:italic}

�


124

7.5.1.4 font súly (font-weight)

Igazából a font súly elnevezés is egy kicsit csalóka, mert ezzel nem a betők súlyát,

hanem csak a vastagságát szabályozhatjuk. Ráadásul a legtöbb böngészı igazából csak

a vastag és a normál bető között tud különbséget tenni.

A bető vastagságának megadása történhet

� kulcsszóval, amely lehet

– bold, bolder, normal, lighter

� és számmal, amely lehet

– 100 és 900 közötti számok 100 lépésközzel

Akár kulcsszóval, akár számmal adjuk meg a font vastagságát, a legtöbb böngészı

viszonylag következetlenül vagy vastag, vagy normál betősen jeleníti meg a szöveget,

böngészınként eltérı vastagsággal, és még a kettı közötti váltás számértéke (600 vagy

700) is különbözik. Ezt illusztrálja az alábbi ábra:

Például

.kover {font-weight:bold;}


125

7.5.1.5 Több fonttulajdonság megadása egyszerre

Eddig a különbözı fonttulajdonságokat külön szabályoztuk, ha ezeket a tulajdonságokat

egyszerre egy adott szelektorhoz akartuk volna hozzárendelni, akkor pontosvesszıvel

elválasztva kellett volna felsorolni a tulajdonság:érték párokat. Például:

h1 { font-family: ”Courier New”, courier, monospace;

font-size: 20pt;

font-style: italic;

font-weight: bold;

}

Van azonban ennél egy egyszerőbb megoldás, ahol nem kell a tulajdonságneveket

megadni, elég azok értékeit felsorolni. Erre a font tulajdonság nyújt lehetıséget,

amelynek értékeként legalább a font méretét és a font típusát meg kell adni. Ha a font

méretét és típusát (ebben a sorrendben!) megadtuk, akkor a fontméret elıtt a többi

tulajdonságot is megadhatjuk, és ezeket már tetszıleges sorrendben. Az egyes

tulajdonságértékeket a szóköz karakterrel kell elválasztani. Tehát a font tulajdonság

használatánál arra kell odafigyelni, hogy a sort mindig a font méret és a font típus zárja.

Például a fenti stílusokat az alábbi, egyszerőbb módon is megadhatjuk:

h1 { font: bold italic 20pt ”Courier New”, courier, monospace;}

7.5.1.6 Szöveg dekoráció (text-decoration)

A szöveg dekoráció elnevezés azt sugallja, hogy ezzel az eddigi fonttulajdonságokhoz

képest valamilyen különleges stílust állíthatunk be. Sajnos ki kell ábrándítani az olvasót,

a text dekorációval mindössze arról rendelkezhetünk, hogy a szelektor segítségével

kijelölt szöveg aláhúzott (underline), fölé húzott (overline), vagy áthúzott (line-through)

legyen-e. Ha valamilyen korább szöveg dekorációt meg szeretnénk szüntetni, akkor a

none értéket kell megadni.

.alahuz {text-decoration: underline;}

.folehuz {text-decoation: overline;}

.athuz {text-decoration: line-through;}

.nodekor {text-decoration: none;}


126

7.5.1.7 Font és szövegtulajdonságok alkalmazása

Az eddigi példákban a font és szövegtulajdonságokat elemszelektor segítségével

valamilyen konkrét teghez, vagy osztályszelektor segítségével tetszıleges teghez

rendeltünk. Vannak azonban olyan esetek, amikor olyan szövegrész stílusát szeretnénk

változtatni, amelyet nem jelöl külön szöveg-, vagy blokkszintő (X)HTML teg. Az ilyen

probléma megoldására használhatjuk a(z) (X)HTML <span> vagy <div> teget,

amelyekhez elem-, osztály-, vagy ID szelektor segítségével, de akár belsı stíluslappal is

stílusokat rendelhetünk.

A <span> teget akkor használjuk, ha egy sorban, vagy egy bekezdésen belül egy

kifejezést máshogy szeretnénk megjeleníteni, pl.:

<p>Egy mondatban <span style=”font-size: 24pt; color: red;”>kiemelt szavak</span>

lehetnek.</p>

� <div>

A <div> teg használatára akkor kerülhet sor, amikor több blokkszintő (pl. bekezdést, h1,

h2, stb.) magába foglaló nagyobb egységet szeretnénk egyszerre formázni

<div id=”egyedi_stilus”>

<p>Elsı bekezdés.</p>

<p>Második bekezdés.</p>

</div>


127

7.5.2 Listatulajdonságok

A listatulajdonságokkal azt szabályozhatjuk, hogy a listában szereplı elemek elıtt

milyen jelölı jelenjen meg. A jelölı lehet grafikus jel vagy kép is. A grafikus jelölı

megadását a list-style-type tulajdonság megadásával szabályozhatjuk. Ez rendezetlen

<u> lista esetén lehet korong (disc), kör (circle), vagy négyzet (square). Rendezett <o>

lista esetén a sorrendet jelölhetjük decimális számokkal (decimal), nagybetőkkel (upper-

alpha), kisbetőkkel (lower-alpha), nagy és kis római számokkal (upper-roman ill. lower

roman). Például

ul.korong {list-style-type:disc;}

ol.kisromai {list-style-type:lower-roman;}

Ha képet akarunk a listaelemek elıtt elhelyezni, akkor ezt a list-style-image tulajdonság

segítségével tehetjük meg, ahol a tulajdonságérték az az URL, ahol a kép található.

Természetesen az URL lehet, egy relatív hivatkozás az aktuális könyvtárban lévı

képfájlra. Például:

li.kep {list-style-image: url(image.gif);}

7.5.3 Szöveg igazítása

A CSS által nyújtott szövegigazítási lehetıségek között sok olyat találhatunk, amelyek

az ismert szövegszerkesztıkben használt módszerekhez hasonlóan kényelmessé teszik a

bekezdések formázását. Ilyen lehetıség például a bekezdések elsı sorának beljebb

kezdése (text-indent), a szövegek vízszintes igazítása (text-align), a sormagasság (line-

height) állítása, a képek szöveggel történı körülfolyatásának (float) szabályozása,

HTML elemek körüli margók meghatározása, a bető- és szóközök beállítása. Most

nézzük ezeket a lehetıségeket kicsit részletesebben.

7.5.3.1 Bekezdések elsı sora (text-indent)

Bekezdések elsı sorát beállíthatjuk





128



– in - inch




– % - az aktuális sorhosszának adott százaléka

–

Példaként tekintsük az alábbi ábrát.

7.5.3.2 Szöveg vízszintes igazítása (text-align)

A szövegigazításnál a szövegszerkesztıkbıl jól ismert left (balra), right (jobbra),

középre (center), sorkizárt (justify) értékeket adhatjuk értékül a text-align

tulajdonságnak

Példa:

7.5.3.3 Sormagasság (line-height)

A sormagassággal a sorok alapvonala közötti távolságot állíthatjuk be. A line-height

tulajdonságnak a következı értékeket adhatjuk:


129

� egész vagy tört szám, amely a sorok számának többszörösét jelöli (pl. 1, 1.5, 2)


o pt - pont (1 pont = 1/72 inch)

o pc - pica (1 pica = 12 points)

o mm - milliméter

o cm - centiméter

o in - inch


o em - aktuális fontméret ”m” betőjének szélessége

o px – az aktuális megjelenítı pixelszáma

o % - az aktuális sormagasság százaléka

Például:

p.dupla { line-height: 2; }

p.2m { line-height: 2em; }

p.ketszeres { line-height: 200%; }

7.5.3.4 Képek körülfolyatása (float)

A float tulajdonsággal azt határozhatom meg, hogy egy kép vagy szöveg hogyan

helyezkedjen el egy másik elemhez képest.

Lehetséges értékek: left (balra), right (jobbra). Ha az érvényben lévı stílusbeállítást meg

akarjuk szüntetni, akkor float tulajdonságnak a none értéket kell adni.

pl. <img src="c210.jpg"style = "float: right" />


130

7.5.3.5 Margók

Margók segítségével tetszıleges HTML elem körüli távolságokat határozhatunk meg. A

margókat az elem körül négy irányban adhatjuk meg, mindegyikhez tartozik egy önálló

tulajdonság név:

o margin-left (bal margó)

o margin-right (jobb margó)

o margin-top (felsı margó)

o margin-bottom (alsó margó)

A margók tulajdonságértékeit a már ismert abszolút vagy relatív távolság megadhatjuk:






– in - inch



131


– ex - aktuális fontméret "x" betőjének magassága


– % - az aktuális fontméret százaléka

Például:

<img src=„…” alt=„…” style=„float: right; margin-left: 0.35in; margin-

bottom: 0.35in” />

7.5.3.6 Betőköz és szóköz

A betők közötti távolságot a letter-spacing, a szavak közötti tulajdonságot a

word-spacing tulajdonság határozza meg, amelynek értékeit a szokásos abszolút, vagy

relatív távolság mértékegységekkel adhatjuk meg. Ezeket a beállításokat illusztrálja az

alábbi példa:

� p { letter-spacing: 8px; }

� p { word-spacing: 1.5em; }

7.5.4 Színek

CSS-sel szabályozhatjuk a HTML elemek elıtér és háttérszínét. A beállítás vonatkozhat

akár az egész dokumentumra (ha a <body> teghez rendeljük), de akár egy táblázat

egyetlen cellájára is (ha a <td> elemhez rendeljük). Az elıteret (általában a betőszínt) a

color, a hátteret background-color tulajdonságok segítségével állíthatjuk be.

A színértékek megadása megegyezik a(z) (X)HTML-ben megismert módszerrel, azaz a

színeket megadhatjuk:


132

� névvel, pl. red, green, blue,

� hatjegyő hexadecimális számmal, pl. #FF0000, #00FF00, #0000FF

� rgb formátumban, pl. rgb(255, 0, 0)

A Szinek megadására a legelterjedtebb a hexadecimális formátum, amit úgy kell

értelmezni, hogy az elsı két számjegy a piros, a második kettı a zöld, a harmadik két

számjegy pedig a kék szín mennyiségét adja meg hexadecimális értékben. Ha nem

szeretjük a hexadecimális számokat, akkor használhatjuk az rgb(piros,zöld,kék)

formátumot is, ahol a piros, zöld, és kék paraméterek 0 és 255 közötti értéket vehetnek

fel, reprezentálva az adott színbıl használandó mennyiséget

A színek nem eléggé körültekintı használata a webprogramozásban sok problémát

okoz. Ennek alapvetı oka az, hogy nem csak a böngészık, de a monitorok is eltérı

módon jeleníthetik meg a színeket, így egy jól megtervezettnek vélt színkombináció

egyes platformokon meglepı megjelenést eredményezhet.

Ennek elkerülésére érdemes ún. biztonságos színkészletekbıl dolgozni, amely elemei

minden monitoron és minden böngészıben garantáltan ugyanúgy jelennek meg. A

legbiztosabb az a 16 elemő garantált színkészlet, amelynek színei az alapszínek (piros,

zöld, kék) meghatározott mennyiségeibıl vannak kikeverve. Ez a 16 elemő színkészlet

látható az alábbi ábrán, a színek hexadecimális kódjával és angol megnevezésével. A

színek – csakúgy, mint (X)HTML-ben – angol nevükkel is megadhatók.

Ugyancsak biztonságosnak tekinthetı az a 216 elemő paletta, ahol a színkomponensek

hexadecimális kódjai a 00, 33, 66, 99, CC és FF értékeket vehetik fel. Ez a 216 elemő

biztonságos színkészlet látható az alábbi ábrán.


133

Természetesen a piros, zöld, és kék komponensekbıl bármilyen tetszıleges

mennyiségeket is hozzáadhatunk egy adott szín eléréséhez, és ezzel több mint 16

millió színt keverhetünk ki, ám ezek többségének a megjelenése nem garantált,

az egyes böngészıkben illetve monitorokon különbözıen nézhetnek ki.

7.5.5 Hátterek

CSS-ben a background_image tulajdonság segítségével háttérképek megadására is van

lehetıségünk. A tulajdonság értéke egy url( ), amelyben természetesen relatív

hivatkozással az aktuális könyvtárban közvetlenül egy fájlnevet is megadhatunk.

A háttérkép ismétlıdését a background-repeat tulajdonsággal szabályozhatjuk,

amelynek értéke lehet:

o repeat (ismétlıdés)

o no-repeat (nincs ismétlıdés)

o repeat-x (vízszintes ismétlıdés)

o repeat-y (függıleges ismétlıdés)

A kép pozícióját a background-position tulajdonsággal állíthatjuk be, amelynek értéke

lehet

o top (fent)

o center (középen)


134

o bottom (lent)

o left (balra)

o right (jobbra)

Például

body {

background-image: url(stars.gif);

background-repeat: repeat-x

}

7.5.6 Keretek

A CSS-ben az elemek köré történı keretrajzolási lehetıséget boksz (magyarul doboz)

modellnek szokták nevezni, amelynek lényege, hogy gyakorlatilag bármely elem köré

dobozszerő keretet rajzolhatunk.

Az elem köré rajzolható keretnek a border-style tulajdonságban adhatjuk meg a stílusát,

amely a következı értékeket veheti fel:

o none (nincs keretvonal),

o dotted (pontozott vonal),

o dashed (szaggatott vonal),

o double (dupla vonal)

A keret minden oldalának vastagságát egyszerre a border-width (keret szélesség)

tulajdonsággal szabályozhatjuk, de a keretvastagságra vonatkozó értékeket megadhatjuk

külön-külön is:

o border-top-width (felsı keret szélesség),

o border-bottom-width (alsó keret szélesség),

o border-left-width (bal oldali keret szélesség),

o border-right-width (jobb oldali keret szélesség).

A keretvonalak értékét megadhatjuk a:

o thin (vékony),

o medium (közepes),

135

o thick (vastag) kulcsszóval, vagy

o pixel méretben

A keret minden oldalának színét egyszerre a border-color (keret szín) tulajdonsággal

szabályozhatjuk, de a keretszínre vonatkozó értékeket megadhatjuk külön-külön is:

o border-top-color (felsı keret szín),

o border-bottom-color (alsó keret szín),

o border-left-color (bal oldali keret szín),

o border-right-color (jobb oldali keret szín).

Például




</style>


136


Honnan származik a Cascading Style Sheets elnevezés, és mit jelent ez a gyakorlatban?

Milyen három alapvetı stíluslapot különböztetünk meg?

Mikor használunk belsı stíluslapot?


137

8 Irodalomjegyzék, referencia táblázatok, szabványok

Az alábbiakban hivatkozunk néhány olyan táblázatra, ajánlásra, amelyet a

webprogramozás, a webes alkalmazások elkészítése során jól lehet használni

referenciaként. Ezek mindegyike az Interneten megtalálható, mi több, onnét győjtöttük

össze a címeket is. Fontos megjegyezni, hogy a többé-kevésbé hivatalos lelıhelyek

tartalmazzák mindig az aktuális változatokat, ezért amennyiben kritikus alkalmazásuk,

mindig az eredeti táblázatokat használják és az itt közreadottakra csak, mint gyors,

tájékoztató információ támaszkodjanak.

Felhasznált irodalom:

Neil Bradley: Az XML kézikönyv. Új, átdolgozott kiadás. Szak kiadó

Angster Erzsébet: Objektumorientált tervezés és programozás. 1. kötet. 4Kör Bt.

Virginia DeBolt: HTML és CSS webszerkesztés stílusosan. Kiskapu kiadó

Michael Moncur: Tanuljuk meg a JavaScript használatát. Kiskapu kiadó

http://www.w3schools.com

http://www.w3c.org

http://developer.mozilla.org/en/docs/JavaScript

http://www.apache.org/

http://www.mozilla.com/en-US/firefox/

http://weblabor.hu/

referencia táblázatok:

HTML DOM referencia: http://www.w3schools.com/htmldom/dom_reference.asp

JS objektum referencia: http://www.w3schools.com/jsref/default.asp

CSS2 referencia: http://www.w3schools.com/css/css_reference.asp


138

core JavaScript referencia:

http://developer.mozilla.org/en/docs/Core_JavaScript_1.5_Reference

DOM referencia: http://developer.mozilla.org/en/docs/Gecko_DOM_Reference

A webprogramozás alapjai

Documents

Transcript of A webprogramozás alapjai