web programozas 0.5

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


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


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


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


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:


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


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:


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


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/


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


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


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


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


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


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


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


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


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


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

web programozas 0.5

Documents