XHTML és CSS Holló Csaba 11. A HTML dokumentum

XHTML és CSS © Holló Csaba

2


3

1. Mi a HTML, XHTML és CSS ?

A. Alapfogalmak

2. Objektumok definíciója

B. Szövegek

3. XHTML és CSS nyelvtan

C. Hivatkozások


4

Hyper Text Markup Language

5. Karakterek

E. Listák és számlálók

6. CSS rangsor


5

○ a dokumentum különböző részei ○ különböző (helyi vagy távoli) dokumentumok

○ beállításoktól függően is különbözőképpen jeleníthetnek meg.

○ interaktivitás

7



A HTML dokumentum • Lényegében ○ strukturáló és formázó parancsokból és ○ a megjelenítendő szövegből álló ASCII szöveges dokumentum • Bármilyen szövegszerkesztővel írható

6

• Hyper Text: kapcsolat

○ a különböző böngészők,

○ design: versengés a látogatókért



• Leíró nyelv: definiálja a tartalom struktúráját (címsor, felsorolás, beágyazott képek stb.), melyet

• Ma már további elvárások is vannak, pl.:

• Lehetőség van internetes szolgáltatások (FTP, levelező program) és más alkalmazások indítására szolgáló hivatkozásokat is elhelyezni.

D. Képek és multimédia


• Eredeti cél: az információk minél szélesebb körben elérhetővé tétele az Internet segítségével


4. Fontosabb objektumok

között.

8


A HTML dokumentum • Léteznek HTML szerkesztő programok, melyek segítik a weblapok vizuális készítését, legenerálják a szükséges HTML kódot stb. ○ TextPad ○ MS Front Page, ○ Macromedia Dreamweaver

9


10

13

■ Ennek egy lehetséges megvalósítása, hogy a HTML kódba a böngésző vagy a szerver által értelmezhető programnyelvű utasításokat ágyazunk be, ezek lesznek a szkriptek, pl. JavaScript, VBScript, PHP, Java Servlet

16


• Ha azt akarjuk, hogy a böngésző ne csak megjelenítse az informácifelhasználóval, akkor a HTML kódhoz programot társíthatunk.

14

Néhány év után az egyéni elemek kódolására a HTML kezdett túlméretezetté válni (mobiltelefonok, PDA-k, stb.). Továbbá, pusztán a leírókódot használni a megjelenítés szabályozására nem elég hatékony.


12

ókat, hanem kommunikáljon is a

• A böngészők különbözhetnek bizonyos parancsok és karakterkódolások felismerésében és értelmezésében

• HTML fájlok standard kiterjesztései: htm, html.


A dinamikus HTML

• A böngésző a HTML dokumentum parancsait beállításai szerint értelmezi és megjeleníti

• Más programok (pl. Word, Excel, Power Point stb.) is tudnak böngészők által értelmezhető kódot készíteni


11

A HTML dokumentum

A HTML dokumentum




15

A megoldás: XHTML + CSS XHTML: ■ eXtensible HTML ■ újabb generációs HTML szabvány ■ gyakorlatilag a HTML „újraírása” XML alapokon

17


CSS: Cascading Style Sheets: rangsorolt stíluslapok



■ az egyes stílusok határozzák meg a megjelenítést (nem csak vizuálisan, hanem akár auditíven is)

■ lehet csatolni, beágyazni a(z X)HTML dokumentumba

■ az alapértelmezett és felhasználói stíluslapok együtt határozzák meg a megjelenítést

■ minden böngészőben van alapértelmezett stíluslap, valamint lehet felhasználói stíluslap is

18


19

Tehát egy weboldalnak alapvetően két része van: ■ (X)HTML: meghatározza a tartalmat: mi jelenjen meg

20

A HTML dokumentum • Egy weblap HTML objektumokból áll

Objektumok definíciója


3. XHTML és CSS nyelvtan 4. Fontosabb objektumok 5. Karakterek 6. CSS rangsor

23



<1. objektum nyitó tag>

21


• Az objektumok tartalmazhatják egymást, pl. a táblázatban levő egyik cellában kép van

22



• Objektumok pl. bekezdés, ábra, táblázat, cella

■ CSS: meghatározza a megjelenítést: hogyan jelenjen meg



24


• Nyitó tag:


• osztály neve

• Egymásba ágyazás esetén nem lehet átlapolás. Pl.

<2. objektum záró tag>

• objektum tulajdonságai (jellemzői)

helyes:


• Záró tag: / osztály neve

kiemelt szöveg


• Tag: angolul címke, jelző, de

hibás:

magyarul jó a tag is



25

A HTML-ben vannak előre definiált objektumok (címsor, bekezdés, táblázat, felsorolás stb.), ugyanakkor lehetőségünk van saját strukturális egységek létrehozására is, melyeket formázhatunk, pozícionálhatunk stb.



kiemelt szöveg

26

A tartalom különböző részeit div és span elemekkel tagolhatjuk.


27

Objektumok definíciója • Üres objektum:

A div blokkszintű elem, azaz tartalmát külön sorokban helyezi el.

• nem tartalmaz más objektumot vagy szöveget

A span-t akkor használjuk, ha a formázni kívánt elem a szöveg belsejében van.

• csak nyitó tagja van, de XHTMLben ezt is le kell zárni


28


29

Objektumok azonosítása

2. Objektumok definíciója 3. XHTML és CSS nyelvtan

• angol ábécé betűi, számok és _

első sor
második sor

31

XHTML nyelvtan

• betűvel kezdődnek


• a HTML nem tesz különbséget kis és nagy betűk között, de az XHTML igen

5. Karakterek


32

XHTML nyelvtan

■ kötelező megadni a dokumentumtípust (DOCTYPE sor)

■ minden jellemzőnek egyértelműen meg kell adni az értékét


33

■ megjelenítési tulajdonságokkal látja el a leírókódon belüli elemeket: □ szín, betűtípus

■ minden értéket idézőjelben kell megadni

□ háttér, szegély, margó □ elemek helye 34

CSS nyelvtan ■ lehet beágyazva az XHTML dokumentumba, vagy ■ gyakoribb, hogy csatolják hozzá □ elkülönül a tartalom a megjelenítéstől, gyorsul a letöltés

6. CSS rangsor

CSS nyelvtan

■ minden elemet, jellemzőt és értéket kisbetűvel kell írni

□ gyorsul a fejlesztés

30

• Azonosítók:

Pl.




• Szintaxis: id=”azonosító”

• Üres objektum: szintaxisa




35

CSS nyelvtan Kijelölő (selector) megmondja, hogy a stílus az XHTML lap mely elemeire vonatkozik ■ Minden kijelölőhöz tartozik meghatározás (declaration), ami a megjelenítés módját mondja meg


36

CSS nyelvtan Elemkijelölő ■ az XHTML tagjaira vonatkozik pl. p { font-family: Arial, sans-serif; font-size: small; color: blue; } tulajdonság (property): érték (value)


37


38


39

CSS nyelvtan

CSS nyelvtan

CSS nyelvtan

■ néha szükség van kevésbé általános, azaz pontos (specific) kijelölésre

a) azonosítókijelölők (id selectors)


Egy azonosítót egy XHTML lapon


Az XHTML dokumentumban a szöveg tetszőleges részeit elláthatjuk egyedi azonosítóval. Pl.

b) osztálykijelölők (class selectors)

Bekezdés

következőképpen adjuk meg:

c) összetett kijelölők

Szöveg

Pl. #lablec { font-size: x-small; }


40


belül csak egyszer lehet használni. CSS-ben a hozzá tartozó stílust a

41


42

CSS nyelvtan

CSS nyelvtan

a) azonosítókijelölő (id selectors)



■ egy altípusa a környezetfüggő (származtatott) kijelölő, mely csak az azonosított szöveg bizonyos elemeire vonatkozik

■ XHTML-ben osztályokat is képezhetünk: class ”osztalynev”

Pl. XHTML-ben:

■ ne a hatás, hanem a funkció alapján nevezzük el az osztályokat, pl. kek helyett kiemeles

CSS-ben pedig:

CSS nyelvtan

#lablec p { font-size: x-small; }


CSS nyelvtan

43


...
.kiemeles { background-color: blue; }

44


CSS nyelvtan

CSS nyelvtan

c) összetett kijelölők

Kijelölők csoportosítása

■ vessző nélkül más hatása van:

#lablec p.kifejezes {

p blockquote {

■ a lablec azonosítójú szakasz

■ néha szükség lehet ugyanazon formázás többféle elemre való alkalmazására

■ kifejezes osztályú

p, li, blockquote {

■ csak a bekezdésben szereplő idézetekre hat

background-color: blue; }

■ bekezdéseire érvényes

font-size: medium; }

font-size: medium; }

45


46


XHTML nyelvtan

CSS nyelvtan

■ XHTML-ben a címkék összes jellemzőjének értékét idézőjelbe kell tenni


p { font-family: ”Times New Roman”, Times, serif; }

5. Karakterek


• Képernyőn megjelenítendő Weblap


51

Fej- és törzsobjektumok

• Mivel nem szoktunk rá hivatkozni, ezért ritkán kap azonosítót


Fej- és törzsobjektumok


50

•

52

• Weblappal kapcsolatos információk (karakterkészlet, szerző, cím stb.)


6. CSS rangsor

A HTML objektum

48

1. Mi a HTML, XHTML és CSS ? 2. Objektumok definíciója

49

• Ablak: id = ”window” • méret, hely, állapotsor szövege • átméretezés, mozgatás, bezárás • Dokumentum: id = ”document” • háttér, betűk színe, címsor felirata • szöveg kiírása • A Weblap megnyitásakor a böngésző automatikusan létrehozza őket


■ CSS-ben csak akkor szabad idézőjeleket használni, ha a betűtípus neve több szóból áll és szóközt is tartalmaz:

Alapobjektumok


47

53

A címobjektum • A weblap ablakának címét adja meg: Az ablak címsora


54

A címobjektum • Általában nem kap azonosítót • A HTML-, fej és címobjektumokat a böngésző akkor is létrehozza, ha nem szerepelnek a kódban


55

Törzsobjektum

58


adjuk meg, később látni fogjuk, hogy hogyan. A betűtípus stílustulajdonság, mely a font-family kijelölő segítségével adható meg.

61

■ a betűtípust (font-ot): a karakterek megjelenítését határozza meg

4. Fontosabb objektumok 5. Karakterek

■ a megjelenítendő karakter nevét vagy kódját.

6. CSS rangsor

59

A betűk mérete is a font-size kijelölővel adható meg. A méretet megadhatjuk pontban, pixelben, százalékértékben, em-egységben vagy az alábbi értékek valamelyikével: xx-small, x-small, small, medium, large, x-lerge, xx-large, smaller, larger.

60

felsorolása arra az esetre gondolva, ha a felhasználó számítógépén nem lenne meg az, amit elsőnek előírtunk (nem fogja automatikusan letölteni!)

62

Képernyőn való használathoz nem ajánlott a méret pontban való megadása, mert nem egyértelmű, hogy egy pontnak hány pixelt fog megfeleltetni. Az előre definiált méretnevek értelmezése is böngészőfüggő lehet.


Ajánlatos többféle betűcsalád

Nem bízhatunk abban, hogy a felhasználó gépén az általunk használni kívánt betűcsalád telepítve van.


57

■ a használt karakterkódolást




A karakterek meghatározásánál meg kell adnunk:

Példék a font-family lehetséges értékeire: Verdana, Arial, serif, Georgia, Courier, Courier New, Times, Times New Roman.

A karakterkódolást a fejrészben


56


• Megjelenítendő elemek (szöveg, kép stb.) • Tagoló és vezérlő elemek (tag-ok) □ milyen részekből áll a Weboldal □ hogyan jelenítse meg azokat (bár jobb, ha ez a CSS-ben van!)




63

A pixelben való méret megadás azért nem ajánlott, mert elvileg nem teszi lehetővé gyengénlátók számára a betűk méretének növelését. A böngészők ugyan ebben az esetben is biztosíthatják a betűméret növelésének lehetőségét, de ebben nem bízhatunk.


64

Az em-egység az adott betűtípus-


A százalékérték számítása a

ban az M betű magasságához

szöveget beágyazó szülőelem

viszonyított érték. Segítségével

betűmérete alapján történik.

más objektumok is méretezhetők

A fentiek miatt a betűméret beállí-

a felhasználó által beállított

tásánál ajánlott az em-egység

betűmérethez viszonyítva.

vagy százalékérték használata.


67

65


68

Számíthatunk azonban arra, hogy:

Nem minden betűtípusnak van ennyiféle vastagságú karaktere.

■ normal = 400, bold = 700.

70

Tagoló karakterek (white space): • Enter, Tab, több szóköz • alapértelmezés szerint nincs hatásuk a szöveg elrendezésére • a böngésző egyetlen szóközzel helyettesíti őket

■ a nagyobb szám mindig legalább ugyanolyan vastagságú vagy vastagabb betűket jelent,


66

A betűk stílusa pedig a font-style kijelölővel adható meg. Lehetséges értékei: italic, oblique, normal, melyek dőlt ferde, vagy normál megjelenítést írnak elő. Kiskapitális betűket a font-variant (betűváltozat) kijelölő small-caps értékével kaphatunk.

