• No results found

HTML, Xhtml, Css

N/A
N/A
Protected

Academic year: 2021

Share "HTML, Xhtml, Css"

Copied!
61
0
0

Loading.... (view fulltext now)

Full text

(1)

HTML, XHTML, CSS

KSZK, WebProjekt

KIR-dev team

<Webtanfolyam/>

el˝oadó:

Domonkos Balázs,

domi@sch.bme.hu

2005. tavasz

(2)

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

Ábrák jegyzéke

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

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

3. Ruby komment . . . 28

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

5. Doboz modell felépítése . . . 39

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

Tartalomjegyzék

1. HTML 5 1.1. Hipertext . . . 5

1.2. Története, létrejöttének okai . . . 5

1.3. HTML dokumentum szerkezete . . . 6 1.3.1. Címkék . . . 7 1.3.2. Karakterkódolás és formátumok . . . 7 1.3.3. Komment . . . 9 1.4. HTML verzió információ . . . 9 1.5. HTML tag . . . 10 1.6. Fejléc (<HEAD>) . . . 10

1.6.1. Dokumentum címe (<TITLE>) . . . 10

1.6.2. Meta adat (<META>) . . . 10

1.7. Törzs (<BODY>) . . . 11 1.8. Megjelenítés . . . 11 1.8.1. Szöveg . . . 11 1.8.2. Lista . . . 13 1.8.3. Táblázat . . . 13 1.8.4. Link . . . 15 1.8.5. Kép . . . 16 1.8.6. Keret (frame) . . . 17 1.8.7. Stílus . . . 17 1.8.8. Csoportosító címkék . . . 18 1.9. Interaktivitás . . . 18 1.9.1. Objektum, applet . . . 18 1.9.2. Script . . . 18 1.9.3. ˝urlap . . . 18 1.10. Weboldalak kiszolgálása . . . 21 1.11. Validálás . . . 22 2. XHTML 23 2.1. Az XML-r˝ol röviden . . . 23

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

2.3. XML nyelvi megkötések . . . 24

2.4. DTD és ajánlások . . . 24

2.4.1. Dokumentumtípusok . . . 25

2.4.2. XML fejléc . . . 25

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

(3)

TARTALOMJEGYZÉK

2.5.2. Tagnevek . . . 25

2.5.3. Whitespace-kezelés az attribútumok értékeiben . . . 26

2.5.4. Script és Style elemek . . . 26

2.5.5. SGML kizárások . . . 26

2.5.6. Elemek id és name attribútumokkal . . . 26

2.5.7. Attribútumok el˝ore definiált értékkészlettel . . . 27

2.5.8. Entitáshivatkozások hexadecimális értékekként . . . 27

2.5.9. Címke nyelvének megadása . . . 27

2.6. Kapcsolatok más szabványokkal . . . 27 2.6.1. XML . . . 27 2.6.2. DOM . . . 27 2.6.3. CSS . . . 28 2.7. XHTML 1.1 . . . 28 3. CSS 29 3.1. Története, létrejöttének okai . . . 29

3.1.1. Története . . . 29 3.1.2. Mire jó? . . . 29 3.2. Stíluslap alapok . . . 29 3.2.1. Stílus deklaráció . . . 29 3.2.2. Stílus specifikáció . . . 29 3.3. Szelektorok . . . 31 3.3.1. Univerzális szelektor . . . 31 3.3.2. Típus szelektor . . . 31 3.3.3. Szelektorok kontextusa . . . 31

3.3.4. Szelektor osztályok (Class Selector) . . . 32

3.3.5. ID szelektor . . . 32

3.3.6. Szelektor pszeudo-osztályok (Pseudo class selector) . . . 32

3.4. Bet˝utípus . . . 34

3.4.1. Bet˝utípus család (font family) . . . 34

3.4.2. Bet˝uméret . . . 34

3.4.3. Bet˝uvastagság (font weight) . . . 34

3.4.4. Bet˝ud˝oltség (font style) . . . 35

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

