HTML, Xhtml, Css

HTML, XHTML, CSS KSZK, WebProjekt KIR-dev team

el˝oadó:

Domonkos Balázs, [email protected] 2005. tavasz

TARTALOMJEGYZÉK

Köszönet Széll (Bandita) Andrásnak az épít˝o javaslatokért és azért, hogy lefordította a jegyzetet magyarról magyarra :)

Ábrák jegyzéke 1. 2. 3. 4. 5. 6.

Táblázat filozófiája HTML-ben . . . . . . . . . . . cellspacing és cellpadding tulajdonság értelmezése Ruby komment . . . . . . . . . . . . . . . . . . . Függ˝oleges igazítás . . . . . . . . . . . . . . . . . Doboz modell felépítése . . . . . . . . . . . . . . CSS-ben használt szegélystílusok . . . . . . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

13 14 28 36 39 40

. . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . . .

5 5 5 6 7 7 9 9 10 10 10 10 11 11 11 13 13 15 16 17 17 18 18 18 18 18 21 22

2. XHTML 2.1. Az XML-r˝ol röviden . . . . . . . . . . . . . . . . . 2.2. Az XHTML története, létrejöttének okai . . . . . . . 2.3. XML nyelvi megkötések . . . . . . . . . . . . . . . 2.4. DTD és ajánlások . . . . . . . . . . . . . . . . . . . 2.4.1. Dokumentumtípusok . . . . . . . . . . . . . 2.4.2. XML fejléc . . . . . . . . . . . . . . . . . . 2.5. Különbségek a HTML 4-hez képest és kompatibilitás 2.5.1. Jólformáltság . . . . . . . . . . . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

23 23 23 24 24 25 25 25 25

Tartalomjegyzék 1. HTML 1.1. Hipertext . . . . . . . . . . . . . . . . 1.2. Története, létrejöttének okai . . . . . . 1.3. HTML dokumentum szerkezete . . . . 1.3.1. Címkék . . . . . . . . . . . . . 1.3.2. Karakterkódolás és formátumok 1.3.3. Komment . . . . . . . . . . . . 1.4. HTML verzió információ . . . . . . . . 1.5. HTML tag . . . . . . . . . . . . . . . . 1.6. Fejléc () . . . . . . . . . . . . 1.6.1. Dokumentum címe () 1.6.2. Meta adat () . . . . . 1.7. Törzs () . . . . . . . . . . . . 1.8. Megjelenítés . . . . . . . . . . . . . . . 1.8.1. Szöveg . . . . . . . . . . . . . 1.8.2. Lista . . . . . . . . . . . . . . 1.8.3. Táblázat . . . . . . . . . . . . . 1.8.4. Link . . . . . . . . . . . . . . . 1.8.5. Kép . . . . . . . . . . . . . . . 1.8.6. Keret (frame) . . . . . . . . . . 1.8.7. Stílus . . . . . . . . . . . . . . 1.8.8. Csoportosító címkék . . . . . . 1.9. Interaktivitás . . . . . . . . . . . . . . 1.9.1. Objektum, applet . . . . . . . . 1.9.2. Script . . . . . . . . . . . . . . 1.9.3. u˝ rlap . . . . . . . . . . . . . . 1.10. Weboldalak kiszolgálása . . . . . . . . 1.11. Validálás . . . . . . . . . . . . . . . . .

2

. . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . . .

TARTALOMJEGYZÉK

2.5.2. Tagnevek . . . . . . . . . . . . . . . . . . . . 2.5.3. Whitespace-kezelés az attribútumok értékeiben 2.5.4. Script és Style elemek . . . . . . . . . . . . . 2.5.5. SGML kizárások . . . . . . . . . . . . . . . . 2.5.6. Elemek id és name attribútumokkal . . . . . . 2.5.7. Attribútumok el˝ore definiált értékkészlettel . . 2.5.8. Entitáshivatkozások hexadecimális értékekként 2.5.9. Címke nyelvének megadása . . . . . . . . . . 2.6. Kapcsolatok más szabványokkal . . . . . . . . . . . . 2.6.1. XML . . . . . . . . . . . . . . . . . . . . . . 2.6.2. DOM . . . . . . . . . . . . . . . . . . . . . . 2.6.3. CSS . . . . . . . . . . . . . . . . . . . . . . . 2.7. XHTML 1.1 . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . .

. . . . . . . . . . . . .

. . . . . . . . . . . . .

. . . . . . . . . . . . .

. . . . . . . . . . . . .

. . . . . . . . . . . . .

. . . . . . . . . . . . .

. . . . . . . . . . . . .

. . . . . . . . . . . . .

. . . . . . . . . . . . .

. . . . . . . . . . . . .

. . . . . . . . . . . . .

. . . . . . . . . . . . .

. . . . . . . . . . . . .

. . . . . . . . . . . . .

. . . . . . . . . . . . .

. . . . . . . . . . . . .

. . . . . . . . . . . . .

. . . . . . . . . . . . .

25 26 26 26 26 27 27 27 27 27 27 28 28

3. CSS 3.1. Története, létrejöttének okai . . . . . . . . . . . . . . . . . 3.1.1. Története . . . . . . . . . . . . . . . . . . . . . . . 3.1.2. Mire jó? . . . . . . . . . . . . . . . . . . . . . . . . 3.2. Stíluslap alapok . . . . . . . . . . . . . . . . . . . . . . . . 3.2.1. Stílus deklaráció . . . . . . . . . . . . . . . . . . . 3.2.2. Stílus specifikáció . . . . . . . . . . . . . . . . . . 3.3. Szelektorok . . . . . . . . . . . . . . . . . . . . . . . . . . 3.3.1. Univerzális szelektor . . . . . . . . . . . . . . . . . 3.3.2. Típus szelektor . . . . . . . . . . . . . . . . . . . . 3.3.3. Szelektorok kontextusa . . . . . . . . . . . . . . . . 3.3.4. Szelektor osztályok (Class Selector) . . . . . . . . . 3.3.5. ID szelektor . . . . . . . . . . . . . . . . . . . . . . 3.3.6. Szelektor pszeudo-osztályok (Pseudo class selector) 3.4. Bet˝utípus . . . . . . . . . . . . . . . . . . . . . . . . . . . 3.4.1. Bet˝utípus család (font family) . . . . . . . . . . . . 3.4.2. Bet˝uméret . . . . . . . . . . . . . . . . . . . . . . . 3.4.3. Bet˝uvastagság (font weight) . . . . . . . . . . . . . 3.4.4. Bet˝ud˝oltség (font style) . . . . . . . . . . . . . . . . 3.4.5. Szöveg aláhúzás (text decoration) . . . . . . . . . . 3.4.6. Kisbet˝u-nagybet˝u átalakítás . . . . . . . . . . . . . 3.4.7. Bet˝utípus megadás egyszerre . . . . . . . . . . . . . 3.5. Szöveg . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3.5.1. Sormagasság . . . . . . . . . . . . . . . . . . . . . 3.5.2. Vízszintes igazítás . . . . . . . . . . . . . . . . . . 3.5.3. Függ˝oleges igazítás . . . . . . . . . . . . . . . . . . 3.5.4. Szöveg körbefuttatása . . . . . . . . . . . . . . . . 3.5.5. Bekezdés . . . . . . . . . . . . . . . . . . . . . . . 3.6. Lista . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3.6.1. Lista típusa . . . . . . . . . . . . . . . . . . . . . . 3.6.2. Lista igazítása . . . . . . . . . . . . . . . . . . . . . 3.6.3. Lista meghatározása egyszerre . . . . . . . . . . . . 3.7. Szín és háttér . . . . . . . . . . . . . . . . . . . . . . . . . 3.7.1. El˝otérszín . . . . . . . . . . . . . . . . . . . . . . . 3.7.2. Háttérszín . . . . . . . . . . . . . . . . . . . . . . . 3.7.3. Háttérkép . . . . . . . . . . . . . . . . . . . . . . . 3.8. Dobozolás . . . . . . . . . . . . . . . . . . . . . . . . . . . 3.8.1. Doboz-orientált modell . . . . . . . . . . . . . . . . 3.8.2. Margó (margin) . . . . . . . . . . . . . . . . . . . . 3.8.3. Szegély (border) . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

29 29 29 29 29 29 29 31 31 31 31 32 32 32 34 34 34 34 35 35 35 35 35 35 36 36 37 37 37 37 38 38 38 38 38 38 39 39 39 40 3

TARTALOMJEGYZÉK

3.8.4. Ráhagyás (Padding) . . . 3.8.5. Tartalom méretei (content) 3.8.6. Túlfutás (overflow) . . . . 3.9. Táblázat . . . . . . . . . . . . . . 3.9.1. Szegély . . . . . . . . . . 3.10. Pozíció és vizuális effektusok . . . 3.10.1. Doboz pozicionálás . . . . 3.10.2. Z-Index . . . . . . . . . . 3.10.3. Vágás . . . . . . . . . . . 3.10.4. Láthatóság . . . . . . . . 3.10.5. Megjelenítés . . . . . . . 3.11. Médiatípusok . . . . . . . . . . . 3.12. Felhasználói interface . . . . . . . 3.12.1. Egérkurzor . . . . . . . . 3.12.2. Asztali színek . . . . . . .

. . . . . . . . . . . . . . .

. . . . . . . . . . . . . . .

. . . . . . . . . . . . . . .

. . . . . . . . . . . . . . .

. . . . . . . . . . . . . . .

. . . . . . . . . . . . . . .

. . . . . . . . . . . . . . .

. . . . . . . . . . . . . . .

. . . . . . . . . . . . . . .

. . . . . . . . . . . . . . .

. . . . . . . . . . . . . . .

. . . . . . . . . . . . . . .

. . . . . . . . . . . . . . .

. . . . . . . . . . . . . . .

. . . . . . . . . . . . . . .

. . . . . . . . . . . . . . .

. . . . . . . . . . . . . . .

. . . . . . . . . . . . . . .

. . . . . . . . . . . . . . .

. . . . . . . . . . . . . . .

. . . . . . . . . . . . . . .

. . . . . . . . . . . . . . .

. . . . . . . . . . . . . . .

. . . . . . . . . . . . . . .

. . . . . . . . . . . . . . .

. . . . . . . . . . . . . . .

. . . . . . . . . . . . . . .

. . . . . . . . . . . . . . .

. . . . . . . . . . . . . . .

. . . . . . . . . . . . . . .

41 41 41 42 42 42 42 42 43 43 43 43 44 44 44

A. Fogalmak

46

B. Példák B.1. HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . B.2. XHTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . B.3. CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

47 47 56 56

4

1. HTML Hypertext Markup Language.

1.1.

Hipertext

A hipertext fogalmát megalkotó Ted Nelson klasszikussá vált meghatározása szerint a hipertext „nemfolyamatos írás – olyan szöveg, amely elágazik és választási lehet˝oséget kínál az olvasónak, s amely legjobban egy interaktív képerny˝on olvasható. Az általános elképzelés szerint ez szövegdarabok linkekkel összekapcsolt sorozata, amelyek különböz˝o útvonalakat kínálnak az olvasó számára”. Memex Vannevar Bush Roosevelt elnök tudományos tanácsadójaként közvetlenül a második világháború után, 1945 júliusában publikálta az Út az új gondolkodás felé cím˝u tanulmányát, s ezzel gyakorlatilag lefektette a hipertext koncepciójának alapjait. Egy olyan gépet álmodott meg, amely a hagyományos adatstrukturálással (alfabetikus sorrend, ld. könyvtár) ellentétben az emberi asszociációhoz hasonló indexelést definiált a dokumentumok között. Xanadu Bár a Memex soha nem valósult meg, a mögötte meghúzódó elképzelés közvetlen hatást gyakorolt számos szakemberre, akik évtizedekkel kés˝obb a digitális kultúra kiépítésén fáradoztak. Ted Nelson is, aki megalkotta a hipertext és hipermédia szavakat, bevallottan a mechanikus Memex elektronikus változatát igyekezett megteremteni az általa kezdeményezett Xanadu projektben. [2][7]