A betűvastagságot a font-weight, kijelölővel adhajuk meg. Lehetséges értékei: normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900.




69

A fenti stílusok értékei megadhatók egymás után felsorolva a font kijelölő értékeként is az alábbi sorrendben: betűváltozat, betűstílus, betűvastagság, betűméret, betűcsalád. Elvárt legalább a betűméret és betűcsalád megadása.

71

Karakterentitások • Karaktereknek megfelelő HTML kódok vagy hexadecimális értékek • Speciális karakterek vagy magyar ékezetes karakterek helyett használjuk • Ezek segítségével tudjuk a tagoló karakterek hatását is kiváltani


Karakterentitások • Szóköz: non breaking space • vagy

• <: less than: < vagy < • >: greater than: > vagy >

72

x1.htm

73



74


1. Mi a HTML, XHTML és CSS?

CSS rangsor

Elso sor, de


1. Böngésző

ez nem a második !


2. Felhasználói stílusok


3. Külső stílusok

6 < 9 8 > 5 Első sor, de ez nem a második ! 6 < 9

4. Beágyazott stílusok

5. Karakterek

8>5


76

5. Szövegközi stílusok

6. CSS rangsor


77


1. Böngésző

2. Felhasználói stílusok

Eszközök /

■ minden böngészőnek megvan a maga alapértelmezett megjelenítési módja

■ a böngésző alapbeállításainak megváltoztatásával jönnek létre

Internetbeállítások ... /

■ ezek a legtöbbször megegyeznek: fehér háttér, kék, aláhúzott linkek, stb.


79

□ Színek, betűkészletek □ Kisegítő lehetőségek / ■ Dokumentumok formázása

saját stíluslappal

80




■ az XHTML fejlécbe (), a után kell elhelyezni a stíluslapra mutató hivatkozást <head><title> Cím

■ célszerű css kiterjesztést adni neki

78

Általános /

■ néhány alap dolgot (pl. betűtípus, színek) a böngészőben is át lehet állítani, másokat csak kézi szerkesztéssel


75

81


82


83





■ használata ideális, ha ugyanazon stíluslapot egyszerre sok XHTML oldalon szeretnénk alkalmazni

■ az XHTML dokumentum fejlécében, a és külső stíluslap hivatkozás után találhatók ■ akkor használandók, ha □ egy fájl szerkesztésével az ■ csak arra a dokumentumra érvényesek, amelyben elhelyeztük őket egész honlap kinézetét megváltoztathatjuk XHTML és CSS © Holló Csaba 85 XHTML és CSS © Holló Csaba 86 □ különálló weblapot hozunk létre □ a külső stíluslaphoz képest csak azon az oldalon kisebb változtatásokat szeretnénk XHTML és CSS © Holló Csaba 4. Beágyazott stílusok 4. Beágyazott stílusok 5. Szövegközi stílusok <style type = ”text/css”> ■ a teljes stílusmeghatározás készletet megjegyzésbe tehetjük, hogy az azt nem ismerő régi böngészők ne akarják megjeleníteni ■ néhány XHTML címkének lehet style jellemzője, amiben csak rá vonatkozó stílust adhatunk meg <!-p { font: 0.8em Arial; color: #000 } --> ■ /* CSS-ben viszont így írhatunk megjegyzéseket */ </style> XHTML és CSS © Holló Csaba 88 XHTML és CSS © Holló Csaba 89 8. Szűkítés ■ az XHTML dokumentum objektumait egymásba ágyazzuk, így azok faszerkezetet alkotnak html 11. Stílusok beolvasása 12. DOCTYPE head … body … Öröklés 10. Megjelenítési jellemzők 87 margin-left: 20px"> 7. Öröklés 9. @import használata 84 XHTML és CSS © Holló Csaba Öröklés ■ a beágyazott elemek öröklik a szülő tulajdonságait: h1 { text-color: green } em { text-style: italic } <h1>A címsor igen fontos! </h1> 90 XHTML és CSS © Holló Csaba 91 XHTML és CSS © Holló Csaba 92 Öröklés Öröklés ■ a százalékban megadott értékek a korábbi beállításon alapulnak p { font-size: 10pt } ■ az öröklést megszakíthatja olyan stílus, mely csak az adott objektumra vonatkozik p { line-height: 120% } /* relatív a 'font-size' tulajdonsághoz, tehát 12pt */ ■ vannak tulajdonságok, melyek nem öröklődnek; pl: padding, border, margin, background XHTML és CSS © Holló Csaba 94 XHTML és CSS © Holló Csaba Szűkítés 7. Öröklés ■ a szűkebb (nagyobb súlyú, azaz pontosabb) stílusok ütközés esetén felülbírálják a kisebb súlyúakat 8. Szűkítés ■ később fogunk példákat látni erre 11. Stílusok beolvasása XHTML és CSS © Holló Csaba 93 7. Öröklés 8. Szűkítés 9. @import használata 10. Megjelenítési jellemzők 11. Stílusok beolvasása 12. DOCTYPE 95 XHTML és CSS © Holló Csaba 96 Az @import használata ■ a <link>-hez hasonlóan külső stíluslapot kapcsol a dokumentumhoz 9. @import használata 10. Megjelenítési jellemzők ■ lehet vele stíluslapot beolvastatni egy másik stíluslapba 12. DOCTYPE XHTML és CSS © Holló Csaba 97 XHTML és CSS © Holló Csaba 98 Az @import használata Az @import használata ■ egyes régebbi böngészők (pl. Netscape 4) nem ismerik és figyelmen kívül hagyják, ezért a régebbi böngészők által nem ismert stíluselemeket tartalmazó stíluslapokat szokták ezzel beolvastatni ■ Internet Explorer 6-ban, <link> hiányában a formázatlan tartalom bevillanása (flash of unstyled content, FOUC) hatást okozhatja: a tartalom először formázás nélkül megjelenik, majd jól újrarajzolja XHTML és CSS © Holló Csaba Az @import használata ■ a fejlécben, ■ a <style> elem belsejében ■ a beágyazott stílusok előtt kell szerepelnie. Pl. 99 XHTML és CSS © Holló Csaba 100 Az @import használata <link rel =”stylesheet” type = ”text/css” href = ”...” /> <style type = ”text/css”>  </style> 101 XHTML és CSS © Holló Csaba 105 Megjelenítési jellemzők A korszerű böngészők is jelenleg még csak néhányat ismernek ezek közül (all, screen, print, projection). ■ screen (képernyő) ■ TV (televízió) 106 XHTML és CSS © Holló Csaba Stílusok beolvasása 107 XHTML és CSS © Holló Csaba 108 Stílusok beolvasása A böngésző az XHTML oldalt a stíluselemekkel együtt 1. először a laphoz kapcsolt külső fájlokban levő stílusokat, majd ■ fentről lefelé 2. a dokumentum fejlécébe ágyazott <style> elemben levő stílusokat, ■ kívülről befelé olvassa be és rangsorolja. 3. végül a szövegközi <style> elemekben levő stílusokat Ha nincs felhasználói stíluslap: olvassa be. XHTML és CSS © Holló Csaba 109 7. Öröklés XHTML és CSS © Holló Csaba 110 Document Type Definition (DTD) 8. Szűkítés 10. Megjelenítési jellemzők 11. Stílusok beolvasása 12. DOCTYPE XHTML és CSS © Holló Csaba 112 A HTML kód érvényes, ha a kiválasztott DTD szabályrendszerének megfelelően írtuk meg. ■ elvileg ez kellene biztosítsa, hogy minden böngészőben ugyanúgy jelenjen meg, de ez még nem teljesen működik XHTML és CSS © Holló Csaba 115 1. DOCTYPE ■ dokumentumtípus meghatározás 2. Fejrész ■ a HTML adott változatának szabályrendszere 3. Törzsrész ■ a DOCTYPE meghatározással adjuk meg, hogy melyiket választjuk XHTML és CSS © Holló Csaba 113 A HTML kód érvényességének ellenőrzése alapból a http://validator.w3.org/ címen lehetséges. Az érvényesség ellenőrzésére bizonyos HTML szerkesztőprogramok, illetve böngészőkiegészítők is képesek. XHTML és CSS © Holló Csaba XHTML és CSS © Holló Csaba 114 Pl. egy Firefoxban telepíthető ilyen kiegészítő letölthető a https://addons.mozilla.org/hu/firefox/addon/249 címről HTML Validator néven. Az XHTML-hez három lehetséges DOCTYPE meghatározás tartozhat: 116 1. szigorú: 2. átmeneti: <!DOCTYPE html PUBLIC <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1strict.dtd"> "http://www.w3.org/TR/xhtml1/ ■ csak a szerkezeti felépítésre vonatkozó elemeket és jellemzőket használhatjuk 111 DOCTYPE A weblap részei 9. @import használata XHTML és CSS © Holló Csaba XHTML és CSS © Holló Csaba 117 Pl. használható, de elavult elemnek számít a "> DTD/xhtml1-transitional.dtd ■ használhatók egyes nem szabványos XHTML megjelenítést beállító elemek és jellemzők is jellemző, mert manapság már CSS-el kellene szabványosan megoldani ■ lehet, hogy az elavult elemeket egyszer majd nem lehet használni XHTML és CSS © Holló Csaba 118 3. keretkészletes: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> ■ kereteket tartalmazó weblapokhoz használják XHTML és CSS © Holló Csaba 121 Az XML meghatározás: <?xml version=”1.0” encoding=”utf-8”?> Az XML névtér megadása: <html xmlns = "http://www.w3.org/1999/xhtml"> XHTML és CSS © Holló Csaba A weblap részei 1. DOCTYPE 2. Fejrész 3. Törzs 124 XHTML és CSS © Holló Csaba 119 Az XHTML DOCTYPE meghatározás biztosítja, hogy a böngésző szabványkövető üzemmódban (standard mode) működjön, azaz a W3C előírásait a lehető legjobban megközelítő módon jelenítse meg a weblapot. XHTML és CSS © Holló Csaba 122 XHTML és CSS © Holló Csaba Egyébként a böngésző ún. trükköző megjelenítési módot (quirks mode) használ. XHTML esetén a W3C javasolja, hogy adjuk meg az XML meghatározást és névteret. XHTML és CSS © Holló Csaba Az XML meghatározás megadása azonban az Internet Explorert nem szabványkövető, azaz trükköző megjelenítésre állíthatja át (pl. IE6). 13. A fejrész Az XML névteret azonban meg kell adnunk. 17. A törzs tulajdonságai XHTML és CSS © Holló Csaba 125 A fejrész 120 123 14. Meta objektumok 15. A címobjektum 16. Színek megadása 18. Címsorok XHTML és CSS © Holló Csaba 13. A fejrész <head> ... </head> 14. Meta objektumok ■ egyetlen kötelező eleme a cím, de ezen kívül még sok mindent tartalmazhat (dokumentummal kapcsolatos tudnivalók, stíluslapokra mutató hivatkozás, szkript kód, stb.) 15. A címobjektum 16. Színek megadása 17. A törzs tulajdonságai 18. Címsorok 126 XHTML és CSS © Holló Csaba 127 XHTML és CSS © Holló Csaba Meta objektumok 128 • Üresek, csak nyitó tagjuk van • Az egész weblapra vonatkozó információkat tartalmaznak: • Szintaxisuk eltér a többi objektum szintaxisától • pl. szerző, nyelv, kulcsszavak, karakterkészlet <head> name = ”tulajdonság” /> </head> 130 XHTML és CSS © Holló Csaba Meta objektumok 131 <meta name=”keywords” olyan információk megadására, <meta melyeket a szerver fejléc lang=”hu” http-equiv="Content-Type" információként továbbíthat content=”jogszabályok, nyaralás” /> content= ■ fontosabb értékei: 133 expires: a dokumentum lejárata; ■ ezen időpont után a böngésző a dokumentumot akkor is újra letölti, ha az cache-ben megtalálható ■ ha múltbeli időpontra állítjuk, akkor mindig le fogja tölteni 132 ■ tipikusan a karakterkészletet szoktuk így megadni. Pl.: ■ a name helyett használhatjuk content=”Nagy Tihamér” /> XHTML és CSS © Holló Csaba content-type: a tartalom típusa; http-equiv <meta name=”author” Pl.: <meta content = ”a tulajdonság értéke” • A fejobjektumba ágyazzuk be • Fontosak lehetnek a keresőprogramok számára XHTML és CSS © Holló Csaba 129 Meta objektumok Meta objektumok • Metaadat: adatra vonatkozó adat XHTML és CSS © Holló Csaba XHTML és CSS © Holló Csaba XHTML és CSS © Holló Csaba "text/html;charset=ISO-8859-2" /> 134 <meta http-equiv="expires" content= "Tue, 25 Aug 2009 14:25:27 GMT" /> XHTML és CSS © Holló Csaba 13. A fejrész 14. Meta objektumok 15. A címobjektum 16. Színek megadása 17. A törzs tulajdonságai 18. Címsorok 135 XHTML és CSS © Holló Csaba 136 XHTML és CSS © Holló Csaba A cím A cím <head> <title> Ez a cím ■ nem használhatók címkék, dőlt vagy színes betűk sem ■ a böngésző tetején levő címsorban lesz látható


137

139

A cím: favikon

140

A cím: favikon
A Firefox, Opera és Netscape


www.w3.org/2005/10/profile">

meghatározott értékhalmaza,

href="eleresiUtvonal/kep.png" />

ezért adunk meg egy profile fájlt, amiben elmagyarázzuk, hogy mit jelent az "icon".

142


13. A fejrész 14. Meta objektumok

143


Többféleképpen lehetséges: 1. hexadecimális: #r1r2g1g2b1b2

15. A címobjektum

Internet Explorerben trükközni

16. Színek megadása

g1g2 : 00 - FF: green (zöld)

17. A törzs tulajdonságai

b1b2 : 00 - FF: blue (kék)

felhasználónak is).

