HTML technikák a gyakorlatban 9637639179, 9789637639173 [PDF]

Zitiervorschau

---

cimnegyed.QXD

5/24/01 2:41 PM

Page 1

Paczona Zoltán HTML TECHNIKÁK A GYAKORLATBAN

cimnegyed.QXD

5/24/01 2:41 PM

Page 2

Paczona Zoltán

HTML technikák a gyakorlatban

Professzionális sorozat

cimnegyed.QXD

5/24/01 2:41 PM

Page 4

Felelõs szerkesztõ: Bányai Ferenc Címlapterv: Szincsák László Tervezõszerkesztõ: Dancs Katalin © 2001 Computer Panoráma Kiadó, 1091 Budapest, Üllõi út 25. Felelõs kiadó: a Computer Panoráma ügyvezetõ igazgatója Minden jog fenntartva. Jelen könyvet, illetve annak részeit tilos reprodukálni, adatrendszerben tárolni, bármely formában vagy eszközzel – elektronikus, fényképészeti úton vagy más módon – a kiadó engedélye nélkül közölni. A kötetben szereplõ védjegyek a vonatkozó cégek tulajdonai. Nyomtatás: Szegedi Kossuth Nyomda Kft. 6723 Szeged, Makkosházi krt. 1. Felelõs vezetõ: Gera Imre ügyvezetõ igazgató ISBN: 963 7639 179

01.qxd

5/24/01 2:59 PM

Page 5

5 TARTALOM

TARTALOM Bevezetõ a könyv használatához… . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9 Bevezetõ a HTML nyelvbe…. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9 1. 1.1 1.2 1.3 1.4 1.5

Alapismeretek . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13 A HTML dokumentum felépítése. . . . . . . . . . . . . . . . . . . . . . . . . . . . 13 Szöveges információk elhelyezése . . . . . . . . . . . . . . . . . . . . . . . . . . 14 A szöveg betûtípusa, mérete, színe . . . . . . . . . . . . . . . . . . . . . . . . . 17 A HEAD felépítése . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20 Hivatkozások. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24

2. 2.1 2.2

Képek a HTML dokumentumban . . . . . . . . . . . . . . . . . . . . . . . . . . . 29 Képek megjelenítése . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29 BODY bgcolor, background . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35

3. 3.1

3.5

Képek elõkészítése a webes publikálásra. . . . . . . . . . . . . . . . . . . . . 37 Foltok és árnyékok . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38 Az életlenségek eltüntetése . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38 Fehér foltok eltávolítása. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39 Az árnyékok világossá tétele . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39 Kontrasztok megváltoztatása . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40 Fásult/tompa képek. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41 A részletek kidolgozása . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41 Az égbolt megváltoztatása . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43 A medence rendbetétele . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45 Fekete lyuk . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46 Kép kivilágosítása és a talaj kijelölése . . . . . . . . . . . . . . . . . . . . . . . 47 A falak rekonstruálása. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48 A talaj rekonstruálása . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50 Sápadt színek, zavaró autók. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51 Zöld területek optimalizálása. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51 Autók eltávolítása . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 53 Optimalizálás a webre . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 53

4. 4.1 4.2 4.3

Táblázatok . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55 Táblázatoknál használatos kifejezések . . . . . . . . . . . . . . . . . . . . . . . 55 Táblázatok felépítése . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55 Dinamikus felépítésû táblázatok . . . . . . . . . . . . . . . . . . . . . . . . . . . . 58

3.2

3.3

3.4

01.qxd

5/24/01 2:59 PM

Page 6

6

7

TARTALOM

5. 5.1 5.2 5.3 5.4

Keretek . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 59 FRAME . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 59 Kiegészítés a BODY kifejezéshez . . . . . . . . . . . . . . . . . . . . . . . . . . . 62 Hivatkozások keretek segítségével . . . . . . . . . . . . . . . . . . . . . . . . . . 63 IFRAME. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 63

6. 6.1 6.2

Dinamikus HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 63 DHTML és CSS. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 65 Szövegformázás . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 66

7. 7.1 7.2

A CSS-rõl bõvebben . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71 Mire jók a stíluslapok?. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71 Style sheetek integrálása a HTML-be . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 73 Formátumsablonok, alosztályok . . . . . . . . . . . . . . . . . . . . . . . . . . . . 77 Feltételes formázás . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 76 Független formátumok . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 77 Betûtípusok . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 79 Színek . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 82 Színkódok . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 82 Pontos elhelyezés . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 83 Mûvészi keretek . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 86 Keretek és belsõ távolságok . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 87 Hátterek . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 88 Lista- és táblázatformátumok . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 91 Pszeudo-formátumok . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 92 Pozícionálás . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 92 Pozícionálás . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 96 Kurzor . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 98 Kurzorformák . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 98

7.3

7.4 7.5 7.6 7.7 7.8 7.10 7.11 7.12 8. 8.1 8.2

JavaScript, Java . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 101 JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 101 Java applet . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 110

9. 9.1

SSI . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 113 SSI és SHTML. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 113

10. 10.1 10.2 10.3

FORM és CGI . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 115 FORM és CGI alkalmazása. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 115 FORM . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 115 CGI . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 119

TARTALOM

11. 11.1 11.2 11.3 11.4

PHP3, XHTML (XML), WAP, VRML – rövid kitekintés további nyelvekre . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 127 PHP3. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 127 XHTML (XML) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 127 WAP (Wireless Application Protocol). . . . . . . . . . . . . . . . . . . . . . . . 128 VRML (Virtual Reality Modeling Language). . . . . . . . . . . . . . . . . . . 130

12.

Táblázatok a HTML nyelvben használatos speciális karakterekrõl . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 131

13. 13.1 13.2 13.3 13.4

Kiegészítõk a honlapkészítéssel kapcsolatban . . . . . . . . . . . . . . . . 141 favicon.ico. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 141 robots.txt . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 141 CaSe seNsitIvE . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 143 Apache szerver konfigurációja . . . . . . . . . . . . . . . . . . . . . . . . . . . . 143

14. 14.1 14.2 14.3 14.4 14.5 14.6 14.7 14.8 14.9 14.10

Eszközök webtervezõknek . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 147 1st Page 2000 2.0. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 147 Almighty Notepad 2000 2.01 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 149 HotDog Pro 6.0 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 149 CoffeeCup HTML Editor 8.2 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 151 1-4-All 2.1 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 152 TopStyle 1.5 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 153 ButtonFly 2.0 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 154 CSE HTML Validator . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 155 Linkbot Pro 5.5 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 157 BrowserSizer 1.1 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 158

15.

Összefoglalás . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 159

01.qxd

5/24/01 2:59 PM

Page 8

9 BEVEZETÕ

Bevezetõ a könyv használatához… Az olvasó egy kezdõknek szóló könyvet tart a kezében. A könyvben található információk segítségével bárki elsajátíthatja a HTML nyelv alapszintû programozását. A tanulás megkönnyítésére az egyes feladatok mûködését képek illusztrálják, s ugyancsak képek nyújtanak vizuális segítséget a teendõkhöz is. A példákat – részletes magyarázat kíséretében – a mellékelt CD-n is megtalálja az olvasó. A lemezen ugyanakkor további hasznos segédanyagok is szerepelnek. A szerzõt a könyv megírásában az a szándék vezette, hogy a kezdõket elindítsa és magabiztossá tegye a HTML nyelv használatában, s feltárja elõttük a HTML programozás rejtett lehetõségeit. Egyszóval a segítségükre legyen egy olyan alapszintû tudás elsajátításában , amelynek birtokában a késõbbiekben majd továbbfejleszthetik jártasságukat a HTML nyelvben, s könnyebben megoldhatják a rájuk váró feladatokat: a mai igényeknek megfelelõ – látványos, mozgalmas, esztétikus – weboldalak készítését.

Bevezetõ a HTML nyelvbe… A HTML nyelv manapság roppant népszerûségnek örvend, nagyrészt annak köszönhetõen, hogy az internet immár a világ minden sarkába eljutott, s gyakorlatilag bárhonnan elérhetjük az információs szupersztráda bármely oldalát. A világháló legismertebb része a WWW, azaz a World Wide Web, amely lényegében egy nyílt rendszer: számtalan számítógép csatlakozik különbözõ csomópontokhoz, amelyek szintén kapcsolatban állnak egymással,

01.qxd

5/24/01 2:59 PM

Page 10

10

11

BEVEZETÕ

BEVEZETÕ

így azután a hálózat bármely szervere elérhetõ bármelyik másik szerverrõl, vagy kliensrõl. Eme nyílt rendszer fõként a szöveges, illetve képi információkat jelenti az átlagfelhasználó számára. Az információkat felhasználóbarát környezetben érhetjük el, esetleg multimédia-elemekkel kiegészítve. Azonban a WWW nem volt mindig ennyire látványos és könnyen kezelhetõ. Azok a HTML-oldalak, amelyeket manapság nap mint nap nézegetünk, csak 1990 óta léteznek, tehát azóta, hogy létrehozták a hypertext-alapú protokollokat. A HTTP (HyperText Transfer Protocol) és a HTML (HyperText Mark-Up Language) jóvoltából a kiszolgálón tárolt valamennyi nyilvános adatot egy egyszerû böngészõprogram segítségével is elérhetjük. A HTTP verziótörténetébõl érdemes még felidézni, hogy a HTTP 1.0 legnagyobb hátránya az volt, hogy az információkérést csak úgy tudta végrehajtani, ha minden elemhez újabb kapcsolatot létesített a kiszolgálóval. Ezt a hiányosságot a HTTP 1.1-ben már kiküszöbölték: a kapcsolatot nem kell megszakítani, s újra létrehozni, ha szeretnénk mindent (képet, hangot stb.) letölteni egy adott oldalról. A HTML is több verzióváltást megért már: elõször a HTML 2.0-t adták ki, aztán megjelent a HTML 3.2, jelenleg pedig a legtöbben már a HTML 4.0-t használják, amelyet a mai böngészõk mindegyike támogat. De már ez sem mai „darab”, hiszen 1997 decemberében jelentette meg a W3C (World Wide Web Consortium), amely a szabványokkal s a fejlesztések összefogásával, egységesítésével foglalkozik, majd 1998 áprilisában javítottak rajta, s csak ezután születhetett meg a HTML 4.01.

à

Hivatkozás: http://www.w3.org/TR/REC-html40/ De mire is jó a hypertext? Annak, aki böngészett már oldalakat az interneten, talán nem kell elmagyarázni, mekkora segítség, ha az oldalakat, dokumentumokat egy hivatkozáshálózat szövi át, amelynek segítségével mindig oda ugorhatunk, ahova szeretnénk, olyan információkat tekinthetünk meg, amelyek az adott témához kapcsolód-

nak, sõt akár egy másik szerver másik oldalára is ugorhatunk, ha ott találjuk meg a keresett információt. Az egymást követõ fejezeteket áttanulmányozva ki-ki elsajátíthatja a szöveg és a kép elhelyezésének a fortélyait, segítséget kaphat saját weboldalának elkészítéséhez, amelyet akár multimédiás elemekkel is kiegészíthet. A könyv megmutatja, miként jelennek meg a HTML oldalak a böngészõben, az egyik fejezet pedig a WAP-oldalak elkészítésébe avatja be az olvasókat. Reméljük, sikerül felkeltenünk mindenkiben az érdeklõdést a HTML programozás iránt, s minden olvasónk hasznosnak találja majd az itt összegyûjtött ismeretanyagot.

01.qxd

5/24/01 2:59 PM

Page 12

13 ALAPISMERETEK

1. Alapismeretek 1.1 A HTML dokumentum felépítése Ha megnézünk egy „mûködõképes” HTML dokumentumot, különféle szabályosságokat vehetünk észre benne. Alapvetõen minden dokumentumban a kifejezéseket egy megtört zárójel (’’) elõzi meg, majd zárja. Ha pedig több dokumentumot hasonlítunk össze, közöttük is találhatunk egyezéseket, hiszen minden HTML oldal ugyanúgy kezdõdik és végzõdik, s a köztes részeknél is vannak olyan bejegyzések, amelyek minden dokumentumban elõfordulnak. Valahogy így:

...

...

Ebben a részben elõször azt közöljük, hogy a dokumentum egy HTML oldal, majd következik a ’HEAD’ rész, amelyben az egész oldalra érvényes információkat rögzítjük. A ’BODY’ részben helyezzük el azokat az elemeket, amelyek vizuálisan is meg fognak jelenni, s mindenik bejegyzést a megfelelõ helyen le is zárjuk, méghozzá oly módon, hogy egy perjelet (’/’) teszünk eléje. Elsõ látásra mindez egyszerûnek tûnik, s valóban az is, hiszen nagyjából minden kifejezésnél ugyanezt a módszert alkalmazzuk: elõször elkezdünk egy mûveletet, majd a befejezéshez megismételjük a szóban forgó kifejezést, egy perjelet téve eléje. Eddig rendben is volnánk. Most akkor vegyünk egy szövegszerkesztõ programot (mondjuk, a jól ismert

5/24/01 2:59 PM

Page 14

14

15

ALAPISMERETEK

ALAPISMERETEK

Notepadet), majd hozzunk létre egy új fájlt, s nevezzük el ’akarmi.html’-nek. Mint már láthattuk, a legtöbb weboldal a ’*.html’ kiterjesztést használja, ez azonban – mint késõbb majd látni fogjuk – teljesen opcionális: oldalainkat bármilyen más kiterjesztéssel is elláthatjuk. Ezúttal azonban – mivel a példáinkban is ezt fogjuk használni – egyelõre maradjunk a megszokott elnevezésnél.

Természetesen a szöveget nemcsak valamelyik oldalra, illetve középre igazíthatjuk, hanem különféleképpen tördelhetjük is, például sorközöket illeszthetünk be, vagy új sort kezdhetünk. A következõ példában a szöveget elõbb két sorban jelenítjük meg, majd a két sort sorkihagyással választjuk el egymástól:

1.2

A szöveg elsõ sora.

A szöveg második sora paragrafusban.

Szöveges információk elhelyezése

Elsõként szerkesszük meg azt a részét az oldalnak, amely a legszembetûnõbb, és amely legelõször jelenik meg: a weboldal címét. Továbbá írjunk ki valamilyen szöveget is az eddig teljesen üres oldal tetejére:

Ez az én oldalam

Ez az elsõ szövegem

Oldalunknak már van címe, sõt tartalma is. De vajon a rajta szereplõ tartalmat elhelyezhetjük-e máshogyan is? Erre több módszert is alkalmazhatunk, elsõként lássuk azt, amellyel balra, jobbra, illetve középre igazíthatjuk a szöveget:

A szöveg elsõ sora.
A szöveg második sora.

Mint láthatjuk, a ’br’ kifejezést nem kell lezárnunk. Ilyen kifejezésekkel a késõbbiekben is találkozunk majd, ezeket ’üres kifejezéseknek’ nevezzük. Megjegyzés. A HTML 4.0-ban elvileg nem kell lezárnunk a ’paragraph’ ’

’-jét sem, mivel anélkül is minden rendesen mûködik. Mégsem célravezetõ azonban a második tag elhagyása, mivel ezt az SGML-alapú HTML 4.0, azaz az XHTML 1.0 már nem engedélyezi. Így azután ha a késõbbiekben szeretnénk túllépni a HTML 4.0-n, már az elején érdemes megszokni, hogy minden megkezdett paragrafust be is kell zárni. Ugyanez vonatkozik az idézõjelek használatára is: elvileg ezeket sem kell kitenni, ha az adott érték csak egy szóból áll, ám az új nyelvekben már ez is hibának számít. Jó ha tudjuk, hogy az XHTML 1.0 más dolgokban is eltér a HTML 4.0tól, többek között abban, hogy az üres kifejezéseket szintén le kell zárni.

... A kifejezések között található szöveget ezzel a megfelelõ helyre (left-bal, right-jobb, center-közép) igazítottuk. A középre igazításnak van még egy másik módszere is, ez pedig a következõ: ...

Hivatkozás: http://www.w3.org/TR/xhtml1/ Ha kombinálni szeretnénk a szöveg elhelyezkedését és a sorváltást, a következõképpen tehetjük meg:

à

01.qxd

01.qxd

5/24/01 2:59 PM

Page 16

16

17

ALAPISMERETEK

ALAPISMERETEK

Mint látható, az utána következõ szövegben a ’justify’ kifejezést is használhatjuk, amelynek a jelentése: sorkizárt. A következõ példában a szöveget tovább tördeljük azzal, hogy az adott bekezdéseket beljebb kezdjük a többihez képest: A szöveg elsõ sora. A szöveg második sora. A sima szöveget most már egy listával is kiegészíthetjük, ugyanis erre is külön kifejezés van a HTML nyelvben:

• 2 kg kenyér
• 20 dkg párizsi
• 1 kg liszt
• 1 liter tej

Ugyanezt számozott felsorolásként is megoldhatjuk:

2 kg kenyér

20 dkg párizsi

1 kg liszt

1 liter tej

A szöveg esetében azonban vigyáznunk kell, hiszen hiába teszünk beírásakor sortörést a szövegbe, ha nem helyezünk el benne egy ’
’-t is. Ráadásul ha egynél több szóközt írunk, azt is csak egynek tekinti a program. Erre való a ’’ kifejezés, amely a ’preformatted text’ (azaz elõformázott szöveg) rövidített megfelelõje. Ennek hatálya alatt akármit írunk, az úgy is fog megjelenni, ahogy az oldal forrásában szerepel. Ha új sort kezdünk, az a weboldalon is új sorként jelenik meg, ha pedig két sorközt szúrtunk be, az eredmény is két sorközt tartalmaz majd.

A következõ kép úgy fog megjelenni, ahogy itt látszik:

--| X | -- Azt a nehézséget, hogy nem tudunk egynél több szóközt kihagyni, másképpen is áthidalhatjuk. A HTML oldalak esetében minden karakter megfeleltethetõ egy másik értékkel is az ASCII-táblából. A szóközt például ’ ’-vel helyettesíthetjük. Ez a karaktersorozat szóközként jelenik meg, amelybõl akárhányat elhelyezhetünk az adott oldalon. Ebben a szövegben a  szóközöket lecseréltük a  másik megfelelõjükre. Ha a szövegünkben félkövér kiemelést (bold), esetleg aláhúzást (underline), netán dõlt betût (italic) szeretnénk használni, erre is van megoldás: A szöveg ezen része kiemelt, aztán ez meg dõlt, míg ez aláhúzott. A vastagításnál a ’b’ kifejezés helyett ’strong’-ot is használhatunk, amely ugyanazt az eredményt adja. Természetesen a félkövér-dõlt-aláhúzott jellemzõk együttesen, s különféle kombinációkban is használhatók: Ez a rész most félkövér dõlt aláhúzott. Most, hogy már el tudjuk helyezni, s ki tudjuk emelni a szövegrészleteket, érdemes megpróbálnunk másképpen is módosítani a szövegünket.

1.3 A szöveg betûtípusa, mérete, színe Ez itt a szöveg

01.qxd

5/24/01 2:59 PM

Page 18

18

19

ALAPISMERETEK

ALAPISMERETEK

Nézzük meg közelebbrõl is az iménti példát. A ’face’nél adhatjuk meg a betûtípust. Sõt, nemcsak egy, hanem több értéket is megadhatunk, vesszõvel elválasztva. Ennek akkor van értelme, ha nem vagyunk benne biztosak, hogy az adott betûtípus a felhasználó számítógépén is megtalálható. A grafikus böngészõ végigmegy a listán, s azt a betûtípust fogja használni, amelyet elõször megtalál. Itt ügyelnünk kell még egy apróságra: a betûtípus megadásakor csak a családot kell megjelölnünk, az adott nyelv speciális változatát nem (például a közép-európai Times New Roman CE esetében a ’CE’-t nem kell szerepeltetnünk a megnevezésben). Ahhoz, hogy az ékezetes betûk is minden körülmények között helyesen jelenjenek meg, még mást is kell tennünk, errõl azonban a ’HEAD’ kifejezést taglaló fejezetben szólunk részletesebben. A ’size’ segítségével a méretet adhatjuk meg, mégpedig vagy fix, vagy relatív értékként. Utóbbi esetben a +/- jelek segítségével állíthatjuk be a szöveg méretét, mégpedig a ’BASEFONT’ kifejezéssel megadott értékhez képest: És a szöveg maga Az adott példában a szöveg mérete az alapértelmezésben beállítotthoz képest 2-vel nagyobb, azaz 4 lesz. A ’color’ rész felel a színekért, az utána következõ érték pedig az RGB színkódot jelöli: #RRGGBB. A színkeverés alapvetõ szabályai itt is érvényesek, csak éppen hexadecimális rendszerben: ha például fekete színt szeretnénk elõállítani, akkor #FFFFFF lesz ez az érték, míg a fehér esetében #000000. A kódokat persze nem kell kívülrõl megtanulnunk, mivel a W3C oldalán egy átalakítót és egy táblázatot is találunk.

à

Hivatkozás: http://www.w3.org/MarkUp/Guide/ Style.html#hexcolors A színek tekintetében gondot jelenthet, hogy egyikmásik böngészõprogram eltérõen viselkedik: azonos forrás esetén is különbözõképpen jeleníti meg a tartalmakat.

Az egyik leggyakoribb eltérés a színekkel kapcsolatosan fordul elõ. A színeket ugyanis meg lehet adni szavakkal is, legalábbis a 16 VGA színt, amelyek a 3.2-es és a 4.0-s HTML verzióban szerepelnek. Ezeknek a színeknek a megjelenítése azonban nem minden böngészõben garantált, emiatt érdemes inkább hexadecimális értékeket használni. Mindezeket az információkat, valamint a ’browsersafe’, azaz böngészõ-biztos színeket is megtalálják az említett oldalon, táblázatba foglalva. Javaslat. A különbség már a Netscape és az Internet Explorer korábbi verzióiban is megvolt, s e téren a legújabb verziók sem közeledtek egymáshoz: eltérések vannak közöttük a színek, a méretek, a táblázatok, a keretek, a képek kezelésében, egyszóval szinte mindenben. Ahhoz, hogy valamennyi böngészõnél közel azonos eredményt érjünk el, vagy le kell mondanunk az extrákról, puritán kinézetet kölcsönözve oldalunknak, vagy külön változatot kell készítenünk az egyes böngészõtípusok számára. S hogy melyik a jobb megoldás, mindenkinek magának kell eldöntenie, azonban javasoljuk, hogy az elkészült oldalakat teszteljék le legalább a két legnépszerûbb böngészõn, nehogy meglepetés érje a látogatóikat.

 A színeket hexadecimális formában is megadhatjuk

01.qxd

5/24/01 2:59 PM

Page 20

20

21

ALAPISMERETEK

1.4 A HEAD felépítése Mint láttuk, a két ’HEAD’ kifejezés közé többek között olyan kifejezést is tehetünk, mint a ’TITLE’, amelynek segítségével oldalunk címét adhatjuk meg. Nézzük, mi más kerülhet még ide! Ide olyan alapinformációk kerülhetnek, amelyek az egész oldalra nézve érvényesek, éppen ezért a megjelenített tartalom elõtt kell rögzítenünk õket. Ezek közé tartozik a ’META’ kifejezés, amelynek segítségével alapinformációkat közölhetünk az adott oldalról. A ’META’ egyik leíró fajtájának a szintaktikája a következõ:

A ’META’ szintén ’üres kifejezés’, tehát egyszer kell csak meghívni, lezárásra nincs szükség. A leíró kifejezések esetében a ’name’ után a következõ változók állhatnak: ’description’, ’generator’, ’author’, ’keywords’, ’robots’, vagy bármilyen más kifejezés, bármilyen értékpárral. Az említett változók nélkülözhetetlenek a honlap elkészítésében, hiszen az itt szereplõ információk döntõen befolyásolják majd mind az oldal megtekintését, mind a szerverek mûködését. Nézzük sorjában ezeket a változókat. A ’description’ az oldal leírását tartalmazza, a ’generator’ az oldal létrehozóját jelöli, az ’author’ az oldal tulajdonosára utal, a ’keywords’ az oldalhoz kapcsolódó kulcsszavakat tartalmazza, míg a ’robots’ a keresõrobotok számára szolgál információval.



ALAPISMERETEK

Ezeket az információkat különbözõ helyeken használhatjuk, például akkor, ha az oldalunkat egy keresõ adatbázisába regisztráljuk, vagy egy toplistába vetetjük fel. A kulcsszavak megadják, milyen témával foglalkozik az oldalunk, s ennek alapján esetleg más helyezést kapunk a találati listában, ha valaki keresni kezd minket. A keresõszerverek mûködési elve általában mindenütt más, s elég bonyolult módszereket alkalmaznak arra, hogy kiszûrjék az olyan oldalakat, ahol valójában nem az található, mint amit az oldal készítõje láttat a keresõrobottal. Ezek a robotok végighaladnak a bejegyzett honlapokon, s különbözõ kritériumok alapján pontozzák azokat. Erre a pontszámra lehet hatása a ’keywords’, a ’description’ és a ’robots’ értékeinek. A robotok irányításáról, az általuk értelmezett parancsokról késõbb még szót ejtünk. A ’META’ azonban nemcsak erre való, hanem arra is, hogy utasításokat adjon a látogató böngészõjének, hogy az miként jelenítse meg az adott oldalt.

Nézzük meg itt is sorban egymás után, mire jók az egyes kifejezések, milyen plusz információval szolgálnak. Az elsõ kifejezés megadja, hogy milyen karakterkészletet használjon a böngészõ, amikor megjeleníti az oldalt. Itt az ékezetes magyarnak megfelelõ karakterkészletet adtuk meg értékként, elõtte pedig a dokumentumot, mint szöveget és HTML kódokat tartalmazó forrást (’text/html’) jelöltük meg. A szintaktika minden esetben hasonló.

01.qxd

5/24/01 2:59 PM

Page 22

22

23

ALAPISMERETEK



ALAPISMERETEK

