Üzleti Webtechnológiák - Holló Csaba

7/24/2019 zleti Webtechnolgik - Holl Csaba

1/118

rta:

HOLL CSABA

ZLETI WEBTECHNOLGIK

Egyetemi tananyag

2011


2/118

COPYRIGHT: 20112016, Dr. Holl Csaba, Szegedi Tudomnyegyetem Termszettudomnyi sInformatikai Kar Szoftverfejleszts Tanszk

LEKTORLTA: Dr. Vmossy Zoltn, budai Egyetem Neumann Jnos Informatikai KarSzoftvertechnolgia Intzet

Creative Commons NonCommercial-NoDerivs 3.0 (CC BY-NC-ND 3.0)

A szerznevnek feltntetse mellett nem kereskedelmi cllal szabadon msolhat, terjeszthet,megjelentethets eladhat, de nem mdosthat.

TMOGATS:

Kszlt a TMOP-4.1.2-08/1/A-2009-0008 szm, Tananyagfejleszts mrnk informatikus,

programtervezinformatikus s gazdasginformatikus kpzsekhez cmprojekt keretben.

ISBN 978-963-279-507-2

KSZLT: a Typotex Kiadgondozsban

FELELS VEZET: Votisky Zsuzsa

AZ ELEKTRONIKUS KIADST ELKSZTETTE: ErZsuzsa

KULCSSZAVAK:

XHTML, CSS, webprogramozs, JavaScript, Java szervlet, JavaServer Pages, AJAX,akadlymentessg.

SSZEFOGLALS:A megjelenteszkzk sokflesge, illetve a fogyatkkal lemberek tmogatsa miatt egyre fonto-

sabb szerepet kap a weboldalak szabvnyos megalkotsa, melynek legfontosabb eszkzeit a jegyzet azalapoktl indulva mutatja be. Egy modern weboldal azonban a felhasznlval, illetve a felhasznlkkztt trtnkommunikci klnbzszintjeit kell biztostsa, amihez szksges a statikus kdnak akiszolgl, illetve az gyfl gpn fut programokkal trtnkiegsztse. A jegyzetben, kizrlag aJava nyelv ismerett felttelezve, az alapoktl indulva mutatjuk be a Java alap kiszolgl oldaliwebprogramozs legalapvetbb feladatait, illetve az gyfl oldali webprogramozs JavaScript nyelvltali lehetsgeit. Klnll fejezetben foglalkozunk a manapsg divatos AJAX kommunikci meg-valstsi lehetsgeivel, melynek tartalma akkor is rthet, ha az olvas Java szervletek helyett mskiszolgl oldali nyelvet (pldul PHP-t) ismer. Vgl betekintst nyernk kt klnbzmegkzel-tst hasznl keretrendszerbe, s rviden szlunk a web design legfontosabb krdseirl. A jegyzet atartalom soksznsge s terjedelmi korltai miatt dokumentcinak nem tekinthet, viszont oktatsitananyagknt ksztse sorn kiemelt szempont volt a legfontosabb mdszerek rendszerezett bemuta-

tsa s a tartalom rthetsge.
http://www.typotex.hu/http://www.typotex.hu/


3/118

Tartalomjegyzk

Elsz......................................................................................................................................... 7

1. Bevezets ............................................................................................................................... 8

2. XHTML s CSS .................................................................................................................... 9

2.1. Alapfogalmak.................................................................................................................. 92.1.1. Mi a HTML, XHTML s CSS?................................................................................92.1.2. Objektumok defincija.......................................................................................... 102.1.3. A CSS nyelvtan alapvetszablyai........................................................................ 112.1.4. A weblap rszei ...................................................................................................... 12

2.1.4.1. A dokumentumtpus meghatrozs ............................................................................. 122.1.4.2. A fejrsz ...................................................................................................................... 132.1.4.3. A trzsrsz................................................................................................................... 15

2.1.5. Stlusok hatskre .................................................................................................. 16

2.1.6. Cmsorok ................................................................................................................172.2. Szveges tartalmak kialaktsa s megjelentse .......................................................... 18

2.2.1. Karakterek s mrtkegysgek............................................................................... 182.2.2. Szvegek tagolsa .................................................................................................. 192.2.3. Szvegekre vonatkoz stlustulajdonsgok............................................................ 19

2.3. Objektumok felptse s megjelentse ....................................................................... 202.3.1. Sznek..................................................................................................................... 202.3.2. Httr...................................................................................................................... 212.3.3. A dobozmodell ....................................................................................................... 212.3.4. Helyzetmegads ..................................................................................................... 22

2.3.5. tfeds, tltszsg s cm.....................................................................................232.3.6. Vonalak .................................................................................................................. 232.3.7. Nyomtats formzsa ............................................................................................. 23

2.4. Hivatkozsok elhelyezse .............................................................................................242.4.1. Webhelyek azonostsa .......................................................................................... 242.4.2. A hivatkozs szintaxisa .......................................................................................... 252.4.3. Hivatkozsok formzsa ........................................................................................25

2.5. Kpek s multimdis tartalmak beillesztse................................................................262.5.1. Kpek beszrsa.....................................................................................................262.5.2. gyfl oldali kptrkpek ltrehozsa ................................................................... 26

2.5.3. Multimdis tartalmak beillesztse ........................................................................ 272.6. Listk............................................................................................................................. 27

2.6.1. Egyszerlistk ....................................................................................................... 272.6.2. Szmozott listk ..................................................................................................... 272.6.3. Meghatrozs listk................................................................................................ 282.6.4. Listk hasznlata menk ksztsre...................................................................... 28

2.7. Szmllk...................................................................................................................... 29

2.8. Tblzatok..................................................................................................................... 302.8.1. Tblzatok felptse..............................................................................................30

2.8.2. Tblzatok formzsa............................................................................................. 31

Holl Csaba, SzTE www.tankonyvtar.hu


4/118

4 ZLETI WEBTECHNOLGIK

2.9. rlapok..........................................................................................................................312.9.1. Az rlapok mkdse............................................................................................. 312.9.2. Egy rtket krmezk.......................................................................................... 322.9.3. Tbb soros szvegmez ......................................................................................... 34

2.9.4. Vlasztlista ...........................................................................................................342.9.5. Elemfelirat..............................................................................................................342.9.6. Mezcsoportosts.................................................................................................. 352.9.7. rlapok formzsa ................................................................................................. 35

2.10. Billentyzettel trtnvezrls megvalstsa ...........................................................352.10.1. Vlts a tabultor billentyvel.............................................................................. 352.10.2. Gyorsbillentyk definilsa.................................................................................. 35

2.11. Keretek ........................................................................................................................ 362.11.1. Feloszt keretek.................................................................................................... 362.11.2. Belskeretek........................................................................................................37

3. gyfloldali webprogramozs...........................................................................................39

3.1. Alapfogalmak................................................................................................................ 39

3.2. A JavaScript nyelvi elemei............................................................................................393.2.1. JavaScript parancsok elhelyezse s futtatsa........................................................393.2.2. Vltozk s konstansok.......................................................................................... 403.2.3. Opertorok..............................................................................................................413.2.4. Vezrlsi szerkezetek ............................................................................................. 413.2.5. Tmbk .................................................................................................................. 423.2.6. Objektumok............................................................................................................ 42

3.2.7. Szablyos kifejezsek............................................................................................. 433.2.8. Elre definilt objektumok..................................................................................... 44

3.3. A W3C dokumentumobjektum-modell (DOM) objektumai s esemnyei................... 453.3.1. Alapvetesemnyek .............................................................................................. 453.3.2. A bngszobjektumai.......................................................................................... 473.3.3. Stik hasznlata...................................................................................................... 493.3.4. A szabvnyostott DOM......................................................................................... 50

3.3.4.1. A DOM fa.................................................................................................................... 503.3.4.2. A szabvnyos DOM esemnykezelse........................................................................ 513.3.4.3. Esemnykezels Internet Explorerben ........................................................................ 52

3.4. Alapvetfeladatok megoldsa ...................................................................................... 523.4.1. A bngszmegllaptsa s kpessgrzkels ................................................... 523.4.2. Objektumok beazonostsa..................................................................................... 523.4.3. Cscspontok ltrehozsa, beillesztse s trlse, tulajdonsgok belltsa ........... 543.4.4. Esemnykezels ..................................................................................................... 553.4.5. rlapok kezelse .................................................................................................... 553.4.6. Objektumok generlsa ..........................................................................................583.4.7. Tevkenysgek vgrehajtsa az oldal betltsekor................................................ 603.4.8. Objektumok mozgatsa ..........................................................................................603.4.9. Az egrre s billentyzetre vonatkoz esemnyek hasznlata............................... 62

4. Java szervletek....................................................................................................................66

4.1. Alapfogalmak................................................................................................................ 66

www.tankonyvtar.hu Holl Csaba, SzTE


5/118

TARTALOMJEGYZK 5

4.2. GET s POST krsek s vlaszok ............................................................................... 67

4.3. Az elsszervlet felptse ............................................................................................. 67

4.4. Az elsszervlet futtatsa............................................................................................... 68

4.5. Szervletek mkdsnek alapjai ................................................................................... 704.5.1. A szervlet pldnyai............................................................................................... 704.5.2. Szinkronizlsi problmk.....................................................................................704.5.3. Szervletek betltse s inicializlsok ................................................................... 724.5.4. Krnyezeti attribtumok ........................................................................................734.5.5. Kiszolgl oldali adatok lekrdezse .....................................................................744.5.6. Az gyfl ltal kldtt adatok lekrdezse ............................................................ 744.5.7. Krsi fejlcek........................................................................................................75

4.6. Informcik kldse......................................................................................................764.6.1. llapotkdok.......................................................................................................... 76

4.6.2. HTTP Fejlcek ....................................................................................................... 774.6.3. Vlasztrzs kldse ................................................................................................ 784.6.4. Stik hasznlata...................................................................................................... 79

4.7. Szervletek kztti egyttmkds ................................................................................ 804.7.1. tirnyts ..............................................................................................................804.7.2. Krseloszt objektum ignylse........................................................................... 814.7.3. Tovbbts ..............................................................................................................814.7.4. Beilleszts............................................................................................................... 82

4.8. Hibakezels ................................................................................................................... 84

4.9. Hitelests...................................................................................................................... 864.9.1. Alapszinthitelests.............................................................................................. 864.9.2. rlap alap hitelests ............................................................................................ 874.9.3. Egyedi hitelests....................................................................................................874.9.4. HTTPS hitelests................................................................................................... 88

4.10. Menetkvets ..............................................................................................................884.10.1. Hitelests hasznlata ........................................................................................... 884.10.2. Rejtett rlapmezk hasznlata.............................................................................. 894.10.3. URL jrars......................................................................................................... 894.10.4. Stik hasznlata.................................................................................................... 894.10.5. A menetkvetsi API ........................................................................................... 90

4.10.5.1. Menetek ltrehozsa s mkdse ............................................................................ 904.10.5.2. Menetek rvnyessge............................................................................................... 92

5. AJAX ...................................................................................................................................94

5.1. Mi az AJAX?................................................................................................................. 94

5.2. Rejtett keretek hasznlata.............................................................................................. 945.2.1. Rejtett keret ltrehozsa .........................................................................................945.2.2. A krs s a hozz tartoz informcik elkldse ................................................. 95

5.2.2.1. Informcik kldse GET mdszerrel......................................................................... 955.2.2.2. Informcik kldse POST mdszerrel....................................................................... 96

5.2.3. A krs szerver oldali feldolgozsa s a vlasz elkldse ..................................... 97

5.2.4. Az eredmny megjelentse ................................................................................... 97



6/118



5.3. XMLHttp krsek hasznlata ........................................................................................975.3.1. Az XHR objektum ltrehozsa s inicializlsa .................................................... 975.3.2. A krs s az ahhoz tartoz informcik elkldse ............................................... 985.3.3. A krs szerver oldali feldolgozsa s a vlasz elkldse ..................................... 98

5.3.4. A vlasz megrkezsnek szlelse s a kvnt tartalom megjelentse................ 985.4. Kpek s stik hasznlata.............................................................................................. 99

