Szakkönyvek
Web, Webmester
Grafika, 3D, Videó
HTML és CSS - Webszerkesztés stílusosan
A HTML nyelvet eredetileg tulajdonképpen nem arra találták ki, hogy azt valaki "alacsony szinten" használja. Ennek ellenére a webfejlesztők alapvetően két táborra oszthatók. Vannak, akik valóban nem foglalkoznak magával a nyelvvel, inkább vizuális (WYSIWYG) eszközökre támaszkodnak, míg mások, elsősorban a hatékonyság érdekében "elmerülnek a részletekben". Az utóbbi típushoz tartozó leendő - de pillanatnyilag akár teljesen kezdő - szakembereknek írta ezt a könyvet Virginia DeBolt, aki a területen komoly oktatási tapasztalattal rendelkezik, és az a könyv minőségén, illetve felépítésén is érződik.A weblapok kézi szerkesztése kezdetben két okból is nehézkes volt. Egyrészt ismerni kellett hozzá a folyamatosan változó HTML nyelvet, illetve a különböző böngészőprogramok rigolyáit, másrészt - és ez különösen a kezdőket tudta halálra bosszantani - csaknem lehetetlen volt olyan szerkezetet kialakítani, amilyent megálmodtunk. Azt például, hogy egy kép és a hozzá tartozó szöveg pontosan ott jelenjen meg, ahova szántuk, csak egymásba ágyazott táblázatok, térkitöltők és egyéb, néha a fekete mágia tárgykörébe tartozó trükkök segítségével lehetett megoldani. Ha pedig meg akartunk változtatni egy betűtípust, ahhoz számtalan helyen kellett a forrást módosítanunk.
Aztán jött a CSS (Cascading Style Sheets), ami ezeket a problémákat - ha nem is egy csapásra - de megoldja. A lényege tulajdonképpen egészen egyszerű: válasszuk szét a tartalmat és a formát. A változás tehát lényegében annyi, hogy az eddigi egy nyelv helyett kettőt kell ismernünk, és ebből következőleg célszerű azokat egyszerre megtanulni. És pontosan ez az, ahogyan ez a könyv megközelíti a témát.
Ajánljuk mindenkinek, aki szeretne eleve szabványos webtervezési módszereket megtanulni, aki a hatékonyság érdekében nem riad vissza némi programozástól, aki már ismeri a HTML-t és talán kicsit a CSS-t is, de szeretné elmélyíteni, illetve rendszerezni a tudását, de annak is, aki soha, egyetlen weblapot sem készített még, de könnyen, és gyorsan szeretné a szükséges tudást elsajátítani.
Webshop ár: 5 980 Ft
Résztvevői ár: 4 500 Ft
Szerző: Virginia DeBolt
Oldalszám: 458
Szint: -
Kiadó: Kiskapu Kiadó
ISBN: 9789639301962
Kiadás éve: 2004
1. fejezet Hogyan írjunk XHTML és CSS kódot?
A webhelyek felépítése . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
Mi az XHTML és a HTML? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
Mi a különbség az XHTML és a HTML között? . . . . . . . . . . . . . . . . . . . . . . . . . 3
Mi a CSS? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
Ismerkedés az XHTML nyelvtanával . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
Kezdõ- és zárócímkék . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
Üres elemek . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
XHTML: különleges követelmények . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
Ismerkedés a CSS nyelvtanával . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
Kijelölõk és meghatározások . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
Idézõjelek . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
Gyakorlati példa . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16
Összefoglalás . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
2. fejezet Mindent a maga helyére, azaz: hová tegyük a stílusokat?
A rangsor . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20
Kezdjük a böngészõvel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21
Felhasználói stílusok . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22
Külsõ stílusok . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24
Beágyazott stílusok . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26
Szövegközi stílusok . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28
Öröklés . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30
Szûkítés . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30
Az @import utasítás használata . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33
Gyakorlati példa . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35
Összefoglalás . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37
3. fejezet A weblapok alapjai: DOCTYPE, fejléc, törzs és a törzs stílusai
Az XHTML lap . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39
A cél . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40
DOCTYPE meghatározások . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40
Az XML meghatározás . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43
Vágjunk bele! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43
A fejléc . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 44
Mentés . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45
A törzs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46
Nézzük meg a mûvünket böngészõben! . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46
A CSS lap . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46
A stíluslap létrehozása . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47
A háttér . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48
Színek megadása a weblapokon . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48
Hozzákapcsolás a stíluslaphoz . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50
Nézzük meg, mit alkottunk! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50
A margók . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51
Vigyük odébb a törzset! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 53
A szín nem minden! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 53
Gyakorlati példa . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 57
A body elemhez használható CSS tulajdonságok . . . . . . . . . . . . . . . . . . . . . . . . . 58
Tegyük próbára magunkat! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 58
Összefoglalás . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 59
vi HTML és CSS
4. fejezet Címsorok és címsorstílusok
Az XHTML lap . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61
A weblap szerkezetének kialakítása címsorok segítségével . . . . . . . . . . . . . . 62
A fejezet feldolgozásának módja . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 63
Felvétel az XHTML lapra . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 66
A CSS lap . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 67
Kezdjük a siteName jellemzõvel! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 68
Címsorok osztálykijelölõkkel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 72
Az eredmények összehasonlítása . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 75
A dobozmodell . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 76
Gyakorlati példa . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 78
A címsorokhoz használható CSS tulajdonságok . . . . . . . . . . . . . . . . . . . . . . . . . . 79
Tegyük próbára magunkat! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 80
Összefoglalás . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 80
5. fejezet A weblap szakaszai: div címke a weblapszerkezet
és az elrendezés kialakításához
Az XHTML lap . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 82
A tartalom szerkezeti elvek szerinti szervezése . . . . . . . . . . . . . . . . . . . . . . . 83
Mikor használjuk a div elemet, és mikor ne? . . . . . . . . . . . . . . . . . . . . . . . . . 86
A CSS lap . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 88
Abszolút helyzetmegadás . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 89
Viszonyított helyzetmegadás . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 92
Rögzített helyzetmegadás . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 93
A tartalom elrendezése margókkal . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 95
Osztályok használata a címsorok formázására . . . . . . . . . . . . . . . . . . . . . . . . 97
A tartalom elrendezése a float jellemzõvel . . . . . . . . . . . . . . . . . . . . . . . . . . . 98
Mit lehet még úsztatni? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 103
Miért nem balra? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 106
A tartalom elrendezése a z-index segítségével . . . . . . . . . . . . . . . . . . . . . . . 107
Gyakorlati példa . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 111
CSS tulajdonságok . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 113
Tegyük próbára magunkat! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 113
Összefoglalás . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 114
Tartalomjegyzék vii
6. fejezet Bekezdés- és szövegstílusok
Az XHTML lap . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 115
Mozaikszók és rövidítések . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 117
Különleges karakterek . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 119
A cite elem . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 123
Idézetblokkok . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 124
Jelentõségteli formázás: az em és a strong elem . . . . . . . . . . . . . . . . . . . . . . 125
További szövegformázó elemek . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 127
Az XHTML szöveg CSS-használatra alkalmassá tétele . . . . . . . . . . . . . . . . . . 128
A CSS lap . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 129
A stíluslap kialakításának kezdete . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 129
A törzsre vonatkozó további szabályok . . . . . . . . . . . . . . . . . . . . . . . . . . . . 133
A címsorokra vonatkozó szabályok . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 134
Bekezdésstílusok . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 136
Az idézetblokkokra vonatkozó stílusok . . . . . . . . . . . . . . . . . . . . . . . . . . . . 137
Az em és az õ strong cimborája – már megint . . . . . . . . . . . . . . . . . . . . . . . 138
Rövidítés . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 139
Kiemelés . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 140
Lábléc . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 144
A teljes stíluslap . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 146
Nyomtatási elõnézet . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 147
Nyomtassuk ki! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 148
A stíluslap kialakításának kezdete . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 148
A tartalom eltávolítása a display tulajdonság segítségével . . . . . . . . . . . . . . 149
A nyomtatási margók beállítása . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 150
A nyomtatási betûméret módosítása . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 151
A nyomtatáshoz használandó betûcsalád módosítása . . . . . . . . . . . . . . . . . 153
A szövegbehúzás módosítása nyomtatáshoz . . . . . . . . . . . . . . . . . . . . . . . . 153
A teljes stíluslap . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 154
Gyakorlati példa . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 155
CSS tulajdonságok . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 156
Tegyük próbára magunkat! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 157
Összefoglalás . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 158
viii HTML és CSS
7. fejezet Hivatkozások és hivatkozásstílusok
A webhely megszervezése . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 159
Az URL címek felépítése . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 161
Mappanevek . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 162
Kezdõlap . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 163
Az XHTML lap . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 165
Hivatkozás ugyanabban a könyvtárban lévõ másik weblapra . . . . . . . . . . . 166
Relatív és abszolút hivatkozások . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 170
Hivatkozás más alkönyvtárakban lévõ weblapokra . . . . . . . . . . . . . . . . . . . 174
Hivatkozás nem HTML fájlokra . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 181
Képek használata hivatkozásként . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 184
Elektronikus levelezési hivatkozások . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 186
Hivatkozás a weblapon belüli helyekre: névvel ellátott horgonyok . . . . . . . 187
A CSS lap . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 191
Beágyazott hivatkozásstílusok módosítása . . . . . . . . . . . . . . . . . . . . . . . . . . 192
Hivatkozások formázása a background-image tulajdonság segítségével . . . 201
Az éppen látható weblap jelzésére szolgáló formázás . . . . . . . . . . . . . . . . . 202
Gyakorlati példa . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 204
CSS tulajdonságok . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 205
Tegyük próbára magunkat! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 206
Összefoglalás . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 207
8. fejezet Multimédia, képek és képstílusok
Képek létrehozása és módosítása . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 210
JPEG vagy GIF? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 211
Ötletek kezdõknek a képszerkesztõ programok kezeléséhez . . . . . . . . . . . 212
Az XHTML lap . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 219
Az img elem . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 220
Alapszintû navigációs sávok készítése . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 223
Fényképalbum tervezése . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 227
Reklámcsík készítése . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 229
Címsor készítése . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 230
Kép beszúrása a fényképalbumba . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 231
Átlátszó GIF képek . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 232
Munkára fel! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 234
Tartalomjegyzék ix
A CSS lap . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 235
A hivatkozások színe és díszítése . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 238
Hátterek . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 240
A méret számít! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 241
A kép átméretezése a HTML kódban: a jó oldal . . . . . . . . . . . . . . . . . . . . . . 241
A kép átméretezése a HTML kódban: a rossz oldal . . . . . . . . . . . . . . . . . . . 243
Közvetlen képhivatkozások . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 244
A törzs szövege . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 246
Multimédiás anyagok elhelyezése a weblapon . . . . . . . . . . . . . . . . . . . . . . . . . 249
A bõvítményekkel kapcsolatos gondok . . . . . . . . . . . . . . . . . . . . . . . . . . . . 250
Flash . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 251
QuickTime . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 253
Windows Media . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 256
Java kisalkalmazások . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 258
Gyakorlati példák . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 260
CSS tulajdonságok . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 262
Tegyük próbára magunkat! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 262
Összefoglalás . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 262
9. fejezet Listák és listastílusok
Az XHTML lap . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 265
Meghatározáslisták . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 269
A számozott listák kezdõértéke . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 271
A CSS lap . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 272
A számozás nélküli listák felsorolásjelei . . . . . . . . . . . . . . . . . . . . . . . . . . . . 274
A felsorolásjelek helye . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 275
Vissza a meghatározáslistákhoz . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 276
Listák használata hivatkozásokként . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 277
A display tulajdonság . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 278
A navigációs elemek további formázása . . . . . . . . . . . . . . . . . . . . . . . . . . . . 280
Na de megváltozik-e, ha fölé állunk? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 281
Vízszintes listák . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 282
És mi van a hivatkozásokkal? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 287
Vissza a nav szakaszhoz . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 289
Tegyük változóvá! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 289
x HTML és CSS
Gyakorlati példa . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 290
A listákhoz használható CSS tulajdonságok . . . . . . . . . . . . . . . . . . . . . . . . . . . . 291
Tegyük próbára magunkat! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 292
Összefoglalás . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 292
10. fejezet Táblázatok és táblázatstílusok
Mese az összegabalyodott táblázatokról . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 293
Az XHTML lap . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 295
A table címke jellemzõi . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 297
A táblázat áttekinthetõvé tétele . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 301
A CSS lap . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 307
A cella szélességének megadása . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 310
A táblázat címének formázása . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 311
A szöveg igazítása a cellákban . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 312
Még néhány XHTML címke: thead, tbody és tfoot . . . . . . . . . . . . . . . . . . . . . . . 314
Gyakorlati példa . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 317
CSS tulajdonságok . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 317
Tegyük próbára magunkat! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 318
Összefoglalás . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 318
11. fejezet Ûrlapok és ûrlapstílusok
Ami a parancsfájlokat illeti . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 321
Az XHTML lap . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 322
A form elem . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 325
Rejtett mezõk . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 325
A fieldset elem . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 328
A textarea elem . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 330
A select lenyíló lista . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 331
Választógombok . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 333
A fájlfeltöltés engedélyezése a felhasználóknak . . . . . . . . . . . . . . . . . . . . . . 334
A checkbox elem . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 336
A tabindex jellemzõ . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 338
Az elküldõ gomb . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 338
A mailto mûvelet használata . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 340
Táblázat használata az ûrlap elrendezésére . . . . . . . . . . . . . . . . . . . . . . . . . 342
Tartalomjegyzék xi
A CSS lap . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 346
A fieldset elem formázása . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 347
A legend elem formázása . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 348
Bekezdések és elemcsoportnevek . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 349
A form elem háttérszíne . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 351
A parancsfájl-használatot bemutató példa háttere . . . . . . . . . . . . . . . . . . . . 352
Gyakorlati példa . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 353
Tegyük próbára magunkat! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 354
Összefoglalás . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 354
12. fejezet A weblapok közzététele és ellenõrzése
Ingyenes kiszolgáló-tárterület keresése . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 358
Az FTP programok használata . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 359
Az engedélyek beállítása . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 363
Saját tartománynév . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 365
A webhely ellenõrzése . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 366
Az érvényesség-ellenõrzõ programok . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 367
Az olvashatóság ellenõrzése . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 368
A böngészõbõvítmények igénybe vétele . . . . . . . . . . . . . . . . . . . . . . . . . . . 370
A Document Object Model (DOM) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 376
A keresõprogramok tájékoztatása arról, hogy létezünk . . . . . . . . . . . . . . . . . . . 377
Ismerjük a webhely célközönségét . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 380
Összefoglalás . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 382
13. fejezet A CSS használata webnaplókhoz
A webnaplóírás elõnyei . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 386
Hol lehet elõfizetni webnaplóra? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 387
Mit keressünk a webnaplókészítõ programokban? . . . . . . . . . . . . . . . . . . . . . . 387
A webnapló készítésének elkezdése . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 388
A webnapló beállítása . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 391
Bejegyzés írása a webnaplóba . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 393
A sablon testreszabása . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 395
A DOCTYPE meghatározás megváltoztatása . . . . . . . . . . . . . . . . . . . . . . . . 397
A CSS lap . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 400
Új színséma . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 403
A forráskód megtekintése a Blogger webnaplók módosításánál . . . . . . . . . 406
xii HTML és CSS
Webnaplózzuk ezt! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 407
Tegyük próbára magunkat! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 409
Összefoglalás . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 409
14. fejezet A tervezés alapjai
Kialakítás . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 411
Vizuális hierarchia . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 412
Még néhány szó a kontrasztról . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 414
Ismétlõdés . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 416
Igazítás . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 417
Források . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 421
Gyakorlati példák . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 422
Összefoglalás . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 425
A webhelyek felépítése . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
Mi az XHTML és a HTML? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
Mi a különbség az XHTML és a HTML között? . . . . . . . . . . . . . . . . . . . . . . . . . 3
Mi a CSS? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
Ismerkedés az XHTML nyelvtanával . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
Kezdõ- és zárócímkék . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
Üres elemek . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
XHTML: különleges követelmények . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
Ismerkedés a CSS nyelvtanával . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
Kijelölõk és meghatározások . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
Idézõjelek . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
Gyakorlati példa . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16
Összefoglalás . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
2. fejezet Mindent a maga helyére, azaz: hová tegyük a stílusokat?
A rangsor . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20
Kezdjük a böngészõvel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21
Felhasználói stílusok . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22
Külsõ stílusok . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24
Beágyazott stílusok . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26
Szövegközi stílusok . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28
Öröklés . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30
Szûkítés . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30
Az @import utasítás használata . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33
Gyakorlati példa . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35
Összefoglalás . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37
3. fejezet A weblapok alapjai: DOCTYPE, fejléc, törzs és a törzs stílusai
Az XHTML lap . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39
A cél . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40
DOCTYPE meghatározások . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40
Az XML meghatározás . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43
Vágjunk bele! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43
A fejléc . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 44
Mentés . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45
A törzs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46
Nézzük meg a mûvünket böngészõben! . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46
A CSS lap . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46
A stíluslap létrehozása . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47
A háttér . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48
Színek megadása a weblapokon . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48
Hozzákapcsolás a stíluslaphoz . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50
Nézzük meg, mit alkottunk! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50
A margók . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51
Vigyük odébb a törzset! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 53
A szín nem minden! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 53
Gyakorlati példa . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 57
A body elemhez használható CSS tulajdonságok . . . . . . . . . . . . . . . . . . . . . . . . . 58
Tegyük próbára magunkat! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 58
Összefoglalás . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 59
vi HTML és CSS
4. fejezet Címsorok és címsorstílusok
Az XHTML lap . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61
A weblap szerkezetének kialakítása címsorok segítségével . . . . . . . . . . . . . . 62
A fejezet feldolgozásának módja . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 63
Felvétel az XHTML lapra . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 66
A CSS lap . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 67
Kezdjük a siteName jellemzõvel! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 68
Címsorok osztálykijelölõkkel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 72
Az eredmények összehasonlítása . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 75
A dobozmodell . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 76
Gyakorlati példa . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 78
A címsorokhoz használható CSS tulajdonságok . . . . . . . . . . . . . . . . . . . . . . . . . . 79
Tegyük próbára magunkat! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 80
Összefoglalás . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 80
5. fejezet A weblap szakaszai: div címke a weblapszerkezet
és az elrendezés kialakításához
Az XHTML lap . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 82
A tartalom szerkezeti elvek szerinti szervezése . . . . . . . . . . . . . . . . . . . . . . . 83
Mikor használjuk a div elemet, és mikor ne? . . . . . . . . . . . . . . . . . . . . . . . . . 86
A CSS lap . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 88
Abszolút helyzetmegadás . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 89
Viszonyított helyzetmegadás . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 92
Rögzített helyzetmegadás . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 93
A tartalom elrendezése margókkal . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 95
Osztályok használata a címsorok formázására . . . . . . . . . . . . . . . . . . . . . . . . 97
A tartalom elrendezése a float jellemzõvel . . . . . . . . . . . . . . . . . . . . . . . . . . . 98
Mit lehet még úsztatni? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 103
Miért nem balra? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 106
A tartalom elrendezése a z-index segítségével . . . . . . . . . . . . . . . . . . . . . . . 107
Gyakorlati példa . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 111
CSS tulajdonságok . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 113
Tegyük próbára magunkat! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 113
Összefoglalás . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 114
Tartalomjegyzék vii
6. fejezet Bekezdés- és szövegstílusok
Az XHTML lap . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 115
Mozaikszók és rövidítések . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 117
Különleges karakterek . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 119
A cite elem . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 123
Idézetblokkok . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 124
Jelentõségteli formázás: az em és a strong elem . . . . . . . . . . . . . . . . . . . . . . 125
További szövegformázó elemek . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 127
Az XHTML szöveg CSS-használatra alkalmassá tétele . . . . . . . . . . . . . . . . . . 128
A CSS lap . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 129
A stíluslap kialakításának kezdete . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 129
A törzsre vonatkozó további szabályok . . . . . . . . . . . . . . . . . . . . . . . . . . . . 133
A címsorokra vonatkozó szabályok . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 134
Bekezdésstílusok . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 136
Az idézetblokkokra vonatkozó stílusok . . . . . . . . . . . . . . . . . . . . . . . . . . . . 137
Az em és az õ strong cimborája – már megint . . . . . . . . . . . . . . . . . . . . . . . 138
Rövidítés . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 139
Kiemelés . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 140
Lábléc . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 144
A teljes stíluslap . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 146
Nyomtatási elõnézet . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 147
Nyomtassuk ki! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 148
A stíluslap kialakításának kezdete . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 148
A tartalom eltávolítása a display tulajdonság segítségével . . . . . . . . . . . . . . 149
A nyomtatási margók beállítása . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 150
A nyomtatási betûméret módosítása . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 151
A nyomtatáshoz használandó betûcsalád módosítása . . . . . . . . . . . . . . . . . 153
A szövegbehúzás módosítása nyomtatáshoz . . . . . . . . . . . . . . . . . . . . . . . . 153
A teljes stíluslap . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 154
Gyakorlati példa . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 155
CSS tulajdonságok . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 156
Tegyük próbára magunkat! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 157
Összefoglalás . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 158
viii HTML és CSS
7. fejezet Hivatkozások és hivatkozásstílusok
A webhely megszervezése . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 159
Az URL címek felépítése . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 161
Mappanevek . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 162
Kezdõlap . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 163
Az XHTML lap . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 165
Hivatkozás ugyanabban a könyvtárban lévõ másik weblapra . . . . . . . . . . . 166
Relatív és abszolút hivatkozások . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 170
Hivatkozás más alkönyvtárakban lévõ weblapokra . . . . . . . . . . . . . . . . . . . 174
Hivatkozás nem HTML fájlokra . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 181
Képek használata hivatkozásként . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 184
Elektronikus levelezési hivatkozások . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 186
Hivatkozás a weblapon belüli helyekre: névvel ellátott horgonyok . . . . . . . 187
A CSS lap . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 191
Beágyazott hivatkozásstílusok módosítása . . . . . . . . . . . . . . . . . . . . . . . . . . 192
Hivatkozások formázása a background-image tulajdonság segítségével . . . 201
Az éppen látható weblap jelzésére szolgáló formázás . . . . . . . . . . . . . . . . . 202
Gyakorlati példa . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 204
CSS tulajdonságok . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 205
Tegyük próbára magunkat! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 206
Összefoglalás . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 207
8. fejezet Multimédia, képek és képstílusok
Képek létrehozása és módosítása . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 210
JPEG vagy GIF? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 211
Ötletek kezdõknek a képszerkesztõ programok kezeléséhez . . . . . . . . . . . 212
Az XHTML lap . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 219
Az img elem . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 220
Alapszintû navigációs sávok készítése . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 223
Fényképalbum tervezése . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 227
Reklámcsík készítése . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 229
Címsor készítése . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 230
Kép beszúrása a fényképalbumba . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 231
Átlátszó GIF képek . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 232
Munkára fel! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 234
Tartalomjegyzék ix
A CSS lap . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 235
A hivatkozások színe és díszítése . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 238
Hátterek . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 240
A méret számít! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 241
A kép átméretezése a HTML kódban: a jó oldal . . . . . . . . . . . . . . . . . . . . . . 241
A kép átméretezése a HTML kódban: a rossz oldal . . . . . . . . . . . . . . . . . . . 243
Közvetlen képhivatkozások . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 244
A törzs szövege . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 246
Multimédiás anyagok elhelyezése a weblapon . . . . . . . . . . . . . . . . . . . . . . . . . 249
A bõvítményekkel kapcsolatos gondok . . . . . . . . . . . . . . . . . . . . . . . . . . . . 250
Flash . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 251
QuickTime . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 253
Windows Media . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 256
Java kisalkalmazások . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 258
Gyakorlati példák . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 260
CSS tulajdonságok . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 262
Tegyük próbára magunkat! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 262
Összefoglalás . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 262
9. fejezet Listák és listastílusok
Az XHTML lap . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 265
Meghatározáslisták . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 269
A számozott listák kezdõértéke . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 271
A CSS lap . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 272
A számozás nélküli listák felsorolásjelei . . . . . . . . . . . . . . . . . . . . . . . . . . . . 274
A felsorolásjelek helye . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 275
Vissza a meghatározáslistákhoz . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 276
Listák használata hivatkozásokként . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 277
A display tulajdonság . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 278
A navigációs elemek további formázása . . . . . . . . . . . . . . . . . . . . . . . . . . . . 280
Na de megváltozik-e, ha fölé állunk? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 281
Vízszintes listák . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 282
És mi van a hivatkozásokkal? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 287
Vissza a nav szakaszhoz . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 289
Tegyük változóvá! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 289
x HTML és CSS
Gyakorlati példa . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 290
A listákhoz használható CSS tulajdonságok . . . . . . . . . . . . . . . . . . . . . . . . . . . . 291
Tegyük próbára magunkat! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 292
Összefoglalás . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 292
10. fejezet Táblázatok és táblázatstílusok
Mese az összegabalyodott táblázatokról . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 293
Az XHTML lap . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 295
A table címke jellemzõi . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 297
A táblázat áttekinthetõvé tétele . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 301
A CSS lap . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 307
A cella szélességének megadása . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 310
A táblázat címének formázása . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 311
A szöveg igazítása a cellákban . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 312
Még néhány XHTML címke: thead, tbody és tfoot . . . . . . . . . . . . . . . . . . . . . . . 314
Gyakorlati példa . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 317
CSS tulajdonságok . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 317
Tegyük próbára magunkat! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 318
Összefoglalás . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 318
11. fejezet Ûrlapok és ûrlapstílusok
Ami a parancsfájlokat illeti . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 321
Az XHTML lap . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 322
A form elem . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 325
Rejtett mezõk . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 325
A fieldset elem . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 328
A textarea elem . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 330
A select lenyíló lista . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 331
Választógombok . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 333
A fájlfeltöltés engedélyezése a felhasználóknak . . . . . . . . . . . . . . . . . . . . . . 334
A checkbox elem . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 336
A tabindex jellemzõ . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 338
Az elküldõ gomb . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 338
A mailto mûvelet használata . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 340
Táblázat használata az ûrlap elrendezésére . . . . . . . . . . . . . . . . . . . . . . . . . 342
Tartalomjegyzék xi
A CSS lap . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 346
A fieldset elem formázása . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 347
A legend elem formázása . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 348
Bekezdések és elemcsoportnevek . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 349
A form elem háttérszíne . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 351
A parancsfájl-használatot bemutató példa háttere . . . . . . . . . . . . . . . . . . . . 352
Gyakorlati példa . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 353
Tegyük próbára magunkat! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 354
Összefoglalás . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 354
12. fejezet A weblapok közzététele és ellenõrzése
Ingyenes kiszolgáló-tárterület keresése . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 358
Az FTP programok használata . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 359
Az engedélyek beállítása . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 363
Saját tartománynév . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 365
A webhely ellenõrzése . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 366
Az érvényesség-ellenõrzõ programok . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 367
Az olvashatóság ellenõrzése . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 368
A böngészõbõvítmények igénybe vétele . . . . . . . . . . . . . . . . . . . . . . . . . . . 370
A Document Object Model (DOM) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 376
A keresõprogramok tájékoztatása arról, hogy létezünk . . . . . . . . . . . . . . . . . . . 377
Ismerjük a webhely célközönségét . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 380
Összefoglalás . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 382
13. fejezet A CSS használata webnaplókhoz
A webnaplóírás elõnyei . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 386
Hol lehet elõfizetni webnaplóra? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 387
Mit keressünk a webnaplókészítõ programokban? . . . . . . . . . . . . . . . . . . . . . . 387
A webnapló készítésének elkezdése . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 388
A webnapló beállítása . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 391
Bejegyzés írása a webnaplóba . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 393
A sablon testreszabása . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 395
A DOCTYPE meghatározás megváltoztatása . . . . . . . . . . . . . . . . . . . . . . . . 397
A CSS lap . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 400
Új színséma . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 403
A forráskód megtekintése a Blogger webnaplók módosításánál . . . . . . . . . 406
xii HTML és CSS
Webnaplózzuk ezt! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 407
Tegyük próbára magunkat! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 409
Összefoglalás . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 409
14. fejezet A tervezés alapjai
Kialakítás . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 411
Vizuális hierarchia . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 412
Még néhány szó a kontrasztról . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 414
Ismétlõdés . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 416
Igazítás . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 417
Források . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 421
Gyakorlati példák . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 422
Összefoglalás . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 425
Kapcsolódó tanfolyamok: