Tartalomjegyzk

1. Bevezet ........................................................................................................................1
2. A World Wide Web .......................................................................................................2
3. A HTML (HyperText Markup Language) ......................................................................3
3.1.

Egy kis trtnelem..............................................................................................3

3.2.

A HTML klnbz verzii ...............................................................................5

3.2.1. HTML 0 szint.....................................................................................................5

3.2.2. HTML 1 szint.....................................................................................................5
3.2.3. HTML 2 szint.....................................................................................................5
3.2.4. HTML 3 szint.....................................................................................................6
3.2.5. HTML 4 szint.....................................................................................................6
4. XHTML (Extensible HyperText Markup Language) ......................................................6
5. CSS (Cascading Style Sheets) ........................................................................................7
6. A Pollack Mihly Mszaki Fiskolai Kar honlapja ......................................................10
6.1.

Az oldalrl rviden...........................................................................................10

6.2.

Klssgek.......................................................................................................10

6.3.

Problmk ........................................................................................................10

6.4.

Forrskd .........................................................................................................13

6.5.

Problmk megoldsai......................................................................................14

6.6.

Megvalsts ....................................................................................................16

7. A Bnki Dont Gpszmrnki Fiskolai Kar honlapja................................................20

7.1.

Vizsglat ..........................................................................................................20

8. Az Indygo aprhirdetsi oldal ......................................................................................22

8.1.

Vizsglat ..........................................................................................................22

8.2.

Forrskd .........................................................................................................22

9. sszegzs ....................................................................................................................24
10. brajegyzk, tblzatjegyzk .....................................................................................25
11. Irodalomjegyzk ........................................................................................................26

Weblapok szabvnyossga a pldk tkrben

Igaz Gergely

1. Bevezet
Szakdolgozatom tmja a Weben hasznlt

lernyelvek

szabvnyossgnak

vizsglata, az ekzben feltrt hibk elemzse, megoldsi lehetsgek bemutatsa. A

dolgozat megprbl rmutatni olyan alapvet problmkra, mellyel nap, mint nap
tallkozhatunk, s amelyekre mr rgta ltezik megoldsi lehetsg.
A XX. szzadban mr szinte minden hasznlati trgyunk tulajdonsgait, alapvet
felptst kisebb-nagyobb mrtkben valamilyen szabvny hatroz meg, ajnls r le. Az
adott termket (legyen az mszaki cikk, vagy

lelmiszer) ezeknek a szabvnynak a

betartsval kell elkszteni. Termszetesen a gyakorlat nem ezt mutatja. Szmtalan

esetben fordul el, hogy a gyrtk a szabvnyt nem tartjk be, bizonyos dolgokban
eltrnek tle, esetlegesen mdostsokkal alkalmazzk. Rosszabb esetben teljesen
figyelmen kvl hagyjk. Dolgozatomban megprblom feltrni a legelterjedtebb hibkat,
majd arra megoldsi lehetsget ismertetek, mellyel az oldal szmos elnys tulajdonsgra
is szert tehet.
Ha jobban belegondolunk, ez tbb dolgot is eredmnyezhet: vagy olyan eredmnyt
kapunk, ami a clkznsg szmra hasznlhatatlan, vagy nem elgti ki teljes mrtkben
azokat a funkcikat, amit a felhasznl elvrna, (j plda erre az rintsvdelmi
szabvnyok be nem tartsa) esetlegesen sajt testi psgt, lett is veszlyezteti. A
szabvnyok tartalmukban illetve rszleteikben orszgonknt eltrhetnek, van azonban egy
szervezet, aki vilgszinten prblja ezeket sszeegyeztetni, kiegszteni, illetve jakat
ltrehozni. Ez a Nemzetkzi Szabvnygyi Bizottsg (ISO).
Sok olyan ajnls ltezik azonban, amit bizonyos terletre specializldott
szervezetek dolgoztak ki. Ezek kzl egyik a World Wide Web Consortium [1].
Feladatuknak tekintik az Internet egyik mellkgval, a Web-bel szorosan sszekapcsold
technolgik sszegyjtst, valamint azok gondozst. Rengeteg ajnlst dolgoztak mr
ki, nmelyik mr a negyedik genercijn is tl van (HTML 4.01 [1.1]). Ennek oka, hogy
az vek sorn jabb s jabb ignyek merltek fel, ezeket j szabvnyok kiadsval
elgtettk ki. Ezekre, mint stabil pontokra tmaszkodhatnak munkjuk sorn a
webfejlesztk.
A szabvnyok be nem tartsa egy weblap esetben a kvetkezket vonhatja maga
utn: elfordulhat, hogy a clkznsg egyltaln nem tudja a dokumentumot hasznostani.
Jobb esetben csak bizonyos kls megjelensi problmk fordulhatnak el, de az
informci lnyegben kinyerhet az oldalrl.

Weblapok szabvnyossga a pldk tkrben

Igaz Gergely

Mivel azonban a HTML dokumentumokat nem ugyanazzal a programmal

