1

Web programozs jegyzet

0.1 verzi

Pl Lszl

2

HTML alapok 1. A HTML nyelvtana A HTML jellnyelvben a megjelentend tartalomba cmkket (angolul tag=cmke) helyeznk el, melyek megszabjk, hogy a bngszk hogyan rtelmezzk a megjellt tartalmi rszeket. A cmkket a jelek kz kell zrnunk. Egy-egy utasts hatst (nhny kivteltl eltekintve) a zr utastsprja sznteti meg (). A HTML utasts a szabvny szerint lehet kisbets s nagybets is, de csupa kisbett clszer hasznlni. A cmknek lehetnek jellemzi ( attribute=jellegzetes tulajdonsg ) s a jellemzknek rtkei ( value=rtk ):

tartalom

2. A HTML oldal szerkezete Minden HTML oldal 3 f rszbl ll:

a) dokumentumtpus meghatrozs b) fej c) trzs

a) A dokumentumtpus meghatrozs:

A HTML kdot az alkalmazand dokumentumtpus (DOCTYPE, vagy DTD) megadsval kezdjk. Ezzel informljuk a bngszprogramot, hogy milyen szabvny szerint ksztettk a dokumentumot, hogy az megfelel mdon tudja megjelenteni. Ha elhagyjuk a dokumentumtpus megadst azzal azt kockztatjuk, hogy az oldal nem jelenik meg megfelelen a bngszben. Cm Trzs

3

Ugyanez HTML 5-ben: Cm Trzs b) A fej (head=fej) az adott HTML-fjlra vonatkoz meta-adatokat tartalmazza. A metaadatok a fjlal kapcsolatos klnfle jellemzk s utastsok trolsra szolglnak. Nhny meta- adatnak sajt cmkje van ( pl. title=cm, link=kapocs, style=stlus ) a tbbiek a meta cmke jellemzjeknt adhatk meg A fej HTML kdolsa:

karakterkszlet megadsa weblap cme kls stluslap csatolsa begyazott stlus

Karakterkszlet megadsa (charset): Ahhoz, hogy a weblapunk a bngszkben karakterhelyesen jelenjenek meg, meg kell adnunk, hogy annak szerkesztsekor milyen karakterkdolst hasznltunk. Az ISO 8859-2 a kzp-kelet eurpai, gy a magyar karakterkszletet is definilja. Unicode a klnbz rsrendszerek egysges kdolst s hasznlatt ler nemzetkzi szabvny.

A weblap cmnek megadsa: A cm tartalmazhat magyar kezetes szavakat. A tartalmat jl kifejez cm segti a keresk helyes tallatt. A cm a bngsz cmsorban, ill. a keresk tallatainak felsorolsban jelenik meg.

4

Kls stluslap csatolsa: Az els weblapom Szp napot! 3. Alap HTML cmkk A HTML elemeket ltalnosan kt nagy kategrira bonthatjuk, amelyek megfelelnek az elem ltal megjelentett tartalom s struktra tpusainak ezek a blokk szint s az inline elemek. A blokk szint (block level) elem egy felsbb szint elemet jelent, amely ltalban a dokumentum struktrjt jelzi. Ezek olyan elemek, amelyek egy j sort kezdenek, vagy elvlasztanak valamit a korbbi tartalomtl. A leggyakoribb blokk szint elemek a bekezdsek (paragrafusok), listaelemek s tblzatok. Az inline (azaz soron belli) elemek ezzel szemben azok az elemek, amelyeket a blokk szint elemek tartalmaznak, s csak a dokumentum kis rszeit fogjk kzre, nem teljes bekezdseket vagy csoportokat. Egy inline elem nem fog j sort generlni a dokumentumban. Ezek azok az elemek, amelyek egy bekezds szvegn bell tallhatak. A leggyakoribb inline elemek a hiperhivatkozsok, a kiemelt szavak vagy mondatok s a rvid idzetek.

a) Bekezds (paragraph) 7

A tag segtsgvel a szveget bekezdsekre oszthatjuk. Az adott bekezds tartalmt a s elemek kz kell tenni. Plda: Ez alaprtelmezett (balra igaztott) bekezds.

Ez pedig egy jabb bekezds A bngszk a bekezdseket is blokkszint elemknt kezelik, azaz kln sorban kezddnek s az utnuk kvetkez elem automatikusan j sorba kerl. Szvegbehzs nincsen, kt

5

bekezds kztt egy res sort hagy a bngsz.

b) Sortrs vagy Amennyiben a szvegen bell egy sortrst szeretnnk elhelyezni, a elemet kell hasznlnunk. Ez is egy olyan tag, amelynek nincs zr prja. Plda:

Ez az els sorEz pedig a msodik

c) Cmsor (heading) 7, stb. A cmsorok (heading) az oldalak logikai felosztst teszik lehetv. Pldul h1 az oldal cme, h2 egy alcm, h3 egy mlyebb szint alcm s gy tovbb. A HTML oldalak esetn 6 cmsort hasznlhatunk. Plda:

1-es cmsor 2-es cmsor 3-as cmsor 4-es cmsor 5-s cmsor 6-os cmsor

Egy cmsor a HTML szerint blokkszint elem, azaz kln sorban kezddik s az utna kvetkez elem automatikusan j sorba kerl. A bngszk alaprtelmezett belltsa szerint flkvr betvel van szedve, a betmret a h1-nl a legnagyobb, majd a szm nvekedsvel ( h2, h3,. ) egyre kisebb. Az ettl eltr megjelentst CSS-el kell ltrehozni.

d) Vzszintes vonal (horizontal line) A dokumentum tovbbi tagolst teszi lehetv. Plda:

