web programozas alapismeretek - szines

of 287 /287
Nagy Gusztáv Web programozás alapismeretek

Author: szabina-mogyorosi

Post on 26-Jul-2015

181 views

Category:

Documents


3 download

Embed Size (px)

TRANSCRIPT

Nagy Gusztv Web programozs alapismeretek

Web programozs alapismeretek

Nagy Gusztv

Ad Librum KiadBudapest, 2011

A mnek erre a vltozatra a Nevezd meg!-Ne add el!-Ne vltoztasd! licenc felttelei1 rvnyesek: a mvet a felhasznl msolhatja, tbbszrzheti, tovbbadhatja, amennyiben feltnteti a szerz nevt s a m cmt, de kereskedelmi clra nem hasznlhatja fel. A knyv elektronikus vltozata, a fontosabb pldaprogramok s webcmek elrhetek a http://nagygusztav.hu/ oldalrl. A szerz a lehetsgei szerinti legnagyobb gondossggal jrt el a knyv rsa kzben. De ettl mg szmtani kell szerkeszti pontatlansgra, st nem zrhat ki a trgyi tveds sem. Mindezzel egytt a knyv alkalmas az alapismeretek megszerzsre. A kiadvny ltrejttt a Kecskemti Fiskola2 Gpipari s Automatizlsi Mszaki Fiskolai Kara3 tmogatta

Szakmai s nyelvi lektor: Dr. Pap-Szigeti Rbert4

Kiad: Ad Librum Kft. 1107 Budapest, Mzsa tr 2-6.http://www.adlibrum.hu [email protected]

ISBN: 978-615-5110-26-9

Nyomda: Litofilm Kft. Bort terv: Vrhegyi Attila E knyv megrendelhet a kiadtl a http://www.adlibrum.hu/Webprogramozas cmen.

1 2 3 4

http://creativecommons.org/licenses/by-nc-nd/2.5/hu/ http://www.kefo.hu/ http://www.gamf.hu/ http://pap-szigeti.hu/

BevezetsEzzel a knyvvel arra vllalkozom, hogy a Kecskemti Fiskola GAMF Karn tanul mszaki informatikus hallgatk kezbe olyan rsos anyagot adjak, amely az eladsok s gyakorlatok mellett tovbbi segtsget ad a web kliens s szerver oldali nyelvei, alapvetbb technolgii megismersre. A knyv felttelezi az alapvet programozsi s hlzati alapismeretek megltt. Ennek hinyban az anyag elsajttsra tbb idt kell fordtani.

A knyvkiadsrlA knyv elkszlst ngy tanv oktatsi tapasztalatai s hat jegyzetknt kzreadott verzi elzte meg. Az elz verzihoz kpest a kisebb javtsok s kiegsztsek mellett a HTML 5, a CSS 3 s a PHP 5-s verzi nhny fontosabb jdonsga is bekerlt. Ezek mg nem mindig hasznlhatk a munka sorn, de hamarosan szksgnk lesz az ismeretkre. A PDF formtum jegyzeteimet eddig 10-20.000 alkalommal tltttk le, elg sok weboldalon ajnljk, s tbb egyetemen (pl. ELTE, BME, budai Egyetem, Debreceni Egyetem, Szegedi Egyetem) is hasznljk ktelez vagy ajnlott irodalomknt.

A knyv ra 3.600 Ft, ha a kiadtl rendeli meg a papr alap verzit 0 Ft a GAMF nappali vagy levelez tanrend, a jegyzethez tartoz kurzust felvev hallgatja 0 Ft annak szmra, aki ugyan letlti, de nem tallja hasznosnak egy kszn e-mail a [email protected] cmre azok szmra, aki ugyan hasznosnak tartja, de fizetni nem tud rte 2.500 Ft annak szmra, aki hasznosnak tallja s tud is rte fizetni Ez utbbi esetben a [email protected] cmre kldtt e-mailben lehet jelezni a fizetsi szndkot a szmlzsi cm megadsval. Akik inspirltak abban, hogy ezt az zleti modellt alkalmazzam: Jzus Krisztus, akitl (kzvetve vagy kzvetlen) mindent kaptam, A szabad szoftveres kzssg Kecskemt, 2011. jnius a szerz

11. Az alapokEzzel a knyvvel nem vllalkozhatunk arra, hogy minden szksges elismeretet bemutassunk s minden hatrterlettel foglalkozzunk. De felvzolunk nhny olyan terletet, amely a weboldalak kszti szmra ismert kell legyen. Egyes tmkat alaposabban meg fogunk vizsglni, ms tmkhoz pedig tovbbi anyagok forrsait fogjuk megnzni.

1.1. A web s a ltogat viszonyaWebfejlesztknt magunk is ltogatk vagyunk. Nap mint nap klnbz weboldalakat ltogatunk meg. Ahhoz azonban, hogy j weboldalakat tudjunk kszteni, olyan mdon kell ltnunk a weboldalakat, ahogy azt korbban nem tettk. Folyamatosan szem eltt kell tartanunk mrnki szempontokat is.

1.1.1. Webes tipograi alapismeretekSokunkkal prbltk jl-rosszul megtantani a szvegszerkesztsi alapismereteket. Azonban a papralap szvegszerkesztssel kapcsolatos tanulmnyaink htrnyunkra vlhatnak, ha nem rtjk meg a papr s a weboldal mint klnbz mdik kztti klnbsgeket.

A webes tipogra korltai5A nyomdszoknak sokfle lehetsg ll a rendelkezskre, amikor szba kerl a tipogra, mint pldul a betkszletek puszta szma vagy az elrendezsi lehetsgek szles sklja. A webes tipogra ennl sokkal korltozottabb, mivel olyan tpusokkal s elrendezssel kell dolgozzunk, amelyrl tudjuk, hogy elrhet s hasznlhat lesz azokon a gpeken is, amelyeken az olvask megnyitjk a lapot, hiszen senki nem fejleszt csak sajt magnak weboldalt.5 Paul Haine: Tipogra a weben cm cikke alapjn http://dev.opera.com/articles/view/11-tipografia-a-weben/

8. oldalA webes tipogra korltai tbbek kztt a kvetkezk: Korltozott betkszlet

1. Az alapok

Nincs elvlaszts, gy a sorkizrt elrendezs csnya lesz keskenyebb oszlopok esetn Nem lehet tudni, hogy hol s hogyan nzik majd meg a munkt, gy a dizjnereknek minden kpernymretre, felbontsra s krnyezetre gondolniuk kell Ennek megrtsre a kvetkezk olvassa javasolt: Paul Haine: Tipogra a webenhttp://dev.opera.com/articles/view/11-tipografia-a-weben/

rrd (Radharadhya dasa): Web tipogra 1, 2, 3http://webmania.cc/web-tipografia-1/ http://webmania.cc/web-tipografia-2/ http://webmania.cc/web-tipografia-3/

1.1.2. Hogyan olvasunk a weben?Ha weboldal ksztsre adjuk a fejnket, akkor j, ha tisztban vagyunk a ltogati szoksokkal. E tmt egyre tbben s egyre tfogbban kutatjk. Itt most csak egy rvid ajnl erejig foglalkozunk a tmval. Legalbb a kvetkez cikkek elolvassa clszer a tovbbhalads eltt: Hogyan olvasunk a weben?http://www.agent.ai/main.php?folderID=4&articleID=2217&ctag=articlelist&iid=1

Kmn Veronika: A jelen forradalma: olvass a webenhttp://krono.inaplo.hu/index.php/inter/weblibrary/816-a-jelen-forradalma-olvasas-a-weben

Kovcs Balzs: rs s olvass a webenhttp://www.carnation.hu/hirl_cikk.php?id=47&cid=1

1.1.3. Keres(re) optimalizlsHa egy weboldalt fradsgos munkval elksztnk, szeretnnk, ha minl tbb ltogat megtalln az oldalunkat. Aki elolvassa a cikkeinket, hozzszl a blogunkhoz, vsrol a termkeink kzl. A ltogat szerzse minden honlapnak clja. Ezrt e tmval is foglalkozunk nhny ajnlott irodalom elejig. A ltogatszerzs klasszikus mdja a keresmotorokban (pl. Google) val megjelens, mgpedig minl elkelbb helyen az ltalunk hn htott keresszavakra.

1.1. A web s a ltogat viszonya

9. oldal

Br a tmval foglalkoz rsok, weboldalak, vllalkozsok nem mindig tesznek klnbsget a keresoptimalizls s keresmarketing kztt, itt ezt megtesszk. A keresre optimalizls a sajt oldalunk fejlesztsvel trtnik. Emiatt minden weboldal-tulajdonosnak szksge van r. Mi itt erre tudunk koncentrlni. A keresmarketing sok egyb eszkzt (pl. hrlevl, zetett hirdetsek) is felhasznl, amelyek nem kpezik a weboldalunk rszt. (Ez a terlet nem tmja a knyvnek.) Nhny hasznos informciforrs: Google keresmotor-optimalizlsi tmutat kezdknekhttp://googlewebmastercentral.blogspot.com/2009/06/seo-starter-guide-now-available-in-40.html

Jroli Jzsef: Mi a keresoptimalizls (Keresmarketing)?http://webni.innen.hu/Keres_c5_91optimaliz_c3_a1l_c3_a1s

Longhand: Keresoptimalizlshttp://longhand.hu/keresooptimalizalas

rdemes azonban megjegyezni, hogy a keresmarketing terletn sok tvhit kering, s sok minsgen aluli cg knlja szolgltatsait. A tvhitekkel kapcsolatban kt gondolatbresztt emltnk meg: Kungl Istvn: SEO mtoszokhttp://www.seotools.hu/blog/seo-mitoszok

Katona Zsuzsa: Rangsorolsi tvhitekhttp://seo-training.eu/szakirodalom/google_ranking_tevhitek

1.2. A web mkdseAz 1. bra sokat segthet a tovbbi informcik megrtsben.

10. oldal

1. Az alapok

1. bra. A kliens-szerver architektra A felhasznl, aki a web szolgltatsait ki akarja hasznlni, megteheti ezt egy tetszleges modern webbngszvel. (E kt szereplt egyttesen a kliens oldalnak tekintjk.) A felhasznl a bngszt hasznlva kezdemnyezheti egyes weboldalak letltst. A web kezdeti idszakban a webszerver azokat az llomnyokat tudta kiszolglni, amiket a httrtrain elhelyeztek. (Ez tulajdonkppen statikus tartalmat eredmnyez, vagyis az ilyen tartalom jellemzen nem vltozik.) Bizonyos esetekben ez ma is gy van: pldul egy honlapba illesztett kp nem fog megvltozni, akrhnyszor tltjk is le, ezrt a webszervernek a bngsz krsre vlaszul mindssze vissza kell azt adni. Ksbb egyre nagyobb igny lett a dinamikus tartalmak irnt, amikor a tartalom mr a ltogat tevkenysgei, vagy ms okok miatt sznesebb, vltozbb lehet. Ebben az esetben a webszerver nem nmaga vlaszol a bngsz krsre, hanem PHP, vagy ms nyelv program lltja el a vlaszt, amit a webszerver csak tovbbt. Tovbb nvelheti az oldal dinamizmust, ha a tartalmak ellltshoz szksges adatokat (legalbb rszben) adatbzisban troljuk. Ekkor a PHP nyelv forrsprogram az adatbzisszerverrel kapcsolatot pt fel, s adatbzisbl szrmaz informcikat is felhasznl a vlasz elksztshez, illetve a felhasznlk vlaszait is eltrolja az adatbzisban.

1.2.1. WebszerverA webkiszolgl/webszerver egy kiszolgl, amely elrhetv teszi a rajta trolt weblapokat a HTTP protokollon keresztl. A webszerverekhez webbngszkkel lehet kapcsoldni.

1.2. A web mkdse

11. oldal

Br a webszerverek sok mindenben klnbznek, az alapvet funkciik azonosak. Minden webszerver HTTP krseket fogad a hlzatrl, s HTTP vlaszokat kld vissza. A HTTP vlasz az esetek tbbsgben egy HTML dokumentum, de lehet mg egyszer szveges fjl, kp, vagy ms tpus fjl is.

