1. A HTML leíró nyelv. 2. Stíluslapok - CSS. 3. HTML sablonok. Tartalom

Átírás

1 1. A HTML leíró nyelv 2. Stíluslapok - CSS 3. HTML sablonok Tartalom 1. A HTML leíró nyelv Stíluslapok - CSS HTML sablonok A HTML megjelenítő nyelv Bevezető HTML verziók Címkék és elemek HTML dokumentum felépítése A dokumentum típusa A HTML nyelv adattípusai Karakter kódolás és karakter entitások Az elemek tulajdonságai HTML elemek A fejléc fontosabb elemei A dokumentum törzsében használt fontosabb elemek A blokk és sorközi elemek (block, inline) A <div> és <span> elemek Az legtöbb elemre alkalmazható közös tulajdonságok Megjegyzések Fontosabb blokk elemek Szövegek megjelenítése A horgony elem Képek és multimédia objektumok Képek Külső objektumok Listák Táblázatok Keretek Űrlapok A CSS stíluslapok Bevezetés, CSS verziók A CSS szabályok megadása A CSS szöveg megadása a HTML oldalakban Alapvető CSS adattípusok CSS hossz mértékek CSS színek

2 2.5. Külső URL-ekre való hivatkozás CSS kiválasztók (szelektorok) Az univerzális szelektor Az elem kiválasztó Az azonosító kiválasztó (id) Az osztály kiválasztó (class) A leszármazott kiválasztó A csoportosító szelektor Más szelektorok A látszólagos osztályok A CSS deklarációk prioritása A!important direktíva A CSS szöveg írása A doboz modell Az elemek elhelyezése Az elemek egymás mellé kerülésének szabályai A position tulajdonság A lebegés és a float tulajdonság A clear tulajdonság Az overflow tulajdonság A z-index Színek és hátterek meghatározása Fontok kiválasztása Szövegek formázása Sablonok és összetett weblapok tervezése A navigáció tervezése A megjelenítés felosztása és a pozicionálás A float tulajdonság felhasználása A weblap vázlata A felosztás megvalósítása

