Dokumentumleíró nyelvek e-book Dinya Elek, Tóth Tamás

Méret: px
Mutatás kezdődik a ... oldaltól:

Download "Dokumentumleíró nyelvek e-book Dinya Elek, Tóth Tamás"

Átírás

1 TÁMOP-4.1.2/A/1-11/ Egészségügyi Ügyvitelszervező Szakirány: Tartalomfejlesztés és Elektronikus Tananyagfejlesztés a BSc képzés keretében Dokumentumleíró nyelvek e-book Dinya Elek, Tóth Tamás

2 Tartalomjegyzék 1 Előszó Szöveges adatok reprezentációja Karakterkódolások Karakterek digitális tárolása Gyakori karakterkódolások Szöveges adatformátumok Fix szélességű fájlok Tagolt szöveges fájlok Jelölőnyelvek A szöveges adatformátumok összehasonlítása MIME típusok Az XML XML alapelvek Az XML nyelvi elemei XML deklaráció Elemek Attribútumok Entitások Megjegyzések CDATA Dokumentum-típus deklaráció A HTML HTML alapelvek A HTML verziói Az (X)HTML elemkészlete (X)HTML deklaráció Head és body

3 4.3.3 Bekezdések és szövegformázás Címsorok Listák Linkek Képek Táblázatok Csoportosító elemek További elemek A CSS CSS alapok CSS selectorok CSS mértékegységek A CSS elemkészlete Szövegformázás Hátterek Linkek Listák A doboz modell Táblázatok Megjelenítés Pozicionálás Egyéb elemek Az XML és a CSS Dokumentumok validálása A DTD DTD alapelvek Elem típusok Attribútum listák Entitás definíciók

4 6.1.5 XML fájl validálása HTML validálása CSS validálása Dinamikus HTML oldalak Statikus vs. dinamikus HTML Szerver-oldali szkript nyelvek A PHP használata Telepítés Alapszintaxis Változók és adattípusok Operátorok Elágazások Ciklusok Függvények Alapvető számítási és string műveletek PHP-ban Példa: matematikai műveletek Példa: szöveges fájl beolvasása és feldolgozása Példa: műveletek tömbökkel Összefoglalás Rövidítések jegyzéke

5 Ábrajegyzék 1. ábra: A 0x3282A3BD hexidecimális érték big-endian (a) és little-endian (b) bájtsorrend használata esetében ábra: Példa adatbázisra: gyógyszerek ábra: Gyógyszeradatbázis fix szélességű fájlként ábra: Gyógyszeradatbázis CSV fájlként ábra: CSV fájl többsoros rekorddal ábra: Jelölőnyelvek evolúciója ábra: Gyógyszeradatbázis XML fájlként ábra: Többrésze (multipart) MIME üzenet ábra: Talpas betűk (felül, Times New Roman) és talpatlan betűk (alul, Verdana) ábra: A background-repat tulajdonság lehetséges értékei: repeat (balra fent), repeat-x (jobbra fent), repeat-y (balra lent), no-repeat (jobbra lent) ábra: A background-position tulajdonság lehetséges értékei: left center (balra), right bottom (jobbra) ábra: A doboz modell ábra: Keret stílusok ábra: z-index használata ábra: A float stílus használata ábra Példa hibaüzenetre hibás XML megnyitásakor (Firefox böngésző) ábra: A HTML validátor kezdőoldala ábra: A HTML validátor kimenete hibás dokumentum esetében ábra: A HTML validátor kimenete valid dokumentum esetében ábra: A CSS validátor kezdőoldala ábra: A CSS validátor kimenete ábra Ciklusok folyamatábrája

6 Táblázatok jegyzéke 1. táblázat: Az ISO-8859 szabvány néhány eleme táblázat: UTF-8 karakterkódok bináris ábrázolása táblázat: Szöveges adatformátumok összehasonlítása táblázat: Gyakran használt MIME típusok táblázat: Speciális karaktereket helyettesítő entitások táblázat: Target attribútum értékei táblázat: Szerver-oldali szkript nyelvek összehasonlítása táblázat: PHP speciális karakterek táblázat: A PHP operátorai táblázat: Ciklus típusok

7 Előszó 1 Előszó Az emberi tudás, illetve a napi munkához és a mindennapi élethez szükséges adatok jelentős része ma már digitális formában áll rendelkezésre. Egyre kevesebben lapozzák fel a lexikonokat, könyveket, ha valamire kíváncsiak, és a szervezetek köztük a kórházak, egészségügyi intézmények működése során keletkező adatokat is számítógépes programok segítségével rögzítik. Ezen adatok, információk jelentős része szöveges dokumentumok formájában áll rendelkezésre. Jelen könyv az ezen szöveges dokumentumok készítéséhez, tárolásához, feldolgozásához szükséges szabványokat, technológiákat mutatja be. A 2. fejezetből megtudhatod, hogyan tárolják a számítógépek a szöveges információkat, és miért látsz a böngésződben néha furcsa karaktereket. Továbbá bemutatunk néhány elterjedt adatformátumot, mint a CSV vagy az XML. Utóbbival részletesen is foglalkozunk a 3. fejezetben. Az utóbbi években egyre szélesebb körben terjed az Internet használata, egyre több eszköz segítségével elérhetjük a tartalmakat. A hagyományos szoftverek egy részét is felváltották a különféle webes, böngészőben futó alkalmazások, például akár szöveget szerkeszthetünk vagy prezentációt készíthetünk a segítségükkel. Mind a megszokott weboldalak, mind az újfajta webes szolgáltatások ugyanazokra az alapokra épülnek: a HTML-re, amely az oldalak szerkezetét és tartalmát írja le és a CSS-re, amelynek segítségével a megjelenésüket szabályozhatjuk. Ezen szabványok legfontosabb elemeit ismerheted meg a 4. és az 5. fejezetben, ezáltal Te is képessé válsz egyszerű, statikus weboldalak elkészítésére. Célszerű a tökéletességre, azaz a szabványoknak megfelelő weboldalak készítésére törekedni. Ebben nyújtanak segítséget a különböző validátor eszközök, amelyekről a 6. fejezetben olvashatsz. 7

8 Előszó Összetettebb weboldalak, webes alkalmazások készítéséhez azonban további eszközökre, technológiákra is szükség van. Ilyenek például a szerver-oldali szkript nyelvek, amelyek alapjaival a PHP példáján keresztül a 7. fejezetben ismerkedhetsz meg. A keretes részekben megjegyzéseket, érdekességeket, kiegészítő információkat olvashatsz. 8

9 Szöveges adatok reprezentációja 2 Szöveges adatok reprezentációja 2.1 Karakterkódolások Karakterek digitális tárolása A számítógépek minden digitálisan, azaz egyesek és nullák sorozataként tárolnak. Az emberi kommunikációban azonban ennél jóval összetettebb szimbólumkészletet (betűket, számokat, írásjeleket és egyéb karaktereket) használunk. Ezért az ábécé betűihez (bináris) számokat kell rendelni. Ebben a fejezetben ezzel, azaz a karakterkódolásokkal foglalkozunk. Karakterkódolások már a számítógépek kora előtt is léteztek, gondoljunk csak a Morze-kódra, amely a betűket és számokat rövid és hosszú jelek sorozatává alakította. A számítógépes karakterkódolás is ugyanerre a sémára épül, csak itt nullákat és egyeseket (azaz biteket) használunk. A korai karakterkódolások 7, ill. később 8 bites karakterekkel dolgoztak, azaz egy karaktert ennyi biten tároltak. A kettes számrendszerbeli bitsorozat tízes számrendszerbeli ábrázolását az adott karakter kódjának is szokás nevezni. Például a bináris szám a 27-es decimális számnak felel meg. Ennek megfelelően a 7 bites kódolás 0-tól 127-ig, a 8 bites kódolás 255-ig terjedő számértékeket képes tárolni. 9

10 Szöveges adatok reprezentációja Könnyen belátható, hogy még a 256 karakter sem elegendő az összes ábécé összes betűjének tárolására, nem beszélve az egyéb speciális jelekről. Ez a probléma vezetett a Unicode szabvány kidolgozásához, amely a különböző írásrendszerek egységes kódolását és használatát szabályozza. A Unicode szabvány minden karakterhez meghatároz egy pozitív egész számot. Az elvi felső határ 2 31, azaz több mint 2 milliárd. A becslések szerint már ennek a tizedrésze is elegendő az összes létező és valaha létezett írásjel ábrázolására. A számítástechnika alapegysége, a bájt 8 bitből áll, azaz a 7 és 8 bites karakterkódolások esetén egy karakter egy bájton ábrázolható. Az ennél hosszabb kódok esetében már karakterenként több bájt szükséges. A legmagasabb számú Unicode karakterek csak 4 bájton férnek el. Ha minden karaktert 4 bájton ábrázolunk, akkor egy egymillió karaktert tartalmazó szövegfájl 4MB helyet foglal, szemben az 1 bájtos kódolások 1MB-jával. A magasabb kódú Unicode karakterek azonban ritkán használatosak, mivel ezek különféle egzotikus nyelvek betűit tartalmazzák. Az Európában általánosan használt ábécék betűi a Unicode kódtábla alsó részén találhatók. Ezért dolgozták ki a változó hosszúságú karakterkódolásokat, amelyek az alacsonyabb Unicode kódú karaktereket egy bájton, a magasabb kódú karaktereket kettő vagy még több bájton ábrázolják. A több bájtos karakterkódolások kapcsán érdemes még megemlíteni a bájtsorrend, vagyis angolul endianness fogalmát. Ez azt jelöli, hogy egy több bájtos adatszekvencia elemei milyen sorrendben kerülnek tárolásra vagy továbbításra. Big endian bájtsorrend esetében a legnagyobb helyiértékű bájt kerül az első helyre (legalacsonyabb címre). A little endian bájtsorrend ennek ellentéte, azaz a legkisebb helyiértékű bájt kerül az első helyre. 10

11 Szöveges adatok reprezentációja Az endianness kifejezés Jonathan Swift Gulliver utazásai c. regényéből származik, melyben a lilliputiak két pártja között háború dúl: az egyik fél szerint a lágy tojást a nagyobb végén (big endian), a másik szerint a kisebbik végén (little endian) kell feltörni A3 BD a) Big-endian tárolás BD A b) Little-endian tárolás 1. ábra: A 0x3282A3BD hexidecimális érték big-endian (a) és little-endian (b) bájtsorrend használata esetében A bájtsorrend nem csak a számítástechnikában van jelen, hanem a mindennapi életben is, még ha ezt nem is tudatosítjuk. Gondoljunk csak például a dátumokra: a hagyományos magyar dátumozás big endian, azaz év, hónap, nap sorrendet használ. Az angol nap, hónap, év formátum little endian kódolásnak felel meg. Ugyanígy a számoknál big endian sorrendet használunk, ha például azt mondjuk, hogy négyezerhatszázhuszonnyolc. A német nyelv 21 és 99 között little endian sorrendet használ: vierundsiebzig, azaz négy és hetven (74). 11

12 Szöveges adatok reprezentációja Gyakori karakterkódolások A legrégebbi, széles körben elterjedt karakterkódolás az ASCII volt. Ezt az 1960-as években dolgozták ki, telex gépeken való felhasználás céljára. Az ASCII 7 biten kódolja a karaktereket, a bájt 8. bitjét paritásbitnek használták. A 7 bites tárolás 128 karakter (0-127) kódolását tette lehetővé. A 0-tól 31-ig terjedő kódok, valamint a 127 speciális vezérlőkaraktereket kódolnak, amelyek eredetileg a telex működéséhez kapcsolódtak. A többi karakter kódolja az angol ábécé kis- és nagybetűit, a számokat valamint az írásjeleket. Az ASCII kódolás nem teszi lehetővé az egyes nyelvek ábécéiben szereplő speciális szimbólumok, mint például a magyar ékezetes karakterek vagy a német ß ábrázolását. Ezért dolgozták ki az ISO-8859 szabványcsaládot, amely lényegében az ASCII kódolás kibővítése a 8. bit kihasználásával. A szabványnak számos része van, néhány fontosabbat az alábbi táblázat sorol fel. A magyar nyelv ékezetes betűinek helyes megjelenítéséhez az ISO es, azaz Latin2 kódolást kell használni. A betűk egy részét a Latin1 kódolás is tartalmazza, de az ő és ű betűk hiányoznak, az ű helyén például az û ( kalapos ű ) szimbólum szerepel. Hivatalos név Nem hivatalos/rövid név Tartalom ISO Latin1, nyugat-európai A legtöbb nyugat-európai nyelv betűit tartalmazza ISO Latin2, közép-európai A latin betűket használó közép- és keleteurópai nyelvek szimbólumait tartalmazza ISO Cirill A cirill ábécét használó európai nyelvek többségét lefedi 12

13 Szöveges adatok reprezentációja ISO Görög Görög betűket tartalmaz 1. táblázat: Az ISO-8859 szabvány néhány eleme Létezik még számos egyéb, többé-kevésbé elterjedt karakterkódolás, mint például a Windows-1250, amely a kelet- és közép-európai ábécéket tartalmazza, azaz nagyrészt megegyezik az ISO vel. A Unicode szabvány által definiált karakterek kódolására többféle szabvány is létezik. A legelterjedtebb az UTF-8, amely változó hosszúságú kódokat használ. Az ASCII karakterek kódolására egy bájtot használ, amely megegyezik az ASCII kódokkal. Ezek bináris reprezentációja 0-val kezdődik. A több bájtos kódok első eleme mindig 11xxxxxx, ahol a kezdő egyesek száma megegyezik a kód hosszával. A sorozat későbbi bájtjai mindig 10xxxxxx formátumúak. Az UTF-8 akár 6 bájtos karaktereket is kódolhat. 1. bájt 2. bájt 3. bájt 4. bájt 5. bájt 6. bájt 1 bájtos 0xxxxxxx 2 bájtos 110xxxxx 10xxxxxx 3 bájtos 1110xxxx 10xxxxxx 10xxxxxx 4 bájtos 11110xxx 10xxxxxx 10xxxxxx 10xxxxxx 5 bájtos xx 10xxxxxx 10xxxxxx 10xxxxxx 10xxxxxx 6 bájtos x 10xxxxxx 10xxxxxx 10xxxxxx 10xxxxxx 10xxxxxx 2. táblázat: UTF-8 karakterkódok bináris ábrázolása 13

14 Szöveges adatok reprezentációja Egyes Windowsos programok úgy jelzik, hogy egy fájl UTF-8 kódolású, hogy a fájl elejére egy 0xEF, 0xBB, 0xBF bájtsorozatot írnak. Ez a bájtsorozat a bájtsorrend-jel (angolul byte order mark, BOM) Unicode karakter kódja. Ezt a karaktert az UTF-16 használja, amely fix 2 bájton kódolja a Unicode karaktereket, ezért felmerül a bájtsorrend (endianness) problémája. A BOM karakter fordítottja ugyanis érvénytelen UTF-16 kód, vagyis ezzel jelezhető a bájtsorrend. UTF-8 esetében ennek a karakternek nincs jelentése, ezért használható a kódolás jelzésére. Azonban nem minden program ismeri fel, ezért ezek megpróbálják karakterekként értelmezni. Az eredmény a fájl elején megjelenő ï» karaktersorozat. Nagyon fontos, hogy egy rendszer fejlesztése során mindenhol a megfelelő karakterkódolásokat alkalmazzuk. Ez azt jelenti, hogy mind az adatbázis kezelő rendszerben, mind a forrásfájlokban, mind a HTML kódban konzisztensen kell használni a karakterkódolásokat, ellenkező esetben hibás karakterek jelenhetnek meg. Ha például UTF-8 kódolású szöveget ISO-8859-es kódolásúként próbálunk értelmezni, akkor ilyesmi eredményt kapunk: Hibás kăłdolăˇs. (Tovább bonyolítja a helyzetet, ha különleges betűtípusokat azaz fontokat szeretnénk használni, mivel ezek nem mindegyike tartalmazza az összes szükséges karaktert. Vagyis lehetséges, hogy a kódolás megfelelő, csak épp a használt betűtípussal nem jelenik meg jól). Ma már általánosan elterjedt az UTF-8 kódolás használata, mivel ez lehetővé teszi az összes szóba jöhető karakter eltárolását. A legtöbb modern szoftvereszköz támogatja ennek használatát. A karakterkódolás megfelelőségének ellenőrzésére gyakran használják az ún. pangrammákat, amelyek olyan mondatok, amelyek egy adott nyelv összes betűjét tartalmazzák. Ilyen angolul például a The quick brown fox jumps over the lazy dog. ( A fürge barna róka átugrik a lusta kutyán. ) mondat. A magyar nyelv esetében az 14

15 Szöveges adatok reprezentációja összes ékezetes betűt tartalmazó mondatok vagy kifejezések lehetnek érdekesek, mint pl. a leggyakrabban használt Árvíztűrő tükörfúrógép. Ha beírjuk ezt a mondatot, akkor ellenőrizhetjük, hogy minden karakter megfelelően jelenik-e meg a használt kódolással (vagy betűtípussal). Hasonló kifejezések még például: - Gyümölcsvédő ágyúfűnyíró - Háztűznézőügynök-búsító - Nyúlfülvágó térközsűrítő - Úszójárműkürt-vészöblítő - Zártkörű nőújító ülés 2.2 Szöveges adatformátumok Számos programnak van szüksége strukturált adatokra a megfelelő működéséhez. Ilyenek például egy egészségügyi rendszerben a betegek személyes adatai, az elvégzett vizsgálatok, az rendelkezésre álló gyógyszerek és még sok más. Ezek az adatok tárolhatók többek között adatbázis-kezelő rendszerekben vagy egyszerű szöveges fájlokban. Ebben a fejezetben utóbbival ismerkedhetsz meg. A következő alfejezetek a strukturált szöveges fájlok három alaptípusát mutatják be: a fix szélességű fájlokat, a tagolt szöveges fájlokat és a jelölőnyelveket. A szövegszerkesztéshez használt fájlformátunmok, mint például a DOC vagy ODT, illetve a PDF nem csak a szöveges információkat, hanem a formázási utasításokat is tárolják, hiszen ezen formátumok célja, hogy egy elkészített dokumentum más 15

16 Szöveges adatok reprezentációja számítógépeken is ugyanolyan formában (színekkel, betűméretekkel, elrendezéssel stb.) jelenjen meg. Emiatt ezek (még ha strukturált információt tartalmaznak is), alkalmatlanok az automatikus feldolgozásra, vagy legalábbis bonyolult programozást igényelnek. A részletes ismertetés előtt érdemes definiálni néhány fogalmat: Adatbázis: ebben a fejezetben adatbázis alatt egy strukturált adathalmazt értünk, függetlenül attól, hogy milyen formában van tárolva. A legtöbb esetben elképzelhető egy táblázatként. Példa: egy gyógyszeradatbázis. Rekord: egy összetartozó adathalmaz, az adatbázis egy sora. Az adatbázis egyforma felépítésű rekordokból áll. Példa: a gyógyszeradatbázisban egy gyógyszer adatai. Mező: az adatbázis egy oszlopa, az adatbázisban tárolt entitás valamilyen tulajdonsága. Példa: a gyógyszer neve, hatóanyaga stb. A továbbiakban a 2. ábra látható egyszerű adatbázis példáján mutatjuk be a különböző adattárolási módszereket. Név Hatóanyag Forma Kiszerelés rekord Algoflex ibuprofen filmtabletta 10 db Nasivin oxymetazoline oldatos orrcsepp 5 ml Coldrex paracetamol tabletta 12 db mező 2. ábra: Példa adatbázisra: gyógyszerek 16

17 Szöveges adatok reprezentációja Fix szélességű fájlok A fix szélességű fájlok elnevezése onnan ered, hogy minden mezőnek van egy karakterszámban meghatározott szélessége, azaz minden rekord esetén ugyanannyi karakterből áll. Ha valamelyik rekordban az adott mező tartalma ennél kevesebb karakterből áll, akkor valamilyen kitöltő karakterrel (általában szóköz) töltik fel az üres helyeket. A kitöltő karakterek lehetnek az adat előtt és után is, ezzel megvalósítva a jobbra ill. balra igazítást. (Jobbra igazítást általában számok esetében szokás használni.) A gyógyszeradatbázisunk esetében dönthetünk úgy, hogy a nevet 15 karakteren, a hatóanyagot 20, a gyógyszerformát 18, a kiszerelést pedig 8 karaktereken tároljuk. A rekordokat minden esetben új sor választja el. Ekkor az adatbázisunk a következő formát ölti: Név Hatóanyag Forma Kisz. Algoflex ibuprofen filmtabletta 10 db Nasivin oxymetazoline oldatos orrcsepp 5 ml Coldrex paracetamol tabletta 12 db 3. ábra: Gyógyszeradatbázis fix szélességű fájlként Ennek a tárolási módnak a fő előnye az egyszerűsége: könnyen kiszámolható, hogy egy-egy mező hol kezdődik és meddig tart. Ha például a hatóanyagokat szeretnénk kilistázni, akkor 16. karaktertől a 35. karakterig kell beolvasni minden egyes sort. Az egyes mezők ideális hosszának meghatározása azonban nem mindig egyszerű feladat. A példánkban a leghosszabb gyógyszernév 8 karakterből áll, így a 15 karakter is soknak tűnik. De ha például a SALMETEROL/FLUTICASONE PROPIONATE PHAROS nevű készítmény eltárolására lenne szükség a későbbiekben, akkor 40 karakterre lenne szükség. Bármikor előfordulhat 17

