nagy gusztav web programozas alapismeretek

of 288 /288
Forrás: http://www.doksi.hu

Author: nagy-erika

Post on 22-Jul-2016

69 views

Category:

Documents


23 download

Embed Size (px)

TRANSCRIPT

  • Forrs: http://www.doksi.hu

  • Nagy GusztvWeb programozs alapismeretek

    Forrs: http://www.doksi.hu

  • Forrs: http://www.doksi.hu

  • Nagy Gusztv

    Web programozsalapismeretek

    Ad Librum KiadBudapest, 2011

    Forrs: http://www.doksi.hu

  • A mnek erre a vltozatra a Nevezd meg!-Ne add el!-Ne vltoztasd! licenc felttelei1 r-vnyesek: 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 Fisko-lai 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 http://creativecommons.org/licenses/by-nc-nd/2.5/hu/ 2 http://www.kefo.hu/ 3 http://www.gamf.hu/ 4 http://pap-szigeti.hu/

    Forrs: http://www.doksi.hu

  • BevezetsEzzel a knyvvel arra vllalkozom, hogy a Kecskemti Fiskola GAMF Karn tanul m-szaki 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 knyvkiadsrl

    A knyv elkszlst ngy tanv oktatsi tapasztalatai s hat jegyzetknt kzreadott ver-zi 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 webolda-lon 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 hasz-nosnak 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

    Forrs: http://www.doksi.hu

  • Forrs: http://www.doksi.hu

  • 11. Az alapok

    Ezzel a knyvvel nem vllalkozhatunk arra, hogy minden szksges elismeretet bemutas-sunk 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 viszonya

    Webfejlesztknt magunk is ltogatk vagyunk. Nap mint nap klnbz weboldalakat l-togatunk meg. Ahhoz azonban, hogy j weboldalakat tudjunk kszteni, olyan mdon kell ltnunk a weboldalakat, ahogy azt korbban nem tettk. Folyamatosan szem eltt kell tar-tanunk mrnki szempontokat is.

    1.1.1. Webes tipograi alapismeretek

    Sokunkkal prbltk jl-rosszul megtantani a szvegszerkesztsi alapismereteket. Azon-ban a papralap szvegszerkesztssel kapcsolatos tanulmnyaink htrnyunkra vlhat-nak, ha nem rtjk meg a papr s a weboldal mint klnbz mdik kztti klnbsge-ket.

    A webes tipogra korltai5

    A 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 alapjnhttp://dev.opera.com/articles/view/11-tipografia-a-weben/

    Forrs: http://www.doksi.hu

  • 8. oldal 1. Az alapok

    A webes tipogra korltai tbbek kztt a kvetkezk:

    Korltozott betkszlet

    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 szok-sokkal. 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 tovbb-halads 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 weben http://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) optimalizls

    Ha 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. Go-ogle) val megjelens, mgpedig minl elkelbb helyen az ltalunk hn htott keressza-vakra.

    Forrs: http://www.doksi.hu

  • 1.1. A web s a ltogat viszonya 9. oldal

    Br a tmval foglalkoz rsok, weboldalak, vllalkozsok nem mindig tesznek klnbs-get 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 gondolatbresz-tt emltnk meg:

    Kungl Istvn: SEO mtoszok http://www.seotools.hu/blog/seo-mitoszok

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

    1.2. A web mkdse

    Az 1. bra sokat segthet a tovbbi informcik megrtsben.

    Forrs: http://www.doksi.hu

  • 10. oldal 1. Az alapok

    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 ht-trtrain elhelyeztek. (Ez tulajdonkppen statikus tartalmat eredmnyez, vagyis az ilyen tartalom jellemzen nem vltozik.) Bizonyos esetekben ez ma is gy van: pldul egy hon-lapba 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 l-togat 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 adatbzis-szerverrel kapcsolatot pt fel, s adatbzisbl szrmaz informcikat is felhasznl a v-lasz elksztshez, illetve a felhasznlk vlaszait is eltrolja az adatbzisban.

    1.2.1. Webszerver

    A webkiszolgl/webszerver egy kiszolgl, amely elrhetv teszi a rajta trolt weblapo-kat a HTTP protokollon keresztl. A webszerverekhez webbngszkkel lehet kapcsoldni.

    1. bra. A kliens-szerver architektra

    Forrs: http://www.doksi.hu

  • 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.

    Krs

    A webszerverek a klienstl kapott krsekben tbbek kztt URL cmet kapnak, melyet az-tn ktflekppen rtelmezhet a szerver a belltsaitl fggen:

    1. A tartomnynv utn ll relatv mappa s fjl struktrt hozzrendelik egy gy-krmapphoz. (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 tarto-mnynv is) teljesen fggetlen a krt cmben szerepl struktrtl. Ebben az eset-ben szerver meghatrozott szablyok szerint formzza a krt cmet. Ennek segts-gvel 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 kiszolg-lval, s elkldi a kvetkez HTTP 1.1 krst:

    GET /utvonal/fajl.html HTTP 1.1Host: www.pelda.com

    Vlasz

    1. 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 kiszolgl-hat-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 m-veleteket, majd elkldi a kliensnek. A vlasz termszetesen szintn magban fog-lalja a megfelel fejlcet.

    2. A msodik megolds esetben, az erforrsokhoz trtn megfeleltets eltt a c-met tformzza. Pldul:

    www.pelda.com/toplista/kutyak+es+macskak

    URL krst a kvetkezkppen alakthatja t:

    /var/www/pelda/toplista.php?cim=kutyak+es+macskak

    Forrs: http://www.doksi.hu

  • 12. oldal 1. Az alapok

    Modulok

    Lehetsg van a vlaszok feldolgozsa eltt, az esetlegesen a krsben rkezett adatok fel-dolgozsra s ennek eredmnynek visszakldsre. Ilyenkor a szerver oldalon fut web-szerver-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. Webtrhely

    A 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 hon-lapokkal 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 n-ven 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 ki-szolgl rendszereken oldjk meg, az gyflkiszolgl s adminisztrcis rendszer, a leve-lez kiszolgl, az adatbzis szerver, a webszerver zikailag elklntett kiszolglkon m-kdik. 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 fel-hasznl ltal elrhet technolgik csoportjt is. Windows alap webtrhely esetn a fel-hasznl vlaszthat ASP.NET s Microsoft SQL Server, de akr PHP s MySQL Server t-mogatst is; mg LAMP szerver esetn csak PHP nyelv weboldalakat kszthetnk MySQL Server tmogatssal.

    1.2.3. Virtulis szerver

    A hagyomnyos osztott webtrhelyek helyett egyre npszerbb megolds a virtulis szer-ver alkalmazsa.

    A virtulis szerver, ms nven VPS (Virtual Private Server) a vals szerver erforrsainak egy bizonyos rszt hasznlhatja. Ezek az erforrsok lehetnek dedikltak, azaz kizrla-

    6 http://tarhely.lap.hu/ 7 http://www.cpanel.net/

    Forrs: http://www.doksi.hu

  • 1.2. A web mkdse 13. oldal

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

    A szerver virtualizcival teljestmnyben s hardver felptsben is (ezek virtulis hard-verek, 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 protokoll

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

    HttpFox

    A gyakorlatban a HTTP megismershez a Firefox bngsz HttpFox8 nev kiegsztje nagyszer lehetsget nyjt.

    8 https://addons.mozilla.org/en-us/firefox/addon/httpfox/

    2. bra. VPS architektra

    Forrs: http://www.doksi.hu

  • 14. oldal 1. Az alapok

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

    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/htmlAccept-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.

    Metdusok

    HTTP protokoll nyolcfle metdust definil. A metdusok a megadott erforrson vgzen-d mveletet hatrozzk meg.

    3. bra. A HttpFox mkds kzben

    Forrs: http://www.doksi.hu

  • 1.2. A web mkdse 15. oldal

    HEAD Ugyanazt adja vissza, mint a GET, csak magt az zenettestet hagyja ki a vlaszbl.

    GET A megadott erforrs letltst kezdemnyezi. Ez messze a leggyakrabban hasznlt metdus.

    POST Feldolgozand adatot kld fel a szerverre. Pldul HTML rlap tartalmt. Az adatot az zenettest tartalmazza.

    PUT Feltlti a megadott erforrst.

    DELETE Trli a megadott erforrst.

    TRACE Visszakldi a kapott krst. Ez akkor hasznos, ha a kliens oldal arra kvn-csi, hogy a kztes gpek vltoztatnak-e illetve mit vltoztatnak a krsen.

    OPTIONS Visszaadja a szerver ltal tmogatott HTTP metdusok listjt.

    CONNECT talaktja a krst transzparens TCP/IP tunnell. Ezt a metdust jellemzen SSL kommunikci megvalstshoz hasznljk.

    1. tblzat. HTTP metdusok

    Biztonsgosnak azokat a metdusokat nevezzk, amelyek csak informci lehvsra szol-glnak s elvben nem vltoztatjk meg a szerver llapott. Ms szval mellkhats nlkli-ek. 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 st-tuszkd egy hrom szmjegy szm, az indokls egy angol nyelv zenet. Az elbbit in-kbb gpi, az utbbit inkbb emberi feldolgozsra szntk. Egy egyszer plda sttuszsor-ra:

    HTTP/1.1 200 OK

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

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

    Forrs: http://www.doksi.hu

  • 16. oldal 1. Az alapok

    1xx Informatv Krs megkapva.

    2xx Siker A krs megrkezett; rtelmezve, elfogadva.

    3xx tirnyts A krs megvlaszolshoz tovbbi mveletre van szksg.

    4xx Kliens hiba A krs szintaktikailag hibs vagy nem teljesthet.

    5xx Szerver hiba A szerver nem tudta teljesteni az egybknt helyes krst.

    2. tblzat. HTTP vlasz kdok

    A sttuszsor utn fejlc sorok kvetkezhetnek a HTTP krsnl ltott mdon, pldul gy:

    Date: Mon, 23 May 2005 22:38:34 GMTServer: Apache/1.3.27 (Unix) (Red-Hat/Linux)Last-Modified: Wed, 08 Jan 2003 23:11:55 GMTAccept-Ranges: bytesContent-Length: 438Connection: closeContent-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 ke-resztl 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 t-roljk a felhasznlk munkamenet-llapotait, ha arra szksg van.

    1.2.5. FTP protokoll

    A File Transfer Protocol, a TCP/IP hlzatokon trtn llomnytvitelre szolgl szab-vny.

    Gyakran van szksg arra, hogy valamilyen llomnyt hlzaton keresztl tltsnk le sa-jt gpnkre, vagy egy llomnyt msok szmra hozzfrhetv tegynk. Erre alkalmas az FTP, ami lehetv teszi a klnbz opercis rendszer gpek kztt is az informci-csert. A hozzfrsi jog alapjn ktfle kapcsolattpus ltezik:

    letlts, vagy feltlts nyilvnosan hozzfrhet llomnyokbl vagy llomnyokba,

    letlts, vagy feltlts olyan gprl, ahol azonostval rendelkeznk.

    Forrs: http://www.doksi.hu

  • 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 erforrs-azonost 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 173810 szabvnya.

    A webcm az Internet trtnetnek alapvet jtsa. Egyetlen cmben sszefoglalja a doku-mentum 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 (//) ran-d.

    A 80 adja meg a clgp azon hlzati portszmt, amin krsnket vrja; ez el ket-tspont (:) 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 elrs-hez, hiszen az esetek dnt tbbsgben gyis ezt hasznljuk. Egyszeren begpelhetjk a

    10 http://tools.ietf.org/html/rfc1738

    Forrs: http://www.doksi.hu

  • 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 hivat-koz azonost. Ez az azonost nem rsze a webcmnek, de gyakran szerepel vele kapcso-latban.

    Pldk:

    http://hu.wikipedia.org/w/wiki.phtml?title=Bit&action=historyhttp://hu.wikipedia.org/wiki/1999#Esemnyek

    A webcm az URI11 egy olyan fajtja, ahol az azonosts a dokumentum helye alapjn tr-tnik.

    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 keret12 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 an-nak 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, il-letve egyes rszeinek tulajdonsga alapjn meghatrozhat.

    Azon kvl, hogy r mutat hivatkozst hozzunk ltre, egyb okokbl is kvncsiak lehe-tnk egy lap webcmre: ha tartalmt nllan akarjuk megjelenteni, illetve, ha bizonyos megszortsokat (eszkztr nlkli, vagy kicsi, mretezhetetlen ablak) meg akarunk kerl-ni.

    1.3. A tervezs folyamata

    Mint minden mrnki feladat, a webfejleszts sem kpzelhet el tervezs nlkl egy bizo-nyos mret felett. Elszr is tisztznunk kell a cljainkat.

    1.3.1. A honlap clja

    A szerz a megrendelvel val kommunikcit egy interj formjban javasolja kezdeni, az albbi krdsekkel. A krdsekre adott vlaszok kztt persze nagy lehet az tfeds, az

    11 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.

    Forrs: http://www.doksi.hu

  • 1.3. A tervezs folyamata 19. oldal

    interj clja az elrend clok teljes kr feltrkpezse. Egy konkrt esetben teht bizo-nyos krdseket ki is hagyhatunk, ha azok feleslegesnek, rtelmetlennek tnnek. Ms eset-ben 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 szeret-nnk 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 megtervezse

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

    Forrs: http://www.doksi.hu

  • 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 oldaltrkpt13 (4. bra).

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

    Forrs: http://www.doksi.hu

  • 1.3. A tervezs folyamata 21. oldal

    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, kenyrmor-zsa men14, cmkefelh, stb.)

    a menk egy vagy tbbszintek legyenek

    melyik szls oszlopban milyen tartalm dobozok s milyen sorrendben szerepelje-nek

    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

    4. bra. Oldaltrkp

    Forrs: http://www.doksi.hu

  • 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).

    Ezen kvl egyre elterjedtebb a drtvz (wireframe, mockup) eszkzk hasznlata is. Plda-knt a MockFlow egy Youtube tervt15 nzzk meg (6. bra).

    15 Forrs: http://www.mockflow.com/samples/

    5. bra. Paper prototyping plda

    6. bra. Drtvz bra a MockFlow oldalrl

    Forrs: http://www.doksi.hu

  • 1.3. A tervezs folyamata 23. oldal

    Tovbbi 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

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

    1.4. A fejlesztkrnyezet kialaktsa

    ltalnos 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 rendszer

    Elszr is nzzk meg, melyek ma a webkiszolglkban gyakran hasznlt opercis rend-szerek.

    Linux

    Az elterjedtebb, s nem kimondottan asztali (desktop) hasznlatra sznt Linux16 disztrib-cik teleptsvel mkd web-, s adatbzis szervert kapunk. Akr rgebbi, ms felhasz-nlsok szmra rtktelen hardverre is telepthetnk Linuxot. Egy kisebb forgalm honla-pot tkletesen kpes kiszolglni.

    A nagy nev disztribcik friss verzii a mai cscsgpek meghajtsra s cscs ignyek ki-szolglsra alkalmas, szintn knnyen telepthet lehetsget nyjtanak a rendszergaz-dknak.

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

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

    Forrs: http://www.doksi.hu

  • 24. oldal 1. Az alapok

    BSD

    Kevsb kzismert, de egyes rendszergazdk krben stabilitsa miatt nagy npszersg-nek rvend Unix18 opercis rendszerek. Az alapvet vltozatok szerver feladatokra opti-malizltak, 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 (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 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 rend-szert 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 le-hetv 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 / je-let hasznljuk, s soha ne adjunk meg Windows alatt rvnyes teljes elrsi utat, pl. kerlend a forma.

    1.4.2. Szerver alkalmazsok

    Linux s BSD alatti teleptst most nem trgyaljuk, a hasznlt disztribci dokumentci-jt rdemes fellapozni19. Itt a Windows alatti szerver krnyezet kialaktst fogjuk trgyal-ni.

    XAMPP integrlt telept csomag

    Mivel a szerver alkalmazsok teleptse nem mindig egyszer feladat, prblkozhatunk elre csomagolt, s minden szksges alkalmazst telept s bekonfigurl programokkal

    18 http://www.bsd.hu/ 19 Pl. LAMP szerver:

    http://sugo.ubuntu.hu/community-doc/jaunty/universe/apps/lamp-server.html

    Forrs: http://www.doksi.hu

  • 1.4. A fejlesztkrnyezet kialaktsa 25. oldal

    is. Ezek kzl csak egyet mutatunk be rszletesen, a tbbi alkalmazsa hasonl. A szolgl-tatsok krben lehetnek jelentsebb eltrsek is.

    A telept-csomagok htrnya, hogy br tbbnyire mkdnek, egy esetleges hiba elllsa esetn a hiba meg-szntetse elgg bajos lehet, mivel kevsb tudunk a csomag mkdsbe beleltni.

    A szerz ltal leginkbb ajnlott integrlt telept csomag az XAMPP20. Az XAMP for Win-dows 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. Leg-fontosabb a telepts helye. A telepts utn a Start menbl s parancssorbl is vezrel-hetjk 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 mk-dst legegyszerbben a localhost/phpmyadmin lekrsvel tesztelhetjk.

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

    Forrs: http://www.doksi.hu

  • 26. oldal 1. Az alapok

    1.4.3. A fejleszt gpe

    Szerverknt akr a sajt gpnket hasznljuk, akr egy tvoli szervert, a kvetkez szoft-verekre szksgnk lesz.

    Bngsz

    A weboldalt ltogatk igen sokfle bngszt hasznlnak. Emiatt a webfejlesztnek leg-albbis 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 informci-knt 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 n-hny fejlesztshez hasznlhat kiegszt tlthet le21.

    A szerz ltal gyakrabban hasznlt kiegsztk:

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

    7. bra. XAMPP Control Panel

    Forrs: http://www.doksi.hu

  • 1.4. A fejlesztkrnyezet kialaktsa 27. oldal

    HTML Validator22

    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.

    FireBug23

    A 9. brn lthat kiterjeszts az oldalt s a forrskdjt teljesen szimultn mutatja, rde-mes megfigyelni az egrkurzorral irnythat kk dobozokat.

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

    8. bra. Forrs megtekintse a HTML Validator megjelentsvel

    Forrs: http://www.doksi.hu

  • 28. oldal 1. Az alapok

    A kvetkez videkkal alaposabban megismerhetjk a Firebug szolgltatsait:

    rrd (Radharadhya dasa): Firebug 10 percben http://webmania.cc/firebug-10-percben/ http://webmania.cc/firebug-10-percben-2/ http://webmania.cc/firebug-10-percben-3/

    Web Developer24

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

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

    9. bra. A Firebug mkds kzben

    Forrs: http://www.doksi.hu

  • 1.4. A fejlesztkrnyezet kialaktsa 29. oldal

    HTML Validator25

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

    Fjlkezel

    A webfejleszts kzben igen gyakran van szksg llomnykezelsi feladatokra. Ehhez a Windows intz helyett clszer valamelyik kt paneles szoftvert alkalmaznunk. Az llo-mnyok 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 kliens

    Szksgnk lesz valamilyen FTP kliensre az llomnyok szerverre feltltshez. Erre a cl-ra megolds lehet a Total Commander, de clszer inkbb megismerni a FileZilla28 alkal-mazst. A FileZilla egy szabad FTP kliens, amely knnyen hasznlhat, tbb szlon is k-pes fel-, s letlteni, folytatja a megszakadt letltseket, tbb opercis rendszeren s nyel-ven mkdik. Az egyre gyakoribb SFTP-hozzfrs miatt j megolds a WinSCP29 haszn-lata is.

    Programozi editor, IDE

    A webfejleszts sorn idnk j rszben forrskdok begpelst fogjuk vgezni. Ezrt na-gyon nem mindegy, milyen tmogatst kapunk ehhez az editorunktl. Nem igazn alkal-

    25 https://addons.mozilla.org/hu/firefox/addon/249/ 26 http://www.totalcommander.hu/ 27 http://www.krusader.org/ 28 http://filezilla-project.org/ 29 http://winscp.net/

    10. bra. Web developer div informcik

    Forrs: http://www.doksi.hu

  • 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 szoft-verek egyik legjobbika a Komodo Edit30, amelyik a kdsznezs mellett kdkiegsztssel s l (FTP feletti) szerkesztssel is megbirkzik.

    Kpszerkeszt program

    A fejleszt a vals letben tbbnyire kp(ek) formjban kapja meg az oldal ltvnytervt, valamilyen szveges formtumban a szveges rszt, s nyers formban a tartalomhoz kap-csold 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 k-pet tglalap alak rszekre kell vgni, a fnykpeket pedig mretre hozni, javtani, sznkor-rekcit, 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 utmunk-latra hasznlhat tsznez ecset vagy a klnblyeg. A beptett, ltvnyos effektusai segt-sgvel egyszerv vlik a retusls. Tovbbi rdekessge a rtegkezels, a lapolvask, a di-gitlis 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 le-gyen. Fejlett script-fellete lehetv teszi, hogy a legegyszerbb feladatoktl a legbonyo-lultabb kpfeldolgozsi eljrsokig minden knnyen elrhet legyen parancsfjlokbl is.

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

    Forrs: http://www.doksi.hu

  • 22. A tartalom s a kinzet

    A 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 Garden32 oldala, ahol ugyanazt a HTML struktrt ezernyi kln-bz mdon lehet megtekinteni, pusztm a dizjn (CSS llomnyok s a kpek) cserjvel.

    2.1. HTML alapok

    A 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 megismer-shez, de tbb nyelvi elem bemutatstl is eltekint. Ennek fbb okai:

    Bizonyos HTML jellemzk a mai napra elavultnak tekinthetk. Itt elssorban a ki-nzet 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 kdols-nak 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 oldalt

    32 http://www.csszengarden.com/tr/magyar/

    Forrs: http://www.doksi.hu

  • 32. oldal 2. A tartalom s a kinzet

    A HTML llomny html kiterjesztssel rendelkezik

    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 komo-lyabb 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. K-sbb majd FTP kapcsolaton keresztl a webszerverre fogjuk az oldalainkat feltlteni, majd webszerver elrs-vel 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 lt-nunk a bngsznkben:

    A plda magyarzata

    A 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 bng-sz nem jelenti meg kzvetlenl.

    11. bra. Az els HTML oldal a bngszben

    Forrs: http://www.doksi.hu

  • 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 flkv-ren) jelenik meg.

    2.1.3. HTML szerkesztk

    Lteznek olyan szerkesztprogramok, amelyekkel tnyleges HTML ismeretek nlkl is le-het HTML oldalakat ltrehozni. Ezeket a programokat WYSIWYG (what you see is what you get) editoroknak hvjuk. Ezek azonban kerlendk, ha minsgi HTML oldalakat sze-retnnk ltrehozni. (Legalbbis a tanuls kezdeti fzisban.) Ezek a programok ugyanis ki-sebb-nagyobb mrtkben teleszemetelik a kdot.

    rdemes inkbb olyan szerkesztprogramot vlasztani, ahol a HTML kd fltt teljes el-lenrzssel brunk, ugyanakkor kiegszt szolgltatsokkal (pl. sznkiemels, tagok besz-rsa 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 sz-mra 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 legjobba-kat.)

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

    Forrs: http://www.doksi.hu

  • 34. oldal 2. A tartalom s a kinzet

    A HTML tagot a < s > rsjelek veszik krl (ezek az rsjelek az egyszer szve-gekben 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 elemek

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

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

    Forrs: http://www.doksi.hu

  • 2.1. HTML alapok 35. oldal

    2.1.8. ltalnos tulajdonsgok

    A HTML tagoknak klnbz tulajdonsgaik lehetnek. Ksbb meg fogjuk ismerni a k-lnbz HTML tagok specilis tulajdonsgait. Ebben a fejezetben az ltalnosan hasznl-hat tulajdonsgok kerlnek a kzppontba.

    Alaptulajdonsgok

    class: az elem osztlya, tbb tagnak lehet ugyanaz az rtke. Clja, hogy tbb ele-met 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 informci-t a weboldal alaprtelmezshez kpest. (Pl. egy magyar oldalon idznk egy francia ver-set.)

    Billenty tulajdonsgok

    accesskey: gyorsbillentyt rendel az elemhez.

    tabindex: tabultorral trtn elemvlts sorrendjt befolysolja. (rlapok esetn hasznlhat.)

    2.1.9. Megjegyzsek

    A megjegyzs tagot megjegyzsek elhelyezsre hasznljuk. A bngsz nem veszi figye-lembe a megjegyzsbe rt szveget. (Termszetesen a megjegyzs megtekinthet a forrs-kdban.)

    A megjegyzsben nem fordulhat el kt ktjel a > nlkl.

    Forrs: http://www.doksi.hu

  • 36. oldal 2. A tartalom s a kinzet

    2.1.10. Karakter entitsok

    Bizonyos karakterek (mint pldul a < s >) specilis jelentsek a HTML-ben, ezrt nem hasznlhatk a foly szvegben. Ezenkvl vannak olyan specilis rsjelek, amelyek ha-gyomnyos billentyzetrl nem vihetek be, vagy nem is szerepelnek az ASCII kdtbl-ban.(Pl. a jel.) Ha egy ilyen specilis karaktert akarunk megjelenteni, akkor karakter en-titst kell alkalmaznunk.

    A karakter entits hrom rszbl ll: & az elejn, ; a vgn, a kett kztt pedig egy enti-ts nv, vagy # s szmkd. Ha pldul a < jelet szeretnnk megjelenteni, akkor a doku-mentumba az < vagy a < karaktersorozatot kell gpelnnk. Az entitsok kis-nagy-bet rzkenyek.

    Nem trhet szkz

    A 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 segts-gvel 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 kerlje-nek. Pldul a kvetkez nv mindig egy sorba, trdels nlkl fog kerlni:

    NagyGusztv

    kezetes karakterek

    Az angol abc-ben nem szerepl karakterek (gy a magyar nyelv kezetes karakterei is) so-kig problmt okoztak a HTML szerkeszts sorn. Ezrt korbban szoks volt az kezetes karaktereket is entitsok segtsgvel megadni. A mai napra azonban ezek a problmk l-nyegben 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.

    Forrs: http://www.doksi.hu

  • 2.1. HTML alapok 37. oldal

    Tovbbi karakter entitsok

    Lers Jelents Entits nv Entits szmkd

    nem trhet szkz

    < kisebb, mint < nagyobb, mint > >

    & s & &

    " idzjel " "

    ' aposztrf ' '

    bekezds

    copyright

    3. tblzat. Tovbbi karakter entitsok

    Az entitsok teljes listjt a HTML referenciban rdemes33 keresni.

    2.1.11. Szemantikus HTML

    A szemantikus HTML nem ms, mint a HTML tagok jelentsnek betartsa, rendeltets-szer hasznlata. Pldul, egy bekezdst nem hasznlunk fel men kialaktshoz.

    Azrt fontos ez, mert a keresgpek, automatikus katalgusok, HTML rtelmezk ez alap-jn 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 kur-zort 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.

    Forrs: http://www.doksi.hu

  • 38. oldal 2. A tartalom s a kinzet

    A klnbz listkat a lista elemekkel definiljuk. (, , ). Taln nem tri-vilis, 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 lehets-geit. Ezekrl ksbb lesz sz, pl. a 2.4.7. fejezetben.

    2.1.12. Szabvnyossg

    A HTML nyelv a kezdetektl fogva szigor szablyokra plt. A Microsoft Internet Explo-rer s a Netscape Navigator34 harcnak egyik mellktermke, hogy a bngszk felismer-nek, 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 pon-tosan 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 ele-mek s tulajdonsgok) hasznlatt, valamint a kereteket. A kvetkez elemet kell a doku-mentum 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/

    Forrs: http://www.doksi.hu

  • 2.1. HTML alapok 39. oldal

    2.1.13. HTML 5

    Br a HTML 5-s vltozata36 mg nem vgleges szabvny, folyamatosan ersdik a tmo-gatsa. 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. XHTML

    Az 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 al-kalmazsuk. A kvetkez sorokban nhny pontban megnzzk, miben tr el egy XHTML dokumentum a HTML-tl.

    Egymsba gyazs

    Az 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 rni

    A tagok neveit kisbetvel kell rni, ezrt a kvetkez hibs:

    Ez egy bekezds.

    A helyes vltozat:

    Ez egy bekezds.

    Elemek lezrsa

    A HTML elemeket le kell zrni. Hibs:

    36 http://www.w3.org/TR/html5/

    Forrs: http://www.doksi.hu

  • 40. oldal 2. A tartalom s a kinzet

    Ez egy bekezds.Ez egy msik bekezds.

    A helyes:

    Ez egy bekezds.Ez egy msik bekezds.

    Zr pr nlkli elemek

    Zr pr nlkli elemek esetn is le kell zrni. Itt azonban egy rvidtett rsmd is alkal-mazhat:

    SortrsElvlaszt vonalKp

    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 tenni

    Ez praktikus HTML-nl is, ha a tulajdonsg rtke pl. szkzt tartalmaz. XHTML-ben azonban mindig ktelez:

    A tulajdonsgok ktelezen tartalmaznak rtket is

    Ha a HTML nem r el rtket (vagyis a tulajdonsg lnyegben logikai jelzknt mk-dik), akkor az rtk megegyezik a tulajdonsg nevvel.

    A name tulajdonsg helyett az id hasznland

    Hibs teht:

    Helyes:

    A rgebbi bngszkkel val kompatibilits miatt mindkettt is szoktk alkalmazni:

    Forrs: http://www.doksi.hu

  • 2.2. CSS alapok 41. oldal

    2.2. CSS alapok

    2.2.1. Mi a CSS?

    A CSS a Cascading Style Sheets rvidtse

    A stlusok a HTML megjelentsi elemei s attribtumai helyett hasznlhatk, azok-nl 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 ki-nzettl (a dizjntl)

    A stlusokat ltalban kln llomnyban troljuk (.css kiterjesztssel)

    Kls stluslapokkal gyorstani tudjuk a munkavgzst

    Tbb stlus is hatssal lehet egy elem megjelensre

    Kedvcsinl

    Mieltt a CSS alapos megismershez kezdennk, mindenkppen clszer a CSS Zen Gar-den37 oldalt megltogatni. Ez az oldal azzal a cllal jtt ltre, hogy a CSS-sel szembeni el-lenrzseket lerombolja, s bemutassa, milyen risi lehetsgek vannak a dizjner kez-ben, 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 term-szetesen a dekorcis kpek) cserjvel. A teljessg ignye nlkl nhny kpernykp (12-15. bra):

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

    Forrs: http://www.doksi.hu

  • 42. oldal 2. A tartalom s a kinzet

    A stlusok hasznlatnak okai

    A HTML tagok eredetileg arra lettek megalkotva, hogy a dokumentum tartalmt definil-jk. 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.

    12. bra. CSS Zen Garden plda 13. bra. CSS Zen Garden plda

    14. bra. CSS Zen Garden plda 15. bra. CSS Zen Garden plda

    Forrs: http://www.doksi.hu

  • 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 Consortium38 (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 t-mogatottsgban. 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 sprolhatunk

    A stluslapok azt definiljk, hogy hogyan jelenjenek meg az egyes HTML elemek. A st-luslapokat kln .css kiterjeszts llomnyban szoks elhelyezni. gy knnyedn lehet ugyanazt a megjelentst adni a honlap sszes oldalhoz, mindssze egyetlen CSS llo-mny szerkesztsvel. Ha brmit vltoztatni kell a dizjnon, lnyegben csak ezt az egyet-len llomnyt kell mdostanunk.

    Egy elemre tbb stlusdefinci is hatssal van

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

    Melyik stlus fog rvnyeslni, ha tbb stlust is definilunk ugyanahhoz a HTML elem-hez?

    A kvetkez ngy bellts rvnyesl egyre nagyobb prioritssal (teht tkzs esetn a ksbbi fellrja az elzt).

    1. a bngsz alapbelltsa

    2. kls stluslap

    38 http://www.w3.org/

    Forrs: http://www.doksi.hu

  • 44. oldal 2. A tartalom s a kinzet

    3. head elemben definilt stlus

    4. soron belli stlus

    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 min-den 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 dokumentumunk-hoz. Clszer azonban les krnyezetben a kls stluslapokat alkalmazni.

    Kls stluslap

    A kls stluslap alkalmazsa a legidelisabb eset. Ekkor a HTML llomny az oldal infor-matv rszt tartalmazza, a kls CSS llomny pedig sszegyjtve a megjelentsre vonat-koz 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

    Forrs: http://www.doksi.hu

  • 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 stluslap

    Begyazott 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 stlus

    Soron 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 nyelvtana

    A 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 tulajdon-sgot 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"}

    Forrs: http://www.doksi.hu

  • 46. oldal 2. A tartalom s a kinzet

    Ha egy kivlaszt esetn tbbfle tulajdonsgot is mdostani szeretnnk, knnyedn meg-tehetjk, 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 kivlaszts

    Osztly kivlaszt segtsgvel ms-ms mdon tudjuk megjelenteni az egyes osztlyokba sorolt elemek tartalmt. A pldban a kt klnbz osztlyhoz tartoz bekezdsek ms-ms 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, ltal-nos 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:

    Forrs: http://www.doksi.hu

  • 2.2. CSS alapok 47. oldal

    Ez egy kzpre igaztott cm.

    Ez egy kzpre igaztott bekezds.

    rdemes megemlteni, hogy a class tulajdonsg tbb rtket is kaphat, egymstl szkz-zel 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 kivlaszts

    A HTML elemeknek megadhatjuk az egyedi id tulajdonsgot. gy az egyedi id-vel rendel-kez elemhez specilis formzst hatrozhatunk meg. CSS-ben a # segtsgvel tudunk ele-met 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 kivlaszt

    A * szelektorral minden elemet egysgesen tudunk formzni:

    * { border: 1px solid #000000; }

    Tulajdonsg kivlaszt

    A 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; }

    Forrs: http://www.doksi.hu

  • 48. oldal 2. A tartalom s a kinzet

    Gyermek kivlaszt

    Gyakori, hogy az elemek tlzott id s class tulajdonsggal val elltsa helyett inkbb az elemek hierarchijra (ms megfogalmazsban leszrmazsra, mint a csaldfnl) p-tnk.

    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 kzvet-lenl h3-ban lev strong elemekre sem.

    h3 > strong { color: blue; }

    Leszrmazott kivlaszt

    Az elzhz igen hasonl lehetsg nem csak a kzvetlen szl-gyermek kapcsolatra, ha-nem az akr tbb szint rkldsre, vagy mshogy fogalmazva a tartalmazsra pt. Nz-znk egy pldt:

    Szia! Ez a bekezds ksznt tged.

    Ekkor a div > em kivlaszt csak az els, mg a div em kivlaszt mindkt em tagot for-mzza.

    Testvr kivlaszt

    Gyakran van szksg arra, hogy egymst kzvetlen kvet elemek (vagyis testvrek) ir-nybl 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.

    Megjegyzs

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

    Forrs: http://www.doksi.hu

  • 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 elvek

    Egy 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, be-tartsval mgis elrhet. Nzznk meg nhny tletet ezzel kapcsolatban.

    A CSS lpcss formzsa

    Br a gyakorlatban mg nem terjedt el, nagyobb CSS llomnyok esetn az ttekinthets-get 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 sztvlaszts

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

    CSS keretrendszerek

    Egyesek ltal felmagasztalt, msok ltal lenzett megolds a CSS keretrendszerek alkalma-zsa. 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 demonst-rlja 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-grid-

    system/

    Forrs: http://www.doksi.hu

  • 50. oldal 2. A tartalom s a kinzet

    2.2.5. Mdia tpusok

    Ma mr egy weboldalt tbbfle krnyezetben hasznlhatunk. Egy weboldalt megnzhe-tnk 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 m-retet 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 llo-mnyokat ksztnk:

    16. bra. 960 Grid System plda

    Forrs: http://www.doksi.hu

  • 2.2. CSS alapok 51. oldal

    Nzznk nhny gondolatot Matkovsk Pter CSS lpsrl-lpsre: nyomtats cikke42 alap-jn.

    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 minden eszkz

    aural felolvas szoftver

    handheld kzi megjelent

    print lapozhat (nyomtats)

    projection vetts (mint egy kirakati reklm, vagy az S543 mdszer)

    screen kperny

    4. tblzat. Mdiatpusok

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

    Forrs: http://www.doksi.hu

  • 52. oldal 2. A tartalom s a kinzet

    2.2.6. Validtor

    A CSS kd ellenrzsre az online is hasznlhat W3C CSS Validation Service44 egy na-gyon j eszkz. Arra azrt figyelni kell, hogy csak rvnyes HTML kddal lehet a CSS r -vnyessgt vizsglni.

    2.2.7. CSS 3

    Az 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 kiala-kultak olyan technikk, amelyek ersen ptettek a grafikus szoftverek tudsra s a ki-sebb-nagyobb egyedi trkkkre. Ma ezek (mint pl. a lekerektett sarkok, szntmenetek, r-nykok 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 jdons-got.

    2.3. Cmsorok s formzsuk

    A cmek a h1 h2 h3 h4 h5 h6 tagok segtsgvel adhatk meg. h1 a legnagyobb (legfel-sbb szint) cmet jelenti, h6 pedig a legkisebbet. (ltalban egy oldalon 2-4 szintet indo-kolt 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/

    Forrs: http://www.doksi.hu

  • 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.

    A cmsorokhoz a bngsz alaprtelmezetten trkzket is kapcsol, amit majd CSS segts-gvel mdosthatunk.

    A kvetkez CSS formzsok nem csak cmekre, hanem sokfle ms tagra is alkalmazha-tak lesznek.

    2.3.1. Httr

    Egy elem httert httrszn s httrkp segtsgvel vltozatosan formzhatjuk. A ht-trkp ismtldhet is fgglegesen, vzszintesen, s lehet a bngszablakhoz vagy a gr-getett tartalomhoz ragasztott.

    17. bra. Cmek szemantikus hasznlata

    Forrs: http://www.doksi.hu

  • 54. oldal 2. A tartalom s a kinzet

    Httrszn

    A background-color tulajdonsg segtsgvel meghatrozhatjuk az elemek httrsznt. A korbban megismert sznmegadsi mdok kzl itt is tetszlegesen vlaszthatunk. To-vbbi 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:

    Httrkp

    Az egyszn httr helyett akr ltvnyos httrkpet is elhelyezhetnk az elemek httere-knt a background-image tulajdonsg segtsgvel.

    background-image: url('bgdesert.jpg')

    Ismtlds

    A httrkp alaprtelmezs szerint kitaptzva jelenik meg, ha az elem mrete ezt szks-gess teszi. Termszetesen ez megvltoztathat, mind vzszintes, mind fggleges irnyban megtilthatjuk az ismtldst. A kvetkez pldban csak y irnyban ismtldik a httr-kp:

    background-image: url('bgdesert.jpg');background-repeat: repeat-y;

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

    18. bra. Httrsznek alkalmazsa

    Forrs: http://www.doksi.hu

  • 2.3. Cmsorok s formzsuk 55. oldal

    Pozci

    A httrkp pozcija is megvltoztathat: az alaprtelmezett bal fels sarok helyett ms-hol 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 3-3 konstans (top, center, bottom s left, center, right) mellett szzalkos s pixeles po-zicionls 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:

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

    Httrkp ragasztva

    Elssorban hosszabb grgethet tartalom esetn van jelentsge annak, hogy a httrkp nem csak a grgetsvval egytt mozogva, hanem fixen pozicionlva is krhet. Sok rde-kes megolds rhet el ezzel az apr trkkel.

    background-image: url('nagygusztav.jpg');background-repeat: no-repeat;background-attachment: fixed;

    19. bra. Httrkp

    Forrs: http://www.doksi.hu

  • 56. oldal 2. A tartalom s a kinzet

    Mindent bele

    Ha 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. Szeglyek

    A CSS border tulajdonsgaival szeglyeket rajzolhatunk az elemek kr. A kvetkez pl-da 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:

    Az elemek szeglyt nem csak egysgesen llthatjuk be. Tbbfle lehetsgnk van az el-tr megadsra.

    Egyrszt egyenknt is llthatjuk a szeglyek stlust a border-top-style, border-right-style, border-bottom-style s border-left-style segtsgvel.

    Msrszt a fenti megadsnl nem csak egy rtket, hanem 2, 3 vagy 4-et is hozzrendelhe-tnk a defincihoz. Ennek logikjt a kvetkez rszben, a sznekkel kapcsolatban fejtjk ki.

    Szeglyszn

    A 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

    20. bra. Seglyek hasznlata

    Forrs: http://www.doksi.hu

  • 2.3. Cmsorok s formzsuk 57. oldal

    0 s 255 kztt (hexadecimlisan 00 s FF kztt) lehet. Ezzel a mdszerrel teht a 3 bj-ton 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 vastagsga

    A szegly vastagsgt a border-width tulajdonsggal llthatjuk be. A kvetkez plda folyamatos vonallal szeglyezi a bekezdst, de a szegly vastagsgt megnveli az alapr-telmezett 1px-hez kpest:

    p { border-style: solid; border-width: 15px}

    A ngy oldal szeglyeit nem csak egyszerre, hanem akr kln-kln is lehet lltani, pl-dul 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}

    Forrs: http://www.doksi.hu

  • 58. oldal 2. A tartalom s a kinzet

    Kzs deklarci

    Az eddigi szegly tulajdonsgok (hasonlan a korbbi tulajdonsgcsoportokhoz) sszevon-hatk 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 kvl

    A CSS szintaktikailag kt nagyon hasonl tulajdonsg-csoportot tartalmaz. A margin tu-lajdonsggal a szeglyen (border) kvli, a padding tulajdonsggal pedig a tartalom s a szegly kztti bels margt lehet belltani. A szintaktikai hasonlsg miatt ebben az al-fejezetben csak a kls marg (margin) szintaxisa fog kvetkezni, de minden plda hason-lan lerhat lenne a bels margra (padding) is.

    Margk esetn is van lehetsgnk, hogy egyszerre mind a ngy oldal rtkt, akr kln-bzre 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 kel-lemetlensgek 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/

    Forrs: http://www.doksi.hu

  • 2.4. Az oldalszerkezet kialaktsa 59. oldal

    2.4. Az oldalszerkezet kialaktsa

    Ha 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 tagok

    A 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 (szeman-tikusabb) megoldsunk is. Erre a 2.4.7. fejezetben visszatrnk.

    2.4.1. Mretek

    Az elemek szlessg (width) s magassg (height) tulajdonsga segtsgvel az elem m-rete 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. Megjelents

    A 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 m-soknak (pl. small, img, span) az inline.

    Forrs: http://www.doksi.hu

  • 60. oldal 2. A tartalom s a kinzet

    Nzznk egy egyszer pldt a bekezdsek inline-knt val hasznlatra, s a div ele-mek eltntetsre:

    p {display: inline}div {display: none}

    Els bekezds.Msodik bekeds.Nem lthat div elem.

    Az eredmny:

    Egy msik gyakorlati szempontbl rdekes plda, ami szerint az oldal fmenjt felso-rolt listval is szoks ltrehozni, s a CSS szintjn inline listaelemekkel megoldani a me-npontok egyms mell kerlst. Ezt a pldt a 2.4.3. fejezetben mg alaposabban meg-vizsgljuk.

    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 na-gyobb rszeket is be lehet csukni, hogy a navigci ttekinthetbb legyen. Ezt JavaScripttel tmogatva egyszeren meg lehet tenni: kattints hatsra egy bizonyos elem display tulaj-donsgt kell none vagy block rtkre vltani az eltntetshez vagy megjelentshez.

    2.4.3. A lebegtets

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

    21. bra. Soron belli formzs

    Forrs: http://www.doksi.hu

  • 2.4. Az oldalszerkezet kialaktsa 61. oldal

    Kp lebegtetse

    Nzznk egy kpes pldt elszr CSS nlkl. A kp a bekezds belsejben, sor-folytono-san 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:

    Ha a kp elem megkapja a float: right formzst, a kp jobb oldalt jelenik meg, kr-befuttatva a kvetkez tartalommal:

    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 segts-gvel egysgbe zrjuk a kpet s a feliratt, s ezt a csoportost div elemet lebegtetjk.

    22. bra. Kp lebegtets nlkl

    23. bra. Kp lebegtetve

    Forrs: http://www.doksi.hu

  • 62. oldal 2. A tartalom s a kinzet

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

    A CSS szuper!

    Ez egy szveg. Ez egy szveg. ...

    Az eredmny:

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

    Horizontlis men

    Nzzk 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 Me-n 1 felett van.)

    Nzzk meg kzelebbrl a plda fontosabb pontjait.

    24. bra. Lebegtets alrssal

    25. bra. Horizontlis men

    Forrs: http://www.doksi.hu

  • 2.4. Az oldalszerkezet kialaktsa 63. oldal

    ul { float:left; width:100%;

    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 tel-jes 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 oldalkialakts

    A webfejleszts elmlt veiben sok zskutct megjrtak a szakma mveli. A keretek indo-kolatlan hasznlatnl taln mr csak a tblzatos oldalkialakts okozott tbb bonyodal-mat s felesleges munkt.

    Rgi jl bevlt, s sokak ltal mg a mai napig is legjobbnak tlt mdszer a menk ol-dalra, 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 szerke-zet oldalt megrteni, esetleg a dizjnt megvltoztatni, az lehet, hogy nhny sz hajszl-

    Forrs: http://www.doksi.hu

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

    A HTML szerkezet kialaktsnl alapveten a fentrl lefel, azon bell balrl jobbra hala-d tervezst rdemes kvetni. (Termszetesen sszetettebb esetben ez a sorrend nem ilyen egyszer, s legtbb esetben tbbfle megolds is adhat. Msrszt az is egy fontos szem-pont, 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...

    26. bra. Tipikus kt hasbos oldalszerkezet

    Forrs: http://www.doksi.hu

  • 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 sz-szefogva, 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 tartal-mazott 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 helyezs-hez. Alap tulajdonsgokkal ez a kt doboz egyms al kerlne, de a left elem float for-mzsa lehetv teszi, hogy a forrskdban utna kvetkez content doboz ne alatta, ha-nem 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 megnz-ni. 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 te-rlet, s a konkrt szmrtk is a jobb als Layout elemben.

    Forrs: http://www.doksi.hu

  • 66. oldal 2. A tartalom s a kinzet

    A 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 mel-letti dobozok, hanem az ket kzsen tartalmaz doboz httert kell belltanunk.

    Vgl rdemes megjegyezni, hogy gyakran mindkt (vagy mindhrom) egyms mell kerl dobozt lebegtet-jk. Ekkor nem szksges a nagy marg alkalmazsa. Htrnya viszont, hogy a dobozok elbb emltett kzs ht