18. Címsorok

144

Színek megadása weblapokon

legújabb verziói felismerik, kell vele (esetenként a

141

A rel attribútumnak nincs előre

W3C szabványos beillesztése:

A cím: favikon

Mire jó? 3. Egy jó címből a felhasználó megtudhatja a webhely nevét és azon belül a weblap címét

A cím: favikon

A cím előtt kis képet, ún. favikont is meg lehet jeleníteni.


138

A cím

Mire jó? 1. Ezt menti a böngésző, amikor a felhasználó felveszi a lapot a kedvencei közé. 2. A keresőprogramok használják az indexelés és katalogizálás során.



r1r2 : 00 - FF: red (piros)

• Additív színkeverés http://grafit.netpositive.hu/content/view/107/50/


145


146

Színek megadása weblapokon

Színek

□ 256 * 256 * 256 = 16.777.216 szín

#FF0000 = piros

□ ha r1=r2=r, g1=g2=g, b1=b2=b, akkor rövidítve is írható: #rgb

#000000 = fekete

#FFFFFF = fehér

#FFFF00 = sárga

#FF00FF = lila

□ pl. #aa00cc = #a0c

#0000FF = kék

#00FF00 = zöld

#00FFFF = világos kék

148


■ a 00, 33, 66, 99, CC, FF karakter párok kombinációiból előállított bármely (összesen 216) szín, mely minden eszközön és operációs rendszeren majdnem azonos árnyalatban jelenik meg

149


2. az RGB értékek százalékban történő megadása

4. nevével adjuk meg (16 szín)

■ red (piros)

■ black (fekete)

■ purple (lila)

■ a stílus megadásánál így néz ki:

■ white (fehér)

■ blue (kék)

color: rgb(100%, 100%, 100%)

■ gray (szürke)

■ aqua (akvamarinkék)

■ silver (ezüstszürke)

■ navy (mélykék)

■ yellow (sárga)

■ teal (pávakék)

3. tízes számrendszerbeli értékekkel: color: rgb(255, 255, 255)


151


152


■ fuchsia (mályvaszín)

13. A fejrész

■ maroon (gesztenyebarna)

14. Meta objektumok

■ green (zöld)

15. A címobjektum

1. DOCTYPE

■ lime (világoszöld)


2. Fejléc

■ olive (olajzöld) □ pl. color: green

147

Webtűrő szín

□ stílusnál: color: #a0c



17. A törzs tulajdonságai 18. Címsorok

A weblap részei

3. Törzs

150

153


154

A törzs A törzs tartalmazza a megjelenítésre szánt HTML tartalmat.


155

■ háttérszín

■ háttérkép ismétlődés

background-color:

background-repeat:

formázási lehetőséget, melyek

■ háttérkép

□ no-repeat (nem ismétlődik)

background-image: url(képnév)

□ repeat-x (vízszintesen ismétli)

nem csak a törzs, hanem más objektumok esetén is használhatók.


156

□ repeat (ismétlődik)

RGB szín, színnév

A továbbiakban megnézünk néhány


□ repeat-y (függőlegesen ismétli)

157


158


159

■ háttérképhelyzet

■ háttérkapcsolás

■ felső margó:

background-position:

background-attachment:

margin-top: százalékérték, hossz

□ top (felül), bottom(alul)

□ scroll (gördülő)

■ jobb margó:

□ center (középen)

□ fixed (rögzített)

margin-right: százalékérték, hossz

□ left (balra), right (jobbra)

■ margó

■ alsó margó:

□ százalékérték, hossz

margin: százalékérték, hossz

margin-bottom: százalékérték, hossz


160

■ bal margó: margin-left: százalékérték, hossz Pl. body { background-image: url(kep.gif); background-repeat: repeat-x; background-position: 100% 50%; margin-top: 20% }

x2.html


161

x2.html


162

//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD /xhtml1-strict.dtd">

CSS alapok <meta http-equiv="Content-Type" content="text/html;charset=ISO8859-2" />

x2.html


163


164

x2a.css


165

body {

Oldal szövege

margin: 100px 10px 0 0%;

/* Az objektum tartalma nem lehet a margón; kivétel a body, ahol a háttér(kép) kiterjed a margóra is (más objektumoknál nem).

"../../../Kepek/virag2.jpg" alt= "Egy virág" />

x2a.css


Részletesen is megadható:

166

x2a.css


167

(pl. ha nem mindegyiket adjuk meg):

x2a.css


background: #0A0 url(../../../Kepek/h1.gif) 55% 55px

margin-top: 100px;

no-repeat fixed;

margin-right: 10px;

/* Ez ekvivalens azzal, hogy:

margin-bottom: 0; --> 0 esetén

background-color: #0A0;

nem kell mértékegység

background-image: url(../../../Kepek/h1.gif);

margin-left: 0%; */

x2a.css


168

background-position: 55% 55px;

169

x2a.css


background-repeat: no-repeat; background-attachment: fixed; --> az ablak gördítésénél mindig ugyanott látszik */ color: #FFF; }

170

x2a.css


171


172

x2b.css


173


Legyen x2.htm-ben:

13. A fejrész

14. Meta objektumok 15. A címobjektum

x2b.css-ben pedig: ... background: #0A0


url(../../../Kepek/h1.gif) 55% 55px

17. A törzs tulajdonságai

repeat-x fixed; ...


18. Címsorok

175


176

Címsorok

Címsorok ■ Nem keverendők a dokumentum címével ■ A weblapok nevének azonosítására és alfejezetek címének megadására szolgálnak


174

178

Címsorok ■ Előírás szerint egy oldalon legfeljebb egy h1 szintű címsor lehet ■ Ne használjuk a címsorokat szöveg nagyobbá tételére, illetve ■ Ne helyezzünk el nagy méretű, vastagított szöveget cím helyett □ a keresőprogramokat félrevezetjük

■ Tagolják a weblapon megjelenő szöveget ■ Áttekinthetővé válik a tartalom ■ Tudatják, hogy milyen témával foglalkozik a weblap ■ Kulcsszavakkal látják el a keresőprogramot


179

Címsorok ■ Blokkszintű elemek: külön sorban jelennek meg, következő elem új sorba kerül ■ Alapértelmezés szerint félkövér betűvel vannak szedve ■ Stílus megadása: a szokásos módon


177

Címsorok ■ Hat szintje lehet fontossági sorrendben: h1, h2, …, h6

□ h1: Heading 1 □ h2: Heading 2 □… □ h6: Heading 6

■ Példa:
Ez a főcím


19. A dobozmodell 20. Szegélyek 21. Margók és belső margók 22. Helyzetmegadás 23. A z-index

180


181

Dobozmodell ■ Vizuális formázási modell = W3C előírásai a dokumentumban lévő elemek megjelenésére ■ Ezt a modellt használva a weblap minden eleme egy téglalap alakú dobozt formáz, ezt nevezik dobozmodellnek dobozmodell XHTML és CSS © Holló Csaba

184

■ A doboz szélességét a jobb és bal oldali margó, szegély és belső margó, valamint a tartalom szélességének összege adja ■ A doboz magasságát a felső és alsó margó, szegély és belső margó, valamint a tartalom magasságának összege adja


187

■ Pl. ha egy elemre: width: 300px; padding: 30px; border: 20px; □ Firefoxban a szélessége:

300px + 2×30px + 2×20px = 400px □ IE-ben a szélessége 300px és összenyomta a tartalmat.


182


183

185


186

Külső margó Szegély Belső margó Tartalom


■ További információk a dobozmodellről (angol nyelven): http://www.w3.org/TR/REC-CSS2/box.html

■ Az Internet Explorer 8-nál korábbi változatai nem a W3C ismertetett előírásai szerint számolják a doboz méretét.


hez (width) nem tartozik hozzá a padding, a border és a margin. ■ Az IE 8-nál korábbi változatai a szélességbe beleszámolják a padding-ot és a border-t is.

188

Azt a megoldást, amelynek segítségével mind a régebbi IE-ben, mind a szabványnak megfelelő böngészőkben jól megjelenő weblapot tudunk tervezni, dobozmodell-kijátszás

(box model hack)-nek nevezik. Részletesen: http://www.tutorial.hu/box-model-problema-es-megoldas-ie-alatt/

http://en.wikipedia.org/wiki/Internet_Explorer_box_model

http://www.positioniseverything.net/index.php

■ A szabvány szerint a szélesség-



189


190

Szegélyek ■ értékeit az óramutató járásával egyező irányba soroljuk fel: □ border-top □ border-right □ border-bottom □ border-left



191

Szegélyek ■ vastagság: □ □ □ □

■ stílusok: border-style-top stb. □ none (nincs), hidden (rejtett) □ dotted (pontozott) □ dashed (szaggatott)

■ megadható szegély részeknek is pl.: border-top-width


Szegélyek

194

Szegélyek

■ stílusok: border-style-top stb.

□ solid (folytonos vonal) □ double (dupla vonal)

x3.html


groove

■ színek: pl. boder-top-color: □ szín megadás

inset

□ ridge (perem, kidomborodó )

□ transparent (átlátszó)

□ inset (süllyesztett)

□ inherit (öröklés)

class = "kozep"> Szegélyek

□ outset (kiemelkedő)

□ inherit (öröklés)


195

□ groove (barázda, bemélyített)

x3.html

192

Szegélyek

px, em, % thin (vékony), medium, thick (vastag)

193


196

 Szegélyek2

x3.css


body { background-color: #fff; margin: 0.5em 1em 1em 1em; } #szegely{

...

border-top: 30px groove #f00;

outset

border-right: 30px inset #00f;

ridge

border-bottom: 30px ridge #f00;

border-left: 30px outset #00f; }

197

x3.css


198

.kozep{ text-align: center; } .jobb{ text-align: right; } .bal{ text-align: left; } #szoveg{ border: 10px dotted #0f0; }

#szoveg2{ border: 10px dotted #f00; }

x3.html


199


200

20. Szegélyek 21. Margók és belső margók 22. Helyzetmegadás 23. A z-index

202

Margók és belső margók ■ értékeiket az óramutató járásával egyező irányba soroljuk fel: □ felső (top), pl. padding-top: 10px

□ jobb (right), □ alsó (bottom), □ bal (left)

x4.css


body {

205

x4.html



#minden { margin: 1em 1em 1em 1em; background-color: #000; color: #00f; }

206

h1, h2, h3, h4 { color: #ff0; }

margin: 0; background-color: #f00; }

203

...
Minden szövege
Fõcím: #focim > h1

h2

x4.css

#focim{ color: #0ff; } .fejezet { color: #f00; } h2.fejezet { color: #f90; } #cimecske{ color: #0f0; }

201

Margók és belső margók ■ margók: margin ■ belső margók: padding ■ értékek: □ px, %, □ em: a böngészőben beállított betűmérethez viszonyítva □ inherit (öröklés)

19. A dobozmodell



x4.html


204

fejezet

h2.fejezet

h3 fejezet: a .fejezet > h3

#cimecske > .fejezet > h4,

x4.html


207

x4.html


208

Tartalom.

x4.html


209

tartalom h3

tartalom h2

tartalom < .fejezet

tartalom h2 fejezet

x4.css


210

#tartalom {

tartalom h3 fejezet

margin: 0 0 0 1em;

color: #000; }

background: #FFF;

#tartalom .fejezet { color: #90f; }

#tartalom h3 { color: #0f0; } #tartalom h3.fejezet { color: #bbb; }

x4.html


211


212

214



213

background-image: url(kutya1m.jpg);}

h2{ color: #0ff; background-image: url(kutya1m.jpg);

Erre egy lehetőség az is, hogy nagyobb belső margót adunk az objektumnak. Pl.



h1{ color: #0ff;

Egy objektum esetén ha többet akarunk láttatni a háttérképből, akkor megnövelhetjük az objektum méretét.

x5

x5

215

padding: 50px 0 130px 60px; }
Fõcím: h1

Cím: h2


216

Egy egyedileg (pl. id-vel) beazonosított elem helyzetmegadása lehet: ■ abszolút ■ viszonyított ■ rögzített ■ statikus A mértékegység lehet px, em, %.


217


Abszolút helyzetmegadás

Viszonyított helyzetmegadás

#nev { position: absolute;

#nev {

top:20px; left: 30px; }

220

Statikus helyzetmegadás #nev { position: static; } ■ a normál szövegfolyamban levő helyén hagyja az elemet ■ a pozíciók megadásának nincs hatása ■ csak akkor használjuk, ha más helyzetmegadást örökölt és vissza akarjuk állítani

x6.html



221


x6.html

Mi mindíg búcsuzunk

Mondom néktek: mi mindig

Reményik

A kemény rögtől, min megállt

búcsuzunk.
... a lábunk.

ugyanaz,
... Valamitől mi mindíg búcsuzunk.

x6.html


Szöveg alatti rész.

222

Sándor

223

219

http://css-discuss.incutio.com/?page=FixedLayouts

Címadatok:

Mert nincs napkelte kettő,

■ az elemet a normál szövegfolyami helyéhez képest elmozdítja a kért mértékben

...

top:20px; left: 30px; }

x6.html


Rögzített helyzetmegadás #nev { position: fixed; top:20px; left: 30px; } ■ az elem a görgetés ellenére is a helyén marad ■ IE6-ban nem működik, IE7-ben már igen. Részletesen:

position: relative;

■ az elemet kiveszi a normál szövegfolyamból és a tárolótömbjéhez (beágyazó elemhez) képest az adott pozícióra helyezi


218

224

x6.css


225

body{ font-size: 1.5em; } #cim { background-color: #eee; padding: 10px; width: 800px; position: absolute; top: 50px; left: 50px; font-size: 1.5em; font-weight: bold; }

x6


226

x6.css


227

x6


228

x7.html


231

#verscim{ background-color: #ddf; position: absolute; top: -20px; left: 300px; } #szerzo{ background-color: #fdd; position: fixed; top: 0px; left: 130px; }

x6.css


229

#szoveg{ background-color: #dfd; position: absolute; top: 100px; left: 340px; } #masodik{ background-color: #ffd; position: relative; top: 70px; left: 30px; }


230

Úsztatás

■ azt adja meg, hogy milyen irányban legyen úsztatva az elem

Reményik Sándor:

■ eredetileg képekre alkalmazták, annak érdekében, hogy a szöveg körülfolyhassa a képet, de CSSben bármilyen elem úsztatható

Mondom néktek: mi mindíg

búcsuzunk.
... A hangtól, mikor csendbe

#vege{ color: #f00; }

x7.html


halkul el,

232

 Minden szótól, amit kimond a szánk,
... Minden képtől, mely belénk mélyedett,
Az álmainktól, mik nem teljesültek,
...

x7.html


233

A kemény rögtől, min megállt

x7.css

#uszi{

a lábunk.

float: left;

Mert nincs napkelte kettő,

width: 120px;

ugyanaz,

margin-top: 80px;

Valamitől mi mindíg búcsuzunk.

margin-right: 80px;


margin-left: 50px; }

234

x7


235

x7


236


237

Összefoglalás position □ static (statikus) □ relative (viszonyított) □ absolute (abszolút) □ fixed (rögzített) □ inherit (öröklés)


238

float □ left (balra) □ right (jobbra) □ none (nincs) □ inherit (öröklés)

241

Függőleges középre igazítás


242

Függőleges középre igazítás

#fkozepre { width: magasság;

Miért?

height: szélesség;

■ a position: absolute; az objekium

position: absolute;


viszont mi az objektum közepét

margin-top: -magasság/2; }

szeretnénk középre helyezni.

240

Vízszintes középre igazítás #balra { text-align: left: }

szöveg


19. Margók és belső margók 20. Szegélyek 21. A dobozmodell

bal felső sarkát pozícionálja,

top: 50%; left: 50%; margin-left: -szélesség/2;

239

Vízszintes középre igazítás #kozepre { margin-left: auto; margin-right: auto; text-align: center; } Ha azt akarjuk, hogy egy balra igazított szöveg középen legyen, akkor bele kell tennünk egy konténerbe.

Összefoglalás



22. Helyzetmegadás 23. A z-index

243


244

Z-index

x8.html


Minden szótól, amit kimond a szánk,
...

Reményik Sándor:

Minden képtől, mely belénk


mélyedett,

247

x8.html


248

Az álmainktól, mik nem

x8.css

teljesültek,
... lábunk.

249

z-index:0;

búcsuzunk.
...

position:absolute;

A hangtól, mikor csendbe

left:435px; top:25px;

...

halkul el,


#cim {

Mondom néktek: mi mindig

A kemény rögtől, min megállt a

246

■ értékei tetszőlegesek lehetnek

x8.css

245

■ az egymás fölött levő elemek közül az látható, amelyiknek nagyobb a z-indexe



...

■ a weblap harmadik dimenziója (az x és y tengely után)

x8.html

x8.html

}


