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 tagok 1 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 (</). A nyitó és a záró tagot, valamint az általuk körülzárt szövegblokkot együtt HTML elemnek nevezzük. A HTML nyelvben a HTML elemek egymásba ágyazhatók, de egymást nem lapolhatják át. Ez azt jelenti, hogy mindig a legutolsó nyitó tagot kell elsıként bezárni. 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</TITLE> 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 A HTML nyelv alapjai 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</TITLE> Ez a szöveg <B>vastagon jelenik meg</b>. Ez pedig <I>megdöntve</I>. Ez egy <U>aláhúzott szöveg, </U> ez egy <STRIKE>áthúzott szöveg lesz</strike>. Ez egy <KBD>nem proporcionális, azaz fix széles szöveg</kbd>. Ez a szöveg <SUB>subscript jellegő</sub>. Ez a szöveg pedig <SUP>superscript jellegő</sup>. 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</TITLE>
Alap HTML tagok 5 <FONT COLOR="blue">Színek!</FONT> <FONT SIZE="5">Méret!</FONT> <FONT FACE="Courier">Betőtípus!</FONT> <FONT SIZE="6" COLOR="blue" FACE="Arial">Több változás együtt!</font> 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</TITLE> <P>Ez a sor egy paragrafus példa. <P>Ez pedig egy másik paragrafus.</p> <H1>Itt látunk egy elsı szintő fejlécet.</h1> <H2>Itt látunk egy második szintő fejlécet.</h2> Ez a mondat után nincs soremelés. Ez után viszont <B>van</B>. <BR> 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 <P> 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ó <P> tag hatására bezártnak tekinti az elızı paragrafust.
6 A HTML nyelv alapjai A <H1> és a <H2> 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 <H1> a legnagyobb, és a <H6> a legkisebb betőméret. A <BR> tag a tulajdonképpeni soremelés (break) tag a HTML-ben. Miután a <BR> taghoz nem kapcsolódik szövegblokk, ezért záró </BR> 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</TITLE> <PRE> Amit itt látunk, az egy elıre megformázott szöveg. Vegyük észre, hogy pontosan úgy jelenik meg, ahogy begépeltük. </PRE> <HR> <HR WIDTH="50%" SIZE="6"> 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. <NOBR>Ezt a mondatot viszont semmiképpen nem törheti ketté, még akkor sem, ha nem férne el az ablakban.</nobr> 1-5. kódrészlet
Alap HTML tagok 7 A <PRE> elem alkalmazásakor a nyitó <PRE> tag és a záró </PRE> 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 <NOBR> 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 <HR> 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 <CENTER> 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</TITLE> <P ALIGN="left">Ez a paragrafus balra van igazítva.</p> <H2 ALIGN="center">Ez a 2-es szintő fejléc középre igazított.</h2> <H5 ALIGN="right">Ez az 5-ös fejléc jobbra igazított.</h5> <CENTER>Ez egy sima középre igazított szöveg.</center> 1-6. kódrészlet
8 A HTML nyelv alapjai 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</TITLE> Itt látható egy image (kép): <IMG SRC="sample.gif" WIDTH="20" HEIGHT="36">. <BR><BR> <IMG SRC="sample.gif" WIDTH="20" HEIGHT="36" ALIGN="right"> 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. <BR> Ez itt egy hivatkozás a <A HREF="http://www.szamalk.hu">Számalk OKK</A> honlapjára. <BR> A következı helyi hyperlinkhez kép és szöveg is tartozik. <BR> <A HREF="Feladat 1-4.htm"><IMG SRC="sample.gif"> text</a> <BR> A következı link egy könyvjelzıre mutat egy fájl-on belül. <BR> <A HREF="Egyéb.htm#Könyvjel1">Könyvjelzı</A> 1-7. kódrészlet
Alap HTML tagok 9 Egy kép beillesztéséhez az <IMG> tagot (image tag) kell használni. Miután az <IMG> taghoz nem tartozik szövegblokk, ezért záró </IMG> 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 <A> elem (anchor element) segítségével helyezhetık el egy HTML dokumentumban. A hiperhivatkozás egy nyitó <A> tagból, a képernyıs megjelenítés szövegblokkjából és egy záró </A> tagból áll. A nyitó <A> 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 <A> tagot kell felvenni, és a könyvjelzı nevét az <A> 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 A HTML nyelv alapjai 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 <UL> elemek (unordered list) egymásba ágyazásával valósíthatók meg. Egy adott <UL> elem szövegblokkjában a listaszöveg és a beágyazott <UL> elemek mellett <LI> 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</TITLE> <UL>Ez az elsı szint. <UL>Ez a második szint.</ul> <UL>Ez a második szint. <UL> Ez a harmadik szint.</ul> </UL> <UL>Ez a második szint.</ul> </UL>
Alap HTML tagok 11 <HR> <UL>Ez egy elsı szintő fejléc. <LI>Ez az elsı elem az elsı listában. <LI>Ez a második elem az elsı listában. <UL> <LI>Ez az elsı elem a második listában. <LI>és ez a második elem a második listában. </UL> <LI>Ez a harmadik elem az elsı listában. </UL> 1-8. kódrészlet 1-8. ábra A sorszámozott lista az <OL> 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</TITLE> <OL> <LI>Ez az elsı elem az elsı listában. <LI>Ez a második elem az elsı listában. <OL TYPE="a"> <LI>Ez az elsı elem a második szinten.
12 A HTML nyelv alapjai <LI>És ez a második elem a második szinten. </OL> <LI>Ez a harmadik elem az elsı listában. </OL> 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 <TABLE> nyitó tag és a </TABLE> záró tag között meghatározott adatokból áll. A tábla egészére érvényes attribútumokat a nyitó <TABLE> 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 <TR> elem (table row) segítségével definiáljuk. Minden táblasor elem egy nyitó <TR> tagból, a táblasor tartalmából, és egy záró </TR> tagból áll. A nyitó és a záró <TR> tag között kell az adott táblasor egyes celláit meghatározni. Minden egyes cellát egy-egy <TD> elemként (table data) kell megadni. A cellaelem a táblasor elemhez hasonlóan egy nyitó <TD> tagból, a cella adatból és egy záró </TD> 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</TITLE> <TABLE BORDER="1"> <TR> <TD>Az elsı cella tartalma</td>
HTML táblák és keretek 13 <TD>Elsı sor, Második oszlop</td> </TR> <TR> <TD>2. sor, 1. oszlop</td> <TD>Utolsó cella</td> </TR> </TABLE> 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</TITLE> <TABLE BORDER="5" CELLPADDING="2" CELLSPACING="15" BGCOLOR="yellow"> <TR> <TD>Elsı cella</td> <TD>Elsı sor, Második oszlop</td> </TR> <TR> <TD BGCOLOR="white">2. sor, 1. oszlop</td> <TD BACKGROUND="back.gif">Utolsó cella</td> </TR> </TABLE> <HR> <TABLE BORDER="10" CELLPADDING="15" CELLSPACING="2" BACKGROUND="back.gif"> <TR> <TD>Elsı cella</td> <TD>Második cella</td> </TR> <TR> <TD BGCOLOR="white">Harmadik cella</td> <TD>Negyedik cella</td> </TR> </TABLE> 1-11. kódrészlet
14 A HTML nyelv alapjai A 1-11. kódrészlet két táblát jelenít meg egymás alatt. A <TABLE> 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</TITLE> <TABLE BORDER="1"> <TR> <TD COLSPAN="4" ALIGN="center"><B>Gyümölcs eladás</b></td>
HTML táblák és keretek 15 </TR> <TR> <TD></TD> <TD></TD> <TD>1. üzlet</td> <TD>2. üzlet</td> </TR> <TR> <TD ROWSPAN="2">Alma</TD> <TD>1. nap</td><td>40</td><td>25</td> </TR> <TR> <TD>2. nap</td><td>30</td><td>30</td> </TR> <TR> <TD ROWSPAN="2">Narancs</TD> <TD>1. nap</td><td>40</td><td>25</td> </TR> <TR> <TD>2. nap</td><td>30</td><td>30</td> </TR> </TABLE> 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</TITLE>
16 A HTML nyelv alapjai <TABLE BORDER="1" CELLPADDING="5"> <TR> <TD VALIGN="top">1</TD> <TD> <TABLE BORDER="2"> <TR><TD>A</TD><TD>B</TD></TR> <TR><TD>C</TD><TD>D</TD></TR> </TABLE> </TD> </TR> <TR> <TD> <TABLE BORDER="5"> <TR><TD>E</TD><TD>F</TD></TR> <TR><TD>G</TD><TD>H</TD></TR> </TABLE> </TD> <TD VALIGN="bottom" ALIGN="right">2</TD> </TR> </TABLE> 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.
HTML táblák és keretek 17 <TITLE>Feladat 1-14</TITLE> <BODY TOPMARGIN="0" LEFTMARGIN="0"> <TABLE WIDTH="100%" HEIGHT="100%" CELLSPACING="0" CELLPADDING="5" BORDER="0"> <TR> <TD COLSPAN="3" ALIGN="CENTER" BGCOLOR="black" HEIGHT="25"> <FONT COLOR="white"><B>Táblázatokat használó lap</b></font> </TD> </TR> <TR> <TD BGCOLOR="thistle" WIDTH="80" VALIGN="top"> <IMG SRC="trans.gif" WIDTH="80" HEIGHT="0" BORDER="0"><BR> <B>Feladatok</B><BR> <A HREF="Feladat 2-1.htm">Feladat 2-1</A><BR> <A HREF="Feladat 2-2.htm">Feladat 2-2</A><BR> <A HREF="Feladat 2-3.htm">Feladat 2-3</A><BR> <A HREF="Feladat 2-4.htm">Feladat 2-4</A><BR> </TD> <TD ALIGN="center"> <IMG SRC="trans.gif" WIDTH="150" HEIGHT="0" BORDER="0"><BR> Ez a lap a táblázatok használatát mutatja be.<br> Helyi linkeket tartalmaz baloldalon, külsı linkeket a jobboldalon, a tartalom pedig középen jelenik meg, a fejléc pedig a tetején. </TD> <TD VALIGN="top" WIDTH="25%" BGCOLOR="lightgrey"> <IMG SRC="trans.gif" WIDTH="120" HEIGHT="1" BORDER="0"><BR> <B>Szervezetek</B><BR> <A HREF="http://www.microsoft.com">Microsoft</A><BR> <A HREF="http://mspress.microsoft.com">Microsoft Press</A><BR> <A HREF="http://www.w3.org">W3C</A><BR> <BR> <B>Érdekes site-ok</b><br> <A HREF="http://microsoft.com/Workshop">SBN Workshop</A><BR> <A HREF="http://msdn.microsoft.com/">MSDN</A><BR> <A HREF="http://www.webreference.com">WebReference.com</A><BR> <A HREF="http://www.webreview.com">WebReview.com</A><BR> </TD> </TR> </TABLE> 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 A HTML nyelv alapjai 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 <FRAMESET> elemet tartalmaz. Az 1-15. kódrészlet egy egyszerő, három keretbıl álló frameset dokumentumot tartalmaz. <TITLE>Feladat 1-15</TITLE> <FRAMESET COLS="50%,70,*"> <FRAME SRC="Elsı.htm"> <FRAME SRC="Második.htm"> <FRAME SRC="Harmadik.htm"> </FRAMESET> 1-15. kódrészlet A <FRAMESET> 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.
HTML táblák és keretek 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. <BODY BGCOLOR="blue"> Ez a harmadik keret. <BR> <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</TITLE> <FRAMESET ROWS="50,*" FRAMEBORDER="0" FRAMESPACING="0"> <FRAME SRC="Elsı.htm" NAME="frame1" SCROLLING="no"> <FRAMESET COLS="20%,80%" FRAMEBORDER="1" FRAMESPACING="1"> <FRAME SRC="Második.htm" NAME="frame2" SCROLLING="yes"> <FRAME SRC="Harmadik.htm" NAME="frame3" SCROLLING="auto"> </FRAMESET> </FRAMESET>
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</TITLE> <FRAMESET COLS="25%,75%" FRAMEBORDER="1" FRAMESPACING="1">
További HTML elemek 21 <FRAME SRC="Navigál.htm" NAME="NavFrame" SCROLLING="yes"> <FRAME SRC="Elsı.htm" NAME="ContentFrame" SCROLLING="auto"> </FRAMESET> <!--- Ez a Navigál.htm fájl tartalma --> <A HREF="Elsı.htm" TARGET="ContentFrame">Elsı keret</a><br> <A HREF="Második.htm" TARGET="ContentFrame">Második keret</a><br> <A HREF="Harmadik.htm" TARGET="ContentFrame">Harmadik keret</a><br> 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 <!--nyitó és 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 <COMMENT> nyitó és a </COMMENT> záró tag közötti szövegblokk. 4 <!-- Szerzı: Endrıdi Tamás Cél: Mintapélda az Internetes programozás könyvhöz Fejezet: 1. --> <TITLE>Feladat 1-18</TITLE> <!-- Egysoros megjegyzést is elhelyezhetünk --> Ez a szöveg ténylegesen megjelenik a böngészıben. <COMMENT> Ez a rész nem fog megjelenni a böngészıben </COMMENT> 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 <FIELDSET> nyitó tag és a </FIELDSET> 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. <LEGEND> 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 23 <TITLE>Feladat 1-19</TITLE> <FIELDSET> Ebben a fieldset-ben nincs LEGEND. </FIELDSET> 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. <FIELDSET TITLE="Ez egy Fieldset"> <LEGEND>2. Fieldset</LEGEND> Ez a 2. fieldset belsejében van. </FIELDSET> 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. <FIELDSET ALIGN="right" STYLE="width:140"> <LEGEND>3. Fieldset</LEGEND> Ez a harmadik Fieldset-ben van. </FIELDSET> Ez a szöveg az 3. fieldset után jön. Ez a szöveg az 3. fieldset után jön. Ez a szöveg az 3. fieldset után jön. <FIELDSET> <LEGEND ALIGN="center">4. Fieldset</LEGEND> Ez a szöveg a negyedik fieldset-ben található. </FIELDSET> Ez a szöveg az 4. fieldset után jön. Ez a szöveg az 4. fieldset után jön. Ez a szöveg az 4. fieldset után jön. 1-19. kódrészlet Az 1-19. kódrészlet eredménye az 1-19. ábrán látható:
24 A HTML nyelv alapjai 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 (<IMG> elem) bizonyos részei önálló hiperhivatkozásként funkcionáljanak. Az 1-7. kódrészletben láttuk, hogy az <A> elem belsejében elhelyezett <IMG> 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 <AREA> 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</TITLE> <IMG SRC="nav.gif" WIDTH="300" HEIGHT="200" USEMAP="#NavMap"> <MAP NAME="NavMap"> <AREA SHAPE="rect" COORDS="0,0,50,100" HREF="http://www.microsoft.com"> <AREA SHAPE="circ" COORDS="100,150,20" HREF="http://www.w3c.org"> <AREA SHAPE="poly" COORDS="200,50,250,50,250,100,200,150,150,100" HREF="http://mspress.microsoft.com"> </MAP> <BR> <A HREF="http://www.microsoft.com">Microsoft</A> <A HREF="http://www.w3c.org">W3C</A>
További HTML elemek 25 <A HREF="http://mspress.microsoft.com">Microsoft Press</A> 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 A HTML nyelv alapjai 1.3.4. A SPAN és a DIV elem A <SPAN> és a <DIV> 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 <DIV> 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</TITLE> Az itt látható <SPAN STYLE="font:bold 14pt">szöveg</SPAN> egy SPAN-ben van. <HR> Ez itt pedig <DIV STYLE="font:bold 14pt">egy DIV</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 <PRE> 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.
További HTML elemek 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 </XMP> 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</TITLE> <P> Ez a paragrafus <B>vastag</B>, <I>dılt betős</i>, és <U>aláhúzott</U> tagokat tartalmaz. </P> <XMP> <P> Ez a paragrafus <B>vastag</B>, <I>dılt betős</i>, és <U>aláhúzott</U> tagokat tartalmaz. </P> </XMP> </HTML 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 A HTML nyelv alapjai 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</TITLE> Vastag betőkkel kiírjuk, hogy az X kisebb, mint az Y: <B> X<Y </B>. Ez a paragrafus karakter egyedet használ. <HR> Vastag betőkkel kiírjuk, hogy az X kisebb, mint az Y: <B> X<Y </B>. 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</TITLE> <SPAN STYLE="font-weight: bold"> Ez a szöveg egy SPAN-ben van.</span><br> 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 <H1> tagra vonatkozik, és azt írja elı, hogy az adott stílusdefiníció hatókörében található összes <H1> tag szövegblokkja 16 pontos vastag betővel és piros színnel jelenjen meg. A második definíció a <H2> 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 <H3> tagra a <H2>-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
Bevezetés a CSS technológiába 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 <H1> tagra elıírt stílusdefiníció a dokumentum összes <H1> tagjára érvényesül. <TITLE>Feladat 2-3</TITLE> <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} </STYLE> <SPAN>Ilyen lesz minden szöveg, ami SPAN típusú.</span> <H1>Ez lesz a H1-nek megfelelı formátum.</h1> <H2>H2 formájú szöveg.</h2> <H1>Még egy H1 stílusú sor.</h1> 2-3. kódrészlet és ábra
32 A tartalom, a stílus és az adatok szétválasztása 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 <LINK> 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 <IMG> tag leírásánál.) REL TYPE Azt adja meg, hogy a hivatkozás egy stíluslapra vonatkozik. Értéke: STYLESHEET 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 <B> szövegformázó HTML taghoz hoztunk létre egy B.nagy és egy B.kicsi nevő alosztályt. A szövegmegjelenítéskor a <B> nyitó tag CLASS attribútumában hivatkozhatunk a stíluslapon definiált osztályra. <TITLE>Feladat 2-4</TITLE> <STYLE> B.nagy {font-size: 24pt} B.kicsi {font-size: 8pt} </STYLE> <B>Ez az eredeti vastag szöveg</b> <BR> <B CLASS="kicsi">Ez a normálisnál kisebb betőméretet használ.</b> <BR> <B CLASS="nagy">Ez a normálisnál nagyobb betőméretet használ.</b>
Bevezetés a CSS technológiába 33 </HTML 2-4. kódrészlet 2-4. ábra A 2-4. ábrán látható, hogy mindhárom <B> 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</TITLE> <STYLE>.nagy {font-size: 24pt}.kicsi {font-size: 8pt} </STYLE> Normál mérető szöveg. <H2 CLASS="kicsi">A H2-n belüli "kicsi" osztály.</h2> <SPAN CLASS="nagy">A SPAN-on belüli "nagy" osztály.</span><br> <P CLASS="kicsi">A P-n belüli "kicsi" osztály.</p> <B CLASS="nagy">A B-n belüli "nagy" osztály.</b><br> 2-5. kódrészlet
34 A tartalom, a stílus és az adatok szétválasztása 2-5. ábra A CSS dinamikus viselkedésének jó példáját jelentik az <A> elemhez megadható pszeudoosztályok. Az <A> 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 active Az egérrel éppen az adott tagon állunk. Éppen most kattintunk az adott tagra. Kék szín, aláhúzás Kék szín, aláhúzás 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</TITLE> <STYLE> A:link {text-decoration: none; color:black} A:hover {color: blue; text-decoration: underline}
Bevezetés a CSS technológiába 35 A:visited {color: red} </STYLE> <A HREF="http://www.szamalk.hu">Számalk OKK</A><BR> <A HREF="http://www.videopart.hu">Videoüzlet</A><BR> <A HREF="http://www.gdf.hu">Gábor Dénes Fıiskola</A><BR> <A HREF="http://www.extra.hu">www.extra.hu</A><BR> 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 A tartalom, a stílus és az adatok szétválasztása 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! <filmek> <film nyelv="angol"> <cím>matrix</cím> <szereplı>keanu Reeves</szereplı> <szereplı>laurence Fishburne</szereplı> </film> <film nyelv="magyar"> <cím>csinibaba</cím> <szereplı>gálvölgyi János</szereplı> <rendezı>tímár Péter</rendezı> </film> </filmek> 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 <filmek> elem. A teljes XML dokumentum a gyökérelem elıtti prológuskódot leszámítva tulajdonképpen a <filmek> nyitó és a </filmek> 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 <cím>, <szereplı> és <rendezı> ágaknak tehát teljes egészében benne kell lenniük a <film> 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 <P>, <H1> tagok használhatók, de <P1> vagy <H> 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 <IMG>, a <BR> vagy a <P> 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: <cím irsz="5600" település="szolnok"></cím> <cím irsz="5600" település="szolnok"/> 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: <film>matrix</film> 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: <?xml version="1.0" encoding="utf-8"?> <?xml-stylesheet type="text/xsl" href="konyv.xsl"?> <!DOCTYPE filmek SYSTEM "filmek.dtd"> 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 <film> elemekrıl, hogy milyen attribútumokat tartalmazhatnak, és azok közül melyek kötelezık, milyen alágakat építhetünk be a <film> 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 A tartalom, a stílus és az adatok szétválasztása í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 <cím> elem mindkét helyen szerepelt. Az egyik példában a <cím> elem a film címét tárolta, a másik példában viszont a <cím> 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 <cím> 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 <f:cím> és a <t:cím> 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ı.