Forrás:

Átírás

1 Főiskolai jegyzet Dr. Medzihradszky Dénes Figyelem! A jegyzet nyers verzióját tartja kezében, amely még számos hibát tartalmazhat és további szerkesztést igényel! A frissített változatok az ILIAS-ban lesznek elérhetők, de az eredményes vizsgázáshoz ennek ismerete elegendő 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 Recommendations Ellenőrző kérdések/feladatok Leíró nyelvek HTML XHTML XML Ellenőrző kérdések Webszerverek működése, a szerver oldal 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 TCP/IP HTTP Ellenőrző kérdések Webalkalmazások tervezése, megvalósítása Dizájn és áttekinthetőség Navigálás CSS...Hiba! A könyvjelző nem létezik Ellenőrző kérdések Programozás JavaScript nyelven A nyelv szerepe JavaScript a weboldalon Dokumentáció Nyelvi elemek Űrlapok és JavaScript Menük...Hiba! A könyvjelző nem létezik Ellenőrző kérdések Összefoglalás...Hiba! A könyvjelző nem létezik. 8. 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ás tervezé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 webszerverek működésétől kezdve a webes technológiák során használatos leírónyelvek ismeretére és a szerver, valamint kliens oldali programnyelvek megismerésére is, ez utóbbi elemek közül csak egy kerül készség szintű elsajátításra, a többi esetében megelégszünk azok ismeretével, a tervezés során elengedhetetlen átfogó ismeretek elsajátítására. Az alkalmazás tervezé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 dokumentum kezelési alapok és készségek. A tantárgy során programozási feladatok megoldására kerül sor, ezért nélkülözhetetlen a C-típusú programnyelvekben (Java, C, C++, PHP) szerzett programozási jártasság, az objektum fogalmának ismerete és az objektumok kezelése, alkalmazása. Sok esetben hivatkozunk az Interneten fellelhető részletes dokumentációkra, forrásokra, például a leírónyelvek, a webes technológiák szabványaira, az ezekkel kapcsolatos ajánlásokra. A hivatkozott weboldalakon való tájékozódáshoz elengedhetetlenül szükséges az angol nyelv minimum olvasási-megértési szintű ismerete. weboldalakon találhatók meg. Ismertnek tételezzük fel a Programozási alapok tantárgyat, az ismétlések elkerülésére gyakran történik hivatkozás a tantárgy tankönyvében fellelhető ismeretekre 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 IPcí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 Transport 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 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 webszerverek, így végül nem csoda, hogy az olyan alapvető eszközök, mint például az Apache webszerver 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. 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ú 6

7 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 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 webszerverek 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 számára, akik különböző fizikai korlátokkal rendelkeznek, mint például csökkent látóképesség

8 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 Recommendations A W3C által végzett legfontosabb munka a web specifikációk (úgynevezett 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. Így végül amíg a W3C publikál egy új web standardot (javaslatot) látható, hogy a specifikáció az egyszerű ötlettől kiindulva egy nagyon alapos kidolgozáson és jóváhagyáson ment keresztül. A kidolgozók többnyire azok a szoftverfejlesztők és web-orientált cé- 8

9 gek, egyetemek, kutatóintézetek, amelyek számára létkérdés az új web standard 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 címke 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 diagrammok: 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. Ellenőrizzük le a munkánkat. Használjunk ellenőrző eszközöket, kérdőíveket és a részletes útmutatókat. 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 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. 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 így 11

12 á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 címke 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 kompatíbilis 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 lényegében újraformálja a HTML nyelvet XML alapokon, és a jelenleg is érvényes változatra a W3C 12

13 javaslat 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ő címkéivel 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 címkék és így az erre felkészített böngészőben grafikai elemeket lehet megjeleníteni a segítségével HTML A HTML nyelv alapeleme a címke, vagy angol nyelven a tag. 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> címke 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, 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 címkék közé zárása, egy nyitó és az ennek megfelelő zárócímke között. A nyitócímke 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. Példaként álljon itt egy HTML dokumentum részlete: 13

14 <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 címkék 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ó címke pár és csak nyitócímkéje 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! 2.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 14

15 é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. Nyivá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 címkét egyformán kezelünk, azaz nem alkalmazunk záróelem nélküli címkét. Amennyiben a címke tipikusan egysoros, itt is gondoskodunk a lezárás jelzéséről. Nem fedhetnek át a címkék, de (majdnem) tetszés szerint egymásba ágyazhatóak. Erre később majd a címkék tárgyalásánál láthatunk példákat. Nem tűnik túl lényegesnek, de az XHTML kódban minden címkené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 címkékre és azok lezárására az XHTML nyelvben <head> </head> attribútumok nélküli többsoros címke, további címkéket tartalmazhat <body bgcolor="#ffffff"> </body> attribútumokat is tartalmazó többsoros címke, további címkéket, szöveget tartalmazhat <img src="kep.jpg" height="200" width="300" /> attribútumokat is tartalmazó egysoros címke <br /> attribútumok nélküli egysoros címke 15

16 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 címkék é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 dokument típus deklaráció szerint készült. Ebből a böngésző sokat 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 címke jelzi a dokumentum kezdetét, ami általában egy fejrésszel indul (head címke). 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 címke által azonosított (a címkék felépítéséről majd később bőségesen lesz szó) szövegrész kerül meg- 16

17 jelenítésre, ez a cím, ami a böngészőben az ablak legfelső keretében megjelenik. A meta címke 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! 3 A megjelenítendő információ és annak leíró kódja a body címke 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 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). 3 Sajnos jelenleg éppen egy átmeneti időszakot élünk, amikor egyrész 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 egyenlő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. 17

18 XHTML dokumentum head elem Lássunk hozzá a címkék 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 4, amelyben összezsúfoltunk miden fontosabb lehetőséget: <head> <title></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 --> </head> Az első fontos dolog, amit észre kell vennünk, hogy a head elem belsejében újabb elemeket/címkéket 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 4 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. 18

19 más elemeket helyezhetünk el. Az elem belseje alatt természetesen a nyitó és a záró címke közötti dokumentumrészt értjük. <title></title> A title címkék 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 címkével jelölt elemnek nincs záró címkéje, csupán a címke 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 (2007 február) is működő Kilauea tűzhányó Puu 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! 19

20 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. 5 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 címke 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'); } </script> A script nyitó és záró címke 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í- 5 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! 20