5.5. Dinamikus szkriptbetlts ............................................................................................. 99

5.6. Az AJAX hasznlata ................................................................................................... 100

6. JavaServer Pages..............................................................................................................102

6.1. Alapfogalmak.............................................................................................................. 102

6.2. Szkriptelemek.............................................................................................................. 102

6.3. Implicit objektumok .................................................................................................... 103

6.3. Direktvk.................................................................................................................... 103

6.5. Akcielemek................................................................................................................ 103

6.6. Irodalom ...................................................................................................................... 105

7. Keretrendszerek ...............................................................................................................106

7.1. JavaServer Faces ......................................................................................................... 106

7.2. Google Web Toolkit .................................................................................................... 107

8. Web design ........................................................................................................................ 108

Irodalomjegyzk................................................................................................................... 110Trgymutat ......................................................................................................................... 113


7/118

ElszEz a jegyzet a TMOP-4.1.2-08/1/A-2009-0008 sz. Tananyagfejleszts s tartalomfejleszts

klns tekintettel a matematikai, termszettudomnyi, m

szaki s informatikai kpzsekrec. plyzat ([1]) keretben kszlt. A tananyag a plyzat elrsainak megfelelen elssor-ban a gazdasginformatikus MSc szak szmra lett kifejlesztve ([2]).

A jegyzet clja olyan, elssorban gyfl oldali, webes technolgik bemutatsa, melyeksegtik zleti jellegalkalmazsok elksztst. Ha azt az ismeretanyagot tekintjk, amit egyilyen kurzus keretben clszerlenne trgyalni, azt tapasztaljuk, hogy az egyes tmkrl k-ln-kln is tbb szz vagy ezer oldalas knyvek szlettek. Ugyanakkor, a gazdasginforma-tikus BSc Kpzsi s kimeneti kvetelmnyeiben ([3]) nem elrt a webprogramozs elsajt-tsa, ezrt annak rdekben, hogy az rintett hallgatk szmra a jegyzet s a hozz kapcsol-d kurzus rthet legyen, tovbb a hallgatk annak elsajttsa utn rendelkezzenek olyanalapokkal, melyekre rdemes fejlettebb technolgikat pteni, elengedhetetlen a weboldalk-

szts alapoktl indul bemutatsa. A jegyzetnek s a hozz tartoz kurzusnak azonban meg-lehetsen szk terjedelmi korltai vannak, melyek a fenti megfontolsok kvetkeztben ajegyzet tartalmra s szerkezetre vonatkozan az albbi korltozsokat teszik szksgess.

Mivel az rthetsg s a megfelelalapozs rdekben nem kerlhetel az alapvet t-makrk rszletesebb bemutatsa, ezrt nem lehetsges minden tmakr azonos mlysgtrgyalsa. Ily mdon viszonylag rszletesen fogjuk trgyalni azokat a tmakrket, melyek ahasznlt keretrendszerektl fggetlenl alacsonyabb szinten mindig megjelennek ((X)HTML,CSS, JavaScript, AJAX), kevsb rszletesen az AJAX s keretrendszerek megrtshezszksges kiszolgl oldali alaptechnolgikat (szervlet, JSP), majd tmren bemutatunk ktklnbz megkzeltst hasznl keretrendszert (JSF, Google Web Toolkit), s az gyfloldali programozsban nagyon fontos Web design ismeretek legfontosabb szempontjait. Csak

nagyon indokolt esetben helyeznk el teljes mretpldkat, ugyanakkor melegen ajnlhataz olvasnak, hogy a trgyalt lehetsgeket sajt ksztspldk ltal is kiprblja, ugyanisebben a tmban semmi sem helyettestheti a sajt tapasztalatot. A kurzuson rszt vevhall-gatk az elmleti rkhoz kapcsold gyakorlatokon szmos konkrt pldt tanulmnyoznak.

A jegyzet a rszletesebben trgyalt tmakrk esetben sem tekinthetteljes dokument-cinak, a cl inkbb az, hogy a lehetsgeket szemlltessk. A kurzus anyaghoz kapcsoldtovbbi ismereteket az olvas az egyes fejezeteknl megadott irodalmakban tall.

rdemes tisztzni azt is, hogy az egyes fejezetek megrtshez milyen elismeretek szk-sgesek. A HTML-t s CSS-t bemutat fejezet alapvet informatikai (szvegszerkeszts,

bngszk hasznlata) ismereteken kvl semmilyen komolyabb elismeretet nem felttelez, atbbi fejezet felttelezi az elzfejezetek s a Java nyelv illetve fejlesztrendszerek ismerett.Az AJAX-rl szl fejezet akkor is rthetlesz, ha az olvas Java szervletek helyett ms ki-szolgl oldali nyelvet (pldul PHP-t) ismer.

Vgl itt szeretnk ksznetet mondani Dr. Vmossy Zoltnnak a kzirat igen alapos sgondos lektorlsrt, hasznos tancsairt s konstruktv szrevteleirt.



8/118

1. BevezetsAz informcik tovbbtsra mr vszzadokkal ezeltt klnfle mdszereket kidolgoztak.

Kezdetben volt az rott sajt s az zenetek galambok lbain trtntovbbtsa, majd felta-lltk a tvrgpet, rdit, televzit, a szmtgpet s a szmtgpek kztti kommunik-cit. Azonban ezek ltal mg mindig kevesen tudtak zenetet kldeni, vagy viszonylag kevsemberhez tudott eljutni az informci, s nem felttlen azokhoz, akiket rdekelt.

Az elsweboldal 1991. augusztus 6-n kerlt kzzttelre, melyet Sir Timothy John (azaz"Tim") Berners-Lee ([87]) ksztett a CERN munkatrsaknt. Ezt mr, megfelelhardver- sszoftvertmogatssal, fldrajzi korltozsok nlkl, brki megnzhette, akit rdekelt. Azta azinformcik minl szlesebb krben trtnelrhetv ttelnek cljt messze meghaladta aWeb, hiszen manapsg kzssgi csoportok ltestsnek s kommunikcijnak, tudstrakptsnek, informcik keressnek, gyintzseknek s zleti tevkenysgeknek a technikaihttert is biztostja. Mindez azonban gy vlt lehetsgess, hogy az eredeti tletet szmostovbbi fejleszts egsztette ki, melynek eredmnyekppen az oldalakon mr nem csak meg-

jelenteni lehet az informcikat, hanem az oldalakhoz trstott programok segtsgvel a we-boldal kpes kommuniklni a felhasznlval s szmos tevkenysget automatikusan elv-gezni.

Tovbbi informcikat a web fejldsrl az olvas a [17] oldalbl kiindulva tallhat.



9/118

2. XHTML s CSS

2.1. Alapfogalmak2.1.1. Mi a HTML, XHTML s CSS?Az informcik megjelentshez szksg volt egy nyelvre, mely segtsgvel le lehetett rni,hogy mit s hogyan akarunk megjelenteni, tovbb egy programra, mely ezeket a lersokatrtelmezte s megjelentette. A nyelvet elneveztk HTML-nek, a programot pedig bngsz-nek.

A Hyper Text Markup Language (HTML) ([30]) egy lernyelv, mely definilja a tarta-lom struktrjt (pl. cmsor, felsorols, tblzat stb.), melyet a klnbzbngszk, bellt-saiktl fggen is klnbzkppen jelenthetnek meg, tovbb segtsgvel a megjelentstmi is szablyozhatjuk. A lerst sima szveges parancsokkal adhatjuk meg, ugyanakkor a do-

kumentum klnbzrszei kztt, vagy klnbzdokumentumok kztt kapcsolatot lte-sthetnk. A HTML nyelvben lehetsg van internetes szolgltatsok (FTP, levelezprogram)s ms alkalmazsok indtsra szolgl hivatkozsokat is elhelyezni. A HTML dokumentumteht lnyegben strukturl s formz parancsokbl s a megjelentend tartalombl llszveges dokumentum, mely brmilyen szvegszerkesztvel megrhat. Ugyanakkor lteznekHTML szerkesztprogramok is, melyek kdkiemelssel, hibakeresssel, megjelentssel sautomatikus kdgenerlssal segtik a weblapok vizulis ksztst (pldul TextPad, MSFront Page, Macromedia Dreamweaver stb.). Sok ms clbl rt program (pl. Word, Excel,Power Point stb.) is kpes bngszk ltal rtelmezhetkdot kszteni. Figyelni kell azonbanarra, hogy az automatikusan generlt kd sok felesleges elemet tartalmazhat, tovbb olyanspecilis karakterkszletet s formzst definilhat, mely csak bizonyos krlmnyek kztt

teszi lehetv a tartalom megfelelmegjelentst.Az ignyek nvekedsvel a HTML szmos hinyossga is felsznre kerlt. A megvlto-

zott munkakpessgemberek tmogatsra, s a megjelenteszkzk sokflesge mellettaz oldalak elrhetsgnek biztostsra a lerkd hasznlata nem hatkony. Ezrt szks-gess vlt a HTML trsa, melynek eredmnyekppen lehetv vlt a tartalom s a megjele-nts klnvlasztsa olya mdon, hogy a megjelentst gynevezett rangsorolt stluslapokban(Cascading Style Sheets) ([31]) tlthatbban s hatkonyabban szablyozhatjuk.

A HTML msik hinyossga, hogy azt szablyrendszernek kvetkezetlensge s tbbr-telmsge miatt csak specilis feldolgozval (parser) lehet elemezni. Annak rdekben, hogya forrskd ms XML feldolgozkkal egyttmkdjn, s belle modern nyelvekben elfor-dul dokumentum tpus objektum pldny kszthet legyen, megalkottk az XHTML-t

(eXtensible HTML, [40]), ami lnyegben a HTML jrarsa XML alapokon. Ily mdon le-hetv vlik olyan korszerkeretrendszerek hasznlata is, melyek nem tmogatjk a HTMLkzvetlen mdostst. A HTML-hez hasonlan az XHTML fjlban a megjelents is megad-hat, de lehetsg van stluslapok hasznlatra is.

A jelenlegi stabil verzik HTML 4.01, XHTML 1.0, melyek elnyeit magba foglal sazokat kiegszt HTML 5-s vgleges (ajnlott) vltozata 2014-re vrhat ([18]). A CSS

jelenlegi ajnlott vltozata a CSS 2, melynek tovbbfejlesztsre tbb projekt is ltezik ([31]).A tovbbiakban az XHTML 1.0 s CSS 2 szintaxisnak s hasznlatnak legfontosabb

elemeivel fogunk megismerkedni. Az olvas tovbbi informcikat a fejezet alapvetforrsa-knt is szolgl [5], [6], [7], [8], [10], [30], [31]irodalmakban tallhat.



10/118


2.1.2. Objektumok defincijaAzokat a strukturlis egysgeket, melyek egy weblap tartalmt alkotjk, objektumoknak fog-

juk nevezni. Ilyen objektumok lehetnek pldul egy cmsor, egy bekezds vagy egy kp. Azobjektumok tartalmazhatjk egymst, pldul egy tblzatban sorok vannak, a sorokban cel-lk vannak, a cellkban lehet valami tartalom (pldul szveg vagy kp). A legtbb objektumesetn az XHTML kdban meg kell adni, hogy az hol kezddik s hol r vget, ehhez gyne-vezett tag-okathasznlunk. Az angol tagsz magyarul cmkt, jelzt jelent, de elfogadhatmegnevezsknt a legtbbszr magyarul is a tagszt hasznljuk. gy teht az objektumoknakvan egy nyit s zr tagjuk. Ha az objektumok tartalmazzk egymst, akkor fontos, hogy a

begyazott objektum kezds zr tagjval egytt a begyaz objektum kezds zr tagjakztt legyen. Minden tag < s > jelek kztt helyezkedik el. Pldul, ha van 3 olyan objek-tumunk, melyek esetn az 1. objektum tartalmazza a 2. s 3. objektumokat, akkor ezek a k-vetkezkppen adhatk meg:

A kezdtag mindig tartalmazza az objektum tpust s bizonyos esetekben az objektum

egyes tulajdonsgainak megnevezst s rtkt. A zr tag tartalmazza egy / jel utn az ob-jektum tpust. Lssunk egy pldt:

