web programozas jegyzet 0

of 243 /243
Nagy Gusztáv Nagy Gusztáv Web programozás I. 0.7. verzió 0.7. verzió 2008. 2008. szeptember szeptember

Author: ferenc-dolesch

Post on 04-Jul-2015

613 views

Category:

Documents


9 download

Embed Size (px)

TRANSCRIPT

Nagy Gusztv

Web programozs I.

0.7. verzi

2008. szeptember

2. oldal

Web programozs I. (0.7. verzi)

Jogi nyilatkozat

Nevezd meg! - Ne add el! 2.5 Magyarorszg

A kvetkezket teheted a mvel:szabadon msolhatod, terjesztheted, bemutathatod s eladhatod a mvet

szrmazkos mveket (feldolgozsokat) hozhatsz ltre

Az albbi felttelekkel:Nevezd meg!. A szerz vagy a jogosult ltal meghatrozott mdon fel kell tntetned a mhz kapcsold informcikat (pl. a szerz nevt vagy lnevt, a M cmt). Ne add el! Ezt a mvet nem hasznlhatod fel kereskedelmi clokra. Brmilyen felhasznls vagy terjeszts esetn egyrtelmen jelezned kell msok fel ezen m licencfeltteleit. A szerzi jogok tulajdonosnak rsos engedlyvel brmelyik fenti feltteltl eltrhetsz.

Ez a Legal Code (Jogi vltozat, vagyis a teljes licenc) szvegnek kzrthet nyelven megfogalmazott kivonata. Ez a kivonat a http://creativecommons.org/licenses/by-nc/2.5/hu/ oldalon is olvashat. A teljes licensz a http://creativecommons.org/licenses/by-nc/2.5/hu/legalcode oldalon rhet el. E jegyzet hivatalos honlapjrl (http://nagygusztav.hu) tlthet le a mindenkori legfrissebb verzi.

3. oldal

Bevezets

FelhasznlsEzzel a jegyzettel arra vllalkozok, hogy a Kecskemti Fiskola GAMF Karn tanul mszaki informatikus hallgatk kezbe olyan rsos anyagot adjak, amely az eladsok s gyakorlatok mellett tovbbi segtsget ad a Web kliens s szerver oldali nyelvei, alapvetbb technolgii alapszint megismersre. A jegyzet hasznlathoz nem nlklzhetetlen, de ersen javasolt az eladsok ltogatsa. A jegyzet alapveten a tanrk menethez kapcsold lineris feldolgozsra kszlt, de a fejezetek egy rsze nem pt a kzvetlen megelz fejezetekre. Az egyes fejezetek tananyagnak elsajttshoz az elmleti rsz tolvassa utn az ellenrz krdsek alapos tgondolst, valamint a gyakorl feladatok megoldsa javasolt. E nlkl a tantrgy teljestse a hallgatk tbbsge szmra nem lesz eredmnyes. A jegyzet felttelezi az alapvet programozsi s hlzati alapismeretek megltt. Ennek hinyban az anyag elsajttsra tbb idt kell fordtani.

0.7. verziA jegyzet jelenlegi verzija szoks szerint nem kszlt el a flvkezdsre olyan precizitssal1, mint szerettem volna. Ezrt a flv sorn kisebb kiegsztsek, mdostsok, a kvetkez flv kezdetekor pedig jabb verzi lesz vrhat.

KsznetA jegyzet elksztshez elssorban a W3Schools2 oktatanyagait hasznltam fel. Az anyagok fordtsban rsztvev hallgatkat szintn ksznet illeti. Vgl szeretnk ksznetet mondani a Weblabor3 szakmai kzssgnek, akiktl a legtbbet tanultam tbbek kztt szemlletmdban. Kecskemt, 2008. szeptember a szerz

1 2 3

Pldul az brk egysges formzsa s szmozsa mg vrat magra http://www.w3schools.com/ http://weblabor.hu/

4. oldal

Web programozs I. (0.7. verzi)

Tartalomjegyzk1. Fejlesztkrnyezet kialaktsa..........................................................................................8 1.1. Szerver opercis rendszer.........................................................................................8 1.2. Szerveralkalmazsok..................................................................................................9 1.2.1 XAMPP integrlt telept csomag.........................................................................9 1.2.2 A szerverek nll teleptse...............................................................................12 1.3. Fejleszteszkzk......................................................................................................15 1.3.1 Context.................................................................................................................15 1.3.2 Notepad++...........................................................................................................16 1.3.3 Komodo Edit........................................................................................................17 1.4. Grafikus programok..................................................................................................18 1.4.1 Paint.NET.............................................................................................................19 2. Web alapismeretek.........................................................................................................20 2.1. Alapfogalmak............................................................................................................20 2.1.1 Webbngsz.......................................................................................................20 2.1.2 Webszerver..........................................................................................................21 2.1.3 Webtrhely..........................................................................................................22 2.1.4 HTTP protokoll...................................................................................................22 2.1.5 FTP protokoll.......................................................................................................25 2.1.6 Webcm................................................................................................................25 2.2. Webdizjn.................................................................................................................26 2.2.1 Nyl vagy fix elrendezs....................................................................................27 2.2.2 Flash....................................................................................................................27 2.2.3 Keretek................................................................................................................27 2.2.4 CSS vagy tblzatok............................................................................................28 2.2.5 A vakbart honlap...........................................................................................29 2.2.6 A szp honlap s a mkd honlap...................................................................29 2.2.7 A leggyakoribb webdizjnhibk.........................................................................29 2.3. A HTML szabvnyok................................................................................................30 2.3.1 A World Wide Web Consortium (W3C).............................................................31 2.3.2 Validtorok..........................................................................................................31 2.4. Ellenrz krdsek....................................................................................................31 3. HTML..............................................................................................................................32 3.1. Bevezets...................................................................................................................32 3.2. Tagok........................................................................................................................34 3.3. Alapvet HTML tagok..............................................................................................35 3.4. Hogy nzzk meg egy oldal HTML kdjt?.............................................................39 3.5. Formzs...................................................................................................................41 3.6. Karakter entitsok....................................................................................................45 3.7. Linkek.......................................................................................................................46 3.8. Keretek.....................................................................................................................48 3.9. Tblzatok.................................................................................................................51 3.10. Listk.......................................................................................................................55 3.11. rlapok....................................................................................................................59 3.12. Kpek.......................................................................................................................64 3.13. Oldal httere............................................................................................................67 3.14. Sznek......................................................................................................................68 3.15. Szabvnyossg........................................................................................................68 3.16. Stlusok....................................................................................................................69

5. oldal 3.17. Fejrsz......................................................................................................................71 3.18. Szkriptek..................................................................................................................71 3.19. ltalnos tulajdonsgok.........................................................................................73 3.20. Esemny tulajdonsgok.........................................................................................73 3.21. URL-kdols...........................................................................................................75 3.22. Szemantikus HTML................................................................................................75 3.23. Ellenrz krdsek.................................................................................................75 3.24. Feladatok................................................................................................................79 3.25. Tovbbi forrsok.....................................................................................................79 4. XML.................................................................................................................................80 4.1. Mire hasznljuk az XML-t?......................................................................................80 4.2. XML szintaxis...........................................................................................................81 5. XHTML............................................................................................................................83 5.1. XHTML a gyakorlathoz kpest.................................................................................83 5.2. Dokumentumtpus-deklarci.................................................................................84 5.2.1 XHTML 1.0 DTD-k.............................................................................................85 5.2.2 XHTML 1.1 DTD.................................................................................................85 5.3. Visszafel kompatibilits..........................................................................................85 5.4. Feladat......................................................................................................................86 5.5. Tovbbi forrsok.......................................................................................................86 6. CSS...................................................................................................................................87 6.1. Bevezets...................................................................................................................87 6.2. A CSS nyelvtana.......................................................................................................89 6.3. A background tulajdonsgok....................................................................................91 6.3.1 Httrszn............................................................................................................91 6.3.2 Httrkp............................................................................................................92 6.4. Szvegek megjelentse............................................................................................93 6.5. Betk formzsa.......................................................................................................94 6.6. Szeglyek...................................................................................................................95 6.7. Trkzk a szeglyen bell s kvl..........................................................................97 6.8. Listk........................................................................................................................97 6.9. Mretek.....................................................................................................................99 6.10. Megjelents............................................................................................................99 6.10.1 A lebegtets.....................................................................................................100 6.10.2 Pozicionlsi smk........................................................................................105 6.10.3 Lthatsg.......................................................................................................107 6.10.4 Z-index............................................................................................................107 6.11. Ltszlagos osztlyok............................................................................................107 6.11.1 Linkek viselkedse...........................................................................................107 6.11.2 Els gyermek...................................................................................................108 6.11.3 Els bet s els sor........................................................................................108 6.12. Mdia tpusok.......................................................................................................108 6.13. Validtor................................................................................................................109 6.14. Esettanulmny.......................................................................................................110 6.14.1 Happy Holidays...............................................................................................110 6.15. Ellenrz krdsek................................................................................................114 6.16. Feladatok................................................................................................................117 6.17. Tovbbi forrsok....................................................................................................117 7. JavaScript ......................................................................................................................118 7.1. Bevezets a JavaScript nyelvbe...............................................................................118 7.1.1 Vltozk..............................................................................................................119 7.1.2 Elgazsok.........................................................................................................120

6. oldal

Web programozs I. (0.7. verzi)

7.1.3 Opertorok.........................................................................................................121 7.1.4 Dialgusablakok................................................................................................124 7.1.5 Fggvnyek........................................................................................................127 7.1.6 Ciklusok..............................................................................................................127 7.1.7 Esemnykezels.................................................................................................129 7.1.8 Kivtelkezels.....................................................................................................131 7.2. Objektumorientlt programozs............................................................................133 7.2.1 Fontosabb objektumok rviden........................................................................134 7.3. HTML DOM............................................................................................................135 7.3.1 getElementById.................................................................................................136 7.3.2 A document objektum.......................................................................................137 7.3.3 Az Event objektum............................................................................................137 7.4. Diszkrt JavaScript.................................................................................................137 7.4.1 Elugr ablak plda...........................................................................................138 7.4.2 E-mail cm elrejtse..........................................................................................140 7.5. Gyakran hasznlt fggvnyek.................................................................................140 7.5.1 Stik kezelse.....................................................................................................141 7.5.2 getElementsByClass..........................................................................................143 7.5.3 addEvent............................................................................................................143 7.5.4 addLoadEvent...................................................................................................144 7.6. Felhasznli lmny...............................................................................................144 7.6.1 Kliens oldali rlap ellenrzs............................................................................144 7.6.2 Hossz listk bngszse helyett......................................................................146 7.7. Elavult technikk....................................................................................................150 7.8. Tovbbi forrsok.....................................................................................................150 8. PHP.................................................................................................................................151 8.1. Alapok......................................................................................................................151 8.1.1 Szintaxis..............................................................................................................151 8.1.2 Vltozk.............................................................................................................153 8.1.3 Sztringek hasznlata.........................................................................................154 8.1.4 Opertorok.........................................................................................................155 8.1.5 Elgazsok..........................................................................................................157 8.1.6 A switch szerkezet.............................................................................................159 8.1.7 Tmbk..............................................................................................................160 8.1.8 Ciklusok.............................................................................................................162 8.1.9 Fggvnyek........................................................................................................165 8.1.10 rlapok s felhasznli adatbevitel................................................................167 8.1.11 A $_GET tmb.................................................................................................168 8.1.12 A $_POST tmb...............................................................................................169 8.2. Halad tmk..........................................................................................................171 8.2.1 Dtumok kezelse..............................................................................................171 8.2.2 Az include s trsai...........................................................................................172 8.2.3 Fjlkezels.........................................................................................................174 8.2.4 Fjl feltltse.....................................................................................................175 8.2.5 Stik kezelse....................................................................................................178 8.2.6 Munkamenet-kezels........................................................................................179 8.2.7 Levlklds........................................................................................................181 8.2.8 PHP hibakezels...............................................................................................183 8.2.9 Kivtelkezels...................................................................................................188 8.3. Adatbzis-kapcsolat kezelse PHP-ben.................................................................193 8.3.1 MySQL alapok...................................................................................................193 8.3.2 Kapcsolds egy MySQL adatbzishoz ...........................................................194