3 1. A HTML megjelenítő nyelv 1.1. Bevezető HTML verziók A HTML leíró nyelv első változatát a web alkotója Tim Berners Lee fejlesztette (1990), és egyike volt annak a három komponensek ami a web-et meghatározta: egy új hálózati protokoll (HTTP - Hypertext Transfer Protocol) egy megjelenítő nyelv (HTML - HyperText Markup Language) a weben alkalmazott címzés: URL (Universal Resource Locator) Tim B. Lee első HTML nyelve egyszerű volt. A HTML 1 és 2 verziókat az SGML nevű dokumentum leíró nyelv egyszerűsített változataként tervezték. A nyelv között (HTML 3.2) igen sokat fejlődött, és jelentősen meghatározta a nagy befolyással rendelkező cégek versengő nyelv alakítási kísérletei, amelyet "HTML háború"-nak is nevezünk. Ezt elkerülendő, Berners Lee egy konzorciumot alapított: W3C (World Wide Web Consortium, melynek feladata technológiák fejlesztése, amelyek maximálisan elősegítik, megkönnyítik a web működését (HTML, HTTP, XML, SVG stb.). Jelenleg a HTML és utódnyelveinek standardjait ez a konzorcium definiálja. A W3C által fejlesztett standardok nyílt szabványok bárki alkalmazhatja őket, illetve aki nem alkalmazza őket az kompatibilitási gondokkal küzd. A standardok fejlesztésében a W3C csoport mellett a legnagyobb ipari cégek és kutatóintézetek vesznek részt. A konzorcium 1998 adta ki a nyelv HTML 4.0. standardját: ez számított az első letisztult változatnak. A HTML (Hypertext Markup Language) az SGML-nek nyelvtanára épülő, böngészőben megjeleníthető dokumentumokat leíró nyelv. A mark szó jelölést is jelent, ezért fordítjuk jelölőnyelvnek is ben XML alapú definíciót készített, az XHTML 1.0 verziót, mely tovább bővítette a nyelv lehetőségeit. Jelenleg a W3C HTML munkacsoportja a nyelv HTML 5 változatán dolgozik, melynek első, "working draft" változatát a konzorcium 2008 januárjában publikálta. Bizonyos lehetőségei már használhatók egyes böngészőkben, de elterjedése a gyakorlatban még kezdetén van. Az XHTML változatok szigorú szintaxisra és elemzésre épülnek, így olyan esetekben, amikor a dokumentumok pontos elemzés fontos, előnyt jelentenek. Ugyanakkor ezek a változatok bővíthetőek is, tehát nyelvi elemeik nem rögzítettek. Jelen tananyag a HTML 4.01 verziót használja, és a webprogramozó szempontjából próbál közelíteni a nyelvhez. Így szinte egyáltalán nem foglalkozik esztétikai elemekkel, amelyek egy más típusú megközelítés tárgyát jelentik Címkék és elemek Strukturált dokumentumok esetében ilyen a HTML is - gyakran használt módszer a struktúrát alkotó elemek címkékkel való bejelölése. Az alábbi példában, egy paragrafusokból álló dokumentumban a paragrafusokat úgy különítjük el, hogy címkézzük őket egy p nevű címkével. Azért, hogy ez jól elkülönüljön az ilyen szövegekben a címkéket valamilyen szintaktikai elemmel veszik körül: ebben az esetben ezek a < és > jelek, amelyek így a szövegben nem lesznek 3

4 használhatóak. <p>ez egy paragrafus</p> <p>ez pedig egy másik</p> A HTML is ilyen címkéket (angol: tag) használ a dokumentum strukturális elemeinek (element) bejelölésére. A legtöbb elem nyitó és zárócímkével rendelkezik, mint a fenti paragrafus elem, de vannak olyanok amelyek csak egy nyitó címkével rendelkeznek, pl. az alábbi, vízszintes vonalat (horizontal line) megjelenítő elem: <hr> Megjegyzés: az XHTML-ben nincsenek csak nyitó címkével rendelkező elem, mindig van zárócímke. Ebben a dokumentumban külön fel fogjuk hívni a figyelmet, ha az elem csak nyitó címkével rendelkezik HTML 4 esetében. A többi elemnél, ahol jelen van a zárócímke is, erre nem fogjuk külön felhívni a figyelmet. Az elemeket egymásba lehet ágyazni. Bár a HTML 4 elfogad olyan beágyazásokat ahol az egymásba ágyazott elemek "egymásra" ágyazódnak, ajánlott mindig betartani a helyes beágyazást: helytelen: <p>szöveg<b>kiemelt szöveg</p></b> helyes: <p>szöveg<b>kiemelt szöveg</b></p> Ilyenként a HTML egy "laza" nyelv: a böngésző nem akad ki ha a HTML szövegben nyelvi hibák vagy következetlenségekre akad. Ilyenkor esetleg nem jeleníti meg jól a HTML szöveget. Az XHTML szigorúbb, ott nem lehet nyelvi hibákat elkövetni: a böngésző nem jelenít meg nyelvi hibákat tartalmazó oldalakat HTML dokumentum felépítése A HTML dokumentum egy szöveges dokumentum, amely elemek sorozatából épül fel. Egy HTML oldal 3 részből áll. Mindhárom részt egy-egy elemmel adjuk meg. a dokumentum típusának megadása (DTD, Document Type Description) a fejléc (header) a dokumentum törzse (body) Ezen kívül, a HTML több külső dokumentumra is hivatkozhat, ezeket a hivatkozásokat a fejlécben adjuk meg. A hivatkozásokat jelentő dokumentumok megjelenítéshez szükséges stílus definíciókat, szkripteket tartalmazhatnak. 4

5 Egy egyszerű példa (body.html): <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " <html> <head> <title>itt áll a dokumentum címe</title> </head> <body> <p align="center">ez egy kis paragrafus.</p> </body> </html> Megjelenítése böngészőben: Az első elem a <!DOCTYPE> a dokumentum típusát adja meg: milyen HTML "dialektusban" írtuk meg. A fejléc (a head elem) olyan elemeket tartalmaz amelyek nem jelennek meg az oldalon megjelenítéskor, de fontos leíró (meta) információkat, illetve különböző, a dokumentumhoz csatolt más dokumentumokat adnak meg. A dokumentum törzse (a body elem) tartalmazza a böngészőben tulajdonképpen megjelenített tartalmat. Az is látható, hogy a következő szinten levő paragrafus elem, a <p> beágyazódik a <body> elembe. Így a HTML dokumentum úgy épül fel, mint egy egymásba ágyazott elemekből álló fastruktúra. A <p> elem nyitó címéjében álló align="center" az elem egy tulajdonságát határozza meg. A HTML elemek tulajdonságait név érték párokkal adjuk meg: jelen esetben a paragrafus szövegét középre igazítottuk. A HTML elemek megjelenítéshez kötődő tulajdonságait ma már ritkán használjuk. A tulajdonságokat többnyire egy másik nyelv, a rangsorolt stíluslapok (CSS - Cascading Style Sheet) 5

6 segítségével tesszük A dokumentum típusa A <!DOCTYPE> nevű elem egy másik dokumentumra mutat, az un. DTD-re (Document Type Definition). Ez írja le azokat az elemeket amelyeket a HTML dokumentumban használhatunk (tulajdonképpen megadja a HTML dokumentum elemkészletét és nyelvtanát). A DTD-vel gyakorlatilag nem kell foglalkoznunk, csak a megfelelő hivatkozást kell megadnunk a HTML elején. Az érdeklődők számára, egy HTML DTD itt olvasható: A HTML 4.01 dokumentumainál háromféle DTD-t adhatunk meg: strict transitional frameset A strict (pontos) dokumentum nem ismeri fel azokat a HTML elemeket illetve tulajdonságokat amelyeket a W3C elavultnak tekint. Az elavulás egy nyelv esetén azt jelenti, hogy időnként a nyelv bizonyos elemeit megjelölik (elavult - deprecated), és nem ajánlják használatra: később ki is veszi a standardból őket. A strict típusú dokumentum esetében a megjelenítés milyenségét csak a stíluslapok (CSS) használatával együtt lehet vezérelni. A transitional (átmeneti) megenged régi jelöléseket is, és akár stíluslap nélkül is lehet használni. A frameset (frame: keret) pedig megenged egy bizonyos HTML oldalfelosztás, a keretek használatát. A szintaxis: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"" <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" " A HTML nyelv adattípusai Az elemek leírása során a nyelv különböző adattípusokat használ az elemek tulajdonságainak megadásánál. A HTML nyelvben használt adatok részben az SGML nyelv adatai, részben HTML-re jellemzőek. A fontosabbak az alábbiak, egy-egy rövid példával: 6

7 CDATA character data: egy karaktersorozatot, szöveget értünk alatta amely a dokumentum karakterkészletéből épül fel. A HTML a szövegben átírja a karaktersorozatokat: a többször, egymásután előforduló szóköz és return karaktereket egy szóközzel helyettesíti, az újsor karaktereket kiszűri. Ilyen szövegeket tartalmaznak például a paragrafusok: <p>ez itt egy szöveg itt újsor itt 4 szököz, itt pedig 8 HTML szóköz: eddig. </p> Megjelenítéskor a a böngészőben ezt látjuk: URI Egységes forrásazonosítók: lásd még részletesen a HTTP protokoll segédletet, tulajdonképpen webcímet jelent, mint: színek A színeket az alábbi formátumok egyikében lehet megadni: -három hexadecimális színkód egymás után, az RGB értékekre: #ff0000 a piros, #00ff00 a zöld stb. 16 szín esetében ezekre szimbólumokat is deklarál a nyelv: black, silver, red, green, blue, stb. A színeket ajánlatos stíluslapokon keresztül megadni, és nem az elemek tulajdonságaiként. távolságok Az elemek szélességet, egymástól való távolságát háromféleképpen lehet megadni: 1. pixelekben: ha a távolságra csah egy számot adunk meg akkor pixel értendő, pl.: width="10" 2. százalékban: ez az elem rendelkezésére álló hely egy részét fejezi ki, pl: width="80%" azt jelenti, hogy az elem szélessége a rendelkezésére álló hely 80%a 3. relatív hossz: pl. ha három elemet kell elhelyezni egy területen, akkor azt így adhatjuk meg: 1*, 2*, 1*, és akkor a rendelkezésre álló hely 4 észre oszlik és ebből pl. a második elem kettőt kap. tartalom típusok Angol neve Content-Type: ez a használható MIME (Multipurpose Mail Extension) típusok neve (lásd HTTP protokoll segédlet). Pl. az image/jpg típus jpg formátumú képet jelent, a text/css típus pedig CSS szöveget tartalmazó állományt. karakterek A használt karakterkészlet egyedi karakterei, pl. az ISO es készleté. 7

8 idő Az idő megadására az alábbi formátumú sztringet használja a nyelv: YYYY-MM-DDThh:mm:ssTZD, pl: T22:56:23EET HTML Angol neve link: milyen szerepekkel kötődnek egymáshoz a dokumentumok. hivatkozások Értékei: alternate, appendix, bookmark, chapter, contents, copyright, glossary, help, home, index, next, prev, section, start, stylesheet. szkriptek A szkriptek nyelvén írt szövegek et a <script> elem tartalmazza. Leggyakrabban a JavaScript nevű nyelvvel találkozunk HTML-be ágyazva. stíluslapok adatai A <style> elem tartalmazhat stíluslap szöveget Karakter kódolás és karakter entitások A HTML dokumentum szöveg, egy szöveget pedig karakterenként kell értelmezni. Ahhoz, hogy az értelmezés helyes legyen, a karaktereket pontosan fel kell ismernie annak a programnak amelyik megjeleníti a dokumentumot. A helyes értelmezés első feltétele a dokumentum írásakor használt karakterkészlet ismerete. Jelenleg használt karakterkészletek pl. az alábbiak: UTF-8: Az UNICODE karakterkészlet 8 és 16 bites kódokat egyaránt kihasználó, tömörebb változata. Ma ez a készlet szinte minden esetben az ajánlott karakterkészlet. ISO x: 8 bites karakterkészlet család, amelyből a nyugati ISO illetve a kelet európai ISO készletet használjuk. Az US-ASCII készlet ma már ritkán fordul elő HTML dokumentumokban. A HTML lap karakterkészletét általában a kiszolgáló küldi el a böngészőnek a protokoll folyamán, de fel szokták tüntetni a dokumentumban is, a <head> elemben,amint azt alább látni fogjuk. A felismerés második feltétele a dokumentum nyelvtana szempontjából speciális karakterek pontos felismerése. Ebbe a kategóriába tartozik pl. a < és > címkehatároló karakterek (amelyek megjelenhetnek pl. a paragrafusok tartalmában is), a kontroll karakterek illetve a karakterkészletek speciálisabb karakterei, ilyen pl. a copyright vagy a trade mark jele (, ). Mivel a HTML dokumentum a szóköz, tabulátor, újsor karakterei egyaránt elválasztónak értelmezi, akár egy akár több áll egymás után, egy paragrafus tartalmában pl. két megjelenített szó között mindig egy szóközt jelenít meg, akárhány elválasztó karakter van. Így, ha azt akarjuk elérni, hogy egymás után több megjelenített szóköz jelenjen meg, ismét csak egy speciális karaktert kell használnunk, az un. "nem elválasztó szóközt" (non breaking space). Ezekre az esetekre a HTML nyelv karakter entitásokat (character entity) és numerikus karaktereket 8

9 definiál. A jelölőnyelvekben entitásoknak nevezünk egy olyan dokumentum részletet (akár egy karaktert, akár egy egész állományt), amelynek nevet adunk a DTD-ben, és egy hivatkozással beilleszthetjük a dokumentumba. A karakter entitásokra karakter referenciával és numerikus karakter referenciával lehet hivatkozni (character reference). Ezeket a böngésző megfelelő definíciójuk szerint jeleníti meg, és gyakorlatilag pontosan megjelennek, karakterkészlettől függetlenül. Karakter entitás például a copyright szimbóluma: az entitás neve copy, erre a HTML-szövegben az alábbi referenciával hivatkozunk: Egy bevezető & jel után a karakter entitás neve következik, majd egy záró pontosvessző jel. A numerikus referenciák szintaxisa: Á A bevezető & jel után a karakter kódja áll, előtte egy #. A kód jelen esetben tízes számrendszerben értendő. A kódok megadhatóak hexadecimális számrendszerben is. pl.: Á A példa a nagy Á betű karakterkódját jelenti. A biztosan megjelenítendő szóköz karakterének entitása a non breaking space karakter: amit gyakran használunk. Pl. az alábbi szöveg megjelenítéskor biztosan 2 szóköz jelenik meg a szavak között: <p>két szóköz<p> A HTML specifikáció ezeket táblázatokban adja meg. Egy ilyen táblázatot találunk például az alábbi webcímen: LATIN1 karakterkészletre. Sok szövegben használunk referenciákat UNICODE karakterekre. Ilyenek vannak pl. az alábbi táblázatban: Karakter Numerikus refrencia Entitás referencia Az elemek tulajdonságai A HTML elemeket tehát a címkék, a kezdő és zárócímke veszi körül. Az elemeknek tulajdonságai lehetnek, ezeket a nyitócímkén belül adjuk meg. A tulajdonságok név-érték párokat jelentenek, amelyek kifejeznek valamit az elemről. 9

10 A tulajdonság neve általában egy programozási nyelvekben használt azonosító, az értéke egy sztring, amellyel HTML adatot fejezünk ki. Példák: <input type="text" name="mezo" value=""> <img src="kep.gif" width="100" height="50"> <p id="elso">szöveg</p> 1.2. HTML elemek A fejléc fontosabb elemei A fejléc elemei nem lesznek megjelenítve a böngészőben. Itt olyan elemeket találunk, amelyek különböző, a dokumentum megjelenítéséhez szükséges információkat tartalmaznak, vagy a dokumentumhoz kapcsolódó, más dokumenyumokra vagy állományokra utalnak. A fejléc fontosabb elemei: <title>,<base>, <isindex>, <link>, <meta>, <nextid>, <object>, <script>, <style>. A <title> elem A dokumentum címét tartalmazza: kötelezően meg kell jelenjen, mert a lap megjelenítése szempontjából fontos azonosító. Ennek az elemnek a tartalma látszik a böngésző ablak cím mezőjében. Az oldalt letöltő keresőgépek számára is egy nagyon fontos elem. Használata: <title>dokumentum címe</title> A <link> elem Dokumentumok közti kapcsolatok megadására használják. A kapcsolat típusát az elem rel tulajdonságával lehet megadni, a fontosabbak: chapter, contents, copyright, next, prev, section, start, stylesheet, icon. Az elem type tulajdonsága a kapcsolt dokumentum (MIME) típusát, a href pedig elérési webcímét adja meg. Pl. a href és rel tulajdonság segítségével megadható az adott dokumentum és más dokumentumok közti egymásutániság. Pl.: <link href="lap11.html" rel="next"> jelzi, hogy a lap11.html dokumentum a következő egy dokumentum sorozatban a jelenlegihez 10

11 képest. A <link> elemet használjuk akkor is, ha stíluslapokat kell a dokumentumhoz kötni (ezekkel adjuk meg a megjelenítés tulajdonságait): <link rel="stylesheet" type="text/css" href="style.css"> Ugyancsak a fejlécben használhatóak az un. <meta> elemek. Ezek egyrészt leíró információkat (mint szerző, kulcsszavak), másrészt a HTTP protokoll által is küldött HTTP fejlécekkel ekvivalens információkat tartalmaznak. Ilyen pl. az az elem, amely megadja a karakterkészletet, amellyel a lapot kódoltuk. Ezt az elemet is mindig ajánlatos megadni, mert offline megjelenítésnél e nélkül megtörténhet, hogy nem jelennek meg jól a karakterek. <meta http-equiv="content-type" content="text/html;charset=utf-8"> a http-equiv tulajdonság arra utal, hogy az elem a HTTP protokoll megfelelő fejlécével ekvivalens tulajdonságot tartalmaz. A content tulajdonságban pedig a dokumentum MIME típusát valamint karakterkészletét adjuk meg. A leggyakrabban használt készletek a mi esetünkben (magyar nyelvű weblapok): utf-8, iso Ugyancsak a <meta> elemmel adjuk meg a lap leíró (meta) adatait: szerző, rövid leírás, kulcsszavak: <meta name="author" value="szerző Neve"> <meta name="keywords" value="webprogramozás, tanfolyam, html"> A fejlécbe kerül még két fontos része a dokumentumnak: a dokumentumhoz csatolt JavaScript szkriptek megadása, amelyet a <script> elemmel adunk meg, illetve a dokumentumhoz rendelt stíluslapok megadása, amelyet a <style> elemmel adunk meg. Ezeket majd a megfelelő időpontban részletesen tárgyaljuk. Példa egy teljesebb fejlécet tartalmazó HTML-re: <html> <head> <title>itt áll a dokumentum címe</title> <meta http-equiv="content-type" content="text/html; charset: utf-8"> <meta name="description" content="bevezetés a webprogramozásba"> <link rel="stylesheet" type="text/css" href="style.css"> <link rel="icon" type="image/gif" href="icon.gif"> </head> <body> <p>ez egy kis paragafus.</p> </body> </html> 11

12 A dokumentum törzsében használt fontosabb elemek A blokk és sorközi elemek (block, inline) Megjelenítéskor a HTML az elemeket a dokumentumban megjelenő sorrend szerint szerint próbálja megjeleníteni, egymás után. Egyelőre olyan megjelenítésről beszélünk, ahol nem próbáljuk ezt mi alakítani, hanem az implicit megjelenítést követjük. A böngésző kétféle logikával jeleníti meg az egymásba ágyazott elemeket. Egy elem megjelenítésén mindig az elem egy kis téglalapba való kirajzolását értjük. Ezeket egymás után, egy "sorba" jelenítheti meg a böngésző, az ilyen elemeket nevezzük sorközi elemeknek, vagy inline elemeknek, vagy egymás alá vetíti őket, és ekkor beszélünk blokk (block) elemekről. Valamennyi megjelenített HTML elem beágyazott elem, mert mindnyájan a <body> elemen belül foglalnak helyet A <div> és <span> elemek Ezt a két elemet a többi elem csoportosítására használják. A <div> elem (division: felosztás) blokk elem, míg a <span> (span: feszít) sorközi. Így ennek a kettőnek a használatával tetszőlegesen szervezhető egy HTML dokumentum többi eleme. <html> <head> <title>html elemek</title> <meta http-equiv="content-type" content="text/html;charset=utf-8"> </head> <body> <div> <p>első blokk</p> <p>második blokk</p> </div> <div> <p>harmadik blokk: <span>vízesés: </span><span><img src="vizeses.jpg" border="0" height="50" width="50"></span> </p> </div> </body> </html> Megjelenítve: 12

13 A blokkokat megjelenítő csíkokat a Webdeveloper nevű segédeszközzel rajzoltuk ki (ezek nem tartoznak a laphoz). Így jól látható, hogy egy blokk a böngészőablak teljes szélességét elfoglalja, és két egymásutáni blokk egymás alá kerül. A blokkok közt pedig egy elválasztó üres terület van, amelynek mérete egyszerű elemek esetén egy implicit értékre áll be, és változtatható (stílus lapokkal). A harmadik blokkban a szöveget és a képet egy <span> elemmel fogtuk közre. A <span> elem csak sorközi elemeket jeleníthet meg egy sorban. Igazán jól akkor használható, ha a HTML oldallal együtt stíluslapokat is használunk. Sorközi elem nem tartalmazhat blokk elemet, csak fordítva. Tehát az alábbi HTML helytelen, mert ahogy a <p> elem megjelenik, a <span> elem bezárul (automatikusan így értelmezi a böngésző). <div> <span> <p>vízesés</p><img src= vizeses.jpg border= 0 > </span> </div> Az legtöbb elemre alkalmazható közös tulajdonságok Az elemek tulajdonságai különbözőek, ez jellegükből adódik. Van azonban néhány közös tulajdonság, amelyet mindegyikre alkalmazhatunk. Ezek leginkább a megjelenítés milyensége, illetve az elemek dinamikus tulajdonságai miatt használandóak. Bár ezekre a lehetőségekre később térünk rá, itt megemlítjük őket. Tulajdonság Jelentése id Egy azonosítót rendel az elemhez, ezzel gyakorlatilag meg lehet "címezni" az elemet. Egy HTML lapon egy bizonyos azonosító csak egy elemhez rendelhető. Azonosítónak általában a programozási nyelveknél megszokottakat használjuk, tehát a a-za-z0-9_ karakterekből álló szavakat. name Szintén egy azonosítót rendel az elemhez. Ez HTML specifikus, az XHTML-ben már nem használjuk (ma már ajánlott helyette mindig az id-t használni). class Osztályba sorolja az elemeket, több elem is tartozhat ugyanabba az osztályba. A stíluslapok és szkriptek fogják használni. title Egy címet ad az elemnek. Alternatív megjelenítésre használja a nyelv, pl. ha az egér mutatóját az elem fölé visszük, megjeleníti ezt a sztringet. 13

14 eseménykezelők Ilyenek a JavaScript eseménykezelői mint az onload, onclick, onmouseover, onfocus, stb. style Egy helyi stílust rendel az elemhez. A stíluslapoknál tárgyaljuk. dir Milyen irányban kell az elem tartalmát kiírni. Európai nyelveknél ez bal-jobb, de a hébernél már jobb-bal, értékei: ltr, rtl (balról jobbra és jobbról balra). lang Milyen nyelven íródott az elem tartalma, pl; hu Pl.: <p id="elso" class="kiemelt" title="kiemelt paragrafus" onmouseover='javascript:fuggveny();' >Szöveg</p> Bizonyos elemekre ezek a tulajdonságok nem alkalmazhatóak ilyenek pl.: applet, head, script, style, frame, title Megjegyzések A megjegyzéseke a <!-- és --> nyitó/záró jelek közé írjuk. Ezeket a böngésző megjelenítéskor gyakorlatilag átugorja. <!-- megjegyzés --> 1.3. Fontosabb blokk elemek HTML címke Jelentése Tulajdonságok <p> paragrafus align=[left, right, center] <h1>,<h2>,...,<h6> align=[left, right, Címsorok (heading): hat címsor létezik a HTMLben. Egy példát a megjelenítésükre a táblázat végén center] látunk. <pre> Preformatált szöveg. A böngésző ezt általában egy width=[méret] fix szélességű fonttal jeleníti meg, nem alkalmazza a HTML szövegre jellemző elválasztók kiemelését a szövegből, az újsor karakterek helyén sort tör. <code> Programok forrásszövegének megjelenítésekor használjuk. Helyette inkább a <pre> a javasolt. <hr> Egy vízszintes vonalat rajzol a böngésző ablakra, mint elválasztó blokk elem. <addresss> A dokumentum szerzőinek kapcsolattartó információt lehet ezzel megjeleníteni. width=[méret] <blockquote> Idézetek megjelenítésére használjuk. Például a címsorok implicit megjelenítése az alábbi (block.html részlete): 14

15 <h1>sejtettem, adni.<h1> <h2>sejtettem, adni.<h2> <h3>sejtettem, adni.<h3> <h4>sejtettem, adni.<h4> <h5>sejtettem, adni.<h5> <h6>sejtettem, adni.<h6> hogy a legmeglepőbb eredményt a szimpátiateszt fogja hogy a legmeglepőbb eredményt a szimpátiateszt fogja hogy a legmeglepőbb eredményt a szimpátiateszt fogja hogy a legmeglepőbb eredményt a szimpátiateszt fogja hogy a legmeglepőbb eredményt a szimpátiateszt fogja hogy a legmeglepőbb eredményt a szimpátiateszt fogja 1.4. Szövegek megjelenítése A szövegek és azon belül kiemelt szavak, betűk megjelenítéséhez sorközi (inline) elemeket használunk. Ezek egy része csak betűket formáz (pl. a kiemelések), egy másik részének a szövegen belüli szerepet is jelöli (pl. a <cite>). Valamennyi elemnek van egy implicit megjelenítése amellyel egyszerű oldalak formázhatók. Bonyolultabb megjelenítés esetében mindegyiknél stíluslapot is használunk. Az alábbi elemek mind sorközi, inline elemek, és ilyenként tartalmazhatnak más inline elemet, de nem tartalmazhatnak blokk elemeket. HTML címke Jelentése Tulajdonságok <b> Félkövér kiemelés. <i> Dőlt betű. <strike> Áthúzott szöveg. <small>, <big> Kisebb, nagyobb karakterre váltás. 15

16 <sub>, <sup> Alsó illetve felső index kiírása. <font> A betűtípus illetve tulajdonságainak megadása. Ez egy elavult elem, ma már szinte egyáltalán nem használjuk. A betűk formázását egyértelműen stíluslapokkal oldjuk meg. <em> Emphasis: kiemelést valósít meg. <cite> Idézetet, referenciát tartalmazó szövegrész. <strong> Erős kiemelés a szövegben. <abr> Rövidítések, betűszavak megjelenítése. <bdo> A szöveg kiírásának irányát befolyásoló eleme. face=[font neve] size=[méret] color=[szín] dir=[ltr; rtl] Megadunk egy rövid példát használatukra, egy hosszabb szöveget is tartalmazó példát a szovegformazo.html állomány megjelenítésével lehet megnézni. <p><em>em</em> <cite>cite</cite> <strong>strong</strong> <b>b</b> <strike>strike</strike> <big>big</big> ^sup _sub <abbr title="internet Engineering task Force">IETF</abbr> </p> Megjelenítése: Valamennyi formázást, amelyet ezek az elemek elvégeznek meg lehet oldani stíluslapokkal, és ekkor kezelésük rugalmasabb. Mégis jó tudni, hogy stíluslapok nélkül is lehet megfelelően formázni egy szöveget. Használatuk nem kötelező, magát a szöveget pl. a paragrafus is megfelelően formázza. A szövegen belüli sortörést ha szükséges a <br> elemmel lehet megoldani (ez hasonló a szövegszerkesztők szoft új sorához). A <br> elem csak nyitó címkével rendelkezik. Egy tulajdonsága van, a clear=[left; all; right] amely lefelé mozgatja a szövegben lebegő objektumokat, pl. képeket. A <br> használata nem javasolt, ha lehet a töréseket paragrafusokkal kell megoldani. 16

17 1.5. A horgony elem A horgony (anchor) <a> elemmel hipertext hivatkozásokat (link-eket) adhatunk meg. Fontosabb tulajdonságai: href A hivatkozás webcímét adjuk meg (a wbcímmel kapcsolatosan lásd az URI és URL fogalmát a HTTP protokoll tárgyalásánál). rel Milyen a viszony a hivatkozó és hivatkozott dokumentum között (értékei: alternate, stylesheet, start, next, prev, contents, index, glossary, copyright, chapter, section, subsection, appendix, help, és bookmark ). rev Milyen a fordított viszony (értékei: ugyanazok). type milyen a cél dokumentum MIME típusa. MIME: Multipurpose Internet Mail Extensions - mivel a HTTP protokollnak különböző adattípusokat kell átvinni a hálózaton, pl. egy állomány átküldésekor a fogadó félnek tudnia kell, hogy az állomány mit tartalmaz. Az állomány típusokat standardizálták egy kétszintű kategória rendszerben. Így pl. az image/jpg MIME típus azt jelenti, hogy a hivatkozott dokumentum kép, és azon belül JPG típusú. target milyen keretben akarjuk megnyitni a hivatkozást. Az értékben egy keretnevet kell megadni. Egyszerű, keret nélküli weblapoknál az alábbiakat használhatjuk: _top (a teljes eredeti ablakában a weblapnak - keretek esetén ez általában fel van osztva), _blank (új ablak), _self (ugyanabban a keretben ahol a referencia van). Példák: <a href=" <a href="orarend.php#informatika">informatika órarend</a> <a href=" target="_blank">google</a> Látható, hogy a referencia lehet relatív illetve abszolút. Az URI protokoll séma részében nyilván más is megadható mint http. Például egy címre így hivatkozunk: <a href="mailto:idelehetspamelni@sapientia.ro>hamis cím</a> Hivatkozások más elemeken keresztül A hivatkozások megadásához más elemeket is használhatunk egyszerű szövegen kívül, pl. képeket: <a href="vizeses.html> <img src="vizeses.jpg" </a> border="0" alt="vízesés az alpokban"> Hivatkozások ugyanabban a dokumentumban Amennyiben ugyanazon dokumentum egy pontjára akarunk hivatkozni a HTML dokumentumban, akkor az URL dokumentumon belüli mutatóját kell használnunk (az URL fragment nevű része). Ehhez, egy horgonnyal meg kell jelölnünk azt a helyet a dokumentumban ahova a hivatkozásunk 17

18 mutat majd, és azt a nevet kell majd felhasználni a hivatkozásban: <a name="elso">itt valamilyen HTML elem vagy szöveg áll</a> <!-- itt egy hosszabb HTML szöveg áll --> <a href="#elso">ugrás a dokumentum első részéhez</a> A #nev része lehet egy teljes URI-nek is, például egy másik HTML dokumentumban a: <a href="vizeses.html#elso">első vízesés</a> referencia azonnal vizeses.html dokumentum elso -nek bejelölt eleméhez ugrik Képek és multimédia objektumok Képek Képeket az <img> elemmel adhatunk meg. A leggyakrabban használt kép formátumok a JPEG (Joint Photographic Experts Group, főleg fotók esetében használjuk), a GIF (Graphic Interchange Format) és a PNG (Portable Network Graphics). Az <img> elem csak nyitó címkével rendelkezik a HTML4-ben és inline elem. Az alábbi példa az <img> fontosabb tulajdonságait is tartalmazza: <img src="vizeses.jpg" border="0" alt="vízesés az alpokban" height="100" width="200" > Az alt tulajdonság egy alternatív címet tartalmaz, amely csak bizonyos esetekben jelenik meg (pl. ha a böngésző nem grafikus vagy ha az egeret a kép fölé visszük), a src a kép forrását tartalmazza (ez egy URI), a height és width a kép megjelenítésére szánt helyet (ha ezek nincsenek, akkor a kép teljes méretben jelenik meg) végül a border a kép köré húzott szegély vastagságát jelenti. A longdesc tulajdonság egy URI-t tartalmazhat, ahol részletes leírást kapunk a képről, ha van ilyen. Pl.: <img src="vizeses.jpg" border="0" alt="vízesés az alpokban" height="100" width="200" longdesc="vizesesleiras.html"> Ezenkívül létezik még két usemap és ismap tulajdonsága, amellyel a kép bizonyos területein hiperlink hivatkozásokat alakíthatunk ki. Az alábbi HTML (kepek.html): <img src="vizeses.jpg" <img src="vizeses.jpg" border="0" border="0" alt="vízesés az alpokban"> alt="vízesés az alpokban" height="100" width="100" border="1" > <p><img src="vizeses.jpg" border="0" alt="vízesés az alpokban" height="100" width="100" align="left">s ha ez így áll és így áll az esetek elsöprő többségében, azt gondolhatnánk, hogy mi sem egyszerűbb, mint ezen változtatni: demokráciában élünk, az iskola is demokratikus 18

19 intézmény, a tanárnak is, a diáknak is megvannak az ésszerű jogai, ha meg nincsenek meg, akkor harcolja ki, és nyerni fog, mert ma már ez alkotmányban rögzített jogunk, szóval elég, ha a tanár felkészült és nyitott, elég, ha nem adja meg, hogy egy kérdésre mi az egyetlen jó válasz, a diák gondolkodik, utánanéz, és kész, mindenki jól járt. <p> <p><img src="vizeses.jpg" border="0" alt="vízesés az alpokban" align="right" hspace="10" vspace="10" height="100" width="100">s ha ez így áll és így áll az esetek elsöprő többségében, azt gondolhatnánk, hogy mi sem egyszerűbb, mint ezen változtatni: demokráciában élünk, az iskola is demokratikus intézmény, a tanárnak is, a diáknak is megvannak az ésszerű jogai, ha meg nincsenek meg, akkor harcolja ki, és nyerni fog, mert ma már ez alkotmányban rögzített jogunk, szóval elég, ha a tanár felkészült és nyitott, elég, ha nem adja meg, hogy egy kérdésre mi az egyetlen jó válasz, a diák gondolkodik, utánanéz, és kész, mindenki jól járt. <p> így jelenik meg: Figyeljük meg a kép elem inline jellegét, valamint az, hogy amennyiben egy paragrafus szélén áll, akkor megjelenítéskor a paragrafus szövege körülveszi a képet amennyiben a kép align tulajdonságát használjuk. Azt mondjuk, a kép a szöveg mellett lebeg (a paragrafus blokk elemének helyét ismét a Webdeveloper programmal jelöltük ki). A második paragrafusnál a szöveg nem ér hozzá a képhez: itt ezt a hspace és vspace tulajdonságokkal értük el. Megjegyzés: a hspace, vspace, align tulajdonságok elavultak: ezeket stíluslapokkal oldjuk meg. Az alt helyett a title tulajdonságot ajánlott használni. A longdesc szintén elavult tulajdonság. 19

20 Külső objektumok A HTML oldalakba beilleszthetünk külső, nem HTML objektumokat. Ezeknek a böngésző egy megjelenítési területet biztosít (ez általában egy téglalap). Ahhoz, hogy egy ilyen külső alkalmazás fusson a böngészőben, a futtató "motor"-nak jelen kell lennie. Ezt a böngésző kiterjesztéseivel érik el (plugin). A mechanizmus bármilyen programnyelven futtatott alkalmazásra érvényes, ha megfelelő kiterjesztés csatolható a böngészőhöz: Flash, Java, Python, stb. A külső kód illesztéséhez használható ismertebb elemek: az <applet> (Java applet) és <object>. Az <applet> helyett is, a jövőben az <object> használata a javasolt. Az <object> inline elem, és fontosabb tulajdonságai az alábbiak: data=url az objektum adatait tartalmazó webcím classid=url osztályazonosító, amennyiben meg tudjuk ezt adni, pontosan behozható egy egyedi azonosítóval ellátott objektum. codebase=url a classid, data és archive attribútumok alapértelmezett helye. Ha ez a cím adott, a többi megadható relatív URL-el width=hossz height=hossz name=cdata type=tartalomtípus az objektum szélessége az objektum magassága az objektum neve az objektum tartalomtípusa, pl. application/x-shockwave-flash codetype=tartalomtípus standby=szöveg align=[top; middle; bottom; left; right] border=hossz hspace=pixel vspacepixel a kód tartalomtípusa a kód betöltődése alatt látható szöveg az objektum igazítása szegélyvastagság üres tér az objektum alatt fölött üres tér az objektum mellett Az <object> tartalmazhat más inline elemet, illetve <param> elemeket, amellyel a beillesztett objektum paraméterei adhatóak meg (lásd alább a példát). A <param> elemek olyan értékeket adnak meg amelyre az objektumnak szüksége van futás közben (name és value párok segítségével). A HTML másik külső objektum beillesztésére használható eleme az <embed>, amely nem standard elem. Pl. egy YouTube videót így illesztünk a dokumentumba (object.html): <object width="425" height="355"> <param name="movie" value=" </param> <param name="wmode" value="transparent"> </param> <embed src=" type="application/x-shockwave-flash" wmode="transparent" width="425" height="355"> 20

21 </embed> </object> Egy java applet illesztése a Sun cég weboldaláról pedig az alábbi: <object codetype="application/java" classid="clsid:8ad9c e-11d1-b3e f499d93" width="200" height="200"> codebase=" <param name="code" value="applet1.class"> </object> 1.7. Listák A listák egymással összefüggő felsorolásokat tartalmaznak. Általában két szinten definiáljuk őket: egy közrefogó elem segítségével, amely a lista típusát határozza meg és egy másik, a lista elemeit meghatározó elem segítségével. A három fontos listatípus: rendezett listák(ordered list), elem: <ol>, Közrefogott elem: <li> (list) rendezetlen listák (unordered list), elem: <ul>, Közrefogott elem: <li> definíciós listák (definition list), elem: <dl>, Közrefogott elemek: <dt> (definition term) és <dd> (definition description) A listák nagyon fontos elemek a HTML oldalak kialakításánál, mivel gyors áttekintést nyújthatnak egy-egy felsorolásról, ami a felhasználó számára gyors kiválasztást és továbbhaladást jelenthet. Így gyakran használjuk őket menük készítésére. Az alábbiakban bemutatjuk a listák egyszerű, implicit HTML megjelenítését, majd később a stíluslapokkal való formázásukat. A rendezett és rendezetlen listák A definíciós elem a rendezett listáknál az <ol> (ordered list), a rendezetleneknél az <ul> (unordered list). A listaelemeket a <li> elem illeszti a listába, tehát a <li> közrevett elem. Az <ol> blokk típusú elem. A <li> elembe inline és blokk típusú elemek is illeszthetők mint tartalom (tehát írhatunk egyszerű szöveget, de paragrafust is). A listaelemek számozásának típusát a type tulajdonsággal állítjuk be, a számozás indító pontját pedig a start tulajdonsággal állíthatjuk be (a start opcionális, és számot tartalmaz, még akkor is, ha a lista elemeinek sorrendjét betűkkel jelöljük, pl. start="3" ). A számozás az alábbi rendszerek szerint mehet rendezett listáknál: 1 a A i I Arab számokkal, tízes számrendszerben: 1, 2, 3, 4, 5,...) Latin kisbetűkkel: a, b, c, d, e,...) Latin nagybetűkkel: A, B, C, D, E,...) Római, kisméretű "számokkal": i, ii, iii, iv, v,...) Római, nagyméretű "számokkal": I, II, III, IV, V,...) 21

22 Rendezetlen listáknál a type paraméter értéke: disc (teli kör) square (teli négyzet) circle (üres kör) A definíciós listák A listát megadó elem a <dl>. Közrefogott elemek: <dt> (definition term) és <dd> (definition description). Az alábbi HTML a három listatípust mutatja be (listak.html): <ol type="a" start="3"> <li>nagyon fontos </li> <li>fontos</li> <li>nem fontos</li> </ol> <ul type="square"> <li>nagyon fontos </li> <li>fontos</li> <li>nem fontos</li> </ul> <dl> <dt>rendezett lista</dt> <dd>a rendezett lista elemei meg vannak számozva valamilyen számrendszerben</dd> <dt>rendezetlen lista</dt> <dd>a rendezetlen lista elemei csak kis körökkel, négyzetekkel vannak bejelölve.</dd> </dl> Implicit megjelenítésük az alábbi, ahol ismét bejelöltük egy vékony vonallal a blokk elemek határait: 22

23 1.8. Táblázatok A táblázatok sor/oszlop elrendezés szerint jelenítenek meg tartalmakat. A fontosabb felépítő elemek az alábbiak: <table> - magát a táblázatot definiálja <tr> (table row) a táblázat egy sorát definiálja <th> (table heading), <td> (table data) - a táblázat egy celláját definiálják, a heading cellák fejléceket jelentenek, a data cellák valamilyen tartalmat. A fenti három elemből már összeállítható egy egyszerű táblázat: <table border="1"> <tr> <th>jegyek</th> <th>labor</th> <th>házi</th> </tr> <tr> <td>diák1</td><td>6</td><td>6 </td> </tr> <tr> <td>diák2</td><td>8</td><td>8 </td> </tr> <tr> <td>diák3</td><td>8</td><td>6 </td> </tr> </table> A <table> elem fontosabb tulajdonságai: 23

24 cellpadding=hossz két cella közti távolság cellspacing=hossz a cella széle és tartalma közti kitöltés border=hossz a keret vastagsága, border="1" (pixelben) bgcolor=szín a háttér színe, pl. bgcolor=#ff0000 width=hossz a táblázat szélessége align=[left, right,center] a táblázat vízszintes igazítása (elavult tulajdonság) A fenti példában a border tulajdonságot használtuk, és megadtuk, hogy 1 pixel szélességre álljon be. -A <td> elem néhány tulajdonsága: rowspan=szám A táblazat celláit össze lehet vonni (merge). Ezzel a számmal azt adjuk meg, hogy egy cella hány sorra terjedjen ki. Pl. rowspan="2" azt jelenti, hogy ez a cella 2 egymás alatti sorra terjed ki. A sorokon át terjedő cella HTML kódja: <td rowspan="2" align="center">6</td> colspan=szám Ugyanaz a tulajdonság, csak oszlopokra vonatkoztatva. Pl. colspan=2 esetében a cellánk 2 oszlopra terjed ki. Tehát abban a sorban ahol ezt megadtuk eggyel kevesebb cella lesz mint a többiben (mivel ez 2 oszlopot foglal el). 24

25 A két oszlopra kiterjedő cella definíciója: <td colspan="2" align="center">6</td> axis=cdata a fejléccella kategóriája align=[left;center; right; justify; char] A tartalom vízszintes igazítása: ezt a jelenlegi javaslat szerint inkább stíluslapból kell beállítani. valign=[top; bottom;middle; baseline] A cella tartalmának függőleges igazítása. A baseline közös szintre igazítja az egy soron kezdődő cellák szövegének kezdősorát. char=karakter Igazító karakter és igazító karakter eltolása. Az implicit igazító karakter a. (tizedes pont), de megadhatunk más karaktert is. Ha megadjuk a charoff igazítást egy számmal, akkor a szövegben szereplő első tizedes pont áll be erre a távolságra. charoff=hossz valign=[top; middle; bottom; baseline] Függőleges igazítás. width=hossz A cella szélessége pixelben. height=pixel A cella magassága pixelben. nowrap Sortörés tiltása. Használata nem ajánlott, mert ha túl hosszú a cella tartalma, furcsán széles táblázatok jelenhetnek meg. bgcolor=szín A cella háttérszíne. A <caption> elem magyarázatot fűz a táblázat mellé, az align=[top; bottom; left; right] tulajdonsága elhelyezi azt a táblázat valamelyik oldalán: <caption align="bottom">vizsgaeredmények</caption>. A táblázatok sorai illetve oszlopai csoportosíthatóak, és külön tulajdonságok adhatóak meg a csoportokra. A sorokat a <tbody>, az oszlopokat a <colgroup> és <col> elemekkel tudjuk csoportosítani. 25

26 A <thead>, <tfoot>, <tbody> elemekkel csoportosíthatóak a táblázat sorai. A fejléc (<thead> elemmel bejelölt rész) és lábléc része (<tfoot> elemmel bejelölt rész) folyamatosan megjelenik a táblázat görgetésénél, ha az egész táblázat nem fér el a böngésző ablakban. Ezzel a megjelenítést jobban lehet ellenőrizni. Függőlegesen a <colgroup> és <col> elemmel csoportosíthatóak az oszlopok. Ezekkel a megjelenítés helyét lehet ellenőrizni és tulajdonságokat lehet az oszlopcsoporthoz rendelni. A <colgroup> egy oszlop csoportot határoz meg. Az oszlopcsoport oszlopainak számát kétféleképpen adhatjuk meg: 1. a <colgroup> elem span tulajdonságával, pl. span=3 2. az elemen belül a <col> elem használatával A csopotosítás által közös tulajdonságokat tudunk megadni az oszlopoknak. Ennek legegyszerűbb használati módja a <colgroup> width tulajdonsága, amelyben megadhatjuk a csoport szélességét, HTML hosszban, pl. width="100", pixelben vagy width="20%" százalékban. A <col> elemmel a <colgroup> csoporton belűl adhatunk tulajdonságot egy-egy oszlopnak, vagy csoportosított oszlopoknak. Ezek a tulajdonságok felülírják a <colgroup> által megadottakat. A <col> is rendelkezik a span tulajdonsággal, valamint a width és align, valign tulajdonságokkal. Komplexebb táblázatok megadásánál a táblázat belsejében az elemeket az alábbi sorrendben kell megadni: <table>, <caption>, <colgroup>/<col>, <thead>/<tbody>/<tfoot> elemek (opcionális), bennük <tr> sorok <td> vagy <th> elemekkel. Az alábbi HTML: <table cellpadding="4" cellspacing="4" border="1" bgcolor="#98b8cf"> <colgroup style="background: green;"> </colgroup> <colgroup style="background: lightgray;" span="2" align="right"> </colgroup> <colgroup style="background: white;" span="3"> <col align="left"> <col align="right" span="2" width="100"> </colgroup> <thead> <tr> <th>jegyek</th><th>jelenlét</th> <th>labor</th> <th>házi</th> <th>terv</th> <th>vég</th> </tr> </thead> <tbody> <tr> <td>diák1</td><td>6</td><td>6</td><td>3</td><td>7</td><td>5.5</td> </tr> <tr> <td>diák2</td><td>8</td><td>8</td><td>3</td><td>7</td><td>6.5</td> </tr> </tbody> <tbody style="color:red"> 26

27 <tr> <td>diák3</td><td>8</td><td>6</td><td>1</td><td>7</td><td>5.5</td> </tr> </tbody> </table> így jelenik meg: A megjelenítéshez stíluslap információkat adtunk meg az elemek style tulajdonságában. Bár a táblázatot strukturáló elemnek kevés tulajdonsága van, a stíluslapok bőven pótolják ezeket, és gyakorlatilag minden ésszerű megjelenítést vezérelni lehet velük Keretek A keretek több részre oszthatják a böngészőablakot, amelyet egyébként a <body> elem foglal el. Mindegyik "keret"-ben egy külön HTML dokumentum jelenik meg. Használatukkal jelen anyagban nem foglalkozunk Űrlapok Az űrlapok a HTML által kialakított interfész beviteli elemeit biztosítják: a webalkalmazást kontrolláló adatokat ezeken keresztül küldjük a szervernek. Röviden bemutatjuk HTMl elemekből álló felépítésüket, a működésre visszatérünk a HTTP protokoll tárgyalásánál. A form elem A form elemet egy űrlap elemeinek körülzárására használjuk: <form action="szkript.php" method="post" enctype="x-www-form-urlencoded"> <label for="name">írd be a neved: </label> <input type="text" name="nev" value="" size="8" maxlength="100"> <label for="pwd">jelszó </label> <input type="password" name="pwd" value=""> <label for="go"> </label> <input type="submit" name="go" value="küldd!"> </form> A fenti űrlap 3 beviteli elemet tartalmaz, melyek típusa szöveg (text), jelszó (password) és submit (elküldő gomb). A <label> elem az űrlap beviteli elemei elé helyez el egy kis szöveget. A 27

28 böngésző ablakában ez így jelenik meg: A űrlap (form) elem tulajdonságai Tulajdonság Értékei action A fogadó szkript web címe, abszolút vagy relatív URL. enctype Az elküldött adatok kódolása a HTTP kérés törzs részében. A kódolási lehetőségek az alábbiak: 1. application/x-www-form-url-encoded Ez a standard kódolási forma (ha nem adunk meg semmit, ezt használja a böngésző). Az űrlap által küldött adatok név/érték párokban lesznek elküldve. A standard kódolásnál az alábbi formában küldi az adatokat: név1=érték1+értek2&név2= text/plain: A törzs rész tiszta szöveggel lesz elküldve. 3. multipart/form-data Több dokumentumot küld egymás után böngésző, köztük pedig egy elválasztó szövegsort. Így akár több dokumentumot, melyek MIME típusa különböző besorolhat egy HTTP POST kérésbe. Akkor fogjuk használni ha pl. állományokat töltünk fel. acceptcharset Karakter készletek felsorolása, amelyekkel a böngésző elfogadja az űrlap feltöltését. Értéke pl.: utf-8, iso method A küldésnél használt metódus: POST vagy GET. target Egy frame ablakot lehet ezzel megjelölni: ez lesz az az ablak ahova a szerver által adott válasz érkezik. Ez lehet a frame neve, illetve valamelyik cél az alábbi 28

29 Tulajdonság Értékei implicit értékek közül: _self, _parent, _top (sorrendben: ugyanaz az ablak ahonnan a kérést küldtük, annak szülője illetve egy új ablak). Általános id, name, class, style HTML tulajdonsá gok: event JavaScript események: onmouseover(), onsubmit(),... Milyen adatokat lehet bevinni és elküldeni a beviteli HTML elemekkel : -kis szöveg mezőket (név/érték) -rejtett mezőt -állományt -hosszabb szövegmezőt (textarea) -opciók közül kiválasztott adatot: -listából (select) -rádió gomb (radio) -jelölőnégyzet (checkbox) Az <input> elem HTML kód példa: <input type="text" name="kod" size="10" maxlength="10"> <input type="text" name="cim" size="30" maxlength="200"> <input type="file" name="uploaded" accept=".gif,.jpg"> Az input az űrlap általános beviteli eleme. Az elem type tulajdonsága adja meg a beviteli elem típusát. Az elem name tulajdonsága adja meg azt a nevet, amivel el lesz küldve a szerver oldalra. Az input típusától függően az elemnek más és más tulajdonságai is lehetnek. A típusok az alábbiak: text szövegmező, név/érték párok küldése a szerver oldalra password maszkolt szöveg jelszónak hidden rejtett mező file állomány feltöltése checkbox checkbox, "választónégyzet" radio rádiógomb, választógomb select választás, lenyíló lista submit űrlap elküldő elem 29

30 reset az egész űrlap elemeinek nullázására használjuk image gomb helyett képre kattintva indíthatjuk az űrlapot, action.x=100&action.y=35 paraméterek (kattintás helye a képen) is el lesznek küldve button <input type="button"> vagy: <button> </button> A button elem típusa lehet submit is, egy más HTML elemet fog körül, pl. egy képet. Úgy jelenik meg, mint a körülfogott elem, és úgy viselkedik, mint a type által megadott tulajdonsággal rendelkező input elem. Az alábbiakban bemutatunk néhány beviteli elemet. Egy minta űrlap amely minden alkalmazható beviteli mezőt tartalmaz így néz ki: A rejtett mezők A type tulajdonság értéke: hidden. A rejtett mezők nem jelennek meg a HTML oldal kiírásakor. Használatuk során a látható űrlapváltozókon kívül küldünk át és várunk vissza olyan változókat, amelyek valamilyen szekvenciát, előzőleg beküldött változókat vagy ellenőrző adatokat tartalmaznak. Pl.: <input type="hidden" name="action" value="finish"> A select elem A select elem egy kiválasztó listát generál. <label for="szinek">válassza ki a listából:</label> <select name="szinek"> 30

31 <option <option <option <option </select> value="piros" selected>első</option> value="kék">második</option> value="zöld">harmadik</option> value="sárga">negyedik</option> Az elküldött változó neve a szinek lesz, értékeit az option elemekben felsorolt listából: kék, zöld, sárga veszi. Az option elem selected tulajdonsága a megjelenéskor automatikusan kiválasztott listaelemet jelöli. A select elemnek (akárcsak a checkbox elemnek) megvan az a tulajdonsága, hogy egy név alatt több értéket küldhetünk be. Ebben az esetben be kell jelölnünk, hogy többszörös kiválasztót használunk, ezt a select elem multiple tulajdonságával tesszük. <select name="tomb[]" "multiple"> <option value="elso" label="a" "selected">elso <option value="masodik" label="b">masodik <option value="harmadik" label=c>harmadik </select> A jelölőnégyzet (checkbox) elem Az űrlapon több jelölőnégyzet esetén ezekből egyet sem, egyet vagy akárhányat választhatunk ki. Általános szintaxisa: <label for="negyzet">négyzet:</label> <input type="checkbox" name="negyzet1" value="1"> <input type="checkbox" name="negyzet2" value="2"> A négyzeteknek adhatunk más és más nevet, illetve ugyanolyan nevet mindkét négyzetnek, ebben az esetben: <label for="negyzet">négyzet: <input type="checkbox" name="negyzet[]" value="1"> <input type="checkbox" name="negyzet[]" value="2"> </label> Látható, hogy a második esetben HTML tömböt kell használni. A négyzet bejelölésekor a value tulajdonságban megjelölt érték lesz elküldve pl. a negyzet1 név alatt. Ellenkező esetben a negyzet1 változó nem lesz beállítva. A választógomb (radio) elem Ez az elem alternatív kiválasztásra szolgál, tehát több ugyanolyan nevű gomb esetén azokból egyet lehet kijelölni. Pl.: <span>válasszon egy színt</span> <label for="piros">piros</label> 31

32 <input type="radio" name="szingomb" value="piros" checked> <label for="kek">kék</label> <input type="radio" name="szingomb" value="kek"> A kiválasztott értéket a kliens a szingomb nevű POST változóban küldi. A textarea elem A textarea elem tulajdonképpen nem input elem, mert segítségével nem egy mezőt, hn. egy hosszabb szöveget lehet bevinni. Használata: <textarea name="message" Hosszú szöveg </textarea> rows="20" cols="10" wrap="virtual"> A böngésző ablakában az elem a rows és cols tulajdonsággal megjelölt sor és oszlopszámot foglalja el. A wrap tulajdonsággal a szövegsorok törésének (újsor bevitele) elküldését lehet kezelni. Ennek értékei a alábbiak lehetnek: wrap: virtual, soft phisical,hard off A virtual vagy soft beállítással az automatikusan bevitt sortörések nem lesznek elküldve, a phisical vagy hard beállítással pedig igen. Állományok feltöltése Állományok feltöltésére a file típusú input elemet használjuk: <input type="file" name="file1" <input type="file" name="file2" maxlength="100000"> maxlength="100000"> A maxlength tulajdonság jelzi a böngészőnek a feltöltött állomány maximális méretét, de hatása informatív. Mivel a feltöltött állományok mérete veszélyes lehet a webszerver működésére nézve, ezt szerver oldalon szokták korlátozni. Űrlapok tervezési kérdései -egymásutániság -csoportosítás logikailag -csoportosítás az interfészen (design elvek) -elhelyezés: táblázatok vagy abszolút/relatív pozíciók használata -a <fieldset> és <legend> HTML elemek használata -a <label> elem és a tabindex valamint accesskey tulajdonság használata A <fieldset> elem bemeneti elemek csoportosítására, a <legend> elem a csoportosított elemek közös nevének kiírására szolgál. A <label> elem kis szöveget rendel a bemeneti elemek elé. A tabindex tulajdonság bármely input elemre alkalmazható, értékként egész számokat kell megadni, pl. tabindex="1", 32

33 tabindex="2". Hatására a TAB billentyű többszörös egymásutáni lenyomására a kiválasztó kurzor a megadott sorrendben ugrál végig az elemeken. Az accesskey tulajdonsággal egy billentyűt rendelhetünk minden elemhez: annak és egy kontroll billentyű lenyomására a kurzor az illető elemre ugrik, így pl. accesskey="a". A kontroll billentyű böngészőként változik: Firefox AltShift, Explorer: Alt. Az accesskey tulajdonság az alábbi elemekre alkalmazható: <input>, <textarea>, <label>, <legend> és <button>. 33

34 2. A CSS stíluslapok 2.1. Bevezetés, CSS verziók A HTML kezdeti időszaka után a standardot készítők igyekeztek szétválasztani a dokumentum struktúráját és megjelenítéshez szükséges stílushoz kötődő információkat. Ezt egy új nyelv, a CSS Cascading Style Sheets segítségével tették (magyarul kaszkád stíluslapok, vagy rangsorolt stíluslapok). Az első verziót 1996-ban (CSS1), a másodikat 1998-ban (CSS2) tette közzé a W3C. Jelenleg a CSS2 az elterjedt, használt verzió. A CSS3 fejlesztés alatt áll. A CSS3 specifikációját modulokra bontották (külön specifikáció készül a szövegek, színek kezelésére, a pozicionálásra, táblázatok megjelenítésére stb.). Ezek fejlettségi stádiuma különböző. Jelenleg (2010) a CSS2 specifikációt minden böngésző implementálja. A CSS3 részben van implementálva Firefox, Opera utóbbi években megjelent böngészőiben illetve az Internet Explorer 8-as verziójában. Bár más stíluslap nyelv is létezik, HTML és XML megjelenítésekben a CSS a legelterjedtebb. A nyelv egyre bonyolultabb lett az évek folyamán, és ma már nemcsak képernyőn, hanem bármilyen eszközön (akár nyomtatott papíron is) a legigényesebb megjelenítésekre képes. Használatában mind a mai napig problémát jelent a különböző böngészők eltérő, nem egységes megjelenítése bizonyos esetekben. Ennek ellenére, az utóbbi években ezek a különbségek csökkenni látszanak. A mi bevezetőnk a CSS2 szabályait használja, és ezek közül is csak a leggyakrabban használtakat. Elsősorban ezek képernyőn történő megjelenítését tárgyalja A CSS szabályok megadása A CCS nyelv segítségével olyan információkat csatolunk a HTML dokumentumhoz, amelyekkel meghatározzuk az elemek megjelenítését. Ez vonatkozik részben a HTML elemek helyzetének megjelenítésére, valamint a megjelenítés milyenségére, mint pl. színek, betűk stílusa. A nyelvvel megjelenítési szabályokat lehet megadni. A szabályok kiválasztanak egy vagy több HTML elemet valamilyen szempont szerint, és azokhoz név-érték párokat rendelnek. A név-érték párok a megjelenítéshez szükséges tulajdonságokat deklarálnak. Pl. kijelenthetjük, hogy a paragrafusok szövege jelenjen meg piros színnel. Vagy a kis a betűt így jeleníthetjük meg:. Egy szabály általános szintaxisa: szelektor { deklaráció_lista 34

35 A deklarációlista egy { jelekkel határolt blokkban van és több, egymástól pontosvesszővel elválasztott deklarációt tartalmaz. Egy deklaráció általános alakja: tulajdonságnév : tulajdonság_érték A szabály a következőt fogalmazza meg: kiválasztok egy elemet vagy elemcsoportot, és hozzárendelek egy tulajdonságot egy bizonyos értékkel. Pl.: p { color: red ; A paragrafusokhoz színt rendelek (color tulajdonság) amelynek értéke piros, tehát így kell megjeleníteni őket. Vannak esetek, amikor a tulajdonság több érték felsorolásából adódik: h1 { border-top: thick dotted red ; A h1 elem margója vastag, pontozott, színe piros. A tulajdonságokat fel kell sorolni. A CSS jól meghatározott nyelvtannal rendelkezik, és hibás szabályok esetén figyelmen kívül hagyja a szabályt. Pl. a: p { color: dotted ; szabály a szín tulajdonsághoz egy pontozott vonal stílusát rendeli, amely értelmetlen. Amint az látható, a CSS szabályok kapcsos zárójellel vannak csoportosítva, ezeket deklarációs blokkoknak nevezzük. A deklarációs blokkok előtt egy un. kiválasztó vagy szelektor áll, jelen esetben egy p, ami megegyezik az elem nevével, amelyre deklaráció hivatkozik. A szabályok tulajdonképpen a nyelv utasításai. A szelektor-deklarációs blokk pár mellett, a nyelvnek van még egy szintaxisa utasítások megadására, az un. at parancsok. Ezek jellel kezdődnek és egy kulcsszóval folytatódnak. "style1.css" ; A CSS deklarációk utasításokat mindig pontosvessző zárja. Ennek hiánya értelmezési hibákhoz vezet. Gyakorlatilag az értelmezhetetlen szövegrészt ilyenkor elhagyja a böngésző A CSS szöveg megadása a HTML oldalakban A CSS deklarációkat több helyen lehet a HTML oldalba illeszteni. Az alábbi felsorolás nem csak ezeket a helyeket jelöli meg, hanem egy sorrendet is jelent: a nagyobb számozású csatolási mód erősebb deklarációt is jelent. Ha egy tulajdonságra két értéket is adtunk különböző helyeken, akkor az alábbi listában nagyobb számozású deklaráció az erősebb. 1. A böngészőnek van egy saját stíluslapja, ez az implicit megjelenítés. Ez adott. 2. A böngésző felhasználója deklarálhat egy saját stíluslapot. 35

36 a fenti két stíluslap tulajdonképpen a böngésző és a felhasználó beállításait jelenti. 3. A stíluslap beilleszthető egy külső webcímről a HTML lap fejlécében a <link> elemmel. Ilyenkor az illető állomány egy szöveg, amely CSS deklarációkat tartalmaz: <link rel="stylesheet" type="text/css" href="style.css" media="screen"> ha több ilyen link elemmel megadott stíluslap van, a későbbiek felülírják az előbbieket ugyanazokban a deklarációkban. 4. A stíluslap beilleszthető ugyancsak a fejlécbe a <style> elem segítségével: <style type="text/css" media="screen"> <!-p { color: red ; --> </style> Megjegyzés: mivel ilyenkor a CSS szöveg a <style> elem után bekerül a HTML szövegbe, régebbi böngészők miatt ajánlatos a CSS szöveget HTML megjegyzésbe tenni (XHTML esetében másként kell eljárni, lásd az XHTML szerkesztés szabályait). 5. Egy CSS szövegből (mint pl. a fenti <style> elemben levő CSS szöveg) külső állomány behívható az import utasítással: <style type="text/css" media="screen"> <!-@import url ( ) --> </style> Az importált stíluslapban levő deklarációk súlya nagyobb, mint a dokumentumba ágyazott stíluslapoké. 6. A deklarációk bekerülhetnek az elem style tulajdonságába, ennek a súlya a legnagyobb: <p style="color: red;">paragrafus</p> 2.4. Alapvető CSS adattípusok CSS hossz mértékek A CSS deklarációkban a hossz értékeket az alábbiak mértékegységekben adhatjuk meg: px pixel, pl. 1px 100px em arányos megadás a betűmérethez képest: 1.2em kiválasztott betűtípus méretének 1.2-szerese. ex arányos megadás a kiválasztott font kis x betűjét tekintve mértéknek, pl. 2ex a kis x kétszeres magasságát jelenti. 36 azt jelenti, hogy az éppen

37 cm, mm, in, pt, pica normál hosszmértékegységek: mm cm valamint tipográfiában használt mértékegységek: pt (point: 1/72 inch) és pica (1 pica=12pt) % Az éppen alkalmazott kontextus alapméretéhez képest százalékban megadott méret, pl. font-size: 120%; az éppen alkalmazott betűtípus méretéhez képest. h1 { margin: 10px; h2 { font-size : 2em; CSS színek A színeket a szín nevével, vagy numerikusan, a szín RGB kódjával adhatjuk meg, a numerikus megadásra is több forma használható. Névvel (a 16 HTML színnel): aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white és yellow. Numerikusan háromféleképpen adhatjuk meg: a. A három RGB szín hexadecimális kódjával, előtte egy # jellel, mint a HTML-ben, pl. a piros színt így adjuk meg: #ff0000. b. Rövidítve, szintén 3 számjeggyel úgy, hogy azok kettőzése jelenti a megfelelő hexa kódot, p. #fff, amely #ffffff -et (fehér) vagy #f00 amely #ff0000 -t jelent (pirosat). c. Az RGB kód megadható tízes számrendszerben is a következő jelöléssel: rgb (255,0,0). Pl. p { background : #ffffff ; h1 { color : rgb (255,255,0); h2 { color : #f00 ; 2.5. Külső URL-ekre való hivatkozás Vannak tulajdonságok melyek értéke megadható egy URL hivatkozással. Ez az alábbi módon történik: body { background-image : url ( "/images/hatter.gif" ); 2.6. CSS kiválasztók (szelektorok) A deklarációk szelektor része többféleképpen adható meg Az univerzális szelektor Mindent kiválaszt, az így megadott tulajdonság minden elemre érvényes. A * karaktert használjuk a megadásásra: * { color: red; 37

38 Az elem kiválasztó Egy elemhez rendel stílust: ez az elem bárhol fordul elő, megkapja a megadott tulajdonságot. h1 { font-family: Arial; A példa a h1 elemhez rendeli az Arial nevű betűtípus használatát Az azonosító kiválasztó (id) A HTML elemek id tulajdonsága alapján választ ki. Egy adott id-jű elemből egy HTML oldalon csak egynek kell lennie, tehát ez a kiválasztás precízen megcéloz egyetlen elemet. Az elem id-je elé a # szimbólumot kell tenni a szelektor megadásánál: #tartalom { background-color: yellow ; A HTML oldalon pedig kell szerepelnie egy elemnek, amely így azonosítható: <div id="tartalom"> <!-- itt jön az elem tartalma --> </div> Az osztály kiválasztó (class) Ez a kiválasztás a HTML elemek class tulajdonsága szerint szelektál. Mivel azonos osztályba több elem tartózhat, valamennyit megcímzi. Szimbólumként az osztálynév előtt a. -ot kell használni:.szines { color : green ; A HTML szövegben valamennyi elem amely a szines osztályba tartozik zöld lesz: <h2 class="szines">színes h2</h2> <p class="szines">színes paragrafus</p> Itt látható a CSS előnye a megjelenítés kezelésénél: ha egyetlen helyen megváltoztatjuk a tulajdonságdeklarációt (pl. green helyett red-et írunk) akkor az mindenhol érinti a szines osztályba tartozó elemeket. Az osztály és id kiválasztó specifikus megadása Ha olyan szabályt akarunk adni, amelyben a tulajdonság csak egy bizonyos típusú elemre vonatkozzon, ha ez egy osztály tulajdonsággal illetve id-vel van ellátva azt így adjuk meg: p.szines { font-size: 15pt ; p#tartalom { border: 1px; border-style: solid; A leszármazott kiválasztó Ezeket a szelektorokat kontextusbeli szelektoroknak is hívják, mert az elem HTML-beli helye szerint választja ki az elemet. A HTML dokumentum, mint bármely SGML alapú dokumentum úgy is felfogható, mint egy fa struktúra, amelynek gyökere a HTML elem, és benne az elemek egymást 38

39 tartalmazzák. A HTML-beli hely az elemek egymást tartalmazása szerint adható meg a legkönnyebben. A lépcső az eddig tárgyalt szelektorokból épül fel úgy, hogy felsoroljuk egy listában azt az egymásba ágyazási útvonalat, a melyre a szelektort deklaráljuk. Az általános képlet az alábbi, mondjuk 3 lépcső esetén: s1 s2 s3 { szabálylista Azaz: a deklaráció arra az s3 kiválasztóval rendelkező elemre érvényes, amelyik benne van egy olyan s2 kiválasztóval rendelkező elemben, amelyiket egy s1 elem tartalmaz. A tartalmazásnak nem kell egyszintesnek lennie: az s2 az s3 "fölött" bárhol lehet az elemek fájában. Kiválasztóként az eddig felsoroltak alkalmazhatóak, bármelyik közülük. Példák: p em { font-size: 14 pt; Azokra az em elemekre érvényes, amelyek egy p elemben vannak..szines p { font-size: 8px; Azokra érvényes, amelyek benne vannak egy olyan elemben, amely a szines osztályhoz tartozik. p.szines { border: 4px red; Azok az elemek amelyek a szines osztályhoz tartoznak, és egy paragrafusban vannak A csoportosító szelektor Ha több szempont szerint csoportosított elemnek adjuk meg ugyanazt a stílust, a szelektorok felsorolhatóak, vesszővel elválasztva: h3,h4,h5 { color: black; tehát mind a három elemhez hozzárendelem a fekete színt. A felsorolt szelektorok bármilyenek lehetnek az eddigiek közül: p.szines, h3#tartalom, h2 span { text-align: center ; Példák szelektorokra a szelektor.html állományban találhatóak. A fejlécben megadott <style> elem: <style type="text/css"> <!-p { color : red ; /* piros a paragrafus */.zold { color : green /* zold osztály */ #elso { color : yellow ; /*az elso id-jű elem */.zold p { color : gray ; /* paragrafus amelyet egy zold osztályú másik lem tartalmaz */ 39

40 p.zold { color: blue ; /* zold osztályú elm, amely egy paragrafustól származik */ p.bibor { color: purple; /* zold osztályba tartozó paragrafus */ h2 + h3 { color: maroon /* a h3 közvetlenül a h2 után jön */ p > cite { color: olive ; /* a cite közvetlen gyereke a paragrafusnak */ --> </style> és a HTML kód amelyre alkalmazzuk: <p>ez a pargrafus piros lesz</p> <p class="zold">ez a pargrafus zöld lesz</p> <p id="elso">ez a pargrafus sárga lesz</p> <div class="zold"><p>ez a pargrafus szürke lesz</p></div> <p>szöveg <em class="zold">ez a része kék lesz</em> </p> <p class="bibor">bíbor szöveg</p> <h2>h2 szöveg </h2> <h3>ez a h3 barna lesz, mert h2 után jön. </h3> <p><cite>hivatkozás szövege: olive</cite></p> A megjelenítés az alábbi lesz: 40

41 Más szelektorok A CSS más szelektorokkal is rendelkezik, amelyek elemek egymáshoz való viszonyán alapulnak. Az eddig ismertettek elegendőek egy átlagos weblap megtervezéséhez. Alább felsorolunk még lehetőségeket, a részleteket lásd a CSS2 referenciában. Gyermek szelektorok Azokra az elemekre alkalmazza a tulajdonságot, ahol érvényes a gyermek-szülő viszony, tehát a gyermeket közvetlenül a szülő tartalmazza. A kapcsolatot a > jellel adjuk meg: h1 > em { color: green ; Testvér szelektorok A két elem ugyanannak a szülőnek gyermeke, és az első közvetlenül megelőzi a másodikat. A tulajdonságot a második gyermekre alkalmazza a kiválasztó: h2 + h3 { font-size: 12pt; Attribútum szelektor Akkor választ ki, ha egy elem bizonyos attribútuma be van állítva. A szintaxis [] zárójelet használ erre. Az attribútum szerinti kiválasztás történhet az attribútum értékének vizsgálata nélkül (tehát az csak be van állítva) vagy annak ellenőrzésével. 41

42 h1[class] { font-size: 22px; érvénybe lép, ha a h1 elem class attribútuma be van állítva, h1 [class=focim] { font-family: Verdana ; ha a class attribútum értéke pontosan focim. Ezeket ritkán használjuk A látszólagos osztályok A szelektorok általában elemeket választanak ki. Vannak viszont olyanok is, amelyek egy elem egy részét (pl. egy szövegsor első betűjét vagy magát az elemet az állapotától függően válasszák ki. Ilyen pl. a horgony elemre alkalmazott látszólagos osztályok, amelyek a hivatkozás állapotától (hivatkozás, már látogatott hivatkozás, kiválasztott hivatkozás) függően választják ki az elemet: A:link A:visited A:hover A:active { { { { color: color: color: color: red /* blue /* yellow /* lime /* még nem látogatott link */ már látogatott link */ ha az egér mutatóját a link fölé visszük */ aktív - kiválasztott link */ 2.7. A CSS deklarációk prioritása Az alábbi példában megadunk két szabályt:.szines { color: red ; h2 { color : white ; és azt az alábbi HTML sorra alkalmazzuk: <h2 class="szines">címsor</h2> Látható, hogy konfliktus van az alkalmazásnál, a két szabály ellentétes színt ad meg. Ha megjelenítjük a szöveg piros színnel jelenik meg. Ilyenkor a CSS értelmező rögzített prioritások szerint dönt. Ebben a számításban figyelembe veszi azt, hogy a kiválasztás mennyire specifikus (specificity). A fenti példában a.szines egy osztálykiválasztás, amelyik specifikusabb mint egy elemkiválasztás. A prioritási szempontok: 1. Az általános kiválasztó nem specifikus (*) 2. A következő szint az elem kiválasztó (pl. p) 3. Egy osztálykiválasztó specifikusabb mint egy elemkiválasztó (pl..szines) 4. Egy id kiválasztó specifikusabb mint az osztálykiválasztó (pl #tartalom) 5. Ha a tulajdonság deklarációt az elem style attribútumában adjuk meg az a legspecifikusabb, pl. <p class="szines" style="color: yellow;">szines paragrafus</p> a yellow ilyen megadása felülírja az előzőeket. 42

43 A kiválasztást komplex szelektorok esetén a böngésző egy algoritmus szerint számolja ki, például ha egy szelektorban két osztálykiválasztó van felsorolva, akkor az specifikusabb mint az egy osztálykiválasztót tartalmazó szelektor: Az alábbi példában a szöveg zölden jelenik meg: <html> <head> <style type="text/css"> <!-.piros { color: red ;.szines.kiemelt { color : green ; --> </style> </head> <body> <div class="szines"> <h2 class="kiemelt piros">címsor</h2> <div> </body> </html> Itt a <h2> címsor egyszerre 2 osztályba tartozik, és mivel benne van egy olyan <div> elemben amelyik a színes osztályhoz tartozik, a második CSS deklaráció érvényesül. A két osztályhoz való tartozást az osztályok felsorolásával adjuk meg a class tulajdonságban. Az olyan szelektor pedig, amelyben egy osztály és egy id szelektor szerepel specifikusabb mint egy olyan szelektor amelyben két osztályszelektor szerepel. A CSS kaszkád elve A stílusok öröklődnek: a tartalmazott elemek átveszik azoknak az elemeknek a tulajdonságait amelyekben vannak. A CSS tulajdonságoknak nem mindenike öröklődik, de a nagy részük igen (ezek a részletek mindig megjelennek a tulajdonságok részletes leírásaiban a standardban). Például, ha megadjuk az alábbi kiválasztást: body {background-color: green; akkor minden <body> elemben található elem amelynek állítható a háttérszíne örökli a <body> zöld hátterét. A tulajdonságokat a CSS olyan sorrendben alkalmazza ahogyan az elemeket feldolgozza: így a későbbi, ugyanolyan súlyú deklarációk felülírják az előzőeket. Pl.: p { color: red; color: green; esetében a második deklarációt alkalmazza. Ennek ellenére, a szelektor specifikussága fontosabb, mint az a sorrend, ahogyan megjelennek. 43

44 Általános szabálynak tehát az alábbi kettőt kell mindig szem előtt tartani: 1. Az elemhez legközelebb álló definíció végzi a formázást. 2. A specifikusabb kiválasztás végzi a formázást A!important direktíva Ha mégis olyan helyzetünk van, ahol nehezen eldönthető, hogy melyik szabályt kell majd alkalmazni, van lehetőségünk egy olyan direktíva használatára, amelyik felülír minden prioritást, és a szabályt alkalmazza. p { color: red! important ; Az ilyen,! important kulcsszóval bejelölt deklarációk mindeneképpen alkalmazásra kerülnek A CSS szöveg írása Több szabály esetén a CSS szövegét megfelelően formázva is lehet írni, a könnyebb olvashatóság kedvéért. A megjegyzéseket úgy adjuk meg mint a klasszikus C nyelvben..szines { color: red #tartalom { font-family: Arial; font-size: 10pt; line-height: 1.2 em; /* a h2 címsor nagyobb betűkkel */ h2 { font-size: bigger; 2.9. A doboz modell A HTML elemeket a böngésző egy doboz-szerű területen jeleníti meg: A doboz területén a tulajdonképpeni tartalom körül három terület tulajdonságai állíthatóak: a 44

45 margó, (margin) a szegély vagy keret (border), és a kitöltés (padding). Két egymás mellé kerülő elem esetében a két szegély összeér, más terület nincs köztük. A margó átlátszó, a többi terület átveszi az elem háttérszínét, amelyik a background tulajdonsággal állítható be. A szegély színét és mintázatát külön formázhatjuk. A szegély, a margó és a kitöltés szélességére külön-külön CSS távolságokat adhatunk meg. Az elem szélességét (a content terület) a width és height tulajdonságokkal adhatjuk meg. Ezt a két tulajdonságot maximum/minimum vonatkozásban is meg lehet adni, ami nagy segítség egy-egy nagyobb tartalmazó doboz beállításánal. A tulajdonságok neve min-width, max-width illetve min-height, max-height. Ezek kényszerítik, hogy a doboz egy minimális vagy maximális szélességre illetve magasságra álljon be, tartalomtól függetlenül. A margó és kitöltés területeire beállíthatóak az alábbi méretek: margin-top margin-right margin-bottom margin-left padding-top padding-right padding-bottom padding-left. Valamennyi esetében egy CSS hosszat kell megadni. Ezt valamilyen mértékben (pixelben, relatív hosszat em vagy százalékban, vagy egy tipográfiai mértékegységben) : p {margin-top: 10px; 10 pixelre állítja az elem felső margóját. Mind a négy értéket egyszerre a margin tulajdonsággal állítjuk be: h1 { margin: 10px;; vagy: h2 {margin: 10px 5px 5px 5px ; /* a sorrend top right bottom left */ A szegélyre (border) külön megadható minden irányban a méret, szín és mintázat típusa. Az alábbi értékek állíthatók: szélesség: border-width szín: border-color stílus: border-style valamint csak a border tulajdonsággal mind a négy szegélyt egyszerre lehet állítani. A szegély színe, szélessége külön megadható mind a négy irányban a: border-top-width border-right-width border-bottom-width border-left-width, border-top-color, border-right-color, border-bottom-color, border-left-color 45

46 tulajdonságokkal. A szegély stílusát a border-style tulajdonság alábbi értékek határozzák meg: none : nincs szegély dotted : pontokból áll dashed : vonalakból áll solid, double : egy vagy két folyamatos vonalból áll groove, ridge : belevág vagy kiemelkedik a felületből inset, outset : a doboz olyannak tűnik, mintha besűlyedne vagy kiemelkedne a felületből A szegély szélességet a thin, medium és thick mértekkel is meg lehet adni. Az alábbi három paragrafus: <html> <head> <title>html elemek</title> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <style type="text/css"> <!-.elso { border: 1px gray solid ;.masodik { background : lightgray; border : 1px gray solid; padding : 8px;.harmadik { background: gray; padding: 0px; border 0px solid blue; margin 0px ; --> </style> </head> <body> <p class="elso">első paragrafus</p> <p class="masodik">második paragrafus</p> <p class="harmadik">harmadik paragrafus</p> </body> </html> így jelenik meg: 46

47 Mivel a paragrafus blokk elem, a dobozok a megjelenítő ablak jobb széléig tartanak Az elemek elhelyezése Az elemek elhelyezésének módja a megjelenített területen a HTML oldaltervezés alapja. A CSS ma már nem csak grafikus böngészőre, ha mindenféle egyéb eszközre is formáz, de mi csak ezzel foglalkozunk, tehát a böngészőablak lesz az a terület amin elhelyezzük az elemeket. A böngésző ezen a helyen dobozokat helyez el, és minden doboz a <body> elem leszármazottja (így ennek örökölhető tulajdonságait mindenki örökli). A display tulajdonság A normál elhelyezésben az elemek implicit blokk vagy sorközi elemek lehetnek, és ezeket így is jeleníti meg a böngésző. A megjelenítés módját módosíthatjuk a CSS display tulajdonságával, melynek fontosabb értékei: inline, block, list-item, run-in, inline-block, table (a display -nek jóval több értéke van, mi gyakorlatilag csak az inline és block lehetőségeket fogjuk itt használjuk ki). Ilyenkor az elem az alapértelmezett (HTML definíció vagy a böngésző stíluslapjában levő definíció) megjelenítési módból átvált a display tulajdonság szerintire. A display tulajdonság none értékére viszont az elem nem jelenik meg. Az alábbi példában a Második szó első előfordulásánál blokk kivetítés tulajdonságot kap: <p class="harmadik">első <em class="sorkoz">második</em> <strong>harmadik</em></p> <p class="harmadik">első<em>második</em><strong>harmadik</em></p>.sorkoz { border: 1px black solid; padding: 0px; margin:0px; display: block; 47

48 Az elemek egymás mellé kerülésének szabályai A blokkszintű elemek egymás alá kerülése Ha az elem blokk elem, akkor az előző elem alá kerül a böngésző ablakában. Függőlegesen ilyenkor az elemek közt a két elválasztó margin tulajdonságnak megfelelő távolság van. Blokk elemek a HTML meghatározás szerinti blokk elemek, vagy más elemek ha a display tulajdonságnak block értéket adunk (vagy list-item, compact, run-in értéket), de ezzel most nem foglalkozunk). Két egymás alatti blokk elem margin tulajdonságának 0-ra állításával az elemek szegélye (border) egymás mellé kerül. A sorközi elemek egymás mellé kerülése Ha az elemek inline elemek, ezek egymás mellé kerülnek vízszintesen. Ilyenkor az elemek úgynevezett sordobozokba kerülnek. Szövegek esetében, azok a szövegrészek amelyeket nem vesz körül külön sorközi elem un. névtelen sordobozokba kerülnek. Az alábbi példában az első és harmadik szó névtelen sordobozban kerül. <p>első<em>második</em>harmadik</p> A sorközi elemek tartalmi része egymás mellé kerül általában: ilyenkor a három állítható CSS tulajdonság implicit értéke 0px (border, margin, padding) és azok módosításával lehet távolságokat meghatározni A position tulajdonság A CSS az implicit egymásutáni doboz pozicionálást módosíthatja, erre a position és a float tulajdonságokat alkalmazza. A position tulajdonság a viszonyítási pontokat fogja megadni, azokhoz képest az elemet a top, bottom, left, right tulajdonság hosszértékekkel adjuk meg. A tartalmazó doboz fogalma Minden pozicionált HTML elem az őt tartalmazó doboz szerint kerül pozicionálásra. Minden elemet egy másik elem tartalmaz. A HTML fa gyökér eleme a <html>. Azt a dobozt, amelyik a pozicionálandó elemet tartalmazza, tartalmazó doboznak nevezzük. A position tulajdonság tulajdonképpen azt adja meg, hogy a tartalmazó dobozhoz képest hová kerül az elem. A tartalmazó doboz minden típusú pozicionálásnál más és más! A pozicionált elemnek nem kell feltétlenül a tartalmazó doboz belsejében lenni: kilóghat abból. A position tulajdonság értékei static - a statikus pozicionálás A doboz a normál, soron következő helyre kerül attól függően, hogy blokk vagy sorköz elem. Ez az implicit érték, amit akkor látunk ha nem használunk CSS-t, és a dobozok egymás alá illetve mellé kerülnek. 48

49 relative - a relatív pozicionálás A relatív pozicionálás esetén az elem pontos helyre kerül, de ahhoz a helyhez viszonyítva, ahova normál kivetítés szerint került volna. Az eltolások amiket megadunk, a normál helyzetébe pozicionált doboz éleihez képest történnek. A következő doboz szintén a normál elhelyezés szerint kerül a helyére, helye nem módosul az előző relatív elhelyezése miatt. A relatív pozicionálás esetében a tartalmazó doboz az az elem ahová az elem a normál folyam során került volna. A tartalmazó doboz, normál helyzethez képest a a top, bottom, left vagy right tulajdonságokkal adjuk meg a távolságot. A top és left pozitív értékei esetén a távolság lefelé és jobbra nő, ugyanezen tulajdonságok negatív értékeire felfelé és balra távolodunk. Mivel ez a távolságokhoz kötött számítás a left és right értékekre is áll, konfliktus esetén az alábbi szabályt használja a böngésző: -ha a top és bottom-nak is abszolút érték van megadva, a top értéke elsődleges -ha a left és right is abszolút értéke van, a left mérvadó a balról jobbra nyelveknél, és a right a jobbról-balra nyelveknél absolute - abszolút pozicionálás Ennél a pozicionálásnál az elem tartalmazó doboza a legközelebbi olyan elem az ősök között amelynek a pozicionálása nem statikus (static). Tehát az első olyan elem doboza számít, amely tartalmazza azt a láncot amelyben a mi elemünk van, és nem implicit pozicionálású! Kell tehát vigyázni, ha egy elemet egy közvetlenül fölötte levőhöz képest kell abszolút pozicionálni, akkor a fölötte levő elem nem lehet implicit pozicionálású. Ha nincs ilyen elem, akkor a tartalmazó doboz a gyökér elem lesz, amely HTML esetén a <html>. Az említett tartalmazó dobozhoz képest az elem pontos helyre kerül, amelyet a top, bottom, left vagy right tulajdonságokkal adunk meg. Az ilyen módon elhelyezett doboznak nincs befolyása az utána következő normál elrendezésűekre, teljesen kikerül a normál elrendezésből. Pl. (absolute.html):.menu { position absolute; top 10px ; /* a doboz teteje 10 pixelre van az őt tartalmazó blokktól */ left 1px ; /* a doboz bal oldala 1 pixelre van az őt tartalmazó blokktól */ A vízszintes pozíciót befolyásoló távolságok abszolút pozicionálás esetén A vízszintes pozíciót egy elem esetén az alábbi tulajdonságok határozzák meg: left, marginleft, border-left-width, padding-left, width, padding-right, border-rightwidth, margin-right, right. Ezek összege a tartalmazó doboz szélességét kell adja. Negatív érték esetén, a tartalmazott elem szélesebb lehet, mint a tartalmazó doboz. A CSS több szabályt definiál, néhány közülük nem cserélt (non replaced - nem kívülről jövő) elemekre az alábbi szabályok érvényesek: -ha balról-jobbra nyelvekben a left értéke auto, akkor az elem bal széle arra a pontra kerül, 49

50 ahová normál folyam szerint került volna -ha a width értéke auto, akkor a left és right auto érték helyett 0 lesz, és az elem olyan széles lesz (szegéllyel együtt) mint a tartalmazó doboz -ha a left, right vagy width értéke auto, akkor a margin-right és margin-left auto tulajdonságai helyett ezek 0-ra állnak be -ha a margin-left és margin-right egyaránt auto értékű, akkor ezek egyformára állnak be, tehát az elem a tartalmazó doboz közepére kerül -ha ezek után még mindig van auto értékű tulajdonság, akkor az beáll akkorára, amennyit az említett távolságok összege szerint szükséges -ha minden távolságot explicit értékre állítunk, és a fenti összeg nem jön ki, akkor balról-jobbra nyelveknél a left tulajdonság módosul, úgy, hogy az összeg kijöjjön. A cserélt (replaced, pl. a képek) esetében ha az elem width tulajdonsága auto, akkor az elem a saját implicit szélességét veszi fel. Ezen kívül az elemek szélességét meg lehet adni min-width és max-width értékekkel. Ezeket az alábbiak szerint kezeli a CSS: -a width értékét kiszámolja a fenti szabályok szerint -ha a min-width értéke nagyobb mint max-width, akkor ezt átállítja min-width -re -ha a kiszámolt érték kívül esik az adott intervallumon, akkor átállítja úgy, hogy a két határ közt legyen A függőleges pozíció abszolút pozicionálás esetén A függőleges pozíciók esetében hasonló szabályok léteznek. fixed - rögzített pozíció A doboz a képernyőn rögzített helyre kerül, és nem mozdul el onnan a weblap lapozása esetén sem. Ilyenkor az elem tartalmazó doboza a megjelenítő grafikus ablak látható része, amit viewport-nak is neveznek. A top, right, left, bottom tulajdonságokat hosszértékekben kell megadni, és ezek a pozicionált elem tartalom oldalának távolságát jelentik annak a tartalmazó doboznak a szélétől, amihez képest pozicionáljuk. Példa a position.html állományban. Böngészőben működő CSS szerkesztővel változtatva, a második paragrafus pozíciója változtatható A lebegés és a float tulajdonság A fentieken kívül, a dobozt eltolhatjuk a annak a doboznak az egyik szélére, amelyben ki van vetítve. Ez különösen képek megjelenítésekor hasznos, de szövegek, vagy más tartalmak esetében is használjuk. Ilyenkor a doboz nem csak "lebeg" a sor szélén, hanem a sor többi tartalma körülfolyhatja azt. Mindezt a CSS float tulajdonságával állíthatjuk be. Ennek értékei left és right, azaz a doboz a sor bal illetve jobb oldalán lebeghet. A jelenlegi megoldásokban ez nem csak képekre működik, hanem szövegeket tartalmazó elemekre is (pl. <div> paragrafusokkal). Az alábbi példa (float.html) egy képet lebegtet egy <div> elembe került szöveg jobb oldalán. 50

51 A stílus rész: <style type="text/css"> <!-#doboz { position: absolute; /*a zold doboz abszolut pozicionalasu */ left: 30px; top: 30px; background: #BFFFBF; /* zold */ width: 350px; height: 350px; border: 1px; border-style: solid; padding: 10px; overflow: auto; /*ha a szoveg meghaladna a doboz meretet akkor gorgetheto lesz */.lebego { float: right; /*a kep jobb oldalon lebeg */ margin: 10px; /*az elem margoja 10 pixel */.kicsi /*ezek a paragrafus tulajdonsagai */ { font-size: 14pt; clear: right; --> </style> A HTML szöveg: <div id="doboz"> <p class="kicsi"> <img class="lebego" src="siraly.jpg"> Két témát ragoz az értelmiségi közbeszéd az utóbbi időben: az irodalom egyre súlyosabb térvesztése a társadalom minden szférájában az egyik, az oktatás (főként a felső-, de voltaképpen az egész) totális válsága a másik. Előbbitől főként a humán krecli hangos, utóbbiról ennek is, annak is, de inkább a természettudományoknak a kutatói/tanárai panaszkodnak. (Bodor Béla Megy a juhász gördeszkán, És, szám) </p> </div> És a megjelenítés: 51

52 A lebegő elem, amint említettük egy másik szövegdoboz is lehet (egy másik <div> elem). Ugyanakkor egyszerre akár két elem is lebegtethető egy doboz két oldalán. A lebegő elemekre a CSS néhány megkötési szabályt állít fel, mint az alábbiak: -Balra lebegő doboz esetén: a lebegő doboz bal külső éle nem eshet kívül a tartalmazó doboz bal élénél (hasonló szabály létezik jobb oldali lebegésre is) -Ha a kurrens doboz balra lebeg, és vannak a dokumentum folyamban előtte balra lebegtetett dobozok, akkor a kurrens doboz bal éle az előző doboz jobb éle mellé kerül ha egy szinten vannak, ha nem akkor a kurrens doboz teteje a megelőző doboz alsó éle alá kerül (hasonló szabály létezik jobb oldali lebegésre is). -Egy balra lebegő doboz jobb éle nem kerülhet jobbra egy ugyanakkor jobbra lebegő doboz bal külső élénél (hasonló szabály létezik jobb oldali lebegésre is). -A lebegő doboz teteje nem kerülhet magasabbra a tartalmazó doboz tetejénél. -Ugyanakkor a lebegő nem kerülhet magasabbra, mint az előtte generált bármilyen blokk elem vagy lebegtetett elem. -Ugyanígy nem kerülhet magasabbra mint az előtte létrehozott inline dobozok. -Ha egy balra lebegő doboz tartalmaz egy másik balra lebegőt, a doboz jobb széle nem nyúlhat át jobbra az őt lebegtető doboz szélén (hasonló szabály létezik jobb oldali lebegésre is). -Egy lebegő doboz olyan magasra pozicionálódik amennyire csak lehet. -A balra lebegő annyira balra kerül amennyire csak lehet (hasonló szabály létezik jobb oldali lebegésre is) A clear tulajdonság A lebegő elemek esztétikailag "kiegyensúlyozatlan" lapokat hozhatnak létre, mert az őket tartalmazó elemek nem mindig tartalmaznak normál elhelyezésű, ugyanolyan magas elemeket mint a lebegők. Kiegyensúlyozatlanság alatt azt értjük, hogy pl. a tartalmazó doboz háttere nem kerül be 52

53 a lebegők alá. Ennek megoldására használható a clear tulajdonság, amelyet egy, a lebegőkön és tartalmazó dobozon kívülre kell alkalmazni. Az alábbi példa (clear.html) bemutatja lebegés során felmerülő háttér problémát. A CSS rész: <style type="text/css"> <!-#doboz { width: 350px; /*height: 250px;*/ /* ezt nem adjuk meg! */ border: 2px red solid; background: #BFFFBF; /* zold */ /*overflow: auto;*/ /* lasd alabb, hogyan kezelhetjuk ugyanezt overflow-val */.clearer { clear: both; background-color: maroon; #elso { float: left; margin: 5px; width: 40%; background: #d3dede; padding: 5px; #masodik { float: right; margin: 5px; width: 40%; background: #d3dede; padding: 5px; #code { position: absolute; left: 400px; top: 0px; /*font-size: larger;*/ --> </style> A HTML rész: <div id="doboz"> <p id="elso"> A magunk lelte magyarázatok általában jobban meggyőznek bennünket, mint azok, amelyek másoknak jutottak eszükbe. </p> <p id="masodik"> 53

54 A folyók mozgó utak, amelyek célunkhoz vezetnek bennünket. </p> <div class="clearer"></div> </div> És a megjelenítés, bal oldalon a clear használatával, jobb oldalon a clear nélkül: Látható, hogy jobb oldalon a tartalmazó doboz háttere (mivel ennek nincs "tartalma" és nem adtuk meg a magasságát) nem jelenik meg, a keret pedig nem veszi körül a dobozt. Az üres <div> elem clear tulajdonsága megoldja ezt (bal oldali ábra) Az overflow tulajdonság Az overflow tulajdonsággal egy olyan doboz viselkedését lehet kezelni, amelynek tartalma túlcsordulhat méretén. Értékei: visible hidden scroll auto Az első kettő a megjelenítést illetve elrejtést adja meg, a scroll tulajdonság görgetési lehetőséget állít be a doboz tartalmára, az auto pedig csak akkor jeleníti meg a görgetést, ha túlcsordulás van. Megjegyzendő, hogy a fenti, clear által megoldott helyzetet az overflow tulajdonsággal is lehet kezelni, ha annak auto értéket adunk a tartalmazó dobozban (ez a fenti példában megjegyzés formájában ott van) A z-index A CSS a dobozok elhelyezésében megkülönböztet úgynevezett "verem szinteket", tehát egy 54

55 függőleges elhelyezést is. Ilyenként, ha a dobozok ugyanazokra a pixel pozíciókra kerülnek, akkor egymásra tevődőeknek kezeli őket a megjelenítő. A z-index tulajdonság a dobozok helyzetét fejezi ki ebben a függőleges felosztásban. Implicit értéke 0 vagy örökölt az őt tartalmazó doboztól. Ha értéket valamilyen egész számra állítjuk, akkor "felsőbb szintre" kerül, és két egymást eltakaró doboz közül az fog látszani, amelyiknek az indexe nagyobb. Jól használni akkor lehet, ha dinamikusan tudjuk változtatni ezt a számot, ezt elsősorban JavaScript-el szoktuk tenni Színek és hátterek meghatározása Az előtérben használt színt (pl. szövegek) a color tulajdonsággal határozzuk meg, értékeit szín típussal adjuk meg (lásd színek megadása). A elemek hátteret background-color tulajdonsággal adjuk meg, melynek implicit értéke a transparent (átlátszó), egyébként egy színértéket kell megadni. A háttér formázását elvégezhetjük ezen kívül a background-image, background-repeat, background-attachment, background-position, és background tulajdonságokkal. A background-image értékei képek, amelyeket URI-vel adunk meg, pl. url(kep.jpg), ha nincs háttérkép, akkor értéke none. A background-repeat értékei: repeat repeat-x repeat-y no-repeat és a kép ismétlésének módját adják meg a háttéren. Alapértelmezett érték a repeat. A background-attachment értékei scroll vagy fixed lehetnek, és azt határozzák meg, hogy a lap görgetésénél a kép fixen áll vagy nem. A background-position a háttérkép kiinduló pontját határozz meg, és értéke két hossz érték vagy a top, center, bottom illetve left, center, right csoportok egy-egy kulcsszava lehet. Hosszértékek esetén a távolságok a bal felső saroktól lefelé és jobbra adják meg a kép távolságát. Például képet háttérként így adhatunk meg(background.html): body { background-image: url("vizeses.jpg"); /* a hatterkep */ background-repeat: repeat; /* ismeteld */ background-position: right; /*kezd jobbrol */ Megjelenítve: 55

56 A background rövidített tulajdonságnév, vele megadhatóak egyszerre a fent felsorolt background-* típusú tulajdonságok. A következő példában az első szabály csak a színt állítja be háttérnek, a többi tulajdonság alapértelmezett. A második szabály mindent beállít: #elso { background:red #masodik { background: lightgray url("vizeses.jpg") 50% repeat-x fixed; Fontok kiválasztása A fontok kiválasztása meglehetősen bonyolult - is - lehet, mert a CSS ma már gyakorlatilag bármilyen tipográfiai igényt ki tud elégíteni, a nyomtatóra, nyomdai munkára is lehet vele lapokat generálni. Alább néhány egyszerű elvet mutatunk be a képernyőre generált oldalak font kiválasztásáról. A font kiválasztásánál az alábbi tulajdonságokat kell megadni: 56

57 A font-family tulajdonság A betűtípus családját válassza ki, általában a font nevét kell megadni, mint: "Times New Roman", Arial, Verdana. (ha az érték több szóból áll idézőjelbe kell tenni). Ugyanakkor gyakran nem egy konkrét családot, hn. egy általános nevet adunk meg, amelyek arra vonatkoznak, hogy talpas, talpatlan vagy ugyanolyan széles fontokat válasszunk ki. Ezek az értékek: serif, sans-serif, cursive, fantasy, és monospace. pl. p { font-family: serif; h1 { font-family: Verdana, Arial; Felsorolás esetén a böngésző megpróbálja sorban az elsőt kiválasztani: ha nincs ilyen telepítve a gépre, akkor a következőt. A font-style tulajdonság A családon belül a font-style (stílus) tulajdonság adja meg, hogy a megjelenített szöveg normál, félkövér, kurzív stb. módokon jelenjen meg. Értékei: normal italic oblique Pl. p { font-style: italic ; A font-weight tulajdonság Ez a tulajdonság a font súlyát határozza meg, értékei: normal bold bolder lighter pl. p { font-weight: bold ; A font-size tulajdonság A font méretét határozza meg, és ezt többféleképpen adhatjuk meg. A méret jó kiválasztása még egyszerűbb weblapok esetén is elég fontos. A tulajdonságot az alábbi lehetőségekkel adhatjuk meg: abszolút méret értékei: xx-small x-small small medium large x-large xxlarge Két egymás utáni méret közt a faktor 1.2. p { font-size: x-small ; relatív méret A font-size tulajdonság a relatív méreteket az elem szülőjének fontmérete szerint határozza mag. Értékei: larger smaller 57

58 p { font-size: larger ; abszolút vagy relatív hosszérték Egy hosszértékkel adjuk meg a méretét. Ez lehet: -abszolút mértékegység (pixel: point :pt, pica: pc vagy cm, mm). -relatív mértékegység mint em, ex A pixelben megadott értékek követik a képernyő felbontását, így egy 12px-es font két ugyanakkora felületű, de más felbontású képernyőn a szem számára más méretű. A pt ben megadott fontoknak viszont ugyanakkoráknak kell lenniük. Az em relatív mértékegység a kiválasztott vagy örökölt fontmérethez viszonyít. százalék A százalék is a kiválasztott vagy örökölt fontmérethez viszonyít. Példák: p p p p { { { { font-size: font-size: font-size: font-size: 12pt ; 12px ; 200%; 1.2em ; /* /* /* /* 12 pontos */ 12 pixeles */ ketszer nagyobb mint az orokolt font */ 1.2 -szer nagyobb mint az orokolt */ Példa néhány kiválasztásra (font.html): Szövegek formázása A paragrafusok és egyéb elemek összefüggő szövegeinél a legfontosabb megadható tulajdonságok: A text-align tulajdonság Értékei: left right center justify A sordobozon belül balra, jobbra, középre igazítja a szöveget, a justify tulajdonság pedig megnyújtja a szöveget és kitölti vele a sordobozt. Öröklődik a tartalmazó elemtől. 58

59 A text-decoration tulajdonság A szöveg aláhúzását, áthúzását, villogását biztosítja. Értékei: none underline overline line-through blink A text-indent tulajdonság A szöveg első sorának behúzását határozza meg. Értékeit hossz értékekben kell megadni. A letter-spacing és word-spacing tulajdonság A szavak és betűk közti távolságot lehet ezzel változtatni. Értékei lehetnek a normal (ez a kiválasztott font által adott) vagy hosszértékek. A hosszértékek a normál távolsághoz adódnak, tehát: p { letter-spacing: 0.2em ; azt jelenti, hogy megnöveljük a betűk közti távolságot 0.2em-el. Néhány egyszerű példa és megjelenítése (text.html): <p style='text-align:right;'> A folyók mozgó utak, amelyek célunkhoz vezetnek bennünket.(textalign:right;)</p> <p style='text-decoration: underline;'> A folyók mozgó utak, amelyek célunkhoz vezetnek bennünket.(textdecoration: underline;)</p> <p style='text-indent: 5em;'> A folyók mozgó utak, amelyek célunkhoz vezetnek bennünket. (text-indent: 5em;)</p> <p style="letter-spacing: 0.3em;"> A folyók mozgó utak, amelyek célunkhoz vezetnek bennünket. (letter-spacing: 0.3em;)</p> <p style="word-spacing: 1em;"> A folyók mozgó utak, amelyek célunkhoz vezetnek bennünket. (word-spacing: 1em;)</p> 59

60 3. Sablonok és összetett weblapok tervezése Sok webprogramozási módszer használ sablonokat a HTML lapok kiküldésekor. A weblap általános kinézete, tartalmi felosztása szinte minden megjelenített oldalnál ugyanaz, vagy 2-3 tartalomtól függő HTML lappal megoldható. Ezek az egész HTML oldalstruktúrát tartalmazzák. A web alkalmazás programkódja ezeket küldi ki úgy, hogy a konkrét, kiválasztott tartalmat, szövegeket "beszúrja" a weblap egy-egy pontjára. A beszúráshoz a nyelvek különböző módszereket használnak. A PHP nyelv a nyelven belül is különböző megoldásokat, a Java a JSP lapokat. Ezért egy alkalmazás tervezésekor fontos a weblap általános struktúrájának és megjelenítésének kialakítása A navigáció tervezése A navigáció tervezése minden weblap esetében fontos. A felhasználó egy pillanatig sem maradhat útmutató nélkül: mindig evidensnek kell lennie, hogyan érhet el egy bizonyos tartalmat. Ezt menük kialakításával oldjuk meg, amelyekben a href elemet használjuk. A jó navigáció logikájának tervezése alkalmazás tervezési kérdés. Technikailag a struktúrát utána a kliens oldali elemekből, HTML és JavaScript segítségével kell kialakítani. Egyszerű elemek használata A menük nagyon egyszerű elemekből is kialakíthatóak, mint a paragrafus vagy a táblázat. Bár a táblázatokat ma már nem ajánlott más célra használni, mint táblázatok megjelenítésére, erre a célra néha megfelelnek. Listák használata Sok esetben használunk listákat erre a célra, mert a lista önmagában tartalmazza a menü struktúrát. Ezért a CSS különböző formázási lehetőségeket biztosít, amelynek segítségével a megjelenítés tetszés szerint alakítható. A legegyszerűbb variáns tehát a lista egyszerű használata: 60

61 <ul> <li><a <li><a <li><a <li><a </ul> href="#1">menu href="#1">menu href="#1">menu href="#1">menu 1</a></li> 2</a></li> 3</a></li> 4</a></li> Ismét bejelöltük a listának, mint blokk elemnek a határát: látszik, hogy a teljes ablak szélességét igénybe veszi. Ha a width tulajdonsággal szélességet adunk meg neki, akkor a megjelenítést csak a szükséges területre korlátozzuk. A CSS különböző megjelenési lehetőségeket is biztosít a listáknak a list-style-type tulajdonsággal (ez általában alkalmazható felsorolásokra, nem csak listákra). Ennek értékei: disc circle square decimal decimal-leading-zero lower-roman upper-roman lower-greek lower-alpha lower-latin upper-alpha upperlatin hebrew none A none értékkel eltüntethetjük a listát jelölő szimbólumot. Az alábbi példában kis módosítással egy függőleges menüstruktúrát alakítottunk ki (a szegélyt csak a láthatóság kedvéért húztuk meg): CSS: <style type="text/css"> <!-#nav { width: 140px; list-style-type: none; border: 1px red ridge; #nav li { margin: 10px; #nav a { padding: 10px; border: 20px; --> </style> HTML: <ul id="nav"> <li><a href="#1">menü <li><a href="#1">menü <li><a href="#1">menü <li><a href="#1">menü </ul> 1</a></li> 2</a></li> 3</a></li> 4</a></li> 61

62 Vízszintes menüstruktúra kialakításához a listát a sajátos list-item kivetítés helyett inline módon jelenítjük meg, és a <li> elemeket balra egymás mellett lebegtetjük: CSS: <style> #nav { list-style-type: none; #nav li { display: inline; float: left; #nav a { padding: 10px; border: 20px; --> </style> HTML <ul id="nav"> <li><a href="#1">menü <li><a href="#1">menü <li><a href="#1">menü <li><a href="#1">menü </ul> 1</a></li> 2</a></li> 3</a></li> 4</a></li> Látszólagos elemek használata A hivatkozások dinamikussá tételére a CSS un. látszólagos elemeket használ. Amennyiben egy elemnek több állapota lehet, más és más megjelenítést rendelhetünk hozzá. Az <a> elemnek több állapota lehet, és ezektől függően egy hivatkozás hátterét más és más módon lehet megjeleníteni. A Ezek az <a> elem esetében: A:link A:visited A:hover A:active { { { { color: color: color: color: red /* blue /* yellow /* lime /* még nem látogatott link */ már látogatott link */ az egért mutatóját a link fölé visszük */ aktív - kiválasztott link */ Az alábbi példában ezt a lehetőséget is használtuk, valamint a menüpontok szélességének és köztes részének megfelelő távolságokat állítottunk be. A lista egy <div> elembe került, így bárhol elhelyezhető az oldalon. ul#menu { bottom: 3px; left: 10px; list-style-type: none; padding: 0px; margin:0px; #menu li { display: inline; 62

63 float: left; margin: 2px; font-size: 12pt; font-family: Verdana, Arial; text-align: center; width: 5em; ul#menu li a { text-decoration: none; background-color: #808000; padding-left: 5px; padding-right: 5px; color: #FFFACD; ul#menu li a:link { background-color: #F0E68C; color: #556B2F; ul#menu li a:visited { background-color: #FFA500; ul#menu li a:hover { background-color: #FF0000; <div> <ul id="menu"> <li><a href="#1">menü <li><a href="#2">menü <li><a href="#3">menü <li><a href="#4">menü </ul> </div> 1</a></li> 2</a></li> 3</a></li> 4</a></li> 3.2. A megjelenítés felosztása és a pozicionálás A weblap strukturális részeit a legmegfelelőbb <div> (division) elemekbe helyezni, mint tartalmazó dobozokba. Utána ezeket abszolút, relatív illetve fix pozicionálással úgy lehet elhelyezni, ahogy a lap esztétikai terve kívánja. A legtöbb esetben a dobozok többféleképpen is elhelyezhetőek, így a weblap kinézete utólag is alakítható, a nélkül, hogy hozzányúlnánk az őt kiíró programokhoz. Például egy weblap minimális területei az alábbiak: fejléc lábléc tartalom (központi rész) navigálást megoldó menük (legalább egy) esetleg: más reklámfelületek, opcionális részek Tekintsük csak a 4 legfontosabb elemet (fejléc, lábléc, tartalom, menü), és ábrázoljuk a következő HTML vázlattal. Az elemek egymás után kerülnek a normál folyamba, és valamennyit egy holder azonosítójú <div> elem tartalmaz: <div id="holder"> <!-- mindent ez tartalmaz --> 63

64 <div id="header"> <h1>fejléc tartalma</h1> </div> <div id="content"> <h1>tartalom</h1> </div> <div id="menu"> <ul> <li><a href="#1">menü <li><a href="#2">menü <li><a href="#3">menü <li><a href="#4">menü </ul> </div> 1</a></li> 2</a></li> 3</a></li> 4</a></li> <div id="footer"> <h1>lábléc tartalma</h1> </div> </div> <!-- holder vege --> Az első CSS változattal a tartalmazó holder elemet relatív pozicionáljuk (0 távolságra, csak azért, hogy hozzá viszonyítva lehessen abszolút pozíciókat megadni), megadjuk a szélességét (ami legyen pl. 800 pixel), és a két margóját auto-ra állítjuk (így középre kerül). Az elemeket bejelöltük színes háttérrel és vékony fekete szegéllyel. A CSS az alábbi: <style type="text/css"> <!-body { padding:0px; margin:0px; #holder { position: relative; top: 0px; margin-left: auto; margin-right: auto; width: 800px; #header { background: #CC9966; border: 1px solid black; #footer { background: #339999; border: 1px solid black; #content { background: #CCCCFF; height: 400px; border: 1px solid black; 64

65 #menu { /*position: absolute; left: 20px; top: 200px; */ border: 1px solid black; background: #CC6666; width: 150px; --> </style> Az első megjelenítés pedig: Amennyiben a menüt abszolút pozicionáljuk a tartalmazó elemhez képest, így: #menu { position: absolute; left: 20px; top: 150px; border: 1px solid black; background: #CC6666; width: 150px; ezt kapjuk: Ha a tartalom bal oldali kitöltését megnöveljük: 65

66 #content { background: #CCCCFF; height: 400px; border: 1px solid black; padding-left: 12em; /* helyet hagy a menu-nek, hatter marad */ padding-right: 2em; az alábbit kapjuk (ezúttal egy paragrafust is beírtunk a tartalmi részbe): Látható, hogy a weblap megjelenésének szerkezete alakítható, ha CSS-el támogatott elrendezést használunk. A fenti lappal további elhelyezések valósíthatóak meg. 66