5.1 A HTML elemek
Ha gondos elõkészítõ, tervezõ munka
után vágunk bele, akkor rutinmunkává egyszerûsödik
a szerkesztés fázisa. Nézzük azonban, hogy milyen
fontosabb teendõk várnak ezen a területen ránk.
Mint azt már említettem, a böngészõ ablakában
megjelenõ oldalaknak alapvetõen két látható
eleme van, mint bármelyik nyomtatott kiadványnak. A szöveg
és a kép, illetve grafika. Mielõtt azonban belevágnánk
ennek a két jellemzõnek a vizsgálatába, fontos
megemlíteni a weblap nem látható részét
is, a forráskódot, amelynek köszönhetõen
a világ bármely internetre kötött számítógépén
meg fog jelenni gondos munkával készített oldalunk.
A forráskódot, amely tulajdonképpen egy programozási
nyelv, angol rövidítéssel HTML-nek nevezzük, s
szabvány írja le. A HTML jelölõ nyelv az SGML-bõl
fejlõdött ki. Az SGML (Standard Generalized Markup Language)
1986 óta nemzetközi szabvány. WEB oldal szerkesztésre
lehetõségünk van csak a HTML programnyelv használatával
is. Ennek a nyelvnek csak azokat az elemeit említem, amelyek minden
lapon megtalálhatók vagy gyakrabban fordulnak elõ.
A lap szerkezete a HTML szabályai szerint ilyen:
<html>
<head>
<title>Iskolai honlap</title>
</head>
<body>
Ez az ami látszik
</body>
</html>
Mint látjuk, a lapok szerkezete egy <html> és </html>
elem közé van zárva. Innen tudják a böngészõk,
hogy html típusú oldallal van dolguk. A <head> elemek
közötti rész még nem jelenik meg a böngészõ
ablakában, de fontos információkat tartalmaz, például
az alkalmazott karakterkészletrõl, a készítõ
nevérõl. A meg nem jelenõ részben talán
a legfontosabb a <title> elemek közé zárt információ.
Az itt olvasható szöveg fog megjelenni a böngészõ
címsorában, és a keresõautomaták is
ezt fogják a lap hálózati címe mellé
írni. Amit látni fogunk a weblapon, az a <body> elemekkel
definiált részben található. Az oldalaknak
ez a „legkövérebb" része, s számtalan elemet
tartalmazhat, amelyek közül csak néhányat emelek
ki. Az elemek általában kulcsszópár formában
fordulnak elõ. Például <H1> </H1>
<H1> Címsor 1-es típusú formázás
a szövegben.
érték% elõjel nélküli, egész
típusú decimális szám és százalékjel,
amely egy százalékos arányt fejez ki.
string karakterlánc, amely állhat egy szóból
idézõjelek nélkül, vagy szóközöket
tartalmazó szövegbõl, amelyeket azonban idézõjelek
közé kell zárnunk.
Html-kód Az ékezetes betûk, vagy egyéb speciális
nemzeti karakterek megjelenítésére szolgáló
kód, amely az ISO-8859-1 karakterkészletet, az ún.
Latin-1-es kódlap karaktereit tartalmazza. Használatukkal
bármely országban azonosan jelennek meg a magyar hosszú
ékezetes betûk.
színkód #RRGGBB A színek megadása történik
segítségükkel.
<p> A bekezdésekre tördelést végzi.
<br> Sortörést illeszt be és megtartja a bekezdés
addigi stílusát.
<table> Táblázatot definiál
<hr> Egy vízszintes elválasztó vonalat illeszt
be.
<form> Ûrlap definíció eleje és vége.
<input> Ûrlapelemet határoz meg, adatok bevitelére
alkalmas, amelyet utána egy JavaScript program dolgozhat fel vagy
közvetlenül elküldhetõ a webszerver felé.
<img> Képek elhelyezése formázással
együtt.
<a> Hyperhivatkozást biztosító jelzõ.
bgsound Háttérzenét adhatunk meg, amelynél
definiálnunk kell a lejátszás jellemzõjét,
például, hogy hányszor játssza le.
marquee Futó feliratot definiál, csak az IE-ben mûködik.
align A bekezdés igazítását határozza
meg.
alt= Ha böngészõ nem találja a megadott képet,
akkor az itt definiált szöveget jeleníti meg helyette.
background= Ha a kifejezés után egy gif vagy jpg kiterjesztésû
képet adunk meg akkor a böngészõ azt háttértapétaként
jeleníti meg.
<frameset> Keretek definiálása a böngészõ
ablakában.
Frame src= Megadja a keretben megjelenítendõ html oldal
nevét.
Lehetne folytatni a HTML nyelvet alkotó TAG-ek felsorolását,
de sok olyan van közöttük, amelynek használata magasabb
ismereteket kíván, illetve alkalmazásukhoz ún.
CGI scripteket vagy JavaScripteket kell írni.
Még néhány szó a HTML nyelv fejlõdésérõl.
A téma szakirodalma nemrégen hozta nyilvánosságra
a dinamikus HTML-rõl szóló híreket. A dinamikus
HTML a programozhatóságában tér el a klasszikus
HTML-tõl. Az ide tartozó objektumok script alapú manipulálása
közvetlenül a HTML része lett. Az objektumokhoz eseményeket
rendelhetünk az ún. objektummodelleken keresztül. Tipikus
példa erre, amikor az egér elhaladtára a grafika megváltoztatja
valamilyen tulajdonságát. Bemélyedõ hatást
keltve kisebb lesz, vagy fordítva. A dinamikus HTML-nek vannak multimédiás
és adatbázis kiegészítései is.
5.2 A szöveg
Nézzük inkább az oldalak legfontosabb részét,
a szöveget. Alapvetõ jellemzõje, hogy lehetõségeink
a szöveg formázására olyanok, mint egy szerényebb
tudású szövegszerkesztõben. Amit minden web böngészõ
megjelenít, az a variable widht típusú szöveg
Times New Roman betûtípussal és a fixed widht Courier
betûvel. Használhatjuk az operációs rendszerünk
alá installált típusokat is, ezt a legtöbb web
szerkesztõ megengedi, de természetesen az ilyen szöveg
az adott betûtípussal csak akkor jelenik meg ha a böngészõ
programot futtató gépen is elérhetõek a definiált
típusok. Érdemes mérlegelni.
Az alkalmazott karakterkészletet is be kell állítanunk.
Az ISO-8859-1 nyugat-európai, vagy az ISO-8859-2 közép-európai
típusokat érdemes alkalmazni. A windows 1250-es kódlapjának
használatakor, ha olyan országban nézik meg lapjainkat,
ahol nem ezt használják, akkor nem jelennek meg helyesen
az ékezetes betûk, és ez a lap olvashatatlanságához
vezethet. Tudni kell, hogy a böngészõk a bekezdéseket
automatikusan a lap méretéhez igazítják. Használhatunk
számozott, és lista elemeket is. A WYSIWYG szerkesztõkben
használhatjuk a szövegszerkesztõknél jól
ismert stílusokat is. Címsor, normál, listaelem, felsorolás,
cím, elemek állnak a rendelkezésünkre. Félkövér,
dõlt, aláhúzott karakterekkel emelhetjük ki mondanivalónkat.
Ne használjunk aláhúzott szövegrészeket,
mert elfogadott, hogy a linkeket tartalmazó ún. hypertext
részeknél találunk ilyen megoldást. Zavaró
lehet használatuk. A betûméret adhat még lehetõséget
arra, hogy a szöveg kontrasztját emeljük. Tudni kell azonban,
hogy a letöltõdött oldalaknál a betûméret
egységesen csökkenthetõ vagy növelhetõ a
böngészõ ablakában. A méret kiválasztásánál
soha ne abszolút értelemben határozzuk meg a nagyságot,
hanem az egyes szövegelemek, címsorok, listaelemek relatív
arányát tartsuk mérvadónak. Figyelem! A képernyõ
felbontása is befolyásoló tényezõ. Azt
sajnos nem tudjuk megvalósítani, hogy az összes létezõ
felbontás esetén optimális betûméretet
kapjunk. A szerkesztést célszerû 800x600-as felbontásnál
végezni. A 640x480-as képernyõ elõtt ülõk
óriásokat fognak látni, de szerencsére õk
vannak kevesebben. Ami 800x600-ban jó, az nagy valószínûséggel
jó lesz 1024x768-ban is. Fordítva már nem biztos.
Szóval: a méretnél hasznos az arany középút!
Betûszínek. Ismét egy olyan pont, ahol számtalan
variációs lehetõségünk van. A bõség
zavarában azonban könnyen abba a hibába eshetünk,
hogy az oldalunk windows-os színpalettává alakul.
A szín legyen inkább a képek jellemzõje, mint
a szövegé. Ez nem azt jelenti, hogy ne használjunk színes
betûket, de mértékkel. A böngészõk
alapértelmezésben öt színt használnak.
Másként jelenítik meg a normál, a linket tartalmazó,
az aktív kiválasztott linket tartalmazó, a már
„meglátogatott" linket tartalmazó szöveget és
a háttér színét. Ez éppen elegendõ.
Inkább a színek összhangjára figyeljünk.
Teljesen eltérõ funkció jelölésére
ne alkalmazzunk csak árnyalatban eltérõ színt.
Lehetõleg ne használjunk erõs fluoreszkáló
hatású effektusokat. Fehér háttérre
tett fekete betût ne alkalmazzuk olyan szöveg esetében,
amikor nagy mennyiségû információt jelenítünk
meg a képernyõn, és feltételezzük ennek
monitoron történõ olvasását. Ez a fajta
kontraszt hamarabb fárasztja a szemet. A színeknél
hatásos lehet az ismétlés. Ha bizonyos elemeket, például
fõcímeket, listákat azonos módon jelenítünk
meg. Ez egyfajta egyensúlyt kölcsönöz az oldalnak,
a rend hatása érvényesül, áttekinthetõ
lesz a lap. A zseni, mint tudjuk átlátja a káoszt,
de mi inkább tartsunk rendet.
5.3 A képek
Egy kép felér ezer szóval, tartja a mondás.
A képek, grafikák mélyebb nyomot hagynak bennünk,
mint a puszta szöveg. A WEB fejlesztõi is erre alapozva teremtették
meg a lehetõséget a nem írásos anyag átvitelére
és megjelenítésére. Gondoljuk csak meg, milyen
szegényes külsõt kölcsönöz az oldalnak
a grafikamentesség. Természetesen elõfordulnak olyan
esetek, amikor nem szükséges ilyen eszközök alkalmazása.
Például ha gyorsan letöltõdõ oldalt szeretnénk,
vagy a tartalom információs ereje nem kívánja
meg a képeket. Mit kell tudnunk róluk? Elõször
is a képformátumot. Akad belõlük pár tucat.
A WEB-en használható a GIF és a JP(E)G. A Netscape
böngészõk támogatják még a PNG
formátumot is. A UNIX pedig az XBM-et, de számunkra ez most
nem lényeges. A GIF a régebbi. Tudnunk kell róla,
hogy tömörítõ eljárása veszteségmentes,
azaz a képben nem jelennek meg hibák a konverzió során.
Ezt az eredményezi, hogy határok között tömöríthetõ.
Sajnos, csak 256 színt tud. Ábrákhoz, rajzokhoz, kisebb
képekhez ajánlható.
A JP(E)G kimondottan fotókhoz kitalált. Rendkívüli
tömörséget érhetünk el vele, de ennek sajnos
ára van. Ugyanis csal. Az emberi szem becsapható, s a JP(E)G
ezt használja ki. 24 bites színmélységet érhetünk
el vele, de grafikához ne használjuk, mert csúnyán
hibázik.
A GIF formátumnak van egy WEB-re kitalált típusa.
Az ún. animated GIF. Ez az amikor a kép „megmozdul". Egyszerû
kis animációkat játszhatunk le vele. Olyannyira elterjedt,
hogy ma már szinte nincs is WEB „kikötõ" ahol a webmester
ne használná ki a kis animáció adta „meghökkentõ"
effektusokat. A GIF89 formátum tudja ezt, amikor több képet
egymás után megjelenítve a mozgás hatását
érzékeljük. Lejátszható fixen megadott
ciklusszámmal, vagy végtelenítve.
Létezik még interlaced és transparent GIF is.
Az elõbbinél a kép fokozatosan élesedik ki,
ami azért jó, mert rögtön eldönthetjük,
hogy megvárjuk-e a teljes letöltõdését
vagy sem. Az utóbbi a semleges háttérrel megjenített
változat. Ilyenkor a kép még inkább a lap része
lesz és nem árulkodik a bántó keret a kép
körül.
A PNG formátumról csak néhány szó.
Egyelõre még nem szabványos HTML képformátum,
de a közeli jövõben nagy jövõt jósolnak
neki a szakemberek.
Képek beillesztése, elhelyezés. Alapelv, hogy
óriási méretû lassan letöltõdõ
fotót, grafikát ne tegyünk fel egy oldalra tucatjával.
A mai magyar sávszélesség ismeretében a „szörfözõk"
többsége úgyis „lelövi". Ha mindenáron sok
és szép nagy fotót akarunk elhelyezni, akkor készítsünk
egy html oldalt, amelyen csak a képekre mutató link található
esetleg némi magyarázattal, aminek ismeretében eldönthetem,
hogy letöltöm vagy sem. A képek, fotók egy része
átesik egy digitalizálási szakaszon, ami nem mindig
a kívánt eredményt hozza. Érdemes egy képszerkesztõ,
fotóretusáló programmal kicsit átdolgozni,
hogy a lehetõ legjobbat hozzuk ki belõle. Az említett
szoftverek alkalmasak különbözõ érdekes effektusok
alkalmazására is, amivel szintén növelhetjük
a hatást. Például emboss opcióval, az átlátszóság
vagy a kontraszt megváltoztatásával. Számos
shareware változat érhetõ el, s a limitált
30 vagy 60 napos idõ többnyire elegendõ is a feladat
elvégzésére. A képre is vonatkozik az igazítás,
mint a szövegre. Figyelem! A WEB szerkesztõ nem kiadványszerkesztõ
program, ezért van néhány dolog amit nem tehetünk
meg. Például nem lehet a képre szöveget írni,
hacsak azt nem tettük meg a képszerkesztõ programban.
Alapesetben nem tudunk több sort elhelyezni a kép mellett,
bár ezt a Netscape Composer már támogatja és
a böngészõk meg is jelenítik. Lehet a képnek
vastag vagy vékony kerete, esetleg elhelyezhetjük keret nélkül.
A mozgó animált GIF-et így illesszük be. Sokan
állítják be böngészõjüket
úgy, hogy a képeket ne jelenítse meg. Ilyen esetekre
felkészülve az alt="...." TAG beszúrásával
megadhatjuk azt a szöveget, ami ilyen esetben is megjelenik a kép
helyén. A felhasználó egyrészt eldöntheti,
hogy külön letölti-e, másrészt pedig ha fontos
navigációs pontot helyeztünk el egy kép „mögé",
akkor elengedhetetlen ennek az opciónak a használata. Meg
kell még jegyezni, hogy az ismertetett képformátumok
bittérképesek, tehát nagyításuknál
a nagyobbodó raszter hibának számít. A kicsinyítés
elvileg nem okoz ilyen problémát, kivéve, ha a képen
felirat is látható. Ebben az esetben azt kockáztatjuk,
hogy a betûk csúnyán deformálódnak, súlyosabb
esetben pedig olvashatatlanná válnak.
A képek ismertetésekor külön ki kell térni
az ún. háttérkép vagy tapéta problematikájára
is. A background="valami.gif" jelzi a HTML nyelvben a böngészõ
számára, hogy a megadott képet a háttérbe,
mozaikszerûen helyezve jelenítse meg. Remek hatások
érhetõk el így, kitágítva a színek
adta lehetõséget a felület, mint vizuális effektus
irányába. Vigyázat! Itt is leselkednek veszélyek
a gondatlan készítõre. Mindegy, hogy a héttér
sötét vagy világos, de a betûk színét
ennek függvényében határozzuk meg. Ne használjunk
olyan képet háttérként, amelyen zavaró
feliratok vannak, vagy olyan sok színt tartalmaz, hogy veszélybe
kerül az oldalon elhelyezett szöveg olvashatósága.
Szintén hiba, ha a háttérkép felülete
nem egységes, vagyis árulkodik a „mozaikszerûség".
Használjunk egyszerû, felületeket utánzó
képeket. Szintén fontos, hogy az itt alkalmazott GIF vagy
JPG fájl se legyen nagy méretû, hiszen a lassúság
az amúgy sem túl gyors WEB-en kiábrándító
lehet.
5.4 Linkek, hivatkozások, navigáció
Amit idáig szerkesztettünk, az alig különbözik
valamilyen szövegszerkesztõ programban készített
kiadványtól. Amitõl „életre kel" a lap, azok
a kapcsok, vagy angol szóval linkek, de szokás õket
hivatkozásként is említeni. Technikai oldalról
közelítve a link nem más, mint egy cím. Címet
definiálhatunk a lapon belül, van címe egy másik
oldalnak, egy másik WEB „kikötõnek". Címként
a http protokollon kívül megadhatunk ftp, gopher, telnet, file,
mailto vagy news protokollokat is. A felhasználó számára
a link úgy válik „láthatóvá", hogy az
egérkurzor alakja megváltozik. Nyílból egy
mutató kéz lesz, és gyakran egy ún. buboréksúgó
is segíti a tájékozódást. Ez utóbbi
csak akkor jeleníthetõ meg, amikor egy kép „mögé"
helyezzük el a kapcsolatot. A linkek készítése
tulajdonképpen az oldalak logikájáról árulkodik,
úgy is mondhatnánk, hogy a közlekedést biztosítja.
Rendkívül átgondoltan kell tehát megterveznünk
ezt a részét oldalainknak. Szerencsés, ha a kezdõlapon
helyezünk el navigációs pontokat, amelyek az oldalaink
közötti „mozgást" vezénylik. Ez lehet szöveg
vagy kép, igényünknek, ízlésünknek
megfelelõen. Ha négy vagy öt oldalnál többet
készítettünk, akkor szerencsés választás
lehet egy keretben definiált menüsor, amely bármely
oldalra ugorva is a böngészõ ablakában marad.
Ez még egy elõnnyel jár. Látogatónk
mindig tudni fogja, hogy nálunk „vendégeskedik". A keretes
verzió készítése kicsit több munkát
igényel, de az említett elõnyökkel jár.
Figyeljünk azonban arra, hogy túl sok keret definiálása
nagyon lecsökkentheti a „hasznos" információt adó
felületet. Ilyenkor megjelenhet egy vízszintes görgetõléc
is, ami nehezíti a szöveges rész olvasását
azzal, hogy állandóan mozgatnunk kell.
Ha a lapon belül definiálunk kapcsolatot, akkor elõször
ott kell elhelyeznünk egy „TARGET" elemet, ahová szeretnénk,
hogy a link mutasson. Második lépésként kell
megadnunk a hivatkozást, amelyet a # jel elõz meg. Célszerû
az említett kapcsolatot kétirányban definiálni,
hogy ne csak oda, de vissza is mutasson. Ezt a lapon belüli logika
alapján döntsük el.
A cím másik változata, amikor egy oldalra vagy
egy teljes URL-re hivatkozunk. Az elõbbit relatív, az utóbbi
abszolút hivatkozásnak nevezzük. Fontos a helyes szintaxis,
sok kellemetlensége támadhat az oldalt böngészõ
látogatónknak, ha erre nem fordítunk figyelmet. Igaz
a mondás, hogy kevés link, kevés gond, sok link, sok
gond. Ez fõleg az abszolút hivatkozásokra igaz. Gondoljuk
csak meg, hogy a WEB egy állandóan változó
világ, s elõfordulhat, hogy a megadott címek már
nem is léteznek.
5.5 A WEBhely felépítése, rendezés.
A téma az alkönyvtárba szervezés problematikáját
veti fel. Hogyan rendezzük a szerverre telepített html oldalakat
és a hozzájuk tartozó képeket. Azért
kell errõl már a készítés során
döntenünk, mert késõbb ennek a logikának
megfelelõen érhetõk el a szerveren oldalaink. Alapvetõen
három lehetõség közül választhatunk.
Az elsõ, amikor minden html oldal és kép ugyanabba
az alkönyvtárba kerül. A Netscape Composer szerkesztõ
sajnos mindig így ment. Tehát ha nem ezt a fájlstruktúrát
választjuk, akkor a Windows jegyzettömbjébe betöltve
a htm lapot, „kézzel" kell a módosításokat
elvégeznünk. A közös alkönyvtár, amikor
csak az index.htm vagy default.htm lapunk „üldögél" egy-két
másik oldallal és képpel, még elfogadható,
áttekinthetõ. A lapok számának növekedésével
a másik két lehetõség között kell
választanunk. Lehet a képeket külön rendezni egy
közös kepek vagy images könyvtárban, és a
többi lap pedig a szülõ könyvtárban kap helyet.
Ha sok oldalon használjuk ugyanazon képeket, akkor ez jónak
tûnik. Ugyancsak jó megoldás, ha téma vagy személyek
szerint rendezzük oldalainkat, így például az
igazgató lapjai lehetnek az igazgato nevû alkönyvtárban.
Figyelnünk kell azonban arra, hogy ebben az esetben minden alkönyvtárban
legyen egy index.htm vagy default.htm oldal - annak függvényében,
hogy szolgáltatónk szerverén melyik az alapértelmezett
- ,ugyanis ha nincs, akkor a böngészõk megjelenítik
az alkönyvtárban található fájlok listáját,
és esetleg a külvilág elõl elrejteni kívánt,
ottfelejtett információk is nyilvánossá válhatnak.
5.6 Telepítés, karbantartás
Elkészültek az oldalak. Szeretnénk a világ
számára elérhetõvé tenni, vagyis telepítenünk
kell a webszerverre. A Sulinet program keretében az iskolák
egy webszerver funkciót is ellátó számítógépet
kaptak, amely az iskola valamelyik számítástechnika
termében található és egy lokális hálózati
szegmens kapcsolódik rá. Ebben az esetben egyszerû
a telepítés, hiszen a rendszergazda által megadott
könyvtárba másolva, a domain név bejegyzése
után máris láthatja a világhálón
„szörfözõk" csapata. Persze a lapot gyorsabban találják
meg, ha az Interneten mûködõ keresõgépekkel
„tudatjuk" oldalaink születését. El kell tehát
látogatnunk néhány ilyen WEB oldalra és ott
a regisztrációs munkát elvégezni.
Elõfordul, hogy az iskola WEB szolgáltatója távol
helyezkedik el és a szolgáltató biztosít helyet
saját szerverén a lapok elhelyezésére. Ekkor
egy másik hálózati protokoll használatával
tudjuk a lapokat elhelyezni. Ez az ún. ftp vagy fájl transfer
protocoll. A Windows95 operációs rendszer tartalmaz egy ilyen
alkalmazást, amelyet egy DOS ablakban megnyitva indíthatunk
el.
A telepítés lépései:
1. ftp program indítása
2. Az OPEN paranccsal és az ftp cím megadásával
a telefonos kapcsolat felvétele.
3. User nevünk és jelszavunk megadásával
bejelentkezés a szerverre.
4. Transzfer elõtt, mivel nem ASCII formátumú
fájlokat küldünk ki kell adni a binary parancsot.
5. A fájlok feltöltése a PUT paranccsal. (
A GET-el letölteni tudunk)
6. A CLOSE paranccsal a transzfer folyamatok zárása.
7. Végül a QUIT paranccsal a kapcsolat megszakítása.
A feltöltést követõen- most már szolgáltatónk
szerverérõl letöltve - ellenõrizzük, hogy
oldalaink úgy töltõdnek-e le böngészõnkbe,
ahogyan azt elképzeltük. Ha minden rendben, akkor elkészült
az iskola WEB hálószeme és elérhetõvé
váltunk a föld bármely pontjáról.
Az elsõ nehézségeken túljutva vár
ránk a karbantartás sokak által elhanyagolt feladata.
Egyes vélemények szerint több millióra tehetõ
azon hálószemek száma az Interneten, amelyet több
mint egy éve nem frissítettek. Ne essünk ebbe a hibába.
Ha idõt szántunk a weblap szerkesztés bizony nem 10
percet igénylõ feladatára, akkor havonta, de legritkábban
kéthavonta frissítsük az információkat.
Ilyenkor csak azokat az oldalakat kell transzferálnunk, amelyek
változtak, ügyelve arra, hogy a hozzá tartozó
képek is felkerüljenek, illetve az elavult szükségtelenek
ne foglalják a helyet feleslegesen.