Endrıdi Tamás: Internet alapú alkalmazásfejlesztés c

Részletek

Endrıdi Tamás: Internet alapú alkalmazásfejlesztés c. jegyzetébıl A jegyzet 1. fejezete a HTML nyelvet mutatja be – az alap HTML tagoktól kezdve az összetettebb táblák és keretek megvalósításáig. A 2. fejezet a modern böngészıprogramok által használt Cascading Style Sheet (CSS) technológiával foglalkozik, vagyis azt elemzi, hogyan lehet kettéválasztani a tartalmat a megjelenítés formátumától. Ebben a fejezetben kapott helyet az XML nyelv ismertetése is.

2

A HTML nyelv alapjai

1. A HTML nyelv alapjai A Hypertext Markup Language (HTML) nyelvet eredetileg szövegalapú dokumentumok kezelésére találták ki, melyben alapvetı formázási parancsok (markup) és más információhoz való csatlakozás (hypertext, hyperlink) lehetısége is helyet kapott. A HTML nyelv jelentısége lényegesen túlnıtt az eredeti alkotók legmerészebb álmain is: az Internet térhódításával újabb és újabb nyelvi variációi jelentek meg (jelenleg a HTML 4.0-nál tartunk). Mind az Internetes publikálás, mind az Internetes alkalmazásfejlesztés valamilyen szinten HTML nyelvi elemeket használ. A különféle vizuális dokumentációkészítı és alkalmazásfejlesztı eszközök – így például az MS FrontPage, az MS Word, illetve az MS Visual Studio .NET – részben „eltakarják” a HTML szintet, hogy ne kelljen a fejlesztınek alacsony szintő HTML-elemek kódolásával veszıdnie. A HTML-nyelv alapismerete azonban nélkülözhetetlen az Internetes alkalmazásfejlesztéssel foglalkozók számára. Ez a fejezet az alapvetı HTML elemeket és azok használatát mutatja be mintapéldákon keresztül. Amennyiben az Olvasó korábban már kellı jártasságot szerzett a HTML nyelvben, bátran lapozzon át a második fejezetre.

