honlapépités a xxi. században v1.1

Honlap p t s a XXI. sza zadban

A Microsoft ASP.NET Web Pages egy ingyenes webfejleszt technolgia, melyet gy terveztek meg, hogy a vilg legjobb fejleszti lmnyt nyjtsa webfejlesztk szmra. Ezen knyv segtsgvel megtanulhatjuk az internet s a Web mkdst, tovbb kpesek lesznk XXI. szzadi, korszer dinamikus webes tartalmak ksztsre az ASP.NET s a Razor szintaxis segtsgvel.

Megjegyzs: Ez a dokumentum a Microsoft WebMatrix and ASP.NET Web Pages Beta 3 kiadshoz kszlt. A termk a fejleszts sorn nmileg vltozhat. A legjabb informcikrt ltogassunk el a http://www.asp.net/webmatrix oldalra.

A Microsoftos fejleszti kzssg WebMatrix-os oldalt az albbi linken talljuk: http://webmatrix.devportal.hu

Weblapfejlesztssel, WebMatrix-szal, Razor nyelvvel kapcsolatos szakami krdseinket az albbi frumon tehetjk fel: http://devportal.hu/forums/348.aspx

A Facebookon a WebMatrix magyarorszgi rajong tborhoz val csatlakozssal rteslhetnk a legjabb hrekrl! WebMatrix Magyarorszg

Ez a knyv elektronikusan, kizrlag vltozatlan formban szabadon terjeszthet. A knyv rszeinek brmilyen cl felhasznlshoz a kiad elzetes rsbeli engedlye szksges.

A knyv fordtsa s lektorlsa sorn a kiad a legnagyobb gondossggal jrt el. Az esetleges hibkat s szrevteleket a [email protected] cmen szvesen fogadjuk.

Az 1. fejezet Balssy Gyrgy munkja Internet: http://www.msdnkk.hu/Users/balassy

Szerkesztette s szakmailag lektorlta: Szab Vince

Anyanyelvi lektor: Dr. Bonhardtn Hoffman Ildik

Kiad: Jedlik Oktatsi Stdi Kft. 1212 Budapest, Tncsics Mihly u. 92. Internet: http://www.jos.hu E-mail: [email protected] Felels kiad: a Jedlik Oktatsi Stdi Kft. gyvezetje
http://www.asp.net/webmatrixhttp://webmatrix.devportal.hu/http://devportal.hu/forums/348.aspxhttp://www.facebook.com/pages/WebMatrix-Magyarorszag/151899551525209mailto:[email protected]://www.msdnkk.hu/Users/balassyhttp://www.jos.hu/mailto:[email protected]

Tartalomjegyzk

1. fejezet Balssy Gyrgy: Bevezets a web programozsba ................................................6

Az internet mkdse ..................................................................................................................... 6

Gptl gpig ............................................................................................................................................... 6

Szmok a gpeknek .................................................................................................................................... 8

Nevek az embereknek ................................................................................................................................ 9

Programok egyms kztt ........................................................................................................................ 12

A HyperText Transfer Protocol ...................................................................................................... 13

Fbb jellemzk ......................................................................................................................................... 13

A krs s a vlasz .................................................................................................................................... 14

Biztonsgos kommunikci ...................................................................................................................... 20

llapotkezels .......................................................................................................................................... 22

A HyperText Markup Language ..................................................................................................... 24

A HTML nyelv elemei ................................................................................................................................ 24

Fontosabb HTML elemek .......................................................................................................................... 25

Validls ................................................................................................................................................... 37

Cascading Style Sheets stluslapok ................................................................................................ 38

Attribtumok ............................................................................................................................................ 39

Elhelyezs ................................................................................................................................................. 40

A CSS szelektorok ..................................................................................................................................... 41

Span s div ................................................................................................................................................ 44

rkls ..................................................................................................................................................... 44

Doboz modell ........................................................................................................................................... 45

Oldalelrendezsek .................................................................................................................................... 46

Tbb stluslap ........................................................................................................................................... 48

Ellenrzs ................................................................................................................................................. 50

2. fejezet Bevezets a WebMatrixba s az ASP.NET weboldalakba ...................................... 52

Mi az a WebMatrix? ...................................................................................................................... 52

Webmatrix teleptse .................................................................................................................... 52

Els lpsek a WebMatrixszal ....................................................................................................... 53

Weboldal ltrehozsa .................................................................................................................... 55

Helperek teleptse a Package Manager segtsgvel .................................................................. 57

ASP.NET weboldal kdok hasznlata ............................................................................................ 59

ASP.NET Razor oldalak programozsa Visual Studiban ............................................................... 62

ASP.NET oldalak ltrehozsa s tesztelse sajt szvegszerkesztvel ..................................................... 63

3. fejezet Bevezets az ASP.NET webszerkesztsbe Razor szintaxissal ................................. 65

8 f programozsi tipp .................................................................................................................. 65

HTML kdols ........................................................................................................................................... 66

HTTP GET s POST metdusok s az IsPost tulajdonsg .......................................................................... 70

Egyszer pldakdok ..................................................................................................................... 70

Programozsi alapfogalmak .......................................................................................................... 72

Osztlyok s pldnyok ............................................................................................................................ 73

Nyelv s szintaxis ........................................................................................................................... 74

Tovbbi forrsok ............................................................................................................................ 91

4. fejezet Egysges megjelens kialaktsa ......................................................................... 92

Tbbszr hasznlhat tartalomblokkok ltrehozsa .................................................................... 92

Egysges ltvny kialaktsa layout oldalakkal .............................................................................. 95

Tbbfle tartalommal rendelkez layout oldalak tervezse ......................................................... 98

Opcionlis tartalomszakaszok ltrehozsa .................................................................................. 101

Adat kldse layout oldalakra ..................................................................................................... 102

Egyszer helper ltrehozsa s hasznlata ................................................................................. 106

5. fejezet Munka az rlapokkal ........................................................................................ 109

Egy egyszer HTML rlap ltrehozsa ......................................................................................... 109

Felhasznl ltal bevitt rtk olvassa az rlapbl ..................................................................... 110

HTML kdols a megjelensrt s biztonsgrt ..................................................................................... 112

Adatbevitel ellenrzse ............................................................................................................... 112

Az rlap rtkeinek visszalltsa az elklds utn ..................................................................... 114

Tovbbi forrsok angolul ............................................................................................................. 115

6. fejezet Mveletek adatokkal ........................................................................................ 116

Bevezets az adatbzisokba ........................................................................................................ 116

Relcis adatbzisok .............................................................................................................................. 116

Adatbzis ltrehozsa.................................................................................................................. 117

Adatok hozzadsa az adatbzishoz ........................................................................................... 118

Adatok megjelenttse az Adatbzisbl ...................................................................................... 119

Strukturlt lekrdez nyelv (SQL) ........................................................................................................... 120

Adatok beillesztse egy adatbzisba ........................................................................................... 121

Adatok frisstse egy Adatbzisban ............................................................................................. 124

Adatok trlse egy Adatbzisbl ................................................................................................. 129

Csatlakozs egy adatbzishoz ................................................................................................................. 131

Tovbbi forrs angolul ................................................................................................................. 132

7. fejezet Adatok megjelentse gridekben ....................................................................... 133

A WebGrid Helper ....................................................................................................................... 133

Adatok megjelentse a WebGrid Helper hasznlatval ............................................................. 133

Oszlopok kivlasztsa s formzsa megjelentshez ................................................................. 134

A teljes grid formzsa ................................................................................................................ 137

Adatok lapozsa .......................................................................................................................... 138

Tovbbi forrsok .......................................................................................................................... 139

8. fejezet Adatok megjelentse diagramokon .................................................................. 140

A Chart helper ............................................................................................................................. 140

A diagram elemei......................................................................................................................... 141

Diagram ksztse az adatokbl .................................................................................................. 141

lltsok s teljesen kvalifiklt nevek hasznlata ................................................................................... 146

Diagramok megjelentse weboldalakon .................................................................................... 147

Diagram formzsa ...................................................................................................................... 148

Diagram mentse ........................................................................................................................ 150


9. fejezet Munka fjlokkal ............................................................................................... 156

Szvegfjl ltrehozsa s adatok belersa ................................................................................. 156

Adat hozzadsa meglv fjlhoz ............................................................................................... 159

Adatok olvassa s megjelentse fjlbl .................................................................................... 160

Adatok megjelentse Microsoft Excel vesszvel elvlasztott fjlbl .................................................... 162

Fjlok trlse ............................................................................................................................... 162

Fjlok feltltse a felhasznlk ltal ........................................................................................... 163

Tbb fjl feltltse a felhasznlk ltal ....................................................................................... 166


10. fejezet Munka kpekkel ............................................................................................... 169

Kp dinamikus hozzadsa egy weboldalhoz .............................................................................. 169

Kp feltltse .............................................................................................................................. 171

A GUID-okrl .......................................................................................................................................... 174

Kp tmretezse ........................................................................................................................ 174

Kp forgatsa s tkrzse ......................................................................................................... 175

Vzjel hozzadsa kphez ............................................................................................................ 177

Kp hasznlata vzjelknt ............................................................................................................ 178

11. fejezet Mveletek videkkal ........................................................................................ 180

Videolejtsz kivlasztsa ........................................................................................................... 180

MIME tpusok ......................................................................................................................................... 181

Flash videk (.swf) lejtszsa ...................................................................................................... 181

Media Player (.wmv) videk lejtszsa ....................................................................................... 183

Silverlight videk lejtszsa ......................................................................................................... 184


12. fejezet E-mail hozzadsa a webhelynkhz ................................................................. 186

E-mail zenet kldse a webhelyrl ............................................................................................ 186

Fjl kldse e-mail hasznlatval ................................................................................................ 189


13. fejezet Keres hozzadsa a webhelynkhz ................................................................ 192

Keress a webhelynkn ............................................................................................................. 192


14. fejezet Kzssgi hlzatok hozzadsa a weboldalunkhoz .......................................... 196

Weboldalunk linkelse kzssgi oldalakon ............................................................................... 196

Twitter hrfolyam hozzadsa ..................................................................................................... 197

Gravatar kp megjelentse ........................................................................................................ 199

Xbox Gamer krtya megjelentse .............................................................................................. 200

Facebook Like gomb megjelentse ......................................................................................... 201

15. fejezet Forgalomanalzis .............................................................................................. 204

Ltogatsok informciinak kvetse (Analzis) ......................................................................... 204

16. fejezet Gyorsttrazs a webhely teljestmnynek nvelshez ................................. 207

Cache-els a weboldal sebessgnek nvelshez .................................................................... 207

17. fejezet Biztonsgi elemek s felhasznli fikok hozzadsa ......................................... 210

Bevezets a felhasznli fikokba ............................................................................................... 210

Weboldal ltrehozsa regisztrcis s bejelentkez oldalakkal ................................................. 210

Csak felhasznlk szmra elrhet oldal ltrehozsa ............................................................... 214

Csoportok biztonsgi belltsai (szerepek) ................................................................................ 215

Jelszt megvltoztat oldal ltrehozsa ..................................................................................... 217

j jelsz ltrehozsnak lehetsge ........................................................................................... 219

Automatizlt programok csatlakozsnak megakadlyozsa ..................................................... 222

18. fejezet Bevezets a hibakeressbe ............................................................................... 225

A ServerInfo helper hasznlata a szerverinformcik megjelentshez ................................... 225

