Alapadatok
Év, oldalszám:2005, 61 oldal
Nyelv:magyar
Letöltések száma:765
Feltöltve:2009. május 31.
Méret:155 KB
Intézmény:
-
Megjegyzés:
Csatolmány:-
Letöltés PDF-ben:Kérlek jelentkezz be!
Értékelések
Nincs még értékelés. Legyél Te az első!
Tartalmi kivonat
HTML, XHTML, CSS KSZK, WebProjekt KIR-dev team <Webtanfolyam/> előadó: Domonkos Balázs, domi@sch.bmehu 2005. tavasz TARTALOMJEGYZÉK Köszönet Széll (Bandita) Andrásnak az építő javaslatokért és azért, hogy lefordította a jegyzetet magyarról magyarra :) Ábrák jegyzéke 1. 2. 3. 4. 5. 6. Táblázat filozófiája HTML-ben . cellspacing és cellpadding tulajdonság értelmezése Ruby komment . Függőleges igazítás . Doboz modell felépítése . CSS-ben használt szegélystílusok . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13 14 28 36 39 40 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . 5 5 5 6 7 7 9 9 10 10 10 10 11 11 11 13 13 15 16 17 17 18 18 18 18 18 21 22 2. XHTML 2.1 Az XML-ről röviden 2.2 Az XHTML története, létrejöttének okai 2.3 XML nyelvi megkötések 2.4 DTD és ajánlások 2.41 Dokumentumtípusok 2.42 XML fejléc 2.5 Különbségek a HTML 4-hez képest és kompatibilitás 2.51 Jólformáltság . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23 23 23 24 24 25 25 25 25 Tartalomjegyzék 1. HTML 1.1 Hipertext 1.2 Története, létrejöttének okai 1.3 HTML dokumentum szerkezete 1.31 Címkék
1.32 Karakterkódolás és formátumok 1.33 Komment 1.4 HTML verzió információ 1.5 HTML tag 1.6 Fejléc (<HEAD>) 1.61 Dokumentum címe (<TITLE>) 1.62 Meta adat (<META>) 1.7 Törzs (<BODY>) 1.8 Megjelenítés 1.81 Szöveg 1.82 Lista 1.83 Táblázat 1.84 Link 1.85 Kép 1.86 Keret (frame) 1.87 Stílus 1.88 Csoportosító címkék 1.9 Interaktivitás 1.91 Objektum, applet 1.92 Script 1.93 űrlap 1.10 Weboldalak kiszolgálása 1.11 Validálás 2 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . TARTALOMJEGYZÉK 2.52 Tagnevek 2.53 Whitespace-kezelés az attribútumok értékeiben 2.54 Script és Style elemek 2.55 SGML kizárások 2.56 Elemek id és name attribútumokkal 2.57 Attribútumok előre definiált értékkészlettel 2.58 Entitáshivatkozások hexadecimális értékekként 2.59 Címke nyelvének megadása 2.6 Kapcsolatok más szabványokkal 2.61 XML 2.62 DOM 2.63 CSS 2.7 XHTML 11 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25 26 26 26 26 27 27 27 27 27 27 28 28 3. CSS 3.1 Története, létrejöttének okai 3.11 Története 3.12 Mire jó? 3.2 Stíluslap alapok 3.21 Stílus deklaráció 3.22 Stílus specifikáció 3.3 Szelektorok 3.31 Univerzális szelektor 3.32 Típus szelektor 3.33 Szelektorok kontextusa 3.34 Szelektor osztályok (Class Selector) 3.35 ID szelektor 3.36 Szelektor pszeudo-osztályok (Pseudo class selector) 3.4 Betűtípus 3.41 Betűtípus család (font family) 3.42 Betűméret 3.43 Betűvastagság (font weight) 3.44
Betűdőltség (font style) 3.45 Szöveg aláhúzás (text decoration) 3.46 Kisbetű-nagybetű átalakítás 3.47 Betűtípus megadás egyszerre 3.5 Szöveg 3.51 Sormagasság 3.52 Vízszintes igazítás 3.53 Függőleges igazítás 3.54 Szöveg körbefuttatása 3.55 Bekezdés 3.6 Lista 3.61 Lista típusa 3.62 Lista igazítása 3.63 Lista meghatározása egyszerre 3.7 Szín és háttér 3.71 Előtérszín 3.72 Háttérszín 3.73 Háttérkép 3.8 Dobozolás 3.81 Doboz-orientált modell 3.82 Margó (margin) 3.83 Szegély (border) . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29 29 29 29 29 29 29 31 31 31 31 32 32 32 34 34 34 34 35 35 35 35 35 35 36 36 37 37 37 37 38 38 38 38 38 38 39 39 39 40 3 TARTALOMJEGYZÉK 3.9 3.10 3.11 3.12 3.84 Ráhagyás (Padding) 3.85 Tartalom méretei (content) 3.86 Túlfutás (overflow) Táblázat . 3.91 Szegély Pozíció és vizuális effektusok . 3.101 Doboz pozicionálás 3.102 Z-Index 3.103 Vágás 3.104 Láthatóság 3.105 Megjelenítés Médiatípusok . Felhasználói interface . 3.121 Egérkurzor 3.122 Asztali színek . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41 41 41 42 42 42 42 42 43 43 43 43 44 44 44 A. Fogalmak 46 B. Példák B.1 HTML B.2 XHTML B.3 CSS
47 47 56 56 4 1. HTML Hypertext Markup Language. 1.1 Hipertext A hipertext fogalmát megalkotó Ted Nelson klasszikussá vált meghatározása szerint a hipertext „nemfolyamatos írás – olyan szöveg, amely elágazik és választási lehetőséget kínál az olvasónak, s amely legjobban egy interaktív képernyőn olvasható. Az általános elképzelés szerint ez szövegdarabok linkekkel összekapcsolt sorozata, amelyek különböző ú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ű tanulmányát, s ezzel gyakorlatilag lefektette a hipertext koncepciójának alapjait. Egy olyan gépet álmodott meg, amely a hagyományos adatstrukturálással (alfabetikus sorrend, ld. könyvtár) ellentétben az emberi asszociációhoz hasonló indexelést definiált a dokumentumok között.
Xanadu Bár a Memex soha nem valósult meg, a mögötte meghúzódó elképzelés közvetlen hatást gyakorolt számos szakemberre, akik évtizedekkel később a digitális kultúra kiépítésén fáradoztak. Ted Nelson is, aki megalkotta a hipertext és hipermédia szavakat, bevallottan a mechanikus Memex elektronikus változatát igyekezett megteremteni az általa kezdeményezett Xanadu projektben. [2][7] 1.2 Története, létrejöttének okai A hypertext, a HTML és a kapcsolódó események a HTML 4.01-ig bezárólag: 1989 Tim Berners-Lee és Robert Caillian, a genfi CERN (Nukleáris Kutatások Európai Központja) kutatói javaslatot tesznek a világméretű 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ő széles körben elterjedt grafikus böngészőt. A Fehér Ház honlapja elérhetővé válik a WWW-en 1994 A WWW fejlesztésére megalakul a World Wide Web Consortium (W3C). A WWW forgalma meghaladja a Gopherét 1995 HTML 2.0 verzió Több keresőmotor létesül (Lycos, Yahoo!);az Altavista 15 millió oldalt tart nyilván Megszületik a Netscape Navigator böngésző VRML (Virtual Reality Modeling Language) kidolgozása A Sun Microsystems elsősorban internetes alkalmazások fejlesztésére megalkotja a Java objektumorientált programozási nyelvet, kezdetét veszi a Java appletek terjedése. Az első magyar nyelvű MUD1 szerepjáték megjelenése
(Elveszett világ) a Budapesti Műszaki Egyetem Schönherz Zoltán Kollégiumának szerverén. 1996 A Netscape Navigator 2.0 lehetővé teszi több keretből (frame) álló weboldalak létrehozását 1997 HTML 3.2 verzió Magyarországon beindul a SuliNet program, ami internetes hozzáférést biztosít általános- és középiskolák számára. 1 MultiUser Dungeon 5 1 HTML 1998 HTML 4.0 verzió 1999 HTML 4.01 verzió [2][3] Az egyes HTML verziók képességei: HTML 0 a dokumentum tartalmára vonatkozó címkék, valamint hiperhivatkozásokhoz, címsorokhoz, bekezdésekhez, listákhoz és menütételekhez használható jelölési definíciók. HTML 1 megtartotta a HTML 0-ás verziójának összes tulajdonságát, és kiegészítette azokat a sorokba illeszthető képek támogatásával, valamint a különböző karakterformázó lehetőségekkel (pl. vastagítás, dőlt betű). HTML 2 űrlapok (formok) kezelése HTML 3.2 táblázatok kezelése, formázási
lehetőségek szélesítése (betűtípusok támogatása), appletek, scriptek támogatása Megjelenik a <STYLE> tag, egyelőre 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őség nyílik multimédiás tartalom weboldalba ágyazására. Továbbiakban a HTML 4.01 Strict szabványt ismertetem 1.3 HTML dokumentum szerkezete A HTML dokumentum szöveges file, amely a szöveges tartalom mellett ún. címkéket (tageket) tartalmaz Ezek a tagek felelősek 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őleges számú ún. whitespace (szóköz, újsor, tabulátor) vagy komment (ld 1.33 fejezet) lehet A 2 és 3 részt <HTML> tagek közé kell Például így néz ki a legegyszerűbb HTML dokumentum: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3org/TR/html4/strictdtd"> <HTML> <HEAD> <TITLE>Az elso HTML dokumentumom</TITLE> </HEAD> <BODY> <P>Hello World! </BODY> </HTML> 6 1.3 HTML dokumentum szerkezete 1.31 Címkék A címkék < jellel és a címke nevével kezdődnek é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őz meg Például: <TAG .> </TAG> A tagek nevén túl tartalmazhatnak attribútumokat, amelyek a jelölő alapértelmezett jelentését módosítják. Célszerű akkor is beállítani az attribútum értékét az általunk
tervezettre, ha egy böngészővel tesztelve a kívánt eredményt tapasztaljuk, ugyanis a böngészők alapbeállítása, így a kapott kép eltérő lehet. Az attribútum megadása az attribútum nevének és értékének definiálásával történik Az értéket idézőjelben célszerű megadni, ez kötelező 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ű-é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űvel és tegyük ki az idézőjeleket (mellesleg ez a stílus előremutat az XHTML felé, ld. 2 fejezet) 1.32 Karakterkódolás és formátumok Karakterkódolás A karakterkódolást a HTTP kérésben (HTTP Content-Type fejlécének charset paraméterével) továbbítja a webszerver. Megadható a HTML dokumentum fejlécében is, de azt általában
figyelmen kívül hagyja a user agent (azon program, amely értelmezi a forrásdokumentumot és a stíluslapokat és a megjelenített tartalmat előállítja (pl. böngésző)) A továbbiakban a könnyebb érthetőség kedvéért a böngésző 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ű például ISO-8859-2 (közép-európai kódlap) használata UNIX alatt a recode parancs segítségével konvertálhatjuk a file-okat egyik kódkészletről egy másikra. HTML entitások Lehetőségünk van olyan karakterek, szimbólumok megadására is, amelyek nem szerepelnek az adott kódlap karakterkészletében; ezek az ún. HTML entitások Az entitás &nev; alakú, ahol nev az entitás neve. Például © a copyright jele, α a görög alfa betű 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űszerrel megtalálható. White space-ek HTML-ben az alábbi whitespace karakterek ill. HTLM entitások definiáltak(ld 132 fejezet): • ASCII betűköz ( ) • ASCII tabulátor (	) • ASCII soremelés () • nulla szélességű betűköz2 (​) 2 nemzeti okokból 7 1 HTML A soremelés és kocsivissza karakterek a megjelenített dokumentumban nem eredményeznek soremelést, a sortöréseket a böngésző automatikusan intézi. Természetesen lehetősé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ő. Egyedül
kötőjel vagy rejtett kötőjel (­ – soft hypernation) mentén képes elválasztani. Pl.: htmlexample06html 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őleges pozícióját kell megadni, amely többféleképpen tehető 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ő), pl: 2* Színkódok HTML-ben színek #RRGGBB alakban adhatók meg, ahol • RR: a vörös összetevő hexadecimális kódja • GG: a zöld összetevő hexadecimális kódja • BB: a kék összetevő hexadecimális kódja Így például #000000 a fekete, #FF00FF az élénk lila kódja. A színek nemcsak kóddal, hanem névvel is megadhatók – vigyázat a név
nagybetű-érzékeny. Néhány példa: Black Silver Gray White Maroon Red Purple Fuchsia = = = = = = = = "#000000" "#C0C0C0" "#808080" "#FFFFFF" "#800000" "#FF0000" "#800080" "#FF00FF" Green Lime Olive Yellow Navy Blue Teal Aqua = = = = = = = = "#008000" "#00FF00" "#808000" "#FFFF00" "#000080" "#0000FF" "#008080" "#00FFFF" A színkódok részletes listája megtalálható a http://www.w3schoolscom/html/html colornamesasp oldalon Megjegyzés: színek megadása HTML kódban elavult, helyette inkább CSS-sel adjuk meg. A CSS-re ugyanezen színkódolás érvényes. Képformátumok A weben használt képeknél figyelembe kell venni, hogy a felhasználó esetlegesen kis sávszélesség mellett fogja oldalunkat nézegetni, így mindenképp valamilyen tömörített képformátumot érdemes választanunk: JPEG veszteséges
true-color3 tömörítési eljárás, alkalmas fotókra, ábrákra; a legkedveltebb formátum. Akkor nem érdemes alkalmaznunk, ha úgymond „minden pixel” fontos, mert hajlamos az élek elmosására, ill. nem támogatja az átlátszóságot 3 valós 8 színű, 24 millió színárnyalatot különböztet meg 1.4 HTML verzió információ PNG Portable Network Graphics, veszteségmentes true-color tömörítő eljárás, amely támogatja az átlátszóságot. Megalkotásakor gondoltak a stream-alapú használatra (ilyen a web is), így a kép letöltése közben lehetőség van arra, hogy a letöltött kép durvább felbontással a teljes letöltés előtt megjelenjen. Az átlátszóságot ún alfa csatornával támogatja (256 szintű áttetszősé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ől 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ő 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ő szabadalom (mellyel a UniSys cég rendelkezik, alkalmanként pénzt kér érte) 2004 nyarán Európában lejárt. URI-k Az URI (Uniform Resource Identifier) részletes leírása megtalálható a [6] rfc dokumentumban. Első közelítésben csak az URLről (Uniform Resource Locator) lesz szó. URL például egy weboldal elérési útja. Amikor a böngészőnk címsorába begépeljük egy weblap nevét, tulajdonképpen URL-jét írjuk le. Amikor egy olyan webes űrlapot töltünk ki, amely ún GET paraméterátadással dolgozik (ld későbbi előadá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őtt kell tartanunk, hogy a böngészőnk alapvetően kétféle elérési út megadást ismert: • abszolút elérési út esetén protokolllal kezdődő URL-t adunk meg. Pl: http://googlecom • relatív elérési út minden más esetben a böngésző 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őkönyvtárra mutat, míg a könyvtárak elválasztására a UNIX rendszerekről ismert / alkalmas 1.33 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ő. 1.4 HTML verzió információ A verzió információ (ún. DTD, ld XML előadás) adja
meg, hogy a HTML dokumentum milyen HTML verziónak felel meg (ld. 111 fejezet): • HTML 4.01 Strict DTD: mindazon tageket és attribútumokat tartalmazza, amelyek nem lettek érvénytelenítve (deprecated) A fejléc alakja az alábbi: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3org/TR/html4/strictdtd"> 9 1 HTML • HTML 4.01 Transitional DTD: Az előbbi 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.w3org/TR/html4/loosedtd"> • HTML 4.01 Frameset DTD: Az előbbi valamint a keretek (frame-ek, ld 186 fejezet) A fejléc alakja az alábbi: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3org/TR/html4/framesetdtd"> 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.61 Dokumentum címe (<TITLE>) Páros tag, megadása kötelező. A dokumentum címét tartalmazza, ez jelenik meg általában a böngészők címsorában. Formázást nem tartalmazhat 1.62 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őrobot) szól Az alábbi attribútumokkal rendelkezik: • name vagy http-equiv: a metainformáció neve • content: a metainformáció értéke Keresőrobotok A <META> tag leggyakoribb felhasználási területe az oldal leírása a keresőrobotok számára a keywords tulajdonsá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ő innen tudja eldönteni, milyen kódolással
jelenítse meg az oldalt (ld még az 132 fejezetet) <meta http-equiv="content-type" content="text/html; charset=iso-8859-2"> Szerző A dokumentum szerzője a author, a copyright információ a copyright tulajdonság beállításával lehetséges. <meta name="author" content="Domonkos Balazs"> <meta name="copyright" content="© Webtanfolyam"> 10 1.7 Törzs (<BODY>) 1.7 Törzs (<BODY>) A dokumentum törzsét jelölő páros tag elhagyható, de célszerű kiírni. Az alábbi attribútumokkal rendelkezik: • onLoad: az oldal teljes betöltődésekor lefutó script4 • onUnload: az oldalról való elnavigálás vagy böngészőablak 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. 132 fejezet) • background: háttérkép (ld. 132 fejezet) Pl.: htmlexample02html A kereteket tartalmazó oldalt ld. 186 fejezetben 1.8 Megjelenítés 1.81 Szöveg Fontos csoportja a címkéknek a blokkdefiniáló tagek. Ezek a következők: • P: bekezdés (paragraph), • H1 . H6: címsor (heading), • PRE: formázatlan szöveg (preformatted), • DIV: blokkszintű csoportosító tag, • ADDRESS: cím, emailcím megadása (nem használják) A szövegmegjelenést módosító tagek csak blokkdefiniáló tageken belül adhatók meg, csupán módosítják a megjelenést. Bekezdés Bekezdések a <P> taggel adhatók meg, melynek zárótagje opcionálisan elhagyható. Címsorok A H1, H2, H3, H4, H5, H6 címsorok (headings) páros tagek növekvő mélységű címsorok
definiálására szolgálnak. Pl.: cssexample07html 4 részletesen 5a ld. JavaScript előadás látogatott linkek listját a böngésző egy idő után elfelejti, ennek pontos idejéről nem tehetünk fel semmit 11 1 HTML Formázatlan szöveg A páros <PRE> tagek segítségével adható meg formázatlan szöveg fix karakterszélességgel és automatikus sortörés nélkül (a forrásdokumentum sortöréseit meghagyva). Kiemelés Logikai kiemelés (böngészőfüggő, általában dőlt ill. félkövér megjelenítés): • EM: kiemelés • STRONG: erős kiemelés • CITE: idézet • DFN: definíció Explicit kiemelés: • B: félkövér (bold) • I: dőlt (italic) • U: aláhúzott (underline, csak Transitional) Fix szélességű (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űszó (acronym) Idézet A
BLOCKQOUTE páros tag hosszú blokk-szintű idézet kijelölésére szolgál, míg a szintén páros Q tag az idézőjel helyes (akár nyelvfüggő, de ez erősen böngészőfüggő) kiírására alkalmas. A cite paraméterrel megadható az idézet forrása. Pl.: htmlexample03html Indexek A SUP és SUB páros tagek szolgálnak az alsó- ill. felsőindex definiálására Általában a betűméretváltás automatikus. Pl.: htmlexample04html Verziókövetés A INS és DEL páros tagek a dokumentumon történt változások megjelölésére alkalmasak. Egyetlen kikötés, hogy nem tartalmazhatnak blokkdefiniáló jelölőket (ld. 181 fejezet) Pl.: htmlexample07html 12 1.8 Megjelenítés 1.82 Lista A listák mindegyike a lista típusának megfelelő tag belsejében elhelyezett listaelemekből épül fel. A listát kijelölő jelölők (UL, OL, DL) páros tagek, míg a listaelemeket megadó jelölő (LI, DT, DD) zárótagje lehagyható. Sorrend nélküli lista UL tag
(unordered list) segítségével definiálható. Sorrendezett lista OL tag (ordered list) segítségével definiálható. Definíciós lista DL tag (definition list) segítségével definiálható. Formázást ld. a 36 fejezetben Pl.: htmlexample08html 1.83 Táblázat 1. ábra Táblázat filozófiája HTML-ben Táblázat definiálása A táblázat definiálása a TABLE páros tag segítségével történik. Attribútumok: • width: táblázat szélessége • border: keret szélessége (border = 0 esetén nincs keret) • cellspacing: a cellák közti távolság 13 1 HTML • cellpadding: a keret, belső vonalak és a tartalom közti távolság A cellspacing és cellpadding tulajdonságok értelmezése a 2. ábrán látható A táblázat HTML-ből történő formázását megadó attribútumokat gyakorlatban elvétve használják, helyette CSS-sel formázzák a táblázatot. Így csak a teljesség kedvéért: • frame: a táblázat keretének mely részei látszanak: –
void: egyik sem, – above: csak a felső, – below: csak az alsó, – hsides: felső é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ő vonalak a táblázatban – none: sehol, – groups: csoportok (THEAD, TFOOT, TBODY,COLGROUP, COL) között, – rows: sorok között, – cols: oszlopok között, – all: mindenhol 2. ábra cellspacing és cellpadding tulajdonság értelmezése Táblázat felirata CAPTION páros tag segítségével. 14 1.8 Megjelenítés Sorok csoportosítása A HTML táblázat sorok szerinti megközelítést használ. Háromféle sorosztály adható meg (ebben a sorrendben): • THEAD: táblázat fejléce • TFOOT: táblázat lábléce • TBODY: táblázat törzse Az előbbiek zárótagje, az utóbbi kezdő és zárótagje elhagyható. Oszlopcsoportok kijelölése A sor-orientált szemlélet ellenére lehetőség van oszlop szerinti
csoportok kijelölésére, az oszlopszélességek és összevonások megadására. Pl: <COLGROUP span="osszevonas" width="szelesseg"> <COL span="osszevonas" width="szelesseg"> A COLGROUP zárótagje opcionális, a COL magányos tag. A width attribútumhoz ld 132 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.: htmlexample09html 1.84 Link A hiperlinkek a HTML hipertext-mivoltát adják, az oldalon belül és az oldalak közti ugrásokat teszik lehetővé. 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űk ez esetben meg vannak különböztetve és nem ütközhetnek CSS idkkal
(ld. 33 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.schbmehu"> Link kulso oldalra</A> <A href="masik.html" target="keret">link a masik oldalra, amely a keret nevu frame-ben fog megnyilni.</A> 15 1 HTML Az utolsó példában látható target argumentum megadja, hogy a link nem feltétlenül abban a keretben (ill. ablakban) nyílik meg, ahol a link található (ld 186 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őframe-ben maga a dokumentum látható. A target attribútum csak Transitional DTD-vel használható Az A achor címke
mindkét értelmezésében szigorúan páros tag. Pl.: htmlexample10html 1.85 Kép Képek beszúrása az IMG magányos taggel történik, a képformátumokról ld. 132 fejezet Attribútumok: • alt: a kép felirata, érdemes megadni • src: a kép elérési útja (ld. 132 fejezet) • heigth: kép magasságának felülbírálása • width: kép szélességének felülbírálása • usemap: kliens oldali térképet használ (értékként #terkep neve alakban kell megadni az imagemap nevét) • ismap: szerver oldali térkép bemenete (a képre kattintva a böngésző elküldi a kattintás koordinátáit) A kép dimenzióit (width és height) mindig érdemes megadni, hogy az oldal letöltése közben ne „ugráljon” a megjelenített tartalom, ugyanis alapértelmezés szerint kis (kb 32x32 pixel) négyzet alakú méretet tételez fel a böngésző. Az imagemapeket a kép egy területét jelölik meg, amelyre hiperlinket definiálhatunk. Használata elavult, a Flash technológia
kiszorította Kliens oldali térkép (imagemap) Szintaxisa: <MAP name="terkep neve"> <AREA alt="felirat" shape="alakzat" coords="koordinatak" href="url" nohref> </MAP> A MAP páros, a AREA magányos tag. Az attribútumok jelentése: • alt: a terület felirata • shape: a terület alakja: – circle: kör – rect: téglalap – poly: poligon • coords az alakzatnak megfelelően adhatók meg az azt leíró koordináták: – circle: esetén x, y, r – rect: esetén x1, y1, x2, y2 16 1.8 Megjelenítés – poly: esetén x1, y1, x2, y2, ., xn, yn • href: az URL ahová a link mutat • nohref: azt adja meg, hogy nem hivatkozunk sehova, nem akarunk ugrani, a térképet csak az script interaktivitás miatt hoztuk létre (iszonyatosan elavult) Pl.: htmlexample11html 1.86 Keret (frame) A keretek segítségével a böngészőablakot több téglalap alakú részre oszthatjuk fel (vízszintesen vagy
függőlegesen akár rekurzívan) és az egyes régiókba különböző HTML dokumentumokat tölthetünk. Az egyes dokumentumok újratöltődésekor azok URL-jének megváltozásakor a keretet definiáló oldal, így a többi keret nem töltődik újra. A FRAMESET páros taggel definiálható keretes felosztás, attribútumok: • rows: vesszővel elválasztva a vízszinten felosztás méretei (ld. 132 fejezet) • cols: vesszővel elválasztva a függőleges felosztás méretei A FRAME magányos taggel pedig a FRAMESET-eken belül megadhatók az egyes keretek. Attribútumai: • name: a frame neve, erre hivatkozhatunk hyperlink megadásakor. Az alábbi neveknek speciális jelentésük van, pseudoframe-eket jelölnek: blank: a böngésző egy új ablakba nyitja meg az oldalt self: a aktuális frame-et jelöli parent: a szülőframe (ennek segítségével tudja egy frame-beli oldal a keretet tartalmazó oldalt elnavigálni). Megegyezik a self-fel, ha nincs szülője az
oldalnak top: az ősframe (a „öröklődés” csúcsán álló keret). Megegyezik a self-fel, ha nincs szülője az oldalnak • noresize: a frame-et nem lehet átméretezni (ha nem adjuk meg, akkor a szomszéd frame-mel határos méretezőléc segítségével a méretarányokat meg lehet változtatni) A FRAMESET törzsén belül NOFRAMES taggel adható meg, milyen tartalom jelenjen meg, ha a böngésző nem támogatja a keretek megjelenítését. Az IFRAME (inline frame) címkével a megjelenített dokumentumban olyan téglalap alakú területet jelölhetünk ki (mint a DIV-ek esetében) , ahová a böngésző egy másik html dokumentumot tölt be. Attribútumai: • src: az oldal forrása • name: a frame neve • width: a frame szélessége • height: a frame magassága Pl.: htmlexample12html 1.87 Stílus Ld. a 3 fejezetet 17 1 HTML 1.88 Csoportosító címkék Az eddig említett tag-ek a HTML történetének régmúltjába nyúlnak vissza, mindegyikük
valamilyen jól definiált szerepet tölt be. A DIV (alapértelmezés szerint blokk-szintű) és a SPAN (alapértelmezés szerint sorbeli, inline) páros címkék nem rendelkeznek előre definiált tartalommal, segítségükkel a dokumentum szerkezete szabadon alakítható és ezen a formázás igény szerint végezhető el (CSS segítségével); ez már az XML felé mutat. Formázás, class, id ld. 33 fejezet 1.9 Interaktivitás Lásd még 1.84 és 185 (imagemapek) fejezeteket! 1.91 Objektum, applet Az OBJECT címke segítségével multimédiás tartalmat6 , az APPLET taggel pedig Java Appletet7 építhetnünk honlapunkba. A http://wwww3org/TR/html401/struct/objectshtml oldalon található referenciában érdemes utánanézni a pontos szintaxisnak. 1.92 Script A SCRIPT címkék tartalmaként és az egyéb tagek on kezdetű ún. eseménykezelő attribútumaiban (pl onClick, onKeyPress, onLoad, . ) szkript-kódot adhatunk meg, amellyel oldalunkat interaktívvá tehetjük. A
script lehet JavaScript ill VBScript (Visual Basic Script – a Microsoft csemetéje) A JavaScript, ahogy a neve is mutatja script-nyelv, amelyet közvetlenül a HTML oldal forrásába ágyazunk és azt a böngésző é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őtt (a HTML 20 és 30 ajánlások idején) nem volt lehetőség lényeges mértékű kliens oldali interaktivitásra. A JavaScriptről ld. bővebben a JavaScript előadást 1.93 űrlap Az űrlap (form) segítségével a felhasználó adatokat küldhet böngészőjéből a szerver felé az ablakkezelő rendszerek megszokott interface-elemeinek segítségével (beviteli mezők, választólista, gomb, stb.) FORM tag A páros FORM tag segítségével adható meg egy űrlap (több űrlap is szerepelhet egyazon oldalon). Legfontosabb attribútumai: • action: az az URL, ahová az űrlap
adatai továbbítódnak. • method: lehet GET ill. POST Az előbbi esetben az URL-ben az utóbbinál a HTTP kérésben továbbítódnak a paraméterek • name: az űrlap neve. JavaScriptből ennek segítségével hivatkozhatunk az űrlapra és annak mezőire (pl. annak ellenőrzé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ő (tehát nem módosító) cselekvés esetén célszerű GET használata. Ilyen például egy fórumoldal lekérése, praktikus, hogy a felhasználó eltárolhatja az oldal címét, a böngészőknél pedig gond nélkül használhatjuk az előre és vissza navigáló gombokat. POST metódust akkor célszerű használni, ha a megadott cím valamilyen módosító (létrehozó, törlő) feladatot lát el – és természetesen bejelentkezés esetén is, csúnya lenne, ha az oldal letöltésekor a
címsorban 6 leggyakrabban 7 ld. 18 Flash animációt bővebben a JavaScript előadást 1.9 Interaktivitás olvashatnánk a jelszó url encoded változatát. A böngészők általában figyelmeztetnek ilyen oldalakra való vissza ill. előrenavigálás során űrlapmezők A FORM tag törzsében adhatjuk meg az űrlaphoz tartozó mezőket (egysoros/többsoros szövegbeviteli mező, választólista, file-feltöltése, . ) A mezőket definiáló tagek: • INPUT • SELECT • TEXTAREA A mezők közös attribútumai: • name: az űrlapmező neve (a szerveroldalon ezzel hivatkozhatunk a mezőre, ld. PHP előadás) • disabled: az űrlapmezőt a felhasználó nem szerkesztheti (kiszürkített) INPUT tag A magányos FORM tag gyerekcímkéjeiként megadhatjuk az űrlaphoz tartozó beviteli mezőket. Attribútumai: • type: a beviteli mező típusa: – text: szöveges – password: jelszó – checkbox: jelölőnégyzet – radio: választógomb – file:
file feltöltő – hidden: rejtett – submit: űrlap elküldése gomb – image: grafikus „űrlap elküldése gomb” – reset: űrlap alaphelyzetbe állítása gomb – button: egyéb gomb (ld. JavaScript előadás) • size: a megjelenített mező mérete pixelben (kivéve az input és password mezőket, ott a karakterek száma) • maxlength: a text és password típusú mezőbe maximálisan begépelhető karakterek száma (figyelembe kell venni, hogy ez csak kliens oldali korlát, szerver oldalon ellenőrizni kell, nem küldött-e a felhasználó pl. telnet program segítségével hosszabb adatot) • value: a radio és checkbox kivételével itt adhatunk meg kezdőértéket az űrlapmezőnek • checked: radio és checkbox esetén az adott mező kiválasztva ill. beikszelve jelenik meg • src: grafikus „űrlap elküldése gomb”-hoz tartozó kép URL-je 19 1 HTML BUTTON tag A BUTTON páros címke lényegében a submit, reset, button típusú INPUT
címkével egyenértékű azonban annál szabadabb tartalom jeleníthető meg a gomb felületén. Attribútumai hasonlóak: • name • value • type: submit, reset vagy button Az egyetlen megkötés, hogy nem tartalmazhat olyan képet, amely imagemapet tartalmaz. SELECT, OPTGROUP, OPTION tagek Választólisták megadására alkalmas címkék. A listát a SELECT páros tag jelöli ki Attribútumai: • size: hány listaelem látszódjon egyidejűleg (1 esetén ún. combobox) • multiple: több elemet is kijelölhetünk A listán belül csoportokat alakíthatunk ki a OPTGROUP taggel. Attribútumai: • label: a csoport neve • disabled: a csoportból nem választhatunk elemet (de jelezni akarjuk, hogy vannak ilyen elemek). A listaelemeket a OPTION taggel adhatjuk meg (a zárótag elhagyható). Attribútumok: • selected: a listaelem ki van választva • value: ezt az értéket küldi a böngésző a tag szövege helyett • disabled: a listaelemet nem választhatjuk ki
TEXTAREA tag Többsoros szövegbeviteli mező megadására alkalmas páros tag. Attribútumai: • rows: megjelenített sorok száma • cols: megjelenített oszlopok száma • readonly: a mező tartalma csak olvasható A szövegmező alapértelmezett értékét a nyitó- és zárótag közt kell megadni. A TEXTAREA a HTML egyéb elemeitől eltérően kezeli a whitespaceket. A betűközöket, tabulátorokat és újsor karaktereket megőrzi Ez alól a nyitó tagek követő 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őbbi karakter szerepel a használt kódlapon, az útóbbi nem Ez szerepet kap az űrlap elküldésekor, ugyanis a böngésző így küldi tovább: cucc=%B0-%26%23169%3B ami az URL dekódolása után: cucc=◦ -© Az űrlapon begépelt
entitások szintén feloldódnak, ugyanúgy, mintha azokat a HTML forrásába írtuk volna be. Tehát mind a &, mind pedig a & megadása esetén a & karaktert továbbítja a böngésző Ha a kódlapon nem szereplő karaktert írunk be (pl. vágólapról), akkor reménykedhetünk benne, hogy a böngésző UNICODE-entitásként fogja elküldeni. 20 1.10 Weboldalak kiszolgálása LABEL tag A űrlapmezők felirata jelölhető ki ezzel a páros taggel. Attribútuma: • for: azon elem id attribútuma, amelyhez a feliratot rendeljük. Ld még 335 fejezet űrlap tagolása A FIELDSET páros taggel a FORM űrlapon belül kijelölhetünk egy blokkot, amelyet a LEGEND páros taggel feliratozunk (amennyiben FIELDSET-et használunk, annak első gyerektagjeként LEGEND-et kell megadnunk) (például személyes adatok megadása, termékverzió kiválasztása, . ) A FIELDSET általában elég kulturáltan jelenik meg a böngészőkben, de ennek ellenére ritkán
használják, inkább CSS-sel érnek el hasonló hatást a desingerek, mert ott egzaktabban le lehet írni a megjelenést. Ha egyszerű oldalt írunk egyszerű célra, kevés formázással, alkalmazzuk nyugodtan. űrlapelemek fókuszba hozása Az ún. fókuszban (ld JavaScript előadás) lévő űrlapelem ki van választva adatbevitel ill módosítása céljából. Egyszerre legfeljebb egy elem lehet fókuszban Az űrlapelemeken túl a A, AREA, OBJECT címkékhez tartozó objektumok kaphatják meg a fókuszt. Az ilyen elemek közt az egérrel (vagy más kijelölésre alkalmas eszközzel) történő kijelölésen túl általában billentyűzettel is váltogathatunk. A sorrend, az ún tabindex alapértelmezés szerint az egyes beviteli mezőkhöz tartozó tagek megjelenésének sorrendje a HTML sorráskódban. Ez a tabindex attribútum segítségével definiálhatjuk felül, melynek értéke 0 és 32767 között adható meg. A tabindexen túl időnként hasznos, ha egyes
űrlapelemeket azonnal elérünk billentyűzetről. Ez a accesskey attribútum beállításával történik vagy az űrlapelemen vagy annak feliratán (LABEL). Pl.: htmlexample13html 1.10 Weboldalak kiszolgálása A fejezet csak rövid vázlat, betekintés. Ld részletesebben a későbbi előadásokon A weboldalakat valamilyen webszerver (ilyen például a legelterjedtebb Apache) szolgálja ki. A felhasználó kérésére a böngésző 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ően (vázlat) jelent meg különböző szerver oldali interaktivitást megvalósító SSI, CGI és a magasabb szintű 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ű alkalmazás (webszerver, adatbázis szerver(, alkalmazás szerver)) tekinthető 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ő jogosultság beállítására. Általában a webszervert futtató felhasználó számunkra others-nek minősül így: • file-okra: chmod o+r file paranccsal olvasójogot, • könyvtárakra: chmod o+x konyvtar paranccsal elérési, ill. chmod o+r konyvtar
paranccsal listázási jogot kell adnunk A webszerver által kiszolgált felhasználói könyvtárunk a home-könyvtárunk vagy (gyakrabban) a home-könyvtárunkban található public html könyvtár. 21 1 HTML 1.11 Validálás A validálás művelete a HTML dokumentum helyességének ellenőrzése (hasonló validátorok léteznek XHTML-hez és CSS-hez). A W3C8 validátora http://validator.w3org/ címen elérhető Kényelmesen elérhető a Mozilla FireFox böngészőből a Webdeveloper extension telepítése után a CTRL+SHIFT+V billentyűkombinációval 8 World 22 Wide Web Consortium, ld. http://w3corg 2. XHTML Az XHTML a jelenlegi és jövőbeni 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űködjenek az XML alapú felhasználói alkalmazásokkal. Ez a fejezet (a tantervből 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ől röviden Az XML (Extensible Markup Language) a Word Wide Web Consortium (W3C) terméke. A HTMLhez hasonlóan az SGML (Structured Generalized Markup Language)-ből származtatott jelölőnyelv Az alapvető különbség az XML és a HTML között, hogy az XML-ben mi magunk definiálhatunk tageket. Az XML hamar kivívta létjogosultságát, mivel az SGML nyelv bonyolultsága és a HTML nyelv nehézsége közti rést foglalja el. Az XML számos előnnyel rendelkezik, amelyet 10 pontban foglalt össze az azt kifejlesztő csapat: • könnyű használhatóság a gyors elterjedés érdekében • széleskörű felhasználhatóság • kompatibilisnek kell lennie az SGML-el, s így az SGML-t értelmező szoftverek könnyen átalakíthatók XML értelmezésre is • egyszerű programírás az XML dokumentumok
feldolgozására, így a nagyon gyorsan elterjed a programozók körében • az XML opcionális lehetőségeinek minimálisra csökkentése, amivel elkerülhetők az egyes feldolgozó programok kompatibilitási hibái • az XML forrásnak világosnak és olvashatónak kell lenni • XML szabványt rövid idő alatt kell kifejleszteni, így elérhető, hogy egyetlen nyelv terjedjen el, ellenben a sok kis szoftverfejlesztő 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ű elkészíthetőség • a tömörség elhanyagolható, a hangsúly az olvashatóságon legyen Ld. bővebben az XML előadá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ő dokumentumtípus az XHTML családban Ez a három HTML
4 dokumentumtípus (ld 14) megújítása XML 10 alkalmazásként Ez a dokumentumtípus azon dokumentumok nyelvéül lett szánva, amelyek olvashatóak XML-kompatibilis, és néhány egyszerű irányelv betartásával HTML 4 kompatibilis böngészővel is. Az XHTML 1.1 az 10-á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őforrást igényel, így ez beágyazható például mobiltelefonokba. 23 2 XHTML 2.3 XML nyelvi megkötések Az XHTML dokumentum egyben XML dokumentum is egyben, a HTML dokumentumhoz hasonlóan tag-ekből é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űsí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űközt hagyni az utolsó attribűtum és a perjel közt, hogy minden böngésző alatt hibátlanul működjön az oldalunk (egyes HTML 4-ről XHTML-re tuningolt böngészők 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űérzékenyek. Egy attribútumnév csak egyszer szerepelhet egy adott tagben Érvényes névnek (tagnév, névtér neve, attribútumnév) nevezünk minden olyan karaktersorozatot, amely • betűvel vagy
aláhúzással kezdődik • ezt követően tetszőleges számú – számot – betűt – pontot, aláhúzást, kötőjelet tartalmaz. Ez alól az xml karaktersorozat bármilyen kis ill nagybetűs 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őjelbe kell raknunk. Jelentés nélküli karakternek nevezünk minden olyan karaktert, amely nem befolyásolja az XML dokumentum tartalmát, ezeket az XML értelmezője figyelmen kívül hagyja, pusztán az áttekinthetőséget növeli. Ilyen karakter a betűkö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 241 fejezet) 2. A dokumentum gyökérelemének az xmlns attribútum használatával jelölnie kell az XHTML névtereket (Megjegyzés: az XHTML-ben más névtér (pl MathML) megadásával más
XML alapú dokumentum ágyazható be XHTML-be valamint egyéb XML-alapú dokumentumba beágyazható XHTML a névtér megfelelő megadásával). A gyökér elem a következőképp nézhet ki: <html xmlns="http://www.w3org/1999/xhtml" xml:lang="en" lang="en"> 24 2.5 Különbségek a HTML 4-hez képest és kompatibilitás 2.41 Dokumentumtípusok A dokumentumban - gyökér-elemet megelőzően - DOCTYPE deklarációt kell elhelyezni: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3org/TR/xhtml1/DTD/xhtml1-strictdtd"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3org/TR/xhtml1/DTD/xhtml1-transitionaldtd"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3org/TR/xhtml1/DTD/xhtml1-framesetdtd"> Ezek a megfelelő HTML 4.01 dokumentumtípusok XHTML megfelelői 2.42 XML fejléc XML fejléc
megléte nem kötelező minden XML dokumentumban; viszont az XHTML dokumentumok szerzőinek erősen 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ű protokoll nem határoz meg kódolási módot. A fejléc a dokumentum első 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ű Strict XHTML 1.0 dokumentum: <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3org/TR/xhtml1/DTD/xhtml1-strictdtd"> <html xmlns="http://www.w3org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>Az elsH o XHTML dokumentumom</title>
</head> <body> <p>Hello XHTML!</p> </body> </html> 2.51 Jólformáltság A dokumentumoknak jól formáltnak kell lenniük. Minden attribútum értéket idézőjelek 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.52 Tagnevek Elem és attribútum nevek kisbetűvel írandók. 25 2 XHTML 2.53 Whitespace-kezelés az attribútumok értékeiben A böngészőknek az attribútumok értelmezésénél az alábbi szerint kell eljárniuk: • Le kell vágniuk a bevezető és lezáró whitespace karaktereket. • Egy, vagy több whitespace karakter sorozatát (beleértve a sortörést is) egyszerű szóközzé kell konvertálniuk. 2.54 Script és Style elemek Az XHTML-ben a script és style
elemek deklarációjuk szerint #PCDATA tartalmúak (ld. xml előadás) Ennek eredményeképpen a < és & karakterek jelölő kezdeteként vannak értelmezve, egyedeiket (<, &) az XML értelmezők egyedhivatkozásként ismerik fel. Egy script, vagy stíluselem tartalmának CDATA jelölésű részbe csomagolásával elkerülhető ezen egyedek kibontása. <script type="text/javascript"> <![CDATA[ . ]]> </script> Alternatív megoldásként külső script, vagy stíluslap használható. Megjegyzés: ez utóbbi egyelőre a legjobb megoldás, mivel a CDATA-ában megadott szrkipteket minden általam tesztelt böngésző figyelmen kívül hagyta. Pl.: xhtmlexample03html, xhtmlexample03 cdatahtml 2.55 SGML kizárások Az SGML megadja a lehetőséget a DTD írójának, hogy meghatározott elemek használatát kizárja valamely elemből. Ilyen tiltási lehetőségek az XML-ben nem lehetségesek Példaként: a HTML 4 Strict DTD megtiltja az
<a> elemek bármilyen mértékű egymásba ágyazását. Ilyen tiltások az XML-ben nem írhatók le. Mindamellett, hogy a DTD-ben ilyen tiltások nem szerepelhetnek, bizonyos elemeket valóban nem lehet egymásba ágyazni A következő elemekre vonatkoznak egymásba ágyazási tiltások. Ezek a tiltások a beágyazás minden szintjére vonatkoznak, vagyis minden leszármazott elemre. • a: nem tartalmazhat más a elemeket. • pre: nem tartalmazhatja az img, object, big, small, sub, vagy sup elemeket. • button: nem tartalmazhatja az input, select, textarea, label, button, form, fieldset vagy iframe elemeket. • label: nem tartalmazhat más label elemet. • form: nem tartalmazhat más form elemet. 2.56 Elemek id és name attribútumokkal A HTML 4 definiálta az a, applet, form, frame, iframe, img és map elemkhez használható name atttribútumot. Szintén a HTML 4 vezette be az id attribútumot Mindkét attribútum a dokumentumon belüli navigációhoz lett tervezve,
azonosítóként Az XML-ben a részazonosító típusa ID és elemenként egy ID típusú attribútum használható. Ezért az XHTML 1.0 -ban az id attribútum lett ID típusúként definiálva Tehát annak érdekében, hogy az XHTML 1.0 dokumentum valóban jól strukturált XML dokumentum legyen, az XHTML 10 dokumentumokban az id attribútumot kell használni azonosítóként a fent felsorolt elem esetében (mivel néhány böngésző 26 2.6 Kapcsolatok más szabványokkal nem támogatja még a id attribútum ilyen használatát, XHTML 1.0 esetén érdemes mindkét attribútumot megadni). Az XHTML 1.0-ben a name attribútum használata formálisan „nem javasolt” és az XHTML 11 verzióban meg is lett szüntetve 2.57 Attribútumok előre definiált értékkészlettel Mind a HTML 4, mind az XHTML rendelkezik néhány olyan attribútummal, amelyek értékkészlete előre definiált és korlátozott (pl.: az input címek type attribútuma) Az SGML és az XML ezeket felsorolt
attribútumoknak nevezi. A HTML 4 -ben ezen értékek kiértékelése nem érzékeny a kis- és nagybetűhasználatra, így a TEXT érték megegyezik a text értékkel Az XML -ben viszont ezen attribútumok kiértékelése érzékeny a kis- és nagybetűhasználatra, és az XHTML 1 -ben minden ilyen attribútum kisbetűsként lett definiálva. 2.58 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ő karakterhivatkozásokat. Az SGML-ben ezek a hivatkozások vagy &#Xnn; vagy &#xnn; módon használatosak. Az XML dokumentumokban a kisbetűs verziót kell használni 2.59 Címke nyelvének megadása Egy tag nyelvének megadásakor mind a lang, mind az xml:lang attribútumok használandók. Az xml:lang attribútum értéke elsőbbséget élvez. 2.6 Kapcsolatok más szabványokkal 2.61 XML Ld. 23 és 24 fejezeteket 2.62 DOM A Document Object Model Level 1 ajánlás (ld. JavaScript előadá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űvel, míg az XML-ében olyan betűvel kell visszaadni, ahogyan azok definiálva lettek. Az XHTML 10-ban, az elemek és attribútumok nevét kisbetűvel kell írni, tehát kisbetűvel szerepelnek az objektummodellben. Ez a nyilvánvaló különbség két módon érhető el: • Azok a böngészők, amelyek text/html Internet médiatípusként9 megadott XHTML dokumentumot elemeznek, a DOM-on keresztül használhatják a HTML DOM-ot, és bízhatnak abban, hogy a tag- és attribútumneveket a csatlakozófelülettől nagybetűsen kapják meg. • Azok a böngészők, 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űsen térnek vissza Ezenkívül, előfordulhat, hogy néhány XHTML tag
nem jelenik meg az objektumfán, mivel azok a tartalommodellben opcionálisan szerepelnek (pl. a tbody címke a table tagen belül) Ez azért fordul elő, mert a HTML 4-ben engedélyezve volt néhány elem minimalizált használata, vagyis hiányozhatott kezdő és záró címkéje. Ez az XML-ben nem lehetséges, az XHTML ezeket az elemeket opcionálissá tette. A felhasználói alkalmazások írásánál erre fel kell készülni [16] 9 MIME Type, itt nem részletezem, ld. http://wwww3org/TR/xhtml-media-types/ 27 2 XHTML 2.63 CSS A Cascading Style Sheets 2 ajánlás (ld. 3 fejezet) írja le azokat a stílustulajdonságokat, amelyek alkalmazhatók a HTML vagy XML dokumentumok dokumentumfáján A dokumentumok elemzéseinek különbségei különböző vizuális (és hang-) hatásokat eredményeznek a használt szelektoroktól függően A következő javaslatokat érdemes betartani annak érdekében, hogy a dokumentum módosítás nélkül megfeleljen a fenti kívánalmaknak:
1. Az XHTML dokumentumok CSS stíluslapjaiban a tag- és attribútumneveket kisbetűvel kell írni 2. A táblázatokban a tbody elem jelenlétét a HTML böngészők kikövetkeztetik, de az XML felhasználói alkalmazások értelmezői ezt nem teszik meg Ezért, ha CSS szelektor hivatkozik rá, a tbody elemet mindig explicit módon deklarálni kell. A HTML 4-ben és az XHTML-ben a style tag dokumentumon belüli stílusszabályok előírására használható. Az XML-ben stílusszabályok definiálására XML stíluslap deklaráció használandó Annak érdekében, hogy ezzel a konvencióval kompatibilis legyen, a style elemeknek saját id attribútummal megadott részazonosítóval kell rendelkezniük, és az XML stíluslap deklarációnak erre az azonosítóra kell hivatkoznia. Pl.: xhtmlexample02html Ld. még 254 fejezet 2.7 XHTML 1.1 A 2001-ben definiált XHTML 1.1 eltávolodott a HTML 4-től és az XHTML 10-tól A legfeltűnőbb eltérés, hogy számos érvénytelenített
funkciót kivettek a szabványból a strukturális funkcionalitás jegyében Az eltérése: 1. Minden tagnél eltűnt a lang attribútum a xml:lang javára 2. Az a és map tageknél a name attribútum eltűnt a id attribútum javára 3. ruby néven egy betűsorhoz magyarázó szöveget rendelhetünk (főleg Kelet-Ázsiában használják majd, még nem támogatják a böngészők) , ld. 3 ábra) 3. ábra Ruby komment 28 3. CSS 3.1 Története, létrejöttének okai 3.11 Története 1996 Cascading Style Sheets, level 1 1998 Cascading Style Sheets, level 2 1999 Cascading Style Sheets, level 1 revised 3.12 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őre bízták. A böngészők 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ől 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ő alatt (jó lenne, mi? :-)) • hierarchikusan több stíluslap adható meg • egy helyen tárolt a stílus, egyszerre változtatható meg • bővebb formázási lehetősé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.21 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ője. A deklaráció során elméletileg nem kell ismernünk a forrástartalmat, csupán annak szerkezetét (dokumentumfa) A gyakorlatban általában mindig konkrét tartalomhoz tervezünk stíluslapokat, ez a designer feladata. {TULAJDONSAG: ERTEK} {TULAJDONSAG1: ERTEK1; TULAJDONSAG2: ERTEK2; . TULAJDONSAGN: ERTEKN}
Pl.: {font-family: Arial; color:red} 3.22 Stílus specifikáció A stílus specifikáció során adott stíluslapot alkalmazunk a konkrét tartalomra. A specifikáció során elvileg nem kell ismernünk az alkalmazandó stíluslap szerkezetét, amely gyakran nem is létezik még ekkor. De érdemes szem előtt 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őjét. A stílus specifikáció egyike a HTML, PHP, stb. coder feladatainak A stíluslapok többféleképpen lehetővé teszik a stílusinformációk definiálását. A stílus magában egy adott HTML tagben is definiálható a dokumentumon belül, az egész dokumentumra vonatkozólag a HTML 29 3 CSS oldal <head> tagjén belül vagy egy külső CSS fájlban. Sőt akár több külső 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ő stílusok prioritása az alábbiak szerint növekszik: 1. Böngésző default stílusa 2. Felhasználó által definiált stílus 3. Külső stíluslap (Linking Style Sheet) (külső fájlban) 4. Belső 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ő 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.: cssexample01html Belső stíluslap (Embedding Style Sheet) A HTML fejlécében kell elhelyezni: . <HEAD> <STYLE TYPE="text/css"> SZELEKTOR1 {.} SZELEKTOR2 {.} . SZELEKTORn {.} </STYLE> </HEAD> . Pl.: cssexample02html Sorközi stílus (Inline Styles) Bármely tagben elhelyezhető:
. <TAG STYLE="TULAJDONSAG: ERTEK"> . </TAG> . Pl.: cssexample03html 30 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.: cssexample04html 3.3 Szelektorok A szelektorok tulajdonképpen mintaillesztési szabályok, amelyekkel a forrásdokumentumból választhatunk bizonyos tageket, amelyek stílusát felül akarjuk definiálni, megjelenítésüket meg akarjuk határozni. A { és } között adjuk meg a beállítandó tulajdonságokat. Pl TD A {font-family: Arial; color:red} 3.31 Univerzális szelektor * {.} A stílus minden tagre vontakozik a dokumentumon belül. 3.32 Típus szelektor SZELEKTOR {.} A SZELEKTOR egy HTML tag, amelynek stílusát definiálni akarjuk. 3.33 Szelektorok kontextusa TAG1, TAG2, ., TAGn {} Egyszerre több tagnek állíthatunk be azonos tulajdonságokat.
TAG1 TAG2 {.} Azon TAG2 tagek tulajdonságát állítjuk be, amelyek TAG1 típusú tagek leszármazottja. TAG1 > TAG2 {.} Azon TAG2 tagek tulajdonságát állítjuk be, amelyek TAG1 típusú tagek gyermekei (közvetlen leszármazottai). TAG1 + TAG2 {.} Azon TAG2 tagek tulajdonságát állítjuk be, amelyeket közvetlenül megelőz egy TAG1 típusú tag. Pl.: cssexample05html 31 3 CSS 3.34 Szelektor osztályok (Class Selector) Szelektor osztályok definiálásával azonos tagek különböző változatait hozhatjuk létre. Ez a HTML DTD-jének tetszőleges bővítésével egyenértékű művelet. Tag-specifikus: TAG.name1 {} TAG.name2 {} . TAG.nameN } Minden tagre: .name1 {} .name2 {} . .nameN {} Az osztálynév nagybetű-érzékeny. Hivatkozás HTML-ben: <TAG CLASS="namei"> Pl.: cssexample06html, cssexample07html 3.35 ID szelektor Az ID szelektorral egyedi azonosítót (id-t) rendelhetünk egy taghez. #id1 {.} #id2 {.} . #idN {.} Az ID
nagybetű-érzékeny. Hivatkozás HTML-ben: <TAG1 ID="idi"> Pl.: cssexample08html Az ID szelektor prioritása nagyobb, mint a class-é, így ha mindkettő 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.36 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ő alapján tesznek lehetővé tagelérést. A pszeudo-osztályok és osztályok együttes megadásának szintaxisa: TAG.class:pseudoclass {} 32 3.3 Szelektorok Első gyerekelem TAG:first-child {.} Akkor állít be a TAG-re tulajdonságot, ha az első gyerekelemként szerepel. Az alábbi példában az olyan cikkek első 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ő sor és betű Első sor: TAG:first-line {.} Első betű: TAG:first-letter {.} Link A:link {.} A:visited {.} Dinamikus pszeudo-osztályok TAG:hover {.} TAG:active {.} TAG:focus {.} Interaktív média esetén támogatott. Sorrendben: a felhasználó elmozgatja a pointing eszközt (tipikusan egeret) az adott elem felett, kiválasztja az elemet, ill. az elem fókuszt kap Nyelv TAG:lang(C) {.} vagy 33 3 CSS :lang(C) {.} A böngésző á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ő szöveggenerálásra használják 3.4 Betűtípus 3.41 Betűtípus család (font family) {font-family: CSALAD} {font-family: CSALAD1, CSALAD2, ., GEN CSALAD} A CSALAD lehet Helvetica, Arial,
stb; a GENERIKUS CSALAD serif, sans-serif, cursive, fantasy, monospace lehet. A betűközt tartalmazó betűtípus neveket idézőjelbe kell tenni (pl. "Comic Sans") A generikus betűtípust utolsó lehetőségként kell megadni 3.42 Betűméret {font-size: MERET} A MERET lehet • explicit nagyság: px, pt, in, cm, %, amelyek pixel, pont, inch, centiméter, százalék • viszonylagos méret: xx-small, x-small, small, medium, large, x-large, xx-large • relatív méret: smaller vagy larger A pixelben megadott méret a képernyőt, míg a pontban megadott (gondoljunk a 12-es betűméret fogalmára a szövegszerkesztésben) a nyomtatást veszi alapul a betű méretezésekor. Az előbbi mind PC-n, mind Mac-en azonos képet add, az utóbbi Mac-en kisebb méretben jelenhet meg. 3.43 Betűvastagság (font weight) {font-weight: VASTAGSAG} A VASTAGSAG lehet: • explicit bináris: normal vagy bold • relatív bináris: bolder vagy lighter 34 3.5 Szöveg 3.44
Betűdőltség (font style) {font-style: DOLTSEG} A DOLTSEG lehet: • normal • italic 3.45 Szöveg aláhúzás (text decoration) {text-decoration: DEKORACIO} A DEKORACIO lehet: • none • underline • line-through • blink ez csak a Netscape családnál működik 3.46 Kisbetű-nagybetű átalakítás {text-transform: TRANSZFORMACIO} A TRANSZFORMACIO lehet: • none • capitalize • uppercase • lowercase 3.47 Betűtípus megadás egyszerre {font: font-style font-variant font-weight font-size/line-height font-family} 3.5 Szöveg 3.51 Sormagasság {line-height: MAGASSAG} A MAGASSAG lehet: • normal • explicit méret: px, pt, in, cm, % 35 3 CSS 3.52 Vízszintes igazítás {text-align: IGAZITAS} Az IGAZITAS lehet: • left, center vagy right • justify 3.53 Függőleges igazítás {vertical-align: IGAZITAS} Az IGAZITAS lehet: • baseline, top, middle, bottom, text-top vagy text-bottom (ld. 4 ábra) • sub vagy super 4. ábra Függőleges
igazítás 36 3.6 Lista 3.54 Szöveg körbefuttatása A szöveg mehet az elem mellé: {float: IGAZITAS} Az IGAZITAS lehet: • left • right • none Például szövegbe ágyazott képeknél használatos. A szöveg az elem alá menjen: {clear: IGAZITAS} Az IGAZITAS lehet: • left • right • both • none 3.55 Bekezdés {text-indent: BEHUZAS} Az BEHÚZÁS lehet px, pt, in, cm, em vagy %. 3.6 Lista 3.61 Lista típusa {list-style-type: TIPUS} A TIPUS lehet: • nem sorrendezett lista: disk, circle, square, decimal vagy none • sorrendezett lista: lower-roman, upper-roman, lower-alpha vagy upper-alpha {list-style-image: KEP} A KEP lehet: • URL: url(kepfile) • sorrendezetlen lista: none 37 3 CSS 3.62 Lista igazítása {list-style-position: IGAZITAS} Az IGAZITAS lehet inside vagy outside. Az előbbinél a lista második sora a jel alá kerül, az utóbbinál a második sor az első alá. 3.63 Lista meghatározása egyszerre {list-style: type position url}
3.7 Szín és háttér 3.71 Előtérszín {color: SZIN} A SZIN lehet: • színkód: #RRGGBB • szín neve 3.72 Háttérszín {background-color: SZIN} A SZIN lehet: • színkód: #RRGGBB • szín neve • átlátszó: transparent 3.73 Háttérkép Háttérkép megadása: {background-image: KEP} A KEP url(filenev) alakú. Háttérkép ismétlése: {background-repeat: ISMETLES} Az ISMETLES lehet: • repeat • no-repeat • repeat-x • repeat-y 38 3.8 Dobozolás Háttérkép rögzítése: {background-attachment: ROGZITES} A ROGZITES lehet: • scroll • fixed Háttérkép helye: {background-position: VIZSZINTES FUGGOLEGES} {background-position-x: VIZSZINTES} {background-position-y: FUGGOLEGES} A VIZSZINTES és FUGGOLEGES pozíció lehet: • igazítás: left, center, right • explicit méret: px, pt, in, cm, em vagy % Háttér meghatározása egyszerre: {background: url() color repeat attachment position} 3.8 Dobozolás 3.81 Doboz-orientált modell Ld. az 5
ábrán 5. ábra Doboz modell felépítése 3.82 Margó (margin) {margin-left: MARGO} {margin-right: MARGO} {margin-top: MARGO} {margin-bottom: MARGO} 39 3 CSS {margin: MARGO} /* minden margo / {margin: MARGO MARGO} /* top&bottom, right&left / {margin: MARGO MARGO MARGO} /* top, left&right, bottom / {margin: MARGO MARGO MARGO MARGO} /* top, right, bottom, left / A MARGO lehet px, pt, in, cm, em vagy %. 3.83 Szegély (border) A szegély stílusa: {border-style: STILUS} {border-top-style: STILUS} {border-right-style: STILUS} {border-bottom-style: STILUS} {border-left-style: STILUS} A STILUS lehet none, dotted, dashed, solid, double, groove, ridge, inset vagy outset (ld. 6 ábra) 6. ábra CSS-ben használt szegélystílusok A szegély szélessége: {border-width: SZELESSEG} {border-top-width: SZELESSEG} {border-right-width: SZELESSEG} {border-bottom-width: SZELESSEG} {border-left-width: SZELESSEG} A SZELESSEG lehet: • relatív: thin, medium vagy thick •
explicit méret: px, pt, in, cm vagy em 40 3.8 Dobozolás A szegély színe: {border-color: SZIN} {border-top-color: SZIN} {border-right-color: SZIN} {border-bottom-color: SZIN} {border-left-color: SZIN} A SZIN lehet: • színkód: #RRGGBB • szín neve Szegély megadása egyszerre: {border: width style color} {border-top: width style color} {border-right: width style color} {border-bottom: width style color} {border-left: width style color} 3.84 Ráhagyás (Padding) {padding-left: RAHAGYAS} {padding-right: RAHAGYAS} {padding-top: RAHAGYAS} {padding-bottom: RAHAGYAS} {padding: RAHAGYAS} /* mindenhol / {padding: RAHAGYAS RAHAGYAS} /* top&bottom, right&left / {padding: RAHAGYAS RAHAGYAS RAHAGYAS} /* top, left&right, bottom / {padding: RAHAGYAS RAHAGYAS RAHAGYAS RAHAGYAS} /* top, right, bottom, left / A RAHAGYAS lehet px, pt, in, cm vagy em. 3.85 Tartalom méretei (content) {width: MERET} {height: MERET} A MERET lehet px, pt, in, cm, em, % vagy auto. (Hogy N6
alatt is jól működjön, be kell állítani az overflow tulajdonságot. IE3 és N4 alatt még nem működött) 3.86 Túlfutás (overflow) {overflow: TIPUS} A TIPUS lehet • visible: a megadott méretből(width, height) kilógó részek látszanak, átlóghatnak az oldal többi részére 41 3 CSS • hidden: a kilógó részek nem látszanak • scroll: a dobozon gördítősávok jelennek meg, nincs átlógás • auto: csak akkor jelenik meg gördítősáv, ha szükséges 3.9 Táblázat A táblázat formázása során az 1. ábrán szereplő felépítést kell figyelembe venni, ez érvényes CSS-re is 3.91 Szegély Mint a dobozoknál. 3.10 Pozíció és vizuális effektusok 3.101 Doboz pozicionálás {position: POZICIO} A POZICIO lehet • static • relative • absolute {left: TAVOLSAG} {top: TAVOLSAG} {right: TAVOLSAG} {bottom: TAVOLSAG} A TAVOLSAG lehet px, pt, in, cm, em, % vagy auto. (IE3 alatt teljesen hiányzott, N4 és IE4 alatt nem volt még a
right.) Relatív pozícionálás példa: cssexample09.html Abszolút pozícionálás példa: cssexample10.html 3.102 Z-Index Az egyes elemek z-irányú (a monitorból kifelé mutató tengely) pozícióját adja meg. Tehát a nagyobb z-indexű elem elfedik a kisebb értékkel rendelkezőket. Ha explicit nem adjuk meg, a HTML forrásában megadásuk sorrendjében kapnak indexet. {z-index: INDEX} Az INDEX lehet: • egész szám • auto 42 3.11 Médiatípusok 3.103 Vágás {clip: VAGAS} A VAGAS lehet: • rect(TAVOLSAG TAVOLSAG TAVOLSAG TAVOLSAG) (top right bottom left sorrendben) • auto A TÁVOLSÁG lehet px, pt, in, cm vagy em. 3.104 Láthatóság {visibility: LATHATOSAG} A LATHATOSAG lehet: • visible • hidden 3.105 Megjelenítés {display: MOD} A MOD lehet: • block • inline • list-item (csak IE6 és N6-ban, IE3 és N4 alatt még nem működött.) Pl.: cssexample11html 3.11 Médiatípusok A stíluslapok egyik legfontosabb és legkedvezőbb
tulajdonsága, hogy a megjelenítendő tartalom formázása eltérő lehet különböző médiákon: képenyőn, nyomtatásban, beszédszintetizátoron vagy braille eszközön (a mai böngészők az első két médiát támogatják). A média megadás többféle módon lehetséges: • @media parancs segítségével @media print { /* style sheet for print goes here / } • @import parancs paramétereként @import url("print.css") print; • HTML fejlécében 43 3 CSS <LINK rel="stylesheet" type="text/css" media="print, screen" href="foo.css"> A gyakorlatban használt médiatípusok: • all minden megjelenítőre • screen képernyőn való megjelenítésre • print nyomtatásra 3.12 Felhasználói interface A felhasználói interface stíluselemek interaktív médiák esetén alkalmazhatók. 3.121 Egérkurzor TAG { cursor : cursor1, cursor2, . } ahol a cursori az alábbi értékeket veheti fel:
url("valami.cur"), auto, crosshair, default, pointer, move, e-resize, ne-resize, nw-resize, n-resize, se-resize, sw-resize, s-resize, w-resize, text, wait, help Az url nem minden (csak például IE6+) böngésző által támogatott. 3.122 Asztali színek A böngésző asztali színbeállításai konstans formájában elérhetők. ActiveBorder Aktív ablakkeret ActiveCaption Aktív ablak címsor AppWorkspace Munkaterület színe Background Asztal háttere ButtonFace Nyomógomb felszínének színe ButtonHighlight Nyomógomb fényes oldala ButtonShadow Nyomógomb árnyékos oldala ButtonText Nyomógomb szövege CaptionText Címsor szövege, gördítősáv nyilai GrayText Kiszürkített (nem elérhető) szöveg Highlight Kijelölés HighlightText Kijelölés szövege InactiveBorder Inaktív ablakkeret InactiveCaption Inaktív ablak címsor InactiveCaptionText Inaktív ablak címsor szövege InfoBackground Az eszköztipp doboz háttere InfoText Az info ablak szövege Menu
Menü háttere MenuText Menü szövege Scrollbar Gördítősáv mezője ThreeDDarkShadow A 3d-s gui elemek sötét-árnyékos oldala ThreeDFace A 3d-s gui elemek felszínének színe ThreeDHighlight A 3d-s gui elemek kijelölésének színe ThreeDLightShadow A 3d-s gui elemek fényes oldala ThreeDShadow A 3d-s gui elemek árnyékos oldala Window Ablak háttere WindowFrame Ablak kerete WindowText Ablak szövege Pl.: cssexample13html 44 HIVATKOZÁSOK Hivatkozások [1] Css maxdesign. http://cssmaxdesigncomau [2] Irodalom a digitális közegben v1.0 http://wwwhipertextinfo [3] Elveszett világ. http://mud0660hu, 1995 [4] Domonkos Balázs. Css előadás 2004 Nyári KIR fejlesztői tábor, 2004 [5] Domonkos Balázs. Xml előadás 2004 Nyári KIR fejlesztői tábor, 2004 [6] T. Berners-Lee Uniform resource identifiers (uri): Generic syntax http://wwwietforg/rfc/rfc2396txt, 1998. [7] Ted Nelson. Xanadu projekt http://xanaducom, 1960 óta [8] Polyhistor. Htmlinfo
http://htmlinfopolyhistorhu, 2001 [9] W3C. Cascading style sheets, level 1 http://wwww3org/TR/REC-CSS1, 1996-1999 [10] W3C. Cascading style sheets, level 2 http://wwww3org/TR/REC-CSS2, 1998 [11] W3C. Document object model (dom) level 1 specification http://wwww3org/TR/1998/REC-DOMLevel-1-19981001, 1998 [12] W3C. Html 401 specification http://wwww3org/TR/html401, 1999 [13] W3C. Document object model (dom) level 2 core specification http://wwww3org/TR/2000/RECDOM-Level-2-Core-20001113, 2000 [14] W3C. Xhtml 11 - module-based xhtml http://wwww3org/TR/xhtml11, 2001 [15] W3C. Xhtml 1.0 the extensible http://www.w3org/TR/xhtml1, 2002 hypertext markup language (second edition). [16] W3C. Xhtml media types http://wwww3org/TR/xhtml-media-types, 2002 45 A FOGALMAK A. Fogalmak WWW World Wide Web W3C World Wide Web Consortium SGML Standard Generalised Markup Language, dokumentum-tartalom átfogó leírására alkalmas metanyelv HTML HyperText Markup Language XML eXtensible Markup
Language XHTML eXtensible HyperText Markup Language style sheet (stíluslap) olyan leírás, amely megadja, hogyan jelenjen meg egy adott tartalom (dokumentum) valid style sheet (érvényes/helyes stíluslap) a CSS nyelvtannak megfelelő stíluslap. Minden CSS1 style sheet, valid CSS2 stíluslap, de néhány jelentésbeli eltéréstől eltekintve azonosan használható VRML Virtual Reality Modelling Language, a virtuális valóság leírására alkalmas leírónyelv MathML Mathematical Markup Language, matematikai tartalom leírására alkalmas XML-alapú leíró nyelv forrásdokumentum azon tartalom, amelyen egy vagy több stíluslapot alkalmazunk (vagyis amit a stíluslapok formáznak) tag jelölő, címke, elem, SGML nyelvi elem, a dokumentum alapvető struktúrájának leírására alkalmas attribútum egy tag tulajdonságát megadó nyelvi elem, mely attribútum-névből és attribútum-értékből áll tartalom egy tag-hez tartozó szöveges tartalom vagy gyermek tagjei;
amelyik tagnek nincs tartalma azt üres tagnek nevezik megjelenített tartalom a dokumentumban tárolt tartalom megjelenése valamilyen médián (képernyő, nyomtató, hang, stb); általában a tárolt tartalom kiegészült különböző elemekkel (pl. sorszámozás, keret, stb). dokumentum fa a dokumentumot felépítő tagek áltál meghatározott fa (pontosabban nem fa, mert az elemek sorrendje is számít). Minden tagnek pontosan egy szülőtag-je van a gyökérelemet kivéve, mert annak nincs szülője. felhasználó az az egyed (személy, robot, stb), amely az oldalt megtekinti user agent (UA) azon program, amely értelmezi a forrásdokumentumot és a stíluslapokat és a megjelenített tartalmat előállítja (pl. böngésző) DTD dokumentumtípus meghatározás (document type definition), XML leírások összessége, amelyek meghatározzák az adott DTD-t használó dokumentum érvényes struktúráját. 46 B. Példák B.1 HTML htmlexample01.html <!DOCTYPE HTML
PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3org/TR/html4/strictdtd"> <HTML> <HEAD> <TITLE>Az elsH o HTML dokumentumom</TITLE> </HEAD> <BODY> <P>Hello World!</P> </BODY> </HTML> htmlexample02.html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3org/TR/html4/loosedtd"> <HTML> <HEAD> <META http-equiv="content-type" content="text/html; charset=iso-8859-2"> <TITLE>Példa az érvénytelenített body attribútumokról</TITLE> </HEAD> <BODY text="brown" link="blue" vlink="darkblue" alink="lightblue" bgcolor="ivory"> <P><A href="http://google.com">Hello</A> World!</P> </BODY> </HTML> htmlexample03.html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3org/TR/html4/strictdtd"> <HTML> <HEAD> <TITLE>Kiemelés példák</TITLE> <META http-equiv="content-type" content="text/html; charset=iso-8859-2"> </HEAD> <BODY> <P> <EM>Kiemelés</EM>, <STRONG>erH os kiemelés</STRONG>, <CITE>idézet</CITE>, <DFN>definíció</DFN>, <CODE>programkód</CODE>, <SAMP>programkimenet</SAMP>, <KBD>felhasználói bemenet</KBD>, <VAR>programváltozó</VAR>, <ABBR>rövidítés</ABBR>, <ACRONYM>betH uszó</ACRONYM>. 47 B PÉLDÁK </P> </BODY> </HTML> htmlexample04.html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3org/TR/html4/strictdtd"> <HTML> <HEAD> <TITLE>Idézet példák</TITLE> <META http-equiv="content-type" content="text/html;
charset=iso-8859-2"> </HEAD> <BODY> <BLOCKQUOTE cite="http://www.mycomcom/tolkien/twotowershtml"> <P>They went in single file, running like hounds on a strong scent, and an eager light was in their eyes. Nearly due west the broad swath of the marching Orcs tramped its ugly slot; the sweet grass of Rohan had been bruised and blackened as they passed.</P> </BLOCKQUOTE> <P>John said, <Q lang="en-us">I saw Lucy at lunch, she told me <Q lang="en-us">Mary wants you to get some ice cream on your way home.</Q> I think I will get some at Ben and Jerry’s, on Gloucester Road.</Q></P> </BODY> </HTML> htmlexample05.html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3org/TR/html4/strictdtd"> <HTML> <HEAD> <TITLE>Index példák</TITLE> <META http-equiv="content-type" content="text/html;
charset=iso-8859-2"> </HEAD> <BODY> <P>Normál szöveg <SUB>alsó index</SUB> <SUP>felsH o index </SUP>.</P> <P><SUB>Alsó<SUP>felsH o<SUB>király<SUP>ász</SUP></SUB></SUP> </SUB><SUP></P> </BODY> </HTML> htmlexample06.html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3org/TR/html4/strictdtd"> <HTML> <HEAD> <TITLE>Sortörés példák</TITLE> 48 B.1 HTML <META http-equiv="content-type" content="text/html; charset=iso-8859-2"> </HEAD> <BODY> <P>A soremelést a <EM>user agent</EM> intézi szépen magának.</P> <P>Természetesen lehetH oségünk van <BR>explicit sortörés kijelölésére.</P> <H1>Valamintazi . sorttörjön be rhet</H1>
<H1>IttválasszelGéza­márhanagyon . refox</H1> </BODY> </HTML> htmlexample07.html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3org/TR/html4/strictdtd"> <HTML> <HEAD> <TITLE>Verziókövetés példák</TITLE> <META http-equiv="content-type" content="text/html; charset=iso-8859-2"> </HEAD> <BODY> <P>Micimackónak <DEL>7</DEL><INS>8</INS> barátja van.</P> </BODY> </HTML> htmlexample08.html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3org/TR/html4/strictdtd"> <HTML> <HEAD> <TITLE>Lista példák</TITLE> <META http-equiv="content-type" content="text/html; charset=iso-8859-2"> </HEAD> <BODY> <P>Háromféle listatípus létezik:</P> <UL> <LI> Sorrend nélküli lista <LI>
Sorrendezett lista <LI> Definíciós lista </UL> <P>Háromféle listatípus létezik:</P> <OL> <LI> Sorrend nélküli lista <LI> Sorrendezett lista <LI> Definíciós lista 49 B PÉLDÁK </OL> <P>Listatípusok definiálása:</P> <DL> <DT> Sorrend nélküli lista <DD> <CODE>UL</CODE> tag (unordered list) segítségével definiálható. <DT> Sorrendezett lista <DD> <CODE>OL</CODE> tag (ordered list) segítségével definiálható. <DT> Definíciós lista <DD> <CODE>DL</CODE> tag (definition list) segítségével definiálható. </DL> <P>TöbbszintH u listák:</P> <OL> <LI> Alma <UL> <LI> Zöld <OL> <LI> Cucc <LI> Bugi </OL> <LI> Piros <LI> Sárga </UL> <LI> Körte <OL> <LI> Jóság <LI> Rosszság </OL> </OL> </BODY>
</HTML> htmlexample09.html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3org/TR/html4/strictdtd"> <HTML> <HEAD> <TITLE>Táblázat példák</TITLE> <META http-equiv="content-type" content="text/html; charset=iso-8859-2"> </HEAD> <BODY> <TABLE width="640px" border="1px" frame="hsides" rules="groups"> <CAPTION>Táblázat felirata</CAPTION> <COLGROUP span="3"> <COL width="5*"> <COL width="5*"> <COL width="5*"> 50 B.1 HTML </COLGROUP> <COLGROUP> <COL width="1*"> </COLGROUP> <THEAD> <TR><TD colspan="4">Táblázat fejléce</TD></TR> <TFOOT> <TR><TD colspan="4">Táblázat lábléce</TD></TR> </TFOOT> <TR> <TD>1.1</TD>
<TD>1.2</TD> <TD>1.3</TD> <TD>1.4</TD> </TR> <TR> <TD>2.1</TD> <TD>2.2</TD> <TD>2.3</TD> <TD>2.4</TD> </TR> <TR> <TD>3.1</TD> <TD>3.2</TD> <TD>3.3</TD> <TD>3.4</TD> </TR> <TR> <TD>4.1</TD> <TD>4.2</TD> <TD>4.3</TD> <TD>4.4</TD> </TR> <TR> <TD>5.1</TD> <TD>5.2</TD> <TD>5.3</TD> <TD>5.4</TD> </TR> </TABLE> </BODY> </HTML> htmlexample10.html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3org/TR/html4/loosedtd"> <HTML> <HEAD> <TITLE>Hiperlink példák</TITLE> <META http-equiv="content-type" content="text/html; charset=iso-8859-2"> </HEAD> <BODY> 51 B PÉLDÁK <P><A
name="top">Az oldal teteje</A></P> <P><A href="htmlexample09.html">ElH ozH o példa</A></P> <P><A href="htmlexample11.html">KövetkezH o példa</A></P> <P><A href="http://google.com">Link a Google-re</A></P> <P><A href="ftp://ftp.kernelorg/pub/">FTP link</A></P> <P><A href="http://google.com" target=" blank">Új ablakba</A></P> <P><A href="#">Link önmagamra</A></P> <P>TEXT, TEXT, TEXT, TEXT, TEXT, TEXT, TEXT, TEXT, </P> . <P>TEXT, TEXT, TEXT, TEXT, TEXT, TEXT, TEXT, TEXT, </P> <P><A href="#top">Ugrás a tetejére</A></P> </BODY> </HTML> htmlexample11.html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3org/TR/html4/strictdtd"> <HTML>
<HEAD> <TITLE>Kép példa</TITLE> <META http-equiv="content-type" content="text/html; charset=iso-8859-2"> </HEAD> <BODY> <P><IMG alt="Sünis kép" src="suni.jpg"></P> <P><IMG alt="50 százalékos sünis kép" src="suni.jpg" width="50%"></P> <P> <IMG alt="Sünis kép" src="suni.jpg" usemap="#sunimap"> <MAP name="sunimap"> <AREA alt="szeme" shape="circle" coords="150,90,20" href="htmlexample01.html"> <AREA alt="füle" shape="poly" coords="130,60,130,100,90,60" href="htmlexample02.html"> </MAP> </P> </BODY> </HTML> htmlexample12.html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3org/TR/html4/framesetdtd"> <HTML>
<HEAD> <TITLE>Keret példa</TITLE> <META http-equiv="content-type" content="text/html; charset=iso-8859-2"> </HEAD> <FRAMESET rows="100, *"> <FRAME src="htmlexample02.html"> <FRAMESET cols="25%, 75%"> <FRAME src="index.html"> 52 B.1 HTML <FRAME name="main" src="htmlexample01.html"> </FRAMESET> </FRAMESET> </HTML> htmlexample13 get.html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3org/TR/html4/strictdtd"> <HTML> <HEAD> <TITLE>H urlap példa</TITLE> <META http-equiv="content-type" content="text/html; charset=iso-8859-2"> </HEAD> <BODY> <H2>Regisztráció a kiskunborzasztói halfeldolgozó üzemben: </H2> <FORM action="http://home.webtanfolyamschbmehu/domi/dumpphp" method="GET">
<FIELDSET> <LEGEND>Azonosítás</LEGEND> <INPUT name="hidden" type="hidden" value="Rejtett tartalom"> <P> <LABEL for="name id" accesskey="N">Név (legfeljebb 6 karakter):</LABEL> <INPUT name="name" type="text" maxlength="6" id="name id" tabindex=1> (alt + N) </P> <P> Jelszó: <INPUT name="passwd" type="password" tabindex=2 accesskey="J">(alt + J) </P> </FIELDSET> <FIELDSET> <LEGEND>Kapcsolat</LEGEND> <P> <INPUT name="neednews" type="checkbox" tabindex=3 checked> feliratkozom a hírlevélre (<A href="htmlexample01.html" tabindex=0>a személyes adatok kezelésérH ol</A>) </P> <P> Hol hallott a munkáról? <INPUT name="inform" type="radio" value="paper" tabindex=4>Újságban
<INPUT name="inform" type="radio" value="net" tabindex=5>Interneten </P> </FIELDSET> <FIELDSET> 53 B PÉLDÁK <LEGEND>ÉrdeklH odés</LEGEND> <P>Szakmai önéletrajzom: <INPUT name="cv" type="file" tabindex=6></P> <P> Kedvenc együttesem: <SELECT name="favband" tabindex=7> <OPTION>Apocalyptica</OPTION> <OPTION selected>Metallica</OPTION> <OPTION>Iron Maiden</OPTION> <OPTION value="9 inch nails">Nine Inch Nails</OPTION> <OPTION disabled>HIM</OPTION> <OPTION>Depeche Mode</OPTION> <OPTION>Ayreon</OPTION> </SELECT> </P> <P> Szívemnek kedves együttesek: <SELECT name="bands" size=3 multiple tabindex=8> <OPTION>Apocalyptica</OPTION> <OPTION>Metallica</OPTION> <OPTION>Iron Maiden</OPTION> <OPTION
value="9 inch nails">Nine Inch Nails</OPTION> <OPTION disabled>HIM</OPTION> <OPTION>Depeche Mode</OPTION> <OPTION>Ayreon</OPTION> </SELECT> </P> <P> Kedvenc ételem: <SELECT name="food" size=1 tabindex=9> <OPTGROUP label="Levesek" disabled> <OPTION>Húsleves</OPTION> <OPTION>Zöldségleves</OPTION> <OPTION>Gyimilcsleves</OPTION> </OPTGROUP> <OPTGROUP label="FH ozelékek"> <OPTION selected>Spenót</OPTION> <OPTION>FinomfH ozelék</OPTION> </OPTGROUP> </SELECT> </P> </FIELDSET> <FIELDSET> <LEGEND>Visszajelzés</LEGEND> <P> Ez a véleményem a dologról: <TEXTAREA name="text1" rows=4 cols=20 tabindex=10>Ez a tartalom.</TEXTAREA> </P> <P> Ebbe nem szólok bele: <TEXTAREA name="text2" rows=4 cols=20 readonly>Ez
a tartalom.</TEXTAREA> </P> 54 B.1 HTML <P> Ez meg nem is rám vonatkozik: <TEXTAREA name="text3" rows=4 cols=20 disabled>Ez a tartalom.</TEXTAREA> </P> </FIELDSET> <P> <INPUT type="submit" value="Mehet" tabindex=11> <INPUT type="image" value="Mehet" src="ok.gif" tabindex=12> <INPUT type="reset" value="Újra" tabindex=14> <INPUT type="button" value="Súgó" onClick="alert(’A formot töltsed ki, jól!’)" tabindex=16> </P> <P> <BUTTON type="submit" tabindex=13><IMG alt="OK image" src="ok.gif"><B>Mehet</B></BUTTON> <BUTTON type="reset" tabindex=15><IMG alt="Cancel image" src="cancel.gif"><B>Újra</B></BUTTON> <BUTTON type="button" onClick="alert(’A
formot töltsed ki, jól!’)" tabindex=17> <IMG alt="Help image" src="help.gif"><B>Súgó</B></BUTTON> </P> </FORM> </BODY> </HTML> index.html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3org/TR/html4/loosedtd"> <HTML> <HEAD> <TITLE>HTML példák</TITLE> <META http-equiv="content-type" content="text/html; charset=iso-8859-2"> </HEAD> <BODY> <P> <UL> <LI><P><A href="htmlexample01.html" target="main"> 1 példa </A></P> . <LI><P><A href="htmlexample13 post.html" target="main"> 13. példa (POST)</A></P> <HR> <LI><P><A href="htmlexample01.html" target=" blank"> 1. példa ( blank)</A></P> <LI><P><A
href="htmlexample01.html" target=" self"> 1. példa ( self)</A></P> <LI><P><A href="htmlexample01.html" target=" parent"> 1. példa ( parent)</A></P> <LI><P><A href="htmlexample01.html" target=" top"> 1. példa ( top)</A></P> </UL> 55 B PÉLDÁK </BODY> </HTML> B.2 XHTML xhtmlexample01.html <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3org/TR/xhtml1/DTD/xhtml1-strictdtd"> <html xmlns="http://www.w3org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>Az elsH o XHTML dokumentumom</title> </head> <body> <p>Hello XHTML!</p> </body> </html> xhtmlexample02.html <?xml-stylesheet href="W3C-REC.css"
type="text/css"?> <?xml-stylesheet href="#internalStyle" type="text/css"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3org/TR/xhtml1/DTD/xhtml1-strictdtd"> <html xmlns="http://www.w3org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>An internal stylesheet example</title> <style type="text/css" id="internalStyle"> code { color: green; font-family: monospace; font-weight: bold; } </style> </head> <body> <p> This is text that uses our <code>internal stylesheet</code>. </p> </body> </html> B.3 CSS cssexample01.css H1 { font-family: Arial; font-size: 40pt; Color:red } P { font-size: 12pt; line-height: 20pt } cssexample01.html <HTML> <HEAD> 56 B.3 CSS <LINK rel="stylesheet" type="text/css"
href="cssexample01.css"> </HEAD> <BODY> <H1>Today is fine.</H1> <P> Long before the advent of TV weather forecasters, people used tabletop glasses like a spherical flask to predict upcoming changes in weather. </P> </BODY> </HTML> cssexample02.html <HTML> <HEAD> <STYLE type="text/css"> H1 { font-family: Arial; font-size: 40pt; Color:red } P { font-size: 12pt; line-height:20pt } </STYLE> </HEAD> <BODY> <H1>Today is fine.</H1> <P> Long before the advent of TV weather forecasters, people used tabletop glasses like a spherical flask to predict upcoming changes in weather. </P> </BODY> </HTML> cssexample03.html <HTML> <HEAD> </HEAD> <BODY> <H1 style="font-family: Arial; font-size: 40pt; Color:red"> Today is fine. </H1> <P style="font-size:12pt; line-height:20pt"> Long before the advent of
TV weather forecasters, people used tabletop glasses like a spherical flask to predict upcoming changes in weather. </P> </BODY> </HTML> cssexample04.html <HTML> <HEAD> <STYLE type="text/css"> @import url(cssexample01.css); 57 B PÉLDÁK </STYLE> </HEAD> <BODY> <H1>Today is fine.</H1> <P> Long before the advent of TV weather forecasters, people used tabletop glasses like a spherical flask to predict upcoming changes in weather. </P> </BODY> </HTML> cssexample05.html <HTML> <HEAD> <STYLE type="text/css"> * {font-size:12pt} I {color:blue} I, B {font-size:18pt} H1 I {color:red} H1 > B {color:green} I + B {color:yellow} </STYLE> </HEAD> <BODY> <H1><B>Today</B> is <I>very <B>fine</B></I>.</H1> <I>Tomorrow</I> <B>will</B> <B>be</B> "fine".
</BODY> </HTML> cssexample06.html <HTML> <HEAD> <STYLE tyoe="text/css"> H3.red { font-family: Arial; font-size: 10pt; color:red} H3.green { font-family: Times New Roman; font-size: 14pt; color:green} </STYLE> </HEAD> <BODY> <H3 class="red">Today is fine.</H3> <H3 class="green">Today is fine.</H3> </BODY> </HTML> cssexample07.html <HTML> <HEAD> <STYLE type="text/css"> .green {font-family: Arial; color: green } .red {font-family: Times New Roman; font-size: 14pt; 58 B.3 CSS line-height: 20pt; color: red } </STYLE> </HEAD> <BODY> <H1 CLASS="green">Today is fine.</H3> <H2 CLASS="green">Today is fine.</H3> <H3 CLASS="green">Today is fine.</H3> <H4 CLASS="green">Today is fine.</H3> <P CLASS="green">Today is fine.</P>
<DIV CLASS="green">Today is fine.</DIV> <hr> <H1 CLASS="red">Today is fine.</H3> <H2 CLASS="red">Today is fine.</H3> <H3 CLASS="red">Today is fine.</H3> <H4 CLASS="red">Today is fine.</H3> <P CLASS="red">Today is fine.</P> <DIV CLASS="red">Today is fine.</DIV> </BODY> </HTML> cssexample08.html <HTML> <HEAD> <STYLE type="text/css"> #id100 { color:red } #id101 { color:green} .green { color:green} </STYLE> </HEAD> <BODY> <DIV id="id100">Today is fine.</DIV> <DIV id="id101">Today is fine.</DIV> <DIV class="green">Today is fine.</DIV> <DIV class="green" id="id100">Today is fine.</DIV> </BODY> </HTML> cssexample09.html <HTML> <HEAD> </HEAD>
<BODY> Today is fine. <div style="position:relative; left:20px; top:10px">Today is fine.</div> </BODY> </HTML> 59 B PÉLDÁK cssexample10.html <HTML> <HEAD> </HEAD> <BODY> <DIV style="font-size:large; color:lightgray"> TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT <!-- . --> TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT </DIV> <DIV style="position:absolute; left:0; top:0"> Today is fine. </DIV> <DIV style="position:absolute; right:0; bottom:0"> Today is fine. </DIV> </BODY> </HTML> cssexample11.html <HTML> <HEAD> </HEAD> <BODY> Today is fine. <SPAN style="display:block">Today is block.</SPAN> Today is fine <DIV style="display:inline">Today is inline.</DIV> Today is fine <DIV style="display:list-item">Today is list-item.</DIV> Today is
fine. </BODY> </HTML> cssexample12.html <HTML> <HEAD> </HEAD> <BODY> <A href="javascript:window.open(’cssexample13html’, ’popup’, ’toolbar=no,location=no,directories=no,status=no,menubar=no, resizable=no,scrollbars=no,caption=no,width=320,height=150, dialog=yes,minimizable=no,close=no,dependent=yes’)"> Klikk ide!</A> </BODY> </HTML> cssexample13.html <HTML> <HEAD> </HEAD> <BODY style="margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; overflow: hidden"> 60 B.3 CSS <TABLE style="width: 100%; height:100%; border-collapse: collapse; border-spacing: 0pt"> <TR> <TD style="color: CaptionText; background-color: ActiveCaption; font-weight: bold">Felpattanós ablakos</TD> </TR> <TR> <TD style="color: WindowText; background-color: ThreeDFace"> A rendszered bugyi!<BR>Akarod, hogy mégbugyibb legyen?
</TD> </TR> <TR> <TD style="color: WindowText; background-color: ThreeDFace; text-align: center"> <FORM><INPUT type="button" value="Legyen, persze!"> </FORM> </TD> </TR> </TABLE> </BODY> </HTML> 61
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . 5 5 5 6 7 7 9 9 10 10 10 10 11 11 11 13 13 15 16 17 17 18 18 18 18 18 21 22 2. XHTML 2.1 Az XML-ről röviden 2.2 Az XHTML története, létrejöttének okai 2.3 XML nyelvi megkötések 2.4 DTD és ajánlások 2.41 Dokumentumtípusok 2.42 XML fejléc 2.5 Különbségek a HTML 4-hez képest és kompatibilitás 2.51 Jólformáltság . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23 23 23 24 24 25 25 25 25 Tartalomjegyzék 1. HTML 1.1 Hipertext 1.2 Története, létrejöttének okai 1.3 HTML dokumentum szerkezete 1.31 Címkék
1.32 Karakterkódolás és formátumok 1.33 Komment 1.4 HTML verzió információ 1.5 HTML tag 1.6 Fejléc (<HEAD>) 1.61 Dokumentum címe (<TITLE>) 1.62 Meta adat (<META>) 1.7 Törzs (<BODY>) 1.8 Megjelenítés 1.81 Szöveg 1.82 Lista 1.83 Táblázat 1.84 Link 1.85 Kép 1.86 Keret (frame) 1.87 Stílus 1.88 Csoportosító címkék 1.9 Interaktivitás 1.91 Objektum, applet 1.92 Script 1.93 űrlap 1.10 Weboldalak kiszolgálása 1.11 Validálás 2 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . TARTALOMJEGYZÉK 2.52 Tagnevek 2.53 Whitespace-kezelés az attribútumok értékeiben 2.54 Script és Style elemek 2.55 SGML kizárások 2.56 Elemek id és name attribútumokkal 2.57 Attribútumok előre definiált értékkészlettel 2.58 Entitáshivatkozások hexadecimális értékekként 2.59 Címke nyelvének megadása 2.6 Kapcsolatok más szabványokkal 2.61 XML 2.62 DOM 2.63 CSS 2.7 XHTML 11 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25 26 26 26 26 27 27 27 27 27 27 28 28 3. CSS 3.1 Története, létrejöttének okai 3.11 Története 3.12 Mire jó? 3.2 Stíluslap alapok 3.21 Stílus deklaráció 3.22 Stílus specifikáció 3.3 Szelektorok 3.31 Univerzális szelektor 3.32 Típus szelektor 3.33 Szelektorok kontextusa 3.34 Szelektor osztályok (Class Selector) 3.35 ID szelektor 3.36 Szelektor pszeudo-osztályok (Pseudo class selector) 3.4 Betűtípus 3.41 Betűtípus család (font family) 3.42 Betűméret 3.43 Betűvastagság (font weight) 3.44
Betűdőltség (font style) 3.45 Szöveg aláhúzás (text decoration) 3.46 Kisbetű-nagybetű átalakítás 3.47 Betűtípus megadás egyszerre 3.5 Szöveg 3.51 Sormagasság 3.52 Vízszintes igazítás 3.53 Függőleges igazítás 3.54 Szöveg körbefuttatása 3.55 Bekezdés 3.6 Lista 3.61 Lista típusa 3.62 Lista igazítása 3.63 Lista meghatározása egyszerre 3.7 Szín és háttér 3.71 Előtérszín 3.72 Háttérszín 3.73 Háttérkép 3.8 Dobozolás 3.81 Doboz-orientált modell 3.82 Margó (margin) 3.83 Szegély (border) . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29 29 29 29 29 29 29 31 31 31 31 32 32 32 34 34 34 34 35 35 35 35 35 35 36 36 37 37 37 37 38 38 38 38 38 38 39 39 39 40 3 TARTALOMJEGYZÉK 3.9 3.10 3.11 3.12 3.84 Ráhagyás (Padding) 3.85 Tartalom méretei (content) 3.86 Túlfutás (overflow) Táblázat . 3.91 Szegély Pozíció és vizuális effektusok . 3.101 Doboz pozicionálás 3.102 Z-Index 3.103 Vágás 3.104 Láthatóság 3.105 Megjelenítés Médiatípusok . Felhasználói interface . 3.121 Egérkurzor 3.122 Asztali színek . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41 41 41 42 42 42 42 42 43 43 43 43 44 44 44 A. Fogalmak 46 B. Példák B.1 HTML B.2 XHTML B.3 CSS
47 47 56 56 4 1. HTML Hypertext Markup Language. 1.1 Hipertext A hipertext fogalmát megalkotó Ted Nelson klasszikussá vált meghatározása szerint a hipertext „nemfolyamatos írás – olyan szöveg, amely elágazik és választási lehetőséget kínál az olvasónak, s amely legjobban egy interaktív képernyőn olvasható. Az általános elképzelés szerint ez szövegdarabok linkekkel összekapcsolt sorozata, amelyek különböző ú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ű tanulmányát, s ezzel gyakorlatilag lefektette a hipertext koncepciójának alapjait. Egy olyan gépet álmodott meg, amely a hagyományos adatstrukturálással (alfabetikus sorrend, ld. könyvtár) ellentétben az emberi asszociációhoz hasonló indexelést definiált a dokumentumok között.
Xanadu Bár a Memex soha nem valósult meg, a mögötte meghúzódó elképzelés közvetlen hatást gyakorolt számos szakemberre, akik évtizedekkel később a digitális kultúra kiépítésén fáradoztak. Ted Nelson is, aki megalkotta a hipertext és hipermédia szavakat, bevallottan a mechanikus Memex elektronikus változatát igyekezett megteremteni az általa kezdeményezett Xanadu projektben. [2][7] 1.2 Története, létrejöttének okai A hypertext, a HTML és a kapcsolódó események a HTML 4.01-ig bezárólag: 1989 Tim Berners-Lee és Robert Caillian, a genfi CERN (Nukleáris Kutatások Európai Központja) kutatói javaslatot tesznek a világméretű 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ő széles körben elterjedt grafikus böngészőt. A Fehér Ház honlapja elérhetővé válik a WWW-en 1994 A WWW fejlesztésére megalakul a World Wide Web Consortium (W3C). A WWW forgalma meghaladja a Gopherét 1995 HTML 2.0 verzió Több keresőmotor létesül (Lycos, Yahoo!);az Altavista 15 millió oldalt tart nyilván Megszületik a Netscape Navigator böngésző VRML (Virtual Reality Modeling Language) kidolgozása A Sun Microsystems elsősorban internetes alkalmazások fejlesztésére megalkotja a Java objektumorientált programozási nyelvet, kezdetét veszi a Java appletek terjedése. Az első magyar nyelvű MUD1 szerepjáték megjelenése
(Elveszett világ) a Budapesti Műszaki Egyetem Schönherz Zoltán Kollégiumának szerverén. 1996 A Netscape Navigator 2.0 lehetővé teszi több keretből (frame) álló weboldalak létrehozását 1997 HTML 3.2 verzió Magyarországon beindul a SuliNet program, ami internetes hozzáférést biztosít általános- és középiskolák számára. 1 MultiUser Dungeon 5 1 HTML 1998 HTML 4.0 verzió 1999 HTML 4.01 verzió [2][3] Az egyes HTML verziók képességei: HTML 0 a dokumentum tartalmára vonatkozó címkék, valamint hiperhivatkozásokhoz, címsorokhoz, bekezdésekhez, listákhoz és menütételekhez használható jelölési definíciók. HTML 1 megtartotta a HTML 0-ás verziójának összes tulajdonságát, és kiegészítette azokat a sorokba illeszthető képek támogatásával, valamint a különböző karakterformázó lehetőségekkel (pl. vastagítás, dőlt betű). HTML 2 űrlapok (formok) kezelése HTML 3.2 táblázatok kezelése, formázási
lehetőségek szélesítése (betűtípusok támogatása), appletek, scriptek támogatása Megjelenik a <STYLE> tag, egyelőre 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őség nyílik multimédiás tartalom weboldalba ágyazására. Továbbiakban a HTML 4.01 Strict szabványt ismertetem 1.3 HTML dokumentum szerkezete A HTML dokumentum szöveges file, amely a szöveges tartalom mellett ún. címkéket (tageket) tartalmaz Ezek a tagek felelősek 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őleges számú ún. whitespace (szóköz, újsor, tabulátor) vagy komment (ld 1.33 fejezet) lehet A 2 és 3 részt <HTML> tagek közé kell Például így néz ki a legegyszerűbb HTML dokumentum: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3org/TR/html4/strictdtd"> <HTML> <HEAD> <TITLE>Az elso HTML dokumentumom</TITLE> </HEAD> <BODY> <P>Hello World! </BODY> </HTML> 6 1.3 HTML dokumentum szerkezete 1.31 Címkék A címkék < jellel és a címke nevével kezdődnek é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őz meg Például: <TAG .> </TAG> A tagek nevén túl tartalmazhatnak attribútumokat, amelyek a jelölő alapértelmezett jelentését módosítják. Célszerű akkor is beállítani az attribútum értékét az általunk
tervezettre, ha egy böngészővel tesztelve a kívánt eredményt tapasztaljuk, ugyanis a böngészők alapbeállítása, így a kapott kép eltérő lehet. Az attribútum megadása az attribútum nevének és értékének definiálásával történik Az értéket idézőjelben célszerű megadni, ez kötelező 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ű-é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űvel és tegyük ki az idézőjeleket (mellesleg ez a stílus előremutat az XHTML felé, ld. 2 fejezet) 1.32 Karakterkódolás és formátumok Karakterkódolás A karakterkódolást a HTTP kérésben (HTTP Content-Type fejlécének charset paraméterével) továbbítja a webszerver. Megadható a HTML dokumentum fejlécében is, de azt általában
figyelmen kívül hagyja a user agent (azon program, amely értelmezi a forrásdokumentumot és a stíluslapokat és a megjelenített tartalmat előállítja (pl. böngésző)) A továbbiakban a könnyebb érthetőség kedvéért a böngésző 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ű például ISO-8859-2 (közép-európai kódlap) használata UNIX alatt a recode parancs segítségével konvertálhatjuk a file-okat egyik kódkészletről egy másikra. HTML entitások Lehetőségünk van olyan karakterek, szimbólumok megadására is, amelyek nem szerepelnek az adott kódlap karakterkészletében; ezek az ún. HTML entitások Az entitás &nev; alakú, ahol nev az entitás neve. Például © a copyright jele, α a görög alfa betű 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űszerrel megtalálható. White space-ek HTML-ben az alábbi whitespace karakterek ill. HTLM entitások definiáltak(ld 132 fejezet): • ASCII betűköz ( ) • ASCII tabulátor (	) • ASCII soremelés () • nulla szélességű betűköz2 (​) 2 nemzeti okokból 7 1 HTML A soremelés és kocsivissza karakterek a megjelenített dokumentumban nem eredményeznek soremelést, a sortöréseket a böngésző automatikusan intézi. Természetesen lehetősé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ő. Egyedül
kötőjel vagy rejtett kötőjel (­ – soft hypernation) mentén képes elválasztani. Pl.: htmlexample06html 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őleges pozícióját kell megadni, amely többféleképpen tehető 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ő), pl: 2* Színkódok HTML-ben színek #RRGGBB alakban adhatók meg, ahol • RR: a vörös összetevő hexadecimális kódja • GG: a zöld összetevő hexadecimális kódja • BB: a kék összetevő hexadecimális kódja Így például #000000 a fekete, #FF00FF az élénk lila kódja. A színek nemcsak kóddal, hanem névvel is megadhatók – vigyázat a név
nagybetű-érzékeny. Néhány példa: Black Silver Gray White Maroon Red Purple Fuchsia = = = = = = = = "#000000" "#C0C0C0" "#808080" "#FFFFFF" "#800000" "#FF0000" "#800080" "#FF00FF" Green Lime Olive Yellow Navy Blue Teal Aqua = = = = = = = = "#008000" "#00FF00" "#808000" "#FFFF00" "#000080" "#0000FF" "#008080" "#00FFFF" A színkódok részletes listája megtalálható a http://www.w3schoolscom/html/html colornamesasp oldalon Megjegyzés: színek megadása HTML kódban elavult, helyette inkább CSS-sel adjuk meg. A CSS-re ugyanezen színkódolás érvényes. Képformátumok A weben használt képeknél figyelembe kell venni, hogy a felhasználó esetlegesen kis sávszélesség mellett fogja oldalunkat nézegetni, így mindenképp valamilyen tömörített képformátumot érdemes választanunk: JPEG veszteséges
true-color3 tömörítési eljárás, alkalmas fotókra, ábrákra; a legkedveltebb formátum. Akkor nem érdemes alkalmaznunk, ha úgymond „minden pixel” fontos, mert hajlamos az élek elmosására, ill. nem támogatja az átlátszóságot 3 valós 8 színű, 24 millió színárnyalatot különböztet meg 1.4 HTML verzió információ PNG Portable Network Graphics, veszteségmentes true-color tömörítő eljárás, amely támogatja az átlátszóságot. Megalkotásakor gondoltak a stream-alapú használatra (ilyen a web is), így a kép letöltése közben lehetőség van arra, hogy a letöltött kép durvább felbontással a teljes letöltés előtt megjelenjen. Az átlátszóságot ún alfa csatornával támogatja (256 szintű áttetszősé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ől 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ő 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ő szabadalom (mellyel a UniSys cég rendelkezik, alkalmanként pénzt kér érte) 2004 nyarán Európában lejárt. URI-k Az URI (Uniform Resource Identifier) részletes leírása megtalálható a [6] rfc dokumentumban. Első közelítésben csak az URLről (Uniform Resource Locator) lesz szó. URL például egy weboldal elérési útja. Amikor a böngészőnk címsorába begépeljük egy weblap nevét, tulajdonképpen URL-jét írjuk le. Amikor egy olyan webes űrlapot töltünk ki, amely ún GET paraméterátadással dolgozik (ld későbbi előadá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őtt kell tartanunk, hogy a böngészőnk alapvetően kétféle elérési út megadást ismert: • abszolút elérési út esetén protokolllal kezdődő URL-t adunk meg. Pl: http://googlecom • relatív elérési út minden más esetben a böngésző 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őkönyvtárra mutat, míg a könyvtárak elválasztására a UNIX rendszerekről ismert / alkalmas 1.33 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ő. 1.4 HTML verzió információ A verzió információ (ún. DTD, ld XML előadás) adja
meg, hogy a HTML dokumentum milyen HTML verziónak felel meg (ld. 111 fejezet): • HTML 4.01 Strict DTD: mindazon tageket és attribútumokat tartalmazza, amelyek nem lettek érvénytelenítve (deprecated) A fejléc alakja az alábbi: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3org/TR/html4/strictdtd"> 9 1 HTML • HTML 4.01 Transitional DTD: Az előbbi 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.w3org/TR/html4/loosedtd"> • HTML 4.01 Frameset DTD: Az előbbi valamint a keretek (frame-ek, ld 186 fejezet) A fejléc alakja az alábbi: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3org/TR/html4/framesetdtd"> 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.61 Dokumentum címe (<TITLE>) Páros tag, megadása kötelező. A dokumentum címét tartalmazza, ez jelenik meg általában a böngészők címsorában. Formázást nem tartalmazhat 1.62 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őrobot) szól Az alábbi attribútumokkal rendelkezik: • name vagy http-equiv: a metainformáció neve • content: a metainformáció értéke Keresőrobotok A <META> tag leggyakoribb felhasználási területe az oldal leírása a keresőrobotok számára a keywords tulajdonsá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ő innen tudja eldönteni, milyen kódolással
jelenítse meg az oldalt (ld még az 132 fejezetet) <meta http-equiv="content-type" content="text/html; charset=iso-8859-2"> Szerző A dokumentum szerzője a author, a copyright információ a copyright tulajdonság beállításával lehetséges. <meta name="author" content="Domonkos Balazs"> <meta name="copyright" content="© Webtanfolyam"> 10 1.7 Törzs (<BODY>) 1.7 Törzs (<BODY>) A dokumentum törzsét jelölő páros tag elhagyható, de célszerű kiírni. Az alábbi attribútumokkal rendelkezik: • onLoad: az oldal teljes betöltődésekor lefutó script4 • onUnload: az oldalról való elnavigálás vagy böngészőablak 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. 132 fejezet) • background: háttérkép (ld. 132 fejezet) Pl.: htmlexample02html A kereteket tartalmazó oldalt ld. 186 fejezetben 1.8 Megjelenítés 1.81 Szöveg Fontos csoportja a címkéknek a blokkdefiniáló tagek. Ezek a következők: • P: bekezdés (paragraph), • H1 . H6: címsor (heading), • PRE: formázatlan szöveg (preformatted), • DIV: blokkszintű csoportosító tag, • ADDRESS: cím, emailcím megadása (nem használják) A szövegmegjelenést módosító tagek csak blokkdefiniáló tageken belül adhatók meg, csupán módosítják a megjelenést. Bekezdés Bekezdések a <P> taggel adhatók meg, melynek zárótagje opcionálisan elhagyható. Címsorok A H1, H2, H3, H4, H5, H6 címsorok (headings) páros tagek növekvő mélységű címsorok
definiálására szolgálnak. Pl.: cssexample07html 4 részletesen 5a ld. JavaScript előadás látogatott linkek listját a böngésző egy idő után elfelejti, ennek pontos idejéről nem tehetünk fel semmit 11 1 HTML Formázatlan szöveg A páros <PRE> tagek segítségével adható meg formázatlan szöveg fix karakterszélességgel és automatikus sortörés nélkül (a forrásdokumentum sortöréseit meghagyva). Kiemelés Logikai kiemelés (böngészőfüggő, általában dőlt ill. félkövér megjelenítés): • EM: kiemelés • STRONG: erős kiemelés • CITE: idézet • DFN: definíció Explicit kiemelés: • B: félkövér (bold) • I: dőlt (italic) • U: aláhúzott (underline, csak Transitional) Fix szélességű (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űszó (acronym) Idézet A
BLOCKQOUTE páros tag hosszú blokk-szintű idézet kijelölésére szolgál, míg a szintén páros Q tag az idézőjel helyes (akár nyelvfüggő, de ez erősen böngészőfüggő) kiírására alkalmas. A cite paraméterrel megadható az idézet forrása. Pl.: htmlexample03html Indexek A SUP és SUB páros tagek szolgálnak az alsó- ill. felsőindex definiálására Általában a betűméretváltás automatikus. Pl.: htmlexample04html Verziókövetés A INS és DEL páros tagek a dokumentumon történt változások megjelölésére alkalmasak. Egyetlen kikötés, hogy nem tartalmazhatnak blokkdefiniáló jelölőket (ld. 181 fejezet) Pl.: htmlexample07html 12 1.8 Megjelenítés 1.82 Lista A listák mindegyike a lista típusának megfelelő tag belsejében elhelyezett listaelemekből épül fel. A listát kijelölő jelölők (UL, OL, DL) páros tagek, míg a listaelemeket megadó jelölő (LI, DT, DD) zárótagje lehagyható. Sorrend nélküli lista UL tag
(unordered list) segítségével definiálható. Sorrendezett lista OL tag (ordered list) segítségével definiálható. Definíciós lista DL tag (definition list) segítségével definiálható. Formázást ld. a 36 fejezetben Pl.: htmlexample08html 1.83 Táblázat 1. ábra Táblázat filozófiája HTML-ben Táblázat definiálása A táblázat definiálása a TABLE páros tag segítségével történik. Attribútumok: • width: táblázat szélessége • border: keret szélessége (border = 0 esetén nincs keret) • cellspacing: a cellák közti távolság 13 1 HTML • cellpadding: a keret, belső vonalak és a tartalom közti távolság A cellspacing és cellpadding tulajdonságok értelmezése a 2. ábrán látható A táblázat HTML-ből történő formázását megadó attribútumokat gyakorlatban elvétve használják, helyette CSS-sel formázzák a táblázatot. Így csak a teljesség kedvéért: • frame: a táblázat keretének mely részei látszanak: –
void: egyik sem, – above: csak a felső, – below: csak az alsó, – hsides: felső é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ő vonalak a táblázatban – none: sehol, – groups: csoportok (THEAD, TFOOT, TBODY,COLGROUP, COL) között, – rows: sorok között, – cols: oszlopok között, – all: mindenhol 2. ábra cellspacing és cellpadding tulajdonság értelmezése Táblázat felirata CAPTION páros tag segítségével. 14 1.8 Megjelenítés Sorok csoportosítása A HTML táblázat sorok szerinti megközelítést használ. Háromféle sorosztály adható meg (ebben a sorrendben): • THEAD: táblázat fejléce • TFOOT: táblázat lábléce • TBODY: táblázat törzse Az előbbiek zárótagje, az utóbbi kezdő és zárótagje elhagyható. Oszlopcsoportok kijelölése A sor-orientált szemlélet ellenére lehetőség van oszlop szerinti
csoportok kijelölésére, az oszlopszélességek és összevonások megadására. Pl: <COLGROUP span="osszevonas" width="szelesseg"> <COL span="osszevonas" width="szelesseg"> A COLGROUP zárótagje opcionális, a COL magányos tag. A width attribútumhoz ld 132 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.: htmlexample09html 1.84 Link A hiperlinkek a HTML hipertext-mivoltát adják, az oldalon belül és az oldalak közti ugrásokat teszik lehetővé. 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űk ez esetben meg vannak különböztetve és nem ütközhetnek CSS idkkal
(ld. 33 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.schbmehu"> Link kulso oldalra</A> <A href="masik.html" target="keret">link a masik oldalra, amely a keret nevu frame-ben fog megnyilni.</A> 15 1 HTML Az utolsó példában látható target argumentum megadja, hogy a link nem feltétlenül abban a keretben (ill. ablakban) nyílik meg, ahol a link található (ld 186 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őframe-ben maga a dokumentum látható. A target attribútum csak Transitional DTD-vel használható Az A achor címke
mindkét értelmezésében szigorúan páros tag. Pl.: htmlexample10html 1.85 Kép Képek beszúrása az IMG magányos taggel történik, a képformátumokról ld. 132 fejezet Attribútumok: • alt: a kép felirata, érdemes megadni • src: a kép elérési útja (ld. 132 fejezet) • heigth: kép magasságának felülbírálása • width: kép szélességének felülbírálása • usemap: kliens oldali térképet használ (értékként #terkep neve alakban kell megadni az imagemap nevét) • ismap: szerver oldali térkép bemenete (a képre kattintva a böngésző elküldi a kattintás koordinátáit) A kép dimenzióit (width és height) mindig érdemes megadni, hogy az oldal letöltése közben ne „ugráljon” a megjelenített tartalom, ugyanis alapértelmezés szerint kis (kb 32x32 pixel) négyzet alakú méretet tételez fel a böngésző. Az imagemapeket a kép egy területét jelölik meg, amelyre hiperlinket definiálhatunk. Használata elavult, a Flash technológia
kiszorította Kliens oldali térkép (imagemap) Szintaxisa: <MAP name="terkep neve"> <AREA alt="felirat" shape="alakzat" coords="koordinatak" href="url" nohref> </MAP> A MAP páros, a AREA magányos tag. Az attribútumok jelentése: • alt: a terület felirata • shape: a terület alakja: – circle: kör – rect: téglalap – poly: poligon • coords az alakzatnak megfelelően adhatók meg az azt leíró koordináták: – circle: esetén x, y, r – rect: esetén x1, y1, x2, y2 16 1.8 Megjelenítés – poly: esetén x1, y1, x2, y2, ., xn, yn • href: az URL ahová a link mutat • nohref: azt adja meg, hogy nem hivatkozunk sehova, nem akarunk ugrani, a térképet csak az script interaktivitás miatt hoztuk létre (iszonyatosan elavult) Pl.: htmlexample11html 1.86 Keret (frame) A keretek segítségével a böngészőablakot több téglalap alakú részre oszthatjuk fel (vízszintesen vagy
függőlegesen akár rekurzívan) és az egyes régiókba különböző HTML dokumentumokat tölthetünk. Az egyes dokumentumok újratöltődésekor azok URL-jének megváltozásakor a keretet definiáló oldal, így a többi keret nem töltődik újra. A FRAMESET páros taggel definiálható keretes felosztás, attribútumok: • rows: vesszővel elválasztva a vízszinten felosztás méretei (ld. 132 fejezet) • cols: vesszővel elválasztva a függőleges felosztás méretei A FRAME magányos taggel pedig a FRAMESET-eken belül megadhatók az egyes keretek. Attribútumai: • name: a frame neve, erre hivatkozhatunk hyperlink megadásakor. Az alábbi neveknek speciális jelentésük van, pseudoframe-eket jelölnek: blank: a böngésző egy új ablakba nyitja meg az oldalt self: a aktuális frame-et jelöli parent: a szülőframe (ennek segítségével tudja egy frame-beli oldal a keretet tartalmazó oldalt elnavigálni). Megegyezik a self-fel, ha nincs szülője az
oldalnak top: az ősframe (a „öröklődés” csúcsán álló keret). Megegyezik a self-fel, ha nincs szülője az oldalnak • noresize: a frame-et nem lehet átméretezni (ha nem adjuk meg, akkor a szomszéd frame-mel határos méretezőléc segítségével a méretarányokat meg lehet változtatni) A FRAMESET törzsén belül NOFRAMES taggel adható meg, milyen tartalom jelenjen meg, ha a böngésző nem támogatja a keretek megjelenítését. Az IFRAME (inline frame) címkével a megjelenített dokumentumban olyan téglalap alakú területet jelölhetünk ki (mint a DIV-ek esetében) , ahová a böngésző egy másik html dokumentumot tölt be. Attribútumai: • src: az oldal forrása • name: a frame neve • width: a frame szélessége • height: a frame magassága Pl.: htmlexample12html 1.87 Stílus Ld. a 3 fejezetet 17 1 HTML 1.88 Csoportosító címkék Az eddig említett tag-ek a HTML történetének régmúltjába nyúlnak vissza, mindegyikük
valamilyen jól definiált szerepet tölt be. A DIV (alapértelmezés szerint blokk-szintű) és a SPAN (alapértelmezés szerint sorbeli, inline) páros címkék nem rendelkeznek előre definiált tartalommal, segítségükkel a dokumentum szerkezete szabadon alakítható és ezen a formázás igény szerint végezhető el (CSS segítségével); ez már az XML felé mutat. Formázás, class, id ld. 33 fejezet 1.9 Interaktivitás Lásd még 1.84 és 185 (imagemapek) fejezeteket! 1.91 Objektum, applet Az OBJECT címke segítségével multimédiás tartalmat6 , az APPLET taggel pedig Java Appletet7 építhetnünk honlapunkba. A http://wwww3org/TR/html401/struct/objectshtml oldalon található referenciában érdemes utánanézni a pontos szintaxisnak. 1.92 Script A SCRIPT címkék tartalmaként és az egyéb tagek on kezdetű ún. eseménykezelő attribútumaiban (pl onClick, onKeyPress, onLoad, . ) szkript-kódot adhatunk meg, amellyel oldalunkat interaktívvá tehetjük. A
script lehet JavaScript ill VBScript (Visual Basic Script – a Microsoft csemetéje) A JavaScript, ahogy a neve is mutatja script-nyelv, amelyet közvetlenül a HTML oldal forrásába ágyazunk és azt a böngésző é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őtt (a HTML 20 és 30 ajánlások idején) nem volt lehetőség lényeges mértékű kliens oldali interaktivitásra. A JavaScriptről ld. bővebben a JavaScript előadást 1.93 űrlap Az űrlap (form) segítségével a felhasználó adatokat küldhet böngészőjéből a szerver felé az ablakkezelő rendszerek megszokott interface-elemeinek segítségével (beviteli mezők, választólista, gomb, stb.) FORM tag A páros FORM tag segítségével adható meg egy űrlap (több űrlap is szerepelhet egyazon oldalon). Legfontosabb attribútumai: • action: az az URL, ahová az űrlap
adatai továbbítódnak. • method: lehet GET ill. POST Az előbbi esetben az URL-ben az utóbbinál a HTTP kérésben továbbítódnak a paraméterek • name: az űrlap neve. JavaScriptből ennek segítségével hivatkozhatunk az űrlapra és annak mezőire (pl. annak ellenőrzé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ő (tehát nem módosító) cselekvés esetén célszerű GET használata. Ilyen például egy fórumoldal lekérése, praktikus, hogy a felhasználó eltárolhatja az oldal címét, a böngészőknél pedig gond nélkül használhatjuk az előre és vissza navigáló gombokat. POST metódust akkor célszerű használni, ha a megadott cím valamilyen módosító (létrehozó, törlő) feladatot lát el – és természetesen bejelentkezés esetén is, csúnya lenne, ha az oldal letöltésekor a
címsorban 6 leggyakrabban 7 ld. 18 Flash animációt bővebben a JavaScript előadást 1.9 Interaktivitás olvashatnánk a jelszó url encoded változatát. A böngészők általában figyelmeztetnek ilyen oldalakra való vissza ill. előrenavigálás során űrlapmezők A FORM tag törzsében adhatjuk meg az űrlaphoz tartozó mezőket (egysoros/többsoros szövegbeviteli mező, választólista, file-feltöltése, . ) A mezőket definiáló tagek: • INPUT • SELECT • TEXTAREA A mezők közös attribútumai: • name: az űrlapmező neve (a szerveroldalon ezzel hivatkozhatunk a mezőre, ld. PHP előadás) • disabled: az űrlapmezőt a felhasználó nem szerkesztheti (kiszürkített) INPUT tag A magányos FORM tag gyerekcímkéjeiként megadhatjuk az űrlaphoz tartozó beviteli mezőket. Attribútumai: • type: a beviteli mező típusa: – text: szöveges – password: jelszó – checkbox: jelölőnégyzet – radio: választógomb – file:
file feltöltő – hidden: rejtett – submit: űrlap elküldése gomb – image: grafikus „űrlap elküldése gomb” – reset: űrlap alaphelyzetbe állítása gomb – button: egyéb gomb (ld. JavaScript előadás) • size: a megjelenített mező mérete pixelben (kivéve az input és password mezőket, ott a karakterek száma) • maxlength: a text és password típusú mezőbe maximálisan begépelhető karakterek száma (figyelembe kell venni, hogy ez csak kliens oldali korlát, szerver oldalon ellenőrizni kell, nem küldött-e a felhasználó pl. telnet program segítségével hosszabb adatot) • value: a radio és checkbox kivételével itt adhatunk meg kezdőértéket az űrlapmezőnek • checked: radio és checkbox esetén az adott mező kiválasztva ill. beikszelve jelenik meg • src: grafikus „űrlap elküldése gomb”-hoz tartozó kép URL-je 19 1 HTML BUTTON tag A BUTTON páros címke lényegében a submit, reset, button típusú INPUT
címkével egyenértékű azonban annál szabadabb tartalom jeleníthető meg a gomb felületén. Attribútumai hasonlóak: • name • value • type: submit, reset vagy button Az egyetlen megkötés, hogy nem tartalmazhat olyan képet, amely imagemapet tartalmaz. SELECT, OPTGROUP, OPTION tagek Választólisták megadására alkalmas címkék. A listát a SELECT páros tag jelöli ki Attribútumai: • size: hány listaelem látszódjon egyidejűleg (1 esetén ún. combobox) • multiple: több elemet is kijelölhetünk A listán belül csoportokat alakíthatunk ki a OPTGROUP taggel. Attribútumai: • label: a csoport neve • disabled: a csoportból nem választhatunk elemet (de jelezni akarjuk, hogy vannak ilyen elemek). A listaelemeket a OPTION taggel adhatjuk meg (a zárótag elhagyható). Attribútumok: • selected: a listaelem ki van választva • value: ezt az értéket küldi a böngésző a tag szövege helyett • disabled: a listaelemet nem választhatjuk ki
TEXTAREA tag Többsoros szövegbeviteli mező megadására alkalmas páros tag. Attribútumai: • rows: megjelenített sorok száma • cols: megjelenített oszlopok száma • readonly: a mező tartalma csak olvasható A szövegmező alapértelmezett értékét a nyitó- és zárótag közt kell megadni. A TEXTAREA a HTML egyéb elemeitől eltérően kezeli a whitespaceket. A betűközöket, tabulátorokat és újsor karaktereket megőrzi Ez alól a nyitó tagek követő 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őbbi karakter szerepel a használt kódlapon, az útóbbi nem Ez szerepet kap az űrlap elküldésekor, ugyanis a böngésző így küldi tovább: cucc=%B0-%26%23169%3B ami az URL dekódolása után: cucc=◦ -© Az űrlapon begépelt
entitások szintén feloldódnak, ugyanúgy, mintha azokat a HTML forrásába írtuk volna be. Tehát mind a &, mind pedig a & megadása esetén a & karaktert továbbítja a böngésző Ha a kódlapon nem szereplő karaktert írunk be (pl. vágólapról), akkor reménykedhetünk benne, hogy a böngésző UNICODE-entitásként fogja elküldeni. 20 1.10 Weboldalak kiszolgálása LABEL tag A űrlapmezők felirata jelölhető ki ezzel a páros taggel. Attribútuma: • for: azon elem id attribútuma, amelyhez a feliratot rendeljük. Ld még 335 fejezet űrlap tagolása A FIELDSET páros taggel a FORM űrlapon belül kijelölhetünk egy blokkot, amelyet a LEGEND páros taggel feliratozunk (amennyiben FIELDSET-et használunk, annak első gyerektagjeként LEGEND-et kell megadnunk) (például személyes adatok megadása, termékverzió kiválasztása, . ) A FIELDSET általában elég kulturáltan jelenik meg a böngészőkben, de ennek ellenére ritkán
használják, inkább CSS-sel érnek el hasonló hatást a desingerek, mert ott egzaktabban le lehet írni a megjelenést. Ha egyszerű oldalt írunk egyszerű célra, kevés formázással, alkalmazzuk nyugodtan. űrlapelemek fókuszba hozása Az ún. fókuszban (ld JavaScript előadás) lévő űrlapelem ki van választva adatbevitel ill módosítása céljából. Egyszerre legfeljebb egy elem lehet fókuszban Az űrlapelemeken túl a A, AREA, OBJECT címkékhez tartozó objektumok kaphatják meg a fókuszt. Az ilyen elemek közt az egérrel (vagy más kijelölésre alkalmas eszközzel) történő kijelölésen túl általában billentyűzettel is váltogathatunk. A sorrend, az ún tabindex alapértelmezés szerint az egyes beviteli mezőkhöz tartozó tagek megjelenésének sorrendje a HTML sorráskódban. Ez a tabindex attribútum segítségével definiálhatjuk felül, melynek értéke 0 és 32767 között adható meg. A tabindexen túl időnként hasznos, ha egyes
űrlapelemeket azonnal elérünk billentyűzetről. Ez a accesskey attribútum beállításával történik vagy az űrlapelemen vagy annak feliratán (LABEL). Pl.: htmlexample13html 1.10 Weboldalak kiszolgálása A fejezet csak rövid vázlat, betekintés. Ld részletesebben a későbbi előadásokon A weboldalakat valamilyen webszerver (ilyen például a legelterjedtebb Apache) szolgálja ki. A felhasználó kérésére a böngésző 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ően (vázlat) jelent meg különböző szerver oldali interaktivitást megvalósító SSI, CGI és a magasabb szintű 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ű alkalmazás (webszerver, adatbázis szerver(, alkalmazás szerver)) tekinthető 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ő jogosultság beállítására. Általában a webszervert futtató felhasználó számunkra others-nek minősül így: • file-okra: chmod o+r file paranccsal olvasójogot, • könyvtárakra: chmod o+x konyvtar paranccsal elérési, ill. chmod o+r konyvtar
paranccsal listázási jogot kell adnunk A webszerver által kiszolgált felhasználói könyvtárunk a home-könyvtárunk vagy (gyakrabban) a home-könyvtárunkban található public html könyvtár. 21 1 HTML 1.11 Validálás A validálás művelete a HTML dokumentum helyességének ellenőrzése (hasonló validátorok léteznek XHTML-hez és CSS-hez). A W3C8 validátora http://validator.w3org/ címen elérhető Kényelmesen elérhető a Mozilla FireFox böngészőből a Webdeveloper extension telepítése után a CTRL+SHIFT+V billentyűkombinációval 8 World 22 Wide Web Consortium, ld. http://w3corg 2. XHTML Az XHTML a jelenlegi és jövőbeni 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űködjenek az XML alapú felhasználói alkalmazásokkal. Ez a fejezet (a tantervből 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ől röviden Az XML (Extensible Markup Language) a Word Wide Web Consortium (W3C) terméke. A HTMLhez hasonlóan az SGML (Structured Generalized Markup Language)-ből származtatott jelölőnyelv Az alapvető különbség az XML és a HTML között, hogy az XML-ben mi magunk definiálhatunk tageket. Az XML hamar kivívta létjogosultságát, mivel az SGML nyelv bonyolultsága és a HTML nyelv nehézsége közti rést foglalja el. Az XML számos előnnyel rendelkezik, amelyet 10 pontban foglalt össze az azt kifejlesztő csapat: • könnyű használhatóság a gyors elterjedés érdekében • széleskörű felhasználhatóság • kompatibilisnek kell lennie az SGML-el, s így az SGML-t értelmező szoftverek könnyen átalakíthatók XML értelmezésre is • egyszerű programírás az XML dokumentumok
feldolgozására, így a nagyon gyorsan elterjed a programozók körében • az XML opcionális lehetőségeinek minimálisra csökkentése, amivel elkerülhetők az egyes feldolgozó programok kompatibilitási hibái • az XML forrásnak világosnak és olvashatónak kell lenni • XML szabványt rövid idő alatt kell kifejleszteni, így elérhető, hogy egyetlen nyelv terjedjen el, ellenben a sok kis szoftverfejlesztő 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ű elkészíthetőség • a tömörség elhanyagolható, a hangsúly az olvashatóságon legyen Ld. bővebben az XML előadá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ő dokumentumtípus az XHTML családban Ez a három HTML
4 dokumentumtípus (ld 14) megújítása XML 10 alkalmazásként Ez a dokumentumtípus azon dokumentumok nyelvéül lett szánva, amelyek olvashatóak XML-kompatibilis, és néhány egyszerű irányelv betartásával HTML 4 kompatibilis böngészővel is. Az XHTML 1.1 az 10-á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őforrást igényel, így ez beágyazható például mobiltelefonokba. 23 2 XHTML 2.3 XML nyelvi megkötések Az XHTML dokumentum egyben XML dokumentum is egyben, a HTML dokumentumhoz hasonlóan tag-ekből é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űsí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űközt hagyni az utolsó attribűtum és a perjel közt, hogy minden böngésző alatt hibátlanul működjön az oldalunk (egyes HTML 4-ről XHTML-re tuningolt böngészők 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űérzékenyek. Egy attribútumnév csak egyszer szerepelhet egy adott tagben Érvényes névnek (tagnév, névtér neve, attribútumnév) nevezünk minden olyan karaktersorozatot, amely • betűvel vagy
aláhúzással kezdődik • ezt követően tetszőleges számú – számot – betűt – pontot, aláhúzást, kötőjelet tartalmaz. Ez alól az xml karaktersorozat bármilyen kis ill nagybetűs 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őjelbe kell raknunk. Jelentés nélküli karakternek nevezünk minden olyan karaktert, amely nem befolyásolja az XML dokumentum tartalmát, ezeket az XML értelmezője figyelmen kívül hagyja, pusztán az áttekinthetőséget növeli. Ilyen karakter a betűkö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 241 fejezet) 2. A dokumentum gyökérelemének az xmlns attribútum használatával jelölnie kell az XHTML névtereket (Megjegyzés: az XHTML-ben más névtér (pl MathML) megadásával más
XML alapú dokumentum ágyazható be XHTML-be valamint egyéb XML-alapú dokumentumba beágyazható XHTML a névtér megfelelő megadásával). A gyökér elem a következőképp nézhet ki: <html xmlns="http://www.w3org/1999/xhtml" xml:lang="en" lang="en"> 24 2.5 Különbségek a HTML 4-hez képest és kompatibilitás 2.41 Dokumentumtípusok A dokumentumban - gyökér-elemet megelőzően - DOCTYPE deklarációt kell elhelyezni: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3org/TR/xhtml1/DTD/xhtml1-strictdtd"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3org/TR/xhtml1/DTD/xhtml1-transitionaldtd"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3org/TR/xhtml1/DTD/xhtml1-framesetdtd"> Ezek a megfelelő HTML 4.01 dokumentumtípusok XHTML megfelelői 2.42 XML fejléc XML fejléc
megléte nem kötelező minden XML dokumentumban; viszont az XHTML dokumentumok szerzőinek erősen 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ű protokoll nem határoz meg kódolási módot. A fejléc a dokumentum első 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ű Strict XHTML 1.0 dokumentum: <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3org/TR/xhtml1/DTD/xhtml1-strictdtd"> <html xmlns="http://www.w3org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>Az elsH o XHTML dokumentumom</title>
</head> <body> <p>Hello XHTML!</p> </body> </html> 2.51 Jólformáltság A dokumentumoknak jól formáltnak kell lenniük. Minden attribútum értéket idézőjelek 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.52 Tagnevek Elem és attribútum nevek kisbetűvel írandók. 25 2 XHTML 2.53 Whitespace-kezelés az attribútumok értékeiben A böngészőknek az attribútumok értelmezésénél az alábbi szerint kell eljárniuk: • Le kell vágniuk a bevezető és lezáró whitespace karaktereket. • Egy, vagy több whitespace karakter sorozatát (beleértve a sortörést is) egyszerű szóközzé kell konvertálniuk. 2.54 Script és Style elemek Az XHTML-ben a script és style
elemek deklarációjuk szerint #PCDATA tartalmúak (ld. xml előadás) Ennek eredményeképpen a < és & karakterek jelölő kezdeteként vannak értelmezve, egyedeiket (<, &) az XML értelmezők egyedhivatkozásként ismerik fel. Egy script, vagy stíluselem tartalmának CDATA jelölésű részbe csomagolásával elkerülhető ezen egyedek kibontása. <script type="text/javascript"> <![CDATA[ . ]]> </script> Alternatív megoldásként külső script, vagy stíluslap használható. Megjegyzés: ez utóbbi egyelőre a legjobb megoldás, mivel a CDATA-ában megadott szrkipteket minden általam tesztelt böngésző figyelmen kívül hagyta. Pl.: xhtmlexample03html, xhtmlexample03 cdatahtml 2.55 SGML kizárások Az SGML megadja a lehetőséget a DTD írójának, hogy meghatározott elemek használatát kizárja valamely elemből. Ilyen tiltási lehetőségek az XML-ben nem lehetségesek Példaként: a HTML 4 Strict DTD megtiltja az
<a> elemek bármilyen mértékű egymásba ágyazását. Ilyen tiltások az XML-ben nem írhatók le. Mindamellett, hogy a DTD-ben ilyen tiltások nem szerepelhetnek, bizonyos elemeket valóban nem lehet egymásba ágyazni A következő elemekre vonatkoznak egymásba ágyazási tiltások. Ezek a tiltások a beágyazás minden szintjére vonatkoznak, vagyis minden leszármazott elemre. • a: nem tartalmazhat más a elemeket. • pre: nem tartalmazhatja az img, object, big, small, sub, vagy sup elemeket. • button: nem tartalmazhatja az input, select, textarea, label, button, form, fieldset vagy iframe elemeket. • label: nem tartalmazhat más label elemet. • form: nem tartalmazhat más form elemet. 2.56 Elemek id és name attribútumokkal A HTML 4 definiálta az a, applet, form, frame, iframe, img és map elemkhez használható name atttribútumot. Szintén a HTML 4 vezette be az id attribútumot Mindkét attribútum a dokumentumon belüli navigációhoz lett tervezve,
azonosítóként Az XML-ben a részazonosító típusa ID és elemenként egy ID típusú attribútum használható. Ezért az XHTML 1.0 -ban az id attribútum lett ID típusúként definiálva Tehát annak érdekében, hogy az XHTML 1.0 dokumentum valóban jól strukturált XML dokumentum legyen, az XHTML 10 dokumentumokban az id attribútumot kell használni azonosítóként a fent felsorolt elem esetében (mivel néhány böngésző 26 2.6 Kapcsolatok más szabványokkal nem támogatja még a id attribútum ilyen használatát, XHTML 1.0 esetén érdemes mindkét attribútumot megadni). Az XHTML 1.0-ben a name attribútum használata formálisan „nem javasolt” és az XHTML 11 verzióban meg is lett szüntetve 2.57 Attribútumok előre definiált értékkészlettel Mind a HTML 4, mind az XHTML rendelkezik néhány olyan attribútummal, amelyek értékkészlete előre definiált és korlátozott (pl.: az input címek type attribútuma) Az SGML és az XML ezeket felsorolt
attribútumoknak nevezi. A HTML 4 -ben ezen értékek kiértékelése nem érzékeny a kis- és nagybetűhasználatra, így a TEXT érték megegyezik a text értékkel Az XML -ben viszont ezen attribútumok kiértékelése érzékeny a kis- és nagybetűhasználatra, és az XHTML 1 -ben minden ilyen attribútum kisbetűsként lett definiálva. 2.58 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ő karakterhivatkozásokat. Az SGML-ben ezek a hivatkozások vagy &#Xnn; vagy &#xnn; módon használatosak. Az XML dokumentumokban a kisbetűs verziót kell használni 2.59 Címke nyelvének megadása Egy tag nyelvének megadásakor mind a lang, mind az xml:lang attribútumok használandók. Az xml:lang attribútum értéke elsőbbséget élvez. 2.6 Kapcsolatok más szabványokkal 2.61 XML Ld. 23 és 24 fejezeteket 2.62 DOM A Document Object Model Level 1 ajánlás (ld. JavaScript előadá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űvel, míg az XML-ében olyan betűvel kell visszaadni, ahogyan azok definiálva lettek. Az XHTML 10-ban, az elemek és attribútumok nevét kisbetűvel kell írni, tehát kisbetűvel szerepelnek az objektummodellben. Ez a nyilvánvaló különbség két módon érhető el: • Azok a böngészők, amelyek text/html Internet médiatípusként9 megadott XHTML dokumentumot elemeznek, a DOM-on keresztül használhatják a HTML DOM-ot, és bízhatnak abban, hogy a tag- és attribútumneveket a csatlakozófelülettől nagybetűsen kapják meg. • Azok a böngészők, 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űsen térnek vissza Ezenkívül, előfordulhat, hogy néhány XHTML tag
nem jelenik meg az objektumfán, mivel azok a tartalommodellben opcionálisan szerepelnek (pl. a tbody címke a table tagen belül) Ez azért fordul elő, mert a HTML 4-ben engedélyezve volt néhány elem minimalizált használata, vagyis hiányozhatott kezdő és záró címkéje. Ez az XML-ben nem lehetséges, az XHTML ezeket az elemeket opcionálissá tette. A felhasználói alkalmazások írásánál erre fel kell készülni [16] 9 MIME Type, itt nem részletezem, ld. http://wwww3org/TR/xhtml-media-types/ 27 2 XHTML 2.63 CSS A Cascading Style Sheets 2 ajánlás (ld. 3 fejezet) írja le azokat a stílustulajdonságokat, amelyek alkalmazhatók a HTML vagy XML dokumentumok dokumentumfáján A dokumentumok elemzéseinek különbségei különböző vizuális (és hang-) hatásokat eredményeznek a használt szelektoroktól függően A következő javaslatokat érdemes betartani annak érdekében, hogy a dokumentum módosítás nélkül megfeleljen a fenti kívánalmaknak:
1. Az XHTML dokumentumok CSS stíluslapjaiban a tag- és attribútumneveket kisbetűvel kell írni 2. A táblázatokban a tbody elem jelenlétét a HTML böngészők kikövetkeztetik, de az XML felhasználói alkalmazások értelmezői ezt nem teszik meg Ezért, ha CSS szelektor hivatkozik rá, a tbody elemet mindig explicit módon deklarálni kell. A HTML 4-ben és az XHTML-ben a style tag dokumentumon belüli stílusszabályok előírására használható. Az XML-ben stílusszabályok definiálására XML stíluslap deklaráció használandó Annak érdekében, hogy ezzel a konvencióval kompatibilis legyen, a style elemeknek saját id attribútummal megadott részazonosítóval kell rendelkezniük, és az XML stíluslap deklarációnak erre az azonosítóra kell hivatkoznia. Pl.: xhtmlexample02html Ld. még 254 fejezet 2.7 XHTML 1.1 A 2001-ben definiált XHTML 1.1 eltávolodott a HTML 4-től és az XHTML 10-tól A legfeltűnőbb eltérés, hogy számos érvénytelenített
funkciót kivettek a szabványból a strukturális funkcionalitás jegyében Az eltérése: 1. Minden tagnél eltűnt a lang attribútum a xml:lang javára 2. Az a és map tageknél a name attribútum eltűnt a id attribútum javára 3. ruby néven egy betűsorhoz magyarázó szöveget rendelhetünk (főleg Kelet-Ázsiában használják majd, még nem támogatják a böngészők) , ld. 3 ábra) 3. ábra Ruby komment 28 3. CSS 3.1 Története, létrejöttének okai 3.11 Története 1996 Cascading Style Sheets, level 1 1998 Cascading Style Sheets, level 2 1999 Cascading Style Sheets, level 1 revised 3.12 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őre bízták. A böngészők 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ől 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ő alatt (jó lenne, mi? :-)) • hierarchikusan több stíluslap adható meg • egy helyen tárolt a stílus, egyszerre változtatható meg • bővebb formázási lehetősé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.21 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ője. A deklaráció során elméletileg nem kell ismernünk a forrástartalmat, csupán annak szerkezetét (dokumentumfa) A gyakorlatban általában mindig konkrét tartalomhoz tervezünk stíluslapokat, ez a designer feladata. {TULAJDONSAG: ERTEK} {TULAJDONSAG1: ERTEK1; TULAJDONSAG2: ERTEK2; . TULAJDONSAGN: ERTEKN}
Pl.: {font-family: Arial; color:red} 3.22 Stílus specifikáció A stílus specifikáció során adott stíluslapot alkalmazunk a konkrét tartalomra. A specifikáció során elvileg nem kell ismernünk az alkalmazandó stíluslap szerkezetét, amely gyakran nem is létezik még ekkor. De érdemes szem előtt 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őjét. A stílus specifikáció egyike a HTML, PHP, stb. coder feladatainak A stíluslapok többféleképpen lehetővé teszik a stílusinformációk definiálását. A stílus magában egy adott HTML tagben is definiálható a dokumentumon belül, az egész dokumentumra vonatkozólag a HTML 29 3 CSS oldal <head> tagjén belül vagy egy külső CSS fájlban. Sőt akár több külső 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ő stílusok prioritása az alábbiak szerint növekszik: 1. Böngésző default stílusa 2. Felhasználó által definiált stílus 3. Külső stíluslap (Linking Style Sheet) (külső fájlban) 4. Belső 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ő 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.: cssexample01html Belső stíluslap (Embedding Style Sheet) A HTML fejlécében kell elhelyezni: . <HEAD> <STYLE TYPE="text/css"> SZELEKTOR1 {.} SZELEKTOR2 {.} . SZELEKTORn {.} </STYLE> </HEAD> . Pl.: cssexample02html Sorközi stílus (Inline Styles) Bármely tagben elhelyezhető:
. <TAG STYLE="TULAJDONSAG: ERTEK"> . </TAG> . Pl.: cssexample03html 30 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.: cssexample04html 3.3 Szelektorok A szelektorok tulajdonképpen mintaillesztési szabályok, amelyekkel a forrásdokumentumból választhatunk bizonyos tageket, amelyek stílusát felül akarjuk definiálni, megjelenítésüket meg akarjuk határozni. A { és } között adjuk meg a beállítandó tulajdonságokat. Pl TD A {font-family: Arial; color:red} 3.31 Univerzális szelektor * {.} A stílus minden tagre vontakozik a dokumentumon belül. 3.32 Típus szelektor SZELEKTOR {.} A SZELEKTOR egy HTML tag, amelynek stílusát definiálni akarjuk. 3.33 Szelektorok kontextusa TAG1, TAG2, ., TAGn {} Egyszerre több tagnek állíthatunk be azonos tulajdonságokat.
TAG1 TAG2 {.} Azon TAG2 tagek tulajdonságát állítjuk be, amelyek TAG1 típusú tagek leszármazottja. TAG1 > TAG2 {.} Azon TAG2 tagek tulajdonságát állítjuk be, amelyek TAG1 típusú tagek gyermekei (közvetlen leszármazottai). TAG1 + TAG2 {.} Azon TAG2 tagek tulajdonságát állítjuk be, amelyeket közvetlenül megelőz egy TAG1 típusú tag. Pl.: cssexample05html 31 3 CSS 3.34 Szelektor osztályok (Class Selector) Szelektor osztályok definiálásával azonos tagek különböző változatait hozhatjuk létre. Ez a HTML DTD-jének tetszőleges bővítésével egyenértékű művelet. Tag-specifikus: TAG.name1 {} TAG.name2 {} . TAG.nameN } Minden tagre: .name1 {} .name2 {} . .nameN {} Az osztálynév nagybetű-érzékeny. Hivatkozás HTML-ben: <TAG CLASS="namei"> Pl.: cssexample06html, cssexample07html 3.35 ID szelektor Az ID szelektorral egyedi azonosítót (id-t) rendelhetünk egy taghez. #id1 {.} #id2 {.} . #idN {.} Az ID
nagybetű-érzékeny. Hivatkozás HTML-ben: <TAG1 ID="idi"> Pl.: cssexample08html Az ID szelektor prioritása nagyobb, mint a class-é, így ha mindkettő 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.36 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ő alapján tesznek lehetővé tagelérést. A pszeudo-osztályok és osztályok együttes megadásának szintaxisa: TAG.class:pseudoclass {} 32 3.3 Szelektorok Első gyerekelem TAG:first-child {.} Akkor állít be a TAG-re tulajdonságot, ha az első gyerekelemként szerepel. Az alábbi példában az olyan cikkek első 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ő sor és betű Első sor: TAG:first-line {.} Első betű: TAG:first-letter {.} Link A:link {.} A:visited {.} Dinamikus pszeudo-osztályok TAG:hover {.} TAG:active {.} TAG:focus {.} Interaktív média esetén támogatott. Sorrendben: a felhasználó elmozgatja a pointing eszközt (tipikusan egeret) az adott elem felett, kiválasztja az elemet, ill. az elem fókuszt kap Nyelv TAG:lang(C) {.} vagy 33 3 CSS :lang(C) {.} A böngésző á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ő szöveggenerálásra használják 3.4 Betűtípus 3.41 Betűtípus család (font family) {font-family: CSALAD} {font-family: CSALAD1, CSALAD2, ., GEN CSALAD} A CSALAD lehet Helvetica, Arial,
stb; a GENERIKUS CSALAD serif, sans-serif, cursive, fantasy, monospace lehet. A betűközt tartalmazó betűtípus neveket idézőjelbe kell tenni (pl. "Comic Sans") A generikus betűtípust utolsó lehetőségként kell megadni 3.42 Betűméret {font-size: MERET} A MERET lehet • explicit nagyság: px, pt, in, cm, %, amelyek pixel, pont, inch, centiméter, százalék • viszonylagos méret: xx-small, x-small, small, medium, large, x-large, xx-large • relatív méret: smaller vagy larger A pixelben megadott méret a képernyőt, míg a pontban megadott (gondoljunk a 12-es betűméret fogalmára a szövegszerkesztésben) a nyomtatást veszi alapul a betű méretezésekor. Az előbbi mind PC-n, mind Mac-en azonos képet add, az utóbbi Mac-en kisebb méretben jelenhet meg. 3.43 Betűvastagság (font weight) {font-weight: VASTAGSAG} A VASTAGSAG lehet: • explicit bináris: normal vagy bold • relatív bináris: bolder vagy lighter 34 3.5 Szöveg 3.44
Betűdőltség (font style) {font-style: DOLTSEG} A DOLTSEG lehet: • normal • italic 3.45 Szöveg aláhúzás (text decoration) {text-decoration: DEKORACIO} A DEKORACIO lehet: • none • underline • line-through • blink ez csak a Netscape családnál működik 3.46 Kisbetű-nagybetű átalakítás {text-transform: TRANSZFORMACIO} A TRANSZFORMACIO lehet: • none • capitalize • uppercase • lowercase 3.47 Betűtípus megadás egyszerre {font: font-style font-variant font-weight font-size/line-height font-family} 3.5 Szöveg 3.51 Sormagasság {line-height: MAGASSAG} A MAGASSAG lehet: • normal • explicit méret: px, pt, in, cm, % 35 3 CSS 3.52 Vízszintes igazítás {text-align: IGAZITAS} Az IGAZITAS lehet: • left, center vagy right • justify 3.53 Függőleges igazítás {vertical-align: IGAZITAS} Az IGAZITAS lehet: • baseline, top, middle, bottom, text-top vagy text-bottom (ld. 4 ábra) • sub vagy super 4. ábra Függőleges
igazítás 36 3.6 Lista 3.54 Szöveg körbefuttatása A szöveg mehet az elem mellé: {float: IGAZITAS} Az IGAZITAS lehet: • left • right • none Például szövegbe ágyazott képeknél használatos. A szöveg az elem alá menjen: {clear: IGAZITAS} Az IGAZITAS lehet: • left • right • both • none 3.55 Bekezdés {text-indent: BEHUZAS} Az BEHÚZÁS lehet px, pt, in, cm, em vagy %. 3.6 Lista 3.61 Lista típusa {list-style-type: TIPUS} A TIPUS lehet: • nem sorrendezett lista: disk, circle, square, decimal vagy none • sorrendezett lista: lower-roman, upper-roman, lower-alpha vagy upper-alpha {list-style-image: KEP} A KEP lehet: • URL: url(kepfile) • sorrendezetlen lista: none 37 3 CSS 3.62 Lista igazítása {list-style-position: IGAZITAS} Az IGAZITAS lehet inside vagy outside. Az előbbinél a lista második sora a jel alá kerül, az utóbbinál a második sor az első alá. 3.63 Lista meghatározása egyszerre {list-style: type position url}
3.7 Szín és háttér 3.71 Előtérszín {color: SZIN} A SZIN lehet: • színkód: #RRGGBB • szín neve 3.72 Háttérszín {background-color: SZIN} A SZIN lehet: • színkód: #RRGGBB • szín neve • átlátszó: transparent 3.73 Háttérkép Háttérkép megadása: {background-image: KEP} A KEP url(filenev) alakú. Háttérkép ismétlése: {background-repeat: ISMETLES} Az ISMETLES lehet: • repeat • no-repeat • repeat-x • repeat-y 38 3.8 Dobozolás Háttérkép rögzítése: {background-attachment: ROGZITES} A ROGZITES lehet: • scroll • fixed Háttérkép helye: {background-position: VIZSZINTES FUGGOLEGES} {background-position-x: VIZSZINTES} {background-position-y: FUGGOLEGES} A VIZSZINTES és FUGGOLEGES pozíció lehet: • igazítás: left, center, right • explicit méret: px, pt, in, cm, em vagy % Háttér meghatározása egyszerre: {background: url() color repeat attachment position} 3.8 Dobozolás 3.81 Doboz-orientált modell Ld. az 5
ábrán 5. ábra Doboz modell felépítése 3.82 Margó (margin) {margin-left: MARGO} {margin-right: MARGO} {margin-top: MARGO} {margin-bottom: MARGO} 39 3 CSS {margin: MARGO} /* minden margo / {margin: MARGO MARGO} /* top&bottom, right&left / {margin: MARGO MARGO MARGO} /* top, left&right, bottom / {margin: MARGO MARGO MARGO MARGO} /* top, right, bottom, left / A MARGO lehet px, pt, in, cm, em vagy %. 3.83 Szegély (border) A szegély stílusa: {border-style: STILUS} {border-top-style: STILUS} {border-right-style: STILUS} {border-bottom-style: STILUS} {border-left-style: STILUS} A STILUS lehet none, dotted, dashed, solid, double, groove, ridge, inset vagy outset (ld. 6 ábra) 6. ábra CSS-ben használt szegélystílusok A szegély szélessége: {border-width: SZELESSEG} {border-top-width: SZELESSEG} {border-right-width: SZELESSEG} {border-bottom-width: SZELESSEG} {border-left-width: SZELESSEG} A SZELESSEG lehet: • relatív: thin, medium vagy thick •
explicit méret: px, pt, in, cm vagy em 40 3.8 Dobozolás A szegély színe: {border-color: SZIN} {border-top-color: SZIN} {border-right-color: SZIN} {border-bottom-color: SZIN} {border-left-color: SZIN} A SZIN lehet: • színkód: #RRGGBB • szín neve Szegély megadása egyszerre: {border: width style color} {border-top: width style color} {border-right: width style color} {border-bottom: width style color} {border-left: width style color} 3.84 Ráhagyás (Padding) {padding-left: RAHAGYAS} {padding-right: RAHAGYAS} {padding-top: RAHAGYAS} {padding-bottom: RAHAGYAS} {padding: RAHAGYAS} /* mindenhol / {padding: RAHAGYAS RAHAGYAS} /* top&bottom, right&left / {padding: RAHAGYAS RAHAGYAS RAHAGYAS} /* top, left&right, bottom / {padding: RAHAGYAS RAHAGYAS RAHAGYAS RAHAGYAS} /* top, right, bottom, left / A RAHAGYAS lehet px, pt, in, cm vagy em. 3.85 Tartalom méretei (content) {width: MERET} {height: MERET} A MERET lehet px, pt, in, cm, em, % vagy auto. (Hogy N6
alatt is jól működjön, be kell állítani az overflow tulajdonságot. IE3 és N4 alatt még nem működött) 3.86 Túlfutás (overflow) {overflow: TIPUS} A TIPUS lehet • visible: a megadott méretből(width, height) kilógó részek látszanak, átlóghatnak az oldal többi részére 41 3 CSS • hidden: a kilógó részek nem látszanak • scroll: a dobozon gördítősávok jelennek meg, nincs átlógás • auto: csak akkor jelenik meg gördítősáv, ha szükséges 3.9 Táblázat A táblázat formázása során az 1. ábrán szereplő felépítést kell figyelembe venni, ez érvényes CSS-re is 3.91 Szegély Mint a dobozoknál. 3.10 Pozíció és vizuális effektusok 3.101 Doboz pozicionálás {position: POZICIO} A POZICIO lehet • static • relative • absolute {left: TAVOLSAG} {top: TAVOLSAG} {right: TAVOLSAG} {bottom: TAVOLSAG} A TAVOLSAG lehet px, pt, in, cm, em, % vagy auto. (IE3 alatt teljesen hiányzott, N4 és IE4 alatt nem volt még a
right.) Relatív pozícionálás példa: cssexample09.html Abszolút pozícionálás példa: cssexample10.html 3.102 Z-Index Az egyes elemek z-irányú (a monitorból kifelé mutató tengely) pozícióját adja meg. Tehát a nagyobb z-indexű elem elfedik a kisebb értékkel rendelkezőket. Ha explicit nem adjuk meg, a HTML forrásában megadásuk sorrendjében kapnak indexet. {z-index: INDEX} Az INDEX lehet: • egész szám • auto 42 3.11 Médiatípusok 3.103 Vágás {clip: VAGAS} A VAGAS lehet: • rect(TAVOLSAG TAVOLSAG TAVOLSAG TAVOLSAG) (top right bottom left sorrendben) • auto A TÁVOLSÁG lehet px, pt, in, cm vagy em. 3.104 Láthatóság {visibility: LATHATOSAG} A LATHATOSAG lehet: • visible • hidden 3.105 Megjelenítés {display: MOD} A MOD lehet: • block • inline • list-item (csak IE6 és N6-ban, IE3 és N4 alatt még nem működött.) Pl.: cssexample11html 3.11 Médiatípusok A stíluslapok egyik legfontosabb és legkedvezőbb
tulajdonsága, hogy a megjelenítendő tartalom formázása eltérő lehet különböző médiákon: képenyőn, nyomtatásban, beszédszintetizátoron vagy braille eszközön (a mai böngészők az első két médiát támogatják). A média megadás többféle módon lehetséges: • @media parancs segítségével @media print { /* style sheet for print goes here / } • @import parancs paramétereként @import url("print.css") print; • HTML fejlécében 43 3 CSS <LINK rel="stylesheet" type="text/css" media="print, screen" href="foo.css"> A gyakorlatban használt médiatípusok: • all minden megjelenítőre • screen képernyőn való megjelenítésre • print nyomtatásra 3.12 Felhasználói interface A felhasználói interface stíluselemek interaktív médiák esetén alkalmazhatók. 3.121 Egérkurzor TAG { cursor : cursor1, cursor2, . } ahol a cursori az alábbi értékeket veheti fel:
url("valami.cur"), auto, crosshair, default, pointer, move, e-resize, ne-resize, nw-resize, n-resize, se-resize, sw-resize, s-resize, w-resize, text, wait, help Az url nem minden (csak például IE6+) böngésző által támogatott. 3.122 Asztali színek A böngésző asztali színbeállításai konstans formájában elérhetők. ActiveBorder Aktív ablakkeret ActiveCaption Aktív ablak címsor AppWorkspace Munkaterület színe Background Asztal háttere ButtonFace Nyomógomb felszínének színe ButtonHighlight Nyomógomb fényes oldala ButtonShadow Nyomógomb árnyékos oldala ButtonText Nyomógomb szövege CaptionText Címsor szövege, gördítősáv nyilai GrayText Kiszürkített (nem elérhető) szöveg Highlight Kijelölés HighlightText Kijelölés szövege InactiveBorder Inaktív ablakkeret InactiveCaption Inaktív ablak címsor InactiveCaptionText Inaktív ablak címsor szövege InfoBackground Az eszköztipp doboz háttere InfoText Az info ablak szövege Menu
Menü háttere MenuText Menü szövege Scrollbar Gördítősáv mezője ThreeDDarkShadow A 3d-s gui elemek sötét-árnyékos oldala ThreeDFace A 3d-s gui elemek felszínének színe ThreeDHighlight A 3d-s gui elemek kijelölésének színe ThreeDLightShadow A 3d-s gui elemek fényes oldala ThreeDShadow A 3d-s gui elemek árnyékos oldala Window Ablak háttere WindowFrame Ablak kerete WindowText Ablak szövege Pl.: cssexample13html 44 HIVATKOZÁSOK Hivatkozások [1] Css maxdesign. http://cssmaxdesigncomau [2] Irodalom a digitális közegben v1.0 http://wwwhipertextinfo [3] Elveszett világ. http://mud0660hu, 1995 [4] Domonkos Balázs. Css előadás 2004 Nyári KIR fejlesztői tábor, 2004 [5] Domonkos Balázs. Xml előadás 2004 Nyári KIR fejlesztői tábor, 2004 [6] T. Berners-Lee Uniform resource identifiers (uri): Generic syntax http://wwwietforg/rfc/rfc2396txt, 1998. [7] Ted Nelson. Xanadu projekt http://xanaducom, 1960 óta [8] Polyhistor. Htmlinfo
http://htmlinfopolyhistorhu, 2001 [9] W3C. Cascading style sheets, level 1 http://wwww3org/TR/REC-CSS1, 1996-1999 [10] W3C. Cascading style sheets, level 2 http://wwww3org/TR/REC-CSS2, 1998 [11] W3C. Document object model (dom) level 1 specification http://wwww3org/TR/1998/REC-DOMLevel-1-19981001, 1998 [12] W3C. Html 401 specification http://wwww3org/TR/html401, 1999 [13] W3C. Document object model (dom) level 2 core specification http://wwww3org/TR/2000/RECDOM-Level-2-Core-20001113, 2000 [14] W3C. Xhtml 11 - module-based xhtml http://wwww3org/TR/xhtml11, 2001 [15] W3C. Xhtml 1.0 the extensible http://www.w3org/TR/xhtml1, 2002 hypertext markup language (second edition). [16] W3C. Xhtml media types http://wwww3org/TR/xhtml-media-types, 2002 45 A FOGALMAK A. Fogalmak WWW World Wide Web W3C World Wide Web Consortium SGML Standard Generalised Markup Language, dokumentum-tartalom átfogó leírására alkalmas metanyelv HTML HyperText Markup Language XML eXtensible Markup
Language XHTML eXtensible HyperText Markup Language style sheet (stíluslap) olyan leírás, amely megadja, hogyan jelenjen meg egy adott tartalom (dokumentum) valid style sheet (érvényes/helyes stíluslap) a CSS nyelvtannak megfelelő stíluslap. Minden CSS1 style sheet, valid CSS2 stíluslap, de néhány jelentésbeli eltéréstől eltekintve azonosan használható VRML Virtual Reality Modelling Language, a virtuális valóság leírására alkalmas leírónyelv MathML Mathematical Markup Language, matematikai tartalom leírására alkalmas XML-alapú leíró nyelv forrásdokumentum azon tartalom, amelyen egy vagy több stíluslapot alkalmazunk (vagyis amit a stíluslapok formáznak) tag jelölő, címke, elem, SGML nyelvi elem, a dokumentum alapvető struktúrájának leírására alkalmas attribútum egy tag tulajdonságát megadó nyelvi elem, mely attribútum-névből és attribútum-értékből áll tartalom egy tag-hez tartozó szöveges tartalom vagy gyermek tagjei;
amelyik tagnek nincs tartalma azt üres tagnek nevezik megjelenített tartalom a dokumentumban tárolt tartalom megjelenése valamilyen médián (képernyő, nyomtató, hang, stb); általában a tárolt tartalom kiegészült különböző elemekkel (pl. sorszámozás, keret, stb). dokumentum fa a dokumentumot felépítő tagek áltál meghatározott fa (pontosabban nem fa, mert az elemek sorrendje is számít). Minden tagnek pontosan egy szülőtag-je van a gyökérelemet kivéve, mert annak nincs szülője. felhasználó az az egyed (személy, robot, stb), amely az oldalt megtekinti user agent (UA) azon program, amely értelmezi a forrásdokumentumot és a stíluslapokat és a megjelenített tartalmat előállítja (pl. böngésző) DTD dokumentumtípus meghatározás (document type definition), XML leírások összessége, amelyek meghatározzák az adott DTD-t használó dokumentum érvényes struktúráját. 46 B. Példák B.1 HTML htmlexample01.html <!DOCTYPE HTML
PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3org/TR/html4/strictdtd"> <HTML> <HEAD> <TITLE>Az elsH o HTML dokumentumom</TITLE> </HEAD> <BODY> <P>Hello World!</P> </BODY> </HTML> htmlexample02.html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3org/TR/html4/loosedtd"> <HTML> <HEAD> <META http-equiv="content-type" content="text/html; charset=iso-8859-2"> <TITLE>Példa az érvénytelenített body attribútumokról</TITLE> </HEAD> <BODY text="brown" link="blue" vlink="darkblue" alink="lightblue" bgcolor="ivory"> <P><A href="http://google.com">Hello</A> World!</P> </BODY> </HTML> htmlexample03.html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3org/TR/html4/strictdtd"> <HTML> <HEAD> <TITLE>Kiemelés példák</TITLE> <META http-equiv="content-type" content="text/html; charset=iso-8859-2"> </HEAD> <BODY> <P> <EM>Kiemelés</EM>, <STRONG>erH os kiemelés</STRONG>, <CITE>idézet</CITE>, <DFN>definíció</DFN>, <CODE>programkód</CODE>, <SAMP>programkimenet</SAMP>, <KBD>felhasználói bemenet</KBD>, <VAR>programváltozó</VAR>, <ABBR>rövidítés</ABBR>, <ACRONYM>betH uszó</ACRONYM>. 47 B PÉLDÁK </P> </BODY> </HTML> htmlexample04.html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3org/TR/html4/strictdtd"> <HTML> <HEAD> <TITLE>Idézet példák</TITLE> <META http-equiv="content-type" content="text/html;
charset=iso-8859-2"> </HEAD> <BODY> <BLOCKQUOTE cite="http://www.mycomcom/tolkien/twotowershtml"> <P>They went in single file, running like hounds on a strong scent, and an eager light was in their eyes. Nearly due west the broad swath of the marching Orcs tramped its ugly slot; the sweet grass of Rohan had been bruised and blackened as they passed.</P> </BLOCKQUOTE> <P>John said, <Q lang="en-us">I saw Lucy at lunch, she told me <Q lang="en-us">Mary wants you to get some ice cream on your way home.</Q> I think I will get some at Ben and Jerry’s, on Gloucester Road.</Q></P> </BODY> </HTML> htmlexample05.html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3org/TR/html4/strictdtd"> <HTML> <HEAD> <TITLE>Index példák</TITLE> <META http-equiv="content-type" content="text/html;
charset=iso-8859-2"> </HEAD> <BODY> <P>Normál szöveg <SUB>alsó index</SUB> <SUP>felsH o index </SUP>.</P> <P><SUB>Alsó<SUP>felsH o<SUB>király<SUP>ász</SUP></SUB></SUP> </SUB><SUP></P> </BODY> </HTML> htmlexample06.html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3org/TR/html4/strictdtd"> <HTML> <HEAD> <TITLE>Sortörés példák</TITLE> 48 B.1 HTML <META http-equiv="content-type" content="text/html; charset=iso-8859-2"> </HEAD> <BODY> <P>A soremelést a <EM>user agent</EM> intézi szépen magának.</P> <P>Természetesen lehetH oségünk van <BR>explicit sortörés kijelölésére.</P> <H1>Valamintazi . sorttörjön be rhet</H1>
<H1>IttválasszelGéza­márhanagyon . refox</H1> </BODY> </HTML> htmlexample07.html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3org/TR/html4/strictdtd"> <HTML> <HEAD> <TITLE>Verziókövetés példák</TITLE> <META http-equiv="content-type" content="text/html; charset=iso-8859-2"> </HEAD> <BODY> <P>Micimackónak <DEL>7</DEL><INS>8</INS> barátja van.</P> </BODY> </HTML> htmlexample08.html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3org/TR/html4/strictdtd"> <HTML> <HEAD> <TITLE>Lista példák</TITLE> <META http-equiv="content-type" content="text/html; charset=iso-8859-2"> </HEAD> <BODY> <P>Háromféle listatípus létezik:</P> <UL> <LI> Sorrend nélküli lista <LI>
Sorrendezett lista <LI> Definíciós lista </UL> <P>Háromféle listatípus létezik:</P> <OL> <LI> Sorrend nélküli lista <LI> Sorrendezett lista <LI> Definíciós lista 49 B PÉLDÁK </OL> <P>Listatípusok definiálása:</P> <DL> <DT> Sorrend nélküli lista <DD> <CODE>UL</CODE> tag (unordered list) segítségével definiálható. <DT> Sorrendezett lista <DD> <CODE>OL</CODE> tag (ordered list) segítségével definiálható. <DT> Definíciós lista <DD> <CODE>DL</CODE> tag (definition list) segítségével definiálható. </DL> <P>TöbbszintH u listák:</P> <OL> <LI> Alma <UL> <LI> Zöld <OL> <LI> Cucc <LI> Bugi </OL> <LI> Piros <LI> Sárga </UL> <LI> Körte <OL> <LI> Jóság <LI> Rosszság </OL> </OL> </BODY>
</HTML> htmlexample09.html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3org/TR/html4/strictdtd"> <HTML> <HEAD> <TITLE>Táblázat példák</TITLE> <META http-equiv="content-type" content="text/html; charset=iso-8859-2"> </HEAD> <BODY> <TABLE width="640px" border="1px" frame="hsides" rules="groups"> <CAPTION>Táblázat felirata</CAPTION> <COLGROUP span="3"> <COL width="5*"> <COL width="5*"> <COL width="5*"> 50 B.1 HTML </COLGROUP> <COLGROUP> <COL width="1*"> </COLGROUP> <THEAD> <TR><TD colspan="4">Táblázat fejléce</TD></TR> <TFOOT> <TR><TD colspan="4">Táblázat lábléce</TD></TR> </TFOOT> <TR> <TD>1.1</TD>
<TD>1.2</TD> <TD>1.3</TD> <TD>1.4</TD> </TR> <TR> <TD>2.1</TD> <TD>2.2</TD> <TD>2.3</TD> <TD>2.4</TD> </TR> <TR> <TD>3.1</TD> <TD>3.2</TD> <TD>3.3</TD> <TD>3.4</TD> </TR> <TR> <TD>4.1</TD> <TD>4.2</TD> <TD>4.3</TD> <TD>4.4</TD> </TR> <TR> <TD>5.1</TD> <TD>5.2</TD> <TD>5.3</TD> <TD>5.4</TD> </TR> </TABLE> </BODY> </HTML> htmlexample10.html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3org/TR/html4/loosedtd"> <HTML> <HEAD> <TITLE>Hiperlink példák</TITLE> <META http-equiv="content-type" content="text/html; charset=iso-8859-2"> </HEAD> <BODY> 51 B PÉLDÁK <P><A
name="top">Az oldal teteje</A></P> <P><A href="htmlexample09.html">ElH ozH o példa</A></P> <P><A href="htmlexample11.html">KövetkezH o példa</A></P> <P><A href="http://google.com">Link a Google-re</A></P> <P><A href="ftp://ftp.kernelorg/pub/">FTP link</A></P> <P><A href="http://google.com" target=" blank">Új ablakba</A></P> <P><A href="#">Link önmagamra</A></P> <P>TEXT, TEXT, TEXT, TEXT, TEXT, TEXT, TEXT, TEXT, </P> . <P>TEXT, TEXT, TEXT, TEXT, TEXT, TEXT, TEXT, TEXT, </P> <P><A href="#top">Ugrás a tetejére</A></P> </BODY> </HTML> htmlexample11.html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3org/TR/html4/strictdtd"> <HTML>
<HEAD> <TITLE>Kép példa</TITLE> <META http-equiv="content-type" content="text/html; charset=iso-8859-2"> </HEAD> <BODY> <P><IMG alt="Sünis kép" src="suni.jpg"></P> <P><IMG alt="50 százalékos sünis kép" src="suni.jpg" width="50%"></P> <P> <IMG alt="Sünis kép" src="suni.jpg" usemap="#sunimap"> <MAP name="sunimap"> <AREA alt="szeme" shape="circle" coords="150,90,20" href="htmlexample01.html"> <AREA alt="füle" shape="poly" coords="130,60,130,100,90,60" href="htmlexample02.html"> </MAP> </P> </BODY> </HTML> htmlexample12.html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3org/TR/html4/framesetdtd"> <HTML>
<HEAD> <TITLE>Keret példa</TITLE> <META http-equiv="content-type" content="text/html; charset=iso-8859-2"> </HEAD> <FRAMESET rows="100, *"> <FRAME src="htmlexample02.html"> <FRAMESET cols="25%, 75%"> <FRAME src="index.html"> 52 B.1 HTML <FRAME name="main" src="htmlexample01.html"> </FRAMESET> </FRAMESET> </HTML> htmlexample13 get.html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3org/TR/html4/strictdtd"> <HTML> <HEAD> <TITLE>H urlap példa</TITLE> <META http-equiv="content-type" content="text/html; charset=iso-8859-2"> </HEAD> <BODY> <H2>Regisztráció a kiskunborzasztói halfeldolgozó üzemben: </H2> <FORM action="http://home.webtanfolyamschbmehu/domi/dumpphp" method="GET">
<FIELDSET> <LEGEND>Azonosítás</LEGEND> <INPUT name="hidden" type="hidden" value="Rejtett tartalom"> <P> <LABEL for="name id" accesskey="N">Név (legfeljebb 6 karakter):</LABEL> <INPUT name="name" type="text" maxlength="6" id="name id" tabindex=1> (alt + N) </P> <P> Jelszó: <INPUT name="passwd" type="password" tabindex=2 accesskey="J">(alt + J) </P> </FIELDSET> <FIELDSET> <LEGEND>Kapcsolat</LEGEND> <P> <INPUT name="neednews" type="checkbox" tabindex=3 checked> feliratkozom a hírlevélre (<A href="htmlexample01.html" tabindex=0>a személyes adatok kezelésérH ol</A>) </P> <P> Hol hallott a munkáról? <INPUT name="inform" type="radio" value="paper" tabindex=4>Újságban
<INPUT name="inform" type="radio" value="net" tabindex=5>Interneten </P> </FIELDSET> <FIELDSET> 53 B PÉLDÁK <LEGEND>ÉrdeklH odés</LEGEND> <P>Szakmai önéletrajzom: <INPUT name="cv" type="file" tabindex=6></P> <P> Kedvenc együttesem: <SELECT name="favband" tabindex=7> <OPTION>Apocalyptica</OPTION> <OPTION selected>Metallica</OPTION> <OPTION>Iron Maiden</OPTION> <OPTION value="9 inch nails">Nine Inch Nails</OPTION> <OPTION disabled>HIM</OPTION> <OPTION>Depeche Mode</OPTION> <OPTION>Ayreon</OPTION> </SELECT> </P> <P> Szívemnek kedves együttesek: <SELECT name="bands" size=3 multiple tabindex=8> <OPTION>Apocalyptica</OPTION> <OPTION>Metallica</OPTION> <OPTION>Iron Maiden</OPTION> <OPTION
value="9 inch nails">Nine Inch Nails</OPTION> <OPTION disabled>HIM</OPTION> <OPTION>Depeche Mode</OPTION> <OPTION>Ayreon</OPTION> </SELECT> </P> <P> Kedvenc ételem: <SELECT name="food" size=1 tabindex=9> <OPTGROUP label="Levesek" disabled> <OPTION>Húsleves</OPTION> <OPTION>Zöldségleves</OPTION> <OPTION>Gyimilcsleves</OPTION> </OPTGROUP> <OPTGROUP label="FH ozelékek"> <OPTION selected>Spenót</OPTION> <OPTION>FinomfH ozelék</OPTION> </OPTGROUP> </SELECT> </P> </FIELDSET> <FIELDSET> <LEGEND>Visszajelzés</LEGEND> <P> Ez a véleményem a dologról: <TEXTAREA name="text1" rows=4 cols=20 tabindex=10>Ez a tartalom.</TEXTAREA> </P> <P> Ebbe nem szólok bele: <TEXTAREA name="text2" rows=4 cols=20 readonly>Ez
a tartalom.</TEXTAREA> </P> 54 B.1 HTML <P> Ez meg nem is rám vonatkozik: <TEXTAREA name="text3" rows=4 cols=20 disabled>Ez a tartalom.</TEXTAREA> </P> </FIELDSET> <P> <INPUT type="submit" value="Mehet" tabindex=11> <INPUT type="image" value="Mehet" src="ok.gif" tabindex=12> <INPUT type="reset" value="Újra" tabindex=14> <INPUT type="button" value="Súgó" onClick="alert(’A formot töltsed ki, jól!’)" tabindex=16> </P> <P> <BUTTON type="submit" tabindex=13><IMG alt="OK image" src="ok.gif"><B>Mehet</B></BUTTON> <BUTTON type="reset" tabindex=15><IMG alt="Cancel image" src="cancel.gif"><B>Újra</B></BUTTON> <BUTTON type="button" onClick="alert(’A
formot töltsed ki, jól!’)" tabindex=17> <IMG alt="Help image" src="help.gif"><B>Súgó</B></BUTTON> </P> </FORM> </BODY> </HTML> index.html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3org/TR/html4/loosedtd"> <HTML> <HEAD> <TITLE>HTML példák</TITLE> <META http-equiv="content-type" content="text/html; charset=iso-8859-2"> </HEAD> <BODY> <P> <UL> <LI><P><A href="htmlexample01.html" target="main"> 1 példa </A></P> . <LI><P><A href="htmlexample13 post.html" target="main"> 13. példa (POST)</A></P> <HR> <LI><P><A href="htmlexample01.html" target=" blank"> 1. példa ( blank)</A></P> <LI><P><A
href="htmlexample01.html" target=" self"> 1. példa ( self)</A></P> <LI><P><A href="htmlexample01.html" target=" parent"> 1. példa ( parent)</A></P> <LI><P><A href="htmlexample01.html" target=" top"> 1. példa ( top)</A></P> </UL> 55 B PÉLDÁK </BODY> </HTML> B.2 XHTML xhtmlexample01.html <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3org/TR/xhtml1/DTD/xhtml1-strictdtd"> <html xmlns="http://www.w3org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>Az elsH o XHTML dokumentumom</title> </head> <body> <p>Hello XHTML!</p> </body> </html> xhtmlexample02.html <?xml-stylesheet href="W3C-REC.css"
type="text/css"?> <?xml-stylesheet href="#internalStyle" type="text/css"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3org/TR/xhtml1/DTD/xhtml1-strictdtd"> <html xmlns="http://www.w3org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>An internal stylesheet example</title> <style type="text/css" id="internalStyle"> code { color: green; font-family: monospace; font-weight: bold; } </style> </head> <body> <p> This is text that uses our <code>internal stylesheet</code>. </p> </body> </html> B.3 CSS cssexample01.css H1 { font-family: Arial; font-size: 40pt; Color:red } P { font-size: 12pt; line-height: 20pt } cssexample01.html <HTML> <HEAD> 56 B.3 CSS <LINK rel="stylesheet" type="text/css"
href="cssexample01.css"> </HEAD> <BODY> <H1>Today is fine.</H1> <P> Long before the advent of TV weather forecasters, people used tabletop glasses like a spherical flask to predict upcoming changes in weather. </P> </BODY> </HTML> cssexample02.html <HTML> <HEAD> <STYLE type="text/css"> H1 { font-family: Arial; font-size: 40pt; Color:red } P { font-size: 12pt; line-height:20pt } </STYLE> </HEAD> <BODY> <H1>Today is fine.</H1> <P> Long before the advent of TV weather forecasters, people used tabletop glasses like a spherical flask to predict upcoming changes in weather. </P> </BODY> </HTML> cssexample03.html <HTML> <HEAD> </HEAD> <BODY> <H1 style="font-family: Arial; font-size: 40pt; Color:red"> Today is fine. </H1> <P style="font-size:12pt; line-height:20pt"> Long before the advent of
TV weather forecasters, people used tabletop glasses like a spherical flask to predict upcoming changes in weather. </P> </BODY> </HTML> cssexample04.html <HTML> <HEAD> <STYLE type="text/css"> @import url(cssexample01.css); 57 B PÉLDÁK </STYLE> </HEAD> <BODY> <H1>Today is fine.</H1> <P> Long before the advent of TV weather forecasters, people used tabletop glasses like a spherical flask to predict upcoming changes in weather. </P> </BODY> </HTML> cssexample05.html <HTML> <HEAD> <STYLE type="text/css"> * {font-size:12pt} I {color:blue} I, B {font-size:18pt} H1 I {color:red} H1 > B {color:green} I + B {color:yellow} </STYLE> </HEAD> <BODY> <H1><B>Today</B> is <I>very <B>fine</B></I>.</H1> <I>Tomorrow</I> <B>will</B> <B>be</B> "fine".
</BODY> </HTML> cssexample06.html <HTML> <HEAD> <STYLE tyoe="text/css"> H3.red { font-family: Arial; font-size: 10pt; color:red} H3.green { font-family: Times New Roman; font-size: 14pt; color:green} </STYLE> </HEAD> <BODY> <H3 class="red">Today is fine.</H3> <H3 class="green">Today is fine.</H3> </BODY> </HTML> cssexample07.html <HTML> <HEAD> <STYLE type="text/css"> .green {font-family: Arial; color: green } .red {font-family: Times New Roman; font-size: 14pt; 58 B.3 CSS line-height: 20pt; color: red } </STYLE> </HEAD> <BODY> <H1 CLASS="green">Today is fine.</H3> <H2 CLASS="green">Today is fine.</H3> <H3 CLASS="green">Today is fine.</H3> <H4 CLASS="green">Today is fine.</H3> <P CLASS="green">Today is fine.</P>
<DIV CLASS="green">Today is fine.</DIV> <hr> <H1 CLASS="red">Today is fine.</H3> <H2 CLASS="red">Today is fine.</H3> <H3 CLASS="red">Today is fine.</H3> <H4 CLASS="red">Today is fine.</H3> <P CLASS="red">Today is fine.</P> <DIV CLASS="red">Today is fine.</DIV> </BODY> </HTML> cssexample08.html <HTML> <HEAD> <STYLE type="text/css"> #id100 { color:red } #id101 { color:green} .green { color:green} </STYLE> </HEAD> <BODY> <DIV id="id100">Today is fine.</DIV> <DIV id="id101">Today is fine.</DIV> <DIV class="green">Today is fine.</DIV> <DIV class="green" id="id100">Today is fine.</DIV> </BODY> </HTML> cssexample09.html <HTML> <HEAD> </HEAD>
<BODY> Today is fine. <div style="position:relative; left:20px; top:10px">Today is fine.</div> </BODY> </HTML> 59 B PÉLDÁK cssexample10.html <HTML> <HEAD> </HEAD> <BODY> <DIV style="font-size:large; color:lightgray"> TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT <!-- . --> TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT </DIV> <DIV style="position:absolute; left:0; top:0"> Today is fine. </DIV> <DIV style="position:absolute; right:0; bottom:0"> Today is fine. </DIV> </BODY> </HTML> cssexample11.html <HTML> <HEAD> </HEAD> <BODY> Today is fine. <SPAN style="display:block">Today is block.</SPAN> Today is fine <DIV style="display:inline">Today is inline.</DIV> Today is fine <DIV style="display:list-item">Today is list-item.</DIV> Today is
fine. </BODY> </HTML> cssexample12.html <HTML> <HEAD> </HEAD> <BODY> <A href="javascript:window.open(’cssexample13html’, ’popup’, ’toolbar=no,location=no,directories=no,status=no,menubar=no, resizable=no,scrollbars=no,caption=no,width=320,height=150, dialog=yes,minimizable=no,close=no,dependent=yes’)"> Klikk ide!</A> </BODY> </HTML> cssexample13.html <HTML> <HEAD> </HEAD> <BODY style="margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; overflow: hidden"> 60 B.3 CSS <TABLE style="width: 100%; height:100%; border-collapse: collapse; border-spacing: 0pt"> <TR> <TD style="color: CaptionText; background-color: ActiveCaption; font-weight: bold">Felpattanós ablakos</TD> </TR> <TR> <TD style="color: WindowText; background-color: ThreeDFace"> A rendszered bugyi!<BR>Akarod, hogy mégbugyibb legyen?
</TD> </TR> <TR> <TD style="color: WindowText; background-color: ThreeDFace; text-align: center"> <FORM><INPUT type="button" value="Legyen, persze!"> </FORM> </TD> </TR> </TABLE> </BODY> </HTML> 61
Írásunkban a műelemzések készítésének módszertanát járjuk körül. Foglalkozunk az elemzés főbb fajtáival, szempontjaival és tanácsokat adunk az elemzés legfontosabb tartalmi elemeivel kapcsolatban is. Módszertani útmutatónk főként tanulók számára készült!
