web programozas 0.5 (főiskolai jegyzet)

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

1/261

Nagy GusztvNagy Gusztv

Web programozs

0.5. verzi0.5. verzi

2007.2007. mjusmjus


2/261

2. oldal Web programozs (0.5. verzi)

Jogi nyilatkozat

Nevezd meg! - Ne add el! 2.5 Magyarorszg

A kvetkezket teheted a mvel:

szabadon msolhatod, terjesztheted, bemutathatod s eladhatod a mvet

szrmazkos mveket (feldolgozsokat) hozhatsz ltre

Az albbi felttelekkel:

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

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

A szerzi jogok tulajdonosnak rsos engedlyvel brmelyik fenti feltteltl eltrhetsz.

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

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

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

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


3/261

3. oldal

Bevezets

Felhasznls

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

A jegyzet hasznlathoz nem nlklzhetetlen, de ersen javasolt az eladsok ltogat-sa. A jegyzet alapveten a tanrk menethez kapcsold lineris feldolgozsra kszlt,de a fejezetek egy rsze nem pt a kzvetlen megelz fejezetekre.

Az egyes fejezetek tananyagnak elsajttshoz az elmleti rsz tolvassa utn az el-lenrz krdsek alapos tgondolst, valamint a gyakorl feladatok megoldst javas-lom. E nlkl a tantrgy teljestse a hallgatk tbbsge szmra nem lesz eredmnyes.

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

Verzi

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

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

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

Kecskemt, 2007. mjus

a szerz

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


4/261


Tartalomjegyzk

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

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

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

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

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

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

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

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

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

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


5/261

5. oldal

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


6/261


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

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

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

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

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

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

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

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

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

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

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

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


7/261

7. oldal

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


8/261


1. Fejlesztkrnyezet kialaktsa

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

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

1.1. Szerver opercis rendszer

Linux3

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

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

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

BSD5

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

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

Windows

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

Megjegyzs: Ha a fejlesztshez Windows opercis rendszert alkalmazunk, akkor rdemes nhny tech-nikai dologra figyelni.

Elszr is az llomnynevekben a Windows nem tesz klnbsget kis-, s nagybet kztt, ezrt ha pl.HTML-ben vagy CSS-ben nem vagyunk kvetkezetesek, akkor Windows alatt mg mkdni fog az oldal,de ha a ksz munkt ms opercis rendszert futtat gpre kell tvinni, akkor nagy bajban lesznk. Java-solhat, hogy webes fjl nevben nagybet soha ne szerepeljen a fjlnvben.

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

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

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


9/261

1.Fejlesztkrnyezet kialaktsa 9. oldal

1.2. Szerveralkalmazsok

1.2.1 XAMPP integrlt telept csomag

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

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

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

Apache 2.2.2

MySQL 5.0.21

PHP 5.1.4 + PHP 4.4.2-pl1 + PEAR

PHP-Switch win32 1.0

XAMPP Control Version 2.3

XAMPP Security 1.0

SQLite 2.8.15

OpenSSL 0.9.8b

phpMyAdmin 2.8.1

ADOdb 4.80

Mercury Mail Transport System v4.01b

FileZilla FTP Server 0.9.16c

Webalizer 2.01-10

Zend Optimizer 3.0.0

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

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

6 http://www.apachefriends.org/


10/261


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

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


11/261


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

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

1.2.2 Az Apache teleptse7

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

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


12/261


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

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

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

Az ra mellett megjelenik az Apache Monitor:


13/261


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

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

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

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

1.2.3 A PHP teleptse9

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

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

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

mny is elkszl.

Apache konfigurci ismt

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

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

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

Aphp kiterjesztssel rendelkez llomnyokat a PHP rtelmeznek t kell adni, s csak

annak kimenett visszaadni a felhasznlnak. Ezt a kvetkez sorral tudjuk elrni:AddType application/x-httpd-php .php

Szksges aphp.inihelyt is megadnunk:

PHPIniDir "C:/php"

Vgl a DirectoryIndex felsorolsba rdemes els helyre tenni az index.php nevet,hogy ha az elrsi t nem tartalmaz llomnynevet, akkor az index.php-t prblja az

Apache betlteni elsknt.

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


14/261


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

1.3. Fejleszteszkzk

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

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

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

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

1.4. Grafikus programok

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

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


15/261


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

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

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

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

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

Ments GIF, JPG s PNG formtumban.

tmretezs

Kivgs

Korrekcik

Szrs

13 http://www.getpaint.net/


16/261


2. A webfejleszts alapjai

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

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

2.1. Tervezsi, fejlesztsi szempontok

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

2.1.1 Honlaptervezs

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

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

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

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

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

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

2.1.2 Navigcis struktra

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

nak. A kvetkez bra egy zavaros szerkezet honlapot mutat:

14 http://www.gamf.hu/


17/261

2.A webfejleszts alapjai 17. oldal

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

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

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

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

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

A navigci irnyai

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


18/261


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

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

val ugrs is alapvet.

2.1.3 Oldaltervezs

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

Az olvask psztznak

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

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

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

kifejez f s alfejezetcmek,

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

linkekkel s egyb jellsekkel kiemelt kulcsszavak, gondolatok


19/261


a bekezdseink legyenek rvidek s lnyegre trk

a fejezetek legyenek rvidek s ttekinthetk

hagyjunk megfelel tvolsgot az egyes bekezdsek, fejezetek s cmek kztt

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

az oldalaink ne legyenek tl hosszak

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

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

Oldal navigci

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

bell, s tudjon a megfelel irnyba naviglni.

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

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

A Weblabor honlapja16

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

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

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

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

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


20/261


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

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

azonban sokszor betlt.

Alternatv navigci

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

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

A letltsi sebessg

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

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

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

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

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

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


21/261


2.1.4 Figyeljnk a ltogatk visszajelzseire

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

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

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

2.1.5 Milyen monitort hasznlnak a ltogatk?

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

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

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

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

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

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

2.1.6 Milyen bngszt hasznlnak a ltogatk?

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

bngszt alkalmaz felhasznlrl is kezdenek tudomst venni a fejlesztk.

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

17 http://joomla.hu/


22/261


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

2.1.7 Mi van a srltekkel?

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

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

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

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

A tmhoz tovbbi informcik tallhatk pl. a Weblabor Akadlymentes weboldalak18

cikksorozatban.

2.2. A web szabvnyai

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

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

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

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

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

vetse az egyik legalapvetbb mdszer.

2.2.1 A World Wide Web Consortium19 (W3C)

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

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


23/261


IBM

Microsoft

America Online

Apple

Adobe

Macromedia

Sun Microsystems

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

2.2.2 Validtorok

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

A fontosabb validtorokkal a ksbbiekben fogunk ismertetni.

2.3. Ellenrz krdsek

Melyik az utols HTML (nem XHTML!) verzi?

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

Melyek jelenleg a szabvnykvet bngszk?

Milyen verzinl tartanak ma a npszerbb bngszk?

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


24/261


3. HTML

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

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

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

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

3.1. Bevezets

Mi az a HTML?

A HTML aHyper Text Markup Language rvidtse

A HTML llomny egyszer szvegllomny, amely rvid jell tagokat tartalmaz

A jell tagok alapjn tudja a bngsz, hogyan kell megjelentenie az oldalt

A HTML llomnyhtmlkiterjesztssel rendelkezik

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

Hogyan kezdjnk neki?

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

Az oldal cme

Ez az els honlapom. Ez a szveg flkvr

Mentsk el az oldalt oldal.htmlnven!

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

bngsznkben:


25/261

3.HTML 25. oldal

A plda magyarzata

A dokumentum els tagja a . A bngsz errl fogja tudni, hogy hol kezddik aHTML oldal. Az utols tag a , itt r vget a dokumentum a bngsz szmra.

A s tagok kztti rsz a fejlc informci. Az itt megjelen szveget abngsz nem jelenti meg kzvetlenl.

A tagok kztti szveget a bngsz a cmsorban jelenti meg.A tagok kztti szveg jelenik meg a bngsz ablakban.

A s tagok hatsra a szveg flkvren (bold) jelenik meg.

HTML szerkesztk

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

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

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

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

Gyakran ismtelt krdsek

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

Vlasz: A Windows alaprtelmezett belltsa szerint a Jegyzettmb a htmlkiterjeszts

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

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

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

lentykombinci alkalmazsa segt.Krds: Melyik bngszt hasznljam?


26/261


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

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

56.7% Internet Explorer 6

25.7% Mozilla Firefox 1-1.5


2.3% Mozilla

1.5% Opera 7-8


3.2. Tagok

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

HTML tagok jellemzi

A HTML tagok jellik ki a HTML elemeket

A HTML tagot a < s > rsjelek veszik krl(ezek az rsjelek az egyszer szvegekben nem engedlyezettek)

A HTML tagok ltalban prban vannak, mint a s

A pr els tagja a kezd, a msodik a zr tag A szveg (tartalom) a kezd s a zr tag kztt helyezkedik el

A HTML tagok kis-, s nagybetvel is rhatk

HTML elemek

Az elz pldban a kvetkez plda egy elem:

Ez a szveg flkvr

A HTML elem kezd tagja , a tartalmazott szvegEz a szveg flkvr, s a zr tag

.A kvetkez is egy HTML elem:

Ez az els honlapom. Ez a szveg flkvr

Az elem kezd tagja s a zr tagja .

Mirt alkalmazzunk kisbets tagokat?

