E-Learning Digitalis Tananyagok Keszitese Modszertan Es Megvalositas

Debreceni Egyetem
Informatika Kar
E-learning, digitlis tananyagok ksztse:
mdszertan s megvalsts
Tmavezet: Ksztette:
Dr. Bujdos Gyngyi Csizmadia Balzs
egyetemi adjunktus informatika tanr
Debrecen
2008
2

1. Bevezets................................................................................................................................ 5
2. Az e-learning ......................................................................................................................... 7
2.1. Az e-learning trtnete...................................................................................................... 8
2.2. A szmtgppel tmogatott oktats/e-learning.............................................................. 9
2.3 Az e-learning kpzsi formi ........................................................................................... 10
2.3.1 Tanul ltal irnytott e-learning................................................................................. 11
2.3.2 Elsegtett (facilitated) e-learning................................................................................ 11
2.3.3. Oktat ltal irnytott e-learning................................................................................ 11
2.3.4 Begyazott e-learning.................................................................................................... 11
2.3.5 Telementoring s e-coaching ........................................................................................ 12
2.4 Az e-learning tanulmnyi keretrendszere s tartalomkezel rendszere...................... 12
2.5 Az e-learning tartalom felptse .................................................................................... 14
2.6 Az e-learning elnyei s htrnyai .................................................................................. 14
2.7 Az e-learning piacot meghatroz szereplk ................................................................. 15
2.7.1 A kzoktats................................................................................................................... 15
2.7.2 A felnttkpzs............................................................................................................... 16
2.7.3 Vllalati kpzsek.......................................................................................................... 16
3. Az e-learning szabvnyostsa........................................................................................... 17
3.1 Az IEEE e-learning szabvnya, a LOM......................................................................... 17
3.2 Az ADL SCORM szabvnyrendszere............................................................................. 18
4. Az e-learning mdszertana ................................................................................................ 20
4.1 A tananyag tartalmnak sszelltsa ............................................................................ 20
4.2 A tananyag szvegnek megformlsa ........................................................................... 21
4.3 A tananyag hipertexes tagolsa, kp- s hangelemeinek kivlasztsa......................... 21
5. HTML, CSS, JavaScript .................................................................................................... 22
5.1 HTML (HyperText Markup Language)......................................................................... 22
5.1.1 A HTML dokumentum felptse ................................................................................ 22
5.1.2 A HTML dokumentum szvegtestnek felptse ...................................................... 24
5.1.3 A HTML dokumentum cmszintjeinek felptse....................................................... 25
5.1.4 Bekezdsek a HTML dokumentumban....................................................................... 25
5.1.5 Kereszthivatkozsok HTML dokumentumok kztt................................................. 26
3
5.1.6 Karakterformtumok a HTML dokumentumban..................................................... 27
5.1.7 Kpek elhelyezse a HTML dokumentumban............................................................ 28
5.1.8 Listk a HTML dokumentumban................................................................................ 28
5.1.9 Tblzatok...................................................................................................................... 29
5.1.10 Keretek ......................................................................................................................... 31
5.1.11 A HTML s a multimdia ........................................................................................... 32
5.2 Stluslapok, CSS................................................................................................................ 33
5.2.1 A stluslapok kialakulsnak trtnete ....................................................................... 33
5.2.2 Begyazott stluslap....................................................................................................... 35
5.2.3 Kls stluslap................................................................................................................ 35
5.2.4 Elemhez rendelt stlus ................................................................................................... 36
5.2.5 Importlt stluslap ......................................................................................................... 36
5.2.6 Stlusok formtuma....................................................................................................... 36
5.2.7 Kivlasztk..................................................................................................................... 37
5.2.8 Elem kivlaszts............................................................................................................. 37
5.2.9 Osztly alap kivlaszts .............................................................................................. 37
5.2.10 Azonost alap kivlaszts ........................................................................................ 38
5.2.11 Helyzetrzkeny kivlaszts ....................................................................................... 39
5.2.12 Szl-gyermek kivlaszts.......................................................................................... 39
5.3 JavaScript.......................................................................................................................... 39
5.3.1 JavaScript s HTML..................................................................................................... 40
5.3.2 Adatok, vltozk s kifejezsek.................................................................................... 41
5.3.3 Utastsok....................................................................................................................... 42
5.3.3 Objektumok ................................................................................................................... 43
5.3.6 Beptett objektumok .................................................................................................... 45
5.3.7 Esemnykezels.............................................................................................................. 46
5.3.8 llapotsor kezels .......................................................................................................... 48
6. A weboldal bemutatsa ...................................................................................................... 50
6.1. A weboldal bemutatsa az e-learning oldalrl............................................................ 50
6.2. A weboldal bemutatsa az informatika oldalrl......................................................... 51
6.3. Az oldal hasznlata.......................................................................................................... 55
6.4. Tesztels, zembe helyezs.............................................................................................. 56
4
7. sszefoglals ....................................................................................................................... 57
Irodalomjegyzk ..................................................................................................................... 58
5
1. Bevezets
Az oktats trtnetben rendkvl fontos szerepe van a szmtgp s az Internet
megjelensnek. Az els szmtgpeket hatalmas - egy teljes termet elfoglal - mretk, s
bonyolult kezelsk miatt, csak a felsoktatsban hasznltk. Ahogy az informcis s
kommunikcis technika fejldtt, gy vettk hasznlatba a szmtgpeket az ltalnos- s
kzpiskolk, valamint a felnttoktatssal foglalkoz intzmnyek.

Az Internet ltalnos hasznlata csak a 1990-es vektl, a WWW (World Wide Web)
megjelense utn terjedt el. Ma mr ott tartunk, hogy az Internet segtsgvel napraksz
informcikat szerezhetnk, s szmtalan szolgltatst hasznlva, mint pldul az e-mail,
chat, videokonferencia, blog a tlnk tvolabb l emberekkel is kapcsolatot tudunk tartani.
Ltrejtt egy j fogalom, az informcis trsadalom.

Az informcis trsadalom nevezhet tuds-alap trsadalomnak is, ahol a tuds birtokosa
egyben a munkaerpiac legkeresettebb embere. Az informci a gazdasg mozgatrugja is.
Az egyn tudsa, kszsge, ismeretanyaga az id mlsval elvl, szinten tartsa vgett jbl
tanulnia kell, akr munka mellett. Az informcis trsadalom egyik alapvet ttele az
lethosszig tart tanuls, ami jelents idrfordtst is ignyel.

Ebbl egyenesen kvetkezik, hogy az oktatsnak vltoznia kell, kvetnie, tmogatnia
szksges az lethosszig tart tanulst. Az iskolnak nemcsak a tananyagot kell megtantani a
tanulival, hanem azt a kpessget is, hogy nllan tudjanak tanulni. Ebben a folyamatban
megvltozik a tanr szerepe is.

Az 1980-as vektl kezdve majdnem minden orszgban megtallhat a tvoktats. A
tvoktats lehetsgeit kihasznlva a munkaer-piaci keresletnek megfelelen folyhat a
felnttek kpzse, vagy a szksg szerinti tkpzse. A vllalatok szmra azonban ez az
oktatsi mdszer nem kltsgkml, mivel akr munkakiesst is okozhat egy-egy tanfolyam
elvgzse. Az informcis s kommunikcis technika eszkzeit a tvoktats beleptette a
mdszertanba, ezzel is segtve az otthontanuls lehetsgt. Az Internet szleskr
elterjedsekor megszletik egy j oktatsi forma, az e-learning.
6

Az e-learning, vagy magyarul elektronikus tanuls, egyesti a tvoktatst a hlzati
technolgival. Mg a tvoktatsnl a hallgatk nyomtatott tananyagot kapnak kzhez, s
tvolrl kldik be dolgozataikat, az e-learning tanfolyamot vgz hallgat egy msik
eszkzrendszerrel: a szmtgp, illetve hlzatok segtsgvel oldja meg mindezt,
megszabadulva a merev idkorlttl s a lineris leckefelptstl. Brhol, brmikor elrheti a
tananyagot, csupn egy szmtgpre s egy Internet kapcsolatra van szksge.

Az e-learning tanfolyamokat csak abban az orszgban lehet sikeresen szervezni, ahol
megfelel svszlessg Internet, s szmtgp elltottsg van. A szlessv Internet-
kapcsolat elfizetse, az Internet-szolgltatk piaci versengse miatt elfogadhat rra
cskkent Magyarorszgon, valamint a szmtgp elltottsg is nvekv tendencit mutat az
utbbi vekben. Az e-learning folyamatos fejldse nehezti a szabvnyostst. Hivatalos
szabvny nem ltezik, br szmos szervezet foglalkozik a fejlesztskkel. Ahhoz, hogy egy
intzmny e-learning kurzust indtson, szksge van egy keretrendszerre s egy e-learning
mdszertan tananyagra. Szmos keretrendszer kzl vlaszthatunk, de a tapasztalat azt
mutatja, hogy egy j tananyag vsrlsa, netn elksztse, sokkal komolyabb problmt
okoz. A pedaggusok kpzsben, illetve tkpzsben mg nem mindenhol van jelen az e-
learning mdszertannak oktatsa.
1

n a Hajd-Bihar Megyei Egszsgbiztostsi Pnztrnl dolgozom, mint szakmai
rendszergazda. A munkakrm nagy rszt a Pnztrnl hasznlt DigiNet elnevezs iktat,
irat- s gyfolyamat-kezel rendszer rendszergazdai feladatainak az elltsa teszi ki, amibe
beletartozik az gyintzk oktatsa is. A programhoz tartozik egy papr alap felhasznli
utasts, ami kb. 80 oldal. Minden gyintznek ezt kinyomtatni elg kltsges volna, ezrt
prbltam egy kltsghatkonyabb mdszert kitallni, ami segtsg lehet a dolgozknak.
Megltsom s tapasztalataim szerint a kzszfrban csak a hagyomnyos oktatsi modell
rvnyesl. Ez fleg abbl addik, hogy erre van igny s felkszltsg. Ezt tmasztotta al,
amikor ms kzigazgatsi szerveknl rdekldtem a munkahelyi oktatsrl. Ezrt a
dolgozatom rszeknt egy webes fellet hasznlati utastst ksztettem, ami egy tanr-
centrikus tanulsra pt. Ez lnyegben egy tudstadst jelent.

1
Kovcs Ilma: j t az oktatsban?, Budapesti Kzgazdasgtudomnyi Egyetem s a Professzorok Hza
Felsoktatsi Koordincis Iroda, Budapest, 1997
7

Szakdolgozatom kvetkez fejezeteiben az e-learning-gel fogalakozom, valamint bemutatom
azokat a nyelveket amelyet felhasznltam a weboldal elksztshez s magt az oldalt is
ismertetem.

2. Az e-learning
Az e-learning (elektronikus tanuls) fogalmt tbbfle rtelemben hasznljk, magt az angol
szt is tbbflekppen rjk (e-learning, elearning, eLearning). Legtgabb rtelemben
technolgival tmogatott tanuls (technology supported learning) szmtgp segtsgvel
trtn tanuls, digitlis tananyag segtsgvel trtn tanuls. Ilyen rtelemben jelentheti a
CD-ROM segtsgvel egynileg trtn tanulst is multimdis szmtgppel. Msok
elssorban vagy kizrlag az internet vagy intranet alap tanulst a hlzaton szervezett s
folytatott oktatst rtik rajta. gy az informatikai technolgit hasznost tvoktatst is jelli.
Az Internet alap kpzs (Internet-based training), az online tanuls (online learning)
kifejezsek hasznlata mellett a kilencvenes vek msodik feltl, de klnsen az
ezredfordultl, mindinkbb az e-learning kifejezs vlt ltalnoss, fellelve az
iskolarendszer oktats megjtst, a felsoktatsi alkalmazst, a szakmai tovbbkpzsek s
az egyes egyn nkpzsnek j lehetsgeit.

Mikzben mind tbbfle e-learning termk s szolgltats jelent meg elssorban az Egyeslt
llamokban, majd vilgszerte, s valsgos e-learning ipar van kialakulban az Eurpai Uni
e-learning kezdemnyezse nyomn, 2000 ta fokozatosan az oktats s kpzs j
koncepcijt hordozza ez a kifejezs. Ez pedig az j alapkszsgeket kifejleszt s azokra
pt, mindenki szmra elrhetv tett, egsz leten t tart tanuls programja s lehetsge.

Az informcis trsadalom projekteknek s az e-learning kezdemnyezseknek
szksgkppen szerves rszei a tanrkpzs s tanrtovbbkpzs megjtsra irnyul
programok.
2

2
Magyar Gallup Intzet http://ip.gallup.hu/elearning/index.htm
8
2.1. Az e-learning trtnete
Az e-learning trtnete tbb szakaszra bonthat aszerint, hogy milyen tmegkommunikcis
eszkzk alkalmazsval helyettestettk a hagyomnyos, tantermi krlmnyek kztt zajl,
kzvetlen tanr-dik viszonyra pt oktatsi formkat.

Az els szakasz az 1840-es vekre tehet, ekkor terjedt el a blyegek hasznlata s ezltal a
levelez oktats. A Nagy-Britanniban l Isaac Pitman neve fmjelzi ezt a korszakot. volt
aki a gyorsrst oktatta ily mdon. 1917-ig ms orszgokban is megjelent a levelez oktats:
Nmetorszg 1856; Franciaorszg 1877; Svdorszg 1898, Amerikban 1891, illetve
Ausztrliban 1914.