KrsA webszerverek a klienstl kapott krsekben tbbek kztt URL cmet kapnak, melyet aztn ktflekppen rtelmezhet a szerver a belltsaitl fggen: 1. A tartomnynv utn ll relatv mappa s fjl struktrt hozzrendelik egy gykrmapphoz. (A gykrmappa a webszerver belltsaiban van megadva, s az adatokat kr kliens szmra lthatatlan. Tovbbi informcik a 3.1.1. fejezetben.) 2. A tartomnynv utn ll relatv mappa s fjlstruktra (vagy akr mg a tartomnynv is) teljesen fggetlen a krt cmben szerepl struktrtl. Ebben az esetben szerver meghatrozott szablyok szerint formzza a krt cmet. Ennek segtsgvel egy mappra irnyul krs teljesen ms mappra vagy akr egy fjlra is mutathat s fordtva. A kliens pldul az albbi URL-t kri: http://www.pelda.com/utvonal/fajl.html A kliens webbngszje ezt rtelmezve ltrehoz egy kapcsolatot a www.pelda.com kiszolglval, s elkldi a kvetkez HTTP 1.1 krst:GET /utvonal/fajl.html HTTP 1.1 Host: www.pelda.com

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

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

12. oldal

1. Az alapok

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

1.2.2. WebtrhelyA mai weboldalak kis hnyada ignyli, hogy egy vagy esetleg tbb (n. dediklt) szerver teljes egszben a weboldal kiszolglst vgezze. ppen ezrt a legtbb honlap ms honlapokkal osztozik egy webtrhely erforrsain. A virtulis webtrhely szolgltats alatt egy olyan internetes szolgltatst rtnk, ahol egy webszerver erforrsait tbb felhasznl/honlap kztt osztjk fel. Minden felhasznl egy a rendszer ltal dediklt trhelyet foglal el, aminek nyilvnos tartalma egyedi domn nven rhet el. Kisebb forgalm weboldalt kltsghatkonyan lehet brelt webtrhelyen zemeltetni. Trhelyet n. trhelyszolgltatktl6 brelhetnk. A webtrhely szolgltats ltalban tartalmaz egy adminisztrcis felletet (pl. cPanel7), hogy a brl a trhelyt menedzselni tudja. Osztott trhelyszolgltatk rendszerint az egyes szolgltatsokat zikailag elklntett kiszolgl rendszereken oldjk meg, az gyflkiszolgl s adminisztrcis rendszer, a levelez kiszolgl, az adatbzis szerver, a webszerver zikailag elklntett kiszolglkon mkdik. A legtbb webkiszolgl alacsony kltsg Linux vagy BSD alap LAMP szerver. (A LAMP a Linux, Apache, MySQL, PHP szavak rvidtst jelenti.) Az egyes opercis rendszerekre ptett szolgltatsok lnyegben meghatrozzk a felhasznl ltal elrhet technolgik csoportjt is. Windows alap webtrhely esetn a felhasznl vlaszthat ASP.NET s Microsoft SQL Server, de akr PHP s MySQL Server tmogatst is; mg LAMP szerver esetn csak PHP nyelv weboldalakat kszthetnk MySQL Server tmogatssal.

1.2.3. Virtulis szerverA hagyomnyos osztott webtrhelyek helyett egyre npszerbb megolds a virtulis szerver alkalmazsa. A virtulis szerver, ms nven VPS (Virtual Private Server) a vals szerver erforrsainak egy bizonyos rszt hasznlhatja. Ezek az erforrsok lehetnek dedikltak, azaz kizrla6 7 http://tarhely.lap.hu/ http://www.cpanel.net/

1.2. A web mkdse

13. oldal

gosan az adott virtulis szerver veheti ignybe a neki kiosztott erforrsokat, fizikai hardver elemeket, vagy megosztottak: pl. kt virtulis szerver hasznlhatja az egyik proceszszort, azaz osztoznak a teljestmnyn, de lehetsgk van nagyobb kapacits kihasznlsra is, amennyiben a msik fl kevsb terheli (2. bra).

2. bra. VPS architektra A szerver virtualizcival teljestmnyben s hardver felptsben is (ezek virtulis hardverek, amik az egyes fizikai hardverekbl vagy azok bizonyos hnyadbl llnak) fizikai gphez mlt konfigurcit hozhatunk ltre, melynek kezelse gyakorlatilag megegyezik a vals szerverekvel, ugyanakkor rengeteg elnnyel br velk szemben.

1.2.4. HTTP protokollA HTTP (HyperText Transfer Protocol) egy informcitviteli protokoll a vilghln. Az eredeti clja a HTML lapok publiklsa s fogadsa volt. A HTTP egy krs-vlasz alap protokoll kliensek s szerverek kztt. A kommunikcit mindig a kliens kezdemnyezi. A HTTP klienseket gyjtnven user agent-nek is nevezik. A user agent jellemzen, de nem felttlenl webbngsz. A HTTP ltalban a TCP/IP rteg felett helyezkedik el, de nem fgg tle.

HttpFoxA gyakorlatban a HTTP megismershez a Firefox bngsz HttpFox 8 nev kiegsztje nagyszer lehetsget nyjt.8 https://addons.mozilla.org/en-us/firefox/addon/httpfox/

14. oldal

1. Az alapok

A 3. brn ltszik, hogy a weboldal letltshez (fell az els sor) milyen HTTP krst kldtt el a bngsz (lent balra), s milyen vlaszt kapott a webszervertl (lent jobbra). A tovbbi sorok (fent) a HTML feldolgozsa utn szksges CSS, JavaScript s kp llomnyok letltst is mutatjk.

3. bra. A HttpFox mkds kzben

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

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

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

MetdusokHTTP protokoll nyolcfle metdust definil. A metdusok a megadott erforrson vgzend mveletet hatrozzk meg.

1.2. A web mkdseHEAD

15. oldal

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

GET

POST

PUT DELETE TRACE

OPTIONS CONNECT

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

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

A sttuszkdok jelentst az RFC 26169 tartalmazza rszletesen, az albbi lista egy ttekint osztlyozst ad a kezd szmjegy alapjn:

9

http://rfc-ref.org/RFC-TEXTS/2616/index.html

16. oldal1xx 2xx 3xx 4xx 5xx

1. Az alapokInformatv Krs megkapva. Siker A krs megrkezett; rtelmezve, elfogadva. tirnyts A krs megvlaszolshoz tovbbi mveletre van szksg. Kliens hiba A krs szintaktikailag hibs vagy nem teljesthet. Szerver hiba A szerver nem tudta teljesteni az egybknt helyes krst.

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

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

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

1.2.5. FTP protokollA File Transfer Protocol, a TCP/IP hlzatokon trtn llomnytvitelre szolgl szabvny. Gyakran van szksg arra, hogy valamilyen llomnyt hlzaton keresztl tltsnk le sajt gpnkre, vagy egy llomnyt msok szmra hozzfrhetv tegynk. Erre alkalmas az FTP, ami lehetv teszi a klnbz opercis rendszer gpek kztt is az informcicsert. A hozzfrsi jog alapjn ktfle kapcsolattpus ltezik: letlts, vagy feltlts nyilvnosan hozzfrhet llomnyokbl vagy llomnyokba, letlts, vagy feltlts olyan gprl, ahol azonostval rendelkeznk.

1.2. A web mkdse

17. oldal

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

1.2.6. Webcm (URL)A webcm, ms nven URL (amely a Uniform Resource Locator, vagyis egysges erforrsazonost rvidtse), az Interneten megtallhat bizonyos erforrsok (pldul szvegek, kpek) szabvnyostott cme. Elszr Tim Berners-Lee alkotta meg a World Wide Weben val hasznlatra. A jelenleg hasznlt formtumot rszletesen lerja az IETF RFC 1738 10 szabvnya. A webcm az Internet trtnetnek alapvet jtsa. Egyetlen cmben sszefoglalja a dokumentum megtallshoz szksges ngy alapvet informcit: a protokollt, amit a clgppel val kommunikcihoz hasznlunk; a szban forg gp vagy tartomny nevt; a hlzati port szmt, amin az ignyelt szolgltats elrhet a clgpen; a fjlhoz vezet elrsi utat a clgpen bell. Egy tipikus, egyszer webcm gy nz ki:http://hu.wikipedia.org:80/wiki