3.4.6. Kisbet˝u-nagybet˝u átalakítás . . . 35

3.4.7. Bet˝utípus megadás egyszerre . . . 35

3.5. Szöveg . . . 35 3.5.1. Sormagasság . . . 35 3.5.2. Vízszintes igazítás . . . 36 3.5.3. Függ˝oleges igazítás . . . 36 3.5.4. Szöveg körbefuttatása . . . 37 3.5.5. Bekezdés . . . 37 3.6. Lista . . . 37 3.6.1. Lista típusa . . . 37 3.6.2. Lista igazítása . . . 38

3.6.3. Lista meghatározása egyszerre . . . 38

3.7. Szín és háttér . . . 38 3.7.1. El˝otérszín . . . 38 3.7.2. Háttérszín . . . 38 3.7.3. Háttérkép . . . 38 3.8. Dobozolás . . . 39 3.8.1. Doboz-orientált modell . . . 39 3.8.2. Margó (margin) . . . 39 3.8.3. Szegély (border) . . . 40

(4)

3.8.4. Ráhagyás (Padding) . . . 41

3.8.5. Tartalom méretei (content) . . . 41

3.8.6. Túlfutás (overflow) . . . 41

3.9. Táblázat . . . 42

3.9.1. Szegély . . . 42

3.10. Pozíció és vizuális effektusok . . . 42

3.10.1. Doboz pozicionálás . . . 42 3.10.2. Z-Index . . . 42 3.10.3. Vágás . . . 43 3.10.4. Láthatóság . . . 43 3.10.5. Megjelenítés . . . 43 3.11. Médiatípusok . . . 43 3.12. Felhasználói interface . . . 44 3.12.1. Egérkurzor . . . 44 3.12.2. Asztali színek . . . 44 A. Fogalmak 46 B. Példák 47 B.1. HTML . . . 47 B.2. XHTML . . . 56 B.3. CSS . . . 56

(5)

1.

HTML

Hypertext Markup Language.

1.1.

Hipertext

A hipertext fogalmát megalkotó Ted Nelson klasszikussá vált meghatározása szerint a hipertext „nem-folyamatos írás – olyan szöveg, amely elágazik és választási lehet˝oséget kínál az olvasónak, s amely leg-jobban 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 gya-korolt 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 elekt-ronikus 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) kuta-tó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

megha-ladja a Gopherét.

1995 HTML 2.0 verzió. Több keres˝omotor létesül (Lycos, Yahoo!);az Altavista 15 millió oldalt tart nyil-ván. Megszületik a Netscape Navigator böngész˝o. VRML (Virtual Reality Modeling Language) ki-dolgozá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.

(6)

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,

be-kezdé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 il-leszthet˝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 ˝urlapok (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,

sc-riptek támogatása. Megjelenik a <STYLE>tag, egyel˝ore kevés haszonnal, csak ígéret szinten. A

képtérképek (imagemap) és a<DIV>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

<OBJECT>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) tartal-maz. 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 (<HEAD>tag)