Az XHTML kd rsakor figyelnnk kell arra, hogy az ob-jektum kteleztulajdonsgait adjuk meg, s nefelejtsk el a tagot lezrni.

Itt a pegy bekezdst, az empedig kiemelt fontossg szveget hatroz meg.XHTML-ben az objektum tpust, jellemzit s azok elre definilt rtkeit kisbetvel kellrni. Minden jellemznek egyrtelmen meg kell adni az rtkt s azt idzjelek kztt kellfeltntetni. Abban az esetben, ha a jellemzfeltntetse nmagban is elegendinformcithordoz, azaz logikailag a nv feltntetse rtk nlkl is elegendlenne, a jellemzrtknekannak nevt kell adni. A kvetkezpldban az optionobjektummal egy vlasztsi lehet-sget adunk meg, a selectedjellemzvel pedig azt rjuk el, hogy a csoportba tartoz lehe-tsgek kzl az adott objektum legyen alaprtelmezetten kivlasztva. Nyilvnvalan aselected jellemz jelenlte nmagban elegend lenne, de az XHTML szablyai szerintminden jellemznek rtket kell adni, ezrt az objektum szintaxisa a kvetkezkppen fogkinzni: kijellt vlasztsi lehet-

sg.Az objektumok megjelentse elre definilt smk szerint trtnik. Kt ilyen fontos sma

a blokkszint, illetve asorszint(folyamatos, inline) megjelents. A blokkszintelem megje-lenst dobozszeren kell elkpzelni, tartalma kln sorokban jelenik meg s tartalmazhatms dobozszintvagy sorszintelemeket is. A sorszintelem a szvegen bell folyamatosan

jelenik meg s csak sorszint elemeket tartalmazhat. Megjegyzend, hogy az objektumokalaprtelmezett megjelentsi smja indokolt esetben megvltoztathat.

Az XHTML-ben elre definilt jelentssel br objektumok mellett mi is definilhatunksajt strukturlis egysgeket div s spanobjektumok segtsgvel. Ezek az objektumok a

bngsz szmra nem hordoznak tartalomra vonatkoz informcit, ezrt ezek hasznlata

olyan esetekben ajnlott, amikor az elre definilt objektumok nem alkalmasak a cljainkra.



11/118

2. XHTML S CSS _____ 11

A kettkztti klnbsg a tartalom tpusban, illetve a megjelentsi smban rejlik, ugyanisalaprtelmezsknt a divblokkszint, mg a spanpedig sorszintelemnek szmt.

A fejezet elejn azt mondtuk, hogy a legtbb objektumnak nyit s zr tagja is van. L-teznek azonban olyan objektumok is, melyek nem tartalmazhatnak ms objektumokat, ezrt

esetkben nincs rtelme kt tagot hasznlni. Ilyen esetben elegendlenne a nyit tag feltnte-tse, de XHTML-ben minden tagot le kell zrni, ezrt a nyit tagban ezt is megtesszk a k-vetkezszintaxissal: .Pldul, ha a tartalom adott helyn egy kpet sze-retnnk csatolni, akkor azt a kvetkezkppen tehetjk meg: .

Ahhoz, hogy az objektumokat formzs vagy ms mveletek cljbl azonostani tudjuk,szksg lehet egyedi vagy csoportos azonost hozzrendelsre. Egyedi azonostt az idtulajdonsggal tudunk megadni s szablyosan ms objektum nem rendelkezhet ugyanazzalaz azonostval. Egy objektumhoz csoportos azonostt a classtulajdonsggal tudunk hoz-zrendelni, s ezt akkor szoktuk hasznlni, amikor tbb objektumra kzs feladatot vagy

megjelentst szeretnnk definilni.2.1.3. A CSS nyelvtan alapvetszablyaiAmint mr emltettk, a CSS segtsgvel megjelentsi tulajdonsgokkal lthatjuk el a ler-kdban levobjektumokat. Megadhatjuk pldul a szvegek sznt, bettpust, az objektu-mok httert, szeglyt vagy a weboldalon elfoglalt helyt.

Amikor megjelentsi tulajdonsgokat adunk meg, mindenekeltt meg kell hatroznunk,hogy azok pontosan mely objektumra, vagy objektumok mely csoportjra vonatkoznak. Erreszolglnak CSS-ben az gynevezett kijellk. Minden kijellhz tartozik egy meghatrozs,mely a megjelents lerst tartalmazza.

A meghatrozst mindig {s }jelek kz tesszk. A megjelentst gy tudjuk lerni, hogy

a megfeleltulajdonsgoknak a kvnt rtkeket adjuk. A meghatrozsban a tulajdonsgot :-al vlasztjuk el az rtktl, a tulajdonsg:rtk prokat pedig ;-vel vlasztjuk el egymstl.Az rtket csak akkor tesszk idzjelek kz, ha az tbb szbl ll. Bizonyos esetekben egytulajdonsgnak tbb rtket is megadhatunk, akkor ezeket ,-vel vlasztjuk el egymstl. Pl-dul a kijellt objektumok (jelen esetben a bekezdsek) betcsaldjt s betsznt a kvetke-zkppen adhatjuk meg:p {font-family: Times New Roman, Times, serif; color: blue;}.

Bizonyos esetekben tbb tulajdonsg rtkt rvidebben is megadhatjuk oly mdon, hogycsak a tulajdonsgok rtkeit soroljuk fel, egymstl szkzzel elvlasztva. Pldul, ha bizo-nyos objektumoknak (jelen esetben a kpeknek) 5px vastagsg, vonalkzott, kk sznsze-glyt akarunk adni, akkor kln rtket adhatunk rendre a border-width, border-style, illetve border-colortulajdonsgoknak, vagy mindezek megadhatk egyszerre isa kvetkezkppen:img {border: 5px dashed blue;}.

De hogyan jellhetjk ki a formzni kvnt objektumokat? Erre tbbfle kijellltezik:elemkijell, azonostkijell, osztlykijells sszetett kijell. A megjelentsi tulajdon-sgok elemkijell esetn a dokumentum sszes adott tpus objektumra, osztlykijellesetn az sszes azonos class attribtum rtkkel rendelkez objektumra, mgazonostkijellesetn csak az adott idazonostval rendelkezobjektumra vonatkoznak.sszetett kijellt akkor hasznlunk, amikor a kvnt objektum vagy objektumok csoportjatbb kijellegyttes hasznlatval jellhetki.



12/118


Elemkijellt gy adhatunk meg, hogy egyszeren lerjuk a tpus nevt. Pldul, ha aztszeretnnk, hogy az sszes bekezds zld sznhttrrel s kk sznbetkkel jelenjen meg,akkor ezt a kvetkezkppen rhatjuk:p{background-color:green; color:blue;}.Osztlykijellesetn egy .utn rjuk a kzs classrtket. Pldul ha az sszes kiemeles

classrtkkel rendelkezobjektum tartalmt szeretnnk kk betkkel rni, akkor ezt a k-vetkezkppen tehetjk meg: .kiemeles{color:blue;}. Egy objektum tbb osztly-hoz is tartozhat egyszerre, ebben az esetben a classattribtum rtkeit szkzzel vlasztjukel egymstl. Azonostkijellesetn egy #jel utn rjuk az egyedi azonost rtkt. Pld-ul, ha csak egy fontosazonostval rendelkezobjektum tartalmt szeretnnk kk betkkelrni, akkor azt kell megadnunk, hogy #fontos{color:blue;}.

A classilletve idattribtumok rtke olyan azonost lehet, mely az angol bc bet-it, szmokat s _ jelt tartalmaz s betvel kezddik.

sszetett kijellk esetn a fentieket egytt hasznljuk. Pldul, ha azt akarjuk megadni,hogy egy lablec azonostj szakasz kifejezs osztly bekezdseinek karakterei legyenek

kk sznek, akkor azt rjuk, hogy:#lablec p.kifejezes {color:blue;}.Abban az esetben, ha tbb kijellhz ugyanolyan meghatrozst akarunk rendelni, akkor akijellket ,-vel elvlasztva felsorolhatjuk a kzs meghatrozs eltt. Pldul, ha azt akar-

juk, hogy az sszes bekezds s az sszes kiemelt szveg kk sznlegyen, akkor rhatjuk azt,hogy p, em {color:blue;}. Vigyznunk kell azonban arra, hogy ha a ,-t elhagyjuk,akkor a meghatrozs csak a bekezdsekben levkiemelt szvegrszekre lesz rvnyes.

2.1.4. A weblap rszeiAz (X)HTML dokumentum lersa eltt meg kell adnunk a dokumentumtpus meghatrozst([5]).

2.1.4.1. A dokumentumtpus meghatrozs

A dokumentumtpus meghatrozs (DTD, azaz Document Type Definition) keretben dekla-rljuk, hogy az oldalt a HTML mely vltozatnak szablyrendszernek megfelelen rjukmeg. Azt mondjuk, hogy a HTML kd rvnyes, ha valban a kivlasztott DTD szablyrend-szernek megfelelen van megrva, s elvileg ez kellene biztostsa, hogy a tartalom minden

bngszben ugyangy jelenjen meg. Sajnos mg nem minden bngsztmogatja teljes eg-szben a szabvnyokat, ezrt az egyforma megjelens nem teljesen mkdik. A HTML kdrvnyessgnek ellenrzse alapveten a http://validator.w3.org/cmen lehetsges. Az rv-nyessg ellenrzsre bizonyos HTML szerkesztprogramok, illetve bngsz-kiegsztk iskpesek. Pldul egy Mozilla Firefoxban telepthetilyen kiegsztletlthetahttps://addons.mozilla.org/hu/firefox/addon/249cmrl HTML Validator nven.

Az XHTML dokumentumokhoz hromfle dokumentumtpus meghatrozs tartozhat: szi-gor, tmeneti s keretkszletes.

Szigor dokumentumtpus meghatrozs esetn csak szerkezeti felptsre vonatkoz ta-gokat s jellemzket hasznlhatunk. Az XHTML 1.0 vltozatt hasznl szigor dokumen-tumtpus meghatrozs a kvetkezkppen adhat meg:

tmeneti dokumentumtpus meghatrozs esetn az XHTML kdban hasznlhatk egyesnem szabvnyos, megjelentst bellt elemek s jellemzk is. Pldul hasznlhat, de el-

http://validator.w3.org/https://addons.mozilla.org/hu/firefox/addon/249https://addons.mozilla.org/hu/firefox/addon/249http://validator.w3.org/


13/118

2. XHTML S CSS _____ 13

avult elemnek szmt a szveg igaztst szablyoz align jellemz, melyet CSS-ben ismegadhatunk a text-align tulajdonsg segtsgvel. Elfordulnak olyan helyzetek is,amikor az tmeneti szabvnyban elfogadott jellemzk szigor szabvny szerint elfogadhatCSS-el trtnkivltsa sokkal bonyolultabb, ugyanakkor rdemes mrlegelni, hogy a nem

szigor szabvny szerinti megoldsok jvbeli mkdse bizonytalan. Az tmeneti dokumen-tumtpus meghatrozs megadsnak szintaxisa:A keretkszletes dokumentumtpus meghatrozst kereteket tartalmaz weblapokhoz

hasznljk, s a kvetkezkppen lehet megadni:

A kereteket ksbb fogjuk rszletesen trgyalni.XHTML dokumentumok esetn a W3C javasolja, hogy adjuk meg az XML meghatrozst

s nvteret a kvetkezkppen. Az XML meghatrozsmg az XML nvtr megadsa:.

A dokumentumtpus meghatrozs utn kvetkezhet a dokumentum, melyet, stagok kztt fogunk lerni, s mely kt frszbl ll: fejrsz s trzsrsz.

2.1.4.2. A fejrsz

A fejrsz a s tagok kztt adhat meg s a weboldallal kapcsolatos metaadatok megadsra szolgl. A meta adat adatra vonatkoz adat.

Jelen esetben a weboldalon megjelentendadatokra vonatkoz meta adatok lehetnek pl-

