HTML gyorstalpaló 19. rész
Stíluslapok
A HTMLA dokumentumok logikai struktúráját a HTML (Hyper Text Markup Language) jelölései segítségével lehet szabályozni. A HTML arra készült, hogy segítségével a dokumentumok szokásos, sorban egymás utáni olvasása helyett, a szövegben elhelyezett kapcsolatok alapján az egész dokumentum könnyebben legyen áttekinthető és elolvasható. Segítségével logikusan szervezett és felépített dokumentumokat lehet készíteni, olyan módon hogy a nyelv alkalmas logikai kapcsolatok létrehozására a dokumentumon belül és dokumentumok között, amit a dokumentum olvasója kezelhet. A dokumentum fogalmát itt általánosabban kell értelmeznünk: ezek objektumok, amelyek lehetnek: szöveg, kép(grafika), hang (zene), de akár mozgókép (film) is. Ahogy az már az előzőekben látható volt, az ilyen módon szervezett szöveget hypertextnek hívjuk. A HTML formátumú fájl valójában egy szöveges fájl, szintén szöveges (olvasható) vezérlőkódokkal. Ezek a vezérlőkódok < és > jelek között szerepelnek, és a szöveg megjelenését, formátumát, például a betűk nagyságát, formáját, stb. jelölik. A szöveg egyéb dokumentumokra vagy a dokumentum más részeire való hivatkozásokat is tartalmazhat amit a vezérlőkódok segítségével adhatunk meg linkek formájában. Ezek a linkek — amelyek a megjelenítéskor általában kék színű, aláhúzott szövegekként, vagy kék keretes ikonokként jelennek meg — hypertext alakúvá teszik a dokumentumot. A legtöbbször minden egyes link hivatkozás egy másik HTML oldalra ( Azért ez alól van kivétel.) ami a Világ bármely pontján lehet. nyelv főként a tartalom leírására szolgál, irányelveket ad a böngészőknek a megjelenítésre vonatkozva, azonban teljességgel elképzelhető, hogy pl. egy böngészőprogram a <CITE> taget félkövérrel szedi, holott te dőltet képzeltél el oda. Ezért született meg az igény a stíluslapokra, amely pont a HTMLA dokumentumok logikai struktúráját a HTML (Hyper Text Markup Language) jelölései segítségével lehet szabályozni. A HTML arra készült, hogy segítségével a dokumentumok szokásos, sorban egymás utáni olvasása helyett, a szövegben elhelyezett kapcsolatok alapján az egész dokumentum könnyebben legyen áttekinthető és elolvasható. Segítségével logikusan szervezett és felépített dokumentumokat lehet készíteni, olyan módon hogy a nyelv alkalmas logikai kapcsolatok létrehozására a dokumentumon belül és dokumentumok között, amit a dokumentum olvasója kezelhet. A dokumentum fogalmát itt általánosabban kell értelmeznünk: ezek objektumok, amelyek lehetnek: szöveg, kép(grafika), hang (zene), de akár mozgókép (film) is. Ahogy az már az előzőekben látható volt, az ilyen módon szervezett szöveget hypertextnek hívjuk. A HTML formátumú fájl valójában egy szöveges fájl, szintén szöveges (olvasható) vezérlőkódokkal. Ezek a vezérlőkódok < és > jelek között szerepelnek, és a szöveg megjelenését, formátumát, például a betűk nagyságát, formáját, stb. jelölik. A szöveg egyéb dokumentumokra vagy a dokumentum más részeire való hivatkozásokat is tartalmazhat amit a vezérlőkódok segítségével adhatunk meg linkek formájában. Ezek a linkek — amelyek a megjelenítéskor általában kék színű, aláhúzott szövegekként, vagy kék keretes ikonokként jelennek meg — hypertext alakúvá teszik a dokumentumot. A legtöbbször minden egyes link hivatkozás egy másik HTML oldalra ( Azért ez alól van kivétel.) ami a Világ bármely pontján lehet. komplementere: csak a megjelenítésre tartalmaz irányelveket. Történelmi megközelítésben vizsgálódva fontos lehet megemlíteni, hogy az InternetNemzetközileg elfogadott, angol eredetű szó. Magyarul annyit tesz: hálózatok hálózata. Az egész világot körülölelő számítógép-hálózat,. Gyakori hivatkozás a net kifejezés is. Az Internet egy olyan hatalmas adatbázis, amely rengeteg számítógép-hálózatot fog össze. Ennek eredménye egyfajta kibertér, amely a valódi világ mellett egyfajta alternatív teret biztosít. Az Internet a számítógépek összekötéséből jött létre, hogy az egymástól teljesen különböző hálózatok egymással átlátszó módon tudjanak elektronikus leveleket cserélni, állományokat továbbítani. Az Internet úgynevezett TCP/IP alapú hálózat. Mivel ez a protokoll-készlet több hálózatnak is alapja, ezért a globális hálózatot helyi hálózatok, intranetek, különböző távolsági hálózatok alkotják. Mindeközben az adatok a legkülönfélébb fizikai közegekben utazhatnak telefonvonalak, különböző hálózati kábelek vagy kommunikációs műholdak segítségével. Röviden szólva: az Internet nem valami fizikai hálózat, hanem annak módja, ahogy az egymástól különböző hálózatokat összekötik avégből, hogy egymással kommunikálni tudjanak. Az Internet olyan gyorsan növekszik, hogy nem lenne értelme számokat megemlíteni, hiszen azok pár hónap múlva nem lennének helytállóak. Inkább csak az arányokkal érdemes foglalkozni. A növekedés, azaz az Internetbe kapcsolt számítógépek számának alakulása havonta 10-15 %-ot dönget. Mivel az Internet egymástól különböző hálózatokat köt össze, a felhasználó bátran választhat bármilyen eszközt a munkája elvégzéséhez, az adatokat a hálózaton keresztül egységesen tudja kezelni. Ma már elmondható, hogy az Internet a világ elektronikus postájává lépett elő. Ez azt jelenti, hogy a felhasználók az üzeneteikre azonnali választ kaphatnak. Az Internetet felépítő és szabályozó protokollok mindenki számára hozzáférhetőek, ezeket rengeteg gyártó támogatja: mindez a hatékony szabványosítás eredményének is betudható. Egykor a Hálózat kizárólag csak a kutatók, oktatók és katonai intézmények számára volt elérhető. Ma már nagymértékben tart az Internet kommercializálódása, mivel sok cég ismeri fel, hogy enélkül lassan nem lehet megélni az üzleti életben. A legfontosabb adaléka azonban az, hogy az üzenetszórásos médiumokkal ellentétben itt a felhasználó választhatja meg, hogy milyen információt akar megszerezni. Ugyanígy bárkiből válhat információforrás. Biztosan előfordult már, hogy ön is ráakadt valami nagyon hasznos dologra az Interneten, legyen az program, információ vagy akár csak egy kis idézet. Mivel ezeknek általában nincs nagy kereskedelmi értékük, ezért üzenetszórásos csatornákon (televízió, rádió) nem valószínű hogy megtalálhatóak. Senki ne keresse az Internet központi épületét ! Ilyen nincs — és valószínűleg nem is lesz. Minden hálózat, amely az Internethez csatlakozik, önálló életet él. Ezen hálózatok csatlakoztatásának összehangolását, az ezzel kapcsolatos információk szolgáltatását, illetve a felmerülő mérnöki tevékenységeket az 1992 januárjában létrehozott, profitmentes Internet Society (ISOC) irányítja, amelynek bárki szabadon tagja lehet. Központja a Virginia, USA állambeli Restonban van. Sokszor elhangzik a kezdő Internetes felhasználóktól az a kérdés, hogy ki fizeti az Internetet ? Sokan úgy gondolják, hogy ingyenes. Nos, ez igaz is, meg nem is. Igaz annyiban, hogy az Internetre csatlakozott hálózattal rendelkező intézmények (legyen az oktatási, kereskedelmi vagy akár katonai jellegű) alkalmazottai a munkahelyükről ingyenesen férnek hozzá az Internethez. Nem igaz annyiban, hogy az egyes csatlakozó hálózatok saját maguk állják a működésükhöz szükséges anyagiakat. Az egyszerű mezei felhasználó általában fizet a helyi Internet-szolgáltató cégnek, akit pedig az adott ország nagy sebességű gerinchálózatát üzemeltető intézmény csapol meg anyagilag. A különböző országok a díjakat egymás között pedig nemzetközi szerződésekben rögzítik. Explorer a 3.0-s, a Netscape Navigator a 4.0-es verzió óta kezeli a stíluslapokat.
Használat
A stílus leírását több technika segítségével is beágyazhatod az oldaladba:
A <LINK> tag segítségével
a REL paraméter értéke természetesen “StyleSheet”, a TYPE-é pedig “text/CSS” legyen! A TITLE paraméterbe beírhatsz egy címet a stíluslapról, amelyet a böngészők pl. arra használhatnak, hogy a felhasználó választhasson, hogy az oldalad mondjuk Star Trek vagy X-Files színekkel, betűtípusokkal jelenjen-e meg (az alapértelmezett stíluslapot tedd utolsónak, mert pl. az IE 3.0 nem ajánlja fel a választást, hanem a legutolsót használja). Természetesen a HREF paraméter tartalmazza a stíluslap URL-jét. Ennyi rizsa után egy konkrét példa. Célszerű a <HEAD> szekcióba tenni.
A <HEAD> szekción belül, közvetlenül a <STYLE> tag-gel
itt lényegében beágyazod magát a stíluslapot a <HEAD> szekcióba.Nagy hátránya az előző módszerrel szemben, hogy elvész a stíluslapok nyújtotta dinamizmus: ha meg szeretnéd változtatni az általad tervezett site arculatnál, bizony mindegyik oldalt végig kell járnod a stílusok átírásához. Hasznos lehet viszont, ha sebtiben akarsz összedobni három-négy oldalt.
Az egyes tageken belül
Ez azt jelenti, hogy a tag kap egy STYLE paramétert, amelyen belül definiálod a kinézett, például. Ez mindhárom módszer közül a legrosszabb: egyrészt ugyanúgy, mint a második módszernél, nem lehet központilag megváltoztatni, másrészt eléggé idegen a HTMLA dokumentumok logikai struktúráját a HTML (Hyper Text Markup Language) jelölései segítségével lehet szabályozni. A HTML arra készült, hogy segítségével a dokumentumok szokásos, sorban egymás utáni olvasása helyett, a szövegben elhelyezett kapcsolatok alapján az egész dokumentum könnyebben legyen áttekinthető és elolvasható. Segítségével logikusan szervezett és felépített dokumentumokat lehet készíteni, olyan módon hogy a nyelv alkalmas logikai kapcsolatok létrehozására a dokumentumon belül és dokumentumok között, amit a dokumentum olvasója kezelhet. A dokumentum fogalmát itt általánosabban kell értelmeznünk: ezek objektumok, amelyek lehetnek: szöveg, kép(grafika), hang (zene), de akár mozgókép (film) is. Ahogy az már az előzőekben látható volt, az ilyen módon szervezett szöveget hypertextnek hívjuk. A HTML formátumú fájl valójában egy szöveges fájl, szintén szöveges (olvasható) vezérlőkódokkal. Ezek a vezérlőkódok < és > jelek között szerepelnek, és a szöveg megjelenését, formátumát, például a betűk nagyságát, formáját, stb. jelölik. A szöveg egyéb dokumentumokra vagy a dokumentum más részeire való hivatkozásokat is tartalmazhat amit a vezérlőkódok segítségével adhatunk meg linkek formájában. Ezek a linkek — amelyek a megjelenítéskor általában kék színű, aláhúzott szövegekként, vagy kék keretes ikonokként jelennek meg — hypertext alakúvá teszik a dokumentumot. A legtöbbször minden egyes link hivatkozás egy másik HTML oldalra ( Azért ez alól van kivétel.) ami a Világ bármely pontján lehet. gondolatvilágától, ugyanis összekeveri a tartalmi és a formai definíciókat.
Mindent összevetve az első módszer tűnik a legjobbnak, de a kezdeti próbálgatásokhoz talán a második a legegyszerűbb, mivel itt egy file-t szerkesztesz, de egybemarad a stíluslap, tehát később kiemelhető onnan külön file-ba.
A stíluslapok felépítése
Most, hogy már tisztáztuk, hogyan tudod majd felhasználni a stíluslapodat, ideje megírnod. Először azonban egy kis fejtágítás következik.
Akinek “számítástechnikus agya” van, vagy foglalkozott már pl. OOP-vel, az bizonyára érteni fogja a stílusok hierarchiarendszerét. Azonban nem mindenki úgy ül le, hogy bemutassa pl. a virágüzletét a Weben, hogy előtte nem csak felhasználói szinten foglalkozott számítástechnikával. A stíluslapok hierarchiarendszeréről lesz ugyanis most szó.
A lényeg az, hogy ha megadod egy tag kinézetét, akkor a többi, azon belüli tag örökli azt, ha csak felül nem írod. Például ha a BODY tag-et pirosra állítod, és a B-t aláhúzottra, akkor mivel a B a BODY-n belül van, pirosan és aláhúzva jelenik meg. Ha viszont a P kék, akkor kéken fog megjelenni. Ha pedig egy P tag-en belül elhelyezel egy B tag-et, akkor az kék lesz, és aláhúzott.Emellett vastag is-vajon miért? Természetesen azért, mivel a böngészők a B tag-et alapértelmezésben vastagon jelenítik meg, és nem mondtuk meg neki, hogy vékony legyen. Tehát az első esetben a B örökölte a félkövérséget, a piros színt és saját magától az aláhúzottságot, ebben a sorrendben. A második esetben viszont örökölte a félkövérséget, a piros színt, a kék színt és az aláhúzottságot. Mivel a piros is, a kék is szín és mivel a kék volt utóbb, a szöveg kékkel jelenik meg. Igen, ez elsőre nem valami egyszerű, de kétségkívül logikus.
A stíluslap bejegyzése a következő formában jelenik meg:
Szülők.Név {Paraméter1:Érték1, Érték2, Érték3; Paraméter2:Érték1, Érték2;...}
Ha a szülőt nem adjuk meg, akkor a beállított értékek a szülőtől függetlenül jelennek meg, a fenti példában a B tag mindig aláhúzottan jelentmeg. Ha azt szeretnénk, hogy csak azok a vastagbetűs szövegek legyenek aláhúzva is,amelyek 1-es fejlécben szerepelnek, a szülőt természetesen H1-nek kell beírni:
H1.B {Text-decoration: underline}
Ekkor a kenyérszövegekben nem jelenik meg az aláhúzás. Egyparaméternek azért adhatsz több értéket is, hogy pl. egy szöveg egyszerre lehessen aláhúzott és villogó (mindkettő text-decoration). Egy tag-en belül különböző gyermek-osztályokat is létrehozhatsz, amelyek szülője ugyanúgy a felette álló tag,mint a normál tag-ek esetében. Például:
.fejlec {Font-family: "StarTrekGen HV BT", "Times New Roman", serif; Font-Size: 30pt}
Ezek után ha szeretnél egy kenyérszövegen belül elhelyezni egyfejlécet, a DIV tag CLASS paraméterének írjad be, hogy fejlec:
<P><DIV CLASS="fejlec">Eleg jól kiüt a környezetből</DIV>, nem igaz? </P>
Ha szeretnéd, hogy a H1-en belüli fejlécek még pirosak islegyenek, a .fejlec sor után írd be, hogy
H1.fejlec {color: red}
Ekkor ha a <DIV> tag-eta H1-en belül használod, akkor a standard .fejlec alstíluson kívül megkapja a csak a H1-es .fejlec-re jellemző piros színt. Az A tag-nek ezenkívül három gyermekstílusa van: A:LinkA hipermédia, a hipertext fogalma; élőkapocs. A hipermédiás dokumentumban szereplő linkek más dokumentumokkal teremtenek kapcsolatot. Linkek találhatók a World Wide Web honlapjain is; ezeket a különféle böngészőprogramok általában aláhúzással, kiemeléssel jelölik. (Ebben a szócikkben az öt kiemelt kifejezés szintén élőkapocs.), A:Visited, A:Active. Ezekkel állíthatod be külön a normál, a már meglátogatott és az éppen aktív élőkapocsA hipermédia, a hipertext fogalma; link. A hipermédiás dokumentumban szereplő linkek más dokumentumokkal teremtenek kapcsolatot. Linkek találhatók a World Wide Web honlapjain is; ezeket a különféle böngészőprogramok általában aláhúzással, kiemeléssel jelölik. (Ebben a szócikkben az öt kiemelt kifejezés szintén élőkapocs.) kinézetét.