7. oldal 8.3.3 Adatbzisok s tblk ltrehozsa....................................................................195 8.3.4 Adatok bevitele adatbzisba.............................................................................198 8.3.5 Lekrdezs.........................................................................................................199 8.3.6 A WHERE zradk...........................................................................................201 8.3.7 Az ORDER BY kulcssz....................................................................................202 8.3.8 Adatok mdostsa...........................................................................................203 8.3.9 Adatok trlse az adatbzisbl........................................................................203 8.3.10 ODBC kapcsolat ltestse.............................................................................204 8.4. XML kezels...........................................................................................................206 8.4.1 Expat XML elemez.........................................................................................206 8.4.2 XML DOM........................................................................................................206 8.4.3 SimpleXML......................................................................................................208 8.5. Esettanulmnyok...................................................................................................209 8.5.1 Belptet-rendszer...........................................................................................209 8.5.2 Knyvtri klcsnz rendszer..........................................................................215 8.6. Tovbbi forrsok.....................................................................................................215 8.7. Feladat.....................................................................................................................216 9. Tervezsi mintk............................................................................................................217 9.1. Front Controller......................................................................................................217 9.2. Strategy...................................................................................................................221 9.3. Data Access Object.................................................................................................224 9.4. MVC........................................................................................................................227 9.4.1 Nem objektum-orientlt megvalsts............................................................228 9.4.2 Objektum-orientlt megvalsts....................................................................229 9.5. Tovbbi forrsok....................................................................................................230 10. Sablonrendszerek........................................................................................................231 10.1. Smarty....................................................................................................................231 10.1.1 Smarty alapok..................................................................................................232 10.1.2 Vltoz mdostk ..........................................................................................234 10.1.3 Vezrlsi szerkezetek.......................................................................................235 10.1.4 Gyorstrazs....................................................................................................239 10.2. A PHP, mint sablonnyelv.....................................................................................240 10.2.1 Sablon osztly.................................................................................................240 10.2.2 Blogbejegyzs..................................................................................................241

8. oldal

Web programozs I. (0.7. verzi)

1. Fejlesztkrnyezet kialaktsaMieltt a web nyelveinek, technikinak rszleteiben elvesznnk, rdemes egy bevezet fejezetet szentelni a hasznos (s tbbnyire szksges) elismeretek ttekintsnek. ltalnos esetben a szerver krnyezet kialaktsa a rendszergazda feladatkrhez tartozik, mgis fontos, hogy alapszinten tlssuk a feladatokat, lehetsgeket.

1.1.Linux

Szerver opercis rendszer

Az elterjedtebb, s nem kimondottan asztali (desktop) hasznlatra sznt Linux4 disztribcik teleptsvel alapbl egy mkd web-, s adatbzis szervert kapunk. Akr rgebbi, ms felhasznlsok szmra rtktelen vasra is telepthetnk Linuxot, egy kisebb forgalm honlapot tkletesen kpes kiszolglni. A nagy nev disztribcik friss verzii a mai cscsgpek meghajtsra s cscs ignyek kiszolglsra alkalmas, szintn knnyen telepthet lehetsget nyjtanak a rendszergazdknak. nll szerver zemeltetse nlkl, web-hosting szolgltats 5 ignybe vtelvel is tbbnyire Linux alap szerverekkel tallkozhatunk.

BSDKevsb kzismert, de egyes rendszergazdk krben stabilitsa miatt nagy npszersgnek rvend Unix6 opercis rendszerek. Az alapvet vltozatok szerver feladatokra optimalizltak, gy nagyszeren alkalmasak a webes krsek kiszolglshoz.

WindowsBr les webes krnyezetben nem jelents a rszesedse, azrt elfordul az alkalmazsa. A tanuls szakaszban azonban sokszor a legkzenfekvbb megolds az egyetlen (tbbnyire Windows opercis rendszerrel mkd) szmtgpnket szerverr alaktani. A fejezet tovbbi rszben ezzel a tmval fogunk foglalkozni.Megjegyzs: Ha a fejlesztshez Windows opercis rendszert alkalmazunk, akkor rdemes nhny technikai dologra figyelni. Elszr is az llomnynevekben a Windows nem tesz klnbsget kis-, s nagybet kztt, ezrt ha pl. HTML-ben vagy CSS-ben nem vagyunk kvetkezetesek, akkor Windows alatt mg mkdni fog az oldal, de ha a ksz munkt ms opercis rendszert futtat gpre kell tvinni, akkor nagy bajban lesznk. Javasolhat, hogy webes fjl esetn nagybet soha ne szerepeljen a fjlnvben. A Total Commander7 az ilyen jelleg hibk elkerlse rdekben lehetv teszi az FTP-ver tvitt llomnyaink kisbetstst is. Hasonl okok miatt nem clszer az llomnynevekben kezetes betket vagy egyb specilis karaktereket alkalmazni.4 5 6 7

http://www.linux.hu/ http://tarhely.lap.hu/ http://www.bsd.hu/

http://www.totalcommander.hu/

1.Fejlesztkrnyezet kialaktsa

9. oldal

Vgl szintn fontos, hogy a knyvtrnevek megadsnl a \ helyett mindig a / jelet hasznljuk, s soha ne adjunk meg Windows alatt rvnyes teljes elrsi utat, pl. .

1.2. Szerveralkalmazsok1.2.1 XAMPP integrlt telept csomag

Mivel a szerver alkalmazsok teleptse nem mindig egyszer feladat, prblkozhatunk elre csomagolt, s minden szksges alkalmazst telept s bekonfigurl programokkal is. Ezek kzl csak egyet nznk meg kzelebbrl, a tbbi alkalmazsa hasonl. A szolgltatsok krben lehetnek jelentsebb eltrsek is. A telept-csomagok htrnya, hogy br tbbnyire mkdnek, egy esetleges hiba elllsa esetn a hiba megszntetse elgg bajos lehet, mivel kevsb tudunk a csomag mkdsbe beleltni. A szerz ltal leginkbb ajnlott integrlt tepept csomag az XAMPP8. Az XAMP for Windows 1.6.5 vltozata9 a kvetkez szoftvereket telepti s konfigurlja: Apache HTTPD 2.2.6 + Openssl 0.9.8g MySQL 5.0.51 PHP 5.2.5 PHP 4.4.7 phpMyAdmin 2.11.3 FileZilla FTP Server 0.9.24 Mercury Mail Transport System 4.52

A letlttt teleptprogram lnyegben a szoksos krdseket tesz fel, legfontosabb a telepts helye:

8 9

http://www.apachefriends.org/ http://www.apachefriends.org/en/xampp-windows.html

10. oldal

Web programozs I. (0.7. verzi)

1.1. bra: Az XAMPP szoksos teleptse A telepts vgezhet parancssorbl is a setup-xampp.bat parancsllomny futtatsval:

1.2. bra: Az XAMPP parancssori teleptse A telepts utn a Start menbl s parancssorbl is vezrelhetjk az alkalmazsokat, de legegyszerbb az XAMPP Control Panel alkalmazsa:

1.Fejlesztkrnyezet kialaktsa

11. oldal

1.3. bra: XAMPP Control Panel A telepts utn a felteleplt rendszer kiprblsa s a jelszavak megadsa clszer a Security oldalon:

1.4. bra: Az XAMPP konfigurlsa Ha az XAMPP, vagy ms hasonl komplex programcsomag alkalmazsa mellett dntnk, akkor a fejezet htralev rszben bemutatott nll alkalmazsteleptseket mr nem kell elvgeznnk, a rendszernk ksz a webfejleszts tanulsra.

12. oldal

Web programozs I. (0.7. verzi)

1.2.2

A szerverek nll teleptse

Ha a szksges szerver alkalmazsokat kln-kln szeretnnk megtenni, akkor a kvetkez sorrendben rdemes azokat megtenni.10

Az Apache teleptseAz Apache webszerver letltsi oldalrl11 tltsk le a megfelel telept llomnyt. A telept varzsl ablakai kzl a kvetkezket rdemes kiemelni:

1.5. bra: Apache telept Sajt gpre telepts esetn ktszer localhost megadsa javasolt, az e-mail cmnek ebben az esetben nincs jelentsge. rdemes szolgltatsknt (service) telepteni a szervert, ugyanis ellenkez esetben csak manulisan lehet indtani, s egy konzol ablak llandan a tlcnkon fog cscslni, stb. Termszetesen szolgltatsknt teleptve is van lehetsg a szerver manulis menedzselsre, teht ettl mg nem kell a szervernek llandan futnia. Telepts utn a gp biztonsgi belltsait, szoftvereit (elssorban a tzfalat) valsznleg konfigurlni kell a sikeres hasznlat rdekben. A kiprbls a bngszbe bert localhost cmmel trtnhet. Sikeres telepts esetn hasonlt kell ltnunk:

10

Tovbbi forrsok: http://weblabor.hu/cikkek/apachephptelepites, http://tanarurkerem.hu/node/15 (vide)11

http://httpd.apache.org/download.cgi

1.Fejlesztkrnyezet kialaktsa

13. oldal

1.6. bra: Sikeres Apache telepts utn Az ra mellett megjelenik az Apache Monitor:

1.7. bra: Apache Monitor A Monitor ikonnal egyszeren tudjuk indtani, lelltani, vezrelni a szervert. A kpen lthat zld hromszg (mint a szoksos Play gomb) jelzi a szerver futst is. A konfigurlssal kapcsolatban meg kell mg emlteni a httpd.conf llomnyt, amelyben a szerver konfigurcija tallhat. Az alapkonfigurci kezdetben tkletesen megfelel, esetleg a DocumentRoot belltsa lehet szksges, ha mshova szeretnnk a webre sznt llomnyainkat helyezni.Megjegyzs: A konfigurcis llomnyban az opercis rendszertl fggetlenl mindig a / jelet kell hasznlni elrsi utak megadshoz. Megjegyzs: A konfigurcis llomnyt a szerver csak az indulsakor veszi figyelembe, gy annak vltozsa esetn a szervert jra kell indtani, pl. az Apache Monitor segdprogrammal.

A PHP teleptseA PHP teleptse12 is a kvnt teleptkszlet letltsvel kezddik. A letltsi oldalon13 vlaszthatunk, hogy a telept varzslt (installer) vesszk ignybe, vagy pedig a kzi teleptst vlasztjuk (zip package). Varzsl hasznlata esetn kicsit kevesebb dolgunk lesz, ezrt taln ezt rdemes vlasztani. A teleptsi folyamat sorn tbbnyire az alaprtelmezett belltsok elfogadsa ele12

Tovbbi forrsok: http://weblabor.hu/cikkek/apachephptelepites, http://hu.php.net/manual/hu/install.windows.php13

http://www.php.net/downloads.php

14. oldal

Web programozs I. (0.7. verzi)

gend. Arra rdemes figyelni, hogy Standard helyett Advanced teleptst vlasszunk, hogy legyen lehetsgnk nhny bellts megadsra. Az emltsre rdemes krdsek kz tartozik a hiba megjelents (error reporting) szintje, ahol a tanuls idejre mindenkppen a legtbb tmogatst nyjt alaprtelmezett belltst rdemes vlasztani. Kivlaszthatjuk mg, hogy milyen webszervert hasznlunk, s mi legyen az alaprtelmezett kiterjesztse a PHP llomnyainknak. Itt is javasolt az alaprtelmezett .php elfogadsa. A feltett krdsek alapjn a php.ini konfigurcis llomny is elkszl.

Apache konfigurci ismtRossz hr, hogy az Apache mg nem tud a PHP-nkrl, ezrt mg vissza kell nylnunk a httpd.conf llomnyhoz. Ajnlott modulknt14 telepteni a PHP-t. Ehhez elszr is a megfelel dll llomny hasznlatt el kell rnunk (az elrsi utakat a PHP teleptse alapjn kell megadni):LoadModule php5_module "c:/php/php5apache2.dll"