dul a hasznland karakterkszlet, a weboldal cme, szerzje, a tartalom kulcsszavai, illetvea hasznland CSS stluslapok. A meta adatokat a keresprogramok is hasznljk az indexe-ls s katalogizls sorn. A fejrszben csatolhatunk az oldalhoz programkdokat is.

A weblap ablaknak cmt a s tagok kz lehet berni, s az ablakvagy a lap tetejn fog megjelenni, tovbb ezt a cmet menti alaprtelmezsknt a bngszis, amikor a felhasznl felveszi a lapot a kedvencei kz. Lehetsg van a cm eltt, illetve acmsorban egy specilis kpet, gynevezettfavikont(favorite icon) megjelenteni ([32]). Ilyenfavikonokat s cmeket lthatunk az 1. brn.

1. bra: Cmek s favikonok

A kp 16x16-os (ajnlott), vagy 32x32-es 8 vagy 24 bites sznezspng, gif vagy ico kpkell legyen, melynek W3C szabvnyos beillesztse:A profile fjlt azrt adjuk meg, mert abban van lerva, hogy mit jelent a reljellemziconrtke. Ahhoz, hogy minden bngsz jl megjelentse, hasznos lehet csatolni rel =



14/118


"shortcut icon"rtkkel is. Ha ico fjlunk van, akkor type = "image/x-icon"-tkell megadnunk.

Bizonyos meta adatok megadsra meta objektumokat hasznlunk, melyek szintaxisa eltra tbbi objektumtl. A metatag name, illetve contentjellemzivel egy tulajdonsg ne-

vt, illetve annak rtkt adhatjuk meg. A metatagnak ms jellemzi is lehetnek. Pldul azoldal szerzjt, kulcsszavait s azoknak nyelvt a kvetkezkppen rhatjuk le:A namejellemzhelyett hasznlhat a http-equiv ([33], [34]) olyan informcik meg-adsra, melyeket a szerver fejlc informciknt tovbbthat. A fejlc informcikkal ksbbrszletesen fogunk foglalkozni, de addig is lssunk kt pldt a http-equivgyakori hasz-nlatra. A tartalom tpust s karakterkszlett a kvetkezkppen rhatjuk le:Ha pedig egy lejrati idpontot akarunk megadni a dokumentumnak, mely utn azt a bng-szakkor is jra letlti, ha a cache-ben megtallhat, akkor azt gy rjuk:Ha azt akarjuk, hogy a dokumentum mindig jbl letltdjn, akkor mltbeli idpontot kell

belltanunk.A fejrszben csatolhatunk a weblaphoz egy klsCSS stlusfjlt (melynek szoksos kiter-

jesztse css), vagy begyazhatunk csak az adott weboldalra vonatkoz stlusinformcikatis. A klsstluslap csatolsa a fejrszben a cmobjektum utn kell legyen, s a kvetkez-kppen lehetsges:

ahol a [s ]jeleket nem kell kirni, azok csak a kzttk levtartalom opcionlis jellegtjellik.

Begyazott stlusokat akkor szoktunk hasznlni, ha csak azon az oldalon a klsstluslap-hoz kpest kisebb vltoztatsokat szeretnnk. Ezeket a kls stluslap csatolsok utns kz rjuk. Ha elkpzelhetnek tartjuk,hogy az oldalt olyan bngszvel is fogjk nzni, mely nem ismeri a CSS-t, akkor a megjele-nts szablyozst a -on bell HTML megjegyzsek kz tehetjkazzal a cllal, hogy a bngszne vegye figyelembe az ltala rtelmezhetetlen parancsokat. A

CSS-t ismerbngszk azonban figyelembe veszik a HTML megjegyzsek kztt levst-lusmegadsokat is, ezrt amit CSS-ben akarunk megjegyzsbe tenni, azt /*s */kz kellrnunk.

Egy klsstluslapba, vagy a begyazott styletagba egy msik stluslapot is be tudunkolvastatni az @import url([elrsi t/]stilus.css);paranccsal, melynek a stlus-megadsok eltt kell szerepelnie.

A kls stlusfjlok hasznlatnak tbb elnye is van. A tartalomfjlok s a stlusfjloksok esetben klnbzszemlyek ltal prhuzamosan kszthetk, ezrt gyorsulhat a fejlesz-ts. Ha egy stlusfjlt tbb weboldalhoz csatolunk, akkor abban egyetlen mdostssal az sz-szes csatolt weboldal kinzett megvltoztathatjuk. Mivel ugyanazokat a megjelentst szab-

lyoz parancsokat nem kell minden XHTML fjlban ismtelten lerni, gy azok mrete kisebb,



15/118

2. XHTML S CSS _____ 15

tartalmuk tlthatbb lesz s gyorsabban letltdik. Bizonyos forrsok szerint a keresprog-ramok is relevnsabbnak tekintik a forrsfjlban hamarabb elfordul tartalmat, ezrt is jobb,ha abban minl kevesebb ms jelleg tartalom (formzs, programkd) tallhat. Msfell,egyetlen tartalmat ler fjlhoz tbb megjelentst szablyoz fjl is trsthat, ami akkor le-

het elnys, ha ugyanazt a tartalmat klnbzhelyzetekben mskpp szeretnnk megjelen-teni. Pldul, a , illetve az @importesetben is hasznlhat egy mediajellemz,melynek rtkeknt megadhatjuk, hogy az adott stluslapot milyen eszkzk esetn hasznlja.A media jellemznek sok lehetsges rtke van, melyek kzl csak nhny fontosabbakatsorolunk fel: all (minden eszkz), aural (hangeszkzk), handheld (kzi eszkzk),print(nyomtat), projection(kivett), screen(kperny). Sajnos a korszerbng-szk sem tudnak minden rtket kezelni, de az all, print, projectionrtkek tbbnyi-re hasznlhatk.

2.1.4.3. A trzsrsz

A trzsrsz a megjelentendtartalmat s annak strukturlis lerst tartalmazza. Ilyen struk-turlis egysgek lehetnek pldul a cmsorok, bekezdsek, tblzatok, felsorolsok, kpek

vagy rlapelemek.A trzsrsz tartalma s kztt helyezkedik el. Megjelentsi tulajdon-

sgok megadhatk a teljes trzsrszre, illetve az egyes strukturlis elemekre vonatkozan is.Az XHTML fjlok standard kiterjesztsei htm vagy html.Az eddigi ismereteink birtokban ksztsk el elsweboldalunkat. Az XHTML fjl, me-

lyet a ksbbi egyrtelmhivatkozsok rdekben ux1.html nven mentnk el, a kvetkez-ket fogja tartalmazni:

XHTML, CSS 1. plda

Ez az elskp Lindrl:

Nemsokra el fogjuk kszteni a kdban hozz csatolt, de mg nem ltezux1.css stlus-fjlt is. Addig azonban, ha az oldalt klnbzbngszkben megnyitjuk, akkor ltni fogjuk,

hogy az a bngszkbe beptett alaprtelmezett formzsokkal hogyan jelenik meg.



16/118


Ugyan a html, heads titleobjektumokat a bngszakkor is ltrehozza, ha nemszerepelnek a kdban, a szabvnyos lersban ezek feltntetse is ktelez.

2.1.5. Stlusok hatskre

A bngszk rendelkeznek alaprtelmezett stlusokkal, melyek meghatrozzk, hogy az egyesobjektumok hogyan jelenjenek meg akkor, ha nem szablyozzuk azok megjelentst. Pldulilyen alaprtelmezsek a fehr sznhttr, fekete sznbetk, alhzott kk sznlinkek stb.Ugyanakkor a felhasznlnak is van lehetsge a bngszben belltani nhny tulajdons-got (pldul a bettpust, vagy a httrkp nyomtatst), illetve tbbnyire sajt stluslapot ismegadhat.

Az elz fejezetben kiderlt, hogy a weboldal ksztjeknt stlusokat megadhatunk azXHTML fjlhoz csatolt kln CSS fjlban, illetve a fejrszbe begyazva. Tovbbi stlusin-formcik adhatk meg az egyes objektumok nyit tagjban is a stylejellemzrtkeknt.Ezeket nevezzk szvegkzi stlusoknak, s csak arra az objektumra lesznek rvnyesek,melynek nyit tagjban szerepelnek. Pldul:

Csak ez a bekezds kk.
A bngszaz oldal tartalmt fentrl lefele olvassa be. Ha kzben klsfjlcsatolst tall,
akkor annak a tartalmt azon a ponton beolvassa, majd folytatja a weboldal beolvasst fent-rl lefele. Ily mdon egyszer a klsstluslapok, majd a begyazott stlusinformcik, vglaz objektumok nyit tagjban elhelyezett stlus meghatrozsok olvasdnak be. Egymsnakellentmond stlusinformcik esetn az utoljra beolvasott lesz rvnyes. gy lehet a fejrsz-

ben fellrni a kzs klsstlusfjlban foglaltakat, illetve az objektumok nyit tagjban csakarra az objektumra vonatkozan mdostani az egsz weboldalra megadott megjelentsi jel-lemzket.

Tudjuk, hogy az objektumok tbbsgt egymsba gyazhatjuk. A begyazott objektumokrklhetik a begyaz objektum formzsait, tbb szintbegyazs esetn is. Pldul, haegy bekezdsben van egy kiemelt szvegrsz, akkor arra nem csak a sajt stlusmegadsa le-het rvnyes, hanem a bekezdsre megadott formzs is. Azonban az rkls nem mindigtrtnik meg. Egyrszt, vannak olyan tulajdonsgok, melyek nem rkldnek (pldul a mar-g vagy a szegly). Msrszt, egy objektum megjelentsi tulajdonsgokat kaphat a begyazobjektumokon kvl az egyedi, osztly-, illetve sszetett kijellk segtsgvel megadott stlusmeghatrozsok ltal is, melyek kztt ellentmonds llhat fenn. Ksztsk el pldul azux1.html fjlhoz csatolt ux1.cssstlusfjlt az albbi tartalommal:body {background-color:blue; color:green;}#linda {background-color:green; color:black;}p {color:red;}

.kepek {color:blue;}#elso {color:white;}A bekezds betsznnek rkls alapjn feketnek, elemkijell alapjn pirosnak, osz-

tlyazonost alapjn kknek, azonostkijell alapjn pedig fehrnek kellene lennie. Ho-gyan fog megjelenni? A szably az, hogy mindig az adott objektumra legjellemzbb stlus-megads lesz rvnyes. Ebben a pldban, amint azt a 2. brn is lthatjuk, a bekezds szve-ge fehr szn lesz, mivel az rklt, elemkijellvel, illetve osztlyazonostval megadotttulajdonsgok sok ms objektumra is rvnyesek lehetnek, de az azonost kijellvel kifeje-zetten erre a bekezdsre vonatkoz megjelentst adtunk meg.



17/118

2. XHTML S CSS _____ 17

2. bra: ux1.html

