< WebKészítés 2.5 /> Az ingyenes weblapszerkesztői oktatás

Tartalomjegyzék Üdvözlet, olvasó!

03

Internetes ismeretterjesztő

04

Tartalmi elemek HTML vagy XHTML? Honnét Tudnám, Mi Lenne... A nyelv szintaktikája A nyelv felépítése A fejléc és tag-jei Blokk-szerű szöveges elemek Sorbeli szöveges elemek Mire hivatottak a hivatkozások? Képek beszúrása Táblázatok Űrlapok és elemeik Érdekes címkék Hasznos tanácsok Végszó

Stílus és megjelenés Szintek és rangsoruk Szintaktika Dokumentumfa Dobozmodell Szegélyek, külső és belső margók Méretezés Pozícionálás Úsztatás Megjelenés Táblázatok stílusai Listák formázása Grafika testreszabása Idézőjelek használata Rövidítések, mozaikszavak Szövegformázás Álosztályok, álelemek Elavult címkék és attribútumok Oldalfelépítés kialakítása Listák használata menüként Hibakezelés Az XML és a CSS kapcsolata Modern CSS

Hogyan tovább?

05 06 07

08 09 10 11 13 15 17 18 20 22 26 30 34 35

36 37 37 39 41 42 44 46 47 48 50 52 54 56 56 57 60 62 63 65 67 68 69

70 Tartalomjegyzék -

Nettöri röviden Szerveroldali programok Kliensoldali programok

Üdvözlet, olvasó! Szervusz, Programmer_G vagyok, a WebKészítés 2.5 szerkesztője. Üdvözöllek abban a leírásban, ahol a továbbiakban nagy eséllyel el fogod sajátítani a weblapok szerkesztésének minden fortélyát!

Miért jó ez neked? Nem szeretném húzni senki idejét, hiszen "a Te időd nekem is drága". Ennél jobb reklámszöveget nem találtam, de a lényeget jól tükrözi. A következőkben lehetőséged nyílik megtanulni a webfejlesztést a manapság legelterjedtebben alkalmazott nyelvekkel. (XHTML, CSS, PHP, MySQL, JavaScript) Minden leírást igyekszem a reklámszöveghez hűen rövidre fogni és lényegre törően bemutatni. Ha végigolvasod az itt leírtakat, garantáltan képes leszel saját weblapot gyártani. De hiszen mindenhol ezt harsogják... miben különbözik az én leírásom a többi 100 másiktól? Következzenek a tények: a szabványos XHTML nyelvvel fogjuk elkészíteni a weblapok törzsanyagát, amely minden böngészőben garantáltan egyformán jelenik meg, akár a mobilkészüléken is. A CSS-nek köszönhetően olyan grafikai formázást végezhetünk, aminek csak töredéke lehetséges a HTML-ben. A JavaScript és a PHP (szerver- és kliensoldali műveletvégzők) lehetővé teszik, hogy honlapod dinamikussá tedd, saját fórumokat, hírleveleket kezelj, és a lehetőségeknek csak fantáziád szabhat határt. A MySQL adatbázis kezelővel pedig gyors és egyszerű módon tárolhatod adataidat, és persze biztonságosan.

Egy szó, mint száz...

Üdvözlet, olvasó! -

Ennyit a bevezetésről, ha sikerült meggyőzni, akkor "csapjunk is a lecsóba!" Eredményes tanulást kívánok! Ugorjunk az alapok elsajátításához!

Internetes ismeretterjesztő

Internetes ismeretterjesztő -

Ebben a fejezetben igyekszem röviden összefoglalni, amit feltétlen szükséges tudnod a honlapok működéséhez. Elkezdjük egy kis törivel, aztán bemutatásra kerülnek különböző programok, mik a későbbiekben hasznodra válhatnak...