1.2. Története, létrejöttének okai A hypertext, a HTML és a kapcsolódó események a HTML 4.01-ig bezárólag: 1989 Tim Berners-Lee és Robert Caillian, a genfi CERN (Nukleáris Kutatások Európai Központja) kutatói javaslatot tesznek a világméret˝u háló, a World Wide Web (WWW) létrehozására, többek közt a Xanadu koncepciójából merítve az ötletet. Az internetes szerverek száma meghaladja a százezret. 1990 Az internetes dokumentumokat leíró HTML (Hypertext Markup Language) nyelv kidolgozása. 1991 A Gopher hálózat (a WWW-hez hasonló, nem hipertext alapú hálózat) létrehozása. 1992 A CERN bejelenti a WWW megszületését. Az internetes szerverek száma meghaladja az egymilliót. 1993 A CERN igazgatótanácsa döntése alapján a WWW technológia szabadon és ingyenesen használható. A National Center for Supercomputing Applications kifejleszti a Mosaic-ot, az els˝o széles körben elterjedt grafikus böngész˝ot. A Fehér Ház honlapja elérhet˝ové válik a WWW-en. 1994 A WWW fejlesztésére megalakul a World Wide Web Consortium (W3C). A WWW forgalma meghaladja a Gopherét. 1995 HTML 2.0 verzió. Több keres˝omotor létesül (Lycos, Yahoo!);az Altavista 15 millió oldalt tart nyilván. Megszületik a Netscape Navigator böngész˝o. VRML (Virtual Reality Modeling Language) kidolgozása. A Sun Microsystems els˝osorban internetes alkalmazások fejlesztésére megalkotja a Java objektumorientált programozási nyelvet, kezdetét veszi a Java appletek terjedése. Az els˝o magyar nyelv˝u MUD1 szerepjáték megjelenése (Elveszett világ) a Budapesti M˝uszaki Egyetem Schönherz Zoltán Kollégiumának szerverén. 1996 A Netscape Navigator 2.0 lehet˝ové teszi több keretb˝ol (frame) álló weboldalak létrehozását. 1997 HTML 3.2 verzió. Magyarországon beindul a SuliNet program, ami internetes hozzáférést biztosít általános- és középiskolák számára. 1 MultiUser

Dungeon

5

1 HTML

1998 HTML 4.0 verzió 1999 HTML 4.01 verzió [2][3] Az egyes HTML verziók képességei: HTML 0 a dokumentum tartalmára vonatkozó címkék, valamint hiperhivatkozásokhoz, címsorokhoz, bekezdésekhez, listákhoz és menütételekhez használható jelölési definíciók. HTML 1 megtartotta a HTML 0-ás verziójának összes tulajdonságát, és kiegészítette azokat a sorokba illeszthet˝o képek támogatásával, valamint a különböz˝o karakterformázó lehet˝oségekkel (pl. vastagítás, d˝olt bet˝u). HTML 2 u˝ rlapok (formok) kezelése HTML 3.2 táblázatok kezelése, formázási lehet˝oségek szélesítése (bet˝utípusok támogatása), appletek, scriptek támogatása. Megjelenik a tag, egyel˝ore kevés haszonnal, csak ígéret szinten. A képtérképek (imagemap) és a tag (általános tároló) is megjelenik. HTML 4.0 jobbról-balra írás/olvasás, keretek (frame-ek), néhány új formázóelem megjelenése. Az tag segítségével lehet˝oség nyílik multimédiás tartalom weboldalba ágyazására. Továbbiakban a HTML 4.01 Strict szabványt ismertetem.

1.3.

HTML dokumentum szerkezete

A HTML dokumentum szöveges file, amely a szöveges tartalom mellett ún. címkéket (tageket) tartalmaz. Ezek a tagek felel˝osek a szöveges információ formázásáért és a szövegre vonatkozó metainformáció (pl. hiperlinkek) hordozásáért. Egy HTML dokumentum három részre bontható: 1. HTML verzió információ 2. HTML fejrész ( tag) 3. HTML törzs ( vagy tag) Az egyes részek között tetsz˝oleges számú ún. whitespace (szóköz, újsor, tabulátor) vagy komment (ld. 1.3.3 fejezet) lehet. A 2. és 3. részt tagek közé kell. Például így néz ki a legegyszer˝ubb HTML dokumentum: Az elso HTML dokumentumom Hello World! 6

1.3

HTML dokumentum szerkezete

1.3.1. Címkék A címkék < jellel és a címke nevével kezd˝odnek és > záródnak. Vannak páratlan és páros tagek – az utóbbiakat le kell zárni. Egy tag lezártja megegyezik a tag nevével, amelyet / karakter el˝oz meg. Például: ... A tagek nevén túl tartalmazhatnak attribútumokat, amelyek a jelöl˝o alapértelmezett jelentését módosítják. Célszer˝u akkor is beállítani az attribútum értékét az általunk tervezettre, ha egy böngész˝ovel tesztelve a kívánt eredményt tapasztaljuk, ugyanis a böngész˝ok alapbeállítása, így a kapott kép eltér˝o lehet. Az attribútum megadása az attribútum nevének és értékének definiálásával történik. Az értéket idéz˝ojelben célszer˝u megadni, ez kötelez˝o abban az esetben, ha az érték több szóból áll, más esetben elhagyható. A címkék és az attribútumnevek HTML 4-ben nem nagybet˝u-érzékenyek. Például: Érdemes azonban homogén írási szokást kialakítani, pl. írjunk minden taget csupa kisbet˝uvel és tegyük ki az idéz˝ojeleket (mellesleg ez a stílus el˝oremutat az XHTML felé, ld. 2. fejezet). 1.3.2.

Karakterkódolás és formátumok

Karakterkódolás A karakterkódolást a HTTP kérésben (HTTP Content-Type fejlécének charset paraméterével) továbbítja a webszerver. Megadható a HTML dokumentum fejlécében is, de azt általában figyelmen kívül hagyja a user agent (azon program, amely értelmezi a forrásdokumentumot és a stíluslapokat és a megjelenített tartalmat el˝oállítja (pl. böngész˝o)). A továbbiakban a könnyebb érthet˝oség kedvéért a böngész˝o fogalmat használom a user agent helyett, de a pontos megnevezés mindenütt user agent. A dokumentum létrehozásakor ügyelnünk kell arra, hogy azonos kódolással hozzuk létre a file-t, mint ami a webszerver beállításában szerepel. Célszer˝u például ISO-8859-2 (közép-európai kódlap) használata. UNIX alatt a recode parancs segítségével konvertálhatjuk a file-okat egyik kódkészletr˝ol egy másikra. HTML entitások Lehet˝oségünk van olyan karakterek, szimbólumok megadására is, amelyek nem szerepelnek az adott kódlap karakterkészletében; ezek az ún. HTML entitások. Az entitás &nev; alakú, ahol nev az entitás neve. Például © a copyright jele, α a görög alfa bet˝u. HTML entitás formájában megadhatunk UNICODE karaktereket is. &#number; alakban decimális és &#xnumber; alakban hexadecimális alakban. Például © ill. © a copyright szimbólum. A HTML entitások listája a weben könny˝uszerrel megtalálható. White space-ek HTML-ben az alábbi whitespace karakterek ill. HTLM entitások definiáltak(ld. 1.3.2. fejezet): • ASCII bet˝uköz ( ) • ASCII tabulátor ( ) • ASCII soremelés () • nulla szélesség˝u bet˝uköz2 (​) 2 nemzeti

okokból

7

1 HTML

A soremelés és kocsivissza karakterek a megjelenített dokumentumban nem eredményeznek soremelést, a sortöréseket a böngész˝o automatikusan intézi. Természetesen lehet˝oségünk van ebbe beleszólni, explicit sortöréseket beszúrni ( tag) és a soremelést megakadályozni (  entitás (not breaking space) segítségével). Automatikus elválasztásra általálában képtelen a böngész˝o. Egyedül köt˝ojel vagy rejtett köt˝ojel (­ – soft hypernation) mentén képes elválasztani. Pl.: htmlexample06.html Hosszúságok A megjelenített dokumentum formázása során sok elem (pl. táblázat, doboz) szélességét, magasságát, vízszintes ill. függ˝oleges pozícióját kell megadni, amely többféleképpen tehet˝o meg: • pixelben kifejezve, ha nem adunk meg mást, pl: 64, 64px • százalékosan a rendelkezésre álló hely adott százalékában, pl: 64% • arányosan táblázatszélességek méretezésekor (ekkor a rendelkezésre álló helyet a megadott arányban osztja szét a böngész˝o), pl: 2* Színkódok HTML-ben színek #RRGGBB alakban adhatók meg, ahol • RR: a vörös összetev˝o hexadecimális kódja • GG: a zöld összetev˝o hexadecimális kódja • BB: a kék összetev˝o hexadecimális kódja Így például #000000 a fekete, #FF00FF az élénk lila kódja. A színek nemcsak kóddal, hanem névvel is megadhatók – vigyázat a név nagybet˝u-érzékeny. Néhány példa: Black Silver Gray White Maroon Red Purple Fuchsia

= = = = = = = =

"#000000" "#C0C0C0" "#808080" "#FFFFFF" "#800000" "#FF0000" "#800080" "#FF00FF"

Green Lime Olive Yellow Navy Blue Teal Aqua

= = = = = = = =

"#008000" "#00FF00" "#808000" "#FFFF00" "#000080" "#0000FF" "#008080" "#00FFFF"

A színkódok részletes listája megtalálható a http://www.w3schools.com/html/html_colornames.asp oldalon. Megjegyzés: színek megadása HTML kódban elavult, helyette inkább CSS-sel adjuk meg. A CSS-re ugyanezen színkódolás érvényes. Képformátumok A weben használt képeknél figyelembe kell venni, hogy a felhasználó esetlegesen kis sávszélesség mellett fogja oldalunkat nézegetni, így mindenképp valamilyen tömörített képformátumot érdemes választanunk: JPEG veszteséges true-color3 tömörítési eljárás, alkalmas fotókra, ábrákra; a legkedveltebb formátum. Akkor nem érdemes alkalmaznunk, ha úgymond „minden pixel” fontos, mert hajlamos az élek elmosására, ill. nem támogatja az átlátszóságot. 3 valós

8

szín˝u, 24 millió színárnyalatot különböztet meg

1.4 HTML verzió információ

PNG Portable Network Graphics, veszteségmentes true-color tömörít˝o eljárás, amely támogatja az átlátszóságot. Megalkotásakor gondoltak a stream-alapú használatra (ilyen a web is), így a kép letöltése közben lehet˝oség van arra, hogy a letöltött kép durvább felbontással a teljes letöltés el˝ott megjelenjen. Az átlátszóságot ún. alfa csatornával támogatja (256 szint˝u áttetsz˝oség). Létezik mozgókép változata is (MNG). GIF Graphics Interchange Format, a CompuServe cég (régi hálózati szolgáltató, az 1990-es évek elején felvásárolta az AOL) által kitalált formátum. 256 szín kezelésére képes, amelyb˝ol egy szín feláldozásával átlátszóság adható meg (bináris átlátszóság). A GIF89a verzió mozgóképet is támogat (animált gif ). A web kialakulásától kezdve közkedvelt formátum (az IE böngész˝o egy ideig nem támogatta a PNG átlátszóságát, többek közt ezért maradt fenn). A benne használt LZW-tömörítésen lev˝o szabadalom (mellyel a UniSys cég rendelkezik, alkalmanként pénzt kér érte) 2004 nyarán Európában lejárt. URI-k Az URI (Uniform Resource Identifier) részletes leírása megtalálható a [6] rfc dokumentumban. Els˝o közelítésben csak az URLr˝ol (Uniform Resource Locator) lesz szó. URL például egy weboldal elérési útja. Amikor a böngész˝onk címsorába begépeljük egy weblap nevét, tulajdonképpen URL-jét írjuk le. Amikor egy olyan webes u˝ rlapot töltünk ki, amely ún. GET paraméterátadással dolgozik (ld. kés˝obbi el˝oadások) a begépelt paraméterek az URL-ben adódnak át; természetesen átkódolva (url encoding). A weboldalak írása során szem el˝ott kell tartanunk, hogy a böngész˝onk alapvet˝oen kétféle elérési út megadást ismert: • abszolút elérési út esetén protokolllal kezd˝od˝o URL-t adunk meg. Pl: http://google.com • relatív elérési út minden más esetben a böngész˝o relatív (vagyis az aktuális URL-hez viszonyított) elérési útnak tételezi fel a megadott címet. A file-rendszereken megszokott .. alkönyvtár a szül˝okönyvtárra mutat, míg a könyvtárak elválasztására a UNIX rendszerekr˝ol ismert / alkalmas. 1.3.3.

Komment

HTML-ben, ahogy sok más nyelven bizonyos részeket megjegyzésbe helyezhetünk, ezek nem jelennek meg. HTML-ben egyfajta blokk komment írása lehetséges: tetszoleges szamu sorbol allhat --> Kommenten belül a tageket természetesen nem értelmezi a böngész˝o.

1.4.

HTML verzió információ

