web programozas 0.5 (főiskolai jegyzet)

Author: toth-zoltan

Post on 30-May-2018

220 views

Category:

Documents


0 download

Embed Size (px)

TRANSCRIPT

  • 8/14/2019 Web Programozas 0.5 (fiskolai jegyzet)

    1/261

    Nagy GusztvNagy Gusztv

    Web programozs

    0.5. verzi0.5. verzi

    2007.2007. mjusmjus

  • 8/14/2019 Web Programozas 0.5 (fiskolai jegyzet)

    2/261

    2. oldal Web programozs (0.5. 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:

    Jelld meg! A szerz vagy a jogosult ltal meghatrozott mdon kell meg-jellni a mvet (pl. a szerz s a cm feltntetsvel).

    Ne add el! Ezt a mvet nem hasznlhatod fel kereskedelmi clokra.

    A szerzi jogok tulajdonosnak rsos engedlyvel brmelyik fenti feltteltl eltrhetsz.

    A fentiek nem befolysoljk a szabad felhasznlshoz fzd, illetve az egyb jogokat.

    Ez a Legal Code (Jogi vltozat, vagyis a teljes licenc) szvegnek kzrthet nyelvenmegfogalmazott kivonata.

    Ez a kivonat a http://creativecommons.org/licenses/by-nc/2.5/hu/oldalon is olvasha-t. A teljes licensz a http://creativecommons.org/licenses/by-nc/2.5/hu/legalcode ol-dalon rhet el.

    E jegyzet hivatalos honlapjrl (http://nagygusztav.hu) tlthet le a mindenkori leg-frissebb verzi.

  • 8/14/2019 Web Programozas 0.5 (fiskolai jegyzet)

    3/261

    3. oldal

    Bevezets

    Felhasznls

    Ezzel a jegyzettel arra vllalkozok, hogy a Kecskemti Fiskola GAMF Karn tanul m-szaki informatikus hallgatk kezbe olyan rsos anyagot adjak, amely az eladsokmellett tovbbi segtsget ad a Web kliens s szerver oldali nyelvei, technolgii alap-szint megismersre.

    A jegyzet hasznlathoz nem nlklzhetetlen, de ersen javasolt az eladsok ltogat-sa. 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 el-lenrz krdsek alapos tgondolst, valamint a gyakorl feladatok megoldst javas-lom. E nlkl a tantrgy teljestse a hallgatk tbbsge szmra nem lesz eredmnyes.

    A jegyzet felttelezi az alapvet programozsi s hlzati alapismeretek megltt. Ennekhinyban az anyag elsajttsra tbb idt kell fordtani.

    Verzi

    A jelenlegi 0.5-s verzi a flv sorn folyamatosan kszlt. A jegyzet msodik felbensajnos mg sok tma csak vzlatosan, hinyosan szerepel. Ezek finomtsa, kiegsztse az ellenrz krdsekkel s gyakorl feladatokkal egytt - a kvetkez flvben fogfolytatdni.

    Ksznet A jegyzet elksztshez elssorban a W3Schools1 oktatanyagait hasznltam fel. Azanyagok fordtsban rsztvev hallgatkat szintn ksznet illeti.

    Vgl szeretnk ksznetet mondani a Weblabor2 szakmai kzssgnek, akiktl a leg-tbbet tanultam tbbek kztt szemlletmdban.

    Kecskemt, 2007. mjus

    a szerz

    1 http://www.w3schools.com/2 http://weblabor.hu/

  • 8/14/2019 Web Programozas 0.5 (fiskolai jegyzet)

    4/261

    4. oldal Web programozs (0.5. verzi)

    Tartalomjegyzk

    1. Fejlesztkrnyezet kialaktsa..........................................................................................81.1. Szerver opercis rendszer.........................................................................................8

    1.2. Szerveralkalmazsok..................................................................................................91.2.1 XAMPP integrlt telept csomag.........................................................................91.2.2 Az Apache teleptse............................................................................................111.2.3 A PHP teleptse..................................................................................................13

    1.3. Fejleszteszkzk......................................................................................................141.4. Grafikus programok..................................................................................................14

    2. A webfejleszts alapjai.....................................................................................................162.1. Tervezsi, fejlesztsi szempontok.............................................................................16

    2.1.1 Honlaptervezs....................................................................................................162.1.2 Navigcis struktra...........................................................................................162.1.3 Oldaltervezs.......................................................................................................182.1.4 Figyeljnk a ltogatk visszajelzseire...............................................................212.1.5 Milyen monitort hasznlnak a ltogatk?..........................................................212.1.6 Milyen bngszt hasznlnak a ltogatk?........................................................212.1.7 Mi van a srltekkel?..........................................................................................22

    2.2. A web szabvnyai......................................................................................................222.2.1 A World Wide Web Consortium (W3C).............................................................222.2.2 Validtorok.........................................................................................................23

    2.3. Ellenrz krdsek...................................................................................................233. HTML..............................................................................................................................24

    3.1. Bevezets...................................................................................................................243.2. Tagok........................................................................................................................263.3. Alapvet HTML tagok..............................................................................................273.4. Hogy nzzk meg egy oldal HTML kdjt?.............................................................313.5. Formzs...................................................................................................................333.6. Karakter entitsok....................................................................................................363.7. Linkek........................................................................................................................373.8. Keretek.....................................................................................................................383.9. Tblzatok.................................................................................................................413.10. Listk.......................................................................................................................443.11. rlapok....................................................................................................................463.12. Kpek.......................................................................................................................50

    3.13. Oldal httere...........................................................................................................533.14. Sznek......................................................................................................................533.15. Szabvnyossg.........................................................................................................533.16. Stlusok....................................................................................................................543.17. Fejrsz......................................................................................................................553.18. Szkriptek.................................................................................................................563.19. ltalnos tulajdonsgok.........................................................................................573.20. Esemny tulajdonsgok.........................................................................................583.21. URL-kdols...........................................................................................................603.22. Szemantikus HTML...............................................................................................603.23. Validtor.................................................................................................................60

    3.24. Ellenrz krdsek................................................................................................603.25. Tovbbi forrsok....................................................................................................644. XHTML............................................................................................................................65

  • 8/14/2019 Web Programozas 0.5 (fiskolai jegyzet)

    5/261

    5. oldal

    4.1. XML alapok...............................................................................................................654.1.1 Mire hasznljuk az XML-t?.................................................................................654.1.2 XML szintaxis.....................................................................................................66

    4.2. XHTML a gyakorlathoz kpest................................................................................674.3. Dokumentumtpus-deklarci.................................................................................69

    4.3.1 XHTML 1.0 DTD-k.............................................................................................694.3.2 XHTML 1.1 DTD.................................................................................................694.4. Visszafel kompatibilits.........................................................................................704.5. Tovbbi forrsok.......................................................................................................70

    5. CSS....................................................................................................................................715.1. Bevezets....................................................................................................................715.2. A CSS nyelvtana........................................................................................................735.3. A background tulajdonsgok....................................................................................75

    5.3.1 Httrszn............................................................................................................755.3.2 Httrkp............................................................................................................76

    5.4. Szvegek megjelentse............................................................................................77

    5.5. Betk formzsa.......................................................................................................785.6. Szeglyek...................................................................................................................795.7. Trkzk a szeglyen bell s kvl..........................................................................815.8. Listk.........................................................................................................................815.9. Mretek.....................................................................................................................835.10. Megjelents............................................................................................................83

    5.10.1 A lebegtets.......................................................................................................845.10.2 Pozcionlsi smk..........................................................................................885.10.3 Lthatsg.........................................................................................................895.10.4 Z-index..............................................................................................................90

    5.11. Ltszlagos osztlyok..............................................................................................90

    5.11.1 Linkek viselkedse.............................................................................................905.11.2 Els gyermek.....................................................................................................905.11.3 Els bet s els sor...........................................................................................91

    5.12. Mdia tpusok..........................................................................................................915.13. Ellenrz krdsek..................................................................................................925.14. Validtor..................................................................................................................945.15. Tovbbi forrsok.....................................................................................................95

    6. JavaScript........................................................................................................................966.1. Bevezets a JavaScript nyelvbe................................................................................96

    6.1.1 Vltozk...............................................................................................................976.1.2 Elgazsok...........................................................................................................98

    6.1.3 Opertorok..........................................................................................................996.1.4 Dialgusablakok................................................................................................1026.1.5 Fggvnyek........................................................................................................1036.1.6 Ciklusok.............................................................................................................1046.1.7 Esemnykezels.................................................................................................1066.1.8 Kivtelkezels....................................................................................................108

    6.2. Objektumorientlt programozs............................................................................1096.2.1 Fontosabb objektumok rviden........................................................................110

    6.3. HTML DOM............................................................................................................1126.3.1 getElementById.................................................................................................1126.3.2 A Document objektum......................................................................................1136.3.3 Az Event objektum............................................................................................113

    6.4. Diszkrt JavaScript.................................................................................................1146.4.1 Elugr ablak plda...........................................................................................114

  • 8/14/2019 Web Programozas 0.5 (fiskolai jegyzet)

    6/261

    6. oldal Web programozs (0.5. verzi)

    6.4.2 E-mail cm elrejtse...........................................................................................1166.5. Gyakran hasznlt fggvnyek.................................................................................117

    6.5.1 Stik kezelse.....................................................................................................1176.5.2 getElementsByClass..........................................................................................1196.5.3 addEvent............................................................................................................119

    6.5.4 addLoadEvent...................................................................................................1206.6. Kdtrak.................................................................................................................1206.7. Alkalmazsok...........................................................................................................1216.8. Felhasznli lmny...............................................................................................122

    6.8.1 Kliens oldali rlap ellenrzs............................................................................1226.8.2 Hossz listk bngszse helyett.....................................................................124

    6.9. Elavult technikk....................................................................................................1286.10. Tovbbi forrsok...................................................................................................128

    7. AJAX..............................................................................................................................1297.1. Bevezet plda.........................................................................................................1307.2. A bngszk AJAX tmogatsa..............................................................................131

    7.3. XML-kommunikci...............................................................................................1327.4. Tovbbi forrsok.....................................................................................................1328. PHP nyelv s krnyezet.................................................................................................133

    8.1. Alapok......................................................................................................................1338.1.1 Szintaxis.............................................................................................................1338.1.2 Vltozk.............................................................................................................1358.1.3 Opertorok.........................................................................................................1358.1.4 Elgazsok.........................................................................................................1378.1.5 A switch szerkezet.............................................................................................1398.1.6 Tmbk.............................................................................................................1408.1.7 Ciklusok.............................................................................................................143

    8.1.8 Fggvnyek........................................................................................................1458.1.9 rlapok s felhasznli adatbevitel..................................................................1488.1.10 A $_GET tmb................................................................................................1498.1.11 A $_POST tmb...............................................................................................150

    8.2. Halad tmk..........................................................................................................1518.2.1 Dtumok kezelse..............................................................................................1518.2.2 Az include s trsai...........................................................................................1528.2.3 Fjlkezels.........................................................................................................1548.2.4 Fjl feltltse.....................................................................................................1568.2.5 Stik kezelse....................................................................................................1588.2.6 Munkamenet-kezels.......................................................................................160

    8.2.7 Levlklds........................................................................................................1618.2.8 PHP hibakezels...............................................................................................1648.2.9 Kivtelkezels....................................................................................................169

    8.3. Adatbzis-kapcsolat kezelse PHP-ben.................................................................1748.3.1 MySQL alapok...................................................................................................1748.3.2 Kapcsolds egy MySQL adatbzishoz ...........................................................1758.3.3 Adatbzisok s tblk ltrehozsa....................................................................1768.3.4 Adatok bevitele adatbzisba.............................................................................1798.3.5 Lekrdezs........................................................................................................1808.3.6 A WHERE zradk...........................................................................................1828.3.7 Az ORDER BY kulcssz....................................................................................1838.3.8 Adatok mdostsa...........................................................................................1838.3.9 Adatok trlse az adatbzisbl.........................................................................1848.3.10 ODBC kapcsolat ltestse..............................................................................185

  • 8/14/2019 Web Programozas 0.5 (fiskolai jegyzet)

    7/261

    7. oldal

    8.4. XML kezels............................................................................................................1878.4.1 Expat XML elemez..........................................................................................1878.4.2 XML DOM.........................................................................................................1878.4.3 SimpleXML.......................................................................................................189

    9. PHP megoldsok............................................................................................................191

    9.1. Egy portl vza.........................................................................................................1919.1.1 GAMF honlap.....................................................................................................1919.1.2 Egy msik megkzelts....................................................................................1969.1.3 MVC megkzelts.............................................................................................198

    9.2. Biblia.......................................................................................................................2039.3. Belptet-rendszer.................................................................................................2089.4. Tervezsi mintk.....................................................................................................214

    9.4.1 Front Controller................................................................................................2149.4.2 Strategy..............................................................................................................2159.4.3 Data Access Object............................................................................................2179.4.4 MVC..................................................................................................................220

    10. Sablonrendszerek........................................................................................................22210.1. Smarty...................................................................................................................22210.1.1 Smarty alapok..................................................................................................22310.1.2 Vltoz mdostk ..........................................................................................22510.1.3 Vezrlsi szerkezetek......................................................................................22610.1.4 Gyorstrazs....................................................................................................230

    10.2. A PHP, mint sablonnyelv......................................................................................23110.2.1 Sablon osztly..................................................................................................23110.2.2 Blogbejegyzs..................................................................................................233

    11. Keretrendszerek...........................................................................................................23511.1. Code Igniter...........................................................................................................235

    11.1.1 Telepts............................................................................................................23611.1.2 Az URL-ek felptse.......................................................................................236

    11.2. CakePHP................................................................................................................23611.2.1 Alapkoncepci..................................................................................................23611.2.2 A CakePHP teleptse......................................................................................23811.2.3 Konfigurci....................................................................................................23911.2.4 GyorsVz azaz Scaffolding kpessgek...........................................................24211.2.5 Nzetek............................................................................................................24411.2.6 Komponensek..................................................................................................246

    12. Tovbbi szerver platformok........................................................................................24912.1. J2EE......................................................................................................................249

    12.2. Microsoft .NET.....................................................................................................24912.2.1 A .NET Keretrendszer.....................................................................................24912.2.2 A .NET ptkvei...........................................................................................25012.2.3 .NET Szoftver...................................................................................................25112.2.4 SQL Server 2000.............................................................................................252

    12.3. Python...................................................................................................................25312.4. Ruby on Rails........................................................................................................253

    13. Tartalomkezel rendszerek.........................................................................................25414. llskeres prbafeladatok.........................................................................................255

    14.1. Egyszer belptet-rendszer.................................................................................25514.2. Dinamikus rlapgenerl osztly.........................................................................25514.3. Cmjegyzk alkalmazs.........................................................................................25714.4. llshirdetsek......................................................................................................257

  • 8/14/2019 Web Programozas 0.5 (fiskolai jegyzet)

    8/261

    8. oldal Web programozs (0.5. verzi)

    1. Fejlesztkrnyezet kialaktsa

    Mieltt a web nyelveinek, technikinak rszleteiben elvesznnk, rdemes egy bevezetfejezetet szentelni a hasznos (s tbbnyire szksges) elismeretek ttekintsnek.

    ltalnos esetben a szerver krnyezet kialaktsa a rendszergazda feladatkrhez tarto-zik, mgis fontos, hogy alapszinten tlssuk a feladatokat, lehetsgeket.

    1.1. Szerver opercis rendszer

    Linux3

    Az elterjedtebb, s nem kimondottan asztali (desktop) hasznlatra sznt Linux disztri-bcik teleptsvel alapbl egy mkd web-, s adatbzis szervert kapunk. Akr r-gebbi, ms felhasznlsok szmra rtktelen vasra is telepthetnk Linuxot, egy kisebbforgalm honlapot tkletesen kpes kiszolglni.

    A nagy nev disztribcik friss verzii a mai cscsgpek meghajtsra s cscs ignyekkiszolglsra alkalmas, szintn knnyen telepthet lehetsget nyjtanak a rendszer-gazdknak.

    nll szerver zemeltetse nlkl, web-hosting szolgltats4 ignybe vtelvel is tbb-nyire Linux alap szerverekkel tallkozhatunk.

    BSD5

    Kevsb kzismert, de egyes rendszergazdk krben stabilitsa miatt nagy npszer-

    sgnek rvend Unix opercis rendszerek. Az alapvet vltozatok szerver feladatokraoptimalizltak, gy nagyszeren alkalmasak a webes krsek kiszolglshoz.

    Windows

    Br les webes krnyezetben nem jelents a rszesedse, azrt elfordul az alkalmazsa.A tanuls szakaszban azonban sokszor a legkzenfekvbb megolds az egyetlen szm-tgpnket szerverr alaktani. A fejezet tovbbi rszben ezzel a tmval fogunk foglal-kozni.

    Megjegyzs: Ha a fejlesztshez Windows opercis rendszert alkalmazunk, akkor rdemes nhny tech-nikai 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. Java-solhat, hogy webes fjl nevben nagybet soha ne szerepeljen a fjlnvben.

    Hasonl okok miatt nem clszer az llomnynevekben kezetes betket vagy egyb specilis karaktere-ket alkalmazni.

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

    3 http://www.linux.hu/4 http://tarhely.lap.hu/5 http://www.bsd.hu/

  • 8/14/2019 Web Programozas 0.5 (fiskolai jegyzet)

    9/261

    1.Fejlesztkrnyezet kialaktsa 9. oldal

    1.2. Szerveralkalmazsok

    1.2.1 XAMPP integrlt telept csomag

    Mivel a szerver alkalmazsok teleptse nem mindig egyszer feladat, prblkozhatunkelre csomagolt, s minden szksges alkalmazst telept s bekonfigurl programok-kal is. Ezek kzl csak egyet nznk meg kzelebbrl, a tbbi alkalmazsa hasonl. Aszolgltatsok krben lehetnek jelentsebb eltrsek is.

    A telept-csomagok htrnya, hogy br tbbnyire mkdnek, egy esetleges hiba elll-sa esetn a hiba megszntetse elgg bajos lehet, mivel kevsb tudunk a csomag bel-ltsaiba beleltni.

    A szerz ltal leginkbb ajnlott csomag az XAMPP6. Az XAMP for Windows 1.5.3a vl-tozata a kvetkez szoftvereket telepti s konfigurlja:

    Apache 2.2.2

    MySQL 5.0.21

    PHP 5.1.4 + PHP 4.4.2-pl1 + PEAR

    PHP-Switch win32 1.0

    XAMPP Control Version 2.3

    XAMPP Security 1.0

    SQLite 2.8.15

    OpenSSL 0.9.8b

    phpMyAdmin 2.8.1

    ADOdb 4.80

    Mercury Mail Transport System v4.01b

    FileZilla FTP Server 0.9.16c

    Webalizer 2.01-10

    Zend Optimizer 3.0.0

    Ha valakinek ez az sszellts tl sok, akkor a Lite vltozatot is alkalmazhatjuk.

    A letlttt teleptprogram lnyegben a szoksos krdseket tesz fel, legfontosabb a te-lepts helye:

    6 http://www.apachefriends.org/

  • 8/14/2019 Web Programozas 0.5 (fiskolai jegyzet)

    10/261

    10. oldal Web programozs (0.5. verzi)

    A telepts vgezhet parancssorbl is a setup-xampp.batparancsllomny futtatsval:

    A telepts utn a Start menbl s parancssorbl is vezrelhetjk az alkalmazsokat, delegegyszerbb az XAMPP Control Panel alkalmazsa:

  • 8/14/2019 Web Programozas 0.5 (fiskolai jegyzet)

    11/261

    1.Fejlesztkrnyezet kialaktsa 11. oldal

    A telepts utn a felteleplt rendszer kiprblsa s a jelszavak megadsa clszer a Se-curity oldalon:

    Ha az XAMPP, vagy ms hasonl komplex programcsomag alkalmazsa mellett dn-tnk, akkor a fejezet htralev rszben bemutatott nll alkalmazsteleptseket mrnem kell elvgeznnk, a rendszernk ksz a webfejleszts tanulsra.

    1.2.2 Az Apache teleptse7

    Az Apache webszerver letltsi oldalrl8tltsk le a megfelel telept llomnyt. A te-lept varzsl ablakai kzl a kvetkezket rdemes kiemelni:

    7 Tovbbi forrs: http://weblabor.hu/cikkek/apachephptelepites8 http://httpd.apache.org/download.cgi

  • 8/14/2019 Web Programozas 0.5 (fiskolai jegyzet)

    12/261

    12. oldal Web programozs (0.5. verzi)

    Sajt gpre telepts esetn ktszer localhostmegadsa javasolt, az e-mail cmnek ebbenaz esetben nincs jelentsge. rdemes szolgltatsknt (service) telepteni a szervert,ugyanis a ellenkez esetben csak manulisan lehet indtani, s egy konzol ablak lland-an a tlcnkon fog cscslni, stb. Termszetesen szolgltatsknt teleptve is van lehet-sg a szerver manulis menedzselsre, teht ettl mg nem kell a szervernek llandanfutnia.

    Telepts utn a gp biztonsgi belltsait, szoftvereit (elssorban a tzfalat) valszn-leg konfigurlni kell a sikeres hasznlat rdekben.

    A kiprbls a bngszbe bert localhostcmmel trtnhet. Sikeres telepts esetn ha-sonlt kell ltnunk:

    Az ra mellett megjelenik az Apache Monitor:

  • 8/14/2019 Web Programozas 0.5 (fiskolai jegyzet)

    13/261

    1.Fejlesztkrnyezet kialaktsa 13. oldal

    A Monitor ikonnak egyszeren tudjuk indtani, lelltani, vezrelni a szervert. A kpenlthat zld hromszg (mint a szoksosPlay gomb) jelzi a szerver futst is.

    A konfigurcival kapcsolatban meg kell mg emlteni a httpd.confllomnyt, amelybena szerver konfigurcija tallhat. Az alapkonfigurci kezdetben tkletesen megfelel,esetleg aDocumentRootbelltsa lehet szksges, ha mshova szeretnnk a webre sznt

    llomnyainkat helyezni.Megjegyzs: A konfigurcis llomnyban az opercis rendszertl fggetlenl mindig a / jelet kell hasz-nlni elrsi utak megadshoz.

    Megjegyzs: A konfigurcis llomnyt a szerver csak az indulsakor veszi figyelembe, gy annak vlto-zsa esetn a szervert jra kell indtani, pl. az Apache Monitor segdprogrammal.

    1.2.3 A PHP teleptse9

    A PHP teleptse is a kvnt teleptkszlet letltsvel kezddik. A letltsi oldalon10 v-laszthatunk, hogy a telept varzslt (installer) vesszk ignybe, vagy pedig a kzi tele-

    ptst vlasztjuk (zip package).Varzsl hasznlata esetn kicsit kevesebb dolgunk lesz, ezrt taln ezt rdemes vlasz-tani. A teleptsi folyamat sorn tbbnyire az alaprtelmezett belltsok elfogadsa ele-gend. Arra rdemes figyelni, hogyStandard helyett Advanced teleptst vlasszunk,hogy legyen lehetsgnk nhny bellts megadsra.

    Az emltsre rdemes krdsek kz tartozik a hiba megjelents (error reporting) szint-je, ahol a tanuls idejre mindenkppen a legtbb tmogatst nyjt alaprtelmezett be-lltst rdemes vlasztani. Kivlaszthatjuk mg, hogy milyen webszervert hasznlunk,s mi legyen az alaprtelmezett kiterjesztse a PHP llomnyainknak. Itt is javasolt azalaprtelmezett .php elfogadsa. A feltett krdsek alapjn a php.inikonfigurcis llo-

    mny is elkszl.

    Apache konfigurci ismt

    Rossz hr, hogy az Apache mg nem tud a PHP-nkrl, ezrt mg vissza kell nylnunk ahttpd.confllomnyhoz.

    Ajnlott modulknt telepteni a PHP-t. Ehhez elszr is a megfelel dllllomny hasz-nlatt el kell rnunk (az elrsi utakat a PHP teleptse alapjn kell megadni):

    LoadModule php5_module "c:/php/php5apache2.dll"

    Aphp 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 aphp.inihelyt 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.

    9 Tovbbi forrsok: http://weblabor.hu/cikkek/apachephptelepites, http://hu.php.net/manual/hu/ins-tall.windows.php10 http://www.php.net/downloads.php

  • 8/14/2019 Web Programozas 0.5 (fiskolai jegyzet)

    14/261

    14. oldal Web programozs (0.5. verzi)

    Megjegyzs: Krhetjk azt is az Apache szervernktl, hogy a .htmlllomnyokat is dolgozza fel, de eztritkn alkalmazzk.

    1.3. Fejleszteszkzk

    Fejleszteszkzk tmjban rdemes elszr a szlssges pldkat ttekinteni.Az eszkzk kzl a Jegyzettmb az a minimum, amivel mg tbb-kevsb lehet web-fejlesztst vgezni, br tbb okbl sem clszer. Egy valamivel jobb szerkeszt (PldulNotePad+11) viszont mr hasznlhat.

    A msik vgletet azok a WYSIWYG (What You See Is What You Get) programok kpvi-selik, amelyek gy teszik lehetv az oldal elksztst, hogy lnyegben semmilyenprogramozi, webes tudsra nincs szksg. Ebbe a kategriba tartozik pldul a np-szer FrontPage. Ezen eszkzknek az elnyk a htrnyuk: br adnak lehetsget akdszint szerkesztsre, mgis ersen korltozzk azt.

    A szerz vlemnye szerint a webfejlesztnek olyan eszkzkre van szksge, amelyekgy adnak tmogatst, hogy a folyamatot a fejleszt, s nem a program vezrli. A prog-ramozi szerkesztprogramok e kzps kategrijnak kt alapvet szolgltatsa akdsznezs s a kdkiegszts. Ingyenes szoftverek kzl kevs tud kdkiegsztst, aztis ltalban csak 1-2 nyelvre.

    A kdsznezst nyjt programok kzl a szerz kedvence a Context12, amely tbbekkztt magyar fellettel tbb, mint 200 nyelv sznezst tudja megoldani. Ezen kvlrendkvl hasznos szolgltatsa a knnyen konfigurlhat sablonbeilleszts. (Pl. egyres HTML llomny esetn 4-5 billentyletssel egy 5-6 soros minimlis HTML oldalthozhatunk ltre.

    1.4. Grafikus programok

    Mivel ez a jegyzet nem grafikusok vagy dizjnerek, hanem webfejlesztk szmra k-szlt, ezrt itt csak nhny alapvet dologrl lesz sz.

    11 http://mypeecee.org/rogsoft/notepad.html12 http://www.context.cx/

  • 8/14/2019 Web Programozas 0.5 (fiskolai jegyzet)

    15/261

    1.Fejlesztkrnyezet kialaktsa 15. oldal

    A fejleszt a vals letben tbbnyire kp(ek) formjban kapja meg az oldal ltvnyter-vt, valamilyen szveges formtumban a szveges rszt, s nyers formban a tartalom-hoz kapcsold fnykpeket. Ebben az esetben a fejleszt feladata az, hogy a ltvnytervalapjn elksztse az oldal HTML s CSS kdjt, s rhzza minderre a dizjnt, a sz-

    veget s a fnykpeket. A grafikus programok szempontjbl ez azt jelenti, hogy a di-

    zjnt alkot kpet tglalap alak rszekre kell vgni, a fnykpeket pedig mretre hozni,javtani, sznkorrekcit, vilgostst stb. vgrehajtani. E feladatok elltsra rszben aPaint is megfelel, de rdemes valamivel komolyabb szoftvert alkalmazni.

    A szerz sokig a Jasc Paint Shop Pro hve volt, de a kzelmltban ttrt a teljesen in-gyenes Paint.NET13programra.

    Gyakorlatilag itt is zls, szoks krdse, hogy ki melyik programot vlasztja. Az alapvetszksges szolgltatsok:

    Ments GIF, JPG s PNG formtumban.

    tmretezs

    Kivgs

    Korrekcik

    Szrs

    13 http://www.getpaint.net/

  • 8/14/2019 Web Programozas 0.5 (fiskolai jegyzet)

    16/261

    16. oldal Web programozs (0.5. verzi)

    2. A webfejleszts alapjai

    Weboldalakat azrt ksztnk (s kszttetnek velnk), mert szeretnnk valamit nyjtania felhasznlknak. A webfejleszts mint az ipari alkot tevkenysg ltalban a fel-

    hasznlk ignyeit nem hagyhatja figyelmen kvl.Megjegyzs: A mvszi nkifejezs, vagy ppen a blogols ltszlag httrbe szortja ezt az elvet, de csakltszlag.

    2.1. Tervezsi, fejlesztsi szempontok

    Egy weboldal sznvonalas elksztst mindig komoly tervezs elzi meg. A vgcl a fel-hasznlk megfelel kiszolglsa, ezrt fontos, hogy a felhasznlk viselkedst, ignyeitfigyelembe vegyk.

    2.1.1 Honlaptervezs

    A honlaptervezs a clok megfogalmazsval kezddik. Kinek szl? Mit szeretnnk k-zlni, tadni? Milyen felhasznli interakcikra lesz szksg?

    Egy nagyobb honlap tervezsnl klnsen fontos, hogy a ltogatk fejvel gondolkoz-zunk, s a szmukra ttekinthet oldalszerkezetet alaktsuk ki. Tipikus hiba lehet, hogyegy cges honlapon a cg bels szerkezete kap hangslyt ahelyett, hogy a ltogatk ig-nyeire sszpontostana.

    Ha pldul a honlapon keresztl termkeket szeretnnk eladni, akkor a termkek tbbszempont szerinti kategorizlsa, kereshetsge, valamint alapos bemutatsa (kpek, vi-deofelvtelek, pontos s rszletes adatok, hivatkozsok a gyrt oldalra, termk-ssze-hasonltsi lehetsg) sokkal fontosabb, minthogy kik a cg vezeti s mi a cg szerkezetifelptse.

    Megjegyzs: Ez az elv sem mindig egyszeren alkalmazhat. A szerz tbb ve fejleszti a GAMF 14hon-lapjt, s nem kevs fejfjst okoz az ta sem a krds: a kzponti honlap s az egyes szervezeti egysgekhonlapjai milyen arnyban szerepeljenek, hogyan viszonyuljanak egymshoz? Vagy mg radiklisabban:kellenek-e egyltaln tanszki honlapok?

    Egy felsoktatsi intzmny esetn a hallgatk htkznapi letben is sokszor megmutatkozik a kar szer-vezeti felptse. (Pldul a szakdolgozat jelentkezsi lapot annl a tanszknl kell leadnia a hallgatnak,ahov a vlasztott konzulense tartozik.) gy nem tnik indokoltnak a teljes kzponti szervezs. A szerzazonban arra trekszik, hogy akr redundns tartalmak rn is tbb oldalrl megkzeltve el lehessen

    jutni a keresett informciig.Pldul minden tanszken van olyan oldal, ahol az oktatk fnykpei, elrhetsgei szerepelnek. De mittegyen a hallgat, ha nem tudja az oktatjnak sem a nevt, sem a tanszkt, csupn az arcra emlkszik?Lapozza fel az sszes tanszki oldalt? Nem! Legyen egy oldal ehhez hasonl esetekre, ahol az sszes oktatalapvet fnykpes tjkoztatja szerepel. Ebbl is ltszik, hogy az egyes tartalmakat bizonyos esetekbenakr tbb helyen, tbbfle formban is rdemes nyjtani.

    2.1.2 Navigcis struktra

    A honlap szerkezetnek kialaktsban nagyon fontos, hogy a tartalmi szerkezet, az olda-lak kztti navigci s az egyes oldalak navigcis lehetsgei teljes egysget alkossa-

    nak. A kvetkez bra egy zavaros szerkezet honlapot mutat:

    14 http://www.gamf.hu/

  • 8/14/2019 Web Programozas 0.5 (fiskolai jegyzet)

    17/261

    2.A webfejleszts alapjai 17. oldal

    ltalban faszerkezet hierarchia kialaktsra rdemes sszpontostani, s szksg ese-tn grff tovbb bvteni.

    Nem magtl rthet az sem, hogy egy men mennyi elemet tartalmazzon. Az egyik vg-let az egyszint felpts, ahol a sok lehetsg kzl nehz vlasztani:

    A msik vglet esetn a sokszint felptsben nem egyszer megtallni az adott tartal-mat:

    Meg kell teht keresni az arany kzputat a kt vglet kztt, s tovbbi alternatv navi-gcit is lehetv tenni.

    Megjegyezs: Jl megfigyelhet a tipikus blog oldalak tbbfle navigcit lehetv tev felptse. A msoldalak esetn jellemz (egy vagy tbbszint) kategriba val sorols s a keress alap navigci term-szetesen itt is jellemz. De ezen kvl mg fontosabb vlt az idbeli elhelyezkeds, a cmkk (tagok) men-ti gyors elrsi lehetsg, st a ms blogokkal val kapcsolatok is.

    A navigci irnyai

    A kvetkez bra jl mutatja, milyen problmval tallja szemben magt a ltogat, ha anyilakkal jelzett mdon a navigcis irny csak fentrl lefel ltezik.

  • 8/14/2019 Web Programozas 0.5 (fiskolai jegyzet)

    18/261

    18. oldal Web programozs (0.5. verzi)

    Kls oldalrl (pl. Google keressi oldal) rkezve a tovbblps nem igazn lehetsges.Mindig gondoskodni kell teht arrl, hogy brmilyen irnyban tovbb tudjunk lpni egyadott oldalrl, akr felfele s oldalra is:

    A felfel irny elssorban kzvetlen szlt is jelenti, s termszetesen a kezdoldalra

    val ugrs is alapvet.

    2.1.3 Oldaltervezs

    Vizsgldsunkat az egsz honlap tervezsrl az egyes oldalak tervezsre helyezzk t.

    Az olvask psztznak

    Ha azt hisszk, hogy a ltogatnk a teljes oldalt el fogja olvasni, akkor tvednk. Mivelaz interneten rengeteg forrs van, a ltogat nhny msodperc alatt eldnti, hogy az ol-dal szmra fontos, rtkes informcit tartalmaz-e. Ha nem ltszik els rnzsre, hogy

    mit is tartalmaz az oldal, akkor a ltogat valsznleg nem kezdi el az oldalt bogarszni.Megjegyzs: Termszetesen itt is vannak kivtelek. Ha az oldal tartalma elsdlegesen ms mdiumon je-lenik meg (pl. ez a jegyzet elsdlegesen A4-es mret nyomtatsra van tervezve, de HTML formban is el-rhet), vagy a jellegnl fogva az olvas tudja, hogy a keresett informci itt van (pl. egy trvny szvegtolvassa), akkor csupn annyi a kvetkez szempontok jelentsge, hogy jobban tjkozdik az oldalon.A kvetkez elvek teht elsdlegesen a webre rt tartalom esetn rvnyesek.

    rdemes tgondolni a sajt tapasztalatok alapjn, hogy mik is segtik az oldal gyors tte-kintst:

    kifejez f s alfejezetcmek,

    rvid sszefoglal a cm utn (szoks flkvren vagy nagyobb betmrettel kiemel-ni),

    linkekkel s egyb jellsekkel kiemelt kulcsszavak, gondolatok

  • 8/14/2019 Web Programozas 0.5 (fiskolai jegyzet)

    19/261

    2.A webfejleszts alapjai 19. oldal

    a bekezdseink legyenek rvidek s lnyegre trk

    a fejezetek legyenek rvidek s ttekinthetk

    hagyjunk megfelel tvolsgot az egyes bekezdsek, fejezetek s cmek kztt

    egy sorba lehetleg ne kerljn 70-nl tbb bet (br a 70-es szmban nincs teljesmegegyezs, a hosszra mindenkppen rdemes figyelni)

    az oldalaink ne legyenek tl hosszak

    ha mgis hossz az oldal (nha indokolt lehet), akkor segtsk az oldalon belli navi-gcit bevezet tartalomjegyzkkel, linkekkel

    A tmhoz a Pszicholgia Online (http://www.pszichologia.hu/) Webdesign alapok I.-III. cikkeit15 javasoljuk tanulmnyozni.

    Oldal navigci

    A honlap minden oldaln egysges szerkezet, jl ttekinthet menrendszer legyen azoldal fels, vagy valamelyik oldals rsznek fels rszn. (Hasznos lehet az oldalon el-helyezett msodlagos navigci is.) A ltogat mindig tudja, hogy hol van a honlapon

    bell, s tudjon a megfelel irnyba naviglni.

    Megjegyzs: Az oldalon elhelyezett egyetlen JavaScript-es vissza link (Vissza) a lehet legrosszabb megolds. A ltogat lehet, hogy a Google oldalrl jutottegy bels oldalra, s keresn az oldalhoz kapcsold egyb oldalakat, de gy nem tallja, hiszen a link aGoogle oldalra fogja visszavinni.

    Viszonylag kevs honlapon hasznljk, pedig sokszor clszer megolds az n. halszl-ks men, ami az adott oldal tartalmi szerkezeten belli helyzett mutatja.

    A Weblabor honlapja16

    jl mutatja a f navigcis elemeket: a WL log a kezdoldalra visz, brhol is vagyunk

    ktszint fmen (itt tl sok helyet foglalna, ha egyszerre ltszana a kt szint sszesvlasztsi lehetsge)

    halszlks men mutatja, hogy az ppen aktulis oldal egy cikk (Cikkek) az adatbzis(Adatbzis) kategribl

    Megoszlanak a vlemnyek arrl, hogy a szvegben lev, vagy a szveg melletti hivatko-zsok hasznosabbak. Az azonban mindenkppen fontos, hogy legyenek hasznos hivatko-zsok a szvegben s a szveg mellett is.

    15 http://www.pszichologia.hu/cikk/cikk.phtml?id=3816 http://weblabor.hu/

  • 8/14/2019 Web Programozas 0.5 (fiskolai jegyzet)

    20/261

    20. oldal Web programozs (0.5. verzi)

    Megjegyzs: A szerz vlemnye szerint a szvegben clszer azokat a hivatkozsokat elhelyezni, ame-lyek egy szhoz, nvhez vagy kifejezshez jl kapcsolhatk. Ezzel szemben olyan hivatkozsokat, amelyekaz oldal egszhez kapcsoldnak, mindenkppen oldalra rdemes tenni.

    Az oldal aljn lev hivatkozsok nem mindig szerencssek, hiszen ha nem olvassa, vagygrgeti vgig az oldalt a ltogat, akkor nem is veszi szre azokat. Msodlagos szerepet

    azonban sokszor betlt.

    Alternatv navigci

    A hierarchikus felpts nem minden esetben j megkzelts. Fleg blog tpus oldalakesetn terjed a cmkk (tag) vagy kulcsszavak hasznlata, ahol az egyes cmkk, s az ol-dalak kztt tbb-tbb kapcsolat van. A cmkket sszefoglal oldalakon a betmrettelis szoks jelezni a cmkk relatv gyakorisgt:

    Taln rdemes lenne ezt is egyre tbb oldalnl alkalmazni, mint egy jabb lehetsget,nem elfelejtve a logikai hierarchibl kvetkez lehetsgeket sem.

    A letltsi sebessg

    ltalnos hiba, hogy a fejleszt a sajt gpn, hlzati elrs nlkl fejleszti a honlapot,s nem veszi figyelembe, hogy a ltogatknak meg kell majd vrni az oldal letltdst.Soha nem lesz minden felhasznlnak olyan sebessg internet kapcsolata, mint esetlega fejlesztnek. Itt nem csak a ma mr egyre jelentktelenebb szm modemes elrsre,hanem a tbb gp kztt megosztott hlzati kapcsolatra, vagy az egyre elterjedtebb mo-

    bil bngszsre is rdemes gondolni. Mindig lesznek olyan felhasznlk, akik ilyen hibs

    tervezs miatt nem fogjk az oldalt ltogatni. Egy felmrs szerint 7 msodperc utn altogat msik oldalra megy, ha az oldalnak legalbb egy rsze nem lesz hasznlhat (ol-vashat). Nhny tipp arra nzve, hogy mit tehetnk a kevsb gyors kapcsolattal ren-delkez ltogatk megtartsrt:

    Az oldal kpek nlkl is olvashat legyen, hogy a kpek letltdsig is tudja a fel-hasznl hasznosan tlteni az idejt. Az oldal cmei teht ne kppel, hanem szveggel(is) jelenjenek meg. Ha mindenkppen kpet hasznlunk, akkor legalbb az img tagalttulajdonsgot adjuk meg.

    Adjuk meg a kpek mrett a HTML forrsban, gy nem fog ugrlni az oldal a k-pek tnyleges letltdsekor, s a ltvny sem csak a teljes letltdsre fog sszellni.

    Ne hasznljunk nagy mret tblzatot az oldalon (fleg az oldal szerkezetnek kiala-ktshoz ne), mert a teljes tblzat letltdsig nem fog sszellni a ltvny. Tbbkisebb tblzat egybknt is ttekinthetbb lehet.

  • 8/14/2019 Web Programozas 0.5 (fiskolai jegyzet)

    21/261

    2.A webfejleszts alapjai 21. oldal

    2.1.4 Figyeljnk a ltogatk visszajelzseire

    Ha egy ltogat nem csak az orra alatt zsrtldik, hanem mg veszi is a fradtsgot,hogy lerja a vlemnyt, akkor azt valsznleg rdemes figyelembe venni. Egy klsszemll gyakran knnyebben szreveszi a hibkat, nehezen hasznlhat rszeket.

    Pldul a Joomla! Magyarorszg honlapjn17 trtnt 2006 augusztusi dizjn (s ebblkvetkezen navigci) vlts utn a kezdoldalra linkelt, Mi a vlemnyetek az joldalrl?cm frum 24 ra alatt 32 hozzszlst eredmnyezett, amibl a sok dicsretmellett tbb mint 10 pt kritikai vlemny volt, aminek nagy rszt mg aznap be isptettk a dizjnba!

    Megjegyzs: Ennl a szlssgesen pozitv pldnl azrt figyelembe kell venni, hogy a honlap ltogatijelents rszt maguk is webfejlesztk.

    2.1.5 Milyen monitort hasznlnak a ltogatk?

    Alapveten tbb krdst is fel kell vetni: mekkora a kperny felbonts, mekkora a tny-leges kperny mret, s hogy fog kinzni az oldal a kpernyn.

    Az a problma, hogy ezekrl nem sok biztosat tudunk megllaptani. Statisztikai ered-mnyeket egyedl a kperny felbontsokrl lehet tudni, de ez nagyon szegnyes infor-mci tbb okbl is. A felhasznl nem biztos, hogy teljes kpernys mretben hasznljaa bngszt, pl. nagy monitorok (19, 21 col) esetn. Nem tudjuk, hogy a bngsz abla-kon bell mennyi eszkzsort alkalmaz, vagy ppen a tlcja melyik oldalon s milyenmretben van. Nem tudjuk azt sem, hogy milyen bngsz-belltsokat alkalmaz, sazok pontosan hogyan befolysoljk a megjelentst.

    El lehet azt mondani, hogy nagy hibt kvet el a fejleszt, ha csak a sajt krnyezetn

    teszteli az oldalt. 2006 nyarn clszer a 800x600-tl legalbb az 1600x1200-as felbon-tsig tesztelni tbbfle opercis rendszer s tbbfle bngsz alatt. St azt is rdemesfigyelembe venni, hogy 1-2 ven bell a mobil telefonrl bngszk szmottev rsztve-

    vi lehetnek a ltogatknak. Radsul (mr a drgbb technolgia hasznlatbl sejthe-ten) fizetkpesebb ltogati rtegrl lehet sz.

    Vgl azt a slyos (tv)hitet is rdemes megvizsglni, miszerint az oldalnak minden bn-gszn s minden felbontsban pixelre pontosan ugyangy kell kinzni. A szerz mgnem tallkozott egyetlen felhasznlval sem, aki kpernykpeket sszehasonltgatva pi-xel-eltrseket keresne egy oldalon :). A felhasznlnak egyetlen ignye az, hogy az esetben jl mkdjn az oldal: tlthat s szp legyen.

    2.1.6 Milyen bngszt hasznlnak a ltogatk?

    Sok fejleszt az utbbi vekben kizrlag egy bngszre (Microsoft Internet Explorer)s egyetlen kpernyfelbontsra optimalizlta az elkszlt oldalt. Pontosabb gy fogal-mazni, hogy nem vette a fradtsgot, hogy foglalkozzon a ltogatk ignyeivel. Az utbbiegy v szerencsre pozitv tendencikat mutat: a kb. 30% rszesedssel rendelkez egyb

    bngszt alkalmaz felhasznlrl is kezdenek tudomst venni a fejlesztk.

    Komolyabb problmik fleg azoknak a fejlesztknek vannak, akik az Explorerre rt kd-jukat szeretnk a tbbi bngszre is hasznlhatv alaktani. A gyakorlatban azonbansokkal jobban bevlik, ha a szabvnyok pontos ismerete alapjn felptett oldal ksz-

    17 http://joomla.hu/

  • 8/14/2019 Web Programozas 0.5 (fiskolai jegyzet)

    22/261

    22. oldal Web programozs (0.5. verzi)

    tnk. Innen ltalban kisebb lps az egyes bngszk specilisabb ignyeinek kielgt-se.

    2.1.7 Mi van a srltekkel?

    Vannak emberek, akiknek a ltsuk, hallsuk srlt, vagy teljesen hinyzik. k is szeret-nk hasznlni a webet. St rdemes belegondolni, hogy egy a szmtgp kezelst is-mer vak vagy ltssrlt tbb esetben r van knyszerlve, hogy a teendit interne-ten vgezze, mint a jl ltk, hiszen mr a fizikai kzlekeds is problms lehet szmra.

    Vakok s ltssrltek szmra felolvas szoftverek vagy Braille perifrik teszik a web-oldalak szveges tartalmt hozzfrhetv. Radsul ez azt is jelenti, hogy a szveg azelejtl a vgig sorosan olvashat, de nem ttekinthet vizulisan, s a szvegben trt-n navigci is elg krlmnyes. Ezt a helyzetet ltkknt gy prblhatjuk ki, hogy egy

    weboldalt szveges bngszvel nznk meg (semmi kp, semmi flash, semmi formzs:), pldul a kzismert Total Commander Nzkjvel (F3) egy HTML llomnyt meg-

    nyitunk, majd olyan kicsire mretezzk az ablakot, hogy egyszerre csak egy szt lssunk.Tudatos odafigyelssel lnyeges plusz munka nlkl elrhet, hogy a tartalmaink a s-rlt emberek szmra is elrhetk legyenek.

    A tmhoz tovbbi informcik tallhatk pl. a Weblabor Akadlymentes weboldalak18

    cikksorozatban.

    2.2. A web szabvnyai

    A webfejlesztk gyakran kzdenek a klnbz bngszkben s bngszverzikban ishasznlhat oldalak kialaktsrt. Ebben a helyzetben klnsen fontos, hogy a we-

    bes szabvnyoknak megfelel oldalakat hozzunk ltre. A szabvnyok alkalmazsa ezenkvl a jvben megjelen verzikkal is j esllyel hasznlhat oldalakat eredmnyez. (Agyakorlatban a bngszk szabvny-kvetse az j verzik megjelensvel javulni szo-kott, esetleg stagnl, legalbbis a szabvny adott verzijt tekintve.)

    Ha csapatban dolgozunk, egyszerbb lesz a msok szabvnyos kdjt megrteni s m-dostani. (Hasonlan, mint ahogy a kdolsi konvencik egysges betartsa is megtrla csapatmunknl vagy a ksbbi karbantartsnl.)

    Vannak fejlesztk, akik gy tekintenek a szabvnyokra, mint ami megkti a kezket, sezrt bngsz-specifikus trkkket alkalmaznak az oldalak ksztsnl. Hossz tvonazonban ez a hozzlls nem lesz kifizetd.

    Vgl a keresrobotok is jobban tudjk rtelmezni a szabvnyos oldalakat. Sok lszakr-t ajnl nyakatekert trkkket a keresoptimalizls rdekben, pedig a szabvnyok k-

    vetse az egyik legalapvetbb mdszer.

    2.2.1 A World Wide Web Consortium19 (W3C)

    Tim Berners-Lee, a WWW kitallja ltal 1994-ben alaptott szervezet. Clja, hogy awebbl a lehet legtbbet lehessen kihozni. Elsdleges tevkenysge a web szabvnyok(egsz pontosan ajnlsok) kidolgozsa. A legfontosabb tagjai:

    18 http://weblabor.hu/cikkek/akadalymentesweb119 http://www.w3.org/

  • 8/14/2019 Web Programozas 0.5 (fiskolai jegyzet)

    23/261

    2.A webfejleszts alapjai 23. oldal

    IBM

    Microsoft

    America Online

    Apple

    Adobe

    Macromedia

    Sun Microsystems

    Akr szemlyesen is bekapcsoldhatunk az ajnlsok kidolgozsba a W3C Magyar Iro-da20 ltal koordinlt mdon. (2006. oktber 18-n pldul W3C Mobilweb Mhelykon-ferencia21lesz.)

    2.2.2 Validtorok

    A W3C s ms szervezetek is ksztenek olyan programokat, honlapokat, amelyekkel ahonlapunk szabvnyossga (szabvnynak val megfelelse) tesztelhet. A hibk mellettsokszor segtsget is kapunk a szolgltatsok ignybevtelvel.

    A fontosabb validtorokkal a ksbbiekben fogunk ismertetni.

    2.3. Ellenrz krdsek

    Melyik az utols HTML (nem XHTML!) verzi?

    Minek a rvidtse: HTML, W3C? Mi a W3C feladata?

    Melyek jelenleg a szabvnykvet bngszk?

    Milyen verzinl tartanak ma a npszerbb bngszk?

    20 http://www.w3c.hu/21 http://www.w3c.hu/rendezvenyek/2006/mobilweb/index.html

  • 8/14/2019 Web Programozas 0.5 (fiskolai jegyzet)

    24/261

    24. oldal Web programozs (0.5. verzi)

    3. HTML

    A HTML nyelv az az alap, amivel minden webfejlesztnek alaposan tisztban kell lenni.Ez a fejezet segtsget ad a HTML lehetsgeinek megismershez, de sok lehetsget

    nem tartalmaz. A terjedelmi okokon kvl a kvetkezkre kell elssorban gondolni:

    Bizonyos HTML jellemzk a mai napra elavultnak tekinthetk. Itt elssorban a kin-zet eszttikai megjelensre kell gondolni. A CSS hasznlatval ugyanis sokkal tbbs jobb lehetsgnk lesz a kinzet lersra. A HTML a mai gyakorlatban mr tisz-tn csak az informcira, s annak struktrjra figyel.

    Bizonyos tagok, tulajdonsgok a bngszk ltal nem egysgesen tmogatottak, gyezeket a gyakorlatban is csak kevesen hasznljk.

    3.1. Bevezets

    Mi az a HTML?

    A HTML aHyper 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 llomnyhtmlkiterjesztssel rendelkezik

    A HTML llomnyt egyszer szveges (editor) programokkal (pl. Jegyzettmb) is lt-rehozhatunk

    Hogyan kezdjnk neki?

    Windows opercis rendszer alatt indtsuk el a Jegyzettmbt, majd gpeljk be a k-vetkez szveget:

    Az oldal cme

    Ez az els honlapom. Ez a szveg flkvr

    Mentsk el az oldalt oldal.htmlnven!

    Nyissuk meg a bngsznket, majd a Fjl men megnyits parancst vlasztva keresskmeg az elbb elmentett oldal.htmlllomnyt! A kvetkezhz hasonlt kell ltnunk a

    bngsznkben:

  • 8/14/2019 Web Programozas 0.5 (fiskolai jegyzet)

    25/261

    3.HTML 25. oldal

    A plda magyarzata

    A dokumentum els tagja a . A bngsz errl fogja tudni, hogy hol kezddik aHTML 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 abngsz 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 szerkesztk

    Lteznek olyan szerkesztprogramok, amelyekkel tnyleges HTML ismeretek nlkl islehet HTML oldalakat ltrehozni. Ezeket a programokat WYSIWYG (what you see iswhat you get) editoroknak hvjuk, ismertebb, pl. aFrontPage, vagy a Word, ezek azon-

    ban kerlendk, ha minsgi HTML oldalakat szeretnnk ltrehozni. Ezek a programok

    ugyanis kisebb-nagyobb mrtkben teleszemetelik a kdot. (Elrettentsknt rdemesmegnzni egyWord-bl mentett weblapot.)

    rdemes inkbb olyan szerkesztprogramot vlasztani, ahol a HTML kd fltt teljes el-lenrzssel brunk, ugyanakkor kiegszt szolgltatsokkal (pl. sznkiemels, tagok be-szrsa gombnyomsra stb.) gyorstani lehet a munkt.

    Gyakran ismtelt krdsek

    Krds: A bngsz a HTML tagokkal egytt jelenti meg a begpelt szveget. Mirt?

    Vlasz: A Windows alaprtelmezett belltsa szerint a Jegyzettmb a htmlkiterjeszts

    utn mg egytxtkiterjesztst is tesz, teht az llomnynv (annak ellenre, hogy ez nemis ltszik): oldal.html.txt. rdemes ms szerkeszt programot alkalmazni, vagy a Mappabelltsai kztt a bvs Ismert llomnytpusok esetn a kiterjeszts elrejtse bell-tst kikapcsolni.

    Krds: Vltoztattam a HTML dokumentumon, de a vltozsok nem jelentek meg abngszben. Mirt?

    Vlasz: A szerkeszt programban menteni, majd a bngszben frissteni kell a doku-mentumot. (Nem szksges semelyik programot bezrni, csak menet kzben vltogatnia kt program kztt.) Bizonyos esetekben a bngsz gyorsttrbl veszi az oldalt, snem kld jabb krst a szerver fel. Ilyenkor a gyorsttr kirtse vagy a Ctrl+F5 bil-

    lentykombinci alkalmazsa segt.Krds: Melyik bngszt hasznljam?

  • 8/14/2019 Web Programozas 0.5 (fiskolai jegyzet)

    26/261

    26. oldal Web programozs (0.5. verzi)

    Vlasz: A tanulshoz clszer olyan bngszt vlasztani, amely a szabvnyokat a lehe-t legjobban kveti. A profi fejlesztnek egybknt is minden elterjedtebb bngszn s

    verzin tesztelni kell az oldalt. 2006 mjusban a kvetkez bngszt hasznljk a lto-gatk:

    56.7% Internet Explorer 6

    25.7% Mozilla Firefox 1-1.5

    4.5% Internet Explorer 5

    2.3% Mozilla

    1.5% Opera 7-8

    1.1% Internet Explorer 7

    3.2. Tagok

    A 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 elemek

    Az elz pldban a kvetkez plda egy elem:

    Ez a szveg flkvr

    A HTML elem kezd tagja , a tartalmazott szvegEz 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 tovbbfejleszts-

    nek tekinthet XHTML mr igen. rdemes teht ezt az rsmdot megszokni.

  • 8/14/2019 Web Programozas 0.5 (fiskolai jegyzet)

    27/261

    3.HTML 27. oldal

    Tag tulajdonsgok (attribtumok, jellemzk)

    A tagok tartalmazhatnak tulajdonsgokat is. Ezek a jellemzk jrulkos informcik azelem egszre nzve.

    A tag definilja az oldal body elemt, ami tartalmazhat egybgcolortulajdons-

    got, amibl tudja a bngsz, hogy milyen httrsznnel kell az oldalt megjelenteni. Pl-dul, ha piros httrsznt szeretnnk, a kvetkez szveget kell begpelnnk:

    A elem egy tblzat elemet definil. A tag tulajdonsgaknt megadhat, hogymilyen vastag szegllyel jelenjen meg a tblzat. A kvetkez plda szegly nlkl jelen-ti meg a tblzatot:

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

    Melyik idzjelet alkalmazzuk?

    A nyelv elssorban a (dupla) idzjel alkalmazst rja el. A bngszk az aposztrf je-let is elfogadjk, mgis rdemes inkbb a hagyomnyos idzjelet alkalmazni.

    3.3. Alapvet HTML tagok

    A HTML legalapvetbb s leggyakrabban hasznlt tagjai azok, amelyek segtsgvel c-meket, bekezdseket s sortrseket lehet ltrehozni.

    A HTML tanulshoz a legjobb mdszer, ha pldkkal dolgozunk.

    Cmek

    A cmek a tagok segtsgvel adhatk meg. a legnagyobb (legfelsbbszint) cmet jelenti, pedig a legkisebbet. (ltalban egy oldalon legfeljebb 2-3szintet indokolt alkalmazni, ekkor pl. a h1 s h2 alkalmazhat.) Acimek.htmloldal be-mutatja mind a 6 cmet:

    Ez egy cmEz egy cmEz egy cm

    Ez egy cmEz egy cmEz egy cm

  • 8/14/2019 Web Programozas 0.5 (fiskolai jegyzet)

    28/261

    28. oldal Web programozs (0.5. verzi)

    A cmsorokhoz a bngsz alaprtelmezetten trkzket is kapcsol.

    Bekezdsek

    A bekezdseket a

    taggal lehet definilni:

    Ez egy bekezds

    Ez egy msik bekezds

    A bekezdsekhez a bngsz alaprtelmezetten trkzket is kapcsol.

    A kvetkez pldban hiba szerepel az jsor s a tbb szkz karakter, a bngsz min-

    den elvlaszt karakter-sorozatot egy szkzknt rtelmez. A tnyleges trdelst mindiga bngsz mrete s a benne lev szveg hatrozza meg.

    Ez egy tbbsorbl ll s sokszkzt tartalmazbekezds.

  • 8/14/2019 Web Programozas 0.5 (fiskolai jegyzet)

    29/261

    3.HTML 29. oldal

    A kvetkez plda jl mutatja a kttt szerkezet szveg (pldul vers idzsnek nehz-sgt:

    Mikor trsz mr az eszedre, te Sndor?Tivornya jjeled s napod;Az istenrt! hisz az rdg elvisz,Ha mg sok gy folytatod.

    Sortrsek

    A
    tag hasznlhat, ha j sort szeretnnk kezdeni, de nem akarunk j bekezdstkezdeni. Abrkiknyszerti a sortrst.

    Ez itt
    egy tbb
    sorra trdelt bekezds

    Abrtag res, vagyis nincs zr prja.

    MegjegyzsekA megjegyzs tagot megjegyzsek elhelyezsre hasznljuk. A bngsz nem veszi figye-lembe a megjegyzsbe rt szveget.

  • 8/14/2019 Web Programozas 0.5 (fiskolai jegyzet)

    30/261

    30. oldal Web programozs (0.5. verzi)

    A megjegyzsben nem fordulhat el kt ktjel a > nlkl.

    Sznes httr

    A kvetkez plda bemutatja, hogyan lehet httrsznt megadni a HTML oldalunkhoz.Srga

    Sznes httr!

    Hasznos tippek

    Amikor HTML oldalakat hozunk ltre, mindig nzzk meg ms bngszben, mskperny (ablak) felbontsban is.

    Soha ne szkzkkel s jsor karakterekkel (Enterrel) akarjunk szveget formzni.

    A bngsz eldobja a szvegben tallt tbbszrs szkzket, s egyetlen szkzkntveszi figyelembe.

    resp tagok hasznlata szintn nem javasolt, inkbb a brtag segtsgvel rdemes asortrst kiknyszerteni.

    Sokan elhagyjk ap zr tagot a bekezds vgrl. Az XHTML szigorbb szablyaimiatt ezt nem rdemes alkalmazni.

    Az oldal szakaszokra trshez alkalmazhat a vzszintes vonallal elvlaszttag. Ez a tag is res, zr pr nlkli.

    sszefoglal tblzat

    Tag Lers

    HTML dokumentumot definil

    A dokumentum trzst definilja

    Cmsorokat definil

    Bekezdst definil

  • 8/14/2019 Web Programozas 0.5 (fiskolai jegyzet)

    31/261

    3.HTML 31. oldal


    Egyszer sortrst szr be

    Vzszintes elvlaszt vonalat szr be

    Megjegyzst definil

    3.4. Hogy nzzk meg egy oldal HTML kdjt?

    Gyakran elfordul, hogy a weben bngszve megtetszik egy oldal, s szeretnnk megnz-ni a forrst. (A szerz vlemnye szerint ez az egyik legjobb mdszer a tanulsra, hiszenekkor nem kls, hanem bels motivl er hat.) Hogyan tehetjk ezt meg?

    Keressk meg a bngsznkNzetmenjt, majdForrs, vagyOldal forrsa (vagy vala-mi hasonl nev) menpontot.

    A szerz javasolja a fejlesztshez aFirefoxnev bngszt, amely eleve fejlesztk szm-

    ra lett kifejlesztve, s tbb ezer kiterjesztse (plug-in) kzl j nhny a HTML forrsknnyen ttekinthet megjelentst szolglja. Kvetkezzen a teljessg ignye nlkl n-hny kapcsold kiterjeszts.

    Tidy HTML Validator22

    A kpen lthat, ahogy a sznkiemels alatt a szintaktikai hibk s a hibk rszletes ler-sa is megtekinthetk.

    22 http://users.skynet.be/mgueury/mozilla/

  • 8/14/2019 Web Programozas 0.5 (fiskolai jegyzet)

    32/261

    32. oldal Web programozs (0.5. verzi)

    View Source Chart23

    Ennek a kiterjesztsnek f szolgltatsa a kd sznezssel trtn megjelentse. Rad-sul az brn lthat mdon az egymsba gyazsi hierarchia kvethet a vonalak alap-

    jn, s ezek a dobozok kattintsra kinylnak-becsukdnak.

    FireBug24

    A kiterjeszts az oldalt s a forrskdjt teljesen szimultn mutatja, rdemes megfigyelniaz egrkurzorral irnythat kk dobozokat.

    23 http://jennifermadden.com/scripts/ViewRenderedSource.html24 http://www.joehewitt.com/software/firebug/

  • 8/14/2019 Web Programozas 0.5 (fiskolai jegyzet)

    33/261

    3.HTML 33. oldal

    3.5. Formzs

    A HTML definil nhny formzsra szolgl elemet, mint pl. flkvr vagy dlt szvegformzshoz.

    Szvegformz tagok

    Tag Lers

    Flkvr szveget definil

    Nagyobb szveget definil

    Kiemeli a szveget

    Dlt szveget definil

    Kisebb szveget definil

    Ersebb kiemels

    Als indexet definil

    Fels indexet definil

    Beszrt szveget jell

    Trlt szveget jellA kvetkez plda mutatja a tagok hatst:

    Ez a szveg flkvr
    Ez a szvegkiemelt


    Ez a szveg nagyobb
    Ez a szveg hangslyos
    Ez a szveg dlt
    Ez a szvegkisebb


    Ez a szveg tartalmazals indexet


    Ez a szveg tartalmazfels indexet

  • 8/14/2019 Web Programozas 0.5 (fiskolai jegyzet)

    34/261

    34. oldal Web programozs (0.5. verzi)

    Szmtgp kimenetet definil tagok

    Tag Lers

    Forrskdot definil

    Elformzott szveget definil: az elvlaszt (white space) karakte-reket nem a HTML-ben szoksos, hanem direkt mdon rtelmezi

    Idzet, kiemels s defincis tagok

    Tag Lers

    Rvidtst definil

    Mozaikszt definil

    Cm elemet definil

    Szveg rsirnyt hatroz meg

  • 8/14/2019 Web Programozas 0.5 (fiskolai jegyzet)

    35/261

    3.HTML 35. oldal

    Hossz (akr tbb bekezdses) idzetet jell

    Rvid (ltalban bekezdsen belli) idzetet jell

    Idzetet jell

    Defincit jell

    Nagy Gusztv
    Kecskemt


    UN
    WWW


    Ez a szveg jobbrlolvashat

    Az ilyen hosszabb idzeteketa bngsz trkzkkel iskiemeli

  • 8/14/2019 Web Programozas 0.5 (fiskolai jegyzet)

    36/261

    36. oldal Web programozs (0.5. verzi)

    3.6. Karakter entitsok

    Bizonyos karakterek (mint pldul a < s >) specilis jelentsek a HTML-ben, ezrtnem hasznlhatk a foly szvegben. Ha egy ilyen specilis karaktert akarunk megjele-nteni, akkor karakter entitst kell alkalmaznunk.

    A karakter entits hrom rszbl ll: &az elejn, ; a vgn, a kett kztt pedig egy enti-ts nv, vagy kd # utn.

    Ha pldul a < jelet szeretnnk megjelenteni, akkor a dokumentumba az < vagy a< karaktersorozatot kell gpelnnk.

    Megjegyzs: az entitsok kis-nagybet rzkenyek!

    Nem trhet szkz

    A gyakorlatban taln a legtbbet alkalmazott karakter entits a nem trhet szkz. AHTML a tbb egymst kvet elvlaszt (n. white space) karaktereket csak egy szkz-

    knt jelenti meg. Ilyen esetekben szoks a entitst egyms utn tbbszr alkal-mazni, ugyanis ezeket tnylegesen figyelembe veszi a bngsz. Ez azonban nem felelmeg a HTML eredeti cljnak, s a mai technikai lehetsgeknek sem. (Stlus formz-sok segtsgvel ezek a problmk sokkal elegnsabban oldhatk meg.)

    Ennek az entitsnak eredetileg az a clja (s a szerz vlemnye szerint csak ilyen eset-ben szabadna alkalmazni), hogy a tbb szbl ll kifejezsek (pldul tulajdonnv) ese-tn a sor vgn ne trje szt a bngsznk a kifejezst, hanem mindenkppen egy sorbakerljenek. Pldul a kvetkez nv mindig egy sorba, trdels nlkl fog kerlni:

    NagyGusztv

    kezetes 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 ke-zetes karaktereket is entitsok segtsgvel megadni. A mai napra azonban ezek a prob-lmk lnyegben megszntek, ezrt a szerz vlemnye szerint teljesen indokolatlan azentitsok alkalmazsa. Helyette inkbb a pontos kdlap meghatrozsra rdemes figyel-met fordtani.

    Tovbbi karakter entitsok

    Lers Jelents Entits nv Entits szmkd

    Nem trhet szkz

    < Kisebb, mint < Nagyobb, mint > >

    & s & &

    " Idzjel " "

    ' Aposztrf ' '

  • 8/14/2019 Web Programozas 0.5 (fiskolai jegyzet)

    37/261

    3.HTML 37. oldal

    Paragrafus

    Copyright

    Az entitsok teljes listjt a HTML referenciban rdemes keresni.

    3.7. Linkek

    A HTML linkeket (hivatkozsokat) hasznl arra, hogy az oldalunkhoz ms tartalmakatkapcsolhassunk.

    A horgony () tag s a hreftulajdonsg

    Egy horgony hivatkozni tud egy tetszleges webes erforrsra, pl. egy msik HTML ol-dalra, egy kpre, zenre stb.

    A horgony szintaxisa a kvetkez:Megjelen szveg

    Ahreftulajdonsgoz rendelt rtk hatrozza meg, hogy a bngsz hogyan reagljon alink kivlasztsra. (Itt nem csak klikkels jhet szba, hiszen billentyzetrl is lehet lin-ket kivlasztani a TAB segtsgvel, s akr gyorsbillenty (accesskey) is rendelhet egyhorgonyhoz.) A kezd s a zr tag kztti szveg (vagy akr bonyolultabb tartalom) lesza klikkelhet, s alaprtelmezetten kk sznnel alhzott link.

    A kvetkez plda egy linket definil a Weblabor honlapjra:

    A Weblabor honlapja.

    Atargettulajdonsg

    Alaprtelmezetten 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:

    Weblabor

    Ez a tag mra mr elvesztette a jelentsgt, az XHTML mr nem is teszi lehetv a tu-lajdonsg hasznlatt. Sokan felteszik a krdst: Mirt? Itt elssorban azt a szemlletetkell ltni, hogy a felhasznl akarja eldnteni, hogy mi hol jelenjen meg. Nem szksges,

    hogy errl a webfejleszt helyette dntsn.

    Aname tulajdonsg

    Egy hivatkozs alaprtelmezetten a HTML oldal legelejt jelenti. Nha azonban prakti-kus, ha egy oldalon bell is pontostani tudjuk a link cljt. Erre szolgl ez a tulajdonsg.

    A kvetkez mdon tudunk ltrehozni egy ugrsi clpontot:

    PHP

    Ez az elem vizulisan nem fog megjelenni (pl. alhzssal), hiszen ez a kapcsolat vg-pontja lehet, s nem a kezdpontja.

    Ha erre a pontra akarunk hivatkozni egy linkkel, akkor a kvetkez mdon kell alkal-maznunk:

  • 8/14/2019 Web Programozas 0.5 (fiskolai jegyzet)

    38/261

    38. oldal Web programozs (0.5. verzi)

    Termszetesen akr az oldalon bell is lehet ilyen linkeket alkalmazni:

    Ugrs

    Hasznos tippekHa egy alknyvtrra akarunk hivatkozni, az URL vgre tegyk ki a / karaktert. gy a

    webkiszolgl egy felesleges prblkozst megsprolva gyorsabban fogja megtallni akeresett knyvtr tartalmt. (Elszr a knyvtrnevet llomnynvknt prblja rtel-mezni.)

    Hossz oldal esetn tegynk az elejre egy tartalomjegyzket a fontosabb fejezetekremutat bels linkekkel. Ezen kvl szoks az oldal vgn (vagy akr tbb helyen is) az ol-dal tetejre (elejre) mutat linket alkalmazni (erre a href="#"hasznlhat). Ennek amegoldsnak az az egy htrnya, hogy a vissza gomb hatsra is az oldalon bell fog afelhasznl ugrlni.

    3.8. Keretek

    A keretek segtsgvel egynl tbb HTML oldalt is meg tudunk jelenteni egyetlen bn-gsz ablakban.

    A keretek nhny vvel ezelttig nagy npszersgnek rvendtek. Segtsgkkel pusztnkliens oldali eszkzkkel (HTML, CSS) sszetett oldalakat lehet ltrehozni. Mra azon-

    ban mr egyre kevesebb helyen indokolt, s egyre kevesebb helyen is hasznljk. (rde-mes belegondolni, hogy nagy portlok szinte egyltaln nem alkalmazzk.) A teljessgignye 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 cmeszerepel

    Az elzhz hasonlan nem lehet egy oldalra hivatkozni

    Ha eszttikai okokbl letiltjuk a keret grgetsvjt, a tervezettnl kisebb mretmegjelents esetn a keret kilg rszei lnyegben elrhetetlenek lesznek

    A sort lehetne folytatni a szerver oldali programozs nehzsgeivel.

    Aframesettag

    A tag hatrozza meg, hogy az ablakot hogyan akarjuk felosztani keretekre.Egyframesetesetn vagy vzszintes, vagy fggleges irnyban oszthatjuk fel az ablakot.

    Megjegyzs:framesetesetn nincs szksg a body elemre.

    Aframe tag

    A tag azt hatrozza meg, hogy egy-egy ablakrsz milyen HTML llomnyt jele-ntsen meg.

  • 8/14/2019 Web Programozas 0.5 (fiskolai jegyzet)

    39/261

    3.HTML 39. oldal

    A kvetkez plda kt oszlopra bontja az ablakot. Az els keret a bngsz ablak 25%-t,a msodik 75%-t fogja elfoglalni. Asrc tulajdonsgokban megadott oldalak lesznek azoldal keretei.

    A szzalkos megads helyett pixeles mennyisg is alkalmazhat, s legfeljebb egyszer hasznlhatjuk a * karaktert a fennmarad hely kitltshez.

    Anoframes tag

    Ha igazn korrektek akarunk lenni, akkor alkalmazhatjuk a tagot, ami ak-kor jut szerephez, ha a megjelent eszkz nem tudja kezelni a kereteket. Itt azonbannem a korbban elterjedt tltse le az XY bngszt tpus zenetekre rdemesgondolni, hanem az oldal keretek nlkl mkd vltozatra. A szerz tapasztalata studomsa szerint eddig nagyon kevs oldal vette a fradtsgot, hogy a keretes vltozatmellett keretek nlkl is tkletes funkcionalitssal br vltozatot is elksztsen. Akikmgis 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 tag

    Az iframe tag soron belli keretet definil. Ezt a tagot is rdemes elkerlni.

    Hasznos tippek

    Ha a keretnek van lthat szeglye, akkor a felhasznl vonszolssal t tudja mterezni akereteket. Ha ezt szeretnnk elkerlni, adjuk a frame tagnaknoresize="noresize"tulaj-donsgot kell adnunk.

    Egymsba gyazs

    A keretek egymsba gyazsnak segtsgvel akr sszetettebb szerkezetek is kialakt-hatk. A kvetkez pldban a frame_a.htm tartalma az ablak fels felt foglalja el, azals fellben pedig vzszintesen 1:3 arnyban felosztva a msik kt oldal osztozik:

  • 8/14/2019 Web Programozas 0.5 (fiskolai jegyzet)

    40/261

    40. oldal Web programozs (0.5. verzi)

    Navigcis keret

    Navigcis keret alkalmazsa esetn a link segtsgvel cserlni kvnt keretet nvvelkell elltni, hogy a link hivatkozsa egyrtelm lehessen. (E nlkl a link a sajt kerettcserln ki.)

    A foldal kdjban a name tulajdonsggal adhatunk nevet a jobb oldali keretnek:

    A bal oldali navigcis keretben a linkektargettulajdonsgban kell ezt a keretet meg-adni:

    Frame a
    Frame b
    Frame c

    gyes megolds az is, ha a navigcis keret HTM kdjban megadjuk a linkek esetnalaprtelmezett cl keret nevt a head szakasz base href tulajdonsgval. Az elz pldagy mdosulna:

    Frame a
    Frame b
    Frame c

    sszefoglal tblzat

    Tag Lers

    keretet definil

    keret-csoportot definil

    a keretet nem ismer bngsz esetn megjelen tartalom

    soron belli keretet definil

  • 8/14/2019 Web Programozas 0.5 (fiskolai jegyzet)

    41/261

    3.HTML 41. oldal

    3.9. Tblzatok

    Tblzatokat 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. cella1. sor, 2. cella

    2. sor, 1. cella 2. sor, 2. cella

    Tblzat szeglyek

    Alaprtelmezetten a tblzatok szeglyek nlkl jelennek meg. Van azonban lehetsgarra, hogy szeglyek is megjelenjenek az oldalon: az elz pldban is lthat bordertu-lajdonsggal lehet belltani a szegly szlessgt. (A szm kppontban rtend.)

    Tblzat fejlc

    A tblzat els sorba szoks fejlc informcikat elhelyezni. Ez magyarzza az alatta ta-llhat rtkek jelentst. Ebben az esetben az els sort cellit tagokkal kell meg-adni:

    1. fejlc2. fejlc

    1. sor, 1. cella1. sor, 2. cella

    2. sor, 1. cella2. sor, 2. cella

  • 8/14/2019 Web Programozas 0.5 (fiskolai jegyzet)

    42/261

    42. oldal Web programozs (0.5. verzi)

    Termszetesen fejlc informcit az els oszlopban is lehet alkalmazni, ekkor a sorok el-s celljt kell th taggal megadni.

    res cellk

    A tartalom nlkli (res) cellk a legtbb bngsz esetn nem jelennek meg. Pldul azutols cella tartalmnak trlse esetn a kvetkezt lthatjuk:

    Szoks ilyenkor egy nem trhet szkzt () tenni a cellba, ami kiknyszerti aszegly megjelentst.

    Tblzat cm

    Mltatlanul keveset hasznlt elem a , amivel a tblzat cmt tudjuk korrektmdon megadni. Lehetsg van annak kivlasztsra is, hogy a ngy lehetsges oldal k-zl hol jelenjen meg a cm. Acaption elemnek a table els elemnek kell lennie, ha hasz-nljuk:

    Tblzat cme1. fejlc2. fejlc

  • 8/14/2019 Web Programozas 0.5 (fiskolai jegyzet)

    43/261

    3.HTML 43. oldal

    Cellk sszevonsa

    Acolspan s rowspan tulajdonsgok segtsgvel cellkat lehet egyesteni:

    NvTelefonBill Gates555 77 854555 77 855

    Tippek

    A , s elemek a cljuk szerint nagyon hasznos elemek lenn-

    nek, de sajnos a bngszk igen vltoz mdon tmogatjk ket.A tblzat cellk tovbbi tblzatokat is tartalmazhatnak, amivel sszetett szerkezetekalakthatk ki.

    sszefoglal tblzat

    Tag Lers

    tblzatot definil

    fejlcet definil

    sort definil

    cellt definil

    cmet definil

    fejlcet definil

    tblzat trzset definil lblcet definil

  • 8/14/2019 Web Programozas 0.5 (fiskolai jegyzet)

    44/261

    44. oldal Web programozs (0.5. verzi)

    3.10. Listk

    A HTML tmogatja a szmozott, felsorolt s definci-listk ltrehozst.

    Felsorolt lista

    A felsorolt listk olyan elemeket tartalmaznak, amelyeket nem kell szmozssal azonos-tanunk, ehelyett egy felsorolsi szimblum (alaprtelmezetten egy fekete karika) jelzi vi-zulisan a listaelemek kezdett.

    A felsorolt lista az taggal rhat le, a lista elem pedig taggal.

    KvTea

    Szmozott lista

    A szmozott listk elemei (tbbnyire) szmmal azonostottak.

    A szmozott listt taggal kell ltrehozni, a lista elemek az elzhz hasonlan li-veldefinilhatk.

    KvTea

    Defincis lista

    A defincis lista nem csupn egy felsorols, hanem a definilt elemek s a definciiksorozata. Egy defincihoz akr tbb elem is megadhat.

  • 8/14/2019 Web Programozas 0.5 (fiskolai jegyzet)

    45/261

    3.HTML 45. oldal

    A defincis lista taggal, a definilt elem taggal, maga a definci pedig taggal definilhat.

    macska

    nyvog, szrsllat

    kutyaebugar, szrs llat,kergeti a macskt

    Tovbbi pldk

    Felsorolt s szmozott listk esetn a szimblumok vlaszthatk. A kvetkez lista azangol abc kisbetit rja ki:

    almabanncitrom

    A listk egymsba is gyazhatk, gy hierarchikus szerkezeteket is kialakthatunk.kvTeaFekete teaZld tea

    Tej

  • 8/14/2019 Web Programozas 0.5 (fiskolai jegyzet)

    46/261

    46. oldal Web programozs (0.5. verzi)

    sszefoglal tblzat

    Tag Lers

    szmozott listt definil

    felsorolst definil

    lista elemet definil

    defincis listt definil

    definilt elem

    definci

    3.11. rlapok

    Az rlapokat arra hasznlhatjuk, hogy klnbz mdokon lehetsget adjunk a ltoga-tnak adatok megadsra.

    A elem ms elemeket tartalmaz. Ezek az rlap elemek teszik lehetv az adatbe-vitelt.

    Az inputtag

    A leggyakrabban hasznlt elem az . A type tulajdonsgval llthat be, hogypontosan milyen adatbeviteli mdot szeretnnk.

    Szveges mezk

    A szveges mezk lehetv teszik, hogy betkbl, szmokbl, rsjelekbl ll karakter-sorozatot lehessen begpelni.

  • 8/14/2019 Web Programozas 0.5 (fiskolai jegyzet)

    47/261

    3.HTML 47. oldal

    Vezetknv:
    Keresztnv:

    rdemes megfigyelni, hogy maga aform elem vizulisan nem lthat, csak a benne elhe-lyezett elemek. Ha (ahogy ebben a pldban is) nem adjuk meg a mezk szlessgt, alegtbb bngsz alaprtelmezetten 20 karakter szlesen jelenti meg. Ez azonban nemkorltozza a tnylegesen begpelhet szveg hosszt.

    Jelszavak begpelshezpasswordtpus (type="password") beviteli mezt szoks lt-rehozni. Ez viselkedsben csak annyiban tr el a texttpustl, hogy a begpelt szveghelyett * karakterek jelennek meg.

    Megjegyzs: Az elrejts csak a kpernyre vonatkozik, a hlzaton egyszer adatknt utazik a jelsz.

    Rdigombok

    A rdigombokat akkor hasznlhatjuk, ha a ltogatnak nhny vlaszthat elem kzlkell vlasztsi lehetsget adni. Az elemek kzl mindig csak az egyik lehet aktv. rde-mes megfigyelni a kvetkez listban, hogy a name tulajdonsg azonossga rendeli a r-digombokat logikailag egy csoportt. (Teht ebbl a szempontbl nem a vizulis elren-dezs szmt!)

    N
    frfi

  • 8/14/2019 Web Programozas 0.5 (fiskolai jegyzet)

    48/261

    48. oldal Web programozs (0.5. verzi)

    Ha valamelyik vlasztsi lehetsget alaprtelmezettnek tekintjk, akkor ezzel knnyt-hetjk is az rlap kitltst:

    N

    JellngyzetekA jellngyzetek arra szolglnak, hogy a felhasznl egy vagy tbb elemet is ki tudjonvlasztani a rendelkezsre ll lehetsgek kzl. Ms megkzeltsben gy is lehetnefogalmazni, hogy egy jellngyzet ki-, vagy bekapcsolt llapotban lehet, fggetlenlms beviteli elemektl.

    Van biciklim
    Van autm

    Itt is van lehetsgnk az alaprtelmezetten ki nem vlasztott llapot helyett bejellvemegjelenteni a jellngyzetet:

    Alabelelem

    rdemes megfigyelni, hogy rdigomb s jellngyzet esetn a kattinthat terlet a krilletve ngyzet alak terletre korltozdik. Az elemek mellett megjelen szvegek a

    bngsz szmra fggetlenek a jell elemektl, csupn a vizulis helyzet jelzi neknkaz sszefggst.

    Alabelelem hasznlatval ez a fggetlensg megszntethet: a szveget a jellelemmelaktv kapcsolatba hozhatjuk. Ez azt jelenti, hogy lehet klikkelni a szvegre is.

  • 8/14/2019 Web Programozas 0.5 (fiskolai jegyzet)

    49/261

    3.HTML 49. oldal

    N
    frfi

    Az elz verzihoz kpest fontos kiegszts, hogy a value mellett az id is megkapta azazonost szvegeket, mivel a labeltagfortulajdonsga idalapjn ri el az elemeket.

    rlap adatok elkldse

    Az esetek jelents rszben a felhasznl azrt tlt ki egy rlapot, hogy adatokat tudjona szerver fel kldeni valamilyen hats rdekben.

    Az eddigi pldkbl kt fontos rsz kimaradt. Elszr is a felhasznl szmra szoksbiztostani egy klds (vagy valami hasonl funkcionalits) gombot, hogy erre kattintva

    kezdemnyezhesse az adatok elkldst. Msrszt aform tag egybknt ktelezen ki-tltend action tulajdonsga hatrozza meg, hogy melyik oldalnak kell a krst feldol-goznia.

    Felhasznli nv:

    Ha a felhasznl begpeli a nevet, majd kattint a Klds gombra, akkor a szveg tovb-btsra kerl afeldolgoz.php szmra.

    Nyomgombokat a button taggal is ltre lehet hozni.

    Lenyl lista

    Bizonyos esetekben rdigombok helyett clszer inkbb a lenyl listk alkalmazsa.(Itt elssorban terjedelmi, ttekinthetsgi okokra kell gondolni.)

    Kt tag hasznlatra lesz szksg: elszr is a selecttag adja meg a lista kereteit, mg azoption tagok a vlaszthat elemeket.

  • 8/14/2019 Web Programozas 0.5 (fiskolai jegyzet)

    50/261

    50. oldal Web programozs (0.5. verzi)

    AudiFiatSkoda

    Suzuki

    A selected tulajdonsg lehetv teszi az alaprtelmezett elem kijellst. Ha ez nemszerepel a forrsban, akkor az els elem lesz a kivlasztott betltdskor.

    Lehetsg van olyan lista ltrehozsra is, ahol egyszerre akr tbb elem is kivlasztha-

    t.

    Tbb soros szveges mezk

    Lehetsg van hosszabb szveg begpelst, szerkesztst lehetv tev beviteli mezt isltrehozni. Erre szolgl a textarea elem. A kvetkez pldn a mretek megadsn tl akezdszveg is definilt:

    Kezdszveg

    sszefoglal tblzat

    Tag Lers

    rlapot definil

    beviteli mezt definil

    tbbsoros beviteli mezt definil

    cmkt definil

    lenyl listt definil

    lenyl lista elemet definil

    nyomgombot definil

    3.12. Kpek

    A HTML nyelvben az tag segtsgvel tudunk kpeket definilni. Ez az elem res,s nincs zr tagja sem (hasonlan a brs hrelemekhez).

    A kp megjelentshez elszr is meg kell adni a src tulajdonsgot, vagyis meg kell adnia kp llomny helyt s nevt. A szintaxis a kvetkez:

  • 8/14/2019 Web Programozas 0.5 (fiskolai jegyzet)

    51/261

    3.HTML 51. oldal

    Az urllehet abszolt vagy relatv megads is.

    Az alttulajdonsg

    Az alt tulajdonsg alternatv szveg definilst teszi lehetv. A szabvny szerint tehtennek a szvegnek akkor kell a bngszben lthatv vlni, ha a kp valamilyen oknlfogva nem jelenthet meg (pl. mg nem tltdtt le, nem rhet el vagy eleve ki vankapcsolva a kpek letltse).

    Megjegyzs: a Microsoft Internet Explorer akkor is megjelenti ezt a szveget, ha az egrkurzort visszka kp fl, de ez eltr a HTML eredeti cljtl.

    Mret megadsa

    A bngsz ugyan a mret megadsa nlkl is meg tudja jelenteni a kpet, mgis clsze-r a width s heighttulajdonsgokat megadni. Lass kapcsolat vagy sok nagy kpesetnkimondottan zavar lehet, amikor egy jabb kp letltdsekor az ekkor ismertt vltmret adatok alapjn a flig megjelent oldal ugrik.

    Termszetesen a kp fizikai mrettl eltr mretek is megadhatk, ekkor kicsinyts,nagyts, vagy akr torzts is lehet az eredmny.

    Kp hasznlata linkknt

    Link aktv fellethez szveg mellett vagy helyett kp is rendelhet. Erre mutat pldt a

    kvetkez kd:

    Kptrkp

    Mg rdekesebb lehetsg a kliens oldali kptrkpek alkalmazsa. Ekkor a kp egyesterleteihez ms-ms link kapcsolhat. Pldnkban a Naphoz, valamint a Merkr s V-nusz bolyghoz ms-ms linket rendelnk, mg a maradk terlet nem reagl a kattin-tsra.

  • 8/14/2019 Web Programozas 0.5 (fiskolai jegyzet)

    52/261

    52. oldal Web programozs (0.5. verzi)

    rdemes megfigyelni elszr is a usemap tulajdonsg hasznlatt. Ennek rtke ktissze a kpet a terleti felosztst ler map elemmel. Amap elem akrhnyarea elemettartalmazva rhatja le a linkek jellemzit.

    Megjegyzs: Az elbb felvzolt lehetsget kliens oldali kptrkpnek nevezzk. Szerver oldali kptrkpis ltezik, rdemes azonban a felhasznl knyelme rdekben a kliens oldali lehetsget alkalmazni. (Aszerver oldali megolds htrnya, hogy a kp egyes rszei kzt a felhasznl nem tud klnbsget tenni, abngsz csak a koordintkat kldi el a szerver szmra.)

    Hasznos tippekAz align tulajdonsg kp igaztst hatrozza meg. Ezt a tulajdonsgot azonban a CSSlehetsgei miatt felesleges hasznlni.

    Az img elem helye hatrozza meg, hogy a megjelentett oldalon hol fog szerepelni. Pl-dul ha kt bekezds (p) elem kztt szerepel, akkor a bekezdsektl jl elklntheten

    jelenik meg. Viszont ha a bekezds belsejben van, akkor a bekezds rszeknt a szveg-gel akr krbefuttathatv is vlik. (Maga a krbefuttats szintn CSS-el vgzend.)

    sszefoglal tblzat

    Tag Lers

    kp elemet definil

  • 8/14/2019 Web Program