18 Szöveges adatok reprezentációja tehát, hogy alulbecsüljük a szükséges hosszt, és egy jövőbeli adat nem fér bele az adatbázisunkba. Ekkor vagy rövidíteni kell vagy levágni az utolsó néhány karaktert, vagy pedig a mező hosszát megváltoztatni. Utóbbinak azonban az lehet a következménye, hogy a feldolgozó programot is át kell írni az új hosszok használatára. A fix szélesség használatának másik hátránya, hogy amennyiben a mezőhosszokat túl nagyra állapítjuk meg, az adataink többsége viszont ennél jóval rövidebb, akkor a fájl nagyon sok felesleges szóközt fog tartalmazni, ami megnöveli a fájl méretét. (Bár ez a mai tárolókapacitások fényében már nem szokott problémát jelenteni.) Továbbá egyetlen hiba egy rekord elején (pl. a szükségesnél kevesebb kitöltő szóköz) az egész rekord elcsúszását okozhatja. Ezt a fájltípust előszeretettel alkalmazták a régebbi szoftverekben, ma azonban már elavultnak tekinthető, és a használata visszaszorulóban van. Néhány esetben, mint például az OEP számára küldendő havi jelentésekben még ezt az adatformátumot alkalmazzák Tagolt szöveges fájlok A tagolt fájlok esetében a mezők változó szélességűek, a mezőhatárokat valamilyen elválasztó karakter jelöli. A gyakran használt elválasztó karakterek közé tartozik a vessző, a pontosvessző vagy a tabulátor. Ezt a fájltípust CSV (comma-separated values) névvel szokták jelölni, habár az elválasztó karakter nem mindig a vessző (comma). Precízebb elnevezés lenne a delimiter-separated values (DSV), de a továbbiakban a jobban elterjedt CSV elnevezést használjuk. A gyógyszeradatbázis CSV formátumban, vesszővel elválasztva: 18

19 Szöveges adatok reprezentációja Név,Hatóanyag,Forma,Kiszerelés Algoflex,ibuprofen,filmtabletta,10 db Nasivin,oxymetazoline,oldatos orrcsepp,5 ml Coldrex,paracetamol,tabletta,12 db 4. ábra: Gyógyszeradatbázis CSV fájlként A vessző használata elválasztó karakterként felvet néhány problémát, pl. számos nyelv (köztük a magyar is) vesszőt használ tizedes jelként. Tovább a vessző gyakran előfordulhat szöveges mezők tartalmában is. Emiatt jobb választás lehet a pontosvessző használata. A rekordokat ebben a formátumban is új sor választja el. Bármilyen körültekintően választjuk is ki az elválasztó karaktert, előfordulhat, hogy annak szerepelnie kell egy mező értékében. Ebben az esetben a mező tartalmát idézőjelbe kell tenni. Ezzel a módszerrel több soros mezők is létrehozhatók. Név;Leírás Algoflex;"Ellenjavallatok: - súlyos szív-, máj- és veseműködési zavar; - súlyos magasvérnyomás-betegség; - véralvadást csökkentő (antikoaguláns) kezelés" 5. ábra: CSV fájl többsoros rekorddal A CSV fájlformátum takarékosabb, mint a fix szélességű, mivel nem tartalmaz felesleges kitöltő karaktereket, csak mezőnként egy elválasztó karaktert. A CSV viszonylag elterjedt 19

20 Szöveges adatok reprezentációja formátum, egyszerűsége miatt előszeretettel használják eltérő formátumot használó alkalmazások közötti adatcserére. A legtöbb táblázatkezelő és adatbázis-kezelő rendszer támogatja a használatát, köztük a Microsoft Office is Jelölőnyelvek A jelölőnyelvek (angolul: markup language) olyan mesterséges nyelvek, amelyek segítségével a szövegeket valamilyen jelölésrendszerrel láthatunk el, például számítógépes értelmezés, strukturálás vagy megjelenítés céljából. A megjelölés lényegében meta-adatokkal történő ellátást jelent. Jelöléseket már a számítógépek kora előtt is alkalmaztak: a nyomdászok, szedők jelzésekkel látták el a kéziratot, amelyek jelezték a kiadvány végső formáját (betűstílusok, margók stb.). A jelölőnyelvben használt jelöléseket tag-nek nevezzük. A legtöbb esetben az egyes adatelemeket egy nyitó és egy záró tag veszi körül. Az általános célú jelölőnyelvekben a tageknek csak a szintaktikájuk van meghatározva. A kötött szintaktika lehetővé teszi általános célú értelmezők, azaz parserek kifejlesztését, miközben a jelölések értelmét, azaz szemantikáját a konkrét alkalmazás szabja meg. Az egyik legelső általános jelölőnyelvet az IBM-nél fejlesztették ki az 1960-as években, és a GML (Generalized Markup Language) nevet kapta. Ezt később továbbfejlesztették és ban szabványba foglalták, így alakult ki az SGML (Standard Generalized Markup Language). Az SGML egy absztrakt, általános szintaxist biztosít, melynek segítségével bármilyen dokumentum leírható. Az SGML használata eléggé bonyolult, speciális szaktudást igényel, 20

21 Szöveges adatok reprezentációja ezért széles körben nem terjedt el. Azonban a ma használt jelölőnyelvek többsége az SGMLből származik, annak valamilyen leszármazottja vagy konkrét alkalmazása. A jelölőnyelvek evolúcióját és kapcsolatait a 6. ábra mutatja. 6. ábra: Jelölőnyelvek evolúciója 1 Fontosabb jelölőnyelvek: HTML: az SGML egy konkrét alkalmazása, weboldalak leírására fejlesztették ki. 1 BRADLEY, Neil: Az XML-kézikönyv. Bp.: Szak Kiadó, p

22 Szöveges adatok reprezentációja XML: az SGML leszármazottja (részhalmaza), tehát általános célú leíró nyelv. Számos egyszerűsítést és megkötést tartalmaz az elődjéhez képest, ezáltal egyszerűbben feldolgozható. Manapság a szöveges adattárolás és rendszerek közti adatcsere legnépszerűbb formátuma. XHTML: a HTML XML-alapú változata, az egyszerű HTML-hez képest több megkötést tartalmaz. Számos XML alapú speciális jelölőnyelv létezik, mint például a matematikai formulák leírására szolgáló MathML Az XML-ről és a HTML nyelvek különböző változatairól a későbbi fejezetekben részletesen is lesz szó. Az SGML/XML alapú nyelvek nagyon rugalmasak, jóval többfajta adat tárolására alkalmasak, mint a fix szélességű vagy tagolt fájlok. Például nem feltétel, hogy minden rekord ugyanolyan mezőkből álljon. Ezen kívül nem csak kétdimenziós (táblázatszerű) adatok tárolására alkalmasak, hanem összetettebb, többszintű adatokat is le lehet írni a használatukkal. Mivel minden mező esetében meg kell ismételni a nyitó és záró taget, a fájl mérete jelentősen megnő pl. a CSV-hez képest, ez azonban a jelenlegi tárolókapacitásokat figyelembe véve nem jelent nagy hátrányt. A legtöbb programozási nyelvhez létezik legalább egy, de jellemzően akár több parser is, így a feldolgozásuk egyszerű. Fontos azonban, hogy a fájl jól formázott ( well-formed ) legyen, azaz pontosan kövesse a nyelv szintaktikáját (pl. nyitó és záró tagek), ellenkező esetben nem lehet feldolgozni. A példaként használt gyógyszeradatbázis XML formája a következő ábrán látható. 22

23 Szöveges adatok reprezentációja <gyogyszerek> <gyogyszer> <nev>algoflex</nev> <hatoanyag>ibuprofen</hatoanyag> <forma>filmtabletta</forma> <kiszereles>10 db</kiszereles> </gyogyszer> <gyogyszer> <nev>nasivin</nev> <hatoanyag>oxymetazoline</hatoanyag> <forma>oldatos orrcsepp</forma> <kiszereles>5 ml</kiszereles> </gyogyszer> <gyogyszer> <nev>coldrex</nev> <hatoanyag>paracetamol</hatoanyag> <forma>tabletta</forma> <kiszereles>12 db</kiszereles> </gyogyszer> </gyogyszerek> 7. ábra: Gyógyszeradatbázis XML fájlként A szöveges adatformátumok összehasonlítása 23

24 Szöveges adatok reprezentációja Az előző fejezetekben láthattuk, hogy számos lehetőség kínálkozik a szöveges adatok strukturált tárolására. Fontos megismerni mindegyik jellemzőit, előnyeit és hátrányait, hogy egy konkrét alkalmazás tervezésénél mindig a legmegfelelőbb tárolási módot választhassuk ki. Nagy bonyolultságú rendszereknél elsősorban adatbázis-kezelő rendszereket használnak az adatok tárolására, de a fájl alapú tárolásnak is megvan a maga létjogosultsága. Elsősorban rendszerek közötti adatkommunikáció vagy adatkonverzió esetében lehetnek hasznosak egyszerűségük, könnyű feldolgozhatóságuk és szabványosságuk miatt. A 3. táblázat a megismert formátumok legfontosabb jellemzőit foglalja össze még egyszer. Jellemző Fix szélességű Tagolt Jelölőnyelv Méretnövekedés alacsony közepes minimális jelentős Elterjedtség visszaszorulóban gyakori gyakori Tárolható adatok kétdimenziós táblázat kétdimenziós táblázat hierarchikus Bonyolultság egyszerű egyszerű bonyolult Hibalehetőségek nem megfelelő tagoló karaktert nem jól formázott számú kitöltő karakter tartalmazó adat nincs idézőjelben Szemantika fejléc, ha van fejléc, ha van önleíró (tagek és hierarchia) 3. táblázat: Szöveges adatformátumok összehasonlítása 2.3 MIME típusok A MIME (Multipurpose Internet Mail Extensions) internetes szabványt eredetileg az ek továbbításához fejlesztették ki, hogy lehetővé váljon 24

25 Szöveges adatok reprezentációja az ASCII-tól eltérő karakterkódolások használata, csatolmányok továbbítása, többrészes üzenettörzsek létrehozása. A szabványt később más protokollok is átvették, a legfontosabb ezek közül a HTTP. Az ek továbbítására szolgáló SMTP, valamint a HTTP üzenetei is egy fejlécből (header) és egy törzsből (body) állnak. A fejléc típus: érték típusú párokból áll, a MIME szabvány ilyen fejléctípusokat definiál. A MIME fejlécek a következők: MIME-version A használt MIME szabvány verzióját jelöli. Bár többször módosítottak a szabványon, a verziószámot nem növelték, így értéke mindig 1.0: MIME-version: 1.0 Content-ID Az elküldött tartalom egyedi azonosítója, elsősorban többrészes üzentek esetében használják. Az azonosítónak globálisan egyedinek kell lennie, de a generáló algoritmus nincs megszabva. Egy tipikus példa a következőképpen néz ki: Content-ID: @server01.example.net karakter után az üzenetet generáló számítógép host neve áll, míg az előtte lévő számok valamilyen azonosítók sorozata, pl: az aktuális üzenet részeinek száma, a 25

26 Szöveges adatok reprezentációja program által eddig generált üzenet száma, a folyamat azonosítója, linux időbélyeg (azaz az január 1. óta eltelt másodpercek száma). Megjegyzés: Az egész üzenetnek is van egy egyedi azonosítója, ezt azonban nem a MIME definiálja. Content-Description Az üzenet tartalmának természetes nyelvű leírása, ritkán használt. Content-Disposition Ez a fejléc az üzenet tartalmának megjelenítését szabályozza: inline érték esetében automatikusan megjelenik az üzenetben attachment érték esetében csak a felhasználó beavatkozására nyílik meg HTTP üzenetek esetében az inline tartalom megjelenik a böngészőben (amennyiben az adott fájltípust meg tudja jeleníteni), míg attachment esetében általában egy Mentés másként párbeszédablak jelenik meg, vagy egyes böngészőknél külső programmal lehet megnyitni a fájlt. A fejléchez lehetőség van fájlnév megadására is. Például: Content-Disposition: attachment; filename=file.pdf A felhasználói programok (böngészők, kliensek) nem mindig veszik figyelembe a fejléc tartalmát. 26

27 Szöveges adatok reprezentációja Content-Type A legfontosabb MIME fejléc, az üzenet típusát és szöveges tartalom esetén a karakterkódolást adja meg. A MIME típusok típus/altípus formájúak. A típus általában a következők egyike: text: szöveg ember által is olvasható szöveges formátum, image: kép, audio: hang, video: mozgókép, application: alkalmazás általában egy specifikus szoftver által használt formátum), multipart: több különböző típusú részből álló (többrészes) üzenet. Példa tartalomtípusra, karakterkódolás megadásával: Content-Type: text/html; charset=utf-8 A MIME szabvány nyitott, lehetőség van egyedi tartalomtípusok regisztrálására. A cégek által használt saját tartalomtípusok általában application/vnd.gyártó-program formájúak, ahol a vnd a vendor (forgalmazó) szóból ered. A 4. táblázat néhány gyakran használt tartalomtípust sorol fel. Típus Altípus Leírás text plain ASCII szöveg html HTML szöveg javascript JavaScript kód 27

28 Szöveges adatok reprezentációja css CSS stílusdefiníció image jpg JPG formátumú kép gif GIF formátumú kép png PNG formátumú kép audio mp3 MP3 formátumú hangfájl video mpeg MPEG formátumú videó application octet-stream általános bájtsorozat (nem definiált jelentésű) vnd.ms-word MS Word dokumentum x-shockwave-flash Flash fájl multipart mixed többrészes üzenet alternative egy üzenet több különböző formában form-data HTML űrlap adatai 4. táblázat: Gyakran használt MIME típusok Többrészes típusok használata A multipart típusok esetében a Content-Type fejléc attribútumaként definiálni kell egy boundary, azaz határoló stringet, ami elválasztja egymástól az üzenet egyes részeit. A határoló string lehet bármilyen karaktersorozat, ami nem fordul elő az üzenet törzsében, erre a célra gyakran egy véletlen karaktersorozatot használnak. Ezt mindig -- vezeti be, és az utolsó esetében -- zárja le. Minden üzenetrész saját fejléccel rendelkezik, ahol definiálható pl. az adott rész tartalomtípusa (amennyiben az nem az alapértelmezett text/plain). A multipart/mixed típus lehetővé teszi csatolmányok hozzáillesztését az üzenethez, például képek vagy egyéb fájlok formájában. 28

29 Szöveges adatok reprezentációja A multipart/alternative típus (közel) ugyanazt a tartalmat tartalmazza többféle formátumba. Tipikus felhasználási módja, amikor egy tartalmát szöveges és HTML formában is elküldik. A részek sorrendjét az határozza meg, hogy mennyire felelnek meg az eredetinek. A legjobban megfelelő a végére kerül, míg a legkevésbé megfelelő az elejére. A kliensek általában a legutolsó olyan részt jelenítik meg, amelyet értelmezni tudnak. (Kivételt jelent, ha például egy kliensben beállítja a felhasználó, hogy a szöveges reprezentációt részesíti előnyben.) A multipart/form-data típust HTML űrlapot elküldésekor használják. Egy többrészes üzenet tipikusan a következő módon néz ki: MIME-Version: 1.0 Content-Type: multipart/alternative; boundary=bnz56okf3awlp -- bnz56okf3awlp Content-Type: text/plain Az üzenet tartalma szövegesen -- bnz56okf3awlp Content-Type: text/html <p>ez <em>html</em> szöveg.</p> -- bnz56okf3awlp-- 29

30 Szöveges adatok reprezentációja 8. ábra: Többrésze (multipart) MIME üzenet 30

31 Az XML 3 Az XML 3.1 XML alapelvek Mint azt már az előző fejezetben is láttuk, az XML (extensible Markup Language) az SGMLből származó általános célú jelölőnyelv. A kifejlesztése hátterében az állt, hogy az SGML túlságosan bonyolult volt, túl sok opcionális lehetőséget tartalmazott, emiatt komplex feldolgozó programot igényelt. Az XML ezzel szemben strukturáltabb, szabványosítottabb, mivel az opcionális elemek többségét elhagyták belőle. Az XML fájlok lényegében egyszerű szöveges fájlok, így bármilyen szövegszerkesztővel létrehozhatók, amelyek képesek ASCII vagy UTF-8 fájlokat kezelni. Így például elegendő a Jegyzettömb (Notepad) alkalmazás. Léteznek speciális XML szerkesztő programok is, amelyek egyszerűsítik az állományok létrehozását, vagy lehetővé teszik a vizuális szerkesztést. Bár a Jegyzettömb is megfelel egyszerű XML fájlok szerkesztésére, bonyolultabb vagy nagyobb méretű állományoknál nehezen áttekinthetővé válhat. Ezért ajánlott valamilyen nagyobb tudású szerkesztő használata. A Notepad++ nevű ingyenes alkalmazás számos olyan szolgáltatást nyújt, amelyek segítik az XML szerkesztést, mint például az elemek automatikus lezárása, vagy a kód színezése. 31

32 Az XML Az XML leíró jelölést alkalmaz, vagyis nevekkel azonosítja a dokumentum egyes részeit. A nevek jelentését csak a feldolgozó program határozza meg, önmaguknak nem bírnak jelentéssel. Például egy szövegben egy bekezdést tetszés szerint jelölhetünk bekezdes, paragraph, p vagy akár el123 jelöléssel is, kizárólag a feldolgozó programunknak kell tudnia, hogy melyik jelölést használtuk és azt hogyan kell megjelenítenie vagy feldolgoznia. Természetesen célszerű beszélő jelöléseket alkalmazni, hogy az XML állomány emberek számára is könnyen értelmezhető legyen. A nevekkel kapcsolatos szabályokról és konvenciókról részletesen a következő fejezetekben lesz szó. Minden XML dokumentumnak jól formázottnak ( well-formed ) kell lennie, azaz meg kell felelnie a következő fejezetekben ismertetett szintaktikai szabályoknak. Ha egy fájl nem jól formázott, akkor az elemző programok nem dolgozzák fel azt. A jól formázottságon túl a dokumentumnak érvényesnek is kell lennie, vagyis meg kell felelnie a felhasználó által meghatározott tartalmi szabályoknak. Ilyen tartalmi szabály lehet az, hogy egy adott elem milyen típusú értéket tartalmazhat (pl. szám vagy dátum), vagy milyen elemeknek kell kötelezően szerepelniük. A jól formázottság legegyszerűbben úgy ellenőrizhető, ha elmented az XML-t szöveges fájlként, és megnyitod azt egy böngészőben. Ha jól formázott, akkor megjelenik az XML struktúra, ellenkező esetben egy hibaüzenettel találkozol. 32

33 Az XML 3.2 Az XML nyelvi elemei XML deklaráció Minden XML dokumentum egy deklarációval kezdődik, amely jelzi, hogy egy XML fájlról van szó. Az XML deklaráció szintaxisa a következő: <?xml version="1.0" encoding="utf-8" standalone="yes"?> A deklaráció mindig a fájl legelején kell, hogy szerepeljen, azt semmilyen más karakter nem előzheti meg. A verziószám használata kötelező, értéke általában 1.0. Létezik ugyan egy 1.1- es verzió, ám ezt ritkán használják, legfeljebb akkor, ha annak valamilyen speciális jellemzőjére van szükség. Az encoding attribútum a fájl karakterkódolását adja meg, célszerű az UTF-8-at használni. Az XML feldolgozók általában képesek a karakterkódolás automatikus detektálására, ezért a használata opcionális, de megbízhatóbb, ha mindig megadjuk a használt kódolást. Ez akkor is hasznos, ha később kézzel kell szerkeszteni a dokumentumot. A standalone attribútum azt jelzi, hogy a dokumentum hivatkozik-e külső állományokra (pl. DTD-re, ld fejezet). Ha igen, akkor az értéke mindig no Elemek Az XML terminológiája elemnek nevezi a dokumentum logikai-szerkezeti egységeit. Minden elem egy nyitó tagből (szintaxisa: <tag>), egy tartalomból és egy záró tagből (szintaxisa: </tag>) áll. Amennyiben egy elem tartalma üres, akkor a nyitó és záró tag összevonható, vagyis az <urestag></urestag> helyett használható az <urestag/> jelölésmód is. 33