A php kiterjesztssel rendelkez llomnyokat a PHP rtelmeznek t kell adni, s csak annak kimenett visszaadni a felhasznlnak. Ezt a kvetkez sorral tudjuk elrni:AddType application/x-httpd-php .php

Szksges a php.ini helyt is megadnunk:PHPIniDir "C:/php"

Vgl a DirectoryIndex felsorolsba rdemes els helyre tenni az index.php nevet, hogy ha az elrsi t nem tartalmaz llomnynevet, akkor az index.php-t prblja az Apache betlteni elsknt.Megjegyzs: Krhetjk azt is az Apache szervernktl, hogy a .html llomnyokat is dolgozza fel, de ezt ritkn alkalmazzuk.

A MySQL teleptseA MySQL teleptst is a teleptcsomag letltsvel kell kezdennk. Itt most tovbbi magyarzatok nlkl a MySQL Community Server letltst15 javasoljuk. Els lpsknt a tipikus (Typical) teleptst vlasszuk:

14

A modul hasznlata itt a tanuls idejre ajnlhat. les krnyezet esetn rdemes megfontolni a jval biztonsgosabb FastCGI mdban val futtatst. Tovbbi informci: http://weblabor.hu/cikkek/phpfastcgimodban15

http://dev.mysql.com/downloads/mysql/5.0.html#downloads

1.Fejlesztkrnyezet kialaktsa

15. oldal

1.8. bra: Tipikus telepts javasoltMegjegyzs: Terjedelmi okokbl a MySQL konfigurlsrl csak egy korbbi, de alapokat nagyon jl tisztz cikket16 tudunk ajnlani Grac Rbert tollbl.

1.3. FejleszteszkzkFejleszteszkzk tmjban rdemes elszr a szlssges pldkat ttekinteni. Az eszkzk kzl a Jegyzettmb az a minimum, amivel mg tbb-kevsb lehet webfejlesztst vgezni, br tbb okbl sem clszer. Egy jobb szerkeszt (pldul NotePad+ +17) viszont mr igen jl hasznlhat. A msik vgletet azok a WYSIWYG (What You See Is What You Get) programok kpviselik, amelyek gy teszik lehetv az oldal elksztst, hogy (els rnzsre) semmilyen programozi, webes tudsra nincs szksg. Ebbe a kategriba tartozik pldul a npszer FrontPage. Ezen eszkzknek az elnyk a htrnyuk: br adnak lehetsget a kdszint szerkesztsre, mgis ersen korltozzk azt. A szerz vlemnye szerint a webfejlesztnek olyan eszkzkre van szksge, amelyek gy adnak tmogatst, hogy a folyamatot a fejleszt, s nem a program vezrli. A programozi szerkesztprogramok e kzps kategrijnak kt alapvet szolgltatsa a kdsznezs s a kdkiegszts. Ingyenes szoftverek kzl kevs tud kdkiegsztst, azt is ltalban csak 1-2 nyelvre.

1.3.1

Context

A kdsznezst nyjt programok kzl a szerz egyik kedvence a Context18, amely tbbek kztt magyar fellettel tbb, mint 200 nyelv sznezst tudja megoldani. Ezen16 17 18

http://weblabor.hu/cikkek/mysql41telepites http://notepad-plus.sourceforge.net/ http://www.context.cx/

16. oldal

Web programozs I. (0.7. verzi)

