1 WEBTECHNOLÓGIA II.

Átírás

1 1 WEBTECHNOLÓGIA II.

2 2 Tartalomjegyzék Webtechnológia II. jegyzet... 5 A HTML dokumentum felépítése ( 5 A HTML dokumentum címszintjeinek felépítése... 5 Bekezdések a HTML dokumentumban... 6 Kereszthivatkozások HTML dokumentumok között... 7 Karakterformátumok a HTML dokumentumban... 7 Képek elhelyezése a HTML dokumentumban... 8 Különböző listafomátumok a HTML dokumentumban... 9 A HTML formátum táblázatai... 9 A HTML dokumentumablak felosztása Kérdívek a HTML dokumentumban A HTML dokumentum egyéb elemei Dokumentumtípus-deklaráció CSS Beágyazott stíluslap Külső stíluslap Elemhez rendelt stíluslap Importált stíluslap Stílusok formátuma Kiválasztók (szelektorok) Elem kiválasztás Osztály alapú kiválasztás Azonosító alapú kiválasztás Bekezdések megjelenése Betűtípus Csoportos megadás Szöveg paraméterek Dobozok megjelenése Háttér... 21

3 3 Keretek Körvonalak Margók Kitöltés Listák megjelenése Listaelemek Linkekkel kapcsolatos látszólagos kiválasztók Dinamikus látszólagos kiválasztók Elemszerű látszólagos kiválasztók Első gyermek látszólagos kiválasztó Elem előtt és után További tulajdonságok A láthatóság tulajdonság A megjelenítés tulajdonság Megjelenítés letiltása Soron belüli megjelenítés Blokkban történ megjelenítés Kompakt megjelenítés Lista elemként történ megjelenítés Jelölként való megjelenítés Táblázatokkal kapcsolatos megjelenítések A pozícionálás és kapcsolódó tulajdonságok Pozícionálás tulajdonság Túlcsordulás tulajdonság A lebegés és törlése tulajdonságok JavaScript PHP Sztringek használata Sztring létrehozása idézőjellel Elágazások Feltételes kifejezések Az elseif szerkezet A switch szerkezet A while utasítás... 47

4 4 A do while ciklus A PHP függvényei I Beépített függvények: Példa beépített függvényekre PHP dátumkezelés Tömbök Tömbök inicializálása Tömbelemek bejárása Nem szekvenciális tömbök bejárása Tömbök rendezése Fájlműveletek Állományok megnyitása és bezárása Az fclose() függvény A fread() függvény Az fwrite() függvény Joomla Bővítménytípusok Joomla sablon készítés Előfelülteti felhasználói menü létrehozása A menüelemek korlátozása a felhasználói szint szerint Szerzők Szerkesztők Közzétevők... 73

5 5 Webtechnológia II. jegyzet A HTML dokumentum felépítése ( Minden HTML formátumú szövegfájl a <BODY> és a </BODY> utasításokkal közrezárt részében tartalmazza a megjelenítend részét. (A dokumentum-kereteket kivéve!) A <BODY BACKGROUND="fájlnév.kit" BGCOLOR="színkód" TEXT="színkód" LINK="színkód" VLINK="színkód" ALINK="színkód"> utasításban a dokumentumtörzsre vonatkozó fenti elírások is szerepelhetnek opcióként. A BACKGROUND="elérési_út/fájlnév.kit" opcióval a dokumentum hátteréül szolgáló fájlt jelölhetjük ki. Háttérszínt a BGCOLOR="színkód" opcióval kiegészített utasítással definiálhatunk. A dokumentumban a szöveg színét a TEXT="színkód" opcióval jelölhetjük ki. A LINK="színkód" opció a hivatkozások megjelenési színét határozza meg. A VLINK="színkód" pedig, a már bejárt hivatkozásokat jelölő színt határozza meg. Természetesen egyszerre több opció is szerepelhet - tehát nem kötelez egyik sem - a <BODY> utasításban, mint azt az alábbi példa mutatja: <BODY BACKGROUND="pelda3.gif" BGCOLOR="#FF3333" TEXT="#000099" LINK="#993399" VLINK="#009999"></BODY> A HTML dokumentum címszintjeinek felépítése A HTML formátumú szövegfájlban definiálhatunk címeket, ill. alcímeket hat szint mélységig. A legfels szintű címet a <H1 ALIGN="hely"> és a </H1> utasításpárral kell közrezárni. A második szintet a <H2 ALIGN="hely"> és a </H2> utasítások határolják, és így tovább a hatodik szintig... Minden szint más-más betűformátumban jelenik meg a dokumentumban, a böngészőprogram beállításától függen. A címek igazítását szabályozza az ALIGN opció, melynek lehetséges értékei: left, center, right. Amennyiben túl hosszú a cím, de egy sorosnak kell maradnia, akkor a NOWRAP opció megakadályozza a cím betördelését több sorba. Különleges címnek tekinthet a címszalag, melyet a <BANNER>, </BANNER> utasításpárral kell kijelölni. Tulajdonsága, hogy nem szkrollozódik a dokumentum többi részével ellentétben. A címek csak a szemlélő számára keltik a tagoltság érzetét, a valóságban nem tagolják fizikailag szakaszokra a dokumentumot. Ezt a tagolást a <DIV CLASS="osztály" ALIGN="hely">, </DIV> utasításokkal lehet meghatározni, ahol a CLASS opció sorolja a megfelel SGML osztályba a szakaszt, az ALIGN pedig a szakasz igazítási formátumát írja el. Az automatikus tördelést itt is megakadályozza a NOWRAP opció, ez esetben a szakasz tördelését a <P> vagy a <BR> utasításokkal lehet szabályozni.

6 <BANNER>Címszalag</BANNER> <H1 ALIGN="left">Legfels szintű címsor</h1> <H2 ALIGN="center">Második szintű alcímsor</h2> <H3 ALIGN="right">Harmaik szintű alcímsor</h3> <H4 NOWRAP>Negyedik szintű alcímsor</h4> <H5>Ötödik szintű alcímsor</h5> <H6>Hatodik szintű alcímsor</h6> <DIV ALIGN="center"> Ez egy szakasz, melyben a szöveg elvileg azonos módon - középre igazítva - kezelend. </DIV> Bekezdések a HTML dokumentumban Minden dokumentum, így a HTML formátumú dokumentum is, alapvetően bekezdésekre tagolódik. A HTML fájlban a bekezdések kezdetét a <P> utasítás jelzi a böngészprogram számára. A bekezdés a következő bekezdés kezdetét jelző utasításig tart, tehát nincs záróutasításpárja a bekezdés elemnek. A legtöbb böngészprogram két bekezdés között egy üres sort szúr be megjelenítéskor! 6 A bekezdés elem hordozhat magában a bekezdés stílusát meghatározó opciókat. A bekezdés igazítását a <P ALIGN="hely"> formájú utasítással szabályozhatjuk. Az automatikus tördelést a NOWRAP opció tiltja meg a böngészprogram számára. Amennyiben tördelhetetlen szóközt igényel a szöveg, akkor az egyszerű szóköz helyett alkalmazzuk a különleges karaktert. Amennyiben egy bekezdésen belül mindenképpen új sort szeretnénk kezdeni, akkor a <BR /> utasítást kell használni. (Nincs zárópárja!) Tabulátorok a HTML dokumentumban A HTML formátumú fájlban a tabulátor pozíciókat a <TABSTOP ID="azonosító"> utasítás jelzi. A szöveget a tabulátorpozícióhoz igazítani a <TAB TO="azonosító"> utasítással lehet. Ha még az igazítás formáját is meg kívánjuk adni, akkor a <TAB TO="azonosító" ALIGN="hely"> alakú utasítást kell használni, ahol left, center, right, decimal típusú tabulátorokat jelölhet a "hely" paraméter. (Tizedes tabulátor alkalmazásánál megadható a DP opcióval az a karakter, amelyhez az igazítás történjen.) Az alapértelmezett tabulátortávolságot <TAB INDENT="szám"> elem határozza meg. A tabulátorokat - a tapasztalatok szerint - még kevés böngészprogram tudja értelmezni, ezért a táblázat vagy elre formázott szöveg alkalmazása javallott a tabulátorok helyett... Az alábbi példa tartalmazza az említett tabulálási lehetségek egy részét: <P>Szöveg, <TABSTOP ID="elso">szöveg folytatás<tabstop ID="masodik">... <BR> <TAB TO="elso" ALIGN="center">Igazítás. <TAB TO="masodik" ALIGN="decimal" DP=",">48,125

7 <P><TAB INDENT=32> Az alapértelmezett távolság: 32. <BR><TAB>Ez a 32. karakternél kezddik. <BR><TAB>Ez pedig a 64. karakternél. Kereszthivatkozások HTML dokumentumok között 7 A legegyszerűbb esetben a hivatkozás az adott fájl egy távolabbi részére mozdítja a böngészablakot. A hivatkozás kezdetét a <A HREF="#jelz"> utasításnak a dokumentumban való elhelyezése jelzi. A hivatkozást a </A> utasítás zárja le. Ez az elempár közrezárhat szövegrészt, képet, stb. A közrezárt részt a böngészprogram a dokumentum többi részétl eltéren jeleníti meg (pl. aláhúzással, kerettel,...), az egérkurzorral fölé érve a mutató alakja megváltozik. Azt a részt (praktikusan: könyvjelzt), ahová a hivatkozás mutat a <A NAME="jelz"> és a </A> utasítások kell, hogy határolják. A legtöbb esetben a egy hivatkozás egy másik fájlra/dokumentumra mutat. A hivatkozás kezdetét ekkor a <A HREF="protokoll://elérési_út/fájlnév.kit"> utasítás jelzi, a hivatkozást ekkor is a </A> utasításelem zárja le. Mind a protokoll, mind az elérési út elhagyható, amennyiben azonos URL-en van a kiindulási dokumentum és a hivatkozott. A hivatkozott fájlnak e példában nincs külön névvel (könyvjelzvel) jelölt része. Működés szempontjából a fentebb leírtak vonatkoznak erre a hivatkozási formára is. A legbonyolultabb esetben a hivatkozás egy másik fájl valamely pontosan meghatározott részére mutat. A hivatkozás kezdetét a <A HREF="protokoll://elérési_út/fájlnév.kit#jelz"> utasítás jelzi, és a hivatkozást szintén a </A> elem zárja le. Ebben az esetben a hivatkozott fájl kell, hogy tartalmazzon egy olyan részt (könyvjelzt), ahová a hivatkozás mutat. Ezt a részt a <A NAME="jelz"> és a </A> utasítások határolják. Megjegyzés: Ha az <A HREF=...>, </A> utasításpár képet fog közre, akkor a kép szegéllyel jelenik meg, amely szegély letiltható az <IMG SRC=...> utasításban elhelyezett BORDER=0 opció alkalmazásával. A képekkel kapcsolatos egyéb hivatkozási lehetségeket lásd a képeknél. Az alábbi példadokumentum többféle hivatkozást tartalmaz: Karakterformátumok a HTML dokumentumban A HTML formátumú szövegfájlban is használhatjuk a szövegszerkesztkben megszokott karakterformátumokat. Az alábbi táblázat a formázás kezd és záróutasítása között a mintát is tartalmazza. Kezd elem Ilyen betűformátumot eredményez Záró elem <B> Félkövér betűformátumot eredményez </B> <I> Dltbetűs formátumot eredményez </I> <U> Aláhúzott formátumot eredményez </U> <S> Áthúzott formátumot eredményez </S> <TT> Fixpontos betűket eredményez </TT> <EM> Kiemeli a szöveget </EM> <CITE> Idézetekre használható </CITE>

8 8 <VAR> Változónevet jelöl </VAR> <STRONG> Ez is egy kiemelési lehetség </STRONG> <CODE> Kódoknál használjuk </CODE> <SAMPLE> Minták jelzésére használjuk </SAMPLE> <KBD> Billentyűfelirat jelzése </KBD> <BQ> Idézet megjelenítése </BQ> <BIG> Nagyméretű betűformátumot eredményez </BIG> <SMALL> Kisméretű betűformátumot eredményez </SMALL> <SUB> Alsóindexet eredményez </SUB> <SUP> Felsindexet eredményez </SUP> <BLINK> Villogó szöveget eredményez </BLINK> <FONT...> A részleteket lásd lentebb </FONT> A <FONT FACE="név" COLOR="színkód" SIZE="szám">, </FONT> utasításpárral direkt módon elírhatók a megjelen szöveg betűinek a jellemzi. A FACE opciót nem szokás használni, mert nem valószínű, hogy minden rendszerben rendelkezésre áll pl. az ARIAL CE FÉLKÖVÉR betűtípus. A COLOR opció pontosan meghatározza a megjelenítend szöveg színét. A SIZE opcióban egy számot megadva a betűméretet határozza meg direkt módon. (A SIZE opcióban eljeles szám is szerepelhet, ami az alapbetűtípushoz viszonyított méretet jelöl.) Az alábbi példadokumentumban elvileg meg kellene jelennie a fenti karakterformátumoknak (azért elvileg, mert a megjelen betűk formája a böngészprogram beállításaitól függen nagymértékben különbözhet): Képek elhelyezése a HTML dokumentumban A HTML formátumú dokumentumban képeket - grafikákat - is elhelyezhetünk. Az <IMG SRC="elérési_út/fájlnév.kit"> utasítás a szöveg aktuális pozíciójába helyezi a megadott képet. Ennél azért a legegyszerűbb szövegszerkesztő program is többet nyújt. A HTML dokumentum csinosítására is vannak a képek elhelyezésének finomabb lehetségei is. Ha ezeket mind kihasználjuk, akkor az utasítás a következképpen fog kinézni: <IMG ALIGN="hely" SRC="elérési_út/fájlnév.kit" HSPACE="vszám" VSPACE="fszám" WIDTH="szméret" HEIGHT="mmeret" UNITS="egység" USEMAP="#jelz" ISMAP ALT="szöveg">. Az ALIGN opció meghatározza a kép igazításának módját, lehetséges értékei: top, middle, bottom, left, right. A HSPACE a kép melletti vízszintes térközt, a VSPACE pedig a függleges térközt (ha úgy tetszik: margókat) határozza meg. A WIDTH a szélességét, a HEIGHT pedig a magasságát adja a képnek, az UNITS által meghatározott egységben (pixel vagy en).

9 Az ALT azt a szöveget adja meg, amelyet nem grafikus böngészk használata esetén meg fog jelenni a kép helyett. Különböző listafomátumok a HTML dokumentumban A HTML formátumú szövegfájlban használhatunk listákat is, amelyek szövegszerkesztőkbeli megfeleli a felsorolások és bajuszos bekezdések. A számozott bekezdések (felsorolások) megfelelője a számozott lista, az ún. "bajuszos" bekezdések megfelelje pedig a számozatlan lista. A harmadik lista típus pedig a leíró lista, ahol az egyes lista elemekhez tartozhat egy hosszabb leírás is. A számozott listát az <OL> és az </OL> utasítások közé kell zárni. A számozatlan listát pedig az <UL>, </UL> utasításpár közé. Mindkét típusú listában használhatjuk a listafejlécet, melyet az <LH> utasítás vezet be - az </LH> pedig zár! Mindkét listatípusban a listák sorai az <LI> utasítással kezdődnek - és nem használatos a lezáró párjuk! 9 A fentiekből következik, hogy a listasorok egy <LI> utasítástól a következő <LI> utasításig, ill. a lista záróeleméig tartanak. Számozott lista esetében a kezd sorszám közvetlenül megadható az <OL SEQNUM="szám"> formájú kezdutasítással. Másik lehetőség, hogy egy előzőleg definiált lista számozása folytatható az <OL CONTINUE> kezdőutasítás használatával. Egyébként az <OL> utasítás 1-tl kezdi a lista tagok számozását. A számozatlan listák kezdőeleme is hordozhat formázóinformációkat. Az <UL SRC="fájlnév.kit"> formájú utasítás például a listasort megelőző bajuszként a megadott képfájlt használja. Az <UL DINGBAT="karakter"> a megadott bajuszkaraktert alkalmazza. Az <UL WRAP="irány"> pedig többoszlopos listák esetén az igazítás formáját határozza meg. (A WRAP opció a horiz és a vert értékeket veheti fel. A számozatlan listák speciális - külön HTML utasításokkal létrehozható - fajtái a könyvtárlista és a menülista. A könyvtárlista típus a <DIR> utasítással kezdődik és a </DIR> utasításra végződik. A menülista pedig <MENU> és a </MENU> utasításokkal határolt. Ezek a listaformák a normál számozatlan listáktól mindössze annyiban különböznek, hogy a könyvtárlista tagjai 20 karakteresnél, a menülista tagjai pedig egy sorosnál nem lehetnek hosszabbak és nincs "bajuszuk". A leíró listát a <DL> és a </DL> utasítások közé kell zárni. A lista fejléc megadása azonos az többi listatípusnál látottal. A listák egyes alkotóelemeinek kezdetét a <DT> utasítás jelzi, az ehhez tartozó leírás kezdetét pedig a <DD> utasítás határozza meg. Nincs egyik utasításnak sem záró párja, ezért a lista tag a <DT> elemtől a <DD>-ig, a hozzá tartozó leírás pedig a <DD> elemtől a következő <DT>-ig tart. A HTML formátum táblázatai A HTML formátumnak ez az utasításcsoportja képes a legváltozatosabb szöveg-, és képmegjelenítési formák elállítására. A <TABLE> és a </TABLE> utasítások közé zárt részt tekintjük egy táblázatnak.

10 A táblázatnak a címét a <CAPTION> és a </CAPTION> utasítások között kell megadni. (Figyelem! Az így megadott cím nem a táblázatban, hanem eltte fog megjelenni!) A cím <CAPTION ALIGN="hely"> formájú megadással igazítható. 10 A táblázat minden sora a <TR> utasítással kezdődik és a következő <TR>-ig, ill. a táblázat végéig tart. Egy sor tartalmazhat oszlopfejléceket és adatokat. Az oszlopfejléceket a <TH> utasítás vezeti be és választja el egymástól. A táblázat adatcellái pedig a <TR>-rel megkezdett sorban egy <TD> utasítással kezdődnek és minden cella a következő <TD>-ig - ill. a következő sor elejét jelző elemig - tart, ahol értelemszerűen új cella kezdődik. Az oszlopfejléceknek és az adatcelláknak csak a kezdőutasítása használatos - habár van lezáró utasításuk is (</TH>, </TD>) -, mert a záróutasításuk elhagyható! A táblázat nyitóutasítása tartalmazhat a teljes táblázatra vonatkozó beállításokat: <TABLE BORDER="szám" ALIGN="hely" COLSPEC="oszlopjellemzk" UNITS="egység" NOWRAP CELLPADDING="pszám" CELLSPACING="kszám" BGCOLOR="színkód"> Ahol a BORDER opció a rácsozat szélességét határozza meg. (0 esetén nincs rácsozat.) Az ALIGN a teljes tábla elhelyezkedését határozza meg ( left, right, center lehet). A COLSPEC egy oszlop igazítását és szélességét adja meg. Egy oszlopra vonatkozóan egy betű és szám egybeírva (pl.: L12 C24 R10), melytől a következő oszlop értékeit egy köz választja el. Az UNITS a számokhoz tartozó mértékegységet jelöli ki (en, relative - oszlopszélességhez -, pixel). A NOWRAP opció a cellák szövegének tördelését tiltja le. Végül a BGCOLOR a táblázat háttérszínét határozza meg. A táblázat oszlopfejlécei nem csak a legfelső oszlopban szerepelhetnek, hanem a táblázatban bárhol (pl. sorok címeként is). Mind az oszlopfejlécekben, mind az adatcellákban használhatók a következő formázásra való opciók: COLSPAN="szám": Egyesít több egymással szomszédos cellát - vízszintesen. ROWSPAN="szám": Egyesít több egymással alatti cellát - függőlegesen. ALIGN="hely": Igazítja a cellák tartalmát - vízszintesen. Lehetséges értékei: left, center, right, justify, decimal VALIGN="hely": Igazítja a cellák tartalmát - függőlegesen. Lehetséges értékei: top, middle, bottom, baseline A HTML dokumentumablak felosztása

11 Egyetlen böngészőablakban több HTML dokumentum is megjeleníthet a <FRAMESET> és a </FRAMESET> utasításpár, valamint a szorosan kapcsolódó <FRAME> utasítás együttes használatával. 11 A <FRAMESET ROWS="oszlophatárok"> kezdőutasítással osztható fel a képernyő függőlegesen, a <FRAMESET COLS="sorhatárok"> utasítással pedig vízszintesen. Ahol az oszlop- és sorhatárok megadhatók képernyőpontban ill. százalékosan - vesszővel elválasztva -, a maradék képernyőterületre pedig a * dzsókerkarakter használatával lehet hivatkozni. Mivel vagy csak vízszintesen, vagy csak függőlegesen osztható fel a képernyő, ezért ha mindkét irányban osztott böngészőablak létrehozásához a <FRAMESET> elemeket egymásba kell ágyazni! Tehát például egy függőleges felosztáson belül kell vízszintesen elválasztott részekre tagolni egy oszlopot. A fenti módon definiált területekre a <FRAME SRC="objektum"> utasítás tölti be a megadott objektumot, mely objektum lehet egy teljes HTML fájl, annak egy maghatározott része, ill. egy kép. Az így kitöltend keretek viselkedését szabályozza az utasítás <FRAME NAME="név" SRC="objektum" SCROLLING="érték" MARGINWIDTH="szám" MARGINHEIGHT="szám"> alakú megadása. Az adott keretnek nevet ad a NAME opció, a szkrollozást letilthatja SCROLLING="no" kiegészítés (ezenkívül a yes és az auto értékeket veheti fel a SCROLLING opció), a MARGINWIDTH és a MARGINHEIGHT pedig a kereten belüli margók szélességét szabályozza. Például a fejlécben megadott <BASE TARGET="név"> utasítás a NAME="név" opcióval elnevezett keretbe irányítja a hivatkozásokat. Egyébként az <A HREF=...> utasítás is ismeri a TARGET="név" opciót. (A TARGET="_top" opcióval az egész böngészőablakot elfoglalja a hivatkozott dokumentum, tehát feloldja az ablak keretekre osztását!) Ha ezek egyike sem szerepel, akkor a hivatkozás a hivatkozó objektum keretében jelenik meg, felülírva azt! A <FRAMESET>, <FRAMESET> utasításpárral határolt területnek meg kell előznie a <BODY> utasítással kijelölt dokumentumtörzset! Sőt a egy <NOFRAMES> utasítással kell jelezni a dokumentum azon részének kezdetét, amelyet akkor kell a böngésznek megjelenítenie csak, ha nem ismeri a keretutasításokat. És csak ez a <NOFRAMES>-mel kezddő rész tartalmazhatja a <BODY> és a </BODY> utasításpárt. <FRAMESET ROWS=185,*> <FRAMESET COLS=185,*> <FRAME SRC=k08.gif SCROLLING=NO NAME="cimer"> <FRAME SRC=02.htm NAME="felepites"> </FRAMESET> <FRAMESET COLS=25%,*> <FRAME SRC=index.htm NAME="tart"> <FRAME SRC=13.htm NAME="keret" MARGINHEIGHT=10 MARGINWIDTH=10> </FRAMESET> </FRAMESET> <NOFRAMES> <CENTER> <BODY BGCOLOR="#FFFF00"> <FONT COLOR="#FF3333"> <H1>Sajnos ez a böngész nem támogatja a keretek használatát!</h1>

12 12 </FONT> </BODY> Kérdívek a HTML dokumentumban A HTML formátumú dokumentumban kérdőíveket is közzétehetünk, melyek feldolgozásához külön programot kell írni. A <FORM METHOD="mód" ACTION="elérési_út/fájlnév.kit"> és a </FORM> utasítások zárják közre a kitöltend kérdívet/űrlapot. Az opciókat ajánlott mindig megadni, már csak azért is, mert az ACTION határozza meg a feldolgozást végző programot, a METHOD pedig a kitöltött űrlap továbbítási módját a feldolgozó programnak. Lehetséges értékei: GET - az URL-ben, POST - adatcsomagban. Az alapértelmezés a GET, ami bizonyos veszélyeket rejt magában, mivel túl hosszúra nyúlhat az URL. A POST a biztonságosabb mód. Az <INPUT NAME="név" TYPE="típus" ALIGN="hely"> utasítással határozható meg egy kitöltendő űrlapmez. A NAME természetesen a mezőnév, amely alapján a feldolgozóprogram azonosítja a bevitt adatot. A TYPE pedig az adattípus, melyet vár a beviteli mez. Lehetséges típusok: TEXT - szöveg, PASSWORD - jelszó (nem jelenik meg bevitelkor!), HIDDEN - rejtett (ez sem jelenik meg), CHECKBOX - kapcsoló (több is kiválasztható egyszerre), RADIO - kapcsoló (egyszerre csak egyet lehet kiválasztani), RANGE - numerikus adat, FILE - csatolandó fájl, SUBMIT - adattovábbító gomb, RESET - inicializáló gomb, BUTTON - egyéb nyomógomb. Az <INPUT > utasításban további opciók is szerepelhetnek, a f opciók értékeitl függen: - A VALUE kiegészít opcióval megadott értéket veszi fel alapértelmezésként a szöveges vagy numerikus beviteli mez. - TEXT típusú mez esetén egy további opció, a SIZE="méret" opció határozza meg a beviteli ablak szélességét, a MAXLENGTH="érték" pedig a bevihet maximális szöveghosszt. - A CHECKBOX és a RADIO típusú mezk további paramétere lehet a CHECKED opció, mely bekapcsolja a kapcsolót - alapértelmezésként. - RANGE típusú mez esetén megadható az a tartomány, melybe a bevitt értéknek bele kell esnie, a MAX="maximum" és a MIN="minimum" további opciókkal. - A FILE típusú mezben megadott fájl az ACCEPT kiegészít opcióval megadott MIME módon csatolódik az elküldendő kérdívhez. (Megjegyzés: Egy Browse nyomógombbal támogatott fájlkeres-ablakból lehet a fájlt kiválasztani.) - A SUBMIT és a RESET gombokhoz tartozó kiegészít opció a VALUE="felirat", amely a gombok feliratát jelöli ki. Egyébként a SUBMIT gomb lenyomásának hatására küldi el az űrlapadatokat a kérdőív a feldolgozó programnak, a RESET gomb lenyomása pedig az alapértékekkel tölti fel a beviteli mezőket. Hosszabb szöveg bevitelére alkalmas a <TEXTAREA NAME="név" ROWS="magaság" COLS="szélesség" VALUE="szöveg">, </TEXTAREA> utasításpár, amely egy beviteli ablakot nyit a COLS-ban megadott szélességben és a ROWS-ban megadott sorban. A VALUE az alapértelmezésként megjelenítendőő szöveget adja meg.

13 13 Egy kérdésre adandó válasz egyszerű - menübl történő - kiválasztását teszi lehetővé a kérdőíven a <SELECT NAME="név" SIZE="sor">, </SELECT> utasításokkal létrehozott kiválasztásos menü, melynek menüpontjait az <OPTION> utasítással adhatjuk meg. A SIZE opció azt határozza meg, hogy hány sorban jelenjenek meg a választható menüpontok. Megadásával szkrollozható menüt kapunk. Elhagyása esetén, ún. legördülő menüből lehet választani. A MULTIPLE opció esetén több menüpont is kijelölhet egyszerre. Az <OPTION SELECTED> formájú utasítás adja meg az alapértelmezett választást!: <CENTER> <H1>Adatfelvételi lap:</h1> <FORM METHOD="post" ACTION="program.bin"> <INPUT TYPE="reset" VALUE="Alapértelmezés"> <P> Vezetékneve: <INPUT NAME="vezeteknev" TYPE="text" VALUE="Kovács" SIZE="25" MAXLENGTH="30"> Keresztneve: <INPUT NAME="keresztnev" TYPE="text" MAXLENGTH="50"> Férfi: <INPUT NAME="neme" TYPE="radio" CHECKED> N: <INPUT NAME="neme" TYPE="radio"> Kora: <INPUT NAME="kor" TYPE="range" SIZE="2" MIN="10" MAX="60"> <P> Érdekldési köre: Windows: <INPUT NAME="erdek" TYPE="checkbox" CHECKED> Win95: <INPUT NAME="erdek" TYPE="checkbox"> LINUX: <INPUT NAME="erdek" TYPE="checkbox"> OS/2: <INPUT NAME="erdek" TYPE="checkbox"> <P> <TEXTAREA NAME="egyeb" COLS="40" ROWS="4">Közlendők:</TEXTAREA> <P> Foglalkozása: <SELECT NAME="foglalkozas"> <OPTION>diák <OPTION>tanár <OPTION SELECTED>nyugdíjas <OPTION>egyik sem </SELECT> <P> Csatolandó fájl(ok): <BR> <INPUT NAME="fajl" TYPE="file"> <P> <INPUT TYPE="submit" VALUE="Elküldés"> </CENTER> </FORM> A HTML dokumentum egyéb elemei A máshová nem sorolható elemek egy csokrát lehet ezen az oldalon megtalálni:

14 Egy HTML formátumú szövegfájl a tartalmazhat megjegyzéseket. A megjegyzés egyik típusa a megjelenítendő megjegyzés, a <NOTE> és a </NOTE> utasításokkal közrezárva. 14 A HTML dokumentumban elhelyezhető olyan megjegyzések is, melyek sehol sem jelennek meg a dokumentum WEB-böngészővel történ megjelenítésekor. Viszont a fájl átszerkesztéskor segítségéül lehetnek a módosítást végzőnek. A megjegyzéseket a  utasítások között kell elhelyezni. Egy HTML formátumú szövegfájl a tartalmazhat lábjegyzeteket. Az <FN ID="azonosító"> és a </FN> utasítások között szerepel a lábjegyzet szövege. Az így definiált lábjegyzetszövegre hivatkozik a szövegnek az <A HREF="#azonosító"> és az </A> utasításokkal jelölt része. Amennyiben a megjelenítend szöveg formátuma pontosan olyan kell, hogy legyen, mint ahogy a HTML fájlban szerepel, akkor azt az elreformázott szöveget jelző utasítások közé kell zárni. Ezen utasítások a <PRE> és a </PRE>. A közéjük zárt szöveg pontosan annyi szóközzel, pontosan annyi sorban és olyan állapotban fog a dokumentumban megjelenni, mint ahogy azt a HTML fájl tartalmazza. E dokumentumsorozat példái is ily módon kerültek rögzítésre... A <PRE WIDTH="szám">, </PRE> utasításpár használatával egy tördeletlen szöveg az adott szélességben betördelhet. A szövegrészeket tagolás vagy esztétikai ok miatt vízszintes vonallal el lehet választani egymástól. Legegyszerűbb esetben a <HR> utasítás egy vízszintes elválasztó vonalat helyez el az adott ponton, a rendelkezésre álló szélességben. Ezt a durva megjelenítést lehet azért finomítani a <HR ALIGN="hely" WIDTH="hszám" SIZE="vszám" NOSHADE> alakú utasítással. Az ALIGN az igazítás helyét adja meg (left, right, middle). A WIDTH a vonalhosszt definiálja, a SIZE pedig a vonal szélességét. Mindkettt meg lehet adni képpontban, ill. a hosszt az ablakszélesség százalékában. A NOSHADE pedig térhatást (árnyékoltságot) tiltja le. A <NOTE> utasításhoz hasonlóan nincs különösebb hatása az <ADDRESS>, </ADDRESS> és a <CREDIT>, a </CREDIT> utasításpároknak sem. Az elbbi postai címet jelöl, az utóbbi pedig egy idézet forrását.  <NOTE>Ez itt egy jegyzet</note> Ehhez a sorhoz <A HREF="#az">lábjegyzet</A> tartozik. <HR WIDTH=50 SIZE=50> <PRE> Ez a sor sok közt tartalmaz. Ez pedig egy új sor, pedig nem elzte meg sem <P>, sem <BR> </PRE> <HR ALIGN="left" WIDTH=50%> <P> <HR NOSHADE> <P> <FN ID="az">Íme a fenti jelzéshez tartozó lábjegyzet</fn> A HTML és az XHTML közt gyakorlatilag csak formai követelmények vannak.

15 15 Dokumentumtípus-deklaráció <!DOCTYPE dokumentum-tipus> <html xmlns=" XHTML A DTD pontosan meghatározza, hogy milyen szintaktikai szabályoknak felel meg a dokumentum. Transitional Ez a típus a legmegengedőbb, legszabadabb, csak azért hozták létre, hogy egy kisebb, közbülső lépést tudjanak tenni a régi szokásokhoz képest. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " Frameset Egy másik ideiglenes változat kereteket használó oldalakhoz. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" " Strict A legszigorúbb változat, lényegében az újabb verziók ezt viszik tovább. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " XHTML 1.1 DTD A jelenleg használható legfrissebb verzió. Itt már csak egyféle verzió van: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" " Ebből is következik, hogy az 1.1-es verzió nem támogatja a keretek használatát. CSS

16 16 Beágyazott stíluslap Ezt láthattuk a fenti példában. A stílusleírást a HTML weboldal fejlécében kell elhelyezni, style elembe ágyazva. A fenti példában HTML megjegyzésbe is tettük (<! >), ezzel azt érjük el, hogy az olyan böngészők, amik nem ismerik a stíluslapokat, ne jelenítsék meg a stílus definíciónkat. Az így meghatározott stílus az egész dokumentumra érvényes lesz. Külső stíluslap A stíluslapunkat elhelyezhetjük egy külső állományban is, így lehetővé téve, hogy az több HTML állományra is érvényes legyen, s központilag szerkeszthetővé váljon (ne kelljen minden egyes HTML állományt megváltoztatnunk, ha a honlapunk ezentúl másképp jelenne meg). A küls stíluslapokra az oldal fejlécében tudunk hivatkozni, egy link elem segítségével: 1. <head> 2. <link rel="stylesheet" href="kulso.css" type="text/css"> 3. </head> A stíluslapot tartalmazó állományban (a példában kulso.css a neve) csak a stíluslapjaink definícióját kell elhelyeznünk, pl: 1. h1 { font-size: 20px; color: #a00000; 2. p { font-size: 12px; color: #00a000; A beágyazott stíluslapokhoz hasonlóan az így meghatározott stílus az egész dokumentumra érvényes. Elemhez rendelt stíluslap Bár kevés alkalommal van rá szükség, de akkor jól jön, hogy az egyes HTML elemekhez helyben is tudunk stílust meghatározni. Ez nagyon hasonlít ahhoz, mintha font elemekkel határoznánk meg az adott elem megjelenését, bár nagyságrendekkel több formázási lehetőségünk van. Egy elem stílusának a meghatározásához egy style attribútumot kell hozzá felvennünk: 1. <h1 style="font-size: 20px; color: #a00000;">bevezetés</h1> Mint láthattuk, itt csak magát a megjelenést kellett leírnunk, nem kellett meghatározni, hogy mire vonatkozik: az így definiált stílus csak az adott elemre, illetve az adott elemen belül lesz érvényes. Importált stíluslap További lehetségünk, hogy egy stílus meghatározáson belül egy másik, külső stílus meghatározásra hivatkozzunk (erre értelem szerint a beágyazott és a külső stíluslap meghatározásoknál van módunk). Ez a következőképpen történhet: 1. <style type="text/css"><!-- url( ></style>

17 A cím megadásakor hasonlóképpen járhatunk el, mint a linkeknél általában, azaz akár url(masik.css) formában is írhatjuk, amennyiben ugyanabban a könyvtárban található mint a HTML állományunk. A külső stílus hivatkozásnak meg kell előznie minden más definíciót, amennyiben már szerepel előtte más, figyelmen kívül lesz hagyva! Stílusok formátuma 17 Egy önálló stílus definíciós állomány, vagy egy beágyazott stílus több meghatározást tartalmazhat. Egy-egy meghatározás két részből áll, egy kiválasztó és egy tulajdonság részből. A kiválasztó rész azt határozza meg, hogy mely HTML elemekre vonatkozzon a definíció, míg a tulajdonság rész a megjelenést befolyásolja. Amikor elemhez rendelünk stílust, akkor csak a tulajdonság részt kell meghatároznunk. A következőképpen épül fel tehát egy stílusdefiníció: 1. kiválasztó { tulajdonság 2. kiválasztó { tulajdonság 3. kiválasztó { tulajdonság Az egyes definícióknak, de még a kiválasztónak és a tulajdonságnak sem szükséges új sorban lenniük, gyakorlatilag szabadon ránk van bízva, hogy a fenti tartalmat milyen elrendezésben valósítjuk meg. A következő formátumok mind helyesek: 1. kiválasztó { tulajdonság kiválasztó { tulajdonság 2. kiválasztó { 5. tulajdonság 6. Az elző példákban láthattuk, hogy egy-egy kiválasztóhoz több tulajdonságot is megadhatunk, ekkor a tulajdonságokat pontosvesszővel elválasztva kell felsorolnunk. Több kiválasztót is meghatározhatunk, a kiválasztókat vesszővel kell elválasztani: 1. kiválasztó, kiválasztó { tulajdonság; tulajdonság; Kiválasztók (szelektorok) A kiválasztók nagyon rugalmasan használhatóak, mint azt a továbbiakban látni fogjuk egyszerű és mégis összetett módon tudjuk meghatározni, hogy mely elemekre vonatkozzanak a tulajdonságaink. Ebben a cikkben még nem mutatjuk be az összes lehetőséget, de megpróbáljuk bemutatni, hogy milyen széleskörűen tudjuk szabályozni a kiválasztást. Elem kiválasztás A legegyszerűbb kiválasztási lehetőséget nyújtja a számunkra, egy HTML elemet határozhatunk meg vele, amihez hozzá szeretnénk rendelni a különböző tulajdonságokat. Az eddigiekben ilyenre láthattunk példát: 1. h1, h2, h3 { color: #a00f00;

18 Itt az els három szintű címsornak határoztuk meg a színbeli megjelenését. Osztály alapú kiválasztás A HTML elemeket lehetőségünk van osztályokba sorolni. Ekkor az adott osztályba sorolni kívánt elemhez egy class tulajdonságot rendelünk hozzá, amelynek az értéke az osztálynevünk lesz. A stíluslapban ehhez az osztályhoz határozhatunk meg megjelenést. 18 Az egyes kiválasztókat keverhetjük is, például a következő példában a fontos címsoroknak definiálunk egy háttérszínt is: 1. <html> 2. <head> 3. <title>css példa</title> 4. <style type="text/css"></style> 10. </head> 11. <body> 12. <h1>a cserebogarak halhatatlanságáról</h1> 13. <p class="fontos">a cserebogárnak vannak lábai. Ebbl...</p> 14. <p>minden cserebogárnak van lába...</p> 15. <p class="fontos">a cserebogárnak vannak szárnyai is...</p> 16. <p>a szárnyaival repülni tud...</p> 17. <p>a halhatatlanság azt jelenti, hogy...</p> 18. <h1 class="fontos">fontos!</h1> 19. <p class="fontos">a cserebogarak halhatatlansága tehát...</p> 20. </body> 21. </html> Azonosító alapú kiválasztás Az azonosító alapú kiválasztás nagyon hasonló az osztály alapúhoz, egy lényeges különbség van: csak és kizárólag egy elemet tudunk egy bizonyos azonosítóval megjelölni. A stíluslapban a kettőskeresztet használtuk az azonosításhoz, a HTML forrásban pedig az id tulajdonságot. A kiválasztókat itt is keverhetjük (bár mivel egy azonosító csak egy konkrét elemre vonatkozhat, ezért nincs rá szükség), a p#halhatatlan egy szabályos kiválasztó. Bekezdések megjelenése Adott elemeken állítani tudjuk a betűkészletet, a stílust, módosítást, súlyozást méretet. Betűtípus body { font-family: Arial, Helvetica, sans-serif;

19 19 A példában az egész dokumentumra beállítjuk, hogy milyen betűkészlet legyen az alapértelmezett. Érdemes több, hasonló betűkészletet is felsorolni, illetve a lista végére egy általános betűkészletet is elhelyezni az adott családból. Az általános betűkészletek a következők lehetnek: serif, sans-serif, cursive, fantasy, monospace. Stílus Egy font dltségét befolyásolhatjuk, példánkban az egész dokumentumra adtuk meg, hogy dltek legyenek a betűk. További lehetségeink: normal, italic, oblique. body { font-style: italic; Súlyosság A példában félkövér betűkészletet állítunk be a HTML dokumentumra. Lehetőségeink: lighter, normal, bold, bolder, illetve 100-tól 900-ig a számok 100-asával (egyre vastagabb betűkészletet választva). body { font-weight: bold; Méret A HTML dokumentum alapértelmezett betűtípusának a méretét határoztuk meg a példában. A konkrét méretmegadásnál több lehetőségünk is van, lehetséges pixelben (mint a példában), pontban (pt-t kell írni), százalékban, szövegesen (xx-small, x-small, small, medium, large, x- large, xx-large, smaller, larger) megadni a méretet. body { font-size: 14px; Csoportos megadás Lehetségünk van a fentieket egy paraméterként is átadni: body { font: italic bold 14px Arial, Helvetica, sans-serif; Szöveg paraméterek A szöveg színét, sűrűségét, igazítását, aláhúzását, behúzását állíthatjuk, továbbá konvertálhatjuk a szöveget különböz formára (kisbetűs, nagybetűs, stb.). Pár példa: h1 { color: black; A 1. szintű címsor színét feketére állítjuk. Lehetségünk van #ffffff hexadecimális formában is megadni a színt (a mértékegységek mellett a lehetséges színmegadási módokat is be fogjuk mutatni még). h1 { letter-spacing: 10px; A címsor betűi közötti távolságot növeltük meg 10 képponttal. Lehetségünk van növelni és csökkenteni a távolságot. h1 { text-align: center; A címsor igazítását adjuk meg, lehetségünk van balra, középre és jobbra igazítani, valamint sorkizártra beállítani a stílust (left, center, right és justify rendre a megfelel értékek). a { text-decoration: none;

20 20 A példában a link dekorációjaként nem adtunk meg semmit, azaz felülbíráltuk az alapértelmezett aláhúzást. A lehetséges értékek: none, underline, overline, line-through, blink lehetnek, melyek rendre díszítetlen, aláhúzott, felülhúzott, áthúzott és villogó értékeket állítanak be. p { text-indent: 40px; A bekezdések els sorának behúzását állíthatjuk ennek a paraméternek a segítségével. h1 { text-transform: uppercase; A stíluslap hatására az 1. szintű címsorunk végig nagybetűvel fog megjelenni. Lehetséges értékek: none, capitalize, uppercase és lowercase, melyek rendre: módosítatlan, els betű nagy, összes betű nagy és összes betű kicsi jelentésűek. h1 { text-shadow: 5px 5px 3px #000000; A tulajdonság hatására egy árnyékot rajzol a böngészőnk a szöveg köré. A pozíciók megadása nem kötelező, a sziné igen. Az egyes értékek jelentése rendre: lefele való távolság, jobbra való távolság, elmosottság sugara, szín. A távolságok negatív értéket is felvehetnek. p { whitewhite-space: nowrap; A szóközök, tabulátorok kezelését állíthatjuk a white-space attribútummal. A normal a sorvégeken tördeli a szöveget, a nowrap nem enged sortörést, míg a harmadik lehetséges érték, a pre megtartja egy az egyben a sortöréseket, szóközöket, tabulátorokat (mint a pre HTML elemnél). p { word-spacing: 10px; A szavak közötti távolságot vezérelhetjük ennek a paraméternek a segítségével. Lehetőségünk van negatív értékek megadására is. p { line-height: 20px; A sormagasságot állíthatjuk vele egy paragrafuson belül. Célszerű a betűink méreténél nagyobb sormagasságot beállítani, különben összecsúsznak a sorok..super { vertical-align: super; A tulajdonsággal az elem függőleges pozícióját tudjuk szabályozni. Egy cellán belül a HTML nyelv td elemének valign tulajdonságához hasonlít, azonban szöveg környezetben (például egy div-en belül) a betűkhöz, és nem a befoglaló blokk méreteihez viszonyított igazítást állítja. Az értékei lehetnek: sub, super, baseline, text-top, text-bottom, middle, top, bottom. Dobozok megjelenése Négy oldala van, a felső, az alsó, a bal oldali és a jobb oldali. Mindegyik oldalnak van margója (1), kerete (2) és kitöltése (3). A margó a befoglaló doboz legszéle és a keret közötti távolságot állítja be. A keret a margó és a kitöltés között található. Végül a kitöltés a keret és a tartalom között helyezkedik el. Mindegyik lehet akár 0 pixel szélességű is, ekkor egyszerűen nem

21 jelennek meg. A tartalom és a kitöltés által meghatározott terület hátterének színe állítható, illetve képet is el lehet helyezni rajta. 21 Az elemeknek van magasság (4) és szélesség (5) tulajdonsága is. Ezek a szabvány szerint az adott keret külső részét az átellenes keret külső részéig értendőek. Erről sajnos a jelenleg domináns böngész valamiért nem tud (kivéve 6-os verziójának kompatibilis módját), és a teljes dobozszélességet, illetve dobozmagasságot érti ezen tulajdonságok alatt. Ahogy a képen látható, a piros keretű doboz középen (az elválasztásnál) kettétörik, és a keret (illetve a másik két tulajdonság) mindkét sorban hat, viszont a törésnél, azaz a sorok megfelel szélénél nem. Ha több sorba kerül az elemünk aminek ezeket a tulajdonságokat megadtuk, akkor több helyen is kettétörik a doboz. Háttér A háttér színét vezérelhetjük segítségével, továbbá elhelyezhetünk képet háttérként, s annak tulajdonságait (elhelyezkedését, ismétlődését, mozgását) állíthatjuk be. A betűkhöz hasonlóan egy definícióban is, és külön-külön is szabályozhatjuk az tulajdonságokat. body { background-color: white; Fehérre állítja a háttér színét. Természetesen a színt hexadecimális formában (#ffffff) is megadhatjuk. body { background-image: url(hatter.gif); background-position: top left; background-attachment: scroll; background-repeat: repeat; A példa a háttérnek megadja a hatter.gif-et (lehetne még none is megadva, ekkor csak a színezés maradna), a bal felső sarokhoz igazítja, beállítja, hogy amikor görgetjük az oldalt, akkor a háttér is mozogjon, s végül még azt, hogy ismétldjön a háttérkép. A background-position (elhelyezkedés) értékei lehetnek szövegesek: top left, top center, top right, center left, center center, center right, bottom left, bottom center, bottom right, illetve százalékosak (pl. 12% 34%) és pixelben megadottak (pl. 12px 34px). A background-attachement (a rögzízettséget szabályozza) értéke lehet fixed és scroll, az elbbinél nem mozdul a háttér, az utóbbinál pedig a görgetéssel együtt mozog. Az ismétldést befolyásoló background-repeat négy értéket vehet fel: repeat, repeat-x, repeat-y, no-repeat, melyekkel mindkét, csak az egyik, vagy egyik irányban sem történ ismétldést érhetünk el. A háttér paraméterek egy összevonó background paraméterrel: body { background: white url(hatter.gif) no-repeat fixed center center; Ebben az esetben mivel a képnek no-repeat értéket adtunk ismétlésül, a fennmaradó területen a háttér fehér színű lesz.

22 22 Keretek A stíluslapok segítségével lehetőségünk van különböző stílusú keretet adni a kiválasztott HTML elemeinknek. p { border: 2px solid blue; A fenti példában 2 képpont széles, sima és kék keretet adtunk minden bekezdésnek. Az első fenti paraméter a keret szélességét, a második a keret stílusát (none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset), a harmadik pedig a színét adja meg. Az egyes paraméterek elhagyhatóak, de általában szükséges mind. Lehetségünk van a keretek mind a négy oldalon külön-külön történ beállítására is, ezekre mutat példát az alábbi definíció: p { border-left: 1px solid red; border-top: 3px double blue; border-right: 3px dotted green; border-bottom: 3px dashed black; Bal oldalt egy képpont széles piros, felül 3 képpontnyi két vonalas (vonalanként 1-1 képpontos) kék, jobb oldalt 3 képpontos pontozott zöld és végül alul 3 képpontos szaggatott vonalas fekete keretet kap minden bekezdés. Körvonalak A körvonalak a keretekhez nagyon hasonlóan működnek, ellenben az elem méretét nem befolyásolják, mindig körülötte és felette (eltte, azaz eltakarják mindenképpen a doboz tartalmát) jelennek meg, helyet nem foglalnak. A legegyszerűbb talán a fókusz példáját felhozni, mely ehhez nagyon hasonló: mikor egy beviteli elem (például gomb) aktív, akkor körülötte az operációs rendszer egy körvonallal jelzi, hogy fogadja a felhasználói bevitelt. A körvonalak és a keretek további különbsége, hogy nem lehet a négy oldalon külön-külön megadni és hogy nem csak négyzetes alakú lehet. De lássuk azokat a tulajdonságokat, melyekkel befolyásolni tudjuk a körvonal megjelenését! p { outline-width: 2px; p { outline-style: solid; p { outline-color: #000000; Az outline-width tulajdonság segítségével a körvonal szélessége adható meg, az outline-style a stílust definiálja, míg az outline-color a körvonal színét állítja be. A stílusnál a kereteknél bemutatott stílusok használhatóak. Lehetőség van egy tulajdonság segítségével beállítani a három tulajdonságot, ekkor opcionálisan és bármilyen sorrendben megadhatjuk az outline után ezeket: p { outline: 2px solid #000000;

23 23 Margók Az egyes elemek a kereten (legyen az akár 0 képpontnyi) kívüli helyfoglalását szabályozhatjuk a margók segítségével. p { margin: 0px 1px 2px 3px; A fenti példában felül 0, jobbra 1, alul 2 és bal oldalt 3 képpontnyi margót állítunk be a bekezdésnek. A négy paraméter helyett használhatunk egyet is, ilyenkor mind a négy oldalon azonos margót kapunk: body { margin: 0px; Ha csak két értéket adunk meg paraméterként, akkor az els paraméter a függleges, a második paraméter pedig a vízszintes irányú margókra fog vonatkozni: body { margin: 10px 0px; Lehetőségünk van a margók mind a négy oldalon külön-külön történ beállítására is, ezekre mutat példát az alábbi definíció: p { margin-left: 3px; margin-top: 0px; margin-right: 1px; margin-bottom: 2px; Ezzel a definícióval ugyanazt az eredményt kapjuk, mint a legelső margós példánál bemutatottal. Kitöltés Az egyes elemek a kereten (legyen az akár 0 képpontnyi) belüli helyfoglalását szabályozhatjuk a kitöltések segítségével. p { padding: 0px 1px 2px 3px; A fenti példában felül 0, jobbra 1, alul 2 és bal oldalt 3 képpontnyi kitöltést állítunk be a bekezdésnek. A négy paraméter helyett használhatunk egyet is, ilyenkor mind a négy oldalon azonos margót kapunk: body { padding: 5px; Ahogy a margóknál, itt is lehet csak két értéket megadni paraméterként, ahol az első paraméter a függleges, a második paraméter pedig a vízszintes irányú kitöltést szabályozza: body { padding: 10px 0px; Lehetőségünk van a kitöltések mind a négy oldalon külön-külön történ beállítására is, ezekre mutat példát az alábbi definíció:

24 24 p { padding-left: 3px; padding-top: 0px; padding-right: 1px; padding-bottom: 2px; Ezzel a definícióval ugyanazt az eredményt kapjuk, mint a legelső kitöltéses példánál bemutatottal. Listák megjelenése A listák két különböző HTML elemek egymásba ágyazásából állnak össze. A külső elem lehet ul, ol és dd elem, melyben li, illetve dt elemek kapnak helyet. Mind a külső, mind a belső elemek saját margóval, kerettel és kitöltéssel rendelkeznek. A belső listaelemek listajelölő grafikájának megjelenítésekor a különböző böngészők kicsit eltérően viselkednek, egy részük a külső elem bal felének megfelel szélességű margót, másik részük pedig megfelel szélességű kitöltést ad, majd ezen a területen jeleníti meg a grafikát (a dd-dt páros esetén alapértelmezett esetben nem jelenik meg grafika, de a megfelelő margókkal rendelkezik). A grafika megjelenítése a belső listaelemeken kívülről áthelyezhet belülre egy tulajdonság segítségével. Listaelemek A listák megjelenését tudjuk szabályozni a következőkben bemutatott paraméterekkel. Lehetőségünk van képet rendelni a listaelemekhez, vagy egy előre meghatározott listából választani, továbbá befolyásolhatjuk az egyes listaelemek előtt álló jelek helyzetét. Lehetőségünk van mindezt egy paraméterrel, illetve külön-külön is állítani: ul { list-style: square inside url(pont.gif) ul { list-style-position: inside ul { list-style-type: disc ul { list-style-image: url(pont.gif) Az első sor az egy paraméterként megadott szabályozást mutatja be. Egy kép fog megjelenni minden listaelem előtt, s a képet a szöveggel együtt fogja behúzni. Ha azt szeretnénk, hogy a kép ne legyen behúzva, akkor outside paramétert kell megadnunk. A fenti példában, mivel a kép meg van adva, s bár azt is meghatároztuk, hogy négyzet (square) legyen a jel, ezt felül fogja bírálni a kép. Mindazonáltal a jelet is meg kell adnunk, enélkül ugyanis nem jelenik meg a kép... A második sorban a jel behúzásának szabályozó paramétert mutatjuk be, ahogy az elbb is említettük, itt állhat értékül inside és outside. A harmadik sor a jelet szabályozza. Itt széles választási lehetségünk van: none, disc, circle, square, decimal, decimal-leading-zero, lowerroman, upper-roman, lower-alpha, upper-alpha, lower-greek, lower-latin, upper-latin, hebrew, armenian, georgian, cjk-ideographic, hiragana, katakana, hiragana-iroha, katakana-iroha - persze nem mindegyik böngész támogatja az összes jelet. Végül az utolsó sorban a képre cserélését láthatjuk a lista jelének - mégegyszer kihangsúlyozzuk, ha szeretnénk, hogy a kép megjelenjen, meg kell adnunk a jel típusát is.

25 Linkekkel kapcsolatos látszólagos kiválasztók 25 Aki már egy kicsit is foglalkozott HTML-lel, készített, vagy egyszerűen csak látogatott már weboldalakat, biztosan tudja, hogy a linkek más-más színnel jelennek meg, ha már voltunk az általuk mutatott oldalon, illetve ha még nem. Ezekre a színekre a HTML-bl, a body elem tulajdonságainak (link, vlink) állításával is hatással lehetünk, azonban CSS-t használva, sokkal több lehetőségünk lesz. Látszólagos kiválasztókkal ugyanis külön-külön meghatározhatjuk a megjelenésüket! Ezeket a kiválasztókat a következőképpen használhatjuk: a { color: #0000FF; text-decoration: underline; a:link { text-decoration: none; a:visited { font-style: italic; Az első sor semmi különöset nem tartalmaz, egy link elemnek határozzuk meg a stílusát. A második sorban azokat a linkeket választjuk ki, melyeket még nem látogattunk meg, a harmadik sorban pedig azokat, melyeket már meglátogattunk (nemrég). A két tulajdonság értelemszerűen kizárja egymást. Dinamikus látszólagos kiválasztók A HTML dokumentumokat az ember nem szokta egy ült helyében elolvasni, majd otthagyni. Az egész lényege valahol a dinamizmus: linkekre kattingatunk, adott esetben form elemeket használunk, stb. Az internet már interaktív média, és erre a CSS-t is felkészítették. No, nem kell bonyolult dolgokra gondolni, az eszköztárunk a következő lehetőségeket tartalmazza: az egérkurzor az adott elem felett van, az adott elem éppen aktív, továbbá ha az adott elem éppen fókuszban van. input { font-size: 12px; border: 1px solid #000000; background: #ffffff; input:hover { border: 1px solid #0000FF; input:active { font-weight: bold; input:focus { background: #dddddd; Az els sorban itt sem tettünk semmi különöset, a beviteli mezk tulajdonságait határoztuk meg. A második sorban lev :hover kiválasztó akkor fog működni, ha az adott mez felé visszük az egérkurzort, ekkor kék színnel jelenik meg a kerete. A harmadik sorban azt határozzuk meg, miként jelenjenek meg az aktív elemek. Hogy mit értünk aktív elemen? Azt, amelyikkel éppen csinálunk valamit. Például "megragadjuk", azaz lenyomva tartjuk az egérkurzort, vagy éppen lenyomunk egy gombot, stb. Példánkban ilyenkor az elem betűi vastaggá válnak. Végül a negyedik sorban azt definiáljuk, mi történjen, mikor éppen ki van választva az elemünk, rajta van a fókusz, ebben az esetben éppen a kurzor villog az input mezőnkben. Ehhez a :focus kiválasztóhoz rendelt tulajdonságunkkal éppen azt határoztuk meg, hogy a háttérszíne legyen világosszürke. Fontos megjegyezni, hogy bár a példában éppen beviteli mezt láttunk, de ez a tulajdonság például a linkekre ugyanúgy működik, mint a közönséges bekezdésekre, vagy más elemre! Elemszerű látszólagos kiválasztók A CSS lehetőséget biztosít kiválasztanunk egy-egy elem tartalmának csak bizonyos részeit, mintha azok külön-külön definiált elemek lennének. Ezekkel a látszólagos kiválasztókkal az adott elem els karakterét, vagy akár az els sorát is kiválaszthatjuk.

Több megjelenítése