Ez az els sorEz pedig a msodik

e) Megjegyzsek a kdban

6

A megjegyzs cmke ltal befoglalt rsz a forrskdban benne marad, de a bngsz nem jelenti meg, nem veszi figyelembe. Plda: Msik alkalmazsa a megjegyzsnek, ha ideiglenesen ki akarunk hagyni rszeket a kdolsbl. A megjegyzs cmkben foglalt rsz gy olyan, mintha ott sem lenne, de nem kell trlni, s brmikor ismt felhasznlhat vagy ismt figyelmen kvl hagyhat, ha a megjegyzst kivesszk a kdolsbl vagy jbl berjuk. 4. Listk hasznlata A HTML nyelv lehetsget ad arra, hogy klnbz listkat (felsorols, sorszmozott, meghatrozs) hozzunk ltre.

a) Egyszer felsorolslista (unordered list) 7 Egyszer felsorols esetn az s tagek kz kell elhelyeznnk a listaelemeket, amelyeket az (list item) cmkk vezetnek. Plda: kenyr kv tej vaj

Eredmny:

kenyr kv tej vaj

Megjegyzs: a CSS-ben lecserlhetjk a pontokat nhny ms beptett tpusra.

b) Sorszmozott lista (ordered list) 7 Sorszmozott lista esetn az s tagek kz kell elhelyeznnk a listaelemeket.

7

Plda: Els Msodik Harmadik Eredmny:

1. Els 2. Msodik 3. Harmadik

A rendezett listkat tbbfle szmozssal s alfabetikus rendszerrel is jellhetjk. Az alaprtelmezett jells a bngszkben a decimlis szmozs, de tovbbi lehetsgek is vannak:

Betk o ASCII kisbetk (a, b, c.) o ASCII nagybetk (A, B, C.). o Klasszikus kis grg betk: (?, , ?.)

Szmok o Decimlis szmok (1, 2, 3.) o Decimlis szmok nullval kiegsztve (01, 02, 03.) o Kisbets rmai szmok (i, ii, iii.) o Nagybets rmai szmok (I, II, III.) o Tradicionlis grz szmozs (an, ban, gan.) o Tradicionlis rmny szmozs (mek, yerku, yerek.)

A lista stlust ebben az esetben is CSS-sel vltoztathatod meg, ha szksges.

Listk egymsba is gyazhatk, pl. az egyes listaelemekbe jabb al-listkat helyezhetnk. Szmozott s szmozatlan listk is egymsba foglalhatk.

Plda:

kenyr

fehr kenyr barna kenyr

tej

8

zsros tej zsrszegny tej

vaj

szott vaj nem szott vaj margarin

c) Meghatrozs (vagy defincis) lista (definition list)

Meghatrozs lista esetn az s tagek kz kell elhelyeznnk a listaelemeket, amelyek a fogalom megadsbl ( tag vezeti be) s a magyarzatbl ( tag vezeti be) llnak.

Egy egyszer defincis lista a kifejezsekkel s a defincikkal gy nz ki:

Kifejezs

A kifejezs defincija Kifejezs

A kifejezs defincija Kifejezs

A kifejezs defincija

Ez a kvetkezkppen jelenik meg:

Kifejezs A kifejezs defincija

Kifejezs A kifejezs defincija

Kifejezs A kifejezs defincija

5. Tblzatok hasznlata 7

9

Hossz idn keresztl a tblzatok a weboldalak formzsnak egyik f eszkzei voltak, de ennek az idnek a CSS elterjedse vget vetett. Tblzatokat a tag segtsgvel lehet ltrehozni. A vzszintes sorokat egyenknt a 7 pros cmke (table row), a cellkban lv adatokat egyenknt a 7 (table data), pros cmke definilja. A tbla celli szveget, kpet, bekezdst, listt, rlapokat, jabb tblzatokat is tartalmazhatnak. Plda: 1. sor, 1. cella 1. sor, 2. cella 2. sor, 1. cella 2. sor, 2. cella Eredmny:

Fontosabb ms tbla elemek:

o - ez az elem jelli a tblzat oszlopainak a fejlct o - ezzel az elemmel adhatsz egy cmet a tblzat adatainak

Plda: Ez egy tblzat 1.Fejlc 2.Fejlc 1. sor, 1. cella 1. sor, 2. cella

10

2. sor, 1. cella 2. sor, 2. cella Eredmny:

Cellk egyestse a colspan s rowspan attribtumok segtsgvel: Nv Telefon Bill Gates 555 77 854 555 77 855

Eredmny:

Nv Bill Gates Telefon 555 77 854

11

555 77 855 Eredmny:

Nagymret tblzatoknl az ttekinthetsget segtik a thead, tbody, tfoot cmkk. Ebben az esetben a tblzat formzsa is knnyebb CSS-ben. Thead tblzatfej Tbody tblzattrzs Tfoot tblzat lblce Plda: Month Savings Sum $180 January $100 February $80

12

6. Hivatkozsok (Linkek) 7 A hiperhivatkozsokkal (rviden link) hozhatunk ltre kapcsolatot a klnbz oldalak (objektumok) kztt. A bngszk a linkeket ltalban alhzssal, illetve eltr sznnel jellik. Oldalon belli hivatkozsokat is ltrehozhatunk, az ott elhelyezett "knyvjelzre". Az (anchor = horgony) cmke paramterei:

o href webcm (URL), itt kell megadnunk a hivatkozs webcmt. o Szintaxis: Szveg, kp

o target A clkeret neve, ahova az oldalt be akarjuk tlteni. o rtkei: _blank, _self, _top, _parent