Oldal rtkek kijelzse kifejezsek begyazsval ...................................................................... 226

Objektumrtkek kijelzse az ObjectInfo helper hasznlatval ................................................. 229

Hibakeres eszkzk hasznlata ................................................................................................. 231

Internet Explorer Developer Tools .............................................................................................. 231

Firebug ......................................................................................................................................... 232


19. fejezet A Site-Wide viselkeds testreszabsa ................................................................ 234

Weboldal indulsakor lefut kd hozzadsa ............................................................................. 234

Kd futtatsa egy mappa fjljainak elindulsa eltt s lefutsa utn......................................... 237

Knnyebben olvashat s kereshet URL-ek ksztse .............................................................. 242

Fggelk ASP.NET API referencia ......................................................................................... 245

Osztlyok ..................................................................................................................................... 245

Adatok ......................................................................................................................................... 250

Helperek ...................................................................................................................................... 251

Fggelk ASP.NET Weboldalak Visual Basickel ..................................................................... 256

A 8 legjobb programozsi tipp s trkk ....................................................................................... 256

HTML kdols ......................................................................................................................................... 256

Egyszer pldakdok ................................................................................................................... 261

A Visual Basic programozsi nyelv s szintaxisa .......................................................................... 263


Fggelk ASP.NET weboldalak programozsa Visual Studiban ............................................ 280

Mirt vlasszuk a Visual Studit? ................................................................................................ 280

Az ASP.NETRazorTools teleptse ................................................................................................ 280

Az ASP.NET Razor Tools hasznlata Visual Studioval .................................................................. 281

Az IntelliSense hasznlata ........................................................................................................... 282

A Debugger hasznlata ................................................................................................................ 283

Nyilatkozat ............................................................................................................................ 286

Honlappts a XXI. szzadban 1. fejezet Balssy Gyrgy: Bevezets a web programozsba 6

1. fejezet Balssy Gyrgy: Bevezets a web programozsba

Az internet mkdse Avagy honnan jn a vezetk s mi trtnik benne?

Az ASP.NET WebPages technolgia s a Microsoft WebMatrix segtsgvel nagyon egyszeren s hatkonyan kszthetnk j weboldalakat, interaktv webhelyeket. A hatkonysg s az egyszersg egyik kulcsa, hogy a rendszer szmos terhet levesz a vllunkrl, azaz bizonyos problmkat nem neknk kell megoldanunk, hanem kszen kapjuk a mkd megoldst. Nha azonban elfordul, hogy a legjobb igyekezetnk ellenre valami mgsem mkdik, biztos mindannyian tallkoztunk mr a nincs internet, a nem jn be az oldal vagy pp a nem tltdik le a fjl jelensgekkel. Ezek mindennapos problmk egy webfejleszt letben, melyek megoldshoz nlklzhetetlen, hogy rtsk, hogyan is mkdik az internet.

Ennek a fejezetnek a clja, hogy megismerjk, mi trtnik a httrben, mikzben egy weboldalt nznk a bngszben. A fejezet vgre egyrtelm lesz, hogy a gpnkbl kilg kbel hova fut a vilgban, s hogyan tallja meg a bngsz a webszervert a bert webcm alapjn.

Gptl gpig

Ahhoz, hogy az nll szmtgpeket vilghlba tudjuk szervezni, termszetesen valahogy fizikailag is ssze kell tudnunk kapcsolni ket. Az internet nlklzhetetlensgnek ksznheten a mai szmtgpeknek ma mr szinte ktelez tartozkuk az erre a clra szolgl hlzati krtya (ms nven hlzati csatol, angolul network interface card, vagy egyszeren csak NIC). Ha megnzzk a gpnk csatlakozit, valami ehhez hasonlt biztosan tallunk rajta, rla van sz:

1. bra - A hlzati csatlakoz a szmtgp htoldaln

A hlzati krtya rgebben a nevhez hen valban nll, krtya formj, opcionlis rsze volt a szmtgpnek, ma mr a szmtgp nlklzhetetlen rszv vlt. St, ha hordozhat szmtgpnk van, akkor valsznleg egy vezetk nlkli hlzati krtya (wireless network card) is tallhat a gpben. Mivel ehhez nem csatlakozik kbel, legfeljebb annyit fogunk szrevenni belle, hogy sok gpen egy kln kapcsolval szablyozhatjuk, hogy mikor legyen be- vagy kikapcsolva a vezetk nlkli hlzati krtynk, ezzel is cskkentve a laptopunk fogyasztst.

A hlzati krtyba kell bedugnunk a hlzati kbelt. A csatlakozja (hivatalosan RJ45-knt szoktk feltntetni) nagyon hasonl a telefonkbel csatlakozjhoz (amit pontosan RJ11-nek hvnak), csak egy kicsit szlesebb, ezrt ha nem erltetjk, nem tudjuk rossz helyre dugni. Ha ilyen kbelre van szksgnk, a boltban UTP patch kbel nven vsrolhatjuk meg, klnbz hosszsgokban.

2. bra - Hlzati kbel


MEGJEGYZS: Ebben a knyvben a hlzat sz alatt mindenhol a szmtgp-hlzatokat rtjk,

ezt mg vletlenl se keverjk ssze a 230V-os elektromos hlzattal! A hlzati kbeleket

(network cable s nem power cable) s eszkzket gyengeram jelek tovbbtsra

terveztk, s rossz nven veszik, ha a fali konnektorba erszakoljuk ket.

A nagy krds persze az, hogy a gpnkbl indul kbel hova megy tovbb. Az internet olyan risi hlzat, hogy nem lehet minden egyes szmtgpet egyetlen kzponti csomponthoz csatlakoztatni, ezrt inkbb hlzatok hlzataknt valstottk meg. Egy-egy kisebb alhlzatban (local area network *LAN+, vagy egyszeren csak subnet) a gpeket legtbbszr csillag alakzatban rendezik el, azaz van egy helyi kzponti eszkz, amelyhez az sszes krnyken lv szmtgp csatlakozik, s amely kpes a gpek kztt zajl forgalomban rendet tartani. Erre a feladatra egy aktv hlzati eszkz, a hlzati kapcsol (amit magyarul is inkbb switchnek szoktunk hvni) szolgl.

3. bra - Egy 48 portos switch

Egy-egy switchre 8, 16, 24, 48 szmtgpet lehet csatlakoztatni attl fggen, hogy hny csatlakozja (azaz portja) van, a switch pedig a csillag kzepn gondoskodik arrl, hogy a gpek megtalljk egymst.

4. bra - Ngy szmtgp sszektse egy switch segtsgvel

De mi van akkor, ha egy szmtgp egy olyan szmtgppel kvn kommuniklni, amelyik nem erre a switchre csatlakozik? Itt egy jabb hlzati eszkzre van szksg, ami okosabb, mint a switch s kpes egy switchre csatlakoztatott sszes gpet a vilghl tbbi rszhez kapcsolni. Ez az eszkz az tvonalvlaszt (router vagy default gateway).

5. bra - Kt alhlzat sszekapcsolsa routerrel


Ha csak egyetlen szmtgppel szeretnnk az internetre csatlakozni, akkor elfordulhat, hogy otthon sem switchcsel, sem routerrel nem fogunk tallkozni. Ha azonban tbb gpet szeretnnk egymssal s a vilghlval sszektni, akkor vsrolhatunk olyan eszkzt, amely egyben kpes elltni a router s a switch funkciit is.

Szmok a gpeknek

Miutn megrtettk, hogy az interneten lv gpek fizikailag hogyan kapcsoldnak egymshoz, ejtsnk pr szt arrl, hogy ezeken a kbeleken hogyan vndorolnak az adatok!

Fizikai cm

A gpek egymst szmokkal azonostjk, azaz minden egyes gpnek van egy nll cme. A hlzati krtyk gyrti minden egyes krtynak adnak egy egyedi cmet, n. Media Access Control addresst, rviden MAC-addresst, vagy ms nven fizikai cmet. Ez egy 6 bjtos cm, egyedi a vilgon, az n gpemben lv hlzati krty pldul ez: 00-1C-7E-1D-B8-B5.

Mivel ezt a cmet a rendszergazdk s az internet szolgltatk belltsnl s hibakeressnl

gyakran szoktk krni, ezrt a laptopok gyrti gyakran rrjk egy matricra a laptop aljn. Ha

laptopod van, fordtsd meg a gpet, htha a tidre is rrtk!

Akr rrtk, akr nem, a gp meg is tudja mondani magrl, hogy mi az fizikai cme. Indtsd

el a Start menbl a Parancssort (Command Prompt), s rd be, hogy ipconfig /all! Az

elszalad hossz listban a Fizikai cm (Physical Address) sorban tallod a gped egyedi cmt.

IP cm

A fizikai cmmel tbb problma is van, melyek kzl a legfontosabb, hogy semmilyen jelentst nem hordoz. Br kiderl belle, hogy pontosan melyik cg gyrtotta az adott hlzati krtyt, de azt pldul mr nem tudja, hogy fldrajzilag hol tallhat a gp, vagy hogy melyek a szomszdos gpek.

Ugorjunk teht egy magasabb absztrakcis szintre, s a fizikai cm helyett hasznljunk egy msik cmet, ami tbb informcit hordoz, ez pedig az IP cm (Internet Protocol address). Az IP cm egy 4 bjtbl ll cm, aminek a 4 elemt (angolul octetjt) ponttal elvlasztva szoktuk lerni. Ez pldul egy nagyon bartsgos IP cm: 152.66.188.13.

Kvncsi vagy a sajtodra? Indtsd el a Start menbl a Parancssort (Command Prompt), s rd

be, hogy ipconfig, majd ss Entert! Az IPv4 cm (IPv4 Address) sorban tallod a gped ltal

hasznlt IP cmet.

Ha pedig ki szeretnd prblni, hogy a gped lt-e egy msik gpet a cme alapjn, akkor

szintn Parancssorban rd be a ping parancsot, majd utna a msik gp IP cmt!

Az IP cmek szintn egyediek a vilgon, az internet szolgltatk gondoskodnak rla, hogy a krlbell 4 millird cm kzl mindenkinek olyan jusson, amit ppen ms nem hasznl. Mivel az internet szolgltatk fldrajzilag helyhez ktttek (pldul egy adott orszgban lv gyfeleknek nyjtanak szolgltatst), ezrt az IP cmekbl az is kiderl, hogy az IP cmet hasznl szmtgp hol tallhat.

Az IP cm mellett mg szksg van az n. alhlzati maszk (subnet mask) belltsra is. Az alhlzati maszk segtsgvel egy szmtgp, amely adatot akar kldeni egy msik szmtgp szmra a hlzaton, meg tudja llaptani, hogy a cmzettel azonos alhlzaton tartzkodik-e. Ez azrt fontos, mert ha egy alhlzaton vannak, akkor kzvetlenl kommuniklhatnak egymssal, ha viszont nem, akkor a felad a router fel kldi a csomagot, a router pedig gondoskodik a csomag tovbbtsrl


ms alhlzatok fel. Innen a router msik neve, hvjk ugyanis alaprtelmezett tjrnak (default gateway) is.

Teht legalbb hrom cmet kell belltanunk minden szmtgpen, ha azt szeretnnk, hogy a szmtgp adatokat tudjon kldeni s fogadni az interneten:

Az IP cmet, ami minden szmtgp esetn egyedi cm.

