A webprogramozás alapjai

Átírás

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 1

2 Tartalomjegyzék: 1 Bevezetés A tantárgy célkitőzése Követelmények Az Internet és a web kialakulása, története Nyílt forráskódú szoftverek, szabad szoftverek A World Wide Web Konzorcium (W3C) W3C javaslatok Ellenırzı kérdések/feladatok Web szerverek mőködése, a szerver oldal Virtual hosting Az Apache projekt Erıforrások azonosítása, URL, URI Szerver oldali programnyelvek Ellenırzı kérdések Kommunikáció a kliens és a szerver között Az OSI modell és rétegei Az OSI modell megvalósulása TCP/IP esetén TCP/IP HTTP Ellenırzı kérdések Web alkalmazások tervezése, megvalósítása Honlapok, webhelyek, portálok Dizájn és áttekinthetıség Navigálás Ellenırzı kérdések Leíró nyelvek HTML XHTML XML Ellenırzı kérdések A JavaScript nyelv alapjai A nyelv szerepe JavaScript a weboldalon Dokumentáció Nyelvi elemek Őrlapok és JavaScript Ellenırzı kérdések Stílusok, stíluslapok A stíluslapok szintjei Stíluslapok hierarchiája Stíluslap formátumok CSS szelektorok CSS deklaráció Ellenırzı kérdések Irodalomjegyzék, referencia táblázatok, szabványok

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. 3

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ásimegé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. 4

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: 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. 5

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. 6

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 7

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. 8

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 weborientá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 oldalon. 9

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? 10

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. 11

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. 12

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 szerver 3, 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 ( 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. 13

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: 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. 14

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 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-azegyben 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 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 15

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: A szabályos teljes URI/URL tehát a következı elemekbıl épül fel: protokoll: protokoll + domén név: protokoll + domén név + portszám: protokoll + domén név + portszám + elérési út: protokoll + domén név + portszám + elérési út + lekérdezési karaktersorozat: 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: 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 Azonosítás, üzenetfogadás Az URL - Uniform Resource Locator 4 - vagy az újabban használt URI - Uniform Resource Identifier 5 - tökéletesen egyedi mutatót biztosít a teljes Interneten egy

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 IP címmel rendelkezı

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 darab, azaz kereken 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 egyegy 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. 18

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 19

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 egyké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 20

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 21

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 22

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. 23

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. 24

25 IMAP (Internet Message Access Protocol) protokollt alkalmazunk az ü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ő 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 - postafiók tulajdonosokról - és az 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 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.1 6, 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: 25

26 elıbukkanó HTTP/ 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: 26

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 :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 IP cím és a alhálózati maszk együtt egy olyan számítógépet határoz meg, amely a 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 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 27

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 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 28

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óloldalra 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 29

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 30

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 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 é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 31

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 32

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. 33

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 HTMLelemnek 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! 34

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 35

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 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" " <html> <head> <title>xhtml kódolás</title> <meta http-equiv="content-type" content="text/html; charset=iso "> </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 36

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 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. 37

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) 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élda 10, 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 " /> <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. 38

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 39

40 Oo kráterének belsejét bemutató 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! 40

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 { 41

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 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 42

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 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> 43

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. 44

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 45

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 " /> </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"); } } 46

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 47

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. 48

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 oldalt 12. 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). 49

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 " /> 50

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. 51

52  és  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 " /> <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 /> 52

53 tapasztalati képlete: CaCO₃</p> <p>a 10 hatványai: <br /> 10² = 100<br /> 10³ = 1000<br /> 10⁴ = 10000<br /> 10⁵ = <br /> 10⁶ = <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> 53

54 <title>small - big - strong</title> <meta http-equiv="content-type" content="text/html; charset=iso " /> <!-- 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> 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="" /> 54

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 gif 13, 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ó. 55

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 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. 56

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. 57

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ı 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> 58

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> 59

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. 60

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 meg 14. 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 61

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> 62

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> 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ı: 63

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 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 64

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 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 oldalt 15. <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" " <html> <head> <title>keretrendszerek</title> <meta http-equiv="content-type" content="text/html; charset=iso "> </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. 65

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 inline 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. 66

67 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 elmentve 16 : <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 kilobájt mérető fájlt hoz létre tessék kipróbálni és megtekinteni az így elıállított forrást! 67

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) 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. 68

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 69

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. 70

71 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ı 71

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 ">". 72

73 Dedikált HTML/XHTML szerkesztıprogramok Ha a böngészınkben meghívjuk a 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 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 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. 73

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 ) 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 74

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 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 "> </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> 75

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=" 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 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 76

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ás 17 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. 77

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. küldés őrlappal Ebben az attribútumban hivatkozhatunk a mailto protokollra is egy 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 küldésre használt őrlapra felvett adatokat szabályos üzenetként akarjuk elküldeni, nem mindegy, hogy milyen nevet adunk az egyes beviteli mezıknek! Az ü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ı 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ó. 78

79 <!doctype html public "-//W3C//DTD HTML 4.01//EN"> <html> <head> <title> form </title> </head> <body> <form 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=" 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 küldı ablak: 79

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" /> 80

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ában 19. <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. 81

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. 82

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. 83

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=" <pc:darabszam>2</pc:darabszam> <pc:beszerzes>2005</pc:beszerzes> <pc:ertek penznem="huf">200000</pc:ertek> </pc:komputer> </helyiseg> </szint> </epulet> 84

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" " <module name="org.netbeans.modules.html.editor"> <param name="autoload">false</param> <param name="eager">false</param> 85

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 86

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. 87

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. 88

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" " <html> <head> <title>javascript az oldalon</title> <script type="text/javascript"> 89

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 90

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 91

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 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 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 92

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 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" " <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> 93

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 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. 94

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ı: 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 95

96 A cél az, hogy az észlelt eseményhez 21 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=" " onchange=" ellenorzes()" /> Ebben az esetben a célszerően a head elemben deklarált ellenorzes() függvény hívódik meg, amely lehet egyszerő figyelmeztetés is, de az 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: 96

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. 97

98 <html> <head> <title>digitális óra</title> <meta http-equiv="content-type" content="text/html; charset=iso "> <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() 98

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 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 belül. egy meghatározott sztring értékre kereshetünk rá a tárolt sztringen 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 99

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. 100

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; 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 URIjeit 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. 101

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 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> 102

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 "> <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; } 103

104 function jo ( ) { if (( .lastindexof('@') == -1) ( .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> cím</td> 104

105 <td> <input type="text" name=" " size="30" maxlength="30" onblur="if (!jo (this.value)) {alert('nem jó az 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 105

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 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 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 106

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 107

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. 108

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 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 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 --> 109

110 /*]]>*/ </style> 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 110

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 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ı 111

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: tulajdonság érték tulajdonság érték <h2 style="font-size:50; color:red;">címsor 2</h2> 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: 112

113 szelektor deklaráció h2 {color: red;} tulajdonság érték 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 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;} 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;} 113

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. 114

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ı) 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 115

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;} 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: 116

117 <style type="text/css"> <!-- a:link { color:black;} a:hover {color: blue; } a:visited {color: red} --> 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 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 117

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 Á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 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 118

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 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 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. 119

120 általános font család konkrét típus 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). 120

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é. 121

122 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; } 122

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: 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} 123

124 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;} 124

125 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;} 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;} 125

126 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> 126