A msodik szakaszban a blyeg helyett az ter kapott fszerepet. A tananyagot rdin
keresztl jutattk el a dikokhoz. Ez a ksrlet is Nagy-Britannibl indult ki, de korntsem
akkora sikerrel, mint a levelez oktats. Sokkal inkbb a hagyomnyos kpzsi mdszerekkel
prhuzamosan, azok kiegsztsre hasznltk. 1927-ben volt az els ksrlet, a BBC
iskolardis msorok sugrzst tzte msorra. Ksbb ezt a mdszert is tvettk ms
orszgok: Franciaorszg 1937; Amerikai Egyeslt llamok 1939; Ausztrlia 1942;
Szovjetuni 1920-as vek, egyb volt szocialista orszgok 1950-es vek, de sehol sem tett
szert vezet szerepre az alternatv oktatsi mdszerek kztt.

A harmadik szakasz az 1980-as vekre tehet, amikor a fejlett orszgokban megjelenik a
szmtgppel tmogatott oktats (Magyarorszg 1990-es vek). Ez a fajta oktatsi md j
lehetsgeket nyit meg az oktats, kpzs terletn, azltal, hogy lehetv teszi az eddig csak
elszigetelten alkalmazhat eljrsok immr egyttesen trtn felhasznlst. A levelez
oktats csupn vizulis ton juttatta el a dikokhoz a tananyagot. A rdi tjn trtn kpzs
ezzel szemben ppen, hogy vizulis lmnyt nem nyjtott, csak a hallsunkra
sszpontostott. A szmtgp alkalmazsval lehetv vlt a tbbi rzkszervre trtn
egyttes hatsgyakorls anlkl, hogy ehhez klnbz eszkzket kelljen felhasznlnunk. A
szmtgp ugyanis lehetv teszi az audiovizulis eszkzk egyszerre trtn alkalmazst.
3

3
Kovcs Ilma: j t az oktatsban?, Budapesti Kzgazdasgtudomnyi Egyetem s a
Professzorok Hza Felsoktatsi Koordincis Iroda, Budapest, 1997
9
2.2. A szmtgppel tmogatott oktats/e-learning
Az elz fejezetben trgyalt trtneti rsz harmadik szakaszt tovbb boncolgatva juthatunk
el a korbban mr definilt e-leraning-hez.

Az e-learning korai formja a CBT (Computer Based Training), azaz szmtgppel segtett
tanuls, ahol az oktatanyag valamilyen digitlis adathordozn tallhat (pldul: floppy, CD
stb.). Ezltal a tananyag hordozhatv vlt, a hallgat brmikor s akrhnyszor lejtszhatta a
tanuls sorn. A hely s id korltjai a hallgat ignyeihez mrten kibvlnek. Htrnya,
hogy a tanr s a tanul kztt semmilyen kapcsolat nem plt ki, s csak az adathordozn
tallhat tartalmat kzvettette.

A technolgik fejldsvel lehetsg nylik r, hogy az elektronikus tanuls valdi
kpzsmenedzsmenttel trsuljon. Ezt az oktatstpust WBT-nek (Web Based Training), azaz
szmtgpes hlzaton keresztl megvalsul tanulsnak, on-line learning-nek nevezzk. Az
oktats egy j elemmel bvl, megjelenik a hlzati kommunikci, gy a hallgat a tanrral
e-mail, chat, frum, videokonferencia formjban tartja a kapcsolatot.

E-learning-rl csak 1990-es vek elejtl beszlhetnk, ekkor jelent meg az Egyeslt
llamokban, mint kpzsi forma. Eurpban az 1990-es vek vgn honosodott meg az e-
learning. Az oktats egy informatikai hlzaton - ami lehet LAN, WAN, Internet vagy
intranet trtnik, aszinkron, illetve szinkron formban. A kommunikci ezen a
szmtgpes hlzaton keresztl trtnik, a hallgat s a tanr kztt. Az oktatsi-tanulsi
folyamatok tervezse, szervezse, kivitelezse s rtkelse is a szmtgpes hlzat
segtsgvel trtnik.

Az e-learning fogalma s trtnete ttekintse utn az 1. bra mutatja meg, hogy milyen
oktatsi s tanulsi formkbl tevdik ssze az e-learning.
10

1. bra
Az e-learning sszetevi
4

2.3 Az e-learning kpzsi formi
Az e-learningnek kt fajtja alakult ki: a szinkron s az aszinkronkpzs. A szinkron
kpzsnl a tanr s a tanul egyidben van jelen az oktatsi folyamatban, a hallgat brmikor
krdst tehet fel az oktatnak, amire azonnal vlaszt kap. Htrnya ennek a kpzsnek, az
idbeli ktttsg. Az aszinkron kpzsnl a tanr s a tanul idbeli s trbeli teljes
elklnlst ttelezi fel, azaz a hallgat nllan s egyedl veszi t a leckt.

Az e-learningnek az albbi tpusait definilhatjuk:
- tanul ltal irnytott,
- elsegtett (facilitated),
- oktat ltal irnytott,
- begyazott e-learning,
- telementoring s e-coaching.

4
Komenczi Bertalan: Didaktika elektromagna? Az e-learning virtulis valsgai
http://www.oki.hu/oldal.php?tipus=cikk&kod=2004-11-ta-Komenczi-Didaktika#top
11
2.3.1 Tanul ltal irnytott e-learning
Ennl a tpusnl a tanul nincs kapcsolatban az oktatval s ms dikokkal, csak a
tananyaggal. Az oktatanyag tartalmazza az sszes tmutatst, magyarzatot. Nincs md az
ellenrzsre, nem lehet mrni, hogy a dik mennyit tanult. A felhasznl bngszn keresztl
hasznlja az e-learning lehetsget.

2.3.2 Elsegtett (facilitated) e-learning
A hallgat tud kommuniklni ms tanulkkal vagy a facilittorral. A facilittor nem tant,
csak segt a problmk megoldsban. Jogosult osztlyozni, kirtkelhet feladatokat s
dolgozatokat. A kommunikci szntere egy frum, de a facilittor minden hallgatval kln
fel tudja venni a kapcsolatot.

2.3.3. Oktat ltal irnytott e-learning
A hagyomnyos tvoktatsi mdszerek kiegsztve a webtechnolgival. Ebben az oktatsi
formban vals idej kommunikci folyik: video- s audiokonferencia, chat, kperny- vagy
alkalmazsmegoszts, telefonbeszlgets. Itt is hasznlnak frumot, ahol a hallgatk
egymssal, illetve az oktatval megbeszlhetik a problmkat, feladatokat. Ennl az e-
learning tpusnl htrny lehet az alacsony svszlessg, mivel egy videokonferencihoz
szlessv Internet szksges.

2.3.4 Begyazott e-learning
A begyazott e-learning esetn beptett oktats vagy segtsgnyjts tallhat, amit a
felhasznl azonnal hasznlhat, ha segtsgre van szksge a problma megoldsnl. Ez a
beptett oktats egy program, amit ltalban a tanul gpre kell telepteni. Itt nincs
kzvetlen kapcsolat a hallgat s az oktat kztt. Kommunikci csak a diktrsakkal
lehetsges frum segtsgvel.

12
2.3.5 Telementoring s e-coaching
A mentori kapcsolat ltalban hossz idej. A mentor s a hallgat kztt videokonferencia,
internettelefon s ms egyttmkdsi eszkzk biztostjk a kapcsolatot. Hagyomnyos
rtelemben vett oktats nincs, mivel a mentor inkbb tudst, tapasztalatot ad t. On-line
coaching esetben rvid s jl definilt problma megoldsa trtnik. Itt az on-line coach
konzulens szerepet tlt be.
5

2.4 Az e-learning tanulmnyi keretrendszere s tartalomkezel rendszere
Az e-learning tanulmnyi keretrendszere az LMS (Learning Management System), amely az
alapvet oktatsi szervezsi feladatokat, tananyagok megjelentst, valamint klnbz
tanulmnyi funkcikat lt el. Lnyegben egy virtulis osztlyteremknt is felfoghatjuk,
melyhez klnbz tananyagokat tudunk hozzrendelni egy adott szabvny szerint. Az LMS
rendszerek struktrja nagyon vltoz, de egy kzs pontjuk van: mindegyik rendszer a
hallgatkrl s kurzusokrl informcikat trol.

Egy LMS kivlasztsakor fontos szempont:
- a hallgati jelentkezs automatikus kezelse,
- elre elksztett tananyagok importlsa,
- nem az LMS-ben lv tananyagok kezelse,
- ms rendszerekhez val integrlhatsg,
- automatikus szmlzsi lehetsg,
- automatikus hallgati esemny kvetse,
- tvoli adminisztrci lehetsge.

Mivel az LMS-eket intzmnyeknek megfelelen hozzk ltre, nem volt biztostott a
hallgatk szmra az tjrs lehetsge. Ez a szemllet a Web fejldstrtnet 1.0-s
szakaszban jellemz. A Web fejdse kihat az e-learning fejldsre. LMS+tananyag e-
learning 1.0.

5
Digitlis taneszkzk hasznlata a szakkpzsben
http://www.sulinet.hu/ikt/17_szakmacsoport/rendeszet/rendeszet_06.html
13
A Web 2.0 az olvasott web-rl az rott-olvasott web irnyba vltozik. Ez elssorban nem
technolgiai, hanem szemlletbeli vltozst jelent. Az j irny a tanulkzpont szemllet.
Erre pl szemlyes tanulmnyi krnyezetet hoztak ltre, aminek a neve PLE (Personal
Leraning Environment). Ezek a rendszerek mr tartalmazzk a blog rs lehetsgt, egy
helyen tbb tucat weboldal tartalmnak figyelst (RSS, Rich Site Summary), kapcsolatok
polst (FOAF). A hallgat ltrehozza sajt, egyni tanulmnyi krnyezett, aminek
segtsgvel rkapcsoldik a kvnt oktati keretrendszerekre. A nylt, rugalmas PLE-k
tanulkzpont szemllete komoly khvs a zrt, hagyomnyos intzmnycentrikus oktatsi
mdszertanra pl LMS rendszereknek. Tanulkzpontsg+web alap tanuls e-
learning 2.0.
6

Az LMS s PLE sszehasonltst az albbi tblzat szemllteti.
7

LMS PLS
rugalmatlan rugalmas
intzmny-kzpont tanul-kzpont
formlis ktetlen
zrt rendszer nyitott rendszer
alkalmazs platform

Az LCMS (Learning Content Management System) rendszerekhez olyan szoftverek
tartoznak, amelyeket elektronikus kurzusok fejlesztshez hasznlnak. Az LCMS rendszer
nagy segtsg lehet a szakrtk, oktatk, mdia-ksztk, programozk szmra. A hallgatk
egyszeren ki tudjk vlasztani a szmukra szksges anyagokat.

A LCMS biztostja:
- a didaktikus feldolgozst,
- a tartalomfejlesztst,
- megosztst,
- terjesztst,
- a tartalom vltoztatsnak lehetsgt.

6
Hazai e-learning fejldstrtnet http://www.crescendo.hu/2007/06/19/hazai-e-learning-fejlodestortenet
7
Egyni tanulmnyi krnyezet (PLE) cikk alapjn http://www.crescendo.hu/node/5
14
2.5 Az e-learning tartalom felptse
Tanulsi tartalom (learning content): a digitalizlt tananyagot jelenti, f jellemzje a
hierarchikus felpts, ez a logikai s fizikai felptsre egyarnt igaz.

Tananyagelem (asset): a tananyag legkisebb egysge, ez tulajdonkppen egy fjlt takar, ami
tartalmazhat szveget, kpet, hangot, videt stb.

Megoszthat tartalomobjektum (sharable content object): egy vagy tbb tananyagelem, az
LCMS kpes nllan kezelni.

Lecke (lesson): egy vagy tbb tartalomobjektum, legknnyebben egy hagyomnyos tanknyv
egy leckjnek vagy fejezetnek kpzelhetjk el. Ha tbb leckbl ll egy tananyagrsz,
akkor mr modulrl beszlnk.

Kurzus (course): egy vagy tbb modulbl ll. Egy kurzus lehet egy tanknyv, egy tantrgy,
vagy egy tanfolyam.

Kpzsi program (curriculum): tbb, sszetartoz kurzusbl ll ssze a kpzsi program,
amely egy adott kpestshez tartoz tanfolyamok sszerendelst vgzi.

2.6 Az e-learning elnyei s htrnyai
Az elnyket s htrnyokat sok szemszgbl vizsglhatjuk. Nzhetjk a kurzust szervez, az
oktat, valamint a hallgat szemszgbl.

A kurzust szervez szmra az e-learning elnye a kpzsek rugalmassga s tlthatsga, a
kpzs kltshatkonysga, valamint az oktatsi anyag knnyen bevihet s frissthet.
Htrnyknt emlthet a bonyolult szervezsi feladatok, valamint a kezdeti magas kltsg s
az ezzel jr befektetsi kockzat.

15
Az oktatk szmra elny a tantsi folyamat nyomon kvethetsge, az oktat csak a
tantsra koncentrl, s nem elhanyagolhat az intzmnyi tmogats sem. Htrny az j
tpus pedaggia feladat s az intzmny rszrl nagyobb ellenrzsre nylik lehetsg.

A hallgatknak elnyt jelent az oktatshoz kapcsold jrulkos kltsgek nagymrtk
cskkense, a tanul sajt temben haladhat az anyaggal a hely s id fggsge nlkl, a
tananyag trolhat, s elhvhat, rendszeres kommunikci lehetsges a mentor s a hallgat
trsak kztt, az j technikai eszkzk, szoftverek hasznlatnak elsajttsa. A hallgatknl
htrny lehet az oktats szemlytelenn vlsa, az interaktivits cskkense, az nll tanuls
nehzsgei, az azonnali visszajelzs s rtkels, a megfelel infrastruktra hinya.
8