250

#v1 { position:absolute;

x8.css


251

#v2 { position: absolute;

x8.css


252

#v3 { position:absolute;

left: 5px; top: 0px;



width: 360px; height: 120px;

width: 340px; height: 110px;

width:380px; height:180px;

border: 10px dotted #efe;

border: 10px double #dfd;

border: 10px dashed #cfc;

padding: 10px; z-index:1;

padding: 10px; z-index:30;

padding:10px; z-index:30;

background: #efe; }

background: #dfd; }

background: #bfb; }

x8


253


254

25. A title tulajdonság 26. Vonalak

A megoldás böngészőfüggő és szabványosan CSS-ben szabályozzuk:

27. Nyomtatás formázása

256

Szabványos (Firefox): ■ 0 (átlátszó) és 1 (nem átlátszó) közötti értékekkel ■ opacity: 0.1; Internet Explorer: ■ 0 (átlátszó) és 100 (nem átlátszó) közötti értékekkel ■ filter: alpha(opacity=10);

x9


259


257

Az alábbi példában a felső sorban

a többi esetben az egyszínű háttérszínnel rendelkező szöveggel

Jelölések: ■ h3, h4, h5, h6: a képek #v1 { ... opacity: 1.0; #v2 { ... opacity: 0.5;

normál képként van elhelyezve:

260

filter: alpha(opacity=50); }

x9


#v3 { position:absolute; ... }

#v5 { position:absolute; ... }

#h3 { position:absolute;

#h5 { ... z-index:1; opacity: 0.3;

z-index:1; opacity: 1.0; filter: alpha(opacity=100); } #v4 { position:absolute; ... } #h4 { ... z-index:1; opacity: 0.6; filter: alpha(opacity=60); }

258

filter: alpha(opacity=100); }

azonos helyre pozícionált



x9

■ v1,v2, ..., v6: a szövegek

a kép háttérképként,

x9

255

Az oldalakon elhelyezett objektumokat (jellemzően képeket, háttereket) az általunk kívánt mértékben átlátszóvá tudjuk tenni.

24. Átlátszóság



filter: alpha(opacity=30); } #v6 { position: absolute; ... } #h6 { ... z-index:1; opacity: 0.1; filter: alpha(opacity=10); }

261


262


24. Átlátszóság

A title tulajdonság

25. A title tulajdonság

■ a legtöbb DHTML-objektum rendelkezik vele

26. Vonalak

■ szövege egy kis sárga téglalapban (tooltip) megjelenik a képernyőn, ha az egeret az objektum fölé visszük



263

265


266


■ a behavior stíluselem használatával lehetőségünk van a HTML eszközkészlet felhasználására a title megadásánál ■ bővebb információk a Microsoft Development Network weblapján találhatók http://msdn.microsoft.com/webservices/

x11

Vizszintes vonal:

24. Átlátszóság


■ nincs külön HTML tag

25. A title tulajdonság

■ height: magasság

26. Vonalak

■ color: vonalszín

■ megoldás: képként vagy div objektumként tesszük be

■ border: szegély