Ennek rszei: A http hatrozza meg a hasznland protokollt. A protokoll neve utn kettspont (:) rand. A hu.wikipedia.org adja meg a clgp tartomnynevt. Ez el kt perjel ( //) rand. A 80 adja meg a clgp azon hlzati portszmt, amin krsnket vrja; ez el kettspont (:) rand. Ezt a rszt gyakran teljesen elhagyhatjuk, pldul esetnkben a HTTP protokoll alaprtelmezett portszma a 80. A /wiki/Bit a krt elrsi t a clgpen. Ez a rsz mindig a per-jellel (/) kezddik. A legtbb bngsz nem is ignyli, hogy a http:// rszt begpeljk egy weblap elrshez, hiszen az esetek dnt tbbsgben gyis ezt hasznljuk. Egyszeren begpelhetjk a10 http://tools.ietf.org/html/rfc1738

18. oldal

1. Az alapok

lap cmt, pldul: hu.wikipedia.org/wiki/Bit. A cmlap megtekintshez ltalban elg a tartomny nevt berni, pldul hu.wikipedia.org. A webcmek egyb rszeket is tartalmazhatnak, http esetben pldul az elrsi t utn, egy krdjel (?) mg helyezve keressi krds szerepelhet, ami egy get metdus HTML rlapbl vagy specilis mdon sszelltott hiperhivatkozsbl szrmazik. Az elrsi t utn, attl egy ketts kereszttel (#) elvlasztva szerepelhet a hiperszveg egy rszre hivatkoz azonost. Ez az azonost nem rsze a webcmnek, de gyakran szerepel vele kapcsolatban. Pldk:http://hu.wikipedia.org/w/wiki.phtml?title=Bit&action=history http://hu.wikipedia.org/wiki/1999#Esemnyek

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

1.3. A tervezs folyamataMint minden mrnki feladat, a webfejleszts sem kpzelhet el tervezs nlkl egy bizonyos mret felett. Elszr is tisztznunk kell a cljainkat.

1.3.1. A honlap cljaA szerz a megrendelvel val kommunikcit egy interj formjban javasolja kezdeni, az albbi krdsekkel. A krdsekre adott vlaszok kztt persze nagy lehet az tfeds, az11 Az URI az erforrst ktflekpp azonosthatja: hely szerint (URL) vagy nv szerint (URN). 12 A keretek (frame-ek) segtsgvel az ablak tbb tglalapra felbonthat, s minden rszben nll HTML llomny lesz megjelentve. Ma mr elavult s kerlend techniknak szmt.

1.3. A tervezs folyamata

19. oldal

interj clja az elrend clok teljes kr feltrkpezse. Egy konkrt esetben teht bizonyos krdseket ki is hagyhatunk, ha azok feleslegesnek, rtelmetlennek tnnek. Ms esetben tovbbi krdsek is szksgess vlhatnak. Mi a clunk a honlappal? Kik lesznek a ltogatink? Mit szeretnnk bemutatni? Mik a kulcsfontossg funkcik? Milyen visszajelzseket vrunk a ltogatinktl? Rszt vesznek-e a ltogatink a tartalom ellltsban? Miben fog a tartalom s a szolgltats fejldni (pl. 1 hnap, 1 v mlva)? Ki fogja az oldalt karbantartani? Milyen csoportos s szemlyes jogosultsgi krkre lesz szksg? Hol s hogyan szeretnk a honlapot az interneten reklmozni? Ltogatottsgi statisztikkat szeretnnk-e megismerni? Termszetesen a krdsek akkor is alkalmazhatk, ha a sajt vagy cgnk honlapjt szeretnnk elkszteni. Tovbbi rszletek a szerz honlapjn tallhatak: http://nagygusztav.hu/honlap-interju-mi-az-oldal-celja Nhny hasonl forrs: Kanga Design Gyakori krdsekhttp://kangadesign.hu/honlap-keszites-gyakori-kerdesek.html

Wolf Gbor: Top 10 honlap hiba s hogyan javtsd ki?http://www.marketingcommando.hu/cikkek/top-10-honlap-hiba.html

7even: Mit gondoljon t Weboldal indts eltthttp://www.7even.hu/weboldal-keszites/weboldal-inditas-elott

1.3.2. A honlap megtervezseHa mr tudjuk, mi a clunk a honlapunkkal, akkor kezdjnk bele az oldal megtervezsbe. Ehhez meg kell vlaszolnunk mg a kvetkez krdseket.

20. oldal

1. Az alapok

Milyen oldalaink lesznek?A vlasz egy konkrt, tteles lista legyen. Pldul: kezdoldal (hrekkel) kapcsolat termkkategrik tartalomjegyzke termkkategrik oldalai termkek oldalai vendgknyv oldal stb.

Milyen viszonyban llnak az oldalak egymssal?Itt az al-fl rendeltsgi viszonyon kvl gyakori a mellrendelt kapcsolat is. A vlasz az oldal navigcijnak kitallsban fog segteni. Illusztrciknt nzznk meg egy zenei egyttes honlapjnak oldaltrkpt 13 (4. bra).

13 Forrs: http://dev.opera.com/articles/view/6-informacios-architektura-egy-website-t/

1.3. A tervezs folyamata

21. oldal

4. bra. Oldaltrkp Ezutn nevezzk el az oldalainkat, s rjuk hozz rvid tartalmi sszefoglalkat.

Hogyan pljenek fel az oldalaink?Az oldal funkcionlis ltvnytervt tervezve el kell dntennk, hogy a klasszikus 1, 2 s 3 oszlopos oldalelrendezs kzl melyiket vlasztjuk, hova kerljn a log, fcm, lblc stb. hogyan pljn fel a navigcis struktra (fels men, bal oldali men, kenyrmorzsa men14, cmkefelh, stb.) a menk egy vagy tbbszintek legyenek melyik szls oszlopban milyen tartalm dobozok s milyen sorrendben szerepeljenek

14 A kenyrmorzsa men a felhasznli felleteken hasznlt navigcis eszkz, amely a kiindulponttl a felhasznl jelenlegi tartzkodsi helyig vezet utat mutatja. Pl.: Cmlap ECDL Vizsgakzpontok GAMF Kar

22. oldal

1. Az alapok

Jl t kell gondolnunk, hogy a ltogatink szmra a leglogikusabb, legttekinthetbb struktrt tudjuk nyjtani. Az oldalelrendezs megtervezshez igen hasznos a Paper prototyping mdszere (5. bra).

5. bra. Paper prototyping plda Ezen kvl egyre elterjedtebb a drtvz (wireframe, mockup) eszkzk hasznlata is. Pldaknt a MockFlow egy Youtube tervt15 nzzk meg (6. bra).

6. bra. Drtvz bra a MockFlow oldalrl15 Forrs: http://www.mockflow.com/samples/

1.3. A tervezs folyamataTovbbi informcik: http://dev.opera.com/articles/view/6-informacios-architektura-egy-website-t/ http://weblabor.hu/blog/20100901/jo-weboldal-terv http://www.alistapart.com/articles/paperprototyping http://ergomania.blog.hu/2010/09/28/drotvaz_vagy_szoveg http://opendir.hu/?freedom=/tartalom/weboldal_tervezes/drotvazas_weboldal_tervezes_online_eszkozzel

23. oldal

http://arth2o.com/blog/honlap-drotvaz-es-gui-prototipus

1.4. A fejlesztkrnyezet kialaktsaltalnos esetben a szerverkrnyezet kialaktsa a rendszergazda feladatkrhez tartozik, mgis fontos, hogy alapszinten tlssuk a feladatokat, lehetsgeket. Msrszt a sajt fejleszti gpnkn alkalmazott szoftverek is nagyban befolysoljk a munknkat, gy errl is ejtnk nhny szt.

1.4.1. Szerver opercis rendszerElszr is nzzk meg, melyek ma a webkiszolglkban gyakran hasznlt opercis rendszerek.

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

16 http://www.linux.hu/ 17 http://tarhely.lap.hu/

24. oldal

1. Az alapok

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

WindowsBr les webes krnyezetben nem jelents a rszesedse, azrt elfordul az alkalmazsa. A tanuls szakaszban azonban sokszor a legkzenfekvbb megolds az egyetlen (tbbnyire Windows opercis rendszerrel mkd) szmtgpnket szerverr alaktani. A fejezet tovbbi rszben ezzel a tmval fogunk foglalkozni. 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 az problms lesz. Javasolhat, hogy webes fjl esetn nagybet soha ne szerepeljen a fjlnvben. Az FTP kliens alkalmazsok az ilyen jelleg hibk elkerlse rdekben ltalban lehetv teszik az FTP-vel tvitt llomnyaink kisbetstst is. 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. kerlend a forma.

1.4.2. Szerver alkalmazsokLinux s BSD alatti teleptst most nem trgyaljuk, a hasznlt disztribci dokumentcijt rdemes fellapozni19. Itt a Windows alatti szerver krnyezet kialaktst fogjuk trgyalni.

XAMPP integrlt telept csomagMivel a szerver alkalmazsok teleptse nem mindig egyszer feladat, prblkozhatunk elre csomagolt, s minden szksges alkalmazst telept s bekonfigurl programokkal18 http://www.bsd.hu/ 19 Pl. LAMP szerver: http://sugo.ubuntu.hu/community-doc/jaunty/universe/apps/lamp-server.html

1.4. A fejlesztkrnyezet kialaktsa

25. oldal

is. Ezek kzl csak egyet mutatunk be rszletesen, a tbbi alkalmazsa hasonl. A szolgltatsok krben lehetnek jelentsebb eltrsek is.A telept-csomagok htrnya, hogy br tbbnyire mkdnek, egy esetleges hiba elllsa esetn a hiba megszntetse elgg bajos lehet, mivel kevsb tudunk a csomag mkdsbe beleltni.

A szerz ltal leginkbb ajnlott integrlt telept csomag az XAMPP20. Az XAMP for Windows 1.7.3 vltozata tbbek kztt a kvetkez szoftvereket telepti s konfigurlja: Apache 2.2.14 (IPv6 enabled) + OpenSSL 0.9.8l MySQL 5.1.41 + PBXT engine PHP 5.3.1 phpMyAdmin 3.2.4 A letlttt teleptprogram a Windows alatti teleptsek szoksos krdseit teszi fel. Legfontosabb a telepts helye. A telepts utn a Start menbl s parancssorbl is vezrelhetjk az alkalmazsokat, de legegyszerbb az XAMPP Control Panel alkalmazsa (7. bra). A webszerver mkdst a bngsz cm sorba rt localhost cm lekrsvel tudjuk tesztelni. Ekkor az It works! szveg a mkds bizonytka. A PHP s a MySQL mkdst legegyszerbben a localhost/phpmyadmin lekrsvel tesztelhetjk.

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

26. oldal

1. Az alapok

7. bra. XAMPP Control Panel

1.4.3. A fejleszt gpeSzerverknt akr a sajt gpnket hasznljuk, akr egy tvoli szervert, a kvetkez szoftverekre szksgnk lesz.

BngszA weboldalt ltogatk igen sokfle bngszt hasznlnak. Emiatt a webfejlesztnek legalbbis az elterjedtebb tpusokat ismernie s hasznlnia kell tesztelsi clokbl.Hogy pontosan milyen arnyban hasznljk a ltogatk az egyes bngszket s azok verziit, igen sok vita trgya. A szerz a weboldal jelenlegi adatait a Google Analytics alapjn szokta figyelni, ltalnos informciknt pedig a http://www.w3schools.com/browsers/browsers_stats.asp statisztikit.

Ezen kvl fejlesztknt sem mindegy, melyik bngsz mennyi tmogatst ad a fejlesztsi folyamat gyorstshoz. Ebbl a szempontbl legjobb vlaszts a Firefox, amelyhez j nhny fejlesztshez hasznlhat kiegszt tlthet le21. A szerz ltal gyakrabban hasznlt kiegsztk:

21 https://addons.mozilla.org/hu/firefox/extensions/web-development/

1.4. A fejlesztkrnyezet kialaktsa HTML Validator22

27. oldal

A 8. brn lthat, ahogy a sznkiemels alatt a szintaktikai hibk s a hibk rszletes lersa is megtekinthetk. Kis gyessggel (Oldal javtsa gomb) akr a hibk egy rsztl is megszabadulhatunk.

8. bra. Forrs megtekintse a HTML Validator megjelentsvel

FireBug23A 9. brn lthat kiterjeszts az oldalt s a forrskdjt teljesen szimultn mutatja, rdemes megfigyelni az egrkurzorral irnythat kk dobozokat.

22 http://users.skynet.be/mgueury/mozilla/ 23 http://getfirebug.com/

28. oldal

1. Az alapok

9. bra. A Firebug mkds kzben A kvetkez videkkal alaposabban megismerhetjk a Firebug szolgltatsait: rrd (Radharadhya dasa): Firebug 10 percbenhttp://webmania.cc/firebug-10-percben/ http://webmania.cc/firebug-10-percben-2/ http://webmania.cc/firebug-10-percben-3/

Web Developer24A Web Developer segtsgvel szintn rengeteg informcit gyjthetnk az oldalrl (10. bra), de akr tesztelhetjk is CSS, JavaScript vagy kpek nlkl az oldal kinzett, mkdst.

24 https://addons.mozilla.org/hu/firefox/addon/60/

1.4. A fejlesztkrnyezet kialaktsa

29. oldal

10. bra. Web developer div informcik

HTML Validator25A HTML Validator az oldalunk HTML s CSS szabvnyossgt tudja ellenrizni.

FjlkezelA webfejleszts kzben igen gyakran van szksg llomnykezelsi feladatokra. Ehhez a Windows intz helyett clszer valamelyik kt paneles szoftvert alkalmaznunk. Az llomnyok msolsa, szinkronizlsa, biztonsgi mentsek kezelse napi szint feladat. Legismertebb manapsg a Total Commander26, Linux alatt a Krusader27, de vannak szp szmmal tovbbi szoftverek is.

FTP kliensSzksgnk lesz valamilyen FTP kliensre az llomnyok szerverre feltltshez. Erre a clra megolds lehet a Total Commander, de clszer inkbb megismerni a FileZilla28 alkalmazst. A FileZilla egy szabad FTP kliens, amely knnyen hasznlhat, tbb szlon is kpes fel-, s letlteni, folytatja a megszakadt letltseket, tbb opercis rendszeren s nyelven mkdik. Az egyre gyakoribb SFTP-hozzfrs miatt j megolds a WinSCP29 hasznlata is.

Programozi editor, IDEA webfejleszts sorn idnk j rszben forrskdok begpelst fogjuk vgezni. Ezrt nagyon nem mindegy, milyen tmogatst kapunk ehhez az editorunktl. Nem igazn alkal25 26 27 28 29 https://addons.mozilla.org/hu/firefox/addon/249/ http://www.totalcommander.hu/ http://www.krusader.org/ http://filezilla-project.org/ http://winscp.net/

30. oldal

1. Az alapok

mas a feladatra a Jegyzettmb. De nem nagyon alkalmasak az n. WYSIWYG (What You See Is What You Get) editorok sem, mert tlsgosan megktik a keznket. A szerz vlemnye szerint a webfejlesztnek olyan eszkzkre van szksge, amelyek gy adnak tmogatst, hogy a folyamatot a fejleszt, s nem a program vezrli. Ezen szoftverek egyik legjobbika a Komodo Edit30, amelyik a kdsznezs mellett kdkiegsztssel s l (FTP feletti) szerkesztssel is megbirkzik.

Kpszerkeszt programA 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 Paint.NET31 olyan ingyenes kpszerkeszt, amely a szmtalan hagyomnyos rajzeszkz mellett tbb klnleges rajzszerszmmal rendelkezik Ilyenek a varzsplca, az utmunklatra hasznlhat tsznez ecset vagy a klnblyeg. A beptett, ltvnyos effektusai segtsgvel egyszerv vlik a retusls. Tovbbi rdekessge a rtegkezels, a lapolvask, a digitlis fnykpezgpek s rajzpadok kezelse. Linux alatt a GIMP-et alkalmazhatjuk vals idej ktegfeldolgoz rendszerknt, vagy mint nagy teljestmny kpszmol, de hasznlhatjuk egyszeren kpkonverternek is. A GIMP hihetetlenl jl bvthet. gy lett tervezve, hogy plug-in bvtsekkel brmire kpes legyen. Fejlett script-fellete lehetv teszi, hogy a legegyszerbb feladatoktl a legbonyolultabb kpfeldolgozsi eljrsokig minden knnyen elrhet legyen parancsfjlokbl is.

30 http://www.activestate.com/komodo-edit 31 http://www.getpaint.net/

22. A tartalom s a kinzetA weboldalak eredeti, s mig legfontosabb clja a tartalmak kzzttele. Erre a HTML mellett a CSS nyelvet hasznljuk. A HTML a tartalom szerkezett, a CSS pedig a kinzett rja le. E kett szorosan sszefgg, de megfelel tervezssel preczen el is vlaszthat egymstl.A szerz kedvenc illusztrcis pldja a CSS Garden 32 oldala, ahol ugyanazt a HTML struktrt ezernyi klnbz mdon lehet megtekinteni, pusztm a dizjn (CSS llomnyok s a kpek) cserjvel.

2.1. HTML alapokA HTML nyelv az az alap, amivel minden webfejlesztnek elszr meg kell ismerni, s alaposan tisztban kell lenni. Ez a fejezet segtsget ad a HTML lehetsgeinek megismershez, de tbb nyelvi elem bemutatstl is eltekint. Ennek fbb okai: Bizonyos HTML jellemzk a mai napra elavultnak tekinthetk. Itt elssorban a kinzet eszttikai megjelensre kell gondolni. A CSS hasznlatval ugyanis sokkal tbb s jobb lehetsgnk lesz a kinzet lersra. A HTML a mai gyakorlatban mr tisztn csak az informcira, s annak struktrjra figyel. Ezt szemantikus kdolsnak is nevezzk. Bizonyos tagok, tulajdonsgok a bngszk ltal nem egysgesen tmogatottak, gy ezeket a gyakorlatban is csak kevesen hasznljk.

2.1.1. Mi 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 oldalt32 http://www.csszengarden.com/tr/magyar/

32. oldal A HTML llomny html kiterjesztssel rendelkezik

2. A tartalom s a kinzet

A HTML llomnyt egyszer szveges (editor) programokkal (pl. Jegyzettmb) is ltrehozhatunk

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

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

Nyissuk meg a bngsznket, majd a Fjl men Webcm megnyitsa parancst vlasztva keressk meg az elbb elmentett oldal.html llomnyt! (Tovbbi lehetsgnk, hogy a Windows Intzben, vagy Total Commanderben dupln kattintunk az llomny nevre. De az llomny bngszre vonszolsval is clt rhetnk.) A 11. brhoz hasonlt kell ltnunk a bngsznkben:

11. bra. Az els HTML oldal a bngszben

A plda magyarzataA dokumentum els tagja a . A bngsz errl fogja tudni, hogy hol kezddik a HTML oldal. Az utols tag a , itt r vget a dokumentum a bngsz szmra. A s tagok kztti rsz a fejlc informci. Az itt lert szveget a bngsz nem jelenti meg kzvetlenl.

2.1. HTML alapok

33. oldal

A tagok kztti szveget a bngsz a cmsorban jelenti meg, ahogy az brn is lttuk. A tagok kztti szveg jelenik meg a bngsz ablakban. A s tagok hatsra a szveg kiemelten (alaprtelmezetten flkvren) jelenik meg.

2.1.3. 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. Ezek azonban kerlendk, ha minsgi HTML oldalakat szeretnnk ltrehozni. (Legalbbis a tanuls kezdeti fzisban.) Ezek a programok ugyanis kisebb-nagyobb mrtkben teleszemetelik a kdot. 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. (Lsd. 1.4.3. fejezetben.)

2.1.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.) Hogyan tehetjk ezt meg? Keressk meg a bngsznk Nzet menjt, majd Forrs, vagy Oldal forrsa (vagy valami hasonl nev, bngsz fgg) menpontot. A szerz javasolja a fejlesztshez a Firefox nev bngszt, amely eleve webfejlesztk szmra lett kifejlesztve, s tbb ezer kiterjesztse (plug-in) kzl j nhny a HTML forrs knnyen ttekinthet megjelentst szolglja. (Az 1.4.3. fejezetben bemutattuk a legjobbakat.)

2.1.5. HTML 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

34. oldal

2. A tartalom s a kinzet

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

2.1.6. HTML elemekA korbbi pldban a kvetkez plda egy elem:Ez a szveg kiemelt.

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

Az elem kezd tagja s a zr tagja

2.1.7. Tag tulajdonsgokA tagok tartalmazhatnak tulajdonsgokat (ms nven attribtumokat, jellemzket) is. Ezek a jellemzk jrulkos informcik az elem egszre nzve. Az img tag segtsgvel kpet tudunk az oldalunkkal beilleszteni. Ehhez azonban meg kell mondanunk, hogy hol tallja a bngsz a kp llomnyt. Pldul, ha szeretnnk egy logt (logo.png) megjelenteni a weboldalunkon, a kvetkez szveget kell begpelnnk:

A tulajdonsgok nv-rtk prokkal (src="logo.png") 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.

2.1. HTML alapok

35. oldal

2.1.8. ltalnos tulajdonsgokA HTML tagoknak klnbz tulajdonsgaik lehetnek. Ksbb meg fogjuk ismerni a klnbz HTML tagok specilis tulajdonsgait. Ebben a fejezetben az ltalnosan hasznlhat tulajdonsgok kerlnek a kzppontba.

Alaptulajdonsgok class: az elem osztlya, tbb tagnak lehet ugyanaz az rtke. Clja, hogy tbb elemet is azonos kinzetre formzhassunk. id: a tag egyedi azonostja, ugyanazon rtk nem fordulhat el tbbszr. style: soron belli stlus definci.

title:

rvid sg szveg (n. tooltip) definilsa.

Nyelvi tulajdonsgok dir: az rs irnyt definilja lang: a nyelvet adja meg Ezek segtsgvel akr egy bekezdsnek, vagy ms elemnek is adhatunk egyedi informcit a weboldal alaprtelmezshez kpest. (Pl. egy magyar oldalon idznk egy francia verset.)

Billenty tulajdonsgok accesskey: gyorsbillentyt rendel az elemhez. tabindex: tabultorral trtn elemvlts sorrendjt befolysolja. (rlapok esetn hasznlhat.)

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

A megjegyzsben nem fordulhat el kt ktjel a > nlkl.

36. oldal

2. A tartalom s a kinzet

2.1.10. Karakter entitsokBizonyos karakterek (mint pldul a < s >) specilis jelentsek a HTML-ben, ezrt nem hasznlhatk a foly szvegben. Ezenkvl vannak olyan specilis rsjelek, amelyek hagyomnyos billentyzetrl nem vihetek be, vagy nem is szerepelnek az ASCII kdtblban.(Pl. a jel.) Ha egy ilyen specilis karaktert akarunk megjelenteni, akkor karakter entitst kell alkalmaznunk. A karakter entits hrom rszbl ll: & az elejn, ; a vgn, a kett kztt pedig egy entits nv, vagy # s szmkd. Ha pldul a < jelet szeretnnk megjelenteni, akkor a dokumentumba az < vagy a < karaktersorozatot kell gpelnnk. 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) karaktert 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: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 kezetes karaktereket is entitsok segtsgvel megadni. A mai napra azonban ezek a problmk lnyegben megszntek, ezrt a szerz vlemnye szerint teljesen indokolatlan az entitsok alkalmazsa. Helyette inkbb a pontos karakterkdolsra rdemes figyelmet fordtani.A karakterkdols megadsra elszr HTML meta tagok lehetsgt fogjuk megismerni. Ksbb a PHP-bl kldtt HTTP header alkalmazsa mg jobb megolds lesz. Tovbbi informcik a 3.1.5. fejezetben tallhatak.

2.1. HTML alapok

37. oldal

Tovbbi karakter entitsokLers< > & " '

Jelents nem trhet szkz kisebb, mint nagyobb, mint s idzjel aposztrf bekezds copyright

Entits nv < > & " '

Entits szmkd < > & " '

3. tblzat. Tovbbi karakter entitsokAz entitsok teljes listjt a HTML referenciban rdemes33 keresni.

2.1.11. Szemantikus HTMLA szemantikus HTML nem ms, mint a HTML tagok jelentsnek betartsa, rendeltetsszer hasznlata. Pldul, egy bekezdst nem hasznlunk fel men kialaktshoz. Azrt fontos ez, mert a keresgpek, automatikus katalgusok, HTML rtelmezk ez alapjn tudjk kategorizlni az oldal tartalmait. Pldul egy felolvasprogram egy cmsort ki tud emelni felolvass kzben is, vagy egy keresgp tud idzetekre keresni egy bizonyos szerztl, ha jl meg van formzva a HTML. A gyakrabban elfordul hibkkal szemben nhny j megkzelts: A cmsorokat a elemekkel adjuk meg, gy ahogy a tartalom strukturldik; a -el kezdjk, ez az oldal cme, majd jnnek a tovbbiak Az oldalnak egyedi cmet adunk a fejlcben (title): az egsz webhely cme + oldal cme). A bekezdsek szvegeit elemekbe tagoljuk, az j bekezdsnl nem csak a kurzort visszk j sorba egy
elemmel, hanem valban jelezzk a bekezds vgt s egy j kezdett.