o name nevet adhatunk a hivatkozsnak, gy egy "knyvjelzt" hozhatunk ltre. o Szintaxis: Szveg o Hivatkozs szintaxisa egy knyvjelzre: Szveg

a) Egy msik webhelyre hivatkozs esetn a kdols:

szveg s/vagy kp

Plda:

A Sapientia honlapja

b) Azonos webhelyen belli msik weblapra hivatkozs esetn:

szveg s/vagy kp Alaprtelmezetten a hivatkozott weboldal tetejre trtnik az ugrs.

c) Ha az oldalon bellre, egy kivlasztott rszhez kvnunk ugrani, akkor a kivlasztott rszhez egy nvvel elltott horgonyt ( name jellemzvel elltott a cmkt ) kell kdolni:

Szveg

Ugrs az oldal elejre 7. Kpek beillesztse a weboldalra llkpet az tag segtsgvel helyezhetnk el az oldalon. Hasznlhat kpformtumok: GIF, JPG, PNG. A kp inline elem (elhelyezkedse folyamatosan, az eltte lv elemet kveten trtnik, ill. a kvetkez elem folytatlagosan kveti), alaprtelmezetten

13

nincsen kerete. Ha HTML-ben nllan kvnjuk pozcionlni, akkor vagy j paragrafus elembe, vagy egyb trol elembe kell helyezni.

Az tag fontosabb paramterei: o src - itt adhatjuk meg a kp webcmt (ktelez jellemz) o alt - kpet helyettest szveges informci. Csak akkor ltszdik, ha a kp nem

jelenik meg ( nem tltdik le, nem rhet el, stb. ), o width - a kp szlessge kppontokban o height - a kp magassga kppontokban.

Pldk: Ez a kp a Sapientia logoja. Ez a kp a Sapientia logoja. Ez a kp a Sapientia logoja. 8. Logikai (Tartalmi) formzs A HTML cmkk egy csoportja, melyeknek korbban a formzsban volt szerepe, a CSS alkalmazsa ta olyan mdon hasznlatos, hogy br a megjelentsre is hatnak, tartalmi okok miatt hasznljk ket, s a vgs formzst tovbbra is CSS-el lehet ellltani.

a) Rvid idzet: 7 A vilg egyik legismertebb idzete a Hamlet-bl a Lenni, vagy nem lenni, ez itt a krds.

b) Hosszabb idzet: 7 A bngszk idzjel nlkl, mindkt oldali behzssal, eltte s utna trkzzel, blokkszint elemknt jelentik meg a idzetblokkot. Ez egy hossz idzet. Ez egy hossz idzet . Ez egy hossz idzet Ez egy hossz idzet . Ez egy hossz idzet . Ez egy hossz idzet . Ez egy hossz idzet . Ez egy hossz idzet . Ez egy hossz idzet . Ez egy hossz idzet . Ez egy hossz idzet . Ez egy hossz idzet . Ez egy hossz idzet

c) Dltbets megjelents: 7 Ez egy dlt bets szveg

d) Cmhivatkozs: 7

14

Nem szerzre, hanem mre - knyvre, jsgra, versre, dalra, szndarabra, msik forrsra - lehet gy hivatkozni. A vilg egyik legismertebb idzete a Hamlet-bl a Lenni, vagy nem lenni, ez itt a krds.

e) Kulcssz kiemels: 7 A bngszk alaprtelmezetten flkvr bett hasznlnak ebben az esetben. A digitlis videokamerk egyre nvekv hnyadban a Full HD felbontst alkalmazzk.

f) Tartalmi kiemels, kihangslyozs: 7 ( strong= ers kiemels ) s 7 ( emphasis=hangsly)

A bngszk a strong esetben flkvr betkkel, az em esetn dltbetvel jelentik meg a jellt szavakat. A medencbe ugrlni veszlyes s szigoran tilos!

g) Elre formzott szveg: 7 A kzjk zrt szveg pontosan annyi szkzzel, pontosan annyi sorban s olyan llapotban fog a dokumentumban megjelenni, mint ahogy azt a HTML fjl tartalmazza.

Este van, este van ki-ki nygalomba! Feketn blintgat az eperfa lombja, zg az ji bogr, nekimegy a falnak, nagyot koppan akkor, azutn elhallgat. rta: Arany Jnos 9. Klnleges karakterek (karakter entitsok) A HTML dokumentum tartalmnak kialaktsa sorn a foglalt karakterek ill. a billentyzetrl nem, vagy nehezen elrhet klnleges karakterek esetben un. karakter entitsokat (character entity) kell alkalmazni, ami az adott karakter/szimblum/jel kdolt megadst

15

jelenti. Ilyen foglalt karakterek pldul azok amellyel tagolunk egy weboldalt. Ilyen a kisebb mint jel: , idzjel, & s de elfordulhatnak ms karakterek is amit valamirt szeretnnk klnleges karakterknt megadni. Billentyzetrl nem (vagy nehezen) bevihet klnleges karakterek: grg betk, pnznemek (euro, yen, font, cent) matematikai szimblumok (mnusz, vgtelen, gyk, hatvnykitev, sszesen, kzel egyenl, azonos), stb. A klnleges karaktereket a & karakter vezeti be, s ; karakter zrja. A klnleges karaktereknek van egy kdjuk, ami egy szm. A legtbbnek azonban neve is van. A & s a ; karakterek kzz ezt a kdot vagy nevet kell rnunk. karakter entits szm entits nv angol megnevezs < < < ( less-than ) > > > ( greater-than ) " " ( quotation mark ) & ' & ( ampersand ) ( copyright ) ( registered trademark ) ( trademark ) ( degree ) ( euro ) ( cent )