A verzió információ (ún. DTD, ld. XML el˝oadás) adja meg, hogy a HTML dokumentum milyen HTML verziónak felel meg (ld. 1.11 fejezet): • HTML 4.01 Strict DTD: mindazon tageket és attribútumokat tartalmazza, amelyek nem lettek érvénytelenítve (deprecated). A fejléc alakja az alábbi: 9

1 HTML

• HTML 4.01 Transitional DTD: Az el˝obbi valamint az érvénytelenített tagek és attribútumok. A fejléc alakja az alábbi: • HTML 4.01 Frameset DTD: Az el˝obbi valamint a keretek (frame-ek, ld. 1.8.6 fejezet). A fejléc alakja az alábbi:

1.5.

HTML tag

A páros tag nem rendelkezik attribútumokkal. Megléte opcionális.

1.6.

Fejléc ()

A páros tag nem rendelkezik attribútumokkal. Megléte opcionális. 1.6.1.

Dokumentum címe ()

Páros tag, megadása kötelez˝o. A dokumentum címét tartalmazza, ez jelenik meg általában a böngész˝ok címsorában. Formázást nem tartalmazhat. 1.6.2.

Meta adat ()

A dokumentumról tárolhatunk páratlan tagek formájában olyan információkat, amely nem jelenik meg, a weboldalt feldolgozó robotnak (pl. keres˝orobot) szól. Az alábbi attribútumokkal rendelkezik: • name vagy http-equiv: a metainformáció neve • content: a metainformáció értéke Keres˝orobotok A tag leggyakoribb felhasználási területe az oldal leírása a keres˝orobotok számára a keywords tulajdonság beállításával. Kódtábla A fejlécben beállítható a dokumentum kódolása. Hasznos, mert a böngész˝o innen tudja eldönteni, milyen kódolással jelenítse meg az oldalt. (ld. még az 1.3.2. fejezetet). Szerz˝o A dokumentum szerz˝oje a author, a copyright információ a copyright tulajdonság beállításával lehetséges. 10

1.7

Törzs ()

1.7. Törzs () A dokumentum törzsét jelöl˝o páros tag elhagyható, de célszer˝u kiírni. Az alábbi attribútumokkal rendelkezik: • onLoad: az oldal teljes betölt˝odésekor lefutó script4 • onUnload: az oldalról való elnavigálás vagy böngész˝oablak bezárásakor lefutó script A régi verziókkal való kompatibilitás miatt megadhatók a dokumentumra vonatkozó színbeállítások. Bár ezeket nem érdemes használni (w3c deprecated, helyette CSS, ld. 3. fejezet), megemlítjük: • text: a szöveg alapértelmezett színe • link: linkek színe • vlink: meglátogatott (visited, innen a név) linkek színe5 • alink: aktív (éppen kiválasztott) link színe • bgcolor: háttér színe (ld. 1.3.2. fejezet) • background: háttérkép (ld. 1.3.2. fejezet) Pl.: htmlexample02.html A kereteket tartalmazó oldalt ld. 1.8.6. fejezetben.

1.8.

Megjelenítés

1.8.1. Szöveg Fontos csoportja a címkéknek a blokkdefiniáló tagek. Ezek a következ˝ok: • P: bekezdés (paragraph), • H1 .. H6: címsor (heading), • PRE: formázatlan szöveg (preformatted), • DIV: blokkszint˝u csoportosító tag, • ADDRESS: cím, emailcím megadása (nem használják) A szövegmegjelenést módosító tagek csak blokkdefiniáló tageken belül adhatók meg, csupán módosítják a megjelenést. Bekezdés Bekezdések a taggel adhatók meg, melynek zárótagje opcionálisan elhagyható. Címsorok A H1, H2, H3, H4, H5, H6 címsorok (headings) páros tagek növekv˝o mélység˝u címsorok definiálására szolgálnak. Pl.: cssexample07.html 4 részletesen 5a

ld. JavaScript el˝oadás látogatott linkek listját a böngész˝o egy id˝o után elfelejti, ennek pontos idejér˝ol nem tehetünk fel semmit

11

1 HTML

Formázatlan szöveg A páros tagek segítségével adható meg formázatlan szöveg fix karakterszélességgel és automatikus sortörés nélkül (a forrásdokumentum sortöréseit meghagyva). Kiemelés Logikai kiemelés (böngész˝ofügg˝o, általában d˝olt ill. félkövér megjelenítés): • EM: kiemelés • STRONG: er˝os kiemelés • CITE: idézet • DFN: definíció Explicit kiemelés: • B: félkövér (bold) • I: d˝olt (italic) • U: aláhúzott (underline, csak Transitional) Fix szélesség˝u (teletype) kiemelés: • CODE: programkód • SAMP: programkimenet • KBD: felhasználói bemenet • VAR: programváltozó Rövidítés: • ABBR: rövidítés (abbreviation) • ACRONYM: bet˝uszó (acronym) Idézet A BLOCKQOUTE páros tag hosszú blokk-szint˝u idézet kijelölésére szolgál, míg a szintén páros Q tag az idéz˝ojel helyes (akár nyelvfügg˝o, de ez er˝osen böngész˝ofügg˝o) kiírására alkalmas. A cite paraméterrel megadható az idézet forrása. Pl.: htmlexample03.html Indexek A SUP és SUB páros tagek szolgálnak az alsó- ill. fels˝oindex definiálására. Általában a bet˝uméretváltás automatikus. Pl.: htmlexample04.html Verziókövetés A INS és DEL páros tagek a dokumentumon történt változások megjelölésére alkalmasak. Egyetlen kikötés, hogy nem tartalmazhatnak blokkdefiniáló jelöl˝oket (ld. 1.8.1. fejezet). Pl.: htmlexample07.html 12

1.8 Megjelenítés

1.8.2. Lista A listák mindegyike a lista típusának megfelel˝o tag belsejében elhelyezett listaelemekb˝ol épül fel. A listát kijelöl˝o jelöl˝ok (UL, OL, DL) páros tagek, míg a listaelemeket megadó jelöl˝o (LI, DT, DD) zárótagje lehagyható. Sorrend nélküli lista UL tag (unordered list) segítségével definiálható. Sorrendezett lista OL tag (ordered list) segítségével definiálható. Definíciós lista DL tag (definition list) segítségével definiálható. Formázást ld. a 3.6. fejezetben. Pl.: htmlexample08.html 1.8.3.

Táblázat

1. ábra. Táblázat filozófiája HTML-ben

Táblázat definiálása A táblázat definiálása a TABLE páros tag segítségével történik. Attribútumok: • width: táblázat szélessége • border: keret szélessége (border = 0 esetén nincs keret) • cellspacing: a cellák közti távolság 13

1 HTML

• cellpadding: a keret, bels˝o vonalak és a tartalom közti távolság A cellspacing és cellpadding tulajdonságok értelmezése a 2. ábrán látható. A táblázat HTML-b˝ol történ˝o formázását megadó attribútumokat gyakorlatban elvétve használják, helyette CSS-sel formázzák a táblázatot. Így csak a teljesség kedvéért: • frame: a táblázat keretének mely részei látszanak: – void: egyik sem, – above: csak a fels˝o, – below: csak az alsó, – hsides: fels˝o és alsó, – vsides: bal és jobb, – lhs: csak a bal, – rhs: csak a jobb, – box: minden, – border: minden • rules: megadja, hogy hol jelenjenek meg bels˝o vonalak a táblázatban – none: sehol, – groups: csoportok (THEAD, TFOOT, TBODY,COLGROUP, COL) között, – rows: sorok között, – cols: oszlopok között, – all: mindenhol

2. ábra. cellspacing és cellpadding tulajdonság értelmezése

Táblázat felirata CAPTION páros tag segítségével. 14

1.8 Megjelenítés

Sorok csoportosítása A HTML táblázat sorok szerinti megközelítést használ. Háromféle sorosztály adható meg (ebben a sorrendben): • THEAD: táblázat fejléce • TFOOT: táblázat lábléce • TBODY: táblázat törzse Az el˝obbiek zárótagje, az utóbbi kezd˝o és zárótagje elhagyható. Oszlopcsoportok kijelölése A sor-orientált szemlélet ellenére lehet˝oség van oszlop szerinti csoportok kijelölésére, az oszlopszélességek és összevonások megadására. Pl.: A COLGROUP zárótagje opcionális, a COL magányos tag. A width attribútumhoz ld. 1.3.2. fejezet. Sorok TR (table row) címkével definiálható, a zárótag elhagyható. Cellák TH (table header cell) ill. TD (table data cell) címkével definiálható, a zárótag elhagyható. Attribútumok: • colspan: oszlopösszevonás • rowspan: sorösszevonás Pl.: htmlexample09.html 1.8.4.

Link

A hiperlinkek a HTML hipertext-mivoltát adják, az oldalon belül és az oldalak közti ugrásokat teszik lehet˝ové. A dokumentumon belül ún. horgonyokat helyezhetünk el: Ide kerul a horgony A horgonyneveknek egyénieknek kell lenniük, a kis és nagybet˝uk ez esetben meg vannak különböztetve és nem ütközhetnek CSS idkkal (ld. 3.3. fejezet). Az ugrás oldalak közt, ill. oldalon belül így valósítható meg: Ugras az oldal tetejere link a masik oldalra link a masik oldalon talalhato ,,valahol’’ horgonyra Link kulso oldalra link a masik oldalra, amely a keret nevu frame-ben fog megnyilni. 15

1 HTML

Az utolsó példában látható target argumentum megadja, hogy a link nem feltétlenül abban a keretben (ill. ablakban) nyílik meg, ahol a link található (ld. 1.8.6. fejezet). Ezt például abban az esetben érdemes használni, amikor a bal oldali frame-ben egy dokumentum tartalomjegyzéke található és a f˝oframe-ben maga a dokumentum látható. A target attribútum csak Transitional DTD-vel használható. Az A achor címke mindkét értelmezésében szigorúan páros tag. Pl.: htmlexample10.html 1.8.5.

Kép