Javaslat. Figyeljünk arra, hogy ebben az esetben a ’text/html’ után pontosvesszõ áll, s a ’charset=’ után nincs idézõjel, csak az egész kifejezés végén, hiszen mindez a ’content’ értéke. Tehát az idézõjelen belül ez áll: ’text/html; charset=windows-1250’. A következõ sorban arról gondoskodtunk, hogy az oldalunk minden egyes meghívásakor frissüljön, s ne a cache, azaz a gyorsítótár tartalma kerüljön a felhasználó képernyõjére. Fogalommagyarázat. A cache (magyarul gyorsítótár) szerepe az, hogy tárolja a meglátogatott weboldalakat a gyorsabb elérés érdekében. Azok a részek, amelyek nem változtak a legutolsó látogatás óta, nem töltõdnek le újra, hanem a merevlemezrõl jeleníti meg õket a böngészõ. A cache használatával sokkal gyorsabban tudjuk megjeleníteni az oldalakat, s a sávszélességet sem terheljük fölöslegesen. Elõfordul azonban, hogy a cache nem mûködik rendesen: a már módosított elemeket is réginek véli, s a tartalmukat nem aktualizálja. Ez a hiba az újabb böngészõk esetében szerencsére már nem fordul elõ. Az oldal frissítését másképpen is megoldhatjuk, például úgy, hogy a ’now’ helyére dátumot írunk:

Ennek a beavatkozásnak az eredményeként a böngészõ csak akkor frissíti az oldalt, ha a lejárati idõ után látogattuk meg azt. Esetünkben akkor, ha 1990. január 6-án, 0 óra 0 perc 2 másodperckor látogatunk el erre az oldalra. A ’PICS-Label’ oldalaink képi tartalmára vonatkozik, s lényegében egy minõsítõ eljárást takar: a minõsítéssel foglalkozó RSAC nevû szervezet arról biztosítja a látogatókat, hogy oldalainkon csak bizonyos típusú képek fordulnak elõ. A kategóriák minõsítõ szervezetektõl függõen

változnak, de az erõszakos, pornográf kategória például mindenütt megtalálható. Ha a felhasználó valamilyen külön szoftvert vagy saját böngészõjét használja arra, hogy a gyermekét távol tartsa az ilyen oldalaktól, az adott szoftver meg fogja nézni ezt az információt. Amennyiben oldalunkat nem láttuk el ilyen minõsítéssel, nem biztos, hogy alapértelmezésben, az ellenõrzõ szoftver aktív állapotában elérhetõ lesz a felhasználó számára. Vannak olyan szervezetek, amelyek korlátlan ideig megadják ezt a minõsítést, s vannak olyanok is, amelyek csak meghatározott ideig (példánkban ’97. január 1-ig). Természetesen a kódrészletet nem a hasunkra ütve kell begépelnünk, hanem az adott szervezet honlapján, a sikeres regisztráció végeredményeként kapjuk meg. Megjegyzés. Mint látható, ebben az esetben a ’content=’ után nem idézõjel, hanem aposztróf áll. Ennek lényege s értelme a programozási nyelvben rejlik. Az egyes kifejezések után álló értékeket általában idézõjelek közé tesszük. Azonban elõfordulhat olyan eset is (lásd példánkat), amikor magában a kifejezésben is szerepel az idézõjel. Ebben az esetben viszont a kód nem mûködne helyesen, hiszen hogyan is tudná eldönteni a böngészõ, melyik az ’igazi’ idézõjel, mikor zárul le az eredeti, s mikor a közbensõ kifejezés. Erre az esetre találták ki az aposztróf használatát: ha a kezdõ és a záró idézõjel helyett ezt használjuk, máris kiküszöböltük az említett problémát. Ezt a módszert alkalmazzák egyébként más nyelvekben is (pl. Perl). Azonnali cselekvésre is késztethetjük a felhasználó böngészõjét, ha a ’refresh’-t adjuk meg:

Ebben az esetben az oldal x másodpercenként fog frissülni, magyarán minden x-edik másodpercben a böngészõ újra betölti az adott oldal tartalmát.

01.qxd

5/24/01 2:59 PM

Page 24

24

25

ALAPISMERETEK

Itt viszont más a helyzet, mivel az ’x’-edik másodperc után a böngészõ az ’url=’ után álló címet fogja megjeleníteni. Ez például arra alkalmas, hogy ha oldalunk más címre költözik, a régi oldalról átirányítsa a látogatóinkat az új címre.

1.5 Hivatkozások Végre eljutottunk arra a pontra, ahol kiderül, mitõl is hypertext a hypertext. A lényeg az, hogy bárhová elhelyezhetünk hivatkozásokat, melyek vagy az adott dokumentumra vagy máshová mutatnak.

hivatkozás megnevezése Példánkban a ’href=’ után álló címre jut el a látogató, ha rákattint a megjelenõ szövegre. Ugyanígy az oldalon belüli pontokra is hivatkozhatunk, például az oldal tetejére: ugrás az oldal tetejére
ugrás egy másik szerver oldalának tetejére Példáink alapján valószínûleg máris kiderült, hogy ha csak a ’#’-et használjuk, az alapértelmezett oldal az aktuálisan betöltött oldal lesz. Ám ezen is változtathatunk, ha a ’HEAD’ részt a következõ sorral egészítjük ki:

Ennek eredményeképpen minden hivatkozásunk, amely relatív hivatkozásnak számít, vagyis nem teljes elérést tartalmaz, meg fogja kapni elõtagként az itt álló értéket. ugrás az oldal tetejére
ugrás a kezdõoldalra
ugrás egy oldalra

ALAPISMERETEK

A fenti példák közül az elsõben a ’http://www. foo.com/#top’, míg a másodikban a ’http://www. foo.com/index.html’ lesz a végleges cím. Ám ha nem relatív hivatkozást helyezünk el az oldalon, mint a harmadik esetben, akkor semmilyen változást nem tapasztalunk, a célállomás a ’http://www.oof.com/index.html’ lesz. Javaslat. Mivel a ’BASE href’ a teljes dokumentumra érvényes, minden relatív hivatkozásunk elé odakerül, ezért bánjunk vele óvatosan. Oldalainkon belül nemcsak az adott dokumentum tetejére hivatkozhatunk (’#top’), hanem bármilyen más részt is kijelölhetünk. Ebben az esetben az ’A’ az ’anchor’, vagyis a horgony megfelelõje. Ennek segítségével az oldal bármely részét megjelölhetjük, majd rá hivatkozva juttathatjuk el oda a felhasználót. Ez egy olyan szöveg, melyben tudatosan elhelyeztünk néhány horgonyt, hogy a késõbbiekben könnyebben meg lehessen találni a megjelölt részeket.
Mivel szövegünk több részbõl is állhat, így érdemes használnunk eme módszert, mely segítségével akár egy tartalomjegyzéket is létrehozhatunk.
Sõt, akár bizonyos szavakat is kiemelhetünk vele:
Alma - apple... ... hivatkozás az elsõ megjelölésre
hivatkozás a második megjelölésre
hivatkozás az ’alma’ szóra



01.qxd

5/24/01 2:59 PM

Page 26

26

27

ALAPISMERETEK

ALAPISMERETEK