.fv {


24. Átlátszóság 25. A title tulajdonság 26. Vonalak 27. Nyomtatás formázása

height: 200px; width: 0px;

■ position, left stb.: hol legyen az oldalon

268


■ a media jellemző print tulajdonságának használatával nyomatási stíluslapot is készíthetünk ■ ha ezt a mindenre érvényes (media=”all”) stíluslap után illesztjük be, akkor elég ebben csak a különbségeket leírni

267

Függőleges vonal

■ width: szélesség


264

border-left:2px dotted #ff0; }

269

x14.html


270

...


271

■ ha a weboldal nyomtatásakor valamit el akarunk rejteni (pl. keresés mező), akkor annak stílusában a display jellemzőnek none értéket kell adni. Pl.

272

Általános vélemény, hogy

□ nem hagy ki helyet, hanem kiveszi a szövegfolyamból

■ a képernyőn a talp nélküli betűket (pl. Verdana, Arial, Helvetica, sans-serif),

■ Míg a Weben ajánlatos keskeny


■ in (inch, hüvelyk, kb. 25.4 mm)

■ A felhasználó számára a

olvashatóság érdekében,

beállítás rendelkezésére áll (pl. nyomtasson-e háttér(kép)et,

■ Nyomtatási stílusoknál olyan színeket adjunk meg, amelyek


A. Alapfogalmak B. Szövegek

azokat fekete-fehér nyomtatóval nyomtatják ki.

A felhasználó többnyire nem nyomtatja ki a hátteret, ezért

278


1. Rövidítés 2. Címhivatkozás 3. Idézetblokk

akkor is látszani fognak, ha

C. Hivatkozások

276

■ másrészt gondoskodjuk róla, hogy a nyomtatásban a fehér lapon is láthatók legyenek a betűk.

oldalszámot, URL címeket stb.)

277


■ egyrészt ne bízzunk abban, hogy a nyomtatásban is lesz háttérkép,

(olvashatóság, papír takarékosság)


A nyomtatási stílusban adjuk meg

275

böngészőben számos nyomtatási

szélesebb sorokat használunk

■ pt (pont = in/72), pc (pica = 12 pt)

a margókat és a betűméreteket!

sorokat használni az

■ nyomtatásban jobb, ha

273

geket használunk, mint a Weben:

könnyebb olvasni.

274


Nyomtatáskor más mértékegysé-

■ míg nyomtatásban a talpas betűket (pl. Georgia, Times, serif)

#kereses { display: none;}



4. Kihangsúlyozás

D. Képek és multimédia

5. Kódok formázása

E. Listák és számlálók

6. Indexek

279


280

Rövidítés ... ■ többnyire a title jellemzővel adjuk meg, hogy mit rövidít, de pl. nyomtatásban nem jelenik meg, ■ ezért a magyarázatot ajánlatos nyomtatásban megjelenő módon (is) megadni.


283


281

2. Címhivatkozás 3. Idézetblokk 4. Kihangsúlyozás 5. Kódok formázása 6. Indexek

284

Idézetblokk

1. Rövidítés


...

2. Címhivatkozás

3. Idézetblokk

■ szövegblokk idézetként való kezelését jelenti

3. Idézetblokk 4. Kihangsúlyozás

■ ne használjuk csupán szövegbehúzás érdekében


285

1. Rövidítés

2. Címhivatkozás

4. Kihangsúlyozás

282

Címhivatkozás ... ■ más információforrások (pl. könyvek) címének kiemelése ■ többnyire idézetekkel együtt használják, annak megadására, hogy miből idézünk (pl. könyv címe)

1. Rövidítés




6. Indexek

6. Indexek


286

Kihangsúlyozás


287

Kihangsúlyozás

 ...

 ...

■ szövegrész fontosságának hangsúlyozására

■ szövegrész fontosságának még erősebb kihangsúlyozására

■ semmi köze a mértékegységként használt em-hez

■ általában vastagított betűkkel jelenik meg

■ általában dőlt betűvel jelenik meg


288

Kihangsúlyozás ■ ha csak formázni szeretnénk a szöveget, akkor ne használjunk hangsúlyozó elemeket, helyette lehet CSS-ben formázzuk.


289


1. Rövidítés

...

2. Címhivatkozás

■ számítógépes kódok

4. Kihangsúlyozás

■ billentyűzetről beviendő utasítások


...

6. Indexek

■ további célú írógépbetűk

292

x10


293

Felső és alsó index

1. Rövidítés



294

7. Szövegdíszítés és átalakítás

 (superscript)

2. Címhivatkozás

8. Betűk eltávolítása

felső index

3. Idézetblokk

 (subscript)

4. Kihangsúlyozás

9. Sortörés

alsó index


10. Sorok behúzása

6. Indexek

11. Karakterek és formázásuk


291

<pre> ... ■ megtartja az eredeti dokumentum szerinti szóközöket, sortöréseket ■ pl. ASCII karakterekkel előállított képekhez vagy egyszerű táblázatok kialakítására használják ■ ugyanez CSS-el szabványosan is megvalósítható

...

3. Idézetblokk


290

295


296

x13.html


297

...

text-decoration

text-transform

■ none: nincs

■ uppercase: nagybetűs



■ underline: aláhúzott

■ lowercase: kisbetűs

■ overline: föléhúzott ■ blink: villogó

■ capitalize: nagy kezdőbetűs (böngászőfüggő, hogy mi számít "szónak")

1. Fölé és áthúzott szöveg.

■ inherit: öröklés

■ none, inherit

■ line-through: átthúzott

 2. Hosszú szöveg.

x13

x13.css



298

301

.kisbetus {

299

x13.css

 3. Hosszú szöveg.
 4. hosszú szöveg. további HOSSZÚ szöveg. 5. hosszú szöveg.

body {

x13.html



302


.nagybetus { 9. A sormagasság beállítása

text-transform: uppercase; }

text-transform: capitalize; }


7. Szövegdíszítés és átalakítás 8. Betűk eltávolítása 9. A sormagasság beállítása 10. Sortörés 11. Sorok behúzása

background-color: #0A0; font-size: 2em; color: #fff; } .foleathuzott { text-decoration: line-through overline; }


303

■ negatív érték esetén a karakterek közelebb kerülnek egymáshoz.

10. Sortörés

.nagykezdobetus {

300

■ a karakterek közötti távolság a letter-spacing tulajdonsággal állítható


text-transform: lowercase; }



304


305

■ a sor magassága a line-height kijelölővel állítható be; ez adja meg, hogy az egyes sorok milyen távolságra legyenek egymástól; ■ negatív érték nem szabályos, még akkor sem, ha egyes böngészőkben működik.


7. Szövegdíszítés és átalakítás 8. Betűk eltávolítása 9. A sormagasság beállítása 10. Sortörés 11. Sorok behúzása

306

x12


307

x12


308

white-space:

white-space:

■ normal: a többszörös üres helyeket egyetlen szóközzé alakítja

■ pre-wrap: megőrzi a többszörös üres helyeket, de engedélyezi az automatikus sortörést

■ pre: megőrzi a többszörös üres helyeket ■ nowrap:
hiányában nincs sortörés még sor végén sem



x14.html


A HTML (Hypertext Markup Language) egy rövidítés.



312

eredményez.

x14.html

x14.html

■ negatív érték megadása kilógást

313

Ezeket a lehetőségeket

...

behúzásának mértékét;


blokkobjektumra is így működnek

311

(pl. bekezdés) első sorának 10. Sortörés

oldalra, de azon belül bármilyen

böngészők nem mind ismerik.

megadhatjuk a tömbszerű elem

9. A sormagasság beállítása

309

(jellemzően az utolsó kettőt) a

■ a text-indent jellemzővel



Ezek a formázások nem csak egy

■ pre-line: megőrzi a sortörést, egyébként normal

310


x12

314

x14.html


A Kosár Magazin legújabb számában olyasmiket olvashatunk, mint DVD teszt, fekete teák tesztje stb.

315

x14.html


316

x14.html


317


319

x14.html



318

Ha csak formázni

Rosszul van a világ megalkotva. Aki szeret, azt nem szeretik. Akit szeretnek, az nem szeret. Aki szeret és viszontszerettetik, azt is előbb-utóbb elválasztják szerelmétől. (Romain Rolland)

x14.html

x14.html

320

szeretnénk a szöveget, akkor ne használjunk hangsúlyozó elemeket, helyette lehet pl. dőltés vagy vastagítás.

x14.html


321

x14.html


324

 Írhatók továbbá számítógépes kódok, billentyűzetről beviendő utasítások, vagy további célú írógépbetűk is.

x14.html


322

De az eredeti formázás is megtartható:

<pre> Mindig az a perc a legszebb perc Mit meg nem ád az élet, Az a legszebb csók, mit el nem csókolunk. (Mihály István)

x14.html


323

Ez csak a nyomtatható változatban látszik.

x14a.css


325

body {

x14a.css


x14.html


327

329

x14p.css


330

#szoveg{

margin-right: 14%;

font: 0.8em Verdana;

margin-left: 14%;

color: #ff0;

background: #009;

}

font: 1em Verdana, Arial; color: #fff;

cite { color:#0f0; }

}

#nyomtat { display: none; }

x14.html

326


328

x14p.css


body {

#kodok { display: none; }

margin: 0.5in;

p { text-indent: 1.8em; }

background: #fdd; font-family: Georgia, Times, serif;

#nyomtat { display: inline;

font-size: 14pt;

letter-spacing: 0.5em;

color: #000; }

}

x14p


331


332


A. Alapfogalmak

1. A webhely azonosítása

B. Szövegek

2. A webhely megtervezése

C. Hivatkozások

3. A hivatkozás szintaxisa

D. Képek és multimédia E. Listák és számlálók

4. Mire hivatkozhatunk? 5. Az elérési út

333


334


335


336

URI: Uniform Resource Identifier

URL: Uniform Resource Locator

URN: Unversal Resource Name

■ egységes erőforrás-azonosító

■ egységes erőforráscím

■ webes erőforrásokat azonosít

■ a kiszolgálók és azon belül a fájlok helyét adja meg

■ elektronikus dokumentumok hosszútávú azonosítására szolgál

■ kétféleképpen azonosíthat:

Pl: urn:isbn:0-395-36341-1

□ hely szerint (URL) vagy

Pl.

□ név szerint (URN).

http://www.kiszolgalo.hu/mappa/fajl.html


□ nem mond semmit a könyv helyéről, elérhetőségéről

337


URN: Unversal Resource Name


■ egy központi adatbázisban az URL-el együtt tárolják


■ az URL változásakor ezt frissítve, a külső linkek továbbra is jól tudnak működni


https://nws.niif.hu/ncd2003/docs/ehu/EHU-16.htm

5. Az elérési út

338

340

Pl.:

■ A könyvtár nevében lehetnek

http://www.inf.u-szeged.hu/~chollo/

□ betűk, számok

■ a / a könyvtárnév végén gyorsítja a letöltést

□ betűvel kezdődik

■a http://www.inf.u-szeged.hu/~chollo/index.html

nyitódik meg

□ -, _ de a nyilvános könyvtárnevekben lehetőleg kerüljük (nehezen megjegyezhetők)

■ Fontos a jó tervezés, mert:

339

■ Ha egy könyvtárban van index.htm, index.html vagy default.htm nevű fájl, akkor a könyvtárhivatkozással automatikusan az nyitódik meg

4. Mire hivatkozhatunk?



■ Mindig van egy főkönyvtár, melyben akárhány alkönyvtárunk lehet, ezekben kell mindent elhelyeznünk

http://nbn.urn.hu/


□ egy könyvet azonosít az ISBN adata alapján

341


342

■ Később nehéz a fájlokat áthelyezni, mert javítani kell az összes rájuk mutató relatív hivatkozást ■ A felhasználók könyvjelzői nem fognak működni ■ A tartalomnak minél könnyebben átláthatónak kell lenni


343


Hivatkozás (hyperlink)


Egy hivatkozásnak két része van,

2. A webhely megtervezése 3. A hivatkozás szintaxisa

horgonyoknak szoktak nevezni:

A kattintható XHTML objektum többnyire szöveg, de más objektum (kép, gomb stb.) is lehet.

5. Az elérési út

■ cél (ahova mutat).

A cél URI-jét, vagyis azt, hogy hova mutasson a link, az tag href (hypertext reference) tulajdonságának értékeként adjuk meg. A forrásra kattintva a böngésző a href értékeként megadott célt jeleníti meg.


349

Azonos oldalon belüli célt például így adhatunk meg: Ugrás ! Másik oldalon levő célt pedig például így: Ugrás !

A forrás megadása XHTML-ben az (anchor) taggal lehetséges: XHTML objektum

■ forrás (amire kattintani lehet)

346

345


melyeket gyűjtőnéven



344


347

A hivatkozott URL

Lehetőség van arra is, hogy

általános alakja

célként egy weboldalon belül

azonosított pontot adjunk meg. Ezt azonosíthatjuk id-vel, vagy

fájlnév[#celNeve]”>

megadhatjuk a következőképpen: Első cél



348


350

Ide kattints !

töredék (fragment)


Gyakoribb protokoll értékek:


• http: helyi vagy távoli WWW szerveren levő HTML dokumentum (alapértelmezés)


• file: helyi állomány


5. Az elérési út

351

• ftp: FTP szerveren levő állomány


352


353


354

Gyakoribb protokoll értékek:

Pl.

• telnet: bejelentkezés másik gépre

Ez a honlapom !

FTP kapcsolat

• mailto: a saját gépen beállított levelezőrendszer elindítása, a látogató a megadott címre e-mailt küldhet

Ez a honlapom !

Ez egy

Ez egy fájl a saját gépen. FTP kapcsolat

fájl a saját gépen.


355


356

Telnet


358



357

Írj nekem !

359


360

■ A levél tárgysorát is automatikusan kitöltethetjük, ebben az esetben:




relatív linkek alapértelmezett kiinduló könyvtára

5. Az elérési út

szeged.hu?subject=targy”> Írj nekem !

Az elérési út lehet • abszolút vagy


• relatív.


361

oktat/04_2/progI0405.htm">

364

Az állapot szerinti formázásokra a CSS álosztály-kijelölőket használ. A hivatkozások álosztályok, mert a hivatkozás állapota nem szerepel az XHTML kódban, hanem a felhasználó tevékenységétől függ.

Az a:link teszteléséhez szükség lehet arra, hogy az oldal újból nem felkeresettnek minősüljön.

2. a felhasználó felkereste 3. az egér fölötte áll

8. Hivatkozások formázása

367


4. használatban van (a hivatkozott oldal betöltése folyamatban van)

365

A fenti állapotokhoz sorrendben az alábbi kijelölőket használjuk: a:link - a felhasználó még nem kereste fel a:visited - a felhasználó már felkereste a:hover - az egér fölötte áll a:active - éppen aktív


363

1. a felhasználó még nem kereste fel

háttérkép segítségével

Relatív link ugyanarra.

Azokat az oldalakat tekinti felkeresetteknek, amelyek szerepelnek az adott böngésző böngészési előzményei között.

formázása mutató hivatkozás

Abszolút link


A hivatkozásoknak 4 fő állapota lehet:

7. Az éppen látható weblapra

"http://www.inf.u-szeged.hu/~chollo/


362

6. Hivatkozások egyszerű

"http://www.inf.u-szeged.hu/~chollo/gombok/" />



368

Ha egy már meglátogatott oldalt vissza szeretnénk állítani nem meglátogatottra, akkor törölni kell azt az adott böngészőben a böngészési előzmények közül.


366

Használhatjuk ezeket más kijelölőkkel együtt is. Pl. #linkek a:link{ color:#0f0; } #linkek a:visited{ color:#0f0; } #linkek a:hover{ color:#fff; } #linkek a:active{ color:#f00; } Viszont fontos ez a sorrend!


369

A kattintható objektumot a böngészők általában aláhúzva vagy bekeretezve jelenítik meg. Ezt beállítani vagy letiltani az objektum text-decoration, illetve border tulajdonságának none értékével lehet.


370

formázása 7. Az éppen látható weblapra mutató hivatkozás

x15m1.html


372


375

Másfelől valahogyan mégis jelezni kellene, hogy éppen melyik hivatkozás által mutatott oldalt nézzük.

8. Hivatkozások formázása háttérkép segítségével


371

Ha írunk egy menüsort, mely hivatkozásokat tartalmaz, jó ha a menüsor tartalma változatlan marad, bármelyik oldalt is nézzük.

6. Hivatkozások egyszerű

x15m2.html


373

x15m3.html


374

x15m*.html

Menük <meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-2" />

x15m1.html


376

Első | Második | Harmadik

Ez az első oldal.

x15m1.html


377

x15.css


378

body{ font-size: 3em; } #menu{ background-color: #eee; border: 30px groove #00f; } a.aktualis:link{ color:#f00;} a.aktualis:visited{ color:#f90; } a.aktualis:hover{ color:#f0f; } a.aktualis:active{ color:#000; }

x15m1.html

x15m2.html


379

x15m1.html


382

x15.css

Első | Második | Harmadik

Ez a második oldal.

x15m2.html


385


380

x15m1.html


383

x15m2.html

386

x15m2.html


381


384


387

.aktualis a:link{ color:#000; } .aktualis a:visited{ color:#0c0; } .aktualis a:hover{color:#cc0; } .aktualis a:active{ color:#0ff; }

x15m2.html


x15m3.html


388

x15m3.html


389

x15m3.html


392

x15.css


390


393

Első | Második | Harmadik

Ez a harmadik oldal.

x15m3.html


391

x15m3.html

a.aktualis:link{ color:#f00;} a.aktualis:visited{ color:#f90; } a.aktualis:hover{ color:#f0f; } a.aktualis:active{ color:#000; }


6. Hivatkozások egyszerű formázása 7. Az éppen látható weblapra mutató hivatkozás 8. Hivatkozások formázása háttérkép segítségével

394


395


396

Amikor a hivatkozás fölé megyünk az egérrel, nem csak betűk színe változhat meg, hanem a hivatkozás háttere is.

Ehhez a link és hover tulajdonságoknak különböző háttérszínt vagy háttérképet kell megadnunk.

Ezeket nevezik háttérváltoztató hivatkozásoknak.

Pl.:

x16.css


397



398

x16.html


399


402

#menu a.aktualis:link, #menu a.aktualis:visited{ color:#ff0; background: url(bg3.jpg) no-repeat center center; } #menu a.aktualis:hover{ color:#0a0; background: url(bg2.jpg) no-repeat center center; }

#menu a:link, #menu a:visited { color: #FFF; background: #f00 no-repeat center center; } #menu a:hover { color: #00f; background: #ff0 no-repeat center center; }

x16.html

x16.css

400

x16.html


401

A. Alapfogalmak B. Szövegek C. Hivatkozások D. Képek és multimédia E. Listák és számlálók


1. Képek beszúrása 2. Képtérképek létrehozása 3. Multimédiás anyagok elhelyezése

403


404


Az img elem jellemzői:


■ src: a képfájl elérési útja (ez is lehet abszolút vagy relatív)

■ id: a képobjektum azonosítója

■ width: szélesség, ■ height: magasság ■ alt: helyettesítő szöveg arra az esetre, ha a kép nem jelenik meg

■ name: a kép neve, helyette az id-et használhatjuk ■ longdesc: a kép leírását tartalmazó fájl elérési útja

405


406


407



■ title: ezt a szöveget mutatja a böngésző, ha az egérrel a kép fölé állunk

■ hspace, vspace: a kép melletti vízszintes térköz, függőleges térköz

■ usemap, ismap: interaktív képekhez (képtérképekhez) fogjuk használni (lsd. később)

■ border: a képet körülvevő szegély



410

■ Kép beillesztésénél mindig adjuk meg a méretét, mert így a böngésző már startból tudja, hogy mennyi helyet hagyjon ki számára, nem kell megvárnia a letöltést.


412

■ Ajánlatos körbevágni és csak azt menteni el belőle, ami kell.

411 x17.html

Hivatkozás <meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-2" />

alt = "kutya" id = "kutya"

A képek méretének csökkentése érdekében:

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

■ Böngészőben megnyitva a kép mérete a címsorban látszik:

x17.html

408

■ Eredeti méretben való megjelenítéshez ajánlatos kb. 75-96 dpi felbontásban újra elmenteni.

□ ezeket nem használjuk, helyette CSS-ben fogjuk formázni

409


x17.html


413

414 x17m.html
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Hivatkozás <meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-2" />

x17m.html


415

x17m.html


416

x17.css


417

a:link #kutya {

border:solid #00f 5px;

width = "700px" height = "350px"

}

alt = "kutya"

a:visited #kutya { border:solid #0c0 5px;

longdesc = "x17k.htm" }

title = "Ez egy kutya :)" />

x17.html


418


419


1. Képek beszúrása

a. Képtérképek definiálása

2. Képtérképek létrehozása

b. Az alakzatok koordinátái

3. Multimédiás anyagok

c. Példa

420

elhelyezése


Képtérképek <map> … • a képtérkép definiálása • name: a képtérkép neve <area> … • objektum definiálása

421


422

<area> tulajdonságai:



• shape: alakzat típusa: • circ, poly, rect • coords: koordináták megadása (megnézhetők pl. a Paint-ben) • href: hivatkozás megadása

b. Az alakzatok koordinátái c. Példa

423


424

Az alakzatok koordinátái


Az alakzatok koordinátái

■ A bal felső sarok koordinátája: (0,0)

poly: a sokszög koordinátái:

rect: 4 érték: a téglalap

circle: a kör □ középpontja és

■ jobb alsó (xja,yja) koordinátái,

□ sugara,

■ tehát xbf, ybf, xja, yja

□ tehát: xc, yc, r


427

x18.html

c. Példa


428

src = "Kepek/szekely.jpg"

x18.html


<area alt =

"Kis gyerek"

"Nagy gyerek"

alt= "Székely gyerekek"

shape="rect"

shape="rect"

height = "400" width = "238"

coords=

coords=

"0,61,118,392"

<map id="t1" name="t1">

x18.html


href="x2.html" />

430

<area alt = "Kör" shape="circle"


431

"122,0,236,382" href="x4.html" />


432

1. Képek beszúrása

Multimédiás fájlokat XHTML-be beszúrni:

2. Képtérképek létrehozása

■ a W3C előírásai szerint object tagként kell,

3. Multimédiás anyagok

■ nem szabványosan még embedel próbálkozhatunk.

coords="33,33,16" href="x5.html" />

429

<area alt =

usemap ="#t1" />

426

b. Az alakzatok koordinátái



□ x1, y1, x2, y2, …, xn, yn

■ bal felső (xbf,ybf) és

x18.html

425

elhelyezése

A fájl típusát is meg kell adni.


433

Pl. néhány fájltípus: ■ audio/mp3, audio/mpeg ■ application/x-shockwave-flash ■ video/quicktime, ■ application/x-mplayer2. Bizonyos esetekben IE-ben a fájltípust a Windows-os classid értékeként kell megadni.


x19.html


434

436

Háttérhangok elhelyezése


437

□ XHTML 1.0 Transitional

• loop: lejátszások száma

loop = "infinite">

438

D. Képek és multimédia E. Listák és számlálók

439

A listákat felsorolásokra használjuk és XHTML-ben 3 típusuk van: 1. Egyszerű (felsorolásjeles) listák 2. Számozott listák
list item: felsorolandó elem

3. Meghatározáslisták


C. Hivatkozások

• infinite vagy -1: végtelen lejátszás XHTML és CSS © Holló Csaba

A param tulajdonsággal a fájl típusától függően számos paramétert lehet beállítani. Pl. autoplay, controller, autostart, showcontrols, showstatusbar, autorewind, src (ha az object-ben nem adtuk meg data-val).

B. Szövegek

• (wav, au, mid) • src: a hangállomány neve

435

A. Alapfogalmak

■ DOCTYPE:



440


■ A listák egymásba ágyazhatók, de fontos, hogy a teljes listát beágyazzuk

1. Egyszerű listák

■ A listák formázásához használhatjuk az eddig megismert CSS stílusokat is. A továbbiakban csak a listákra jellemző speciális tulajdonságokat ismertetjük.


2. Számozott listák

4. A listák elrendezése 5. Lenyíló menü készítése 6. Számlálók

441


442

Egyszerű (felsorolásjeles) listák ■ unordered list


443

■ A felsorolásjelek típusának megadására a list-style-type

■
a teljes lista

CSS tulajdonságot használjuk,

Pl.

liszt

melynek értékei:

tojás

só

□ disc (teli kör)

cukor

vaj

□ circle (üres kör)


445


list-style-image CSS tulajdonságot használjuk. Pl. list-style-image: url(kep.gif) □ a kép helyét a stíluslap helyéhez viszonyítva kell megadni

446


A list-style-position CSS tulajdonsággal megadhatjuk azt is, hogy a felsorolásjel kilógjon-e a szöveg vonalából:

A lista tulajdonságainak rövidített megadásánál a list-style értékeit a következő sorrendben adjuk meg:


■ outside: kilóg, alapértelmezett

1. list-style-type

4. A listák elrendezése

■ inside: a felsorolásjel egy vonalban lesz a listaelem tartalmával

2. list-style-image

5. Lenyíló menü készítése


Számozott listák

448

3. list-style-position


447

2. Számozott listák 3. Meghatározáslisták

6. Számlálók

449

■ A számozott listák kezdőértékét a

■ ordered list

start jellemzővel adhatjuk meg,

■ a lista elemei előtt arab vagy római számok, illetve betűk állhatnak

melynek értéke arab szám akkor is,

■
a teljes lista

444

■ Felsorolásjelként használhatunk képet is, ebben az esetben a

□ square (négyzet)


ha a számozás római szám vagy betű lesz. Pl.

harmadik

negyedik


450

■ Alapértelmezés szerint a lista címkéi arab számok és start = ”1”. ■ A sorszámok típusának megadására a list-style-type

CSS tulajdonságot használjuk, melynek értékei: ■ none (nincs) ■ decimal (arab szám)


451

■ decimal-leading-zero (arab szám kezdő nullával) ■ upper-alpha (nagybetűk) ■ lower-alpha (kisbetűk) ■ upper-roman (római számok nagybetűkkel írva) ■ lower-roman (római számok kisbetűkkel írva)

x20.html



452


Meghatározáslisták


definition list


definition term:

definiton data:


a meghatározás

6. Számlálók

454


455



■ blokkszintűként


Szoftver

... ami miatt belerúgunk a hardverbe

display: block


■ vagy szövegközi elemként display: inline


viselkedjen.

6. Számlálók

457

A display tulajdonság segítségével megoldható, hogy

x21.html


456

A display tulajdonság segítségével megadható, hogy egy elem:


... amibe bele lehet rúgni

453

mit definiálunk


Hardver



458

x21.html


459

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

■ a normál esetben blokkszintű elemek nem blokkszintűként,

■ a normál esetben szövegközi elemek blokkszintűként

Függőleges listák

jelenjenek meg.

<meta http-equiv="Content-Type" content= "text/html;charset=ISO-8859-2" />

x21.html


460

x21.html


461

x21.css


Egyetem

Hobbi

ETR

Tánc

STUD

Olvasás

width: 170px;

INF

Zene

padding: 0 0 0 20px ;

#linkek{

border: 1px solid #d0b26f;

}

x21.html

background: #77f;


463

x21.css

462


464

x21.html


465

467

x21.css


468

ul { list-style-type: circle; list-style-position: inside; padding: 5px; background: #500; color: #ff0; }

x21.css


ul ol{

466

x21.html


#linkek a{

list-style: upper-alpha outside;

width: 100px; padding: 5px;

padding: 7px; }

border: 1px solid #d0b26f;

#link2{ list-style: lower-roman inside;

color: #fff; text-decoration: none;

}

text-align: center;

li{ margin: 3px 0 3px 0; }

display: block; }

x21.css


469

x21.html

470


#linkek a:link,

x21.css

471


#linkek a:hover{

#linkek a:visited,

background: url(Kepek/bg3.jpg)

#linkek a:active{

no-repeat center center;

background: url(Kepek/bg1.jpg)

color: #0fa;

no-repeat center center;

}

}

