web programozas 0.5
TRANSCRIPT
Nagy Gusztv
Web programozs
0.5. verzi
2007. mjus
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 megjellni 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 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
BevezetsFelhasznlsEzzel a jegyzettel arra vllalkozok, hogy a Kecskemti Fiskola GAMF Karn tanul mszaki informatikus hallgatk kezbe olyan rsos anyagot adjak, amely az eladsok mellett tovbbi segtsget ad a Web kliens s szerver oldali nyelvei, 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 megoldst javaslom. 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.
VerziA jelenlegi 0.5-s verzi a flv sorn folyamatosan kszlt. A jegyzet msodik felben sajnos mg sok tma csak vzlatosan, hinyosan szerepel. Ezek finomtsa, kiegsztse az ellenrz krdsekkel s gyakorl feladatokkal egytt - a kvetkez flvben fog folytatdni.
KsznetA jegyzet elksztshez elssorban a W3Schools1 oktatanyagait hasznltam fel. Az anyagok fordtsban rsztvev hallgatkat szintn ksznet illeti. Vgl szeretnk ksznetet mondani a Weblabor2 szakmai kzssgnek, akiktl a legtbbet tanultam tbbek kztt szemlletmdban. Kecskemt, 2007. mjus a szerz
1 2
http://www.w3schools.com/ http://weblabor.hu/
4. oldal
Web programozs (0.5. 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 Az Apache teleptse............................................................................................11 1.2.3 A PHP teleptse..................................................................................................13 1.3. Fejleszteszkzk......................................................................................................14 1.4. Grafikus programok..................................................................................................14 2. A webfejleszts alapjai.....................................................................................................16 2.1. Tervezsi, fejlesztsi szempontok.............................................................................16 2.1.1 Honlaptervezs....................................................................................................16 2.1.2 Navigcis struktra...........................................................................................16 2.1.3 Oldaltervezs.......................................................................................................18 2.1.4 Figyeljnk a ltogatk visszajelzseire...............................................................21 2.1.5 Milyen monitort hasznlnak a ltogatk?..........................................................21 2.1.6 Milyen bngszt hasznlnak a ltogatk?........................................................21 2.1.7 Mi van a srltekkel?..........................................................................................22 2.2. A web szabvnyai...................................................................................................... 2 2 2.2.1 A World Wide Web Consortium (W3C).............................................................22 2.2.2 Validtorok.........................................................................................................23 2.3. Ellenrz krdsek...................................................................................................23 3. HTML..............................................................................................................................24 3.1. Bevezets...................................................................................................................24 3.2. Tagok........................................................................................................................26 3.3. Alapvet HTML tagok..............................................................................................27 3.4. Hogy nzzk meg egy oldal HTML kdjt?.............................................................31 3.5. Formzs................................................................................................................... 3 3 3.6. Karakter entitsok....................................................................................................36 3.7. Linkek........................................................................................................................ 7 3 3.8. Keretek.....................................................................................................................38 3.9. Tblzatok.................................................................................................................41 3.10. Listk....................................................................................................................... 4 4 3.11. rlapok....................................................................................................................46 3.12. Kpek....................................................................................................................... 0 5 3.13. Oldal httere...........................................................................................................53 3.14. Sznek......................................................................................................................53 3.15. Szabvnyossg.........................................................................................................53 3.16. Stlusok.................................................................................................................... 4 5 3.17. Fejrsz...................................................................................................................... 5 5 3.18. Szkriptek.................................................................................................................56 3.19. ltalnos tulajdonsgok.........................................................................................57 3.20. Esemny tulajdonsgok.........................................................................................58 3.21. URL-kdols...........................................................................................................60 3.22. Szemantikus HTML...............................................................................................60 3.23. Validtor.................................................................................................................60 3.24. Ellenrz krdsek................................................................................................60 3.25. Tovbbi forrsok....................................................................................................64 4. XHTML............................................................................................................................ 5 6
5. oldal 4.1. XML alapok...............................................................................................................65 4.1.1 Mire hasznljuk az XML-t?.................................................................................65 4.1.2 XML szintaxis.....................................................................................................66 4.2. XHTML a gyakorlathoz kpest................................................................................67 4.3. Dokumentumtpus-deklarci.................................................................................69 4.3.1 XHTML 1.0 DTD-k.............................................................................................69 4.3.2 XHTML 1.1 DTD.................................................................................................69 4.4. Visszafel kompatibilits.........................................................................................70 4.5. Tovbbi forrsok....................................................................................................... 0 7 5. CSS.................................................................................................................................... 1 7 5.1. Bevezets....................................................................................................................71 5.2. A CSS nyelvtana........................................................................................................73 5.3. A background tulajdonsgok....................................................................................75 5.3.1 Httrszn............................................................................................................75 5.3.2 Httrkp............................................................................................................76 5.4. Szvegek megjelentse............................................................................................77 5.5. Betk formzsa.......................................................................................................78 5.6. Szeglyek...................................................................................................................79 5.7. Trkzk a szeglyen bell s kvl..........................................................................81 5.8. Listk......................................................................................................................... 1 8 5.9. Mretek.....................................................................................................................83 5.10. Megjelents............................................................................................................83 5.10.1 A lebegtets.......................................................................................................84 5.10.2 Pozcionlsi smk..........................................................................................88 5.10.3 Lthatsg.........................................................................................................89 5.10.4 Z-index..............................................................................................................90 5.11. Ltszlagos osztlyok..............................................................................................90 5.11.1 Linkek viselkedse.............................................................................................90 5.11.2 Els gyermek.....................................................................................................90 5.11.3 Els bet s els sor...........................................................................................91 5.12. Mdia tpusok..........................................................................................................91 5.13. Ellenrz krdsek.................................................................................................. 2 9 5.14. Validtor.................................................................................................................. 4 9 5.15. Tovbbi forrsok.....................................................................................................95 6. JavaScript........................................................................................................................96 6.1. Bevezets a JavaScript nyelvbe................................................................................96 6.1.1 Vltozk...............................................................................................................97 6.1.2 Elgazsok........................................................................................................... 8 9 6.1.3 Opertorok..........................................................................................................99 6.1.4 Dialgusablakok................................................................................................102 6.1.5 Fggvnyek........................................................................................................103 6.1.6 Ciklusok.............................................................................................................104 6.1.7 Esemnykezels.................................................................................................106 6.1.8 Kivtelkezels....................................................................................................108 6.2. Objektumorientlt programozs............................................................................109 6.2.1 Fontosabb objektumok rviden........................................................................110 6.3. HTML DOM............................................................................................................112 6.3.1 getElementById.................................................................................................112 6.3.2 A Document objektum......................................................................................113 6.3.3 Az Event objektum............................................................................................113 6.4. Diszkrt JavaScript.................................................................................................114 6.4.1 Elugr ablak plda...........................................................................................114
6. oldal
Web programozs (0.5. verzi)
6.4.2 E-mail cm elrejtse...........................................................................................116 6.5. Gyakran hasznlt fggvnyek.................................................................................117 6.5.1 Stik kezelse.....................................................................................................117 6.5.2 getElementsByClass..........................................................................................119 6.5.3 addEvent............................................................................................................119 6.5.4 addLoadEvent...................................................................................................120 6.6. Kdtrak.................................................................................................................120 6.7. Alkalmazsok...........................................................................................................121 6.8. Felhasznli lmny...............................................................................................122 6.8.1 Kliens oldali rlap ellenrzs............................................................................122 6.8.2 Hossz listk bngszse helyett.....................................................................124 6.9. Elavult technikk....................................................................................................128 6.10. Tovbbi forrsok...................................................................................................128 7. AJAX..............................................................................................................................129 7.1. Bevezet plda.........................................................................................................130 7.2. A bngszk AJAX tmogatsa..............................................................................131 7.3. XML-kommunikci...............................................................................................132 7.4. Tovbbi forrsok.....................................................................................................132 8. PHP nyelv s krnyezet.................................................................................................133 8.1. Alapok...................................................................................................................... 33 1 8.1.1 Szintaxis.............................................................................................................133 8.1.2 Vltozk.............................................................................................................135 8.1.3 Opertorok......................................................................................................... 35 1 8.1.4 Elgazsok.........................................................................................................137 8.1.5 A switch szerkezet.............................................................................................139 8.1.6 Tmbk.............................................................................................................140 8.1.7 Ciklusok.............................................................................................................143 8.1.8 Fggvnyek........................................................................................................ 45 1 8.1.9 rlapok s felhasznli adatbevitel..................................................................148 8.1.10 A $_GET tmb................................................................................................149 8.1.11 A $_POST tmb...............................................................................................150 8.2. Halad tmk..........................................................................................................151 8.2.1 Dtumok kezelse..............................................................................................151 8.2.2 Az include s trsai...........................................................................................152 8.2.3 Fjlkezels.........................................................................................................154 8.2.4 Fjl feltltse.....................................................................................................156 8.2.5 Stik kezelse....................................................................................................158 8.2.6 Munkamenet-kezels.......................................................................................160 8.2.7 Levlklds........................................................................................................161 8.2.8 PHP hibakezels...............................................................................................164 8.2.9 Kivtelkezels.................................................................................................... 69 1 8.3. Adatbzis-kapcsolat kezelse PHP-ben.................................................................174 8.3.1 MySQL alapok...................................................................................................174 8.3.2 Kapcsolds egy MySQL adatbzishoz ........................................................... 175 8.3.3 Adatbzisok s tblk ltrehozsa....................................................................176 8.3.4 Adatok bevitele adatbzisba.............................................................................179 8.3.5 Lekrdezs........................................................................................................180 8.3.6 A WHERE zradk...........................................................................................182 8.3.7 Az ORDER BY kulcssz....................................................................................183 8.3.8 Adatok mdostsa...........................................................................................183 8.3.9 Adatok trlse az adatbzisbl.........................................................................184 8.3.10 ODBC kapcsolat ltestse..............................................................................185
7. oldal 8.4. XML kezels............................................................................................................187 8.4.1 Expat XML elemez..........................................................................................187 8.4.2 XML DOM.........................................................................................................187 8.4.3 SimpleXML.......................................................................................................189 9. PHP megoldsok............................................................................................................191 9.1. Egy portl vza......................................................................................................... 91 1 9.1.1 GAMF honlap.....................................................................................................191 9.1.2 Egy msik megkzelts....................................................................................196 9.1.3 MVC megkzelts.............................................................................................198 9.2. Biblia....................................................................................................................... 03 2 9.3. Belptet-rendszer.................................................................................................208 9.4. Tervezsi mintk.....................................................................................................214 9.4.1 Front Controller................................................................................................214 9.4.2 Strategy.............................................................................................................. 15 2 9.4.3 Data Access Object............................................................................................217 9.4.4 MVC..................................................................................................................220 10. Sablonrendszerek........................................................................................................222 10.1. Smarty...................................................................................................................222 10.1.1 Smarty alapok..................................................................................................223 10.1.2 Vltoz mdostk ..........................................................................................225 10.1.3 Vezrlsi szerkezetek......................................................................................226 10.1.4 Gyorstrazs.................................................................................................... 30 2 10.2. A PHP, mint sablonnyelv......................................................................................231 10.2.1 Sablon osztly..................................................................................................231 10.2.2 Blogbejegyzs..................................................................................................233 11. Keretrendszerek...........................................................................................................235 11.1. Code Igniter...........................................................................................................235 11.1.1 Telepts............................................................................................................ 36 2 11.1.2 Az URL-ek felptse.......................................................................................236 11.2. CakePHP................................................................................................................ 36 2 11.2.1 Alapkoncepci..................................................................................................236 11.2.2 A CakePHP teleptse......................................................................................238 11.2.3 Konfigurci....................................................................................................239 11.2.4 GyorsVz azaz Scaffolding kpessgek...........................................................242 11.2.5 Nzetek............................................................................................................244 11.2.6 Komponensek..................................................................................................246 12. Tovbbi szerver platformok........................................................................................249 12.1. J2EE......................................................................................................................249 12.2. Microsoft .NET.....................................................................................................249 12.2.1 A .NET Keretrendszer.....................................................................................249 12.2.2 A .NET ptkvei...........................................................................................250 12.2.3 .NET Szoftver...................................................................................................251 12.2.4 SQL Server 2000............................................................................................. 52 2 12.3. Python...................................................................................................................253 12.4. Ruby on Rails........................................................................................................253 13. Tartalomkezel rendszerek.........................................................................................254 14. llskeres prbafeladatok.........................................................................................255 14.1. Egyszer belptet-rendszer.................................................................................255 14.2. Dinamikus rlapgenerl osztly.........................................................................255 14.3. Cmjegyzk alkalmazs.........................................................................................257 14.4. llshirdetsek......................................................................................................257
8. oldal
Web programozs (0.5. 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.
Szerver opercis rendszer
Linux3Az elterjedtebb, s nem kimondottan asztali (desktop) hasznlatra sznt Linux 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 szolgltats4 ignybe vtelvel is tbbnyire Linux alap szerverekkel tallkozhatunk.
BSD5Kevsb kzismert, de egyes rendszergazdk krben stabilitsa miatt nagy npszersgnek rvend Unix 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 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 nevben nagybet soha ne szerepeljen a fjlnvben. Hasonl okok miatt nem clszer az llomnynevekben kezetes betket vagy egyb specilis karaktereket alkalmazni. 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. .
3 4 5
http://www.linux.hu/ http://tarhely.lap.hu/ http://www.bsd.hu/
1.Fejlesztkrnyezet kialaktsa
9. oldal
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 belltsaiba beleltni. A szerz ltal leginkbb ajnlott csomag az XAMPP6. Az XAMP for Windows 1.5.3a vltozata 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 telepts helye:
6
http://www.apachefriends.org/
10. oldal
Web programozs (0.5. verzi)
A telepts vgezhet parancssorbl is a setup-xampp.bat parancsllomny futtatsval:
A telepts utn a Start menbl s parancssorbl is vezrelhetjk az alkalmazsokat, de legegyszerbb az XAMPP Control Panel alkalmazsa:
1.Fejlesztkrnyezet kialaktsa
11. oldal
A telepts utn a felteleplt rendszer kiprblsa s a jelszavak megadsa clszer a Security oldalon:
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.
1.2.2
Az Apache teleptse7
Az Apache webszerver letltsi oldalrl8 tltsk le a megfelel telept llomnyt. A telept varzsl ablakai kzl a kvetkezket rdemes kiemelni:
7 8
Tovbbi forrs: http://weblabor.hu/cikkek/apachephptelepites http://httpd.apache.org/download.cgi
12. oldal
Web programozs (0.5. verzi)
Sajt gpre telepts esetn ktszer localhost megadsa javasolt, az e-mail cmnek ebben az esetben nincs jelentsge. rdemes szolgltatsknt (service) telepteni a szervert, ugyanis a 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:
Az ra mellett megjelenik az Apache Monitor:
1.Fejlesztkrnyezet kialaktsa
13. oldal
A Monitor ikonnak egyszeren tudjuk indtani, lelltani, vezrelni a szervert. A kpen lthat zld hromszg (mint a szoksos Play gomb) jelzi a szerver futst is. A konfigurcival 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.
1.2.3
A PHP teleptse9
A PHP teleptse is a kvnt teleptkszlet letltsvel kezddik. A letltsi oldalon10 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 elegend. 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 modulknt 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.
9
Tovbbi forrsok: http://weblabor.hu/cikkek/apachephptelepites, http://hu.php.net/manual/hu/install.windows.php10
http://www.php.net/downloads.php
14. oldal
Web programozs (0.5. verzi)
Megjegyzs: Krhetjk azt is az Apache szervernktl, hogy a .html llomnyokat is dolgozza fel, de ezt ritkn alkalmazzk.
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 valamivel jobb szerkeszt (Pldul NotePad+11) viszont mr hasznlhat. A msik vgletet azok a WYSIWYG (What You See Is What You Get) programok kpviselik, amelyek gy teszik lehetv az oldal elksztst, hogy lnyegben 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. A kdsznezst nyjt programok kzl a szerz kedvence a Context 12, amely tbbek kztt magyar fellettel tbb, mint 200 nyelv sznezst tudja megoldani. Ezen 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.4. Grafikus programokMivel ez a jegyzet nem grafikusok vagy dizjnerek, hanem webfejlesztk szmra kszlt, ezrt itt csak nhny alapvet dologrl lesz sz.11 12
http://mypeecee.org/rogsoft/notepad.html http://www.context.cx/
1.Fejlesztkrnyezet kialaktsa
15. oldal
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. A szerz sokig a Jasc Paint Shop Pro hve volt, de a kzelmltban ttrt a teljesen ingyenes Paint.NET13 programra.
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
13
http://www.getpaint.net/
16. oldal
Web programozs (0.5. verzi)
2. A webfejleszts alapjaiWeboldalakat azrt ksztnk (s kszttetnek velnk), mert szeretnnk valamit nyjtani a felhasznlknak. A webfejleszts mint az ipari alkot tevkenysg ltalban a felhasznlk ignyeit nem hagyhatja figyelmen kvl.Megjegyzs: A mvszi nkifejezs, vagy ppen a blogols ltszlag httrbe szortja ezt az elvet, de csak ltszlag.
2.1. Tervezsi, fejlesztsi szempontokEgy weboldal sznvonalas elksztst mindig komoly tervezs elzi meg. A vgcl a felhasznlk megfelel kiszolglsa, ezrt fontos, hogy a felhasznlk viselkedst, ignyeit figyelembe vegyk.
2.1.1
Honlaptervezs
A honlaptervezs a clok megfogalmazsval kezddik. Kinek szl? Mit szeretnnk kzlni, tadni? Milyen felhasznli interakcikra lesz szksg? Egy nagyobb honlap tervezsnl klnsen fontos, hogy a ltogatk fejvel gondolkozzunk, s a szmukra ttekinthet oldalszerkezetet alaktsuk ki. Tipikus hiba lehet, hogy egy cges honlapon a cg bels szerkezete kap hangslyt ahelyett, hogy a ltogatk ignyeire sszpontostana. Ha pldul a honlapon keresztl termkeket szeretnnk eladni, akkor a termkek tbb szempont szerinti kategorizlsa, kereshetsge, valamint alapos bemutatsa (kpek, videofelvtelek, pontos s rszletes adatok, hivatkozsok a gyrt oldalra, termk-sszehasonltsi lehetsg) sokkal fontosabb, minthogy kik a cg vezeti s mi a cg szerkezeti felptse.Megjegyzs: Ez az elv sem mindig egyszeren alkalmazhat. A szerz tbb ve fejleszti a GAMF 14 honlapjt, s nem kevs fejfjst okoz az ta sem a krds: a kzponti honlap s az egyes szervezeti egysgek honlapjai 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 szervezeti 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 szerz azonban 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 mit tegyen 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 oktat alapvet fnykpes tjkoztatja szerepel. Ebbl is ltszik, hogy az egyes tartalmakat bizonyos esetekben akr tbb helyen, tbbfle formban is rdemes nyjtani.
2.1.2
Navigcis struktra
A honlap szerkezetnek kialaktsban nagyon fontos, hogy a tartalmi szerkezet, az oldalak kztti navigci s az egyes oldalak navigcis lehetsgei teljes egysget alkossanak. A kvetkez bra egy zavaros szerkezet honlapot mutat:14
http://www.gamf.hu/
2.A webfejleszts alapjai
17. oldal
ltalban faszerkezet hierarchia kialaktsra rdemes sszpontostani, s szksg esetn grff tovbb bvteni. Nem magtl rthet az sem, hogy egy men mennyi elemet tartalmazzon. Az egyik vglet az egyszint felpts, ahol a sok lehetsg kzl nehz vlasztani:
A msik vglet esetn a sokszint felptsben nem egyszer megtallni az adott tartalmat:
Meg kell teht keresni az arany kzputat a kt vglet kztt, s tovbbi alternatv navigcit is lehetv tenni.Megjegyezs: Jl megfigyelhet a tipikus blog oldalak tbbfle navigcit lehetv tev felptse. A ms oldalak esetn jellemz (egy vagy tbbszint) kategriba val sorols s a keress alap navigci termszetesen itt is jellemz. De ezen kvl mg fontosabb vlt az idbeli elhelyezkeds, a cmkk (tagok) menti gyors elrsi lehetsg, st a ms blogokkal val kapcsolatok is.
A navigci irnyaiA kvetkez bra jl mutatja, milyen problmval tallja szemben magt a ltogat, ha a nyilakkal jelzett mdon a navigcis irny csak fentrl lefel ltezik.
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 egy adott 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 psztznakHa azt hisszk, hogy a ltogatnk a teljes oldalt el fogja olvasni, akkor tvednk. Mivel az interneten rengeteg forrs van, a ltogat nhny msodperc alatt eldnti, hogy az oldal 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 jelenik meg (pl. ez a jegyzet elsdlegesen A4-es mret nyomtatsra van tervezve, de HTML formban is elrhet), vagy a jellegnl fogva az olvas tudja, hogy a keresett informci itt van (pl. egy trvny szvegt olvassa), 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 ttekintst: kifejez f s alfejezetcmek, rvid sszefoglal a cm utn (szoks flkvren vagy nagyobb betmrettel kiemelni), linkekkel s egyb jellsekkel kiemelt kulcsszavak, gondolatok
2.A webfejleszts alapjai a bekezdseink legyenek rvidek s lnyegre trk a fejezetek legyenek rvidek s ttekinthetk
19. oldal
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 teljes megegyezs, a hosszra mindenkppen rdemes figyelni) az oldalaink ne legyenek tl hosszak ha mgis hossz az oldal (nha indokolt lehet), akkor segtsk az oldalon belli navigcit bevezet tartalomjegyzkkel, linkekkel
A tmhoz a Pszicholgia Online (http://www.pszichologia.hu/) Webdesign alapok I.III. cikkeit15 javasoljuk tanulmnyozni.
Oldal navigciA honlap minden oldaln egysges szerkezet, jl ttekinthet menrendszer legyen az oldal fels, vagy valamelyik oldals rsznek fels rszn. (Hasznos lehet az oldalon elhelyezett 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 jutott egy bels oldalra, s keresn az oldalhoz kapcsold egyb oldalakat, de gy nem tallja, hiszen a link a Google oldalra fogja visszavinni.
Viszonylag kevs honlapon hasznljk, pedig sokszor clszer megolds az n. halszlks 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 sszes vlasztsi 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 hivatkozsok hasznosabbak. Az azonban mindenkppen fontos, hogy legyenek hasznos hivatkozsok a szvegben s a szveg mellett is.
15 16
http://www.pszichologia.hu/cikk/cikk.phtml?id=38 http://weblabor.hu/
20. oldal
Web programozs (0.5. verzi)
Megjegyzs: A szerz vlemnye szerint a szvegben clszer azokat a hivatkozsokat elhelyezni, amelyek egy szhoz, nvhez vagy kifejezshez jl kapcsolhatk. Ezzel szemben olyan hivatkozsokat, amelyek az oldal egszhez kapcsoldnak, mindenkppen oldalra rdemes tenni.
Az oldal aljn lev hivatkozsok nem mindig szerencssek, hiszen ha nem olvassa, vagy grgeti vgig az oldalt a ltogat, akkor nem is veszi szre azokat. Msodlagos szerepet azonban sokszor betlt.
Alternatv navigciA hierarchikus felpts nem minden esetben j megkzelts. Fleg blog tpus oldalak esetn terjed a cmkk (tag) vagy kulcsszavak hasznlata, ahol az egyes cmkk, s az oldalak kztt tbb-tbb kapcsolat van. A cmkket sszefoglal oldalakon a betmrettel is 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 sebessgltalnos 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 esetleg a fejlesztnek. Itt nem csak a ma mr egyre jelentktelenebb szm modemes elrsre, hanem a tbb gp kztt megosztott hlzati kapcsolatra, vagy az egyre elterjedtebb mobil bngszsre is rdemes gondolni. Mindig lesznek olyan felhasznlk, akik ilyen hibs tervezs miatt nem fogjk az oldalt ltogatni. Egy felmrs szerint 7 msodperc utn a ltogat msik oldalra megy, ha az oldalnak legalbb egy rsze nem lesz hasznlhat (olvashat). Nhny tipp arra nzve, hogy mit tehetnk a kevsb gyors kapcsolattal rendelkez ltogatk megtartsrt: Az oldal kpek nlkl is olvashat legyen, hogy a kpek letltdsig is tudja a felhasznl hasznosan tlteni az idejt. Az oldal cmei teht ne kppel, hanem szveggel (is) jelenjenek meg. Ha mindenkppen kpet hasznlunk, akkor legalbb az img tag alt tulajdonsgot adjuk meg. Adjuk meg a kpek mrett a HTML forrsban, gy nem fog ugrlni az oldal a kpek tnyleges letltdsekor, s a ltvny sem csak a teljes letltdsre fog sszellni. Ne hasznljunk nagy mret tblzatot az oldalon (fleg az oldal szerkezetnek kialaktshoz ne), mert a teljes tblzat letltdsig nem fog sszellni a ltvny. Tbb kisebb tblzat egybknt is ttekinthetbb lehet.
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 kls szemll gyakran knnyebben szreveszi a hibkat, nehezen hasznlhat rszeket. Pldul a Joomla! Magyarorszg honlapjn17 trtnt 2006 augusztusi dizjn (s ebbl kvetkezen navigci) vlts utn a kezdoldalra linkelt, Mi a vlemnyetek az j oldalrl? cm frum 24 ra alatt 32 hozzszlst eredmnyezett, amibl a sok dicsret mellett tbb mint 10 pt kritikai vlemny volt, aminek nagy rszt mg aznap be is ptettk a dizjnba!Megjegyzs: Ennl a szlssgesen pozitv pldnl azrt figyelembe kell venni, hogy a honlap ltogati jelents 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 tnyleges kperny mret, s hogy fog kinzni az oldal a kpernyn. Az a problma, hogy ezekrl nem sok biztosat tudunk megllaptani. Statisztikai eredmnyeket egyedl a kperny felbontsokrl lehet tudni, de ez nagyon szegnyes informci tbb okbl is. A felhasznl nem biztos, hogy teljes kpernys mretben hasznlja a bngszt, pl. nagy monitorok (19, 21 col) esetn. Nem tudjuk, hogy a bngsz ablakon bell mennyi eszkzsort alkalmaz, vagy ppen a tlcja melyik oldalon s milyen mretben van. Nem tudjuk azt sem, hogy milyen bngsz-belltsokat alkalmaz, s azok 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 felbontsig tesztelni tbbfle opercis rendszer s tbbfle bngsz alatt. St azt is rdemes figyelembe venni, hogy 1-2 ven bell a mobil telefonrl bngszk szmottev rsztvevi lehetnek a ltogatknak. Radsul (mr a drgbb technolgia hasznlatbl sejtheten) fizetkpesebb ltogati rtegrl lehet sz. Vgl azt a slyos (tv)hitet is rdemes megvizsglni, miszerint az oldalnak minden bngszn s minden felbontsban pixelre pontosan ugyangy kell kinzni. A szerz mg nem tallkozott egyetlen felhasznlval sem, aki kpernykpeket sszehasonltgatva pixel-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 fogalmazni, hogy nem vette a fradtsgot, hogy foglalkozzon a ltogatk ignyeivel. Az utbbi egy 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 kdjukat szeretnk a tbbi bngszre is hasznlhatv alaktani. A gyakorlatban azonban sokkal jobban bevlik, ha a szabvnyok pontos ismerete alapjn felptett oldal ksz-
17
http://joomla.hu/
22. oldal
Web programozs (0.5. verzi)
tnk. Innen ltalban kisebb lps az egyes bngszk specilisabb ignyeinek kielgtse.
2.1.7
Mi van a srltekkel?
Vannak emberek, akiknek a ltsuk, hallsuk srlt, vagy teljesen hinyzik. k is szeretnk hasznlni a webet. St rdemes belegondolni, hogy egy a szmtgp kezelst ismer vak vagy ltssrlt tbb esetben r van knyszerlve, hogy a teendit interneten 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 weboldalak szveges tartalmt hozzfrhetv. Radsul ez azt is jelenti, hogy a szveg az elejtl a vgig sorosan olvashat, de nem ttekinthet vizulisan, s a szvegben trtn 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 megnyitunk, majd olyan kicsire mretezzk az ablakot, hogy egyszerre csak egy szt lssunk. Tudatos odafigyelssel lnyeges plusz munka nlkl elrhet, hogy a tartalmaink a srlt emberek szmra is elrhetk legyenek. A tmhoz tovbbi informcik tallhatk pl. a Weblabor Akadlymentes weboldalak 18 cikksorozatban.
2.2. A web szabvnyaiA 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 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. Vgl a keresrobotok is jobban tudjk rtelmezni a szabvnyos oldalakat. Sok lszakrt ajnl nyakatekert trkkket a keresoptimalizls rdekben, pedig a szabvnyok kvetse 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 a webbl a lehet legtbbet lehessen kihozni. Elsdleges tevkenysge a web szabvnyok (egsz pontosan ajnlsok) kidolgozsa. A legfontosabb tagjai:
18 19
http://weblabor.hu/cikkek/akadalymentesweb1 http://www.w3.org/
2.A webfejleszts alapjai IBM Microsoft America Online Apple Adobe Macromedia Sun Microsystems
23. oldal
Akr szemlyesen is bekapcsoldhatunk az ajnlsok kidolgozsba a W3C Magyar Iroda20 ltal koordinlt mdon. (2006. oktber 18-n pldul W3C Mobilweb Mhelykonferencia21 lesz.)
2.2.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.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 21
http://www.w3c.hu/ http://www.w3c.hu/rendezvenyek/2006/mobilweb/index.html
24. oldal
Web programozs (0.5. 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 lehetsget 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. 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, majd gpeljk be a kvetkez szveget: Az oldal cme Ez az els honlapom. Ez a szveg flkvr
Mentsk el az oldalt oldal.html nven! Nyissuk meg a bngsznket, majd a Fjl men megnyits parancst vlasztva keressk meg az elbb elmentett oldal.html llomnyt! A kvetkezhz hasonlt kell ltnunk a bngsznkben:
3.HTML
25. oldal
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 alkalmazni, vagy a Mappa belltsai kztt a bvs 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. Krds: Melyik bngszt hasznljam?
26. oldal
Web programozs (0.5. 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. 2006 mjusban a kvetkez bngszt hasznljk a ltogatk: 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. 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.
3.HTML
27. oldal
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:
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.
3.3. Alapvet HTML tagokA HTML legalapvetbb s leggyakrabban hasznlt tagjai azok, amelyek segtsgvel cmeket, bekezdseket s sortrseket lehet ltrehozni. A HTML tanulshoz a legjobb mdszer, ha pldkkal dolgozunk.
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 cimek.html oldal bemutatja mind a 6 cmet:Ez Ez Ez Ez Ez Ez egy egy egy egy egy egy cm cm cm cm cm cm
28. oldal
Web programozs (0.5. verzi)
A cmsorokhoz a bngsz alaprtelmezetten trkzket is kapcsol.
BekezdsekA 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 minden elvlaszt karakter-sorozatot egy szkzknt rtelmez. A tnyleges trdelst mindig a bngsz mrete s a benne lev szveg hatrozza meg. Ez egy tbb sorbl ll s sok szkzt tartalmaz bekezds.
3.HTML
29. oldal
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.
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
A br tag res, vagyis nincs zr prja.
MegjegyzsekA megjegyzs tagot megjegyzsek elhelyezsre hasznljuk. A bngsz nem veszi figyelembe a megjegyzsbe rt szveget.
30. oldal
Web programozs (0.5. verzi)
A megjegyzsben nem fordulhat el kt ktjel a > nlkl.
Sznes httrA 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, ms kperny (ablak) felbontsban is. Soha ne szkzkkel s jsor karakterekkel (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 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
31. oldal
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 fejlesztk 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.
Tidy HTML Validator22
A kpen lthat, ahogy a sznkiemels alatt a szintaktikai hibk s a hibk rszletes lersa is megtekinthetk.
22
http://users.skynet.be/mgueury/mozilla/
32. oldal
Web programozs (0.5. verzi)
View Source Chart23
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.
FireBug24
A kiterjeszts az oldalt s a forrskdjt teljesen szimultn mutatja, rdemes megfigyelni az egrkurzorral irnythat kk dobozokat.
23 24
http://jennifermadden.com/scripts/ViewRenderedSource.html http://www.joehewitt.com/software/firebug/
3.HTML
33. oldal
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 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 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 indexet34. oldalWeb programozs (0.5.
verzi)Szmtgp kimenetet definil tagokTag Lers Forrskdot definil
Elformzott szveget definil: az elvlaszt (white space) karaktereket
nem a HTML-ben szoksos, hanem direkt mdon rtelmeziIdzet, kiemels s
defincis tagokTag Lers Rvidtst definil Mozaikszt definil Cm elemet
definil Szveg rsirnyt hatroz meg3.HTML Hossz (akr tbb bekezdses)
idzetet jell Rvid (ltalban bekezdsen belli) idzetet jell Idzetet
jell Defincit jell35. oldal Nagy Gusztv
Kecskemt
UN
WWW
Ez a szveg jobbrl olvashat Az ilyen hosszabb idzeteket a bngsz
trkzkkel is kiemeli 36. oldalWeb programozs (0.5. verzi)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
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 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 kdlap
meghatrozsra rdemes figyelmet fordtani.Tovbbi karakter entitsokLers
Jelents Nem trhet szkz < > & " ' Kisebb, mint Nagyobb,
mint s Idzjel Aposztrf Entits nv < > & " ' Entits szmkd
< > & " '3.HTML Paragrafus Copyright 37. oldalAz entitsok
teljes listjt a HTML referenciban rdemes keresni.3.7. LinkekA HTML
linkeket (hivatkozsokat) hasznl arra, hogy az oldalunkhoz ms
tartalmakat kapcsolhassunk.A horgony () tag s a href tulajdonsgEgy
horgony hivatkozni tud egy tetszleges webes erforrsra, pl. egy msik
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
klikkels 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 a klikkelhet, 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 akarja eldnteni, hogy mi hol jelenjen meg.
Nem szksges, hogy errl a webfejleszt helyette dntsn.A name
tulajdonsgEgy hivatkozs alaprtelmezetten a HTML oldal legelejt
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:38. oldalWeb programozs
(0.5. verzi)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.) 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 az egy htrnya, hogy a vissza gomb hatsra is az oldalon bell fog
a felhasznl ugrlni.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.Megjegyzs: frameset esetn nincs szksg a body elemre.A frame
tagA tag azt hatrozza meg, hogy egy-egy ablakrsz milyen HTML
llomnyt jelentsen meg.3.HTML39. oldalA 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 is elksztsen. 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 soron belli keretet definil. Ezt a tagot is rdemes
elkerlni.Hasznos tippekHa a keretnek van lthat szeglye, akkor a
felhasznl vonszolssal t tudja mterezni a kereteket. Ha ezt
szeretnnk elkerlni, adjuk a frame tagnak noresize="noresize"
tulajdonsgot kell adnunk.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 fellben pedig vzszintesen 1:3 arnyban felosztva a msik kt oldal
osztozik:40. oldal Web programozs (0.5. verzi)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 HTM kdjban megadjuk
a linkek esetn alaprtelmezett cl keret nevt a head szakasz base
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 tartalom soron
belli keretet definil3.HTML41. 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 Tblzat 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: 1. fejlc 2. fejlc
1. sor, 1. cella 1. sor, 2. cella 2. sor, 1. cella 2. sor, 2. cella
42. oldalWeb programozs (0.5. verzi)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:Szoks ilyenkor egy nem trhet szkzt () tenni a
cellba, ami kiknyszerti a szegly megjelentst.Tblzat 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.HTML43. oldalCellk sszevonsaA colspan s rowspan tulajdonsgok
segtsgvel cellkat lehet egyesteni: Nv Telefon Bill Gates 555 77 854
555 77 855 TippekA , s elemek a cljuk szerint nagyon hasznos elemek
lennnek, de sajnos a bngszk igen vltoz mdon tmogatjk ket. 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 definil44. oldalWeb programozs
(0.5. verzi)3.10. ListkA HTML tmogatja a szmozott, felsorolt s
definci-listk ltrehozst.Felsorolt listaA felsorolt listk olyan
elemeket tartalmaznak, amelyeket nem kell szmozssal azonostanunk,
ehelyett egy felsorolsi szimblum (alaprtelmezetten egy fekete
karika) jelzi vizulisan a listaelemek kezdett. A felsorolt lista
az
taggal rhat le, a lista elem pedig
taggal.KvTeaSzmozott listaA szmozott listk elemei (tbbnyire)
szmmal azonostottak. A szmozott listt taggal kell ltrehozni, a
lista elemek az elzhz hasonlan li-vel definilhatk. Kv Tea Defincis
listaA defincis lista nem csupn egy felsorols, hanem a definilt
elemek s a definciik sorozata. Egy defincihoz akr tbb elem is
megadhat.3.HTML45. oldalA defincis lista taggal, a definilt elem
taggal, maga a definci pedig taggal definilhat. macska nyvog, szrs
llat kutya eb ugar, szrs llat, kergeti a macskt Tovbbi
pldkFelsorolt s szmozott listk esetn a szimblumok vlaszthatk. A
kvetkez lista az angol abc kisbetit rja ki: alma bann citrom A
listk egymsba is gyazhatk, gy hierarchikus szerkezeteket is
kialakthatunk.kvTea Fekete teaZld tea Tej 46.
oldalWeb programozs (0.5. verzi)sszefoglal tblzatTag Lers
szmozott listt definil felsorolst definil lista elemet definil
defincis listt definil definilt elem definci3.11. rlapokAz rlapokat
arra hasznlhatjuk, hogy klnbz mdokon lehetsget adjunk a ltogatnak
adatok megadsra. A elem ms elemeket tartalmaz. Ezek az rlap elemek
teszik lehetv az adatbevitelt.Az input tagA leggyakrabban hasznlt
elem az . A type tulajdonsgval llthat be, hogy pontosan milyen
adatbeviteli mdot szeretnnk.Szveges mezkA szveges mezk lehetv
teszik, hogy betkbl, szmokbl, rsjelekbl ll karaktersorozatot
lehessen begpelni.3.HTML Vezetknv:
Keresztnv: 47. oldalrdemes megfigyelni, hogy maga a form elem
vizulisan nem lthat, csak a benne elhelyezett elemek. Ha (ahogy
ebben a pldban is) nem adjuk meg a mezk szlessgt, a legtbb bngsz
alaprtelmezetten 20 karakter szlesen jelenti meg. Ez azonban nem
korltozza a tnylegesen begpelhet szveg hosszt. Jelszavak begpelshez
password tpus (type="password") beviteli mezt szoks ltrehozni. Ez
viselkedsben csak annyiban tr el a text tpustl, hogy a begpelt
szveg helyett * karakterek jelennek meg.Megjegyzs: Az elrejts csak
a kpernyre vonatkozik, a hlzaton egyszer adatknt utazik a
jelsz.RdigombokA rdigombokat akkor hasznlhatjuk, ha a ltogatnak
nhny vlaszthat elem kzl kell vlasztsi lehetsget adni. Az elemek kzl
mindig csak az egyik lehet aktv. rdemes megfigyelni a kvetkez
listban, hogy a name tulajdonsg azonossga rendeli a rdigombokat
logikailag egy csoportt. (Teht ebbl a szempontbl nem a vizulis
elrendezs szmt!) N
frfi 48. oldalWeb programozs (0.5. verzi)Ha valamelyik vlasztsi
lehetsget alaprtelmezettnek tekintjk, akkor ezzel knnythetjk is az
rlap kitltst:NJellngyzetekA jellngyzetek arra szolglnak, hogy a
felhasznl egy vagy tbb elemet is ki tudjon vlasztani a rendelkezsre
ll lehetsgek kzl. Ms megkzeltsben gy is lehetne fogalmazni, hogy
egy jellngyzet ki-, vagy bekapcsolt llapotban lehet, fggetlenl ms
beviteli elemektl. Van biciklim
Van autm Itt is van lehetsgnk az alaprtelmezetten ki nem vlasztott
llapot helyett bejellve megjelenteni a jellngyzetet:A label
elemrdemes megfigyelni, hogy rdigomb s jellngyzet esetn a
kattinthat terlet a kr illetve ngyzet alak terletre korltozdik. Az
elemek mellett megjelen szvegek a bngsz szmra fggetlenek a jell
elemektl, csupn a vizulis helyzet jelzi neknk az sszefggst. A label
elem hasznlatval ez a fggetlensg megszntethet: a szveget a
jellelemmel aktv kapcsolatba hozhatjuk. Ez azt jelenti, hogy lehet
klikkelni a szvegre is.3.HTML frfiAz elz verzihoz kpest fontos
kiegszts, hogy a value mellett az id is megkapta az azonost
szvegeket, mivel a label tag for tulajdonsga id alapjn ri el az
elemeket.rlap adatok elkldseAz esetek jelents rszben a felhasznl
azrt tlt ki egy rlapot, hogy adatokat tudjon a szerver fel kldeni
valamilyen hats rdekben. Az eddigi pldkbl kt fontos rsz kimaradt.
Elszr is a felhasznl szmra szoks biztostani egy klds (vagy valami
hasonl funkcionalits) gombot, hogy erre kattintva kezdemnyezhesse
az adatok elkldst. Msrszt a form tag egybknt ktelezen kitltend
action tulajdonsga hatrozza meg, hogy melyik oldalnak kell a krst
feldolgoznia. Felhasznli nv: Ha a felhasznl begpeli a nevet, majd
kattint a Klds gombra, akkor a szveg tovbbtsra kerl a feldolgoz.php
szmra. Nyomgombokat a button taggal is ltre lehet hozni.Lenyl
listaBizonyos esetekben rdigombok helyett clszer inkbb a lenyl
listk alkalmazsa. (Itt elssorban terjedelmi, ttekinthetsgi okokra
kell gondolni.) Kt tag hasznlatra lesz szksg: elszr is a select tag
adja meg a lista kereteit, mg az option tagok a vlaszthat
elemeket.50. oldal Audi Fiat Skoda Suzuki Web programozs (0.5.
verzi)A selected tulajdonsg lehetv teszi az alaprtelmezett elem
kijellst. Ha ez nem szerepel a forrsban, akkor az els elem lesz a
kivlasztott betltdskor. Lehetsg van olyan lista ltrehozsra is, ahol
egyszerre akr tbb elem is kivlaszthat.Tbb soros szveges mezkLehetsg
van hosszabb szveg begpelst, szerkesztst lehetv tev beviteli mezt
is ltrehozni. Erre szolgl a textarea elem. A kvetkez pldn a mretek
megadsn tl a kezdszveg is definilt:Kezdszvegsszefoglal tblzatTag
Lers rlapot definil beviteli mezt definil tbbsoros beviteli mezt
definil cmkt definil lenyl listt definil lenyl lista elemet definil
nyomgombot definil3.12. KpekA HTML nyelvben az tag segtsgvel tudunk
kpeket definilni. Ez az elem res, s nincs zr tagja sem (hasonlan a
br s hr elemekhez). A kp megjelentshez elszr is meg kell adni a src
tulajdonsgot, vagyis meg kell adni a kp llomny helyt s nevt. A
szintaxis a kvetkez:3.HTML51. oldalAz url lehet abszolt vagy relatv
megads is.Az alt tulajdonsgAz alt tulajdonsg alternatv szveg
definilst teszi lehetv. A szabvny szerint teht ennek a szvegnek
akkor kell a bngszben lthatv vlni, ha a kp valamilyen oknl fogva
nem jelenthet meg (pl. mg nem tltdtt le, nem rhet el vagy eleve ki
van kapcsolva a kpek letltse).Megjegyzs: a Microsoft Internet
Explorer akkor is megjelenti ezt a szveget, ha az egrkurzort visszk
a kp fl, de ez eltr a HTML eredeti cljtl.Mret megadsaA bngsz ugyan
a mret megadsa nlkl is meg tudja jelenteni a kpet, mgis clszer a
width s height tulajdonsgokat megadni. Lass kapcsolat vagy sok nagy
kpesetn kimondottan zavar lehet, amikor egy jabb kp letltdsekor az
ekkor ismertt vlt mret 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 linkkntLink aktv fellethez szveg mellett vagy helyett kp
is rendelhet. Erre mutat pldt a kvetkez kd: KptrkpMg rdekesebb
lehetsg a kliens oldali kptrkpek alkalmazsa. Ekkor a kp egyes
terleteihez ms-ms link kapcsolhat. Pldnkban a Naphoz, valamint a
Merkr s Vnusz bolyghoz ms-ms linket rendelnk, mg a maradk terlet
nem reagl a kattintsra.52. oldal Web programozs (0.5. verzi)rdemes
megfigyelni elszr is a usemap tulajdonsg hasznlatt. Ennek rtke kti
ssze a kpet a terleti felosztst ler map elemmel. A map elem akrhny
area elemet tartalmazva rhatja le a linkek jellemzit.Megjegyzs: Az
elbb felvzolt lehetsget kliens oldali kptrkpnek nevezzk. Szerver
oldali kptrkp is ltezik, rdemes azonban a felhasznl knyelme rdekben
a kliens oldali lehetsget alkalmazni. (A szerver oldali megolds
htrnya, hogy a kp egyes rszei kzt a felhasznl nem tud klnbsget
tenni, a bngsz csak a koordintkat kldi el a szerver szmra.)Hasznos
tippekAz align tulajdonsg kp igaztst hatrozza meg. Ezt a
tulajdonsgot azonban a CSS lehetsgei miatt felesleges hasznlni. Az
img elem helye hatrozza meg, hogy a megjelentett oldalon hol fog
szerepelni. Pldul 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 szveggel akr
krbefuttathatv is vlik. (Maga a krbefuttats szintn CSS-el
vgzend.)sszefoglal tblzatTag Lers kp elemet definil3.HTML53. oldal
kptrkpet definil terletet definil3.13. Oldal httereA body tag
rendelkezik kt tulajdonsggal, amelyek az egsz oldal httert hatrozzk
meg. A bgcolor tulajdonsg az oldal httrsznt hatrozza meg. A sznt
hrom fle mdon lehet megadni: hexadecimlis szmknt, RGB rtkknt vagy
szn-nvvel: Mindhrom plda feketre lltja az oldal httrsznt. A
background tulajdonsg az oldalhoz httrkpet hatroz meg. A paramter
rtke lehet relatvan vagy abszolt mdon megadott URL. Hasznos
tippekHttrkp s szveg alkalmazsa esetn figyelni kell arra, hogy a
szveg szne elgg elssn a httrtl (elg nagy legyen a kontraszt).
Httrkpknt viszonylag homogn (kzel egyszn) kpet rdemes alkalmazni, s
a httrsznt is hasonlra belltani, hogy a kp lass letltdse esetn se
legyenek olvashatsgi problmk. CSS segtsgvel sokkal tbb s jobb
lehetsgnk lesz a httr belltsra, rdemes azt elnyben rszesteni.3.14.
SznekA szneket tbb fle mdon kzelthetjk meg. Itt most a monitorok
kpmegjelentsnl hasznlatos, ppen ezrt a webfejlesztsben is ltalnos
RGB megkzeltst alkalmazzuk. Az RGB sznek hrom sszetevbl llnak, mint
piros (red), zld (green), s kk (blue). Mindhrom rtk egy bjton trolt
eljel nlkli szmknt hatrozhat meg, vagyis rtke 0 s 255 kztt (hexban
0 s FF kztt) lehet. Ezzel a mdszerrel teht a 3 bjton brzolhat 16
milli szn kzl brmelyik kivlaszthat. Ezen kvl 16 alapszn nvvel is
rendelkezik (aqua, black, blue, fuchsia, gray, green, lime, maroon,
navy, olive, purple, red, silver, teal, white, s yellow).3.15.
SzabvnyossgA HTML nyelv a kezdetektl fogva szigor szablyokra plt. A
Microsoft Internet Explorer s a Netscape Navigator harcnak egyik
mellktermke, hogy a bngszk felismernek, rtelmeznek olyan HTML
oldalakat is, amelyek nem felelnek meg a szabvny-54. oldalWeb
programozs (0.5. verzi)nak. St a webfejlesztk ezekre a
pontatlansgokra r is szoktak, s ami az informatikaoktats egyik
szgyenfoltja: sok szakr is gy hasznlja a szabvnytl elrugaszkodott
tves gyakorlatokat, mintha a szabvnyok ltrl sem hallott volna mg. A
HTML nyelv minden verzija, vltozata egy gynevezett Document Type
Definition (DTD) segtsgvel definilt. A bngszk szmra segtsg, ha a
dokumentum elejn pontosan lerjuk, hogy melyik verzihoz tartjuk
magunkat. A HTML 4.01 vltozata 3 fle DTD-vel rvnyesthet. A
legpontosabb (strict) vltozat nem engedlyezi az elavult rszek
(tbbnyire formz elemek s tulajdonsgok) hasznlatt, valamint a
kereteket. A kvetkez elemet kell a dokumentum els elemeknt
elhelyezni:Az tmeneti (transitional) DTD megengedi az elavult rszek
hasznlatt is.Keretek hasznlata esetn a kvetkez DTD-t kell
megjellni:Az oldalunk HTML szabvnyossgnak ellenrzsre tbb lehetsgnk
van. http://validator.w3.org/ online hasznlata Firefox bngszbe bepl
Tidy HTML Validator253.16. StlusokA HTML 4.01 minden formzsi
informcit elklntett stluslapokra bz. A stlus informcikat hromfle
mdon rendelhetjk hozz a HTML dokumentumunkhoz.Kls stluslapA kls
stluslap alkalmazsa a legidelisabb eset. Ekkor a HTML llomny az
oldal informatv rszr tartalmazza, a kls CSS llomny pedig sszegyjtve
a megjelentsre vonatkoz formzsokat. A HTML oldalhoz a head elemben
elhelyezett tag segtsgvel csatolhatunk kls CSS llomnyt: Kls
stluslap fjlt nem HTML oldalanknt kln-kln, hanem akr egy egsz
portlhoz egyetlen (vagy nhny) fjlknt szoks kszteni. gy a tovbbi
oldalak ltogatsa esetn nincs szksg a CSS fjl jbli
letltsre.25http://users.skynet.be/mgueury/mozilla/3.HTML55.
oldalBegyazott stluslapBegyazott stluslapot akkor szoks alkalmazni,
ha az oldal egyedi (a kls stluslapot nem lehetne msik oldalhoz
felhasznlni), vagy nagyon egyszer stlusrl van sz. Begyazott
stluslapot a head elemben szerepl tag segtsgvel definilhatunk. body
{background-color: red} p {margin-left: 20px} Soron belli
stlusSoron belli stlust esetleg akkor szoks alkalmazni, ha olyan
egyedi stlusrl van sz, amelyik sehol mshol nem fordul el.Megjegyzs:
A szerz vlemnye szerint mg ilyen esetekben sem rdemes ezt
alkalmazni, a CSS alapos megismersvel s gyes szervezssel ezt el
lehet kerlni.Soron belli stlus alkalmazshoz a kivlasztott elemet
kell style tulajdonsggal elltni. A kvetkez plda egyetlen bekezds
megjelentst vltoztatja meg:Ez egy bekezdsA div s span tagokHa az
ajnlsokhoz ragaszkodunk, s tnyleg minden formzst kls CSS fjl
segtsgvel adunk meg, akkor bizonyos formz tagok helyett ms tagokat
kell alkalmaznunk. Nem mindig van szksg rjuk, hiszen az egybknt mr
szerepl tagok is formzhatk. A div s span tagok clja az, hogy r
lehessen akasztani valamilyen CSS formzst, ha nincs ms alkalmas tag
a HTML kdban. A kt tag kztt egyetlen klnbsg, hogy a div blokk szint
(mint pl. a p vagy table), mg a span soron belli (mint pl. a strong
vagy a) elem.sszefoglal tblzatTag Lers stlus defincit hoz ltre kls
stluslapot kapcsol az oldalhoz blokk szint elemet definil soron
belli elemet definil3.17. FejrszA head elem olyan informcikat
tartalmaz, amelyek a HTML dokumentum egszre vonatkoznak. A fejrsz a
, , , , s tagokat tartalmazhatja.56. oldalWeb programozs (0.5.
verzi)A base elem az oldal relatv linkjeinek mkdsre lesz hatssal.
Ha nincs a base elem href tulajdonsga megjellve, akkor a relatv
hivatkozsok az aktulis HTML fjl knyvtrhoz kpest lesznek rtelmezve.
A href megadsa esetn a megadott URL lesz az indulsi hely. A meta
elem meta-informcit definil az oldalhoz. Nhny plda:A keres robotok
szmra fontos kulcsszavakat emeli ki.Rvid sszefoglal az oldaltl.Az
utols mdosts napja. A link elem tbbek kztt a CSS, hanem JavaScript
fjl linkelsre is alkalmas.sszefoglal tblzatTag Lers a dokumentum
egszre vonatkoz informcikat definil a bngsz cmsorban megjelen
szveget definilja relatv linkek szmra bzis hivatkozs kls fjlok
kapcsolsa meta-informcikat definil3.18. SzkriptekKliens oldali
szkriptek segtsgvel az oldal interaktvabb tehet. A tag segtsgvel
tudunk a HTML oldalba szkripteket elhelyezni. Ennek type
tulajdonsgban kell megadni, hogy milyen szkriptnyelvet szeretnnk
hasznlni.Megjegyzs: A JavaScript egyetlen korbbi emltsre mlt
vetlytrsa a Visual Basic Script volt. A szerz vlemnye szerint a
sokfle, egymssal sem kompatibilis Basic rendszervel a Microsoft
nglt rgott. document.write("Hello Vilg!") Az oldalt bngszben
megjelentve a Hello Vilg! szveg jelenik meg a kpernyn.A noscript
tagHa a bngsz valamilyen ok miatt nem tudja vgrehajtani a script
elem tartalmt (pl. a JavaScript ki van kapcsolva), akkor a noscript
elem tartalma fog megjelenni.3.HTML document.write("A bngsz
tmogatja a JavaScriptet.") A JavaScript nem tmogatott. 57.
oldalltalban nem javasolt a hasznlata. (Az okokrl a JavaScript
kapcsn lesz sz.)Az object s param tagokAz tag begyazott objektumot
definil. Az object tipikusan multimdia tartalom begyazsra
hasznlhat, de a W3C clja szerint az applet s img elemek kivltsra is
alkalmas. A kvetkez plda egy pelda.mov llomny lejtszst kezdemnyezi.
A param tag segtsgvel futsidej paramtereket adhatunk t a begyazott
objektumnak. Az object tagok akr egymsba is gyazhatk, a bels object
tag akkor lesz figyelembe vve, ha a kls object nem futtathat. (Pl.
letiltott Flash objektum esetn egy llkp jelenjen meg.sszefoglal
tblza