Tanuljuk Meg A HTML Es A CSS Programozasi Nyelvet 24 Óra Alatt

julie C.
Meloni
Michael Morrison
Tanuljuk meg a HTML s a CSS

hasznlatt 24 ra alatt
A fordts a kvetkez angol eredeti alapjn kszlt:
Julie C. Meloni, Michael Morrison: SAMS Teach Yourself HTML ant CSS in 24 Hours
Authorized translation from the English language edition, entitled SAMS TEACH YOURSELF HTML
AND CSS IN 24 HOURS, 1st Edition, ISB
0672330970, by MELONI, JULIE C.; MORRJSON,
MICHAEL, published by Pearson Education, Inc., publisbing as SAMS Publishing.

Copyright 2010 by SAMS Publishing.
Translation and Hungariarr edition 2011 Kiskapu Kft.
All rights reserved. No part of this book, induding interior design, cover design, and icons, may be
reproduced or transllitted in any form, by any means (electronic, photocopying, recording, or
otherwise) with out tl1e prior written permission of tl1e publisher.
Trademarked names appear throughout this book. Rarher tl1an list the names and entities that own
the trademarks or insert a trademark symbo! witl1 each mention of the trademarked name, the
publisher states that it is using tl1e names for editorial purposes only and to the benefit of tl1e
trademark owner, witl1 no intention of infringing upon tl1at trademark
Fordts s magyar vltozat 2011 Kiskapu Kft. Minden jog fenntartva!
A knyv egyetlen rsze sem sokszorosthat semmilyen mdszerrel a Kiad elzetes rsos enge
dlye nlkl. Ez a korltozs kiterjed a bels tervezsre, a bortra s az ikonokra is. A knyvben
bejegyzett vdjegyek s mrkanevek is felbukkanhatnak Al1elyett, hogy ezt minden egyes helyen
kln jeleznnk, a Kiad ezennel kijelenti, hogy a mben elfordul valamennyi vdett nevet s
jelzst szerkesztsi clokra, jhiszemen, a nv tulajdonosnak rdekeit szem eltt tartva hasznlja,
s nem ll szndkban az azokkal kapcsolatos jogokat megszegni, vagy ktsgbe vonni.
A szerzk s a kiad a lehet legnagyobb krltekintssel jrt el e kiadvny elksztsekor. Sem
a szerz, sem a kiad nem vllal semminem felelssget vagy garancit a knyv tartalmval,
teljessgvel kapcsolatban. Sem a szerz, sem a kiad nem vonhat felelssgre brmilyen baleset
vagy kresemny miatt, mely kzvetve vagy kzvetlenl kapcsolatba hozhat e kiadvnnyal.
Sorozatszerkeszt: Szy Gyrgy

Lektor: Rzmaves Lszl
Fordts: Cilieze Blint, Rzmaves Lszl, Vm:ga Pter
Mszaki szerkeszt: Csutak Hoffmann Levente
Trdels: Kis Pter
Felels kiad a Kiskapu Kft. gyvezet igazgatja
2011 Kiskapu Kft.
1134 Budapest, Csng u. 8.

Fax: (+36-1) 303-1619
http:/ /www.kiskapukiado.hu/
e-mail: kiado@kiskapu.hu
ISBN: 978 963 9637 78 8

Nyomdai elllts: Radin Group
Felels vezet: Antun Basic
Kereskedelmi kpviselet: Kvadrt '97 Kft.
Tel./Fax: +361 319 1 599. Mobil: +36 302806656
E-mail: kvadrat97@gmail.com
Tartalomjegyzk
1. ra
A Web mkdse
A HTML s a Vilghl rvid trtnete

A webes tartalmak ltrehozsa
A webes tartalmak kzbestsnek mdja

A webgazda kivlasztsa
Tesztels tbb webbngszben

sszefoglals
2. ra
A webes tartalom kzzttele
Az ra pldafjljnak elksztse
Fjlok tvitele az FTP segtsgve!

A fjlok helye a webkiszolgln
13
A tartalom kzzttele webkiszolgl nlkl

A webes tartalom ellenrzse
sszefoglals
3. ra
A HTML s
az
XHTML alapjai
27
Az egyszer weboldalak ksztsnek alapjai
Az XHTML-oldalakon ktelezen felhasznland HTML-elemek

Oldalszerkezet kialaktsa bekezdsekkel s sortrsekkel
A tartalom tagolsa cmsorok segtsgvel
A webes tartalom rvnyessgnek vizsglata

sszefoglals
4. ra
5
.
tmutat a szabvnyok dzsungelhez
Egyszer stluslap ltrehozsa
A CSS-stlusok hasznlatnak alapjai

Stlusosztlyok hasznlata
Stlusazonosrk hasznlata
Bels sluslapok s kdon belli stlusok

sszefoglals
A stOuslapok vilga
A CSS mkdse
5. ra
13
14
18
22
24
25
HTML, XML, XHTML s HTML
Szvegblokkok s listk
Szveg igaztsa az oldalon bell

A HTML hrom listatpusa
Listk a listkban
sszefoglals
2
3
4
6
8
9
29
33
35
38
40
42
44
49
50
52
57
61
63
64
67
71
72
76
78
83
iv Tanuljuk meg a HTML s a CSS hasznlatt 24 ra alatt
6. ra
Betformzs
Flkvr, dlt s egyb betalakok

Halad betbelltsok
Klnleges karakterek hasznlata

sszefoglals
7. ra
Tblzat mretnek belltsa
Tartalom igaztsa s tvelse a tblzaton bell

Oldalelrendezs kialaktsa tblzatokkal
sszefoglals
Hivatkozsok a sajt oldalaink kztt

Hivatkozs kls webes tartalomra
Hivatkozs elektronikus levlcmre
Hivatkozsok formzsa eSS-stlusokkal

sszefoglals
119
120
122
126
129
13 0
132
132
136
A sznek hasznlata
A sznvlaszts fogsai
Websznek
Hexadecimlis sznkdok
A httr, a szveg s a szeglyek sznnek belltsa eSS-kdokkal

sszefoglals
Amit a grafildrl mindenkpp tudnunk kell

A fnykpek elksztse
Reklmcskok s nyomgombak ksztse
Hogyan cskkenthet a sznek szma egy kpen?

tltsz kpek hasznlata
Mozaikos httr kialaktsa
Animcit tartalmaz webes grafika ksztse

sszefoglals
141
142
143
145
147
149
Kpek ksztse webes hasznlatra
A grafikai alkalmazs kivlasztsa
Kpek hasznlata a webhelyen
Kpek elhelyezse egy weboldalon

Kpek szveges lersa
A kp szlessgnek s magassgnak megadsa
87
88
92
96
99
103
104
107
110
113
114
Hivatkozs megnyitsa j bngszablakban
11. ra
Oldalon belli hivatkozsok horgonyokkaL
1 O. ra
Kls s bels hivatkozsok hasznlata
Webcmek hasznlata
9. ra
Informcik megjelentsa tblzatok segtsgvel
Egyszer tblzat ltrehozsa
8. ra
153
154
155
156
162
164
165
166
168
168
173
174
177
178
Tanuljuk meg a HTML s a CSS hasznlatt 24 ra alatt
Kpek igaztsa
Httrkpek hasznlata.
Kptrkpek ksztse
sszefoglals
12. ra
. ... .. . .
Kpek talaktsa hivatkozss
Keretvz kialaktsa
Bels keretek hasznlata

sszefoglals
. .
Az elemek bels margja

Elemek igaztsa
A float tulajdonsg . ...

.
sszefoglals
..
..
.
.
.
.
.
.
agykanllal az elhelyezsrL
..
..
... .
.
.
.
.
.
igaztsok s
. .
.
.
.
..
..
188
194
201
204
207
209
. .
.
sszefoglals
...
...
219
214
216
221
223
sztats hasznlata229
az
. ..
.
.
.
..
231
.. 238
. 242
.
243
. 246
.
249
elemek elhelyezse
. .
A szveg folysirnynak szablyozsa...
. . . . . .
.
. .... .. . .
.
. .
.
.. .
.
. .
.
..
. . 250
.
. 253
Ismtls - a HTML listi .
A felsorolsjelek elhelyezse
..
..
.
.
Kptrkpek ksztse listaelemek s CSS hasznlatval

sszefoglals...
..
...
261
265
258
. 260
Szemrevalbb listk s egyebek - a CSS hasznlatval
A CSS-dobozmodell hatsa a lisrkra
186
Az egyms tetejre kerl elemek elhelyezkedsnek szablyozsa
17. ra
179
183
az
.
..
az
A CSS dobozmodellje s
.
. ..
A CSS dobozmodellje
213
.
A kls s a bels marg,
Margk hasznlata
16. ra
. .
199
Hivatkozsok keretek s ablakok kztt
Keretek hasznlata
Mik azok a keretek?
15. ra
Multimdia a webhelyen
sszefoglals.
Tovbbi tletek a multimdia hasznlathoz
14. ra
Multimdiafjlok begyazsa
Hivatkozs multimdiafjlokra
13. ra
.
.
. . . 266
.
. 272
. 276
279
.
Fggleges navigcis sv ksztse CSS-kd segtsgvel
Vzszintes navigcis sv ksztse CSS-kd segtsgve!. ..

.
.. .
.
..
.. . .
.
267
.. . 270
Navigcis fellet kialaktsa a CSS segftsgvel
Miben klnbznek a navigcis listk a hagyomnyos trsaiktl? .
sszefoglals
lv
. .
. .
.
280
281
290
. .. 294
.
vi
l Tanuljuk meg a HTML s a CSS hasznlatt 24 ra alatt
18. ra
Szvegmdosts egrrnveletekkel
Lebeg lersok ltrehozsa CSS segtsgvel
297
.
Egyb szvegrszletek megjelentse CSS-kd segtsgve!

Esemnyek elrse
sszefoglals
19. ra
301
303
31O
313
314
316
319
329
Nyomtatbart weboldalak ksztse

.
331
332
335
337
Az oldalak nyomtatsi elnzetnek megtekintse
sszefoglals
346
347
345
JavaScript-kd a HTML nyelv oldalakon

Vletlenszer tartalom megjelentse
A dokumentum-objektummodell
349
352
353
355
Kpvlts felhasznli mveletek alapjn

sszefoglals
Webes rlapok
.
Szveges adatok fogadsa
357
.
358
359
363
364
364
365
A HTML-rlapok mkdse
rlap ltrehozsa
Az rlapelemek elnevezse
Rejtett adatok az rlapokon
Az rlapok beviteli vezrli
Az rlapadatok elkldse
sszefoglals
369
369
373
Webhelyek sszelltsa s kezelse
Amikor egy oldal is elg
. . .
Egyszer webhely felptse
374
376
Nagyobb webhely sszelltsa
Fenntarthat HTML-kd ksztse

sszefoglals
341
342
Dinamikus webhelyek
A parancsfjlok klnfle tpusai
A nyomtathat oldalakhoz val stluslap elksztse
23. ra
A megjelensi formhoz ill stluslap hasznlata
Mi teszi nyomtatbartt a weboldalakat?
22. ra
Rgztett s folykonyelrendezsek ltrehozsa
sszefoglals
Rgztett-folykony kevert elrendezsek
21. ra
Folykony elrendezsek
Rgztett elrendezsek
20. ra
298
380
383
386
Tanuljuk meg a HTML s a CSS hasznlatt 24 ra alatt vii

24. ra
389
Segtsg a keresshez
A webhelynk npszerstse
Weboldalaink felvtele a nagyobb keresk adatbzisaiba

Tippek a keresknek
A keressoptimalizls tovbbi fogsai
sszefoglals
A fggelk
az
Intemeten
403
ltalnos informcik a HTML-lel, az XHTML-lel s a CSS-se! kapcsolatban

Webbngszk
Weboldalak tervezse
Szaftver
Sznek s grafika
Multimdia
403
404
404
404
405
405
406
406
406
XHTMl 1.1 s CSS 2 gyorstalpal
Szerkezeti XHTML-elemek
XHTML-szvegtmbk s -bekezdsek
Szvegformz XHTML-elemek
.
XHTML-hivatkozsok
XHTML-tblzatok.
XHTML-stlusok
XHTML-rlapok
407
Begyazott tartalmat szablyoz XHTML-elemek
XHTML-parancskdok
ltalnos XHTML-jellemzk
Mretbellt eSS-stlustulajdonsgok
Szveg- s betstlus-bellt CSS-tulajdonsgok

Httrbellt eSS-stlustulajdonsgok
Szeglybellt esS-stlustulajdonsgok
Margbellt CSS-stlustulajdonsgok
Kitltsbellt eSS-stlustulajdonsgok
Elrendezsi s megjelentsi eSS-stlustulajdonsgok

Lista- s felsorolsjel-bellt eSS-stlustulajdonsgok
Tblzatformz eSS-stlustulajdonsgok
Trgymutat
Webhely-zemeltetsi szolgltatsok
Brelt webtrhely-szolgltats
XHTML-listk
Fejleszti forrsok haladknak
B fggelk
390
391
393
399
400
HTML- s CSS-forrsok
408
411
413
414
415
416
422
424
424
427
427
428
429
431
432
434
435
435
437
438
439
A szerzkrl
Julie C. Meloni az i2i nev, a kaliforniai Los Altosban mkd multimdia-vllalat msza
ki igazgatja, s emellett a digitlis humn tudomnyok szakrtje, akinek a webes

programozsi nyelvek s az adatbzisok tmakrben szmos knyve s cikke jelent
meg, kztk a sikeres Sams Teach Yourself PHP, a Sams Teach Yourself MySQL vagy
az Apache Alt in One.
Michael Morrison rknt, programfejlesztknt, jtkfeltallknt s klnfle szmt
gp-tudomnyi knyvek s interaktv webes tanfolyamok szerzjeknt tevkenykedik.

Elsdleges szakmja az rs, de szabadsz szakrtknt brkinek a rendelkezsre ll,
s a felesgvel, Masheed-del alaptott Statefish Labs szrakoztatipari cg kreatv ve
zetst is magra vllalta.
Mondja el a vlemnyt!
Az olvas a legfontosabb kritikus, akinek a vlemnye nekem s a kiadnak is roppant
rtkes. Szeretnnk tudni, mit csinlunk jl, rni az, amin javthatnnk, milyen knyve
ket kellene megjelentetnnk s gy tovbb. FeUvjuk a figyelmet, hogy a knyv tmj
val kapcsolatos szakmai krdsekben nem tudunk segteni, s a nagy szmban berke
z levelek miatt nem biztos, hogy minden zenetre vlaszolunk.
Krjk, ha r, tntesse fel a knyv szerzjt s cmt, valamint a sajt nevt, telefonsz
mt vagy e-mail cmt. Megjegyzseit alaposan ttanulmnyozzuk, s tovbbtjuk
a knyv szerzjnek s szerkesztinek.
E-mail: webdev@samspublishing.com
Levl:
Mark Taber
Associate Publisher
Sams Publisbing
800 East 96th Street
Indianapolis, I
46240 USA
Olvasszolgl at
A webhelynket megltogatva az informit.com/registercmen lehet bejegyeztetni
a knyvet, ezltal knnyen hozzfrhetnk a knyvvel kapcsolatos frisstsekhez, le
tltsekhez, illetve hibajegyzkekhez.
Bevezets
A 2009-es adatok szerint tbb mint 1,5 millird ember rendelkezik internetelrssei
csak az Amerikai Egyeslt llamokban 220 millian. Adjuk hozz a 338 milli knai, 55
milli nmet, 48 milli brit, 38 milli orosz s 67 milli brazil felhasznlt, s mris lt
hatjuk, mit jelent a "vilg" sz a V ilghl kifejezsben. Az internetfelhasznlk jelen
ts rsze egyben alaktja is a Web tartalmt-ha szeretnnk, mi is kzjk tartozha
tunk. A weboldalak szmrl ugyan nemigen ll rendelkezsre pontos felmrs, de
a Google legfrissebb adatai szerint az indexelt oldalak mennyisge 2008 kzepn t
lpte az l trillis hatrt.
A kvetkez 24 rban j oldalak szzmillii fognak megjelenni az Internet nyilvno
san elrhet rszn, s legalbb ugyanennyit helyeznek majd el bels magnhlzato
kon a helyi hlzatot hasznl zletemberek szmra. Az emltett oldalak mindegyike
-a mr hozzfrhet l trilli oldalhoz hasonlan- a hiperszveges jellnyelvet, rvi
den HTML-t (Hypertext Markup Language) hasznlja.
Ha elvgezzk az ebben a ktetben tallhat 24 egyrs leckt, mi is kzztehetjk
a weboldalainkat az Interneten. Ezek a leckk emellett abban is segtenek, hogy elsaj
ttsuk a ma a vilgon legfontosabb kszsget: a HTML hasznlatr. De valban meg le
het tanulni a cscsminsg weboldalak nll elksztst klnleges szaftver nlkl
s kevesebb id alatt, mint amennyi ahhoz kell, hogy idpontot egyeztessnk egy jl
fizetett HTML-varzslval? Kpes lehet ez a viszonylag rvid, olvasmnyos ktet felru
hzni Ininket azzal a kpessggel, hogy nllan megtanuljuk a weboldalak kzzt
telnek legjabb mdszereit?
A vlasz: igen. Valjban mr a knyv els kt leckje elg ahhoz, hogy az is, aki egy
ltaln nem rendelkezik HTML-elismeretekkel, kzz tudjon tenni egy weboldalt
a Weben. De hogyan tanulhatjuk meg a Web nyelvt ilyen gyorsan? Nos, pldkon ke
resztl. Ez a knyv a HTML-ismereteket egyszer lpsek sorozatra bontja, s bemu
tatja, hogyan birkzhatunk meg ezekkel a lpsekkel. Minden elksztend weboldal
kpe eltt kzvetlenl ott szerepel a szksges HTML-kd -lthatjuk, hogyan kell
megrni; tmr, vilgos magyarzatot kapunk a mkdsrl; s rgtn lehetsget ka
punk arra is, hogy a tanultakat a sajt weboldalunkon alkalmazzuk. Tz perccel ksbb
pedig mr jhet is a kvetkez lps.
24 rnyi munka, s el fogunk csodlkozni, rnilyen hatsos oldalakat tudunk kszteni
az Internetre.
A HTML-en tl
Ez a knyv nem csupn a HTML-lel foglalkozik, mert nem a HTML az egyetlen, amit
ma ismernnk kell ahhoz, hogy webes tartalmat hozzunk ltre. Ktetnk clja az, hogy
az Olvast ellssa mindazokkal a kszsgekkel, amelyek a modern, szabvnykvet
webhelyek ksztshez szksgesek, mghozz mindssze 24 rvid, egyszer leekn
keresztl. A knyvben a kvetkez kulcsfontossg tmakrkkel s technolgikkal
foglalkozunk:
Az XHTML (eXtensible Hypertext Markup Language, bvthet hiperszveges je
llnyelv) a weboldalak ltrehozsnak jelenlegi szabvnya. A ktet minden

pldja teljes mrtkben XHTML-megfelel, s ahol csak lehet, a HTML 5-tel is
foglalkozunk.
A knyv minden pldjt ellenriztk, hogy megfelel-e az sszes fbb bngsz

legjabb vltozatnak, belertve az Apple Safari, a Google Chrome, a Microsoft
Internet Explorer, a Mozilla Firefax s az Opera bngszket. Mr a kezdetektl
megtanuljuk, hogyan egyeztessk ssze az oldalainkat a mlttal, mikzben fel
ksztjk ket a jvre is.
Kimerten trgyaljuk a tbbszint stluslapokat (CSS, Cascading Style Sheets),

amelyek lehetv teszik, hogy a weboldalaink elrendezsnek, bettpusainak,
szneinek s formzsnak minden rszlett kzben tarthassuk. Ha valban
mulatba ejt weboldalakat szeretnnk kszteni, a CSS-sei sokkal messzebbre
juthatunk, mint amit pusztn hagyomnyos HTML-oldalakkal elrhetnk. Tudtuk
pldul, hogy a CSS azt is lehetv teszi, hogy egy oldal tartalmt kifejezetten
nyomtatshoz szabjuk a szokvnyos webes megjelents mellett?
A 10-12. leckk a multimdia-alkalmazsok vilgba nyjtanak bevezetst, is

mertetve tbbek kztt, hogy hol tallhatunk olyan, szabvnynak szmt prog
ramokat, amelyeket szabadon letlthetnk s kiprblhatunk.
A technikai rszletek ismerete nmagban nem elegend, ezrt a ktet arra nz

ve is tancsokkal lt el minket, hogy miknt alakthatjuk ki a webhelyeinket gy,
hogy elrjk a clunkat. A legfontosabb tmkat- hatkony oldal-elrendezsek
kialaktsa, az oldalak kzzttele az Interneten FTP-program segtsgve!,
az oldalak rendszerezse s kezelse, illetve elkel hely biztostsa az oldala
inknak a fbb internetes keresk tallatai kztt- kivtel nlkl kell mlysg
ben trgyaljuk ahhoz, hogy tllendlhessnk a kezdeti nehzsgeken.
Az emltett ltfontossg ismeretekre fordtott figyelem tette e ktet ht korbbi angol

kiadst sikerknyvv, s ez a frisstett (az angol kiadst tekintve nyolcadik) vltozat
sem adja albb. Minden pldt frisstettnk, s a tartalom jelents rszt tdolgoztuk,
hogy az j technolgiknak is helyet adjunk.
Tanuljuk meg a HTML s a CSS hasznlatt 24 ra alatt xi
Vizulis pldk
A ktet minden pldjt ktfle szemszgbl mutatjuk be:
Elszr az adott HTML-oldal elksztshez berand szveget lthatjuk a HTML

s esS-kdelemekkel egytt.
Ezt kveten szerepel az eredmnyknt kapott weboldal, gy, ahogy a felhasz

nJk ltjk majd a legnpszeruob webbngszkben.
A pldkat gyakran anlkl is a sajt oldalainkhoz igazthatjuk, hogy elolvasnnk

a hozzjuk tartoz szveget.
A knyv valamennyi pldja szabvnykvet, s mkdik az Apple Safari, a Google
Chrome, a Microsoft Internet Explorer, a Mozilla Firefax s az Opera bngszkben.
A kpernykpeket ugyan a Firefaxban ksztettk, de nyugodjunk meg: minden k
dot kiprbltunk a tbbi bngszben is.
Klnleges elemek
A leckk sorn klnfle szljegyzetek segtenek, hogy a tanultakat rgtn alkalmaz
hassuk is a sajt weboldalainkra:
A feltn keretben elhelyezett tippek olyan tancsokat adnak, amelyeket megfogad

va rtkes idt takarthatunk meg.
A megjegyzsek bvebb informcikat nyjtanak az adott tmrl.
Ha valamire klnsen gyelnnk kell, arra egy keretes Figyelmeztetsben hvjuk
fel a figyelmet.
xii
Krdezz-felelek, ismtl krdsek s gyakorlatok

Minden ra vgn egy rvid krdezz-felelek rszt tallhatunk, amelyben azokra a "bu
ta krdsekre" kell vlaszolnunk, amelyeket mindenki szeretne feltenni, de senki sem
mer. Ezt kveten ugyancsak rvid, de kimert ismtl krdsek kvetkeznek, ame
lyeknek a segtsgvel ellenrizhetjk, hogy mennyire sikerlt megrtennk a fejezet
ben tanultakat. A leckt vgl egy vagy tbb nem ktelez gyakorlat zrja, amelyek le
hetsget adnak az jonnan elsajttott kszsgek gyakorlsra, mieltt tovbblpnnk
1. RA
A Web mkdse
A lecke tartalma:
A Vilghl trtnete rviden
Mit jelent a "weboldal" kifejezs, s mirt nem tkrzi mindig az sszes

kapcsold tartalmat?
Hogyan jut el a tartalom a szemlyi szmtgpnkrl msok webbngszjbe?

Hogyan vlasszunk webgazdt?
Milyen hatssal vannak a klnfle webbngszk s eszkztpusok a tartalomra?
Mieltt megtanulhatnnk a HTML s a CSS finomsgait, fontos, hogy szilrd tudssal

rendelkezznk azokrl a technolgikrl, amelyek segtenek ezeket a sima szveges
fjlokat gazdag multimdis tartalomm alaktani a szmtgpnkn vagy egy
mobileszkzn, amikor a Vilghln bngsznk.
Egy HTML- s CSS-kdot tartalmaz fjl semmit nem r egy webbngsz nlkl,
amellyel megtekinthetjk, s rajtunk kvl senki nem fogja ltni az ltalunk ksztett
tartalmat, ha nem gondoskodik a kzzttelrl egy webkiszolgln. A webkiszolglk
teszik az ltalunk knlt tartalmat azok szmra elrhetv, akik a webbngszikkel
elltogatnak egy cmre, s vrjk, hogy a kiszolgl informcikat kldjn nekik.
1 Tanuljuk meg a HTML s a CSS hasznlatt 24 ra alatt
A folyamatnak mi is rszesei vagyunk, mivel neknk kell elksztennk a fjlokat, s

elhelyeznnk azokat egy kiszolgln, hogy hozzfrhetv vljanak, s neknk kell
gondoskodnunk rla, hogy a tartalom gy jelenjen meg a vgfelhasznlk szeme eltt,
ahogy szerettk volna.
A HTML s
Vilghl rvid trtnete
Rges-rgen, amikor mg nem voltak emberi lbnyomok sem a Holdon, lt nhny

jvbe lt ember, aki kvnesi volt r, hogy ssze tud-e ktni nhny nagyobb
szmtgpes hlzatot. A nevektl s az anekdotktl most megkmlnnk az Olvast
(pedig mindkettbl van jnhny)- elg annyi, hogy a tevkenysgk eredmnye
vgl "minden hlzat anyja" lett: az, amit ma Internet nven ismernk.
1990-ig az informcik elrse az Interneten keresztl meglehetsen mszaki jelleg
feladat volt. Valjban annyira nehz feladatnak bizonyult, hogy mg a doktori cmmel
rendelkez fizikusok is gyakran akadlyokba tkztek, amikor megprbltak adatokat
cserlni. Az egyik ilyen fizikus, a ma mr vilglr (s azta lovagg ttt) Sir Tim
Berners-Lee, ezrt kitallt egy mdszert arra, hogy egyszeren lehessen kereszthivatko
zsokat ltrehozni az Interneten tallhat szvegek kztt: a "hiperszveges" hjvatko
zsok, rviden hlperhlvatkozsok rendszert.
Az tlet nem volt j, de Berners-Lee egyszer hiperszveges jell- vagy lernyelve
(Hypertext Markup Language, HTML) fennmaradt, mikzben a nagyratrbb hipersz
veges megoldsok elbuktak. A hiperszveg eredetileg olyan, elektronikus formban
trolt szveget jelentett, amely kereszthivatkozsokkal kapcsolt ssze oldalakat.
A kifejezst ma mr szlesebb rtelemben hasznljk, s szinte brmilyen objektumra
(szvegre, kpekre s ms fjlokra) vonatkozhat, amelyet ms objektumokhoz
kapcsolhatunk A hiperszveges jellnyelv rja le, hogy a szvegek, grafikk s ms
informcikat tartalmaz fjlok hogyan plnek fel s kapcsoldnak egymshoz.
Ha tbbet szeretnnk tudni a Vilghl trtnetrl, olvassuk el a Wikipedia cikkt

a tmrl a h t tp: l l en. wikipedia. or g /wiki /History_of_the_Web
cmen.
1993-ban a vilgon csupn mintegy 100 szmitgp volt kpes HTML-oldalak kiszolg
lsra. Ezeket az sszekapcsolt oldalakat World Wide Webnek (WWW, Vilghl)
neveztk, s szmos webbngsz programot rtak, hogy lehetv tegyk a felhasz
nlknak a weboldalak megtekintst. A Web nvekv npszersge miatt nhny
programoz hamarosan olyan webbngszket kezdett kszteni, amelyek a szvegek
mellett kpek megjelentsre is kpesek voltak. Innen kezdve a webbngsz progra
rnak fejldse s a HTML - illetve az XHTML- nyelv szabvnyostsa elvezetett ahhoz
a vilghoz, amelyben ma lnk, s ahol tbb mint 110 milli webkiszolgl vlaszol
a 25 millirdnl is tbb szveges s multimdia-llomnyra irnyul krelmekre.
1. ra
A Web mkdse
la
Ebben a nhny bekezdsben csupn nagyon rviden foglalhattuk ssze a trtnelem

nek azt a szelett, amelyben figyelemre mlt vltozsok zajlottak Je. A mai kzpisko
lsok mr soha nem ltek olyan idkben, amikor a Vilghl nem ltezett, s az azonnal
"
hozzfrhet" informcik s mindentt jelen lev szmtgpek az letnk minden
terlett thatjk. Mire ennek a knyvnek a vgre rnk, a webes tartalmak ltrehozst
s kezelst nem olyan kszsgnek fogjuk tekinteni, amelyet csak nhny mszaki
rdeklds szemly (hvjuk ket gykoknak" vagy kockafejeknek") birtokolhat, ha
"
"
nem olyan tudsnak, amelyet brki elsajtthat, fggetlenl attl, hogy mennyire kocka"
"
legbell.
A webes tartalmak ltrehozsa

Taln felfigyeltnk r, hogy a weboldalak" helyett a webes tartalom" kifejezst hasz
"
"
nltuk- szndkosan. Br azt mondjuk, hogy Jelkeresnk egy weboldalt", valjban
azt rtjk alatta, hogy megtekintjk azokat a szvegeket s kpeket a szmtgpnkn,
"
amelyek egy adott webcmen tallhatk". A szveget, amelyet olvasunk, s a kpeket,
amelyeket ltunk, a webbngsznk lltja el az egyes fjlokban tallhat utastsok
alapjn.
Az emltett fjlok jell- vagy lerkddal elltott szveget tartalmaznak; ezek a HTML
kdok mondjk meg a bngsznek, hogy miknt kell megjelenteni a szveget - cm
sorknt, bekezdsknt, piros betkkel, s gy tovbb. Egyes HTML-lerkdok arra
utastjk a bngszt, hogy egyszer szveg helyett egy kpet vagy egy mozgkpes
llomnyt jelentsen meg, s ezzel mris visszakanyarodtunk a lnyeghez: a webbng
sznk klnfle tpus tartalmakat kap, ezrt a weboldal" kifejezs nem fedi le megfe
"
lelen a tartalmat. Helyette gy a "webes tartalom" kifejezst hasznljuk, amelybe
az Interneten tallhat szvegek, kpek, illetve hang-, vide- s egyb multimdiafjlok
teljes krt belertjk
A ksbbi leckkben elsajttjuk az alapjait annak, hogy miknt kapcsolhatjuk ssze vagy
hozhatjuk ltre a klnfle multimdis webes tartalmakat, amelyek a webhelyeken
tallhatk. Most csak annyit kell megjegyeznnk, hogy mi ta1tjuk kzben a tartalmat,
amelyet a felhasznl lt, amikor felkeresi a webhelynket A megjelentend szveget,
illetve a kiszolglt kpek elkldsre utast kdokat tartalmaz fjllal kezdve neknk
kell megterveznnk s elksztennk minden alkotrszt, amelybl vgl felpl
a webes jelenltnk. Ahogy a knyv sorn megtanuljuk majd, mindez nem bonyolult,
ha rtjk az egyes lpseket
A webes tartalom alapveten egy egyszer szvegfjllal kezddik, amely HTML- vagy
XHTML-lerkdot tartalmaz. Az XHTML a HTML egyik vltozata- az X" az eXtensible,
"
vagyis bvthet" rvidtse; az XHTML-rl a leckk sorn tbbet is megtudunk majd.
"
Most elg annyit tudnunk, hogy a ktet minden pldja megfelel a HTML 4 s
az XHTML kvetelmnyeinek, ami azt jelenti, hogy a mai webbngszk s a jvbeli,
kvetkez genercis bngszk ugyangy fogjk lekpezni ket. Ez az egyik elnye

annak, ha szabvnykvet kdot runk: nem kell aggdnunk amiatt, hogy a jvben
vissza kell trnnk a kdhoz, hogy mdostsuk, mert "nem mkdik". A kdunk
valsznleg rnindig "mkdni" fog, legalbbis amg a webbngszk tartjk magukat
a szabvnyokhoz (vagyis remlhetleg hossz-hossz ideig).
A webes tartalmak kzbestsnek mdja

A vgeredmnyknt megjelentett webes tartalom ellltsa klnfle, ms-ms helye
ken zajl mveleteket ignyel. Ezek a mveletek nagyon gyorsan- ezredmsodpercek
alatt- hajtdnak vgre, a sznfalak mgtt. Ms szavakkal, rnikzben azt hisszk, hogy
csupn megnyitunk egy webbngszt, berunk egy webcmet, s mris ltjuk a krt
tartalmat, a httrben mkd tehnolgia kemnyen dolgozik rtnk. A bngsz s
a kiszolgl kztti alapszint kommunikcit az 1.1. bra szemllteti.
A webbngsztl a kiszolglhoz
intzett krelem
1.1. bra
A kiszolgltl
a webbngsznek kldtt vlasz
A bngsztl rkez krelem s

a kiszolgltl kapott vlasz
Az brn lthat folyamat m.indazonltal tbb lpsbl ll, s akr tbb krt is megtehet
a bngsz s a kiszolgl kztt, rnieltt a krt webhely tartalma teljes egszben
megjelenne.
Tegyk fel, hogy egy keresst szeretnnk vgrehajtani a Google-ben. Ktelessgtudan
berjuk ht a http: l /www. google. com cmet a cmsvba, vagy kivlasztjuk a Google
knyvjelzjt a knyvjelzlistnkbL A bngsz szinte azonnal megjelenti az 1.2. brn
lthathoz hasonl tartalmat.
Az 1.2. brn egy olyan webhelyet lthatunk, amely szveget, valarnint egy kpet
(a Google emblmjt) tartalmaz. Az emltett szvegnek s kpnek a webkiszolglrl
trtn lehvshoz, illetve a kpernynkn val megjelentshez szksges mveletek
leegyszerstve a kvetkezk:
1.
A webbngsz kiad egy krelmet a ht tp: 1 /www. google. com/ cmen tallhat
index. html fjlra. Az index. html fjlnevet nem kell bernunk a eim rszeknt
a cmsvba (az index. html fjlrl a 2. rn bvebben is tanulunk).

2.
Arnikor a webkiszolgli folyamat egy adott fjira irnyul krelmet kap, meg
keresi a fjlt a knyvrrai tartalomjegyzkben, megnyitja, s elkldi a tartalmt
a webbngsznek.
1. ra
co
http-J/gle.cony
Web l!!!o!lfi Mil l'IJrt l1l!oi>Sl!ll9 lllllill l!H!!i
liD 1
A Web mllkdse
Js
.Q_]
1 Searchsenmos l Stmill
____",
l Google Search ll rm Feellg Lucky J

Now explore alJ 50 US States m Street View Welcgme Hawan!
Adyert1smgPrOCJaffii BusLoe ss Sofutions-
1.2. bra
e2009 f:!!l!6r
Done
3.
+'
A www.google.com
weboldala
A webbngsz megkapja az index. html fjl tartalmr, amely HTML-kdokkal

jellt szvegbl ll, s az emltett HTML-kdok alapjn lekpezi a tartalmat.
A tartalom lekpezse sorn a bngsz rakad az 1.2. brn lthat Google
emblma HTML-kdjra. Ez a HTML-kd gy fest:
<img src="/logos/logo.gif" width="384" height="121" border="O"

alt="Google"/>
A fenti cmke olyan jellemzket tartalmaz, amelyek elruljk a bngsznek a fjl
forrshelyt (src), a kp szlessgt (width) s magassgt (height), a kp
keretnek (szeglynek) tpust (border), valamint a kp helyettest szvegt
(al t), amelyek az emblma megjelentshez szksgesek. A jellemzkrl

a ksbbi leckkben bvebben is tanulunk.
4.
A bngsz megvizsglja az <img/> elem src jellemzjt, hogy megtudja, hol kell
keresnie a kpfjlt. Esetnkben a logo. gif kp a logos knyvtrban tallhat
ugyanazon a webcmen (www.google.com), rnint ahonnan a bngsz lekrte
a HTML-fjlt.
5.
A bngsz elkri a http: l /www.google. com/logos/logo.gif webcmen

tallhat fjlt.
6.
A webkiszolgl feldolgozza a krelmet, megkeresi a fjlt, s elkldi a tartalmt

a krelmez webbngsznek
7.
A webbngsz megjelenti a kpet a monitorunkon.
Ahogy a webes tartalom kzbestsi folyamatnak lersbl lthatjuk, a webbngszk

nem pusztn kpkeretek, amelyekben tartalmat tekinthetnk meg. A bngsz lltja
ssze a webes tattalarn sszetevit, s rendezi el azokat a fjlban tallhat HTML-paran
csoknak megfelelen.
si Tanuljuk meg a HTML s a CSS hasznlatt 24 ra alatt

A webes tartalmat "helyben", vagyis a sajt merevlemeznkrl is megtekinthetjk, anl
kl, hogy szksg lenne egy webkiszolglra. A tartalom lekrsnek s megjelenit

snek folyamata ebben az esetben is ugyanazokbl a lpsekbl ll, mint amelyeket
fentebb ismertettnk-a bngsz megvizsglja s rtelmezi a HTML-fjlban tallhat
tartalmat s kdokat- de az t rvidebb, mert a bngsznek a sajt szmitgpnk
merevlemezn kell kutakodnia, nem pedig egy tvoli gpen. Mindazonltal a fjlokba
begyazott, kiszolgloldali programozsi nyelven rt utastsok feldolgozshoz ekkor
is sZksges egy webkiszolgl, de ennek trgyalsa kvl esik knyvnk keretein. Va
ljban a knyv sszes leckjn vgigrghatjuk magunkat anlkl, hogy webkiszolg
lra lenne szksgnk, de akkor senki sem ltn a mestermvnket
A webgazda kivlasztsa
Annak ellenre, hogy ppen az imnt mondtuk, hogy a knyv sszes leckjn vgigrg
hatjuk magunkat anlkl, hogy webkiszolglra lenne sZksgnk, ajnlott egy webki
szolglt ignybe vennnk.
e aggdjunk-egy webgazda-szolgltatshoz ltalban
gyorsan, fjdalommentesen s viszonylag olcsn hozzjuthatunk. Valjban egy sajt

tartomnynv beszerzse s egy vnyi trhelybrls alig kerl tbbe, mint ez a knyv.
Ha berjuk a web hosting provider kifejezst a kedvenc keresnkbe, tbb milli keressi
eredmnyt s fizetett tallatok (rtsd: reklmok) vgtelen listjt kapjuk. A vilgon
persze nem tevkenykedik ennyi webgazda-szolgltats, csak gy tnik, mintha ilyen
sokan lennnek. De ha csak a ltez webtrhely-szolgltatk listjt tekintjk t, mr
az is hatalmas mennyisg-klnsen ha csupn egy olyan helyet keresnk, ahol elhe
lyezhetjk a sajt vagy a cgnk egyszer kis webhelyt
A keresst clszer azokra a szolgltatkra leszktennk, amelyek a leginkbb
megfelelnek az ignyeinknek A webgazda kivlasztsnak legfontosabb szempontjai

a kvetkezk:
Megbzhatsgikiszolgli ..brenlt"-Ha webes jelenltet szeretnnk, biztosnak kell

lennnk benne, hogy a felhasznlk llandan elrhetik a webhelynket
gyflszolglat-rdemes megvizsglnunk, hogy a szaigitat tbbfle csatornn

keresztl (telefonon, elektronikus levlben, csevegszolgltatssal) is rendelke
zsre ll-e, valamint hogy van-e online tjkoztat a gyakrabban elfordul
problmkrl.
Kiszolgli trterlet -A szolgltatscsomag elegend kiszolgli terletet nyjt

ahhoz, hogy a webhelynkn tervezett sszes multimdis fjl (kpek, hang- s
videfjlok) elfrjen?
Svszlessg
A szolgltatscsomag elegend svszlessget biztost ahhoz, hogy
a webhelynk minden ltogatja Ietltbesse a tartalmakat anlkl, hogy tbblet

djat kellene fizetnnk?
1. ra
A Web mllkdse
(7
Ta rtomnynv vsrls s kezels - A csomag egyedi tartomnynevet is tartalmaz,

-
vagy a webgazda-szolgltatstl fggetlenl kell megvsrolnunk s fenntarta

nunk azt?
r- Ne fizessnk tbbet a webgazda-szolgltatsrt, mint amennyit felttlenl

szksges! Az rak szles skln mozognak, ezrt rgtn felmerlhet bennnk
a krds, hogy milyen klnbsg mutatkozik a szolgltatsban. A klnbsgnek
azonban ritkn van kze a szaigitats minsghez- csupn a szolgltat
kltsgeit tkrzi, illetve azt, hogy szerintk mennyi pnzt lehet eikrni
az gyfelektL Alapszablynak megfelel, hogy ha egy alapszint webgazda
szolgltatsi csomagrt s egy tartomnynvrt vi
75 dollrnl tbbet fizetnk,
akkor valsznleg tl sokat krnek tlnk.

Az Amerikai Egyeslt llamokban hrom megbzhat webtrhely-szolgltatt emlthe
tnk, akiknek az alapcsamagja bsges trhelyterletet s svszlessget tartalmaz

(valamint tartomnyneveket s egyb tbbletszolgltatsokat), viszonylag alacsony ron.
Ha nem is ezek mellett a szolgltatk mellett dntnk, az alapcsomagjuk lerst akkor
is hasznos tmutatnak tallhatjuk a keresglshez.
A Small Orange
(http:
l lwww.
asmallorange. com) -A T iny s a Small csoma
gok tkletes kiindulpontot jelenthetnek azoknak, akik most tesznek kzz

elszr webes tartalmakat.
DailyRazor
(http:
l lwww. dailyrazor.
com)- A RazorLIMIT s a RazorSTARTER
szolgltatscsomagok minden szksges szolgltatst tartalmaznak, s megbzha

tak.
LunarPages
(http:
l lwww. l unarpages.
com)- A Basic szolgltatscsomag
a legtbb szemlyes s kisvllalati webhely szmra megfelel.

A j webtrhely-szolgltatk egyik ismrve, hogy a rendelkezsnkre bocstanak egy
"vezrlpultot", amelyen belltsokat adhatunk meg a fikunk szmra. Az
1.3. brn
a sajt RazorPRO-fikom vezrlpultjt lthatjuk aDaily Razor szolgltatnl. Ezt a konk

rt vezrlpult-szaftvert vagy valamelyik ehhez hasonl felpts programot sok
webgazda alkalmazza, mert az egyrtelm nev ikonok segtsgvel mindazokat a fel
adatokat vgrehajthatjuk, amelyek a fikunk belltshoz s kezelshez szksgesek.
Lehet, hogy a vezrlpult hasznlatra soha nem lesz szksgnk, de ha a rendelkez
snkre ll, az (tbbek kztt) egyszerbb teszi az adatbzisok s ms prograrnak
teleptst, a webes statisztikk megtekintst, vagy az e-mail cmek felvtelt.
Ha kpesek vagyunk utastsokat kvetni, sajt magunk kezelhetjk a webkiszolg
lnkat- nincs szksg kln tanfolyam elvgzsre.
8) Tanuljuk meg a HTML s a CSS hasznlatt 24 ra alatt

l= lill
. c
l3 l
,fil
cPanel
)(.
Welcome thkkbook.com'
General account information:
Lut login from 82.207.114.213
Ho1bng tdge
R.aorPro
Sh.,.d Ip Add...u
7.5.126.153.164
Mao!
Webmeol
........
F'TPManv
File Manegv
Dtsk SjM:e
l/unllmtt.d
O
l unllmot.d
Change
Perk-cj
Ooma1ns
Addon
&ackups
..,..
;"
1/100
l/25
Usage
-od
Oa-
0/25
..
MySQl o k SJNc
O...k sp...:e aYuJable
S.ndll'lldth (ttu
month)
25.32 Nabytes
'J.Bl Megabyt.:s
_.t\.
Error paget
Subdomain
Unlimrutd Megabytes
22!1!5.33 M-vabyte11
Do
MySQ
Dat.bJes
: ..
---
PotltgreSQL
SSH/Sh-JI
Oatabau
1.3.
bra
Szokvnyos
vezrlpult
Tesztels tbb webbngszben

Most, hogy megismertk a webes tartalom kzbestsnek folyamatt, illetve
a webkiszolgl beszerzsnek mikntjt, furcsnak tnhet, hogy visszalpnk, s arrl
beszlnk, hogy a webhelynket tbb webbngszvel is tesztelnnk kell. Mieltt
azonban nekilthatnnk, hogy mindent megtanuljunk arrl, hogyan hozhatunk ltre
webhelyeket a HTML s a CSS segtsgve!, az esznkbe kell vsnnk egy nagyon fon
tos dolgot: valszn, hogy a webhelynk minden ltagatja a minktl eltr hardver
s szaftversszelltst fog hasznlni.
e feledjk, hogy nincs beleszlsunk abba, hogy
a ltogatink a webhely megtekintshez rnilyen eszkzket (asztali vagy hordozhat

szmtgpet, okostelefont, iPhone-t), milyen kpernyfelbontst, milyen bngszt,
a bngszben milyen ablakmretet, s milyen sebessg kapcsolatot hasznlnak.
Br minden webbngsz azonos mdon dolgozza fel s kezeli az informcikat,
vannak kzttk bizonyos klnbsgek, amelyek eredmnyekppen a klnbz
bngszkben ms-ms mdon jelennek meg az oldalak. Mg az ugyanannak a bn
gsznek ugyanazt a vltozatt hasznl felhasznlk is megvltoztathatjk az oldalak
kpt, ha mdostjk a megjelensi belltsokat vagy az ablakok mrett. Minden
elterjedtebb bngsz lehetv teszi a felhasznlnak, hogy fellbrlja a weboldal
1. ra
A Web mkdse
fg
szerzje ltal meghatrozott htteret s betjellemzket, s a sajt belltsait juttassa

rvnyre. A kperny felbontsa, az ablakmret s a bepl eszkztrak ugyancsak
befolysoljk, hogy a felhasznl mennyit lt egy oldalbl a kpernyjn. Mi csak azt
biztosthatjuk, hogy a HTML- s CSS-kdunk szabvnykvet legyen.
Semmilyen krlmnyek kztt ne tltsnk rkat vg nlkl azzal, hogy valamit "t
kletesre" csiszolunk a sajt szmtgpnkn, hacsak nem llunk kszen a csaldsra,
ami akkor r minket, amikor megtekintjk a mvnket egy bartunk gpn, a sarki
kvz terminljn vagy az iPhone-unkon.
A webhelyeinket clszer mindig ellenrizni legalbb a kvetkez bngszkkel:
Apple Safari (http: l /www.apple.com/safari/) Mac-re s Windowsra
Google Chrome (http: l /www.google.com/chrome) Windowsra
Mozilla Firefax (http: l /www. mozilla.com/firefox/) Mac-re, Windowsra s

Linuxra
Microsoft Internet Explorer (http: l /www. microsoft.com/ie) Windowsra
Opera (http: l /www.opera.com/) Mac-re, Windowsra s Linux/UNIX-ra
sszefoglals
Ezen az rn a webes tartalom ellltsnak annak az elvvel ismerkedtnk meg,
amely szvegfjlok HTML-kdokkal trtn megjellsn alapul. Azt is megtanultuk,
hogy a webes tartalom nem csupn oldalakat" jelent, hanem a kpek, valamint
"
a hang- s videfjlok is a rszt kpezik. Mindez a tartalom egy webkiszolgln kap
helyet, vagyis egy olyan tvoli szmtgpen, amely ltalban nagyon messze tallhat
a sajt gpnktL A szmtgpnkn s ms eszkzkn egy webbngsz segts
gvel hvjuk le, dolgozzuk fel s jelentjk meg a webes tanaimat a kpernynkn.
Lttuk, hogy milyen szempontokat kell figyelembe vennnk, amikor eldntjk, hogy
egy adott webgazda megfelel-e az ignyeinknek, s azt is megtanultuk, mennyire
fontos, hogy a munknkat tbb bngszben is ellenrizzk, miutn elhelyeztk egy
webkiszolgln. Ha rvnyes, szabvnykvet HTML- s CSS-kdot runk, az segt,
hogy a webhelynk tbb-kevsb egyformn jelenjen meg minden ltogat szmra,
de ettl fggetlenl clszer a tervezs sorn nem csak a fejlesztcsapatunk, hanem
a megclzott kznsg visszajelzseit is figyelembe venni- a kvlrl kapott visszajel
zsek klns fontosak, ha mi vagyunk a fejlesztcsapat" egyetlen tagja.
"
Krdezz-felelek
K:
V:
"
"Weboldal" helyett "webes tartalmat" mondtunk, de sokan mgis "weboldalakrl
"
beszlnek. Mit rtenek alatta? Miben klnbznek ezek a kifejezsek a "honlap
"
vagy a "webhely fogalmtl?
A Vilghlt mindig is knnyen el lehetett kpzelni gy, mint egy knyvtrat,
amelyben az egyes webhelyek a knyvek, a webhelyeken ell1elyezett, tartalmat
hordoz fjlok pedig a knyvek "oldalai". Egy "webhely" egy vagy tbb, egyide
jleg ltrehozott s a tartalmt tekintve egymssal kapcsolatban ll oldalbl ll.
A "honlap" ltalban az els oldalt jelenti, amelyet a ltogatk ltnak, amikor
megnyitnak egy webhelyet Problma akkor addhat, ha valaki azt mondja,
hogy "ltogasd meg a weboldalamat", amikor valjban azt rti alatta, hogy "l
togass el a webhelyemre" - egy webhely ugyanis szmos oldalbl ll. Ha webes
tartalmak egy gyjtemnyre nem webhelyknt, hanem oldalknt hivatkozunk,
akkor azt hihetik, hogy nem igazn rtjk, hogyan mkdik a Web -vagy azrt,
mert nem tudjuk, hogyan alkotnak a webes tartalmak egyttesen egy webhelyet,
vagy azrt, mert eddig csak olyan webhelyeket terveztnk s valstottunk meg,
amelyek egyetlen oldalbl llnak.
K:
V:
"
Megnztem nhny weboldal "HIML-jorrst az Interneten, s nagyon bonyo
lultnak tnik. gy kell gondolkodnom, mint egy szmtgp-programoznak,
ha meg szeretnm tanulni, hogyan mkdik a kd?
Br az sszetett HTML-oldalak kdja valban ijeszt lehet, a HTML hasznlatt
sokkal knnyebb megtanulni, mint a szaftverprogramozsi nyelvekt (amilyen

pldul a C++ vagy a Java). A HTML jell- vagy lernyelv, nem pedig progra
mozsi nyelv: szveget cmkznk fel vele, hogy a bngsz azt adott mdon
jelenthesse meg. Ez teljesen ms megkzeltst ignyel, mint egy szmtgpes
program fejlesztse.
incs szksg semmilyen programozi tudsra vagy
tapasztalatra ahhoz, hogy sikeresen llthassunk el webes tartalmat.

Annak, hogy sok kereskedelmi webhelyen bonyolultnak tnik a HTML-kd,
az az egyik oka, hogy valsznleg valamilyen grafikus (vizulis) webtervez
eszkzzel-gynevezett WYSIWYG ("what you see is what you get" - "azt ka
"
pod, amit ltsz ) szerkesztvel, amely behelyettesti azt a lerkdot, amelyet
az adott krlmnyek kztt a szaftver fejlesztje ltal beleprogramozott utasts
szerint be kell rnia-hoztk ltre, nem pedig kzi mdszerrel, amikor is mi tart
juk kzben teljesen az eredmnyknt kapott lerkdot Ebben a knyvben
a kdolst az alapoktl kezdve tanuljuk meg, ami ltalban tiszta, knnyen
olvashat forrskdot eredmnyez. A grafikus webtervez eszkzk hajlamosak
nehezen olvashatv tenni a kdot, illetve olyan kdot ellltani, amely tlbo
nyoltott, s nem kveti a szabvnyokat
1. ra
A Web mkdse
(tt
Ismtls
Ez a rsz ismtl krdsekbl s vlaszokbl ll, amelyek segtsgvel megszilrdt
hatjuk az ebben a leckben szerzett tudsunkat. Prbljuk megvlaszolni a krdseket
a vlaszok ellenrzse eltt.
Ismtl krdsek
1.
Hatrozzuk meg a webes tartalom kifejezs jelentst!
Z.
Hny fjlt kell trolnunk a webkiszolgln egyetlen, szveget s kt kpet
3.
Milyen szolgltatsokat kell grcs al vennnk egy webgazda esetben?
tartalmaz weboldal ellltshoz?
Vlaszok
1.
A webes tartalom kifejezs azoknak a szvegeknek, kpeknek, hang- s

videfjloknak s egyb multimdis llomnyoknak a teljes krt lefedi,
amelyeket a webkiszolglkrl kzbestenek a webbngszknek
Z.
Hrmat: egyet maghoz a weboldalhoz, amelyben a szveg s a HTML-lerkd

kap helyet, s egyet-egyet a kt kp szmra.
3.
A megbzhatsgot, az gyflszolglatot, a webes trterletet s a svszlessget,

a tartomnynv-szolgltatsokat, a webhely-felgyeleti kiegszt szolgltatsokat,
valamint az rat.
Gyakorlatok
Tisztzzuk a webgazda krdst: gy szeretnnk elvgezni a ktet leckit, hogy

a fjlokat helyben, a sajt szmtgpnkn tekintjk meg, vagy egy webtrhely
szolgltatt szeretnnk ignybe venni? A dntsben segtl1et, ha tudjuk, hogy
a legtbb webgazda mg azon a napon elindtja a szolgltatst, amikor brbe
vesszk a trhelyet.
2. RA
A lecke tartalma:
Alapszint HTML-fjlok ltrehozsa szvegszerkesztvel
A fjlok tvitele a webkiszolglra az FfP segtsgvel
Hol helyezzk el a fjlokat a webkiszolgln?
A webes tartalom kzzttele webkiszolgl nlkl
Hogyan alkalmazzuk az egyb kzztteli mdszereket, pldul a webnaplkat?
Az elz rn megtudtuk, hogy krhetnk webes tartalmat egy webbngszn keresz

tl, s hogyan vlaszol a webkiszolgl a krelmekre. Ezen az rn azt tanuljuk meg,
hogy tartalomksztknt mi a szerepnk az Interneten elrhet webes tartalmak
kzzttelben - a tartalmat ugyanis kzz kell tenni egy webkiszolgln, hogy msok
hozzfrhessenek.
Az ra pldafjljnak elksztse
Mieltt elkezdennk az rt, vessnk egy pillantst a 2.1. pldra. A pldban lthat
kd egyszer webes tartalmat takar: nhny sornyi HTML-kd, amely a "Hello World!
Welcome to My Web Server." szveget rja ki, nagy, flkvr betkkel, kt sorban,
a bngsz ablakban kzpre igaztva.
14
2.1.
plda
HIML-pldafjltmk
<html>
<head>
<title>Hello World!</title>
</head>
<body>
<hl align="center">Hello World!<br/>Welcome to My Web Server.</hl>
</body>
</html>
Ennek a tartalomnak a hasznostshoz nyissuk meg a kedvenc sima szveges szerkesz

tnket, pldul a Jegyzettmbt C otepad, W indowson) vagy a TextEditet (Macen).
WordPadet, Microsoft Wordt vagy ms teljes kr szolgltatst nyjt szvegszerkeszt
programot ne hasznljunk, mert ezek msfajta fjlokat hoznak ltre, nem pedig olyan
sima szvegfjlokat, amelyekre a webes tartalomhoz szksgnk van.
A szvegszerkesztkrl bvebben is tanulunk a 3. rn; most csak annyit szerettnk

volna, hogy legyen egy pldafjlunk, amelyet elhelyezhetnk egy webkiszolgln.
rjuk be a 2.1. pldban lthat tartalmat, s mentsk a fjlt sample. html nven.
A . html kiterjeszts rulja el a webkiszolglnak, hogy a fjl HTML-kdot tartalmaz, s
amikor a kiszolgl elkldi a fjl tartalmt a bngsznek, a bngsz is innen tudja,
hogy HTML-rl van sz, s ennek megfelelen kpezi le a fjlt. Most, hogy van egy
HTML-pldafjlunk, amelyet hasznlhatunk- s remlhetleg elhelyezhetnk valahol,
pldul egy webtrhely-szolgltati fikban-, rtrhetnk a webes tartalom kzz
ttelre.
Fjlok tvitele
az
FTP segtsgvel
Ahogy mr megtanultuk, a webes tartalmat egy webkiszolgln kell elhelyeznnk,

hogy msok szmra hozzfrhetv tegyk. Ezt a mveletet rendszerint a fjltviteli
protokoll (File Transfer Protocol,
FTP) segtsgvel hajtjuk vgre. Az FTP hasznlathoz
egy FTP-gyflre van szksgnk, vagyis egy olyan programra, amellyel tvihetjk
a fjlokat a szmtgpnkrl a webkiszolglra.
Az FTP-gyfelek hromfle informcit ignyelnek ahhoz, hogy kapcsolatot tudjanak
teremteni a webkiszolglvaL Ezeket az informcikat a webgazda adja meg neknk,
amikor fellltjuk a fikunkat:
Az llomsnv (hostname) vagy cm, amelyhez majd kapcsoldunk
A fikunk felhasznlneve (user name)
A fikunk jelszava (password)
2. ra
115
Ha rendelkeznk ezekkel az adatokkal, kszen llunk arra, hogy egy FTP-gyfl

segtsgvel tartalmat vigynk t a webkiszolglnkra.
FTP-gyfl kivlasztsa
Az
Fggetlenl attl, hogy milyen FTP-gyfelet hasznlunk, az FTP-gyfl ltalban

ugyanolyan felletet nyjt a szmunkra. A 2.1. brn a FireFTP fellett lthatjuk; ezt
az FTP-gyfelet hasznlja a Firefax webbngsz. A helyi szmtgp (a mi szrrtg
pnk) knyvtrlistja a kperny bal oldaln jelenik meg, a tvoli gp (a webkiszolgl)
tartalma pedig jobboldalt. Ahogy a 2.1. brn is lthat, jellemzen kapunk egy jobbra,
valamint egy balra mutat nyilat brzol gombot. A jobbra mutat nyllal a kivlasztott
fjlokat a szmtgpnkrl a webkiszolglra kldhetjk, mg a balra mutat nyllal
a webkiszolglrl vihetnk t fjlokat a sajt gpnkre. Sok FTP-gyfl azt is lehetv
teszi, hogy egyszeren kijelljk a kvnt fjlokat, s az egrrel tl1zzuk azokat a clgp
knyvtrlistjba.
.. l
C!'
loo"
QtKonned fdit Abort
C:\l/Rn\JM\0--;;top
Size Date
Name
1 e
)trowse
Typ<
"'
Name
Jun 20 6:19 ...

May 30 S:lH.
[:)SMl9_ENGl403
Jun 18 6:25 HO
Wwp
Owsu_worlcing
l KB Aug 5 2008
Ink
4121<8 Aug262005 ec:e
#putty.oe
i}training_cal_erted.doa
11 KB Jun 17 2:08
... doa:
PASI/
(!Jil
l
"'
Sae: Date
4KB MaytiL
ma1l
41CB Jun241...
Opublk_ftp
4KB M.y-174 KB AugllL
, ; public_html
Jun 216:11 ...
doa.lnk
'1
J:jdp
CMnge
HB Moy62-
o..,
Jun216:08 .
sams_htmkss
Oaccesslogs
Junl.97:39-
QR19_B73
i1i
o,
4KB Jun242...
. Cltmp
.owww
: www_ncludes
4KB AtJ9llL
4KB May 6 2...
Passrve Mode (67,210.98,190,45,55)

MLSD
l SO Accepted data connecbon
226-{)ptfons; -a l
227 Entenng
226 25 matches total
NDOP
200 Zzz.
bra
FireFIP
fellete
2.1.
A
.ogiQu..,.
lonllisting.: g objed:(s). 46D.!J KB, Disk Sp.a Avait.bte: 815 GB
Aut o
--
-='
Szmos szabadon hozzfrhet FTP-gyfl ll a rendelkezsnkre, de fjlokat tvihe

tnk a webes alap File Manager (Fjlkezel) eszkz segtsgvel is, amelyet valsz
nleg megtallunk a webkiszolglnk vezrlpultjn. A fjltvitelnek ez a mdszere
azonban ltalban tovbbi lpsekkel bvti a folyamatot, teht nem olyan egyszer,
mint egy FTP-gyfl teleptse a szmtgpnkre. me nhny npszer ingyenes
ITP-gyflprogram:
Classic ITP
Cyberduck
Fetch
Filelilla
(http: l /filezilla-project.org/)
FireFTP
(http: l /fireftp.mozdev.org/)
(http: l /www.nchsoftware.com/classic/)
(h ttp: l l cyberduck. ch/)
Mac-re s Windowsra
Mac-re
(http: l l fetchsoftworks. com/)
Mac-re
minden rendszerre
Firefax-bvtmny minden rendszerre

Miutn kivlasztottunk egy FTP-gyfelet, s teleptettk azt a szmitgpnkre, kszen
llunk r, hogy fjlokat tltsnk fel a webkiszolglra, illetve fjlokat tltsnk le on
nan. A kvetkez rszben azt mutatjuk be, hogyan mkdik mindez az ra elejn elk
sztett pldafjl esetben.
Az FTP-gyfl hasmlata
Az albbiakban bemutatott lpsek azt rjk le, hogy miknt kapcsoldhatunk a Classic
FTP segtsgvel a webkiszolglhoz, s vihetnk t egy fjlt. Mivel azonban minden
FTP-gyfl hasonl - ha nem pontosan ugyanilyen - felletet hasznl, ha megrtjk
a lpseket, brmelyik FTP-gyfl hasznlatra kpess vlunk.
Ne feledjk, hogy elszr is szksgnk lesz az llomsnvre, a fikhoz kapcsold
felhasznlnvre, valamint a fik jelszavra.
1.
Indtsuk el a Classic FTP programot, s kattintsunk a Connect (Kapcsolds)

gombra. A program elszr arra kr, hogy adjuk meg annak a webhelynek
az adatait, amelyikhez kapcsoldni szeretnnk (lsd a 2.2. brt).
2.
Tltsk ki a 2.2. brn lthat sszes mezt az albbiak szerint:
A sajt webhelynkre Label nven fogunk hivatkozni. Ezt a nevet senki
Az FTP Server (FTP-kiszolgl) mezbe annak a webkiszolglnak
ms nem fogja ltni, vagyis tetszleges nevet berhatnnk

az FTP-cmt kell berni, amelyiken el szeretnnk helyezni a weboldalain
kat Ezt a cmet a webgazda adja meg a szmunkra. A formja valszn
leg tartomny. com lesz, de azrt ellenrizzk az informcit, amit akkor
kaptunk, amikor elfizettnk a szolgltatsra.
A User Name (Felhasznlnv) s Password Qelsz) mezket ugyancsak

azoknak az adatoknak a felhasznlsval kell kitltennk, amelyeket
a webgazdtl kaptunk.
Az Initial Remote Directory on First Connection (Tvoli kezdknyvtr
az els kapcsoldsnl) s az Initial Local Directory on First Connection

(Helyi kezdknyvtr az els kapcsoldsnl) belltsokon ne vltoztas
sunk, amg hozz nem szaktunk az gyflprogram hasznlathoz, s ki
nem alaktottuk a szmunkra megfelel munkafolyamatot.
3.
Ha vgeztnk a belltsokkal, az OK gombra kattintva mentsk ket, s hozzuk

ltre a kapcsolatot a webkiszolglval.
Ekkor egy prbeszdablakot fogunk ltni, amely arrl tjkoztat, hogy a Classic
FTP megksrel kapcsoldni a webkiszolglhoz. Sikeres kapcsolatfelvtel
esetn a 2.3. brn lthathoz hasonl fellet jelenik meg, a helyi knyvtr
tartalmval a bal, s a webkiszolgl tartalmval a jobb oldalon.
4.
Most mr majdnem kszen llunk r, hogy fjlokat vigynk t

a webkiszolglnkra. Csak annyi van htra, hogy tvltsunk a webkiszolgln
az gynevezett dokumentumgykrre (document root) vagy gykrknyvtrra.
2. ra
]'V
ll
,.,
dp
"""'
FTP Servs
eg l'lp rchsol\ com
U..Nane
r-
"""""""
.......
l:] U.. S..U. FTP (qti SSL)

...._ Remole Chc::torym Fnt Cornedlan
o
and_w
Reqcle
l.hethela:A!CeftRI!IOOI:edred:ory
Lile tht dredory
Rende dmctory
ar_pdfs-
109_0
o2i
diss
'ls-
''q.'www:+trnl
nbal l.ocal Chc:tcxy cn Fnt Comedicin

' Uselhe
leCel"tlccaldred:ory
....
Use ths chd:ory ._".
,obmar
Now fo
tMtUI'1
muerhu
"""'
J
l F ji [_
localdncl:orypath
--
tb
-"""'J
-....-..
l
)
-m --..
ClassK:FTPv
2.2. bra
Kapcsolds egy j webhelyhez a Classic FTPben
C30awcFTP
l.a-"11 -,..
[_FH
Sct.u
To.
ConMCt
C<\JM"""'
IDp
0Jscon
Options
.. ,,.,.
Nom
u_pdf
diu
ac<ld_worbng
D.te modified
Typo
l.l/2120098:59AM
FiFolde
1.1Jl5,12001J9:53AM
FileFokter
F09_B73
i2o
1112/2009 7:31 AM
Filefolder
ll/1.5/20098:.13AM
filefolder
11/14/20093 PM
Filefolder
JObrmrlc:l!"t
llJlJ/20096:58PM
Filefolder
muirhum!fmth
sm/2009 &:17AM
Fileftlder
Newfolder
11/14/2009 4:35 PM
FileFtld6
thatumppnw
10!17!1!XYJ6:24AM
Filefolder
1018/200910:40AM
FileFolder
2009Nft Pool Mtiter-...
llll3/20091:11AM
c{doa
8/511.0081 0'.18AM
Short cut
melonl-art:ic-17.doc
ll/14.12009 10:11 -
MicrosoftO
- meloni-lfdited.pdf
ll/1412009 10<13...
AdobeAcre
S/26!20057:JBAM
Application
11!15/20091<>.03 -
PNG lmage
8,111120099-36AM
ApplicatJon
joputty.se
IL WindowCiippmg.png
D.
.tiJWindowClipp1ngur:e
Tiaao J'
Classic FTP.png
11115/2009 10:04 ..
----"
Classic:FTP v 1.10 NCH Softwan!
MKrosoftO
PNG lmage
--
, ""l A""
""""
.
@]
,.. ,
lCI
sa. r,..
Cl.o""""
o ...............
O.fonla>nfig
eJ .ho.o...........
Oencsscn_sean...
o ...
o ....
o"'*""
o"'*-''"'
o ....
o-
F-
ll
"'""""""'
2007-Z7 02:18:35
2006-()8-28 03:16:13
2009-o8-Q7 18:57:09
21)08-(J8-.t506:54:57
2009-06-1307:01:16
2009{.13-21 22:34:54
2009-D2-o6ll:ll:LO
Hl306:17:08
2008-Q7-1S 09:-15:M
200Nl5-29 18:13:08
200910-1809:06:15
2009-o7-23 05:51:41
200'lIHS 06:50:.25
2009.()8-15 06:50:25
leOCiica INI ConnHl but!DriiO 10 tolt.
09
- !MI 3'5
09 58
1211
100021
1000.28
Ct.a.-c FTP R\.ln
Conl"adlngiO.......---IhiO!boot
eonn.c&l!i
dhdl:Wy
""""""OK
Ct>ngong
Connected to tb (www.th.ckbook..com) as thkkbk
2.3. bra
Sikeres kapcsolds egy tvoli webkiszolglhoz a Classic FTP segtsgvel
J17

A webkiszolgl dokumentumgykere az a knyvtr, amelyet a webes tartalom
legfels szint knyvtraknt jelltek ki - ez lesz a knyvtrszerkezet kiindul
pontja (az rn ksbb bvebben is beszlnk rla). Ennek a knyvtrnak
gyakran public_html a neve (ahogy a 2.3. brn is lthat), vagy
(ezt szintn lthatjuk a 2.3. brn, mert lnvknt a
www
www
knyvtrat is ltrehoztk
a public_html helyettestsre), vagy htdocs. Ezt a knyvtrat nem neknk

kell ltrehoznunk; ezt a webgazda teszi meg helyettnk.
A gykrknyvtr megnyitshoz kattintsunk dupln a knyvtr nevre.
Az FfF-gyfl felletnek jobb oldaln ekkor ennek a knyvtrnak a tartalma
kell, hogy megjelenjen. (A knyvtr ezen a ponton mg valsznleg res,
hacsak a webgazda nem tett oda neknk helyrz fjlokat.)
5.
A clunk az, hogy tvigyk a korbban ltrehozott sample. html fjlt a sznt
gpnkrl a webkiszolglra. Keressk meg a fjlt az FfP-gyfl felletnek bal
oldaln lev knyvtrlistban (nyugodtan nzznk krl, ha szksges), s ha
megtalltuk, kattintsuk egyszer a nevre, hogy kijelljk
6.
Kattintsunk az gyflprogram felletnek kzepn tallhat, jobbra mutat

nyilat brzol gombra, hogy elkldjk a fjlt a webkiszolglnak Miutn
a fjltvitel befejezdtt, az gyflprogram felletnek jobboldalt frisslnie kell,
hogy jelezze, hogy a fjl clba rt.
7.
Kattintsunk a Disconnect (Kapcsolat bontsa) gombra a kapcsolat bezrshoz,

s lpjnk ki a Classic FfP programbl.
Ezek a lpsek elvileg mindig megegyeznek, amikor fjlokat akarunk feltlteni a web
kiszolglra FfP-n keresztl. Az FfF-gyfl segtsgvel ezenkvl alknyvtrakat is
ltrehozhatunk a tvoli webkiszolgln. A Classic FfP-ben gy hozhatunk ltre egy
alknyvtrat, hogy a Remote (Tvoli) menbl a New Folder (j mappa) lehetsget
vlasztjuk Az egyes FfP-gyfelek felletn elfordulhat, hogy ms-ms paranccsal
rhetjk el ugyanezt a lehetsget.
A fjlok helye
webkiszolgln
A webes tartalom karbantartsa szempontjbl fontos, hogy hogyan rendszerezzk

a tartalmat - nem csak azrt, hogy a felhasznlk megtalljk, amit keresnek, hanem
azrt is, hogy mi is eligazadjunk a kiszolglnkon. Ha a fjlokat knyvtrakba csopor
tostjuk, az segt a fjlok kezelsben.
A knyvtrak elnevezse s a knyvtrszerkezet felptse a webkiszolgln ugyangy
teljesen tlnk fgg, mint a fjlok karbantartsi szablyainak kialaktsa. Egy jl szerve
zett kiszolgl fenntartsa mindazonltal hossz tvon a tartalom hatkonyabb kezelst
teszi lehetv.
2. ra
}19
Alapszint fjlkezels
A Weben bngszve taln szrevettk, hogy az URL-ek megvltoznak, mikzben
mozgunk egy webhelyen bell. Pldul ha egy vllalat webhelyt nzegetjk, s egy
grafikus navigcis elemre kattintunk, hogy eljussunk a cg termkeihez vagy szolgl
tatsaihoz, az URL valsznleg errl
http://www.cegnev.com
erre vltozik:
http://www.cegnev.com/products/
Vagy erre:
http://www.cegnev.com/services/
Az elz rszben anlkl hasznltuk a dokumentumgykr kifejezst, hogy tnylegesen
elmagyarztuk volna, mit is jelent. A webkiszolgl dokumentumgykere vagy gykr

knyvtra lnyegben a teljes URL vgn ll perjel. Ha a tartomnyunk pldul
a tartomany. com, s az URL-nk a http: l /www. tartomany. com/, akkor a dokumen
tumgykr a zr perjel (;) ltal jellt knyvtr. A dokumentumgykr a webkiszolg
ln kialaktott knyvtrszerkezet kiindulpontja- az a hely, ahol a webkiszolgl
elszr keresi a bngszk ltal krt fjlokat
Ha a sample. html fjlt a korbbi utastsnak megfelelen a dokumentumgykrben
helyezzk el, akkor a bngszbl a kvetkez URL-en rhetjk el:
http://www.tartomany.com/sample.html
Ha ezt az URL-t berjuk a webbngsznkbe, a 2.4. brn lthat lekpezett

sample. html fjl jelenik meg a kpernynkn.
Hdkl Workt!
{m
Moz.lta Firefox
http-J/www.yourdomain.com/umple.html
@J
ll
..._:j
Hello World!
Welcome to My Web Server.
Don
..,
2.4. bra
A sample.html fjl elrse egy webbngszn keresztl
20
Ha azonban egy j knyvtrat hoztunk ltre a dokumentumgykren bell, s

a sample. html fjlt ebbe a knyvtrba tettk, akkor a fjl az albbi URL-lel rhet el:
http:
l /www. tartomany. com/ ujkonyvtar/sample. html
Ha a sample. html fjlt abba a knyvtrba tettk, amelyet elszr lttunk, amikor
kapcsoldtunk a kiszolglhoz- vagyis nem vltottunk knyvtrat, s a fjlt nem
a dokumentumgykrben helyeztk el-, akkor a sample. html fjl egyetlen URL-en
sem lesz elrhet a webkiszolgln. A fjl termszetesen on lesz azon a szmtgpen,
amelyet webkiszolglknt ismernk, de mivel nem a dokumentumgykrben tall
hat - amelyrl a kiszolglszaftver tudja, hogy on kell elszr keresnie a fjlokat -,
senki nem tudja majd elrni egy webbngszn keresztl.
Mi a tanulsg?
os, az, hogy nundig vltsunk a webkiszolgl gykrknyvtrra,
mieltt hozzltnnk a fjlok tvitelhez.

Ez klnsen igaz a grafikkra s ms multimdia-fjlokra. A webkiszolglkon ltal
ban tallhat egy images (kpek) nev knyvtr, ahol- amint kitallhattuk - az sszes
kpfjlunkat trolhatjuk Ehhez hasonl npszer knyvtr pldul a ess, amely
a stluslapfjlok troljaknt szalgJ (ha egynl tbb stluslapfjlt hasznlunk), vagy
a js, ahol a kls JavaScript-llomnyokat helyezhetjk el. Vagy, ha tudjuk, hogy
a webhelyen lesz majd egy terlet, ahonnan a ltogatk klnfle tpus fjlokat
tlthetnek le, ltrehozhatunk a szmukra egy dowloads (letltsek) nev knyvtrat.
Akr egy tmrtett ZIP fjlrl van sz, amelyben a mvszi portfolinkat troljuk, vagy
egy Excel-tblzatrl, amelyben eladsi mutatk tallhatk, gyakran hasznos olyan fjlo
kat is kzztenni az Interneten, amelyek nem egyszeren weboldalak. Ha egy olyan
llomnyt szeretnnk hozzfrhetv tenni a Weben, amely nem HTML-fjl, csak annyit
kell tennnk, hogy feltltjk a fjlt a webhelynkre, mintha HTML-fjl lenne, az ra ko
rbbi rszben a feltltsre vonatkozan ismertetett utastsokat kvetve. Miutn a fjlt
feltltttk a webkiszolglra, ltrehozhatunk egy r mutat hivatkozst (ennek mdjt
a ksbbi rkon tanuljuk meg). Ms szavakkal, a webkiszolglnk sokkal tbbre
kpes egyszer HTML-fjlok szolgltatsnl.
Lssunk egy pldt a HTML-kdra, amelyrl majd ksbb tanulunk! Az albbi kddal
az art folio. zip nev llomnyra hivatkozhatunk, amelyet a webhelynk letltsi
knyvtrban helyeztnk el, a hivatkozs szvege pedig a "Download my art
portfolio!" (Tltse le a mvszi portfolimat!) lesz:
<a
href="/downloads/artfolio.zip
">Download
my art
portfolio!</a>
2. ra
f 21
Indexoldalak hasznlata
Amikor "indexrl" hallunk, valsznleg a knyvek vgn tallhat trgymutat jut
az esznkbe, amelyben klnfle kulcsszavak s tmakrk szerint keresbetnk
oldalakat. A webkiszolglk knyvtraiban elhelyezett indexfjlok is betlthetik ezt
a szerepet, ha gy tervezzk meg ket- valjban innen kaptk a nevket.
Az index. html nevet annak a fjlnak (rviden indexfjlnak, ahogy ltalban
hivatkoznak r) adjuk, amelyet alaprtelmezett oldalknt szeretnnk megjelenteni
a Felhasznlk szmra, amikor felkeresik a webhelynk egy adott knyvtrt.
Ha az indexoldalt a hasznlhatsgat szem eltt tartva ksztettk el, a felhasznJk
errl az oldalrl minden tartalmat elrbetnek, ami a webhely adott rszn tallhat.
A 2.5. brn lthat lenyl men s bal oldali navigcis sv hivatkozsai pldul egy
arnt hrom oldalra mutatnak: a Solutions Overview (ez maga a szakasz indexoldala),
a Connection Management s a Cost Management oldalakra. Az- index. html nev,
a solutions knyvtrban elhelyezett- oldal maga is tartalmaz hivatkozsokat a msik
kt oldalra, amely a solutions szakaszban tallhat. Amikor a felhasznlk ennek
a szakasznak az indexoldalra rkeznek az adott webhelyen, a szakasz brmelyik
oldalt elrhetik onnan (mghozz hromflekppen).
tIIID
iPau: iP.u Soklt:IOns for High Rdum on Mobi1ity MonHa Fnfox

C
:Q
p
:l/-.ipu. com/solubo
ns/"mdex.htm
;;;,;
l -;,.
-_. 'lj htt
tOTWOTFIHOER
RESEU.ERLOCATOR
ACCESS"'O"CTS
SEARCH
&m!MP
COHTACTUS
'lj
i Pass
CONPANY
st:RVIC[S
sot.UTI
er.-w
:
TECHNOLOGY
SUPPORT
PRESS ROO!ol
INVBTORS
SOlllxms
eSOtdt:n.w
QConl\edian
IA.aMgetnenl
OCa.&tlolaMpneN
wana;ement
i Pass Solutionsfor High R Con'1eet10n
Costt.larat
Armed with the latest mobde techr....-7.-. .... .,............. ---'1 wofk when and where they can
be most productive Howewr. wrthout a way to unify the management of connectMty
devices and costs. bustness effectM!ness can suhf
iPass has a solid track record of unifymg mobility management for many of the world's
leading campames Thts sacbon of our Web site preMdes ins1ghts into the mobility
challenges campames hke yours face JNery day, with real-world ex.amples of how iPass
customars are soMng thet1')---it'ICiuding the results they 318 gaming 10 the process
Connection Management grves employees easy-to-use access to the busness
COSl Managementll!"'erages enterpose purchasing power, unrfied billing and usage
cntiCal mformatlon they need to do the1r JObs-whenever wherEM:tr

transparency to reign m excessM! spending on remote and mobile access
2.5. bra
Egy j szakasz-indexoldal
Il
PAitTHERS
Az indexoldal msik clja az, hogy ha a felhasznlk felkeresik a webhelynk egyik

knyvtrt, amely rendelkezik indexoldallal, de nem adjk meg az oldal nevt, akkor is
a szakasz-vagy maga a webhely-kezdoldalra kerljenek.
A fenti esetben pldul a felhasznl brmelyiket berhatja az albbi kt URL kzl,
akkor is a webhely
solutions
szakasznak kezdoldalra kerl:
http://www.ipass.com/solutions/
http://www.ipass.com/solutions/index.html
Ha a
solutions
knyvtrban nincs
index. html
oldal, a mvelet eredmnye
a webkiszolgl belltsaitl fgg. Ha a kiszolglt gy lltottk be, hogy ne engedje

meg a knyvtrakban val tallzst, akkor a felhasznl a "Directory Listing Denied"
(A knyvtrtartalom kiratsa megragadva) zenetet kapn, ha oldalnv megadsa
nlkl ksrli meg elrni az URL-t. Ha azonban a kiszolgln engedlyeztk a knyvt
rakban val tallzst, a knyvtrban tallhat fjlok listja jelenik meg.
A kiszolgl belltsait a webgazda mr valsznleg megadta helyettnk. Amennyiben
a szolgltat megengedi, hogy a vezrlpulton keresztl mdostsuk a kiszolgli
belltsokat, mdosthatjuk azokat, hogy a kiszolglnk a krelmekre a rni ignyeink
szerint vlaszoljon.
Indexfjlt nem csak az alknyvtrakban, hanem a webhelynk legfels szint knyvt
rban (a dokumentumgykrben) is hasznlhatunk. A webhely els oldalnak-a kez
doldalnak, foldalnak, honlapnak, vagy ahogy rni nevezzk azt a webes tartalmat,
amelyet elszr szeretnnk a tartomnyunkat megltogat felhasznJk el trni az
index. html
nevet kell adnunk, s a webkiszolglnk dokumentumgykerben kell
elhelyeznnk. Ezzel gondoskodunk rla, hogy amikor a felhasznlk berjk

a
ht tp: 1 /www. tartomany. com/
cmet a bngszjkbe, a kiszolgl azt a tartalmat
kldje el nekik, amit szerennk volna (nem pedig a Directory Listing Denied zenetet
vagy ms nemkvnatos tartalmat).
A tartalom kzzttele webkiszolgl nlkl

Annak, hogy megtanuljuk a HTML hasznlatr, s azt, hogy miknt hozhatunk ltre
webes tartalmat, nyilvnvalan az az elsdleges clja, hogy HTML s multimdia-fjlokat
tegynk kzz. Lehetnek azonban olyan helyzetek is, amikor nincs is ms kivitelezhet
mdja a kzzttelnek. Elfordulhat pldul, hogy CD-ROM-okat, DVD-ROM-okat vagy
USB-meghajtkat szeretnnk terjeszteni egy vsron, amelyeken reklmanyagokat
helyeznk el webes tartalom formjban-vagyis olyan hjperhivatkozsokkal elltott
szvegknt, amelyet egy webbngszben lehet megtekinteni, de anlkl, hogy szksg
lenne egy webkiszolglra. Az is lehet, hogy egy tanfolyamon szeretnnk a hallgatknak
HTML alap oktatanyagokat kiosztani hordozhat meghajtkon. Ez csak kt plda arra,
hogy rruknt hasznlhatk a HTML-oldalak az Internettl fggetlen kzzttelre.
2. ra
Az emltett megoldsokat gy is szoktk nevezni, hogy
f23
helyi webhelyek (local site)
ltrehozsa. Br webkiszolglra nincs szksg hozzjuk, az ilyen hiperszveges

tartalmakat is
webhelyeknek hvjk. A "helyi" kifejezs arra utal, hogy a fjlokat helyben
k el, nem pedig egy tvoli kapcsolaton (egy webkiszolgln) keresztl.
Tartalom kzzttele helyben

Tegyk fel, hogy egy olyan helyi webhelyet kell ksztennk, amelyet aztn USB-meg
hajtkon te*szthetnk. A mai USB-kulcsok kzl mg a legolcsbbak is olyan sok ada
tot kpesek trolni - s az alapszint hiperszveges fjlok kimondottan kis mretek -,
hogy egy teljes webhelyet elhelyezhetnk rajtuk, egy
teljes rtk webbngszvel egytt.
Amikor helyi webhelyet hozunk ltre s terjesztnk, nem kell felttlenl mellkelnnk
egy webbngszt is, br kedves gesztus. Joggal felttelezhetjk, hogy a felhaszn
lk rendelkeznek sajt webbngszvel, s valamelyik knyvtr index. html
fjljnak megnyitsval fogjk kezdeni a hiperhivatkozsokkal sszekapcsolt tartalom
bngszst. Ha azonban egy webbngszt is fel szeretnnk tenni az USB
meghajtra, keressk fel a http: 1 /www. portableapps. com/ cmet, s ott
keressk meg a Portable Firefox (hordozhat Firefox) bngszt.
Egyszeren gondoljunk gy az USB-meghajt knyvtrszerkezetre, mintha
az a webkiszolglnk lenne. Az USB-meghajt knyvtrszerkezetnek legfels szintje
tekinthet a dokumentumgykrnek Vagy, ha a tartalomhoz egy webbngszt is
mellkelnk, kt knyvtrunk is lehet- az egyik pldul browser (bngsz), a msik
pedig content (tartalom) nven. Ebben az esetben a content knyvtr lesz a gykr
knyvtrunk. A dokumentumgykren bell tovbbi alknyvtraink is lehetnek,
amelyekben tartalmat s kiegszt multimdia-fjlokat helyezhetnk el.
A j rendszerezs egy helyi webhely esetben is ppen olyan fontos, rnint egy tvoli
webhelynl, ezrt gyeljnk r, hogy ne legyenek hibs hivatkozsok a HTML-fjljaink
ban. A fjlok sszekapcsolsrl egy ksbbi leckben rszletesebben is tanulunk majd.
Tartalom kzzttele webnaplban

Lehet, hogy mr van webnaplnk ( bloggal") egy olyan kls szolgltatnl, mint
"
a Blogger vagy a WordPress, s gy mr tettnk kzz tartalmat anlkl, hogy rendel
keztnk volna kijellt webkiszolglval, vagy brmit is tudtunk volna a HTML-rl.
Ezek a szolgltatk a forrsszerkesztk mellett
grafikus szerkesztket is knlnak, ami
azt jelenti, hogy anlkl rhatunk be szveget, s formzhatjuk azt flkvr, dlt vagy
klnfle szn betkkel, hogy tudnnk, milyen HTML-kd szksges ehhez. Mindazo
nltal, amikor a szerkeszt Publisb (Kzzttel) gombjra kattintunk, a tartalombl
HTML-kd jn ltre.
Azzal a tudssal felvrtezve azonban, amelyet ebbl a knyvbl szerezhetnk,

a webnaplnkat magasabb szintre emelhetjk, mivel a webnapl tartalmt s sablonjait
a forrsszerkeszt segtsgvel alakthatjuk, gy jobban kzben tarthatjuk a webnapl
kinzett. Ennek mdja klnbzik attl, ahogy a HTML-fjlokat ltrehozzuk, s FTP-n
keresztl feltltjk a kijellt webkiszolglnkra, de nem szabad elfelejtennk, hogy
a webnaplrs is egyfajta webes kzzttel.
A webes tartalom ellenrzse

Arnikor fjlokat visznk t a webkiszolglra, vagy hordozhat lemezen helyezzk el
ket helyi bngszs cljra, azon nyomban clszer alaposan ellenriznnk minden
oldalt. Az albbi ellenrzlista segt majd, hogy biztostsuk, hogy a webes tartalom gy
viselkedjen, ahogy elvrjuk tle. Megjegyzend, hogy a hasznlt kifejezsek nmelyike
most mg ismeretlen lesz a szmunkra, de ahogy haladunk a knyvben, visszatrhe
tnk ide, s akr nagyobb webhelyeket is pthetnk:
Mieltt tvinnnk a fjlokat, teszteljk ket helyben, a szmtgpnkn, hogy

meggyzdjnk a hivatkozsok mkdsrl, illetve arrl, hogy a tartalom
a kvnt kpi elrendezst tkrzi-e. Miutn tvittk a fjlokat a webkiszolglra
vagy hordozhat eszkzre, prbljuk ki ket ismt.
A teszteket annyi bngszvel hajtsuk vgre, amennyivel csak tudjuk-a Chrome,

a Firefox, az Internet Explorer, az Opera s a Safari mindenkppen legyen rajta
a listn -, s az ellenrzst Mac s Windows rendszeren egyarnt vgezzk el.
Ha lehetsges, vizsgljuk meg a tartalmat alacsony (800 x 600-as) s magas
(1600 x 1200-as) felbontsnl is.
Kapcsoljuk ki az automatikus kpbetltst a bngsznkben, mieltt nekiltnnk

a tesztelsnek, hogy lssuk, hogyan festenek az oldalak a kpek nlkl. Ellenriz
zk a kpek helyettest szvegt, majd kapcsoljuk vissza a kpbetltst, hogy
a kpek is megjelenjenek, s vizsgljuk t ismt gondosan az oldalakat.
A bngsz szvegbelltsainak segtsgvel nzzk meg az oldalakat klnbz

betmretekkel, hogy biztosak legynk benne, hogy az elrendezs nem esik szt
akkor sem, ha a felhasznJk fellbrljk a szvegre vonatkoz belltsainkat.
Vrjuk meg minden oldal esetben, hogy teljesen betltdjn, majd grgessnk
le teljesen a lap aljig, hogy meggyzdjnk rla, hogy minden kp ott jelenik
meg, ahol kell.
Mrjk le, hogy mennyi ideig tart az egyes oldalak betltse. Ha a betlts nhny
msodpercnl tbbet vesz ignybe, az adott oldalon tallhat informcik elg
rtkesek ahhoz, hogy a felhasznJk ne tvozzanak az oldalrl a betlts befeje
zdse eltt? A szlessv elrs ma mr elterjedt, de ez nem jelenti azt, hogy
az oldalakat l megabjtos kpekkel kell telezsfolnunk
Ha a fenti teszteken minden oldalunk tmegy, nyugodtan htradlhetnk-a webhe

lynk kszen ll arra, hogy a nyilvnossg el trjuk.
2. ra
!25
sszefoglals
Ezt az rt azzal kezdtk, hogy elksztettnk egy nagyon egyszer HTML-fjlt, amelyet
tesztfjlknt hasznltunk a webkiszolglra trtn fjltvitelhez. Megtanultuk, hogyan
mkdik a fjltvitel, s hogy milyen szoftverre van szksgnk az vitel vgrehajts
hoz (egy FfF-gyflre). A webkiszolgl knyvtrszerkezetrl s a fjlkezelsrl is
megtudtunk ezt-azt, valamint tisztztuk, hogy milyen fontos szerepe van az index. html
fjlnak a webkiszolgl egy adott knyvtrban. Megtanultuk emellett, hogy webes
tartalmat hordozhat eszkzn is terjeszthetnk, s szt ejtettnk arrl is, hogy miknt
clszer elrendeznnk a fjlokat s knyvtrakat, ha a tartalmat egy tvoli webkiszol
gl hasznlata nlkl szeretnnk megtekinteni. Vgl megtanultuk azt is, hogyan
ellenrizzk a fjljainkat, mieltt a webhelynket nyilvnos fogyasztsra alkalmasnak
nyilvnthatnnk.
Krdezz-felelek
K:
A javasolt tesztek mindegyike tovbb tart, mint az oldalak elksztse!
Nem lehetne kevesebb ellenrzsset megszni?

V:
Ha az oldalainkkal nem pnzt szeretnnk keresni, vagy valamilyen fontos

szolgltatst nyjtani, akkor valsznleg nem szmt annyira, ha egyes felhaszn
lknl furcsn jelennek meg, vagy egyszer-egyszer hibt okoznak. Ilyen esetben
elg, ha megnzzk az oldalakat nhny klnbz bngszben. Ha azonban
profizmost szeretnnk sugrozni, semmi nem helyettestheti a szigor tesztelst.
K:
V:
Most komolyan, ki trdik azzal, hogy miknt rendezem el a webes tartalmat?
Hisszk vagy sem, az ltalunk knlt webes tartalom elrendezse a keresprog

ramoknak s a webhelynk leend ltogatinak is szmt (errl bvebben is
beszlnk a 24. rn), de ltalban vve is segt az elrelthatlag gyakran
frisstend tartalom nyomon kvetsben, ha a webkiszolgln rendezett
knyvtrszerkezetet tartunk fenn. Ha pldul kln knyvtrat hozunk ltre
a kpek vagy a multimdis fjlok szmra, pontosan tudni fogjuk, hol keressk
a frissteni kvnt fjlt- nincs szksg teht arra, hogy ms tartalmat trol
knyvtrakban kutakodjunk.
Ismtls
Ismtl krdsek
1.
Melyik hrom informci szksges ahhoz, hogy FfP-n keresztl kapcsolcihas

sunk a webkiszolglnkhoz?
2.
Mi a szerepe az index. html fjlnak?
3.
Muszj a webhelynknek knyvtrszerkezetet tartalmaznia?
Vlaszok
1.
2.
Az llomsnv, a fikunkhoz tartoz felhasznlnv, s a fikunk jelszava.

Az index. html fjl ltalban egy knyvtr alaprtelmezett fjlja
a webkiszolgln, amely lehetv teszi, hogy
a http: l /www. tartomany. com/valamilyen_konyvtar/ cmet fjlnv nlkl
rjk el, s mgis a megfelel helyre kerljnk.
3.
em. A fjlok knyvtrszerkezetben val elrendezse egyltaln nem ktelez,

de melegen ajnlott, mert egyszerbb teszi a tartalom karbantartst.
Gyakorlatok
Az FfP-gyflprogramunk segtsgvel hozzunk ltre egy alknyvtrat a webhe

lynk dokumentumgykerben. Msoljuk le s illesszk be a sample. html fjl
tartalmt egy msik, index. html nev fjlba, s mdostsuk a <t it le> s
</tit le>, illetve a <hl> s </hl> cmkk kztt ll szveget valami msra.
Mentsk a fjlt, s tltsk fel az j alknyvtrba. A webbngsznkkel nyissuk

meg a webkiszolgln az jonnan ltrehozott knyvtrat, s vegyk szre, hogy
az index. html fjl tartalma jelenik meg. Ezt kveten az FfP-gyfelnk segts
gvel trljk az index. h tml fjlt a tvoli alknyvtrbl, majd trjnk vissza
az URL-re a bngszvel, tltsk jra az oldalt, s figyeljk meg, hogyan reagl
a kiszolgl az index. html fjl hinyban.
Hozzuk ltre ismt a fenti gyakorlatban hasznlt fjlokat, s helyezzk el azokat

valamilyen hordozhat eszkzn, pldul CD-ROM-on vagy USB-kulcson.
A bngsznkkel nyissuk meg a pldawebhelynknek ezt a helyi vltozatt, s
gondoljuk vgig, milyen hasznlati utastst kellene adnunk a hordozhat
eszkz mell a felhasznlknak
3. RA
A HTML s
az XHTML alapjai
A lecke tartalma:
Egyszer HTML-oldalak ksztse

Hogyan helyezhetnk elininclen HTML-elemet, amelyet minden weboldalnak
tartalmaznia kell?
A weboldalak elrendezse bekezdsekkel s sortrsekkel
A tartalom tagolsa cmsarok segtsgvel
A tartalom rvnyessgnek ellenrzse
A HTML, az XML, az XHTML s a HTML 5 kztti klnbsgek
Az els kt rn megismerkedtnk a webes tartalom ltrehozsnak alapjaival, s meg

tudtuk, hogyan jelenthetjk meg a munknkat a hlzaton, illetve- amennyiben nincs
trhelyszolgltatnk- a sajt gpnkn. A kvetkezkben megtanuljuk, melyek azok
az elemek, amelyeknek felttlenl meg kell jelennik a HTML-fjljainkban.
Az ra vgre tisztzzuk, mi a klnbsg a HTML s az XHTML kztt, s arra is vlaszt
kapunk, hogy Inirt ltezhet egyms mellett kt nyelv, amelynek a clja ugyanaz- webes
tartalom ltrehozsa. sszefoglalva, ezen az rn gyors ttekintst adunk a HTML s
az XHTML alapjairl, s nmi tmutatst nyjtunk ahhoz, hogy miknt rdemes eljr
nunk a weboldalaink ksztse s kzzttele sorn. Az elmlet mellett gyakorlati
tancsokat is kapunk: ltni fogunk egy valdi weboldalt s a mkdst biztost
HTML-kdot.
Mindenekeltt azonban tekintsk t, hogy mire van szksgnk ahhoz, hogy kvetni
tudjuk a knyv tovbbi rszt:
1.
Szerezznk egy szmtgpeL Jmagam egy Windows Vista rendszerrel elltott

gpet hasznltam a webes mintatartalom tesztelsre s a knyvben szerepl
kpernyfelvtelek elksztsre, de ez nem jelent megktst - a sajt webes
tartalmaink elksztshez s megjelentshez akrmilyen Windows, Macintosh
vagy Linux/UNIX rendszer megteszi.
2.
Csatlakozzunk az Internethez. Az, hogy betrcszs, drt nlkli vagy szlessv

kapcsolattal, a weboldalaink ltrehozsa s megjelentse szempontjbl lnye
gben mindegy, jllehet minl gyorsabb a kapcsolat, annl jobb lesz a felhaszn
li lmny. A belltsban segthet az internetszolgltatnk, iskolnk vagy
cgnk, de rengeteg olyan nyilvnos hely- kvz, knyvesbolt s knyvtr- is
ltezik, ahol ingyenes drt nlkli kapcsolatot ajnlanak, gy ha a laptopunk
WiFi-kpes, mris nyert gynk van.
Ha tancstalanok vagyunk az internetszolgltat kivlasztsban, az a legjobb, ha

elltogatunk egy sszehasonlt oldalra (egy bartunk gprl vagy egy nyilvnos,
internetkapcsolattal rendelkez szmtgprl). Ilyen oldal az Egyeslt llamokban
a http: 1 /www. thel is t. com/, Magyarorszgon pedig
a http: l /www. internetszolgaltatok.hu.
3.
Szerezznk be egy bngszt. Egy ilyen programra felttlenl szksgnk lesz

ahhoz, hogy a szmtgpnkre letltsk s ott megjelentsk a webes tartalma
kat. Az els rbl mr tudjuk, hogy a legnpszeruob bngszk (bcsor
rendben) a kvetkezk: Apple Safari, Google Chrome, Mozilla Firefox, Microsoft
Internet Explorer s Opera. rdemes tbbet is telepteni kzlk, gy meggy
zdhetnk rla, hogy a weboldalaink tartalma egysges kpet mutat mindegyi
kkn- nem lhetnk semmifle felttelezssel arra nzve, hogy milyen
bngszket hasznlnak majd a ltogatink.
4.
Induljunk felfedeztra! A bngsznk segtsgvel nzznk krl az Interneten,

s keressnk olyan webhelyeket, amelyeknek a tartalma vagy megjelense hason
lt ahhoz, amit magunk is szeretnnk. Jegyezzk fel, hogy mi idegest az egyes ol
dalakon, mi csbt msok olvassra, s mi az, ami miatt jra s jra visszatrnnk
valahov. Ha van olyan tma, ami klnsen rdekel minket, keressnk r
valamelyik ismertebb keres, pldul a Google (http: l /www. google. com/) vagy
a Bing (http: l /www. b ing. com/) segtsgveL
3. ra
A HTML s az XHTML alapjai
f29
Jllehet a bngszk ltalnossgban hasonlan kezelik s dolgozzk fel a kapott

adatokat, akadnak kzttk apr klnbsgek, amelyek miatt az oldalak nem mindig
ugyangy jelennek meg a bngszablakban. Ezrt fontos, hogy a munknkat tbbfle
bngszben is megszemlljk, hogy biztosak lehessnk benne, hogy jobbra egysges kpet kapunk.
Amint arrl az 1. rn szt ejtettnk, ha az Interneten szeretnnk webes tartalmat kzz
tenni (nem pedig lemezen vagy helyi hlzaton), egy olyan szmtgpre kell feltlte
nnk azt, amely 24 rs internetkapcsolattal rendelkezik. Ha az internetszolgltatst
az iskolnktl vagy munkahelynktl kapjuk, meglehet, hogy webtrhelyet is ignybe
vehetnk ugyanitt - ha mgsem, gy meg kell rendelnnk a trhelyszolgltatst.
rnl
Az els HTML-fjlunkat semmikppen se Microsoft Wordben vagy ms, HTML-kpes

szvegszerkesztben ksztsk el - ezek ugyanis ..segteni" prblnak, s a maguk
szja ze szerint trjk a kdunkat, ami csak ronthat a helyzeten. Hasonlkppen nem
tancsoljuk az .. azt kapod, amit ltsz" (WYSIWYG) tpus grafikus szerkesztk
(amilyen pldul a Microsoft FrontPage vagy az Adobe Dreamweaver) hasznlatt
A HTML nyelv elsajttsban sokkal nagyobb segtsget adnak az egyszer szveg
szerkesztk, hiszen gy knytelenek vagyunk a kddal dolgozni. Ksbb persze, ha mr
tudjuk, mi folyik a httrben, hasznlatba vehetjk a grafikus segdeszkzket (mint
a FrontPage vagy a Dreamweaver).
Az egyszer weboldalak ksztsnek alapjai

Az els rn megtanultuk, hogy a weboldal nem ms, mint egy egyszerl szvegfjl,
amelynek a tartalmt HTML-kdok "jellik", meghatrozva ezzel a bngsz szmra,
hogy miknt jelentse meg a szveget. Ezeknek a szvegfjloknak az elksztshez egy
egyszer szvegszerkesztre van szksgnk- ez lehet a W indows Jegyzettmbje
(Notepad) vagy Macintosh rendszereken a TextEdit Ne hasznljuk a WordPadet,

a Microsoft Wordt vagy ms, hasonl fejlett szvegszerkesztt, ezek ugyanis nem olyan
egyszer szvegfjlokat adnak vgeredmnyknt, arnilyeneket a webes tartalom megje
lentse megkvetel.
Mieltt nekikezdennk a kdolsnak, ksztsk el azt a szveget, amelyet meg
szeretnnk jelenteni egy weboldalon:
1.
Keressnk (vagy rjunk) nhny sort magunkrl, a csaldunkrl, a focicsapa

tunkrl vagy ms, minket rdekl tmrl.
2.
Mentsk a szveget egy egyszer, szabvnyos ASCII fjlba. A Jegyzettmb s

a hozz hasonl egyszer szvegszerkesztk automatikusan egyszer szveges
formtumban mentenek, ms prograrnak esetben azonban elfordulhat, hogy
ki kell vlasztanunk ezt a fjltpust a Fjl, Ments msknt (File, Save as)
menponttal.
Ahogy haladunk az rnk anyagval, gy gazdagtjuk a szveget HTML-jellsekkel

(HTML-elemekkel), amelyek valdi webes tartalomm alaktjk azt.
Ha HTML-elemeket tartalmaz fjlokat mentnk, mindig a . html kiterjesztst kell
hasznlnunk. Ez fontos, hiszen ha megfeledkeznk errl, a legtbb egyszer sz
vegszerkeszt valamilyen ms kiterjesztst (pldul . txt) vlaszt. Ha pedig gy ll
a helyzet, a fjlunkat nem biztos, hogy megtalljuk a bngszvel, ha pedig igen,
a megjelentse nem lesz tkletes. Rviden: a bngszk arra szmtanak, hogy
.html
kiterjesztssei jutnak hozz a weboldalakhoz.
Ha Maciontosh rendszeren a TextEdittel dolgozunk, a HTML-fjlok elksztsnek

lpsei nmileg eltrnek a Windows Jegyzettmbnlltottaktl - itt ugyanis a fjl
mentse eltt ki kell vlasztanunk a Forrnat (Formtum) men Make Plain Text (Sima
szveg ltrehozsa) pontjt, valamint a Saving (Ments) belltsoknl ki kell kapcsolnunk az Append '.txt' Extension to Plain Text Files (A .txt kiterjeszts hozzfzse
a sima szvegfjlokhoz) jellngyzetet Emellett, az alaprtelmezett belltsok
szerint a szerkeszt gy jelenti meg a . html fjlokat, ahogy a bngszben ltnnk
ket, ami nem teszi lehetv a szerkesztsket. Ennek megakadlyozsra kapcsol
juk be az lgnore Rich Text Commands in HTML Files (Szvegformz parancsok
figyelmen kvl hagysa a HTML-fjlokban) jellngyzetet a belltsok Rich Text
Processing (Formzott szvegek feldolgozsa) rszben.
Olyan weboldalakkal is tallkozhatunk, amelyeknek a kiterjesztse . h tm, ami szintn
megengedett. Egyb kiterjesztsekkel is tallkozhatunk a Weben, mint a . j sp (Java
Server Pages), az . as p (Microsoft Active Server Pages) vagy a . php (PHP: Hypertext
Preprocessor), ezek a fjlok azonban kiszolgloldali eljrsokat hasznlnak, amelyek
tlmutatnak a HTML vilgn.
A 3.1. pldban egy egyszer weboldal HTML-kdjt lthatjuk, amelyet akr be is rha
tunk a szerkesztnkbe. Ha megnyitjuk az oldalt a Firefoxban, a 3.1. brn lthat kp
trul elnk a bngszablakban. Minden weboldalon fel kell tntetnnk
a <html></html>, <head></head>, <title></title> s <body></body>
cmkeprokat
3.1. plda
A <html>, <head>, <tttle> s <body> cmkk
<?xml version="l.O"
<! OOCTYPE html
encoding="UTF-8"?>
PUBLIC
"-l /W3C//DTD XHTML l. l//EN"
"http://www.w3.org/TR/xhtmlll/DT D/xhtmlll.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>The
</head>
First
Web
Page</title>
3. ra
A HTML s
az
XHTML alapjai 31
<body>
<P>
Kezdetben megteremt Tim a Hiperszveges Jellnyelvet.
Az Internet
pedig kietlen s puszta vala,
felsznn,
s Tim
s szveg vala a manitor
Keze lebegett vala a billentyzet
Legyen hiperhivatkozs:
a hiperhivatkozs
j;
vegtl.
Tim a hiperhivatkozst
nevez
nevez
Egyb Cuccnak.
felett.
s ln hiperhivatkozs.
s mond Tim:
s lt Tim,
hogy
s elvlaszt Tim a hiperhivatkozst a sz

Horgonynak,
s a szveget
s vala az egsz egytt az els Weboldal.
</p>
</body>
</html>
nw Firn wm Page . MoziBa Firdox
c:w:w
EM fdit '- - Iook !i<!p
g-.
J!!A
fde//IC:/Ustt'i/JM/De<umentslwms_htmlcuiOJ/fimpagdttml
-+
Kezdetben nlll Tim a Hiperst\'e&<$ )ell6nyh1!1. AZ lillemel pedjg l<letlen s pusz12 'ala. s SZ\l!g 'ala
a moniiOr fdszion, 6; nm Keze lebegett \"3b l billenryzet releit ts IllOildi Tim:
l.eg)1!11 hiperhinlkozs:
s l6n hiperlll\ti<Ds. fos lit:i Tin hog)' a hiperhi'lllkoz:is j6; s ehlmli Tim a hiperltlwtkozist a szii\"<gl61.
te\'tl Tim a hipcrlth'alkozst Uorgon)llak. s a sz\IIz Eg) QJCCnak.. ts w.la az egsz egytt
ueMWebokW.
3.1. bra
Ha a 3.l. plda tartalmt

egy HTML-fjlba mentjk,
majd megjelentjk egy
bngszben, csak a cm s
Done
a trzs szvegt ltjuk
3.1. pldban, hasonlan minden ms HTML oldalhoz, a
< jellel kezdd s > jellel
befejezd szavak kdolt parancsok. Ezeket nevezzk HTML-cmkknek (tag),

amelyek Jelcmkzik" az egyes szvegrszleteket, elrulva gy a bngsznek, hogy
milyen fajta szvegrl van sz - ez teszi lehetv a megfelel megjelentst.
Elmletileg a kvetkez webes szabvnyt a HTML 5 jelenti, amely azonban mg

korntsem terjedt el szles krben. A teljes vltsra nagyjbl 2011-ben kerl majd
sor. Mindazonltal a HTML s az XHTML lehetsgeinek bemutatsnl indokolt
esetben kitrnk arra, hogy miben klnbzhet a HTML 5-s vltozat.
Az els nhny kdsor ltalnos bevezet, amelynek minden weboldalon szerepelnie
kell. A jelentse egyszeren annyi, hogy az oldal egy XHTML
1.1 tpus dokumentum,
vagyis egy XHTML-oldal -hasonlan a knyvnkben szerepl sszes tbbi webol

dalhoz. Mivel az XHTML nem ms, mint a HTML strukturltabb vltozata, nem kvetnk
el nagy hibt, ha HTML-oldalakknt hivatkazunk ezekre az oldalakra. Az XHTML
1.1
megjellsvel olyan weboldalakat ksztnk, amelyek kvetik a legfrissebb webes szab

vnyokat, ami igen dvs dolog.
nll feladat
Egyszen1 weboldalltrehozsa s megjelenftse
Mieltt megtanulnnk a 3.1. pldban alkalmazott HTML-elemek jelentst, rdemes
pr szt szlni arrl, hogyan is kszlt a fenti dokumentum, s miknt jelentettk
meg. Kvessk ht az albbi lpseket:
1.
Gpeljk be a 3.1. plda tartalmt a Windows Jegyzettmbbe (illetve a Macintosh

TextEdit vagy ms, szmunkra kedves szvegszerkeszt ablakba).
2.
Vlasszuk a Fjl, Ments msknt menpontot. Fontos, hogy fjltpusknt
3.
Adjuk a fjlnak a firstpage. html nevet.
4.
Vlasszunk a merevlemeznkn egy mappt a weboldalaink trolsra, s jegyez
5.
Indtsuk el a kedvenc bngsznket (Kzben nyitva hagyhatjuk a Jegyzettmbt,
az egyszer szveg (vagy ASCII szveg) belltst adjuk meg.
Zk meg jl. Kattintsunk a Ments (Save) vagy az OK gombra a fjl mentshez.

gy knnyen vlthatunk az oldal megtekintse s szerkesztse kztt.) Az Internet
Explorerben vlasszuk a Fjl, Megnyits (File, Open) menpontot, s kattintsunk
a Tallzs (Browse) gombra, a Firefaxban pedig vlasszuk a Fjl, Fjl megnyitsa
(File, Open File) menpontot. Keressk fel a megfelel mappt, s vlasszuk ki
a firstpage. html fjlt. Egyes opercis rendszerek s bngszk lehetv teszik
azt is, hogy a megjelenteni kvnt fjlt egyszeren a bngszabiakba hzzuk.
s tessk! A weboldalunk a 3.1. brhoz hasonlan megjelenik a bngszablakban.
Ha hozzjutottunk egy webtrhelybez, az FTP segtsgvel feltlthetjk ide

a firstpage. html fjlt. Ez a megjegyzs azrt is lnyeges, mert a knyv tovbbi rsze
felttelezi, hogy rendelkeznk webtrhellyel, s nem okoz gondot a fjlok tvitele
az FTP segtsgvel - ha mgis, ht lapozzunk vissza az els kt ra anyaghoz, rnieltt
tovbblpnnk. Ha pedig tudatosan dntnk gy, hogy helyben dolgozunk a fjlokkal
(webtrhely nlkl), kszljnk fel arra, hogy a knyv tmutatsait a sajt ignyeinkhez
igaztsuk (figyelmen kvl hagyva pldul a "tltsk fel a fjlokat" s az adjuk meg
"
az URL-t" tpus utastsokat).
Ha egy a sajt szmtgpnkn trolt weboldalt szerelnnk megnyitni, nem kell feltt
lenl csatlakoznunk az Internethez. A bngsz alaprtelmezsben persze indtskor
megprblkozik ezzel, ami a legtbb esetben teljesen sszer - ugyanakkor, ha a helyi
merevlemeznkn szerkesztjk az oldalt, idegestv vlhat, hogy llandan nem elrhet oldalakrl hallunk. Ha lland internetkapcsolattal rendelkeznk LAN, kbelmodem
vagy DSL szaigitats rvn, mindez nem okoz gondot, hiszen a bngsz sohasem fog
elrhetetlen oldalakra panaszkodni. Egybknt viszont meg kell rendszablyoznunk
a bngszt, amiben az Eszkzk (Tools) men lehet a segtsgnkre.
3. ra
f33
Az XHTML-oldalakon ktelezen felhasznland

HTML-elemek
Elrkezett az id, hogy megismerkedjnk a HTML-elemek "titkos nyelvvel". E tuds
birtoklsa olyan kreatv erket szabadt fel bennnk, amelyekrl az egyszer emberi
lnyek lmodni sem mernek. Ne ruljuk el nekik, hogy valjban igen egyszer
dologrl van sz...
Ezen a ponton nem felttlenl muszj tisztban lennnk az olyan fogalmakkal, mint
a karakterkdols. A lnyeg, hogy a weboldalainkon elhelyezzk a megfelel azono
stkdot, amellyel igazodhatunk a legfrissebb webes szabvnyokhoz - knyvnk
rsnak idejn ez az XHTML 1.1-et jelenti. A HTML 5 mg nem tekinthet webes
szabvnynak, azt azonban rdemes tudnunk, hogy ha HTML 5 dokumentumot
ksztnk, ezekre a bevezet sorokra nincs szksg.
Az XMUXHTML azonostkdra nincs felttlenl szksg ahhoz, hogy mkdkpes

weboldalt hozzunk ltre. Errl knnyen meggyzdhetnk - csak trljk a bevezet
sorokat, amg olyan kdot nem kapunk, amely a <htrnl> cmkvel kezddikaz eredmnyt tovbbra is gond nlkl megnyithatjuk a bngszben. A kihagyott
kd arra szolgl, hogy megfeleljnk az rvnyben lev webes szabvnyoknak emellett lehetv teszi, hogy az rvnyessg ellenrzsvel megvizsgljuk a kd
igazadst a szabvnyokhoz, amint azt hamarosan lthatjuk is.
Mieltt megismerkednnk a HTML-elemekkel, nzzk meg, mit is takar a 3.1. plda
meglehetsen zavaros els sora. Nos, ez a sor azt jelzi, hogy a HTML-oldal valjban
egy XML-dokumentum:
<?xrnl
version="1.0"
encoding="UTF-8"?>
Az XML 1.0-s vltozatt alkalmazzuk, amely szles krben elfogadott, hasonlan

az UTF-8 karakterkdolshoz. A 3.1. plda msodik s harmadik sora- ha lehet- mg
bonyolultabb:
<!DOCTYPE
html
PUBLIC
"-//W3C//DTD
XHTML
1.1//EN"
"http://www.w3.org/TR/xhtmlll/DTD/xhtml11.dtd">
Ezeknek a soroknak a pontos tartalma nem igazn lnyeges a szmunkra; mindssze arra
kell gyelnnk, hogy elhelyezzk ket minden weboldalunk elejn. A kd mindssze
arra utal, hogy a dokumentum XHTML 1.1 tpus, gy a bngszk felttelezhetik, hogy
megfelel az XHTML 1.1 szabvny kvetelmnyeinek.
A legtbb HTML-elem kt rszbl ll: a nyitcmke jelzi, hogy hol kezddik az elem
hatlya alatt ll szvegrszlet, a zrcmke pedig azt mutatja, hogy hol vgzdik.
A zrcmkket onnan ismerhetjk fel, hogy a < jel utn egy l (perjel) ll a kdjukban.
34f Tanuljuk meg a HTML s a CSS hasznlatt 24 ra alatt

Lteznek ezen fell res elemek is, amelyek nmagukban llnak, nyit- s zrcmke
nlkl-ez esetben az elem kdjt lezr > eltt lthatjuk a 1 jelet. Az albbiakban
rviden sszefoglaljuk e hrom cmketpus szerept:
A nyitcmke egy HTML-utasts kezdett jelzi - a szveg, amelyre az utasts

hat, a nyitcmke utn ll. A nyitcmkk a < jellel kezddnek, s a > jellel
fejezdnek be (pldul: <htrnl>).
A zrcmke egy HTML-utasts vgt jelzi-a szveg, amelyre az utasts hat,

a zrcmke eltt ll. A zrcmkk elejn mindig a <l, a vgn pedig a > jel ll,
(pldul: </htrnl>) .
Az res cmke egy HTML-utastst nmagban hajt vgre, anlkl, hogy valarni
lyen szvegre hatna. Az res elemek kezdett a<, a vgt pedig a />jelli, mint
a <br />vagy az <irng />esetben.
Bizonyra szrevettk, hogy a 3.1. pldban a <htrnl> cmkhez nmi tovbbi kd

is kapcsoldik, nevezetesen kt jellemz (az xrnlns s az xrnl: lang ) , amelyek
tovbbi, az elemhez kapcsold adatokat tartalmaznak. E kt jellemz megadsa
szabvnyos kvetelmny minden XHTML-weboldalon - az elbbi az XML-nvteret,
mg az utbbi a tartalom nyelvt adja meg. Ebben a knyvben a szabvnyos nvte
ret hasznljuk, valamint az angol nyelvet. Ha ms nyelven szeretnnk rni, cserljk
az "en" (English) kdot a megfelel nyelv kdjra.
rdemes lehet trolnunk egy o/da/vzat, amelyben csak a nyit s zr <htrnl>,
<head>, <title>
s <body> cmkk szerepeinek-nagyjbl gy, mint a 3.1. pl
dban. A ksbbiekben ezt a dokumentumot kiindulpontknt hasznlhatjuk a webol

dalaink elksztshez, gy megtakartjuk a ktelez cmkk bersra fordtott idt.
A
3.1. plda
<body> cmkje pldul arrl rulkodik, hogy hol kezddik a weboldal
trzse, a </body> cmke pedig ennek vgt jelli. Minden, ami a <body> s a </body>
cmkk kztt ll, megjelenik a bngszablakban, arnint az a
A bngszablak legtetejn (lsd a
3.1. brn is lthat.
3.1. brt) tallhatjuk a cmet-ez pontosan
megegyezik a <title> s a </title> cmkk kztti szveggel. A cm jelenik meg

a weboldalhoz a bngsz Kedvencek (Favorites), illetve Knyvjelzk (Bookmarks)
menjben hozzrendelt bejegyzsben is (attl fggen, hogy melyik bngszt
hasznljuk). Fontos, hogy az oldalainknak megfelel cmet adjunk, hiszen gy a ltoga
tink a knyvjelzik alapjn ksbb is emlkezni fognak a tartalmra.
A <body> s a <tit le> cmke minden weboldal kdjban megjelenik, hiszen mindig
szksg van trzsszvegre s cmre. Hasonlkppen, a <htrnl> s a <head> cmke
megjelense is ltalnos (lsd a
3.1. pldt). A
<htrnl> cmkt egy oldal kdjnak
elejn elhelyezve egyszeren arra utalhatunk, hogy itt egy weboldalrl van sz, amely
a </htrnl> cmkvel r vget.
3. ra
A HTML s
Minden weboldal egy fejlcbl s egy trzsbl ll, amelyeket a
az
XHTML alapjai
<head>,
J 35
illetve
a <body> elemek hatroznak meg. A fejlc alapveten olyan adatok trolsra szolgl,
amelyek meghatrozzk az oldal megjelenst, ugyanakkor maguk nem vlnak ltha
tv a bngszablakban - ellenttben a
<body>
elem tartalmval. A
mindig a weboldal HTML-kdjnak elejn szerepel, rgtn a nyit
<head>
<html>
elem
cmke utn.
A cmet azonost <title> cmkepr az oldal fejlcn bell jelenik meg, vagyis a nyit
<head>
s a zr
cmke kztt. (A ksbbi rkon tovbbi elemekkel is meg
</head>
ismerkednk, amelyek a
<head>
s a
< /head>
cmkk kz kerlhetnek; ide tartoznak
pldul a stlusszablyok.)
A
3.1. pldban felbukkan <P> elem egy szvegbekezdsre utal. Fontos, hogy amennyi
ben lehetsges, minden szvegrszletet valamilyen trolelemben helyezznk el.
Oldalszerkezet kialaktsa bekezdsekkel s sortrsekkel

A bngsz a HTML-oldalak megjelentsekor nincs tekintettel a sorvgekre vagy
a szkzk szmra. gy pldul a 3.2. pldban szerepl versnek a 3.2. brn lthat,
fels vltozatban a szavakat egy-egy szkz vlasztja el, jllehet a kdban ezt nem gy
adtuk meg. A "felesleges" szkzket a HTML-kd rtelmezje lefaragja, radsul
a sortrsek akkor kvetkeznek be, ha a szveg kir a bngszablak szlre - teljesen
fggetlenl a sajt, eredeti sortrseinktL
3.2. plda
<?xml
HTML-kd bekezdsekkel s sortrsekkel
version="l.O"
<! DOCTYPE
html
encoding="UTF-8"?>
PUBLIC
"-l /W3C//DTD
XHTML
l. l l !EN"
"http://www.w3.org/TR/xhtmlll/DTD/xhtmlll.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xml:lang="en">
<head>
<title>The
Advertising
Agency
Song</title>
</head>
<body>
<p>
When
your client's hopping
put his
If
picture
he still
add a
</p>
<hr />
in
should prove
picture
of
mad,
the ad.
his
refractory,
factory.
36

<P>
When
your
put his
client's
picture
in
hopping
mad,<br
/>
the ad.
<IP>
<P>
If
he
add a
still
should
picture
of
prove
his
/>
refractory,<br
factory.
</p>
</body>
</html>
The Ad'leftising Song Mozilla Firefox
<::l
@IW:W
[tie [dit - Hi}tory ,&oobnarb !ook llelp
1----
ourdog.html
+
...-.--"'
Wbeo y=cli<nt's boppingmad. puthis picturein Ibe ad. If be still shooldprove rcfractory. add
picture
ofhis factory.
\Vben your dicot's hopping mad.

put his piciUre in Ibe ad.
If be sbll sbauld prove rdiactory.

add a piciUre of his factory.
i'
Done
3.2. bra
Ha a 3.2. plda HTML-kdjt weboldalknt jelentjk meg, bekezdseket s sortrseket csak

a <p> s <br /> elemeknek mege
f lelen kapunk
Rengeteg olyan weboldalt tallhatunk, ahol a <br />helyett csak <br>ll, illetve
a <P> cmknek nincs zr </p>prja. Sose feledjk, hogy az Interneten rengeteg
trehny munka kering, s attl, hogy ltunk egy kdot, mg nem kell felttlenl
helyesnek lennie. Ha a knyvben lefektetett kdoJsi elvekhez tartjuk magunkat,
rengeteg jvbeni munktl s bosszankodstl kmlhetjk meg magunkat. A helyes
HTML-kdolsi szoksok kialaktsa komoly rszt kpezi annak a folyamatnak,
amelynek sorn sikeres webtervez vlik bellnk.
Ahhoz, hogy befolysoljuk, hol trjenek a sorok s a bekezdsek, HTML-elemeket kell
hasznlnunk. Ha egy szvegrszletet a <p></p>trolcmkk kztt helyeznk el,
a zrcmke utn egy sortrsre szmthatunk A kvetkez rkon megtanuljuk majd,
hogyan befolysoljuk a sortrs magassgt a CSS segtsgve!. A
<br
/>elem egy sor
trst knyszert ki a bekezdsen bell. Az eddig ltott elemektl eltren a <br l>
esetben nincs szksg zr </br> cmkre-ez egyike a korbban emltett res
elemeknek. Jllehet a HTML 4 az res elemek esetben nem kveteli meg a l feltnte-
3. ra
A HTML s
az
XHTML alapjai
f37
tst, az XHTML s a jvbeni szabvnyok igen. Fontos, hogy mindenben alkalmaz

kodjunk a legfrissebb szabvnyokhoz, s olyan weboldalakat ksztsnk, amelyeknek
a kdja kifogstalan, gy az res elemeket minden esetben zrjuk a l> jelekkel.
A 3.2. pldban s a 3.2. brn lthat versben- amely egy reklmgynksg
dalocskja - a <b r 1 > s a <P> elemekkel vlasztottuk el a sorokat s a versszakokat.
szrevehettk ezen fell a <hr l> elemet is, amely egy vzszintes vonalat helyez el
az oldalon (lsd a 3.2. brt). Fontos tudnunk, hogy a <hr l> elem egyttal sortrst is
okoz- mg akkor is, ha nem tntetnk fel mellette egy <br l> elemet. A <br l>
elemhez hasonlan a <hr l> is res, vagyis nem tartozik hozz zr <hrl> cmke.
tt :
,
nll feladat
Szveg formzsa HTML-kddal
Vegynk egy szvegrszletet, s prbljuk HTML-ben formzni a frissen szerzett

tudsunk segtsgve!:
1.
Helyezzk el a szvegrszlet elejn a <html><head><title>My

Title<ltitle><lhead><body>
kdot (az ltalunk vlasztott cmet feltntetve
a My Tit/e helyn). Adjuk meg emellett a megfelel azonostkdot az oldal

tetejn, hogy megfeleljnk az XHTML szabvny kvetelmnyeinek.
2.
3.
Biggyesszk a <lbody><lhtml> kdot a szveg legvgre.

Helyezznk egy-egy <p> cmkt a bekezdsek elejre s egy-egy <IP> cmkt
a vgkre.
4.
Alkalmazzuk a <br 1 > elemet, ahol csak egyszeres sorkz sortrst szeretnnk.
5.
A <hr 1 > segtsgvel vlasszuk el egymstl vzszintes vonalakkal a szveg
6.
Mentsk lemezre a fjlt mypage. html nven (a mypage helyett neknk tetsz
nagyobb rszeit.
nevet adva neki).
7.
Nyissuk meg a fjlt egy bngszben a tartalma megjelentshez. (Elbb tltsk

fel FfP-vel a webtrhelynkre, amennyiben rendelkeznk ilyennel.)
8.
Ha valami nem gy fest, ahogy szeretnnk, trjnk vissza a szvegszerkeszthz,

s mdostsuk a fjl kdjt (majd pedig, ha van webtrhelynk, tltsk fel ismt).
A vltozsok megjelentshez kattintsunk a bngsz Frissts (Reload/Refresh)
gombjra.
Ha komolyabb szvegszerkesztt hasznlunk a weboldal elksztsre, gyzdjnk

meg arrl, hogy valban egyszer szveges vagy ASCII formtumban mentjk
a HTML-fjlt.

A tartalom tagolsa cmsarok segtsgvel
Ha weboldalakat nzegetnk az Interneten, feltnhet, hogy sokuk esetben a lap tetejn
tallhat cmsor nagyobb s vastagabb betkkel jelenik meg, rnint a szveg tbbi rsze.
A
3.3. plda jl mutatja a cmsor s a bekezdsek szvegnek eltrst. Ha egy szveg
rszlet a
<hl>
jelenik meg. A
s a
</hl>
<h2>
s a
cmkk kz kerl, automatikusan nagy mret cmsorknt

<h3>
elemek szintn cmsorokat hatroznak meg, de a betrn
retk fokozatosan cskken, egszen a
3.3. plda
<h6>
elernig.
Cmsorelemek
<?xml version="1.0"
<!DOCTYPE html
encoding="UTF-8"?>
PUBLIC "-//W3C//DTD
XHTML
1.1//EN"
"http://www.w3.org/TR/xhtm111/DTD/xhtmlll.dtd">
<html
xmlns="http://www.w3.org/1999/xhtml"
xml:lang="en">
<head>
<title>My Widgets</title>
</head>
<body>
<h1>My Widgets</h1>
<P>My widgets
are
the
best
learn more
about
<h2>Widget
Features</h2>
<p>If
had
any
in
the
land.
Continue
reading
to
my widgets.</p>
features
to
discuss,
you
can
bet
I'd
do
it here.</p>
<h3>Pricing</h3>
<p>Here,
I would
talk
about
my widget
about
how
pricing.</p>
<h3>Comparisons</h3>
<p>Here,
would talk
competitor's
my widgets
compare
to
my
widgets.</p>
</body>
</html>
Az eddigi pldk kapcsn bizonyra feltnt, hogy a szerz a kd behzsaival ks

relte meg rzkeltetni a HTML-dokumentum klnfle rszei kztti kapcsolatokat.
A behzsok hasznlata azonban egyltaln nem ktelez - ha gy tartja kedvnk,
az elemeket ssze is mleszthetjk szkzk s sortrsek nlkl; az eredmny
a bngszben gy is megegyezik az elzekben ltottakkaL A behzsok kizrlag
a kd olvasjnak segtenek abban, hogy jobban tlssa az eltte ll weboldal
szerkezett. A megfelel behzsok rendszeres hasznlata teht helyes gyakorlat,
s sokat segt abban, hogy fenntarthat kdhoz jussunk.
3. ra
MyWodg<ts- Morilla F-
A HTML s az XHTML
alapjai 1 39
c;;;:, lill tl
http-.//www.yourdomam.com/widgtts.html
MyWidgets
.My '\\-idgets are best in Ibe land Continue reading to learn more about my v.idgets.
Widget Features
If I bad any features to discuss, you can bet rd do it bere.
Pricing
Her<. I would taBc about my wK!get priciog.
Comparisons
Here. I would talk: about bow my widgets compare to my compditor's widgets.
ItDo..
-.:
3.3. bra
Termkbemutat weboldalunk tartalmt a cmsarok hrom szintjvel tagoljuk
Amint a 3.3. brn is lthatjuk, a HTML-cmsorok kdja ennl egyszerbb nemigen le
hetne. Pldnkban a "My Widgets" feliratot lthatan a <hl> elemmel jelentettk meg.
A legnagyobb mret (1. szint) cmsor ltrehozshoz nem kell mst tennnk, mint
elhelyezni a cm elejn a <hl>, a vgn pedig a </hl> cmkt. Ha nmikpp kisebb
(2. szint) cmsort szeretnnk- amely a fcmnl alacsonyabb rang szerepet jtszik-,
alkalmazzuk a <h2> s </h2> cmkket a cm krl. Ha ennl is alacsonyabb szint
cmsorra vgyunk, a <h3> s </h3> cmkk segthetnek. Fontos, hogy a cmsoraink
kvessk a tartalom hierarchijt, vagyis egyetlen l. szint cmsort tntessnk fel,
amely utn egy vagy tbb 2. szint cmsor ll, ezeket kvessk a 3. szint cmsorok, s
gy tovbb.
Elmletben a tovbbi, mg alacsonyabb rang cmsorokhoz hasznlhatjuk a <h4>,
<h5> s <h6> elemeket is, de erre a legtbbszr nem kerl sor. A bngszkben ritkn
lthatunk szmottev klnbsget a <h3> s az alacsonyabb rang cmsarok megje

lentsben, radsul a tartalom ltalban nem olyan alakban jelenik meg, hogy
az elrendezshez hatfle cmsorra lenne szksg.
Napjainkban rengeteg webhelyen lthatunk grafikusan kidolgozott betkbl ll,

kpknt begyazott szvegeket a hagyomnyos szveges cmsarok helyn. rdemes
azonban tudnunk, hogy a szveges cmsarok hasznlata egyike a keresoptimalizl
si fogsoknak, amelyekrl a 24. fejezetben olvashatunk majd. A keresk sorra veszik
a weboldalak cmsorelemeit, hogy kpet kapjanak a tartalom felptsrl, s
nagyobb hangslyt adnak a fontosabb (pldul 1. szint) cmsoroknak, mint azoknak,
amelyeket magunk is kisebb jelentsgnek tartunk.
Fontos felhvnunk a figyelmet a cm (title) s a cmsor (heading) kztti klnbsgre.

Ezeket knnyen sszekeverhetjk a rnindennapi beszdben, de a HTML-ben hatrozot
tan klnbsget kell tennnk kztk: a cm, amely a <title> elemben jelenik meg,
a teljes oldalt azonostja -csak a bngsz cmsorban jelenik meg, a bngszablakban
nem. A cmsarok ugyanakkor arra alkalmasak, hogy a segtsgkkel bizonyos szveg
rszleteket kiemeljnk a krnyezetkbL Egy weboldalon egyetlen <title> elem szere
pell1et, amelynek a <head> s a </head> cmke kz kell kerlnie. Ugyanakkor a <hl>,
<h2> s <h3> elemekbl annyit s olyan sorrendben hasznlhatunk, ahogy csak szeret
nnk. Mindazonltal, ahogy a korbbiakban mr emltettk, fontos, hogy a cmsorokat

valban a tartalom hierarchikus tagolsra hasznljuk, ne pedig egyszeren vizulis
elemknt- arra ott vannak a CSS-stlusok.
A szvegrszletek megjelensnek rszletes s teljes kr szablyozsrl knyvnk
II. rszben olvashatunk bvebben. Amg nem vagyunk e tuds birtokban, a cmsarok
adjk a legegyszerbb s legelterjedtebb mdot arra, hogy a figyelmet bizonyos szveg

rszletekre irnytsuk.
Ne feledjk, hogy amit a weboldal fejlcben helyeznk el, azt nem megjelentsre
sznjuk, viszont minden, ami a weboldal trzsben ll, megjelenik a bngszablakban.
lessk el a webtervezk fogsait!

Ha kicsit is krbenZnk napjaink csillog-villog, grafikval s olykor hanggal gazda
gon fszerezett weboldalai krben, bizonyra rbrednk, hogy az itt bemutatott
egyszer oldalak csak egy hatalmas HTML-jghegy icipici cscst jelentik. Az alapok
ismeretben azonban magunk is meglepdnk majd, rnilyen sok fogst leshetnk el
msok munkibl. Ha egy oldal HTML-kdjra vagyunk kvncsiak, nem kell mst
tennnk, mint a bngsznk Nzet (View) menjnek Forrs (Source) pontjt vlasztani.
Ne essnk ktsgbe, ha ebben a pillanatban nem rtjk minden HTML-elem jelentst,
illetve nem boldogulunk a hasznlatukkal-a kvetkez pr rban minden vilgoss
vlik. A kukucsklsnak azonban mr most is van rtelme, hiszen gy legalbb ltsbl
megismernk nhny olyan elemet, amelyrl a ksbbiekben tanulunk majd, s kpet
kapunk arrl, hogy mire is lesznk kpesek az j tudsunk birtokban.
A webes tartalom rvnyessgnek vizsglata

A 2. rn a weboldalaink tesztelsnek mdjairl beszltnk, amelyek kzl az egyik
legfontosabb az rvnyessgvizsglat volt. Gondoljunk csak bele: lehet, hogy mersz s

szp hzakat terveZnk, de ahhoz, hogy valban megpljenek, egy ptsznek is r kell
blintania a tervekre, igazolva, hogy a szerkezet valban megptl1et. A weboldalak
esetben az rvnyessgvizsglat hasonl ehhez-az "ptsz" azonban ez esetben nem
egy szemly, hanem egy alkalmazs.
3. ra
A HTML s az XHTML alapjai 41
Az rvnyessgvizsglat folyamata abbl ll, hogy egy erre a clra ksztett alkalmazs
tvirl hegyire tvizsglja az oldalainkat, s meggyzdik rla, hogy nem tartalmaznak
hibkat, s megfelelnek az XHTML szabvny szigor kvetelmnyeinek. A mi szemsz
gnkbl ez egy igen egyszer eljrs - a World Wide Web Consortium (W3C) ugyanis
elrhetv tett egy internetes rvnyessgvizsgl eszkzt, amelyet
a http: l Ivalidator. w3. org l cmen rhetnk el. Ha berjuk a cmer a bngsznkbe,
a
3.4. brn lthat W3C Markup Validation Service oldalra jutunk.
l=
liil
ll
&\!
W3C.
Markup Validation Service
C!'ect the m11rlup t-TML >..HT!J
Validate by URl
Valida-te by File Upload
of et ocu'lle'1t
Valldate by Direct Input
Valldate by URl
Valldate a document onhne
Address.
More Options
(._
Check
Ths validator checks the markup vahd1ty of Web documents in HTML, XHTML, SMIL., MathML., etc.
you wish to validate specific content such as RSSIAtom feeds or CSS sty!esheets Mob1leOK contenl
or to find broken finks, there are other vahdators and tools available
Done
3.4. bra
A W3C Markup Validation Service segtsgvel megvizsglhatjuk a HTML- (XH7ML-) dokumen
tumaink rvnyessgt, gy meggyzdhetnk arrl, hogy a kdjuk igazodik a szabvnyokhoz
Ha mr kzztettk a weboldalunkat a hlzaton, vlasszuk a Validate by URI (Ellenr

zs URI alapjn) flet. A Validate by File Upload (Feltlttt fjl ellenrzse) lapon a helyi
fjlrendszernkn trolt weboldalak rvnyessgt vizsglhatjuk V gl, a Validate by
Direct Input (Ellenrzs kzvetlen bemenetrl) lapon a krdses fjl tartalmnak
rszlett msolhatjuk be a vizsglathoz. Ha minden rendben van a kddal, az ellenrzs
vgn a 3.5. brn lthat pozitv visszajelzst kapjuk.
Amennyiben a W3C Markup Validation Service hibt tall egy weboldalon, rszletes
elemzssei szaigl (pontosan megadva, hogy mely sarok srtik a szablyokat). Mindez
nagyszer lehetsget ad arra, hogy felkutassuk a hibkat, s kigyomlljuk a nem meg
felel kdrszeket. Az rvnyessgvizsglat teht egy oldal szerkezetnek ellenrzse
mellett segt kiszrni s kijavtani a hibkat, mieltt az oldalt kzztennnk
az Interneten.
W3C.
Markup ValidatJon Service

,.t '" CTl!
'"
..1.
!"""!'L
Jump To:
...
c' '"l :1- rt'
Congratulattons
lcons
ThiS document was successfully checked as XHTML 1.1!

Result:
File:
Encodlng:
Doctype:
Root Element:
Root Namespace:
Done
(hp]
p,
ed
l Browse_ )
Use the file selectton box above tf you W1sh to re-wl1dale the uploaded fr/e
Mdget html
{detect automatiCalty)
Ulf-ll
XHTML 1.1
(detect automabcally)
hlml
ht!p/lwww w3 org/1999/xhtrnl
The W3C vaidators are hosted on seiVer technology donated by HP, and
supported by COITVTlUfllty donabons
Donate and help us bu11d better toolsfor a better web
3.5. bra
Ha a weboldalunk tment a W3C Markup Validation Seroice vizsglatn, kszen ll
a kzzltelre
Lteznek olyan webes fejleszteszkzk, amelyek maguk is lehetsget adnak az rv

nyessgvizsglatra, a W3C Markup Validation Service ignybe vtele nlkl. Vannak
kzttk bngszbvtmnyek, mint a Firebug (http: 11getfirebug. com/) vagy
a HTML Validator (http: 1/users. skynet. be/mgueury/mozilla/}. de szmos
ms program is szalgltat hasonl lehetsgeket - ezekrl az adott alkalmazs lersa
tjkoztat.
s HTML 5 - tmutat
a szabvnyok dzsungelhez
HTML, XML, XHTML
Az Internet hskorban a HTML nagy tallmnynak szmtott, hiszen lehetv tette,

hogy a tudsok kutatsi anyagokat kldzgessenek egymsnak hatkony s viszonylag
rendezett formban. Nem sokkal ezutn azonban megjelentek a grafikus bngszk, s
a HTML-t mr kezdtk a tudomnyos cikkeken tl ms adatok megjelentsre is hasz
nlni. gy vlt a HTML-bl a kutatk kellemes kis jellnyelvbl a hlzati kzzttel
3. ra
f43
ltalnosan elfogadott nyelve. A bngszk kszti ITiindezen felbtorodtak, s renge

teg apr lehetsggel egsztettk ki a HTML-t. Ezek eleinte nagyszernek tntek, de
megtrtk a HTML felptsnek egysgt, gy a bngszkben ettl kezdve bcst
mondhattunk a weboldalak egysges megjelentsnek - az jdonsgok egyes bng
szkben mkdtek, msutt nem, ha pedig "rossz" bngszt vlasztottunk, vgl ott
lltunk, ahol a part szakad. A HTML kezdett gy kinzni, nnt egy ptkezs, amelyen
megfelel egysges terv nlkl rengeteg csapat dolgozik a sajt szakllra. Vgl egyes
a bngszkre jellemz lehetsgek bekerltek a szabvnyba, msokat pedig teljes
egszben elvetettek.
Ms forradalmakhoz hasonlan a Web szletse is meglehetsen kaotikus folyamat
volt, a HTML mdostsaiban pedig ez a kosz kszn vissza. Az vek sorn a progra
mozk jelents erfesztseket tettek annak rdekben, hogy lenyesegessk a HTML
vadhajtsait, s kiss egysgesebb kpet adjanak a nyelvnek. A rendetlensgben a leg
nagyobb gondot az okozza, hogy gy a bngszknek tallgatniuk kell egy-egy webol
dal megjelentsnl, ami nem sok jval kecsegtet. Az idelis llapot az lenne, ha
a webtervezk pontosan meghatrozhatnk, hogyan nzzenek ki az oldalaik, s ez
a megjelens azonos lenne, fggetlenl attl, hogy rnilyen bngszvel jelentik meg
a ltogatk az oldalakat. Mg jobb lenne, ha a tervezk megadhatnk az oldalak jelen
tst is, s ez elg lenne ahhoz, hogy az eredmny rninden bngszben s rendsze
ren egysgesen jelenjen meg. Ettl az utpisztikus llapottl mg messze vagyunk, de
ltezik egy XML (Extensible Markup Language- bvthet jellnyelv) nev jell
nyelv, amely komoly segtsget jelenthet az oda vezet ton.
Az XML ltalnos nyelv, amely olyan, korltozottabb rendeltets nyelvek ltrehozs
ra szolgl, mint a HTML. Mindez elsre furcsnak tnhet, de a legkevsb sem az, ha
megrtjk, hogy itt ITiindssze arrl van sz, hogy az XML azt az alapszerkezetet s
azokat az alapvet szablyokat rgzti, amelyeket minden jell- vagy lernyelvnek
kvetnie kell. Mindennek ismeretben az XML segtsgvel magunk is ltrehozhatunk
egy j HTML-vltozatot. Akr egy BCCML (Botde Cap Collection Markup Language
kupakgyjt jellnyelv) nev jellnyelvet is kitl11etnk, amely segiliet a ritka ku
pakokbl ll gyjtemnynk adatainak trolsban s rendszerezsben. A lnyeg az,
hogy az XML megadja az alapokat az adatok egysges trolshoz- ezek az adatok
pedig a kupakoktl a weboldalakig az let brmely terletrl szrmazhatnak.
Azt gondolhatnnk, hogy a kupakoknak nincs sok kzk a Webhez- de akkor rnirt
ernlitettk meg ket? Nos, ennek oka van, ugyanis az XML jelentsge tlmutat
a weboldalakon: a segtsgvel tetszleges tpus adatot lerhatunk brmilyen szmt
gpen. Ha felidzzk napjaink adatforrsainak gazdagsgt a szmtgpektl s mo
biltelefonoktl a kzi szmtgpeken t a rdi- s tvkszlkekig, vilgoss vlhat,
mirt is szl tbbrl az XML, mint weboldalak rendbe raksrL Mindazonltal, az XML
egyik els alkalmazsa a Web kiemelst clozta a koszbl, ezrt kap ez a nyelv
fontos szerepet a HTML megrtsben.

Ha viszont az XML alkalmasabb az adatok lersra, mint a HTML, mirt nem hasznljuk
webes jellnyelvknt? Nos, az XML nem alkalmas a HTML helyettestsre, s nem is
versenytrsa annak. Az XML hatsa a HTML-re rnindssze a rendezettsg elrsben
rvnyesl- a HTML viszonylag laza szerkezet nyelv, amely kiaknzza az XML
szablyait. A kt nyelv termszetes egyeslse azt eredmnyezte, hogy a HTML alkal
mazkodott az XML szerkezethez s szablyaihoz. Az egyesls megvalstsaknt
szletett meg a HTML egy j vltozata, amely kveti az XML szigorbb szablyait- ez
az XHTML. Ebben a knyvben szerencsre rgtn az XHTML-lel dolgozunk, hiszen ez
valjban nem ms, mint a HTML egy "tisztbb" vltozata.
Vgezetl, szlnunk kell pr szt a HTML 5-rl, amelyet a legjabb webes szabvnyknt
emlegetnek - valarnikor taln valban az lesz, de erre mg veket kell vrnunk.
Mindazonltal, ha ez bekvetkezik, az XHTML-t sem kell sutba dobnunk, hiszen
a HTML 5- amely voltakppen a HTML 4 egy tdolgozott vltozata - nem helyettesti.
Rviden, az XHTML s a HTML 5 egytt is ltezhet majd a Weben, s azok a bngszk,
amelyek ma tmogatjk az XHTML-t, egy szp napon majd a HTML 5-t is elfogadjk.
Knyvnk clkitzse, hogy bevezetst adjon a webtervezs vilgba az XHTML s
a CSS megismersn keresztl. Mindazonltal, ahol csak lehetsges, jelezzk, ha ezek
nek a nyelveknek egy-egy eleme kin1aradt a HTML 5 szabvnybl, gy a tvolabbi j
vre is knnyebben tervezhetnk. Ha az alapokkal tisztban vagyunk, s megtanultuk,
rniknt hasznlhatjuk a CSS-stlusokat a weboldal jellnyelvvel (legyen az XHTML
vagy HTML 5), pr v mlva knny dolgunk lesz, ha esetleg dntennk kell, hogy
tlljunk-e az XHTML-rl a HTML 5-re.
sszefoglals
Ezen az rn megismerkedtnk a weboldalak szerkezetnek s mkdsnek alapjai
val. Megtudtuk, hogy a weboldalakat alkot szvegfjlokat kdolt HTML-utastsok
"keltik letre", s arrl is sz esett, hogy - fknt a tanuls idszakban - rdemes egy
szer szvegszerkesztvel elksztennk az oldalaink kdjt ahelyett, hogy grafikus
szerkesztk szolgltatsait vennnk ignybe. Megismerkedtnk a legegyszerbb s
legfontosabb HTML-elemekkel- ezeket alkalmazva egy egyszer dokumentumbl
pillanatok alatt valdi weboldalt hozhatunk ltre. Megtudtuk azt is, hogy egy weboldal
elksztsnl elszr el kell helyeznnk nhny ktelez elemet a kd elejn s
vgn- ide tartozik a cm megadsa is. Ezutn kijellhetjk a bekezdsek s a sarok
hatrait, majd vzszintes vonalakkal s cmsorokkal tovbb tagolhatjuk a tartalmat.
A 3.1. tblzatban ttekintjk az rn megismert elemeket.
Az ra vgn megismerkedtnk az XML s az XHTML fogalmval, valarnint azzal, hogy
miknt kthetk a HTML-hez, vgl pedig megtudtuk, rni is az a HTML 5, s hogyan
kapcsoldik az itt tanultakhoz.
3. ra
3.1. tblzat
}45
A 3. rn bemutatott lrTML-e/emek
Elem
lers
<html>...</html>
Magban foglalja a teljes HTML-dokumentumot.
<head>... </head>
Ez az elem tartalmazza a HTML-dokumentum fejlct.

A <html> cmkepran bell kell hasznlni.
<title>...</title>
Ez az elem tartalmazza a dokumentum cmt. A <head>
<body> ... < l body>
Ez az elem tartalmazza a HTML-dokumentum trzst.
cmkepran bell kell hasznlni.

A <html> cmkepran bell kell hasznlni.
<p>...< IP>
Bekezds. Az egyes bekezdsek kztt kihagy egy sort.
<br />
Sortrs.
<hr />
Vzszintes vonal.
<hl>...</hl>
Els szint cmsor.
<h2>...</h2>
Msodik szint cmsor.
<h3>...</h3>
Harmadik szint cmsor.
<h4>...</h4>
Negyedik szint cmsor (ritkn hasznlt).
<h5>...</h5>
Otdik szint cmsor (ritkn hasznlt).
<h6>...</h6>
Hatodik szint cmsor (ritkn hasznlt).
Krdezz-felelek
K:
Ksztettem egy weboldalt, de amikor megnyitom a fjlt a bngszmben, nem

a vrt eredmnyt kapom, hanem szveget HTML-kdokkal. Oykor radsul
az oldal tetejn mindenfle sszevissza karakterek jelennek meg. Mi lehet a ba?
j
V:
Minden bizonnyal nem egyszer szvegknt mentettk a fjlt. Prbljuk meg

jra a mentst, ezttal azonban gyeljnk arra, hogy biztosan a Plain Text vagy
az ASCII Text fjltpust vlasszuk. Ha nem talljuk ezt a belltst, ne essnk
ktsgbe- egyszeren rjuk be a HTML-kdot a Jegyzettmb vagy a TextEdit
szerkesztbe, s biztosak lehetnk benne, hogy minden megfelelkppen fog
mkdni. (Gyzdjnk meg arrl is, hogy a fjl a
html vagy a
h tm kiterjesz
tst kapta.)
K:
Szmos olyan weboldalt tallhatunk az Interneten, amelyeknek az elejn

nem szerepel a <html> cmke, noha az elzekben azt tanultuk, hogy
a H1ML-kdnak minden esetben gy kell kezddnie. Hogyan lehetsges ez?
V:
Szmos bngsz elnzi neknk, ha megfeledkeznk a <html> cmkrl, s gy

is helyesen jelenti meg a weboldalakat Mindazonltal, mgiscsak jobb, ha feltn
tetjk ezt az elemet, hiszen egyes prograrnak csak gy fogadjk el a fjlt rvnyes
HTML-oldalknt. Mr csak azrt is gy kell tennnk, mert azt szeretnnk, hogy
a weboldalaink megfeleljenek az XHTML szabvny kvetelmnyeinek.

Ismtls
Ez a rsz ismtl krdsekbl s vlaszokbl ll, amelyek segtsgvel megszilrdtlutjuk
az ebben a leckben szerzett tudsunkat. Prbljuk megvlaszolni a krdseket a vla
szok ellenrzse eltt.
Ismtl krdsek
1.
Melyik az a ngy elem, amelynek minden HTML-oldalon meg kell jelennie?
2.
Milyen HTML-elemekkel s szveggel kszthetjk el a kvetkezket?
3.
Kis mret cmsor a We are Proud to Present szveggel
Egy vzszintes vonal, amely tszeli az oldalt
Nagy mret cmsor az Orbit szveggel
Kzepes mret cmsor a The Geometric Juggler szveggel
Egy jabb vzszintes vonal
Milyen kdra van szksg egy olyan HTML-oldal ltrehozshoz, amelynek

a cme Foo Bar, az oldal tetejn pedig egy cmsor ll a Happy Hour at the Foo
Bar szveggel, amelyet a norml bettpussal szedett Come on down! sor kvet.
Vlaszok
1.
A <html>, a <head>, a <title> s a <body> elem (a hozzjuk tartoz </html>,
2.
A feladatot az albbi kddal oldhatjuk meg:
</head>, </title>
<h3>We are
<hr
s </body> zrcmkkkel).
Proud to
Present</h3>
/>
<h1>0rbit</h1>
<h2>The Geometric
Juggler</h2>
<hr l>
3.
A weboldal kdja a kvetkez:

<?xml version="1.0" encoding="UTF-8"?>
<! DOCTYPE html
PUBLIC
"-l/W3C/ /DTD
XHTML
1.1//EN"
<head>
<title>Foo
Bar</title>
</head>
<body>
<h1>Happy Hour
at
the
<P>Come on Down!</p>
</body>
</html>
Foo Bar</h1>
3. ra
A HTML s
az
XHTML alapjai
(47
Gyakorlatok
Lehetsges, hogy azrt olvassuk ezt a knyvet, hogy a cgnk szmra kszt
snk webes tartalmakat, de ha msrt nem, ht a gyakorlat miatt rdemes lehet
egy sajt weboldalt is ltrehoznunk. rjunk nhny bemutatkoz bekezdst, s
ksztsnk bellk valdi weboldalt az rn tanultak szerint.
Ahogy haladunk a knyv anyagban, a pldk kapcsn sajt weboldalakat is

ksztnk majd, ezrt sznjunk most nmi idt arra, hogy felptsk a leend
weboldalaink sablonjt - tntessk fel az XML- s a dokumentumtpus-meghat
rozst, valamint a HTML-kd alapszerkezetnek elemeit. gy brmikor lemsol
hatjuk ezeket az adatokat, antikor csak szksgnk van rjuk.
RA
A stluslapok vilga
A lecke tartalma:
EgyszerC stluslapok ltrehozsa

Stlusosztlyok hasznlata
Stlusazonosrk hasznlata
Bels stluslapok s kdon belli stlusok hasznlata
Az elz rn megismerkedtnk a HTML s az XHTML alapjaival, s megtudtuk azt is,
hogy miknt kszthetnk HTML-sablonvzat a webes tartalom szmra. Ezen az rn

a rangsorolt vagy tbbszint stluslapok (CSS, cascading style sheet) kerlnek tertkre,
amelyek lehetv teszik a tartalom megjelentsnek finomhangolst. A stluslapok m
gtt meghzd elgondols egyszer: egy stluslap-dokumentumot ksztnk, amellyel
megadjuk a webhelynk bettipusait, szneit, trkzeit s ms jellemzit, amivel egyedi
megjelenst biztostunk a szmra. Ha ezzel elkszltnk, ehhez a stluslaphoz kapcsol
hatunk rninden olyan weblapot, amelynek hasonl megjelenst sznunk- nem kell teht
kln-kln megadnunk a stlusokat mindegyikk kdjban. gy, ha ksbb mdostani
szeretnnk a cges betttipust vagy sznsszelltst, ezt megtehetjk a stluslap egy-kt
50
bejegyzsnek megvltoztatsval, s nincs szksgnk arra, hogy sorban trjuk

az egyes statikus weblapok kdjt. A stluslap teht formzsi utastsok gyjtemnye,
amelyek egyszerre tbb HTML-oldal megjelenst befolysoljk.
A stluslapok szmos formzsi belltst tesznek elrhetv - megadhatjuk a bett
pusok klnfle belltsait, a bet- s sorkzket, a margkat s szeglyeket, s mg
sok rninden mst. A mreteket klnfle egysgekben hatrozhatjuk meg, gy dnthe
tnk a hvelyk, a millimter, a pont vagy ppen a pica mellett. A stluslapok segtsgvel
pontosan elhelyezhetjk a kvnt szveget s grafikkat a weboldalakon, akr koordin
tkkal, akr az oldal ms elemeihez kpest.
Rviden szlva, a stluslapok kifinomultabb megjelenst tesznek lehetv a Weben,
radsul - elnzst a kihagyhatatlan szjtkrt - mindezt stlusosan teszik.
Ha van legalbb hrom weboldalunk, amelyek hasonl formzssal s bettpussal

rendelkeznek (vagy kellene, hogy rendelkezzenek). rdemes az ra sorn kszteni
szmukra egy kzs stluslapot De ha erre jelenleg nincs is ignynk, mindenkppen
rdemes stlusokat alkalmaznunk a weboldalaink egyes HTML-elemeire.
A CSS mkdse
A stluslapokat ler nyelv a CSS, amelynek az elemeivel bettpusokat, szneket, illetve
elhelyezst hatrozhatunk meg, gy vgeredmnyben megadhatjuk, hogy miknt
jelenjen meg egy oldal tartalma a bngszablakban. A CSS-stlusokat trolhatjuk
kzvetlenl az adott HTML-fjlban, de kln stluslapfjlban is elhelyezhetjk azokat.
Brhogy is jrjunk el, a stluslapok stlusszablyokat tartalmaznak, amelyek adott tpus
elemek megjelenst befolysoljk. Ha kln fjlban troljuk ket, a
ess
kiterjeszts
sei jelljk, hogy stluslapfjlrl van sz.

A stlusszablyok formzsi utastsok, amelyeket a weboldalak elemeire, pldul
a szvegbekezdsekre vagy hivatkozsokra alkalmazhatunk. A stlusszablyok stlustulaj
donsgoknak adott rtkekbl plnek fel. A bels stluslapok kzvetlenl a weboldalak

kdjban jelennek meg, mg a kls stluslapok nll fjlban kapnak helyet, amelyet egy
erre a clra alkalmas cmkvel kapcsolunk a weboldalhoz-errl a cmkrl hamarosan
bvebben is szlunk.
A CSS nevben szerepl "cascading" (rangsorolt vagy tbbszint) kifejezs arra utal,
ahogyan a rendszer a stlusszablyokat a HTML-oldal elemeire alkalmazza. Arrl van
sz ugyanis, hogy a CSS stluslap elemei egy hierarchit alkotnak, amelyben a szkebb
stlusok fellrjk a tgabb rvnyeket. A CSS-rtelmezre hrul a feladat, hogy a gya
korlatban is alkalmazza ezt a rangsort. Ha mindez kiss zavarosnak tnik, gondoljunk
a rangsorols folyamatra gy, rnint a genetikai rklsre, ahol a tulajdonsgok nagyj-
4. ra
A stfluslapok vilga
fs1
ban-egszben trkldnek a szlkrl a gyerekekre, de az utdok is rendelkeznek

sajtos jellemzkkeL Az ltalnosabb stlusszablyok teht a teljes stluslapra rvnye
slnek, a szkebb rvny szablyok azonban fellrhatjk azokat.
Egy rvid plda nyomn minden vilgoss vlik majd. Pillantsunk az albbi kdrszletre,
s prbljuk kiokoskodni, hogy mi trtnik a szveg sznvel:
ediv style="color:green">
This text is green.
ep style="color:blue">This
ep>This text
text is blue.c/p>
is still green.c/p>
e/div>
Bizonyra szrevettk, hogy az elem sz a szoksosnl tbbszr szerepelt az ra

eddigi anyagban (s gyakran megjelenik a knyv tbbi rszben is), rdemes teht
tisztzni. hogy pontosan mit is takar ez a fogalom. Nos, elemnek neveznk minden
tartalom- vagy informciegysget a weboldalakon - ez lehet pldul kp, bekezds
vagy hivatkozs. Az elemek kdolsra a cmkk szolglnak, vagyis az elemre gy
tekinthetnk, mint egy ler adatokkal (jellemzk, szveg, kpek s ms egyebek)
teltlttt cmkre.
A fenti pldban a zld sznt a color stlustulajdonsgon keresztl alkalmaztuk
a edi v> elemre, gy ht a edi v> elemen belli szveg zld lesz. Mindkt <P> elem
a edi v> gyermeke, gy a zld szvegstlus trkldik rjuk. Mindazonltal az els
<P>
elem fellrja ezt a stlust, s kkre vltoztatja a szveg sznt. Vgeredmnykp
pen az els sor (amely a bekezdscmkken kvl esik) szvege zld, az els valdi
bekezdsben kk szn betk szerepelnek, a msodik bekezds szvege pedig megrzi
az rklt zld sznt.
Ms webes technolgikhoz hasonlan a CSS is fejldtt az vek sorn. Eredeti
vltozata, a Cascading Style Sheets Levell (CSSI) 1996-ban jelent meg, utda, a mig
hasznlatban lev CSS 2 pedig 1998-ban. Napjaink bngszi kivtel nlkl kpesek
rtelmezni a CSS 2 kdokat, gy minden klnsebb elvigyzatossg nlkl hasznl
hatjuk a CSS 2 stluslapokat a munknk sorn. Ebben a knyvben, ha a CSS-rl szlunk,
a CSS 2-re gondolunk.
agyszer referenciamunkt tallhatunk a ess hasznlatrl a h t tp: l /www. w 3 . org l
Style/CSS/
cmen. Az ra tovbbi rszben bemutatjuk, miknt vlhat a CSS megbe
cslt segttrsunkk.
sz
Egyszer stfluslap ltrehozsa

A stluslapok ltrehozsa -dacra lenygz kpessgeiknek- igen egyszer is lehet.
zzk meg a 4.1. s a 4.2. brn lthat weboldalakat, amelyek nyilvnvalan szmos
kzs kpi jellemzvel rendelkeznek, amelyeket rdemes egy kzs stluslapban
rgztennk:
Mindkt oldal cmsorban nagy, flkvr Verdana betket tallunk, a trzsszveg

ben pedig rendes mret s betvastagsg szveget ugyanezzel a bettpussal.
Mindkt oldalon tallunk egy logo. gif nevezet kpet, amely a kperny jobb
oldalra kerl, a szveg pedig krlfolyja.
Minden szveg fekete, kivve az alcmeket, amelyek lila szinnel jelennek meg.
Mindkt oldal rendelkezik bal s fels margvaL
A szvegsorok kztt azonos trkzket tallunk.
A lbjegyzetek kzpre igaztva, kis betmrettel jelennek meg.
About BAWSI - Mozilla Mmox

file///C:./Vsen/JM/DocumenU/wms_rnainpage..html
- c
About BAWSI
The Bay Area Women's Sports lmbatrve (BAWSl} IS a pubhc benefit,

nonprofit corporabon wtth a misson to ereate programs and
partnersh1ps ttvough which women athletes bnng health, hope and
wholeness to our community. Founded 1n
2005
by otymptc and World
Cup saccer stars Brandi Chastatn and Juhe Foudy and Mariene
BJomsrud, forrner generat manager of the San Jose CyberRays
women's professtonal saccer team, BAWSI prov1des a meamngful
path for women athJetes to became a more visible and valued part of
the Bay Area sports culture.
BAWSI's History
The concept of BAWSI w as anspired by one of the most spectacular
ach1evements 1n women's sports history and bom out of one 1ts
WOMEN ATHLETES
G
l
MA
DIFFERENCE
b1ggest disappoll'ltments ..
Copyrtghr: C 2005-2009 8AWSI (www.bawsl.org). Ali nghrs reserved. Used w/th permlsslon.
Don
4.1. bra
Ez a weboldal egy stluslap segtsgvel hatrozza meg a szvegek s a kpek megjelenst s
trkzeit
A 4.1. pldban lthat stluslap rgzti a fenti tulajdonsgokat.
4. ra
Aboot BAWSI: TM- History, c.ontinue!d MoziUa Firefax
A stfluslapok vilga
,@1
file .Edit y__, Hi}tory &oolunrb loob tjdp
-------
file:///C:/Usen/JM/Document:s/wms_htmlcui04/ReondjMightml
About BAWSI: The History, continued

In the summer of 1999, the U.S. Women's National 5occer Team
defeated China to win the Women's World Cup in the Rose Bowl, the
elimax of a three-week, 16-team toumament that remains history's
most successful women's sports event, drawing more than 600,000
spectators. It also represented the most visible achievement of the
women's sports movement 1n the United States since the 1972
enactment of federal Title rx, which required schools and colleges to
provide equal sports opportunities to g1rts and women. Athletes like
Brandi Chastain and Julie Foudy, who led that team to the World
C\Jp, spawned the Women's United 5occer Association in 2001, the
wor1d's first women's professional saccer league. But in 2003, after
only three seasons, the league folded, and team organ!Zations
created b y some of the most accomplished athletes and
admnistrators
an
women's sports were disbanded.
WOMEN AlltLETES
MAKING A
DIFFERENCE
The Bay Area Women's Sports In1tiative - BAWSI - arose from the remnants of that effort, created to ensure
that the WUSA would not be the zenith of a short-lived golden age of women's sports but
rather
anather step
toward women's full achievement in the sports world. BAWSI's programs began with a eritical look at the unmet
needs in our community and took shape after imagining a profound change for a better world.
n r tH, m'I"Q]
Copyright C 2005-2009 a-l.WSI (www.bawsLorg).IJJ right:s reserved. Used with permlssion.
..,
Don<
4.2. bra
Ez az oldal a 4.1. bra stluslapjt hasznlja, gy kpes megrizni az egysges oldalkpet
4.1. plda
body
Kls stluslap
font-size:
lOpt;
font-family:
color:
Verdana,
Geneva,
Arial,
Helvetica,sans-serif;
black;
line-height:
14pt;
padding-left:
Spt;
padding-right:
padding-top:
Spt;
Spt;
hl
font:
14pt Verdana,
font-weight:
bold;
line-height:
20pt;
p. subheader
font-weight:
color:
bold;
#593d87;
Geneva,
Arial,
Helvetica,sans-serif;
}53

im g
padding: 3pt;
float: right;
{
text-decoration:
a:link,
color:
a:hover,
color:
none;
a:visited
#8094d6;
a:active
#FF9933;
div. footer
font-size:
9pt;
font-style:
line-height:
text-align:
italic;
l2pt;
center;
padding-top: 30pt;
Els pillantsra ez igen hossz kdnak tnhet, de ha kzelebbrl megnzzk, azt ltjuk,
hogy egy-egy sor nem tartalmaz klnsebben sok adatot. Megszokottnak nevezhet,
hogy az egyes szablyokat kln sorokban helyezzk el a jobb tlthatsg rdekben.
Ha mr a kd rtelmezhetsgrl beszlnk, nem mehetnk el sz nlkl amellett,
hogy a stluslapok kdja teljesen eltr a HTML-oldalakon lthattl - ez nem vletlen,
hiszen a CSS teljesen nll nyelv.
Tallhatunk persze itt ismers HTML-cmkket is - ahogy magunk is sejthettk, a stlus
lapon lthat body, hl, p, img, a s div kdok a megfelel HTML-elemekre utalnak,
amelyekre az adott stlust alkalmazzuk. Az elemek neve utn ll kapcsos zrjelek
kztt szerepl kd pedig az adott elem megjelensnek meghatrozsra hivatott.
Esetnkben a body szvege l O pontos Verdana betkkel jelenik meg (amennyiben
ez lehetsges), fekete sznnel, s a sorok kztt 14 pont tvolsggaL Ha a felhasznl
nem rendelkezne a Verdana bettpussal, a stluslaporr meghatroztuk, hogy mely be
ttpusokkal s milyen sorrendben prblja helyettesteni a bngsz. Ha ezek egyike
sincs jelen a rendszerben, a bngsz vgl az alaprtelmezett talp nlkli bettpus
hoz nyl. Mindemellett az oldal 5 pontos bal, jobb s fels margt kap.
A <hl> elemen belli szveg a stluslap utastsai szerint 14 pontos flkvr Verdana
betkkel jelenik meg. Ha tovbb haladunk, lthatjuk, hogy azok a bekezdsek, amelyek
mindssze a <p> elemet hasznljk, a body elem sszes stlust rklik. Ha azonban
a subheader nev osztlyt is hasznlatba veszik, a szveg flkvren s az #593d87
sznkddal (lila) jelenik meg.
4. ra
A stfluslapok vilga
l ss
A 4.1. plda rtkei utn ll pt pontot jelent, ahol egy hvelyket 72 pont tesz ki.
Ha gy tartja kedvnk, ms mrtkegysget is vlaszthatunk, gy mrhetnk hvelyk
ben (in) , centimterben (cm), kppontban (px) valamint emben (em)
ben az egysg az
ez utbbi eset
bet szlessge.
Taln szrevettk, hogy az egyes stlusszablyok utn egy-egy pontosvessz (;) ll.
Ezek vlasztjk el egymstl a szablyokat, gy alapvet fontossg, hogy az egyes
szablyok utn felruntessk ezt a jelet.
A stluslapokon tetszlegesen nagy betrnretet megadhatunk, de rdemes
tudnunk, hogy bizonyos megjelentk s nyomtatk nem kezelik megfelelen

a 200 pontnl nagyobb betket
Ahhoz, hogy ezt a stluslapot a HTML-dokumentumainkban felhasznljuk, helyezznk

el a
chead>
rszkben egy-egy
/>elemet. A 4.2. pldban a 4.1. brn lthat
<link
weboldal HTML-kdjt lthatjuk. Itt a kvetkez

clink rel="stylesheet"
type="text/css"
Mindez felttelezi, hogy a stluslapot egy
<link
/>elemet talljuk
href="styles.css"
styles. c ss
/>
nev fjlban troljuk, mghozz
ugyanabban a knyvtrban, rnint a HTML-dokumentumot. Ha a bngsz tmogatja

a stluslapokat - ezt napjainkban rnindegyikk megteszi -, az ott felsorolt tulajdonsgok
automatikusan fejtik ki a hatsukat, anlkl, hogy brmilyen HTML-formzsi kdot
kellene alkalmaznunk Mindez jl igazodik az XHTML szabvny valdi clkitzshez,
amely szerint el kell vlasztanunk a weboldalak tartalmt a megjelentskhz szksges
adatoktl.
4.2. plda
c?xrnl
A 4.1. brn lthat U'eboldal HTML-kdja
version="l.O"
c!DOCTYPE html
encoding="UTF-8"?>
PUBLIC
"-//W3C//DTD
XHTML
1.1//EN"
chtml xmlns="http://www.w3.org/1999/xhtml"
xml:lang="en">
chead>
ctitle>About
clink
BAWSI</title>
rel="stylesheet"
type="text/css"
href="styles.css"
/>
c/head>
cbody>
chl>About BAWSI</hl>
<P><img src="logo.gif" alt="BAWSI logo"/>The Bay Area Women's
Sports Initiative
corporation
through
our
with
which
(BAWSI)
a
women
community.
Founded
in
general
professional
manager
soccer
a public benefit,
to
athletes
stars Brandi Chastain and

forrner
is
mission
bring
prograros
health,
nonprofit
and
hope
partnerships
and
wholeness
to
2005 by Olympic and World Cup soccer

Julie
of the
team,
create
Foudy and Marlene B j ornsrud,
San
BAWSI
Jose
CyberRays
provides
women's
a meaningful path for

women athletes to become a more visihle and valued part of the
Bay Area sports culture.</p>
<p class="subheader">BAWSI's History</p>
<p>The concept of BAWSI
spectacular
was inspired by one of
the most
achievements in women's sports history and born out
of one its biggest disappointments... </p>

<P><a href="secondpage.html">[continue reading]</a></p>
<div class="footer">Copyright
©
2005-2009 BAWSI
(www.bawsi.org). All rights reserved. Used with permission.</div>

</body>
</html>
A legtbb bngszben megtekinthetjk a stluslap tartalmt, ha megnyitjuk

a megtelel . ess fjlt a Jegyzettmbben, vagy egy msik, dokumentumok megje
lentsre alkalmas szvegszerkeszt segdprogramban. (A . ess fjl nevnek
megllaptshoz tanulmnyozzuk a megtelel HTML-fjl kdjt.) A sajt stluslapjaink szerkesztshez hasznljunk valamilyen szvegszerkesztt.
Jllehet manapsg a CSS-t szles krben tmogatjk a bngszk, a helyzet
korntsem llt mindig gy. Radsul ez a tmogats mg ma sem minden esetben
tkletes. Ha meg szeretnnk tudni, miben trnek el egymstl a bngszk a CSS
tmogatsa tern, ltogassunk el
a http: l lwww. quirksmode. org l ess l contents. html cmre.
A 4.2. plda tartalma azrt rdekes, mert egyltaln nem tartalmaz formzst, vagyis
a HTML-kdban semmi nem utal arra, hogyan kellene megjelenteni a szveget vagy
a kpeket- nincsenek sznek, bettpusok vagy brmi ms hasonl. Az oldal formzsa
azonban mgis tetszets, ksznheten a styles. ess fjlban tallhat kls stluslap
nak Ennek a megkzeltsnek az az igazi elnye, hogy gy olyan, tbb oldalbl ll
webhelyet kszthetnk, amelynek az oldalai egysges kpet mutatnak. Radsul egyet
len dokumentumban (ez a stluslap) foglaljuk ssze az oldalak kpi megjelensnek
kdjt, vagyis egy mdosts az sszes kapcsold oldalra hatssal van.
nll feladat
Kszftsnk sajt stflus/apot!
Hozzunk ltre egy mystyles. ess nev fjlt, s helyezznk el benne nhny stlussza
blyt a <body>, <P>, <hl> s <h2> elemek szmra. Ha megvan a stluslap, hozzunk
ltre egy j HTML-fjlt, amely tartalmazza ezeket az egyszer elemeket. Prbljunk ki
klnfle stlusszablyokat, s figyeljk meg, milyen knnyen mdosthatjuk bekezd
sek egsz szvegtmbjeinek a megjelenst a stluslap egyetlen apr mdostsval.
4. ra
A stfluslapok vilga
fs7
A CSS-stflusok hasznlatnak alapjai

Megismerkedtnk a CSS-stluslapokkal, s megtudtuk azt is, hogyan plnek stlussza
blyokra, amelyek a weboldalak tartalmnak megjelentst szablyozzk. A kvetke
zkben rvid ttekintst adunk a legfontosabb stlustulajdonsgokrl, lehetv tve,
hogy felptsk a sajt stluslapjainkat
A CSS szmos stlustulajdonsgot tartalmaz, amelyekkel szablyozhatjuk a bettpusokat,
a szneket, az igaztst, a margkat, s mg sok egyebet. Ezek a tulajdonsgok alapvet
en kt csoportra oszthatk:
Elrendezsi tulajdonsgok-ide azok a tulajdonsgok tartoznak, amelyek

az oldal elemeinek elhelyezkedst, gy a margt, a kitltst, az igazrst s
hasonlkat szablyozzk.
Formzsi tulajdonsgok -ide tartoznak azok a tulajdonsgok, amelyek az oldal

elemeinek megjelenst befolysoljk, vagyis a bettpusr, a betmretet,
a sznt, s gy tovbb.
Elrendezsi tulajdonsgok
A CSS elrendezsi tulajdonsgai segtsgvel meghatrozhatjuk a tartalom elhelyezst
egy weboldalon. Az egyik legfontosabb kzlk a display, amely megadja, hogyan
jelenjen meg egy adott elem a tbbihez kpest. A tulajdonsgnak ngy rtke lehetsges:
block- Az elem j sorban jelenik meg, mint az j bekezdsek esetben.
list-item-Az elem j sorban jelenik meg, s egy listacmke ll eltte.
inline- Az elem az adott bekezdsen bell jelenik meg.
none - Az elem nem jelenik meg, hanem rejtve marad.
display
tulajdonsg a relatv elhelyezsre pt, amelynek sorn az elemeket
a trsaikhoz kpest helyezzk el az oldalon. A CSS lehetv teszi az abszolt elhelye
zst is, amikor az adott elemet a tbbiektl fggetlenl, pontosan meghatrozott

koordintkkal jelentjk meg. Minderrl bvebben a knyv lll. rszben olvashatunk.
A display tulajdonsgot knnyebben megrthetjk, ha a weboldalak elemeit gy

fogjuk fel, rnint tglalap alak terleteket-ezek megjelentst szablyazza a display
tulajdonsg. A block rtk hatsra az adott elem nllan, kln sorba kerl, mg
az inline rtk alkalmazsakor az t megelz tartalom mell helyezzk. A display
egyike annak a kevs stlustulajdonsgnak, amelyet a legtbb stlusszablyban felhasz
nlhatunk Az albbi pldban bemutatjuk, hogyan llthtjuk be a display rtkt:
display:block;
sal Tanuljuk meg a HTML s a CSS hasznlatt 24 ra alatt

Az adott elemhez tartoz tglalap alak terlet mrett a width (szlessg) s a height
(magassg) tulajdonsgokkal szablyozhatjuk Szmos ms, mreteket meghatroz
esS-tulajdonsghoz hasonlan itt is klnbz mrtkegysgek kzl vlaszthatunk
in - hvelyk
centimter
ern-
rnrn-
rnillimter
px
kppont
pt- pont
Egy stlustapon bell klnbz mrtkegysgeket is hasznlhatunk, de rdemes

a hasonl tulajdonsgoknl hasonl mrtkegysgek mellett dntennk gy a bettpu
sok tulajdonsgainl pldul a pont, a mreteknl pedig a kppont nagyszer vlaszts
lehet. Az albbi pldban az elem szlessgt kppontban hatrozzuk meg:
width: 200px;
Formzsi tulajdonsgok
A CSS formzsi tulajdonsgai a tartalom megjelenst szablyozzk, nem pedig annak
fizikai elhelyezst. Az egyik legismertebb kzlk a border (szegly), amelynek
a segtsgvel rszben vagy teljesen lthatv tehetjk egy adott elem hatrait. Az albbi
tulajdonsgok az elem szeglynek klnfle jellemzit rjk le:
border-width- A szegly vastagsga.
border-color -A szegly szne.
border-style-A szegly stlusa.
border-left -A bal oldali szegly.
border-right-A jobb oldali szegly.
border-top- A fels szegly.
border-bottom-Az als szegly.
border-A szegly minden oldala.
A border-width tulajdonsggal a szegly vastagsgt adhatjuk meg. Gyakran

kppontban rgztjk az rtkt - gy tesznk a kvetkez pldban is:
border-width:Spx;
A border-color s a border-style nem klnsebben meglep mdon a szegly
sznt s stlust adja meg, valahogy gy:

border-color:blue;
border-style:dotted;
4. ra
A stnuslapok vilga
lsg
A border-style tulajdonsg az albbi rtkeket veheti fel:
solid-
Egyvonalas szegly.
double-
Kettztt vonalas szegly.
dashed-
Szaggatott vonalas szegly.
dot ted-
Pontozott szegly.
groove-
Bemetszett szegly.
ridge-
Peremes szegly.
inset-
Homor megjelenst ad szegly.
ou tset-
none
Dombor megjelenst ad szegly.
-Nincs szegly.
A border-style alaprtelmezett rtke a none- ez az oka annak, hogy az elemek

nem rendelkeznek szegllyel, hacsak magunk nem tesznk valamit az gy rdekben.
A legelterjedtebb szeglystlusok a solid s a double.
A border-left, border-right, border-top s border-bottom tulajdonsgok lehet
v teszik, hogy egyenknt lltsuk be a klnbz oldali szeglyeket Ha azt szeretnnk,
hogy a szegly egyforma legyen mind a ngy oldalon, alkalmazhatjuk a border tulajdon
sgot, amelyben a border-width, border-style s border-color stlusok rtkeit
ebben a sorrendben, szkzzel elvlasztva adhatjuk meg. Az albbiakban a border
tulajdonsggal egy kt vrs vonalbl ll, sszesen 10 kppont vastagsg szeglyt
hozunk ltre:
border:lOpx double red;
border-style
egyetlen esetben nem a
szerint- ha egy kpet helyeznk el egy
<a>
none
rtket kapja alaprtelmezs
elemen, vagyis egy hivatkozsan be
ll. Ilyenkor automatikusan folytonos szeglyt kapunk. Ez az oka annak, hogy olyan
gyakran tallkozunk a hivatkozsokban szerepi kpeknl a
border-style: none
stlussal, amely eltnteti ezt az automatikus szeglyt.

Megtudtuk teht, hogy a szegly sznt a border-color tulajdonsggal adhatjuk meg
-a szeglyen bell ll tartalom sznt azonban a color s a background-color
tulajdonsgok szablyozzk. Az elbbi az elemben szerepl szveg (az eltr) sznrt
felel, mg az utbbi a szveg mgtti httr sznt adja meg. Az albbiakban mindkt
tulajdonsgban nvvel elltott sznt alkalmazunk:
color:black;
background-color:orange;
Ezekhez a tulajdonsgokhoz egyni szneket is rendelhetnk, csak adjuk meg a hexa

decimlis (lsd a 9. rt) vagy a decimlis RGB (vrs-zld-kk) kdjukat, mint
a HTML-oldalak esetben:
background-color:#999999;
color:rgb(0,0,255);
A CSS segtsgvel knnyen szablyozhatjuk a webes tartalom igazrst s behzsait

is a text-align s a text-indent tulajdonsgok rvn, valahogy gy:
text-align:center;
text-indent:l2px;
Ha elkszltnk egy adott elem igaztsval s behzsval, hozzlthatunk a bettpusa

belltshoz. Ebben az albbi tulajdonsgok lehetnek a segtsgnkre:
font-family-
font-size-
A bettpus csaldja.
A betmret.
A betstlus ( normal vagy italic ) .
font-style-
font-weight-
A bet slya vagy vastagsga (light, medium, bold s
gy tovbb).
A font-family tulajdonsgban bettpusok rangsorolt listjt adhatjuk meg- azrt
van szksg listra, mert gy tovbbi lehetsgeket biztostunk a bngsznek arra
az esetre, ha valamelyik bettpus nem ll rendelkezsre az adott rendszeren.
A font-size tulajdonsggal a betrnretet hatrozhatjuk meg valamilyen mrtkegy
sgben, tbbnyire pontban mrve. Vgl, a font-style tulajdonsggal a bet stlust,
a font-weight segtsgvel pedig a slyt adhatjuk meg. A belltsaink sszessge
pldul gy alakulhat:
font-family:
font-size:
Arial,
sa ns-serif;
36pt;
font-style:
italic;
font-weight: medium;
Sokat tanultunk a stlusokrl, gy rdemes visszalapoznunk a 4.1. pldhoz, hogy meg

nzzk, mennyit rtnk belle most. Az albbiakban sszefoglaljuk a listban szerepl
stlustulajdonsgok jellemzit:
font-
Lehetv teszi, hogy egyszerre hatrozzuk meg a betk tbb tulajdons
gt. Megadhatjuk az ajnlott bettpusok listjt, gy ha az els nem rhet el

az adott rendszeren, a bngsz megprblkozhat a kvetkezvel, s gy tovbb.
Feltntethetjk a bold (flkvr), illetve az i tali c (dlt) belltsokat, valamint
a betrnretet Mindazonltal, ha gy tartja kedvnk, ezeket a tulajdonsgokat
kln-kln is megadhatjuk a font-family, font-size, font-weight s
font-style
stlusokkaL
line-height-
A trdelk vilgban kitltsnek (leading) is nevezett rtk
a sormagassgot adja meg, tbbnyire pontban.
color-
Ennek a tulajdonsgnak a segtsgvel a szveg sznt hatrozhatjuk
meg, akr szabvnyos nevekkel, akr hexadecimlis sznkdokkal (bvebben

lsd a 9. fejezetben).
4. ra
A stfluslapok vilga
Ist
text-decoration- Hasznos tulajdonsg, ha a hivatkozsok alhzst szeret
nnk eltvoltani-ilyenkor adjuk neki a none rtket. Emellett vlaszthatjuk

az under line, az italic s a line-through belltst is. A stlusok alkalmaz
st a hivatkozsokra bvebben a 8. rn trgyaljuk
text - a l ign-Ennek alkalmazsval balra, jobbra vagy kzpre (left, right
vagy center) igazthatjuk a szveget, illetve sorkizrtt (justify) tehetjk.
padding-Ezzel a tulajdonsggal kitltst rendelhetnk az elem bal, jobb, fels
s als oldalhoz egy ismert mrtkegysgben, illetve az oldal mretnek

szzalkban. A jobb s bal oldal kitltsnek nll meghatrozsra
a padding-right s a padding-left, az als s fels oldalkitltsre pedig
a padding-bottom s a padding-top szolgl. Ezekrl a tulajdonsgokrl
bvebben a 14. s 15. rkon lesz sz.
Stfiusosztlyok hasznlata
Ez egy nll tanulshoz kszlt knyv, gy nem kell osztlyba jrnunk ahhoz, hogy
a stlusokrl tanuljunk, de a stlusosztlyokkal mindenkppen meg kell ismerkednnk.
Ha azt szeretnnk, hogy egy weboldal valamelyik szvegrszlete mskpp jelenjen
meg, mint az oldal tbbi rsze, bizonyos rtelemben magunk is ltrehozhatunk egyni
HTML-elemeket. Ezeket a klnleges formzsi utastsokat stlusosztlyokban trol
hatjuk-a stlusosztlyok teht olyan formzsi belltsok gyjtemnyei, amelyek egy
egysgknt alkalmazhatk egy weboldal brmely elemre.
Mieltt azonban megismerkednnk az els stlusosztlyunkkal, lljunk meg egy
pillanatra, s tisztzzunk nhny fogalmat a CSS-stlusok tmakrben. Elszr is,
rgztsk, hogy stlustulajdonsg alatt olyan stlust rtnk, amelyhez rtket rendel
hetnk-ilyen pldul a color vagy a font-size. A stlustulajdonsgot s a hozz tar
toz rtket egy vlaszt vagy kijell (selector) segtsgvel alkalmazzuk a weboldal
adott elemre. A vlasztk segtsgvel azonosthatjuk teht az oldalak egyes elemeit.
Lssunk most egy vlasztt, egy tulajdonsgot s egy rtket egytt egy egyszer stlus
szablyban:
hl
font:
36pt Courier;
Itt a vlaszt a hl, a stlustulajdonsg a font, az rtk pedig a 36 pt Courier.

A vlaszt jelenlte fontos, hiszen gy rjk el, hogy a stlus az oldal minden hl elemre
hasson. No de mit tegynk, ha klnbz hl elemeket szeretnnk hasznlni? Nos,

ilyenkor lpnek sznre a stlusosztlyok
Tegyk fel, hogy ktfle <hl> cmsorra van szksgnk. Ilyenkor mindkettjk szmra
ltrehozhatunk egy osztlyt, ha az albbi kdot helyezzk el a stluslapon:
hl.silly
hl.serious
font:
36pt Cornic Sans;
font:
36pt Arial;
Vegyk szre, hogy a vlasztkban itt a
hl
utn pont ll, majd pedig az osztly neve.
A kt osztly kztt a HTML-kdban a class jellemzvel vlaszthatunk, pldul gy:

<hl
class="silly">Marvin's Munchies
<p>Text
about
Marvin's Munchies
Inc.
goes
</hl>
here.
</p>
De hasznlhatjuk a msik osztlyt is:

<hl
class="serious">MMI
<p>Text
for business
Investor Information</hl>
investors
goes
here.</p>
Ha egy osztlyra szeretnnk hivatkozni a HTML-kdban, nem kell mst tennnk, tnint
megadni a nevt a megfelel elem class jellemzjben. Elz pldnkban a Marvin' s
Munchies Inc.
36 pontos Cornic Sans betkkel jelenik meg, amennyiben a stluslapra
hivatkoz <link/> elemet elhelyeztk az oldal elejn, tovbb a Cornic Sans bettpus
elrhet a felhasznl rendszern. Az MMI Investor Information ugyanakkor
36 pontos Arial betkkel jelenik meg. Az osztlyok hasznlatt a 4.2. plda is szemlltet
te: keressk a
<P>
elem subheader, illetve a <div> elem footer osztlyt.
Mit tehetnk akkor, ha olyan stlusosztlyt szeretnnk ltrehozni, amelyet tetszleges

elemre alkalmazhatunk, nemcsak egy cmsorra vagy ms elemre. Nos, hozzrendelhe
tnk egy stlusosztlyt a
<div>
elemhez-gy tettnk a 4.2. pldban-, ebbe azutn
belecsomagolhatunk brmilyen szveget, rnintha csak egy bekezdst rnnk-a <div>

igen hasznos trolelem.
Lnyegben sajt HTML-elemeket hozhatunk ltre, ha a di v vlaszt utn egy pontot
C.) runk, majd feltntetjk mellette a kvnt stlusosztly nevt s a hozz tartoz
stlusmeghatrozsokat Ezzel az elemmel egyszerre tetszleges szm bettpus-,
trkz- s margbelltst meghatrozhatunk. Ezt kveten, ahol csak hasznlni szeret
nnk ezt az egyni elemet az oldalon, helyezznk el egy <div> elemet, s a class
jellemzjben runtessk fel a stlusosztly nevt.
gy pldul a 4.1. plda stluslapjn az albbi stlusosztlyt hatroztuk meg:
div. footer
font-size:
9pt;
font-style:
line-height:
text-align:
padding-top:
italic;
12pt;
center;
30pt;
Ezt azutn a kvetkez elemmel alkalmaztuk a 4.2. pldban:

<div
class="footer">
4. ra
A stluslapok vilga
}63
Taln szrevettk, hogy megvltozott a k d alakja, amint tbb tulajdonsgot soroltunk

fel a stlusszablyokban. Ha egy stlusszably egyetlen stlust tartalmaz, a tulajdon
sgnak rtket ad utastst gyakran rjk egy sorba a szabllyal, valahogy gy:
div.footer
{ font-size:
9pt;
Ha azonban tbb tulajdonsg is szerepel a szablyban, nagyban knnyti

az olvashatsgot, ha soronknt csak egyet tntetnk fel, mint az albbi kdban:
div.footer
font-size:9pt;
font-style:
italic;
line-height:l2pt;
text-align: center;
padding-top:
30pt;
Brmi is ll a fenti elem s a zr </div> kztt a 4.2. pldban, 9 pontos, dlt,

kzpre igaztott betkkel jelenik meg, 12 pontos sormagassggal s 30 pontos fels
kitltssel.
A stlusosztlyok igazi rtkt az adja, hogy elvlasztjk a stlusok kdjt az oldalak
szerkezettl, gy egy oldal ksztsnl a tartalomra sszpontosthatunk, s ekzben
nem kell arra figyelnnk, hogy miknt jelenik majd meg a kpernyn. Ha pedig
elkszltnk a tartalommal, nyugodtan sszpontosthatunk a megjelentsre a stluslap
finombelltsainL Meglepve tapasztalhatjuk majd, hogy a stluslap apr mdostsai
milyen hatalmas vltozsokat okozhatnak a weboldal megjelensben. Mindez
knnyebb teszi a webhelynk fenntartst s mdostst.
nll feladat
Osztlyok hozzadsa egy stfluslaphoz
Az ra korbbi rszben elksztett stlustapon helyezznk el nhny stlusosztlyt

Hogy lssuk is munknk gymlcst, alkalmazzuk ezeket az egyszer HTML-oldalunkra.
A gyakorlat kedvrt mdostsuk a <hl> s a <p> elemeket.
Stflusazonostk hasznlata
Az egyni stlusosztlyainkat annyiszor hasznljuk, ahnyszor csak akarjuk- nem
egyediek teht. Elfordulhat azonban, hogy ez nem elg, s az elrendezs vagy
a formzs rdekben egyes elemek megjelenst pontosan meg szeretnnk hatrozni.
Ilyenkor osztlyok helyett rdemes azonostkat hasznlnunk.

A stlusazonostk olyan formzsi utastsok gyjtemnyei, amelyek egy weboldal
egyetlen, pontosan meghatrozott elemre alkalmazhatk. Egy azonostt tbb oldalon

is hasznlhatunk, de egy adott weboldalon bell csak egyszer hivatkozhatunk r.
Tegyk fel, hogy minden oldalunk trzsben tallhat egy cm. Minden oldal egyetlen
cmmel rendelkezik teht, de a cm minden oldalon ott van. A kvetkez pldban
bemutatunk egy azonostval elltott vlasztt, amelyhez egyetlen tulajdonsgot
hatrozunk meg a hozz tartoz rtkkel:
p#title
{font:
24pt Verdana,
Geneva,
Arial,
sans-serif}
Figyeljk meg, hogy a vlasztban az azonost neve egy kettskereszt (#)utn ll.
Ha a HTML-kdban egy stlusazonostra szeretnnk hivatkozni, egyszeren adjuk
meg az azonost nevt a kvnt elem
<p
id
jellemzjben:
id="title">Some Title Goes Here</p>
A nyit s a zr
<p>
cmke kztt ll teljes szveg 24 pontos Verdana betkkel jele
nik meg- de brmely adott oldalon csak egyszer. Stlusazonostkkal gyakran tallko
zunk majd az elrendezsi elemeknl, gy a fejlc, a lblc, a trzs s hasonlk megha
trozsnL Mivel ezek az elemek csak egyszer fordulnak el egy weboldalon, az azo
nosrk jobban alkalmazhatk az esetkben, mint az osztlyok.
Bels stfluslapok s kdon belli stflusok

Bizonyos esetekben olyan stlusokra is szksgnk lehet, amelyeket csak az adott
weboldalon kvnunk alkalmazni. Semmi gond, egy stluslapot elhelyezhetnk kzvet
lenl egy weboldalon, a
rlag az oldal
<head>
<style>
s a
</style>
cmkk kztt is- ezt azonban kiz
rszben tehetjk meg. A <link />elemre ezttal nincs szk
sg, s erre a stluslapra nem hivatkozhatunk ms oldalakrl (hacsak t nem msoljuk

a kdjt a msik dokumentum elejre). Ilyen esetekben bels stluslaprl beszlnk,
amint az ra egy korbbi rszben mr emltettk.
A 4.3. pldban bemutatjuk, hogyan hatrozhatunk meg egy bels stluslapot
4.3. plda
Weboldal bels stluslappal
<?xml version="l.O"
<!DOCTYPE
html
encoding="UTF-8"?>
PUBLIC "-//W3C//DTD
XHTML
1.1//EN"
<head>
<title>Some
Page</title>
xml:lang="en">
4. ra
<style
A stfluslapok vilga
fss
type="text/css">
div.footer
font-size:
9pt;
line-height:
text-align:
12pt;
center;
</style>
</head>
<body>
<div class="footer">
Copyright 2009 Acme
Products,
Inc.
</div>
</body>
</html>
A pldban a
d iv . footer
stlusosztlyt hatrozzuk meg az oldal fejlcben megjelen
bels stluslapon. A stlusosztly ennek megfelelen rendelkezsnkre ll az oldal

trzsben- fel is hasznljuk a szerzi jogi szveg formzsra.
<span>
s a
< / span>
res elemek, abban az rtelemben, hogy nmagukban
semmit nem tesznek, mindssze azonostanak egy tartalomrszletet, amelyre

rvnyesthetjk a
a
<span>
style
jellemzben megadott belltsainkat. A
<div>
elemek kztt mindssze annyi a klnbsg, hogy az elbbi tmbelem,
gy a hasznlata sortrssel jr, mg a
<span>
esetben nincs sortrs. Ha teht
egy foly szveg rszlett szeretnnk egyedi mdon formzni anlkl, hogy
sortrst alkalmaznnk, a
<span>
elemet kell vlasztanunk.
Ellen6rizzk a stfluslapjaink rvnyessgt!

A HTML- s XHTML-kdokhoz hasonlan a stluslapok rvnyessgnek vizsglata
is fontos- erre szolgl a
h ttp:
1 /j igsaw. w3. org/cssvalidator 1 cmen
tallhat segdeszkz. A 3. rn ltott rvnyessgellenrz eszkzhz hasonlan

itt is megadhatjuk a kvnt webcmet, feltlthetjk a krdses fjlt, illetve bernsol
hatjuk a vizsgland tartalmat a megfelel szvegmezbe. Vgs clunk, hogy
a 4.3. brn lthat eredmnyt kapjuk- a stluslapunk rvnyes.
A bels stluslapok nagyszer szalglatot tesznek, ha olyan stlusszablyt szeretnnk rni,
amelyet egy adott weboldalon tbbszr is felhasznlunk Addnak azonban helyzetek,
amikor egy bizonyos elemet szeretnnk egyedi mdon formzni. Ilyenkor rdemes
a kdon belli stlusokhoz Cinline style) folyamodnunk, amelyek lehetv teszik, hogy
az oldal kis rszt- akr egyetlen elemt- formzzuk Ilyen szablyokat ltrehozhatunk
a <p>, a
<div>
vagy a
<span>
elemekben, csak vegyk hasznlatba a
style
jellemz
jket. Azrt beszlnk kdon belli stlusokrl, mert a meghatrozsuk ezttal a HTML
kd belsejben tallhat.
ss
Lssuk most a
<P
style
jellemz hasznlatt egy rvid pldn:
style="color:green">
This
text
is
green,
bu t
<span
style="color:red">this
text is
red.</span>
Back
to
but ...
green again,
</p>
<P>
... now
the
for this
green
is
over,
and we're back
to
the
default
color
page.
</p>
A fenti pldban lthatjuk, hogyan hasznlhatjuk a cspan> elemet arra, hogy egy kdon
belli stlusszabllyal mdostsuk a szveg sznt. Ha jobban megfigyeljk a kdot,

lthatjuk, hogy mind a
sban a
color
<P>,
mind a
cspan>
elem feltnteti a kdbeli stlusmeghatroz
tulajdonsgot. Fontos megrtennk, hogy a
kztti szveg esetben a
color:red
bekezdsre viszont ezeknek a
color
stlus fellrja a
cspan>
s a
color: green
c/span>
cmkk
belltst. A msodik
tulajdonsgoknak egyike sincs hatssal, ugyanis ez
egy teljesen j bekezds, amelynek a tartalma kveti az oldal alaprtelmezett sznbell

tst.
"
W3C
CSS Valldation Service

,,l. c:::, Y:11 Jlill r-$" \ l-r e 1,J ot ,,
Jump to:
.. , .11
:;::: le, e . 1
Validated ess
W3C CSS Validator results for file://localhost/styles.css (CSS

level 2.1)
Congratulatlons! No Error Found.
Thtsdoa.ment vahdates asCSS level 2 1 l
To show yOIJf readersthat you\<e taken the care to create an onteroperable Web page, you may
dosplay llllsocon on any page Ihat vahdates. Here osthe XHTML you could use to add lhos ocon to
yolJ'Web page
<p>
<a hz:f"http://)iqsaw.vl.org/cu-vell.d.at.or/check:/uferer'">
<LD; atyle'"border: O;widtb: 1!8p:r::hei;bt: 31pa"
.src-"bttp: //)igsav. w3 -Or'9/csa-validator/1.-Qes/vclls"
alt-vaud CSS!" l>
<l>
</ p>
Don<
4.3. bra
A W3C CSS Validator meggyz arrl, hogy a 4.1. plda stluslapja mentes mindenfle hibtl
4. ra
A stfluslapok vilga
fs7
sszefoglals
Ezen az rn megtanultuk, hogy a stluslapokkal egyszerre tbb HTML-oldal megjelen
st is befolysolhatjuk A segtsgkkel hihetetlenl pontosan bellthatjuk a HTML
elemek formtumt, trkzeit s elhelyezst. Megtudtuk azt is, hogy a style jellemzt
szinte brmely HTML-elemre alkalmazhatjuk, meghatrozva ezzel a HTML-oldal tetsz
leges rsznek stlust anlkl, hogy egy kln stluslap-dokumentumra hivatkoznnk.
Megismerkedtnk a stluslapok beptsnek hrom mdszervel. Eszerint alkalmazha
tunk nll, . ess kiterjesztssei elltott stluslapfjlt, amelyet a weboldalaink <head>
rszben a <link />elemmel vehetnk hasznlatba, megadhatjuk a stluslapot
a HTML-oldal fejlcben a <style> elemmel, tovbb a style jellemzvel kzvetlenl
is elhelyezhetjk a stlusszablyokat az egyes HTML-elemeknl. A 4.1. tblzatban
sszefoglaljuk az ra sorn megismert elemeket. A CSS 2 stluslap-szabvnyrl rszlete
sebb tjkoztatst a http: l /www. w3c. org cmen kaphatunk- itt megtudhatjuk, milyen
formzsi lehetsgeket kapunk a <style> elemen, illetve a style jellemzn bell.
4.1. tblzat
A 4. rn bemutatott 1-ffML-e/emek s jellemzik
Elem/jellemzk
Lers
<style>-.</style>
Lehetv teszi, hogy egy dokumentumba bels stluslapot

gyazzunk be. Kizrlag a <head> s a </head> cmkk
kztt hasznlhat.
Jellemz
type=" tartalomtpus"
Az internetes tartalomtpus (a eSS-stluslapok esetben ez
mindig "text/ess") .
<link/>
Kls stluslapot (vagy ms dokumentumot) kapcsol egy

weboldalhoz. A dokumentum <head> rszben hasznlhat.
Jellemz
href="url"
A stluslap cme.
type=" tartalomtpus"
Az internetes tartalomtpus (a ess-stluslapok esetben
rel="stylesheet"
A kapcsolat tpusa. (A stluslapok esetben mindig
<span>...</span>
nmagban semmifle hatsa nincs, mindssze lehetsget
ez mindig "text/ess"}
"stylesheet".)
ad a style s ms jellemzk hatsnak kifejtsre. (Hasonl

a <div>...</div> elemhez, de nem okoz sortrst.)
Jellemz
style="stlus"
Itt helyezhetjk el a kdon belli stlusmeghatrozsainkat
(A
<span>, a <di v>, a <body> s szinte brmely egyb
HTML-elemen bell alkalmazhatjuk.)
ss Tanuljuk meg a HTML s a CSS hasznlatt 24 ra alatt
Krdezz-felelek
K:
Tegyk fel, hogy egy weboldalhoz egy olyan stluslapot csatalu nk, amelynek
a belltsai szerint az oldalon megjelen minden szveg kk sznt kap. Van
azonban a kdban valahol egy <span style=" font-color: red"> elem.
Milyen sznnel jelenik meg az ebben szerepl szveg- kkkel vagy vrssel?
V:
Vrssel. A helyi, kdon belli stlusok mindig fellrjk a kls stluslapok

belltsait. Hasonlkppen, a
<style>
s a
</style>
cmkk kztt, az oldal
elejn feltntetett stlusok szintn elnyt lveznek a kls stluslapok belltsai

val szemben (a kdon belli stlusok azonban ezeknl is ersebbek). Ez ppen
a stluslapok korbban emltett rangsoroltsgnak ksznhet. A kp egyszer:
a kls stluslapok belltsait fellrjk a bels stluslap szablyai, ezeket pedig
a kdon belli stlusok thetik ki a nyeregbL
K:
Hozzkapcsolhatunk egy weboldalhoz tbb stluslapot is?
V:
Persze. Kszthetnk egy kln stluslapot a formzs (szveg, bettpusok,

sznek stb.), egy msikat pedig az elrendezs (margk, kitlts, igazts stb.)
szmra- majd mindkettt csatolhatjuk a megfelel
<link
/>elemmel. A CSS
szabvny valjban azt kveteli meg a bngszktl, hogy ha tbb stluslap

rhet el
<link
/>elemek rvn, tegyk lehetv a vlasztst a felhasznl
szmra- a gyakorlatban azonban a legtbb bngsz egyszeren az sszes

gy megadott stluslapot bepti a kdba. Ha a szabvny szerint szeretnnk tbb
stluslapot hasznlatba venni, alkalmazzuk az
@import
url(stylesl.css);
@import
url(styles2.css);
@import
utastst:
A <link / > elemhez hasonlan az @import utastst is a weboldal <head>
rszben kell elhelyeznnk. Errl a hasznos utastsrl bvebben a 20. rn lesz

sz, amikor megtanuljuk, hogyan ksztsnk stluslapot kifejezetten weboldalak
nyomtatsra.
Ismtls
Ez a rsz ismtl krdsekbl s vlaszokbl ll, amelyek segtsgvel megszilrdthatjuk
4. ra
A stOuslapok vilga lsg
Ismtl krdsek
1.
Milyen kddal rhetjk el, hogy a cmsoraink 30 pontos, kk Arial betkkel

jelenjenek meg, mg az oldal tbbi szvegrsze ktszeres kz, 10 pontos
Times Roman bettpussal (illetve a bngsz alaprtelmezett bettpusval)
kerljn a kpernyre?
2.
Tegyk fel, hogy az elzekben elksztett stluslapot

troltuk. Hogyan alkalmaznnk egy
3.
intro. html
corporate. ess
nven
nev weboldalra?
Hnyflekppen gondoskodhatunk arrl, hogy a stlusszablyok kifejtsk

a hatsukat a tartalomra?
Vlaszok
1.
Helyezzk el a stluslaporr az albbi kdot:

hl
body
2.
font:
{
30pt
font:
blue Arial;
lOpt blue;
rjuk be a kvetkez kdsort az
}
intro.
htmldokumentum
<head>
<lhead>
crnki kz:
<link rel="stylesheet" type="textlcss"
3.
href="corporate.css"
l>
Hromflekppen: kls, bels s kdon belli stlusokkaL
Gyakorlatok
Ksztsnk szabvnyos stluslapot a webhelynk szmra, s csatoljuk az sszes

benne szerepl weboldalhoz. (Azoknak az oldalaknak az esetben, ahol el kell
trnnk ettl, alkalmazzunk bels, illetve kdon belli stlusokat.) Ha valarnilyen
cgnek dolgozunk, j esllyel mr adottak a nyomtatott anyagok bettpus- s
formzsi belltsai. Szerezzk meg ezeket a szablyokat, s alkalmazzuk a cg
weboldalain is.
Felttlenl ltogassunk el a stluslapok hivatalos szabvnyoldalra
( http: l lwww. w 3. org lStyleiCSSI), s prbljunk ki nhnyat azok kzl

a klnlegesebb stlustulajdonsgok kzl is, amelyeknek a bemutatsra ezen
az rn nem nylt alkalom.
5. RA
A lecke tartalma:
Szveg igaztsa az oldalon bell
A HTML hrom listatpusnak hasznlata
Listk a listkban
A Web hskorban a szveget egyetlen bettpussal s egyforma mret betkkel jele
ntettk meg. Mostanra azonban a HTML s a CSS egyttes hasznlatval a betk alakjn
fell a szveg igazrst s megjelenst is megadhatjuk a weboldalainkon. Ezen
az rn megismerkednk a szvegigazts alapvet mveleteivel, s bemutatunk pr
olyan halad fogst, mint a listk hasznlata. Mintl1ogy a listk igencsak elteedtek,
a HTML kln cmkkkel biztostja a listk automatikus behzst, az egyes listaelemek
szmozst, illetve felsorolsjelekkel val elltst. Vgl, az oldalainkon lv tartalom
bemutatsra szolgl sok-sok mdszer kzl a klnfle listatpusok formzsval
ismerkednk meg.
nl Tanuljuk meg a HTML s a CSS hasznlatt 24 ra alatt

nll feladat
Kszftsnk e/6 magunknak mintaszveget!
Akkor sajtrhatjuk el a leghatkonyabban az ra folyamn bemutatott szvegformzsi
mdszereket, ha elksztnk magunknak egy mintaszveget, amelyen aztn a behzst,
a kzpre igazrst s az egyb mveleteket gyakorolhatjuk
Brmilyen vzlat, egy bemutatbl szrmaz felsorols, szmozott lpsek, vagy

egy adatbzisbl szrmaz, szveges informcit tartalmaz lista j gyakorl
anyag lesz.
Mindegy, hogy milyen a szveg, de rdemes olyat keresnnk, illetve begpel

nnk, amely kikerlhet egy weboldalra. Valamilyen cges prospektus vagy
az nletrajzunk ppen megfelel lesz.
Ha a hasznlni kvnt szveg valamilyen szvegszerkeszt vagy adatbzis-kezel

programbl szrmazik, akkor mindenkppen mentsk j fjlba, egyszer, form
zs nlkli szvegknt, avagy ASCII formtumban. A mentett szveget a lecke
sorn majd elltjuk a megfelel HTML-cmkkkel s stlusjellemzkkeL
A fejezetben megismert, a szvegtrzs tartalmnak formzsra szolgl kd
hasznlatba vtele eltt lssuk el a szveget az elz rkon hasznlt, az oldal

v zt kialakt HTML-cmkkkel -a <html>, a <head>, a <ti tle> s a <body>
cmkrl van sz.
Szveg igaztsa
az
oldalon bell
Megszoktuk, hogy a Weben olvasott szveg nagy rsze balra van igaztva. Mindazonltal
gyakran tallkozhatunk olyan helyzetekkel is, amikor a szveget szvesen igaztannk
jobbra, vagy akr kzpre. A HTML lehetsget ad arra, hogy a tmb- vagy blokkszint
elemeket-pldul a <P> s </p>, illetve a <d i v> s < 1 d i v> cmkk kztt lv
szveget- kln-kln igaztsuk a megfelel helyre. Mieltt azonban a blokkelemek
igaztsnak rszleteit kezdennk trgyalni, egy gyors kitrt tesznk, hogy megbeszl
jk, miknt mkdnek a HTML-jellemzk.
A jellemzk
hasznlata
A jellemzk troljk a HTML-elemekhez kapcsold informcika t. A jellemzk olyan
klnleges kdszavak, amelyeket egy HTML-elem belsejben hasznlunk, s amelyek

megadjk, hogy az elem pontosan milyen hats legyen. A legkisebb webes tartalom
ban is alapvet a szerepk, gy igen fontos, hogy elsajttsuk a hasznlatuk mdjt.
5. ra
'
Szvegblokkok s listk 73
A jellemzk hasznlata egytt jr a bizonyos elemekre rvnyes stlusok, osztlyok, illet

ve azonosrk hasznlatvaL Ha egy stlustapon a 4. rn tanultak szerint megadunk vala
milyen osztlyt vagy azonostt, akkor az osztly, illetve az azonost gy rhet el, hogy
magban a cmkben a class=" osztly_neve", illetve az
id=" azonos t_neve"
kdot szerepeltetjk. Mikzben a bngsz a tartalom megjelentst vgzi, megnzi

a stluslapot, s az ott megadott stlusok ismeretben hatroz a megjelents pontos md
jrl. A fentiekhez hasonlan a style jellemz hasznlatval is megadhatk a klnfle
elemek formzsra vonatkoz informcik, anlkl, hogy az elemet egy stluslaphoz
kapcsolnnk. Amikor pldul a
<P>
elemmel megnyitunk egy bekezdst, a style jellem
zvel adhat meg, hogy a szveg az adott bekezdsen bell a bal vagy a jobb marghoz
rendezdjn, vagy az oldal kzepre igazodjon. Ha az adott bekezdst egy mr ltez
osztlyhoz, illetve azonosthoz kvnjuk rendelni, akkor a class, illetve az id jellemzt
kell belltanunk.
Az albbi plda mindhrom bekezdse balra van igaztva:
<P
style="text-align:
left;">Ide
<p class="leftAlignStyle">Ide
<P id="firstLeftAlign">Ide
kerl
kerl
kerl
a szveg.</p>
a szveg.</p>
a szveg.</P>
Az els bekezds esetben a formzst kzvetlenl a style jellemzben adjuk meg.

A msodik bekezds akkor lesz balra igaztott, ha a stluslap leftAlignStyle nev
bejegyzse tartalmazza a szveg igaztsra vonatkoz utastst. Ehhez hasonl
a harmadik bekezds is, amennyiben az is akkor lesz balra igaztva, ha a stluslap
firstLeftAlign osztlya tartalmazza a szveg igaztsra vonatkoz utastst.

Az elz pldban, s azokban is, amelyeket az elz rk sorn mutattunk be,
az Olvasnak esetleg feltnt, hogy a cmkket, jellemzket s stlusokat kisbetvel rtuk.
Az XHTML szabvny vonatkoz rsze megkveteli, hogy a jellemzket kisbetvel rjuk,
csakgy, mint a jellemzk rtkt kzrefog idzjelet
A kvetkez kdot pldul a Jegtbb npszer webbngsz megjelenten:
<P
STYLE=TEXT-ALIGN:CENTER>
A kd ugyanakkor nem elgti ki az XHTML szabvny elrsait, mivel a cmke nagybe

ts, a
style
jellemz s az rtke (text-align: center) szintgy, radsul az rtk
nincs idzjelben. Ha meg szeretnnk felelni a legjabb szabvnynak, illetve

a legjabb alkalmazsoknak, akkor tancsos a fenti alak szerint mindig az albbit rni:
<P
style="text-align:center">
74
A blokk.szint elemek igaztsa

Ha az olyan blokkszint elemeket, mint a <P>, anlkl szeretnnk a jobb marghoz
igaztani, hogy a stluslapon kln osztlyt, illetve azonostt hoznnk ltre, egyszeren
helyezzk el a bekezds elejn, a <P> cmke belsejben a style="text-align: r ight"
jellemzt. Hasonl az elem kzpre igaztsa is: ekkor a style= "text-align: center"
jellemzt kell hasznlnunk. Ha az oldalt balra kvnjuk igaztani, hasznljuk a <P
style="text-align:left">
kdot.
A HTML minden jellemzjnek s stlusszablynak van alaprtelmezett rtke.
Ha mi nem adunk meg rtket, a bngszk ezt az alaprtelmezett rtket hasznl

jk. A <P> elem text-align stlusszablya esetben az alaprtelmezett rtk
a left (balra). gy, ha a <P> elemen bell semmit nem lltunk be, akkor
az eredmny ugyanaz lesz, mintha a <P style="text-align:left"> kdot
hasznltuk volna. Ha j weboldalfejlesztk szeretnnk lenni, akkor fontos, hogy
a stlusszablyok alaprtelmezett rtkt megtanuljuk.
A text-align stlusszablyt nem csupn a <P> elemben hasznlhatjuk. St, az a hely
zet, hogy a text-align stlusszably brmely blokkszint elemben elfordulhat, azaz
tbbek kztt tallkozhatunk vele a <hl>, a <h2> s a tbbi cmsort jell elemben
ppgy, mint a <d iv> elemekben. A <d iv> elem klnsen kzrell, mivel alkalmas
ms, blokkszint elemek krbezrsra. gy lehetv vlik a webes tartalom nagyobb
rszleteinek egy egysgknt trtn igaztsa. A <d iv> elemben lv d iv a division,
azaz szakasz sz rvidtse.
Az 5.1. plda bemutatja, hogy a <P> s a <div> elemben miknt hasznlhat a style
jellemz s a text-align stlusszably. Az eredmnyt az 5.1. brn lthatjuk. A <div>

elem sok bonyolultabb, a knyv III. rszben ismertetett helyzetben is hasznlhat.
5.1.
plda
A style jellemzben hasztllt te>..1-aiign stlusszably
--------
<?xml ver sion="l.O"

<!DOCTYPE
encoding="UTF-8"?>
html PUBLIC "-//W3C//DTD
XHTML
1.1//EN"
<head>
<title>Bohe mia</title>
</head>
<body>
<div
<hl>Bohemia</hl>
<h2>by
</div>
Dorothy
Parker</h2>
5. ra
ep
Szvegblokkok s listk 75
style="text-align:left">
Authars
Never
and
know
Sculptors
actars
and
nothing,
and
Tell their
singers
affairs
artists
and
never
and
from
and
know
those of
Seattle
to
suehebr
/>
much.cbr
their
/>
kidneycbr
/>
Sydney.
<Ip>
ep
Playwrights
Start
off
Diarists,
Never
and
from
poets
and
anywhere,
such
end
horses'
up
at
neckscbr
sex.cbr
critics,
and
similar
say nothing,
and
never say no.
roecbr
/>
/>
/>
e/p>
ep
style="text-align:right">
People Who
Do
God,
man
for
Things
exceed
that
solicits
my endurance;cbr
/>
insurance!
e/p>
e/body>
c/html>
. --- ,-- ----- -..-------;:c

- -----."-o-- o-=-
-@-
BoMmia - MoZJlla Firefax

fe
d
_flf. rw H"!IiOf)' iookmarb !ools !::felp
http'.//www.yourdomain.com/bohemia.html
-
.. l
Bohemia
by Dorothy Padcer
Autbors and actocs and artists and such
Ne\-er know notbing. and neverknow mucb..
Sculptors and singen and tbose of their ldney

Tdl !heir affairs from Seattl< to Sydney.
Pla)"'-rigbts and poets ond such hoc=' necks
Start off&om anywbere, end up at sex.
Diarists, critics. and sirm1a:r roe
Nevo" say ootbing. and never say oo.
People Who Do Things exceed my eodnraoce;
God. for a man that sokits insurance!
Don<
5.1. bra
pldban hasznlt szvegigaztsok eredmnye
Az 5.1.
Az oldal tartalma- belertve a kt cmsort is-a edi v
style=" text-align: center">
elem hatsra kerl kzpre. Mindazonltal a edi v> elemen belli egyes bekezdsek
szvegigaztsa fellbrlja ezt a belltst.
gy kerl az els bekezds tartalma a bal
marghoz, a msodik kzpre, a harmadik pedig a jobb marghoz.

A HTML hrom listatpusa
A tisztbb tlthatsg vgett gyakran van szksg arra, hogy egy weboldalon az infor
mcit listaknt jelentsk meg. A HTML hrom alapvet listatpust ismer. Az 5.2. brn
mindhrmat bemutatjuk, az 5.2. plda pedig a kialaktsukhoz szksges HTML-kdot
ismerteti.
A rendezett listk olyan behzott listk, amelyben az egyes listaelemek szmozottak
A rendezett listk az <ol> cmkvel kezddnek, s a </ol> cnkvel zrulnak

A lista elemeit a <li> s a <Ili> cmkepr veszi kzre. Minden <li> cmke
automatikus sortrst eredmnyez. A teljes lista behzott.
A rendezetlen listk olyan behzott listk, amelyben az egyes listaelemeket valami
lyen felsorolsjel elzi meg. A rendezetlen listk az <ul> cnkvel kezddnek, s

a </ul> cmkvel zrulnak A lista elemeit a rendezett listk elemeihez hasonlan
a <li> s a <Ili> cnkepr veszi kzre. Minclen nyit <li> cnke sortrst
eredmnyez, illetve megjelenti a felsorolsjelet is. A teljes lista behzott.
A meghatrozslistk kifejezsekbl s a hozzjuk kapcsold jelentsbl llnak.

Ezt a klnleges listatpust, amelynek az elemei eltt sem szm, sem betl, sem
egyb jel nem tallhat, a <dl> s a </dl> cmke fogja kzre. Az egyes kifejez
sek a <dt> s a </dt> cmkk kz kerlnek, a meghatrozsokat pedig a <dd>
s </dd> cmkk kztt talljuk. A sortrs s a behzs automatikus.
How to Be- Prnper McwiJ.a Firdox
(!
http://-.yourdoma.n.com//howtobepropet.html
How to Be Proper
Basic Etiquette for a GentJemen Greeting a Lady Aquaintance
Wad: foc ber ac.knov.iedgjng bow beforc tipping your bal
sc k hand fartbest &-om her to raise tbc baL
WaDc with ber if sbe apresses a wisb to COIM':r"Se; Never make a lady stand taJking in the street.
\Vhen wallng. the lady must always bav the wal.
Recourse for a Lady Toward Unpleasant Men Who Persist in

Bowing
l. A simple stare oficioess sbould sufi"Jtt in most instancts
2. A cold bow disc"""'!les famiiarity wibout off<ring iosuiL
3. As a lastresert sir, I bave not Ibe booour ofyour aquaintaoc.e.
Proper Address of Royalty

Yourjesty
To lhe king or queen.
Your Rnyollliglmess
To lhe DlOIIlclr h's spouse, claldren. ond siblmgs.
Your lliglmess
To oepbews, nieces, and cousim of the smueign.
5.2. bra
A HTML-listk hrom
alaptpusa
5. ra
5.2. plda
}77
Ret1dezetle11 listk, retzdezett listk s meghatrozslistk
<?xml version="l.O"
encoding="UTF-8"?>
<!OOCTYPE html PUBLIC "-//W3C//DTD
XHTML
1.1//EN"
"http: l /www. w3. org/TR/xhtmlll/DTD/xhtmlll. dtd">

xml:lang="en">
<head>
<title>How
to Be
Proper</title>
</head>
<body>
<hl>How
to
<h2>Basic
Be Proper</hl>
Etiquette
for a Gentlemen
Greeting a
Lady Aquaintance</h2>
<Ul>
<li>Wait
<li>Use
for
her acknowledging
the hand
farthest
bow
before tipping
from her
to
raise
your hat.</li>
the hat.</li>
<li>Walk with her
if she expresses a wish to converse;
make a
talking in the street.</li>
lady
<li>When
stand
walking,
the lady must
always have
Never
the wall.</li>
</Ul>
<h2>Recourse for a Lady Toward Unpleasant Men Who Persist in Bowing</h2>
<Ol>
<li>A
simple
<li>A
cold
<li>As
stare
bow
last
of
iciness
should
suffice
discourages familiarity
resort:
"Sir,
have
not
in most
without
the
instances.</li>
offering
honour
of
insult.</li>
your
aquaintance."</li>
</ol>
<h2>Proper
Address
of Royalty</h2>
<dl>
<dt>Your Majesty</dt>
<dd>To
the
king or
queen.</dd>
<dt>Your Royal Highness</dt>

<dd>To
the monarch's spouse,
children,
and siblings.</dd>
<dt>Your Highness</dt>
<dd>To
nephews,
nieces,
and cousins
of the sovereign.</dd>
</dl>
</body>
</html>
Ne feledjk, hogy az egyes webbngszk ugyanazt a tartalmat meglehetsen eltren

jelentik meg. A HTML szabvny nem adja meg pontosan, hogy a webbngszknek
hogyan kell a listkat formzniuk. gy a rgebbi bngszvel rendelkezk esetleg nem
ugyanazt a behzst ltjk, amit mi. A listaelemek elhelyezsnek pontos belltsra
a CSS-t hasznljuk- mr a mai ra ksbbi rszben is.

Listk a listkban
Br a meghatrozslistk elvileg arra valk, hogy kifejezsek magyarzatt adjuk meg
velk, sok weboldalkszt minden olyan helyen meghatrozslistt hasznl, ahol
behzst szeretne ltni. A gyakorlatban brmely szveg behzsa gyorsan megoldhat,
ha el <dl> s <dd>, mg pedig </dd> s </dl> cmkket tesznk. Aszveg behz
sra mindazonltal megfelelbb a <blockquote></blockquote> crnkepr, gy
ugyanis anlkl trtnik meg a szveg behzsa, hogy valamifle meghatrozs jelen
ltre kvetkeztetnnk, radsul az oldal formzsa is lnyegesen ttekinthetbb lesz.
Megvannak ugyanis az elem terletnek szlessgt, magassgt, httrsznt, kerett
pust s sznt, illetve egyb tulajdonsgait bellt jellemzk.
Minthogy a CSS hasznlatval a listaelemek megjelense remekl bellthat, a behzs
ltvnyr gy is elrhetjk, hogy nem hasznlunk egymsba gyazott listkat. Egymsba
gyazott listkat teht ne hasznljunk, csak ha a tartalom kifejezetten ezt ignyli.
Ms szval, az egymsba gyazott listkat akkor rdemes hasznlni, ha az informci
hierarchikusan tagolt- ilyet ltunk az 5.3. pldban.
Az .,egymsba gyazott", illetve a .. begyazott" kifejezst olyankor hasznljuk, amikor

egy elem teljes egszben egy msik elem belsejben jelenik meg. A begyazott
elemeket szoks az ket tartalmaz elem (a szlelem) gyermekelemeinek is nevezni.
Elterjedt - br nem megkvetelt - webfejleszti eljrs, hogy a begyazott elemeket
behzssal klntjk el, gy knnyen ttekinthet, hogy milyen a gyermek- s
a szlelem viszonya.
5.3. plda
Listk hasznlata vzlat ksztsre
<?xml version="l.O" encoding="UTF-8"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML
1.1//EN"
<head>
<title>Vertebrates</title>
</head>
<body>
<hl>Vertebrates</hl>
<Ul>
<li><span style="font-weight:bold">Fish</span>
<Ul>
<li>Barramundi</li>
<li>Kissing Gourami</li>
<li>Mummichog</li>
</Ul>
</li>
5. ra
<li><span
style="font-weight:bold">Amphibians</span>
<Ul>
<li>Anura
<Ul>
<li>Goliath
Frog</li>
<li>Poison
Dart
<li>Purple
Frog</li>
Frog</li>
</ul>
<Ili>
<li>Caudata
<Ul>
<li>Hellbender</li>
<li>Mudpuppy</li>
</Ul>
</li>
</Ul>
<Ili>
<li><span
style="font-weight:bold">Reptiles</span>
<Ul>
<li>Nile
Crocodile</li>
<li>King
Cobra</li>
<li>Common
Snapping
Turtle</li>
</ul>
<Ili>
</Ul>
</body>
</html>
---
--
......... Moz.Ran..fox
loc>1@lliooJo"j
...
fol< i Yoow H$o<y }oobnori<> !ook !:!
IfJ;
http-J/www.yourdom&ln.com/nertlists.html
...
Vertebrates
Fish
o Bmnmuodi
o !Ussmg Goonan;
og
Ampbibiaas
oAmn
GolialhFrog
Poisoo Dart Frog
Purple Frog
o Cauda!a
Hdlbeoder
y
Reptiles
o NilcCcocodile
o King Cobno
oCommooSoappingTurtle
Ilon<
5.3. bra
A Fi1ejox a tbbszint rendezetlen listkat szpen behzza, s a szinteket eltr
felsorolsjelekkel
is
megklnbzteti. Az ilyen listkat knnyebb ttekinteni
J 79
Ahogy az 5.3. brn ltjuk, alaphelyzetben rendszerint a korong az els szint felsoro
lsjel, a msodik szint a kr,a harmadik s a tbbi szintet pedig kitlttt ngyzet jelzi.
A felsorolsjel ugyanakkor akr szintenknt is megadhat, ha az egyszer
helyett az
<ul style="list-style-type: disc"
type: eirele">,
illetve az
>,az
<ul>
cmke
<ul style=" list-style
<ul style="list-style-type: square" >
cmkt hasznl
juk, amelyek rendre korongot, krt, illetve ngyzetet lltanak be felsorolsjelknt

A rendezetlen listk belsejben az egyes listaelemek felsorolsjele is megadhat, mgpe
dig gy, hogy a
cmke belsejben a
<li>
Az albbi kd pldul az
extra
s a
list-style-type
super
sz eltt krt, a
stlusszablyt hasznljuk.
special
sz eltt pedig
ngyzetet jelent meg:

<ul
style="list-style-type:circle">
<li>extra</li>
<li>super</li>
<li
style="list-style-type:square">special</li>
</Ul>
list-style-type
stlusszably a rendezett listk esetben is hasznlatos, de ekkor
nem a felsorolsjelet lltja be, hanem az egyes listaelemek el kerl szm, illetve
bet tpust adja meg. Az 5.4. plda bemutatja, hogy egy tbbszint listban miknt
hasznlhatunk rmai szmokat (list-style-type:upper-roman ) , nagybetket
(list-style-type: upper-alpha) , kisbetket ( st-style-type: lower-alpha ) s

arab szmokat. Az 5.4. brn a kd eredmnyekpp kialakult,szpen formzott vzlat
lthat.
Az 5.4. pldban a
list-style-type
de hasznlhatnnk a listk egyes
<li>
stlusszablyt csak az
<ol>
cmkben hasznljuk,
elemei esetben is- mg akkor is, ha hirtelen
nem tudunk egyetlen olyan esetet sem, amikor ennek rtelme lenne. Az alaprtelmezs
szerinti arab szmok hasznlatt be is llthatjuk,mgpedig a
type:decimal
type: lower-roman
5.4. Dlda
list-style
stlusszabllyal. A kisbets rmai szmok hasznlata a
T6bbszint lista ksztse a list-stvle-tvtJe stlusszablv. illetve
hasznillatval
<?xml version="1.0"
<!DOCTYPE
html
encoding="UTF-8"?>
PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http: l /www. w3. org/TR/xhtmlll/DTD/xhtml11. dtd">

<html xm1ns="http://www.w3.org/1999/xhtml"
xml:1ang="en">
<head>
<title>Advice
from the Golf
Guru</title>
</head>
<body>
<h1>How to Win at Go1f</h1>
<ol
list-style
stlusszabllyal lltl1at be.
style="list-style-type:upper-roman">
stvle iellemz
5. ra
fa1
<li>Training
<Ol>
<li>Mental
prep
<Ol style="list-style-type:upper-alpha">
<li>Watch golf on TV religiously</li>
<li>Get that computer game with Tiger whatsisname</li>
<li>Rent
"personal victory" subliminal tapes</li>
</Ol>
<Ili>
<li>Equipment
<ol style="list-style-type:upper-alpha">
<li>Make sure your putter has a pro autograph on it</li>
<li>Pick up a bargain bag of tees-n-balls at Costco</li>
</Ol>
</li>
<li>Diet
<li>Avoid
junk food
<ol style="list-style-type:lower-alpha">
<li>No
hotdogs</li>
</ol>
<!li>
<li>Drink wine
and mixed drinks only,
no beer</li>
</Ol>
</li>
</ol>
</li>
<li>Pre-game
<Ol>
<li>Dress
<li>Put on shorts,
<li>Buy a
even if it's freezing</li>
new hat if you lost last time</li>
</Ol>
<!li>
<li>Location and Scheduling
<ol style="list-style-type:upper-alpha">
<li>Select
'- find
<li>To
a course where your spouse or boss won't
you<!li>
save on fees,
play where your buddy works</li>
</Ol>
</li>
<li>Opponent
<li>Look for: overconfidence,
inexperience</li>
<li>Buy opponent as many pre-game drinks

'- as possible</li>
</Ol>
</li>
</Ol>
</li>
<li>On the Course
<Ol>
<li>Tee off first,
then develop severe hayfever</li>
<li>Drive eart over opponent's ball to degrade aerodynamics</li>

<li>Say
"fore"
just
<li>Always replace
before
ball makes contact with
<li>Water cooler holes are a

O.
good time to
correct any errors
in ball
placement</li>
</ol>
<Ili>
</Ol>
</body>
</html>
=i@J-
. Advice from the Golf Guru MoZJlla Firefax

[Ile {.dit Y.ew Hitoty flookmarb !ook J:felp
li
'
""_-hrt,.,-:/
-- 't_O u""C
nlom
-
a in.coml::_m:::u:::ltru=""'-=html=-----+.;__
How to Win at Golf

l.
T..;.;"g
l. :\oi..Wprcp
A. W211ch golf oa TV re&g;cusly
B. Get tbaJ: cOillper game \\il:h T.ger \\'hatsiscame
c R= penona ,;c,ory sublimmal lllpeS
Equipmeru
A. :Make sure )'OIX putter bas a pro autograpb on it

B. Pick up a
bargain bag oftees-n-balls ar. Costco
A AvoKI juok food

a.
No hotdogs
B Drink """'and mix< inks
only, DO beer
n. Pre-game
l. Dress
A Put oa shorts, -m ifit's &eeziog
B. Buy a new hat if you lost 1ast
Localion and Sebeduling

A.
Select a course wbere your or boss woo't 6od you
B. To save on fees, play wbcre your buddy works
3. ()ppoo<ot
A. Look fu<: m-.rcoo!idmce,
B.
opponent<!li>
divots when putting</li>
Buy opponeot as many pre-game drioks as possi>k
i.
UL O. the Course
l. Tee offfirst. c:kvdop se\'ere hayfe\er
2. om. eart CJ\. oppooent's baD todegradt acrodynamics
3. Say Yore just bd'ore baD makes contact \\-itb

4. Ahvays rq>lac:e di\ots wbeo putting
S. Water cooltt holes are a good time to eorrect anyerrorsin baU placone:ot
l.
5.4. bra
Egy szpen formzott vzlat szinte nnden kialaktst tetszetsebb tehet
5. ra
Ja3
sszefoglals
Ezen az rn kiderlt, hogy a HTML-elemek belltsait s klnfle viselkedsmdjait
jellemzk segtsgvel adhatjuk meg. Megtanultunk szveget igaztani a style jellem
zben trolt eSS-stlusszablyok hasznlatval, tovbb megtanultuk a HTML hrom
alapvet listatpusnak-rendezett lista, rendezetlen lista s meghatrozslista-kiala
ktst s egyttes hasznlatt Vzlatok s egyb sszetett szvegelrendezsek megje
lentsekor szksgess vlhat a listk ms listkon belli elhelyezse.
Az 5.1. tblzat a mai rn megismert elemeket s jellemzket foglalja ssze. Nem mu
szj az sszes cmkt fejbl tudnunk: azrt van ez a knyv, hogy ha valamelyik elemre
szksgnk van, kikereshessk belle. Ne feledjk, hogy a "B" fggelkben vala
mennyi HTML-elem szerepel.
11.1. tblzat
Az 6t6dtk rn trgva/t H1ML-elemek s -jellemzk
Elem/Jellemz
Lers
<div>... </div>
A formzsra vr szvegrsz.
<dl>... </dl>
Meghatrozslista.
<dt>... </dt>
A meghatrozslista rszeknt
szerepl meghatrozand fogalom.
<dd>...</dd>
A meghatrozslista rszeknt
szerepl, a meghatrozand
fogalomhoz tartoz meghatrozs.
<Ol>...</Ol>
Rendezett (szmozott) lista.
<ul>...</ul>
Rendezetlen (felsorolsjeles) lista.
<li>...</li>
Az <ol> s az <ul> listban szerepl
listaelemek
Jellemzk
style="text-align:igazts"
A szveget kzpre ( center) , balra
(left) vagy jobbra (right) igaztja.

(A <p>, a <hl>, a <h2>, a <h3> stb.
cmkkkel is hasznlhat.)
style="list-style-type:szmtpus"
A listaelemek szmozsra szolgl szm

tpusa. A lehetsges rtkek: decimal
(arab szm), lower-roman (rmai szm
kisbetvel), upper-rornan (rmai szm
nagybetvel), lower-alpha (kisbetk),
upper-alpha (nagybetk) s none
(semmi).

11.1. tblzat
Az tdik ru trgyalt HIJ.l-1L--elemek s -jellemzk
Elem/Jellemz
style=" list-style-type:
(folytats)
Lers
felsorolsjel"
A listaelemek felsorolsjelnek tpusa.

A lehetsges rtkek: disc (korong),
circle
none
style= "list-style-type:
tpus"
(kr), square (ngyzet) s
(semmi).
A listaelemet jelz felsorolsjel, illetve
szm tpusa. A lehetsges rtkek:

disc, circle, square,decimal,
lower-roman,upper-roman,
lower-alpha, upper-alpha
s none.
Krdezz-felelek
K:
Lttam olyan weboldalakat, amelyek hromdimenzis gmbket vagy egyb
V:
Ez a tma meghaladja ennek a fejezetnek a kereteit, de a ll. rn ezt is
klnleges grafikt hasznlnak. Hogy lehet ilyet kszteni?

megtanuljuk.
K:
Hogyan lehet egy szveget sorkizrtt tenni, azaz azt megoldani, hogy a bal
V:
A formzs megadsakor hasznljuk a text-align: justify stlusszablyt.
margtl a jobb margig rjen a szveg?
Ismtls
Ismtl krdsek
1.
Hogyan lehet egy oldalon bell mindent kzpre rendezni?
2.
Hogyan lehet egyetlen szt behzni, iJ!etve ngyzetet tenni el?

Hogyan nz ki az a HTML-kd, amely megadja, hogy a "glunch" angol sz
jelentse az, hogy "a look of disdain, anger, or displeasure" , illetve a "glumpy"
angol sz annyit tesz, hogy "sullen, morose, or sulky"?
3.
5. ra
Szvegblokk.ok s listk
las
Vlaszok
1.
Ha arra gondoltunk, hogy a <div style="text-align:center"> cmkt kz

vetlenl az oldal tetejn lv <body> cmke al, a < 1 div> cmkt pedig kzvetle
nl az oldal aljn lv </body> cmke fl helyezzk, akkor okosan dntttnk.
A text-align stlusjellemzt mindazonltal maga a <body> elem is tmogatja,
azaz elhagyhatjuk a <div> elemet, s a style="text-align:center" stlussza

bly kerlhet kzvetlenl a <body> elembe- ezzel az egsz oldal tartalmt
kzpre igaztjuk
2.
Hasznljuk az albbi kdot:

<ul style="list-style-type:square">
<li>supercalifragilisticexpealidocious</li>
</Ul>
(Ha a style=" list-style-type: square" stlusszablyt magban a <li>

elemben helyeznnk el, az is ezzel az eredmnnyel jrna, mivel a lista egyetlen
elembl ll.)
3.

<dl>
<dt>glunch</dt><dd>a look of disdain,
<dt>glumpy</dt><dd>sullen,
morose,
anger,
or displeasure</dd>
or sulky</dd>
</dl>
Gyakorlatok
Helyezznk el a weboldalunk klnbz rszein szvegblokkokat a szvegiga

ztsra szolgl stlusjellemzk segtsgve!. Prblkozzunk a bekezdsek s
szakaszok (a <P> s a <d iv> elem) egymsba gyazsval - gy fogunk rrezni
arra, hogy a stlusok hatsa hogyan rvnyesl a tartalmi hierarchia egyes szint
jein.
lltsunk el szmozott listt azokbl a dolgokbl, amelyeket a honlapunkon

szerepeltetni kvnunk. Ezzel nemcsak a HTML-listk formzst gyakoroljuk,
de felmerlnek azok a problmk is, amelyekkel a knyv ksbbi fejezeteiben
fogunk foglalkozni.
6. RA
Betformzs
A lecke tartalma:
Hogyan llthatunk be flkvr s dlt betket s egyb betalakokat?
Halad betbelltsok
Az elz rn megismerkedtnk a szvegblokkok ltrehozsnak alapvet fogsaival,

illetve a szveg listv alaktsval. Ezen az rn magukat a szveget alkot elemeket
vesszk kzelebbrl szemgyre, s megtanuljuk, hogyan mdosthat a betk kinzete
- pldul a bettpuscsald, a mret s a betvastagsg. Megtudjuk, hogy miknt
hasznlhatunk a weboldalainkon flkvr, dlt, illetve thzott betket, s azt, hogy
miknt alakthatjuk a betket fels, illetve als indexv. Megismerjk a bettpus s
a betmret belltsnak mdjt is.
Ms webtervezk munkit ttekintve a szvegformzsnak olyan mdszereivel is

tallkozunk majd, amelyek eltrnek a knyvben ismertetett eljrsoktl. A rgimdi"
..
szvegformzs eszkzei kz tartozik a flkvr szvegrszek jellsre szolgl

<b> </b>, a dlt betvel rand szveget jell <i> <l i>, valamint a bettpus,
a betmret s egyb jellemzk belltsra hasznlhat <font> </font>

cmkepr. Mostanra azonban ezeket semmi rtelme megtanulnunk, hiszen lassan
kipusztulnak a HTML-bl, a CSS pedig rezheten hatkonyabb lehetsgeket knl.
nll feladat
jabb feladat, jabb mintaszveg
Az elz rn ksztettnk magunknak egy mintaszveget tartalmaz munkafjlt. K
sztsnk most is egyet, s a fejezet sorn prbljuk ki a megismert mdszereket - ezzel
is elsegtve a hatkony tanulst.
Minthogy az ezen az rn elkerl informci nagy rsze karakterszint formzs,
nem igazn van jelentsge annak, hogy milyen szveget hasznlunk. Olyan sok
kiprblhat lehetsg van, hogy egy weboldalon bell semmikpp sem fordulhat el
valamennyi vltozat - hacsak meg nem akarjuk bolondtani a weboldal ltogatit.
Hasznljuk ki az alkalmat, s prbljunk rrezni, milyen hatst gyakorolnak a szveg
szint vltoztatsok a weboldalunk kinzetre.
Flkvr, dlt s egyb betalakok

Rges-rgen, amikor mg az rgpek kort ltk, elgedettek voltunk az egyszer
szveggel, illetve a nyomatkosrst jelent, itt-ott elfordul alhzssal. Manapsg
n1inden papr alap szvegben szinte ktelez a flkvr s a dltbetk hasznlata.
Termszetesen a weboldalainkon is hasznlhatunk flkvr s dlt betket; a szveg
formzst szmos cmke s stlusszably segti.
A flkvr, illetve a dlt szveget eredmnyez stlusszablyok helyett hasznlhatjuk

a <strong> s a </strong>, illetve az <em> s </em> cmkket is. A <strong>
cmke hatsa a legtbb bngszben a <b> cmke hatsval egyezik meg, az <em>
cmke hatsa pedig az <i> cmkjvel- mindkt utbbi elem dlt betket eredmnyez.
A <strong> s az <em> cmkt sokan tekintik elrelpsnek a <b> s az <i>

hasznlathoz kpest, mivel az elbbiek csak annyit jeleznek, hogy a szveg
nyomatkostst ignyel, de nem szabjk meg pontosan, hogy azt hogyan kell
megvalstani. Ms szvai, a bngsznek nem kell a <strong> elemet szksg
szeren flkvr szvegknt rtelmeznie, s az <em> sem jelent felttlenl dlt
bett. gy a <strong> s az <em> elem jobban beleillik az XHTML vilgba,
hiszen jelentstartalommal is gazdagtjk a szveget, nem csak a megjelentst
szablyozzk. Mind a ngy elem rsze marad a HTML 5 szabvnynak is, br
a szerepket valamivel jobban megklnbztetik.
A flkvr, illetve dlt betk kialaktsnak rgimdi eszkze a <b> </b> s az <i>
<l i> cmkepr. Ha flkvr szveget szeretnnk rni, akkor a szveg elejn a <b>,
a szveg vgn pedig a </b> cmkt kell elhelyeznnk Dlt bets szveget hasonlan
6. ra
Betformzs
{ag
kszthetnk a szveget <i> s <l i> cmkkkel kell krbevennnk Br a mdszer

a bngszkben remekl mkdik, s az XHTML is tmogatja, nem olyan rugalmas s
gyes, mint a CSS stlusszablyaival megvalstott szvegformzs.
Br a knyv III. rszben lnyegesen tbbet tudunk meg a CSS stlusszablyairl, rde
mes kicsit zlelgetnnk a tmt, mert ez elsegti a szvegformzs megrtst. A betk
vastagsgnak, illetve kvrsgnek szablyozsa a font-weight stlusszabllyal vlik
lehetv. A font-weight stlusszably lehetsges rtkei a normal (norml), a bold
(flkvr), a balder (kvrebb) s a lighter (vkonyabb); az alaprtelmezett rtk
a normal. Dlt bet a font-style stlusszabllyal llthat be. A szably lehetsges
rtkei: normal, italic (dlt) s oblique (ferde). Ha egyszerre tbb stlusszablyt is
szeretnnk alkalmazni, akkor egyttesen is megadhatjuk ket. Ezt mutatja az albbi
plda:
<p style="font-weight:bold;
font-style:italic">Ez
bekezds
flkvr
s dlt!</p>
A fenti pldban mindkt stlusszablyt a <P> elem style jellemzjben adtuk meg.
Tbb stlusszably egyttes hasznlatakor figyelnnk kell az ket elvlaszt pontos
vesszre (;) is.
A betformzsokat nem csak a bekezdsekben hasznlhatjuk Az albbi plda
azt mutatja be, hogy miknt hasznlhat dlt bet egy felsorolsjeles listban:
<Ul>
eli style="font-style:italic">Important
<li style="font-style:italic">Critical
eli
style="font-style:italic">Highly
<li>Nothing All
Stuff</li>
Information</li>
Sensitve
Material</li>
That Usefulc/li>
</Ul>
A font-weight stlusszablyt cmsorokban is hasznlhatjuk, de a vastagts ltalban
nem mutatkozik meg, mivel a cmsarok alaphelyzetben is vastagtottak.

Br a CSS-nek ksznheten a formzsi lehetsgek kibvlnek, van pr olyan
HTML-elem, amely akkor is alkalmazhat, ha eltekintennk a CSS hasznlatval egytt
jr lehetsgek kiaknzstL Az albbiakban pr ilyen elemet ismertetnk. Az egyes
elemek mkdst a 6.1. plda s a 6.1. bra szemllteti.
<small></small>
cbig></big>
Kis betmret szveg.
Nagy betmret szveg- a HTML 5 nem tartalmazza, mivel
a szveg mrete hatkonyabban szablyozhat CSS-se!.
<sup></ sup>
Fels indexben lv szveg.
<sub></ sub>
Als indexben lv szveg.
illetve <i></ i>
cem></em>,
<strong></strong>,
Nyomatkostott (dlt bets) szveg.
illetve <b></b>
Vastagtott (flkvr) szveg.
<t t></tt>
Egyenl szlessg karaktereket tartalmaz szveg (rgpbetk)
- a HTML 5 nem tartalmazza, mivel a betk mrete hatkonyabban szablyoz

hat CSS-se!.
<pre>< /pre>
Egyenl szlessg karaktereket tartalmaz szveg, amely
megrzi a szkzket s a sortrseket
Alhzott szveget korbban az
<u>
cmkvel hoztunk ltre, de ma mr tbb okunk
is van arra, hogy errl leszokjunk. Elszr is, a telhasznlk arra szmtanak, hogy
az alhzott szveg egy hivatkozs, ezrt zavar lehet, ha olyasmit hzunk al, ami
nem az. Msodszor, az
<u>
elem hasznlata ellenjavallt, ami annyit jelent, hogy
kikerl a HTMUXHTML nyelvbl- ahogy a
<strike>
(thzs) elem is.
A bngszk mindkt elemet megrtik, s alighanem mg sokig meg is fogjk, de

alhzott vagy thzott szveg ltrehozshoz a CSS hasznlatt szorgalmazzk.
6.1. plda
Kk5nleges formzst megvalsft elemek
<?xrnl version="l.O" encoding="UTF-8"?>

<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML
1.1//EN"
<html xrnlns="http://www.w3.org/1999/xhtml" xrnl:lang="en">
<head>
<title>The Miracle
Product</title>
</head>
<body>
<P >
New <sup>Super</sup><strong>Strength</strong> H<sub>2</sub>O
<em>plus</em> will knock out any stain,
<small>small</small>.<br /> Look for
<big>big</big>
<SUp>Super</sup><b>Strength</b> H<SUb>2</sub>0
in a stream near
<i>plus</i>
you.
<IP >
<p>
<tt>NUTRITION INFORMATION</tt>
(void
where
</p>
<pre>
Calories
Grams
USROA
/ Serving
of Fat
Moisture
Regular
100%
Unleaded
100%
Organic
99%
Sugar Free
110%
</pre>
</body>
</html>
or
new
prohibited)
6. ra
Bettonnzs 91
A <tt> cmke hatsra a szveg rendszerint Cm1rier New bettpussal jelenik meg.
Ez egy olyan bettpus, amelyben minden karakter egyenl szlessg. Mindazonltal
webbngszk a felhasznl szmra lehetv teszik, hogy a <t t> cmke ltal
hasznlt, egyenl szlessg karakterekbl ll bettpusr egy msik, ltaluk vlasztott

bettpusra cserljk (nzznk szt a bngsznk belltsai kztt). gy elkpzelhet,
hogy az egyenl szlessg karaktereket tartalmaz bettpus nem is tartalmaz egyenl
szlessg karaktereket, br a felhasznlk tlnyom rsze nem vltoztatja meg
a bngsz alaprtelmezett betbelltsait.
c:@
i 8 Thr Mi Product- Movlla Firefox

file; .Edit Y.ew Hiltofy &ookn'wrb !ools ..!:!dp
g-:
http://www.yourdomin.com/fOffNtt.html
-+
New SupStreagtl. H20 plus "oill knock Ot:4 any stain. big or s.maD..
Look. for new Supr:rStrea&th H20 plus in a stream near you.
NDTiUTION INf'ORMAIION (void \\We prolnbited)
ca.l.oru:s
Gram5
USRDA
/Se:rvinQ'
ot Fat
Mo:.st:.ure
100\
100\
Re:qul.ar
Un1eadl!d
Or;ani.c
ll Ot
SuQar fre:4!!:
-t'
Do
6.1. bra
A 6.1. plda
karakterformzsainak eredmnye
A <pre> cmke hatsra a bngsz szintn egyenl szlessg karakterekkel rja

a szveget, de a cmknek van egy msik, igen-igen hasznos hatsa is. Ahogy a
3. rn
megtanultuk, a bngsz rendszerint figyelmen kvl hagyja a HTML-fjlokban lv

sortrseket s tbbszrs szkzket. A <pre> cmke hatsra mind a szkzk,
mind a sortrsek megmaradnak. A <pre> cmke nlkl a
6.1. bra vgn lv szveg
pldul nagyjbl gy nzne ki:

calories grams usrda /serving of fat moisture regular 3
3
100%
organic
99%
sugar free O
100%
unleaded
110%
Hiba helyeznk el minden sor vgn egy <br />cmkt, az oszlopok akkor sem
kerlnek egyms al. Ha azonban a szvegrsz elejre <pre>, a vgre pedig </pre>
cmkt runk, akkor az oszlopok megmaradnak oszlopnak, ugyanis nem maradnak el
a szkzk. St, gy a <br l> cmkkre sincs szksg. A <pre> cmke egyszer s
gyors mdjt knlja annak, hogy az egyenl szlessg karakterekbl ll szvegfjl
jainkat az igaztst megrizve, minimlis erfesztssel alaktsuk webes tartalomm.
A CSS a szveg elrendezsre - s minden ms szvegmveletre - hatkonyabb
mdszereket knl, amelyekrl a knyv III. rszben tanulunk majd rszletesen.

Halad betbelltsok
A weboldalainkon lv szvegek mrett s kinzett kezdetlegesen a <big>,
a <small> s a <tt> cmke hasznlatval mdosthatjuk. Akadhatnak azonban olyan
helyzetek, amikor j lenne csak egy kicsit pontosabban megadni a szveg mrett s
kinzett. Mieltt azonban az XHTML-kd lehetsgeivel belefognnk a betkkel val
btyklsbe, rviden tekintsk t, hogy miknt mentek a dolgok a CSS megjelense
eltt- elkpzelhet ugyanis, hogy ms weboldalak forrskdjt bngszve tallunk
mg ilyen megoldsokat. Ne feledjk, hogy br a rgimdi eljrsok mg hasznlatban
vannak, neknk mr az j mdszereket illik kvetnnk
A stluslapok sznrelpst megelzen a mostanra elavultnak szmt <font> elemet
hasznltk a weboldalokon lv szvegek tulajdonsgainak megadsra. Az albbi
HTML-kd pldul a weboldalon lv szveg mrett s sznt vltoztatja meg:
<font size="5" color="purple">Ez a
szveg
nagy mret s
-. lila lesz.</font>
A szvegszn belltsrl bvebben a 9. rn tanulunk, amikor is megismerjk

az egyni sznek ellltsnak mdjt, valamint azt is, hogy miknt adhat meg
a szveges hivatkozsok szne.
Ahogy ltjuk, a <font> elem size (mret) s color (szn) jellemzi teszik lehetv azt,
hogy a szveg betit klnsebb erfeszts nlkl megvltoztassuk Br a mdszer
remekl mlkdtt, a CSS stlusszablyainak ksznheterr mra egy lnyegesen jobb
mdszer vltotta fel. Az albbiakban a betk belltst vgz fbb stlusszablyok
kzl mutatunk be nhnyat:
font-family: A hasznlt bettpusr lltja be.
font-size: A betlk nagysgt adja meg.
color: A betk sznt mdostja.
A font-family stlusszably a szveg megjelentst vgz bettpus belltst teszi

lehetv. Ennl a formzsnl tbb, vesszvel elvlasztott rtk is megadhat, s rde
mes is tbbet megadnunk. gy ha a felhasznl rendszern nincs teleptve az elsknt
megadott bettpus, akkor a bngsz megprblkozhat egy msik hasznlatvaL
A mdszerrel az elz rk sorn mr tallkoztunk. A tovbbi bettpusok megadsa
azrt fontos, mert elvileg nnden felhasznl gpn ms-ms bettpusok vannak
teleptve, legalbbis a szoksos alaptpusokon- Arial, Times New Roman stb. - fell.
Ha ms hasznlhat bettpusokat is megadunk, akkor nagyobb az esly arra, hogy
a szveg vgs soron valamilyen ltalunk is kiprblt bettpussal jelenik meg azok
ban az esetekben, amikor a kedvencnk nincs teleptve. Az albbi plda egy olyan
font-family belltst ismertet, amely a szveg egy bekezdsben hasznlni kvnt
bettpusr adja meg:
6. ra
<P style="font-family:arial,
sans-serif.
' times
Bettonnzs
193
roman"'>
A plda szmos rdekessget rejt magban. Elszr is, elsdleges bettpusknt

az arial-t adtuk meg. A bettpus-belltsban a nagybelliknek nincs szerepe, azaz
az arial, az Arial s az
ARIAL
rtk azonos hats. A msik rdekessg, hogy
a timesroman nvnl aposztrfokat hasznltunk, mgpedig azrt, mert a nvben

szkz tallhat. Mindazonltal, mivel a 'times roman' tpus az ltalnosabb
sans-serif (talp nlkli) rtket kveti, nem valszn, hogy a hasznlatra sor kerl.
A msodik helyen ll sans-serif rtk ugyanis a bngsz szmra ezt jelenti: "Ha
a gpen nincs Arial bettpus, akkor hasznld az alaprtelmezett talp nlkli bettpusr."
A tizenhatos szmrendszerben megadott (hexadecimlis) sznkdokrl a 9. rn
fogunk tanulni. Most csak annyit kell megrtennk, hogy a green (zld), a blue
(kk), az orange (narancssrga) s hasonl szneknl a color stlusszabllyal
pontosabban is bellthat a betszn.
A font-size s a color stlusszablyt is elterjedten hasznljk, mgpedig a betk

mretnek s sznnek belltsra. A font-size bellts kaphat elre meghatrozott
rtket- ilyen a small (kicsi), a medium (kzepes) s a l arge (nagy)-, de pontosan is
megadhat, pontban kifejezve, azaz pldul 12pt vagy
14pt
formban. A color form
zs rtke lehet valamilyen elre megadott rtk- pldul white (fehr), black (feke
te), blue (kk), red (piros), avagy green (zld)-, de megadhat pontosan, a szn ti
zenhatos szmrendszer kdjval is, pldul gy:
#FFB499.
Az albbiakban az elz be
kezds-belltst vesszk el jra, de ezttal a betk mrett s sznt is megadjuk:

<P
style="font-family:arial,
sans-serif.
'times
roman';
font-size:14pt;
color:green">
A 6.2. plda s a kdnak a 6.2. brn lthat eredmnye olyan bettpus-belltsokat is

mertet, amelyekkel mr nekilthatunk egy egyszer internetes nletrajz elksztsnek
6.2. plda
Egvszer inll..>rnetes nletrajz bettpus-belltsai
<?xml version="l.O"
<!DOCTYPE
html
encoding="UTF-8"?>
PUBLIC
"-//W3C//DTD
XHTML
1.1//EN"
xml:lang="en">
<head>
<title>Résumé
<style
body
for
Jane
type="text/css">
font-family:
font-size:
Verdana,
12px;
sans-serif;
Doe</title>

{
hl
font-family:Georgia,
serif;
font-size:28px;
text-align:center;
p.contactinfo
font-size:l4px;
text-align:center;
p.categorylabel
font-size:l2px;
font-weight:bold;
text-transform:uppercase;
div.indented
margin-left: 25px;
</style>
</head>
<body>
<hl>Jane Doe</hl>
<P class="contactinfo">l234
Main
Street,
Sometown,
CA 93829<br/>
tel: 555-555-1212,
e-mail:
jane@doe.com</p>
<p class="categorylabel">Summary of Qualifications</p>

<Ul>
<li>Highly skilled and decticated professional offering a
solid
background
<li>Provide
that
will
in whatever it is you
need.</li>
comprehensive direction for
get me
whatever it is
job.</li>
<li>Computer proficient in
a wide range of industry-related
computer prograros and equipment. Any industry.</li>

</Ul>
<P class="categorylabel">Professional
<div
Experience</p>
class="indented">
<P><span
style="font-weight:bold;">Operations Manager,
Super Awesome Company,
Some
City,
CA
[Sept 2002
present]</span></p>
<Ul>
<li>Direct all departmental operations</li>
<li>Coordinate work
with internal
and external
resources<Ili>
<li>Generally in
charge
of everything</li>
</Ul>
<p><span style="font-weight:bold;">Project Manager,
Less Awesome
Company,
2002]</span></p>
<Ul>
Some
City,
CA
[May 2000
Sept
6. ra
<li>Direct
all
departmental
<li>Coordinate work
with
Betformzs
operations</li>
internal
and external
resources</li>
<li>Generally
in
charge
of
everything</li>
</ul>
</div>
<P
class="categorylabel">Education</p>
<Ul>
<li>MBA,
MyState
<li>B.A,
Business
May
University,
May
Administration,
2002</li>
MyState
2000</li>
</Ul>
<P
class="categorylabel">References</P>
<Ul>
<li>Available
upon
request.</li>
</Ul>
</body>
</html>
r. Rtsum b Jane Coe- Mozill. Firfox
,.,
. c
lill
!l
....
http-J/-.yourdomin.uwn/resuJ'I"'e.html
JaneDoe
1234 Main Street, Sometown, CA 93829
tel : 555-555-1212, e-mait: jane@doe.com
SUMMARY OF QUAUFICATIONS
Highty skilled and dedK:ated professKJnal offering a solid hackoround 1n whatever it 1s you need.
Provide comprehensive direttion for whatever It IS that wil get me a JOb.
Computer proflcient 1n a wide ranQe of industry-related computer programs and eQUFpment. Arly
mdustry.
PROFESSIONAl EXPERIENCE
Operations Manager, Super Awesome Company, Some City, CA [Sept 2002- present]
Direct an departmental operations

Coordinate work wJth ntemal and external resources
GeneraDy 1n chaq1e of everything
Project Manager, Less Awesome Company, Some City, CA [May 2000- Sept 2002)
Dirett ali departmental operations

Coordinate work wrt:h intemal and extemal resources
Generally 1n dlarge of everything
EOUCATION
MBA. MyState Uncversrty, May 2002

B.A, Business Adnuntstrabon, MyState University, May 2000
REFERENCES
Avaiable upon request.
--
Done
6.2. bra
A 6.2.
plda eredmnyeknt megjelen weboldal
University,
fgs

A pldban CSS-t hasznlunk- ami, amint azt a 4. rn megtanultuk, a formzsokat
osztlyokba rendezi-, s ltjuk, hogy a tartalom klnbz rszein Iniknt rvnyesl
a szvegformzs. Ha alaposabban megfigyeljk a div. indented osztlyt, akkor felfi
gyelhetnk a margin-left belltsra. Ez a bellts- amelyrl a knyv II. rszben
fogunk tanulni- adott mret trkzt (pldnkban 25 kppontnyit) helyez el az elem
bal oldala mellett. Ez a trkz alaktja ki a 6.2. brn lthat behzsokat

Ma mr a legtbb bettpus tartalmazza az eurpai nyelvek szmra szksges
kezetes betket- pldul a
Caf szban
tallhat
bett
Csakbl kimarad azonban
a magyar s ). Van ezen fell mg nhny matematikai jel, s pr, a szveg kzpon
tozsa sorn hasznlhat jel, pldul a hromszg alak felsorolsjeL
A 6.1. tblzatban ismertetett kdok hasznlatval a HTML-dokumentum brmely rszn

elhelyezhetjk az ilyen klnleges karaktereket. A http: l lwww. webstandards. org l
learnlreferencelnamed_entities.
htmlweboldalon ennl a tblzatnl kimertbb,
tbb karakterkszletre vonatkoz listkat tallunk.
A caf sz lershoz pldul az albbi mdszerek kzl mindkett hasznlhat:

café
café
6.1. tblzat
Gyakran haszillt Mlnleges karakterek az angol nyelllfeniletro7
--------
Karakter
Szmkd
Nvkd
Lers
"
"
idzjel
&
&
&
& (s) jel
<
<
<
kisebb, mint
>
>
>
nagyobb, mint
¢
¢
a cent (fizetegysg) jele
£
a font (fizetegysg) jele
¦
kt rszbl ll fggleges vonal (cs)
£
¦
vagy
&brkbar;
§
§
paragrafus
©
©
copyright, a szerzi jog tulajdonosa
®
®
bejegyzett zleti vdjegy
°
°
a fok (mrtkegysg) jele
±
±
plusz-mnusz
²
²
fels index kettes szmjegy
³
³
fels index hrmas szmjegy
+-
6. ra
6.1. tblzat
Betformzs
Gyakran hasznlt klnleges karakterek az angol n_velttenUetrol
Karakter
Szmkd
Nvkd
lers
·
·
sor kzepn lv pont
¹
¹
fels index egyes szmjegy
¼
¼
egynegyed (trtszm)
½
½
egyketted, fl (trtszm)
¾
¾
hromnegyed (trtszm)
Æ
Æ
nagybets A-E kts (ligatra)
æ
æ
kisbets a-e kts (ligatra)
É
É
kezetes nagy E
é
é
kezetes kis
×
×
szorzsjel
÷
÷
osztsjel
f97
(jolytatilS)
Br a fenti karakterek szmmal is megadhatk, mindegyiknek megvan a knnyebben

fejben tarthat, a nevbl szrmaz kdja is.
(Q
A copyright jeit (), vagy esetleg a bejegyzett zleti vdjegyt () keressk?

A megfelel kdok:
az
™
© s ® A bejegyzetlen vdjegy (TM) pedig

kddal csalogathat el.
.
A HTML, illetve az XHTML nyelv egy klnleges kdot, egy gynevezen karakterkdot
vagy karakteregyedet (character entity) hasznl az olyan klnleges karakterek

megjelenitsre, mint a s az. A karakterkdokat az & jellel kell kezdennk, s
pontosvesszvel kell zrnunk. A 6.1. tblzatban megtalljuk a leggyakrabban hasznlt
karakterkdokat, br a HTML ennl lnyegesen tbbet ismer.
A tblzatban szerepe l a "kisebb, mint" , a "nagyobb, mint", az idzjel s az & karakter
kdja is. Ha ezeket a karaktereket szeretnnk egy weboldalon hasznlni, akkor

a kdjaikkal kell ket helyenestennk, klnben a bngsz HTML-parancsknt fogja
rtelmezi ket.
A
6.3. pldban s a 6.3. brn szmos, a 6.1. tblzatban szerepl jelet mutatunk be
hasznlat kzben.
6.3. plda
A kl11/eges karakterek kdolsa
<?xrnl version="1.0"
<!DOCTYPE
html
encoding="UTF-8"?>
PUBLIC
"-//W3C//DTD XHTML
1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<head>
<title>Punctuation
Lines</title>
</head>
<body>
<P>
Q:
What
should you
do when
British
banker
picks
fight
law
with you?<br />
A:
£ some ¢¢ into
him.
<hr />
Q: What
do
you
call it
off the books?<br
A:
when
judge
takes
part
of
/>
§ violence.
<hr />
Q: What
did
the
football coach
vending machine in
A:
the middle
get
from
the
loeker
room
of the game?<br />
A &fracl4; back at &fracl2; time.
<hr
Q:
/>
How
hot
did it
get
the mathematician?<br
A:
when
the
police
detective
interrogated
/>
x³°
<hr />
Q: What
A:
does
a punctilious plagiarist
do?<br
/>
©
<hr
/>
</p>
</body>
</html>
l4l Punctvation nes Mozdla Firefox

[ft fdit lftV HQtory ioobntrics Ioois tldp
--
'
. h-.
.,
, ,
.."
/
<om
oi .
, o -m
u_
d
o
.y_
tm 1 -
/ www
/ttp o
,--h-
Q: Wbal should you do,,,".. a British bank""pkks afigbt with yau?

A:.fsomenintobim..
Q: What do you call it whena judge takes part of a law offthe books?
A: .;oem:e.
Q: What did the footbaD coach get from the k>c.ker room vending maclUne in the middle of the game?
A:. A Ih back at time.
Q: How hot did it get wben the poice dd.ectn'e interragaled the matbemarician?
A: x"
Q: Wbal does a ptJDctilious plagiarist do?
A: O
Done
6.3.
bra
A 6.3. plda eredmnyeknt megjelen weboldal gy nz majd ki a legtbb bngszben
6. ra
Bettonnzs ss
sszefoglals
Ezen az rn megtanultuk, hogyan rhatunk flkvr vagy dlt bets szveget, hogyan
helyezhetjk a szveget fels vagy als indexbe, s miknt szrhatunk be klnleges
karaktereket s kezetes betket. Lttuk, hogy az elzetesen formzott, egyenl szles
sg karakterekbl ll szvegek hasbjait hogyan rendezhetjk egyms al, s azt is,
hogy miknt llthat be egy weboldal brmely szvegrszletnek mrete, szne s
bettpusa.
A 6.2. tblzat az rn trgyalt elemeket s jellemzket foglalja ssze. Ne feledjk,

hogy minden HTML-elem szerepel a "B" fggelkben is.
6.2.
tblzat
A 6. rn trgyalt HIML-elemek s
-jellemzk
Elem/Jellemz
Lers
<em>... </em>
Nyomatkosts (rendszerint dlt betu).
<strong>... </strong>
Ersebb nyomatkosts (rendszerint flkvr

betu).
<b>... </b>
Flkvr szveg.
<i> ... </i>
Dlt bets szveg.
<tt>... </tt>
Egyenl szlessg karakterek (rgpbetk).
<pre> ... </pre>
Elformzott szveg (megrzi a sortrseket

s a szkzk szmt; rendszerint egyenl
szlessg karakterekkel jelenik meg).
<big>... </big>
A szoksosnl nmileg nagyobb szveg.
<small> ... </small>
A szoksosnl nmileg kisebb szveg.
<sub>...</sub>
Als index.
<sup> ... <l sup>
Fels index.
Jellemzk
style="font-family:bettpus"
A betK:szlet (bettpus) neve, pldul Arial

(hasznlhat a <P>, a <hl>, a <h2>, a <h3> stb.
elemekben is).
style="font-size:mret"
A bet mrete. Megadhat a small, a medium

s a large, valamint az
x- small
(nagyon
kicsi), s az x-large (nagyon nagy) stb. rtk.

Bellthat a pontban mrt mret megadsval
is (pldul12pt).
style="color:szn"
A szveg sznt vltoztatja meg.
100
Krdezz-felelek
K:
Hogyan tudhatom meg egy a gpemre teleptett bettpus pontos nevt?
V:
Windows, illetve Macintosh opercis rendszeren nyissuk meg a Vezrlpultot

(Control Panel), s kattintsunk a bettpusok mappjra (Fonts). A Windows
Vista-felhasznlknak lehet, hogy a Vezrlpult belltst "Ciassic V iew"-ra
(Klasszikus nzet) kell vltoztatniuk. Amikor a font- family stlusszablyban
adjuk meg a bettpus nevt, figyeljnk a nv pontos bersra -br megje
gyeznnk, hogy a nagy kezdbetkre nem kell figyelnnk, erre nem rzkeny
a bellts.
K:
Miknt rhatunk egy weboldalra az eurpaitl eltr, pldul japn, arah vagy
V:
Elszr is, azoknak a felbasznlknak, akik el szeretnk olvasni az ilyen betkkel
knai betkkel?
rt szvegeket, teleptenik kell a megfelel nyelvi bettpusokat, majd a bng
szjkben be kell lltaniuk ezeknek a betknek a hasznlatt A jelekhez tartoz

szmkdokat az egyes nyelvi betkszletekben a Windows Character Map
(Karaktertbla) nev programjval - ms opercis rendszeren pedig valamilyen
hasonl cl programmal -nzhetjk meg. A Character Map a Start, Ali
Programs, Accessories, System Tools (Start, Minden program, Kellkek, Rendszer
eszkzk) menbl rhet el. Ha pldul a 214-es szm karakterre van szks
gnk, akkor a weboldal fjljban az &214; bejegyzst kell megadnunk. Ha nem
talljuk a Character Map alkalmazst, nyissuk meg az opercis rendszer bep
tett sgjt, s ott keressk meg a program pontos helyt.
Ha csak rvid zeneteket szeretnnk elhelyezni valamilyen zsiai nyelven (mondjuk
azt, hogy "Beszlnk tamil nyelven, hvjon btran!), akkor a legokosabb, ha azt grafika
knt, egy kpen helyezzk el. gy minden felhasznl elolvashatja a mondanivalnkat,
mg akkor is, ha a bngszje elsdleges nyelve az angol. Persze a klnleges betket
tartalmaz grafika elksztshez is valsznleg le kell tltennk az opercis rendszer
megfelel nyelvi csomagjt. Ismt csak azt mondhatjuk, hogy a pontos teendket
a rendszernk sgjban talljuk meg.
6. ra
Betformzs
J101
Ismtls
Ismtl krdsek
1.
Hogyan hozhat ltre olyan bekezds, amelyben az els hrom sz flkvr, ha

a <b>, illetve <strong> elem helyett inkbb stlusszablyt hasznlunk?
2.
Hogyan brzolhat a vz kmiai kplete?
3.
Hogyan jelenthet meg egy weboldalon a" 2009, Webwonks Inc." felirat?
Vlaszok
1.

<P><span
are
style="font-weight:
bold">First three words</span>
bold.</p>
2.
Hasznljuk a H<sub>2</sub>O formt.
3.
Az albbi jellsek valamelyikvel:

©
2009,
Webwonks
Inc.
©
2009,
Webwonks
Inc.
Gyakorlatok
Alkalmazzuk a fejezetben megismert karakterszint formzsi belltsokat

blokkszint elemekre (pldul: <p>, <div>, <ul> s <li>) is. Prblkozzunk
az elemek egymsba gyazsval - gy fogunk rrezni arra, hogy a stlusok
hatsa miknt rvnyesl a tartalmi hierarchia egyes szintjein.
7. RA
Informcik megjelentse
tblzatok segtsgvel
A lecke tartalma:
Tblzat mretnek belltsa
A tartalom igaztsa s tvelse a tblzaton bell
Ezen az rn megtanuljuk, hogyan hozhatunk ltre egy weboldalon a sorba rendezhet

adatok trkzeit, elrendezst s kinzett szablyoz HTML-tblzat. Br a CSS haszn
latval is elrhet hasonl eredmny, vannak esetek, amikor az informci megjelent
snek hatrozottan egy tblzat a legmegfelelbb mdja. Megtapasztaljuk, hogy a tbl
zatok mennyire hasznosak tudnak lenni, ha sarokba, illetve oszlopokba rendezhet
adatokat kell megjelenteni. Elmagyarzzuk, hogy a weboldalak tervezi a mltban
miknt hasznltak tblzatokat az oldalak elrendezsnek trolsra, s azt is, hogy ez
sok esetben mirt nem okos dnts. Mieltt azonban belekezdennk az rba, annyit
rgztsnk magunkban, hogy a tblzat nem egyb, mint fggleges oszlopokba s
vzszintes sorokba rendezett adatok egyttese.
104] Tanuljuk meg a HTML s a CSS hasznlatt 24 ra alatt

nll feladat
A tartalom tblzatos megjelenftse
A fejezet olvassa sorn gondolkodjunk el arrl, hogy a szveges tartalom tblzan
alaltsa miknt vlhat egy weboldal elnyre. me nhny megszvlelend tancs:
A tblzatok a legnyilvnvalbban kimutatsok- pldul nevek s szmok tbb
Minclen olyan alkalommal hasznlhatunk tblzatokat, amikor tbb szvegosz
oszlopra kiterjed listja- rendezett megjelentsre alkalmasak.

lopra vagy egyms mell kerl kpekre van szksg.
Az ra pldi alapjn ksztsnk sajt tblzatot egy weboldalunkra. A fejezet vgn
tallhat gyakorlatok rszletes tancsokkal szalglnak ehhez.
------

Van nhny stlustulajdonsg, amellyel igen pontosan llthat be a tblzatok
szeglye. Bellthat pldul a szegly vastagsga (a border-width tulajdonsg
gal), formja (a border-style tulajdonsggall s a szne (a border-color
tulajdonsggal). Ezek a tulajdonsgok remekl mkdnek, de a tblzat minden
egyes elemnl meg kell adnunk ket, s ez mg akkor sem pihentet, ha a sarok,
illetve cellk formzst ess-osztlyokkal vgezzk.
A tblzatokban az informcit sorokba rendezzk, s minden sorban tbb nll
cella is lehet. A tblzatok kialaktst a <table> (tblzat) cmkvel kezeljk, s
a vgkre termszetesen a < 1 tab le> cmke kerl. Ha szeglyt is szeretnnk rajzoitatni
a tblzatunknak, akkor a szegly szlessgt a border (szegly) cmke hasznlatval
adhatjuk meg, kppontban kifejezve. A O, illetve none rtk azt jelzi, hogy a tblzat
szeglye lthatatlan marad - akkor is ez a helyzet, ha a border jellemzt elhagyjuk -,
ami pldul akkor jhet jl, ha az adott tblzattal az oldal elrendezsnek kialaltst
vgezzk.
Ha a <table> cmke a helyre kerlt, a kvetkez szksges cmke a <tr> lesz.
A <tr> elem a tblzat egy sort (table row) alaltja ki. Egy sorba legalbb egy cella
kerl, s az utols cellt kveti a so1t lezr </tr> cmke. Az egyes cellk ltrehozsra
a <td> elemet (table data) hasznljuk. Maga az informci a <td> s a <ltd> cmke
kz kerl. A cella az a tglalap alak terlet, amely brmilyen szveget, kpet s
HTML-elemet tartalmazhat. Ha egy sorban tbb cella is tallhat, akkor kialakulnak
a tblzat oszlopai is.
7. ra
lnfonncik megjelentsa tblzatok segtsgvel
A tblzatok kialaktsa sorn mg egy alapvet elemet hasznlunk. A

pontosan gy mkdik, mint a
<td>,
<th>
l l 05
elem
annyi klnbsggel, hogy a tblzat cmsort s -
oszlopt jelezzk vele (table heading- tblzatcm). A legtbb webbngsz a
<th>
elemmel kialaktott cellk tartalmt flkvr, kzpre igaztott betkkel jelenti meg.
Annyi cellt hozunk ltre, amennyit kedvnk tartja, de a tblzat minden sorban pon
tosan annyi cellnak kell lennie, mint a tbbiben. A 7.1. plda HTML-kdja mindssze
az eddig emltett ngy tblzatcmke hasznlatval alakt ki egy egyszer tblzatot.
A 7.1. brn a kd alapjn rajzolt tblzat lthat, gy, ahogy az egy webbngszben
megjelenik.
7.1. plda
<?xrnl
Tblzat kialaktsa a <table>, a <tr>, a <td> s a <th> elemmel
version="l.O"
<!DOCTYPE
html
encoding="UTF-8"?>
PUBLIC
"-//W3C//DTD
XHTML
1.1//EN"
"http: l /www.w3. org /TR/xhtmlll/DTD/xhtmlll. dtd" >

<head>
<title>Baseball Standings</title>
</head>
<body>
<hl>Baseball Standings</hl>
<table>
<tr>
<th>Team</th>
<th>W</th>
<th>L</th>
<th>GB</th>
</tr>
<tr>
<td>Los
Angeles
Dodgers</td>
<td>62</td>
<td>38</td>
<td>-</td>
</tr>
<tr>
<td>San
Francisco Giants</td>
<td>54</td>
<td>46</td>
<td>8.0</td>
</tr>
<tr>
<td>Colorado
<td>54</td>
<td>46</td>
<td>8.0</td>
Rockies</td>
xml:lang="en">
</tr>
<tr>
<td>Arizona
Diamondbacks</td>
<td>43</td>
<td>58</td>
<td>l9.5</td>
</tr>
<tr>
<td>San Diego
Padres</td>
<td>39</td>
<td>62</td>
<td>23.5</td>
</tr>
</table>
</body>
</html>
Ha tbb szkzt tesznk a szavak s a cmkk kz, a HTML figyelmen kvl hagyja
azokat. Mindazonltal knnyebben olvashat - s gy kevesebb idpocskol hibt
tartalmaz- tblzat kszthet, ha a 7.1. pldban is lthat mdon behzzuk
a
<tr>
s a
<td>
cmkket.
U St.ndings- Mozilla Mn!follt
'="
., l!i]
l:l
/-.yourdomam.comlmpi .Sa le.htm_

l
.._ .
_
Baseball Standings
Team
W L GB
Los Angeles Dodgo:s

San Fraocisco Giants
54468.0
Color-ado Roclcies
54 468.0
62 38
1
l
Arizona Diamoodbadcs 43 58 19.5
San Diego Pa<kes
39 62 23.5
Ilon<
..:-
7.1. bra
A 7.1.
plda alapjn kialakul tblzat hat sorbl s ngy oszlopbl ll
A pldatblzatunk egy baseball-bajnoksg llst tartalmazza. Az informci ppen

tblzatba - sorokba s oszlopokba - kvnkozik, br az eredmny kicsit fapados.
Az ra folyamn azonban megtudjuk, hogyan dobhatjuk fel egy kicsit a tblzatainkat
A tblzat cmsorban a csapat nevt (Teams), a nyert (W- wins) s vesztett (L
losses) tallkozkat, illetve a vezet csapattl val lemaradst mutat jelzszmot
(GB, Games Behind) tntettk fel.
7. ra
Informcik megjelenftse tblzatok segftsgvel
f t 07
Br a 7.1. pldban semmilyen formzst nem alkalmaztunk, az egyes cellk szvegt

nyugodtan formzhatjuk. Megjegyeznnk azonban, hogy az egyes cellkban hasznlt
formzsok s HTML-cmkk a tbbi cellban nem rvnyeslnek. A tblzaton kvl
rvnyes cmkk nem fejtik ki a hatsukat a tblzat belsejben. Nzzk pldul
a kvetkez tblzatot:
<p style="font-weight:bold">
<table>
<tr>
<td style="font-style:italic">hello</td>
<td>there</td>
</tr>
</table>
</p>
A fenti pldban a tblzat krl rvnyes <p> cmke segtsgvel mutattuk be, hogy
a tblzatok belsejben nem jut rvnyre a tblzaton kvl megadott cmkk hatsa.
A "there" sz sem flkvr, sem dlt nem lesz, ugyanis r sem a tblzaton kvl
megadott font-weight:bold, sem az elz cellba rt font-style:itali c formzs
nem hat. A pldban lv hello" sz termszetesen dlt betvel rdik ki.
"
Ha a "hello" s a there" szt flkvrrel szeretnnk rni, az albbiak szerint kell
"
megvltoztatnunk a kdot:
<table style="font-weight:b old">
<tr>
<td
style="font-style:italic">hello</td>
<td>there</td>
</tr>
</table
A fenti plda mindkt szava flkvr, a "hello" sz radsul dlt is. A formzsokat
termszetesen nem ktelez a <table> elemben, az egsz tblzatra rvnyesen meg
adni. A font -weight: bold formzst az egyes cellkra kln-kln is alkalmazhatjuk.
Az, hogy rninden kvnt cellnl megadjuk a style=" font-weight :bold" bejegyzst,
vagy a stluslapon hozunk ltre egy osztlyt, s a cellkban csak
a class=" osztlynv" bejegyzst adjuk meg, mr csak rajtunk mlik.
T b lzat mretnek belltsa

Ha a tblzat szlessgt nem adjuk meg, a tblzat, illetve az egyes cellk olyan
szlesek lesznek, hogy a megadott tartalom elfrjen bennk. Dnthetnk azonban
a tblzat pontos mretnek belltsa mellett is: ilyenkor a <table> elemben meg kell
adnunk a width (szlessg), illetve a height (magassg) jellemzt. Az egyes cellk
szlessge s magassga is bellthat, ilyenkor a width, illetve a height jellemzt
108
az adott <td> elemben kell elhelyeznnk A width s a height jellemz rtke

kppontban vagy szzalkban adhat meg. Az albbi kd pldul egy tszz kppont
szles s ngyszz kppont magas tblzatot hoz ltre:
<table
style="width:500px;
height:400px">
Az a helyzet, hogy a HTML nyelvben is tallunk width s height jellemzt.

Ezek mostanra, az XHTML megjelensvel elavultak, de ms weboldaltervezk
kdjban mg tallkozhatunk velk. A bngszk ezeket a jellemzket is feldolgozzk,
de helyettk rdemes inkbb a
width
s a height stlustulajdonsgot hasznlnunk,
ugyanis gy tesznk eleget az XHTML kvnalmainak.

Ha azt szeretnnk, hogy a tblzatunk teljes szlessgbl az els cella hsz,
a msodik pedig nyolcvan szzalkban rszesljn, az albbi kdot kell rnunk:
<table
sty le="width:lOO%">
<tr>
<td style="width:20%">skinny
cell</td>
<td style="width:80%">fat cell</td>

</tr>
</table>
Figyeljk meg, hogy a tblzat szlessgt lOOo/o-ban adtuk meg - gy biztosthat, hogy
a tblzat kitltse a bngszablak teljes szlessgt. Ha a pontos, kppontban vett
mret helyett szzalkban adjuk meg az rtkeket, a tblzat automatikusan akkora
lesz, hogy kitltse a bngszablakot, ugyanakkor megmarad az eszttikai egyensly is,
esetnkben gy, hogy az els cella a tblzat teljes szlessgnek hsz, a msodik
pedig a nyolcvan szzalkra terjed ki.
A 7.2. pldban a 7.1. pldbl szrmaz egyszer tblzatot alaktottuk t, pontosan
belltva a cellk szlessgt.
BasebaD St.ndiogs - Mcwll.l Firefax
jg-:
l=
181
ll
..
http://www.yourdoman.conVtablecdlwicfths.html
.....:J
Baseball Standings
Team
Los Angdes Dodgen

- San Francisco Giants
Colorado RodOO
.Arizooa iJ;amoodbadc.s
ll San Diego Padres
GB
62
38
--
54
46
8.0
S4
46
8.0
43
58
19.5
7.2.
39
62
23.5
A 7.2. plda HTML-kdja
bra
hatsoros s toszlopos tblzatot

Done
hoz ltre, pontosan megadva

az egyes oszlopok szlessgt
7. ra
7.2. plda
lnfonncik megjelenftse tblzatok segftsgvel
Tblzatcellk szlessg1zek megadsa

<!DOCTYPE
html
PUBLIC
"-//W3C//DTD
XHTML
1.1//EN"
<html
x:mlns="http://www.w3.org/1999/xhtml"
x:ml:lang="en">
<head>
<title>Baseball
Standings</title>
</head>
<body>
<hl>Baseball
Standings</hl>
<table>
<tr>
<th
style="width:35px;"></th>
<th
style="width:175px;">Team</th>
<th
style="width:25px;">W</th>
<th
style="width:25px;">L</th>
<th
style="width:25px;">GB</th>
</tr>
<tr>
<td><img
src="losangeles.gif"
Dodgers"
alt="Los
Angeles
/></td>
<td>Los Angeles Dodgers</td>

<td>62</td>
<td>38</td>
<td>-</td>
</tr>
<tr>
<td><img
src="sanfrancisco.gif" alt="San
Giants"
<td>San
Francisco
/><ltd>
Francisco
Giants</td>
<td>54</td>
<td>46</td>
<td>B.O</td>
</tr>
<tr>
<td><img
src="colorado.gif"
alt="Colorado
Rockies" /></td>
<td>Colorado
Rockies</td>
<td>54</td>
<td>46</td>
<td>8.0</td>
</tr>
<tr>
<td><img src="arizona.gif" alt="Arizona
Diamondbacks" /></td>
<td>Arizona Diamondbacks</td>
<td>43</td>
<td>58</td>
<td>19.5</td>
l l 09
</tr>
<tr>
<td><img src="sandiego.gif"
<td>San
Diego
alt="San
Diego
Padres"
/><ltd>
Padres</td>
<td>39</td>
<td>62</td>
<td>23.5</td>
</tr>
</table>
</body>
</html>
A 7.1. s a 7.2. plda kztt kt klnbsget tallunk. Az els, hogy a 7.2. pldban
elhelyeztnk egy jabb oszlopot, amelynek-br az els sorban tovbbra is
a <th></th> cmkeprt hasznljuk-nincs cmsora. Az j oszlop a msodik sortl
kezdve a hatodikig egy-egy kpet tartalmaz, mgpedig az <img /> elemekben.
A msodik klnbsg az, hogy a 7.2. pldban az els sor minden <th> elemnek
szlessgt egy-egy pontosan megadott rtk stlustulajdonsg segtsgvel lltottuk
be. Az els oszlop szlessgnek rtke 35 px (pixel, azaz kppont), a msodik
175 px, a harmadik, negyedik s tdik oszlop pedig 25 px.

Figyeljk meg azt is, hogy a msodik sortl kezdve nem adjuk meg a cellk- a <td>
elemek-szlessgt. Az oszlopszlessget elg az els sorban megadnunk, a tbbi sor
celli ugyanis ugyanannak a tblzatnak a rszei, ezrt az els sorban megadott szles
sget veszik fel. Ms formzs megadsa esetn - mondjuk a betmret vagy betszn
belltsakor-azonban jra s jra meg kell adnunk a belltst minden hasonlan
formzni kvnt rsznL
Tartalom igaztsa s tvels e a tblzaton bell

Minden, amit egy tblzatcellba helyeznk, alaprtelmezs szerint balra, fgglegesen
pedig kzpre igazodik. A 7.1. s a 7.2. brn ezt az alaprtelmezett igazrst figyelhet
jk meg. Termszetesen magunk is elvgezhetjk az igaztst, mind vzszintesen, rnind
fgglegesen-mgpedig a text-align s a vertical-align stlustulajdonsgokkal.
Ezeket az igaztsrt felels tulajdonsgokat minden <tr>, <td> s <th> elemben
megadhatjuk A <tr> elemben megadott igazts az egsz sorra rvnyes. A tblzat
mrettl fggen jelents idt takarthatunk meg, ha a sorok, s nem a cellk szintjn
adjuk meg az igazrst vgz jellemzket.
A 7.3. pldban olvashat HTML-kdban kombinljuk a szvegigaztsi lehetsgeket:
az egyes sorokban megadjuk az alaprtelmezett igaztst, de egy-egy cella esetben
fellbrljuk azt. A 7.3. brn a 7.3. plda kdjnak eredmnyeknt kialakul
weboldalt lthatjuk.
7. 6ra lnfonnci6k megjelenftse tblzatok segftsgvel
me nhny elterjedtebb a
top
(fent),
bottom
middle
vertical-align
(kzpen),
bottom
(a szveg aljra), illetve
l 111
stlustulajdonsg lehetsges rtkei kzl:
(lent),
text-top
(a szveg tetejre),
text
(betvonalhoz igazts). A tulajdonsg felso
baseline
rolt rtkeivel igen rugalmasan vgezhetjk a cellk tartalmnak fggleges igaztst.
7 .3. plda
<?xrnl
Igazts, valamint trk6z6k, szeg(yek s httrsz11ek belltsa a tblzatokba t!
version="l.O"
<!DOCTYPE html
encoding="UTF-8"?>
PUBLIC
"-//W3C//DTD
XHTML
1.1//EN"
<html
xrnlns="http://www.w3.org/1999/xhtml" xrnl:lang="en">
<bead>
<title>Things
to
Fear</title>
</bead>
<body>
<hl>Things
<table
to
Fear</hl>
border="2"
cellpadding="4"
cellspacing="2"
width="lOO%">
<tr
style="background-color:red;color:white">
<th
colspan="2">Description</th>
<th>Size</th>
<th>Weight</th>
<th>Speed</th>
</tr>
<tr
style="vertical-align:top">
<td><img
src="handgun.gif"
<td style="font-size:
alt=".38
Special"/></td>
14px;font-weight:bold;
vertical-align:middle;text-align:center">.38
<td>Five-inch
<td>Twenty
<td>Six
Special</td>
barrel.</td>
ounces.</td>
rounds
in four
seconds.</td>
</tr>
<tr
<td><img
<td
src="rhino.gif"
style="font-size:
alt="Rhinoceros"
1></td>
14px;font-weight:bold;
vertical-align:middle;text-align:center">Rhinoceros</td>
<td>Twelve
<td>Up
to
feet,
two
horn
to
tail.</td>
tons.</td>
<td>Thirty-five
miles
per
hour in
bursts.</td>
</tr>
<tr
<td><img
<td
src="axeman.gif"
alt="Broad
Axe"
/></td>
style="font-size: 14px;font-weight:bold;
vertical-align:middle;text-align:center">Broad Axe</td>
<td>Thirty-inch
<td>Twelve
<td>Sixty
</tr>
</table>
</body>
</html>
blade.</td>
pounds.</td>
miles
per hour
on impact.</td>
=@l
httfl!!.!_ww..yourdomaln.com{thingstofear.htm_
l
..
Things to Fear
Descnption
.JS Spe<ial
Tweh:e fert, hom to
mies per bour in
td
Rhinoceros
n.ty-ioch blade.
Sixty miles per bau<
oa
impact.
Broa.d An
Don
7.3. bra
A 7.3. plda HTML-kdja az igaztsi stlusok s a colspan jellemz hasznlatt szem/lteti
A 7.3. bra tetejn egyetlen cella- a "Description" szt tartalmaz- kt oszlopot vel t.
Ez a cellhoz tartoz <th> elemben elhelyezett colspan (oszloptvels) jellemz hat
sa. Ahogy mr bizonyra rjttnk, a rowspan (sortvels) jellemz is ltezik- ezzel
a jellemzvel az adhat meg, ha egy cellnak tbb sornyi magassgot kell tfognia.
Amikor tbb oszlopon, illetve soron tvel cellink vannak, nha nehz megoldani,
hogy a sorok s oszlopok ne keveredjenek ssze. Gyakran a legkisebb hiba felbort
hatja az egsz tblzat szerkezett. Sok idt s fejfjst sprolhatunk meg, ha elbb
papron felvzoljuk a tblzatot, s csak utna kezdnk hozz a HTML nyelv megvalstshoz.
A2 tvels (spanrung) annyit tesz, hogy egy cellt tbb sor, illetve oszlop nagysgra
nyjtunk. A colspan jellemz hatsra a cella tbb oszlop szlessgt, mg a rowspan
jellemz hatsra tbb sor magassgt veszi fel.
Az tvelsen fell a "Description" rsz msodik oszlopnak celliban olyan tulajdon
sgokat is megadtunk, amelyeknek a hatsra a szveg flkvr betkkel rdik ki,
valamint fgglegesen s vzszintesen is a cella kzepre kerl.
7. ra
Informcik megjelentsa tblzatok segtsgveit 113
Van pr olyan fogs a 7.3. pldban, amit mg nem magyarztunk el. A teljes tblzat,
illetve a tblzat egyes celli szmra is megadhat sajt, a weboldal httertl kln
bz httr. Ha htteret szeretnnk megadni, akkor a <table>, a <tr>, a <td>, illetve
a <th> elemben a background-color (httrszn), illetve a background- image
(httrkp) stlustulajdonsgot kell megadnunk, pontosan gy, ahogy a <body> elem
esetben (lsd a 9. rt). Pldul, ha az egsz tblzat httrsznt srgra kvnjuk
lltani, akkor a <table style="background-color:yellow"> vagy a vele egyrtkl
<table style= "background-color: #FFFFOO ">elemet kell megadnunk.
A 7.3. pldban httrsznt csak a fels sor kapott: a sor celli a vrs htterket
a <tr style= "background-color: red; color:white"> elemnek ksznhetik.
A color (szn) stlustulajdonsg hatsra pedig a sorban lv szveg fehr lesz.
A background-color tulajdonsghoz hasonl a pldban nem szerepl
background-image tulajdonsg. Ez utbbit a tblzat httrkpnek megadsra
hasznljuk. Ha a leaves. gif kpet szeretnnk httrknt belltani, akkor a <table

style= "background-image :url ( leaves. gif)"> elemet kell hasznlnunk. Figyeljk
meg, hogy a kpfjl neve zrjelbe kerl, el pedig az url szt rjuk- ebbl tudja
a tulajdonsg, hogy most a kpfjl helye kvetkezik.
Br az XHTML engedlyezi a cellpadding s a cellspacing jellemz haszn

latt, padding, illetve border-spacing nven megtalljuk a kt tulajdonsg
CSS-beli megfeleljt is. A hasznlatukrl bvebb informcikat s pldkat
egyarnt a .,B" fggelkben olvashatunk.
A tblzatok profi kezelse nem merl ki a stlustulajdonsgok hasznlatban. Ahogy

a 7.3. pldbl kiderl, a cellpadding s a cellspacing jellemzvel a tblzat
szeglye mentn lv res hely nagysga szablyozhat. A cellspacing jellemz
a szeglyek s a cellk kztti helyet, a cellpadding pedig a cella tartalmt krlvev
res hely mrett adja meg kppontban kifejezve. Ha a cellpadding jellemz rtkt
O-ra lltjuk, akkor a cellk tartalma olyan kzel kerl a szeglyhez, amennyire csak
lehetsges- akr hozz is rhet. A cellpadding s a cellspacing jellemzvel jl
szablyozhat a tblzat egsznek kinzete.
Oldalelrendezs kialaktsa tblzatokkal

Az ra elejn mr jeleztk, hogy a weboldaltervezk nem csak sorokba rendezhet in
formcik megjelentsre hasznljk a tblzatokat, hanem a weboldalak elrendezst
is szoks -volt- tblzatokkal kialaktani. Ms webtervezk forrskdjait tanulmnyoz
va mind a mai napig sok tblzatos elrendezst tallunk. A mdszer elterjedsnek oka
az volt, hogy az 1990-es vek kzepe s a 2000-es vek eleje kztt a bngszk meg
lehetsen eltrerr tmogattk a CSS-t, a tblzatokat viszont minden bngsz lnyeg
ben azonos mdon jelentette meg, gy aztn a weboldaltervezk inkbb egy tblzatra
alapoztk az oldal elrendezst, mert gy tudtk elrni, hogy minden bngsz egyfor
mn jelentse meg az oldalt. Mindazonltal most, hogy a CSS-t minden jelentsebb bn
gsz viszonylag egyformn rtelmezi, a webtervezket mr semmi nem tntorthatja el
attl, hogy a szabvnyokon alapul ajnlsokat kvetve ne hasznljanak tblzatokat
az oldalelrendezsek kialaktshoz.
A World Wide Web Consortium (W3C) - a Vilghl jvjt tltni hivatott szabvnyal
kot testlet- nem a tblzatokat, hanem a stluslapokat tekinti az oldalelrendezs
eszkzeinek. A stluslapok lnyegesen sokrtbben hasznlhatk a tblzatoknl
ezrt foglalkozik ez a knyv is lnyegben csak a CSS-se! megvalstott oldalelrende
zssel.
Lssunk pr komolyabb indokot arra nzve, hogy mirt ne hasznljunk tblzatokat
a weboldalak elrendezsnek megvalstsakor:
A tblzatok sszemossk a megjelentst a tartalommal.
A CSS s a szabv
nyoknak megfelel weboldaltervek egyik elnye, hogy a megjelens elvlaszt

hat a tartalomt!.
A tblzatok szksgtelenl bonyoltjk a weboldal ksbbi talaktst. Ha egy tblzaton alapul webhely elrendezsn vltoztatni szeretnnk, akkor
a webhely minden oldalt t kell rnunk (kivve ha egy bonyolult dinamikus
kialakts oldalrl beszlnk - ilyenkor viszont a dinamikus tartalmat elllt
rszben kell mindent trnunk).
A tblzatok megneheztik az akadlymentestst. - A kpernyolvas programok

a tblzatban tblzatba kvokoz tartalomra szmtanak, s megprbljk
a weboldalt ennek megfelelen felolvasni.
A tblzatok bajoss teszik az oldalak mobileszkzn trtn megjelentst.
A tblzaton alapul elrendezsek ltalban nem elg rugalmasak ahhoz, hogy

a kis kpernykhz igazadhassanak (lsd a 19. rt).
Ezzel mg csak nhnyat emltettnk a tblzatok hasznlatn alapul weboldaltervezs
rkai kzl. A felmerl problmk rszletesebb elemzse a Mirt butasg a tblzatos
szerkezet? cm, a http: l /www. hotdesign. com/ seybold/hungarian/ weboldalon
megtekinthet npszerl bemutatban olvashat.
sszefoglals
Ezen az rn megtanultuk, hogyan szervezhetnk szveget s kpeket sorokbl s
oszlopokbl ll tblzatokk. Megismertk a tblzatok ltrehozst szolgl hrom
alapvet elemet, valamint jnhny, ezekben az elemekben hasznlhat, a tblzat
igaztst, trkzeit s kinzett szablyoz jellemzt s stlust. Megtudtuk azt is, hogy
a tblzatok egytt, egymsba gyazva is hasznlhatk, ami tovbb bvti az elrende
zsi lehetsgek krt.
7. ra
lnfonncik megjelenftse tblzatok segftsgvel 115
A 7.1. tblzat a mai rn trgyalt elemeket s jellemzket foglalja ssze.
7 1 tblzat
.
A 7. rn trgyalt HTML-elemek s 1ellemzk
Elem/Jellemz
Lers
<table> ... </table>
Tblzatot hoz ltre. A tblzat belsejben

korltlan szm sor (<tr> elem) kaphat
helyet.
Jellemzk
border="szlessg"
A tblzat szeglynek vastagsgt adja

meg kppontban kifejezve.
A border="O", vagy a border jellemz
elhagysa a szeglyeket lthatatlann te
szi.
cellspacing=" trkz"
A tblzat celli kztt lv trkzt adja

meg, kppontban.
cellpadding="bels marg"
A tblzat cellinak hatra s a cellban

lv tartalom kztti trkzt adja meg,
kppontban.
style="width:szlessg"
A tblzat szlessgt adja meg az olda

lon. Kppontban s az oldal szzalkos
arnyban kifejezve egyarnt megadhat.
style="height:magassg"
A tblzat magassgt adja meg az olda

lon. Kppontban s az oldal szzalkos
arnyban kifejezve egyarnt megadhat.
style="background-color:szn"
A tblzat s a kln belltott httrszn

nel nem br cellk httrsznt adja meg.
style=" background-image:
url (kp_elrsi_tja)"
A tblzat s a kln belltott httrkppel

nem br cellk httrkpt adja meg
(ha httrsznt is megadtunk, akkor a kp
tltsz rszein a httrszn Jtszdik).
Elem
<tr>...</tr>
A tblzat egy sort adja meg; legalbb

egy cellt (<td> elemet) tartalmaz.
Jellemzk
style="text-align: igazts"
A cellk tartalmnak vzszintes igazrst

adja meg az adott soron bell. Lehetsges
rtkei: left (balra), right (jobbra) s
center (kzpre).
style="vertical-align: igazts"
A cellk tartalmnak fggleges igazrst

adja meg az adott soron bell. Elterjed
tebb rtkei: top (fent), rniddle (kz
pen) s bottom (lent).
116
7.1. tblzat
A 7. rn trgyalt HTML-elemek s -jellemzk
(joytats)
Elem/Jellemz
Lers
style="background-color:szin"
A sor celli kzl a kln belltott httr

sznnel nem br cellk httrsznt adja
meg.
style="background-image:
A sor celli kzl a kln belltott, sajt
url (kp_elrsi_tja)"
httrkppel nem br cellk httrkpt

adja meg.
Elem
<td>.
.</td>
Egy tblzatcellt hatroz meg.
<th>.
.</th>
Egy tblzatfejlc-cellt ad meg.
Jellemzk
style="text-align:igazits"
A cellk tartalmnak vzszintes igazrst ha

trozza meg. Lehetsges rtkei: left (bal
ra), right (jobbra) s center (kzpre).
style="vertical-align:igazits"
A cellk tartalmnak fggleges igazrst

adja meg. Elterjedtebb rtkei: top (fent),
middle (kzpen) s bottom (lent).
rowspan="sorok_szma"
colspan="oszlopok szma"
Megadja, hogy hny soron veljen t a cella.

Megadja, hogy hny oszlopon veljen t
a cella.
style="width:szlessg"
A cellaoszlop szlessgt adja meg. Kp

pontban s az oldal szzalkos arnyban
kifejezve egyarnt megadhat.
style="height:magassg"
A cellasor magassgt adja meg. Kppont

ban s az oldal szzalkos arnyban ki
fejezve egyarnt megadhat.
style="background-color:szin"
A cella httrsznt adja meg.
style="background-image:
A httrkp, amit a cellban meg kvnunk
url (kp_elrsi_tja)"
jelenteni.
Krdezz-felelek
K:
Ksztettem egy nagy tblzatot. Amikor betltm az oldalt, sokig res marad
V:
Az sszetett tblzatoknl beletelik nmi idbe, amg megjelennek a kpernyn,
az oldal, s semmi nem ltszik. Mirt kell vrakozni?

me1t a bngsznek mg az eltt kell mindent kisilabizlnia, hogy a tblzatot
akr rszben megjelenten. A sebessg nmileg nvelhet, ha a tblzat minden
kpt elltjuk width s height jellemzveL A width jellemz hasznlata
a <table> s a <td> elemekben is jtkony hats.
7. ra
lnfonncik megjelentsa tblzatok segftsgve1 f 117
K:
Lehetsges tblzatokat egymsba gyazni?
V:
Igen, egy tblzat celliban elhelyezhetk tovbbi tblzatok. Megemltennk

azonban, hogy az egymsba gyazott tblzatok - fleg a nagyobbak - lassan
tltdnek be, s a megjelentsk is idignyes. Mieltt egymsba gyazott tbl
zatot ksztennk, gondoljuk vgig, hogy az oldalon megjelenteni kvnt tarta
lom nem formzhat-e CSS hasznlatvaL Lehet, hogy a knyv vgigolvasst
megelzen nem tudunk minden ktsget kizran vlaszolni erre a krdsre, de
me egy kis segtsg: a krdsre a legtbb esetben igenl vlasz adhat.
Ismtls
Ez a rsz ismtl krdsekbl s vlaszokbl ll, amelyek segtsgvel megszilrdthat
juk az ebben a leckben szerzett tudsunkat. Prbljuk megvlaszolni a krdseket
Ismtl krdsek
1.
Hogyan hozhatunk ltre egy egyszer, kt sorbl s kt oszlopbl ll,
2.
Az elz krdst folytatva: hogyan vlaszthatjuk el a tblzat cellit 30 kppontos
alaprtelmezett szegllyel hatrolt tblzatot?

trkzzel a szeglytl?
3.
Hogyan festhetjk az elz kt krds tblzatnak bal fels celljt zldre,

a jobb felst pirosra, a bal alst srgra, a jobb alst pedig kkre?
Vlaszok
1.
Hasznljuk az albbi HTML-kdot:

ctable
border="l">
<tr>
<td>Top
left...</td>
<td>Top
right... </td>
e/tr>
<tr>
ctd>Bottom
left ... </td>
<td>Bottom
left ...</td>
</tr>
</table>
2.
A <table> elemet kell a cellspacing=" 30" jellemzvel bvtennk.
3.
A bal fels ctd> elembe rjuk be, hogy style="background-color:green",

a jobb felsbe azt, hogy style="background-color:red", a bal alsba, hogy
style= "background-color :yellow",
style="background-color:blue".
vgl a jobb alsba azt, hogy

Gyakorlatok
Van a webhelynknek olyan oldala, ahol a ltogatk esetleg szvesen olvasnk

lista, illetve tblzat formjban az informcikat? Hozzunk ltre egy tblzatot
a sorokba rendezhet informcik megjelentsre. Minden oszlopnak legyen
sajt cmsora-vagy akr sajt grafikja. A mai rn megismert lehetsgek
kzl ksrletezznk az igazrsok klnfle tpusaival, illetve a trkzkkel.
Gyakran tallkozunk vltakoz szn sorokbl ll tblzatokkal, ahol az egyik

sor mondjuk szrke, a kvetkez pedig fehr htter. Egy tblzat sorait azrt
lehet rdemes vltakoz sznv tenni, mert gy els pillantsra is knnyebben
azonostja a szemnk az egyes sorokat. Ksztsnk egy vltakoz szn sorokbl
ll tblzatot - szksg esetn a szveg szne is vltakozzon. Br a sznekrl
szl 9. ra mg elttnk ll, mr elegend tudssal rendelkeznk ahhoz, hogy
bele merjnk fogni a feladatba.
8. RA
Kls s bels hivatkozsok
hasznlata
A lecke tartalma:
Horgonyhivatkozsok hasznlata
Hivatkozs a webhely egyik oldalrl egy msikra
Hivatkozs kls tartalomra
Hivatkozs elektronikus levlcmekre
Ablakok megclzsa hivatkozsokkal
A hivatkozsok formzsa CSS-stlusokkal
Az eddigiekben megtanultuk, hogyan kszthetnk a HTML-elemek segtsgvel egysze

r weboldalakat Ebben a pillanatban azonban ezek a tartalomdarabkk szigetekknt
sznak a semmiben, nem kapcsoldva egyb oldalakhoz (megjegyeznnk, hogy ez sem

teljesen igaz, hiszen a 4. rn becsempsztnk a kdba nhny oldalhivatkozst). Ah
hoz, hogy munknkbl "valdi" webes tartalom vljk, valahogy ssze kell kapcsol
nunk az Internet tbbi rszvel - de legalbbis a sajt vagy cges webhelynk egyb ol
dalaival.
Ezen az rn bemutatjuk, hogyan hozhatunk ltre hivatkozsokat a sajt dokumentuma

inkon bell, s hogyan hivatkozhatunk ms dokumentumokra. Emellett megtanuljuk
azt is, hogyan lssuk el stlusokkal a hivatkozsainkat- gy az alaprtelmezett kk szn,
alhzott szveg helyett neknk tetsz megjelenst kaphatunk.
Webcmek hasznlata
A webhelynk tartalmnak trolsra a legegyszerub mdszer, ha minden fjlt egyetlen
mappban gyjtnk ssze. Ha gy ll a helyzet, az egyes fjlokra knnyen hivatkozha
tunk, csak runtessk fel a nevket az <a> elem href jellemzjben.
Mieltt nekikezdennk a munknak, rdemes felfrisstennk arra vonatkoz isme
reteinket, hogy hov helyezzk a fjljainkat a kiszolgln, s miknt kezeljk ket,
ha tbb knyvtrat is alkalmazunk. Minderre nagy szksgnk lesz, amikor
a webdokumentumainkban hivatkozsokat adunk meg. Lapozzunk ht vissza
a 2. rhoz, ott is A fjlok helye a webkisza/g/n cm rszhez.
jellemznek (attribute) azokat az elemekhez mellkelt kiegszt adatokat nevezzk,

amelyek tovbb rnyaljk az elem feladatt. gy pldul az <a> elem href jellemzje
annak az oldalnak a cmt adja meg, amelyre hivatkazunk
Ha egy maroknyinl tbb oldalunk van, illetve szeretnnk nmi szerkezetet adni
a webhelynknek, rdemes knyvtrakba (vagy ha jobban tetszik, mappkba) rendez
ni azokat, amelyeknek a neve tkrzi a tartalmukat. gy pldul a kpek egy images
(kpek) nev knyvtrba kerlhetnek, a cg adatai az about (rlunk) nevezetue, s
gy tovbb.
Akrhogy is rendezzk el a dokumentumainkat a webkiszolgln, relatv cmeket
mindig hasznlhatunk, amelyek ppen elegendek ahhoz, hogy egy weboldalrl
elrjnk egy msikat. A relatv cm (viszonytott cm) egy weboldaltl egy msikig
vezet tvonalat ad meg, ellenttben a teljes (vagy abszolt) internetcmmel.
Ha visszaemlksznk a 2. rn tanultakra, tudhatjuk, hogy a webkiszolgl dokumen
tumgykere a webes tartalom legfels szint knyvrrt jelenti. A webcmekben ezt
a knyvtrat a perjel (!) azonostja, s ez a jel szaigl az alacsonyabb szint knyvtrak
elvlasztsra is az tvonalon, valahogy gy:
!knyvtr/alknyvtr/al-alknyvtr
A HTML-kdban mindig az egyszer perjelet ( 1) hasznljuk a knyvtrak neveinek
elvlasztsra, gy feledkezznk el a Windowsban megszakott fordtott perjel ( \)
alkalmazsrl. Igaz teht, hogy a Weben minden elre mutat- mg a perjelek is!
8. ra
Ttelezzk fel, hogy egy
zoo. html
Kls6 s bels6 hivatkozsok hasznlata
nev oldalt hozunk ltre a dokumentumgykrben,
s a kdjban el szeretnnk helyezni egy-egy hivatkozst az

african.html
asi an. html
f121
nev fjljra.
elephants
alknyvtr
hivatkozsok kdja gy fest:
ca href="lelephantslafrican.html">Learn about African elephants.cla>

ca href="lelephantslasian.htm l">Learn
about Asian elephants.cla>
Az itt szerepl cmek a gykrhez viszonytott cmek, ugyanis nem szerepel bennk
a teljes tartomnynv, ugyanakkor a viszonytsi alapjuk a perjellel megjelentett
dokumentumgykr.
A hagyomnyos relatv cmek hasznlatnl elhagyhatjuk a kezd peelet. gy a hivat
kozsok cmt a bngsz az adott fjl knyvtrhoz kpest rtelmezi - ez lehet
a dokumentumgykr, de lehet ennek brmilyen szint alknyvtra is:
ca href="elephantslafrican.html">Learn about African elephants.cla>
ca href="elephantslasian.htm l">Learn
Az
elephant
alknyvtr
hivatkozhatnak viszont a
african. html
zoo.html
about Asian
asian. html
elephants.cla>
fjljai az albbi mdon
foldalra:
ca href="http:llwww.yourdoman.comlzoo.html">Return to
ca href="lzoo.html">Return to
the
ca href="..lzoo.html">Return to
the zoo.cla>
zoo.cla>
the
zoo.cla>
Az els kdsor abszolt hivatkozst takar. Ez esetben abszolt semmi ktelynk nem
lehet arra nzve, hogy hov mutat a hivatkozs, hiszen a teljes
belertve a tartomnynevet is.
URL
elttnk ll,
msodik esetben azonban egy gykrhez viszonytott
hivatkozst ltunk. Itt az tvonal az ppen megltogatott tartomnyhoz viszonytva

rtend, gy nincs szksg arra, hogy megadjuk a protokoll tpust (pldul
illetve a tartomny nevt (mint a
www . tartomany. com ) -
h t tp: l l),
a kezdeti perjel azonban ott
van, jelezve, hogy a cmer a dokumentumgykrhez viszonytva kell rtelmeznnk.
A relatv ( elephantslafrican.html ) s az abszolt cmzs

(h ttp: llwww. takeme2thezoo. comlelephantslafrican.html) kztti
dntsben a kvetkez szablyhoz rdemes tartanunk magunkat: akkor hasznljunk
relatv cmeket, ha egytt trolt tjlokra, pldul egy webhely sszetevire hivatko
zunk, mg az abszolt cmzst akkor kell ignybe vennnk, ha olyan fjlokra hivatko
zunk, amelyek valahol msutt -egy msik szmtgpen vagy lemezmeghajtn,
illetve leggyakrabban az Internet egy msik helyn -tallhatk.
A harmadik hivatkozsban kt pontot C..) lthatunk- ez az adott knyvtrat tartalmaz

knyvtrra, vagyis a szlknyvtrra utal. Ha teht kt ponttal tallkozunk egy elrsi
ton bell, gondolatban mindig lpjnk "egy szinttel feljebb". Ha a relatv hivatkozso
kat egysges mdon hasznljuk az oldalainkon, a hivatkozsokhoz hozz sem kell
nylnunk, ha a webhelyet egy msik knyvtrba, lemezmeghajtra vagy
webkiszolglra kltztetjk
122
A relatv cmek szksg esetn meglehetsen bonyolult knyvtrszerkezeteket is

tfoghatnak A kiterjedt webhelyek oldalainak rendszerezsrl s sszekapcsolsrl
bvebben a 23. rn lesz sz.
nll feladat
Remlhetleg mr magunk is ksztettnk pr weboldalt az eddigi feladatok
sorn. Az albbiakban tovbbmegynk-ltrehozunk nhny jabb oldalt, s
ssze is kapcsoljuk azokat:
1.
Hatrozzunk meg egy kezdoldalt, amely a webhely bejrsnak kiindulpontja

knt mkdik majd-valarnilyen formban az sszes oldalunknak kapcsoldnia
kell hozz. Ha a korbbiakban mr ksztettnk magunkrl, illetve a cgnkrl
szl oldalt, lehet ez a nyitlap, de jat is ltrehozhatunk, ha gy ltjuk jnak.
2.
Helyezzk el a kezdoldalon az ltalunk korbban elksztett HTML-oldalak hi

vatkozsait (illetve helykitlt sorokat azok szmra, amelyeknek a ltrehozst
a ksbbiekben tervezzk). Gyzdjnk meg arrl, hogy a fjlnevek-belertve
a kis- s nagybetk hasznlatt-pontosan szerepeinek minden hivatkozsban.
3.
A kezdoldalon kvl rninden ms oldal tetejn (vagy aljn) helyezznk el egy

egy hivatkozst, amely visszavisz a kezdoldalra. gy a webhely bejrsa jelent
sen knnyebb vlik.
4.
rdemes lehet hivatkomunk-akr a kezdoldalrl, akr egy kln ennek

a clnak szentelt oldalrl-a tmnkhoz kapcsold, illetve rdekesnek tartott
webhelyekre. Gyakran elfordul, hogy a webhelyek tulajdonosai a bartaik
webhelyeit is feltntetik e hivatkozsok sorban. A cgeknek azonban krlte
kinten kell eljrniuk ezekkel a hivatkozsokkal, nehogy tl gyorsan ms
webhelyekre irnytsk a remnybeli gyfeleiket
Oldalon belli hivatkozsok horgonyokkal

Az
<a>
elem (tag)-amely a webes hivatkozsok megjelentsrt felel-az "anchor"
(horgony) szbl kapta a nevt, ami arra utal, hogy az oldal egy meghatrozott helyt
jellhetjk meg vele. A knyvnkben eddig ltott pldkban mindssze annyit mutat
tunk be, hogy miknt hasznlhatjuk az
<a>
elemet arra, hogy valahov mshov vigyk
a ltogatt. Ezzel azonban mg nem fedtk fel a benne rejl lehetsgek teljes krt.
Lssuk ht, miknt alkalmazhatunk horgonyhivatkozsokat, amelyek egyazon oldal
klnbz rszeit kapcsoljk ssze.
8. ra
Kls s bels hivatkozsok hasmlata
f123
Oldalhelyek megjellse horgonyokkal

Az <a> elem lehetv teszi, hogy egy oldal pontjait horgonyknt jelljk meg, s gy
olyan hivatkozsokat hozzunk ltre, amelyek ezekre a pontokra mutatnak. A 8.1. pl

dban, amelyet egy kicsit ksbb mutatunk be, a gyakorlatban is lthatjuk mindezt.
Ahhoz, hogy megrtsk, hogyan is mkdnek ezek a hivatkozsok, kukkantsunk bele
a kdba, s vizsgljuk meg a sorrendben els <a> elemet:
<a
id="top"></a>
Amikor az <a> elemet hivatkozsknt hasznljuk, a href jellemzvel adjuk meg a k

vnt cmet. Vagyis az <a href> elemre rkattinthatunk, mg az <a id> elem egy ilyen
kattints clllomsaknt szerepel. Pldnkban az <a> elem meghatroz egy clpontot,
de ezttal nem jn ltre hivatkozs- itt mindssze nevet adunk annak a pontnak, ahol
ez a cmke megjelenik. A zr < 1 a> cmkre szksg van, mint ahogy arra is, hogy
az id jellemzvel megadott nv egyedi legyen, az elem belsejben azonban nem feltt
lenl kell tartalmat elhelyeznnk.
A HTML rgebbi vltozataiban az
id
helyett a
name
jellemz volt hasznlatos.
A HTML jabb vltozatai, valamint az XHTML lemondtak a

gy itt az
id
name
hasznlatrL
jellemz szerepel.
Hivatkozs horgonyokra
A 8.1. pldban egy webhelyet lthatunk klnfle horgonyokkal egyetlen oldalon
bell. Vegyk szemgyre az utols <a> elemet:

<a
href="#top">Return
to Index.</a>
A # (kettskereszt) jel azt jelli, hogy a top sz egy nvvel elltott horgonyra hivatko
zik a dokumentumon bell, nem pedig egy msik oldalra. Ha a felhasznl a Return to
Index (Vissza a trgymutathoz) hivatkozsra kattint, a bngsz azt a rszt jelenti
meg az oldalnak, amelyik az <a id=" top"> elemmel kezddik.
8.1. plda
Horgonyok belltsa az <a> elem id jellemzjvel

<! DOCTYPE
html
PUBLIC
"-l /W3C/ /DTD XHTML 1.1/ /EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtmlll.dtd">
<head>
<title>Alphabetical Shakespeare</title>
</head>
124

<body>
<hl><a id="top"></a>First
<p>Don't you
Lines
of
just hate when you
on one knee about to rattle off

sonnet,
and
zap!
You space
Shakespearean
Sonnets</hl>
go a-courting, and
it.
you're
down
totally romantic Shakespearean
<em>"Um...
It was, uh... I
think
it
started with a B..."</em></p>

<p>Well, appearest thou no longer the dork. Simply refer to this page,
click on the first letter of the sonnet you want,
reminder of the first
heart that makes my
line to get you
heart
to
started.
groan ... "</em></p>
<h2 style="text-align:center">Alphabetical
<h3
and get an instant
<em>"Beshrew that
Index</h2>
<a
href="#C">C</a>
<a href="#D">D</a> <a href="#E">E</a> <a
href="#F">F</a>
<a href="#G">G</a>
<a href="#A">A</a> <a href="#B">B</a>

<a
href="#H">H</a> <a
href="#I">I</a>
<a href="liJ">J</a> <a
href="liK">K</a> <a
href="liL">L</a>
<a href="#M">M</a> <a href="liN">N</a>
<a
href="ll0">0</a>
<a href="liP">P</a> <a href="liQ">Q</a>
<a href="liR">R</a>
href="liT">T</a>
<a href="liU">U</a>
<a href="liS">S</a> <a

<a href="liV">V</a>
<a href="liW">W</a>
<a href="liY">Y</a>
<a href="liZ">Z</a>
<a
href="liX">X</a>
</h3>
<hr />
<h3><a
id="A"></a>A</h3>
<Ul>
<li>A woman's face with nature's
<li>Accuse me thus,
that
own hand painted,</li>
have
scanted all,
<li>Against my love shall be as

<li>Against
that time
(if
ever that
<li>Ah wherefore with infection

<li>Alack what poverty my muse
<li>Alas
'tis true,
I have
<li>As an
unperfect
<li>As fast
as
thou
actor
brings
live,
forth,
stage,
so fast
</li>
</li>
here and there,

delight,
on the
shalt wane
time come) </li>
should he
gone
<li>As a decrepit father takes
</li>
am now</li>
</li>
</li>
</li>
thou
grow'st,
</li>
</Ul>
<p><a href="#top"><em>Return to Index.</em></a></p>
<hr />

Ez a szveg (amely egy HTML-megjegyzs) megjelenik ugyan a torrskdban,

a bngszablakban azonban nem. A megjegyzsek hasznlatrl bvebben
a 23. rn lesz sz.
8. ra
1125
Az <a> elem id jellemzjben megadott horgonyneveket alfanumerikus karakterrel

kell kezdennk, de ha egyszeren csak meg szeretnnk szmozni a horgonyok azono
ti
stit, akkor is rjunk a sorszmok el nmi szveget (pldul photol, photo2 stb.).
mert a bngszk elfogadjk ugyan a csak szmbl ll azonostkat, de ez

az XHTML-szabvny szerint mr nem rvnyes kd.
A 8.1. plda minden
<a href> eleme egy-egy alhzott hivatkozst ad a megfelel
<a id> horgonyhoz-azaz adna, ha mindegyik horgonyt meghatroztuk volna.

A pldban ezrt csak az A s a z hivatkozs mkdik, de ha gy tartja kedvnk,
a
tbbit magunk is kitlthetjk Ha a 8.1. bra Alphabetical Index (Betrendes
trgymutat) felirata alatt a Z betre kattintunk, a 8.2. brn lthat oldalra jutunk.
Miutn megtanultuk, hogyan hivatkozzunk egy adott weboldal klnbz rszeire,
most azt is lthatjuk majd, hogyan kapcsolhatunk ssze klnll webes tartalmakat.
ti AlpNbetical ShaZpea - Marilla Fwefox
----
file [cfrt - Bookm.lrb lools }jtip
OD-
@
-
http:/{www.yourdomain.om/alph1Shlkespere..html
.. -1
---
First Lines of Shakespearean Sonnets

Ooa't you just bate wbc:n you go a-courtiog. and you'ce do"''ll oo ooe kDce abom. to ratde atr a totaly romaotic: Shakespear
50IIlDet. and zap! You space iL "Um... It
was,
uh. .. l titink il started.,..ith a B... "
Wel, appea<est lhcm oo loager Ibe dorlc. Smply rcfer to tms page, click oa thefirst letter oftbe soaoet you"- and g<l an
i:nstzml: rer:ninder- ofthe first lioe to get you started "Beshrflw that heart that ma/ccs my Mart to groan... "
AJphabeticallndex
l
l
fg!JMQQBIYX
A
A woman's face wth es 0\\'11 hand pairu:ed,

Accose me tbu.s, that l have scanted al.
Agaiost my len shall be as I am oow
Agamst that bn>e ({ ever that bn>ecome)
!
<
Ah ""berd'"or-e witb infection sbould be Ir.-e.
Alodc what poverty my muse briogs forth.
A1as 'tis true, I have gooe here aDd thcre,

As a decrepl f3ther takes deligbt,
As an unped"ect actor co the stage.
Do..
As fast as tbou sbaJt. wane

-
so
fast tbou grow'st,
---
--..,. ::..
8.1. bra
A 8.1. pldban lthat <a id> elemek nem jelennek meg a kpernyn, mg az <a href>
elemeket alhzott hivatkozsknt ltjuk
126 1 Tanuljuk meg a HTML s a CSS hasznlatt 24 ra alatt

[ Alphabebcal Shab:speare
-
= liil
Mozilla Friox
[D
!l
--
http://www.yourdomin.com/lphashalcespeare..html
-+
--
!!.!!I;!: g!!! :!K !.M ri Q f Q B. I!! Y .!Y Y
A woman's face witb nature's o"'u ba:od paiol:ed,

Ac me dms, that I ba-oe scanted al,
Against my lo\e sbal bt: as l am oow
Agaiost that time ( over that time ccm<)
Ab "-bercfore '\\itb iafectioo sboukl be lin.

Aladc M.at poverty my muse btings fortb,
Alas 'tis true. l have gooe bere and tberc,
As a deacp4 falber takes ddigbt.
As an uopofect actor oo. tbe stage,
As fast as tbou sbak wane so fast tbou grow'st..
bt11Tntolnda.
(No500Delsstart"ilbZ.)
Rel11m to Index.
-
""
8.2. bra
A 8.1. brn lthat oldalon a Z betre kattintva az oldal megfelel rszhez jutunk
Hivatkozsok a sajt oldalaink kztt

Amint azt az ra korbbi rszben megtudhattuk, a href jellemz megadsakor nem
kell felttlenl feltntetnnk a h t tp: 1 1 karakterlncot a cmben, amennyiben a hivatko
zott tartalom a sajt tartomnyunkon bell tallhat (illetve ugyanazon a szmtgpen,
ha helyben tekintjk meg). Tovbb, ha egyazon tartomny vagy szmtgp kt fjlja
kztt hozunk ltre hivatkozst, a teljes webcm megadsra sincs szksg. St ha a kt
fjl ugyanabban a mappban talll1at, elg csak a HTML-fjl nevt feltntetni:
<a href="pagetwo.html">Go to Page 2.</a>
A 8.2. pldban s a 8.3. brn egy fejtr oldalt mutatjuk be, amelynek a megoldsait
a 8.3. pldban, illetve a 8.4. brn lthat weboldal jelenti meg. Ez utbbi tartalmaz
egy hivatkozst, amely visszavisz a fejtr oldalra. Mivel a 8.2. plda egy vele azonos
knyvtrban tallhat fjira hivatkozik, a teljes cm helyett hasznlhatjuk magt
a fjlnevet
8. ra
8.2. plda
Kls s bels hivatkozsok hasznlata (127
A history>qUiz.html fjl
<?xrnl version="l.O"
<!DOCTYPE
html
encoding="UTF-8"?>
PUBLIC
"-//W3C//DTD
XHTML
1.1//EN"
<html
xml:lang="en">
<head>
<title>History
Quiz</title>
</head>
<body>
<hl>History
Quiz</hl>
<p>Complete
the
Played
follawing
cruel
tricks
on
<li>Columbus
sailed
the
rhymes.
the
Saxons
(Example:
William
in... ten
the
Conquerar
sixty-six.)</p>
<Ol>
<li>The
Spanish
Armada
<li>London burnt
like
ocean blue
met its
rotten
in...</li>
fate
in...</li>
sticks
in...</li>
</ol>
<P
style="text-align:
<a
href="historyanswers.html">Check
center;font-weight:
Your
bold;">
Answers!</a>
</p>
</body>
</html>
8.3. plda
<?xrnl
A historyVlnswers.html oldal. amelyre a historyquiz.html himtkozik
version="l.O"
<!DOCTYPE
html
encoding="UTF-8"?>
PUBLIC
"-//W3C//DTD
XHTML
1.1//EN"
<html
xml:lang="en">
<head>
<title>History
Quiz
Answers</title>
</head>
<body>
<hl>History
Quiz Answers</hl>
<Ol>
<li>...fourteen
hundred
and ninety-two.</li>
<li>...fifteen hundred
and
eighty
<li>...sixteen
and
sixty-six.</li>
hundred
eight.</li>
</Ol>
<P
style="text-align:
<a
href="historyquiz.html">Return
</p>
</body>
</html>
center;font-weight:
to
bold;">
the Questions</a>
Hlstcwy Qui:: - Moz& firefax
\c=:1liDI
l
il
'
..
httrr.//-.yourdomain.com/histotyqua..htrru
History Quiz
Camplele th< following rh)",.S. (E.umple: \\'lliam th< Cooquor play! aud lricks on th< Saxoos in. ..
... siuy-six.)
l. Columbus sailed the ocean bloe io....
Span;sh Annada =t its fate in...
3. London burnt lik:e roaen stick:s in...
2. The
Ceck \'our Aaswers!
Done
--
-f:--
8.3. bra
A historyquiz.html, amelynek a kdjt a 8.2. pldban lttuk, s amelyre a 83. plda
hivatkozsa utalt
httP
J/' www .yourdomilin. com/historyanswtiS...=.c
. "'"'
c ..c
'.
__
T]
_ _-+___,
History Quiz Answers

l. .. fourtem bundred and ninety-two
2. .. .fiftem bundred and .,;gbty .;gbt.
3. .. .sixteco bundred and siuy-six.
Retara to die Ouesrioa5
toone
_ __
8.4. bra
A 83. brn lthat Check Your Answers! hivatkozs erre a vlaszokat tartalmaz oldalra
vezet, a Return to the Questions hivatkozs pedig visszavisz a 83. bra oldalra
Azzal, hogy teljes webcmek helyett fjlneveket hasznlunk, rengeteg idt takartha
tunk meg. Ennl is fontosabb azonban, hogy az oldalaink kztti hivatkozsok mindig
mkdkpesek maradnak, brhov is helyezzk t a webhelynket A hivatkozsokat
gy ellenrizhetjk mg a szmtgpnk merevlemezn, majd ezutn tmsolhatjuk
a fjlokat egy webkiszolglra, CD-re, DVD-re vagy memriakrtyra, mikzben nem
kell aggdnunk amiatt, hogy a hivatkozsok esetleg megszakadnak
incs ebben
semmi varzslat - nnden a weboldalak cmeinek megfelel hasznlatn mlik.
8. ra
f129
Hivatkozs kls webes tartalomra

A sajt webhelynkn belli oldalakra s a kls webes tartalomra mutat hivatkozsok
kztt mindssze annyi a klnbsg, hogy az utbbi esetben a teljes cmet fel kell
tntetnnk, belertve a h t tp: // eltagot, a tartomnynevet, valamint a fjl teljes elrsi
tjt (legyen sz HTML-, kp-, illetve multimdiafjlrl, vagy brmi msrl).
gy ha valamelyik oldalunkrl a Google keresjre szeretnnk hivatkozni, ilyesfajta

abszolt cmzst kell hasznlnunk az <a> elemben:
<a href="http://www. google.com/">Go to Google</a>
Ismeretes, hogy a legtbb bngszben nem okoz gondot, ha elhagyjuk a webcm

G:?; q
elejrl a
h t tp: //
hat- az
<a h ref>
eltagot Ez a lazasg azonban a HTML-kdban nem elfogad

hivatkozsokban a teljes alakot kell megadnunk.
Mindemellett az elzekben tanultakat alkalmazva ms oldalak nvvel elltott horgo

nyaira is hivatkozhatunk - ehhez nem kell felttlenl ugyanazon az oldalon lennnk.
Mindssze annyit kell tennnk, hogy a cm, illetve a fjlnv utn egy
jelet kveten
feltntetjk a horgony nevt. A kvetkez hivatkozs pldul egy photos nev hor
gonyhoz visz az african. htmlnevezet oldalon, amely a
www . takeme2thezoo. com
tartomny elephants knyvtrban tallhat:

<a href="http://www.takemetothezoo.com/elephants/african.html#photos">
Check out
the
African
Elephant
Photos!</a>
Ha egy olyan oldalon helyezzk el ezt a hivatkozst, amely maga is

a www . takeme2thezoo. com tartomnyban tallhat (hiszen mi vagyunk a webhely
fenntarti), a hivatkozs ilyen egyszer alakot lt:
<a href="/elephants/african.html#photos">Check out
the African Elephant
Photos!</a>
Amint azt a korbbiakban megtanultuk, a h ttp: // eltag s a tartomnynv ilyen

esetben elhagyhat.
Fontos, hogy a kettskereszt jelet csak az

az
ll
<a id>
<a href>
elemekben hasznljuk- ha
elemekbe kerlnek, a hivatkozsok elromlanak.
Hivatkozs elektronikus levlcmre

Amellett, hogy weboldalakra s azok rszeire hivatkozhatunk, az <a> elem lehetv
teszi azt is, hogy egy elektronikus levlcmet adjunk meg a href jellemzben, ami
egyszer mdot ad a ltogati visszajelzsre. Termszetesen magunk is feltntethetjk
a levlcmet valahol, arra szmtva, hogy a lelkesebb ltogatk majd begpelik, de ez
nveli a hibk lehetsgt. Ha ugyanakkor egyetlen kattintssal lehetv tesszk
a levlkldst, mg ettl a fradsgtl is megkmljk a felhasznlkat, s teljesen
kikszbljk az elgpels eshetsgt.
Egy elektronikus levlcmre mutat HTML-hivatkozs valahogy gy fest:
<a href="mailto:yourusername@yourdomain.com">Send
me an email
message.</a>
A Send me an email message(Kldjn nekem elektronikus levelet) szveg pontosan

olyan alakban jelenik meg, mint ms <a> hivatkozsok.
Ha azt szeretnnk, hogy a ltogatink szmra lthatv is vljon az elektronikus
levlcmnk(gy feljegyezhetik, vagy az alaprtelmezettl eltr levelezprogramban is
felhasznlhatjk), a href jellemz mellett tntessk fel az <a> s az <l a> cmke kztti
szvegben is:
<a
href="mailto:yourusername@yourdomain.com">yourusername@yourdomain.com</a>
Ha a felhasznl egy ilyen hivatkozsra kattint, a legtbb bngszben egy ablakot kap,
amelyben nyomban megrhatja a neknk sznt zenett- ehhez a rendszer automatiku
san azt a levelezprogramot nyitja meg, amelyet az illet hasznl. A hivatkozsban
azonban mi is elhelyezhetnk elre megrt tartalmat mind a levl trgyban, mind pedig
a trzsben - ehhez csak hasznlatba kell vennnk a mai lto hivatkozsban a subject
s a body vltozkat. A vltozkat a levlcmtl egy krdjellel(?) vlasztl1atjuk el,
az egyes vltozkat az rtkktl egy egyenlsgjellel ( ) vgl pedig a vltoz-rtk
prokat az "s" jel (&) hatrolja. A "vltoz" s az "rtk" fogalmt jelenleg nem szks
ges megrtennk, elg, ha ltjuk, hogyan helyezhetnk el alaprtelmezett trgysort s
=
trzsszveget az elbbi plda hivatkozsban:

<a href="mailto:author@somedomain.com?subject=Book Question&body=
When is the next edition coming out?">author@somedomain.com</a>
Ha a felhasznl erre a hivatkozsra kattint, a bngsz ltrehoz egy elektronikus

levelet, amelynek a cmzettje az author@somedomain. com(szerzli!Jtartomny.com)
a trgyban a Book Question(Krds a knyvvel kapcsolatban), a trzsben pedig
a When is the next edit ion coming out?(Mikor jelenik meg az j kiads?) szveg ll.
8. ra
\Q
'if
Kls6 s bels6 hivatkozsok hasznlata
f131
Ha a levlben alaprtelmezs szerint csak a trgyat szeretnnk megadni, a trzset

nem, egyszeren hagyjuk ki az & jelet, a
body
vltozt, az egyenlsgjelet s
a megadott szveget, valahogy gy:
<a href="mailto:author@somedomain.com?subject=
BookQuestion>author@somedomain.com</a>
Mieltt kitaptznnk a weboldalainkat az e-mail cmnkkel, lljon itt egy halk figyel
meztets s egy apr fogs. Bizonyra nem ismeretlen elttnk a levlszemt (spam)
fogalma, s taln az sem, hogy akik ezt a nyavalyt a felhasznJk nyakba zdtjk,
komoly cmadatbzisokat ptenek fel erre a clra, az egyik gyjtsi mdszerk pedig
"
ppen a weboldalak mailto hivatkozsainak "learatsa .
Szerencsre van egy apr fogs, amellyel ezeknek a tmadsoknak a nagy tbbsgt
kivdhetjk A mdszer alapja, hogy a karakterek helyett karakterkdokat (karakter
egyedeket, character entity) hasznlunk a cmekben, amelyek becsapjk a gyjtget
programokat. Vegyk pldul a j cmeloni@grnail. com cmer. Ha a betket a karakter
kd-megfelelikre cserljk, a legtbb levlcmgyjt programot leFzhatjuk. Az ASCII
kisbetk kdjai
a -nl
kezddnek (ez az "a" bet kdja), s bcsorrendben
emelkednek. gy a "j" bet kdja
&#106,
a "c" bet
&#99,
s gy tovbb. Ha az sszes
karaktert az ASCII-megfeleljre cserljk, ezt kapjuk:

<a
href="mailto:jcmeloni@g
mail.c&#1 11;m">Send me
an email
message.</a>
Mivel a bngsz a karakterkdokat karakterknt rtelmezi, a vgeredmny a megjele

nts szempontjbl az eredetivel megegyez lesz. Az automatikus levlcmgyjt
prograrnak ugyanakkor az oldal HTML-kdjt nzik, ami ez esetben meglehetsen
kusza cmer ad. Ha nem akarunk magunk bajldni a webcmnk talaktsval, rjuk be
egy keresbe az "email address encoder" (levlcmkdol) kifejezst, s biztosan
tallunk nhny, az Interneten elrhet szolgltatst, amely elvgzi ezt helyettnk.
\Q
'if
Bevett szoks a szerz e-mail cmt minden oldal aljn feltntetni. Ezzel egyrszt
megknnytjk a ltogatknak, hogy kapcsolatba lpjenek velnk, msrszt gy
az oldalak esetleges hibirl is nagyobb esllyel kapunk visszajelzst. Csak
a karakterkdos fogs alkalmazsra kell gyelnnk, hiszen gy kvl maradhatunk
a cmgyjtgetk ltkrn.
132
) Tanuljuk meg a HTML s a CSS hasznlatt 24 ra alatt
Hivatkozs megnyitsa j bngszablakban

Megtanultuk ht, hogyan adjunk meg hivatkozsokat- legyen sz akr a webhelynkn
bellre, akr kvlre mutat hivatkozsokrl -, de kihagytunk mg egy hivatkozsfajtt,
amely lehetv teszi, hogy a kvnt weboldalt egy j ablakban nyissuk meg.
Bizonyra hallottunk mr az elugr ablakokrl (pop-up window), amelyek tbbnyire
valamilyen reklmot jelentenek meg teljesen nmkden, a felhasznl hozzjrul
sa nlkl. Vannak azonban helyzetek, amikor egy msik ablak megnyitsa teljessggel
indokolhat. Ilyen lehet, ha egy kisebb, msodrend bngszablakban szeretnnk
kiegszt tjkoztatst adni gy, hogy kzben a felhasznl tovbbra is lthassa
az eredeti ablakot. Ez gyakran elfordul, ha egy animlt bemutatra, egy klipre vagy
ms multimdis elemre kattintunk. j ablak megnyitsra akkor is szksg lehet, ha
a webhelynkn kvli tartalmat szeretnnk megjelenteni.
Az j bngszablak megnyitsa- klnsen ha teljes kpernys ablakrl van sz mg akkor is szembemegy bizonyos hasznlhatsgi s hozzfrhetsgi irnyelvekkel,
ha ezt a felhasznl tudtval tesszk. Korbban az j ablakok megnyitsa tbbnyire
az <a> elem target jellemzjvel trtnt - ez azonban mr nem szerepel a szigor
XHTML 1.1 szabvnyban.
Ugyanezt az eredmnyt az irnyelvek kvetse mellett is elrhetjk, de ehhez szksg
van nmi JavaScript-kdra s ms fejlettebb programozstechnikai mdszerekre.
Ezekrl a 18. rn lesz sz, ahol megtanuljuk, hogyan jelentsnk meg ablakokat
a kls hivatkozsaink szmra gy, hogy a szabvnyoknak s a hozzfrhetsgi
kvetelmnyeknek is megfeleljnk.
Hivatkozsok formzsa CSS-stflusokkal

Az oldalaink szveges hivatkozsai alaprtelmezs szerint kk betkkel, alhzva
jelennek meg. Taln szrevettk azt is, hogy a mr megltogatott hivatkozsok szne
liira vltozik- ez is alaprtelmezs. Ha azonban akr egy kis idt is eltltttnk
az Interneten, lthattuk, hogy nem minden hivatkozs kk s lila -s ezrt, gy vlem,
mindannyian hlsak lehetnk. Szerencsre nmi CSS-kd s az <a> elem losztlyai
nak ismeretben mi is kilphetnk az alaprtelmezsek unalmas vilgbl.
Szveg helyett kpeket is hasznlhatunk hivatkozsknt, csak helyezzk el a megfe

lel <img />elemet a nyit <a> s a zr <la> cmke kztt. A hivatkozsknt
hasznlt kpekrl bvebben a 11. rn lesz sz.
8. ra
}133
Az /osztly olyan osztly", amely az elemek stlust bizonyos krlmnyek kztt

"
a le, amelyek megfelelhetnek pldul a felhasznl mveleteinek. gy pldul
az <a> elem ismert losztlyai a link, a visited, a haver s az active.
Az a: link azt az llapotot rja le, amelyben a hivatkozst akkor ltjuk, ha mg
nem kattintottunk r.
Az a:visited arra az llapotra utal, amikor a hivatkozst mr megltogattk, s

benne van a bngsz memrijban.
Az a: haver arra az llapotra utal, amikor a felhasznl ppen a hivatkozs felett
Az a: act i ve azt hatrozza meg, hogy miknt kell megjelenteni a hivatkozst,
ll az egrmutatval (de mg nem kattintott r).

ha a felhasznl rkattintott a hivatkozsra, de mg nem engedte fel az egr
gombot.
Tegyk fel, hogy az albbi stlusokkal szeretnnk egy hivatkozst ltrehozni:
Flkvr, Verdana bettpussal (alhzs, vagyis "dszts" nlkl)
V ilgoskk alapsznnel
A hivatkozs szne vltozzon vrsre, ha a felhasznl fl viszi az egrmutatt,
A megltogatott hivatkozs betszne legyen szrke
vagy rkattint
Mindennek a kvetkez stluslap-bejegyzsek felelnek meg:

a
{
font-family:
Verdana,
font-weight:
bold;
text-decoration:
a:link
none;
color:
a:visited
a:hover
#CCCCCC;
color:
a:acti ve
#6479AO;
color:
#E03A3E;
color:
sans-serif;
#E03A3E;
A szneket a pldban tizenhatos szmrendszer (hexadecimlis) rtkekkel

adtuk meg- errl bvebben a 9. rn lesz sz.
134f Tanuljuk meg a HTML s a CSS hasznlatt 24 ra alatt

Mivel a pldban szerepl hivatkozs az llapottl fggetlenl flkvr (s nem
alhzott) Verdana betkkel jelenik meg, ezt a hrom tulajdonsgot feltntethetjk
az
vlaszt bejegyzsben. Az losztlyok azonban a betszn tekintetben eltrnek
egymstl, ezrt ezt a szablyt kln-kln fel kell tntetnnk mindegyikknl.

Az losztly rkli a szlje szablyait-hacsak fell nem rja azokat. Kvetkezskp
pen a plda sszes losztlyban flkvr, nem alhzott Verdana bettpus szerepel.
Ha azonban az albbi szablyt alkalmaztuk volna a
hover
losztlynl, a szveg Cornic
Sans bettpussal jelenne meg, amikor a felhasznl fl viszi az egrmutatt (persze

csak akkor, ha a bettpus elrhet a szmtgpn):
{
a:hover
font-family: "Comic
color:
Sans MS";
#E03A3E;
Emellett, mivel az
act i ve
s a
hover
losztlyok ugyanazt a betsznt alkalrnazzk,
egyesthetjk a stluslap-bejegyzseiket:
a:hover,
a:active
color:
#E03A3E;
A 8.4. pldban sszerakjuk az eddigi kdrszleteket-az gy kapott oldalon, amelyet

a 8.5. brn lthatunk, az losztlyok az ltalunk vlasztott stlusokkal jelennek meg.
8.4. plda
<?xml
Himtkozsok losztvainakformzsa stlusokkal
--------
version="1.0"
<!DOCTYPE html
encoding="UTF-8"?>
PUBLIC "-//W3C//DTD XHTML
1.1//EN"
<head>
<title>Sample
<style
a
Link
Style</title>
type="text/css">
{
font-family:
Verdana,
font-weight: bold;
text-decoration:
a:link
color:
#6479AO;
a:visited
color:
a:hover,
color:
#CCCCCC;
a:active
#FFOOOO;
none;
sans-serif;
xml:lang="en">
8. ra
Kls6 s bels6 hivatkozsok hasznlata f135
</style>
</head>
<body>
<hl>Sample
<P><a
Link
Style</hl>
href="simplelinkstyle.html">The first time you see
should
be
light
blue,
bold,
me,
non-underlined link in the Verdana
font</a>.</p>
</body>
</html>
li Sample unk Styl<
Mani!. Fi<efox
tl_J
@ll
J[rn-
&
Sample
Link
htty//www.yourciotNin.somlsamplelinkstyle.html
Style
The first time vou see me, I should be a light blue, bold,
non-undertined link in the Verdana font.
8.5. bra
A hivatkozsok megjelenst
Ilon<
stlusokkal szabyozhatjuk
Ha megtekintjk a kapott oldalt egy bngszben, lthatjuk, hogy a hivatkozs valban

vilgoskk, flkvr, nem alhzott Verdana betkkel jelenik meg. Ha fl visszk
az egrmutatt, majd rkattintunk, s nem engedjk fel az egrgombot, a szveg szne
vrsre vlt. V gl, ha a kattints utn felengedjk az egrgombot, a bngsz egysze
ren jra betlti az oldalt, hiszen a hivatkozs ugyanerre a fjira mutat. A cm azonban
bekerl a bngsz memrijba, gy mr ltogatott hivatkozsknt jelenik meg - a kk
helyett szrke betkkel.
A CSS segtsgvel szles krben mdosthatjuk a hivatkozsaink szvegtulajdonsgait.
Megvltoztathatjuk a bettpusr, a betmretet, a betvastagsgot, a dsztst, s gy

tovbb. Az is elfordulhat, hogy tbbfle hivatkozsstlust is szeretnnk hasznlni
ugyanazon az oldalon bell. Ilyenkor osztlyokat hozhatunk ltre- nem kell magunkat
az <a> elem egyetlen stluskszletre korltoznunk Az albbiakban egy faoterlink
nev osztly stlusait mutatjuk be, amelyek a lblc hivatkozsainak csinostsra
szlettek:
a.footerlink
font-family:
Verdana,
font-weight:
bold;
font-size:
75%;
text-decoration:
none;
sans-serif;

a.footerlink:link,
color:
a.footerlink:visited
#6479AO;
a.footerlink:hover,
color:
a.footerlink:active
#E03A3E;
Amint a pldban is lthatjuk, ilyenkor a vlaszt neve (a) utn egy pont ll, ezt kveti
az osztly neve (footerlink), egy kettspont, vgl pedig az losztly neve:
vlaszt.osztly:losztly
a.footerlink:hover
Tekintsk t a B fggelket, gy kpet kaphatunk arrl, hogy rnilyen stlusokat is

alkalmazhatunk a hivatkozsokra.
sszefoglals
Az <a> elem teszi a hiperszveget "hiperr"- a segtsgvel teremtnk kapcsolatot
ms weboldalakkal vagy az adott oldal horgonyaivaL Ezen az rn megtanultuk,
hogyan hozhatunk ltre egyszer hivatkozsokat ms oldalakra a relatv vagy abszolt
cmk megadsvaL
Ha a webhelynkn kvli oldalakra hivatkozunk, fontos, hogy a kivnt oldal teljes
cmt felruntessk az <a href> elemben. Ha ugyanakkor a sajt oldalaink kztt
teremtnk kapcsolatot, elg a fjlnv s a megfelel elrsi t [eltntetse.
Megtanultuk azt is, hogyan hatrozhatunk meg nvvel elltott horgonyokat egy weboldal
szerkezetben, s hogyan hivatkozhatunk rjuk. Megtudtuk, hogy a hivatkozsokban
elektronikus levlcmet is elhelyezhetnk, amivel megknnythetjk, hogy a ltogatink
visszajelzst kldjenek neknk. Kitrtnk arra is, rniknt rejthetjk el az e-mail cmnket
a levlszemt-kldk ell, az ra vgn pedig szt ejtettnk arrl, hogyan hatrozhatjuk
meg a hivatkozsok megjelenst CSS-stlusok segtsgveL
Az
<a>
elemrl tanultakat a 8.1. tblzatban foglaljuk ssze.
8. ra
8.1. tblzat
Elem/jellemz
A 8. nn
Kls s bels hivatkozsok hasmlata
}137
megismert mML-elemek s jellemzik
Lers
A href jellemzvel alkalmazva hivatkozst kapunk a megadott
<a> ... </ a>
weboldalra vagy horgonyra, rnig az id jellemzvel egy horgonyt

kapunk, amelyre hivatkozhatunk
Jellemzk
href="cm"
A hivatkozott dokumentum vagy horgony cme.
id=11nvll
A dokumentumban tallhat horgony neve (azonostja).
Krdezz-felelek
K:
Mi trtnik, ha egy olyan weboldalra hivatkazunk valahol az Interneten,
V:
Nos, ez attl fgg, hogyan lltotta be az illet a webkiszolgljt Tbbnyire

a "Page not found " (Az oldal nem tallhat) zenetet vagy valami hasonlt
kapunk. Persze ilyenkor sincs komolyabb gond, hiszen a bngsz Vissza
amelyet a gazdja ksbb trl vagy thelyez?
gombjval visszajuthatunk a kiindulsi oldalra. Webhelynk fenntartjaknt

komoly felelssgnk van abban, hogy rendszeresen futtassunk valamilyen
hivatkozsellenrz programot, hogy meggyzdjnk rla, hogy mind a bels,
mind a kls hivatkozsaink rendben vannak. Ilyen szaigitats pldul
a http: l /validator. w 3. org l checklink cmen tallhat Link Checker.
K:
A webhelyem egyik bels hivatkozsa az otthoni szmtgpemen tkletesen
mkdik, de ha Jelteszem az oldalakat az Internetre, hibt szle/ek.

Mi trtnhetett?
V:
A leggyakrabban a kvetkez problmk valamelyike ll a httrben:
A kis- s nagybetk hibs hasznlata. Windows rendszer gpeken, ha
a MyFile. html fjira az <a href= "myfile. html" >kddal hivatkozunk,

semmilyen problma nem jelentkezik, a legtbb webkiszolgln azonban
a hivatkozst az <a href= "MyFile. html" >alakban kell megadnunk
(de mdosthatjuk a MyFile. html nevt is). A problmt slyosbtja, hogy
egyes szvegszerkesztk s fjltviteli prograrnak a megkrdezsnk nlkl
mdostjk a kis- s nagybetket. A legjobb, ha megmaradunk a csupa
kisbets fjlneveknL
Szkzk a fj/nevekben. A legtbb webkiszolgl nem engedi meg

a szkzket tartalmaz fjlnevek hasznlatr. Soha ne adjuk egy oldalnak
a my page. html nevet- hasznljuk helyette a mypage. html vagy
a my_page. html vltozatot (utbbi esetben alhzst alkalmazva a szkz
helyett).
Helyi abszolt cmek. Ha valamilyen rejtlyes okbl helyi abszolt cmmel
(pldul: c: \mywebsi te \news. html) hivatkazunk egy fjlra, a hivatkozs

az Interneten nem fog mkdni. A helyi abszolt cmek hasznlata rninden
krlmnyek kztt ellenjavallt; a megjelensk tbbnyire annak tudhat be,
hogy egy az oldal tesztelse kzben hasznlt tmeneti hivatkozs vletlenl
bent maradt a kdban. gyeljnk teht arra, hogy az ilyen hivatkozsokat
kigyornlljuk, mieltt feltltennk a webhelynket az Internetre.
K:
Alkalmazhatjuk egyetlen hivatkozsan bell a h ref s az id jellemzt?
V:
Igen, s ezzel nmi gpelstl kmlhetjk meg magunkat, ha amgy is egyms
Ha igen, mirt tennnk?
mellett llna egy hivatkozs s egy horgony. ltalban azonban a zavar elkerl
se vgett rdemes az <a href> s az <a id> elemeket kln kezelnnk, hiszen
igen eltr szerepet jtszanak a HTML-dokumentumokban.
K:
Mi trtnik, ha vletlenl el1juk egy horgony nevt, vagy elfelejtjk kitenni el
V:
Ha olyan horgonyra hivatkozunk, amely nincs jelen az oldalon, illetve elrjuk
a# jelet?
a nevt, a hivatkozs az oldal tetejre visz.
Ismtls
Ez a rsz ismtl krdsekbl s vlaszokbl ll, amelyek segtsgvel megszilrdt11at
Ismtl krdsek
1.
ltalnos iskolai legjobb bartunk rakadt a webhelynkre az Interneten, s sze

retne velnk hivatkozst cserlni. Hogyan helyeznnk el valamelyik oldalunkon
hivatkozst a
www .
supercheapsui ts. com/ -billybob/
cmen tallhat
webhelyre?
2.
Milyen HTML-kddal rhetnnk el, hogy ha egy ltogatnk a lap tetejn

az "About the Authors" (A szerzkrl) szavakra kattint, tugorjon a szerzk
bemutatsra, amely az oldal egy msik rszn tallhat?
3.
Ha az e-mail cmnk a bon@ soir. com, hogy alakthatjuk t a "goodnight

greeting" szveget hivatkozss, amelyre kattintva a ltogatink zenetet
kldhetnek neknk?
8. ra
Kls s bels hivatkozsok hasznlata 1139
Vlaszok
1.
Helyezzk el az albbi kdot az oldalon:

<a href="http://www.supercheapsuits.com/-billybob/">Billy Bob's
site</a>
2.
rjuk a kvetkez kds01t az oldal tetejre:

<a href="#credits">About the Authors</a>
Ezt pedig a szerzk bemutatsa el:

<a id="credits"></a>
3.
Helyezzk el ezt a kdot az oldalunkon:

Send
me
a <a href="mailto:bon@soir.com">goodnight
greeting</a>!
Gyakorlatok
Ksztsnk HTML-oldalt, amely a kedvenc webhelyeink formzott listjt tartal

mazza. Ha egyesek megvannak a knyvjelzink kztt is, ltogassuk meg ket,
s msoljuk ki a cmket a bngsz cmmezjbl.
Ha korbban ksztettnk mr oldalakat egy webhely szmra, most nzzk t

ket jra, s keressk meg azokat a helyeket, ahol rdemes lenne megadnunk
a lehetsget a ltogatknak, hogy kapcsolatba lpjenek velnk. Tntessk fel
ezeken a helyeken az elektronikus levlcmnket. Ne feledjk, a kapcsolatfelv
tel s a visszajelzs lehetsgeibl sosem elg - klnsen ha zleti vllalkozst
mkdtetnk.
9. RA
A sznek hasznlata
A lecke tartalma:
Hogyan vlasszunk szneket a webhelynkhz'
A sznek viselkedse a Weben
Hexadecimlis sznkdok hasznlata
A httr, a szveg s a szeglyek sznnek belltsa CSS-stlusok segtsgvel
Az eddigiekben bemutatott weboldalak mindegyikben fehr htteret s fekete betket

lttunk. Ez persze nem alapkvetelmny, annyit azonban bizton megllapthatunk,
hogy az Interneten a leggyakrabban olyan oldalakat tallunk, amelyek vilgos httren
stt sznnel jelentik meg a szveget. A sznvlaszts fogsainak bemutatsa utn
megtanuljuk, mikor hasznlhatunk szneket, miknt vlasszuk ki ket, s hogyan adjuk
meg egy oldal klnbz elemeinek sznt.
A sznvlaszts fogsai
Arra semmikppen sem vllalkozhatunk, hogy megmondjuk, melyik webhelyhez
milyen sznek illenek, abban azonban segthetnk, hogy milyen elveket tartsunk szem
eltt a vlasztsnL A hasznlt sznek komoly hatssal lehetnek a ltogatinkra, gy ha
pldul egy e-kereskedelmi oldalt zemeltetnk, rdemes olyan sznsszelltst alkal
mazni, amely valsggal csbtja a ltogatkat a termkknlatunk megtekintsre s
gy a vsrlsra is. Fontos, hogy a szneket krltekinten s kell ernprival hasznl
juk. Hogy jn ide az emptia? Nos, ne feledjk, hogy a Vilghl nemzetkzi kzssg,
amelyben a sznek rtelmezse vltoz lehet. Japnban pldul nagyon npszer
a rzsaszn, ugyanakkor Kelet-Eurpban komoly elutastssal viszonyulnak hozz.
Ehhez hasonlan lehet, hogy Amerikban egyrtelmen "zldhasak" a bankk, de
a legtbb orszg bankjegyei a szivrvny rninden sznben pompznak, gy ott
a "pnz szne" kifejezs rtelmetlen.
A kulturlisan rzkeny sznvlaszts mellett rdemes az albbi tancsokat is
megfogadnunk:
Hasznljunk termszetes sznvlasztkot. Ez nem azt jelenti, hogy a fldsz
nekhez kell ragaszkodnunk, mindssze arra utal, hogy clszer olyan szneket
alkalmaznunk, amelyekkel az ember sta kzben is tallkozik - tartzkodjunk
a rikt sznektl, amelyek frasztjk a szemet.
Alkalmazzunk szkehh sznkszletet. Nincs szksg 15 klnbz sznre ahhoz,
hogy elrjk, amit szeretnnk. St ha a weboldalunk szvege s bri 15 kln

bz sznben jelennek meg, rdemes lehet jra tgondolni, hogy rnit is szeret
nnk valjban zenni a ltogatknak sszpontostsunk hrom-ngy fbb
sznre s nhny kiegszt rnyalatra - tbbet semmikpp se hasznljunk.
Vegyk figyelembe a ltogatk koreloszlst. Mivel ezt magunk nem tudjuk
szablyozni, jobb, ha egy mindenki szmra elfogadhat kzputat keresnk.

A fiatalok krben npszer lnk sznek lehet, hogy az idsebbek kztt mr
nem aratnak akkora tetszst, de hasonl eltrsek lehetnek a frfiak s nk,
valamint a klnbz kultrkhoz tartozk zlse kztt.
gy rezhetjk, hogy a fenti tmutatsok kvetse mellett mr nem sok vlasztsi
lehetsgnk marad. Ez azonban egyltaln nincs gy - itt egyszeren csak arra hvtuk
fel a figyelmet, hogy kicsit gondolkodjunk el, rnieltt dntseket hoznnk. Ha pedig
rkeresnk az Interneten a "color theory" (sznelmlet) kifejezsre, a gondolataink
jabb lendletet kaphatnak, akrcsak a sznkerk megismerse utn.
A sznkerk egy diagram, amely a szneket kr alakban elhelyezve mutatja be.
Ez az brzolsmd alkalmas arra, hogy elnk trja az alapszneket, valamint a kevert
s kiegszt szneket. Sznsmkat a sznkerk hasznlatval kaphatunk, ezekbl
pedig kikristlyosodhat a webhelynk palettja, amely biztostja az egysges sznhasz-
9. ra
A szfnek hasznlata
J143
nlatot Ha nmi jrtassgra tesznk szert a sznek viszonyainak tern, taln knnyeb
ben kerljk el az olyan szrnysges sznsszelltsokat, mint a narancsszn felirat
vilgoskk httren, vagy az lnkkk felirat barna httr eltt.
A webtervezsben megszakottak az albbi sznsmk:
Analg - Ilyenkor a sznkerken egyms szomszdsgban elhelyezked szneket
hasznlunk (pldul srga s zld). Az egyik szn dominns, mg az analg trsa

a megjelens gazdagtsra hivatott.
Komplementer- Ebben a smban a sznkerken egymssal szemben tallhat
Triadikus
szneket alkalmazunk, pldul egy meleg (vrs) s egy hideg (zld) sznt.
-
Hrom szn hasznlatt jelenti, amelyek egyenl tvolsgra vannak
egymstl a sznkerken. Ez a sma egyszerre ad kiegyenslyozottsgot s

gazdag sznkszletet.
Egsz knyveket s tanfolyamokat szenteltek a sznelmletnek, gy komoly kitrt je
lentene, ha ebben a knyvben belebonyoldnnk a tmba. Mindazonltal, ha valban
webtervezssei s -fejlesztssel szeretnnk foglalkozni, komoly segtsget jelenthet, ha
tltjuk a sznelmlet alapjait. Tltsnk ht nmi idt a kutakodssal- az internetes
keresk sokat segthetnek.
Gyakoroljuk emellett a sznkerk hasznlatt is.
A ht tp: l l colorschemedesigner. com/ cmen tallhat Color Scheme Generator
(Sznsma-genertor) lehetv teszi, hogy egy alapknt megadott sznbl kiindulva
monokrm, komplementer, triadikus, tetradikus, analg s hangslyozott analg
sznsmkat hozzunk ltre.
Websznek
Amennyiben egy weboldalnak a fehrtl eltr httrsznt szeretnnk adni, knnyebb
dolgunk van, mint gondolnnk. Ha pldul kk htteret szeretnnk hasznlni, helyez
Zk el a style= "background-color: blue" kdot a <body> elemben, vagy a body
elem stluslap-bejegyzsben. Termszetesen kk helyett brmilyen ms sznt is vlaszt
Jutunk. A W3C szabvnya sszesen 16 sznt sorol fel, nv szerint a kvetkezket: aqua,
black, blue, fuchsia, gray, green, !ime, maroon, navy, olive, purple, red, silver, tea!,
white, yellow (akvamarin, fekete, lnkkk, fukszia, szrke, zld, lnkzld, gesztenye
barna, sttkk, olajzld, lila, vrs, ezst, kkeszld, fehr s srga).
Termszetesen a Weben ennl sokkal tbb szn megjelenik, olyannyira, hogy 140 neve
stett szn ltezik, amelyeket a bngszk mindentt hasonlan adnak vissza. rdemes
felsorolnunk nhnyuk nevt, csak zeltkppen: azure, bisque, cornflowerblue,
darksalmon, ftrebrick, honeydew, lemonchiffon, papayawhip, peachpuff, saddlebrown,
thistle, tomato, wheat s whitesmoke.

Ezek azonban meglehetsen szubjektv elnevezsek-ha rpillantunk pldul a 140
bngszbart sznre, nem tudunk klnbsget tenni a fuchsia s a magenta kztt.
Ha ez utn megfigyeljk a mellettk ll tizenhatos szmrendszer (hexadecimlis)
kdot, mindjrt vilgoss vlik minden, hiszen a kt kd megegyezik: az rtkk
#FFOOFF.
Ezekrl a kdokrl hamarosan bvebben is olvashatunk, most azonban elg
annyit megjegyeznnk, hogy ha a W3C-szabvnyban szerepl 16 sznen fell tovbbia

kat szeretnnk hasznlni, ha csak lehet, ragaszkodjunk a hexadecimlis sznkdokhoz.
A hexadecimlis sznkdok voltakppen 16 milli szn lersra alkalmasak, jllehet
napjaink legtbb szmtgpn ebbl mindssze" 16 384 jelenthet meg. Ez azonban
"
mg mindig sokkal-sokkal tbb, mint 140 vagy 16.
Ha meg szeretnnk ismerni mind a 140 bngszbart szn nevt, hexadecimlis

kdjt, valamint megjelenst a bngsznkben, ltogassunk el
a
http: //www. w3schools. com/HTML/html_colornames. asp
cmre.
rdemes megemltennk, hogy a sznek neveinek rtelmezse nem fgg a kis- s

nagybetk hasznlattl. gy a Black, a black s a BLACK egyarnt a fekete sznt
azonostja, jllehet a legtbb webtervez megmarad a csupa kisbets, illetve a nagy
kezdbets vltozatnl (mr amennyiben egyltaln hasznlnak neveket- a legtbben
ugyanis a hexadecimlis kdok kifinomultabb rendszere mellett teszik le a voksukat).
Fontos tudnunk, hogy a szmtgp-manitorok nem pontosan ugyanazokkal az rnya
latokkal jelentik meg a szneket. Ami a sajt kpernynkn csodlatos vilgoskknek
tnik, az msutt valamilyen fura lils rnyalattal jelenhet meg. A semleges fldsznek
(mint a kzpszrke, a barna vagy az elefntcsont) mg kiszmthatatlanabb eredmnyt
adnak egyes manitorokon-olyannyira, hogy mg attl fggen is mskpp viselked
nek, hogy milyen napszakban, illetve vilgts mellett nzzk a monitort.
A bttrszn megvltoztatsa mellett lehetsgnk van arra is, hogy beleszljunk a hi
vatkozsok klnbz llapotainak szneibe is (pldul klnbsget tehetnk akztt,
amikor a ltogat a hivatkozs fl viszi az egrmutatt, illetve akztt, amikor r is
kattint-de errl mr tanultunk az elz rkon). Mdosthatjuk a trolelemek
(bekezdsek, rtegek, idzetek s tblzatcellk) httrsznt, s sznes szeglyeket is
meghatrozhatunk a szmukra. A sznek s a trolelemek kapcsolatra mg ezen
az rn pldval szolglunk.
Rengeteg szrny webhelyet tallhatunk az Interneten, amelyeknek az alkoti hallosan
komolyan gondoltk a mvket, az irnia leghalvnyabb jele nlkl. Mindazonltal
"a vilg legrosszabb webhelyt" (The World's Worst Website), amelyet a 9.1. brn
lthatunk, kifejezetten az1t ksztettk, hogy egy helyen bemutassk a webtervezsben
elkvethet slyosabb hibkat, klns tekintettel a sznhasznlatra. Ha az albbi
kpernyfelvtel nem lenne elg, magunk is megtapasztalhatjuk a webes pokol tzes
lehelett a http: //www. angelfire. com/super/badwebs/main. htm cmen.
9. ra
--.
A sznek hasznlata
}145
Constantivnmnnpanimai
r nos
9.1. bra
Rszleges kpernykp "a vilg legrosszabb tuebhevro7"
Ha a kedvenc keresnkbe berjuk a "bad web site examples" (pldk rossz webhelyekre)
kifejezst, rengeteg olyan webhelyet ralU1atunk, amelyek rossz pldk tucatjait lap
toljk egy helyre, s mg azt is elmagyarzzk, hogy mirt te*sztettk fel ket Oscar
helyett citromdjra. Sokukat a megjelensk miau tartjuk "rossznak", a megjelens pedig
a sznekkel kezddik. Vgeredmnyben teht, ha sikerl megrtennk a sznek haszn
latt s a meghatrozsuk finom rszleteit, mris nagy lpst tettnk a tetszets
webhelyek vilga fel.
Hexadecimlis sznkdok
Ha meg szeretnnk felelni a szabvnyoknak, ernellerr megfelelen pontosan kvnjuk
meghatrozni a webhelynk rnyalatait, a sznekre a hexadecimlis sznkdjukkal
rdemes hivatkoznunk. Ez a kd adja meg, hogy milyen arnyban kell a vrs, a zld
s a kk szneket sszekeverni ahhoz, hogy az adon sznhez jussunk. Olyan ez, mint
a sznes gyurma - egy kis vrs, egy kis zld, egy kis kk, s mr ksz is a kvnt szn!
A hexadecimlis sznkd
#rrggbb
alak, ahol az
rr,
gg
s a
bb
a vrs ( rr) , zld
( gg) s kk ( bb) sznsszetevket hatrozza meg. Ha a hexadecimlis szmok tern

mg nem szereztnk tapasztalatokat, akkor sem kell elkeserednnk- elg, ha megje
gyezzk, hogy az
FF
a maximum, a o o pedig a minimum. Az sszetevkben az albbi
kdokat alkalmazzuk:
FF-teljes fnyer.
CC
99-60 szzalkos fnyer.
80 szzalkos fnyer.
66- 40 szzalkos fnyer.
33 - 20 szzalkos fnyer.
00-az sszetev nem jtszik szerepet a sznben.
Az lnkvrs szn kdja teht
#FFOOOO,
a sttzld
#003300,
a kkeslil #660099,
a kzpszrk pedig #999999. Ha teht egy oldalon vrs httren sttzld szveget
szeretnnk megjelenteni, a megfelel HTML-kd gy fest:
<body
style="background-color:#FFOOOO;
color:#003300">
Jllehet a fentiekben mindssze hat lehetsges krjegy hexadecimlis rtket

mutattunk be, sszesen 256 ltezik- a szmjegyek sklja ugyanis O-tl 9-ig s A-tl
F-ig terjed, s minden prosts lehetsges. gy rtelmes hexadecimlis szm az FO
(amelynek a tzes szmrendszerbeli rtke 240) vagy a 62 (98 a tzes szmrendszerben),
s gy tovbb.
Amint a korbbiakban is emltettk, az
#rrggbb
kdban az
rr,
gg
s a
bb
a vrs,
a zld s a kk sszetevt adjk meg, amelyeknek az rtke tzes szmrendszerben

O-tl (az sszetev nem jelenik meg) 255-ig (az sszetev teljes fnyervel jelenik
meg) terjedhet.
A fehr szn ( #FFFFFF ) vrs, zld s kk sszetevjnek rtke egyarnt 255, mg
a fekete szn esetben ( #000000) rnindhrom sszetev O. A tiszta vrs szn kdja
az
#FFOOOO
(tiszta vrs, semmi zld, semmi kk), a tiszta zld
vrs, tiszta zld, semmi kk), a tiszta kk pedig
#OOOOFF
#OOFFOO
(semmi
(semmi vrs, semmi zld,
tiszta kk). A tbbi hexadecimlis sznkd is hasonlkppen bonthat O-tl 255-ig

terjed alkotelemekre. A webbiztos CornflowerBlue szn kdja a
#649SED-vagyis
a vrs sszetevje 40, a zld sszetevje 149, a kk sszetevje pedig 237 (vagyis
szinte maximlis mrtkben tartalmaz kk sznt).
A sznek vlasztsnl- akr grafikai programot hasznlunk, akr az Interneten
vadszunk sznekre-a sznsszetevket hexadecimlis vagy tzes szmrendszerbeli
alakjukban lthatjuk. A "hexadecimal color converter" (hexadecimlis szntalakt)
kifejezsre rkeresve szmos olyan segdeszkzt tallhatunk, amellyel a kapott sznt
gy alakthatjuk t, hogy ezutn felhasznlhassuk a stluslapjainkon.
9. ra
Aszfnek hasznlata
ft 47
A httr, a szveg s a szeglyek sznnek belltsa
CSS-kdokkal
A CSS-stlusok hasznlatakor hrom helyen adhatunk meg sznt: a httr, a szveg,
valamit a szegly esetben. A2 elz rkon is sz esett a sznek meghatrozsrl, de

a sznelmlet s a sznkdok tmakrt nem rintettk. gy a 8. rn megtanultuk,
hogyan alkalmazhatunk szneket a hivatkozsok llapotainak jellsre, mg a 7. ra
egyik fejtrjben arra krtnk vlaszt, hogy Illiknt tlthetjk ki sznekkel a tblza
tok cellit.
A 9.2. bra jl mutatja, hogy miknt juttathatunk egy weboldalt gyetlen sznvlasztssal
a citromdj vromnyosai kz. Jmagam el sem tudom kpzelni, hogy valaki is komoly
webhelyen hasznlja ezt a sznsszelltst- elrettent pldaknt azonban nagyszeren
mutatja, hogy a szneket gy is alkalmazhatjuk elemek stlusainak meghatrozsra.
A 9.1. plda a 9.2. bra alapjul szolgl XHTML- s CSS-kdot mutatja be.
9.1. plda
A httr,
szveg s a szeglyek sz11einek meghatrozsa CSS-stl1usokkal

<!DOCTYPE
html PUBLIC
"-//W3C//DTD XHTML 1.1//EN"
<head>
<title>Background,
Text,
and Border Colors</title>
Text,
and Border Colors</hl>
</head>
<body>
<hl>Background,
<P
style="background-color:#CCCCCC;
border:lpx
solid #000000;
Grey paragraph,
cspan
cdiv
color:#FF0000">
black border,
red text with a
style="color:#FFA500">orange
style="width:300px;
span</span>.</p>
height:75px; margin-bottom: 12px;
background-color:#OOOOOO; border:2px dashed #FFOOOO;color:

#FFFFFF">
Black div,
red border,
white
text. </div>
<table border="l">
ctr>
ctd style="background-color: #00FF00">Green Table Cell</td>
<td
style="background-color:
e/tr>
#FFOOOO">Red
Table Cell</td>
148
<tr>
<td
#FFFFOO">Blue
<td
#OOOOFF">Yellow Table
Table
Cell</td>
Cell</td>
</tr>
</table>
<blockquote
border:4px
yellow
style="background-color:#OOOOFF;
detted
border,
#FFFFOO;
white
color:#FFFFFF"><p>Blue
blockquote,
text.</p></blockquote>
</body>
</html>
..
Background, Text, and Border Colors
:
,
lue blockquote, yello\\ border. white text
Don<
9.2. bra
ess-stlusokkal meghatrozhatjuk a httr, a szveg s a szeg(yek sznt
A 9.1. pldban alkalmazott stlusokat nzve szinte minden vilgoss vlhat, kivve
taln pr szeglystlust A CSS-kdban csak gy adhatunk sznt a szeglyeknek, ha
egyttal meghatrozzuk a szlessgket s a tpusukat-a 9.1. pldakd els pldj
ban a szegly szlessge
ugyanakkor a szegly
lpx,
2px
a negyedik plda szeglye
a tpusa pedig solid (folytonos). A msodik pldban
szles, a tpusa pedig dashed (szaggatott). Vgezetl,

4px
szles, a tpusa pedig dotted (pontozott).
Amikor a webhelynk szmra szneket vlasztunk, mindig tartsuk szben, hogy sokszor
a kevesebb tbb- ha valban rajongunk valamilyen lnk s ltvnyos sznrt, alkalmaz
zuk kiemelsknt, ne pedig az elsdleges oldalelemek sznezsre. Az olvashatsg
rdekben hasznljunk vilgos httren stt szveget a stt httren megjelen vilgos
betk helyett.
9. ra
Aszfnek hasznlata
(149
Vgezetl, ne feledkezznk meg a ltogatink egy korntsem jelentktelen csoportjrl,

a szntvesztkrl. Ha a hozzfrhetsget szeretnnk ellenrizni, rdemes kiprblnunk
a http: l l colorfilter. wickl ine. org l cmen tallhat Colorbiind Web Page Filter
eszkzt, gy megfigyelhetjk, hogyan ltja az oldalunkat egy szntveszt.
sszefoglals
Ezen az rn megismerkedtnk a sznkezels nhny hasznos mdszervel, valarnint
a sznkerk hasznlatval, amellyel knnyen megtallhatjuk a szvegeinket jl kiemel
szneket. Emellett tanultunk a hexadecimlis sznkdokrl is - amelyek az adott szn
vrs, zld s kk sszetevit adjk meg -, valamint arrl, hogy miknt hasznlhatjuk
ezeket a kdokat az oldalon tallhat elemek szneinek finomhangolsra. Megismer
kedtnk hrom stluselemrnel is, amelyek rvn szneket rendelhetnk a trolelemek
htterhez, szeglyeil1ez, valamint a bennk szerepl szveghez a CSS-kdban.
A 9.1. tblzat ezekrl a stlustulajdonsgokrl ad rvid sszefoglalt.
9.1. tblzat
A 9. rn bemutatott stlustulajdonsgok
Jellemz/Stlus
lers
style="background-color:szn"
Egy elem (pldul <body>, <p>, <div>,

<blockquote>
vagy ms trolk)
httrsznt hatrozza meg.

style="color:szn"
Az elemen bell tallhat szveg betinek

sznt hatrozza meg.
style="border:mret tpus szn "
Az elem ngy szeglynek sznt
hatrozza meg. A sznbelltst csak akkor

alkalmazhatjuk, ha megadjuk a szegly
vastagsgt s tpust is.
150
Krdezz-felelek
K:
Igaz, hogy a bngszk lehetv teszik a felhasznliknak a httr- s betszn
V:
Igaz. A ltogatink mdosthatjk a bngszben azokat a szneket, amelyeket
megvltoztatst?
a webhely ksztjeknt meghatroztunk gy a kk httren szerepl fehr
betket egyesek zld-fehrben vagy egyb kedvenc szneikkel nzhetik - jlle
het kevesen lnek ezzel a lehetsggeL ltalban azok a sznek jelennek meg,
amelyeket a <body> elemben megadunk
K:
gy hallottam, hogy 231 "webbztos" szn ltezik, s ajnlatos ezek hasznlat
V:
A trtnet valdi httere a kvetkez: ltezik 231 szn, amely kevsb "zavaro
hoz ragaszkodnunk a weboldalainkon Igaz ez?

san" jelenik meg azoknl a felhasznlknl, akik 256 szn (8 bites) videmdot
hasznlnak. Egyes webtervezk ezrt prblnak kitartani a hasznlatuk mellett.
Mindazonltal a mai kpernyk javarszt tmogatjk a bvebb sznpalettk
megjelentst, gy minden szn egyforma tisztasggal jelenik meg rajtuk.
Ha teht a grafikai programunk kidob egy hexadecimlis sznkdot, nyugodtan
hasznljuk fel a stluslapunkon, s alkalmazzuk az gy kapott egyedi sznsmt.
Ismtls
Ismtl krdsek
1.
Hogyan jelentennk meg egy weboldalt fekete httrrel s lnkzld betkkeP
2.
Egy weboldal sznsmjnak meghatrozsakor melyik sznsszellts ad
rdemes gy tennnk egyltaln'

tgabb teret a sznvlasztsra: az analg, a komplementer vagy a triadikus
rendszer?
3.
Tegyk fel, hogy a <body> elem stlusbejegyzsben a background-color

#FFFFFF, mg az els <div> elemben a background-color #FFOOOO bellts
sal lnk. Milyen httrsznnel jelenik meg ez a <d i v>
vrssei vagy fehrreJl
9. ra
Aszfnek hasmlata
J151
Vlaszok
1.
Helyezzk el az albbi kdsort az oldal kdjnak elejn, illetve a megfelel

bejegyzst a stluslapon:
<body style="background-color:#OOOOOO;
2.
color:#OOFF00">
A triadikus. gy hrom, a sznkrn egyenletesen elosztott sznt

hatrozhatunk meg.
3.
A <d i v> httere vrs lesz, ugyanis a trolelem httrsznnek meghatrozsa

fellrja az t tartalmaz <body> elem, illetve a megfelel stluselem belltsait.
Gyakorlatok
Vlasszunk egy neknk tetsz kiindulsi sznt - lehet ez pldul egy gynyr
kk vagy valamilyen fldszn -, s lltsunk el sznkszletet a Color Scheme
Generator (h t tp: l l colorschemedesigner. com/ ) segtsgveL rdemes
kiprblnunk a tetradikus vagy a hangslyozott analg smkat.
Ha elkszltnk a sznpaletta sszelltsval - akr tbbel is -, rjunk egy egy

szer HTML-oldalt egy <hl> elemmel, valamint egy bekezdsnyi szveggel s
esetleg nhny listaelemmeL A korbban megismert sznstlusokkal hatrozzuk
meg az oldal httrsznt, valamint az egyes tmbszint elemek szvegben
alkalmazott betsznt, s figyeljk meg, hogyan jelennek meg egyttesen.
Az egymsra hatsuk tanulmnyozsa rvn llaptsuk meg, hogy mely sznek
a legalkalmasabbak a trolk megjelentsre, tovbb melyek hasznlhatk jl
az egyszer szveg, a cmsorok, valamint a hivatkozsok betihez.
10. RA
A lecke tartalma:
Mi alapjn vlasszunk grafikai alkalmazst?
Hogyan ksztsk el a fnykpeinket internetes hasznlatra?
Reklmcsil<:ok s nyomgombak ltrehozsa
A sznek szmnak cskkentse a kpeken
tltsz kpek ltrehozsa
Ismtld kpekbl ll httr kialaktsa
Br a webhelyek ksztsekor ktsgtelenl trdnnk kell a sznsszelltssal s

a vonz kllemmel, ahhoz, hogy hatsos kpek kerljenek a weboldalainkra, nem kell
profi mvsznek lennnk. Ami mg fontosabb, nem kell sok-sok pnzt kltennk
szoftverre sem. A mai ra vgre kpesek lesznk olyan kpek ksztsre, amelyeket
felhasznlhatunk a webhelynkn. A fejezet mintapldi ugyan egy bizonyos ingyenes,
a Windows-, a Linux- s a Macintosh-felhasznlk krben npszer programota GNU Image Manipulation Program, azaz a GIMP nevt- hasznlnak, az rn meg-
154
szerzett tuds azonban brmely, a Windows, illetve a Macintosh opercis rendszeren

fut jelentsebb grafikai szaftver esetben is alkalmazhat, mg akkor is, ha a menk
s a belltsi lehetsgek kiss klnbznek.
A mai rn csak azzal foglalkozunk, hogy miknt ksztsk el magukat a klnfle
clokra szolgl kpeket. A ll. rn trgyaljuk azt, hogy a HTML s a CSS segtsgvel
miknt illesztetk ezek a kpek a weboldalainkba.
A grafikai alkalmazs kivlasztsa

A webhelynkhz kszl kpek ltrehozsra jformn brmelyik grafikai alkalma
zst vlaszthatjuk, kezdve azzal az egyszer rajzolprogrammal, amely rendszerint
ingyenesen jr a szmtgpnk opercis rendszerhez, egszen az olyan drga s
profi alkalmazsokig, mint az Adobe Photoshop. Ha pedig rendelkeznk a szmtg
pnkhz csatlakoz digitlis fnykpezgppel, illetve lapolvasval, akkor feltehetleg
a vele kapott program is alkalmas a weboldalainkhoz szksges kpek elksztsre.
Ugyanakkor szmos olyan ingyenes, letlthet kpszerkeszt program ltezik - st
webalkalmazsokat is tallunk-, amely kifejezetten fnykpek feldolgozsra alkalmas.
A kpszerkeszt prograrnak krmjt ktsgtelenl az Adobe Photoshop jelenti.

Ha azonban a szmtgpes programokkal val munka terletn nem rendelkeznk
gyakorlattal, akkor ez az alkalmazs meglehetsen sszetettnek bizonyulhat, s
az ra sem elhanyagolhat. Az Adobe cg termkeirl bvebb informcit a cg
honlapjn (h t tp: //www. adobe. com) tallunk. Ha az Olvast egyik-msik
termkk rdekli, akkor tltse le az ingyenes prbavltozatot az emltett oldalrl.
Ha az Olvas mr rendelkezik azzal az alkalmazssal, amelyik megtlse szerint megfe
lel a webes kpek elksztsre, akkor hasznlja azt az ra sorn. Ha a sorra kerl fel
adatok nmelyiknek elvgzsvel gondunk tmad, akkor a vlasztott szaftver esetleg
mgsem elegend tuds a webes grafika cljaira. Ez esetben a h t tp: //www. g imp. org
honlaprl tltsk le s teleptsk a GIMP nev grafikai programot. A program teljes
rtk, s teljesen ingyenesen hasznlhat.
1.
Ltogassunk el a h t tp: //www. g imp. org oldalra, s kattintsunk a Downloads

(Letltsek) hivatkozsra.
2.
Elvileg egy olyan hivatkozst ltunk, amellyel a programnak az ltalunk hasznlt

opercis rendszerhez ksztett vltozatt tudjuk letlteni. A Show other downloads
(A tovbbi letltsek megmutatsa) hivatkozssal valamennyi vlasztsi lehetsg
lthatv vlik. Ha eltnik a mi opercis rendszernkhz kszlt vltozathoz
vezet hivatkozs, akkor kattintsunk r, s a letlts megkezddik.
3.
A letlts vgeztvel a fjira dupln kattintva kezdhetjk meg a teleptse.
1O. ra
1155
Ms webhelyekrl szrmaz anyagok hasznlata

A webhelynkre kerl kpek s egyb mdiafjlok elksztsvel taln akkor vgznk
a leggyorsabban, ha hozz sem fogunk a munkhoz. Egy weboldalrl kpet szerezni
nem tl bonyolult: rkattintunk a jobb egrgombbal (Macintosh-egr hasznlata esetn
a bal gombbal, s lenyomva tartjuk a billentyt), majd a bngsznk fggvnyben
a Save Image As, illetve a Save Picture As (Kp mentse, Kp mentse ms nven)
menpontot vlasztjuk Egy weboldal httrkpnek kinyerse sem bonyolultabb:
kanintsunk r a jobb egrgombbal, s vlasszuk a Save Background As (Httrkp
mentse) menpontot.
Mindazonltal a tulajdonos kifejezett engedlye nlkl sohasem tancsos egy kpet
hasznlnunk. Krjnk teht engedlyt, vagy keressnk Creatve Commans felhasznlsi
engedllyel rendelkez kpeket. Ha a kpet kifejezett engedly nlkl hasznljuk,
akkor megsrtjk a szerzi jogokat - s ez riemberhez kevss mlt cselekedet.
A szerzi jogokrl bvebben a http: //www. utsystem. edu/OGC/
IntellectualProperty /cprtindx.
htm hivatkozst kvetve olvashatunk, a magyar
olvasnak pedig az 1999. vi LXXVI . trvnyt rdemes tanulmnyoznia.

rdemes lehet a brki ltal szabadon hasznlhat kpek hasznlatt is megfontolnunk
- ez esetben a hasznlat nem engedlykteles. Az Interneten ilyen kpeket pldul
a Microsoft cg Office Online Clip Art and Media webhelyn
( http: //office .microsoft. com/clipart l) tallhatunk. A Barry's Clipart Server

(http: //www. barryscl ipart. com/) szintn npszer lelhelye az ingyenesen
hasznlhat kpeknek
Amit a grafikrl mindenkpp tudnunk kell

Amikor a webhelynkn kpeket vagy egyb multimclis ta1talmat helyeznk el,
minclig kt trekvs kztt kell megtallnunk az idelis egyenslyt. A felhasznl
szemnek s flnek az a j, ha a tartalom annyira rszletes s pontos, amennyire ez
egyltaln lehetsges, de a felhasznlk azt is szeretik, ha az informci azonnal
megjelenik. A bonyolult, szngazdag kpek nagyobb fjlokat is jelentenek, ami viszont
mg gyors internetkapcsolat esetn is lassabb letltshez vezet. Hogyan nvell1et
a kpek minsge minl kisebb fjlmret mellett? Ha helyes dntst szeretnnk hozni,
meg kell rtennk, hogy a sznmlysg s a felbonts miknt eredmnyezi a j min
sg kp szubjektv rzett

A kp felbontsa alatt a kpet alkot pontoknak, vagyis a kppontoknak (pixel) a szmt
rtjk. A nagy mret, magas felbonts kpek ltalban lassabban tltdnek le, s
jelennek meg, mint a kicsi, alacsony felbonts kpek. A felbontst rendszerint
kppontban, a kp szlessgnek s magassgnak szorzataknt adjuk meg. Pldul egy
300 x 200 kppontos kp 300 kppont szles s 200 kppont magas.

A kpek felbontsa tbbflekppen is megadhat. Megadhatjuk kppontban,
tvolsgegysgre vonatkoztatva, szntartomnyknt, idben s radiometrikusan.
rkat tlthetnk azzal, hogy egy-egy mdot megismerjnk, s ha ez grafikustan
folyam lenne, akkor ezt is tennnk. Egyelre azonban mindssze annyit kell szben
tartanunk, hogy nagy kpek lassan tltdnek le, s a manitoron is sok helyet
foglalnak. Az elfoglalt hely s a trigny olyan tulajdonsg, amelyet a webhelynk
megtervezsekor rdemes figyelembe vennnk.
Esetleg meglepve olvastuk, hogy a kphez szksges trterlet - s gy a hlzati
tviteli id - nagysga nem elssorban a kp felbontstl fgg. Ennek az az oka,
hogy a weboldalakon trolt kpeket mindig tmrtett formban troljuk s tovbbtjuk
A kpek tmrtse egy olyan matematikai mvelet eredmnye, amelynek sorn
a kpekben ismtld mintzatokat keresnk. A kptmrts roatematikja meglehe
tsen sszetett tananyag. Az alapelv az, hogy az ismtld mintzatok, illetve a nagy,
egyszn terletek tmrtve is trolhatk. A kpfjl gy lnyegesen kisebb lesz, ezltal
az Interneten is gyorsabban tudjuk tovbbtani. A kp megjelentsekor a webbngsz
feladata az eredeti kp visszalltsa.
Az ra htralv rszben azt trgyaljuk, hogy rniknt lehet ltvnyos, de kis fjlmret
kpeket kszteni. A hasznlt mdszerek az egyes kpek tartalmtl s cljtl fggen

vltoznak. Ahny weboldal, annyifle kphasznlati md, de a kpek mgis fleg
az albbi ngy feladatkrben kapnak szerepet a weboldalakon:
emberekrl, trgyakrl, tjakrl, ptett krnyezetrl kszlt fnykpek;
rajzolt reklmcskok s emblmk;
a lehetsges tevkenysgekre utal, illetve hivatkozsokat rejt nyomgombok;
a trolelemek httrkpei.
A fnykpek elksztse
Ha a weboldalainkon fnykpeket szeretnnk elhelyezni, akkor a nyomtatott kpein
ket kell digitliss alaktanunk, vagy digitlis fnykpezgppel kell azonnal digitlisan
rgztett kpeket ksztennk Elkpzelhet, hogy a lapolvasnkhoz, illetve fnykpe
zgpnkhz kapott alkalmazst kell hasznlnunk a kpek merevlemezre mentshez,
de lehet, hogy a fnykpezgprl az egernkkel is thzhatjuk a kpeket a lemezre.
1 O. ra
(157
Ha lapolvasval ksztjk el a nyomtatott kpeink digitlis vltozatt, akkor rdemes

tudnunk, hogy a lapolvast jformn brmely ltalunk vlasztott grafikai alkalmazsbl
vezrelhetjk -a rszleteket az alkalmazs lersban talljuk
Ha sem lapolvasnk, sem digitlis fnykpezgpnk nincs, akkor j tudni, hogy
(Q
szinte valamennyi filmelhv helyen meg tudjk oldani a 35 millimteres filmjeink

tartalmnak CD-re vagy DVD-re rst. A CD-rl, illetve DVD-rl ezt kveten
a merevlemezre msolhatjuk a kpeket, s egy grafikai alkalmazssal megnyithatjuk,

illetve mdosthatjuk azokat.
Miutn a digitlis kp a szmtgpnkre kerlt, a grafikai alkalmazsunk segtsgvel

vghatjuk, tmretezhetjk, sznkorrekcit vgezhetnk rajta, s tmrthetjk-ms
szval kedvnk szerint alakthatjuk t ket a webes hasznlatra.
Kpek krlvgsa
Minthogy a Webre sznt kpeink mrett szeretnnk minl alacsonyabban tartani,
rendszerint meg szaktuk vgni a digitlis kpeket. A fnykp
krlvgsakor kijelljk
a megtartand terletet, s kidobjuk a tbbit.
nll feladat
Vgs a G/MP-ben
A GIMP eszkztrban gyorsan megtalljuk a Crop (Vg) nev eszkzt s a lehetsges

belltsait. Keressnk egy kpfjlt -lehet sajt kszts, a merevlemeznkn trolt
digitlis kp, de letlthetnk egyet az Internetrl is. Nyissuk meg a kpet a GIMP-ben,
s vgjuk meg, mgpedig az albbiak szerint:
1.
A GIMP eszkztrban kattintsunk a Crop eszkz ikonjra (lsd a 10.1. brt).

A kivlasztott eszkztl fggen esetleg tovbbi jellemzket is bellthatunk.
A 10.1. brn trtnetesen a Crop eszkz belltsi lehetsgeit-Aspect ratio
(Mretarny), Position (Pozci), Size (Mret) s trsaik-ltjuk.
Z.
A krlvgni kvnt kpen rajzoljuk krbe a kijellni kvnt rszt, a megtartani

kvnt rsznek kattintsunk a bal fels sarkba, tartsuk lenyomva a bal egrgom
bot s hzzuk az egrmutatt a rsz jobb als sarkba (lsd a 10.2. brt).
3.
Arnikor a kijells valamelyik sarkba kattintunk, megtrtnik a vgs.
Ha ms grafikai alkalmazst hasznlunk, akkor alighanem a fentiektl eltren kell eljr

nunk, de az alapelv azonos marad: jelljk ki azt, ami marad, s vgjuk Je a maradkot.

Toolbox
----
"""
""""'-"""
!5- ......
8
[!j
raw. AspKt ..tiO

2632:19)
...
t!l5
..
.. E
ru;--
10.1. bra
Az eszkztrrl vlasszuk a Crop eszkzt
10.2. bra
Kijelljk a kp megtartani kvnt rszt
1 O. ra
Kpek ksztse webes hasznlatra 159
A kp esetleg a krlvgst kveten is tl nagy marad - nagyobb annl, mint ami

a weboldalunkra kell. Az adott weboldaltl fgg ugyan, de elkpzelhet, hogy azt
szeretnnk, a nagy kpek ne legyenek nagyobbak egy adott mretnl. Pldul ha a kp
800 x 600 kp
480 kppont, vagy akr mg kisebb. Ha szveg mellett kap he
lyet egy kp, akkor sokszor mindssze 250-350 kppont szles lehet, hogy a szvegnek
nmagban kerl a roanitorra egy katalgus elemeknt, akkor legfeljebb

pont legyen, vagy
640
is maradjon hely. Vannak esetek, amikor a kp nagyobb vltozathoz a kp egy blyeg

mret vltozatn keresztl kvnunk hivatkozst elhelyezni - ilyenkor a blyegkp
hosszabb oldala is legfeljebb szz kppontnyi lehet.
A grafikai alkalmazsunknak feltehetleg lesz egy olyan rsze, amely-valahol

a kpet tartalmaz ablakban-folyamatosan megjelenti a kp mrett. A GIMP
\Q
az aktulis kprnretet az ablak fels rszn rja ki. Ms prograrnak esetleg a jobb
if
als vagy a bal als sarokban jelentik meg ezt az informcit. Az ablakban lthat
esetleg a nagytsi arny, s-ugyanitt taln lehetsget kapunk az arny
megvltoztatsra is -rkzelthetnk a kpre, vagy eltvoladhatunk tle.
Kp tmretezse
A kpek tmrerezshez szksges eszkz neve s helye a hasznlt programtl fgg.
A GIMP-ben nyissuk meg az Image (Kp) ment, s vlasszuk a Scale Image
10.3. brn is lthat Scale Image prbeszdablak
(Kp tmretezse) pontot. Ekkor a

nylik meg.
Ll!__,
Scale lmoge
Scale Image
fromJP9l
--
--
- -
t!!
[JNJgC' Size
'>'{ldth'
l629
Hght
1101
: l
':'
p ints
E!
;l
pixelslin
E1
162'3 llOl pecH
r6olution:
72JXIJ
Y.r601ution:
ll!XIJ
Quolity
tnterpolation: Cubic
!:!<Ip
ll
Besd:
ll
ale
ll
tancel
10.3. bra
Ha egy kp mrett meg szerelnnk
vltoztatni, hasznljuk a Scale Image
prbeszdablakot
Majdnem mindig a jelenlegi mretarny megtartsa mellett szeretnnk az tmretezst

vgezni - azaz azt szeretnnk, ha a kp kvnt szlessgt megadva a programunk
automatikusan kiszmtan a magassgot, s fordtva. gy a kp alakja nem torzul.
A G IMP-ben a mretarny alaprtelmezs szerint rgztett- ezt mutatja a
10.3. brn
megjelen Width (Szlessg) s Height (Magassg) beviteli mezket sszekt lnc is.
Ha az egrrel a lncra kattintunk, akkor elszakad, s gy olyan szlessg- s magassg
rtket adhatunk meg, amilyet ri kedvnk diktl - legfeljebb torzul a kp.
A GIMP sok eszkzhez hasonlan a Scale Image prbeszdablak is az tmretezett

kp ablaka eltt jelenik meg. Az ablakok ilyen elhelyezsvel lehetv vlik, hogy
a prbeszdablakban megadjuk, hogy min kell vltoztatni, alkalmazzuk a vltoztatst,
s azonnal lthatjuk az eredmnyt.
A legtbb, ha nem valamennyi grafikai alkalmazsban lehetsgnk nylik egy kp t
mretezsre gy is, hogy nem pontosan, kppontban adjuk meg az j mretet, hanem
szzalkban. Ha pldul van egy 1629
1487 kppontos kpnk, s nem hajtunk
a szlessg felnek kiszmtshoz szksges osztssal bajldni, akkor vlasszuk

egyszeren a Percent (Szzalk) lehetsget- esetnkben a 10.3. brn lthat lenyl
listbl (amelyben most a pixel lehetsg van kivlasztva). A2 alaprtelmezett
100 helyre rjuk azt, hogy 50. A kp gy 815 kppont szless s 744 kppont magass
alakul, mi pedig megsszuk a szmolgatst.
Fnykpek sznkorrekcija
Ha sajt grafika ksztse helyett inkbb fnykpek talaktsval prblkozunk,
knnyen elkpzelhet, hogy a megfelel hatst sznkorrekcival tudjuk csak elrni.
Ahogy sok kpszerkeszt alkalmazs, a GIMP is szmos lehetsget knl a kp
fnyerejnek, kontrasztjnak s sznegyenslynak belltsra, s persze a rettegett
vrsszem-hats is kikszblhet. A vrsszem-hats megszntetse a GIMP-ben
a Filters (Szrk) men Enhance (Kiemels) menpontjnak Red Eye Removal
(Vrsszem-eltvolts) lehetsgt vlasztva lehetsges.
A mveletek nagy rsze magtl rtetd. Ha fnyesebb kpet szeretnnk, llitsunk
a fnyern. Ha tbb vrset szeretnnk ltni a kpen, a sznegyenslyon kell lltanunk.
A GIMP Colors (Sznek) menjben szmos eszkzt tallunk. Ahogy azt mr az elz
rszben, a Scale Image prbeszdablakrl szlva lertuk, az egyes eszkzk a munkate
rlet eltt jelentik meg a prbeszdablakukat A sznek belltst hen kveti a kp
vltozsa. Az ilyen elnzet a legtbb kpszerkeszt alkalmazsban megtallhat.
A 10.4. brn a Colors menben lv sok eszkz egyikt,
az Adjust Hue/Lightness/Saturation Crnyalat/fnyer/teltettsg belltsa) eszkzt
ltjuk. Ahogy az brn lthat, sok sznbellts egyszeren a prbeszdablakok
klnfle csszkival vgzett rtkrndostsokkal valsthat meg. A Preview
(Elkp) jellngyzetet bekapcsolva a vltoztatsok kzben is nyomon kvethetjk
a tnykedsnk eredmnyt. A Reset Color (Szn visszalltsa) gomb hatsra a kp
az eredeti llapotba ll vissza, s a vltoztatsaink rvnyket vesztik.
10. ra
1161
,,.,...
Setect Prinwy CokM" to Adjud
n y
ld
l-l
y
n\;
Qv.".,.
o-
- Sele<ted"""'
l!ue
lightno
'"""""'
-GO
o
,_!j frenew
10.4. bra
Az Adjust Hue/Lightness/Saturation eszkz egyike a GIMP szmos, csszkval mkd eszkznek
Minthogy rendelkezsre ll eszkz van egy pr, s mindegyik kpes elnzetet

mutatni, az egyes eszkzk szerepnek megismersre a legalkalmasabb mdszer
egy kis jtkos kisrletezs.
A JPEG tmrts belltsa

A Weben tallhat fnykpek akkor a leghasznlhatbbak, ha nem GIF, hanem JPEG
formtumban mentjk ket. A JPEG formtummal a fjl mrett is kezelhet nagysgon
tarthatjuk, s a sznek szmt sem kell cskkentennk Amikor elkszltnk a fnykp
mretnek s kinzetnek belltsval, vlasszuk a File, Save As (Fjl, Ments msknt)
menpontot, s a fjl tpusaknt adjuk meg a JPEG lehetsget. Ha ms grafikai alkal
mazst hasznlunk, valsznleg abban is lesz egy hasonl prbeszdablak, amelyben
a tmrts mrtke s ms klnfle JPEG-belltsok adhatk meg.
A 10.5. brn a Save as JPEG (Ments JPEG formtumba) prbeszdablak lthat,
amely akkor nylik meg, amikor a GIMP-ben egy JPEG kpet mentnk. Az brn
megfigyelhetjk azt a Quality (Minsg) csszkt, amellyel a tmrts mrtke l
(rossz minsg, kis fjlmret) s 100 (j minsg, nagy fjlmret) kztt llthat.
Esetleg szvesen ksrletezgetnnk egy keveset, megfigyelve, hogy a klnfle JPEG
tmrtsi szintek milyen hatssal vannak a kpek minsgre. Mindazonltal a 85%-os
minsg (ha gy tetszik: 15%-os tmrts) a legtbb fnykp esetben megfelel
egyenslyt jelent a fjlmret - gy a letlts sebessge - s a minsg kztt.
gu;olity:
'-----------'='c}
_J
85
:.
IF) ShO)!tpewininwgewindaw
Sm<>othin9' O
Llf.rogresswe
Save E,.iJF datil
[j Savelhumbneil
ODO .-:
r Use ren.rt mark.eB
Frequt: q(rc.)
Sulls;mpling:
2x2.h1.1xl (smAlltst: file)
.QCTmrlhod:
Int
','
_
___I:J
r::J
jJn qulrty sd:bngs from ongm11l1mage

Comm<nt
------ ---- -
10.5. bra
A GIMP a kp minsgnekfenntartsa me/lett gy teszi lehetv afjlmret cskkentst,
hogy a kpet jPEGformtumban menti
Reklmcskok s nyomgombak ksztse

Azoknak a kpeknek az esetben, amelyeket a semmibl hozunk ltre - ilyenek
a reklmcskok (banner) s a nyomgombok (burton)- meg kell fontolnunk pr olyan
dolgot is, amelyek alapveten megklnbztetik ket a fnykpektL
Tervezskor sok ven t alapveten 800 x 600 felbonts manitorokat feltteleztnk.
Ezt az alacsony szmot nem rt mg most is fejben tartanunk, mert sokan nem
lltjk teljes kpernysre az alkalmazsaikat Mindazonltal ma mr nem baj az sem,
ha 1 0 24 x 768 kppont felbonts kperny re tervezzk a weboldalainkat
A reklmcskok s a nyomgombok tervezsekor az els meghozand dntsnk a kp
mretvel kapcsolatos. Manapsg a legtbb interneteznek legalbb 1024
768 kppont
felbonts a kpernyje - sokuknak pedig ennl lnyegesen nagyobb. A szerz pldul

ppen egy 1440
900 kppontos manitor eltt l. ltalban elmondhat, hogy a kpe
inket gy kell megterveznnk, hogy mindig elfrjenek egy kisebb (1024
768-as) kper
nyn is, s mg a grdtsvoknak s a margknak is maradjon hely. A mretet rint

megszarrsok kzl az oldal szlessge a fontosabb, mivel a vzszintes grgets gondot
okozhat, s megzavarja az internetezkeL Az oldalak fggleges grgetse lnyegesen
elfogadhatbb, azaz nem jelent problmt, ha a weboldalaink magasabbak a minimlis
kpernymretnl.
1 O. ra
1163
Felttelezve, hogy legalbb 800 x 600-as felbonts kpernyre terveznk, a teljes

mret reklmcskok s cmsvok ne legyenek 770 kppontnl szlesebbek, illetve
430 kppontnl magasabbak - ez a legnagyobb lthat terlet az oldalon, miutn
szmtsba vettk a grcltsvokat, az eszkztrakat s a bngszablak ms rszeit.
Az oldalon bell a fnykpek s a grafikk kiterjedse fgglegesen s vzszintesen
egyarnt 100 s 300 kppont kztt vltozhat, a kisebb nyomgombak s ikonok
szlessge s magassga pedig 20 s 100 kppont kz essen. Nyilvnval, hogy
amennyiben a tervezs sorn 1024 x 768 kppontos felbontst tartunk szem eltt, akkor
tbb a kperny kihasznlhat "hasznos terlete", de a reklmcskokra, gombokra s
egyb kiegszt grafikai elemekre vonatkoz alapelvek most is ugyangy rvnyesek.
A GIMP-ben gy kezdnk j kpet, hogy a File menbl a New (j) menpontot
vlasztjuk Ekkor megnylik a Create New Image (j kp ltrehozsa) prbeszdablak
(lsd a 10.6. brt). Ha ktsgeink vannak a leend kp megfelel mrett illetleg,
akkor fogadjuk el a 640 x 480 kppontos alaprtelmezett mretet. A Template (Sablon)
lenyl listbl vlaszthatunk ms, elre megadott mret kpet is- pldul a Web
banner common 468x60, vagy a Web banner huge 728x90 mreteket. A weboldalak
reklmcskjai esetben a belltsok valban a szoksos ("common") s az risi
Cnhuge") mretet jelentik. Azt is megtehetjk, hogy az j kp szlessgt s magassgt
sajt kezleg adjuk meg.
LJ::U
er. N..wlmago
Implate
f--,----'-1
IeSiu
Y{idth:
Hight
00
M(300ppij
tancel
, 84 (300 ppij
85 (300ppij
85-Japan (300ppij
US--Lottr (300ppij
USl"9al (300 ppij
Toil<t pa por (US, 300ppij
0 CD covr (300ppij
Floppy lobl (300ppij
O Web banner common 468ll60
Web banner huge 71.8x90
PAL- 720>676
NTSC - 7l0x486
10.6. bra
Mieltt munkhoz ltnnk, dntennk kell
kp mretm7
164
) Tanuljuk meg a HTML s a CSS hasznlatt 24 ra alatt
Ami a kp httrsznt illeti, rendszerint rdemes fehret vlasztanunk, igazodva ahhoz,

ahogy a legtbb bngsz a weboldalakat megjelenti- br, mint az elz rn megta
nultuk, ez megvltoztathat. Persze, ha tudjuk, hogy a kszl weboldalunk httere
nem fehr, akkor adhatunk a kpnek msmilyen httrsznt is. Az is lehet, hogy egylta
ln nem kvnunk a kpnek htteret adni. Ilyenkor a httrsznek kzl a Transparency
(tltszsg) lehetsget kell vlasztanuk Ha a kp httere tltsz, akkor a weboldal
nak a kp mgtti rszt ltjuk a kp resen maradt rszei mgtt. A GIMP-ben az j
kpek httrszne a Create
ew Image prbeszdablak Advanced Options (Specilis
lehetsgek) rszt megnyitva lltl1at be.

Amikor megadtuk, hogy a kp hny kppont szles s magas legyen, s az OK-ra
kattintottunk, egy res rajzvsznat kapunk- ami elg elrettent, ha az Olvas e knyv
rihoz hasonlan ktoldali rajzolitisszel bajldik. Mindazonltal annyi internetes grafi
kai tananyag ltezik- s akkor a kizrlag ennek a tmnak szentelt knyvekrl nem
is szltunk -, hogy most, bzva alkotsvgyban, nyugodt llekkel engedjk el
az Olvas kezt. A mai rnak mindssze az a clja, hogy a weboldalainkra sznt
kpekkel kapcsolatban felhvja a figyelmet nhny dologra- ez nem jelenti azt, hogy
meg is tanuljuk elkszteni a kpeket. A sajt magunk vlasztotta program teljes
megismershez vezet ton akkor lphetnk elre, ha a fenti alapmveletekkel mr
tisztban vagyunk.
Hogyan cskkenthet a sznek szma egy kpen?

A kp mretnek - s ebbl kvetkezen a letltsi idnek - a cskkentsre szolgl
mdszerek egyik legeredmnyesebbike abban ll, hogy cskkentjk a kpen hasznlt
sznek szmt. Ezzel lnyegesen romlik nhny fnykp minsge, de az eljrs
a legtbb reklmcsk, nyomgomb s egyb ikon esetben remekl hasznlhat.
rnyalsnak (dithering) neveuk azt
az eljrst, amelynek sorn a kpszerkeszt al
kalmazs gy igyekszik visszaadni egy a sznpalettban jelen nem lv sznt, hogy

kt hasonl szn kppontjait vltogatja a megfelel helyen. Egy rnyalt rzsaszn
pldul egymst vlt piros s fehr kppontokbl ll, amelyek egyms mell
kerlve rzsasznnek ltszanak. Az rnyals sok esetben javt a kpek minsgn,
de a webes grafikk esetben mgsem javasoljuk a hasznlatt Hogy mirt?
Azrt, mert a lnyegbl addan a kp hordozta informci bonyolultsgt nveli,
ami viszont ltalban a fjlmret, illetve a letltsi id lnyeges nvekedst vonja
maga utn.
Bizonyra rmmel rteslnk arrl, hogy a kevs sznnel br kpek szmra is ltezik
fjlformtum. A neve: Graphics Interchange Forrnat (grafikamegosztsi formtum), azaz
GIF. Ha egy kpet GIF formtumban mentnk, figyelmeztetst kaphatunk, miszerint
az eddig klnll rtegeket a programunk eggy laptja, illetve a paletts formtumba
1 O. ra
1165
val talakts miatt cskkenni fog a kp szneinek szma. Nos, ezek a GIF formtum
miatt szksges talaktsok- mint az a 10.7. brn is lthat. A prbeszdablak arra
szlt fel, hogy vegyk tudomsul az elzekben emltett vltozsokat, s amelyek
ezutn a mentsi folyamat rszeknt meg is trtnnek. Ne aggdjunk, ha egyelre nem
teljesen rtjk a belltsi lehetsgeket, de sznjunk idt arra, hogy elolvassuk, amit
az alkalmazsunk sgfjljban a rtegekrl, illetve a sznpaletts kpekrl tallunk.
Jegyezznk meg annyit, hogy a GIF formtumot olyan kpekhez szntk, amelyekben
nagyobb egyszn foltok vannak- azaz weboldalak cmsvjai, vagy ms, rajzolt kpek
-a fnykpekhez azonban messze nem idelis.
ExportFile
Your image should be exported betore it can
be saved as GIF for the follawing reasons:
GIF plug-in can only hondie grayscar.. or ind""ed JNges
0
jeanvert to lndexrd using default settings

(Do it manuaUy to tunc the resuft)
Convert to Grayscale
The o-port CQ'Jvmion won t modi/y yovroriginal imogr.
l::!elp
!gnore.
ll
pport
ll
{ancel
10.7. bra
Amikor egy kpet GIFformtumban mentnk, esetleg figyelmeztetst kapunk, hogy gy
indexelt sznpaletts kp jn ltre
Tovbbi, a jelentsebb webbngszk mindegyikben tmogatott fjlformtum a PNG.

Mg a GIF formtum egyetlen tltsz szn hasznlatt tmogatja - ahol aztn majd
a weboldal szne vlik lthatv -, a PNG formtum tovbblp: itt az tltszsg kln
bz fokozatait adhatjuk meg.
,
Atltsz kpek hasznlata

Tallkozhattunk mr olyan weboldalakkal, amelyek a trolikban httrsznt, illetve
httrkpet hasznltak, de olyan kpek is voltak bennk, amelyek egyes rszein
lthatv vlt a httr. Az iJyen esetekben az ell lv kp egyes rszei tltszk voltak,
de az egybknt mindig tglalap alak kp resen maradt rszei nem ltszottak.
Sok esetben remek alkalom nylik az ilyen rszlegesen tltsz kpek hasznlatra, ha
a rajzaink egyszeren jobban nznek ki kzvetlenl az alkalmazott httrszn, illetve
httrkp eltt.
166
Ha egy kp egy rszt tltszv szeretnnk tenni, akkor vagy GIF, vagy PNG formtum
ban kell mentennk. Ahogy az ra korbbi rszben mr szltunk rla, a legtbb GIF
formtumot tmogat alkalmazssal egy sznt tehetnk tltszv, a P G formtum
esetben azonban az tltszsg klnbz fokozatairl lehet beszlni. A PNG form
tum fknt a tbbfle tltszsg okn tekinthet jobbnak a GIF-nl. A legfrissebb
webbngszk mostanra mind kpesek a P G formtum kezelsre. A P G kpform
tumrl a http: l /www .libpng. org/pub/png/pngintro. htmlweboldalon tudhatunk
meg tbbet.
Az tltsz kpek ltrehozsa sorn alkalmazott eljrs a hasznlt kpformtumtl
(GIF vagy P G), illetve a ltrehozsra hasznlt grafikai alkalmazstl fgg. Segtsget
a grafikai alkalmazsunk sgfjljaiban tallunk, de az is megfelel megolds, ha
valamelyik internetes keresvel az tltsz kp ksztse [ide az alkalmazsunk neve
kerl] kifejezsre (vagy angolul a transparent image kifejezsre) keresnk.
Mazaikes httr kialaktsa

Brmelyik GIF vagy JPEG formtum kp alkalmas arra, hogy egy trolelem htter
nek alkotja legyen. Mindazonltal, mieltt hozzltnnk a mazaikszer httr- kl
nsen egy mintagazdag mozaikos httr- kialaktshoz, gondolkodjunk el azon,
hogy mennyiben gazdagtja egy ilyen httr a webhelynk nyjtotta lmnyt. St ami
taln mg fontosabb: gondolkodjunk el azon is, hogy az oldal szvege mennyire lesz
knnyen olvashat egy ilyen httr eltt.
Ha felidzzk az ltalunk nap mint nap megltogatott webhelyeket, rbredhetnk,
hogy nem tl sok hasznl ismtld kpekbl ll mints, az egsz oldalra kiterjed
htteret. Ha a bngsznkkel kizrlag cgek, termkek, sportegyesletek, illetve ms,
fknt informciszolgltat cllal ltrejtt- azaz szvegkzpont - webhelyekre
szaktunk elltogatni, akkor a mintzott htter weboldalak arnya tovbb cskken.
Br a webhelynket olyann alaktjuk, amilyenn csak akarjuk, ha a cgnk
weboldalnak elksztsrl van sz, esetleg rdemes lemondani a sznes szveg
mgl riktan kitn httrrl.
Ha mgis az egsz webhelyre kiterjeden egy ismtlel kpekbl ll mints httrkp
hasznlata mellett dntnk, ne feledjk, hogy az ilyen httr akkor nz ki a legjobban,
ha nem ltszik, hogy ismtldik rajta a kp. Ms szva!: akkor lehetnk biztosak abban,
hogy megfelel kpet vlasztottunk, ha a kp alja szrevehet tmenet nlkl folytat
dik a tetejben, s az egyik olelala a msikban.
A 10.8. s a 10.9. bra egyarnt mozaikos htter webhelyet mutat be. A httrkp sajt
magba trtn tmenere mindkt esetben szrevehetetlen, az sszhats mgsem
ugyanaz.
1 O. ra
Kpek kszftse webes hasznlatra
f167
10.8. bra
A httrkp hatrai nem ltszdnak, mgis tudjuk, hogy ismtld mintzatot ltunk,
ugyanis hat egyforma alak alkotja a htteret
Background Tile Example (Better)

This is a piec.e ofblack 1ex1 0\U aliod baclcground.
This lig!lly coiQ(ed, &p!dy potteroedbeckground "not so bad. ;r}vire going fe< a certain look (old
paper. in this instance)
Lorem ipsum dolo.-,.;, omet. coosec<tu< apisciog elit. Fusce mauris erat. accumsan quis r-i>us od.
molestie,. o<io. Proio id 1ao<tt< nisi. 1auris virae elit libero, eu imper&t felis. Pelleatesquhed sapoea a
wna pretium porta sit amet eget tortor. \' "ll!puaate arcu. eu \."estibulum: risus gravida non.
NuDa mallis purus -ue libero t<mpar nec pretiom llUDC bianclit Suspensse risus aote,luctns sed aJ;quet et,
tiocidunl ut justo. Pbaselus ooo dich>n tonor PeBeutesque sit omet purus o<io. Quisque oliquet lris1ique
quam. a consequar sem tristique ac. Praesent eu sem et urna faucibus tristique eu eget c.ci.. )&uis iacuis
odio pomir<>< loo piaemil cursus. ..,......,. bibendum adipisciog nibb nec '-.bio:ula. iorbi - a.gue,
malesuada eu &mg;l1a quis, comeetetur nec telus. Aliquam in aula mi. eu scel<risque vdit
10.9. bra
A httrkp hatrai ezttal sem ltszdnak, s nem is feltfin, hogy ismtldik a kp
A ll. rn megtanuljuk majd, hogyan helyezhetjk el a httrkpeket trolelemekben.
A mai rn elmondott minden figyelmeztets ellenre lesznek olyan helyzetek, amikor
a httrkpek a webtervezi eszkztrunk hathats eszkzeiv vlnak - ele nem egsz

oldalra kiterjeel httrknt

Ha mindenkppen mozaikos htteret szeretnnk, de sehogy sem sikerl a kvnt
mintzat kialaktsa, keressk fel az Interneten tallhat tbb szz, szabadon
hasznlhat httrkpeket ajnl weboldal valamelyikt Az ilyen webhelyeken
tallhat kpek-br profi grafikusok munki -vagy ingyenesek, vagy igen olcsk.

A GIF formtum hasznlatval olyan animcik ksztsre is lehetsgnk nylik,
amelyekkel brmelyik weboldalt feldobhatjuk Az animcit tartalmaz GIF kpek
sokkal rvidebb id alatt tlthetk le, mint a hasonl cl mozgkp-, illetve multim
dis fjlok. Animlt GIF fjlok gy kszthetk a GIMP segtsgve!, hogy tbb rteget
is ltrehozunk a kpen, s a fjl mentsekor mdostjuk az Animated GIF belltsokat.
Ha pedig mris megvan az animlni kvnt kpsorozat, hasznljuk a Gickr ingyenes,
web alap, animlt GIF fjlok ksztsre sznt szolgltatst
(ht tp: l /www. gickr. com/}

A GIF animci elksztsnek els lpseknt az egyms utn megjelenteni kvnt
kpeket- vagy rtegeket, a hasznlt alkalmazstl fggen - kell elksztennk
Az egyes kpek lesznek az animci
kpkocki. Br az angol szakirodalomban ezekre
a kpkockkra ugyangy a "frame" nvvel hivatkozunk, mint a keretekre, amelyekkel

a 13. rn fogunk megismerkedni, a kettnek semmi kze egymshoz. A kpkockkra
gy kell gondolnunk, rnint azokra az llkpekre, amelyekbl a filmek, illetve rajzfilmek
kszlnek. A monitoron megjelen mozgs az egyes nll kpek kztti parnyi
eltrsek eredmnye. Ha mr kigondoltuk, hogy rni lesz az egyes kpeken, az animci
elksztse viszonylag egyszer( - a tervezs folyamata okozza a legf6bb nehzsget
Sznjunk kis idt arra, hogy a forgatknyvekhez hasonlan felvzoljuk a kpkockkat,
fleg akkor, ha az animci nem csak nhny kpkockbl ll majd. Ha mr kigondol
tuk, hogy a kpkockk miknt kapcsoldnak egymshoz, akkor vagy a pr sorral korb
ban emltett Gickr szolgltatssal kszthetjk el az animcit, vagy olvassuk el a grafikai
alkalmazsunk lersnak idevg rszt, s ismerkedjnk meg az animcik kszts
nek mdjval.
sszefoglals
A mai rn a kpek webes hasznlatra trtn elksztsnek alapjaival ismerkedhet
tnk meg. Ha mst nem is, azt biztosan megrtettk, hogy igen sszetett tmakrrl
van sz, ahhoz pedig biztosan elegend volt a tananyag, hogy tvgygerjesztl
szolgljon. A mai ra pldiban a npszer (s ingyenes!) GIMP alkalmazst hasznltuk,
de termszetesen lehetsgnk van egy neknk jobban tetsz programot vlasztani.
1 O. ra
Kpek kszftse webes hasznlatra
1169
Megtanultunk kpet krlvgni, trnretezni, sznkorrekcit vgrehajtani rajta, s

megismerkedtnk nhny fjlformtummal is. Sok meggondolnivalnk van, ha
a weboldalainkat kpekkel kvnjuk gazdagtani - tbbek kzt a kp mrete, felbontsa,
az tltszsg hasznlata, illetve az animlt GIF kpek s az ismtld elemekbl
ptkez mozaikos htterek elhelyezse.
Krdezz-felelek
K:
Nem okosabb-e ahelyett, hogy ezt a sok mindent megtanulnm, kiadni az oldal
V:
E knyv rjnak nincs egyszer dolga, ha vlaszolnia kell a krdsre.
tervezsi munklatait egy szmtgpes graf

. ikusnak?
A hezitlsnak pedig nem az az oka, hogy az r maga is egy webfejleszt s

-tervez cgnl dolgozik, s gy az ll rdekben, hogy a szakosodott cgek fog
lalkoztatsr javasolja. Ez azonban nem mindig a legjobb megolds. A feladatot
egy grafikusnak kiadni idbe s pnzbe kerl. Ezen fell sok az olyan szmt
gpes grafikus, aki nem webes clra kszti a grafikit - gondoljunk csak
a nyomtatsra sznt grafikkra, amelyek egszen msok, mint az Internetre
kszlt trsaik. St egy magt grafikai terveznek vl egyn nem felttlenl br
a mi ignyeinknek megfelel grafikai tetvez minden kpessgveL Ms szval,
lehet, hogy remekl megtervezi a webhely grafikai elemeit, de annyira nem
remekel tartalomfejlesztknt, vagy csak kevss rt a HTML-hez s a CSS-hez.
Ha a webhelynk egyszer szemlyes webhely, akkor a r kltend pnznek
knnyen tallunk jobb helyet is. Ha azonban egy cget, egy termket, egy
iskolt, vagy brmi ms olyasmit kpvisel a webhely, aminek a sikere fgg
a rla kialakult kptl, megtrlhet, ha idt (s pnzt) sznunk arra, hogy egy
hozzrt webtervezre bzzuk a teendket.
K:
Mr ksztettem nyomtatsra sznt kpeket. A webes clra kszl kpek

esetben van valami eltrs?
V:
Van bizony. A webes kpeknl sok, a nyomtatott kpekkel kapcsolatos szablyt

flre kell tennnk. A webes kpek esetben az alacsony felbontst szeretjk,
mg a nyomtatsra sznt kpeknl igyeksznk a lehet legmagasabb felbonts
sal dolgozni. A szmtgp monitorn feketre rajzolunk fehrrel, mg a papron
a fehr httrre kerl a fekete rajz. Ha sok nyomtatott grafikt ksztettnk mr,
akkor igencsak figyelnnk kell arra, hogy ne vljunk a szaksaink rabjv.
K:
Ha van egy WindowsAVI formtum mozgkpem, tudok belle GIFformtu
V:
Igen. Mindssze annyi a dolgunk, hogy egy alkalmas programmal, pldul
m animcit kszteni?
az Animation Shoppal nyitjuk meg az AVI fjlt. A program lehetsget ad

a kpkockk szmnak cskkentsre. Ha a kszl fjl mrett elfogadhat
szinten kvnjuk tartani, elg, ha csak minden harmadik kpkockt hasznljuk
a mintavtelezshez. A 12. rn azt is megbeszljk, hogyan illesztl1etjk be
egy weboldalba magt az AVI fjlt.
170
l Tanuljuk meg a HTML s a CSS haSZ11latt 24 ra alatt
Ismtls
Ismtl krdsek
1.
Lapolvasval beolvasunk egy lrl kszlt fnykpet. Mekkora legyen a kp,

ha egy weboldalon kvnjuk elhelyezni? Milyen fjlformtumban rdemes
mentennk a kpet?
2.
A cgnk emblmja egy fekete Z bet, mgtte egy vrs krrel. Mekkora
mretben rdemes megrajzolnunk, illetve beolvasnunk? Milyen formtumban

mentsk a kpet, ha a weboldalunkon is hasznlni szeretnnk?
3.
zlettrsunk egy rszletgazdag, stt, erdei lombkorona kpt szeretn

a cgnk webhelyn httrknt hasznlni. Vastag fehr betkkel szeretn rni
a szveget. Mit tegynk?
Vlaszok
1.
A kp mrete a kp fontossgtl fggen100
40 kpponttl 300
x120
kppon
tig vltozhat. A legalkalmasabb formtum a JPEG, nagyjbl 85o/o-os tmrtsi

arny mellett. Termszetesen az is megolds, ha csak egy blyegkpet helyeznk
el, s arra kattintva nylik meg az oldalt kitlt nagysg kp. A kvetkez rn
tanuljuk meg, hogy rniknt lehet kpeken hivatkozst elhelyezni.
2.
Egy ngyzet alak emblma szmra ltalban krlbell100
100 kppontnyi
terlet szksges, de egy ennyire egyszer grafika igen jl tmrthet, gy hasz

nlhatunk 300
300 kppontos vagy akr ennl is nagyobb kpet. Figyeljnk
arra, hogy a sablonunkban meglegyen a kp szmra szksges hely, rnivel ez

egy elg nagy ngyzet. A kpet rdemes sznpaletts GIF kpknt mentennk,
ugyanis nagyon kevs szn tallhat benne.
3.
Megtagadjuk a krst, s tbb nem engedjk beleszlni a cg arculattervnek

alaktsba.
10. ra
f171
Gyakorlatok
Ha van cges - vagy szemlyes - fnykpalbumunk, keressnk benne olyan

kpeket, amelyek jl mutatnnak a webhelynkn. Olvassuk vagy olvastassuk
be ket lapolvasvaL Az gy ltrehozott digitlis kptr mindig jl jhet, ha
kpek kellenek egy weboldalra. Ha digitlis kamerval kszlt fnykpeink is
vannak, termszetesen nem kell a beolvasssal bajldnunk, azonnal hozz
foghatunk a kpek webes hasznlatra trtn elksztshez.
Mieltt a fontos, cges weboldalunkhoz nylnnk, prblkozzunk a szemlyes

honlapunk megszptsvel. gy lehetsgnk nylik a GIMP - vagy az ltalunk
vlasztott egyb alkalmazs- hasznlatnak elsajttsra, s a munkahelynkn
mr minden gy fog menni, mint a karikacsaps.
11. RA
A lecke tartalma:
Lers mellkelse a kpekhez
Kp szlessgnek s magassgnak megadsa
Kpek igaztsa
Httrkpek hasznlata
Kptrkpek ksztse
A 10. rn megtanultunk olyan digitlis kpeket keresni, illetve kszteni, amelyeket
felhasznlhatunk a webhelynkn. A mai rn lthatjuk, hogy rnilyen egyszer

az emltett kpeket elhelyezni a weboldalainkon. Ezen az rn megismerkednk
a HTML nyelv kpek elhelyezsre s lersra szolgl elemeivel, a kpek igazts
nak mdjval, s megtanuljuk, hogy tniknt hasznlhatjuk a kpeket hivatkozsknt,
illetve ms tartalomhoz vezet "trkp" gyannt.

nll feladat
Kpek elksz/tse a webhelynkn trtn hasznlatra
Mr most ksztsnk el kt-hrom olyan kpet, amelyeket az rn tanultakat kvetve
elhelyezhetnk a sajt weboldalainkon. Ha van mr kznl nhny GIF, PNG vagy
JPEG formtum kp (a fjlnevek vge .gif, .png vagy. jpg), akkor hasznlhatjuk
azokat. Az elz rn elkszlt kpek is megfelelnek erre a clra.
Az olyan keresszolgltatsok, mint a Google, igazi aranyhnynak bizonyulhatnak,
hiszen a segtsgkkel szmtalan, a keresett tmval kapcsolatos oldalhoz juthatunk el.
A keresoldalak segtsgvel tovbb rengeteg olyan oldalra lelhetnk, amelyek ingyen
vagy igen olcsn hasznlhat mdiagyjtemnyeket knlnak.
e feledkezznk meg
a Microsoft sok-sok kpet s multimdis fjlt tartalmaz

http: lloffice.microsoft. comleliparti webhelyrl sem. rtkes forrs a Google
Images (http: llimages.google.coml) s a Flickr (http: l lwww.flickr.coml)

webhely is. Keressnk olyan Creatve Comrnons felhasznlsi engedty kpeket,
amelyek a szerz megjellsvel szabadon felhasznlhatk.

A webkiszolgl, a webbngsz, s a vgfelhasznl szempontjbl nincs jelent
sge, hogy hol helyezzk el a kpeket, amennyiben mi magunk tudjuk, hol vannak,
s a HTML-kdban helyes elrsi utakat adunk meg.
Ha kpet szeretnnk elhelyezni egy weboldalon, akkor az els dolgunk az legyen,
hogy a knnyebb tlthatsg vgett a kpet thelyezzk a HTML-fjlt tartalmaz
knyvtrba vagy egy Images (Kpek) nev mappba. A szvegben ahhoz a rszhez
rve, ahol a kpet ltni szeretnnk, helyezzk el az albbi HTML-elemet.
A royimage. gif nv helyett termszetesen a sajt kpnk fjlnevt kell megadnunk.
<img
src="myimage.gif" alt="My
Image" />
Ha a weboldalakat trol knyvtron (a dokumentumgykren) bell ltrehozott

kpknyvtrba tettk a kpet, akkor az albbi sort kell rnunk:
<img src="/images/myimage.gif" alt="My
Image" />
Az XHTML-weboldalak az <img 1 > elemben mind az src, mind az alt jellemz hasz
nlatt megkvetelik. Az src jellemz a kpfjl megadsra szolgl, az alt jellemz
rtkeknt pedig a kp lerst adhatjuk meg - ez utbbira akkor van szksg, ha
a felhasznl nem ltja a kpet. Az alt jellemzrl bvebben a Kpek szveges lersa
cm rszben olvashatunk.
11. ra
Az
<img l>
Kpek hasznlata a webhelyen 175
elemben megadhat a title (cm) tulajdonsg is, ami szintn a kp
szveges lerst tartalmazza. Az alt jellemztl eltren azonban a title jellemz

clja a kpnek egy olyan lerst megadni, amelynek az olvasjrl felttelezzk,
hogy ltja a kpet. Az alt jellemz fontosabb clt szolgl. s fknt akkor mutatko
zik meg a jelentsge, amikor a kp nem ltszik - pldul amikor egy vak felhasznl
kpernyolvas alkalmazssal .. tekinti meg" a weboldalunkat Br a kett kzl csak
az alt jellemz hasznlata ktelez, mgis, ha a kpeink lersa fontos a szmunkra,
rdemes az alt mellett a title jellemznek is rtket adnunk.
Az <img l> elem hasznlatt a 11.1. plda szemJlteti. A weboldal tetejn - mg

a szveget tartalmaz bekezds eltt - elhelyeztnk egy kpet. Ha a bngsznkben
megnyitjuk a 11.1. pldban kzlt HTML-fjlt, akkor az automatikus betlts utn
a manitorunkon a 11.1. brn is lthat kp jelenik meg.
11.1. plda
Kp elhe{vezse a
weboldalon
az
<imgl> cmke segitsgvel
<?xml version""1.0" encoding="UTF-8"?>

<!DOCTYPE html PUBLIC "-I/W3C//DTD XHTML 1.1//EN"
<head>
<title>A Spectacular Yosemite View</title>
</head>
<body>
<h1>A
Spectacular
Yosemite View</h1>
<P><img src="hd. jpg" alt="Half

<p><strong>Half
Park,
Dome"
!><Ip>
Dome</strong> is a granite dome in Yosemite National
located in northeastern
Mariposa
County,
California,
at the
eastern end of Yosemite Valley. The granite crest rises more than
4,737 ft
(1,444 m)
<P>This particular
above the valley floor.</p>

view is of Half Dome as seen from Washburn
Point.<IP>
._
</body>
</html>
Elvileg brmely webhelyrl szrmaz kpet be tudunk illeszteni a sajt oldalainkba.

Minden olyan alkalommal, amikor valaki megnzi az oldalunkat. a kp a msik
webhely kiszolgljrl rkezik. Ezt megtehetjk, de jobb, ha nem tesszk. Nemcsak
azrt, mert nem szp dolog msok svszlessgt sajt clra hasznlni, de az sem
kizrt, hogy a weboldalaink gy lassabban tltdnek be. Ezen fell pedig semmilyen
beleszlsunk nincs a kp megvltoztatsba vagy trlsbe.
Ha engedlyt kapunk arra, hogy egy msik webhelyen megjelent kpet elhelyezznk
a sajt oldalunkon, mindig tltsk t a kp msolatt a sajt szmtgpnkre, s
az <img src="http: llwww. msik_kiszolgl.comlkls_kp. jpg" l>
176
hivatkozs helyett mindig a helyi, <img src=" sa j t_kp. jpg" /> hivatkozst
hasznljuk. Az elz tancs persze nem vonatkozik azokra az esetekre, amikor
a kpeinket-pldul a fnykpeinket- olyan kls kiszolgln troljuk, amelyet
ppen ilyen clra lltottak fel. Ilyen szolgltatst nyjt pldul a Flickr
(ht tp: 1 /www.flickr.com/). ahol- az ilyen szolgltatsoknl megszekott mdon
-pontos, a szolgltat webkiszolgljnak cmt tartalmaz URL-t is kapunk az egyes

kpekhez.
Batr Dome 11a tpnil:e domc ln Yoscaite XlilioDal Pak. kN:.atediD ocxtbetitem Coaary,
Caif'onu, at Ibe eastem cad o(Yoscmr:e Vdey. The p-We ac."st nses me lhaa 4 ,3':' ft (1.144 lbo\e
lbe\Wytloar
11.1. bra
Amikor a webbngsz betlti a 11.1. pldban kzlt HTML-fjlt, a bngszablakban
a hdjpg kp jelenik meg
Idkzben rjhettnk, hogy az img az image, azaz a kp sz rvidtse, az src pedig
a source, azaz a forrs sz, s a kpfjl helyre hivatkozik. Ahogy a knyv korbbi
rszben mr sz volt rla, a kpeket mindig nll fjlban, a szvegtl elklntve
troljuk, hiba tnik a bngszben megjelentve az oldal rsznek.
Ahogy a hiperhivatkozsok megadsra szolgl <a href> crnkben, az <img />cmke
src jellemzjben is brmilyen teljes internetes cm megadhat. A msik lehetsg,
hogy ha a kp s a HTML-fjl egy mappban tallhat, csak a fjlnevet adjuk meg.
Termszetesen viszonytott (relatv) cmeket is hasznlhatunk, pldul:
/images/birdy. jpg vagy .. /smiley. gif.
11.
ra
Kpek hasznlata a webhelyen f 177
Kpek szveges lersa

A 11.1. plda <img />eleme tartalmaz egy rvid szveges lerst is, az alt="Half
Dome "-ot. Az alt szcska az
a/ternate text,
azaz
helyettestszveg kifejezs rvidtse.
Ez a szveg akkor jelenik meg, ha a kp nem tltdik be. A kp be nem tltdsnek

oka lehet egy hibs cm, de a felhasznl is kikapcsolhatta a bngsz belltsai kztt
a kpek automatikus betltst- s az is lehet, hogy a kp az internetkapcsolat lasssga
Iniatt nem rkezett mg meg a gpre. A 11.2. brn a kp helyn megjelen, az alt
jellemzben trolt szveget figyelhetjk meg.
r.-A lar Yosemit Vtew- Moz:llla Firefax

ffH
C>
t @""li!iil
fJt Y"-.o Hittory &ookrmtb looG .t:l.elp
http://www.yourdomam.com/shawimaqe_noalt.ht:ml
.. .
A Spectacular Y osemite View

Half'Dome
BalfDome is a gnmite domein Yosemile National Pittk.located in noctbeastem Maripasa County,
Calfomia. al the eastem eod of Yosemile VaD.ey. The granit:e crest rises more tban 4,737 ft (1,444 m)
above the '*Y Boor-.
This particu1a:r 'iew is ofHalf as
seen &om
\Vasbburn PoioL
Done
11.2.
bra
A Jelhasznlk
az alt jellemzben trolt szveget ltjk, ha a kp nem tltdik be
Ha az egrmutatt a kp fl visszk, az alt jellemz szvegt ltalban mg

olyankor is lthatjuk egy kis mezben (a mez neve
eszkzlers,
angolul
tooltip),
ha
a kp teljesen betltdtt, s megjelent a bngsznkben. Az al t jellemz szvege

segt a rosszul lt vagy ms okbl kpernyolvast hasznl felhasznlknak is.
A weboldalaink minden kphez meg kell adnunk az alt jellemz szvegt, mgpedig
arra a sokfle lehetsges helyzetre gondolva, amikor ez a szveg a felhasznJk szeme
el kerlhet. ltalban az a legokosabb, ha rviden lerjuk a kpet, a weboldalak ksz
ti azonban sokszor hirdetst vagy humoros gondolatokat helyeznek el a kp alt
jellemzjben- br a tl sok, az informci helyt elfogJal humorizls esetleg nem
nyeri el mindenkinek a tetszst. A kicsi vagy jelentsggel nem br kpek esetben
nagy a ksrts a helyettest szveg elhagysra, de az <img 1>elemben ktelez
178
az al t jellemzt megadni. Ha elhagyjuk, attl mg az oldal hibtlanul megjelenik, de

megsrtjk az rvnyben lv XHTML-szabvnyt. A szerzk gy azt tancsoljk, hogy ha
tnyleg nem akarunk semmit belerni - ilyen lehet pldul a kis dsztelemek kpeinek
esete-, akkor adjuk meg a jellemzt resen hagyva (alt=" " ).
Az <img l> elemben a title jellemzt nem ktelez megadni, holott a szerepe az alt
jellemzhz igen hasonl. St ha mindkt jellemznek van rtke, akkor az eszkzle
rsban a title jellemz rtke jelenik meg. Ennek a tnynek az ismeretben a kpek
szveges lersakor a legokosabb rnind az alt, m.ind a title jellemznek rtket
adnunk- valami olyasmit, ami szeriotnk abban az esetben is megfelel, ha az eszkz
lersban olvassk el, s akkor is megllja a helyt, ha kpernyolvasval olvassk
az oldalunkat.
A kp szlessgnek s magassgnak megadsa

Minthogy a szveg a kpeknl lnyegesen gyorsabban utazik az Interneten, a legtbb
webbngsz a szveget a kpeket megelzen jelenti meg. gy a kpekre vrva van
rnit olvasnia a ltogatnak, s az az rzse tmad az embernek, hogy az oldal gyorsab
ban tltdik be.
Ha biztosak szeretnnk lenni abban, hogy az oldalunkon minden annyira gyorsan
jelenik meg, amennyire csak lehet, s radsul a megfelel helyen, akkor adjuk meg
az egyes kpek magassgt s szlessgt. gy a bngsz az oldal felptse kzben s
a kp betltdsre vrva azonnal a megfelel mret helyet tudja lefoglalni a kpnek.
A weboldalainkra kerl egyes kpek pontos, kppontban kifejezett szlessgt s
magassgt a grafikai alkalmazsunk segtsgvel tudhatjuk meg. Az is elkpzell1et,
hogy az emltett tulajdonsgokat az opercis rendszernk eszkzeivel is kiderthetjk.
A Windowsban pldul a kp szlessgt s magassgt gy llapthatjuk meg, hogy
az egr jobb gombjval a kpre kattintunk, az gy megnyl menbl a Properties
(Tulajdonsgok) pontot, majd onnan a Details (Rszletek) lehetsget vlasztjuk
Ha mr ismerjk a kp szlessgt s magassgt, az adatokat az albbiak szerint
helyezhetjk el az <img l> elemben:
<img src="sajt_kp.gif" alt="Fancy
Picture" width="200" height="l00"
A width jellemz a kp szlessgt, a height pedig a kp magassgt trolja.
A kp szmra megadott szlessg- s magassgrtknek nem kell megegyeznie

a kp vals szlessgvel, illetve magassgval. A bngsz a kpet az ltalunk
megadott mretv fogja kicsinyteni, illetve nagytani. Mindazonltal rendszerint
nem okos dolog a bngszk kptmretezsi kpessgeire alapoznunk, mivel ezen
a tren nem kifejezetten jk. Ha egy kpet kisebb mretben kvnunk megjelenteni,
akkor biztosan jobban jrunk egy kpszerkeszt program hasznlatvaL
l>
11. ra
f179
Kpek igaztsa
Ahogy a szveg oldalon belli igazrst meg tudtuk oldani, a kpek oldalon belli iga
ztsra is megvannak a megfelel eszkzeink. Nem csak vzszintes igaztsrl van sz;
a kpet fgglegesen is hozzigazthatjuk az t krlvev szveghez, illetve tovbbi
kpekhez.
Kpek vzszintes igaztsa

Ahogy az 5. rn megbeszltk, egy weboldal elemeit a <div style="text
align:center">, a <div style="text-align:right"> s a <div style="text
align:left"> cmkkkel igazthatjuk kzpre vagy a jobb, illetve a bal marg mell.
Ezek a stlusbelltsok a szvegre s a kpekre is hatssal vannak, st a <p> elemben is

hasznU1atk.
A kpek rendszerint - a szveghez hasonlan - a bal marg mell kerlnek, hacsak
a style= "text-align: center", illetve a style="text-align:right" tulajdonsggal

nem rendezzk ket kzpre vagy jobbra. Ms szvai, a text-align stlustulajdonsg
alaprtelmezett rtke a left, azaz a bal oldal.
A kpeket krbe is folyathatjuk a szveggel, ha a float (sztats) stlustulajdonsgot
kzvetlenl az < img l> elemben adjuk meg.
A float stlustulajdonsg sokkal tbb mindenre j, mint ami ezttal kiderlt rla, st
nem csak a kpek esetben hasznlhat. A float tletes hasznlatval igen rdekes
oldalelrendezsek alakthatk ki - mint az a knyv ksbbi rszben majd kiderl.
Spectaculat Voserrute VMMS- Moz:llla Fftfox
. c
&
"' __!;L.-
http:/1-.yourdomlingdlot.html
.. -
El Capitu is a 3,000-foot (910 m) "-mical rock formalion in Yosemile

National Park. k>cated oo the oorth sKk of Yosemire Valey, oear western
end The granile mouolithis one cL the wodd's fa\-orite chaknges forrock
c!Knbers. The formalion was named 'El Capitan' by the iariposa Battaion
wben it explored the '-alley in 1851
Tuuel Yiew is a \wpoiot oo State Route 4llocaled directly east ofthe
Wawooa T1lllllf!l a.s ooe enten YoR:Illite Vdey &-om tilt: south. The,oiew looks
east mto Yo,.",;,e \"aley the southwest face ofEl Capi!an. Half
Dome. and Bridalvl Falls. This is. to many. the first,i=s ofthe popular
att:ractioos in Yosemile
11.3. bra
A 11.2. pldban hasznlt
Don
kpigazts eredmnye
A11.2. pldban az <img style=" float: left" l> cmke az els kpet balra rendezi,
s engedlyezi, hogy a szveg krbevehesse a kpet. Ehhez hasonlan
az <img style="float: right" l> cmke jobbra rendezi a msodik kpet. Aszveg
ezttal is krbeveszi a kpet, csak most balrl. A11.3. brn a kt kpet tartalmaz
weboldal lthat. Akzpre igaztott kpeket nem szoks szveggel krbevenni, mivel
ilyenkor a szveg elhelyezse kiszmthatatlann vlik.
11.2. plda
Kpek elrendezse a webo/da/oz a text-align stlustttlajdonsggal
----------
<?xrnl version="1.0"
encoding="UTF-8"?>
<!OOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"

"http: l/www.w3.org/TR/xhtm1111DTD/xhtml11.dtd">
<html xrnlns="http://www.w3.org/1999/xhtml"
xrnl:lang="en">
<head>
<title>More
Spectacular
Yosemite Views</title>
</head>
<body>
<h1>More
Spectacular
Yosemite Views</h1>
<P><img src="elcap_sm.jpg" alt="El Capitan" width="100"

height="75"
style="float:left; padding:
Capitan</strong> is a 3,000-foot
(910
6px;"/><strong>El
m)
vertical rock
forrnation
in Yosemite National Park, located on the north side of Yosemite

Valley, near its western end.
The granite
world's favorite challenges for rock
monolith is one of the
climbers.
The forrnation was
named "El Capitan" by the Maripasa Battalion when it explored the

valley in 1851.</p>
<P><img src="tunnelview_sm.jpg" alt="Tunnel View" width="100"
height="80" style="float:right; padding:
View<lstrong>
is a viewpoint on
of the Wawona Tunnel as
one
6px;"/><strong>Tunnel
State Route
41 located
directly east
enters Yosemite Valley from the south.
The view looks east into Yosemite Valley inclucting the southwest face
of El Capitan, Half Dome, and Bridalveil
first views of the popular
Falls.
This is, to
many, the
attractions in Yosemite.</p>
</body>
</html>
Jl lthat egy kis res terlet a kp s a szveg kztt - egsz pontosan hat
kppontnyi a kp minden oldaln. Ezt- a 11.2. plda mindkt
<img 1 >
cmkjbe
bert- bels marg ( padding ) alkalmazsval rtk el, amelynek a hasznlatrl

rszletesebben majd a 13. rn tanulunk.
11. ra
Kpek fggleges igaztsa

Van gy, hogy egy szveget tanalmaz sor kzepre szeretnnk egy kicsi kpet beszrni,
vagy egyetlen sor szveget szeretnnk egy bra mellett feliratknt ell1elyezni. Mindkt
esetben j szalglatot tesz az az eszkz, amellyel a szveg s a kp fggleges helyzett
szabhatjuk meg. A kp aljval kerljn egy magassgba a szveg alja? Vagy a szveg
kzepnl legyen a kp kzepe is? Az emltett kettn kvl mg tovbbi lehetsgek is
addnak:
'
'l
vertical-align
bot tom
stlustulajdonsg tovbbi lehetsges rtkei a
top
(fent), s
(lent). A segtsgkkel a kpek a sorban lv szveget figyelmen kvl
hagyva rendezhetk egy adott elemsor legtetejre, illetve legaljra.

Ha a kp tetejt a vele egy sorban lv kpek, illetve betk legmagasabbiknak
tetejhez szeretnnk igaztani, akkor hasznljuk az <img style="vertical

align:text-top"
/>cmkt.
Ha a kp aljt szeretnnk a szveg aljhoz igaztani, az <img
Ha a kp kzept a vele egy sorban lv objektumok kzephez szeretnnk
style= "vertical-align:text-bottom"
/>cmkt rdemes hasznlnunk.
igaztani, akkor az <img style="vertical-align:middle" />cmke lesz

a segtsgnkre.
Ha a kp aljt a szveg betvonalhoz kvnjuk igaztani, az
<img style="vertical-align:ba seline"
/>cmkt hasznljuk.
A 11.3. pldban a fenti ngy lehetsg mindegyikt hasznljuk; az eredmny

a 11.4. kpen tanulmnyozhat. A pldban ngy blyegkpet rendeztnk egyms al,
a kpekhez tartoz szveg pedig a kpek bal oldalra kerlt. Az egyes kpeket, illetve
a hozzjuk tartoz szveget a vertical-align stlustulajdonsg klnbz rtkeivel
jelentettk meg.
11.3. plda
Kpek sztl(!ghez igaztsa a mrtical-align str1ustulajdonsgokkal

<!DOCTYPE
html PUBLIC
"-//W3C //DTD XHTML
1.1//EN"
<html
xmln s="http://www.w3.org/1999/xhtm1" xml:1ang="en">
<head>
<title>Small
But Mighty Spectacu1ar
Yosemite Views</title>
</head>
<body>
<h1>Small
But
Mighty
Yosemite Views</h1>
<P><img src="e1cap_sm.jpg" alt="El

height="75"
Capitan" wi dth="100"
style="vertical-align:text-top;"/><strong>El
182

Capitan</strong> is a
3,000-foot
(910 m)
vertical rock forrnation
in Yosemite National Park.</p>

<P><img src="tunnelview_sm.jpg"
alt="Tunnel View" width="100"
height="80" style="vertical-align:text-bottom;"/><strong>Tunnel
View</strong> looks east
into Yosemite Valley.</p>
<P><img src="upperyosefalls_sm.jpg"
width="87"
alt="Upper
Yosemite Falls"
height="l00" style="vertical-align:middle;"/><strong>Upper
Yosemite Falls</strong> are
1,430
ft and are among the
twenty
highest
waterfalls in the world. </p>

<P><img src="hangingrock_sm.jpg" alt="Hanging Rock" width="100"
height="75"
style="vertical-align:baseline;"/><strong>Hanging
Rock</strong>, off Glacier
Point, used to be a
popular
spot
for
people to, well, hang from. Crazy people.</p>

</body>
</html>
Ha az
elemben semmilyen
<img />
align
jellemzt nem adunk meg, a kp
a mellette lv szveg betvonalhoz igazodik. Ez annyit tesz, hogy

a
style="vertical-align:baseline"
tulajdonsgot soha nem kell
begpelnnk, hiszen alaprtelmezs szerint is ez a tulajdonsg rtke. Ha azonban

egy kpnl margt lltunk be, s azt szeretnnk, hogy a kp pontosabban igazadjon
a szveghez, akkor rdemes a
vertical-align
jellemznek a
bottom
rtket
adnunk. A 11.4. brn megfigyelhet, hogy a szveg a marg miatt egy kevssel
a kp al kerl- ez annak az eredmnye, hogy a
baseline
..
vertical-align
jellemz rtke
maradt.
:...,,
_____
Small But Mighty Yosemite Views

Capitu is a 3,000-fooc (910 m) ''<11icalrockfonnalion
;"
Yosem<e National Park.
View loolcs east into Yosemite Vdey.
11.4.
bra
A 113. pldban
Rock. otf Glacier Point. used to be a popular spot fO< people to, weil, bang 6-om.
Crozy people
hasznltfggle
ges kpetrendezsi
lehetsgek
11. ra
1183
nll feladat
Kfsrletezznk a kpek igazftsval!
Helyezznk el nhny kpfjlt a webhelynk oldalain, s ksrletezznk a text-align,

a vertical-align s a float tulajdonsg klnfle rtkeiveL Indulsknt me
egy gyors ttekints egy halat brzol kpzeletbeli kp (fish. jpg) elhelyezsrl
egy weboldalon:
1.
A fish. jpg kpet msoljuk abba a knyvtrba, ahol a HTML-fjl is tallhat,
vagy hagyjuk a jelenlegi helyn, s jegyezzk meg, hogy hol hagytuk.

2.
Talljuk ki, hogy hol legyen a kp, s egy szvegszerkesztvel rjuk az <img
src=" fish. jpg" alt= "Bright Orange Goldfish with Bulging Eyes" l>
kdot a HTML-fjl megfelel helyre.

3.
Ha a kpet kzpre szeretnnk igaztani, akkor az <img l> elem eltt helyezzk
el a <div style="text-align:center"> cmkt, mgtte pedig az elem lez
rsra szolgl <ldi v> kdot. Ha azt is szeretnnk, hogy a szveg krbevegye
a kpet, akkor az <img l> cmkt bvtsk a style=" float: right", illetve
a style= "float: left" kddal. Vgl, kzvetlenl az <img l> elemben adjuk
meg a vertical-align stlustulajdonsgot, ezzel lltva be a kp helyzett
a tbbi kphez, illetve a kpet krlvev szveghez viszonytva.
4.
Ha tudunk mg egy kis idt a ksrletezgetsre sznni, akkor prbljunk tbb,

klnfle mret kpet elhelyezni az oldalon, s prbljuk ki a fggleges
igaztshoz hasznlhat klnfle rtkek mkdst.

A ll. l. brt szemllve alighanem szrevettk, hogy az oldalon lv kp meglehetsen
nagy mret, ami a knyv pldjnl nem okoz gondot, de ha tbb kpet is el szeret
nnk helyezni az oldalon, akkor messze ll az idelistL Ilyen esetekben tbb rtelme
van kisebb, az adott kp nagyobb vltozathoz vezet hivatkozst tartalmaz blyegk
peket ltrehozni. Ha gy jrunk el, akkor a blyegkpek elrendezhetk gy, hogy
a ltogatk az oldal teljes tartalmrl kpet alkothassanak, br egyelre csak egy-egy
kisebb vltozatot ltnak az igazi (nagyobb) kpek helyett. A blyegkpek persze csak
az egyiket jelentik a sok lehetsg kzl - a kpeken elhelyezett hivatkozsokkal
sokflekpp feldobhatjuk az oldalainkat.
Ha egy kpbl kattinthat, ms oldalra vagy kpre mutat hivatkozst szeretnnk
kszteni, a szveges hivatkozsok ltrehozsakor mr hasznlt <a href> cmkt kell
hasznlnunk. A
11.4. plda a 11.2. pldban lv kd mdostott vltozatt tartalmazza.
Mr az elz vltozatban is benne voltak a blyegkpek, de a mostaniban a kpekre

kattintva betltdik az adott kp nagyobb vltozata. Szeretnnk a felhasznJk tudom
sra hozni, hogy a blyegkpre kattintva mi fog trtnni? Akkor munkra fel: a kpek
s a segt szvegek kerljenek egy-egy
<div>
cmkbe. Az eredmny a 11.5. brn
lthat.
11.4. plda
Blyegkpeken elhelyezett hivatkozsok hasznlata
<?xml version="l.O"
encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"

<html
xml:lang="en">
<head>
<title>More
Spectacular
Yosemite
Views</title>
<style type="text/css">
div.imageleft
float:left;
clear:
all;
text-align:center;
font-size:9px;
font-style:italic;
div.imageright
float:right;
clear: all;
text-align:center;
font-size:9px;
font-style:italic;
img
padding: 6px;
border:
none;
</style>
</head>
<body>
<hl>More
Spectacular
Yosemite
Views</hl>
<P><div class="imageleft">
<a href="http://www.flickr.com/photos/nofancyname/614253439/"><img
src="elcap_sm.jpg" alt="El Capitan" width="l00" height="75"/></a>
<br/>click
is
image
a 3,000-foot
Park,
located
end. The
for
rock
Maripasa
to enlarge</div><strong>El Capitan</strong>
(910
on the
granite
m)
vertical
north
side
monolith is
climbers.
The
forrnation
one of the
forrnation
Battalion when it
rock
in Yosemite
of Yosemite Valley,
was
world's
near
favorite
named "El Capitan"
National
its
western
challenges
by
the
explored the valley in 1851.</p>
<P><div class="imageright">
<a href="http://www.flickr.com/photos/nofancyname/614287355/"><img
src="tunnelview_sm.jpg"
height="80"/></a>
alt="Tunnel View"
width="lOO"
11. ra
<br/>click
a
image
viewpoint
Tunnel
on
as one
to
enters
Route
41 located directly east of the Wawona
Yosemite
Valley from the south.
inclucting
Half
Falls.
and
the popular
Kpek hasznlata a webhelyen 185
enlarge</div><strong>Tunnel View</strong> is
State
east into Yosemite Valley

Dome,
Bridalveil
attractions in
the
This
southwest
is,
to
many,
The view looks
face of
El Capitan,
the first views of
Yosemite.</p>
</body>
</html>
1=,@11 l:l l
&>
wwwlft'laglo::withlinks.html
-+ .
El Capita.a is a 3,000-foot (910 m)verbc:al rock. fonnatioo m Yosemile Nariooal

Park. located on the oorth sic!< of Yosemile Valley, near ils western end. The gnmile
mooolith s ooe of the wodd's favorite chaBeo.ges for rock c:!imbtts. The fOJ'Illaboo was
named 'El Capitan' by the Maripasa Ballaion wb<n it expln<ed the valleyin 1851.
Tuael View is a \poiol. oo State Route 4llocated direcdy east oftbe Wawona
Tunoel as one enters Yoscmite VaD.eyfrom the south. The view 1oolcs east ioto
Yosemire Volley incbding the soutbwestface ofEl Capitan, HalfDome, and Bridalvd
Falls Tbis is, to many, the first 'icws oftbe popula:r attractioos io Yosmtite.
11.5. bra
A hivatkozsknt hasznlt
co&.t-v-rr
blyegkpek sokat javtanak

a nagy kpeket bemutat
..,
weboldalak elrendezsn
A 11.4. pldban olyan stluselemeket hasznlunk, amelyeket rszletesebben a 14. s
a 15. rn ismertetnk majd, de a lnyeget alighanem most is ltjuk mr:
Az
<a>
cmkk felelsek a kis kpektl a nagyobb vltozathoz vezet hivatkoz
sok ltrehozsrt A nagyobb vltozatot ezttal kls kiszolgln-a Flickr

oldaln - helyeztk el.
<di v>
cmkket a blyegkp-kpfelirat prok elrendezsre, illetve nmi
bels marg kialaktsra hasznltuk.

Hacsak nem rendelkeznk msknt, a webbngsz egy sznes tglalapot rajzol
a kpekbl ltrehozott hivatkozsok kr. Ez a tglalap - a szveges hivatkozsokhoz
hasonlan-ltalban kk, ha mostanban nem ltogattuk meg a hivatkozs cljaknt
belltott oldalt; s ms szn, ha a stluslapon mst adtunk meg. Minthogy ritka
az olyan alkalom-ha van ilyen egyltaln -, amikor ezt az idtlen vonalat a hivatkozs
s alaktott kpeink krl ltni szeretnnk, ltalban rdemes a hivatkozsok belsejben
szerepl
<img />
pldban a
cmkkben a
border: none
style= "border: none"
kittel az
img
kdot elhelyeznnk. A fenti
elem stluslap-bejegyzsnek rsze, mivel
a stlust ktszer is alkalmazzuk.

Amikor a bemutaton pldaoldal blyegkpeire kattintunk, a bngsz a 11.6. brn
lthat mdon megnyitja a hivatkozott oldalt.
186 Tanuljuk meg a HTML s a CSS hasmlatt 24 ra alatt
flickr
Home
You
Organlze
Contacts
Groups
Explore
El Capitan from Valley Floor
a UlMJadltd
on JUI 24 2007
byicmekHli
- jemelonl's photostream
Thjs photo also belongs to

-
ose""Jte 06
7 \::;et.
2
Tags
11.6. bra
Ha a hivatkozsknt hasznlt blyegkpre kattintunk, megnylik az az oldal, amelyre
a hivatkozs mutat
Httrkpek hasznlata
Ahogy az elz rn megtanultuk, a httrkpek a trolelemekben egyfajta "taptaknt"
hasznlhatk, azaz mind a szveg, mind a tbbi kp a httrkp eltt jelenik meg.
Az albbiakban ismertetjk a httr kialaktsrt felels stlustulajdonsgokat:
background-color: Az elem httrsznt adja meg. Br a kpek tmakrhez
nincs kze, a httr kialaktsban ez a tulajdonsg is szerepet kap.
background-image: Az elem htterl hasznlni kvnt kpet adhatjuk meg
background-repeat: A kp ismtldsnek mdjt adjuk meg ezzel a tulajdon
vele. Hasznlatakor az url ( 'kpnv. gif' ) utastsformt kell kvetnnk

sggal, mghozz vzszintes s fggleges irnyban is. Alaprtelmezs szerint
azaz, ha nem adunk meg semmit - a httrkp vzszintes s fggleges irnyban
egyarnt ismtldik. A tovbbi belltsi lehetsgek: repeat, azaz ismtls
(a hatsa megegyezik az alaprtelmezett viselkedssel), repeat-x (vzszintes
ismtls), repeat-y (fggleges ismtls) s no-repeat (nincs ismtls).
11. ra
1187
background-position: Azt adja meg, hogy a troljhoz kpest hov kerl
a kp. A lehetsges rtkek: top-left (bal fels sarok), top-center (fell

kzpen), top-right (jobb fels sarok), center-left (baloldalt kzpen),
center-center (kzpen), center-right (jobboldalt, kzpen),
bottom-left (bal als sarok), bottom-center (lent kzpen), bottom-right
(jobb als sarok), illetve bizonyos kppontban vagy szzalkban kifejezett

helyzetek.
A httrkp megadsakor a fenti belltsok egy sorba kerlnek, egyetlen tulajdonsgot
alkotva. Valahogy gy:
body
background:
#ffffff url('kpnv.gif')
no-repeat top right;
A fenti stluslap-bejegyzsben a weboldal body eleme fehr lesz, a kpnv. gif nev
fjl pedig a httr jobb fels sarkba kerl.
A background tulajdonsg arra is j, hogy rendezetlen listkhoz sajt felsorolsjelet
adjunk meg. Ha kpeket szeretnnk felsorolsjelknt hasznlni, akkor az els dolgunk,
hogy az abbiak szerint adjuk meg az <Ul> elem stlust:
ul
list-style-type:
padding-left:
margin-left:
none;
O;
O;
Ez utn az albbi kdot kvetve adjuk meg a <li> elem stlust:

li
background:
url(mybullet.gif)
left center no-repeat
Bizonyosodjunk meg arrl, hogy a mybullet. gif fjl- illetve, ha ms nevet adunk
a felsorolsjelet tartalmaz kpnek, akkor az -a webkiszolgln van, s letlthet.
Ha gy van, akkor az alaprtelmezett teli karika felsorolsjel a megadott kpre cserldik.
A httrrel kapcsolatos belltsokat megad tulajdonsgokhoz a kvetkez leckk
sorn mg visszatrnk, amikor mr teljes oldalrendezseket fogunk CSS-ben megadni.
1BB
I Tanuljuk meg a HTML s a CSS hasznlatt 24 ra alatt
Kptrkpek ksztse
Elfordul, hogy tl akarunk lpni az egyszer, nyomgombos vagy hivatkozsokra
pl, a webhelyeken gyakran ltott navigcis megoldson, s a webhelynk kln
bz oldalaira egy kp segtsgvel szeretnnk eljutni. Pldul elkpzelhet, hogy van
egy orvosi informcikat tartalmaz webhelynk, s egy emberi test kpbl szeret
nnk a klnfle testrszekrl szl oldalakhoz hivatkozsokat kialaktani. Vagy lehet
egy olyan, vilgtrkpet mutat webhelynk, ahol a felhasznlk az egyes orszgokkal
kapcsolatos tudnivalkat az orszg kpre kattintva rhetik el. Egy kpet feloszthatunk
klnbz rszekre, s az egyes rszekkel hivatkozhatunk a megfelel weboldalakra attl fggen jutunk ide vagy oda, hogy a kp melyik rszre kattintunk. Ezt a megol
dst nevezik kptrkpnek (irnagemap). Kptrkp brmilyen kpbl kszthet.
Team
u '
.....
ta
Partners
Corporate and Foundation Partners
- Partners
n;
BAWSI's ...ori
ould not be pcs.s.ble lllo"thout strono fmano.,l $UppCirt from thcse who beheve that
women athletes are messengl!rs ot heat::h, hape and whoieness '" our communrtv. On behalf of
every
6AWSI wtlman athlete,
THANK YOU to our corpentte and toundaton teammates.
....
evolutlc5n
T lll A
E f'
Don
11.7.
bra
Weboldal tizenkt klnfle cg emblmjval- megvalsthat lenne egy tizenkt rsze

tagolt kptrkppel is
11.
ra
Nem kell mindig kptrkp

A kptrkpekrl szlva elszr azt kell elmondanunk, hogy esetleg soha nem kell
hasznlnunk kptrkpet, kivve nhny klnleges esetet. Majdnem minden esetben
egyszeruob, ha nhny szokvnyos kpet hasznlunk, kzvetlenl egyms mell
helyezve s kln-kln hivatkozss alaltva ket.
Lssuk pldul a 11.7. brt. Ezen a weboldalon tizenkt klnfle cg emblmja ltha
t. Az effle weboldalak az zleti vilgban igen gyakoriak- a cgek a partnereiknek
kedveskednek az ilyen kis ingyenes hirdetsekkeL Meg lehetne tenni, hogy az emblm
kat egyetlen nagy kpen jelentjk meg, majd ltrehozunk egy-egy hivatkozst a tizenkt
cghez, hogy a felhasznlk az egyes cgek emblmira kattintva jutl1assanak el az adon
cg honlapjra. Az is jrhat t azonban, ha tizenkt nll kp segtsgvel jelentjk
meg a cgeket az oldalunkon, mgpedig gy, hogy minden kp egyben a hozz tartoz
cg honlapjra vezet hivatkozsknt is szerepel.
A kptrkp akkor jelenti a legjobb vlasztst, ha egy olyan kpnk van, amelyen
szmos rszlet lthat, s ezek ssze-vissza helyezkednek el a kpen, vagy a kp
felptse olyan, hogy tl bonyolult lenne nll rszekre osztani. A 11.8. brn egy
olyan kpet ltunk, amely kitn kiindulpont kptrkp ltrehozshoz.
11.8.
bra
Ezt a kpet nem igazn lehet felszabdalni- ksztsnk inkbb kptrkpet belle!
190
A kp terletekre osztsa
Ha kptrkpet szeretnnk kszteni, az els dolgunk, hogy megkeressk azoknak
a rszeknek a pontos, kppontban mrt koordintit, amelyeket kattinthat hivatkozss
szeretnnk alaktani. Az effle kattinthat hivatkozsokat nevezzk terletnek (region).
Knnyen lehet, hogy magval a grafikai alkalmazsunkkal is egyszeren megtalljuk
a szksges koordintkat, de hasznlhatunk nll kptrkp-kszt alkalmazst is.
Ilyen program pldul a Mapedit (http: l /www. boutell. com/mapedi t/) vagy
a http: 1 /www. image-maps. com/ webhelyen zemel internetes kptrkpkszt.
Ezek az eszkzk-azon tl, hogy a koordintk megtallsban segtenek-megadjk
a kptrkpeket mkdtet HTML-kdot is.
A kptrkpkszt eszkz hasznlata ltalban annyibl ll, hogy az egrrel tglalapot
-vagy ms alakzatot-rajzolunk a hivatkozss alaktand terlet kr. A 11.9. bra

a tglalap alak kijellsek eredmnyt mutatja, illetve azt a felletet, amelyen megad
hatjuk a hivatkozs cljt, a kpszelet crnt s helyettest szvegt. A kptrkpnk
elksztshez teht az albbi informcikra van szksg: az egyes terletek koordin
tira, a cl URL-jre, valarnint a hivatkozs cmre s helyettest szvegre.
EH fdit :- Hittory &oobMri:s !ooh Help
rS http-J/ --.mgt- macoP_Mapjm.tg e.

ph;!:
.!::
.
p_______
.f.\_ Refreshmothe page will start you over. IE 7 wifl g1ve a stac:k overflow error after 13 or
L,ll 14 rectangie maps, does not.
,.-------.....-;
Rectangle Map Info:
American lndlan, Eskimo, and Aleut Persons
OICkinthe center ofthebox

to draothe box to YOIX
des11ed locabon. Usethe
surrounding squares to res12e
the map to cover your destred
C
map area. Once you havethe C
map placed you can enter 'l yoiX link forthe
map and add a bt:Je. Odc save and start
anather map! Rectanale maoscan be edited E
ordg!pted;tftfitheyaresaved
OD
Adnace ToolBox
.1
Base URL
The Base URl ISthe maJn URL used
throughoutthe proJect. dlanoinoth
wil dlanoe althe URLsthat match
the onebelow.
ht1p/fwww1magemaps com/
[ Update [
Image URL
.1
Show Text Links
Text lnks wil appearbek>w your

maoe map. Text tinks are a site map
of VOU" imaoe map. You can copythE
code and place t in anather Socation
on your website. Some reasons to
add text links are people who have
text onlybrowsers wil not see your
sthatvour:w.!'ao
-..
.===
..:.
=
,::. 6nk
..;
;. """'
-:ii==
== ;;;;o::;::=:::;;::=.,=::.::,
_ -,
=
--
ma
-+'
11.9.
bra
Kp egyes terleteinek hivatkozss alaktsa kptrkpkszt eszkz segtsgvel
11. ra
Kpek hasznlata a webhelyen (191
nll feladat
Ksz/tsnk sajt kptrkpet!
Valsznleg mlyrehatbban elsajttjuk a kptrkpkszts lpseit, ha gyorsan

elhzzuk valamelyik sajt kpnket, s az ra folyamn el is ksztnk belle egy
kptrkpet:
Ha elszr csinlunk ilyesmit, akkor a legokosabb, ha egy viszonylag nagyobb

kppel kezdjk, mghozz olyannal, amelyet rnzsre is knnyedn osztunk
fel nagyjbl tglalap alak rszekre.
Ha nincs kznl megfelel kp, ksztsnk egyet a kedvenc grafikai progra

munkkaL Hasznlhatunk egy egyszer, pr embert brzol kpet is, amelyet
a rajta lv embereknek megfelelen osztunk terletekre.
Prbljunk ki pr kptrkpkszt eszkzt, s dntsk el, hogy melyik tetszik

a legjobban. Kezdjk egy olyan nll alkalmazssal, mint a Mapedit
(h ttp: l /www. bautell. com/mapedi t/), majd nzzk meg az internetes
kptrkpksztt a h ttp: l /www. image-maps. com/ webhelyen. Ezeken fell is
van mg pr lehetsg; a vlasztott internetes keresnkkel keressnk
az "imagemap software" kifejezsre.
A kptrkp HTML-kdjnak elksztse

Ha kptrkpksztt hasznlunk, akkor azonnal megkapjuk a kptrkphez sZksges
HTML-kdot is. Mindazonltal nem rthat, ha megrtjk a kd mkdst, gy brmikor
ellenrizhetjk, hogy tnyleg jl mkdik-e. A kptrkpeket az albbi HTML-kdsor
vezeti be:
<map name="trkpnv">
J, ha tudjuk, hogy br a <map> cmke name (nv) jellemzjnek olyan rtket adunk,
amilyet akarunk, hasznos dolog valamilyen, a trkpre rninl pontosabban utal nevet
megadni. A kvetkez feladatunk, hogy a kp rninden terlethez meg kell adnunk
egy-egy <area />cmkt. me egy egyszer <area />cmke, amelyet a trkpbl
kszlt kptrkp hasznl:
<area shape="rect" coords="100,136,116,152"
href="http://www.whitmancounty.org/"
alt="Whitman County,
WA"
title="Whitman County,
WA"
/>
Az <area l>elemnek t jellemzje van, s ezeket a kptrkpen megadott minden

terlethez meg kell hatroznunk:
shape
(alak): Azt jelzi, hogy a terlet tglalap ( shape=" ree t " ) , kr
( shape="circle" ) vagy szablytalan sokszg ( shape="poly" ) .
coords
(koordintk): Itt adjuk meg az egyes terletek koordintit, kppont
ban. Tglalap alak terlet esetn a bal fels cscs x s y koordintjt kell
megadnunk, amit a jobb als cscs x s y koordintja kvet. Kr esetn elbb
a kzppont x s y koordintjt adjuk meg, amit a kppontban mrt sugr
kvet. A sokszgeknl egyms utn meg kell adnunk minden cscs x s
y koordintjt.
href
(hiperhivatkozs): Azt az oldalt adjuk meg itt, amelyre a terletre kattintva
jutunk. Brmilyen olyan cm, illetve fjlnv hasznlhat, amelyet egy szoksos
<a href>
al t
cmkben is megadhatnnk.
(helyettest szveg): Azt a szveget adjuk meg itt, amelyet a legtbb
bngsz-de a Firefax nem-akkor jelent meg, amikor a felhasznl a kp

fl viszi az egrmutatt. A szveg nem tl feltn, mgis fontos informci
azoknak, akik egybknt nem vennk szre, hogy kptrkppel van dolguk.
A Firefax-helyesen-a t itle jellemzt hasznlja a lthat jelzs megjele
ntsre az alt jellemz mellett. Ez is jabb ok arra, hogy mindkt jellemzt
megadjuk-ahogyan azt az ra korbbi rszben krtk.
A kptrkp rninden kattintsrzkeny rszt kln <area l>cmkvel kell megadnunk.
Ennek ksznhet, hogy egy kptrkp kdja rendszerint <area />cmkk sorbl ll.
Az <area />elemek kdjnak megadsval a trkp elkszlt; mr csak annyi
a dolgunk, hogy a kdrszletet egy </map> cmkvel lezrjuk
A kptrkp kialaktsnak utols lpse, hogy a trkpet sszektjk magval
a kppel. A kpet az oldalon egy szoksos <img l> cmkvel helyezzk el, de ezttal
egy j usernap jellemz is kerl a cmkbe. A kd a kvetkezhz hasonl lesz:
<img src="map.png" usemap="#countymap"
style="border:none;
alt="Native
width:650px;
Peeples Census Map"
height:509px"
/>
Arnikor a usernap jellemznek rtket adunk, azt a nevet kell megadnunk, amelyet
a <map> cmke id jellemzjben adtunk meg - ne feledkezznk meg a kettskeresztrl
(#).A style jellemz segtsgvel adjuk meg a kp szlessgt s magassgt, s itt
kapcsoljuk ki a kpet krbevev keretet is - amit persze a sajt kptrkpeinknl meg
is tarthatunk, ha ppen olyan kedvnkben vagyunk.
A 11.5. plda annak az oldalnak a kdjt tartalmazza, amelyik megjelenti a kpet,
majd pr terletet megadva ltrehozza rajta a kptrkpet.
11. ra
11.5. plda
<?xrnl
1193
A <map> s az <area /> cmkkkel kialaktott kptrkp

--------
version="l.O"
<!DOCTYPE
html
encoding="UTF-8"?>
PUBLIC
"-//W3C//DTD
XHTML
1.0
Transitional/lEN"
"http://www.w3.org/TR/xhtmll/DTD/xhtmll-transitional.dtd">
<html xrnlns="http://www.w3.org/1999/xhtml"
xrnl:lang="en">
<head>
<title>Testing
an
Imagemap</title>
</head>
<body>
<hl>Testing
<P
an
Imagemap</hl>
style="text-align:center">Click
county's
<img
web
on
a logo to
go to
the
site.< br/>
src="map.png" usemap="#countymap"
style="border:none;
width:650px;height:509px"
alt="Native
Census
<map
<area
Peeples
name="countymap"
shape="rect"
Map"
/></p>
id="countymap">
coords="100,136,116,152"
href="http://www.whitmancounty.org/"
alt="Whitman
<area
County,
shape="rect"
WA"
title="Whitman
href="http://www.sccgov.org/"
title="Santa
Clara
<area shape="rect"
County, WA" />
coords="29,271,42,283"
County,
alt="Santa Clara County, CA"
CA"
/>
coords="535,216,548,228"
href="http://visitingmifflincounty.com/"
alt="Mifflin
County,
PA"
title="Mifflin
County,
PA" />
</map>
</body>
</html>
Ha az Olvas akkurtus szemly, akkor feltnhetett neki, hogy a kp legtbb

pldjtl eltr en ez a kd nem az XHTML 1.1, hanem az XHTML 1.0 vltozatot
hasznlja. Nzzk csak meg a kd els soraiban! A vltozsnak az az oka, hogy pr
bngsz - elg, ha mindjrt az Internet Explorert emltjk- le van maradva,
legalbbis ami az XHTML 1.1 szabvny kptrkpekkel kapcsolatos rszt illeti.
A krdses vltoztats a
usernap
jellemzvel kapcsolatos, amelynl az XHTML
1.1 nem kri a kettskeresztet a trkp azonostjban- st az a helyzet, hogy

a kettskereszt hasznlata az XHTML 1.1-ben sehol sem engedlyezett.
Engedlyezett viszont az XHTML 1.0 szerint, s csak gy tudunk a jelenlegi
webbngszk ignyeinek megfelel, mgis rvnyesthet kdot rni, ha ebben
a pldban megmaradunk az XHTML 1.0 hasznlatnL
A 11.10. brn mkds kzben lthat a kptrkp. Figyeljk meg a kp jobb als
sarkt. A bngsz - esetnkben a Firefox - megmutatja az egrmutat alatt lv
terleten rvnyes hivatkozst. Ha pedig az egrmutatt egy terlet fl hzzuk,
a terlethez tartoz
alt,
illetve
title
jellemzben trolt szveg-esetnkben az, hogy
.,Whitman County" - jelenik meg a kptrkp eltt.
194
http://www.yourdomain,comagtmap.html
.l
Testing an Imagemap
Oick oo COUilty to go to the couruy's
websit:;.:----.
American lndian, Esklmo, and Aleut Persons
11.10.
bra
A 11.5. pldban megadott kptrkp, ahogy a weboldalon lthatjuk
Kptrkpeket nem csak a HTML <map> cmkjvel hozhatunk ltre. A msik mdszer
kizrlag a CSS hasznlatra tmaszkodik, s a 16. rn lesz sz bvebben rla.
sszefoglals
A mai rn a kpek weboldalon val elhelyezst szolgl <img />elemmel ismer
kedtnk meg. Megtanultuk, hogyan adhat meg olyan rvid szveges lers, amely
a kp betltdse alatt jelenik meg a kp helyn, illetve akkor, ha a felhasznl a kp
fl viszi az egrmutatt. Azt is megtanultuk, hogy rniknt szablyozhat az egyes
kpek vzszintes s fggleges igaztsa, s szveggel krbe is tudjuk mr venni
a kpeket, akr bal, akr jobb oldalrl.
Megtanultuk, hogyan lehet a kpeket hivatkozss alaktani - hasznlhatjuk az <a>
cmkt, de ltrehozhatunk kptrkpeket is. Ezen kvl rintettk a kpek trolelemek
httrkpeknt val hasznlatnak tmakrt is.
11. ra
f195
A ll. l. tblzat az rn megismert elemek jellemzit foglalja ssze, s tartalmazza

a megfelel stlustulajdonsgokat is.
11.1. tblzat
A 11. rn megismert JnML-elemek s jellemzik
Elem/Jellemz
lers
<img />
Egy kpfjlt helyez el a weboldalon.
<map> ... </map>
Egy gyfloldali kptrkpet ad meg. A trkpre

az <img usemap="... " l> cmkvel hivatkozha
tunk. A belsejben legalbb egy <area l> cmke
tallhat.
<area l>
Egy gyfloldali kptrkpen kattintsrzkeny te

rletet hatroz meg.
Jellemzk
src=" cm"
A kpet tartalmaz fjl cme.
alt="helyettest szveg"
A kp helyn megjelen, a kp tartalmval kap

csolatos lers, elsdlegesen azoknak a felhaszn
Jknak a kedvrt, akik magt a kpet nem tudjk
megtekinteni.
title=" cm"
Szveges, a kp cmeknt megjelen lers,

amelyet rendszerint a kp felett felbukkan kis
mezben - az eszkzlersban - ltunk.
width=" szlessg"
A kp szlessge (kppontban).
height= "magassg"
A kp magassga (kppontban).
style="bor der:none"
Ha a kpet hivatkozss alaktjuk, ezzel

a jellemzvel szabadulhatunk meg a kpet
krlvev kerettL
style="vertical-
A kpet fgglegesen igaztja a szveg tetejhez
align: elrendezs"
(text-top),
bottom),
fellre (top), a szveg aljhoz (text
alulra (bot tom), kzpre (middle) vagy
a szveg betvonalhoz (baseline).

style=
A kpet oldalra sztatja, hogy krbevehesse
"float: sztats irnya"
a szveg. A lehetsges rtkek: left (balra),

right
(jobbra) s none (nincs). Az alaprtelmezett
bellts a none.
usemap=" azonost"
Az gyfloldali kptrkpknt hasznlt, HTML

nyelven megadott trkp azonostja. A <map> s
az <area l> cmkben hasznljuk.

11.1. tblzat
A 11. r11 megismert HTML-elemek s jellemzik
Elem/Jellemz
Lers
Jellemzk
shape=" rtk"
Az <area l> cmkben adja meg

a kattintsrzkeny terlet alakjt. A jellemz
lehetsges rtkei: rect (tglalap), poly
(sokszg) s circle (kr).
coords=" rtkek"
Az <area l> cmkben adja meg

a kattintsrzkeny terlet koordintit.
rtelmezse s belltsa a terlet alakjtl fgg.
href="hivatkozs URL-je"
Az <area l> cmkben adja meg azt az URL-t,

amelyik a terletre kattintva betltdik.
Krdezz-felelek
K:
Milyen hossz lehet az <img /> cmke alt jellemzjben megadott lers?
V:
Elmletileg brmekkora. A gyakorlatban rdemes olyan rvidre fognunk

a szveget, hogy ne foglaljon el nagyobb helyet a kpnl. A nagyobb kpeknl
tz sz mg j lehet, br e knyv rja ltott mr olyan weboldalakat is, ahol
a ksztk egsz bekezdseket rtak ide. A kis kpeknl egyetlen sznl tbbet
ne adjunk meg.
K:
A knyv tmutatsnak megfelelen hasznltam az <img
/> cmkt, mgis,
amikor megnzem az oldalt, mindssze egy kis doboz ltszik a kp helyn,

benne pedig egy X vagy hasonl alakzat. Mit rontottam el?
V:
Az emltett ikon kt dolgot jelenthet: a bngsz nem tallja a kpet, vagy a kp

a bngsz szmra ismeretlen formtum. A problma megoldsnak els
lpse, hogy megnzzk, hogy a kp a helyn van-e. Ha igen, akkor nyissuk
meg egy grafikai programban, s mentsk jra, mgpedig GIF, JPG vagy
PNG formtumban.
K:
Mi trtnik, ha egy kptrkpen egymst ifed terleteket alaktunk ki?
V:
Erre megvan a lehetsg. Azt kell fejben tartanunk, hogy amikor a bngsz
eldnti, hogy melyik hivatkozst kveti, az egyik hivatkozs elsbbsget fog
lvezni a msikkal szemben. Az elsbbsget az a terlet kapja, amelyik hamarabb
kvetkezik a kptrkp HTML-kdjban. Az els terlet pldul elsbbsget
lvez a msodikkal szemben, azaz, ha valaki az tfed terletre kattint, az els
terlethez tartoz hivatkozs clja nylik meg. Ha a kptrkpnek van olyan
rsze, ahov nem tettnk hivatkozst- ms szval, "holttere" van-, akkor
az tfeds hasznlatval biztosthatjuk, hogy ene a terletre kattintva tnyleg ne
nyljon meg semmilyen hivatkozs, mgpedig gy, hogy a holttr terlett a tbbi
terlet eltt adjuk meg, gy, hogy azokkal tfedsbe kerljn, majd ennek
a terletnek a href jellemzjt "" (res) rtkre lltjuk
11. ra
Kpek hasznlata a webhelyen f197
Ismtls
Ismtl krdsek
1.
Hogyan illeszthetjk be az elephant. jpg kpet egy weboldal legtetejre?
2.
Oldjuk meg, hogy minden olyan alkalommal jelenjen meg az Elephant sz,
3.
Egy 200
amikor a bngsz nem tudja megjelenteni az elephant. jpg kpet!

x
200 kppontos, quarters. gif (negyedek.gif) nev kpbl szeret
nnk kptrkpet kszteni. Azt szeretnnk, hogy ha a felhasznl a kp bal

fels negyedbe kattint, akkor a topleft. html oldal tltdjn be; ha a jobb
fels negyedbe kattint, akkor a topright. html fjl jelenjen meg; a bal als
negyedbe kattintva a bottomleft. html oldal nyljon meg, a jobb als
negyedbe kattintva pedig a bottomright. html. A vzolt kptrkp milyen
HTML-kddal valsthat meg?
Vlaszok
1.
A kpet tartalmaz fjlt msoljuk az oldal HTML-fjljval azonos knyvtrba.

A HTML-fjl belsejben kzvetlenl a <body> cmkt kveten szrjuk be
az albbi HTML-kdot:
<p><img
2.
/><IP>
Hasznljuk az albbi HTML-kdot:

<img
3.
src="elephant. jpg" alt=""
src="elephant.jpg"
alt="elephant"
/>
Az albbi kptrkpet kell kialaktanunk:

<map
name="quartersmap" id="quartersmap">
<area shape="rect"
alt="top
left"
coords="0,0,99,99" href="topleft.html"
/>
<area shape="rect"
alt="top
right"
coords="100,0,199,99" href="topright.html"
/>
<area shape="rect"
alt="bottom
left"
<area shape="rect"
coords="0,100,99,199" href="bottomleft.html"
/>
coords="100,100,199,199"
href="bottomright.html"
alt="bottom
right"
/>
198] Tanuljuk meg a HTML s a CSS hasznlatt 24 ra alatt

</map>
<img src="quarters.gif"
width="200"
height="200"
usemap="#quartersmap"
alt="quarters"
title="quarters"
/>
Gyakorlatok
Az rn megismert kpelhelyezsi mdszerek gyakorlsa sokat segt abban,

hogy felismerjk azt a szerepet, amelyet az ltalunk ksztett weboldalakon
a kpek jtszhatnak.
hny tetszs szerint kivlasztott kppel gyakoroljuk
a float stlustulajdonsg hasznlatr: helyezznk egy kp mell ms kpeket,

illetve szveget. Ha mg emlksznk, a float tulajdonsg lehetsges rtkei
a kvetkezk: left, right s az alaprtelmezett none.
A kpek igaztsa a webhely keltette benyoms kialaktsban is fontos szerepet

jtszik. Nhny kivlasztott kppel gyakoroljuk a vertical-align stlustulaj
donsg hasznlatt: helyezznk egy kp mell ms kpeket, illetve szveget.
Ha mg emlksznk, a vertical-align tulajdonsg lehetsges rtkei
a kvetkezk: text-top, top, text-bottorn, bottom, rniddle s baseline.
12. RA
A lecke tartalma:
Tovbbi tippek a multimdia hasznlathoz
A multimdia sz magban foglal mindent, amit egy weboldalon lthatunk vagy hall
hatunk: hangot, mozgkpet, animcit csakgy, mint az llkpeket s a szveget.
Az llkpek s a szveg hasznlatval az elz rk sorn mr megismerkedtnk, gy
a mai rn arrl tanulunk, hogy miknt illeszthetk be egy webhelyre a multimdis
tartalom tovbbi tpusai. Semmilyen hang, mozgkp vagy animci ltrehozst nem
fogjuk trgyalni - arrl lesz sz, hogy miknt vlhatnak az ilyen fjlok a webhelynk
rszv, legyen sz akr hivatkozsrl, akr begyazsrL
Mieltt mg elgondolkodnnk arrl, hogy multimdis tartalommal gazdagtjuk
a webhelynket, rdemes az esznkbe idzni, hogy nem minden felhasznlnak van
nak ilyen tartalom lejtszshoz szksges eszkzei, s az ekkora mret fjlok gyors
letltshez szksges szlessv internetkapcsolattal sem rendelkezik mindegyikk.
Ha egy hivatkozs multimdiafjlra mutat, rnindig figyelmeztessk a ltogatkat.

Ajnljuk fel nekik a tartalom meghallgatst, illetve megtekintst, de dnthessenek k
arrl, hogy meg kvnjk-e nyitni az ilyen fjlokat
nll feladat
Hozzunk ltre vagy keressnk az Intemeten
a weboldalunkon hasznfhat6 multimdiafj/okat!
Mieltt megismernnk a multimdia-tartalmak weboldalon val elhelyezsnek mdjt,
nem rt, ha kiindulsknt rendelkeznk valamilyen hasznlhat multimdia-tartalommal.
Multimdia-tartalmat ltrehozni-legyen sz a multimdia brmely tpusrl-knnyen
nagy kihvst jelent s bonyolult feladatnak bizonyulhat. Ha a tartalmat az alapoktl
kvnjuk megalkotni, ennl a knyvnl lnyegesen tbbre lesz szksgnk -nem lesz
az ember egyik pillanatrl a msikra multimdia-guru. Ha azonban a tartalom maga mr
kszen ll, a mai rn megtanulhatjuk, hogy rniknt helyezzk el legjabb mvnket
a weboldalunkon.
Azok, akiknek egy mvszi alkots elksztse nem napi gyakorlat, prblkozhatnak
ms mdszerekkel is szert tenni hasznlhat multimdis tartalomra. A nyilvnval
mdszeren kvl-rendeljk meg a munkt egy mvsztl-me nhny lehetsg:
Az Interneten tallhat tartalom nagy rsze ingyenes. Termszetesen nem rossz

gondolat, ha elzleg azrt egyeztetnk a szerzvel, illetleg a tartalom jelenlegi
tulajdonosval, fleg ha nem szeretnnk szerzi jogi pert a nyakunkba.
Ezen fell megernltennk, hogy az Amerikai Egyeslt llamokban sok az olyan
kormnyhivatal, amelyekre igaz, hogy az ltaluk ltrehozott tartalom az amerikai
llampolgrok kzs tulajdona (akik ingyenesen hasznlhatnak pldul rninden,
a
ASA ltal az Interneten kzztett anyagot.)
Sok az olyan internetes keres-pldul a google.com, a yahoo.com,

a lycos.com s msok-, amely rendelkezik multimdiafjlok keresst szolgl
kpessgekkel is. Arnennyiben tiszteletben tartjuk a szerzi jogokat, ezzel a mcl
szerrel knnyen lelhetnk egy adott tmhoz kapcsold multimdis tartalomra.
Egy gyors, Flash-animcit, QuickTime-filmrszletet vagy valarnilyen hangfjlt
clz keress tbb eredmnnyel szolgl, rnint amennyivel elboldogul az ember.
Ha ki szeretnnk lni a kreativitsunkat, vlasszuk ki a kedvenc mdiumunkat

van, akinek ez a videzs, msoknak a hangfelvtel-kszrs lesz, megint msok
inkbb egy animci ksztsvel pepecselnek szvesen. Ha meghoztuk a dntst,
keressk meg a mesterm elksztshez alkalmas alkalmazst. Sok cg foglalko
zik multimdia-tartalom ksztsre hasznlatos programokkal, ilyen pldul
az Adobe (h t tp: l /www. adobe. com/) s az Apple (h t tp: l /www. apple. com/),
hogy csak kettt emltsnk.
12. ra
! 201
Mozgkpet, illetve hangfelvtelt a legegyszer(bben s legmegbzhatbban gy
helyezhetnk el egy weboldalon, ha az
cmkvel ltrehozunk egy a fjira
<a href>
mutat hivatkozst- ppen gy, ahogy egy msik HTML-fjlra mutatnnk.
Az rn bemutatott, multimdis tartalom weboldalon trtn elhelyezsre szolgl

mdszerek egymshoz igen hasonlan mkdnek, a felhasznlt tartalom tpustl
fggetlenl.
Az albbi sorral pldul egy MOV formtum, jgkorong-mrkzst rgzt felvtelre
hivatkozhatunk:
<a
href="hockey.mov">View the
hockey
video
clip.</a>
Amikor a ltogat a "View the hockey video clip." (A jgkorong-mrkzs

megtekintse) mondatra kattint, a webkiszolglnkrl a hockey .mov fji letltdik
a szmtgpre, a letlts vgeztvel pedig automatikusan elindul a gpre teleptett
segdalkalmazs vagy bvtmny. Ha nincs megfelel segdalkalmazs vagy bvtmny
a gpen, a bngsz felajnlja a megfelel bvtmny letltst, illetve lehetsget ad
arra, hogy a ltogat a fjlt a merevlemezre mentse ksbbi megtekints vgett.
A 12.1. plda egy olyan weboldal elksztsre szolgl kdot tartalmaz, amelyben egy
kpre kattintva nyithat meg a Windows Media formtum fjlban trolt mozgkp
lejtszshoz szksges hivatkozs. A hivatkozst a jobb hasznlhatsg kedvrt
a kpen kivl a szvegben is megismteljk
12.1. plda
<?xml
Kp Windows Media mozgkphez kapcsolsa az <a> cmke segtsgvel

------'
version="l.O"
<!DOCTYPE
html
encoding="UTF-8"?>
PUBLIC
"-//W3C//DTD
XHTML
1.1//EN"
<html
xml:lang="en">
<head>
<title>Fun
in the
Pond</title>
</head>
<body>
<hl>Fun in the
<P><a
Pond</hl>
href="pond.wmv"><img
style="border-style:none;
Michael's
ongoing
backyard
home
relaxing.
He
places
far
as
pond
is not
improvement
has
only
project that
numerous
as Japan,
src="projector.gif"
float:left;
fish
Israel,
in the
and
alt="Pond Video"
padding:l2px" /></a>
fun
hobby but also
is both creative
pond,
all
Koi from
Australia. Although
an
and
various
they
don't
bark,
purr,
are his pets,
and
click here</a>
or
or fetch
good
ones
anything
other than food,
at that. You can <a
on the animated graphic on
to see a movie clip of some fish in
the
these fish
href="pond.wmv">
left
the pond.</p>
</body>
</html>
Ha az Olvas szmra a segda/kalmazs (helper application l kifejezs ismeretlenl

cseng, elmondjuk, hogy azokrl a kls programokrl van sz, amelyeket a webbng
sz hv segtsgl, amikor olyan fjlokkal tallkozik, amelyeket egybknt nem tudna
megnyitni. A segdalkalmazsok meghvsa gy jobbra azokhoz a fjltpusokhoz
kapcsoldik, amelyeknek a megnyitsval a bngsz egyedl nem boldogul.
A bvtmnyek (plug-in) olyan klnleges segdalkalmazsok, amelyeket kzvetlenl

a webbngszbe teleptnk, s a segtsgkkel a multimdis tartalom megtekin
tsre kzvetlenl a webbngszbl nylik mdunk.
A fenti kd a pro j ee tor. gif animlt GIF-fjl felhasznlsval hoz ltre a pond.wmv
mozgkphez vezet hivatkozst. A 12.1. brra a medencrl szl mintaoldal kerlt

- lthat a filmvettt brzol kp. Ha a kpre kattintunk, a megnyl Windows Media
Playerben (Mdialejtsz) megnzhetjk a mozgkpfelvtelt.
hft:p-J/www.urdomcn.com/pond.html
Fun in the Pond
Done
12.1. bra
A projector.gif nev, animlt GIFformtum kpre kattintva nylik meg a Windows Media
fjtra mutat hivatkozs. A fjl megnyitst kls segdalkalmazs vgzi
12. ra
Multimdia a webhelyen 203
Ha a felvtelt meg szeretnnk tekinteni, mindssze az animlt vettgpre - esetleg

a szvegben lv hivatkozsra - kell kattintanunk . A mvelet eredmnyekppen
megkezddik a felvtel lejtszsa, mgpedig vagy egy bvtmny segtsgve!- ha van
a bngszhz teleptve a felvtelt lejtszani kpes bvtmny -, vagy egy megfelel
segdalkalmazssal.
A bngsznk mskpp kezeli a hivatkozst, ha az a Windows Media formtum
pond. wmv fjl helyett a QuickTirne formtum pond.mov fjira mutat. A QuickTime
bvtmnynek ksznheten kls program indtsa helyett kzvetlenl

a bngszablakban tekinthetjk meg a felvtelt (lsd a 12.2. brt).
http://www.ycurdomam.com/pond.mov
Done
12.2. bra
A kpre kattintva a hivatkozott fjl- pond. mov- a bngsz QuickTime bvtmnynek
hasznlatval nyflik meg
Alighanem az Olvas is kitallta mr, hogy a multimdiafjlokra mutat egyszer hivat

kozs biztostja leginkbb a korbbi programvltozatokkal val egyttmkdst, mivel
gy a bngsz felelssge kitallni, hogy egy multirndia-felvtel miknt jtszhat le.
A dolog htultje, hogy a felvtel megjelenst kevss tudjuk szablyozni, s sz

sincs arrl, hogy a felvtel az oldal szerves rszt kpezhetn.
Amennyiben a bngsznk nem tmogatja a QuickTime formtumot, a QuickTime

lejtsz ingyenesen letlthet a http: 1 /www.apple.com/quicktime/
webhelyrL A bngszk akkor sem felttlenl egyformn jtsszk le a QuickTime
formtum felvteleket, ha mr van QuickTime lejtsz teleptve a gpnkre.
A knyv szerzjnek Windowst futtat gpn pldul az Internet Explorer s
a Firefax egyarnt bvtmny hasznlatval, a bngszablakban jtssza le
a felvtelt, mg az Opera a QuickTime lejtszt segdalkalmazsknt indtja el.
Az XHTML szabvny rsze az <objee t> cmke, amelyet mostanra valamennyi,
weboldalakba gyazott multimdia-tpusnl hasznlni illene. Ez a cmke vltja le azt
az <embed 1 > cmkt, amellyel mg mindig tallkozhatunk nhny HTML-forrskd ban.
Amikor egy multimdiafjlt begyazunk egy weboldalba, ltrejn nhny olyan szaftve
res vezrlelem, amely a kzvetlen, msodiagos ablak megnyitst, illetve az ppen
olvasott oldalrl val tovbblpst szksgtelenn tev fljmegnyitshoz kell. Az albbi
kd a korbban mr ltott medencs felvtel begyazst vgzi. A begyazshoz pusz
tn az <object> cmkt hasznljuk.
<object
classid="CLSID:6BF52A52-394A-lld3-B153-00C04F79FAA6"
width="320" height="305">
<param
name="type" value="video/x-ms-wmv"
<param
name="URL"
<param
name="uiMode"
<param
name="autoStart"
value="pond.wmv"
value="full"
/>
/>
/>
value="false"
/>
</object>
=@l
kttp://www.yourdotNmc.com/pon
l+l X lll! Lu Sarch
----,
:v!ichad"s baclcyard pood is oot ooly a fuo hobby but

a1so an ongaing bomt impro\'mle:Dl project that is
both aeab\-e and relaxing.
He bas nm:nerous fish in pood. al Koi from variaus
places as far as )""""" Israel. and Austraiia_ Al!hougb
they doo"t badc. purr. or f<teh any!lmg otl"f than
food. tbes< fish .... bis pds. and good.,... al that
12.3. bra
Az <o bject> cmk e hasz
nlatvallehetsgnk
nylik egy mozgkpet
gyazni egy we boldalba,
mgpedig a hasznlni
kvnt lejtsz m egjel
lsvel
Tekintettel arra, hogy teljes egszben elvgzi a felvtel begyazst az oldalba

(lsd a
12.3.
brt), a kd igazn nem szmt szrnyen bonyolultnak. Az oldal legkaci
fntosabb rsze az <object> cmke classid (osztlyazonost) jellemzje, azaz az ott

olvashat hossz, betkbl s szmokbl ll kd. Ez a Windows Media Player alkal
mazs egyedi azonostja; ezzel mondjuk meg az <object> cmknek, hogy a felvtel
lejtszst a Windows Media Player begyazsval vgezze. A fenti kd gy mdosts
nlkl hasznlhat a sajt weboldalainkon.
12. ra
Az <obj ee t> cmke width s height jellemzje adja meg a begyazott Windows
Media Player alkalmazs ablaknak mrett. Ha ezeket a jellemzket elhagyjuk, akkor
pr bngsz a tartalom mretnek megfelelen alaktja a begyazott alkalmazs abla
knak mrett, ms bngszk ellenben meg sem jelentik a begyazott alkalmazst.
Ha biztosra akarunk menni, lltsuk a lejtszani kvnt felvtel mretnek megfelel
nagysgra a fenti tulajdonsgokat.
Az <obj ee t> cmkepr tagjai kztt talljuk meg a felvtel lejtszsnak tovbbi rszle
teit hordoz ngy <par am> cmkt. Minden cmknek kt jellemzje van, a name (nv)
s a value (rtk). Ezek rendelnek adatot (rtket) egy adott belltshoz (nvhez).
Esetnkben a felvtel URL nev jellemzjnek rtke a pond. wmv fjlnv. A harmadik,
uiMode nev paramter azt hatrozza meg, hogy a Windows Media Player mely gombjai
s felleti elemei ltszdjanak. A full rtk a felhasznli fellet valamennyi elemnek

- vezrlgomboknak, hangerszablyznak - a megjelentst jelenti. Az utolsknt
megadott autoStart paramter rtke false (hamis), azaz amikor a webbngszben
megnyitjuk az oldalt, a felvtel lejtszsa nem indul el automatikusan.
A legfurcsbb alighanem a type paramter. Ez a paramter vgzi a megjelentett tartalom
formtumnak (esetnkben Windows Media Video, azaz WMV) azonostst.
A paramter rtkt az internetes MIME-szabvnyban foglaltak kzl kell kivlasztanunk.
AMIME-tpus egy olyan azonost, amely az Interneten elfordul klnfle tartalomt
pusok azonostsra szolgl. A MIME betsz a Multipurpose Internet Maii Extensions
(tbbcl internetes levlkiterjesztsek) kifejezs rvidtse, mgpedig azrt, mert
a MIME-tpusok eredetileg az e-mailekhez csatolt mellkletek azonostsra szolgltak.
Az <object> cmke type jellemzjben is ezeknek a tpusoknak a hasznlatval adjuk
meg a data jellemzben hivatkozott mdiafjl tpust.
Az albbiakban nhny olyan npszer hang- s mozgkpformtum MIME-tpust
ismertetjk, amelyeket esetleg az Olvas is szvesen hasznl a weboldalain.
WAY hangfjl: audio/x-wav
AU hangfjl: audio/basic
MP3 hangfjl: audio/mpeg
MIDI hangfjl: audio/midi
WMA hangfjl: audio/x-ms-wma
RealAudio hangfjl: audio/x-pn-realaudio-plugin
AVI fjl: video/x-msvideo
WMV fjl: video/x-ms-wmv
MPEG videfjl: video/mpeg
QuickTime fjl: video/quicktime
A 12.2. plda az szmedencs weboldal kdjt ismerteti. Lehetsgnk nylik

az <ob j eet> cmke hasznlatt megfigyelni.
2os
12.2. plda WMVformtum mozgkp kztt?tlen begyazsa az <object> cmke segtsgt'f!l

<?xml version="l.O"
<!DOCTYPE
html
encoding="UTF-8"?>
PUBLIC
"-//W3C//DTD
XHTML
1.1//EN"
xml:lang="en">
<head>
<title>Fun
in the
Pond</title>
</head>
<body>
<hl>Fun
in
the
Pond</hl>
<div style="float:left;
<object
padding:3px">
width="320"
height="305">
<param name="type"
<param name="URL"
value="video/x-ms-wmv"
value="pond.wmv"
<param name="uiMode"
value="full"
<param name="autoStart"
<embed width="320"
/>
value="false"
height="305"
/>
/>
/>
type="video/x-ms-wmv"
src="pond.wmv" controls="All" loop="false"
autostart="false"
pluginspage="http://www.microsoft.com/windows/windowsmedia/" />
</object>
</div>
<p>Michael's
backyard pond
an ongoing home
is
not
only
improvement project that
fun
is
hobby
but
also
both creative and
relaxing.</p>
<p>He
as
has
far
purr,
as
numerous
Japan,
fish in
Israel,
or fetch anything
and good ones at
the
and
other
pond,
all
Australia.
than
food,
Koi
from
Although
these
various
they
fish
places
don't
are
bark,
his
pets,
that.</p>
</body>
</html>
Minthogy az XHTML nem tmogatja az
<embed
1 > cmke hasznlatt, a cmke
hasznlata megakadlyozza az oldalaink rvnyestst. A problma sajnos nem

kerlhet meg - meg kell vrnunk, amg a bngszk teljeskren tmogatni fogjk
az <object> cmke hasznlatt, vagy tllhatunk a HTML 5 <embed
l>
elemre.
szrevehettnk pr jabb kdrszletet, amely nem szerepelt az <objee t> cmke

hasznlatt bemutat korbbi pldnkban. Sajnos, ahogy arra mr egy korbbi lecke
alkalmval kitrtnk, nem minden webbngsz valstja meg az <object> elem
tmogatst. Ezen oknl fogva vlik szksgess az <objee t> cmkn bell az
l>
<embed
hasznlata: gy tudjuk figyelembe venni a bngszk kztti eltrseket. A megolds
nem idelis, de amg a bngszgyrtk folyamatos lemaradsban vannak az uralkod

szabvnyokhoz kpest, nincs ms eszkznk. Igazn figyelmesen olvasva a kdot, azt is
szrevehetjk, hogy az
informcit hordoz.
<embed l>
az <object> elemben hordozottal megegyez
12. ra
1207
Az <objee t> cmke hasznlata nmileg sszetettebb annl, mint amire a fenti bekez
dsekben fny derlt. Szerencsre, ha csak multimdia-tartalom lejtszsa a cl, nem
szksges az <obj ee t> elem bonyolultabb felhasznlsi mdjaival is tisztban
lennnk. Ms szvai: nem kell multimdia-guruv lennnk, ha csak nhny hang- vagy
mozgkpfelvtelt szeretnnk a weboldalainkon megosztani.
Az <object>, illetve az <embed />cmke hasznlatval nem kizrlag mozgk

pet trol mdiafjlokat helyezhetnk el egy weboldalon. Valamennyi multimdiafjl
esetben az ismertetett eljrst kell kvetnnk. Ha meg szeretnnk llaptani a pon
tos osztlyazonostt s a kdalapot (codebase), valamint a <pararn l>elemek
kitltshez szksges adatokat, akkor rdemes valamelyik keresvel rkeresnnk
az object embed tartalomtpus kifejezsre - a tartalomtpus szt a Real Audio,
a OuickTime, a Flash, illetve a hasznlni kvnt tpus nevvel helyettestve.
Tovbbi tletek a multimdia hasznlathoz

Mieltt mozgkpet, hangot vagy animcit helyeznk el egy weboldalon, gondoljuk
t, hogy valban szksg van-e r. Minden alkalommal, amikor az emltett tpusokba
tartoz multirndis tartalmat szeretnnk hasznlni, gyzdjnk meg rla, hogy alapos
okunk van r. A szksgtelenl hasznlt hang s vide- a felesleges kpekhez hason
lan- eltereli a figyelmet az oldal valdi zenetrL Termszetesen, ha ez az zenet
az, hogy "Nzztek, ezt n filmeztem le!", vagy az, hogy "Hallgassa meg mindenki
a zenmet, tltstek le a dalaimat!", akkor mindenkppen rdemes multimdis
tartalommal bvteni a webhelynket
me pr tovbbi, megfontolsra rdemes gondolat:
Ne helyezznk el multimdis tartalmat gy a weboldalunkon, hogy a lejtszs

az oldal betltsekor automatikusan elinduljon. Mindig adjuk meg a felhaszn
lnak a lehetsget a tartalom elindtsra s lelltsra.
Ha lehetsges, engedjk, hogy a felhasznl maga vlaszthassa meg a lejtszsra

hasznlt eszkzt. Ne hasznljunk olyan multimdis tartalmat, amelyet csak egy
opercis rendszer egyetlen lejtszja kpes megnyitni.
A multimdiafjlok nagyobbak, mint a szoksos grafikt s szvegfjlokat trol

fjlok. Ez annyit tesz, hogy a webkiszolglnkon tbb trhelyet ignyelnek, s
a weboldalunk ltogatinak kiszolglshoz nagyobb svszlessgre lesz
szksgnk.
Legynk tisztban azzal, hogy amennyiben a weboldalunk teljes mrtkben

a hang-, illetve videtartalomra tmaszkodik, s csak nagyon korltozott
mennyisg szveget s kpet tartalmaz, akkor a lehetsges ltogatk egy rsze
nem hallja, illetve ltja majd a kzlendnket. Ennek oka a webhely ltogatinak

rendelkezsre ll, korltozott kpessg szmitgp, illetve az alacsony sv
szlessg. Az ilyen felhasznJk szmra nyjtsunk ms lehetsget a tartalom
megismersre.
ljnk a YouTube (ht tp: //www. youtube. com/) s a hozz hasonl internetes
videmegoszt szolgltatsok nyjtotta lehetsggeL A YouTube azon fell,
hogy trhelyet biztost a felvteleinknek, mg a felvtel begyazshoz
szksges kdot is megadja. A 12.4. brn pldul a vilg legcukibb kutyusnak
YouTube-oldala lthat. Ha az brn lv, Embed (Begyazs) felirat rszen
megadott pldakdot tmsoljuk valahov, az albbi kdsorokat kapjuk:
cobject width="425" height="344">
cparam name="movie"
value="http://www.youtube.com/v/yPxiHd2BOpo&rel=O&colorl=Oxblblbl
&color2=0xcfcfcf&feature=player_profilepage&fs=l"></param>
cparam name="allowFullScreen" value="true"></param>
cparam name="allowScriptAccess" value="always"></param>
cembed
src="http://www.youtube.com/v/yPxiHd2BOpo&rel=O&colorl=Oxblblbl&c
olor2=0xcfcfcf&feature=player_profilepage&fs=l"
type="application/x-shockwave-flash" allowfullscreen="true"
allowScriptAccess="always" width="425" height="344"></embed>
</object>
Ez a kdrszlet mr beilleszthet egy weboldalba.
12.4. bra
A YouTube nem csak
trhelyet biztost a jelvte

leinknek, de megadja
a weboldalon hasznlhat
hivatkozsok s <object>
cmkk kdjt is
12. ra
sszefoglals
A mai rn megtanultuk, hogy miknt gyazhatunk mozgkpet s hangot a webolda
lainkba. Megismertk a multimdiafjlhoz vezet egyszer hivatkozsok hasznlatnak
mdjt- ez a multimdis tartalom lejtszsra hasznlhat legltalnosabban tmoga
tott, de legkevsb rugalmas lehetsg. Tudjuk mr azt is, hogy miknt gyazhat
multimdis tartalom kzvetlenl egy weboldalba az <object> cmkvel, st azt is,
hogy a minl tbb bngszvel val egyttmkds cljbl miknt egsztsk ki
az <object> cmkt az <embed l> cmkvel. Az <object> s az <embed l> elem
rengeteg multimdis fjltpus begyazsra alkalmas - kezelhet vele a pldul
a WAY, az MP3, a RealAudio s a MIDI, nem beszlve az AVI, a W MV s QuickTime
tpusrl, hogy csak nhnyat emltsnk.
A 12.1. tblzat a mai rn trgyalt HTML-elemeket foglalja ssze.
12.1. tblzat
A 12. rn
trgyalt HTML-elemek s -jellemzk
Elem/jellemz
Lers
<object>...<lobject>
Kpet, mozgkpet, Java-kisalkalmazst,

ActiveX-vezrlt s ms objektumokat illeszt
hetnk be vele egy weboldalba.
<par am> ... <l pararn >
Egy objektum futsidej belltsait- pldul

az oldalon elfoglalt hely szlessgt s magas
sgt- adhatjuk meg vele.
Jellemzk
name="nv"
value="rtk"
Paramterknt megadott tulajdonsg neve.

Paramterknt megadott tulajdonsghoz
rendelt rtk.
<embed l>
Bngszbvtmny ltal beolvashat, illetve

megjelenthet multimdiafjl begyazsra
szolgl. Technikai rtelemben elavultnak sz
nt, de mig is hasznos, mivel a bngszk
egyelre nem tmogatjk teljes knen
az <object> cmkt.
Jellemzk
width="szlessg"
A begyazott objektum kppontban mrt sz
height="magassg"
A begyazott objektum kppontban mrt ma
lessge.
gassga.
type="MIME- t p us"
A multimdis tartalom MIME-tpusa.
src=" tartalom_URL"
A begyazand fjl helyt megad URL.
210
] Tanuljuk meg a HTML s a CSS hasznlatt 24 ra alatt
12.1. tblzat
A 12. r11 trgyalt HIML-elemek s -jellemzk
Elem/jellemz
(jo(ytats)
Lers
controls=" vezrl k"
A mdialejtsz alkalmazs felhasznl ltal

hasznlhat vezrli; az all rtk hatsra
minden vezrl hasznlhat.
loop=" ismtls"
Megadja, hogy a mdiafjl vghez iVe jra

kell-e kezdeni a lejtszst. Lehetsges rtkei:
true (igaz) s false (hamis).

autostart=
"automatikus_indts"
Megadja, hogy az oldal betltsekor automatikusan kell-e elindtani a lejtszst. Lehetsges

rtkei: true (igaz) s false (hamis).
pluginspage=
A mdiafjl lejtszsra alkalmas bvtmny
"bvtmny_helyt_megad_URL"
helyt megad URL.
Krdezz-felelek
K:
Sokat hallani az raml viderl s hangrl (streaming video/audio).

Mit takarnak ezek a fogalmak?
V:
em is olyan rg a hang- s mozgkpfjlok letltse a legtbb modemmel

percekbe, nha rkba telt, ami komolyan korltozta a weboldalakba gyazott
mozgkp s hang elteiiedst. Manapsg mindenki az raml hang s vide fel
mozdul el, ugyanis ezek lejtszsa az adatok letltse kzben is megoldhat.
Ms szval: az ilyen fjlokat nem kell a lejtszsukat megelzen teljes egszk
ben letltennk.
Az raml tartalom lejtszsa mostanra szles krben, a legtbb mdialejtsz
ltal tmogatott -legyen sz akr nll alkalmazsokrl, akr bvtmnyekrL
Az <obj ee t> cmkkkel begyazott tartalmat a httrben mkd lejtsz- ha
kpes r - igyekszik adatfolyamknt lejtszani.
K:
Mi alapjn vlasszak audiovizulis formtumot a QuickTime, a Windows AVI,

a Windows WAV, a Rea!Video, a Real Audio s az MPEG formturnak kzl?
Van-e kzttk jelents klnbsg?
V:
A QuickTime -br ltezik lejtsz Windowsra is - a Macintosh-felhasznlk

krben a legnpszerub. Hasonl a helyzet az AVI s a WM V, illetve a WAV s
WM A formtumokkal: ezek a Windows-felhasznJk szmra kszltek, de
Macintosh-on is tallunk olyan lejtszt, amely tmogatja ket. Az MPEG szintn
npszer hang- s mozgkp-trolsi szabvny. Az MPEG-3 (MP3) mostanra
klns npszersgre tett szert a hasznll1at hi-fi szabvnyok krbl. Szintn
az MPEG-szabvnyon alapul az Apple cg AAC formtuma, amely az Olvas
szmra esetleg inkbb, rnint az iTunes mdialejtsz-alkalmazs sajt zenei
formtuma ismert.
12. ra
!211
Ha a leend ltogatink tbbnyire Windowst hasznlnak, akkor a mozgkpeket

rdemes AVI, illetve WMV, a hangfelvteleket pedig WAY, WMA, illetve MP3 for
mtumban trolnunk. Ha a ltogatk kztt sok a Macintosh-felhasznl, akkor
hasznljuk a QuickTime, a Real Video, illetve a RealAudio formtumot, vagy
legalbb adjuk meg a vlaszts lehetsgt. Az MP3 formtum szintn hasznlha
t Macintosh-on. Ha az opercis rendszerek kztti tjrhatsg ltfontossg,
rdemes megfontolnunk, hogy ne tegyk-e a weboldalunkon ltalnoss az MP3,
illetve a Real Video s RealAudio formtum hasznlatt- br ez utbbiak megte
kintshez s meghallgatshoz csak a
http: 1 lwww. real. comlplayer 1
webol
dalrl letlthet alkalmazs hasznlhat.
Ismtls
Ismtl krdsek
1.
Mi az a legegyszerub mdszer, amellyel a webhelynkn a lehet legtbb
2.
Mi az a HTML-kd, amellyel gy valsthat meg a
ltogat szmra elrhet mozgkpet tehetnk kzz?

myvideo. av i
nev fjl
begyazsa egy weboldalba, hogy minden jelentsebb bngszt hasznl

ltogat meg tudja nzni? A felvtel egy 320 kppont szles s 305 kppont
magas terletet foglal el a kpernyn.
3.
Milyen belltsokat kell megadnunk az
<obj ee t>
elemen belli
<par am>
cm
kben, ha azt szeretnnk, hogy a weboldal a begyazott felvtelt jra meg jra
lejtssza?
Vlaszok
1.
Egyszeren ltrehozzuk a r mutat hivatkozst:

<a href="myvideo.avi">my video</a>
2.
Minthogy a felvtel a Microsoft cg AVI formtumban ll rendelkezsnkre,

a Windows Media Playert rdemes az oldalba illeszteni, mgpedig az albbi
HTML-kddal:
<object
width="320"
<param
height="305">
name="type"
value="video/x-ms-avi"
<param name="URL" value="myvideo.avi"
/>
/>
212

<param name="uiMode"
value="full" />
<param
name="autoStart"
<embed
width="320"
src="myvideo.avi"
value="false"
height="305"
controls="All"
/>
type="video/x-ms-avi"
loop="false"
autostart="false"
pluginspage="http://www.microsoft.com/windows/windowsmedia/">
</embed>
</object>
3.
<par am name=" loop" value=" true" />
Gyakorlatok
Prbljunk meg sajt kezleg elkszteni egy felvtelt, majd a ksz mvet
gyazzuk be egy weboldalba, vagy keressnk ingyenesen elrhet felvteleket
a Weben, s gyakoroljuk a begyazott objektumok elhelyezst valamilyen
szveget tartalmaz oldalon.
A mai rn tanult, a mdiafjlok begyazst segt cmkk, illetve mdszerek
a Flash formtum fjlok esetben is mkdnek. Ltogassunk el a Flash honlap

jra, azaz a http: l /www. adobe. com/products/ flash/ weboldalra, s ismer
kedjnk meg a weboldalak interaktv animcikkal val bvtsvel kapcsolatos
lehetsgekkel.
13. RA
Keretek hasznlata
A lecke tartalma:
Keretvz kialaktsa
Taln jrtunk mr olyan webhelyen, ahol a bngszablakon bell ltszlag tbb k

lnbz oldal jelent meg. Az a helyzet, hogy a bngszablakon bell ilyenkor valban
tbb klnbz oldal jelenik meg egyszerre, mghozz gy, hogy a bngszablak
tbb, klnbz weboldalt megjelenteni kpes terletre oszlik. Ezek a klnll
terletek keret (frame) nven ismeretesek. A felhasznl nzpontjbl termszetesen
az nll keretek egysges webes tartalmat hordoz abiakk formldnak, de a httr
ben nll oldalak mkdnek.
214 [Tanuljuk meg a HTML s a CSS hasznlatt 24 ra alatt
Mik azok
A
keretek?
keret olyan tglalap alak terlet a bngszablak belsejben, amely kpes egy
weboldalt ms weboldalakat megjelenit keretek mellett megjelenteni. A 13.1. bra

els pillantsra taln gy nz ki, mint egy szokvnyos weboldal, pedig valjban kt
klnll HTML-oldalt tartalmaz, amelyek azonban ugyanabban a bngszablakban
jelennek meg. Mindkt oldal a sajt keretn bell lthat. A keretek egyms felerr
kaptak helyet, s egy vzszintes sv vlasztja el ket.
fH dit Y- Hi:ttory llooknwsb look tldp
. c
http://www.yourdom&in.com/index.html
Sample Framed Site: Home

This is an example oftbe 11ome page.
13.1. bra
Keretek segtsgvel egyszerre
tbb weboldalt is megjelenthe
Don
tnk egy bngszablakban
http:/www.yourdomain.comfrndex.html
-+
HO\lE :: PRODlTTS :: SERYICES :: CO:\TACT
Sample Framed Site: Products

Thiss an aomple of the 'prcxhlcts' page.
13.2. bra
A Products feliratra kattintva
Don
az als oldal lecserldik, de

a fels keret vltozatlan marad
13. ra
Keretek hasznlata
!215
Ha egy weboldal kereteket hasznl, akkor a keretek rendszerint arra szolglnak, hogy
egy llandan jelen lv, a webhely klnbz rszeire mutat hivatkozsokat tartalma
z ment jelentsnk meg velk- ilyen men lthat a 13.1. bra fels rszn. Amikor
a pldban szerepl valamelyik hivatkozsra kattintunk, a fels keret vltozadan maradaz j oldal betltsre s megjelentsre az als keret szaigl (lsd a 13.2. brt).
Nem rt, ha az Olvas tudja, hogy a keretek hasznlata rgta a webtervezs sokat
vitatott s bosszant problmi kz tartozik. A keretek hasznlatval jr elnyk
sosem ellenslyoztk a fellp htrnyokat Ugyanakkor amiatt, hogy a bngszk
eltren kezeltk a HTML- s CSS-szabvnyokat, sokig minden htrnyuk ellenre
keretekkel valstottunk meg bizonyos clokat. A knyv szerzi webfejlesztknt
az albbi okok miatt nem javasoljk a keretek hasznlatr:
A keretek nem elgtik ki a Vilghlnak azt az alapelvt, miszerint a webes

tartalom egyes rszei olyan egysges hiperszvegg szervezdnek, amelynek
a rszei kztt egyetlen webcmbl - URL-bl - ll hivatkozsok jelentik
az sszekttetst.
A keretekre pl oldalakat igen nehz kinyomtatni. Csak a keretvz ltszik

a nyomtatsban, kivve ha a kinyomtatni kvnt keretre kattintunk, s a helyi
menbl- mr ha van ilyen- a "Keret nyomtatsa" menpontot vlasztjuk
Ha egy keret kdolsa hibs, vagy ha hibtlan ugyan, de aljas szndkkal

kszlt, akkor a felhasznl bennragadhat az oldalon, elzrva a kereten kvl es
tartalom megtekintsnek lehetsgtl.
A kereteket a Web trtnetben mindig a szabvnyos, profi s knnyen feldol

gozhat oldalakat eredmnyez webfejlesztsi s -tervezsi mdszerek helyett
hasznltk Semmi okunk arra, hogy a jobb, CSS-elrendezsre pl mdszer
helyett a kevsb kifinomult mdszert vlasszuk.
A fent emltett- s ms egyb- okok miatt a HTML 5 szabvnybl trltk

a kereteket. Az elavult <frame/>, <frameset> s <noframes> cmkk a jvben
egyszeren megsznnek ltezni.
A fenti htrnyok ellenre a mai rn ltrehozunk egy keretekre pl, nagyon egysze
r webhelyet Igen valszn ugyanis, hogy tallkozunk mg keretekre pl oldalak
kal, s jl jhet, ha tudunk hasonl kinzet s felhasznli lmnyt nyjt oldalt ksz
teni, de keretek hasznlata nlkl. Ha ilyen feladatunk akad, fontos tisztban lennnk
a keretek kialaktsnak mdjval- gy sikeresebben szabadulhatunk meg tlk. Ezen
kvl megismerkednk egy olyan kerettpussal- az ilyen keret az <iframe> cmkvel
hozhat ltre-, amely igen fontos clt szolgl, s a HTML 5-ben is fennmarad.
A knyv ksbbi rszben megtanuljuk, hogy ugyanilyen mkds miknt oldhat
meg az XHTML s a CSS segtsgve!. Addig is - a fejezet anyagt kvetve - ksztsk
el az egyszer, keretekre pl webhelynket, hogy megtanuljuk, tniknt lehet
az ilyen webhelyeket az alkotelemeikre szedni, hogy ms mdszerekkel jra ssze
rakhassuk azokat.
216
Keretvz kialaktsa
Ebben a rszben azt mutatjuk be, hogy miknt kszthet el a 13.1. s a 13.2. brn is
lthat, egyszer, keretekre pl oldal. Az egyes keretek tartalmt szoksos HTML
oldalknt hozzuk ltre. Az oldalak a kvetkezk: top. htrnl (ez tartalmazza a tbbi
oldalhoz vezet hivatkozsokat), home. htrnl, products. htrnl, services. htrnl s
contact. htrnl. Az oldalak egyike sem tartalmaz egy olyan cmkt sem, amellyel
az elz rk sorn ne tallkoztunk volna. Az oldalak egybefogsra egy klnleges

szerep weboldalt, egy gynevezett keretvzat hasznlunk. Esetnkben ennek
az oldalnak a neve
index.htrnl.
A keretvzat tartalmaz oldal elksztse

A keretvz (frameset) egy olyan HTML-oldal, amely arra utastja a bngszt, hogy
a bngszablakot ossza tbb rszre, s azt is megadja, hogy az egyes keretekben
mely weboldalaknak kell megjelennik
A keretvznak otthont ad dokumentum teht nem br sajt tartalommal, csak arra val,
hogy a bngsznek megadja a tovbbi betltend oldalak nevt, illetve az elrendez
sk mdjt. A 13.1. plda a 13.1. s a 13.2. brn lthat webhely keretvzat tartalmaz
oldalt mutatja be.
13.1.
plda
A 13.1. brn lthat webhely keret!Jzat tartalmaz oldala
<?xml version="l.O"
<!DOCTYPE
html
encoding="UTF-8"?>
PUBLIC
"-//W3C//DTD
XHTML
1.0
Frameset//EN"
"http://www.w3.org/TR/xhtmll/DTD/xhtmll-frarneset.dtd">
<html xmlns="http://www.w3.org/1999/xhtrnl"
xml:lang="en">
<head>
<title>Sample
Frarned
Site</title>
</head>
<frameset rows="50,*">
<frame src="top.html" name="top"
l>
<frame src="home.html" narne="main"
/>
<noframes>
<body>
<hl>Sarnple
Frarned
Your browser
</body>
</noframes>
</frameset>
</html>
Site</hl>
does not
support frarnes.
Sorry!
13. ra
Keretek hasznlata 211
A 13.1. pldban a <body> cmke helyre a <frameset> (keretvz) cmke kerlt. Azok
a cmkk, amelyek a <body> cmkepr ltal kzrefogva szerepelnek, nem kerlhetnek
a <frameset> cmkk kz. A pldban szerepl <frameset> elem rows (sarok)
jellemzje hatsra a keretek egyms felett, egy tblzat soraihoz hasonlan helyez
kednek el. Ha a kereteket egyms mell kvnjuk elhelyezni, akkor a rows jellemz
helyett a cols (oszlopok) jellemzt kell hasznlnunk.
fffli1
Fontos, hogy szrevegyk, hogy a mintaoldalon nem a knyvben eddig hasznlt

DOCTYPE-bejegyzs szerepel. Ennek az az oka, hogy az XHTML 1. 1 szabvnyban
nem szerepel a keretek hasznlata. Vagyis, ha azt szeretnnk, hogy az oldalaink
rvnyesek legyenek, az XHTML 1.0 keretvzakhoz val dokumentumtpus-megha
trozst (Document Type Definition, DTD) kell hasznlnunk. Egy olyan klnleges
meghatrozsrl van sz, amelyet ppen a kereteket hasznl oldalakhoz terveztek.
A sarok, illetve az oszlopok szmt neknk kell megadnunk, mgpedig vagy kppontra
pontosan, vagy a teljes bngszablak szzalkos arnyban. Csillaggal ( ) jellhetjk,
*
ha azt szeretnnk, hogy a keret kitltse az ablakbl mg rendelkezsre ll rszt.

Ha tbb keretnl is csillag szerepel, akkor az ilyen ablakok a fennmarad rszen egyen
l arnyban osztoznak.
A 13.1. pldban a <fr ameset rows=" 50,*"> cmke gy osztja fgglegesen kt
rszre az ablakot, hogy a fels keret pontosan 50 kppont magas lesz, az ablakbl
fennmarad rszt pedig az als keret kapja. A fels keret tartalmazza a top. html
oldalt -lsd a 13.2. pldt-, az als keretben pedig a 13.3. pldban ismertetett
home.html
13.2. plda
oldal jelenik meg.
A mintaolda/uavigcis svja, azaz a top.lltml oldal

<!DOCTYPE
html
PUBLIC
"-//W3C//DTD XHTML
1.0
Transitional/lEN"
<head>
<title>Sample
Framed Site</title>
</head>
<body style="background-color:#OOOOFF;">
<div style="text-align:center;color:#FFFFFF;font-weight:bold;
font-size:16pt">
<a style="color:#FFFFFF;" href="home.html"
target="main">HOME</a> ::
<a st yle="color:#FFFFFF;" href="products.html"
target="main">PRODUCTS</a>
<a style="color:#FFFFFF;"
::
href="services.html"
target="main">SERVICES</a> ::
218

ca style="color:#FFFFFF;"
href="contact.html"
target="main">CONTACTc/a>
c/div>
e/body>
c/html>
A 13.1. pldban a keretvzakat kveten a
c body>
s a
</body>
cmke kztt
egy teljes rtk weboldalt tallunk. Megfigyelhetjk, hogy ez a weboldal sem

a 13.1., sem a 13.2. brn nem lthat. A kereteket tmogat webbngszk
ugyanis figyelmen kvl hagyjk a
s a
cnoframes>
</noframes>
cmke kztti
rszt. Manapsg minden jelentsebb bngsz kpes a keretek kezelsre, azaz ma

mr lnyegesen kevesebb a keretek hasznlatbl ered, ilyen jelleg problma,
mint akr csak nhny ve. Ugyanakkor a mg mindig valamilyen si bngszt
hasznl nhny ltogatra gondolva nem tl megterhel elhelyezni a
<noframes>
cmkt az oldalon - persze ha egyltaln hasznlunk kereteket az oldalon.
13.3. plda
c?xml
A mintaoldal als rszn tallhat, valdi tartalommal br home.html oldal
version="l.O" encoding="UTF-8"?>
c!OOCTYPE
html
PUBLIC
"-//W3C//DTD
XHTML
1.0
Transitional/lEN"
xml:lang="en">
<head>
<title>Sample Framed
Site</title>
c/head>
<body style="background-color:#FFFFFF">
<hl style="text-align:center">Sample
Framed
<p style="text-align:center">This is
an
Site:
example
Homec/hl>
of
the "home"
page.</p>
</body>
c/html>
A 13.2. s a 13.3. pldban egyarnt az XHTML 1.0 tmeneti (transitional)

dokumentumtpus-meghatrozst hasznljuk. Az XHTML 1.1 s az jabb vltoza
tok lnyegesen szigorbbak, de a keretek miatt neknk amgy is az XHTML 1.0-s
vltozat szksges. Ezzel indokolhat, hogy a keretek belsejben is ezt a dokumentumtpus-meghatrozst hasznljuk.
A fenti pldban a fels navigcis sv magassgt 50 kppontban rgztettk. Minthogy
azonban nem tudjuk megjsolni a felhasznlk bngszablaknak mrett, sok

esetben knyelmesebb kppont helyett szzalkban kifejeznnk a sarok s oszlopok
mrett. Ha pldul azt szeretnnk, hogy a bal oldali keret a bngszablak 200/o-t
foglalja el, a jobb oldali keret pedig legyen a maradk 800/o, akkor az albbi cmkt is
hasznlhatjuk
cframeset cols="20%,80%">
13. ra
Keretek hasznlata
!219
Amikor a keret mrett kppontban adjuk meg, okos dolog legalbb a keretvz egyik
keretben vltoz szlessget(*) megadnunk. A dokumentum gy megnhet, s
alkalmas lehet akrmekkora bngszablak kitltsre.
Az egyes keretek kitltse

A <frameset> s a </frameset> cmke kztt kell elhelyeznnk azokat a <frame />
cimkket, amelyekbl kiderl, hogy az egyes keretekben mely HTML-oldalak jelenje

nek meg. Megjegyeznnk, hogy amennyiben kevesebb <frame /> cmknk van, mint
ahny keretet a <l frameset> cmkben megadtunk, akkor a ltszmon felli keretek
resen maradnak. Az egyes <frame /> cmkken bell megadott <src> elemmel jelez
hetjk a betltend weboldal helyt. Egy weboldal URL-je helyett kerlhet ide egy
kpfjl is- ilyenkor a keretben csak az adott kp jelenik meg.

A keretek biztostotta igazi lehetsgek akkor kezdenek nyilvnvalv vlni, amikor
egy <frame /> elemben a name (nv) jellemzvel egyedi nevet adunk a keretnek
Ettl a pillanattl kezdve az oldalon elhelyezett hivatkozsokkal megvltoztathatjuk
az elnevezett keret tartalmt. Ehhez az <a> elem target (cl) jellemzjt kell
hasznlnunk. A 13.1. pldban pldul megtallhat az albbi cmke:
<frame src="home.html"
name="main"
/>
A fenti kdsor az oldal betltsekor az als keretben a home. html oldalt jelenti meg,
a keretnek pedig a main nevet adja.
A fels keret kialaktst vgz, a 13.2. pldban olvashat kdban tallhat az albbi
hivatkozs:
<a style="color:#FFFFFF;" href="services.html"
target="main">SERVICES</a>
Amikor a felhasznl a fenti hivatkozsra kattint, a main nev(als) keretben

a services. html oldal jelenik meg. Ha elhagynnk a target="main" jellemzt,
az oldal az aktulis(fels) keretben jelenne meg.
Technikai rtelemben a name jellemz elavultnak szmt, s a ptlsra mr ltezik

az id jellemz. Mindazonltal napjaink webbngszi az id helyett tovbbra is
a
name
jellemzt hasznljk az olyan esetekben, amikor keretek szerepeinek clknt
megadva. A
name
jellemz hasznlata ugyanakkor nem tkzik az XHTML szabvny
rvnyessgi szablyaiba, gy aztn mg egy darabig a keretek azonostsra

a
name
jellemzt kell hasznlnunk. Termszetesen nem baj, ha mindkt jellemzt
megadjuk.
A serv ice s.html oldal kdjt helytakarkossg miatt nem mutatjuk be- szokvnyos
weboldal, amely semmilyen, a keretek tmakrhez tartoz rdekessggel nem br.
A 13.2. brn lthat, hogy miknt nz ki a keretvz belsejben.
Vannak HTML-jellemzk, amelyek arra szolglnak, hogy a kereteket hasznl
weboldalon eltntessk a keretek kztti hatrvonalakat, vagy a margk mretnek
cskkentsvel nagyobb helyet kapjunk a kicsi keretek belsejben, esetleg a kere
teknek megtiltsuk a grdtsvok megjelentst. A 13.4. pldban a 13.1. pldakd
mdostott vltozatt talljuk Kt vltozs kerlt a kdba: a
<frame>
cmkn bell
elhelyeztk a scrolling="no" s a frameborder="O" jellemzt.
13.4. plda
A 13.3. brn bemutaton webhely keretvza
<?xml version="l.O"
<!DOCTYPE html
encoding="UTF-8"?>
PUBLIC
"-//W3C//DTD
XHTML 1.0
Frameset//EN"
"http://www.w3.org/TR/xhtmll/DTD/xhtmll-frameset.dtd">
<html
xml:lang="en">
<head>
<title>Sample Framed
Site</title>
</head>
<frameset rows="50,*">
<frame
src="top.html"
<frame
src="home.html"
name="top"
scrolling="no"
name="main"
frameborder="O" />
scrolling="no"
frameborder="" />
<noframes>
<body>
<hl>Sample
Framed
Your browser
does
Site</hl>
not
support
frames.
Sorry!
</body>
</noframes>
</frameset>
</html>
. c
http://-.yourdom.in.cam/indal.html
HO:\IE :: PRODlTTS :: SER\'ICES :: CO:\TACT
Sample Framed Site: Home

Tmsis an
<Xample ofthe 'hom<' page.
13.3. bra
A 13.4. plda alapjn kialakul
o.
..
oldal- a <frame/> elemet bvtettk

jabb jellemzkkel
13. ra
Keretek hasmlata 221

A bels kereteket Cinline frame; szvegkzi keret) nem sjtjk azok a hasznlhatsggal
kapcsolatos problmk,amelyekkel a szokvnyos kereteknl tallkozunk. Persze az is
igaz, hogy a bels kereteket msra hasznljuk- nem az elrendezs kialaktsakor
gyeskednk velk. Az <ifrarne> cmke szerepe inkbb az <object> cmkhez
hasonl,azaz egy ltez dokumentumban tudunk vele elhelyezni valamit. Ez a "valami"

az <object> cmke esetben ltalban valarnilyen multimdis tartalom, az <i frame>
elemet viszont egy teljesen nll HTML-oldal, kp vagy egyb dolog begyazsra
hasznlhatjuk A 13.5. s a 13.6. pldban azt a kdot ismertetjk, amelyik a 13.4. bra
bels keretnek kialaktst vgzi.
13.5. plda
<iframe> cmkt hasznl XHIML-kd

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML
1.0
Frameset//EN"
<head>
<title>Using
an
iframe</title>
</head>
<body
style="background-color:#CCCCCC">
<hl
style="text-align:center">Inline Frame
<div
Example</hl>
<iframe
src="iframe src.html"
style="width:SOOpx;height:lOOpx;border:lpx
solid black;
background-color:#FFFFFF">
<p>Uh oh ...your
browser
does
not
support
iframes.</p>
<li frame>
</div>
</body>
</html>
A 13.5. pldban egyetlen olyan XHTML-kdrszlet tallhat, amellyel eddig mg nem

tallkoztunk, nevezetesen maga az <ifrarne> cmke. Ltjuk, hogy az src (source,azaz
forrs) jellemznek kell rtket adnunk, s azt is ltjuk- tbbek kzt -,hogy miknt
trtnik a szlessg, a magassg, a kerettpus s a httrszn belltsa. A 13.6. pldakd
az <iframe> elem forrsaknt megadott fjl tartalmt ismerteti- egy szokvnyos
XHTML-fjlrl van sz, nmi szveggel s nhny formzsi belltssaL
13.6. pldakd
A 13.5. plda <iframe> eleme ezt a kdot hvja
<?xml version="l.O"
<! DOCTYPE
html
encoding="UTF-8"?>
PUBLIC
"-//W3C//DTD
XHTML
l. 0
Fr arneseti /EN"
<head>
<title>iframe
source</title>
</head>
<body>
<P
style="color:#FFOOOO;font-weight:bold">I AM A
SOURCE
DOCUMENT ...inside
an
iframe.</p>
</body>
</html>
. ftl lhmg
"
an
l=
if'mne - Mozlla F.mox

-
!:l
liil
http://www.yourdomain.comftframehtml
..
'
-r
Inline Frame Example

1 ..\
.
M A SOUR.CE DOCU.MENT...iuide
a.
ifr.tmP.
Done
,.;.
13.4. bra
A 13.5. plda <iframe> eleme azt a bels keretet hatrozza meg, amelynek a kdja
a 13.6. pldban lthat

Bels kereteket sokszor hasznlunk olyankor, amikor egy weboldalba ms webhe
lyekrl szrmaz tartalmat akarunk beilleszteni. Gyakran van a segtsgnkre, ha
a felhasznlnak egy kls hirdetsszolgltat hirdetseit szeretnnk megmutatni, vagy
ha a Google Site Search szaigitats eredmnyeit kvnjuk a felhasznl el trni
(ilyenkor valjban a Google cg kerestechnolgijt hasznostjuk a sajt cljainkra).
A 13.5. brn azt ltjuk, ahogy egy oldalsablonban az
<i frame>
cmke megjelenti egy
keress eredmnyt.
A 13.5. brn minden, ami a fehr terleten tallhat, valjban egy bels keretben kap
helyet. A keretet kialakt
<i frame>
elem
src
jellemzje egy a Google cg webhelyn
fut parancsfjira mutat, amely a Digital Inspiration webnapl oldaln bell jelenti meg
13. ra
Keretek hasznlata
1 223
a keress eredmnyt. A 13.5. brt figyelmesen szemllve- br nem valszin, hogy

a kpen is ltszik- egy vkony, szrke hatrolvonalat fedezhetnk fel a bels keret
krl.
Az ra korbbi rszben megismert <frame/> cmkvel ellenttben az <i frame>
cmknek van ltjogosultsga, s mg a HTML 5 szabvnynak is rsze.
Oigitallnspinrtion Search Engine - Powe: by Google - Mcmn. firefax

fi [dit -
Htltory
: C
Bookmartes !ook: 1::felp
rn:J
http:l/surck.L.bnol.orC)I1q=
N.U1830890413B9%3Anbvjwlb8&cot=f0RDJ%3AlO&ie=.VTF-3&.H-=SeuchqJJ1
..
., Bo:: to P
&
Beltome a Memiwl'
digital insp!!\9.!J
Wldqets
Technoaogy News
COO Wl!'bsnes
Co-gle"
CIIStO!IIS..rdl
"'
Yessage Board
Ads by Googl e
Twitter Fnend Adder
TweelAddet com
Automatic Tweet. Auto Follow Twiner Followers Software
Twilter
Twlner 1s a free soc1ai messag1ng utility for staytng connected
www TW!tler com
Vral Tweets Soflware
www VlraJtweets com
Earned $4000
Too Friends for Twitter

fave UO com
Make lop fnends
DO
One
TWilet PfO't'en System. Act Now lt's Free
background
3 Easy Steps
Results 1 - 10 for twitter (0.25 seconds)
Gogi<"
The Best Twitter Clleni for Windows Desktop

The best twitter el lent for Windows JS Twturl- rt IS h1ghly customzabla and
uses the Adobe AIR platform
www labnol orgtsoftwaretdownlc:rad/best-twln r.cJumt-software 12135/
CuSNI'Ctl
Mass Text Messag10g
Use Googte Taik Wlth Twitter- Soy10a ls Fun!. Dlaltattnspuabon
ln my opmon Twitter s so successful (and not JUSt Wlth guys) because

and becaus rt has so many mput and notrticat1on channefs ...
labnol blogspot com/2007t01iuse...google-tal1- 1th-twitter-spylng- htrrd
rt s
Ads by Google
dead easy to use
Send Uodates To Twitter VIa Ematl from Mobt Phones- No SMS Bt lis
Leam how to pubhsh updates on twitter from your moble phone us1ng amal wrthout pa)"ng
Setup a campa1gn m mmutes Wlth

the leader m Bolk SMS- FREE Tnal
Trumpia com
Endtess Twitter Followers
l
e
;l:,::r;:nE;! !;o:: : Tnal
TeAdd@f cow
Oon<
il
13.5. bra
A
Google Site Search keres eredmnyeit egy bels keretben jelentjk meg
sszefoglals
A mai rn megtudtuk, hogy miknt jelenthet meg tbb oldal egyszerre gy, hogy
a webbngsz ablakt keretekkel tagoljuk Megismerkedtnk a keretvz-oldalak ltre
hozsnak mdjval, s gy mr kpesek vagyunk szablyozni a keretek mrett s
elrendezst, s meg tudjuk adni a keretekbe betltend oldalakat. Megtanultunk
olyan hivatkozsokat megadni, amelyek gy vltoztatjk meg egy-egy keret tartalmt,
hogy a tbbi keret vltozatlan marad. Tanultunk nhny olyan elhagyhat belltsrl
224
is, amelyek a keretek kztt lv mretezhet hatrolkat s a keretekben lv

grdtsvokat vezrlik. Az ra vgn pedig elsajttottuk a bels vagy szvegkzi
keretek hasznlatr, amelyekkel akr a sajt webhelynkrl szrmaz, akr mshol
tallhat oldalak tartalmt illeszthetjk be a sajt oldalainkba.
A 13.1. tblzat a mai rn trgyalt elemeket s jellemzket foglalja ssze.
13.1.
t6blzat
A 13. rn trgyalt HTML-elemek s -jellemzk
Elemek s jellemzk
Lers
<frame />
A <frameset> cmkn bell ad meg egy adott keretet
Jellemzk
src=" url"
A keretben megjelenteni kvnt fjl URL-je.
id=" nv"
Az <a href> hivatkozsokban a target jellemzvel
clknt megadhat keretnv az XHTML-szabvny

szerint.
name=" nv"
Az <a href> hivatkozsokban a target jellemzvel
clknt megadhat keretnv. Egy szp napon elvileg

majd felvltja az id jellemz, de egyelre mg
hasznlatban van, mivel a jelenlegi webbngszkkel
ez mkdik.
scrolling= "yes/no/au to"
Megadja, hogy a keretnek legyen-e grdtsvja.

A lehetsges rtkek: yes (igen), no(nem) s auto
(ha kell, akkor legyen).

noresize="noresize"
Megakadlyozza, hogy a fell1asznl az egrrel

tmretezze az adott keretet - s esetlegesen
a szomszdos kereteket.
<frameset>... </frameset>
A fablakot keretekre osztja, amelyekben nll
oldalak jelenilietk meg.
Jellemzk
rows="sorok_szma"
Az ablakot, illetve a keretvzat fgglegesen, sorokra
osztja fel. A sorok szmt megadhatjuk kzvetlenl is

(pldul: 7), vagy az ablak teljes szlessgnek szza
lkban (pldul: 25%). A csillag(*) azt jelzi, hogy
a keret a teljes fennmarad helyet magba foglalliatja
- ha tbb helyen adunk meg csillagot, akkor az ilyen
keretek kztt a fennmarad hely egyenl arnyban
oszlik el.
cols="oszlopok_szma"
A rows jellemzhz hasonlan mkdik, azzal
a klnbsggel, hogy az ablakot, illetve keretvzat

vzszintesen, oszlopokra osztja fel.
13. ra
13.1. tblzat
Keretek hasznlata
A 13. rn trgyalt llM.L-elemek s -jellemzk
1225
(folytats)
Elemek s jellemzk
Lers
frameborder="yes/no"
Azt adja meg, hogy egy keret kapjon-e hatrolvo
<noframes>... </noframes>
A keretvzat tartalmaz dokumentumban olyan
nalat A lehetsges rtkek: yes (igen) s no (nem).

tovbbi szvegtrzset adhatunk meg vele, amely
a keretek hasznlatt nem tmogat bngszkben
jelenik meg- rendszerint egy <body> ...</body>
cmkepr kerl a <noframes> cmkepr belsejbe.
<iframe> ...</iframe>
Bels keretet hoz ltre. A <frame /> elem valamennyi

jellemzjt hasznlhatjuk vele, s CSS segtsgvel
formzhat.
Krdezz-felelek
K:
Megoldhat, hogy az egyik keretben valaki ms weblapjt jelentsem meg, mi

kzben a msikban ezzel egyidejleg a sajt weboldalam lthat? Mi trtnik,
ha ezek a weboldalak is hasznlnak kereteket?
V:
Egy keretbe az Internet vagy a bels hlzat brmely weboldala betlthet.

Ha a betlttt weboldal egy keretvz, akkor a benne lv keretek az oldalnak
helyet ad keret kiterjedsnek megfelelen mretezdnek t.
Egy keretben elhelyezhetjk pldul a kedvenc hivatkozsainkat, s egy msik
keretet hasznlhatunk a hivatkozott tartalom megjelentsre. gy annak kockz
tatsa nlkl nyjthatunk hivatkozsokat, hogy a ltogat eltved, s sohasem
tall vissza a webhelynkre.
Persze nem rt azt is tudnunk, hogy ha egy oldalunk keretben valaki msnak
a webhelyt jelentjk meg, akkor esetleg jogi hercehurcnak nznk elbe.
Okosabb, ha a kereteinkben elhelyezett oldalak tulajdonosaitl rsos engedlyt
szerznk- pontosan gy, mint amikor valaki ms oldalrl szrmaz szveget
vagy kpet helyeznk el egy weboldalunkon.
K:
Minden keretbe kerl oldalnak kell <tit le> cmkvel, illetve cmmel rendel
keznie? Ha mindegyiknek van cme, akkor melyik fog megjelenni az ablak tete
jn?
V:
A keretvzat tartalmaz oldal cme lesz az egyetlen lthat cm. A keretbe kerl
oldalak esetben sem a <head>, sem a <title> cmke nem elvrs, br okosan
tesszk, ha mgis megadjuk ezeket a cmkket, htha egy ltogat nll oldal
knt nyitja meg a fjlt, s nem egy keret belsejben.
226
Ismtls
Ez a rsz ismtl krdsekbl s vlaszokbl ll, amelyek segtsgvel megszUrdthat
Ismtl krdsek
1.
rjuk olyan HTML-kdot, amely a Mickey, a Minnie s a Donald nevet egy

a bngszablak bal oldalnak 25%-t elfoglal keretben jelenti meg. Oldjuk
meg, hogy ha a felhasznl az egyes nevekre kattint, akkor a bngszablak
maradk 75%-ban egy megfelel weboldal nyljon meg.
2.
Milyen
<i frarne>-kddal
alakthatunk ki egy hatrolvonal nlkli, az oldal
98%-ra kiterjed, 250 kppont magas bels keretet?
Vlaszok
1.
t kln HTML-oldalt kell ksztennk. Az els oldalban a keretvz kap helyet:

<html>
<head>
<title>Our
Friends</title>
</head>
<frameset
<frame
cols="25%,75%">
src="index.html"
/>
<frame src="mickey.html"
name="mainframe"
/>
</frameset>
</html>
A bal keretbe kerl az
index.html
oldal:
<html>
<head>
<title>Our
Friends
Index</title>
</head>
<body>
<p>Pick
<P><a
friend:</p>
href="mickey.html"
target="mainframe">Mickey</a><br
<a
href="minnie.html"
target="mainframe">Minnie</a><br
<a
href="donald.html"
target="mainframe">Donald</a></p>
</body>
</html>
/>
/>
13. ra
Keretek hasznlata
(227
Ezt kveten mg hrom oldalt kell ltrehoznunk, mgpedig mickey. html,

minnie. html
s donald. html nven. Ezekbe kerlnek az egyes rajzfilmfigu
rkkal kapcsolatos informcik.

2.
me egy lehetsges megolds:

<iframe src="some_source.html"
style="width:98%;height:250px;border:none;
background-color:#FFFFFF">
<p>Put message
'-
here
for people not able to
see the
inline
frame.</p>
<li frame>
Gyakorlatok
Gondoljuk t, hogy 1nilyen okok ksztethetnek bennnket egy keretekre pl

elrendezs hasznlatra, s vzoljuk fel az elrendezst egy lapra. Tegyk el
a vzlatot a kvetkez leckk idejre, hiszen akkor fogjuk megtudni, hogy Iniknt
tervezhet elrendezs az XHTML s a CSS hasznlatvaL Ezzel a mdszerrel olyan,
a szabvnyoknak megfelel s felhasznlbart eszkz kerl a keznkbe,
amellyel a keretekhez hasonl megjelens s mkds valsthat meg.
Talljunk mdot egy-kt bels keret hasznlatra a webhelynkn. Lehet sz

pldul hirdetsrl vagy a felhasznlink hasznra szolgl, ingyenes Google
Site Search elhelyezsrl az oldalainkon. A szerkezetben tartsunk fenn helyet
ezeknek a kereteknek.
14. RA
az igaztsok s az sztats
hasznlata
A lecke tartalma:
Elemek krbevtele margval
Hogyan tehetnk bels margt egy elemerr bellre?
Elemek igaztsa
A float tulajdonsg hasznlata
Most, hogy tisztban vagyunk a webes tartalom kialaktsnak alapvet fogsaival, ezt
az rt azzal fogjuk tlteni, hogy a ksz tartalmat a CSS segtsgvel megszptsk.
Az elz rk sorn megismertk a CSS alapvet, megjelentsre szolgl elemei- pl
dul a betmret s a betszn belltst vgzk- kezelst. A most kvetkez leckk
sorn belemerlnk annak trgyalsba, hogy a CSS miknt hasznlhat nll szveg
rszletek s grafikai elemek vezrlsn tl egsz "oldalak" kinzetnek formzsra.
Mieltt azonban az oldal elrendezsnek trgyalsba fognnk, fontosnak vljk, hogy

mg az egyttes hasznlatukat megelzen egyenknt megismerjk az albbi ngy
CSS-tulajdonsgot:
A margin (marg) s a padding (bels marg vagy kitlts) tulajdonsg arra
Az align (igazts) s a float (sztats) tulajdonsg pedig arra val, hogy
szolgl, hogy az elemek krl res terletet foglaljunk le.

az elemek elhelyezkedst egymshoz kpest megadhassuk.
A mostani lecke sorn bemutatott pldk nem tartoznak a valaha kszlt legszebb
weboldalak kz, m nem is ezzel a szndkkal kszltek. Ugyanakkor remekl alkal
masak az XHTML nyelv s a CSS egyttmkdsnek bemutatsra. Mire a mostani s
az elkvetkezend rk sorn az Olvas is a CSS szakrtjv vlik, kpes lesz olyan
webes remekmvek elksztsre, rnint a 14.1. brn lthat, a CSS Zen Garden
webhelyen megtekinthet weboldaL
14.1. bra
Az brn csak egy lthat a CSS Zen Carden webhelyen tallhat szmtalan,
az XHTML nyelv s a CSS egyttmkdst pldz alkots kziif
14. ra
A kls6 s a bels6 marg, az igazftsok s az sztats hasmlata
f231
A CSS Zen Garden oldalai nem felttlenl nznek gy ki, mint a szoksos webruhzak
s kzssgi hlzatok webhelyei, amelyeket idrl idre felkeres az ember. ppen el
lenkezleg: ezek az oldalak igyekeznek megvalstani mindazt, ami a CSS hasznlatval
mvszileg egyltaln lehetsges. Tveds ne essk: minden itt tallhat oldal mgtt
egy remek tlet s gondos tervezs ll, de a CSS nyjtotta lehetsgek vgtelenek
A CSS Zen Garden (http: l /www. csszengarden. com/) olyan weboldalterveket
mutat be, amelyek a CSS-szabvnyoknak megfelel lehetsgeken alapulnak.

A felhasznJk ltal bekldtt sszes m pontosan ugyanazt a HTML-fjlt hasznlja,
de a mvszek a sajt ltvnytervk megvalstsa vgett szabadon mdosthatjk
a CSS-llomnyt. A 14.1. brn lthat weboldalt a Stuff and Nonsense cg
(http: l /www . stuffandnonsense. co. uk/)
Andy Clarke nev munkatrsa
ksztette.
Margk hasznlata
A stluslapok margi segtsgvel a weboldalak egy tglalappal hatrolhat elemn
kvl biztosthatunk res terletet. Tartsuk szben, hogy a
margin
tulajdonsg
az elemet krlvev res terlet nagysgt szablyozza.

A marg belltsra az albbi tulajdonsgok szolglnak:
margin-top: A
fels marg belltst vgzi.
margin-right:
A jobb marg belltst vgzi.
margin-bottom: Az
margin-left: A
margin:
als marg belltst vgzi.
bal marg belltst vgzi.
A fels, a jobb, az als s a bal margkat lltja be egy tulajdonsgknt.
A margk belltsa 1nind az egyedi margtulajdonsgok megadsval, rnind az nll

margin
tulajdonsg megadsval lehetsges. A margk belltsa lehet automatikus, azaz
a bngsz maga vgzi el a marg belltst az adott mrtkegysgben (kppont, pont,

em), vagy szzalkos arnyban kifejezve. Ha a marg szzalkos belltsa mellett
dntnk, az arny kiszmtsa nem az adott elem, hanem a teljes oldal mrete alapjn
trtnik. Ez annyit tesz, hogy amennyiben a margin-left tulajdonsg rtkl 25%-ot
adunk meg, az elem bal oldalra a teljes oldalszlessg huszont szzalknak megfelel
vastagsg marg kerl.
A 14.1. plda ngy darab, 250 kppont szles s 100 kppont magas, 5 kppont vastag
egyszn fekete kerettel hatrolt tglalapot rajzol az oldalra (lsd a 13.2. brt). Minden
tglalapnak - esetnkben: <d i v> cmkkkel hatrolt terletnek - ms s ms a httr
szne. Ha azt szeretnnk, hogy a tglalapok krl 15 kppontnyi marg legyen,
az albbi tulajdonsgokat kell megadnunk:
232
margin-top:15px;
margin-right:15px;
margin-bottom:15px;
margin-1eft:15px;
Mindezt rvidebben is megadhattuk volna, a margin tulajdonsg hasznlatval:

margin:15px 15px
15px
15px;
Ha a marg (vagy a bels marg, vagy a keret) belltsrt felels tulajdonsg haszn
latakor mind a ngy rtkknt ugyanazt szeretnnk megadni, mg a fenti sort is tovbb
egyszersthetjk, az albbi mdon:
margin:15px;
Amikor a rvid formt hasznljuk a marg, a bels marg s a keret belltshoz,

hrom md knlkozik az rtkek megadsra. Az rtkek rtelmezse a megadott
rtkek szmtl fggen az albbiak egyike lehet:
Egy rtk: valamennyi marg vastagsga ekkora.
Kt rtk: az els szm a fels s az als, a msodik a jobb s a bal marg

vastagsgt jelenti (az emltett sorrendben).
gy rtk: a fels, az als, a jobb s a bal marg vastagsga (az emltett
sorrendben).
Egyszerubbnek bizonyulhat egy vagy mind a ngy rtk megadsa, de van harmadik
lehetsg is.
14.1. plda
Ngy. keretezett, sznes s margkkal elvlasztott tglalapot rajzol kd
<?xml version="1.0"
<!DOCTYPE
htm1
encoding="UTF-8"?>
PUBLIC "-//W3C//DTD
XHTML
1.1//EN"
"http://www.w3.org/TR/xhtm111/DTD/xhtml11.dtd">
<html
<head>
<tit1e>Co1or
<style
div
B1ocks</tit1e>
type="text/css">
{
width:250px;
height:100px;
border:Spx
solid #000000;
color:b1ack;
font-weight:bo1d;
text-align:center;
div#d1
background-color:red;
margin:15px;
xml:lang="en">
14. ra
div#d2
az
igazftsok s
az
sztats hasznlata 233
background-color:green;
margin:15px;
div#d3
background-color:blue;
div#d4
background-color:yellow;
margin:l5px;
</style>
</head>
<body>
<div id="dl">DIV
#1</div>
<div id="d2">DIV #2</div>

<div
id="d3">DIV
<div
id="d4">DIV #4</div>
#3</div>
</body>
</html>
DIV#4
.,.
14.2. bra
A
sznes tglalapokat megjelent oldal kezdeti vltozatban a tglalapok margi egyformk
A kvetkez gyakorlat, hogy prblkozzunk a 14.1. pldban szerepl margin

tulajdonsgoknak ms rtkeket adni. A fenti pldban a <d i v> cmkkkel hatrolt
tglalapok jobb oldali margi nem igazn ltszanak, hiszen semmi nincs tlk jobbra,
s nincsenek jobbra rendezve sem. Ennek fnyben lltsuk be valamennyi tglalap
margin-right
tulajdonsgul a Opx rtket. Egyben tegynk eleget az albbi
cloknak is:
Az els sznes tglalap krl szntessk meg a margt
A msodik sznes tglalap bal margja legyen tizent kppontos, a fels margja
A harmadik sznes tglalap bal margja legyen hetvent kppontos, s tvolt
t kppontos, alul pedig ne legyen margja.

suk el a fels s az als margit.
A negyedik sznes tglalap bal margja legyen 250 kppontos, a fels pedig
25 kppontos.
A feladat megoldsa magtl rtetdnek tnik: az els tglalap krl nem lltunk be
margt A msodik tglalap tetejre azonban szeretnnk margt, vagyis az els kt
tglalap kztt akkor is margt fogunk ltni, ha az els tglalap krl nem adunk meg
margt
A nvvel elltott ngy tglalap stluslapja az albbiak szerint alakul:
div#dl
margin: Opx;
div#d2
margin:5px Opx Opx
div#d3
15px;
margin:Opx Opx Opx
div#d4
75px;
margin:25px Opx
Opx 250px;
A 14.3 bra elgg sszevissznak tnik, mgis alkalmas arra, hogy nhny problmt
tisztzzunk. Pldul ha felidzzk, hogy a feladatok egyike szerint az els sznes tgla
lap krl egyltaln nem szabad margnak lennie, azt vrnnk, hogy a tglalap kerete
egybefolyik a bngszablakkaL Ahogy azonban a 14.3. brn lthat, az oldal tartalma
s a bngszablak kerete kztt res hely tallhat.
14. ra
A kls s a bels marg, az igaztsok s az sztats hasznlata
1235
DIV#4
Done
14.3. bra
A
sznes tglalapokat megjelent pldaoldalon vgzett mdostsok hatsra a margk
mostanra nmileg klnbznek egymstl

Ha az elemek elhelyezse lenne a cl - ami a kvetkez rn lesz a feladatunk -, akkor
az emltett viselkeds gondot okozna az elrendezssei kapcsolatosan. Ha biztostani
szeretnnk, hogy az elemek elhelyezse s a margk a bngszablak szltl legyenek
szmolva, akkor a margt a <body> elemnl is be kell lltanunk. Esetnkben az albbi
akkal kell a stluslapot kiegsztennk:
body {
margin:Opx;
Tovbbi lehetsges csapdt jelent, hogy amikor kt bekeretezett elemnk van egyms
felett, s nincs kzttk marg, akkor gy fog ltszdni, mintha ktszeres vastagsg
keret vlasztan el ket. Ilyenkor rdemes elgondolkodni azon, hogy a fels elem als
kerett (border-bottom) s az als elem fels kerett (border-top) fele olyan
vastagra lltsuk. Ha gy jrunk el, akkor az egymsra kerl elemek kztti keret
egyforma vastagnak fog tnni az elemek tbbi oldaln lvkkeL
Esetleg azt vln az ember, hogy ha 250 kppontos margt hasznlunk - azaz a <di v>
cmkkkel hatrolt terletek szlessgvel megegyezt -, akkor a negyedik sznes tg
lalap ott fog kezddni, ahol a harmadik tglalap szle tallhat. Nos, nem ez a helyzet,
236
ugyanis a harmadik sznes tglalapnak van egy hetvent kppontos bal oldali margja.
Ha a kt tglalapot akr csak nagyjbl egyms mellen szeretnnk kezdeni, akkor
a negyedik tglalap bal oldali margjnak 325 kppont vastagnak kellene lennie.
Ha a stluselemeket a kvetkez kdnak megfelelen mdostjuk, akkor a 14.4. brn
megfigyelhet elrendezst kapjuk. A kdban a <body> elem margja nulla kppontos
lesz, ami biztostja, hogy a huszont kppontos bal margj elem valban huszont
kppontra kerl a bngszablak kerettL Az is lthat, hogy a msodik s a harma
dik tglalap egyms tetejre kerlt, de a border elem stlust rint vltoztatsok miatt
nem ktszeres vastagsg az ket elvlaszt keret. Mi tbb, a negyedik sznes tglalap
ott kezddik, ahol a harmadik sznes tglalap vget r.
body
margin:Opx;
div
width:250px;
height:lOOpx;
color:black;
font-weight:bold;
text-align:center;
div#dl
border:5px solid #000000;

margin:Opx;
div#d2
border-width:6px 6px
3px 6px;
border-style:solid;
border-color:#OOOOOO;
margin:lOpx Opx Opx
div#d3
15px;
border-width:3px 6px 6px 6px;

border-style:solid;
border-color:#OOOOOO;
margin:Opx Opx Opx
div#d4
15px;
border:5px solid #000000;

margin:Opx Opx Opx
265px;
A 14.4. bra szerint a harmadik sznes tglalap jobb szle nmi tfedsben van a negye
dik tglalap bal szlvel. Mi ennek az oka? Hiszen a tglalapok 250 kppont szlesek,
a harmadik tglalap bal oldali margja tizent kppontos, a negyedik tglalap bal olda
ln pedig elvileg 265 kppontos marg terpeszkedik! Nos, igen, a 265 kppontos marg
a helyn van, csak ppen egy ekkora marg kicsi, mert mg a hat kppontos kerettel is
14. ra
az
igazftsok s
az
sztats hasznlata
f237
szmolnunk kell. Ha a negyedik sznes tglalap margin tulajdonsgt a kvetkez kd

nak megfelelen mdostjuk, akkor a harmadik s a negyedik tglalap mr a terveink
szerint sorakozik egyms mell - lsd a 14.5. brt.
margin:Opx Opx Opx 276px;
14.4. bra
DIV/14
A sznes tglalapok
a harmadik mdosts
-t
hatsra kzelebbi kapcso

latba kerlnek egymssal
DI\'114
14.5. bra
A marg megvltoztatsa
a tizenegy kppontnyi
Don<
keretnek megfelelen
Ahogy az elz pldkan lttuk, a margk belltsa igen-igen fontos az elemek elhe
lyezsekor, de az rtkek megllaptsnl rdemes fokozott figyelemmel eljrnunk

Az elemek bels marg ja
A bels marg vagy kitlts hasonl a marghoz, amennyiben ez is tovbbi hellyel b
vti az elemeket, de nagy a klnbsg e hely holltt tekintve. Alighanem emlksznk
mg arra, hogy margk az elemeken kvlre kerlnek. A bels marg ezzel szemben
az elemet szeglyez tglalapon bell foglaile helyet. Ha pldaknt azt az esetet
tekintjk, amikor egy stlusszabllyal egy elem szlessgt tven kppontra, a magas
sgt harminc kppontra lltjuk, s megadunk mg t kppontnyi bels margt is,
akkor az elem belsejben a tartalomnak egy negyvenszer hsz kppontos hely marad.
Minthogy az elem bels margja az elem tartalmnak terletre kerl, a stlusa az elem
tartalmnak stlust fogja kvetni, idertve a httrsznt is.
A stlusszablyokban a bels marg megadsa a padding tulajdonsgok egyiknek
megadsval trtnik- a padding tulajdonsgok mkdse egybirnt igen hasonl
a margin tulajdonsgok mkdshez. A stlusszablyok megadsakor az albbi
tulajdonsgok hasznlhatk a bels marg rtkeinek belltsra:
A fels bels marg belltst vgzi.
padding-top:
padding-right:
padding-bottom:
padding-left:
padding:
A jobb bels marg belltst vgzi.

Az als bels marg belltst vgzi.
A bal bels marg belltst vgzi.
A fels, a jobb, az als s a bal bels margkat lltja be egy
tu Jajdonsgknt.
A margkhoz hasonlan a bellts mind az egyedi tulajdonsgok megadsval, mind
az nll padding tulajdonsg megadsval is lehetsges. A bels marg vastagsgt
szintn kifejezhetjk valamilyen mrtkegysggel, vagy szzalkosan.
Az albbi plda azt ismerteti, hogy miknt adhatjuk meg egy stlusszablyban gy a bal
s jobb oldali bels marg rtkeit, hogy az elem tartalmnak mindkt oldaln tz
kppontos hely maradjon:
padding-left:lOpx;
padding-right:lOpx;
A margkhoz hasonlan egy elem valamennyi bels margja megadhat egyedl

a padding tulajdonsg belltsval. A padding tulajdonsg belltsakor is a margin
tulajdonsg belltsnl ismertetett hrom mdszer kzl vlaszthatunk Most egy
olyan plda kvetkezik, amelyben a fggleges (fels s als) bels margkat tizen
kett, a vzszintes (bal s jobb) bels margkat pedig nyolc kppontosra llitjuk egy
stlusszablyban:
padding:l2px
Bpx;
14. ra
A kls s a bels marg, az igazftsok s az sztats hasznlata 239
A kvetkez plda rszletesebb: az elz feladatot valstja meg ez is, de ezttal
az sszes bels marg rtkt megadjuk:

padding:l2px 8px 12px 8px;
Az elz brkon lthattuk, hogy a "DIV #l", a "DIV #2" s a tbbi szveg a sznes tgla
lapok tetejnl jelenik meg, ppen csak egy kis helyet hagyva a keret s a szveg kztt.
A hely nagysgt sehol nem adtuk meg padding tulajdonsg rtkeknt, inkbb valami
lyen, az elem belsejre jellemz alapttelmezett rtknek tnik. Ha az elemek bels mar
git magunk szeretnnk belltani, a 14.2. pldakdban tallunk nhny erre vonatkoz
pldt. Minden sznes tglalap 250 kppont szlessg s 100 kppont magas, 5 kppont
vastag fekete keretk van, s 25 kppontos margt lltottunk be -lsd a 14.6. brt.
A tglalapok egymstl pusztn az egyes <div> cmkkkel hatrolt rszek bels margi
nak belltsaiban klnbznek.
14.2. Dlda
Nf!v. keretezen. sznes. martlkkal eito/asztott s bels martlkat is tartalmaz
tglalapot rajzol kd
<?xml
version="l.O"
<!DOCTP
Y
E
encoding="UTF-8"?>
htmlPUBLIC
"-//W3C//DTD
XHTML
1.1//EN"
<html
<he ad>
<title>Color
<style
Blocks</title>
type="text/css">
body
margin:Opx;
div
width:250px;
height:lOOpx;
border:5px
solid
#000000;
color:black;
font-weight:bold;
margin:25px;
div#dl
text-align:center;
padding:l5px;
div#d2
text-align:right;
padding:25px
50px
6px
6px;
xml:lang="en">
div#d3
text-align:left;
padding:6px
div#d4
6px
6px 50px;
text-align:center;
padding:50px;
</style>
</head>
<body>
<div
id="dl">DIV
#1</div>
<div
id="d2">DIV
#2</div>
<div id="d3">DIV
#3</div>

</body>
</html>
kttp://-.yourdomaln.comlpadding.html
..
Dl\' #4
14.6. bra
A
ngy tglalapot brzol oldalunkon klnfle bels margkat lltottunk be
14. ra
A kls s a bels marg, az igazftsok s az sztats hasmlata
1 241
Alighanem azonnal felfigyelnk r, hogy a pldval valami gond van. A tglalapok

elvileg 250 kppont szlesek s 100 kppont magasak. A 14.6. bra sznes tglalapjai
azrt nem egyformk, mert br igyekeztnk egyforma nagyra kszteni ket, a mretek
megadst kveten belltott bels margk fellbrltk az ltalunk belltott mretr
tkeket.
Ha a szveget <p> cmkk kz helyezzk, s az elemnek fehr htteret adunk - lsd
a 14.7. brt-, akkor lthatv vlik a bels marg s a szveg rintkezsi pontja.
Amikor egyszeren kevs a hely a megadott bels margnak, a tartalmaz elem is
megvltozik Ezzel a jelensggel rszletesebben a 15. rn fogunk foglalkozni.
DIV#4
to
,"==:::::::--____.
..
14.7. bra
Lthatv vlik a bels marg s a szveg rintkezsi pontja
A CSS alap weboldalainkon vgzett finomhangolsok legnagyobb rszben az elren
dezs margit s bels margit fogjuk mdostgatni. Ne feledjk a legfontosabbat:
a margk az elem krl, a bels margk pedig az elem belsejben tallhatk.
242
Elemek igaztsa
Annak ismeretben, hogy egy weboldal tartalma nem minden esetben tlti ki az t
tartalmaz tglalap teljes szlessgt, gyakran bizonyul hasznosnak, ha a tartalom
igaztst belltjuk Az igaztsrl mr olyan egyszer esetben is rdemes beszlnnk,
amikor a tglalapban lv szveg tbb sornyira duzzad-hiszen ilyenkor is lehet rtel
me a szveget balra, jobbra, vagy kzpre igaztanunk. Kt olyan stlustulajdonsg lte
zik, amellyel az elemek igaztsa szablyozhat: a text-align s a vertical-align.
A fenti tulajdonsgokat mr megfigyelhettk mkds kzben - kpek igaztsakor
a ll. rn, de nem rthat, ha ismt emltst tesznk rluk, mivel az igazts a teljes
oldal megtervezsekor is szerepet kap.
Ismtlsknt megemltjk, hogy a text-align tulajdonsg az elemeket a tartalmaz
terlet belsejben vzszintesen rendezi el, az rtke pedig left (balra), right
(jobbra), center (kzpre) s j us tify (sorkizrs) lehet.
A vertical-align tulajdonsg hasonl a text-align tulajdonsghoz, azzal a k
lnbsggel, hogy az elemek fggleges igaztsra hasznlatos. A vertical-align
tulajdonsg azt adja meg, hogy az elem hogyan igazodik a szljhez, illetve nhny
esetben azt, hogy miknt igazodik az oldal adott elemsorn bell. Az "adott elemsor"
kifejezs olyan elemek fggleges elrendezsre utal, amelyek egyazon szlelemben
kaptak helyet-ms szavakkal, az egy sorban lv elemekrl van sz. Ha tbb elem is
egy sorba kerl, akkor a vertical-align tulajdonsgaiknak azonos rtket adva iga
zthatjuk egyms mell ket. Remek pldt knl az egyms mellett megjelen kpek
sora: a vertical-align tulajdonsg belltsval pontosan egy magassgba kerlnek
a soron bell.
A vertical-align tulajdonsg elterjedten hasznlt rtkeit az albbiakban ismertetjk:
top: Az elem tetejt az adott sorhoz igaztja.
middle: Az elem kzept a szlelem kzephez igaztja.
bottom: Az elem aljt az adott sorhoz igaztja.
text-top: Az elem tetejt a szlelem tetejhez igaztja.
baseline: Az elem betvonalt a szlelem betvonalhoz igaztja.
text-bottom: Az elem aljt a szlelem aljhoz igaztja.
Az igazrsok egyttesen fejtik ki hatsukat a margkkal, a bels margkkal s-ahogy

a kvetkez rszbl kiderl -a float tulajdonsggaL gy kzben tarthatjuk az oldal
elrendezsnek alaktst.
14. ra
A kls6 s a bels marg, az igazftsok s az sztats hasznlata
f243
A float tulajdonsg
A float (sztats) tulajdonsg mkdsnek megrtse alapvet a CSS alap elrendez
sek megrtshez. A float tulajdonsg az egyik utols elem abban a kiraks jtkban,
amelyet kirakva megrtjk a CSS rendszerben szerepl elemek egymssal val kapcso
latt. Ha egyszeren akarunk fogalmazni, a float tulajdonsg teszi lehetv az elemek
olyan mozgst az elrendezsen bell, hogy tovbbi elemek igazadhassanak hozzjuk.
A float tulajdonsgot gyakran ltjuk majd kpekhez kapcsold szerepben (mint
a ll. rn is lttuk), de megtehetjk azt is-sok webtervezhz hasonlan-, hogy
az elrendezsben tbbfle elemet is sztatunk
Az elemek sztatsa vzszintesen lehetsges, m fgglegesen nem, gy csak kt
lehetsges rtkkel kell trdnnk, nevezetesen a left (balra) s a
right
(jobbra)
rtkkel. Ha a tulajdonsgot egy elemnl belltjuk, akkor az elem olyan messzire fog
elszni jobbra vagy balra (a float tulajdonsg rtknek megfelelen), amennyire
az t tartalmaz elem ezt lehetv teszi. Ha pldul hrom,
<div>
< 1 di v>
cmkkkel
hatrolt terlet float tulajdonsgnak rtke left, akkor a hrom terlet az ket tartal
maz
<body>
elem bal oldaln sorakozik fel. Ha az emltett terletek egy msik elem
belsejben vannak, akkor odabent fognak a bal oldalon felsorakozni, mg akkor is, ha
magt a tartalmaz elemet jobb fel sztatjuk.
Az sztats megrtse leginkbb pr plda megtekintsvel lehetsges, kvetkezzk
ht a 14.3. plda kdja. A kd annyit tesz, hogy megad hrom tglalap alak,
cmkkkel hatrolt terletet, s ezeket egymshoz kpest (bal fel) sztatja.
14.3. plda
<?xml
(Tsztatott tglalapok
version="l.O"
<!DOCTYPE
html
encoding="UTF-8"?>
PUBLIC
"-//W3C//DTD XHTML
1.1//EN"
<html
<head>
<title>Color Blocks</title>
<style
type="text/css">
body
margin:Opx;
div
width:250px;
height:lOOpx;
border:Spx
solid
color:black;
font-weight:bold;
margin:25px;
#000000;
xml:lang="en">
<div>
244

div#dl
float:left;
div#d2
float:left;
div#d3
float:left;
</style>
</head>
<body>
<div id="dl">DIV #1</div>
</body>
</html>
A kd eredmnyeknt elll elrendezst a 14.8. bra szem.llteti. Azonnal szembetlik

az els problma: a tglalapoknak egyms mell kellett volna szniuk.
os, az a helyzet,
hogy egyms mell sztak, de a bngszablak nem elg szles a 250 kppont szles s
25 kppontos margval elvlasztott tglalapok megjelentshez. sztatott tglalapokrl

van sz, gy a harmadik tglalap minden tovbbi nlkl tszik a kvetkez sorba.
Don<
14.8. bra
Tglalapok elhelyezse a float tulajdonsg hasznlatval
14. ra
A kls6 s a bels6 marg,
az
igazftsok s
az
sztats hasznlata
( 245
Elkpzelhet, hogy a tapasztalt viselkeds problmkat okoz egy adott elrendezsnl,

gy nagy figyelemmel kell eljrnunk a margk, bels margk, igazrsok s sztatsok
megadsakor, illetve amikor a bngszablakot a clrnrerre lltva az oldal kiprbl
sr vgezzk. Igaz, hogy a 14.8. brn lthat bngszablak elg kicsi- erre volt
szksg ahhoz, hogy megfigyelhessk, ahogy az sztatott elemek hely hinyban j
sorba kerlnek-, s ha ugyanezt a HTML-fjlt egy nagyobb bngszablakban nyitjuk
meg, akkor a problmra fel sem figyelnk. Ezrt illik az oldalainkat klnbz fel
bontsban is kiprblnunk, hiszen esetleg csak ekkor vesszk szre, hogy valamit mg
rendbe kell hoznunk. Esetnkben a .rendbehozs" a tglalapok marginak s ms,
a mrettel kapcsolatos tulajdonsgoknak az jbli belltst jelenti.
A 14.9. bra egy tovbbi, az sztats hasznlatakor elll rdekes lehetsget mutat
be. A 14.3. pldhoz kpest annyit vltoztattunk, hogy a sznes tglalapok szlessgt
100 kppontra, a margkt pedig 10 kppontra cskkentettk, s a msodik sznes

tglalap float tulajdonsgnak rtkt left-rl right-ra vltoztattuk
.ilii'
ll
,.:.
Don.
14.9. bra
Tglalapok elhelyezse a float tulajdonsg hasznlatval
A vltoztats igen rdekes eredmnnyel jrt: a msodik sznes tglalap most harmadik
knt lthat, mert tszott a jobb oldalra. A msodik sznes tglalap float tulajdons
gnak rtke right, vagyis egszen a bngszablak jobb oldalra szott. Az els s
harmadik sznes tglalap annyira balra szott, amennyire csak lehetsges volt.
em rvnyeslt az, hogy a edi v> cmkk sorrendje a HTML-fjlban az albbi:
cdiv
id="dl">DIV
cdiv
id="d2">DIV
#lc/div>
#2</div>
cdiv
id="d3">DIV
#3</div>
Az sztats mkdsnek megszaksa sok gyakorlst ignyel, fleg akkor, ha egy

oldalon nhny sznes tglalapon kvl ms is tallhat. Mi trtnik pldul, ha
a helyzetet egy egyszer fnykp beillesztsvel bonyoltjuk? Minden olyan elem,
amely egy sztatott elem beillesztse utn kerl az oldalra, az sztatott elem krl fog
szklni. Ez a viselkeds a clear tulajdonsg hasznlatval elzhet meg.
A clear tulajdonsg t lehetsges rtket vehet fel: left (balra), right (jobbra), both
(mindkett), none (egyik sem), s inherit (rkls). Leggyakrabban a left, a right
s a both rtket szoks hasznlni. A clear: left kd azt eredmnyezi, hogy ms
elemek mr nem szhatnak balra; a clear: right kd azt, hogy ms elemek mr nem
szhatnak jobbra, s gy tovbb. Az sztats s a clear tulajdonsg hasznlata legin
kbb gyakorls tjn sajtrhat el - ehhez a lecke vgn biztostunk feladatokat.
sszefoglals
A mai rn a CSS alap weboldalak alapvet stlustulajdonsgai kzl ismertnk meg
nhnyat. a margin, a padding s a float tulajdonsgokat. Lttuk, hogy a margin
tulajdonsg miknt szablyazza az elemeket krbevev hely nagysgt, s hogy miknt
teszi ugyanezt a padding tulajdonsg az elemek belsejben.
Az egyik korbbi rn megismert text-align s vertical-align tulajdonsgok
jbli ttekintst kveten megismerkedtnk a float tulajdonsggaL A float tulaj
donsggal az elemek s az azokat krlvev tartalom elhelyezkedse szablyozhat.
Krdezz-felelek
K:
A margt s a bels margt bemutat pldk mind tglalapokkal s szveggel
V:
Igen, a marg s a bels marg brmilyen blokkszint elemen (pldul <P>,
dolgoztak. Hasznlhat a marg s a bels marg kpek esetben is?

<div> s <img/>) , listkon (<ul> s <ol>) , valamint listaelemeken (<li>) is
hasznlhat.
Ismtls
14. ra
A kls6 s a bels6 marg, az igazftsok s az sztats hasznlata
}247
Ismtl krdsek
1.
Ha kt, <di v> cmkkkel hatrolt elemet szeretnnk egyms mell elhelyezni,
kzttk 30 kppontos margval, akkor milyen belltsokat kell a stluslapon
megadnunk?
2.
Melyik CSS-tulajdonsg, illetve rtk hasznlatval biztosthat, hogy egy

sztatott elem bal oldalra ms tartalom mr ne kerlhessen?
3.
Milyen CSS-bellts hasznlhat arra, hogy egy <di v> cmkkkel hatrolt elem
belsejben a szveg 12 kppont tvolsgra kerljn az elem tetejtl?
Vlaszok
1.
Tbb megolds is lehetsges. Vagy az els elemnek adjuk a marginright: 15px, a msodiknak pedig a margin-left: 15px tulajdonsgot, vagy
mind a 30 kppontot az egyik elem margjul adjuk meg, a megfelelt hasznlva

a margin-right vagy a margin-left tulajdonsgok kzl.
2.
Ehhez a clear: left kd szksges.
3.
padding-top:l2px
Gyakorlatok
A marg, a bels marg, az igazts s az sztats teljes megrtse gyakorlst
ignyel. A sznes tglalapok vagy sajt, <di v> cmkk hatrolta terletek haszn
latval prbljuk ki a trkzk s az sztats minden lehetsges varicijt,
mieltt a kvetkez ra anyagnak olvassba fognnk. A kvetkez rn
egszben trgyaljuk a mai rn ltott, egyedi objektumokat tartalmaz
CSS-dobozokat, vagyis a "dobozmodellt".
Ha mr gyis nekikezdtnk a gyakorlsnak, gyakoroljuk a margk hasznlatt

minden eddig megismert blokkszint elemnL Gyakoroljuk a kpek elhelyezst
szvegblokkokban, valarnint a margval val krbevtelket is, hogy a szveg
ne egszen a grafika szlnl kezddjn.
15. RA
dobozmodellje s
az elemek elhelyezse
A CSS
A lecke tartalma:
A CSS dobozmodellje
Az elemek elhelyezse
Az egyms tetejre kerl elemek elhelyezkedsnek szablyozsa
A szveg folysirnynak szablyozsa
hny alkalommal elkerlt mr a "CSS dobozmodell" kifejezs. A mai rnkat

a dobozmodell mibenltnek megbeszlsvel kezdjk, s elmondjuk azt is, hogy
az elz rn tanultak hogyan segtenek a dobozmodell megrtsben. A dobozmodell
megismerst kveten nem fogjuk a hajunkat tpni, amikor az elemek nem akarnak
a terveinknek megfelelen felsorakozni, vagy ha az elemek kicsit elcssznak. Tudni
fogjuk mr, hogy majdnem minden esetben az a megolds, hogy valamin - a margkon,
a bels margkon, a kereteken - lltunk egy keveset.
A CSS-elemek elhelyezsvel kapcsolatban is j ismeretekre tesznk szert-tbbek

kztt megtanuljuk, hogy miknt pakolhatk az elemek egyms tetejre - de nem
skban, fgglegesen, hanem trben gondolkodva. Az ra vge fel pedig az elemeket
krlfoly szveg elhelyezkedsnek a float tulajdonsggal val befolysolst
fogjuk elsajttani.
A CSS
dobozmodellje
A 15.1. brn a CSS dobozmodelljnek sematikus rajza lthat. A dobozmodell rja le

a HTML blokkszint elemeinek viszonyt a kerettel, a bels margval s a kls
margval, s azt, ahogy a keret, a bels marg s a kls marg hatsa rvnyesl.
Ms szval azt mondhatjuk, hogy minden elem br nmi bels margval a tartalom s
az elem kerete kztt. Ezen fell megemltennk, hogy a keret nem felttlenl lthat,
de a szmra fenntartott hely azrt ott van, ugyangy, ahogy a marg is ott van az elem
kerete s az elemet krlvev egyb tartalmi elemek kztt.
IDE KERL A TARTALOM
'
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
15.1. bra
A CSS dobozmodellje a HTML valamennyi blokkszint e/emt lerja
me a dobozmodell egy msik magyarzata, kivlrl befel haladva:
A (kls) marg az elemet krlvev terlet. Nincs szne: mindig tltsz.
A keret vagy szegly az elem krl kap helyet, a mindenkori bels marg kls
szlnl. Tbbfle tpusa, vastagsga s szne lehet.
15.
ra
A CSS
dobozmodellje s az elemek elhelyezse 251
A bels marg vagy kitlts a tartalom krl helyezkedik el, s a tartalom
A tartalmat a bels marg veszi krl.
httrsznt rkli.
Most kvetkezik az rdekes rsz: ha meg akarjuk tudni egy elem vals magassgt s
szlessgt, a dobozmodell minden rszt szmtsba kell vennnk. Az elz rrl
emlkezhetnk mg arra, amikor hiba adtuk meg, hogy a <d i v> cmkk hatrolta
terlet 250 kppont szles s 100 kppont magas legyen, a tglalap nagyobb lett,
klnben nem frt volna el benne az alkalmazott bels marg.
Mostanra tudjuk, hogy az elem szlessge s magassga miknt llthat be a width s
a height tulajdonsg hasznlatvaL Az albbi plda azt mutatja be, hogy miknt adhat
meg olyan, <d iv> cmkk hatrolta terlet, amely 250 kppont szles, 100 kppont
magas, vrs bttere van, s egyetlen kppont vastagsg fekete keret veszi krl.
{
div
width:
height:
250px;
lOOpx;
background-color:
#ffOOOO;
border:
#000000;
lpx
solid
A fenti kddal megadott tglalapot a 15.2. brn tekinthetjk meg.

As...".. OIV M=la fi..WX
IS)!
El
.,
Don
15.2.
IQ
bra
Egyszer, <div> cmkk hatrolta tglalap
Ha megadunk egy ugyanilyen tulajdonsgokkal br msodik elemet is, amelynl

bizonyos mret margt, illetve bels margt is belltunk, kezdjk rzkelni az elem
mretnek megvltozst. A jelensg oka a dobozmodell.
252
Ezt a msodik tglalapot az albbi kdrszlettel adjuk megannyi a klnbsg, hogy
10 kppontnyi margt, s ugyanennyi bels margt kap az elem.
div#d2
width:
250px;
height:
lOOpx;
background-color:
#ffOOOO;
border:
5px
#000000;
margin:
lOpx;
padding:
solid
lOpx;
A 15.3. brn lthat msodik tglalapot ugyanolyan magassgnak s szlessgnek

adtuk meg, mint az elst, de az elemet krlvev teljes doboz egyttes magassga s
szlessge mgis lnyegesen nagyobb, mivel a marg s a bels marg is kifejti hatst.
Done
15.3. bra
A msodik tglalap ugyanolyan lenne, mint az els, ha a dobozmade/l nem gyakorolna
hatst a mretre
Az elem teljes szlessgt az albbi tagok sszeadsval kapjuk:

width
o.
padding-left
margin-left
padding-right
border-left
border-right
margin-right
Az elem teljes magassgt pedig az albbi tagok sszeadsa adja meg:

height
o.
padding-top
margin-top
padding-bottom
margin-bottom
border-top
border-bottom
15. ra
az
elemek elhelyezse
(253
300 kppont
(250+ 10+ 10+ 5+ 5+ 10+ 10), a vals szlessge pedig 150 kppont
(100+ 10 + 10+ 5+ 5 + 10+ 10).
A fentiekbl kvetkezerr a msodik tglalap vals magassga
A knyv elejtl a vgig sulykolja a DOCTYPE ( dokumentumtpus l megadst

minden pldnk gy kszlt. Az Olvasnak nem csak azrt tancsos ezt a gyakorlatot
folytatnia, mert a kdja csak gy rvnyesthet, hanem azrt is, mert van egy igen
klns problma a CSS dobozmodell mkdsvel az Internet Explorer bngszben:
ha nem adjuk meg a dokumentum tpust, akkor az Internet Explorer az elemek
szlessgt s magassgt nem a szndkainknak megfelelen kezeli. gy az elrende
zsnk nem lesz egyforma a klnbz bngszkben. Ne feledjk teht a DOCTYPE
megadst!
Mostanra kezdjk megrteni, ahogy a dobozmodell milyen hatssal van a weboldalaink
250 kppontnyi helyet foglalhatunk

10 kppontos margt, ugyanekkora bels margt s 5 kppontos keretet szeret
elrendezsre. Tegyk fel, hogy vzszintesen csak

el, s
nnk az elem minden oldaln. A szndkaink s a lehetsgeink egybehangolsa csak
<div> elem width tulajdonsgul mindssze 200 kppontot

200+ 10+ 10 +5+ 5+ 10 + 10 ppen a vzszintes helynknek
akkor lehetsges, ha a
adunk meg, ugyanis
megfelel
250 kppontt addik ssze.
Most, hogy a dobozmodellel kapcsolatosan gy kiokosodtunk, ne is felejtkezznk el

rla sem a knyv htralv rszben, sem a weboldalterveink kialaktsa sorn.
A dobozmodell hatssal van tbbek kztt az elemek s a szveg elhelyezkedsre.
A kvetkezkben errl a kt dologrl fogunk beszlni.
Nagykanllal az elhelyezsrl
A HTML alaprtelmezs szerint relatv (viszonytott) elhelyezst alkalmaz. A relatv
elhelyezsre gy gondolhatunk, mintha bbukat llitannk egy dmajtk tbljra.
A bbuk balrl jobbra sorakoznak fel, s ha eljutunk a tbla szlig, j sort kezdnk.
display tulajdonsg block rtket

inline rtkek ugyanakkor mg az adott
sorban kapnak helyet, kzvetlenl az elttk lv elem mellett. A <P> s a <div>
elemeket pldul blokkelemnek tekintjk, mg a <span> cmke soron belli elemnek
Cinline rtknek) szmt.
Azok az elemek, amelyek stlusnak belltsakor a

kap, automatikusan j sorba kerlnek- az
A CSS ltal tmogatott msik elhelyezsmd az
abszolt el11elyezs. A nv onnan ered,
hogy ezzel a mdszerrel a HTML-tartalom adott oldalon belli pontos helye adhat
meg. Br az abszolt elhelyezs felruhz bennnket azzal a szabadsggal, ami az elem
kvnt helynek pontos megadst teszi lehetv, az elem helye az oldalon lv szl-
elemekhez kpest viszonytott. Ms szval, az abszolt elhelyezs azt teszi lehetv,

hogy a szlelem terletn bell pontosan megadjuk az elemet jelkpez tglalap
helyt- s ez azrt elgg eltr a relatv elhelyezstL
Most, hogy mdunkban ll oda tennnk az elemeket az oldalon bell, ahov tenni
szeretnnk ket, knnyen tfedsek okozta problmkba tkzhetnk-azaz elfor
dulhat, hogy az egyik elem a msik ltal mr elfoglalt helyre kerl. Semmi sem gtolja
meg, hogy az elemek abszolt helyt gy adjuk meg, hogy az elemek tfedjk egy
mst. A:z. ilyen esetekben a CSS az elemek z-indexe alapjn llaptja meg, hogy melyik
elem kerl ellre, s melyik htulra. A z-indexrl az ra ksbbi rszben bvebben
fogunk tanulni. Most inkbb nzzk meg, hogy miknt szablyozhat pontosan, hogy
egy stlusszably relatv vagy abszolt elhelyezst hasznljon.
A:z. egy adott stlusszably ltal hasznlt elhelyezstpust (relatv vagy abszolt)
a position tulajdonsg adja meg, amelynek a lehetsges rtkei: relative s
absolute.
Az elhelyezs tpusnak megadst kveten az albbi tulajdonsgokkal
adhatjuk meg a pontos elhelyezst:

A:z. elem helynek eltolsa bal fel.
left:
right:
top:
bottom:
Az elem helynek eltolsa jobb fel.
A:z. elem helynek eltolsa felfel.

Az elem helynek eltolsa lefel.
Az gondolhatnnk, hogy a fenti tulajdonsgok csak az abszolt elhelyezs sorn rtel

mezhetk, de az a helyzet, hogy mindkt elhelyezstpusnl hasznljuk ket. A relatv
elhelyezs hasznlatakor az elem helyt az elem eredeti helytl val eltolssal adjuk
25 kppontban adjuk meg, akkor

25 kpponttal toldik el az eredeti -viszonytott - helyhez kpest.
meg. A:z.az, amikor egy elem left tulajdonsgt

az elem bal oldala
Ezzel szemben az abszolt elhelyezs hasznlatakor az eltols a szban forg elem
25 kppontban megadott left tulajdonsg

25 kpponttal kerl jobbra a szlelem bal szltl. Hasonl
szlelemhez kpest rtend. Ilyenkor a

hatsra az elem bal szle
rtkkel hasznlva a right tulajdonsgot, az elem elhelyezse olyan lenne, hogy

az elem jobb oldala kerlne
15.1. plda
<?xm1
25 kppontnyi tvolsgra a szlelem jobb szltl.
A relatt elheyezst szemiitet ugy sznes tglalap
version="1.0" encoding="UTF-8"?>
<!DOCTYPE htm1
PUBLIC
xml:lang="en">
<head>
<title>Positioning the
Color
<sty1e type="text/css">
div
Blocks</title>
15. ra
A CSS
dobozmodellje s
az
elemek elhelyezse f255
position:relative;
width:250px;
height:lOOpx;
border:5px solid
#OOO;
color:black;
font-weight:bold;
text-align:center;
div#dl
div#d2
div#d3
div#d4
</style>
</head>
<body>
<div
id="d2">DIV
<div
#2</div>
<div
id="d4">DIV
#4</div>
</body>
</html>
Az elhelyezs mkdst a sznes tglalapos pldhoz visszatrve tesszk meg.

A 15.1. pldban a ngy sznes tglalap relatv elhelyezs. Ahogy a 15.4. brn lthat,
a tglalapok egyms al kerlnek.
A stluslap
a
<di v>
relative
elemekre vonatkoz bejegyzse a
pos i t ion
tulajdonsg rtkl
rtket adja meg. Minthogy a tovbbi stlusszablyok a
<div>
elemekre
vonatkoz belltst rklik, tveszik a relatv belltst. A tbbi stlusszably a kln

fle httrsznek megadsn kvl valjban semmit sem tesz.
A 15.4. brn lthatjuk, hogy a tglalapok egyms utn helyezkednek el, s a relatv
elhelyezstl ppen ezt vrjuk. Tegyk rdekesebb a dolgot- elvgre ezrt vagyunk
itt -, s cserljk az elhelyezst abszoltra, pontosan megadva a sznes tglalapok
helyzett A 15.2. pldakdban a stluslap bejegyzseit gy vltoztattuk meg, hogy
a sznes tglalapok elhelyezse abszolt mdon trtnjen.
15.4. bra
A sznes tglalapok fgglegesen, egyms alatt helyezkednek el
15.2. plda
<?xml
A szues tglalapok abszolt elhevezssel
version="l.O" encoding="UTF-8"?>
<!DOCTYPE
html
PUBLIC "-//W3C//DTD XHTML
1.1//EN"
<html
xml:lang="en">
<head>
<title>Positioning the
Color
div
{
position:absolute;
width:250px;
height:lOOpx;
border:5px solid #OOO;
color:black;
font-weight:bold;
text-align:center;
div#dl
left:Opx;
top:Opx;
Blocks</title>
15.
div#d2
ra
A CSS
dobozmodellje s az elemek elhelyezse 257
left: 75px;
top:25px;
div#d3
left:l50px;
top:50px;
div#d4
left:225px;
top:75px;
</style>
</head>
<body>
<div
</body>
</html>
A fenti stiluslap az absolute kulcsszt adja a position tulajdonsg rtkl: erre van
szksg, mert azt szeretnnk, hogy a stluslap abszolt elhelyezst hasznljon. Minden
leszrmazott <div>-stlusszably belltja a left s a top tulajdonsgot. A fenti
szablyok mindegyike gy adja meg az elemek helyt, hogy azok- a 15.5. brn lthat
mdon - tfedsben legyenek.
15.5.
bra
A sznes tglalapok megjelentse abszolt elhelyezsset
Ez mr igazi elrendezs! A 15.5. brn lthat, hogy az abszolt elhelyezs alkalmaz

sval az elemek ppen oda kerlnek, ahov tenni szerettk volna ket. Az bra arra is
fnyt dert, hogy milyen egyszer az elemek tfedses elrendezsnek megoldsa.
Az Olvasban felmerlhet a krds: honnan tudja a webbngsz, hogy tfedskor
melyik elem kerljn ellre, s melyik htulra? A kvetkez rszben az tfed elemek
sorrendjrl lesz sz.
Az egyms tetejre kerl elemek
elhelyezkedsnek szablyozsa
Vannak olyan helyzetek, amikor pontosan szeretnnk megadni azt a sorrendet, ahogy
a weboldal egyes elemei tfedik egymst. Az elemek sorrendjnek a rakarsi sorrendet is
befolysol kialaktsa a z-index tulajdonsg hasznlatval vlik lehetv. Br a z-index
nv esetleg furcsnak tnhet, illindssze a harmadik dimenzi (Z) fogalmra utalunk ve
le. Ez a dimenzi mintegy a kperny mg mutat, kiegsztve a kperny szlessgn
(X), s magassgn (Y) alapul dimenzikat. A z-indexre tekinthetnk gy is, mint arra
a szmra, amely egy jsgkteg belsejben adja meg egy adott jsg helyt. A kteg tete
je fel lv jsgak z-indexe magasabb a kteg aljn lv jsgoknL Ehhez hasonlan
a magasabb z-index tfed elem az alacsonyabb z-index elem eltt jelenik meg.
Az az elem, amelynek brmilyen belltott z- index rtke van, mindig a szleleme

eltt jelenik meg, a stlusszablyban megadott z- index rtktl fggetlenl.
A z- index tulajdonsg arra val, hogy egy stlusszably relatv mlysgi (Z) helyzett
megadjuk. A z-index rtkl adott szm csak a stlustap tbbi szablyban megadott
rtkekhez kpest rtelmezhet- ez annyit tesz, hogy egyetlen szably z-index tulaj
donsga keveset mond. Ha azonban tfed elemekre vonatkoz stlusszablyoknl
adunk meg z-index rtkeket, akkor a magasabb z-index rtkkel br elemek
az alacsonyabb z-index rtk elemek eltt jelennek meg.
A 15.3. plda a sznes tglalapokat tartalmaz HTML-fjl stluslapjn olyan z-index
rtkeket hasznl, amelyeknek a hatsra az elemek termszetes tfedsi sorrendje
megvltozik.
A fenti kd mindssze annyiban klnbzik a 15.3. pldban tallhattl, hogy minden
szmozott div stlusosztlyt ellttunk egy z-index tula jdonsggal. Figyeljk meg, hogy
az els szmozott osztly z-index tulajdonsgnak rtkeO- gy ez az osztly kapja
a legalacsonyabb z- index itket-, s a msodik osztly z-index rtke a legmaga
sabb. A 15.6. brn a sznes tglalapok a fenti stluslapot hasznlva jelennek meg; szpen
lthat, hogy a z-index tulajdonsg rtke milyen hatssal van a megjelen tartalomra,
lehetv tve az elemek tfedsnek pontos szablyozst.
15. ra
15.3. Dlela
az
elemek elhelyezse f259
A sznes tfllalatxJk metlielensnek mel!vltoztatsa a z-itulex tulaidonsfl
segitsgt'f!l
<?xml
version="l.O"
<!DOCTYPE
html
encoding="UTF-8"?>
PUBLIC
"-//W3C//DTD
XHTML
1.1//EN"
<html
xml:lang="en">
<head>
<title>Positioning
<style
div
the
Color Blocks</title>
type="text/css">
position:absolute;
width:250px;
height:lOOpx;
border:5px
solid
#OOO;
color:black;
font-weight:bold;
text-align:center;
div#dl
left:Opx;
top:Opx;
z-index:O;
div#d2
left:75px;
top:25px;
z-index:3;
div#d3
left:l50px;
top:50px;
z-index:2;
div#d4
left:225px;
top:75px;
z-index:l;
</style>
</head>
<body>
<div
id="dl">DIV #1</div>

<div
<div
</body>
</html>
id="d3">DIV
#3</div>
15.6. bra
A sznes tglalapok megjelenst a z-index tulajdonsggal mdostjuk
Br a pldk sznes tglalapokkal dolgoznak- mgpedig egyszer, <di v> cmkkkel
megadott tglalapokkal-, a z-index tulajdonsg minden HTML-tartalomra hatssal
lehet, idertve a kpeket is.
A szveg folysirnynak szablyozsa

Most, hogy lttunk nhny olyan pldt, amelyben az elemeket egymshoz viszonytva
helyeztk el, s lttunk olyanokat is, ahol abszolt elhelyezst hasznltunk, itt az ideje
jra elvennnk az elemeket krlvev szveges tartalmat. Alapvet fontossg
az aktulis sor fogalma, amely egy az elemek adott oldalon val elhelyezsre szolgl,
lthatatlan sort takar. Rszben ez a sor felel az elemek elhelyezkedsnek szablyoz
srt: akkor jut szerephez, amikor az elemek vzszintes s fggleges elhelyezse
egymshoz viszonytott. Az elhelyezsre vr elemek kztt emlthetjk meg az oldalra
kerl szveget is. Amikor a szvegben ms elemeket- pldul kpeket- helyeznk
el, lnyeges annak szablyozsa, ahogy a szveg a tbbi elem krl elhelyezkedik.
Az albbi stlustulajdonsgok kzl kettvel mr a 14. rn is tallkoztunk. Az albbi
lista olyan tulajdonsgokat sorol fel, amelyekkel a szveg elhelyezkedse szablyozhat.
float: Azt adja meg, hogy a szveg miknt folyja krbe az elemet.
clear: Megakadlyozza, hogy a szveg krbefolyja az elemet.
overflow: A szveg tlfolyst szablyazza olyan esetekben, amikor az elem tl

kicsi ahhoz, hogy a teljes szveg elfrjen benne.
15. ra
A CSS
dobozmodellje s az elemek elhelyezse
f261
A float tulajdonsgot hasznljuk annak megadsra, hogy a szveg miknt folyhatja

krbe az elemeket. rtke left (bal) s right (jobb) lehet. Ezek az rtkek hatroz
zk meg, hogy az elemet a szveghez kpest merre kell elhelyezni. Azaz egy kp
float tulajdonsgnak left rtket adva a kp a foly szveg bal oldaln kap helyet.
Amint azt az elz leckben megtanultuk, a clear tulajdonsg hasznlatval akad

lyozhatjuk meg azt, hogy egy elem kr szveg kerljn. A clear tulajdonsg a none
(egyik sem), a left, a right, s a both (mindkett) rtket veheti fel. A tulajdonsg
alaprtelmezett rtke a none, amely azt jelzi, hogy a szveg minden tovbbi nlkl
krbefolyhatja az elemet. A tulajdonsg left rtknek hatsra a szveg nem kaphat
helyet az elem bal oldaln-a right rtk pedig a szveget az elem jobb oldalhoz
nem engedi oda. A both rtk azt jelzi, hogy az elem egyik oldalra sem kerlhet
szveg.
Az overflow tulajdonsg a szveg tlfolyst szablyozza, vagyis azt az esetet, amikor
a szveg nem fr el a neki sznt tglalapban-ilyesmi akkor eshet meg, amikor egy
elem width (szlessg), illetve height (magassg) tulajdonsgnak tl alacsony rt
ket adunk. Az overflow tulajdonsg lehetsges rtkei: visible (lthat), hidden
(rejtett) s scroll (grgets). A visible bellts hatsra az elem automatikusan ak
korra nvekszik, hogy az egybknt tlfoly szveg elfrjen benne-ez a tulajdonsg
alaprtelmezett belltsa. A hidden rtk az elem mrett vltozatlanul hagyja, felvl
lalva azt, hogy a tlfoly szveg lthatatlan marad. A legrdekesebb rtk alighanem
a scroll -ennek hatsra a szveg krl grdtsvok jelennek meg, ami lehetv
teszi, hogy a szveget mozgatva az egszet elolvassuk.
sszefoglals
Az rt egy igen fontos tma trgyalsval kezdtk: a CSS dobozmodelljrl volt sz,
s arrl, hogy miknt szmthat ki a margk, bels margk s keretek vastagsgnak
figyelembe vtelvel az elemek szlessge s magassga. Ennek folytatsaknt megbir
kztunk az elemek abszolt elhelyezsnek megadsval, amit a z-index tulajdonsg
hasznlatval val elhelyezs megismerse kvetett. Vgl megismertnk nhny,
az oldalon bell a szveg folysirnyt szablyoz takaros tulajdonsgot.
262
Krdezz-felelek
K:
Miknt dnthet el, hogy a relatv vagy az abszolt elhelyezst rdemes
V:
Br a relatv, illetve az abszolt elhelyezs hasznlatt illeten nincsenek kbe
hasznlni?
vsett irnyelvek, alapveten elmondhat, hogy abszolt elhelyezst csak olyan
kor kell hasznlnunk, amikor a tartalom elhelyezsnek mdjt pontosabban
szeretnnk szablyozni. Ez a kijelents abban a tnyben leli magyarzatt, hogy
az abszolt elhelyezs esetben a pontos kppontot is megadhatjuk, mg
a relatv ell1elyezst hasznlva a tartalom elhelyezsnek eredmnye lnyegesen
kevsb megjsolhat. Mindezzel nem azt szeretnnk mondani, hogy a relatv
md nem lehet tkletesen elegend, ha egy oldal elemei helynek megadsa
a feladat, pusztn annyit jelentnk ki, hogy az abszolt elhelyezs pontosabb.
Mindennek termszetes velejrja, hogy az abszolt elrendezs elvileg rzke
nyebb a kpernymret vltozsaira - ezen pedig nem tudunk segteni.
K:
Ha kt tfed elem z-index tulajdonsgnak nem adunk 11ket, akkor miknt

jsolhat meg, hogy melyik elem kerl ellre?
V:
Amikor az tfed elemek z-index tulajdonsga nincs belltva, a weboldal

ksbbi rszben megjelen elem kerl ellre. Ezt akkor tudjuk egyszeren
megjegyezni, ha elkpzeljk, amint a webbngsz a HTML-dokumentumot
beolvasva kirajzolja az egyes elemeket: a ksbb beolvasott elemeket a korbban
beolvasottakra rajzolja r.
Ismtls
Ismtl krdsek
1.
2.
Mi a klnbsg a relatv s az abszolt elhelyezs kztt?

Mi a neve annak a CSS-tulajdonsgnak, amelyik az elemek tfedsnek mdjt
szablyozzal
3.
ijuk meg azt a HTML-kdot,
amelyik pontosan a bngszablak bal fels sarktl
kezdve megjelenti a "Where would you like to" szveget, s pontosan a saroktl
80 kppontra lefel s 20 kppontra balra kirja a "GO TODAY" szavakat!
15. ra
A CSS dobozmodellje s az elemek elhelyezse
263
Vlaszok
1.
Relatv elhelyezs hasznlatakor a tartalom az oldal alakulsnak megfelelen

jelenik meg, vagyis minden elem az t a HTML-kdban fizikailag megelzt
kveti. Az abszolt elhelyezs ugyanakkor lehetsget ad a tartalom pontos
elhelyezsre az oldalon bell.
2.
Az elemek tfedsnek mdjt a
3.
Hasznlhatjuk pldul az albbi kdot:

cspan
CSS-tulajdonsg szablyozza.
style="position:absolute;left:Opx;top:Opx">
Where would
chl
z- index
you
like toc/span>
style="position:absolute;left:80px;top:20px">G0
TODAY?c/hl>
Gyakorlatok
Gyakoroljuk a CSS-dobozmodell tvesztiben val eligazodst: ksztsnk tbb,

klnbz margj, bels margj s keret elemet, s tanulmnyozzuk az em
ltett tulajdonsgoknak az elem szlessgre s magassgra gyakorolt hatst.
Keressnk egy neknk szimpatikus kpsort, s abszolt elrendezs vagy akr

a
z-index
tulajdonsg hasznlatval rendezzk ket egyfajta kpgalriba.
Prblkozzunk a kpek egy adott alakzatba - ngyzetbe, hromszgbe, krbe

- val rendezsvel.
16. RA
Szemrevalbb listk s
egyebek - a CSS hasznlatval
A lecke tartalma:
A CSS-dobozmodell hatsa a lisrkra
A felsorolsjel testreszabsa
A listaelemek hasznlata s kptrkp ksztse a CSS segtsgvel
Az 5. rn megismerkedtnk a HTML-listk hrom tpusval, a 14.-en pedig megtanultuk

a kls s bels margk hasznlatr, valarnint az elemek elrendezsnek mdjt. A mai
lecke sorn azt tanuljuk meg, hogy a margk, bels margk s elrendezsek miknt
alkalmazhatk a klnfle HTML-listk ltrehozsakor. gy egy olyan, pusztn a HTML-re
s a CSS-re tmaszkod mdszer kerl a keznkbe, amelynek a segtsgvel igen
rdekes elemekkel gazdagthatjuk a weboldalunkat
Egszen pontosan a listaelemek kinzetnek mdostsrl lesz sz- az 5. rn
megismert list-style-type tulajdonsgtl eltr mdszerekkel-, valamint arrl,
hogy a CSS segtsgvel formzott listk hasznlatval miknt vlthatk le a ll. rn
266
megismert gyfloldali kptrkpek. Gyakorlatban fogunk alkalmazni sok, az eddigiek

sorn megismert CSS-tulajdonsgot. A mai rn megszerzett ismeretek kzvetlen elk
szti a 17. rnak s az akkor elksztend mveinknek.
Ismtls
HTML listi
Amint azt az 5. rn megtanultuk, a HTML hrom alapvet listatpust knl. Mindhrom

lista nmileg eltren jelenti meg a tartalmat- a listatpustl s a lista szvegkrnyeze
ttl fggen.
A rendezett lista olyan, behzssal br lista, amely szmokat vagy betket jelent
meg az egyes listaelemek eltt. A rendezett listt az <ol> s </ol> cmkkkel
fogjuk kzre, a listaelemeket pedig az <li> s <Ili> cmkeprral hatroljuk
Ezzel a listatpussal sokszor jelentnk meg szmozott lpseket, ezen fell
a tartalom klnbz szintjeinek jelzsre is hasznlhat.
A rendezetlen lista olyan, behzssal br lista, amely korongat vagy egyb jelet
jelent meg az egyes listaelemek eltt. A rendezetlen listt az <ul> s </ul>
cmkkkel fogjuk kzre, a listaelemeket pedig az <li> s <Ili> cmkeprral
hatroljuk. A listatpushoz kapcsold ltvny rvid, pontosan megfogalmazott
informcielemekre hvja fel a figyelmet.
A meghatrozs-lista ltalban kifejezsek s azok jelentsnek megjelentsre

szolgl, gy magn a listn bell alakulhatnak ki az informci rtegei. Ez a lista
a rendezett listhoz hasonl, de szmozst nem ltunk. A meghatrozs-listt
a <dl> s </dl> cmkk fogjk kzre. A kifejezseket a <dt> s </dt>,
a meghatrozsokat a <dd> s </dd> cmkk hatroljk.
Amikor a tartalom szksgess teszi, a rendezett s rendezetlen listkat egymsba

gyazhatjuk. Az egymsba gyazott listk a tartalomnak egyfajta rtegzdst valstjk
meg - gy ajnlatos csak akkor hasznlnunk ezeket az elemeket, amikor a tartalom
valban rendelkezik a megjelenteni kvnt rtegzdssel. Ilyenek pldul a tartalmat
krvonalaz vzlatok, illetve a tartalomjegyzkek Msfell, ahogy azt a 17. rn ltjuk
majd, az egymsba gyazott listknak olyan esetekben is hasznt vesszk, amikor
a webhelynk egyms al szervezett oldalai kztt val eligazodst segtik.
Pr rgebbi bngsz eltren kezeli a (kls) margt s a bels margt (kitltst)

fleg, ha azok listk, illetve listaelemek krl kapnak helyet. Mindazonltal e knyv
rsnak idejn az ebben s a tbbi fejezetben bemutatott HTML s CSS nyelv
kdok a jelentsebb webbngszk (Apple Safari, Google Chrome, Microsoft Internet
Explorer, Mozilla Firefax s Opera) mindegyikben egysges megjelentst
eredmnyeznek. Termszetesen- s az elbbi kijelents dacra- a weboldalunkat
az internetes kzzttelt megelzen tovbbra is ellenriznnk kell valamennyi
bngszben, de a stluslappal trtn barkcsolsok kora- ami a bngszk
klnbzsge miatt vlt egykor szksgess- lassan a mltba vsz.
16. ra
i 267
A CSS-dobozmodell hatsa a listkra

A listk kezelsre szolgl stluselemek kzl a list-style-image, a
position
s a
list-style-type
list-style
nevt emltjk meg. Az els arra val, hogy a listaele
mek jelzsre kpet hasznljunk, a msodik azt adja meg, hogy a felsorolsjel hol helyez
kedjen el, a harmadik pedig a felsorolsjel tpust hatrozza meg. Mg az elz stlusele
mek a lista, illetve a listaelemek felptst szablyozzk, a
(bels marg), a
color
margin
(marg), a padding
(szn) s a background-color (httrszn) stlusjellemz segts
gvel a listk megjelensnek finomabb szablyozsra nylik lehetsgnk.

A 14. rn olvashattuk, hogy a tartalom s az elem kerete kztt minden elem eset
ben van egy kevs bels marg, s azt is megtudtuk, hogy mindig van valamennyi
marg az elem kerete s a szomszdos tartalom kztt. Ez igaz a listkra is, gy amikor
a listk formzst vgezzk, nem feledkezhetnk meg arrl, hogy a listt valjban
ktfle elem alkotja: a szlelem ( <ul> vagy
<ol>)
s maguk az egyedi listaelemek
Ezen elemek mindegyike rendelkezik a stluslap segtsgvel szablyozhat margval

s bels margvaL
A mai ra pldibl kiderl, hogy a CSS klnfle stlusai milyen hatssal vannak
a HTML-listk, illetve a listk elemeinek megjelensre. Ha nem felejtkeznk el
az elbb emltett klnbsgekrl, kpess vlunk a listk megjelensnek mindenre
kiterjed szablyozsra, s ahogy a 17. ra gyakorlatainl tapasztalni fogjuk, a listk
segtsgvel a webhelyek navigcis menjt is megszpthetjk.
A 16.1. plda egy egyszer, hromelem listt alakt ki. A pldban a rendezetlen lista
(az
<ul>
cmkk hatroljk) kk htteret, fekete keretet, s 100 kppontban rgztett
szlessget kap- amint az a 16.1. brn is lthat. A listaelemek (amelyeket a
<li>
cmkk hatrainak) httere szrke, a kerete pedig srga. A listaelemek szvege s

a felsorolsjel (a korong) fekete.
16.1. plda
<?xml
Egvszer sznes, keretezett lista ltrehozsa
version="l.O"
<!DOCTYPE
html
encoding="UTF-8"?>
PUBLIC "-//W3C//DTD
XHTML
1.1//EN"
<html
<head>
<title>List
Test</title>
ul
{
background-color:
#6666ff;
border:
#000000;
lpx
width:lOOpx;
solid
xml:lang="en">
li
background-color:
#cccccc;
border:
#ffffOO;
lpx
solid
</style>
</head>
<body>
<hl>List
Test</hl>
<Ul>
<li>Item
#1</li>
<li>Item
#2</li>
<li>Item
#3</li>
</ul>
</body>
</html>
16.1. bra
A lista s a listaelemek sznt s keretet kapnak
Azt, hogy a klnbz bngszk hogyan jelentik meg a padding-left (bal bels
marg) tulajdonsg alaprtelmezett rtkt, egy a 16.1. pldban ismertetetthez
hasonl egyszer tesztfjl segtsgvel prblhatjuk ki. Tltsk be a fjlt, majd az ul
kijellnl helyezzk el a padding-left: 40px; bejegyzst. Ezt kveten tltsk
jra az oldalt, s ha a megjelen lista nem vltozik, akkor tudjuk, hogy a bngsznk
a padding-left tulajdonsg alaprtelmezett rtkeknt 40 kppontot hasznl.
Ahogy a 16.1. brbl kiderl, az <ul> cmke hozza ltre azt a dobozt, amelybe maguk
a listaelemek kerlnek. Esetnkben az emltett doboz teljes egszben kk htteret
kap. Figyeljk meg azt is, hogy az egyes listaelemek (a pldnkban srgval keretezve
s szrke httrrel) nem nylnak el egszen az
oldalig.
<ul>
cmkk meghatrozta doboz bal
16. ra
Szemrevalbb listk s egyebek - a CSS hasznlatval 269
A jelensg oka, hogy a bngszk automatikusan elhelyeznek valamekkora helyet

az <ul> elem bal oldaln. A hely nem a margin alaprtelmezett nagysgt nveliaz a dobozon kvl jelenne meg. A helyet a bels marghoz csapjk hozz- ez ugye
a doboz bels oldaln tallhat -, mghozz csak a bal oldalon. A bels marg rtke
gy megkzeltleg
40 kppont lesz.
A bels marg alaprtelmezett rtke fggetlen a lista tpustl. Ha a stluslapunkon

elhelyezzk az albbi sort - ezzel felsorolsjelek nlkli listt alaktva ki-, azt fogjuk
ltni, hogy a bels marg rtke nem vltozik (lsd a
list-style-type:
16.2. brt):
none;
ca,
http-J/wv.w.yourdomm.com/1lst_5tylhtml
Don<
16.2. bra
Az alaprtelmezett bal bels marg a felsorolsjelek elhagysakor is vltozatlan marad
Listt tartalmaz oldalelrendezs ksztsekor az elemeket ide-oda helyezgetve az oldalon
ksrlerezgessnk a bels margvaL Erre a clra brmelyik listatpus megfelel. Pusztn
az a tny, hogy a marg nem kap alaprtelmezett rtket, mg nem jelenti azt, hogy mi
nem adhatunk meg margt a listinknak Az ul kijell margin tulajdonsgnak rtket
adva jabb olyan eszkz kerl a keznkbe, amivel az elrendezst szablyozhatjuk
Ne feledjk, hogy Illindezidig csak a teljes listt megad elemekkel dolgoztunk,
a listaelemeket mg nem formztuk A
16.1. s 16.2. brn a szrke httr s a srga
keret nem enged arra kvetkeztetni, hogy a margin vagy a padding tulajdonsg alapr
telmezett rtket kapna. A
16.3. bra azt mutatja be, hogy milyen hatsokat rhetnk el,
ha a margt s a bels margt nem a teljes listnl, hanem maguknl a listaelemeknl

adjuk meg.
Az els listaelem a viszonytsi alap: sem margt, sem bels margt nem lltottunk be
r. A msodik listaelemben mr rvnyesl a st y le=" padding: 6px;" kd hatsa, s
a
6 kppontnyi bels marg minden oldalon ltl1atv vlik - a szveg s az elemet
hatrol srga keret kztt. Figyeljk meg, hogy a felsorolsjel ugyanott maradt, ahova
az els listaelem esetben is kerlt. A lista harmadik elemnl a style="margin:
6 px; " kd hatsra az elem krl
6 kppontnyi marg jn ltre- ennek ksznheten
vlik lthatv az <ul> elem httere.
&
http://-.yourdomain.com/list..stylesl
Done
16.3. bra
Klnbz marg- s belsmarg-belltssal br listaelemek
A felsorolsjelek elhelyezse
A margt s a bels margt rint eddigi fejtegetseink jabb krdseket vetnek fel,
nevezetesen a- nem felttlenl hasznlt- felsorolsjelekt, illetve azt, hogy ha a szveg

krbeveszi a felsorolsjeleket, akkor azt miknt tegye. A list-style-position tulaj
donsg alaprtelmezett rtke az outside (kint). Ez annyit tesz, hogy a felsorolsjelek
s a szmok a szveg bal oldalra kerlnek, s a <li>< !li> cmkepr meghatrozta
tglalapon kvl maradnak. Ha egy adott listaelem szvegt trdelni kell, akkor a trdelt
szveg is bell marad a tglalapon, az elem bal oldalhoz rendezve.
Ha azonban a list-style-position tulajdonsg az inside rtket kapja, a felsorols
jelek a <li></ li> cmkepr ltal meghatrozott tglalapon bellre kerlnek. Ilyenkor
nem csak a felsorolsjelek behzsa n meg- lnyegben a szveg rszv alakulnak -,
hanem a trdelt szveg is befolyik az egyes felsorolsjelek al.
A
16.4. brn mind az
outside, mind az inside rtk list-style-position
tulajdonsggal kszlt pldt megtekinthetjk A 16.1. plda s a 16.4. brn lthat

eredmny ellltsra hasznlt kd kztt- az "Item #2" s az "Item #3" bejegyzst
tartalmaz sorok szvegnek bvtstl eltekintve - mindssze annyi a klnbsg,
hogy a msodik listaelem kdjt a style=" list-style-posit ion: outside; ",
a harmadikt pedig a style=" list-style-position: inside;" sorral bvtettk
16. ra
Szemrevalbb listk s egyebek- a CSS hasznlatva1
http://www.yourdomlin.com/list_styiW.html
( 271
-+
Done
+'
16.4. bra
A list-style-position tulajdonsg outside s inside rtkt hasznlva add klnbsg
A msodik listaelem bvtsre hasznlt szveg megmutatja a szveg trdelst olyan

esetekben, amikor a lista tl keskeny ahhoz, hogy a szveg egyetlen sorban elfrjen.
Az brn lthat eredmnnyel megegyezt rtnk volna el akkor is, ha
a style=" list-style-position: outside;" kdot nem hasznltuk volna, mivel
a list-style-position tulajdonsg ezt az alaprtelmezett rtket veszi fel, ha mi
magunk nem adunk rtket neki.
Az inside hasznlatakor fellp klnbsg remekl megfigyelhet. A harmadik
listaelem szvege s felsorolsjele egyarnt a srgval keretezett szrke terletre, azaz
az elemen bellre kerlt. A marg s a bels marg listaelemekre gyakorolt hatsa ms
az inside rtkre belltott list-style-position tulajdonsg esetben -lsd
a 16.5. brt.
W>nT..t-Morillofi..toa
Dono
16.5. bra
A marg s a bels marg mskpp jelenik meg,
ha a list-style-position tulajdonsg rtke inside
+'
16.5. brn a msodik s a harmadik listaelem
list-style-position tulajdonsgnak
rtke egyarnt inside. A klnbsg az, hogy a msodik listaelem egy 12 kppontos
margin-left (bal marg), a harmadik listaelem pedig egy
12 kppontos
padding-left
(bal bels marg) rtket kapott. Br mindkt tartalomblokk-a felsorolsjel s a szveg

esetben krbeveszi a szveg a felsorolsjelet, s a blokkok elhelyezkedse is azonos
a listaelemet jelz szrke terleten bell, a vltoztatsok a listn belli listaelemre fejtik ki
a hatsukat.
A
12 kppontos
margin-left tulajdonsg listaelemnl-a vrakozsainknak megfe
lelen-a listaelemet krbevev tltsz marg alatt lthat lesz 12 kppontnyi vrs
szn is. Ehhez hasonlan, a 12 kppontos padding-left tulajdonsg listaelem
12 kppontnyi szrke htteret- a listaelem httere ilyen szn- jelent meg a tartalmat
megelzen. A bels marg az elem belsejbe kerl, a marg pedig kvlrl veszi
krbe az elemet.
Ha megrtjk, hogy a marg s a bels marg hogyan befolysolja a listaelemeket, illetve
a listaelemeket tartalmaz listt, kpess vlunk- pusztn a CSS hasznlatval- kls
kpek ignybe vtele nlkl kialaktani a webhelynk navigcis elemeit. A 17. rn
a fggleges s vzszintes navigcis menk kialaktsnak megismersn tl megtanu
lunk lenyl menket is kszteni.
Kptrkpek ksztse listaelemek s CSS hasznlatval

A ll. rn megtanultuk, hogy a HTML <map/> cmkjnek hasznlatval miknt hoz
hatunk ltre gyfloldali kptrkpeket A kptrkpek segtsgvel megtehetjk azt,

hogy a kpen bell megadott terlethez rendelnk hivatkozst, s gy nem kell a kpet
felszabdalnunk, majd jra sszelltanunk, miutn a hivatkozsokat hozzrendeltk
az egyes darabokhoz. Kptrkpeket pusztn szablyos XHTML- s CSS-kddal is
kialakthatunk.
Ha szvesen fogadnnk nhny tletet, hogy miknt lehet XHTML s CSS segtsgvel
kptrkpeket kszteni, ltogassunk el a h t tp: 11designrevi ver. com/
tutarials l css-image-map-techniques-and-tutorials l
weboldalra.
Az itt fellelhet segdanyagokban bemutatott kptrkpek klnbz szint felhaszn

li beavatkozst tesznek lehetv. Vannak kztk olyanok is, amelyek a knyv kereteit
meghalad mrtkben tmaszkodnak az gyfloldali parancsfjlok hasznlatra.
Az rdekldket kimert magyarzatok segtik.

A
16.2. pldban ismertetett kd egy a 16.6. brn lthathoz hasonJ kptrkpet llt
el (a 16.2. plda kdja nem rajzolja meg az brn lthat piros kereteket. Ezek csak
azrt kerltek az brra, hogy a szempontunkbl rdekes terleteket kiemeljk).
16. ra
Szemreval6bb listk s egyebek - a CSS hasznlatva1
f 273
A webbngsz ltal a kd alapjn elksztett oldal egy egyszer, kpet megjelent
weboldalnak tnil<. A dolog akkor kezd rdekesebb vlni, amikor az egrmutatval

egy forrpont fl rnk.
16.2. p6lda
Kptrkp ltrehozsa
CSS segtsgt >el

<!DOCTYPE
html
PUBLIC
"-//W3C//DTD
XHTML 1.1//EN"
<head>
<title>CSS
Image Map Example</title>
<Style type="text/css">
#theimg
width:500px;
height:375px;
background:url(tea_shipment.jpg)
position:relative;
border:
#theimg
lpx
solid
#000000;
ul
margin:Opx;
padding:Opx;
list-style:none;
#theimg
position:absolute;
text-indent:
#theimg
a:hover
border:
#ss a
-lOOOem;
lpx
solid
top:Opx;
left:5px;
width:80px;
height:225px;
#gn a
top:226px;
left:l5px;
width:70px;
height:llOpx;
#ib
top:225px;
left:85px;
width:60px;
height:90px;
#ffffff;
no-repeat;
lliTEAl a
top:lOOpx;
left:320px;
width:178px;
height:l25px;
#iTEA2 a
top:225px;
left:375px;
width:123px;
height:ll5px;
</style>
</head>
<body>
<div id="thelmg">
<Ul>
<li id="ss"><a href="[valamilyen URL)"
title="Sugarshots">Sugarshots</a></li>
<li id="gn"><a href="[valamilyen URL)
title="Golden Needle">Golden Needle</a></li>

<li id="ib"><a href="[valamilyen URL)"
title="Irish Breakfast">Irish
Breakfast</a></li>
<li id="iTEAl"><a href="[valamilyen URL)
title="lngenuiTEA">lngenuiTEA</a></li>
<li id="iTEA2"><a
href="[valamilyen URL)
title="IngenuiTEA">IngenuiTEA</a></li>
</Ul>
</div>
</body>
</html>
16.6. bra
Don
A CSS
segtsgvel forrpontokat
adhatunk meg a kptrkpen
16. ra
Szemreval6bb listk s egyebek - a CSS hasznlatval
f 275
Ahogy a 16.2. pldbl kiderl, a stluslapnak ugyan j nhny bejegyzse van, de maga
a HTML nyelv rsz meglehetsen rvid. Listaelemek hasznlatval alaktjuk ki azt az t
terletet, amelyre kattintani lehet- ezek a "terletek" teht valjban egy a httrben
megbv kp eltt lv, adott magassg s szlessg listaelemek Ha a listt
krbevev <div> elem htterl szolgl kpet eltvoltannk, a listaelemek tovbbra is
lteznnek, s tovbbra is kattinthatnnk rjuk.
Ha meg szeretnnk rteni azoknak az XHTML- s esS-kdrszleteknek a szerept,
amelyek kialaktjk a- vgs soron egy hivatkozsokat tartalmaz listt rejt- kptr
kpet, nzzk vgig a stluslapot
A hivatkozsokat tartalmaz lista a theimg nev <div> elem belsejbe kerl. A stluslap
ezt a <div> elemet 500 kppont szlessgv, 375 kppont magassgv alaktja, s
l kppontos folytonos kerettel veszi krl. Az elem httere a nem ismtld,
a tea_shipment. jpg fjlban trolt kp. A kvetkez HTML nyelv rsz a rendezetlen
listt kezd <ul> cmke. A stluslapunk a rendezetlen listnak minden oldalon O kp
pont mret margt s bels margt ad, a list-style tulajdonsg rtke pedig none,
azaz a listaelemeket nem jelzi felsorolsjeL
A listaelem szvege sohasem fog a felhasznl szeme el kerlni, mgpedig a stluslap
albbi, gyes sora miatt, amely egybirnt a <div> elem belsejben lv valamennyi
<a>
cmkre rvnyes:
text-indent:
-lOOOem;
Az 1000 em mrtk, de negatv behzs biztostja azt, hogy a szveg sosem vlik ltha
tv. Ltezik ugyan, de a bngszablak bal oldaltl 1000 em tvolsgra balra, egy
meg nem tekinthet helyen. Ms szval, ha a bal keznket a szmtgp manitorjnak
szlre helyezzk, a text-indent: -lOOOem; sor hatsra a szveg valahov az ujja
inktl balra fog kerlni. Persze rni ppen ezt szeretnnk, ugyanis nem kvnjuk ltni
a hivatkozs szvegt. Egyszeren csak olyan terletekre van szksgnk, amelyek
hivatkozsknt mkdnek, s ha a felhasznl fljk mozgatja az egrmutatt, akkor
a mutat ppgy megvltozik, mint ahogy a V:,eboldalakon elhelyezett hivatkozsok
fl rve egybknt szokott.
Amikor a felhasznl az egrmutatval egy hivatkozst tartalmaz listaelem fl r,
a listaelem krl l kppont vastag folytonos keret vlik lthatv, mgpedig a stluslap
albbi bejegyzsnek ksznheten:
#theimg
a:hover
border:
lpx
solid
#ffffff;
Ezt kveten a listaelemek megadsa s elhelyezse kvetkezik, mgpedig a kp azon

terleteire, amelyeket kattinthatv kvnunk alaktani.
276
Pldnak okrt a kp Sugarshots nev rszhez tartoz, ss azonostval rendelkez

listaelemnek a bal fels sarka a <div> elem tetejtl O, a bal szltl pedig 5 kppont
tvolsgra kerl. Az elem 80 kppont szles s 225 kppont magas. A #gn, az #ib,
az #i TEAl s az #iTEA2 azonostj stluselemek formzsa is hasonlkppen trtnik,
persze gy, hogy a megfelel azonostj elemek a kp kvnt rszei el kerljenek.
sszefoglals
Az rt nhny pldval kezdtk, amelyek a margk s bels margk listaelemekre
gyakorolt hatst mutattk be. Elszr a listkhoz tartoz alaprtelmezett bels margrl,
illetve ennek megvltoztatsrl szltunk. Ezt kveten megismerkedtnk a marg s
a bels marg megvltoztatsnak mdjval, illetve megtanultuk, hogy a felsorolsjel
rniknt helyezhet a lista belsejbe vagy azon kvlre. gy mr lehet nmi fogalmunk
arrl, hogy a stlusok s a listk a webhelynk kinzetnek egszre rnilyen hatssal
lehetnek. Vgl megismerkedtnk azzal a mdszerrel, amelynek a segtsgvel gy
kszthetnk kptrkpet, hogy kizrlag az XHTML nyelv s a CSS elemeit vesszk
ignybe, gy nincs szksg a <map/> cmke hasznlatra, illetve a hivatkozsokat tartal
maz kp felszeletelsre sem.
Az ra valamennyi pldjval azt kvntuk elrni, hogy az Olvas merjen a szoksostl
eltr mdon gondolni a listkra, s gy olyan tfog tudsra tegyen szert a rendezetlen
listk hasznlatrl, amellyel felvrtezve vzszintes s fggleges navigcis menkkel
gazdagthatja a weboldalait
Krdezz-felelek
K:
Borzasztan sok weboldalon olvashatunk - klnsen a listkat s listaelemeket

krlvev margval s bels margval kapcsolatban - egy a dobozmodellel
kapcsolatos trkkrL Biztos, hogy erre nincs szksg?
V:
Az ra elejn azt mondtuk, hogy a mostani - s a tbbi- lecke sorn megismert
HTML-, illetve CSS-kdok azonos eredmnyt adnak a fontosabb webbngszk

mai vltozataiban. Mindez szmos olyan v utn alakult gy, amelyek alatt
a webfejlesztknek mindenfle trkkket kellett alkalmazniuk. A modern
webbngszk - tllpve a sajt rleteiken- kezdik az elemeket lassanknt
a CSS-szabvnynak megfelelen kezelni. Manapsg egyre tbben vannak, akik ar
ra trekszenek, hogy az internetezket megszabadtsk azoktl a nagyon rgi
bngszktl, amelyek rniatt egyltaln szksg volt az emltett trkkkre.
A knyv ri, br mindezek szellemben nem javasoljk felttlenl azt, hogy
az Olvas csak a bngszk mai vltozatainak megfelel weboldalakat ksztsen,
azt sem ajnljk, hogy rengeteg idt sznjon olyan trkkkre, amelyeket a bng
szk rgebbi - mostanra az internetezk alig t szzalka ltal hasznlt- vltoza
tai tesznek szksgess. rdemes teht rvnyesthet, szilrd alapokra pl s
16. ra
i 277
a tervezsi alapelveket kvet kdot rni, az oldalakat rninl tbb, az oldal olvasi
kztt elterjedt bngszben kiprblni, s csak ezt kveten elrhetv tenni
azokat az egsz vilg szmra.
K:
A esS-kptrkpek ksztse igen munkaignyesnek tni k. Tnyleg annyira rossz
V:
A <map/> cmke egyltaln nem rossz, st, rnind az XHTML, mind a HTML 5
a <map/> cmke?
nyelvvltozatban rvnyes. Ugyanakkor az gyfloldali kptrkpek koordint
inak megllaptsa nehzsgekbe tkzhet, klnsen, ha nincs grafikai alkalma
zsunk, illetve az gyfloldali kptrkpek ksztst segt alkalmazsunk
A CSS-vltozat a kattintsrzkeny terletek megadst s megjelentst tekintve
tbb lehetsget knl, br ezek kzl csak egyet mutattunk be.
Ismtls
Ez a rsz ismtl krdsekbl s vlaszokbl ll, amelyek segtsgvel megszilrdthatjuk
Ismtl krdsek
1.
Mi a klnbsg a list-style-position tulajdonsg inside s outside

rtkei kztt? Melyik az alaprtelmezett?
2.
Ltrejn-e- akr rendezett, akr rendezetlen -lista, ha a list-style

tulajdonsg rtkeknt none szerepel?
3.
rjunk HTML-kdot, amely egy 350 kppont szles, 100 kppont magas, zld
htter s 2 kppontos, szaggatott fekete keret listaelemet hoz ltre, olyat, ahol
a felsorolsjel a troJba kerl!
Vlaszok
1.
A list-style-position tulajdonsg inside belltsa mellett a felsorolsjel

a listaelem ltal meghatrozott terlet belsejbe kerl. Az outside rtk hatsra
a felsorolsjel az emltett terleten kvl kap helyet. Az inside rtk hatsra
a szveg krbeveszi a felsorolsjelet Az alaprtelmezett rtk az outside.
2.
Igen. Az egyetlen klnbsg, hogy a listaelem tartalma eltt nem jelenik meg
felsorolsjel.
3.

<Ul>
<li style="width:350px;
border:2px
here</li>
</Ul>
height:lOOpx;
dashed #000000;
background-color:#OOffOO;
list-style-position:inside;">text goes
Gyakorlatok
Keressnk egy kpet, s prbljunk rajta forrpontokat ltrehozni egyedl, a
ma
ltott mdszer hasznlatvaL Olyan kpet vlasszunk, amelyen a megadott forr

pontok, illetve kattintsrzkeny terletek ms oldalakhoz vezethetnek - akr
a webhelynkn bell, akr azon kvl. rjuk meg a kattintsrzkeny terleteket
megad s az ltaluk hivatkozott URL-eket tartalmaz HTML-, illetve CSS-kdot.
Elkszlve a kvetkez rra - arnikor a listk hasznlatval fogunk navigcis

ment kialaktani - idzzk fel a weboldalunk felptst, s vzoljuk fel
a benne lv fels szint kapcsolatokat, illetve ezeken bell adjunk meg nhny
msodiagos hivatkozst is. Gondoljuk vgig, hogy az llandan lthat navig
cis svunk vzszintes vagy fggleges irny lesz-e.
17. RA
Navigcis fellet kialaktsa
a CSS segtsgvel
A lecke tartalma:
Miben klnbznek a navigcis listk a hagyomnyos trsaiktl?
Fggleges navigcis sv ksztse CSS-kd segtsgvel
Vzszintes navigcis sv ksztse CSS-kd segtsgvel
Az elz rn megtanultuk, hogyan befolysolhatjuk a listk megjelenst, gy

tllphettnk az egyszer felsorolsokon, illetve szmozott listkon. A kvetkezkben
arrl ejtnk pr szt, hogy miknt hasznlhatjuk a listkat vzszintes vagy fggleges
navigcis svknt, valamint lenyl menk szerepben.
Az albbiakban ismertetett mdszerek mindssze egy kis rszt mutatjk be azoknak
a navigcis lehetsgeknek, amelyeket a listk segtsgvel valsthatunk meg.
Az alapelvek azonban hasonlak- a hihetetlen vltozatossg a tervezk fantzijnak
termke. Az ra vgn felsorolt pldk, amelyek nagyszeren mutatjk a CSS alap
navigci elnyeit, a mi kreativitsunk felbresztsre szolglnak.
280
Miben klnbznek a navigcis listk

a hagyomnyos trsaiktl?
Amikor navigcis elemek szerepben alkalmazott listkrl beszlnk, valjban CSS
stlusok hasznlatra gondolunk, amelyekkel elrjk, hogy a listk gy jelenjenek meg
egy weboldalon, ahogy a ltogatk azt a navigcis elemektl elvrjk - vagyis telje
sen ms alakban, mint a hagyomnyos felsorolsok s szmozott listk. Egyrszrl per
sze igaz az is, hogy a navigcis elemek halmaza ltalban nem ms, mint hivatkoz
sok listja, ezek a hivatkozsok azonban olyan formban jelennek meg, hogy a fel
hasznl azonnal tudja, hogy itt avatkozhat be a weboldal mkdsbe:
Az egrmutat vltozsa jelzi, hogy az elemre kattinthatunk
Az elem krnyezetben tallhat terlet megvltozik, amint az egrmutatt fl
visszk.
Az elem tartalma kpileg elvlik a norml szvegtl.
A navigcis elemeket rgebben javarszt kpekre ptettk- peremet utnz gombok

kal s a httrtl jl elvl szveggel, s ehhez jtt az gyfloldali JavaScript, amely
az egrmveleteknek megfelelen cserigette a kp vltozatait. Tiszta CSS hasznlatval
azonban rugalmasabb, tovbb sokkal inkbb felhasznl- s keresbart navigcis
listkat kszthetnk, amelyek knnyen elrhetk a felhasznlk szmra, fggetlenl
attl, hogy milyen eszkzzel jelentik meg a weboldalt
Akrmilyen formban is tntetjk fel a navigcis elemeket- vzszintes vagy fggleges
elsdleges navig
cis elemek a bevezet oldalakra, valarnint a webhely fontosabb rszeihez viszik a lto
elrendezsben-, ezen az rn kt navigcis szintrl ejtnk szt. Az

gatt, mg a
msodiagos navigcis elemek e f rszeken bell segtenek eligazodni.
nll feladat
A
teljes webhelyre kiterjed6 navigci6s rendszer Ida/akitsa
Az elz ra vgn megkrtk az Olvast, hogy gondolkodjon el azon, hogy rnilyen
navigcis szerkezetet hasznlna a sajt webhelyn. Ha ez a szerkezet- a klnbz

rszekkel s ezek kisebb sszetevivel- felsejlik a lelki szemeink eltt, mr van, amibl
kiindulhatunk Erre az alapra ptve ezen az rn elkszthetjk mind a vzszintes, mind
a fggleges navigcis sv elemeit.
17. ra
Navigcis fellet kialakftsa a CSS segftsgvel 281
Fggleges navigcis sv ksztse

CSS-kd segtsgvel
Webhelynk szerkezete - ez alatt rtjk a megjelents mdjt, valamint az adatok
csoportostsnak rendszert- nagyban meghatrozza, hogy a fggleges navigcis
svot az elsdleges vagy a msodiagos navigci cljaira hasznljuk.
Ttelezzk fel, hogy webhelyet ksztettnk a cgnk szmra, amelynek az elsdleges
rszei a kvetkezk: About Us, Products, Support s Press (Rlunk, Termkek,
Tmogats s Sajt). Az About Us rszen bell tovbbi weboldalakat tallhatunk, pldul
Mission, History, Executive Team s Contact Us nven (Clok, Cgtrtnet, Csapat s
Kapcsolat) - ezek a tovbbi oldalak alkotjk az About Us rszen belli msodiagos navi
gcis egysgeket.
A 17.1. pldban ltrehozunk egy egyszer msodiagos oldalt, az oldaln fggleges
navigcis svval, a kzepn pedig a tartalommal. Az oldalt s kzpen tallhat
hivatkozsok egyszer HTML-listaelemek.
A plda, valamint a hozz tartoz weboldal a 17.1. brn nagyszer kiindulpontot ad
ahhoz, hogy bemutassuk, miknt teszi lehetv a CSS, hogy kt hasonl HTML-szerke
zetbl klnbz megjelens felleti elemeket hozzunk ltre.
17.1. plela
er weboldaljaggleges navigcis listval
<!DOCTYPE
html
encoding="UTF-8"?>
PUBLIC
"-//W3C//DTD
XHTML
1.1//EN"
<html
xrnlns="http://www.w3.org/1999/xhtml"
xrnl:lang="en">
<head>
<title>About
<style
body
font:
#nav
Us</title>
type="text/css">
12pt
Verdana,
width:l50px;
float:left;
margin-top:l2px;
margin-right:l8px;
#content
width:550px;
float:left;
Arial,
Georgia,
sans-serif;
</style>
</head>
<body>
<div id="nav">
<Ul>
<li><a href="#">Mission</a></li>
<li><a href="#">History</a></li>
<li><a href="#">Executive Team</a></li>
<li><a href="#">Contact Us</a></li>
</Ul>
</div>
<div id="content">
<hl>About Us</hl>
<p>On
to
the introductory pages
of main
repeat the secondary navigation
sections,
and
it can
provide
more
be useful
context,
such as:</p>
<Ul>
<li><a href="#">Mission</a>:
Learn more
about
our corporate
mission and philanthropic efforts.</li>

<li><a href="#">History</a>:
Read
about our
corporate
history
and learn how we grew to became the largest widget maker

in
the country.</li>
<li><a href="#">Executive Team</a>:

the campany
run
like a
Our team of
well-oiled machine
executives makes
(also
useful
for
making widgets) .</li>

<li><a href="#">Contact Us</a>:
methods for contacting us
(and
Here you
can
we really do
find multiple
care what you
have to say) .</li>

</ul>
</div>
</body>
</html>
'
About Us
Mozilla Fftfox
51o fort l'i<w Hilt"'Y Jlookmorl<> Ioot. J:l<lp
.' ft
Ml!;:;!Qn
l::llstl1.rt
Il!am
Contact Us
------
--l
ktm,nw ,,
....,
m/ o-:
<. ",. ,n.you,d :o.
-_
i/ :-:
Jr.
.tt -
---
..
About Us
On the lntroductory pages of main sections, It can be useful to
repeat the secondary navlgatlon and provide more context, such
as:
M.is..s.i.Qn: Learn more about our corporate mission and
phllanthropic efforts.
l::llstl1.rt: Read about our corporate history and learn how we
grew to became the largest widget maker ln the country.
Executiye Team: Our team of executlves makes the campany
run llke a well-olled machine (aIso useful for making
widgets).
ContactUs: Here you can find multlple methods for
contacting us (and we really do care what you have to say).
17.1. bra
A kiindulpont:
navigci stlusok
nlkli listval
17. ra
Navigcis fellet kialakftsa a CSS segtsgve1
f 283
Az oldal tartalma kt egyms mellett elhelyezett <d i v> elembl ll ssze: az egyikk
id
jellemzjnek rtke nav, a msik pedig content. Jelenleg csak a <div> elemek
szlessgt, margit, valamint a float rtkt hatroztuk meg stlusokkal; a listaele

mek egyltaln nem kaptak stlusokat.
A tartalom s a navigcis elemek listinak megklnbztetsre helyezzk el az albbi
kdot a stJ.1uslapon:
#nav
text-decoration:
#content
none;
text-decoration:
font-weight:
none;
bold;
Ezzel mindssze annyit mondtunk, hogy amennyiben a <d i v> elem id jellemzjnek
rtke nav, a benne tallhat <a> hivatkozsok ne kapjanak alhzst, ha pedig az id
jellemz rtke content, az alhzs hinya mellett az <a> hivatkozsok flkvrrel
jelenjenek meg. A klnbsgeket a 17.2. brn lthatjuk.
About Us- Marilla Finefax
c:::r
lW'J..II
file fdit MM Hittocy ioolunarics !ools tfp
fr
Misslon
History
Executive
Team
Contact Us
-+i
http://www.yourdomain.com/verbcalnav.html
--
-.
About Us
On the introductory pages of main sectlons, it can be useful to
repeat the secondary navigation and provide more context, such
as:
Mission: Learn more about our corporate mission and

philanthropic efforts.
History: Read about our corporate history and learn how we
grew to become the largest widget maker in the country.
Executive T eam: Our team of executives makes the
company run like a well-oiled machine (also usefui for
making widgets).
Contact Us: Here you can flnd multiple methods for
Done
17.2. bra
A listaelemek megklnbztetse CSS-stlusokka/
Ha azonban az oldals navigcis listt valban klnlegess szeretnnk tenni, ennl

jval rszletesebben kell foglalkoznunk a stlusokkaL
Egyszint fggleges navigcis sv formzsa

A fenti navigcis elemek esetben mindssze annyi a clunk, hogy eltntessk
a cmkket a felsorolsbl, htteret adjunk nekik, s elrjk, hogy a szveg szne
a hivatkozs llapottl fggen (egyszer hivatkozs; mr ltott hivatkozs; hivat
kozs, amely felett egrmutat ll; illetve hivatkozs, amelyre ppen rkattintanak)
vltozzon. Az els lpssei mr el is kszltnk: elvlasztottuk a navigcit a tarta
lomt!. Ez abban a pillanatban megtrtnt, amikor a navigcis elemeket egy <div>
elembe helyeztk, amelynek az id jellemzje nav.
A kvetkez lpsben mdostjuk az <ul> elem jellemzit, amely a na v <di v> elemen
bell meghatrozza az egyes hivatkozsok megjelenst. Tntessk el a listt jelz
cmkket, s biztostsuk, hogy a fels margn kvl ne legyen ms marg vagy kitlts.
A fels margra ugyanakkor szksg van ahhoz, hogy a navigcis lista tetejt hozz
igaztsuk a tartalomban tallhat About Us" cmfelirat tetejhez:
"
#nav
ul
list-style:
margin:
none;
12px
padding:
Opx
Opx
Opx;;
Opx;
Mivel a navigcis lista elemei sznes terletekknt jelennek meg, az elvlasztsukhoz

rdemes mindegyiknek als szeglyt adnunk:
#nav
li
border-bottom:
lpx
solid
#ffffff;
Kvetkezzen most a listaelemek stlusnak meghatrozsa. Az elgondolsunk abban

ll, hogy ha a listaelemek egyszer hivatkozsknt lnek a helykn, legyen htterk
egy meghatrozott kk rnyalat, a szveg pedig jelenjen meg fehren s flkvr
betkkel (hozztesszk, hogy a betk mrete nmikpp kisebb, mint a trzsszveg).
Mindehhez a kvetkezt rhatjuk:
#nav
li a:link,
font-size:
#nav
li a:visited
lOpt;
font-weight: bold;
display:
block;
padding:
3px
Opx
background-color:
color:
3px
3px;
#628794;
llffffff;
A fentiekben minden stluselem ismers lehet, kivve taln a display:block; kdot.

Ezzel azt rjk el, hogy a teljes <li> elem "rzi", ha a felhasznl fl viszi az egrmu
tatt. A fggleges navigcis listnkat a fenti stlusokkal a 17 .3. brn lthatjuk.
17. ra
Navigcis fellet kialakftsa a CSS segftsgve1
f 285
Ahout u. - Mozalo ,"..,.

!ook J::l<lp
\_
http:/t-.yourdomaln.com!vettialnav2.html
About Us
On the introductory pages of main sectlons, It can be useful to
repeat the secandary navlgatlon and provide more context, such
as:

philanthroplc efforts.
History: Read about our carporate history and learn how we
Executive Team: Our team of executlves makes the
campany run llke a well-olled machine (also useful for
maklng wldgets).
Contact Us: Here you can flnd multiple methods for
Do""
17.3. bra
A fggleges lista kezd navigcis menre emlkeztetni
!ook J::l<lp
httrr,//www.yourdomtlin.com/vutiuiMV2.html
.. .
About Us
repeat the secondary navlgation and provide more context, such
as:
Done
Mission: Learn more about our carporate mlsslon and

phllanthroplc efforts.
History: Read about our corporate history and learn how we
grew to became the largest widget maker in the cauntry.
Executive Team: Our team of executives makes the
campany run llke a well-ailed machine (also useful for
making widgets).
Contact Us: Here you can find multlple methods for
17.4. bra
A listaelemek most mr sznt vltanak, ha fljk visszk az egrmutatt
Ha a felhasznl valamelyik navigcis elem felett tartja az egrmutatt, azt szeretnnk,

hogy valamilyen lthat vltozs menjen vgbe, ami jelzi, hogy az elem reagl a kattin
tsra. Ez hasonl hats ahhoz, amit a programokban is lthatunk: a men szne megvl
tozik, amikor az egrmutat fl r. Esetnkben egyarnt megvltoztatjuk a httr s
a szveg sznt- vagyis elrugaszkodunk a megszakott fehr-kk egyttestl:
#nav li a:hover,
font-size:
#nav
li
a:active
lOpt;
font-weight: bold;
display: block;
padding:
3px
Opx
background-color:
3px
3px;
#6cac46;
color: #000000;
Az eddigi stlusmdostsaink eredmnyt a 17 .4. bra szernllteti. Lthatjuk, hogy

a stluslap nhny bejegyzsvel az egyszer listbl egy vizulisan gazdag menhz
jutottunk.
Tbbszint fggleges navigcis sv formzsa

Mit tegynk abban az esetben, ha szksg van egy msodik navigcis szintre is,
amelyet a felhasznl brmikor elrhet? Nos, ezt megoldhatjuk begyazott listkkal
(amelyekrl az elz rkon tanultunk) s tovbbi stluslap-bejegyzsekkeL
Ttelezzk fel, hogy az Executive Team hivatkozs alatt tovbbi ngy navigcis
elemet kell feltntetnnk A lista HTML-kdjt mdostsuk az albbiak szerint:
<Ul>
<li><a href="#">Mission</a></li>
<li><a
href="#">History</a></li>
<li><a
href="#">Executive
Team</a>
<Ul>
<li><a
href="#">»
CEO</a>
<li><a
href="#">»
CFO</a>
<li><a
href="#">»
COO</a>
<li><a
href="#">»
Other
Minions</a>
</Ul>
</li>
<li><a href="#">Contact Us</a></li>
</ul>
gy ltrehozzuk a begyazott listt az Executive Team hivatkozs alatt (lsd a 17.5. brt).
Az » HTML-egyeddel az j hivatkozsok eltt megjelen jobbra mutat nyilakat
hozzuk ltre.
Az j elemek tmbkben jelennek meg a lista szerkezetben, de a fellet mg nem
tkrzi igazn az adatok hierarchijt. Ahhoz, hogy nmi kpi segtsget is adjunk
az Executive Team hivatkozs al tartoz elemek elvlasztshoz, ismt mdostsuk
a stluslapot nrni behzs alkalmazsval.
17. ra
Navigcis fellet kialakftsa a CSS segftsgvell 287
httP'J/-.yourdomm.com/vuticalnav3.html
About Us
On the lntroductory pages of main sectlons, It can be useful to
repeat the secondary navigatlon and provide more context, such
as:
Mission: Learn more about our corporate mlssion and

phllanthroplc efforts.
History: Read about our carperate history and learn how we
Executive Team: Our team of executlves makes the
campany run llke a well-ailed machine (also useful for
maklng wldgets).
Contact Us: Here you can find multiple methods for
17.5. bra
Begyazott
navigcis lista
(amelynek
Done
a formzsa mg
..,
finomtsra szarul)
Mieltt azonban erre sor kerlne, meg kell vltoztatnunk nhny egyb stluslap-bejegy
zst is. A2 elzekben hasznlatba vettnk nhny elemvlasztt (kijellt) - ezek
a
#nav ul
#nav li,
amelyeknek a jelentse "minden
<Ul>
nav
nev
<div>
elemen
bell", illetve minden <li> a nav nev <div> elemen bell". Most azonban mr kt
"
<ul> elem, valamint < li> elemek egy jabb csoportja lthat a nav nevezet <div>
elemen bell, amelyeket el szeretnnk klnteni az elzektL
Ahhoz, hogy biztostsuk mindkt elemtpus megfelel formzst, el kell rnnk, hogy
a stluslapok elemvlaszti pontosan tkrzzk a listahierarchia viszonyait. Ennek meg
valstshoz a listk els szintjn a
a
#nav ul ul
s a
#nav ul ul li
#nav ul
#nav ul li,
a msodik szinten pedig
elemvlasztkat kell hasznlnunk. A 17.2. pldban
a stluslap j vltozatt lthatjuk, valamint azt a HTML-kdot, amely a 17.6. brn

bemutatott ment adja.
17.2. plda
Tbbszitztjaggleges navigcis lista
--------
<?xml version="1.0"
<!DOCTYPE
html
encoding="UTF-8"?>
PUBLIC
"-//W3C//DTD
XHTML
1.1//EN"
"http: l /www.w 3.org/TR/xhtmlll/DTD/xhtmlll. dtd">

<html
xml:lang="en">
<he ad>
<title>About
<style
body
Us</title>
type="text/c ss">
font:
12pt Verdana,
Arial,
Georgia,
sans-serif;
2BB Tanuljuk meg a HTML s a CSS hasznlatt 24 ra alatt
#nav
width:l50px;
float:left;
margin-top:l2px;
margin-right:l8px;
#content
width:550px;
float:left;
#nav a
text-decoration:
#content a
none;
text-decoration:
font-weight:
#nav ul
none;
bold;
list-style:
margin:
none;
12px Opx Opx Opx;
padding: Opx;
#nav ul
li
border-bottom: lpx solid

#nav ul li a:link,
#ffffff;
#nav ul li a:visited
font-size: lOpt;
font-weight: bold;
display: block;
padding:
3px Opx
3px
background-color:
color:
3px;
#628794;
#ffffff;
#nav ul li a:hover,
#nav ul li
a:active
font-size: lOpt;
font-weight: bold;
display: block;
3px Opx
padding:
3px
background-color:
color:
3px;
#c6a648;
#000000;
#nav ul ul
margin: Opx;
padding: Opx;
#nav ul ul li
border-bottom: none;
#nav ul ul li
font-size:
a:link,
#nav ul ul li a:visited
8pt;
font-weight: bold;
display: block;
padding:
3px Opx
3px
18px;
17. ra
Navigcis fellet kialaktsa a CSS segftsgve1
f 289
background-color: #628794;
color: #ffffff;
#nav
ul ul
li
a:hover,
#nav
ul
ul li
a:active
font-size: 8pt;
font-weight:
bold;
display:
block;
padding:
3px
Opx
3px
background-color:
color:
18px;
#c6a648;
#000000;
</style>
</head>
<body>
<div
id="nav">
<Ul>
<li><a
href="#">Mission</a></li>
<li><a
<li><a
href="#">Executive
Team</a>
<Ul>
<li><a href="#">»
CEO</a>
<li><a href="#">»
CFO</a>
<li><a href="#">»
COO</a>
<li><a
Other
href="#">»
Minions</a>
</Ul>
</li>
<li><a
href="#">Contact
Us</a></li>
</Ul>
</div>
<div
id="content">
<hl>About Us</hl>
<p>On the
introductory pages
to
the
repeat
such
secondary
of
main
navigation
sections,
it can be useful
and provide
more context,
as:</p>
<Ul>
<li><a
href="#">Mission</a>:
mission and philanthropic

<li><a
and
in
href="#">History</a>:
learn
the
<li><a
the
how
we
grew
to
company
run
like
making
widgets) .</li>
href="#">Contact
methods
for
have
say.</li>
</Ul>
</body>
</html>
more
about
our
corporate
Read about
become
the
our
corporate
largest
widget
history
maker
country.</li>
href="#">Executive
<li><a
</div>
Learn
efforts.</li>
to
contacting
Team</a>: Our team
well-oiled
Us</a>:
us
machine
Here
(and we
you
really
of executives
(also useful
can
do
for
find multiple
care
what
you
makes
http-J/www.yourdomain.com/vulnav3.htmt
About Us
repeat the secondary navigatlon and provide more context, such
as:

philanthroplc efforts.
History: Read about our carperate history and learn how we
grew to became the iargest widget maker ln the country.
Executive Team: Our team of executives makes the
campany run like a well-olled machine (also useful for
making widgets).
Contact Us: Here you can find multiple methods for
contacting us (and we realiy do care what you have to say).
17.6. bra
Tbbszintfgg
leges navigcis
Don
lista ltrehozsa
ess-stlusokkal
A fggleges navigcis elemek stlusvltozatainak csak a fantzink szab hatrt- a lehe

tsgek kimerthetetlenek. Nyugodt szvvel hasznlhatunk szneket, margkat, kitltst,
httrkpeket s egyltaln, a CSS sszes lehetsgt- az gy kapott eredmny pedig
rugalmas s brmikor knnyen mdosthat. Ha berjuk a "CSS vertical navigation"
(CSS fggleges navigci) kifejezst egy internetes keresbe, ezernyi pldt lthatunk
a stluslapok hasznlatra- s ezek illindegyike az ezen az rn megismert egyszer
szablyokra pl.
Vzszintes navigcis sv ksztse CSS-kd segtsgvel

Az rt a fggleges navigci tmakrvel kezdtk, rnivel a lista s a navigcis elemek
kztti tmenet gy szemlletesebb volt- vgeredmnyben a navigcis elemek tovbb
ra is egy listt alkotnak, amely szemre mg rnindig hasonlt valamelyest a j reg
bevsrllistra. A vzszintes navigci megvalstsnl tovbbra is listt alkalmazunk,
de ez esetben az <ul> s a <li> elemek display jellemzjnl nem a korbban megis
mert block, hanem az inline rtket hasznljuk. Ennyi az egsz!
A 17.3. pldban a kiindulpontknt szolgl HTML-oldal kdjt lthatjuk, amelyben
vzszintes navigcit szeretnnk alkalmazni. Az oldalon kt <div> elemet tallhatunk:
az egyik a fejlcet, a msik pedig a tartalmat trolja. A fejlcen bell tovbbi kt,
egyms mellett sz <div> elemet tallunk- az egyikben az emblma kap helyet,
a msikban pedig a navigcis sv. Az utbbiban egy listt tallunk, amelyben mind
a lista, mind az elemek a display jellemz inline rtkt hordozzk. Az elemeket s
elhelyezsket a 17.7. brn lthatjuk.
17. ra
17.3. plda
<?xml
Listra ptU egyszer vzszintes navigci
version="1.0"
<!DOCTYPE
html
encoding="UTF-8"?>
PUBLIC
"-//W3C//DTD
XHTML
1.1//EN"
<html
xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>ACME Widgets
<style
LLC</title>
type="text/css">
body
font:
#header
12pt Verdana,
Arial,
Georgia,
sans-serif;
width:
auto;
#logo
float:left;
#nav
float:left;
#nav ul
list-style:
display:
#nav
li
display:
#content
width:
inline;
{
auto;
float:
left;
clear:
left;
#content
none;
inline;
text-decoration:
none;
font-weight: bold;
</style>
</head>
<body>
<div
id="header">
<div
id="logo">
<img
src="acmewidgets.jpg" alt="ACME
</div>
<div
id="nav">
<Ul>
<li><a
href="#">About Us</a></li>
<li><a
href="#">Products</a></li>
<li><a
href="#">Support</a></li>
<li><a
href="#">Press</a></li>
</ul>
Widgets
LLC"
/>
f 291
</div>
</div>
<div id="content">
<P><strong>ACME
in all
the
Widgets LLC</strong> is
the
greatest
widget-maker
land.</p>
<p>Don't believe us?
Read
on ...<Ip>
<Ul>
<li><a href="#">About
Us</a>:
<li><a href="#">Products</a>:
<li><a href="#">Support</a>:
but
we
provide it
are
pretty
products
It is
great.</li>
are
unlikely
the
best.</li>
you
will
need
are
saying
support,
anyway.</li>
<li><a href="#">Press</a>:
great we
We
Our
Read
what
others
(about
how
are) .</li>
</Ul>
</div>
</body>
</html>
.. f
ACME Widgets LLC is the greatest widget-maker in ali the land.
Don't belleve us? Read on ...
11.1. bra
About Us: We are pretty great.

Products: Our products are the best.
Support: It ls unllkely you will need support, but we provide it anyway.
Press: Read what others are saying (about how great we are).
Mkd- br nem igazn

tetszets - vzszintes
navigcis sv, amely egy
sorban elhelyezked lista
Don
elemekbl ll
A lista megjelensnek testreszabsra e ponttl csak CSS-stlusokat hasznlunk,
a HTML-tartalom mr elkszlt. A kvnt megjelens elrshez alkalmazzuk

a kvetkez CSS-kdot. Elszr is, mdostsuk a
nav
nev
<d i v>
hatrozzunk meg a szmra httrsznt s szeglyt, valamint

(gy az emblma aljhoz kzel jelenik meg):
#nav
float:left;
margin:
width:
85px
Opx
Opx
Opx;
400px;
background-color:
#628794;
border:
black;
lpx
solid
elem szlessgt,
85 pontos fels margt
17. ra
Az
<ul>
Navigcis fellet ki alakftsa a CSS segftsgve1 293
elem meghatrozsa a margktl s a kitltstl eltekintve megegyezik
17.3. pldban ltottakkal:
#nav ul
margin:
Opx;
padding:
Opx;
list-style:
display:
<li>
none;
inline;
elem esetben sincs nagy vltozs, rnindssze a
line-height
rtkt lltj uk
l. Sem-re:
#nav
li
display:
inline;
line-height:
1.8em;
=!SJ
t!
ACME
lfidgets
LLC
About Us
Products
Support
Press
ACME Widgets LLC is the greatest widget-maker ln ali the land.
About Us: W e are pretty great.

'"'"'n""""'"'''""'"''"-'"'"''''''"'""""
Read what others are saying (about how great we are).
1 Done
17.8. bra
Vzszintes navigcis sv kialaktsa stlusokkal
A hivatkozsok stlusai hasonlak a fggleges navigcinl ltottakhoz - a kitlts

rtkei eltrnek, de a sznek s a betmret azonos:
#nav
ul
li
a:link,
font-size:
#nav
ul
li
lOpt;
font-weight: bold;
text-decoration:
padding:
7px
background-color:
color:
none;
lOpx
#ffffff;
7px
lOpx;
#628794;
a:visited
#nav ul li a:hover,
font-size:
#nav ul
font-weight:
bold;
text-decoration:
none;
padding: px
7px
lOpx
background-color:
color:
li a:active
lOpt;
lOpx;
#c6a648;
#000000;
E mdostsokat kveten az oldal a 17.8. brn lthat alakot lti.

Ha a ltogat a navigcis elemek fl viszi az egrmutatt, a httr s a szveg szne
ugyangy megvltozik, mint a fggleges navigcis men esetben lttuk. Emellett itt
is lhetnk a begyazott listk hasznlatnak lehetsgvel, gy lenyl menket
kaphatunk. Prbljuk ki!
sszefoglals
Ezen az rn megtanultuk, hogyan kszthetnk egyszer, rendezetlen HTML-listkbl
fggleges s vzszintes navigcis svokat. Azzal, hogy a grafikai elemek, a JavaScript,
illetve ms mdszerek helyett a CSS hasznlata mellett dntttnk, jelents rugalmass
got nyertnk mind az oldal fenntartsa, mind pedig a megjelentse tern. Rbredtnk,
hogy az egyszer, alhzott szveges hivatkozsokbl nhny ess-bejegyzssei szeg
lyekkel krlvett, httrsznnel rendelkez terleteket hozhatunk ltre, amelyeken bell
a szveg megjelenst is testreszabhatjuk. Mindemellett azt is megtanultuk, miknt
helyezznk el begyazott listkat a menkn bell.
Krdezz-felelek
K:
V:
Hasznlhatunk a navigcis menkben kpeket a listk cmkiknt?

Igen. A kpet elhelyezhetjk a listaelem HTML-szvegben, de a <li> elem
httrkpeknt is alkalmazhatjuk. A navigcis elemek stlusait pontosan gy
hatrozhatjuk meg, mint brmely ms listaelemt. A rendezetlen HTML-listk s
a CSS alap fggleges vagy vzszintes navigcis svok kztt csak a nvben
van klnbsg, no meg abban, hogy az utbbiak esetben a listt a trzsszve
gen kvl, klnleges clra hasznljuk. Ennek tudatban rdemes ezeknek
a listknak valban klnleges formzst biztostanunk - ebbe pedig pr
grafikai elem alkalmazsa bven belefr.
K:
Hol tallhatunk tovbbi pldkat a listk alkalmazsi lehetsgeire?
V:
A "CSS navigation" kereskifejezsre legutbb mintegy 44 milli tallatot

kaptam, gy ht plda van elg. me nhny kiindulpont:
17. ra
( 295
Az A ListApart CSS-stlusokkal kapcsolatos cikkei:

http://www.alistapart.com/topics/code/
CSS Listamatic a Maxdesign-tl:

http://css.maxdesign.eom.au/listamatic/
Vitaly Friedman CSS Showcase nev oldala:

http://www.alvit.de/css-showcase/
Ismtls
Ez a rsz ism krdsekbl s vlaszokbl ll, amelyek segtsgvel megszilrdthatjuk
Ismtl krdsek
1.
A lisrkra pl navigcis svokban hny szinten gyazhatjuk egymsba

a listkat?
2.
"Ha a display jellemznek az inline rtket adjuk, vzszintes listt kapunk."
3.
Navigcis lista ksztsnl megtehetjk, hogy az
Igaz vagy hamis?

a
elemvlaszt mind a ngy
losztlynak ugyanazokat az rtkeket adjuk?
Vlaszok
1.
A listk elmletileg akrmilyen mlysgben egymsba gyazhatk, a hasznlha

tsg szempontjai miatt azonban van egy sszer hatr erre nzve. Tbbnyire
hrom szintig szoks elmenni - egybknt kusza szerkezet webhelyhez jutunk,
vagy a kelletnl tbb vlasztsi lehetsg el lltjuk a ltogatkat.
2.
Igaz, amennyiben a stluslapon mind az ul, mind a li elemvlasztk esetben
3.
Termszetesen megtehetjk, de ezzel azt kockztatjuk, hogy a gynyr
belltjuk a display jellemzt.

meninkrl senki nem veszi szre, hogy itt valban menkrl van sz (hiszen
az egrmveletek semmilyen kpi visszajelzst nem adnak).
Gyakorlatok
A tbbszint fggleges listknl bemutatott mdszerek alkalmazsval hozzunk
ltre alrendelt navigcis elemeket a fejezet vgn ksztett fggleges listhoz.
Tanulmnyozzuk klnfle webhelyek CSS alap navigcis megoldsait, s ke

ressnk gyes fogsokat A bngsz "Oldal forrsa" parancsval vizsgljuk meg
a kdot, s prbljuk megvalstani a ltottakat a sajt weboldalainkon.
18. RA
Szvegmdosts egrmveletekkel
A lecke tartalma:
Lebeg lersok ltrehozsa CSS-stlusokkal
Tovbbi vltszveg megjelenitse CSS-stlusok segtsgvel
Az esemnyek elrse
A <div> elemek megjelensnek megvltoztatsa az onclick esemny

segtsgvel
Knyvnk eddigi rszben lthattunk mr pldkat arra, hogy az egrmveletek mi

knt vltoztathatjk meg a szvegek megjelentst. A legegyszerubb plda taln az,
amikor az <a> hivatkozs hover losztlynak stlusait gy hatrozzuk meg, hogy
a szveg eltr sznnel jelenjen meg, amikor az egrmutat a hivatkozs fl r.
Az elz rn megtanultuk, hogyan vltoztathatja meg ahover losztly egy <li>
elem htternek s szvegnek sznt.
Ezen az rn kt mdszert is tanulunk az egrmveletek s a CSS-stlusok egyttes
hasznlatra: szveget jelentnk meg, amikor az egrmutat egy felleti elem fl
kerl, valamint egrkattints hatsra megvltoztatjuk egy trolelem sznt. Ezek
a lehetsgek nmagukban is hasznosak lehetnek, de ami mg fontosabb, hogy j
kiindulpontot adnak azokhoz az sszetett mveletekhez, amelyekre a webfejleszts
sorn ksbb szksgnk lehet.
lebeg lersok ltrehozsa CSS segtsgvel

A lebeg lers (tooltip) a grafikus felletnek - legyen program vagy webhely - egy
olyan eleme, amely bvebb tjkoztatst ad, ha az egrmutatt egy adott elem fl
visszk. A 18.1. brn egy ilyen lebeg lerst lthatunk mkds kzben: az egrmutat
"
a "HTML hivatkozs felett ll, a lebeg lers pedig a "HTML" szveget jeleniti meg egy
kis szvegmezben. Ez esetben a lers szvegt az <a> elem tit le jellemzje adja.
Examples
of tooltip usage are prevalent on Web page.s Many graphical Web bfowsers
itl attribute of an
element as a toott1p when a user hovers the mouse
Demonstrations
disp4ay the
in such a
ou should be able to haver <Mar Wikipedia
HTML ar Some browsers notably Microsoft's Intemet
also display the alt attnbute of an 1mage as a tooltip 1n the same manner, if a
d t le attribute IS also specified, rt will ovemde the alt attnbute for tooltip content
cursor eMu that element.
images and hyperlinks and see a to
OoWd>
Espai'iol
Frany1111
t!i!Oi
h111no
B*ll
. -
P)'CctOMi
Svens.ka
Explorer, will
Wrth the release
citll! 1s
of M1crosoft's Intemet Explorer 8 alt
no Io nger displays a toottip. and
now used mstead
Name
Why 1s th1s named Toolt1p? How 1s th1s related
10 tools? Originalty this
term comes from okjer
M1crosofl. applkabons Oike Mcrosoft Word 95), wtuch had a Toolbar where movmg the mouse
over the buttons (the Toolbar Jtons) displayed these Toottips, a short description of the
funct1on
of the
tool 1n the Toolbar Nowadays these Tooltips are used ewrywhere. not only on
Toolbars
See also
lediti
Toolbar
18.1. bra
Egyszer lebeg lers mkds kzben
A lebeg lers megjelertst a bngsz intzi, gy ennek mikntjbe webprogramo

zknt nem szlhatunk bele. Arra viszont lehetsget kapunk, hogy nmi CSS-kddal
s a korbban tanultak alkalmazsval ltrehozzuk a sajt lebeg lersainkat
A 18.1. pldban egy olyan weboldal rajzoldik ki elttnk, stluslap-bejegyzsekkel,
valamint szvegek s kpek HTML-kdjval -, amelyben az egyik hivatkozs egyni
lebeg lerst jelent meg.
Vegyk szre, hogy a szvegben tallhat els hivatkozshoz tartozik egy osztly,
amelynek a neve tip- ez a nv klnbzteti meg a hivatkozsunkat a trsaitl,
amelyek nem rendelkeznek lebeg lerssaL Mivel azonban itt a class, nem pedig
az id rtkt hatroztuk meg, a nevet hasznlhatjuk az oldal tbbi hivatkozsnl is.
18. ra
18.1. plda
<?xml
Szvegm6dosfts egrmllveletekk.e1 299
Egyszer lebeg lers ltrehozsa CSS-stlusokka/
version="l.O"
<!DOCTYPE
html
encoding="UTF-8"?>
PUBLIC
XHTML 1.1//EN"
"-//W3C//DTD
"http: l /www. w3. org/TR/xhtml11/DTD/xhtml11.dtd">

<head>
<title>Steptoe Butte</title>
<style
a
type="text/css">
{
text-decoration:
font-weight:
a.tip
none;
bold;
position:relative;
z-index: 24;
a.tip:hover
z-index:25;
a.tip
span
display:
a.tip:hover
none;
span
font-weight:
normal;
display: block;
position:
top:
absolute;
20px;
left:
25px;
width: 150px;
padding:
3px;
border:1px
solid
#OOO;
background-color:#ddd;
color:#OOO;
</style>
</head>
<body>
<h1>Steptoe Butte</h1>
<P><img
src="steptoebutte.jpg"
alt="View from
Steptoe Butte"
style="float:left;margin-right:12px;margin-bottom:6px;border:lpx
solid
#000"
/>Steptoe
silty
loess
of the <a class="tip"
Butte is a quartzite island jutting out
of the
href="http://en.wikipedia.org/wiki/Palouse">Palouse <span>Learn more

about
the
rock
that
with
the
Palouse!</span></a>
forms
15-7
hills
in
the butte is over 400
million
year
Whitman
County,
Washington. The
million years old,
in contrast
old
<a href="http://en.wikipedia.org/wiki/Columbia_River">Columbia River</a>

basalts
that
underlie
ancient rock
have
come
with
small
hill
height) .</p>
the
to
flat
rest
be
top,
of
the
Palouse
called buttes,
whose
width
at
(such
butte
top
"islands"
being
does
of
defined
as
not exceed its
<p>A hotel built
1908,
by
Cashup Davis
burning down several years
stood atop
after it
Steptoe Butte from
closed.
In 1946,
1888 to
Virgil
McCroskey donated 120 acres
(0.49 km2) of land to form Steptoe Butte
State
increased to
Park,
which was
later
Steptoe
Butte
is currently
recognized as
because
of its unique geological value.
over
150 acres
(0.61 km2).
a National Natural
It
is
named
Landmark
in honor of
<a href="http://en.wikipedia.org/wiki/Colonel_Edward_Steptoe">Colonel
Edward Steptoe</a>.</p>
3,612 feet
<p>Elevation:
above the surrounding
(1,101 m),
approximately 1,000
feet
(300m)
countryside.</p>
<P><em>Text from
<a href="http://en.wikipedia.org/wiki/Steptoe_Butte">Wikipedia</a>,
photo
by the
author.</em></p>
</body>
</html>
A tip osztly meghatrozza a position s a z-index stlusokat. A position relative
rtke biztostja, hogy az elem az eredeti krnyezetben jelenjen meg a szvegben,

a
z-index
a nagyobb
rtknek belltsval pedig azt rhetjk el, hogy a hivatkozs szvege

z-index
rtkkel rendelkez elemek alatt maradjon. A
z hivatkozsok esetben pldul a
haver
llapot magasabb
tip
z-index
osztlyt alkalma
rtket takar.
A kvetkez kt stlus az alkalmazott <span> elemekhez kthet. Az < a > elem belsej
ben tallhat
<span>
elemen belli szveg nem jelenik meg mindaddig, amg meg
nem jelentjk a lebeg lerst az egrmutatt a hivatkozs fl helyezve. Vegyk

szemgyre az albbi hivatkozst:
<a class="tip" href="http://en.wikipedia.org/wiki/Palouse">Palouse
<span>Learn
more
about
the
Palouse!</span></a>
+ .
Steptoe Butte
----""'!!"'!JJ!II-
Steptoc Butte is a quam;te island juttmg out afIbe silly loess aftbe
P ase hiDs ill Whilman Couoty, Washingtoo_ Th< rock that fonns
old. in coolrast with tbc: lS-7
Lam more abou! the
er ba.sa1ts that undertie the rest oftbe
' Palousel
aldtJ,,ffiiJCr"..,
l!!r'onr.,b rock: have come to be caBed
buttes, a butte beiiig ddined as a smal bill witb a !lat top, whos<
\\-KIIh al top does not ==!ts ).
A hotd built by Casbup D"'

is stood atop Steptoc buttettom 1888
to 1908, bw1liDg clowu S<Venl y<ars afte< ;, dos<d !n 1946, Vrgi
McCroskcy clooated UO acres (0.49 km2) afland to form Steptoc Butte State PaJk, wbic:h was lateeillaeased
to over 150 acres (0.61 km2). Steptoe BIOte is currenily recogniw:l as a Nabooal Nillond landmark becaose af
ils mique gecicgical \-alue. It is oamed. in booor ofColoael Edward Steptoe.
18.2. bra
& 3,612 feet(1,101 m), approxillsalel y 1,000 feet (300m) above Ibe surrouodillg cClllDlrySK!e.
Ha az egrmutatval
Tazfrom
Jl'ikip<dia, photo by the author.
httvJ/en.wibpedit.orglwikVPalouse
az oldal els hivatkozsa

fl megynk, egyni
lebeg lerst kapunk
18. ra
Szvegmdosfts egrml1veletekkel 301
Els pillantsra gy tnik, hogy ennek a HTML-kdnak a "Palouse Learn more about
"
the Palouse! szveget kellene megjelentenie. A "Learn more about the Palouse!"
szvegrszlet azonban a <span> elemen bell ll, amelynek a stlust gy hatroztuk
meg, hogy csak akkor jelenjen meg a kpernyn, ha az egrmutat a valdi hivatkozs
"
("Palouse ) fl r. Az eredmnyt a 18.2. brn lthatjuk.
"
A "Learn more about the Palouse! szveg a <span> elemen bell kap helyet a HTML
kdban, a stlust azonban a stluslap hatrozza meg. A hatsrt egszen pontosan
az a. t ip: hov er span kijell felel, amely egy 150 kppont szles tglalapot hoz ltre,
szrke httrrel s fekete szegllyel. A tglalap szljtl lefel 20, jobbra pedig
25 kpponttal eitolva jelenik meg. Az eredmny nem ms, mint egy lebeg lers.
Egyb szvegrszletek megjelentsa

CSS-kd segtsgvel
A lebeg lersok szerepe viszonylag behatrolt: egy szveges "tipp" megjelentse egy
adott hivatkozs mellett. A megjelentsk mdszert azonban ms terleten is hasznl
hatjuk - a CSS-stlusok segtsgvel az egrmveletek fggvnyben rejtett szvegeket
jelenthetnk meg az oldal klnbz rszein. Vegyk pldaknt a 17. rn megismert
ACME Widgets LLC kezdoldalt, mgpedig azt, amelyiken a vzszintes navigcis svot
alkalmaztuk. A 17.1. plda mdszereit hasznlva megjelenthetnk nmi tjkoztatst
a men felett, arnikor a felhasznl a nagyobb rszek hivatkozsai fl helyezi az egr
mutatt. A 18.3. bra ezek egyikt mutatja mkds kzben. A megjelents rdekben
visszaszereztnk nmi terletet a navigcis sv felett s az emblma mellett.
:LJ
fii//C:/Usen/JM/Oeskt:opls:ms_htmlai/Be_doa/17/hovertei..html
ACME
Widqet
LLC
It ls untikety you will need support, but we provide it

anyway.
About Us
Producs
li
Presc.>
ACME Widgets LLC ls the greatest widget-maker in ali the land.
About Us: We are pretty great.

Support: It ls unllkely you will need support, but we provide it anyway.
Press: Read what others are saying (about how great we are).
18.3. bra
Egyni szveg egy msik
felleti elem felett, amely
Fii//C:/IJsen/JM/Des.kt:op/wrru_htmkn/Be_docs/17/hoverlext..htm
csak az egrmutat
hatsra vlik lthatv
A 18.1. pldhoz kpest mindssze annyit vltoztattunk a CSS-kdon, hogy beillesztettk

az albbi ngy stlust. Ugyanazt teszik, mint a tip osztly stlusai, csak a megjelentsben
trnek el az ott ltottaktl:
a.rnore
position:relative;
z-index:24;
a.rnore:hover
z-index:25;
a.rnore span
display: none;
a.rnore:hover span
font-weight: bold;
display: black;
position: absolute;
top:
-35px;
width: 400px;
padding: 3px;
color:#ffOOOO;
line-height:
lern;
A top tulajdonsg -25px rtke a begyazott <span> elem tartalmt 25 kpponttal

a szlelem bal fels sarka fl helyezi, ellenttben az elz pldval, ahol 20 kp
ponttal al tettk. A HTML-kd mdostsai hasonlak az elzekben ltottakhoz:
az egrmutat hatsra megjelen szveget itt is az <a> hivatkozsan belli <span>
elemben rejtettk el:
<Ul>
<li><a class="rnore"
href="#">About Us <span>We
are
pretty
great.</span></a></li>
<li><a
class="rnore"
href="fi">Products <span>Our
products
are
the best.</span></a></li>
href="#">Support <span>It is unlikely
will need support,

saying
you
but we provide it anyway.</span></a></li>

href="#">Press <span>Read what others
are
(about how great we are) .</span></a></li>
</ul>
Az itt megismert eljrsok alkalmazsval tetszleges szveget megjelenthetnk

az oldal brmely pontjn, amikor a felhasznl az egrmutatt egy <a> hivatkozs fl
viszi. A kvetkezkben megismerkednk az esemnyekkel, s lthatjuk majd, hogy
nmi JavaScript-kd segtsgvel mg komolyabb eredmny szlethet az egrmveletek
s a CSS egyttmkdsbL
18. ra
Szvegmdosfts egrmveletekk.el
l 303
Esemnyek elrse
A felhasznl mveletei, mint a billentylets vagy az egrkattints, mind-mind
esemnyek. Ha pedig egy parancskd egy esemnyre vlaszu! valamilyen mveletet
vgez, esemnykezelsr1 beszlnk. Az esemnykezel paraocskdok s a weboldalunk
elemeinek sszekapcsolsra klnleges jellemzk llnak a rendelkezsnkre.
Az albbiakban bemutatunk nhny fontosabb esemnyjellemzt, amelyeknek az is
merete hasznos lehet a JavaScript-parancskdok rsa sorn. Emellett azt is elruljuk,
hogy az esemnyek bekvetkezse milyen kapcsolatban ll az oldal egyes elemeivel.
onload- A
orrkeydown- A
bngsz betlti az elemet.

felhasznl lenyom egy billentyt.
onkeyup -A felhasznl felenged egy billentyt.
onclick- A felhasznl egy elemre kattint a bal egrgombbal.
ondblclick- A felhasznl dupln kattint egy elemre a bal egrgombbal.
onmousedown- A felhasznl lenyomja valamelyik egrgombot, mikzben
az egrmutat egy adott elem felett ll.
onmouseup- A
onmouseover-
onmousemove-
felhasznl felengedi valamelyik egrgombot, mikzben

az egrmutat egy adott elem felett ll.
A felhasznl az elem hatrain bellre viszi az egrmutatt.
A felhasznl az elem hatrain bell mozgatja az egrmutatt.
onmouseout- A felhasznl az elem hatrain kvlre viszi az egrmutatt.
Lthatjuk, hogy az esemnyjellemzk olyan gyakran elfordul felhasznli mveleteket

jeleznek, mint az egrkattints s a billentylets. Az esemnyekhezJavaScript-kdokat
kapcsoll1atunk; ehhez nem kell mst tennnk, mint hozzrendelni a kdot az esemny
jellemzhz, valahogy gy:
<hl
onclick="this.style.color
'red' ;">l
turn
red
when clicked.</hl>
A fenti pldban a JavaScript-kdot egy <hl> elem onclick esemnyjellemzjhez

rendeltk, ami azt jelenti, hogy a kd akkor indul el, ha a felhasznl a bal egrgomb
bal a szvegre kattint. A kd ennek hatsra a szveg sznt vrsre vltoztatja.
Az addig statikus szveg gy rzkenny vlik a felhasznli mveletekre, hiszen egy
kattintsra megvltoztatja a sznt. Ez az egyszer plda jl mutatja, hogyan mkdhet
nek egytt az gyfloldali paraocskdok a bngszvel.
A kvetkezkben megmutatjuk, miknt mdosthatjuk egy
az esemnykezels segtsgve!. A clunk egy olyan
egrkattintsra eltnik, illetve megjelenik.
<div>
<div>
elem megjelenst
elem ltrehozsa, amely

< div>
az
elem megjelensnek mdostsa
onclick esemny segtsgvel
Az onclick esemnnyel mindenfle mveletet kivlthatunk-tudjuk persze, hogy egy

rlap Submit gombjra kattintva elkldhetjk a felvett adatokat, de az egrkattintst el is
foghatjuk, s gy sokkal gazdagabb szerepet adhatunk neki az oldalunk mkdsben.
A kvetkez pldban lthatjuk, miknt alkalmazhatjuk az onclick esemnyt egy
<div >
elem tartalmnak elrejtsre, illetve megjelentsre. A
18.1. plda szveges s
kpi elemeire ptve bemutatjuk, hogyan jelenthetnk meg korbban elrejtett adatokat,
amennyiben a felhasznl egy szvegrszletre kattint. A "szvegrszlet" kifejezs nem
pongyola szhasznlat, ugyanis szigoran vve itt nem hivatkozsrl van sz. Igaz,
hogy annak nz ki, s gy is viselkedik, de nem egy <a> elemen bell ll a kdban.
A 18.2. pldban az oldal teljes kdjt lthatjuk, a
18.4. brn pedig megszemllhetjk,
hogyan jelenik meg betlts utn a bngszablakban.
18.2. plda
Tartalom elrejtse s megjelenuse az oneitek esemnnyel

<!DOCTYPE
html PUBLIC
"http: l /www.w3.org/TR/xhtmlll/DTD/xhtmlll.dtd">
<head>
<title>Steptoe Butte</title>
a
{
text-decoration: none;
font-weight:
color:
#hide_e
bold;
#7a7abf;
display: none;
#elevation
display: none;
#hide_p
display: none;
#photos
display: none;
#show_e
display: block;
#show_p
display: block;
18. ra
.fakelink
Szvegmdosfts egnm1veletekke1
( 305
cursor:pointer;
text-decoration:
font-weight:
color:
none;
bold;
#E03A3E;
</style>
</head>
<body>
<hl>Steptoe
<P><img
Butte</hl>
src="steptoebutte.jpg"
alt="View
from
Steptoe Butte"
style="float:left;margin-right:l2px;margin-bottom:6px;border:lpx
solid
#000"
/>Steptoe
Butte is a
silty
loess
of
class="tip"
the
<a
quartzite island
jutting out of the
href="http://en.wikipedia.org/wiki/Palouse">Palouse <span>Learn more

about
the
rock
that
with
the
<a
Palouse!</span></a>
forms
15-7
the
butte
million
is
year
hills
over
in Whitman County, Washington. The
400
million
years
old, in
contrast
old
href="http://en.wikipedia.org/wiki/Columbia_River">Columbia
River</a>
basalts that
underlie
ancient rock
have
small
the
come
to
hill with a flat
rest
be
of the
called
top,
whose
Palouse (such "islands" of
buttes,
width at
butte
top
being defined as
does
not
exceed
its
height) .</p>
<p>A hotel built by Cashup Davis stood atop Steptoe Butte from 1888 to
1908, burning
McCroskey
State
down
donated
Park,
which
Steptoe
Butte
because
of its
several years
after it closed.
120
acres
(0.49
km2)
was
later
increased to
is currently recognized
unique
geological
of
over 150 acres (0.61
as a
value.
In 1946, Virgil
land to form Steptoe Butte

km2).
National Natural Landmark
It is named in
honor of
<a href="http://en.wikipedia.org/wiki/Colonel_Edward_Steptoe">Colonel
Edward
Steptoe</a>.</p>
<div class="fakelink"
id="show_e"
onclick="this.style.display='none';
document.getElementByid('hide_e').style.display='block';
document.getElementByid('elevation').style.display='inline';
">»
Show
Elevation</div>
id="hide_e"
document.getElementByid('show_e').style.display='block';
document.getElementByid('elevation') .style.display='none';
">» Hide Elevation</div>
<div
id="elevation">3,612
(300
m)
above
the
feet (1,101 m), approximately 1,000 feet
surrounding
countryside.</div>
id="show_p"
document.getElementByld('hide_p').style.display='block';
document.getElementByid('photos') .style.display='inline';
">» Show
Photos
from the
Top of Steptoe Butte</div>

cdiv class="fakelink"
id="hide_p"
document.getElementByid('show_p') .style.display='block';
document.getElementByid('photos') .style.display='none';
">»
Hide
Photos from the Top of Steptoe Buttec/div>
cdiv id="photos"><img
src="steptoe_sml.jpg" alt="View from
'- Steptoe Butte"

style="margin-right:
12px;
border:
lpx solid
#000"
/>cimg
src="steptoe_sm2.jpg" alt="View from Steptoe Butte"

12px;
src="steptoe_sm3.jpg"
border:
lpx solid
#000"
/>cimg
alt="View from Steptoe Butte"
12px;
border:
lpx solid
#000"
/></div>
cp><em>Text from
ca href="http://en.wikipedia.org/wiki/Steptoe_Butte">Wikipediac/a>,
photos by the author.c/em></p>
e/body>
c/html>
Strptoe Butt!: Monlla fireto.

. c
http://-.yourdomim.com/ondiclc.html
-+ .
Steptoe Butte
Steptoe Butte is a quartzite isiand jutting out ofthe sil!y loess of the
Paloase bi11s io Whitman County, Washington. The rock that fonns tbc:
hutte is 0'\'cr 400 millioo years old. in contrast witb 15-7 miDion year
old Columbi> Rn--.b..W tha! undertie therest oftbe Palouse (such
islands ofaocienr. rock have come to be caDed buttes. a bone being
dcfioed as a smaD ht1 "itb a fiat top, "-hose widtb at. top does oot exceed
its beigbr).
A hotel built by Cashup D"'

is stood atop
Sr.ptoe hutte &om 1888 to

1908. lumog down se.=-1 years after it closed. ln 19-16, v.gil
MeGroskey dooared 120 acres (0.491an2) ofland to foon Steptoe Butte State Park. which was later iocreased to
oo.er 150 acres (0.61 km2). Steptoc Butte is currcndy recogoized as a National Natural Landmark becaust ofits
geoiogic.al ,;due_ h is oamed. in booor ofColoae-1 Ich\ ard Steptoe.
.,. Slto,_ [ atioa
.,. Show PIMos from the Top of Steptoe Butre
Tatfrom rJIdio, photo by the aurhor.
Don
18.4. bra
A 18.2. plda oldalnak kezdeti megjelense. Vegyk szre, hogy az egrmutat kzz vltozik
a piros szvegfelett, jllehet az nem <a> elembeli hivatkozs
18. ra
Szvegm6dosfts egnm1veletekkel
l 307
Elszr vizsgljuk meg a stluslap hat bejegyzst. Az els egyszeren azoknak

a hivatkozsoknak a stlust hatrozza meg, amelyek egy <a>< l a> cmkepran bell
helyezkednek el- ezek a hivatkozsok flkvr, alhzott, kk szn feliratok lesznek.
Ilyen hivatkozsokat tallhatunk a 18.4. bra kt bekezdsben (valamint az oldal aljn
lthat sorban).
A kvetkez ngy bejegyzs meghatrozott azonosrkra vonatkozik, amelyek eszerint
az oldal betltsekor lthatatlanok (display: none) . A kvetkez kt azonostnl
a display: block bellts szerepel-igazbl ezt meg sem kellett volna adnunk,
ugyanis ez az alaprtelmezs. A stluslapon azrt tntettk fel mgis, hogy jl rzkelhe
t legyen a klnbsg. Ha sszeszmoljuk a 18.1. plda <di v> elemeit, hatot tallunk:
az oldal betltsekor ngy lthatatlan, kett lthat.
Pldnkban azt szeretnnk elrni, hogy a kt azonost display rtke megvltozzon,
ha egy msik azonosthoz tartoz elemre kattintunk. Elszr azonban arra van
szksgnk, hogy a felhasznl egyltaln szrevegye, hogy az adott szvegrszletre
kattintl1at- ezt rendszerint az egrmutat vltozsa jelzi. Figyeljk meg a 18.4. brn,
hogy az egrmutat kis kzz alakul t a szban forg hivatkozs felett.
Ezt a hatst gy rhetjk el, ha meghatrozunk egy osztlyt az adott szvegrszlet
szmra- osztlyunk a fakelink nevet kapja, a hozz tartoz kd pedig itt ltl1at:
id="show_e"
document.getElementByid('hide_e') .style.display='block';
document.getElementByid( 'elevation') .style.display='inline';
">»
Show Elevation</div>
A fakelink osztly biztostja, hogy a szveg alhzs nlkl, flkvren s vrs

sznnel jelenjen meg, a cursor: pointer bellts pedig gy vltoztatja meg az egr
mutatt, hogy a felhasznl gy rezze, egy <a>< l a> cmkepran belli hivatkozst
lt. Az igazn izgalmas dolgok azonban akkor kezddnek, amikor sszekapcsoljuk
az onclick jellemzt egy <div> elemmel. A fenti kdban az onclick jellemz rtke
egy parancssorozat, amely mdostja a CSS-elemek aktulis rtkeit.
Nzzk meg, milyen parancsokrl is van sz:
this.style.display='none';
document.getElementByid('hide_e') .style.display='block';
document.getElementByid('elevation') .style.display='inline';
A fentiekben klnfle JavaScript-tagfggvnyeket ltunk, amelyek egyes elemek

megvltoztatsra szolglnak. Bvebben majd a 21. rn ismerkedhetnk meg velk,
jllehet a JavaScript a maga teljessgben tlmutat knyvnk keretein. Mindazonltal
a gondolatmenet kvetse nem okozhat nehzsget

Az els sorban tallhat this kulcssz magra az elemre utal, ms szval a show_e
azonostval jellt <div> elemre. A style kulcssz a stlusobjektumot adja meg, amely
tartalmazza az sszes, az elemhez rendelt CSS-stlust. Esetnkben a display stlus
a legrdekesebb, nem vletlen ht, hogy a this. style. display jelentse "a show_e
azonost display stlusa". A kdban pedig arrl gondoskodunk, hogy ha a felhasznl
a szvegre kattint, a display rtkt none-ra lltsuk.
Ez azonban mg nem minden, hiszen az onclick jellemzn bell hrom mveletet
tallunk. A msik kett a document. getElementByiD ( ) fggvnyhvssal indul, ahol
a zrjelben meghatrozott azonostkat tntetnk fel. Azrt knyszerlnk ennek
a fggvnynek a hasznlatra, mert a msodik s harmadik mveletben nem a szl
elem display tulajdonsgnak az rtkt lltjuk be. A kdbl kitnik, hogy itt
a hide_e s az elevation azonosrkrl van sz. Mindezek utn sszefoglalhatjuk,
mi trtnik, ha a felhasznl a jelenleg lthat, show_e nev <div> elemre kattint:
A show_e <div> lthatatlann vlik.
A hide_e <div> lthatv vlik, s black stlussal jelenik meg.
Az elevation <di v> lthatv vlik, s inline stlussal jelenik meg.
A mveletek eredmnyt a
18.5. brn figyelhetjk meg.
Steptoe Butte
-----
Steptoe Butte is a quartzite islandjutting out ofthe loess of the

Paloase billsin Whitman County, Washington. The rock that forms the
butte is over 400 mi!ioo yeom old. in contrast with the 157 million year
old Cohunb;. Rne. basails that und<rlie the rest of the Palouse {such
islands ofancieot rock hm't come to be caBed buttes, a hutte bOng
ddined as a smaD. bill \\itb a fiat top, wbose width at top oot aceed
.. height).
A botd Iruolt by D"is stood atop
Steptoe butte from 1888 to

1908, burniog down several years after it closed. ln 1946, vgjl
McCroskey donated 120 acres (0.49 km2) of land to form Steptoe Butte State Park. "'iDcb was later Meased to
0\<er 150 acres (0.61 kml). Steptoe Butte is currendy rec.ognized as a National Naturallandmark bccause ofits
unique geok>gicaJ value. It isoamedin booor of Colooel Edw.ard Steptoe.
Hide Elentioa
3,612 feet {1,101 m), opproximatdy 1,000 feet (300m) ahov the rurroun<ting countrys;de.
,. Skow Photos from tlae Top of Steptoe Butte
Tarfrom 1J'i.kjn>dia, photo by the author.
Dono
18.5. bra
A Show Elevation elemre kattintva az aktulis s egyb <div> elemek stlusa az onclick
jellemzben megadott parancsok szerint vltozik
18. ra
Szvegmdosfts egnnveletekke1
f 309
18.2. pldban lthatunk egy msik, <div> elemekbl ll csoportot is, amely
a tovbbi kpek lthatsgt szablyozza. Ezekre az elbbiekben bemutatott onclick

mveletek nincsenek hatssal. Vagyis, akr a Show Elevation, akr a Hide Elevation
lehetsgre kattintunk, a fotkhoz kapcsold <div> elemek nem vltoznak.
Lehetsgnk van teht arra, hogy megjelentsk a magassgot (e!evation), a fotkat
azonban nem (lsd a 18.5. brt); a fotkat igen, de a magassgot nem; vagy pedig
mind a fotkat, mind a magassgot (lsd a 18.6. brt).
http://www.yourdomain.com/ondick.html
Steptoe Butte
Steptoe Butt is a e isiond jutting out ofthe sity loess ofthe
Palooso balls iD Whitman Couoty, Wosbingtoo. The rock tbill fonns the
botte is over 400 mill:ioa years old, in contrast 'vith !he 15-7 million year
old Colwnbia Rinr basalt3 tbill mdcdie the rost of the Palouse (such
isla:nds ofancieot rock :tal-e coo:te to be caled buttes. a butte being
ddioed as a smal hiD w a fiat top, "'rose width at top does oot
exceed ils h<igbl).
A bold built by Caslmp 00\is stood atop Steptoe butte from 1888 to
1908, b..ning down..,...". yean oll.. it elosed ln 1946, v..p
McCroskey donated 120 ..:res (0.49 km2) of land to foon Steptoe Butte Slat Padc, wbich was laler iDeroased to
"'"" l SO aa.s (0.61 km2). Steptoe Butte is curroody rocognizd as a Natiooal Nann! Landmarl< because of ils
uoique geo&ogicaJ value. It is namedin boncx af Coloa.el Echrard Steptoe
Hide Elen11tioa
3,612 feet (1,1 O l m). approximatdY 1.000 feet (300m) ahov. the surroundiDg coootrysido.
Batte
Tatfrom rr.xiJ><tliD. photo by the author.

Done
18.6. bra
Az
oldal, miutn a Show Elevation s a Show Photos from the Top of Steptoe Butte lehets
gekre kattintottunk
Ezzel a rvidke pldval csak rzkelterni akartuk, micsoda lehetsgek trulnak fel
elttnk, ha megtanuljuk sszekapcsolni a CSS-stlusok mdostst az esemnyekkeL
Ennek a fegyvertrnak a birtokban olyan weboldalakat kszthetnk, amelyek
stluslapjainak elemeit a felhasznJk mdosthatjk, st akr egsz ms stluslapot is
hasznlatba vehetnek, szvegrszleteket helyezhetnek t, kvzjtkokban vehetnek
rszt, rlapokat tlthetnek ki, s mg sorolhatnnk a tengernyi lehetsget.
sszefoglals
Ezen az rn megtanultuk, hogyan befolysolhatjk az egrmveletek a szvegrszletek
megjelentst. Az els kt rszben ezek a mveletek az <a> elem hover losztlynak
stlusaihoz kapcsoldtak, ksbb pedig megismerkedtnk a klnbz felhasznli
tevkenysgeket ler esemnyekkel is. Pldnkban az onclick esemnyt hasznltuk,
de felsoroltuk a tovbbi lehetsges esemnyeket is, amilyen pldul az onload vagy
az onrnouseover.
A kdban egyetlen igazi jdonsgot ismerhettnk meg, nevezetesen a cursor tulaj
donsgot. A pointer rtket hozzrendelve jelezni tudtuk a felhasznlknak, hogy
az adott szvegrszlet valjban hivatkozsknt viselkedik, jllehet nem a megszakott
<a>< 1 a> cmkk kztt tntettk fel a kdban.
Krdezz-felelek
K:
Az rn bemutatott egyes esemnyek ksrtetiesen hasonltanak az <a> elem

losztlyaira. Miben ll mgis a klnhsg?
V:
Val igaz, hogy az onrnousedown esemny igencsak ernlkeztet az aktv llapotra,

az onrnouseup s az onrnouseover pedig a Jelette lebegs" (haver) llapotra.
Tem ismeretes olyan szably, amely megmondan, hogy rnikor melyiket hasznl
juk, az azonban sszernek tnik, hogy ha egybknt semmi okunk az <a> elem
alkalmazsra, akkor ne fradjunk az losztlyokkal, s inkbb forduljunk
az esemnyekhez.
K:
A szvegek mellett ms elemeken, pldul kpeken is elfoghatjuk az egr-, illetve
V:
Igen, a szvegekhez hasonlan a kpeken is szlelhetjk a kattintst, illetve
billentyesemnyeket?
az egrmutat helyzett Fontos tudnunk azonban, hogy ms multimdia-objek

tumok, pldul a YouTube-videk vagy a Flash-fjlok, nem kpesek ilyen
viselkedsre, illetve ms prograrnak segtsgve!, eltr mdon rtelmezik
a billentyzetrl s az egrtl szrmaz bemenetet gy ha pldul egy weboldal
szerkezetbe gyazott YouTube-videra kattintunk, a YouTube-lejtszval
lpnk kapcsolatba, nem pedig az azt befogad oldallal- a mveletet teht
nem foghatjuk el az itt megismert mdon.
Ismtls
18. ra
Szvegmdosfts egnnveletekkei
J 3t1
Ismtl krdsek
1.
2.
Mi trtnik, ha a top tulajdonsgnak negatv rtket adunk?

Melyik esemnyt hasznlhatjuk, ha akkor szeretnnk valamit mdostani, amikor
a felhasznl az egrmutatt az adott elem hatrain kvlre hzza?
3.
Vajon mire kvetkeztethetnk abbl, ha egy stluslapon a cursor: crosshair

kdot talljuk?
Vlaszok
1.
A top negatv rtknek hatsra a tartalom a szlelem bal fels sarka fl
2.
Az orunouseout esemnyt.
3.
A kd egy nagy pluszjell (vagy szlkeresztt) alaktja az egrmutatt. Arra
kerl (nem pedig al).
azonban nehz vlaszt adni, hogy mi rtelme ennek a kdnak, ugyanis ezt
az alakot meglehetsen ritkn hasznljk. A felhasznl teht tprengeni kezd,
hogy vajon milyen clt szolgl ez a vltozs, s tapasztalatok hjn j esllyel
ktelyek maradnak benne.
Gyakorlatok
Ksztsnk egy oldalt lebeg lersokkal, amelyek a megjelentsi sablonunknak

megfelel szneket s egyb stlusokat hasznlnak.
Adjunk tovbbi parancsokat a 18.2. plda onclick jellemzihez gy, hogy

egyszerre csak egy <div> elem (vagy a magassg, vagy a fotk) legyen lthat.
19. RA
Rgztett s folykony
elrendezsek ltrehozsa
A lecke tartalma:
A rgztett elrendezsek mkdse
A folykony elrendezsek mkdse
Rgztett-folykony kevert elrendezs ltrehozsa
Knyvnk nagyobb rszben a webes tartalom stlusnak meghatrozsval foglalkoz

tunk, gy belltottuk a betrnretet s -sznt, a kpek megjelentst, tmbelemeket s
listkat hasznltunk, s mg megannyi ms eszkzt. Most azonban kiss tvolabbrl
tekintnk a weboldalaink szerkezetre. ltalnossgban vve ktfle- rgztett (fixed)
s folykony Cliquid) - elrendezs ismeretes, jllehet ltezik a kett egyvelege is,
amelyben egyes elemek rgztettek, msok viszont folykonyak.
Ezen az rn elszr az emltett ktfle elrendezs jellemzivel foglalkozunk, s meg
tekintnk nhny pldt a hasznlatukra, az ra vgn pedig bemutatunk egy egyszer
sablont, amely egyesti a kt elrendezs lehetsgeit. A dnts vgeredmnyben a mi
keznkben van - ha kvetjk a HTML- s CSS-szabvnyokat, nagyot nem tvedhetnk
nll feladat
Keressnk tetszets elrendezseket!
A folykony elrendezsek valsgos kincsesbnyjra bukkanhatunk a Wordpress
Theme Gallery-ben (http: l/wordpress. org l ex tend/ themes /). A WordPress eredeti
leg webnaplmotornak kszlt, de egyre nagyobb npszersgre tesz szert, mint ltal
nos webhelykezel eszkz. A galriban tbb szz rgztett s folykony elrendezst
tallhatunk, amelyek legalbbis j irnymutatst adhatnak a munknkhoz. Ha knyvnk
feladatai krben nem is kellett WordPress-webnaplval dolgoznunk, a sablongalria
nagyszer hely arra, hogy felfedez tra induljunk az oldal-elrendezsek vilgban.
Tltsnk nmi idt a WordPress-sablonok krben, illetve keressk fel a CSS Zen
Gardent (http: l /www. csszengarden. com/). gy anlkl ismerkedhetnk meg
az zlsnknek megfelel elrendezsekkel, hogy a tartalom eltrten a figyelmnket
Rgztett alrendezsek
A rgztett, illetve rgztett szlessg elrendezsek egyetlen alapvet kzs tulajdon
sga, hogy az oldal trzsnek szlessge rgztett rtk. Ezt a szlessget tbbnyire egy
f, "burkol" <div> szablyozza, amelyben benne foglaltatik az oldal teljes tartalma.
A <div> width (szlessg) tulajdonsgt a s tyle jellemzben, illetve egy stluslap
bejegyzsben szablyozhatjuk, a megfelel azonostra hivatkozva - alkalmazhatjuk

a main (f) vagy a wrapper (burkol) nevet, de ms elnevezs mellett is dnthetnk.
Ne teledkeunk meg arrl, hogy a bngszablak fellete tartalmaz a weboldalon

kvli terleteket is, ilyen pldul a grdtsv. gy ha 10 24 kppont szles kpernyre
sznjuk az oldalunkat, vegyk szmtsba, hogy nem hasznlhatjuk ki a kppontok
mindegyikt.
Rgztett szlessg elrendezs ksztsnl a legfontosabb dntst annak meghatrozsa
jelenti, hogy milyen kpernyfelbontssal szmolunk. Sokig a 800
600-as felbonts
volt a webtervezk kzs nevezje, gy nagyjbl 760 kppontban rgztettk az oldalak

szlessgt. Mivel azonban 2007-ben mr mindssze a felhasznJk kevesebb mint
8 szzalka hasznlt 800
jr), a tervezk 1024
600-as felbontst (jelenleg pedig ez az rtk 4 szzalk alatt
768-ra emeltk az ltalnosan elfogadott felbontsrtket, gy
manapsg, ha egy oldal szlessgt rgzteni kvnjk, jobbra valamilyen 800 s

1000 kppont kztti rtket vlasztanak.
19. ra
Rgzftett s folykony alrendezsek ltrehozsa 315
A rgztett szlessg oldalak hasznlatnak legfontosabb oka, hogy gy pontosan

szablyozhatjuk a tartalom megjelenst. Ha azonban a felhasznJk a tervezettnl jval
kisebb vagy nagyobb kpernyfelbontssal tekintik meg az oldalunkat, grdtsvok
jelenhetnek meg (amennyiben a felbonts kisebb), vagy tl sok res terlet
(ha a felbonts nagyobb).
Az ESPN.com nyitlapja nagyszeren mutatja a jelensget - az oldal a tartalmt
964 kppont szlessg terletre korltozza. A 19.1. brn a bngszablakunk

800 kppont szles, gy a jobb oldalon fontos rszek kerlnek ki a ltmeznkbl
(ezek elrsre az alul megjelen vzszintes grdtsv szolgl).
A 19.2. bra ugyanakkor azt a helyzetet mutatja, arnikor a bngszablak 1300 kppont
szlessg - ilyenkor az oldal trzse mellett mindkt oldalon kiterjedt res terleteket
tallunk.
Tebow btken to hospital

No. 11 Va. Ted-l swamp
Sebatha first to 19 wine
Na. 7 lSU sNffs Mts5. S
Tiger tnlls Pl!:rry by 2 s
Mesoh key as Oregen n
lch1ro, argu109 stnke a
lester's knee res:ponds;
19.1. bra
Rgztett szlessg{[ weboldal kisebb kpernyje/bontsnl
316
B:ltAOLU
.,.....O..UW..St;o,...S.rd1
.,._,........,.,.
,.;._.c.
n
19.2.
ESPH rANTASY GAMES
f!lElOO...!!J:ll
r:"" ?
..,r
Nft_G'"'"""'",...Idor
s.nu.te.-11
bra
Rgztett szlessg weboldal nagyobb kpernyje/bontsnl
Folykony alrendezsek
A folykony elrendezsek jellemzje, hogy az oldal trzsnek nincs kppontban
meghatrozhat, rgztett szlessge, jllehet elfordulhat, hogy egy burkol <d i v>
foglalja magba, amelynek a szlessge szzalkban meghatrozott. Ha folykony
elrendezst hasznlunk, megrizhetjk az oldal tetszets sszkpt, vlasszon
ltogatnk akr kicsi, akr nagy kpernyfelbontst
Az eredmnyt jl mutatja a 19.3., a 19.4. s a 19.5. bra.
A 19.3. brn a bngszablak szlessge nagyjbl 770 kppont. Ez sszer minimlis
szlessgrtk ahhoz, hogy a grdtsv mg ne jelenjen meg- erre nem is kerl sor
egszen a 735 kppontos szlessgig. A hrt persze tlfeszthetjk, amint azt
a 19.4. brn, 545 kppontos szlessg mellett lthatjuk is.
A 19.4. brn mr megjelenik a vzszintes grdtsv, a fejlcben pedig azt lthatjuk,
hogy az emblma brja rcsszik a szvegre. Mindazonltal az oldal nagyobb rsze
mg mindig jl hasznlhat. A bal oldalon tallhat lnyegi tartalom tkletesen olvas
hat, s sikeresen osztozik a rendelkezsre ll terleten a jobb oldali beviteli rlappaL
19. ra
Rgzitett s folykony alrendezsek ltrehozsa
19.3. bra
Folykony elrendezs viszonylag kis jelbonts kpernyn
19.4. bra
Folykony elrendezs kis kpernyn
1 317

A
19.5. brn lthatjuk, hogyan fest az oldal egy igen szles kpernyn.
19.5. bra
Folykony elrendezs szles kperny6n
19.5. brn a bngszablak nagyjbl 1330 kppont szles, ami jelents teret ad
az oldalnak a terjeszkedsre. A folykony elrendezst az teszi lehetv, hogy a szerke

zeti elemek szlessge szzalkban van megadva (nem pedig kppontban), gy az oldal
kpes kitlteni a rendelkezsre ll terletet.
A folykony elrendezs els ltsra a lehet legjobb megoldsnak tnhet, hiszen ki ne
szeretn kihasznlni a kperny sszes rendelkezsre ll terletr? Nos, a helyzet

nem ilyen egyszer- igen finom hatrvonal vlasztja el a lehetsges terlet kihasznlst
a tartalom "megfojtstl". A tl sr tartalom nyomaszt, a tlzottan ritks elrendezs
viszont unalmass teszi az oldalt.
A tisztn folykony elrendezs vonz megolds, de rengeteg vizsglatot ignyel, hogy
biztostsuk a megfelel megjelenst szinte brmilyen bngsz s kpernyfelbonts

hasznlata mellett. Megeshet, hogy sem idnk, sem kedvnk nincs ekkora ldozatot
hozni. Ilyenkor segt a rgztett-folykony kevert (hibrid) elrendezs.
19. ra
Rgztett s folykony alrendezsek ltrehozsa 319
Rgztett-folykony kevert alrendezsek

Az ilyen elrendezsek ITiindkt tpusbl szrmaz elemeket tartalmaznak. gy pldul
alkalmazhatunk folykony elrendezst, amely ugyanakkor tartalmaz rgztett szless
g rszeket a trzsn bell, illetve lehorgonyzott elemknt (ilyen lehet a bal oldali
hasb vagy a fels navigcis sv). Arra is mdunk van, hogy egy rgztett szlessg
terletet keretknt hasznljunk, amely akkor is a helyn marad, ha a felhasznl
grgeti a tartalmat (lsd a 13. ra anyagt).
Kiindulpontunk, egy egyszer elrendezs

Ebben a pldban egy olyan sablon ksztst tanuljuk meg, amely alapjban vve
folykony, ugyanakkor egy-egy rgztett szlessg hasbot tartalmaz a trzs kt
oldaln (ez utbbi szintn egy hasbnak tekinthet, amely szlesebb a trsainl).
A sablon, amelynek a HTML-kdjt a 19.1. plda mutatja, nll fejlccel s lblccel is
rendelkezik.
19.1. plda
<?xrnl
Egyszer rgztett-folykony kevert elrendezs
version="1.0"
<!DOCTYPE
html
encoding="UTF-8"?>
PUBLIC
"-//W3C//DTD XHTML
1.1//EN"
"http: l /www. w3.org/TR/xhtmlll/DTD/xhtml11.dtd">

<html
xrnlns="http://www.w3.org/1999/xhtml"
xrnl:lang="en">
<head>
<title>Sample
<link
Layout</title>
href="layout.css"
rel="stylesheet" type="text/css" />
</head>
<body>
<div
id="header">HEADER</div>
<div
id="wrapper">
<div id="content_area">CONTENT</div>
<div
id="left_side">LEFT
<div
id="right_side">RIGHT
SIDE</div>
SIDE</div>
</div>
<div
id="footer">FOOTER</div>
</body>
</html>
Elszr is vegyk szre, hogy az elrendezshez tartoz stluslapot a
<link>
elemmel
csatoljuk a dokumentumhoz, ahelyett, hogy kzvetlenl a kdban tntetnnk fel. Mivel

a sablont tbb oldalhoz is hasznljuk, az elemei megjelentst a lehet legfegyelme
zettebb mdon szeretnnk szablyozni. Ezzel elrjk, hogy ha az elemek stlusainak
mdostsra lenne szksg, azt egy helyen- a stluslapon- tehessk meg.
320
A kvetkez, ami feltnhet, hogy a HTML-alapkd valban csak az alapvet elemekre

szortkozik. Radsul az igazat megvallva ebbl a kdbl kiindulva egyarnt ltre
hozhatunk rgztett, folykony vagy rgztett-folykony kevert elrendezst, mivel
a megjelenst a stluslap tartalma hatrozza meg.
A 19.1. pldban mindssze kijelljk a webhely tartalmnak egyes terleteit.
Ez a tervezs fontos alapfelttele brmifle webes fejlesztsnek, hiszen mg azeltt
tudnunk kell, hogy mit szeremnk feltntemi az oldalon, mieltt az elrendezs tpust
s klnskppen a stlusok rszleteit meghatroznnk. Jelen pillanatban a layout. ess
tartalma mindssze ennyi:
body {
margin:O;
padding:O;
Ha most a 19.1. pldra pillantunk, gy kilthatunk fel: "de ht ezek a <div> elemek
stlusok hjn egyms hegyn-htn torldnak!" A megllapts helyes: amint
a 19.6. brn is lthatjuk, elrendezsrl mg nem igazn beszlhetnk.
"'-
lll """"" l.oyout ...."". ,...,.

ftle fdlt. tew Hi}tory joobnarb Iools tldp
hp,//www:youdomo;n.<omllyout.html
HEADER
CONTENT
LEFT SIDE
RJGHTSIDE
FOOTER
19.6. bra
Egyszer HTML-sablon,
Don.
.a;
amelyben a <div> elemekre

mg nem hatnak stlusok
Kt hasb meghatrozsa egy rgztett-folykony elrendezsben

Kezdjk az egyszerbb feladatokkal! Mivel folykony elrendezst szeremnk kialaktani,
tudjuk, hogy akrmit is tesznk a fej- s lblcbe, az kitlti a bngszablak teljes
szlessgt, brmekkora is legyen.
Az albbi kdot a stluslapon elhelyezve 100 szzalkos szlessgre lltjuk a fej- s
lblcet, tovbb azonos httrsznt hatrozunk meg a szmukra:
19. ra
#header
Rgzftett s folykony alrendezsek ltrehozsa
f321
float:
left;
width:
100%;
background-color:
#footer
#7152F4;
float:
left;
width:
100%;
background-color:
#7152F4;
A dolog most kezd izgalmass vlni. Meg kell hatroznunk kt rgztett szlessg
hasbot az oldal szlein, valamint egy folykony hasbot kzpen. Vegyk szre, hogy
a kdban tallhat egy
wrapper
nvre hallgat
<div>
elem, amely mindhrom hasbot
magban foglalja. A meghatrozsa gy fest:

#wrapper
float:
{
left;
padding-left:
200px;
padding-right:
125px;
A kt kitltsrtk lnyegben a jobb s bal oldali rgztett szlessg hasboknak ad

helyet. Az elbbi 200, rng az utbbi 125 kppont szles lesz, emellett klnbz
httrsznt is kapnak. A hasbak elhelyezst eredeti, stlusok nlkli vltozataikhoz
(lsd a 19.6. brt) kpest hatrozzuk meg, erre szolgl a stluslap bejegyzseiben
elhelyezett
position: relative
kd. V gl azt is jelezzk, hogy a
<div>
elemek
balra sszanak.
A
nev
left_side
<div>
esetben azt is rgztennk kell, hogy a jobb szls margt
az elem szltl 200 kppontra szeretnnk helyezni (ez hozzaddik a hasb 200 kp
pontos szlessghez). A bal oldalon ugyanakkor teljes kiterjeds negatv margt
hozunk ltre, amely ppen a helyre hzza az elemet (amint azt hamarosan ltni is
fogjuk). A
right_side <d v>
esetben a
right
rtkt nem hatrozzuk meg, de
a jobb oldalon sZksgnk van egy negatv margra:

#left_side
position:
{
relative;
float:
left;
width:
200px;
background-color:
right:
#52f471;
200px;
margin-left:
#right_side
position:
-100%;
{
relative;
float:
left;
width:
125px;
background-color:
margin-right:
#f452d5;
-125px;
322
Hatrozzuk most meg a kzponti terletet is, mgpedig fehr httrrel, valamint gy,
hogy kitltse a rendelkezsre ll terletet, s balra sszon a jelenlegi helyzethez
kpest:
#content_area
position:
float:
relative;
left;
background-color:
width:
#ffffff;
100%;
Az elrendezs most a 19.7. bra szerint alakul. Lthatjuk, hogy a terletek szpen
elvlnak egymstl.
19.7. bra
Az egyszert H1ML-sablon nhny
stlus meghatrozsa utn
Akad azonban nmi gond a sablonnal, ha meghatrozott rtk al cskkentjk

a bngszablak szlessgt. Mivel a bal oldali hasb 200, a jobb oldali pedig 125 kp
pont szlessg, s valamicske szveget azrt elszeretnnk helyezni a kzponti terle
ten, az oldal szttredezik, ha a bngszablak szlessge 350-400 kppontig cskken.
A 19.8. brn lthatjuk, mi trtnik, ha az ablak szlessgt kicsivel 400 kppont al
cskkentjk (a pontos rtk 390 kppont).
19.8. bra
Az egyszer H1ML-sablon 400 kppontnl
keskenyebb bngszablakban - katasztrfa!
19. ra
Rgztett s folykony alrendezsek ltrehozsa f323
Minimlis oldalszlessg belltsa

A val letben igencsak valszntlen, hogy a ltogatink
400 kppontnl keskenyebb
bngszablakban nyissk meg az oldalunkat, de knyvnk keretein bell elkpzel

hetjk ezt a helyzetet. A plda tanulsgai kiterjeszthetk s szlesebb krben rtelmez
hetk- knnyen belthat, hogy mg rgztett-folykony kevert elrendezsek esetn
is eljuthatunk egy pontra, ahol az oldal sztesik, hacsak nem tesznk ellene valamit.
Ez a "valami" nem ms, mint a min-width tulajdonsg belltsa, amellyel meghatroz
hatjuk egy elem legkisebb szlessgt (ebbe nem szmtjuk bele a bels s kls
margkat vagy a szeglyeket). A 19.9. brn lthatjuk, milyen eredmnyt kapunk, ha
a min-width tulajdonsgot a <body> elemre alkalmazzuk.
.w.:t..i
Sompio ...,..,. """"' """""

fM: f.dit !l- Hipory iookmarb Iools Help
'
a'
FT SIDE
httpV/www.youdon1o
-+
CONfENT
..
Done
-
19.9. bra
Az egyszer HTML-sablon
--
400
kppont al cskkentett mrettel- ez mr tetszetsebb!
Balra grgetve az oldalt csak egy aprcska rsz ltszik a jobb oldali hasbbl, viszont
az elrendezs gy nem esik szt. Ez esetben a minimlis szlessg 525 kppont:
body
margin:
padding:
O;
O;
min-width:
525px;
}
A vzszintes grdtsv azrt jelenik meg a pldban, mert maga a bngszablak
keskenyebb 500 kppontnL Ha egy leheletnyivel 525 kppont fl nagytjuk,

a grdtsv eltnik, ha pedig a bngszablak szlessge nagyjbl 875 kppont
(lsd a 19.10. brt), egyltaln nem kell szmtanunk a megjelensre.
324
httP'J/www.yourdomatn.co!TI/t.yout.htmJ
CONTENT
Done
19.10.
bra
Egyszer HTML-sablon egy 800 kppontnl szlesebb bngszablakban
A hasbak magassgnak kezelse rgztett-folykony kevert

elrendezsben
A pldnk jnak tnik- az egyetlen gond vele, hogy mg nem tltttk fel tartalommal.
A klnbz elemekhez adott tartalom pedig jabb krdseket vet fel. A 19.11. brn
lthatjuk, hogy a hasbak magassga a bennk trolt tartalomnak megfelelen alakul.

Mivel semmi sem biztostja a felhasznlk bngszablaknak azonos magassgt,
illetve azt, hogy a tartalom rnindig ugyanolyan mret legyen, azt gondolhatnnk,
hogy itt gondok addnak a rgztett-folykony kevert elrendezsekkeL Szerencsre
nem ilyen rossz a helyzet.
rni gondolkods utn, pr stlus segtsgvel sszerak
hatjuk a kiraksjtk darabjait.

Elszr is helyezzk el az albbi kdsorokat a left_side, a right_side s
a content_area stluslap-bejegyzsekben:
margin-bottom:
padding-bottom:
-2000px;
2000px;
Ezzel nevetsgesen nagy mret bels s kls margt helyeznk el mindhrom elem
aljn. Szksg van tovbb a lblc stluslap-bejegyzsben a position: relative
sorra, amely biztostja, hogy az elem a kitlts ellenre lthat maradjon.
19. ra
Rgztett s folykony alrendezsek ltrehozsa
f 325
Ebben a pillanatban az oldal a 19.12. brn lthat alakot lti- ez mg nem egszen
az, anlire vgytunk, de mr alakul az sszkp.
Yiso.
Welcome to ACME Widgets!
BistOf')'
l::enriveTu..
Lcr-cm si: amet, coasectdm' .dpisc:iqg dit.. Nan tiaciduot posue:re makmada.
SuspendisK at. fcis ac ..ac tD:i&D uleax:orp"r. Nt:&a ,.w 5pta ,w Illi rboaaa
adipisc:iac. Etilm CCirJ&'DE fels id ..e lll ia:!pociet: muu. tempor. N belaert
fc:n:naltum liiiD.. sa ametpdeolesqDe JlUUJ fmcbrs a Sed moeme lacus IIIIIID.. ..nccs
accwasan sem. Pbuelus fdsis male1uada sms. DK omare ipsu:n dicbD cOilSedcha.
Nula liber-o nisl, CiXlSectm.- q ac:cums.s vd. iutcrcb:n ut Osus. Doocc ,.._ eaim. ,g
..._kapa: w sil amct odo. NUDC DOG cDm id sem faJcbJs coape. Inaeger..:: mi
ia j:lslo cuimaDd soclales.. Amem impcnict 'Eder Sed ulamc::cxpcr ccape
ipsum. qU 'c scm in. Donec onwe ,-csaiJubm coague Etiam s.pim
da. fUinm Diadis mDs w. peltalesque qd .up:. Ptoi:l llid!ZIIUis, suscipit qW:s
elemam:D ac.\ cps tacm. Ut eJft juslo ,,. - ,..- socWo.
Co-bO UJ
;;
19.11. bra
A hasbak magassgt a tartalmuk hatrozza meg
hlt
_,.
J _!-w-html
AO<E
Vidg-t
LLC
Miuioll
History
E.xeariveTn
CntactUs

Lorcm dob sil amel, COliKdebir adipiscmg dit. Nillll tiacidln posuecc
Smpcndissc ac fm ac mte tn:idunttllzmcorpu. 1'\i.l.a,ne ip1a vUc rii rbootus
adipisciDg. Etiam consue fdis id ac 5CrJ:4lCf a i:npcnI mass. Icmpor l\ bmtkeril
Fcrmcmum ipa, sit amet pclertesque pwu5 fiu:iJus a._ SM rno&estie .
ultrices.:cwmanr..disGsem,aec;Oillal"cipSimlcba:a
consKlctw 'ub libcJo ms1, conscctdW" qd -=''el, iatcfcb:n Ul nsus Orcmec
'*mii:P'itllle.llllbkPdpis.silaut.sil.metocio Ntm:-enimidsemfiu::bzs
ltegtr.:: mi iD. justel euismod sodales Ame.-iq>elcid '-estidtm accor Sed
orper cipsun. egte,...._e sem scio.. Doaec'"Htblba
coopt Etiaan upien ...._ f\OUJI Q:WIIIis IUnis .._ qet .-pe Proia aid
nwuis, susqil: qgs demenrtm.:., \'eSti:dum. qw.iacus Ut qet ;wo 'itae mna ,,..g
""""'
....
19.12. bra
A sznes mezk immr hosszan elnylnak a rvid tartalom ellenre
A feleslegesen tlfut szneket lenyeshetjk, ha az albbi belltssal lnk a wrapper

<di v>
stluslap-bejegyzsben:
overflow: hidden;
19.13. bra a vgeredmnyt mutatja: rgztett-folykony kevert elrendezs megfelel
trkzkkel elltott hasbokkaL

l..ol-m dob sil.met, CODSeC.klW acipiscila dil. Nmliaciaaat pomere mMesuada.
se ac. fds at autt: liDcicbsl: r&wncorptt Nllla ,.._. igula ,ue; mi dJoDcus
&iam coque feis id adlle semper ar. impcrdiet musa lcmp N'lllam bcn<kcri
r iPa. 'liil amet pa'U$ lll.diU5 in. Sed acus mmm ....r:es
Will. Pbasdus faci:si5 maJesuada sem. DeC cklum CODSeC.'letD'
Nula 1lisl,. comeeletur qd accumsm; ''d. IIIlertbia W rism Doacc ,w cZiim ,._
aula feup. Ul sil-s, OO !\'lD: DOG c:aim ;d Km faucba COIIp IDI:qc" K mi
a JISI:o emsmod sodarks Ameaa imperckt 'auctor Sed orper congue
eget: ''Uiptole sem Kdmsquc: in. Doooc am.e ' coque_ EDam laplCD
da. nmm mattis m.ais w, pelenlnque qet BIJI'IC Proia aisllnlnril, quis
Cut11ctUs
ac,,QUIS l:tqetjusto\Ueumro,..msodales
19.13. bra
A ksz rgztett-folykony keve11 elrendezs
A weboldal teljes HTML-kdjt a
19.2., a vgleges stluslapot pedig a 19.3. pldban
lthatjuk.
19.2. plda
F.gJ;szen1 rgzten-folykony ketJert elrendezs (tartalommal)
<?xml version="l.O"
<!DOCTYPE
html
encoding="UTF-8"?>
PUBLIC
"-//W3C//DTD
XHTML
1.1//EN"
xml:lang="en">
<bead>
<title>Sample Layout</title>
<link
href="layout.css"
rel="stylesheet"
type="text/css"
/>
</bead>
<body>
<div
id="header"><img
LLC"/></div>
<div
id="wrapper">
src="acmewidgets.jpg"
alt="ACME
Widgets
19. ra
<div
Rgzftett s folykony alrendezsek ltrehozsa 327
id="content_area">
<hl>Welcome
<p>Lorem
Nam
to
ipsum
tincidunt
tincidunt
tempor.
ultrices
sit
posuere
Etiam
pellentesque
ornare
Widgets!</hl>
amet,
congue
felis
accumsan
taucibus
sem.
accumsan
nulla
non
euismod
vitae
enim
sodales.
ullamcorper
Donec
justa
ut,
quis
vitae
faucibus
ipsum,
Nulla
urna
varius
ac,
ut
risus.
ut
sit
vestibulum
sodales.
quis
nec
Donec
amet
ac
mi
auctor.
odio.
in
justa
Sed
scelerisque
sapien
eget augue.
sem,
nisl,
Integer
vestibulum
amet
mauris,
malesuada
libera
dignissim
sit
lacus
eget vulputate sem
pellentesque
elementum
ligula,
facilisis
congue.
mi rhoncus
semper at imperdiet
interdum
Aenean imperdiet
ac felis ac ante
vitae
molestie
vestibulum congue. Etiam
mattis
suscipit
sem
congue
ornare
mattis
id
vel,
feugiat
ante
Sed
Phasellus
consectetur eget
ligula
termentum
dictum consectetur.
vitae
Nunc
id
in.
adipiscing elit.
Suspendisse
vitae
Nullarn hendrerit
purus
ipsum
enim
consectetur
malesuada.
ullamcorper. Nulla
adipiscing.
massa
ACME
dolor
nulla,
Proin nisl
lacus.
in.
rutrum
Ut
mauris,
eget
</p>
</div>
cdiv id="left_side">
<Ul>
<li><a
href="#">Mission</a></li>
cli><a
<li><a href="#">Executive
cli><a
href="#">Contact
Teamc/a></li>
Us</a></li>
</ul>
</div>
cdiv
id="right_side"><strong>SPECIAL WIDGET DEAL!c/strong><br/>
Buy
three
Act
now!
widgets
and
get
fourth for
free.<br/><br/>
</div>
</div>
<div
id="footer">
Copyright information
usually
goes
here.</div>
</body>
</html>
19.3. plda
body
rgztett:fo(ykony kevert elrendezs te(;es stz1uslapja
--------
margin:O;
padding:O;
min-width: 525px;
#header
float: left;
width:lOO%;
background-color:
#footer
float:
{
left;
width:lOO%;
#ffffff;
background-color:
font-size:
#7152f4;
8pt;
font-weight: bold;
text-align: center;
position: relative;
#wrapper
float: left;
padding-left: 200px;
padding-right: 125px;
overflow: hidden;
#left_side
position: relative;
float: left;
width: 200px;
background-color:
#52f471;
right: 200px;
margin-left: -100%;
padding-bottom:
2000px;
margin-bottom: -2000px;
#right_side
position: relative;
float: left;
width:
125px;
background-color:
margin-right:
padding-bottom:
margin-bottom:
#content_area
#f452d5;
-125px;
2000px;
-2000px;
position: relative;
float: left;
background-color:
#ffffff;
width: 100%;
padding-bottom:
margin-bottom:
#left_side ul
2000px;
-2000px;
list-style: none;
margin: 12px
padding:
Opx
Opx 12px;
Opx;
#left_side li
a:link,
#nav li a:visited
font-size: 12pt;
font-weight: bold;
padding: 3px
color:
Opx
3px
3px;
#000000;
text-decoration: none;
display: block;
#left side li a:hover,
#nav li a:active
19. ra
font-size:
Rgzitett s folykony alrendezsek ltrehozsa
1329
12pt;
font-weight:
bold;
padding:
Opx
color:
3px
3px
3px;
#ffffff;
text-decoration:
display:
none;
block;
sszefoglals
Ezen az rn nhny gyakorlati pldt lthattunk az elrendezsek hrom alapvet
tpusnak- rgztett, folykony s rgztett-folykony kevert - bemutatsra.
Az ra harmadik rszben lpsrl lpsre bemutattuk, miknt hozhatunk ltre
rgztett-folykony kevert elrendezst, amelyben mind a HTML-, mind a CSS-kd

rvnyes. Ne feledjk, hogy az elrendezs ltrehozsakor a legfontosabb feladat, hogy
szmba vegyk a tartalomnak azokat a rszeit, amelyeknek szerkezeti elemeket kell
megfeleltetnnk
Krdezz-felelek
K:
Nemcsak folykony, hanem rugalmas elrendezsrl is hallhatunk.

Mi a klnbsg a kett kztt?
V:
A rugalmas elrendezsek jellemzje, hogy a tartalmat trol terletek mrete
a szvegmret mdostsnak hatsra megvltozik bennk. A rugalmas elren

dezsben az "em" hasznlatos mrtkegysgknt, amely a meghatrozsbl
ereden arnyos a szveg-, illetve a betmrettel, hiszen megegyezik az adott
bettpus pontmretvel. Ha teht a trolelemek mrett em-ben adjuk meg,
a szveggel egytt tgulnak, illetve zsugorodnak, ha a felhasznl a CTRL billen
ty lenyomsval s az egrgrg mozgatsval nveli vagy cskkenti a szveg
mrett. A rugalmas elrendezsek kialaktsa fjdalmasan nehz feladat, gy leg
inkbb a webtervezk bemutatanyagaiban tallkozhatunk velk, a val letben
igen ritkn kerlnek elnk.
K:
Sokat hallhattunk a folykony s a kevert elrendezsrl- valban jobbak lenn
V:
Nos, a "jobb" meglehetsen szubjektv fogalom, de annyit mindenesetre
nek, mint a rgztett elrendezs?

leszgezhetnk, hogy a szabvnyok kvetse mindenkppen j pontokat jelent.
Ha egy webtervezt krdeznnk, bizonyra azt mondan, hogy a folykony
elrendezsek ltrehozsa (s tkletestse) hosszabb idt vesz ignybe, de
a hasznlhatsg tern nyert elnyk bsgesen krptolnak a befektetsnkrt.
Persze ha a megbznkat nem igazn rdekli az eredmny minsge, s nem
rtkeli anyagiakban is a munkra ldozott idt, felesleges energiabefektetsnek
tekinthetjk az egszet. Ilyenkor, ha msrt nem is, a sajt kpessgeink csillogta
tsrt rdemes a grngysebb, de magasabbra vezet utat vlasztanunk.
330
Ismtls
Ismtl krdsek
1.
Melyik elrendezs a legjobb: a rgztett, a folykony, vagy a rgztett-folykony

kevert?
2.
Van lehetsgnk egy rgztett elrendezs tetszleges elhelyezsre
3.
Mi a szerepe a min-width tulajdonsgnak?
a bngszablakon bell?
Vlaszok
1.
Ez beugrats krds, hiszen nincs "legjobb" elrendezs. A vlaszts a tartalomtl
2.
Persze. Jllehet a legtbb oldal tartalmt balra vagy kzpre igaztjk, lehets
s kznsg ignyeitl fgg.

gnk van arra, hogy az elrendezs burkol <div> elemt az X s az Y tengely
mentn tetszleges mrtkben eltoljuk.
3.
A min-width tulajdonsg az adott elem lehetsges legkisebb szlessgt
hatrozza meg, amelybe nem rtjk bele a kitlts (bels marg), a szegly,
valamint a (kls) marg rtkt
Gyakorlatok
A 19.3. bra a rgztett-folykony kevert elrendezs "vgs" vltozatt mutatja,
de feltnhet, hogy van mg mit javtani rajta: a jobb oldali hasbban nincs trkz
a szveg krl, a trzs s a hasbok kztt nem lthatunk margt, a lblc kicsit
ritks, s gy tovbb. Sznjunk r nmi idt, hogy kijavtsuk ezeket az apr
hinyossgokat.
Miutn az elbbi feladatban meghatroztuk a megfelel kitltst vagy margt,

a 17. rn tanultak alapjn gazdagtsuk az oldalt egy vzszintes navigcis
svval, a fggleges navigcit pedig csinostsuk ki.
20. RA
Nyomtatbart weboldalak
ksztse
A lecke tartalma:
A megjelensi formhoz ill stluslap hasznlata
A nyomtathat oldalakhoz val stluslap elksztse
A weboldalak nyomtatsi elnzetnek megtekintse
Ha az Olvas hasznlt mr olyan internetes trkpeket, mint a MapQuest vagy

a Google Maps, ktsgtelenl kerlt mr olyan helyzetbe is, amikor szeretett volna egy
weboldalt kinyomtatni. A nyomtatbart weboldalak irnti ignyt nveli tovbb
az Interneten beszerezhet vsrlsi kuponok trnkelege, az internetes vsrlsok
bizonylatai, a webes felleten elvgezhet replgpes helyfoglals, illetve az otthon is
kinyomtathat beszllkrtya. A dolog gy ll, hogy nem minden weboldalt terveztek
kizrlag manitoron val olvassra. Lehet, hogy az Olvas nincs is tudatban annak,
hogy lehetsge van megtervezni s elrhetv tenni a honlapja adott oldalainak
nyomtatbart vltozatait is - kifejezetten azoknak a felhasznlknak a kedvrt, akik
kinyomtatva, paprrl szeretnk elolvasni az adott oldal tartalmr. Ilyet ajnl az olvas-
nak a Google Maps is, Iniutn a tartalom monitorra sznt vltozatt mr megmutatta.
A CSS technolgia hasznlatval knnyedn hozhatunk ltre olyan weboldalakat,
amelyek a megtekints mdjnak megfelelen vltoztatjk a kinzetket. Ezen az rn
az ilyen weboldalak ltrehozst fogjuk elsajttani.
nll feladat
A tartalom vizsglata a nyomtathatsg szempontjbl
Az ra anyagnak olvasgatsa alatt idrl idre idzzk fel az egyik olyan webolda
lunkat, amelyik szpen mutatna kinyomtatva is. Ilyenkor gondolkodjunk el azon, hogy
mit vltoztatnnk az oldalon annak rdekben, hogy a nyomtatott lapon mg szebb
legyen. me pr megfontolsra rdemes tlet:
Elkpzelhet, hogy az elz fejezetekben lv figyelmeztetsek ellenre van

mg olyan weboldalunk, amelynek a httert ismtld kp alkotja, illetve az,
hogy valamilyen szakatlan httrszme rtuk a szveget egy attl elt sznneJ?
Az effle oldalakat a httr Iniatt bonyolult lehet kinyomtatni, rdemes teht
elgondolkodnunk olyan nyomtatsra sznt vltozat kialaktsn, amely sem
httrkpet, sem httrsznt nem hasznl, s egyszer fekete betu'Kkel kszl.
Ha egy oldal nyomtathat vltozatn munklkodunk, rdemes a fehr httr s
a fekete szveg hasznlatnl maradni.
Az oldalaink sok hivatkozst tartalmaznak? Ha igen, akkor rdemes megfontol

nunk a hivatkozsok megvltoztatst valamilyen kevsb kirv formra - pl
dul tvoltsuk el az alhzsokat. Gondoljunk csak bele: a papron gyis hiba
kattintgatunk.
Valban ltfontossg az oldalon valamennyi kp? A sznes kpek kinyomtatsa

a legtbb nyomtatn igen sokat elfogyaszt a drga tintbl. rdemes teht
elgondolkodnunk azon, hogy elhagyjunk-e pr- vagy akr az sszes- kpet
az oldalaink nyomtatsra sznt vltozatbL

A fenti krdst az elz nll feladat rszben mr lnyegben megvlaszoltuk, de
rdemes mlyebb magyarzatot szentelnnk annak, hogy mi az, ami a weboldalakat
egyszeren nyomtathatv teszi. Mindenekeltt r kell mutatnunk, hogy van nhny
weboldal, ami mris egyszeren nyomtathatnak tlhet. Ha az Olvas a weboldalain
fehr htteret s ettl elt, stt szveget, valamint kevs kpet hasznl, akkor esetleg
szksgtelen a kln elksztend, nyomtatsra sznt vltozaton trnie a fejt. A stt
httrrel kszlt, dinamikus hivatkozsokat s sok kpet tartalmaz oldalakkal azonban
knnyen meggylhet a baja egy tlagos nyomtatnak.
20. ra
Nyomtatbart weboldalak kszl'tse
f333
Amikor azt firtatjuk, hogy miknt tehetjk nyomtatbartt a weboldalainkat, a nyom

tatkban hasznlt papr jelentette korltokat kell szem eltt tartanunk. Ms szavakkal,
azt kell megfogalmaznunk, hogy mi az, ami egy nyomtatott oldalt alapveten megk
lnbztet a szmtgp monitortP A nyilvnval klnbsg a mret: egy nyomtatott
oldal mrete rendszerint adott: 30,5 centimter hossz s 21 centimter szles.
A manitorok mrete nagyban klnbzhet egymstl. A mreten fell a nyomtatott
oldalak sznt sem vltoztathatjuk kedvnk szerint- akkor sem, ha sznes nyomtatnk
van. Igen kevs az olyan felhasznl, aki szvesen pocskol tintt a sznes httr
kinyomtatsra, holott csak az oldalon lv szveget szeretn nyomtatsban ltni.
A legtbb felhasznl idegenkedik az oldalnak nem lnyeges rszt kpez szveg
kinyomtatstl is. A 20.1. brn a kaliforniai San Jos s a Washington llamban lv
Pullman kztti tvonalat lthatjuk pldaknt.
C'
--
Wii lmiQu u..- firn IDiiD: ..
Google maps ,,..""'*"" ..

114 ....
_
...
...._
... .... "'!tot--
IMx..l'l!lllll-ltll!lll-
-L.s.en;hfdapJ
Get Dlrectlor. Mll....MiQI.
..
n,ote.ta
e pullman.wa
-
ey,.
""'LGe
c-.
tQooc-M
j
Ortvlng directJons to Pullman, WA
'" Ji l!
IMp
16boura56mlns
!btp.!lca.Cijjfpm"Hwy4.1S-5]N
.....
18 howl 32
l:IQ_f
19hour1: 16rrwl5
Lo1<
"t"'
'"r
-
8 SU99flted routes
....
t,t1Sml
s...
l5altMeiTI!Taln
ldabD
._._
.. "'="'
-.:
..:...
lll
(It Dln
t1:1 oarnr
til 28 "'
><L------===
.lfii;-r-=
20.1. bra
A weboldal a beviteli mezk, illetve a nagy, sajt vezrlelemekkel rendelkez kp miatt nem
kifejezetten nyomtatbart
A 20.1 brn lthat weboldal beviteli mezket is tartalmaz, valamint egy nagymret
kpet, amely nllan vltoztathat - mozgathat, nagythat -, nem beszlve
a weboldalakon ma mr megszakott segdelemekrl. A trkp felett kaptak helyet
a vgrehajthat mveletek, tbbek kztt az oldal kinyomtatst segt hivatkozs.
Lehet, hogy elgondolkodunk azon, hogy mirt nem elg, ha a bngsz Nyomtats
ikonjra kattintunk. Persze, megtehetjk, de ekkor az oldalt gy nyomtatjuk ki, ahogy
a kpernyn is lthat, benne a beviteli mezkkel s a grafikai elemekkel - holott

mindssze arra vagyunk kvncsiak, hogy vezets kzben hol kell bekanyaradnunk
az ton.
A weboldal Print (Nyomtats) hivatkozsra kattintva a webbngsznk egy olyan
oldalt
(20.2. bra) jelent meg, amelyet a Google kifejezetten az oldalt kinyomtatni
kvnk ignyeinek megfelelen formzott.
filo[...
__ .......,.l"""li"P
C
tlcam/nwp51f:q&sourn=s-:q&N:tn&q:.njost"clt0"pullmtf\WI=4157061.
Showfor-'lsteps TaxtontyiMIRti Slr:ulY'im:

Raj v'IW the dl'ect
IncJude large map
to:ustomae ad> step
Google maps
Olrectlons 10 Pullman, WA
1,015 mi- about 16 houra 56 mlm
Save tre-es. Go greeni
-'""
,...
.. 19'
-:
San.Jose, CA
1 Head nonhwest on H Martet St toward W Julian St
fO 2071
l Take the 1t
s left onto W Julian St
goOJm
total 0 3m
J :=mttoCA..I7 S
go Olim
totlll 11m'
4 Taka exrt S to merge onto 1-280 S tow.d US-101

Abi ...-
go 211m
total207 l
.,
AbQull OV!Stnn
iii5 6 Mont.30E
@ 1 Take exrt 56 fnf 1-505 N/Orange Dr towald Wlntersllhtdding/Nut Tree Rd
il
8 =rge!_'N
v 9ont
!Olai 'l 9 !TO

go 10 9m
tollll148m
go147m
t0l.lll896mo
go07m
total 90 3m
go334m
tot81124m
., ...
..
totlll1668m
..,
20.2. bra
Az oldal nyomtatbart vltozata elklntve tartalmazza a vezetshez szksges
informcikat- amelyeket gy nmagukban is kinyomtathatu nk
Ahogy a kpen lthat, az oldal nyomtatbart vltozata jelents javulst hoz

az eredetihez kpest - legalbbis a nyomtat szemszgbl mrlegelve a helyzetet.
Minden beviteli mez s kp kimaradt.
A nyomtatsra sznt oldalakhoz egyes webtervezk a talpas bettpusok hasznlatt

ajnljk a talp nlkli betk helyet, ugyanis az ltalnosan elfogadott vlemny
alapjn ezek nyomtatsban knnyebben olvashatk. Ha az Olvas a weboldalain talp
nlkli bettpust hasznl, neki kell eldntenie, hogy nyomtatsban is ragaszkodik-e
az oldal kinzetnek megtartshoz - azaz lemond-e a talpas betk hasznlatrl.
20. ra
Nyomtatbart weboldalak kszftse
f335
Annak rdekben, hogy az Olvas minl megalapozottabb dntseket hozhasson

a nyomtatbart vltozat kialaktsa sorn, me egy lista azokkal a javaslatokkal,
amelyeken legalbb elgondolkodnunk rdemes:
Tvoltsuk el a httrkpet, gy vgs soron fehr htteret kapunk nyomatskor.
A szveg sznt vltoztassuk feketre- nem baj, ha vannak sznes szvegelemek,

de a fekete a javasolt szn.
Bizonyosodjunk meg arrl, hogy a betmret kellen nagy, s nyomtatsban is
Tvoltsuk el a hivatkozsokat, illetve trjnk vissza az egyszer alhzsos
olvashat marad a szveg. Elfordulhat, hogy tbb mretet is ki kell prblnunk.

hivatkozsokhoz. Vannak olyan tervezk, akik az alhzsokat szvesen meg
tartjk: gy a ltogat tudja, hogy az eredeti oldal hol tartalmaz hivatkozsokat.
Tvoltsuk el valamennyi nem ltfontossg kpet. Ez rendszerint az sszes,

az oldalon nem tartalmi elemnek szmt kp eltvoltst jelenti. Ilyenek
a navigcis gombok kpei, a legtbb hirdets, s a mozg kpek.
A fenti javaslatokon tl rdemes lehet egy olyan sort is elhelyeznnk, amely az oldal
szerzjt, URL-jt s a szerzi jogi tudnivalkat tartalmazza. Mindez olyan informcit
jelent, amely esetleg elvsz, miutn a felhasznl tvozik a webhelynkrl, s csak
a nyomtatott vltozatt tartja kzben az adott oldalnak.
Lehet, hogy nem kell mris az oldalunk trshoz fognunk. A fent lertakkal a szerzk
f clja az, hogy az Olvasnak fogalma legyen a nyomtatbart oldalak mibenltrl,
s gy sikeresebb legyen a nyomtatsra sznt oldalak stluslapjainak elksztsekor.
Igen, lehet olyan stluslapot kszteni, amelyet kizrlag a weboldal kinyomtatsakor
hasznlunk. A kvetkez rszben ezt fogjuk megtanulni.
A megjelensi formhoz ill stfluslap hasznlata

A 20.1 brn lthattuk, amint egy hivatkozsra, illetve a kis nyomtatikonra kattintva
lehetv vlik az oldal egy klnleges, nyomtatbart vltozatnak megtekintse.
Az effle ikon sok hiroldalon is elterjedt, s azrt szmt az oldalak fontos elemnek,
mert ha nem lenne, a felhasznJk esetleg nem fradnnak az oldal cikkekhez tartoz
grafikt s hirdetseket tartalmaz vltozatnak papr- s tintapocskl kinyomtats
vaL Br a nyomtatt brzol ikonon, illetve a hivatkozsan alapul megkzelts
magtl rtetd, s remekl mkdik, ltezik egy olyan lehetsg is, amely szksg
telenn teszi az effle hivatkozsokat, amikor a nyomtatbart vltozathoz kivnunk
eljutni.
Az emltett lehetsg egy kifejezetten nyomtatshoz tervezett stluslap hasznlatt jelenti,
amely akkor fejti ki a hatst, amikor a felhasznl az oldal kinyomtatsa mellett dnt.
A CSS-ben megvalstottk a megjelensi formhoz ill vagy hordozfgg stiluslapok
elvt. Olyan stluslapokrl van sz, amelyek egy bizonyos informcihordoz - monitor,
nyomtat - hasznlatt segtik. Persze a CSS nem csak az emlterr kt hordozt tmogatja.
Az albbi listban azokat az informcihordozkat tntetjk fel, amelyek hasznlatt
a CSS 2 nll stluslap biztostsval segti el.
all: minden eszkz esetben hasznlhat.
aural: beszdszintetiztorokhoz (a CSS l-ben speech nven ismeretes).
braille: a Braille-elven mkd, tapogatst segt eszkzkhz.
embossed: a Braille-nyomtatk hasznlathoz.
handheld: korltozott kpernymrettel s svszlessggel br, kzben
print: nyomtatott anyagok, illetve a manitoron nyomtatsi elnzetben
pro j ect ion: kivettett bemutatkhoz.
hordozott eszkzk szmra.

megtekintett anyagokhoz.
screen: szmtgp-manitoron val megjelentshez.
tty: lland szlessg karakterekkel dolgoz eszkzk (pldul terrninlok,

szveges terminlok s korltozott kpernymret kzi eszkzk) szmra.
tv: televzi, illetve hozz hasonl, ltalban alacsony felbonts s csak
korltozott mrtkben grgethet kpernyk szmra.

Alighanem azaural a legrdekesebb informcihordoz-tpus; ezzel vlik lehetv
a weboldalak felolvassa vagy egyb mdon trtn meghallgatsa. A CSS megalkoti
nak nyilvnvalan egy lnyegesen szlesebben elrhet Vilghl lebegett a szemk
eltt annl, amilyen kp a Webrl jelenleg l bennnk - hiszen elsdlegeserr szmt
gp-manitoron megjelentend weboldalakat terveznk. Igaz, hogy a meghallgathat
weboldalak tervezsvel mostansg mg kevs dolgunk van, a tpus lte mgis hasznos
figyelmeztets lehet az egyelre a lthatr mgtt megbv lehetsgeket illetleg.
A ms informcihordozkan val hasznlatra ksztett stluslapokkal kapcsolatban
azzal a j hrrel szolglhatunk, hogy az Olvasnak semmi jat nem kell megtanulnia.
Elkpzelhet ugyan, hogy a meghallgatsra sznt weboldalak esetben akad egy-kt
megtanuland j trkk, de addig is elg a mr megtanult stluselemek hasznlata
a nyomtatst segt stluslapok elksztshez. Arra kell figyelnnk, hogy miknt
juttassuk rvnyre az adott informcihordozhoz kszlt stluslapoL
Ha mg emlksznk, a <link />cmkt hasznljuk arra, hogy egy weboldalon kls
stluslapra hivatkozzunk. Ez a cmke tmogatja a media nev jellemz hasznlatr,
amellyel eleddig nem tallkoztunk. Ezzel a jellemzvel adhatjuk meg azt az inform
cihordozt, amelyikre a stluslap vonatkozik. Alaprtelmezs szerint a jellemz bell
tott rtke az all, ami azt jelenti, hogy hacsak msknt nem rendelkeznk, minden
informcihordoz esetben kls stluslapot hasznlunk. A tbbi elfogadhat rtket
az elz listban felsorolt informcihordozk jelentik.
20. ra
(337
Ha egy weboldalhoz nyomtatbart stluslapot szeretnnk megadni, kt <link/>

cmkt kell hasznlnunk: az egyiket a nyomtathoz, a msikat a tbbi informci
hordozhoz. A feladatot ellt kdrszletet az albbiakban olvashatjuk:
<link rel="stylesheet" type="text/css" href="standard.css" media="all" />
<link rel="stylesheet" type="text/css" href="for_print.css" media="print" />
Ebben a pldban a weboldalunk kt stluslapra hivatkozik. Az els stluslap esetben

a media jellemz rtkeknt al l szerepel, azaz minden informcihordozra vonatko
zik. Ha nem adnnk meg msik stluslapot, a sta ndard. c ss stluslap rvnyeslne
valamennyi informcihordoz esetben. A msodik stluslap jelenlte azonban azt
eredmnyezi, hogy az oldal kinyomtatsakor a for_print. c ss stluslapot hasznljuk.
Az egyes informcihordozkhoz hasznlt stluslapokra az @import paranccsal is

hivatkozhatunk. Az albbi kdrszlet pldul a <link 1 > cmkk hasznlatval
azonos mkdst eredmnyez:
@import
url(player.css)
all;
@import url(player_print.css)
print;
Egyetlen <link/> elemben tbb informcihordoz-tpust is megadhatunk, ha

a tpusokat az albbiakhoz hasonlan vesszvel vlasztjuk el:
<link rel="stylesheet" type="text/css"
href="for_pp.css"
media="print,
projector" />
A fenti kdrszlet eredmnyeknt a for _pp. cs stluslapot kizrlag a print s

a pro j ector informcihordoz-tpusok esetben hasznljuk.
Esetleg ksrtst rznk, hogy az elz kdrszletben az elsknt hivatkozott stlus

C?;; q
ll
lapnl a media jellemz rtkl screen-t adjunk meg. Ha az oldalt szoksos

webbngszvel nzzk meg, nem is lesz semmi baj, ha azonban a felhasznl egy
kzi eszkzzel vagy valamilyen ms informcihordoz segtsgvel olvassa
az oldalt, a helyzet problmsabb vlik. Ms szvai: a stluslap csak a media
jellemz rtkeknt felsorolt esetekben fejti ki a hatst, mskor nem.
A nyomtathat oldalakhoz val stfluslap elksztse

A nyomtatbart oldalak kialaktshoz szksges mdostsokra vonatkoz tan
csokkal felfegyverkezve immr belevethetjk magunkat egy nyomtatbart stluslap
elksztsbe. Elszr tekintsk meg a szoksos (monitorra rvnyes) stluslap
hasznlatval megjelentett weboldalt a 20.3. brn.
Az informcihordoz tpust akkor is megadhatjuk, ha nem hivatkezunk kls

stluslapra. A <style> elem ugyanazt a media jellemzt hasznlja, mint
a <link/>.
338

.Musot("YMMiaTt.nu.nsMo:ila
f* dl Hiitwy loob-fa; look J::felp
NICKNAME: Big T
PosmoH: RW
HEICHT: 6'3"
WEJ.GHT: 195
SHOOTS: left
AcE: 40
BIRTHPl.ACE: Nashvile, TN
fAvoRITE NHL PLAYER: 6ren t-tua

fAVORITE NHL TEAM: NashviDe Predatars
fAVORITE SouTHERN fDCIN: Skillet Fried
Potatoes
h.VORITIE NEAT AND THREE: Swett'S (map)
fAVORITE CouNlllY STAR: Patsy eine
fAVORITE NAAA NOMENT: "Chet flnJshing
the game with his eyelid completely

slashed through."
Copyright 2009 Muslc City Mafia.

www.musiccity11,afta.com
.....
20.3. bra
Egy CSS hasznlatval kszlt oldal szokvnyos bngszben olvasva
A fenti kp megmutatja, hogy miknt ltszik az oldal egy szoksos webbngszben.

Az a helyzet, hogy ez az oldal nem ll tl messze attl, hogy nyomtathat legyen, de
azrt van mg rajta mit javtani.
A weboldal az albbi mdostsokkal tehet nyomtatbartabb:
Cserljk minden szveg sznt feketre.
Tvoltsuk el a hivatkozsok flkvr s sznes formzst.
A jtkossal kapcsolatos informcikat tartalmaz rszeket helyezzk egyms

fl, mivel egyms mellett aligha frnek el egy nyomtatott oldalon.
A jtkossal val kapcsolatfelvtelre szolgl feliratot ("Contact Terry") teljes

egszben tvoltsuk el.
Br az abszolt elhelyezs remekl mkdik a jgkorong-jtkost brzol mintaol

dalunkon, a nyomtatsra sznt oldalak esetben nem mindig szmt j tletnek.
Kevsb talnyosan fogalmazva azt mondhatjuk, hogy ha az oldalon lv lnyegi
tartalom egy oldalnl nagyobb terletet ignyel, rdemesebb relatv elhelyezst
hasznlnunk, s engednnk a tartalmat tbb oldalon t folytatdni.
Az ltalnos cl stluslaphoz kpest megejtend els kt vltoztats igazn magtl
rtetd- lnyegben a mr meglv stluselemek megvltoztatst, illetve megszn
tetst jelentik. A harmadik vltoztats mindazonltal nmi fontolgatst ignyel. Annak
a tnynek az ismeretben, hogy a nyomtatott oldalak mrete adott, rdemes lehet
a nyomtatott vltozatban megjelen valamennyi elem esetben abszolt elhelyezst
20. ra
(339
hasznlni. gy lnyegesen egyszeruob a tartalmat hordoz elemeket pontosan

a szndkaink szerint elhelyezni. Vgl pedig azt emltjk meg, hogy a fenti lista
utols elemnek megvalstsa igen egyszer - egyszeren annyi a dolgunk, hogy
a contact elem display tulajdonsgnak a none rtket adjuk.
A 20.1. plda a player_print. ess stluslap CSS-kdjt ismerteti, amely a benne
tallhat, az elzekben ismertetett vltoztatsokkal tkletesen alkalmas a jgkorong

jtkosokkal foglalkoz oldalaink kinyomtatsra.
20.1. plda
body
A jgkorong-jtkosokkal foglalkoz oldalak kin_vomtatst segt CSS-kd
font-farnily:Verdana,
Arial;
font-size:12pt;
color:black;
div
padding: 3px;
div.title
font-size:lBpt;
font-weight:bold;
font-variant:small-caps;
letter-spacing:2px;
position:absolute;
left:Oin;
top:Oin;
div. image
position:absolute;
left:Oin;
top:0.5in;
div. info
position:absolute;
left:l.75in;
top:0.5in;
div.favorites
position:absolute;
left:l.75in;
top:2in;
div.footer
position:absolute;
text-align:left;
340

left:Oin;
top:9in;
table.stats
width:lOO%;
text-align:right;
font-size:llpt;
position:absolute;
left:Oin;
top:3.75in;
div.contact
display:none;
.label
font-weight:bold;
tr.heading
background-color:black;
color:white;
tr.light
background-color:white;
tr.dark
background-color:#EEEEEE;
th.season,
td.season
text-align:left;
a,
a:link,
a:visited
color:black;
font-weight:normal;
text-decoration:none;
A fenti kdban taln az a legszebb, hogy hvelyket (angolul inch, a CSS-ben:
in)
hasznl mrtkegysgknt minden, az abszolt elhelyezst megvalst helyen. Ha arra

gondolunk, hogy a nyomtatott oldalakat kppont helyett hvelykben szoks mrni
(mrmint az USA-ban), ez igen hasznos dolog. A kdot figyelmesen tanulmnyozva
szrevehetjk, hogy a szveg rnindentt fekete, a hivatkozsokrl minden klnleges
stlusformzst eltvoltottunk, s a tartalmat kpvisel rszek elhelyezse most mr
abszolt- vagyis ppen ott lesznek, ahov sznjuk ket.
20. ra
Nyomtatbart weboldalak ksztse f341
Az oldalak nyomtatsi elnzetnek megtekintse

A 20.4. bra a jgkorong-jtkossal foglalkoz oldal nyomtatbart vltozatt mutatja
gy lthat a Mozilla Firefax Print Preview (Nyomtatsi elnzet) ablakban.
UtcCtyMafia- ift1Y
16
TERRY lANCASTER
NlOCNANE: T
POSITlON: RW
HEICKT: 6'3
WEICHT! 195
SHOOTS: left
AGE 40
BJRTliPLAce: Nashvllle, TN
fAVORITE NHL PLAYER! Brelt Hull
fAVOIUTE NHl TEAM: Nashville Predators
fAvoa.rre SoUTHEitN flXIN: Sklllet Fr led
Potatoes
fAVOlflE NEAT
AND
THREE! Swett's (map)
fAvORne CouNTRY STAR: Patsy Cllne

fAVORITE MAflA MOMENT! ehet flnishing
20.4. bra
the game with hfs eyelld completE.Iy slashed

through.
SEASON
i\Vinte< 2009
ISO"'""" 2009
l5pnng 2009
GP
R19I
\24114ii4\2BI
PIM
2!
>l
PPG
ol
ol
SHG
GWG1
or--5:
ol
91 9f!BI
7[17[24T----[-o
-o
r--ci
.l
nyomtatsi elnzet
hasznlatval kinyomta
ts nlkl is megtekinthet
jk a weboldalak nyom
tatbart vltozatt
Ha a 20.4. bra az egsz oldalt megmutatn-mind a ll hvelyknyi magassgt, meg

mg egy keveset - felfigyelhetnnk r, hogy az oldal nyomtatbart vltozata legalul
mostanra a lblcet is tartalmazza- lsd a 20.5. brt.
A 20.5. bra a nyomtatbart vltozatok gyakorlati hasznlatt hivatott bemutatni.
A:z. brn a jgkorong-jtkost bemutat, szoksos oldalunk az Adobe Acrobat
Readerrel megnyithat PDF-dokumentum formjban tnik fel jra.

A jgkorong-jtkost brzol weboldalt az Adobe cg virtulis nyomtatjval "kinyom
tatva" PDF-dokumentumm alakthatjuk A:z. Olvas tallkozhat olyan PDF-talaktkkal
is, mint a Do PDF (http: 1 lwww. dopdf. com), amelyek az Adobe Acrobat alkalmazsnl
alacsonyabb kltsggel llthatk zembe. PDF-formtumba nyomtatva lnyegben
olyan formtumt kapjuk meg a nyomtatbart weboldalnak, amely kinyomtats clj
bl knnyedn tovbbthat elektronikusan.
Ha bvebb informcira vgyunk az Acrobat alkalmazst illeten, ltogassunk el

a http: llwww. adobe. comlproductslacrobatl weboldalra.
16
TERRY LANCASTER
-....,.....,
NIC.KNAME: Bio T
PosmoN: RW
HEIGHT: fir
WUGHT: 195
SHooTS: Left
AGE: 40
BlRTHPLACE: NashviJie, TN
FAVORITE NHL PLAYER: Brett Hull
FAVOfUTE NHl TEAM: Nashville PredCitars
......001
-.....1
SountERN flXJN:
Fried
Skfftet
:a=
fAVOIUTf MEAT AND
THttEE:
Swett's (map)
fAVORlTt CoUNTRY STAR: Patsy Cline

fAVOIUTE MAflA MOHENT: ehet finishinQ
the oame with his eye!Ki compietetv slashed

throUQh."
SHG
CopyriQht 2009 Music City Mafla.

www .musiccitymafia.com
20.5. bra
A jgkorong-jtkost bemutat oldalbl gy ksztettnk PDF-dokumentumot, hogy kinyom
tattuk az Adobe PDF-nyomtatjval
sszefoglals
A mai rn a CSS-nek egy rendszeresen felmerl ignyt - a weboldalak nyomtatst megold gyakorlati alkalmazsval foglakoztunk Az ra elejn megtudtuk, hogy ponto
san mit takar a nyomtatbart weboldal fogalma. Ezt kveten megismerkedtnk a CSS
be ptett, a weboldal megjelentsre szolgl informcihordozk elklntst szol
gl lehetsggel, illetve megtanultuk azt is, hogy tniknt vlaszthat meg a megfelel
stluslap. Az ra vgn ltrehoztunk egy stluslapot, amelynek egyetlen feladata, hogy
az oldalt elksztse nyomtatsra. Br a legtbb felhasznl szvesebben tekinti meg
az oldalt egy nagymret manitoron ahelyett, hogy paprrl olvasn, vannak helyzetek,
amikor mindenkppen szksges a weboldal kinyomtatsa. A weboldalaink olvasinak
mindig a lehet legnagyobb rugalmassgot kell biztostanunk, ezrt a nyomtatbart
vltozatok kialaktsa felttlenl szksges.
20. ra
Nyomtatbart weboldalak kszftse
(343
Krdezz-felelek
K:
A <link l> elem media jellemzjnek hasznlatval megoldhat-e a kzi
V:
Igen. Ha a <link />elem media jellemzje a handheld rtket kapja, akkor
eszkzkn val megtekintshez szksges stluslap kialaktsa?
pontosan a kzi kszlkekre sznt stluslapot adhatjuk meg. Alighanem azt

fogjuk tapasztalni, hogy a mobileszkzkre sznt weboldalak is ebbe az irnyba
mozdulnak el, ahelyett, hogy erre a clra klnleges, a WML-hez (Wireless
Markup Language) hasonl jellnyelveket hasznlnnak.
K:
A tovbbiakban is el kell helyeznem a nyomtathat vltozatra utal kis nyom
V:
Nem. A kapcsolt stluslapok mdszere, amellyel a mai rn ismerkedtnk meg,
tatikont az olda/aimon?
anlkl teszi lehetv a nyomtatbart weboldalak kialaktst, hogy brmifle

klnleges hivatkozs szerepeloe az oldalon. Ugyanakkor, ha a felhasznl
szmra lehetv szeretnnk tenni, hogy a nyomtatbart vltozatot a bng
szben tekintse meg, ltrehozhatunk egy hivatkozst egy olyan vltozatra,
amely f (bngsz6ben megjelen) stluslapknt is nyomtatbart stluslapot
hasznl. Tovbbi lehetsg, ha az oldalon a felhasznl tudomsra hozzuk,
hogy a nyomtatbart vltozat megtekintshez a bngsz6program nyomtatsi
elnzett kell hasznlnia.
Ismtls
Ismtl krdsek
1.
Ha a nyomtatbart vltozathoz vezet ikonra kattintunk, biztosan nyomtat
2.
Mi trtnik a kls stluslappal, ha gy hivatkazunk r az oldalon, hogy a media
bart vltozatl1oz jutunk?

jellemznek nem adunk rtket?
3.
Hogyan kell hivatkoznunk a freestlye. ess nev stluslapra egy weboldalon,

ha azt szeretnnk, hogy a hatsa csak az oldal televzin trtn megtekintsekor
rvnyesljn?

Vlaszok
1.
Nem. Az is fontos, hogy a hivatkozs olyan klnleges stluslapot hasznl

oldalra mutasson, amelynek hatsra az oldal valban "nyomtatbart" lesz.
2.
A media alaprtelmezett rtke az all; ennek hatsra a stluslap minden

informcihordoz-tpus esetben rvnyre jut.
3.
<link rel="stylesheet" type="text/css" href="freestyle.css"

media="tv" />
Gyakorlatok
Hozzunk ltre nyomtatbart stluslapot egy olyan weboldalhoz, amelyen

meglehetsen sokfle szn s sok kp tallhat. Ne feledkezznk meg a nyomta
tbart stluslapra hivatkoz <link />elem elhelyezsrl a weboldalon.
Azok, akikben tlteng az nbizalom, prblkozzanak a <link />elem media

jellemzjnek handheld rtket adva a weboldalaikbl kzi eszkzkre sznt
vltozatot kialaktani. Az elv ugyanaz, mint a nyomtatbart oldalak esetben,
azzal a klnbsggel, hogy ez esetben az olvass nem paprlaprl, hanem egy
igencsak korltozott mret kijelzrl trtnik. Az oldal ellenrzse gy valst
hat meg, hogy kzztesszk az oldalt, majd a mobiltelefonunkrl vagy a kzi
eszkznk bngszjbl nyitjuk meg.
21. RA
Dinamikus webhelyek
A lecke tartalma:
A dinamikus tartalom klnfle tpusai
JavaScript a HTML-kdban
Vletlenszer szveg megjelentse JavaScript hasznlatval
Kpvlts felhasznli mveletek alapjn, JavaScript segtsgvel
A dinamikus sz olyasvalamit jelent, ami mozgsban van, illetleg mozgsra ksztet
valamit. Webhelyekrl beszlve dinamikus webhely alatt olyan webhelyet rtnk,

amelyet gy terveztek, hogy a felhasznli mveletek a webhely mkdsnek szerves
rszt kpezik, vagyis igyekszik a felhasznlt valamilyen cselekvsre rvenni - legyen
ez annyi, hogy tovbb olvas egy rst, vagy hogy megvesz egy termket, s hasonlk.
A mai lecke sorn belekstolunk a webhelyet dinarnikuss tev felhasznli beavatko
zs trgykrbe, rintve rnind a kiszolgl, mind az gyfloldali parancsfjlok ksztst

- ez utbbibl pr gyakorlati pldt is felvonultatva.
A knyv ms rszn is tettnk mr emltst az gyfloldali parancsfjlok ksztsrl, s
az Olvas is ksztett mr ilyet a 18. ra sorn, amikor esemnyjellemzket s JavaScript

kdot hasznltunk bizonyos elemek stlusnak megvltoztatsra - ezt a dokumentum
objektummodell (Document Object Model, DOM) mdostsnak nevezzk. Ebben
a fejezetben is hasonl dolgunk akad majd- ha pontosabban szeretnnk fogalmazni,
akkor a klnbz technolgikkal val megismerkeds utnJavaScript-kd segts

gvel vletlenszer idzeteket jelentnk meg egy oldal betltdsekor, s a felhasznli
mveletek fggvnyben kpeket fogunk cserlgetni.
A parancsfjlok klnfle tpusai

A webfejlesztk ktfle parancsfjltpust klnbztetnek meg: a kiszolgloldali s
az gyfloldali parancsfjlokat Az emltett kt parancsfjltpus brmelyiknek trgyal
sa meghaladn knyvnk kereteit- ez mr vgs soron szmtgp-programozs len
ne. A
Tanuljuk meg. ..
24
ra alatt sorozat kt igen hasznos s npszer kiadvnya e
tekintetben knyvnk termszetes kiegsztjnek tekinthet: a kiszolgloldali

parancsfjlok ksztsvel a
Sams Teach Yourseif PHP, MySQL and Apache Ali-in-One

Sams Teach YourseifjavaScript in 24
Hours (magyarul: Tanuljuk meg a javaScript hasznlatt 24 ra alatt, Kiskapu, 2006)
cm, az gyfloldali parancsfjlokkal pedig a

cm knyv foglalkozik.
A
kiszolgloldali parancsfjlok olyan parancsfjlok, amelyek a webkiszolgln futnak,
s a futsuk eredmnyt a webkiszolgl juttatja el a webbngszhz. Ha elfordult

mr olyan, hogy egy webhelyen rlapot tltttnk ki- idertve brmely keresmotor
hasznlatt-, akkor mr tallkoztunk is kiszolgloldali parancsfjl eredmnyeknt
elll weboldallaL Az albbi listban npszer kiszolgloldali parancsfjl-rtelmez
ket ismertetnk- a feltntetett webhelyeket felkeresve tudhatunk meg tbbet rluk.
PHP (PHP: Hypertext Preprocessor): http: l /www.php. net l

JSP Qava Server Pages): http: l l j ava.sun.com/products l j sp/
ASP (Active Server Pages): http: l /www.asp. net/
Perl: http: l /www.perl.org/
Python: http: l /www.python. org l
Ruby: http://www.ruby-lang.org/
Neve ellenre a JavaScript nyelv nem leszrmazottja a Java nev, objektumkzpont

programozsi nyelvnek, s ms kapcsolatban sem ll vele. A Sun Microsystems cg
ltal 1995-ben bevezetett Java nyelv a JSP kiszolgloldali parancsfjl-rtelmezvel
ll igen szaros rokonsgban. A JavaScript nyelvet a Netscape Communications cg
fejlesztette ki, szintn 1995-ben. A nyelv azrt kapta ezt a nevet, mert gy kvntk
jelezni a kls hasonlsgt a Java nyelvvel - mindazonltal a Java s a JavaScript
nincs kzvetlen rokonsgban egymssal.
Az elzekkel ellenttben az
gyfloldali parancsfjlok olyan parancsfjlok, amelyek
a webbngsz belsejben futnak- a parancsfjl futtathatsgnak nem felttele

a webkiszolglval val kapcsolat. Az gyfloldali parancsnyelvek kzl messze
aJavaScript a legnpszerbb. Sokves kutatsok szerint a webbngszk kilencvenh
rom szzalkban engedlyezett a JavaScript-parancsfjlok futtatsa.
21. ra
Dinamikus webhelyek
f347
A Microsoft cg ltal fejlesztett VBScript C Visual Basic Scripting Edition) egy msik gy
floldali parancsnyelv. Ezt a nyelvet csak a Microsoft Internet Explorer webbngszvel

megtekintett oldalakon hasznlhatjuk, gy aztn csak olyan esetekben rdemes ezzel
a nyelvvel dolgoznunk, amikor egszen biztosak vagyunk abban, hogy a webhelynket
csak Internet Explorerrel fogjk ltogatni - pldul egy zrt cges krnyezetben.
Minthogy szndkaink szerint a lehet legszlesebb olvaskznsghez szeretnnk
szlni, ebben a leckben az gyfloldali parancsfjlokat JavaScript nyelven ksztjk el,
s az ra valamennyi pldjt is ezen a nyelven rtuk.
JavaScript-kd a HTML nyelv oldalakon

JavaScript-kd kt helyen lehet a fjljainkban:
nll llomnyban, amely
kzvetlenl a HTML nyelv fjlok belsejben.
js
kiterjesztst kap, s
A kls fjlokat gyakran rszestik elnyben a parancsfjl-knyvtrak (tbb weboldalon
is hasznlhat kdok) kszti, mg a kzvetlenl a HTML-fjlba kerl JavaScript-kdok

ltalban az adott oldalra jellemz egyedi mveleteket valstanak meg. Mindegy, hogy
a JavaScript-kdunk hol kapott helyett, a ltezsr1 a
<script></ script>
cmkeprral
kell rtestennk a webbngszt

Ha a JavaScript-kdot kls fjlban helyeztk el, az albbi mdon hivatkozhatunk r:
<script
type="text/javascript"
src="/eleresi/ut/script.js">
A <script></script> cmkepr rendszerint a <head></head> cmkk kztt kap
helyet, mivel szigor rtelemben vve nem olyan tartalomrl van sz, amelynek
a
<body>
</body>
cmkk kztt, azaz a szvegtrzsben kellene helyet biztosta
nunk. Mindazonltal az is elg, ha a JavaScript-fggvnyeket, illetve -kdrszleteket

mindssze a
<script>
cmkkkel hatroljuk, s egybknt oda tesszk az oldalon
bell, ahol ppen szksg van rjuk. A 21.1. plda egy olyan JavaScript-kdot ismertet,
amelyet a HTML-dokumentum trzsben helyeztnk el.
21.1. plda
<?xrnl
Sz6veg kiratsa javaScript-kddal
version="l.O"
<!DOCTYPE
html
encoding="UTF-8"?>
PUBLIC
"-//W3C//DTD
XHTML
1.1//EN"
<head>
<tit le>JavaScript
</head>
Example</title>

<body>
<hl>JavaScript Example</hl>
<p>This text is HTML.</p>
<script type="text/javascript">
<!- A parancsokat elrejtjk a rgi
bngszk ell
document.write('<p>This text comes from JavaScript.</p>');
ll A parancsok elrejtse eddig tartott -->

</script>
</body>
</html>
A <script> s a </script> cmkk kz egyetlenJavaScript-parancs kerlt, amely
az albbi HTML-kdot lltja el:

<p>This text comes
from JavaScript.</p>
A bngsznk a fenti HTML-oldal megjelentse alatt a <script>< l script> cmkepr
hoz rve megll, a msodperc ezredrsze alatt vgrehajtja a parancsot, majd folytatja
az oldal megjelentst, immr aJavaScript-parancs kimeneteknt elll HTML-kime
netet is tartalmazva. A 21.1. bra szerint a weboldal ppen gy jelenik majd meg, mint
brmely ms HTML-oldal. Vgl is HTML-oldalrl van sz, annyi klnbsggel, hogy
a HTML-kd egy parnyi rszt aJavaScript-parancs lltja el.
Jr.raScript Example
= ..=--.:-c-.,
. :_
MoziKa Firefov
f.. Editl_
[
......,._!ookli<IP
-httpr.//-.yourdom.tln.c:omfJWMUptl.html
c
=@l-
---:;-:-r
JavaScript Example
l!
:
i
n.;. '"" ;, pam or HTML.

This text comes &cm JavaScripl
:!
21.1. bra
A javaScript
""""
.,
nyelv kdrszlet
kimenetesemmibensem kln
bzik a tbbitl
A 21.1. pldt olvasva alighanem telfigyeltnk az albbi kt sorra:

<!- A parancsokat elrejtjk a rgi bngszk ell
ll A parancsok elrejtse eddig tartott ->
Ezek valjban HTML nyelv megjegyzsek. Minden, ami a < ! - - s a --> karak
terek kz esik, lthat marad a torrskdban, de a bngsz nem jelenti meg.
Esetnkben a JavaScript-kd az, amit a HTML-kdon bell megjegyzss alaktot
tunk, arra a kevss valszn esetre felkszlve, hogy a webhely ltogatja tl
rgi bngszt hasznl, vagy esetleg a bngszjben letiltotta a JavaScript
parancsok vgrehajtst.
21. ra
Dinamikus webhelyek f349
Vletlenszer tartalom megjelentsa

JavaScript-kddal megoldhat pldul az, hogy az oldal minden betltsekor nmileg
eltr tartalommal jelenjen meg. Lehet, hogy az Olvasnak is van olyan, szvegrszle
tekbl, illetve kpekbl ll gyjtemnye, amelyet elg rdekesnek tall ahhoz, hogy
a weboldalain is megjelentse.
A fejezet szerzje imdja az rdekes idzeteket. Ha az Olvas is hasonl alkat,
alighanem jl elszrakozik majd azzal, hogy minden alkalommal ms idzetet rat ki
a weboldalain. Ha egy minden betltskor ms idzetet kir weboldalt kvnunk ltre
hozni, akkor az az els dolgunk, hogy sszegyjtjk az idzeteket, illetve az idzetek
forrsait. Ezt kveten az idzeteket elhelyezzk egy JavaScript-tmbben A tmb
a programozsi nyelvek egy olyan klnleges troleszkze, amely remekl alkalmas
adatlistk trolsra. Miutn az idzeteket betltttk a tmbbe, az idzetek vletlen
szer kivlasztst vgz JavaScript-kdot megrni mr meglehetsen egyszer. Azt
a kdot, amelyik a kimenetet a HTML-oldalba illeszti, mr ismerjk. A 21.2. plda
az egyes betltsek alkalmval vletlenszer idzetet megjelenit weboldal HTML- s
JavaScript-kdjt egyarnt tartalmazza.
21.2. pllia
Vletlenszer idzeteket
megjelent weboldal

<!DOCTYPE html PUBLIC "-IIW3C//DTD XHTML
l.liiEN"
"http:llwww.w3.orgiTRixhtmllliDTDixhtmlll.dtd">
<html xmlns="http:llwww.w3.orgl19991xhtml" xml:lang="en">
<head>
<title>Quotable Quotes<ltitle>
<script type="textljavascript">
 cmki nem mkdnek megfelelen a parancsfjlokban,

illetve a stluslapokon. Ugyanakkor fontos, hogy elhelyezznk egy
a
<script>
s a
<style>
</script>
s a
</style>
< ! --
cmkt
elemek utn, valamint egy--> cmkt a megfelel

elemek eltt. Ezzel elrejtjk a parancsfjl, illetve
a stlusok parancsait a rgebbi bngszk ell, amelyek egybknt egyszer

szvegknt rtelmeznk s megjelentenk azokat az oldalon.
Amikor csak egy HTML-oldal fejlesztsbe fogunk, tartsuk szben, hogy egyszer
a jvben valakinek szinte bizonyosan mdostania kell. A2 egyszer, szveges
oldalak olvassa s rtelmezse tbbnyire nem okoz nehzsget, de az sszetettebb
oldalak, amelyek grafikt, tblzatokat s ms szerkesztsi trkkket alkalmaznak,
komoly kihvs el llthatjk a szernllt.
Ahhoz, hogy jobban megrtsk a lertakat, nyissunk meg szinte brmilyen weblapot
a bngsznkben. Ha az Internet Explorert hasznljuk, vlasszuk a View (Nzet) men
Source (Forrs) pontjt, a Firefaxban pedig szintn a View men Page Source (Oldal
forrsa) pontjt. J esllyel egy kusza kdhalmazt fogunk ltni, amelyrl mg azt is
nehz elhinni, hogy egyltaln HTML-ben kszlt. Ez eredhet abbl, hogy a kdot
valamilyen tartalomkezel rendszer hozta ltre dinamikusan, de az is megeshet, hogy
a programoz nem gyelt a megfelel kdszerkezetre, az olvashatsgra, a megjegy
zsek hasznlatra, s egyltaln, nem gondolt arra, hogy msok szmra is rthetv
tegye a munkjt. Sajt weboldalaink ksztsnl ezrt rdemes kiss jobban gyelni
a kd olvashatsgra s rendezettsgre.
Amint a korbbi rkon lthattuk, a magunk, illetve msok szmra rt megjegyzseket
a cmkk kztt helyezhetjk el. Az itt feltntetett szveg nem jelenik meg
a bngszben, de brki szmra lthatv vlik, aki a HTML-kdot egy szvegszer
kesztvel vagy a bngsz "Oldal forrsa" parancsval nyitja meg. Az albbi rvid kd
segt az emlkezetnkbe idzni, hogy llliknt is formzhatjuk a megjegyzseket:
<!- Ezt a kpet naponta
frissteni kell. ->
<img src="headline.jpg" alt="Today's
Headline"
l>
A2 <img 1> elem eltt elhelyezett megjegyzs jelzi, hogyan hasznljuk a kpet. Akrki is
olvassa a kdot, nyomban vilgoss vlik a szmra, hogy a kpet naponta frissteni kell.
A megjegyzsben ll szveget a bngsz teljes egszben figyelmen kvl hagyja.
23. ra
ev
if
Webhelyek sszellftsa s kezelse 385
A megjegyzsek nagyszer szalglatot tehetnek egy oldal azon rszeinek elrej

tsben is, amelyek jelenleg mg nem kszltek el. gy ahelyett, hogy a flksz
szveget s grafikt megjelentve magyarzkodnnk, hogy mg nem kszltnk el
a munkval, idlegesen elrejthetjk ket a megfelel HTML-kdrszletek kr
helyezett nyit- s zrcmkkkeL gy fokozatosan kszthetjk el a weboldal rszeit,
s a kszltsgknek megfelelen, lpsrl lpsre tehetjk azokat kzz.
nll feladat
A k6d kiegszftse megjegyzsekkel
rdemes lehet most nmi idt szentelnnk annak,hogy sorra vegyk az eddigiekben
elksztett weboldalakat,parancsfjlokat s stluslapokat,s kiegsztsk azokat
megjegyzsekkel,amelyek a ksbbiekben hasznosak lehetnek sajt magunk s msok
szmra. Hajtsuk vgre az albbi lpseket:
1.
Helyezznk megjegyzst minden klnleges oldalszerkezeti vagy formzsi

megolds el.
2.
Alkalmazzunk megjegyzst minden olyan <img /> elem eltt,amelynek
3.
rdemes egy (vagy akr tbb) megjegyzssel sszefoglalnunk, hogyan
4.
Ha hexadecimlis sznkdokat hasznlunk (pldul: <div style="color:
a szerepe lnyeges, de ezt az al t szveg nem rja le megfelelen.

kapcsoldnak egymshoz kpileg a cellk egy <table> elemen bell.
#8040BO" >),jelezzk
egy megjegyzssel,hogy milyen sznrl van sz
(kkeslila).
5.
Lssuk el a megjegyzseket behzsokkal,gy kiemelhetjk ket a kdbl,s

knnyebb vlik mind a megjegyzsek,mind a HTML-kd olvassa. Ne feled
kezznk meg a HTML-kd behzsairl sem,hiszen ezek olvashatbb teszik
a kdot- errl a kvetkezkben mg szlunk.
Behzsok az rthetsgrt
Tartozunk egy vallomssal. A knyv eddigi rszben anlkl vezettk egyre mlyebbre
az Olvast egy HTML-kdolsi stlusba,hogy errl egy szt is szltunk volna. Most itt
az ideje,hogy kitertsk a lapjainkat. Minden bizonnyal feltnt,hogy a knyvben sze
repl HTML-kdok behzsaiban szlelhet nmi hasonlsg. Egszen pontosan arrl
van sz,hogy a gyermekelemek a szljkhz kpest kt szkzzel jobbra kezddnek.
Mindemellett, amennyiben az elem tartalma egynl tbb sorra terjed ki,ez is behzst
kap az elemen bell.

A behzsok valdi rtkt gy mrhetjk fel a legegyszeruben, ha megnzzk,
hogyan is fest a HTML-kd nlklk. Valahogy gy:

<table>
<tr><td>Cell One</td><td>Cell Two</td></tr>
<tr><td>Cell Three</td><td>Cell Four</td></tr>
</table>
Itt a behzsok hinya mellett a tblzat sorai s oszlopai sem vlnak el egymstl.
Hasonltsuk ssze a fentieket a kvetkez kddal, amely ugyanezt a tblzatot rja le:
<table>
<tr>
<td>Cell One</td>
<td>Cell Two</td>
</tr>
<tr>
<td>Cell Three</td>
<td>Cell Four</td>
</tr>
</table>
Ez utbbi, behzsokkal bsgesen elltott kdban vilgosan ltszik, hogyan

vlasztjk el a sorokat s az oszlopokat a <tr> s <td> elemek.
Ha msokkal egytt dolgozunk, vagy kzs munkt terveznk, rdemes egytt lelni,
s kzsen kialaktani egy kdoJsi szablyzatot. gy biztosak lehetnk benne, hogy
mindenki ugyanazon a (web)oldalon ll.
A behzsok sszehangolt rendje taln mg a megjegyzseknl is fontosabb szerepet
kaphat abban, hogy rthetv s fenntarthatv tegyk a HTML-kdunkat. Radsul

nem kell felttlenl elfogadnunk a knyvben hasznlt mdszert. Ha kett helyett h
rom vagy ngy szkzt szeretnnk hasznlni, nincs semmi gond. Akkor sem kvetnk
el hibt, ha kicsit tmrebbre szeretnnk venni a kdot, s az elemeken belli tartalmat
nem hzzuk be. A legfontosabb, hogy kialaktsunk egy kdoJsi stlust, s a tovbbiak
ban fegyelmezetten tartsuk hozz magunkat.
sszefoglals
Ezen az rn elmletben s nhny plda kapcsn bemutattuk, miknt szervezhetjk
a weboldalainkat egysges webhelly, amely egyszerre tjkoztat, kedves a szemnek,
s knnyen bejrhat. Manapsg a webes felhasznJk meglehetsen rzkenyek arra,
hogy jl felptett webhelyet kapjanak, gy hamar elhagyjk a webhelynket, ha
a szerkezete nem teszi lehetv az egyszer naviglst.
23. ra
}387
Emellen tanultunk a HTML-kdban elhelyezerr behzsok s megjegyzsek fontossgrl

is, amelyek megknnytik weboldalaink karbantartst. A megjegyzsek haszna nyomban
vilgoss vlik, amint belegondolunk abba, hogy ksbb is visszatrhetnk egy rgebben
kszten kdhoz, radsul gy msok szmra is rthetv tehetjk az elgondolsainkat
A behzsok hasznlata els rnzsre eszttikai szempontnak tnhet, de egyltaln nem
az, hiszen ezzel elrhetjk, hogy a weboldal szerkezete knnyen uekinthetv vljon.
Krdezz-felelek
K:
Lteznek olyan weboldalak, amelyek arra krik a ltogatkat, hogy vltoztassk

meg a bngszablak szlessgt, vagy mdostsanak ms belltsokat, mieltt
tovbb/pnek. Mi ennek az oka?
V:
Nos, ha durvn akarnnk fogalmazni, azt mondhatnnk, hogy ezeknek

a webhelyeknek a kszti nem igazn trdnek a felhasznlkkaL Soha ne
knyszertsk a felhasznlkat arra, hogy valamit mshogy tegyenek a bngsz
jkben, mint addig, s klnskppen soha ne mretezzk t a bngszablakot
automatikusan. Ez a hasznlhatsg szablyainak legslyosabb megsrtse. Ami
kor egyes webhelyek a belltsok mdostsra krnek fel, emgtt a ksztik
j szndka ll, miszerint a meghatrozon ablakmret vagy bettpus vlasztsa
az oldal elnysebb megjelentst teszi lehetv. Persze kevesen vannak, akik
eleget tesznek a krsnek, s mdostanak a belltsaikon (mirt is tennk?), gy
ezek a webhelyek tbbnyire furcsa s olvashatatlan tartalmat adnak. Sokkal job
ban jrunk, ha megszvleljk a knyvben lertakat, s mindenfle ablakmret- s
bngszbellts mellett megksreljk olvashatv s vonzv tenni a web
oldalainkat Fontos megrtennk, hogy minl jobban szerkesztjk meg a web
helynket, annl hasznlhatbbnak tartjk majd azokat a ltogatink.
K:
Elfordulhat, hogy a rengeteg megjegyzs s szkz lasstja az oldalak letltst?
V:
Az a kevs fls szveg elhanyagolhat mennyisg adat ms, nagyobb mret

erforrsokhoz (pldul kpekhez s egyb multimdis tartalmakhoz)
viszonytva. Mindemellett a lassabb, betrcszs kapcsolatok tmrtve viszik t
a szveges adatokat, gy a formzshoz szksges szkzk jobbra egyltaln
nem cskkentik a sebessget. Tbb szz szavas megjegyzsre van szksg
ahhoz, hogy akr egyetlen msodpercnyi kslekedst okozzunk az oldal
betltsben. Ha ez nem lenne elg, ne feledjk, hogy manapsg a legtbb
felhasznl szlessv (kbel-, DSL- stb.) kapcsolattal rendelkezik, ahol
a szveg tvitele igen gyors. Az oldalak betltst a grafikai elemek lassthatjk
le, gy ezeknek a tmrtsn rdemes gykdnnk (lsd a 10. fejezetben
lertakat) - a szveges megjegyzsekkel nem kell trdnnk.
Ismtls
Ismtl krdsek
1.
Milyen hrom mdszer ismeretes arra, hogy a weboldalainkbl egysges

webhelyet lltsunk ssze?
2.
3.
Melyik az a kt adattpus, amelyet felttlenl el kell helyeznnk a kezdoldalon?

Szeretnnk a kvetkez zenetet eljuttatni a weboldalunk ksbbi szerkesztinek
anlkl, hogy ez a felhasznJk eltt is megjelenne: "Don't change this image of
me. It's my only chance at immortality" (Ne cserld ki ezt a rlam kszlt kpet.
Ez az egyetlen eslyem a halhatatlansgra.) Hogyan tennnk meg ezt?
Vlaszok
1.
Hasznljunk egysges htteret, szneket, bettpusokat s stlusokat. A hivatkoz

sok szvegeit, illetve grafikit ismteljk meg azoknak az oldalaknak a tetejn,
amelyekre utalnak. Ismteljk ugyanazt a fejlcet, gombokat, vagy ms jellemz
elemeket a webhely minden oldaln.
2.
Adjunk elegend tjkoztatst magunkrl, hogy a ltogat azonnal felmrhesse,

mi a webhely neve, s mirl is szl pontosan. Emellett, akrmi is az zenetnk,
amit a kznsgnknek tolmcsoini szeretnnk, kzljk tmren s egyszer
en. Legyen ez mott vagy jogvdett reklmszveg, felttlenl tntessk itt fel.
3.
Helyezzk el az albbi megjegyzst kzvetlenl az <img l> elem eltt:


Gyakorlatok
Fogjunk egy j reg grafitceruzt, s vzoljuk fel a webhelynket kis tglalapok

kal, majd kssk ssze azokat nyilakkal. Firkantsuk le az egyes weboldalak
szerkezett gy, hogy krumplikat rajzolunk a kpek, s hullmvonalakat a sz
vegek helyre. Az egyes nyilak a navigcis elemek krumplijaibl induljanak, s
a megfelel weboldall1oz vezessenek. Ez a vzlat mg akkor is hasznos lehet, ha
egybknt rendelkeznk a legeslegjabb webhelykezel eszkzkkel, hiszen
gy azonnal lthatjuk, hogy mely oldalakat lehet knnyen elrni, s hogyan
mkdik egytt a szomszdos oldalak szerkezete- radsulmindezt mg
azeltt, hogy az oldalakat sszekt kdbl egyetlen sort is megrtunk volna.
Akr hisszk, akr nem, jmagam is ezt a mdszert kvetem. Van gy, hogy
a paprnl s ceruznl nincs jobb trs a munkban!
yissuk meg a jelenlegi webhelynket felpt HTML-fjlokat, s tekintsk t

a bennk tallliat megjegyzseket s behzsokat. Tallunk olyan rszeket,
amelyek esetleg magyarzatra szarulnak egy ksbbi olvas szmra? Ha igen,
helyezznk el alkalmas megjegyzseket. Nehezen ttekinthet a kd szerkezete?
em ltszanak jl a cmsarok s a bekezdsek? Ha igen, alkalmazzunk
behzsokat gy, hogy a kd szerkezete megfeleljen a hierarchinak, gy
a ksbbiekben knnyen megtallhatjuk a szerkeszteni kvnt rszt.
24. RA
Segtsg
keresshez
A lecke tartalma:
Hogyan npszersthetjk a webhelynket?

Hogyan rhetjk el, hogy az ismert keresk feltntessk a webhelynket
a tallataik kztt?
Hogyan optimalizlhatjuk a webhelynket a keresk szmra?
Egy webhely ppen annyit r, amennyire megkzelthet- ha senki tallja meg

az oldalainkat, hiba ksztettnk nagyszer szerkezetet, gazdag tartalmat s tkletes
kdot. A kvetkezkben bemutatott j HTML-elemek nem eredmnyeznek lthat
vltozst a weboldalaink felletn, de igen lnyeges szerepet tltenek be abban, hogy
a kznsgnk valban rakadjon arra, am knlunk. A legtbb webfejleszt szmra
ez lehet knyvnk legegyszerubb, mgis taln Jegfontosabb rja. Megtanuljuk, milyen
jabb elemeket helyezznk el az oldalainkon, s miknt mdostsuk a webhelynk
szerkezett ahhoz, hogy a keresk nagyobb valsznsggel jelezzenek nlunk tallatot,
ha valaki a webhelynk tmjhoz vagy a cgnkhz ktd kulcsszavakat alkalmaz ez a keressoptimalizls (search engine optirnization, SEO). Az ilyen szolgltatsokat
knl cgek reklmszvegvel ellenttben semmifle trkk nem ismeretes, amely
biztostan, hogy a tallari listk lre kerljnk. Mindazonltal ltezik pr gyes fogs,
ami pnzbe sem kerl, ugyanakkor rdemes lnnk vele, ha azt szeretnnk, hogy
a webhelynk elkel helyezst rjen el a keresk tallatai kztt.
A webhelynk npszerstse
Felttelezheten azrt ksztettk el a webhelynket, hogy valakinek felkeltsk
az rdekldst, hiszen egybknt mirt is fradtunk volna? Ha a weboldalainkat helyi
hlzaton vagy egy cg bels hlzatn tesszk kzz, esetleg valamilyen adathordo
zn terjesztjk, knnyen elrhetjk, hogy a felhasznJk rtalljanak az ltalunk knlt
tartalomra. Ha azonban a webhelyet a keresk ltal indexelt millirdnyi weboldal kz
eresztjk, a kznsg megnyerse mris nehezebb feladatnak tnik.
Ahhoz, hogy belefogjunk a krds kezelsbe, elszr is alapjaiban meg kell rtennk,
hogy mikppen akadhatnak r a webhelynkre a ltogatk. Lnyegben hrom
mdon juthatnak el hozznk:
Valaki mesl nekik a webhelyrl, s megadja a cmt, amelyet k kzvetlenl

rnak be a bngszbe.
Egy msik webhely hivatkozsra kattintva jutnak el a mi webhelynkre.
A webhelynk egy keresmotor (a Google, a Bing, a Yahoo! vagy ms keres)

adatbzisbl kerl a ltogatnk tallari listjra,
Kis id- s energiabefektetssel magunk is lendthetnk a webhely forgalmn.

Ha azt szeretnnk, hogy tbben rtesljenek rlunk szjhagyomny tjn, nem kell
mst tennnk, mint hasznlni a sznkat- s minden ms elrhet kzlsi csatornt.
Ha rendelkeznk kapcsolati adatbzissal vagy levelezlistval, hreszteljk ott
a webhelynk megjelenst. Tntessk fel a webhely cmt a nvjegykrtynkon,
illetve cges dokumentumainkban. Ha van nmi pnznk, vsroljunk reklmidt
a TV-ben s a rdiban. Rviden, trjnk elre a reklmfronton. A j reg szjhagyo
mny mg mindig a leghatkonyabb reklmozsi md - mg az Interneten is.
A rnk mutat hivatkozsok szmnak nvelse nem ignyel nagy agymunkt- jllehet
ez nem jelenti azt, hogy egyszer feladat lenne. Ha a tmakrnkben lteznek akr
elektronikus, akr nyomtatott szaknvsorok, neknk is ott a helynk! Vegynk rszt
a kzssgi hlzatok letben, hozzunk ltre a Facebook-on "rajongi" oldalt, amennyi
ben ez illik a webhelynk mondanivaljhoz. Hozzunk ltre Twitter-felhasznlt
a webhelynk szmra, s gy is lpjnk kapcsolatba az gyfeleinkkel-persze ismt
csak akkor, ha ez a mdszer nem tkzik a webhelynk stlusval. Keressk fel azokat
a helyeket, ahol gyfelekre tallhatunk, olyan webnaplkat, amelyek a tmnkba
vgnak, s vegynk rszt ezeknek a kzssgeknek az letben. Ez nem azt jelenti, hogy
keressnk egy frumot a krdses tmakrben, s rasszuk el a webhelynk hivatkoz
saival. Inkbb lpjnk fel a tma szakrtjeknt, tancsokat s ajnlsokat adva, illind
ekzben pedig a sajt webhelynk cmre hivatkozva. E knyv keretei kztt errl
a tmrl nem igazn mondhatunk tbbet a btort szavakon kvl.
24. ra
Segftsg
keresshez
1391
A Mashable nev (http: 1 /www. mashable. com/) igen npszer, nagy forgalm
s szles krben elfogadott webhely (mindez a pontossgnak s a komoly
hozzadott rtknek ksznhet) komoly segtsget nyjthat abban, hogy sikerrel
vegynk rszt a kzssgi hlzatok letben, klnsen ha ezt zleti cllal tesszk.
Knyvnk leginkbb a harmadik pontban, vagyis annak biztostsban segthet, hogy

a tartalmunkra rbukkannak a keresprogramok, s megfelel mdon indexelik
Jogosan felttelezhetjk, hogy ha a webhelynk kimarad a Google adatbzisaibl,
bizony komoly bajban vagyunk.
A keresk alapjban vve hatalmas adatbzisok, amelyek igyekeznek minden,
az Interneten fellelhet tartalmat indexeini - kztk videkat s egyb gazdag
mdiaanyagokaL A webhelyek bejrsra s az adatbzisok felptsre automatikus
eljrsokat alkalmaznak- ezeket hvjuk keresrobotoknak (bot). Ha a tartalom indexe
lse megtrtnt, a keresalkalmazsok klnfle kifinomult mdszerekkel rangsoroljk
az oldalakat annak rdekben, hogy eldntsk, egy felhasznli keress nyomn
melyik tallat lljon az els, a msodik, a harmadik helyen, s gy tovbb.
Amikor a keres feldolgozza egy felhasznl krst, olyan weboldalakat keres,
amelyek tartalmazzk a megadott kulcsszavakat s kifejezseket. A keress azonban
nem annyibl ll, hogy " ha egy oldal tartalmazza a keresett kifejezst, adjuk vissza
az eredmnyben" , ugyanis a tartalom rangsorolt, aszerint, hogy milyen gyakorisggal
s milyen krnyezetben fordulnak el benne a keresett kulcsszavak s kifejezsek,
tovbb milyen ms webhelyek hivatkoznak r, hitelestve a benne foglaltakat. Ezen
az rn megtanulunk pr mdszert annak biztostsra, hogy a tartalmunk megjelenjen
a keresk tallatai kztt- mgpedig a megadott tartalom s krnyezet fggvnyben.
Weboldalaink felvtele a nagyobb keresk adatbzisaiba

Ha azt szeretnnk, hogy a felhasznJk megtalljk az oldalainkat, alapvet fontoss
g, hogy krelmezzk a nagyobb keresoldalaknl az oldalaink indexelst. Jllehet
a keresk automatikusan is keresztl-kasul bejrjk a Webet, ez a legjobb mdszer
arra, hogy biztosan felkerljnk a listjukra. E webhelyek mindegyiknl meg kell
adnunk az URL-cmnket, a webhely rvid lerst, s egyes esetekben egy kategrit
vagy kulcsszavak listjt, amelyek a webhelynkhz kthetk. A kapott rlapok kitl
tse egyszer, egy rn bell vgznk az sszessel, s mg arra is marad idnk, hogy
bejegyezzk magunkat pr, a tmakrnkhz kapcsold szaknvsorba. (Hogy ezekre
miknt akadhatunk r? Termszetesen a nagyobb keresk segtsgve!!)

Mieltt bejegyeztetnnk
az
oldalainkat
Vrjunk csak egy pillanatra! Mieltt beadnnk a krelmeinket a webhelynk feltntet

sre, olvassuk vgig az ra teljes anyagt, egybknt komoly csvba kerlhetnk, s
mindssze azt llapthatjuk meg szomoran, hogy lecssztunk az egyszer megold
sokrl.
Hogy rtsk, mirl is van sz, kpzeljk el a kvetkez helyzetet: kzzresznk egy
webhelyet, amelyen automatikus cstnyroppantkat knlunk. me egy lehetsges
gyfl: egy internet-felhasznl, aki kzd a cstnyokkal, radsul allergis a rovarirt
vegyszerekre. Embernk kinyitja a laptopjt, lespri a cstnyokat a billentyzetrl,
belp a kedvenc keresoldalra, s berja a "cstny" szt a keresmezbe. A keres
pillanatokon bell kirja az els 10 tallatot-a 10 254 weboldalbl, amely tartalmazza
a cstny" szt. Benyjtottuk a krelmnket a webhelynk bejegyzsre, gy tudhat
"
juk, hogy ott lesz valahol a listn.
Lehetsges gyfelnk radsul gazdag ember, s mr nem br a cstnyokkaL Mi pedig
mg hzhozszlltst is vllalunk a lakhelye krnyezetben. Szeretnnk, ha a webhe
lynk harmadikknt jelenne meg a tallari listban, vagy berjk a 8542. hellyel?
os, ennyi minden bizonnyal elegend a helyzet megvilgtsra. Bekerlni egy keres
adatbzisba mg flsikernek sem nevezhet - fel is kell kzdennk magunkat a tallati
rangsor elejre.
Lteznek olyan webhelyek, amelyek egyetlen rlapot biztostanak, s az ezen megadott

adatokat automatikusan elkldik az sszes nagyobb s szmos kisebb keresnek.
Ezek a webhelyek- mint a ht tp: //www. scrubtheweb. com/,
a ht tp: //www. submi texpress. com/ s a http: //www. hypersubmi t. com/
- nagyszeren pldzzk, miknt lehet zletet csinlni webhelyek bejegyzsbl
a klnbz adatbzisokba. A clkznsgnktl fggen ez a szeigitats akr
kifizetd is lehet, de mindenkppen azt ajnlannk, hogy ltogassunk el kzvetlenl
a nagyobb keresk oldalaira (a felsorolsukat lsd az ra korbbi rszben), s tltsk
ki a bejegyzsi rlapjaikat gy biztosak lehetnk benne, hogy megfelel vlaszokat
adtunk a feltett krdsekre (amelyek mindentt kicsit eltrek), s pontosan tudhatjuk,
hogy milyen alakban jelenik meg a webhelynk az egyes keresk tallati listjn.
A webhelynk felvtele a nagyobb keresk adatbzisaiba egyszer, mgis tartogathat
nhny buktatt Mindegyik keresroator mskppen jelzi, hov kell kattintanunk
az oldalaink bejegyzshez. Az albbi lista megkmlhet nmi bosszsgtl - itt megta
llhatjuk az ismertebb keresk ingyenes bejegyzsi cmt, valamint annak a hivatko
zsnak a megnevezst, amelyre a bejegyzshez kattintanunk kell:
24. ra
Segftsg a keresshez
1393
Google-Keressk fel a http: l/www. google. comladdurl/ cmet, adjuk meg

a webhelynk cmt s rvid lerst, majd rjuk be a hullmos ellenrz
szveget, vagyis a CAPTCHA-t (Completely Autamated Public Turing test to tell
Computers and Humans Apart, vagyis "teljesen automatizlt nyilvnos Turing
teszt a szmtgp s az ember megklnbztetsre"). Vgezetl kattintsunk
az Add URL (URL felvtele) gombra a webhely bejegyzshez.
Yahoo! Search- Ltogassunk el a http: ll siteexplorer. search.

yahoo. com/ submit cmre, rjuk be a webhelynk cmt, majd kattintsunk
a Submit URL (URL benyjtsa) gombra.
Bing-Keressk fel a http: //www. bing. com/docsl submit. aspx cmet, rjuk
be az ellenrz szveget, adjuk meg a webhelynk cmt, majd kattintsunk

a Submit URL gombra.
AliTheWeb-Az AliTheWeb keressi eredmnyeit a Yahoo! Search biztostja,

gy csak annyi a feladatunk, hogy a fentieknek megfelelen bejegyeztessk
a webhelynket a Yahoo! Search adatbzisba.
AltaVista-Az AltaVista keressi eredmnyeit is a Yahoo! Search adja, gy ha ott

bejegyeztetjk a webhelynket, itt is megjelenik a tallati listban.
Tippek
keresknek
El kell rulnunk egy szomor tnyt: az gvilgon semmit sem tehetnk annak rdek
ben, hogy elkel helyet biztostsunk magunknak egy kereskifejezsre adott tallati
listban, brmelyik keresrl legyen is sz (mr ha nem vsrolunk kzvetlenl hirde
tsi felletet). Vgl is rthet, hiszen ha lennnek ilyen biztostkok, mirt ne lne
velk mindenki, aki csak felkerlt a listra? Arra azonban trekedhetnk, hogy ne mi
legynk az utolsk, s ppen annyi eslynk legyen az els helyre, mint a lista tbbi
szerepljnek. Ezzel elrkeztnk a keressoptimalizls (SEO) tmakrhez-vagyis
megprbljuk gy talaktani a weboldalaink tartalmt s szerkezett, hogy a keresk
elnyben rszestsk azokat a versenytrsaikkal szemben.
Minden keres ms mdszerrel hatrozza meg, hogy mely oldalak lehetnek a legmeg
felelbbek, s eszerint helyezik azokat feljebb vagy lejjebb a tallati rangsorban.
em rdemes azonban leragadni ezeknl a klnbsgeknl, ugyanis mindannyian
ugyanazokra az alapvet szempontokra ptenek. A kvetkez felsorols szinte minden
olyan szempontot tartalmaz, amelyet a keresk figyelembe vesznek annak megllapt
snl, hogy mely oldalak felelnek meg leginkbb a kereskifejezsnek:
Megjelennek a kulcsszavak az oldal <title> elemn bell?
Megjelennek a kulcsszavak az oldal els nhny sorban?
Megjelennek a kulcsszavak az oldal egy <meta l> elemn bell?
Megjelennek a kulcsszavak az oldal <hl> cmsoraiban?
Megjelennek a kulcsszavak a weboldalon szerepl kpek nevben vagy azok

al t jellemzjben?
A webhely hny oldala hivatkozik a szban forg oldalra

Hny hivatkozs mutat az oldalunkra ms webhelyekrl? Hny tovbbi oldal
hivatkozik ezekre a hivatkoz oldalakra?
Hnyszor vlasztottk a felhasznlk az oldalt a korbbi keressek tallari

listjbl?
Egyes, tlsgosan is buzg webprogramozk egy kulcssz tbb tucat vagy akr
tbb szz pldnyt is elhelyezik egy oldalon, igen apr betvel vagy csaknem lt
hatatlan sznnel, csak hogy magasabbra helyezzk magukat a keresknek az adott
kulcsszra vonatkoz tallati rangsorban. Ezt a mdszert nevezik a keresmotorok
elrasztsnak (search engine spamming).
Akrmilyen vonznak is tnik ez a lehetsg, nem rdemes ksrtsbe esnnk,
ugyanis a komolyabb keresk ismerik ezt a trkkt, s azonnal trlnek minden olyan
oldalt az adatbzisaikbl, amelynl a "szemtjelz" bekapcsol valamilyen gyans
mintzat szerint ismtld sz vagy szvegrszlet kapcsn. Az termszetesen
megengedett (s hasznos), ha a fontosabb kulcsszavakat tbbszr is feltntetjk
az oldalunkon - a tartalom rendes rszeknt. gyeljnk azonban arra, hogy ezeket
a szavakat htkznapi mondatokban vagy kifejezsekben hasznljuk, gy megkml
hetjk magunkat a "szemtrendrsg" zaklatstL
A <meta l> elemeket mindig a <head>, valamint a <title> s a <ltitle>
elemek utn, de a zr <lhead> cmke el helyezzk.
Az XHTML szabvnyai szerint brmely dokumentumrl is legyen sz, a
<title>
elemnek az els helyen kell llnia a <head> rszben.

A helyezsnkn azzal javthatunk leginkbb, ha tgondoljuk, hogy milyen kulcsszava
kat hasznlhat a remnybeli kznsgnk a keresshez. A gyakran hasznlt, egyszavas
kereskifejezsek csatamezejrl rdemes idejekorn kihtrlnunk, hiszen egy olyan
"
keressz, mint a "tel , rendszerint annyi tallatot ad, hogy nagyobb eslynk van
nyerni a lottn, mint itt bejutni az els tz kz. sszpontostsunk inkbb a ritkbb
szavakra, valamint a kt-hrom szavas kifejezsekre, amelyek jobban illenek
"
a tmakrnkhz- gy pldul az "tel" helyett jobb vlaszts a "hzias dli telek .
Ha sszegyjtttk ezeket a kifejezseket, gondoskodjunk rla, hogy tbbszr is
felbukkanjanak az oldalunkon, a legfontosabbakat pedig helyezzk el a <title>

elemen bell, valamint az els cmsorban, illetve a bevezet bekezdsben.
A fenti listban felsorolt szempontok kzl taln a <meta 1 > elemek hasznlatt vezi
a legnagyobb homly. Vannak, akik olyan tisztelettel viseltetnek irntuk, mintha
a hasznlatuk azonnal a rangsor elejre repten az oldalaikat, msok viszont lesajnl
an nyilatkoznak rluk, feleslegesnek s haszontalannak tartva ket. Az igazsg, mint
oly sokszor, most is a kt szlssg kztt van.
24. ra
Segtsg a keresshez
(395
A <meta l> ltalnos rendeltets elem, amelyet brmely dokumentum <head>

rszben elhelyezhetnk, ha olyan adatokat szeretnnk feltntetni, amelyek a <body>
szvegben nem kapnak helyet. A legtbb keres a <meta />elemeket azrt vizsglja
meg, hogy rvid sszefoglalt kapjon az adott oldalrl, nhny fontosabb kulcsszval
egyetemben. Az automatikus cstnyroppant megrendel rlapja esetben a kvet
kez kt elemet tntethetnnk fel:
<meta name="description"
content="Order
form
for the SuperSquish cockroach
flattener."
l>
<meta name="keywords"
content="cockroach,roaches,kill,squish,supersquish"
l>
Ha eltekintnk az elz, cstnyroppants pldtl, s a keresk szakrtit krdez

zk, megtudhatjuk, hogy a
<me ta 1>elemben
elhelyezett lers idelis mrett
valahov 1 00 s 200 karakter kz helyezik, a kulcsszavak listjnak idelis hossza

pedig 200 s 400 karakter kz tehet. A szakrtk arra is felhvjk a figyelmet,
hogy nem rdemes szkzkre vesztegetnnk a drga biteket- ennek megfelelen
jrtunk el a cstnyes pldban is. Vgezetl pedig, nem rdemes ugyanazokat
a kulcsszavakat klnbz kifejezsekben nyakl nlkl ismtelgetnnk, egyes
keresknl ugyanis ez bntetst von maga utn.
Ha valamilyen rejtlyes okbl nem szeretnnk, hogy egy adott weboldal bekerljn
a keres adatbzisba, az albbi
<me ta 1>elemet
helyezhetjk el az oldal
<head>
rszben:
<meta name="robots"content="noindex,noindex"
/>
Ennek hatsra egyes keresrobotok elkerlik az oldalt. Ha komolyabb vdelmet

szeretnnk a kutakod robotok ellen, krjk meg a webkiszolglnk rendszergazdjt,
hogy helyezze el az oldal cmt a kiszolgl
robots. txt
nev fjljban. (Tudni fogja,
mit jelent ez, s hogyan kell csinlni - ha mgsem, hasznos segtsget kaphatunk
a
ht tp: 1 lwww. robotstxt. org 1
cmen.) Ez esetben biztosak lehetnk benne,
hogy a nagyobb keresk robotjai elkerlik a krdses oldalt. Ez a mdszer jl alkal

mazhat bels, cges oldalakra, amelyeket nem felttlenl szeretnnk viszontltni
a keresk tallatai kztt.
A pldban szerepl els elem biztostja, hogy a tallatok listjban megfelel lers
jelenjen meg a weboldalrL A msodik <meta />elem nmikpp elkelbb helyre lki
az oldalt minden olyan tallari rangsorban, ahol a kereskifejezsek kztt elfordult
a felsorols valamelyik eleme.
Fontos, hogy minden olyan oldal esetben, amelyet a keresk figyelmbe szeretnnk
ajnlani, tntessnk fel <meta l> elemeket a name="description" s
a name=" keywords" jellemzkkeL Ez nem felttlenl eredmnyez ugrsszer javulst
az oldalaink megtlsben, radsul egyes keresk figyelmen kvl hagyjk
a <me ta 1> elemeket - rtani azonban semmikppen sem rt.

A
keresk eredmnyeinek javtsi lehetsgeit a 24.1. pldban mutatjuk be.
24.1. p6lda
Weboldal, amely kevs nyilvnossgot kap az internetes leeresselfl sonn

<!DOCTYPE
html
PUBLIC
"-//W3C//DTD
XHTML
1.1//EN"
"http: l/www.w3.org/TR/xhtmlll/DTD/xhtmlll.dtd">
xml:lang="en">
<head>
<title>Fractal
Central</title>
</head>
<body>
<div style="text-align:center">
<img src="fractalaccent.gif" alt=" />
</div>
<div
style="width:l33px;
border-width:4px;
float:left;
padding:6px;
text-align:center;
border-style:ridge">
Discover the latest software, books and more at our online
store.<br />
<a href="orderform.html"><img
style="border-style:none"
src="orderform.gif"
alt="Order
Form"
!><la>
</div>
<div style="float:left;
padding:6px">
<h2>A Comprehensive Guide

Art and
Science
<p>What's that? You

"chaos" all
are?
to
say
you're
over the place,
How about
the<br l>
of Chaos and Complexity</h2>
quick
hearing about
but
summary
still
"fractals" and
aren't
of some
key
too
sure what they
concepts:</p>
<Ol>
<li><p>Even the
beautiful
when
simplest systems become

a
results of each
how
Nature
from
process
"iterated"
deeply
over
complex
and
the
size
of
<li><p>Most "iterated
few are
your
systems" are
a
strangely amplified to
easily
and
have
next.
the
This is
300-foot redwood tree
simulated on
controllable.
"butterfly flapping
changing tomorrow's weather
richly
using
fingernail.</p></li>
predictable
tiny influence, like
detailed
and
over,
step as the starting point of the
creates a magnificently
a seed
but only a
is
major
its
consequences
in a distant
computers,
Why?
Because
wings,"
can
such
completely
as
be
part of the
world.</p></li>
<li><p>Fractals can be magnified forever without loss of detail,
so
mathematics
them.
that
However, they
relies on straight
give
us a
dimension" which can measure
new
the
lines
concept
texture
is
useless
with
called "fractal
and
complexity
of
anything from coastlines to storm clouds.</p></li>

<li><p>While fractals
patterns pop
beautiful
up
win prizes
in every
artwork
coming
attractors" with fractal

Biologists
diagnose
at
graphics
branch
of
out
their
of
turbulence
"dynamical
science.
shows, their chaotic

Physicists
plotters.
appear
diseases"
in
when
find
"Strange
celestial mechanics.
fractal
rhythms
fall
24. ra
out of sync.
videos
Segtsg a keresshez
(397
Even pure mathematicians go on tour with dazzling
of their research.</p></li>
</ol>
<p>Think all these folks may be on to something?</p>
</div>
<a href="http://netletter.com/nonsense/"><img src="findout.gif"
alt="Find
Out More" style="border-style:none" /></a>
</div>
</body>
</html>
Ezt az oldalt elvileg igen knnyen meg kellene tallnunk, hiszen egyetlen, meglehet
sen behatrolt tmval foglalkozik, s bizonyos szakatlan tudomnyos fogalmak,
amelyek ugyanakkor a hozzrtk szmra magtl rtetden kereskifejezsek,
tbbszr is megjelennek benne. Mgis szmos olyan terletet tallhatunk a kdban,
ahol a keress eredmnyessge nvelhet.
Most pedig hasonltsuk ssze a fenti oldal kdjt a 24.2. pldban lthat mdostott
vltozattaL A kt oldal az emberi szemnek igen hasonl, a keresrobotok szmra
azonban gpzongorzni lehet a klnbsget. Az albbiakban felsoroljuk a vltoztat
sokat, bemutatva a hatsukat az indexelsre:
Fontos kereskifejezseket helyeztnk el a <title> elemben s az oldal els

cmsorban. Az eredeti oldalon mg a jractal sz sem tnt fel ebben a kt
kulcspozciban.
<meta />
elemekkel egsztettk ki a kdot, gy a keresk kzvetlenl hozzjut
hatnak az oldal lershoz s kulcsszavaihoz.
Igen beszdes alt jellemzvel egsztettk ki az els <irng />elemet. Jllehet

ezt a jellemzt nem minden keres figyeli, egyesek szmra fontos jelentssei
br.
Eltvoltottuk a tudomnyos fogalmakat krlvev idzjeleket (mint

a "fractal" s az "i t erated" esetben), mivel bizonyos keresk a
,jractaf'
s a fractal szavakat klnbznek tekintik. Az idzjeleket a &quo t; kddal

helyettestettk - a keresrobotok ezt egyszeren figyelmen kvl hagyjk.
Ez mr csak azrt is dvs lps, mert az XHTML szabvny amgy is felhv
a &quo t; kd hasznlatra az idzjelek helyett.
Ajractal kulcsszt
kt pldnyban is elhelyeztk a megrendelsi rlap terle
tn.
Lehetetlen szmokba nteni, hogy mennyivel gyakrabban tallnk meg a fraktlok s
a kosz irnt rdekldk a 24.2. plda oldalt, mint a 24.1. pldban bemutatonat-azt
azonban bizton elmondhatjuk, hogy valamicskt javtottunk a helyzeten. A robotok
ignyeit szem eltt tart talaktsok "mellkhatsaknt" - mint az oly gyakran lenni
szakott - az oldalunk az emberi szem szmra is rtelmezhetbb vlt. A keressopti
malizlson teht mindenki csak nyert.

24.2. plda
A 24 .l.
plda javtott vltozata
<?xm1 version="1.0"
encoding="UTF-8"?>
<!OOCTYPE htm1 PUBLIC "-//W3C//DTD
XHTML
1.1//EN"
<html xm1ns="http://www.w3.org/1999/xhtml"
xml:lang="en">
<head>
<title>Fracta1 Central:
A Guide to Fracta1s, Chaos,
and
-. Complexity</title>
<meta
name="description"
content="A
geometry, chaos science and

comprehensive
comp1exity
theory."
guide
to
fractal
/>
content="fractal,fractals,chaos
science,chaos
theory,fracta1 geometry,complexity,complexity theory"
/>
</head>
<body>
<div
<img src="fracta1accent.gif"
alt="Fracta1 Central:
Guide to
Fractals, Chaos, and Complexity" />

</div>
<div
style="width:133px;
border-width:4px;
float:left; padding:6px;
text-align:center;
border-sty1e:ridge">
Discover the latest
fractal software,
books and more at
<span sty1e="font-weight:bold">Fractal Central</span>
the
online
-. store.<br />
<a href="orderform.html"><img src="orderform.gif"
alt="Order
Form"
/></a>
</div>
<div
sty1e="f1oat:1eft; padding:6px">
<h2>A Comprehensive Guide

Chaos
Science,
to
Fractal
Geometry,<br />
and Complexity Theory</h2>
<p>What's that? You say you're

and "chaos" all
sure what they are?
How
hearing about
over the place,
about
quick
"fractals"
but still
summary of
aren't too
some key
concepts:</p>
<Ol>
<li><P>Even
the
simplest
beautiful
when
using the
results
This is how
systems
a process is
of
Nature
redwood tree from
become
each step
creates a
a seed the
as the
only a
Because a
inf1uence,
tiny
wings,"
can
be
few
complex
starting
magnificent1y
size
of
point
and
and
richly
over,
of the
next.
detailed 300-foot
are
easily simulated on
are predictable and

like a
over
your fingernail.</p></li>
<li><p>Most "iterated systems"

computers, but
deeply
"iterated"
controllable.
"butterfly
strangely amplified
such as completely changing tomorrow's
to
have
flapping
major
Why?
its
consequences
weather in a distant part
of the wor1d.</p></li>
<li><p>Fractals can be magnified forever without loss of detail,
so mathematics that relies on straight lines is useless with them.
However,
they
give
dimension"
us a
which
anything from coastlines

<li><P>While
fractals
patterns
up
pop
in
new
concept called
"fractal
can measure the texture

to
storm
win prizes at graphics
every
branch
and complexity of
clouds.</p></li>
of
science.
shows,
their chaotic
Physicists
find
24. ra
Segftsg a keresshez
f399
beautiful artwork coming out of their plotters. "Strange

attractors"
mechanics.
fractal
tour
rhythms
with
with
Biologists
fall
fractal turbulence
appear in celestial
diagnose "dynamical
out
dazzling videos
of sync.
of
their
Even
pure
diseases" when
mathematicians go on
research.<IP></li>
</ol>
<p>Think
all
these folks may be on to something?</p>
</div>
<a href="http://netletter.com/nonsense/"><img src="findout.gif"
alt="Find
Out More"
/></a>
</div>
</body>
</html>
A fenti mdostsok nyomn sokkal valsznbb vlt, hogy a keresk megfelelen
indexelik majd az oldalunkat. A tartalom helyes indexetse mellett persze fontos

a minsge is, valarnint az, hogy hny egyb webhely hivatkozik az oldalunkra.
A keressoptimalizls tovbbi fogsai

A legfontosabb tancs ezen a tren taln az lehet, hogy egy fillrt se adjunk olyan cgek
nek, amelyek az optimalizls terletn konkrt eredmnyekkel kecsegtetnek. Ha egy cg

azt gri, hogy a Google tallari rangsorban az els helyre tornssza fel a weboldalunkat,
azonnal fordtsunk htat, s fussunk minl messzebbre - ilyet ugyanis senki sem grhet,
hiszen a keresalgoritmusok rengeteg vltoztl fggnek, s a lista els helyezettje egyet
len ht alatt is sokszor megvltozhat. Ezzel persze nem azt akarjuk mondani, hogy a kere
ssoptimalizlssal foglalkoz cgek rnind csalk. Lteznek valban rtkes munkt vg
z tancsadk, akik segthetnek a webhelynk szerkezetnek s tartalmnak helyrepofo
zsban, de ez a pr aprcska sziget elvsz a kretlen leveleket kldzget csalk tenge
rben. me egy plda:
"Dear
I
of
google.com,
visited
the
your website
major
and
search errgines
noticed that you
are
not listed in most
and directories... "
Ez a levl (amely a google. com webhely tulajdonost rtesti arrl, hogy a webhelye
nincs bejegyezve a nagyobb keresknD a Google sajt tmutatsai kztt pldaknt
szerepel a kvetkez megjegyzssel: "a kereskkel kapcsolatos kretlen elektronikus le
veleket ugyanazzal a tartzkodssal kezeljk, mint az jszakai zsrget tablettk reklm
jait vagy az elztt dikttorok tutalsi krelm eit". Igen, nem tveds, valaki magnak
a Google-nek is kldtt nmi levlszemetet, miszerint szvesen javtan a webhely
rangjt ... a Google tallata i kztt! Tovbbi jtancsokat a h t tp: l /www. google. com/
webmasters/
cmen kaphatunk.
A kvetkezkben felsorolunk nhny ingyenesen elvgezhet lpst, amelyek segtenek
az oldalaink tartalmt a keresmotorok lelkivilghoz igaztani:
Adjunk az oldalainknak kellen pontos cmet, ami rvid, ugyanakkor beszdes
Alkalmazzunk az emberi szemnek bartsgos URL-eket, azaz pldul hasznljunk
s egyedi. Ne ksreljk meg kulcsszavakkal teletrnni a cmeket.

bennk knnyen megjegyezhet szavakat. A http: l/www.rnycompany.com/
products 1 super_widget.html s hozz hasonl cmeket egyszerbb megje
gyezni (s a keresk is knnyebben indexelik ket rtelmes mdon), mint valami

ilyesmit: http://www.mycompany.com?c=p&id=4&id=49f8sd7345fea.
Hozzunk ltre olyan URL-eket, amelyek tkrzik a webhelynk knyvtrszerke

zett. Persze ez felttelezi, hogy rendelkeznk knyvtrszerkezettel (elg nagy
baj, ha nem ez a helyzet).
Ha csak lehetsges, a navigci cljaira grafika helyett szveges elemeket alkal

mazzunk.
Ha a webhelynk tartalmnak egyes rszei tbb lpsre kerltek a kezdoldaltl,

segtsk a ltogatinkat morzsatvonalakkal, hogy knnyen visszatallhassanak
a kiindulponthoz. A morzsatvonal egyttal jabb szavakat szalgltat az indexe
lsre a keresrobotoknak gy ha egy fzssei kapcsolatos webhely Southern
Cooking kategrijban teastemnyek receptjeit nzegetjk, az aktulis oldal
morzsatvonala ilyesmi lehet: Home>Southern Cooking>Recipes>Biscuits
Az oldal tartalmban hasznljuk a rendeltetsknek megfelelen a cmsorokat
( <hl>,
<h2>, <h3>) .
Amellett teht, hogy a felhasznlk szmra gazdag s hasznos tartalmat biztostunk,

tartsuk magunkat a fenti tmutatsokhoz, gy az oldalaink egyre feljebb ksznak majd
a tallari rangsorban.
sszefoglals
Ezen az rn egy igen fontos terletre merszkedtnk - megtanultuk, miknt "sgjunk"
a keresknek (amilyen a Google, a Bing vagy a Yahoo), hogy a remnybeli ltogatink
knnyebben rakadjanak az oldalainkra. Lthattuk azt is, hogy ami tkletesen mk
dkpes HTML-kdnak tnik, hogyan optimalizlhat gy, hogy a keresrobotok is
felfedezzk a rejtett rtkeit. Vgezetl, gazdagabbak lettnk nhny tmutatssal arra
nzve, hogy miknt tegyk keresbartt a webhelynk egszt. A 24.1. tblzatban
sszefoglalst adunk az ra sorn bemutatott elemekrl s jellemzkrL
24.1. tlllat
A 24. rn bemutaton HTML-elemek s
-jeiJemz1e
Elem/Jellemz
Lers
<meta l>
A dokumentumhoz kapcsold metaadatokat tartalmaz (vagyis

olyan adatokat, amelyek magra a dokumentumra vonatkoznak).
Leggyakrabban a dokumentum lerst, valamint a jellemz
kulcsszavakat troljuk benne. A dokumentum <head> rszben
kell feltntetnnk.
24. ra
Segtsg
keresshez
1401
Jellemzk
Ezzel adhatjuk meg, hogy milyen tipus adatot trolunk
name=" nv"
a content jellemzben. gy pldul a name="keywords" arra

utal, hogy a weboldal kulcsszavait tallhatjuk meg ott.
content=" rtk"
http-equiv,
illetve a name jellemzkhz tartoz zenet vagy
rtk. gy ha a http-equiv rtke refresh, a content jellem

zben a vrakozs idejt kell feltntetnnk msodpercben, majd
egy pontosvesszt kveten a betlteni kvnt weboldal cmt.
Krdezz-felelek
K:
Valban kln rlapot kell kitltennk a webhelynk minden oldalhoz

minden egyes keresnl?
V:
Nem. Elg a kezdoldalt bejegyeztetnnk (ez felteheten kapcsolatban ll

a webhelynk tbbi oldalval), hiszen a keresrobotok gyis bejrjk az oldal
hivatkozsait (majd a hivatkozott oldal hivatkozsait, s gy tovbb), gy vgl
a webhelynk sszes lapjt indexelik.
K:
Elkldtem egy keresmotorhoz a bejegyzsi krelmet, de ha az oldalamat kere

sem, nem jelenik meg a tallati listban - mg a cg egyedi nevt berva sem.
Mit tehetek?
V:
A legtbb nagy keresmotor a rendelkezsnkre bocst egy rlapot, amelynek

a segtsgvel ellenrizhetjk, hogy a weboldalunk megtallhat-e a keres
adatbzisban. Ha nem talljuk, bekldhetnk egy jabb bejegyzsi krelmet.
Vegyk figyelembe, hogy a bejegyzs krelmezse utn gyakran napokba, st
hetekbe telik, mg a keresrobotok bejrjk a webhelynket
K:
A <met a l> elemben rdemes Jeltntetni a kulcsszavak minden rsmdjt,
V:
A kis- s nagybetkkel egyltaln ne trdjnk- a kereskifejezseket a leggyak
belertve a kis- s nagybets vltozatokat is?
rabban csupa kisbetvel adjk meg. Fontos azonban, hogy felruntessk a kulcssza
vak ismert vltozatait, st azok gyakoribb elrsait is. A <meta l> elem mkdse
egyszernek tnhet, de az rn bemutatottnl lnyegesen kifinomultabb mdsze
rek is lteznek a hasznlatra. Az elem jellemzirl s alkalmazsrl nagyszer t
jkoztatst kaphatunk a http: l l en. wikipedia. org lwiki IMeta_element cmen.
K:
Valban hasznlhatjuk a <meta l> elemet arra, hogy automatikusan jra

betltsk a weboldalunkat nhny msodpercenknt vagy pr percenknt?
V:
Igen, de ennek nincs sok rtelme, hacsak nem rendelkeznk olyan programmal
vagy parancsfjllal a webkiszolglnkon, amely friss adatokat kld az oldalunk
nak. Ha pedig gy ll a helyzet, j esllyel inkbb az AJAX lehetsgeit hasznljuk
a frissrsre (az ezzel kapcsolatos alapvet tudnivalkrl a 21. rn ejtettnk szt).
<meta l>
elem frisstsi lehetsgt hasznll1atsgi okokbl mind a W3C, mint
a felhasznJk helytelentik.
Ismtls
Ismtl krdsek
1.
Ha klykkutyk rkbefogadsrl szl oldalt tesznk kzz, mit rdemes

tennnk, hogy minden nagyobb keres tallatai kztt megjelenjen
a webhelynk, ha valaki a klyk, a kutya, illetve az rkbefogads szavakkal
hajt vgre keresst?
2.
Tegyk fel, hogy gy dntnk, a kulcsszavainkat tbb szz pldnyban

megjelentjk a HTML-kdban, mghozz fehr alapon fehr httrrel, hogy
a ltogatinknak ne tlnjn fel. Mit lpnek erre a keresrobotok?
3.
Melyik a jobb megolds: ha a webhelynk egsz tartalmt egyetlen knyvtrba

mlesztjk, vagy ha tbb knyvtrba vlogatjuk?
Vlaszok
1.
Mindenekeltt gyzdjnk meg arrl, hogy a klyk, a kutya s az rkbefoga
ds szavak kell szmban elfordulnak a kezdoldalon (ez valsznilleg gy is

van), s adjuk a weboldalunknak a Kutyaklykk rkbefogadsa nlunk! cme,
vagy valami hasonlt. Emellett helyezzk el az albbi
dal
<head>
<meta
/>elemeket az ol
rszben:
<meta name="description"
content="dog adoption information and services"
content="puppy,
dog,
/>
adoption"
/>
Tegyk kzz a weboldalunkat az Interneten, s jegyeztessk be a nagyobb

keresknl (a listt lsd a korbbiakban).
2.
A keresrobotok figyelmen kvl hagyjk az ilyen ismtldseket, st mg az is
knnyen megeshet, hogy feketelistra tesznek, s kretlen reklmterjesztnek

minstenek.
3.
Felttlenl szervezzk a tartalmat knyvtrszerkezetbe. Ez megknnyti

a webhely karbantartst, radsul gy knnyebben rtelmezhet URL-eket
hasznlhatunk, s morzsatvonalakat is ltrehozhatunk
Gyakorlatok
Elrkeztnk az utols ra vghez. Ha sszellt a webhelynk, amelyet mr

megmutatnnk a vilgnak, tekintsk t a tartalmt mg egyszer a keressopti
malizls szemszgbl, majd jegyeztessk be a nagyobb keresknL
A FGGELK
HTML- s CSS-forrsok az Interneten
Az ebben a fggelkben tallhat hivatkozsok csupn egy kis szelett jelentik annak
a szmtalan forrsnak, amelyre egy egyszer kulcsszavas keresssel rbukkanhatunk,
de ha zg a fejnk a knlattl, j kiindulpontot jelenthetnek.
,
Altalnos informcik a HTML-lel, az XHTML-Iel s

a CSS-sei kapcsolatban
The World Wide Web Consortium (W3C):
http://www.w3.org/
The W3C Markup Validation Service (lerkd-ellenrz szolgltats):

http://validator.w3.org/
W3Schools.com Web Building Tutorials (webfejlesztsi leckk):

http://www.w3schools.com/
The Web Standards Project:

http://www.webstandards.org/
The HTML Writer's Guild:

http://www.hwg.org/
The Web Developer's Virtual Library (virtulis webfejleszti knyvtr):

http://www.wdvl.com/
Webbngszk
Apple Safari:
http://www.apple.com/safari/
Google Chrome:
http://www.google.com/chrome/
Microsoft Internet Explorer:

http://www.microsoft.com/windows/ie/
Mozilla Firefox:
http://www.getfirefox.com/
Opera:
http://www.opera.com/
Weboldalak tervezse
Web Monkey:
http://webmonkey.wired.com/webmonkey/
A List Apart ("azoknak, akik webhelyeket ksztenek"):

http://www.alistapart.com/
Web Pages That Suck (borzaszt webhelyek):

http://www.webpagesthatsuck.com/
HTML Help (Web Design Group):

http://www.htmlhelp.com/
Szaftver
Adobe Creative Suite
http://www.adobe.com/products/creativesuite/
Corel PaintPro:
http://www.corel.com/
GIMP (GNU Image Manipulation Program):

http://gimp.org/
Picasa:
http://picasa.google.com/
Mapedit:
http://www.boutell.com/mapedit/
Shareware.com:
http://shareware.cnet.com/
Classic FTP:
http://www.nchsoftware.com/classic/
Cyberduck (FTP-gyflprogram):
http://cyberduck.ch/
FileZilla (FTP-gyflprogram):
http://filezilla-project.org/
A fggelk
HTML- s CSS-forrsok
az
Intemeten
f405
Sznek s grafika
Microsoft Clip Art Gallery:
http://dgl.microsoft.com/
Barry's Art Server:

http://www.barrysclipart.com/
HTML Color Picker:

http://www.pagetutor.com/pagetutor/makapage/picker/
HTML-sznkdok:
http://htmlcolorcodes.org/
Color Scheme Designer:

http://colorschemedesigner.com/
Kuler by Adobe:
http://kuler.adobe.com/
Color Blender:
http://www.meyerweb.com/eric/tools/color-blend/
Multimdia
Apple QuickTime:
http://www.apple.com/quicktime/
Windows Movie Maker:

http://www.microsoft.com/windowsxp/using/moviemaker/default.mspx
Rea!Audio:
http://www.real.com/
Adobe Flash:
http://www.adobe.com/products/flash/
Sound Central:
http://www.soundcentral.com/
MIDiworld:
http://www.midiworld.com/
Fejleszti forrsok haladknak

WebReference:
http://www.webreference.com/
JavaScript.com:
http://www.javascript.com/
Az IRT.org fejleszti forrsai:

http://www.irt.org/

Brelt webtrhely-szolgltats
Web Hosting Geeks (trhelyszolgltatk rtkelse):
http://webhostinggeeks.com/
A Small Orange (webtrhely-szolgltat):

http://asmallorange.com/hosting/shared/
Bluehost Cwebtrhely-szolgltat):
http://www.bluehost.com/tell_me_more.html
Daily Razor (webtrhely-szolgltat):

http://www.dailyrazor.com/php/promo.php
DrearnHost (webtrhely-szolgltat):
http://www.dreamhost.com/hosting.html
Just Host (webtrhely-szolgltat):

http://www.justhost.com/web-hosting
Lunar Pages (webtrhely-szolgltat):

http://www.lunarpages.com/starter-hosting/
Webhely-zemeltetsi szolgltatsok
A Google eszkzei webmesterek szmra:
http://www.google.com/webmasters/
Open Directory Project:

http://dmoz.org/about.html
Freedback.com (ingyenes rlapfeldolgoz szolgltats):

http://www.freedback.com/
B FGGELK
XHTML 1.1 s CSS 2 gyorstalpal
Az XHTML 1.1 a HTML modern, az XML-re pl vltozata, amely lehetv teszi, hogy
egyszeruben hatrozzunk s valsrsunk meg bvtseket a nyelvhez. Ebben a fgge
lkben rviden ttekintjk az XHTML 1.1-nek azokat az elemeit s jellemzit, amelyek
kel a leggyakrabban tallkozhatunk, valarnint a CSS 2 rszt kpez tulajdonsgokat.
A teljes lersokat megtallhatjuk a h t tp: l lwww. w3. org l cmen.
Annak rdekben, hogy knnyebben megtalljuk a keresett informcit, a fggelk
a HTML-elemeket a szerepk szerint csoportostja, a kvetkez sorrendben:
Szerkezeti elemek
Szvegtmbk s bekezdsek
Szvegformz elemek
Listk
Hivatkozsok
Tblzatok
Begyazott tartalom
Stlus
rlapok
Parancskctok

Az elemeket az egyes szakaszokon bell bcsorrendben soroltuk fel, s a kvetkez
informcikat mellkeltk hozzjuk:
Hasznlat- itt az elem ltalnos lersa szerepel.

Kezd- s zrcmke- itt azt adjuk meg, hogy az emltett cmkk ktelezek,
elhagyhatk vagy tiltottak-e.
Jellemzk- Itt az elem jellemzit soroljuk fel, a hatsuk rvid lersval egyetem
ben. Az egrmveletekhez kapcsold, illetve az gyfloldali parancsfjlok
meghvsra hasznlatos jellemzket nem tntetjk fel; ha ezekre a mveleti
jellemzkre is kvncsiak vagyunk, a teljes lerst megtalljuk a W3C webhelyn.
res?- itt azt jelezzk, hogy az elem lehet-e res is.

Megjegyzsek- Itt az elem hasznlatra vonatkoz, megjegyzsre rdemes
kiegszt informcikat tallunk.
A CSS-stlustulajdonsgokat hasonl formban mutatjuk be, azzal a klnbsggel, hogy

jellemzk helyett az elfogadhat rtkeket tntetjk fel.
Az XHTML 1.1 tbb olyan alapvet jellemzt is tartalmaz, amelyek szmos elemhez
kapcsoldhatnak. Ezekre a jellemzkre az egyes elemek felsorolsakor a mag-,
nyel vi, esemny- jellssei hivatkozunk. Az emltett jellemzcsoportokkal
rszletesen foglalkozunk, miutn minden XHTML-elemet bemutattunk; vagyis

az ezekbe a csoportokba tartoz konkrt jellemzknek a lerst ott talljuk meg.
Szerkezeti XHTML-elemek
Az XHTML szmos elemre tmaszkodik a dokumentumok C vagyis nem a bennk
tallhat szvegek) szerkezetnek meghatrozsban, bizonyos elemek pedig olyan
informcikat nyjtanak, amelyekre a bngszknek, illetve a keresprogramoknak
van szksgk.
Megjegyzsek < t -Hasznlat
-->
Olyan megjegyzsek vagy paraocskdok beszrsra

szolgl, amelyeket a bngsz nem jelent meg.
Kezd- s zrcmke
Ktelez/ktelez.
Jellemzk
Nincsenek.
Ures?
Igen.
Megjegyzsek
A megjegyzseknek nem muszj egysorosnak lennik; tetsz

leges hosszsgak lehetnek. A zrcmknek nem ktelez
ugyanabban a sorban lennie, mint a kezdcmknek
<!doctype .
Hasznlat
>
A vltozatinformci a HTML-dokumentum els sorban sze

repe!, s nem elemnek, hanem SGML-deklarcinak rninsl.
B fggelk
<body>
XHTML 1.1 s CSS 2 gyorstalpa16
f 409
</body>
Hasznlat
A dokumentum tartalmt foglalja magba.
Kezd- s zrcmke
Elhagyhat/elhagyhat.
Jellemzk
mag-, nyelvi, esemny-
Ures?
Nem.
Megjegyzsek
Csak egyetlen <body> elem lehet, s a <head> elem utn kell

kvetkeznie. Ha kereteket hasznlunk (lehetleg ne tegyk),
a <body> elem helyn egy <frarneset> elem llhat.
<div>
</div>
Hasznlat
A div (division, szakasz) elem a szveg blokkokba
rendezsre szolgl.
Kezd- s zrcmke
Ktelez/ktelez.
Jellemzk
Ures?
Nem.
Megjegyzsek
Nem hasznll1at p elemen bell.
Olyan HTML-weboldalakkal is tallkozhatunk, amelyek a <div> elemet az align

(igazts) nev jellemzvel egytt hasznljk. Ezt a jellemzt az XHTML-bl s a HTML
'
5-bl eltvoltottk; az igaztst ehelyett a text-align ess-stlustulajdonsg segt
sgvel ajnljk. Ezzel a stlustulajdonsggal a fggelk ksbbi rszben foglalkozunk.
<hl>...</hl>- <h6> ...</h6>
Hasznlat
A hat cmsorelemet (a hl a legfels szint vagy legfontosabb
cmsort jelzi) a trzsben (body) hasznljk az informcik

hierarchikus elrendezsre.
Kezd- s zrcmke
Ktelez/ktelez.
Jellemzk
Ures?
Nem.
Megjegyzsek
A grafikus bngszk a cmsorokat a fontossguknak
megfelel mretben jelentik meg: a <hl> a legnagyobb,

a <h6> pedig a legkisebb mret cmsort jelenti.
<head>... </head>
Hasznlat
Ez az elem a dokumentum fejlct adja meg, s olyan

elemeket tartalmaz, amelyek informcikat nyjtanak
a felhasznlknak s a keresprogramoknak
Kezd- s zrcmke
Jellemzk
nyelvi
prof ile=" url" -A
meghatroz URL.
metaadatok (meta) helyt
410

em.
Dokumentumonknt csak egyetlen
res?
Megjegyzsek
amelynek a nyit
<html>
<head>
elem utn s a
elem lehet,
<body>
elem eltt
kell llnia.
A
profile
jellemz a HTML 5-ben nem megengedett.
<hr />
Hasznlat
vzszintes elvlasztvonalak Charizantal rule) a weboldal
szakaszainak elvlasztsra szalglnak

Kezd- s zrcmke
Ktelez/tiltott.
Jellemzk
Ures?
Igen.
<html> ... </html>
elem a teljes dokumentumot magba foglalja.
Hasznlat
A html
Kezd- s zrcmke
Jellemzk
Ures?
nyelvi
Megjegyzsek
em.
vltozatinformci a
<! doctype... >
bevezetsben is
szerepel, ezrt a feltntetse itt nem ltfontossg.

<meta />
dokumentumrl nyjt informcikat
Hasznlat
Kezd- s zrcmke
Ktelez/tiltott.
Jellemzk
nyelvi
http-equiv=" kiszolglparancs" -
egy HTfP-vlasz
fejlc neve.
name=" nv" -A
metainformci neve.
content=" rtk" -A
scheme=" sma" -
metainformci tartalma.
Egy smt rendel a metaadatok
rtelmezshez.
Ures?
Igen.
scheme
jellemz a HTML 5-ben nem megengedett.
B fggelk
l 411
<span>... </span>
A dokumentumairendeziegy szovegszakasi meghatroz
Hasznlat
sval.
Kezd- s zrcmke
Ktelez/ktelez.
Jellemzk
U res?
Nem.
<title> ... </title>
A weboldalnak adott nevet (cmet) tartalmazza. A <title>
Hasznlat
elemet a <head> elemben kell elhelyezni, s a tartalma

a bngszablak cmsorban jelenik meg.
Kezd- s zrcmke
Ktelez/ktelez.
Jellemzk
nyelvi
em.
Ures?
Megjegyzs
XHTML
Egy dokumentumhoz csak egyetlen cm rendelhet.
szve gtmbk
s bekezdsek
-
A szvegtmbk (vagy blokkok) szerkezett gy alakthatjuk ki, hogy egy adott clt
szalgljanak - ltrehozhatunk pldul bekezdseket. Ez nem keverend ssze
a szveg formzsnak mdostsval.
<blockquote>... </blockquote>
Hasznlat
Hossz idzetek megjelentsre szolgl.
Kezd- s zrcmke
Ktelez/ktelez.
Jellemzk
mag-, nyelvi, esemnyc i te=" url"
Ures?
-Az idzett szveg URL-je.
Nem.
<br />
Hasznlat
Sortrst knyszert ki.
Kezd- s zrcmke
Ktelez/tiltott.
Jellemzk
Ures?
Igen.
<cite>... </cite>
Hasznlat
Hivatkozsra szolgl.
Kezd- s zrcmke
Ktelez/ktelez.
Jellemzk
Ures?
Nem.
<code>...</code>
Hasznlat
Egy megjelentend kdrszletet hatroz meg.
Kezd- s zrcmke
Ktelez/ktelez.
Jellemzk
Ures?
Nem.
<hl>
</hl>- <h6>
</h6>
Hasznlat
Szvegcmsorok meghatrozsra szolgl.
Kezd- s zrcmke
Ktelez/ktelez.
Jellemzk
Ures?
Nem.
<p>... </p>
Hasznlat
Egy bekezdst hatroz meg.
Kezd- s zrcmke
Ktelez/ell1agyhat.
Jellemzk
Ures?
Nem.
<pre>... </pre>
Hasznlat
Elre formzott szveget jelent meg.
Kezd- s zrcmke
Ktelez/ktelez.
Jellemzk
mag-, nyelvi, esemn:;r
Ures?
Nem.
<strong>... </strong>
Hasznlat
Ersebb kiemelst biztost.
Kezd- s zrcmke
Ktelez/ktelez.
Jellemzk
U res?
Nem.
<sub>... </sub>
Hasznlat
Als indexbe tett szveget jelent meg.
Kezd- s zrcmke
Ktelez/ktelez.
JellemzK
U res?
Nem.
<SUp> ... </SUp>
Hasznlat
Fels indexbe tett szveget jelent meg.
Kezd- s zrcmke
Ktelez/ktelez.
Jellemzk
Ures?
Nem.
B fggelk
f 413
Szvegformz XHTML-elemek
Ezekkel az elemekkel az ltalnos szvegjellemzk (pldul a szveg mrete, a bet
vastagsg vagy a stlus) mdosthatk, de az ajnlott mdszer a ess-stlustulajdonsgok
hasznlata. A fggelk ksbbi rszben teljes lerst tallunk a stlustulajdonsgokrl,
amelyekkel a szvegek formzsa hihetetlenl aprlkosan szablyozhat.
<b>... </b>
Hasznlat
Flkvr (bold) szveget jelent meg.
Kezd- s zrcmke
Ktelez/ktelez.
Jellemzk
Ures?
Nem.
<big> ...</big>
Hasznlat
Nagy mret szveget jelent meg.
Kezd- s zrcmke
Ktelez/ktelez.
Jellemzk
Ures?
Nem.
Ezt az elemet eltvoltottk a HTML 5-bl, mert kizrlag a megjelentsre van

hatssal, amit clszerbb CSS-kddal szablyozni.
<i>... </i>
Hasznlat
Dlt bets szveget (italic) jelert meg.
Kezd- s zrcmke
Ktelez/ktelez.
Jellemzk
U res?
Nem.
<srnall>... </srnall>
Hasznlat
Kis mret szveget jelert meg.
Kezd- s zrcmke
Ktelez/ktelez.
Jellemzk
Ures?
Nem.
<tt>... <Itt>
Hasznlat
Azonos szlessg betket (teletype vagy monospaced)

jelent meg.
Kezd- s zrcmke
Ktelez/ktelez.
Jellemzk
Ures?
Nem.
Ezt az elemet eltvoltottk a HTML 5 bl, mert kizrlag a megjelentsre van

-
hatssal, amit {;lszerbb CSS-kddal szablyozni.
XHTML-listk
Listk segtsgvel strukturltabb formban jelenthetjk meg a szvegeket. A listk
egymsba gyazhatk.
<dd> ... </dd>
Hasznlat
Egy <dl> (definition list) elemben hasznlt

meghatrozslerst ad meg.
Kezd- s zrcmke
Ktelez/elhagyhat.
Jellemzk
U res?
em.
Megjegyzsek
<dl>
Blokkszint tartalom is lehet benne (pldul egy <P> elem).
</dl>
Hasznlat
Egy meghatrozslistt (defmition list) hoz ltre.
Kezd- s zrcmke
Ktelez/ktelez.
Jellemzk
Ures?
Nem.
Megjegyzsek
Legalbb egy <dt> vagy <dd> elemet tartalmaznia kell,

teszleges sorrendben.
<dt> ... </dt>
Hasznlat
Egy <dl> (definition list) elemen bell hasznlt meghatro

zs-kifejezst (vagy cmkt) ad meg.
Kezd- s zrcmke
Ktelez/elhagyhat.
Jellemzk
Ures?
Megjegyzsek
em.
Szveget kell tartalmaznia (amely szvegformz elemekkel
mdosthat).
<li> ... <Ili>
Hasznlat
Egy listaelemet hatroz meg egy listn bell.
Kezd- s zrcmke
Ktelez/elhagyhat.
Jellemzk
Ures?
Nem.
B fggelk
XHTML
1.1 s CSS 2 gyorstalpal }415
<Ol> ... </Ol>
Hasznlat
Rendezett listt hoz ltre.
Kezd- s zrcmke
Ktelez/ktelez.
Jellemzk
Ures?
Nem.
Megjegyzsek
Legalbb egy listaelemet tartalmaznia kell.
<Ul> ... </Ul>
Hasznlat
Rendezetlen listt hoz ltre.
Kezd- s zrcmke
Ktelez/ktelez.
Jellemzk
Ures?
Nem.
Megjegyzsek
Legalbb egy listaelemet tartalmaznia kell.
XHTML-hivatkozsok
A ruperhivatkozsok alapvet szerepet tltenek be az XHTML-ben. Ezek az elemek
teszik lehetv, hogy ms dokumentumokra, az adott dokumentum ms rszeire,
illetve kls fjlokra hivatkozzunk.
<a> ... </a>
Hasznlat
Hivatkozsok s borgonyak meghatrozsra szolgl.
Kezd- s zrcmke
Ktelez/ktelez.
Jellemzk
mag-, nyelvi, esemnycharset= "kdols" -A forrs karakterkdolsa.
name " nv" -Egy horgonyt hatroz meg.

=
href="hivatkozott_url" - A hivatkozott forrs URL-je.

rel="hivatkozstpus" - Elre mutat hivatkozstpusok
rev=" hivatkozstpus" -Visszafel mutat hivatkozs
tpusok
shape=" rtk" -gyfloldali kptrkpek meghatrozst
teszi lehetv meghatrozott alakzatok (default, rect,

circle, poly, vagyis alaprtelmezett, tglalap, kr s sok
szg) hasznlatvaL
coords=" rtkek" -Az alakzat mrett lltja be kppontban
vagy szzalkos hosszsgban.

Nem.
Ures?
(Q
if
charset, name, rev, shape
megengedettek.
coords
jellemzk a HTML 5-ben nem
<base />
A dokumentum minden URL-jt az itt megadott helyhez kell
Hasznlat
viszonytani.
Kezd- s zrcmke
Ktelez/tiltott.
Jellemzk
hre f="hivatkozot t_url" -A hivatkozott forrs URL-je.
Ures?
Igen.
Megjegyzsek
A dokumentum <head> rszben kell elhelyezni.
<link/>
Hasznlat
Egy hivatkozs s egy forrs kapcsolatt hatrozza meg.
Kezd- s zrcmke
Ktelez/tiltott.
Jellemzk
mag-, nyelvi, esemnycharset=" kdols" -A forrs karakterkdolsa.
href="hivatkozott_url" - A forrs URL-je.

rel="hivatkozstpus" - Elre mutat hivatkozstpusok
rev=" hivatkozstpus" - Visszafel mutat hivatko
zstpusok.
media="megjelent" -A clkzeget hatrozza meg
(ami screen, print, projection, braille, speech vagy

all -kperny, nyomtats, vetts, Braille-rs, beszd
vagy mind -lehet).

target="hely" -Azt adja meg, hogy hol kell megjelenteni
a forrst (az rtke blank, parent, self, top- res, szl,

nmagban, fell -vagy egy felhasznl ltal megadott nv
lehet).
Ures?
Igen.
Megjegyzsek
A dokumentum <head> rszben kell elhelyezni.
charset, rev
target
jellemzk a HTML 5-ben nem megengedettek.
XHTMl-tblzatok
A tblzatok az adatok tblzatos formban trtn megjelentst szolgljk.
Az XHTML eltt a tblzatokat szles krben hasznltk oldalformzsi clokra, de
a stluslapok megjelensvel a W3C hivatalosan is nem ajnlott tette ezt a megoldst,
s ktetnk szerzi sem javasoljk az alkalmazst.
<Caption>
</caption>
Hasznlat
A tblzat crnt adja meg.
Kezd- s zrcmke
Ktelez/ktelez.
Jellemzk
Ures?
Nem.
Megjegyzsek
Elhagyhat.
B fggelk
f 417
<COl/ >
Csoportokba rendezi az egyes oszlopokat, hogy kzs
Hasznlat
jellemzrtkeket adhassunk nekik.

Kezd- s zrcmke
Ktelez/tiltott.
Jellemzk
mag-, nyelvi, esemnyspan= "oszlopszm" -A csoportban tallhat oszlopok
szma.
wid th=" szlessg" -Oszlopszlessg szzalkban,
kppontban vagy minimumrtkkel kifejezve.

align=" igazts" - A cellk tartalmt vzszintesen igaztja
(az igazts left, center, right, justify vagychar- bal

ra, kzpre, jobbra, sorkizrt vagy karakter szerinti -lehet).
char=" karakterigazts" -Egy karaktert ad meg,
amelyhez az oszlopnak igazodnia kell.

charoff= "karaktereJ tols" -A sor els igazrsi karak
terhez val eltolst hatroz meg.

valign=" fggleges_igazts" - A cellk tartalmt
fgglegesen igaztja (az igazts top, middle, bottom vagy

baseline- fellre, kzpre, alulra vagy alapvonaira -lehet).
U res?
Igen.
width, align, char, charoff
s valign jellemzket eltvoltottk
a HTML 5-bl, mert kizrlag a megjelentsre vannak hatssal, amit clszerbb

CSS-kddal szablyozni.
<colgroup> ... </colgroup>
Hasznlat
Egy oszlopcsoportot hatroz meg.
Kezd- s zrcmke
Ktelez/elhagyhat.
Jellemzk
mag-, nyelvi, esemnyspan=" oszlopszm" -A csoportban tallhat oszlopok
szma.
width=" szlessg" -Az oszlopok szlessge.
align=" igazts" -A cellk tartalmt vzszintesen igaztja
(az igazts left, center, right, justify vagychar- balra,

kzpre, jobbra, sorkizrt vagy karakter szerinti -lehet).

charoff= "karaktereJ tols" -A sor els igazrsi
karakterhez val eltolst hatroz meg.


U res?
Nem.
width, align, char, charoff

<table>... </table>
Hasznlat
Egy tblzatot hoz ltre.
Kezd- s zrcmke
Ktelez/ktelez.
Jellemzk
mag-, nyelvi, esemnywidth="szlessg" -A tblzat szlessge.

cols="oszlopszm" - Az oszlopok szma.
borderwidth="szeglyszlessg" -A tblzat krli
szegly szlessge kppontban.

frame=" keret" -A tblzat ld1at oldalait adja meg (a le
hetsges rtkek: void, above, below, hsides, lhs, rhs,

vsides, box s border, vagyis res, fell, alul, vzszintes
oldalak, bal, jobb, fggleges oldalak, doboz s szegly).

rules=" elvlasztvonalak" -A tblzat lthat
elvlasztvonalait adja meg (a lehetsges rtkek: none,

groups, rows, cols s all, vagyis nincs, csoportok,
sarok, oszlopok s minden).

cellspacing=" cellakz" -A cellk kztti tvalsgat
adja meg.
cellpadding=" cellakit lts" -A cellkon belli
trkzt adja meg.

summary=" lers" - Szveges lerst ad a tblzatrl
(pldul a fogyatkkal lk szmra).

Nem.
Ures?
width, align, border, frame, rules, cellspacing, cellpadding
summary
jellemzket eltvoltottk a HTML 5-bl, mert kizrlag a megjelentsre
vannak hatssal, amit clszerbb CSS-kddal szablyozni.

<tbody>... </tbody>
Hasznlat
A tblzat trzst hatrozza meg.
Kezd- s zrcmke
Elhagyhat/ell1agyhat.
Jellemzk
mag-, nyelvi, esemnyalign="igazts" -A cellk tartalmt vzszintesen igaztja
(az igazts left, center, right, justify vagy char- balra,

char="karakterigazts" - Egy karaktert ad meg,

charoff="karaktereltols" - A sor els igaztsi karak
B fggelk
XHTML 1.1 s CSS 2 gyorstalpa16 419

Nem.
Ures?
(Q
if
Az align, char, charoff s valign jellemzket eltvoltottk a HTML 5-bl,

mert kizrlag a megjelentsre vannak hatssal, amit clszerbb CSS-kddal
szablyozni.
<td> .. -<ltd>
Hasznlat
Egy cella tartalmt hatrozza meg.
Kezd- s zrcmke
Ktelez/elhagyhat.
Jellemzk
mag-, nyelvi, esemnyabbr="nv" -Rvid (abbreviated) nv.

axis=" tengelynevek" -A cellhoz tartoz sor- s oszlop
fejlceket adjk meg.

rowspan=" sorok_szma" -A cella ltal tfogott sarok sz
mt adja meg.
colspan=" oszlopszm" -A cella ltal tfogott oszlopok
szmt adja meg.

align=" igazts" -A cellk tartalmt vzszintesen igaztja


charoff= "karaktereltols" -A sor els igazrsi karak


baseline -fellre, kzpre, alulra vagy alapvonaira - lehet).
headers=" fejlcek" - Fejlcinformcikat ad meg
a cellhoz.
scope="hatkr"
Azt jelzi, hogy egy cella nyjt-e
fejlcinformcikat ms cellk szmra.

Ures?
Nem.
Az axis, align, char, charoff, valign s scope jellemzket eltvoltottk

<tfoot> ... </tfoot>
Hasznlat
A tblzat lblct hatrozza meg.
Kezd- s zrcmke
Ktelez/ell1agyhat.
Jellemzk
mag-, nyelvi, esemnyalign=" igazts" -A cellk tartalmt vzszintesen igaztja

char=" karakterigazts" - Egy karaktert ad meg,

charoff=" karaktere] tols" -A sor els igazrsi karak

valign=" fggleges_igazts" -A cellk tartalmt fgg
legesen igaztja (az igazts top, middle, bot tom vagy

Ures?
Nem.
Az
align, char, charoff
valign
jellemzket eltvoltottk a HTML 5-bl,

szablyozni.
<th> ... </th>
Hasznlat
A tblzatfejlc cellatartalmt hatrozza meg.
Kezd- s zrcmke
Ktelez/elhagyhat.
Jellemzk
mag-, nyelvi, esemny

axis="nv" -Rvid nv.
axes="tengelynevek" -A cellhoz tartoz sor- s oszlop
fejlceket adjk meg.

rowspan=" sarok_ szma" - Az egy cella ltal tfogott sarok
szmt adja meg.

colspan=" oszlopszm" - Az egy cella ltal tfogott oszlopok
szmt adja meg.

align=" igazts" - A cellk tartalmt vzszintesen igaztja


charoff="karaktereltols" -A sor els igazrsi karak

valign=" fggleges_igazts" -A cellk tartalmt

headers=" fejlcek" - Fejlcinfkat ad meg egy cellhoz.
scope=" hatkr" -Azt jelzi, hogy egy cella nyjt-e
fejlcinformcikat ms cellk szmra.

Ures?
Nem.
B fggelk
Az
axis, axes, align, char, charoff
( 421

<thead> ... </the ad>
Hasznlat
A tblzat fejlct hatrozza meg.
Kezd- s zrcmke
Ktelez/elhagyhat.
Jellemzk
mag-, nyelvi, esemnyalign=" igazts" - A cellk tartalmt vzszintesen igaztja


charoff= "karaktere] tols" - A sor els igazrsi
karakterhez val eltolst hatroz meg.

val ign=" fggleges_igazts" - A cellk tartalmt

Ures?
Nem.
Az
align, char, charoff
s valign jellemzket eltvoltottk a HTML 5-bl,

szablyozni.
<tr> ... </tr>
Hasznlat
Tblzatcellk egy sort hatrozza meg.
Kezd- s zrcmke
Ktelez/elhagyhat.
Jellemzk
mag-, nyelvi, esemnyalign=" igazts" - A cellk tartalmt vzszintesen igaztja


charoff=" karaktereltols" - A sor els igazrsi karak

valign=" fggleges_igazts" - A cellk tartalmt fg
glegesen igaztja (az igazts top, middle, bottom vagy

Ures?
Nem.
Az align, char, charoff s valign jellemzket eltvoltottk a HTML 5-bl,

szablyozni.
Begyazott tartalmat szablyoz XHTML-elemek

Begyazott tartalom vagy begyazs lehet kp, kptrkp, Java-kisalkalmazs,
Flash-animci s ms multimdis vagy programozott tartalom, amelyet egy
weboldalon elhelyeznk, hogy tovbbi szolgltatsokat nyjtsunk.
<area l>
Hasznlat
Az <area> elemet hivatkozsok s borgonyak meghatro

zsra hasznljk.
Kezd- s zrcmke
Jellemzk
Ktelez/tiltott.
mag-, nyelvi, esemnyshape=" rtk" - gyfloldali kptrkpek meghatrozst te
szi lehetv meghatrozott alakzatok (default, rect, circle,

poly, vagyis alaprtelmezett, tglalap, kr s sokszg) haszn
latvaL
coords=" rtkek" -Az alakzat mrett lltja be kppontban
vagy szzalkos hosszsgban.

href="hivatkozott_URL" -A hivatkozott forrs URL-je.
nohref="nohref" - Azt jelzi, hogy a terlethez nem tartozik
mvelet.
al t=" helyettest_szveg" -Helyettest szveget
jelent meg.
Ures?
Igen.
<img l>
Hasznlat
Egy kpet szr be a dokumentumba.
Kezd- s zrcmke
Ktelez/tiltott.
Jellemzk
mag-, nyelvi, esemnysrc=" forrs_URL" -A kp URL-je.

alt=" helyettst szveg" - Megjelentend helyettest
szveg.
height="magassg" -A kp magassga.
width=" szlessg" -A kp szlessge.
border=" szegly" -A szegly szlessge.
hspace=" vzszintes_trkz" - A kpet az egyb
tartalomtl elvlaszt vzszintes trkz.

vspace=" fggleges_trkz" -A kpet az egyb
tartalomtl elvlaszt fggleges trkz.

usemap=" trkp_URL- je" -Egy gyfloldali kptrkp
URL-je.
ismap=" ismap" -Egy kiszolgloldali kptrkpet azonost.
Ures?
Igen.
B fggelk
hspace
XHTML 1.1 s CSS
2 gyorstalpal (423
s vspace jellemzket eltvoltottk a HTML 5-bl, mert kizrlag
a megjelentsre vannak hatssal, amit clszerbb CSS-kddal szablyozni.
<map> ... </map>
Hasznlat
Ha az <area> elemmel egytt hasznljk, egy gyfloldali

kptrkpet hoz ltre.
Kezd- s zrcmke
Ktelez/ktelez.
Jellemzk
mag-, nyelvi, esemnyname=" nv" -A ltrehozand kptrkp neve.
Ures?
Nem.
<object> ... </object>
Hasznlat
Egy objektumot szr be.
Kezd- s zrcmke
Ktelez/ktelez.
Jellemzk
mag-, nyelvi, esemnydeclare=" declare" -Olyan jelz, amely csak bevezet egy
objektumot, de nem hozza ltre azt.

classid="objektum_URL-je" -Az objektum URL-je.
codebase=" kdalap_URL- j e" -Az egyb jellemzk ltal
meghatrozott URL-ek feloldshoz hasznland URL.

data " adatok_URL-j e" -Az objektum adatainak URL-je.
=
type=" adattp us" -Az adatok internetes adattpusa.

code type=" kdtpus" -A kd internetes adattpusa.
s tandby=" vrakozsi_zenet" - A betlts kzben
megjelentend szveg.
height= "magassg" -Az objektum magassga.
width=" szlessg" -Az objektum szlessge.
border=" szegly" - Szeglyt jelent meg az objektum krl.
hspace=" vzszintes_trkz" - Az objektum oldalai s
a weboldal egyb tartalma kztti trkz.

vspace=" fggleges_trkz" - Az objektum alja s
teteje, valamint a weboldal egyb tartalma kztti trkz.

usemap=" trkp_URL-je" - Egy kptrkp URL-je.
shapes=" shapes" -Azoknak a terleteknek a meghatro
zst teszi lehetv, ahol hiperhivatkozsokat kell keresni,

amennyiben az objektum egy kp.
name=" nv-URL" -Az URL, amelyet egy rlap rszeknt
t kell adni.
Ures?
(Q
if
em.
hspace
s vspace jellemzket eltvoltottk a HTML 5-bl, mert kizrlag
a megjelentsre vannak hatssal, amit clszerbb CSS-kddal szablyozni.
<param />
Hasznlat
Egy objektum kezdrtkeinek belltsra szolgl.
Kezd- s zrcmke
Ktelez/tiltott.
Jellemzk
name=" nv" -A paramter nevt hatrozza meg.

value=" rtk" -Az objektumparamter rtke.
valuetype=" rtktpus" -Az rtk tpust (ami data,
ref vagy obj ect -adat, hivatkozs, objektum -lehet)
hatrozza meg.
type=" tartalomtpus" -Az internetes tartalom tpusa.
Ures?
Igen.
XHTML-stflusok
A stluslapokat (mind az oldalon belli, rnind a kls stluslapokat) a <style> elemen
keresztl ptik be a HTML-dokumentumokba.
<style> ... </style>
Hasznlat
Egy bels stluslapot hoz ltre.
Kezd- s zrcmke
Ktelez/ktelez.
Jellemzk
nyelvi
type=" tartalomtpus" -Az internetes tartalomtpus.
media=" megj elent" -A clkzeget hatrozza meg (ami
screen, print, project ion, braille, speech vagy all- kp
erny, nyomtats, vetts, Braille-rs, beszd vagy mind -lehet).

tit le=" cm" -A stlus neve.
U res?
Nem.
Megjegyzsek
A <head> elemben kell elhelyezni.
XHTML-rlapok
Az rlapok olyan felletet hoznak ltre, amelyen a felhasznJk lehetsgek kzl
vlaszthatnak, informcikat adhatnak meg, illetve adatokat adhatnak vissza
a webkiszolglnak feldolgozsra.
<button>... </button>
Hasznlat
Egy gombot hoz ltre.
Kezd- s zrcmke
Ktelez/ktelez.
Jellemzk
mag-, nyelvi, esemnyname=" nv" -A gomb neve.

value=" rtk" - A gomb rtke.
type=" tpus" - A gomb tpusa (ami but ton, submit vagy
reset -ltalnos gomb, klds, alaphelyzet -lehet).
disabled=" disabled" -A gomb llapott kikapcsoltra lltja.
U res?
Nem.
B fggelk
XHTML 1.1 s CSS 2 gyorstalpal 425
<fieldset>... </fieldset>
Hasznlat
sszetartoz vezrlket foglal csoportba.
Kezd- s zrcmke
Ktelez/ktelez.
Jellemzk
mag-, nyel vi, esemny-
Ures?
Nem.
<form> ... </form>
Hasznlat
Egy rlapot hoz ltre. Olyan vezrlket tartalmaz, amelye

ken keresztl adatokat fogadhatunk a felhasznlktl.
Kezd- s zrcmke
Jellemzk
Ktelez/ktelez.
mag-, nyelvi, esemnyaction="mvelet_URL-je" - A kiszolgli mvelet URL-je.
method="post/get" -A
hasznland HTfP-fggvny.
A get elavultnak minsl.

ene type=" hordoztpus" -Az
internetes hordoztpust
(MIME) hatrozza meg.

accept=" tartalomtpusok" -A
kiszolgl ltal elfogad
hat tartalomtpusok listja.

accept-charset= "kdolsok" -A
karakterkdolsok
felsorolsa.
Ures?
Nem.
< input/ >
Hasznlat
rlapon hasznlt vezrlk meghatrozsra szaigL
Kezd- s zrcmke
Ktelez/tiltott.
Jellemzk
mag-, nyelvi, esemnytype=" vezrltpus" -A
beviteli vezrl tpusa (ami
text,
password, checkbox, radio, submit, reset, file, hidden,
vagyis szveg, jelsz, jellngyzet, vlaszt

gomb, "klds" gomb, "alaphelyzet" gomb, fjl, rejtett, kp
vagy gomb lehet).
image, but ton,
name=" nv" -A
vezrl neve (a
submit
reset
tpusok
kivtelvel ktelez a megadsa).

value=" rtk" -A
vezrl kezdrtke (a vlasztgombak
s jellngyzetek esetben kell megadni).

check ed=" checked" -A
vlasztgombokat bejellt llapotba
lltja.
disabled=" disabled"
-Letiltja a vezrlt.
szveg (text) s jelsz

( password) tpus vezrlket teszi rsvdett.
readonly=" readonly" -A
s iz e=" mret" -A
text
vezrl szlessge kppontban, illetve
password
tpusok esetben a karakterek szmban
megadva.
maxlength=" legnagyobb_hosszsg" -A
berhat karakterek szma.
legfeljebb
src=" kp_URL-j e"
-Egy kp vezrl URL-je.
alt=" helyettest_szveg"
-Helyettest szveges lers.
usemap=" trkp_URL-je" -Egy
gyfloldali kptrkp
URL-je.
accept=" fjltpu sok" -A
<label>
feltlthet fjltpusokat adja meg.
Igen.
Ures?
</label>
Hasznlat
Cmkvel lt el egy vezrlt
Kezd- s zrcmke
Ktelez/ktelez.
Jellemzk
Ures?
Nem.
for=" vezrl" -A
cmkt egy azonostott vezrlhz rendeli.
<option> ... </option>
Vlasztsi lehetsgeket hatroz meg egy <select> elemben.
Hasznlat
Kezd- s zrcmke
Ktelez/ ell1agyhat.
Jellemzk
mag-, nyelvi, esemnyselected=" selected"
-Azt adja meg, hogy az adott lehe
tsg van-e kivlasztva.

disabled=" disabled"
-Letiltja a vezrlt
label=" cmke" -Egy cmkt hatroz meg a lehetsgcso
port szmra.
value=" rtk"
<select>
-Az adott vezrlvel tadand rtk.
Nem.
Ures?
</select>
Hasznlat
Lehetsgeket hatroz meg, amelyek kzl a felhasznl

vlaszthat.
Kezd- s zrcmke
Jellemzk
Ktelez/ktelez.
name=" nv"
-Az elem neve.
size=" mret" -A sarok szmban mrt szlessg.
multiple="multiple"-Tbb elem egyidej kivlasztst

teszi lehetv.
disabled=" disabled" -Letiltja
Ures?
a vezrlt.
Nem.
<textarea> ...</textarea>
Hasznlat
Egy tbbsoros beviteli szvegmezt hoz ltre.
Kezd- s zrcmke
Ktelez/ktelez.
Jellemzk

name=" nv"
-A vezrl neve.
rows =" sorok_szma" -A
sarok szmban mrt szlessg.
B fggelk
l 427
cols="oszlopok_szma" - Az oszlopok szmban mrt
magassg.
disabled="disabled" - Letiltja a vezrlt.
readonly= "readonly" -A megjelentett szveget
rsvdett teszi.
Ures?
em.
Megjegyzsek
A megjelentend szveget a kezd- s a zrcmke kztt

kell elhelyezni.
XHTML-parancskdok
Parancskdok segtsgvel adatokat dolgozhatunk fel s ms dinamikus mveleteket
hajthatunk vgre. A parancskdokat a <script> elem segtsgvel gyazzk be
a weboldalakba, amely egyben a hasznlt parancsnyelvet QavaScript, VBScript stb.) is
meghatrozza.
<noscript> ... </noscript>
Hasznlat
Alternatv tartalmat nyjt azoknak a bngszknek,

amelyek nem kpesek vgrehajtani a parancskdokat
Ktelez/ktelez.
Kezd- s zrcmke
Jellemzk
Ures?
Nem.
<script> ... </script>
Hasznlat
A <script> elem gyfloldali parancskdokat tartalmaz,

amelyeket a bngsz hajt vgre.
Kezd- s zrcmke
Ktelez/ktelez.
Jellemzk
type="parancskdtpus" -A kdhoz hasznlt internetes
parancsnyelv.
src="parancsfjl_URL-je" - Egy kls parancsfjl URL-je.
de fer=" de fer" -Azt jelzi, hogy a parancskd nem vltoz
tatja meg a dokumentum tartalmt

Ures?
Nem.
Megjegyzsek
Az alaprtelmezett parancsnyelvet a <meta /> elemben
llthatjuk be.
,
Altalnos XHTML-jellemzk
A fentiekben a kvetkez hat magjellemzt rvidtettk mag- nven:
id="azonos t" -Globlis azonost.
class=" stlusosztlyok" -Osztlyok listja szkzkkel elvlasztva.
style=" stlusok" - Stlusinformcik.
title=" cm" -Egy adott elemrl nyjt tovbbi informcit (szemben
a <tit le> elemmel, amely a teljes weboldalnak ad cmet).
accesskey=" gyorsbillenty"
-Egy adott elem elrshez hasznlhat bil
lentyparancsot llt be.
tabindex=" tabultorsorrend"
-Egy elem helyt adja meg a tabultorsor
rendben.
A fentiekben az albbi kt nyelvi jellemzt a nyel v i rvidtssel jeleztk
-A nyelv azonostja.
lang=" nyel v"
dir=" szvegirny"
-A szveg olvassi irnya (ami ltr s rtl, vagyis balrl
jobbra vagy jobbrl balra lehet).

A kvetkez bels mveleteket (esemnyjellemzket) az esemny- sszefoglal nv
vel adtuk meg. Ha tbbet szeretnnk tudni az alkalmazsukrl a konkrt elemekben,
nzznk utna a W3C lersban:
onelick=" esemnykd"
-A mutateszkzzel (pldul egrreD egyet
kattintottak.
ondblclick=" esemnykd"
-A mutateszkzzel (pldul egrreD dupln
kattintottak.
onmousedown=" esemnykd"
-Az egrgombbal kattintottak, s lenyomva
tartjk.
onmouseup=" esemnykd"
-Az egrgombot, amellyel kattintottak, s amelyet
lenyomva tartottak, felengedtk.

-Az egrrel egy objektum fl vittk a mutatt.
onmouseover=" esemnykd"
onmousemove=" esemnykd" -Az
onmouseout=" esemnykd"
-Az egrmutatt elmozdtottk az objektum fll.
onkeypress=" esemnykd"
-Egy billentyt lenyomtak s felengedtek
onkeydown=" esemnykd"
onkeyup=" esemnykd"
egeret megmozdtottk.
-Egy billentyt lenyomtak s lenyomva tartanak.
-A billentyt, amelyet lenyomtak, felengedtek.
Mretbellt CSS-stflustulajdonsgok
A mretbellt tulajdonsgokra jnhny eSS-stlusszably tmaszkodik valamilyen
formban.
lklk nehz lenne mretezni az elemeket.
height
Hasznlat
Egy elem magassgt lltja be.
Ertkek
auto,hossz,%
line-height
Hasznlat
Elemek sora kztt lltja be a tvolsgot.
Ertkek
normal,hossz,%
max-height
Hasznlat
Egy elem lehetsges legnagyobb magassgt lltja be.
Ertkek
none, hossz,%
B fggelk
f 429
max-width
Hasznlat
Egy elem lehetsges legnagyobb szlessgt llitja be.
Ertkek
none,hossz,%
min-height
Hasznlat
Egy elem lehetsges legkisebb magassgt lltja be.
Ertkek
hossz, %
min-width
Hasznlat
Egy elem lehetsges legkisebb szlessgt lltja be.
Ertkek
hossz,%
width
Hasznlat
Egy elem szlessgt lltja be.
Hasznlat
Egy elem lehetsges legnagyobb magassgt lltja be.
Ertkek
auto,hossz,%
Szveg- s betstfius-bellt CSS-tulajdonsgok

A CSS-stlusok lelkt a szveg- s betstlus-bellt tulajdonsgok jelentik, amelyekkel
hihetetlen mrtkben szablyozhatjuk a weboldalak szvegnek megjelenst.
color
Hasznlat
A szveg sznt llitja be.
Ertkek
sz n
direction
Hasznlat
A szveg irnyt lltja be (balrl jobbra vagy jobbrl balra
halad).
Ertkek
ltr,rtl
font
Hasznlat
Gyorsrsos tulajdonsg, amely lehetv teszi, hogy minden
Ertkek
font-style,font-variant,font-weight,
bettulajdonsgot egyetlen meghatrozssal lltsunk be.

font-size/line-height, font-family
font-family
Hasznlat
Az elnyben rszestett betcsaldok neve, illetve ltalnos
betcsaldnevek egy elem szmra.

Ertkek
betcsald_neve,generic-family
font-size
Hasznlat
A betrnretet llitja be.
Ertkek
xx-srnall,x-small,small,medium,large,x-large,
xx-large,smaller,larger,hossz,%
font-style
Hasznlat
A betstlust llitja be.
Ertkek
normal,italic,oblique
font-variant
Hasznl-at
A szveget kiskapitlis vagy norml betkkel jeleniti meg.
Ertkek
normal, small-caps
font-weight
Hasznlat
A betk slyt (vastagsgt) lltja be.
Ertkek
normal,bold,bolder, lighter, 100,200,300,400,500,
600, 700, 800, 900
letter-spacing
Hasznlat
Cskkenti vagy nveli a szveg karakterei kztti trkzt.
Ertkek
normal,hossz
text-align
Hasznlat
A szveg igazitst lltja be egy elemen bell.
Ertkek
left, right,center, justify
text-decoration
Hasznlat
Valamilyen "dsztst" llt be a szvegre.
Ertkek
none,underline,overline,line-through,blink
text-indent
Hasznlat
Behzza az els szvegsort egy elemen bell.
Ertkek
hossz, %
text-transform
Hasznlat
A szveg betinek betllst szablyozza.
Ertkek
none,capitalize,uppercase, lowercase
white-space
Hasznlat
Az reshelyek kezelst lltja be egy elemen bell.
Ertk ek
normal,pre,nowrap
B fggelk
l 431
word-spacing
Hasznlat
Cskkenti vagy nveli a szavak kztti trkzket
Ertkek
normal,hossz
Httrbellt CSS-stflustulajdonsgok
Az oldalak, illetve az azokon szerepl egyes elemek htternek mdostsra tbb
ess-stlustulajdonsg is hasznlhat.
background
Hasznlat

httrtulajdonsgot egyetlen meghatrozssal lltsunk be.
Ertkek
background-color,background-image,
background-repeat, background-attachment,
background-position
background-attachment
Hasznlat
Azt adja meg, hogy a httrkp rgztett, vagy egytt grdl

az oldal tbbi rszvel.
Ertkek
scroll,fixed
background-color
Hasznlat
Egy elem httrsznt lltja be.
Ertkek
color-rgb,color-hex,color-name,transparent
background-image
Hasznlat
Httrknt egy kpet llt be.
Ertkek
url,none
background-position
Hasznlat
A httrkp kezdpozcijt lltja be.
Ertkek
top left,top center,top right,center left,center

center,center right,bottom left,bottom center,
bottom right,x-%,y-%,x-pozci,y-pozci
background-repeat
Hasznlat
Azt adja meg, hogy a httrkp ismtldik-e, s ha igen,

hogyan.
Ertkek
repeat, repeat-x,repeat-y,no-repeat
Szeglybellt CSS-stfiustulajdonsgok
Minden blokkelemnek van szeglye, amely formzhat. A szeglyeket termszetesen lt
hatatlanra is llthatjuk, de az elemek szeglyeire klnfle stlusokat is alkalmazhatunk.
border
Hasznlat
Gyorsrsos tulajdonsg, amely lehetv teszi, hogy a ngy

szegly tulajdonsgt egyetlen meghatrozssal lltsuk be.
Ertkek
border-width,border-style,border-color
border-bottom
Hasznlat
Gyorsrsos tulajdonsg, amely lehetv teszi, hogy az als

szegly tninden tulajdonsgt egyetlen meghatrozssal
lltsuk be.
Ertkek
border-bottom-width,border-style,border-color
border-bottom-color
Hasznlat
Az als szegly sznt lltja be.
Ertkek
border-color
border-bottom-style
Hasznlat
Az als szegly stlust lltja be.
Ertkek
border-style
border-bottom-width
Hasznlat
Az als szegly szlessgt lltja be.
Ertkek
thin,medium, thick,hossz
border-color
Hasznlat
A ngy szegly sznt llitja be.
Ertkek
sz n
Megjegyzsek
Egy-ngy szn megadsval llthat be.
border-left
Hasznlat
Gyorsrsos tulajdonsg, amely lehetv teszi, hogy a bal

oldali szegly minden tulajdonsgt egyetlen meghatrozssal
lltsuk be.
Ertk ek
border-left-width,border-style,border-color
border-left-color
Hasznlat
A bal oldali szegly sznt lltja be.
Ertkek
border-color
B fggelk
f433
border-left-style
Hasznlat
A bal oldali szegly stlust lltja be.
Ertkek
border-style
border-left-width
Hasznlat
A bal oldali szegly szlessgt lltja be.
Ertkek
border-right
Hasznlat
Gyorsrsos tulajdonsg, amely lehetv teszi, hogy a jobb

oldali szegly minden tulajdonsgt egyetlen meghatrozssal
lltsuk be.
Ertkek
border-right-width,border-style,border-color
border-right-color
Hasznlat
A jobb oldali szegly sznt lltja be.
Ertkek
border-color
border-right-style
Hasznlat
A jobb oldali szegly stlust lltja be.
Ertkek
border-style
border-right-width
Hasznlat
A jobb oldali szegly szlessgt lltja be.
Ertkek
thin,medium,thick,hossz
border-style
Hasznlat
Ertkek
A ngy szegly stlust lltja be.

none, hidden,dotted, dashed, solid,double,groove,
ridge, inset,outset
Megjegyzsek
Egy-ngy stlus megadsval llthat be.
border-top
Hasznlat
Gyorsrsos tulajdonsg, amely lehetv teszi, hogy a fels

szegly minden tulajdonsgt egyetlen meghatrozssal
lltsuk be.
Ertkek
border-top-width,border-style,border-color
border-top-color
Hasznlat
A fels szegly sznt lltja be.
Ertkek
border-color
border-top-style
Hasznlat
A fels szegly stlust lltja be.
Ertkek
border-style
border-top-width
Hasznlat
A fels szegly szlessgt lltja be.
Ertkek
thin, medium, thick, hossz
border-width
Hasznlat
Gyorsrsos tulajdonsg, amely lehetv teszi, hogy a ngy

szegly szlessgt egyetlen meghatrozssal lltsuk be.
Ertkek
Megjegyzsek
Egy-ngy szlessg megadsval llthat be.
Margbellt CSS-stfiustulajdonsgok
A margk lehetv teszik, hogy az elemek kls le krl (az elem szeglyn kivl)
nmi helyet hagyjunk.
m argin
Hasznlat
Ertkek
m argin-top, m argin-right,m argin-bottom,
margtulajdonsgot egyetlen meghatrozssal lltsunk be.

m argin-left
m argin-bottom
Hasznlat
Egy elem als margjt lltja be.
Ertkek
auto,hossz,%
m argin-left
Hasznlat
Egy elem bal margjt lltja be.
Ertkek
auto,hossz,%
m argin-right
Hasznlat
Egy elem jobb margjt lltja be.
Ertkek
auto,hossz,%
m argin-top
--------
Hasznlat
Egy elem fels margjt lltja be.
Ertkek
auto,hossz, %
B fggelk
XHTML 1.1 s CSS 2
gyorstalpa16f435
Kitltsbellt CSS-stOustulajdonsgok
A kitlts lehetv teszi, hogy az elemek krl (az elem szeglyn bell) nmi helyet
hagyjunk.
padding
Hasznlat

kitltsi tulajdonsgot egyetlen meghatrozssal lltsunk be.
Ertkek
padding-top,padding-right,padding-bottom,
padding-left
padding-bottom
Hasznlat
Egy elem als kitltst lltja be.
Ertkek
hossz, %
padding-left
Hasznlat
Egy elem bal oldali kitltst lltja be.
Ertkek
hossz, %
padding-right
Hasznlat
Egy elem jobb oldali kitltst lltja be.
Ertkek
hossz, %
padding-top
Hasznlat
Egy elem fels kitltst lltja be.
Ertkek
hossz, %
Elrendezsi s megjelentsi CSS-stOustulajdonsgok

A CSS-ben az elrendezsi s megjelentsi stlustulajdonsgok rendkvl fontos
szerepet jtszanak abban, hogy meghatrozzuk az elemek helyt s elrendezst
az oldalon.
bottom
Hasznlat
Az eltolst lltja be az elem als szeglye s a szlelem

als szeglye kztt.
Ertkek
auto, h o ssz , %
clear
Hasznlat
Meghatrozza egy elemnek azokat az oldalait, ahol

ms sztaton elemek nem megengedettek.
Ert kek
left,right, both, none
eli p
Hasznlat
Egy elem alakjt llitja be.
Ertkek
auto,alak
Megjegyzsek
Az elemet a bngsz megjelentskor a megadott alakra

vgja.
cursor
Hasznlat
Ertkek
A megjelentend egrmutat-tpust hatrozza meg.

url, auto,crosshair,default,pointer,move,
e-resize,ne-resize,nw-resize,n-resize,
se-resize,sw-resize,s-resize,w-resize,
text,wait,help
display
Hasznlat
Azt hatrozza meg, hogy az adott elemet meg kell-e

jelenteni, s ha igen, hogyan.
Enkek
none,inline,block,list-item, run-in, compact,

marker,table,inline-table, table-row-group,
table-header-group, table-footer-group,
table-row,table-column-group,table-column,
table-cell,table-caption
float
Hasznlat
Azt lltja be, hogy egy kp vagy szveg hol jelenjen meg
egy msik elemhez viszonytva.
Enkek
left,right,none
left
Hasznlat
Az eltolst lltja be az elem bal oldali szeglye s
Ertkek
auto,hossz, %
a szlelem bal oldali szeglye kztt.
overflow
Hasznlat
Azt hatrozza meg, hogy mi trtnjen, ha egy elem tartalma

tlcsordul a rendelkezsre ll terleten.
Ertkek
auto,visible, hidden,scroll
position
Hasznlat
Egy elem elhelyezst hatrozza meg statikus, relatv,

abszolt vagy rgztett elhelyezssel.
Enkek
static, relative,absolute, fixed
B fggelk
f437
right
A2 eltolst lltja be az elem jobb oldali szeglye s
Hasznlat
a szlelem jobb oldali szeglye kztt.

Ertkek
auto,hossz,%
top
Az eltolst lltja be az elem fels szeglye s a szlelem
Hasznlat
fels szeglye kztt.

Ertkek
auto,hossz, %
vertical-align
Hasznlat
-------
Egy elem fggleges igazrst lltja be.
Enkek
baseline,sub,super, top, text-top,middle, bottom,

text-bottom,hossz,%
visibility
---
Azt hatrozza meg, hogy egy elemnek megjelentendnek
Hasznlat
(lthatnak) vagy rejtettnek (lthatatlannak) kell lennie.

Enkek
visible,hidden,collapse
z-index
Egy elem z-sorrendbeli (a fggleges veremben elfoglalt)
Hasznlat
helyt hatrozza meg.

Ertkek
auto, szm
Lista- s felsorolsjel-bellt CSS-stflustulajdonsgok

Lehet, hogy mg nem bredtnk r, hogy mennyire rugalmasan formzhatjuk a felsoro
lsokat a CSS segtsgve!. A listkra s felsorolsjelekre tbb CSS-stlus is alkalmazhat.
list-style
Hasznlat
----

listatulajdonsgot egyetlen meghatrozssal lltsunk be.
Enkek
list-style-type, list-style-position,
list-style-image
list-style-image
Hasznlat
A lista felsorolsjeleknt egy kpet llt be.
Ertkek
none, url
list-style-position
Hasznlat
Azt adja meg, hogy hol kell elhelyezni a lista felsorolsjelt.
Ertkek
inside,outside
list-style-type
Hasznlat
A felsorols tpust lltja be.
Ertkek
none,disc,circle,square,decimal,
decimal-leading-zero,lower-roman,upper-roman,
lower-alpha,upper-alpha,lower-greek,
lower-latin,upper-latin,hebrew,armenian,
georgian,cjk-ideographic,hiragana, katakana,
hiragana-iroha,katakana-iroha
Tblzatformz CSS-stflustulajdonsgok
A haladk nhny olyan tblzattulajdonsgot is hasznlhatnak, amelyeknek a segts
gvel finomhangolhatjk a tblzatok lekpezst s megjelentst.
border-collapse
Hasznlat
Egy tblzat szeglymodelljt lltja be.
Ertkek
collapse,separate
border-spacing
Hasznlat
A szomszdos cellk szeglye kztti tvolsgot lltja be.
Ettkek
hossz hossz
caption-side
Hasznlat
A tblzatcm helyt lltja be a tblzathoz viszonytva.
Ertkek
top,bottom,left,right
empty-cells
Hasznlat
Azt hatrozza meg, hogy a lthat tartalommal

nem rendelkez cellknak legyen-e szeglye.
Ertk ek
show,hide
table-layou t
Hasznlat
A tblzat elrendezst hatrozza meg.
Ertkek
auto, fixed
Megjegyzsek
A rgztett mret tblzatok lekpezst felgyorstja

a bngszben, ha fixed-re lltjuk ket.
Trgymutat
#jel 129
<head>35
&jel 97
<hr />37
» 286
<html>34
.asp 30
<i> 87-88
.htm 30
<iframe>221
.jsp 30
<img/> 174, 178
.php 30
<input/> 363
@import 68, 337
<li>76, 266
"lapos" hivatkozsi szerkezet 383
<link />55, 336
<a href> 123, 183, 201
<map/>277
<a id> 123
<meta/>394-395, 400
<a> 120, 122, 130
<noframes>218
<area/>191
<object> 204, 206
<b>87-88
<ol>76, 266
<big>89
<option>367
<blockquote>78
<p>35
<body>34
<param> 205
<br />36
<pre> 90-91
<br>36
<script>347
<dd> 76, 266
<select>367
<div> 62, 74, 283, 304
<small>89
<dl> 76, 266
<span>65
<dr>76, 266
<src> 219
<em>88
<strike>90
<embed/> 204, 206
<strong>88
<font>87, 92
<style>64
<form>359
<sub> 89
<frame/>219
<sup> 89
<frameset>217
<table>104
<hl>38
<tel>104
440
l Tanuljuk meg a HTML s CSS hasznlatt 24 ra alatt

<textarea> 368
aura! 336
<th> 105
autoStart 205
<title> 34, 40
azonosrk 63, 353
<tr> 104
<tt> 90-91
<u> 90
<ul> 76, 266
A,
zsiai nyelv 100
B
backgrouncl 187
backgrouncl-color 59, 113, 143, 186, 267
backgrouncl-image 113, 186
a:active 133
backgrouncl-position 187
a:hover 133
backgrouncl-repeat 186
a:link 133
bal bels marg 269
a:visited 133
bal oldali sv 382
AAC 210
banner 162
ablakok megnyitsa 132
Barry's Clipan Server 155
abszolt cm 121, 129
baseline lll, 182
abszolt elhelyezs 57, 253, 256, 338
begyazott alkalmazs 205
action 359
begyazott listk 286
active 133
behzs 38, 60, 78, 385
adatfolyam 210
bejegyzs 392
Adjust Hue/Lightness/Saturation 160
bejegyzetlen vdjegy 97
Adobe 154
bejegyzett zleti vdjegy 97
Adobe Acrobat 341
bekezels 35
aktulis sor 260
bels keret 221
alhzott szveg 90
bels marg 230, 238, 251, 269, 272
alaprtelmezett rtk 74
bels stluslapok 50, 64
alaphelyzet 369
blyegkp 159, 183
align 230
betmret 55
AliTheWeb 393
betszn 93
losztly 132, 134
bettpus 92
als index 89
betvonal 182
alt 174, 177
beuvonalhoz igazts lll
AltaVista 393
beviteli elemek 360
Amazon 380
beviteli vezrl 365
analg 143
Bing 393
ancl1or 122
block 57, 253
animci 168
blog 23
Animlt GIF fjl 168
Blogger 23
Animation Shop 169
blokkelem 253
raml tartalom 210
blokkszintt elemek 72
raml vide 210
body 130
rnyals 164
bold 89
ASCII fjl 29
boider 89
tfeds 254, 258
bngsz 28
tfedsi sorrend 258
bngszbart szn 144
thzott szveg 90
border 58, 104
tvels 110, 112
boreler-color 58, 104
tvel cell 112
borcler-spacing 113
tltsz kpek 165
borcler-style 58, 104
tltszsg 164-165
borcler-width 58, 104
tmrerezs 159, 178
bot 391
attribute 120
bvthet jellnyelv 43
Trgymutat6(441
bvtmny 202
dokumentumgykr16, 19, 121
braille336
dokumentum-objektummodell352
burkol314
dokumentumtpus253
button 162
dokumentumtpus-meghatrozs217
C,Cs
dlt bet 87
DOM352
CAPTCHA393
DoPDF341
cella104
datted148
cellpadding113
double 59
cellspacing113
CGI 359
character entity97,131
DTD217
E,
Character Map100
egrmutat307
checked366
egyenl szlessg karakterek91
cm34,40
egyenlsgjel130
cmkk51
egymsba gyazott listk78, 266
cmsor 38,40
egymsba gyazott tblzatok 117
class62,73
egyoldalas megjelens 374
Classic FTP 16
egysgessg378
classid204
egysoros szvegmez 363
clear 246, 260
egyszer szvegszerkeszt 29
color 59, 92-93, 113,267
egyszer tblzat 104
Color Scheme Generator 143,151
egyszer webhely 376
Colorbiind Web Page Filter 149
egyszer weboldal 29
cols217,368
egyszint fggleges navigcis sv284
colspan 112
kezetes betk 96
content401
elektronikus levlcm 130
coords 192
elem51,122
copyright 97
elemsor242
Courier New91
elrhetetlen oldalak32
Create New Image163
elhelyezs57,253
Crop157
elnzet160
CSS49-50,132
elugr ablak132
CSS 2 51
elrendezs 314
CSS Zen Garden 231, 314
elrendezsi tulajdonsgok57
CSS- stlusok57, 292
elsdleges bettpus93
cursor: pointer 307
elsdleges navigcis elemek280
eltols254
em329
dashed 148
email address eneader131
dinamikus webhely 345
e-mail cm 131
Directory Listing Denied22
embossed336
display57
rvnyessg33,40
display: block 307
rvnyessgvizsglat41
display: none307
s jel130
display:block; 284
esemnyjellemzk303
dszts133
esemnykezels303
dithering 164
dobozmodell 250, 267
DOCTYPE 253
document 353
eszkzlers177
F
Facebook 390
document.getElementByiDO 308
fjltviteli protokoll 14
document.writeO 351
fjlkezels19
442 Tanuljuk meg a HTML s CSS hasznlatt 24 ra alatt
fjlok tvitele14
fejlc35
H
handheld 336
felbonts 155, 314
hasbak magassga 324
felhasznli mveletek 303, 353
httrkp 113, 155, 186
flkvr87
httrkp mentse155
flkvr szveg88
httrszn113, 143, 186
fels index89
beading40
felsorolsjel76, 80, 187, 267
height 58, l07, 178, 251
felsorolsjelek elhelyezse270
helper application202
fnykpek elksztse156
helyettest szveg177
Firebug42
helyi abszolt cm138
FireFfP15
helyi webhely 23
firstLeftAlign 73
hexadecimlis szntalakt 146
Flickr174, 176
hexadecimlis sznkd144 -145
float179, 230, 243, 260
hidden261, 364
folysirny260
hiperszveg 2
folykony elrendezs 316, 318
hiperszveges jellnyelv 2
folytonos szegly59
hivatkozs elektronikus levlcmre 130
font-family 60, 92
hivatkozsellenrz137
font-size60, 92 -93
hivatkozsknt hasznlt kpek 132
font-style 60, 89
hivatkozsok formzsa 132
font-weight60, 89
hivatkozsstlus 135
foldal 22
holttr 196
fordtott perjell20, 351
honlap 10, 22, 376
formzsi tulajdonsgok58
hordozfgg stluslapok 335
forrsszerkeszt23
horgony 122 -123, 129
forrpont 274
horgonyhivatkozs 122
frame 168, 213
hover133
frameborder220
hozzfrhetsg149
frameset216
href120, 123, 130
FfP14
htdocs18
FfP-gyfl14, 16
HTML 2, 42
fggleges grgets 162
HTML 5 44
fggleges igazts lll, 242
html kiterjeszts 30
fggleges ismtls186
HTML Validator 42
fggleges navigcis sv 281
HTML-cmkk31
G,Gy
HTML-elem33
get 359
HTML-jellemzk 72
Gickr 168
HTML-megjegyzs124
GIF164
HTML-tblzat103
GIMP154, 157
HTML-rlapok357
gomb369
Imp:/l 121, 126, 129

http-equiv401
Google393
Google Images174
Google Maps332
grdtsvok315
grgethet listk367
grafikai alkalmazs kivlasztsa154
grafikus szerkesztk23, 29
gyermekelem 78
gykrknyvtr 16
l,
id64, 73, 123, 219

idzetek 349
igazts 60, 110, 179, 230, 242
imagemap 188
index.htrnl 21
indexfjl 21
indexoldal 21
Trgymutat
l 443
informcihordozk 336
kiszolgloldali parancsfjlok 346
inline 57, 253, 290
kiterjesztsek 30
inline frame 221
kitlts 61, 230, 238, 251
inline style 65
kdolsi stlus 386
input 363
kdorr belli stlusok 65
inside 270-271
komplementer 143
internetszolgltat 28
krlvgs 157
rgpbet 90
ktelez cmkk 34
italic 89
kzpre igazts 74
iTunes 210
kzpre igaztott kpek 180
kzssgi hlzatok 391

kulcsszavak 391, 395
JavaScript 346
klds 369
JavaScript-kd 347
klnleges karakterek 96
Jegyzettmb 29
jellemz 34, 120
jellemzk 72
kls stluslapok 50
jellngyzet 365
lapolvas 157
JPEG 161
ltogatott hivatkozs 135
lebeg lers 298, 301

leftAJignStyle 73
kapcsos zrjel 54
lerkd 3
karakteregyed 97, 131
lenyl listk 367
karakterkd 97, 131
lenyl men 382
karaktertbla 100
levlcmgyjt programok 131
kp tmretezse 159
levlcmkdol 131
kp felbontsa 156
levlszemt 131
kp mentse 155
Lightbox 355
kp terletekre osztsa 190
lighter 89
kpek talaktsa hivatkozss 183
line-height 60
kpek fggleges igaztsa 181
link 133
kpek igaztsa 179
Link Checker 137
kpek szveges lersa 177
lista 76
kpek tmrtse 156
listaelemek 267
kpernyfelbonts 314
listaelemek megklnbztetse 283
kpkocka 168
listk 265
kppont 156
list-item 57
kpszerkeszt programok 154
list-style-image 267
kptrkp 188, 191, 272-273
list-style-position 267, 270-271
kptrkp HTML-kdja 191

kpvlts 353
krdjel 130
list-style-type 80, 267
keress 391
magassg 58, 107, 178, 251
keressoptimalizls 389, 399
mailto 130-131, 358
keresmotorok elrasztsa 394
main 314
keresrobot 391
Mapedit 190
keret 213, 250
margin 230-231, 267
keretvz 216
margin-left 96
kt pont 121
marg 230-231, 250, 272
kettskereszt 64, 123, 129, 193
ms webhelyekrl szrmaz anyagok
kzbests 4
155
kezdoldal 22, 376
Mashable 391
kijell 61
msodiagos navigci 382
444] Tanuljuk meg a HTML s CSS hasznlatt 24 ra alatt

msodiagos navigcis elemek280
onclick303 -304,353
Math.randomO 351
ondblclick303
maxlength363
onkeydown 303
media336
onkeyup303
meghatrozs-lista266
orrload303
meghatrozslistk76
onmousedown 303
megjegyzsek124,350,384
onmousemove303
mretarny159
onmouseout303,353
mrtkegysg55
onmouseover303, 353
mrtkegysgek58
onmouseup303
method359
sszefzs351
MIME-tpus205
oszloptvels112
minimlis oldalszlessg323
oszlopok103
minsg 161
oszlopszlessg llO
min-width323
osztlyazonost 204
morzsatvonal 400
outside270
mozaikos httr 166

MP3 210
MP EG 210
overflow260-261
p
padding61, 113,230,238, 267
multimdia199
padding-left 268
multimdiafjlok begyazsa204
P age not found137
multiple368
N,
parancsfjlok346
Ny
PDF 341
nagyobb webhely380
perjel120
name jellemz123
PHP 358
navigcis listk280
pixel156
negatv behzs275
plug-in202
npszersts390
pluszjel351
nv-rtk prok364
PNG 165
nevestett szn143
pont55
nvvel elltott horgony123
pontosvessz55,89
none57
pop-up window132
no-repeat186
position254,300
nonnal89
position: relative 321
Notepad29
post359
nyelv 34
print 336
nyitcmke33
projection 336
nyomatkosts88
protokoll121
nyomgomb162
pt55
nyomtatsi elnzet 341

nyomtatsra sznt oldalak 334
nyomtatbart stluslap337
public_htmJ 18
Q
Quality161
nyomtatbart weboldal331
O,
oblique89
Office Online Clip Art and Media155
oldalhelyek megjellse123
oldalon belli hivatkozs122
oldalszerkezet35
oldalvz 34
olvashatsg148
QuickTime203
R
radio367
Red Eye Removal160
refresh401
region190
rejtett adatok364
rejtett beviteli elem364
reklmcsk162
Trgymutat
reklmozs 390
stluslapok 49-50
relatv cm 120-121
stlusosztlyok 61
relatv elhelyezs 57, 253
stlusszablyok 50, 55
rendezetlen lista 76, 266
stlustulajdonsg 61
rendezett lista 76, 266
stlustulajdonsgok 50, 57
repeat-x 186
style 73
repeat-y 186
styles.css 55
Reset 369
subject 130
Reset Color 160
submit 359, 369
rtegek 165
szjhagyomny 390
robots.txt 395
szmozs 351
rgztett elrendezs 314
szegly 58, 104, 250
rgztett szlessg oldalak 315
szlessg 58, 107, 178, 251
rgztett-folykony kevert elrendezs
szemtjelz 394
319, 324
l 445
szn visszalltsa 160
rows 217, 368
szinek szma 164
rowspan 112
sznelmlet 142
sznkerk 142
rugalmas elrendezs 329
S,Sz
sznkorrekci 160
sznmlysg 155
Salesforce.com 358
sznsszellts 147
sans-serif 93
szinsszetevk 146
Save as JPEG 161
sznpaletts kpek 165
Save BackgroundAs 155
sznsma-genertor 143
Save ImageAs 155
sznsmk 143
Save PictureAs 155
szntvesztk 149
Scale Image 159
sznvlaszts 142
screen 336
szgletes zrjel 365
scroll 261
szkzket tartalmaz fjlnevek 137
scrolling 220
szveg behzsa 78
search engine spamming 394
szveg formzsa 37
segdalkalmazs 202
Szveg igaztsa 72
select 363
szvegbekezds 35
selected 368
szveges adatok 363
selector 61
szvegformzs 87, 89
SEO 389, 393
szvegkzi keret 221
shape 192
szvegmez 363
size 363
szvegszerkeszt 14, 29
solid 59, 148
szlelem 78, 267
sortvels 112
sorkizrt 84
sormagassg 60
szlknyvtr 121
T, Ty
sorok 103
tblzat 103
soron belli elem 253
tblzat httrkpe 113
sortrs 35
tblzatcm 105
spanning 112
tblzatok szeglye 104
speech 336
tblzatos elrendezs 113
src 174, 353
tag 31, 122
Starbucks 381
tagols 38
stlusazonosrk 64
tallari rangsor 393
stluslap ltrehozsa 52
talpas bettpusok 334
stluslapfjl 50
target 132, 219
446' Tanuljuk meg a HTML s CSS hasznlatt 24 ra alatt

trgy 131
trhelyszolgltats 29
v
vlaszt 61
trolelem 35
vlasztgomb 367
tartalom 251
vlasztlistk 367
tartalom elrejtse 304
vltakoz szn sorok 118
tartalomjegyzk 375
vltoz szlessg 219
tartomnynv 129
valu e 367, 369
teljes cm 129
VBScript 347
teljes magassg 252
vletlenszer tartalom 349
teljes szlessg 252
vertical-align 110, 181, 242
terlet 190
visible 261
text-align 60, 74, 110, 179, 242
visited 133
textarea 363
viszonytott cm 120
text-decoration 61
vzszintes grgets 162
TextEdit 29
vzszintes igazts 179
text-indent 60
vzszintes ismtls 186
The World's Worst Website 144
vzszintes navigcis sv 290
this 308
vzszintes vonal 37
title 40, 175, 178, 298

tbb szkz 106
tbbsoros szvegmez 368
vrsszem-hats 160
w
W3C Markup Validation Service 41
tbbszint fggleges navigcis sv 286
webcmek 120
tbbszint lista 80
webes tartalom 3
tbbszint stluslapok 49
webgazda 6
tmb 349
webhely 10
tmrts 156, 161
webnapl 23
tooltip 177, 298
weboldailO
trzs 35
websznek 143
Transparency 164
width 58, 107, 178, 251
triadikus 143
Windows Media Player 204
tty 336
W MV 205
tlfolys 260
tv
WordPress 23, 314
336
World Wide Web 2
Twitter 390
type 363
U,
wrapper 314
x
XHTML 3, 31, 44
gyfloldali parancsfjlok 346
XHTML 1.1 33
uiMode 205
XML 43
j ablak megnyitsa 132
xml:lang 34
j kp ltrehozsa 163
res cmke 34
res elemek 34, 36
xmlns 34
rlap ltrehozsa 359
Yahoo! Search 393
rlapadatok elkldse 369
YouTube 208
rlapelemek elnevezse 364

rlapgomb 359
rlapkezel rendszer 358
rlapok 357
usemap 192
sztats 179, 230, 243, 246
Z, Zs
zrcmke 33
z-index 254, 258, 300

Tanuljuk Meg A HTML Es A CSS Programozasi Nyelvet 24 Óra Alatt

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Tanuljuk Meg A HTML Es A CSS Programozasi Nyelvet 24 Óra Alatt

Uploaded by

Copyright:

Available Formats

julie C.

Tanuljuk meg a HTML s a CSS

A fordts a kvetkez angol eredeti alapjn kszlt:

0672330970, by MELONI, JULIE C.; MORRJSON,

MICHAEL, published by Pearson Education, Inc., publisbing as SAMS Publishing.

Sorozatszerkeszt: Szy Gyrgy

1134 Budapest, Csng u. 8.

ISBN: 978 963 9637 78 8

A HTML s a Vilghl rvid trtnete

A webes tartalmak kzbestsnek mdja

Tesztels tbb webbngszben

A webes tartalom kzzttele

Fjlok tvitele az FTP segtsgve!

A tartalom kzzttele webkiszolgl nlkl

Az egyszer weboldalak ksztsnek alapjai

Az XHTML-oldalakon ktelezen felhasznland HTML-elemek

A webes tartalom rvnyessgnek vizsglata

tmutat a szabvnyok dzsungelhez

Egyszer stluslap ltrehozsa

A CSS-stlusok hasznlatnak alapjai

Bels sluslapok s kdon belli stlusok

HTML, XML, XHTML s HTML

Szveg igaztsa az oldalon bell

iv Tanuljuk meg a HTML s a CSS hasznlatt 24 ra alatt

Flkvr, dlt s egyb betalakok

Klnleges karakterek hasznlata

Tblzat mretnek belltsa

Tartalom igaztsa s tvelse a tblzaton bell

Hivatkozsok a sajt oldalaink kztt

Hivatkozsok formzsa eSS-stlusokkal

A httr, a szveg s a szeglyek sznnek belltsa eSS-kdokkal

Amit a grafildrl mindenkpp tudnunk kell

Reklmcskok s nyomgombak ksztse

Hogyan cskkenthet a sznek szma egy kpen?

Mozaikos httr kialaktsa

Animcit tartalmaz webes grafika ksztse

Kpek ksztse webes hasznlatra

A grafikai alkalmazs kivlasztsa

Kpek hasznlata a webhelyen

Kpek elhelyezse egy weboldalon

A kp szlessgnek s magassgnak megadsa

Hivatkozs megnyitsa j bngszablakban

Oldalon belli hivatkozsok horgonyokkaL

Kls s bels hivatkozsok hasznlata

Informcik megjelentsa tblzatok segtsgvel

Egyszer tblzat ltrehozsa

Tanuljuk meg a HTML s a CSS hasznlatt 24 ra alatt

Kpek talaktsa hivatkozss

Bels keretek hasznlata

Az elemek bels margja

A float tulajdonsg . ...

A szveg folysirnynak szablyozsa...

Ismtls - a HTML listi .

Kptrkpek ksztse listaelemek s CSS hasznlatval

Szemrevalbb listk s egyebek - a CSS hasznlatval

A CSS-dobozmodell hatsa a lisrkra

Az egyms tetejre kerl elemek elhelyezkedsnek szablyozsa

A kls s a bels marg,

Hivatkozsok keretek s ablakok kztt

Mik azok a keretek?

Tovbbi tletek a multimdia hasznlathoz

Fggleges navigcis sv ksztse CSS-kd segtsgvel

Vzszintes navigcis sv ksztse CSS-kd segtsgve!. ..