x21.html


472

x22.html

473


x22.html


474

x22.html


Egyetem

475

x22.html

ETR

STUD

INF

x22.html


477

Hobbi

476


Tánc

Olvasás

Zene

x22.css


478

#linkek {

x22.css


479

x22.html


480

482

x22.css


483

ul {

background: #ccf;

list-style: none;

width: 720px;

padding: 5px;

border: 5px solid #d0b26f; display: inline;

padding: 30px; }

}

x22.css


481

x22.html


ol {

ul li {

list-style: none;

margin: 0 80px 0 90px;

display: inline; }

padding: 5px 30px 5px 30px;

li {

border: groove 5px #f00; }

background: #500;

ol li {

color: #ff0;

margin: 0 5px 0 5px;

display: inline; }

x22.css


#linkek a{

}

484

x22.css

#linkek a:hover {

background: #005;

background: #ff0;

width: 80px; padding: 5px;

color: #00f;

border: 4px outset #d0b26f; color: #fff; text-decoration: none; text-align: center; }


}

485

x22.html


486


487

x23.css


488

x23.css


489

490

x23.html


491

x23.html


492

494

x23.html


495

1. Egyszerű listák 2. Számozott listák 3. Meghatározáslisták 4. A listák elrendezése 5. Lenyíló menü készítése 6. Számlálók

x23.html


... CSS menü

A menü

type="text/css"

a1

href="cssMenu.css" /> ...

a2

a21

x23.html


493

x23.html


a22

B menü

a23

B1

B2

a3

B3

B31

x23.html


496

x23.html


497

x23.css


B32

B5

B33

B34

}

B35

#menu { position: absolute;

}

B4

.fm { margin: 20px 0 0 20px; }

x23.css


499

#menu a:link, #menu a:visited,

x23.css

color: black;

top: 0px; left: 0px;


x23.css

} #menu ul li ul { display: none;}

vertical-align: middle;

margin: 0; padding: 0;

display: block; color: #ffffff;

list-style-type: none;

#menu ul li:hover ul { display: block;

}

502

}

x23.css


#menu ul li ul li { position: relative; top:0; left: 0; border: 1px solid #ff0000; } #menu ul li ul li ul { position: absolute; top:0; left: 4em; }

501

float: left; width: 4em;

#menu ul {

background-color: #000066; }


#menu ul li {

color: black; }

font-size: 1em; height: 1.2em;


500

background-color: white;

text-decoration: none;

x23.css

body { background-color: #ffddff;

#menu a:hover {

#menu a:active {

498

503

x23.css


504

x23.css


505

x23.css


506

#menu ul li ul li ul li {


507


display: none;


}


#menu ul li ul li:hover ul li {


display: block;


}

6. Számlálók


508

CSS-ben definiálhatunk számlálókat, melyek segítségével automatikusan számozhatjuk a fejezeteket, alfejezeteket, a felsorolások elemeit stb.



509

Használat előtt ajánlott a számlálót inicializálni. Pl. body { counter-reset: cim; } h2 { counter-reset: alcim; } De hogyan fogjuk kiíratni?

A számláló neve tetszőleges azonosító név lehet.

x24.css

x24.css


510

Lehetőség van arra, hogy :before, illetve :after használatával előírjuk adott elemek előtt vagy után tetszőleges tartalom automatikus megjelenítését. Továbbá egy számláló értékét a counter(szamlalo) adja meg.

511

Így tehát ha a h2-es cím előtt meg szeretnénk jeleníteni a fejezet számát, akkor: h2:before { content: counter(cim) ". fejezet:"; } Csakhogy így a következő h2-es fejezetnek is ugyanolyan száma lenne!


512

Tehát a fejezet számának kiírásakor növelnünk kell a fejezetszámlálót (cim). Továbbá, ha azt szeretnénk, hogy az elfejezetek számozása az új fejezetben újrakezdődjön, akkor az alfejezet számlálót (alcim) újra inicializálnunk kell.

x24.css


513

h2 { counter-increment: cim; counter-reset: alcim; } h2:before { content: counter(cim) ". fejezet:"; } h3 { counter-increment: alcim; } h3:before { content: counter(cim) "." counter(alcim) " "; }