1.1. Alap HTML tagok Egy HTML dokumentum sima szöveges fájl, amelyben a képernyın megjelenítendı szövegeket speciális HTML tagok1 veszik körül. Egy HTML tag szintaktikailag egy kisebb jel (<) és egy nagyobb jel (>) közötti azonosítóból (és esetleg további adatokból) áll. A HTML tagokat a Web böngészıprogram (például az Internet Explorer 6.0) értelmezi, és az elıírt beállításokat, parancsokat végrehajtja. Igen gyakori egy HTML dokumentumban, hogy egy sima, képernyın megjelenítendı szövegblokkot két HTML tag ölel körül. Ilyenkor az elsı tagot nyitó tagnak, a befejezıt pedig záró tagnak nevezzük. A záró tag azonosítója megegyezik a hozzá tartozó nyitó tag azonosítójával. A záró tag annyiban különbözik a nyitó tagtól, hogy a kisebb jelet egy perjel követi (
1.1.1. HTML konténer tagok A HTML konténer tagok felépítését nézzük meg egy egyszerő példán keresztül. <TITLE>Feladat 1-1

1

Az angol HTML-tag kifejezést más magyar nyelvő dokumentációban szokás HTML-címkének is nevezni. A „címke” szóra történı fordítás viszont a „caption” és a „title” szavak magyarra fordítását nehezítené meg, ezért ebben a jegyzetben az eredeti angol HTML-tag elnevezést használjuk.

Alap HTML tagok

3

Miért kezdıdik minden könyv elsı mintaprogramja azzal, hogy "Helló világ?!"

1-1. kódrészlet

Az 1-1. kódrészletbıl igen markánsan kiviláglik a HTML dokumentumok alapszerkezete. Egy tetszıleges szöveges (ASCII) anyagot az tesz HTML dokumentummá, hogy a nyitó tag és a záró tag öleli körül.2 A fejléc elem (header element) tartalmát a böngészık általában nem közvetlenül a Web-lapon jelenítik meg. A és a tagok által határolt szekcióban szokott helyet kapni – többek között – a <TITLE> elem, melynek szöveges tartalma a böngészı címsorában fog megjelenni. A test elem (body element) tartalmazza a weblapon ténylegesen megjelenı formázott és formázatlan szövegeket, valamint az egyéb objektumokat. Egy HTML dokumentum alapszövege a és a tagok által határolt szekcióban helyezkedik el.

1-1. ábra

Az 1-1. ábra az 1-1. kódrészlet eredményét mutatja az Internet Explorer 5.0 böngészıprogramban.

2

Maga a dokumentumfájl kiterjesztése ettıl függetlenül .HTM, .HTML vagy akár .ASP is lehet.

4


1.1.2. Karakter formázó HTML tagok Szöveges dokumentumok kezelésénél alapvetı igény a szövegek különféle formázása. A HTML nyelvben számos tag szolgálja ezt a funkciót. A részletes bemutatás helyett álljon itt egy kódrészlet, amely jól jellemzi a karakter formázás HTML-es technikáját. <TITLE>Feladat 1-2 Ez a szöveg vastagon jelenik meg. Ez pedig megdöntve. Ez egy aláhúzott szöveg, ez egy <STRIKE>áthúzott szöveg lesz. Ez egy nem proporcionális, azaz fix széles szöveg. Ez a szöveg <SUB>subscript jellegő. Ez a szöveg pedig <SUP>superscript jellegő.

1-2. kódrészlet

A kódrészletbıl látható, hogy a formázások nevének angol kezdıbetői alkotják a megfelelı formázó tagokat (pl. bold-vastag, italic-dılt, underline-aláhúzott stb.) Az 1-2. ábrán látható eredménybıl az is kiderül, hogy a kódrészletben külön sorban megjelenı szövegeket a böngészı nem rakta külön sorba, hanem egybeöntötte. A HTML nyelv természetesen lehetıséget biztosít a szövegszerkesztıknél megszokott „bekezdés” jellegő szövegformázásra is, de ezekrıl csak késıbb, az 1.1.3 részben lesz szó.

1-2. ábra

A különféle fontkészletek felhasználásával még kiterjedtebb lehetıségeink vannak a megjelenítendı szövegek formázására. Az 1-3. kódrészlet egy egyszerő példát mutat a fontok használatára. <TITLE>Feladat 1-3

Alap HTML tagok

5

Színek! Méret! Betőtípus! Több változás együtt!

1-3. kódrészlet

A fenti kódrészletbıl általános szabályként azt is kiolvashatjuk, hogy a nyitó tagok a tagazonosítón kívül különféle attribútum-beállításokat is tartalmazhatnak „attribútum=érték” formájában. Az 1-3. ábra a fenti 1-3. kódrészlet eredményét mutatja az IE 5.0-ban.

1-3. ábra

1.1.3. Sor formázó HTML tagok Az 1-2. kódrészletnél már láttuk, hogy a böngészıprogram figyelmen kívül hagyja az eredeti szövegben szereplı kocsivissza-soremelés karaktereket. A megjelenı szövegben ezek helyén egy üres karakter (ún. whitespace) fog megjelenni. A TAB karakter is hasonlóan üres karakterként jelenik meg. Az 1-4. kódrészlet a HTML nyelv különféle sorformázási lehetıségeit mutatja be. <TITLE>Feladat 1-4
Ez a sor egy paragrafus példa.
Ez pedig egy másik paragrafus.

Itt látunk egy elsı szintő fejlécet.

Itt látunk egy második szintő fejlécet.
Ez a mondat után nincs soremelés. Ez után viszont van.
Ez a mondat után sincs soremelés. Ez után sincs soremelés.

1-4. kódrészlet

A kódrészletbıl látható, hogy a
tagot használja a HTML nyelv a paragrafus (bekezdés) létrehozására. A záró paragrafustag használata nem kötelezı, hiszen a böngészıprogram úgy mőködik, hogy egy újabb nyitó
tag hatására bezártnak tekinti az elızı paragrafust.

6


A
és a
tagok egy beépített hatszintő hierarchikus címsor elsı két szintjét jelképezik. Mindig az adott böngészıprogram dönti el, hogy az egyes szinteknek milyen betőtípust és fontméretet feleltet meg, de mindig a
a legnagyobb, és a
a legkisebb betőméret. A
tag a tulajdonképpeni soremelés (break) tag a HTML-ben. Miután a
taghoz nem kapcsolódik szövegblokk, ezért záró
tag sem létezik.

1.4 ábra

Két speciális szövegformázási lehetıségre láthatunk példát az 1-5. kódrészletben. <TITLE>Feladat 1-5
Amit itt látunk, az egy elıre megformázott szöveg. Vegyük észre, hogy pontosan úgy jelenik meg, ahogy begépeltük.

Az itt megadott mondatot a böngészı kettétörheti, ha úgy jön ki a lépés, és nem fér ki az ablakban. Ezt a mondatot viszont semmiképpen nem törheti ketté, még akkor sem, ha nem férne el az ablakban.

1-5. kódrészlet

Alap HTML tagok

7

A
elem alkalmazásakor a nyitó
tag és a záró
tag által körülzárt szövegre nem érvényesek a korábban említett szóköz-, TAB- és soremelés-ignoráló szabályok. A szövegblokk ilyenkor pontosan úgy jelenik meg, ahogy azt begépeltük a HTML dokumentum fájl-ba. A elem (no-break) szövegblokkját viszont mindenképpen egy sorban jeleníti meg a böngészı – még akkor is, ha így a szöveg bizonyos részei csak a vízszintes gördítısávval érhetık el. A
tag (horizontal line) egy sorszeparátor elhelyezését teszi lehetıvé. A WIDTH és a LINE attribútumokkal a vonal relatív hosszát (százalékban) és a pixelekben mért vastagságát adhatjuk meg. A kódrészlet eredményét az 1-5. ábrában tekinthetjük meg.

1.5 ábra

A sorformázó elemekkel létrehozott szövegblokkok az ALIGN attribútum, illetve a elem segítségével balra, jobbra, illetve középre igazíthatók. Az 1-6. kódrészlet a szövegigazításra mutat példát. <TITLE>Feladat 1-6
Ez a paragrafus balra van igazítva.

Ez a 2-es szintő fejléc középre igazított.

Ez az 5-ös fejléc jobbra igazított.
Ez egy sima középre igazított szöveg.

1-6. kódrészlet

8


A fenti példából látható, hogy a középre igazítás kétféle technikával is elvégezhetı. Az eredmény az 1-6. ábrában jelenik meg.

1-6. ábra

1.1.4. Kép és hiperhivatkozás beillesztése A különféle típusú képek (elsısorban GIF és JPEG formátumot szoktak használni) és a hiperhivatkozások (hyperlinkek) különösen fontos szerepet játszanak a HTML dokumentumokban. A beillesztés megvalósítását az 1-7. kódrészletben követhetjük nyomon. <TITLE>Feladat 1-7 Itt látható egy image (kép): .

A most következı kép jobbra van igazítva. Az igazítás miatt a kép kikerül a normál szövegfolyamból, és az ıt körülvevı szöveghez viszonyított relatív elhelyezést nyer.
Ez itt egy hivatkozás a Számalk OKK honlapjára.
A következı helyi hyperlinkhez kép és szöveg is tartozik.
text
A következı link egy könyvjelzıre mutat egy fájl-on belül.
Könyvjelzı

1-7. kódrészlet

Alap HTML tagok

9

Egy kép beillesztéséhez az tagot (image tag) kell használni. Miután az taghoz nem tartozik szövegblokk, ezért záró sem létezik. Az image tagnak több attribútuma is van, melyek közül a legfontosabb az SRC attribútum, ami a képfájl helyét adja meg. A képfájl helyét többféleképpen is meghatározhatjuk: •

Ha a képfájl a HTML dokumentummal megegyezı könyvtárban található, akkor csak szimplán a fájlnevet kell megadnunk. (Pl.: sample.gif)

•

Ha a fájl a HTML dokumentumhoz képest egy másik könyvtárban található, akkor a fájlnevet az útvonallal kell kiegészítenünk. (pl. image/sample.gif)

•

Ha a fájl egy másik Web címen található, akkor a teljes http címet kell ideírnunk. (Pl. http://okk.szamalk.hu/intprog/images/sample.gif )

Az SRC attribútum mellett fontos szerep jut a kép pixelméretét meghatározó WIDTH (szélesség) és HEIGHT (magasság) attribútumoknak.3 Az 1-7. kódrészletben látható, hogy az ALIGN attribútum nemcsak szövegek igazítására használható, hanem képekre is. Hiperhivatkozások (hyperlinkek) az elem (anchor element) segítségével helyezhetık el egy HTML dokumentumban. A hiperhivatkozás egy nyitó tagból, a képernyıs megjelenítés szövegblokkjából és egy záró tagból áll. A nyitó tag legfontosabb attribútuma a HREF (hypertext reference), ami azt a Web címet azonosítja, ahová a hiperhivatkozás aktivizálásakor kell elugrania a böngészınek. A Web cím HREF-beli meghatározásánál itt is érvényesek a képfájl megadásánál leírtak. A HTML dokumentummal megegyezı szerver esetén sima fájlnév (esetleg útvonallal kiegészítve), míg más szerver esetén teljes http cím kell. Az 1-7. kódrészlet utolsó hiperhivatkozása a könyvjelzı használatát mutatja be. Az adott hiperhivatkozás aktivizálásakor az Egyéb.htm fájl-nak a Könyvjel1 könyvjelzıvel azonosított pontjára fog a böngészı elugrani. Egy könyvjelzı létrehozásához egy tagot kell felvenni, és a könyvjelzı nevét az tag NAME attribútumában kell megadni. Az 1-7. kódrészletbıl az is kiolvasható, hogy egy hiperhivatkozás képernyıs megjelenítése nemcsak egy kékkel aláhúzott szöveg lehet, hanem egy kép (vagy akár mindkettı egyszerre!).

3

A WIDTH és a HEIGHT megadása nem kötelezı, de elhagyásakor a böngészı csak a képek letöltése után tudja a szöveget megfelelıen betördelni a weblapra, ami azzal jár, hogy minden egyes kép letöltése után újra el kell helyeznie a szövegeket a képeknek megfelelıen. Lassú Internet kapcsolat esetén ez különösen kellemetlen lehet.

10


1-7. ábra

1.1.5. Listák létrehozása a HTML nyelvben A HTML nyelvben általában kétfajta listát használnak: sorszám nélküli és sorszámozott listát. A sorszám nélküli lista általában bajusszal ellátott, míg a sorszámozott lista elején valamilyen szám áll. A két típusú lista kombinálható is egymással, így komplex listaszerkezet hozható létre több szint egymásba ágyazásával. A sorszám nélküli lista egyes szintjei az
elemek (unordered list) egymásba ágyazásával valósíthatók meg. Egy adott
elem szövegblokkjában – a listaszöveg és a beágyazott
elemek mellett –
elemek (list items) kaphatnak helyet, melyek az adott szint listatételeit sorolják fel az adott szintnek megfelelı bajusz mögött. Az 1-8. kódrészlet az eddigiek illusztrálására mutat egy sorszám nélküli lista példát. Az eredményt az 1-8. ábrában láthatjuk. <TITLE>Feladat 1-8
Ez az elsı szint.
Ez a második szint.

Ez a harmadik szint.


Alap HTML tagok

11

Ez egy elsı szintő fejléc.
Ez az elsı elem az elsı listában.
Ez a második elem az elsı listában.

Ez az elsı elem a második listában.
és ez a második elem a második listában.

Ez a harmadik elem az elsı listában.

1-8. kódrészlet

1-8. ábra

A sorszámozott lista az
elem (ordered list) segítségével valósítható meg. A TYPE attribútumban a sorszámozás típusa is megadható. Az 1-9. kódrészlet és az 1-9. ábra sorszámozott listára mutat példát. <TITLE>Feladat 1-9

Ez az elsı elem az elsı listában.
Ez a második elem az elsı listában.

Ez az elsı elem a második szinten.

12

És ez a második elem a második szinten.

Ez a harmadik elem az elsı listában.

1-9. kódrészlet

1-9. ábra

1.2. HTML táblák és keretek 1.2.1. HTML táblák felépítése Egy HTML tábla a nyitó tag és a
záró tag között meghatározott adatokból áll. A tábla egészére érvényes attribútumokat a nyitó tagban lehet megadni. Itt lehet többek között meghatározni a keret méretét (BORDER), a háttérszínt (BGCOLOR) vagy a tábla méretét (WIDTH, HEIGHT). Egy HTML tábla – mint általában minden tábla – táblasorokból és táblacellákból áll. A táblasorokat a elem (table row) segítségével definiáljuk. Minden táblasor elem egy nyitó tagból, a táblasor tartalmából, és egy záró tagból áll. A nyitó és a záró tag között kell az adott táblasor egyes celláit meghatározni. Minden egyes cellát egy-egy tagból áll. A cella adat helyén nemcsak egy egyszerő HTML szövegblokk, hanem bármilyen összetett HTML szerkezet (kép, hiperhivatkozás vagy akár egy újabb tábla) is szerepelhet. Ennek megfelelıen egy több részbıl álló komplex weblap is megjeleníthetı egyetlen táblaként (lásd az 1-14. példát). Egyszerő 2*2 cellás táblára láthatunk példát az 1-10. kódrészletben és az 1-10. ábrában. <TITLE>Feladat 1-10
elemként (table data) kell megadni. A cellaelem – a táblasor elemhez hasonlóan – egy nyitó tagból, a cella adatból és egy záró

HTML táblák és keretek

Az elsı cella tartalma Elsı sor, Második oszlop

2. sor, 1. oszlop Utolsó cella

1-10. kódrészlet

1-10. ábra

A különféle tábla- és cella attribútumok használatára mutat példát a 1-11. kódrészlet. <TITLE>Feladat 1-11

Elsı cella Elsı sor, Második oszlop

2. sor, 1. oszlop Utolsó cella

Elsı cella Második cella

Harmadik cella Negyedik cella

1-11. kódrészlet

13

14


A 1-11. kódrészlet két táblát jelenít meg egymás alatt. A tagbeli BORDER attribútumban adhatjuk meg a tábla keretének vastagságát pixelben. A felsı tábla 5 pixeles, míg az alsó 10 pixeles kerettel rendelkezik. A CELLSPACING és a CELLPADING attribútumokkal lehet meghatározni, hogy mekkora üres hely maradjon a cellák között, illetve a cellákon belül az adatok körül. A felsı táblában a cellák között van nagy hely (a CELLSPACING értéke 15), míg az alsó táblában az egyes cellákon belül maradt nagyobb hely (a CELLPADDING értéke 15). A táblának, illetve egy-egy cellának a háttérszínét a BGCOLOR attribútummal lehet egy konkrét színre beállítani, illetve a BACKGROUND attribútummal lehet egy adott képet háttérként megjeleníteni. A példából látható, hogy a teljes táblára elıírt színbeállítást egy adott cella esetében felülbírálhatjuk. A tábla eredménye az 1-11. ábrában látható.

1-11. ábra

Az 1-12. kódrészlet arra mutat példát, hogyan lehet a COLSPAN és a ROWSPAN attribútumok segítségével oszlopokat, illetve sorokat összevonni egy táblában. <TITLE>Feladat 1-12


15

Gyümölcs eladás

1. üzlet 2. üzlet

Alma 1. nap 40 25

2. nap 30 30

Narancs 1. nap 40 25

2. nap 30 30

1-12. kódrészlet

1-12. ábra

1.2.2. HTML táblák egymásba ágyazása A cellaadatoknál már szó volt róla, hogy egy cella komplex adatot is tartalmazhat – így akár egy másik tábla tartalma is elhelyezhetı egy cellában. Az 1-13. kódrészlet egy egyszerő példát mutat táblák egymásba ágyazására. <TITLE>Feladat 1-13

16


1

A B

C D

E F

G H

2

1-13. kódrészlet

A fenti kódrészlet a vízszintes igazításhoz már korábban használt ALIGN attribútum mellett a függıleges igazítás VALIGN (vertical align) attribútumát is bemutatja. Az attribútum lehetséges értékei a „bal, jobb, fent, lent” angol megfelelıi (left, right, top, bottom) lehetnek.

1-13. ábra

1.2.3. Összetett weblap megjelenítése táblaként Az 1-14. kódrészlet arra mutat példát, hogyan lehet egy több szekcióból álló weblapot táblaként megjeleníteni.


17

<TITLE>Feladat 1-14

Táblázatokat használó lap

Feladatok
Feladat 2-1
Feladat 2-2
Feladat 2-3
Feladat 2-4

Ez a lap a táblázatok használatát mutatja be.
Helyi linkeket tartalmaz baloldalon, külsı linkeket a jobboldalon, a tartalom pedig középen jelenik meg, a fejléc pedig a tetején.
Szervezetek
Microsoft
Microsoft Press
W3C

Érdekes site-ok
SBN Workshop
MSDN
WebReference.com
WebReview.com

1-14. kódrészlet

Az 1-14. kódrészletbe már több apró trükköt is beépítettünk. A trans.gif nevő – ténylegesen üres – kép csak azért került be mindhárom oszlopba, hogy az ablak kicsinyítésekor az oszlopok mérete semmiképpen se csökkenjen 80, 150, illetve 120 pixel alá. Ebben az esetben ugyanis az ott szereplı hiperhivatkozások két sorba „törnének”, ami nagyon zavaró lenne. A tag TOPMARGIN=0, illetve LEFTMARGIN=0 beállítása azért szükséges, hogy a weblapon eredendıen meglévı kis margó ebben a táblázatos elrendezésben ne jelenjen meg, hiszen itt a tábla a teljes weblapot elfoglalja (WIDTH=100%, HEIGHT=100%).

18


1-14. ábra

1.2.4. HTML keret A HTML keretek (frames) használatával a weblapot régiókra oszthatjuk, és mindegyik régióban egy-egy önálló HTML dokumentum tartalmát jeleníthetjük meg. A HTML keretek létrehozását ún. frameset dokumentumban kell elvégezni. Egy frameset dokumentum csak annyiban különbözik egy normális HTML dokumentumtól, hogy a W3C szervezet szabványa értelmében a elem helyett elemet tartalmaz. Az 1-15. kódrészlet egy egyszerő, három keretbıl álló frameset dokumentumot tartalmaz. <TITLE>Feladat 1-15

1-15. kódrészlet

A nyitó tag COLS attribútumában az egyes keretek szélessége adható meg. Az elsı kerethez rendelt 50% azt jelenti, hogy a böngészı ablak elsı felében az elsı keretbeli Elsı.htm dokumentum jelenjen meg. A második oszlophoz fixen 70 pixelt rendeltünk, míg a harmadik oszlophoz megadott csillag azt jelenti, hogy a maradék helyet ez az oszlop kapja. A keretek egymáshoz viszonyított méretét a böngészıben meg lehet változtatni a kerethatároló vonalak egérrel történı áthelyezésével.


19

A keretek között különleges szerepet töltenek be az ún. in-line keretek (in-line frames). Az inline keret a képhez, illetve a táblához hasonlóan beágyazott elem egy HTML dokumentumban. A 1-15a. kódrészlet a Harmadik.htm dokumentumot mutatja be, melyben helyet kapott egy <IFRAME> tag. Ez a harmadik keret.
<IFRAME SRC="Elsı.htm" WIDTH="100">

1-15a. kódrészlet

Az in-line keret a böngészıbıl nem méretezhetı önállóan, ehelyett együtt mozog az ıt körülvevı kerettel. Az 1-15. ábra az eredményt mutatja.

1-15. ábra

1.2.5. HTML frameset-ek egymásba ágyazása A frameset-ek egymásba is ágyazhatók, így összetett keretstruktúrák alakíthatók ki. <TITLE>Feladat 1-16

20

A HTML nyelv alapjai 1-16. kódrészlet

Az 1-16. kódrészlet két egymásba ágyazott frameset-et mutat. A külsı frameset ROWS attribútuma adja meg, hogy a frame1 nevő elsı keret 50 pixel magas legyen, míg a maradék hely a beágyazott frameset-nek jusson. A belsı frameset COLS paramétere viszont azt írja elı, hogy a frame2, illetve frame3 nevő keretek oszloposan (azaz egymás melletti oszlopban) helyezkedjenek el – 20%-80% arányban osztozva a helyen. A SCROLLING attribútummal azt adhatjuk meg, hogy kérünk-e gördítısávot az adott kerethez. A FRAMEBORDER és a FRAMESPACING attribútumok a kereteket elválasztó vonalak méretét adják meg. Ha ezek értéke nulla, akkor a felhasználó a böngészıben nem tudja az adott keret méretét megváltoztatni. (Az 1-16. kódrészletben az elsı keretet a többitıl elválasztó vonal nem helyezhetı át.)

1-16. ábra

1.2.6. Navigálás a keretek között A keretek közötti hiperhivatkozás kapcsolatok segítségével navigációs eszközsort (menükeretet) tudunk kialakítani, ami számtalan Internetes alkalmazásban nélkülözhetetlen elemként jelenik meg. Az 1-17. kódrészlet két keretet mutat. A baloldali keret navigációs eszközsorként funkcionál, és a jobboldali keretben mindig az a keret jelenik meg, amire a baloldali keretben rákattintottunk. <TITLE>Feladat 1-17

További HTML elemek

21

Elsı keret
Második keret
Harmadik keret

1-17. kódrészlet

Az 1-17. kódrészlet vastag vonal alatti részében a Navigál.htm tartalma látszik. Megfigyelhetjük, hogy a Navigál.htm-ben minden anchor tag a HREF attribútumon kívül tartalmaz egy TARGET attribútumot is, amelyben annak a keretnek a nevét adtuk meg, amelynek a tartalmát le kell cserélnie a HREF-ben megadott dokumentumra. Az eredmény az 1-17. ábrában látható.

1-17. ábra

1.3. További HTML elemek Az összes létezı HTML elem felsorolása jelentısen meghaladná ennek a jegyzetnek a terjedelmét. Néhány elemet önkényesen kiemeltünk, melyeket ebben a részben mutatunk be.

1.3.1. Comment elem A Comment elem belsejében elhelyezett szövegeket nem jeleníti meg a böngészı. A Comment elem alkalmazásának a célja kettıs: •

Minden nyelvben megszokott dolog, hogy megjegyzéseket illeszt be a szerzı (fejlesztı), amelyek a tényleges mőködtetés során nem fejtenek ki hatást – azaz nem futnak le, nem jelennek meg stb.

22 •

A HTML nyelv alapjai A kliensoldali script technikánál látni fogjuk, hogy a VBScript, illetve Jscript nyelven elkészített script eljárások megjelenítés elıli „elrejtésének” is a kommentelés a technikája.

Az 1-18. ábrán bemutatott példából kiolvasható, hogy a Comment elem egy záró tag között elhelyezett tetszıleges szövegblokkból áll. A nyitó és a záró tagnak nem kötelezı egy sorban lennie. Ugyanolyan formátumú Comment elemet valósít meg a 4 nyitó és a záró tag közötti szövegblokk. <TITLE>Feladat 1-18 Ez a szöveg ténylegesen megjelenik a böngészıben. Ez a rész nem fog megjelenni a böngészıben

1-18. kódrészlet

A böngészı csak egyetlen sort fog megjeleníteni az 1-18. ábrának megfelelıen.

1-18. ábra

1.3.2. Fieldset és Legend elemek A megjelenítendı információk csoportosításának egyik lehetséges eszköze a Fieldset és a Legend elemek alkalmazása. A
nyitó tag és a
záró tag közötti szövegblokkot a böngészı a többi szövegtıl elkülönítve, azaz bekeretezve jeleníti meg. elem alkalmazásával a keret bal felsı szélén címkeszöveget is tudunk írni.

4

Az egyetlen „apró” különbség, hogy bizonyos böngészık – például a Netscape Navigator – nem támogatja ezt a fajta Comment elemet, így a teljes elem megjelenik a böngészıben.

További HTML elemek <TITLE>Feladat 1-19
Ebben a fieldset-ben nincs LEGEND.
Ez a szöveg az 1. fieldset után jön. Ez a szöveg az 1. fieldset után jön. Ez a szöveg az 1. fieldset után jön.
2. Fieldset Ez a 2. fieldset belsejében van.
Ez a szöveg az 2. fieldset után jön. Ez a szöveg az 2. fieldset után jön. Ez a szöveg az 2. fieldset után jön. Ez a szöveg az 2. fieldset után jön.
3. Fieldset Ez a harmadik Fieldset-ben van.
4. Fieldset Ez a szöveg a negyedik fieldset-ben található.

1-19. kódrészlet

Az 1-19. kódrészlet eredménye az 1-19. ábrán látható:

23

24


1-19. ábra

1.3.3. A Map grafikai elem használata A <MAP> grafikai elem segítségével megvalósíthatjuk azt, hogy egy kép ( elem) bizonyos részei önálló hiperhivatkozásként funkcionáljanak. Az 1-7. kódrészletben láttuk, hogy az elem belsejében elhelyezett taggal egy kép is aktív hiperhivatkozás forrás lehetett. Az így megjelenített képek azonban csak – a WIDTH és a HEIGHT attribútumok által meghatározott mérető – téglalap alakúak lehetnek. Az 1-20. kódrészletbıl kiolvashatjuk, hogy egy weblapra felhelyezett képbıl a <MAP> elembe beépített tagok segítségével tetszıleges részeket (köröket, téglalapokat, illetve sokszögeket) kivághatunk, és minden ilyen részhez egy-egy hiperhivatkozás (HREF attribútumban megadott URL címet) mellékelhetünk. <TITLE>Feladat 1-20 <MAP NAME="NavMap">
Microsoft W3C


25

Microsoft Press

1-20. kódrészlet

Az 1-20. kódrészletbıl láthatjuk, hogy a NAV.GIF képet a USEMAP attribútum révén összekapcsoltuk a NavMap nevő <MAP> elemmel. A NavMap elemben három területet (AREA tagot) alakítottunk ki. •

Az elsı terület egy téglalap (SHAPE=”rect”), melyhez négy koordinátát rendeltünk a COORDS attribútumban.

•

A második terület egy kör (SHAPE=”circ”), melyet a kör középpontjának két pixel koordinátája (100, 150) és a kör sugara (20) határoz meg.

•

A harmadik terület egy sokszög (SHAPE=”poly”), melyet öt koordináta-pár határol körbe.

Minden egyes területhez külön HREF attribútummal rendeltük hozzá a megfelelı hiperhivatkozás címet.

1-20. ábra

26


1.3.4. A SPAN és a DIV elem A <SPAN> és a
elemeket konténer tagoknak is hívják, mivel a szerepük alapvetıen az, hogy komplett szövegblokkokat magukba zárva – a többi szövegtıl elkülönített – önálló stílust rendelhessünk hozzájuk. A stílus hozzárendelésrıl a Cascading Style Sheet (CSS) technikát bemutató fejezetben lesz szó. A két elem közötti különbség alapvetıen az, hogy a <SPAN> elem in-line elem, azaz nem okoz sortörést, míg a
elem blokk elem, azaz önálló paragrafust alkot. Az 1-21. kódrészlet és az 1-21. ábra szemléletesen megmutatja az említett különbséget. <TITLE>Feladat 1-21 Az itt látható <SPAN STYLE="font:bold 14pt">szöveg egy SPAN-ben van.
Ez itt pedig
egy DIV
része.

1-21. kódrészlet

1-21. ábra

1.3.5. Az XMP elem Az <XMP> elem neve az example (példa) szóból származik, és a már korábban bemutatott
elem funkcióját kibıvítve az <XMP> elemen belüli szövegblokk esetében nemcsak az eredeti szövegtördelést hagyja meg, hanem a HTML tagok böngészı általi értelmezésétıl is eltekint. Ez az elem akkor hasznos, ha – például a HTML nyelv elemeit magyarázó – weblapunkon kisebb (<) és nagyobb (>) jelek közötti tetszıleges szöveget szeretnénk megjeleníteni, és el akarjuk kerülni azt, hogy a böngészıprogram bármilyen módosítást végrehajtson a szövegen.


27

Az 1-22. kódrészlet és az eredményt bemutató 1-22. ábra jól érzékelteti az <XMP> elem hatását. Az <XMP> nyitó tag és az záró tag közötti szövegblokk érintetlenül jelenik meg a böngészıben – még akkor is, ha szemmel láthatóan normál HTML tagokat tartalmaz. <TITLE>Feladat 1-22
Ez a paragrafus vastag, dılt betős, és aláhúzott tagokat tartalmaz.
<XMP>
Ez a paragrafus vastag, dılt betős, és aláhúzott tagokat tartalmaz.

1-22. kódrészlet

1-22. ábra

1.3.6. A karakter egyedek használata Egy karakter egyed (character entity) egy adott karaktert reprezentáló kód. Általában akkor használatos, ha az adott karakternek a szövegblokkba történı közvetlen begépelése megzavarhatja a böngészıprogram HTML értelmezıjét. A legtipikusabb ilyen jel a kisebb jel (<), ami egy HTML tag kezdetét jelenti a böngészı számára. A karakter egyed egy ampersand (&) karakterrel kezdıdı és egy pontosvesszıvel záródó jelsorozat. Bizonyos, tipikusnak tekinthetı jelekre eleve léteznek mnemonikus rövidítések (pl. < - ami a kisebb jelet jelenti az angol less than rövidítés alapján), más jeleknél az adott

28


karakterkészlet szerinti numerikus azonosítót (Unicode ISO10646) kell megadni egy máltai kereszt (#) mögött (pl. ™, ami a trademark speciális szimbólumát ™ jelenti). Az 1-23. kódrészletben és az eredményként megjelenı 1-23. ábrán látható, hogy milyen zavart okozhat a böngészı számára egy kisebb jel beillesztése a karakter egyed technika nélkül. <TITLE>Feladat 1-23 Vastag betőkkel kiírjuk, hogy az X kisebb, mint az Y: X. Ez a paragrafus karakter egyedet használ.
Vastag betőkkel kiírjuk, hogy az X kisebb, mint az Y: X. Ez a paragrafus nem használ karakter egyedet.

1-23. kódrészlet

1-23. ábra

Bevezetés a CSS technológiába

29

2. A tartalom, a stílus és az adatok szétválasztása A kezdeti idıkben a Web böngészık a képernyın megjelenı szövegek formázására egyre újabb és újabb HTML elemeket építettek be. A gombamód szaporodó HTML elemek egyre áttekinthetetlenebbé és olvashatatlanabbá tették a dokumentum tartalmi részét. A problémát a World Wide Web Consortium (W3C) azzal oldotta meg, hogy létrehozta a Cascading Style Sheet (CSS) specifikációt. A CSS technika alapvetı célja, hogy szétválassza a dokumentum tartalmi részét a megjelenítési stíluselemektıl. A CSS technológia alkalmazásával a képernyıs megjelenítés minden aspektusa (képernyı pozíció, font, szín, keret, kitöltés, stb.) tetszılegesen vezérelhetı – anélkül, hogy a vezérlıelemek „széttörnék” a HTML dokumentum szövegblokkját. A korszerő szövegszerkesztıknél (pl. az MS Word) megszokott dolog, hogy a különféle dokumentum-elemek (fejezetcím, alcím, ábracím, lábjegyzet, szövegblokk, stb.) formázását nem az adott szövegrész kijelölésével és közvetlen formázással valósítjuk meg, hanem elıre kialakított stílusokat alkalmazunk a dokumentum egyes részeire. Ennek a technikának számtalan elınye van a közvetlen formázással szemben (pl. az összes ábracím aláhúzásához elég egyetlen helyen, a stílusnál elvégezni a módosítást). Teljesen hasonló alapelv érvényesül a HTML lapoknál is. Egy webhely több száz (esetleg több ezer) HTML oldala tartalmi szempontból sok rokon vonást mutat egy több száz oldalas Word dokumentációval. Mindkettı esetében egy egységes stílusgyőjtemény (téma és elrendezés) biztosítja a tartalom konzekvens megjelenítését.

2.1. Bevezetés a CSS technológiába Stíluselemek HTML dokumentumba való elhelyezésének többféle technikája is megvalósítható. A legegyszerőbb ezek közül az, amikor egy HTML nyitó tagba építünk be egy STYLE attribútumot. Ezt a technikát hívjuk in-line stílus alkalmazásnak. A 2-1. kódrészlet és a hozzátartozó 2-1. ábra azt mutatja be, hogyan lehet egy <SPAN> tagba elhelyezni egy STYLE attribútumot, és milyen hatást fejt ki ez a képernyın. Az in-line stílus beépítése alapvetıen a CSS elıtti idık technikájára emlékeztet, ezért csak kivételes esetekben használjuk. <TITLE>Feladat 2-1 <SPAN STYLE="font-weight: bold"> Ez a szöveg egy SPAN-ben van.
Ez a szöveg nincs benne a SPAN-ben.

2-1. kódrészlet

30

A tartalom, a stílus és az adatok szétválasztása

2-1. ábra

2.1.1. Stíluslap felépítése „Igazi” stíluslapról (style sheet-rıl) akkor beszélhetünk, ha az adott stílusinformációt önálló stílusdefiníciók sorozataként adjuk meg. Minden egyes stílusdefiníció két részbıl áll: •

Az elsı részben adjuk meg annak a tételnek a nevét, amire a stílusinformáció vonatkozik. A tétel neve egy HTML tag neve vagy egy globális osztálynév lehet. A HTML tag nevét nem szabad kisebb-nagyobb jelek közé tenni.

•

A tételnevet követi a kapcsos nyitó és csukó zárójelek közé zárt deklarációs blokk. A deklarációs blokkban pontosvesszıkkel elválasztva stílusdeklarációk szerepelnek. Minden stílusdeklaráció szintaktikailag három részbıl áll: az attribútum nevébıl, egy kettıspontból és az attribútumnak adott értékbıl. H1 {font-size: 16pt; font-weight: bold; color: red} H2 {font-style: italic; font-size: 24pt; color: green} SPAN {font-weight: bold; font-style: italic}

2-2a. kódrészlet

A 2-2a. kódrészletben bemutatott stíluslap három stílusdefiníciót tartalmaz. Az elsı a
tagra vonatkozik, és azt írja elı, hogy az adott stílusdefiníció hatókörében található összes
tag szövegblokkja 16 pontos vastag betővel és piros színnel jelenjen meg. A második definíció a
tagokra írja elı, hogy 24 pontos, zöld színő, dılt betőket használjanak. A harmadik definíció a dokumentum <SPAN> tagjainak szövegblokkjaira vastag, dılt betőt ad meg. A tételnév helyén csoportot is megadhatunk olyankor, amikor több tagra ugyanazt a stílust akarjuk elıírni. Egy csoport nem más, mint a tételnevek vesszıvel elválasztott felsorolása. A 2-2b. kódrészlet csak annyiban különbözik a 2-2a-tól, hogy a
tagra a
-vel megegyezı stílust adtunk meg. H1 {font-size: 16pt; font-weight: bold; color: red} H2, H3 {font-style: italic; font-size: 24pt; color: green} SPAN {font-weight: bold; font-style: italic}

2-2b. kódrészlet


31

A @import parancs segítségével a stíluslapok egymásba is ágyazhatók, és így speciális stílushierarchiát építhetünk fel. A 2-2c. kódrészletben a 2-2a. kódban bemutatott stíluslapot egy korábban – kozos.css néven – elmentett stíluslappal bıvítettük ki. @import: url(kozos.css) H1 {font-size: 16pt; font-weight: bold; color: red} H2 {font-style: italic; font-size: 24pt; color: green} SPAN {font-weight: bold; font-style: italic}

2-2c. kódrészlet

2.1.2. Globális stíluslap Egy – a 2-2. kódrészlet mintája alapján – összeállított stíluslap többféleképpen is felhasználható a HTML oldalakban. Globális (beépített) stíluslap válhat belıle akkor, ha egy adott HTML dokumentum fejrészében (a elem belsejében) önálló <STYLE> elemként szerepeltetjük. A 2-3. kódrészlet egy globális stíluslapot mutat. A 2-3. ábrán látható, hogy a
tagra elıírt stílusdefiníció a dokumentum összes
tagjára érvényesül. <TITLE>Feladat 2-3 <STYLE> H1 {font-size: 16pt; font-weight: bold; color: red} H2 {font-style: italic; font-size: 24pt; color: green} SPAN {font-weight: bold; font-style: italic} <SPAN>Ilyen lesz minden szöveg, ami SPAN típusú.
Ez lesz a H1-nek megfelelı formátum.

H2 formájú szöveg.

Még egy H1 stílusú sor.

2-3. kódrészlet és ábra

32


2.1.3. Csatolt stíluslap Tipikus dolog, hogy az egységes megjelenés érdekében több weblapunknál is célszerő ugyanazt a stílust használni. Ha az elızıekben bemutatott globális (beépített) technikát használjuk, és minden weblapra bemásoljuk a stíluslapot, akkor ez a késıbbiek folyamán két problémát is okozhat: •

Minden weblaphoz újra és újra le kell tölteni a stílusdefiníciókat, ami felesleges hálózati plusz terhelést jelent.

•

Ha valamelyik tag stílusát meg akarjuk változtatni, akkor a változtatást az összes HTML dokumentumban külön-külön el kell végezni.

Csatolt (külsı) stíluslap használatával mindkét probléma orvosolható. Az összeállított stíluslapot ilyenkor egy külön .css kiterjesztéső állományként tároljuk, és a HTML dokumentumban a taggal hivatkozunk a stílusállományra. A hivatkozáskor a következı attribútumokat kell kitöltenünk: Attribútum neve

Leírás

HREF

A stílusállomány helye. (A fájl megadási lehetıségeket lásd az 1.1.4 fejezetben az tag leírásánál.)

REL

Azt adja meg, hogy a hivatkozás egy stíluslapra vonatkozik. Értéke: STYLESHEET

TYPE

A stíluslapra történı hivatkozás formáját adja meg. Jelenleg az egyetlen lehetséges forma a „text/css”.

2.1.4. Stílus osztályok A CSS technológia lehetıvé teszi stílusosztályok létrehozását egy adott tételen (pl. HTML tagfajtán) belül. Egy adott HTML tagtípushoz ennek megfelelıen számtalan stílusdefiníciót rendelhetünk, melyeket egy-egy adott osztályazonosítóval különítünk el egymástól. A 2-4. kódrészlet globális stíluslapján a szövegformázó HTML taghoz hoztunk létre egy B.nagy és egy B.kicsi nevő alosztályt. A szövegmegjelenítéskor a nyitó tag CLASS attribútumában hivatkozhatunk a stíluslapon definiált osztályra. <TITLE>Feladat 2-4 <STYLE> B.nagy {font-size: 24pt} B.kicsi {font-size: 8pt} Ez az eredeti vastag szöveg
Ez a normálisnál kisebb betőméretet használ.
Ez a normálisnál nagyobb betőméretet használ.


33

2-4. kódrészlet

2-4. ábra

A 2-4. ábrán látható, hogy mindhárom tag a böngészı alapértelmezésének megfelelı vastagsággal jelent meg, hiszen nem adtunk meg explicit módon font-weight attribútumot. A különbség a betőméretben van a három mondat között. A CSS lehetıvé teszi ún. globális osztályok létrehozását is. Egy globális osztály esetén a stílusdefiníció elején nem adunk meg HTML tagtípust, csak osztálynevet. Az adott stílusdefiníció ilyenkor – HTML tagtípustól függetlenül – az összes olyan szövegblokkra vonatkozik, amelynél a nyitó tag tartalmazza az adott osztálynevet. A 2-5. kódrészlet a globális osztályok használatára mutat példát. <TITLE>Feladat 2-5 <STYLE> .nagy {font-size: 24pt} .kicsi {font-size: 8pt} Normál mérető szöveg.
A H2-n belüli "kicsi" osztály.
<SPAN CLASS="nagy">A SPAN-on belüli "nagy" osztály.

A P-n belüli "kicsi" osztály.
A B-n belüli "nagy" osztály.

2-5. kódrészlet

34


2-5. ábra

A CSS dinamikus viselkedésének jó példáját jelentik az elemhez megadható pszeudoosztályok. Az elem által reprezentált hiperhivatkozásnak négy állapota lehet, melyekhez egy-egy pszeudo-osztályként önálló stílust rendelhetünk. Az alábbi táblázat a pszeudoosztályok nevét, leírását és az alapértelmezett megjelenítését mutatja be: Pszeudo-osztály Leírás

Alapértelmezett megjelenítés

link

Még nem látogattunk el az adott címre.

Kék szín, aláhúzás

visited

Már voltunk az adott címen.

Bíborszín, aláhúzás

hover

Az egérrel éppen az adott tagon állunk.


active

Éppen most kattintunk az adott tagra.


A 2-6. kódrészlet a pszeudo-osztályok használatára mutat példát. Apró különbségnek tőnik, de korántsem az, hogy a pszeudo-osztályoknál a kettıspont a szeparátorjel a HTML tag neve és az osztálynév között, míg a normál osztályoknál a pontot használjuk. <TITLE>Feladat 2-6 <STYLE> A:link {text-decoration: none; color:black} A:hover {color: blue; text-decoration: underline}


35

A:visited {color: red} Számalk OKK
Videoüzlet
Gábor Dénes Fıiskola
www.extra.hu

2-6. kódrészlet

2-6. ábra

2.1.5. Stílusok kaszkád alkalmazása A kaszkád stíluslapok (Cascading Style Sheet – CSS) elnevezésbıl eddig nem esett szó a „kaszkád” szó jelentésérıl. A bemutatott stílustechnikát azért nevezik kaszkád technikának, mert egy adott dokumentum megjelenítése több stíluslap együttes hatásának eredménye. Már maga a Web oldal szerzıje is használhatott több stíluslapot, melyek kombinált hatása adja a végsı megjelenési formát. Mindemellett azonban a böngészıprogramban a felhasználó is beállíthat bizonyos stíluselemeket. Böngészıprogramoktól függ, hogy a felhasználói beállítások-e az erısebbek vagy a Web oldal szerzıjének a beállításai. Ha a szerzı nélkülözhetetlennek ítéli valamelyik alkalmazott stíluselemét, akkor az adott attribútum érték mögé helyezett felkiáltójellel és az „important” szóval biztosíthatja az adott stíluselem feltétlen érvényesülését – például: H3 {color: red!important; font-style: italic}

36


2.2. Az XML nyelv Az eXtensible Markup Language az SGML (Standard Generalized Markup Language) részeként jött létre. Olyan általános célú nyelvrıl van szó, aminek legjelentısebb hozománya a platform független adatátadás. A nyelv létrejöttét és viharos térhódítását az segítette elı, hogy az Internetet manapság egyre inkább adatfeldolgozó rendszerek kommunikációjára használják. Az Internetes kommunikáció eredeti eszköze, a HTML nyelv elsısorban statikus szöveges dokumentumok közzétételére lett kitalálva. Az ASP technológia révén adatbázisból származó adatok is belegyúrhatók egy HTML dokumentumba, de összetettebb adatszerkezeteknek az alkalmazások közötti átadására a HTML formátum jórészt alkalmatlan. Az XML nyelv óriási elınye, hogy egyszerő adatoktól kezdve az objektumokon át akár egy komplett adatbázis – szerkezeti sémaleírással együtt – szabványos módon átadható különbözı platformú rendszerek között is.

2.2.1. Az XML nyelv alapjai Az elsı ismerkedéshez nézzünk egy nagyon egyszerő XML dokumentum példát! Matrix <szereplı>Keanu Reeves <szereplı>Laurence Fishburne Csinibaba <szereplı>Gálvölgyi János Tímár Péter

2-7. kódrészlet

A 2-7. kódrészletbıl kiolvasható, hogy a HTML elemekhez hasonlóan az XML elemek is nyitó tagból, záró tagból és a kettı között az elem adattartalmi részébıl állnak. Minden XML dokumentumnak egyetlen egyedi gyökérelembıl kell állnia – a jelen esetben ez a elem. A teljes XML dokumentum – a gyökérelem elıtti prológuskódot leszámítva – tulajdonképpen a nyitó és a záró tag között jelenik meg. A gyökérdokumentum belsejében az egyes XML ágak (node) már tetszılegesen ismétlıdhetnek, de – a HTML elemekhez hasonlóan – két XML ág itt sem fedheti át egymást. A , <szereplı> és ágaknak tehát teljes egészében benne kell lenniük a elem belsejében. A HTML nyelvvel való szintaktikai hasonlóság eléggé kézenfekvı, de lényeges különbségek is vannak. •

A HTML nyelvnél a tagok elnevezése kötött, például
,
tagok használhatók, de vagy nem. Az Internet Explorer a Custom Tag technológiával sokat lazított ezen a szabályon, de ehhez külön névterekre van szükség. Az XML nyelvben ezzel szemben tetszıleges tagneveket használhatunk.

Az XML nyelv •

37

A HTML nyelvnél bizonyos elemek nem igénylik záró tagok használatát. Ilyen például az , a
vagy a
tag, amelyek pusztán attribútumokkal, vagy akár azok nélkül is mőködıképesek. Az XML nyelvnél szigorú kritérium a dokumentum kötött formázása (well-formed document). Ennek megfelelıen minden XML elemnek rendelkeznie kell nyitó és záró taggal is. Olyan esetben, amikor az adott XML ághoz nem tartozik adat, a nyitó és a záró tag összevonható úgy, hogy a perjelet a nyitó tag végére helyezzük. A 2-8. kódrészlet alábbi két sora egyenértékő eredményt ad:

2-8. kódrészlet

•

A dokumentumok kötött formázásához az is hozzátartozik, hogy a nyitó tagban megadott attribútumok értékeit mindig nyitó és csukó idézıjelek között kell megadni – még akkor is, ha nem tartalmaznak speciális szimbólumokat.

•

A HTML nyelvvel ellentétben az XML érzékeny a kisbető-nagybető eltérésekre. Az alábbi példa egy hibás XML dokumentumrészletet mutat: Matrix

2.2.2. XML dokumentum prológusa Minden XML dokumentum fejrészében, az ún. prológusban opcionális utasítások helyezhetık el, melyek az XML verziót, a dokumentum típus definíciót vagy a megjelenítéshez használt stílusdefiníciót azonosítják. A prológust a gyökérelem elé kell helyezni. Példa egy prológusra:

2-9. kódrészlet

A 2-9. kódrészlet elsı sorában az XML jelenlegi verzióját ("1.0"), és UTF-8 kódolást definiáltunk. A második sor a konyv.xsl fájl-t kapcsolja hozzá az adott XML fájl-hoz, hogy a böngészıprogram az adatok megjelenítéséhez ezt a stílusdefiníciót használja. A harmadik sor egy Document Type Declaration (DTD) fájl-t (esetünkben filmek.dtd néven) kapcsol hozzá az XML fájl-hoz. A DTD-leírásnak az a szerepe, hogy az XML fájl felépítésének nyelvtani szabályait foglalja össze. A DTD szintaktikát terjedelmi okokból nem tárgyaljuk, de annyit érdemes tudni róla, hogy a segítségével pontosan elıírhatjuk például az egyes elemekrıl, hogy milyen attribútumokat tartalmazhatnak, és azok közül melyek kötelezık, milyen alágakat építhetünk be a elembe, és ezek közül melyek kötelezık, valamint milyen adattípusú adatokat szerepeltethetünk az egyes elemek belsejében. A DTD fájl révén egyfajta adatszerkezeti rendet definiálhatunk, mely nélkül az XML fájl csupán egy kaotikus zagyvalék lenne. A DTD szintaktika alapvetı hátránya a jelenkorban, hogy nem XML formátumú, és annak idején még a HTML dokumentumokhoz lett kitalálva. Az XML térhódításával egyre nagyobb igény volt arra, hogy a dokumentumok nyelvtani szabályait is XML formátumú dokumentum

38


írja le. Ezt a nyelvtani szabálykönyvet XML sémának nevezzük. A régi és elavultnak tekinthetı DTD helyett érdemesebb az XML séma használatával megismerkednünk. Az XML sémák használata viszont egybenıtt a névterek (namespace) alkalmazásával, ezért elıször a névterekkel kell megismerkednünk.

2.2.3. Névterek (namespece) használata XML dokumentumokban Ha az Olvasó összeveti a 2-8. és a 2-9. kódrészlet tartalmát, akkor észreveheti, hogy elem mindkét helyen szerepelt. Az egyik példában a elem a film címét tárolta, a másik példában viszont a elem egy települést azonosított a nyitó tag attribútumai által. Ha különféle alkalmazások között különféle módon összeépített XML formátumú adatokat akarunk átadni, hogyan tudjuk majd a kétféle elemet egyértelmően megkülönböztetni? A megoldást az XML namespace (névtér) használata jelenti. Ha minden egyes XML dokumentum minden egyes tagjához és attribútumához hozzátoldunk elıtagként (prefixként) egy azonosítót, akkor már egyértelmően megkülönböztethetık az amúgy azonos tagnevek és attribútum nevek is. Ha – a mintapéldánknál maradva – a filmek az "f" névtérben, a települések pedig a "t" névtérben értelmezıdnek, akkor egy összeépített XML adathalmazban az és a tagok már nem tekinthetık egyformának. Tiszta sor, mondhatná bárki, de hogyan lehet egy világmérető XML alapú adatkommunikációs rendszernél megállapodni arról, hogy melyikünk használja az "f" és melyikünk a "t", stb. névtereket? Hogyan juthatok hozzá tehát egy 100%-osan saját, mások által biztosan nem használt névtérhez? A megoldást erre a problémára az URI (Universal Resource Identifier) jelenti. Az URI segítségével bármelyik általunk elıállított XML dokumentum globálisan egyedivé tehetı a világon. Az URI pongyolán szólva nem más, mint egy honlap címe. Álljon itt azonban az URI pontos definíciója a félreértések elkerülése végett. A Universal Resource Identifier egy internetes erıforrást és a kommunikációs protokollt azonosítja. Az URI a következı négy részbıl áll: 1. A kommunikációs protokollt jelentı séma azonosító. Ilyen például a "http". 2. A szerver azonosító. Ez vagy egy DNS host név (pl. www.et.hu) vagy egy TCP/IP cím. 3. Útvonal azonosító. Az adott szerveren a virtuális könyvtárstruktúrán belül található fájl neve. 4. Esetleges paraméterek a kérdıjel karaktert követıen. Példa URI címre: http://www.et.hu/kakukk/alma.aspx?para1=123 Az XML dokumentumban névterek képzéséhez az alapértelmezett deklaráció és az explicit deklaráció használható. Az alapértelmezett deklaráció azt jelenti, hogy egy adott XML elemhez hozzárendelünk egy névteret az xmlns attribútummal, és az összes beágyazott elem ezt a névteret fogja használni. Ha az xmlns attribútumot a gyökérelemhez adjuk meg, akkor a teljes XML dokumentum a megadott alapértelmezett névtérben értelmezendı.

Az XML nyelv

39

Matrix <szereplı>Keanu Reeves <szereplı>Laurence Fishburne

2-10. kódrészlet

Egy XML elemhez nemcsak egyetlen névteret lehet hozzárendelni, de minden további xmlns attribútumhoz kettıspontot követıen meg kell adni egy helyettesítı elıtagot, mellyel az elem belsejében található tagoknál megjelölhetjük, hogy a felsorolt névterek közül melyikhez tartoznak. Matrix <szereplı>Keanu Reeves <szereplı>Laurence Fishburne

2-11. kódrészlet

A 2-11. kódrészletben a elemhez két névteret is hozzárendeltünk, az egyiket alapértelmezettként, a másikat az "ny" elıtaggal megjelöltként. A elem belsejében az összes tag az elsı névteret használja – ideértve a tagot is. Az egyetlen kivétel a "nyelv" attribútuma, melyet az "ny" elıtaggal jelöltünk meg, ezért ez a második névtérhez tartozik.

2.2.4. XML sémák használata A különféle névterek beépítése akkor kezd el izgalmassá válni, ha az adott névtér egy sémaleírásra mutat. Ilyenkor ugyanis lehetıség nyílik arra, hogy egy XML fájl tartalmát érvényességi ellenırzésre alávessük a névtérbeli sémának. Egy ellenırzött és szigorúan formázott XML fájl már nem egy kaotikus adatdzsungelt, hanem egy hierarchikusan felépített adattárat jelent. Egy XML séma gyökéreleme kötelezıen a <schema> elem. Ebben az elemben szerepelnie kell a következı névtérnek: http://www.w3.org/2001/XMLSchema. A targetSchema attribútumban lehet megadni, hogy az elkészült séma milyen névtérben mőködjön. A targetSchema tipikusan az adott sémafájl nevét tartalmazza, és ezt kell majd megnevezni az adatokat tartalmazó XML fájl-ban. Az adatok szerkezeti szabályait leíró séma legfontosabb részei az <element>, az , a <simpleType> és a elemek. Az <element> elem Az <element> segítségével definiálhatunk egy XML elemet. Ez az elem az XML fastruktúra tetszıleges helyén állhat – a gyökérelemtıl kezdve a levél szintjéig. Az <element> nyitó tagjában a két legfontosabb attribútum a name és a type. A name attribútumban adunk nevet az elemnek, míg a type-ban határozzuk meg az adott elem adattípusát.

40


A legegyszerőbb esetben – levélszintő elemeknél – az adattípus egy XML beépített adattípus lehet. A beépített adattípusok primitív vagy származtatott adattípusok lehetnek. •

Néhány példa primitív adattípusra: string, decimal, dateTime, Boolean, anyURI. Ez utóbbi egy tetszıleges abszolút vagy relatív URI azonosítót jelent. Érdemes még megemlíteni a QName típust, ami egy minısített – elıtagból és helyi névbıl álló – nevet jelent.

•

Néhány példa származtatott típusra: integer, positiveInteger, negativeInteger, byte, short, int, long, ID, IDREF, Name.

A beépített adattípusos elemeknél az <element> elem egyetlen kombinált nyitó-csukó tagból állhat. <xs:element name="PartAzon" type="integer"/>

A <simpleType> és a elem Nem levélszintő elemnél, illetve speciális esetekben <simpleType> vagy adattípusokat rendelhetünk hozzá az adott elemhez. A hozzárendelés beágyazásos vagy hivatkozásos technikával végezhetı el: A beágyazásos technikánál a nyitó <element> és a csukó közé helyezzük el a megfelelı <simpleType> vagy elemet. <xs:element name="RendelesTetel" minOccurs="1" maxOccurs="unbounded"> <xs:complexType> <xs:sequence> <xs:element name="Cikkszam" type="xs:string"/> <xs:element name="Mennyiseg"> <xs:simpleType> <xs:restriction base="xs:positiveInteger"> <xs:maxExclusive value="100"/> <xs:element name="EgysegAr" type="xs:decimal"/> <xs:complexType>

2-12. kódrészlet

A 2-12. kódrészlet összeötvözött példát mutat a <simpleType>, és <element> elemekre, de ezeken kívül megjelennek egyéb elemek (, <sequence> és maxExclusive>) is benne. A legfelsı szinten deklarált komplex elem egy rendeléstétel, melyhez a cikkszám, a mennyiség és az egységár tartozik – a <sequence> elem miatt szigorúan ebben a sorrendben. A minOccurs és a maxOccurs attribútumokkal szabhatjuk meg, hogy az adatokat tartalmazó XML fájl-ban legalább egy elemnek szerepelnie kell, melyet tetszıleges számú további rendeléstétel követhet. A rendeléstételen belül a cikkszám szöveges adat ("xs:string" adattípus), az egységár pedig numerikus ("xs:decimal"). Tulajdonképpen a mennyiség is deklarálható lett volna egyszerő <element> tagban pozitív egésznek, ha nem szerettünk volna beépíteni egy olyan korlátot, hogy a rendelt mennyiség nem lehet 99-nél

Az XML nyelv

41

nagyobb. Ezt a korlátot a elemmel lehetett beállítani, de ehhez már az egész elemdeklarációt <simpleType>-ként kellett megformázni. A hivatkozásos technika csak abban különbözik a beágyazottól, hogy a <simpleType>, illetve elemet a legkülsı <schema> elemben önállóan hozzuk létre, és a name attribútum révén nevet adunk a létrehozott adattípusnak. Az így elıállított új adattípus már tetszıleges <element> tag type attribútumában felhasználható. Nézzük meg az elızı példát úgy, hogy a beágyazott <simpleType> elemet kiemeljük a séma szintjére. <xs:simpleType name="KetJegyuSzam"> <xs:restriction base="xs:positiveInteger"> <xs:maxExclusive value="100"/> <xs:element name="RendelesTetel" minOccurs="1" maxOccurs="unbounded"> <xs:complexType> <xs:sequence> <xs:element name="Cikkszam" type="xs:string"/> <xs:element name="Mennyiseg" type="KetJegyuSzam"/> <xs:element name="EgysegAr" type="xs:decimal"/> <xs:complexType>

2-13. kódrészlet

Az elem Ahogy láttuk az XML bevezetıjében, minden nyitó tagban attribútumok és értékek is szerepelhetnek. Természetes, hogy a séma létrehozásakor azt is kikötjük, hogy milyen attribútumokat és milyen értékeket engedünk meg az egyes elemekben. Ha valamelyik elemhez attribútum is társulhat, akkor az elemdeklarációt komplex típusként kell leírnunk, és a elem belsejében sorolhatjuk fel a lehetséges attribútumokat egy-egy elemben. A <sequence> tagon belüli elemfelsorolástól eltérıen az attribútumok sémabeli sorrendje nem szabja meg azt, hogy milyen sorrendben adhatjuk meg az adatokat tartalmazó XML elemben az attribútumokat és a konkrét értékeket. <xs:schema id="Filmek" targetNamespace="aaa" elementFormDefault="qualified" xmlns="http://et/Gyak1/Filmek.xsd" xmlns:mstns="http://et/Gyak1/Filmek.xsd" xmlns:xs="http://www.w3.org/2001/XMLSchema"> <xs:element name="filmek"> <xs:complexType> <xs:sequence minOccurs="0" maxOccurs="unbounded"> <xs:element name="film"> <xs:complexType> <xs:sequence> <xs:element name="cím" type="xs:string" /> <xs:element name="szereplı" type="xs:string" minOccurs="0" maxOccurs="unbounded"/> <xs:element name="rendezı" type="xs:string" minOccurs="0" maxOccurs="1"/> <xs:attribute name="nyelv" type="xs:string" />

42

2-13. kódrészlet


Az elsı cella tartalma	Elsı sor, Második oszlop
2. sor, 1. oszlop	Utolsó cella

Elsı cella	Elsı sor, Második oszlop
2. sor, 1. oszlop	Utolsó cella

Gyümölcs eladás
		1. üzlet	2. üzlet
Alma	1. nap	40	25
Alma	2. nap	30	30
Narancs	1. nap	40	25
Narancs	2. nap	30	30

Táblázatokat használó lap
Feladatok Feladat 2-1 Feladat 2-2 Feladat 2-3 Feladat 2-4	Ez a lap a táblázatok használatát mutatja be. Helyi linkeket tartalmaz baloldalon, külsı linkeket a jobboldalon, a tartalom pedig középen jelenik meg, a fejléc pedig a tetején.	Szervezetek Microsoft Microsoft Press W3C Érdekes site-ok SBN Workshop MSDN WebReference.com WebReview.com

Endrıdi Tamás: Internet alapú alkalmazásfejlesztés c

Recommend Documents

Itt látunk egy elsı szintő fejlécet.

Itt látunk egy második szintő fejlécet.

és a

tagok egy beépített hatszintő hierarchikus címsor elsı két szintjét jelképezik. Mindig az adott böngészıprogram dönti el, hogy az egyes szinteknek milyen betőtípust és fontméretet feleltet meg, de mindig a

a legnagyobb, és a

Ez a 2-es szintő fejléc középre igazított.

Ez az 5-ös fejléc jobbra igazított.

tagra vonatkozik, és azt írja elı, hogy az adott stílusdefiníció hatókörében található összes

tag szövegblokkja 16 pontos vastag betővel és piros színnel jelenjen meg. A második definíció a

tagra a

tagra elıírt stílusdefiníció a dokumentum összes

tagjára érvényesül. <TITLE>Feladat 2-3 <STYLE> H1 {font-size: 16pt; font-weight: bold; color: red} H2 {font-style: italic; font-size: 24pt; color: green} SPAN {font-weight: bold; font-style: italic} <SPAN>Ilyen lesz minden szöveg, ami SPAN típusú.

Ez lesz a H1-nek megfelelı formátum.

H2 formájú szöveg.

Még egy H1 stílusú sor.

A H2-n belüli "kicsi" osztály.