Az alhlzati maszkot, amivel a felad eldntheti, hogy a cmzett vele azonos alhlzaton

van-e.

Az alaprtelmezett tjr cmt, ami a routernek az adott alhlzatra kapcsold hlzati

krtyjnak cme.

TIPP: Parancssorban kiadva az ipconfig parancsot, az IPv4 cm (IPv4 Address), az Alhlzati

Maszk (Subnet Mask) s az Alaprtelmezett tjr (Default Gateway) sorokban lthat a

hrom cm. Windows 7 alatt a Hlzati Kapcsolat Rszletek ablakban tekinthetjk t

knyelmesen az sszes belltst.

A krds mr csak az, hogy honnan tudjuk, pontosan milyen rtkeket kell belltanunk? A knyelem rdekben a legtbb esetben nem szksges ennek a hrom rtknek a kzi belltsa, a szmtgp tudja ket magtl. Ez valjban azt jelenti, hogy a hlzaton zemel egy n. DHCP kiszolgl (Dynamic Host Configuration Protocol), amelytl a szmtgp kpes lekrdezni a szksges belltsokat. Ezrt fordulhat el, hogy a legtbb nyilvnos hlzaton elg rcsatlakoznunk a hlzatra, nem kell a belltsokkal bajldnunk.

J TUDNI: Webfejlesztknt rdemes tudnunk, hogy van egy specilis IP cm, ami mindig a sajt

gpnket jelli, ez pedig a 127.0.0.1. Teht ha egy bngsz cmsorba berjuk, hogy

http://127.0.0.1, akkor mindig az ugyanazon a gpen lv webkiszolglhoz fogunk

csatlakozni, gy akr hlzati kapcsolat nlkl is kszthetnk weboldalakat.

sszefoglalva eddigi tudsunkat, ha a mi gpnknek helyesen belltjuk a hrom cm paramtert s ismerjk a cmzett gp IP cmt, akkor a kt gp tud egymssal kommuniklni. Ez a gyakorlatban valban gy mkdik, m ha hs-vr felhasznl is l a gp eltt, akkor a cmek hasznlata nem tl praktikus. A gpek jl mkdnek szmokkal, de az emberek inkbb neveket tudnak megjegyezni. A kvetkez fejezetben annak jrunk utna, hogyan lesznek a nevekbl szmok.

Nevek az embereknek

Mikor kedvenc bngsznk cmsorba berunk egy webcmet, pldul azt, hogy http://devportal.hu, akkor azt a bngsznek le kell fordtania egy IP cmre, hiszen az elz fejezetben lttuk, hogy a gpeknek cmekre van szksgk a sikeres kommunikcihoz. Ezt a folyamatot nvfeloldsnak hvjuk, s a Domain Name System (DNS) szolgltats a felels rte.

DNS

A DNS szolgltats ktflekppen tud mkdni. Dinamikus nvfelolds esetn az elz fejezetben bemutatott hrom cmen kvl a gpnk automatikusan megkapja a DHCP kiszolgltl a DNS kiszolgl cmt is. A DNS kiszolgl egy olyan szolgltats a hlzaton, amelynek a hlzat gpei krseket kldenek, s visszaadja a bekldtt nvhez tartoz IP cmet (vagy akr fordtva, az IP cmhez tartoz nevet). Egyetlen DNS kiszolgl nem tudja a vilghlra kapcsolt sszes szmtgp nevt s IP cmt, ezrt ha nem tud vlaszolni a krdsre, akkor tovbbtja azt ms DNS kiszolglknak. Ha egy rendszergazda j gpet kt a hlzatra, s azt szeretn, hogy azt ms gpek nv szerint is megtalljk, akkor be kell jegyeznie az j gpet a helyi DNS kiszolgl adatbzisba. Mivel a DNS kiszolglk kapcsoldnak egymshoz, egy tvoli gprl rkez nvfeloldsi krs elbb-
http://devportal.hu/


utbb el fog jutni az adott alhlzatrt felels DNS kiszolglhoz, aki gy kpes lesz megadni a nvhez tartoz IP cmet. Ennek a mdszernek az az elnye, hogy semmit nem kell konfigurlni az egyes szmtgpeken, a kzponti szolgltats belltsval az sszes kliens szmtgp el fogja tudni rni az adatokat.

TIPP: Parancssorban kiadva az ipconfig /all parancsot, a DNS kiszolglk sorokban

lthatak a szmtgp szmra belltott nvszerverek. Ezeket is be lehet lltani kzzel, de

tbbnyire a DHCP szervertl kapja meg a gpnk a DNS szerverek IP cmeit is. Tbb

nvszervert is bellthatunk, de rdemes tudni, hogy elszr mindig az elsdleges DNS

szerverhez fordul a gpnk, a msodlagoshoz csak akkor, ha az elsdleges nem vlaszol.

Hosts fjl

Egy msik lehetsges megolds a statikus nvfelolds. Statikus nvfelolds esetn nincs kzponti szolgltats, hanem minden egyes gpen nyilvntartjuk az elrni kvnt gpek nv-IP cm prosait. Ez az adatbzis alaprtelmezs szerint a C:\Windows\System32\drivers\etc\hosts fjlban tallhat, ami egy egyszer szveges llomny, brmilyen szvegszerkesztvel, pldul Jegyzettmbbel is szerkeszthet. Ennek a megoldsnak az elnye, hogy egy IP cmhez tetszleges nevet vehetnk fel, s azzal a nvvel hivatkozhatunk az adott gpre mg akkor is, ha az nincs bejegyezve a kzponti DNS szolgltatsba.

A gyakorlatban a statikus nvfelolds nem nllan, hanem a dinamikus nvfeloldssal egytt szokott mkdni, teht a kt mdszer kiegszti egymst.

Webfejleszts kzben nagyon j szolglatot tehet a hosts fjl. Elfordulhat, hogy a gpnkn fut webszerveren tbb webhelyet is szeretnnk futtatni, ekkor a rendszer pldul a nv alapjn klnbztetheti meg ket. A hosts fjlban felvehetnk tbb nevet, s mindegyik mutathat a 127.0.0.1 IP cmre.

Egy msik gyakori eset, amikor praktikus a hosts fjl hasznlata: ha mg nincs bejegyezve a hivatalos tartomny (domain) nv egy internet szolgltatnl, de az alkalmazsnak mindenkpp szksge van r. Ebben az esetben ideiglenesen felvehetjk a nevet a sajt hosts fjlunkba, ksbb pedig amikor megtrtnik a hivatalos nvbejegyzs, akkor knnyen trlhetjk onnan.

TIPP: A nvfelolds mkdsnek tesztelsre kivlan hasznlhat az nslookup parancs.

Nyissunk egy Parancssort, s rjuk be, hogy nslookup devportal.hu, majd ssnk Entert.

A vlaszban ltni fogjuk a nvfeloldst vgz kiszolgl nevt s a devportal.hu IP cmt is. Az

nslookup fordtva is tud mkdni, azaz ha egy nv helyett IP cmet runk be utna, akkor

megmondja a cmhez tartoz nevet (feltve, hogy az adott tartomny rendszergazdja nem

csak a nvhez tartoz IP cmet regisztrlta, hanem az IP cmhez tartoz nevet is).

Dinamikus DNS

A fenti megoldsok mind azt felttelezik, hogy az IP cm, amire a nvbejegyzs hivatkozik, lland. Csakhogy a mai vilgban az internet szolgltatk tbbsge az otthoni felhasznlk szmra dinamikus IP cmet ad, azaz bizonyos idkznknt az IP cm megvltozik. Mivel a DNS szerverek errl a cmvltozsrl automatikusan nem rteslnek, ezrt az ilyen dinamikus IP cmre mutat nvbejegyzsek nagyon hamar elavulnnak.

Erre a problmra jelent megoldst a dinamikus DNS szolgltats (nem sszekeverend a dinamikus nvfeloldssal). A dinamikus DNS mkdse megegyezik a hagyomnyos DNS szerverek mkdsvel, azzal az egyetlen klnbsggel, hogy ha egy szmtgp IP cme vltozik, akkor a szmtgp rtesti a DNS szervert, s automatikusan frissti a sajt nvbejegyzshez tartoz IP cmet.


A vilgon szmos ingyenes dinamikus DNS szolgltat van, a legismertebbek a DynDns.com s

a no-ip.com, de ltezik tbb magyar szolgltat is, pldul a myip.hu s a dynpro.hu. Ezekrl a

weboldalakrl a regisztrci utn egy kliens programot kell letltennk, amely a gpnkn

folyamatosan figyeli a hlzati kapcsolatot, s ha IP cm vltozst tapasztal, automatikusan

frissti a DNS szerveren a nvbejegyzst. gy megoldhat, hogy pldul az otthoni gpnket,

amely akr naponta tbbszr j IP cmet kap, nv szerint el tudjuk rni tvolrl.

DNS gyorsttr

Gyakori eset, hogy egy fut programnak egyms utn tbbszr van szksge egy adott nvhez tartoz IP cmre. Mivel a nvfelolds idignyes folyamat (el kell mennie a krsnek a hlzaton keresztl a nvszerverig s vissza), ezrt a vlaszok egy n. gyorsttrba (cache) kerlnek. Ez azt jelenti, hogy a szmtgp egy ideig megjegyzi a DNS szervertl kapott vlaszt, s ez alatt az id alatt ha egy program ismt erre kvncsi, akkor nem fordul a nvkiszolglhoz, hanem fejbl azonnal nyomja a vlaszt.

A vlaszt annyi idre gyorsttrazhatja a kliens, amennyi idre a DNS kiszolgl engedi. A

vlaszban teht nemcsak a krdezett nvhez tartoz IP cmet kldi vissza a nvszerver, hanem

egy n. time-to-live (TTL) rtket is, ami azt jelzi, hogy mennyi ideig rizheti a kliens a

gyorsttrban a vlaszt.

A DNS gyorsttr hasznos szolgltats, a webfejlesztknl azonban nha okoz egy kis galibt. Kpzeljk el az albbi esetet:

1. Fejlesztknt ksztnk egy weboldalt, s kitesszk egy szerverre.

2. Berjuk a kedvenc Internet Explorer bngsznk cmsorba a szerver nevt, de keseren

tapasztaljuk, hogy nem jn be semmi .

3. Kiprbljuk gy, hogy a szerverre nv helyett IP cmmel hivatkozunk, s gy minden

mkdik. Hmm.

4. Nmi gondolkods utn a homlokunkra csapunk, hogy hopp, elfelejtettk regisztrlni a

nevet, ezrt irny a hosts fjl vagy a DNS kiszolgl, ahova felvesszk a szerver nevhez

tartoz IP cmet.

5. Visszatrnk a bngsznkhz, frisstjk az oldalt, de az eredmny ugyanaz. Fehr oldal

szp nagy hibazenettel: A kiszolgl nem tallhat.

Hol a hiba?

Ebbe a szituciba elbb-utbb minden webfejleszt belekeveredik, ezrt rdemes ismernnk a megoldst: a problmt a DNS gyorsttr okozza.

Mikor a 2. lpsben a bngszben megprbljuk megnyitni az oldalt, a gpnk a DNS kiszolglhoz fordul, s megksrli elvgezni a nvfeloldst. Mivel azonban a DNS kiszolgln nincs bejegyezve a webkiszolgl neve, ezrt a DNS kiszolgl azt fogja mondani, hogy ilyen nev szerver nincs. Ez a vlasz legyen brmennyire hasznlhatatlan ugyangy bekerl a DNS gyorsttrba, mint a sikeres vlaszok.