( non-breaking space ) Megjegyzs: a nem trhet szkznek (non-breaking space) nincsen megjelensi formja - az a funkcija, hogy tbb szbl ll kifejezs/informci esetn a szavak kz helyezve megakadlyozza azt, hogy a sor vgn a bngsz a kifejezs/informci kzben trhesse meg a sort, hanem egy sorban, sortrs nlkl tartja egyben azt Plda: A bekezdst

s

tagek kz kell rni.

16

Stluslapok hasznlata (CSS- Cascading Style Sheets)

1. Bevezet

A CSS az angol Cascading Style Sheets kifejezs rvidtse, jelentse rangsorolt stluslapok. A stluslapot egy szveges fjlban kell megrni, amit .css kiterjesztssel kell elmenteni. A stluslap nem ms, mint kijellk (selector) s meghatrozsblokkok (declaration) felsorolsa. A meghatrozs kt rszbl ll: tulajdonsgbl (property) s rtkbl (value). kijell { tulajdonsg1: rtk1; tulajdonsg2: rtk2; tulajdonsg3: rtk3; ... } A kijell egy cmkt jell ki a HTML dokumentumban, s erre a kijellt cmkre vonatkozik a formzs. Plda: h1 { color: red; } a) Mrtkegysgek Mretek megadsakor szmos mrtkegysg ll rendelkezsnkre, beszlhetnk abszolt s relatv rtkekrl. A mrtkegysget mindig kzvetlenl a szm utn kell rnunk, minden elvlaszt nlkl. Ha nem egsz szmot szeretnnk hasznlni, akkor tizedespontot kell hasznlnunk.

a.1. Relatv mrtkegysgek: px, em, ex s a szzalk px: A pixelben, azaz kppontban megadott rtkek a megjelent egysgtl fggenek, ltalban egy konkrt kppont mrett jellik em: Ez a mrtkegysg az adott elemnl (vagy szl elemnl) felhasznlt bettpus betmrethez viszonytott rtket jelenti. Amennyiben a dokumentumhierarchia legfels elemnek betmrete is ebben a mrtkegysgben van megadva, gy a legfels elem betmrete az alaprtelmezett font-size kiindulsi rtke. Alaprtelmezett esetben, ha a dokumentum gykerben

17

hasznljuk ezt a mretet, 16 pixelt szokott jelenteni (bngsz belltsoktl fggen). Egy lehetsges rtk pldul az 1.2em. ex: Az ex szintn egy relatv rtket jell, s hasonlt az em-hez, azzal a kivtellel, hogy ez nem az adott betkszlet magassghoz viszonytott mretet, hanem a betkszlet kis x bet magassgt jelli (br azoknl a betkszleteknl is definilva van, ahol nem ltezik x bet). ltalban a bngszk az rtkt egyszeren az em felnek veszik, gy alapesetben ltalban 8 pixelnyi mretet jell. Szzalk: Mindig relatv rtket kpeznek valamely ms rtkhez viszonytva, a krds csak az, hogy ppen milyen rtket vesznek alapul. Ez ltalban a leglogikusabb rtk, de hogy egyrtelm legyen, minden tulajdonsgnl, ahol hasznlhatunk szzalkos megadst, definilva van, hogy mihez kpest rtend. Egy lehetsges rtke az 50%.

a.2. Abszolt mrtkegysgek

Az abszolt mrtkegysgek neve onnan ered, hogy elvileg minden esetben a szemll szmra ugyanakkora mretet jelentenek. Az mm a millimter rvidtse, egy plda a hasznlatra: 10mm. Az in az inch (=col, =hvelyk) mretet jelli, azaz 25.4 millimtert. Egy lehetsges megadsa: 2in. A cm a centimtert takarja, mely mint kztudott, 10 mm-ert takar. A megadsa nem tr el a korbbiaktl: 1cm. Most jnnek az rdekesebb mrtkegysgek, ezek kzl az egyik a pt, mely a "pont" rvidtse. A pont tipogrfiai mrtkegysg, egy pont 1/72 hvelyket jell. Gyakran keverik ssze a pixellel, pedig nem sok kzk van egymshoz. Egy plda a hasznlatra: 16pt.

b) Sznek hasznlata

Tbb helyen is megadhatunk szneket tulajdonsgknt (httrszn, szveg szne, stb.). Alapveten ktflekppen: vagy a szn nevvel, vagy pedig a 3 komponensvel RGB (vrs, zld, kk) formban.

A hasznlhat 16 kulcssz (a Windows VGA 16 sznei kzl): aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, s yellow.

Az RGB megads ngyflekppen is trtnhet, ebbl az els kt lehetsg hexadecimlis, mg a tovbbiak decimlis s szzalkos mdok.

18

Az #rrggbb megadsnl az rr, gg s bb rtkek hexadecimlisan, 00 s FF kztt adjk meg az adott szn erssgt. A 00 a legsttebb, a FF pedig a legvilgosabb. A hexadecimlis szmoknl a 9 feletti rtkeket jelkpez betket mind kisbetvel, mind nagybetvel megadhatjuk. Pr plda:

fekete: #000000 piros: #FF0000 zld: #00FF00 kk: #0000FF fehr: #FFFFFF

Az #rgb megadsnl az elzhz hasonlan, de csak egy szmjegyes hexadecimlis szmokkal adhatjuk meg a sznt. Az #123 megfelel az #112233 sznnek. Az elz pldk ezzel a megadsi mddal:

fekete: #000 piros: #F00 zld: #0F0 kk: #00F fehr: #FFF