34 Az XML Az elemnevek nincsenek előre definiálva, bármilyen nevet használhatunk, ami megfelel néhány szabálynak. A nevek betűket, számokat, pontokat, kettőspontokat, kötőjelet, aláhúzást tartalmazhatnak. Ékezetes nevek használata is megengedett, nem tartalmazhatnak viszont szóköz, tabulátor, sorvége (azaz ún. whitespace) karaktereket. Minden névnek betűvel, aláhúzással, esetleg kettősponttal kell kezdődnie. Fontos, hogy az elemnevek kis- és nagybetű érzékenyek, tehát az <elemnév>, <ELEMNÉV>, <ElemNév> és <elemnév> mind eltérő tagnek számít. Ebből az is következik, hogy a nyitó és záró tag írásmódjának pontosan meg kell egyeznie. Célszerű kisbetűs neveket használni, hosszabb összetett neveknél pedig az összetétel második és további tagjait nagybetűvel kezdeni (pl. <bejaratiajtokilincsforma>). Fontos, hogy ha eldöntöttünk egy konvenciót, akkor ahhoz következetesen ragaszkodjunk, tehát pl. ne keveredjenek a kis-, nagy- és vegyes betűs nevek. Célszerű beszélő neveket alkalmazni, de a túl hosszú nevek használata is kerülendő. Jó kompromisszum lehet, ha a gyakran használt elemeknek rövid, a ritkábban használtaknak hosszabb nevet adunk. Az elemek tetszőleges mélységig egymásba ágyazhatók, azaz egy elem tartalma lehet egy vagy több másik tag is. A hierarchia legfelső szintjén csak egy elem lehet, ez az ún. gyökér (root) elem, minden más elem ebbe van ágyazva egy vagy több mélységi szinten. Az egymásba ágyazott elemeket szülő (parent) ill. gyermek (child) elemnek nevezzük. Az elemek között bármennyi szóköz, tabulátor vagy újsor karakter lehet, tehát ugyanazt a dokumentumot lehet folyamatosan egy sorba írni vagy minden elemet új sorba, tabulátorokkal mélység szerint rendezve megadni. A jobb olvashatóság miatt a második módszer ajánlott. 34

35 Az XML A továbbiak néhány példán szemléltetjük a helyes és hibás XML dokumentumokat. <?xml version="1.0" encoding="utf-8" standalone="yes"?> <alkalmazott> <nev>cserép Virág</nev> <cim>budapest XIII.</cim> </alkalmazott> <alkalmazott> <nev>ebéd Elek</nev> <cim>kistarcsa</cim> </alkalmazott> Ebben a példában két elem is szerepel a legfelső hierarchia-szinten, azaz nincs gyökérelem, tehát ez az XML részlet hibás. A kijavításához ki kell egészíteni egy befoglaló elemmel, amely magába ágyazza az összes <alkalmazott> elemet. Ilyen esetekben ezt célszerű az felsorolt elemek többes számú alakjaként, azaz <alkalmazottak>-nak elnevezni. A javított XML a következő formát ölti: <?xml version="1.0" encoding="utf-8" standalone="yes"?> <alkalmazottak> <alkalmazott> <nev>cserép Virág</nev> <cim>budapest XIII.</cim> </alkalmazott> <alkalmazott> <nev>ebéd Elek</nev> 35