33 Egy olvasmnyosabb sszefoglal tallhat a http://htmlhelp.com/reference/html40/entities/latin1.html cmen.

38. oldal

2. A tartalom s a kinzet

A klnbz listkat a lista elemekkel definiljuk. (

  • , , ). Taln nem trivilis, de a menket is
    • ,
    • elemmel rdemes megadni. (A menpontok is egyfajta listt jelentenek.) Ide tartozik mg, hogy a HTML 5 tovbb ersti a szemantikus HTML kialakts lehetsgeit. Ezekrl ksbb lesz sz, pl. a 2.4.7. fejezetben.

      2.1.12. SzabvnyossgA HTML nyelv a kezdetektl fogva szigor szablyokra plt. A Microsoft Internet Explorer s a Netscape Navigator34 harcnak egyik mellktermke, hogy a bngszk felismernek, rtelmeznek olyan HTML oldalakat is, amelyek nem felelnek meg a szabvnynak. St a webfejlesztk ezekre a pontatlansgokra r is szoktak, s ebbl a korszakbl sok mig is elrhet de elavult szemllet, ismertet tallhat a weben. 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 hasznlhat harmadik DTD-t gyakorlatilag nem fogjuk hasznlni.

      A HTML 5-s verzija leegyszersti a DTD hasznlatot. Csupn ennyit r el:

      Az oldalunk HTML szabvnyossgnak ellenrzsre tbb lehetsgnk van: http://validator.w3.org/ online hasznlata Firefox bngszbe bepl HTML Validator35.34 A Netscape 2007 utols heteiben hossz haldokls utn befejezte plyjt. tadta helyt a pusztn ksrleti clokbl ltrehozott, de villmgyorsan felemelked Mozilla Firefoxnak. 35 http://users.skynet.be/mgueury/mozilla/

      2.1. HTML alapok

      39. oldal

      2.1.13. HTML 5Br a HTML 5-s vltozata36 mg nem vgleges szabvny, folyamatosan ersdik a tmogatsa. Emiatt mindenkppen rdemes megismerkednnk a mg fejleszts alatt ll, de holnap mr szabadon hasznlhat megoldsokkal. Tbbek kztt a 2.4.7., 2.7.3. s 2.10.2. fejezetekben olvashatnak ennek rszleteirl.

      2.1.14. XHTMLAz XHTML nyelvet a HTML 4 levltsra hoztk ltre egy vtizede, de ez nem terjedt el a gyakorlatban. A HTML 5 jelenlegi fejldsnek fnyben gy tnik, hogy nem is fogunk vele a jvben sokat tallkozni. Ezt azonban csak ksbb tudhatjuk meg. Nem felesleges azonban, ha tudunk a kvetkez nhny alapelvrl. St, akr mg hasznos is lehet az alkalmazsuk. A kvetkez sorokban nhny pontban megnzzk, miben tr el egy XHTML dokumentum a HTML-tl.

      Egymsba gyazsAz elemek csak megfelelen egymsba gyazva s mindig lezrva lehetnek. A kvetkez pldban az egymsba gyazssal van problma:Ez egy flkvr s dlt szveg

      A helyes megolds:Ez egy flkvr s dlt szveg

      A tagok neveit kisbetvel kell rniA tagok neveit kisbetvel kell rni, ezrt a kvetkez hibs: Ez egy bekezds.

      A helyes vltozat: Ez egy bekezds.

      Elemek lezrsaA HTML elemeket le kell zrni. Hibs:36 http://www.w3.org/TR/html5/

      40. oldalEz egy bekezds. Ez egy msik bekezds.

      2. A tartalom s a kinzet

      A helyes:Ez egy bekezds. Ez egy msik bekezds.

      Zr pr nlkli elemekZr pr nlkli elemek esetn is le kell zrni. Itt azonban egy rvidtett rsmd is alkalmazhat:Sortrs
      Elvlaszt vonal Kp

      A / eltti szkz csak a visszafele kompatibilits miatt kell, az XHTML nem ignyli. Teht azrt kell szkz, hogy a csak HTML-t ismer bngszk is meg tudjk jelenteni az oldalt.

      A tulajdonsg-rtkeket mindig idzjelbe kell tenniEz praktikus HTML-nl is, ha a tulajdonsg rtke pl. szkzt tartalmaz. XHTML-ben azonban mindig ktelez:

      A tulajdonsgok ktelezen tartalmaznak rtket isHa a HTML nem r el rtket (vagyis a tulajdonsg lnyegben logikai jelzknt mkdik), akkor az rtk megegyezik a tulajdonsg nevvel.

      A name tulajdonsg helyett az id hasznlandHibs teht:

      Helyes:

      A rgebbi bngszkkel val kompatibilits miatt mindkettt is szoktk alkalmazni:

      2.2. CSS alapok

      41. oldal

      2.2. CSS alapok2.2.1. Mi a CSS?A CSS a Cascading Style Sheets rvidtse A stlusok a HTML megjelentsi elemei s attribtumai helyett hasznlhatk, azoknl jval tbb lehetsget biztostva A stlusok meghatrozzk, hogy hogyan jelenjenek meg vizulisan a HTML elemek A stluslapok segtsgvel knnyen szt lehet vlasztani az oldal tartalmt annak kinzettl (a dizjntl) A stlusokat ltalban kln llomnyban troljuk (.css kiterjesztssel) Kls stluslapokkal gyorstani tudjuk a munkavgzst Tbb stlus is hatssal lehet egy elem megjelensre

      KedvcsinlMieltt a CSS alapos megismershez kezdennk, mindenkppen clszer a CSS Zen Garden37 oldalt megltogatni. Ez az oldal azzal a cllal jtt ltre, hogy a CSS-sel szembeni ellenrzseket lerombolja, s bemutassa, milyen risi lehetsgek vannak a dizjner kezben, ha a CSS-t komolyan s szakszeren hasznlja. Ezen az oldalon ugyanazt a HTML ol dalt lthatjuk sok-sok klnbz dizjnn formlva csupn a CSS llomny (s termszetesen a dekorcis kpek) cserjvel. A teljessg ignye nlkl nhny kpernykp (1215. bra):

      37 Magyar oldal: http://www.csszengarden.com/tr/magyar/

      42. oldal

      2. A tartalom s a kinzet

      12. bra. CSS Zen Garden plda

      13. bra. CSS Zen Garden plda

      14. bra. CSS Zen Garden plda

      15. bra. CSS Zen Garden plda

      A stlusok hasznlatnak okaiA HTML tagok eredetileg arra lettek megalkotva, hogy a dokumentum tartalmt definiljk. Amikor egy cmet, bekezdst vagy tblzatot akarunk ltrehozni, akkor hasznlhatjuk pl. a h1, p s table tagokat. A tnyleges megjelents a bngszre van bzva, eldntheti, hogy mit hogyan jelentsen meg a tagok, az ablakmret, a felhasznl belltsai alapjn.

      2.2. CSS alapok

      43. oldal

      Ksbb a kt nagy bngsz (a Netscape Navigator s az Internet Explorer) jabb s jabb HTML tagokat s tulajdonsgokat adott a bngsz ltal felismert HTML nyelvhez (pl. a font tag, vagy a color tulajdonsg). gy belekeveredtek a HTML nyelvbe a megjelentst befolysol elemek. (Radsul a bngszk csak rszben s ksbb tmogattk a vetlytrs jtsait.) A problmt a World Wide Web Consortium 38 (W3C), egy non-profit, szabvnyokat alkot szervezet oldotta meg. A HTML 4.0-s verzijval s a vele prhuzamosan fejlesztett CSS segtsgvel ltrejtt egy jl hasznlhat eszkzpros a webfejlesztk rszre. Mra minden jelentsebb bngsz tmogatja a CSS-t, br a tmogatottsg mrtkben vannak eltrsek.A Microsoft (s tbb ms, magt a sajt terletn monopolhelyzetben tud cg) mdszere, hogy a fggetlen szabvnyokat (a szerz vlemnye szerint) tudatosan s szndkosan figyelmen kvl hagyja azt remlve, hogy a versenytrsak helyzett ezzel lehetetlenn teszi. Egszen a Firefox megjelensig s a felhasznlk krben val viharos sebessg elterjedsig (kb. 2005-ig) ez a taktika sikeresnek ltszott. Ksbb azonban knytelen volt vltoztatni hozzllsn, az gretek szerint az IE 9-es megelzi a ms bngszket HTML 5 s CSS 3 tmogatottsgban. Kb. 2009-tl a Google Chrome is komoly rszesedst rt el. Ebben a felgyorsult versenyben az igazi gyztesek mi, a felhasznlk vagyunk.

      A stluslapokkal munkt sprolhatunkA stluslapok azt definiljk, hogy hogyan jelenjenek meg az egyes HTML elemek. A stluslapokat kln .css kiterjeszts llomnyban szoks elhelyezni. gy knnyedn lehet ugyanazt a megjelentst adni a honlap sszes oldalhoz, mindssze egyetlen CSS llomny szerkesztsvel. Ha brmit vltoztatni kell a dizjnon, lnyegben csak ezt az egyetlen llomnyt kell mdostanunk.

      Egy elemre tbb stlusdefinci is hatssal vanA stlusok egy vagy tbb elemre, vagy akr az egsz oldalra is hatssal lehetnek (ez utbbi a body elem formzsval). Megfordtva: egy elemre hatssal lehet a soron belli stlusa, a head elembeli formzs s akr kls CSS llomny is. St egy HTML oldalhoz akr tbb kls CSS llomnyt is rendelhetnk.

      Lpcss elrendezsMelyik stlus fog rvnyeslni, ha tbb stlust is definilunk ugyanahhoz a HTML elemhez? A kvetkez ngy bellts rvnyesl egyre nagyobb prioritssal (teht tkzs esetn a ksbbi fellrja az elzt). 1. a bngsz alapbelltsa 2. kls stluslap38 http://www.w3.org/

      44. oldal3. head elemben definilt stlus 4. soron belli stlus

      2. A tartalom s a kinzet

      Teht a soron belli stlus a legmagasabb priorits, s fellr minden alacsonyabb szint formzst. Ezen kvl fontos mg figyelembe venni egy ltalban jl hasznlhat klszablyt: az a stlusdefinci fog rvnyeslni, amelyik a legszkebb hatkrrel rendelkezik. Pl. ha minden bekezdst barna sznre lltunk, de egy egyedi azonostval rendelkez bekezdst zldre, akkor az utbbi szably rendelkezik szkebb hatkrrel. gy ennl a bekezdsnl zld lesz a szn.Kezd (st kzphalad) CSS hasznlat esetn is nagyszeren lehet boldogulni az igen bonyolult szablyok precz ismerete nlkl, erre az klszablyra s a jzan paraszti szre alapozva. Egy bevezett azonban mgis figyelmkbe ajnlunk Tommy Olsson tollbl39.

      2.2.2. Hol legyenek a stlusdefincik?A stlus informcikat hromfle mdon rendelhetjk hozz a HTML dokumentumunkhoz. Clszer azonban les krnyezetben a kls stluslapokat alkalmazni.

      Kls stluslapA kls stluslap alkalmazsa a legidelisabb eset. Ekkor a HTML llomny az oldal informatv rszt tartalmazza, a kls CSS llomny pedig sszegyjtve a megjelentsre vonatkoz formzsokat. A HTML oldalhoz a head elemben elhelyezett tag segtsgvel csatolhatunk kls CSS llomnyt: ...

      A CSS egy jabb megkzeltse az @import hasznlata: @import url("stilus.css"); ...

      Ezzel a szintaxissal akr a CSS llomnyba is importlhatunk tovbbi CSS llomnyokat, a C vagy PHP nyelvek include megoldsaihoz hasonlan.

      39 http://dev.opera.com/articles/view/28-inheritance-and-cascade/#thecascade

      2.2. CSS alapok

      45. oldal

      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.

      Begyazott stluslapBegyazott stluslapot ksz oldalnl akkor szoks alkalmazni, ha az oldal egyedi (a kls stluslapot nem lehetne msik oldalhoz felhasznlni), vagy nagyon egyszer stlusrl van sz. Persze a dizjn kialaktsnak fzisban is j megolds lehet. Begyazott stluslapot a head elemben szerepl style 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.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 csak e bekezds megjelentst vltoztatja meg:Ez egy bekezds

      2.2.3. A CSS nyelvtanaA nyelvtan hrom elemet klnbztet meg: kivlaszt, tulajdonsg s rtk:kivlaszt {tulajdonsg: rtk}

      A kivlaszt legegyszerbb esetben egy HTML tag, a tulajdonsg azt hatrozza meg, hogy milyen jellemzt akarunk mdostani, mg az rtk a vltozst hatrozza meg. A tulajdonsgot s az rtket egy kettsponttal kell egymstl elvlasztani, s a kettt egytt kapcsos zrjelbe tenni:body {color: black}

      Ha az rtk tbb szbl ll, idzjelbe kell tenni:p {font-family: "sans serif"}

      46. oldal

      2. A tartalom s a kinzet

      Ha egy kivlaszt esetn tbbfle tulajdonsgot is mdostani szeretnnk, knnyedn megtehetjk, mindssze pontosvesszvel kell elvlasztani a tulajdonsg-rtk prokat.p {text-align:center; color:red}

      A stlusdefincik jobb olvashatsga rdekben inkbb tbb sorba rdemes tagolni:p { text-align: center; color: black; font-family: arial }

      Egyszerre akr tbb kivlasztra is rvnyesthetjk a formzst. Ekkor a kivlasztkat vesszvel elvlasztott listaknt kell felsorolni. A pldban minden cmet zlden szeretnnk megjelenteni:h1, h2, h3, h4, h5, h6 { color: green }

      Osztly alap kivlasztsOsztly kivlaszt segtsgvel ms-ms mdon tudjuk megjelenteni az egyes osztlyokba sorolt elemek tartalmt. A pldban a kt klnbz osztlyhoz tartoz bekezdsek msms formzst kapnak:p.right {text-align: right} p.center {text-align: center}

      Ez a kt stlus a kvetkez kt bekezds megjelensre hatssal lesz: Ez egy jobbra igaztott bekezds. Ez egy kzpre igaztott bekezds.

      A p tagoknak nem ktelez megadni class tulajdonsgot, vagy akr ms is lehet a class rtke, de ezekben az esetekben a fenti stlusoknak nem lesz hatsa a bekezdsekre. Az osztly szint kivlasztst nem ktelez taghoz ktni, lehet tagoktl fggetlen, ltalnos osztly kivlasztt is definilni. A plda minden center osztly elemet kzpre igazt. (Mr amelyik HTML elemnl egyltaln van rtelme a kzpre igaztsnak.).center { text-align: center }

      A formzs minden center osztly tagot kzpre igazt:

      2.2. CSS alapok Ez egy kzpre igaztott cm. Ez egy kzpre igaztott bekezds.

      47. oldal

      rdemes megemlteni, hogy a class tulajdonsg tbb rtket is kaphat, egymstl szkzzel elvlasztva:

      Ilyen esetben mr az egyik kivlaszt (.center) hasznlata esetn is tallat lesz. Ha csak azokat a tagokat akarjuk kivlasztani, amelyek tbb class tulajdonsgot is tartalmaznak, akkor a .center.alahuz szintaxist kell hasznlnunk. Ekkor az egyik osztlyba igen, de a msikba nem tartoz elemek nem lesznek kivlasztva.

      Azonost alap kivlasztsA HTML elemeknek megadhatjuk az egyedi id tulajdonsgot. gy az egyedi id-vel rendelkez elemhez specilis formzst hatrozhatunk meg. CSS-ben a # segtsgvel tudunk elemet id alapjn kivlasztani. A kvetkez pldban a menu azonostj elem betsznt zldre lltjuk:#menu {color: green}

      A para1 azonostj bekezdst kzpre igaztva s piros sznnel definiljuk:p#para1 { text-align: center; color: red }

      Univerzlis kivlasztA * szelektorral minden elemet egysgesen tudunk formzni:* { border: 1px solid #000000; }

      Tulajdonsg kivlasztA kvetkez plda csak azokra a kpekre fog vonatkozni, amelyek alt tulajdonsga meg van adva:img[alt] { border: 1px solid #000000; }

      A kvetkez plda mg a tulajdonsg rtkt is figyelembe veszi:img[src="alert.gif"] { border: 1px solid #000000; }

      48. oldal

      2. A tartalom s a kinzet

      Gyermek kivlasztGyakori, hogy az elemek tlzott id s class tulajdonsggal val elltsa helyett inkbb az elemek hierarchijra (ms megfogalmazsban leszrmazsra, mint a csaldfnl) ptnk. Pl. a kvetkez plda csak a h3 elemen bell kzvetlenl elhelyezked strong tagra lesz rvnyes. Teht nem vonatkozik a h3 elem ms rszeire, s nem vonatkozik a nem kzvetlenl h3-ban lev strong elemekre sem.h3 > strong { color: blue; }

      Leszrmazott kivlasztAz elzhz igen hasonl lehetsg nem csak a kzvetlen szl-gyermek kapcsolatra, hanem az akr tbb szint rkldsre, vagy mshogy fogalmazva a tartalmazsra pt. Nzznk egy pldt: Szia! Ez a bekezds ksznt tged.

      Ekkor a div > em kivlaszt csak az els, mg a div em kivlaszt mindkt em tagot formzza.

      Testvr kivlasztGyakran van szksg arra, hogy egymst kzvetlen kvet elemek (vagyis testvrek) irnybl fogalmazzuk meg a kivlasztsunkat. Pl. egy h2-es cmet kvet bekezdsek kzl az elst mshogy szeretnnk formzni, mint a tovbbiakat. Ekkor j megolds lehet a h2 + p kivlaszt, amely a h2 utni p tagot cmzi meg.

      MegjegyzsA CSS fjlba azrt szoktunk megjegyzseket tenni, hogy a ksbbi megrtst s mdostst knnyebb tegye. CSS megjegyzsknt egyedl a C nyelvbl ismert /*...*/megjegyzs hasznlhat:/* Ez itt egy megjegyzs */ p { text-align: center; /* Ez itt egy msik megjegyzs */ color: black; font-family: arial }

      2.2. CSS alapok

      49. oldal

      A gyakorlatban szoktuk mg arra is hasznlni a megjegyzseket, hogy egyes formzsokat ideiglenesen kikapcsoljunk vele.

      2.2.4. Szervezsi elvekEgy komolyabb dizjn kialaktsakor igen sszetett CSS kdunk lesz. Nem egyszer gy lerni a kdot, hogy az egy ksbbi tovbbfejleszts esetn, esetleg ms fejleszt szmra is jl olvashat, egyrtelm lesz. De nfegyelemmel, s hasznos alapelvek kialaktsval, betartsval mgis elrhet. Nzznk meg nhny tletet ezzel kapcsolatban.

      A CSS lpcss formzsaBr a gyakorlatban mg nem terjedt el, nagyobb CSS llomnyok esetn az ttekinthetsget jelentsen javtani tudja a CSS forrs (a C nyelven megszokotthoz hasonl) behzsa. Pldul:body {...} p {...} p.balra {...} table {...} table#egyik td {...}

      Termszetesen ez a lersi md nem teljesen mechanikus, tbbflekppen is lehet a logikai csoportostst szervezni.

      Tematikus sztvlasztsBonyolultabb esetekben szoks a CSS llomnyokat tipogrfiai (a szvegekhez szorosan kapcsold) s dizjn (a menk, blokkok, stb. megjelentshez kapcsold) szempontok mentn kln llomnyokra bontani.

      CSS keretrendszerekEgyesek ltal felmagasztalt, msok ltal lenzett megolds a CSS keretrendszerek alkalmazsa. A tmogati az jrafelhasznlhat megoldsokkal indokoljk dntseiket. Sokszor tnyleg egyszerbb egy jl sszelltott alapra pteni, mint egy j rendszert kipteni. A sok lehetsg kzl a 960 Grid System40 az egyik leggretesebb megolds. Jl mutatja, hogy a tervezs a kiadvnyszerkesztsnl szoksos gondolkozsmdra pt. Ezt demonstrlja a kvetkez bra41 is:

      40 http://960.gs/ 41 Forrs: http://www.webdesignerdepot.com/2010/03/fight-div-itis-and-class-itis-with-the-960-gridsystem/

      50. oldal

      2. A tartalom s a kinzet

      16. bra. 960 Grid System plda

      2.2.5. Mdia tpusokMa mr egy weboldalt tbbfle krnyezetben hasznlhatunk. Egy weboldalt megnzhetnk kpernyn, kzi-szmtgpen, mobiltelefonon, vagy akr kinyomtatva is. Clszer minden mdihoz a hozz legjobban ill formzst elkszteni. Pl. nyomtatsban a talpas, kpernyn a talp nlkli betket tartjuk olvashatbbnak. Bizonyos elemeket (pl. menket) felesleges kinyomtatni, mg weblaprl kifel mutat linkek href rtkt nagyon hasznos megolds. Nzznk pldt a bettpusok eltr kezelsre. Nyomtatsban s kpernyn ms-ms mretet s bettpust alkalmazhatunk a kvetkez stlusokkal:@media screen { p.test {font-family: verdana, sans-serif; font-size: 14px} } @media print { p.test {font-family: times, serif; font-size: 10px} } @media screen, print { p.test {font-weight: bold} }

      Msik gyakran alkalmazott lehetsg, amikor a HTML kdhoz kln-kln stluslap llomnyokat ksztnk:

      2.2. CSS alapok

      51. oldal

      Nzznk nhny gondolatot Matkovsk Pter CSS lpsrl-lpsre: nyomtats cikke42 alapjn. Ne nyomtassunk ki felesleges rszeket:#header, #footer, #menu { display: none; }

      Az oldal fix szlessg rszei is gondot okozhatnak, hasznljunk %-os megadst:#container, #main { width: 100%; }

      Cmsorok utn soha, de h1 eltt mindig legyen oldaltrs:h1, h2, h3, h4, h5, h6 {page-break-after: avoid;} h1 {page-break-before: always;}

      Nyomtassunk ki a kifel mutat linkeket:a:after {content: " [" attr(href) "] ";}

      Ltszdjon a link a nyomtatsban (min egyfajta kiemelt szveg):a:link, a:visited, a:hover, a:active { text-decoration: underline; color: black; }

      Gondoljunk a sznekre is:body {color: black; background: white;}

      A fontosabb mdiatpusok:all aural handheld print projection screen

      minden eszkz felolvas szoftver kzi megjelent lapozhat (nyomtats) vetts (mint egy kirakati reklm, vagy az S543 mdszer) kperny

      4. tblzat. Mdiatpusok

      42 http://weblabor.hu/cikkek/cssnyomtatas 43 http://meyerweb.com/eric/tools/s5/

      52. oldal

      2. A tartalom s a kinzet

      2.2.6. ValidtorA CSS kd ellenrzsre az online is hasznlhat W3C CSS Validation Service 44 egy nagyon j eszkz. Arra azrt figyelni kell, hogy csak rvnyes HTML kddal lehet a CSS r vnyessgt vizsglni.

      2.2.7. CSS 3Az elmlt vekben a HTML-hez hasonlan a CSS terletn sem volt sok vltozs. A CSS 2 ta megszoktuk, hogy a weboldalak szpek is lehetnek. Nagyon szpek. Hamarosan kialakultak olyan technikk, amelyek ersen ptettek a grafikus szoftverek tudsra s a kisebb-nagyobb egyedi trkkkre. Ma ezek (mint pl. a lekerektett sarkok, szntmenetek, rnykok stb.) mr annyira ltalnosan hasznltak, hogy a laikus internetez nem is sejti, mennyi kreativits s munka szksges ezek hasznlathoz. Ma a CSS 3 terletn is a vltozs kort ljk. Egyre-msra jelennek meg az jabb verzik, javtsok a nagyobb bngszkbl. Sokat grnek, s egyre tbbet meg is valstanak a CSS 3 lehetsgeibl. Egyelre mg csak jtk, de hamarosan napi munkv vlhat, ezrt nem hagyhatjuk ki a tmink kzl. A 2.12. fejezetben rszletesen megnznk nhny jdonsgot.

      2.3. Cmsorok s formzsukA cmek a h1 h2 h3 h4 h5 h6 tagok segtsgvel adhatk meg. h1 a legnagyobb (legfelsbb szint) cmet jelenti, h6 pedig a legkisebbet. (ltalban egy oldalon 2-4 szintet indokolt alkalmazni, ekkor pl. a h1, h2, h3 s h4 alkalmazhat.) A kvetkez plda bemutatja a cmek szoksos strukturlst. Nagy Gusztv oldala Nagy Gusztv oldala Drupal 6 alapismeretek Megjelent els knyvem, melyet szeretettel ajnlok ... iuste.biz Tisztessges vllalkozs mozgalom Fl ve csatlakoztam a Tisztessges vllalkozs mozgalomhoz. Szmomra ez nem csak egy plecsni. Jl kifejezi, milyen alapokra ptem a vllalkozsomat. Szmlt adok, szeretek adzni, s nem csapom be az gyfeleimet.

      44 http://jigsaw.w3.org/css-validator/

      2.3. Cmsorok s formzsuk

      53. oldal

      ltalban egyszer alkalmazzuk a h1-es cmet, ezutn nhnyszor a h2-est, szksg esetn a tovbbi szintekkel. A 17. bra jelzsei jl mutatjk, hogy szemantikus rtelemben minden cmhez tartozik egy tartalmi, kifejt rsz. A tartalmi rszben a cmek egy szinttel alacsonyabbak a fcmknl, s mindig tartalmaznak foly szveget (ami mr nem cm), pl. p elemeket.

      17. bra. Cmek szemantikus hasznlata A cmsorokhoz a bngsz alaprtelmezetten trkzket is kapcsol, amit majd CSS segtsgvel mdosthatunk. A kvetkez CSS formzsok nem csak cmekre, hanem sokfle ms tagra is alkalmazhatak lesznek.

      2.3.1. HttrEgy elem httert httrszn s httrkp segtsgvel vltozatosan formzhatjuk. A httrkp ismtldhet is fgglegesen, vzszintesen, s lehet a bngszablakhoz vagy a grgetett tartalomhoz ragasztott.

      54. oldal

      2. A tartalom s a kinzet

      HttrsznA background-color tulajdonsg segtsgvel meghatrozhatjuk az elemek httrsznt. A korbban megismert sznmegadsi mdok kzl itt is tetszlegesen vlaszthatunk. Tovbbi lehetsg a transparent megadsa, ami tltsz htteret fog jelenteni.body {background-color: yellow} h1 {background-color: #00ff00} h2 {background-color: transparent} p {background-color: rgb(250,0,255)}

      Az eredmny:

      18. bra. Httrsznek alkalmazsa

      HttrkpAz egyszn httr helyett akr ltvnyos httrkpet is elhelyezhetnk az elemek httereknt a background-image tulajdonsg segtsgvel.background-image: url('bgdesert.jpg')

      IsmtldsA httrkp alaprtelmezs szerint kitaptzva jelenik meg, ha az elem mrete ezt szksgess teszi. Termszetesen ez megvltoztathat, mind vzszintes, mind fggleges irnyban megtilthatjuk az ismtldst. A kvetkez pldban csak y irnyban ismtldik a httrkp:background-image: url('bgdesert.jpg'); background-repeat: repeat-y;

      A mindkt irny ismtlds kikapcsolshoz a no-repeat rtket kell adnunk.

      2.3. Cmsorok s formzsuk

      55. oldal

      PozciA httrkp pozcija is megvltoztathat: az alaprtelmezett bal fels sarok helyett mshol is lehet a httrkp.Ennek mg akkor is van jelentsge, ha a teljes htteret kitaptzva ltjuk, ugyanis a kezd taptt van rtelme mshol s mshol megadni.

      Az rtk megadsnl elszr a fggleges, majd a vzszintes pozcit kell megadnunk. A 33 konstans (top, center, bottom s left, center, right) mellett szzalkos s pixeles pozicionls is lehetsges. A kvetkez pldban az ablak fels rszn, kzpen jelenik meg a kp.body{ background-image: url('nagygusztav.jpg'); background-repeat: no-repeat; background-position: top center; }

      Az eredmny:

      19. bra. Httrkp Mg a kett kzl az egyiket is elhagyhatjuk, ha az egyetlen megadott rtk egyrtelmv teszi a fejleszt szndkt.

      Httrkp ragasztvaElssorban hosszabb grgethet tartalom esetn van jelentsge annak, hogy a httrkp nem csak a grgetsvval egytt mozogva, hanem fixen pozicionlva is krhet. Sok rdekes megolds rhet el ezzel az apr trkkel.background-image: url('nagygusztav.jpg'); background-repeat: no-repeat; background-attachment: fixed;

      56. oldal

      2. A tartalom s a kinzet

      Mindent beleHa tbbfle httrtulajdonsgot is lltunk, tmrebb rsmdot eredmnyez az sszevont background tulajdonsg. gy egyszerre akr mindent is bellthatunk.background: #00ff00 url('nagygusztav.jpg') no-repeat fixed center;

      2.3.2. SzeglyekA CSS border tulajdonsgaival szeglyeket rajzolhatunk az elemek kr. A kvetkez plda nhny fontosabb vonalstlust mutat be.Nem minden bngsz az elrsoknak megfelelen rajzolja a szeglystlust.h1 {border-style: dotted} h2 {border-style: double} p {border-style: solid}

      Az eredmny:

      20. bra. Seglyek hasznlata Az elemek szeglyt nem csak egysgesen llthatjuk be. Tbbfle lehetsgnk van az eltr megadsra. Egyrszt egyenknt is llthatjuk a szeglyek stlust a border-top-style, borderright-style, border-bottom-style s border-left-style segtsgvel. Msrszt a fenti megadsnl nem csak egy rtket, hanem 2, 3 vagy 4-et is hozzrendelhetnk a defincihoz. Ennek logikjt a kvetkez rszben, a sznekkel kapcsolatban fejtjk ki.

      SzeglysznA szneket tbbfle 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

      2.3. Cmsorok s formzsuk0

      57. oldal

      s 255 kztt (hexadecimlisan 00 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). A szeglyek sznt bellthatjuk a border-color tulajdonsggal. Az albbi pldk minden oldal szeglyt meghatrozzk. Minden oldal egyforma szn:border-color: #0000ff;

      A fenti s lenti szegly #ff0000 szn , mg a bal s jobb oldali #0000ff szn:border-color: #ff0000 #0000ff;

      A fenti szegly #ff0000, az oldalsk #00ff00 s a lenti #0000ff sznek:border-color: #ff0000 #00ff00 #0000ff;

      A ngy oldal az ramutat jrsnak megfelelen (kezdve a fenti szegllyel) a felsorolt 4 rtket veszi fel:border-color: #ff0000 #00ff00 #0000ff rgb(250,0,255)};

      Vgl rdemes megemlteni, hogy ilyen specilis RGB szneknl lehetsg van a sznkd felezsre is. Ennek felttele, hogy mindhrom sznkd dupla jel legyen. gy az utols pldnkat gy is rhatnnk:border-color: #f00 #0f0 #00f rgb(250,0,255)};

      A szegly vastagsgaA szegly vastagsgt a border-width tulajdonsggal llthatjuk be. A kvetkez plda folyamatos vonallal szeglyezi a bekezdst, de a szegly vastagsgt megnveli az alaprtelmezett 1px-hez kpest:p { border-style: solid; border-width: 15px }

      A ngy oldal szeglyeit nem csak egyszerre, hanem akr kln-kln is lehet lltani, pldul a bal oldalit. Itt a szegly minden oldalon folyamatos lesz, de csak a bal oldalon lesz vastagabb:p { border-style: solid; border-left-width: 15px }

      58. oldal

      2. A tartalom s a kinzet

      Kzs deklarciAz eddigi szegly tulajdonsgok (hasonlan a korbbi tulajdonsgcsoportokhoz) sszevonhatk a border, vagy a border-top, border-right, border-bottom s a border-left tulajdonsg segtsgvel. Pldul az als szegly tbb tulajdonsgnak belltsa:p {border-bottom: medium solid #ff0000}

      2.3.3. Trkzk a szeglyen bell s kvlA CSS szintaktikailag kt nagyon hasonl tulajdonsg-csoportot tartalmaz. A margin tulajdonsggal a szeglyen (border) kvli, a padding tulajdonsggal pedig a tartalom s a szegly kztti bels margt lehet belltani. A szintaktikai hasonlsg miatt ebben az alfejezetben csak a kls marg (margin) szintaxisa fog kvetkezni, de minden plda hasonlan lerhat lenne a bels margra (padding) is. Margk esetn is van lehetsgnk, hogy egyszerre mind a ngy oldal rtkt, akr klnbzre is bellthassuk, vagy csak egyetlen oldalt vltoztassuk meg. A teljessg ignye nlkl kvetkezzk nhny plda. Csak a bal oldali margt definilja:margin-left: 2cm;

      Minden oldalt definilja, de ms-ms rtkkel:margin: 2cm 5px 2em 5%;

      Minden oldali margt egysgesen nullz:margin: 0;

      Az egyes bngszk bizonyos alaprtelmezett margbelltsokat eltren rtelmezhetnek. Az ebbl ered kellemetlensgek s bosszsgok elkerlse rdekben a szerz szoksa, hogy egy j oldal CSS llomnyt vala hogy gy kezdi:body, p, h1, h2, h3, table, tr, th, td, img { margin: 0; padding: 0; }

      Eric Meyer Reset CSS45 megoldsa mg tovbb megy. Mindenkppen rdemes tgondolni.

      45 http://meyerweb.com/eric/tools/css/reset/

      2.4. Az oldalszerkezet kialaktsa

      59. oldal

      2.4. Az oldalszerkezet kialaktsaHa a tervezs sorn kidolgoztuk az oldalunk funkcionlis elemeit (5. s 6. bra), akkor olyan oldalszerkezetet kell kialaktanunk, amely a terveknek megfelel. Ebben a fejezetben ennek az alapvetbb eszkzeit fogjuk bemutatni.

      A div s span tagokA div s span tagok clja az, hogy r lehessen akasztani valamilyen CSS formzst, ha nincs ms alkalmas tag (vagy az tl erltetett lenne) a HTML kdban. A kt tag kztt egyetlen klnbsg, hogy a div blokk szint (mint pl. a p vagy a table), mg a span soron belli (mint pl. a strong vagy az a) elem. Az oldal kialaktsakor a HTML 4-gyel bezrlag a div tag tmeges hasznlata szmtott szakszer megoldsnak. A HTML 5 trnyersvel erre mr sok esetben nincs szksg, pontosabban van jobb (szemantikusabb) megoldsunk is. Erre a 2.4.7. fejezetben visszatrnk.

      2.4.1. MretekAz elemek szlessg (width) s magassg (height) tulajdonsga segtsgvel az elem mrete befolysolhat. Elssorban doboz-jelleg elemeknl van rtelme hasznlni: pldul egy kp mrett, vagy a navigcis sv szlessgt gyakran lltjuk be ilyen mdon. A width s a padding megadsa esetn a width a tartalom (content) tnyleges szlessgt jelenti. Nzznk egy pldt:div#doboz { width: 200px; padding: 10px; }

      A szabvny szerint ebben az esetben a tnyleges szlessg 200 pixel lesz. (Egyes korbbi bngszk itt ms logikt alkalmaztak.)

      2.4.2. MegjelentsA display tulajdonsg egy elem ms elemekhez viszonytott megjelenst befolysolja. A tulajdonsg hrom legalapvetbb rtke a block, inline s none. Egyes HTML elemeknek (pl. h1..h6, p, ul, ol, div) a block az alaprtelmezse, mg msoknak (pl. small, img, span) az inline.

      60. oldal

      2. A tartalom s a kinzet

      Nzznk egy egyszer pldt a bekezdsek inline-knt val hasznlatra, s a div elemek eltntetsre:p {display: inline} div {display: none} Els bekezds. Msodik bekeds. Nem lthat div elem.

      Az eredmny:

      21. bra. Soron belli formzs Egy msik gyakorlati szempontbl rdekes plda, ami szerint az oldal fmenjt felsorolt listval is szoks ltrehozni, s a CSS szintjn inline listaelemekkel megoldani a menpontok egyms mell kerlst. Ezt a pldt a 2.4.3. fejezetben mg alaposabban megvizsgljuk. Felmerlhet a krds, hogy mi rtelme van egy elem lthatsgt kikapcsolni. Sok rdekes eset kzl csak egy faszerkezet navigcis szitucit gondoljunk t. (A Windows Intz bal oldali panelre rdemes gondolni.) Itt praktikus, ha egyes faelemeket, vagy akr nagyobb rszeket is be lehet csukni, hogy a navigci ttekinthetbb legyen. Ezt JavaScripttel tmogatva egyszeren meg lehet tenni: kattints hatsra egy bizonyos elem display tulajdonsgt kell none vagy block rtkre vltani az eltntetshez vagy megjelentshez.

      2.4.3. A lebegtetsEredetileg a kpeknl alkalmazott, de az oldalkialaktsnl is nlklzhetetlen lehetsg a float tulajdonsg alkalmazsa. Ennek segtsgvel a soron bell megjelen elemet ki tudjuk emelni a sor-folytonossgbl, s a krnyez tartalom krl tudja futni az elemet.

      2.4. Az oldalszerkezet kialaktsa

      61. oldal

      Kp lebegtetseNzznk egy kpes pldt elszr CSS nlkl. A kp a bekezds belsejben, sor-folytonosan szerepel (pontosan gy, mintha egy nagy mret bet lenne a szvegben): Ez egy szveg. Ez egy szveg. Ez egy szveg. Ez egy szveg. Ez egy szveg. Ez egy szveg. Ez egy szveg. Ez egy szveg. Ez egy szveg. Ez egy szveg. Ez egy szveg. Ez egy szveg. Ez egy szveg. Ez egy szveg. ...

      Az eredmny:

      22. bra. Kp lebegtets nlkl Ha a kp elem megkapja a float: right formzst, a kp jobb oldalt jelenik meg, krbefuttatva a kvetkez tartalommal:

      23. bra. Kp lebegtetve Ha a kp s a krbefuttatott tartalom kzt nagyobb helyet szeretnnk kihagyni, akkor ezt a kp margin tulajdonsgaival tehetjk meg. Ha a kphez feliratot is szeretnnk trstani, akkor ez egy apr trkkel megvalsthat. A megolds lnyege, hogy nem kzvetlenl a kpet lebegtetjk, hanem egy div elem segtsgvel egysgbe zrjuk a kpet s a feliratt, s ezt a csoportost div elemet lebegtetjk.

      62. oldaldiv { float:right; width:120px; margin:0 0 15px 20px; padding:15px; border:1px solid black; text-align:center; }

      2. A tartalom s a kinzet


      A CSS szuper! Ez egy szveg. Ez egy szveg. ...

      Az eredmny:

      24. bra. Lebegtets alrssal Az eddigiek alapjn egy inicil lebegtetse egyszer feladat. Tipp: a bekezds els betjt tegyk egy span elembe, hogy tudjunk formzst hozzkapcsolni.

      Horizontlis menNzzk most meg a korbban begrt mens pldt. A men egyszer HTML lista:

      • Men 1
    • Men 2
  • Men 3

A kvetkez eredmnyt szeretnnk ltni. (A kpen nem ltszik, hogy az egrkurzor a Men 1 felett van.)

25. bra. Horizontlis men Nzzk meg kzelebbrl a plda fontosabb pontjait.

2.4. Az oldalszerkezet kialaktsaul { float:left; width:100%;

63. oldal

A men az alatta lev szvegtl elvlik, birtokolja a teljes vzszintes svjt.padding:0; margin:0; list-style-type:none;

}

Csak maga a szveg felesleges trkzk s jell nlkl.a { float:left; width:6em;

Fix szlessg gombok rhetk el. rdemes azonban vigyzni ezzel a mdszerrel, mert ha a szveg nem fr ki, a dizjn sztesik.text-decoration:none;

Ne legyen alhzva a link.color:white; background-color:purple; padding:0.2em 0.6em; border-right:1px solid white; }

A menn kvli httrszn s a jobb oldali szegly szne itt meg kell, hogy egyezzen.a:hover { background-color:#ff3300}

Az egrkurzorra sznvltssal reagl a menpont. rdemes megfigyelni, hogy a link a teljes li terlett elfoglalja, ezrt a teljes li elem linkknt mkdik.li { display:inline }

Ez a sor oldja meg, hogy a menpontok egyms mell kerljenek.

Felesleges tblzatok nlkli oldalkialaktsA webfejleszts elmlt veiben sok zskutct megjrtak a szakma mveli. A keretek indokolatlan hasznlatnl taln mr csak a tblzatos oldalkialakts okozott tbb bonyodalmat s felesleges munkt. Rgi jl bevlt, s sokak ltal mg a mai napig is legjobbnak tlt mdszer a menk oldalra, fejlc fellre, lblc alulra stb. pozicionlshoz a tblzatok hasznlata. A mdszer rvidesen elkezdett burjnzani, megjelentek a 2-3-4 szinten egymsba gyazott tblzatok, az egyestett cellk, a csak trkz kialaktshoz ltrehozott sorok s oszlopok vagy ami mg ennl is rosszabb a tvtart gif-ek. Aki mr megprblt egyszer egy ilyen szerkezet oldalt megrteni, esetleg a dizjnt megvltoztatni, az lehet, hogy nhny sz hajszl-

64. oldal

2. A tartalom s a kinzet

lal gazdagodott. A CSS 2-es verzija ta semmi szksg az ilyen elavult s rtelmetlen technikkra. Pldaknt nzznk egy alap oldalelrendezst fejlccel, lblccel s baloldali (pldul men kialaktsra alkalmas) svval. A kvetkezt szeretnnk elrni:

26. bra. Tipikus kt hasbos oldalszerkezet A HTML szerkezet kialaktsnl alapveten a fentrl lefel, azon bell balrl jobbra halad tervezst rdemes kvetni. (Termszetesen sszetettebb esetben ez a sorrend nem ilyen egyszer, s legtbb esetben tbbfle megolds is adhat. Msrszt az is egy fontos szempont, hogy a lnyegi informcitl haladjunk a kevsb lnyeges fel.) Az oldal HTML szerkezete: Praesent... Phasellus wisi nulla... Aenean nummy odio orci Phasellus wisi nulla... Adipiscing elit praesent... Praesent...

2.4. Az oldalszerkezet kialaktsa

65. oldal

A container nevet gyakran alkalmazzk az oldal f troljnak azonostshoz. rdemes mg azt is megfigyelni, hogy a left s content doboz nincsenek egy kzs dobozba szszefogva, br bizonyos esetekben ez is szksges lehet.div.container { width: 100%; margin: 0px; border: 1px solid gray; line-height: 150%; }

A container szlessge alapveten az egsz oldal szlessgt hatrozza meg. Ltszik, hogy az oldal ki fogja tlteni a teljes ablakszlessget. A margin s border tulajdonsgok mr ismersek, csak erre a dobozra lesznek hatssal, mg a line-height rkldni fog a tartalmazott dobozok irnyba. Ehhez hasonlan szneket, bettpusokat szoks ilyen mdon, egysgesen megadni.div.header, div.footer { padding: 0.5em; color: white; background-color: gray; clear: left; }

Az utols sor megakadlyozza, hogy a kt doboz bal oldaln lebeg (float) elem legyen.h1.header { padding: 0; margin: 0; } div.left { float: left; width: 160px; margin: 0; padding: 1em; } div.content { margin-left: 190px; border-left: 1px solid gray; padding: 1em; }

A plda taln legrdekesebb rszhez rtnk: a left s content egyms mell helyezshez. Alap tulajdonsgokkal ez a kt doboz egyms al kerlne, de a left elem float formzsa lehetv teszi, hogy a forrskdban utna kvetkez content doboz ne alatta, hanem mellette (is) jelenjen meg. Ezen kvl mg fontos, hogy a content elem bal margja (margin-left) is be lett lltva, gy a left s content dobozok soha nem fogjk egymst zavarni. A megrtshez rdemes a mkd pldt a FireBug kiegszt Layout nzetvel is megnzni. Az bra azt a pillanatot mutatja, amikor a content doboz van kijellve (ez a bal als rszen jl ltszik). Megfigyelhet a 190 pixel szles, srgval sznezett bal oldali margin terlet, s a konkrt szmrtk is a jobb als Layout elemben.

66. oldal

2. A tartalom s a kinzet

27. bra. Az oldal felpts vizsglata Firebug-galA tblzatos oldalkialaktsi mdszer utn a tisztn CSS-re pt megolds logikja furcsa, nehzkes lehet. Hossz tvon azonban bussan meg fogja hllni a befektetett energit. Az elz pldnl maradva taln az szokta a legtbb nehzsget okozni, hogy a tblzat cellinl megszokott httrbelltsok itt nem gy mkdnek, hiszen itt nem kt egyforma magassg cellrl van sz. Ilyen jelleg problma esetn van egy egyszer megolds: az egyms mell kerl dobozokat egy kzs tartalmaz dobozba helyezzk, s a httr gyes belltsval el lehet azt a hatst rni, amit szeretnnk. Teht nem az egyms melletti dobozok, hanem az ket kzsen tartalmaz doboz httert kell belltanunk. Vgl rdemes megjegyezni, hogy gyakran mindkt (vagy mindhrom) egyms mell kerl dobozt lebegtetjk. Ekkor nem szksges a nagy marg alkalmazsa. Htrnya viszont, hogy a dobozok elbb emltett kzs httert nehezebb formzni.

2.4.4. Pozicionlsi smkA position tulajdonsg segtsgvel az alaprtelmezett statikus bellts helyett relatv s abszolt pozicionlst is krhetnk.

2.4. Az oldalszerkezet kialaktsa

67. oldal

Relatv pozciAz elemeket alaprtelmezett (static) helyzetktl el tudjuk mozgatni a relatv pozicionls segtsgvel vzszintes s fggleges irnyban. A relatv eltols mrtkt a left, right, top s bottom tulajdonsgokkal hatrozhatjuk meg. Az gy eltolt elem eredeti helye resen marad, oda ms elem nem fog becsszni. (Ez lnyeges eltrs a lebegtetett elemekhez kpest.) A kvetkez rnykkal elltott cm plda szemantikusan ugyan nem szerencss, de jl szemllteti a relatv pozicionls lehetsgeit. A megolds lnyege, hogy a cm szvege kt pldnyban szerepel a HTML forrsban, de vizulisan majdnem egymst elfedve, s ms sznnel jelennek meg. Nzzk a pldt:Fcm Fcm Bekezds. Bekezds. Bekezds... h1 { font-size: } h1.main { color: position: top: left: } h1.shadow { color: }

2em;

black; relative; -1.9em; -0.1em; #bbb;

Az eredmny:

28. bra. Relatv pozicionls A megolds htrnya is jl ltszik a kpen: a cmet kvet bekezds nem kveti kzvetlenl a cmet. Termszetesen ez a htrny tovbbi trkkkkel kikszblhet.

68. oldal

2. A tartalom s a kinzet

Abszolt pozciA relatv pozci esetn csak eltoltuk az elemet a helyrl, de az eltols a krnyezetre nem volt ms hatssal. Ezzel szemben az abszolt mdon pozicionlt elem nem tart fenn egy terletet. A megadott pozcik itt a tartalmaz dobozon belli abszolt pozcik, s a kvetkez elemek szmra nem is lteznek. Az elz plda gy megoldhat abszolt pozicionlssal is a korbbi htrny nlkl.h1 { font-size: } h1.main { color: top: left: position: } h1.shadow { color: margin: } 2em; black; 6px; 6px; absolute; #bbb; 2px;

Az eredmny:

29. bra. Abszolt pozicionls rdemes mg kln kiemelni, hogy az abszolt pozci a szlk hierarchijban a hozz legkzelebb es, abszolt vagy relatv pozicionlt elemhez kpest pozicionl, ennek hinyban pedig a body-hoz. Teht ha a szlje nem rendelkezik position tulajdonsggal, de annak szlje igen, akkor a szl szljhez kpest szmt a top, left, right vagy bottom eltols. Emiatt nem ritka, hogy a kvnt szlt a kvetkez formzssal ltjuk el.#valamelyikszulo { position: relative; top: 0; left: 0; }

t nem akarjuk mdostani, de kiindulsi alapknt szmtunk r.

Fix pozciA fix pozci az elz specilis esete. Az elem itt is kikerl a pozicionlsi smbl, de itt nem a tartalmaz doboz, hanem a lttr (kperny) a viszonytsi pont.

2.4. Az oldalszerkezet kialaktsaNagyszeren alkalmazhat pl. a hagyomnyos keretek (frame-ek) kivltsra46.Az Internet Explorer korbbi verzii nem tmogatjk a fix pozicionlst.

69. oldal

2.4.5. Z-indexSok esetben az elemek nem takarjk egymst. Ha mgis, akkor alaprtelmezetten a (HTML forrskdban) ksbbi elem takarja el a korbbit. Ha ez nem megfelel, akkor a z-index rtkek meghatrozsval manipullhatjuk a vizulis takarst.

2.4.6. Begyazott keretekAz oldalszerkezet kialaktsnak ltalban kerlend, de idnknt hasznos megoldsa az inline frame, vagyis az iframe tag hasznlata. Az iframe segtsgvel egy tglalap alak terlet forrskdjt kln llomnyban kezelhetjk az oldal egyb rszeitl.

A masikoldal.html nmagban is hasznlhat HTML oldal kell legyen. Youtube47 videt gy gyazhatunk a sajt weboldalunkba:

2.4.7. A HTML 5 jdonsgaiA struktra kialaktsa terletn igen sok jdonsggal kszl a HTML 5-s. Nzznk meg 48 nhny fontosabb megoldst. A HTML 4 hasznlata esetn igen gyakori a kvetkez brn is lthat elrendezs. Jl megfigyelhet, hogy a div elemek, valamint a class s id attribtumok sora szksges az oldal kialaktshoz.

46 Egy nagyon szp megolds: http://www.456bereastreet.com/archive/200609/css_frames_v2_fullheight/ 47 http://www.youtube.com/ 48 A fejezet tbb pldja A List Apart: Articles: A Preview of HTML 5 oldalrl (http://www.alistapart.com/articles/previewofhtml5) szrmazik.

70. oldal

2. A tartalom s a kinzet

30. bra. Tipikus kt hasbos oldalelrendezs A HTML 5 hasznlatval ezt a furcsa torldst megszntethetjk, ha a kvetkezkppen terveznk:

31. bra. A div elemek helyett header, nav, section, article, aside s footer Ez a kvetkez HTML kddal valsthat meg: ... ... ... ... ...

2.4. Az oldalszerkezet kialaktsa

71. oldal

SzekciA szekci (section elem) egy olyan strukturlis elem, amely akr egymsba is gyazva rhatja le a tartalmi struktrt. Termszetesen cmek ( h1-h6 elemek) a szekci cmt is megadhatjk. Level 1 Level 2 Level 3 ... ...

FejrszA header elem navigcis clokat szolgl. Alkalmazhat egy szekci vagy az egsz oldal (body) fejrsznek lershoz. Tartalmazhat h1..h6 elemeket is. A teljes weboldal fejlce: A Preview of HTML 5 By Lachlan Hunt ...

Egy kisebb egysg fejrsze lehet: Example Blog Insert tag line here.

LbrszA footer elem a lbrsz lershoz hasznlhat. 2011 Example Inc.

NavigciA menket ul-li listaknt volt clszer eddig is kszteni. Most mr rdemes a nav elemet is alkalmazni:

72. oldal

  • About

OldalsvokA legtbb honlap tartalmaz egy vagy tbb oldalsvot. A HTML 5 az aside elemet javasolja alkalmazni ilyen esetekben. Archives

  • September 2007

August 2007 July 2007

A f tartalomA weboldalak f tartalmi elemeinek (pl. blog esetn egy blogbejegyzs, az egyes kommentek) kialaktshoz a HTML 5 az article elemet javasolja. Comment #2 by Jack O'Niell August 29th, 2007 at 13:58 That's another great article!

Vgezetl elmondhatjuk, hogy a HTML 5 komoly vltozsokat hoz ezen a terleten.

2.5. Szvegek ksztseBr egyre kevesebbet olvasunk a weben, a jl megfogalmazott s clszeren megjelentett szvegre mg mindig szksgnk van. A kvetkezkben az 1.1.1. fejezet elveit tudjuk megvalstani a HTML s CSS eszkzeivel.

2.5.1. BekezdsekBekezdseket a p taggal lehet definilni:

2.5. Szvegek ksztse

73. oldal

Fl ve csatlakoztam a Tisztessges vllalkozs mozgalomhoz. Szmomra ez nem csak egy plecsni. Jl kifejezi, milyen alapokra ptem a vllalkozsomat. Szmlt adok, szeretek adzni, s nem csapom be az gyfeleimet.

Ugyangy, mint a papr alap szvegszerkeszt