514

x24.css


Az
start jellemzőjének használata is kiváltható számláló használatával.

ol#elso_resz {

Ehhez a beazonosított
-ben tetszőleges értékkel inicializáljuk a számlálót, melyet minden
előtt megjelenítünk és növelünk:

ol#elso_resz li:before {


517

G. Űrlapok H. Billentyűzettel történő vezérlés megvalósítása I. Keretek

520

a táblázat
a táblázat címe egy sor egy cella fejléc cella , , ■ fejrész, törzs, lábléc elkülönítése

x24.css


516

Ahhoz, hogy a
elemek automatikus számozása ne jelenjen meg, el azt kell tüntetnünk például oly módon, hogy block vagy inline értéket adunk a display tulajdonságának:

counter-reset: szamlalo 5; } content: counter(szamlalo) ". "; counter-increment: szamlalo;

li { display: block; }

}


518

■ Nem ajánlott táblázatot használni az oldal elemeinek elrendezésére, csak akkor, ha tényleg adatok táblázatos megjelenítését akarjuk, és akkor is csak a legegyszerűbb formában, mert megnehezítjük a felolvasó szoftverek dolgát.

F. Táblázatok


515


521


1. A táblázatok összetevői 2. A table jellemzői 3. A td, th jellemzői 4. A caption jellemzői 5. Példa


thead: fejlécsorok csoportját határozza meg a táblázatban,

tfoot: láblécsorok csoportját határozza meg a táblázatban,

■ több oldalas táblázatoknál nyomtatáskor szabvány szerint minden oldalon megjelenik

■ több oldalas táblázatoknál nyomtatáskor szabvány szerint minden oldalon megjelenik

■ a table elem egy thead -et tartalmazhat.

519

522

■ tábázat egy tfoot elemet tartalmazhat, amelynek a thead után, de a tbody előtt kell lennie


523

tbody: adatsorok csoportját definiálja a táblázatban ■ a table elemnek tartalmaznia kell egy, vagy több tbody elemet, ■ akkor opcionális, ha a táblázat csak egy tbody -t tartalmaz és és nem tartalmaz thead-et, vagy tfoot-ot.


■ Az XHTML Transitional változatában lehetőség van a fenti tag-ek tulajdonságaként formázási jellemezőket is megadni


3. A td, th jellemzői 4. A caption jellemzői 5. Példa

529


jellemzői border-collapse: cellák szegélyének összevonása cellspacing (border-spacing): a border-collapse: separate)

527

jellemzői width: a táblázat szélessége □ %-al az őt tartalmazó tárolóelemhez viszonyítja és a mérete az ablak átméretezésekor változik border (border-width): a táblázat szegélye

2. A table jellemzői

cellák közötti távolság (csak ha

524

■ Az üres cellákba a helyes formázás érdekébe ajánlott egy -t beírni.

526

1. A táblázatok összetevői



530

jellemzői summary: a képernyő felolvasó szoftverek számára írt tájékoztató szöveg a táblázatról (nem jelenik meg)


525

■ Manapság már ajánlott inkább a CSS-es formázást használni, de mivel még találkozhatunk régi formázásokat használó táblázatokkal is, ezért mindkét lehetőséget bemutatjuk. Ahol a CSS-es tulajdonság neve különbözik a HTMLestől, ott azt dőlt betűkkel írjuk.


528

jellemzői frame: hol legyen szegély a táblázat körül (balról, jobbról stb.) rules: hol legyen szegély a táblázat cellái körül (vízszintesen, függőlegesen) ■ ezek CSS-ben másképp vannak


531

■ A táblázat és celláinak formázására használhatók az eddig megismert CSS tulajdonságok is (pl. border többi lehetőségei, background stb.) ■ CSS-ben a cellák szegélyét nem a táblázat, hanem a cellák border tulajdonságaként adjuk meg


532


533

jellemzői


align (text-align): a szöveg vízszintes igazítása a cellában

2. A table jellemzői 3. A td, th jellemzői

valign (vertical-align): a szöveg függőleges igazítása a cellában

4. A caption jellemzői

■ baseline a sorvezetőhöz, bottom a teljes szöveg aljához igazít

5. Példa


535

jellemzői


538

536


537

539

jellemzzői

scope: a fejléc celláról megmondja hogy az sor vagy oszlop fejléc cellája annak érdekében, hogy a td elemeket jobban tudja a fejlécekhez társítani □ értékei: col, row


534

jellemzői rowspan, colspan: a cella hány sor illetve oszlop szélességű, illetve magasságú headers: a cella fejrészekhez való társítása width: a cella szélessége cellpadding: a cella belső margója

jellemzzői

axis: a cellákat a fejlécektől eltérő kategóriákba is sorolhatjuk, amelyek alapján más programok (pl. felolvasó szoftverek) jobban tudják értelmezni és feldolgozni őket. Pl. axis = "Italok".




scope: csak akkor használjuk, ha nincsenek colspan, rowspan tulajdonságok Pl. Oszlop fejéce
jellemzői




■ közvetlenül a után kell állnia


3. A td, th jellemzői

align (caption-side): hol legyen elhelyezve (a táblázat fölött, alatt)

3. A td, th jellemzői



5. Példa

5. Példa

540

541 x25.html
x25.html


542

x25.html


543

x25.html


545

x25.html


546

"http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd">

x25.html


544

x25.html


547

x25.html

table

x25.html


550

x25.html


551

"table css tulajdonsagCss">

width

"table css ertekCss">

%, px

...

x25.html


553

x25.html


554

x25.html


555

x25.html


558

x25.html


556

x25.css

table {

border: 2px double #00f; } caption{

font-weight: bold;

...
Táblázat tulajdonságai

Címke XHTML CSS

Lábléc cellák (pl. oszlopok összegei)


548

x25.html


549

Tulajdonság Érték Tulajdonság Érték

width %, px
x25.html


552

summary szöveg

td, th width %, px width %, px

border px borderwidth px


caption-side: bottom; }

557


x25.css

559

#cimke { width: 10%; }


560

2. Beviteli mezők

G. Űrlapok

td, th { border: 1px solid #000; }

3. Szövegmező

H. Billentyűzettel történő

.ertek { width: 25%; }

562

Űrlapok • Minden ami az űrlaphoz tartozik (beviteli mezők, gombok, gördülő menük stb.) • tulajdonságok:

módszere • levélküldéskor: text/plain • ha az űrlapunk fájlt is tartalmaz akkor multipart/form-data


563

• az űrlap elküldésekor végrehajtandó feladat • e-mail címre történő elküldés: "mailto:[email protected]” • egy programfájl futtatása: "http://szerver.hu/cgi-bin/feldolgoz.cgi"

• action, method, enctype

• Az elküldött adatok kódolási

6. Választógomb

Action

Enctype

5. Rejtett mező

I. Keretek

text-align: center;}


4. Jelszómező

vezérlés megvalósítása

tfoot{ color:#f00;


561

1. Alapfogalmak

F. Táblázatok

#xhtml, #css { width: 45%; }


565


566

Enctype • Alapesetben: application/xwww-form-urlencoded • mezőnév = érték • az értékpárokat & jellel választja el • a szóközöket + jelekre cseréli


564

Method • miként küldje el az adatokat a szervernek • get: (alapértelmezett): az adatok az URL-ben kerülnek elküldésre • post: az adatok a program standard bemenetére kerülnek • pl. levél és fájlküldéskor ez kell

x28.html


567

Enctype • Alapesetben: application/xwww-form-urlencoded • a speciális karaktereket pedig egy %XX típusú jelre cseréli, ahol XX a karakterek hexadecimális ASCII kódjának felel meg


568

569

Beviteli mezők egyedei üres objektumok • type: beviteli mező típusa: - text - file - password - reset - hidden - submit - radio - image - checkbox - button

1. Alapfogalmak 2. Beviteli mezők 3. Szövegmező 4. Jelszómező 5. Rejtett mező 6. Választógomb



571


572

574



• src: ha type = image, akkor a kép URL címét tartalmazza


575

Szövegmező


1. Alapfogalmak

2. Beviteli mezők

• rövid szöveges érték bevitelére

3. Szövegmező

szolgál • számokat is ezzel olvasunk be és átalakítjuk numerikus értékre

573

6. Választógomb

módosítható, de látható


értéke vagy felirata

5. Rejtett mező

□ True = a beírt szöveg nem

■ size: szövegmező szélessége

• value: a mező alapértelmezett

4. Jelszómező

■ readOnly:

maximális száma

• name: a mező neve

3. Szövegmező

□ True = letiltott (és halvány)

■ maxlength: a beírható karakterek

2. Beviteli mezők

■ disabled:

alapállapotban legyen kijelölve

570

1. Alapfogalmak

■ checked: a checkbox vagy radio


4. Jelszómező 5. Rejtett mező 6. Választógomb

576


577




2. Beviteli mezők

• Tipikusan jelszavak bekérésére használják

4. Jelszómező

• A továbbításnál nincs titkosítás !

6. Választógomb


3. Szövegmező

5. Rejtett mező

581

Rejtett mező


2. Beviteli mezők

■ Pl. azonosítható vele, hogy melyik oldalon levő úrlap került elküldésre

4. Jelszómező

3. Szövegmező

5. Rejtett mező 6. Választógomb

584

Választógomb • akkor használjuk, ha több válasz közül csak egy jelölhető meg • a name tulajdonság azonossága rendeli a választógombokat egy csoportba

582

1. Alapfogalmak

■ Nem látszik a képernyőn, de értékét a program megkapja, feldolgozhatja


579

1. Alapfogalmak

• Egy olyan szövegmező, amely esetében a beírt karakterek helyett *-ok jelennek meg

583


578

Jelszómező

580





7. Jelölőnégyzet 8. Fájlfeltöltés 9. Alapállapot gomb 10. Elküldés 11. Nyomógomb 12. Több soros szövegmező

585


586



589



592


587

Jelölőnégyzet

588

7. Jelölőnégyzet

• egy vagy több válasz is megjelölhető a felsoroltak közül

8. Fájlfeltöltés

• az egyes lehetőségekhez tartozó jelölőnégyzetek ki vagy bekapcsolása egymástól független



590

9. Alapállapot gomb 10. Elküldés 11. Nyomógomb 12. Több soros szövegmező


591


594

Fájl csatolása • fájl csatolására alkalmas mezőt jelenít meg • megjelenít egy tallózógombot is, mellyel kiválasztható a csatolandó fájl • method = ”post” • enctype = ”multipart/form-data”



593



595

Alapállapot gomb


8. Fájlfeltöltés

11. Nyomógomb

value = "Törlés" />

■ Az oldalon levő információk elküldésére szolgáló gomb ■ Lehetőség van arra is, hogy az elküldéshez gomb helyett egy képet adjunk meg:


10. Elküldés


599


<submit>


9. Alapállapot gomb

12. Több soros szövegmező

598

601



597


7. Jelölőnégyzet

• Az oldalon levő összes mező értékét az eredeti állapotba állítja, töröl minden utólagos beírást és választást


596

602



600

Küldés gomb helyett kép


Nyomógomb • egy nyomógombot jelenít meg, amelynek funkcionalitást programmal adhatunk (pl. JavaScript)

603


604

7. Jelölőnégyzet

605

Több soros szövegmező ■ Hosszabb szöveges információ

8. Fájlfeltöltés

(pl. a felhasználó észrevételeinek)

9. Alapállapot gomb

bekérésére használjuk

10. Elküldés

■ Megadhatjuk a nagyságát, illetve

11. Nyomógomb

meg is jeleníthetünk benne

12. Több soros szövegmező



szöveget

607


608

kiválasztását (ezt a lehetőséget a

17. Példa

• • selected: az elem kiválasztott • value: az elem kiválasztása esetén elküldendő érték

609

• multiple: engedélyezi több elem

16. Formázás

• size: a listamező magassága


• name: a lista neve

15. Mezőcsoportosítás

Választólista

Több soros szövegmező Mese, mese, meskete ...

<select> …

14. Elemfelirat

610

606

Választólista

13. Választólista



felhasználóval is tudatni kell!)


611

Osztályzat:
<select name = "jegy">


612


613


614


615


618

Osztályzat:
<select name = "jegy" size =”3” >


616


617

Osztályzat:

multiple = ”multiple”>


619


620


13. Választólista 14. Elemfelirat 15. Mezőcsoportosítás 16. Formázás Shift–3 + Ctrl-1 + Ctrl-7

17. Példa

621


622

Ha csak az értékbekérő mezőket jelenítenénk meg, a felhasználó nem tudná, hogy mit kell be írni, ezért azok mellé szöveget is kell írni. Pl. Név: Jelszó:


A logikailag összetartozó

623

Ebből azonban a böngésző számára nem derül ki, hogy az értékbekérő mező és a mellette levő szöveg szorosan összetartoznak, ezért használjuk a címkét, melyben jelöljük, hogy a szöveg melyik mezőnek az elemfelirata:

625

■ Ha a felirat és az űrlapmező közvetlenül egymás után van, akkor ezeket egy … közé téve név nélkül is jelezhető lenne az összetartozás. Ellenkező esetben azonban szükség van a for jellemzőre. Pl.:




name = "nevecske" /> Jelszó:


627

13. Választólista

…

14. Elemfelirat


16. Formázás

name = "nevecske" />

17. Példa

628


629


Név:

címkék közé tesszük.

630

Személyes adatok

és

között .

Név:

űrlapmezőket a

A csoportnak nevet is adhatunk

Név:

626

624


Jelszó:


631


632

A szokásos CSS formázási

13. Választólista

14. Elemfelirat

Érdemes figyelni arra, hogy az


űrlapelemek hátterét nem minden


16. Formázás

böngésző jeleníti meg.

16. Formázás

17. Példa

x26.html

17. Példa.


634

x26.html


635

method="post" enctype= "text/plain">


637

 

x26.html


636

Személyes adatok Név: Jelszó: Életkor:

...
x26.html

633

13. Választólista

módszereket alkalmazzuk.

14. Elemfelirat


x26.html


638

x26.html


639

 <select name = "kor" id = "kor">

x26.html


640

x26.html


641



Az oldal értékelése

name = "tartalom"

id = "tartalom" />

Mi tetszett az oldalon:


643

x26.html




646

Észrevételek, javaslatok:

rows = "2" cols = "30" >

x26.html


648

id = "szoveg"

645

id = "kepek" />

 XHTML és CSS © Holló Csaba name = "szinek" id = "szinek" /> name = "kepek" x26.html színek </label> XHTML és CSS © Holló Csaba 644 <label for = "szinek"> képek </label> x26.html 642 <label 80-119 </option> x26.html XHTML és CSS © Holló Csaba x26.html XHTML és CSS © Holló Csaba 
Összességében hányast adnál az oldalra:

647

x26.html


649

x26.html


650


x26.html

1

2

3





name = "jegy" id = "egy"

name = "jegy" id = "ketto"

name = "jegy" id = "harom"

value = "1" />

value = "2" />

value = "3" />

x26.html


652

x26.html


4

5



653

value = "Eredeti állapot" />

value = "5" />

655

x26.html


656

...

x26.html


657

legend {

#f2{ display: block;

font-weight: bold;

width: 95%; height: 11.2em;

}

654

checked = "checked"

value = "4" />



name = "jegy" id = "ot"

name = "jegy" id = "negy"


x26.html

x26.html

651

position: relative; top: 0; left: 0;

font-family: Arial, Verdana,sansserif;

background: #fee;

color: #0a0;

border: 2px dashed #f00;

letter-spacing: 0.1em; }

x26.html


658

x26.html

659


#nev{ color: #00f;


660

F. Táblázatok

font-weight: bold;

G. Űrlapok

text-align: center; } #nevl{ position: absolute;

