keretek tartalom létrehozás

  1. Stíluslapok
  2. A stíluslapok megjelenésével a HTML oldalak kinézetét nagyon pontosan, egységes formában adhatjuk meg. Használatukkal kiküszöbölhetõek az olyan megjelenési problémák, amik akkor léphetnek fel, ha ugyanazt az oldalt egy másik böngészõvel vagy csak ugyanazon böngészõ másik verziójával szeretnénk megtekinteni. Ebben az esetben ugyanis elõfordulhat, hogy látványban valami egészen mást kapunk, mint amit szerettünk volna. Lényegében a stíluslapokkal a HTML-tõl részben független nyelveken adhatunk meg formázási utasításokat, így kiválthatunk hasonló célt szolgáló HTML elemeket. Stíluslapok használatának elõnyei:

    1. Stíluslapok felépítése
    2. A HTML elemeknek különbözõ tulajdonságaik vannak (szín, szélesség, magasság, stb...), amiknek a stíluslapon is külön-külön értékeket adhatunk. A Cascading Style Sheets azaz CSS stílusleíró nyelvnél ennek a formája a következõ.

      Elem {tulajdonság: érték}

      ahol az elem legyen például a <H1> tag, aminek color tulajdonságát red értékûre állítjuk. Ebben az esetben, ha egy szöveget a <H1> tag-gel jelölünk, akkor az piros színnel fog megjelenni. Több elem ugyanazon tulajdonságát egyszerre, illetve egyetlen helyen leírva is megváltoztathatjuk. Ekkor az adott elemeket vesszõvel elválasztva írjuk a tulajdonság és érték páros elé.

      H1,H2,H3,H4 {color: red}

      Elõállhat olyan eset is, amikor egy bizonyos tag-gel jelölt szövegnek csak egy részét kellene más tulajdonsággal felruházni. Ilyenkor kijelölünk egy plusz tag-et és ha annak is a hatáskörébe esik a szöveg, akkor a beállítottnak megfelelõen módosulnak a megjelenési tulajdonságai.

      H1 EM {color: red}

      Tehát ha a <H1> tag-en belül alkalmazzuk az <EM> tag-et is, akkor az <EM> által jelölt szöveg fog pirossal megjelenni, a többi a korábban megadott H1 tulajdonságainak megfelelõen viselkedik.

      Ha egy HTML oldalon belül egy HTML tag-hez nem feltétlenül ugyanazt a tulajdonságot szeretnénk végig használni, osztályok definiálásával egy tag-hez több különbözõ tulajdonságot is megadhatunk.

      Elem.osztálynév {tulajdonság: érték}

      Használata pedig a következõ:

      <Elem CLASS="osztálynév">Szöveg</Elem>

      Definiálhatunk még osztályokat elemek használata nélkül, általánosan is:

      .osztálynév {tulajdonság: érték}
      #osztálynév {tulajdonság: érték}

      Ezeknek az az elõnye, hogy bármelyik elemhez szabadon felhasználhatóak. Az utóbbi megoldás esetében nem a CLASS paraméterrel hivatkozunk a stílusinformációra, hanem az ID-vel:

      <DIV ID="osztálynév">Egy példa</DIV>

      Stíluslap leírásokban elhelyezhetõek megjegyzések is, amiket a böngészõk figyelmen kívül hagynak, csak a készítõjének, illetve a felhasználónak nyújthatnak segítséget. Ezt ugyanúgy jelöljük, mint a C programozási nyelvben: /* megjegyzés */

      Mint már a fentiekben kiderült, stílusinformációkat a dokumentumon belül is és a dokumentumon kívül, egy külön fájlban is megadhatunk. A dokumentumon belül használt stílusleírásnak módja a következõ: a <STYLE>...</STYLE> tag-ek között a HTML oldal fejlécében helyezzük el a formázó utasításokat. A stílusleíró nyelv típusát a STYLE paramétereként kell megadni. Ha figyelembe vesszük azt, hogy a régebbi típusú böngészõk némelyike nem tudja kezelni a stíluslapokat, akkor azok elõl el kell rejteni ezeket az információkat. Az elrejteni kívánt utasításokat úgynevezett komment jelek közé helyezzük el, így azok a böngészõk, amelyek tudják kezelni a stílusinformációkat, használni fogják azt. Amelyek nem tudják kezelni, azok figyelmen kívül hagyják az ott elhelyezett utasításokat. Egy, a fejlécben elhelyezett stíluslap információ formája CSS leírónyelv használata esetén az alábbi:

      <STYLE type="text/css">
      <!--
      H1 {background-color: red;}
      -->
      </STYLE>

      Abban az esetben, amikor az oldalra vonatkozó stílusinformációkat egy külsõ fájlban tároljuk, a HTML dokumentum fejlécében egy LINK elemmel hivatkozhatunk az adott leíró kódot tartalmazó fájlra.
      Például:

      <LINK href="css_fájl_neve" rel="STYLESHEET" type="text/css" title="cím">
      <STYLE type="text/css">
      </STYLE>

      A HREF paraméter értéke a formázó utasításokat tartalmazó fájl elérési útja és neve. A REL paraméter a hivatkozás típusára vonatkozik, ami STYLESHEET és ALTERNATE STYLESHEET értékeket vehet fel. A TYPE a beillesztendõ stíluslap nyelve. A TITLE paraméterrel pedig egy-egy stílusbeállításnak adhatunk címet. Jelentõsége a választható stíluslapok használatánál van.

    3. Stílusbeállítások precedenciája
    4. A stíluslapok használatából egyenesen adódik a kérdés, hogy ugyanarra a tag-re megadott egymástól eltérõ stílusinformációk közül melyik jut érvényre. Például: a <DIV> tag-re a fejlécben megadott paraméterek a mérvadóak vagy pedig az ID-vel megadottak? A böngészõ az oldal megjelenítésekor a következõ szabályokat alkalmazza:

    5. Különbözõ tulajdonságok értékei
    6. A stíluslapokon megadott tulajdonságoknak értékeket kell adni. Ezek az értékek lehetnek kulcsszavak, karakterláncok, hosszúságértékek és színeket meghatározó kódok. A használható kulcsszavakat a CSS definíciója határozza meg. A karakterláncok általában URL-ek. Hosszúságértékeket kétféle képpen adhatunk meg: abszolút módon konkrét számérték és a hozzátartozó mértékegység megadásával, illetve relatíven a böngészõablak százalékos értékében. A CSS által támogatott hosszmértékegységek a következõek:

      Mm  milliméter
      cm  centiméter
      in  incs
      pt  tipográfiai pont (1/72 incs)
      pc  tipográfiai pica-pont (12 pont)
      em  az aktuális font mérete (kb. az M betû magassága)
      en  az aktuális font kisbetûinek mérete (kb. az x magassága)
      px  pixel, az aktuális mejelenítõ eszköz pontmérete

      A hosszméretekhez hasonlóan a színek megadása is többféle módon történhet, a színek nevével vagy pedig a színösszetevõk meghatározásával. A CSS a HTML-hez hasonlóan 16 elõre definiált színt ismer. Ezek a színek a következõek: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white és a yellow.
      Használhatjuk ezenkívül az RGB kódolás szerinti meghatározást is, ami azt jelenti, hogy a kívánt színben fellelhetõ piros, zöld és kék színek mennyiségét számokkal határozzuk meg. Ezek az értékszámok lehetnek hexadecimálisak és decimálisak is. Megadásuk az alábbi módon történhet:

      color: #F00   alapszínekkel 16 lépcsõben
      color: #FF0000   alapszínekkel 256 lépcsõben
      color: rgb (256,0,0)   decimálisan
      color: rgb (100%,0%,0%)   százalékosan
      color: red   elõre definiált névvel

      A stíluslapokon tulajdonságként URL-ek is elõfordulhatnak, amiket kétféle módon adhatunk meg:

      url (URL)
      "URL"

    7. Méret és keretezés
    8. A HTML oldalainkon elhelyezett elemek mindegyike helyet foglal el az adott oldalon. Ez a hely a tartalom által elfoglalt helybõl, a tartalom és az azt befoglaló keret közötti helybõl (padding), a keret szélességébõl (border) és a kereten kívül hagyott üres helybõl (margin) áll. Ezeket a helyeket a tartalom körül rendre külön-külön is állíthatjuk, mindegyikhez csak a megfelelõ top, left, right vagy bottom jelzést, jelzéseket kell elhelyezni.
      A width és a height paraméterekkel a tartalom részére fenntartott helyet állíthatjuk a kívánt méretûre. Ha ezeknek az értéke nem auto, akkor a megjelenítendõ szöveg a paramétereknek megfelelõen változik.
      A padding-left, padding-right, padding-top és padding-bottom az elem tartalma és az azt körülvevõ keret közötti távolságot határozza meg. Minden oldalnak külön-külön adhatunk meg értéket, de ha a padding-et magában használjuk, akkor minden oldal ugyanazt az értéket veszi fel. Lehetõség van egy harmadik féle megadási mód használatára is. Abban az esetben, ha nem akarjuk kiírni a top, right, bottom, left paramétereket és mégis különbözõ értéket szeretnénk az oldalaknak adni, akkor elegendõ a beállítani kívánt méreteket a felsõvel kezdõdõen, az óramutató járásával megegyezõ irányban és szünettel elválasztva megadni.

      P {padding-top: 1cm
         padding-right: 2cm
         padding-bottom: 3cm
         padding-left: 4cm
      }

      vagy rövidebben:

      P {padding: 1cm 2cm 3cm 4cm}

      Ez a rövid megadási módszer minden olyan elemnél alkalmazható, amelynél lehetõség van az oldalakra különbözõ értékeket beállítani.

      A használt keret vastagságát a border-width illetve a border-oldal-width paraméterrel határozhatjuk meg. Háromféle elõre meghatározott értéket kaphat. Ezek a thin, medium, thick lehetnek, illetve ezeken felül bármilyen hosszúságértékeket választhatunk.
      A keret színét a border-color-ral állíthatjuk be akár minden oldalra külön is.

      A border-style segítségével a szöveget körbevevõ keret stílusát változtathatjuk meg. A border-style paraméter a következõ értékeket veheti fel:

      A margin és a margin-oldalak segítségével a keret körüli margó szélességét határozzuk meg. Ennek az értéknek az alapértelmezése nem nulla, hanem egy kicsi szám.

    9. Pozícionálás
    10. HTML-ben sok problémát okozott az elemek pontos elhelyezése egy lapon, mert az erre vonatkozó utasítások nem léteznek. Így a stílulapok megjelenéséig, illetve elterjedéséig különféle trükköket kellett használnia a HTML oldalt készítõ személyeknek. Ezen trükkök egyike a <SPACER> tag és például a &nbsp; speciális karakter, ami egy üres helyet hoz létre az elkészült oldalon. Ezeket a szüneteket lehet egymás után is halmozni, ellenben a sima szünetjeleket (space) nem, mert az utóbbit böngészõk figyelmen kívül hagyják és csak egyet jelenítenek meg belõlük. Az így kialakított lapok bonyolult, áttekinthetetlen szerkezetûekké válhatnak és csak bizonyos feltételek mellett élvezhetõek az elkészült dokumentumok. Stíluslapok segítségével viszont nagyon pontosan meghatározhatjuk egy-egy elem helyét. A CSS-ben négyféle módon végezhetjük el ezeket a beállításokat, ezek közül hármat már a böngészõk is ismernek. A három féle mód közül a position kulcsszó megfelelõ értékûre állításával választhatjuk ki a nekünk legjobban megfelelõt.

      Egy-egy rövid példa a relatív, majd az abszolút pozícionálásra:

      <STYLE>
      .pozicio1 {position: relative ;}
      </STYLE>
      <BODY>
      az eredeti helyén levõ szöveg
      <DIV CLASS="pozicio1" STYLE="left:1cm">
      egy centivel jobbra tolt szöveg
      </DIV>
      </BODY>

      az eredeti helyen levõ szöveg
      alap az egy cm-vel eltolt szöveg

      <STYLE>
      .pozicio2 {position: absolute ;}
      </STYLE>
      <BODY>
      az eredeti helyén levõ szöveg
      <DIV CLASS="pozicio2" STYLE="left:3cm">
      három cm-rel a lap bal szélétõl
      </DIV>
      </BODY>

      az eredeti helyen levõ szöveg
      alap három cm-rel a lap bal szélétõl

      A relatív pozícionálást alkalmazva az eltolt elemek eredeti helyén minden esetben üres téglalap jelenik meg, ellenben az abszolút pozícionálással, ahol az üres téglalap nem jelenik meg. Az eltolt elemek eltakarják a helyükön maradt elemek azon részét, ami az eltolás hatására alájuk került.

      A height és width paraméterekkel abszolút pozícionálás esetén az eltolt elemek megjelenési területének a nagyságát adhatjuk meg. Ha ezekkel a magasság és szélesség méretekkel megadott hely a megjelenítendõ elemnek nem lenne elég nagy, akkor a böngészõ az owerflow értéknek megfelelõen cselekszik.

    11. Színek, hátterek
    12. A stíluslapok segítségével a HTML oldalon megjelenõ minden elemnek különbözõ színt, illetve háttérszínt definiálhatunk. Ez a HTML <BODY> tag BACKGROUND és BGCOLOR paraméterének, valamint néhány elem COLOR paraméterének a leegyszerûsítése. Az elemeknek a background-color kulcsszó megfelelõ értékûre állításával jelölhetünk ki háttérszínt. Ennek az értéke lehet egy szín, illetve a transzparent elõre definiált szimbólum, amelynek hatására az elem háttere átlátszó lesz. Az elemek elõtérszínét a color paraméterrel adhatjuk meg ugyanolyan módon, mint a háttérszínnél. Az elemek hátterének nemcsak színeket adhatunk meg, hanem tetszõleges háttérmintát is. Ezt a <BODY> tag BACKGROUND paraméterének megfelelõ background-image kódszó használatával érhetjük el.

      FONT {background-image:
        url (file://c:/dokumentumok/hatter.gif)}

      Ha a háttérminta elég kicsi, illetve a dekorálni kívánt elem foglal el viszonylag nagy helyet, akkor a background-repeat kulcsszó használatával megismételhetjük a mintát és így teljesen kitölti a rendelkezésre álló helyet. A background-repeat négyféle értéket vehet fel:

      A backgroung-attachment kódszóval megadható, hogy az oldal görgetésekor a megadott háttérgrafika az oldallal együtt gördüljön-e vagy maradjon az eredeti helyén. Ennek megfelelõen a scroll vagy a fixed értékek valamelyikét állíthatjuk be.

      A háttérgrafikákat a böngészõk alapesetben az oldal bal felsõ sarkában kezdik el megjeleníteni. Ezt az oldal készítõje a background-position kulcsszóval háromféle módon befolyásolhatja. Az egyik, hogy két hosszértéket ad meg, amelyek az ablak oldalától és tetejétõl mért távolságot határozzák meg. Továbbá ezt a két hosszúságot helyettesítheti százalékosan megadott számokkal, vagy harmadik lehetõségnek elõre definiált szimbólikus értékeket használhat. Ezek a szimbólumok center, left, top, right és bottom lehetnek.

    13. Betûkészletek és tulajdonságaik
    14. A weboldalak szerkesztésekor annak tartalmán kívül a megjelenítésre szánt betûk típusa is nagyon fontos. Egy rosszul megválasztott vagy nagyon extra betûtípus tönkreteheti a fáradtságos munkával elkészített weblapot. Ha csak azt vesszük figyelembe, hogy egy nekünk tetszõ, esetleg általunk kreált betûtípus nagyon szépen mutat az oldalunkon, ez önmagában kevés. Elõfordulhat ugyanis, hogy egy másik felhasználó gépén nem található meg ugyanaz a betûtípus és ez nála teljesen tönkreteheti a látványt. Ezért a megfelelõ betûtípus kiválasztása a HTML-ben nem a konkrét típus meghatározásával történik, hanem úgynevezett fontcsaládok-at vezettek be és ezek közül lehet választani. Egy fontcsaládba a tipográfiailag és elnevezésükben is hasonló fontok kerülnek. Ezek általában gond nélkül helyettesíthetõek egymással. A CSS-ben a font-family kulcsszóval, vesszõvel elválasztva adhatjuk meg a fontcsaládokat. A felhasználó böngészõje a kulcsszó után megadott értékeket sorra veszi és ha nem talál a gépen ennek megfelelõ betûtípust, akkor a lista további elemeit veszi szemügyre.

      P {font-family: "ariel, geneva, helvetia"}

      Ezen három család elemei körülbelül ugyanolyan típusú betûket takarnak, így szinte biztos, hogy a felhasználó gépén is van telepítve közülük legalább egy . A CSS viszont felkészült minden eshetõségre és élõre definiált öt olyan általános betûfajtát, aminek minden számítógépen meg kell feleljen legalább egy konkrét betûtípus. Ezek a következõek:

      A betûtípusokon túl még számos paraméterét állíthatjuk a szöveg karaktereinek. Ilyenek a betûstílus, betûvastagság, betûméret, sortávolság és a fontvariáns. Ezek sorban az alábbi értékeket vehetik fel:

      font-style

      font-weight

      font-size

      line-height: két egymás alatti sor alapvonalának távolsága.

      font-variant

    15. Igazítás
    16. A dokumentum szövegének a szavait a szövegsorhoz viszonyítva függõlegesen is igazíthatjuk. Ezt a vertical-align kulcsszó értékeinek megfelelõre állításával érhetjük el.

      Az ily módon definiált értékeken túl a függõleges igazítást, azaz függõleges irányba történõ eltolást megadhatjuk százalékosan is. Ez a százalékos érték az éppen aktuális sortávolság line-height százalékos hányada, ami annak megfelelõen, hogy pozitív vagy negatív, a szöveget fölfelé vagy lefelé csúsztatja el.
      A kiírandó szöveget a laphoz viszonyítva vízszintesen a text-align kódszó left(balra), right(jobbra), center(középre) és justify(sorkizártra) értékeivel igazíthatjuk.

    17. Papíron történõ megjelenés irányítása
    18. A böngészõben megjelenõ, képernyõre optimalizált oldalak nagyon mutatósak lehetnek mindaddig, amíg ki nem akarjuk nyomtatni azokat, mert a képernyõrõl olvasás rontja a szemet, fárasztó vagy csak egyszerûen nem szeretünk monitorról olvasni. Ebbõl az oldalkonverzióból adódó problémák (mint például az, hogy a képernyõre tervezett oldalak túl szélesek az A4-es lapokhoz és ebbõl adódóan a képek lelógnak a lapokról) kiküszöbölésére használhatunk bizonyos kulcsszavakat, amik befolyásolják a HTML oldalak kinyomtatott képét. Ezek közül az elsõ kettõ az oldaltörésre vonatkozik. A page-break-before és a page-break-after kulcsszavakkal azt meghatározhatjuk, hogy az elemek elõtt vagy mögött legyen-e oldaltörés. A fenti kulcsszavak a következõ értékeket vehetik fel:

      Ezen két paraméteren felül még a nyomtatandó oldalak margóját is beállíthatjuk a margin-left, margin-right, margin-top és margin-bottom kulcsszavak értékeivel. Ezeket a kulcsszavakat a CSS által bevezetett pszeudóelemmel, a @page elemmel együtt használhatjuk.

      @page {margin-right: 2cm}

      A size kulcsszóval az oldal méretét, illetve orientációját is megadhatjuk. Értékei a következõek lehetnek:

      A marks kulcsszó segítségével a nyomdai munkálatok segítésére alkalmas (crop) vágójeleket és (cross) illesztõjeleket helyezhetünk el a nyomtatandó területek szélein.

keretek tartalom létrehozás