Az els megadshoz hasonlan, de decimlis szmokkal is meghatrozhatjuk a komponensek rtkeit, szintn 0 s 255 kztti rtkekkel. Ekkor az rgb(r,g,b) formtumot hasznlhatjuk. Maradva a pldknl:

fekete: rgb(0,0,0) piros: rgb(255,0,0) zld: rgb(0,255,0) kk: rgb(0,0,255) fehr: rgb(255,255,255)

Amennyiben szzalkosan ismerjk a szn komponenseit, erre is lehetsgnk van. Ekkor a 0% ppen nullt, a 100% pedig 255-t jelent. A szzalk jelet kzvetlenl a szm utn kell rni. A hasznland formtum az elzhz hasonl: rgb(r%,g%,b%). Maradva a pldknl:

fekete: rgb(0%,0%,0%) piros: rgb(100%,0%,0%) zld: rgb(0%,100%,0%) kk: rgb(0%,0%,100%) fehr: rgb(100%,100%,100%)

2. Stluslap begyazsa HTML dokumentumba

19

Ahhoz hogy egy stluslap hatssal legyen egy HTML dokumentumra, ssze kell ktni ket. Ezt gy tehetjk meg, hogy a fejrszbe (...) berjuk a kvetkez sort:

3. Kijellk (szelektorok) hasznlata

a) Elem kijellk (Type selector) A sszes HTML elemet ki lehet vlasztani szelektorokkal. A weblap sszes azonos elemre vonatkoznak. Ebben az esetben csak annyi a dolgunk, hogy a kivlasztani kvnt elem nevt hasznljuk szelektornak. Plda:

h1{ color: red; } b{ color: #f8f8f8; } Ez egy piros szn cm Ez egy vilgos szrke szn, flkvr szveg b) Csoport kijells (Group of selectors)

Tbb elemhez ugyanazt a stlust rendeli. A kijellt elemek vesszvel s res betkzzel elvlasztva sorolandk fel Plda: h1, h2 { meghatrozs(ok) } kdols a legnagyobb s msodik legnagyobb cmhez rendel azonos megjelentst. c) Azonost kijellk (ID selector)

20

Az id attribtum arra val, hogy egyrtelmen azonostson egy cmkt, ezrt kt id ugyanolyan rtkkel nem fordulhat el egy oldalon bell. Ilyenkor egyedi, "szemlyreszabott" tulajdonsgokkal lthatjuk el az elemeket. HTML attribtuma az id, CSS szelektora pedig a # (kettskereszt) jel. gy kell megadni a HTML kdban: Piros szn cmsor Kk szn cmsor A stluslapban pedig gy tudunk bizonyos nev id-ra stlust alkalmazni: #piros { color: red; } #kek { color: blue; } d) Szrmaztatott kijellk (descendant selector) Nha krnyezetfgg kijellknek is fordtjk ket egy id jellemzvel definilt szakaszon belli elem-kijellst vgeznek. Ha a HTML oldal pldul kt szakaszbl ll, s az egyes szakaszokban lv bekezdsekhez szakaszonknt eltr megjelentst terveznk, akkor a HTML oldal kdolsa: .. .. .. ..

CSS-ben az egyes szakaszok bekezdseihez a megjelentsek kdolsa: #szak1 p { meghatrozs(ok) } #szak2 p { ms meghatrozs(ok) }

Az azonost kijellt teht egy elemkijell kvet, kztk egy res betkz van e) Osztly kijellk (Class selector)

21