Mi trtnne a fenti pldban, ha nem lenne egyedi azonost alapjn trtn formzsmegadva (azaz trljk az #elso {color:white;} formzst)? Az rklsben, azelemkijellvel vagy az osztlykijellvel megadott formzs szmt jellemzbbnek? Ilyen-kor az osztlykijelllesz a legspecifikusabb, ugyanis nyilvn azrt rendeltk az objektumotaz adott csoporthoz, hogy az azokra megadott megjelents legyen r is rvnyes, mg az oldalkorrekt strukturlis felptst nem tehetjk fggv a megjelentstl. De mi trtnik akkor,

ha sem egyedi, sem osztlykijell nincs megadva, azaz trljk a .kepek{color:blue;}formzst is? Akkor az elemkijelllesz rvnyes, ugyanis az adott ob-

jektumra nzve jellemzbb, hogy az objektum milyen tpus, mint az, hogy milyen msikobjektumban van benne. sszetett kijellk esetn ltszlag bonyolultabb helyzetek is elll-hatnak, de ezek a szempontok mindig egyrtelmen meghatrozzk, hogy egymsnak ellent-mond esetekben melyik stlus megads lesz rvnyes. Az ux1.html-ben pldul a bekez-ds benne van a linda egyedi azonostval rendelkezdiv-ben, a bekezdsben mgsemrvnyesl a #lindaazonost kijellre megadott betszn, mert a benne levbekezdsreaz rklsnl specifikusabb meghatrozsok is adva vannak. Amikor nincs ellentmonds,akkor viszont az egyes stlus megadsok mind rvnyess vlnak. Pldul a bekezds a

linda azonostval rendelkezdiv zld httrsznt rkli, mert az nincs specifikusabbkijellvel felldefinilva.

A megjelentsi tulajdonsgok megadsakor rdemes figyelembe venni azt is, hogy a sz-zalkban megadott rtkek a korbbi belltsok alapjn rtkeldnek ki. Vgl megemlten-d, hogy sok esetben a CSS hierarchijt gy ptjk fel, hogy a klsCSS nmagban is ptaz elfedsre.

2.1.6. CmsorokA cmsorok a fejezetek s alfejezetek cmnek megadsra szolglnak s nem keverendk adokumentum titletagjban megadott cmvel. A cmsorok tagoljk a weblapon megjelenszveget, tartalmukat pedig sok esetben a keresprogramok is hasznljk az indexels s kata-

logizls sorn.A cmsoroknak hat szintjt klnbztetjk meg, melyeket fontossguk cskkensorrend-jben a h1, h2, , h6 tagokkal jellnk. Elrs szerint egy oldalon legfeljebb egy darablegfelsszint(azaz h1-es) cmsor lehet. Mint minden beptett HTML objektumnak, a cm-soroknak is van a bngszkbe beptett alaprtelmezett megjelentsi stlusuk: blokkszintelemeknek szmtanak, ltalban flkvr, s a fontossg cskkensvel egyre kisebb mretkarakterekkel jelennek meg, de CSS segtsgvel termszetesen ezt megvltoztathatjuk.

Fontos megjegyezni, hogy a strukturlis egysgek azrt lettek kialaktva, hogy adott hely-zetekben a bngsz, vagy az ahhoz trstott (pldul felolvas) program azonostani tudjaket s megfelelen tudja ket kezelni. Az oldalak elrhetsgnek biztostsa rdekben nemajnlott (CSS-sel is megvalsthat) formzs rdekben tartalmilag nem megfelelstruktur-

lis egysgnek deklarlni valamilyen tartalmat (pldul csak vastagts rdekben cmsorknt



18/118


megadni nem cm jelleg szveget), vagy fordtva, strukturlis egysg megadsa helyett atartalmat csak ahhoz hasonlan formzni.

2.2. Szveges tartalmak kialaktsa s megjelentse2.2.1. Karakterek s mrtkegysgekA karakterek meghatrozsnl meg kell adnunk a hasznlt karakterkdolst, a bettpust(mely a karakterek megjelentst hatrozza meg) s a megjelentendkarakter nevt vagykdjt.

A2.1.4.2.fejezetben lttuk, hogy a karakterkdolst ([35], [36], [37]) a fejrszben adjukmeg a kvetkezkppen:A magyar nyelvben leggyakrabban hasznlt karakterkdolsok a Latin-2 (kzp-eurpai,ISO/IEC 8859-2), illetve az UTF-8.

A bettpus stlustulajdonsg ([38]), mely a font-familykijellsegtsgvel adhatmeg. A font-family nhny lehetsges rtke: Verdana, Arial, Georgia,Courier, Courier New, Times New Roman. Nem bzhatunk abban, hogy a felhaszn-l gpn az ltalunk hasznlni kvnt betcsald teleptve van, s abban sem, hogy a felhasz-nl csak a mi kedvnkrt azt majd telepteni fogja, ezrt ajnlott tbbfle betcsald felsoro-lsa.

A betk mrete a font-sizekijellvel adhat meg. A mretet megadhatjuk pontban,pixelben, szzalkrtkben, em-egysgben, em-egysgben, vagy az albbi rtkek valamelyi-kvel: xx-small, x-small, small, medium, large, x-large, xx-large,smaller, larger. Kpernyn val megjelentshez nem ajnlott a mret pontban trtn

megadsa, mert nem egyrtelm, hogy egy pontnak hny pixelt fog megfeleltetni. Hasonlan,az elre definilt mretnevek rtelmezse is bngszfgg lehet. Ugyanakkor a pixelbenval mret megads sem ajnlott, mert elvileg nem teszi lehetv gyengn ltk szmra a

betk mretnek nvelst. A bngszk ebben az esetben is biztosthatjk a betmret nve-lsnek lehetsgt, de ez nem vrhat el tlk. Az em-egysg az adott bettpusban az Mbetmagassgt, az ex-egysg pedig az xbetmagassgt jelli. A bngszk az x mrett tbb-nyire az emfelnek veszik. Ezen mrtkegysgek segtsgvel ms objektumok is mretezhe-tk a felhasznl ltal belltott betmrethez viszonytva. A szzalkrtk szmtsa a szve-get begyaz szlelem betmrete alapjn trtnik. A fentiek miatt a betmret belltsnlajnlott az em-egysg vagy szzalkrtk hasznlata. Tovbb figyelni kell arra, hogy a be-tmret nvelsekor is a teljes szveg lthat maradjon.

A betk stlusa a font-stylekijellvel adhat meg s lehetsges rtkei: italic,oblique, normal, melyek dlt, ferde, vagy norml megjelentst rnak el.

Kiskapitlis betket a font-variant (betvltozat) kijellsmall-caps rtkvelkaphatunk. Ez azt jelenti, hogy a kis betk is a nagy betkkel azonos alakak lesznek, csakvalamivel kisebb mretben.

A betvastagsgot a font-weight, kijellvel lehet megadni. Tbb lehetsges rtkevan, melyekkel azonban nem minden bettpus rendelkezik, a leggyakrabban hasznlt rtkeka normals a bold.

A fenti stlusok rtkei megadhatk egyms utn felsorolva a fontkijellrtkeknt isaz albbi sorrendben: betvltozat, betstlus, betvastagsg, betmret, betcsald. Ajnlott

legalbb a betmret s betcsald megadsa.



19/118

2. XHTML S CSS _____ 19

A tagol karaktereknek (sorvg, tabultor, szkz) alaprtelmezs szerint nincs hatsuk aszveg elrendezsre, ugyanis a bngsz egyetlen szkzzel helyettesti ket, s tovbbi

parancsok hinyban a szveget a bngszakkor trdeli j sorba, amikor az ablakban a sorvgre r. Pldul, nagyobb betmret esetn, egy sor kevesebb karaktert fog tartalmazni.

Specilis karakterek megadsra gynevezett karakterentitsokat([39]) hasznlunk. Ezekkaraktereknek megfelelHTML kdok vagy hexadecimlis rtkek, melyekkel kezetes ka-raktereket is rhatunk, illetve tagol karakterek hatst is kivlthatjuk. Pldul a szkz karak-tert az vagy karakterentitssal rathatjuk ki, akr tbbet is egyms utn,ebben az esetben a bngsznem fogja sszevonni ket. Egy msik pldaknt emlthetjk a jeleket, melyek XHTML-ben a tagokat hatroljk, ezrt ha ilyen jeleket ki akarunk ratni,akkor helyettk az karakterentitsokat kellhasznlnunk.

2.2.2. Szvegek tagolsaEddig megismerkedtnk a bekezdsekkel, illetve a szvegek tagolsra is alkalmas div s

spanobjektumokkal. Szmos tovbbi beptett objektum ltezik, melyekkel specilis jellegszvegtartalmakat hatrozhatunk meg, ezek kzl fogunk megnzni nhny fontosabbat.Megjegyzend, hogy a felsoroltak mindegyiknek tartalma a kezds zr tagok kztt he-lyezkedik el.

Rvidtst az abbrtaggal tudunk megadni, ugyanakkor illik valahogyan azt is hozzren-delni, hogy mit rvidt. Ehhez tbbnyire a titletulajdonsgot szoktuk hasznlni, de figyel-ni kell arra, hogy az nyomtatsban nem fog megjelenni, teht ott ms megoldst kell keresni.A cite taggal ms informciforrst lehet megjellni, mg blockquote-vel idzetet tu-dunk megadni. Mr emltsre kerlt, hogy egy szvegrsz fontossgnak kihangslyozsraaz em tagot hasznljuk, melynek semmi kze nincs az em mrtkegysghez. Lehetsges

ugyanakkor bizonyos szvegrszek mg ersebb kihangslyozsa a strongtaggal. Felssals indexet sup, illetve subobjektumokknt adhatunk meg. Szmtgpes kdokat codeobjektumknt, billentyzetrl beviendutastsokat kbdobjektumknt lehet megadni. Vglmeg kell emltennk a pretagot is, melynek hasznlata bizonyos helyzetekben nagyon k-nyelmes, mert megtartja az eredeti dokumentum szerinti szkzket s sortrseket. Hasznl-hat pldul ASCII karakterekkel ellltott kpekhez vagy egyszertblzatok kialaktsra,ugyanakkor vitathat, hogy ez mennyire tekinthetstrukturlis egysgnek. Ltni fogjuk a to-vbbiakban, hogy a tagol karakterek figyelembevtelnek szablyozsa CSS-ben is lehets-ges.

2.2.3. Szvegekre vonatkoz stlustulajdonsgok

Szveg balra, jobbra, illetve kzpre igaztst a text-aligntulajdonsg left, rightscenterrtkeivel lehet elrni.

Ha azt szeretnnk, hogy egy szvegrsz alhzott, flhzott, thzott vagy villog le-gyen, akkor a text-decoration stlustulajdonsgot kell hasznlnunk az underline,overline, line-through, illetve blinkrtkekkel, melyek kzl tbb is megadhategyszerre.

Lehetsg van a forrskdban elhelyezett szveg betit a megjelentsben nagybetsre,kisbetsre, illetve szavanknt nagy kezdbetsre alaktani a text-transformtulajdonsguppercase, lowercase, capitalize rtkeivel. Az utbbi esetben megjegyzend,hogy a szavak tovbbi beti vltozatlanul jelennek meg s bngszfgg lehet, hogy mit

tekint egy sznak.



20/118


A karakterek kztti tvolsgot a letter-spacingtulajdonsggal lehet lltani. Nega-tv rtk megadsa esetn a karakterek kzelebb kerlnek egymshoz.

A sor magassga adja meg, hogy az egyes sorok milyen tvolsgra legyenek egymstl.Alaprtelmezett rtke a karakterek mrettl fgg, rtke a line-heightkijellvel llt-

hat be s szablyosan csak pozitv rtk lehet.A bekezdsek elssornak behzsnak mrtkt a text-indenttulajdonsggal adhat-

juk meg, mely negatv rtk esetn behzs helyett kilgst fog eredmnyezni.A tagol karakterek figyelembevtelnek szablyozsra a white-space jellemz

hasznlhat, melynek normalrtke esetn az alaprtelmezst kapjuk, azaz a megjelentssorn az egyms utni tagol karakterek egyetlen szkzz lesznek sszevonva s a sortrskifejezetten ilyen parancsot kivlt (pldul blokkszint) objektum hinyban akkor lesz,amikor a tartalom mr lthat mdon nem fr el az adott sorban. A tulajdonsg nowraprt-ke esetn a bngszaz ablak szln sem fogja automatikusan megtrni a sorokat, viszontszksg esetn megjelent egy grgetsvot. Sortrst brhol kivlthatunk a
taggal

is. Msfell, ha a white-spacetulajdonsgnak a prertket adjuk, akkor a tagol karak-terek mind figyelembe lesznek vve. Kztes megoldsknt a pre-wrap rtkkel azt lehet

elrni, hogy vegye figyelembe a tagol karaktereket, de automatikus sortrst is alkalmaz-zon, mg a pre-linertk esetn megrizze a sortrst, egybknt az alaprtelmezs sze-rint jrjon el. Sajnos ezeket a lehetsgeket (jellemzen az utols kettt) a bngszk jelenlegmg nem mind ismerik, ezrt alkalmazsuk eltt rdemes kiprblni ket a megclzott bng-szkben.

2.3. Objektumok felptse s megjelentse2.3.1. Sznek

Szneket tbbfle objektumnak megadhatunk, ltalban a color jellemzrtkeknt. Szntkaphatnak pldul a karakterek, vonalak, st mg a httr is, azonban a szn meghatrozsaminden esetben ugyangy trtnik. A sznek additv sznkeverssel jnnek ltre a piros, zlds kk sznek intenzitsnak megadsval, ezt nevezzk RGB kdolsnak ([43]).

A legelterjedtebb mdszer szerint a hrom alapszn intenzitst ktjegyhexadecimlisszmokkal adjuk meg ([44]), ily mdon egy szn kdja #r1r2g1g2b1b2, ahol r1r2 a piros, g1g2 azld s b1b2a kk szn intenzitst adja meg. Pldul a #FF0000a piros, a #00FF00a zld,a #0000FFa kk, a #000000a fekete s a #FFFFFFa fehr szneket hatrozzk meg. Ilymdon 256 * 256 * 256 = 16.777.216 sznrnyalatot kaphatunk. Abban az esetben, ha r1=r2=r, g1= g2=g, s b1= b2=b, akkor rvidtve is rhat: #rgb formban. Pldul a #A0Cjelent-

se #AA00CC.A 00, 33, 66, 99, CC, FFkarakter prok kombinciibl ellltott sszesen 216 szntwebtr szneknek nevezzk, mely ezek elvileg minden eszkzn s opercis rendszerenmajdnem azonos rnyalatban kellene megjelenjenek.

Az alapsznek intenzitst, ugyanilyen sorrendben, szzalkban, vagy 0 s 255 kzttiegsz szmknt is megadhatjuk az rgb(100%, 100%, 100%), illetve rgb(255, 255,255)formban.

Vgl 16 sznt angol nyelvnevkkel is megadhatunk: white (fehr), black(fekete),red (piros), green (zld), blue (kk), gray (szrke), silver (ezstszrke), yellow(srga), purple(lila), aqua(akvamarinkk), navy(mlykk), teal(pvakk), fuchsia(mlyvaszn), maroon(gesztenyebarna), lime(vilgoszld), olive(olajzld).



21/118

2. XHTML S CSS _____ 21

2.3.2. HttrAz objektumoknak a background-color tulajdonsg rtkeknt httrsznt, abackground-image: url(kpnv)stlusmegadssal pedig httrkpet adhatunk meg,ahol a kpnv a httrknt hasznlni kvnt kp elrsi tja. Httrkp esetn abackground-position tulajdonsggal megadhatjuk annak elhelyezkedst, melynekrtke a szoksos mrtkegysgekkel megadottakon kvl lehet top (fell), bottom(alul),center(kzpen), left(balra), right(jobbra).

A background-attachment tulajdonsg alaprtelmezett scrollrtkvel azt ad-hatjuk meg, hogy a tartalom grdtsnl a httrkp is grdljn, mg a fixedrtk esetnaz a tartalom grdtse esetn sem mozdul el.

A background-repeattulajdonsggal tudjuk szablyozni, hogy a httrkp mozaik-szeren ismtldjn-e: no-repeatrtk esetn nem ismtldik, repeat-xesetn vzszin-tesen, repeat-y esetn fgglegesen, mg az alaprtelmezett repeat esetn mindktirnyban ismtldik.

2.3.3. A dobozmodellA dobozmodell ([45], [46]) egy vizulis formzsi modell, mely a W3C elrsait tartalmazzaa dokumentumban elhelyezett elemek megjelensre. Ennek rtelmben a trzsrszben elhe-lyezett minden objektum egy tglalap alak terleten jelenik meg, melynek kialaktst do-

bozmodellnek nevezzk. A tglalapban legbell helyezkedik a tartalom, melyet krbeveszrendre a bels marg (kitlts, padding), a szegly (border) s a (kls) marg(margin). A tartalmat krlvev minden elem tulajdonsgait megadhatjuk mind a ngyirnyban egyszerre, vagy kln-kln, ezek rtkeit az ramutat jrsval egyezirnybanfelsorolva: fell (top), jobbrl (right), alul (bottom) s balrl (left). A mretet mind-

egyikre a szoksos mrtkegysgekkel adhatjuk meg. Szzalkos megads esetn azt a doku-mentum teljes szlessghez, illetve magassghoz viszonytva szmolja. A belsmarg ht-tere a tartalom httere lesz, a klsmarg pedig mindig tltsz. A belsmargt a tartalomszeglytl val eltvoltsra, a kls margt pedig a szomszdos elemektl val tvolsgszablyozsra szoktuk hasznlni.

A szeglyeknek a mretn kvl megadhatjuk a sznt s stlust, melynek megjelentsebngszfgg lehet. Szegly stlusok: dotted (pontozott), dashed (szaggatott), solid(folytonos vonal), double (dupla vonal), groove (barzda, bemlytett), ridge (perem,kidomborod), inset(sllyesztett), outset(kiemelked). Pldul a valamiazonostvalrendelkezobjektumot a kvetkezkppen formzhatjuk:#valami{ background-color: #fff; margin: 3em 10% 1em 30%;

padding: 1em; border-top: 30px groove #f00; border-right:30px inset #00f; border-bottom: 30px ridge #f00; border-left:30px outset #00f; }

Ebben az esetben a belsmarg minden irnyban 1emnagysg lesz, a klsmarg fell3em, jobbrl 10%, alul 1em, balrl 30% lesz, tovbb a szegly egyes irnyainak sznt, st-lust s mrett kln-kln megadtuk.

A blokkszintobjektumok tartalmra vonatkozan megadhatjuk annak szlessgt s ma-gassgt a widths heighttulajdonsgokkal. Szzalkos rtk esetn azt a begyaz ob-

jektumhoz viszonytva szmolja. A sorkzi objektumok mrett a tartalmuk hatrozza meg.Szabvny szerint a teljes objektum mrete a fentiek sszegeknt kaphat meg. Megjegy-

zendugyanakkor, hogy az Internet Explorer 8-nl korbbi verzii a tartalom mretbe a bel-smargt s a szeglyt is beleszmoltk.



22/118


2.3.4. HelyzetmegadsHelyzetmegadssal az objektumok weboldalon elfoglalt pozcijt hatrozzuk meg. A hely-zetmegads mdja lehet abszolt, viszonytott, rgztett vagy statikus. Tegyk fel, hogy vanegy id=nev-el azonostott objektumunk, melyet szeretnnk elhelyezni.

Abszolt helyzetmegads esetn az elhelyezendobjektumot kzvetlenl begyaz objek-tum bal felssarkt tekintjk a koordintarendszer kiindul pontjnak, azaz (0,0) pozcinak,s azt adjuk meg, hogy az elhelyezendobjektum ahhoz kpest lefele, illetve jobbra milyentvolsgra helyezkedjen el. Negatv rtk esetn a begyaz objektum bal felssarkhoz k-

pest balra, illetve felfele pozcionlunk. Pldul, ha a nevobjektumot az t begyaz objek-tum bal felssarkhoz kpest 20 pixellel lejjebb s 30 pixellel jobbra akarjuk elhelyezni, ak-kor ezt a kvetkezkppen rjuk:#nev {position: absolute; top:20px; left: 30px;}

A rgztett helyzetmegads a teljes weboldal bal felssarkhoz viszonytva helyezi el azobjektumot a krt pozciba gy, hogy az oldal grdtsnl sem fog elmozdulni. Az Internet

Explorer 7-nl korbbi verziiban ez nem m

kdik. A rgztett helyzetmegads szintaxisa:#nev {position: fixed; top:20px; left: 30px;}Az abszolt s rgztett helyzetmegadsok az elhelyezett objektumot kiveszik a norml

szvegfolyambl, gy annak helyt a norml szvegfolyamban marad tovbbi tartalom fog-lalja el.

A viszonytott helyzetmegads az elhelyezett elemet a norml szvegfolyami helyhez k-pest elmozdtja a krt mrtkben s nem veszi ki azt a norml szvegfolyambl (azaz a nor-ml szvegfolyamban utna kvetkez objektumok vltozatlan helyen fognak megjelenni).Szintaxisa:#nev {position: relative; top:20px; left: 30px;}

A statikus helyzetmegads a norml szvegfolyamban lev helyn hagyja az elemet s

akkor hasznljuk, ha az objektum ms helyzetmegadst rklt s vissza akarjuk helyezni anorml szvegfolyambeli helyre. Ebben az esetben a pozcik megadsnak nincs hatsa, gya szintaxis:#nev { position: static; }

Tovbbi helyzetmegadsi lehetsg az sztats, mellyel azt lehet elrni, hogy a tbbi tar-talom krlfolyhassa az sztatott objektumot. Az sztats a floatjellemzleft, rightilletve nonertkvel adhat meg, melyek esetn az objektum balra, jobbra vagy egyltalnnem lesz sztatva, teht azt jobbrl, balrl vagy nem folyja krbe a tbbi tartalom.

Blokkszintobjektumok vzszintes kzpre igaztsa a kvetkezkppen lehetsges:.center {margin-left:auto; margin-right:auto; }Hogyha egy objektumot fgglegesen is kzpre szeretnnk igaztani, akkor ezt gy tehetjk

meg:#fkozepre {width: szlessg; height: magassg;position: absolute;top: 50%; left: 50%;margin-top: -magassg/2;margin-left: -szlessg/2;

}ahol magassg s szlessg helyett az objektum magassgt s szlessgt tntetjk fel.Azrt szksges negatv margkat megadni, mert az abszolt helyzetmegads az objektum bal