36 Az XML <cim>kistarcsa</cim> </alkalmazott> </alkalmazottak> A következő példán egy kiemeléssel ellátott, linkként megjelölt szövegrészt láthatunk:... <kiemelt><link>link szövege</kiemelt></link>... Itt nem egyezik a nyitó és záró tagek sorrendje, emiatt a részlet nem jól formázott. A záró tageknek mindig a nyitó tagekhez képest fordított sorrendben kell szerepelniük. Tehát a példa helyesen:... <kiemelt><link>link szövege</link></kiemelt> Attribútumok Az XML attribútumok az elemekhez adott paraméterek, amelyek módosíthatják vagy pontosíthatják azok jelentését. Az attribútumokat mindig az elem kezdő tagében kell megadni, attribútum_név="attribútum_érték" formában. Az értéket lehet idézőjelek (") és aposztrófok ( ) közé is tenni. Az elemnek bármennyi attribútuma lehet, ezeket és az tagnevet szóköz választja el. Az attribútum nevekre nincsenek külön szabályok, az elem neveknél ismertetettek ezekre is érvényesek. Az attribútum neveket rendszerint kisbetűkkel írjuk, de a nagybetűk használata is megengedett. 36

37 Az XML Van két beépített attribútum, amelyekre érdemes kitérni. Az egyik ilyen az xml:lang, amely az elemben tárolt szöveg nyelvét jelöli. Az értékre többfajta jelölés is alkalmazható: ISO 639 szabvány szerinti kétbetűs nyelvkódok: pl. en, hu Felhasználó által definiált kód, amely x-szel kezdődik, pl. x-hungarian IANA-nál regisztrált kód, amely i.vel kezdődik, pl. i-hungarian Országot és nyelvet jelölő kód, pl. en-us, en-gb A másik beépített attribútum a szóközök és más, jelentés nélküli karakterek kezelését határozza meg. Ha az xml:space="preserve" attribútum be van állítva, akkor az elem minden karakterét jelentéssel bírónak kell tekinteni, vagyis meg kell őrizni. Ez akkor hasznos, ha egy elemben előre formázott szöveget kell tárolnunk, például tabulátorokkal vagy szóközökkel formázott programkódot. Az attribútum érték bármilyen string lehet, ami nem tartalmazza a határoló jelet. Azaz ha az értéket idézőjelek közé tettük, akkor tartalmazhat aposztrófot, de idézőjelet nem, és fordítva ugyanígy. A következők tehát helyesek: attr="érték érték2 " attr= érték "érték2" Ezek viszont hibásak: attr="érték "érték2"" attr= érték érték2 attr="érték1 érték2 "érték3"" 37

38 Az XML Amennyiben mégis szerepelnie kell a határoló karakternek az értékben, akkor azt entitásként kell kódolni. Az entitásokról a következő fejezetben olvashatsz. Ugyanazt az információt sokszor le lehet írni gyermek elemként és attribútumtól is, a választás a tervezőn múlik. Például egy név tárolható így is: <nev> <vezeteknev>zöld</vezeteknev> <keresztnev>alma</keresztnev> </nev> És így is: <nev vezeteknev="zöld" keresztnev="alma" /> Általános szabályként elmondható, hogy az attribútumok általában többlet információval látják el, jellemzik az elemet, míg az elemek a dokumentum szerkezeti összetevőit jelölik. A határvonal azonban sokszor elmosódik a kettő között. Az azonban fontos, hogy ha egy információt tovább szeretnénk bontani, akkor azt csak elemként tehetjük meg Entitások Az XML entitás lényegében egy névvel azonosított szövegtöredék, amelyet egyszer kell definiálni, majd az XML dokumentumba bárhová beilleszthetjük. A dokumentum feldolgozásakor a parser minden ilyen hivatkozást behelyettesít az entitás tartalmára. A szöveg, amelyre az entitás hivatkozik, lehet egy karakter vagy akár egy hosszabb szövegrész is. Az entitások jellemző használati módjai a következők: 38

39 Az XML Az XML-ben speciális jelentéssel bíró karakterek kódolása (pl. <, >). A használt karakterkódolásból hiányzó karakterek szövegbe illesztése, pl. ISO szövegbe görög betűk. Az entitások ilyen használata az UTF-8 terjedésével visszaszorulóban van. Külső fájlban tárolt adatok átemelése az aktuális dokumentumba. A dokumentumban gyakran előforduló szövegrészek rövidítése, különösen, ha azok változhatnak. Az entitásokra mutató hivatkozások egy & ( és ) jellel kezdődnek és pontosvesszővel végződnek, közöttük pedig az entitás neve szerepel. Például egy mű szerzőjére hivatkozhatunk az &author; entitással. Az egyes karakterekre hivatkozhatunk közvetlenül a (Unicode) karakterkódjukkal, ekkor az &#karakterkód; formát kell használni. A decimális kódon kívül használhatunk hexadecimális karakterkódokat is, ilyenkor a hivatkozás a &#xkarakterkód; formát ölti. A speciális karakterek helyett használandó entitásokat az 5. táblázat mutatja. Karakter Entitásnév Decimális ASCII kód < < [less than] < > > [greater than] > & & [ampersand] & ' &apos; [apostrophe] &#39; " " [quote] " 5. táblázat: Speciális karaktereket helyettesítő entitások 39

40 Az XML Megjegyzések Az XML dokumentumba el lehet helyezni megjegyzéseket, amelyeket a feldolgozó program nem vesz figyelembe. Ezek a dokumentumot olvasó vagy szerkesztő emberek számára hordoznak plusz információkat. A megjegyzések lehetnek egy vagy többsorosat, formájuk a következő: <!-- Megjegyzés szövege --> CDATA Amint az előzőekben láttuk, az XML-ben bizonyos jelentéssel bíró karaktereket entitásokra kell cserélni ahhoz, hogy a dokumentum feldolgozható legyen. Ha azonban sok ilyen szerepel benne, akkor a használatuk kényelmetlenné válik, a kimenet nehezen olvasható lesz. Ez akkor fordulhat elő, ha például HTML szöveget szeretnénk egy XML elem tartalmaként tárolni (a HTML ugyanis az XML-hez nagyon hasonló szintaxist használ; a részletekről a későbbi fejezetekben olvashatsz). Ilyenkor hasznos a CDATA (azaz character data) blokkok használata. A CDATA blokkban lévő karaktersorozatot a feldolgozó nem próbálja értelmezni, hanem a kimenetben is eredeti formájában jelenik meg. (Egyedül a CDATA blokkot lezáró karaktersorozat megjelenése okozhat feldolgozási hibát.) A CDATA blokkok szintaxisa a következő: <![CDATA[ A CDATA blokkban <<bármilyen>> karakter szerepelhet, azok "jelentés nélküliek" lesznek. ]]> 40

41 Az XML Dokumentum-típus deklaráció Az XML deklarációt opcionálisan követheti egy dokumentum-típus deklaráció (Document Type Declaration, DTD), amely a dokumentum szerkezetére vonatkozó szabályokat definiál. A DTD megadja, hogy milyen elemek használhatók a dokumentumban, azokat hogyan lehet hierarchiába rendezni, milyen attribútumaik lehetnek, melyik elemek és attribútumok használata kötelező, definiálhat entitásokat stb. Megadható például, hogy a gyogyszerek dokumentumtípus tetszőlege számú gyogyszer elemből álljon, amelyek rendelkeznek egy egyedi id attribútummal, valamint egy-egy nev, hatoanyag, forma és kiszereles gyermek elemmel. A definíciók tárolhat külső fájlban vagy a dokumentumba beillesztve. A dokumentum-típus deklaráció általános formája a következő: <!DOCTYPE név kulcsszó külső_azonosító [definíciók] > A deklaráció elemei a követezők: Név: az XML dokumentum gyökér elemét azonosítja Kulcsszó: értéke lehet SYSTEM, ha a dokumentum típus egy személy vagy szervezet által használt, vagy PUBLIC, ha szabványosított vagy széles körben használt típusról van szó. Külső_azonosító: külső DTD használata esetén hivatkozás a definíciót tartalmazó fájlra. SYSTEM típus esetében ez általában egy relatív vagy abszolút útvonal, PUBLIC esetében pedig egy publikus név és egy URL. Definíciók: belső definíciók használata esetén szögletes zárójelben ([ ]) kell felsorolni a definíciókat. 41

42 Az XML A DTD definíciókban használható jelölésekről részletesen az 6.1 fejezetben olvashatsz. A Következőkben néhány példát olvashatsz a lehetséges dokumentum-típus deklarációkra. Külső, SYSTEM típusú deklaráció: <!DOCTYPE gyogyszerek SYSTEM "gyogyszer.dtd"> Belső, SYSTEM típusú deklaráció: <!DOCTYPE gyogyszerek SYSTEM [ <!--...definíciók...--> ]> A külső és belső deklarációk vegyesen is alkalmazhatók: <!DOCTYPE gyogyszerek SYSTEM "gyogyszer.dtd" [ <! itt felül lehet írni vagy ki lehet egészíteni a külső definíciókat --> ]> PUBLIC típusú deklaráció: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" " 42

43 A HTML 4 A HTML 4.1 HTML alapelvek A HTML (Hypertext Markup Language) egy olyan jelölőnyelv, amelyet weboldalak készítéséhez fejlesztettek ki. A legegyszerűbb esetben egy weboldal tartalma HTML fájlok formájában van tárolva egy szerveren. Amikor egy böngészőben beírjuk az oldal címét, akkor a böngésző a hálózaton keresztül letölti a megfelelő fájlt, értelmezi annak tartalmát és megjeleníti az oldalt. A weboldalak szövegében linkek helyezhetők el, amelyek más weboldalakra vagy fájlokra (pl. képek, videók) mutatnak. Így egy hálózatos szerkezetű, számos ponton kapcsoló információhalmaz alakul ki, amelyet hiperszövegnek, ill. audiovizuális információk használata esetén kiterjesztve hipermédiának nevezünk. A HTML nyelv a következő elemtípusok használatát teszi lehetővé: Strukturális elemek: a szövegrész célját határozzák meg, mint például címsorok, listák, táblázatok Prezentációs elemek: a szövegrész megjelenését (pl. aláhúzott, félkövér) határozzák meg. A korai weboldalakon gyakori volt a használatuk, a modern oldalakon azonban felváltotta a CSS használata (ld. 5. fejezet), amely lehetővé teszi a tartalom és a megjelenés szétválasztását. Hiperszöveg elemek: linkek, amelyek lehetővé teszik a kapcsolatot a dokumentum részei ill. más dokumentumok között. Eszköz elemek: interaktív űrlapok (gombok, beviteli mezők) létrehozását teszi lehetővé. 43

44 A HTML 4.2 A HTML verziói A HTML-nek több verziója is van, amelyek ugyanazokra az alapokra épülnek, de néhány szabályban különböznek egymástól. A különböző verziók részben egymással párhuzamosan élnek. Ebben a fejezetben áttekintjük a legfontosabb verziókat és azok különbségeit. HTML A HTML első verziója egyidős a webbel, mindkettő 1990 körül alakult ki. A nyelvet folyamatosan bővítették, finomították, szabványosították, jelenleg a 4.01-es verzió terjedt el széles körben. Azonban minden verzió ugyanazokra az alapokra épül, mégpedig az SGML általános leíró nyelvre. XHTML Az XHTML abban különbözik a HTML-től, hogy az SGML helyett az XML-re épül, ami lényegében szigorúbb formai követelményeket jelent. Egy érvényes XHTML dokumentumnak meg kell felelnie mindazoknak az előírásokban, amelyeket a 3. fejezetben ismertél meg. Jelenleg az 1.1-es XHTML verziót használják. (Elkezdődött ugyan egy 2.0-ás verzió specifikálása, amely azonban nem készült el). Az XHTML 1.1 elemkészlete megfeleltethető a HTML 4.01-es verziónak. Még egyszer összefoglaljuk, hogy a XHTML-ben milyen szabályoknak kell megfelelni: Minden taget le kell zárni, üreseket és szöveget tartalmazókat egyaránt. Az elemeket megfelelő sorrendben kell egymásba ágyazni. A tagek és attribútumok nevét kisbetűkkel kell írni. Az attribútum-értékeket idézőjelbe (vagy aposztrófok közé) kell tenni. 44

45 A HTML Minden attribútumot név="érték" formában kell megadni, az érték nem hagyható el. HTML5 A HTML legújabb, 5-ös verziója jelentős újdonságokat tartalmaz, ezért szokás megkülönböztetően HTML5 néven hivatkozni rá. A HTML5 újdonságai közé tartozik például a videók és audio fájlok egyszerűbb beillesztése vagy az újfajta beviteli mező típusok. A HTML5 visszafelé kompatibilis a korábbi verziókkal, a HTML 4.01-en alapul. A böngészők fejlesztése során folyamatosan építik bele a HTML5 elemeinek támogatását, de az egyes elemek elérhetősége böngésző- és verziófüggő. 4.3 Az (X)HTML elemkészlete (X)HTML deklaráció Mivel minden XHTML dokumentum érvényes XML dokumentum kell, hogy legyen, az XHTML-ben a már megismert deklarációk használhatók. Példa XHTML deklarációra, amely XML és DOCTYPE deklarációt is tartalmaz: <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " A CSS stílusok egy része régebbi Internet Explorer verziókban csak akkor működik, ha van DOCTYPE deklaráció megadva. Ezért bár nem kötelező a használata, erősen ajánlott mindig megadni. Ezen felül, ha nincs megadva dokumentumtípus, akkor a 45

46 A HTML böngésző megpróbálja kitalálni, hogy milyen szabványt használtunk az elkészítésénél. Ilyenkor azt feltételezi, hogy a dokumentum nem a jelenlegi szabványok szerint készült, hanem a régebbi módszerekkel, a régebbi böngészőkben való használatra. Az oldal ilyenkor is megjelenik, de nagyobb valószínűséggel eredményez nem várt kinézetet. A dokumentumtípus tehát azt adja meg, hogy az adott oldal milyen (X)HTML verziót használ. Ez két dologra használatos: egyrészt a böngésző ez alapján dönti el, hogyan jelenítse meg az oldalt, másrészt a dokumentum érvényességét ellenőrző validátor programok (ld fejezet) is ez alapján dolgoznak. A DOCTYPE először is azt határozza meg, hogy az oldal HTML-t vagy XHTML-t használ, valamint a szabvány verziószámát is megadja. Ezen kívül akár HTML-t, akár, XHTML-t használunk, háromféle dokumentumtípusból választhatunk. Strict: a legújabb szabványnak megfelelő dokumentumtípus, az elavult, megjelenítést befolyásoló elemek használata nem megengedett (tehát nem lehet a HTML-ben megadni például a betűtípust, színt vagy félkövér formázást). Transitional: kevésbé szigorú szabvány, megengedi a formázási elemek használatát is. A régebbi oldalakkal való kompatibilitást teszi lehetővé, de a használata kerülendő. Frameset: megengedi a frame-k, azaz keretek használatát. A frame egy régebbi módszer volt a dokumentum részekre bontására, amelyekbe egymástól függetlenül lehetett HTML oldalakat betölteni. Általában menük készítésére használták: az egyik frame tartalmazta a menüt (például felül vagy balolodalt), az ebben lévő linkekre kattintva pedig megnyílt a tartalom a másik frame-ben. Ez a technika szintén elavultnak számít, használata nem javasolt. 46

47 A HTML Az XHTML gyökéreleme (mint az az előbbi példa deklarációból is látszik), mindig html. Az xmlns attribútum segítségével definiálhatjuk, hogy egy XHTML dokumentumról van szó, az opcionális xml:lang attribútum pedig a dokumentum nyelvét adja meg. <html xmlns=" xml:lang="en"> Head és body Minden HTML dokumentum két fő részből áll, egy fejlécből (<head>) és egy törzsből (<body>). A head elem olyan információkat foglal magába, amelyek általában nem jelennek meg közvetlenül a dokumentumban, de fontos információkat tartalmaznak a helyes megjelenítéshez. A body elem tartalmazza a megjelenítendő dokumentumot. A head elemen belül az alábbi elemek használhatók: A <title> definiálja az oldal címét, amely a böngésző címsorában jelenik meg, továbbá a keresők is ezt jelenítik meg a találati oldalon. A <link> elem segítségével külső erőforrásokra hivatkozhatunk, a leggyakrabban CSS stíluslapok behívására használják. A rel attribútummal adhatjuk meg a linkelt erőforrás és a dokumentum kapcsolatát, például stílusdefiníció esetében rel="stylesheet" értéket kell használni. A type attribútum adja meg az erőforrás MIME-típusát, például text/css formában. A href attribútumban kell definiálni az erőforrás URL-jét, azaz elérési útvonalát. A media attribútum segítségével megadhatjuk, hogy milyen eszközön legyen használva a hivatkozott fájl, ezzel lehetőség van például eltérő megjelenést definiálni képernyő (screen) vagy nyomtatott dokumentum (print) számára. 47

48 A HTML A <style> elem lehetővé teszi a stílusdefiníciók elhelyezésété a dokumentumon belül. Kötelező megadni a type attribútumot, amelynek értéke mindig text/css. Itt is használható a media attribútum ugyanúgy, mint a link elemnél. A <meta> elem segítségével metaadatokat adhatunk a weblaphoz, amelyeket a böngésző vagy valamilyen webes szolgáltatás (pl. keresők) tudnak hasznosítani. Minden metaadat definíció tartalmaz egy name és egy content attribútumot, amelyek értelemszerűen a meataadat típusát és értékét adják meg. A leggyakoribb metaadatok a következők: Description: az oldal tartalmának néhány mondatos leírása Keywords: kulcsszavak vesszővel elválasztott listája Author: a dokumentum szerzője Generator: a program neve, amely létrehozta az oldalt Owner: a dokumentum tulajdonosa A name helyett használható a http-equiv is, ha HTTP header információt szeretnénk szimulálni: Content-type: megadja az oldal MIME típusát (text/html) és karakterkódolását Date: az oldal létrehozásának időpontját adja meg Last-modified: az utolsó módosítás időpontja Expires: az oldal lejáratának (elévülésének) időpontja Location: átirányít egy másik oldalra Refresh: automatikusan újratölti az oldalt a megadott gyakorisággal Egy XHTML dokumentum alapstruktúrája a kövekező: 48

49 A HTML <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " <html xmlns=" xml:lang="hu"> <head> <title>az oldal címe</title> <meta name="description" content="ide jön a leírás"/> <meta name="keywords" content="html, XHTML, web"/> <meta http-equiv="content-type" content="text/html;charset=utf-8"/> <link rel="stylesheet" type="text/css" href="style.css" media="screen"/> <link rel="stylesheet" type="text/css" href="print.css" media="print"/> <style type="text/css"> <!-- ide kerülhetnek a stílusdefiníciók --> </style> </head> <body> <!-- az oldal tartalma --> </body> </html> 49

50 A HTML Bekezdések és szövegformázás A HTML-ben az összefüggő szövegeket bekezdésekbe rendezzük, amelyeket a <p> (paragraph) tag jelöl. A böngészők a bekezdéseket automatikusan új sorban jelenítik meg. A bekezdésen belüli új sorokat nem veszik figyelembe, ahogy a tabulátorokat és többszörös szóközöket sem. Minden <p> és </p> közötti szöveg folyamatosan, sortörések nélkül jelenik meg. Ha új sort szeretnél kezdeni, akkor vagy új bekezdést kell kezdeni, vagy pedig sortörés (<br/>) elemet kell beszúrni. Ha meg szeretnéd tartani a tördelést, akkor a szöveget <pre> és </pre> tagok közé kell tenni. Ez a tag előre formázott (pre-formatted) szövegrészt jelöl, amely megtart minden sortörést és szóközt, emiatt alkalmas például kódrészletek leírására. A böngészők általában fix szélességű betűtípussal (pl. Courier) jelenítik meg. Nézzük a következő példát: <pre> function factor(base) { var factor = 1; for (i=2; i<=base; i++) { factor = factor * i; } return factor; } </pre> A példa kimenete: function factor(base) { 50

51 A HTML } var factor = 1; for (i=2; i<=base; i++) { factor = factor * i; } return factor; A HTML lehetővé teszi bizonyos formázások meghatározását, ezek használata azonban nem javasolt. A HTML a dokumentum tartalmát, struktúráját definiálja, míg a megjelenését ettől függetlenül, CSS segítségével adjuk meg. Lehetőség van azonban kiemelések beillesztésére a <strong> és az <em> tagek segítségével. Előbbiek általában félkövéren, utóbbiak dőlten jelennek meg alapértelmezés szerint. Fontos kiemelni, hogy ez a két tag csak annyit jelent, hogy a megjelölt szövegrész valamilyen értelemben fontos, kiemelendő, nem pedig konkrét formázási utasítást jelöl. A weboldal szerkesztője szabadon megválaszthatja, hogy milyen módon jelenjenek meg ezek a szövegrészek, használhat például eltérő színnel történő kiemelést is. <p>a szövegben megadhatunk <strong>kiemeléseket</strong> és <em>hangsúlyos részeket</em> is. A fenti példa a következőképpen jelenik meg az alapértelmezett beállításokkal: A szövegben megadhatunk kiemeléseket és hangsúlyos részeket is. További formázási lehetőségként használhatunk alsó indexbe (<sub>) és felső indexbe (<sup>) tett szövegeket. <p>a víz vegyjele: H<sub>2</sub>O.</p> <p>einstein híres egyenlete: E = m*c<sup>2</sup>.</p> 51

52 A HTML A fenti példa kimenete: A víz vegyjele H 2 O. Einstein híres egyenlete: E = m*c 2. Léteznek speciális HTML tagek, amelyekkel különböző szövegrészeket jelölhetünk, mint például idézeteket, rövidítéseket, definíciókat, beszúrt vagy törölt szöveget. Ezeket a gyakorlatban ritkán használják, így most nem térünk ki a használatukra. A használható tagek teljes listája megtalálható például a oldalon Címsorok A HTML szabvány hat szintű címsort (headinget) definiál, amelyet a <h1>, <h2> <h6> tagek jelölnek. A h1 jelöli a legfelső szintű, azaz legfontosabb címsort. A címsorok használata segít strukturálni a szöveget. Főleg hosszabb dokumentumok esetében hasznos kiemelni az egyes szakaszokat. A böngészők a címsorokat általában félkövéren és nagyobb betűkkel emelik ki, a h1-et legnagyobb betűkkel, a mélyebb szinteket pedig egyre kisebbekkel. 52

53 A HTML Listák A HTML-ben kétfajta listát lehet létrehozni: a sorszámozott listát <ol> (ordered list), a felsorolt listát <ul> (unordered list) jelöli. Mindkét listatípuson belül az elemeket <li> tag jelöli. A listákat egymásba is lehet ágyazni, mint az alábbi példa is mutatja: <ol> <li>első elem</li> <li>második elem <ul> <li>altípus 1</li> <li>altípus 2</li> </ul> </li> <li>harmadik elem</li> </ol> Ezt a példát a böngésző a következőképpen jeleníti meg: 1. Első elem 2. Második elem Altípus 1 Altípus 2 3. Harmadik elem 53

54 A HTML Linkek A linkek a weboldalak legfontosabb elemei közé tartoznak, ezek segítségével lehet ugyanis kapcsolatot teremteni különböző oldalak között. A link olyan szövegrész (vagy kép), amelyre kattintva a felhasználó egy másik oldalra, vagy az aktuális oldal egy meghatározott pontjára ugorhat. A legtöbb böngésző alapértelmezetten aláhúzva és kék színnel jeleníti meg a linkeket. A linkek alapszintaxisa a következő: <a href=" ide!</a> A href attribútum adja meg a link célját, ez több fajta is lehet: Relatív útvonal, pl. masikoldal.html Abszolút útvonal, pl. Könyvjelző az aktuális oldalon belül, pl. #labjegyzet Könyvjelző egy másik oldalon, pl. Könyvjelzőt a name vagy id attribútummal lehet létrehozni. A két jelölésmód egyenértékű. A name használata konvencionális, de a HTML5 szabvány az id használatát írja elő. Mivel ez működik a korábbi verzióban is, célszerű áttérni ennek a használatára. A könyvjelzők hasznosak például, ha egy hosszabb dokumentum elején vagy végén tartalomjegyzéket szeretnénk létrehozni. <a name="labjegyzet">lábjegyzet</a> <a id="labjegyzet">lábjegyzet</a> A target attribútum azt adja meg, hogy hol nyíljon meg a linkelt oldal. A következő értékek használhatók: 54

55 A HTML Érték _self _blank _parent _top Leírás Aktuális böngészőlap vagy keret Új ablak vagy lap Az aktuális lap vagy keret szülőjében Legfelső keret (vagyis a teljes lap) 6. táblázat: Target attribútum értékei Képek A HTML lehetővé teszi a szövegen kívül más médiaformátumok, mindenekelőtt képek használatát is. A képek beillesztésére az <img> tag szolgál, melynek attribútumai a következők: Src: a kép forrása, azaz az elérési útvonala Alt: alternatív szöveg, amely akkor jelenik meg, ha a böngésző nem tudja letölteni a képet. A képernyőolvasó programok is ezt használják. Height: a kép magassága pixelben megadva Width: a kép szélessége pixelben megadva A szélesség és a magasság megadása opcionális, de ajánlott mindig használni. Példa az img használatára: <img src="book.jpg" alt="ez egy könyv" height="150" width="400" /> Ha a képet linkként szeretnéd használni, akkor egyszerűen illeszd be egy <a> elembe: 55

56 A HTML <a href="details.html"><img src="icon.jpg" alt="kattints ide a részletekért" width="32" height="32" /></a> Táblázatok Táblázatokat a <table> tag segítségével lehet készíteni. A táblázat sorait a <tr> (table row) tag definiálja, a cellákat <td> (table data). A táblázat cellái tartalmazhatnak szöveget, képeket, listákat, linkeket, beágyazott táblázatokat stb. A table tag border attribútuma a táblázat keretének vastagságát adja meg pixelben. (Összetettebb keretet a CSS segítségével készíthetünk.) Egy egyszerű táblázatot a következőképpen készíthetünk: <table border="1"> <tr> <td>08:00</td> <td>dr. Gipsz Elek</td> <td>vakbél</td> </tr> <tr> <td>09:00</td> <td>dr. Joó Áron</td> <td>porckorongsérv</td> </tr> </table> A fenti példa egy műtő beosztását mutatja, amely a böngészőben a következő formát ölti: 56

57 A HTML 08:00 dr. Gipsz Elek vakbél 09:00 dr. Joó Áron porckorongsérv Ha a táblázatunkhoz fejlécet szeretnénk adni, akkor használjuk a <th> taget! A fejléc celláit td helyett ebbe kell tenni.: <table> <tr> <th>időpont</th> <th>orvos neve</th> <th>műtét típusa</th> </tr>... A böngészők a fejlécet általában félkövéren és középre zártan jelenítik meg. Időpont Orvos neve Műtét típusa 08:00 dr. Gipsz Elek vakbél 09:00 dr. Joó Áron porckorongsérv Lehetőség van a táblázat soraihoz jelentés rendelni, azaz megadni, hogy mely sorok alkotják a táblázat fejlécét, törzsét és láblécét. Ehhez a <thead>, <tbody> és <tfoot> elemek használhatók. Ez akkor lehet hasznos, ha például egy hosszú táblázat nyomtatásánál minden oldal tetején ill. alján meg szeretnénk ismételni a fejlécet ill. a láblécet, vagy ha a táblázat törzsét a fejléctől és lábléctől függetlenül szeretnénk görgetni. Mindhárom elemet közvetlenül a table gyermekeként, a tr-ek szülőjeként kell megadni: <table> 57

58 A HTML <thead> <tr>... </tr> </thead> <tbody>... </tbody> <tfoot>... </tfoot> </table> Bonyolultabb táblázatok létrehozásakor hasznos a td tag colspan és a rowspan attribútuma. Előbbi segítségével oszlopokat, míg utóbbival sorokat lehet összevonni. Mindkét attribútum értéke azt mondja meg, hogy hány sor ill. oszlop kerüljön összevonásra. Tekintsük a következő példát: <table> <tr> <td>a1</td> <td rowspan="2">b1-2</td> <td>c1</td> </tr> <tr> <td>a2</td> <td>c2</td> 58

59 A HTML </tr> <tr> <td colspan="3">a-b-c3</td> </tr> </table> Az előbbi példa kimenete: A1 B1-2 C1 A2 A-B-C3 C Csoportosító elemek A HTML elemeknek két alapvető típusát különböztethetjük meg: A block elemek elé és mögé a böngészők sortörést helyeznek el. Ilyen elemek a p, h1, ul, table stb. Az inline elemek sortörés nélkül, folyamatosan jelennek meg a szövegben. Ilyenek pl. a strong, em, a, img. Lehetőség van az alapértelmezett megjelenés felülírására is. Ha például egy lista elemeit egymás mellett, horizontálisan szeretnéd elrendezni, akkor az ul elem megjelenését inline-ra kell állítani az alapértelmezett block helyett. 59

60 A HTML A HTML kétfajta csoportosító elemet kínál: a <div> block típusú, a <span> inline típusú. Közös jellemzőjük, hogy nincs speciális jelentésük, a kimenetben nem jelennek meg közvetlenül, mindössze a div esetén kerül elé és mögé egy-egy sortörés. A szerepük szövegrészek vagy más elemek csoportosításában van. A fő használati módjuk a stílusok alkalmazásakor van. A div kiválóan alkalmas például az oldal elrendezésének elkészítéséhez, hasábok, menük, oldaldobozok készítésére. A stílusokról bővebben a 5. Fejezetben olvashatsz További elemek A HTML egy fontos és gyakran használt eszköze az űrlap, amelynek segítségével interaktívvá lehet tenni a weboldalakat. Az űrlapokon keresztül a felhasználó adatokat vihet be, amelyeket a szerver képes feldolgozni és műveleteket végrehajtani velük. Az űrlapok használatát a Weblabor tantárgy 2. moduljában tanulhatod meg. A weboldalakba rövid programokat, úgynevezett szkripteket is be lehet illeszteni, amelyek szintén az interaktivitást növelik, dinamikussá tehetik az oldalakat. Erről a 3. modulban tanulhatsz. Viszonylag gyakran használt elem még az <object>, amelynek segítségével különböző objektumokat (leggyakrabban Flash animációt) lehet beágyazni az oldalba. Ennek részletes szintaxisára most nem térünk ki. Szintén nem beszéltünk még néhány ritkán használt, speciális elemről. A HTML-ben használható össze elem listáját megtalálhatod például a oldalon. 60

61 A CSS 5 A CSS 5.1 CSS alapok A CSS (Cascading Style Sheets) a weboldalak megjelenésének szabályozására, azaz a színek, betűtípusok, mérteke, elrendezés stb. beállítására szolgál. A korai HTML oldalak beágyazva tartalmazták ezeket az információkat, ez azonban számos hátránnyal járt. Minden egyes elemnél be kellett állítani a megjelenést, ami miatt az oldalak rengeteg redundáns információt tartalmaztak. A karbantartás is nehézkes volt: ha például valaki úgy döntött, hogy piros helyett kék címeket szeretne használni, akkor minden egyes címsornál át kellett írni a színt. Ez vezetett a CSS kialakulásához, amely lehetővé tette a tartalom és a megjelenés szétválasztását. Ha az előbbi példában CSS-t használunk, akkor elegendő a színt egy helyen átírni. A CSS szabályok tárolhatók külső fájlban, így ugyanaz a szabályhalmaz felhasználó egy honlap összes oldalán, egységes megjelenést biztosítva. A CSS szabályok két fő részből állnak. A selector határozza meg, hogy a szabály melyik elemekre vonatkozik. Minden selectorhoz egy vagy több deklaráció tartozik, amelyeket { és } közé kell tenni. A deklarációk tulajdonság: érték; formájúak. Egy egyszerű deklaráció, amely minden h1 elemet piros színűre és 14 pixel nagyságúra állít be, a következő formát ölti: h1 { color: red; font-size: 14px; } 61

62 A CSS A deklarációkat a jobb olvashatóság érdekében szokás külön sorba írni. Megjegyzéseket /* és */ közé lehet írni. A CSS szabályok háromféleképpen helyezhetők el egy HTML dokumentumban. Ha külső fájlban tároljuk a szabályokat, akkor a link elemet kell használni, amit célszerű a fejlécbe tenni: <link rel="stylesheet" type="text/css" href="style.css" /> Lehetőség van a HTML oldalba beágyazni a stílusokat. Ennek az a hátránya, hogy csak az adott dokumentumban használhatóak, nem lehet másik oldalnál újra felhasználni. Ezeket a stílusak a style elem segítségével kell megadni. <style type="text/css"> h1 {color: red;} </style> A harmadik lehetőség, hogy közvetlenül egy adott elemhez rendelünk stílusszabályokat, ezt inline stílusnak nevezik. Ezzel a módszerrel elveszik a CSS számos előnye, mivel nem választja szét a tartalmat a megjelenéstől, ezért csak ritkán célszerű használni. Akkor lehet hasznos, ha valami miatt egy elemet másképpen szeretnénk megjeleníteni, mint az oldal többi részét, például egyetlen címsort kiemelni más színnel. Ekkor az elemhez style attribútumot kell adni, amelynek értékeként kell felsorolni a deklarációkat. <h1 style="color:red">címsor piros színnel</h1> Egy dokumentumhoz több stíluslapot is definiálhatunk, akár több külső fájlként, akár külső és belső definícióként vegyesen. Ugyanazt a tulajdonságot több helyen is definiálhatjuk, például 62

63 A CSS külső és belső stíluslapon. Ilyenkor a böngészőnek el kell dönteni, hogy melyiket vegye figyelembe. A döntés az alábbi prioritás szerint történik: 1. Inline stílus 2. Belső stílusdefiníció (style tag a fejlécben) 3. Külső stílusdefiníció (link tag) 4. Böngésző alapértelmezett stílusa Fontos azonban az is, hogy milyen sorrendben illesztjük be a stílusdefiníciókat: ha a külső definícióra a belső után hivatkozunk, akkor az lesz magasabb prioritású. 5.2 CSS selectorok Mint azt már az előző fejezetben említettük, a selectorok határozzák meg, hogy egy adott CSS definíció mely elemre vonatkozik. Ebben a részben részletesen végigjárjuk a lehetőségeket. A legegyszerűbb, ha taghez rendeljük a stílusokat. Ekkor az összes, megadott típusú tag (pl. az összes h2 szintű címsor) ugyanezt a stílust kapja. Ilyen deklarációra láthattál példát az előző fejezetben. De mi van akkor, ha csak egy vagy néhány bekezdéshez szeretnénk stílust megadni, de nem az összeshez? Ha egy elemhez szeretnénk rendelni, akkor használjuk az id-t! Az id egy egyedi azonosító, amely egy HTML elemet azonosít. Egy oldalon egy id csak egyszer szerepelhet. Az id tartalmazhat betűket, számokat, aláhúzást, kötőjelet, de nem kezdődhet számmal. Az idt attribútumként bármelyik elemhez meg lehet adni, például egy bekezdéshez: <p id="abstract">ide jön a cikk összefoglalója</p> 63

64 A CSS A CSS definíciókban az id-ra a # karakterrel hivatkozhatunk. A fenti példabekezdéshez az alábbi kóddal adhatunk stílusdefiníciót: #abstract { font-size: 12px; } Ha több elemhez szeretnénk azonos CSS-t rendelni, akkor a class-t kell használni. Ezt az idhez megegyező módon kell használni, azaz bármelyik elemhez rendelhetjük attribútumként. A lényeges különbség, hogy bármennyi elemnek lehet ugyanazt a class-t adni. Egy elemhez több class-t is lehet adni, ilyenkor szóközzel kell ezeket elválasztani. Ha például egy cikk lábjegyzeteit külön bekezdésekbe írjuk, akkor használhatjuk az alábbi HTML kódot: <p class="labjegyzet">ez egy lábjegyzet</p> <p class="labjegyzet">ez egy másik lábjegyzet</p> A CSS definíciókban a classra. (pont) karakterrel hivatkozhatunk:.labjegyzet { font-size: 10px; } Lehetőség van arra is, hogy ha ugyanazt a class-t különböző típusú elemekhez rendeltük, akkor ezekre külön-külön hivatkozzunk. Ilyenkor az elem_név.class_név szintaxist kell használni. Például a p.labjegyzet selector az összes olyan p elemre hatással van, amelyek rendelkeznek a labjegyzet class-szal. Nem vonatkozik viszont 64

65 A CSS sem az ezzel a class-szal nem rendelkező bekezdésekre, se a class-szal rendelkező, de nem p típusú elemekre. Ha ugyanazt a stílust többfajta elemre szeretnénk alkalmazni, akkor élhetünk az összevonás eszközével. Ilyenkor a különböző selectorokat vesszővel elválasztva kell felsorolni. Használhatunk vegyesen tag, id és class alapú selectorokat is. Ha például minden fejlécet egyforma színnel szeretnénk megjeleníteni, akkor használhatjuk a következő CSS-t: h1, h2, h3 { color: green; } A selectorokat egymásba is ágyazhatjuk, így összetettebb szabályokat hozhatunk létre. Vegyük például a következő szerkezetű oldalt: <div id="header">... </div> <div id="article"> <h1>cikk címe</h1> <p>cikk szövege...</p> <p>...</p>... </div> <div id="footer">... </div> 65

66 A CSS Itt az oldalt három részre osztottuk: egy fejlécre, ahol pl. a cég logója helyezhető el, egy fő részre, ahová a megjelenítendő cikk tartalma kerül, és egy láblécre, ahova impresszumot, elérhetőséget stb. lehet elhelyezni. Mindhárom részbe kerülhetnek szöveges részek (p elemek), amelyeket eltérő módon szeretnénk megformázni. Hogyan oldhatjuk ezt meg? Az egyik lehetőség, hogy minden egyes p elem kap egy class-t, mint például p_header, p_article, p_footer. Ez azonban nehézkes, mivel minden bekezdésnél meg kell adni, és ha csak egy helyen is elfelejtjük, akkor az a bekezdés ki fog lógni a sorból. Szerencsére a CSS biztosít egy egyszerűbb megoldást is, méghozzá a selectorok egymásba ágyazását. Ennek segítségével megadhatjuk, hogy a stílusok csak egy adott selectoron belül elhelyezkedő selectorra legyenek érvényesek, tehát például az article id-jű elemen belül. Ekkor a selectorokat vesszővel kell elválasztani egymástól: #article p {... } 5.3 CSS mértékegységek A CSS-ben az értékeket többfajta mértékegységben is meg lehet adni. Használhatók különböző hosszmértékegységek, mint például a cm, mm, in (inch), pt (pont, értéke 1/72 inch). Ezek elsősorban nyomtatásra szánt dokumentumok esetében lehetnek hasznosak, ill. a pt-t a font méreteknél használjuk gyakran. Képernyőn történő megjelenítés esetén célszerűbb a méreteket pixelben (px) megadni. Hasznos egység még az em, amely az aktuális font méretének felel meg. Ha tehát az aktuális fontméret 11pt, akkor 2em 22 pt-nak felel meg. Az em relatív méretek megadásakor hasznos, segítségével megadhatjuk például, hogy a címsorok a normál szövege hányszoros méretei legyenek, így az arányok a szöveg átméretezésekor is megmaradnak. Könnyen készíthetünk dinamikusan átméretezhető oldalt, ha megadjuk az alap 66

67 A CSS fontméretet, és mindent ehhez viszonyítva, azaz em egységben adunk meg. Ez különösen hasznos például gyengén látók számára, akik könnyebben olvassák a nagyobb betűméreteket. Megadhatjuk a méreteket a szülő elem méretének százalékában is, relatív méreteket definiálva ezzel. Ha például egy elem szélességét 100%-ra állítjuk, akkor az teljesen kitölti a rendelkezésre álló méretet, a képernyő méretétől függetlenül. Használhatjuk egyforma szélességű táblázat oszlopok készítéséhez is, ha két oszlopnál 50-50%-ra, háromnál 33-33%- ra stb. állítjuk a szélességeket. De lehet természetesen bármilyen arányt használni, pl %-ot, így az oszlopok egymáshoz viszonyított mérete mindig állandó marad. A fenti mértékegységeket bármilyen olyan tulajdonságnál használhatjuk, ahol méretet kell megadni, például szélesség, magasság, margók. Fontos, hogy az értéket és a mértékegységet szóköz nélkül kell megadni, tehát a 30px a helyes megadási mód, a 30 px helytelen. 5.4 A CSS elemkészlete Szövegformázás A következőkben ismertetett formázási lehetőségeket bármely szöveget tartalmazó elemre (például p, div, a, li, td) lehet alkalmazni. Számos CSS tulajdonság áll rendelkezésre a szövegek megjelenésének beállítására, ebben a részben ezeket tekintjük át. Betűszín A betűk színét a color tulajdonság adja meg. A színeket a CSS-ben háromféleképpen lehet megadni: 67

68 A CSS Névvel: a gyakoribb színek megadhatók az angol elnevezésükkel, pl. red, blue, black, purple. Az elérhető színek teljes listáját megtalálhatod a oldalon. RGB értékkel: a szín piros, zöld és kék komponensének értékét megadhatod 0 és 255 közötti számként, a következő formában: rgb(255,0,0). Hexadecimális kóddal: a szín RGB kódját hexadecimális formában is meg lehet adni, # karakter után, pl. #FF0000. Ebben az értékben 2-2 karakter jelöli az egyes színkomponenseket, melyekben a 0-9 és A-F karakterek használhatók. A jelölés kisés nagybetűkre nem érzékeny. Betűméret, betűstílus A karakterek méretét a font-size tulajdonság segítségével adhatjuk meg. A betűméret megadható fix (pl. px vagy pt) vagy relatív (pl. em) egységekben. Fontos, hogy ne a betűméretet használd pl. a címek elkészítéséhez, hanem először add meg a megfelelő HTML elemet (pl. h1, h2, p), és utána módosítsd a stílusokat, ha szükséges. Dőlt betűs szöveghez a font-style: italic; míg félkövér szöveghez a fontweight: bold; használható. (Másfajta font-weight érték is megadható, ám ezek használhatósága függ a betűtípustól is.) Betűtípus A használandó betűtípust, azaz fontot a font-family tulajdonsággal definiálhatjuk. Az általános gyakorlat szerint több típust is szokás megadni, amelyek közül a böngésző az első elérhetőt használja. Az értékeket vesszővel kell elválasztani, a több szóból álló fontneveket idézőjelbe kell tenni. A betűtípus érték lehet konkrét font (family-name), mint például Times, Arial, Verdana, vagy pedig általános típus (generic-family), mint a serif vagy sans serif. 68

69 A CSS Általános típust általában a felsorolás végén szokás megadni, hogy ha semmilyen más font nem elérhető, akkor a böngésző ez alapján válasszon. font-family:"times New Roman", Times, serif A serif talpas, a sans serif talpatlan betűtípust jelöl. A talpas betűk általában jobban olvashatók hosszabb, nyomtatott szövegben. Ez a szöveg is talpas, Times New Roman fontot használ. Ezzel szemben a talpatlan betűk, mint az Arial vagy a Verdana, jobban olvashatók a képernyőn, így weblapokhoz ezeket érdemesebb használni. A kétféle betűt a 9. ábra hasonlítja össze. A B C d k l A B C d k l 9. ábra: Talpas betűk (felül, Times New Roman) és talpatlan betűk (alul, Verdana) 69

70 A CSS Igazítás A szöveget lehet balra, jobbra vagy középre igazítani, ill. sorkizárttá tenni, ehhez a textalign tulajdonságot kell megadni. A használható értékek: left: balra igazítás right: jobbra igazítás center: középre igazítás justify: sorkizárt Effektusok A text-decoration tulajdonság használatával különféle effektusokat (aláhúzás, áthúzás) lehet a szövegre alkalmazni. A használható értékek: underline: aláhúzás overline: felülvonás line-through: áthúzás none: nincs effektus Kisbetű-nagybetű Lehetőség van CSS segítségével megváltoztatni, hogy egy szövegrész kis- vagy nagybetűs legyen. Ehhez a text-transform tulajdonságot kell beállítani, amelynek a következő értékei vannak: uppercase: nagybetűs lowercase: kisbetűs capitalize: minden szó első betűje nagybetű Behúzás 70

71 A CSS Az indent tulajdonság azt adja meg, hogy a bekezdés első sora mennyivel kezdődjön beljebb, mint a többi sor. Negatív érték esetében az első sor előbb kezdődik. Sortávolság, szótávolság, betűköz A sorok közötti távolságot a line-height tulajdonság határozza meg. Ha csak egy számot adunk meg, akkor a sortávolság a betűméret ennyiszerese lesz. Használható százalékos és fix érték is. A szavak közötti távolságot a word-spacing definiálja, míg a betűk közötti távolság a letter-spacing segítségével állítható. Bármilyen egységben, pl. pixelben vagy centiméterben is megadható. Negatív érték esetén a betűk vagy szavak közötti távolságot csökkenti, azaz sűrűbben jelennek meg Hátterek Az egyes HTML elemekhez hátteret adhatunk, amely lehet akár egyszínű, akár valamilyen kép is. Számos finomhangolási lehetőség is rendelkezése áll, ebben a részben ezeket tekintjük át. Háttérszín A háttér színét a background-color tulajdonság állítja, az előző fejezetben megismert lehetőségek (név, rgb, hexa) közül bármelyik használható. Háttérkép 71

72 A CSS Lehetőség van képet használni háttérként, a böngészők általában a GIF, JPG, PNG formátumokat támogatják. A háttérkép megadásának szintaxisa a következő: background-image: url("image.jpg"); Használhatunk egyszerre háttérszínt és háttérképet is, ha a háttérképnek vannak átlátszó részei, vagy a kép nem tölti ki az egész elemet. Ilyenkor az átlátszó ill. kimaradó részeken a háttérszín látszik. Alapértelmezés szerint azonban ha a háttérkép mérete kisebb, mint az elem mérete, akkor a kép annyiszor ismétlődik vízszintesen és függőlegesen is, hogy kitöltse a teljes képet. (Ha a kép nem átlátszó, akkor ilyenkor a háttérszín megadásának nincs hatása.) Ha nem szeretnénk megismételni a képet, akkor a background-repeat tulajdonságot kell használni, melynek értékei a következők lehetnek (ld. 10. ábra): repeat: mindkét irányban megismétli a háttérképet, ez az alapértelmezett repeat-x: csak vízszintes ismétlés repeat-y: csak függőleges ismétlés no-repeat: nincs ismétlés, a kép csak egyszer jelenik meg 72

73 A CSS 10. ábra: A background-repat tulajdonság lehetséges értékei: repeat (balra fent), repeat-x (jobbra fent), repeat-y (balra lent), no-repeat (jobbra lent) A no-repeat érték használata esetén megadhatjuk, hogy a háttérkép hol helyezkedjen el az elemen belül. Ehhez a background-position tulajdonságot kell használni, amelynek értéke két elemből áll, egy vízszintes és egy függőleges pozícióból. A lehetséges értékek a következők (ld. 11. ábra): kulcsszavak: vízszintesen left/right/center, függőlegesen top/bottom/center százalékosan: a bal felső sarok 0% 0%, a jobb alsó sarok 100% 100% fix érték: bármilyen CSS egységben, például pixelekben a bal felső sarokhoz képest 11. ábra: A background-position tulajdonság lehetséges értékei: left center (balra), right bottom (jobbra) 73

74 A CSS Megadhatjuk továbbá, hogy a háttér együtt görgetődjön az oldal tartalmával, vagy fix pozíciót foglaljon el. Ehhez a background-attachment tulajdonságot kell használni, előbbi esetben scroll (ez az alapértelmezett), utóbbi esetben fixed értékkel. Ha egyszerre több háttértulajdonságot szeretnénk beállítani, akkor használhatjuk a rövidített background tulajdonságot. Ennek használatakor szóközzel elválasztva fel kell sorolni az összes background-xxx tulajdonságot, amit használni szeretnénk. Nem kötelező mindent megadni, a hiányzó tulajdonságok az alapértelmezett értékeket veszik fel. Az alábbi két CSS részlet tehát ekvivalens egymással: background-color: 0x6629EA; background-image: url("bg.png"); background-repeat: no-repeat; background-position: right top; /* a fenti négy sor helyett írhatjuk ezt: */ background: 0x6629EA url("bg.png") no-repeat right top; Linkek A linkekre minden általános formázás (pl. szín, betűtípus, háttér) alkalmazható. A továbbiakban megismerhetsz néhány, speciálisan a linkekre érvényes formázási lehetőséggel. A linkek négyfajta állapotot vehetnek fel: link: normál link, amire még nem kattintott a felhasználó visited: legalább egyszer már rákattintott a felhasználó 74

75 A CSS hover: a felhasználó a link fölé viszi az egeret, de még nem kattintott rá active: a linkre kattintás pillanatában veszi fel ezt az állapotot A link állapotaihoz különböző stílusokat lehet megadni. Ehhez a selectort úgy kell definálni, hogy az a tag után kettősponttal elválasztva meg kell adni az állapot nevét, tehát pl. a:link, a:hover. Fontos betartani a sorrendet: a hover a link és visited után, az active a visited után kell hogy álljon. A négy állapot közül legtöbbször a hover-t szokták használni, például a szín megváltoztatására vagy az aláhúzás megjelenítésére/elrejtésére akkor, amikor az egérrel a linkre állunk. A hover állapot a linken kívül más HTML elemekre is alkalmazható Listák Mint azt már a HTML-ről szóló fejezetben megtanulhattad, kétfajta listát lehet használni: sorszámozott (ol) és felsorolt (ul) listát. A CSS segítségével beállítható, hogy milyen szimbólum jelenjen meg a listaelemek előtt, ehhez a list-style-type tulajdonságot kell használni. A lehetséges értékek: ul esetébe: o circle disc square none 75

76 A CSS ol esetében: 1. decimal a. lower-alpha A. upper-alpha i. lower-roman I. upper-roman none Ezeken kívül létezik még néhány ritkán használt, egzotikus listajel, mint például görög, héber vagy japán karakterek. Ha azonban egyik beépített lehetőség sem felel meg, lehetőség van bármilyen képet felhasználni. Ekkor a list-style-image tulajdonsághoz kell megadni egy képfájlt, a már jól ismert url("list.jpg") formában. A különböző böngészők némileg eltérően jeleníthetik meg a listajelként használt képeket, például eltérhet a méretük. Ha ezt ki szeretnénk küszöbölni, akkor alternatív megoldásként a listajel háttérképként beállítva is megjeleníthető A doboz modell A HTML elemek dobozokként (box) képzelhetők el. A doboz modell alapján az elemek több, egymásba ágyazott dobozból állnak, amelyek tulajdonságai külön-külön változtathatók. A 12. ábra szemlélteti a doboz modell elemeit. 76

77 A CSS Margin Border Padding Tartalom 12. ábra: A doboz modell A margin a doboz külső margóját adja meg, azaz azt a távolságot, amit üresen kell hagyni az elem körül. A margónak nincs háttere, mindig átlátszóan jelenik meg. A border az elem keretét adja, a padding pedig belső margót, azaz a tartalom és a keret közti üres helyet. A padding részt a megadott háttér kitölti. A tartalom tartalmazza az elem szövegét, a beillesztett képeket stb. Az elem méretét a width (szélesség) és a height (magasság) tulajdonságok adják meg. Mindkettő a tartalom részre vonatkozik, az elem által elfoglalt teljes hely az alábbiak szerint számítható ki: Teljes szélesség = bal margin + bal border + bal padding + tartalom szélessége + jobb padding + jobb border + jobb margin Teljes magasság = felső margin + felső border + felső padding + tartalom magassága + alsó padding + alsó border + alsó margin Fontos, hogy inline típusú elemeknek nem lehet meghatározni a méretét! 77

78 A CSS Fix méreten kívül meg lehet határozni minimális (min-width, min-height) és maximális (max-width, max-height) méreteket is. Az Internet Explorer 8-as és korábbi verziói a paddinget és a bordert is beleszámítják a szélességbe és magasságba, ha nincs DOCTYPE megadva. A margin méretét a margin tulajdonsággal lehet beállítani. Az egyes oldalakhoz különböző méret adható meg a margin-left (bal), margin-right (jobb), margin-top (felső) és margin-bottom (alsó) használatával. Az értéket meg lehet adni bármelyik CSS egységben. Auto érték esetén a böngésző automatikusan állítja be a margót, ez általában vízszintesen középre igazítást jelent. Negatív értékek is használhatók, ekkor az elem átfedhet más elemekkel. A margin tulajdonságot használva egyszerre adhatjuk meg az összes margót, a következő szabályok szerint: Ha 1 értéket adunk meg, akkor az összes oldalra ez vonatkozik Ha 2 értéket adunk meg, akkor az első a felső és alsó, a második a bal és jobb oldalra vonatkozik Ha 3 értéket adunk meg, akkor az első a felső, a második a bal és jobb, a harmadik az alsó oldalra vonatkozik Ha 4 értéket adunk meg, akkor külön adhatjuk meg a felső, jobb, alsó, bal oldalt, ebben a sorrendben A padding értékeket a margin-nal megegyező módon lehet definiálni, a padding kulcsszó használatával. Az egyetlen kivétel, hogy az auto érték nem használható. 78

79 A CSS Keret megadásához definiálni kell a keret stílusát, színét és szélességét. A stílus használata kötelező, enélkül nem jelenik meg a keret. A stílust a border-style használatával kell megadni. Az elérhető stílusokat a 13. ábra mutatja. 13. ábra: Keret stílusok A keret szélességét a border-width tulajdonsággal kell megadni, pixelben. A színt a border-color definiálja, az ismert módszerekkel. Mindegyiknél (beleértve a border-stylet is) használható a korábban megismert egy, két, három vagy négy értékes változat a különböző oldalak tulajdonságainak beállításához. Ha csak az egyik oldalhoz szeretnénk keretet, akkor a border kulcsszó után be kell illeszteni a top/left/right/bottom kulcsszó valamelyikét, tehát pl. border-left-style, border-bottom-color. A border tulajdonságot használva a három tulajdonság egyben is megadható: border: 1px solid black; 79

80 A CSS Táblázatok A táblázatok celláinak formázásához az eddig megismert tulajdonságok többsége használható, beleértve a szövegformázásokat, a hátteret, a méretezést, a paddingot és a kereteket. Ha azonban egy táblázatra a következő CSS-t alkalmazzuk: table, td { border: 1px solid black; }, akkor a következő eredményt kapjuk: A dupla keret megjelenésének az az oka, hogy a táblázat, valamint minden egyes cella különálló szegélyt kapott. Ahhoz, hogy ezt elkerüljük, a border-collapse tulajdonságot collapse értékűre kell állítani. Ekkor az egymás melletti szegélyek összevontan jelennek meg: Megjelenítés Az egyes HTML elemeket el lehet rejteni, hogy azok ne látszódjanak a dokumentumban. Erre két megoldás kínálkozik: a display: none és a visibility: hidden utasítások. 80

81 A CSS Mindkettő hatására eltűnik az elem, de másképpen viselkednek. Előbbi hatására a böngésző úgy jeleníti meg az oldalt, mintha az adott elem nem is szerepelne a HTML-kódban. Utóbbi hatására az elem csak láthatatlanná válik, de ugyanúgy elfoglalja a helyét. Nézzünk egy példát! Ha az elefántot ábrázoló képre a display: none tulajdonságot alkalmazzuk, akkor az eredmény a következő lesz: Ha azonban a visibility: hidden stílust használjuk, a kimenet így változik: Rejtett elem megjelenítésére a visibility: visible szolgál. A display: none használatával elrejtett elem megjelenítése attól függ, hogy milyen elemről van szó. A display 81

82 A CSS segítségével lehet ugyanis beállítani, hogy egy elem inline vagy block típusú legyen, így a megjelenítéshez az elemnek megfelelő értéket kell megadni. Azaz egy rejtett bekezdés felfedéséhez a display: block, míg egy rejtett link felfedéséhez a display: inline kód szükséges. A display tulajdonság használható arra is, hogy egy elem alapértelmezett megjelenését megváltoztassuk, azaz block elemet inline módon kezeljünk, vagy fordítva. Ha például li elemeket inline típusúra állítunk, akkor vízszintesen elrendezett listát kapunk, ami menüként használható. A CSS lehetővé teszi néhány további, speciális display mód használatát is, ezekre nem térünk ki részletesen. Érdemes azonban megemlíteni az inline-block módot, amikor is az elem inline módon, vagyis sortörések nélkül jelenik meg, egyéb tekintetben azonban block-ként viselkedik. Így lehetőség nyílik például a méreteinek megadására Pozicionálás Alapértelmezés szerint az egyes HTML elemek egymást követően jelennek meg a böngészőben, a block típusúak sortöréssel, az inline típusúak folyamatosan. Ezt azonban (mint szinte mindent) meg lehet változtatni CSS segítségével, és az elemek akár egymással átfedésben is elhelyezhetők. Ebben a részben áttekintjük a pozicionálási lehetőségeket. Az elem pozícióját minden esetben a top, bottom, left és right tulajdonságokkal adhatjuk meg, értékük lehet fix vagy százalékos méret. A viszonyítási alap a pozícionálás típusától 82

83 A CSS függ. Általában elegendő ezek közül kettőt megadni, egy vízszinteset (left vagy right) és egy függőlegeset (top vagy bottom). A pozícionálást a position tulajdonsággal adjuk meg, enélkül az előbbieknek nincs hatásuk. Az alapértelmezett érték a static, ekkor az elhelyezkedést nem lehet befolyásolni. A fixed pozícionálás esetén az elem helyzetét a böngészőablakhoz képest kell megadni, és az az oldal görgetésekor sem változik. A relative érték esetében az eredeti pozíciójához képest eltolhatjuk az elemet valamelyik irányban. Negatív értéket is használhatunk. Ha például három egymás követő bekezdésnél relative pozicionálást használunk, és a másodiknál left: 20px, a harmadiknál left: -20px értéket adunk, a következőhöz hasonló hatást érhetünk el: Ez az első bekezdés normál pozíciója. Pozitív értéke esetén jobbra, azaz beljebb kezdődik. Negatív érték esetén balra, azaz kijjebb kezdődik. Absolute pozíció esetében az elem helyzete az első olyan szülőjéhez képest kerül meghatározásra, amely nem static pozíciójú. Ha nincs ilyen, akkor a html taghez képest helyezkedik el. Ha az elemek átfedik egymást, akkor a sorrendjük a z-index tulajdonság alapján kerül meghatározásra. Mindig a nagyobb z-indexű elem kerül felülre, azaz elfedi az kisebb z-indexű elem átfedő részét. Ha nincs z-index meghatározva, akkor a HTML kódban később szereplő elem kerül felülre..blue { z-index: 1; 83

84 A CSS }.red { z-index: 0; position: absolute; left: 20px; top: 20px; } 14. ábra: z-index használata Ha egy elem méretét fixre állítjuk, akkor előfordulhat, hogy a bele kerülő tartalom (pl. szöveg) mérete nagyobb, mint az elem. Az elem viselkedését az overflow tulajdonság segítségével szabhatjuk meg: visible: ez az alapértelmezett, a kilógó rész folytatódik az elem alatt hidden: a kilógó rész nem látszódik auto: ha a tartalom túl hosszú, akkor megjelenik egy görgetősáv scroll: mindig látszik a görgetősáv, akkor is, ha tartalom belefér az elembe Egy másik gyakran használt módszer a tartalom elrendezésére a float használata, melynek értéke left vagy right lehet. Ilyenkor az adott elem a képernyő (ill. a szülő eleme) bal 84

85 A CSS vagy jobb széléig úszik, a későbbi tartalom pedig körbefolyja. Ha például ehhez a HTML kódhoz: <p> <img src="elefant.jpg" /> Lorem ipsum dolor sit amet,... </p> az alábbi CSS-t rendeljük: img { float:right; } Az eredmény a 15. ábrához hasonló lesz: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ligula ipsum, feugiat at pulvinar vel, condimentum non dui. Maecenas dapibus pharetra quam, sit amet mollis turpis porta mattis. Integer facilisis ligula ut turpis imperdiet condimentum. Suspendisse euismod neque pharetra nunc vulputate et ultrices enim volutpat. 15. ábra: A float stílus használata 85

86 A CSS Egyéb elemek Ebben a fejezetben megismerhetted a CSS legfontosabb, leggyakrabban használt elemeit. Ezek segítségével már bonyolultabb szerkezetű, és testreszabott megjelenésű, szép honlapokat készíthetsz. Vannak további elemek is, amelyekkel még összetettebb effekteket lehet létrehozni, például félig áttetsző képeket, díszes képeket, vagy beállítható az egérmutató alakja. A CSS teljes tárházával megismerkedhetsz például a oldalon. Meg kell még említeni, hogy a CSS legújabb, 3-as verziója számos újdonsággal szolgál. Ezek egyszerűsítenek számos olyan formázást, amit eddig csak bonyolultan, egymásba ágyazott elemekkel és képekkel lehetett megoldani. Ilyen például a lekerekített keret, az árnyékok használata, elforgatott szövegek vagy az áttetsző háttér. A CSS3-ról bővebben a oldalon olvashatsz Az XML és a CSS Ha egy XML fájlt megnyitunk a böngészőben, akkor a dokumentum hierarchikus nézete jelenik, a tagekkel és attribútumokkal együtt. Lehetőség van azonban az XML dokumentumokhoz is stíluslapokat, azaz CSS-t rendelni. Ehhez az XML deklaráció után, de még a gyökérelem elé be kell illeszteni egy hivatkozást a használandó CSS fájlra, a követlező formában: 86

87 A CSS <?xml-stylesheet type="text/css" href="style.css"?> Az XML tagekre ugyanazok a szabályok alkalmazhatók, mint a HTML elemekre, ám fontos különbség, hogy az XML elemek (mivel azok lényegében bármik lehetnek) nem rendelkeznek alapértelmezett megjelenéssel. Így tehát például minden olyan elemnél, amit block-ként szeretnénk kezelni, meg kell adni explicit módon a display: block; tulajdonságot. XML formázások használhatók a tag szintű selectorok, valamint (eltérő szintaxissal) a class és id szintűek is: /*Internet Explorerben: /* product#p1 product.medication /*egyéb böngészőkben: /* product[id=p1] product[class=medication] Fontos megjegyezni, hogy a kimenetként előálló dokumentumban csak a tagek tartalma jelenik meg, az attribútumok értékei nem. Nincs lehetőség arra sem, hogy ha például egy XML-ben tárolt adathalmazt táblázatosan szeretnénk megjeleníteni, akkor fejlécet adjunk hozzá (amennyiben azt nem tartalmazza a dokumentum). Ilyen esetekben más technológiákat kell használnunk. 87

88 Dokumentumok validálása 6 Dokumentumok validálása 6.1 A DTD DTD alapelvek Mint azt már megtanulhattad, az általános célú jelölőnyelvek mint például az XML nem rendelkeznek kötött elemkészlettel, azaz bármilyen tagek használhatóak. Az ezekre épülő konkrét alkalmazások, amilyen a HTML is, meghatározott elemkészlettel rendelkeznek. A DTD (Document Type Definition) ilyen konkrét dokumentumtípusokat definiál, azaz megadja, milyen elemek hol fordulhatnak elő a dokumentumban, azok milyen tartalommal és attribútumokkal rendelkezhetnek. Például a HTML-t definiáló DTD meghatározza, hogy a <html> tag egy-egy <head> és <body> elemet tartalmazhat. Az XML fájlok dokumentumtípus-deklarációjában hivatkozhatunk a használni kívánt DTD-re, amely lehet külső vagy belső definíció (ld fejezet). A DTD a következő definíciótípusokat tartalmazza: 1. Elem típusok 2. Attribútum listák 3. Entitás definíciók 88

89 Dokumentumok validálása Elem típusok Az elem típus deklaráció definiálja a dokumentumban használható elemeket (tageket), valamint azok tartalmát. Egy valid XML fájlban csak olyan elemek használhatók, amelyek definiálva vannak a hivatkozott DTD-ben. Az alap szintaxis a következő: <!ELEMENT elemnév (tartalom) módosító> A tartalom megadására a következő lehetőségeink vannak: EMPTY: semmilyen tartalom nem megengedett, azaz üres elem (pl.: <br/>). Attribútumokat tartalmazhat az üres elem is. ANY: bármennyi és bármilyen tartalom megengedett, beleértve az üres elemet, a gyermek elemeket és a szöveges tartalmat. #PCDATA: az elem szöveget tartalmazhat. Szekvenciális lista: a felsorolt gyermek elemek a megadott sorrendben kell, hogy szerepeljenek. Az elemeket vesszővel kell elválasztani. Opcionális lista: a felsorolt gyermek elemek közül egy szerepelhet (a felsorolásban szerepelhet #PCDATA, azaz szöveg is). Az elemeket a karakter választja el. Egy példa az egyszerű elemtípusok alkalmazására: <!ELEMENT XXX (AAA, BBB)> <!ELEMENT AAA (CCC, DDD)> <!ELEMENT BBB (EEE FFF)> <!ELEMENT CCC (#PCDATA)> <!ELEMENT DDD (#PCDATA)> <!ELEMENT EEE (EMPTY)> 89

90 Dokumentumok validálása <!ELEMENT FFF (ANY)> A megadott DTD használata esetén az érvényes dokumentum gyökéreleme XXX, amelynek egy-egy AAA és BBB típusú gyermeke van, ebben a sorrendben. Az AAA elem egy CCC és egy DDD gyermekkel, a BBB elem egy EEE vagy egy FFF gyermekkel rendelkezik. A CCC és DDD szöveget, az EEE semmit, az FFF bármit tartalmazhat A módosítók segítségével pontosítani lehet az elemek előfordulási számát. A következő módosítók használhatók: Csillag (*): nulla vagy több előfordulás Pluszjel (+): egy vagy több előfordulás Kérdőjel (?): nulla vagy egy előfordulás Nincs módosító: pontosan egy előfordulás Példa a módosítók használatára: <!ELEMENT XXX (AAA*, BBB+)> <!ELEMENT AAA (CCC?, DDD)> Ha így módosítjuk a DTD-t, akkor az XXX elemnek bármennyi számú (beleértve 0) AAA típusú gyermeke lehet, amelyet vagy amelyeket legalább egy BBB követ. Az AAA elemnek legfeljebb egy CCC gyermeke lehet, amelyet pontosan egy DDD követ. A * módosító szerepelhet egy opcionális lista végén is, ilyenkor azt jelzi, hogy a felsorolt elemek közül bármennyit tartalmazhat az adott elemtípus. Például a p HTML elem tartalmazhatja a szöveg, a, img, strong, em elemek tetszőleges kombinációját: 90

91 Dokumentumok validálása <!ELEMENT p (#PCDATA a img strong em)*> Attribútum listák Az attribútum lista megadja, hogy az egyes elemtípusok milyen attribútumokkal rendelkezhetnek, és azok milyen értékeket vehetnek fel. Az alapszintaxis a követlező: <!ATTLIST elemnév attribútum_név típus alapértelmezett_érték> A típus mező a következő értékeket veheti fel: CDATA: bármilyen szöveges adat ID: egyedi azonosító, azaz egy XML dokumentumon belül két különböző elem nem rendelkezhet megegyező azonosítóval IDREF: hivatkozás egy ID típusú attribútum értékére IDREFS: ID hivatkozások szóközzel elválasztott listája NMTOKEN: érvényes XML név, azaz tartalmazhat betűket, számokat, pontot, kettőspontot, aláhúzást, kötőjelet. NMTOKENS: NMTOKEN típusú értékek szóközzel elválasztott listája Lista: karakterrel elválasztott értékek listája, amelyek közül kell kiválasztani az attribútum értékét Az alapértelmezett érték a következő lehet: #REQUIRED: az attribútumot kötelező megadni #IMPLIED: az attribútum opcionális 91

92 Dokumentumok validálása Érték: ha nincs megadva az attribútum értéke, akkor a DTD-ben definiált értéket veszi fel #FIXED: az attribútum csak a megadott értéket veheti fel Példák attribútum definíciókra: <!ELEMENT XXX (#PCDATA)> <!ATTLIST XXX azonosito ID #REQUIRED cimke CDATA #IMPLIED verzio CDATA #FIXED "1.0" torolt (igen nem) "nem"> Entitás definíciók Az entitásokról olvashattál már a fejezetben. A DTD lehetőséget nyújt saját entitások definiálására, a következő szintaxis használatával: <!ENTITY entitás_név "entitás_érték"> Az így definiált entitásokra az ismert módon hivatkozhatunk a dokumentumunkban: <!ENTITY szerzo "Kiss Péter"> XML példa: <author>&szerzo;</author> 92

93 Dokumentumok validálása Lehetőség van külső entitásgyűjtemények használatára is, ekkor a szintaxis a következőképpen módosul: <!ENTITY entitás_név SYSTEM "URL"> Például: <!ENTITY szerzo SYSTEM " XML fájl validálása Egy XML fájl validálásának első lépése annak a megállapítása, hogy jól formázott-e a dokumentum. Ezt könnyen megtehetjük, akár úgy is, hogy megnyitjuk az XML fájlt egy böngészőben. Ha jól formázott, akkor megjelenik az XML fastruktúrája, egyébként hibaüzenetet kapunk. 16. ábra Példa hibaüzenetre hibás XML megnyitásakor (Firefox böngésző) A böngészők azonban nem képesek megvizsgálni, hogy a dokumentum megfelel-e a megadott DTD-nek, ehhez egyéb eszközökre van szükség. A validálásra három fő lehetőségünk van: 1. Speciális XML szerkesztő program használata, amely képes a validálásra. 93

94 Dokumentumok validálása 2. Online validátor használata, például 3. Ha egy saját program részeként kell validálást végezni, akkor használhatjuk az adott programnyelv API-ját. 6.2 HTML validálása A HTML szabvány pontosan specifikálja, hogy milyen elemeket és hogyan lehet használni egy weboldal elkészítése során. A weboldalak készítői azonban sokszor olyan tartalmat állítanak elő, amelyek nem felelnek meg a szabványnak ennek oka lehet ismerethiány, figyelmetlenség vagy nemtörődömség is. A látogatók számára azonban csak az a fontos, hogy a kért oldal megjelenjen. A böngésző hiába jelenítene meg hibaüzeneteket, a felhasználónak nincs lehetősége kijavítani azokat. Ezért a böngészőket úgy tervezték, hogy a hibás oldalakat is képesek legyenek valamilyen módon megjeleníteni, azaz megpróbálják kitalálni, hogy a hibás kóddal mi lehetett a készítő szándéka. Azonban az egyes böngészők lehet, hogy eltérő javítási stratégiát alkalmaznak, ezért ugyanaz a HTML kód máshogy fog kinézni bennük. Érdemes tehát mindig érvényes, azaz valid HTML kód előállítására törekedni. Ennek több indoka is van: A valid oldalak nagyobb valószínűséggel jelennek meg ugyanúgy a különböző böngészőkben, és stabilabban működnek. Lehet, hogy a mai böngészőkben az oldal megfelelően jelenik meg, de a böngészők is változnak, és nagy valószínűséggel a nagyobb szabványosság irányába haladnak. Egy hosszabb oldalba akkor is kerülhetnek hibák, ha a maximális odafigyeléssel készíted, és ezek gyakran észrevétlenek maradnak. Létezik azonban egy hasznos eszköz, amely segít a 94

95 Dokumentumok validálása hibák felderítésében és kijavításában. Ez a W3C MarkUp Validator, amely a címen érhető el. Az oldal tetején három fül található, sorrendben a következők: 1. Validate by URI: egy, az Interneten már elérhető oldal ellenőrzése 2. Validate by File Upload: egy HTML fájl feltöltése és ellenőrzése 3. Validate by Direct Input: a megjelenő szövegmezőbe beírt kód ellenőrzése 17. ábra: A HTML validátor kezdőoldala Mindegyik fülön megtalálható egy More Options gomb, amelyre rákattintva testre lehet szabni a validátor beállításait. Ezek közül a legfontosabb a doctype beállítása. Ha a HTML kódnak megfelelően meg van adva a dokumentumtípus, akkor a validátor képes automatikusan detektálni. Lehetőség van azonban kézzel is beállítani. Ez az opció azért lényeges, mert ugyanaz a HTML kód dokumentumtípustól függően lehet érvényes vagy érvénytelen, ill. másfajta hibákat tartalmazhat. Az első két fülön lehetőség van a karakterkódolás beállítására, az alapértelmezés itt is az automatikus detektálás. Lehetőség van a hibaüzeneteket előfordulási sorrendben vagy típusonként megjeleníteni. 95

96 Dokumentumok validálása Nézzünk meg egy példát! <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " <html xmlns=" lang="en"> <head> <title> Lorem ipsum</title> </head> <body> <h2><p>lorem ipsum dolor sit amet</p></h2> <p src="abcd">lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec accumsan, orci ut sagittis dignissim, sem sem dictum est, nec luctus arcu sapien in felis. Duis venenatis mi a odio mollis consectetur. Maecenas at lorem magna, non vehicula leo. Suspendisse faucibus posuere luctus. Nam ac metus leo. Aliquam ac purus ut risus feugiat bibendum a id mi. Morbi et consectetur elit. Cras ac nibh ipsum. Phasellus quam leo, facilisis vitae auctor varius, tempor molestie turpis. <ul> <li>ut posuere mi ut neque dictum ac bibendum diam aliquet.</li> <li>donec placerat pulvinar libero, id tempus lectus aliquam quis.<li> <li>cras vitae urna nunc.</li> <li>fusce fermentum ullamcorper augue lobortis laoreet.</li> </ul> </body> Másold be a fenti kódot a Validate by Direct Input fülre, és kattints a Check gombra. Az eredmény az alábbi ábrán látható: a dokumentum érvénytelen, és 10 hibát tartalmaz. Valójában általában kevesebb hiba van, mint azt a validátor állítja, ugyanis egy hiba hatással van a dokumentum további részeire, újabb hibákat generálva. Érdemes lehet tehát 96

97 Dokumentumok validálása különösen sok hiba esetén sorrendben haladni, és először néhány szembetűnő hibát kijavítani a dokumentum elején, majd újra lefuttatni a validátort. A hibák száma ilyenkor sokszor jelentősen csökken, így könnyebben megtaláljuk a még fennálló tényleges problémákat. 18. ábra: A HTML validátor kimenete hibás dokumentum esetében Próbáljuk meg tehát kijavítani a példakódunkat! Az első hibaüzenet szerint nem használhatunk p elemet a 7. sorban. Ennek a leggyakoribb oka, hogy rosszul ágyaztuk egymásba az elemeket, például inline elembe (a, span) próbáltunk block szintű elemet (p, table) beilleszteni. A másik gyakori ok, hogy egy korábbi elemet nem zártunk le megfelelően. Esetünkben a p elemet nem ágyazhatjuk be a h2-be nem is szükséges, hiszem a h2 önmagában egy bekezdés szintű elem. A javításhoz tehát törölnünk kell a p-t. A következő hiba szerint az src nem létező attribútum. Ez előfordulhat akkor, ha elgépeljük az attribútum nevét, vagy olyan attribútumot használunk, amit az adott dokumentumtípus nem 97

98 Dokumentumok validálása enged. A példánkban egy harmadik ok jelentkezik: az src érvényes attribútum ugyan, de nem a p elemben! A megoldás: töröljük az attribútumot! A harmadik hiba az ul elemre mutat, és szövege megegyezik az első hibáéval. Itt az a probléma, hogy nem záruk le a megelőző bekezdést, azaz a p elemet. A negyedik hibáról könnyen látható, hogy nem záruk le az li elemet a felsorolás második sorában. Ha kijavítjuk a fenti hibákat, és újravalidáltatjuk az oldalt, máris csak egy hiba marad. Ez pedig arra hívja fel a figyelmet, hogy nem zártuk le a html taget. Ha hozzátesszük a kódunk végére, máris hibátlan, azaz érvényes dokumentumot kapunk, a táblázat fejléce zöldre vált. 19. ábra: A HTML validátor kimenete valid dokumentum esetében 6.3 CSS validálása A HTML validálással kapcsolatban leírtak a CSS-re is nagyrészt igazak, azzal a különbséggel, hogy a böngészők a nem szabványos (vagy általuk nem ismert) css szabályokat figyelmen 98

99 Dokumentumok validálása kívül hagyják. Itt is érvényes azonban, hogy ajánlott a szabványosságra törekedni. A W3C CSS validátor szolgáltatást is nyújt, amely a címen érhető el. Az, hogy a böngészők figyelmen kívül hagyják az ismeretlen CSS tulajdonságokat, lehetővé tette a böngésző-specifikus tulajdonságok használatát. Ezek olyan CSS elemek, amelyeket egy adott böngésző fejlesztői definiáltak, és általában csak ez a böngésző támogatja a használatukat. Ezek egyedi előtaggal rendelkeznek, például a Mozilla által kifejlesztett tulajdonságok a -moz- prefixet kapják. Ezáltal lehetővé válik, hogy az egyedi tulajdonságok összetéveszthetőek legyenek egymással ill. a szabványos elemekkel. Bár hasznosak lehetnek, a használatuk általában nem ajánlott, mivel böngészőhöz kötöttek, és az sincs garantálva, hogy a böngészők újabb verziói támogatni fogják. Idővel az egy-egy fejlesztő által definiált tulajdonságok a CSS szabványba is bekerülhetnek. Itt is ugyanazok a lehetőségeink, mint a HTML validátor esetében, azaz lehet URI, fájl vagy közvetlen bevitel útján ellenőrizni. 99

100 Dokumentumok validálása 20. ábra: A CSS validátor kezdőoldala A validátor által felismert hibák például az alábbiak lehetnek: Hiányzó pontosvessző a szabály végén Nem létező tulajdonság Nem megfelelő érték (pl. számmal megadandó tulajdonság helyett szöveg) Nézzük a következő példát: p { text-align: justified; color: bluegreen; } img { size: 40px; margin: 10px padding: big; } 100

101 Dokumentumok validálása Ebben a CSS részletben a validátor 5 hibát talált: A justified érvénytelen érték (a helyes kulcsszó a justify) A bluegreen nem érvényes CSS szín (blue, green vagy rgb színkód használható) A size tulajdonság nem létezik (height és width használható) A margin sorban hiányzik a pontosvessző A padding értéke nem lehet big (valamilyen CSS mértékegységben kell megadni) 21. ábra: A CSS validátor kimenete 101

Dokumentumformátumok Jelölő nyelvek XML XML. Sass Bálint sass@digitus.itk.ppke.hu. Bevezetés a nyelvtechnológiába 2. gyakorlat 2007. szeptember 20.

Dokumentumformátumok Jelölő nyelvek XML XML. Sass Bálint sass@digitus.itk.ppke.hu. Bevezetés a nyelvtechnológiába 2. gyakorlat 2007. szeptember 20. XML Sass Bálint sass@digitus.itk.ppke.hu Bevezetés a nyelvtechnológiába 2. gyakorlat 2007. szeptember 20. 1 DOKUMENTUMFORMÁTUMOK 2 JELÖLŐ NYELVEK 3 XML 1 DOKUMENTUMFORMÁTUMOK 2 JELÖLŐ NYELVEK 3 XML DOKUMENTUMFORMÁTUMOK

Részletesebben

Elektronikus levelek. Az informatikai biztonság alapjai II.

Elektronikus levelek. Az informatikai biztonság alapjai II. Elektronikus levelek Az informatikai biztonság alapjai II. Készítette: Póserné Oláh Valéria poserne.valeria@nik.bmf.hu Miről lesz szó? Elektronikus levelek felépítése egyszerű szövegű levél felépítése

Részletesebben

w w w. h a n s a g i i s k. h u

w w w. h a n s a g i i s k. h u Weblapkészítés weblap: hypertext kódolású dokumentumok, melyek szöveget képet linkeket, könyvjelzőket/horgonyokat táblázatokat / szövegdobozokat és más objektumokat tartalmaznak. Kódolásuk HTML (Hypertext

Részletesebben

Az XML Bevezetés. Fabók Zsolt Ficsor Lajos Általános Informatikai Tanszék Miskolci Egyetem. Utolsó módosítás:

Az XML Bevezetés. Fabók Zsolt Ficsor Lajos Általános Informatikai Tanszék Miskolci Egyetem. Utolsó módosítás: Az XML Bevezetés Fabók Zsolt Ficsor Lajos Általános Informatikai Tanszék Miskolci Egyetem Utolsó módosítás: 2007. 10. 02. Szüks kségessége 2 Java: plattform független programok XML: plattform független

Részletesebben

CSS3 alapismeretek. Bevezetés a CSS-be. Mi is az a CSS? Alkalmazási formái, szintaxisa

CSS3 alapismeretek. Bevezetés a CSS-be. Mi is az a CSS? Alkalmazási formái, szintaxisa CSS3 alapismeretek Bevezetés a CSS-be Mi is az a CSS? A CSS az angol Cascading Style Sheets kifejezés rövidítése, ami magyarul talán egymásba ágyazott stíluslapoknak lehetne fordítani. Hasonlóan a HTML-hez,

Részletesebben

Web programozás. 3. előadás

Web programozás. 3. előadás Web programozás 3. előadás Űrlapok form label for input type select, option value szöveges mező: text textarea jelszó: password rádiógomb: radio jelölőnégyzet: checkbox küldés gomb: submit Web programozás

Részletesebben

Az alábbi kód egy JSON objektumot definiál, amiből az adtokat JavaScript segítségével a weboldal tartalmába ágyazzuk.

Az alábbi kód egy JSON objektumot definiál, amiből az adtokat JavaScript segítségével a weboldal tartalmába ágyazzuk. JSON tutorial Készítette: Cyber Zero Web: www.cyberzero.tk E-mail: cyberzero@freemail.hu Msn: cyberzero@mailpont.hu Skype: cyberzero_cz Fb: https://www.facebook.com/cyberzero.cz BEVEZETÉS: A JSON (JavaScript

Részletesebben

Webszerkesztés stílusosan. Készítette: Csécsy László Virgina DeBolt hasonló c. könyve alapján

Webszerkesztés stílusosan. Készítette: Csécsy László Virgina DeBolt hasonló c. könyve alapján Webszerkesztés stílusosan Készítette: Csécsy László Virgina DeBolt hasonló c. könyve alapján Tartalom HTML és CSS HTML vs. XHTML, CSS mi micsoda? XHTML nyelvtan: címkék, egyéb követelmények CSS nyelvtan:

Részletesebben

Regionális forduló november 19.

Regionális forduló november 19. Regionális forduló 2016. november 19. 9-10. osztályosok feladata Feladat Írjatok Markdown HTML konvertert! A markdown egy nagyon népszerű, nyílt forráskódú projektekben gyakran használt, jól olvasható

Részletesebben

XML / CSV specifikáció

XML / CSV specifikáció Ajánlatok átadása az rendszerébe Termékeinek az Olcsóbbat.hu rendszerében történő megjelenítéséhez termékadatbázisát az ebben a dokumentumban megfogalmazott szabályoknak megfelelően kell formáznia, legyen

Részletesebben

Web-fejlesztés NGM_IN002_1

Web-fejlesztés NGM_IN002_1 Web-fejlesztés NGM_IN002_1 Alap reprezentációs technológiák HTML Hyper Text Markup Language SGML alkalmazás Dokumentum-struktúra leírásra nem lap leírás! hiperszöveg dokumentum szemantika fejlécek listák

Részletesebben

HTML ÉS PHP ŐSZI FÉLÉV

HTML ÉS PHP ŐSZI FÉLÉV 1 HTML ÉS PHP ŐSZI FÉLÉV Szövegek kezelése PHP-val 2 Szövegek tárolása Az UTF-8 kicsit részletesebben 3 Az UTF-8 minden karaktert 1-6 bájton tárol Ez összesen 1 111 998 különböző karakter tárolását teszi

Részletesebben

HTML és CSS. Horváth Árpád május 6. Óbudai Egyetem Alba Regia M szaki Kar (AMK) Székesfehérvár

HTML és CSS. Horváth Árpád május 6. Óbudai Egyetem Alba Regia M szaki Kar (AMK) Székesfehérvár Óbudai Egyetem Alba Regia M szaki Kar (AMK) Székesfehérvár 2015. május 6. Vázlat 1 2 A világháló Története statikus és dinamikus oldal URL DNS-feloldás IP-cím ügyfél (kliens, böngész ) és szerver (kiszolgáló)

Részletesebben

Regionális forduló november 19.

Regionális forduló november 19. Regionális forduló 2016. november 19. 11-13. osztályosok feladata Feladat Írjatok Markdown HTML konvertert! A markdown egy nagyon népszerű, nyílt forráskódú projektekben gyakran használt, jól olvasható

Részletesebben

XML alapú adatbázis-kezelés. (Katona Endre diái alapján)

XML alapú adatbázis-kezelés. (Katona Endre diái alapján) XML alapú adatbázis-kezelés Adatstruktúrák: Digitális kép, hang: teljesen strukturálatlan A web (linkek): részben strukturált Relációs: teljesen strukturált Motiváció: (Katona Endre diái alapján) Ismeretlen

Részletesebben

Egyes esetekben e fejezet keretében készítjük el a Tartalomjegyzéket is, melynek technikai megvalósításáról majd az 5.6.6. fejezetben olvashat.

Egyes esetekben e fejezet keretében készítjük el a Tartalomjegyzéket is, melynek technikai megvalósításáról majd az 5.6.6. fejezetben olvashat. Szövegszerkesztés 1. Bevezetés Ebben a modulban a szövegszerkesztési szabályokat kívánjuk bemutatni. Feltételezzük, az olvasó már ismer legalább egy szövegszerkesztő programot, így annak teljes körű bemutatására

Részletesebben

BARANGOLÁS AZ E-KÖNYVEK BIRODALMÁBAN Milyen legyen az elektonikus könyv?

BARANGOLÁS AZ E-KÖNYVEK BIRODALMÁBAN Milyen legyen az elektonikus könyv? BARANGOLÁS AZ E-KÖNYVEK BIRODALMÁBAN Milyen legyen az elektonikus könyv? Készítették: Névery Tibor és Széll Ildikó PPKE I. évf. kiadói szerkesztő hallgatók, közösen 1 BEVEZETŐ Az elektronikus könyv valamilyen

Részletesebben

XML / CSV specifikáció

XML / CSV specifikáció Ajánlatok átadása az rendszerébe Termékeinek az Olcsóbbat.hu rendszerében történő megjelenítéséhez termékadatbázisát az ebben a dokumentumban megfogalmazott szabályoknak megfelelően kell formáznia, legyen

Részletesebben

HTML. Dr. Nyéki Lajos 2016

HTML. Dr. Nyéki Lajos 2016 HTML Dr. Nyéki Lajos 2016 HTML és SGML HTML (Hypertext Markup Language) SGML (Standard Generalized Markup Language) ISO 8879:1986 A HTML nyelven készült dokumentumok kiterjesztése - az Internet szerveren:.html;

Részletesebben

3. modul - Szövegszerkesztés

3. modul - Szövegszerkesztés 3. modul - Szövegszerkesztés Érvényes: 2009. február 1-jétől Az alábbiakban ismertetjük a 3. modul (Szövegszerkesztés) syllabusát, amely a gyakorlati vizsga alapját képezi. A modul célja Ezen a vizsgán

Részletesebben

Webkezdő. A modul célja

Webkezdő. A modul célja Webkezdő A modul célja Az ECDL Webkezdő modulvizsga követelménye (Syllabus 1.5), hogy a jelölt tisztában legyen a Webszerkesztés fogalmával, és képes legyen egy weboldalt létrehozni. A jelöltnek értenie

Részletesebben

Regionális forduló november 18.

Regionális forduló november 18. Regionális forduló 2017. november 18. 9-10. osztályosok feladata Feladat Egy e-mail kliens szoftver elkészítése lesz a feladatotok. Az elkészítendő alkalmazásnak az alábbiakban leírt specifikációnak kell

Részletesebben

A tankönyvvé nyilvánítás folyamatát elektronikusan támogató rendszer az OKÉV számára

A tankönyvvé nyilvánítás folyamatát elektronikusan támogató rendszer az OKÉV számára AITIA International Zrt. 1039 Budapest, Czetz János u. 48-50. Tel.: +36 1 453 8080 Fax.: +36 1 453 8081 www.aitia.hu A tankönyvvé nyilvánítás folyamatát elektronikusan támogató rendszer az OKÉV számára

Részletesebben

DTD Dokumentumtípus definició

DTD Dokumentumtípus definició DTD Dokumentumtípus definició XML sémák - alapok jól formázott egy XML dokumentum, ha betartja a formai követelményeket minden nyitó címkének van záró párja az attribútumok ténylegesen kulcs-érték alakúak

Részletesebben

Microsoft Excel 2010

Microsoft Excel 2010 Microsoft Excel 2010 Milyen feladatok végrehajtására használatosak a táblázatkezelők? Táblázatok létrehozására, és azok formai kialakítására A táblázat adatainak kiértékelésére Diagramok készítésére Adatbázisok,

Részletesebben

HTML ÉS PHP ŐSZI FÉLÉV

HTML ÉS PHP ŐSZI FÉLÉV 1 HTML ÉS PHP ŐSZI FÉLÉV 2012-10-10 CSS kezdőlépések 2 A CSS és a HTML viszonya 2012-10-10 Hol található CSS kód? 3 Közvetlenül a tag-ek style paraméterében: bekezdés Ekkor a

Részletesebben

Meglévő munkafüzet megnyitása, mentése új néven

Meglévő munkafüzet megnyitása, mentése új néven Példánkban a következő lépéseket végezzük el: megnyitunk egy korábban mentett munkafüzetet, a megnyitott munkafüzetről egy másolatot készítünk, azaz új néven mentjük el. Meglévő munkafüzet megnyitása Egy

Részletesebben

Intelligens közlekedési rendszerek (ITS)

Intelligens közlekedési rendszerek (ITS) Budapesti Műszaki és Gazdaságtudományi Egyetem Közlekedésüzemi és Közlekedésgazdasági Tanszék Intelligens közlekedési rendszerek (ITS) Térinformatika (GIS) közlekedési alkalmazásai Közlekedési adatbázisok

Részletesebben

Dr. Wührl Tibor Ph.D. MsC 04 Ea. IP P címzés

Dr. Wührl Tibor Ph.D. MsC 04 Ea. IP P címzés Dr. Wührl Tibor Ph.D. MsC 04 Ea IP P címzés Csomagirányítás elve A csomagkapcsolt hálózatok esetén a kapcsolás a csomaghoz fűzött irányítási információk szerint megy végbe. Az Internet Protokoll (IP) alapú

Részletesebben

Forráskód formázási szabályok

Forráskód formázási szabályok Forráskód formázási szabályok Írta: Halmai Csongor, Webcenter Bt. A php és html kódrészletek Ugyanazon fájlon belül nem szerepelhet php kód és html tartalom. E kettő különválasztására smarty-t vagy más

Részletesebben

Webes alkalmazások fejlesztése 4. előadás. Megjelenítés és tartalomkezelés (ASP.NET)

Webes alkalmazások fejlesztése 4. előadás. Megjelenítés és tartalomkezelés (ASP.NET) Eötvös Loránd Tudományegyetem Informatikai Kar Webes alkalmazások fejlesztése 4. előadás (ASP.NET) 2016 Giachetta Roberto groberto@inf.elte.hu http://people.inf.elte.hu/groberto Nézetek kezelése Sok esetben

Részletesebben

Java II. I A Java programozási nyelv alapelemei

Java II. I A Java programozási nyelv alapelemei Java II. I A Java programozási nyelv alapelemei Miskolci Egyetem Általános Informatikai Tanszék Utolsó módosítás: 2008. 02. 19. Java II.: Alapelemek JAVA2 / 1 A Java formalizmusa A C, illetve az annak

Részletesebben

HTML é s wéblapféjlészté s

HTML é s wéblapféjlészté s HTML é s wéblapféjlészté s 1. Melyik országból ered a hipertext-es felület kialakítása? USA Japán Svájc 2. Webfejlesztéskor ha a site-on belül hivatkozunk egy file-ra, akkor az elérési útnak... relatívnak

Részletesebben

A webprogramozás alapjai. Óbudai Egyetem Neumann János Informatikai Kar 2018/19/1 szemeszter

A webprogramozás alapjai. Óbudai Egyetem Neumann János Informatikai Kar 2018/19/1 szemeszter 1 A webprogramozás alapjai Óbudai Egyetem Neumann János Informatikai Kar 2018/19/1 szemeszter IV. előadás Nyelv típusok HTML nyelv fontosabb elemei I. Mappaszerkezet és file struktúra Szerkesztők bemutatása,

Részletesebben

Webes alkalmazások fejlesztése 4. előadás. Megjelenítés és tartalomkezelés (ASP.NET Core) Cserép Máté

Webes alkalmazások fejlesztése 4. előadás. Megjelenítés és tartalomkezelés (ASP.NET Core) Cserép Máté Eötvös Loránd Tudományegyetem Informatikai Kar Webes alkalmazások fejlesztése 4. előadás Megjelenítés és tartalomkezelés (ASP.NET Core) Cserép Máté mcserep@inf.elte.hu http://mcserep.web.elte.hu Nézetek

Részletesebben

KML Keyhole Markup Language

KML Keyhole Markup Language KML Bevezetés KML Keyhole Markup Language Földrajzi jellemzők (pontok, vonalak, képek, sokszögek és megjelenítési modellek) tárolására és modellezésére szolgáló XML fájlformátum a Google Föld, a Google

Részletesebben

Adatbázis rendszerek. dr. Siki Zoltán

Adatbázis rendszerek. dr. Siki Zoltán Adatbázis rendszerek I. dr. Siki Zoltán Adatbázis fogalma adatok valamely célszerűen rendezett, szisztéma szerinti tárolása Az informatika elterjedése előtt is számos adatbázis létezett pl. Vállalati személyzeti

Részletesebben

Webes alkalmazások fejlesztése 4. előadás. Megjelenítés és tartalomkezelés (ASP.NET) Cserép Máté.

Webes alkalmazások fejlesztése 4. előadás. Megjelenítés és tartalomkezelés (ASP.NET) Cserép Máté. Eötvös Loránd Tudományegyetem Informatikai Kar Webes alkalmazások fejlesztése 4. előadás (ASP.NET) Cserép Máté mcserep@inf.elte.hu http://mcserep.web.elte.hu Készült Giachetta Roberto jegyzete alapján

Részletesebben

1. fejezet Bevezetés a web programozásába (Balássy György munkája)... 11 Az internet működése... 11

1. fejezet Bevezetés a web programozásába (Balássy György munkája)... 11 Az internet működése... 11 Tartalomjegyzék 1. fejezet Bevezetés a web programozásába (Balássy György munkája)... 11 Az internet működése... 11 Géptől gépig... 11 Számok a gépeknek... 13 Nevek az embereknek... 14 Programok egymás

Részletesebben

WEB TECHNOLÓGIÁK 2.ELŐADÁS

WEB TECHNOLÓGIÁK 2.ELŐADÁS Dr. Pál László, Sapientia EMTE, Csíkszereda WEB TECHNOLÓGIÁK 2.ELŐADÁS 2014-2015 tavasz A HTML nyelv alapjai Mi a HTML? A HTML (angolul: HyperText Markup Language=hiperszöveges jelölőnyelv) Leíró nyelv,

Részletesebben

HTML ALAPOK. Abonyi-Tóth Andor, ELTE IK

HTML ALAPOK. Abonyi-Tóth Andor, ELTE IK HTML ALAPOK Abonyi-Tóth Andor, ELTE IK Fontos szabványok HTTP protokoll Protokoll = szabályrendszer HTTP HyperText Transfer Protocol (Hiperszöveg Átviteli Protokoll) a webböngésző (kliens) adatokat kérhet

Részletesebben

HVK Adminisztrátori használati útmutató

HVK Adminisztrátori használati útmutató HVK Adminisztrátori használati útmutató Tartalom felöltés, Hírek karbantartása A www.mvfportal.hu oldalon a bejelentkezést követően a rendszer a felhasználó jogosultsági besorolásának megfelelő nyitó oldalra

Részletesebben

Egyszerűbb a Google keresőbe beírni a Sharepoint Designer 2007 letöltés kulcsszavakat és az első találat erre a címre mutat.

Egyszerűbb a Google keresőbe beírni a Sharepoint Designer 2007 letöltés kulcsszavakat és az első találat erre a címre mutat. A feladat megoldásához a Sharepoint Designer 2007 programot használjuk, mely ingyenesen letölthető a Microsoft weboldaláról. Az érettségi aktuális szoftverlistája alapján az Expression Web 2, az Expression

Részletesebben

4. Javítás és jegyzetek

4. Javítás és jegyzetek és jegyzetek Schulcz Róbert schulcz@hit.bme.hu A tananyagot kizárólag a BME hallgatói használhatják fel tanulási céllal. Minden egyéb felhasználáshoz a szerző engedélye szükséges! 1 Automatikus javítás

Részletesebben

Szövegszerkesztés. Microsoft Office Word 2010

Szövegszerkesztés. Microsoft Office Word 2010 Szövegszerkesztés Microsoft Office Word 2010 Szövegformázás A dokumentumszöveg formátumát meghatározó felépítés formázott - szöveg, - táblázat, - kép + stílusok + eszköztár beállítások Karakterek Bekezdések...

Részletesebben

Multimédia 2017/2018 II.

Multimédia 2017/2018 II. Multimédia 2017/2018 II. 1. gyakorlat HTML5, CSS3 alapok Alapvető HTML5 elemek Egyszerű HTML dokumentum Oldal cime

Részletesebben

Weblap készítése. Fapados módszer

Weblap készítése. Fapados módszer Weblap készítése Fapados módszer A számítógép beállítása Ha a kiterjesztések nem látszanak, akkor a következőt kell tennünk: A számítógép beállítása Ha a kiterjesztések nem látszanak, akkor a következőt

Részletesebben

A fejlesztendő tananyagok formai követelményei

A fejlesztendő tananyagok formai követelményei A fejlesztendő tananyagok formai követelményei Bevezető A pályázatban a tankönyvtár által preferált DocBook formátumot vállaltuk A tankönyvtár kissé speciális DocBook formátumot vár (pl. a képletek esetén)

Részletesebben

13. Fájlformátumok. Schulcz Róbert schulcz@hit.bme.hu Madarassy László lmadarassy@mik.bme.hu. 13. Fájlformátumok v2011.05.04.

13. Fájlformátumok. Schulcz Róbert schulcz@hit.bme.hu Madarassy László lmadarassy@mik.bme.hu. 13. Fájlformátumok v2011.05.04. Schulcz Róbert schulcz@hit.bme.hu Madarassy László lmadarassy@mik.bme.hu A tananyagot kizárólag a BME hallgatói használhatják fel tanulási céllal. Minden egyéb felhasználáshoz a szerzı engedélye szükséges!

Részletesebben

EuroOffice Professzionális Vonalkód és QR kód generátor

EuroOffice Professzionális Vonalkód és QR kód generátor 1. oldal EuroOffice Professzionális Vonalkód és QR kód generátor Az EuroOffice Professzionális Vonalkód és QR kód generátor segítségével könnyen elkészítheti az EuroOffice (vagy egyéb OpenOffice.org alkalmazás)

Részletesebben

Internet programozása. 1. előadás

Internet programozása. 1. előadás Internet programozása 1. előadás Áttekintés 1. Mi a PHP? 2. A PHP fejlődése 3. A PHP 4 újdonságai 4. Miért pont PHP? 5. A programfejlesztés eszközei 1. Mi a PHP? Egy makrókészlet volt, amely személyes

Részletesebben

Cikktípusok készítése a Xarayában

Cikktípusok készítése a Xarayában Cikktípusok készítése a Xarayában A Xaraya legfontosabb tulajdonsága az egyedi cikktípusok egyszerű készítésének lehetősége. Ezzel kiküszöbölhető egyedi modulok készítése, hiszen néhány kattintással tetszőleges

Részletesebben

Kövér betűk (bold) 1-es fejléc

Kövér betűk (bold) 1-es fejléc A HTML Stuktúra Amint a bevezetőben olvashattuk, minden HTML formátumú szövegfájl a utasítással kezdődik és a záró utasítással végződik. A dokumentumot a fejlécelemek vezetik be, melyek

Részletesebben

Témák. Bevezetés az informatikába 7. Előadás. Szövegfile-ok típusai. Szövegszerkesztők típusai. Mértékegységek. Szövegszerkesztők szolgáltatásai

Témák. Bevezetés az informatikába 7. Előadás. Szövegfile-ok típusai. Szövegszerkesztők típusai. Mértékegységek. Szövegszerkesztők szolgáltatásai Bevezetés az informatikába 7. Előadás Számítógépes dokumentumkészítés I Témák Szövegfile-ok típusai Szövegszerkesztők típusai Szövegszerkesztők szolgáltatásai Microsoft Word szövegszerkesztők Szövegfile-ok

Részletesebben

ColourSMS Protokol definíció. Version 1.2

ColourSMS Protokol definíció. Version 1.2 ColourSMS Protokol definíció Version 1.2 1.1 HTTP request A ColourSMS(Westel/Pannon) alkalmazások által kiadott HTTP request formátuma a következő: http://third_party_url/path_to_application A third_party_url

Részletesebben

Bevezetés a számítástechnikába

Bevezetés a számítástechnikába Bevezetés a számítástechnikába Beadandó feladat, kódrendszerek Fodor Attila Pannon Egyetem Műszaki Informatikai Kar Villamosmérnöki és Információs Rendszerek Tanszék foa@almos.vein.hu 2010 október 12.

Részletesebben

SZÁMÍTÓGÉPES ADATFELDOLGOZÁS

SZÁMÍTÓGÉPES ADATFELDOLGOZÁS SZÁMÍTÓGÉPES ADATFELDOLGOZÁS A TÁBLÁZATKEZELŐK Irodai munka megkönnyítése Hatékony a nyilvántartások, gazdasági, pénzügyi elemzések, mérési kiértékelések, beszámolók stb. készítésében. Alkalmazható továbbá

Részletesebben

A PiFast program használata. Nagy Lajos

A PiFast program használata. Nagy Lajos A PiFast program használata Nagy Lajos Tartalomjegyzék 1. Bevezetés 3 2. Bináris kimenet létrehozása. 3 2.1. Beépített konstans esete.............................. 3 2.2. Felhasználói konstans esete............................

Részletesebben

A HTML Stuktúra. 1. oldal, összesen: 8 oldal. mhtml:file://d:\vizsga\1\html kódok.mht. Betűtípusok, stílusok <b> <i> <u> <tt>

A HTML Stuktúra. 1. oldal, összesen: 8 oldal. mhtml:file://d:\vizsga\1\html kódok.mht. Betűtípusok, stílusok <b> <i> <u> <tt> 1. oldal, összesen: 8 oldal főoldal weboldalkészítés kereső optimalizálás HTML kód meta elemek képek beillesztése frame táblázatok XHTML XML CSS szabvány JavaScript vista tudás vista telepítése ingyen

Részletesebben

Tájékoztató. Használható segédeszköz: -

Tájékoztató. Használható segédeszköz: - A 35/2016. (VIII. 31.) NFM rendelet szakmai és vizsgakövetelménye alapján. Szakképesítés, azonosító száma és megnevezése 54 481 06 Informatikai rendszerüzemeltető Tájékoztató A vizsgázó az első lapra írja

Részletesebben

2008/09 ősz 1. Word / Excel 2. Solver 3. ZH 4. Windows 5. Windows 6. ZH 7. HTML - CSS 8. HTML - CSS 9. ZH 10. Adatszerkezetek, változók, tömbök 11. Számábrázolási kérdések 12. ZH 13. Pótlás Alapfogalmak

Részletesebben

A normaszöveg Wordben történő szerkesztése során a következőkre figyelemmel lenni:

A normaszöveg Wordben történő szerkesztése során a következőkre figyelemmel lenni: Melléklet A ParLex lehetőséget teremt arra, hogy megfelelően szerkesztett Worddokumentumok tartalmát a legtöbb esetben a rendszerben importálással is lehessen rögzíteni. Az importáláshoz szükséges, hogy

Részletesebben

Webdesign II Oldaltervezés 3. Tipográfiai alapismeretek

Webdesign II Oldaltervezés 3. Tipográfiai alapismeretek Webdesign II Oldaltervezés 3. Tipográfiai alapismeretek Tipográfia Tipográfia: kép és szöveg együttes elrendezésével foglalkozik. A tipográfiát hagyományosan a grafikai tervezéssel, főként a nyomdai termékek

Részletesebben

Dokumentáció. IT Worx. Web eszközök Hír box. 1. Első lépések

Dokumentáció. IT Worx. Web eszközök Hír box. 1. Első lépések Dokumentáció IT Worx Web eszközök Hír box 1. Első lépések A szöveg melletti háromszögre kattintva rendezhetjük a hír boxokat abc szerinti növekvő vagy csökkenő sorrendbe: Ha rákattintunk az egyik hír box

Részletesebben

Adóhátralék kezelés egyszerűen. Használati útmutató

Adóhátralék kezelés egyszerűen. Használati útmutató Használati útmutató Program indítása: A telepítés utáni első indításkor a program a szükséges alapbeállításokat elvégzi, és automatikusan újra indul. A főképernyőn a bejelentkezéshez mindig meg kell adni

Részletesebben

Szoftver alapfogalmak

Szoftver alapfogalmak Szoftver alapfogalmak Azon a programok algoritmusok, eljárások, és hozzájuk tartozó dokumentációk összessége, melyek a számítógép működéséhez szükségesek. (nem kézzel fogható, szellemi termékek) Algoritmus

Részletesebben

AWK programozás Bevezetés

AWK programozás Bevezetés 09 AWK programozás Bevezetés AWK adatvezérelt szkriptnyelv text processing, adat kiterjesztés, tagolt adatok automatizált soronkénti feldolgozása a forrásállományt soronként beolvassa és feldolgozhatóvá

Részletesebben

Tájékoztató. Használható segédeszköz: -

Tájékoztató. Használható segédeszköz: - A 35/2016. (VIII. 31.) NFM rendelet szakmai és vizsgakövetelménye alapján. Szakképesítés, azonosítószáma és megnevezése 54 213 05 Szoftverfejlesztő Tájékoztató A vizsgázó az első lapra írja fel a nevét!

Részletesebben

Multimédiás adatbázisok

Multimédiás adatbázisok Multimédiás adatbázisok Multimédiás adatbázis kezelő Olyan adatbázis kezelő, mely támogatja multimédiás adatok (dokumentum, kép, hang, videó) tárolását, módosítását és visszakeresését Minimális elvárás

Részletesebben

AWK programozás, minták, vezérlési szerkezetek

AWK programozás, minták, vezérlési szerkezetek 10 AWK programozás, minták, vezérlési szerkezetek AWK adatvezérelt szkriptnyelv text processing, adat kiterjesztés, tagolt adatok automatizált soronkénti feldolgozása a forrásállományt soronként beolvassa

Részletesebben

M/74. közismereti informatika írásbeli (teszt) érettségi vizsgához

M/74. közismereti informatika írásbeli (teszt) érettségi vizsgához OKTATÁSI MINISZTÉRIUM Világbanki Középiskolák 2003. M/74 Elbírálási útmutató közismereti informatika írásbeli (teszt) érettségi vizsgához Tételszám Megoldás Pontszám Tételszám Megoldás Pontszám 1. B 2

Részletesebben

Információs technológiák 2. Gy: CSS, JS alapok

Információs technológiák 2. Gy: CSS, JS alapok Információs technológiák 2. Gy: CSS, JS alapok 1/69 B ITv: MAN 2017.10.01 Ismétlés Van egy Web nevű mappánk, ebben vannak az eddig elkészített weboldalak (htm, html) képek (jpg, png). Logikai felépítés

Részletesebben

(statikus) HTML (XHTML) oldalak, stíluslapok

(statikus) HTML (XHTML) oldalak, stíluslapok (statikus) HTML (XHTML) oldalak, stíluslapok Áttekintés A HTML története HTML oldal felépítése Egymásba ágyazható stíluslapok CSS Áttekintés A HTML története HTML oldal felépítése Egymásba ágyazható stíluslapok

Részletesebben

Információs technológiák 1. Gy: HTML alapok

Információs technológiák 1. Gy: HTML alapok Információs technológiák 1. Gy: HTML alapok 1/53 B ITv: MAN 2017.09.28 Hogyan kezdjünk hozzá? Készítsünk egy mappát, legyen a neve mondjuk: Web Ez lesz a munkakönyvtárunk, ide kerül majd minden létrehozott

Részletesebben

Az Ebook leadással kapcsolatos fontos információk

Az Ebook leadással kapcsolatos fontos információk Az Ebook leadással kapcsolatos fontos információk Tartalom Az Ebook leadással kapcsolatos fontos információk...1 Tartalom... 1 Stílusok... 2 Idézetek... 4 Képek... 5 Inline image... 5 Illusztráció... 6

Részletesebben

Az intézeti kérdıív kezelı rendszer dokumentációja

Az intézeti kérdıív kezelı rendszer dokumentációja DE Pszichológiai Intézet Az intézeti kérdıív kezelı rendszer dokumentációja v1.0.2 Készítette: Szász Béla Sándor 2009. január Tartalom MI AZ XML? 2 XML SZINTAXIS SZABÁLYAI 3 A KÉRDİÍVET LEÍRÓ XML ÁLLOMÁNY

Részletesebben

II. Mérés SZÉCHENYI ISTVÁN EGYETEM GYŐR TÁVKÖZLÉSI TANSZÉK

II. Mérés SZÉCHENYI ISTVÁN EGYETEM GYŐR TÁVKÖZLÉSI TANSZÉK Mérési Utasítás Linux/Unix jogosultságok és fájlok kezelése Linux fájlrendszerek és jogosultságok Linux alatt, az egyes fájlokhoz való hozzáférések szabályozása érdekében a fájlokhoz tulajdonost, csoportot

Részletesebben

HTML 5 - Start. Turóczy Attila Livesoft Kft

HTML 5 - Start. Turóczy Attila Livesoft Kft HTML 5 - Start Turóczy Attila Kft. 2010.11.01. HTML története A HTML az angol HyperText Markup Language szavak rövidítése. Alapvetően egy leírónyelv, ami weboldalak készítéséhez használunk. A HTML szöveges

Részletesebben

MS ACCESS 2010 ADATBÁZIS-KEZELÉS ELMÉLET SZE INFORMATIKAI KÉPZÉS 1

MS ACCESS 2010 ADATBÁZIS-KEZELÉS ELMÉLET SZE INFORMATIKAI KÉPZÉS 1 SZE INFORMATIKAI KÉPZÉS 1 ADATBÁZIS-KEZELÉS MS ACCESS 2010 A feladat megoldása során a Microsoft Office Access 2010 használata a javasolt. Ebben a feladatban a következőket fogjuk gyakorolni: Adatok importálása

Részletesebben

Felhasználói Útmutató egyesületi tenyészetek részére

Felhasználói Útmutató egyesületi tenyészetek részére Magyar Bivalytenyésztési Információs Rendszer Felhasználói Útmutató egyesületi tenyészetek részére Tartalomjegyzék Általános információ... 1 Belépés... 1 Teendők listája... 2 Alapadatok... 2 Tagsági/tenyésztői

Részletesebben

Statikus és dinamikus weblapok

Statikus és dinamikus weblapok A statikus weblapok Statikus és dinamikus weblapok A honlapok lehetnek statikusak és dinamikusak. A statikus weblapok tartalma és forrás kódja állandó. A statikus weblapok létrehozására alkalmas a HTML

Részletesebben

OKTATÁSI MINISZTÉRIUM. SZÓBELI VIZSGATÉTELEK A többször módosított 100/1997. (VI. 13.) Korm. rendelet alapján szervezett OKJ szakmai vizsgához

OKTATÁSI MINISZTÉRIUM. SZÓBELI VIZSGATÉTELEK A többször módosított 100/1997. (VI. 13.) Korm. rendelet alapján szervezett OKJ szakmai vizsgához OKTATÁSI MINISZTÉRIUM SZÓBELI VIZSGATÉTELEK A többször módosított 100/1997. (VI. 13.) Korm. rendelet alapján szervezett OKJ szakmai vizsgához SZÁMÍTÁSTECHNIKAI SZOFTVERÜZEMELTETŐ OKJ 52 4641 03 A szóbeli

Részletesebben

Webshop készítése ASP.NET 3.5 ben I.

Webshop készítése ASP.NET 3.5 ben I. Webshop készítése ASP.NET 3.5 ben I. - Portál kialakíása - Mesteroldal létrehozása - Témák létrehozása Site létrehozása 1. File / New Web site 2. A Template k közül válasszuk az ASP.NEt et, nyelvnek (Language)

Részletesebben

Adatszerkezetek Tömb, sor, verem. Dr. Iványi Péter

Adatszerkezetek Tömb, sor, verem. Dr. Iványi Péter Adatszerkezetek Tömb, sor, verem Dr. Iványi Péter 1 Adat Adat minden, amit a számítógépünkben tárolunk és a külvilágból jön Az adatnak két fontos tulajdonsága van: Értéke Típusa 2 Adat típusa Az adatot

Részletesebben

HTML alapok. A HTML az Internetes oldalak nyelve.

HTML alapok. A HTML az Internetes oldalak nyelve. A HTML az Internetes oldalak nyelve. HTML alapok Karakteres szövegszerkesztővel (pl. Jegyzettömb) szerkeszthető. FONTOS, hogy az elkészült oldal kiterjesztése ne txt, hanem html legyen! Felépítése: Két

Részletesebben

Az internet az egész világot behálózó számítógép-hálózat.

Az internet az egész világot behálózó számítógép-hálózat. Az internet az egész világot behálózó számítógép-hálózat. A mai internet elődjét a 60-as években az Egyesült Államok hadseregének megbízásából fejlesztették ki, és ARPANet-nek keresztelték. Kifejlesztésének

Részletesebben

Kedves Openhouse-os munkatársak!

Kedves Openhouse-os munkatársak! Kedves Openhouse-os munkatársak! Tapasztalataink szerint a tartalom kezelő rendszerek (Content Management Systems CMS) felhasználói gyakran kevéssé ismerik azokat az elveket, amik segíthetik az oldal eredményesebb

Részletesebben

Tartalom. Alapelemek. Célok. Eszközök. Szerkezet. Alapelvek. Prezentáció. Folyamat

Tartalom. Alapelemek. Célok. Eszközök. Szerkezet. Alapelvek. Prezentáció. Folyamat WEBLAPFEJLESZTÉS Tartalom Alapelemek Célok Eszközök Szerkezet Alapelvek Folyamat Prezentáció Célok Weboldalakkal szemben állított követelmények: - vonzó, egyszerű, igényes, harmonikus színvilág - felhasználóbarát

Részletesebben

Választó lekérdezés létrehozása

Választó lekérdezés létrehozása Választó lekérdezés létrehozása A választó lekérdezés egy vagy több rekordforrásból származó adatokat jelenít meg. A választó lekérdezések a táblák, illetve az adatbázis tartalmát nem változtatják meg,

Részletesebben

KARAKTERFELISMERÉS AZ EVASYS-BEN

KARAKTERFELISMERÉS AZ EVASYS-BEN KARAKTERFELISMERÉS AZ EVASYS-BEN HOL HASZNÁLHATÓ, KI HASZNÁLHATJA A Miskolci Egyetem megvásárolta a kézírásfelismerés (ICR) modult az Evasys legutóbbi licencével együtt. Ezzel lehetőség nyílt a papír alapú

Részletesebben

PDF DOKUMENTUMOK LÉTREHOZÁSA

PDF DOKUMENTUMOK LÉTREHOZÁSA PDF DOKUMENTUMOK LÉTREHOZÁSA A Portable Document Format (PDF) az Adobe Systems által kifejlesztett bináris fájlformátum. Ebben a formátumban dokumentumok tárolhatók, amelyek különbözı szoftverekkel, hardverekkel

Részletesebben

18. Szövegszerkesztők

18. Szövegszerkesztők 18. Szövegszerkesztők A szövegszerkesztés olyan számítógépes művelet, amelynek során később nyomtatásban megjelenő szövegegységeket, dokumentumokat hozunk létre, majd azokat papírra kinyomtatjuk. A különböző

Részletesebben

DKÜ ZRT. A Portál rendszer felületének általános bemutatása. Felhasználói útmutató. Támogatott böngészők. Felületek felépítése. Információs kártyák

DKÜ ZRT. A Portál rendszer felületének általános bemutatása. Felhasználói útmutató. Támogatott böngészők. Felületek felépítése. Információs kártyák A Portál rendszer felületének általános bemutatása Felhasználói útmutató Támogatott böngészők Internet Explorer 9+ Firefox (legújabb verzió) Chrome (legújabb verzió) Felületek felépítése Információs kártyák

Részletesebben

Az Orbis adatbáziskezelő

Az Orbis adatbáziskezelő ORBIS ADATBÁZIS WEBRE VITELE KÉSZÍTETTE: SOÓS PÉTER 2001. április 13. Bevezetés Ezen írás a NETWORKSHOP 2001 konferenciára készített előadásom anyagának szerkesztett változata. 1994-95. óta sok jelentős

Részletesebben

Hálózatkezelés Szolgáltatási minőség (QoS)

Hálózatkezelés Szolgáltatási minőség (QoS) System i Hálózatkezelés Szolgáltatási minőség (QoS) 6. verzió 1. kiadás System i Hálózatkezelés Szolgáltatási minőség (QoS) 6. verzió 1. kiadás Megjegyzés Jelen leírás és a tárgyalt termék használatba

Részletesebben

Az autorizáció részletes leírása

Az autorizáció részletes leírása Az autorizáció részletes leírása 1. REGISZTRÁCIÓ ÉS FELTÉTELEI 1.1 Regisztráció Az Autorizációs kérés előtt a szervezetnek vagy a magánszemélynek regisztráltatnia kell magát. A regisztrációs lapon megadott

Részletesebben

Fogalmak: Adatbázis Tábla Adatbázis sorai: Adatbázis oszlopai azonosító mező, egyedi kulcs Lekérdezések Jelentés Adattípusok: Szöveg Feljegyzés Szám

Fogalmak: Adatbázis Tábla Adatbázis sorai: Adatbázis oszlopai azonosító mező, egyedi kulcs Lekérdezések Jelentés Adattípusok: Szöveg Feljegyzés Szám Fogalmak: Adatbázis: logikailag összefüggő információ vagy adatgyőjtemény. Tábla: logikailag összetartozó adatok sorokból és oszlopokból álló elrendezése. Adatbázis sorai: (adat)rekord Adatbázis oszlopai:

Részletesebben

TUDNIVALÓK A WEB-FEJLESZTÉS I. KURZUSRÓL

TUDNIVALÓK A WEB-FEJLESZTÉS I. KURZUSRÓL TUDNIVALÓK A WEB-FEJLESZTÉS I. KURZUSRÓL http://bit.ly/a1lhps Abonyi-Tóth Andor Egyetemi tanársegéd 1117, Budapest XI. kerület, Pázmány Péter sétány 1/C, 2.404 Tel: (1) 372-2500/8466 http://abonyita.inf.elte.hu

Részletesebben