Képek beszúrása az IMG magányos taggel történik, a képformátumokról ld. 1.3.2. fejezet. Attribútumok: • alt: a kép felirata, érdemes megadni • src: a kép elérési útja (ld. 1.3.2. fejezet) • heigth: kép magasságának felülbírálása • width: kép szélességének felülbírálása • usemap: kliens oldali térképet használ (értékként #terkep_neve alakban kell megadni az imagemap nevét) • ismap: szerver oldali térkép bemenete (a képre kattintva a böngész˝o elküldi a kattintás koordinátáit) A kép dimenzióit (width és height) mindig érdemes megadni, hogy az oldal letöltése közben ne „ugráljon” a megjelenített tartalom, ugyanis alapértelmezés szerint kis (kb 32x32 pixel) négyzet alakú méretet tételez fel a böngész˝o. Az imagemapeket a kép egy területét jelölik meg, amelyre hiperlinket definiálhatunk. Használata elavult, a Flash technológia kiszorította. Kliens oldali térkép (imagemap) Szintaxisa: A MAP páros, a AREA magányos tag. Az attribútumok jelentése: • alt: a terület felirata • shape: a terület alakja: – circle: kör – rect: téglalap – poly: poligon • coords az alakzatnak megfelel˝oen adhatók meg az azt leíró koordináták: – circle: esetén x, y, r – rect: esetén x1, y1, x2, y2 16

1.8 Megjelenítés

– poly: esetén x1, y1, x2, y2, ..., xn, yn • href: az URL ahová a link mutat • nohref: azt adja meg, hogy nem hivatkozunk sehova, nem akarunk ugrani, a térképet csak az script interaktivitás miatt hoztuk létre (iszonyatosan elavult) Pl.: htmlexample11.html 1.8.6.

Keret (frame)

A keretek segítségével a böngész˝oablakot több téglalap alakú részre oszthatjuk fel (vízszintesen vagy függ˝olegesen akár rekurzívan) és az egyes régiókba különböz˝o HTML dokumentumokat tölthetünk. Az egyes dokumentumok újratölt˝odésekor azok URL-jének megváltozásakor a keretet definiáló oldal, így a többi keret nem tölt˝odik újra. A FRAMESET páros taggel definiálható keretes felosztás, attribútumok: • rows: vessz˝ovel elválasztva a vízszinten felosztás méretei (ld. 1.3.2. fejezet) • cols: vessz˝ovel elválasztva a függ˝oleges felosztás méretei A FRAME magányos taggel pedig a FRAMESET-eken belül megadhatók az egyes keretek. Attribútumai: • name: a frame neve, erre hivatkozhatunk hyperlink megadásakor. Az alábbi neveknek speciális jelentésük van, pseudoframe-eket jelölnek: _blank: a böngész˝o egy új ablakba nyitja meg az oldalt _self: a aktuális frame-et jelöli _parent: a szül˝oframe (ennek segítségével tudja egy frame-beli oldal a keretet tartalmazó oldalt elnavigálni). Megegyezik a _self-fel, ha nincs szül˝oje az oldalnak _top: az o˝ sframe (a „örökl˝odés” csúcsán álló keret). Megegyezik a _self-fel, ha nincs szül˝oje az oldalnak • noresize: a frame-et nem lehet átméretezni (ha nem adjuk meg, akkor a szomszéd frame-mel határos méretez˝oléc segítségével a méretarányokat meg lehet változtatni) A FRAMESET törzsén belül NOFRAMES taggel adható meg, milyen tartalom jelenjen meg, ha a böngész˝o nem támogatja a keretek megjelenítését. Az IFRAME (inline frame) címkével a megjelenített dokumentumban olyan téglalap alakú területet jelölhetünk ki (mint a DIV-ek esetében) , ahová a böngész˝o egy másik html dokumentumot tölt be. Attribútumai: • src: az oldal forrása • name: a frame neve • width: a frame szélessége • height: a frame magassága Pl.: htmlexample12.html 1.8.7.

Stílus

Ld. a 3. fejezetet. 17

1 HTML

1.8.8. Csoportosító címkék Az eddig említett tag-ek a HTML történetének régmúltjába nyúlnak vissza, mindegyikük valamilyen jól definiált szerepet tölt be. A DIV (alapértelmezés szerint blokk-szint˝u) és a SPAN (alapértelmezés szerint sorbeli, inline) páros címkék nem rendelkeznek el˝ore definiált tartalommal, segítségükkel a dokumentum szerkezete szabadon alakítható és ezen a formázás igény szerint végezhet˝o el (CSS segítségével); ez már az XML felé mutat. Formázás, class, id ld. 3.3. fejezet.

1.9.

Interaktivitás

Lásd még 1.8.4. és 1.8.5. (imagemapek) fejezeteket! 1.9.1.

Objektum, applet

Az OBJECT címke segítségével multimédiás tartalmat6 , az APPLET taggel pedig Java Appletet7 építhetnünk honlapunkba. A http://www.w3.org/TR/html401/struct/objects.html oldalon található referenciában érdemes utánanézni a pontos szintaxisnak. 1.9.2. Script A SCRIPT címkék tartalmaként és az egyéb tagek on kezdet˝u ún. eseménykezel˝o attribútumaiban (pl. onClick, onKeyPress, onLoad, . . . ) szkript-kódot adhatunk meg, amellyel oldalunkat interaktívvá tehetjük. A script lehet JavaScript ill. VBScript (Visual Basic Script – a Microsoft csemetéje). A JavaScript, ahogy a neve is mutatja script-nyelv, amelyet közvetlenül a HTML oldal forrásába ágyazunk és azt a böngész˝o értelmezi és hajtja végre (ellentétben pl. a Javával, ahol a köztes kódú (byte-code) programot a Java Virtuális gép futtatja). A Java/JavaScript megjelenése el˝ott (a HTML 2.0 és 3.0 ajánlások idején) nem volt lehet˝oség lényeges mérték˝u kliens oldali interaktivitásra. A JavaScriptr˝ol ld. b˝ovebben a JavaScript el˝oadást. 1.9.3.

urlap ˝

Az u˝ rlap (form) segítségével a felhasználó adatokat küldhet böngész˝ojéb˝ol a szerver felé az ablakkezel˝o rendszerek megszokott interface-elemeinek segítségével (beviteli mez˝ok, választólista, gomb, stb...) FORM tag A páros FORM tag segítségével adható meg egy u˝ rlap (több u˝ rlap is szerepelhet egyazon oldalon). Legfontosabb attribútumai: • action: az az URL, ahová az u˝ rlap adatai továbbítódnak. • method: lehet GET ill. POST. Az el˝obbi esetben az URL-ben az utóbbinál a HTTP kérésben továbbítódnak a paraméterek. • name: az u˝ rlap neve. JavaScriptb˝ol ennek segítségével hivatkozhatunk az u˝ rlapra és annak mez˝oire (pl. annak ellen˝orzésekor, hogy a felhasználó helyes formátumú emailcímet adott-e meg). Felmerülhet a kérdés, mikor érdemes GET, mikor POST továbbítást választani. Ökölszabályként elfogadhatjuk, hogy lekérdez˝o (tehát nem módosító) cselekvés esetén célszer˝u GET használata. Ilyen például egy fórumoldal lekérése, praktikus, hogy a felhasználó eltárolhatja az oldal címét, a böngész˝oknél pedig gond nélkül használhatjuk az el˝ore és vissza navigáló gombokat. POST metódust akkor célszer˝u használni, ha a megadott cím valamilyen módosító (létrehozó, törl˝o) feladatot lát el – és természetesen bejelentkezés esetén is, csúnya lenne, ha az oldal letöltésekor a címsorban 6 leggyakrabban 7 ld.

18

Flash animációt b˝ovebben a JavaScript el˝oadást

1.9 Interaktivitás

olvashatnánk a jelszó url encoded változatát. A böngész˝ok általában figyelmeztetnek ilyen oldalakra való vissza ill. el˝orenavigálás során. urlapmez˝ ˝ ok A FORM tag törzsében adhatjuk meg az u˝ rlaphoz tartozó mez˝oket (egysoros/többsoros szövegbeviteli mez˝o, választólista, file-feltöltése, . . . ). A mez˝oket definiáló tagek: • INPUT • SELECT • TEXTAREA A mez˝ok közös attribútumai: • name: az u˝ rlapmez˝o neve (a szerveroldalon ezzel hivatkozhatunk a mez˝ore, ld. PHP el˝oadás) • disabled: az u˝ rlapmez˝ot a felhasználó nem szerkesztheti (kiszürkített) INPUT tag A magányos FORM tag gyerekcímkéjeiként megadhatjuk az u˝ rlaphoz tartozó beviteli mez˝oket. Attribútumai: • type: a beviteli mez˝o típusa: – text: szöveges – password: jelszó – checkbox: jelöl˝onégyzet – radio: választógomb – file: file feltölt˝o – hidden: rejtett – submit: u˝ rlap elküldése gomb – image: grafikus „˝urlap elküldése gomb” – reset: u˝ rlap alaphelyzetbe állítása gomb – button: egyéb gomb (ld. JavaScript el˝oadás) • size: a megjelenített mez˝o mérete pixelben (kivéve az input és password mez˝oket, ott a karakterek száma) • maxlength: a text és password típusú mez˝obe maximálisan begépelhet˝o karakterek száma (figyelembe kell venni, hogy ez csak kliens oldali korlát, szerver oldalon ellen˝orizni kell, nem küldött-e a felhasználó pl. telnet program segítségével hosszabb adatot) • value: a radio és checkbox kivételével itt adhatunk meg kezd˝oértéket az u˝ rlapmez˝onek • checked: radio és checkbox esetén az adott mez˝o kiválasztva ill. beikszelve jelenik meg • src: grafikus „˝urlap elküldése gomb”-hoz tartozó kép URL-je 19

1 HTML

BUTTON tag A BUTTON páros címke lényegében a submit, reset, button típusú INPUT címkével egyenérték˝u azonban annál szabadabb tartalom jeleníthet˝o meg a gomb felületén. Attribútumai hasonlóak: • name • value • type: submit, reset vagy button Az egyetlen megkötés, hogy nem tartalmazhat olyan képet, amely imagemapet tartalmaz. SELECT, OPTGROUP, OPTION tagek Választólisták megadására alkalmas címkék. A listát a SELECT páros tag jelöli ki. Attribútumai: • size: hány listaelem látszódjon egyidej˝uleg (1 esetén ún. combobox) • multiple: több elemet is kijelölhetünk A listán belül csoportokat alakíthatunk ki a OPTGROUP taggel. Attribútumai: • label: a csoport neve • disabled: a csoportból nem választhatunk elemet (de jelezni akarjuk, hogy vannak ilyen elemek). A listaelemeket a OPTION taggel adhatjuk meg (a zárótag elhagyható). Attribútumok: • selected: a listaelem ki van választva • value: ezt az értéket küldi a böngész˝o a tag szövege helyett • disabled: a listaelemet nem választhatjuk ki TEXTAREA tag Többsoros szövegbeviteli mez˝o megadására alkalmas páros tag. Attribútumai: • rows: megjelenített sorok száma • cols: megjelenített oszlopok száma • readonly: a mez˝o tartalma csak olvasható A szövegmez˝o alapértelmezett értékét a nyitó- és zárótag közt kell megadni. A TEXTAREA a HTML egyéb elemeit˝ol eltér˝oen kezeli a whitespaceket. A bet˝uközöket, tabulátorokat és újsor karaktereket mego˝ rzi. Ez alól a nyitó tagek követ˝o egyetlen újsor karakter kivétel (a HTML így indentálható marad). A HTML forrásában entitásként megadott karakerek, pl.: °-© ugyanúgy jelennek meg, mintha statikus szövegként írtuk volna be. Az el˝obbi karakter szerepel a használt kódlapon, az útóbbi nem. Ez szerepet kap az u˝ rlap elküldésekor, ugyanis a böngész˝o így küldi tovább: cucc=%B0-%26%23169%3B ami az URL dekódolása után: cucc=◦ -© Az u˝ rlapon begépelt entitások szintén feloldódnak, ugyanúgy, mintha azokat a HTML forrásába írtuk volna be. Tehát mind a &, mind pedig a & megadása esetén a & karaktert továbbítja a böngész˝o. Ha a kódlapon nem szerepl˝o karaktert írunk be (pl. vágólapról), akkor reménykedhetünk benne, hogy a böngész˝o UNICODE-entitásként fogja elküldeni. 20

1.10 Weboldalak kiszolgálása

LABEL tag A u˝ rlapmez˝ok felirata jelölhet˝o ki ezzel a páros taggel. Attribútuma: • for: azon elem id attribútuma, amelyhez a feliratot rendeljük. Ld. még 3.3.5. fejezet. urlap ˝ tagolása A FIELDSET páros taggel a FORM u˝ rlapon belül kijelölhetünk egy blokkot, amelyet a LEGEND páros taggel feliratozunk (amennyiben FIELDSET-et használunk, annak els˝o gyerektagjeként LEGEND-et kell megadnunk) (például személyes adatok megadása, termékverzió kiválasztása, . . . ). A FIELDSET általában elég kulturáltan jelenik meg a böngész˝okben, de ennek ellenére ritkán használják, inkább CSS-sel érnek el hasonló hatást a desingerek, mert ott egzaktabban le lehet írni a megjelenést. Ha egyszer˝u oldalt írunk egyszer˝u célra, kevés formázással, alkalmazzuk nyugodtan. urlapelemek ˝ fókuszba hozása Az ún. fókuszban (ld. JavaScript el˝oadás) lév˝o u˝ rlapelem ki van választva adatbevitel ill. módosítása céljából. Egyszerre legfeljebb egy elem lehet fókuszban. Az u˝ rlapelemeken túl a A, AREA, OBJECT címkékhez tartozó objektumok kaphatják meg a fókuszt. Az ilyen elemek közt az egérrel (vagy más kijelölésre alkalmas eszközzel) történ˝o kijelölésen túl általában billenty˝uzettel is váltogathatunk. A sorrend, az ún. tabindex alapértelmezés szerint az egyes beviteli mez˝okhöz tartozó tagek megjelenésének sorrendje a HTML sorráskódban. Ez a tabindex attribútum segítségével definiálhatjuk felül, melynek értéke 0 és 32767 között adható meg. A tabindexen túl id˝onként hasznos, ha egyes u˝ rlapelemeket azonnal elérünk billenty˝uzetr˝ol. Ez a accesskey attribútum beállításával történik vagy az u˝ rlapelemen vagy annak feliratán (LABEL). Pl.: htmlexample13.html

1.10.

Weboldalak kiszolgálása

A fejezet csak rövid vázlat, betekintés. Ld. részletesebben a kés˝obbi el˝oadásokon. A weboldalakat valamilyen webszerver (ilyen például a legelterjedtebb Apache) szolgálja ki. A felhasználó kérésére a böngész˝o elküldi a megadott webszerver felé a HTTP protokoll szerinti kérést. Ezután a szerver a kérésre valamilyen választ küld. Ha teljesíteni tudja, kiszolgálja, ha nem, akkor hibajelzést küld. Ez leggyakrabban a jól ismert 404-es hiba, amelynek jelentése: a megadott oldal nem található. A hibajelzések részletes listája a HTTP protokoll leírásában (és a plakátokon :) megtalálható. Kezdetben a webszerverek csak statikus oldalakat szolgáltak ki. Ez azt jelenti, hogy az oldal mindig azonos módon jutott el a klienshez, tartalma csak akkor változott meg, ha azt a szerveren kézzel (vagy valamilyen programmal) módosították. Ezt követ˝oen (vázlat) jelent meg különböz˝o szerver oldali interaktivitást megvalósító SSI, CGI és a magasabb szint˝u nyelvek (például a közkedvelt PHP). Ezek már a file-rendszerhez, adatbázishoz fordulva magasfokú interaktivitást biztosítottak, akár webes alkalmazás létrehozására is alkalmasak. Ma az ún. többréteg˝u alkalmazás (webszerver, adatbázis szerver(, alkalmazás szerver)) tekinthet˝o a legfejlettebbnek technológiának Java ill. .net platformon. A webszerver által kiszolgált file-ok általában valamilyen UNIX rendszer file-rendszerén találhatóak. Ügyelnünk kell a megfelel˝o jogosultság beállítására. Általában a webszervert futtató felhasználó számunkra others-nek min˝osül így: • file-okra: chmod o+r file paranccsal olvasójogot, • könyvtárakra: chmod o+x konyvtar paranccsal elérési, ill. chmod o+r konyvtar paranccsal listázási jogot kell adnunk. A webszerver által kiszolgált felhasználói könyvtárunk a home-könyvtárunk vagy (gyakrabban) a home-könyvtárunkban található public_html könyvtár. 21

1 HTML

1.11. Validálás A validálás m˝uvelete a HTML dokumentum helyességének ellen˝orzése (hasonló validátorok léteznek XHTML-hez és CSS-hez). A W3C8 validátora http://validator.w3.org/ címen elérhet˝o. Kényelmesen elérhet˝o a Mozilla FireFox böngész˝ob˝ol a Webdeveloper extension telepítése után a CTRL+SHIFT+V billenty˝ukombinációval.

8 World

22

Wide Web Consortium, ld. http://w3c.org

2. XHTML Az XHTML a jelenlegi és jöv˝obeni dokumentumtípusok és modulok családja, amelyek reprodukálják, részét képezik, és kiterjesztik a HTML 4-et. Az XHTML család dokumentumtípusok XML alapúak, és végül is arra lettek tervezve, hogy együttm˝uködjenek az XML alapú felhasználói alkalmazásokkal. Ez a fejezet (a tantervb˝ol adódóan) nem tételezi fel az XML szabvány ismeretét, csak utal arra. Így pontos definíciók helyett csupán a különbségeket emeli ki a HTML 4-hez képest.

2.1. Az XML-r˝ol röviden Az XML (Extensible Markup Language) a Word Wide Web Consortium (W3C) terméke. A HTMLhez hasonlóan az SGML (Structured Generalized Markup Language)-b˝ol származtatott jelöl˝onyelv. Az alapvet˝o különbség az XML és a HTML között, hogy az XML-ben mi magunk definiálhatunk tageket. Az XML hamar kivívta létjogosultságát, mivel az SGML nyelv bonyolultsága és a HTML nyelv nehézsége közti rést foglalja el. Az XML számos el˝onnyel rendelkezik, amelyet 10 pontban foglalt össze az azt kifejleszt˝o csapat: • könny˝u használhatóság a gyors elterjedés érdekében • széleskör˝u felhasználhatóság • kompatibilisnek kell lennie az SGML-el, s így az SGML-t értelmez˝o szoftverek könnyen átalakíthatók XML értelmezésre is • egyszer˝u programírás az XML dokumentumok feldolgozására, így a nagyon gyorsan elterjed a programozók körében • az XML opcionális lehet˝oségeinek minimálisra csökkentése, amivel elkerülhet˝ok az egyes feldolgozó programok kompatibilitási hibái • az XML forrásnak világosnak és olvashatónak kell lenni • XML szabványt rövid id˝o alatt kell kifejleszteni, így elérhet˝o, hogy egyetlen nyelv terjedjen el, ellenben a sok kis szoftverfejleszt˝o cég (Microsoft) félresikerült szabványaival • az XML szabványnak formálisnak és tömörnek kell lenni, az egyes félreértések elkerülése érdekében • egyszer˝u elkészíthet˝oség • a tömörség elhanyagolható, a hangsúly az olvashatóságon legyen Ld. b˝ovebben az XML el˝oadást.

2.2.

Az XHTML története, létrejöttének okai

2000 a W3C definiálja az XHTML 1.0 szabványt 2001 az XHTML 1.1 szabvány definiálása 2002 XHTML 1.0 szabványt újrafogalmazzák Az XHTML 1.0 az els˝o dokumentumtípus az XHTML családban. Ez a három HTML 4 dokumentumtípus (ld. 1.4) megújítása XML 1.0 alkalmazásként. Ez a dokumentumtípus azon dokumentumok nyelvéül lett szánva, amelyek olvashatóak XML-kompatibilis, és néhány egyszer˝u irányelv betartásával HTML 4 kompatibilis böngész˝ovel is. Az XHTML 1.1 az 1.0-ás verziót modulárissá egészíti ki, amely képes más XML alapú leírások beágyazására. Az XHTML egyesíti az XML pontosságát a HTML alkalmazhatóságával. Segítségével az XHTML nyelven írt dokumentumok XML-parserrel feldolgohatók, amely a nyelv kötöttsége miatt kisebb er˝oforrást igényel, így ez beágyazható például mobiltelefonokba. 23

2 XHTML

2.3. XML nyelvi megkötések Az XHTML dokumentum egyben XML dokumentum is egyben, a HTML dokumentumhoz hasonlóan tag-ekb˝ol épül fel. Egy XML dokumentumot jól formáltnak (well-formed) nevezünk, ha teljesül rá, hogy • pontosan egy gyökértaggel rendelkezik • minden nyitó taghez tartozik egy záró tag is Az utóbbi szabály azt jelenti, hogy a hibás XML tag. Helyesen így szerepel: A nyelv erre az esetre tartalmaz egy egyszer˝usítést, így az alábbi megadás is helyes és ekvivalens a fentivel: Bár XML-ben nem szükséges, érdemes egy bet˝uközt hagyni az utolsó attrib˝utum és a perjel közt, hogy minden böngész˝o alatt hibátlanul m˝uködjön az oldalunk (egyes HTML 4-r˝ol XHTML-re tuningolt böngész˝ok a perjelet különálló értéknélküli attribútumként hajlandók csak értelmezni). Hasonlóan a HTML-hez, a tagek szigorúan egymásba ágyazódnak, tehát az helytelen forma. A HTML-lel ellentétben a tagek nevei nagybet˝uérzékenyek. Egy attribútumnév csak egyszer szerepelhet egy adott tagben. Érvényes névnek (tagnév, névtér neve, attribútumnév) nevezünk minden olyan karaktersorozatot, amely • bet˝uvel vagy aláhúzással kezd˝odik • ezt követ˝oen tetsz˝oleges számú – számot – bet˝ut – pontot, aláhúzást, köt˝ojelet tartalmaz. Ez alól az xml karaktersorozat bármilyen kis ill. nagybet˝us változata képez kivételt, ugyanis ez fenntartott szó. Az attribútumok értékeinek megadásakor az értéket egyszeres (’) vagy dupla (") idéz˝ojelbe kell raknunk. Jelentés nélküli karakternek nevezünk minden olyan karaktert, amely nem befolyásolja az XML dokumentum tartalmát, ezeket az XML értelmez˝oje figyelmen kívül hagyja, pusztán az áttekinthet˝oséget növeli. Ilyen karakter a bet˝uköz, tabulátor, sortörés.

2.4.

DTD és ajánlások

Az XHTML dokumentumnak tovább eleget kell tennie az alábbi megkötéseknek 1. meg kell felelnie a három DTD egyikének (ld. a 2.4.1. fejezet) 2. A dokumentum gyökérelemének az xmlns attribútum használatával jelölnie kell az XHTML névtereket. (Megjegyzés: az XHTML-ben más névtér (pl. MathML) megadásával más XML alapú dokumentum ágyazható be XHTML-be valamint egyéb XML-alapú dokumentumba beágyazható XHTML a névtér megfelel˝o megadásával). A gyökér elem a következ˝oképp nézhet ki: 24

2.5 Különbségek a HTML 4-hez képest és kompatibilitás

2.4.1. Dokumentumtípusok A dokumentumban - gyökér-elemet megel˝oz˝oen - DOCTYPE deklarációt kell elhelyezni: Ezek a megfelel˝o HTML 4.01 dokumentumtípusok XHTML megfelel˝oi. 2.4.2.

XML fejléc

XML fejléc megléte nem kötelez˝o minden XML dokumentumban; viszont az XHTML dokumentumok szerz˝oinek er˝osen javasolható az XML fejléc használata minden általuk létrehozott dokumentumban. A deklaráció követelmény akkor, ha a dokumentum karakterkódolás eltér az alapértelmezett UTF-8-tól, vagy UTF-16-tól, és magasabb szint˝u protokoll nem határoz meg kódolási módot. A fejléc a dokumentum els˝o soraként adható meg az alábbi formában:

2.5.

Különbségek a HTML 4-hez képest és kompatibilitás

Egy egyszer˝u Strict XHTML 1.0 dokumentum: Az els\H o XHTML dokumentumom Hello XHTML! 2.5.1. Jólformáltság A dokumentumoknak jól formáltnak kell lenniük. Minden attribútum értéket idéz˝ojelek közé kell írni, akkor is, ha értékük szám. Az XML nem támogatja az attribútumok minimalizációját. Az attribútum-érték párokat teljességükben ki kell írni. Az attribútum nevek, mint pl. a checked nem jelenhetnek meg a tagekben értékük meghatározása nélkül (checked="1"). 2.5.2.

Tagnevek

Elem és attribútum nevek kisbet˝uvel írandók. 25

2 XHTML

2.5.3. Whitespace-kezelés az attribútumok értékeiben A böngész˝oknek az attribútumok értelmezésénél az alábbi szerint kell eljárniuk: • Le kell vágniuk a bevezet˝o és lezáró whitespace karaktereket. • Egy, vagy több whitespace karakter sorozatát (beleértve a sortörést is) egyszer˝u szóközzé kell konvertálniuk. 2.5.4.

Script és Style elemek

Az XHTML-ben a script és style elemek deklarációjuk szerint #PCDATA tartalmúak (ld. xml el˝oadás). Ennek eredményeképpen a < és & karakterek jelöl˝o kezdeteként vannak értelmezve, egyedeiket ( Alternatív megoldásként küls˝o script, vagy stíluslap használható. Megjegyzés: ez utóbbi egyel˝ore a legjobb megoldás, mivel a CDATA-ában megadott szrkipteket minden általam tesztelt böngész˝o figyelmen kívül hagyta. Pl.: xhtmlexample03.html, xhtmlexample03_cdata.html 2.5.5.

SGML kizárások

Az SGML megadja a lehet˝oséget a DTD írójának, hogy meghatározott elemek használatát kizárja valamely elemb˝ol. Ilyen tiltási lehet˝oségek az XML-ben nem lehetségesek. Példaként: a HTML 4 Strict DTD megtiltja az elemek bármilyen mérték˝u egymásba ágyazását. Ilyen tiltások az XML-ben nem írhatók le. Mindamellett, hogy a DTD-ben ilyen tiltások nem szerepelhetnek, bizonyos elemeket valóban nem lehet egymásba ágyazni. A következ˝o elemekre vonatkoznak egymásba ágyazási tiltások. Ezek a tiltások a beágyazás minden szintjére vonatkoznak, vagyis minden leszármazott elemre. • a: nem tartalmazhat más a elemeket. • pre: nem tartalmazhatja az img, object, big, small, sub, vagy sup elemeket. • button: nem tartalmazhatja az input, select, textarea, label, button, form, fieldset vagy iframe elemeket. • label: nem tartalmazhat más label elemet. • form: nem tartalmazhat más form elemet. 2.5.6.

Elemek id és name attribútumokkal

A HTML 4 definiálta az a, applet, form, frame, iframe, img és map elemkhez használható name atttribútumot. Szintén a HTML 4 vezette be az id attribútumot. Mindkét attribútum a dokumentumon belüli navigációhoz lett tervezve, azonosítóként. Az XML-ben a részazonosító típusa ID és elemenként egy ID típusú attribútum használható. Ezért az XHTML 1.0 -ban az id attribútum lett ID típusúként definiálva. Tehát annak érdekében, hogy az XHTML 1.0 dokumentum valóban jól strukturált XML dokumentum legyen, az XHTML 1.0 dokumentumokban az id attribútumot kell használni azonosítóként a fent felsorolt elem esetében (mivel néhány böngész˝o 26

2.6

Kapcsolatok más szabványokkal

nem támogatja még a id attribútum ilyen használatát, XHTML 1.0 esetén érdemes mindkét attribútumot megadni). Az XHTML 1.0-ben a name attribútum használata formálisan „nem javasolt” és az XHTML 1.1 verzióban meg is lett szüntetve. 2.5.7. Attribútumok el˝ore definiált értékkészlettel Mind a HTML 4, mind az XHTML rendelkezik néhány olyan attribútummal, amelyek értékkészlete el˝ore definiált és korlátozott (pl.: az input címek type attribútuma). Az SGML és az XML ezeket felsorolt attribútumoknak nevezi. A HTML 4 -ben ezen értékek kiértékelése nem érzékeny a kis- és nagybet˝uhasználatra, így a TEXT érték megegyezik a text értékkel. Az XML -ben viszont ezen attribútumok kiértékelése érzékeny a kis- és nagybet˝uhasználatra, és az XHTML 1 -ben minden ilyen attribútum kisbet˝usként lett definiálva. 2.5.8. Entitáshivatkozások hexadecimális értékekként Mind az SGML, és az XML is engedélyezi a hexadecimális értékekkel történ˝o karakterhivatkozásokat. Az SGML-ben ezek a hivatkozások vagy &#Xnn; vagy &#xnn; módon használatosak. Az XML dokumentumokban a kisbet˝us verziót kell használni. 2.5.9.

Címke nyelvének megadása

Egy tag nyelvének megadásakor mind a lang, mind az xml:lang attribútumok használandók. Az xml:lang attribútum értéke els˝obbséget élvez.

2.6.

Kapcsolatok más szabványokkal

2.6.1. XML Ld. 2.3. és 2.4. fejezeteket. 2.6.2.

DOM

A Document Object Model Level 1 ajánlás (ld. JavaScript el˝oadás) az XML vagy HTML dokumentum objektummodelljéhez definiál csatolófelületeket. A HTML 4 dokumentum objektummodellben a HTML tag- és attribútumneveket nagybet˝uvel, míg az XML-ében olyan bet˝uvel kell visszaadni, ahogyan azok definiálva lettek. Az XHTML 1.0-ban, az elemek és attribútumok nevét kisbet˝uvel kell írni, tehát kisbet˝uvel szerepelnek az objektummodellben. Ez a nyilvánvaló különbség két módon érhet˝o el: • Azok a böngész˝ok, amelyek text/html Internet médiatípusként9 megadott XHTML dokumentumot elemeznek, a DOM-on keresztül használhatják a HTML DOM-ot, és bízhatnak abban, hogy a tag- és attribútumneveket a csatlakozófelülett˝ol nagybet˝usen kapják meg. • Azok a böngész˝ok, amelyek text/xml, application/xml, vagy application/xhtml+xml Internet médiatípusként megadott dokumentumot elemeznek, az XML DOM-ot használhatják. A tagek és attribútumok kisbet˝usen térnek vissza. Ezenkívül, el˝ofordulhat, hogy néhány XHTML tag nem jelenik meg az objektumfán, mivel azok a tartalommodellben opcionálisan szerepelnek (pl. a tbody címke a table tagen belül). Ez azért fordul el˝o, mert a HTML 4-ben engedélyezve volt néhány elem minimalizált használata, vagyis hiányozhatott kezd˝o és záró címkéje. Ez az XML-ben nem lehetséges, az XHTML ezeket az elemeket opcionálissá tette. A felhasználói alkalmazások írásánál erre fel kell készülni. [16] 9 MIME

Type, itt nem részletezem, ld. http://www.w3.org/TR/xhtml-media-types/

27

2 XHTML

2.6.3. CSS A Cascading Style Sheets 2 ajánlás (ld. 3 fejezet) írja le azokat a stílustulajdonságokat, amelyek alkalmazhatók a HTML vagy XML dokumentumok dokumentumfáján. A dokumentumok elemzéseinek különbségei különböz˝o vizuális (és hang-) hatásokat eredményeznek a használt szelektoroktól függ˝oen. A következ˝o javaslatokat érdemes betartani annak érdekében, hogy a dokumentum módosítás nélkül megfeleljen a fenti kívánalmaknak: 1. Az XHTML dokumentumok CSS stíluslapjaiban a tag- és attribútumneveket kisbet˝uvel kell írni. 2. A táblázatokban a tbody elem jelenlétét a HTML böngész˝ok kikövetkeztetik, de az XML felhasználói alkalmazások értelmez˝oi ezt nem teszik meg. Ezért, ha CSS szelektor hivatkozik rá, a tbody elemet mindig explicit módon deklarálni kell. A HTML 4-ben és az XHTML-ben a style tag dokumentumon belüli stílusszabályok el˝oírására használható. Az XML-ben stílusszabályok definiálására XML stíluslap deklaráció használandó. Annak érdekében, hogy ezzel a konvencióval kompatibilis legyen, a style elemeknek saját id attribútummal megadott részazonosítóval kell rendelkezniük, és az XML stíluslap deklarációnak erre az azonosítóra kell hivatkoznia. Pl.: xhtmlexample02.html Ld. még 2.5.4. fejezet.

2.7.

XHTML 1.1

A 2001-ben definiált XHTML 1.1 eltávolodott a HTML 4-t˝ol és az XHTML 1.0-tól. A legfelt˝un˝obb eltérés, hogy számos érvénytelenített funkciót kivettek a szabványból a strukturális funkcionalitás jegyében. Az eltérése: 1. Minden tagnél elt˝unt a lang attribútum a xml:lang javára. 2. Az a és map tageknél a name attribútum elt˝unt a id attribútum javára. 3. ruby néven egy bet˝usorhoz magyarázó szöveget rendelhetünk (f˝oleg Kelet-Ázsiában használják majd, még nem támogatják a böngész˝ok) , ld. 3. ábra)

3. ábra. Ruby komment

28

3. CSS 3.1.

Története, létrejöttének okai

3.1.1. Története 1996 Cascading Style Sheets, level 1 1998 Cascading Style Sheets, level 2 1999 Cascading Style Sheets, level 1 revised 3.1.2.

Mire jó?

A HTML tageket eredetileg a HTML dokumentum tartalmának definiálására találták ki, a megjelenítést a böngész˝ore bízták. A böngész˝ok inkompatibilitása miatt egyre nehezebbé vált az egységes megjelenítés biztosítása (layout). Ezért és azért, hogy a dokumentum tartalmi hierarchiája különválasztható legyen a megjelenítést˝ol a W3C 1996 decemberében létrehozta a CSS-t (Cascading Style Sheets). Jó, mert • jó • ugyanúgy néz ki minden böngész˝o alatt (jó lenne, mi? :-)) • hierarchikusan több stíluslap adható meg • egy helyen tárolt a stílus, egyszerre változtatható meg • b˝ovebb formázási lehet˝oségeket biztosít, mintha a HTML-t a megszokott tagekkel formáznánk