2.7 Az e-learning piacot meghatroz szereplk
2.7.1 A kzoktats
A kzoktats egyik legnagyobb problmja, hogy legtbbszr a hallgatk nem versenykpes
ismeretekkel kerlnek ki az iskolbl. Mra az oktats f clja a kpessgek, kzsgek
elsajttsa lett. Ezek birtokban a sajt egyedi lethelyzetnek megfelel tudst lehet
megszerezni. A dik f feladata az lethosszig tart tanuls kpessgnek elsajttsa. Ezt a
kpessget csak az rs s olvass kszsge, egy idegen nyelv ismerete s az
infokommunikcis technolgia egyttes ismeretben birtokolhatjuk.

Nhny szempont, ami a digitlis tananyag, illetve az e-learning mellett szl a kzoktatsban:

A hagyomnyos pedaggia tartalma s eszkztra szttrdelt, ez egyes tudselemek
elklnlnek, s nem helyezhetk t. A digitlis pedaggia rszei kiemelhetk, thelyezhetk,
szabadon bvthetk.

A papr alap tananyagot a diszciplinris tuds hatrozza meg, mg a digitlis tananyagot az
interdiszciplinris tananyagpts. Ma mr nem elemi fok tudsokra, hanem ismereteiket
integrlni kpes, sokoldalan mvelt dolgozkra van szksg A digitlis tananyag jobban

8
Digitlis taneszkzk hasznlata a szakkpzsben
16
felkszti a hallgatt a vals letre, mivel tbb tudomnygat, szakterletet rint s a
gondolkodsfejlesztsben is hatkonyabb ez az elrendezs.

A lineris tananyagszervezs ler szerkezet: a tananyag a tudst ismeretek formjban
tartalmazza. Ezzel szemben, a digitlis tananyag-szervezsi modell logikai struktrt kvet:
az informci a hlzati kapcsoldsain keresztl l tantrgyi kapcsolatok alakthatk ki.

2.7.2 A felnttkpzs
A felnttkpzs clja az lethosszig tart tanuls biztostsa. Ismereteinket aktualizlni,
frissteni kell, szksg esetn t kell kpeznnk magunkat, ha a munkaerpiac szmra
rtkess akarunk vlni. Az Eurpai Uni az egsz leten t trtn tanulst tmogatja s
sztnzi. A mai vilgban mr nem az a jellemz, hogy bekerlnk egy munkahelyre s onnan
megynk nyugdjba. Egy llampolgrnak akr tbb munkahelye is lehet lete sorn. A cl az,
hogy jobb, jvedelmezbb helyet talljon. Az e-learning megfelel oktatsi forma, egy
felntt, dolgoz, csaldos ember szmra.

A felnttkpzssel foglalkoz intzmnyek szma egyre n, de az informatikai eszkzkkel
val elltottsguk mg hagy nmi kvnni valt maga utn. Jelenleg a pedagguskpzs sincs
egszen felkszlve az e-learning mdszereinek oktatsra. Gyakori problma a megfelel
tanr hinya, vagy hogy a meglv digitlis tananyag nem megfelel egy e-learning-es
oktatsra. A tanulni vgy felnttek nem mindegyike rendelkezik a szksges eszkzkkel.

2.7.3 Vllalati kpzsek
A legtbb vllalatnl az alkalmazottak rszt vesznek 4-5 napos kpzsen, tovbbkpzsen. Ez
id alatt az adott munkavllalt vagy helyettestik, vagy a munkjval marad el. Mind a kett
plusz kltsggel jr. Nagyobb vllalatok egysgei kztt fldrajzi tvolsg is lehet, mgis
kpzseit egy helyen vgzi. Pnzt s idt takarthatnak meg, ha az e-learning oktatsi mdot
hasznljk.

Az e-learning elnye a hagyomnyos oktatssal szemben:
- a munkakiesssel jr kltsgek cskkenek,
17
- a jrulkos kltsgek cskkenek (utazs, szlls, tkezs),
- alacsonyabb kpzsi kltsgek (kivtel a bezemeltets, ami nagyobb beruhzst
ignyel),
- az oktats helytl s idtl fggetlen,
- a tanult ismeretek azonnal hasznosthatak.

3. Az e-learning szabvnyostsa
A Web-alap oktatsi technolgik jelen llapotra alapveten jellemz az intzmnyi,
tartalmi, felhasznlsbeli s technolgiai soksznsg. Nagy mennyisg oktatsi anyagok
kerltek digitalizlsra, s sok oktatsi tartalom mr alapveten webes felhasznlsra jtt
ltre. A digitlis tananyagoknak az jrafelhasznlhatsgt, s ms rendszerekkel val
elrhetsgt biztostani kell, ami szabvnyosts nlkl nem kivitelezhet. Jelenleg nem
ltezik hivatalos e-learning szabvny, csak ajnlsok vannak.

Szabvnyok gyakorlati jelentsge:
9

- Tananyagok jrafelhasznlhatak s krnyezet-fggetlenek.
- Alkalmazhatak egysges minsgi rtkelsi szempontok.
- ltalnosan hasznlhat keretrendszerek s tananyagszerkesztk.
- Lehetsgess vlt dobozos tananyagok ksztse.
- Fejlesztsi s bevezetsi kltsgek knnyen s pontosan meghatrozhatk.

Nagyon sok szablyrendszer ltezik a felsorolsuk s ismertetsk egy kln dolgozat tmja
lehetne. Kt szabvnyt szeretnk bemutatni ebben a fejezetben az egyik a LOM (Learning
Object Metadata) a msik a SCROM (Sharable Content Object Reference Model).

3.1 Az IEEE e-learning szabvnya, a LOM
LOM (Learning Object Metadata) az els globlis, ltalnos, elfogadott szabvny, amely az
online kpzsi tartalmak lerst, metaadatokkal val kiegsztst tmogatja. A szabvnyt
2002-ben fogadtk el. A szabvnyt az IEEE (Institute of Electrical and Elektronics Engineers)
szervezet deklarlta.

9
Gl Andrs, E-learning, Szakdolgozat, Debreceni Egyetem, 2007
18

Tanegysgek (LO, Learning Object) keresshez, beszerzshez, cserjhez alkalmazzk.
Maga a szabvny az LO mretre nem ad meghatrozst, de ez a legkisebb rtelmes
tanegysg, amelyekbl egy adott tananyag sszellthat. A tanulsi egysget jellemz lerst
nevezzk metaadatoknak. A metatadat segtsgvel egy LO minden lnyeges tulajdonsga
lerhat.

A szabvny meghatrozza az LO szintaktikai s szemantikai jellemzit. A LOM clja, hogy
meghatrozza azon minimlis szksges jellemzket, amelyekkel a tanulsi egysgek
knnyen kezelhetk, minsthetk s visszakereshetk.

A LOM tulajdonkppen a tanegysgekbl s velk kapcsolatos erforrsokbl nyert
adategyttes.

Egy tanegysget ler adatelemek klnbz kategrikba sorolhatk. A LOM kilenc
kategrit klnbztet meg:
ltalnos: a tananyagelem ltalnos lersra szolgl
letciklus: az erforrsok letciklusval kapcsolatos tulajdonsgok
Meta-metaadat: a metaadatrl ad informcit
Technikai: az erforrsok technikai jellemzi
Oktatsi: oktatsi s pedaggiai tulajdonsgok
Tulajdonjogok: szellemi tulajdonjogok s felhasznli jogok felttelei
Kapcsolat: ms tanegysgekhez val kapcsolds jellemzi
Megjegyzs: megjegyzsek a szolgltatsok oktatsi hasznlatval kapcsolatban
Besorols: a tanegysgek kapcsolata egy adott msik besorolsi rendszerhez

3.2 Az ADL SCORM szabvnyrendszere
Az Egyeslt llamok Honvdelmi Minisztriuma (Department of Defense, DoD) 1997-ben
hozta ltre az ADL (Advanced Distributed Learning) kezdemnyezst, hogy a minisztrium
hatskrben egysges stratgit dolgozzon ki az oktatsra s informcis technolgira.
Clja az oktats s kpzs korszerstse, a kormny egyttmkdsnek segtse az
19
egyetemekkel s az zleti szektorral, valamint az e-learning szabvnyostsa. Az ADL
kezdemnyezs magas szint elvrsokat fogalmazott meg az oktatsi tartalommal szemben:
jrafelhasznlhatsgot, hozzfrhetsget, tartssgot s keresztfelhasznlhatsgot.

E dokumentum a Megoszthat Tartalom Objektum Hivatkozsi Modelljt (SCORM)
fogalmazza meg, amely megfelel e magas szint elvrsoknak.

A SCORM szablyozza a tananyagcsomag szerkezett, a tananyagot futtat krnyezetet s a
tananyag metaadatokat.

A SCORM kt fontos funkcit lt el: tartalomszervezst s kommunikcit a tananyag s a
keretrendszer kztt.

A tartalomszervezs lnyege, hogy nagy mennyisg dokumentci redundanciamentes s
megjelensfggetlen elllts s trols. Az elv tmren az, hogy egy egysges adatbzisban,
megjelenstl fggetlenl, s redundanciamentesen troljuk az adatainkat, s ebbl hozzuk
ltre az adott dokumentcit. Az gy kapott dokumentum strukturlt szvegknt ll ssze,
mely mdiumtl fggen lehet nyomtatott, webes, vagy akr e-learning tananyag is.

A SCORM kommunikcis szerepe a kvetkez. A tananyagot ha beimportljuk egy
keretrendszerbe, akkor az LMS felpti a kvnt tananyagstruktrt.

A felletre bejelentkezett tanul megnyitja az adott tananyagot, elkezdi nzegetni a ler
rszeket, majd megoldja a hozz tartoz teszteket. Az oktatsi krnyezet szerepe, hogy
regisztrlja ezeket az esemnyeket, a ler tartalmaknl megnzte / nem nyitotta meg , a
teszteknl pedig ennl bvebben: tment , megbukott , nem fejezte be llapotokat tartja
nyilvn.

A kommunikcis szerep a dikok interakciinak a nyomon kvetsre szolgl.
10

10
Advanced Distributed Learning (Fejlett Elosztott Tanuls) Megoszthat Tartalom Objektum Hivatkozsi
Modell (SCORM ) 1.2 verzi SCORM ttekints http://elearning.sztaki.hu/repository/18.pdf
20
4. Az e-learning mdszertana
11

Az e-learning tananyagnl is az rott szveg a meghatroz, de a szveg funkcija
megvltozott a hagyomnyos tanknyvek szvegtl. Az e-learning tananyag nem papron,
hanem kpernyn jelenik meg. Ahhoz hogy megfelel tananyag kszljn, ismerni kell az j
mdszertani s technikai lehetsgeket. Egy pedaggia s pszicholgiai ismeretekkel
rendelkezi oktat nem biztos, hogy j tananyagot tud kszteni. Ezt kln oktatni kell, illetve
kellene, mert Magyarorszgon mg kevs intzmny foglalkozik a pedaggusok e-learning
mdszertani kpzsvel.

4.1 A tananyag tartalmnak sszelltsa
Az e-learninges tananyagok tagolst ktfle mdon kell elvgezni. Didaktikai s a technikai
tagolsrl beszlhetnk.

Didaktikai tagols az, amikor a tanulsi folyamat optimalizlshoz a tananyag logikai
sszefggsrendszert vesszk alapul. Technikai tagolsnl a tananyag strukturlsa a lnyeg,
ami egyrszt a programozst, msrszt a tananyag rdekess ttelt jelenti.
Didaktikai tagolsnl a tananyag e-learning megfelelje a kurzus. Egy kurzus ltezhet
nllan, vagy kapcsoldhat msik kurzushoz.

A kurzus felptse a kvetkez:
- keretrendszer;
- modulok.

A keretrendszer bevezet oldalbl, a kurzus vgn tallhat sszefoglalbl s tesztekbl
llhat. A modulok bevezet oldalbl, leckkbl, a modul vgn tallhat sszegz oldalbl,
modulzr tesztekbl llnak. A leckk a modul elemi egysgei. A modulok tetszleges
mlysgig gyazhatk egymsba. A lecke tartalmazza az elsajttand tma lerst, a tantsi-
tanulsi tevkenysgeket.

11
Lengyel Zsuzsanna Mria: E-learning: tanuls a vilghln keresztl cm szakdolgozata 6. fejezete alapjn
21
Technikai tagolsnl a leckket felpt tananyagelemek segtsgvel tartalmi-fogalmi tagols
adhat a tananyagnak, illetve vizulis megklnbztets is lehetv vlik. Ezrt az elemeket a
tananyag szvegn bell meg kell klnbztetni. Ilyen elemek:
- a szveges elemek,
- az adattbla-elemek,
- a kpi elemek,
- az akusztikai elemek, s
- prbeszdes elemek.

4.2 A tananyag szvegnek megformlsa
E-learning tananyag szvege lehet, problmaorientlt vagy rendszerorientlt.

A rendszerorientlt szveg ksz tudsrendszert kzvett. Logikusan felptett, a tanulnak
csupn meg kell tanulnia.

A problmaorientlt szveg esetben azt kell felttelezni, hogy a tanuls a problma
megoldst jelenti. F cl a problmamegold kpessg fejlesztse problmahelyzetek
bemutatsval.

Termszetesen mindkt megkzelts egyttesen is alkalmazhat egy adott tananyagban. Egy
jl felptett szvegnek, rendszer- vagy problmaorientltnak egyarnt a kvetkez
feltteleknek kell megfelelnik:
- figyelembe kell venni a clcsoport elfeltteleit, s
- a szveg legyen rthet, segtse a tanult a tanulsban.