kvl rendkvl hasznos szolgltatsa a knnyen konfigurlhat sablonbeilleszts. (Pl. egy res HTML llomny esetn 4-5 billentyletssel egy 5-6 soros minimlis HTML oldalt hozhatunk ltre.

1.9. bra: A Context kdkiemelse

1.3.2

Notepad++

Notepad++ egy ingyenes forrskd-szerkeszt (s a hagyomnyos Jegyzettmb levltsra hivatott program), amely szmos programozsi nyelvet tmogat a MS Windows krnyezetben.

A Notepad++ kpessgei

Kdkiemels s kdblokkok egysgbe zrsa 38 tmogatott programnyelv WYSIWYG nyomtats Felhasznl ltal llthat kdkiemels Automatikus kiegszts Tbb dokumentum megnyitsa Tbbszrs nzet Vltoztathat nzetek Fjl llapotvltozsnak automatikus figyelse Nagyts s kicsinyts Tbb-nyelvi krnyezet tmogatsa

1.Fejlesztkrnyezet kialaktsa

17. oldal

Knyvjelzk sszetartoz nyit- s zr zrjelek sznezse Makrk felvtele s lejtszsa

1.10. bra: A Notepad++ kdkiemelse

1.3.3

Komodo Edit

Amita az ActiveState a Komodo Edit19 integrlt fejlesztkrnyezett ingyeness tette, igazn profi eszkzt hasznlhatunk.

Nhny szolgltats

Projekt kezels Tvoli fjlok szerkesztse Intelligens kdkiegszts

19

http://www.openkomodo.com/

18. oldal

Web programozs I. (0.7. verzi)

1.11. bra: Komodo Edit kdkiegszts kzben

1.4. Grafikus programokMivel ez a jegyzet nem grafikusok vagy dizjnerek, hanem webfejlesztk szmra kszlt, ezrt itt csak nhny alapvet dologrl lesz sz. A fejleszt a vals letben tbbnyire kp(ek) formjban kapja meg az oldal ltvnytervt, valamilyen szveges formtumban a szveges rszt, s nyers formban a tartalomhoz kapcsold fnykpeket. Ebben az esetben a fejleszt feladata az, hogy a ltvnyterv alapjn elksztse az oldal HTML s CSS kdjt, s rhzza minderre a dizjnt, a szveget s a fnykpeket. A grafikus programok szempontjbl ez azt jelenti, hogy a dizjnt alkot kpet tglalap alak rszekre kell vgni, a fnykpeket pedig mretre hozni, javtani, sznkorrekcit, vilgostst stb. vgrehajtani. E feladatok elltsra rszben a Paint is megfelel, de rdemes valamivel komolyabb szoftvert alkalmazni. Gyakorlatilag itt is zls, szoks krdse, hogy ki melyik programot vlasztja. Az alapvet szksges szolgltatsok: Ments GIF, JPG s PNG formtumban. tmretezs Kivgs Korrekcik Szrs

1.Fejlesztkrnyezet kialaktsa

19. oldal

1.4.1

Paint.NET

A szerz sokig a shareware Jasc (azta Corel) Paint Shop Pro hve volt, de a kzelmltban ttrt a teljesen ingyenes Paint.NET20 programra.

1.12. bra: Paint.NET Tovbbi alapszolgltatsai:

rtegek kezelse effektusok hasznlata

20

http://www.getpaint.net/

20. oldal

Web programozs I. (0.7. verzi)

2. Web alapismeretekEbben a fejezetben nhny olyan tmt rintnk, amelyekkel a webfejleszts megkezdse eltt tisztban kell lennnk.

2.1. AlapfogalmakKezdjk nhny alapfogalommal a Wikipdia21 alapjn:

2.1.1

Webbngsz

Webbngsznek vagy bngsznek nevezzk azon programokat, melyekkel az interneten tallhat tartalmakat legtbbszr weblapokat lehet megtekinteni, illetve az Interneten t elrhet szolgltatsokat hasznlni. A webbngszk a webszerverekkel HTTP protokollon keresztl kommuniklnak. A HTTP segtsgvel a bngszk adatokat kldhetnek a webszervereknek, valamint weblapokat tlthetnek le rluk. A lapokat a bngsz az URL segtsgvel tallja meg, mely a lap cmt jelli. Az URL a cmhez tartoz protokollal kezddik, pldul a http: a HTTP protokoll jellse. Sok bngsz tbb ms protokollt is tmogat, mint pldul az ftp: az FTP, a https: pedig a HTTPS protokollhoz. A weblaphoz tartoz fjl formtuma tbbnyire HTML, ez a HTTP protokollban a MIME tartalomtpus alatt van megadva. A legtbb bngsz a HTML mellett tmogat ms formtumokat is, mint amilyen a JPEG, PNG s GIF kptpusok, valamint tovbb bvthet bennk a tmogatott fjltpusok listja klnbz beplk hasznlatval. A HTTP tartalom s az URL hasznlatval a webfejlesztk kpeket, animcikat, mozgkpeket s hangokat gyazhatnak be vagy tehetnek elrhetv a weblapokon. A HTML a bngszkkel egytt fejldtt, a hivatalos HTML-vltozatokat a W3C hagyta jv illetve ksztette el. A bngszk sokflesge s a cgek sajt HTML mdostsai kompatibilitsi problmkhoz vezettek. A modern webbngszk (mint a Mozilla, Opera, Safari stb.) mr pontosabban tmogatjk a HTML s XHTML szabvnyokat (a HTML 4.01-gyel kezdden), melyekkel a weblapok azonosan kell megjelenjenek minden ilyen bngszben. Az Internet Explorer jelenleg mg nem tmogatja tkletesen a HTML 4.01 s XHTML 1.x szabvnyokat. Jelenleg sok weboldal mr valamilyen knynyen kezelhet, azonnali eredmnyt szolgltat, gynevezett WYSIWYG szerkesztvel kszlt, mint amilyen a Macromedia Dreamweaver vagy Microsoft Frontpage.

BngszmotorA bngszmotor olyan szoftver, amely a webes tartalmat (mint pldul HTML, XML, kp fjlok stb.) s a formzs informciit (mint pldul CSS, XSL stb.) mint formzott tartalmat jelenti meg a kpernyn. A vgs cl ltalban a monitor vagy a nyomtat. Egy bngszmotort tipikusan webbngszk, e-mail kliensek, vagy ms olyan alkalmazsok hasznlnak, amelyeknek webes tartalmak megjelentse (s szerkesztse) a feladatuk.

21

http://hu.wikipedia.org/

2.Web alapismeretek

21. oldal

A bngszmotor kifejezs akkor lett szleskren hasznlatos, amikor a Mozilla projekt elksztette sajtjt Gecko nven, mint egy a bngsztl elvlasztott komponenst. Ms szval, a Mozilla bngszmotorjt jra felhasznltk ms bngszkben is, s az emberek elkezdtek a Geckora gy hivatkozni, mint egy klnll bngszmotorra, inkbb mintsem egy szimpla webbngsz rszre hivatkoztak volna.

2.1.2

Webszerver

A webkiszolgl/webszerver egy kiszolgl, mely elrhetv teszi a helyileg (esetleg ms kiszolgln) trolt weblapokat a HTTP protokollon keresztl. A HTTP webszerverekhez webbngszkkel lehet kapcsoldni. Br a webszerverek tbbnyire klnbznek a rszletekben, az alapvet funkciik azonosak. Minden webszerver HTTP krseket fogad a hlzatrl, s HTTP vlaszokat kld vissza. A HTTP vlasz az esetek tbbsgben egy HTML dokumentum, de lehet mg egyszer szveges fjl, kp, vagy ms tpus fjl is.

KrsA webszerverek a klienstl kapott krsekben tbbek kztt URL cmet kapnak, melyet aztn ktflekppen rtelmezhetnek:

A tartomnynv utn ll relatv mappa s fjl struktrt hozzrendelik egy gykrmapphoz. (a gykrmappa a webszerver belltsaiban van megadva, s az adatokat kr kliens szmra lthatatlan) A tartomnynv utn ll relatv mappa s fjlstruktra (vagy akr mg a tartomnynv is) teljesen fggetlen a krt cmben szerepl struktrtl. Ebben az esetben meghatrozott szablyok szerint formzza a krt cmet. Ennek segtsgvel egy mappra irnyul krs teljesen ms mappra vagy akr egy fjlra is mutathat s fordtva.http://www.pelda.com/utvonal/fajl.html

A kliens pldul az albbi URL-t kri: A kliens webbngszje ezt rtelmezve ltrehoz egy kapcsolatot a www.pelda.com kiszolglval, s elkldi a kvetkez HTTP 1.1 krst:GET /utvonal/fajl.html HTTP 1.1 Host: www.pelda.com

VlaszA www.pelda.com cmet megfelelteti a webszerver az adott gykrmapphoz (pl. /var/www/pelda), amelyhez hozzfzi a /utvonal/fajl.html elrst ezzel megtrtnt a megfeleltets a fjlrendszer erforrshoz. A krt eredmny a szerveren teht: /var/www/pelda/utvonal/fajl.html. Ezt kveten a webszerver ellenrzi, hogy hozzfrhet-e az adott krs, ill. hogy ltezike. Ha nem ltezett akkor 404-es hibakddal tr vissza, ha hozzfrhet akkor beolvassa, elvgzi rajta az esetleges tovbbi mveleteket, majd elkldi a kliensnek. A vlasz termszetesen szintn magban foglalja a megfelel fejlcet. A msodik megolds esetben, az erforrsokhoz trtn megfeleltets eltt a cmet tformzza. Pldul:

22. oldal

Web programozs I. (0.7. verzi)

www.pelda.com/Toplista/kutyak+es+macskak

URL krst a kvetkezkppen alakthatja t:/var/www/pelda/toplista.php?cim=kutyak+es+macskak

ModulokLehetsg van a vlaszok feldolgozsa eltt, az esetlegesen a krsben rkezett adatok feldolgozsra s ennek eredmnynek visszakldsre. Ilyenkor a szerver oldalon fut webszerver-modulok illetve a webszerver ltal meghvott CGI rutinok vgzik el ezt a feladatot. A programrszletek (webszerver-modulok) rendszerint a HTML kdba vannak begyazva s maga a webszerver-program hajtja ezeket vgre. Ilyenek pldul a PHP, ASP, JSP.

2.1.3

Webtrhely

A virtulis webtrhely szolgltats egy olyan internetes szolgltatst rt a kztudat, ahol egy webszerver erforrsait tbb felhasznl kztt osztjk fel. Minden felhasznl egy a rendszer ltal dediklt trhelyet foglal el, aminek nyilvnos tartalma egyedi domn nven rhet el. Kisebb forgalm szjtot kltsghatkonyan lehet brelt webtrhelyen zemeltetni. A webtrhely szolgltatsnak ltalban tartalmaznia kell adminisztrcis felletet a nagyszm felhasznl kzbentarthat, s hatkony kezelshez. Osztott trhelyszolgltatk rendszerint az egyes szolgltatsokat fizikailag elklntett kiszolgl rendszereken oldjk meg, az gyflkiszolgl s adminisztrcis rendszer, a levelez kiszolgl, az adatbzis szerver, a webszerver fizikailag elklntett kiszolglkon mkdik. A legtbb webkiszolgl alacsony kltsg Linux vagy FreeBSD opercis rendszer alap LAMP szerver. Az egyes opercis rendszerekre ptett szolgltatsok lnyegben meghatrozzk a felhasznl ltal elrhet technolgik csoportjt is. Windows alap webhoszting esetn a felhasznl vlaszthat akr ASP.NET s Microsoft SQL Server de akr PHP s MySQL Server tmogatst is; mg LAMP szerver esetn csak PHP scriptnyelv webszjtokat kszthet MySQL Server tmogatssal.

2.1.4

HTTP protokoll

A HTTP ( HyperText Transfer Protocol) egy informcitviteli protokoll a vilghln. Az eredeti clja a HTML lapok publiklsa s fogadsa volt. A HTTP fejlesztst a World Wide Web Consortium s az Internet Engineering Task Force koordinlta RFC-k formjban. A legfontosabb RFC az 1999-ben kiadott RFC 261622, amely a HTTP/1.1 verzit definilja. Jelenleg ez a legelterjedtebb verzi. A HTTP egy krs-vlasz alap protokoll kliensek s szerverek kztt. A kommunikcit mindig a kliens kezdemnyezi. A HTTP klienseket gyjtnven user agentnek is nevezik. A user agent jellemzen, de nem felttlenl webbngsz. A HTTP ltalban a TCP/IP rteg felett helyezkedik el, de nem fgg tle.

22

http://www.w3.org/Protocols/rfc2616/rfc2616.html

2.Web alapismeretek

23. oldal

Krs (request)Egy HTTP krs els sora mindig metdus erforrs verzi alak, pldul gy:GET /images/logo.gif HTTP/1.1

Ezt a sort kvetheti tetszleges szm fejlc sor HEADER: rtk alakban, pldul gy:Accept: text/plain,text/html Accept-Language: en

A fejlc sorok vgt egy res sor jelzi, melyet az opcionlis zenettest kvet. A sorokat a CRLF (azaz kocsi vissza + soremels) karakterprral kell elvlasztani. A fejlc vgt jelz res sor csak ezt a kt karaktert tartalmazhatja, nem lehet benne szkz s tabultor sem.

MetdusokHTTP protokoll 8 fle metdust definil. A metdusok a megadott erforrson vgzend mveletet hatrozzk meg. HEAD Ugyanazt adja vissza, mint a GET, csak magt az zenettestet hagyja ki a vlaszbl. A megadott erforrs letltst kezdemnyezi. Ez messze a leggyakrabban hasznlt metdus. Feldolgozand adatot kld fel a szerverre. Pldul HTML rlap tartalmt. Az adatot az zenettest tartalmazza. Feltlti a megadott erforrst. Trli a megadott erforrst. Visszakldi a kapott krst. Ez akkor hasznos, ha a kliens oldal arra kvncsi, hogy a kztes gpek vltoztatnak-e illetve mit vltoztatnak a krsen. Visszaadja a szerver ltal tmogatott HTTP metdusok listjt. talaktja a krst transzparens TCP/IP tunnell. Ezt a metdust jellemzen SSL kommunikci megvalstshoz hasznljk.

GET

POST

PUT DELETE TRACE

OPTIONS CONNECT

Biztonsgosnak azokat a metdusokat nevezzk, amelyek csak informci lehvsra szolglnak s elvben nem vltoztatjk meg a szerver llapott. Ms szval mellkhats nlkliek. Ilyenek pldul a HEAD, a GET, az OPTIONS s a TRACE. Fontos megjegyezni, hogy a gyakorlatban lehetnek a biztonsgos metdusoknak is szerveroldali mellkhatsai.

24. oldal

Web programozs I. (0.7. verzi)

Vlasz (response)A HTTP vlasz els sora a sttuszsor, amely verzi sttuszkd indokls alak. A sttuszkd egy hrom szmjegy szm, az indokls egy angol nyelv zenet. Az elbbit inkbb gpi, az utbbit inkbb emberi feldolgozsra szntk. Egy egyszer plda sttuszsorra:HTTP/1.1 200 OK

A sttuszkdok jelentst az RFC 2616 tartalmazza rszletesen, az albbi lista egy ttekint osztlyozst ad a kezd szmjegy alapjn: 1xx: 2xx: 3xx: 4xx: 5xx: Informatv Krs megkapva. Siker A krs megrkezett; rtelmezve, elfogadva. tirnyts A krs megvlaszolshoz tovbbi mveletre van szksg. Kliens hiba A krs szintaktikailag hibs vagy nem teljesthet. Szerver hiba A szerver nem tudta teljesteni az egybknt helyes krst.

A sttuszsor utn fejlc sorok kvetkezhetnek a HTTP krsnl ltott mdon, pldul gy:Date: Mon, 23 May 2005 22:38:34 GMT Server: Apache/1.3.27 (Unix) (Red-Hat/Linux) Last-Modified: Wed, 08 Jan 2003 23:11:55 GMT Accept-Ranges: bytes Content-Length: 438 Connection: close Content-Type: text/html; charset=UTF-8

A fejlc sorokat itt is res sor zrja, melyet az opcionlis zenettest kvet.

SttuszkdokA HTTP/1.0 verzi ta a HTTP vlasz els sort sttuszsornak nevezik s tartalmaz egy hromjegy sttuszkdot, valamint egy rvid szveges zenetet a hibrl. Pldul gy:HTTP/1.1 404 Not Found

A kliens elssorban a hibakd, msodsorban a fejlc sorok tartalma alapjn kezeli a vlaszt. Hasznlhatak egyedi sttuszkdok is, mert a kliens ismeretlen kd esetn az els szmjegy alapjn mr tudja osztlyozni a hibt. A szveges zenetekre a szabvny csak javaslatokat tartalmaz. A szerver kldhet lokalizlt zeneteket is:HTTP/1.1 404 Nincs meg.

Ha a sttuszkd hibra utal, akkor a kliens megjelentheti a hibazenetet, hogy tjkoztassa a felhasznlt a hiba termszetrl. A szabvny megengedi azt is, hogy a kliens maga interpretlja a sttuszkdot s az alapjn sajt zenetet generljon a felhasznlnak, de ez zavar lehet. A szabvny szerint a sttuszkdot sznjk gpi, a szveges zenetet pedig emberi fogyasztsra.

2.Web alapismeretek

25. oldal

Munkamenet (session)A HTTP egy llapot nlkli protokoll. Az llapot nlkli protokollok elnye, hogy a szervernek nem kell nyilvntartania felhasznli informcikat az egyes krsek kiszolglsa kztt. A HTTP eredetileg nem arra kszlt, hogy felhasznlk jelentkezzenek be rajta keresztl szerverekre s ott munkamenetet (session-t) indtsanak. Trtnetileg azonban gy alakult, hogy a HTTP terjedt el szles krben ms, felhasznli bejelentkezst tmogat protokollok helyett, ami arra knyszertette a webfejlesztket, hogy kerlutakon jrva troljk a felhasznlk munkamenet-llapotait.

2.1.5

FTP protokoll

A File Transfer Protocol, a TCP/IP hlzatokon trtn llomnytvitelre szolgl szabvny. Gyakran van szksg arra, hogy valamilyen llomnyt hlzaton keresztl tltsnk le sajt gpnkre, vagy egy llomnyt msok szmra hozzfrhetv tegynk. Erre alkalmas az FTP, ami lehetv teszi a klnbz opercis rendszer gpek kztt is az informcicsert. A vilgon nagy mennyisg informciforrs ll rendelkezsre, melyek letltse ilyen mdon megvalsthat. A hozzfrsi jog alapjn ktfle kapcsolattpus ltezik:

letlts, vagy feltlts nyilvnosan hozzfrhet llomnyokbl vagy llomnyokba, letlts, vagy feltlts olyan gprl, ahol azonostval rendelkeznk.

Azt a folyamatot, amikor egy tvoli szmtgprl fjlt mentnk a sajt szmtgpnk httrtrra, letltsnek nevezzk; feltltsnek nevezzk, ha a folyamat fordtott irnyban zajlik, s mi tltnk fjlt ms gpre. Az FTP kapcsolat gyfl/kiszolgl alap, vagyis szksg van egy kiszolgl (szerver) s egy gyflprogramra (kliens). Elterjedt protokoll, a legtbb modern opercis rendszerhez ltezik FTP-szerver s kliens program, sok webbngsz is kpes FTP-kliensknt mkdni.

2.1.6

Webcm

A webcm, ms nven URL (mely a Uniform Resource Locator [egysges erforrs-azonost] rvidtse), az Interneten megtallhat bizonyos erforrsok (pldul szvegek, kpek) szabvnyostott cme. Elszr Tim Berners-Lee alkotta meg a World Wide Weben val hasznlatra. A jelenleg hasznlt formtumot rszletesen lerja az IETF RFC 173823 szabvnya. A webcm az Internet trtnetnek alapvet jtsa. Egyetlen cmben sszefoglalja a dokumentum megtallshoz szksges ngy alapvet informcit:

a protokollt, amit a clgppel val kommunikcihoz hasznlunk; a szban forg gp vagy tartomny nevt; a hlzati port szmt, amin az ignyelt szolgltats elrhet a clgpen; a fjlhoz vezet elrsi utat a clgpen bell.

Egy tipikus, egyszer webcm gy nz ki:23

http://tools.ietf.org/html/rfc1738

26. oldalhttp://hu.wikipedia.org:80/wiki

Web programozs I. (0.7. verzi)

Ennek rszei:

A http hatrozza meg a hasznland protokollt. A protokoll neve utn kettspont (:) rand. A hu.wikipedia.org adja meg a clgp tartomnynevt. Ez el kt perjel (//) rand. A 80 adja meg a clgp azon hlzati portszmt, amin krsnket vrja; ez el kettspont (:) rand. Ezt a rszt gyakran teljesen elhagyhatjuk, pldul esetnkben a http protokoll alaprtelmezett portszma a 80. A /wiki/Bit a krt elrsi t a clgpen. Ez a rsz mindig a perjellel (/) kezddik.

A legtbb bngsz nem is ignyli, hogy a http:// rszt begpeljk egy weblap elrshez, hiszen az esetek dnt tbbsgben gyis ezt hasznljuk. Egyszeren begpelhetjk a lap cmt, pldul: hu.wikipedia.org/wiki/Bit. A cmlap megtekintshez ltalban elg a tartomny nevt berni, pldul hu.wikipedia.org. A webcmek egyb rszeket is tartalmazhatnak, http esetben pldul az elrsi t utn, egy krdjel (?) mg helyezve keressi krds szerepelhet, ami egy get metdus HTML rlapbl szrmazik. Az elrsi t utn, attl egy ketts kereszttel (#) elvlasztva szerepelhet a hiperszveg egy rszre hivatkoz azonost. Ez az azonost nem rsze a webcmnek, de gyakran szerepel vele kapcsolatban. Pldk:http://hu.wikipedia.org/w/wiki.phtml?title=Bit&action=history http://hu.wikipedia.org/wiki/1999#Esemnyek

A webcm az URI egy olyan fajtja, ahol az azonosts a dokumentum helye alapjn trtnik. Ha egy weblapot egyrtelmen meghatroz egy webcm, akkor r mutat hivatkozst hozhatunk ltre. Ez a helyzet nem mindig ll fenn, pl. egy menpont megvltoztathatja a lapon bell az egyik keret tartalmt, anlkl, hogy ennek az j kombincinak kln webcme lenne. Ezen kvl egy weblap fgghet ideiglenesen trolt informcitl is. Mg ha van is egy weblapnak vagy keretnek nll webcme, ez nem mindig nyilvnval annak a szmra, aki r mutat hivatkozst kvn ltrehozni. Egy keret webcme nem ltszik a cmsvban, s ltrehozhat cmsv nlkli ablak is. A webcm ilyenkor a lap forrsa, illetve egyes rszeinek tulajdonsga alapjn meghatrozhat. Azon kvl, hogy r mutat hivatkozst hozzunk ltre, egyb okokbl is kvncsiak lehetnk egy lap webcmre: ha tartalmt nllan akarjuk megjelenteni, illetve, ha bizonyos megszortsokat (eszkztr nlkli, vagy kicsi, mretezhetetlen ablak) meg akarunk kerlni.

2.2. WebdizjnMieltt a web nyelveinek megismersbe vetnnk magunkat, rviden trjnk ki a dizjn krdsre is. (A dizjn alatt itt most nem egy konkrt grafikai ltvnyterv ksztst, hanem magasabb szint alapelvek figyelembevtelt rtjk.)

2.Web alapismeretek

27. oldal

2.2.1

Nyl vagy fix elrendezs

A nyl (liquid) dizjn a bngsz vzszintes mrettl fggen nylik, vagy hzdik ssze, mg a fix dizjn mindig megtartja a tervezsnl megadott mreteit. Mindkettnek megvannak a maga elnyei s htrnyai. A fix tervezsnl gondolni kell a legkisebb felbontssal bngszkre szintn, mint ahogy arra is, miknt fog megjelenni a dokumentum egy tgasabb krnyezetben. A nyl dizjn problmja elssorban, hogy szpen leginkbb egynem tartalom esetn lehet tervezni, illetve a tipogrfia: tl szles illetve keskeny szvegek nem bartsgosak a szemnek. (Zrjelben: weben a sorkizrt forma nem mindig elnys.) thidal megolds lehet a tartalom mretnek maximalizlsa.

2.2.2

Flash

A flash a Macromedia Flash ltal kiadott szoftver; kiterjesztse: SWF. Maga az SWF formtumot ms szoftverek is kpesek ltrehozni, de csak a flash lejtszban fut. Kezdetben vektoros rajzprogramnak indult, majd programnyelve az Actionscript segtsgvel a webdizjn egyik legdinamikusabb alapeszkzv vlt. Ma mr mind a nyelv, mind a lejtsz igen elrehaladott llapotban van (platformfggetlen Flash player 9 s az Actionscript 1-2-s 3).

Elnyei

ltvnyosan interaktv, moziszer struktrt, hatkony, egyben dinamikus multimdiatartalmat s alkalmazsokat hozhat vele ltre a szerz (jtkok, zene, film, stb)

Htrnyai

ha a gpen nincs flash lejtsz, a felhasznlhoz nem jut el az informci amit a flash tartalmaz a teljes letltdst meg kell vrni, mieltt hasznlhatnnk az oldalt nem tmretezhet a keresk mg mindig nem megfelelen indexelik nem lehet knyvjelzt elhelyezni az idegest, villog reklmok miatt sokan eleve kikapcsoljk

A megfelel cl rdekben hasznlt Flash bettek fel tudnak dobni egy oldalt, de a tlzott alkalmazsuk inkbb htrnyos. Teljes honlapok Flashban fejlesztse pedig nagyon ritkn indokolhat meg.

2.2.3

Keretek

A frame, azaz a keretes rendszerek lehetv tettk, hogy a szerzk tbb keretben val megjelentst alkalmazzanak ezekbe a keretekbe kln weblapokat hvtak meg, amik egyttes megjelense adta ki az sszefgg tartalmat. Ezltal bizonyos informcik a kperny egyik keretben llandan, ms infromcik egy msik keretben grgethet s cserlhet mdon jelennek meg.

28. oldal

Web programozs I. (0.7. verzi)

Tipikus formja volt: stabil tartalomjegyzk (pldul navigcis men) plusz grgethet tartalmi fellet, ami a tartalomjegyzkben szerepl ttelekre kattintva aktualizlhat. Ma mr nem nagyon szabadna hasznlni.

2.2.4

CSS vagy tblzatok

A tblzatokA HTML tblzatmodellje lehetv teszi, hogy az adatok legklnbzbb formit (szvegek, elre formzott szvegek, kpek, linkek, rlapok, ms tblzatok stb.) sorokba s oszlopokba rendezett cellkhoz rendeljk. Az oldal akkor tblzat alap, ha a lap felptst (egymsba gyazott, tbbszrsen sszetett) tblzatokkal oldjuk meg.

A problmk

bngszk elbb a < / table > jelet olvassk be s csak aztn tltik be a tartalmat. Ez azt eredmnyezi, hogy mg odig el nem jutott nem ltunk az oldal tartalmbl semmit. amennyiben nincs megfelel DOCTYPE az elejn (az gynevezett quirks md) a bngsz nem fogja helyesen rtelmezni, elfordulhat, fleg ha a bngsznk rgebbi tpus, hogy minden table elem megtri az rkldst, s tbbszr is definilnunk kell: pldul a bettpust a tblzatmodell 3 sznt, a tblzat sorait reprezentl elemekkel kezdve, amikbe a cellkat reprezentl elemek gyazdnak be, az adatokig, amik a cellkban vannak elhelyezve. Bonyolultabb tblzat esetn a HTML egyik legsszetettebb elemvel tallkozunk, amit nehzkes karbantartani, bvteni, tltni.

A CSS trhdtsval egyre inkbb elfogadott az a nzet, hogy a tblzatokat hasznljk arra, amire val: teht trstott adatok sszefgg, egymshoz viszonytott felsorolsra.

A CSSJelenleg a legelterjedtebb s egyttal szabvnyos stluslap tpus a W3C CSS tpusa (Cascading Style Sheet.) Els vltozata CSS1 nven 1996 decemberben, a msodik, kibvtett, tbb mdiumot is lefed CSS2 1998 mjusban jelent meg. A CSS tulajdonkppen egy deklaratv nyelv, amely a HTML nyelv prezentcis kpessgeinek kibvtst szolglja. Felhasznlbart, knnyen olvashat s rhat (de elrontani is knny). A CSS-ben az elemek osztlyaihoz, egyes HTML elemtpusokhoz s egyedi elemekhez klnbz megjelentsi stlusokat definilhatunk, s a konkrt jellemzket egy messzemenen szlesebb tartomnybl vlaszthatjuk, mint amit a HTML elemek jellemzinek vlasztka knl. Trsthatunk vele klnbz megjelentsi eszkzkhz klnbz stlusokat is, akr egy laphoz tbbet. Elhelyezhetjk a dokumentum belsejben, vagy kls fjlban Ebben az esetben egy stluslap egy egsz honlaparculatt is meghatrozhatja, ezzel svszlessg kml.

2.Web alapismeretek Htrnyai

29. oldal

A bngszk a legfbb CSS1 s 2 tulajdonsgot tmogatjk, de nem mindegyiket, st nem is mindig egyformn. Clszer meggyzdni a tmogatottsgrl adott tulajdonsg hasznlata eltt.

2.2.5

A vakbart honlap

Az extrm mdia ltal is hasznlhat honlap ma mr ignyesebb kszt esetn alapkvetelmny. Ebben az esetben gondot kell fordtani arra, hogy a kpi, vagy flash formban elhelyezett informci hozzfrhet legyen szvegesen is. A CSS segtsgvel megadhatjuk a szndkolt mdium specifikcijt. Lehet akr egyetlen mdiumler, akr vesszvel elvlasztott mdiumlista. Szabvny mdia tpusok gy a tapintsos braille eszkzk, kis vagy kzi eszkzk, auts navigcis eszkzk, nyomtatk, kivettk. CSS2-ben a voice-family tulajdonsgot pldul csak a hang alak (auralis) feldolgozk szmra vezettk be.

2.2.6

A szp honlap s a mkd honlap

Egy hatkony weboldal dizjnjt gy kell megtervezi s megvalstani, hogy egyenslyban legyen a HTML-formtum szvegek s a grafikk arnya. A szemlyes, illetve a portfli oldalakon kvl a honlapnak elssorban a ltogat ignyeit kell kielgtenie. Egy oldal lehet alul-, de a msik vgletbe esve (pl. tl sok grafikai elem) tldizjnolt is. Olyan szempontokat kell figyelembe venni, mint az tlthatsg, a j navigci, sok szveges tartalom esetn az olvashatsg, az on-line marketinget figyelembe vve pedig ide sorolhat a mrkzs, a kzvetlen rtkests, a fogyasztk megtartsa, bizalom, s egyszer kommunikci. Az oldalnak tovbb mind megjelensben, mind tartalmilag hitelesnek kell lennie.

2.2.7

A leggyakoribb webdizjnhibk

Hogy egy dizjn minden szempontbl sikeres legyen, az gyfl, a dizjner s a felhasznl j rzssel tvozzon a honlaprl, elssorban a cljt kell, hogy teljestse. Ms s ms kritriumok merlnek fel egy cges site tervezsnl s egy on-line galria esetben, de vannak apr hibk, amik kzs jellemzk a webes megjelentsnl.

Tl sok reklmA honlap alapvet rendeltetse, hogy az oldalak tartalomjegyzkt megmutassa, az rdekldst felkeltse, s esetleg ms hasonl tmj honlapok fel irnytsa a ltogatt. A honlap azonban mgsem trgymutat s nem egy gigantikus hirdetfal. A reklm eszkze, hogy magra irnytja a figyelmet, s sok banner, reklmcsk stb. esetn maga a tartalom vsz el, fleg ha minden egyformn hangslyos. Megjegyzend, hogy ltalban animcikkal szoktk ezt a hangslyozst megoldani, mert a mozgs a perifrikus ltsra ers hatssal van s bevonzza a tekintetet. Ez hossz tvon zavar lehet, a felhasznl nem kapja meg az olvasshoz, befogadshoz szksges nyugalmat.

30. oldal

Web programozs I. (0.7. verzi)

A betkA szvegnek olvashatnak kell lennie. Zavar a tl kicsi, s a szvegtestben a tl nagy betmret. Klnleges bettpusokat tbb szempontbl sem ri meg font-knt alkalmazni, megeshet, hogy nem lesz kpes a kliens gpe megjelenteni s a fejlcen, stb. kvl zavar is lehet, gyengti a professzionalits lmnyt.

Flash intrA clja az lenne, hogy ltvnyos klip segtsgvel felkeltsk a ltogat kvncsisgt, aki ezltal beljebb lp s tbb idt is tlt a honlapon. Ezzel szemben tapasztalat, hogy kevesen nzik vgig, idrablsnak tekintik fleg ha gyengn van elksztve. Leginkbb a filmes s ms ltvnyos vizulis tmval foglalkoz oldalakon hasznos. Ajnlott mindig elltni a kvetkez kt funkcival: a skip- teht a mozi tugrsnak lehetsge, amivel rgtn a bels tartalomra kerl s a hang lekapcsolsa. A keresoptimalizlsnl szintn gondot okozhat, hogy az intro oldalak nem tartalmaznak kulcsszavakat, hanem ltalban csak egy linket, nha egy kereszthivatkozst.

LinkekA HTML egyik legfontosabb sajtossga, hogy a dokumentumokat nem linelis mdon az elejtl a vgig kell elolvasni, hanem a szerzk csoportosthatjk, egymshoz rendelhetik a dokumentumokat, amelyben kapcsolatot definilhat az egyes dokumentumokok bell s kztt. Clszer a honlaprl kls tartalomra mutat linkek eltr jelzssel trtn megvalstsa, a f s almenk jl lthat hierachikus rendezse. Ugyangy hibnak szmtanak a trtt linkek, amelyek nem vezetnek sehov, az ltaluk clzott tartalom mr elmozdult, vagy megsznt. Jellni kell az E-mail kapcsolattartst szolgl linkeket is.

A keres optimalizlsTaln mind kzl a legnagyobb hiba, amit a dizjnerek ill. a szerzk/tulajdonosok gyakran elkvetnek az, hogy a keres gpekre trtn optimalizlsra csak utlag gondolnak. Itt klnsen problmt jelenthet a flash tartalom, fleg ha a honlap egsze flash alap.

2.3. A HTML szabvnyokA webfejlesztk gyakran kzdenek a klnbz bngszkben s bngszverzikban is hasznlhat oldalak kialaktsrt. Ebben a helyzetben klnsen fontos, hogy a webes szabvnyoknak megfelel oldalakat hozzunk ltre. A szabvnyok alkalmazsa ezen kvl a jvben megjelen verzikkal is j esllyel hasznlhat oldalakat eredmnyez. (A gyakorlatban a bngszk szabvny-kvetse az j verzik megjelensvel javulni szokott, esetleg stagnl, legalbbis a szabvny adott verzijt tekintve.) Ha csapatban dolgozunk, egyszerbb lesz a msok szabvnyos kdjt megrteni s mdostani. (Hasonlan, mint ahogy a programozs sorn alkalmazott kdolsi konvencik egysges betartsa is megtrl a csapatmunknl vagy a ksbbi karbantartsnl.) Vannak fejlesztk, akik gy tekintenek a szabvnyokra, mint ami megkti a kezket, s ezrt bngsz-specifikus trkkket alkalmaznak az oldalak ksztsnl. Hossz tvon azonban ez a hozzlls nem lesz kifizetd.

2.Web alapismeretek

31. oldal

Vgl a keresrobotok is jobban tudjk rtelmezni a szabvnyos oldalakat. Sok lszakrt ajnl nyakatekert trkkket a keresoptimalizls rdekben, pedig a szabvnyok kvetse az egyik24 legalapvetbb teend.

2.3.1

A World Wide Web Consortium25 (W3C)

A W3C Tim Berners-Lee, a WWW kitallja ltal 1994-ben alaptott szervezet. Clja, hogy a webbl a lehet legtbbet lehessen kihozni. Elsdleges tevkenysge a web szabvnyok (egsz pontosan ajnlsok) kidolgozsa. A legfontosabb tagjai: IBM Microsoft America Online Apple Adobe Macromedia Sun Microsystems Budapesti Mszaki s Gazdasgtudomnyi Egyetem (2006 ta)

Akr szemlyesen is bekapcsoldhatunk az ajnlsok kidolgozsba a W3C Magyar Iroda26 ltal koordinlt mdon.

2.3.2

Validtorok

A W3C s ms szervezetek is ksztenek olyan programokat, honlapokat, amelyekkel a honlapunk szabvnyossga (szabvnynak val megfelelse) tesztelhet. A hibk mellett sokszor segtsget is kapunk a szolgltatsok ignybevtelvel. A fontosabb validtorokkal a ksbbiekben fogunk ismertetni.

2.4. Ellenrz krdsek Melyik a bngszk ltal tmogatott legmagasabb HTML (nem XHTML!) verzi? Minek a rvidtse: HTTP, FTP, HTML, W3C? Mi a W3C feladata? Melyek jelenleg a szabvnykvet(bb) bngszk? Milyen verzinl tartanak ma a npszerbb bngszk?

24 25 26

Ami mg ennl is fontosabb, az a rendszeresen frissl s minsgi tartalom. http://www.w3.org/ http://www.w3c.hu/

32. oldal

Web programozs I. (0.7. verzi)

3. HTMLA HTML nyelv az az alap, amivel minden webfejlesztnek alaposan tisztban kell lenni. Ez a fejezet segtsget ad a HTML lehetsgeinek megismershez, de sok nyelvi elemet mr nem tartalmaz. A terjedelmi okokon kvl a kvetkezkre kell elssorban gondolni: Bizonyos HTML jellemzk a mai napra elavultnak tekinthetk. Itt elssorban a kinzet eszttikai megjelensre kell gondolni. A CSS hasznlatval ugyanis sokkal tbb s jobb lehetsgnk lesz a kinzet lersra. A HTML a mai gyakorlatban mr tisztn csak az informcira, s annak struktrjra figyel. Ezt egybknt szemantikus kdolsnak is nevezzk. Bizonyos tagok, tulajdonsgok a bngszk ltal nem egysgesen tmogatottak, gy ezeket a gyakorlatban is csak kevesen hasznljk.

3.1. BevezetsMi az a HTML? A HTML a Hyper Text Markup Language rvidtse A HTML llomny egyszer szvegllomny, amely rvid jell tagokat tartalmaz A jell tagok alapjn tudja a bngsz, hogyan kell megjelentenie az oldalt A HTML llomny html kiterjesztssel rendelkezik A HTML llomnyt egyszer szveges (editor) programokkal (pl. Jegyzettmb) is ltrehozhatunk

Hogyan kezdjnk neki?Windows opercis rendszer alatt indtsuk el a Jegyzettmbt (vagy inkbb egy komolyabb editort), majd gpeljk be a kvetkez szveget: Az oldal cme Ez az els honlapom. Ez a szveg flkvr

Mentsk el az oldalt oldal.html nven!Megjegyzs: Ebben s a kvetkez nhny fejezetben mg nincs felttlen szksgnk webszerver elrsre a tanulshoz. Ksbb majd FTP kapcsolaton keresztl a webszerverre fogjuk az oldalainkat feltlteni, majd webszerver elrsvel hasznlni azokat.

Nyissuk meg a bngsznket, majd a Fjl men megnyits parancst vlasztva keressk meg az elbb elmentett oldal.html llomnyt! (Tovbbi lehetsgnk, hogy a Windows Intznkben dupln kattintunk az llomny nevre, de az llomny bngszre vonszolsval is clt rnk.) A kvetkezhz hasonlt kell ltnunk a bngsznkben:

3.HTML

33. oldal

3.1. bra: HTML oldal a bngszben

A plda magyarzataA dokumentum els tagja a . A bngsz errl fogja tudni, hogy hol kezddik a HTML oldal. Az utols tag a , itt r vget a dokumentum a bngsz szmra. A s tagok kztti rsz a fejlc informci. Az itt megjelen szveget a bngsz nem jelenti meg kzvetlenl. A tagok kztti szveget a bngsz a cmsorban jelenti meg. A tagok kztti szveg jelenik meg a bngsz ablakban. A s tagok hatsra a szveg flkvren (bold) jelenik meg.

HTML szerkesztkLteznek olyan szerkesztprogramok, amelyekkel tnyleges HTML ismeretek nlkl is lehet HTML oldalakat ltrehozni. Ezeket a programokat WYSIWYG (what you see is what you get) editoroknak hvjuk, ismertebb, pl. a FrontPage, vagy a Word, ezek azonban kerlendk, ha minsgi HTML oldalakat szeretnnk ltrehozni. Ezek a programok ugyanis kisebb-nagyobb mrtkben teleszemetelik a kdot. (Elrettentsknt rdemes megnzni egy Word-bl mentett weblapot.) rdemes inkbb olyan szerkesztprogramot vlasztani, ahol a HTML kd fltt teljes ellenrzssel brunk, ugyanakkor kiegszt szolgltatsokkal (pl. sznkiemels, tagok beszrsa gombnyomsra stb.) gyorstani lehet a munkt.

Gyakran ismtelt krdsekKrds: A bngsz a HTML tagokkal egytt jelenti meg a begpelt szveget. Mirt? Vlasz: A Windows alaprtelmezett belltsa szerint a Jegyzettmb a html kiterjeszts utn mg egy txt kiterjesztst is tesz, teht az llomnynv (annak ellenre, hogy ez nem is ltszik): oldal.html.txt. rdemes ms szerkeszt programot, pl. Total Commandert alkalmazni, vagy a Mappa belltsai kztt a bns Ismert llomnytpusok esetn a kiterjeszts elrejtse belltst kikapcsolni. Krds: Vltoztattam a HTML dokumentumon, de a vltozsok nem jelentek meg a bngszben. Mirt? Vlasz: A szerkeszt programban menteni, majd a bngszben frissteni kell a dokumentumot. (Nem szksges semelyik programot bezrni, csak menet kzben vltogatni a kt program kztt.) Bizonyos esetekben a bngsz gyorsttrbl veszi az oldalt, s nem kld jabb krst a szerver fel. Ilyenkor a gyorsttr kirtse vagy a Ctrl+F5 billentykombinci alkalmazsa segt.

34. oldal Krds: Melyik bngszt hasznljam?

Web programozs I. (0.7. verzi)

Vlasz: A tanulshoz clszer olyan bngszt vlasztani, amely a szabvnyokat a lehet legjobban kveti. A profi fejlesztnek egybknt is minden elterjedtebb bngszn s verzin tesztelni kell az oldalt. 2007 nyarn haznkban s a krnyez orszgokban a bngszk 30-40%-a Firefoxot hasznl.

3.2. TagokA HTML llomny egyszer szvegllomny, amely rvid jell tagokat tartalmaz. A HTML tagok segtsgvel elemek definilhatk.

HTML tagok jellemzi A HTML tagok jellik ki a HTML elemeket A HTML tagot a < s > rsjelek veszik krl (ezek az rsjelek az egyszer szvegekben nem engedlyezettek) A HTML tagok ltalban prban vannak, mint a s A pr els tagja a kezd, a msodik a zr tag A szveg (tartalom) a kezd s a zr tag kztt helyezkedik el A HTML tagok kis-, s nagybetvel is rhatk

HTML elemekAz elz pldban a kvetkez plda egy elem:Ez a szveg flkvr

A HTML elem kezd tagja , a tartalmazott szveg Ez a szveg flkvr, s a zr tag . A kvetkez is egy HTML elem: Ez az els honlapom. Ez a szveg flkvr

Az elem kezd tagja s a zr tagja

Mirt alkalmazzunk kisbets tagokat?Maga a HTML nyelv nem rzkeny a kis-, s nagybetkre, de a HTML tovbbfejlesztsnek tekinthet XHTML mr igen. rdemes teht ezt az rsmdot megszokni.

Tag tulajdonsgok (attribtumok, jellemzk)A tagok tartalmazhatnak tulajdonsgokat is. Ezek a jellemzk jrulkos informcik az elem egszre nzve. A tag definilja az oldal body elemt, ami tartalmazhat egy bgcolor tulajdonsgot, amibl tudja a bngsz, hogy milyen httrsznnel kell az oldalt megjelenteni. Pldul, ha piros httrsznt szeretnnk, a kvetkez szveget kell begpelnnk:

3.HTML

35. oldal

A elem egy tblzat elemet definil. A tag tulajdonsgaknt megadhat, hogy milyen vastag szegllyel jelenjen meg a tblzat. A kvetkez plda szegly nlkl jelenti meg a tblzatot:

A tulajdonsgok nv-rtk prokkal adhatk meg, egymstl szkzzel elvlasztva akr tbb is.

Melyik idzjelet alkalmazzuk?A nyelv elssorban a (dupla) idzjel alkalmazst rja el. A bngszk az aposztrf jelet is elfogadjk, mgis rdemes inkbb a hagyomnyos idzjelet alkalmazni. Bizonyos esetekben (pl. soron belli JavaScript kd) a kettt keverten kell alkalmaznunk.

3.3. Alapvet HTML tagokA HTML legalapvetbb s leggyakrabban hasznlt tagjai azok, amelyek segtsgvel cmeket, bekezdseket s sortrseket lehet ltrehozni.

CmekA cmek a tagok segtsgvel adhatk meg. a legnagyobb (legfelsbb szint) cmet jelenti, pedig a legkisebbet. (ltalban egy oldalon legfeljebb 2-3 szintet indokolt alkalmazni, ekkor pl. a h1 s h2 alkalmazhat.) A kvetkez plda bemutatja mind a 6 cmet:Ez Ez Ez Ez Ez Ez egy egy egy egy egy egy cm cm cm cm cm cm

3.2. bra: Cmsorok A cmsorokhoz a bngsz alaprtelmezetten trkzket is kapcsol.

36. oldal

Web programozs I. (0.7. verzi)

BekezdsekA bekezdseket a taggal lehet definilni:Ez egy bekezds Ez egy msik bekezds

3.3. bra: Bekezdsek A bekezdsekhez a bngsz alaprtelmezetten trkzket is kapcsol. A kvetkez pldban hiba szerepel az jsor s a tbb szkz karakter, a bngsz minden elvlaszt karakter-sorozatot egy szkzknt rtelmez s jelent meg. A tnyleges trdelst mindig a bngsz ablakmrete s a benne lev szveg hatrozza meg. Ez egy tbb sorbl ll s sok szkzt tartalmaz bekezds.

3.4. bra: Szveg trdelse A kvetkez plda jl mutatja a kttt szerkezet szveg (pldul vers) idzsnek nehzsgt: Mikor trsz mr az eszedre, te Sndor? Tivornya jjeled s napod; Az istenrt! hisz az rdg elvisz, Ha mg sok gy folytatod.

3.HTML

37. oldal

3.5. bra: Szveg trdelse

SortrsekA
tag hasznlhat, ha j sort szeretnnk kezdeni, de nem akarunk j bekezdst kezdeni. A br kiknyszerti a sortrst.Ez itt
egy tbb
sorra trdelt bekezds

3.6. bra: Tbb soros szveg A br elem res, vagyis nincs kln zr tagja.

MegjegyzsekA megjegyzs tagot megjegyzsek elhelyezsre hasznljuk. A bngsz nem veszi figyelembe a megjegyzsbe rt szveget. (Termszetesen a megjegyzs megtekinthet a forrskdban.)

A megjegyzsben nem fordulhat el kt ktjel a > nlkl.

Sznes httrA kvetkez plda bemutatja, hogyan lehet httrsznt megadni a HTML oldalunkhoz.

38. oldal Srga Sznes httr!

Web programozs I. (0.7. verzi)

3.7. bra: Sznes httr

Hasznos tippek Amikor HTML oldalakat hozunk ltre, mindig nzzk meg ms bngszben, ms kperny (ablak) felbontsban is. Soha ne szkzkkel s Enterrel akarjunk szveget formzni. A bngsz eldobja a szvegben tallt tbbszrs szkzket, s egyetlen szkzknt veszi figyelembe. res p tagok hasznlata szintn nem javasolt, inkbb a br tag segtsgvel rdemes a sortrst kiknyszerteni. Sokan elhagyjk a p zr tagot a bekezds vgrl. Az XHTML szigorbb szablyai miatt ezt nem rdemes alkalmazni. Az oldal szakaszokra trshez alkalmazhat a hr vzszintes vonallal elvlaszt tag. Ez a tag is res, zr pr nlkli.

sszefoglal tblzatTag Lers HTML dokumentumot definil A dokumentum trzst definilja Cmsorokat definil Bekezdst definil

3.HTML
Egyszer sortrst szr be Vzszintes elvlaszt vonalat szr be Megjegyzst definil

39. oldal

FeladatKsztsen egy tetszleges klt verseit tartalmaz oldalt!

Az oldal fcme a klt neve legyen Legalbb hrom verset tartalmazzon:

A verscmek alacsonyabb szint cmek legyenek Versszakonknt egyetlen bekezdst alkalmazzon, a sorok vgn sortrssel A verseket egy vzszintes vonal is vlassza el egymstl

CSS feladatok

Alkalmazzon a fenti oldalra httr-, s szeglyformzsokat, lltson be megfelel trkzket. Ksztsen szamrfles bekezdst!

3.4. Hogy nzzk meg egy oldal HTML kdjt?Gyakran elfordul, hogy a weben bngszve megtetszik egy oldal, s szeretnnk megnzni a forrst. (A szerz vlemnye szerint ez az egyik legjobb mdszer a tanulsra, hiszen ekkor nem kls, hanem bels motivl er hat.) Hogyan tehetjk ezt meg? Keressk meg a bngsznk Nzet menjt, majd Forrs, vagy Oldal forrsa (vagy valami hasonl nev) menpontot. A szerz javasolja a fejlesztshez a Firefox nev bngszt, amely eleve webfejlesztk szmra lett kifejlesztve, s tbb ezer kiterjesztse (plug-in) kzl j nhny a HTML forrs knnyen ttekinthet megjelentst szolglja. Kvetkezzen a teljessg ignye nlkl nhny kapcsold kiterjeszts.

40. oldal

Web programozs I. (0.7. verzi)

Tidy HTML Validator27

3.8. bra: Forrs a Tidy HTML Validator megjelentsvel A kpen lthat, ahogy a sznkiemels alatt a szintaktikai hibk s a hibk rszletes lersa is megtekinthetk. Kis gyessggel (Forrskd javtsa gomb) akr a hibk egy rsztl is megszabadulhatunk.

View Source Chart28

3.9. bra: View Source Chart mkdse Ennek a kiterjesztsnek f szolgltatsa a kd sznezssel trtn megjelentse. Radsul az brn lthat mdon az egymsba gyazsi hierarchia kvethet a vonalak alapjn, s ezek a dobozok kattintsra kinylnak-becsukdnak.

27 28

http://users.skynet.be/mgueury/mozilla/ http://jennifermadden.com/scripts/ViewRenderedSource.html

3.HTML

41. oldal

FireBug29

3.10. bra: FireBug A kiterjeszts az oldalt s a forrskdjt teljesen szimultn mutatja, rdemes megfigyelni az egrkurzorral irnythat kk dobozokat.

3.5. FormzsA HTML definil nhny formzsra szolgl elemet, mint pl. flkvr vagy dlt szveg formzshoz.

Szvegformz tagokTag Lers Flkvr szveget definil Nagyobb szveget definil Kiemeli a szveget Dlt szveget definil Kisebb szveget definil Ersebb kiemels29http://www.joehewitt.com/software/firebug/42. oldal Als indexet definil Fels indexet definil Beszrt szveget jell Trlt szveget jellWeb programozs I. (0.7. verzi)A kvetkez plda mutatja a tagok hatst:Ez a szveg flkvr
Ez a szveg kiemelt
Ez a szveg nagyobb
Ez a szveg hangslyos
Ez a szveg dlt
Ez a szveg kisebb
Ez a szveg tartalmaz als indexet
Ez a szveg tartalmaz fels indexet3.11. bra: Szvegformzsok Meg kell jegyezni, hogy azokat a tagokat rdemes eltrbe helyeznnk, amelyek nem a kinzetre, hanem a jelentsre utalnak. ppen ezrt kerlend pl. a b s i tagok hasznlata, helyette a strong s em tagok javasolhatk, amit persze CSS segtsgvel kinzetben is testre szabhatunk.3.HTML43. oldalSzmtgp kimenetet definil tagokTag Lers Forrskdot definil Elformzott szveget definil: az elvlaszt (white space) karaktereket nem a HTML-ben szoksos, hanem direkt mdon rtelmezi3.12. bra: ForrskdIdzet, kiemels s defincis tagokTag Lers Rvidtst definil Mozaikszt definil Cm elemet definil Szveg rsirnyt hatroz meg Hossz (akr tbb bekezdses) idzetet jell Rvid (ltalban bekezdsen belli) idzetet jell Idzetet jell Defincit jell Nagy Gusztv
Kecskemt
44. oldalUN
WWW
Ez a szveg jobbrl olvashat Az ilyen hosszabb idzeteket a bngsz trkzkkel is kiemeli Web programozs I. (0.7. verzi)3.13. bra: Idzet, definciFeladatKsztsen HTML oldalakat, amelyek a kvetkez kt kpen30 lthat HTML tartalomra a lehet legjobban hasonltanak.30A kp a http://design.scolar.hu/tipografia.html oldal felhasznlsval kszlt3.HTML45. oldalCSS feladatokKsztsen rvidtseket (abbr) tartalmaz oldalt, amely a tantrgy sorn eddig elfordult rvidtseket tooltip-knt megjelenti. CSS segtsgvel oldja meg, hogy az ilyen rvidtsek srga httrsznnel s szaggatott piros szegllyel jelenjenek meg. Ksztsem idzeteket tartalmaz oldalt. Hasznljon a blockquote elemekhez idzjelet brzol kpet!3.6. Karakter entitsokBizonyos karakterek (mint pldul a < s >) specilis jelentsek a HTML-ben, ezrt nem hasznlhatk a foly szvegben. Ha egy ilyen specilis karaktert akarunk megjelenteni, akkor karakter entitst kell alkalmaznunk. A karakter entits hrom rszbl ll: & az elejn, ; a vgn, a kett kztt pedig egy entits nv, vagy # s szmkd. Ha pldul a < jelet szeretnnk megjelenteni, akkor a dokumentumba az < vagy a < karaktersorozatot kell gpelnnk.Megjegyzs: az entitsok kis-nagybet rzkenyek!46. oldalWeb programozs I. (0.7. verzi)Nem trhet szkzA gyakorlatban taln a legtbbet alkalmazott karakter entits a nem trhet szkz. A HTML a tbb egymst kvet elvlaszt (n. white space) karaktereket csak egy szkzknt jelenti meg. Ilyen esetekben szoks a entitst egyms utn tbbszr alkalmazni, ugyanis ezeket tnylegesen figyelembe veszi a bngsz. Ez azonban nem felel meg a HTML eredeti cljnak, s a mai technikai lehetsgeknek sem. (Stlus formzsok segtsgvel ezek a problmk sokkal elegnsabban oldhatk meg.) Ennek az entitsnak eredetileg az a clja (s a szerz vlemnye szerint csak ilyen esetben szabadna alkalmazni), hogy a tbb szbl ll kifejezsek (pldul tulajdonnv) esetn a sor vgn ne trje szt a bngsznk a kifejezst, hanem mindenkppen egy sorba kerljenek. Pldul a kvetkez nv mindig egy sorba, trdels nlkl fog kerlni:NagyGusztvkezetes karakterekAz angol abc-ben nem szerepl karakterek (gy a magyar nyelv kezetes karakterei is) sokig problmt okoztak a HTML szerkeszts sorn. Ezrt korbban szoks volt az kezetes karaktereket is entitsok segtsgvel megadni. A mai napra azonban ezek a problmk lnyegben megszntek, ezrt a szerz vlemnye szerint teljesen indokolatlan az entitsok alkalmazsa. Helyette inkbb a pontos karakterkdolsra rdemes figyelmet fordtani.Tovbbi karakter entitsokLers Jelents Nem trhet szkz < > & " ' Kisebb, mint Nagyobb, mint s Idzjel Aposztrf Paragrafus Copyright Entits nv < > & " ' Entits szmkd < > & " ' Az entitsok teljes listjt a HTML referenciban rdemes keresni.3.7. LinkekA HTML linkeket (hivatkozsokat) hasznl arra, hogy az oldalunkhoz ms tartalmakat kapcsolhassunk.3.HTML47. oldalA horgony () tag s a href tulajdonsgEgy horgony hivatkozni tud egy tetszleges webes erforrsra, pl. egy HTML oldalra, egy kpre, zenre stb. A horgony szintaxisa a kvetkez:Megjelen szvegA href tulajdonsgoz rendelt rtk hatrozza meg, hogy a bngsz hogyan reagljon a link kivlasztsra. (Itt nem csak kattints jhet szba, hiszen billentyzetrl is lehet linket kivlasztani a TAB segtsgvel, s akr gyorsbillenty (accesskey) is rendelhet egy horgonyhoz.) A kezd s a zr tag kztti szveg (vagy akr bonyolultabb tartalom) lesz kattinthat, s (alaprtelmezetten) kk sznnel alhzott link. A kvetkez plda egy linket definil a Weblabor honlapjra:A Weblabor honlapja.A target tulajdonsgAlaprtelmezetten egy link kivlasztsa esetn az j oldal az aktulis helyett jelenik meg. Ez azonban mdosthat. A kvetkez link egy j ablakban nyitja meg a Weblabor honlapjt:WeblaborEz a tag mra mr elvesztette a jelentsgt, az XHTML mr nem is teszi lehetv a tulajdonsg hasznlatt. Sokan felteszik a krdst: Mirt? Itt elssorban azt a szemlletet kell ltni, hogy a felhasznl dnthesse el, hogy mi hol jelenjen meg. Nem szerencss, ha errl a webfejleszt helyette dnthet.A name tulajdonsgEgy hivatkozs alaprtelmezetten a HTML oldal tetejt jelenti. Nha azonban praktikus, ha egy oldalon bell is pontostani tudjuk a link cljt. Erre szolgl ez a tulajdonsg. A kvetkez mdon tudunk ltrehozni egy ugrsi clpontot:PHPEz az elem vizulisan nem fog megjelenni (pl. alhzssal), hiszen ez a kapcsolat vgpontja lehet, s nem a kezdpontja. Ha erre a pontra akarunk hivatkozni egy linkkel, akkor a kvetkez mdon kell alkalmaznunk:Termszetesen akr az oldalon bell is lehet ilyen linkeket alkalmazni:UgrsHasznos tippekHa egy alknyvtrra akarunk hivatkozni, az URL vgre tegyk ki a / karaktert. gy a webkiszolgl egy felesleges prblkozst megsprolva gyorsabban fogja megtallni a keresett knyvtr tartalmt. (Elszr a knyvtrnevet llomnynvknt prblja rtelmezni, ha nincs mgtte / karakter.)48. oldalWeb programozs I. (0.7. verzi)Hossz oldal esetn tegynk az elejre egy tartalomjegyzket a fontosabb fejezetekre mutat bels linkekkel. Ezen kvl szoks az oldal vgn (vagy akr tbb helyen is) az oldal tetejre (elejre) mutat linket alkalmazni (erre a href="#" hasznlhat). Ennek a megoldsnak az a htrnya, hogy a vissza gomb hatsra is az oldalon bell fog a felhasznl ugrlni.FeladatA korbban elksztett verseket tartalmaz oldalt bvtse ki a kvetkezkkel:A klt neve al szrjon be egy tartalomjegyzket, amely az sszes vers cmt tartalmazza, s egyben oldalon belli linkknt is mkdik Minden vers utn helyezzen el egy tartalomjegyzk felirat linket, amivel a tartalomjegyzkre ugorhatunk visszaCSS feladatKsztsen oldalt, amely bels s kls hivatkozsokat is tartalmaz. A kls hivatkozsokat jelljk meg az ilyenkor szoksos httrkppel! (Lehetleg a kpet is rajzoljuk!)3.8. KeretekA keretek segtsgvel egynl tbb HTML oldalt is meg tudunk jelenteni egyetlen bngsz ablakban. A keretek nhny vvel ezelttig nagy npszersgnek rvendtek. Segtsgkkel pusztn kliens oldali eszkzkkel (HTML, CSS) sszetett oldalakat lehet ltrehozni. Mra azonban mr egyre kevesebb helyen indokolt, s egyre kevesebb helyen is hasznljk. (rdemes belegondolni, hogy nagy portlok szinte egyltaln nem alkalmazzk.) A teljessg ignye nlkl nhny htrny, mieltt belekezdennk a keretek hasznlatba: A fejlesztnek tbb dokumentumot kell karbantartani Nagyon nehz kinyomtatni egy keretes oldalt Nem lehet knyvjelzt rakni egy llapothoz, hiszen az URL-ben csak a foldal cme szerepel Az elzhz hasonlan nem lehet egy oldalra hivatkozni Ha eszttikai okokbl letiltjuk a keret grgetsvjt, a tervezettnl kisebb mret megjelents esetn a keret kilg rszei lnyegben elrhetetlenek lesznekA sort lehetne folytatni a szerver oldali programozs nehzsgeivel.A frameset tagA tag hatrozza meg, hogy az ablakot hogyan akarjuk felosztani keretekre. Egy frameset esetn vagy vzszintes, vagy fggleges irnyban oszthatjuk fel az ablakot.3.HTMLMegjegyzs: frameset esetn nincs szksg a body elemre.49. oldalA frame tagA tag azt hatrozza meg, hogy egy-egy ablakrsz milyen HTML llomnyt jelentsen meg. A kvetkez plda kt oszlopra bontja az ablakot. Az els keret a bngsz ablak 25%-t, a msodik 75%-t fogja elfoglalni. A src tulajdonsgokban megadott oldalak lesznek az oldal keretei. A szzalkos megads helyett pixeles mennyisg is alkalmazhat, s legfeljebb egyszer hasznlhatjuk a * karaktert a fennmarad hely kitltshez.A noframes tagHa igazn korrektek akarunk lenni, akkor alkalmazhatjuk a tagot, ami akkor jut szerephez, ha a megjelent eszkz nem tudja kezelni a kereteket. Itt azonban nem a korbban elterjedt tltse le az XY bngszt tpus zenetekre rdemes gondolni, hanem az oldal keretek nlkl mkd vltozatra. A szerz tapasztalata s tudomsa szerint eddig nagyon kevs oldal vette a fradtsgot, hogy a keretes vltozat mellett keretek nlkl is tkletes funkcionalitssal br vltozatot ksztsen. Akik mgis vettk a fradtsgot, hamarosan rjttek, hogy a ltogatk zme a keret nlkli vltozatot rszesti elnyben, gy a krds eldlt. Nzznk egy minimlis pldt az alkalmazsra: Ez a bngsz nem jelenti meg a kereteket! Az iframe tagAz iframe tag dobozszer keretet definil. Ezt a tagot is tbbnyire rdemes elkerlni. Igen specilis esetekben engedhet meg.Hasznos tippekHa a keretnek van lthat szeglye, akkor a felhasznl vonszolssal t tudja mretezni a kereteket. Ha ezt szeretnnk elkerlni, adjuk meg a frame tagnak noresize="noresize" tulajdonsgot.50. oldalWeb programozs I. (0.7. verzi)Egymsba gyazsA keretek egymsba gyazsnak segtsgvel akr sszetettebb szerkezetek is kialakthatk. A kvetkez pldban a frame_a.htm tartalma az ablak fels felt foglalja el, az als felben pedig vzszintesen 25%:75% arnyban felosztva a msik kt oldal osztozik: Navigcis keretNavigcis keret alkalmazsa esetn a link segtsgvel cserlni kvnt keretet nvvel kell elltni, hogy a link hivatkozsa egyrtelm lehessen. (E nlkl a link a sajt kerett cserln ki.) A foldal kdjban a name tulajdonsggal adhatunk nevet a jobb oldali keretnek: A bal oldali navigcis keretben a linkek target tulajdonsgban kell ezt a keretet megadni:Frame a
Frame b
Frame cgyes megolds az is, ha a navigcis keret HTML kdjban megadjuk a linkek esetn alaprtelmezett cl keret nevt a head elem base tagjnak href tulajdonsgval. Az elz plda gy mdosulna: Frame a
Frame b
Frame csszefoglal tblzatTag Lers keretet definil keret-csoportot definil a keretet nem ismer bngsz esetn megjelen tartalom3.HTML soron belli keretet definil51. oldal3.9. TblzatokTblzatokat a tag segtsgvel lehet ltrehozni. Egy tbla sorokat tartalmaz ( tag), s minden sor cellkat ( tag). A tbla celli szveget, kpet, bekezdst, listt, rlapokat, jabb tblzatokat is tartalmazhatnak. Nzznk egy egyszer, 22 cells tblzatot: 1. sor, 1. 1. sor, 2. 2. sor, 1. 2. sor, 2. cella cella cella cella 3.14. bra: TblzatTblzat szeglyekAlaprtelmezetten a tblzatok szeglyek nlkl jelennek meg. Van azonban lehetsg arra, hogy szeglyek is megjelenjenek az oldalon: az elz pldban is lthat border tulajdonsggal lehet belltani a szegly szlessgt. (A szm kppontban rtend.)Tblzat fejlcA tblzat els sorba szoks fejlc informcikat elhelyezni. Ez magyarzza az alatta tallhat rtkek jelentst. Ebben az esetben az els sort cellit tagokkal kell megadni:52. oldal 1. fejlc 2. fejlc 1. sor, 1. cella 1. sor, 2. cella 2. sor, 1. cella 2. sor, 2. cella Web programozs I. (0.7. verzi)3.15. bra: Tblzat fejlccel Termszetesen fejlc informcit az els oszlopban is lehet alkalmazni, ekkor a sorok els celljt kell th taggal megadni.res cellkA tartalom nlkli (res) cellk a legtbb bngsz esetn nem jelennek meg. Pldul az utols cella tartalmnak trlse esetn a kvetkezt lthatjuk:3.16. bra: res cella Szoks ilyenkor egy nem trhet szkzt () tenni a cellba, ami kiknyszerti a szegly megjelentst.3.HTML53. oldalTblzat cmMltatlanul keveset hasznlt elem a , amivel a tblzat cmt tudjuk korrekt mdon megadni. Lehetsg van annak kivlasztsra is, hogy a ngy lehetsges oldal kzl hol jelenjen meg a cm. A caption elemnek a table els elemnek kell lennie, ha hasznljuk: Tblzat cme 1. fejlc 2. fejlc 3.17. bra: Tblzat cmmelCellk sszevonsaA colspan s rowspan tulajdonsgok segtsgvel cellkat lehet egyesteni: Nv Telefon Bill Gates 555 77 854 555 77 855 54. oldalWeb programozs I. (0.7. verzi)3.18. bra: sszevont cellkTippekA , s elemek a cljuk szerint nagyon hasznos elemek lennnek, de sajnos a bngszk igen vltoz mdon tmogatjk ket, ezrt a gyakorlatban nem is szoks alkalmazni. A tblzat cellk tovbbi tblzatokat is tartalmazhatnak, amivel sszetett szerkezetek alakthatk ki.sszefoglal tblzatTag Lers tblzatot definil fejlcet definil sort definil cellt definil cmet definil fejlcet definil tblzat trzset definil lblcet definil3.HTML55. oldalFeladatKsztsen HTML oldalt, amelyik a lehet leginkbb hasonlt a kvetkez oldalra:CSS feladat Ksztsen egy egyszerbb tblzatos oldalt. A tblzat kinzett prblja minl inkbb a mai szoksoknak megfelelen szerkeszteni, pl. zebracskos httrrel.3.10. ListkA HTML tmogatja a szmozott, felsorolt s definci-listk ltrehozst.56. oldalWeb programozs I. (0.7. verzi)Felsorolt listaA felsorolt listk olyan elemeket tartalmaznak, amelyeket nem kell szmozssal azonostanunk, ehelyett egy felsorolsi szimblum (alaprtelmezetten egy fekete karika) jelzi vizulisan a