3.2.

Stíluslap alapok

A stílusokkal kapcsolatban külön érdemes választani a stílusok deklarációját és specifikációját. 3.2.1.

Stílus deklaráció

A stíluslapok deklarációja során adjuk meg az alkalmazandó stílusmintákat, amelyet az adott tartalmon alkalmaz majd a felhasználó böngész˝oje. A deklaráció során elméletileg nem kell ismernünk a forrástartalmat, csupán annak szerkezetét (dokumentumfa) A gyakorlatban általában mindig konkrét tartalomhoz tervezünk stíluslapokat, ez a designer feladata. {TULAJDONSAG: ERTEK} {TULAJDONSAG1: ERTEK1; TULAJDONSAG2: ERTEK2; ... TULAJDONSAGN: ERTEKN} Pl.: {font-family: Arial; color:red} 3.2.2. Stílus specifikáció A stílus specifikáció során adott stíluslapot alkalmazunk a konkrét tartalomra. A specifikáció során elvileg nem kell ismernünk az alkalmazandó stíluslap szerkezetét, amely gyakran nem is létezik még ekkor. De érdemes szem el˝ott tartani a tartalom megfogalmazása során, hogy a tartalmunkat meg kell majd valamilyen médián jeleníteni, és ne hozzuk nehéz helyzetbe a stíluslap elkészít˝ojét. A stílus specifikáció egyike a HTML, PHP, stb. coder feladatainak. A stíluslapok többféleképpen lehet˝ové teszik a stílusinformációk definiálását. A stílus magában egy adott HTML tagben is definiálható a dokumentumon belül, az egész dokumentumra vonatkozólag a HTML 29