4.3 A tananyag hipertexes tagolsa, kp- s hangelemeinek kivlasztsa
Egy e-learning tananyagban szerepelhet bels, s kls link. A bels link segtsgvel a
tananyag bejrhat. Eljuttathatja a hallgatt rgebbi leckk fontosabb rszeire, vagy akr egy
lecke korbbi pontjn megadott pldra. A kls link kivezet a tananyagbl, ltala a
tananyaghoz kapcsold informcihoz juthatunk.

22
A kphasznlat clja, hogy a tanul kpet alkothasson egy trgyrl, jelensgrl. Egy kpet be
lehet illeszteni a lecke szvegbe, vagy kls, illetve bels link segtsgvel el lehet jutni
hozz.

Auditv elemek alkalmazsnl a kvetkez lehetsgek lteznek:
- rott szveg megszlaltatsa
- hangos tananyag
- a szveges illetve vizulis rszeket kiegszt auditv elemek
- zenei bettek, specilis hangeffektusok hasznlata
- didaktikai funkcij tanri kzlemny.

5. HTML, CSS, JavaScript
A dolgozatom rszt kpez honlap alapja a HTML ler nyelv, melybe JavaScript s CSS
gyazdik. A honlap HTML dokumentumok s beillesztett kpek sokasgbl ll ssze. A
megjelentett oldalak (cmsorok, bekezdsek, listk) stlust kls stluslap hatrozza meg, a
mensor knnyen kezelhetsgt s kllemt a JavaScript biztostja. A tovbbiakban a mr
emltett nyelveket s stluslapokat fogom bemutatni.

5.1 HTML (HyperText Markup Language)
5.1.1 A HTML dokumentum felptse
A HTML dokumentum egy olyan szvegfjl, amely a szvegen kvl tartalmaz n. "HTML-
tag"-eket - formzutastsokat -, valamint megjelentend objektumokra trtn
hivatkozsokat is. Ezek a HTML formzutastsok (ms szval: parancsok, elemek)
befolysoljk a dokumentum megjelentst, kapcsolatait. Ezeket az utastsokat a
bngszprogram rtelmezi s vgrehajtja. Ezen okbl a formzutasts mindig megelzi azt
a rszt a dokumentumnak, amelyre vonatkozik.

A HTML utastsokat a szvegben < s > jelek kz kell zrni. Egy-egy utasts - HTML
parancs, HTML elem - hatst ltalban a zr utastsprja sznteti meg, amely megegyezik
a nyit utastssal, csak a / jel vezeti be (termszetesen a < s a > jelek kztt). Az utastsok
23
nagy rsze opcionlis elemeket is tartalmazhat, melyek csak a nyitutastsban
szerepelhetnek, a zrban nem. Az opcik rtkadsnl az idzjel nem mindig ktelez,
csak ajnlott. A HTML utasts kulcsszavaiban nem klnbztetjk meg kisbetket s
nagybetket.

A HTML formtum szvegfjlok a <HTML> utastssal kezddnek s </HTML> utastssal
vgzdnek.

A HTML dokumentum kt f rsze: fejlc s trzs. A dokumentumot a fejlcelemek vezetik
be, melyek kezdett s vgt a <HEAD></HEAD> utastsok jelzik. A fejlcelemek kztt
szoks a dokumentumcmet megadni, mely cmet a <TITLE> s a </TITLE> utastsok, kz
kell zrni. Ezt a rszt a dokumentumnak ltalban az ablak cmsorban jelentik meg a
bngszprogramok.
12

A <BASE HREF="protokoll://gpnv/elrsi_t"> utastsban szerepl URL hatrozza meg a
bziscmet, melybl a relatv cmeket rtelmezni kell. Az intelligens kiszolglk korban nem
ktelez megadni.

A <BASEFONT SIZE="szm"> utastssal jellhet ki a dokumentumban az alaprtelmezett
betmret.

Az <ISINDEX> utasts jelzi a keresrendszerek szmra, hogy index-dokumentumrl van
sz.

Az <LINK> utastsban szerepl opcik jelzik a dokumentum kapcsolatait ms
dokumentumokkal, stluslappal, cmszalaggal, stb.
Az <META NAME="mez" CONTENT="rtk"> utasts jelezheti a keresrendszerek
szmra a dokumentum-adatbzisba kerl adatokat, pl. a dokumentum alkotjt, a ltrehoz
programot, rvid tartalmat, stb.

Nzznk egy plda dokumentumot:

12
Almsi Pl: A HTML dokumentumokrl http://www.szabilinux.hu/htmlhelp/p13.htm
24
<HTML>
<HEAD>
<TITLE>A dokumentum neve/cme</TITLE>
Fejlc elemek ...
<META NAME="Author" CONTENT="XY">
<BASEFONT SIZE=8>
</HEAD>
<BODY>Dokumentumtrzs
<H1>Alcm</H1>
<P>Norml bekezds
</BODY>
</HTML>

5.1.2 A HTML dokumentum szvegtestnek felptse
Minden HTML formtum szvegfjl a <BODY> s a </BODY> utastsokkal kzrezrt
rszben tartalmazza a megjelentend rszt. (A dokumentum-kereteket kivve.)
Ezen elemek kztt kell elhelyezni mindent: a szveget, hivatkozsokat, kpeket, stb.
A <BODY BACKGROUND="fjlnv.kit" BGCOLOR="sznkd" TEXT="sznkd"
LINK="sznkd" VLINK="sznkd" ALINK="sznkd"> utastsban a dokumentumtrzsre
vonatkoz fenti elrsok is szerepelhetnek opciknt.

A BACKGROUND="elrsi_t/fjlnv.kit" opcival a dokumentum htterl szolgl fjlt
jellhetjk ki. Httrsznt a BGCOLOR="sznkd" opcival kiegsztett utastssal
definilhatunk.

A dokumentumban a szveg sznt a TEXT="sznkd" opcival jellhetjk ki.
A LINK="sznkd" opci a hivatkozsok megjelensi sznt hatrozza meg. A
VLINK="sznkd" pedig a mr bejrt hivatkozsokat jell sznt hatrozza meg.

25
5.1.3 A HTML dokumentum cmszintjeinek felptse
A HTML formtum szvegfjlban definilhatunk cmeket, ill. alcmeket hat szint mlysgig.
A legfels szint cmet a <H1 ALIGN="hely"> s a </H1> utastsprral kell kzrezrni. A
msodik szintet a <H2 ALIGN="hely"> s a </H2> utastsok hatroljk stb.

Minden szint ms-ms betformtumban jelenik meg a dokumentumban, a bngszprogram
belltstl fggen. A cmek igaztst szablyozza az ALIGN opci, melynek lehetsges
rtkei: left, center, right. Amennyiben tl hossz a cm, de egy sorosnak kell maradnia, akkor
a NOWRAP opci megakadlyozza a cm betrdelst tbb sorba.

A cmek csak a szemll szmra keltik a tagoltsg rzett, a valsgban nem tagoljk
fizikailag szakaszokra a dokumentumot. Ezt a tagolst a <DIV CLASS="osztly"
ALIGN="hely">, </DIV> utastsokkal lehet meghatrozni, ahol a CLASS opci sorolja a
megfelel SGML osztlyba a szakaszt, az ALIGN pedig a szakasz igaztsi formtumt rja
el. Az automatikus trdelst itt is megakadlyozza a NOWRAP opci, ez esetben a szakasz
trdelst a <P> vagy a <BR> utastsokkal lehet szablyozni.

5.1.4 Bekezdsek a HTML dokumentumban
A HTML formtum bekezdsekre tagoldik. A HTML fjlban a bekezdsek kezdett a <P>
utasts jelzi. A bekezds a kvetkez bekezds kezdett jelz utastsig tart. Teht nincs zr
utastsprja. A legtbb bngszprogram kt bekezds kztt egy res sort szr be
megjelentskor. A bekezds elem hordozhat magban a bekezds stlust meghatroz
opcikat. A bekezds igaztst a <P ALIGN="hely"> formj utastssal szablyozhatjuk.
Az automatikus trdelst a NOWRAP opci tiltja meg a bngszprogram szmra.
Amennyiben trdelhetetlen szkzt ignyel a szveg, akkor az egyszer szkz helyett
alkalmazzuk a klnleges karaktert. Amennyiben egy bekezdsen bell
mindenkppen j sort szeretnnk kezdeni, akkor a <BR> utastst kell hasznlni. (Nincs
zrprja.)

26
5.1.5 Kereszthivatkozsok HTML dokumentumok kztt
A HTML formtum lnyegt az egymsra s egyms tartalmra val hivatkozsok jelentik
(vagyis a hypertext lehetsg). A dokumentum brmely rszhez hivatkozst (linket)
helyezhetnk el, amelyet aktivizlva, a hivatkozottal sszefggsben lv szveghez jutunk
el. A hivatkoz utastsok megjelensi formja sokfle lehet, a clobjektumtl fggen.

A legegyszerbb esetben a hivatkozs az adott fjl egy tvolabbi rszre mozdtja a
bngszablakot. A hivatkozs kezdett a <A HREF="#jelz"> utastsnak a
dokumentumban val elhelyezse jelzi. A hivatkozst a </A> utasts zrja le. Ez az elempr
kzrezrhat szvegrszt, kpet, stb. A kzrezrt rszt a bngszprogram a dokumentum
tbbi rsztl eltren jelenti meg (pl. alhzssal, kerettel, ...), az egrkurzorral fl rve a
mutat alakja megvltozik. Azt a rszt (praktikusan: knyvjelzt), ahov a hivatkozs mutat a
<A NAME="jelz"> s a </A> utastsok kell, hogy hatroljk.

A legtbb esetben a egy hivatkozs egy msik fjlra/dokumentumra mutat. A hivatkozs
kezdett ekkor a <A HREF="protokoll://elrsi_t/fjlnv.kit"> utasts jelzi, a hivatkozst
ekkor is a </A> utastselem zrja le. Mind a protokoll, mind az elrsi t elhagyhat,
amennyiben azonos URL-en van a kiindulsi dokumentum s a hivatkozott. A hivatkozott
fjlnak e pldban nincs kln nvvel (knyvjelzvel) jellt rsze. Mkds szempontjbl a
fentebb lertak vonatkoznak erre a hivatkozsi formra is.

A legbonyolultabb esetben a hivatkozs egy msik fjl valamely pontosan meghatrozott
rszre mutat. A hivatkozs kezdett a <A HREF="protokoll://elrsi_t/fjlnv.kit#jelz">
utasts jelzi, s a hivatkozst szintn a </A> elem zrja le. Ebben az esetben a hivatkozott fjl
kell, hogy tartalmazzon egy olyan rszt (knyvjelzt), ahov a hivatkozs mutat. Ezt a rszt a
<A NAME="jelz"> s a </A> utastsok hatroljk.

Ha az <A HREF=...>, </A> utastspr kpet fog kzre, akkor a kp szegllyel jelenik meg,
amely szegly letilthat az <IMG SRC=...> utastsban elhelyezett BORDER=0 opci
27
alkalmazsval. A kpekkel kapcsolatos egyb hivatkozsi lehetsgeket a kpek elhelyezse
a HTML dokumentumban alcm alatt trgyalom.
13

5.1.6 Karakterformtumok a HTML dokumentumban
A HTML formtum szvegfjlban is hasznlhatjuk a szvegszerkesztkben megszokott
karakterformtumokat. Az albbi tblzat a formzs kezd s zrutastsa kztt a mintt is
tartalmazza.

Kezd elem Ilyen betformtumot eredmnyez Zr elem
<B> Flkvr betformtumot eredmnyez </B>
<I> Dltbets formtumot eredmnyez </I>
<U> Alhzott formtumot eredmnyez </U>
<S> thzott formtumot eredmnyez </S>
<TT> Fixpontos betket eredmnyez </TT>
<EM> Kiemeli a szveget </EM>
<CITE> Idzetekre hasznlhat </CITE>
<VAR> Vltoznevet jell </VAR>
<STRONG> Ez is egy kiemelsi lehetsg </STRONG>
<CODE> Kdoknl hasznljuk </CODE>
<SAMPLE> Mintk jelzsre hasznljuk </SAMPLE>
<KBD> Billentyfelirat jelzse </KBD>
<BQ> Idzet megjelentse </BQ>
<BIG> Nagymret betformtumot eredmnyez </BIG>
<SMALL> Kismret betformtumot eredmnyez </SMALL>
<SUB>
Alsindexet eredmnyez
</SUB>
<SUP>
Felsindexet eredmnyez
</SUP>
<BLINK> Villog szveget eredmnyez </BLINK>
<FONT...> A rszleteket lsd lentebb </FONT>

13
http://redqueen.uw.hu/modules.php?name=Sections&op=viewarticle&artid=1
28
A <FONT FACE="nv" COLOR="sznkd" SIZE="szm">, </FONT> utastsprral direkt
mdon elrhatk a megjelen szveg betinek a jellemzi.

5.1.7 Kpek elhelyezse a HTML dokumentumban
A HTML formtum dokumentumban kpeket - grafikkat - is megjelenthetnk. Az
<IMG SRC="elrsi_t/fjlnv.kit"> utasts a szveg aktulis pozcijba helyezi a
megadott kpet.

Elemezznk egy pldt:
<IMG ALIGN="hely" SRC="elrsi_t/fjlnv.kit" HSPACE="vszm" VSPACE="fszm"
WIDTH="szmret" HEIGHT="mmeret" UNITS="egysg" USEMAP="#jelz"
ISMAP ALT="szveg">.

Az ALIGN opci meghatrozza a kp igaztsnak mdjt, lehetsges rtkei: top, middle,
bottom, left, right.

A HSPACE a kp melletti vzszintes trkzt, a VSPACE pedig a fggleges trkzt
(margkat) hatrozza meg.