szerkesztjk s jelentjk meg, (a megjelents bngszprogrammal trtnik) ezrt a
felhasznl gpn fut megjelent alkalmazson is sok mlik. Ugyanis hiba van egy
oldal az ajnlsnak megfelelen elksztve, ha a bngszprogram magt a szabvnyt
flrertelmezi, illetve bizonyos rszeit nem ismeri. Ennek a problmnak az okozi
egyrtelmen a fejlesztk, akik a szabvnyok helyett a knyelmet, a lehet legnagyobb
hibatrst prbljk eltrbe helyezni. Plda erre a legelterjedtebb opercis rendszer,
melynek bngszje hrhedt arrl, hogy a szabvnyokat nem tartja be. Jelentsen
megnehezti ezzel azoknak a webfejlesztknek a munkjt, akik olyan oldalakat
szeretnnek ltrehozni, amelyek mindenki szmra kzel azonos formban rhetek el.
A kiads utn felmerl hibkat tbbsgben utlag korriglni lehet javtcsomag,
illetve j verzi kiadsval. A legtbb bngszprogram fejleszt csapat prblja kijavtani
a felismert hibkat, s egyre jobban alkalmazkodnak a szabvnyokhoz. Szerencsre j
nhny olyan program ll rendelkezsre, melyek a szabvnyoknak val megfelelst
helyezik eltrbe, radsul ezek szinte mind ingyenes programok, teht brki szmra
szabadon hozzfrhetk. (Letlthet: http://firefox.hu)

2. A World Wide Web

A

vilghl

szolgltatsa

kzl

sok
a

legismertebbek a World
Wide Web, valamint az
elektronikus levlkldsi
lehetsg, az e-mail. A
www, kzkeletbb nevn
a Web, lnyegben egy
nylt rendszer, ami az

1. bra. A Web mkdse

tlagfelhasznl szmra

fleg kpi illetve szveges informci-hozzfrsi lehetsget jelent. Mkdse az 1.

brn tekinthet meg. Az Internet hlzatra kapcsolt gynevezett Web szervereken,
kiszolglkon troljk az informcit tartalmaz weblapokat, melyek krsre a HTTP
protokoll segtsgvel kldik az adott weblapot.
Ezekhez a lapokhoz frhet hozz a felhasznl, mikor a vilghlt bngszi. A
lapok szma mra mr elrte a millirdos nagysgrendet, folyamatosan kerlnek fel jak,

Weblapok szabvnyossga a pldk tkrben

Igaz Gergely

s esetenknt tnnek el a rgiek. Az Internet a kommunikci s az informci-megoszts

egyb forminak szles trhzt knlja ilyen az elektronikus levelezs, hrcsoportok, stb.
Ma mr nem igen tudnnk olyan tmakrt mondani, mellyel ne foglalkozna egy
vagy tbb oldal, ksznhet ez annak, hogy az emberek ltalban szvesen megosztjk
msokkal a rendelkezskre ll informcikat. Manapsg ez mr gyerekjtk, brki
elhelyezheti dokumentumait, vlemnyt pldul egy ingyenes trhelyet biztost
szerveren. A Web mindig is teret adott a tudomnyos jelleg adatok cserjnek, m a
kilencvenes vek eleje, kzepe ta jelen vannak a kormnyok, kzhivatalok, s ami a
legjellemzbb, a kereskedelmi cl szervezetek is.

3. A HTML (HyperText Markup Language)

A www (World Wide Web) lnyegben egy nylt rendszer, ami az tlagfelhasznlk
szmra fleg kpi illetve szveges informci-hozzfrsi lehetsget jelent. Az Internet
hlzatra kapcsolt gynevezett Web szervereken, kiszolglkon troljk az informcit
tartalmaz weblapokat. Ezekhez a lapokhoz frhet hozz a felhasznl, mikor a vilghlt
bngszi. Tulajdonkppen a HTML a Web lernyelve.

3.1. Egy kis trtnelem

A Web nem volt mindig ennyire ltvnyos s knnyen kezelhet. Azok az oldalak,
melyekkel manapsg tallkozhatunk, csak a 90-es vek eleje ta lteznek, teht azta, hogy
ltrehoztk a hypertext alap protokollokat. Mire is j a hypertext? Annak, aki mr
bngszett az Interneten, taln nem kell elmagyarzni, mekkora segtsg, ha az oldalakat,
dokumentumokat egy hivatkozshlzat szvi t, melyek segtsgvel knnyen juthatunk
el egyik oldalrl a msikra, vagy adott dokumentumon bell egy msik pozcira. A HTTP
(HyperText Transfer Protocol) s a HTML jvoltbl a kiszolgln trolt valamennyi
nyilvnos adatot egy egyszer program segtsgvel is elrhetjk. Az Interneten tallhat
oldalak megjelentsre hasznlt programok a bngszk. Termszetesen, mint minden
egyb programcsaldbl, ezekbl is bsges knlat ll rendelkezsre, a legtbb opercis
rendszer azonban tartalmazza a sajt Web-bngszjt. Az Internet ifjkorban mg
csak szveges megjelents programok lltak rendelkezse, melyet mg ma is hasznlnak
nhnyan, de kijelenthet, hogy a felhasznlk dnt tbbsge grafikus fellet bngszt
hasznl. Minden bngszprogram szmra a forrsanyagot HTML nyelven kell megrni,
ez a nyelv hordozza magban az sszes olyan informcit, ami a bngsznek a
dokumentum struktrjnak meghatrozshoz szksges. Az oldalon megjelen HTML

Weblapok szabvnyossga a pldk tkrben

Igaz Gergely

lap kdja ltrehozhat statikusan, illetve feltlthet a tartalom dinamikusan is, klnbz
scriptek, adatbzisok hasznlatval.
A HTML nyelv se a 80-as vek elejn keletkezett s csakgy, mint akkoriban a
legtbb szabvny, ez is az IBM cgtl indult el. A fejlesztk arra jttek r, hogy a legtbb
szvegnek rengeteg kzs rsze van (cme, alcme, frsze, stb.), gy ha az egyes rszekre
vonatkoz formzutastsokat magba a szvegbe lehetne belefoglalni, akkor viszonylag
knnyen lehetne hardver- s szoftver fggetlen, formzott szvegeket ltrehozni. Az IBM
ki is fejlesztett egy ilyen pszeud programozsi nyelvet, amelyet GML-nek (Generalized
Markup Language) nevezett el. Ebbl a nyelvbl alaktotta ki a Nemzetkzi Szabvnygyi
Hivatal (ISO) az SGML-t (Standard Generalized Markup Language, ISO 8879/1986). A
kt nyelv kztt nem volt jelents klnbsg. Az SGML nyelv egyik alkalmazsa a HTML
nyelv, ezt a nyelvet Tim Berners-Lee tervezte meg 1990-ben. rdekes megfogalmazsban
ez tulajdonkppen egy lernyelveket ler nyelv. Az elnevezsben a H bet a hyper
szra utal, vagyis nemcsak felptst meghatroz informcik vannak a fjlban, hanem
ms oldalakra, fjlokra val hivatkozsok is. Az alaptlet vgl is az, hogy a szvegben
apr jellseket (angolul tag-eket) helyeznk el a megjelentend rsz el, amelyek
megmondjk a futtat programnak, hogy milyen elrendezsben kell a dokumentumot
felptenie.
Ezeket az informcikat kisebb s nagyobb relcijelek (<> pl.: <body>) kz kell
rni, ezeket a program nem fogja megjelenteni. A HTML nyelv szintaktikja, elemei
szabvnyostva vannak, ezt a szabvnyt a World Wide Web Consortium [1] gondozza.
Ezt a szabvnyt kellene a bngszprogramoknak minl szigorbban figyelembe
vennik. Tbbsgk ezt meg is prblja, tbb-kevesebb sikerrel. A tapasztalat azt mutatja,
hogy a bngszprogram fejlesztk vletlenl, esetleg szndkosan nem veszik
figyelembe a szabvnyok egyes rszeit, ezrt nhny bngszprogram kpes a HTML
utastsok mindegyikt rtelmezni (pl.: Microsoft Internet Explorer). Ilyenkor az
ismeretlen rszeket j esetben figyelmen kvl hagyjk, rosszabb esetben, pedig tvesen
rtelmezik, ezzel nem vrt eredmnyeket okozhatnak. Ennek tudhat be az a jelensg,
hogy kt klnbz bngszprogrammal ugyanazt az oldalt nzve, eltr eredmnyt
lthatunk. Termszetesen a HTML nyelv sem kiforrottan jelent meg, tbbszr javtottk,
egsztettk ki a szksgesnek tartott elemekkel.

Weblapok szabvnyossga a pldk tkrben

Igaz Gergely

3.2. A HTML klnbz verzii

Napjainkban a HTML mr a negyedik verziban jr (egszen pontosan HTML 4.01
[1.1] ). Minden rgebbi kiads rszhalmaza az jabb verzinak. Ez azt jelenti, hogy az j
verzi csak kibvti a rgebbi vltozatot, de a korbbi lehetsgeken semmit nem vltoztat.
Elfordulhat azonban, hogy az esetlegesen elavultnak nyilvntott rszek hasznlatt nem
javasoljk. Fontos tovbb megemlteni, hogy az egyes HTML verzik, s a
bngszprogramok kztt milyen kapcsolat van. A weblapok tulajdonkppen egyszer
szvegfjlok, akr egy egyszer szvegszerkesztvel is ltrehozhatak, ezek mindig egy
Web-szerveren vannak elhelyezve, hogy brki, akinek Internet hozzfrse van, elrhesse.
Amikor egy ilyen lapot meg szeretnnk a bngszprogramunkkal tekinteni, a program
egy krst kld a szerver fel, melyben megadja, hogy melyik lapra van szksge, majd a
szerver, ha mdjban ll, ezt a lapot kldi vlaszknt. Ekkor a szmtgpnk memrijba
tltdnek az oldal rszegysgei, a bngszprogram a megfelel jelzsek rtelmezsvel
az elre megtervezett formtumban fogja megjelenteni azt. Ezrt a bngsznek ismernie
kell az sszes a dokumentumban hasznlt tag-et, pontosabban annak szabvnyban
meghatrozott jelentst.

3.2.1. HTML 0 szint

A HTML 0 az sszes bngsz kzs nevezje ezt a szintet minden
bngszprogram tmogatja. Tulajdonkppen az eredeti SGML alapjn pl fel,
termszetesen lehetv tve ms fjlokra val hivatkozsokat is.

3.2.2. HTML 1 szint

Minden olyan jellst tartalmaz, amit a 0-s szint, kiegszlt azonban azzal, hogy
lehetv teszi bizonyos szvegrszek megklnbztetst, sznnek, kinzetnek
megvltoztatsval, valamint lehetv vlik a kpek elhelyezse a dokumentumban.
Zavar hinyossgv vlt ksbb ennek a szintnek, hogy a szveggel nem lehet
krbefolyatni az brt, kpet, teht egy a kp mellet semmilyen szveges informci nem
lehetett. Ezt ksbb a HTML 3-as szint korriglta.

3.2.3. HTML 2 szint

Az elz szintekhez kpest annyival bvlt, hogy lehetv teszi az olvasnak az
adatbevitelt. gy a felhasznl rhat pldul szvegmezbe, vagy vlaszthat egy listbl. A
Web trtnetben ez a szint tette elszr lehetv az adatok ktirny ramlst, gy mr

Weblapok szabvnyossga a pldk tkrben

Igaz Gergely

nemcsak olvassra sznt anyagok terjeszthetk vele, szert tett egy minimlis
interaktivitsra is. A szabvny lezrsra 1996-ban kerlt sor.

3.2.4. HTML 3 szint

Ez volt az els, igazn elterjedt szint, pontosabban a 3.2-es verzija. Tovbb bvtve
eldjeit, lehetv vlt tblzatok s vezrlelemek, illetve applet-ek, script-ek hasznlata.
Tovbbi rdekessg, hogy itt vlt elszr lehetv az als s fels index hasznlata, ami
nagyon fontos segtsg a tudomnyos tmj publikcikhoz. Egy ltalnos statikus
HTML lap manapsg is nagy rszben ehhez a szinthez tartoz jellseket hasznl.

3.2.5. HTML 4 szint

A HTML 4.0 verzi 1997 vgn (december 18.-n, ISO 8879) jelent meg, mint
hivatalos ajnls, majd nmi mdosts utn kiadtk a vgleges verzit (1998 prilis 24.n). Ez a kvetkez mechanizmusokkal egszti ki eldjeit: stluslapok, frame-ek (keretek)
hasznlata, tovbbfejlesztett szveg s tblzatirny meghatrozs, rlapok, fogyatkos
felhasznlk szmra elrhetsg, objektumok begyazsa, tovbbfejlesztett tblzatok.
Taln napjainkban mg mindig az egyik leggyakrabban hasznlt verzi a HTML 4.01.
1999. december 24.-n bocstottk tjra ezt az ajnlst, mint azt a verziszma is mutatja,
nem j szint, hanem eldjnek, a 4.0-nak kibvtse.

4. XHTML (Extensible HyperText Markup Language)

Az XHTML [1.2] ajnlst 2000. janur 26-n bocstotta ki a W3C [1]. A csald
dokumentumtpusai XML alapak, s arra lettek tervezve, hogy egyttmkdjenek az
XML alap felhasznli alkalmazsokkal. Az XML egy betsz, jelentse: kiterjeszthet
jell nyelv (eXtensible Markup Language). Br szigortott formja az SGML-nek,
megrzi annak erejt, gazdasgossgt, megtartja az sszes ltalnosan hasznlt
tulajdonsgt. Tulajdonkppen kiterjeszti a HTML 4-et. Az XHTML csald els tagja az
1.0-s verzi volt. Ez a hrom HTML 4 dokumentumtpus megjtsa, XML 1.0
alkalmazsknt. Az ilyen tpus dokumentum egyarnt olvashat XML kompatibilis, s
nhny egyszer irnyelv betartsval, HTML 4 kompatibilis bngszvel is. Aki e
dokumentumtpus hasznlata mellett dnt, az a kvetkez elnykkel szmolhat: az
XHTML dokumentumok megfelelnek az XML elrsainak. Knnyedn megtekinthetk,
szerkeszthetk, s rvnyesthetk a standard XML eszkzkkel. Egy XML dokumentum
akkor rvnyes (valid), ha a DTD fjl ltal megkvetelt szablyoknak is eleget tesz. Ahogy

Weblapok szabvnyossga a pldk tkrben

Igaz Gergely

az XHTML csald fejldik, az XHTML 1.0 kritriumainak megfelel dokumentumok

egyre jobban egytt tudnak mkdni klnbz XHTML krnyezetekben.
Az XHTML dokumentumok ugyanolyan jl szerkeszthetek korbbi, HTML 4-et
tmogat felhasznli alkalmazsokkal, mint az j, XHTML 1.0-t tmogat programokkal.
Az XHTML csald a kvetkez lps az Internet fejldsben. Ezen dokumentummal
szemben tmasztott kvetelsek nmikpp eltrnek a HTML 4-el szemben tmasztottaktl:
a dokumentumnak jl formzott-nak kell lennie. Ez egy j koncepci, amelyet az XML
vezetett be. A jl formzottsg tulajdonkppen azt jelenti, hogy minden elemnek zr
rsszel is kell rendelkeznie, vagy specilis formban kell lerni. Br az gynevezett
tlapols (hibs egymsba gyazs) rvnytelen az SGML-ben is, a meglv bngszk
mgis szles krben tolerljk. Az XHTML dokumentumokban minden HTML elemet s
attribtum nevet ktelezen kisbetvel kell rni. Ez a klnbsg szksges, mivel az XML
rzkeny a kisbet-nagybet klnbsgekre.
Ajnlott tovbb az XHTML laphoz csatolt stluslap teljes tartalmt is kisbetvel rni,
az esetleges kompatibilitsi problmk elkerlse vgett. Az SGML alap HTML 4 nhny
elemnl opcionliss tette a zr elemek hasznlatt: a kvetkez elem kezdete zrta az
elzt. Az XML szintaktika, ezltal az XHML sem engedi a zr elemek elhagyst. (pl.:
eddig a HTML-ben megengedett volt ez a forma: <li>ez egy listaelem. Az XHTML-ben ez
mr szintaktikailag helytelen, a helyes megads a kvetkez: <li>ez egy listaelem</li>)
Az elemek tulajdonsgainak rtkt mindig idzjelek kztt kell feltntetni, mg akkor is,
ha rtkk nem sztring, hanem szm.

5. CSS (Cascading Style Sheets)

A HTML nyelvet tulajdonkppen csak lernyelvnek szntk, br ksbb bevezettek
nhny megjelenst befolysol elemet. Eleinte ezek nem is nyjtottak kielgt
megoldst. Az j formzsi lehetsgek sok mindent lehetv tettek az oldal ksztje
szmra, de a nyelv ezzel elvesztette az egyszersgt, a dokumentumok a formz tag-ek
miatt egyre bonyolultabb, s sszetettebbekk vltak.
Nem volt ritka, hogy a dokumentum tartalmnak tbb mint a felt foglaltk el ezek az
elemek, jelentsen megnvelve ezzel a HTML fjl mrett, ezen keresztl pedig a letltsi
idt. Ezen segtett megjelensvel a CSS [1.3] szabvny, melyet a bngszk az utbbi
vekben egyre egysgesebben rtelmeznek, s emiatt sokkal rugalmasabb, szabadabb vlt
a HTML oldalak megjelentse. A CSS egy mozaiksz, jelentse: egymsba gyazott
stluslapok (Cascading Style Sheets).

Weblapok szabvnyossga a pldk tkrben

Igaz Gergely

Egy egyszer szintaktikj nyelvrl van sz, mellyel a HTML oldalak megjelense
befolysolhat (elhelyezkeds, szn, mret, stlus, stb.). A CSS teht egy stluslap
megvalsts, amely lehetv teszi, hogy a HTML oldalak szerzi oldalaikhoz egyedi
stlust rendeljenek hozz. A CSS egyik alapvet tulajdonsga a folyamatos stluslap
HTML lap kapcsolat. A lapok szerzi az ltaluk alkalmazni kvnt stlust egyszer rgztik,
s hozzkapcsoljk minden ltaluk ksztett HTML laphoz. A HTML dokumentum, pedig
a megjelentsi informcikat a hozz rendelt stluslapbl fogja beszerezni. CSS
hasznlatval nemcsak megszpthet egy oldal, de a kszt munkjt is jelentsen
megknnytheti. Egyszerbb vlik pldul egy ksbbi design, arculatvlts. Maga a
HTML fjl teht szinte vltozatlan marad, csak a szvegre vonatkoz formzsi
informcikat kell mdostani a CSS fjlban. A stlusokat elmenthetjk kls fjlba is (a
lehet legnagyobb rugalmassg rdekben), de magba a HTML kdba is belefoglalhat,
illetve lehetsg van hasznlatukra inline mdon is, teht az egyes tag-ek szintjn is. Az
egymsba gyazhatsg arra utal, hogy tbb stluslapot, defincit is megadhatunk
egyszerre, illetve egy stlus lehet tbb elemre is rvnyes (egymst felldefinilhatjk).
Az oldal hierarchija szerint a stlusok rkldnek. Ha legfels szint elemre
definilunk egy stlust, akkor az sszes tbbi alsbb szint (fell nem definilt) elemre
rvnyes lesz. Persze a helyzet mg mindig nem idelis, s ez egy j ideig nem is lesz az,
ksznheten a dominns bngsz technolgiai elmaradottsgnak. Maga a CSS1 [1.3]
szabvny a W3C ltal 1996. december 17.-n ltott napvilgot. Azutn tbb mdostson is
tesett, mgnem 1998. mjus 12.-n megjelent a CSS2 [1.4] szabvny is, mely hasonlan a
HTML-hez, teljes egszben magba foglalja az elz verzit.
Fontos megemlteni, hogy a kzkedvelt bngszk viszonylag nagy rszt tmogatjk
a CSS szabvnyoknak, de knnyen elfordulhat, hogy valamit flrertelmeznek. Tovbb
az sem lehetetlen, hogy egy bngsz mr sok mindent ismer a CSS2-bl, de mg mindig
van olyan CSS1 tulajdonsg, amit nem ismer, nem tud rtelmezni, megvalstani. A CSS1
felhasznli alkalmazsok kpesek olvasni a CSS2 stluslapokat s elvetik azokat a
rszeket, amelyeket nem kpesek rtelmezni. Elfordulhat, hogy a felhasznl olyan rgi
bngszt hasznl, mely mg nem tmogatja stluslapok hasznlatt (pl. 3.x verzij
Internet Explorer). A tartalom ekkor is meg fog jelenni a kpernyn, ilyenkor az
alaprtelmezett formzsokat fogja alkalmazni.
A CSS2 ugyan sok mindennel bvlt, de lnyegben megtartotta eldje
egyszersgt. Nhny CSS lehetsg a fogyatkkal l felhasznlk szmra jobban
hozzfrhetv teszi a Webet: nagy segtsg lehet a ltskrosultak szmra a hangos
8

Weblapok szabvnyossga a pldk tkrben

Igaz Gergely

stluslap (aural), mellyel a felolvas program hangja mdosthat, hangerejt, hangsznt,

emelkedettsgt

a dokumentum ksztje szablyozhatja a tartalomtl fggen

(termszetesen ehhez elengedhetetlen a felolvasprogram CSS tmogatsa).

A betk formzsi lehetsgei sokkal
nagyobb teret engednek a fantzinak, ezltal
elkerlhet a kppel megjelentett szvegek
hasznlata, mely mindig is nehzsgeket
okozott a fogyatkos felhasznlknak.
A CSS-ben alapvet szerepet jtszik a doboz
modell. A CSS elsdleges clja ugyanis a
vizulis megjelents szablyozsa, s a doboz
modell az elhelyezs alapvet eszkze. CSS-

2. bra. A CSS doboz modellje

t hasznlva minden elem egy dobozknt foghat fel. A doboz modell felptse a 2. brn
lthat. Itt mg egyszer rdemes megemlteni, hogy a bngszk (fleg a Microsoft
Internet Explorer) nem teljesen egysgesen rtelmezik ezt a doboz modellt, melybl nem
vrt eredmnyek szrmazhatnak.
Lehetsg van eltr stluslapok hasznlatra klnbz mdiumok esetn, teht ms
s ms belltsok rvnyeslhetnek a szmtgp kpernyjn, valamint nyomtatsban,
illetve specilis eszkzk alkalmazsakor. A fontosabb mdiatpusok [5] az 1. tblzatban
tallhatak:
A mdiatpusok meghatrozsa

1. tblzat

Hasznlt nv:

Meghatrozs:

screen

sznes szmtgp megjelent

aural

beszdszintetiztorokhoz

braille

Braille rint kpernykhz

print

handheld

lapozhat mdihoz, ez
rvnyesl nyomtatsnl is
kismret, monochrome
megjelentkhz

Weblapok szabvnyossga a pldk tkrben

Igaz Gergely

6. A Pollack Mihly Mszaki Fiskolai Kar honlapja1

6.1. Az oldalrl rviden
Az oldal 2005. 02. 18.-n kerlt lementsre, a HTML fjl az akkori kpet tkrzi.
Tmjt tekintve az oldal egy fiskolai honlap, portl, amelyrl tanrok s dikok egyarnt
fontos informcikat rhetnek el. Tjkoztatst nyjt az aktulis trtnsekrl,
esemnyekrl, megtallhatak a szervezeti egysgek hivatkozsai, valamint elrhet az
archvum is.

6.2. Klssgek

Elljrban a klssgeket rdemes kielemezni, ezutn pedig kvetkezhet a

megvalsts technikjnak vizsglata. Az oldal sznvilga meglehetsen harmonikus,

kellemes perceket okozhat a bngszs ezen az oldalon, felptse sem tlsgosan
bonyolult egy tlagos felhasznl szmra. A megadott linkek segtsgvel egyarnt
eljuthatunk magasabb, illetve alacsonyabb szint helyekre is (magasabb szinten a
tudomnyegyetem honlapja rtend).
Az oldal felptse szerint ngy fbb rszre bonthat, ezek a kvetkezk: a fejlc,
mely a navigci szempontjbl a legfontosabb hivatkozsokat tartalmazza, a baloldali
tartalomoszlop. A jobboldal fels harmadtl kezddik egy rdekessgeket tartalmaz
terlet, majd ez alatt foglal helyet egy jabb navigcis rsz. A hreket fontossg s
aktualits szerint blokkokba foglaltk, ezeknek ms-ms sznt adott a kszt. A fontos
informcik figyelemfelkeltbb, mg az ltalnos tudnivalk a kevsb harsny kk s
bord sznt kaptk. Minden blokk httrszne a fejlcnek egy vilgosabb rnyalata, ezltal
a nagy kontraszt stt betk jl olvashatak. A klnbz tmj hivatkozsok
klnbz sznben jelennek meg, segtve ezzel a knnyebb navigcit. A blokkokban
ltalban csak egy rvid ismertet, zelt tallhat, ha viszont a felhasznl tovbbi
rszletekre is kvncsi, egy hivatkozs segtsgvel megtekintheti azt, beljebb jutva ezzel
az oldal architektrjba.

6.3. Problmk
A lapok hibtlansgt Mozilla Firefox bngsz segtsgvel a W3C on-line
ellenrzjvel [1], valamint egy ingyenesen hozzfrhet Web-szerkeszt programba

Az oldal elrhetsge: http://www.pmmf.hu

Az eredeti, illetve javtott verzik megtallhatak a mellkletben.

10

Weblapok szabvnyossga a pldk tkrben

Igaz Gergely

(UltraEdit-32 v11.00, http://www.ultraedit.com) ptett Tidy (http://tidy.sourceforge.net,

1994-2003 W3C) nev programmal ellenriztem. Az oldal tulajdonkppen slyos hibt
nem tartalmaz, de az elemzs sorn 160 figyelmeztetst kaptam. Ezek tlnyomrszt az
ajnls szerint ktelez tulajdonsgok elhagysra vonatkozott (pl.: kp objektumok alt
tulajdonsgnak hinya). A felmrsben rsztvev magyar felsoktatsi intzmnyek
weblapjai kzl egyik sem volt hibtlan, mindegyik tartalmazott tbb-kevesebb hibt. (A
legkevesebb hibaszm 17 volt!)
Hozzfrhetsgi szempontbl gondot okozhat, hogy egyik kpet sem lttk el
magyarz szveggel (ALT, vagy TITLE attribtumok), a vakok, gyengn ltk nem fogjk
megtudni, mi is tallhat a kpen. Klnbz bngszkkel vizsglva, az tapasztalhat,
hogy az oldal mindegyikkel kzel azonos megjelenst biztost. Ez mirt is problma? Az
oldaltervezk elszeretettel nylnak egy rgi, jl bevlt megoldshoz: az oldalt
tblzatokbl ptik fel, melynek szeglyei a felhasznl szmra lthatatlanok. Az oldal
tartalmt, pedig a tblzatok celliban helyezik el. Mivel a tblzatok rtelmezsben a
Web-bngszk szinte teljes mrtkben azonosak, kzenfekv ez a megolds. Nincs
szlessg, illetve magassgbeli eltrs, minden ugyangy fog megjelenni a felhasznl
kpernyjn, ahogyan a szerkeszt azt megalkotta.
Jogosan merl fel a krds ebben az esetben: elfordulhat-e az, hogy a felhasznl s
a tervez klnbz kpernyt hasznl? Nos, a felmrsek azt mutatjk, hogy a
felhasznlk tlnyom rsze egy szmtgphez kapcsolt monitoron jelenti meg a lapokat.
Viszonylag kevs a kzi szmtgppel s a mobiltelefonnal Internetezk szma.
Termszetesen az ignyeiket sem szabad szem ell tveszteni, st. Ha egy oldal
megvalstsa olyan, hogy a vakok szmra is lvezhet, akkor egszen biztosan az
egszsges felhasznlk szmra is az. A monitorok jelents rsze 1024*768 pixeles
felbontsban mkdik. Amennyiben a felhasznl ennl nagyobb felbontsban tekinti meg
a lapot, gy az nem fog a megvltozott kpernyviszonyokhoz alkalmazkodni, a mrete
ugyanakkora marad, mint az elz esetben, ennek oka, hogy a tblzatok mrett pixelben
adtk meg. A msik vglet, pedig az, amikor a felhasznl kisebbre lltja az ablakmretet,
mint a forrskdban megadott tblzat mrete. Ilyenkor ide-oda grgethet az ablakban,
ahhoz, hogy az oldal valamely rszt megtallja (vzszintes s fggleges irnyba is).
Mindenki ismeri ezt az esetet, s elmondhat, hogy senki sem rl, ha ezzel kell
szembeslnie.
A monitorok felbontst tbbnyire azrt emelik magasabb rtkre, hogy tbbet
lthassanak az adott terletbl. De mivel a lap nem tud alkalmazkodni, a maradk hely res
11

Weblapok szabvnyossga a pldk tkrben

Igaz Gergely

marad, pontosabban a httrkp, vagy httrszn tlti ki. Teht belthat, hogy ez a
megolds nem a legoptimlisabb. St, a HTML szabvny a tblzatot adatok rendezett
megjelentsre ajnlja, nem pedig az oldalon lv elemek pozicionlsra, a design
kialaktsra.
Tanulmnyozva a forrskdot (mellklet), az is feltn lehet, hogy a kd telis-tele van
a tblzat sorait s oszlopait meghatroz tag-ekkel, ami jelents mrtkben megnvelheti
a lap mrett. A tendencit jl mutatja, hogy az ltalam vgzett nem reprezentatv
felmrsben 20 tallomra kivlasztott Web-design cgbl 17 ezt a tpus pozcionlsi
mdot hasznlta sajt oldaln, a referenciaknt feltntetett oldalaik nagy rsze is ezzel a
megvalstsi mddal kszlt. Bizonyos rtelemben ez rthet, hiszen pldul a nagy
forgalm portlok, nem engedhetik meg maguknak, hogy weboldaluk elrendezse
esetlegesen megvltozzon, ksznheten a felhasznl bngszprogramjnak. Egy fokkal
jobb megoldsa a tblzatos formzsnak, ha a tblzat mrett (klns tekintettel a
szlessgt) szzalkos rtkben hatrozzk meg. Ilyenkor az ablak teljes mretnek
arnyban hatrozdik meg a tblzat szlessge, s gy elvileg bizonyos rtelemben
alkalmazkod kpes lesz a lap.
A vizsglt oldal 800 pixeles oldalszlessg esetben lthat teljes mrtkben.
Amennyiben ennl kisebb az ablak mrete, mr hinyozni fog a tartalom egy rsze.
Azonban hiba nyjtjuk az ablakot 1000 pixeles szlessgre, a tartalom egyltaln nem
alkalmazkodik, mivel az oldal alapveten kzpre igaztott, gy jobbrl s balrl is

3. bra. Az eredeti oldal

4. bra. A javtott oldal

nagyjbl 100-100 pixelnyi res terlet van. Ez 1280*960-as felbontson mr 240 pixeles
res terletet jelent a kt szlen. Ez sszegezve 480 pixel! Nem is beszlve az 1600*1200as felbontsrl, ahol sszesen mr annyi az res terlet (jobb s baloldal sszegezve), mint
maga az oldal! A 3. brn az eredeti oldal lthat 1280*1024-as felbontson, mg a 4. bra
a javtott oldalt szemllteti ugyanazon a felbontson.

12

Weblapok szabvnyossga a pldk tkrben

Igaz Gergely

Belthat teht, hogy ez a megvalstsi technika mennyire nem hasznlja ki a

rendelkezsre ll lehetsgeket.
Az oldal jobb oldal als rszben elhelyezked navigcis rsz veti fel
szabvnyossgi, illetve hozzfrhetsgi szempontbl a kvetkez problmt: amint az
szrevehet, a kpekre kattintva lphetnk tovbb bizonyos szervezeti egysgek oldalra,
teht itt kpet hasznl az oldal a navigcira. Ez nagyon elegns, tetszets megolds,
tulajdonkppen nem is lenne ez olyan rendkvli problma, de az oldal tervezje itt is
kifelejtette az alt tulajdonsgokat, ami a kpen tallhat informcikrl nyjt
magyarzatot ltssrlt felhasznlknak. Amennyiben a bngszben a kpek letltse
funkci nincs engedlyezve, a felhasznl nem fogja tudni, hogy hova is vezet
tulajdonkppen az adott link, ami nem megengedhet.
Nmi odafigyelssel azonban elkerlhet ez a problma, s minimlis idrfordtssal
tbb ember szmra tehetjk elrhetv az oldal tartalmt. Minden Web-fejlesztnek clul
kellene kitznie, hogy minl tbben lthassk, lvezhessk azt az oldalt, amit ltrehozott.
Sokakban felmerlhet a krds: megri odafigyelni a fogyatkos felhasznlk ignyeire? A
gyakorlat azt mutatja, hogy az oldaltervezk nagy rsznek erre a vlasza: nem. A magyar
felsoktatsi intzmnyek weboldalainak krben vgzett (nem reprezentatv) felmrsem
azt mutatja, hogy 10 esetbl csupn csak 2-rl mondhat el, hogy figyelmet fordtottak a
fentebb kifejtett problma megoldsra. Ez az esetek 20 szzalka, ami meglehetsen
kevs. Egy olyan oldal szerepelt a listban, ami minden kpnl tartalmazta az ALT
tulajdonsgot, azonban sehol sem volt kitltve. A szabvny ugyanakkor ktelezen rja el
az alt tulajdonsg feltntetst.

6.4. Forrskd
Minden weblap forrskdjnak a dokumentumtpus meghatrozsval kell kezddnie.
A forrskd tanulmnyozsa kzben szrevehet, hogy a tervez a HTML 4.0 szabvny
elrsait prblta kvetni. Termszetesen ez csak felttelezhet, hiszen a legtbb mai
szveges, illetve grafikus HTML szerkeszt program j dokumentum ltrehozsakor
alaprtelmezetten beilleszti valamely dokumentumtpus meghatrozst. ltalban ez
vlaszthat, a HTML 4.0, HTML 4.01, vagy XHTML formtumok kzl. gy teht az is
elkpzelhet, hogy az oldal tervezjnek nem is ll szndkban az ajnlsnak megfelelni.
A dokumentum fejlc (HEAD) rszben tbb META elemet is tallhatunk, melyek
ltalnossgban a hasznlni kvnt karakterkszletrl (Charset), a dokumentum tartalmrl
(Description), az oldal rvnyessgnek lejrati idejrl (Expires), szerzjnek nevrl

13

Weblapok szabvnyossga a pldk tkrben

Igaz Gergely

(Author) szolgltathatnak informcit. Itt adhat meg tovbb a keresoldalak robotjainak

az informci, hogy felvegyk-e a tallati listba az adott oldalt, az oldal nyelve, valamint,
hogy milyen szavak kulcsszavak (Keywords) illenek az adott oldal tartalmra (a szerverek
nem csak a domain nevek kztt keresnek, hanem a letrolt index-adatbzisban is, amit az
gynevezett keresrobotok gyjtenek ssze, a weben elrhet lapok tvizsglsval).
sszessgben elmondhat, hogy a tervez itt megadhat tulajdonsgokat, amikhez rtket
rendelhet. Az oldal ksztje jelen esetben csupn a HTML (s a hozz csatolt CSS)
dokumentum megjelentshez szksges karakter-kdalap nevt adta meg. A megfelel
szm META elem elhelyezse azonban nagyon fontos dolog. Az ajnls ugyan nem rja
el ktelezen, de hasznlatuk segthet pldul abban, hogy az oldalunk egy keresszerver
tallati listjban elkelbb helyet foglaljon el.
Tbb helyen szrevehet, hogy pozcionlsra a tag-ek align (igazts) tulajdonsgt
hasznlja a kszt, ami ugyancsak a nem ajnlott megoldsok krbe tartozik.
Az oldal teht meglehetsen sok hibt, illetve hinyossgot tartalmaz, adott volt ht a
feladat, a lehet legtbb hiba javtsa, a rendelkezsre ll technikk segtsgvel. Az oldal
tartalma, megjelense nhny kls vltoztatstl eltekintve a rgi maradt. Minden
megvalstsi

mdnl

trekedtem

lehet

legjobb

megoldsra,

termszetesen

megvalsthat az oldal ms mdon is, ez csak egy megoldsi lehetsg a sok kzl. A
formzs, illetve pozicionls teljes egszben stluslapok segtsgvel trtnt, ez
biztostja, hogy az oldal nagyfok alkalmazkod kpessggel rendelkezik.

6.5. Problmk megoldsai

Taln a legfontosabb problmval rdemes kezdeni, ami a tblzatos formzs, teht
hogy minden az oldalon szerepl kp, szveg egy lthatatlan tblzat valamely celljban
helyezkedik el. Teht brmit is vlasztunk ki az oldalrl, az egszen biztosan egy tglalap
alak cellban tallhat. A CSS segtsgvel megvalstott megolds is tulajdonkppen
ezen alapul. Ezzel a technikval elvileg az sszes hasonl problmval rendelkez oldal
talakthat. Kisebb-nagyobb ngyszgekbl ptettem fel az oldalt, ezekben helyezkedik
el a tartalom. Fontos klnbsg azonban, hogy minden formzsra vonatkoz informci
egy kln fjlban tallhat, ezzel megvalsult a tartalom s a formzsi tulajdonsgok
sztvlasztsa. A stluslap egy css kiterjeszts fjl (pl.: stilus.css), amit a link HTML
tag segtsgvel kapcsolok az oldalhoz, megadva a stlusfjl tpust, valamint tartalmnak
formtumt. Pldul: <link rel="stylesheet" type="text/css" href="default.css">, ezt a
dokumentum HEAD rszben kell elhelyezni. Sokkal egyszerbb vlik egy esetleges

14

Weblapok szabvnyossga a pldk tkrben

Igaz Gergely

arculatvlts ezzel a megvalstsi mddal, hiszen nem szksges a HTML kdot

mdostani, elegend csupn a formzsi tulajdonsgokat (szneket, mreteket,
elhelyezkedseket) megvltoztatni. Ez egy nagyobb terjedelm oldalnl jelents
munkamegtakartst eredmnyezhet. Nem is beszlve arrl, hogy tbb HTML oldal is
hasznlhatja ugyanazt a stluslapot, teht mg tbb pldnyt sem kell trolni belle.
Megoldsom lnyegben hasonl a tblzatos formzshoz, de annl sokkal tbbre kpes,
valamint a szabvnyoknak, ajnlsoknak is megfelel. Az ergonmiai megvalstst is
bizonyos mrtkben figyelembe vettem, de szakdolgozatom tmja ezt csak bizonyos
mrtkben ignyli.
A megvalsts mdja a kvetkez: mindenek eltt rszletesen szemgyre kell venni
az adott oldalt, vilgosan tudnunk kell, hogy mely rszei tartoznak szorosan egybe. Az
azonos egysgbe sznt rszeket egy csoportost HTML elemmel (DIV) egysgbe
foglaltam, majd a csoportok egy-egy azonostt kaptak (CLASS, illetve ID). Ezek kztt a
klnbsg, hogy a CLASS tulajdonsg ltal megadott nv tbb blokkra is hasznlhat, az
ID viszont egy egyedi azonost, csak egyetlen elem rendelkezhet ezzel a nvvel.
Alaphelyzetben ezek a jellelemek semmilyen specilis jellemzvel nem ruhzzk fel az
ltaluk kzrezrt tartalmat, csak stluslapok hasznlata esetn. [4]
Ha pldul tbb olyan rsz is szerepel az
oldalon, melyhez narancssrga 13-as, dlt,
akkor ltrehozhatunk egy ilyen osztlyt a CSS

.narancs{
color: #FFA500;
font-size: 13px;
font-style: italic;
text-align: right;

fjlban narancs nven, melyre a fentebb

felsorolt tulajdonsgokat adjuk meg. Ebben az

5. bra. narancs osztly ltrehozsa

jobbra

igaztott

betformzs

szksges,

esetben azokra a csoportokra fog rvnyeslni a megadott formzs, melyek a HTML

dokumentumban narancs nev osztlyba tartoznak. Az 5. bra ismerteti, hogyan lehet a
CSS fjlban egy osztlyhoz tartoz tulajdonsgokat
ltrehozni,

mg

6.

bra

bemutatja,

hogyan

alkalmazhatjuk ezt a HTML fjlban. Tekintsk a DIVeket szablyos ngyszgeknek, amibe azt a tartalmat
tlthetjk bele, amire az adott helyen szksgnk van.

<body>
<div class=narancs>
Ez a szveg narancs
szn lesz
</div>
<body>

6. bra. HTML kd

Az gy kialaktott blokkokhoz (a szismtls elkerlse

vgett a tovbbiakban hasznlni fogom a rteg, tmb, egysg, illetve trol, kontner
szavakat is) a stluslapban tulajdonsgokat definiltam, ezek a tulajdonsgok rtket kaptak
a megjelensnek megfelelen. Azon a ponton, ahol tmbt le szeretnnk zrni, egy lezr
15

Weblapok szabvnyossga a pldk tkrben

Igaz Gergely

tag-et kell elhelyezni (</div>). Mivel a DIV egy alapvet HTML elem, ezrt sok formzsi
tulajdonsggal rendelkezik: magassg, szlessg, szegly, marg, keret, httr (lehet kp,
vagy csak szn), a tartalom szvegtulajdonsga, lthatsg, tltszsg, pozcionls,
krlfolyats.

6.6. Megvalsts
Ezzel a mdszerrel pldul egy hrblokk megvalstsa a kvetkez: ltre kell hozni a
globlis trolt, azaz azt a ngyszget (ngyzet vagy tglalap), ami majd az egsz blokkot
magba foglalja (global-kontener). Mindenek
eltt rdemes megadni az jonnan ltrehozott
egysg szlessgt, illetve magassgt, ezt a
CSS

fjlban kell

megtennnk

(width

tulajdonsg). A 7. bra szemllteti a globlis

trol megvalstst. Elsdleges a szlessg

.global-kontener{
width: 25%;
background-color: #A9A9A9;
color: black;
border: 1px solid black;
}

7. bra. global-kontener ltrehozsa

megadsa, mert a magassg meghatrozsa az egysgben tallhat szvegmennyisg

fggvnyben trtnik. A mretek megadsa trtnhet abszolt, illetve relatv mdon. Az
abszolt md hasznlata nem ajnlatos, hiszen ezzel a megoldssal a blokk szlessgt
pixelben kell jelezni, s gy elvsz az alkalmazkod kpessg elnynek nagy rsze.
rdemesebb inkbb a relatv megadsi mdot elnyben rszesteni, mert ebben az esetben
a szlessget szzalkos rtkben kell megadnunk. Ez az rtk figyelembe veheti az egsz
ablak, vagy a tartalmaz s trol mrett. Mint az ksbb a HTML kdbl ltszdni fog,
jelen esetben nincs a blokknak se, teht a

httrsznt, illetve alaprtelmezett betsznt,

.global-kontener .fejlec{
background-color: black;
color: white;
width: 100%;
text-transform: uppercase;
font-weight: bold;

majd lezrjuk, gy amennyiben ltrehozunk egy

leszrmazott blokkot, az mr az s mreteit fogja

8. bra. fejlec osztly ltrehozsa

szlessge mindig az aktulis ablakmret 25%-a

lesz. Ennek a kontnernek meghatrozunk egy

figyelembe

venni

(egyb

tulajdonsg

megadsnak hinyban). Termszetesen ezek csak az alapvet tulajdonsgok, ha

szksges, akkor ennl sokkal pontosabban meghatrozhat a blokk kls megjelense. Ha
egy trol mr tartalmaz egy blokkot, akkor az alacsonyabb szint a leszrmazott, a
magasabb szint, pedig az s vagy szl.
Amennyiben a blokknak semmilyen magasabb szint se nincs, gy a blokk
szlessge a bngszablak mretnek fggvnyben kerl megjelentsre. A globlis

16

Weblapok szabvnyossga a pldk tkrben

Igaz Gergely

troln bell kell majd elhelyezkednie a

blokk

fejlcnek,

illetve

.global-kontener .szoveg{
margin-top: 0.5%;
padding: 1%;
background-color: #EFEFEF;
text-align: justify;

szveget

tartalmaz rsznek. A fejlc kialaktsnl

(8. bra) fontos szempont, hogy az egsz

fejlc azonos httrsznnel rendelkezzen.

9. bra. szoveg osztly meghatrozsa

Ezt a mr meglv blokk egy leszrmazott

tmbjnek ltrehozsval rhetjk el. Ezutn kvetkezhet a szveget tartalmaz rsz

elksztse. jabb trolt kell ltrehozni, melynek httrsznt a j olvashatsg rdekben
nem rdemes lnk sznre vlasztani, legoptimlisabb a vilgos httr - stt bet
megvalsts, ez a kontner a szoveg
osztlynevet kapta (9. bra). A szveg
elhelyezse utn kvetkezhetnek a lezrsok.
Ez a fejlc-blokknl mr megtrtnt, teht
csak a szveget tartalmaz, illetve az s
kontner nincs lezrva. A lezrsi sorrend
azonos tpus tag-eknl lnyegtelen, mivel

<body>
<div class=global-kontener>
<div class=fejlec>
Hrblokk fejlce
</div>
<div class=szoveg>
Ide kerlhet a tartalom
</div>
</div>
</body>

nincs klnbsg kzttk (pl.: </div></div>),

10. bra. A blokk megvalstsa

a lezrs helye viszont egyltaln nem mindegy. Ha az egymsba gyazs mveletbe

belezavarodunk, akkor nem a vrt eredmnyt fogjuk kapni. Ezrt ez a folyamat kell
krltekintst ignyel, mly begyazs esetn rdemes a nyit s zr blokkost tag-eket
magyarzattal elltni, a ksbbi knnyebb olvashatsg rdekben. A hrblokkot
megvalst HTML kd a 10. brn lthat. Ha a lezrs megtrtnt, akkor a blokk kszen
van, ha szksges, akkor a kontnerek tartalmnak
formtumt tovbb finomthatjuk az ignyeknek
megfelelen. A vgeredmnyt a 11. bra szemllteti.
A

blokkok

pixelpontosan,

illetve

pozcionlst

szintn

szzalkosan

tudjuk

megvalstani az oldal tetejhez, illetve bal s jobb

szlhez,

esetlegesen

egy

kontnerhez

11. bra. Az elkszlt hrblokk

viszonytva. Az oldallal kapcsolatos problmk

kztt felsorolsra kerlt a jobb oldal aljn tallhat navigcis rsz is, mely kpek ltali
navigcit tesz lehetv (a cl neve a kpen tallhat). Ennek kikszblsre terveztem
egy szveges navigcis rszt, melynek elhelyezkedse ugyanaz, de az oldal kezelhetsge
ez ltal jelents mrtkben javul. A navigcis blokk szneinek meghatrozsnl az oldal
17

Weblapok szabvnyossga a pldk tkrben

Igaz Gergely

sszkpt vettem figyelembe. A pozicionls tern a CSS szles teret enged a fantzinak,
vannak

beptett

igaztsok

(float:left;,

float:right;),

azonban

mi

magunk

is

meghatrozhatjuk a jobbra-balra igazts mrtkt, hasznlva a margin tulajdonsgokat,

melyet minden irnyra kln-kln megadhatunk (margin-left, margin-right, margin-top,
margin-bottom)
A mdostott verziban az sszes linket ellttam a title magyarz szveggel, ami
nagy segtsget nyjt a hang alap programokkal bngszk szmra, hiszen bvebb
informcit tudhat meg az adott linkrl. Ezzel a megoldssal azonban a Kattints Ide
tpus linkek nem fognak rtelmet nyerni, fontos a beszdes, tall, s lehetleg rvid
hivatkozsnv. A bngszprogramokban ez a kiegszts gy rzkelhet, ha az adott link
fl visszk az egrkurzort, nemcsak az llapotsorban jelenik meg a cloldal cme, hanem
nhny pillanatig a link fltt tartva megjelenik a magyarz szveg is.
Ha a fenti tervezsi lpseket kvetjk, olyan oldalt hozhatunk ltre, mely
alkalmazkodni fog a bngszablak mrethez, a szveg nem fog kilgni a kpbl, nem
lesz szksg vzszintes irny grgetsre. A kpernyn megjelen javtott verzi mr
csaknem a teljes terletet felhasznlja a megjelensre, a baloldali rsz a 64, mg a
jobboldali rsz 32 szzalkt foglalja el a mindenkori kpernymretnek. gy a szleken
eloszl szabad terlet sszesen 4%, ami jelents javulst jelent az elz, tblzatos
megjelentshez kpest. Ez 1600*1200-as felbontson is csupn csak 64 pixelt jelent, a
korbbi 800 pixellel szemben, ami majdnem 48 szzalkot tett ki, teht a javuls mintegy
45-46 szzalk. rdemes foglalkozni a HTML fjlok mretvel is. Az eredeti verzi mrete
34 687 bjt, a javtott verzi mrete, pedig lecskkent 15 977 bjtra. Ez az eredeti fjlmret
46 szzalka, teht a fjlmret a tartalom vltozatlansga mellet kzel a felre cskkent!
Mindkt verzi hasznl stluslapokat, az eredeti vltozathoz kapcsolt stluslap mrete
11 812 bjt, mg a javtott verzihoz 4 637 bjtos css kiterjeszts fjl csatlakozik, ami
7 175 bjttal kevesebb. A szmadatokbl is lthat teht, mennyivel hatkonyabb a javtott
A javtott oldal letltsi ideje
A kapcsolat
sebessge (Kbps):
14.4
28.8
50
64
128
1500

2. tblzat

Az eredeti oldal letltsi ideje 3. tblzat

A kapcsolat
sebessge (Kbps):
14.4
28.8
50
64
128
1500

A letlts vrhat
ideje (s):
10.9
5.4
3.1
2.5
1.2
0.1

oldal.

18

A letlts vrhat
ideje (s):
23.9
11.9
6.9
5.4
2.7
0.2

Weblapok szabvnyossga a pldk tkrben

Igaz Gergely

A jelenlegi kdmretek ismeretben meghatrozhat az oldal letltsi ideje, mely a

klnbz sebessg Internet-hozzfrsek esetben a 2. illetve 3. tblzatban lthat.
Ezek az rtkek termszetesen az oldalt kiszolgl szerver terheltsgnek
fggvnyben vltozhatnak, a feltntetett rtkek az optimlis esetre vonatkoznak. Lthat,
hogy kellen gyors elrssel nem szlelhet a mretbeli klnbsg, de a legelterjedtebb
modemes kapcsolat (64Kbps) esetn a letltsi id a felre cskken. A szakirodalom
szerint nagyon fontos, hogy ne kelljen sokat vrni az oldal letltdsre. Lthat, milyen
drasztikus mrtkben cskkenthet le az oldal mrete a CSS technika hasznlatval.
Termszetesen egy j Web fejlesztnek clul kell kitznie, hogy minl tbb informcit
nyjtson, a lehet legsszerbb felptsben, s trekednie kell a minl kisebb fjlmretre.

19

Weblapok szabvnyossga a pldk tkrben

Igaz Gergely

7. A Bnki Dont Gpszmrnki Fiskolai Kar honlapja2

7.1. Vizsglat
Az oldal felptsre itt is jellemz a tblzatos formzs, ennek javtsi lehetsgeit
az elzekben mr ismertettem. Ami a szabvnyossg, illetve hasznlhatsgi szempontok
szerint egy jabb problmt vet fel, az a keretek (FRAME-ek) hasznlata. Az utbbi 1-2
vben ugyan cskkenni kezdett a kereteket hasznl oldalak szma, azonban mg mindig
tallkozhat a felhasznl olyan weblapokkal, ahol tovbbra sem hagynak fel a frame-ek
alkalmazsval.
A frame-es technolgia alapja az, hogy a bngszprogram kpernyjt kt vagy tbb
rszre osztjuk fel, ezekben fog megjelenni a tartalom, ami kln HTML fjlokban van
letrolva. A keretek alakja csak ngyszgletes lehet, s ezek egymsba gyazhatak.
Jellemz alkalmazsi forma, mikor az oldalt ezzel a mdszerrel bontjk men- s
tartalomrszre. A keretekkel dolgoz oldalak esetben mindig ltezik egy lerfjl, amib l
az sszes tbbit meghvhatjuk. Ezekben a fjlokban a ktelez HTML elemeken kvl csak
a keretekre vonatkoz informcik tallhatk. Ez krlmnyesebb teszi a hibaellenrzs
folyamatt, mert nem a kezdlapot kell ellenriztetni, hanem a keretekben lv oldalakat
kln-kln.
A frame-ek mrete itt is pixelpontosan, illetve relatv mdon adhat meg. A tervez
azt is meghatrozhatja, hogy a keretet a felhasznl tmretezheti-e, illetve ha a tartalom
nem fr el az aktulis ablakmreten, legyen-e lehetsg grgetsre. A keretek hasznlata
mellett azt az rvet szoktk felhozni, hogy fggetlenek egymstl, mgis mindegyik
kapcsolatban ll a msikkal. Rgebben nem egy bngsznl fordult el, hogy nem
tmogatta a keretek megjelentst, ilyenkor egy tjkoztat szveget kaphatott a
felhasznl. Az oldalakon bell elhelyezhetek tovbb gynevezett lebeg frame-ek
(IFRAME), azonban ezek hasznlata vgkpp nem ajnlott, mert nem mindegyik bngsz
tmogatja.
Az eredeti Bnki honlap 3 keretbl pl, baloldalon a menoszlop, jobb oldal fels
rszn a tartalomrsz, mg a jobb oldal aljn az oldallal kapcsolatos informcik kaptak
helyet. Egyik sem tmretezhet, s csak a fggleges keretek rendelkeznek szegllyel, az
alst megprblja a kszt elrejteni. A keretek hasznlata helyett rdemesebb itt is ttrni
2

Az oldal elrhetsge: http://www.banki.hu

Az eredeti, illetve javtott verzik megtallhatak a mellkletben.

20

Weblapok szabvnyossga a pldk tkrben

Igaz Gergely

a CSS segtsgvel trtn megvalstsra, hatkonyabb megoldsi forma. A javtott

verziban az oldal kt nagy kontnerre lett felosztva, gy baloldalra a navigci,
jobboldalra, pedig a tartalom s az oldalra vonatkoz informcik sszevonva kerltek.
Ezzel a megoldsi mdszerrel az oldal egy fjlban van letrolva, melynek mrete
5 912 bjt, ezzel szemben az eredeti pldny (ami 3 rszbl addik ssze) 10 913 bjt
nagysg, teht a mretcskkens ebben az esetben is 50 szzalk krli (pontosan: 54,2
szzalk). Az eredeti honlap 4 450 bjt mret stluslappal rendelkezik, a javtott verzit,
pedig gy sikerlt megvalstani, hogy mg ez az rtk is lecskkent 3 327 bjtra, ezzel a
stluslap mrete 25 szzalkkal cskkent. A jelenlegi fjlmretek esetben a letltsi idk a
A javtott oldal letltsi ideje
A kapcsolat
sebessge (Kbps):
14.4
28.8
50
64
128
1500

4. tblzat

A javtott oldal letltsi ideje 5. tblzat

A letlts vrhat
ideje (s):
4.0
2.0
1.2
0.9
0.5
0.0

A kapcsolat
sebessge (Kbps):
14.4
28.8
50
64
128
1500

A letlts vrhat
ideje (s):
6.8
2.7
2.0
1.6
0.8
0.0

4. s az 5. tblzat szerint alakulnak.

Az ltalam felvzolt megoldsi forma azzal a kompromisszummal jr, hogy a
mensor is grdlni fog abban az esetben, ha a tartalom rszben hosszabb szveg van.
Teht a jelenlegi verzitl eltren elfordulhat, hogy az oldal aljn lv tartalom
megtekintsekor nem fog ltszani a bal oldali men. Ez a problma is knnyedn
megoldhat, ha az oldal tetejre mutat horgonyokat (anchor) helyeznk el az oldal aljn,
nagyon hossz szveg esetn a szveg kz beszrva akr tbbet is. Ezek segtsgvel
jratlts nlkl az oldal tetejre juthatunk.
Hozzfrhetsgi szempontbl ugyancsak problmt jelent az eredeti verziban, hogy
az iskola 125 ves vforduljt hirdet szveg egy kpbe van helyezve, amit nem lttak el
magyarz (ALT, vagy TITLE) szveggel. gy az a felhasznl, akinek a bngszje nem
tlti le a kpeket, nem fog tudomst szerezni az intzmny jubileumrl. Ez az informci
a javtott verziban mr szveges informciknt szerepel. Mivel a kpen tallhat szveg
valamilyen grafikus szerkesztprogrammal kszlt, ezrt a javtott verzi egyszer
szveges megoldsa kzel sem annyira ltvnyos. ltalnossgban az egrrel trtn
kijellssel

lehet

szveges,

illetve

megklnbztetni.

21

kppel

megjelentett

informcikat

Weblapok szabvnyossga a pldk tkrben

Igaz Gergely

8. Az Indygo aprhirdetsi oldal3

Vgl egy kereskedelmi oldal elemzse kvetkezik. Az Indygo f profilja az
aprhirdets, de foglalkozik tovbb ingyenes szolgltatsokkal, mint pldul kpeslapok,
on-line jtkok, chat, valamint frum.

8.1. Vizsglat
Az oldalhoz egyetlen stluslap kapcsoldik, ez azonban kizrlag szvegre, illetve
htterekre vonatkoz utastsokat tartalmaz, pozcionlsi informcit egyltaln nem. Ezt
teljes egszben tblzatokkal, illetve a HTML-ben tallhat formz elemekkel valstjk
meg. Mint az a javtott oldalbl is ltszik, ebben az esetben is sikeresen hasznlhat az
elzleg mr ismertetett eljrs. Ezt a megoldst ismertettem az oldal ksztjvel is, aki
mgis elutastotta a CSS-el trtn formzsra, pozcionlsra val ttrst. Indoklsa
egyszer volt: amg az sszes bngsz nem kpes egyformn rtelmezni a szabvnyt,
addig inkbb megmarad a tblzatos megoldsnl. Az oldal dinamikus feltlts, teht az
informcik feltltse a lapra adatbzis segtsgvel trtnik PHP, illetve CGI script-ek
segtsgvel. Ez azonban egyltaln nem indokolja az ismertetett technika elutastst,
hiszen ezt a megoldst ppgy be lehet pteni a szkript kdjba, mint a tblzatok
esetben. A stluslapok azonban gymond bngsz-kompatibiliss tehetek, akr
JavaScript segtsgvel is. Kiolvasva a bngszprogram informcijt, mdostsokat
lehet vgrehajtani a stluslapon, gy az esetlegesen ismert flrertelmezseket bizonyos
mrtkben korriglni lehet.

8.2. Forrskd
Ha valaki csak nhny pillantst is vet a lap forrskdjra, azonnal feltnhet, hogy
borzasztan bonyolult a felptse. Nem ritka az 5-6 egymsba gyazott tblzat sem,
ezeknek tbb sora s oszlopa is van. Abban az esetben, ha valaki mdostst, vltoztatst
szeretne vgrehajtani, meglehetsen nehz dolga lesz, mire megtallja azt a tblzatot, ami
valjban tartalmazza az adott informcit (feltve, ha nem ismeri az oldal pontos
felptst). Megfigyelhet, hogy a kd rengeteg mretez tulajdonsgot is tartalmaz, ami
szintn hozzjrul a fjlmret megnvekedshez, mivel azokat minden egyes elemhez
kln-kln meg kellet adnia a ksztnek. A lap meta elemekkel megfelel mrtkben
el van ltva, megtallhat az oldal rvid lersa, a keresk szmra a kulcsszavak, valamint
3

Az oldal elrhetsge: http://www.indygo.hu

Az eredeti, illetve javtott verzik megtallhatak a mellkletben.

22

Weblapok szabvnyossga a pldk tkrben

Igaz Gergely

az oldal ksztjnek neve, s az oldal tartalmnak pontos meghatrozsa. Az oldal

mreteinek meghatrozsa vegyes kpet mutat, nhol relatv, mshol abszolt
mretmegadst hasznlt a kszt, de az oldal eltr felbontsok esetben is ugyangy nz
ki, teht a legfels szinten lv tblzat szlessge abszolt mdon lett meghatrozva,
melynek rtke pontosan 763 pixel. Az oldal teht 800*600-as felbontsra van
optimalizlva.

javtott

verziban

ez

problma

megolddott,

brmekkora

kpernyfelbonts esetn alkalmazkodni fog az oldal.

Aki rszletesebben is szemgyre veszi a javtott oldal forrskdjt, szreveheti, hogy
nagyon sok, apr kontnerbl pl fel egy-egy rsz, ez azonban mgsem veti fel az
tlthatatlansg problmjt (mint nhny tblzatos megoldsnl), mert az sszes blokk
osztlynvvel van elltva, ezrt a szemlld szinte mindig tudni fogja, hogy melyik
rsznl tart a forrskdban. A j tlthatsg rdekben rdemes beszdes, m mgsem
tl hossz azonost, illetve osztlyneveket alkalmazni, jelentsen hozzjrulva ezzel a
ksbbi jrahasznosthatsghoz, knnyebb vlik az esetleges kiegszts, javts. Az
osztlynevek meghatrozsnl nhny program (pl.: Top Style Pro, letlthet:
http://www.bradsoft.com) nem javasolja az alsvons (_) karakter hasznlatt, mert
nhny rgebbi verzij bngsznek gondot okoz ezek felismerse. A stluslapokban
helyette a ktjelet (-) alkalmaztam (pl.: kontener-fejlec).
sszessgben lthat, hogy a felmerlt problmk hasonlak az elzekhez, ezrt a
mr ismertetett eljrs ebben az esetben is hasznlhat.

23

Weblapok szabvnyossga a pldk tkrben

Igaz Gergely

9. sszegzs
Az Internet megjelense hatalmas vltozst hozott az informcik megszerzsnek
mdjban. Az emberek gyorsan, knnyen juthatnak olyan mennyisg informcihoz,
amely nhny vtizeddel ezeltt elkpzelhetetlen lett volna. Azonban nem elegend csak
azzal foglalkoznunk, hogy meg tudjuk-e szerezni az adott informcit, vagy sem.
Mindenkppen rdemes figyelmet fordtanunk arra is, hogy ezek az ismeretek milyen
krnyezetben, milyen mdon jelennek meg a felhasznl szmra. A szakdolgozatban
ismertetett megoldsi mddal a tblzatos pozcionlst hasznl oldalak mrete kzel a
felre cskkenthet, ksznheten a CSS-el trtn elrendezsnek, formzsnak. Mindez
gy tehet, hogy a tartalom vltozatlan marad, st az adott oldal mg hasznlhatbb vlik,
kpes lesz alkalmazkodni a felhasznl ablakmretre vonatkoz belltsaihoz is.
Megllapthat, hogy nem okolhatak egyrtelmen a webfejlesztk, azrt hogy mg
mindig a rgebbi megvalstsi technikt hasznljk. A bngszprogramok fejleszti is
jelentsen hozzjrultak ahhoz, hogy ez a folyamat elindult, s mg napjainkban is tart. De
mint az lthat volt, nmi j ismeret megszerzsvel a tblzatos formzs lnyegben
megszntethet, helyettesthet CSS alkalmazsval, s elmondhat, hogy ennek
hasznlatval minden webfejleszt sajt munkjt knnyti meg.

24

Weblapok szabvnyossga a pldk tkrben

Igaz Gergely

10. brajegyzk, tblzatjegyzk

1. bra. A Web mkdse ..........................................................................................2
2. bra. A CSS doboz modellje...................................................................................9
3. bra. Az eredeti PMMK honlap bngszben megjelentve ..................................12
4. bra. A javtott PMMK honlap bngszben megjelentve ...................................12
5. bra. A narancs osztly tulajdonsgainak meghatrozsa.................................15
6. bra. A narancs osztly alkalmazsa a HTML kdban.......................................15
7. bra. A global-kontener osztly tulajdonsgainak megadsa ............................16
8. bra. A fejlec osztly tulajdonsgainak definilsa ...........................................16
9. bra. A szoveg osztly tulajdonsgainak megadsa...........................................17
10. bra. A hrblokk HTML kdja............................................................................17
11. bra. A ltrehozott hrblokk bngszben megjelentve ......................................17
1. tblzat. A mdiatpusok felsorolsa.......................................................................9
2. tblzat. A javtott PMMK honlap letltsi ideje ..................................................18
3. tblzat. Az eredeti PMMK honlap letltsi ideje .................................................18
4. tblzat. A javtott Bnki honlap letltsi ideje.....................................................21
5. tblzat. Az eredeti Bnki honlap letltsi ideje....................................................21

25

Weblapok szabvnyossga a pldk tkrben

Igaz Gergely

11. Irodalomjegyzk
[1]

World Wide Web Consortium (W3C)

(http://www.w3c.org)
[1.1] HTML 4.01 Specification
http://www.w3.org/TR/1999/REC-html401-19991224
[1.2] XHTML 1.0 The Extensible HyperText Markup Language
http://www.w3.org/TR/2002/REC-xhtml1-20020801
[1.3] Cascading Style Sheets, level 1
http://www.w3.org/TR/1999/REC-CSS1-19990111
[1.4] Cascading Style Sheets, level 2
http://www.w3.org/TR/1998/REC-CSS2-19980512

[2]

Paczona Zoltn HTML technikk a gyakorlatban

Computer Panorma Kiad Budapest, 2001 (59-63, 71-98)

[3]

Lszl Jzsef - Mindenkinek az INTERNET-rl

ComputerBooks Kiad Kft Budapest. 2000, ISBN: 963 618 239 6 (230-237)

[4]

Gl Tibor Webprogramozs
Megyetemi Kiad Budapest 2004, ISBN 963 420 800 2

[5]

Htmlinfo.Poliyhistor.hu
http://htmlinfo.polyhistor.hu

26