3 CSS

oldal tagjén belül vagy egy küls˝o CSS fájlban. S˝ot akár több küls˝o CSS fájlra is hivatkozhatunk egyetlen HTML dokumentumban. Az összes stílus egy „virtuális stíluslapba” sorolódik be (cascading), az egyes forrásokból jöv˝o stílusok prioritása az alábbiak szerint növekszik: 1. Böngész˝o default stílusa 2. Felhasználó által definiált stílus 3. Küls˝o stíluslap (Linking Style Sheet) (küls˝o fájlban) 4. Bels˝o stíluslap (Embedding Style Sheet) (a dokumentum fejlécében) 5. Sorközi stílus (Inline Styles) (HTML elemen belüli stílus) Küls˝o stíluslap (Linking Style Sheet) Style Sheet File (*.css): SZELEKTOR1 {...} SZELEKTOR2 {...} .... SZELEKTORn {...} A hivatkozást a HTML fejlécében kell megadni: Pl.: cssexample01.html Bels˝o stíluslap (Embedding Style Sheet) A HTML fejlécében kell elhelyezni: .... SZELEKTOR1 {...} SZELEKTOR2 {...} .... SZELEKTORn {...} .... Pl.: cssexample02.html Sorközi stílus (Inline Styles) Bármely tagben elhelyezhet˝o: .... ... .... Pl.: cssexample03.html 30

3.3

Szelektorok

Importált stíluslap (Import Style Sheet) A HTML-fejlécben lehet megadni az alábbi módon: .... @import url(stilus.css); .... .... Pl.: cssexample04.html

3.3.

Szelektorok

A szelektorok tulajdonképpen mintaillesztési szabályok, amelyekkel a forrásdokumentumból választhatunk bizonyos tageket, amelyek stílusát felül akarjuk definiálni, megjelenítésüket meg akarjuk határozni. A { és } között adjuk meg a beállítandó tulajdonságokat. Pl. TD A {font-family: Arial; color:red} 3.3.1. Univerzális szelektor * {...} A stílus minden tagre vontakozik a dokumentumon belül. 3.3.2.

Típus szelektor

SZELEKTOR {...} A SZELEKTOR egy HTML tag, amelynek stílusát definiálni akarjuk. 3.3.3.

Szelektorok kontextusa

TAG1, TAG2, ..., TAGn {...} Egyszerre több tagnek állíthatunk be azonos tulajdonságokat. TAG1 TAG2 {...} Azon TAG2 tagek tulajdonságát állítjuk be, amelyek TAG1 típusú tagek leszármazottja. TAG1 > TAG2 {...} Azon TAG2 tagek tulajdonságát állítjuk be, amelyek TAG1 típusú tagek gyermekei (közvetlen leszármazottai). TAG1 + TAG2 {...} Azon TAG2 tagek tulajdonságát állítjuk be, amelyeket közvetlenül megel˝oz egy TAG1 típusú tag. Pl.: cssexample05.html 31

3 CSS

3.3.4. Szelektor osztályok (Class Selector) Szelektor osztályok definiálásával azonos tagek különböz˝o változatait hozhatjuk létre. Ez a HTML DTD-jének tetsz˝oleges b˝ovítésével egyenérték˝u m˝uvelet. Tag-specifikus: TAG.name1 {...} TAG.name2 {...} .... TAG.nameN ...}

Minden tagre: .name1 {...} .name2 {...} .... .nameN {...}

Az osztálynév nagybet˝u-érzékeny. Hivatkozás HTML-ben:

Pl.: cssexample06.html, cssexample07.html 3.3.5.

ID szelektor

Az ID szelektorral egyedi azonosítót (id-t) rendelhetünk egy taghez. #id1 {...} #id2 {...} .... #idN {...}

Az ID nagybet˝u-érzékeny. Hivatkozás HTML-ben:

Pl.: cssexample08.html Az ID szelektor prioritása nagyobb, mint a class-é, így ha mindkett˝o definiált, elnyomja. Egy id-t csak egy tagnek adjunk, ha többhöz is ugyanazt az id-t rendeljük, az rendellenes viselkedéshez vezet. 3.3.6. Szelektor pszeudo-osztályok (Pseudo class selector) A pszeudo-osztályok nem a tagek neve alapján, hanem egyéb (a dokumentum fából közvetlenül nem kiolvasható) jellemz˝o alapján tesznek lehet˝ové tagelérést. A pszeudo-osztályok és osztályok együttes megadásának szintaxisa: TAG.class:pseudoclass {...}

32

3.3

Szelektorok

Els˝o gyerekelem TAG:first-child {...}

Akkor állít be a TAG-re tulajdonságot, ha az els˝o gyerekelemként szerepel. Az alábbi példában az olyan cikkek els˝o bekezdése lesz kiemelve, amelyeknek nincs címe: DIV > P:first-child { font-size: 14pt } ... Cikk bevezetoje. Cikk szovege... Cikk cime Cikk bevezetoje. Cikk szovege... Els˝o sor és betu˝ Els˝o sor: TAG:first-line {...}

Els˝o bet˝u: TAG:first-letter {...}

Link A:link {...} A:visited {...}

Dinamikus pszeudo-osztályok TAG:hover {...} TAG:active {...} TAG:focus {...}

Interaktív média esetén támogatott. Sorrendben: a felhasználó elmozgatja a pointing eszközt (tipikusan egeret) az adott elem felett, kiválasztja az elemet, ill. az elem fókuszt kap. Nyelv TAG:lang(C) {...}

vagy 33

3 CSS

:lang(C) {...}

A böngész˝o által elküldött nyelvi beállítások alapján. :before és :after TAG:before {...} TAG:after {...}

Az adott TAG elé ill. után történ˝o szöveggenerálásra használják.

3.4.

Betutípus ˝

3.4.1. Betutípus ˝ család (font family) {font-family: CSALAD} {font-family: CSALAD1, CSALAD2, ..., GEN_CSALAD}

A CSALAD lehet Helvetica, Arial, stb; a GENERIKUS CSALAD serif, sans-serif, cursive, fantasy, monospace lehet. A bet˝uközt tartalmazó bet˝utípus neveket idéz˝ojelbe kell tenni (pl. "Comic Sans"). A generikus bet˝utípust utolsó lehet˝oségként kell megadni. 3.4.2.

Betuméret ˝

{font-size: MERET}

A MERET lehet • explicit nagyság: px, pt, in, cm, %, amelyek pixel, pont, inch, centiméter, százalék • viszonylagos méret: xx-small, x-small, small, medium, large, x-large, xx-large • relatív méret: smaller vagy larger A pixelben megadott méret a képerny˝ot, míg a pontban megadott (gondoljunk a 12-es bet˝uméret fogalmára a szövegszerkesztésben) a nyomtatást veszi alapul a bet˝u méretezésekor. Az el˝obbi mind PC-n, mind Mac-en azonos képet add, az utóbbi Mac-en kisebb méretben jelenhet meg. 3.4.3. Betuvastagság ˝ (font weight) {font-weight: VASTAGSAG}

A VASTAGSAG lehet: • explicit bináris: normal vagy bold • relatív bináris: bolder vagy lighter 34

3.5

Szöveg

3.4.4. Betud˝ ˝ oltség (font style) {font-style: DOLTSEG}

A DOLTSEG lehet: • normal • italic 3.4.5.

Szöveg aláhúzás (text decoration)

{text-decoration: DEKORACIO}

A DEKORACIO lehet: • none • underline • line-through • blink ez csak a Netscape családnál m˝uködik 3.4.6.

Kisbetu-nagybet ˝ u˝ átalakítás

{text-transform: TRANSZFORMACIO}

A TRANSZFORMACIO lehet: • none • capitalize • uppercase • lowercase 3.4.7.

Betutípus ˝ megadás egyszerre

{font: font-style font-variant font-weight font-size/line-height font-family}

3.5.

Szöveg

3.5.1. Sormagasság {line-height: MAGASSAG}

A MAGASSAG lehet: • normal • explicit méret: px, pt, in, cm, % 35

3 CSS

3.5.2. Vízszintes igazítás {text-align: IGAZITAS}

Az IGAZITAS lehet: • left, center vagy right • justify 3.5.3.

Függ˝oleges igazítás

{vertical-align: IGAZITAS}

Az IGAZITAS lehet: • baseline, top, middle, bottom, text-top vagy text-bottom (ld. 4. ábra) • sub vagy super

4. ábra. Függ˝oleges igazítás

36

3.6 Lista

3.5.4. Szöveg körbefuttatása A szöveg mehet az elem mellé: {float: IGAZITAS}

Az IGAZITAS lehet: • left • right • none Például szövegbe ágyazott képeknél használatos. A szöveg az elem alá menjen: {clear: IGAZITAS}

Az IGAZITAS lehet: • left • right • both • none 3.5.5.

Bekezdés

{text-indent: BEHUZAS}

Az BEHÚZÁS lehet px, pt, in, cm, em vagy %.

3.6.

Lista

3.6.1. Lista típusa {list-style-type: TIPUS}

A TIPUS lehet: • nem sorrendezett lista: disk, circle, square, decimal vagy none • sorrendezett lista: lower-roman, upper-roman, lower-alpha vagy upper-alpha {list-style-image: KEP}

A KEP lehet: • URL: url(kepfile) • sorrendezetlen lista: none 37

3 CSS

3.6.2. Lista igazítása {list-style-position: IGAZITAS} Az IGAZITAS lehet inside vagy outside. Az el˝obbinél a lista második sora a jel alá kerül, az utóbbinál a második sor az els˝o alá. 3.6.3.

Lista meghatározása egyszerre

{list-style: type position url}

3.7.

Szín és háttér

3.7.1. El˝otérszín {color: SZIN} A SZIN lehet: • színkód: #RRGGBB • szín neve 3.7.2.

Háttérszín

{background-color: SZIN} A SZIN lehet: • színkód: #RRGGBB • szín neve • átlátszó: transparent 3.7.3.

Háttérkép

Háttérkép megadása: {background-image: KEP} A KEP url(filenev) alakú. Háttérkép ismétlése: {background-repeat: ISMETLES} Az ISMETLES lehet: • repeat • no-repeat • repeat-x • repeat-y 38

3.8 Dobozolás

Háttérkép rögzítése: {background-attachment: ROGZITES}

A ROGZITES lehet: • scroll • fixed Háttérkép helye: {background-position: VIZSZINTES FUGGOLEGES} {background-position-x: VIZSZINTES} {background-position-y: FUGGOLEGES}

A VIZSZINTES és FUGGOLEGES pozíció lehet: • igazítás: left, center, right • explicit méret: px, pt, in, cm, em vagy % Háttér meghatározása egyszerre: {background: url() color repeat attachment position}

3.8.

Dobozolás

3.8.1. Doboz-orientált modell Ld. az 5. ábrán.

5. ábra. Doboz modell felépítése

3.8.2.

Margó (margin)

{margin-left: MARGO} {margin-right: MARGO} {margin-top: MARGO} {margin-bottom: MARGO} 39

3 CSS

{margin: MARGO} /* minden margo */ {margin: MARGO MARGO} /* top&bottom, right&left */ {margin: MARGO MARGO MARGO} /* top, left&right, bottom */ {margin: MARGO MARGO MARGO MARGO} /* top, right, bottom, left */

A MARGO lehet px, pt, in, cm, em vagy %. 3.8.3.

Szegély (border)

A szegély stílusa: {border-style: STILUS} {border-top-style: STILUS} {border-right-style: STILUS} {border-bottom-style: STILUS} {border-left-style: STILUS}

A STILUS lehet none, dotted, dashed, solid, double, groove, ridge, inset vagy outset (ld. 6. ábra).

6. ábra. CSS-ben használt szegélystílusok

A szegély szélessége: {border-width: SZELESSEG} {border-top-width: SZELESSEG} {border-right-width: SZELESSEG} {border-bottom-width: SZELESSEG} {border-left-width: SZELESSEG}

A SZELESSEG lehet: • relatív: thin, medium vagy thick • explicit méret: px, pt, in, cm vagy em 40

3.8 Dobozolás

A szegély színe: {border-color: SZIN} {border-top-color: SZIN} {border-right-color: SZIN} {border-bottom-color: SZIN} {border-left-color: SZIN}

A SZIN lehet: • színkód: #RRGGBB • szín neve Szegély megadása egyszerre: {border: width style color} {border-top: width style color} {border-right: width style color} {border-bottom: width style color} {border-left: width style color}

3.8.4.

Ráhagyás (Padding)

{padding-left: RAHAGYAS} {padding-right: RAHAGYAS} {padding-top: RAHAGYAS} {padding-bottom: RAHAGYAS} {padding: RAHAGYAS} /* mindenhol */ {padding: RAHAGYAS RAHAGYAS} /* top&bottom, right&left */ {padding: RAHAGYAS RAHAGYAS RAHAGYAS} /* top, left&right, bottom */ {padding: RAHAGYAS RAHAGYAS RAHAGYAS RAHAGYAS} /* top, right, bottom, left */

A RAHAGYAS lehet px, pt, in, cm vagy em. 3.8.5.

Tartalom méretei (content)

{width: MERET} {height: MERET}

A MERET lehet px, pt, in, cm, em, % vagy auto. (Hogy N6 alatt is jól m˝uködjön, be kell állítani az overflow tulajdonságot. IE3 és N4 alatt még nem m˝uködött.) 3.8.6.

Túlfutás (overflow)

{overflow: TIPUS}

A TIPUS lehet • visible: a megadott méretb˝ol(width, height) kilógó részek látszanak, átlóghatnak az oldal többi részére 41

3 CSS

• hidden: a kilógó részek nem látszanak • scroll: a dobozon gördít˝osávok jelennek meg, nincs átlógás • auto: csak akkor jelenik meg gördít˝osáv, ha szükséges

3.9.

Táblázat

A táblázat formázása során az 1. ábrán szerepl˝o felépítést kell figyelembe venni, ez érvényes CSS-re is. 3.9.1.

Szegély

Mint a dobozoknál.

3.10.

Pozíció és vizuális effektusok

3.10.1. Doboz pozicionálás {position: POZICIO}

A POZICIO lehet • static • relative • absolute {left: TAVOLSAG} {top: TAVOLSAG} {right: TAVOLSAG} {bottom: TAVOLSAG}

A TAVOLSAG lehet px, pt, in, cm, em, % vagy auto. (IE3 alatt teljesen hiányzott, N4 és IE4 alatt nem volt még a right.) Relatív pozícionálás példa: cssexample09.html Abszolút pozícionálás példa: cssexample10.html 3.10.2.

Z-Index

Az egyes elemek z-irányú (a monitorból kifelé mutató tengely) pozícióját adja meg. Tehát a nagyobb z-index˝u elem elfedik a kisebb értékkel rendelkez˝oket. Ha explicit nem adjuk meg, a HTML forrásában megadásuk sorrendjében kapnak indexet. {z-index: INDEX}

Az INDEX lehet: • egész szám • auto 42

3.11 Médiatípusok

3.10.3. Vágás {clip: VAGAS}

A VAGAS lehet: • rect(TAVOLSAG TAVOLSAG TAVOLSAG TAVOLSAG) (top right bottom left sorrendben) • auto A TÁVOLSÁG lehet px, pt, in, cm vagy em. 3.10.4.

Láthatóság

{visibility: LATHATOSAG}

A LATHATOSAG lehet: • visible • hidden 3.10.5.

Megjelenítés

{display: MOD}

A MOD lehet: • block • inline • list-item (csak IE6 és N6-ban, IE3 és N4 alatt még nem m˝uködött.) Pl.: cssexample11.html

3.11.

Médiatípusok

A stíluslapok egyik legfontosabb és legkedvez˝obb tulajdonsága, hogy a megjelenítend˝o tartalom formázása eltér˝o lehet különböz˝o médiákon: képeny˝on, nyomtatásban, beszédszintetizátoron vagy braille eszközön (a mai böngész˝ok az els˝o két médiát támogatják). A média megadás többféle módon lehetséges: • @media parancs segítségével @media print { /* style sheet for print goes here */ } • @import parancs paramétereként @import url("print.css") print; • HTML fejlécében 43

3 CSS

A gyakorlatban használt médiatípusok: • all minden megjelenít˝ore • screen képerny˝on való megjelenítésre • print nyomtatásra