Lehetsgnk van tbb elemnek egyszerre megadni tulajdonsgokat ezzel a mdszerrel. Itt meg kell adni a HTML-ben minden egyes ltalunk egyformn formzni kvnt elemnek a class attribtumot. Plda: h1.szin{ color: red; } Nem csak azonos, hanem klnbz cmkkhez ( pl. h1, p, blockquote, stb. ) is rendelhetk kzs osztlyok: .szin{ color: #f8f8f8; } Szrke szn cmsor Szrke szn kiemelt szveg Szrke szn bekezds A weboldal egy rsze stlusnak kijellshez a kijellk, azonostk s osztlyok kombincija is hasznlhat. Pl.: az albbi CSS kdols #header p.stilus1 { meghatrozs(ok) } csak a weblap fejlc szakaszban lv bekezdsek kzl a stilus1 osztlyba tartozkhoz rendeli a meghatrozs(ok)ban definilt megjelentst. f) l-osztly ( ltszlagos osztly, pseudo-osztly ) kijellk ( pseudo-class/element ) A hivatkozsokra s az els sorra/els betre vonatkoznak. Az llapotok kijellsei ( a sorrend kttt, az albbiak szerinti ): a:link { meghatrozs(ok) } ( link=kapocs, hivatkozs - itt: mg nem ltogatott ) a:visited { meghatrozs(ok) } ( visited=felkeresve, ltogatva ) a:hover { meghatrozs(ok) } ( hover=lebeg itt: a kurzor felette van ) Termszetesen szrmaztatott kijellssel az l-osztly kijellse pontosthat/szkthet, pl.: #nav a:link, #nav a:visited, stb. A hivatkozsok azrt l-osztlyok, mert llapotuk nem a HTML kdtl, hanem a weboldal ltogatjnak tevkenysgtl fgg, s egyidejleg kt llapotban is lehetnek ( pl. mr egyszer rkattintottak, majd ksbb jbl fel llnak a kurzorral ).

22

Blokkszint elemek els soraira s/vagy els betire definilhat kln stlus. Pl. ha minden bekezds els sort jelljk ki:

p:first-letter { meghatrozs(ok) }

Minden bekezds els betje esetn ( inicil kialaktsa ! ):

p:first-line { meghatrozs(ok) }

4. Weboldal htternek belltsa

Tulajdonsg Lers Lehetsges rtkek background-color Egy elem httrsznt adja

meg color-rgb color-hex color-name transparent

background-image Httrkpet llt be. url(URL) none

background-repeat Belltja, hogy a httrkp vzszintesen, fgglegesen, mindkt mdon, vagy sehogy se ismtldjn.

repeat repeat-x repeat-y no-repeat

background-attachment Belltja, hogy a httrkp fixen maradjon-e az oldal grgetsekor, vagy sem.

scroll fixed

background Rvidt tulajdonsg az sszes eddigi tulajdonsg egyidej megadshoz.

background-color background-image background-repeat background-attachment background-position

Plda: body { background-color: #4AF24F; } h1 { background-color: #F55C54; } h2 { background-color: maroon;

23

}

5. Szveg formzsa Tulajdonsg Lers Lehetsges rtkek color Szveg sznnek megadsa. color-rgb

color-hex color-name

text-align Szvegigazts: bal, jobb, kzp, sorkizrt.

left right center justify

text-decoration Alhzst, fellhzst, thzst, vagy villogst llt be a szvegre.

none underline overline line-through blink

text-indent Bekezds els sornak beljebb kezdse.

length %

line-height Sorkzk megadsra szolgl. normal number length %

font-family A hasznland betcsaldrl ad prioritsos listt: Ha az els megadott font nem tallhat, akkor prblkozik a msodikkal s gy tovbb.

Betcsald neve, pl: Arial, "Times New Roman", Verdana; Vagy: ltalnos tpus: serif sans-serif cursive fantasy monospace

font-style Dlt bets szveg megjelentst teszi lehetv.

normal italic oblique

font-size Szveg mrett lehet megadni. xx-small x-small small medium large x-large xx-large pt px smaller

24

larger % em

font-style Dlt bets szveg megjelentst teszi lehetv.

normal italic oblique

Megjegyzs: A font-size tulajdonsg rtkhez csak ezeket az rtkeket ajnlott megadni: %, em, smaller, larger. Ugyanis ezek az rtkek a szl elem betmrethez kpest relatvan adjk meg a betmretet. Pldk: 1.Plda: body { font-size: 200%; } p.xxsmall { font-size: xx-small; } Norml mret (rkli a body elem mrett) XX-small betmret(abszolut mret, nincs rkls) 2.Plda: .smaller { font-size: smaller; } .larger { font-size: larger; } .em {

font-size: 2em; } Alaprtelmezett nagysg h1-es cmsor Alaprtelmezett nagysg betmret.

smaller h1

25

larger h1 smaller p Gyakran van szksgnk arra, hogy csak bizonyos szavak, szvegrszeket emeljnk ki, sznezznk t stb. Az ilyen formzand szvegrszek kijellsre kell hasznlni a span tagot. Ehhez a cmkhez mindig adjuk meg a class rtket, hiszen gy fogjuk tudni ksbb elrni a stluslapbl. Plda: span.voros {

color: red; }

A szn egy rzet, amely az agy reakcija a fnyre

6. Linkek dsztse stluslappal

A linkek esetn, a klnbz llapotokra klnbz stlusokat alkalmazhatunk. A link ngy llapota:

o :link - A mg meg nem ltogatott linkek o :visited - A mr megltogatott link o :hover - Azt a linket vlasztja ki, amelyik felett ppen ll az egr o :active - Azt linket vlasztja ki, amelyiken llva az egrrel a felhasznl lenyomta az

egrgombot, de mg nem engedte fel. Nem ktelez mind a ngy llapotra kln stlust megadni. Azonban ha megadjuk ket, akkor pontosan a fenti pldban lthat sorrendben alkalmazzuk ket. Plda: a:link {

text-decoration: none; } a:visited {

text-decoration: line-through; } a:hover {

26

color: orange; } a:active {

color: lime; }

7. Listk formzsa stluslappal

Tulajdonsg Lers Lehetsges rtkek list-style-type A listaelemek eltti kis jel

megadsra szolgl. disc circle square none decimal lower-alpha upper-alpha lower-roman upper-roman

list-style-image Kp belltsa a listaelemek jelzsre.

none url

list-style-position A listaelmek eltti kis jel vagy kp helyzetnek megadsra szolgl.

outside inside

Plda: ul.square { list-style-type: square; } HTML 3.2 HTML 4 XHTML

8. Tblzatok formzsa stluslappal

27

Nv Cm Szak Kiss Peter Cskszereda Kzgazdasgtan Rongy Elek Sepsiszentgyrgy Romn-Angol Nagy Manyi Sepsiszentgyrgy KGI Rongy Elek Sepsiszentgyrgy Romn-Angol Kiss Peter Cskszereda Kzgazdasgtan

a) Rcsvonalak hozzadsa a tblzathoz td, th { border: 1px solid black; }

b) Ketts szegly megszntetse table { border-collapse: collapse; }

c) Bels marg megadsa a cellkhoz

28

table { border-collapse: collapse; }

d) Tblzat kzpre igaztsa s szlessgnek megadsa table { border-collapse: collapse; margin-left: auto; margin-right: auto;

width: 70%; }

e) Cellkban lv szvegek igaztsa tr.fejlec { text-align: left; vertical-align: top; height: 45px; }