A WIDTH a szlessgt, a HEIGHT pedig a magassgt adja a kpnek, az UNITS ltal
meghatrozott egysgben (pixel vagy en).

Az ALT azt a szveget adja meg, amelyet nem grafikus bngszk hasznlata esetn meg fog
jelenni a kp helyett.

5.1.8 Listk a HTML dokumentumban
A szmozott listt az <OL> s az </OL> utastsok kz kell zrni, a szmozatlan listt pedig
az <UL>, </UL> utastspr kz. Mindkt listban hasznlhatjuk a listafejlcet, melyet az
<LH> utasts vezet be - az </LH> pedig zr. Mindkt listatpusban a listk sorai az <LI>
utastssal kezddnek s <LI> a lezr prjuk.

29
A fentiekbl kvetkezik, hogy a listasorok egy <LI> utaststl a kvetkez <LI> utastsig,
ill. a lista zrelemig tartanak.

Szmozott lista esetben a kezd sorszm kzvetlenl megadhat az <OL
SEQNUM="szm"> formj kezdutastssal. Msik lehetsg, hogy egy elzleg definilt
lista szmozsa folytathat az <OL CONTINUE> kezdutasts hasznlatval. Egybknt az
<OL> utasts 1-tl kezdi a listatagok szmozst.

A szmozatlan listk kezdeleme is hordozhat formzinformcikat. Az <UL
SRC="fjlnv.kit"> formj utasts pldul a listasort megelz bajuszknt a megadott
kpfjlt hasznlja. Az <UL DINGBAT="karakter"> a megadott bajuszkaraktert alkalmazza.
Az <UL WRAP="irny"> pedig tbboszlopos listk esetn az igazts formjt hatrozza
meg. (A WRAP opci a horiz s a vert rtkeket veheti fel.)

A szmozatlan listk specilis - kln HTML utastsokkal ltrehozhat - fajti a
knyvtrlista s a menlista. A knyvtrlista tpus a <DIR> utastssal kezddik s a </DIR>
utastsra vgzdik. A menlista pedig <MENU> s a </MENU> utastsokkal hatrolt. Ezek
a listaformk a norml szmozatlan listktl mindssze annyiban klnbznek, hogy a
knyvtrlista tagjai 20 karakteresnl, a menlista tagjai, pedig egy sorosnl nem lehetnek
hosszabbak s nincs "bajuszuk".

A ler listt a <DL> s a </DL> utastsok kz kell zrni. A lista fejlc megadsa azonos az
tbbi listatpusnl ltottal. A listk egyes alkotelemeinek kezdett a <DT> utasts jelzi, az
ehhez tartoz lers kezdett pedig a <DD> utasts hatrozza meg. Nincs egyik utastsnak
sem zr prja, ezrt a lista tag a <DT> elemtl a <DD>-ig, a hozz tartoz lers, pedig a
<DD> elemtl a kvetkez <DT>-ig tart.

5.1.9 Tblzatok
Ez az utastscsoport kpes a legvltozatosabb szveg-, s kpmegjelentsi formk
ellltsra. A <TABLE> s a </TABLE> utastsok kz zrt rszt tekintjk egy
tblzatnak.
30

A tblzatnak a cmt a <CAPTION> s a </CAPTION> utastsok kztt kell megadni. (Az
gy megadott cm nem a tblzatban, hanem eltte fog megjelenni.) A cm <CAPTION
ALIGN="hely"> formj megadssal igazthat.

A tblzat minden sora a <TR> utastssal kezddik s a kvetkez <TR>-ig, ill. a tblzat
vgig tart. Egy sor tartalmazhat oszlopfejlceket s adatokat. Az oszlopfejlceket a <TH>
utasts vezeti be s vlasztja el egymstl. A tblzat adatcelli, pedig a <TR>-rel
megkezdett sorban egy <TD> utastssal kezddnek s minden cella a kvetkez <TD>-ig -
ill. a kvetkez sor elejt jelz elemig - tart, ahol rtelemszeren j cella kezddik. Az
oszlopfejlceknek s az adatcellknak csak a kezdutastsa hasznlatos - habr van lezr
utastsuk is (</TH>, </TD>) -, mert a zrutastsuk elhagyhat.

A tblzat nyitutastsa tartalmazhat a teljes tblzatra vonatkoz belltsokat:
<TABLE BORDER="szm" ALIGN="hely" COLSPEC="oszlopjellemzk"
UNITS="egysg" NOWRAP CELLPADDING="pszm" CELLSPACING="kszm"
BGCOLOR="sznkd">

Ahol a BORDER opci a rcsozat szlessgt hatrozza meg. (0 esetn nincs rcsozat.) Az
ALIGN a teljes tbla elhelyezkedst hatrozza meg (left, right, center lehet). A COLSPEC
egy oszlop igaztst s szlessgt adja meg. Egy oszlopra vonatkozan egy bet s szm
egyberva (pl.: L12 C24 R10), melytl a kvetkez oszlop rtkeit egy kz vlasztja el. Az
UNITS a szmokhoz tartoz mrtkegysget jelli ki (en, relative - oszlopszlessghez -,
pixel). A NOWRAP opci a cellk szvegnek trdelst tiltja le. Vgl a BGCOLOR a
tblzat httrsznt hatrozza meg.

A tblzat oszlopfejlcei nem csak a legfels oszlopban szerepelhetnek, hanem a tblzatban
brhol (pl. sorok cmeknt is).

Mind az oszlopfejlcekben, mind az adatcellkban hasznlhatk a kvetkez formzsra val
opcik:
COLSPAN="szm":
31
Egyest tbb egymssal szomszdos cellt - vzszintesen.
ROWSPAN="szm":
Egyest tbb egyms alatti cellt - fgglegesen.
ALIGN="hely":
Igaztja a cellk tartalmt - vzszintesen. Lehetsges rtkei: left, center, right, justify, decimal
VALIGN="hely":
Igaztja a cellk tartalmt - fgglegesen. Lehetsges rtkei: top, middle, bottom, baseline

5.1.10 Keretek
Egyetlen bngszablakban tbb HTML dokumentum is megjelenthet a <FRAMESET> s
a </FRAMESET> utastspr, valamint a szorosan kapcsold <FRAME> utasts egyttes
hasznlatval.

A <FRAMESET ROWS="oszlophatrok"> kezdutastssal oszthat fel a kperny
fgglegesen, a <FRAMESET COLS="sorhatrok"> utastssal pedig vzszintesen. Ahol az
oszlop- s sorhatrok megadhatk kpernypontban ill. szzalkosan - vesszvel elvlasztva -
, a maradk kpernyterletre, pedig a * dzskerkarakter hasznlatval lehet hivatkozni.
Mivel vagy csak vzszintesen, vagy csak fgglegesen oszthat fel a kperny, ezrt ha
mindkt irnyban osztott bngszablak ltrehozshoz a <FRAMESET> elemeket egymsba
kell gyazni. Teht pldul egy fggleges felosztson bell kell vzszintesen elvlasztott
rszekre tagolni egy oszlopot.

A fenti mdon definilt terletekre a <FRAME SRC="objektum"> utasts tlti be a megadott
objektumot, mely objektum lehet egy teljes HTML fjl, annak egy maghatrozott rsze, ill.
egy kp. Az gy kitltend keretek viselkedst szablyozza az utasts
<FRAME NAME="nv" SRC="objektum" SCROLLING="rtk"
MARGINWIDTH="szm" MARGINHEIGHT="szm"> alak megadsa.

Az adott keretnek nevet ad a NAME opci, a szkrollozst letilthatja SCROLLING="no"
kiegszts (ezenkvl a yes s az auto rtkeket veheti fel a SCROLLING opci), a
32
MARGINWIDTH s a MARGINHEIGHT pedig a kereten belli margk szlessgt
szablyozza.

Pldul a fejlcben megadott <BASE TARGET="nv"> utasts a NAME="nv" opcival
elnevezett keretbe irnytja a hivatkozsokat. Egybknt az <A HREF=...> utasts is ismeri a
TARGET="nv" opcit. (A TARGET="_top" opcival az egsz bngszablakot elfoglalja a
hivatkozott dokumentum, teht feloldja az ablak keretekre osztst.) Ha ezek egyike sem
szerepel, akkor a hivatkozs a hivatkoz objektum keretben jelenik meg, fellrva azt.

A <FRAMESET>, <FRAMESET> utastsprral hatrolt terletnek meg kell elznie a
<BODY> utastssal kijellt dokumentumtrzset. St a egy <NOFRAMES> utastssal kell
jelezni a dokumentum azon rsznek kezdett, amelyet akkor kell a bngsznek
megjelentenie csak, ha nem ismeri a keretutastsokat. s csak ez a <NOFRAMES>-mel
kezdd rsz tartalmazhatja a <BODY> s a </BODY> utastsprt.

5.1.11 A HTML s a multimdia
A HTML formtum szvegfjlban szerepelhetnek multimdia jelleg fjlokra trtn
hivatkozsok is.

A <BGSOUND SRC="hangfjl.wav" LOOP="szm"> utasts a letlts kzben lejtszand
hangeffektust hatrozza meg, mely a LOOP-ban megadott alkalommal ismtldik.

A <SOUND SRC="hangfjl.wav"> utasts hatsra a bngsz megjelent egy hivatkozst a
lejtszand hangeffektusra, amelyet aktivlva az adott hangfjlt lejtssza.

Mozgkpet tartalmaz fjl is elhelyezhet a HTML dokumentumban az
<IMG DYNSRC="fjlnv.avi" LOOP="szm"> utastssal, amely az <IMG SRC=...>
utastssal is kombinlhat. (Ebben az esetben a mozg kpsorok lejtszsa utn a megadott
kp jelenik meg a dokumentumban, ill. akkor is, ha a bngsz nem tudja a mozgkpet
lejtszani.) Az opcik megegyeznek a hang- s kpfjloknl alkalmazhatkkal.

33
A HTML-ben kln nem tmogatott tpus fjlok (pl. Flash) begyazhatk a dokumentumba
az <EMBED SRC="fjlnv.kit" WIDTH="vszm" HEIGHT="fszm"> utastssal. Az gy
begyazott objektumok sajt megjelent programot ignyelnek, amelyet a bngsz feladata
meghvni.

5.2 Stluslapok, CSS
A CSS jelentse Cascading Style Sheets, azaz egymsba gyazott stluslapok. A HTML
oldalaink megjelenst befolysol egyszer nyelvrl van sz, mely segtsgvel
meghatrozhatjuk, hogy hogyan (s hol) jelenjenek meg az egyes HTML elemek
(paragrafusok, cmsorok, stb.) Befolysolhatjuk a sznket, mretket, elhelyezkedsket,
margikat, stb. Az egymsba gyazhatsg (kaszkdols) arra utal, hogy tbb stluslapot,
meghatrozst is megadhatunk egyszerre, illetve egy stlus lehet tbb elemre is rvnyes, amit
egy msik stlussal felldefinilhatunk. A stlusok rkldnek az oldal hierarchija szerint. Ha
pldul a gykr elemre definilunk egy stlust, akkor az tbbnyire az oldal sszes elemre
rvnyes (a tulajdonsgok rklhetsgtl fggen).
14

5.2.1 A stluslapok kialakulsnak trtnete
A HTML nyelvet fejleszti a tartalom egyszer kzlst megold lernyelvnek terveztk. A
nyelv megjelense egyre tbb ember szmra tette lehetv, hogy publiklhasson a weben, s
az internet terjedse is egyre tbb s tbb j felhasznlt hozott. Az vek sorn felmerlt
annak az ignye, hogy lehessen a nyomdai megjelenshez hasonlan befolysolni a
weboldalak kinzett. gy a HTML kiegszlt bizonyos formzsi lehetsgekkel.

Az j formzsi lehetsgek sok mindent lehetv tettek, de a nyelv ezzel elvesztette az
egyszersgt, megntt a dokumentumok mrete s komplexitsa. A klnbz bngszk
sajtossgaival is szembe kellett nzni.

Ezen segtett megjelensvel a CSS szabvny, melynek segtsgvel szabadabban,
rugalmasabban tudjuk befolysolni HTML oldalaink megjelenst. A CSS szabvny lersa

14
Brthzi Andrs: CSS alapjai I-VII. http://weblabor.hu/cikkek/cssalapjai1
34
1996. december 17-n ltott napvilgot a W3C honlapjn. A szabvny azta tbb kiadst rt
meg, illetve 1998. mjus 12-n napvilgot ltott a CSS 2 szabvny lersa is (a CSS 2.1 s CSS
3 kidolgozsa, pedig folyamatban van).
15

A CSS nagyban megknnyti egy oldal formzsi lehetsgeit. Az albbi plda egy olyan
oldalt mutat be, ahol tbb cmsor s bekezds tallhat.
Az eredmnyt a kvetkez kpen lthatjuk:
1. <html>
2. <head>
3. <title>CSS plda</title>
4. <style type="text/css"></style>
8. </head>
9. <body>
10. <h1>Bevezets</h1>
11. <p>Bejelentkezs </p>
12. <h1>Iktats </h1>
13. <p>Lekrdezs </p>
14. <h1>Archivls </h1>
15. <p>Nyomtats</p>
16. </body>
17. </html>

A style elemeken bell meghatrozzuk, hogy a HTML llomnyban lev sszes cmsor (h1)
elem s bekezds (p) elem a fentiekben meghatrozott mdon jelenjen meg. Csak egyszer kell
ezt megtenni, a kdunk sokkal tlthatbb lett. A karakterek pontos mretet is
meghatrozhattuk, ezttal pixelben megadva azt, de tovbbi mrtkegysgek is
rendelkezsnkre llnak. Amennyiben valamirt utlag mdostanunk kell a megjelenst,
egybl csak egy helyen kell ezt megtennnk, s mindenhol meg is vltozik. Az egyszerbb