A HTTP oldalakon kívül bármi másra is hivatkozhatunk, ha létezik hozzá a megfelelõ protokoll. Alapesetben mondjuk, egy letöltési helyre (’ftp://ftp.foo.com/pub/’) vagy akár egy e-mail címre is hivatkozhatunk: mail küldése Az elsõ helyen áll itt is a protokoll, a ’mailto:’. Ezután következhet a címzett e-mail címe, majd a levél tárgya. A ’cc’ mezõ a ’carbon copy’ rövidítése: ide annak az e-mail címe kerülhet, akinek másolatot szeretnénk küldeni a levélbõl. A ’body’ tartalmazza az adott levél szövegét. Az egyes változókat ’&’ jellel választjuk el, s értékük az egyenlõségjel után következhet, kivétel ez alól a legelsõ változó, amelyet egy kérdõjel választ el a címtõl. Ha a felhasználó rákattint erre a hivatkozásra, megnyílik az alapértelmezésben beállított levelezõprogram, s egy új levél megírására nyílik lehetõség. Az elõre megadott értékek automatikusan megjelennek a levél megfelelõ mezõiben. Megjegyzés. A mûvelet szintaktikája ebben az esetben is általános érvényû. A késõbbiekben még további címekkel és elérésekkel fogunk találkozni, ahol értékeket is megadunk a meghívott cím, program után. Ezekben esetekben is az elsõ változót egy kérdõjel fogja megelõzni, míg az összes többit egy ’&’ jel fogja elválasztani egymástól, értékük pedig az egyenlõségjel után helyezkedik el.



Javaslat. Ha biztosak vagyunk abban, hogy látogatóink döntõ többsége az Internet Explorer 4.0-t vagy annál újabb böngészõt használ, nyugodtan alkalmazhatjuk az elõbb ismertetett módszert. Nem árt azonban tudni, hogy más böngészõk esetleg nem tudják értelmezni ezt a hivatkozást, mivel csak a ’subject’

változót ismerik föl. Ebben az esetben az elõre megadott információkat a címre és az üzenet tárgyára kell korlátoznunk. Mindeddig nagyrészt ugyanabban a böngészõablakban dolgoztunk, ám ennél többre is vállalkozhatunk. Ha például azt szeretnénk, hogy látogatónk egyszerre lássa az eredeti oldalunkat, valamint azt az oldalt, amelyre a hivatkozás mutat, ennek sincs akadálya, ugyanis az egyes böngészõablakokat nevekkel is elláthatjuk. Ha új nevet adunk meg, lesz egy új ablakunk ezzel a névvel, ha pedig olyan nevet adunk meg, amelyet egy másik ablak használ, a hivatkozásban megjelölt oldal is ugyanebben az ablakban jelenik meg. Ez alól kivétel a ’_parent’, a ’_self’, a ’_top’ és a ’_blank’ név. Ezek közül számunkra jelenleg csak a ’_blank’ érdekes, amely minden esetben teljesen új ablakot nyit meg. Lássunk most egy példát, amelyben elõször egy új ablakban jelenik meg a tartalom, majd ezt követõen egy ’ablak1’ elnevezésû ablakban. elsõ hivatkozás
második hivatkozás Ha most a következõ linkre kattintunk, s az elõbb már kattintásunk eredményeképpen megnyílt az ’ablak1’ nevezetû böngészõablak, akkor az itt megjelölt tartalom is ugyanebbe az ablakba fog betöltõdni: harmadik link Az imént felsorolt többi érték a kereteknél jut majd fontos szerephez, így a használatukat egyelõre nem részletezzük. Létezik még egy könnyítés a linkeket illetõen azok számára, akik a billentyûzetet használókra is tekintettel van-

01.qxd

5/24/01 2:59 PM

Page 28

28 ALAPISMERETEK

nak. Talán senkinek sem újság, aki már dolgozott grafikus felületet használó programokkal, hogy az ’ALT + billentyû’ kombinációval el lehet érni bizonyos funkciókat az egér használata nélkül is. Itt van például az ’ALT + F’, amely a legtöbb program esetében a ’Fájl’, illetve a ’File’ menüt nyitja meg. Ezeket a ’shortcut’-okat onnan ismerhetjük fel, hogy az adott kifejezésnél valamelyik betû alá van húzva. Pontosan ugyanilyen elérési módot kínál a hivatkozásoknál használt ’accesskey’: Kezdõoldal Könnyen meggyõzõdhetünk arról, hogy mûködik-e, hiszen az ’ALT + K’ hatására ez válik aktív hivatkozássá. Azonban semmiben sem különbözik a többi hivatkozástól, így az sem feltûnõ, hogy használhatjuk ezt a billentyûkombinációt. Ennek megkerülésére a legegyszerûbb módszer az, ha megszüntetjük az aláhúzást valamennyi betûnél, kivéve a K-t: Kezdõoldal Illene most elmagyarázni, hogy mi is történik itt valójában, azonban a CSS-rõl és a DHTML-rõl a késõbbiekben lesz még alkalmunk részletesebben is szólni.

02-3.qxd

5/24/01 2:45 PM

Page 29

29 KÉPEK A HTML DOKUMENTUMBAN

2. Képek a HTML dokumentumban 2.1 Képek megjelenítése Eddig a szövegek elhelyezésével foglalkoztunk, most viszont térjünk át a képekre, hiszen a weben fõként grafikus oldalakkal találkozhatunk. A képeket ugyancsak üres kifejezések segítségével kezelhetjük, mégpedig a következõképpen:

Az ’src’ után áll a kép neve; ez lehet teljes hivatkozás (http://…), vagy relatív hivatkozás (a fájl neve). Az ’align’ meghatározza, hogyan viszonyuljon a kép a környezetéhez. Ha például szöveg veszi körül, akkor a ’left’ hatására a kép a bal oldalra kerül, s a szöveg jobbról „folyja körül”. Értékként itt a következõket adhatjuk meg: ’left|right|top| texttop|middle|absmiddle|baseline|bottom|absbottom’. Innentõl kezdve a kép a megadott értéknek megfelelõen fog elhelyezkedni a szöveg körül/felett/alatt. Elõfordulhat, hogy nem szeretnénk, ha ez a beállítás az egész szövegre vonatkozna, csak annak egy részére. Ekkor a következõ kifejeBeállíthatjuk, hogy a szöveg jobbról folyja körül

02-3.qxd

5/24/01 2:45 PM

Page 30

30

31

KÉPEK A HTML DOKUMENTUMBAN

KÉPEK A HTML DOKUMENTUMBAN

zést alkalmazhatjuk, amely megszünteti valamennyi ’align’nal megaydott kifejezés hatását:
A szöveg balról folyja körül a képet

A körül folyt kép alatt új sort kezdünk

Az alternatív text segítségével címkével láthatjuk el a képet

Példánkban ezután az ’alt’ következik, amely az Alternative Text rövidítése. Ez a kifejezés egy „címkével” látja el a képet, amely akkor is megjelenik, ha maga a kép nem található meg a hivatkozott helyen. Ha a kép is megjelenik, a címke csak akkor válik láthatóvá, ha az egérmutatót a kép fölé visszük. A ’width’ és a ’height’ segítségével megadhatjuk a kép szélességét és magasságát (pixelekben), míg a ’border’ a keret méretét szabályozza. A ’border’ esetében a 0-s értéknek fõként akkor van értelme, ha a kép is része egy hivatkozásnak, ugyanis ekkor alapértelmezésben a kép körül keret jelenik meg, amely arra utal, hogy itt is egy hivatkozással van dolgunk. A ’vspace’ és a ’hspace’ a kép körül – vízszintesen és függõlegesen – üresen maradó sáv szélességét határozza meg. A ’lowsrc’ segítségével egy rosszabb minõségû, de kisebb méretû képet adhatunk meg; a böngészõ elõször ezt tölti be, s csak ezután kezdi meg a ’src’-vel megadott kép betöltését. Ennek elsõsorban akkor látjuk hasznát, ha

a nagyobbik kép valóban nagy méretû, s emiatt meg akarjuk könnyíteni a felhasználóink dolgát azzal, hogy megtekintve a kép tartalmát eldönthessék, be akarják-e tölteni a nagyobbik változatot. Megjegyzés. A képméret csökkentéséhez hatékony segítséget nyújtanak a különféle képszerkesztõ programok, mint amilyen a Paint Shop Pro. Ebben a programban a fájlok szerkesztésekor és kimentésekor lehetõségünk nyílik a képek tömörítésére is. Mivel a két legelterjedtebb fájlformátum a weben a GIF és a JPEG, ezeket érdemes használni. Elõbbi elõnye, hogy akár ’interlaced’ módban is kimenthetjük, így a kép soronként fog megjelenni, s nem kell megvárnunk a teljes betöltõdést ahhoz, hogy láthassunk is belõle valamit. Ez a formátum csak 256 színt képes tárolni, azonban éppen emiatt a mérete is elég kicsi, s így jól használható az alapszintû designban. A JPEG egy tömörítési eljárást használ, amely ugyancsak ront a kép minõségén, ám 16,7 millió színt képes tárolni. A tömörítési

5/24/01 2:45 PM

Page 32

32

33

KÉPEK A HTML DOKUMENTUMBAN

eljárás során megválaszthatjuk, milyen mértékben csökkenjen a fájl mérete, s ezzel a képromlás mértékét is befolyásolhatjuk. Ideális esetben a képek BMP, azaz tömörítetlen bitmap formátumban készülnek el (Windows alatt, ha a bemeneti forrás szkenner vagy digitális kamera), majd ezekbõl készíthetünk további verziókat, a mérettõl függetlenül. Ügyeljünk arra, hogy lehetõleg tömörítetlen fájllal kezdjünk, mivel ha már tömörítettet tömörítünk be újra, nagyon rossz minõségû képet kaphatunk végeredményül. A JPEG, illetve GIF képek méretének további csökkentésére szolgálnak az olyan programok, mint a JPEG Optimizer vagy a Paint Shop Pro részét képezõ segédprogram, amelyek jelentõsebb minõségromlás nélkül képesek tovább csökkenteni a fájlméretet. Utóbbiban egyébként részletes Helpet is találunk, amelynek elolvasása után bárki könnyen kiismeri magát a képszerkesztés rejtelmeiben.

A Paint Shop Pro támogatja valamennyi webes képformátumot

KÉPEK A HTML DOKUMENTUMBAN

Hivatkozás: http://www.jasc.com/ A képekhez nemcsak egyetlen hivatkozás tartozhat, hanem annyi, amennyit csak akarunk. Ezzel a módszerrel például grafikus menüket készíthetünk. A kép felhasználásakor meg kell adnunk azt az aktív területet, ahol érvényesek a hivatkozások, tehát amelyre rákattintva a felhasználó eljuthat a kívánt oldalra. Ezeket a területeket különbözõ számok jellemzik, attól függõen, milyen alakzatot választottunk.

A weboldalon grafikus menüket is használhatunk

à

02-3.qxd

02-3.qxd

5/24/01 2:45 PM

Page 34

34

35

KÉPEK A HTML DOKUMENTUMBAN

A fenti példában a ’pages.gif’ nevezetû képet hívjuk meg, amely köröket tartalmaz. A ’usemap’ kifejezés segítségével pedig azt a hivatkozástérképet alkalmazzuk rá, amely a ’sitemap’ nevet viseli, s amelyet a ’MAP’ résznél definiáltunk. Az ’AREA’ után álló ’shape’ határozza meg az alakzat formáját. Ez lehet ’rect’, azaz téglalap (rectangle), ’circle’, azaz kör, vagy ’poly’, azaz konkáv alakzat. Az utánuk álló koordináták jelen esetben egy kört definiálnak, mégpedig úgy, hogy az elsõ két érték a kör középpontjának a helyét adja meg pixelben, a kép szélétõl számítva (x és y), míg a harmadik érték a kör sugarát. A téglalap esetében négy koordinátára van szükség (x1, y1, x2, y2): bal kezdõ, felül kezdõ, majd jobb végzõ és alul végzõ. Tehát az (x1, y1) a hivatkozás bal oldali, legfelsõ pontjának (kezdõpont) koordinátapárja, míg az (x2, y2) a jobb oldali legalsó pontot írja le. A ’poly’ esetében ezek a párok (x1, y1, x2, y2, x3, y3,..., xn, yn) az alakzat pontjait jelölik sorban. Az Animation Shop segítségével animált GIF-et jészíthetünk

KÉPEK A HTML DOKUMENTUMBAN

Shop segítségével kell elkészítenünk õket. Ezzel az eljárással különbözõ állóképeket fûzhetünk össze, amelyeket egymás után pörgetve egy animációt kapunk. Ezt mentjük ki azután egy GIF fájlba. A böngészõk és a HTML nyelv szempontjából az animált GIF fájlok és az állóképeket tartalmazó GIF fájlok között semmilyen különbség sincs. Megjegyzés. A GIF fájloknak még egy további elõnyét is megemlíthetjük, ez pedig az, hogy belõlük úgynevezett átlátszó (transparent) képeket is készíthetünk, amelyek nélkülözhetetlenek egy valamirevaló design elkészítésében.

2.2 BODY bgcolor, background Miután megtanultunk bánni a képekkel, nézzük meg, miként tehetjük még színesebbé oldalainkat. Eddigi példáinkban ugyanis csak fehér hátterû oldalakat vehettünk szemügyre. Oldalaink alap háttérszínét ugyanúgy, mint más helyeken, egy hexadecimális érték segítségével adhatWeboldalunkat háttérkép alkalmazásával tehetjük színesebbé

A weboldalon nemcsak állóképeket jeleníthetünk meg, hanem úgynevezett animált GIF-ek beillesztésére is lehetõségünk van. Ezek csak annyiban különböznek a közönséges képektõl, hogy speciális eljárással, például az Animation

02-3.qxd

5/24/01 2:45 PM

Page 36

36

37

KÉPEK A HTML DOKUMENTUMBAN

juk meg. Ezenkívül háttérképet is használhatunk, amely mozaikszerûen addig ismétlõdik, amíg teljesen kitölti az oldalt.

Most, hogy már nem fehér alapokon dolgozunk, érdemes megváltoztatnunk a hivatkozások színét is:

Itt az ’alink’ jelenti az aktív hivatkozást, a ’vlink’ a már látott (visited) hivatkozást, a ’link’ pedig az alapállapotot. A ’text’ segítségével az alapértelmezett szövegszínt adhatjuk meg. Ez természetesen nem írja felül az olyan ’FONT’ beállításokat, ahol külön megszabjuk a betû színét.

KÉPEK ELÕKÉSZÍTÉSE A WEBES PUBLIKÁLÁSRA

3. Képek elõkészítése a webes publikálásra Mielõtt a képeinket kitennénk a webre, elõbb meg kell szerkesztenünk õket. A fejezetet áttanulmányozva ki-ki megismerheti, hogyan is csinálják mindezt a profik. A képek elõkészítése több lépésbõl álló folyamat. Ezek a lépések a következõk:

1. Foltok és árnyékok – Az életlen részek eltüntetése, a fehér foltok eltávolítása, az árnyékok kivilágosítása.

2. Fásult/tompa képek – Szélsõségesen világos-sötét zónák, hiányos kontúrok, hiányos színtelítettség kiegyenlítése. 3. Fekete lyuk – Túl sötét a kép, ugyanakkor a világos részek túl sok fényt kaptak.

4. Sápadt színek, zavaró autók – Unalmas képek felfrissítése, zavaró tárgyak eltávolítása.

5. Optimalizálás a webre – Kiegészítõ programok, kimondottan a web-megjelenéshez. Hála a nagy felbontású digitális kameráknak és a kedvezõ árú szkennereknek, manapság bármely web-designer minden nehézség nélkül elhelyezheti saját fotóit a weboldalakon. A képszerkesztésre a profik többnyire az Adobe Photoshop programot használják, ennek is az 5.5-ös verzióját. A legtöbb szerkesztési feladat azonban az 5.0 verzióval vagy a kedvezõ árú SE-verzióval is megoldható. Szemléltetõ példának egy, a napsütéses délen található üdülõklub fotósorozatát választottuk ki, amely a sikeres szerkesztési megmunkálás után egy utazási cég weboldalát fogja díszíteni.

02-3.qxd

5/24/01 2:45 PM

Page 38

38

39

KÉPEK ELÕKÉSZÍTÉSE A WEBES PUBLIKÁLÁSRA

3.1 Foltok és árnyékok A képek szerkesztésekor számos nehézséggel kell megküzdenünk: a kép nem eléggé éles, fehér foltok vannak az égbolton, túl fekete az árnyék, esetleg túl erõs a kontraszt (növények és medence). A képnek – csinos ház, sok zöld, csalogató medence és szép idõ – egy csapásra a messzeség utáni vágyat kellene felébresztenie a szemlélõben. Azonban valahogy mégsem lesz az embernek igazi nyaralási hangulata, mivel az óriási árnyékos felületek, a vészesen fekete medence és az égen virító ronda fehér foltok miatt ez a kép túl komoran hat, és amatõr benyomást kelt – majdnem olyan, mint egy rossz szkenner-kép egy régi utazási katalógusból. Lássuk, mit tehetünk a képpel, hogy helyrehozzuk a hibákat.

KÉPEK ELÕKÉSZÍTÉSE A WEBES PUBLIKÁLÁSRA

Fehér foltok eltávolítása Most távolítsuk el a kép felsõ részén látható fehér foltokat. Kattintsunk ehhez az eszközsorban a pecsétszimbólumra. A nézet menübõl válasszuk ki az eszközhegy párbeszédablakot és egy közepes pecsétméretet. Minél kisebb a képfelbontás, annál kisebb legyen az eszköz hegye – arányban a kijavítandó terület nagyságával. Vegyük most fel lenyomott Alt-gombbal a szükséges pecsétszint (lehetõleg mindig a kijavítandó hely közelében). Kattintsunk a jobb egérgombbal a hibás helyre, rámásolva az „ép” felületet. Az ég ismét kifogástalanul kék! A pecséttel a kép bal oldalán lévõ zöld vakfoltokat és a kép közepén lévõ zavaró zöld vonalat is eltávolítottuk. Az égboltról eltüntettük a fehér foltokat

Ez a komor kép aligha csinál kedvet a nyaraláshoz

Az árnyékok világossá tétele

Az életlenségek eltüntetése Nyissuk meg a képet a Photoshoppal, és válasszuk ki a Szûrõ/Élességet beállító szûrõ/Élességbeállítás menüpontot. Ezzel az elmosódott kontúrok egyértelmûen élesebbek lesznek. Az élességet beállító szûrõt azonban nem árt óvatosan kezelni: az alacsony felbontású képek, a raszteres mintákról készített szkennerképek, valamint a videóról készített állóképek tönkre is mehetnek ettõl a szûrõtõl, amely felfokozza a képhibákat.

A képen látható komor árnyékot a kontraszt-görbe segítségével számolhatjuk fel. Válasszuk ki ehhez a Kép/ Beállítások/Kontrasztgörbe menüpontot. Nos itt is kísérleteznünk kell egy kicsit. Ne felejtsük el bekapcsolni az elõnézetet, mert akkor minden egyes effektust közvetlenül ellenõrizhetünk, például a pipettával kikereshetjük a képen az ideális értékeket a kép világos-

A sötét folt egy gyönyörû bokrot rejt

02-3.qxd

5/24/01 2:45 PM

Page 40

40

41

KÉPEK ELÕKÉSZÍTÉSE A WEBES PUBLIKÁLÁSRA

ságára, arányára és a sötétségére vonatkozóan. Nos, toljuk el a kurzorral – lenyomott bal egérgomb mellett – a sötét értéket felfelé, és korrigáljuk egy kicsit a görbe pályáját. A sötét bozótból egy gyönyörû zöld bokor lesz.

Kontrasztok megváltoztatása Nos, a kép egy kicsit élettelennek tûnik a kontrasztot illetõen. A következõképpen szüntethetjük meg ezt a hiányosságot. Válasszuk ki a Kép/Beállítás/Világosság/ Kontraszt menüpontot. Megjegyzés. Ezeknél a beállításoknál nem árt óvatosan eljárni, fõként a kontraszt és a megvilágítási erõsség korrelációjára kell ügyelni; rendszerint mindkét értéket meg kell változtatni valamilyen arányban. Mivel a zöld tónusok még mindig egyhangúak, változtassuk most meg a színegyensúlyt (szintén a Kép/Beállítások alatt). Itt változtathatjuk meg az egyes színek értékeit a színmélységet, az arányt és világosságot illetõen. A kék a tapasztalatok alapján mélyebb árnyékokat hoz létre, ezért esetünkben a mélységet kicsit csökkentenünk kellene, és a zöldet ezzel szemben hangsúlyozni. Eközben ne kattintsunk a Fényerõ megtartása mezõre. A befejezéshez hiányzik még egy kis lépés: a színtelítettGyakran a telítettséget és a világosságot is meg kell változtatni

KÉPEK ELÕKÉSZÍTÉSE A WEBES PUBLIKÁLÁSRA

séget is be kell állítani. Ehhez menjünk ismét a már ismert Kép/Beállítások menüben a Színtónus/Telítettség menüpontra. Mivel a kép össztónusának korrekciójára nincs szükség, pusztán a telítettség és a világosság javítására korlátozzuk a tevékenységünket. Ezzel készen is vagyunk!

3.2 Fásult/tompa képek A második kép esetében a következõ hiányosságokkal kell még megküzdenünk: a világos-sötét zónák szélsõségesek, az ég és a víz a medencében túlságosan kontúrok nélküli, végül a színtelítettség hiányos. Ismét egy komor kép: az ég fehér, a táj fekete

Ez a kép tehát túl komor, és olyannyira nem hat hívogatóan a szemlélõre, hogy egyáltalán nem alkalmas az internetre. A helye leginkább a „szemétkosárban” lenne. Azonban még ez az elfuserált felvétel is rendbe hozható néhány perc alatt a Photoshop nagy teljesítményekre képes szerkesztõi funkcióival.

A részletek kidolgozása Ezen a képen a világos-sötét kontrasztok olyan erõsek, hogy majdnem árnyképnek hat. A színeknek az információs ablakkal megmért értékébõl kitûnik, hogy az égbolt tartománya a tökéletesen tiszta 255/255/255 (RGB) fehér ér-

02-3.qxd

5/24/01 2:45 PM

Page 42

42

43

KÉPEK ELÕKÉSZÍTÉSE A WEBES PUBLIKÁLÁSRA

téket mutatja. Ez azt jelenti: ahol nincs semmi, ott nem is lehet semmit sem elõkaparni. Így tehát az eget és a vízben lévõ tükörképét teljesen új színekbe fogjuk öltöztetni. Elõször azonban ebbõl az “árnyképbõl” egy igazi képet kell csinálnunk, és ehhez a sötét zónákat ki kell világosítanunk. A Világosság/Kontraszt menüponttal a “fekete lyukak” nem távolíthatók el. Szükség van egy alapos kezelésre. Ezt a Kép/Beállítás menüben lévõ Tónusérték korrekciója menüponttal végezhetjük el. Húzzuk a beállítóablak alsó felében látható fekete háromszöget addig jobbra, amíg a tónusérték terjedelme a 60 körüli értéket el nem éri. Ezt követõen toljuk el a felsõ panel közepén lévõ szürke háromszöget addig balra, amíg a középsõ tónusérték szóródása el nem éri az 1,66 értéket. Most aztán csodálkozhatunk, mi minden rejlik a korábbi “fekete lyukakban”. Csak most tûnik fel, hogy az egész képnek mennyire tompa és élettelen az összhatása. A Szûrõ/Élesség megrajzolása/Tompaság maszkolása beállítással állítsuk az élességet 50-rõl 74%-ra. Az egy pixelnyi sugár tökéletesen elegendõ alacsonyabb felbontás esetén. Ez a mûvelet a táj egyes részleteit finomabban képes kirajzolni, mint egy átlagos szûrõ. Sokat jvíthatunk a képen a tónusérték korrekciójával

KÉPEK ELÕKÉSZÍTÉSE A WEBES PUBLIKÁLÁSRA

Most két olyan lépés következik, amelyek már az elsõ kép szerkesztésébõl ismertek: a Kép/Beállítás alatt megváltoztathatjuk a mély színtónusú területek színegyensúlyát (0, +4 és -12 színtónusértékekre), és növelhetjük a Világosságot/Kontrasztot (+30-ra és +34-re). Többet még a legjobb akarattal sem hozhatunk ki a tájból, amely egy kicsit árnyékos marad, mintha este lenne. Ezért úgy határoztunk, hogy a szükségbõl erényt csinálunk, és egy pompás esti égboltot teremtünk.

Az égbolt megváltoztatása Az eszközsorban található varázspálcával válasszuk le az égboltot. Mivel egységes felületrõl van szó, bõven elegendõ a 10-es toleranciaérték a leválasztáshoz. Vigyük a varázspálca-kurzort az égbolt középpontjába, és kattintsunk egyet az egérgombbal. A varázspálca automatikusan kijelöli az égboltot. Az égbolt szerkesztését a saját rétegén (fóliáján) végezzük, hogy a képet ne változtassuk meg visszavonhatatlanul. Válasszuk ki az Ablak/Rétegek kiemelése menüpontot, hogy a megfelelõ párbeszédpanelt a képernyõre hozhassuk. Kattintsunk a rétegnek megfelelõ ablakban jobbra fent a fekete háromszögre, és válasszuk ki a kinyitható menübõl az Új réteg menüpontot. Adjuk meg a 100%-os lefedési erõsséget és a normál módot. A rétegablakban a kék kijelölés azt mutatja, hogy az ablak aktív, és tovább dolgozhatunk a még kijelölt égbolttal. Az égbolt megváltoztatásához új régetre van szükségünk

02-3.qxd

5/24/01 2:46 PM

Page 44

44

45

KÉPEK ELÕKÉSZÍTÉSE A WEBES PUBLIKÁLÁSRA

Ezt követõen az égboltnak szerkezetet és színt adunk, végezetül pedig egy cseppnyi hangulatról gondoskodunk majd. Kattintsunk lent az eszközsoron kétszer az elõtérszín beállítására szolgáló mezõre, és válasszunk ki egy világosabb kék tónust, hogy a kék-fehér kombinációval egy kis felhõs égboltot varázsoljunk a képre. Ezt egészen egyszerûen megtehetjük a Szûrõ/Rendering szûrõ menüben lévõ Felhõkkel.

KÉPEK ELÕKÉSZÍTÉSE A WEBES PUBLIKÁLÁSRA

nusként. Hozzunk létre egy utolsó színnégyzetecskét, színezzük ki ezt egy erõteljes narancssárgával, és toljuk el teljesen jobbra (pozíció 100%). Végül toljuk el a középsõ rombusz formájú szabályozót a 75%-os pozícióra. Erõsítsük meg a változtatásokat OK-val, és vigyük a szálkeresztkurzort a kép felsõ peremére. Hozzunk le egy vonalat lenyomott egérgomb mellett az égboltig, majd engedjük el a gombot. Máris itt van az esti hangulat. Néhány mozdulattal esti hangulatot varázsolhatunk a képre

Az égboltra felhõket is varázsolhatunk

A medence rendbetétele Az esti hangulat megteremtésére kiválóan alkalmas az eszközsorban lévõ Lineáris Árnyalatkifutás funkció. Kattintsunk kétszer ennek az ikonjára, és vigyük be a következõ értékeket: normál, lefedési erõ: 42% és árnyalatkifutás: elõtérszín a háttérszínhez. Ezt követõen kattintsunk a Szerkesztésre. Megjelenik a árnyalatkifutás szerkesztése ablak, ahol aktuálisan a kéktõl a fehér irányába (elõtérszíntõl a háttérszín felé) látható az árnyalatkifutás. A középsõ árnyalatkifutási sávon alul két nyilas négyzetet láthatunk az induló- és célszínhez. Toljuk el a bal négyzetecskét lenyomott egérgomb mellett egy kicsit jobbra, a 35%-os pozícióig. A jobb négyzetecskét toljuk el a színsáv bal támasztósoráig úgy, hogy az árnyalatkifutás most a fehértõl a kék felé haladva menjen végbe. A színsáv felsõ részén lévõ kicsi rombusz formájú szabályozót toljuk el 65%-ra. Kattintsunk a színsávon alulra, hogy egy további árnyalatkifutási színt szúrjunk be. Toljuk el az új nyilas négyzetecskét a 78%-os pozícióra, kattintsunk kétszer a négyzetecskére, és válasszunk egy lágy rózsaszínt színtó-

Néhány finom korrekcióra van szükség, mielõtt meg tudjuk szerkeszteni az égbolt visszatükrözõdését a medencében. Hozzuk aktív állapotba egy egérkattintással a rétegnek megfelelõ ablakban a háttérszintet. Távolítsuk el a pecséteszközzel – úgy mint fentebb – a vízben lévõ foltot, a vízbõl ágaskodó rudat, valamint a napozóágynál lévõ póznát. Ahhoz, hogy az égbolt visszatükrözõdését beállíthassuk, elõször az eszközsorban lévõ Poligon lasszóval ki kell választanunk a vízfelületet. Kezdjük el a medence bal felsõ peremén, és bõvítsük a kijelölést egérkattintásonként kis lépésekben a medence szélén haladva. A vízbõl kiálló növények kimaradnak, de a tükrözõdés nem. A villogó kijelölést ezután a Kijelölés/Kijelölés mentése menüponton keresztül új csatornaként menthetjük el, hogy ahhoz késõbb hozzáférhessünk. Ha most a rétegnek megfelelõ ablakban a Csatornák fülre kattintunk, akkor egészen lent láthatjuk az Alfa 1 kiválasztó maszkot a medencéhez. Ezután az 1-es rétegen a négyszög formájú kiválasztó eszközzel az égbolton a visszatükrözõdés szempontjából

02-3.qxd

5/24/01 2:46 PM

Page 46

46

47

KÉPEK ELÕKÉSZÍTÉSE A WEBES PUBLIKÁLÁSRA

szóba jöhetõ felületet kijelöljük. Vigyük a kijelölést a Szerkesztés/Másolás segítségével a köztes tárolóba. A Szerkesztés/Beszúrás segítségével a kijelölést új rétegként beilleszthetjük a képbe. Miután a kijelölt részt a Szerkesztés/Transzformálás/Függõleges tükrözõdés menüponttal a feje tetejére állítottuk, toljuk le azt a mozgatásra szolgáló eszközzel a medence fölé. Ezt követõen töltsük be a medencekontúr korábban elmentett kijelölt részét („Alfa 1”) a Kijelölés/Kijelölés betöltése menüponttal. Állítsunk be a kijelölés alatt egy 1 pixelbõl álló laza leválasztási szegélyt. Nos, hogy a vízfelület kivételével mindent kijelöljünk a medencében, válasszuk ki a Kijelölés/Visszatérés menüpontot. Miután megnyomtuk a Del gombot, és az átlátszóságot 65-re változtattuk, készen is van a kép.

KÉPEK ELÕKÉSZÍTÉSE A WEBES PUBLIKÁLÁSRA

metlen érzést vált ki bennünk. Kilátástalan esetrõl van szó? Egyáltalán nem, ha ismerjük a szerkesztés helyes menetét. Fontos lépés a „fekete lyukak” eltüntetése

A teljes vízfelületet kicseréltük

Kép kivilágosítása és a talaj kijelölése

3.3 Fekete lyuk Most a „fekete lyuk” problémáját igyekszünk megoldani. Elsõ ránézésre megállapíthatjuk, hogy a kép túl sötét, az árnyék túl fekete (fekete lyuknak tûnik), a világos részek pedig túl sok fényt kaptak (szerkezet hiányzik és fehér=„nincs rajz”). A kicsi belsõ udvarra vetett pillantás után az avatott szemlélõ hiányolja a romantikát, mivel a kontrasztok túl kemények. Az udvar sarkában lévõ „fekete lyuk” kelle-

Ahogy már az elõzõ példa esetében, ezen a felvételen is tiszta fehér értékek, valamint erõteljes fekete értékek nagy tartományai találhatók meg. Itt is érvényes, hogy a semmibõl nem lehet elõvarázsolni valamit, tehát újra fel kell „építenünk” a felületeket. Elõször elõ kell hoznunk a képbõl, ami elõhozható belõle. Ez alkalommal szerencsére egy csapásra mûködik a Kép/Beállítás menüben lévõ Tónusérték-kiegyenlítés menüpont. A bal oldali fal sötét tömegébõl egy virágágyás szegély lesz, a kapu ívének külsõ fala, valamint a balkon levetik sivár köntösüket, a jobbra lévõ, látszólag dülöngélõ pálma kizöldell. Kétségkívül a jobb oldali falon megmaradt a fekete lyuk, ugyanúgy, mint a túlzottan ragyogó talaj. A könnyebb tájékozódás érdekében használjunk elõször egy élességet megrajzoló szûrõt a Szûrõ menübõl. Ez alkalommal elegendõ a kontúrok éles megrajzolása menüpont. Különítsük el az eszközsorban található Polygon lasszóval – lenyomott bal egérgombbal – a talajt. A lágy kijelö-

02-3.qxd

5/24/01 2:46 PM

Page 48

48

49

KÉPEK ELÕKÉSZÍTÉSE A WEBES PUBLIKÁLÁSRA

lõ kontúr arra szolgál, hogy a talajt késõbb a képen ne kifûrészelt, hanem természetes körvonallal tudjuk megjelentetni. Mentsük el a kijelölést „talaj” néven a Kijelölés elmentése menü alatt. A cseréhez elõbb ki kell jelölni a talajt

A falak rekonstruálása Most a túl sötét sarkot kell rekonstruálnunk. Ehhez vigyünk át az „érintetlen” falból bizonyos részeket a sötét részre. A varázspálcával jelöljük ki a sarokban látható „fekete lyukat” a pálmafa levelei között lévõ sötét részekkel együtt, 30-as toleranciaérték mellett. Ahhoz, hogy ezt a kijelölést kibõvíthessük, tartsuk lenyomva a Shift gombot a kijelölés alatt. A kijelölés befejezése után a Kijelölés menüben válasszuk ki a Lágy kijelölõ kontúr menüpontot és állítsuk a 4-es értékre. A kijelölés tökéletes. Fogjuk meg a pecsétet, és kattintsunk a szerszámhegyek ablakban a legnagyobb hegyû, lágy kontúrú ecsetre. Helyezzük a kurzort valahol a hibátlan falra és vegyük fel ezt a területet – mint pecsétmintát – lenyomott Alt gomb mellett, egy bal egérgombbal végzett kattintással. Ahhoz hogy ezen az „új” falon tovább dolgozhassunk, hívjunk le a rétegablakban egy új réteget, adjuk neki az „új fal” nevet, és használjuk a pecsétet. Válasszuk ki most a Kijelölés/Kijelölés megfordítása menüpontot. Ezzel mindent, az egykori „fekete lyukunk” ki-

KÉPEK ELÕKÉSZÍTÉSE A WEBES PUBLIKÁLÁSRA

vételével, kijelöltünk. Töröljük a Del gombbal a megmaradt falrészt. Fordítsuk meg ismét a kijelölést. Csökkentsük az „új fal” réteg lefedési erõsségét 34%-ra. Mivel a fekete lyuk ez alatt az érték alatt van, növelnünk kell a színértékeket a Kép/Beállítás/Színtónus/Telítettség alatt: színtónus: 0, telítettség: 46, Lab-világosság: –14. A „fekete lyuk” fölötti bal és jobb oldali falak színértékeinek a megkülönböztetésére speciális kijelölésekre van szükség. Nézzük elõször a jobb oldali falat. A „fekete lyuk” kijelölt állapotban van, a Kijelölés/Kijelölés betöltése menüponttal húzzuk le a talajt. Az egyedül álló jobb oldali fal kijelöléséhez le kell húznunk a bal oldali fal felületét. Kattintsunk az eszközsorban lévõ kijelölõ négyszögre, válasszunk ismét egy 1 pixeles lágy kontúrt, és húzzunk egy négyszöget lenyomott Alt gomb mellett – a kurzor egy mínusz jelû fonalkeresztté változik – a kép fenti bal peremétõl a sarokvonalig. Mentsük el a kijelölést „jobb fal” néven az esetleges további feldolgozások céljára. A bal oldali fal megszerkesztéséhez fordítsuk meg az aktív kijelölést úgy, hogy az egész képfelület a jobb oldali falrész kivételével aktív legyen. Most húzzuk le a Kijelölés betöltése ablakban a „talaj” kijelölést. Mentsük el a kijelölést „bal fal” néven. Most rámehetünk a pecséttel és tökéletessé tehetjük a bal falat. Csökkentsük elõször a rétegablakban lévõ menüben a két réteget egyre. Bizonyosodjunk meg arról, hogy a bal fal kijelölése aktív állapotban van, és kezdjük el a formákat és a kontúrokat (talajszegély, növények) a pecséttel egészen a sarokig felújítani. A falakat „rétegenként„ építjük fel újra

02-3.qxd

5/24/01 2:46 PM

Page 50

50

51

KÉPEK ELÕKÉSZÍTÉSE A WEBES PUBLIKÁLÁSRA

Ezt követõen töltsük be a „jobb fal” kijelölést, és végezzük el ezzel is az elõbbi eljárást. A pecséttel lépésenként „lopjuk el” a jobb fal talajszegélyét, és szúrjuk be azt a kijelölésbe. Ezzel felépítettük az új falakat!

A talaj rekonstruálása Most vegyük kezelésbe a talajt! A falrészek kivilágosítása után feltûnik, hogy a talajon lévõ árnyékok még mindig túl sötétek. Ahhoz, hogy az árnyékot kijelöljük, kattintsunk a varázspálcával a napsütötte, egyenletesen világos talajfelületre, és jelöljük ki azt a varázspálcával. A laszszó eszköz segítségével vonjuk be – lenyomott Shift gomb mellett – a pálmafán látható árnyékokat is a kijelölésbe. Mentsük el ezt a kijelölést „talajfények” néven, és töltsük be a „talaj” kijelölést. Válasszuk ki a Kijelölés betöltése menüpontot, és húzzuk le a „talajfények” kijelölést a „talaj” kijelölésbõl. Mentsük el az új kijelölést az „árnyék” alatt. Most újraszínezhetjük az árnyékot. Ezt a Kép/Beállítás menüben lévõ Színtónus/Telítettség menüponttal oldhatjuk meg. Ne felejtsük el a Színezés jelölõnégyzetet beállítani. Egy barnás színtónust válasszunk, amely megfelel a falazathoz. Hogy a talaj a megfelelõ színtónust kapja, jelöljük ki, és vigyük be a képen látható értékeket. A talaj rekonstruálásához gondoskodnunk kell a megfelelõ színtónusról

KÉPEK ELÕKÉSZÍTÉSE A WEBES PUBLIKÁLÁSRA

Készen van egy új, jobb kép alapja, csupán kisebb korrekciókra van szükség az összképet illetõen. Elõször válasszuk ki a Kép/Beállítás/Auto-tónusértékkorrekció menüpontot, aztán vegyünk egy kis vöröset a képbõl a Színtónus/Telítettség segítségével (szintónus +5, telítettség -12). A további finomításokat ezután már könnyedén elvégezhetjük az eszközdobozban található utólagos megvilágításra szolgáló funkcióval. A pálmafa üdébb zöldet kap, az égbolt ragyogóbban kék lesz. Apróbb korrekciók vannak már csak hátra

A kitakaró segítségével a virágágyásokat és a spalettákat frissíthetjük fel. Eközben felfedezhetjük, hogy némely hely a virágágyásokban enyhe rózsaszínes tónust vett fel. Ez jó alkalom arra, hogy néhány fehér foltot a varázspálMennyivel hngulatosabb így a belsõ udvar

02-3.qxd

5/24/01 2:46 PM

Page 52

52

53

KÉPEK A HTML DOKUMENTUMBAN

cával kijelöljünk, az elõtérszínhez a szerszámsoron kiválasszunk egy vörös tónust, és a menüben kiválasszuk a Szerkesztés/Felület kitöltése menüpontot. A kijelölt fehér helyeket az elõtérszín 40%-ával töltsük fel, mire hirtelen kicsi virágok jelennek meg. Ezenkívül a pecséttel lemásolhatunk és beszúrhatunk a virágágyásokból még néhány levelet, hogy a virágok élettelibbnek tûnjenek – játszadozzunk egy kicsit a kitakaró, az utólagos világosítás és az ecset nyújtotta lehetõségekkel. Nos készen van egy napsütötte, hangulatos belsõ udvar. Az egész kép mintha kicserélték volna.

3.4 Sápadt színek, zavaró autók Most két további problémára koncentrálunk: megeshet, hogy a zöld rész nem eléggé differenciált, ráadásul sivár, s a képet zavaró tárgyak (mondjuk, egy vagy két autó a háttérben) csúfítják el. Ha egy park csupa hasonló színárnyalatokból áll, kevésbé csalogató. A további megmunkálás szempontjából azonban ez majdnem hogy elõnyös: abból indulhatunk ki ugyanis, hogy az összképet érintõ fontos korrekciókat szinte néhány mûvelettel elvégezhetjük.

Zöld területek optimalizálása Elõször foglalkozzunk a színkontrasztokkal és az összszíntónussal. Válasszuk ki a Kép/Beállítás/Variációk menüpontot. Kattintsunk a bal egérgombbal egyszer a Több sárga, aztán a Világosabb menüpontokra, és erõsítsük meg a választást az OK-val. Rögtön látszik, hogy mennyivel dúsabban és frissebben néz ki a természet a képen. Azonban rögtön feltûnik az is, hogy a kép nem éles. Korrigáljuk ezt a hiányosságot a Szûrõ/Élességet megrajzoló szûrõ menüben lévõ Élesség megrajzolása menüponttal. Most már egészen jól néz ki a kép.

KÉPEK A HTML DOKUMENTUMBAN

Autók eltávolítása Zavarólag hathat a háttérben egy-két oda nem illõ autó, esetleg a csúnya képszegély. Mindkét probléma egyszerûen megoldható a pecséttel. A képkerethez a lenyomott bal egérgomb és az Alt gomb segítségével vegyünk fel egy darab mezõt, és menjünk végig a képkeret mentén. Elõfordulhat, hogy néhány helyet kétszer kell bevonnunk a pecsétmintával (vegyünk fel egy új pecsétszínt a lenyomott Alt gomb segítségével). Az autók eltüntetésére vegyük fel elõször egy kisebb éles peremû pecsét segítségével az utca szélén lévõ sövény mintáját és kattintsunk többször az autótetõk fölé. Az utca rekonstrukciójához kattintsunk lenyomott bal egérgomb és az Alt gomb segítségével az aszfaltfelületre úgy, hogy a sötét utcaperemet közben vegyük fel. Aztán fessük az ecsettel kattintások sorozatával az aszfalt szerkezetét az autó fölé. Ezzel készen is van az édenkert, és máris pihenésre csábít.

3.5 Optimalizálás a webre A Photoshop 5.5 kiváló webes eszközöket kínál. Nézzünk meg két fontosabbat ezek közül. Elõször nézzük az Adobe Image Ready nevû integrált kiegészítõ programot, amellyel GIF-animációkat hozhatunk létre. Hozzunk létre a réteg-managerben egy új réteget, „Réteg 1” néven. Állítsuk az elõtérszínt az eszközsorban egy erõs sárga tónusra, kattintson a szövegeszközre az eszközsorban, azután arra a helyre a képen, ahol a szövegnek meg kell jelennie. A szövegablakban gépeljük be a szöveget 42 pontos Arial Black betûvel, és erõsítsük meg OK-val. Korrigáljuk a mozgás-eszközzel a szöveg pozícióját. Állítsuk be a réteg-managerben az Egymásba másolás opciót. Duplázzuk meg a réteg-managerben a réteget, és nevezzük el „Réteg 2”-nek. Most nyomjuk meg az aktív mozgás-esz-

02-3.qxd

5/24/01 2:46 PM

Page 54

54 KÉPEK A HTML DOKUMENTUMBAN

köz mellett többször a billentyûzeten a felfelé mutató nyilat addig, amíg a szöveg körülbelül egy sornyit vándorol felfelé. Ismételjük meg ezt a folyamatot egy új, harmadik réteggel is (neve: „Réteg 3”) további felfelé irányuló szövegeltolással. Válasszuk most ki a Fájl/Ugrás ....hoz/Image Ready menüpontot. Az animációs ablakban a mindenkori réteg aktiválása mellett az Új keret paranccsal bevihetjük az animációnk egyes képeit, és lejátszhatjuk azokat. (Kattintsunk a réteg-managerben a szem szimbólumra, és kapcsoljuk ki és be így a réteget). Itt további lehetõség nyílik a GIF-fájljaink optimalizálására azáltal, hogy a palettát és a tárolt mennyiséget elõzetesen megnézhetjük, és mint optimalizált verziót menthetjük el. A Fájl menü alatt találjuk a Mentés a webhez beállítást. A párbeszédablak azt a lehetõséget kínálja, hogy palettát hozzunk létre a webszínekbõl, optimalizáljuk a beállítást a webhez a kép nagyságát, a palettát és a betöltési sebességet illetõen, és bevigyük a elõnézeti kép lehetõségét a GIF-, a JPG- vagy a PNG-fájlokra vonatkozóan. Ezzel le is zártuk a fotók utólagos szerkesztését taglaló kis tanfolyamunkat. Reméljük most már ki-ki képesnek érzi magát arra, hogy tökéletes fotókat helyezzen el a hálón, és így weboldalai jó benyomást keltsenek.

04-5-6-7.qxd

5/24/01 2:48 PM

Page 55

55 TÁBLÁZATOK

4. Táblázatok 4.1 Táblázatoknál használatos kifejezések A HTML nyelvben az egyik legfõbb pozicionáló eszköz a táblázat, amelynek segítségével megoldhatjuk, hogy a képek és a szövegek oda kerüljenek, ahova kell, s egymással esetleg kölcsönhatásban is álljanak. A táblázatok használata elõtt tekintsük át, milyen kifejezésekkel lesz dolgunk, milyen komponensekbõl áll össze egy táblázat. Itt olyan fogalmakkal találkozhatunk, mint a sorok (table row – TR), a cellák (table data cell – TD), a fejlécek (table header cell – TH), a táblázatcímek (caption).

4.2 Táblázatok felépítése Nézzük a legegyszerûbb példát, amikor két oszlopunk van, fejléccel ellátva, alattuk pedig adatok:

Year	Sales
2000	$18M
2001	$25M
2002	$36M

Íme a lehetõ legegyszerûbb táblázat

04-5-6-7.qxd

5/24/01 2:48 PM

Page 56

56

57

TÁBLÁZATOK

TÁBLÁZATOK

A ’TABLE’ után különbözõ kifejezések állhatnak. Ilyen például a ’border’ vagy a ’cellpadding’ és a ’cellspacing’ közül valamelyik; az elsõ a cellákon belüli helyet, míg a másik a cellák közötti helyet szabályozza. A ’width’, ’height’, ’align’, ’valign’ a cellákon belüli szöveg elhelyezkedésének alapértelmezését adja meg. A ’bgcolor’ és a ’bordercolor’ a táblázat szegélyének a színét adja meg (ide értékként a szín hexadecimális megfelelõje kerülhet). Megjegyzés. A ’width’ és ’height’ mellett állhat mind érték, mind százalékos érték. Példának okáért: ’width=”80%”’. A cellpadding értékét pixelekben adhatjuk meg

A cellspacing tag a cellák közötti helyet szabályozza

A ’TR’ után a következõk állhatnak: ’align’, ’valign’, ’bgcolor’, ’background’. A ’TD’-t és a ’TH’-t követheti: ’align’, ’valign’, ’width’, ’height’, ’nowrap’, ’colspan’, ’rowspan’, ’bgcolor’, ’background’. A ’nowrap’ használata esetén az adott cella tartalmát a böngészõ nem látja el automatikusan sortörésekkel. Ezzel a kifejezéssel azonban nem árt vigyázni, mivel a sortörés mellõzésével óriási méretû cellák keletkezhetnek. A ’nowrap’ önmagában is érték, tehát utána már semmit sem kell írni:

A ’colspan’, illetve ’rowspan’ segítségével egy cella többoszlopnyi, illetve többsornyi helyet is kitölthet. Alább a ‘cellpadding’ a ‘colspan’ és a ‘rowspan’ tag-ek alkalmazására mutatunk be egy példaprogramot: Year Sales North South Total 2000 $10M $8M $18M 2001 $14M $11M $25M A táblázatot megelõzheti a címe, amelyet a következõképpen adhatunk meg, kiválasztva, hogy a táblázat fölött (’top’) vagy alatt (’bottom’) jelenjék-e meg: A táblázat címe ... 04-5-6-7.qxd 5/24/01 2:48 PM Page 58 58 59 TÁBLÁZATOK KERETEK Megjegyzés. Természetesen a táblázaton belül is létrehozhatunk egy újabb táblázatot, így azután egy adatcella tartalma lehet egy másik táblázat is. Ezt a lehetõséget fõként a képek kezelésében használhatjuk ki, amikor az oldal külalakját alakítjuk. 4.3 Dinamikus felépítésû táblázatok A táblázatokat a böngészõ ablakához igazítva dinamikussá tehetjük. Így biztosak lehetünk abban, hogy maximálisan igazodni fognak a felhasználó felbontásához. A kisebb felbontások esetében az ablak szélein csúszka jelenik meg, amellyel ide-oda gördíthetjük a táblázatot. A dinamikussá tételnél mindössze arra van szükség, hogy a szélesség és a magasság megadásánál százalékos értékeket alkalmazzunk (pl. ’width=”60%”’). Ennek eredményeként a táblázat minimális szélessége akkora lesz, hogy a szöveg, illetve a képek kiférjenek, azonban nagyobb felbontás esetében a tartalom „szélesvásznúvᔠválik: a táblázat alkalmazkodik a nagyobb ablakmérethez, és ráfeszül erre a felületre, maximálisan kihasználva a helyet. Ezt a legkönnyebben úgy ellenõrizhetjük, hogy elkészítjük a táblázatos oldalunkat, majd pedig átméretezzük böngészõnk ablakát – az oldalunk tartalma máris alkalmazkodik az új méretekhez. Ezzel kapcsolatban elõfordulhat, hogy egyes felhasználóknál az oldalunk túl széles lesz, és a nyomtatott verzióban lemarad a jobb fele. A megoldás az, hogy az oldalainkból egy csak nyomtatásra szánt verziót is készítünk, vagy az, hogy fix szélességûvé tesszük oldalunkat (kb. a 600-as pixelméret az, amelyet még könnyen ki tudnak nyomtatni a felhasználók). El kell tehát döntenünk, hogy inkább arra helyezzük-e a hangsúlyt, hogy minden felbontásban könnyen olvasható legyen az oldalunk, vagy arra, hogy az egyes oldalak könynyen nyomtathatók legyenek. Átmeneti megoldás lehet, hogy kétféle verziót készítünk. 5. Keretek 5.1 FRAME Oldalainkat nemcsak táblázatok segítségével oszthatjuk fel, hanem ennél sokkal jobban elkülönülõ részekre is bonthatjuk. A keretek nagy elõnye, hogy függetlenek egymástól, és mégis mindegyik kapcsolatban áll a másikkal. A független kezelés alapja az, hogy minden keret tartalma külön HTML fájlba kerül, s a böngészõ a keretek megjelenítésekor valójában nem egy, hanem több oldalt nyit meg egyszerre, egy oldalon jelenítve meg azokat. A keretek között azzal is kapcsolatot teremtünk, hogy ugyanarról az oldalról hívjuk meg õket, továbbá névvel is ellátjuk õket, így azután az egyes keretekre külön is hivatkozhatunk. A keretekkel dolgozó oldalak esetében mindig létezik egy leírófájl, amelybõl az összes többit meghívjuk. Ennek a felépítése annyiban tér el az eddig tapasztaltaktól, hogy nincsen benne ’BODY’ rész, hanem ezt a ’HEAD’ után a ’FRAMESET’ váltja fel. ... A ’FRAMESET’ segítségével osztjuk el a kereteket az oldalon: meghatározzuk, mennyi helyet foglalhatnak el a keretek vízszintesen és függõlegesen, valamint hogy az egészet körülvegye-e egy szegély. Mint látható, az értékeket vesszõvel választjuk el egymástól, s százalékos vagy fix értékeket egyaránt használ- 04-5-6-7.qxd 5/24/01 2:48 PM Page 60 60 61 KERETEK KERETEK hatunk, valamint dinamikusan is értelmezhetjük a nagyságot. Utóbbi esetben a ’*’ azt jelenti, hogy az adott keret teljesen kitölti a fennmaradó helyet. Megjegyzés. A ’FRAMESET’ egyes értékeit tovább bonthatjuk, tehát például keretet hozhatunk létre a kereten belül. Ha például egy olyan keretet jelöltünk ki, amely fixen 200 pixel széles, utána még egy további 60%-os és egy 40%-os keretpárra bonthatjuk fel azt. A ’FRAME’ is üres értékként szerepel, tehát nem kell lezárnunk a meghívása után. Az ’src’ segítségével elsõként megadjuk az adott keret tartalmát, majd a keretnek nevet is adunk. Ezután a ’marginwidth’ és a ’marginheight’ segítségével a bal és a jobb oldali, valamint a fenti és a lenti szegélyeket határozhatjuk meg. Ha ezeket az értékeket nem adjuk meg, a böngészõ a megjelenítés szempontjából legjobb értéket fogja alkalmazni. A ’scrolling’ után a ’yes’, a ’no’, valamint az ’auto’ állhat. Utóbbi esetében csak akkor jelenik meg a gördítõsáv, ha szükség van rá, azaz a tartalom nem fér ki a képernyõre. A ’NORESIZE’ segítségével megadhatjuk, hogy a kereteink alapbeállításként megadott méreteit a felhasználók ne módosíthassák, míg a ’framespacing’ a keretek körüli üres hely mértékét szabja meg. A ’FRAMESET’ bezárása után érdemes elhelyezni egy ’NOFRAMES’ kifejezést is, amely olyan böngészõknek szolgál információval, amelyek nem támogatják a kereteket (pl. egyes karakteres, vagy évekkel korábbról származó böngészõk). Ha ezt a szöveget látod, akkor böngészõd nem támogatja a kereteket. Nézzük meg most egy konkrét példán keresztül, hogyan is épül fel egy ilyen oldal: Az oldal címe Ezen az oldalon két keretet látunk: egyet felül, egyet pedig alul 04-5-6-7.qxd 5/24/01 2:48 PM Page 62 62 63 KERETEK KERETEK Ha ezt a szöveget látod, akkor böngészõd nem támogatja a kereteket. 5.3 Hivatkozások keretek segítségével Az elõzõ oldalon szerepel egy kép, amelyen két keretet láthatunk, egyet felül, egyet alul. Könnyû megkülönböztetni a kettõt, mivel csak az alsóhoz tartozik gördítõsáv. Mivel kereteinket névvel is elláttuk, semmi akadálya sincs annak, hogy az egyik keretbõl a másik keret tartalmát megváltoztassuk. 5.2 Kiegészítés a BODY kifejezéshez Most, hogy a keretek példáján megismerkedtünk a ’marginwidth’ és a ’marginweight’ értékekkel, érdemes egy kicsit visszakanyarodni a ’BODY’ használatára. Kereteink kapcsán, vagy már korábban is felmerülhetett bennünk a kérdés, vajon hogyan lehet módosítani azt a beállítást, amely egy dokumentum megjelenítésénél a bal és a jobb oldali üresen hagyott helyekre vonatkozik. Ha például azt szerettük volna, hogy oldalunk legfelül, baloldalt kezdõdjön, mindenféle sorkihagyások, s üres helyek nélkül, a rendelkezésünkre álló kifejezésekkel eddig nem tudtuk volna leírni. A ’BODY’ megadásakor a következõ kifejezéseket használhatjuk: ’marginwidth’, ’marginheight’, ’topmargin’, ’leftmargin’. Utóbbi kettõ segítségével megadhatjuk, hogy fentrõl, illetve balról mennyi hely maradjon ki az oldal megjelenítésekor. Ha zérust adunk meg, azt érjük el, amire az elõbb utaltunk, azaz nem marad ki hely a tartalom és a böngészõablak széle között. hivatkozás Mint látható, a meghívott oldal a ’frame1’ nevezetû keretben fog megjelenni. Azonban nem kell kétségbeesnünk abban az esetben sem, ha minden hivatkozásunk másik keretre mutatna (vagy esetleg böngészõablakra), ugyanis létezik egy kifejezés, amelynek egyik módozatát már használtuk, ez pedig a ’BASE’: Ezt a szokott módon beillesztve (lásd a hivatkozásoknál), minden hivatkozásunk automatikusan kiegészül az itt megadott értékkel. Korábban már volt szó a ’_parent’, ’_self’, ’_top’ értékekrõl a ’target’ kapcsán, azonban ezek közül nem tisztáztuk valamennyit. Most erre is sort kerítünk. A ’_parent’ esetében az oldal, amelyre a hivatkozás mutat, abban a keretben fog megjelenni, amely a ’FRAMESET’ meghívását tartalmazza. A ’_self’ hatására ugyanabban a keretben fog megjelenni az oldal, míg a ’_top’ által az egész ablakot el fogja foglalni a behívott dokumentum, felülírva ezzel a keretre vonatkozó valamennyi beállítást. 5.4 IFRAME This site uses floating frames 04-5-6-7.qxd 5/24/01 2:48 PM Page 64 64 65 KERETEK DINAMIKUS HTML 6. Dinamikus HTML 6.1 DHTML és CSS A CSS a Cascading Style Sheets rövidítése; segítségével olyan stíluslapokat gyárthatunk, amelyek megkönnyítik oldalaink formázását, a szövegek igazítását, s a strukturálásban is szerepet játszanak. A W3C által elfogadott legújabb szabvány a CSS2, amely lefelé kompatíbilis. Hivatkozás: http://www.w3.org/TR/REC-CSS2/ | http://www.w3.org/pub/WWW/Style/ A CSS-rõl a következõ fejezetben fogunk bõvebben beszélni, itt csak az alapokkal van módunk megismerkedni, hiszen a CSS kimerítõ leírásához és bemutatásához az egész könyv is kevés lenne. Kétféleképpen definiálhatunk elemeket a CSS használatához: vagy a ’HEAD’ kifejezés után beírva, vagy külön fájlba csoportosítva õket, s így hivatkozva rájuk. A két módszer teljesen egyenértékû, legfeljebb annyi a különbség közöttük, hogy ha az elemeket külön fájlba rakjuk, nem „csúfítják el” a HTML kódunkat. ... ... vagy ... à Oldalainkon belül is elhelyezhetünk belsõ (lebegõ) kereteket, azonban ezeket nem mindegyik böngészõ támogatja. Amennyiben biztosak vagyunk abban, hogy látogatóink nagy része Internet Explorert használ, nyugodt szívvel alkalmazhatjuk a fentebbi sorokat, ellenkezõ esetben megtörténhet, hogy a felhasználók valószínûleg semmit sem fognak látni az egészbõl (legfeljebb annyit, hogy ’This site uses floating frames’ – azaz azt az üzenetet, amelyet a két kifejezés közé helyezünk). Természetesen erre a keretre is hivatkozhatunk a nevével. 04-5-6-7.qxd 5/24/01 2:48 PM Page 66 66 67 DINAMIKUS HTML DINAMIKUS HTML ... 6.2 Szövegformázás A fenti példában az egyes stíluselemek megnevezése ’info’ és ’main’. Hivatkozni úgy tudnunk rájuk, hogy az általunk kiválasztott helyen a ’class’ értékének a megfelelõ megnevezést adjuk meg. Ez egy sima szöveg, majd következik a másik szöveg a ’main’ megjelenítésében, valamint az ’info’ megjelenítésében. Megjegyzés. Ha a stíluselemeket külön fájlba írjuk, akkor nincs szükség a ’STYLE’ kifejezésekre a ’HEAD’-en belül. BODY { background : #006000} P.main { font-family : Arial; font-size : 12pt; color : white} P.info { font-family : Arial; font-style : italic; color : #80C000} A { color : #C0C8FF; font-weight : bold} Példánkat kibõvítettük a háttér meghatározásával (#006000), valamint a hivatkozás stílusának megadásával. Lássuk, mit kell tennünk akkor, ha azt szeretnénk, hogy hivatkozásaink (a ’class’-hivatkozás megadása nélkül) úgy mûködjenek, hogy eredetileg nincsenek aláhúzva, de ha föléjük visszük az egérmutatót, akkor átváltoznak aláhúzottá. A { color: blue; text-decoration: none; font-family: Verdana,Arial,sans-serif; font-size: 8pt; } A:hover { color: black; text-decoration: underline; font-family: Verdana,Arial,sans-serif; font-size: 8pt; } Az említett hatást itt azzal értük el, hogy a ’:hover’ részt odaillesztettük a stíluselem neve mögé. Természetesen több ilyen stíluselemet is deklarálhatunk különbözõ nevekkel, amelyekre azután késõbb hivatkozhatunk. A.menu { color: black; text-decoration: underline; font-family: Verdana,Arial,sans-serif; font-size: 8pt; } A.header { color: white; text-decoration: underline; font-family: Verdana,Arial,sans-serif; font-size: 8pt; } A.header:hover { color: white; text-decoration: underline; font-family: Verdana,Arial,sans-serif; 04-5-6-7.qxd 5/24/01 2:48 PM Page 68 68 69 DINAMIKUS HTML DINAMIKUS HTML font-size: 8pt; } ... hivatkozás A CSS ennél sokkal többre is képes, hiszen akár árnyékolt szöveget is létrehozhatunk vele, vagy mozgó objektumokat is megjeleníthetünk a dokumentumunkban. Ezzel részletesebben Majd csak a következõ fejezetben fogunk foglalkozni, azonban bemutatunk egy olyan példát, amelyben árnyékot adunk a szövegnek: BODY { background : #000000} P.main { font-family : Arial; font-size : 12pt; color : white} P SPAN { font-style : italic; font-size : 14pt} .text { color: red; margin-left: 10px; font-size: 28px; font-family: Arial Black } .highlight { margin-top: -38px; margin-left: 8px; color: darkred; font-size: 28px; font-family: Arial Black } ... Árnyékkal ellátott szöveg Árnyékkal ellátott szöveg Talán ebbõl a példából is kitûnik, mennyire szabadon pozícionálható bármilyen elem a CSS segítségével. A CSS és a DHTML egyébként azért forrt össze annyira a mindennapi használatban, mivel a CSS a DHTML megvalósításait alkalmazza, s talán az egyik legnépszerûbb alkal- mazási területe annak. Természetesen a DHTML a nagyobb kategória: egy nyílt rendszer, amelynek segítségével a dokumentum bármely elemét kedvünk szerint módosíthatjuk. Itt egyébként arra is lehetõségünk van, hogy a stíluselemeket menet közben definiáljuk. Az adott kifejezés után a ’style’-t odaillesztve máris mûködik a dolog: Ez a szöveg most piros lesz. 04-5-6-7.qxd 5/24/01 2:48 PM Page 70 71 A CSS-RÕL BÕVEBBEN 7. A CSS-rõl bõvebben A HTML utasításokat bárki könnyen elsajátíthatja, aki egy kicsit is konyít az angol nyelvhez. Ami a legnagyobb problémát jelenti a kezdõk számára, az utasítások uniformizált megadási módja. Így például gyorsan készíthetünk egy elsõ szintû címsort a ’ ’ utasítással. De miként értessük meg a böngészõnkkel, hogy a címsorokat nem mindig az egyhangú Times betûtípusban akarjuk látni, és hogy hagyhatna egy kicsit nagyobb térközt is a szöveg után? 7.1 Mire jók a stíluslapok? A böngészõk fejlesztõi mindenféle kényszermegoldásokat találtak ki a HTML szegényes formázási lehetõségeit orvosolandó. A Netscape ’’ tag-jétõl kezdve, a ’’ tag-en keresztül, amely – ha szûk keretek között is – már lehetõvé tette a betûtípussal, nagysággal és színnel való játékot, egészen a ’’ tag-ig, amely a térközöket volt hivatva kezelni. De ez végeredményben mind csak toldozás-foltozás, a HTML maradt, ami volt: dokumentumstruktúrák és oldalak kapcsolódását definiáló nyelv. Az elemek formázására és pontos elhelyezésére nem alkalmas. Itt jutnak szerephez a Cascading Style Sheetek (CSS). Ezekkel a stíluslapokkal a szövegformázástól kezdve a szövegigazításon, sorközön, kereten, margón át egészen a színekig gyakorlatilag minden formázási kívánságot teljesíthetünk. A style sheetekkel akár olyan, külön tárolt dokumentumsablonokat is készíthetünk, amilyeneket a profi szövegszerkesztõk esetében megszoktunk. A CSS voltaképp a dizájnerek bûvös cilindere, amelybõl azok a mindenkori kívánalmaknak megfelelõ megol- 04-5-6-7.qxd 5/24/01 2:48 PM Page 72 72 73 A CSS-RÕL BÕVEBBEN A CSS-RÕL BÕVEBBEN 7.2 Style sheetek integrálása a HTML-be A style sheeteket többféleképpen is beilleszthetjük a HTML-be. Elsõként itt van mindjárt a szövegben történõ gyorsformázás lehetõsége. Ehhez a szövegrész bevezetõ HTML tag-jébe kell beírnunk a ’style=’ utasítást, amelyet azok a style sheet értékek követnek, amelyek erre a HTML-parancsra vonatkoznak. Például így: 1st order title Ezzel el is készítettünk egy elsõ szintû címsort vörös színû és 36 pontos betûkbõl. Ha nagyobb területeket akarunk ugyanazzal a style sheet formátummal ellátni, akkor célszerû a ’’ utasítást használni, mint alább, a Lista 1 részben: A W3 konzorcium célja: nagy hatás, kevés kóddal dásokat húzzák elõ. Mindemellett a style sheet nyelvet nem is ördöngõsség megtanulni. A CSS simán beépül a HTML-be. Megjegyzés. Idõközben megjelent a CSS-nyelv második verziója is, a CSS 2.0. Sajnos a böngészõk nem tudtak lépést tartani vele, így a felkínált utasításoknak csak egy részét támogatják. Persze a nagy böngészõ-fejlesztõk még ebben sem egységesek. A Netscape 4.x a CSS 1.0 verziójának egy részét támogatja és egy párat a 2.0 parancsai közül. Az MS Internet Explorer már a 3.0 verziója óta ismeri a CSS 1.0 legnagyobb részét, a 4.0 pedig támogatja a CSS 2.0 egy részét és néhány, a Microsoft által fejlesztett style sheet utasítást. Ezeket figyelembe kell vennünk, ha weboldal szerkesztésére adjuk a fejünk. A style sheetek teljesen új távlatokat nyitnak a megjelenés terén. Viszont minél intenzívebben támaszkodunk a CSS-effektekre az oldalunk formázása során, annál csalódottabbak lesznek azok a látogatók, akik CSS-képtelen böngészõt használnak. 1: Lista 1 2: > 3: 4: File title 5: 6: > 7: ... 8: 9: 10: 1st order title 11: Normal paragraph 12: > 13: 14: 15: 16: 17: 18: Lista 2 19: 20: 21: File title 04-5-6-7.qxd 5/24/01 2:48 PM Page 74 74 75 A CSS-RÕL BÕVEBBEN 22: 23: 24: 25: 26: 27: 28: 29: 30: 31: 32: 33: 34: 35: 36: 37: 38: 39: 40: 41: 42: 43: type=”text/css”> /* ... Style-Sheet-Data ... */ > ... > Lista 3 File title ... > A ’’ és ’’ között elhelyezkedõ szövegrészre egységesen a ’style=’ után megadott formátumok lesznek érvényesek. Az elsõ listában lévõ rész ennek megfelelõen dõlt betûkkel lesz szedve. A style sheet sablonok azonban nemcsak egyetlen HTML-utasításra vagy területre vonatkozhatnak, hanem valamennyi ebben a fájlban szereplõ hasonló HTMLutasításra is. Például minden 1. szintû címsor ennek megfelelõen lesz formázva (2. lista). A HTML-fájl fejlécében elhelyezett ’’ paranccsal adhatjuk meg a style sheet értékek értelmezési tartományát. A bevezetõ ’’ tag között pedig a style sheet értékeket adjuk meg. A CSS-RÕL BÕVEBBEN Ha az egységes formátumot a projektünk minden www-oldalán alkalmazni szeretnénk, célszerû a style sheet adatokat külön, külsõ fájlban tárolni. A késõbbiek során elegendõ az egyes www-oldalak fejlécében hivatkozni erre a fájlra. A ’’ paranccsal adhatunk meg ilyen hivatkozást. A ’rel=”stylesheet”’ és a ’type=”text/css”’ beállítások közlik a böngészõvel, hogy egy külsõ szöveges adatfájl tárolja a style sheet adatokat. A CSS-adatok külsõ fájlban való tárolása elegáns megoldás arra, hogy egy web-projekt minden oldalát egységesen formázzunk meg. Ez leginkább az utólagos módosítások munkaigényének a csökkenésében fizetõdik ki. Ha példának okáért minden címsor betûtípusát utólag akarjuk módosítani, elég az erre szolgáló részt a CSS-adatfájlban átírni. Megjegyzés. A CSS-adatfájl egy .css kiterjesztésû tiszta szöveges állomány, amely nem tartalmazhat mást, csak formátumdefiníciókat, valamint “/*” és “*/” jelek közé zárt megjegyzéseket. Nem tartalmazhat HTML-parancsokat sem. A ’’ a HTML-nyelvben külsõ style sheet adatállományok beillesztésére szolgál. Erre a célra a CSS-ben is megtalálható a testvérparancs, mint a 4. listán is látható. 1: Lista 4 2: type=”text/css”> 3: @import url(format.css); 4: 5: 6: Lista 5 7: 8: 9: File title 10: 12: 04-5-6-7.qxd 5/24/01 2:48 PM Page 76 76 77 A CSS-RÕL BÕVEBBEN 14: 15: 16: 17: 18: 19: 20: 21: 22: 23: 24: 25: 26: 27: 28: 29: 30: 31: 32: 33: 34: 35: 36: 37: 38: 39: 40: 41: 42: 43: 44: 45: 46: 47: 48: 49: 50: 51: 52: ... Lista 6 Lista 7 Lista 8 File title Valamilyen cimsor Kek szoveg Voros szoveg A CSS-RÕL BÕVEBBEN 53: 54: 55: 56: 57: 58: 59: } 60: 61: 62: 63: 64: 65: 66: Lista 9 Lista 10 A CSS mostani, 2.0 verziójában megtalálhatók a különbözõ megjelenítõ eszközökre szabott formátumsablonok is. A képernyõk, nyomtatók saját szabályaik szerint mûködnek. Míg a képernyõn jól mutat a sötét háttérre írt világos szöveg, ugyan ez nem tûnik jó megoldásnak a nyomtatós megjelenítés esetében. Ennek megfelelõen a különbözõ megjelenítõ eszközökhöz a megfelelõ style sheet értékeket rendelhetjük hozzá (5. lista). Sajnos, ezt a remek funkciót a mai böngészõk elég foghíjasan támogatják. 7.3 Formátumsablonok, alosztályok A style sheet sablonokban definiálhatjuk az olyan HTML parancsok tulajdonságait, mint a bekezdés típusa vagy a táblázatok. Ha ezek után a HTML fájlban a megfelelõ HTML tag-et alkalmazzuk, az így definiált formátumokat is átvesszük. Ehhez a következõt kell tennünk: adjuk meg a kívánt HTML tag-et, majd kapcsos zárójelben a rá vonatkozó style sheet értékeket. Ha egyszerre több tag-nek is ugyanolyan értékeket szánunk, csak soroljuk fel õket, vesszõvel elválasztva (6. lista) 04-5-6-7.qxd 5/24/01 2:48 PM Page 78 78 79 A CSS-RÕL BÕVEBBEN Megjegyzés. A kapcsos zárójelek között szóközökkel elválasztva akár több formátumdefiníciót is megadhatunk. Minden definíció egy névbõl (például ’color’) és egy attól kettõsponttal elválasztott értékbõl (például #EE0000) áll. Az egyes definíciók lezárására a pontosvesszõ szolgál. Ha egy HTML fájlon belül ugyanannak a HTML parancsnak különbözõ formátumokat is szánunk, például a bekezdéseket különbözõ színnel akarjuk írni, akkor formátum-alosztályokat kell definiálnunk (7. lista). Alosztályt akként definiálunk, hogy a HTML-tag után egy ponttal elválasztva az alosztály azonosító nevét adjuk meg. Ezt a nevet szabadon választhatjuk, de nem lehet benne szóköz és ékezetes karakter. Az elõl szereplõ HTML-tag azonosítót el is hagyhatjuk. Ebben az esetben simán, ponttal indul a definíció, amelyet az alosztály neve követ. Ezzel egy úgynevezett üres osztályt definiáltunk, amelynek a formátumait bármely HTML-tag-re alkalmazhatjuk. Az alosztály alkalmazásához csak a ’class=’ paramétert kell beszúrnunk a HTML parancs bevezetõ tagjébe, és utána beírni a kívánt alosztály nevét, idézõjelek között (8. lista). Feltételes formázás A style sheet-ek segítségével azt is meg tudjuk oldani, hogy a HTML-tag a definiált formátumokat csak akkor vegye fel, ha egy elõre meghatározott másik HTML-tagen belül szerepel. Így elérhetjük, hogy az ’ ’ parancsok közötti szöveg az egyik címsorban ne dõlt betûkkel jelenjen meg, hanem mondjuk kék színben, míg más HTML-tag-ekben a megszokott, dõlt betûs megjelenítéssel. Az ennek megfelelõ definíció látható a 9. listában. Megadjuk a fölérendelt tag-et, ez példánkban a ’h1’, majd szóközzel elválasztva az alárendelt tag-et, jelen esetben az ’i’-t. A CSS-RÕL BÕVEBBEN Független formátumok Az üres osztályokhoz hasonlóan mûködik a style sheet másik szolgáltatása, a független formátum. Ezeket a formátumokat tetszés szerint alkalmazhatjuk a HTML-tag-eken, például az elõre definiált formátumok kiegészítéseként. Így egy független formátumot felruházhatunk a félkövér/dõlt tulajdonságokkal. Ezt a független formátumot azután a HTML-tag-eken belül más formátumok kiegészítéseként használhatjuk, amelyeket a szóban forgó tag-ek számára definiáltunk. Ilyen formátumdefiníciót mutat be a 10. lista. A független formátumok definíciója kettõs kereszttel (#) kezdõdik. Közvetlenül ezután kell megadni a formátum szabadon választott nevét. A kívánt HTML-tag-ekbe történõ beszúrás az ’id=’ paraméterrel történik: Tobb fenyt! 7.4 Betûtípusok A betûtípusok alatt a betûk különbözõ formáit értjük, mint amilyen az Arial, a Helvetica vagy a Times New Roman. De a betûcsaládok, mint a Sans Serif is ide tartoznak. Az persze más kérdés, hogy azok a mûvészi betûk, amelyek úgy feldobják az oldalainkat, a látogatóink képernyõjén is megjelennek-e. Ha a látogatónak nincs olyan széles betûtípus-tárháza, mint nekünk, vagy csak éppen a kívánt betûtípus nincs telepítve a gépére, a parancs hatástalan marad. Idõközben erre a problémára is megszületett a megoldás, mégpedig olyan letölthetõ, platformfüggetlen típusok képében, amelyek a HTML-oldallal együtt letöltõdnek a látogató gépére, lehetõvé téve a böngészõnek a megjelenítést még abban az esetben is, ha az adott betûtípus nincs telepítve. 1: Lista 11 2: 6: 7: Lista 12 8: Mint látható, egy, de akár több betûtípust is meghatározhatunk (11. lista). A típusok alkalmazása során a megadáskori sorrend lesz a mérvadó. Amennyiben az elsõként definiált típus rendelkezésre áll, azt használja a böngészõ. Ha az elsõként megadott betûtípus nem érhetõ el, a második következik és így tovább. A betûtípusok neveit veszszõvel kell elválasztanunk, a nevekben szereplõ szóközöket pedig aláhúzással helyettesítsük. A betûk méretét a ’font-size:’ paranccsal befolyásolhatjuk. Az értékeket abszolút számokkal és százalékos formában is megadhatjuk. A 100%-nál kisebb értékek a betûk kicsinyítését, a 100%-nál nagyobb értékek a növelését eredményezik (12. lista). Ezzel még távolról sincs vége a formázási lehetõségeknek. Próbáljuk ki a következõ variációt: Font style A betûk stílusának lehetséges értékei: ’italic’ (dõlt), ’oblique’ (dõlt) és ’normal’ (szokásos). Font variant A betûk variációjának lehetséges értékei: ’small-caps’ (kiskapitális), ’normal’ (szokásos). Font weight A betûk vastagsága a következõ értékeket veheti fel: ’bold’ (félkövér), ’bolder’ (kövér), ’lighter’ (vékony) 100, 200, 300, 400, 500, 600, 700, 800, 900 (az extravékony 100-tól az extrakövér 900-ig), ’normal’ (szokásos vastag- A CSS-RÕL BÕVEBBEN ság). A numerikusan megadott értékek közül az 500 jelenti a szokványos, a 700 a félkövér vastagságot. Combined formatting A ’font:’ paraméterrel különbözõ formázásokat gyûjthetünk csokorba. A ’font:’ elõtaggal megadott különbözõ formázási területeket foghatjuk össze vele. Ilyenek a ’font-family:’, ’font-style:’, ’font-variant:’, ’font-size:’, ’font-weight:’ és ’font-height:’. Ezenkívül léteznek még style sheet paraméterek, amelyek nem közvetlenül a betûket befolyásolják, de mégis hatnak a megjelenésre: Letter spacing Ezzel a beállítással adhatjuk meg a betûk és jelek egymástól való távolságát a szövegen belül. Az értéket megadhatjuk számmal vagy százalékkal is. Text decoration A szövegdekoráció lehetséges értékei: ’underline’ (aláhúzott), ’overline’ (felülvonalazott), ’line-through’ (áthúzott), ’blink’ (villogó), ’none’ (szokásos megjelenítés). Text transformation Ezzel az eredeti megjelenítési formájuktól függetlenül alakíthatjuk a szöveget kis- vagy nagybetûsre, vagy akár kiskapitálisra. Lehetséges értékei: ’capitalize’ (a szavak elsõ betûje nagy), ’uppercase’ (csupa nagybetû), ’lowercase’ (csupa kisbetû), ’none’ (szokásos megjelenítés). Color Ezzel állíthatjuk a betûk színét. Az értékek megadhatók a színek neveivel, hexadecimális értékekkel és RGBértékekkel. 04-5-6-7.qxd 5/24/01 2:48 PM Page 82 82 83 A CSS-RÕL BÕVEBBEN 7.5 Színek A HTML-hez képes a CSS lényegesen több lehetõséget kínál a színek definiálására. A HTML-ben megszokott színjelöléseket, mint amilyen a #0099FF vagy a white, a CSS-ben is alkalmazhatjuk. Itt azonban két további lehetõségünk is van még. Az rgb (rrr,ggg,bbb) sémának megfelelõen megadott ’rgb(192,0,192)’ szín (a lila) 192 rész vöröset, 0 rész zöldet és 192 rész kéket tartalmaz. Az rgb( ) értéket tehát az egyes színek, színkeverékben szereplõ súlyával adjuk meg. A keverékben lévõ színek a vörös, a zöld és a kék. Az egyes színek 0-255 közötti értéket vehetnek fel. Még szabadabb kezet ad a százalékos megoszlás megadásának lehetõsége. Így az rgb(70%,40%,40%) matt vöröset eredményez. A CSS 2.0 verziójától a felhasználóhoz kapcsolódó színkódok használatára is lehetõség adódik. Ezek a kódok a felhasználó munkakörnyezetében beállított színek nevei. Így tényleges ismeretük nélkül is alkalmazhatjuk õket. Színkódok Activeborder Activecaption Appworkspace Background Buttonface Buttonhighlight Buttontext Captiontext Greytext Highlight Highlighttext Inactiveborder Inactivecaption Infobackground Infotext Az aktív ablak fejléc színe Az aktív ablak fejlécén található cím színe Az aktív alkalmazás háttérszíne Az asztal háttérszíne A gombok felületének színe Az ablakban található gombok árnyékának a színe Az ablakban található gombok feliratának a színe A címsorok színe az ablakban Az inaktív szövegek színe A kiválasztó listában megjelölt elem színe A kijelölt szövegrész színe Az inaktív ablak fejlécének a színe Az inaktív ablak fejlécén található cím színe A tooltipek, hintek (kis elõugró súgók) színe A tooltipek, hintek szövegének a színe A CSS-RÕL BÕVEBBEN Menu Menutext Scrollbar Threeddarkshadow Threedface Threedhighlight Threedlightshadow Threedshadow Window Windowframe Windowtext A menüsorok színe A menüelemek színe A gördítõsáv színe A 3D-elemek sötét árnyékának a színe A 3D-elemek színe Az éppen klikkelt 3D-elem színe A 3D-elemek világos árnyékának a színe A 3D-elemek sötét árnyékának a színe A dokumentumablak háttérszíne Az ablakkeretek színe A dokumentumablakban található normál szöveg színe 7.6 Pontos elhelyezés A térkitöltõ álgrafikák ideje lejárt! Ezeket a munkaigényes barkácsolásokat mostantól a CSS végzi el – és milyen elegánsan. A style sheetekkel megadhatjuk, hogy egy szövegrész, táblázat, kép vagy bármely más elem hány centiméterre helyezkedjen el, mondjuk a képernyõ bal szélétõl. Ugyanígy persze jobbra is igazíthatjuk az elemeket, de figyeljünk rá, hogy a képernyõ jobb szélétõl 15 milliméternek mindig maradnia kell. Az ilyen térköz-, margó-, igazítás-beállításoknak minden olyan HTML-tag esetében értelme van, amelyek egy bekezdést, vagy egységet, blokkot alkotnak. Ilyenek a ’’, a ’ ’, a ’’, az ’’, a ’’, a ’’, a ’ ’, a ’’, a ’ ’ és a ’ ’. A ’’-ra is megadhatjuk az itt említett style sheet beállításokat. Ebben az esetben a teljes HTML-fájlt egy önálló egységként kezelhetjük. Fontos: a keret, illetve térköz mindig az aktuális elemnek a „szülõ-elemhez” viszonyított keretét, térközét jelenti. A normál szöveg esetében ez a ’’ tag, míg egy táblázat elemének esetében ez az a ’ ’ vagy a ’ ’ tag, amelyben az elem tartózkodik. Ha az elem egy ’’ tag-ben helyezkedik el, amely maga is definiál keretet, illetve térközt, az elemnél meg- 04-5-6-7.qxd 5/24/01 2:48 PM Page 84 84 85 A CSS-RÕL BÕVEBBEN adott ilyen értékek ezekkel összeadódnak. Negatív értékek is megengedettek. Így olyan különösen látványos effektusokat érhetünk el, mint amilyen az elemek átfedése. A ’margin-top:’-pal határozhatjuk meg egy elem távolságát az elõtte álló elemhez képest. Az értékeket számokkal adhatjuk meg (13. lista). A ’margin-bottom:’ style sheet beállítás is ehhez hasonló: ez kezeli a célzott elem, és az utána következõ távolságát (14. lista). A térközök nagyságát balról a ’margin-left:’-tel, jobbról a ’margin-right:’-tal szabályozhatjuk. Itt is érvényes, hogy az értékek számok lehetnek. A ’margin:’ paranccsal az összes, tehát az alsó, a felsõ, a jobb és a bal térközöket egységesen állíthatjuk. Itt négy számértéket is megadhatunk. Ha egyet adunk meg, ez lesz minden irányban a térköz. Kettõ esetén az elsõ szabályozza az alsó-felsõ, a második a jobb-bal térközöket. Ha többet adunk meg, akkor a következõ sorrend szerint értelmezi a program az értékeket: 1=fent, 2=jobb, 3=lent, 4=bal (16. lista). 1: Lista 13 2: 5: 6: Lista 14 7: 10: 11: Lista 15 12: 16: 17: Lista 16 18: { margin: 1cm 2cm 3cm; } { margin: 1cm 2cm 3cm 4cm; } A ’text-indent:’ beállítással adhatjuk meg a szövegrész elsõ sorának a behúzását. A parancs a számértékeket is értelmezi (17. lista). A ’line-height:’ határozza meg a sorközök nagyságát. Számokat itt is használhatunk (18. lista). A ’vertical-align:’-nal szabályozhatjuk az elemek függõleges elhelyezkedését (19. lista). A lehetséges értékek: ’top’ (felülre igazítás), ’middle’ (középre igazítás), ’bottom’ (alulra igazítás), ’baseline’ (a bázisvonalhoz, ennek hiányában alulra igazítás), ’sub’ (lefelé mozdítás), ’super’ (felfelé mozdítás), ’text-top’ (a szövegsor tetejéhez igazítás), ’text-bottom’ (a szövegsor aljához igazítás). A szövegek esetében ezeket százalékosan is megadhatjuk. Az igazítás ebben az esetben az elemre jellemzõ sormagasság alapján történik. A ’text-align:’, vagy ’alignment:’ segítségével módosíthatjuk a vízszintes igazítást (20. lista). Adhatunk ’left’ (balra igazított), ’right’ (jobbra igazított), ’center’ (középre igazított), ’justify’ (sorkizárt) értékeket. A ’text-align:’ a CSS 1.0 része, és így mind az MS Internet Explorer, mind a Netscape képes kezelni. Az ’alignment:’ viszont csak a CSS 2.0-tól használható, így jelenleg nem támogatják a böngészõk. 1: Lista 17 2: 5: 6: Lista 18 7: 04-5-6-7.qxd 5/24/01 2:48 PM Page 86 86 87 A CSS-RÕL BÕVEBBEN 13: 14: 15: 16: 17: 18: 19: 20: 21: 22: 23: 24: 25: 26: 27: Lista 19 Lista 20 Lista 21 7.7 Mûvészi keretek Nemcsak a festmények érvényesülnek jobban csinos keretben, hanem a szövegek, képek, táblák és más wwwelemek is lendületesebbnek tûnnek. Mindegy, hogy csak egy hajszálvékony keretet akarunk-e, vagy vastag 3D hatásút, esetleg csak fent vagy csak a jobb oldalon, netán körben – a CSS minden igényt kielégít a webdesignerek legnagyobb örömére. Nemcsak a keret dobja fel a munkánkat, hanem a belsõ távolság is. Ha a tartalom odatapad a kerethez, már nem is tûnik olyan profinak az egész. A CSS tartalmazza a megfelelõ paramétereket a távolság megadásához az esztétikus elrendezés érdekében. Persze a Netscape és az Internet Explorer ezen a téren is kakaskodik: különbözõ elképzeléseik vannak arról, hogyan is néz ki egy „box”, azaz keret az elemek körül. Míg az Internet Explorer a keret szélességénél teljesen kihasználja az ablak szélességét, illetve a megengedett szélességet, a Netscape csak addig nyújtja a keretet, ameddig annak tartalma terjed. A CSS-RÕL BÕVEBBEN Megjegyzés. Ha azonos megjelenést szeretnénk elérni, adjuk meg a Netscape-nek a ’margin:0px;’ paramétert, így õ is a teljes ablakszélességig fogja húzni a keretet. Sajnos ezen kívül más eltérésekkel is gyakran találkozhatunk a CSS alkalmazása során. Csak a próbálgatás és a tapasztalatok segítenek – vagy esetleg egy szép napon megszületik az a böngészõ-generáció, amely maradéktalanul támogatja a CSS-t. Keretek és belsõ távolságok border-top-width: a keret vastagsága fent body { border-top-width:5mm; border-topstyle:groove; } border-bottom-width: a keret vastagsága lent Text border-left-width: a keret vastagsága a bal oldalon blockquote { border-left-width:1cm; border-leftstyle:inset; } border-right-width: a keret vastagsága jobboldalon Text border-width: a keret vastagságát egységesen határozza meg img.special { border-width:2cm; borderstyle:groove; } border-color: a keret színe Text border-style: a keret típusa 04-5-6-7.qxd 5/24/01 2:48 PM Page 88 88 89 A CSS-RÕL BÕVEBBEN none = nincs keret (pontosabban láthatatlan) dotted = pontozott dashed = szaggatott solid = vonal double = dupla vonal groove = 3D-effekt ridge = 3D-effekt insert = 3D-effekt outset = 3D-effekt .Vigyázat { border-style:double; borderwidth:1cm; } padding-top: kerettõl való távolság fent td { padding-top:3mm; } padding-bottom: távolság lent Text padding-left: távolság a bal oldalon p.fontos { border-left:medium double blue; padding-left:12mm; } padding-right: távolság a jobb oldalon Text padding: általános kerettõl számított távolság body { border: 1.5cm groove #FFDDFF; padding:1cm; } 7.8 Hátterek Mivel csak az igazán puritán emberek szeretnek négy csupasz fal között élni, a mai weboldal-készítõk többsége feldobja az oldalát valami csinos háttérképpel vagy legalább háttérszínnel. A CSS ezen a területen is sokkal jobban a kezünk alá dolgozik, mint a sima HTML. Nem csak A CSS-RÕL BÕVEBBEN a ’’ tag-et vagy a táblázatokat láthatjuk el háttérrel, hanem minden olyan HTML elemet, amelynek van látható megjelenési formája. Ma már elõre szerkesztett képek közül is válogathatunk. A ’background-color:’-ral adhatjuk meg egy elem háttérszínét, mégpedig a szín hexadecimális kódjával (21. lista). A ’background-image:url([fájlnév]):’ paraméterrel háttérképet határozhatunk meg (22. lista). Alapértelmezés szerint a beállított képpel a HTML ’’ utasításánál megszokott mozaikos elhelyezéssel töltõdik ki a háttér. Háttérképként .gif vagy .jpg állományokat adhatunk meg. Ha a kép magasabb vagy szélesebb, mint az az elem, amelyhez felhasználjuk, a kilógó részeket egyszerûen levágja a böngészõ. A ’background-image:’-hez csatolt ’backgroundrepeat:’-tel határozhatjuk meg egy háttérkép ismétlõdését. Az értelmezett értékek: ’repeat’ (mozaikszerû ismétlés, alapértelmezett), ’repeat-x’ (csak egy sorban vízszintesen ismétli a képet), ’repeat-y’ (csak egy oszlopban, függõlegesen ismétli a képet), ’no-repeat’ (nem ismétel, csak egyszer jeleníti meg a képet) (23. lista). A nagyobb elemek esetében a kép gördítésekor a háttérkép is elmozdul a szöveggel együtt. Azt is megoldhatjuk azonban, hogy a háttér ilyen esetekben is mozdulatlan maradjon. Ez a vízjel effektus. Az erre szolgáló ’background-attachment:’ lehetséges értékei: ’scroll’ (gördítéssel együtt mozgás, alapértelmezett), ’fixed’ (a háttér mozdulatlan marad) (24. lista). A ’background-position:’-nel határozhatjuk meg a háttérkép elhelyezkedését a HTML-elemen belül (25. lista). Ennek alkalmazása akkor érdekes igazán, ha a ’background-repeat:’-tel a háttérkép egyszeri megjelenítését állítottuk be. A vonatkozási pont az az elem lesz, amelyhez a hátteret beállítjuk. Az elhelyezkedést vagy egy számpárral adjuk meg, amelynek elsõ tagja a balról, második a fentrõl mért távolság, vagy a következõ paraméterek értelmes kombinációjával: ’top’ (fent), ’center’ (vízszintesen középre), ’middle’ (függõlegesen középre), ’bottom’ (lent), ’left’ (balra), ’right’ (jobbra) (26. lista). 04-5-6-7.qxd 5/24/01 2:48 PM Page 90 90 91 A CSS-RÕL BÕVEBBEN A ’background:’ parancsban a hátteret érintõ valamennyi paramétert összefoglalhatjuk. 1: Lista 22 2: 5: 6: Lista 23 7: 11: 12: Lista 24 13: 17: 18: Lista 25 19: 23: 24: Lista 26 25: 29: 30: Lista 27 31: 35: 36: Lista 28 37: A CSS-RÕL BÕVEBBEN 38: 39: 40: 41: 42: 43: 44: 45: 46: 47: 48: 49: 50: 51: 52: 53: 54: 55: Table title -> Lista 29 Lista 30 7.9 Lista- és táblázatformátumok A CSS speciális parancsokat tartalmaz a listák és táblázatok számára, ám ezek nem nyújtanak lényegesen többet, mint az erre szolgáló HTML-attribútumok. A HTMLhez képest lényegében csak az jelent újdonságot, hogy a listák ‘ ’-vel megadott elemeihez felsorolásjelek gyanánt saját grafikát rendelhetünk. A gyakorlati jelentõsége ennek abban rejlik, hogy ezt elég egyszer definiálnunk, nem kell minden listához külön megadni. A táblázatok fejléc- vagy adatcelláinál meghatározhatjuk, hogy azok több oszlop szélességûek legyenek. Ez voltaképp ugyanazt eredményezi, mint a cellák vízszintes egyesítése a HTML-ben, azzal a különbséggel, hogy így az egész dokumentumra érvényes cellaformátum-sablonokat alakíthatunk ki (27. lista). Az elõbb bemutatott ‘column-span:’-hoz hasonló a ‘row-span:’, amely a több sor magasságú cellák definiálására szolgál. 04-5-6-7.qxd 5/24/01 2:48 PM Page 92 92 93 A CSS-RÕL BÕVEBBEN A ‘caption-side:’ szolgál a táblázattól elkülönített, de ahhoz tartozó felirat elhelyezésére (28. lista). A lehetséges beállítások: ‘top’ (a táblázat tetejénél, középen), ‘topleft’ (a táblázat tetejénél, balra), ‘topright’ (a táblázat tetejénél jobbra), ‘bottom’, (a táblázat aljánál, középre), ‘bottomleft’ (a táblázat aljánál, balra), ‘bottomright’ (a táblázat aljánál, jobbra). 7.10 Pszeudo-formátumok A CSS-sel elõször találkozó web-szerkesztõk nem nagyon tudnak mit kezdeni a pszeudo-formátumokkal. Ezt olyan HTML-elemeknek találták ki, amelyeknek nincsen saját tag-jük, de azért fontosak. Ide tartoznak a ‘’ tag ‘link=’, ‘alink=’, ‘vlink=’ attribútumai, amelyek a linkek színét befolyásolják, aszerint, hogy még soha azelõtt, vagy épp most, vagy korábban jártunk azon az oldalon. A pszeudo-formátumokat onnan ismerjük fel, hogy nem követik az eddig bemutatott sémát, hanem a célzott HTML-tag-gel és attól kettõsponttal elválasztott formátummal definiálhatjuk (29. lista). A linkeket jelölõ ‘’ tag esetében a következõ beállítások lehetségesek: ‘link’ (a még nem látogatott oldalt jelöli), ‘visited’ (a már látogatott oldalt jelöli), ‘active’ (amely azt jelzi, hogy épp rákattintottunk a linkre). Ezeken kívül más pszeudo-formátumokat is várhatunk, de ezeket mindeddig sem a Netscape, sem az MS Internet Explorer nem támogatja (30. lista). A ‘first-line:’ segítségével kölcsönözhetünk egyedi megjelenést egy hosszabb szövegrész elsõ sorának. Ez az effekt jól ismert a nyomdaipari termékek körébõl. Ugyanebbõl a forrásból származik a ‘first-letter:’ is. 7.11 Pozicionálás Az eddig megismert style-sheet parancsok is tág mozgásteret biztosítanak a weboldal-készítõknek ötleteik A CSS-RÕL BÕVEBBEN megvalósításához. A CSS azonban még ennél is mélyebb varázscilinder. A következõkben bemutatott style-sheetekkel abszolút módon, hajszálpontosan helyezhetjük el az elemeket, és ez eddig nem látott távlatokat nyit meg. Az elemek ezután nem szépen, libasorban egymás alatt, vagy mellett helyezkednek el, hanem épp azon a helyen, ahová megálmodtuk õket. Még az elemek sorrendjét is szabadon változtathatjuk egy HTML-fájlon belül. A szövegtestben legelsõ helyen szereplõ elem akár legalul is megjelenhet. Az elemek akár takarhatják is egymást, és azt is megadhatjuk, hogy melyik van elõrébb, és melyik hátrébb. A dinamikus HTML számos alkalmazásánál elengedhetetlen az elemek pontos elhelyezése. Megfelelõ scripttámogatással az elhelyezett elemeket mozgathatjuk, megjeleníthetjük, vagy eltüntethetjük, a takarási sorrendet változtathatjuk, és így tovább (31. lista). 1: Lista 31 2: 6: 7: Lista 32 8: 11: 12: Lista 33 13: 17: 18: Lista 34 19: 22: 23: Lista 35 04-5-6-7.qxd 5/24/01 2:48 PM Page 94 94 95 A CSS-RÕL BÕVEBBEN 24: 25: 26: 27: 28: 29: 30: 31: 32: 33: 34: 35: 36: 37: 38: 39: 40: 41: 42: 43: 44: 45: } 46: 47: 48: 49: 50: 51: 52: 53: 54: 55: Lista 36 Lista 37 div style=”float:left; width:300px;”> Text, jobbra a keptol;t Uj szoveg a kep alatt Lista 38 ... Szoveg 1 Szoveg 2 Szoveg 3 A ’position:’-nel egy elemet abszolút vagy relatív módon helyezhetünk el. Az érvényes beállítások: ’absolute’ (abszolút elhelyezés a képernyõ széléhez viszonyítva, gördítéskor elmozdul), ’fixed’ (abszolút elhelyezés a képernyõ széléhez viszonyítva, gördítéskor nem mozdul), ’relative’ (az elõzõ elemhez viszonyított relatív elhelyezkedés), A CSS-RÕL BÕVEBBEN ’static’ (nincs különösebb elhelyezés, egyik elem követi a másikat, alapértelmezett). A ’position:’ önmagában még nem határozza meg, hogy hol kezdõdjön az elem. A kezdõpont egyidejû megadásával célszerû alkalmazni. A ’top:’-pal adhatjuk meg, hogy egy abszolút vagy relatív módon elhelyezett elem fentrõl mennyivel kezdõdjön (32. lista). A lehetséges beállításokat számmal adhatjuk meg, vagy – automata pozícionáláskor – az ’auto’ értékkel. Ehhez hasonlóan a ’bottom:’ szolgál az alulról, ’left:’ a balról, ’right:’ pedig a jobbról számított elhelyezésre. A ’width:’-szel szabályozhatjuk, hogy milyen széles legyen egy elem vagy terület (33. lista). Az értéket számmal adhatjuk meg, vagy az ’auto’ beállítással az automatikus szélességállításhoz. Ennek analógiájára az ’height’ határozza meg a magasságot. A ’min-width:’ beállítással érhetjük el, hogy egy elem mindenképpen vegyen fel valamekkora szélességet, még akkor is, ha maga az elem nem töltené azt ki (34. lista). Az értéket számmal adhatjuk meg. Ugyanerre szolgál a ’minheight:’, amely az elem magasságát módosítja. A ’max-width:’-szel korlátozhatjuk egy elem vagy terület szélességét, amelyet az még akkor sem lép át, ha amúgy túlnyúlik rajta (35. lista). A kilógó részek ilyenkor egyszerûn eltûnnek. Itt is számadatokkal dolgozunk. A ’max-height:’ az elem magasságát korlátozza. A ’float:’-tal állíthatjuk be, hogy egy elemet hogyan vegyen körbe az utána következõ elem (36. lista). A lehetséges értékek: ’left’ (az elem balról van és az utána következõ jobbtól veszi körbe), ’right’ (az elem jobbról van és az utána következõ elem balról veszi körbe), ’none’ (egyik elem sem veszi körbe a másikat, ez az alapértelmezett beállítás). Ahhoz hogy a Netscape és az MS Internet Explorer helyesen értelmezze, a ’float:’-ot mindig a ’width:’-szel együtt alkalmazzuk. Ha a ’float:’-tal beállítottunk valamilyen szöveg-körülfolyást, és egy képhez tartozó két-három sornyi magyarázat után a szöveget a kép alatt szeretnénk folytatni, használjuk a ’clear:’-t (37. lista). Az alkalmazható beállítások: ’left’ (’float:left’ esetén a szöveg alul folytatódik), ’right’ 04-5-6-7.qxd 5/24/01 2:48 PM Page 96 96 97 A CSS-RÕL BÕVEBBEN (’float:right’ esetén a szöveg alul folytatódik), ’both’ (mindkét esetben a szöveg alul folytatódik), ’none’ (nincs folytatás alul). A ’z-index:’-szel határozhatjuk meg az egymást takaró elemek sorrendjét. Minden, a sorban meghatározott helyen lévõ elemhez rendeljünk egy számot. A nagyobb sorszámú elemek eltakarják az alacsonyabb sorszámúakat (38. lista). A ’visibility:’-vel befolyásolhatjuk, hogy egy elem látható-e vagy sem. A 38. listában például csak a Text1 fog megjelenni. A dinamikus HTML segítségével ezt az elemet késõbb helyettesíthetjük Text2-vel vagy Text3-mal. A lehetséges értékek: ’hidden’ (az elem tartalma nem jelenik meg), ’visible’ (az elem tartalma látszik). Pozícionálás Ez a szövegrész fog harmadiknak megjelenni. Ez a szövegrész fog másodiknak megjelenni. Ez a szövegrész fog elsõnek megjelenni. A ’display:’ határozza meg a megjelenítés módját (39. lista). Értékei: ’block’ (az elem egy egységet alkot, egy bekezdésnek számít), ’inline’ (az elem nem alkot egy bekez- A CSS-RÕL BÕVEBBEN dést), ’listitem’ (hasonló a ’block’-hoz, de az elem elé egy felsorolásjelet illeszt) és ’none’ (az elem nem jelenik meg, és helyet sem hagyunk ki neki). Különösen a ’visibility:’vel és a DHTML-lel érhetünk el meglepõ effekteket. Az, hogy valaminek a helyét nem hagyjuk ki, azt jelenti, hogy amennyiben nem jelenítjük meg, olyan, mintha nem is lenne. Az ilyen elemeket is láthatóvá tehetjük késõbb, vagy újra elrejthetjük. 1: Lista 39 2: Content 4: Szoveg Title ujabb szoveg 7: 8: Lista 40 9: A ’clip:’-pel definiálhatjuk, hogy egy elem mekkora területen jelenjék meg, függetlenül attól, hogy korábban milyen beállításokat szabtunk meg az elem méretére nézve, vagy hogy mekkora az elem maga (40. lista). Ha az elem nagyobb, mint a neki szánt terület, a kimaradó részek lenyesõdnek. Jelenleg a ’rect’-tel csak téglalap formájú területet határozhatunk meg, de késõbb lehetõség lesz kör, ellipszis vagy sokszög definiálására is. A ’rect’ után zárójelben négy szám, vagy az ’auto’ kulcsszó határozza meg a terület méreteit. Az elsõ érték a „fentnek” felel meg, az elem felsõ határától számítva, a második a „jobb”, a harmadik az „alsó”, a negyedik pedig a „bal” értéke. Ha valamelyik számot az ’auto’-val helyettesítünk, akkor azon az oldalon a megjelenítés az elem határáig fog terjedni. 04-5-6-7.qxd 5/24/01 2:48 PM Page 98 98 99 A CSS-RÕL BÕVEBBEN 7.12 Kurzor Egyre többen fejlesztgetik www-oldalukat igazi alkalmazássá, és egyre nagyobb jelentõségre tesznek szert a látogató tevékenységére reagáló scriptek. A CSS 2.0-s verziója óta seregnyi olyan parancs áll rendelkezésre, amely aszerint változtatja a kurzor megjelenését, hogy épp melyik elem fölött kalandozik vele a felhasználó. Míg a Netscape ezek megjelenítésével hadilábon áll, az Internet Explorer a 4. verziója óta ismeri õket. Azért csak óvatosan bánjunk a lehetõségekkel. Ha egy terület fölé érve a kurzor súgót mutató jellé alakul, a felhasználó joggal várja el, hogy arra kattintva tényleg megjelenjen valami segítség róla. Kurzorformák Példa: Egy fontos hivatkozas Megjegyzés. A style sheet-ek és a dinamikus HTML nyújtotta formázási lehetõségek felsorolásának ezzel távolról sincs vége. A CSS 2.0-ban találhatunk többhasábos szöveget kezelõ parancsokat, míg más utasítások az oldal megjelenítését vagy az oldaltöréseket kezelik, ami eddig a DTP felségterülete volt. Megint más parancsok segítenek a hangos megjelenítésben. Ezekhez nem csak a gyengén látók fûzhetnek szép reményeket, hanem a hangjátékok vagy színdarabok szerzõi elõtt is új távlatokat nyitnak. A CSS-RÕL BÕVEBBEN auto default crosshair pointer automatikus kurzor (alapbeállítás) platformfüggetlen standard kurzor egyszerû fonalkereszt mutató move n-resize ne-resize e-resize se-resize s-resize sw-resize w-resize nw-resize text wait help url([file]) keresztmutató, amely az elem mozgathatóságát jelzi felfelé mutató nyíl (észak) jobbra fel mutató nyíl (északkelet) jobbra mutató nyíl (kelet) jobbra le mutató nyíl (délkelet) le mutató nyíl (dél) balra le mutató nyíl (délnyugat) balra mutató nyíl (nyugat) balra fel mutató nyíl (északnyugat) szokásos szöveget jelzõ kurzor a várakozó állapotot jelzõ kurzor az elemhez tartozó súgót jelzõ kurzor szabadon definiált kurzor, a fájlnak .gif vagy .jpg állománynak kell lennie 08-9-10-12.qxd 5/24/01 2:49 PM Page 101 101 JAVASCRIPT, JAVA 8. JavaScript, Java 8.1 JavaScript A Java nyelvet már régóta alkalmazzák a HTML dokumentumokban. Elõnye, hogy a Java programok legtöbb változata a kliens, azaz a felhasználó gépén fut le, így nincs szükség különleges hozzáférésekre a szerveren, s annak a processzorát sem terheli meg – annál inkább a látogatóét! Ebbõl adódik, hogy sokfelé le is tiltják õket, hiszen egyfelõl számításigényesek, másfelõl a használatukból biztonsági hibák is adódhatnak. No persze nem a nyelvet írták meg rosszul, hiszen annak az a feladata, hogy mindent meg lehessen valósítani általa, hanem a böngészõk azok, amelyek az említett a biztonsági résekért felelõsek. Így ne csodálkozzunk azon, ha bizonyos helyekrõl a Java nyelven megírt programjainkat nem tudjuk lefuttatni, ugyanis ezeket nemes egyszerûséggel letiltották. A JavaScript elõnye, hogy kicsi és hatékony, egyben látványos is. A JavaScriptet közvetlenül a HTML kódba helyezzük, s lefuttatva õket a felhasználó gépén például olyan információkat írathatunk ki, mint a pontos idõ, a felhasználó böngészõjének a verziója stb. Az ilyen kis programokat a ’SCRIPT’ kifejezés elõzi meg, amelyet a nyelv (’language’) megnevezése követhet, de olyan kódsorok is vannak, amelyekhez még ez sem szükséges. Ha például ki akarjuk íratni az oldalunk utolsó módosításának a dátumát: Ha a script esetleg nem mûködne rendesen, annak nem a programozói tudásunk hiánya az oka, hanem az, hogy az adott böngészõ nem (vagy nem jól) kezeli le a scriptet. 08-9-10-12.qxd 5/24/01 2:49 PM Page 102 102 103 JAVASCRIPT, JAVA Ha megnézzük az iménti példát, láthatjuk, hogy a ’document.write’ felelõs mindazért, ami a képernyõre kerül majd, a ’T> Az oldal betöltése közben elõugró ablkaban választhatunk, hogy elfogadjuk a feltételeket, vagy sem Az állapotkijelzõ jeleníti meg az éppen letöltõdõ oldalt Itt csak a ’BODY’ kifejezést kell módosítanunk, s máris elértük, amit akartunk. Az állapotkijelzõnél persze nemcsak az oldalunk címét, hanem akár mindig mást is megjeleníthetünk. Mondjuk az éppen aktuális hivatkozás leírását: Hivatkozás Példánkban az ’OnMouseOver’ után álló rész határozza meg, mi történjen, amikor a felhasználó a hivatkozás fölé ér – jelen esetben az állapotkijelzõn a ’ hírek ’ kiírás jelenik meg. Az ’OnMouseOut’ pedig meghatározza, mi történjen, ha a felhasználó elviszi a hivatkozásról az egérmutatót: esetünkben ’Az oldal leírása’ szöveg jelenik meg. Jöhet a következõ példa, amelyben oldalunk betöltése közben egy elõugró ablak is megjelenik, amelyen választhatunk (OK/Cancel), elfogadjuk-e az ott leírtakat (pl. szabályzatot) vagy sem. Utóbbival visszajutunk az elõzõ oldalra (’history.go(-1)’), elõbbivel folytathatjuk a böngészést. Ha már itt tartunk, nézzük meg, hogyan lehet olyan hivatkozást készíteni, amely visszaküldi a felhasználót az elõzõ oldalra, ha az rákattint (olyan a hatása, mint a ’backspace’ billentyûnek). vissza az elõzõ oldalra További kényelmi szolgáltatás, hogy ha a felhasználó nem tiltja le a scripteket, akkor megtudhatjuk az operációs rendszerének és a böngészõjének a típusát, a képernyõfelbontását, vagy éppen az elõzõ oldal címét, ahonnan hozzánk érkezett. Ha a felhasználó Microsoft Internet Explorer (továbbiakban IE) böngészõt használ, az ’ie.html’, más esetekben pedig az ’egyeb.html’ töltõdik be a böngészõbe. Ez különösen olyankor hasznos, ha az oldalunk olyan elemeket tartalmaz (pl. ’IFRAME’), amelyek csak az IE-vel mûködnek helyesen. Hasonlóképpen járunk el akkor is, ha azt akarjuk, hogy az IE-vel rendelkezõ felhasználóink egy link segítségével fölvehessék az oldalunkat a ’Kedvencek’ (’Favorites’) közé: Most nézzünk egy kicsit bonyolultabb példát, amelyben egy animált grafikus menüt készítünk, azaz ha az egyes menüpontok fölé visszük az egérmutatót, az adott képet egy másik (aktív) kép váltja fel. A következõ sorokat a ’HEAD’ kifejezések közé kell írni: ... ... Ezt követõen a ’BODY’ kifejezés után a megfelelõ helyen (ahová be akarjuk illeszteni õket) meghívjuk az elõbbi beállításokat: Mindezek meghívása nem túl érdekes, azonban a ’HEAD’ kifejezések között szereplõ sorok már annál inkább. Elsõként is ellenõrizzük, milyen böngészõt használ a látogató, és ha az nem tartozik a legújabbak közé, akkor kiírja egy szöveg, hogy ez az oldal nem ehhez a böngészõhöz készült. Majd deklarálunk három új változót (p1, p2, p3), eztán pedig meghatározzuk, mit jelentsen az ’off_img’ és ’on_img’ kifejezés, amelyeket JAVASCRIPT, JAVA késõbb a hivatkozásokból fogunk meghívni. Három címet, majd hat képet jelölünk meg (3 alapállapot + 3 aktív állapot), ezeknél a (122,33) számpáros a képek méretét jelenti pixelekben (szélesség, magasság). E kitérõ után térjünk vissza az egyszerûbb példákhoz. Ha egy új ablakot akarunk megnyitni, amelyben nincsenek a navigációhoz használatos eszközök, se pedig ikonok vagy menük, akkor érdemes mindezt a Java segítségével elvégeznünk: ... ... ... hivatkozás ... Elsõként meghatározzuk, hogy az ’openWin’ mit tegyen; itt megadjuk a megnyitandó ablak méreteit (esetünkben 640x480), legyen-e benne eszköztár (toolbar), könyvtárak (directories), menü (menubar) és görgetõsáv (scrollbars). Eztán a linkre kattintva a megadott címet jeleníthetjük meg az új ablakban. 08-9-10-12.qxd 5/24/01 2:49 PM Page 108 108 109 JAVASCRIPT, JAVA JAVASCRIPT, JAVA var imagesarr = new Array( ”http://www.jatekok.hu/banners/sb_cheatworld. gif”, ”http://www.jatekok.hu/banners/sb_hardware. jpg”, ”http://www.jatekok.hu/banners/sb_toyaf1. jpg”); // descriptions var commentsarr = new Array( ”CheatWorld”, ”Hardware rovat”, ”Hungarian SimWorld 2000”); // -->> ... A Java segítségével adhatjuk meg a megnyitandó ablakok méreteit és egyéb Végezetül nézzünk meg ismét egy „komolyabb” példát, amelynek többek között a hirdetések megjelenítésében vehetjük hasznát. A script segítségével véletlenszerûen jeleníthetünk meg képeket, ami mondjuk egy kezdetleges ’banner-wheel’ rendszerként is alkalmazható. ... ... Elsõként a ’HEAD’-en belül sorban egymás után megjelöljük, milyen hivatkozáshoz milyen kép és milyen elnevezés tartozzék (az elsõ hivatkozáshoz az elsõ kép és az elsõ megnevezés stb.), majd mindezt a ’Math.random’ segítségével jól „megkavarjuk”. A megjelenítendõ sorszámot így egy véletlen számgenerátor állítja elõ, s minden oldalletöltésnél más-más kép jelenhet meg. Mint látható, ebben a példában a megnevezés az ’ALT’ résznél jelenik majd meg. 08-9-10-12.qxd 5/24/01 2:49 PM Page 110 110 111 JAVASCRIPT, JAVA JAVASCRIPT, JAVA Egy ezzel a scripttel elõállított hivatkozás így fest: A Java alkalmazási területe szinte korlátlan, s számos érdekes példával találkozhatunk az interneten (is), a legbonyolultabb megoldásoktól kezdve (pl. jelszavas ellenõrzés, jelszóbekérés) a legegyszerûbbekig (pl. az aktuális idõ kiírása). 8.2 Java applet A Java applet hasonló a scripthez, a különbség közöttük az, hogy a kódot nem maga az oldal, hanem egy külön állomány tartalmazza, ’kódolt’ formában. Ezek a programok szintén a felhasználó gépén futnak, így ezek futtatásához sincs szükség magasabb szintû hozzáférésre. A Java appletek általában bonyolultabb feladatokra kínálnak megoldást (pl. Java chat, grafikai elemek), így megvan az a hátrányuk, hogy elég nagy méretûek, idõbe telik a letöltésük, s processzoridõ-igényesek. Meghívásuk az ’APPLET’-en belül történhet, a különbözõ paraméterezés minden programnál különbözõ, így futtatásukhoz el kell olvasni a dokumentációt. Mivel elég sok függ az adott programtól, elég nehéz ennél többet mondani a Java appletekrõl. Az alapok általában minden dokumentációban megtalálhatók, többnyire angol nyelven. 5/24/01 2:49 PM Page 112 113 SSI 9. SSI 9.1 SSI és SHTML Az SSI a ’server side include’ rövidítése, azaz mindazon parancsoké, amelyek a szerveroldalon futnak le. Ezeknek a parancsoknak a futtatásához különleges jogokra és az Apache szerver helyes konfigurálására van szükség. Általában az ilyen dokumentumokat ’.shtml’ kiterjesztéssel látják el, hogy megkülönböztethessük õket a „sima” HTML dokumentumoktól, ám ez mindenki ízlése szerint alakítható, hiszen minden csak a szerver konfigurációjától függ (ha csak az ilyen kiterjesztésû fájlok esetében használhatunk SSI-parancsokat, akkor kénytelenek vagyunk ilyen kiterjesztéssel ellátni õket). Hivatkozás: http://www.w3.org/Jigsaw/Doc/ User/SSI.html Többek között az aktuális szerveridõt írathatjuk ki, futtathatunk programokat a háttérben, információkat írathatunk ki a szerverrõl, illetve a felhasználóról, megadhatjuk, hogy hány aktív felhasználó jelentkezett be eddig a szerverre stb. A lehetõségeink szinte korlátlanok, hiszen elvileg bármilyen program futtatására képesek vagyunk (gyakorlatilag azonban azok a legtöbb esetben csak erõsen szabályozott/korlátozott formában mûködnek). Csak a példa kedvéért álljon itt, hogyan kell az aktuális szerveridõt megjeleníteni: à 08-9-10-12.qxd 08-9-10-12.qxd 5/24/01 2:49 PM Page 114 114 115 SSI FORM ÉS CGI Ezek a parancsok természetesen csak akkor lépnek mûködésbe, ha egy jól konfigurált szerver alól hívjuk meg az adott oldalt, máskülönben semmi hatásuk sem lesz. Tehát otthon, a helyi merevlemezen, off-line módban hiába próbálkozunk a böngészõnkkel, nem fogunk látni semmit. A parancsok másik hasznos tulajdonsága, hogy csak az eredményük jelenik meg a kódsorban, maga a parancs a felhasználó elõtt rejtve marad, hiszen az adott kifejezést cseréli le a megfelelõ értékre az Apache. 10. FORM és CGI 10.1 FORM és CGI alkalmazása A honlapok esetében sokszor érdekünk, hogy visszajelzéseket is kapjunk a látogatóktól. Ennek a legegyszerûbb módja a kérdõív, esetleg a szavazás, amelynek az eredményét vagy e-mailben kapjuk meg, vagy azt valamilyen formátumban a szerver tárolja. Ha összeállítunk egy ilyen kérdõívet, valahová el is kell küldeni az eredményeket, s ha el akarjuk kerülni, hogy kusza kódkavalkád vegye körül a lényeges válaszokat, információkat, akkor jobb, ha elõbb feldolgozzuk azokat. Ehhez azonban jogot kell szereznünk arra, hogy a szerveren programokat futtathassunk. Ha nem vagyunk rendszergazdák az adott szerveren, keressük meg a webmestert, s kérjünk tõle programfuttatási jogokat. Az óvatosabb rendszergazdák ilyenkor elõbb elkérik a programokat, hogy megvizsgálják õket, hiszen egy rosszul megírt program akár adatvesztést, vagy a szerver túlterhelését is okozhatja. A soron következõ példákban elõször bemutatjuk, hogyan tudunk létrehozni egy kérdõívet a HTML oldalunkon, majd egy Perlben írt CGI következik, amely képes ezeket az adatokat feldolgozni, és e-mailben elküldeni címünkre, illetve tárolni egy fájlban a helyi rendszeren. 10.2 FORM Lássuk tehát, mit kell tennünk ahhoz, hogy egy kérdõív jelenjék meg az oldalunkon: ... 08-9-10-12.qxd 5/24/01 2:49 PM Page 116 116 117 FORM ÉS CGI FORM ÉS CGI A két ’FORM’ kifejezés közé kerülhet majd a kérdõívünk összes komponense; itt az ’action’ határozza meg, mi történjen akkor, ha a felhasználó befejezte a kitöltést, a ’method’ pedig azt a módszert jelöli meg, amellyel a kinyert adatokat a böngészõ elküldi a feldolgozó programnak (post/get). Itt az elsõ sorban megjelölt e-mail címre irányítottuk az adatokat, de ha a késõbbi példánkkal együtt próbáljuk ki a módszert, láthatjuk majd, milyen kusza adatokat kapunk (& és ? tagolja az egyes értékeket, amelyek között sortörést nem is találunk). Mi azonban azt szeretnénk, ha egy program dolgozná fel az adatokat, s így a következõ sorokat írjuk be az oldalba: ... A ’programneve.cgi’ lesz az a szerveren futó Perl program, amely feldolgozza majd a kinyert adatokat. A ’submit’ és ’reset’ bemeneti eszközök pedig nyomógombok formájában jelennek majd meg az oldalon; értelemszerûen az egyik elküldi a kitöltött ívet, a másik törli a beírt adatokat. A rajtuk szereplõ felirat a ’value’ után adható meg. Kérdõív Kérdés: Válasz1 Válasz2 Válasz3 Név: Jelszó: E-mail cím: Hírlevél kérése: Tetszik az oldal?: Igen Nem 08-9-10-12.qxd 5/24/01 2:49 PM Page 118 118 119 FORM ÉS CGI FORM ÉS CGI Akkor most nézzük végig ezt a példát. Elsõként is itt van egy ’SELECT’ kifejezés, amely közrezárja az ’OPTION’-öket, azaz a választási lehetõségeket. Ez a rész egy legördülõ menü, amelynek a megnevezése mindig a ’SELECT’-nél található, a kiválasztható értékek pedig az ’OPTION’-öknél. A névnél az ’INPUT’ típusa (’type’): szöveg (’text’), 66 karakternyi nagyságú a megjelenített mezõ (de ennél többet is be lehet írni), megnevezése (’name’): ’name’. Az ’INPUT’ kifejezésnél meghatározhatjuk az alapértelmezett értéket is, amelyért a ’value’ a felelõs, sõt, ha azt szeretnénk, hogy ez az érték változatlan maradjon, azt is megoldhatjuk a ’DISABLED’ vagy a ’READONLY’ használatával. Az elõbbinél még kijelölni sem lehet az adott szöveget, míg az utóbbinál ugyanúgy viselkedik, mint bármelyik mezõ, csak éppen módosítani nem lehet rajta: megjelenni. A ’physical’ használatakor az elküldött szövegbe is bekerülnek a sortörések, az ’off’ pedig teljesen figyelmen kívül hagyja ezeket mind a megjelenítésnél, mind az elküldés során. Megjegyzés. Az elküldésnél nem kell mindig az alapértelmezésben használt nyomógombot alkalmaznunk, ha ez esetleg nem illene az oldal külalakjához. A nyomógombot egy képpel is helyettesíthetjük a következõ módon: Ennek a hatása ugyanaz, mint a ’submit’ gombnak. Így fest egy egyszerû kérdõív A következõ beviteli mezõ típusa jelszó (’password’), ami azt jelenti, ha bármit beírunk, csillagok fogják helyettesíteni a beírt karaktereket. Ezután az e-mail cím jöhet, majd a ’checkbox’, azaz egy olyan választási lehetõség, amely beikszeléskor aktív, egyébként inaktív (jelenleg a megjelenítés pillanatában aktív, a ’CHECKED’ jóvoltából). A ’radio’ segítségével választási lehetõség elõtt állunk, ugyanis a felsorolásból csak egyet jelölhetünk ki. Ezt olyan esetekben használhatjuk, amikor valakinek csak egy adatot kell megadnia, például azt, hogy melyik korcsoportba tartozik. Ezeken túlmenõen még más hozzáfûznivalókat is bekérhetünk a látogatóinktól a ’TEXTAREA’ segítségével. Ez egy olyan szövegmezõ, amelybe bármennyit írhat a felhasználó. A ’rows’ a megjelenítendõ sorok számát, a ’cols’ az oszlopokét jelöli, míg a ’wrap’ a beírt szöveg elrendezését intézi. A ’virtual’ esetében a szöveg sortörésekkel jelenik meg, ám az elküldés során ezek a sortörések nem fognak 10.3 CGI Mindezt akkor most dolgozzuk is föl! Ebben lesz segítségünkre egy Perlben megírt CGI (Common Gateway Interface) program. Ha megkaptuk a jogokat a program futtatására, a program feltöltésénél figyeljünk arra, hogy mindenképpen ’ASCII’ módban kerüljön föl a szerverre, s futtatható is legyen – ’chmod XXX’. Megjegyzés. A szerverekre az FTP protokoll segítségével kétfajta módon tölthetünk föl adatokat: ASCII és bináris (binary) módban. Elõbbi a szövegek és a Perlben megírt programok feltöltésére alkalmas, míg 08-9-10-12.qxd 5/24/01 2:49 PM Page 120 120 121 FORM ÉS CGI FORM ÉS CGI utóbbival egyéb formátumú adatokat pakolhatunk föl – például képeket, ZIP archívumokat stb. A szerveren futtatandó programok a feltöltés után alapértelmezésben nem rendelkeznek futtatható státusszal, ezt külön kell módosítanunk. Ezt kétféleképpen tehetjük meg, az FTP-klienstõl függõen: vagy parancsot írunk be, például ’chmod XXX filenev’ formában, vagy a grafikus menübõl választjuk ki a megfelelõ funkciót. A három szám három különbözõ felhasználói kört jelöl (owner/group/other – tulajdonos, felhasználói csoport, egyéb). Ha azt szeretnénk, hogy az oldalainkat látogatók is el tudják érni a programot, akkor számukra (other) is futtathatónak kell lennie a programnak. Az egyes számok a következõképpen alakulnak: Nincs hozzáférés Futtatható Írható Írható, futtatható Olvasható Olvasható, futtatható Olvasható, írható Olvasható, írható, futtatható 0 1 2 3 4 5 6 7 Tehát ha azt szeretnénk, hogy a tulajdonos (aki feltöltötte) módosítani is tudja, de rajta kívül mindenki más csak olvasni és futtatni, akkor: ’chmod 755’. Ha precízek akarunk lenni, akkor négy számjegy áll a ’chmod’ parancs után, amelyekbõl a legelsõ a ’sticky bit’, ám ennek részletezésétõl most eltekintünk, ugyanis három számjeggyel is tökéletesen mûködik minden. Az elõkészületek után most már minden készen áll arra, hogy futtassuk a programunkat. Az alább ismertetett program az imént (elsõként) bemutatott kérdõívet tudja beolvasni, feldolgozni és a felhasználó e-mail címére elküldeni. A program elérését a kérdõív ’FORM action’ részénél kell meghatározni, s ennek megfelelõen kell az elmentés után nevet adni neki. Megjegyzés. A CGI programok kiterjesztése általában ’.pl’ vagy ’.cgi’. Ennek ellenére csak a szerver konfigurációjától függ, hogy más kiterjesztést is adhassunk nekik – errõl a rendszergazdák adhatnak felvilágosítást. A programot a következõképpen kell módosítani ahhoz, hogy mûködjön az adott konfiguráción: #!/usr/bin/perl – a Perl program elérése; amennyiben az adott szerveren máshol található, módosítani kell $FORM{’answer’}, $FORM{’name’} stb. – ezeket abban az esetben kell módosítani, ha az eredeti HTMLben a ’name’ után más értékek állnak $mailprog=”usr/lib/sendmail/”; – ha a ’sendmail’ nevezetû levelezõprogram máshol található, akkor annak elérési útja kerül ide $recipient=”cimzett\@szolgaltato.hu”;, $sender=”kuldo\@szolgaltato.hu”; – a levélnél megadott küldõ és címzett címe. Megjegyzés. A Perlben úgynevezett dzsókerkarakterek is vannak, amelyek alapértelmezésben bonyolultabb funkciót látnak el. Ha nem szeretnénk, hogy ezek érvényesüljenek, akkor fordított perjelet kell helyeznünk eléjük. Így például az e-mail címek esetében is – akarki\@szolgaltato.hu. top.location.href = ”http://www.szolgaltato.hu” – a sikeres elküldés után megjelenítendõ oldal címe #!/usr/bin/perl $ver = ”1.1”; read(STDIN, $buffer, $ENV{‘CONTENT_LENGTH’}); @pairs = split(/&/, $buffer); foreach $pair (@pairs) { ($name, $value) = split(/=/, $pair); $value =~ tr/+/ /; $value =~ s/%([a-fA-F0-9][a-fA-F09])/pack(”C”, hex($1))/eg; 08-9-10-12.qxd 5/24/01 2:49 PM Page 122 122 123 FORM ÉS CGI JAVASCRIPT, JAVA } $FORM{$name} = $value; print ”Content-Type: text/html\n\n”; $answer = $FORM{‘answer’}; $name = $FORM{‘name’}; $password = $FORM{‘password’}; $email = $FORM{‘email’}; $newsletter = $FORM{‘newsletter’}; $like = $FORM{‘like’}; unless unless unless unless helyes unless ($name) {hiba(”Neve”);} ($password) {hiba(”Jelszava”);} ($email) {hiba(”E-mail címe”);} ($email =~ ”(.*)\@(.*).(.*)”) {hiba(”A e-mail cím”);} ($like) {hiba(”Véleménye”);} @days = (’vasárnap’,’hétfõ’,’kedd’,’szerda’,’csütörtök’,’péntek’, ’szombat’); @months = (’január’,’február’,’március’,’április’,’május’, ’június’,’ július’, ’augusztus’,’szeptember’,’október’,’ november’,’december’); ($sec,$min,$hour,$mday,$mon,$year,$wday,$yday,$i sdst) = localtime(time); if ($hour < 10) { $hour = ”0$hour”; } if ($min < 10) { $min = ”0$min”; } if ($sec < 10) { $sec = ”0$sec”; } $year += 1900; $month = $mon+1; $date = ”$year. $months[$mon] $mday, $days[$wday] $hour\:$min\:$sec”; $mailprog = ’/usr/lib/sendmail’; $recipient = ”cimzett\@szolgaltato.hu”; $sender = ”kuldo\@szolgaltato.hu”; open (MAIL, ”|$mailprog $recipient”) || print ”$mailprog megnyitása sikertelen!\n”; print MAIL ”Reply-to: $sender\n”; print MAIL ”From: $sender\n”; print MAIL ”Subject: Kérdõív $date\n\n”; print MAIL ”A kérdõívet kitöltõ adatai:\n”; print MAIL ”-----------------------------------------------------\n”; print MAIL ”Név: $name\n”; print MAIL ”Jelszó: $password\n”; print MAIL ”E-mail cím: $email\n”; print MAIL ”Hírlevél: $newsletter\n”; print MAIL ”Vélemény: $like\n”; print MAIL ”-----------------------------------------------------\n”; print MAIL ”A kérdésre adott válasza:\n”; print MAIL ”$answer\n”; print MAIL ”-----------------------------------------------------\n”; close (MAIL); print qq| |; 08-9-10-12.qxd 5/24/01 2:49 PM Page 124 124 125 FORM ÉS CGI JAVASCRIPT, JAVA exit; sub hiba { my $baj = shift; print qq| Hiba a kitöltésben   Hiba a kitöltésben: $baj - nincs megadva   Kérjük, menjen vissza, és adjon meg helyes adatokat! $ver Script by: Chilly |; exit; } A program a következõképpen mûködik: n Elõször beolvassa a megfelelõ adatokat, változókat n Ezután ellenõrzi, hogy minden adat megvan-e, azok helyes formátumban szerepelnek-e (e-mail) n Ha valamilyen probléma merülne fel, meghívja a hibát kiíró szubrutint, s a program leáll n Beolvassa az aktuális dátumot és idõt A levelezõprogram megnyitása után elküldi a levelet az értékekkel együtt n Megjelenteti a megadott oldalt, s leáll. n Ha az e-mail helyett egy archívumban szeretnénk tárolni az adatokat, a következõket kell módosítanunk: open (MAIL, ”|$mailprog $recipient”) || print ”$mailprog megnyitása sikertelen!\n”; helyett open (MAIL, ”>/home/user/www/kerdoiv.txt”) || print ”A fájl megnyitása sikertelen!\n”; valamint a következõ sorokra nincs szükség: print MAIL ”Reply-to: $sender\n”; print MAIL ”From: $sender\n”; print MAIL ”Subject: Kérdõív $date\n\n”; A ’>/home/user/www/kerdoiv.txt’ helyére a célarchívum elérési útja kerül. Ennek írhatónak kell lennie a program számára (’chmod 777’ – azért kell 777, mert általában a futó programok nem ugyanabba a csoportba tartoznak, mint amelyikbe mi, hanem abba, amelyben az Apache szerver is található.). Itt nem áll módunkban részletesebben ismertetni a program mûködését, hiszen az további könyve(ke)t töltene meg. Érdemes azonban elmélyedni a Perl programozásában, ebben segítenek az alábbi címek: http://www.kessels.com/jeroen/Download/ – különbözõ CGI-programok tárháza, ahol többek között formokat feldolgozó programokat is találunk http://willmaster.com/master/ – témánként és alkalmazási területenként csoportosítva találhatunk jó pár programot, példákkal kiegészítve (néhány közülük ingyenes, néhányért már fizetni is kell) http://www.cgi-resources.com/ – óriási gyûjteménye a különbözõ programoknak, nemcsak Perlben írt programokkal (ingyenes és fizetõs alkalmazások is) találkozhatunk http://www.cgi-index.com/ – szintén egy kollekció, témánként csoportosítva az alkalmazásokat. 5/24/01 2:49 PM Page 126 126 127 FORM ÉS CGI TOVÁBBI NYELVEK Megjegyzés. A Perlben megírt programok az SSIparancsok segítségével is lefuttathatók: Az egyetlen gond, hogy így sokkal nehezebben oldható meg a programok paraméterezése. A programok természetesen a legtöbbször valamilyen inputot, azaz bemeneti információt is igényelnek, így a FORM és a CGI szoros kapcsolatban vannak egymással. A felhasználási területek között ott vannak a keresõprogramok, a kérdõívek, a szavazások, az üzenõtáblák vagy az adminisztrációs programok. Megjegyzés. A felhasználó sokszor találkozhat cookie-kkal is. Ezek a sütik bizonyos információkat rögzítenek a felhasználó gépén, s azokat a késõbbiekben a cookie-t létrehozó program be tudja olvasni. Ilyen kis szöveges dokumentumok tárolják az egyes oldalakhoz tartozó konfigurációinkat, beállításainkat, vagy éppen azt, hogy mikor jártunk ott utoljára. Azonban ilyenekben tárolódnak néha a jelszavaink is, úgyhogy nem árt óvatosan bánnunk velük. Publikus terminálok esetében például nagyon is óvakodnunk kell tõlük. Egyes böngészõkben le is tiltják õket, ilyenkor az információk nem tárolódnak a merevlemezen. Mindez azonban fordított irányban is mûködhet, és akár veszélyes is lehet, mivel az egyes honlapok által elküldött, majd visszakért sütik olyan információkat is szolgáltathatnak rólunk, amelyeket esetleg nem szeretnénk kiadni. Éppen ezért sokan ódzkodnak a cookie-k elfogadásától, néha alaptalanul, néha joggal. A megbízható oldalak esetében azért érdemes engedélyezni a használatukat, mert kényelmi szolgáltatásként nem utolsók. 11. PHP3, XHTML (XML), WAP, VRML – rövid kitekintés további nyelvekre 11.1 PHP3 A PHP3 nyelv (hypertext preprocessor) valójában a HTML, az SSI parancsok és a Perl programok keveréke. Ilyen programok futtatásához az SSI parancsokhoz hasonló beállításokra (Apache) van szükség; ezek segítségével ugyanúgy dolgozhatunk a változókkal, mint a Perlben, futtathatunk más programokat (SSI), s megjeleníthetünk tartalmat is (HTML). Legfõbb felhasználási területük az adatbázisokból való adatok kinyerése és az SSI-szerû oldalfelépítések, ahol a külalak mindenhol megegyezik, csak a tartalom változik. Hivatkozás: http://www.php3.org/tut.php 11.2 XHTML (XML) Az XML (Extensible Markup Language) egy olyan programozási nyelv, amelyben az értékek és a mezõk szabadon bõvíthetõk, így elég nagy szabadságot nyújt használóinak. A HTML legújabb verziója az XHTML, amely az XML-re épül, s így sokkal dinamikusabb, alakíthatóbb, formázhatóbb programozási nyelv, mint amaz. Legfõbb felhasználási területei közé tartozik az adatbázisok készítése és a dinamikusan változó adatok/értékek tárolása, követése. à 08-9-10-12.qxd 5/24/01 2:49 PM Page 128 128 129 TOVÁBBI NYELVEK à Hivatkozás: http://www.w3.org/XML/ | http://www.w3.org/MarkUp/ | Hivatkozás: http://www.w3.org/MarkUp/Forms/ | http://www.w3.org/TR/xmlbase/ | http://www.w3.org/Encryption/2001/ | http://www.w3.org/XML/Linking | http://www.w3.org/2000/xp/ | http://www.w3.org/TR/xpath | http://www.w3.org/XML/Linking 11.3 WAP (Wireless Application Protocol) Az internet tért hódított a mobiltelefonokon is, így kifejlesztették azt a protokollt, amely az erre alkalmas készülékeknek olyan információkkal tud szolgálni, amelyek megjelenhetnek a kisméretû kijelzõn. Így elérhetünk mozimûsort, tõzsdei információkat, és sok minden mást is ennek segítségével. A fejlesztés jelenleg is folyik, a szabvány kiforratlan, így sok módosítás várható még ezen a téren. Azonban addig is vessünk egy pillantást arra, hogyan is néz ki egy átlagos WAP-oldal: To another deck... TOVÁBBI NYELVEK Loading... Mint látható, az egyes oldalak a ’card’-ban vannak megnevezve, s ez felel meg körülbelül a ’HEAD’ és ’BODY’ kifejezéseknek. Az ’anchor’ – itt teljesen kiírva – felel meg az ’A’-nak. Jelenleg a legtöbben a WAP 1.0-t használják, ám már itt az 1.1 is, amely további változtatásokat hozott a nyelv bizonyos részeit illetõen. A WAP-os oldalak kiterjesztése általában ’.wml’ (Wireless Markup Language). A kód kicsit szigorúbban kezeli az üres kifejezéseket, azonban nagyban hasonlít a HTML-hez, ugyanakkor egyszerûbb is, hiszen lehetõségeink korlátozottak a kijelzõ méretei és képességei miatt. A WAP-os oldalakat manapság már saját PC-nkrõl is megtekinthetjük különbözõ programok vagy internetes oldalak segítségével. Hivatkozás: http://www.wapforum.org/ à 08-9-10-12.qxd Vannak programok, amelyek segítségével a PC-n is megtekinthetjük a WAP-os oldalakat 08-9-10-12.qxd 5/24/01 2:49 PM Page 130 130 131 TOVÁBBI NYELVEK 11.4 VRML (Virtual Reality Modeling Language) A VRML nem annyira elterjedt nyelv, ám használatával 3D-s objektumok érhetõk el az információs szupersztráda segítségével, ezért ezt sem hagyhatjuk ki a sorból. A VRML dokumentumok használatához általában külsõ programra is szükség van, s ezek a dokumentumok elég erõforrás-igényesek is. A másik gond az, hogy ezeknek a mini-világoknak meglehetõsen nagy a méretük. Ennek ellenére a VRML programok néha nagyon jól jönnek, ha szeretnénk egy-egy virtuális teret bebarangolni, 3D-s környezetben. Nagyobb sávszélesség esetén pedig akár játszhatunk is ilyen terekben, vagy végigjárhatunk például egy bevásárlóközpontot. à Hivatkozás: http://developer.irt.org/script/vrml.htm TÁBLÁZATOK 12. Táblázatok a HTML nyelvben használatos speciális karakterekrõl Number 1-32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48-57 58 59 60 61 62 63 64 65-90 91 92 93 Name Hex Description control characters (unused) quot amp 21 22 23 24 25 26 27 28 29 2A 2B 2C 2D 2E 2F quotation mark = APL quote ampersand numbers 0 through 9 lt gt 3A 3B 3C 3D 3E 3F 40 less-than sign greater-than sign uppercase latin letters A through Z 5B 5C 5D 08-9-10-12.qxd 5/24/01 2:49 PM Page 132 132 133 TÁBLÁZATOK Number Name TÁBLÁZATOK Hex Description 94 95 96 5E 5F 60 97-122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 7B 7C 7D 7E 7F 80 81 82 83 84 85 86 87 88 89 8A 8B 8C 8D 8E 8F 90 91 92 93 94 95 96 97 98 99 unused unused non-standard, non-standard, non-standard, non-standard, non-standard, non-standard, non-standard, non-standard, non-standard, non-standard, non-standard, unused non-standard unused unused non-standard, non-standard, non-standard, non-standard, non-standard, non-standard, non-standard, non-standard, non-standard, 154 155 156 9A 9B 9C Number Name 157 158 159 lowercase latin letters a through z use use use use use use use use use use use ‚ ƒ „ … † &Dagger caret percent sign Š < Œ use use use use use use use use use ‘ ’ “ ” • – — ˜ ™ 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 non-standard, use š non-standard, use > non-standard, use œ 192 193 194 Hex Description 9D 9E 9F unused unused non-standard, use Ÿ nbsp iexcl cent pound curren yen brvbar sect uml copy ordf laquo not shy reg macr deg plusmn sup2 sup3 acute micro para middot cedil sup1 ordm raquo frac14 frac12 frac34 iquest A0 A1 A2 A3 A4 A5 A6 A7 A8 A9 AA AB AC AD AE AF B0 B1 B2 B3 B4 B5 B6 B7 B8 B9 BA BB BC BD BE BF no-break space inverted exclamation mark cent sign pound sign currency sign yen sign broken bar section sign diaeresis copyright sign feminine ordinal indicator left-pointing double angle quotation mark not sign soft hyphen registered sign macron degree sign plus-minus sign superscript two superscript three acute accent micro sign pilcrow sign middle dot cedilla superscript one masculine ordinal indicator right-pointing double angle quotation mark vulgar fraction one quarter vulgar fraction one half vulgar fraction three quarters inverted question mark Agrave Aacute Acirc C0 C1 C2 latin capital letter A with grave latin capital letter A with acute latin capital letter A with circumflex 08-9-10-12.qxd 5/24/01 2:49 PM Page 134 134 135 TÁBLÁZATOK TÁBLÁZATOK Number Name Hex Description Number Name Hex Description 195 196 197 Atilde Auml Aring C3 C4 C5 latin capital letter A with tilde latin capital letter A with diaeresis latin capital letter A with ring above 233 234 235 eacute ecirc euml E9 EA EB latin small letter e with acute latin small letter e with circumflex latin small letter e with diaeresis 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 AElig Ccedil Egrave Eacute Ecirc Euml Igrave Iacute Icirc Iuml ETH Ntilde Ograve Oacute Ocirc Otilde Ouml times Oslash Ugrave Uacute Ucirc Uuml Yacute THORN szlig agrave aacute acirc atilde auml aring C6 C7 C8 C9 CA CB CC CD CE CF D0 D1 D2 D3 D4 D5 D6 D7 D8 D9 DA DB DC DD DE DF E0 E1 E2 E3 E4 E5 latin capital letter AE latin capital letter C with cedilla latin capital letter E with grave latin capital letter E with acute latin capital letter E with circumflex latin capital letter E with diaeresis latin capital letter I with grave latin capital letter I with acute latin capital letter I with circumflex latin capital letter I with diaeresis latin capital letter ETH latin capital letter N with tilde latin capital letter O with grave latin capital letter O with acute latin capital letter O with circumflex latin capital letter O with tilde latin capital letter O with diaeresis multiplication sign latin capital letter O with stroke latin capital letter U with grave latin capital letter U with acute latin capital letter U with circumflex latin capital letter U with diaeresis latin capital letter Y with acute latin capital letter THORN latin small letter sharp s latin small letter a with grave latin small letter a with acute latin small letter a with circumflex latin small letter a with tilde latin small letter a with diaeresis latin small letter a with ring above 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 igrave iacute icirc iuml eth ntilde ograve oacute ocirc otilde ouml divide oslash ugrave uacute ucirc uuml yacute thorn yuml EC ED EE EF F0 F1 F2 F3 F4 F5 F6 F7 F8 F9 FA FB FC FD FE FF latin small letter latin small letter latin small letter latin small letter latin small letter latin small letter latin small letter latin small letter latin small letter latin small letter latin small letter division sign latin small letter latin small letter latin small letter latin small letter latin small letter latin small letter latin small letter latin small letter 402 915 916 920 923 926 928 931 933 934 fnof Gamma Delta Theta Lambda Xi Pi Sigma Upsilon Phi 192 393 394 398 39B 39E 3A0 3A3 3A5 3A6 latin small f with hook greek capital letter gamma greek capital letter delta greek capital letter theta greek capital letter lambda greek capital letter xi greek capital letter pi greek capital letter sigma greek capital letter upsilon greek capital letter phi 230 231 232 aelig ccedil egrave E6 E7 E8 latin small letter ae latin small letter c with cedilla latin small letter e with grave 936 937 945 Psi Omega alpha 3A8 3A9 3B1 greek capital letter psi greek capital letter omega greek small letter alpha i with grave i with acute i with circumflex i with diaeresis eth n with tilde o with grave o with acute o with circumflex o with tilde o with diaeresis o with stroke, u with grave u with acute u with circumflex u with diaeresis y with acute thorn y with diaeresis 08-9-10-12.qxd 5/24/01 2:49 PM Page 136 136 137 TÁBLÁZATOK TÁBLÁZATOK Number Name Hex Description Number Name Hex Description 946 947 948 beta gamma delta 3B2 3B3 3B4 greek small letter beta greek small letter gamma greek small letter delta 8592 8594 8595 larr rarr darr 2190 2192 2193 leftwards arrow rightwards arrow downwards arrow 949 950 951 952 953 954 955 956 957 958 959 960 961 962 963 964 965 966 967 968 969 977 978 982 8226 8230 8242 8243 8254 8260 8472 8465 epsilon zeta eta theta iota kappa lambda mu nu xi omicron pi rho sigmaf sigma tau upsilon phi chi psi omega thetasym upsih piv bull hellip prime Prime oline frasl weierp image 3B5 3B6 3B7 3B8 3B9 3BA 3BB 3BC 3BD 3BE 3BF 3C0 3C1 3C2 3C3 3C4 3C5 3C6 3C7 3C8 3C9 3D1 3D2 3D6 2022 2026 2032 2033 203E 2044 2118 2111 greek small letter epsilon greek small letter zeta greek small letter eta greek small letter theta greek small letter iota greek small letter kappa greek small letter lambda greek small letter mu greek small letter nu greek small letter xi greek small letter omicron greek small letter pi greek small letter rho greek small letter final sigma greek small letter sigma greek small letter tau greek small letter upsilon greek small letter phi greek small letter chi greek small letter psi greek small letter omega greek small letter theta symbol greek upsilon with hook symbol greek pi symbol bullet horizontal ellipsis prime double prime overline fraction slash script capital P blackletter capital I 8596 8629 8656 8657 8658 8659 8660 8704 8706 8707 8709 8711 8712 8713 8715 8719 8721 8722 8727 8730 8733 8734 8736 8743 8744 8745 8746 8747 8756 8764 8773 8776 harr crarr lArr uArr rArr dArr hArr forall part exist empty nabla isin notin ni prod sum minus lowast radic prop infin ang and or cap cup int there4 sim cong asymp 2194 21B5 21D0 21D1 21D2 21D3 21D4 2200 2202 2203 2205 2207 2208 2209 220B 220F 2211 2212 2217 221A 221D 221E 2220 2227 2228 2229 222A 222B 2234 223C 2245 2248 left right arrow downwards arrow with corner leftwards leftwards double arrow upwards double arrow rightwards double arrow downwards double arrow left right double arrow for all partial differential there exists empty set nabla element of not an element of contains as member n-ary product n-ary sumation minus sign asterisk operator square root proportional to infinity angle logical and logical or intersection union integral therefore tilde operator approximately equal to almost equal to 8476 8482 8501 real trade alefsym 211C 2122 2135 blackletter capital R trade mark sign alef symbol 8800 8801 8804 ne equiv le 2260 2261 2264 not equal to identical to less-than or equal to 08-9-10-12.qxd 5/24/01 2:49 PM Page 138 138 139 TÁBLÁZATOK TÁBLÁZATOK Number Name Hex Description Number Name Hex Description 8805 8834 8835 ge sub sup 2265 2282 2283 greater-than or equal to subset of superset of 8204 8205 8206 zwnj zwj lrm 200C 200D 200E zero width non-joiner zero width joiner left-to-right mark 8836 8838 8839 8853 8855 8869 8901 8968 8969 8970 8971 9001 9002 9674 9824 9827 9829 9830 nsub sube supe oplus otimes perp sdot lceil rceil lfloor rfloor lang rang loz spades clubs hearts diams 2284 2286 2287 2295 2297 22A5 22C5 2308 2309 230A 230B 2329 232A 25CA 2660 2663 2665 2666 not a subset of subset of or equal to superset of or equal to circled plus circled times up tack dot operator left ceiling right ceiling left floor right floor left-pointing angle bracket right-pointing angle bracket lozenge black spade suit black club suit black heart suit black diamond suit 8207 8211 8212 8216 8217 8218 8220 8221 8222 8224 8225 8240 8249 8250 8364 rlm ndash mdash lsquo rsquo sbquo ldquo rdquo bdquo dagger Dagger permil lsaquo rsaquo euro 200F 2013 2014 2018 2019 201A 201C 201D 201E 2020 2021 2030 2039 203A 20AC right-to-left mark en dash em dash left single quotation mark right single quotation mark single low-9 quotation mark left double quotation mark right double quotation mark double low-9 quotation mark dagger double dagger per mille sign single left-pointing angle quotation mark single right-pointing angle quotation mark euro sign Number Name Hex Description 34 38 60 62 338 339 352 353 376 710 732 quot amp lt gt OElig oelig Scaron scaron Yuml circ tilde 22 26 3C 3E 152 153 160 161 178 2C6 2DC quotation mark ampersand less-than sign greater-than sign latin capital ligature OE latin small ligature oe latin capital letter S with caron latin small letter s with caron latin capital letter Y with diaeresis modifier letter circumflex accent small tilde 8194 8195 8201 ensp emsp thinsp 2002 2003 2009 en space em space thin space Használat: pl. a 'space', azaz szóköz esetén: ' ' / a nagyobb jel esetén (>) '>' stb. 13-14-15.qxd 5/24/01 2:51 PM Page 141 141 KIEGÉSZÍTÕK A HONLAPKÉSZÍTÉSSEL KAPCSOLATBAN 13. Kiegészítõk a honlapkészítéssel kapcsolatban 13.1 favicon.ico Ha körülnézünk az interneten, olyan oldalakkal is találkozhatunk, amelyek címe mellett az Internet Explorer használata esetén kis ikon jelenik meg. Ugyanez az ikon akkor is megjelenik, ha berakjuk az oldal címét a Kedvencek (Favorites) közé. Ha saját oldalunkat is szeretnénk ikonnal ellátni, nem kell mást tennünk, mint keresnünk vagy készítenünk egy ’.ico’ kiterjesztésû ikonállományt, s ezt az oldalunk legfelsõ (gyökér-) könyvtárába elhelyeznünk. Egyre kell csak vigyáznunk: az állomány neve ’favicon.ico’ legyen. A weboldl címe melllett kis ikon látszik 13.2 robots.txt Oldalainkat nagy valószínûséggel népszerûsíteni is szeretnénk. Ennek egyik módja az, ha egy vagy több keresõrendszerbe regisztráljuk. Ha ezt megtettük, hamarosan egy robot (más néven spider, azaz pók) fogja meglátogat- à Hivatkozás: http://www.aota.net/HTML/ favicon.php3 5/24/01 2:51 PM Page 142 142 143 KIEGÉSZÍTÕK A HONLAPKÉSZÍTÉSSEL KAPCSOLATBAN ni a megadott címet, s feltérképezi azt. Azonban mi is meghatározhatjuk, mely oldalaink legyenek elérhetõk eme mesterséges intelligenciával ellátott lény számára, az hogyan viselkedjen, mit vegyen bele a keresõ adatbázisába, mit hagyjon ki belõle. A szöveges állománynak a ’robots.txt’ nevet kell adni, és a legfelsõ könyvtárba kell elhelyezni, ahol az index is található. Minden keresõrobot más és más parancsokat értelmez, ezért érdemes fölkészülni a többi érkezésére is, fõleg, ha több helyre is regisztráltuk magunkat. A robotoknak egyébként egy ’META’ kifejezés segítségével adhatunk instrukciókat, mégpedig a következõképpen: Ennek hatására az adott oldaltól kezdve egyetlen további oldalt sem fog indexelni a keresõrobot – ezt minden robot érti. Egy mintaállomány a következõképpen néz ki: # # robots.txt for http://www.w3.org/ # # $Id: robots.txt,v 1.20 2000/11/23 00:54:15 gerald Exp $ # # For use by search.w3.org User-agent: W3Crobot/1 Disallow: /Out-Of-Date # AltaVista Search User-agent: AltaVista Intranet V2.0 W3C Webreq Disallow: /Out-Of-Date # exclude some access-controlled areas User-agent: * Disallow: /Team Disallow: /Project KIEGÉSZÍTÕK A HONLAPKÉSZÍTÉSSEL KAPCSOLATBAN Disallow: Disallow: Disallow: Disallow: /Systems /Web /History /Out-Of-Date Hivatkozás: http://info.webcrawler.com/mak/ projects/robots/robots.html 13.3 CaSe seNsitIvE A ’case sensitive’ angolul azt jelenti, hogy a kis- és nagybetûk különböznek. Ennek különleges jelentõsége van az internet esetében, ami onnan ered, hogy a Unix rendszerek is különbséget tesznek a kis- és nagybetûk között. A Windows elterjedése kissé összezavarta a dolgokat, hiszen ez az operációs rendszer nem törõdik ezzel a különbséggel. Így azután az elkényelmesedett felhasználók számára zavaró lehet a kis- és nagybetûk megkülönböztetése, amelynek azonban több elõnye is van. Figyeljünk tehát programjaink, állományaink nevére, ugyanis ha rosszul hivatkozunk rájuk, felhasználóink hibaüzenetet kapnak. 13.4 Apache szerver konfigurációja Ha megbízható, használható, stabil stb. szervert szeretnénk használni, akkor ajánlatos beszereznünk egy Linux rendszert (például a Debiant), s ezt telepítenünk a szervergépre. A webes felület kiszolgálására válasszuk az Apachet, amely nagyon sok hasznos funkcióval bír, s széles körben használják (és amely egyébként Windowson is elérhetõ). Láthattuk, hogy számos esetben (PHP3, SSI-parancsok stb.) eme rendszert kell rendesen konfigurálnunk a tökéletes mûködéshez, így most szeretnénk segítséget nyújtani a konfigurációs fájlok módosításához. à 13-14-15.qxd 5/24/01 2:51 PM Page 144 144 145 KIEGÉSZÍTÕK A HONLAPKÉSZÍTÉSSEL KAPCSOLATBAN Elsõként is keressük meg ezt a fájlt, amelynek általában az ’/etc/apache/httpd.conf’ az elérhetõsége. Ha itt minden rendben van (a hivatalos honlapon érdemes körülnéznünk segítségért), jöhet az ’access.conf’, majd az ’srm.conf’. Ez utóbbinál kell elvégeznünk a lényegi változtatásokat, jelen esetben engedélyeznünk a különbözõ fájltípusokat. Elsõként is engedélyezzük, hogy ne csak az ’index.html’ és az ’index.htm’ legyenek a kezdõoldalak: # DirectoryIndex: Name of the file or files to use as a pre-written HTML # directory index. Separate multiple entries with spaces. DirectoryIndex index.html index.shtml index.htm index.php3 index.phtml Eztán jöhetnek külön a fájltípusok: # AddType allows you to tweak mime.types without actually editing it, or to # make certain files to be certain types. # Format: AddType type/subtype ext1 # For example, the PHP3 module (a separate Debian package) # will typically use: # AddType application/x-httpd-php3 .phtml # AddType application/x-httpd-php3-source .phps # AddHandler allows you to map certain file extensions to ”handlers”, # actions unrelated to filetype. These can be either built into the server # or added with the Action command (see below) # Format: AddHandler action-name ext1 # For example, the PHP3 module (a separate Debian package) # will typically use: KIEGÉSZÍTÕK A HONLAPKÉSZÍTÉSSEL KAPCSOLATBAN # AddType application/x-httpd-php3 .phtml # AddType application/x-httpd-php3-source .phps # AddHandler allows you to map certain file extensions to ”handlers”, # actions unrelated to filetype. These can be either built into the server # or added with the Action command (see below) # Format: AddHandler action-name ext1 # To use CGI scripts: AddHandler cgi-script .cgi AddHandler cgi-script .pl # To use server-parsed HTML files AddType text/html .shtml # AddType text/html .phtml AddType text/html .html AddType text/html .htm AddType text/html .sinc AddType text/html .inc AddHandler server-parsed .shtml AddHandler server-parsed .html AddHandler server-parsed .htm AddHandler server-parsed .sinc AddHandler server-parsed .inc Mint olvasható az angol nyelvû szövegben, a PHP3 éppen egy olyan példa, ahol külön kiegészítõre is szükségünk van (ha az alapinstallban nincs benne), mégpedig a PHP3 Debian-csomagra. Ha most újraindítjuk az Apache-t, s mindent jól állítottunk be, tudjuk használni az újonnan beállított típusú dokumentumokat. Hivatkozás: http://www.apache.org/ à 13-14-15.qxd 13-14-15.qxd 5/24/01 2:51 PM Page 146 147 ESZKÖZÖK WEBTERVEZÕKNEK 14. Eszközök webtervezõknek A saját honlap elkészítéséhez nem vezet nehéz út. Csak a megfelelõ szoftver kell hozzá. A hatalmas freeware és shareware választék jóvoltából majdnem úgy programozhatunk, mint a profik. Manapság majd minden szolgáltató kínál tárhelyet saját honlapunk elhelyezéséhez. De kinek van kedve a szükséges szoftver beszerzéséhez mélyen a zsebébe nyúlni? Erre nincs is szükség: az interneten ezernyi jobbnál-jobb program közül válogathatunk. Ebben a fejezetben a legjobb HTML szerkesztõkkel, eszközökkel és optimalizáló programokkal ismerkedhetnek meg olvasóink. 14.1 1st Page 2000 2.0 HTML-szerkesztõbõl annyi van, mint égen a csillag, de professzionális webdesign készítésére korántsem alkalmas mindegyik. Az egyik legjobb és legerõsebb program a 1st Page 2000, amelynek még néhány kereskedelmi forgalomban kapható konkurense elõtt sem kell szégyenkeznie. A program a profi weboldalak elõállításához szükséges valamennyi eszközt egyszerû és könnyen kezelhetõ felületen egyesíti. Más programokkal ellentétben a 1st Page teljesen tiszta, minden konvenciónak megfelelõ kódot ír. A program három különbözõ üzemmódot kínál, így a kezdõ és a profi egyaránt megtalálja benne az ideális eszközt céljai elérésére. A mindenkori munkakörnyezet egyedileg alakítható ki, és ezután csak a valóban szükséges funkciókat tartalmazza. Szinte hihetetlen, hogy egy freeware programnak enynyire átfogó funkciókínálata legyen. Például bármikor átválthatunk a szerkesztõ és a megtekintõ nézet között. Így 13-14-15.qxd 5/24/01 2:51 PM Page 148 148 149 ESZKÖZÖK WEBTERVEZÕKNEK ESZKÖZÖK WEBTERVEZÕKNEK 14.2 Almighty Notepad 2000 2.01 A 1st Page 2000 kezdõk és profik számára egyaránt jó választás lehet rögtön láthatjuk az eredményt. Egy varázsló segítségével – alapvetõ programismeret nélkül – több mint 450 JavaScriptet és VBScriptet illeszthetünk honlapunkba. A programkód megjelenítésénél a 1st Page áttekinthetõségre és strukturáltságra törekszik. Az egyes tag-eket másmás színnel emeli ki; egérkattintással tag-eket szúrhatunk be úgy, hogy az adatbázisba saját HTML kódot is felvehetünk, és azt azonnal meg is tudjuk hívni. Az optimáláshoz a program HTML tömörítõt – amely a szóközöket és a kommentárokat eltávolítja, és ezzel a fájlméretet csökkenti –, valamint automatikus hibajavítást kínál. Aki komplex projekteket adatbázis-csatolással szeretne megvalósítani, bizonyára értékelni fogja az SSI, CGI, Cold Fusion és ASP támogatást. Kimerítõ HTML-referencia segíti a tanulást lépésrõl lépésre, és ad információkat az elõbbre jutáshoz. Az egészet az FTP modul teszi kerekké, amellyel a kész oldalakat közvetlenül felvihetjük webszerverünkre (freeware, angol). Info: http://www.evrsoft.com A profik körében a Macromedia Dreamweavere egyenesen „a” szerkesztõprogramnak számít. Ez épp elég okot szolgáltatott az Almighty Notepad programozóinak, hogy a felületet és a funkciók nagy részét lekoppintsák. Az Almighty Notepad erõs HTML-szerkesztõ, amely a WYSIWYG-et és a kódot tökéletesen egyesíti: példaképének megfelelõen választást kínál a grafikus WYSIWYG mód és a tisztán szövegorientált programozás között. A tesztverzió sajnos néhány megszorítást tartalmaz. Például nem ad elérést a Java-, CSS- és GIF-builderhez, sem az integrált FTP-klienshez. A HTML dokumentumokat csak 500 karakterig engedi tárolni, sõt WYSIWYG módban egyáltalán nem lehet menteni. Mindezek ellenére a szoftver kitûnõ összbenyomást kelt, és nagy teljesítményû projektkezelést, XML-tag-támogatást, template-kezelést és néhány helyes JavaScriptet kínál. Ezekhez jönnek még a kódvarázslók, a drag&drop technika a képekhez és HTML fájlokhoz, a grafikus sitemap-szerkesztõ, a hyperlink-szkenner és –ellenõrzõ, az integrált FTP-kliens, a helyesírás-ellenõrzés és még sok minden más. Kezdõk és profik egyaránt nagyon gyorsan hozzászoknak az egyszerû és magától értetõdõ kezelõi felülethez, és a legjobb eredményeket érhetik el (shareware, német). Info: http://www.intag.de/pcx 14.3 HotDog Pro 6.0 Ennek az eszköznek a webmastersuite-je öt alkalmazásból álló gyûjtemény, amely honlapunk létrehozásában nyújt segítséget. A programablak fel van osztva a tulajdonképpeni kód és a grafikus nézet funkció között. Egérkattintással válthatunk a teljes képernyõs képhez, és vált- 13-14-15.qxd 5/24/01 2:51 PM Page 150 150 151 ESZKÖZÖK WEBTERVEZÕKNEK hatunk a kód és a megtekintés között. A program mindenféle célokat szolgáló eszközök hatalmas tárházát kínálja. Különbözõ varázslók – fontokhoz, táblákhoz, listákhoz, keretekhez, képekhez, hangokhoz, beágyazott objektumokhoz, animációkhoz – segítenek a kezdésnél és a Hot Dog kezelésében. Errõl a figuráról bárhol felismerhetjük a Hot Dog Prót ESZKÖZÖK WEBTERVEZÕKNEK 14.4 CoffeeCup HTML Editor 8.2 Ennél a szövegszerkesztõnél szerelemrõl csak a második pillantásra lehet szó. A CoffeeCup HTML a manuális kódkezelést és a programozást állítja elõtérbe, és ezáltal hibátlan, sallangmentes HTML-szintakszist garantál, felesleges nehezékek nélkül. Ez gyors betöltést és minden böngészõvel a lehetõ legjobb kompatibilitást nyújtja. A munkát számos frame-, ûrlap-, tábla- és egyéb varázsló könnyíti meg. Valamennyi csatolt objektum színes kiemelésének köszönhetõen az átfogó honlap-projektek is átláthatók maradnak. A programcsomag értékét az Expresso FTP feltöltõeszköz, egy egyszerû képszerkesztõ és egy hang-browser emeli. Ideális belépõt kínál a webdesign világába a CoffeeCup HTML Editor Aki multimédiás elemeket szeretne beépíteni, egészen biztosan talál a 17 úgynevezett SuperTools között eszközt a banner-készítéshez, a script-alapú oldalkészítéshez és a feltöltéshez. Ennek a szemmel láthatóan kezdõkre szabott berendezkedésnek az ellenére a program számos profi funkciót is kínál, mint például a szintakszis-jelölést, a felhasználó által meghatározható eszközöket és a makrókat, valamint kiváló fájlkezelõt. További különlegesség a színkódolás tag-gel vagy a szintakszisok HTML 3.2-t sõt HTML 4.0-t támogató tulajdonságokkal. A program a szintaktikai hibákat munka közben automatikusan pirossal jelöli, és a mûveletek szinte korlátlanul visszavonhatók. A szerkesztéshez és általában a HTML-hez jól érthetõ súgót is kapunk a programmal (shareware, angol). Info: http://www.sausage.com Említést érdemel a tetszõleges HTML oldal közvetlen megnyitása. Az eszköztárban még további öt tetszõleges alkalmazást is elhelyezhetünk, például egy linkellenõrzõt, egy CSS-szerkesztõt vagy egy grafikai programot, amelyeket azután innen közvetlenül indíthatunk. A HTML kódokat úgynevezett snippletként tárolhatjuk, és egérkattintással rögtön beszúrhatjuk más oldalakba. További kellemes kiegészítõk, mint a kész appletek, 100 JavaScript, 13-14-15.qxd 5/24/01 2:51 PM Page 152 152 153 ESZKÖZÖK WEBTERVEZÕKNEK 175 animált GIF grafika, több mint 300 webikon és -grafika, dinamikus HTML-kódok, ActiveX komponensek és CGI scriptek teszik kerekké a profi eszközt, és könnyítik meg a beszállást a webdesign világába (shareware, angol). Info: http://www.coffeecup.com/editor 14.5 1-4-All 2.1 Ez a professzionális HTML szerkesztõ hasznos funkciók sokaságát kínálja, és az egyszerû, intuitív kezelést számtalan segítõkész varázslóval kombinálja. Így frameeket, táblákat vagy listákat különösebb erõlködés nélkül állíthatunk elõ. Sõt, külsõ segítségeket, mint a SelfHTML, is problémamentesen becsatolhatunk. A kezelõi felület minden tanulás nélkül is szinte magától értetõdõ, és minden fontos funkció egérkattintással elérhetõ az eszköztárban. Hasznos funkciók tömkelegét kínálja a 1–4–All szerkesztõprogram ESZKÖZÖK WEBTERVEZÕKNEK A profi funkciók között találunk egy projektmanagert, editálható tag-eket, keresés-csere rutint, integrált böngészõt a HTML oldalak közvetlen megtekintéséhez, egyszerû grafikus szerkesztõt, sablonokat, helyesírás-ellenõrzõt és még sok mást. Egyszerre több fájlt nyithatunk meg és szerkeszthetünk egyidejûleg, például kódrészeket másolhatunk ide-oda. A beépített FTP-támogatással az elkészült oldalakat közvetlenül aktualizálhatjuk a szerveren. A honlapról szótárakat tölthetünk le a különbözõ nyelvû helyesírás-ellenõrzéshez. A programhoz még számos elõre elkészített JavaScript is elérhetõ, amelyek szöveghatások, futó feliratok, tickerek, cookie-k, diashow-k vagy oldalátirányítás megvalósítását szolgálják (shareware, német). Info: http://www.mmsoftware.com 14.6 TopStyle 1.5 Az igazi designer profik az úgynevezett Cascading Style Sheets-re (CSS) esküsznek. Ezzel a layoutot elválasztják a tartalomtól. Ennek mindjárt több elõnye is van: a változtatások könnyen végrehajthatók; a stíluslapok használata jelentõsen csökkenti a HTML dokumentumok méretét, mert a ’’ és a ’’ tag-eket el lehet hagyni. A TopStyle CSS szerkesztõ hatásos eszközöket kínál rugalmas, a legkülönbözõbb böngészõkkel használható style sheetek készítéséhez. Egyszerûen kiválasztjuk a CSS definíciót, amelyhez tartani akarjuk magunkat. Ezután a Property Inspector megmutatja a tulajdonságokat és az értékeket. Minden nem támogatott tulajdonságot színesen kiemel, hogy rögtön beavatkozhassunk. A Style Checker ellenõrzi stíluslapjainkon a különbözõ CSS definíciók betartását, ezáltal nemcsak a stíluslap érvénytelen bejegyzéseire hívja fel a figyelmet, hanem a bugokra is a népszerû böngészõkben, amelyek hatással lehetnek stíluslapjaink megjelenésére. 13-14-15.qxd 5/24/01 2:51 PM Page 154 154 155 ESZKÖZÖK WEBTERVEZÕKNEK ESZKÖZÖK WEBTERVEZÕKNEK A TopStyle jól kihasználja a CSS képességeit A gombok nagymesterét tisztelhetjük a ButtonFly-ban Info: http://www.topstyle.de 14.7 ButtonFly 2.0 Legyen szó címrõl, gombokról, ikonokról, bannerrõl vagy navigációs vonalzókról, a ButtonFly-jal sokoldalúan tervezhetünk és kivitelezhetünk webgrafikát. Konkáv és konvex gombok, kontúrok, árnyékok és anti-aliasing, textúrák és képek importja – itt minden lehetséges. A ButtonFly segítségével egyszerûen és gyorsan készíthetünk többnyelvû gombokat, szövegeket és reklámfeliratokat weboldalunk számára. A program megkönnyíti a komplex és ismétlõdõ feladatok végrehajtását, ezáltal ideális megoldást jelent a kezdõ és a profi webmester számára is. A vektor- és bitmap-grafikák alapján modellezi a grafikákat és számos effekttel látja el azokat. Itt választhatunk a relief, árnyék, textúra, fedõképesség, szín vagy életlenség közül, hogy csak a legfontosabbakat említsük. Ugyanarra a kapcsolófelületre többféle szövegelemet is felvihetünk: lekerekített vagy nem lekerekített szöveget, kitöltött színt, félkövér írást, szélességet, betûközt, szöveghez tartást, betûk forgatását. A szövegméret a kapcsolófelület méretének megfelelõen számítható ki. A ButtonFly minden telepített TrueType, Adobe Type1 és Dtype betûkészlettel boldogul. A kész projekteket egérkattintásra automatikusan .gif és .jpg grafikai formátumban tárolja (shareware, német). Info: http://www.buttonfly.com/de 14.8 CSE HTML Validator Akár szöveg-, akár WYSIWYG szerkesztõvel programozzuk HTML oldalainkat, a kódhibákat aligha zárhatjuk ki. Ez honlapunk látogatóira nézve kellemetlen következményekkel járhat: a layout sehogy se stimmel. Táblázatok és képek csúsznak el, a beállított betûtípusok nem jelennek meg és hieroglifák tûnnek fel a szövegben. Ennek nem muszáj így lennie. A CSE HTML Validator ellen- 13-14-15.qxd 5/24/01 2:51 PM Page 156 156 157 ESZKÖZÖK WEBTERVEZÕKNEK õrzi a HTML kódok helyességét és kompatibilitását az egyes fájlokban a weben és a helyi lemezen, vagy egész könyvtárakban, illetve elérési útvonalakon. Néhány pillanat alatt a böngészõben kiírva megkapjuk az ellenõrzés eredményét. A talált hibákat jelöli, és elkülönítve hozzáírja a javítási lehetõségeket. Egy további egérkattintásra automatikusan kijavítja a hibát. A CSE HTML Validator megkímél a kellemetlen kódhibáktól Az új verzió támogatást ad a cold fusion tag-ekhez, valamint Microsoft és Netscape bõvítéseket is tartalmaz. A regisztrálatlan verzióval legfeljebb 50 dokumentumot ellenõrizhetünk. Minden szükséges változtatást végrehajthatunk a programba integrált HTML editorral, és mindjárt az ellenõrzést is újra elvégezhetjük. A CSE HTML Validator úgy integrálható a professzionális HTML szerkesztõkbe, hogy a kódot közvetlenül a honlapról ellenõrizni tudjuk anélkül, hogy a programból ki kellene lépnünk. Beállíthatunk különbözõ opciókat és az ellenõrzés erõsségét. Így oldalainkat valamennyi böngészõvel kom- ESZKÖZÖK WEBTERVEZÕKNEK patibilisen programozhatjuk, és száz százalékosan tiszta és hibátlan kódot kapunk (shareware, angol). Info: http:// www.htmlvalidator.com/ 14.9 Linkbot Pro 5.5 Mi sem bosszantóbb, mint ha egy weboldalon nem mûködnek a linkek, nem jelenik meg a grafika és az animációk. A hibás oldalak negatív benyomást keltenek, és rossz fényt vetnek az üzemeltetõre. Ezért minden webmesternek ügyelnie kellene a weboldal tökéletességére. A valóságban ez sajnos másképp fest. Sok oldalnál mutatkoznak problémák, mert ezernyi fájl és csatolás kézi vezérlése már nem lehetséges. A Linkbottal valamennyi HTML fájlt ellenõrizhetjük – legyen az a helyi lemezen vagy az interneten. Profi felhasználók, webmesterek, de még azok a CD-tervezõk is, akik HTML struktúrára építenek, aligha hagyhatják ki ennek az eszköznek a használatát, elsõsorban a részletes és mégis átlátható protokollozás miatt, amely szinte minden kívánalomnak megfelel, és minden hibát feltár. Meghatározhatjuk például, hogy a program csak saját doménünk linkjeit, vagy a továbbvezetõ linkeket is ellenõrizze. A lefuttatott ellenõrzést követõen részletes HTML riportot kapunk arról, hogy mely hivatkozások nem érvényesek már. Az eredményeket megkaphatjuk részletes táblázatban vagy praktikus HTML formátumban. A weboldal-detektív HTML-, grafikai-, FTP-, Java-, mail- belsõ és külsõ link filtert is tartalmaz (shareware, angol). Info: http://www.linkbot.com/ 13-14-15.qxd 5/24/01 2:51 PM Page 158 158 159 ESZKÖZÖK WEBTERVEZÕKNEK 14.10 BrowserSizer 1.1 Valószínûleg botlottak már olyan weboldalakba, amelyek „szétfeszítik” a monitor méreteit. Ahelyett, hogy az oldalt teljes méretében látnánk a képernyõn, jobbra és lefelé kell görgetni. Egy ilyen oldalt általában elõször és utoljára látogatunk meg. Az, ami a programozó 21 collos monitorán 1024×768-as felbontásban hibátlanul kitölti a képernyõt, egy 15 collos monitoron, 800×600-nál elég szerényen néz ki. A BrowserSizer segítségével ellenõrizhetjük, hogyan fest a weboldalunk különbözõ felbontású képernyõkön Hogy ne kelljen minden oldalt három különbözõ megjelenítésben programozni, érdemes kompromisszumot kötni. Ebben egy kis eszköz, a BrowserSizer lehet segítségünkre, amely egyetlen egérkattintással váltani tud a három gyakran használt felbontás között, sõt az esetleges Windows vagy Office startmenüjét is bevonhatjuk a méretezésbe. A program emulálja az Internet Explorert és a Netscape Navigatort (freeware, angol). Info: http://www.vasile.com/racecar/stampware ÖSSZEFOGLALÁS 15. Összefoglalás A könyv remélhetõleg minden olvasója számára meghozta a kedvet a HTML nyelv mélyebb megismeréséhez. Az itt található anyag fõként kezdõk számára kínál jól hasznosítható alapismereteket, szem elõtt tartva azt is, hogy mindezeket kipróbálva, alkalmazva az olvasók minél elõbb, minél látványosabb eredményeket érjenek el. A kiadvány tekinthetõ ízelítõnek is, egy többfogásos ebéd elõételének, amely éppen csak kedvet ébreszt a további fogyasztáshoz, s remélhetõleg nem fekszi meg a gyomrunkat. Ajánlatos az interneten is körülnézni további példák után, hiszen bármely keresõbe beírva az itt olvasható kifejezések bármelyikét, több millió oldalt kapunk találatként. Errõl eszembe jut, hogy érdemes lenne elmagyarázni, hogyan mûködnek a keresõrendszerek, milyen kifejezéseket alkalmazhatunk a hatékonyabb keresés érdekében! Ez azonban már egy másik könyv témája... Our partners will collect data and use cookies for ad personalization and measurement. Learn how we and our ad partner Google, collect and use data. Agree Cookies