3.12.

Felhasználói interface

A felhasználói interface stíluselemek interaktív médiák esetén alkalmazhatók. 3.12.1.

Egérkurzor

TAG { cursor : cursor1, cursor2, ... } ahol a cursori az alábbi értékeket veheti fel: url("valami.cur"), auto, crosshair, default, pointer, move, e-resize, ne-resize, nw-resize, n-resize, se-resize, sw-resize, s-resize, w-resize, text, wait, help Az url nem minden (csak például IE6+) böngész˝o által támogatott. 3.12.2.

Asztali színek

A böngész˝o asztali színbeállításai konstans formájában elérhet˝ok. ActiveBorder Aktív ablakkeret ActiveCaption Aktív ablak címsor AppWorkspace Munkaterület színe Background Asztal háttere ButtonFace Nyomógomb felszínének színe ButtonHighlight Nyomógomb fényes oldala ButtonShadow Nyomógomb árnyékos oldala ButtonText Nyomógomb szövege CaptionText Címsor szövege, gördít˝osáv nyilai GrayText Kiszürkített (nem elérhet˝o) szöveg Highlight Kijelölés HighlightText Kijelölés szövege InactiveBorder Inaktív ablakkeret InactiveCaption Inaktív ablak címsor InactiveCaptionText Inaktív ablak címsor szövege InfoBackground Az eszköztipp doboz háttere InfoText Az info ablak szövege Menu Menü háttere MenuText Menü szövege Scrollbar Gördít˝osáv mez˝oje ThreeDDarkShadow A 3d-s gui elemek sötét-árnyékos oldala ThreeDFace A 3d-s gui elemek felszínének színe ThreeDHighlight A 3d-s gui elemek kijelölésének színe ThreeDLightShadow A 3d-s gui elemek fényes oldala ThreeDShadow A 3d-s gui elemek árnyékos oldala Window Ablak háttere WindowFrame Ablak kerete WindowText Ablak szövege

Pl.: cssexample13.html 44

HIVATKOZÁSOK

Hivatkozások [1] Css maxdesign. http://css.maxdesign.com.au. [2] Irodalom a digitális közegben v1.0. http://www.hipertext.info. [3] Elveszett világ. http://mud.0660.hu, 1995. [4] Domonkos Balázs. Css el˝oadás. 2004 Nyári KIR fejleszt˝oi tábor, 2004. [5] Domonkos Balázs. Xml el˝oadás. 2004 Nyári KIR fejleszt˝oi tábor, 2004. [6] T. Berners-Lee. Uniform resource identifiers (uri): Generic syntax. http://www.ietf.org/rfc/rfc2396.txt, 1998. [7] Ted Nelson. Xanadu projekt. http://xanadu.com, 1960 óta. [8] Polyhistor. Htmlinfo. http://htmlinfo.polyhistor.hu, 2001. [9] W3C. Cascading style sheets, level 1. http://www.w3.org/TR/REC-CSS1, 1996-1999. [10] W3C. Cascading style sheets, level 2. http://www.w3.org/TR/REC-CSS2, 1998. [11] W3C. Document object model (dom) level 1 specification. http://www.w3.org/TR/1998/REC-DOMLevel-1-19981001, 1998. [12] W3C. Html 4.01 specification. http://www.w3.org/TR/html401, 1999. [13] W3C. Document object model (dom) level 2 core specification. http://www.w3.org/TR/2000/RECDOM-Level-2-Core-20001113, 2000. [14] W3C. Xhtml 1.1 - module-based xhtml. http://www.w3.org/TR/xhtml11, 2001. [15] W3C. Xhtml 1.0 the extensible http://www.w3.org/TR/xhtml1, 2002.

hypertext

markup

language

(second

edition).

[16] W3C. Xhtml media types. http://www.w3.org/TR/xhtml-media-types, 2002.

45

A FOGALMAK

A. Fogalmak WWW World Wide Web W3C World Wide Web Consortium SGML Standard Generalised Markup Language, dokumentum-tartalom átfogó leírására alkalmas metanyelv HTML HyperText Markup Language XML eXtensible Markup Language XHTML eXtensible HyperText Markup Language style sheet (stíluslap) olyan leírás, amely megadja, hogyan jelenjen meg egy adott tartalom (dokumentum) valid style sheet (érvényes/helyes stíluslap) a CSS nyelvtannak megfelel˝o stíluslap. Minden CSS1 style sheet, valid CSS2 stíluslap, de néhány jelentésbeli eltérést˝ol eltekintve azonosan használható VRML Virtual Reality Modelling Language, a virtuális valóság leírására alkalmas leírónyelv MathML Mathematical Markup Language, matematikai tartalom leírására alkalmas XML-alapú leíró nyelv forrásdokumentum azon tartalom, amelyen egy vagy több stíluslapot alkalmazunk (vagyis amit a stíluslapok formáznak) tag jelöl˝o, címke, elem, SGML nyelvi elem, a dokumentum alapvet˝o struktúrájának leírására alkalmas attribútum egy tag tulajdonságát megadó nyelvi elem, mely attribútum-névb˝ol és attribútum-értékb˝ol áll tartalom egy tag-hez tartozó szöveges tartalom vagy gyermek tagjei; amelyik tagnek nincs tartalma azt üres tagnek nevezik megjelenített tartalom a dokumentumban tárolt tartalom megjelenése valamilyen médián (képerny˝o, nyomtató, hang, stb); általában a tárolt tartalom kiegészült különböz˝o elemekkel (pl. sorszámozás, keret, stb). dokumentum fa a dokumentumot felépít˝o tagek áltál meghatározott fa (pontosabban nem fa, mert az elemek sorrendje is számít). Minden tagnek pontosan egy szül˝otag-je van a gyökérelemet kivéve, mert annak nincs szül˝oje. felhasználó az az egyed (személy, robot, stb), amely az oldalt megtekinti user agent (UA) azon program, amely értelmezi a forrásdokumentumot és a stíluslapokat és a megjelenített tartalmat el˝oállítja (pl. böngész˝o). DTD dokumentumtípus meghatározás (document type definition), XML leírások összessége, amelyek meghatározzák az adott DTD-t használó dokumentum érvényes struktúráját.

46

B. Példák B.1.

HTML

htmlexample01.html Az els\H o HTML dokumentumom Hello World! htmlexample02.html Példa az érvénytelenített body attribútumokról Hello World! htmlexample03.html Kiemelés példák Kiemelés, er\H os kiemelés, idézet, definíció, programkód, programkimenet, felhasználói bemenet, programváltozó, rövidítés, bet\H uszó. 47

B PÉLDÁK

htmlexample04.html Idézet példák They went in single file, running like hounds on a strong scent, and an eager light was in their eyes. Nearly due west the broad swath of the marching Orcs tramped its ugly slot; the sweet grass of Rohan had been bruised and blackened as they passed. John said, I saw Lucy at lunch, she told me Mary wants you to get some ice cream on your way home. I think I will get some at Ben and Jerry’s, on Gloucester Road. htmlexample05.html Index példák Normál szöveg alsó index fels\H o index . Alsófels\H okirályász htmlexample06.html Sortörés példák 48

B.1 HTML

A soremelést a user agent intézi szépen magának. Természetesen lehet\H oségünk van explicit sortörés kijelölésére. Valamintazi ... sorttörjön be ... rhet. IttválasszelGéza­márhanagyon ... refox htmlexample07.html Verziókövetés példák Micimackónak 78 barátja van. htmlexample08.html Lista példák Háromféle listatípus létezik: Sorrend nélküli lista Sorrendezett lista Definíciós lista Háromféle listatípus létezik: Sorrend nélküli lista Sorrendezett lista Definíciós lista 49

B PÉLDÁK

Listatípusok definiálása: Sorrend nélküli lista UL tag (unordered list) segítségével definiálható. Sorrendezett lista OL tag (ordered list) segítségével definiálható. Definíciós lista DL tag (definition list) segítségével definiálható. Többszint\H u listák: Alma Zöld Cucc Bugi Piros Sárga Körte Jóság Rosszság htmlexample09.html Táblázat példák Táblázat felirata 50

B.1 HTML

Táblázat fejléce Táblázat lábléce 1.1 1.2 1.3 1.4 2.1 2.2 2.3 2.4 3.1 3.2 3.3 3.4 4.1 4.2 4.3 4.4 5.1 5.2 5.3 5.4 htmlexample10.html Hiperlink példák 51

B PÉLDÁK

Az oldal teteje El\H oz\H o példa Következ\H o példa Link a Google-re FTP link Új ablakba Link önmagamra TEXT, TEXT, TEXT, TEXT, TEXT, TEXT, TEXT, TEXT, ... TEXT, TEXT, TEXT, TEXT, TEXT, TEXT, TEXT, TEXT, Ugrás a tetejére htmlexample11.html Kép példa htmlexample12.html Keret példa 52

B.1 HTML

htmlexample13_get.html \H urlap példa Regisztráció a kiskunborzasztói halfeldolgozó üzemben: Azonosítás Név (legfeljebb 6 karakter): (alt + N) Jelszó: (alt + J) Kapcsolat feliratkozom a hírlevélre (a személyes adatok kezelésér\H ol) Hol hallott a munkáról? Újságban Interneten 53

B PÉLDÁK

Érdekl\H odés Szakmai önéletrajzom: Kedvenc együttesem: Apocalyptica Metallica Iron Maiden Nine Inch Nails HIM Depeche Mode Ayreon Szívemnek kedves együttesek: Apocalyptica Metallica Iron Maiden Nine Inch Nails HIM Depeche Mode Ayreon Kedvenc ételem: Húsleves Zöldségleves Gyimilcsleves Spenót Finomf\H ozelék Visszajelzés Ez a véleményem a dologról: Ez a tartalom... Ebbe nem szólok bele: Ez a tartalom... 54

B.1 HTML

Ez meg nem is rám vonatkozik: Ez a tartalom... Mehet Újra Súgó index.html HTML példák 1. példa ... 13. példa (POST) 1. példa (_blank) 1. példa (_self) 1. példa (_parent) 1. példa (_top) 55

B PÉLDÁK



B.2. XHTML xhtmlexample01.html Az els\H o XHTML dokumentumom Hello XHTML! xhtmlexample02.html An internal stylesheet example code { color: green; font-family: monospace; font-weight: bold; } This is text that uses our internal stylesheet.

B.3. CSS cssexample01.css H1 { font-family: Arial; font-size: 40pt; Color:red } P { font-size: 12pt; line-height: 20pt } cssexample01.html 56

B.3 CSS

Today is fine. Long before the advent of TV weather forecasters, people used tabletop glasses like a spherical flask to predict upcoming changes in weather. cssexample02.html H1 { font-family: Arial; font-size: 40pt; Color:red } P { font-size: 12pt; line-height:20pt } Today is fine. Long before the advent of TV weather forecasters, people used tabletop glasses like a spherical flask to predict upcoming changes in weather. cssexample03.html Today is fine. Long before the advent of TV weather forecasters, people used tabletop glasses like a spherical flask to predict upcoming changes in weather. cssexample04.html @import url(cssexample01.css); 57

B PÉLDÁK

Today is fine. Long before the advent of TV weather forecasters, people used tabletop glasses like a spherical flask to predict upcoming changes in weather. cssexample05.html * {font-size:12pt} I {color:blue} I, B {font-size:18pt} H1 I {color:red} H1 > B {color:green} I + B {color:yellow} Today is very fine. Tomorrow will be "fine". cssexample06.html H3.red { font-family: Arial; font-size: 10pt; color:red} H3.green { font-family: Times New Roman; font-size: 14pt; color:green} Today is fine. Today is fine. cssexample07.html .green {font-family: Arial; color: green } .red {font-family: Times New Roman; font-size: 14pt; 58

B.3 CSS

line-height: 20pt; color: red } Today is fine. Today is fine. Today is fine. Today is fine. Today is fine. Today is fine. Today is fine. Today is fine. Today is fine. Today is fine. Today is fine. Today is fine.

cssexample08.html #id100 { color:red } #id101 { color:green} .green { color:green} Today is fine. Today is fine. Today is fine. Today is fine.

cssexample09.html Today is fine. Today is fine. 59

B PÉLDÁK

cssexample10.html TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT Today is fine. Today is fine. cssexample11.html Today is fine. Today is block. Today is fine. Today is inline. Today is fine. Today is list-item. Today is fine. cssexample12.html Klikk ide! cssexample13.html 60

B.3 CSS

Felpattanós ablakos A rendszered bugyi!Akarod, hogy mégbugyibb legyen?

61