View
99
Download
1
Category
Preview:
DESCRIPTION
tankönyv, oktatás, programozás
Citation preview
A webprogramozás alapjai
1
A webprogramozás alapjai
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
A webprogramozás alapjai
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
A webprogramozás alapjai
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.
A webprogramozás alapjai
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.
A webprogramozás alapjai
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.
A webprogramozás alapjai
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.
A webprogramozás alapjai
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
A webprogramozás alapjai
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.
A webprogramozás alapjai
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.
A webprogramozás alapjai
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?
A webprogramozás alapjai
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.
A webprogramozás alapjai
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.
A webprogramozás alapjai
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.
A webprogramozás alapjai
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.
A webprogramozás alapjai
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
A webprogramozás alapjai
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
A webprogramozás alapjai
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
A webprogramozás alapjai
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.
A webprogramozás alapjai
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
A webprogramozás alapjai
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
A webprogramozás alapjai
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
A webprogramozás alapjai
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
A webprogramozás alapjai
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.
A webprogramozás alapjai
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.
A webprogramozás alapjai
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
A webprogramozás alapjai
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
A webprogramozás alapjai
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.
3.5 Ellenırzı kérdések
A webprogramozás alapjai
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
A webprogramozás alapjai
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
A webprogramozás alapjai
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.
4.4 Ellenırzı kérdések
A webprogramozás alapjai
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
A webprogramozás alapjai
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
A webprogramozás alapjai
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.
A webprogramozás alapjai
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!
A webprogramozás alapjai
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
A webprogramozás alapjai
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
A webprogramozás alapjai
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.
A webprogramozás alapjai
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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-
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" />
<!--ez a szerkesztés alatt álló weboldalunk -->
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.
A webprogramozás alapjai
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
A webprogramozás alapjai
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!
A webprogramozás alapjai
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 {
A webprogramozás alapjai
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!
<!-- Ez a szerkesztés alatt álló weboldalunk -->
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
A webprogramozás alapjai
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>
A webprogramozás alapjai
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.
A webprogramozás alapjai
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
A webprogramozás alapjai
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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-
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");
}
}
A webprogramozás alapjai
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
A webprogramozás alapjai
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.
A webprogramozás alapjai
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).
A webprogramozás alapjai
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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-
8859-2" />
A webprogramozás alapjai
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.
A webprogramozás alapjai
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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-
8859-2" />
<style type="text/css">
<!--
body { font-family: Arial, Helvetica, sans-serif; font-size:
10pt}
-->
</style>
</head>
<body bgcolor="#FFFFFF" >
<p>A mészkı (kémiai nevén kalcium-karbonát)<br />
A webprogramozás alapjai
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>
A webprogramozás alapjai
54
<title>small - big - strong</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-
8859-2" />
<!-- stíluslap kezdete, adott stílus alkalmazása XHTML elemre -->
<style type="text/css">
body { font-family: Arial, Helvetica, sans-serif; font-size:
12pt}
</style>
<!-- stíluslap vége -->
</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="" />
A webprogramozás alapjai
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ó.
A webprogramozás alapjai
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.
A webprogramozás alapjai
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.
A webprogramozás alapjai
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>
A webprogramozás alapjai
59
<td>jobbszélsı cella</td>
</tr>
<tr>
<td>balszélsı cella</td>
<td>középsı cella</td>
<td>jobbszélsı cella</td>
</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>
A webprogramozás alapjai
60
<td>balszélsı cella</td>
<td>középsı cella</td>
<td>jobbszélsı cella</td>
</tr>
<tr>
<td>balszélsı cella</td>
<td>középsı cella</td>
<td>jobbszélsı cella</td>
</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.
A webprogramozás alapjai
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 ☺):
<body bgcolor="white">
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…
A webprogramozás alapjai
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:
<body bgcolor="white">
Mi kell ahhoz, hogy valaki jó webmester legyen?
<ul>
<li>Fantázia</li>
<li>Szorgalom</li>
<li>Az internet ismerete</li>
<li>Készség a tanulásra</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>
A webprogramozás alapjai
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:
<body bgcolor="white">
Mi kell ahhoz, hogy valaki jó webmester legyen?
<ol>
<li>Fantázia</li>
<li>Szorgalom</li>
<li>Az internet ismerete</li>
<li>Készség a tanulásra</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ı:
A webprogramozás alapjai
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
A webprogramozás alapjai
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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-
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.
A webprogramozás alapjai
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.
A webprogramozás alapjai
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!
A webprogramozás alapjai
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.
A webprogramozás alapjai
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
A webprogramozás alapjai
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.
A webprogramozás alapjai
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ı
A webprogramozás alapjai
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 ">".
A webprogramozás alapjai
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.
A webprogramozás alapjai
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
A webprogramozás alapjai
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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-
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>
A webprogramozás alapjai
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
A webprogramozás alapjai
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.
A webprogramozás alapjai
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ó.
A webprogramozás alapjai
79
<!doctype html public "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>
E-mail form
</title>
</head>
<body>
<form action="mailto:akarki@akarhol.hu" 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:
A webprogramozás alapjai
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" />
A webprogramozás alapjai
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.
A webprogramozás alapjai
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.
A webprogramozás alapjai
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.
A webprogramozás alapjai
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">
<darabszam>2</darabszam>
<beszerzes>2003</beszerzes>
<ertek penznem="HUF">6000</ertek>
</butor>
<butor tipus="ajtós szekrény" szin="bükk">
<darabszam>1</darabszam>
<beszerzes>2000</beszerzes>
<ertek penznem="HUF">18000</ertek>
</butor>
</helyiseg>
<helyiseg ajtoszam="21">
<butor tipus="íróasztal" szin="bükk">
<darabszam>2</darabszam>
<beszerzes>2002</beszerzes>
<ertek penznem="HUF">12000</ertek>
</butor>
<butor tipus="falipolc" szin="fekete">
<darabszam>2</darabszam>
<beszerzes>2003</beszerzes>
<ertek penznem="HUF">6000</ertek>
</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>
A webprogramozás alapjai
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>
<!--JBuilder Library Definition File-->
<fullname>Xerces</fullname>
<class>
<path>[xercesImpl.jar]</path>
<!-- az alábbi sort a szerzı adta hozzá, mert a könyvtár
részeként akarta használni a JBuilder-ben a xerces.jar fájlt -->
<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>
A webprogramozás alapjai
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>
5.4 Ellenırzı kérdések
A webprogramozás alapjai
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.
A webprogramozás alapjai
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.
A webprogramozás alapjai
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">
A webprogramozás alapjai
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:
<script type="text/javascript">
var uzenet = "Aktuális üzenet";
function tajekoztatas(uzenet) {
document.write(uzenet);
}
</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
A webprogramozás alapjai
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>
<title>JavaScript az oldalon</title>
<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";
function tajekoztatas(uzenet) {
document.write(uzenet);
}
// 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
A webprogramozás alapjai
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
A webprogramozás alapjai
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>
<title>JavaScript az oldalon</title>
</head>
<body>
<script type="text/javascript">
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>
A webprogramozás alapjai
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.
A webprogramozás alapjai
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
A webprogramozás alapjai
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
A webprogramozás alapjai
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.
A webprogramozás alapjai
98
<html>
<head>
<title>Digitális óra</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-
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()
A webprogramozás alapjai
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
A webprogramozás alapjai
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.
A webprogramozás alapjai
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.
A webprogramozás alapjai
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>
A webprogramozás alapjai
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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-
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;
}
A webprogramozás alapjai
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>
A webprogramozás alapjai
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.
6.6 Ellenırzı kérdések
A webprogramozás alapjai
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
A webprogramozás alapjai
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
A webprogramozás alapjai
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.
A webprogramozás alapjai
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.
<style type="text/css">
/*<![CDATA[*/
<!--
stílusszabályok
-->
A webprogramozás alapjai
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
A webprogramozás alapjai
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ı
A webprogramozás alapjai
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
A webprogramozás alapjai
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ó
A webprogramozás alapjai
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.
A webprogramozás alapjai
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
A webprogramozás alapjai
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:
A webprogramozás alapjai
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
<style type="text/css">
<!--
a:link { color:black;}
a:hover {color: blue; }
a:visited {color: red}
-->
A webprogramozás alapjai
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
A webprogramozás alapjai
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.
A webprogramozás alapjai
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
A webprogramozás alapjai
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é.
A webprogramozás alapjai
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; }
A webprogramozás alapjai
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}
�
A webprogramozás alapjai
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;}
A webprogramozás alapjai
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;}
A webprogramozás alapjai
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>
A webprogramozás alapjai
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
� abszolút mértékegységgel, amely lehet
– pt - pont (1 pont = 1/72 inch)
– pc - pica (1 pica = 12 points)
A webprogramozás alapjai
128
– 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
– px – az aktuális megjelenítı pixelszáma
– % - 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:
A webprogramozás alapjai
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)
� abszolút mértékegységgel, amely lehet
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
� relatív mértékegységgel, amely lehet
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" />
A webprogramozás alapjai
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:
� 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
A webprogramozás alapjai
131
– 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
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:
A webprogramozás alapjai
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.
A webprogramozás alapjai
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)
A webprogramozás alapjai
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),
A webprogramozás alapjai
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 type="text/css">
<!--
p {
border-top-style: solid;
border-right-style: dotted;
border-bottom-style: dashed;
border-left-style: double;
border-top-width: thin;
border-right-width: mediumpx;
border-bottom-width: thickpx;
border-left-width: 5px;
border-top: #FF0000;
border-right: #66CC00;
border-bottom: #0000FF;
border-left: #000000;
}
-->
</style>
A webprogramozás alapjai
136
7.6 Ellenırzı kérdések
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?
A webprogramozás alapjai
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
A webprogramozás alapjai
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
Recommended