fels

sarkt pozcionlja, viszont mi az objektum kzept szeretnnk kzpre helyezni.



23/118

2. XHTML S CSS _____ 23

2.3.5. tfeds, tltszsg s cmAz objektumoknak van egy z-indextulajdonsga, melynek rtkl egy egsz szmot adha-tunk, s amely meghatrozza, hogy egymst egszben vagy rszben eltakar objektumok k-zl az tfedterleten melyik legyen lthat. Ha egy objektumnak nem adunk z-indexr-tket, akkor azt rkli a begyaz objektumtl, ha pedig nincs rklhetrtk, akkor alapr-telmezett rtke 0. Azonos z-indexrtkkel rendelkez, egymst tfedobjektumok kzlaz lesz lthat, amelyik nyit tagja a forrskdban ksbb fordul el, teht pldul a begya-zott objektum eltakarja a begyaz tfed rszt. A z-index mkdse azonbanposition-el abszolt, viszonytott vagy rgztett mdon nem pozcionlt objektumok ese-tben bizonytalan.

Az oldalakon elhelyezett objektumokat (jellemzen kpeket, httereket) az ltalunk kvntmrtkben tltszv is tudjuk tenni. A megolds bngszfgg. Szabvnyosan azopacitystlustulajdonsgnak adhatunk meg egy 0 s 1 kztti rtket azzal a jelentssel,hogy minl nagyobb rtket adunk meg, az objektum annl kevsb lest tltsz (teht 0 ese-

tn teljesen tltsz, 1 esetn egyltaln nem). Nem szabvnyosan (Internet Explorerben) aztltszsgot a kvetkezkppen is megadhatjuk: filter: alpha(opacity=10);, aholaz opacityrtke 0 s 100 kztti egsz szm s az rtk nvelse itt is cskkenti az tlt-szsgot (teht nem tltsz itt a 100-as rtknl lesz).

Vgl, az objektumoknak a titleXHTML tulajdonsggal egy cmet is adhatunk, melyeta bngszk tbbsge megjelent, ha a felhasznl az objektum fl viszi az egeret, vagy f-ltte jobb egrgombot nyom.

2.3.6. VonalakVzszintes vonalat a taggal tudunk megjelenteni, mely alaprtelmezsknt a tarta-lom szlessgnek megfelelnorml vastagsg vonalat hz. Azonban a widths heightCSS jellemzkkel meg lehet adni a vonal szlessgt s magassgt (vastagsgt), color-ala sznt, border-el a szeglyt, s mint minden objektumot pozcionlni is lehet.

Nincs olyan XHTML tag, mely fggleges vonalat jelentene meg, viszont meglvisme-reteinkkel ez is megoldhat. Az egyik megolds, hogy ltrehozunk egy megfelelfgglegesvonalat tartalmaz kpet s azt beillesztjk. Ltezik azonban ennl kisebb memriaignysknnyebben mdosthat megolds is. Ltrehozunk egy divobjektumot, melynek magass-gt a fggleges vonal kvnt magassgra, szlessgt 0-ra lltjuk, s szeglyknt megadjuka vonal kvnt szlessgt, stlust s sznt. Pldul minden olyan divobjektum, mely azalbbi csoporthoz tartozik egy 200px magassg, 2 px szlessg, piros szn, pontozott fg-gleges vonalknt jelenik majd meg:

