Professional Documents
Culture Documents
HTML Css 24ora Alatt PDF
HTML Css 24ora Alatt PDF
Meloni
Michael Morrison
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
Tartalomjegyzk
1. ra
A Web mkdse
2. ra
Az ra pldafjljnak elksztse
13
3. ra
A HTML s
az
XHTML alapjai
27
4. ra
5
.
Stlusazonosrk hasznlata
A stOuslapok vilga
A CSS mkdse
5. ra
13
14
18
22
24
25
Szvegblokkok s listk
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
6. ra
Betformzs
7. ra
119
120
122
126
129
13 0
132
132
136
A sznek hasznlata
A sznvlaszts fogsai
Websznek
Hexadecimlis sznkdok
141
142
143
145
147
149
87
88
92
96
99
103
104
107
110
113
114
11. ra
1 O. ra
Webcmek hasznlata
9. ra
8. ra
153
154
155
156
162
164
165
166
168
168
173
174
177
178
Kpek igaztsa
Httrkpek hasznlata.
Kptrkpek ksztse
sszefoglals
12. ra
. ... .. . .
Keretvz kialaktsa
. .
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
. .
. . . . . .
.
. .... .. . .
.
. .
.
.. .
.
. .
.
..
. . 250
.
. 253
A felsorolsjelek elhelyezse
..
..
.
.
..
...
261
265
258
. 260
186
17. ra
179
183
az
.
..
az
A CSS dobozmodellje s
.
. ..
A CSS dobozmodellje
213
.
Margk hasznlata
16. ra
. .
199
Keretek hasznlata
15. ra
Multimdia a webhelyen
sszefoglals.
14. ra
Multimdiafjlok begyazsa
Hivatkozs multimdiafjlokra
13. ra
.
.
. . . 266
.
. 272
. 276
279
.
.. .
.
..
.. . .
.
267
.. . 270
sszefoglals
lv
. .
. .
.
280
281
290
. .. 294
.
vi
18. ra
Szvegmdosts egrrnveletekkel
297
.
19. ra
301
303
31O
313
314
316
319
329
331
332
335
337
sszefoglals
346
347
345
349
352
353
355
Webes rlapok
.
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
. . .
374
376
341
342
Dinamikus webhelyek
23. ra
22. ra
sszefoglals
21. ra
Folykony elrendezsek
Rgztett elrendezsek
20. ra
298
380
383
386
389
Segtsg a keresshez
A webhelynk npszerstse
sszefoglals
A fggelk
az
Intemeten
403
Weboldalak tervezse
Szaftver
Sznek s grafika
Multimdia
403
404
404
404
405
405
406
406
406
Szerkezeti XHTML-elemek
XHTML-szvegtmbk s -bekezdsek
Szvegformz XHTML-elemek
.
XHTML-hivatkozsok
XHTML-tblzatok.
XHTML-stlusok
XHTML-rlapok
407
XHTML-parancskdok
ltalnos XHTML-jellemzk
Mretbellt eSS-stlustulajdonsgok
Szeglybellt esS-stlustulajdonsgok
Margbellt CSS-stlustulajdonsgok
Kitltsbellt eSS-stlustulajdonsgok
Trgymutat
Webhely-zemeltetsi szolgltatsok
Brelt webtrhely-szolgltats
XHTML-listk
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
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:
Vizulis pldk
A ktet minden pldjt ktfle szemszgbl mutatjuk be:
Klnleges elemek
A leckk sorn klnfle szljegyzetek segtenek, hogy a tanultakat rgtn alkalmaz
hassuk is a sajt weboldalainkra:
fel a figyelmet.
xii
1. RA
A Web mkdse
A lecke tartalma:
A HTML s
1. ra
A Web mkdse
la
A webbngsztl a kiszolglhoz
intzett krelem
1.1. bra
A kiszolgltl
a webbngsznek kldtt 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
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
liD 1
A Web mllkdse
Js
.Q_]
1 Searchsenmos l Stmill
____",
1.2. bra
e2009 f:!!l!6r
Done
3.
+'
A www.google.com
weboldala
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.
6.
7.
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.
Svszlessg
1. ra
A Web mllkdse
(7
A Small Orange
(http:
l lwww.
DailyRazor
(http:
l lwww. dailyrazor.
LunarPages
(http:
l lwww. l unarpages.
1.3. brn
l3 l
,fil
cPanel
)(.
Welcome thkkbook.com'
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
1. ra
A Web mkdse
fg
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
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.
Z.
3.
Vlaszok
1.
Z.
3.
Gyakorlatok
2. RA
A webes tartalom kzzttele
A lecke tartalma:
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>
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
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:
2. ra
115
FTP-gyfl kivlasztsa
Az
.. l
C!'
loo"
C:\l/Rn\JM\0--;;top
Size Date
Name
1 e
)trowse
Typ<
"'
Name
[:)SMl9_ENGl403
Jun 18 6:25 HO
Wwp
Owsu_worlcing
l KB Aug 5 2008
Ink
#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
, ; public_html
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...
NDOP
200 Zzz.
bra
FireFIP
fellete
2.1.
A
.ogiQu..,.
Aut o
--
-='
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
Mac-re
minden rendszerre
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.
2.
4.
2. ra
]'V
ll
,.,
dp
"""'
FTP Servs
U..Nane
r-
"""""""
.......
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
....
,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
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 ..
----"
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
09
- !MI 3'5
09 58
1211
100021
1000.28
Conl"adlngiO.......---IhiO!boot
eonn.c&l!i
dhdl:Wy
""""""OK
Ct>ngong
2.3. bra
Sikeres kapcsolds egy tvoli webkiszolglhoz a Classic FTP segtsgvel
J17
www
www
knyvtrat is ltrehoztk
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.
7.
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
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/
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 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?
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
: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
2.5. bra
Egy j szakasz-indexoldal
Il
PAitTHERS
solutions
http://www.ipass.com/solutions/
http://www.ipass.com/solutions/index.html
Ha a
solutions
knyvtrban nincs
index. html
doldalnak, foldalnak, honlapnak, vagy ahogy rni nevezzk azt a webes tartalmat,
amelyet elszr szeretnnk a tartomnyunkat megltogat felhasznJk el trni az
index. html
kldje el nekik, amit szerennk volna (nem pedig a Directory Listing Denied zenetet
vagy ms nemkvnatos tartalmat).
2. ra
f23
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.
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.
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
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:
K:
V:
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.
2.
3.
Vlaszok
1.
2.
3.
Gyakorlatok
3. RA
A HTML s
az XHTML alapjai
A lecke tartalma:
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.
2.
4.
3. ra
f29
rnl
2.
3.1. plda
<?xml version="l.O"
<! OOCTYPE html
encoding="UTF-8"?>
PUBLIC
"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
felsznn,
s Tim
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 a szveget
</p>
</body>
</html>
c:w:w
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
Done
1.1
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.
2.
3.
4.
5.
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
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.
version="1.0"
encoding="UTF-8"?>
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.
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.
3.1. plda
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. pldt). A
elejn elhelyezve egyszeren arra utalhatunk, hogy itt egy weboldalrl van sz, amely
a </htrnl> cmkvel r vget.
3. ra
A HTML s
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
<head>
<html>
elem
cmke utn.
A cmet azonost <title> cmkepr az oldal fejlcn bell jelenik meg, vagyis a nyit
<head>
s a zr
</head>
ismerkednk, amelyek a
<head>
s a
< /head>
pldul a stlusszablyok.)
A
3.1. pldban felbukkan <P> elem egy szvegbekezdsre utal. Fontos, hogy amennyi
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
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
put his
If
picture
he still
add a
</p>
<hr />
in
should prove
picture
of
mad,
the ad.
his
refractory,
factory.
36
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>
<::l
@IW:W
1----
ourdog.html
+
...-.--"'
Wbeo y=cli<nt's boppingmad. puthis picturein Ibe ad. If be still shooldprove rcfractory. add
picture
ofhis factory.
i'
Done
3.2. bra
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,
<br
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
tt :
,
nll feladat
Szveg formzsa HTML-kddal
4.
Alkalmazzuk a <br 1 > elemet, ahol csak egyszeres sorkz sortrst szeretnnk.
5.
6.
Mentsk lemezre a fjlt mypage. html nven (a mypage helyett neknk tetsz
nagyobb rszeit.
nevet adva neki).
7.
8.
rszlet a
<hl>
jelenik meg. A
s a
</hl>
<h2>
s 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>
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
Ne feledjk, hogy amit a weboldal fejlcben helyeznk el, azt nem megjelentsre
sznjuk, viszont minden, ami a weboldal trzsben ll, megjelenik a bngszablakban.
3. ra
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
l=
liil
ll
&\!
W3C.
Validate by URl
of et ocu'lle'1t
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
W3C.
'"
..1.
!"""!'L
Jump To:
...
Congratulattons
lcons
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
s HTML 5 - tmutat
a szabvnyok dzsungelhez
3. ra
f43
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>
<head>... </head>
<title>...</title>
<br />
Sortrs.
<hr />
Vzszintes vonal.
<hl>...</hl>
<h2>...</h2>
<h3>...</h3>
<h4>...</h4>
<h5>...</h5>
<h6>...</h6>
Krdezz-felelek
K:
V:
html vagy a
h tm kiterjesz
tst kapta.)
K:
V:
Ismtl krdsek
1.
2.
3.
Vlaszok
1.
2.
</head>, </title>
<h3>We are
<hr
s </body> zrcmkkkel).
Proud to
Present</h3>
/>
<h1>0rbit</h1>
<h2>The Geometric
Juggler</h2>
<hr l>
3.
PUBLIC
"-l/W3C/ /DTD
XHTML
1.1//EN"
"http://www.w3.org/TR/xhtmlll/DTD/xhtmlll.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="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.
RA
A stluslapok vilga
A lecke tartalma:
50
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
4. ra
A stfluslapok vilga
fs1
text is blue.c/p>
is still green.c/p>
e/div>
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>
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/
cslt segttrsunkk.
sz
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 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.
- c
About BAWSI
2005
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
4. ra
A stfluslapok vilga
,@1
-------
file:///C:/Usen/JM/Document:s/wms_htmlcui04/ReondjMightml
an
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]
..,
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
{
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.
chead>
rszkben egy-egy
<link
type="text/css"
<link
/>elemet talljuk
href="styles.css"
styles. c ss
/>
4.2. plda
c?xrnl
version="l.O"
c!DOCTYPE html
encoding="UTF-8"?>
PUBLIC
"-//W3C//DTD
XHTML
1.1//EN"
"http://www.w3.org/TR/xhtmlll/DTD/xhtmlll.dtd">
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
is
mission
bring
prograros
health,
nonprofit
and
hope
partnerships
and
wholeness
to
of the
team,
create
San
BAWSI
Jose
CyberRays
provides
women's
the most
©
2005-2009 BAWSI
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
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:
display
in - hvelyk
centimter
ern-
rnrn-
rnillimter
px
kppont
pt- pont
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:
4. ra
A stnuslapok vilga
lsg
solid-
Egyvonalas szegly.
double-
dashed-
dot ted-
Pontozott szegly.
groove-
Bemetszett szegly.
ridge-
Peremes szegly.
inset-
ou tset-
none
-Nincs szegly.
border-style
<a>
none
ll. Ilyenkor automatikusan folytonos szeglyt kapunk. Ez az oka annak, hogy olyan
gyakran tallkozunk a hivatkozsokban szerepi kpeknl a
border-style: none
font-family-
font-size-
A bettpus csaldja.
A betmret.
A betstlus ( normal vagy italic ) .
font-style-
font-weight-
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;
font-
stlusokkaL
line-height-
color-
4. ra
A stfluslapok vilga
Ist
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;
hl.serious
font:
font:
36pt Arial;
hl
class="silly">Marvin's Munchies
<p>Text
about
Marvin's Munchies
Inc.
goes
</hl>
here.
</p>
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.
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>
<div>
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;
class="footer">
4. ra
A stluslapok vilga
}63
{ font-size:
9pt;
font-size:9pt;
font-style:
italic;
line-height:l2pt;
text-align: center;
padding-top:
30pt;
nll feladat
Osztlyok hozzadsa egy stfluslaphoz
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.
{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:
A nyit s a zr
<p>
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.
<head>
<style>
s a
</style>
4.3. plda
<?xml version="l.O"
<!DOCTYPE
html
encoding="UTF-8"?>
PUBLIC "-//W3C//DTD
XHTML
1.1//EN"
"http://www.w3.org/TR/xhtmlll/DTD/xhtmlll.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
<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
<span>
s a
< / span>
<span>
style
<div>
<span>
egy foly szveg rszlett szeretnnk egyedi mdon formzni anlkl, hogy
sortrst alkalmaznnk, a
<span>
h ttp:
<div>
vagy a
<span>
style
jellemz
jket. Azrt beszlnk kdon belli stlusokrl, mert a meghatrozsuk ezttal a HTML
kd belsejben tallhat.
ss
Lssuk most a
<P
style
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,
to
the
default
color
page.
</p>
A fenti pldban lthatjuk, hogyan hasznlhatjuk a cspan> elemet arra, hogy egy kdon
color
<P>,
mind a
cspan>
color:red
color
stlus fellrja a
cspan>
s a
color: green
c/span>
cmkk
belltst. A msodik
"
W3C
Jump to:
.. , .11
:;::: le, e . 1
Validated ess
<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
Elem/jellemzk
Lers
<style>-.</style>
Jellemz
type=" tartalomtpus"
mindig "text/ess") .
<link/>
Jellemz
href="url"
A stluslap cme.
type=" tartalomtpus"
rel="stylesheet"
<span>...</span>
ez mindig "text/ess"}
"stylesheet".)
(A
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:
<style>
s a
</style>
V:
<link
/>elemmel. A CSS
<link
url(stylesl.css);
@import
url(styles2.css);
@import
utastst:
Ismtls
Ez a rsz ismtl krdsekbl s vlaszokbl ll, amelyek segtsgvel megszilrdthatjuk
az ebben a leckben szerzett tudsunkat. Prbljuk megvlaszolni a krdseket a vla
szok ellenrzse eltt.
4. ra
Ismtl krdsek
1.
2.
3.
intro. html
corporate. ess
nven
nev weboldalra?
Vlaszok
1.
body
2.
font:
{
30pt
font:
blue Arial;
lOpt blue;
}
intro.
htmldokumentum
<head>
<lhead>
crnki kz:
<link rel="stylesheet" type="textlcss"
3.
href="corporate.css"
l>
Gyakorlatok
5. RA
Szvegblokkok s listk
A lecke tartalma:
Listk a listkban
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.
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
5. ra
'
Szvegblokkok s listk 73
<P>
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>
STYLE=TEXT-ALIGN:CENTER>
style
style="text-align:center">
74
kdot.
5.1.
plda
--------
encoding="UTF-8"?>
XHTML
1.1//EN"
"http://www.w3.org/TR/xhtmlll/DTD/xhtmlll.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Bohe mia</title>
</head>
<body>
<div
style="text-align:center">
<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
style="text-align:center">
Playwrights
Start
off
Diarists,
Never
and
from
poets
and
anywhere,
such
end
horses'
up
at
neckscbr
sex.cbr
critics,
and
similar
say nothing,
and
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>
-@-
http'.//www.yourdomain.com/bohemia.html
-
.. l
Bohemia
by Dorothy Padcer
Autbors and actocs and artists and such
Don<
5.1. bra
pldban hasznlt szvegigaztsok eredmnye
Az 5.1.
elem hatsra kerl kzpre. Mindazonltal a edi v> elemen belli egyes bekezdsek
szvegigaztsa fellbrlja ezt a belltst.
(!
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.
5.2. bra
A HTML-listk hrom
alaptpusa
5. ra
5.2. plda
Szvegblokkok s listk
}77
<?xml version="l.O"
encoding="UTF-8"?>
XHTML
1.1//EN"
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>
make a
lady
<li>When
stand
walking,
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>
children,
and siblings.</dd>
<dt>Your Highness</dt>
<dd>To
nephews,
nieces,
and cousins
of the sovereign.</dd>
</dl>
</body>
</html>
5.3. plda
1.1//EN"
"http://www.w3.org/TR/xhtmlll/DTD/xhtmlll.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="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
Szvegblokkok s listk
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
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
type: eirele">,
illetve az
>,az
<ul>
cmke
cmkt hasznl
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
style="list-style-type:circle">
<li>extra</li>
<li>super</li>
<li
style="list-style-type:square">special</li>
</Ul>
list-style-type
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
<li>
stlusszablyt csak az
<ol>
cmkben hasznljuk,
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
hasznillatval
<?xml version="1.0"
<!DOCTYPE
html
encoding="UTF-8"?>
xml:1ang="en">
<head>
<title>Advice
Guru</title>
</head>
<body>
<h1>How to Win at Go1f</h1>
<ol
list-style
style="list-style-type:upper-roman">
stvle iellemz
5. ra
Szvegblokkok s listk
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
</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
<Ol style="list-style-type:upper-alpha">
<li>Avoid
junk food
<ol style="list-style-type:lower-alpha">
<li>No
hotdogs</li>
</ol>
<!li>
<li>Drink wine
no beer</li>
</Ol>
</li>
</ol>
</li>
<li>Pre-game
<Ol>
<li>Dress
<Ol style="list-style-type:upper-alpha">
<li>Put on shorts,
<li>Buy a
</Ol>
<!li>
<li>Location and Scheduling
<ol style="list-style-type:upper-alpha">
<li>Select
'- find
<li>To
you<!li>
save on fees,
</Ol>
</li>
<li>Opponent
<Ol style="list-style-type:upper-alpha">
<li>Look for: overconfidence,
inexperience</li>
<Ol>
<li>Tee off first,
"fore"
just
<li>Always replace
before
good time to
in ball
placement</li>
</ol>
<Ili>
</Ol>
</body>
</html>
=i@J-
li
'
""_-hrt,.,-:/
-- 't_O u""C
nlom
-
a in.coml::_m:::u:::ltru=""'-=html=-----+.;__
T..;.;"g
l. :\oi..Wprcp
A. W211ch golf oa TV re&g;cusly
B. Get tbaJ: cOillper game \\il:h T.ger \\'hatsiscame
Equipmeru
No hotdogs
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
3. ()ppoo<ot
A. Look fu<: m-.rcoo!idmce,
B.
opponent<!li>
i.
UL O. the Course
l. Tee offfirst. c:kvdop se\'ere hayfe\er
2. om. eart CJ\. oppooent's baD todegradt acrodynamics
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
Szvegblokkok s listk
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
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>
<ul>...</ul>
<li>...</li>
listaelemek
Jellemzk
style="text-align:igazts"
(semmi).
Elem/Jellemz
style=" list-style-type:
(folytats)
Lers
felsorolsjel"
style= "list-style-type:
tpus"
(semmi).
s none.
Krdezz-felelek
K:
V:
Hogyan lehet egy szveget sorkizrtt tenni, azaz azt megoldani, hogy a bal
V:
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.
2.
3.
5. ra
Szvegblokk.ok s listk
las
Vlaszok
1.
morose,
anger,
or displeasure</dd>
or sulky</dd>
</dl>
Gyakorlatok
6. RA
Betformzs
A lecke tartalma:
Halad betbelltsok
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.
6. ra
Betformzs
{ag
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>
<small></small>
cbig></big>
<sup></ sup>
<sub></ sub>
cem></em>,
<strong></strong>,
illetve <b></b>
<t t></tt>
<pre>< /pre>
<u>
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>
<strike>
6.1. plda
"-//W3C//DTD XHTML
1.1//EN"
"http://www.w3.org/TR/xhtmlll/DTD/xhtmlll.dtd">
<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
c:@
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
3. rn
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.
szveg
nagy mret s
-. lila lesz.</font>
6. ra
<P style="font-family:arial,
sans-serif.
' times
Bettonnzs
193
roman"'>
ARIAL
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."
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.
14pt
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
style="font-family:arial,
sans-serif.
'times
roman';
font-size:14pt;
color:green">
6.2. plda
<?xml version="l.O"
<!DOCTYPE
html
encoding="UTF-8"?>
PUBLIC
"-//W3C//DTD
XHTML
1.1//EN"
"http://www.w3.org/TR/xhtmlll/DTD/xhtmlll.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
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>
background
<li>Provide
that
will
in whatever it is you
need.</li>
get me
whatever it is
job.</li>
<li>Computer proficient in
Experience</p>
class="indented">
<P><span
style="font-weight:bold;">Operations Manager,
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>
,.,
. 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]
Project Manager, Less Awesome Company, Some City, CA [May 2000- Sept 2002)
EOUCATION
REFERENCES
--
Done
6.2. bra
A 6.2.
University,
fgs
Caf szban
tallhat
bett
a magyar s ). Van ezen fell mg nhny matematikai jel, s pr, a szveg kzpon
tozsa sorn hasznlhat jel, pldul a hromszg alak felsorolsjeL
6.1. tblzat
--------
Karakter
Szmkd
Nvkd
Lers
"
"
idzjel
&
&
&
<
<
<
kisebb, mint
>
>
>
nagyobb, mint
¢
¢
£
¦
£
¦
vagy
&brkbar;
§
§
paragrafus
©
©
®
®
°
°
±
±
plusz-mnusz
²
²
³
³
+-
6. ra
6.1. tblzat
Betformzs
Karakter
Szmkd
Nvkd
lers
·
·
¹
¹
¼
¼
egynegyed (trtszm)
½
½
egyketted, fl (trtszm)
¾
¾
hromnegyed (trtszm)
Æ
Æ
æ
æ
É
É
kezetes nagy E
é
é
kezetes kis
×
×
szorzsjel
÷
÷
osztsjel
f97
(jolytatilS)
(Q
az
™
A HTML, illetve az XHTML nyelv egy klnleges kdot, egy gynevezen karakterkdot
6.3. pldban s a 6.3. brn szmos, a 6.1. tblzatban szerepl jelet mutatunk be
hasznlat kzben.
6.3. plda
<?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">
Lines</title>
</head>
<body>
<P>
Q:
What
should you
do when
British
banker
picks
fight
law
A:
him.
<hr />
Q: What
do
you
call it
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
<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>
--
'
. h-.
.,
, ,
.."
/
<om
oi .
, o -m
u_
d
o
.y_
tm 1 -
/ www
/ttp o
,--h-
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
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.
6.2.
tblzat
A 6. rn trgyalt HIML-elemek s
-jellemzk
Elem/Jellemz
Lers
<em>... </em>
<strong>... </strong>
<b>... </b>
Flkvr szveg.
<tt>... </tt>
<big>... </big>
<sub>...</sub>
Als index.
Fels index.
Jellemzk
style="font-family:bettpus"
style="font-size:mret"
x- small
(nagyon
100
Krdezz-felelek
K:
V:
K:
Miknt rhatunk egy weboldalra az eurpaitl eltr, pldul japn, arah vagy
V:
knai betkkel?
rt szvegeket, teleptenik kell a megfelel nyelvi bettpusokat, majd a bng
6. ra
Betformzs
J101
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.
2.
3.
Hogyan jelenthet meg egy weboldalon a" 2009, Webwonks Inc." felirat?
Vlaszok
1.
style="font-weight:
bold.</p>
2.
3.
2009,
Webwonks
Inc.
©
2009,
Webwonks
Inc.
Gyakorlatok
7. RA
Informcik megjelentse
tblzatok segtsgvel
A lecke tartalma:
7. ra
<td>,
<th>
l l 05
elem
<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
version="l.O"
<!DOCTYPE
html
encoding="UTF-8"?>
PUBLIC
"-//W3C//DTD
XHTML
1.1//EN"
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.
'="
., l!i]
l:l
Baseball Standings
Team
W L GB
54468.0
Color-ado Roclcies
54 468.0
62 38
1
l
39 62 23.5
Ilon<
..:-
7.1. bra
A 7.1.
7. ra
f t 07
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.
108
style="width:500px;
height:400px">
width
sty le="width:lOO%">
<tr>
<td style="width:20%">skinny
cell</td>
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.
jg-:
l=
181
ll
..
http://www.yourdoman.conVtablecdlwicfths.html
.....:J
Baseball Standings
Team
GB
62
38
--
54
46
8.0
S4
46
8.0
43
58
19.5
7.2.
39
62
23.5
bra
7. ra
7.2. plda
html
PUBLIC
"-//W3C//DTD
XHTML
1.1//EN"
"http://www.w3.org/TR/xhtmlll/DTD/xhtmlll.dtd">
<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>
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
me nhny elterjedtebb a
top
(fent),
bottom
middle
vertical-align
(kzpen),
bottom
l 111
(lent),
text-top
(a szveg tetejre),
text
baseline
7 .3. plda
<?xrnl
version="l.O"
<!DOCTYPE html
encoding="UTF-8"?>
PUBLIC
"-//W3C//DTD
XHTML
1.1//EN"
"http://www.w3.org/TR/xhtmlll/DTD/xhtmlll.dtd">
<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
style="vertical-align:top">
<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
style="vertical-align:top">
<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
td
Rhinoceros
n.ty-ioch blade.
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
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
meg, hogy a kpfjl neve zrjelbe kerl, el pedig az url szt rjuk- ebbl tudja
a tulajdonsg, hogy most a kpfjl helye kvetkezik.
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 CSS s a szabv
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).
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
7 1 tblzat
.
Elem/Jellemz
Lers
Jellemzk
border="szlessg"
cellspacing=" trkz"
cellpadding="bels marg"
style="width:szlessg"
style="height:magassg"
style="background-color:szn"
style=" background-image:
url (kp_elrsi_tja)"
Elem
<tr>...</tr>
Jellemzk
style="text-align: igazts"
style="vertical-align: igazts"
116
7.1. tblzat
(joytats)
Elem/Jellemz
Lers
style="background-color:szin"
style="background-image:
url (kp_elrsi_tja)"
Elem
<td>.
.</td>
<th>.
.</th>
Jellemzk
style="text-align:igazits"
style="vertical-align:igazits"
rowspan="sorok_szma"
colspan="oszlopok szma"
style="width:szlessg"
style="height:magassg"
style="background-color:szin"
style="background-image:
url (kp_elrsi_tja)"
jelenteni.
Krdezz-felelek
K:
Ksztettem egy nagy tblzatot. Amikor betltm az oldalt, sokig res marad
V:
7. ra
K:
V:
Ismtls
Ez a rsz ismtl krdsekbl s vlaszokbl ll, amelyek segtsgvel megszilrdthat
juk az ebben a leckben szerzett tudsunkat. Prbljuk megvlaszolni a krdseket
a vlaszok ellenrzse eltt.
Ismtl krdsek
1.
2.
Vlaszok
1.
border="l">
<tr>
<td>Top
left...</td>
<td>Top
right... </td>
e/tr>
<tr>
ctd>Bottom
<td>Bottom
left ...</td>
</tr>
</table>
2.
3.
8. RA
Kls s bels hivatkozsok
hasznlata
A lecke tartalma:
Horgonyhivatkozsok hasznlata
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.
!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
zoo. html
f121
nev fjljra.
elephants
alknyvtr
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>
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,
h t tp: l l),
122
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.
2.
3.
4.
<a>
(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>
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
f123
id="top"></a>
id
helyett a
name
id
name
hasznlatrL
jellemz szerepel.
Hivatkozs horgonyokra
A 8.1. pldban egy webhelyet lthatunk klnfle horgonyokkal egyetlen oldalon
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
html
PUBLIC
"http://www.w3.org/TR/xhtml11/DTD/xhtmlll.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Alphabetical Shakespeare</title>
</head>
124
Lines
of
and
zap!
You space
Shakespearean
Sonnets</hl>
go a-courting, and
it.
you're
down
<em>"Um...
It was, uh... I
think
it
heart
to
started.
<h2 style="text-align:center">Alphabetical
<h3
<em>"Beshrew that
Index</h2>
style="text-align:center">
<a
href="#C">C</a>
href="#F">F</a>
<a href="#G">G</a>
href="#H">H</a> <a
href="#I">I</a>
href="liK">K</a> <a
href="liL">L</a>
<a
href="ll0">0</a>
<a href="liR">R</a>
href="liT">T</a>
<a href="liU">U</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
have
scanted all,
that time
(if
ever that
'tis true,
I have
<li>As an
unperfect
<li>As fast
as
thou
actor
brings
live,
forth,
stage,
so fast
</li>
</li>
on the
shalt wane
should he
gone
</li>
am now</li>
</li>
</li>
</li>
thou
grow'st,
</li>
</Ul>
<p><a href="#top"><em>Return to Index.</em></a></p>
<hr />
<!--
continue
<h3><a
with the
alphabet ->
id="Z"></a>Z</h3>
Z.)</p>
<P><a href="#top"><em>Return
to
Index.</em></a></p>
</body>
</html>
alphabet
-->
8. ra
1125
ti
stit, akkor is rjunk a sorszmok el nmi szveget (pldul photol, photo2 stb.).
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.
----
OD-
@
-
http:/{www.yourdomain.om/alph1Shlkespere..html
.. -1
---
was,
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
!
<
Do..
so
---
--..,. ::..
8.1. bra
A 8.1. pldban lthat <a id> elemek nem jelennek meg a kpernyn, mg az <a href>
= liil
Mozilla Friox
[D
!l
--
http://www.yourdomin.com/lphashalcespeare..html
-+
--
bt11Tntolnda.
(No500Delsstart"ilbZ.)
Rel11m to Index.
-
""
8.2. bra
A 8.1. brn lthat oldalon a Z betre kattintva az oldal megfelel rszhez jutunk
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
A history>qUiz.html fjl
<?xrnl version="l.O"
<!DOCTYPE
html
encoding="UTF-8"?>
PUBLIC
"-//W3C//DTD
XHTML
1.1//EN"
"http://www.w3.org/TR/xhtmlll/DTD/xhtmlll.dtd">
<html
xmlns="http://www.w3.org/1999/xhtml"
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
version="l.O"
<!DOCTYPE
html
encoding="UTF-8"?>
PUBLIC
"-//W3C//DTD
XHTML
1.1//EN"
"http://www.w3.org/TR/xhtmlll/DTD/xhtmlll.dtd">
<html
xmlns="http://www.w3.org/1999/xhtml"
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>
\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
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]
_ _-+___,
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
8. ra
f129
elejrl a
h t tp: //
hat- az
<a h ref>
jelet kveten
feltntetjk a horgony nevt. A kvetkez hivatkozs pldul egy photos nev hor
gonyhoz visz az african. htmlnevezet oldalon, amely a
the
African
Elephant
Photos!</a>
Photos!</a>
ll
<a id>
<a href>
elemekben hasznljuk- ha
me an email
message.</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
=
8. ra
\Q
'if
f131
body
vltozt, az egyenlsgjelet s
<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
j,
a "c" bet
c,
s gy tovbb. Ha az sszes
an email
message.</a>
\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
8. ra
}133
nem kattintottunk r.
V ilgoskk alapsznnel
vagy rkattint
{
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;
hover
a:hover
font-family: "Comic
color:
Sans MS";
#E03A3E;
Emellett, mivel az
act i ve
s a
hover
egyesthetjk a stluslap-bejegyzseiket:
a:hover,
a:active
color:
#E03A3E;
8.4. plda
<?xml
--------
version="1.0"
<!DOCTYPE html
encoding="UTF-8"?>
1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtmlll.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
<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
</style>
</head>
<body>
<hl>Sample
<P><a
Link
Style</hl>
should
be
light
blue,
bold,
me,
font</a>.</p>
</body>
</html>
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
Verdana,
font-weight:
bold;
font-size:
75%;
text-decoration:
none;
sans-serif;
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
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>
8. ra
8.1. tblzat
Elem/jellemz
A 8. nn
}137
Lers
A href jellemzvel alkalmazva hivatkozst kapunk a megadott
Jellemzk
href="cm"
id=11nvll
Krdezz-felelek
K:
V:
V:
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:
V:
a# jelet?
Ismtls
Ez a rsz ismtl krdsekbl s vlaszokbl ll, amelyek segtsgvel megszilrdt11at
juk az ebben a leckben szerzett tudsunkat. Prbljuk megvlaszolni a krdseket
a vlaszok ellenrzse eltt.
Ismtl krdsek
1.
www .
cmen tallhat
webhelyre?
2.
3.
8. ra
Vlaszok
1.
2.
3.
me
a <a href="mailto:bon@soir.com">goodnight
greeting</a>!
Gyakorlatok
9. RA
A sznek hasznlata
A lecke tartalma:
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:
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.
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:
Triadikus
szneket alkalmazunk, pldul egy meleg (vrs) s egy hideg (zld) sznt.
-
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.
cmre.
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
FF
kdokat alkalmazzuk:
FF-teljes fnyer.
CC
80 szzalkos fnyer.
33 - 20 szzalkos fnyer.
#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">
#rrggbb
kdban az
rr,
gg
s a
bb
a vrs,
#FFOOOO
#OOOOFF
#OOFFOO
(semmi
#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
CSS-kdokkal
A CSS-stlusok hasznlatakor hrom helyen adhatunk meg sznt: a httr, a szveg,
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,
html PUBLIC
"http://www.w3.org/TR/xhtmlll/DTD/xhtmlll.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Background,
Text,
Text,
</head>
<body>
<hl>Background,
<P
style="background-color:#CCCCCC;
border:lpx
solid #000000;
Grey paragraph,
cspan
cdiv
color:#FF0000">
black border,
style="color:#FFA500">orange
style="width:300px;
span</span>.</p>
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
style="background-color:
#FFFFOO">Blue
<td
style="background-color:
#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>
..
:
,
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
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
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"
vagy ms trolk)
150
Krdezz-felelek
K:
V:
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:
V:
A trtnet valdi httere a kvetkez: ltezik 231 szn, amely kevsb "zavaro
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.
2.
9. ra
Aszfnek hasmlata
J151
Vlaszok
1.
2.
color:#OOFF00">
3.
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.
10. RA
Kpek ksztse webes hasznlatra
A lecke tartalma:
154
2.
3.
1O. ra
1155
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
(Q
Kpek krlvgsa
Minthogy a Webre sznt kpeink mrett szeretnnk minl alacsonyabban tartani,
rendszerint meg szaktuk vgni a digitlis kpeket. A fnykp
krlvgsakor kijelljk
nll feladat
Vgs a G/MP-ben
Z.
3.
----
"""
""""'-"""
!5- ......
8
[!j
...
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
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
640
\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
Ll!__,
Scale lmoge
Scale Image
fromJP9l
--
--
- -
t!!
[JNJgC' Size
'>'{ldth'
l629
Hght
1101
: l
':'
p ints
E!
;l
pixelslin
E1
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
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.
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
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 .-:
Frequt: q(rc.)
Sulls;mpling:
.QCTmrlhod:
Int
','
_
___I:J
r::J
------ ---- -
10.5. bra
A GIMP a kp minsgnekfenntartsa me/lett gy teszi lehetv afjlmret cskkentst,
hogy a kpet jPEGformtumban menti
768 kppont
768-as) kper
1 O. ra
1163
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
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
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
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
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
1 O. ra
f167
10.8. bra
A httrkp hatrai nem ltszdnak, mgis tudjuk, hogy ismtld mintzatot ltunk,
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
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
1169
Krdezz-felelek
K:
Nem okosabb-e ahelyett, hogy ezt a sok mindent megtanulnm, kiadni az oldal
V:
V:
K:
V:
m animcit kszteni?
170
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.
2.
A cgnk emblmja egy fekete Z bet, mgtte egy vrs krrel. Mekkora
Vlaszok
1.
40 kpponttl 300
x120
kppon
100 kppontnyi
10. ra
f171
Gyakorlatok
11. RA
Kpek hasznlata a webhelyen
A lecke tartalma:
Kpek igaztsa
Httrkpek hasznlata
Kptrkpek ksztse
e feledkezznk meg
src="myimage.gif" alt="My
Image" />
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>
11.1. plda
Kp elhe{vezse a
weboldalon
az
Spectacular
Yosemite View</h1>
Dome"
!><Ip>
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
Point.<IP>
._
</body>
</html>
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
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
a/ternate text,
azaz
C>
t @""li!iil
http://www.yourdomam.com/shawimaqe_noalt.ht:ml
.. .
seen &om
\Vasbburn PoioL
Done
11.2.
bra
A Jelhasznlk
eszkzlers,
angolul
tooltip),
ha
178
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.
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.
. c
&
"' __!;L.-
http:/1-.yourdomlingdlot.html
.. -
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
----------
<?xrnl version="1.0"
encoding="UTF-8"?>
xrnl:lang="en">
<head>
<title>More
Spectacular
Yosemite Views</title>
</head>
<body>
<h1>More
Spectacular
Yosemite Views</h1>
style="float:left; padding:
Capitan</strong> is a 3,000-foot
(910
6px;"/><strong>El
m)
vertical rock
forrnation
The granite
climbers.
is a viewpoint on
one
6px;"/><strong>Tunnel
State Route
41 located
directly east
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
11. ra
'
'l
vertical-align
bot tom
top
(fent), s
/>cmkt.
style= "vertical-align:text-bottom"
/>cmkt hasznljuk.
11.3. plda
html PUBLIC
1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html
<head>
<title>Small
Yosemite Views</title>
</head>
<body>
<h1>Small
But
Mighty
Yosemite Views</h1>
Capitan" wi dth="100"
style="vertical-align:text-top;"/><strong>El
182
3,000-foot
(910 m)
height="80" style="vertical-align:text-bottom;"/><strong>Tunnel
View</strong> looks east
<P><img src="upperyosefalls_sm.jpg"
width="87"
alt="Upper
Yosemite Falls"
height="l00" style="vertical-align:middle;"/><strong>Upper
1,430
twenty
highest
style="vertical-align:baseline;"/><strong>Hanging
Point, used to be a
popular
spot
for
Ha az
elemben semmilyen
<img />
align
style="vertical-align:baseline"
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.
:...,,
_____
;"
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!
Talljuk ki, hogy hol legyen a kp, s egy szvegszerkesztvel rjuk az <img
src=" fish. jpg" alt= "Bright Orange Goldfish with Bulging Eyes" l>
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.
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
<div>
lthat.
11.4. plda
<?xml version="l.O"
encoding="UTF-8"?>
xmlns="http://www.w3.org/1999/xhtml"
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
National
its
western
challenges
by
the
<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
Yosemite
inclucting
Half
Falls.
and
the popular
enlarge</div><strong>Tunnel View</strong> is
State
Bridalveil
attractions in
the
This
southwest
is,
to
many,
face of
El Capitan,
Yosemite.</p>
</body>
</html>
1=,@11 l:l l
&>
wwwlft'laglo::withlinks.html
-+ .
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
..,
weboldalak elrendezsn
Az
<a>
<di v>
<img />
pldban a
cmkkben a
border: none
kittel az
img
flickr
Home
You
Organlze
Contacts
Groups
Explore
a UlMJadltd
on JUI 24 2007
byicmekHli
- jemelonl's photostream
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:
11. ra
1187
#ffffff url('kpnv.gif')
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;
url(mybullet.gif)
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
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
....
evolutlc5n
T lll A
E f'
Don
11.7.
bra
11.
ra
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
.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.
,.-------.....-;
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
== ;;;;o::;::=:::;;::=.,=::.::,
_ -,
=
--
ma
-+'
11.9.
bra
11. ra
nll feladat
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"
/>
shape
coords
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
jutunk. Brmilyen olyan cm, illetve fjlnv hasznlhat, amelyet egy szoksos
<a href>
al t
cmkben is megadhatnnk.
width:650px;
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
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"
coords="29,271,42,283"
County,
CA"
/>
coords="535,216,548,228"
href="http://visitingmifflincounty.com/"
alt="Mifflin
County,
PA"
title="Mifflin
County,
PA" />
</map>
</body>
</html>
A krdses vltoztats a
usernap
alt,
illetve
title
194
http://www.yourdomain,comagtmap.html
.l
Testing an Imagemap
Oick oo COUilty to go to the couruy's
websit:;.:----.
11.10.
bra
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
11.1. tblzat
Elem/Jellemz
lers
<img />
<area l>
Jellemzk
src=" cm"
alt="helyettest szveg"
title=" cm"
width=" szlessg"
A kp szlessge (kppontban).
height= "magassg"
A kp magassga (kppontban).
style="bor der:none"
style="vertical-
align: elrendezs"
(text-top),
bottom),
bellts a none.
usemap=" azonost"
Elem/Jellemz
Lers
Jellemzk
shape=" rtk"
coords=" rtkek"
href="hivatkozs URL-je"
Krdezz-felelek
K:
Milyen hossz lehet az <img /> cmke alt jellemzjben megadott lers?
V:
K:
PNG formtumban.
K:
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
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.
2.
Oldjuk meg, hogy minden olyan alkalommal jelenjen meg az Elephant sz,
3.
Egy 200
Vlaszok
1.
2.
/><IP>
3.
src="elephant.jpg"
alt="elephant"
/>
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"
/>
width="200"
height="200"
usemap="#quartersmap"
alt="quarters"
title="quarters"
/>
Gyakorlatok
12. RA
Multimdia a webhelyen
A lecke tartalma:
Hivatkozs multimdiafjlokra
Multimdiafjlok begyazsa
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.
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:
12. ra
Multimdia a webhelyen
! 201
Hivatkozs multimdiafjlokra
Mozgkpet, illetve hangfelvtelt a legegyszer(bben s legmegbzhatbban gy
helyezhetnk el egy weboldalon, ha az
<a href>
href="hockey.mov">View the
hockey
video
clip.</a>
12.1. plda
<?xml
version="l.O"
<!DOCTYPE
html
encoding="UTF-8"?>
PUBLIC
"-//W3C//DTD
XHTML
1.1//EN"
"http://www.w3.org/TR/xhtmlll/DTD/xhtmlll.dtd">
<html
xmlns="http://www.w3.org/1999/xhtml"
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
is both creative
pond,
all
Koi from
Australia. Although
an
and
various
they
don't
bark,
purr,
and
click here</a>
or
or fetch
good
ones
anything
the
these fish
href="pond.wmv">
left
the pond.</p>
</body>
</html>
hft:p-J/www.urdomcn.com/pond.html
Done
12.1. bra
A projector.gif nev, animlt GIFformtum kpre kattintva nylik meg a Windows Media
12. ra
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
Multimdiafjlok begyazsa
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
----,
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
12.3.
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
AU hangfjl: audio/basic
2os
html
encoding="UTF-8"?>
PUBLIC
"-//W3C//DTD
XHTML
1.1//EN"
"http://www.w3.org/TR/xhtmlll/DTD/xhtmlll.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
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">
classid="CLSID:6BF52A52-394A-lld3-B153-00C04F79FAA6"
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"
autostart="false"
pluginspage="http://www.microsoft.com/windows/windowsmedia/" />
</object>
</div>
<p>Michael's
backyard pond
an ongoing home
is
not
only
fun
is
hobby
but
also
relaxing.</p>
<p>He
as
has
far
purr,
as
numerous
Japan,
fish in
Israel,
or fetch anything
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>
<embed
l>
elemre.
<embed
<embed l>
12. ra
Multimdia a webhelyen
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.
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>
12.4. bra
A YouTube nem csak
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
Elem/jellemz
Lers
<object>...<lobject>
Jellemzk
name="nv"
value="rtk"
<embed l>
Jellemzk
width="szlessg"
height="magassg"
lessge.
gassga.
type="MIME- t p us"
src=" tartalom_URL"
210
12.1. tblzat
Elem/jellemz
(jo(ytats)
Lers
loop=" ismtls"
pluginspage=
"bvtmny_helyt_megad_URL"
Krdezz-felelek
K:
V:
K:
V:
12. ra
Multimdia a webhelyen
!211
webol
Ismtls
Ez a rsz ismtl krdsekbl s vlaszokbl ll, amelyek segtsgvel megszilrdthat
juk az ebben a leckben szerzett tudsunkat. Prbljuk megvlaszolni a krdseket
a vlaszok ellenrzse eltt.
Ismtl krdsek
1.
2.
nev fjl
<obj ee t>
elemen belli
<par am>
cm
kben, ha azt szeretnnk, hogy a weboldal a begyazott felvtelt jra meg jra
lejtssza?
Vlaszok
1.
2.
classid="CLSID:6BF52A52-394A-lld3-B153-00C04F79FAA6"
width="320"
<param
height="305">
name="type"
value="video/x-ms-avi"
/>
/>
212
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.
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.
13. RA
Keretek hasznlata
A lecke tartalma:
Keretvz kialaktsa
Hivatkozsok keretek s ablakok kztt
Bels keretek hasznlata
Mik azok
A
keretek?
keret olyan tglalap alak terlet a bngszablak belsejben, amely kpes egy
. c
http://www.yourdom&in.com/index.html
13.1. bra
Keretek segtsgvel egyszerre
tbb weboldalt is megjelenthe
Don
http:/www.yourdomain.comfrndex.html
-+
13.2. bra
A Products feliratra kattintva
Don
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 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
index.htrnl.
13.1.
plda
<?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>
/>
<noframes>
<body>
<hl>Sarnple
Frarned
Your browser
</body>
</noframes>
</frameset>
</html>
Site</hl>
does not
support frarnes.
Sorry!
13. ra
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
A sarok, illetve az oszlopok szmt neknk kell megadnunk, mgpedig vagy kppontra
pontosan, vagy a teljes bngszablak szzalkos arnyban. Csillaggal ( ) jellhetjk,
*
13.2. plda
html
PUBLIC
"-//W3C//DTD XHTML
1.0
Transitional/lEN"
"http://www.w3.org/TR/xhtmll/DTD/xhtmll-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<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
href="contact.html"
target="main">CONTACTc/a>
c/div>
e/body>
c/html>
c body>
s a
</body>
cmke kztt
s a
cnoframes>
</noframes>
cmke kztti
<noframes>
13.3. plda
c?xml
version="l.O" encoding="UTF-8"?>
c!OOCTYPE
html
PUBLIC
"-//W3C//DTD
XHTML
1.0
Transitional/lEN"
"http://www.w3.org/TR/xhtmll/DTD/xhtmll-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
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>
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.
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>
name
megadva. A
name
name
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
13.4. plda
<?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
xmlns="http://www.w3.org/1999/xhtml"
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
13.3. bra
A 13.4. plda alapjn kialakul
o.
..
13. ra
13.5. plda
1.0
Frameset//EN"
"http://www.w3.org/TR/xhtmll/DTD/xhtmll-frameset.dtd">
<html xrnlns="http://www.w3.org/1999/xhtml" xrnl:lang="en">
<head>
<title>Using
an
iframe</title>
</head>
<body
style="background-color:#CCCCCC">
<hl
style="text-align:center">Inline Frame
<div
Example</hl>
style="text-align:center">
<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>
13.6. pldakd
<?xml version="l.O"
<! DOCTYPE
html
encoding="UTF-8"?>
PUBLIC
"-//W3C//DTD
XHTML
l. 0
Fr arneseti /EN"
"http://www.w3.org/TR/xhtmll/DTD/xhtmll-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="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=
!:l
liil
http://www.yourdomain.comftframehtml
..
'
-r
a.
ifr.tmP.
Done
,.;.
13.4. bra
A 13.5. plda <iframe> eleme azt a bels keretet hatrozza meg, amelynek a kdja
<i frame>
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
fut parancsfjira mutat, amely a Digital Inspiration webnapl oldaln bell jelenti meg
13. ra
Keretek hasznlata
1 223
Htltory
: C
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
TweelAddet com
Twilter
Earned $4000
DO
One
background
3 Easy Steps
Results 1 - 10 for twitter (0.25 seconds)
Gogi<"
CuSNI'Ctl
rt s
Ads by Google
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
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
13.1.
t6blzat
Elemek s jellemzk
Lers
<frame />
Jellemzk
src=" url"
id=" nv"
<frameset>... </frameset>
Jellemzk
rows="sorok_szma"
13. ra
13.1. tblzat
Keretek hasznlata
1225
(folytats)
Elemek s jellemzk
Lers
frameborder="yes/no"
<noframes>... </noframes>
Krdezz-felelek
K:
V:
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
juk az ebben a leckben szerzett tudsunkat. Prbljuk megvlaszolni a krdseket
a vlaszok ellenrzse eltt.
Ismtl krdsek
1.
2.
Milyen
<i frarne>-kddal
Vlaszok
1.
Friends</title>
</head>
<frameset
<frame
cols="25%,75%">
src="index.html"
/>
<frame src="mickey.html"
name="mainframe"
/>
</frameset>
</html>
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
here
see the
inline
frame.</p>
<li frame>
Gyakorlatok
14. RA
A kls s a bels marg,
az igaztsok s az sztats
hasznlata
A lecke tartalma:
Elemek igaztsa
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.
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
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
ksztette.
Margk hasznlata
A stluslapok margi segtsgvel a weboldalak egy tglalappal hatrolhat elemn
margin
tulajdonsg
margin-top: A
margin-right:
margin-bottom: Az
margin-left: A
margin:
232
margin-top:15px;
margin-right:15px;
margin-bottom:15px;
margin-1eft: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;
sorrendben).
Egyszerubbnek bizonyulhat egy vagy mind a ngy rtk megadsa, de van harmadik
lehetsg is.
14.1. plda
<?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
xmlns="http://www.w3.org/1999/xhtml"
<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
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>
id="d3">DIV
<div
id="d4">DIV #4</div>
#3</div>
</body>
</html>
DIV#4
.,.
14.2. bra
A
cloknak is:
A msodik sznes tglalap bal margja legyen tizent kppontos, a fels margja
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
background-color:red;
margin: Opx;
div#d2
background-color:green;
margin:5px Opx Opx
div#d3
15px;
background-color:blue;
margin:Opx Opx Opx
div#d4
75px;
background-color:yellow;
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
1235
DIV#4
Done
14.3. bra
A
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-width:6px 6px
3px 6px;
border-style:solid;
border-color:#OOOOOO;
background-color:green;
margin:lOpx Opx Opx
div#d3
15px;
15px;
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
14.4. bra
DIV/14
A sznes tglalapok
a harmadik mdosts
-t
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
padding-top:
padding-right:
padding-bottom:
padding-left:
padding:
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;
Bpx;
14. ra
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
14.2. Dlda
tglalapot rajzol kd
<?xml
version="l.O"
<!DOCTP
Y
E
encoding="UTF-8"?>
htmlPUBLIC
"-//W3C//DTD
XHTML
1.1//EN"
"http://www.w3.org/TR/xhtmlll/DTD/xhtmlll.dtd">
<html
xmlns="http://www.w3.org/1999/xhtml"
<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
background-color:red;
text-align:center;
padding:l5px;
div#d2
background-color:green;
text-align:right;
padding:25px
50px
6px
6px;
xml:lang="en">
div#d3
background-color:blue;
text-align:left;
padding:6px
div#d4
6px
6px 50px;
background-color:yellow;
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>
kttp://-.yourdomaln.comlpadding.html
..
Dl\' #4
14.6. bra
A
14. ra
1 241
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:
14. ra
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"
"http://www.w3.org/TR/xhtmlll/DTD/xhtmlll.dtd">
<html
xmlns="http://www.w3.org/1999/xhtml"
<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
background-color:red;
float:left;
div#d2
background-color:green;
float:left;
div#d3
background-color:blue;
float:left;
</style>
</head>
<body>
<div id="dl">DIV #1</div>
<div id="d2">DIV #2</div>
<div id="d3">DIV #3</div>
</body>
</html>
os, az a helyzet,
hogy egyms mell sztak, de a bngszablak nem elg szles a 250 kppont szles s
Don<
14.8. bra
Tglalapok elhelyezse a float tulajdonsg hasznlatval
14. ra
az
igazftsok s
az
sztats hasznlata
( 245
.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>
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:
V:
hasznlhat.
Ismtls
Ez a rsz ismtl krdsekbl s vlaszokbl ll, amelyek segtsgvel megszilrdthat
juk az ebben a leckben szerzett tudsunkat. Prbljuk megvlaszolni a krdseket
a vlaszok ellenrzse eltt.
14. ra
}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.
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
3.
padding-top:l2px
Gyakorlatok
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".
15. RA
dobozmodellje s
az elemek elhelyezse
A CSS
A lecke tartalma:
A CSS dobozmodellje
Az elemek elhelyezse
A CSS
dobozmodellje
'
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
15.1. bra
A CSS dobozmodellje a HTML valamennyi blokkszint e/emt lerja
A keret vagy szegly az elem krl kap helyet, a mindenkori bels marg kls
15.
ra
A CSS
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
IS)!
El
.,
Don
15.2.
IQ
bra
252
Ezt a msodik tglalapot az albbi kdrszlettel adjuk meg- annyi 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;
Done
15.3. bra
A msodik tglalap ugyanolyan lenne, mint az els, ha a dobozmade/l nem gyakorolna
hatst a mretre
padding-left
margin-left
padding-right
border-left
border-right
margin-right
padding-top
margin-top
padding-bottom
margin-bottom
border-top
border-bottom
15. ra
A CSS dobozmodellje s
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).
akkor lehetsges, ha a
adunk meg, ugyanis
megfelel
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.
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-
left:
right:
top:
bottom:
15.1. plda
<?xm1
version="1.0" encoding="UTF-8"?>
<!DOCTYPE htm1
PUBLIC
"http://www.w3.org/TR/xhtmlll/DTD/xhtmlll.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xml:lang="en">
<head>
<title>Positioning the
Color
<sty1e type="text/css">
div
Blocks</title>
15. ra
A CSS
dobozmodellje s
az
position:relative;
width:250px;
height:lOOpx;
border:5px solid
#OOO;
color:black;
font-weight:bold;
text-align:center;
div#dl
background-color:red;
div#d2
background-color:green;
div#d3
background-color:blue;
div#d4
background-color:yellow;
</style>
</head>
<body>
<div id="dl">DIV #1</div>
<div
id="d2">DIV
<div
id="d3">DIV #3</div>
#2</div>
<div
id="d4">DIV
#4</div>
</body>
</html>
<di v>
relative
pos i t ion
tulajdonsg rtkl
<div>
elemekre
15.4. bra
A sznes tglalapok fgglegesen, egyms alatt helyezkednek el
15.2. plda
<?xml
version="l.O" encoding="UTF-8"?>
<!DOCTYPE
html
1.1//EN"
"http://www.w3.org/TR/xhtmlll/DTD/xhtmlll.dtd">
<html
xmlns="http://www.w3.org/1999/xhtml"
xml:lang="en">
<head>
<title>Positioning the
Color
<style type="text/css">
div
{
position:absolute;
width:250px;
height:lOOpx;
border:5px solid #OOO;
color:black;
font-weight:bold;
text-align:center;
div#dl
background-color:red;
left:Opx;
top:Opx;
Blocks</title>
15.
div#d2
ra
A CSS
background-color:green;
left: 75px;
top:25px;
div#d3
background-color:blue;
left:l50px;
top:50px;
div#d4
background-color:yellow;
left:225px;
top:75px;
</style>
</head>
<body>
<div id="dl">DIV #1</div>
<div id="d2">DIV #2</div>
<div id="d3">DIV #3</div>
<div
id="d4">DIV #4</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
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.
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
A CSS dobozmodellje s
az
segitsgt'f!l
<?xml
version="l.O"
<!DOCTYPE
html
encoding="UTF-8"?>
PUBLIC
"-//W3C//DTD
XHTML
1.1//EN"
"http://www.w3.org/TR/xhtmlll/DTD/xhtmlll.dtd">
<html
xmlns="http://www.w3.org/1999/xhtml"
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
background-color:red;
left:Opx;
top:Opx;
z-index:O;
div#d2
background-color:green;
left:75px;
top:25px;
z-index:3;
div#d3
background-color:blue;
left:l50px;
top:50px;
z-index:2;
div#d4
background-color:yellow;
left:225px;
top:75px;
z-index:l;
</style>
</head>
<body>
<div
id="dl">DIV #1</div>
id="d3">DIV
#3</div>
id="d4">DIV #4</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.
float: Azt adja meg, hogy a szveg miknt folyja krbe az elemet.
15. ra
A CSS
f261
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:
V:
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:
V:
Ismtls
Ez a rsz ismtl krdsekbl s vlaszokbl ll, amelyek segtsgvel megszilrdthat
juk az ebben a leckben szerzett tudsunkat. Prbljuk megvlaszolni a krdseket
a vlaszok ellenrzse eltt.
Ismtl krdsek
1.
2.
3.
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
263
Vlaszok
1.
2.
3.
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
z-index
16. RA
Szemrevalbb listk s
egyebek - a CSS hasznlatval
A lecke tartalma:
A felsorolsjel testreszabsa
266
Ismtls
HTML listi
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.
16. ra
i 267
s a
list-style-type
list-style
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
<ol>)
<ul>
<li>
16.1. plda
<?xml
version="l.O"
<!DOCTYPE
html
encoding="UTF-8"?>
PUBLIC "-//W3C//DTD
XHTML
1.1//EN"
"http://www.w3.org/TR/xhtmlll/DTD/xhtmlll.dtd">
<html
xmlns="http://www.w3.org/1999/xhtml"
<head>
<title>List
Test</title>
<style type="text/css">
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>
16. ra
40 kppont lesz.
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
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,
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
&
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,
16. ra
http://www.yourdomlin.com/list_styiW.html
( 271
-+
Done
+'
16.4. bra
A list-style-position tulajdonsg outside s inside rtkt hasznlva add klnbsg
Dono
16.5. bra
A marg s a bels marg mskpp jelenik meg,
+'
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
12 kppontos
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.
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.
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
f 273
16.2. p6lda
Kptrkp ltrehozsa
html
PUBLIC
"-//W3C//DTD
XHTML 1.1//EN"
"http://www.w3.org/TR/xhtmlll/DTD/xhtmlll.dtd">
<html xrnlns="http://www.w3.org/1999/xhtml" xrnl:lang="en">
<head>
<title>CSS
<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)
Breakfast</a></li>
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
16. ra
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;
276
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:
V:
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:
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
az ebben a leckben szerzett tudsunkat. Prbljuk megvlaszolni a krdseket a vla
szok ellenrzse eltt.
Ismtl krdsek
1.
2.
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.
2.
Igen. Az egyetlen klnbsg, hogy a listaelem tartalma eltt nem jelenik meg
felsorolsjel.
3.
height:lOOpx;
dashed #000000;
background-color:#OOffOO;
list-style-position:inside;">text goes
Gyakorlatok
ma
17. RA
Navigcis fellet kialaktsa
a CSS segtsgvel
A lecke tartalma:
280
visszk.
elsdleges navig
cis elemek a bevezet oldalakra, valarnint a webhely fontosabb rszeihez viszik a lto
nll feladat
A
17. ra
17.1. plela
<?xrnl version="l.O"
<!DOCTYPE
html
encoding="UTF-8"?>
PUBLIC
"-//W3C//DTD
XHTML
1.1//EN"
"http://www.w3.org/TR/xhtmlll/DTD/xhtmlll.dtd">
<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
of main
sections,
and
it can
provide
more
be useful
context,
such as:</p>
<Ul>
<li><a href="#">Mission</a>:
Learn more
about
our corporate
Read
about our
corporate
history
the country.</li>
run
like a
Our team of
well-oiled machine
executives makes
(also
useful
for
(and
Here you
can
we really do
find multiple
care what you
'
About Us
Mozilla Fftfox
.' 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
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
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.
c:::r
lW'J..II
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:
Done
17.2. bra
A listaelemek megklnbztetse CSS-stlusokka/
ul
list-style:
margin:
none;
12px
padding:
Opx
Opx
Opx;;
Opx;
li
border-bottom:
lpx
solid
#ffffff;
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;
17. ra
f 285
\_
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:
Do""
17.3. bra
A fggleges lista kezd navigcis menre emlkeztetni
!ook J::l<lp
httrr,//www.yourdomtlin.com/vutiuiMV2.html
.. .
About Us
On the lntroductory pages of main sections, It can be useful to
repeat the secondary navlgation and provide more context, such
as:
Done
17.4. bra
A listaelemek most mr sznt vltanak, ha fljk visszk az egrmutatt
#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;
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
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:
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,
<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,
17.2. plda
--------
<?xml version="1.0"
<!DOCTYPE
html
encoding="UTF-8"?>
PUBLIC
"-//W3C//DTD
XHTML
1.1//EN"
xmlns="http://www.w3.org/1999/xhtml"
xml:lang="en">
<he ad>
<title>About
<style
body
Us</title>
type="text/c ss">
font:
12pt Verdana,
Arial,
Georgia,
sans-serif;
#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;
padding: Opx;
#nav ul
li
#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
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
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
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>:
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
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
On the lntroductory pages of main sections, It can be useful to
repeat the secondary navigatlon and provide more context, such
as:
17.6. bra
Tbbszintfgg
leges navigcis
Don
lista ltrehozsa
ess-stlusokkal
(CSS fggleges navigci) kifejezst egy internetes keresbe, ezernyi pldt lthatunk
a stluslapok hasznlatra- s ezek illindegyike az ezen az rn megismert egyszer
szablyokra pl.
17. ra
17.3. plda
<?xml
version="1.0"
<!DOCTYPE
html
encoding="UTF-8"?>
PUBLIC
"-//W3C//DTD
XHTML
1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<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>
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
11.1. bra
Don
elemekbl ll
nav
nev
<d i v>
float:left;
margin:
width:
85px
Opx
Opx
Opx;
400px;
background-color:
#628794;
border:
black;
lpx
solid
elem szlessgt,
17. ra
Az
<ul>
#nav ul
margin:
Opx;
padding:
Opx;
list-style:
display:
<li>
none;
inline;
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
1 Done
17.8. bra
Vzszintes navigcis sv kialaktsa stlusokkal
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;
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:
K:
V:
17. ra
( 295
Ismtls
Ez a rsz ism krdsekbl s vlaszokbl ll, amelyek segtsgvel megszilrdthatjuk
az ebben a leckben szerzett tudsunkat. Prbljuk megvlaszolni a krdseket a vla
szok ellenrzse eltt.
Ismtl krdsek
1.
2.
3.
Vlaszok
1.
2.
3.
Gyakorlatok
18. RA
Szvegmdosts egrmveletekkel
A lecke tartalma:
Az esemnyek elrse
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
OoWd>
Espai'iol
Frany1111
t!i!Oi
h111no
B*ll
. -
P)'CctOMi
Svens.ka
Explorer, will
citll! 1s
Name
Why 1s th1s named Toolt1p? How 1s th1s related
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
18. ra
18.1. plda
<?xml
version="l.O"
<!DOCTYPE
html
encoding="UTF-8"?>
PUBLIC
XHTML 1.1//EN"
"-//W3C//DTD
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
the
rock
that
with
the
Palouse!</span></a>
forms
15-7
hills
in
million
year
Whitman
County,
Washington. The
in contrast
old
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
1908,
by
Cashup Davis
stood atop
after it
closed.
In 1946,
1888 to
Virgil
State
increased to
Park,
which was
later
Steptoe
Butte
is currently
recognized as
because
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:
(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>
z-index
a nagyobb
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>
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 ).
18.2. bra
& 3,612 feet(1,101 m), approxillsalel y 1,000 feet (300m) above Ibe surrouodillg cClllDlrySK!e.
Ha az egrmutatval
Tazfrom
httvJ/en.wibpedit.orglwikVPalouse
18. ra
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.
:LJ
fii//C:/Usen/JM/Oeskt:opls:ms_htmlai/Be_doa/17/hovertei..html
ACME
Widqet
LLC
Producs
li
Presc.>
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
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;
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>
<li><a class="rnore"
you
are
</ul>
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
onmouseup- A
onmouseover-
onmousemove-
onclick="this.style.color
'red' ;">l
turn
red
when clicked.</hl>
<div>
<div>
elem megjelenst
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.2. plda
html PUBLIC
"http: l /www.w3.org/TR/xhtmlll/DTD/xhtmlll.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Steptoe Butte</title>
<style type="text/css">
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
the
rock
that
with
the
<a
Palouse!</span></a>
forms
15-7
the
butte
million
is
year
hills
over
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
rest
be
of the
called
top,
whose
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
as a
value.
In 1946, Virgil
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>
<div class="fakelink"
id="hide_e"
onclick="this.style.display='none';
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
surrounding
countryside.</div>
<div class="fakelink"
id="show_p"
onclick="this.style.display='none';
document.getElementByld('hide_p').style.display='block';
document.getElementByid('photos') .style.display='inline';
">» Show
Photos
from the
Hide
cdiv id="photos"><img
12px;
border:
lpx solid
#000"
/>cimg
12px;
src="steptoe_sm3.jpg"
border:
lpx solid
#000"
/>cimg
style="margin-right:
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>
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).
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
Don
18.4. bra
A 18.2. plda oldalnak kezdeti megjelense. Vegyk szre, hogy az egrmutat kzz vltozik
18. ra
Szvegm6dosfts egnm1veletekkel
l 307
Show Elevation</div>
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 mveletek eredmnyt a
Steptoe Butte
-----
.. height).
A botd Iruolt by D"is stood atop
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
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
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
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:
V:
K:
V:
billentyesemnyeket?
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.
18. ra
Szvegmdosfts egnnveletekkei
J 3t1
Ismtl krdsek
1.
2.
3.
Vlaszok
1.
2.
Az orunouseout esemnyt.
3.
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
19. RA
Rgztett s folykony
elrendezsek ltrehozsa
A lecke tartalma:
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
600-as felbonts
19. ra
19.1. bra
Rgztett szlessg{[ weboldal kisebb kpernyje/bontsnl
316
B:ltAOLU
.,.....O..UW..St;o,...S.rd1
.,._,........,.,.
,.;._.c.
n
19.2.
f!lElOO...!!J:ll
r:"" ?
..,r
Nft_G'"'"""'",...Idor
s.nu.te.-11
bra
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
19.3. bra
Folykony elrendezs viszonylag kis jelbonts kpernyn
19.4. bra
Folykony elrendezs kis kpernyn
1 317
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
19. ra
19.1. plda
<?xrnl
version="1.0"
<!DOCTYPE
html
encoding="UTF-8"?>
PUBLIC
"-//W3C//DTD XHTML
1.1//EN"
xrnlns="http://www.w3.org/1999/xhtml"
xrnl:lang="en">
<head>
<title>Sample
<link
Layout</title>
href="layout.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>
<link>
elemmel
320
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.
"'-
hp,//www:youdomo;n.<omllyout.html
HEADER
CONTENT
LEFT SIDE
RJGHTSIDE
FOOTER
19.6. bra
Egyszer HTML-sablon,
Don.
.a;
19. ra
#header
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>
{
left;
padding-left:
200px;
padding-right:
125px;
position: relative
<div>
elemek
balra sszanak.
A
nev
left_side
<div>
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
esetben a
right
{
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
19.8. bra
Az egyszer H1ML-sablon 400 kppontnl
keskenyebb bngszablakban - katasztrfa!
19. ra
.w.:t..i
'
a'
FT SIDE
httpV/www.youdon1o
-+
CONfENT
..
Done
-
19.9. bra
Az egyszer HTML-sablon
--
400
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
324
httP'J/www.yourdomatn.co!TI/t.yout.htmJ
CONTENT
Done
19.10.
bra
-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
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.
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
....
19.12. bra
A sznes mezk immr hosszan elnylnak a rvid tartalom ellenre
stluslap-bejegyzsben:
overflow: hidden;
Cut11ctUs
ac,,QUIS l:tqetjusto\Ueumro,..msodales
19.13. bra
A ksz rgztett-folykony keve11 elrendezs
A weboldal teljes HTML-kdjt a
lthatjuk.
19.2. plda
<?xml version="l.O"
<!DOCTYPE
html
encoding="UTF-8"?>
PUBLIC
"-//W3C//DTD
XHTML
1.1//EN"
"http://www.w3.org/TR/xhtmlll/DTD/xhtmlll.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
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
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
pellentesque
elementum
ligula,
facilisis
congue.
mi rhoncus
semper at imperdiet
interdum
Aenean imperdiet
ac felis ac ante
vitae
molestie
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
href="#">History</a></li>
<li><a href="#">Executive
cli><a
href="#">Contact
Teamc/a></li>
Us</a></li>
</ul>
</div>
cdiv
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
--------
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:
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
Krdezz-felelek
K:
V:
V:
330
Ismtls
Ez a rsz ismtl krdsekbl s vlaszokbl ll, amelyek segtsgvel megszilrdthat
juk az ebben a leckben szerzett tudsunkat. Prbljuk megvlaszolni a krdseket
a vlaszok ellenrzse eltt.
Ismtl krdsek
1.
2.
3.
a bngszablakon bell?
Vlaszok
1.
2.
Persze. Jllehet a legtbb oldal tartalmt balra vagy kzpre igaztjk, lehets
hatrozza meg, amelybe nem rtjk bele a kitlts (bels marg), a szegly,
valamint a (kls) marg rtkt
Gyakorlatok
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.
20. RA
Nyomtatbart weboldalak
ksztse
A lecke tartalma:
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:
20. ra
f333
C'
--
...._
... .... "'!tot--
IMx..l'l!lllll-ltll!lll-
-L.s.en;hfdapJ
..
n,ote.ta
e pullman.wa
-
ey,.
""'LGe
c-.
tQooc-M
j
'" 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
filo[...
__ .......,.l"""li"P
C
tlcam/nwp51f:q&sourn=s-:q&N:tn&q:.njost"clt0"pullmtf\WI=4157061.
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'
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
., ...
..
totlll1668m
..,
20.2. bra
Az oldal nyomtatbart vltozata elklntve tartalmazza a vezetshez szksges
informcikat- amelyeket gy nmagukban is kinyomtathatu nk
20. ra
f335
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.
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
20. ra
(337
url(player.css)
all;
@import url(player_print.css)
print;
href="for_pp.css"
media="print,
projector" />
ll
338
NICKNAME: Big T
PosmoH: RW
HEICHT: 6'3"
WEJ.GHT: 195
SHOOTS: left
AcE: 40
BIRTHPl.ACE: Nashvile, TN
.....
20.3. bra
Egy CSS hasznlatval kszlt oldal szokvnyos bngszben olvasva
20. ra
(339
20.1. plda
body
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
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;
font-variant:small-caps;
tr.heading
font-variant:small-caps;
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;
in)
20. ra
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
Potatoes
fAVOlflE NEAT
AND
20.4. bra
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
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=
THttEE:
Swett's (map)
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
(343
Krdezz-felelek
K:
V:
V:
tatikont az olda/aimon?
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.
2.
2.
3.
Gyakorlatok
21. RA
Dinamikus webhelyek
A lecke tartalma:
JavaScript a HTML-kdban
Vletlenszer szveg megjelentse JavaScript hasznlatval
Kpvlts felhasznli mveletek alapjn, JavaScript segtsgvel
Tanuljuk meg. ..
24
Ruby: http://www.ruby-lang.org/
21. ra
Dinamikus webhelyek
f347
A Microsoft cg ltal fejlesztett VBScript C Visual Basic Scripting Edition) egy msik gy
js
kiterjesztst kap, s
<script></ script>
cmkeprral
type="text/javascript"
src="/eleresi/ut/script.js">
helyet, mivel szigor rtelemben vve nem olyan tartalomrl van sz, amelynek
a
<body>
</body>
<script>
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
version="l.O"
<!DOCTYPE
html
encoding="UTF-8"?>
PUBLIC
"-//W3C//DTD
XHTML
1.1//EN"
"http://www.w3.org/TR/xhtmlll/DTD/xhtmlll.dtd">
<html xrnlns="http://www.w3.org/1999/xhtml" xrnl:lang="en">
<head>
<tit le>JavaScript
</head>
Example</title>
bngszk ell
from JavaScript.</p>
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
:!
21.1. bra
A javaScript
""""
.,
nyelv kdrszlet
kimenetesemmibensem kln
bzik a tbbitl
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
21.2. pllia
Vletlenszer idzeteket
megjelent weboldal
l.liiEN"
"http:llwww.w3.orgiTRixhtmllliDTDixhtmlll.dtd">
<html xmlns="http:llwww.w3.orgl19991xhtml" xml:lang="en">
<head>
<title>Quotable Quotes<ltitle>
<script type="textljavascript">
<!-- A parancsokat elrejtjk a rgi bngszk ell
function getQuote()
ll Ltrehozzuk a tmbket
quotes = new Array(4);
sources = new Array(4);
ll Feltltjk a tmbket az idzetekkel
quotes[O]
= "When
+
+
years.";
"Mark Twain";
"subjects.";
sources[!]
quotes[2]
= "Will Rogers";
= "They say such nice things about people at "
= "Garrison Keilor";
= "What's another word for thesaurus?";
=
"Steven Wright";
= Math.floor(Math.random()
quotes.length);
"\"<em>"
document.write("<dd>"
"-
"
quotes[i]
sources[i]
lightpink'>\n");
+
"</em>\"\n");
"\n");
document.write("<dl>\n");
new Array(4);
A msodik megjegyzs (amely a tmbk idzetekkel val feltltsrl szl) utn ngy
elemet helyeznk el a tmbjeinkben. Az els, Mark Twaintl szrmaz idzetet
kzelebbrl is szemgyre vesszk:
21. ra
quotes[O]
"When I
sources[0]
Dinamikus webhelyek
my father was so
"
1351
years.";
"Mark Twain";
Azt mr tudjuk, hogy a quotes s a sources szavak a tmbk nevei. Azokat a vltoz
kat azonban, amelyeknek rtket adunk, esetnkben a quotes [O] s a sources [O]
nvvel illetjk. Az idzeteket s a forrsokat tmbk tartalmazzk, s minden tmb
elemnek szma is van. A tmbk els elemei nem az 1., hanem a O. helyre kerlnek.
Ms szvai, a szmozst nem az l, hanem a O sorszmnl kezdjk. Az els idzet
szvegt (azaz az rtket) teht a quotes [O J nev vltozban helyezzk el. Ehhez
hasonlan az els forrs szvege a source [O l vltozba kerl. A karakterlncokat
idzjelbe tesszk. Minthogy azonban a JavaScript nyelvben a parancsok vgt sort
rs jelzi, az albbi kdrszlet problmkat okozna:
quotes[O]
my father was so
I was astonished at
years. ";
gy aztn azt ltjuk, hogy a karakterlncot ms, idzjelbe tett karakterlncokbl fzzk
ssze, az sszefzs jelzsre a pluszjelet C+) hasznlva. A kvetkez kdrszlet az, ame
lyik a leghatrozottabban emlkeztet programozsra. A sor egy vletlenszmot llt el:
i
Math.floor(Math.random()
quotes.1ength);
A fggvny tovbbi rsze nhny kivteltl eltekintve elvileg mostanra ismers. Ahogy
azt mr az ra korbbi rszben lttuk, a document. wri te () parancs arra val, hogy
a bngsz ltal megjelenthet HTML-kdot lltsunk el. A karakterlncokat gy dara
botjuk, hogy nyilvnval legyen, hogy mit kell msknt kezelni - gondolunk itt arra
pldul, hogy amikor az idzjeleket meg kell jelenteni, akkor egy fordtott perjellel
tevdjk ket(\"), de emltl1etnnk a vltozk rtknek behelyettestst is. A tnyle
gesen megjelentett idzet s forrs az lesz, amelyik a quotes [i l s a sources [i] vl
tozkra illeszkedik - az i rtkt a fenti matematikai fggvnyekkel hatrozzuk meg.
Mindazonltal pusztn az, hogy a fggvnyt elksztjk, mg nem jelenti azt, hogy br-
oC;r
Marilla Ftrriox
Glo-..:tlll
f.il<fditX".... ">t"'Y.i!<>ofuno<bloobl:l<lp
-. c
http://www.yourdomaln.com/randomquote.html
-+
Quotable Quotes
Folowiog is arandom quotable quotc_ To
l tWhat'sanoth.rwordfortM.saurus?'"
see
new
-SicvmWnpr
-:l
21.2. bra
A
..
Ne feledjk, hogy az oldalt knnyedn mdostl1atjuk gy, hogy sajt idzeteket, vagy
ms, vletlenszeren megjelentl1et szveget jelentsen meg. A kd quotes s sources
tmbjeit tovbbi rtkekkel feltltve a megjelentl1et idzetek szmt is nvelhetjk
A Quotable Quotes oldalt kiindulsi alapknt hasznlva a parancsfjl mdostsval
knnyen kialaktl1atjuk a sajt rdekes, a megvalstott tletre alapul vltozatunkat
Ha kzben hibzunk, annyi baj legyen. A hibkat akkor tudjuk kijavtani, ha trelme
sek vagyunk, s figyelmesen elemezzk a begpelt kdot. Mindig trlhetnk egy
keveset a kdbl, amg annyira le nem egyszerstjk, hogy mr mkdkpes
legyen- ezt kveten pedig kis rszletenknt tovbb bvtve a kdot ellenrizhetjk,
hogy az jonnan bert rszlet mkdik-e.
A dokumentum-objektummodell
Ha a JavaScript hasznlatval szeretnnk a weboldalainkon megvalstani a felhasznli
beavatkozs lehetsgt, akkor rendszerint valamilyen rtelemben a dokumentum-ob
jektummodel (Document Object Model, DOM) kezelsvel is foglalkoznunk kell.
A DOM a dokumentumok lmatatlan felptst jelenti - nem a HTML-felptst, s nem
is azt a mdot, ahogy a formzs szintjeit hasznljuk, hanem inkbb valamifle ltalno
sabb rvny keretrendszert, illetve trolt Ha a fenti lers kdsnek tnik, annak
az az egyetlen oka, hogy valban az -a trgya nem hatrolhat be egyszeruen.
21. ra
Dinamikus webhelyek
(353
l>
21.3. bra
A katalgusban lv trgyat
tartalmaz oldal a betltst kveten
Az albbi kd felels a 21.3. bra aljn lthat, t kpbl ll csoport negyedik kpnek
onmouseover="javascript:docurnent.product_irng.src
'/path/to/large4.jpg'"><img src="/path/to/small4.jpg"
width="104" height="l04"
style="padding:
4px;
border:
Opx"
alt="photo" /></a>
A 21. 4. brn is az elz oldalt ltjuk- amit a felhasznl nem tlttt be jra-, de itt
a nagy kp helyt mr egy msik kpfjl tartalma tlti ki, ugyanis a felhasznl
az egrmutatt az alul lv kis kpek egyike fl mozgatta. Arnikor a felhasznl
az egrmutatval az oldalon lthat kis kp fl r, a kp nagy mret vltozata
megjelenik az oldal fels rszben.
21.4. bra
Amikor a felhasznl a kis kp fl
viszi az egrmutatt, a nagy kpet
lecserljk
21. ra
Dinamikus webhelyek
1355
sszefoglals
A mai rn megismertk a kiszolgloldali s az gyfloldali parancsfjlok kzti
klnbsget, s megtanultuk, hogy miknt illeszthetnk JavaScript-parancsokat
a HTML-fjljainkba, hogy a webhelynkn felhasznli mveletekre adjunk lehets
get. Tudjuk mr azt is, hogy a JavaScript nyelv document. wri te ( ) parancsa miknt
hasznlhat vletlenszeren kivlasztott idzetek megjelentsre a weboldal betlt
sekor. Vgl pedig kiderlt, hogy mi is az a dokumentum-objektummodell, s hogy
mire hasznlhatjuk
Az elz rkon megszerzett tudsunkat alkalmazva megtanultuk, hogy egy gyflol
dali parancsfjl segtsgvel miknt reaglhatnak a weboldalon lv kpek az egr
mozgsra. A fenti feladatok egyike sem ignyel klnsebb programozsi tudst,
ugyanakkor arra sarkallhatjk az Olvast, hogy elmlytse a tudst a JavaScript vagy
a kiszolgloldali parancsnyelvek valamelyiknek hasznlatban, gy tve alkalmass
a weboldalait a felhasznli mveletek sszetettebb kezelsre.
Krdezz-felelek
K:
V:
Igen. A tmb minden elemnek szerepeJoie kell az oldalon. Olyan pontra jutot
tunk itt, amikor az Olvasnak dntenie kell, hogy az gyfloldali parancsfjl
a megfelel eszkz, vagy okosabb lenne a problmt a kiszolgl oldaln megol
dani. Ha valban sok vletlen idzetnk van, s egy alkalommal mindig csak
egyet szeretnnk megjelenteni, alighanem az a legokosabb, ha az idzeteket egy
adatbzis-tblban troljuk, s egy nylfarknyi kiszolgloldali parancsfjllal kap
csoldunk az adatbzishoz, hogy kiolvassuk a szveget, s beillessszk az oldal
ra. Megolds lehet az is, ha tovbbra is JavaScript-parancsok troljk valamennyi
idzetet, de ilyenkor az a legkevesebb, hogy a JavaScript-fggvnyt nll fjlban
helyezzk el, ugyanis gy a szvegtl fggetlenl trtnhet a karbantartsa.
K:
V:
"
gy elmeslve valsznnek tnik, hogy a hatst a "Lightbox nev JavaScript
knyvtr segtsgvel idztk el. Egy igen npszer programknyvtrrl van
sz, amelyet arra hasznlhatunk, hogy a fontosnak tlt nagy kpek rszleteit
vagy akr egy kpsorozatot mintegy "kirakatba tegynk" az oldal tartalma el.
A programknyvtr ingyenesen hozzfrhet a fejleszt weboldaln,
a http: //www. huddletogether. com/projects/lightbox/ cmen.
A knyvtr teleptse s hasznlata sorn kvessk a hozz kapott utastsokat.
A knyvnkbl eddig megszerzett tudsa segtsgvel az Olvas kpes lesz
a sajt webhelyn munkra fogni a programknyvtrat
Tegyk fel, hogy elksztettnk egy button. gif nev fjlt, benne egy gombot b
rzol kppel. Ksztettnk a kpbl egy egyszer GIF-animcit is, amelyben
a gomb a zld s a fehr sznt vltogatja. Ennek a fjlnak a flashing. gif nevet
adtuk. rjuk meg azt a HTML- s JavaScript-kdot, amely rszint villogtatill kezdi
a gombot, ha a felhasznl fl viszi az egrmutatt, rszint egy a gombra trtn
egrkattintssal megnyithat, a gohere. html fjira mutat hivatkozst is tartalmaz!
2.
3.
document.write('This is a
text string
'
'that
Vlaszok
1.
<a href="gohere.html"
onmouseover="javascript:document.flasher.src='flashing.gif'">
onmouseout="javascript:document.flasher.src='button.gif' ">
<img
2.
src="button.gif"
<a href="gohere.html"
onmouseover="javascript:document.flasher.src='flashing.gif' ">
<img src="button.gif" id="flasher"
3.
A pluszjel
style="border-style:none" /></a>
Gyakorlatok
Van olyan weboldalunk, amely szebb lenne, vagy knnyebb lenne eligazodni
rajta, ha a fljk r egrmutat hatsra az ikonok, illetve egyb kpek
megvltoznnak? Ha igen, ksztsk el a kpek nmileg fnyesebb vltozatait,
s mdostsuk az oldalt az ezen az rn tanultak alapjn.
22. RA
Webes rlapok
A lecke tartalma:
A HTML-rlapok mkdse
A HTML-rlapok mkdse
Mieltt megismerkednnk azokkal a HTML-elemekkel, amelyek lehetv teszik a sajt
rlapjaink elksztst, tekintsk t legalbb fogalmi szinten, hogyan is jutnak vissza
hozznk az rlapokon bevitt adatok. A httrben mkd folyamat (kiszolgloldal,
illetve httrprogram) kezelshez szksg van valamilyen programozsi nyelv ismere
tre, vagy legalbbis arra, hogy kpesek legynk a msok ltal erre a clra rt
kiszolgloldali parancskd rt hasznlatra. Ha a weboldalunk ksztsben eljutunk
erre a pontra, felttlenl ignybe kell vennnk egy hozzrt segtsgt, egybknt
nem marad ms, mint megtanulni az alapokat. Az rlapok egyszer feldolgozsa nem
klnsebben bonyolult feladat, radsul a webes trhelyszolgltatnk j esllyel
szmos kiszolgloldali parancsfjlt bocst a rendelkezsnkre, amelyeket nmi
testreszabs utn munkba llthatunk
22. ra
Webes rlapok
1359
Urlap ltrehozsa
Az rlapok kdja minden esetben a <form> elemmel kezddik, amely brhol llhat
a HTML-dokumentum trzsben. A <form> elem ltalban kt jellemzvel rendelkezik,
amelyeknek a neve method s action:
<form method="post"
action="mailto:me@mysite.com">
360
Az
jellemz azt a cmet adja meg, ahov az rlap adatait kldeni szeretnnk.
action
rnailto:
22.1.
plda
<?xrnl version="l.O"
<!DOCTYPE
encoding="UTF-8"?>
html PUBLIC
"-//W3C//DTD
XHTML 1.1//EN"
Book</title>
type="text/css">
.formlabel
font-weight:bold;
width: 250px;
margin-bottom:
12px;
float: left;
text-align: left;
clear: left;
.formfield
font-weight:normal;
margin-bottom:
float:
text-align:
input,
12px;
left;
left;
textarea,
border:
lpx
select
solid
black;
</style>
</head>
<body>
<hl>My Guest
<p>Please
Book</hl>
sign
my
guest book.
Thanks!</p>
22. ra
Webes rtapok
f361
type="text" name="name"
/></div>
type="text"
name="email"
size="50" /></div>
<div
class="forrnlabel">Please
<div class="formfield">
<input type="checkbox" name="website_response[]" value="I
really like your Web site." />I
I've
seen.<br />
<input
type="checkbox"
as
good as
yours.<br
<input type="checkbox"
no taste
and
me."
/>I
didn't
do
I'm
/>
much
didn't
do
much for
</div>
<div class="formlabel">Choose the one thing you
web site:</div>
<div
class="forrnfield">
<input type="radio" name="lovebest" value="me" />That gorgeous
picture of you.<br />
<input
beautiful
pictures
detailed list of
</div>
<div
class="formlabel">If my
would
it sell?</div>
<div class="formfield">
<select size="3" name="sales">
<option value="Millions, for sure." selected="selected">Millions,
for sure.</option>
<option value="l00,000+
free.">Sell?
None. Everyone will download it for free.</option>
</select>
362
class="formlabel">How
<div
class="formfield">
can
improve
my web
site?</div>
<select name="suggestion">
<option
value="Couldn't be
better."
selected="selected">Couldn't
be better.</option>
<option value="More about the cats.">More about
the
cats.</option>
value="More
about
Elvis.">More
about
Elvis.</option>
</select>
</div>
<div class="formlabel">Feel free to type more praise,
-. gift offers,
etc.
below:</div>
<div class="formfield">
<textarea name="comments"
rows="4"
cols="55"></textarea>
</div>
<div style="float:left;">
<input type="submit"
<input type="reset"
value="Click
value="Erase
Here
and
to
Submit"
Start Over"
/>
/>
</div>
</form>
</body>
</html>
..
_______
.....;.
My Guest Book
'
l
Claoose tlle oe
<J.bo t
my eb site:
te?
r..l r
.... .o .,.....o......... &ifi
offers, etc. below:
l;J
__J
---------------
::;
r
I
::-: ::-nd" S;;:Ia
t Ov e
Ela
l CIK:kHeretoSubmil 1"1=
l=nd====:Jiasstc) ..j
lc=ouldn
==' be=b=='" :::'='='------------,
22.1.
bra
A 22.1. pldban
lthat kd bemutatja
az rlapok szinte
minden lehetsges
beviteli e/emt
22. ra
maxlength="l00"
/>
A type jellemzvel adhatjuk meg, hogy rnilyen tpus rlapelemet szeretnnk alkal
mazni- esetnkben egyszer, egysoros szvegmezrl van sz. (Az egyes tpusokrl
a kvetkezkben bvebben szlunk.)
A size jellemz azt hatrozza meg, hogy nagyjbl hny karakter szles legyen a sz
vegmez. Ha arnyos bettpusr hasznlunk, a bevitt szveg szlessge a tartalmtl
fggen vltoz lehet. Ha a bemenet hosszabb, rnint a megadott szlessg, a legtbb
bngsz automatikusan balra grgeti a szveget.
A maxlength jellemz hatrozza meg, hogy hny karaktert rhat a fell1asznl
a szvegmezbe. Ha ennl tbbet prbl berni, a fls karakterek egyszeren nem
jelennek meg. Az itt megadott hossz fggetlen a szvegmez fizikai mrettl;
hosszabb vagy rvidebb is lehet annl. A size s a maxlength jellemzk csak
a type="text" megadsa esetn hasznlatosak, ugyanis a tbbi beviteli elem
(jellngyzetek, vlasztgombok s egyebek) rgztett mretek.
\Q
if
<input type="text"
type="password" />kdot
(***)tnnek fel. A
a
type
jellemz
size,
maxlength
password
/>helyett az
<input
text
s a
name
Rejtett adatok
az
rlapokon
l>
22. ra
Webes r1apok
f365
Jellngyzetek
A legegyszerbb beviteli vezrl a jellngyzet, amely apr ngyzet alakjban jelenik
name="website_response[]" value="I
l>
so your site didn't do much for
A szgletes zrjelek
so your site
l>
egyetlen vltozba rtkek egsz sorozata kerl, nem csak egy rtk (persze, ha
a felhasznl csak egy jellngyzetet vlaszt, mg ez is elfordulhat). Ha a ltogatnk
az els jellngyzetet vlasztja, az I really like your Web site." karakterlnc kerl
"
(Q
if
Ha gy ltjuk, hogy egy beviteli elem felirata tlzottan kzel ll maghoz az elemhez,
egyszeren helyezznk el pr szkzt az <input l> elem vge s a felirat eleje
kztt, valahogy gy:
<input type="checkbox" name="mini"
type="checkbox"
your Web
<input
<input
name="best_site"
laoked
as
dense,
value="yes"
name="rny_site_sucks"
good
type="checkbox"
pretty
value="yes"
/>
really
like
/>
One
of
the
best
l>
seen.<br
type="checkbox"
site
I'm
I've
name="liked_site"
/>
type="checkbox"
Sites
<input
site.<br
so
as
yours.<br
name="am_dense"
your
site
value="yes"
/>I
sure
wish my
/>
value="yes"
didn't
do
much
/>I
for
have
no
me.<br
taste and
l>
checked
type="checkbox"
really
like
site.<br
<input
of
checked="checked"/>
value="I
really
like
your
/>
type="checkbox"
the
name="website_response[]"
your site."
best
sites
name="website_response[]"
I've
seen." />
One
of
the
value="One
best
sites
I've
seen.<br />
Az XHTML megkveteli, hogy minden jellemz mellett tntessnk fel egy egyenl
sgjelet, majd ezt kveten egy rtket. Mindez vilgoss teszi, hogy mirt hasz
nltuk a
checked= "checked"
alakot az egyszer
c hecked
helyett. Ez a szably
(Az egyik legjobb, amit eddig lttam) ugyanakkor kezdetben nincs bekapcsolva, gy
a ltogatnak r kell kattintania, ha kzlni szeretn velnk ebbli meggyzdst.
Azok a jellngyzetek, amelyek kikapcsolt llapotban maradnak, egyltaln
nem jelennek meg az rlap kimenetben.
name="pet"
value="dog">
dog<br
/>
<input
type="checkbox"
name="pet"
value="cat">
cat<br
/>
<input
type="checkbox"
name="pet"
value="iguana">
iguana<br />
22. ra
Webes rlapok
1367
Ha a felhasznl egynl tbb jellngyzetet kapcsol be, tbb mint valszn, hogy
a parancsfjl csak az utols rtket dolgozza fel, ezrt rdemes jobban tgondolnunk
a jellngyzetek csoportjainak kialaktst, a csoport nevt s az rtkek halmazt.
Vlasztgombok
A vlasztgombak- ahol a csoporton bell csak egy lehetsget vlaszthatunk ki majdnem olyan egyszeren megvalsthatk, mint a jellngyzetek A vlasztgom
bok legegyszerbb alkalmazsi terlett az igen/nem vlasztsi lehetsgek, valamint
az olyan szavazsok jelentik, ahol csak egy jelltre adhatjuk le a voksunkat.
Vlasztgomb ltrehozshoz alkalmazzuk a type=" radio" belltst, s hozzunk
ltre minden lehetsg szmra egy-egy <input />elemet. A name jellemznek egy
csoporton bell adjunk azonos rtket, de ne hasznljuk a jellngyzeteknl megis
mert szgletes zrjelprt:
<input type="radio"
name="vote"
name="vote"
value="no"
l>
<input
type="radio"
l> No <br/>
Vlasztlistk
A grgethet listk s a lenyl listk ltrehozsra egyarnt a <select> elem szolgl,
amelyet az <option> elemmel egytt kell hasznlnunk, amint azt az albbi plda
mutatja:
<select narne="extras"
<option
size="3"
value="Electric
multiple="multiple">
windows" selected="selected">Electric
windows</option>
<option value="Sunroof">Sunroof</option>
<option value="AM/FM Radio">AM/FM Radio</option>
<option
value="CD
Player">CD
Player</option>
<option value="GPS">GPS</option>
</select>
Ha kihagyjuk a
size
jellemzt, vagy a
size= " 1
"
listt kapunk. Itt nincs lehetsgnk tbb elem kivlasztsra - a lista logikailag
egy vlasztgomb-csoporttal egyenrtk. Az albbi pldban bemutatjuk
az igen/nem vlaszts egy jabb mdjt:
<select name="vote">
<option
value="yes">Yes</option>
<option value="no">No</option>
</select>
Tbbsoros szvegmezk
A korbban bemutatott <input type=" text"> jellemzvel egyetlen sornyi szveget
vihetnk be. Ha egyetlen elemmel tbbsoros szveget szeretnnk fogadni, hasznljuk
a <textarea> s </textarea> cmkket. Brmit is rjunk a kdban e kt cmke kz,
az alaprtelmezett szvegknt jelenik meg a szvegmezben. me egy plda:
<textarea name="comments"
information.
</textarea>
Amint azt taln ki is talltuk, a rows s a cols jellemzk a szvegmezben helyet kap
sorok s oszlopok szmt adjk meg. A cols jellemz kiss kevsb pontos, mint
a rows, mivel az egy soron belli karakterek szmra ad becslst. A tbbsoros szveg
mezk grdtsvval is rendelkeznek, gy a felhasznl a lthat mretknl hosszabb
szveget is elhelyezhet bennk.
22. ra
Webes rtapok
f369
Az rlapadatok elkldse
Minden rlapon szerepelnie kell egy gombnak, amellyel elkldhetjk a kapott adatokat
a kiszolglnak. A
val ue
a gombon:
<input
Now!"
/>
A kapott szrke gomb mrete megfelel majd a value jellemzben megadott szvegnek.
action
jellemzben
value="Clear
This
Form
and
Start
Over"
l>
gy a
button. gif
src="button.gif"
al t
Now!"
/>
alt="Order
vagy a
<img />
s ty le.
sszefoglals
Ezen az rn bemutattuk, miknt kszthetnk HTML-rlapokat, amelyek rvn
a webhelynk ltogati adatokat kzlhetnek velnk. A kapott adatok kezelsre nem
vllalkoztunk, ugyanis ehhez kls parancsfjira van szksg.
Megismerkedtnk az rlapok legfontosabb elemeivel, valamint megtanultuk azt is,
hogy miknt rtelmezik a parancsfjlok ezeknek az elemeknek a neveit s rtkeit.
Ha a ksbbiekben eljutunk odig, hogy elksztsk a httrben fut parancsfjlt,
a fellet rszleteit mr ismertnek vehetjk.
A 22.1. tblzatban sorra vesszk az ezen az rn bemutatott HTML-elemeket s
-jellemzket.
22.1. tblzat
-jellemz/e
Elem/jellemz
Lers
<input />
type=" vezrl_tpusa"
name=" nv"
src=" kp_url"
A felhasznlt kp forrsfjlja.
checked="checked"
size=" szlessg"
maxlength=
"maximlis_hossz"
<textarea>...</textarea>
szma.
Tbbsoros szvegbeviteli elem, amelyben alaprtelme
zett szveget is elhelyezhetnk.
name=" nv"
rows=" sarok_szma"
co ls="karakterek_szma"
name=" nv"
size=" elemszm"
szma.
<option>...</option>
selected="select ed"
value=" rtk"
22. ra
Webes rlapok
(371
Krdezz-felelek
K:
V:
K:
V:
Ismtls
Ez a rsz ismtl krdsekbl s vlaszokbl ll, amelyek segtsgvel megszilrdthat
juk az ebben a leckben szerzett tudsunkat. Prbljuk megvlaszolni a krdseket
a vlaszok ellenrzse eltt.
Ismtl krdsek
1.
name="mailto"
value="you@yoursite.com"
/>
2.
sign-in. gif
Vlaszok
Az albbihoz hasonl HTML-kddal clt rnk (termszetesen a megfelel
1.
Please
method="post"
Sign
In</hl>
action="/cgi/generic">
<p>
<input
type="hidden"
Your
name:
Your
sex:
<input
age:
<input
size="20"
/><br />
name="sex" value="male"
name="sex"
<input type="text"
value="you@yoursite.com" />
name="name"
<input type="radio"
<input type="radio"
Your
name="mailto"
type="text"
value="female"
name="age" size="4"
type="text"
/>
male
/> female<br
/><br
/>
/>
name="email" size="30"
l>
/>
<input
type="submit" value="sign
<input
type="reset" value="erase"
in"
l>
l>
</p>
</form>
</body>
</html>
2.
type="submit"
value="Sign
In"
/>
...erre:
<input
type="image"
src="sign-in.gif"
alt="Sign
In"
/>
Gyakorlatok
23. RA
Webhelyek sszelltsa s
kezelse
A lecke tartalma:
Knyvnk nagy rszben azzal foglalkoztunk, hogy miknt pthetjk fel a sajt webes
tartalmunkat a szveges rszektl a grafikn t a multimdis elemekig. Idkzben
tettnk pr megjegyzst arra vonatkozan, hogy miknt rdemes gondolkodnunk
a tartalom letciklusrl - ezt az rt azonban teljes mrtkben annak szenteljk, hogy
a munknkat egszben tekintsk t.
Bemutatjuk, miknt szervezhetnk s jelenthetnk meg tbb weblapot gy, hogy
a ltogatink knnyedn eligazadjanak kzttk, anlkl, hogy elvesztenk a fonalat.
Tanulunk arrl is, hogyan tehetjk emlkezetesebb a webhelynket, hogy az egyszeri
ltogatinkbl visszatr vendgek vljanak. A webfejlesztk "ragadsnak" nevezik
374
nll feladat
23. ra
f 375
A 23.1. bra egy weboldal els rszt mutatja, amely jobban szolglja a clkznsgt
egyetlen hossz oldalknt, mint tbb oldalbl ll webhelyknt. Az oldal - ms beve
zet oldalakhoz hasonlan - azzal indul, hogy rviden lerja, rnit tartalmaz, s kinek
szl. Ezt kveti egy rszletes tartalomjegyzk, amelynek a pontjai egyenesen az oldal
megfelel rszeihez visznek. Az oldal sszesen nagyjbl nyolc nyomtatott oldalnyi
anyagat tartalmaz, amely bevezet az ingatlanvsrls vilgba - ezt valban rdemes
lehet kinyomtatni, s esetleg jegyzetekkel kiegszteni.
=->@
l g-:
.!!._
!:!
'{}
">r> http,//uk.ba.yhoo.<omlmortg;>g"'guod-ounbuying.html
c.-...-- ..
Charcol
-....
f_..__-,.nguide
R...:IOI,tlQ'1,1IltD0.01"0
on!NI
Acflh.-potflolls....n.rt
buyirog)ICMa'ftnt
firH
....bymJ
.
...
House Buying
Even expertenced home owners llnd buying a propetty a complicated and conf\Jsing uerdst,
partlcularty as ITs somelhino most
OUr simple guide takes you ali the way from lioding the rlght property to the day you move ln
Just read on or seled the area that lnlerests you from the headinos betow
ChQos!noaoo
r carty
Elmfogaprooertr
Chgosingamortgage
Finance Features
Mortgageac;Mcp
Cheaoerohonecal!s
Savmgsaccoums
Mortgaoecalculators
Personal loans
!;OIDJli!llil!l
Andinga sollator
Hous1namarket
llillllmllillll
ScoHangangaarumpmg
Confkujjoga 5urvey
El:chanQ!ngcontrac;ts
CompleQngand m(Njngln
Conoratylat!ons!
IWn
o...
.f;
23.1. bra
tartalomjegyzk segt, hogy eligazadjunk egy hossz weboldalon
A j
Arnint a 23.2. brn lthatjuk, az oldal egyes rszeinek vgn egy-egy hivatkozst tal
lunk, amely visszaugrik a tartalomjegyzkhez, gy az oldalon hasonlan naviglhatunk,
mintha egy tbb oldalbl ll webhelyen lennnk. Mivel a tartalomjegyzk j hivatko
zsgyjtemnyt ad, a ltogatk sokkal szvesebben trolnak knyvjelzknt, illetve
mentenek lemezre egyetlen oldalt nyolc-tz msik helyett.
A knyv eddigi rszeiben ltott csillog-villog grafikk s oldaltervek utn persze
knny megfeledkezni arrl, hogy rnilyen elnykkel rendelkezik a j reg vzlat,
amely igen hatkony eszkzt ad a keznkbe a hosszabb weboldalak kidolgozshoz.
_
,
,...,
(;l
lll..fJ..f
ti
F l ndlng property
Once you ha-n dedded what sort of property you are lookfng lor and the ar ea where you want
to live, contad as many local estate agents as posslble Ask them to send you detaUs of
sutable properties ontheir books on a regutar basis
Once you have Identitled a proparty you are Interesled ln, it ls wotth calling the relevant estate
agent once a week or so to ensura you get an eatty look at propertles which have only JUSt
been ptacedwith the agent ln this way. theywltl knowyou are a sertous buyerand theywHI
generally make the ellort to contad youwtlen new properties come up.
Ona you get started. you WIO probabty see a lot of ditfereni properties ln a talrty short perlod of
time. Keep a racord of each one you have 'ilsited, togethfiwith a few notes remtoding you of
ils good and bad polnts Then you can look bact on this Ust to cheCk Ihat you are still futfilling
,our requrments in Ihe propertles you ara t.Aewlng
Billlm..l<>.l2l
Choosing mortgge
n ls Important to organlse your mortgage
property The loan maytake a fewweeks to process. andthe person you are buytng from (and
the estate agent) Wlfl want to know your mortgage lender ls ali set to go
If you want to arrange mortgage nnance belore you\'e even found your PfOperty you can get an
Approval ln Plinde rrom your Cllcsen lender This Approvalls onen hand'{ to corMnce !he
vendor that you ar e a genuina purd'laser. we can arrange lor your mortgage application to be
submltl:ed as an Approval in Prlndple, just make sure you manifon this when submittlng you r
.
aoDIIcation online.
...
Done
23.2. bra
hossz weboldalak szakaszai vgn mindig helyezznk el egy-egy hivatkozst
a tartalomjegyzkre
(800
A honlap vagy kezdoldal szerepe egyrszt abban ll, hogy megjelentse a cget
23.
ra
. c
Apply Ortlln./ Con U/ Self-/ Srt Mp
0 E-2.h!.Y!:!rY.:..............
Rowan
Look
Future Students
Listen
Learn
Undergraduate
The Graduate School
Non-Traditlonal/ du ll
Summer Sessfon
Current students
Faculty a Staff
Parents a Fa mily
Community a. Vlsitors
S.J. Tech Park
Ron Boulevard
Alumni
Glve to Rowan
Follow Rowa
--, ......
More News>>
l RowanTo
(m
News
Bealender
Athletlcs
, Rowan Radio
Vllators Center
Colleges/Campuses
Admissfons
Ademics
Administration
BulitiUS
Summ.rSulon
Acaclmh: C.l1ndr
PJ.sKent'
CommunicltiDn
Tu1t1onl.
A.r:.ac!t1mic:Pnl9r.ms
PJ'liYUt'SOffiC:tl
Eonug:nctiS/Ciosings
Univar1oryhoalatan1
Ruurch
St:udtll'rtAffalrs
Ut1dtl,..du1tt1
Grduua
Contm11"9 l. Onhn EdiiUtiDII
MnlnciiiAtdi.Schollhopl
PublicSif.ty
GBC!unSchool
Profuton"'l l. Contlnuon; Ed.
VIPl.oglnfvrPnllpKts
TDIIr$&0pu HDllill
ubrr S.V.cs
R-ohrtvforCI lltiS
Jobs.'employmtltn: R_.fl
Humnll.uourc..
C..md.nC.mpul
F..tFcu
SupportOtl.sk
Bond ofTrun"s
Eduction
En;/n-ring
..
Offh:
Centtii"S&Inntut
Hlstoryi.Miasoon
+'
Done
23.3. bra
Az itt lthat egyetemi kezdoldal egyszer megjelensvel, szikr, de lnyegre tr grafikai
elemeivel s tlthat szerkezetvel szinte csbtja a ltagatt a felfedezsre
\Qie"
Oodoers Win
23.4. bra
Az ESPN.com MLB szakasza
23. ra
1 379
kvncsiak, az oldal jobb szln kell keresglnnk Ha pedig a webhely egy msik
rszre szeretnnk tovbbhaladni, vagy visszatrni a foldalra, fell talljuk a navig
cis elemeket.
camps
"
23.5. bra
Az ESPN.com NFL szakasza
380
indie Now
Only $299
Save up to JO't
up to 90% off l
Get FREE Two-1
three months v
of Amazon Prirr
, Shoptextbooks
azon ndle>
23.6.
bra
Jllehet az Amazon elsdleges clja a termkek eladsa, mgiscsak kell nmi tjkozta
tst adnia arrl, hogy voltakppen mi is ez a cg valjban, miknt lphetnk vele
kapcsolatba, st a keresked-vsrl kapcsolat javtsra is rdemes mdot adnia.
Az ilyesfajta tjkoztatst a weboldal als rsznek, vagyis lblcnek hivatkozsait
23.
ra
c:;"
&
{8
.sl:.ubuclcs..com/aboutus/
ti]
l.or:ntGdonol . Se:m:h ,
our coffees
the
COI'f1)ilny
iwestor relabons
YollJ'
our stares
starbuc:ks card
at home
Ston! Loeater
for bus1ness
ent.r location
Go
areer center
press room
olobal responsi:Jity
buSiless ethic3 &. cOI'll)bnce
iltemaoonal stares
rumorre.sponse
m>ort:ant produrt 11fo
jip-
::;no:!
.--
rc.lt
oareer opportunitieB
at starbucka
our
l nyeBor Bc!otJQns
Cur Global Rgoonstbdtty
Don
23.7.
bra
kott fels sv/bal oldali sv felosztstL Itt ugyanis a bal oldali sv navigcis elemei
(vagyis ez esetben a msodiagos navigci) egy lenyl menben is megjelennek a f
navigcis elemek alatt (a 17. rn megtanultuk, miknt kszthetnk ilyen menket).
Brmelyik f navigcis elem fl helyezzk az egrmutatt, ilyen lenyl menkhz
jutunk. Ez gyakorlatilag azt jelenti, hogy a ltogatk eltt kzvetlenl ott van
az oldaltrkp, hiszen gy egyetlen kattintssal eljutl1atnak a webhely egyik pontjrl
egy tetszleges msik pontra.
BAWSI
WOMEN
ATHLETES
MAKING A
DIFFERENCE
- 0\feNie.W
Mission Stalement
The aay Area
Women's SporU
lnillative (BAWSI) IS
whtch women
hoil1! and wholenass to cur CDmmuntv. Faonded in 2005 bv Olymptc and World Cup soc:c:er stars
Brarn:l Chaga,n and Julie Foudy and P-tarlene
CyberAays women's prnfeSSo.-...1 soccer team, SAWSI Pf'"Ovld6 a meanortOfui oath for
11tl"oletes to
wOlTlen
become a moe ws1ble and vatued pan ot the Bay P.rea $pOrts culture
BAWSJ's history
The canpt of SAWSI was MPed by one of the most
pectliOJiar act11eveme.nts '" Ywomen's sports
holstory
and
1999
the
U.S
ef a
threeweelt. 16-te.a!"Tl
23.8. bra
A BAVSJ.org webhelyen minden f navigcis elemhez almen tartozik
23. ra
1383
szrevehetjk azt is, hogy az oldals navigcis ablak "Overview" (ttekints) pontjnak
stlusa kiss eltr a tbbitl (lila s vastagabbak a beti), ami jelzi a ltogatknak, hogy
melyik weblapon is vannak ppen. Ez az apr kpi jelzs finoman eligazt a webhely
szerkezetn bell.
Rengeteg klnbz navigcis rendszer ltezik, s szmos mdon jelezhetjk a lto
gatknak, hogy hol tartzkodnak az adott pillanatban, s merre haladhatnak tovbb.
Mindazonltal rdemes tudnunk, hogy tbb kutats is kimutatta, hogy az emberek
sszezavarodnak, s elvesztik a biztonsgrzetket, ha htnl tbb vlasztsi lehet
sggel kerlnek szembe, s igazn akkor rzik magukat biztonsgban, ha t vagy
annl kevesebb lehetsg kzl kell vlasztaniuk. gy ht prbljuk elkerlni, hogy
egyms mellett tnl tbb hivatkozst (akr szveges, akr grafikus alakban) knljunk,
htnl tbbet pedig semmi esetre sem alkalmazzunk. Az Amazon.com ez esetben
nmikpp mentessget lvez, hiszen itt egy internetes nagyruhzrl van sz, ahol
a fel11asznlk eleve elvrjk, hogy rengeteg "osztly" kzl vlaszthassanak Ha azon
ban mr htnl tbb hivatkozst kell megjelentennk, felttlenl osszuk fel a listt
384
A kd rtelmezse megjegyzsekkel
A JavaScript-parancsfjlokon bell a megjegyzssarok elejn a
11
karaktereket kell
1 *,
utnuk pedig a
*1
<script>
s a
<style>
</script>
s a
</style>
< ! --
cmkt
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
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.
2.
3.
4.
(kkeslila).
5.
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.
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>
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
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
Krdezz-felelek
K:
V:
K:
V:
Ismtls
Ez a rsz ismtl krdsekbl s vlaszokbl ll, amelyek segtsgvel megszilrdthat
juk az ebben a leckben szerzett tudsunkat. Prbljuk megvlaszolni a krdseket
a vlaszok ellenrzse eltt.
Ismtl krdsek
1.
2.
3.
Vlaszok
1.
2.
3.
Gyakorlatok
24. RA
Segtsg
keresshez
A lecke tartalma:
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:
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.
az
oldalainkat
24. ra
Segftsg a keresshez
1393
Bing-Keressk fel a http: //www. bing. com/docsl submit. aspx cmet, rjuk
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:
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.
<title>
"
a tmakrnkhz- gy pldul az "tel" helyett jobb vlaszts a "hzias dli telek .
Ha sszegyjtttk ezeket a kifejezseket, gondoskodjunk rla, hogy tbbszr is
24. ra
Segtsg a keresshez
(395
form
flattener."
l>
<meta name="keywords"
content="cockroach,roaches,kill,squish,supersquish"
l>
<me ta 1>elemben
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"
/>
robots. txt
mit jelent ez, s hogyan kell csinlni - ha mgsem, hasznos segtsget kaphatunk
a
24.1. p6lda
html
PUBLIC
"-//W3C//DTD
XHTML
1.1//EN"
"http: l/www.w3.org/TR/xhtmlll/DTD/xhtmlll.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
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">
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">
Science
to
say
you're
How about
the<br l>
quick
hearing about
but
summary
still
"fractals" and
aren't
of some
key
too
concepts:</p>
<Ol>
<li><p>Even the
beautiful
when
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
simulated on
controllable.
"butterfly flapping
richly
using
fingernail.</p></li>
predictable
detailed
and
over,
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
new
the
lines
concept
texture
is
useless
with
called "fractal
and
complexity
of
up
win prizes
in every
artwork
coming
diagnose
at
graphics
branch
of
out
their
of
turbulence
"dynamical
science.
plotters.
appear
diseases"
in
when
find
"Strange
celestial mechanics.
fractal
rhythms
fall
24. ra
out of sync.
videos
Segtsg a keresshez
(397
of their research.</p></li>
</ol>
<p>Think all these folks may be on to something?</p>
</div>
<div style="text-align:center">
<a href="http://netletter.com/nonsense/"><img src="findout.gif"
alt="Find
</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:
<meta />
,jractaf'
Ajractal kulcsszt
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.
A 24 .l.
<?xm1 version="1.0"
encoding="UTF-8"?>
XHTML
1.1//EN"
"http://www.w3.org/TR/xhtmlll/DTD/xhtmlll.dtd">
<html xm1ns="http://www.w3.org/1999/xhtml"
xml:lang="en">
<head>
<title>Fracta1 Central:
and
-. Complexity</title>
<meta
name="description"
content="A
comprehensive
comp1exity
theory."
guide
to
fractal
/>
content="fractal,fractals,chaos
science,chaos
/>
</head>
<body>
<div
style="text-align:center">
<img src="fracta1accent.gif"
alt="Fracta1 Central:
Guide to
style="width:133px;
border-width:4px;
float:left; padding:6px;
text-align:center;
border-sty1e:ridge">
fractal software,
the
online
-. store.<br />
<a href="orderform.html"><img src="orderform.gif"
style="border-style:none"
alt="Order
Form"
/></a>
</div>
<div
sty1e="f1oat:1eft; padding:6px">
Science,
to
Fractal
Geometry,<br />
How
hearing about
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
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
over
your fingernail.</p></li>
deeply
"iterated"
controllable.
"butterfly
strangely amplified
to
have
flapping
major
Why?
its
consequences
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
fractals
patterns
up
pop
in
new
concept called
"fractal
storm
every
branch
and complexity of
clouds.</p></li>
of
science.
shows,
their chaotic
Physicists
find
24. ra
Segftsg a keresshez
f399
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
</div>
<div style="text-align:center">
<a href="http://netletter.com/nonsense/"><img src="findout.gif"
alt="Find
Out More"
style="border-style:none"
/></a>
</div>
</body>
</html>
I
of
google.com,
visited
the
your website
major
and
search errgines
are
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.
( <hl>,
<h2>, <h3>) .
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
-jeiJemz1e
Elem/Jellemz
Lers
<meta l>
24. ra
Segtsg
keresshez
1401
Jellemzk
Ezzel adhatjuk meg, hogy milyen tipus adatot trolunk
name=" nv"
content=" rtk"
http-equiv,
Krdezz-felelek
K:
V:
K:
V:
K:
V:
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:
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>
a felhasznJk helytelentik.
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.
2.
3.
Vlaszok
1.
<head>
<meta
/>elemeket az ol
rszben:
<meta name="description"
content="dog adoption information and services"
<meta name="keywords"
content="puppy,
dog,
/>
adoption"
/>
Gyakorlatok
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.
,
Webbngszk
Apple Safari:
http://www.apple.com/safari/
Google Chrome:
http://www.google.com/chrome/
Mozilla Firefox:
http://www.getfirefox.com/
Opera:
http://www.opera.com/
Weboldalak tervezse
Web Monkey:
http://webmonkey.wired.com/webmonkey/
Szaftver
Adobe Creative Suite
http://www.adobe.com/products/creativesuite/
Corel PaintPro:
http://www.corel.com/
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/
HTML-sznkdok:
http://htmlcolorcodes.org/
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/
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/
JavaScript.com:
http://www.javascript.com/
Bluehost Cwebtrhely-szolgltat):
http://www.bluehost.com/tell_me_more.html
DrearnHost (webtrhely-szolgltat):
http://www.dreamhost.com/hosting.html
Webhely-zemeltetsi szolgltatsok
A Google eszkzei webmesterek szmra:
http://www.google.com/webmasters/
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
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.
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
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.
-->
Kezd- s zrcmke
Ktelez/ktelez.
Jellemzk
Nincsenek.
Ures?
Igen.
Megjegyzsek
<!doctype .
Hasznlat
>
B fggelk
<body>
f 409
</body>
Hasznlat
Kezd- s zrcmke
Elhagyhat/elhagyhat.
Jellemzk
Ures?
Nem.
Megjegyzsek
<div>
</div>
Hasznlat
rendezsre szolgl.
Kezd- s zrcmke
Ktelez/ktelez.
Jellemzk
Ures?
Nem.
Megjegyzsek
'
Hasznlat
Ktelez/ktelez.
Jellemzk
Ures?
Nem.
Megjegyzsek
Hasznlat
Kezd- s zrcmke
Jellemzk
Elhagyhat/elhagyhat.
nyelvi
prof ile=" url" -A
meghatroz URL.
410
res?
Megjegyzsek
amelynek a nyit
<html>
<head>
elem utn s a
elem lehet,
<body>
elem eltt
kell llnia.
A
profile
<hr />
Hasznlat
Ktelez/tiltott.
Jellemzk
Ures?
Igen.
Hasznlat
A html
Kezd- s zrcmke
Elhagyhat/elhagyhat.
Jellemzk
Ures?
nyelvi
Megjegyzsek
em.
vltozatinformci a
bevezetsben is
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.
rtelmezshez.
Ures?
Igen.
scheme
B fggelk
l 411
<span>... </span>
Hasznlat
sval.
Kezd- s zrcmke
Ktelez/ktelez.
Jellemzk
U res?
Nem.
Hasznlat
Ktelez/ktelez.
Jellemzk
nyelvi
em.
Ures?
Megjegyzs
XHTML
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
Kezd- s zrcmke
Ktelez/ktelez.
Jellemzk
Ures?
Nem.
<br />
Hasznlat
Kezd- s zrcmke
Ktelez/tiltott.
Jellemzk
Ures?
Igen.
<cite>... </cite>
Hasznlat
Hivatkozsra szolgl.
Kezd- s zrcmke
Ktelez/ktelez.
Jellemzk
Ures?
Nem.
<code>...</code>
Hasznlat
Kezd- s zrcmke
Ktelez/ktelez.
Jellemzk
Ures?
Nem.
<hl>
</hl>- <h6>
</h6>
Hasznlat
Kezd- s zrcmke
Ktelez/ktelez.
Jellemzk
Ures?
Nem.
<p>... </p>
Hasznlat
Kezd- s zrcmke
Ktelez/ell1agyhat.
Jellemzk
Ures?
Nem.
<pre>... </pre>
Hasznlat
Kezd- s zrcmke
Ktelez/ktelez.
Jellemzk
Ures?
Nem.
<strong>... </strong>
Hasznlat
Kezd- s zrcmke
Ktelez/ktelez.
Jellemzk
U res?
Nem.
<sub>... </sub>
Hasznlat
Kezd- s zrcmke
Ktelez/ktelez.
JellemzK
U res?
Nem.
Hasznlat
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
Kezd- s zrcmke
Ktelez/ktelez.
Jellemzk
Ures?
Nem.
<big> ...</big>
Hasznlat
Kezd- s zrcmke
Ktelez/ktelez.
Jellemzk
Ures?
Nem.
<i>... </i>
Hasznlat
Kezd- s zrcmke
Ktelez/ktelez.
Jellemzk
U res?
Nem.
<srnall>... </srnall>
Hasznlat
Kezd- s zrcmke
Ktelez/ktelez.
Jellemzk
Ures?
Nem.
<tt>... <Itt>
Hasznlat
Kezd- s zrcmke
Ktelez/ktelez.
Jellemzk
Ures?
Nem.
XHTML-listk
Listk segtsgvel strukturltabb formban jelenthetjk meg a szvegeket. A listk
egymsba gyazhatk.
Hasznlat
Kezd- s zrcmke
Ktelez/elhagyhat.
Jellemzk
U res?
em.
Megjegyzsek
<dl>
</dl>
Hasznlat
Kezd- s zrcmke
Ktelez/ktelez.
Jellemzk
Ures?
Nem.
Megjegyzsek
Hasznlat
Kezd- s zrcmke
Ktelez/elhagyhat.
Jellemzk
Ures?
Megjegyzsek
em.
Szveget kell tartalmaznia (amely szvegformz elemekkel
mdosthat).
Hasznlat
Kezd- s zrcmke
Ktelez/elhagyhat.
Jellemzk
Ures?
Nem.
B fggelk
XHTML
Hasznlat
Kezd- s zrcmke
Ktelez/ktelez.
Jellemzk
Ures?
Nem.
Megjegyzsek
Hasznlat
Kezd- s zrcmke
Ktelez/ktelez.
Jellemzk
Ures?
Nem.
Megjegyzsek
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.
Hasznlat
Kezd- s zrcmke
Ktelez/ktelez.
Jellemzk
tpusok
shape=" rtk" -gyfloldali kptrkpek meghatrozst
szg) hasznlatvaL
coords=" rtkek" -Az alakzat mrett lltja be kppontban
Ures?
(Q
if
megengedettek.
coords
<base />
Hasznlat
viszonytani.
Kezd- s zrcmke
Ktelez/tiltott.
Jellemzk
Ures?
Igen.
Megjegyzsek
<link/>
Hasznlat
Kezd- s zrcmke
Ktelez/tiltott.
Jellemzk
zstpusok.
media="megjelent" -A clkzeget hatrozza meg
Igen.
Megjegyzsek
charset, rev
target
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
Kezd- s zrcmke
Ktelez/ktelez.
Jellemzk
Ures?
Nem.
Megjegyzsek
Elhagyhat.
B fggelk
f 417
<COl/ >
Hasznlat
Ktelez/tiltott.
Jellemzk
szma.
wid th=" szlessg" -Oszlopszlessg szzalkban,
U res?
Igen.
Hasznlat
Kezd- s zrcmke
Ktelez/elhagyhat.
Jellemzk
szma.
width=" szlessg" -Az oszlopok szlessge.
align=" igazts" -A cellk tartalmt vzszintesen igaztja
U res?
Nem.
Hasznlat
Kezd- s zrcmke
Ktelez/ktelez.
Jellemzk
adja meg.
cellpadding=" cellakit lts" -A cellkon belli
Ures?
summary
Hasznlat
Kezd- s zrcmke
Elhagyhat/ell1agyhat.
Jellemzk
B fggelk
Nem.
Ures?
(Q
if
<td> .. -<ltd>
Hasznlat
Kezd- s zrcmke
Ktelez/elhagyhat.
Jellemzk
mt adja meg.
colspan=" oszlopszm" -A cella ltal tfogott oszlopok
a cellhoz.
scope="hatkr"
Nem.
Hasznlat
Kezd- s zrcmke
Ktelez/ell1agyhat.
Jellemzk
Ures?
Nem.
Az
valign
Hasznlat
Kezd- s zrcmke
Ktelez/elhagyhat.
Jellemzk
Nem.
B fggelk
Az
( 421
Hasznlat
Kezd- s zrcmke
Ktelez/elhagyhat.
Jellemzk
Ures?
Nem.
Az
Hasznlat
Kezd- s zrcmke
Ktelez/elhagyhat.
Jellemzk
Ures?
Nem.
<area l>
Hasznlat
Kezd- s zrcmke
Jellemzk
Ktelez/tiltott.
mag-, nyelvi, esemnyshape=" rtk" - gyfloldali kptrkpek meghatrozst te
latvaL
coords=" rtkek" -Az alakzat mrett lltja be kppontban
mvelet.
al t=" helyettest_szveg" -Helyettest szveget
jelent meg.
Ures?
Igen.
<img l>
Hasznlat
Kezd- s zrcmke
Ktelez/tiltott.
Jellemzk
szveg.
height="magassg" -A kp magassga.
width=" szlessg" -A kp szlessge.
border=" szegly" -A szegly szlessge.
hspace=" vzszintes_trkz" - A kpet az egyb
URL-je.
ismap=" ismap" -Egy kiszolgloldali kptrkpet azonost.
Ures?
Igen.
B fggelk
hspace
2 gyorstalpal (423
Hasznlat
Kezd- s zrcmke
Ktelez/ktelez.
Jellemzk
Ures?
Nem.
Hasznlat
Kezd- s zrcmke
Ktelez/ktelez.
Jellemzk
mag-, nyelvi, esemnydeclare=" declare" -Olyan jelz, amely csak bevezet egy
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
t kell adni.
Ures?
(Q
if
em.
hspace
<param />
Hasznlat
Kezd- s zrcmke
Ktelez/tiltott.
Jellemzk
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.
Hasznlat
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
U res?
Nem.
Megjegyzsek
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
Kezd- s zrcmke
Ktelez/ktelez.
Jellemzk
U res?
Nem.
B fggelk
<fieldset>... </fieldset>
Hasznlat
Kezd- s zrcmke
Ktelez/ktelez.
Jellemzk
Ures?
Nem.
Hasznlat
Kezd- s zrcmke
Jellemzk
Ktelez/ktelez.
mag-, nyelvi, esemnyaction="mvelet_URL-je" - A kiszolgli mvelet URL-je.
method="post/get" -A
hasznland HTfP-fggvny.
internetes hordoztpust
karakterkdolsok
felsorolsa.
Ures?
Nem.
Hasznlat
Kezd- s zrcmke
Ktelez/tiltott.
Jellemzk
text,
name=" nv" -A
vezrl neve (a
submit
reset
tpusok
lltja.
disabled=" disabled"
-Letiltja a vezrlt.
s iz e=" mret" -A
text
password
megadva.
maxlength=" legnagyobb_hosszsg" -A
legfeljebb
alt=" helyettest_szveg"
gyfloldali kptrkp
URL-je.
accept=" fjltpu sok" -A
<label>
Igen.
Ures?
</label>
Hasznlat
Kezd- s zrcmke
Ktelez/ktelez.
Jellemzk
Ures?
Nem.
for=" vezrl" -A
Hasznlat
Kezd- s zrcmke
Ktelez/ ell1agyhat.
Jellemzk
-Letiltja a vezrlt
port szmra.
value=" rtk"
<select>
Nem.
Ures?
</select>
Hasznlat
Kezd- s zrcmke
Jellemzk
Ktelez/ktelez.
mag-, nyelvi, esemny
name=" nv"
Ures?
a vezrlt.
Nem.
<textarea> ...</textarea>
Hasznlat
Kezd- s zrcmke
Ktelez/ktelez.
Jellemzk
-A vezrl neve.
B fggelk
l 427
magassg.
disabled="disabled" - Letiltja a vezrlt.
readonly= "readonly" -A megjelentett szveget
rsvdett teszi.
Ures?
em.
Megjegyzsek
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.
Hasznlat
Kezd- s zrcmke
Jellemzk
Ures?
Nem.
Hasznlat
Kezd- s zrcmke
Ktelez/ktelez.
Jellemzk
parancsnyelv.
src="parancsfjl_URL-je" - Egy kls parancsfjl URL-je.
de fer=" de fer" -Azt jelzi, hogy a parancskd nem vltoz
Nem.
Megjegyzsek
llthatjuk be.
,
Altalnos XHTML-jellemzk
A fentiekben a kvetkez hat magjellemzt rvidtettk mag- nven:
accesskey=" gyorsbillenty"
tabindex=" tabultorsorrend"
rendben.
A fentiekben az albbi kt nyelvi jellemzt a nyel v i rvidtssel jeleztk
-A nyelv azonostja.
dir=" szvegirny"
onelick=" esemnykd"
kattintottak.
ondblclick=" esemnykd"
kattintottak.
onmousedown=" esemnykd"
tartjk.
onmouseup=" esemnykd"
onmouseover=" esemnykd"
onmouseout=" esemnykd"
onkeypress=" esemnykd"
onkeydown=" esemnykd"
onkeyup=" esemnykd"
egeret megmozdtottk.
Mretbellt CSS-stflustulajdonsgok
A mretbellt tulajdonsgokra jnhny eSS-stlusszably tmaszkodik valamilyen
formban.
height
Hasznlat
Ertkek
auto,hossz,%
line-height
Hasznlat
Ertkek
normal,hossz,%
max-height
Hasznlat
Ertkek
none, hossz,%
B fggelk
f 429
max-width
Hasznlat
Ertkek
none,hossz,%
min-height
Hasznlat
Ertkek
hossz, %
min-width
Hasznlat
Ertkek
hossz,%
width
Hasznlat
Hasznlat
Ertkek
auto,hossz,%
color
Hasznlat
Ertkek
sz n
direction
Hasznlat
halad).
Ertkek
ltr,rtl
font
Hasznlat
Ertkek
font-style,font-variant,font-weight,
font-family
Hasznlat
betcsald_neve,generic-family
font-size
Hasznlat
Ertkek
xx-srnall,x-small,small,medium,large,x-large,
xx-large,smaller,larger,hossz,%
font-style
Hasznlat
Ertkek
normal,italic,oblique
font-variant
Hasznl-at
Ertkek
normal, small-caps
font-weight
Hasznlat
Ertkek
letter-spacing
Hasznlat
Ertkek
normal,hossz
text-align
Hasznlat
Ertkek
text-decoration
Hasznlat
Ertkek
none,underline,overline,line-through,blink
text-indent
Hasznlat
Ertkek
hossz, %
text-transform
Hasznlat
Ertkek
none,capitalize,uppercase, lowercase
white-space
Hasznlat
Ertk ek
normal,pre,nowrap
B fggelk
l 431
word-spacing
Hasznlat
Ertkek
normal,hossz
Httrbellt CSS-stflustulajdonsgok
Az oldalak, illetve az azokon szerepl egyes elemek htternek mdostsra tbb
ess-stlustulajdonsg is hasznlhat.
background
Hasznlat
Ertkek
background-color,background-image,
background-repeat, background-attachment,
background-position
background-attachment
Hasznlat
Ertkek
scroll,fixed
background-color
Hasznlat
Ertkek
color-rgb,color-hex,color-name,transparent
background-image
Hasznlat
Ertkek
url,none
background-position
Hasznlat
Ertkek
background-repeat
Hasznlat
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
Ertkek
border-width,border-style,border-color
border-bottom
Hasznlat
Ertkek
border-bottom-width,border-style,border-color
border-bottom-color
Hasznlat
Ertkek
border-color
border-bottom-style
Hasznlat
Ertkek
border-style
border-bottom-width
Hasznlat
Ertkek
thin,medium, thick,hossz
border-color
Hasznlat
Ertkek
sz n
Megjegyzsek
border-left
Hasznlat
Ertk ek
border-left-width,border-style,border-color
border-left-color
Hasznlat
Ertkek
border-color
B fggelk
f433
border-left-style
Hasznlat
Ertkek
border-style
border-left-width
Hasznlat
Ertkek
thin,medium, thick,hossz
border-right
Hasznlat
Ertkek
border-right-width,border-style,border-color
border-right-color
Hasznlat
Ertkek
border-color
border-right-style
Hasznlat
Ertkek
border-style
border-right-width
Hasznlat
Ertkek
thin,medium,thick,hossz
border-style
Hasznlat
Ertkek
Megjegyzsek
border-top
Hasznlat
Ertkek
border-top-width,border-style,border-color
border-top-color
Hasznlat
Ertkek
border-color
border-top-style
Hasznlat
Ertkek
border-style
border-top-width
Hasznlat
Ertkek
border-width
Hasznlat
Ertkek
thin,medium, thick,hossz
Megjegyzsek
Margbellt CSS-stfiustulajdonsgok
A margk lehetv teszik, hogy az elemek kls le krl (az elem szeglyn kivl)
m argin
Hasznlat
Ertkek
m argin-bottom
Hasznlat
Ertkek
auto,hossz,%
m argin-left
Hasznlat
Ertkek
auto,hossz,%
m argin-right
Hasznlat
Ertkek
auto,hossz,%
m argin-top
--------
Hasznlat
Ertkek
auto,hossz, %
B fggelk
gyorstalpa16f435
Kitltsbellt CSS-stOustulajdonsgok
A kitlts lehetv teszi, hogy az elemek krl (az elem szeglyn bell) nmi helyet
hagyjunk.
padding
Hasznlat
Ertkek
padding-top,padding-right,padding-bottom,
padding-left
padding-bottom
Hasznlat
Ertkek
hossz, %
padding-left
Hasznlat
Ertkek
hossz, %
padding-right
Hasznlat
Ertkek
hossz, %
padding-top
Hasznlat
Ertkek
hossz, %
bottom
Hasznlat
Ertkek
auto, h o ssz , %
clear
Hasznlat
Ert kek
eli p
Hasznlat
Ertkek
auto,alak
Megjegyzsek
cursor
Hasznlat
Ertkek
display
Hasznlat
Enkek
float
Hasznlat
Azt lltja be, hogy egy kp vagy szveg hol jelenjen meg
egy msik elemhez viszonytva.
Enkek
left,right,none
left
Hasznlat
Ertkek
auto,hossz, %
overflow
Hasznlat
Ertkek
auto,visible, hidden,scroll
position
Hasznlat
Enkek
B fggelk
f437
right
Hasznlat
auto,hossz,%
top
Hasznlat
auto,hossz, %
vertical-align
Hasznlat
-------
Enkek
visibility
---
Hasznlat
visible,hidden,collapse
z-index
Hasznlat
auto, szm
list-style
Hasznlat
----
Enkek
list-style-type, list-style-position,
list-style-image
list-style-image
Hasznlat
Ertkek
none, url
list-style-position
Hasznlat
Ertkek
inside,outside
list-style-type
Hasznlat
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
Ertkek
collapse,separate
border-spacing
Hasznlat
Ettkek
hossz hossz
caption-side
Hasznlat
Ertkek
top,bottom,left,right
empty-cells
Hasznlat
Ertk ek
show,hide
table-layou t
Hasznlat
Ertkek
auto, fixed
Megjegyzsek
Trgymutat
#jel 129
<head>35
&jel 97
<hr />37
» 286
<html>34
.asp 30
<i> 87-88
.htm 30
<iframe>221
.jsp 30
.php 30
<input/> 363
<li>76, 266
<map/>277
<meta/>394-395, 400
<noframes>218
<area/>191
<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
<select>367
<small>89
<span>65
<dr>76, 266
<src> 219
<em>88
<strike>90
<strong>88
<font>87, 92
<style>64
<form>359
<sub> 89
<frame/>219
<sup> 89
<frameset>217
<table>104
<hl>38
<tel>104
440
aura! 336
<th> 105
autoStart 205
<title> 34, 40
<tr> 104
<tt> 90-91
<u> 90
<ul> 76, 266
A,
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
a:visited 133
AAC 210
banner 162
action 359
active 133
adatfolyam 210
bejegyzs 392
bejegyzetlen vdjegy 97
Adobe 154
bekezels 35
alhzott szveg 90
alaprtelmezett rtk 74
alaphelyzet 369
align 230
betmret 55
AliTheWeb 393
betszn 93
bettpus 92
als index 89
betvonal 182
AltaVista 393
Amazon 380
analg 143
Bing 393
ancl1or 122
animci 168
blog 23
Blogger 23
blokkelem 253
blokkszintt elemek 72
body 130
rnyals 164
bold 89
ASCII fjl 29
boider 89
bngsz 28
thzott szveg 90
borcler-spacing 113
tltszsg 164-165
bot 391
attribute 120
bvthet jellnyelv 43
Trgymutat6(441
bvtmny 202
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
cm34,40
egyenlsgjel130
cmkk51
cmsor 38,40
class62,73
Classic FTP 16
egysgessg378
classid204
egyszer szvegszerkeszt 29
egyszer weboldal 29
cols217,368
colspan 112
kezetes betk 96
content401
coords 192
elem51,122
copyright 97
elemsor242
Courier New91
elrhetetlen oldalak32
elhelyezs57,253
Crop157
elnzet160
CSS49-50,132
elugr ablak132
CSS 2 51
elrendezs 314
elrendezsi tulajdonsgok57
elsdleges bettpus93
eltols254
em329
dashed 148
e-mail cm 131
embossed336
display57
rvnyessg33,40
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
fjlok tvitele14
fejlc35
H
handheld 336
flkvr87
httrkp mentse155
flkvr szveg88
fels index89
beading40
felsorolsjelek elhelyezse270
helper application202
fnykpek elksztse156
helyettest szveg177
Firebug42
FireFfP15
helyi webhely 23
firstLeftAlign 73
Flickr174, 176
hidden261, 364
folysirny260
hiperszveg 2
hiperszveges jellnyelv 2
folytonos szegly59
font-family 60, 92
hivatkozsellenrz137
font-size60, 92 -93
font-style 60, 89
font-weight60, 89
hivatkozsstlus 135
foldal 22
holttr 196
formzsi tulajdonsgok58
forrsszerkeszt23
forrpont 274
horgonyhivatkozs 122
hover133
frameborder220
hozzfrhetsg149
frameset216
FfP14
htdocs18
FfP-gyfl14, 16
HTML 2, 42
HTML 5 44
html kiterjeszts 30
fggleges ismtls186
HTML Validator 42
HTML-cmkk31
G,Gy
HTML-elem33
get 359
HTML-jellemzk 72
Gickr 168
HTML-megjegyzs124
GIF164
HTML-tblzat103
GIMP154, 157
HTML-rlapok357
gomb369
Google393
Google Images174
Google Maps332
grdtsvok315
grgethet listk367
grafikai alkalmazs kivlasztsa154
grafikus szerkesztk23, 29
gyermekelem 78
gykrknyvtr 16
l,
Trgymutat
l 443
informcihordozk 336
kiterjesztsek 30
inline style 65
input 363
inside 270-271
komplementer 143
internetszolgltat 28
krlvgs 157
rgpbet 90
ktelez cmkk 34
italic 89
kzpre igazts 74
iTunes 210
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
kapcsos zrjel 54
lerkd 3
karaktertbla 100
kp tmretezse 159
levlcmkdol 131
kp felbontsa 156
levlszemt 131
kp mentse 155
Lightbox 355
lighter 89
line-height 60
link 133
lista 76
listaelemek 267
kpernyfelbonts 314
kpkocka 168
listk 265
kppont 156
list-item 57
list-style-image 267
keress 391
main 314
keresrobot 391
Mapedit 190
keretvz 216
margin-left 96
kt pont 121
kzbests 4
155
Mashable 391
kijell 61
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
overflow260-261
p
padding61, 113,230,238, 267
multimdia199
padding-left 268
multimdiafjlok begyazsa204
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
pontosvessz55,89
none57
pop-up window132
no-repeat186
position254,300
nonnal89
Notepad29
post359
nyelv 34
print 336
nyitcmke33
projection 336
nyomatkosts88
protokoll121
nyomgomb162
pt55
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
stlusszablyok 50, 55
stlustulajdonsg 61
stlustulajdonsgok 50, 57
repeat-x 186
style 73
repeat-y 186
styles.css 55
Reset 369
subject 130
rtegek 165
szjhagyomny 390
robots.txt 395
szmozs 351
szemtjelz 394
319, 324
l 445
rowspan 112
sznelmlet 142
sznkerk 142
S,Sz
sznkorrekci 160
sznmlysg 155
Salesforce.com 358
sznsszellts 147
sans-serif 93
szinsszetevk 146
sznsma-genertor 143
sznsmk 143
szntvesztk 149
sznvlaszts 142
screen 336
scroll 261
scrolling 220
szveg behzsa 78
szveg formzsa 37
segdalkalmazs 202
Szveg igaztsa 72
select 363
szvegbekezds 35
selected 368
selector 61
szvegformzs 87, 89
shape 192
szvegmez 363
size 363
szvegszerkeszt 14, 29
sortvels 112
sorkizrt 84
sormagassg 60
szlknyvtr 121
T, Ty
sorok 103
tblzat 103
sortrs 35
tblzatcm 105
spanning 112
speech 336
Starbucks 381
tagols 38
stlusazonosrk 64
stluslap ltrehozsa 52
stluslapfjl 50
v
vlaszt 61
trolelem 35
vlasztgomb 367
tartalom 251
vlasztlistk 367
tartalomjegyzk 375
tartomnynv 129
teljes cm 129
VBScript 347
terlet 190
visible 261
visited 133
textarea 363
viszonytott cm 120
text-decoration 61
TextEdit 29
text-indent 60
this 308
vzszintes vonal 37
vrsszem-hats 160
w
W3C Markup Validation Service 41
webcmek 120
tbbszint lista 80
webes tartalom 3
tbbszint stluslapok 49
webgazda 6
tmb 349
webhely 10
webnapl 23
weboldailO
trzs 35
websznek 143
Transparency 164
triadikus 143
tty 336
W MV 205
tlfolys 260
tv
336
Twitter 390
type 363
U,
wrapper 314
x
XHTML 3, 31, 44
XHTML 1.1 33
uiMode 205
XML 43
xml:lang 34
j kp ltrehozsa 163
res cmke 34
res elemek 34, 36
xmlns 34
YouTube 208
Z, Zs
zrcmke 33
z-index 254, 258, 300