1. A HTML nyelvtana A HTML jelölőnyelvben a megjelenítendő tartalomba címkéket (angolul tag=címke) helyezünk el, melyek megszabják, hogy a böngészők hogyan értelmezzék a megjelölt tartalmi részeket. A címkéket a „<” és „>” jelek közé kell zárnunk. Egy-egy utasítás hatását (néhány kivételtől eltekintve) a záró utasításpárja szünteti meg (). A HTML utasítás a szabvány szerint lehet kisbetűs és nagybetűs is, de csupa kisbetűt célszerű használni. A címkének lehetnek jellemzői ( attribute=jellegzetes tulajdonság ) és a jellemzőknek értékei ( value=érték ): tartalom
2. A HTML oldal szerkezete Minden HTML oldal 3 fő részből áll: a) dokumentumtípus meghatározás b) fej c) törzs a) A dokumentumtípus meghatározás: A HTML kódot az alkalmazandó dokumentumtípus (DOCTYPE, vagy DTD) megadásával kezdjük. Ezzel informáljuk a böngészőprogramot, hogy milyen szabvány szerint készítettük a dokumentumot, hogy az megfelelő módon tudja megjeleníteni. Ha elhagyjuk a dokumentumtípus megadást azzal azt kockáztatjuk, hogy az oldal nem jelenik meg megfelelően a böngészőben. Cím Törzs 2
Ugyanez HTML 5-ben: Cím Törzs
b) A fej (head=fej) az adott HTML-fájlra vonatkozó meta-adatokat tartalmazza. A metaadatok a fájlal kapcsolatos különféle jellemzők és utasítások tárolására szolgálnak. Néhány metaadatnak saját címkéje van ( pl. title=cím, link=kapocs, style=stílus ) a többiek a meta címke jellemzőjeként adhatók meg A fej HTML kódolása: karakterkészlet megadása weblap címe külsı stíluslap csatolása beágyazott stílus
Karakterkészlet megadása (charset): Ahhoz, hogy a weblapunk a böngészőkben karakterhelyesen jelenjenek meg, meg kell adnunk, hogy annak szerkesztésekor milyen karakterkódolást használtunk. Az ISO 8859-2 a közép-kelet európai, így a magyar karakterkészletet is definiálja. Unicode a különböző írásrendszerek egységes kódolását és használatát leíró nemzetközi szabvány. <meta http-equiv=”Content-type” Content=”text/html; charset=iso8859-2”> <meta http-equiv=”Content-type” Content=”text/html; charset=UTF-8”> A weblap címének megadása: A cím tartalmazhat magyar ékezetes szavakat. A tartalmat jól kifejező cím segíti a keresők helyes találatát. A cím a böngésző címsorában, ill. a keresők találatainak felsorolásában jelenik meg. 3
Külső stíluslap csatolása:
Az elsı weblapom <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> Szép napot!
3. Alap HTML címkék A HTML elemeket általánosan két nagy kategóriára bonthatjuk, amelyek megfelelnek az elem által megjelenített tartalom és struktúra típusainak — ezek a blokk szintű és az inline elemek. A blokk szintű (block level) elem egy felsőbb szintű elemet jelent, amely általában a dokumentum struktúráját jelzi. Ezek olyan elemek, amelyek egy új sort kezdenek, vagy elválasztanak valamit a korábbi tartalomtól. A leggyakoribb blokk szintű elemek a bekezdések (paragrafusok), listaelemek és táblázatok. Az inline (azaz soron belüli) elemek ezzel szemben azok az elemek, amelyeket a blokk szintű elemek tartalmaznak, és csak a dokumentum kis részeit fogják közre, nem teljes bekezdéseket vagy csoportokat. Egy inline elem nem fog új sort generálni a dokumentumban. Ezek azok az elemek, amelyek egy bekezdés szövegén belül találhatóak. A leggyakoribb inline elemek a hiperhivatkozások, a kiemelt szavak vagy mondatok és a rövid idézetek. a) Bekezdés (paragraph)
7
A
tag segítségével a szöveget bekezdésekre oszthatjuk. Az adott bekezdés tartalmát a
és
elemek közé kell tenni. Példa:
Ez alapértelmezett (balra igazított) bekezdés.
Ez pedig egy újabb bekezdés
A böngészők a bekezdéseket is blokkszintű elemként kezelik, azaz külön sorban kezdődnek és az utánuk következő elem automatikusan új sorba kerül. Szövegbehúzás nincsen, két 4
bekezdés között egy üres sort hagy a böngésző.
b) Sortörés vagy
Amennyiben a szövegen belül egy sortörést szeretnénk elhelyezni, a elemet kell használnunk. Ez is egy olyan tag, amelynek nincs záró párja. Példa: Ez az elsı sor Ez pedig a második
c) Címsor (heading)
7
, stb. A címsorok (heading) az oldalak logikai felosztását teszik lehetővé. Például h1 az oldal címe, h2 egy alcím, h3 egy mélyebb szintű alcím és így tovább. A HTML oldalak esetén 6 címsort használhatunk. Példa:
1-es
2-es
3-as
4-es
5-ös
6-os
címsor címsor címsor címsor címsor címsor
Egy címsor a HTML szerint blokkszintű elem, azaz külön sorban kezdődik és az utána következő elem automatikusan új sorba kerül. A böngészők alapértelmezett beállítása szerint félkövér betűvel van szedve, a betűméret a h1-nél a legnagyobb, majd a szám növekedésével ( h2, h3,. ) egyre kisebb. Az ettől eltérő megjelenítést CSS-el kell létrehozni.
d) Vízszintes vonal (horizontal line) A dokumentum további tagolását teszi lehetővé. Példa: Ez az elsı sorEz pedig a második
e) Megjegyzések a kódban 5
A megjegyzés címke által befoglalt rész a forráskódban benne marad, de a böngésző nem jeleníti meg, nem veszi figyelembe. Példa: Másik alkalmazása a megjegyzésnek, ha ideiglenesen ki akarunk hagyni részeket a kódolásból. A megjegyzés címkében foglalt rész így olyan, mintha ott sem lenne, de nem kell törölni, és bármikor ismét felhasználható vagy ismét figyelmen kívül hagyható, ha a megjegyzést kivesszük a kódolásból vagy újból beírjuk.
4. Listák használata
A HTML nyelv lehetőséget ad arra, hogy különböző listákat (felsorolás, sorszámozott, meghatározás) hozzunk létre. a) Egyszerű felsoroláslista (unordered list)
7
Egyszerű felsorolás esetén az
és
tagek közé kell elhelyeznünk a listaelemeket, amelyeket az
(list item) címkék vezetnek. Példa:
kenyér
kávé
tej
vaj
Eredmény: • • • •
kenyér kávé tej vaj
Megjegyzés: a CSS-ben lecserélhetjük a pontokat néhány más beépített típusra.
b) Sorszámozott lista (ordered list) 7 Sorszámozott lista esetén az és tagek közé kell elhelyeznünk a listaelemeket. 6
Példa:
Elsı
Második
Harmadik
Eredmény: 1. Első 2. Második 3. Harmadik A rendezett listákat többféle számozással és alfabetikus rendszerrel is jelölhetjük. Az alapértelmezett jelölés a böngészőkben a decimális számozás, de további lehetőségek is vannak: •
Betűk ASCII kisbetűk (a, b, c.) ASCII nagybetűk (A, B, C.). Klasszikus kis görög betűk: (?, ß, ?.) Számok o Decimális számok (1, 2, 3.) o Decimális számok nullával kiegészítve (01, 02, 03.) o Kisbetűs római számok (i, ii, iii.) o Nagybetűs római számok (I, II, III.) o Tradicionális grúz számozás (an, ban, gan.) o Tradicionális örmény számozás (mek, yerku, yerek.) o o o
•
A lista stílusát ebben az esetben is CSS-sel változtathatod meg, ha szükséges. Listák egymásba is ágyazhatók, pl. az egyes listaelemekbe újabb al-listákat helyezhetünk. Számozott és számozatlan listák is egymásba foglalhatók. Példa:
kenyér
fehér kenyér
barna kenyér
tej 7
zsíros tej
zsírszegény tej
vaj
sózott vaj
nem sózott vaj
margarin
c) Meghatározás (vagy definíciós) lista (definition list)
Meghatározás lista esetén az
és
tagek közé kell elhelyeznünk a listaelemeket, amelyek a fogalom megadásából (
tag vezeti be) és a magyarázatából (
tag vezeti be) állnak.
Egy egyszerű definíciós lista a kifejezésekkel és a definíciókkal így néz ki:
Kifejezés
A kifejezés definíciója
Kifejezés
A kifejezés definíciója
Kifejezés
A kifejezés definíciója
Ez a következőképpen jelenik meg: Kifejezés A kifejezés definíciója Kifejezés A kifejezés definíciója Kifejezés A kifejezés definíciója
5. Táblázatok használata
7
8
Hosszú időn keresztül a táblázatok a weboldalak formázásának egyik fő eszközei voltak, de ennek az időnek a CSS elterjedése véget vetett. Táblázatokat a
tag segítségével lehet létrehozni. A vízszintes sorokat egyenként a
7
páros címke (table row), a cellákban lévő adatokat egyenként a
7
(table data), páros címke definiálja. A tábla cellái szöveget, képet, bekezdést, listát, űrlapokat, újabb táblázatokat is tartalmazhatnak. Példa:
1. sor, 1.
1. sor, 2.
2. sor, 1.
2. sor, 2.
cella cella
cella cella
Eredmény:
Fontosabb más tábla elemek: o
- ez az elem jelöli a táblázat oszlopainak a fejlécét o
- ezzel az elemmel adhatsz egy címet a táblázat adatainak
Példa:
Ez egy táblázat
1.Fejléc
2.Fejléc
1. sor, 1. cella
1. sor, 2. cella
9
2. sor, 1. cella
2. sor, 2. cella
Eredmény:
Cellák egyesítése a colspan és rowspan attribútumok segítségével:
Név
Telefon
Bill Gates
555 77 854
555 77 855
Eredmény:
Név
Bill Gates
Telefon
555 77 854
10
555 77 855
Eredmény:
Nagyméretű táblázatoknál az áttekinthetőséget segítik a thead, tbody, tfoot címkék. Ebben az esetben a táblázat formázása is könnyebb CSS-ben. Thead – táblázatfej Tbody – táblázattörzs Tfoot – táblázat lábléce Példa:
A hiperhivatkozásokkal (röviden link) hozhatunk létre kapcsolatot a különböző oldalak (objektumok) között. A böngészők a linkeket általában aláhúzással, illetve eltérő színnel jelölik. Oldalon belüli hivatkozásokat is létrehozhatunk, az ott elhelyezett "könyvjelzőre". Az (anchor = horgony) címke paraméterei: o href – webcím (URL), itt kell megadnunk a hivatkozás webcímét. o Szintaxis: Szöveg, kép o target – A célkeret neve, ahova az oldalt be akarjuk tölteni. o Értékei: _blank, _self, _top, _parent o name – nevet adhatunk a hivatkozásnak, így egy "könyvjelzőt" hozhatunk létre. o Szintaxis: Szöveg o Hivatkozás szintaxisa egy könyvjelzőre: Szöveg
b) Azonos webhelyen belüli másik weblapra hivatkozás esetén: szöveg és/vagy kép Alapértelmezetten a hivatkozott weboldal tetejére történik az ugrás. c) Ha az oldalon belülre, egy kiválasztott részhez kívánunk ugrani, akkor a kiválasztott részhez egy névvel ellátott horgonyt ( name jellemzővel ellátott a címkét ) kell kódolni: Szöveg Ugrás az oldal elejére
7. Képek beillesztése a weboldalra
Állóképet az tag segítségével helyezhetünk el az oldalon. Használható képformátumok: GIF, JPG, PNG. A kép inline elem (elhelyezkedése folyamatosan, az előtte lévő elemet követően történik, ill. a következő elem folytatólagosan követi), alapértelmezetten 12
nincsen kerete. Ha HTML-ben önállóan kívánjuk pozícionálni, akkor vagy új paragrafus elembe, vagy egyéb tároló elembe kell helyezni.
Az tag fontosabb paraméterei: o src - itt adhatjuk meg a kép webcímét (kötelező jellemző) o alt - képet helyettesítő szöveges információ. Csak akkor látszódik, ha a kép nem jelenik meg ( nem töltődik le, nem érhető el, stb. ), o width - a kép szélessége képpontokban o height - a kép magassága képpontokban.
Példák:
Ez a kép a Sapientia logoja.
Ez a kép a Sapientia logoja.
Ez a kép a Sapientia logoja.
8. Logikai (Tartalmi) formázás A HTML címkék egy csoportja, melyeknek korábban a formázásban volt szerepe, a CSS alkalmazása óta olyan módon használatos, hogy bár a megjelenítésre is hatnak, tartalmi okok miatt használják őket, és a végső formázást továbbra is CSS-el lehet előállítani. a) Rövid idézet: 7
A világ egyik legismertebb idézete a Hamlet-ból a Lenni, vagy nem lenni, ez itt a kérdés.
b) Hosszabb idézet:
7
A böngészők idézőjel nélkül, mindkét oldali behúzással, előtte és utána térközzel, blokkszintű elemként jelenítik meg a idézetblokkot.
Ez egy hosszú idézet. Ez egy hosszú idézet . Ez egy hosszú idézet Ez egy hosszú idézet . Ez egy hosszú idézet . Ez egy hosszú idézet . Ez egy hosszú idézet . Ez egy hosszú idézet . Ez egy hosszú idézet . Ez egy hosszú idézet . Ez egy hosszú idézet . Ez egy hosszú idézet . Ez egy hosszú idézet
c) Dőltbetűs megjelenítés: 7
Ez egy dılt betős szöveg
d) Címhivatkozás: 7 13
Nem szerzőre, hanem műre - könyvre, újságra, versre, dalra, színdarabra, másik forrásra lehet így hivatkozni.
A világ egyik legismertebb idézete a Hamlet-ból a Lenni, vagy nem lenni, ez itt a kérdés.
e) Kulcsszó kiemelés: 7 A böngészők alapértelmezetten félkövér betűt használnak ebben az esetben.
A digitális videokamerák egyre növekvı hányadban a Full HD felbontást alkalmazzák.
f) Tartalmi kiemelés, kihangsúlyozás: <strong>7 ( strong= erős kiemelés ) és <em>7 ( emphasis=hangsúly) A böngészők a strong esetében félkövér betűkkel, az em esetén dőltbetűvel jelenítik meg a jelölt szavakat.
A medencébe ugrálni veszélyes és <strong>szigorúan tilos!
g) Előre formázott szöveg: <pre>7 A közéjük zárt szöveg pontosan annyi szóközzel, pontosan annyi sorban és olyan állapotban fog a dokumentumban megjelenni, mint ahogy azt a HTML fájl tartalmazza. <pre> Este van, este van ki-ki nyúgalomba! Feketén bólintgat az eperfa lombja, zúg az éji bogár, nekimegy a falnak, nagyot koppan akkor, azután elhallgat. Írta: Arany János
9. Különleges karakterek (karakter entitások) A HTML dokumentum tartalmának kialakítása során a foglalt karakterek ill. a billentyűzetről nem, vagy nehezen elérhető különleges karakterek esetében un. karakter entitásokat (character entity) kell alkalmazni, ami az adott karakter/szimbólum/jel kódolt megadását
angol megnevezés ( less-than ) ( greater-than ) ( quotation mark ) ( ampersand ) ( copyright ) ( registered trademark ) ( trademark ) ( degree ) ( euro ) ( cent ) ( non-breaking space )
Megjegyzés: a nem törhető szóköznek (non-breaking space) nincsen megjelenési formája az a funkciója, hogy több szóból álló kifejezés/információ esetén a szavak közé helyezve megakadályozza azt, hogy a sor végén a böngésző a kifejezés/információ közben törhesse meg a sort, hanem egy sorban, sortörés nélkül tartja egyben azt Példa: A bekezdést
és
tagek közé kell írni.
15
Stíluslapok használata (CSS- Cascading Style Sheets)
1. Bevezető
A CSS az angol Cascading Style Sheets kifejezés rövidítése, jelentése rangsorolt stíluslapok. A stíluslapot egy szöveges fájlban kell megírni, amit .css kiterjesztéssel kell elmenteni. A stíluslap nem más, mint kijelölők (selector) és meghatározásblokkok (declaration) felsorolása. A meghatározás két részből áll: tulajdonságból (property) és értékből (value). kijelölı { tulajdonság1: érték1; tulajdonság2: érték2; tulajdonság3: érték3; ... } A kijelölő egy címkét jelöl ki a HTML dokumentumban, és erre a kijelölt címkére vonatkozik a formázás. Példa: h1 { color: red; }
a) Mértékegységek Méretek megadásakor számos mértékegység áll rendelkezésünkre, beszélhetünk abszolút és relatív értékekről. A mértékegységet mindig közvetlenül a szám után kell írnunk, minden elválasztó nélkül. Ha nem egész számot szeretnénk használni, akkor tizedespontot kell használnunk. a.1.
Relatív mértékegységek: px, em, ex és a százalék
px: A pixelben, azaz képpontban megadott értékek a megjelenítő egységtől függenek, általában egy konkrét képpont méretét jelölik em: Ez a mértékegység az adott elemnél (vagy szülő eleménél) felhasznált betűtípus betűméretéhez viszonyított értéket jelenti. Amennyiben a dokumentumhierarchia legfelső elemének betűmérete is ebben a mértékegységben van megadva, úgy a legfelső elem betűmérete az alapértelmezett font-size kiindulási értéke. Alapértelmezett esetben, ha a dokumentum gyökerében 16
használjuk ezt a méretet, 16 pixelt szokott jelenteni (böngésző beállításoktól függően). Egy lehetséges érték például az 1.2em. ex: Az ex szintén egy relatív értéket jelöl, és hasonlít az em-hez, azzal a kivétellel, hogy ez nem az adott betűkészlet magasságához viszonyított méretet, hanem a betűkészlet kis x betű magasságát jelöli (bár azoknál a betűkészleteknél is definiálva van, ahol nem létezik x betű). Általában a böngészők az értékét egyszerűen az em felének veszik, így alapesetben általában 8 pixelnyi méretet jelöl. Százalék: Mindig relatív értéket képeznek valamely más értékhez viszonyítva, a kérdés csak az, hogy éppen milyen értéket vesznek alapul. Ez általában a leglogikusabb érték, de hogy egyértelmű legyen, minden tulajdonságnál, ahol használhatunk százalékos megadást, definiálva van, hogy mihez képest értendő. Egy lehetséges értéke az 50%.
a.2.
Abszolút mértékegységek
Az abszolút mértékegységek neve onnan ered, hogy elvileg minden esetben a szemlélő számára ugyanakkora méretet jelentenek. Az mm a milliméter rövidítése, egy példa a használatára: 10mm. Az in az inch (=col, =hüvelyk) méretet jelöli, azaz 25.4 millimétert. Egy lehetséges megadása: 2in. A cm a centimétert takarja, mely mint köztudott, 10 mm-ert takar. A megadása nem tér el a korábbiaktól: 1cm. Most jönnek az érdekesebb mértékegységek, ezek közül az egyik a pt, mely a "pont" rövidítése. A pont tipográfiai mértékegység, egy pont 1/72 hüvelyket jelöl. Gyakran keverik össze a pixellel, pedig nem sok közük van egymáshoz. Egy példa a használatára: 16pt.
b) Színek használata
Több helyen is megadhatunk színeket tulajdonságként (háttérszín, szöveg színe, stb.). Alapvetően kétféleképpen: vagy a szín nevével, vagy pedig a 3 komponensével RGB (vörös, zöld, kék) formában. A használható 16 kulcsszó (a Windows VGA 16 színei közül): aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, és yellow. Az RGB megadás négyféleképpen is történhet, ebből az első két lehetőség hexadecimális, míg a továbbiak decimális és százalékos módok. 17
Az #rrggbb megadásnál az rr, gg és bb értékek hexadecimálisan, 00 és FF között adják meg az adott szín erősségét. A 00 a legsötétebb, a FF pedig a legvilágosabb. A hexadecimális számoknál a 9 feletti értékeket jelképező betűket mind kisbetűvel, mind nagybetűvel megadhatjuk. Pár példa: • • • • •
Az #rgb megadásnál az előzőhöz hasonlóan, de csak egy számjegyes hexadecimális számokkal adhatjuk meg a színt. Az #123 megfelel az #112233 színnek. Az előző példák ezzel a megadási móddal: • • • • •
Az első megadáshoz hasonlóan, de decimális számokkal is meghatározhatjuk a komponensek értékeit, szintén 0 és 255 közötti értékekkel. Ekkor az rgb(r,g,b) formátumot használhatjuk. Maradva a példáknál: • • • • •
Amennyiben százalékosan ismerjük a szín komponenseit, erre is lehetőségünk van. Ekkor a 0% éppen nullát, a 100% pedig 255-öt jelent. A százalék jelet közvetlenül a szám után kell írni. A használandó formátum az előzőhöz hasonló: rgb(r%,g%,b%). Maradva a példáknál: • • • • •
Ahhoz hogy egy stíluslap hatással legyen egy HTML dokumentumra, össze kell kötni őket. Ezt úgy tehetjük meg, hogy a fejrészbe (...) beírjuk a következő sort:
3. Kijelölők (szelektorok) használata
a) Elem kijelölők (Type selector) A összes HTML elemet ki lehet választani szelektorokkal. A weblap összes azonos elemére vonatkoznak. Ebben az esetben csak annyi a dolgunk, hogy a kiválasztani kívánt elem nevét használjuk szelektornak. Példa: h1{ color: red; } b{ color: #f8f8f8; }
Ez egy piros színő cím
Ez egy világos szürke színő, félkövér szöveg
b) Csoport kijelölés (Group of selectors) Több elemhez ugyanazt a stílust rendeli. A kijelölt elemek vesszővel és üres betűközzel elválasztva sorolandók fel Példa: h1, h2 { meghatározás(ok) } kódolás a legnagyobb és második legnagyobb címhez rendel azonos megjelenítést.
c) Azonosító kijelölők (ID selector) 19
Az id attribútum arra való, hogy egyértelműen azonosítson egy címkét, ezért két id ugyanolyan értékkel nem fordulhat elő egy oldalon belül. Ilyenkor egyedi, "személyreszabott" tulajdonságokkal láthatjuk el az elemeket. HTML attribútuma az id, CSS szelektora pedig a # (kettőskereszt) jel. Így kell megadni a HTML kódban:
Piros színő címsor
Kék színő címsor
A stíluslapban pedig így tudunk bizonyos nevű id-ra stílust alkalmazni: #piros { color: red; } #kek { color: blue; }
d) Származtatott kijelölők (descendant selector) Néha környezetfüggő kijelölőknek is fordítják őket – egy id jellemzővel definiált szakaszon belüli elem-kijelölést végeznek. Ha a HTML oldal például két szakaszból áll, és az egyes szakaszokban lévő bekezdésekhez szakaszonként eltérő megjelenítést tervezünk, akkor a HTML oldal kódolása:
……………………………..
……………………………..
……………………………..
……………………………..
CSS-ben az egyes szakaszok bekezdéseihez a megjelenítések kódolása: #szak1 p { meghatározás(ok) } #szak2 p { más meghatározás(ok) } Az azonosító kijelölőt tehát egy elemkijelölő követ, köztük egy üres betűköz van
e) Osztály kijelölők (Class selector) 20
Lehetőségünk van több elemnek egyszerre megadni tulajdonságokat ezzel a módszerrel. Itt meg kell adni a HTML-ben minden egyes általunk egyformán formázni kívánt elemnek a class attribútumot. Példa: h1.szin{ color: red; } Nem csak azonos, hanem különböző címkékhez ( pl. h1, p, blockquote, stb. ) is rendelhetők közös osztályok: .szin{ color: #f8f8f8; }
Szürke színő címsor
Szürke színő kiemelt szöveg
Szürke színő bekezdés
A weboldal egy része stílusának kijelöléséhez a kijelölők, azonosítók és osztályok kombinációja is használható. Pl.: az alábbi CSS kódolás #header p.stilus1 { meghatározás(ok) } csak a weblap fejléc szakaszában lévő bekezdések közül a stilus1 osztályba tartozókhoz rendeli a meghatározás(ok)ban definiált megjelenítést.
f) Ál-osztály ( látszólagos osztály, pseudo-osztály ) kijelölők ( pseudo-class/element ) A hivatkozásokra és az első sorra/első betűre vonatkoznak. Az állapotok kijelölései ( a sorrend kötött, az alábbiak szerinti ): a:link { meghatározás(ok) } ( link=kapocs, hivatkozás - itt: még nem látogatott ) a:visited { meghatározás(ok) } ( visited=felkeresve, látogatva ) a:hover { meghatározás(ok) } ( hover=lebeg – itt: a kurzor felette van ) Természetesen származtatott kijelöléssel az ál-osztály kijelölése pontosítható/szűkíthető, pl.: #nav a:link, #nav a:visited, stb. A hivatkozások azért ál-osztályok, mert állapotuk nem a HTML kódtól, hanem a weboldal látogatójának tevékenységétől függ, és egyidejűleg két állapotban is lehetnek ( pl. már egyszer rákattintottak, majd később újból felé állnak a kurzorral ). 21
Blokkszintű elemek első soraira és/vagy első betűire definiálható külön stílus. Pl. ha minden bekezdés első sorát jelöljük ki: p:first-letter { meghatározás(ok) }
Minden bekezdés első betűje esetén ( iniciálé kialakítása ! ): p:first-line { meghatározás(ok) }
4. Weboldal hátterének beállítása
Tulajdonság background-color
Leírás Egy elem háttérszínét adja meg
background-image
Háttérképet állít be.
background-repeat
Beállítja, hogy a háttérkép vízszintesen, függőlegesen, mindkét módon, vagy sehogy se ismétlődjön. Beállítja, hogy a háttérkép fixen maradjon-e az oldal görgetésekor, vagy sem. Rövidítő tulajdonság az összes eddigi tulajdonság egyidejű megadásához.
Lehetséges értékek color-rgb color-hex color-name left Szövegigazítás: bal, jobb, right közép, sorkizárt. center justify none Aláhúzást, felülhúzást, áthúzást, vagy villogást állít be underline overline a szövegre. line-through blink Bekezdés első sorának beljebb length % kezdése. normal Sorközök megadására szolgál. number length % A használandó betűcsaládról ad Betűcsalád neve, pl: Arial, prioritásos listát: Ha az első "Times New Roman", megadott font nem található, Verdana; Vagy: általános típus: serif akkor próbálkozik a sans-serif másodikkal és így tovább. cursive fantasy monospace normal Dőlt betűs szöveg italic megjelenítését teszi lehetővé. oblique Szöveg méretét lehet megadni. xx-small x-small small medium large x-large xx-large pt px smaller 23
font-style
Dőlt betűs szöveg megjelenítését teszi lehetővé.
larger % em normal italic oblique
Megjegyzés: A font-size tulajdonság értékéhez csak ezeket az értékeket ajánlott megadni: %, em, smaller, larger. Ugyanis ezek az értékek a szülő elem betűméretéhez képest relatívan adják meg a betűméretet.
Gyakran van szükségünk arra, hogy csak bizonyos szavak, szövegrészeket emeljünk ki, színezzünk át stb. Az ilyen formázandó szövegrészek kijelölésére kell használni a span tagot. Ehhez a címkéhez mindig adjuk meg a class értéket, hiszen így fogjuk tudni később elérni a stíluslapból. Példa: span.voros { color: red; }
A szín egy érzet, amely az <span class="voros">agy reakciója a fényre
6. Linkek díszítése stíluslappal
A linkek esetén, a különböző állapotokra különböző stílusokat alkalmazhatunk. A link négy állapota: o :link - A még meg nem látogatott linkek o :visited - A már meglátogatott link o :hover - Azt a linket választja ki, amelyik felett éppen áll az egér o :active - Azt linket választja ki, amelyiken állva az egérrel a felhasználó lenyomta az egérgombot, de még nem engedte fel. Nem kötelező mind a négy állapotra külön stílust megadni. Azonban ha megadjuk őket, akkor pontosan a fenti példában látható sorrendben alkalmazzuk őket. Példa: a:link { text-decoration: none; } a:visited { text-decoration: line-through; } a:hover { 25
color: orange; } a:active { color: lime; }
7. Listák formázása stíluslappal
Tulajdonság list-style-type
Leírás A listaelemek előtti kis jel megadására szolgál.
list-style-image
Kép beállítása a listaelemek jelzésére. A listaelmek előtti kis jel vagy kép helyzetének megadására szolgál.
list-style-position
Példa: ul.square { list-style-type: square; }
HTML 3.2
HTML 4
XHTML
8. Táblázatok formázása stíluslappal 26
Lehetséges értékek disc circle square none decimal lower-alpha upper-alpha lower-roman upper-roman none url outside inside
a) Rácsvonalak hozzáadása a táblázathoz td, th { border: 1px solid black; } b) Kettős szegély megszüntetése table { border-collapse: collapse; } c) Belső margó megadása a cellákhoz
címkék (division=szakasz) egy általános tárolóelemet alkotnak ( általában a weblap egy logikai összetartozó részét jelölik ki ), a közöttük elhelyezkedő tetszőleges tartalomra (szöveg, lista, táblázat, kép, hivatkozások, stb.) hivatkozni lehet, ill. formázást lehet hozzárendelni. Az egyes tárolóelemek az id jellemzőjük (identifier=azonosító) tulajdonságával (célszerűen a szakaszra jellemző névvel) azonosíthatók. Az id-k értékeinek egyedieknek kell lenniük, azaz mindegyik csak egyszer szerepelhet egy weblapon, különben nem lesz egyértelmű az azonosításuk. A HTML kódba a szakaszkijelöléseket beírva a HTML tartalom és alapértelmezett megjelenítése önmagában nem változik meg, a CSS-ben hozzájuk rendelt formázási tulajdonságokkal együtt azonban nagyon fontos szerepük van a weblap megjelenítésének kialakításában.
b) A <span>..... címkével soron belül jelölhető ki olyan tartalom, ami külön formázható. A span címkét a div-hez hasonlóan egyedi azonosítóval kell ellátni. Példa: A span nem <span id="largefont">blokszíntű elem. #largefont{ color: #00FF00; font-family: arial; font-size: 4pt; }
10.
A dobozmodell
A CSS stíluslapnyelv egy HTML dokumentum megjelenítésekor az egyes elemekhez láthatatlan dobozokat rendel, melyek magukban foglalhatnak karaktereket, szavakat, sorokat, bekezdéseket, listákat, táblázatokat, képeket, stb. Minden doboznak lehetnek külön formázási tulajdonságai, mint pl. méret, előtérszín, betűtípus, szegély, háttér, stb. A dobozok hierarchikusan egymásba is ágyazódhatnak, pl. egy szó doboza egy lista egy sorának vagy egy táblázat egy cellájának a dobozába, az a lista vagy táblázat dobozába, majd az a weboldal egy szakaszának a dobozába, stb. A dobozok lehetnek blokkszintű ( block-level box ) dobozok ( pl. bekezdés, lista, táblázat, blokkidézet, div szakaszok, stb. ), sor-( inline box ) dobozok ( pl. egy szöveg egy sora ), és soron belüli ( inline-level box ) dobozok ( pl. karakterek, szavak, képek egy soron belül ). Minden doboznak van egy 'magja', az őt körülvevő 'kitöltéssel' (padding), szegéllyel (border) és margóval (margin). A margó, a szegély és a kitöltés mérete egyenként meghatározható a margin, a border és a padding tulajdonságok értékeinek beállításával. A kitöltőterület háttérszíne megegyezik az elemével, amelyet a background tulajdonság határoz meg. A szegély színe és stílusa szintén a border tulajdonság beállításával határozható meg, míg a margó mindig átlátszó, így a szülő elem állandóan látható marad. 29
A doboz szélessége az elem, a kitöltés, a szegély és a margó területének összege.
11.
Kitöltés, szegély és a margó beállítása
a) Kitöltés (belső margó) beállítása A belső margó (padding) a tartalom és a szegély közti üres részt határozza meg. Megadásának módja a padding-top, ( felső belső margó ), padding-right ( jobboldali belső margó ), padding-bottom (alsó belső margó), padding-left (baloldali belső margó) tulajdonságokkal történik. Alapértelmezett értékük 0 (mind abszolút, mind relatív értékben) és egyiknek sem lehet negatív az értéke. A fenti értékek összevontan is megadhatók a padding tulajdonsággal, a felsorolt értékek kötelező sorrendje az óramutató járásával megegyezik és felülről indul. Ha a bal értéket kihagyjuk, az megegyezik a jobbal, ha az alsó értéket hagyjuk ki, az megegyezik a felsővel. Ha mindegyik érték megegyezik, egyetlen rövid alakú padding tulajdonság használható. Az alábbi két megadási mód ekvivalens: h1 { padding: 0.5em; } h1 { padding-top: 0.5em; padding-right: 0.5em; padding-bottom: 0.5em; padding-left: 0.5em; }
b) Szegély megadása A szegélyek (border) a margón belül helyezkednek el. Számos látszólagos tulajdonságuk van: szélesség, stílus, szín. Szélesség: Tulajdonság border-width border-top-width border-right-width border-bottom-width border-left-width
Leírás Keret vastagságának megadása.
Lehetséges értékek
Leírás Keret stílusának megadása. Ha nem állítjuk be, nem fog látszani a keret!
A szegély stílus, szín és vastagság a border tulajdonsággal még tovább összevonható, azonban ez az összevonás (shorthand) csak akkor használható, ha a négy szegély stílus-, szín-, és vastagság értékei egyenlők. h1 { border: solid green 15px; }
c) Margó beállítása Befolyásolják az adott elem távolságát annak szomszédos elemeitől. A margóknak nincs semmilyen látszólagos tulajdonságuk, értékük. Csak méretüket határozhatjuk meg.
Leírás Felső margó Jobb margó Alsó margó Bal margó Összefoglaló, rövid tulajdonság. Nem kell külön-külön megadnunk a margó részeit, hanem egyszerre maghatározhatjuk értékeiket egy és négy között. Az első a felső margót-, a második a jobb margót-, a harmadik az alsót, a negyedik értéke pedig a bal margót szabályozza.
Lehetséges értékek auto (a böngészı beállítása) length %
Alapértelmezett értékük szintén 0 (mind abszolút, mind relatív értékben). Egy lényeges különbség a belső margóhoz képest, hogy a külső margónak negatív értéke is lehet - ekkor a szomszédos befoglaló blokk-elemek átfedhetik egymást. Az egyes böngészők alapértelmezetten más-más kezdő margókat használhatnak, ezért a saját elképzelésünk böngészőtől független kialakításához célszerű balra felülre igazítani az elemek elhelyezésének referencia-pontját: body, p, table, img, h1, h2, h3, h4, ol, ul { margin: 0; padding: 0; }
32
Példa: h1{ margin: 10px 11px 12px 13px; }
A h1 elem felső margója 10px, jobb margója 11px, alsó 12px, és a feslő margója 13px.
12.
Méretezés, pozicionálás
a) Méretek beállítása Az alábbi tulajdonságok segítségével a különböző elemek méretét állíthatjuk be. Tulajdonság width
height
max-width
min-width
max-height
min-height
• • •
Leírás Egy elem szélességét adja meg. Egy elem magasságát adja meg. Egy elem maximális szélességét adja meg. Egy elem minimális szélességét adja meg. Egy elem maximális magasságát adja meg. Egy elem minimális magasságát adja meg.
Lehetséges értékek auto
% px, em auto
% px, em auto
% px, em auto
% px, em auto
% px, em auto
% px, em
auto: ez az alapértelmezett érték - a böngésző maga határozza meg egyéb tulajdonságok értékei alapján a szélességet illetve a magasságot abszolút értékben megadás: a tartalom-doboz szélességét illetve magasságát definiálja relatív értékben (a befoglaló blokk szélességének illetve magasságának százalékában) megadás
Példa:
This paragraph is 400pixels wide and 100 pixels high
A böngészők balról jobbra és fentről lefelé olvassák a dokumentumokat (ez a normál szövegfolyam). Ebből a normál folyamból a position (helyzet) és float (úsztatás) tulajdonságokkal lehet kiemelni egy adott elemet. A position tulajdonság lehetséges értékei: static (statikus) – ez az alapértelmezett érték, az elem a normál folyamban marad absolute (abszolút vagy független): az adott elem tárolótömbjéhez képest van a helyzete meghatározva, ami lehet egy másik elem, vagy a kezdeti tárolótömb (általában maga a html elem). fixed (rögzített): a helyére rögzítve marad az elem akkor is, ha a weblapot görgetjük (a felhasználó által látható részhez/böngészőablakhoz rögzített, hasonlóan a fixed background image-hez). Az abszolút pozíció speciális esete - az elem itt is kikerül a pozícionálási sémából, de nem a befoglaló blokk, hanem a képernyő (viewport) a viszonyítási pont. A rögzített pozíciójú elem nyomtatáskor minden oldalon megjelennek. relative (relatív vagy viszonyított): az elem a normál szövegfolyamban helyezkedik el, és ettől a normál helyzetétől toljuk el valamilyen értékkel (px, em, %) az alapértelmezett static helyzetből vízszintes és függőleges irányba a left, right, top, bottom tulajdonságokkal. Az eltolt elem „eredeti” helye üresen marad, más elem nem csúszik oda be (az eltolás a környezetére nincsen hatással)
A körülfolyás (float) A float tulajdonság segitségével különböző elemeket az oldal bal vagy jobb szélére usztathatunk. Ha egy elem úsztatva van, a tartalom többi része ( szöveg ) körbe veszi. A float és a körbefutó tartalom közötti hely kihagyást a float margin tulajdonságával lehet változtatni.Tipikus példa, amikor egy képet körülfolyatunk szöveggel, de használjuk egy weboldal szerkezeti kialakításánál is.
A float értékei: left: az elem balra tolódik, a szöveg az elem jobb oldalán folyik (fentről lefelé) right: jobbra tolódik, a szöveg bal oldalt folyik le none: nem történik körülfolyás Ha a float tulajdonság hatását meg akarjuk szüntentni akkor használjuk a clear: beállítást. Értékei: left: a float left hatását megszünteti right: a float right hatását megszünteni both: minden float tulajdonság hatását érvényteleníti none: alapbeállítás, az adott elemre kihatással lesz a float
a Sapientia logoja.
a Sapientia logoja.