.fv {height: 200px; width: 0px; border-left:2px dotted #f00;}2.3.7. Nyomtats formzsaAmint azt mr emltettk, CSS stluslapok csatolsnl a mediajellemzprintrtkvelmeg lehet adni, hogy nyomtatskor mely stluslap legyen hasznlva. Abban az esetben, haltalban minden eszkzre vonatkoz stlushoz kpest csak nhny mdostst szeretnnk,akkor egyszerbb a nyomtatsi stluslapot a mindenre rvnyes (media=all) stluslaputn beilleszteni s abban csak a klnbsgeket lerni. Pldul:



24/118


De milyen fontosabb vltoztatsokat rdemes eszkzlni egy nyomtatsi stluslapban([15])? Egyrszt rdemes elrejteni az olyan tartalmakat, melyeket a felhasznl a kinyomtatottoldalon gyse tudna hasznostani. Ilyenek lehetnek pldul a keresmezk, menk, linkek sgombok is. Az elrejtsnek kt mdja van. Az egyik esetben a visibilitytulajdonsgot

hasznljuk, melynek lehetsges rtkei inherit(rklt), visible(lthat) s hidden(rejtett). A msik lehetsg a displaytulajdonsg hasznlata a nonertkkel. Pldul:#kereses {display:none;}. A kt megolds kztt az a klnbsg, hogy adisplay:none;kiveszi az objektumot a norml szvegfolyambl, mg avisibility:hidden; esetn csak resen marad az objektum helye. Az objektumokdisplay-el trtnelrejtse a felhasznl szmra paprsprolst is eredmnyez. Paprtaka-rkossg szempontjbl ugyanakkor hasznos lehet az is, ha a nyomtatsi oldalon, a webenmegszokott keskeny sorokkal szemben, szlesebb sorokat hasznlunk. ltalnos vlemny,hogy mg a kpernyn a talp nlkli betket (pl. Verdana, Arial, sans-serif), nyom-tatsban a talpas betket (pl. Georgia, Times, serif) knnyebb olvasni. A kinyomtatott

lapon nincsenek pixelek, ezrt nyomtatskor ms mrtkegysgeket hasznlunk, mint pldulcm, mm, in(inch, hvelyk, kb. 25.4 mm), pt(pont = in/72), pc(pica = 12 pt). A nyomta-tsi stlusban ajnlott megadni a margkat s a betmreteket is. Ugyanakkor rdemes figye-lembe venni, hogy a felhasznl szmra a bngszben szmos nyomtatsi bellts rendel-kezsre ll (pl. nyomtasson-e httrkpet, oldalszmot, URL cmeket stb.). A felhasznltbbnyire nem nyomtatja ki a htteret, ezrt egyrszt ne bzzunk abban, hogy a nyomtatsbanis lesz httrkp, msrszt gondoskodjuk arrl, hogy a nyomtatsban a fehr lapon is lthatklegyenek a betk. Vgl gondoljunk azokra a felhasznlkra is, akik nem sznes nyomtatvalnyomtatnak, gy olyan szneket adjunk meg, amelyek akkor is ltszani fognak, ha azokat feke-te-fehr nyomtatval nyomtatjk ki.

2.4. Hivatkozsok elhelyezse2.4.1. Webhelyek azonostsaA webes erforrsokat azonosthatjuk hely szerint vagy egyedi azonostval. Az elektronikustartalom azonostsra az interneten jelenleg szinte kizrlag az URL (Universal ResourceLocator, egysges erforrscm) azonostkat hasznljk, amely minden egyes dokumentumesetben annak lelhelyt (fizikai helyt) adja meg. Pldul:http://www.kiszolgalo.hu/mappa/fajl.html.

Az elektronikus dokumentumok hossz tv azonostsra megalkottk az URN(Universal Resource Name) egyedi azonostt is, mely egy kzponti helyen az URL-el egytttrolva s frisstve lehetv teszi a dokumentumok helytl fggetlen azonostst. Hogyha a

bngszk s a hivatkozsok az URN-el azonostannak, akkor a dokumentumok thelyezseesetn csak a weblap ksztjnek kellene a kzponti adatbzisban mdostani a dokumentumlelhelyt, gy a felhasznlk knyvjelzi nem vlnnak mkdskptelenn, s a hivatkoz-sokat sem kellene egyenknt frissteni. Ez azonban jelenleg nincs szlesebb krben alkalmaz-va, gy ezt a problmt a knyvjelzk s hivatkozsok trsa mellett leggyakrabban az olda-lak tirnytsval oldjk meg. Fontos teht a j tervezs, hogy ksbb minl kevesebb the-lyezst kelljen eszkzlni, s a tartalom is minl tlthatbb legyen.

A weboldalak azonostsnl mg meg kell emlteni, hogy a web szervereken bellthat,hogy ha egy knyvtrban tallhat indexvagy defaultnevhtmvagy htmlkiterjeszt-snevfjl, akkor a knyvtrhivatkozssal automatikusan azt nyissa meg.



25/118

2. XHTML S CSS _____ 25

2.4.2. A hivatkozs szintaxisaEgy hivatkozsnak kt rsze van, melyeket gyjtnven horgonyoknak szoktak nevezni: a

forrs(amire kattintani lehet) s a cl(ahova mutat). A forrs megadsa XHTML-ben az (anchor) taggal lehetsges: XHTML objektum .

A kattinthat XHTML objektum tbbnyire szveg szokott lenni, de ms objektum (kp,gomb stb.) is lehet. A cl URI-jt, vagyis azt, hogy hova mutasson a link, az tag href(hypertext reference) tulajdonsgnak rtkeknt adjuk meg. A forrsra kattintva a bngszahrefrtkeknt megadott clt jelenti meg. Lehetsg van arra is, hogy clknt egy webol-dalon bell azonostott pontot adjunk meg. Ezt azonosthatjuk id-vel, vagy megadhatjuk akvetkezkppen: Elscl . A hivatkozs ltalnosalakja: Ide kat-tints ! ,melyben a []-ek ltal jellt opcionlis rszt tredknek nevezzk. Pldul, egy azonos olda-

lon belli clt gy adhatunk meg: Ugrs ! ,mg egy azonos knyvtrban levmsik oldalon levclt pedig gy: Ugrs! .

A hivatkozsoknl alaprtelmezett s leggyakrabban hasznlt protokoll a http, amikor acl egy helyi vagy tvoli szerveren levHTML dokumentum lehet, viszont a fileprotokol-lal helyi llomnyra, az ftpprotokollal FTP szerveren levllomnyra is hivatkozhatunk. Amailto protokollal a levelezrendszer elindtst, az e-mail cm s trgysor automatikuskitltst rhatjuk ela kvetkezkppen: Levl

kldse! .Az llomnyok helye megadhat abszolt vagy relatv elrsi ttal. A fejrszben elhelyez-hetbasetag hrefrtkeknt megadhat a weboldalon elhelyezett relatv URL-ek alapr-telmezett kiindul knyvtra, mely viszont abszolt elrsi t kell legyen. Pldul:

.

2.4.3. Hivatkozsok formzsaA hivatkozsoknak 4 fllapota lehet: a felhasznl mg nem kereste fel, a felhasznl felke-reste, az egr fltte ll, illetve a hivatkozs hasznlatban van (a hivatkozott oldal betltse

folyamatban van). A hivatkozs llapota azonban nem szerepel az XHTML kdban, hanem afelhasznl tevkenysgtl fgg, ezrt a hivatkozsok formzsra CSS-ben gynevezettlosztly-kijellket ([47]) hasznlunk, melyeket a fenti llapotokra rendre a kvetkezkp-

pen kell megadni: a:link, a:visited, a:hover, a:active. Az losztly-kijellketms kijellkhz hasonlan hasznlhatjuk tovbbi kijellkkel egytt is, s segtsgkkel ahivatkozsokat a ngy llapotra vonatkozan kln-kln formzhatjuk. Pldul, aza:hover segtsgvel megadhat, hogy amikor a felhasznl az egeret a hivatkozs flviszi, akkor az ms httrkppel, betsznnel s betmrettel rendelkezzen.

Alaprtelmezsknt a forrst a bngszk ltalban alhzva vagy bekeretezve jelentikmeg. Ezt mdostani az objektum text-decoration, illetve border tulajdonsgnak

rtkadsval lehet (pldul letilts a nonertkkel lehetsges).



26/118


A bngsz azokat az oldalakat tekinti felkeresetteknek, amelyek szerepelnek az adottbngszbngszsi elzmnyei kztt. Az a:linktesztelshez szksg lehet arra, hogyaz oldal jbl nem felkeresettnek minsljn, ehhez azt trlni kell azt az adott bngszbena bngszsi elzmnyek kzl.

2.5. Kpek s multimdis tartalmak beillesztse2.5.1. Kpek beszrsaAmint ez mr emltsre kerlt, kpeket az tag segtsgvel lehet beilleszteni a tarta-lomba, melynek ktelezen elvrt jellemzi az srcs az alt. Az srcjellemzrtkeknt a

beszrand kpfjl abszolt vagy relatv elrsi tjt kell megadni, mg az altrtkekntegy olyan szveget, melyet a bngszfog kirni, ha a kpet nem tudja megjelenteni. Az alt

jellemzrtkeknt elssorban a kp rendeltetst kell megadni, teht azt, hogy mirt van ott(pldul valamilyen gombknt mkdik), s nem azt, hogy mi lthat rajta, ugyanis az elsrend cl az, hogy ha a kpet a bngsz (vagy a felolvasprogram) nem is jelenti meg, afelhasznl az oldalt akkor is tudja hasznlni. A kp tartalmnak rszletes lerst elhelyezhet-

jk egy kln fjlban, melynek elrsi tjt a longdesctulajdonsg rtkeknt tudjuk meg-adni. Ajnlott minden esetben megadni a kp mreteit a width, illetve heighttulajdons-gok segtsgvel. Ms objektumokhoz hasonlan kpeknek is megadhatunk szeglyt s mar-gt is.

2.5.2. gyfl oldali kptrkpek ltrehozsaKptrkp segtsgvel alakzatokat definilhatunk a kpen, melyeket hivatkozsokk alakt-hatunk. A kptrkpet nll objektumknt definiljuk, melyet majd hozz fogunk rendelniahhoz a kphez, mellyel hasznlni szeretnnk.

Egy kptrkp a s tagok kztt helyezkedik el. A maptag nametulaj-donsgnak rtkeknt a kptrkpnek egy nevet adhatunk, melyet a kptrkp adott kphezval hozzrendelse rdekben az imgobjektum usemaptulajdonsgnak rtkeknt # jelutn kell megadni A kptrkp s tagok kztt lert tartalm, az areatag shape tulajdonsgaknt megadott tpus alakzatokat tartalmaz. Az alakzat tpusa lehetkr, sokszg vagy tglalap, ennek megfelelen a shape tulajdonsg rtke lehet circ,polyvagy rect. Az areatag coordstulajdonsgnak rtkeivel tudjuk meghatrozni azalakzat helyt s mrett. Tglalap esetn ngy rtket kell megadnunk: elszr a tglalap balfelsals sarknak x, y koordintit, majd a jobb als sarknak x, y koordintit. Sokszgesetn coords rtkeknt felsoroljuk a sokszg cscspontjainak x s y koordintit. Kresetn a kr kzppontjnak x s y koordintit s a kr sugarnak mrett kell megadnunk.Az areatag hreftulajdonsgnak rtkeknt a hivatkozs cljt tudjuk megadni. Lssunkegy pldt kptrkpre, melyben egy krt s egy tglalapot definilunk:

A kptrkpet a kvetkezkppen tudjuk egy kphez kapcsolni: .



27/118

2. XHTML S CSS _____ 27

2.5.3. Multimdis tartalmak beillesztseMultimdis fjlokat XHTML-be beszrni a W3C elrsai szerint object tagknt kell([48]), azonban ez nem minden bngszben mkdik, ezrt mg prblkozhatunk a nemszabvnyos embed tagknt val elhelyezssel. Meg kell adni a fjl tpust is, mely sokflelehet, pldul audio/mp3, audio/mpeg, application/x-shockwave-flash,video/quicktimestb. Bizonyos esetekben Internet Explorerben a fjltpust a Windows-os classidrtkeknt kell megadni. Egy flash fjl begyazsa pldul gy nzhet ki:

Akkor rja ki, ha nem tudja a Flash-t megjelenteni.
A param tulajdonsggal a fjl tpustl fggen szmos paramtert lehet belltani:autoplay, controller, autostart, showcontrols, showstatusbar,
autorewind, src(ha az object-ben nem adtuk meg data-val) stb. A begyazs tovb-bi rszletei nagyon fggnek a multimdis fjl tpustl, gy azok rszletezstl a jegyzetkorltai miatt eltekintnk.

2.6. ListkA listkat felsorolsokra hasznljuk s XHTML-ben hrom tpusuk van: egyszer(felsorols-

jeles) listk, szmozott listk s meghatrozs listk. A listk egymsba is gyazhatk. Alap-rtelmezs szerint a listk s azok felsorolt elemei blokkszintobjektumok. A listk formz-shoz hasznlhatjuk az eddig megismert CSS stlusokat is. A tovbbiakban csak a listkra

jellemzspecilis tulajdonsgokat ismertetjk.

2.6.1. EgyszerlistkEgy egyszer(felsorolsjeles) lista (angolul unordered list) tartalma s tagokkztt helyezkedik el s felsorolt elemeket tartalmaz. Minden felsorolt elemet (list item) s tagok kztt kell elhelyezni. Pldul: liszttojs s cukor vaj . Azul objektum list-style-type CSS tulajdonsgnak rtkeknt megadhatjuk, hogy afelsorolt elemek eltt milyen jeleket jelentsen meg: disc (teli kr), circle (res kr),square (ngyzet). Felsorolsjelknt hasznlhatunk kpet is, ebben az esetben a list-style-imageCSS tulajdonsgot hasznljuk. Pldullist-style-image: url(kep.gif). A kp relatv tvonalt stluslap helyhez vi-szonytva kell megadni. Az ulobjektum list-style-positionCSS tulajdonsgnakalaprtelmezett outside. illetve insidertkvel megadhatjuk azt is, hogy a felsorols-elemek a lista dobozn kvl vagy bell helyezkedjenek el. A lista tulajdonsgait sszevontanis megadhatjuk a list-style tulajdonsg rtkeknt a kvetkez sorrendben: list-style-type, list-style-image, list-style-position.

2.6.2. Szmozott listkSzmozott lista (ordered list) elemei eltt arab vagy rmai szmok, illetve betk llhatnak,tartalma pedig s tagok kztt helyezkedik el. A felsorolt elemek az egyszerlistkhoz hasonlan s tagok kztt kell legyenek.



28/118


A sorszmok tpusnak megadsra a list-style-typeCSS tulajdonsgot hasznl-juk, melynek rtkei a kvetkezk lehetnek: none (nincs), decimal (arab szm),decimal-leading-zero (arab szm kezd nullval), upper-alpha (nagybetk),lower-alpha (kisbetk), upper-roman (rmai szmok nagybetkkel rva), lower-

roman(rmai szmok kisbetkkel rva).Alaprtelmezs szerint a lista cmki arab szmok s az elemek szmozsa 1-el, illetve A

vagy a betkkel kezddik. Ettl eltrkezdrtket az olobjektum startjellemzjveladhatunk meg, melynek rtke arab szm kell legyen akkor is, ha a szmozs rmai szmvagy betlesz. Pldul harmadik negye-dik . A startjellemzazonban csak tmeneti szabvny szerint hasznl-hat, ezrt erre egy szablyosabb, de bonyolultabb megoldst a szmllknl fogunk ltni.

2.6.3. Meghatrozs listkDefincik lersra meghatrozs listkat hasznlhatunk, melyek minden felsorolt eleme kt

rszb

l ll: a definiland fogalombl s a meghatrozsbl. A teljes meghatrozs listt(definition list) s tagok kztt helyezzk el. Minden felsorolt elem esetn adefinilt fogalmat (definition term) s , mg a meghatrozst (definiton data)s kztt kell elhelyezni. Lssunk egy olyan meghatrozs listt, melyben ktfogalmat definilunk: Hardver: a szmtgp fizikailag megfoghat rszeinek sszessge

Szoftver: a szmtgp memrijban elhelyezked, azokat mkdte-

tprogram .

2.6.4. Listk hasznlata menk ksztsreA listkat gyakran szoktk menk ksztsre hasznlni, mivel a menpontok felsorolt ele-meknek tekinthetk. Az albbiakban megnznk nhny alaptechnikt, melyek menk ksz-tse sorn hasznlhatk.

Elszr is, a felsorolt elemek hivatkozsok lesznek. ltalban nem akarjuk, hogy ezekszvege alhzottan jelenjen meg, teht rdemes text-decoration: none;-al ezt letil-tani. Ha httrvltoztat menpontokat akarunk kszteni, akkor a hover kijellvel kellmegfelelformzst hozzrendelnnk. Egy megfelel stlus szegllyel (pl. outset) a hi-

vatkozsoknak gombszerkinzetet is adhatunk. rdemes padding-al eltvoltani a hivat-kozs tartalmt a szeglytl, a tagoknak pedig margintulajdonsgot megadni azrt,hogy az egyes menpontok is eltvolodjanak egymstl. Valsznleg nem szeretnnk, hogya lista elemeiknt felsorolt menpontok eltt felsorolsjelek legyenek, ezt a list-style-type:none;-al lehet letiltani.

A lista elemei blokkszintek, alaprtelmezsknt egyms alatt fognak megjelenni, gyfggleges ment fogunk kapni. Hogyan lehet vzszintes ment kszteni listval?

Az egyik lehetsges megolds, hogy elrjuk a menpontok (tagok) sztatst, ilymdon azok egyms mell fognak kerlni. A msik lehetsg a tagok megjelentsnekmdostsa sorszintv. De hogyan lehetsges ez?



29/118

2. XHTML S CSS _____ 29

A displayCSS tulajdonsg block, illetve inlinertkeivel elrhat, hogy egy ob-jektum blokkszintvagy sorszintelemknt viselkedjen. Ily mdon elrhet, hogy a normlesetben blokkszint elemek sorszintknt, a norml esetben sorszint elemek pedig blokk-szintknt jelenjenek meg. Mindez termszetesen a listkra is rvnyes. Teht a tagok

displaytulajdonsgt inline-ra lltva is kszthetnk vzszintes ment.Vgl meg fogjuk nzni, hogy miknt tudunk tbbszint, egr fl vitelekor elbukkan

ment kszteni. Az egyrtelmsg kedvrt felttelezzk, hogy a menket ullistaknt val-stjuk meg, a megolds knnyen alkalmazhat lesz ms esetben is. Tbbszint ment gykapunk, hogy a fmen valamely eleme, a sajt feliratn kvl, a s tagok k-ztt egy teljes jabb listt (pldul ) tartalmaz. A krds az, hogy hogyanrhetjk el azt, hogy ez a begyazott lista csak akkor legyen lthat, amikor az egeret az adottmenpont fl visszk? Alaprtelmezskppen elrejtjk:ul ul {display: none;},ugyanakkor elrjuk, hogy amikor a felhasznl az egeret a menpont fl viszi, akkor jelen-

jen meg:ul li:hover ul { display: block; }.Hogyha a begyazott menbe is be van gyazva mg egy men, akkor:ul li:hover ul ul { display: none; }sul ul li:hover ul { display: block; }.Az ilyen menk ksztsekor azonban vegyk figyelembe, hogy a felhasznl nem memria-

jtkot jtszik, teht csak akkor hasznljuk, ha az eredetileg nem ltsz menpontok nagyonknnyen megjegyezhetk.

Termszetesen sok tletet lehetne mg rni a menk szptsre, de a jegyzet korltai miatta tma tovbbi rszletezstl eltekintnk.

2.7. SzmllkCSS-ben definilhatunk szmllkat ([49], [50]), melyek segtsgvel automatikusan szmoz-hatjuk pldul a fejezeteket, alfejezeteket s a felsorolsok elemeit.

A szmll neve tetszleges azonost nv lehet. Elspldnkban cim s alcimnevszmllk lesznek. Hasznlat eltt ajnlott a szmllkat counter-reset-el inicializlni.Pldul: body {counter-reset: cim;}h2 {counter-reset: alcim;}. Dehogyan fogjuk a szmllkat kiratni?

Lehetsg van arra, hogy :before, illetve :afterhasznlatval elrjuk adott elemekeltt vagy utn tetszleges tartalom automatikus megjelentst. Tovbb egy szmll rt-kt a counter(szamlalo)adja meg. gy teht ha a h2-es szintcmsorok eltt meg sze-

retnnk jelenteni a fejezet szmt, akkor ezt rjuk:h2:before { content: counter(cim) ". fejezet:"; }.Csakhogy gy a kvetkezh2-es fejezetnek is ugyanolyan szma lenne, ezrt a fejezet sz-mnak kirsakor nvelnnk kell a cimfejezetszmllt. Tovbb, ha azt szeretnnk, hogy azelfejezetek szmozsa az j fejezetben jrakezddjn, akkor az alfejezet szmllt (alcim)jra inicializlnunk kell. Teht a kvetkezt tesszk:h2 {counter-increment: cim; counter-reset: alcim;}h2:before {content: counter(cim) ". fejezet:";}h3 {counter-increment: alcim;}h3:before {content: counter(cim) "." counter(alcim) " ";}



30/118


Az tag startjellemzjnek hasznlata is kivlthat szmll segtsgvel. Ehheza beazonostott -ben tetszleges rtkkel inicializljuk a szmllt, me-lyet minden eltt megjelentnk s nvelnk.ol#elso {counter-reset: szamlalo 2;}

ol#elso li:before {content: counter(szamlalo) ". ";counter-increment: szamlalo;}

Vgl, ha a elemek a displaytulajdonsgt belltjuk blockvagy inlinertkre,akkor azok automatikus szmozsa nem fog megjelenni.

2.8. TblzatokA tblzat adatoknak bizonyos szempontok szerint egyms mell, illetve egyms al rsakvetkeztben ltrejvsorokba s oszlopokba rendezett sszessge.

A tblzatok soraiban s oszlopaiban levtartalmak vzszintes illetve fggleges igaztsanagyon egyszeren megvalsthat, ezrt gyakran szoktk a tblzatokat az oldalak elrende-

zsnek kialaktsra is hasznlni. Mgis azt lehet tancsolni, hogy kerljk ezt a megoldst,mert bizonyos bngszk, illetve ms (pldul felolvas) programok helytelenl rtelmezhe-tik a tblzatban elrendezett tartalmat (pldul nem megfelelsorrendben olvassk azt fel),ezrt az rintett felhasznlk dolgt nagyon megneheztjk. A weboldalak elrendezsnekkialaktsa megvalsthat a mr ismertetett helyzetmegadsok segtsgvel ([41], [42]).

2.8.1. Tblzatok felptseXHTML-ben a tblzat sorokbl s azokon bell cellkbl ll. Az egyms melletti cellk al-kotjk a sorokat, az egyms alattiak pedig az oszlopokat. A tblzat teljes tartalma s , egy sor s tagok kztt helyezhetel. Egy cella lehet skztt elhelyezkedfejlc informcikat tartalmaz cella, vagy s k-

ztt adatokat tartalmaz cella. A tblzatnak lehet egy s kzttlert cmsora, melynek kzvetlenl a tag utn kell elhelyezkednie (akkor is, ha atblzat alatt akarjuk megjelenteni).

A tblzat hrom strukturlis rszre oszthat. s kztt fejlcsorokcsoportjt, s kztt pe

Üzleti Webtechnológiák - Holló Csaba

Documents

Transcript of Üzleti Webtechnológiák - Holló Csaba