f) Fejlc httrsznnek a megadsa tr.fejlec th{ background-color: #FC3; }

9. A div s span elemek

a) A .... cmkk (division=szakasz) egy ltalnos trolelemet alkotnak ( ltalban a weblap egy logikai sszetartoz rszt jellik ki ), a kzttk elhelyezked tetszleges tartalomra (szveg, lista, tblzat, kp, hivatkozsok, stb.) hivatkozni lehet, ill. formzst lehet hozzrendelni. Az egyes trolelemek az id jellemzjk (identifier=azonost) tulajdonsgval (clszeren a szakaszra jellemz nvvel) azonosthatk. Az id-k rtkeinek egyedieknek kell lennik, azaz mindegyik csak egyszer szerepelhet egy weblapon, klnben nem lesz egyrtelm az azonostsuk. A HTML kdba a szakaszkijellseket berva a HTML tartalom s alaprtelmezett megjelentse nmagban nem vltozik meg, a CSS-ben hozzjuk rendelt formzsi tulajdonsgokkal egytt azonban nagyon fontos szerepk van a weblap megjelentsnek kialaktsban.

29

Plda:

Ez egy div elem.

#large{ color: #00FF00; font-family: arial; font-size: 4pt; }

b) A ..... cmkvel soron bell jellhet ki olyan tartalom, ami

kln formzhat. A span cmkt a div-hez hasonlan egyedi azonostval kell elltni. Plda:

A span nem bloksznt elem.

#largefont{ color: #00FF00; font-family: arial; font-size: 4pt; }

10. A dobozmodell A CSS stluslapnyelv egy HTML dokumentum megjelentsekor az egyes elemekhez lthatatlan dobozokat rendel, melyek magukban foglalhatnak karaktereket, szavakat, sorokat, bekezdseket, listkat, tblzatokat, kpeket, stb. Minden doboznak lehetnek kln formzsi tulajdonsgai, mint pl. mret, eltrszn, bettpus, szegly, httr, stb. A dobozok hierarchikusan egymsba is gyazdhatnak, pl. egy sz doboza egy lista egy sornak vagy egy tblzat egy celljnak a dobozba, az a lista vagy tblzat dobozba, majd az a weboldal egy szakasznak a dobozba, stb. A dobozok lehetnek blokkszint ( block-level box ) dobozok ( pl. bekezds, lista, tblzat, blokkidzet, div szakaszok, stb. ), sor-( inline box ) dobozok ( pl. egy szveg egy sora ), s soron belli ( inline-level box ) dobozok ( pl. karakterek, szavak, kpek egy soron bell ). Minden doboznak van egy 'magja', az t krlvev 'kitltssel' (padding), szegllyel (border) s margval (margin). A marg, a szegly s a kitlts mrete egyenknt meghatrozhat a margin, a border s a padding tulajdonsgok rtkeinek belltsval. A kitltterlet httrszne megegyezik az elemvel, amelyet a background tulajdonsg hatroz meg. A szegly szne s stlusa szintn a border tulajdonsg belltsval hatrozhat meg, mg a marg mindig tltsz, gy a szl elem llandan lthat marad.

30

A doboz szlessge az elem, a kitlts, a szegly s a marg terletnek sszege.

11. Kitlts, szegly s a marg belltsa a) Kitlts (bels marg) belltsa

A bels marg (padding) a tartalom s a szegly kzti res rszt hatrozza meg. Megadsnak mdja a padding-top, ( fels bels marg ), padding-right ( jobboldali bels marg ), padding-bottom (als bels marg), padding-left (baloldali bels marg) tulajdonsgokkal trtnik. Alaprtelmezett rtkk 0 (mind abszolt, mind relatv rtkben) s egyiknek sem lehet negatv az rtke. A fenti rtkek sszevontan is megadhatk a padding tulajdonsggal, a felsorolt rtkek ktelez sorrendje az ramutat jrsval megegyezik s fellrl indul. Ha a bal rtket kihagyjuk, az megegyezik a jobbal, ha az als rtket hagyjuk ki, az megegyezik a felsvel. Ha mindegyik rtk megegyezik, egyetlen rvid alak padding tulajdonsg hasznlhat. Az albbi kt megadsi md ekvivalens: h1 { padding: 0.5em; }

h1 { padding-top: 0.5em;

padding-right: 0.5em; padding-bottom: 0.5em; padding-left: 0.5em;

}

31

sszevont megadsi md: h1{ padding: 10px 11px 12px 13px;// fels, jobb, als, bal }

b) Szegly megadsa

A szeglyek (border) a margn bell helyezkednek el. Szmos ltszlagos tulajdonsguk van: szlessg, stlus, szn. Szlessg:

Tulajdonsg Lers Lehetsges rtkek border-width border-top-width border-right-width border-bottom-width border-left-width

Keret vastagsgnak megadsa.

thin medium thick length

Stlus:

Tulajdonsg Lers Lehetsges rtkek border-style border-top-style border-right-style border-bottom-style border-left-style

Keret stlusnak megadsa. Ha nem lltjuk be, nem fog ltszani a keret!

none hidden dotted dashed solid double groove ridge inset outset

Szn:

Tulajdonsg Lers Lehetsges rtkek border-color border-top-color border-right-color border-bottom-color border-left-color

Keret sznnek megadsa. color-rgb color-hex color-name

A szeglytulajdonsgoknl lehetsgnk van a fent emltett hrom tulajdonsg sszevonsra. Plda:

32

h1 { border-top-style: solid; border-right-style: double; border-bottom-style: dotted; border-left-style: dashed;

}

A szegly stlus, szn s vastagsg a border tulajdonsggal mg tovbb sszevonhat, azonban ez az sszevons (shorthand) csak akkor hasznlhat, ha a ngy szegly stlus-, szn-, s vastagsg rtkei egyenlk. h1 {

border: solid green 15px; }

c) Marg belltsa

Befolysoljk az adott elem tvolsgt annak szomszdos elemeitl. A margknak nincs semmilyen ltszlagos tulajdonsguk, rtkk. Csak mretket hatrozhatjuk meg.