3. HTML törzs (<BODY>vagy<FRAMESET>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<HTML>tagek közé kell.

Például így néz ki a legegyszer˝ubb HTML dokumentum:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<HTML> <HEAD>

<TITLE>Az elso HTML dokumentumom</TITLE> </HEAD>

<BODY>

<P>Hello World! </BODY>

(7)

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:

<TAG ...> ... </TAG>

A tagek nevén túl tartalmazhatnak attribútumokat, amelyek a jelöl˝o alapértelmezett jelentését módosít-já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ú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:

<TAG nev1=ertek1 nev2="ertek ketto"></TAG>

É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 (HTTPContent-Typefejlécénekcharsetparamé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 meg-jelení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 arecodeparancs 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ú, aholnevaz entitás neve. Például&copy;a copyright jele,&alpha;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&#169;ill.&#xA9;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 (&#x0020;)

• ASCII tabulátor (&#x0009;)

• ASCII soremelés (&#x000C;)

• nulla szélesség˝u bet˝uköz2(&#x200B;) 2nemzeti okokból

(8)

A soremelés és kocsivissza karakterek a megjelenített dokumentumban nem eredményeznek soreme-lé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 (<BR>tag) és a soremelést megakadályozni (&nbsp;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

(&shy;– 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#RRGGBBalakban 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#000000a fekete,#FF00FFaz é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 = "#000000" Green = "#008000" Silver = "#C0C0C0" Lime = "#00FF00" Gray = "#808080" Olive = "#808000" White = "#FFFFFF" Yellow = "#FFFF00" Maroon = "#800000" Navy = "#000080" Red = "#FF0000" Blue = "#0000FF" Purple = "#800080" Teal = "#008080" Fuchsia = "#FF00FF" Aqua = "#00FFFF"

A színkódok részletes listája megtalálható a

http://www.w3schools.com/html/html_colornames.aspoldalon.

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álasz-tanunk:

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 el-mosására, ill. nem támogatja az átlátszóságot.

(9)

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át-szó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 megje-lenjen. 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 sza-badalom (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 ˝urlapot 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˝o-kö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:

<!--Ez egy komment,

ami <i>tetszoleges</i> 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

ér-vénytelenítve (deprecated). A fejléc alakja az alábbi:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

(10)

• HTML 4.01 Transitional DTD: Az el˝obbi valamint az érvénytelenített tagek és attribútumok. A fejléc

alakja az alábbi:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01" " Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

• 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:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

1.5.

HTML tag

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

1.6.

Fejléc (<HEAD>)

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

1.6.1. Dokumentum címe (<TITLE>)

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 (<META>)

A dokumentumról tárolhatunk páratlan <META>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:

namevagyhttp-equiv: a metainformáció neve

content: a metainformáció értéke

Keres˝orobotok

A <META> tag leggyakoribb felhasználási területe az oldal leírása a keres˝orobotok számára a

keywordstulajdonság beállításával.

<meta name="keywords" content="web, css, design">

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, mi-lyen kódolással jelenítse meg az oldalt. (ld. még az 1.3.2. fejezetet).

<meta http-equiv="content-type" content="text/html; charset=iso-8859-2">

Szerz˝o

A dokumentum szerz˝oje aauthor, a copyright információ acopyrighttulajdonság beállításával lehetséges.

<meta name="author" content="Domonkos Balazs">

(11)

1.7 Törzs (<BODY>)

1.7.

Törzs (<BODY>)

A dokumentum törzsét jelöl˝o páros tag elhagyható, de célszer˝u kiírni. Az alábbi attribútumokkal ren-delkezik:

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ít-ják a megjelenést.

Bekezdés

Bekezdések a<P>taggel adhatók meg, melynek zárótagje opcionálisan elhagyható. Címsorok

AH1,H2,H3,H4,H5,H6címsorok (headings) páros tagek növekv˝o mélység˝u címsorok definiálására szolgálnak.

Pl.:cssexample07.html 4részletesen ld. JavaScript el˝oadás

(12)

Formázatlan szöveg

A páros<PRE>tagek segítségével adható meg formázatlan szöveg fix karakterszélességgel és automa-tikus 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

ABLOCKQOUTEpáros tag hosszú blokk-szint˝u idézet kijelölésére szolgál, míg a szintén párosQtag 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.

Aciteparaméterrel megadható az idézet forrása. Pl.:htmlexample03.html

Indexek

ASUPésSUBpá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

AINSés DELpá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).

(13)

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

ULtag (unordered list) segítségével definiálható.

Sorrendezett lista

OLtag (ordered list) segítségével definiálható. Definíciós lista

DLtag (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 aTABLEpá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

(14)

cellpadding: a keret, bels˝o vonalak és a tartalom közti távolság

Acellspacingéscellpaddingtulajdonsá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, he-lyette 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

(15)

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éles-ségek és összevonások megadására. Pl.:

<COLGROUP span="osszevonas" width="szelesseg"> <COL span="osszevonas" width="szelesseg">

ACOLGROUPzárótagje opcionális, aCOLmagányos tag. Awidthattribú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:

<A name="achor_neve">Ide kerul a horgony</A>

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:

<A href="#top">Ugras az oldal tetejere</A> <A href="masik.html">link a masik oldalra</A> <A href="masik.html#valahol">link a masik oldalon talalhato ,,valahol’’ horgonyra</A>

<A href="http://webtanfolyam.sch.bme.hu"> Link kulso oldalra</A>

<A href="masik.html" target="keret">link a masik oldalra, amely a keret nevu frame-ben fog megnyilni.</A>

(16)

Az utolsó példában láthatótargetargumentum 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ó. Atargetattribútum csak Transitional DTD-vel használható.

AzAachor 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 azIMGmagányos taggel történik, a képformátumokról ld. 1.3.2. fejezet. Attribútu-mok:

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_nevealakban kell megadni az ima-gemap 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ésheight) 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 ela-vult, a Flash technológia kiszorította.

Kliens oldali térkép (imagemap) Szintaxisa: <MAP name="terkep_neve"> <AREA alt="felirat" shape="alakzat" coords="koordinatak" href="url" nohref> </MAP>

AMAPpáros, aAREAmagá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

coordsaz alakzatnak megfelel˝oen adhatók meg az azt leíró koordináták: circle: eseténx, y, r

(17)

1.8 Megjelenítés

poly: eseténx1, 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.

AFRAMESETpá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

AFRAMEmagányos taggel pedig aFRAMESET-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 je-lenté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 ˝osframe (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)

AFRAMESETtörzsén belülNOFRAMEStaggel 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 aDIV-ek esetében) , ahová a böngész˝o egy másik html dokumentumot tölt be. Attri-bú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.

(18)

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. ADIV(alapértelmezés szerint blokk-szint˝u) és aSPAN(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,idld. 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

AzOBJECTcímke segítségével multimédiás tartalmat6, azAPPLETtaggel pedig Java Appletet7 épít-hetnünk honlapunkba. Ahttp://www.w3.org/TR/html401/struct/objects.html oldalon található referenciában érdemes utánanézni a pontos szintaxisnak.

1.9.2. Script

ASCRIPTcímkék tartalmaként és az egyéb tagekonkezdet˝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 ágya-zunk é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 ˝urlap (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 ˝urlap (több ˝urlap is szerepelhet egyazon oldalon). Legfontosabb attribútumai:

action: az az URL, ahová az ˝urlap adatai továbbítódnak.

method: lehetGETill.POST. Az el˝obbi esetben az URL-ben az utóbbinál a HTTP kérésben továb-bítódnak a paraméterek.

name: az ˝urlap neve. JavaScriptb˝ol ennek segítségével hivatkozhatunk az ˝urlapra é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˝uGET

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.

POSTmetó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

6leggyakrabban Flash animációt 7ld. b˝ovebben a JavaScript el˝oadást

(19)

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

AFORMtag törzsében adhatjuk meg az ˝urlaphoz 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 ˝urlapmez˝o neve (a szerveroldalon ezzel hivatkozhatunk a mez˝ore, ld. PHP el˝oadás)

disabled: az ˝urlapmez˝ot a felhasználó nem szerkesztheti (kiszürkített)

INPUT tag

A magányosFORMtag gyerekcímkéjeiként megadhatjuk az ˝urlaphoz 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: ˝urlap elküldése gomb

image: grafikus „˝urlap elküldése gomb” reset: ˝urlap 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 azinputéspasswordmez˝oket, ott a karak-terek száma)

maxlength: atextéspasswordtípusú mez˝obe maximálisan begépelhet˝o karakterek száma (fi-gyelembe 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: aradioéscheckboxkivételével itt adhatunk meg kezd˝oértéket az ˝urlapmez˝onek

checked:radioéscheckboxesetén az adott mez˝o kiválasztva ill. beikszelve jelenik meg

(20)

BUTTON tag

ABUTTONpáros címke lényegében asubmit,reset,buttontípusúINPUTcí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,resetvagybutton

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 aSELECTpá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 aOPTGROUPtaggel. Attribútumai:

label: a csoport neve

disabled: a csoportból nem választhatunk elemet (de jelezni akarjuk, hogy vannak ilyen elemek). A listaelemeket aOPTIONtaggel 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. ATEXTAREAa HTML egyéb elemeit˝ol eltér˝oen kezeli a whitespaceket. A bet˝uközöket, tabulátorokat és újsor karaktereket meg-˝orzi. 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.:

<TEXTAREA NAME=cucc>&deg;-&copy;</TEXTAREA>

ugyanúgy jelennek meg, mintha statikus szövegként írtuk volna be. Az el˝obbi karakter szerepel a hasz-nált kódlapon, az útóbbi nem. Ez szerepet kap az ˝urlap 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=-&#169;

Az ˝urlapon 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&amp; 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.

(21)

1.10 Weboldalak kiszolgálása

LABEL tag

A ˝urlapmez˝ok felirata jelölhet˝o ki ezzel a páros taggel. Attribútuma:

for: azon elemidattribútuma, amelyhez a feliratot rendeljük. Ld. még 3.3.5. fejezet.

˝urlap tagolása

AFIELDSETpáros taggel aFORM˝urlapon belül kijelölhetünk egy blokkot, amelyet aLEGENDpáros taggel feliratozunk (amennyibenFIELDSET-et használunk, annak els˝o gyerektagjekéntLEGEND-et kell megadnunk) (például személyes adatok megadása, termékverzió kiválasztása, . . . ).

AFIELDSETáltalában elég kulturáltan jelenik meg a böngész˝okben, de ennek ellenére ritkán használ-já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 ˝urlapelem ki van választva adatbevitel ill. módosítása céljából. Egyszerre legfeljebb egy elem lehet fókuszban.

Az ˝urlapelemeken túl aA,AREA,OBJECTcí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 álta-lá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 atabindexattribú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 ˝urlapelemeket azonnal elérünk billenty˝uzetr˝ol. Ez a

accesskeyattribútum beállításával történik vagy az ˝urlapelemen 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 fel-haszná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 fileparanccsal olvasójogot,

• könyvtárakra: chmod o+x konyvtar paranccsal elérési, ill. chmod o+r konyvtar pa-ranccsal 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_htmlkönyvtár.

(22)

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átorahttp://validator.w3.org/címen elérhet˝o. Kényelmesen elérhet˝o a

Mo-zilla FireFox böngész˝ob˝ol a Webdeveloper extension telepítése után aCTRL+SHIFT+V billenty˝ukombiná-cióval.

(23)

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 HTML-hez 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éz-sé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ítha-tók XML értelmezésre is

• egyszer˝u programírás az XML dokumentumok feldolgozására, így a nagyon gyorsan elterjed a

prog-ramozók körében

• az XML opcionális lehet˝oségeinek minimálisra csökkentése, amivel elkerülhet˝ok az egyes

feldol-gozó 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,

el-lenben 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 dokumentum-típus (ld. 1.4) megújítása XML 1.0 alkalmazásként. Ez a dokumentumdokumentum-tí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.

(24)

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

<img src="kep.jpg">

hibás XML tag. Helyesen így szerepel:

<img src="kep.jpg"></img>

A nyelv erre az esetre tartalmaz egy egyszer˝usítést, így az alábbi megadás is helyes és ekvivalens a fentivel:

<img src="kep.jpg" />

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

<i><b></i></b>

helytelen forma.

A HTML-lel ellentétben a tagek nevei nagybet˝uérzékenyek. Egy attribútumnév csak egyszer szerepel-het 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 azxmlkaraktersorozat 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 rak-nunk.

Jelentés nélküli karakternek nevezünk minden olyan karaktert, amely nem befolyásolja az XML

doku-mentum 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 azxmlnsattribútum használatával jelölnie kell az XHTML név-tereket. (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:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

(25)

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 -DOCTYPEdeklarációt kell elhelyezni:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

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:

<?xml version="1.0" encoding="UTF-8"?>

2.5.

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

Egy egyszer˝u Strict XHTML 1.0 dokumentum:

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"

xml:lang="en" lang="en"> <head>

<title>Az els\H o XHTML dokumentumom</title> </head> <body> <p>Hello XHTML!</p> </body> </html> 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

(26)

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

kon-vertálniuk.

2.5.4. Script és Style elemek

Az XHTML-ben ascriptésstyleelemek deklarációjuk szerint#PCDATAtartalmúak (ld. xml el˝o-adás). Ennek eredményeképpen a<és&karakterek jelöl˝o kezdeteként vannak értelmezve, egyedeiket (<,

&) az XML értelmez˝ok egyedhivatkozásként ismerik fel. Egy script, vagy stíluselem tartalmánakCDATA

jelölés˝u részbe csomagolásával elkerülhet˝o ezen egyedek kibontása.

<script type="text/javascript"> <![CDATA[

... ]]>

</script>

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 aCDATA-á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 va-lamely elemb˝ol. Ilyen tiltási lehet˝oségek az XML-ben nem lehetségesek.

Példaként: a HTML 4 Strict DTD megtiltja az <a>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 szerepelhet-nek, 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ásaelemeket.

pre: nem tartalmazhatja azimg,object,big,small,sub, vagysupelemeket.

button: nem tartalmazhatja az input, select, textarea, label, button, form,

fieldsetvagyiframeelemeket.

label: nem tartalmazhat máslabelelemet.

form: nem tartalmazhat másformelemet.

2.5.6. Elemek id és name attribútumokkal

A HTML 4 definiálta az a,applet,form,frame,iframe,imgésmap elemkhez használható

nameatttribútumot. Szintén a HTML 4 vezette be azidattribútumot. Mindkét attribútum a

dokumentu-mon belüli navigációhoz lett tervezve, azonosítóként.

Az XML-ben a részazonosító típusaIDés elemenként egyIDtípusú attribútum használható. Ezért az XHTML 1.0 -ban azidattribútum lettIDtí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 idattribútumot kell használni azonosítóként a fent felsorolt elem esetében (mivel néhány böngész˝o

(27)

2.6 Kapcsolatok más szabványokkal

nem támogatja még aidattribútum ilyen használatát, XHTML 1.0 esetén érdemes mindkét attribútumot megadni).

Az XHTML 1.0-ben anameattribútum használata formálisan „nem javasolt” és az XHTML 1.1 ver-zió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.: azinputcímektypeattribú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 aTEXTérték megegyezik atexté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

doku-mentumokban 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:langattribútumok használandók. Az

xml:langattribú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, amelyektext/htmlInternet médiatípusként9megadott XHTML

dokumentu-mot 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 tartalommo-dellben opcionálisan szerepelnek (pl. a tbodycímke atabletagen 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]

(28)

2.6.3. CSS

A Cascading Style Sheets 2 ajánlás (ld. 3 fejezet) írja le azokat a stílustulajdonságokat, amelyek al-kalmazható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 megfe-leljen 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 atbodyelem jelenlétét a HTML böngész˝ok kikövetkeztetik, de az XML

felhasz-nálói alkalmazások értelmez˝oi ezt nem teszik meg. Ezért, ha CSS szelektor hivatkozik rá, atbody

elemet mindig explicit módon deklarálni kell.

A HTML 4-ben és az XHTML-ben astyletag dokumentumon belüli stílusszabályok el˝oírására hasz-ná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, astyleelemeknek sajátidattribútummal megadott részazonosítóval kell rendelkezniük, és az XML stíluslap deklarációnak erre az azonosítóra kell hivatkoz-nia.

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 el-té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 alangattribútum axml:langjavára.

2. Azaésmaptageknél anameattribútum elt˝unt aidattribú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)

(29)

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ástar-talmat, 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 ek-kor. 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

(30)

oldal<head>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:

<HEAD>

<LINK REL="stylesheet" TYPE="text/css" HREF="stilus.css"> </HEAD>

Pl.:cssexample01.html

Bels˝o stíluslap (Embedding Style Sheet) A HTML fejlécében kell elhelyezni:

.... <HEAD> <STYLE TYPE="text/css"> SZELEKTOR1 {...} SZELEKTOR2 {...} .... SZELEKTORn {...} </STYLE> </HEAD> .... Pl.:cssexample02.html

Sorközi stílus (Inline Styles) Bármely tagben elhelyezhet˝o:

....

<TAG STYLE="TULAJDONSAG: ERTEK"> ... </TAG> ....

(31)

3.3 Szelektorok

Importált stíluslap (Import Style Sheet)

A HTML-fejlécben lehet megadni az alábbi módon:

.... <HEAD> <STYLE TYPE="text/css"> @import url(stilus.css); .... </STYLE> </HEAD> .... Pl.:cssexample04.html

3.3.

Szelektorok

A szelektorok tulajdonképpen mintaillesztési szabályok, amelyekkel a forrásdokumentumból választ-hatunk 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 {...}

ASZELEKTORegy 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 {...}

AzonTAG2tagek tulajdonságát állítjuk be, amelyekTAG1típusú tagek leszármazottja.

TAG1 > TAG2 {...}

AzonTAG2tagek tulajdonságát állítjuk be, amelyekTAG1típusú tagek gyermekei (közvetlen leszár-mazottai).

TAG1 + TAG2 {...}

AzonTAG2tagek tulajdonságát állítjuk be, amelyeket közvetlenül megel˝oz egyTAG1típusú tag. Pl.:cssexample05.html

(32)

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:

<TAG CLASS="namei">

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:

<TAG1 ID="idi">

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:

(33)

3.3 Szelektorok

Els˝o gyerekelem

TAG:first-child {...}

Akkor állít be aTAG-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:

<STYLE TYPE="text/css">

DIV > P:first-child { font-size: 14pt } </STYLE> ... <DIV> <P>Cikk bevezetoje.</P> <P>Cikk szovege...</P> </DIV> <DIV> <H2>Cikk cime</H2> <P>Cikk bevezetoje.</P> <P>Cikk szovege...</P> </DIV>

Els˝o sor és bet ˝u 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) {...}

(34)

: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.

Bet ˝utípus

3.4.1. Bet ˝utí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,monospacelehet. 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. Bet ˝uméret

{font-size: MERET}

AMERETlehet

• 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:smallervagylarger

A pixelben megadott méret a képerny˝ot, míg a pontban megadott (gondoljunk a 12-es bet˝uméret fogal-má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. Bet ˝uvastagság (font weight)

{font-weight: VASTAGSAG}

AVASTAGSAGlehet:

• explicit bináris:normalvagybold

References

Outline

Related documents

Consumer Remedies: Cancellation • A consumer may cancel a personal development service agreement,. without penalty, at any time during the

We argue we should be less concerned with policing the boundaries of economic geography and embrace the economic geographic scholarship in development

In contrast, the behavior of ultra-orthodox religious Jews in Israel can be categorized as nepotism: they favor members of their own group while treating anonymous

4.2.1 ANALIZA VPLIVA SISTEMA VODENJA KAKOVOSTI NA NEFINANČNI DEL POSLOVANJA 4.2.1.1 Analiza števila zaključenih projektov v tekočem letu Podjetje je na začetku leta 2013 vpeljalo

We have here assessed Acorn as a CCS project that has the potential to overcome these hindrances by focussing on seven key elements identified during the development of the

Grill over direct medium-high heat with the barbecue’s cover closed for 4-6 minutes, turning over once or twice for medium-rare beef, or until it is cooked to your liking..

Kim Sang-han pointed out that the early attempts to export Korean dramas in the late 1990s were made by only a few personnel at each broadcasting

As you are aware GDS/CRS bill the airlines every time a GDS/CRS enabled Travel Service Provider (Any travel agency, Accredited or Non Accredited Subscriber, CRS/GDS user, and