Net töri röviden A sztorit manapság közel mindenki ismeri, hogy réges-régen (1969) az USA védelmi minisztériumában (ARPA) kifejlesztettek egy olyan csomagkapcsolt adatközlő rendszert (ARPAnet), ami a mai internet őseként emlegetett. A fő szempont egy olyan hálózat létrehozása volt, amely nem sérül meg, ha egyes elemek (szerverek) kiesnek, hiszen bármely másik pótolhatja azt (az esetleges támadásokra való tekintettel), hiszen minden gép kommunikál mindegyikkel. Szerencsére a hadviselés mellett a közéletben is gyorsan elterjedt. (1986 körül) A globális hálózat ma már korlátlan szabadságot biztosít és javítja az esélyegyenlőséget. A továbbiakban elsajátíthatod, hogy lehet a Tiéd is a Netes világ! [Továbbiak a net töriről: http://hu.wikipedia.org/wiki/Internet]

Az alapelvek közé tartozik, hogy minden gép elérhető legyen a másikról, ehhez viszont szükséges egy egyedi azonosító. Ez a gépek Internet Protokoll címe (IPv4 vagy csak IP) Ezt minden gép az őt internettel kiszolgálótól (kiszolgáló) kapja. Az IP cím 4 db, egymástól pontokkal elválasztott, 1 bájtos (1-256 ig terjedő) számból áll. (Pl.: 192.168.1.1) Ez a 32 bites azonosítás azonban véges variációi miatt manapság nem elegendő. Elfogyóban vannak a még kiosztható IP címek. A legtöbb gép már támogatja az IPv6-ot, ami sokkal nagyobb lehetőségeket nyújt. (128 bit) Ennek formája a következő: 16 bites csoportosítás, köztük kettőspontok. (Pl.: 2001:610:240:11:0:0:C100:1319) Már most érezhetjük, hogy ezek megjegyzése bizony komoly emberi memóriát igényel. Sokkal könnyebben társítunk neveket egy géphez, mint sablonos számokat. Erre a megoldás a DNS (Domain Name Service). Ezt nagyjából úgy kell elképzelni, hogy egy-egy központi gép hozzárendel egy IP címhez egy nevet. (Pl.: google.hu mögé bújik el a 74.125.87.105) Ezt a nevet domain címnek, magyarul tartománynévnek hívjuk. [Továbbiak az internetcímekről: http://hu.wikipedia.org/wiki/Domain]

[Továbbiak a protokollokról: http://hu.wikipedia.org/wiki/IP]

Fontos itt megemlíteni, hogy a Web nem ugyanaz, mint az Internet. Az Internet bármilyen kapcsolat jelenthet gépek között (ftp, levelezés, stb), a Web viszont csak az, ami a böngészőnkben megjelenik lapok formájában. A Web (World Wide Web) 1989-ben indult útjára az európai CERN-ből. (Európai Részecskefizikai Laboratórium) Tim Berners-Lee célja a kutatási eredmények megosztása volt, egyszerű szöveges formában, más eredményekre mutató hiperhivatkozásokkal összefűzve. Innét ered a név: Hipertextes dokumentum, és HTTP (HyperText transfer protocoll). [Az első weblap: http://www.w3.org/History/19921103-hypertext/hypertext/WWW/TheProject.html]

A következőkben megismerkedünk néhány elterjedt kliens- és szerveroldali programmal, és azok telepítésével a gépünkön.

Internetes ismeretterjesztő - Net töri röviden

Kétfajta számítógép létezik funkció szempontjából az interneten: a szerver és kliens. A szerver dolga hogy kiszolgálja a rajta lévő adatokkal a klienseket (amik mögött mi ülünk). A kiszolgálókon ugyanúgy programok futnak, mint otthoni klienseinken. Minden egyes szolgáltatás egy programhoz van kötve. Hogy az IP-re érkező adatok közül minden program kiválaszthassa a magának valót, az IP-k fölé kifejlesztettek egy-egy saját protokollt, melyek ún. portokat (átjárókat) használnak azonosításra. Pl.: 192.168.1.1:80 vagy 192.168.1.1:25 (http portja: 80, ftp portja 25 általában) Tartománynevekkel ugyanez: http://sajatcim.hu vagy ftp://sajatcim.hu.

Szerveroldali programok Napjainkban a szerverek jelentős többsége Linux operációs rendszeren fut. Nekünk csak annyit szükséges tudni róluk, hogy nagy hangsúlyt fektet az egyes felhasználók azonosítására és azok jogaira az egyes fájlokhoz. Az átlag felhasználók körében legelterjedtebb operációs rendszerre, a Windowsra fogom a továbbiakban bemutatni a szerverprogramok telepítését. Ha igazi honlapszerkesztők szeretnénk lenni, szükségünk lesz egy saját "szerverre", amin tesztelhetjük, hogy sikerültek alkotásaink. Megjegyzés: Ha csak helyi (offline) használatra szeretnénk (pl. CD-k, DVD-k menüjeként) weblapot készíteni, ez esetben nem lesz szükségünk a PHP és MySQL nyelvekre, sem a szerveroldali programokra. Első lépésként látogassuk meg a www.wampserver.com oldalt és töltsük le a WAMP (Windws Apache MySQL PHP server) legújabb Windowsra tervezett változatát. Ez a programcsomag tartalmazza a napjaink legelterjedtebb szerveroldali programjait, az Apache web szervert MySQL adatbázis kezelőt és a PHP műveletvégzőt. (Persze használhatsz akár IIS webszervert vagy Macintosh operációs rendszert is nyugodtan.) [További web szerverek: http://hu.wikipedia.org/wiki/Webszerver]

Letöltés után futtasd a telepítőt. Rá fog kérdezni, mi legyen a telepítési könyvtár. Ajánlott a meghajtó gyökerében elhelyezni, pl.: "C:\Server\" Így ha szerverünk interneten elérhető is, más fájlokhoz nem fognak hozzáférni illetéktelenek. A sikeres telepítés és az indítás után a tálcán meg fog jelenni egy zöld/sárga/piros "W" ikon. A színek jelzik a 3 program állapotát. Jobb illetve bal kattintásokkal rajta megvizsgálhatjuk az egyes részek konfigurációs fájljait és beállíthatjuk a magyar nyelvű menüt is. A "C:\Server\www\" könyvtár lesz ezek után a házi web szerverünk gyökérmappája. (Ide kell majd bepakolni készülő honlapjaink mappáit.) Ha a szolgáltatások el vannak indítva, akkor pedig saját gépünkről a böngészőnkben beírt "http://localhost/" címre meg is jelenik szerverünk kezelőfelülete. Itt a phpmyadmin segítségével hozzáférhetünk adatbázisainkhoz vagy egy Projektet (mappát) választva megtekinthetjük honlapunk működés közben. Ha neten keresztül szeretnéd másoknak megmutatni, mit alkottál, fontos hogy ONLINE állapotban legyen a WAMP. A külső IP címed beírásával így meg fog jelenni nekik is az oldal.

Internetes ismeretterjesztő - Szerveroldali programok

Kis help a WAMP-hoz

Kliensoldali programok A honlapszerkesztést a legegyszerűbben az angol WYSIWYG (What You See Is What You Get) mozaikszóval lehet jellemezni. Ez magyarul amolyan írd be és nézd meg kategória. (Beírsz pár kódot és megnézed az eredményt, majd újra...) Egyszóval a továbbiakban leírtakkal és egy kis leleményességgel Te is igazi honlapszerkesztővé válhatsz! Fontos megemlíteni, hogy nem kell semmiféle, a mátrix filmből ismert kódokra gondolni. Mindent szöveges formában fogunk leírni a fájljainkba. Tehát nem lesz másra, csak egy szövegszerkesztő programra szükségünk. Persze nem az Office-ból ismert Word a legmegfelelőbb erre a célra. Aki nem szeret telepítgetni, neki mindig kéznél lesz a Windowsba rejtett Jegyzettömb (Notepad). A többieknek javaslom az EditPlus program letöltését innét: www.editplus.com, vagy a mozilla Kompozerjét innét: www.kompozer.net Komolyabb célokra az Adobe Dreamwawerje talán a legmegfelelőbb választás... [Továbbiak: http://hu.wikipedia.org/wiki/HTML-szerkesztő-programok-listája]

A leglényegesebbet persze ki is fejeltettem. Szükségünk lesz még ún. böngészőkre is hogy élvezhessük későbbi munkánk gyümölcsét. A Windowsban megbújt Internet Explorert senkinek sem kell bemutatnom, illetve feltehetően mindenki ismeri a Mozilla Firefoxát, vagy az Operát, Safarit, Google Chromeot, és a lista itt még közel sem ér véget. Javasolt egyszerre több, de legalább 2 használata a fentiekből. A későbbiekben ígérem, kiderül miért. [Továbbiak a böngészőkről: http://hu.wikipedia.org/wiki/Webböngésző]

Most már minden lényeges program és alapismeret a rendelkezésünkre áll, hogy belecsapjunk a sűrűjébe! Ha még nem sikerült elvenni a kedved egy honlap készítésétől, várlak a következő fejezetben!

Internetes ismeretterjesztő - Kliensoldali programok

A böngészőkről viszont tudnunk kell egy fontos jellemzőt. Mégpedig, hogy honnét tudják, hogyan kell megjeleníteniük a különböző képi, hang, videó vagy szöveges elemeket. Amikor letöltünk/megtekintünk egy fájlt, akkor a böngésző egy kérést küld a fájlt tároló web szerver felé. Ezután a böngésző megkapja a fájlt, egy nyers adattömeg formájában. (Sok 1 és 0 ha úgy tetszik.) Hogy tudja, milyen típusúval áll szemben, a tárolótól a böngésző megkapja a fájl MIME típusát is. Ez alapján tudja, hogy mit kell kezdeni a fájllal. Pl.: ha képet kap, meg kell jelenítenie, ha videót, el kell indítani egy médialejátszót, ha HTML oldalt, akkor fel kell építenie a weboldalt stb. Néhány MIME típus példaként: weblap [text/html], stíluslap [text/css], JPEG kép [image/jpeg], MPEG videó [video/mpeg], ...

Tartalmi elemek

Tartalmi elemek - Kliensoldali programok

Csak semmi pánik! Most már mindent tudsz, hogy ténylegesen a honlapszerkesztéssel foglalkozhassunk. Meg fogod ismerni, miből épül fel egy honlap, majd bemutatom a fontosabb HTML elemeket és ezek XHTML-beli megfelelőit is. Sőt, kipróbálni is lesz alkalmad a frissen tanultakat. Ha itt végzel, gyakorlatilag képes leszel saját, statikus weblapot készíteni.

HTML vagy XHTML? Honnét Tudnám Mi Lenne... Először egy kis törivel kezdeném. (Tudom, nem mindenki szereti az ilyet, de ez más lesz, mint a suliban!) A HTML nem más, mint a kb 1993-óta létező HyperText Markup Language rövidítése. Magyarul: Hipertextes dokumentum-leírónyelv. Fő előnye, hogy platform független. (Nem függ operációs rendszertől.) A funkciója eredetileg az volt, hogy egy gyors és könnyen formázható szöveges információkat közlő eszköz legyen egymásra mutató hivatkozásokkal. Tehát a HTML, mint leírónyelv, egy SGML (Standard Generalized Markup Language) jelölőrendszer. Ez a jelölőrendszer egyrészt ASCII karakterekből (egyszerű szöveg) áll, másrészt pedig olyan címkékből, amik a böngésző számára egyértelműen felismerhetők és velük formázhatók az oldal elemei. Azután létrejött egy új szervezet a World Wide Web Consortium (W3C), mely szárnyai alá vette a HTML-t és onnéttól kezdve elindult a Web úttörése. A W3C 1996-tól kezdve elfogadta a táblázatokat, a kereteket, a stíluslapokat, az appleteket, a szkripteket, (ezekről később részletesebben írok) és még sok minden mást, amivel a Web dokumentumok egyre inkább a látványvilág felé kezdtek orientálódni, és nem a szöveges információközlés felé, ami az eredeti cél volt. Egyre jobban grafikussá váltak a felületek. Elindult a böngészők versenye ezek minél gazdagabb megjelenítésére. Az események egyetlen nagy hátránya: a különböző böngészők nem teljesen kompatibilisek a szabványokkal. Ezért fennáll az esély, hogy egyes típusok másképpen jelenítenek meg egy s mást. Manapság a mobilinternet terjedésével együtt megindult egy szabványosítási folyamat. A W3C létrehozta az XHTML-t (Extensible HTML), ami már SGML helyett az XML jelölőrendszeren alapul és napjaink böngészői egységesen preferálják. Használata ajánlott, hiszen a sokkal korlátozottabb kódhasználatból adódóan javul oldalunk kompatibilitása, illetve egyszerűsödik azok egy külső szerveroldali programmal való generálása is. Végül pedig Neked, mint szerkesztőnek is sokkal könnyebb dolgod lesz. [HTML-ről bővebben: http://hu.wikipedia.org/wiki/html]

El kell oszlatnom azonban néhány tévhitet. Az XHTML nem jelent feltétlenül előnyt a mobiltelefonos böngészésben, sem az elterjedtségben. A jelenleg XHTML-ben írt oldalak többsége is hibás. Illetve az sem igaz, hogy ezzel felkészítjük honlapunk a jövőre, hiszen a jövő nagy valószínűséggel a fejlesztés alatt álló HTML 5-é. (Ez a nyelv visszafele kompatibilis a régiekkel, mindezek mellett az XHTML-hez hasonló előnyökkel rendelkezik.) A szintén fejlesztés alatt álló XHTML 2 viszont egy teljesen új irányvonalat képvisel. Mivel a fent tárgyalt két nyelv nagyon hasonló és nem jelenthető ki egyértelműen, melyik "jobb", így a továbbiakban egyszerre fogom bemutatni a HTML és XHTML nyelveket, mindenhol felhívva a figyelmet a köztük lévő eltérésekre.

Tartalmi elemek - HTML vagy XHTML? Honnét Tudnám Mi Lenne...

[XHTML-ről bővebben: http://hu.wikipedia.org/wiki/xhtml]

A nyelv szintaktikája A HTML nyelv szintaktikája nagyon egyszerű. Amint azt a bevezetőben is említettem szokták (WYSIWYG) írd be és nézd meg kategóriának nevezni. Felvetődik itt a kérdés: hogyan különbözeti meg a böngésző az egyszerű szöveget a Tag-ektől? (Talán a címke szó a legjobb magyar fordítás rá.) A válasz: őket relációjelek közé kell tenni. Így: (A gyengébbek kedvéért AltGr + í és AltGr + y.) Fontos hozzátennem, hogy ez a nyelv nem Chase Sensitive (A kis és nagybetűvel írt Tag-et egyaránt elfogadja.) Az XHTML viszont megköveteli a kisbetűk használatát! A jövőben erre ügyeljünk. A Tag-ek általában egy adott szakaszra vonatkoznak, így kezdő- és záró elemből állnak és közéjük kerül a formázandó szöveg. Pl.: ... (bold ~ félkövér) Látható, hogy a záró elem egy "/" jellel különbözik csak a kezdőtől. Létezik egy másik típus is, mikor összevonjuk e kettőt:
(break ~ új sor) vagy

---

(horizontal ruler ~ vízszintes vonal) Az XHTML szerint ez utóbbiakat is kötelező lezárni /-rel, a HTML-ben ezt elhagyhatjuk. Lehetőség van ezen elemek különálló tag-gel lezárására, de az emberi lustaság általában győz és marad az összevont. :) Tegyünk is egy próbát! A honlap Kódtesztelőjébe írjuk be a "sima és vastag" sort! Ha az eredmény: "sima és vastag", akkor létrehoztuk életünk első, picit gyenge honlapját! A címkét értelmezi a böngésző és nem írja ki, hanem formázza a szöveget. Most próbáljuk ki pár sorral (br) lejjebb ugyanezt dőlten (i ~ italic) és aláhúzva (u ~ underline)! Már csak egy megválaszolatlan kérdés merülhetett fel benned. Mi van olyankor, ha mondjuk színezni akarjuk a szövegeket. Minden színhez tartozik egy külön Tag? Sokkal egyszerűbb a megoldás: a Tag-eken belül lehetőség nyílik attribútumok megadására. Az adott attribútumot a Tag-be írjuk, majd utána egyenlőségjellel ( = ) adjuk meg neki az értékét. Az XHTML annyit csavar rajta, hogy idézőjelek közé kell tennünk az értékeket ( " " vagy ' ' ), illetve minden attribútumnak értékkel kell rendelkeznie. Tehát teljesen valahogy így néz ki: ... Akkor most lássuk hogyan is néz ki egy elválasztó vonal piros színben. A tanult módon kezdjük az írást:

---

Nem is olyan nehéz, csak egy kis angoltudást igényel, hiszen sokféle paraméter és érték létezik. (A későbbiekben részletes bemutatásra kerülnek.) peldak/xhtml/ismerkedes sima és vastag




sima és dőlt sima és aláhúzott

---

normál vonal

---

piros vonal

---

kék vonal

Remélem eddig érthető voltam, és sikerültek a lelkes gyakorlások. (Ha még nem említettem, a fájlokat ".htm" vagy ".html"-ként kell menteni!)

Tartalmi elemek - A nyelv szintaktikája




A nyelv felépítése Mint azt már említettem, a HTML / XHTML nem egységes, így tudatnunk kéne valahogy a böngészőnkkel, hogy mit kap tőlünk. Erre szolgál a dokumentumtípus-definíció (DTD). Hiányában természetesen nem dől össze a világ, böngészőnk alapértelmezése veszi kézbe a dolgokat. Ennek ellenére erősen ajánlott mindig megadni. Honlapunk első sora ezekkel kezdődhet:

Ez a sor általában a böngésző alapértelmezés is. Ezt alkalmazzuk, ha HTML 4-ben írjuk az oldalt!

Ezt a meghatározást akkor használjuk, ha XHTML 1.0 kódot használunk, viszont még szeretnénk a HTML 4 néhány tulajdonságát kihasználni régebbi böngészőkön.

Ezt csak akkor használjuk ha XHTML 1.0-ban is kereteket (frame) szeretnénk alkalmazni, hiszen ott nem tartozik a szigorított szabályok közé ez a módszer.

Ezt akkor használjuk, ha szigorúan meg szeretnénk feleltetni az XHTML 1.0 szabványnak a stíluslapokkal együtt.

A HTML jelölőrendszere strukturálisan felépített. (külön-külön egymásra épülő részekre osztott) A 2 legfőbb rész: a FEJLÉC (angolul: HEADER) és a TÖRZS (angolul: BODY). A fejlécbe tesszük az olyan dolgokat, ami általában nem látható (szerző neve, stb...). A törzs az oldal látható része. Itt mennek végbe a formázások és a szövegeket, adatokat is itt közöljük. Mindez pedig mivel a HTML része, ezért egy tag közé tesszük. Most már nem nehéz kitalálni, hogy is fogjuk őket használni... ... ...

Hoppá, itt valami más is van! A lang honlapunk szöveges tartalmának elsődleges nyelvét határozza meg. Nem kell aggódni, ez leginkább csak a keresők és szövegfelolvasók miatt szükséges. (Ettől még írhatunk több nyelven is, ha azt az más tag-ekben ugyanezzel a

Tartalmi elemek - A nyelv felépítése

Ez a meghatározás pedig XHTML 1.1 szerinti honlapkódokat jelent, ami jelenleg a legszigorúbb szabályok követését jelenti.

módszerrel megadjuk.) Aztán jön a két xml-es attribútum. Ezek használata csak akkor szabad, ha az XHTML mellett döntünk. Most már ideje lenne megismerkedni a két ... helyére írható kódokkal, nem? peldak/xhtml/szabalyos

Tartalmi elemek - A nyelv felépítése

ez itt az oldal törzse

vastagon szedett szöveg

---

dőlt szöveg

---

aláhúzott szöveg

---

A fejléc és tag-jei Lássunk neki a fejléc lefejezésének... Ahogy azt már említettem, a fejlécbe () kerül minden a böngésző számára fontos, számunkra viszont többnyire láthatatlan elem. Kezdjük hát rögtön a kivétellel: a . Ezzel a Tag-gel adhatjuk meg leendő honlapunk címsorában megjelenő szöveget. Amit tudni kell róla, hogy nincsenek attribútumai és csak egyszerű szöveges szöveg (remélem, értitek... ) írható közé, illetve ennek hosszát egyes böngészők korlátozhatják. Ezt követi általában egy rakás <meta />. Létezik belőle http-equiv-es és name-es is (egyszerre csak az egyik alkalmazható), de mindkettőnek rendelkeznie kell a content attribútummal. Tulajdonképpen ők csak segítik a böngészők dolgát bizonyos tulajdonságok előre definiálásával. Hiányukban a böngésző alapértelmezése fog történni. A fontosabbak a következők: <meta http-equiv="content-type" content="text/html; charset=UTF-8" />

Weblapunk tartalomtípusát (MIME) itt adhatjuk meg (text/html vagy application/xhtml+xml) és itt kap helyet a HTML fájl karaktereinek kódlapja. Ha nincs definiálva, akkor a iso-8859-2 lép életbe. Létezik még UTF-8, ANSI és Unicode... Megjegyzés: az application/xhtml+xml tartalomtípust sajnos nem támogatja az IE. Helyes XHTML lapokhoz ezt kéne alkalmazni, de a kompatibilitás érdekében erről le kell mondanunk. Érdemes a <meta http-equiv="refresh" content="5;url=http://www.google.hu" /> Az oldal átirányítódik a www.google.hu-ra 5 másodperc után...

Tartalmi elemek - A fejléc és tag-jei

peldak/xhtml/frissit

<meta http-equiv="pragma" content="no-cache" /> <meta http-equiv="cache-control" content="no-cache, must-revalidate" />

A böngészők tárolnak egy példányt a weblapunk elemeiről a felhasználó merevlemezén a következő gyorsabb betöltés érdekében. Ezt az un. cache-t kapcsolhatjuk ki e két sorral. Böngészőtől függ, melyik működik. (Gyakran frissített képi elemek esetén ajánlott.) <meta http-equiv="X-UA-Compatible" content="IE=8" /> <meta http-equiv="imagetoolbar" content="no" />

Csak az Internet Explorer értelmezi a fenti két sort. Az elsővel megadható, hogy az IE melyik változatára készült az oldalunk. A "kompatibilitási nézet" ennek megfelelően értelmezi. A másodikkal régebbi IE-k esetén a képeken megjelenő kis sávot tűntethetjük el. <meta name="revisit-after" content="5 days" />

A már meglátogatott hivatkozások egy rövid ideig más színnel jelennek meg. Ennek elévülését szabályozhatjuk a fenti formában. <meta <meta <meta <meta

name="author" content="készítő" /> name="copyright" content="jogi tudnivalók" /> name="description" content="rövid leírás" /> name="keywords" content="kulcsszó1, kulcsszó2, ..." />

A fenti 4 meta Tag-hoz nem szándékozom különösebb leírást mellékelni.

<meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <meta http-equiv="content-language" content="hu-HUN" /> <meta name="author" content="készítő" /> <meta name="copyright" content="jogi tudnivalók" /> <meta name="description" content="rövid leírás" /> <meta name="keywords" content="kulcsszó1, kulcsszó2, ..." /> Ez egy komplett oldal fejléce. Érdemes mindig ebből kiindulni.

Tartalmi elemek - A fejléc és tag-jei

peldak/xhtml/fejlec

Blokk szerű szöveges elemek Rajta hát, lessük meg a body-ját! Minden, mi szemnek ingere, itt követhetjük el, a címkék között. Az XHTML-ben megkötés, hogy nem lehet kapásból szöveget írni a törzsbe, hanem előtte valamilyen szöveges elemet, például egy bekezdést kell nyitnunk. Mielőtt rátérnék a többi megoldásra, tisztáznunk kell a következőket: blokkszerűnek az egy v. több sor magas és teljes képernyő széles téglalapszerű elemet, sorbelinek pedig az egy sor magas és adott szélességü elemet hívjuk. Esztétikus és praktikus a címek és alcímek kiemelése. Erre szolgálnak a header tag-ek:

,

, ... egészen

-ig. A számok itt a méreteket jelölik, ugyanis az 1 a legnagyobb és a 6 a legkisebb, de a gyakorlatban 1-3-ig használjuk őket. Jellemzőjük hogy általános esetben a böngésző alapértelmezése a tényleges méret, illetve előtte és utána térköz (üres sor) választja el őket a többi elemtől. Ez után jöhet a fent említett bekezdés (v. általános szöveg)

...

. Ő is rendelkezik alapesetben a térköz tulajdonsággal. Egy bekezdésen belül, a már ismert sortöréssel
tördelhetjük a szöveget. Ha próbáltál már pár sort megjeleníteni, láthattad, teljesen mindegy a fájlban hová teszed a sortörést vagy hány szóközt, illetve tab-ot használsz. Folyamatos szöveget kapsz eredményként csak egy-egy szóközzel. Ha mindenképpen ragaszkodni szeretnél ehhez a szöveges (txt) fájlokból ismert formázáshoz, használhatod a <pre>... (Preformatted ~ előre formázott) címkét. Ha pedig több ún. törés nélküli közöket szeretnél egymás után tenni, azt az ismételt szóközök helyére tett   speciális karakterrel (további speciális karakterek listája a kódjegyzékben) érheted el. Idézetekhez (beljebb húzott bekezdés) szokás a

blokk idézetet használata. Megegyezik gyakorlatilag a fentiekkel, csak bal oldali margója nagyobb és benne közvetlenül csak blokk egység következhet.

<meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <meta http-equiv="content-language" content="hu-HUN" />

Ez egy H1-es szöveg.

Ez egy H2-es szöveg.

Ez egy H3-as szöveg.

Ez egy H4-es szöveg.

Ez egy H5-ös szöveg.

Ez egy H6-os szöveg.

Ez itt egy bekezdés, benne pedig
sortörések is lehetnek...    majd néhány szóköz

<pre> Szabad szöveg és

Tartalmi elemek - Blokk szerű szöveges elemek

peldak/xhtml/szovegblokk

sortörés benne. majd néhány szóköz

blokk idézet

Ha már a beljebb húzásoknál tartunk, meg kell említeni a klasszikus típusát, a felsorolást is. Három típusa, rendezett (Ordered List), rendezetlen (Unordered List) és definíció (Definition List) lista létezik. A Tag-jeik a rövidítésükből következnek:

,

és

. A különbség a rendezett és rendezetlen közt, hogy előbbi számozással illetve betűzéssel, ezzel szemben utóbbi csak egyforma szimbólumokkal jelölt. Ám ezekkel még csak a listát jeleztük, belső elemeiket (List Item) első kettőnél a

...

címkék fogják közre. A definíció kicsit bonyolultabb, hiszen kell lenni egy definiáltnak (

...

) és egy vagy több definíciónak (

...

). Megjegyezném, hogy HTML-ben elég volt csak a nyitó

,

,

-t használni. Az őt követő szöveg mind egy elemet jelentett, amíg a következővel új elem nem lett létrehozva. Bármilyen meglepő, a vonal (

---

) is a fentiekhez hasonló ún. blokk egység. Végül pedig említeném a kontaktinformációk számára kitalált

...

címkét. Ritkán használjuk, tulajdonképpen csak egy sima bekezdés dőlt betűs szöveggel.

<meta http-equiv="content-type" content="text/html;charset=UTF-8"/> <meta http-equiv="content-language" content="hu-HUN" />

1. rendezett listaelem
2. rendezett listaelem
3. rendezett listaelem

• rendezetlen listaelem
• rendezetlen listaelem
• • beágyazott rendezetlen listaelem
  • beágyazott rendezetlen listaelem
• rendezetlen listaelem

első definiálandó elem

az első elem definíciója, amely lehet akár többsoros leírás is

második definiálandó elem

a második elem definíciója, amely lehet akár egy többsoros leírás is

---

Készítő neve, címe, telefonszáma

Tartalmi elemek - Blokk szerű szöveges elemek

peldak/xhtml/listak

Sorbeli szöveges elemek De hogy formázhatunk egy-egy, a blokkon belüli kisebb szövegegységeket? Magától érthetődik: sorbeli elemmel! A méretet a környezetéhez képest növelhetjük, illetve csökkenthetjük a nagyít és <small>kicsinyít Tag-ekkel. Beljebb húzáshoz a behúzás, vastagításhoz a bold~vastag, döntéshez a italic~dőlt, áthúzáshoz a <del>deleted~áthúzott, alsó és felső indexhez pedig a <sup>felső és <sub>alsó használhatók. Utóbbiakat könnyen megjegyezhetjük, hiszen a "P" és "b" "karikája" jelzi a magasságot. Az <em> kihangsúlyoz és a <strong> pedig még ennél is jobban. A HTML weblapok számára még alkalmazható a <strike>áthúz és az <s>strike~áthúz, az underline~aláhúz és a középre is. Ők XHTML-ben kerülendők! A speciális formázáshoz a HTML-ben a ... címkét alkalmazták, az XHTMLben viszont kerülendő ez a forma, így a <span>... javasolt. A későbbiekben megtanuljuk majd őt tovább formázni, jelenleg csak azt kell tudni, hogy vele elkülöníthetők bizonyos szavak, szócsoportok a többitől egy blokkon belül. Speciális esetben még lehet használni: a kód, <samp>példa és változó címkéket programkódok megjelenítésére, és a keyboardt billentyű jelzésére. A ... más forrásból való ízelítésre jó, a ... nyomtatott stílusú szöveget, a ... zárt formula definícióját, a ... kétirányú szöveget produkál. Az rövidítés~abbrevation fontos funkciója pedig, hogy egy title attribútummal felvértezve meg fog jelenni a fölötte tartott egér hatására annak értéke (gyorstipp). Ennek egy változata az mozaikszó, mely ugyan szabványos, mégis egyre inkább kiszorulni látszik. Fontos, hogy ezt a title attribútumot minden HTML/XHTML body-beli eleme megkaphatja.

<meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <meta http-equiv="content-language" content="hu-HUN" />

Ez itt egy bekezdés. Benne pedig különböző formázások, pl:
<span style="color:red">Piros szinű szöveg
írdki('Helló Világ!'); pc-s kódsor
<samp>írdki(ide,mit,mikor) példa
$válzotó
F12 billentyű
idézett szöveg
nyomtatott szöveg
definíció
rövidítés

Nagyítás és <small>kicsinyítés
behúzott
vastag, dőlt, <del>áthúzott


Tartalmi elemek - Sorbeli szöveges elemek

peldak/xhtml/sorbeliszoveg

<sup>Felső és <sub>alsó index
<em>Kihangsúlyozott és <strong>még hangsúlyozottabb

Mire hivatottak a hivatkozások? Az ötlet, hogy dokumentumok közt kapcsolatot létesítsünk egymásra mutató elemekkel már a HTML előtt is jelen volt, mégis a világhálót segítette mai pozíciójára. Az ilyen funkcióval bíró elem, az ún. hivatkozás lehet bármi, egy kép, egy szó, egy nyomógomb... Közös bennük, hogy a böngészőben a közismert kéz kurzor jelenik meg, ha fölöttük tartjuk egérmutatónkat. Az szoveg (anchor, azaz horgony) címke segítségével hozhatunk létre ilyen linket (magyarul hivatkozást). A nyitó és záró címkék közé írt szöveg fog megjelenni a link szövegeként. A kezdő címkébe mindössze a href attribútumot kötelező írni. Illetve a title ajánlott még a felhasználók miatt. Utóbbinak az értéke fog megjelenni mikor az egeret fölötte tartjuk, előbbinek az értéke annak a weblapnak vagy fájlnak (általánosan: erőforrás) a címe, ahová a link mutat. Ez a cím tulajdonképpen egy elérési útvonal a fájlhoz. További attribútumok még a tabindex, mely értéke az a szám, ahányadik TAB után ugorik linkünkre a kijelölés, illetve az accesskey, melynek értéke egy karakter, amit megnyomva ugrik ide a kijelölés. A type-pel pedig a cél fájl MIME típusát definiálhatjuk előre. Érdemes még megjegyezni, hogy ez a Tag sorbeli, tehát egy blokk egység köré nem tehető.

Hogy bármit egyértelműen meghatározhassunk az interneten, un. URL-t (Uniform Resource Locator-t ~ egységes erőforrás-megnevezőt) használunk. Egy URL a következőképpen néz ki: protokoll://felhasználónév:jelszó@teljes_tartománynév_vagy_IP:port/dokum entum_elérési_útvonala . A protokollal kiválasztjuk a szerveren végrehajtani kívánt szolgáltatást. Néhány ismert: http, ftp, mailto, file... őket a kettőspont zárja le. A // után és a / előtt a szerver elérését kell megadnunk domain címmel vagy IP-vel. Ezt követi kettősponttal a szolgáltatás portszáma. Ez honlapoknál általában 80, ftp-nél általában 25. Ha nem névtelen bejelentkezést használunk, akkor ezt megelőzi még egy @ és előtte a felhasználónév és kettősponttal utána a jelszó. Belátható hogy ezen bejelentkezési mód lehetséges, ám nem feltétlen biztonságos. Végül a / után pedig magának a kívánt dokumentumnak az elérését adhatjuk meg a Linuxból ismert könyvtárszerkezet jelöléseivel (/). A file: protokoll esetén pedig az aktuális operációs rendszer könyvtárszerkezetének jelölése kell. Pl: Windowsnál a vissza per (\). Ezt követhetik még lekérdező, értékadó (?paraméter=érték¶m2=érték2&...), dokumentumon belüli jelölő (#), stb. A hivatkozás URL-jét megadhatjuk abszolút módon, mikor a teljes fenti URL-t kiírjuk. Pl.: "file://C:\server\honlapom\kepek\kep.jpg" vagy "http://www.honlapom.hu/kepek/kep.jpg" Hátrány, hogy csak az adott helyi gépen vagy internetcímen működik. Az efféle problémát a relatív módszer oldja meg. Pl.: "kepek/kep.jpg" Ebben az esetben a példabeli kép helye a weboldalunkhoz képest lett meghatározva, ami később automatikusan kiegészül az adott weboldal teljes URL-jével. Ilyenkor mindig a Linuxbeli könyvtárjelölőket kell használnunk (/). Az egy mappával feljebblépést a ../ jelöli, ezt kell ismételni, akárhányszor egy szinttel feljebb lépünk.

Tartalmi elemek - Mire hivatottak a hivatkozások?

Erőforrások megnevezése

Tehát ha 2 mappával feljebb található a weblaptól, akkor: "../../kepek/kep.jpg" Érdemes még tudni, hogy egy a fejlécben elhelyezett az összes relatív útvonalat az itt megadottal egészíti ki és nem a weboldalunk URL-jével. E sorral minden relatív hivatkozás abszolúttá tehető. Lehetőség nyílik még lapunkon belüli ugrásokra, ún. helyi hivatkozásokra vagy könyvjelzőkre is. Ekkor egy a már előre definiált id="azonosito"-vel rendelkező elemhez ugorhatunk az Ugrás az azonosítóhoz! módszerrel. Természetesen a # előtt abszolút URL-t is megadhatunk. Itt fűzném még hozzá, hogy vannak bizonyos gyakori hibák, melyeket jó, ha figyelembe veszel a szerkesztéskor. Internetcímek esetén mindig normál per jelet alkalmazunk (/) a Windows vissza per jelével (\) ellentétben. A fájlok nevében lehetőleg ne használj ékezeteket, szóközöket és speciális karaktereket sem! Ha mégis szükséges, akkor ezt az URL-ben csak kódolva teheted. (pl: %xx, ahol az xx a karakter kétjegyű, hexadecimális ASCII kódja) Az & karaktert XHTML-ben csak így lehet: & ! Végül pedig általában a szerverek kis/nagybetű érzékenyek! Szóval, ha a fájlod nagybetűvel kezdődik, akkor a honlapod hivatkozásában is úgy add meg azt!

<meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <meta http-equiv="content-language" content="hu-HUN" />

Ez egy abszolút hivatkozás a google.hu-ra

Ez egy relatív hivatkozás egy képre.

Könyvjelző a B betűhöz vagy az A betűhöz!

E-mail küldése a [email protected] címre!

E-mail küldése az előző címre weblap témával!

---

A

---

B

Tartalmi elemek - Mire hivatottak a hivatkozások?

peldak/xhtml/hivatkozas

Színek megadása Először is színezném kicsit az eddig elhangzottakat... A színek meghatározása 2 féle képen is történhet a (X)HTML-ben. Az egyik mód, hogy a szín angol megfelelőjét alkalmazzuk, viszont ekkor csak 16 féle színt különböztethetünk meg. A másik lehetőség az ún. színkódok használata. Itt a színt számokkal (hexadecimálisan) adhatjuk meg. Minden, az RGB (Red,Green,Blue azaz Piros,Zöld,Kék) additív színkeveréssel előállítható színt átírhatunk ilyen formába is. A három alapszínnek a tartománya 0-255 ig terjedhet. (Ez pontosan egy byte.) Így tehát a kikeverhető színek száma 16,7 milliót éri el (True Color). Ami az emberi szemnek már bőségesen elég. :) Tehát például ha fehér színt akarunk előállítani, akkor átszámolhatjuk a 255,255,255 GRB arányt és akkor #FFFFFF színkódot kapunk, vagy beírjuk angolul, hogy white. Ez az átszámolásos cucc gondolom, senkinek sem megy fejből, így az EditPlus-t használóknak ott a kis paletta ikon a második sorban, vagy használhatja bárki a WebKészítés kódjegyzékét is. A profiknak pedig létezik egy ügyes kis program, a Color Cop, mi kielégít minden szín igényt! Igyekeztem kihagyni, de szót kell ejteni a color (szövegszín) és bgcolor (háttérszín) attribútumról, ennek segítségével adhatjuk meg egy címkére vonatkozóan az előbb tanult színeket. Az XHTML-ben már ne használjuk ezeket! [A Color Cop letöltése: http://colorcop.net/download]

Képek beszúrása Manapság szinte nincs is olyan honlap, amin ne lennének képek. Őket az címkével szúrhatjuk be. XHTML-ben a border="0" helyett a stíluslapban fogjuk megadni,

hogy a keretet levegye hivatkozások esetén. Jut eszembe, a kép egy sorbeli elem, tehát egy blokkon (pl:

) belül kell alkalmaznunk, illetve így a szintén sorbeli közé is tehetjük.

Ha egy képet több hivatkozásra akarunk osztani anélkül, hogy szétvágnánk, szükségünk lesz egy képre a usemap="azonosito"-val, mely az utána következő <map> azonosítójára hivatkozik. <map id="azonosito"> <area href="link" title="gyorstipp" alt="helyettesítő" shape="alakzat" coords="koordináták" /> ...

Itt az <area>-k jelölik az egyes helyeket. A shape (alakzat) értéke lehet: rect (ekkor a coords koordináták: "bal-x,fent-y,jobb-x,lent-y"), circle ("közép-x,közép-

Tartalmi elemek - Képek beszúrása

Teszek egy gyors kitérőt a képformátumok irányába. Nem biztos, hogy mindenki ismeri a formátumok adta különbségeket. Kezdjük a BMP-vel (bitmap). Ez a Ms Paint-ból ismert formátum hatalmas mérete (pixelenként tárolt színadat) miatt kerülendő. A honlapokban általában tömörített (JPG, GIF, PNG) képeket használunk. JPG (Joint Photographic Experts Group) előnye a meglepően kicsi méret viszont csekély mértékben torzul a kép. Fotókhoz javasolt. A GIF (Graphics Interchange Format) szintén kicsi és már az átlátszóságot is támogatja, viszont kevés (max 8 bit) színt tud tárolni. Ez a honlap grafikájához ajánlott. A kettő ötvözése a PNG (Portable Network Graphics), ami kicsi is, átlátszóságot is támogat és TrueColor-t is torzulásmentesen. Régen kevés böngésző ismerte, manapság egyre jobban terjed.

y,sugár"), poly (jellemző pontok egymás után "x1,y1,x2,...") és default, ami az

egész régiót jelenti. Ha pedig nem kívánunk hivatkozást rendelni hozzá, akkor a nohref="nohref"-et kell a href helyére tennünk. Természetesen a normál hivatkozásból ismert attribútumok is érvényesek itt. Pl.: tabindex és accesskey... Tuti mindenki látott már a böngészők címsorában lévő domain mellett egy kis ikont, ún. favicon-t. Ez a kis képecske valójában egy 16x16px-es .ico formátumú (mime: image/xicon) fájl. Elhelyezni úgy tudjuk, hogy elnevezzük favicon.ico-nak, és a gyökér könyvtárba tesszük, majd használjuk a következő címkét a részben: [Egyedi favicon készítése: http://www.favicon.cc]

<meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <meta http-equiv="content-language" content="hu-HUN" />

itt egy JPG kép, ami nem látszik át
itt pedig egy GIF kép, ami átlátszik

ez pedig egy egész kép rajta két hivatkozással
<map id="kep3"> <area href="http://www.google.hu" alt="négyszög" title="Google!" shape="rect" coords="10,10,40,30" /> <area href="http://www.bing.com" alt="kör" title="Bing!" shape="circle" coords="60,30,10" />

Tartalmi elemek - Képek beszúrása

peldak/xhtml/kepek

Táblázatok Bizonyos helyzetekben jól jön, ha táblázatba rendezzük a dolgainkat. Szebb, átláthatóbb, rendezettebb lesz tőle oldalunk. Nem is beszélve arról, hogy a táblázat keretrendszerébe könnyen illeszthető az oldalak felülete. A táblázat, mint blokk egység, a két címke közé kerül. A attribútumai lehetnek a már ismert width, height és a summary, ami egy összefoglaló leírást tartalmazhat a látássérültek felolvasó programjainak. Az XHTML-ben már elavult a border. Ha értéke ="border", a böngészőtől alap vonalvastagságot kap, ha értéke 0, akkor pedig osztóvonalak nélküli mátrixot kapunk. Ugyancsak elavult a cellspacing (szomszédos cellatávolság) és a cellpadding (tartalom és vonal távolsága). Ezeket inkább később, CSSsel adjuk meg. A táblázat címét (vagy felette álló magyarázó szövegét) a nyitó és záró tábla címkén belül a tag szegélyezi. Minden egyes sort a (Table Row) vezet be és () zár le. A cellákat ezek közé kell elhelyeznünk a tag-ekkel. Ezek közé kerülhet a tartalom. (Lásd: Ms Excel) Ha egyes cellák fejlécként funkcionálnak, a (Table head) címkére cserélhetjük a -t. Utóbbiakban szintén használhatjuk a width-et és az elavult align="left/center/right" és valign="top/middle/bottom"-t, melyek a cellák tartalmát igazítják vízszintesen (jobbra/középre/balra) illeve függőlegesen (fent/középen/lent). A HTML és XHTML nyelvben létezik még a (táblázat fejléce), a (táblázat törzse) és a (táblázat lábléce), melyeknek a böngészők nem igazán tulajdonítanak nagy figyelmet. A lényege, hogy a tartalma mindig fölé illetve a -é mindig alá kerül a -nak, bárhol is van a table címkén belül a kódban. A gyakorlatban ritkán tesszük ki őket. Megesik, hogy össze kell vonnunk néhány cellát pl. közös cím érdekében. Ezt úgy tehetjük, hogy pl. a 3 ) formázása a caption-side: tulajdonsággal lehetséges. Megadhatjuk, hogy fent, vagy lent jelenjen-e meg a cím. A text-align: tulajdonsággal tudjuk jobbra vagy balra igazítani. Továbbá a cím szövegét tetszés szerint formázhatjuk. Alapértelmezetten a cím fent középen jelenik meg. Az Internet Explorer nem ismeri fel a caption-side: tulajdonságot, ezért mindig fent jeleníti meg a címet. A szöveget nem csak függőlegesen, hanem vízszintesen is igazíthatunk az egyes cellákon belül. A vertical-align: ezt állítja be. Csak sorbeli elemekre, vagy táblázatcellákra érvényes! Ez a tulajdonság a következő értékeket veheti fel: baseline (alapvonal), sub (alsó index), super (felső index), top (fent), text-top (szöveg teteje), middle (középen), bottom (lent), text-bottom (szöveg alja) és hosszmérték vagy % is lehet. Ugyanakkor csak a top, middle és bottom értékek használhatók táblázatok szövegének igazítása esetén.

Stílus és megjelenés - Táblázatok stílusai

Hosszú táblázatoknál előnyös lehet, ha minden második sornak más a háttere. A zebra táblákat a tr-ek különböző háttérszínezésével érhetjük el. Oszlopok csoportosítása esetén már megismerkedtünk a col és a colgroup elemekkel. Ezekre azonban csak az alábbi CSS tulajdonságok érvényesek: width:, border:, visibility: és background:. (Ez utóbbi a hátteret állítja be. Ezt következőkben részletesebben tárgyaljuk.) Ha ezen kívül mást állítunk be az oszlopokra, akkor azt csak az IE fogja figyelembe venni!

<meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <meta http-equiv="content-language" content="hu-HUN" /> <style type="text/css"> /**/

és a

és
vagy	helyett csak egyet nyitunk és benne a colspan="" attribútumnak azt az értéket adjuk (3), ahány cellát összevonnunk vízszintesen. Függőleges egyesítéshez pedig a rowspan alkalmazandó. <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <meta http-equiv="content-language" content="hu-HUN" /> Tartalmi elemek - Táblázatok peldak/xhtml/tablazat Mivel a vízszintes osztások könnyen csoportosíthatók és együtt formázhatók (lásd.: ), a függőleges oszlopok pedig nehezen egyesével, ezért létrehozták a függőleges irányú csoportosításra egy módszert, melynek fő eleme a és ennek belső elemei a -ok. Csak el kell helyeznünk a ésatöbbin kívül, de még a 1. táblázat, példa az igazításokra 1,1 -fejléc th-val 1,2 -fejléc th-val 1,3 -fejléc -n belül ezeket a csoportokat (akár többet is). Itt megadhatjuk a már ismert módon az egyes oszlopcsoportokra a tulajdonságokat az ismert attribútumokkal. Bennük pedig ahány oszlopra vonatkozik annyi -t helyezünk el. Ezek szintén megkaphatják az előbb említetteket, illetve még itt lehetőség nyílik a span=""-nal a -khez hasonló módon összevonni az azonos tulajdonságú oszlopokat. Valószínűleg elsőre nem teljesen világos, így a mellékelt gyakorlat hivatott oszlatni a káoszt. Megjegyezném még, hogy ez a Tartalmi elemek - Táblázatok 4,1 -lábléc th-val 4,2 -lábléc 4,3 -lábléc 2,1 -balra 2,2 -középre 2,3 -jobbra 3,1 -felülre 3,2 -középre 3,3 -alulra 2. táblázat, példa az összevonásokra 1,1 1,2 1,3 2,1 2,2 2,3 2,4 2,5 3,1 3,2 4,1 4,2 5,1 5,2 módszer elég újkeletű (XHTML-lel jött be), így nem minden böngésző tolerálja. Érdemes inkább minden egyes	-ben megadni a formázást, ha lehet. <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <meta http-equiv="content-language" content="hu-HUN" /> 3. táblázat, példa az oszlop formázásra 1,1 1,2 1,3 1,4 1,5 2,1 2,2 2,3 2,4 2,5 3,1 3,2 3,3 3,4 3,5 Tartalmi elemek - Táblázatok peldak/xhtml/colgroup Általános blokk elem Említettem már, hogy a táblázat régen tökéletesnek bizonyult a honlapok grafikájának tárolására, azonban elég bonyolulttá tette a honlapokat a nem pc-s felhasználók számára. A CSS elterjedésével a általános blokk elem hasznosabb módszer lett. (Ne keverjük a <span> általános sorbeli elemmel!) A -ek a tanult id-vel azonosíthatók (későbbi formázásnál így fogunk hivatkozni rájuk), egymásba ágyazhatók, elrejthetők. Persze ha csak két hasábra kell bontani a szöveget a táblázat is jó, de bonyolultabb esetekben javallott az áttérés. peldak/xhtml/div Tartalmi elemek - Táblázatok <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <meta http-equiv="content-language" content="hu-HUN" /> <style type="text/css"> #gyujto{background-color:yellow;padding:10px} #fejlec{background-color:red;margin:10px;padding:10px} #tartalom{background-color:green;margin:10px;padding:10px} #lablec{background-color:blue;margin:10px;padding:10px} fejléc tartalom lábléc Ezek a DIV-ek CSS segítségével vannak formázva, erről később bővebben... Űrlapok és elemeik A honlapok gyakran nem csak adatokat közlő, hanem fogadó felületek is. Adódik a probléma: hogyan kaphatunk visszajelzéseket a felhasználóktól? Űrlapok (angolul form-ok) bevezetésével biztosíthatunk a felhasználónak különböző beviteli mezőket, miket tovább küldhetünk egy feldolgozó programnak. A lényeg ennyi, lássuk a megvalósítást! A blokk egység tartalma lesz elküldve, a rajta kívül eső rész nem. Lássuk hogyan! Kötelező attribútum az action, mely egy külső kiértékelő programra mutat. Ez általában egy PHP, ASP vagy Perl kód. Róluk a későbbiekben olvashatunk. Fontos még a method is, mely a küldési technika módját rögzíti. Értéke lehet a GET és a POST. Ha nincs kitéve, akkor alapértelmezés szerint a GET lesz. A két eset annyiban különbözik egymástól, hogy a GET-tel az URL-ben (pl: index.php?nev=ertek) látható módon közli az adatokat a szerverrel és korlátozott karakterszámban, a POST pedig elrejtve, a dokumentum fejlécében küldi tetszőleges karakterszámban. (Fájl feltöltés esetén csak ez utóbbi használható, és ki kell még egészíteni -unkat az enctype="multipart/form-data" sorral.) Érdemes a beviteli mezőket a közé elhelyezni, ezzel csoportosítani őket. A csoportoknak nevet is adhatunk a közt, hasonlóan a tábláknál megismert caption-hoz, viszont ne keverjük őket össze! Lássuk a szöveg beviteli mezőket! Az egysoros beviteli mezőt (szövegmezőt) hoz létre (pl: felhasználónévnek). Ugyanezzel a módszerrel, csak a type-nak "password" értéket adva jelszó mezőt hozhatunk létre. E kettőnél még a maxlength (maximális bevihető karakterszám) illetve a size (mező hossza karakterben) jöhet szóba. Egyezniük nem szükséges, hiszen ha túlnyúlik a tartalom a mezőn, automatikusan tovább gördül, majd a kurzormozgatókkal visszatérhetünk az elejére. Nagyobb mennyiségű szöveg beviteléhez a szövegdoboz, a ajánlott. Neki nincs type, value és size attribútuma sem, mert a típusa adott, méretét a sorok és oszlopok számával adjuk és az alapértelmezett tartalmát pedig a nyitó és záró elem közé kell írnunk. maxlength-je viszont lehet. Jelölőnégyzet hozható létre a -gel. Ebből többet is bepipálhatunk, a Rádió gombból viszont mindig csak az utolsó marad bekapcsolva. Itt a többivel ellentétben a name-nek muszáj egyeznie és a value-nek különbözni. Ha valamelyiket előre szeretnénk bejelölni, akkor a checked="checked" tehető ki. Tartalmi elemek - Űrlapok és elemeik Az űrlapon belül több beviteli mezőt (inputot) helyezhetünk el. (Az inputok mindegyike sorbeli elem, tehát egy bekezdésben kell elhelyezni őket, ha eddig nem nyitottunk volna.) A legfontosabb az űrlap elküldését indító gomb. A másik ilyen speciális gomb a teljes űrlapr alapállapotba állítását (törlését) végzi el: . Ha pedig egyéb, magunk által definiált funkcióval rendelkező gombot szeretnénk létrehozni, akkor az -t használhatjuk. Ugyanezek megvalósíthatók a -tal. Különbség nincs köztük. Természetesen őket is el lehet nevezni a namemel, de legtöbbször a kiértékeléskor nincs szerepük. A további elemek esetén viszont kötelező az egymástól különböző elnevezés! Nincs mindíg elegendő hely a rádiógomboknak, ha sok lehetőség közül kell választanunk. (pl: országnevek) Ekkor jön a képbe a <select name="NÉV"> . E közé jönnek sorban az SZÖVEG címkék. Itt is különböznie kell a value-knek! Így létre jött egy legördülő menü. Ha választó menüt szeretnénk (legalább két opció), akkor a size itt megadja hány látszódjon görgetés nélkül. Kisebb csoportosítás az opciók közt itt is végezhető, ha egy-egy -be gyűjtjük a hasonlókat. Ha engedélyezni kívánjuk egyszerre több kijelölését (Ctrl + katt), akkor a multiple="multiple" fog kelleni még a <select>-be. Megoldható még, hogy egy képet helyezzünk el inputtal: Ez teljesen úgy működik, mint az címke. Még a usemap is használható. Viszont kattintásra elküldi az űrlapot, akár a submit gomb. Fájlok feltöltéséhez az használható. Tárolhatunk olyan információkat is az -tal, amik rejtve maradnak a felhasználó elől. (Pl. sorszám, aktuális dáum...) Ritkán, de szükség lehet a fent említett szöveg beviteli mezők kijelölésének letiltására illetve módosításának tiltására. Előbbit a disabled="disabled", utóbbit a readonly="readonly" produkálja. Érdekességként említeném még, hogy itt is használható a hivatkozásoknál már tanult tabindex és accesskey, továbbá lehetőség van még hogy csak bizonyos típust fogadjon el az adott input a accept-tel. Pl.: csak szám, stb. A fent említett beviteli elemekhez kapcsolhatunk egy magyarázószöveget a ... címkével. Az azonosítónak egyeznie kell a beviteli mező id azonosítójával. Így helytől függetlenül összefűzhető a kettő. (A szövegre kattintva a kijelölés a bevitelre ugrik.) Vagy a for-t elhagyjuk és a Tag-ek közé, a szöveg mellé tesszük a beviteli mezőt is. <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <meta http-equiv="content-language" content="hu-HUN" /> szövegmezők felhasználó jelszó írok magamról kicsit... Tartalmi elemek - Űrlapok és elemeik peldak/xhtml/urlapok Tartalmi elemek - Űrlapok és elemeik jelölőnégyzetek alma csoki spenót rádiógombok fiú lány mindkettő igen nem talán választómenü <select name="valasztomenu" multiple="multiple" size="3"> Laptop Asztali Mobilteló Hifi <select name="legordulomenu"> budapest vidék európa amerika egyebek Tartalmi elemek - Űrlapok és elemeik fájl feltöltő és egy kis meglepi, mert nehéz volt a lecke Érdemes észrevenni, hogy ez GET-tel műküdik! Érdekes címkék Szükség esetén több különálló oldalt egyszerre, egy ablakban is megjeleníthetünk. Ezek az önálló oldalak (frame-k ~ keretek) egymástól függetlenül görgethetők, de tartható köztük linkkapcsolat. Az ilyen kereteket tartalmazó központi oldalnak nem lesz lényegében tartalma (body-ja), helyette csak azt határozzuk meg, melyik külső oldal és hova kerüljön. Lássuk is az alkalmazását: ... (vagy rows, de egyszerre csak egyik!) ... <noframes> ez van, ha nem megjeleníthető a keret A cols (oszlop) és rows (sor) a frame-k arányának meghatározására szolgál. Értéke lehet %, px, vagy *, ami a fennmaradó részt tölti ki. A scrolling görgethetőség értéke lehet yes (igen) / no (nem) / auto (automatikus). Végül pedig ha le szeretnénk tiltani az alapértelmezés szerinti átméretezhetőséget, hozzá kell adnunk a noresize attribútumot. Még a frameset-en belül megadható a noframes-szel, hogy mit tegyen a böngésző, ha nem ismeri fel a kereteket. Itt már alkalmaznunk kell a body-t, hiszen tartalmat írunk az oldalba. Figyelem, ez a módszer csak HTML 4.1-ig illetve XHTML 1.0 Frames DTD-vel alkalmazható! Ennek kikerülése érdekében megalkották az egyszerűbb <iframe src="fájlnév" name="név" width="szélesség" height="hosszúság" frameborder="szegély" scrolling="görgethetőség"> helyettesítő_szöveg címkét, mely meglévő oldalunkba segít ágyazni kisebb sorbeli egységekben külső oldalakat. Azonban, amíg nem muszáj, hátrányaik és nem megfelelő támogatottságuk miatt, egyiket se alkalmazzuk. (A későbbiekben CSS-sel kiválthatók lesznek.) Hozzájuk kapcsolódik a hivatkozások target attribútuma, mely az XHTML 1.0-tól törölve lett. Ezzel irányíthatjuk linkjeink a name névvel előre ellátott keretekre vagy bizonyos előre definiált helyekre, mint például: "_self" ~ saját ablak, "_blank" ~ új ablak, "_parent" ~ őt tartalmazó (felette álló) keret. Csak olyan DTD-nél használhatjuk, ahol a kereteket is. Tartalmi elemek - Érdekes címkék [Keretek helyettesítése: http://www.dynamicdrive.com/style/layouts/] peldak/xhtml/keretek <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <meta http-equiv="content-language" content="hu-HUN" /> <noframes> Ha nem jelenének meg az oldalak, akkor ezt az üzenetet látod! Külső médiafájlokat (pl: videók, zenék, flash és egyéb alklalmazások) ágyazhatunk honlapunkba, ha az object és a param címkéket a következő módon használjuk: Flash animációkhoz általában a "application/x-shockwave-flash" MIME típust alkalmazzuk. A data és classid elmaradnak, és a <param name="movie" value="MÉDIA URL-JE" />-ban kerül tartalmuk megadásra. További rengeteg paraméter adható még meg itt, mint: <param name="menu" value="false/true" /> és <param name="quality" value="high/medium/low" />. Egyéb videókat is így tölthetünk be, de a képekhez és zenékhez nem használunk <param />-okat. Ott csak egyszerűen a data-ban betallózzuk őket. Fontos, hogy a böngéyző nem minden esetben rendelkezik a megjelenítéshez szükséges eszközökkel, így előfordul, hogy egy külső telepített alkalmazást hív segítségül a média megjelenítéséhez. (pl: videókhoz Windows Media Player, vagy QuickTime Player) Ebből adódóan előfordulhatnak kompatibilitási hibák. Ha egy böngésző nem boldogul az objektummal, egyszerűen kihagyja és a benne lévő részt értelmezi. Így gyakran kombinálják az elavult <embed src="URL" autostart="true/false" loop="true/false" hidden="true/false" /><noembed>helyettesítő szöveg-del, minek még további attribútumai lehetnek a width, height, href, pluginspage, pluginurl, playcount, volume, mastersound, controls, controller, starttime, és endtime. Ejtsünk még szót a DHTML-ről. Milyen DHTML? Eddig HTML-ről volt szó! Nos tehát, a DHTML, a HTML nyelvet kiegészítő szabvány, amellyel a bemutatókhoz (MS PowerPoint) hasonló vizuális effektusok hozhatók létre. (Természetesen a weblapunk kiterjesztése sem lesz "*.dhtml"!) A dinamikus HTML a 4.0-s verziójú HTML Microsoft által kibővített változata, így gyakorlatilag csak az IE jeleníti meg őket. Míg a DHTML-effektusok a Tartalmi elemek - Érdekes címkék Microsoft Internet Explorer 4.0-s és a Netscape Navigator 4.0-s (illetve ezeknél újabb) böngészőkben működnek, a többi böngésző számára animáció nélkül jelenik meg. Ezeket az effektusokat a lap szinte bármely elemére lehet alkalmazni, majd az effektust úgynevezett „eseményindító”-hoz, például egérgombbal való rákattintáshoz, egérkurzorral történő rámutatáshoz vagy weblap betöltéséhez lehet kötni. Következzen néhány ilyen eseményt: A teljes lapra érvényes eseményeket egy <meta /> címkében kell elhelyezni. (Remélem nem felejtetted el, hogy a meta-t a közé kell tenni!) Itt a http-equiv értéke lehet "Page-Enter" (lap megnyitása), "Page-Exit" (lap elhagyása), "SiteEnter" (belépés a teljes honlapra) vagy "Site-Exit" (teljes honlap elhagyása). A content, ami az áttünési effektust jelöli, értékeit a következő formában kell megadni pl.: "blendTrans(Duration=MÁSODPERC,Transition=SZÁM)". A Duration az áttünési időtartamot jelöli másodpercben. A Transition a következő táblázatban feltűntetett áttűnéseket azonosítja. Ha elhagyjuk az egész Transition= részt, akkor pedig színátmenetet kapunk! 0 1 2 3 4 5 6 7 8 9 10 11 eredményezi Csökkenő keret Növekvő keret Spirál befelé Spirál kifelé Kitakarás felfelé Kitakarás lefelé Kitakarás jobbra Kitakarás balra Függőleges rácsok Vízszintes rácsok Pepita oldalra Pepita lefelé SZÁM 12 13 14 15 16 17 18 19 20 21 22 23 eredményezi Véletlenszerű eloszlás Hasadás függőlegesen befelé Hasadás függőlegesen kifelé Hasadás vízszintesen befelé Hasadás vízszintesen kifelé Lépcsőzetesen balra le Lépcsőzetesen balra fel Lépcsőzetesen jobbra le Lépcsőzetesen jobbra fel Váltakozó vízszintes sávok Váltakozó függőleges sávok Véletlenszerű Tartalmi elemek - Érdekes címkék SZÁM peldak/xhtml/erdekesseg Tartalmi elemek - Érdekes címkék <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <meta http-equiv="content-language" content="hu-HUN" /> <meta http-equiv="Page-Enter" content="blendTrans(Duration=1.0)" /> <meta http-equiv="Page-Exit" content="blendTrans(Duration=1.0,Transition=23)" /> <iframe src="http://www.bing.com" name="kicsi" width="300" height="200" frameborder="1" scrolling="auto">helyettesítő szöveg google az iframebe bing az egész oldalra Frissítsd a lapot a DHTML effektek megtekintéséhez! Hasznos tanácsok A kódban elhelyezhetünk megjegyzéseket a jelek közt, miket a böngésző figyelmen kívül fog hagyni, tehát nem jelenít meg. Segítségükkel magyarázatokat fűzhetünk a kódhoz, ami lássuk be, a későbbi szerkesztéshez jól fog jönni. Másik alkalmazása, hogy vele egy hosszabb-rövidebb kódrészletet gyorsan eltűntethető. Ez főleg teszteléskor jelent előnyt. Az mindegy, hogy a HTML kódban hány üres sort írunk, és van-e sortörés vagy üres sor a nyitó és a záró címke között. Így célszerűbb az egymásba ágyazódó részeket egyel több TAB-bal tagolni. A jól áttekinthető kód nagyban megkönnyíti a későbbi hibakeresést. A lehetőségekhez mérten igyekezzünk minél kevesebb formázást vinni közvetlenül a tartalomba. A következő fejezettel (CSS) teljesen szét fogjuk tudni választani a kinézetet és tartalmat, ami több okból is hasznos. A honlap tervezésekor ügyelnünk kell, a lehető legszélesebb felhasználói kör igényeit kielégítsük. Gondolnunk kell pl. a hátrányos helyzetű embertársainkra is. Az akadálymentes honlapok nem csak a látássérülteknek segítenek, hanem a keresők robotjai is könnyebben találnak találatot oldalunkon. Teszteljük honlapunk a leggyakrabban használt böngészők mindegyikén, csak így lehetünk benne biztos, hogy mindenki egyformán élvezheti munkánk gyümölcsét. Ajánlott észben tartani, hogy a HTML nem programozási nyelv, inkább ajánlások sora a megjelenésről a böngésző felé. Eddig nem firtattam, de a HTML-nek és az XHTML-nek különböző a MIME típusa. Az XHTML fájlok valójában XML fájlok. A lényeg, hogy egy HTML oldalt text/html típusban, egy XHTML oldalt viszont application/xhtml+xml típusban kellene küldeni. Azonban a legelterjedtebb böngésző, az Internet Explorer, nem ismeri fel az application/xhtml+xml típust! Ha betartjuk a HTML kompatibilitásra vonatkozó feltételeket (a kompatibilitásnak megfelelőek voltak az eddigi leckék), akkor text/html típusban is küldhetők. Az XHTML 1.1 oldalakat viszont csak application/xhtml+xml típusban ajánlott küldeni, amit az IE nem ismer, ezért nagyon kevesen használnak XHTML 1.1-et. MIME típus text/html application/xhtml+xml HTML 4.1 kötelező tilos XHTML 1.0 (kompatibilis) lehet így kellene XHTML 1.0, 1.1 nem kellene így kellene Tartalmi elemek - Hasznos tanácsok Mindig törekedjünk arra, hogy az általunk írt HTML és CSS kód érvényes legyen! Az érvényesség azt jelenti, hogy a DTD-ben leírt szabályokat betartjuk, és csak létező címkéket és attribútumokat használunk. A HTML kód helyességét a http://validator.w3.org/ címen ellenőrizhetjük. Hibás kódot ne adjunk ki a kezünkből! Nem elég egy lapot, hanem honlapunk minden egyes oldalát külön-külön le kell ellenőrizni! Hiszen mindegyik különálló HTML kódot tartalmaz. Ha egy weboldalunk megfelelt a tesztnek, akkor azt mondjuk rá, hogy érvényes. (angolul: valid) Ilyenkor büszkélkedhetünk a kitehető hitelességet jelző ikonokkal. Végszó Tartalmi elemek - Hasznos tanácsok ...fuss el véle! Gratulálok, már birtokában vagy a honlapszerkesztés alapjainak. Ha még nem vagy biztos a dolgodban, az összefoglaló kódjegyzéket a mellékletben bármikor megtalálod! Ha csinosítgatnád tovább weblapjaid, találkozzunk a CSS fejezetben! Stílus és megjelenés Stílus és megjelenés - Az előzőekben megtanultad a tartalmat egy sablonos formába önteni. De valami másra vágysz? Valami egyedire? A stíluslapok segítségével honlapod minden egyes részének megjelenését testre szabhatod. Akár egyszerre több kinézetet is készíthetsz ugyanazon tartalomhoz. Ha átrágod magad e fejezeten, honlapod kinézetének csak saját képzelőerőd szabhat határt. Kinézet és tartalom Korábban említettem, hogy az XHTML igyekszik teljesen szétválasztani a kinézetet a tartalomtól. Miért is olyan fontos ez? Gondoljunk bele! Ha egy címsor színe mondjuk kék és ezt az egész honlapon (pl. 15 oldal) pirosra váltanánk, kénytelenek lennénk egyesével, a HTML kódban 15-ször ezt eljátszani. Itt az első előny: a stíluslapok nem a divatról szólnak! (Női olvasóimtól rögtön elnézést is kérek!) A viccet félretéve: egy külső stílussal az összes oldalra érvényes formázást hajthatunk végre. A későbbi változtatásokat pedig elég ebben az egy fájlban elvégezni. A második előny pedig ennek fordítottja: egy oldalra akár több stílust is alkalmazhatunk. (Lásd: skin cserélés) Szintek és rangsoruk A CSS az angol Cascading Style Sheets kifejezés rövidítése, jelentése rangsorolt (lépcsőzetes) stíluslapok. Mi a CSS 2.1-et fogjuk használni, ez a 2-höz képest néhány hibajavítást tartalmaz. (A CSS 3 jelenleg fejlesztés alatt áll, de rá is kitérünk később.) Szóval, miért is rangsoroltak? Tegyük fel, hogy egyszerre több stíluslapot is "ráhúzunk" oldalunkra. Ellentmondás esetén melyik fog érvényesülni? A legprimitívebb, mégis általános szabály, hogy mindíg az, amelyik legközelebb áll a formázandó elemhez! A dokumentum tetejétől lefele haladva mindíg az utoljára betöltött stílus fogja felülírni ütközések esetén a korábbiakat. Jöjjön a profi megfogalmazás. Három szintet különböztetünk meg a CSS-ben: külső, dokumentum szintű és belső. A külső stíluslapok különálló fájlok, melyek több HTML-re is érvényesek. Behívásuk a sorral történik a részben. A dokumentumszintűek egy-egy HTML-ben vannak rögzítve még mindíg a fejlécben, így csak ezen egy oldalra érvényesek. Őket a <style type="text/css"> ... közt kell elhelyeznünk. A belső stíluslapok már csak egyetlen Tag-ra vonatkoznak. Behívni őket a style="" attribútummal lehet. Mi történik, ha egyiket sem használjuk? A böngészőnek is van saját stíluslapja, amit néhány böngésző esetén a felhasználó akár saját stíluslappal is kiegészíthet. Ekkor ezek lesznek mérvadók. Hogy összegezzünk, újra elindulok a leggyengébbtől a legerősebbig: böngésző alapértelmezés < felhasználói < külső stíluslap < dokumentum szintű < belső (szövegközi). A külső stíluslapokat egy szöveges fájlban kell megírni hasonlóan a HTML-hez, amit ".css" kiterjesztéssel kell elmenteni. A stíluslap fájlok legelső sorába szokás a karakterkódolásra vonatkozó információt írni. Itt is az UTF-8 kódolást ajánlom, mint a HTML esetében. Ez a következőképpen néz ki: @charset "utf-8"; (Ezt dokumentumszinten ne tegyük ki!) Ezután az egész stíluslap nem más, mint kijelölők (selector) és hozzájuk tartozó meghatározásblokkok (declaration) sora. A meghatározásblokkot kapcsos zárójelek { } határolják. Ennek tartalma két fő részből áll: tulajdonságból (property) és értékből (value). A tulajdonságok után kettőspontot kell tennünk (:), az értékek után pedig pontosvesszőt (;). Lássunk is egy mintát: @charset "utf-8"; kijelölő { tulajdonság1: érték1; tulajdonság2: érték2; tulajdonság3: érték3; ... } /* megjegyzés */ Stílus és megjelenés - Szintek és rangsoruk Szintaktika Láthatjuk, hogy a szintaktika eléggé eltér a HTML-étől. Ezért szokás elővigyázatosságból a dokumentum szintűeket egy HTML megjegyzés segítségével elrejteni a régebbi, CSS-t nem támogató böngészők elől így: <style>. A CSS megjegyzések ebből adódóan nem az előző, hanem a C nyelvekből ismert /* és */ közé tesszük, mi vonatkozhat akár több sorra is. XHTML-ben pedig gondolnunk kell a szigorú XML szintaktikára. Ez esetben úgynevezett karakteres adatoknak (Character DATA) álcázzuk a nem XML szabványú részeket. Viszont arra is gondolnunk kell, hogy a stíluslap se értse félre a CDATA meghatározást, így CSS kommentbe kell tennünk ezt a részt így: <style>/* */. Fontos, hogy e két óvintézkedést csak dokumentumszintű stíluslapokba tegyük! A CSS attól függően lehet kis/nagybetű érzékeny, hogy milyen nyelvhez kapcsolódik. (XHTML esetén csak kisbetűket használjunk!) Majd' elfelejtettem! A belső stíluslapok pedig kis módosítással, de ugyanígy néznek ki. A különbséget az adja, hogy itt kijelölőkkel nem kell törődnünk, hiszen csak egy címkére alkalmazzuk. Lássunk róla is mintát: style="tulajdonság1:érték1; tulajdonság2:érték2; ...". Egy utolsó csavarként pedig rombadöntöm a szintekről tanultakat. Ha bármely érték után szóközzel, de még a ; előtt megadjuk az !important szót, az adott érték lesz érvényben függetlenül a szintjétől. Több !important szabály esetén pedig újra a szintek fognak dönteni. <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <meta http-equiv="content-language" content="hu-HUN" /> <style type="text/css"> /**/ Címsor 1 dokumentum szinten Címsor 2 dokumentum szinten Címsor 3 belső formázással Címsor 4 !important szabállyal Stílus és megjelenés - Szintaktika peldak/css/szintek Dokumentumfa A dokumentumfa a HTML dokumentumszerkezet faszerkezetben történő ábrázolását jeleni. Úgy néz ki, mint egy családfa, az elemek hierarchikus viszonyban állnak egymással. A CSS ezen modell alapján képes kapcsolatokat kezelni az elemek közt. Lássunk néhány fontosabbat: Gyermek - szülő kapcsolat: szülőnek nevezzük az olyan elemet, ami alatt egy szinttel áll legalább egy másik elem. A gyermek pedig olyan elem, ami felett egy szinttel egy szülő áll. Fontos, hogy ez két szint különbség esetén már nem igaz! Ős - leszármazott kapcsolat: Leszármazott az összes olyan elem, ami az Ős alatt áll. Tehát gyerekek, unokák, stb. mind! Ezeknek az elemeknek pedig a felette álló az Őse. Testvérek pedig azok az elemek, amelyek ugyanazon a szinten helyezkednek el, és ugyanazon a szülőn osztoznak. Nagyon szép! De mire jó ez? Talán a legfontosabb dolog az öröklődés. Ha egy tulajdonságot beállítunk egy Ős elemre, azt az összes leszármazott meg fogja kapni, amíg velük másként nem rendelkezünk. Kijelölők Az ős leszármazottját CSS-ben úgy jelölhetjük, hogy szóközt nyomunk az elemek neve közt. Az ábra bal oldalán lévő -nek van egy leszármazottja. Őt a következő módon jelölhetjük ki: ul a {} Ez a módszer tetszőleges mélységig folytatható. Testvérek kijelölésére a + jel hivatott. Akkor használjuk, ha egy után közvetlen jön: h2 + a {} Akkor lehet hasznos, ha a főcím után mindig egy hivatkozás van, és őt formáznánk. Elég speciális eset, de kijelölhetünk elemeket HTML-beli attribútumuk alapján is. Megvalósítása pl.: a[title] {} Itt nem kell az attribútum értékeknek egyezni, csak rendelkezzen a Tag az adott title attribútummal. Ha konkrét értékkel rendelkezőt kívánunk kiválasztani, akkor pedig a címke[attribútum="érték"] {} módon tehetjük meg. Léteznek még: ~= (szóközzel tagolt listában egyezés), |= (ezzel kezdődik), ^= (pontosan ezzel kezdődik), $= (ezzel végződik), stb. Ezek nem működnek minden esetben. Stílus és megjelenés - Dokumentumfa Gyermeket úgy jelölhetünk ki, hogy a két elem közé > jelet teszünk, így: body > h2 {} Ekkor nem jelöljük ki -en belüli -t, csak azt, amelyik a gyereke. (IE 6 még nem támogatja) Ha nem használunk semmilyen rokoni viszonyt, akkor a h1 {} kijelölő az összes létező címkére vonatkozna az oldalon. Ha egyéni csoportosítást szeretnénk, akkor ún. osztálykijelölőt hozunk létre. Ilyen a h1.classnev {}. A pont (.) után tetszőleges nevet definiálhatunk, mikre a HTML címkéiben a class attribútummal hivatkozhatunk. Tekinthetjük úgy is, mint: h1[class="érték"] {}. Ha az osztályt nem csak a elemre kívánjuk alkalmazni, akkor azt akár el is hagyhatjuk. Ekkor bármlyen elemet formázhatunk a megfelelő névre hivatkozva: .classnev {} Azonos értékű class attribútumból akármennyi lehet, de azonos értékű id nem fordulhat elő egy HTML-en belül. Az azonosító kijelölő kizárólag egy elemre fog mutatni: h1#azonosito, de a rövidebb forma is megengedett: #azonosito, hiszen ez is csak ugyanarra az elemre mutathat. A fent említett összes kijelölési módot csoportosíthatjuk vesszők (,) segítségével. Ekkor az összes kijelölt elemre ugyanaz a meghatározásblokk lesz érvényes! Pl.: ul a, body > h2, h2 + a, a[title], h1.classnev, #azonosito {} A legvégére hagytam a csemegét, az univerzális szelektort. Ez nem más, mint egy * szimbólum. Az utána megadott stílus definíció érvényes lesz minden elemre. Gyakorlatilag minden elem ősének tekinthető. Ha teljesen korrektek akarunk lenni, akkor kitehetnénk a *.classnev {} elé is. <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <meta http-equiv="content-language" content="hu-HUN" /> <style type="text/css"> /* h2 { color: green; } h2 + a { color: purple; } a[title] { color: lime; } h1 { color: blue; } .classnev { color: black; } #azonosito { color: gray; } /*]]>*/ Címsor 1-1 általános blokkelem 1 listaelem 1 listaelem 2 hivatkozás 1 listaelem 3 beágyazott listaelem 1 beágyazott listaelem 2 Stílus és megjelenés - Kijelölők peldak/css/dokumentumfa Címsor 1-2 Címsor 2-1 általános blokkelem 2 Címsor 2-2 hivatkozás 2 hivatkozás 2-2 Dobozmodell Stílus és megjelenés - Dobozmodell A weboldal minden eleme egy téglalap alakú területen jelenik meg. Ha írunk egy bekezdést, beszúrunk egy táblázatot vagy egy képet, akkor ezek mind egy téglalap alakú területet, egy „dobozt” fognak elfoglalni a weboldalon. Ehhez a dobozhoz a W3C szabványának megfelelőn hozzárendelhetünk belső margót (padding), szegélyt (border), illetve margót (margin). Ezek a téglalap alakú területet elfoglaló tartalmat keretként veszik körül, a tartalomtól kifelé haladva, a felsorolt sorrendben. Az alábbi ábra illusztrálja a dobozmodellt. A belső margón még látszik a háttér, ha van. Utána a szegély következik valamilyen stílusban, majd végül a margó, ami átlátszó, ezért a szülő elem háttere fog rajta megjelenni. Az ábrában az is látszik, hogy az egyes területeket melyik CSS tulajdonsággal tudjuk elérni. Szegélyek, külső és belső margók Először mindig a szegély stílusát kell megadni, ha szeretnénk, hogy látszódjon. A szegély stílusát a következő tulajdonsággal állíthatjuk be: border-style: és ennek oldal specifikus változataival: border-top-style:, border-right-style:, border-bottomstyle:, border-left-style:. Ezek a következő értékeket kaphatják: none (nincs), hidden (rejtett), dotted (pontozott), dashed (szaggatott), solid (árnyékmentes), double (árnyékolt), groove (homorú), ridge (domború), inset (benyomott) és outset (térbeli). A szegély vastagságát pedig a következő szabályozza: border-width:. Ennek szintén léteznek oldalakra lebontott változatai, mint: border-top-width:, border-rightwidth:, border-bottom-width:, border-left-width:. Értékként a következőket kaphatják: thin (vékony), medium (közepes), thick (vastag), SZÁM (kézzel megadott érték). A színt is szabályozhatjuk természetesen a lassan már megszokott módon: border-color: és társaival. (border-top-color:, border-right-color:, border-bottom-color:, border-left-color:). Itt az értékek lehetnek a HTML-nél már tanult hexadecimális (#rrggbb) formában, névvel (pl: black), illetve a keverési aránnyal (rgb(r,g,b)) kifejezve. Aki pedig mégjobban szereti összevonni a dolgokat, neki a legegyszerűbb forma, a border: fog tetszeni. Jó szokás szerint neki is vannak kísérői: border-top:, border-right:, border-bottom:, és border-left: személyében. A megadási formátum pedig a következő: vastagság stílus szín; A CSS 2.1 egyik hiányossága, hogy nem tudunk vele lekerekített kereteket létrehozni. A CSS 3-ba már bekerült ez a lehetőség, de amíg nem támogatják a böngészők, addig képeket kell használnunk erre a célra. Belső margó képezhető a padding:, padding-top:, padding-right:, paddingbottom:, padding-left: tulajdonságokkal. Értékként hossz mértékegységet kell írnunk. (Hossz mértékegységeket a Méretezés, pozicionálás részben tárgyaljuk bővebben.) Az összevont padding:-nél szintén szóközzel elválasztva méretezhetjük az oldalakat. Külső margó megadására a margin:, margin-top:, margin-right:, margin-bottom:, margin-left: szolgálnak. Az érték itt is hosszmérték. Nem gondolnánk, de a margó értéke lehet negatív is! Ekkor a várt eltolással ellentétes irányba tolhatjuk objektumunkat. Érdekesség még, hogy a body elemnek is alapértelmezésként van valamekkora margója. Próbáljunk csak egy div elemet elhelyezni, benne szöveggel. Ha el szeretnénk tűntetni a távolságot, akkor a body { margin: 0; padding: 0; }-t előre be kell állítanunk. Stílus és megjelenés - Szegélyek, külső és belső margók A négy oldal értékeit külön-külön is beállíthatjuk, de sokkal inkább javasolt a kompaktabb (border-style:, border-width:, border-color:) forma. Ha ezeknek a tulajdonságnak csak egy értéket adunk meg, akkor az összes oldalra érvényes lesz. Ha kettőt, akkor a felső és az alsó szegély kapja az első értéket, míg a jobb és a bal oldal a második értéket. Ha hármat, akkor a felső szegély kapja az első értéket, a jobb és bal oldal a második értéket, míg az alsó szegély a harmadikat. Ha mind a négy értéket megadjuk, akkor a felső szegélytől indulva az óramutató járásával megegyezően (top, right, bottom, left) kapják a szegélyek az értékeket. Pl: border-width: 1px 5px 2px 5px; Létezik még egy ritkán használt tulajdonság, a körvonal. Ennek gyűjtője és altulajdonságai a következők: outline: outline-color outline-style outline-width. Annyiban különbözik a normál szegélytől, hogy ennek szélessége nem foglal helyet! Űrlapoknál használjuk, ha pl. pirossal jeleznénk, hogy az hibásan van kitöltve. <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <meta http-equiv="content-language" content="hu-HUN" /> <style type="text/css"> /**/ tartalom Stílus és megjelenés - Szegélyek, külső és belső margók peldak/css/dobozmodell Méretezés A következő tulajdonságok az elemek méretét állíthatjuk be, úgy mint: width: (szélesség) és height: (magasság). Mindkettőnek létezik egy maximalizáló és minimalizáló formája: max-width: és max-height: illetve min-width: és min-height:. Ezek akkor lehetnek fontosak, ha a tartalom bármekkora lehet, viszont ha túl rövid, akkor egy minimális méretet tartani fog a dobozunk. Általában a háttér miatt fontos. Ha pedig nem szeretnénk megengedni hogy túl szétnyomja oldalunkat, egy maximális értékkel kiküszöbölhetjük ezt. Érték terén megadhatjuk valamihez viszonyítva (px ~megjelenítő eszköz képpontja, % ~teljes szülőelemhez mérete, ex ~kis x betű mérete, em ~alapértelmezett betűmagasság) vagy fix hosszban (cm ~centiméter, mm ~milliméter, in ~inch=2,54cm, pt ~pont=1/72in, pc ~pica=12pt). További értékek lehetnek még az auto (automatikus) a width: és height:nél illetve a none (nincs) a maximális és minimális tulajdonságoknál. Tipp: próbáljunk elszakadni a kijelző felbontásától föggő px-től! Ahol lehet, használjunk az em-et, majd ennek az eszköztől föggően adjunk méretet. (Pl: nyomtatónál fix cm, monitoron px) Ha a tartalom túllógna a maximális méreten, akkor el fog tűnni a lelógó rész. Megoldás: gördítő sávot adhatunk egy elemhez az overflow: tulajdonsággal, de lássuk mire jó még! visible (alapértelmezés) esetén: ha a tartalom nem fér ki a tároló elemben, akkor túl fog lógni. hidden esetén: a tartalom nem fog túllógni a tároló elemből, a túllógó rész rejtve lesz! scroll esetén: a tartalom nem fog túllógni, és minden esetben gördítő sávok jelennek meg hozzá. Ennek egyfajta változata az auto. A különbség, hogy ennél csak akkor fog gördítő sáv megjelenni, ha az szükséges. <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <meta http-equiv="content-language" content="hu-HUN" /> <style type="text/css"> /* Stílus és megjelenés - Méretezés peldak/css/meretezes Stílus és megjelenés - Méretezés z-index: 300; } /*]]>*/ abszolút helyzetű ebből kicsonkolom a baloldali 10 pixelt, így a szöveg és a keret sem látszik rendesen relatív megadás ez feljebb vóna' ha zindex nem vóna' fix elem görgessünk csak lejjebb... Pozícionálás A böngésző alapesetben elindul a HTML forráskódban felülről lefelé, és a talált sorrendben jeleníti meg az elemeket. Ezt a megjelenést a position: tulajdonság static értékével is el lehet érni. Ha el kívánjuk tolni, először be kell állítani a position: tulajdonság értékét relative-ra. Ezután a top: (fent), right: (jobb), bottom: (lent), left: (bal) tulajdonságokkal lehet megadni, hogy az elem mennyivel legyen eltolva a normális helyzetéhez képest. Abszolút helyzetmegadáskor a position: értéke absolute legyen, és ezután is a fenti négy tulajdonsággal tudunk pozícionálni. Az abszolút pozícionálású elemek a dokumentumfában legközelebb eső olyan szülő elemhez képest lesznek pozícionálva, amelyikre szintén meg van adva a position: tulajdonság MÁS értékkel, mint a static. Ha nincs ilyen, akkor a body elemhez képest lesznek elhelyezve. (Ennek bal felső sarka a 0,0 pont.) Ha más szülőhöz képest akarunk abszolút módon pozícionálni, akkor ennek egyszerűen csak adjuk meg a position: relative; meghatározást! Ha az position: tulajdonság értékét fixed-re állítjuk, akkor az elem mindig a helyén marad, nem lesz a többi elemmel együtt elgörgetve. Ekkor is lehet pozícionálni a top:, right:, bottom:, left: tulajdonságokkal. Tipp: Ez a megoldás akkor hasznos, ha a HTML-beli Frame-ket akarjuk leváltani vagy lebegő menüt kívánunk alkalmazni. Az IE 6 és régebbi verziói nem ismerik fel ezt a tulajdonságot. Viszont háttérképet tudunk fixen megadni, tehát egy-egy kép esetén inkább azt játsszuk ki. Arról még nem beszéltem, ha véletlen egymás alá-fölé kerülnének, akkor melyik elem takarja melyiket. Alap esetben a pozícionált feljebb lesz, mint a statikus. Beleszólhat még a forráskód felülről lefele történő értelmezése, de sok esetben nem egyértelmű a dolog. Pozícionáljunk térben is a z-index:-szel! Minden elem alapból 0 értéket kap erre. Lényeg, hogy minél nagyobbak (1, 2, 3, stb.) annál magasabban lesznek. Abszolút pozicionálás esetén még használható a clip: rect(FENT,JOBB,LENT,BAL); a doboz csonkolására. A méreteket az elem bal felső sarkától mérve kell megadni. A két "koordinátán" (BAL,FENT) (JOBB,LENT) kívüli rész rejtve marad. <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <meta http-equiv="content-language" content="hu-HUN" /> <style type="text/css"> /* Stílus és megjelenés - Pozícionálás peldak/css/pozicionalas #abszolut { position: absolute; bottom: 250px; right: 50px; } #fix { position: fixed; right: 0; bottom: 0; } /*]]>*/ abszolút helyzetű relatív megadás fix elem A float: és a clear: tulajdonságot gyakran kell használni, azonban elsőre nem mindig egyértelmű a működésük. Az első feladata, hogy egy elemet úsztasson jobbra vagy balra. Értékei így értelem szerűen: left, right és none lehetnek. A második pedig arra hivatott, hogy megakadályozza az előbbi tulajdonságot. Neki így a left, right és both (mindkettő) lehet értéke. Na de mi is az az úsztatás? Pl: Kép szöveggel való körbefuttatása. Fontos: arra figyeljünk, hogy csak olyan elemre vonatkoztathatjuk a float: tulajdonságot, aminek be van állítva a szélessége! Előbbi esetben például a képeknek meg van adva a szélességük. Bonyolódik a helyzet, ha egyszerre több elemet úsztatunk ugyanabba az irányba, de egymás alá. Ilyenkor a clear: right/left; letiltja, hogy a képtől jobbra/balra megjelenjen egy másik úsztatott kép. Ha pedig jobbra és balra is szeretnénk egy-egy elemet tenni, de utánuk úsztatás nélkül folytatni a szöveget, akkor a clear: both;-tal eltűnik az úsztatás hatása. Stílus és megjelenés - Úsztatás Úsztatás peldak/css/usztatas <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <meta http-equiv="content-language" content="hu-HUN" /> <style type="text/css"> /**/ jobbra úsztatás előtti szöveg jobb jobbra úsztatás utáni szöveg balra úsztatás előtti szöveg bal balra úsztatás utáni szöveg úsztatás eltörlése utáni szöveg Megjelenés A display: tulajdonsággal többek között az említett kettőt tudjuk beállítani. Ezen kívül még számos más megjelenést tudnánk elérni, csak ezeket az Internet Explorer semelyik verziója nem támogatja, ezért sajnos nem is ajánlott a használatuk. Ilyenek: list-item, run-in, compact, marker, table, inline-table, table-row-group, tableheader-group, table-footer-group, table-row, table-column-group, tablecolumn, table-cell és table-caption. Amiket használhatunk: inline (sorbeli), block (blokk-szerű) és none (rejtett). Nem szorosan, de hozzá tartozik a visibility: (láthatóság) tulajdonság, ami lehet: visible / hidden / collapse (látható / rejtett / ?). Fontos: display: none;-vel nem egyezik a visibility: hidden; ! Előbbi nem lesz egyáltalán része az oldalnak, utóbbival pedig ugyan láthatatlan marad, de a méretéből adódó helyet továbbra is foglalja. Stílus és megjelenés - Megjelenés Léteznek úgynevezett blokk-szintű elemek, és sorbeli elemek. (Lásd: HTML) Kis ismétlés: A blokk-szintű elemek egy teljes sort kitöltenek, eléjük és mögéjük sortörés kerül. A sorbeli elemek mellett viszont lehet több másik sorbeli. Blokk elemek tartalmazhatnak sorbelit, fordítva nem! <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <meta http-equiv="content-language" content="hu-HUN" /> <style type="text/css"> /**/ ez setben mintha itt se lenne első listaelem második listaelem harmadik listaelem így csak rejtjük és hézag marad első doboz tartalama második doboz tartalma harmadik doboz tartalama negyedik doboz tartalma Stílus és megjelenés - Megjelenés peldak/css/megjelenes Táblázatok stílusai Rácsvonalakat hozzáadni a táblázathoz úgy tudunk, hogy a td {} és th {} elemekhez a kívánt vastagságú keretet állítunk be a border: tulajdonsággal. Mivel az előbb minden td {} és th {} elemre keretet állítottunk be, ezért két egymás mellett lévő cella esetén dupla szegélyt látunk. Ezt a border-collapse: collapse; meghatározással tudjuk eltüntetni. Szabályozhatjuk az üres cellák körüli szegély megjelenítését is az empty-cells: tulajdonság két értékével, a show / hide-dal. Cellák közti margó megadásához a border-spacing: tulajdonság használható. A border attribútum beállítása nélkül is működik. (IE nem ismeri) Belső margót is megadhatunk a cellákhoz. Ezt a már jól ismert padding: tulajdonsággal tehetjük meg úgy, hogy hozzárendeljük a td {} és th {} elemekhez. Táblázat középre igazításához a szabvány szerint a bal és jobb oldali margót egyaránt auto értékre kell állítanunk. A szélességet is ilyenkor meg kell adnunk a már ismert width: tulajdonsággal. Táblázat címének (

tábla címe

50px	széles	100px
normál	normál	normál
jobb	közép	bal
lent	középen	fent
		mormál

Stílus és megjelenés - Táblázatok stílusai

peldak/css/tablazat

Listák formázása A list-style-type: a listaelemek előtti kis jel megadására szolgál, ami lehet: disc (tömör pont), circle (lyukas kör), square (négyzet), none (semmi), decimal (számozott), lower-alpha (kisbetű), upper-alpha (nagybetű), lower-roman (kis római) és upperroman (nagy római). A list-style-image: képet tesz be az előbbiek helyett a listaelemek jelzésére. Értéke így lehet az ismert none és url(). A listaelmek előtti kis jel vagy kép helyzetének megadására a list-style-position: szolgál, mi lehet: outside (kívül) és inside (belül). Végül pedig a rövidítő a list-style:, mely magába foglalja az előzőket a következő sorrendben: list-style-type list-style-position list-style-image. A számozás vezérléséhez egy olyan eszközhöz kell folyamodnunk, ami a CSS elveivel éles ellentétben áll. A content: tulajdonság ugyanis tartalmat vezérel, ami a HTML dolga. A stíluslapok feladata a formázás. Ezt szem előtt tartva, csak akkor használjuk az imént említett tulajdonságot, ha az nem kerülhető el. No de lássuk, miért éppen itt tárgyalom ezeket! Értéke lehet: counter(NÉV,STÍLUS) és counters(NÉV,ELVÁLASZTÓ,STÍLUS), ahol a NÉV egy változó az aktuális értéknek, az ELVÁLASZTÓ egy szimbólum a beágyazott részekhez, az opcionális STÍLUS pedig megegyezik a list-style-type: tulajdonságéval. A stílusadás csak Opera alatt támogatott jelenleg. A számlálót növelni a counterincrement: NÉV-vel, nullázni pedig a counter-reset: NÉV-vel lehet.

<meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <meta http-equiv="content-language" content="hu-HUN" /> <style type="text/css"> /*
Stílus és megjelenés - Listák formázása

peldak/css/lista

Stílus és megjelenés - Listák formázása

list-style-type: lower-alpha; list-style-image: url("http://www.webmake.hu/webkeszites/peldak/lista-kep.jpg"); } /*]]>*/

• első
• második
• • harmadik
  • negyedik
  • • ötödik
    • hatodik

• első
• második
• • harmadik
  • negyedik
  • • ötödik
    • hatodik

1. első
2. második
3. 1. harmadik
   2. negyedik
   3. 1. ötödik
      2. hatodik

Grafika testreszabása A színek meghatározása a CSS-ben akár 3 féle módon is történhet. Ezek már ismerősek lehetnek az XHTML-ből. A legegyszerűbb a névvel (white), leggyakoribb a hexadecimális formával (#ffffff) történő megadás. Előfordulhat még színkeverés arányokkal (rgb(100%,100%,100%)) illetve 1-től 255-ig terjedő skálával (rgb(255,255,255)). Hogy ebből háttérszín legyen, elé kell tennünk még a background-color:-t. Háttérszín esetén az előbbieken túl még szükség lehet a transparent (~átlátszó) értékre is. Ha nem egyezünk ki egy egységes színben (miért is tennénk?) akkor szükségünk lesz képek illesztésére a háttérre. Ezt a célt a background-image: url("KÉP_HELYE"); szolgálja. Értéke az URL címen kívül lehet még a none (~nincs) is. Alapértelmezésben egy hátteret addig ismétel egymás alá, mellé mozaikszerűen, még be nem tölti az adott teret. (BODY háttér esetén a képernyőt.) Hogy ezt felülbírálhassuk, ki kell tennünk a background-repeat:-ot. Értékei: repeat (mozaik), repeat-x (csak xirányban ismétel), repeat-y (csak y irányban ismétel) és no-repeat (nem ismétel) lehetnek. Egy háttér alap esetben mindig a bal felső sarokban indul. A background-position:-nal el tudjuk tolni előre definiált, illetve egyedi mértékben onnét. A megadás a következő képen néz ki: függőleges(y) irány szóköz vízszintes(x) irány. Ha konkrét helyre kívánjuk igazítani, akkor a top/center/bottom left/center/right angol szócskákból válogathatunk, mik jelentése: felülre/középre/alulra balra/középre/jobbra. Ha pontosan tudjuk, mennyivel tolnánk el a képet, megadhatjuk %-ban és hosszmértékben (pl.: px) is. Pozitív szám esetén lefele vagy jobbra tolódik a kép, negatív értékek esetén pont ellenkezőleg. Az ínyencséget a végére hagyva, bemutatom a background-attachment: tulajdonságot, mi kaphatja a scroll (görgethető) és fixed (rögzített) értékeket. Mint már kitalálhattuk, arra szolgál, hogy a dokumentum görgetése közben ne mozogjon a háttérkép vele együtt.

Kurzor beállítása Kurzort egyrészt megadhatunk az előre definiált nevek segítségével. Ennél azonban izgalmasabb, hogy saját kurzort is készíthetünk, ekkor a kurzor URL-jét kell megadnunk. Ebben az esetben több URL-t is felsorolhatunk, de a lista végén mindig álljon ott egy előre definiált kurzornév. cursor: url(URL1) url(URL2) auto; (Az .ani kiterjesztést csak az IE, míg a .cur kiterjesztést általában minden böngésző kezeli. Alapértelmezett értékek listája: auto, crosshair, default, pointer, move, e-resize, ne-resize, nwresize, n-resize, progress, help.

se-resize,

sw-resize,

s-resize,

w-resize,

text,

wait,

Stílus és megjelenés - Grafika testreszabása

CSS-es jó szokás szerint itt is gondoltak a lustább emberekre és a background: rövidítő tulajdonságot kitalálták nekik. Szóközökkel elválasztva a következő sorrendben adhatjuk meg az előbb tanultak értékeit: background-color background-image backgroundrepeat background-attachment background-position. Természetesen nem fontos ezeket sem mind megadni. A sorrend kötött, de elemek kihagyhatóak belőle. Ilyenkor a hiányzók az alapértelmezett értéküket veszik fel.

peldak/css/grafika

Stílus és megjelenés - Grafika testreszabása

<meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <meta http-equiv="content-language" content="hu-HUN" /> <style type="text/css"> /**/

pedig nem is hivatkozás

cél, és tűűz!

Idézőjelek használata Az idézőjeleknek több típusuk létezik, itt kicsit kitárgyaljuk ezt is. Az írógépes idézőjelek olyan egyenes idézőjelek, amik közé mi is írjuk az attribútumok értékeit. (Pl.: 'A' ' aposztróf és "A" " dupla idézőjel) Magyar szövegben ez hibás! Helyettük magyar idézőjeleket kell használnunk, ami a billentyűzeten nem találhatók meg. (Pl: ’A’ ’ ’ fél idézőjel és „A” „ ” macskaköröm) Belső idézőjeleket a magyar tipográfiában akkor kell használni, ha maga az idézet is idézetet tartalmaz. (Pl: »A« » « magyar belső idézőjel) Ha angolul írjuk a weboldalt, akkor az angol kettős idézőjelet kell használnunk ilyenkor. (Pl: ‘A’ ‘ ’ angol szimpla idézőjelek és “A” “ ” angol dupla idézőjelek) A legjobb megoldás, ha rögtön a címke tulajdonságainál módosítjuk ezt. A :lang(hu) > q { quotes: "„" "”" "»" "«"; } segítségével minden magyar szöveg idézetét átalakíthatjuk a négy aposztróf köztire. (A kijelölőnél lévő furcsaság az álelemeknél még tárgyalva lesz.) Alternatívaként pedig a már említett kicsit különc content:-et vethetjük be a szintén később tárgyalt :before (elem előtt) és :after (elem után) kijelölőkkel és következő értékekkel: openquote (nyitó idézőjel), close-quote (záró idézőjel), no-open-quote (nyitó idézőjel tiltása) vagy no-close-quote (záró idézőjel tiltása).

Rövidítések, mozaikszavak Rövidítéseknél és mozaikszavaknál az erre kitalált címkéket ajánlott használni. Őket mindig meg kell jelölni, de csak az első előforduláshoz muszáj magyarázószöveget adni. A képernyő felolvasók így is fel fogják ismerni, és kiolvassák a rövidítést. Ezért érdemes letiltani az abbr, acronym { border: none; } -val, hogy ne mindig húzza alá, csak abban az esetben, ha van hozzá magyarázat: abbr[title], acronym[title] { borderbottom: 1px dotted; cursor: help; } Ezen kívül a CSS segítségével azt is leírhatjuk, hogyan értelmezzék a képernyő felolvasók a rövidítéseket. Ha a fentieket betartjuk, akkor ezt a stíluslapot kell írni a felolvasó számára: abbr { speak: spell-out; } és acronym { speak: normal; }. Ekkor a rövidítést betűzni fogja, és a mozaikszavakat kiolvassa.

<meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <meta http-equiv="content-language" content="hu-HUN" /> <style type="text/css"> /* q { quotes: "„" "”" "»" "«"; } abbr, acronym { border: none; } abbr[title], acronym[title] { border-bottom: 1px dotted; cursor: help; } abbr { speak: spell-out; } acronym { speak: normal; } q.nincs:before { content: no-open-quote; } q.nincs:after { content: no-close-quote; } /*]]>*/

Stílus és megjelenés - Idézőjelek használata

peldak/css/erdekesseg

A CSS útmutatást tud nyújtani a szövegfelolvasóknak is, hogy különbséget tudjanak tenni a Malév és az MÁV közt. A CSS 3 ennél még többet fog nyújtani, ha elkészül.

Ez egy idézet és benne egy idézett idézet elhelyezve. Próbáljuk ki xml:lang="en"-nel.
Ez egy idézet és benne egy idézett idézet elhelyezve. Próbáljuk ki xml:lang="en"-nel.

Szövegformázás Szinte folyamatosan szükségünk van arra, hogy bizonyos szavakat, szövegrészeket emeljünk ki, színezzünk át stb. Az XHTML-ben szándékosan kerültem ezek tárgyalását, itt viszont látni fogjuk, CSS segítségével, ezt hogy tehetjük meg. A formázandó szövegrészek kijelölésére szokás használni a tanult <span class=""><span> címkét. Emlékezzünk csak vissza, hogy a class, style és id attribútumokkal hogy ruházhatók rá stílusok... A font-style: dőlt betűs szöveg megjelenítését teszi lehetővé a következő értékekkel: italic és oblique. Ha normal-t használunk, akkor nem lesz dőlt szöveg. A font-weight: a betűk vastagságát adja meg. Lehet: normal (normál), bold (félkövér), bolder (félkövérnél vastagabb), lighter (normálnál vékonyabb), vagy 100-tól 900-ig a kerek 100-as értékek. Ez utóbbi amolyan vastagítási skála, ahol a 400 a normálnak, a 700 pedig a félkövérnek felel meg. Bár elvileg széles skálán állítható a vastagítás, a böngészők csak a normal vagy a bold értéket veszik figyelembe! Tehát vagy vastagíthatjuk a betűket, vagy nem csinálunk vele semmit.

Talán a legismertebb formázási mód, a font-family:-vel elérhető betűtípus beállítás. Felmerül egy fontos probléma itt. Mit kezdjen a böngésző, ha az adott gépre nem lenne telepítve a kívánt betűtípus? Az elkerülés érdekében nem konkrét betűtípust adunk meg itt, hanem a használandó típusokról egy prioritásos listát. Ha az első megadott típus nem található, akkor próbálkozik a másodikkal és így tovább. Pl: Arial, "Times New Roman", Verdana; Használhatunk általános típusokat is (betűcsaládok) mint, serif és sans-serif vagy cursive vagy fantasy vagy monospace. Ismét eljött egy új rövidítő tulajdonság ideje. A font: az összes eddigi tulajdonságot beállítja, a következő sorrendben: font-style font-variant font-weight font-size font-family. Eggyel még lógok, tudom... az lejjebb kerül tisztázásra. (Jah, a következők már nem kezdődnek font-tal, így őket ne is próbáljuk beleerőszakolni ebbe a rövidítőbe.)

Stílus és megjelenés -

A font-size:-zel variálhatunk a méreten is. E tulajdonság értékéhez csak a következőket ajánlott megadni: %, em, smaller, larger. Ugyanis ezek az értékek a szülő elem méretéhez képest relatívan adják meg a betűméretet. Ha abszolút értékeket használunk, akkor a betűméret eltérhet a látogató által megszokottól a különböző eszközökön. Abszolút méretet csak nyomtatási stíluslaphoz használjunk, ezek a következők: xx-small, xsmall, small, medium, large, x-large, xx-large. Ezek ebben a sorrendben növekednek. Ide sorolható még a pt-ban és px-ben megadott számérték is.

További klasszikus formázás lehet az aláhúzás, fölé húzás és áthúzás. Őket a textdecoration: underline, overline és line-trough értékeivel csalhatjuk elő. Ez a tulajdonság kaphat még: none és blink értéket is. Előbbi az imént felsoroltakat tiltja, utóbbi pedig villogó szöveget képez. Ezt sajnos nem támogatja az Internet Explorer. A gyakorlottabb felhasználók általában a sorközök megadására is ügyelnek. Nekik a lineheight: lesz hasznos tulajdonság, ami lehet: normal és hosszmérték Hasonló értékeket kaphat a karakterek közti távolságot (betűköz) szabályozó letter-spacing: is. Ugyanez a helyzet a word-spacing:-gel is, ami a szavak közti közöket állítja be. A közök után térjünk át a betűk nagyságára. A text-transform: tulajdonság a szöveget kisbetűssé (lowercase), nagybetűssé (uppercase), vagy minden szót nagy kezdőbetűssé (capitalize) változtat. Természetesen ez is kaphat none értéket. A font-variant: hasonló funkcióval bír. Vele kis kapitális szöveget gyárthatunk, ha értéke small-caps. Más esetben, mint megszokhattuk, a normal használatos. Ha igazítani szeretnénk a szövegünket valamely oldalra, akkor a text-align: tulajdonságot kell magdnunk a következő értékek egyikével: left (balra), right (jobbra), center (középre), vagy justify (sorkizárt). Ez utóbbi arra jó, aki nem ismerné a kifejezést, hogy a szóközök nyújtásával a margóhoz igazítja a sorok végét. Előfordul, hogy a könyvekből ismert módon beljebb szeretnénk húzni a bekezdések első sorát. Erre a text-indent: hosszmérték; (pl.: px vagy %) szolgál. Árnyékot is tehetünk egy-egy szövegrész alá a text-shadow: szín eltolás-x eltolás-y elmosás-sugara meghatározással. Az eltolások és a sugár számértékek! Alapesetben none az értéke. Néhány ország esetén az írás nem balról jobbra (ltr), hanem jobbról balra (rtl) történik. A kettő közt a direction:-nal válthatunk, mely egy egész blokk elemre vonatkozik. Gyakran vele együtt jár az unicode-bidi: tulajdonság, mi az előbb megadott irányú blokkon belül képez embed és bidi-override esetén ellenkező irányt vagy (normal) nem tesz semmit. Engedelmetekkel ide sorolom még a white-space:, szóköz kezelő tulajdonságot is. Ha nowrap-ra állítjuk, akkor csak ott lesz sortörés, ahol azt
-rel jelöljük. A pre-vel gyakorlatilag egy <pre>-t állítunk elő. Ha csak nem kimondottan szükséges, hagyjuk az alapértelmezett normal állapotban!

Stílus és megjelenés - Szövegformázás

Legvégül pedig a betűszín tulajdonsággal zárnám soraim. Gondolom, mindenki tudja már, hogy color: tulajdonságról van szó. Ha mégsem lenne tiszta, az előző oldalakra visszalapozva megtalálható...

<meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <meta http-equiv="content-language" content="hu-HUN" /> <style type="text/css"> /**/

Egy főcím középen Kapitálisra alakítva

Ez egy ALCÍM KisbeTŰSSÉ ALAKÍTVA

Hivatkozás aláhúzás nélkül. <span style="font:bold 16pt monospace">Itt a font-ból kihagytam pár dolgot, és működik. Az első sor beljebb lett húzva. <span class="fontos">Figyeljünk a sorköz, betűköz és szóköz mit eredményez! Ez a szöveg pedig a body tulajdonságait örökölte, ezen kívül még sorkizártra is lett állítva a style attribútum segítségével. Tehát a szóközök úgy vannak méretezve, hogy egy hasábban látszódjon a szöveg, a jobb és bal margóhoz igazítva.

Stílus és megjelenés - Szövegformázás

peldak/css/formazas

Álosztályok, álelemek Bizonyos kijelöléseket, mint például egy bekezdés kezdőbetűje, nem tudunk végrehajtani, ha a dokumentumfára támaszkodunk. Ezekben az esetekben szükségünk van az úgynevezett álosztályokra és álelemekre. Vegyük először sorra az álosztályokat. A :firstchild azt az elemet választja ki, amelyik legelső gyermeke egy másik elemnek (IE7-től működik). A :link a még meg nem látogatott hivatkozásokat választja ki. Ehhez hasonló a :visited, csak már látogatott linkekhez. A :hover azt az elemet választja ki, amelyik felett áll éppen a kurzor. (IE6 csak hivatkozásokra támogatja) Az :active akkor jön szóba, mint az előző, csak itt felhasználó le is nyomta az egérgombot. Érdemes ügyelni ezek egymás utáni sorrendjére, mert előfordulhat, hogy egyes böngészőkben felülírhatják egymást. (Hogy ezt elkerüljük, jegyezzük meg: LoVe HAte.) A :focus pedig akkor hat, ha az adott elem fogadja a billentyűzetről bevitt adatot. Magyarul belekattintunk a beviteli mezőbe. (IE6 és 7 sem támogatja) Végül a :lang(nyelvkód) megadott nyelvű dokumentumrészt választ ki. (Gyenge támogatottság miatt sehol se érdemes alkalmazni!)

Stílus és megjelenés - Álosztályok, álelemek

A CSS álelemek a következők: A :first-line (bekezdés első sora) csak blokk-szintű elemekre alkalmazható, és csak az alábbi tulajdonságokat kaphatja: font tulajdonságok, color tulajdonságok, background tulajdonságok, word-spacing:, letter-spacing:, text-decoration:, vertical-align:, text-transform:, line-height:, text-shadow: és clear:. A :first-letter (bekezdés első betűje) is csak blokk-szintű elemekre alkalmazható, és rá alkalmazhatók: font tulajdonságok, color tulajdonságok, background tulajdonságok, text-decoration:, vertical-align: (csak ha a float: értéke none), text-transform:, line-height:, margin tulajdonságok, padding tulajdonságok, border tulajdonságok, float:, text-shadow: és clear:. A :before álelem bizonyos tartalmat illeszt az elem elé, az :after pedig az elem mögé. Hogy pontosan milyen tartalmat, azt a content: tulajdonsággal tudjuk megadni. Itt megadhatunk szöveget, vagy képet. Ha szöveget adunk meg, akkor erre további stílusokat is alkalmazhatunk. E kettőt az IE fent említett két verziója szintén nem támogatja. Ötletként felvetem még, hogy az álelemek és álosztályok akár kombinálhatók is egymással vagy magukkal.

<meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <meta http-equiv="content-language" content="hu-HUN" /> <style type="text/css"> /**/

ez az első elem

link 1 link 2 link 3

Ennek a szövegnek a lényege, hogy bemutassa, hogy lehet formázni az első sort, első betűt illetve, hogy különböző nyelveket hogy tudjuk elkülöníteni egymástól.

This text is to show that it is possible to format the first row, the first letter and that the various languages can be distinguished.

Stílus és megjelenés - Elavult címkék és attribútumok

peldak/css/alosztaly

Elavult címkék és attribútumok Gyakran használtuk az előző fejezetben ezeket a kifejezéseket. Most kiderül miért. Az elavult jelző azt jelenti, hogy van helyettük jobb megoldás (stíluslapok). A következőkben felsorolt címkék és attribútumok egy régebbi szabvány részei voltak, de a legújabb szabványnak már nem részei. Ezeket a böngészők még felismerhetik, de nem érdemes használnunk őket, hiszen a közeljövőben egyre inkább ki fognak kopni. Lássuk stíluslappal hogyan válthatók ki! funkció

helyettesítése <strong>, vagy font-weight: bold <em>, vagy font-style: italic



félkövér



dőltbetűs



aláhúzott

text-decoration: underline

<s> és <strike>

áthúzott

<del> vagy textdecoration: line-trough



középre igazítás

text-align: center



nagyobb betűméret

<small>

kisebb betűméret

cellpadding, cellspacing align

táblázatoknál még használható igazítás

,

, vagy font-size: larger

,

, vagy font-size: smaller

margin és padding tulajdonságok float:

link, alink, vlink, text

szövegszínek

color tulajdonságok álosztályokkal

background, bgcolor

hátterek

background tulajdonságok

topmargin, rightmargin, margók bottommargin, leftmargin

margin tulajdonságok

Az elavult címkék (pl.: ) és attribútumok (pl.: target) listája természetesen nagyobb. Az előbbieket főként a stíluslapos kiváltásuk miatt említettem meg. Gyakoriak még ugyancsak a már tanult, Frame-s megoldások is. Az elavult framekkel lehetőség van egynél több weboldalt (külön HTML fájlt) megjeleníteni egyetlen böngészőablakban. A framekkel kapcsolatban fennálló több probléma miatt nem ajánlott azok használata. Ezek a következők:  a nyomtatás máshogy működik egy frames oldal esetében  kedvencekbe való felvételekor nem az éppen látható állapotot, hanem a központi oldalt menti el a böngésző  több görgetősáv is megjelenhet a böngésző ablakában, ami miatt nehezebb használni az oldalt  a keresők tartalomindexelő robotjai sem szeretik a frameket, így rosszabb lesz a honlap besorolása A framek alternatívája lehet valamilyen szerveroldali megoldás, vagy pedig az overflow: és position: fixed meghatározása. Erre minták itt találhatók: http://www.dynamicdrive.com/style/layouts/category/C11/

Stílus és megjelenés - Elavult címkék és attribútumok

címke/attribútum

Oldalfelépítés kialakítása Az eddigiek során többször is említésre került, hogy a régen sűrűnhasznált táblázatos megjelenítési módot az oldalfelépítéshez nem szabad használni. Miért használták mégis? 1996 előtt még nem volt más lehetőség. A stíluslapok ebben az évben jelentek meg, és további 3 év kellett hozzá, hogy elterjedjen annyira, hogy mindenki biztonságosan használhassa. Most azonban kezünkben a modernebb eszköz. Lássuk 6 érvet, miért is váltsunk! 1. A táblázat nem szemantikus, adatok tárolására találták ki! 2. A kód mérete nagyobb lesz, mintha CSS-sel oldanánk meg a felépítést. 3. A stíluslap újrafelhasználható! A böngésző egy letöltés után gyorsító tárazza a stíluslapot, amit később az összes oldalra alkalmazhat. Táblázatokat esetén minden oldalon újra kell építeni a kinézetet, ezzel növelve a betöltési időt! 4. Az egymásba ágyazott táblázatok egy idő után nagyon bonyolulttá, nehezen olvashatóvá és karbantarthatatlanná válhatnak. 5. A táblázatos oldalfelépítés korlátokat emel az akadálymentesítés elé. A képernyő felolvasónak celláról cellára kell ugrálnia, amíg igazi tartalomhoz jut. 6. A táblázat nélküli oldal jobb keresőeredményeket produkálhat. A megoldás: használjunk

címkéket, ezeket akár egymásba is ágyazhatjuk, és stíluslappal pozícionáljuk őket.

A cél általában, hogy egy középre igazított oszlopot készítsünk. Először is vegyük figyelembe, hogy a body elemnek is van margója, belső margója, és keretet is lehet neki adni. Először is egy div elemet hoztunk létre egy egyedi azonosítóval (#wrap). Az elem középre igazításához három dolog szükséges: Először adjunk meg neki egy szélességet! Fix elrendezés esetén ajánlott a 750 (980) pixel. Azért pont ennyi, mert ekkor 800×600 (1024×768)-as felbontásban sem jelenik meg vízszintes görgetősáv. A vízszintes görgetősávot jobb elkerülni! Hasonlóan jó megoldás lehet, ha a képernyőméret százalékos arányát használjuk. (Teljes képernyős elrendezés.) Állítsuk a bal és a jobb oldali margót egyaránt auto értékre! Szabvány szerint a szélességgel együtt ennek azt kell eredményeznie, hogy az elem középre igazítva jelenjen meg. A biztonság kedvéért pedig alkalmazzuk a body elemre a text-align: center meghatározást a régebbi böngészők miatt. Később a div elemben balra visszaigazíthatjuk a szöveget, különben öröklődne a tulajdonság. Ha háttérrel látjuk el, belső margót is alkalmazhatunk.

Többoszlopos felépítés Ha az előző elrendezést több oszloppal bővítenénk, illetve fejlécet és láblécet is használnánk, tegyük a következőket: Készítsünk további div elemeket a #wrap-en belül. A középre igazítás már az előbb megtörtént. Az elsőt kinevezzük fejlécnek. A következő div elemre beállítjuk a float: left meghatározást, így az balra fog kiúszni. A megfelelő működéshez szélességet is be kell állítani rá! Több balos oszlop esetén ugyanígy járjunk el. A jobb oldali oszlopok ettől csak annyiban különböznek, hogy float: right meghatározást kapnak. Ezeket követi a forráskódban a tartalom, minek ugyanakkora bal és jobb margót kell adni, mint amennyi az őt megelőző jobb és bal oldali oszlopok szélessége. Ha elmulasztjuk, akkor körbefolyná az előző oszlopokat. Vegyük észre, hogy neki nem feltétlen kell kapnia fix szélességet! Javíthatunk az elrendezésen, ha belső margót állítunk az oszlopokra. Ekkor viszont a tartalom számára készített elem bal és jobb margóit

Stílus és megjelenés - Oldalfelépítés kialakítása

Egyoszlopos elrendezés

annyival kell megnövelni, amennyi a belső margók értéke összeadva a két-két oszlop között. Legvégül a láblécre még alkalmazni kell a clear: both meghatározást, hogy biztosan alulra kerüljön. További margók és szegélyek használata esetén ne spóroljunk, tegyünk be minden div elembe egy újabb div elemet, és ezekre alkalmazzuk a továbbiakat... Problémát jelenthet az oszlopok egyenlőtlen hossza, hiszen az elemeknek csak addig tart a hátterük, ameddig tartalom van bennük. Ezért hátteret inkább a szülőjük kapja, ne ők. Ha például n×250 pixel szélességű oszlopaink vannak, akkor olyan háttérképet kell készítenünk, ami 750 pixel széles, néhány pixel magas és n*250 pixelenként más színű. Ez a módszer természetesen változó szélesség eseteknél nem alkalmazható.

<meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <meta http-equiv="content-language" content="hu-HUN" /> <style type="text/css"> /**/

fejléc

balsáv balsáv balsáv

jobbsáv jobbsáv jobbsáv jobbsáv jobbsáv jobbsáv

Stílus és megjelenés - Oldalfelépítés kialakítása

peldak/css/felepites

balsáv balsáv balsáv

jobbsáv jobbsáv jobbsáv jobbsáv jobbsáv jobbsáv

tartalom tartalom tartalom tartalom tartalom tartalom tartalom tartalom tartalom tartalom tartalom tartalom tartalom tartalom tartalom tartalom tartalom tartalom tartalom tartalom tartalom tartalom

lábléc

A listák egy kis stílussal feldobva kiválóan alkalmasak menünek. A trükk az, hogy nem a li elemeket, hanem az a elemeket formázzuk. Beállítjuk rájuk a display: block meghatározást, és fix szélességet, így lesznek azonos szélességűnek a menüpontok. Továbbá a list-style-type: none meghatározással eltüntetjük a listaelemek elől a kis fekete karikát, a text-decoration: none meghatározással pedig az aláhúzást a linkekről. Ezután már csak a színeket és a margókat kell beállítanunk, illetve alkalmazhatjuk a :hover álosztályt a linkekre a dinamikusság érdekében. Képek használata esetén a keretet kézzel kell eltűntetnünk a következő módon: a img {border: none;}. Szükség esetén az egészet vízszintessé tehetjük, ha a li elemekre beállítjuk a display: inline-t. Ha oldalanként jelölni is szeretnénk az aktuális menüpontot, akkor minden oldalon egy class="aktualis" meghatározást vessünk be a megfelelőhöz.

Néhány érdekesség Készíthetünk a hivatkozások mellé különböző specifikus képeket is, hogy lehessen tudni mi áll mögötte. A trükk, hogy az a elem hátterére egy képet helyezünk ismétlés nélkül, majd belső margót állítunk hozzá, és a hátteret eltoljuk ez alá. Használhatók a korábban említett attribútum kijelölők is a különböző fájltípusokhoz, mint: a[href$=".pdf"]. Ugyancsak hasonló hatás váltható ki a content: url(URL-CÍM)-mel, mely egy médiára mutat (előbbi esetben kép), de egyszerű szöveg is lehet, vagy konkrét elemre vonatkoztatva az attr([pelda]) akár az elem pelda attribútumának értékét is képes kiírni. A normal esetén pedig nem generálódik tartalom.

Stílus és megjelenés - Listák használata menüként

Listák használata menüként

peldak/css/menu <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <meta http-equiv="content-language" content="hu-HUN" /> <style type="text/css"> /*
a[href$=".pdf"] { background: url("http://www.webmake.hu/webkeszites/peldak/lista-kep.jpg") no-repeat top left; padding-left: 25px; } a.mutasd:after {content: " (" attr(href) ")";} /* ez nem célszerű, csak példa */ /*]]>*/

• menü1
• menü2
• menü3

ez egy hivatkozás, ami .zip-re mutat

ez egy hivatkozás, ami .exe-re mutat

Stílus és megjelenés - Listák használata menüként

#menu .aktiv { background-color: white; color: black; }

Hibakezelés Általános szabály a CSS nyelvben, ha egy olyan tulajdonság vagy érték kerül megadásra, mit nem értelmez a böngésző, azt figyelmen kívül fogja hagyni. Valójában ez a hibához való hozzáállás eredményezi az előre-hátra kompatibilitást a nyelv egyes verziói közt. Például a CSS 3-ban lévő új tulajdonságok értelmezve lesznek az újabb böngészőkben, a régiekben pedig mintha ott sem lenne. Szigoríthatjuk ezt a szabályt, ha vesszőt (,) teszünk a kijelölők közé. Ilyenkor kijelölési hiba esetén a teljes meghatározásblokk kihagyásra kerül, hiába van benne értelmezhető rész is. Találkozhatunk még úgynevezett kísérleti tulajdonságokkal, mik kötőjellel (-) vagy alulvonással (_) kezdődnek. Ezek egyes böngészőkben értelmezettek lehetnek, ám sosem lesznek a hivatalos CSS szabvány részei. A megkülönböztető jelölés azért szükséges, hogy egyes későbbi verziókban biztosan ne legyen definiálva más tulajdonság ugyanazzal a névvel. Meg kell említeni még itt az "at" (@) szabályt. Ennek lényege, hogy a kukac jel után a következő ;-ig tartó szakasznak nem kell követnie a szintaktikát, és ha nem felismerhető, akkor figyelmen kívül marad. Emlékezzünk az @charset "utf-8";-ra. Fontos, hogy ezek csak a .css fájl elején foglalhatnak helyet. Ebből adódóan mindegyikből csak a legelső kerül értelmezésre. Sehol sem tisztázott, hogy mikor is szükséges az idézőjelek ("") használata. Az általános szabály az, hogy CSAK akkor tegyük ki, ha olyan értéket definiálunk, ami nincs az alapértelmezett, adható értékek listáján.

Médiatípusok

Lapozós médiatípus esetén a @page szabállyal úgynevezett oldaldobozt készíthetünk. Erre, és ennek lapszelektoros változataira :left, :right, :first margót állíthatunk cm-ben, vagy lapméret %-ában. Célszerű elrejteni ilyenkor a fölösleges grafikai elemeket és jól olvasható színűre állítani a szöveget és hátteret. Oldaltöréseket a megjelenítő is és a mi is definiálhatunk. A page-break-before: (oldaltörés előtte) és page-break-after: (oldaltörés utána) értékei lehetnek: always (mindíg), left (balra töri), right (jobbra töri), avoid (sose) vagy auto. A page-break-inside: (oldaltörés benne) pedig avoid / auto. Ezek mind blokk-szerű elemekre vonatkoznak. Elemeken belüli töréseket az orphans: (bekezdés minimális sorszáma az oldal tetjén) és windows: (bekezdés minimális sorszáma az oldal alján) generálnak. Az ő értékük tetszőleges egész szám lehet. Alapértékük 2.

Stílus és megjelenés - Hibakezelés

Az @import url() MÉDIATÍPUSOK; is at-szabály, mely külső stíluslap behívására alkalmas. Az url() és a médiatípusok listája akár el is hagyható, elég csak az URL cím leírása. A következő médiatípusokat különböztetjük meg: all (általános) vagy braille (tapintásos eszközök vakoknak), embossed (dombornyomásos nyomtatók), handheld (kézi eszközök pl. telefon), print (lapozós formátum), projection (kivetítők), screen (PC-khez), speech (felolvasókhoz), tty (terminálokhoz, fix karakterszélesség), tv (alcsony felbontás, rossz görgethetőség). Ezeket behíváskor adhatjuk meg vesszőkkel összefűzve, vagy HTML-ben a media attribútummal a <style> és a esetén. Ha egy stíluslapon belül ugyanarra a kijelölőre kívánunk médiatípusok szerint más-más tulajdonságot meghatározni, akkor a következő formátum használható: @media screen { body { color: black; } }.

peldak/css/modern

Az XML és a CSS kapcsolata A CSS minden strukturált dokumentum-formátummal alkalmazható, így az XML-lel is. Az XML jobban függ a stíluslapoktól, mint a HTML, mert itt a fejlesztő saját elemeket hozhat létre, melyről a böngésző nem fogja tudni, hogy jelenítse meg. Lássunk egy példát az XMLes oldalfelépítésre: példa <szerzo> én blabla

Az XML fájlok stíluslapjai (XSL) eltérhetnek a HTML kapcsán megismert CSS-től. Bővebben nem tárgyalom a témát, csak szemléltetésnek szántam. Az érdeklődőknek a W3C honlapot ajánlom.

Stílus és megjelenés - Az XML és a CSS kapcsolata

<meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <meta http-equiv="content-language" content="hu-HUN" /> <style type="text/css"> /**/

címke, amit a külső css fájl formáz

példa a hibakezelésre

ilyenkor a piros se lesz

peldak/css/xml cikk címe 1 <szerzo> saját nevem <email> ([email protected]) bla-bla-bla cikk címe 2 <szerzo> saját nevem <email> ([email protected]) bla-bla-bla [A CSS lehetőségeinek személtetése: http://www.csszengarden.com/tr/magyar/]

Modern CSS

http://www.webragacs.hu/2010/05/modern-css3-1-resz-alapveto-jellemzok/ http://www.webragacs.hu/2010/06/modern-css3-2-resz-alapveto-technikak/ http://www.css3.info/preview/ http://www.w3.org/TR/css3-roadmap/

Hiteles CSS Ismét a végére értél egy fejezetnek. Gratulálok! Azonban CSS fájljaidat se felejtsd el mentesíteni a hibáktól! A HTML-hez hasonlóan erre is találsz eszközt a weben: http://jigsaw.w3.org/css-validator !

Stílus és megjelenés - Modern CSS

A jelen tartalom írásakor a CSS 3 még nem vált ajánlássá, mert munkafázis alatt áll. Egyes böngészők ugyan már támogatják bizonyos részeit, mégsem fogom részletesen bemutatni, csak egy általános koncepciót vázolok hozzá. A CSS 3 rengeteg grafikai újítást fog tartalmazni, mint átlátszóság, lekerekített szegélyek, átmenetek, árnyékok, tükröződés, és több 2D-s transzformáció támogatása. Ezeken kívül fontos újítás, hogy a betűtípus problémákra és gyakran használt szövegrendezésre (pl.: több hasábos szöveg) is megoldást fog nyújtani. Az alábbi oldalakon lévő újdonságokat alkalmazd bátran, de mindig csak úgy, hogy ezzel ne szenvedjenek hátrányt a régebbi böngészőkkel rendelkezők...

Hogyan tovább? Hoppá! Mi történt? Az a helyzet, hogy a könyv további részei már nem érhetők el bárki számára. Lépj be fiókodba és töltsd le a további fejezeteket vagy rendelj magadnak hozzáférést a hivatalos honlapon!

Miért is fizessek? Főként, hogy megtérüljenek a honlap üzemeltetésével kapcsolatos költségeim, így továbbra is mindenki számára elérhető maradjon. De azt sem szabad elfelejteni, hogy a tudással, ami a kezedben lesz, piacképes Webfejlesztővé válsz. Ezzel már szépen lehet keresni. Tekintheted tehát egyfajta előlegnek, mi későbbi munkáidból megtérül. Persze megveheted egy könyvesboltban is a hiányzó fejezeteket, de ha úgy érzed, voltak elég jók az eddigi fejezetek, és érdemes a továbbiakat is megtanulni tőlem, kérlek, honoráld a munkám! Hálás köszönet érte! :)

Hol szerezhetem be? A WebKészítés kizárólag a hivatalos honlapon szerezhető be! Töltsd ki adataid és válassz a három csomag közül, melyek mindegyike tartalmazza a letölthető formátumokat illetve a webes tartalomhoz és kommentekhez való hozzáférést!

Információk

A könyv a http://www.webmake.hu/webkeszites honlap alapján készült. Minden segédanyagot, beleértve a gyakorlófeladatokat és jelen példányt, továbbá a hiányzó fejezeteket erről a címről lehet beszerezni! A WebKészítés jelen fájlja public domain alatt tárolás, sokszorozás, terjesztés, bemutatás és előadás céljából szabadon használható. Ugyanakkor a szerző saját jogait továbbra is fenntartja arra és magának illetve művének megnevezéséhez köti a felhasználást. A fájl kereskedelmi forgalomba nem hozható és az esetleges származékos művek ugyanezekkel a jogokkal publikálhatók. Jelen fájlra a Creative Commons Nevezd meg! - Ne add el! - Így add tovább! licenc feltételei érvényesek!

WebKészítés v2.5 (2011-07-18)

Hogyan tovább? - Információk

WebKészítés 2.5 - Az ingyenes weblapszerkesztői oktatás. Sajátítsd el a népszerű XHTML, CSS, JavaScript, PHP és MySQL nyelveket és vedd ki a részed az internetből Te is! A lényegre törő megfogalmazás és a számtalan gyakorlófeladat és példa garantálja a gyorsaságot, hiszen időből mindenkinek kevés van. Nincs szükség a drága könyvekre, a WebKészítés teljesen ingyenes!