Tulajdonsg Lers Lehetsges rtkek margin-top Fels marg auto (a bngsz

belltsa) length %

margin-right Jobb marg margin-bottom Als marg margin-left Bal marg margin sszefoglal, rvid tulajdonsg.

Nem kell kln-kln megadnunk a marg rszeit, hanem egyszerre maghatrozhatjuk rtkeiket egy s ngy kztt. Az els a fels margt-, a msodik a jobb margt-, a harmadik az alst, a negyedik rtke pedig a bal margt szablyozza.

Alaprtelmezett rtkk szintn 0 (mind abszolt, mind relatv rtkben). Egy lnyeges klnbsg a bels marghoz kpest, hogy a kls margnak negatv rtke is lehet - ekkor a szomszdos befoglal blokk-elemek tfedhetik egymst. Az egyes bngszk alaprtelmezetten ms-ms kezd margkat hasznlhatnak, ezrt a sajt elkpzelsnk bngsztl fggetlen kialaktshoz clszer balra fellre igaztani az elemek elhelyezsnek referencia-pontjt: body, p, table, img, h1, h2, h3, h4, ol, ul {

margin: 0; padding: 0;

}

33

Plda: h1{ margin: 10px 11px 12px 13px; }

A h1 elem fels margja 10px, jobb margja 11px, als 12px, s a fesl margja 13px.

12. Mretezs, pozicionls a) Mretek belltsa

Az albbi tulajdonsgok segtsgvel a klnbz elemek mrett llthatjuk be.

Tulajdonsg Lers Lehetsges rtkek width Egy elem szlessgt adja

meg. auto % px, em

height Egy elem magassgt adja meg.

auto % px, em

max-width Egy elem maximlis szlessgt adja meg.

auto % px, em

min-width Egy elem minimlis szlessgt adja meg.

auto % px, em

max-height Egy elem maximlis magassgt adja meg.

auto % px, em

min-height Egy elem minimlis magassgt adja meg.

auto % px, em

auto: ez az alaprtelmezett rtk - a bngsz maga hatrozza meg egyb tulajdonsgok rtkei alapjn a szlessget illetve a magassgot

abszolt rtkben megads: a tartalom-doboz szlessgt illetve magassgt definilja

relatv rtkben (a befoglal blokk szlessgnek illetve magassgnak szzalkban) megads

Plda: This paragraph is 400pixels wide and 100 pixels high

34

.meret{ width:400px; height:100px; border:1px solid red; padding:5px; margin:10px; }

b) Pozicionls

A bngszk balrl jobbra s fentrl lefel olvassk a dokumentumokat (ez a norml szvegfolyam). Ebbl a norml folyambl a position (helyzet) s float (sztats) tulajdonsgokkal lehet kiemelni egy adott elemet. A position tulajdonsg lehetsges rtkei:

static (statikus) ez az alaprtelmezett rtk, az elem a norml folyamban marad absolute (abszolt vagy fggetlen): az adott elem troltmbjhez kpest van a

helyzete meghatrozva, ami lehet egy msik elem, vagy a kezdeti troltmb (ltalban maga a html elem).

fixed (rgztett): a helyre rgztve marad az elem akkor is, ha a weblapot grgetjk (a felhasznl ltal lthat rszhez/bngszablakhoz rgztett, hasonlan a fixed background image-hez). Az abszolt pozci specilis esete - az elem itt is kikerl a pozcionlsi smbl, de nem a befoglal blokk, hanem a kperny (viewport) a viszonytsi pont. A rgztett pozcij elem nyomtatskor minden oldalon megjelennek.

relative (relatv vagy viszonytott): az elem a norml szvegfolyamban helyezkedik el, s ettl a norml helyzettl toljuk el valamilyen rtkkel (px, em, %) az alaprtelmezett static helyzetbl vzszintes s fggleges irnyba a left, right, top, bottom tulajdonsgokkal. Az eltolt elem eredeti helye resen marad, ms elem nem csszik oda be (az eltols a krnyezetre nincsen hatssal)

Pldk:

#b1{ position:relative; left:50px; background-color: #3399FF; } #b2{ position:absolute; top:50px; background-color: #66CC66; } #b3{

35

background-color: #FFFF33; } #b4{ position: fixed; background-color: #FF99FF; top: 200px; left: 500px; } Elso blokk Msodik blokk Harmadik blokk Negyedik blokk

A krlfolys (float)

A float tulajdonsg segitsgvel klnbz elemeket az oldal bal vagy jobb szlre usztathatunk. Ha egy elem sztatva van, a tartalom tbbi rsze ( szveg ) krbe veszi. A float s a krbefut tartalom kztti hely kihagyst a float margin tulajdonsgval lehet vltoztatni.Tipikus plda, amikor egy kpet krlfolyatunk szveggel, de hasznljuk egy weboldal szerkezeti kialaktsnl is. A float rtkei:

left: az elem balra toldik, a szveg az elem jobb oldaln folyik (fentrl lefel) right: jobbra toldik, a szveg bal oldalt folyik le none: nem trtnik krlfolys

Ha a float tulajdonsg hatst meg akarjuk szntentni akkor hasznljuk a clear: belltst. rtkei:

left: a float left hatst megsznteti right: a float right hatst megsznteni both: minden float tulajdonsg hatst rvnytelenti none: alapbellts, az adott elemre kihatssal lesz a float

The images are contained with... This second paragraph has an...

img.floatLeft { float: left; margin: 4px; }

36

img.floatRight { float: right; margin: 4px; }

13. Lthatsg (Visibility)