15
Meyer, Eric A.: CSS zsebknyv : webtartalmak formzsa stluslapokkal, Kiskapu, 2006
35
szerkeszthetsgen s karbantarthatsgon kvl az gy elksztett dokumentum sokkal kisebb
mret is lesz, gyorsabban letltdik, kisebb adatforgalmat generl, de a megjelentett
tartalom s forma ugyanaz marad. Ha egy kls llomnyban helyezzk el a
stlusdefincikat, akkor tbb dokumentum megjelenst is befolysolni tudjuk egyszerre.

5.2.2 Begyazott stluslap
Ezt lthattuk a fenti pldban. A stluslerst a HTML oldal fejlcben kell elhelyezni, style
elembe gyazva. A fenti pldban HTML megjegyzsbe is tettk (), ezzel azt rjk
el, hogy az olyan bngszk, amik nem ismerik a stluslapokat, ne jelentsk meg a stlus
defincinkat. Az gy meghatrozott stlus az egsz dokumentumra rvnyes lesz.

5.2.3 Kls stluslap
A maximlis rugalmassg elrse rdekben ma szinte minden honlapon alkalmaznak kls
stluslapo(ka)t. Elnyk, hogy anlkl mdosthatjuk a honlap szmos oldalnak
megjelenst, hogy az egyes dokumentumok forrskdjba bele kellene nylni. gy ha
meggondoljuk magunkat pl. az aktv linkek sznvel kapcsolatban, csak egy helyen kell azt
kijavtanunk s ez minden dokumentumra rvnyes lesz.
16