JEGYEZZK MEG: a negatv vlasz is vlasz.

Ezek utn hiba frisstjk a nvszerver adatbzist, attl mg nem fog kikerlni a bejegyzs a szmtgp DNS gyorsttrbl. Ha nem akarjuk kivrni, amg a gyorsttrbl magtl kikerl ez a
http://www.dyndns.com/http://www.no-ip.com/http://myip.hu/http://www.dynpro.hu/


bejegyzs ez akr tbb nap mlva is lehet , akkor parancssorbl kiadhatjuk az ipconfig /flushdns parancsot, ami elvgzi az opercis rendszer DNS gyorsttrnak trlst.

m ettl mg valsznleg nem fog megjavulni minden, ugyanis a mai bngszk ltalban maguk is tartalmaznak egy DNS gyorsttrat. A bngszk gyorsttrt legegyszerbben a bngsz jraindtsval trlhetjk. Ha ezt a fenti 5. lps eltt megtesszk, akkor valsznleg mr sikeresen meg fog jelenni az j oldalunk.

Programok egyms kztt

Az elz fejezetben lttuk, hogy kt gp hogyan tallja meg egymst IP cm s nv alapjn. De mi van akkor, ha egy gpen tbb program is tallhat? Tegyk fel, hogy van egy szerver gpnk, amin fut egy webkiszolgl s egy FTP kiszolgl, illetve van egy ide kapcsold kliens szmtgpnk, amin fut egy webbngsz s egy FTP kliens program is. A kt gpen kt-kt program zenget egymsnak, hogy lehet, hogy mgsem keverednek ssze az zenetek, hogyan tall be egy zenet egy gpen bell a megfelel alkalmazshoz?

Ezt a problmt oldjk meg az n. portok. A port nem ms, mint egy egsz szm 0 s 65535 kztt, ami a gpen bell azonost egy alkalmazst. Amikor egy program egy msik gpen fut alkalmazsnak kvn zenetet kldeni, akkor nemcsak a clgp IP cmt kell megadnia, hanem a clgpen fut alkalmazs port szmt is, gy lesz egyrtelm, hogy pontosan melyik programnak kell feldolgoznia az zenetet.

Vannak nagyon gyakran hasznlt alkalmazsok mint pldul a webkiszolgl , melyeknek a port szmt az egyszersg rdekben szabvnyostottk. Pldul a webkiszolgl mindig a 80-as porton figyelve vrja a bejv HTTP krseket, a titkostott HTTPS krseket pedig a 443-as porton. Ezrt aztn nem is szksges ezeket a port szmokat kirnunk, a bngsz automatikusan tudni fogja, hogy ha a webcm http://-vel kezddik, akkor a kiszolgl 80-as portjra, ha https://-sel, akkor pedig a kiszolgl 443-as portjra kell kldenie a krst.

A portoknak nagy szerepk van a tzfalak belltsban, melyekkel korltozhatjuk egy

szmtgp kimen s bejv forgalmt. Pldul ha a webszervernk el betesznk egy

tzfalat, de azon nem nyitjuk ki a 80-as portot, akkor a webszerver nem lesz elrhet.

Elfordulhat, hogy egy alkalmazsbl tbb pldnyt is szeretnnk futtatni, vagy pldul egy webszervert zemeltetnk a gpnkn, amely tbb webhelynek ad otthont. Brmennyire is igaz, hogy a http:// protokollhoz a szabvny szerint a 80-as port tartozik, kt program vagy kt webhely nem osztozhat ugyanazon a porton, hiszen ha egy bngsz cmsorba bernnk, hogy http://localhost/default.cshtml, akkor a webkiszolgl nem tudn eldnteni, hogy melyik webhelyre gondolunk. Ilyenkor knytelenek vagyunk a kt webhelyet ms-ms porton zemeltetni, s a nem alaprtelmezett portszmokat a krsben kirni. Az egyik webhely kezdlapja lehet a http://localhost/index.php, a msik pedig pldul a http://localhost:8080/default.cshtml.

Mikor egy WebMatrixban kszl webhelyet futtatunk, akkor a WebMatrix elindtja az IIS

Expresst, ami egy kifejezetten fejleszti clra hasznlhat webkiszolgl. Az IIS Express kpes

egyszerre tbb webhelyet is futtatni, mgpedig gy, hogy mindegyiket nll port szmon

teszi elrhetv. Figyeljk meg a bngsz cmsort, s ltni fogjuk a port szmot.

A Windows beptett Internet Information Services webkiszolgljval (ami az elbb emltett

IIS Express nagy testvre) gy is zemeltethetnk tbb webhelyet, hogy mindegyik a HTTP

protokollhoz tartoz 80-as porton figyel. Ez akkor lehetsges, ha a webhelyek nll nven

rhetek el, az egyik pldul a http://forum.example.com, a msik pedig a


http://aruhaz.example.net cmen. Ilyenkor a webkiszolgl a nv alapjn kpes

eldnteni, hogy a bejv krs pontosan melyik webhelyre vonatkozik.

A HyperText Transfer Protocol Avagy mi trtnik a bngsz sznfalai mgtt?

A HyperText Transfer Protocol, azaz a HTTP a webbngszk ltal a weboldalak megjelentsre hasznlt informcitviteli protokoll a vilghln, ezrt amikor egy webalkalmazst ksztnk, akkor a legfontosabb elvrs a kdunkkal szemben, hogy HTTP protokollon keresztl lehessen vele kommuniklni. Br a legtbb szerver oldali programozsi krnyezet (pl. ASP.NET) jrszt elfedi a HTTP protokoll rszleteit, mindenkpp rdemes megismerkednnk a protokoll mkdsvel, mert ez a tuds sokat segthet a programjaink megtervezsben s a fejleszts sorn a hibakeressben is.

A HTTP aktulis verzija az 1.1 verzi, melyet pontosan az 1999 jniusban kiadott (nem egy mai darab, de mkdik ), 176 oldalas RFC 2616 specifikl. Ebben a fejezetben csak a legfontosabb rszeket rintjk, akit tovbbi rszletek rdekelnek, az eredeti dokumentumbl tjkozdhat.

A fejezet vgre pontosan ismerni fogjuk a HTTP protokoll mkdst, ami nagy segtsg lesz a weboldalak hibinak feltrsban.

Fbb jellemzk

A HTTP protokollal kt szoftver beszlget egymssal, egy webes kliens s egy webszerver. A webes kliens (angolul client, amit nha gyflnek is fordtanak) legtbbszr a felhasznl ltal elindtott webbngsz program (webbrowser), de lehet brmilyen ms szoftver is, ami rti a HTTP protokollt (pldul egy RSS olvas program), ppen ezrt ltalnossgban a klienseket sszefoglal nven user agentnek szoktk nevezni. A prbeszd msik rsztvevje a webszerver (ms nven webkiszolgl), amely a felhasznl ltal elrni kvnt tartalmat vagy szolgltatst biztostja.

A HTTP legfontosabb jellemzje, hogy egy n. krs-vlasz protokoll a kliens s a szerver kztt. Ez azt jelenti, hogy a kommunikcit mindig (rtsd MINDIG!) a kliens kezdemnyezi azzal, hogy elkld egy HTTP krst (request) a szervernek, aki erre egy HTTP vlasszal (response) vlaszol. Fontos, hogy a webszerver nagyon jlnevelt, ha nem krdezik, nem beszl. A kommunikci sorn teht mindig krs-vlasz prok kvetik egymst, valahogy gy:

6. bra - A HTTP krsek s vlaszok

Ebbl az kvetkezik, hogy a HTTP protokoll nem biztost lehetsget arra, hogy a szerveren

megjelen j informci azonnal megjelenjen a felhasznl bngszjben. A szerver nem

kpes arra, hogy elkldjn egy olyan j informcit a kliensnek, amit a kliens nem krt. Ilyen

teht nincs:
http://tools.ietf.org/html/rfc2616


rdekes mdon felhasznlknt mgis nagyon hasonlval tallkozunk, amikor a Facebookot

alkalmazva azt ltjuk, hogy a msok ltal rt bejegyzsek maguktl megjelennek az

zenfalunkon, vagy amikor a GMail arra figyelmeztet, hogy j levelnk rkezett. Ez csak gy

mkdhet, hogy mikzben mi a weboldalt nzegetjk, a bngsz a httrben (a felhasznl

szmra nem lthat mdon) bizonyos idnknt (pldul percenknt) krseket kld a

szervernek. Ezekre a krsekre a legtbb esetben a szerver azt fogja vlaszolni, hogy nincs

semmi jdonsg, amikor azonban a szerveren j informci keletkezik (pldul rkezik egy

levelnk), akkor a kvetkez krs alkalmval errl a kliens is rteslni is fog. Ezt hvjk a

szerver pollozsnak, a httrben trtn kommunikcit pedig Ajaxnak.

A HTTP msik jellemzje, hogy n. llapotmentes protokoll. llapotnak tekinthet az, hogy egy webruhzban hny termk van ppen a kosarunkban, vagy hogy egy kzssgi oldalra ppen be vagyunk-e jelentkezve. Ezek mind pillanatnyi llapotok, s mikzben hasznljuk a weboldalt, ezek az llapotok megvltozhatnak (pldul az elbb mg res volt a kosarunk, most mr van benne egy karalb). Mivel a HTTP llapotmentes, ezrt ezek az llapotok s azoknak a vltozsa protokoll szinten nem jelenik meg sehol, kr is keresni. Ahogy ksbb ltni fogjuk, ezt a problmt mshogy kell megoldanunk.

A krs s a vlasz

Miutn gy megbeszltk a HTTP legfontosabb jellemzit, ssunk egy kicsit mlyebbre, s nzzk meg, hogy pontosan mi trtnik, mikzben a kliens s a szerver beszlget egymssal!

A webfejlesztk szerszmosldjnak egyik legfontosabb eleme a sajt (de tnyleg!) HTTP forgalmunk elemzsre szolgl eszkz. Ezeket a szoftvereket sszefoglal nven HTTP debugging proxynak hvjk, s gy mkdnek, hogy bellnak a bngsz s a hlzat kz, s a rajtuk tmen forgalmat megmutatjk. Az egyik legknnyebben hasznlhat ilyen eszkz a Fiddler, de nagyon elterjedt a Firefox bngszbe bepl Firebug kiegszts is. Btran teleptsk fel ket, majd nzzk meg pldul a www.example.com oldalt kedvenc bngsznkben, s figyeljk meg, mit mutatnak!

Mg egyszerbb s knyelmesebb a helyzet, ha Internet Explorer 9-et hasznlunk, ott ugyanis a beptett Fejleszti Eszkztr (Developer Toolbar, F12) Hlzat (Network) fln azonnal ltszik a HTTP krs s a vlasz minden rszlete, nincs szksg kls eszkz teleptsre:
http://www.fiddler2.com/http://www.getfirebug.com/http://www.example.com/http://www.microsoft.com/ie


7. bra Az Internet Explorer 9 Developer Toolbar Network fln a forgalom minden rszlete lthat

Mikzben elltogatunk egy oldalra, a bngsz az albbihoz hasonl HTTP krst kldi el a szervernek:

GET http://www.example.com/ HTTP/1.1 Accept: */* Accept-Language: en-US,hu-HU;q=0.5 User-Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64;

Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C; .NET4.0E; MS-RTC LM 8)

Accept-Encoding: gzip, deflate Connection: Keep-Alive Host: www.example.com Pragma: no-cache

Ahogy lthat, a HTTP egy szveges protokoll, gy a kommunikci nagyon knnyen rtelmezhet. A krs els rsze az n. metdus (method), amivel azt mondjuk meg, hogy milyen mveletet szeretnnk elvgezni. Ez leggyakrabban a letltshez hasznlt GET, vagy a feltltshez hasznlt POST.

A metdust kveti a krt erforrs webcme (itt: http://www.example.com/), majd a protokoll verziszma, ami szinte mindig HTTP/1.1.

A kvetkez sorok n. fejlc sorok, amellyel a bngsz tovbbi informcikat juttathat el a szerverhez. A fenti rszletben pldul egy Accept-Language fejlcben tudatja a bngsz a szerverrel, hogy elssorban angol (en-US), msodsorban magyar (hu-HU) nyelv tartalmat szeretne kapni.

A fejlc sorokat egy res sor kveti, majd utna kvetkezhet a krs trzse (body). Ilyet fknt HTTP POST krsekben lehet ltni (a fenti pldban teht nem), pldul egy rlapba bert szvegek a krsnek ebben a rszben jutnak el a szerverhez.

A szerver erre a krsre egy HTTP vlaszt kld vissza:

HTTP/1.1 200 OK


Date: Fri, 01 Oct 2010 10:42:07 GMT Server: Apache Last-Modified: Fri, 30 Jul 2010 15:30:18 GMT ETag: "573c1-254-48c9c87349680" Accept-Ranges: bytes Content-Length: 596 Connection: close Content-Type: text/html; charset=UTF-8 (mg folytatdik)

A vlasz els sora a sttusz sor, amiben a szerver ltal tmogatott verziszm (HTTP/1.1) utn egy sttusz kd (200) s egy angol nyelv indokls (OK) tallhat. A krshez hasonlan ezutn a fejlc, majd egy res sor utn a vlasz trzse kvetkezik. A vlasz trzsben kapjuk vissza a krt weboldalt, kpet vagy videt, amit le akartunk tlteni.

Ezek teht a krs s a vlasz ltalnos formi, a kvetkez fejezetekben egy kicsit rszletesebben is megnzzk, hogy az egyes rszek mire jk, milyen rtkekkel tallkozhatunk ott.

GET s POST

Az elz fejezetben lttuk, hogy a HTTP krs legels eleme a metdus, amivel meghatrozzuk, hogy milyen mveletet akarunk elvgezni a szerveren.

A leggyakoribb metdus a GET, amivel egy oldalt, kpet, fjlt, vagy ltalnos nven erforrst tudunk lekrni a szerverrl. Egy msik nagyon gyakori metdus a POST, amivel feltlteni tudunk; pldul egy rlap kitltse utn megadott rtkek legtbbszr HTTP POST krssel utaznak fel a szerverre a krs trzsben.

Egy webalkalmazs ksztse sorn nha dnts el kerlnk, hogy egy adott funkcit egy

GET vagy egy POST mvelettel valstsunk meg. Pldul egy webes levelez oldalon a nem

kvnt levelek trlse elviekben brmelyik mdon megoldhat, melyiket vlasszuk? Hasonl

problma jn akkor is el, amikor a felhasznli felletet tervezzk. A Trls funkcit egy

hiperlink vagy egy gomb (button) valstsa meg? A hiperlink ugyanis alaprtelmezs szerint

egy HTTP GET, mg a gomb egy HTTP POST krst kld a szervernek.

Ha technikailag brmelyiket vlaszthatjuk, akkor clszer aszerint dnteni, hogy a GET

krsek ltalban biztonsgosak, azaz nem vltoztatjk meg a szerver llapott, s tbbszri

vgrehajtsuk ugyanazt az eredmnyt vltja ki, mint az egyszeri. Pldul egy kerti trpe

katalgust tbbszr is letlthetek a szerverrl, vagy a Bingben is lefuttathatom ugyanazt a

keresst tbbszr, nem fj senkinek. Adatok lehvsra teht kivl a GET. Ha azonban adatok

felkldsrl vagy llapotvltozsrl van sz, amik radsul tbbszr vgrehajtva mst

eredmnyeznek, akkor inkbb hasznljunk POST-ot. Egy levl letrlse a Hotmailen

megvltoztatja az llapotot, egy banki tutals pedig tbbszr megismtelve a kvnt

mrtknl jobban apasztja a bankszmlnkat, ezrt ezekben az esetekben inkbb POST

javasolt.

Egy webes rlap (pldul krdv) kitltse sorn tbb HTTP krsre van szksg, amik kztt elfordulnak GET s POST krsek is:


8. bra - Egy webes rlap kitltsnek folyamata

A krt erforrs cme

A krs msodik rsze a krt erforrs (oldal, kp, dokumentum stb.) pontos cme. A szabvny szerint itt egy egysges erforrs azonostt, n. URI-t (Uniform Resource Identifier) kell megadnunk, ami formailag gy nz ki:

[sma]:[sma fgg rsz]

Elszr teht meg kell adnunk egy smt, majd a kettspont utn azt a szveget, amit a sma ismeretben tudunk rtelmezni. Lssunk r pldt! Ez itt vajon micsoda?

4633714

Csak egy szp nagy szm, de akrhogy nzem, nem derl ki belle, hogy mit kell kezdeni vele, s taln mr az sem emlkszik r, aki iderta. Lehet egy hangya cipmrete, de akr hrom fej kelkposzta ra is (persze ms mrtkegysgben). De ha gy rom le, mindjrt rtelmet nyer:

tel:4633714

A tel sma egyrtelmen megmondja, hogy ez egy telefonszm, errl pedig tudjuk, hogy mit kell csinlnunk vele: be kell nyomkodnunk a telefonunkba. A kettspont eltti rsz teht megmondja, hogy mire j a kettspont utni rsz.

Ezenkvl az URI mg egy dolgot r el, mgpedig azt, hogy ez egyrtelmen azonostson valamit. A fenti telefonszm egyrtelmen azonost egy kszlket, ami csrgni fog, ha felhvjuk. Itt egy msik URI plda, ahol a smbl az derl ki, hogy ez egy e-mail cm, azaz egyrtelmen azonost egy postaldt:

mailto:[email protected]

Ez alapjn mr rtjk az albbi URI-t is, ami azt mondja, hogy ez egy a HTTP protokoll szmra rtelmezhet cm:

http://balassygyorgy.wordpress.com/2010/05/21/facebook-like-button-xss

Csakhogy ennek a cmnek van mg egy rdekessge is: nemcsak hogy egyedileg azonost egy weboldalt, de azt is meghatrozza, hogy hol tallhat ez az oldal az interneten. Konkrtan a balassygyorgy.wordpress.com szerveren a 2010/05/21 mappban, s gy hvjk, hogy facebook-like-button-xss. Ezrt tudja megtallni a bngsz, mert tudja, hogy a gigantikus mret interneten hol kell keresnie. Mivel itt nemcsak azonostsrl, hanem a dokumentum lelhelynek meghatrozsrl is sz van, ezrt az URI elnevezs helyett gyakran hasznljuk az URL, azaz Uniform Resource Locator elnevezst.

Az URL ltalnos formja a kvetkez:

protocol://username:password@FQDN:port/path/file? variable1=value1&variable2=value2#name


Ell van teht a protokoll, amit opcionlisan egy felhasznlnv s egy jelsz kvethet, amit egy kukac (@) karakter vlaszt el az FQDN-tl. Az FQDN a Fully Qualified Domain Name, azaz a tartomny teljes neve, pldul balassygyorgy.wordpress.com. Az FQDN utn jhet a port szma a szerveren, amit tbbnyire elhagyunk, mert a bngsz tudja, hogy a HTTP protokoll a 80-as portra, a HTTPS protokoll a 443-as portra kapcsoldik. A portszm utn jhetnek mappk s almappk (path), majd vgl a lekrni kvnt fjl neve. A krdjel (?) utn kvetkez n. query stringben tovbbi informcikat adhatunk t a szervernek, amit a szerver tetszleges mdon dolgozhat fel. Ezek a paramterek nv=rtk formban, egymstl & jellel elvlasztva adhatk meg. Az URL legvgn a # karakter utn egy nv kvetkezhet, ami az oldalon belli hivatkozsra utalhat.

Egy webalkalmazs ksztse sorn gyakran elfordul feladat, hogy egy URL-t kell darabjaira

szednnk vagy ppen kt URL egyezsgt kell vizsglnunk. Fontos tudni, hogy br a fenti az

URL-ek szp ltalnos formja van, sajnos egy URL lehet teljesen lczott is, mert a

szabvny megengedi a karakterek kdolst. Pldul ez is egy rvnyes webcm, a bngsz

megrti, ha berjuk neki:

%77%77%77%2E%67%6F%6F%67%6C%65%2E%63%6F%6D

ppen ezrt egy URL feldolgozst manulisan, hagyomnyos string mveletekkel megoldani

nagyon kockzatos, mert knnyen hibzhatunk. A legtbb webalkalmazs programozi

keretrendszer erre biztost beptett lehetsget, pldul ASP.NET platformon a System.Uri

osztly segtsgvel egy csapsra megkaphatjuk az URL brmely rszt.

Az URL-ek kt nagyobb csoportba sorolhatak. Az abszolt URL-ek nem fggnek semmitl, nmagukban egyrtelmen meghatrozzk a krt erforrst. Pldul ez a cm mindig az MSDN Kompetencia Kzpont honlapjn tallhat ASP.NET Indul Kszlet oldalra mutat:

http://www.msdnkk.hu/Pages/InduloKeszlet/ASPNET/Default.aspx

Ez a kezdlap (a Default.aspx oldal) tartalmaz egy kpet, amire a hivatkozs gy trtnik:

ASPNET_Indulo_Keszlet.jpg

Ez a webcm nmagban nem teljes, csak a kezdlap cmhez viszonytva rtelmezhet, ezrt ezt relatv URL-nek hvjuk. Az ebbl kpzett abszolt URL ez lesz:

http://www.msdnkk.hu/Pages/InduloKeszlet/ASPNET/ASPNET_Indulo_Keszlet.jpg

Ha ppen egy msik oldalon lennnk, s ott hivatkoznnk ugyanezzel a relatv URL-lel erre a kpre, akkor mr valsznleg rossz lenne a hivatkozs, s a szerver nem talln meg a fjlt. Rszben ezrt szoktak n. gykr relatv cmeket (root-relative URL) hasznlni. Pldul az albbi egy ilyen URL:

/Storage/balassy/Avatar/avatar.jpg

A sima relatv URL-ekhez kpest az a nagy klnbsg, hogy egy / jellel kezddik, ez jelzi a bngsznek, hogy ne az aktulis oldal mappjhoz csapja hozz ezt a cmet, hanem a szerver neve utn illessze oda. Ez lesz az abszolt cm:

http://www.msdnkk.hu/Storage/balassy/Avatar/avatar.jpg

ltalban jobban szeretnk relatv cmeket hasznlni, mert rvidebbek, olvashatbbak, s ha a weboldalunkat msik szerverre kltztetjk, akkor nem kell a szerver nevt mindenhol trnunk.

Fejlc mezk

Ahogy a HTTP krs s vlasz ltalnos formjnak bemutatsnl lttuk, a bngsz s a szerver is kld fejlc sorokat, melyekben a krt tartalmon kvl tovbbi informcik utaznak. A fejlc sorok


formailag azonosak, elszr az adott fejlc mez neve ll, amit egy kettspont utn a hozz tartoz rtk kvet.

A kvetkezkben a teljessg ignye nlkl lljon itt nhny rdekesebb fejlc mez jelentse!

Az Accept fejlccel a kliens hatrozhatja meg, hogy milyen tpus fjlt szeretne letlteni, amire mintegy vlaszul a szerver a Content-Type fejlcben adja meg, hogy milyen tpus a fjl, amit visszakld. Szintn megadja hozz a szerver, hogy a letlteni kvnt fjl mekkora (Content-Length fejlc) s hogy ez a szm miben rtend (Accept-Ranges).

A bngsz a kommunikci sorn elg sokat elrul magrl, pldul a User-Agent mezben elkldi a sajt tpust, verziszmt s mg az opercis rendszer verziszmt is, ami alapjn gynyr statisztikk kszthetek szerver oldalon. Szintn elkldi az Accept-Language mezben, hogy a felhasznl hogyan lltotta be a nyelvi opcikat a bngszjben, gy ez alapjn a szerver eldntheti, hogy milyen nyelv tartalmat adjon vissza. St, ha egy oldalra gy jutottunk el, hogy egy msik oldalon kattintottunk egy linkre, akkor a bngsz a hivatkoz oldal cmt egy Referer (igen, a szabvny szerint gy kell rni) nev fejlc mezben elrulja a hivatkozott oldalnak.

A szerver is tud bbeszd lenni, pldul a Server sorban megmondja az tpust, a Date sorban pedig a szerver pillanatnyi dtumt.

Biztos tapasztaltuk mr, hogy egy weboldal els alkalommal kicsit lassabban tltdik be, mint a ksbbi alkalmakkor. Ez gyakran azrt van, mert az oldal egyes rszeit (pldul a kpeket) a bngsz a sajt gyorsttrban eltrolja, gy azokat legkzelebb nem kell letltenie. Hogy mit s mennyi ideig trolhat, azt a szerver hatrozza meg a Cache-Control s az Expires fejlc mezkkel, st ilyen esetekben azt is elkldi, hogy az egyes fjlokat mikor mdostottk utoljra a szerveren (Last-Modified fejlc). Ezt felhasznlva a kvetkez alkalommal a bngsz egy If-Modified-Since fejlc mezvel tudja jelezni a szerver fel, hogy csak akkor kri az adott fjlt, ha az a megadott id utn vltozott. Ha azt tapasztaljuk, hogy br a webszerveren mdostottunk valamit, de az nem jelenik meg a bngszben, akkor vizsgljuk meg a HTTP forgalmat, s figyeljnk ezekre a fejlc mezkre!

J TUDNI: A bngszk prbljk minimalizlni a hlzati forgalmat ezzel is gyorstva az oldal

megjelentst , ezrt a sajt gyorsttrukban igyekeznek eltrolni a szervertl kapott

vlaszokat (vagy legalbb egyes rszeit, pldul a kpeket). Ha teljesen frissteni szeretnnk az

oldalt a bngszben, akkor ne egyszeren az F5 gombot nyomjuk meg, hanem a CTRL+F5

billentyket, vagy a CTRL lenyomsa kzben kattintsunk a Frissts (Refresh) gombra!

Sttusz kdok

A HTTP vlasz legfontosabb rszei ktsgkvl a sttusz kd s a hozz tartoz szveges indokls. A hibakdok hromjegy szmok, melyek az els szmjegy alapjn csoportokba sorolhatak. me a leggyakoribb hibakdok:

o 1xx: Information A HTTP kapcsolattal kapcsolatos tjkoztat zenetek, a gyakorlatban

nagyon ritkn tallkozhatunk velk.

o 2xx: Successful Sikeres krs.

o 200 OK Ez a legjobb s szerencsre leggyakoribb eset.

o 3xx: Redirect tirnyts, a krt tartalom mshol tallhat, amit a Location fejlc

mezben ad meg a szerver.

o 301 Moved permanently A krt tartalom vgrvnyesen tkltztt egy msik cmre,

a bngsz akr meg is jegyezheti az j cmet.


o 302 Found (temporary move) A krt tartalom ideiglenesen mshol tallhat.

o 304 Not modified A krt tartalom az utols letlts ta nem vltozott. Ezt

vlaszolhatja a szerver, ha a kliens az If-Modified-Since fejlc mezvel jelzi, hogy mi

a nla trolt utols vltozat. Ekkor a krt fjl tartalma nem fog ismt letltdni a

szerverrl.

o 4xx: Client Error Hiba trtnt, ami valsznleg a kliens hibja.

o 401 Unauthorized A kliens olyan oldalt prbl elrni, amihez nincs joga. Ennek az

zenetnek a hatsra a bngsz fel fogja dobni a felhasznlnv s a jelsz

bekrsre szolgl ablakot.

o 403 Forbidden A kliensnek nincs jogosultsga a krt tartalom elrsre.

o 404 Not found Hibs a cm, a megadott cmen nem tallhat tartalom. Clszer

ellenrizni, hogy a krt cmen valban tallhat fjl a szerveren, vagy elgpeltk az

URL-t.

o 5xx: Server Error Hiba trtnt a szerveren.

o 500 Internal server error A szerveren fut webalkalmazsban bels hiba trtnt.

Ezt ltalban a programoz vagy az zemeltet tudja kijavtani.

o 503 Service unavailable A szerveren lellt a szolgltats, ami vagy a tl sok hiba

(ld. 500-as hiba), vagy a tl nagy forgalom (tlterhels) eredmnye.

Ha egy weboldal ksztsekor azt tapasztaljuk, hogy valami nem egszen gy trtnik, ahogy terveztk, akkor clszer megnzni a HTTP forgalmat s megkeresni a hibakdot. Ha pldul egy oldalon nem jelenik meg egy kp, akkor az valsznleg annak ksznhet, hogy elrtuk a kp URL-jt, amire a szerver 404-es hibval fog vlaszolni. Ettl mg az oldal meg fog jelenni, a bngsz nem fog hibt jelezni, de ez a kp hinyozni fog. A HTTP vlaszban lv hibakdbl egyrtelmen kiderl, hogy mirt.

Biztonsgos kommunikci

Ahogy az elz fejezetben lttuk, a HTTP protokoll egy nylt szveges protokoll, ennek ksznhet, hogy knnyen tudtuk rtelmezni a kommunikcit, ami a gyakorlatban nagyban segti a fejleszt munkjt. Sajnos ugyanez a nylt kommunikci a rosszindulat tmadk munkjt is ugyangy segti, ugyanis lehetv teszi a kommunikci egyszer lehallgatst.

Ha illetktelenek ell vdeni szeretnnk a HTTP forgalmat, akkor a HTTP protokoll mellett egy msik protokollt is be kell vetnnk. Ha a HTTP-vel egytt hasznljuk a Secure Sockets Layer (SSL) protokollt is, akkor az eredmny a HTTPS protokoll, ami az albbi kt elnnyel br:

Titkostja a forgalmat, gy az tkldtt informcit nem lehet lehallgatni.

Azonostja a szervert, gy a felhasznl szmra egyrtelm, hogy kinek kldi el pldul a

bankkrtyja adatait.

A nagy krds persze az, hogy amikor felhasznlknt megnyitunk egy weboldalt, ami pldul X banknak mondja magt, akkor honnan tudhatjuk, hogy az valban annak a banknak az oldala? Csak azrt, mert az oldal annak mondja magt, nyilvn nem. (Ennyi ervel brki mondhatn magrl, hogy szemlyesen a Batman.) Az URL alapjn? Az sem j, hiszen az adott bank tetszleges webcmet vlaszthat magnak. Akkor mi a megolds?


A megolds az, hogy vlasztunk egy megbzhat harmadik felet, akiben a kommunikci mindkt szereplje megbzik, a szerver is s a kliens is. Ha ez a harmadik fl azt lltja, hogy az adott weboldal tnyleg annak a banknak a honlapja, akkor a felhasznl ezt elhiheti.

Ez a gyakorlatban gy trtnik, hogy az adott cg vsrol egy tartomny nevet (pl. xbank.example.com), majd a cget s a tartomnyt igazol dokumentumokkal elmegy egy ilyen megbzhat harmadik flhez, a tanstvny kiadhoz (certification authority). A tanstvny kiad a lehet legalaposabban ellenrzi a dokumentumokat, majd killt egy tanstvnyt (certificate), amely igazolja, hogy a tanstvny tulajdonosa valban az, akinek mondja magt. A cgnek ezek utn fel kell teleptenie ezt a tanstvnyt a webszerverre, s innen kezdve megy minden magtl.

A bngsz, amikor https:// kezdet URL-t lt, akkor automatikusan HTTP helyett HTTPS protokollt fog hasznlni, s a szerver 80-as portja helyett a HTTPS protokollnak megfelel 443-as portjra fog csatlakozni. Lekri a szerver tanstvnyt, s ellenrzi a benne szerepl adatokat:

1. Ellenrzi, hogy tnyleg azt a webcmet nzzk-e ppen, amire a tanstvnyt killtottk.

Nem mindegy, hogy az example.com vagy a www.example.com oldalrl van-e sz.

2. Ellenrzi, hogy a tanstvny nem jrt-e le (ltalban 1 vre szl).

3. Ellenrzi, hogy a tanstvnyt nem vontk-e vissza. Ha egy tanstvny rossz kezekbe

kerl, akkor a tanstvny kiadja visszavonhatja azt.

4. Ellenrzi, hogy a tanstvnyt olyan tanstvny kiad lltotta ki, akiben a bngsz

megbzik.

A megbzhat tanstvnykiadk listja az Internet Explorer Internet Options ablaknak

Content fln, a Certificates gombra kattintva, a felugr ablak Trusted Root Certification

Authorities oldaln tekinthet meg:


Az Import gombra kattintva lehet olyan tanstvnykiadkat hozzadni a rendszerhez,

melyeket a bngsz beptetten nem ismer.

Ha ezek kzl brmelyik nem teljesl, akkor a tanstvnyt rvnytelennek tekinti a bngsz, s figyelmeztetst fog megjelenteni:

9. bra - Figyelmeztets az Internet Explorerben rvnytelen tanstvny esetn

Az rvnytelen tanstvny azt jelenti, hogy a felhasznl nem tudhatja biztosan, hogy a webszerver valban az-e, akinek mondja magt.

A tanstvny msik felhasznlsa, hogy a benne szerepl informcik felhasznlsval a kommunikci kt szereplje titkostani tudja a forgalmat. Ha egy tanstvny nem rvnyes, attl mg a forgalom titkostsra lehet alkalmas.

A tanstvnyt egy hiteles tanstvny kiadtl kell vsrolni, ha azt szeretnnk, hogy a

bngsz megbzhatnak tekintse. Ha ennek a kltsgeit nem szeretnnk kifizetni, akkor van

lehetsg a tanstvny hzi elksztsre is, az ilyet hvjk nalrt tanstvnynak (self-

signed certificate). Ebben az esetben a fenti ellenrz lista 4. pontja nem fog teljeslni, gy a

bngsz a tanstvnyt rvnytelennek fogja tekinteni, s a felhasznl sem tudhatja

biztosan, hogy kinek a szervervel kommunikl, kivel osztja meg a bizalmas adatait.

Br a kommunikci ebben az esetben is lehet titkostott, nalrt tanstvny esetn a

rosszindulat tmad nagyon knnyen kijtszhatja a felhasznlk figyelmetlensgt, s

belehallgathat a hlzati forgalomba, ezrt nalrt tanstvny helyett mindig clszer

hiteles kiadtl szrmaz tanstvnyt vsrolni.

llapotkezels

Ahogy arrl korbban mr sz volt, a HTTP llapotmentes protokoll, ami azt jelenti, hogy az egyes krs-vlasz prok kztt nincs kapcsolat. Ez valsznleg nem is okozott klnsebb gondot a web megjelensekor, de mra mr elengedhetetlenn vlt, hogy a webruhzakban meg tudjuk tmni a kosarunkat, vagy hogy be tudjunk jelentkezni a kedvenc kzssgi oldalunkra. Azaz a webalkalmazsokban szksgess vlt a felhasznli munkamenet (angolul session) kvetse.

A megoldst Lou Montulli tallta ki a stik, azaz angolul a HTTP cookie-k formjban.

Montullitl azta sokszor megkrdeztk, hogy mirt pont a cookie nevet adta ennek a

technolginak, amire azt szokta vlaszolni, hogy nincs ebben semmi klns, a program


ltal kapott s vltozatlanul visszakldtt informcidarabkra akkoriban elterjedt elnevezs

volt a magic cookie.

A cookie-k olyan informcidarabkk, amiket az els krsre vlaszolva a szerver elkld a bngsznek, a bngsz pedig minden egyes tovbbi HTTP krsben visszakldi a szervernek. Az tkldtt informci brmi lehet, de mivel a stik mrete korltozott, ezrt az a bevett megolds, hogy a webalkalmazs szerver oldalon trolja az sszes felhasznl munkamenethez tartoz adatait, s a stiben csak egy munkamenet azonost (session ID) utazik.

10. bra - A munkamenet azonost a HTTP krsekben s vlaszokban

A gyakorlatban a cookie HTTP fejlc sorokban utazik, elszr a szerver egy Set-Cookie nev fejlc mezben lltja be a cookie rtkt:

HTTP/1.1 200 OK Set-Cookie: lsd=2EDQr; path=/; domain=.facebook.com

A kvetkez krseknl pedig a bngsz egy Cookie nev fejlc mezben visszakldi azt a szervernek:

GET http://www.facebook.com/home.php? HTTP/1.1 Cookie: lsd=2EDQr;

Fontos, hogy a bngszknek a szabvny szerint gy kell kezelnik a stiket, hogy csak azoknak a weboldalaknak kldjk vissza ket, ahonnan kaptk, gy nem lehetsges az, hogy az egyik webhelyrl kapott stink eljut egy msik webhelyhez.

Ktfle sti ltezik:

A session cookie csak a munkamenet idejre ltezik, s a bngsz memrijban

troldik. Ha a munkamenetnk vget r vagy a bngszt bezrjuk, a sti elveszik.

Az lland stit (angolul permanent vagy persistent cookie) viszont a bngsz a diszkre

menti, gy meglesz akkor is, amikor jraindtjuk a bngszt vagy akr az egsz

gpnket. Amikor egy weboldalra bejelentkezve bejelljk az Emlkezz Rm (jegyezd

meg a jelszavam) opcit, akkor tipikusan ilyen lland sti keletkezik. Az opercis

rendszerben szerencsre minden bngsznek s minden felhasznlnak nll sti tra

van, gy nem fordulhat el, hogy a mi gpnkre bejelentkezve egy msik felhasznl a mi

munkamenetnket folytatja.

11. bra - A bejelentkezs s az Emlkezz Rm opci a Facebookon


A sti egy egyszer szveges llomny, ahogy az a fenti pldbl is ltszik. nmagban nincs benne semmi veszlyes, ezrt rgtn el is oszlathatjuk azokat a tvhiteket, miszerint a stik vrusokat, felugr ablakokat, kretlen leveleket vagy reklmokat terjesztennek a cookie-k erre nem kpesek. Az viszont igaz, hogy egy sti tartalmazhat szemlyes adatot vagy egy stinek pusztn a ltezse a gpnkn utalhat arra, hogy megltogattunk egy weboldalt. Ha nem szeretnnk, hogy a sti a hlzaton tutazva illetktelen kezekbe kerljn, akkor mindenkppen hasznljunk biztonsgos HTTPS protokollt!

A stikkel kapcsolatos sszes krdsnkre vlaszt kaphatunk az Unofficial Cookie FAQ oldaln.

A HyperText Markup Language Avagy milyen nyelven rtenek a bngszk?

Miutn megfejtettk, hogyan kommuniklnak egymssal a szmtgpeink az interneten keresztl, s megrtettk a kommunikci sorn hasznlt HTTP protokoll minden rszlett, a kvetkez krds az lehet, hogy mit kell visszakldeni a webszervernek a bngsz szmra ahhoz, hogy a felhasznl szmra az eredmny egy weboldal legyen? A HTTP vlasz trzsben a webszervernek egy HyperText Markup Language (az elnevezs magyarul hiperszveges jellnyelvet jelent), azaz HTML formtum dokumentumot kell visszakldenie, ez ugyanis a bngszk nyelve.

A HTML gykerei a nyolcvanas vek vgre nylnak vissza, amikor a svjci CERN1-ben dolgoz fizikus, Tim Berners-Lee azzal a problmval szembeslt, hogy a korabeli dokumentum formtumok nem megfelelek a fizikusok ltal ellltott kutatsi eredmnyek megjelentsre. Az egyik fj pont a kpek, brk, illusztrcik s ltalnossgban a gazdag formzsi lehetsgek hinya volt, a msik pedig az, hogy a kutatsi eredmnyek ltalban egymsra plnek, kapcsoldnak egymshoz, amit az akkori fjlformtumok nem tudtak kezelni. Ezen problmk megoldsra Tim Berners-Lee kt tlettel llt el, melyek a mai napig meghatrozzk a HTML nyelvet:

1. A dokumentum ne csak egyszer szveg legyen, hanem a tartalmat hordoz rszt lssuk

el cmkkkel, melyek kiegszt informcikat (metaadatokat) adnak a szveghez.

Hasonl cl egyszerbb jellseket a nyomdatechnikban mr korbban is hasznltak

(pl. egyszeres alhzs: dlt, ketts alhzs: flkvr bet), itt a nagy jdonsg a

formalizmus s cmkekszlet megalkotsa volt, gy jtt ltre a HTML mint jellnyelv

(markup language).

2. A dokumentumok mutassanak tl nmagukon, azaz olyan hiperszvegeket (hypertext)

tartalmazzanak, amelyek brmely rszlete egy msik dokumentumra hivatkozhat. Ez az,

amit ma gy ismernk, hogy egy weboldalon rkattinthatunk hivatkozsokra (linkekre),

aminek hatsra betltdik egy msik weboldal.

E kt f irnyvonal mentn szletett meg a HTML nyelv els lersa 1991-ben, melynek ma a tovbbfejlesztett s szabvnyostott 4.01-es, hamarosan pedig 5-s verzijt hasznljuk.

A HTML nyelv elemei

A HTML nyelv jellrendszere elemekbl s attribtumokbl pl fel. Az elemekkel tudjuk felcmkzni a szveg egyes rszeit, az attribtumokkal pedig ezeknek a cmkknek a tulajdonsgait tudjuk meghatrozni.

1 A CERN, a Conseil Europenne pour la Recherche Nuclaire (magyarul Nukleris Kutatsok Eurpai Tancsa) a

rszecskefizikai kutatsok eurpai szervezete, a vilg legnagyobb rszecskefizikai laboratriuma, mely a francia-svjci hatron helyezkedik el, Genftl kiss szakra. Forrs: Wikipedia.
http://www.cookiecentral.com/faq/http://hu.wikipedia.org/wiki/CERN


Az elemek (angolul element) a szveget formailag egy kezd cmke (start tag) s egy zr cmke (end tag) kz zrjk:

szveg

Az elem elejn a kezd cmkt kacsacsrk kz kell tennnk; a zr cmkt szintn, de ott mg egy per-jelre is szksg van, hogy egyrtelmv tegyk, az az elem vge. A cmkk termszetesen nem fognak megjelenni a weboldalon, hanem csak kiegszt informcikat hordoznak, amiket a bngsz rtelmez.

A cmke viselkedst attribtumokkal tudjuk meghatrozni, melyekbl tbb is kapcsoldhat egy elemhez:

szveg

Az attribtumokat s rtkeiket a kezd cmknl adhatjuk meg, mghozz gy, hogy az rtket idzjelek ("rtk") vagy aposztrfok ('rtk') kz tesszk.

A legtbb elem a fenti formban egy szveg formjt vagy szerept (pl. cmsor) hatrozza meg, de vannak ms jelleg elemek is (pl. sortrs, kp hivatkozs). Ezrt formailag lteznek n. nbezr cmkk (self-closing tag), amelyeknek ilyen egyszer a formjuk:

Termszetesen ehhez is kapcsoldhatnak attribtumok:

Van lehetsg arra, hogy a HTML kdba megjegyzseket (comment) tegynk annak rdekben, hogy ksbb emlkezznk arra, mit mirt csinltunk, vagy hogy ppen a weboldal melyik rsznek a kdjt ltjuk:

Termszetesen ezek a megjegyzsek sem jelennek meg a bngszben, de brki szmra lthatak, aki a bngszben kivlasztja a View Source menpontot, ezrt bizalmas informcikat mg vletlenl se rjunk ide.

J TUDNI: A HTML nyelv eredeti szabvnya a fentieknl lazbb szintaktikt is megenged.

Pldul bizonyos esetekben a zr cmke elhagyhat (pl. j bekezds kezdete egyben az elz

vgt is jelenti), az attribtumok rtkeit nem ktelez idzjelek kz tenni s az nbezr

elemeket sem ktelez jellni. Ezek a lazn formzott HTML dokumentumok azonban sok

bosszsgot okoznak a HTML szerkeszt programoknak s a HTML kdot rtelmez

bngszknek is, ezrt ma mr inkbb XHTML kdot szoks rni, amely az XML (eXtensible

Markup Language) nyelv szigor formai szablyait kveti. A fent ismertetett szintaktika

megfelel ezeknek az elrsoknak.

Fontosabb HTML elemek

Miutn ttekintettk az elemek, cmkk s attribtumok formjt, ismerkedjnk meg a legfontosabb HTML elemek jelentsvel s hasznlatval! Fontos ltni, hogy a HTML nyelvben az elemek nevei rgztettek, nem tallhatunk ki tallomra jabb elemeket, azokat kell hasznlnunk, amik a szabvnyban megtallhatak.

A HTML dokumentum struktrja

A HTML dokumentum els sora az n. Document Type Definition, vagyis a DTD. A DTD hatrozza meg a bngsz szmra, hogy a dokumentum pontosan milyen szabvnyt kvet, gy a bngsz


pontosan tudni fogja, hogy a szabvnynak abban a verzijban milyen HTML elemek megengedettek, s melyiknek mi a jelentse.

A HTML 4.01 hromfle DTD-t ismer:

1. HTML 4.01 Strict: nem engedlyezi formz elemek hasznlatt, azok helyett mindenkpp Cascading Style Sheets stluslapok segtsgvel kell a formzst elvgezni. Ez a legelterjedtebb DTD:

2. HTML 4.01 Transitional: engedlyezi nhny korbbi, a szabvnybl ksbb kikerlt elem hasznlatt is:

3. HTML 4.01 Frameset: a fentieken kvl keretek (frame-ek) hasznlatt is tmogatja:

Hasonlan ltezik hromfle (strict, transitional, frameset) DOCTYPE deklarci az XHTML 1.0 szabvnyhoz is, az XHTML 1.1 verzihoz azonban csak ez az egy:

A kzelg HTML5 verziban (ami gyakorlatilag egyben az XHTML5 verzi is) szerencsre lnyegesen egyszersdik ez a sor:

Fontos, hogy a HTML fjlunk elejn szerepeljen ez a sor, klnben elfordulhat, hogy a bngsz nem gy jelenti meg az oldalt, ahogy szeretnnk.

A !DOCTYPE utn kvetkezik az oldal n. gykr eleme (root element), a html elem, ami tartalmazza a dokumentum fejlct (head) s trzst (body):

A fejlcben kap helyet a dokumentum cme, amit a bngsz az ablak cmsorban megjelent (title elem) s tovbbi ler informcik (meta elem), amik viszont nem jelennek meg az oldalon, pldul:

Bevezets az internet programozsba

Ennyi tudssal akr el is kszthetjk az els HTML oldalunkat! Ksztsnk egy j szvegfjlt, nyissuk meg a Jegyzettmbbel (Notepad), s rjuk ezt bele:


Els oldalam Szia Vilg!

Mentsk el a fjlt .htm kiterjesztssel, majd kattintsunk r dupln! Meg fog nylni az elsdleges bngsznk, s gy fog megjelenni az oldalunk:

12. bra - Az els HTML oldalunk

Lthat, hogy a dokumentum trzse (body elem) tartalmazza azokat a HTML elemeket, amelyek alapjn a bngsz megjelenti az oldal tartalmt. A kvetkez fejezetekben ezekkel az elemekkel foglalkozunk.

A szveg struktrja

Ha egy HTML dokumentumban rendezni, formzni szeretnnk a szveget, akkor ezt kizrlag HTML elemekkel tehetjk meg. Azaz hiba tesznk sortrseket a HTML kdba, vagy hiba tesznk egyms utn sok szkzt, a bngszben csak egyetlen szkz fog megjelenni helyette. Pldul trhatjuk az elz pldnk body elemnek kdjt gy:

els msodik harmadik negyedik tdik hatodik

De hiba is erlkdnk a sok szkzzel, sortrssel s tabultorral, a bngszben gy fog megjelenni, mintha csak egyetlen szkzt rtunk volna:


13. bra - A HTML forrskd trdelse nem jelenik meg az oldalon

Ha msknt szeretnnk, erre szolgl cmkket kell hasznlnunk.

Egy hosszabb szveget a p (paragraph) elem segtsgvel tagolhatunk bekezdsekre:

Els bekezds

Msodik bekezds

Ha egy bekezdsen bell j sort szeretnnk kezdeni, akkor azt a br (break) elemmel tehetjk meg. A br elem nllan ll, nincs sem zr cmkje, sem pedig attribtumai, mindssze ennyi:

A bekezdsek kz cmsorokat tehetnk, mghozz hat mretben, melyeket a h1..h6 (heading) elemekkel jellhetnk:

Fcm Alcm

Rakjuk ssze ezeket egyetlen pldba:

Bekezdsek, cmsorok Ma 2010. oktber 27. van Az v 300. napja a Gergely-naptr szerint. vfordulk

518 ve Kolumbusz Kristf felfedezte Kubt.
(Hivatalosan Kubai Kztrsasg, egykori spanyol gyarmat,

ma a legnpesebb karibi orszg.)

85 ve Fred Waller feltallta a vzist.

Mindez gy jelenik meg a bngszben:


14. bra - Cmsorok s bekezdsek az oldalon

rdemes megfigyelni, hogy a bngsz nagyobb betkkel jelenti meg a cmsorokat, a bekezdsek kztt automatikusan hagy tvolsgot, st a hossz sorok trdelsrl is gondoskodik. Minden HTML elemre igaz, hogy van egy alaprtelmezett megjelensi mdja, amit termszetesen megvltoztathatunk, ha mi msknt szeretnnk. Errl rszletesebben a Cascading Style Sheets c. fejezetben lesz sz.

Ha listkra van szksgnk, akkor ktfle elemet hasznlhatunk attl fggen, hogy szmozott vagy csak egyszer felsorolsos listt szeretnnk megjelenteni az oldalon. A szmozott listk kerett ol (ordered list) elemek jelentik, amin bell az egyes lista tteleket li (list item) cmkk jelzik:

Els Msodik Harmadik

Ha nincs szksgnk a sorszmokra, akkor az ul (unordered list) elemmel egyszer felsorolsos listt kszthetnk:

Piros Fehr Zld

Igny szerint a felsorolsokat s szmozott listkat tbb szint mlyen akr egymsba is gyazhatjuk, a bngsz automatikusan gondoskodni fog a megfelel sorszm vagy lista ikon megjelentsrl. Ez pldul egy tbbszint lista:

Magyarul


Piros rzsaszn piros vrs bord Fehr Zld Angolul Red White Green

Amit a bngsz gy mutat meg:

15. bra - Tbbszint lista, automatikus szmozssal, ikonokkal, behzssal

A szveg tagolsra hasznlhat mg a hr (horizontal rule) elem is, amely egy vzszintes vonallal vlasztja el a felette s alatta lv tartalmat. A br elemhez hasonlan a hr is nbezr:

A hasznlata nagyon egyszer:

Fels tartalom


Als tartalom

A bngsz tudja a dolgt:

16. bra - gy jelenik meg a elem az oldalon

Hivatkozsok

Az egyes weboldalaink kztt a kapcsolatot hiperhivatkozsokkal (hyperlink) teremthetjk meg, amit az a (anchor=horgony) elem valst meg:

BME honlap

A nyit s a zr cmke kztt szerepel az a szveg, ami meg fog jelenni a weboldalon, a href attribtumban pedig azt a webcmet kell megadnunk, amire ezzel a hivatkozssal ugrani lehet. A title attribtumba olyan segtsg rhat, amely megjelenik a bngszben, amikor a felhasznl a hivatkozs fl viszi az egeret (n. tooltip). A target attribtumban azt adhatjuk meg, hogy hova tltdjn be a hivatkozott weboldal. Ha az rtke _blank, akkor a bngsz j ablakban fogja megnyitni az oldalt.

17. bra - A fenti hivatkozs kd gy jelenik meg az oldalon

Szintn az a elem hasznlhat oldalon belli ugrsok, pldul tartalomjegyzk vagy az oldal tetejre mutat hivatkozs ltrehozsra. Ehhez meg kell jellnnk a hivatkozni kvnt rszt a name attribtummal:


Majd az erre mutat linket be kell szrnunk a kvnt helyre:

Ugrs az oldal tetejre

Az a elemen bell tetszleges elem llhat, pldul ha egy kpet szeretnnk kattinthatv tenni, akkor a kp megjelentsre szolgl img elemet tehetjk a link belsejbe:

Szemantikai elemek

Az eddig bemutatott elemek tbbnyire a szveg megjelensn vltoztattak. A tovbbiakban lssunk pr olyan HTML elemet, amelyek jelentst (szemantikt) is trstanak a szveghez! Lttunk mr erre pldt a cmsorok esetn, hiszen a elem azonkvl, hogy megnagyobbtja a szveget mg azt is jelenti, hogy az a pr sz az oldal cme.

Hasonlan az s a elem nemcsak dlten s flkvren jelenti meg a tartalmazott szveget, hanem egyben azt is jelenti, hogy ez hangslyozott illetve kiemelt tartalom:

A fogalmakhoz pldul hasznlhatjuk az em elemet, a feltn szvegekhez pedig a strong elemet.

18. bra - Kiemelsek a szvegben

A elem nemcsak hogy alaprtelmezs szerint sok bngszben dlten jelenti meg a tartalmazott szveget, de azt is jelenti, hogy egy hivatkozott forrsrl van sz:

Douglas Adams Galaxis tikalauz stopposoknak c. mvben vlaszt kaphatunk Az let, A Vilgmindensg Meg Minden nagy krdsre.

19. bra - Forrs megjellse


A kls forrsbl tvett rvidebb idzeteket a elemmel, a hosszabbakat pedig a elemmel jelezhetjk (ez utbbiban tbb bekezds is lehet,

elemekkel jellve), mindkt esetben az opcionlis cite attribtummal hivatkozhatunk a forrs URL-jre:

Nem vagyok nagy iv. Szilveszterkor kt martini utn megprbltam elrabolni s Kubba trteni egy liftet.

20. bra - A szveg kr automatikusan odakerltek az idzjelek

A rvidtsekhez s mozaikszavakhoz az s elemeket hasznlhatjuk. Ezeknek az elemeknek a trzse mindkt esetben a rvid verzi, a kifejtst a title attribtumban adhatjuk meg. A title attribtumra ltalban az jellemz, hogy a bngszk egy felugr tipp ablakban jelentik meg a tartalmt, gy ha a rvidts fl viszi a felhasznl az egeret, akkor rgtn ltja a rvidts feloldst is:

NASA

Ezek a szemantikai HTML elemek (s a tbbi, amit itt nem tudtunk felsorolni) nagyban hozzjrulnak ahhoz, hogy a weboldalaink ne csak az emberi szem szmra szpen megjelen szvegek legyenek, hanem a szveg egyes rszeinek szerepe a feldolgoz programok szmra is egyrtelm legyen. Pldul a vakok s gyengnltk ltal hasznlt kpernyolvas programok szban jelzik, ha cmet, idzetet vagy rvidtst tallnak.

Tblzatok

A HTML nyelvben egy egsz sor elem szolgl arra, hogy tblzatokat tudjunk megjelenteni az oldalainkon. Egy hrom soros s kt oszlopos tblzatot gy kszthetnk el:

Hnap sszeg sszesen: 600


Janur 100 Februr 200 Mrcius 300

A tblzatot a elem jelzi, melyben az egyes sorokat (table row), azon bell az egyes cellkat pedig (table data) elemek definiljk. A bngsz itt is ad egy alaprtelmezett stlust az egyes elemeknek:

21. bra - Egyszer tblzat

Ha tbb cellt szeretnnk sszevonni vzszintesen vagy fgglegesen, akkor azt a elem colspan s rowspan attribtumaival tehetjk meg, ahol rtkknt azt kell megadnunk, hogy hny cellt kvnunk sszevonni:

els msodik sszevonva

A cellk kztt a (table header) elemekkel klnbztethetjk meg a fejlc cellkat. Ha preczen jellni szeretnnk, hogy sor vagy oszlop fejlcrl van sz, akkor a scope="col" vagy scope="column" attribtumot kell hasznlnunk.


Ha nagyobb tblzatrl van sz, akkor azon bell clszer jeleznnk a fejlcet, a lblcet s a tblzat trzst, ami pldul az oldal kinyomtatsakor lehet hasznos info

honlapépités a xxi. században v1.1

Documents