Maga a HTML nyelv nem rzkeny a kis-, s nagybetkre, de a HTML tovbbfejleszts-

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


27/261

3.HTML 27. oldal

Tag tulajdonsgok (attribtumok, jellemzk)

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

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

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

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

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

Melyik idzjelet alkalmazzuk?

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

3.3. Alapvet HTML tagok

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

A HTML tanulshoz a legjobb mdszer, ha pldkkal dolgozunk.

Cmek

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

Ez egy cmEz egy cmEz egy cm

Ez egy cmEz egy cmEz egy cm


28/261


A cmsorokhoz a bngsz alaprtelmezetten trkzket is kapcsol.

Bekezdsek

A bekezdseket a

taggal lehet definilni:

Ez egy bekezds

Ez egy msik bekezds

A bekezdsekhez a bngsz alaprtelmezetten trkzket is kapcsol.

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

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

Ez egy tbbsorbl ll s sokszkzt tartalmazbekezds.


29/261

3.HTML 29. oldal

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

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

Sortrsek

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

Ez itt
egy tbb
sorra trdelt bekezds

Abrtag res, vagyis nincs zr prja.

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


30/261


A megjegyzsben nem fordulhat el kt ktjel a > nlkl.

Sznes httr

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

Sznes httr!

Hasznos tippek

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

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

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

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

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

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

sszefoglal tblzat

Tag Lers

HTML dokumentumot definil

A dokumentum trzst definilja

Cmsorokat definil

Bekezdst definil


31/261

3.HTML 31. oldal

Egyszer sortrst szr be

Vzszintes elvlaszt vonalat szr be

Megjegyzst definil

3.4. Hogy nzzk meg egy oldal HTML kdjt?

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

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

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

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

Tidy HTML Validator22

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

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


32/261


View Source Chart23

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

jn, s ezek a dobozok kattintsra kinylnak-becsukdnak.

FireBug24

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

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


33/261

3.HTML 33. oldal

3.5. Formzs

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

Szvegformz tagok

Tag Lers

Flkvr szveget definil

Nagyobb szveget definil

Kiemeli a szveget

Dlt szveget definil

Kisebb szveget definil

Ersebb kiemels

Als indexet definil

Fels indexet definil

Beszrt szveget jell

Trlt szveget jellA kvetkez plda mutatja a tagok hatst:

Ez a szveg flkvr
Ez a szvegkiemelt

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

Ez a szveg tartalmazals indexet

Ez a szveg tartalmazfels indexet


34/261


Szmtgp kimenetet definil tagok

Tag Lers

Forrskdot definil

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

Idzet, kiemels s defincis tagok

Tag Lers

Rvidtst definil

Mozaikszt definil

Cm elemet definil

Szveg rsirnyt hatroz meg


35/261

3.HTML 35. oldal

Hossz (akr tbb bekezdses) idzetet jell

Rvid (ltalban bekezdsen belli) idzetet jell

Idzetet jell

Defincit jell

Nagy Gusztv
Kecskemt

UN
WWW

Ez a szveg jobbrlolvashat

Az ilyen hosszabb idzeteketa bngsz trkzkkel iskiemeli


36/261


3.6. Karakter entitsok

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

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

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

Megjegyzs: az entitsok kis-nagybet rzkenyek!

Nem trhet szkz

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

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

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

NagyGusztv

kezetes karakterekAz angol abc-ben nem szerepl karakterek (gy a magyar nyelv kezetes karakterei is)sokig problmt okoztak a HTML szerkeszts sorn. Ezrt korbban szoks volt az ke-zetes karaktereket is entitsok segtsgvel megadni. A mai napra azonban ezek a prob-lmk lnyegben megszntek, ezrt a szerz vlemnye szerint teljesen indokolatlan azentitsok alkalmazsa. Helyette inkbb a pontos kdlap meghatrozsra rdemes figyel-met fordtani.

Tovbbi karakter entitsok

Lers Jelents Entits nv Entits szmkd

Nem trhet szkz

< Kisebb, mint < Nagyobb, mint > >

& s & &

" Idzjel " "

' Aposztrf ' '


37/261

3.HTML 37. oldal

Paragrafus

Copyright

Az entitsok teljes listjt a HTML referenciban rdemes keresni.

3.7. Linkek

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

A horgony () tag s a hreftulajdonsg

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

A horgony szintaxisa a kvetkez:Megjelen szveg

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

A kvetkez plda egy linket definil a Weblabor honlapjra:

A Weblabor honlapja.

Atargettulajdonsg

Alaprtelmezetten egy link kivlasztsa esetn az j oldal az aktulis helyett jelenik meg.Ez azonban mdosthat.

A kvetkez link egy j ablakban nyitja meg a Weblabor honlapjt:

Weblabor

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