A kls stluslapokra az oldal fejlcben tudunk hivatkozni, egy link elem segtsgvel:
1. <head>
2. <link rel="stylesheet" href="kulso.css" type="text/css">
3. </head>
A stluslapot tartalmaz llomnyban (a pldban kulso.css a neve) csak a stlusaink
defincijt kell elhelyeznnk, pl:
1. h1 { font-size: 20px; color: #a00000; }
2. p { font-size: 12px; color: #00a000; }
A begyazott stluslapokhoz hasonlan az gy meghatrozott stlus az egsz dokumentumra
rvnyes.

16
Skos Lszl: Stluslapok a weben: CSS kziknyv, BBS-INFO Knyk. s Inform. Kft, 2005

36
5.2.4 Elemhez rendelt stlus
Br kevs alkalommal van r szksg, de akkor jl jn, hogy az egyes HTML elemekhez
helyben is tudunk stlust meghatrozni. Ez nagyon hasonlt ahhoz, mintha font elemekkel
hatroznnk meg az adott elem megjelenst, br nagysgrendekkel tbb formzsi
lehetsgnk van. Egy elem stlusnak a meghatrozshoz egy style attribtumot kell hozz
felvennnk:
1. <h1 style="font-size: 20px; color: #a00000;">Bevezets</h1>
Az gy definilt stlus csak az adott elemre, illetve az adott elemen bell lesz rvnyes.

5.2.5 Importlt stluslap
Tovbbi lehetsgnk, hogy egy stlus meghatrozson bell egy msik, kls stlus
meghatrozsra hivatkozzunk (erre rtelem szerint a begyazott s a kls stluslap
meghatrozsoknl van mdunk). Ez a kvetkezkppen trtnhet:
1. <style type="text/css"></style>

A cm megadsakor hasonlkppen jrhatunk el, mint a linkeknl ltalban, azaz akr
url(masik.css) formban is rhatjuk, amennyiben ugyanabban a knyvtrban tallhat, mint a
HTML llomnyunk. A kls stlus-hivatkozsnak meg kell elznie minden ms defincit,
amennyiben mr szerepel eltte ms, figyelmen kvl lesz hagyva.

5.2.6 Stlusok formtuma
Egy nll stlus defincis llomny, vagy egy begyazott stlus tbb meghatrozst
tartalmazhat. Egy-egy meghatrozs kt rszbl ll, egy kivlaszt s egy tulajdonsg rszbl.
A kivlaszt rsz azt hatrozza meg, hogy mely HTML elemekre vonatkozzon a definci,
mg a tulajdonsg rsz a megjelenst befolysolja. (Amikor elemhez rendelnk stlust, akkor
csak a tulajdonsg rszt kell meghatroznunk.)

Egy stlusdefinci felptse:
37
1. kivlaszt { tulajdonsg }

Az egyes definciknak, de mg a kivlasztnak s a tulajdonsgnak sem szksges j sorban
lennik, gyakorlatilag szabadon rnk van bzva, hogy a fenti tartalmat milyen elrendezsben
valstjuk meg.

Az elz pldkban lthattuk, hogy egy-egy kivlaszthoz tbb tulajdonsgot is
megadhatunk, ekkor a tulajdonsgokat pontosvesszvel elvlasztva kell felsorolnunk. Tbb
kivlasztt is meghatrozhatunk, a kivlasztkat vesszvel kell elvlasztani:
1. kivlaszt, kivlaszt { tulajdonsg; tulajdonsg; }

5.2.7 Kivlasztk
A kivlasztk nagyon rugalmasan hasznlhatak, egyszer s mgis sszetett mdon tudjuk
meghatrozni, hogy mely elemekre vonatkozzanak a tulajdonsgaink.

5.2.8 Elem kivlaszts
A legegyszerbb kivlasztsi lehetsget nyjtja a szmunkra, egy HTML elemet
hatrozhatunk meg vele, amihez hozz szeretnnk rendelni a klnbz tulajdonsgokat. Az
eddigiekben ilyenre lthattunk pldt:
1. h1, h2, h3 { color: #a00000; }
Itt az els hrom szint cmsornak hatroztuk meg a sznbeli megjelenst.

5.2.9 Osztly alap kivlaszts
A HTML elemeket lehetsgnk van osztlyokba sorolni. Ekkor az adott osztlyba sorolni
kvnt elemhez egy class tulajdonsgot rendelnk hozz, amelynek az rtke az
osztlynevnk lesz. A stluslapban ehhez az osztlyhoz hatrozhatunk meg megjelenst. Az
egyes kivlasztkat keverhetjk is.
Nzznk egy pldt:
38
<html>
<head> <title>CSS plda</title>
<style type="text/css"></style>
</head>
<body>
<p class="fontos"> Plda az osztly alap kivlasztra </p>
<p>Ez egy egyszer bekezds.</p>
</body>
</html>

Ennek eredmnye:

5.2.10 Azonost alap kivlaszts
Az azonost alap kivlaszts nagyon hasonl az osztly alaphoz, egy lnyeges klnbsg
van: csak s kizrlag egy elemet tudunk egy bizonyos azonostval megjellni egy HTML
dokumentumon bell.

A stluslapban a ketts keresztet hasznljuk az azonostshoz, a HTML forrsban, pedig az id
tulajdonsgot. Brmi legyen is a dokumentumnyelv, egy ID attribtumnak egyrtelmen
azonostania kell elemt. A kivlasztkat itt is keverhetjk (br mivel egy azonost csak egy
konkrt elemre vonatkozhat, ezrt nincs r szksg).

Az albbi azonost szelektor pldul az sszes els szint cmsorra rvnyes, ahol az
azonost attribtum rtke fejezet1:
H1#fejezet1 {text-align: center}
39
5.2.11 Helyzetrzkeny kivlaszts
A stluslapban lehetsgnk van a HTML fban betlttt helye alapjn meghatrozni egy
elemrl, hogy hogyan nzzen ki. Kevsb bonyolultan megfogalmazva: a helyzetrzkeny
kivlasztsnl a fban egy adott elem alatt lev elemhez rendelhetnk stlust, pldul
megmondhatjuk, hogy a tblzatokon bell lev flkvr betk sttkkek legyenek,
mikzben a norml bekezdsekben levknek nem fog megvltozni a szne. Ilyenkor elszr
azt az elemet kell lernunk, amin bell, majd egy szkzt kveten azt, amire szeretnnk
megadni a stlust. Tbb szintet is fellelhet a kivlasztnk, illetve keverhetjk a korbbiakban
megismert kivlasztkat.

5.2.12 Szl-gyermek kivlaszts
A szl-gyermek kivlaszts abban klnbzik a helyzetrzkeny kivlasztstl, hogy az
elemeknek a fban betlttt helye szerinti kzvetlen szl-gyermek kapcsolata esetn tudjuk
megadni a stlusmeghatrozst.

5.3 JavaScript
A JavaScript a HTML lapok ri szmra kszlt, clja, hogy kevs munkval interaktv
funkcikkal lehessen bvteni a HTML lapokat
4
. Ily mdon nem csak vltozatosabb tehetjk
a megjelen informcikat, de az rlapok (forms) kezelsnl a Web szervert is
tehermentesthetjk.

A JavaScript programok egyik leggyakoribb felhasznlsa az rlapokhoz ktdik. A HTTP
protokoll lehetv teszi, hogy a kitlttt rlapot elkldjk szerverre, ahol egy feldolgoz
program indul (n. CGI script) el s fogadja az informcikat. Ez a program ltalban azzal
kezdi a tevkenysgt, hogy ellenrzi a kapott paramtereket, s hiba esetn visszakld
valamit a bngsz eltt l felhasznlnak. m ez felesleges hlzati terhelst jelent, a
feldolgoz program is potyra indult el. Egy kis JavaScript program segthet a dolgon,
elklds eltt de akr az egyes mezk kitltsekor mg a bngszben ellenrizheti, hogy
megfelel adatokat adtunk meg, figyelmeztethet, korriglhat, ha kell.

40
A JavaScript felhasznlhat arra is, hogy a megjelen HTML lapot vagy annak rszeit
dinamikusan, a felhasznl krnyezetnek, ltala megadott informciknak megfelelen
lltsuk el. A programbl ltrehozott HTML formtum szveget a bngsz ugyangy
jelenti meg, mintha az a szerverrl rkezett volna. Futs kzben is vltoztathatjuk a lap egyes
jellemzit, mint pldul a szneit vagy egyes rlap mezk tartalmt.

Segtsget kaphatunk ahhoz is, hogy lapjainkat egyedi navigcis lehetsgekkel egsztsk
ki. Nyomgombokat definilhatunk, amelyek klnbz lapokat hvhatnak el, a lapunkat
rszekre, keretekre (frame) oszthatjuk s az egyes keretek tartalmt fggetlenl
vltoztathatjuk. Klnbz kiegszt tevkenysgeket vgezhetnk egy lapra be- illetve
kilpskor, hivatkozsok (link) kvetsekor.

JavaScript programok korltozott mrtkben befolysolhatjk a bngsznk mkdst,
megjelenst is. Figyelmeztet (alert) s megerstst kr (confirm) ablakokat jelenthetnk
meg, a fent emlegetett kereteken tl akr nll bngsz ablakokat nyithatunk meg, st ezek
fontosabb megjelensi paramtereit pl. mrete, vannak-e meni, stb. szabadon megadhatjuk.
Tjkoztathat szvegeket jelenthetnk meg az llapotsorban.
17

5.3.1 JavaScript s HTML
A JavaScript programokat a HTML formtum dokumentumokba kell begyazni, erre
vezettk be a kvetkez szintaxist.
<SCRIPT LANGUAGE="JavaScript">

</SCRIPT>

Ahogy a tbbi HTML elem esetben, itt sem jelent klnbsget, ha kis- illetve nagybetket
hasznlunk, azaz a <script> ... </script> ugyangy megtenn, viszont a programon bell mr a
kis- s nagybetk eltr jelentssel brnak.

17
Kiss Istvn: A Jva testvrkje: JavaScript http://www.cab.u-szeged.hu/WWW/java/kiss/javascr.html
41

A <script> olyan HTML tag, amelyet le kell zrni, ezrt egy JavaScript-et rt bngsz el
tudja klnteni a programot a lap tbbi rsztl. Azonban ha olyan bngszt hasznlunk,
amely ezt mg nem rti, az ugyan magt a <script> s </script> tagokat figyelmen kvl
hagyja, viszont a program szvegbe belegabalyodhat. Ezrt clszer a fenti plda szerint a
teljes programot HTML megjegyzsbe () zrni.

JavaScript programrszlet a HTML dokumentumban brhol akr tbbszr is elfordulhat. A
programszveg rtelmezse, vgrehajtsa a <script> tag teljes betltse utn kezddik meg. A
JavaScript programban fggvnyek definilsa s vgrehajtand utastsok sorozata
keveredhet. A fggvnydefincik kirtkelse csak a definci "megjegyzsvel" jr, a
fggvnyeket a HTML lap ms pontjain, ltalban a ksbbiekben megismert
esemnykezelkben hvhatjuk meg. Clszer a lapon felhasznlt sszes fggvnyt a lap
fejben a <head> s </head> kztt definilni.

5.3.2 Adatok, vltozk s kifejezsek
A JavaScript programban elfordul adatok csak a kvetkez ngy klnbz tpusba
tartozhatnak: objektum, szmrtk (amely egyarnt jelenthet egsz vagy vals szmokat),
szveg (karaktersorozat) s logikai rtk (true s false).

Kifejezsek: az egyes rtkeket megjelent literlokon tl vltozk illetve fggvnyhvsok
is elfordulhatnak bennk. Kifejezsek rshoz felhasznlhatjuk a C-bl megismert sszes
szoksos opertort, belertve az olyan egzotikusakat is, mint az rtkad opertorok (pl. =+),
vagy a feltteles kifejezst (felttel ? rtk1 : rtk2) is. Az aritmetikai s sszehasonlt
opertorok jl trik a szvegeket is, szksg esetn sz nlkl konvertlnak szvegek s
szmrtkek kztt ide-oda, de a parseInt s parseFloat fggvnyekkel explicit konverzit is
elrhatunk, az eval fggvny pedig egy szveget, mint JavaScript kifejezst rtkel ki.
Szvegekre itt is rtelmezett a + opertor.

42
Termszetesen vltozkat is hasznlhatunk. Nem kell az egyes vltozk tpust deklarlni,
ugyanazon nev vltoz lettartama sorn tetszleges tpus rtket hordozhat. Vltozkat a
kvetkez kt mdon hozhatunk ltre.
var nv [= rtk]
vagy
nv = rtk

Az els szerkezet, ha elhagyjuk az rtkadst, akkor nem definilt rtk vltozt hoz ltre. A
vltozk lehetnek globlisak, az egsz programban felhasznlhatk illetve loklisak, amelyek
csak az adott fggvnyen bell hasznlhatk, ott viszont elfedhetik az azonos nev globlis
vltozt. Az els fajta deklarci az elfordulsi helytl fggen lehet globlis s loklis is,
a msodik az elfordulstl fggetlenl mindig globlis.

5.3.3 Utastsok
A JavaScript csak a kvetkez alapszavakat hasznlja az utastsokhoz:
break continue for
forin function ifelse
new return var
while with

Azonban az sszes Jva alapszt is fenntartott, programozk ltal nem hasznlhat szknt
kezeli. Az utastsok egy C programoz szmra nagy meglepetseket nem jelentenek,
legfeljebb hinyzik nekik a switch szerkezet. jdonsg a for..in, new illetve a with utastsok,
ezekrl majd az objektumoknl szlok.

Fggvnyek definilsra a
function fnv ( paramterek ) { ... return rtk }
forma szolgl. A fggvny visszatrsi rtknek tpust nem kell definilni, ez is dinamikus,
attl fgg, hogy a return milyen rtket ad vissza. A fggvny trzsben az egyes
paramterekre szoksos mdon a nevkkel hivatkozhatunk, de a paramtereket egy tmb
elemeiknt is elrhetjk, pl. az
43
fnv.arguments[0]
az els paramterre hivatkozik, mg az
fnv.arguments.length
a paramterek szmt adja meg, gy lehetsget kapunk vltoz szm paramteres
fggvnyek rsra.

A fggvnyhvsnl a paramtertads rtk szerint trtnik, azaz a fggvny ugyan
mdosthatja a paramterknt megkapott rtket, de ennek a hvra semmilyen hatsa nem
lehet. Aki imdja mellkhatsokkal (side effect) ttekinthetetlenn tenni a programjait, az
hasznljon gyakorta globlis vltozkat.

5.3.3 Objektumok
A JavaScript objektum-modellje sokak szmra furcsnak tnhet, engem leginkbb a LISP
nyelv objektumorientlt kiterjesztseire emlkeztet. A JavaScript objektum <tulajdonsg,
rtk> prok halmaza. Az egyes tulajdonsgokhoz (property) az ismert
object.property
szintaxissal hivatkozhatunk, az rtkt hasznlhatjuk, mdosthatjuk. Egy objektum
ltrehozsra a new utasts szolgl, amely ltal lehvott fggvny kitltheti az objektum
tulajdonsgainak rtkeit. Pldul:
function person (first, last, age)
{
this.first_name = first;
this.last_name = last;
this.age = age;
}
Dezso = new person("Dezs", "Nagy", 23);
Dezso.age = 24;
utastssorozat ltrehoz egy objektumot, amely rtket rendel a first_name, last_name, age
tulajdonsgaihoz, majd letkort megvltoztatja. A fggvnyen bell a this az aktulis,
esetnkben az ppen ltrehozott objektumra hivatkozik.

44
A JavaScript objektumokat asszociatv tmbknek is tekinthetjk, ahol a tulajdonsg
nevekhez rtkek tartoznak, amelyek a nevek alapjn hozzfrhetk. Ezt az analgit ersti
az is, hogy a tulajdonsgokhoz az indexelsnek megfelel szintaxissal is hozzfrhetnk, pl. a
fenti pldban rhattuk volna azt is, hogy
Dezso["age"] = 24;

Ezek utn nem meglep, hogy JavaScript-ben kln tmbk nincsenek. Tmbnek olyan
objektumot neveznk, amely tulajdonsgai a 0-tl kezdd egsz szmok, ezen fell van egy
length nev tulajdonsga a tmb "hossznak" trolsra. Lssunk egy trkksebb tmb-
konstruktor fggvnyt s felhasznlst, amely kihasznlja a vltoz szm paramteres
fggvnyt:
function initArray()
{
this.length = initArray.arguments.length;
for (var i = 0; i < this.length; i++)
this[i+1] = initArray.arguments[i];
}
mixed = new initArray( "text", 1, 23, Dezso);
rdekes a plda, lthat, hogy a tmb rtkei nem felttlenl azonos tpusak, st egy
objektum tulajdonsgnak rtke lehet egy msik objektum is. Termszetesen mutatk itt
sincsenek, de a null "res objektum" itt is ltezik.
18

Az egyes objektumokhoz fggvnyeket is rendelhetnk, gy a szoksos mdszereket kapjuk.
Hosszas magyarzkods helyett bvtsk a fenti person pldt.
function sayYourName ()
{
document.write("<B>Szia, "
+ this.last_name + " " + this.first_name
+ " vagyok.</B><P>");
}
function person (first, last, age)

18
Moncur, Michael: Tanuljuk meg a JavaScript hasznlatt 24 ra alatt : [24 egyszer, egyrs lecke], Kiskapu,
2006
45
{
this.first_name = first;
this.last_name = last;
this.age = age;
this.introduce = sayYourName;
}
Dezso = new person("Dezs", "Nagy", 23);
Dezso.introduce();

A person ltal ltrehozott objektumoknak lesz egy introduce tulajdonsga, amihez egy
fggvny tartozik. A program vastagon szedve kirja, hogy "Szia, Nagy Dezs vagyok."
Az objektumok sszes tulajdonsgn a for...in ciklussal lehet vgighaladni, a kvetkez
fggvny pldul elllt egy olyan HTML szveget, amely a paramterknt megadott (obj)
s megnevezett (obj_name) objektum sszes tulajdonsgt s a hozz tartoz rtket
felsorolja.
function dump_props(obj, obj_name) {
var result = ""
for (var i in obj) {
result += obj_name + "." + i + " = " + obj[i] + "<BR>"
}
result += "<HR>"
return result
}

5.3.6 Beptett objektumok
Ezek a programozsi lehetsgek nem sokat rnnek, ha nem lennnek a JavaScript-ben elre
definilt objektumok, hozz tartoz tulajdonsgaikkal s mdszereikkel. Szerencsre szmos
ilyen objektum van itt fel sem tudom mindet sorolni , ezek j rsze a HTML lap egyes
elemeire hivatkozik. Megadom a HTML lapokhoz tartoz egy objektumok hierarchijt. A
hierarchinak nincs kze az rkldshez, csupn azt jelenti, hogy a hierarchiban fentebb
ll objektum valamely tulajdonsga a lenti objektumot tartalmazza (hivatkozik r).
46
window: a bngsz ablaka,
o frames: keretek az ablakban,
o location: a megjelent lap URL-je,
o history: a bngsz ltal bejrt lapok,
document: a konkrt HTML dokumentum,
forms: rlapok,
rlap elemek: text field, textarea, checkbox, password,
radio, select, button, submit, reset
links: hivatkozsok
anchors: dokumentum cmkk
Ha egy beptett objektumnak tbb azonos tpus eleme van, akkor azokra vagy tmbszeren
lehet hivatkozni, vagy az elem dokumentumban megadott neve alapjn (NAME= opci). Br
minden egyes objektumhoz sok hasznos tulajdonsg, mdszer tartozik, aminek rszletes
ismertetsre nincs md, a pldk taln zeltt adnak a lehetsgekbl.

A fenti objektumokon tl van mg 2 segd objektum, a Date (dtum s idkezels), Math
(matematikai fggvnyek s konstansok).

A JavaScript szvegei string objektumok, amelyeken szmos transzformcis, HTML-nek
megfelel formz fggvny van rtelmezve. Pldul a
var worldString="Hello, world!"
document.write("<P>" + worldString.fontcolor("red"))
programrszlet a "Hello, world!" szveget piros sznben jelenti meg.

5.3.7 Esemnykezels
A HTML lapok klnbz elemeihez maghoz a laphoz, az egyes hivatkozsokhoz, rlap
elemekhez a bngsz az egr mozgatsval, a billentyzet hasznlatval kapcsolatban
klnbz esemnyeket rendel. Az egyes esemnyek feldolgozsra az j esemnykezelk
(event handler) szolglnak, amelyeket a megfelel HTML elem defincijnl lehet megadni.
Az esemnykezel egy tetszleges JavaScript utastssorozatot tartalmazhat, leggyakrabban
egy fggvny meghvst tartalmazza.

47
A kvetkez tblzat megadja a lehetsges esemnykezelk nevt s a lehvst kivlt
esemny.

onLoad betltnk egy oldalt a bngszbe
onUnload kilpnk egy betlttt oldalrl
onFocus
az rlap valamelyik eleme a fkuszba kerl, azaz a billentyzetrl rkez
karaktereket fogadja
onBlur a fkusz elmozdul az rlap valamelyik elemrl
onSelect az rlap valamelyik bemeneti mezjt kivlasztottk
onChange az rlap valamelyik elemnek (szveg, vlaszts) rtkt megvltoztattk
onClick rkattintottak egy rlap elemre (pl. nyomgombra), vagy hivatkozsra
onSubmit elkldenek egy rlapot a szerver fel (a submit gombra kattintottak)
onMouseOver az egr egy hivatkozs, vagy dokumentum cmke fl kerl

A kvetkez plda egyszer kalkultort valst meg, ahol a kt mezbe szmokat rhatunk, a
kzttk lv legrdl listban a 4 alapmvelet kzl vlaszthatunk, majd az
egyenlsgjellel elltott nyomgombot megnyomva az eredmny mezben megjelenik a
szmts eredmnye.
<HTML>
<HEAD>

</SCRIPT>
</HEAD>
Eddig tartott a dokumentum feje. A compute fggvny belsejben a paramterknt megkapott
rlapobjektum egyes rszeire a nevkkel hivatkozunk: A s B a kt (bementi), result az
48
(eredmny) szvegmez, op pedig a mveletet kivlaszt legrdl lista. A listn bell a
kivlasztott elem sorszmt a selectedIndex mdszer adja vissza, ennek segtsgvel
indexelve megkaphatjuk a mveleti jelet, mint szveget. Az eval pedig szveget vr s
megprblja kifejezsknt kirtkelni.
<BODY>
<FORM NAME="calculator">
<INPUT TYPE="text" NAME="A" SIZE=8>
<SELECT NAME=op>
<OPTION>+ <OPTION>- <OPTION>* <OPTION>/
</SELECT>
<INPUT TYPE="text" NAME="B" SIZE=8>
<INPUT TYPE="button" VALUE=" = " onClick="compute(document.calculator)">
<INPUT TYPE="text" NAME="result" SIZE=8>
</FORM>
</BODY>
</HTML>
Az egyenlsgjel felirat (VALUE=" = ") nyomgombhoz rendeltnk egy esemnykezelt,
amely akkor aktivldik, ha rkattintottunk (onClick), ekkor meghvja a compute fggvnyt,
tadva neki az aktulis rlapot.

5.3.8 llapotsor kezels
Gyakran hasznlhat fortly, hogy a bngsz llapotsorban klnbz kiegszt zenetek
jelennek meg. Els pldaknt megmutatom, hogyan lehet az llapotsorba valami magyarz
szveget kirni akkor, ha az egr egy hivatkozs fltt ll (normlisan a Netscape az URL-t
mutatja meg.) Legegyszerbben a kvetkez mdon jrhatunk el:

<A HREF="URL" onMouseOver="window.status = 'magyarz szveg';
return true">kapcsolat</A>

49
A fenti HREF tag a "kapcsolat" sz fl llva az egrrel meghvdik az onMouseOver
esemnykezel, amely egyszeren az llapotsorba rja a "magyarz szveg"-et, majd igaz
logikai rtkkel visszatr.

A megolds szpsghibja, hogy ha elmozdulunk az egrrel, az llapotsorban ott marad a kirt
szveg mindaddig, amg mst nem runk mi vagy a bngsz oda. Sajnos olyan
esemnykezel nincs, amely akkor indulna be, ha elmozdulunk az egrrel, de az albbi kt
egyszer fggvnnyel adott idzts utn letrlhetjk az llapotsort.


</SCRIPT>

A stat fggvny elszr fellrja az llapotsort, majd a setTimeout hvssal egy JavaScript
programrszlet itt az erase fggvny meghvst idzti 1500 msec-kel ksbbre. A fenti
fggvnyek segtsgvel a HREF tagba mr elegend a stat fggvnyt lehvni:

<A HREF="URL" onMouseOver="stat('magyarz szveg');
return true">kapcsolat</A>

Nhol az llapotsort "fnyreklmknt" hasznljk, az llapotsorban valamilyen szveget
grgetnek jobbrl balra.
50
6. A weboldal bemutatsa
A weblap alapvet feladata, hogy a dolgozknak segtsget nyjtson a munkjuk sorn
hasznlt iktatprogram biztos kezelsben, illetve a program oktatsa sorn jl hasznlhat
digitlis tananyag legyen.

6.1. A weboldal bemutatsa az e-learning oldalrl
A weboldal elksztsnl igyekeztem az e-learninggel szemben tmasztott
kvetelmnyeknek megfelelni.

A weblap CD-re kirva a korai e-learning formnak, a CBT (Computer Based Training)
feltteleinek tesz eleget, mg az internetre vagy intranetre trtn elhelyezskor a WBT (Web
Based Training), a hlzaton keresztl vgbemen tanuls valsthat meg.

A tananyaggal a dolgozk oktatsa trtnhet szinkron s aszinkron mdon. A szinkron
kpzsi formnl, mint tanknyv hasznlhat. Az aszinkron kpzsnl a tananyag hlzaton
keresztl brmikor elrhet.

Az oldal brmilyen keretrendszerben elhelyezhet, akr LOM vagy SCROM
szabvnyrendszere szerint s a mai kornak teljesen megfelel digitlis tananyagg
fejleszthet.

A tananyag didaktikai tagolst nzve egy nll kurzusnak felel meg. A szveg
sszelltsnl a rendszerorientlt szvegformzst hasznltam, mivel a tanulnak csak meg
kell tanulnia a szveget s ezltal elsajtthatja a program hasznlatt.

Egy tovbbi mdszertani szempont, a hypertexes tagols szerint nzve az oldal csak bels
linkeket tartalmaz. Kls link hasznlatt nem tartottam szksgesnek, mivel ez egy
specilisan szk rtegnek, a Pnztr dolgozinak szl oktatanyag. Ksbbi fejlesztsi
terveim kzz tartozik a weboldalt vide elemekkel kiegszteni. Ott, ahol lehetsg van r a
kziknyv ltal ismertetett folyamatokat videknt megjelenteni.

51
6.2. A weboldal bemutatsa az informatika oldalrl
Az oldalt viszonylag gyorsan kellett elksztenem ezrt a HTML nyelvet vlasztottam
egyszersge s knny hasznlhatsga miatt.

Az oldal szerkezetnek alapjt egy tblzatba beptett fejlc s bal oldali men kpezik (2.
bra).

2. bra
Az oldal felptse

A fejlc nagyon fontos minden weboldalon. Ez tartalmazza az oldal azonostshoz szksges
adatokat s az oldal cljt, feladatt, bizonyos esetekben felhasznli krt is kijellhet. A
fejlcbl ki kell derljn, hogy az oldal relevns-e szmunkra. Ha egy adott intzmny
honlapjt ltjuk, akkor elrhetsget (telefonszm, cm, levelezsi cm stb.), logt, aktulis
informcikat, nyelvvltsi lehetsget is fel lehet tntetni a fejlcben.

A bal oldali men megszletse a szimptinak ksznhet, szmomra tlthatbb, mint a
vzszintes men, ez a kedvenc oldalszerkezetem. A ment egy JavaScript vezrli, mg stlust
s elhelyezkedst egy bels CSS rja le:
52
<style type="text/css">

</style>

A JavaScript nyit() s csuk() fggvnyei gondoskodnak a felugr ablakok helyes
megjelensrl, valamint a men s a felugr ablakok pozcijrl. Nzznk mindkettre
pldt:

else
if(menu1==9)
{
menu3=false;
document.getElementById('link9').style.left="173px";
}

else
if(menu2==4)
{
document.getElementById('link4').style.left="-150px";
}

54
Az if...else tbbirny feltteles elgazsban dl el, hogy mikor melyik ablak nylik meg s
melyik zrdik be. A JavaScript megvizsglja a felttelt, ha rtke false, akkor vizsglja a
kvetkezt, ha annak az rtke is false, akkor vizsglja a kvetkezt, egszen addig, mg egy
igaz (true) felttelt nem tall. Ha megtallja, akkor vgrehajtja a hozz tartoz utastst, ha
nem, akkor kerl sor az else gra.

A tartalom iframe-ben jelenik meg, mely a tblzat egyik celljban foglal helyet:
<td align='center' rowspan='2'>
<iframe name='main' width='800' height='430' src='kezdooldal.html' scrolling='auto'
frameborder='0'></iframe>
</td>

Ez azrt praktikus, mert a tartalom az oldaltl fggetlenl grdthet, ami biztonsgrzetet,
tlthatsgot biztost a felhasznlnak. Az alapszerkezet, a tartalomjegyzk mindig szem
eltt marad, brmikor knnyedn vlthatk az oldalak kztt.

Egy adott linkre rllva az onMouseOver, onMouseOut utastsok teremtik meg a kapcsolatot
a JavaScript fggvnyekkel s hvjk meg a megfelel utastst:

<div id="link5" onmouseover="nyit(5)" onmouseout="nyit(-5)" onmousedown="nyit(5)">
<table style="width: 150px;" border="0" bgcolor="#333333" cellspacing="1"
cellpadding="1">
<tbody>
<tr>
<td class="menutable"> <a href="autoarch.html" class="menulink"
target='main'>Automatikus archivls</a></td>
</tr>
</tbody>
</table>
</div>

A sznvlasztst az egyszersg, a jl olvashatsgra val trekvs vezrelte.
55
6.3. Az oldal hasznlata
Az oldal az index.html fjl futtatsval indul. A kperny baloldali rszn tallhat
menpontokban a felhasznli kziknyv fejezetei rhetek el. Az egr mutatjt, ha
rvisszk valamelyik menpontra, akkor a felhasznli kziknyv fejezethez tartoz alcmek
jelennek meg, melyekre rkattintva olvashatjuk az alcmhez tartoz lerst (3. bra). Az
alcmeket tartalmaz almen mindaddig lthat, amg az egrmutatt vagy a fejezet cmn
vagy a megnyl almenn tartjuk. A fejezetcmeket tartalmaz fmen mindig lthat, ez a
knnyebb hasznlatot szolglja.

3. bra
Almen bemutatsa

A kezdoldalra brmikor visszajuthatunk, ha a men alatt tallhat Foldal linkre
kattintunk.
56
6.4. Tesztels, zembe helyezs
Egy weblap fejlesztsnl fontos lps a tesztels, ezrt megkrtem nhny kollegmat, hogy
segtsenek tesztelni az oldalt. Munkahelyem elhelyeztem a helyi intranetes honlapunkon egy
linket, mellyel el lehet rni az oldalt.

Elszr egy zembe helyezsi tesztet hajtottam vgre. zembe helyezskor azt vizsgltam,
hogy amikor a bngszben meghvtam az oldalt, akkor rendben betltdtt-e a kezd oldala.
Amennyiben ez sikeres, akkor az albbi kp jelent meg a bngszben (4.bra).

4. bra
Kezdoldal

Az zembe helyezsi teszt utn egy funkcionlis tesztet hajtottam vgre. Ebben az esetben azt
ellenrizzk, hogy az oldal helyesen mkdik-e. Mindig a kivlasztott menponthoz tartoz
tartalom jelenik-e meg.

A weblap helyes mkdshez nincs szksg klnleges hardver, illetve szoftver ignynek
sem kliens, sem pedig szerver oldalon. Az oldal Google Chrome 0.4+ s Mozilla Firefox 2+
bngszkre s 1024*768 kpernyfelbontsra optimalizlt.
57
A tesztels s zembe helyezs eredmnyes volt, a kollgim visszajelzsei pedig pozitvak.

7. sszefoglals
Bzom abban, hogy dolgozatom clkitzst -digitlis tananyag ksztse- sikerlt
teljestenem. Igyekeztem egy a gyakorlati letben szmomra s munkatrsaim szmra is
hasznosthat segdeszkzt kszteni.

Korbban mr rtam, hogy a Hajd-Bihar Megyei Egszsgbiztostsi Pnztrnl dolgozom,
mint szakmai rendszergazda. A munkakrm nagy rszt a Pnztrnl hasznlt DigiNet
elnevezs iktat, irat- s gyfolyamat-kezel rendszer rendszergazdai feladatainak az
elltsa teszi ki, amibe beletartozik az gyintzk oktatsa is. A programhoz tartoz papr
alap felhasznli utasts helyett elkpzeltem egy mindenki szmra elrhet,
kltsghatkonyabb, gazdasgosabb mdszert, mely segtsgl szolglhat a dolgozknak. Ezt
valstottam meg szakdolgozatomban, kihasznlva az e-learnig nyjtotta lehetsgeket.
Fontos szempont volt szmomra, hogy a tananyag mindenki szmra elrhet legyen
valamilyen formban. Az elksztett weboldal hasznlhat helyi szmtgpekre teleptve
vagy szmtgpes hlzaton keresztl (internet, intranet) brki szmra elrhet.

Az oldalt elhelyeztem munkahelyem helyi intranetes hlzatn s munkatrsaim
visszajelzsei alapjn igazolni ltszik clkitzsem, ugyanis olyan visszajelzseket kapok,
mely szerint a papr alap oktatsi anyaghoz kpest sokkal gyorsabban, hatkonyabban tudjk
elsajttani a munkjukhoz szksges ismereteket. Ily mdn az e-learnig hathats segtsget
jelent munkjukban.
58
Irodalomjegyzk
Knyvek, cikkek, tanulmnyok
- Harangi Lszl, Kelner Gitta, Csoma Gyula:Az e-learning szerepe a felnttoktatsban s
kpzsben, Magyar Pedaggia Trsasg, Budapest, 2003
- Orbn Brigitta: Az e-learning nemzetkzi s magyarorszgi tendencii, Szakdolgozat,
Budapesti Kzgazdasgtudomnyi s llamigazgatsi Egyetem, 2003
- Dr. Hutter Ott, Dr. Magyar Gbor, Dr. Mlinarics Jzsef: E-learning 2005, Mszaki
Knyvkiad, 2005
- Gl Andrs, E-learning, Szakdolgozat, Debreceni Egyetem, 2007
- Lengyel Zsuzsanna Mria: E-learning: tanuls a vilghln keresztl, Szakdolgozat,
Debreceni Egyetem, 2007
- Kovcs Ilma: j t az oktatsban?, Budapesti Kzgazdasgtudomnyi Egyetem s a
Professzorok Hza Felsoktatsi Koordincis Iroda, Budapest, 1997
- DeBolt, Virginia: HTML s CSS : webszerkeszts stlusosan, Kiskapu, 2005
- Meyer, Eric A.: CSS zsebknyv : webtartalmak formzsa stluslapokkal, Kiskapu, 2006
- Skos Lszl: Stluslapok a weben: CSS kziknyv, BBS-INFO Knyk. s Inform. Kft,
2005
- Moncur, Michael: Tanuljuk meg a JavaScript hasznlatt 24 ra alatt : [24 egyszer,
egyrs lecke], Kiskapu, 2006
- DigiNet 9.9.52 iktats, archivls s gyfolyamat kezels, Felhasznli kziknyv, BIS-
Inform Kft., Budapest, 1991-2008

Internetes adatgyjts
- E-learnig siker vagy buks?
http://www.fn.hu/archivum/20030617/e_learning_siker_vagy_bukas/
- Egyni tanulmnyi krnyezet (PLE)
http://www.crescendo.hu/node/5
- Fatty utd volna az e-learning 2.0?
- Nincs e-learning pedaggia nlkl
59
- Mengyelejev s az e-learning - az oktatsi molekulk modelljrl
http://www.crescendo.hu/2006/03/22/mengyelejev-es-az-e-learning
- Az e-learning kett pont nulls forradalma
http://www.crescendo.hu/az-e-learning-ketto-pont-nullas-forradalma
- Tanul-kzpont szemllet az e-learningben
http://www.crescendo.hu/tanulo-kozpontu-szemlelet-az-e-learningben
- Hazai e-learning fejldstrtnet
http://www.crescendo.hu/2007/06/19/hazai-e-learning-fejlodestortenet
- A vllalati kpzsi modellekrl
http://www.crescendo.hu/2007/06/28/a-vallalati-kepzesi-modellekrol
- A hagyomnyos e-learning szemlletrl
http://www.crescendo.hu/2007/11/12/a-hagyomanyos-e-learning-szemleletrol
- Integratv e-learning
http://www.crescendo.hu/2007/11/19/integrativ-e-learning
- Az e-learning
http://ip.gallup.hu/elearning/index.htm
- e-learning
http://www.enc.hu/1enciklopedia/fogalmi/ped/elern.htm
- Az e-learning magyarorszgi helyzete
http://www.hrportal.hu/hr/az-elearning-magyarorszagi-helyzete-20080918.html
- Komenczi Bertalan: Didaktika elektromagna? Az e-learning virtulis valsgai
http://www.oki.hu/oldal.php?tipus=cikk&kod=2004-11-ta-Komenczi-Didaktika#top
- LCMS
http://www.kontis.hu/uvod_soucasti_lcms.asp?menu=elearning&submenu=soucasti&sub
submenu=lcms
- Dr. Magyar Blint: Frontlis pedaggia helyett konstruktv pedaggia
http://www.okm.gov.hu/letolt/kozokt/digitalis_pedagogia2.ppt
- Advanced Distributed Learning (Fejlett Elosztott Tanuls) Megoszthat Tartalom
Objektum Hivatkozsi Modell (SCORM ) 1.2 verzi SCORM ttekints
http://elearning.sztaki.hu/repository/18.pdf
- Digitlis taneszkzk hasznlata a szakkpzsben
60
- Kiss Istvn: A Jva testvrkje: JavaScript
http://www.cab.u-szeged.hu/WWW/java/kiss/javascr.html
- Brthzi Andrs: CSS alapjai I-VII.
http://weblabor.hu/cikkek/cssalapjai1
- Almsi Pl: A HTML dokumentumokrl
http://www.szabilinux.hu/htmlhelp/p13.htm

E-Learning Digitalis Tananyagok Keszitese Modszertan Es Megvalositas

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

E-Learning Digitalis Tananyagok Keszitese Modszertan Es Megvalositas

Uploaded by

Copyright:

Available Formats

Debreceni Egyetem

You might also like