HTML, XHTML, CSS
KSZK, WebProjekt
KIR-dev team
<Webtanfolyam/>
el˝oadó:
Domonkos Balázs,
domi@sch.bme.hu
2005. tavasz
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 . . . 51.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
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
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
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.
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>
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©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(​) 2nemzeti okokból
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 ( 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#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.
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">
• 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">
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
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).
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
• 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
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>
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
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.
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
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
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>°-©</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=◦-©
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& 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.
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.
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.
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.
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">
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
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
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]
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)
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
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> ....
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
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:
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) {...}
: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