hogy errl a webfejleszt helyette dntsn.

Aname tulajdonsg

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

A kvetkez mdon tudunk ltrehozni egy ugrsi clpontot:

PHP

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

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


38/261


Termszetesen akr az oldalon bell is lehet ilyen linkeket alkalmazni:

Ugrs

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

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

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

3.8. Keretek

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

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

ban mr egyre kevesebb helyen indokolt, s egyre kevesebb helyen is hasznljk. (rde-mes belegondolni, hogy nagy portlok szinte egyltaln nem alkalmazzk.) A teljessgignye nlkl nhny htrny, mieltt belekezdennk a keretek hasznlatba:

A fejlesztnek tbb dokumentumot kell karbantartani

Nagyon nehz kinyomtatni egy keretes oldalt

Nem lehet knyvjelzt rakni egy llapothoz, hiszen az URL-ben csak a foldal cmeszerepel

Az elzhz hasonlan nem lehet egy oldalra hivatkozni

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

A sort lehetne folytatni a szerver oldali programozs nehzsgeivel.

Aframesettag

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

Megjegyzs:framesetesetn nincs szksg a body elemre.

Aframe tag

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


39/261

3.HTML 39. oldal

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

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

Anoframes tag

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

vltozatot rszesti elnyben, gy a krds eldlt.

Nzznk egy minimlis pldt az alkalmazsra:

Ez a bngsz nem jelenti meg a kereteket!

Az iframe tag

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

Hasznos tippek

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

Egymsba gyazs

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


40/261


Navigcis keret

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

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

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

Frame a
Frame b
Frame c

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

Frame a
Frame b
Frame c

sszefoglal tblzat

Tag Lers

keretet definil

keret-csoportot definil

a keretet nem ismer bngsz esetn megjelen tartalom

soron belli keretet definil


41/261

3.HTML 41. oldal

3.9. Tblzatok

Tblzatokat a tag segtsgvel lehet ltrehozni. Egy tbla sorokat tartalmaz( tag), s minden sor cellkat ( tag). A tbla celli szveget, kpet, bekezdst,listt, rlapokat, jabb tblzatokat is tartalmazhatnak.

Nzznk egy egyszer, 22 cells tblzatot:

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

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

Tblzat szeglyek

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

Tblzat fejlc

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

1. fejlc2. fejlc




42/261


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

res cellk

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

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

Tblzat cm

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

Tblzat cme1. fejlc2. fejlc


43/261

3.HTML 43. oldal

Cellk sszevonsa

Acolspan s rowspan tulajdonsgok segtsgvel cellkat lehet egyesteni:

NvTelefonBill Gates555 77 854555 77 855

Tippek

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

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

sszefoglal tblzat

Tag Lers

tblzatot definil

fejlcet definil

sort definil

cellt definil

cmet definil

fejlcet definil

tblzat trzset definil lblcet definil


44/261


3.10. Listk

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

Felsorolt lista

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

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

KvTea

Szmozott lista

A szmozott listk elemei (tbbnyire) szmmal azonostottak.

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

KvTea

Defincis lista

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


45/261

3.HTML 45. oldal

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

macska

nyvog, szrsllat

kutyaebugar, szrs llat,kergeti a macskt

Tovbbi pldk

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

almabanncitrom

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

Tej


46/261


sszefoglal tblzat

Tag Lers

szmozott listt definil

felsorolst definil

lista elemet definil

defincis listt definil

definilt elem

definci

3.11. rlapok

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

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

Az inputtag

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

Szveges mezk

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


47/261

3.HTML 47. oldal

Vezetknv:
Keresztnv:

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

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

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

Rdigombok

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

N
frfi


48/261


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

N

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

Van biciklim
Van autm

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

Alabelelem

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

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

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


49/261

3.HTML 49. oldal

N
frfi

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

rlap adatok elkldse

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

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

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

Felhasznli nv:

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

Nyomgombokat a button taggal is ltre lehet hozni.

Lenyl lista

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

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


50/261


AudiFiatSkoda

Suzuki

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

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

t.

Tbb soros szveges mezk

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

Kezdszveg

sszefoglal tblzat

Tag Lers

rlapot definil

beviteli mezt definil

tbbsoros beviteli mezt definil

cmkt definil

lenyl listt definil

lenyl lista elemet definil

nyomgombot definil

3.12. Kpek

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

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


51/261

3.HTML 51. oldal

Az urllehet abszolt vagy relatv megads is.

Az alttulajdonsg

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

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

Mret megadsa

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

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

Kp hasznlata linkknt

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

kvetkez kd:

Kptrkp

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


52/261


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

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

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

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

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

sszefoglal tblzat

Tag Lers

kp elemet definil

8/14/2019 Web Program

web programozas 0.5 (főiskolai jegyzet)

Documents