H. Billentyűzettel történő

top: 2em; left: 2.5em; }

vezérlés megvalósítása

#nevs { position: absolute; top: 3.3em; left: 1em; }


661

...


662

A tabulátor billentyű nyomkodásá-

1. Váltás a tabulátor

val a fókusz végighalad a

billentyűvel

vezérlőelemeken.

2. Gyorsbillentyűk definiálása

A sorrendet a tabindex tulajdonság használatával állíthatjuk be:

3. Példa


664

A 0 tabindex érték ekvivalens azzal, mint hogyha nem is rendeltünk volna hozza értéket. A -1-es tabindex értékkel rendelkezőket kihagyja a bejárásnál, de ez nem szabványos, ezért a következő megoldást használjuk.


665

A letiltott (disabled) elemek nem fognak szerepelni a bejárásban. A tabindex tulajdonságot a következő vezérlőelemekre adhatjuk meg: a, area, button, input, object, select, textarea.

I. Keretek


663

A tabindex értéke egy 0 és 32767 közötti egész szám kell legyen. Először azok a vezérlőelemek fogják megkapni a fókuszt a tabindex értékek növekvő sorrendjében, melyekhez rendelve van 0-nál nagyobb tabindex érték.


666

A vezérlőelemek bejárásánál a választógombok esetén csak az egyik gomb kerül sorra, a többire a kurzorvezérlő billentyűkkel léphetünk. A jelölőnégyzetek állapotát a szóköz billentyűvel változtathatjuk meg.


667

1. Váltás a tabulátor billentyűvel 2. Gyorsbillentyűk definiálása 3. Példa



Az accesskey értéke az a karakter, melyet böngészőtől függő billentyűkombinációban lenyomva az objektum megkapja a fókuszt.

Vigyázni kell azonban arra, hogy a böngészőkben eleve definiált billentyűkombinációktól különbözőket definiáljunk.


Gyorsbillentyűk használata:

■ kiválasztja az adott elemet

■ IE, Safari: Alt + Gyorsbillentyű

■ parancsgomb esetén a

■ Firefox esetén: Alt + Shift + Gyorsbillentyű

bejelölt állapotot.

x27.html


673

...

 Első

Más odik

669

Gyorsbillentyűk az alábbi elemekre definiálhatók: a, area, button, input, label, legend, teatarea.

Gyorsbillentyű lenyomása

■ jelölőnégyzetnél megváltoztatja a


Gyorsbillentyűt az accesskey tulajdonsággal rendelhetünk az objektumhoz.

670

létrehozza az onclick eseményt is

668

671


Harmadik

Negyedik

...

672

1. Váltás a tabulátor billentyűvel 2. Gyorsbillentyűk definiálása

■ Opera esetén: Shift+Esc-vel billentyűmódba váltunk, majd Gyorsbillentyű

x27.html


3. Példa

674

x27.html


675

 Beviteli mező:

x27.html


676

 További mező:

x27.css


677

x27.html


678

x27.html


681


684

A CSS-ben: ... .key { color:#00f; font-weight: bold; text-decoration: underline; }

...
...

x27.html


679

x27.html


680

x27.html


682

x27.html


683

F. Táblázatok G. Űrlapok H. Billentyűzettel történő vezérlés megvalósítása I. Keretek


685

Az oldalt n részre osztjuk, ehhez n+1 XHTML fájlt kell létrehozni: ■ az n oldal tartalmát ■ az őket tartalmazó oldal struktúráját leíró fájlt. A beágyazott oldalak önmagukban is lehetnek keretek, tehát a hierarchia több szintű is lehet.


688


686

Keretrendszer 2. Keretek

( a helyett)

3. Hivatkozások

4. Példák keretekre

cols: oszlopok száma és méretei (pixel vagy %), vesszővel elválasztva

5. Belső (lebegő) keretek


1. A beágyazó oldal

border: szegély mérete,

3. Hivatkozások

689

rajzolásának engedélyezése, □ van, ha értéke YES vagy 1


691

src: a keretbe betöltendő dokumentum URL-je noresize = "noresize": a keret nem lesz átméretezhető a honlapon scrolling: gördíthető-e: □ yes, no, auto: akkor van ScrollBar, ha szükséges


690

frameborder: szegély

□ nincs, ha értéke 0 name: a keret neve




2. Keretek

bordercolor: a szegély színe

687


rows: sorok száma és méretei (pixel vagy %) vesszővel elválasztva □ nincs szegély, ha értéke 0.


692

<noframes> Olyan tartalom, ami kereteket nem támogató böngésző esetében fog megjelenni.


1. A beágyazó oldal 2. Keretek 3. Hivatkozások 4. Példák keretekre 5. Belső (lebegő) keretek

693


694

szöveg : (Anchor) a szöveg link lesz Tulajdonságok: href: hova mutasson a link (URL) target: melyik keretben nyíljon meg a hivatkozott oldal (a keretnél megadott name értéke)

keret2.html


697


695

target speciális értékei:


”_blank”: új ablakban vagy lapon

2. Keretek

”_top”: az eredeti ablakban, felülírva az összes keretet ”_self”: az aktuális dokumentumot

keret2.html


700


4. Példák keretekre 5. Belső (lebegő) keretek

tartalmazó keretben

698


696

3. Hivatkozások

keret2.html


701

keret2.html


699

Keretek-2 <meta http-equiv="Content-Type" content="text/html;charset=ISO8859-2" />


702

keret2.html


703

<noframes>

keret2.css


704

705


708

body { margin: 0;

Ezt írja ki, ha nem ismeri a kereteket.

background-color: #0f0; color: #fff;} frameset {

border: 10px double #ff0;

background-color: #f00;

}


706

fekete.html


707

<meta ... />
"http://www.w3.org/TR/xhtml1/DTD /xhtml1-strict.dtd">


709

fekete.css


body {

fekete.html

fekete.html


710

type="text/css" href="fekete.css" /> Fekete

zold.html


711

Első keret tartalma: 1

margin: 0;

...


background-color: #000;

Zöld

color: #fff; }

...

p{

font-size: xx-large; }

Második keret tartalma.


zold.css

712

keret1.html


713

body { background-color: #0f0; color: #fff; } p{ font-size: xx-large; }

715

Keretek -1 <meta ... />


keret1.html


716

keret1.html


717

piros.css


720

keret1.html

718

piros.html


719

... ...

<noframes>

margin: 0;

Piros

color: #fff; }

Ezt írja ki, ha nem ismeri a kereteket.

714

font-weight: bold;



margin: 0;

keret1.html

keret1.html

body { background-color: #f00; p{

Itt is van valami szöveg.

font-size: xx-large; }

kek.html


721

kek.html


724


kek.html

722

...

Linkek:

type="text/css"

href="kek.css" />

Alap link

Kek

c link

kek.html

723


kek.html


725


kek.html

726

_blank link

_top link

kek.html


727

kek.html


728


kek.html

_self link
_blank = új ablakban

_top = ugyanabban az ablakban mindent felülírva

729

kek.html


730



731

733

ul {


734

2. Keretek

} li{

3. Hivatkozások margin: 3px 0 3px 0; font-size: x-large;

732


735


Tulajdonságok: src, width, height, hspace, vspace, align


}

736

■ Nem az egész böngészőablak területét osztjuk fel, a keret csak egy téglalap alakú részt fog elfoglalni az oldalból. ■ HTML Transtional doctype-ot kell használnunk.


<iframe> inline frame: lebegőkeret, más HTML dokumentum beillesztéséhez; lebegőkereteket nem ismerő böngészők ezt írják ki


list-style-type: none; list-style-position: outside;


keret1.html

body { margin: 0; background-color: #00f; color: #fff; } p { font-size: xx-large; } a:link{color:#fff; } a:visited{ color:#000; } a:hover{color:#ff0; } a:active{ color:#fff; }

_self = ugyanabban a keretben

kek.css

kek.css


737

■ A sima frame-eket általában arra használják, hogy logikailag kisebb egységekre osszák velük az oldalt,

■ az IFrame-eket arra használják, hogy más weboldalakról beollózzanak tartalmakat (pl. hirdetéseket) az aktuális weboldalba.


738

Az IFrame méretét a beágyazó oldalban kell meghatározni, így az már megjelenhet, amíg az IFrame még letöltés alatt van. Target vagy JavaScript segítségével a beágyazott dokumentumot le lehet cserélni anélkül, hogy az anyaoldalt újra kellene tölteni.

iframe.html


739

...
A beágyazott keret előtti bármilyen tartalom.

iframe.html


742

iframe.html


740

<iframe src= "http://www.inf.u-szeged.hu/" width="80%" height="300" title="Az Informatikai Tanszékcsoport beágyazott honlapja">

iframe.html


741

Ez a tartalom jelenik meg akkor, ha a böngésző nem támogatja a belső kereteket.

A beágyazott keret utáni bármilyen tartalom.

Copyright © 2024 ADOC.PUB. All rights reserved.
About Us | Privacy Policy | Terms of Service | Copyright | Contact Us | Cookie Policy

Sign In

Email

Password

Remember me Forgot password?

Our partners will collect data and use cookies for ad personalization and measurement. Learn how we and our ad partner Google, collect and use data. Agree & close

XHTML és CSS Holló Csaba 11. A HTML dokumentum

Recommend Documents

Ez a főcím

Fõcím: #focim > h1

h2

h2.fejezet

h3 fejezet: a .fejezet > h3

#cimecske > .fejezet > h4,

tartalom h3

tartalom h2

tartalom h2 fejezet

tartalom h3 fejezet

Fõcím: h1

Cím: h2

Reményik Sándor: ■ eredetileg képekre alkalmazták, annak érdekében, hogy a szöveg körülfolyhassa a képet, de CSSben bármilyen elem úsztatható Mondom néktek: mi mindíg Mi mindíg búcsuzunk

■ értékei tetszőlegesek lehetnek x8.css 245 ■ az egymás fölött levő elemek közül az látható, amelyiknek nagyobb a z-indexe XHTML és CSS © Holló Csaba XHTML és CSS © Holló Csaba ... ■ a weblap harmadik dimenziója (az x és y tengely után) x8.html x8.html }

Linkek:

Reményik Sándor:

■ eredetileg képekre alkalmazták, annak érdekében, hogy a szöveg körülfolyhassa a képet, de CSSben bármilyen elem úsztatható

Mondom néktek: mi mindíg

Mi mindíg búcsuzunk

■ értékei tetszőlegesek lehetnek

x8.css

245

■ az egymás fölött levő elemek közül az látható, amelyiknek nagyobb a z-indexe

XHTML és CSS © Holló Csaba

XHTML és CSS © Holló Csaba

...

■ a weblap harmadik dimenziója (az x és y tengely után)

x8.html

x8.html

}