Bevezetés

Töltsük be a számítógépünkre a Netscape vagy az Internet Explorer (vagy más, meglevô) netsurfer programunkat, amit kissé szabadon, de értelemnek megfelelôen böngészônek fogunk nevezni. Bökjük meg az Open gombot és írjuk be az ablakba ezt:

http://www.lib.uni-miskolc.hu/ali

Honlapot intézmények és magánszemélyek egyaránt készítenek. Elôbbiek prospektus és reklám mellett vagy helyett, illetve valamilyen szolgáltatást nyújtva (pl. keresôrendszerek, adattárak); utóbbiak önmaguk, vagy kedvenc dilijük bemutatása céljából. Van honlapja a Földnek, Magyarországnak, újságoknak, focicsapatoknak, a Télapónak és számos rajzfilmhôsnek. A honlap a szigorú hivatalosságtól a korlátlan ôrületig mindent tartalmazhat -- egyfajta önmegvalósítás. Hé világ! Itt a honlapom, nézd! És a világ megnézi!

A honlapot és az elkészítéséhez szükséges segédeszközöket elôször a CERN-ben dolgozták ki. Miért pont az atomtudósok környékén született meg ez a példátlanul népszerű és megállíthatatlanul terjedô eszköz? Ez egy kicsit a véletlen műve.

Valamikor az ôsidôkben (vagyis pár éve -- a számítástechnikában ez nagy idô) már megalkották a Gophert, mint hatékony és könnyen kezelhetô információs rendszert. El is terjedt. Végre elég volt csupán pár billentyű kezelését megtanulni ahhoz, hogy az ember a világ bármely pontjáról információhoz jusson, áttekinthetôen, gyorsan. Ekkor már az Internet egységes egészként jelent meg a felhasználó elôtt. Az, hogy a kért információ milyen gépen, milyen operációs rendszer alatt és a világ melyik pontján van (az átviteli sebességet leszámítva) érdektelenné vált. Gondoljuk meg, mekkora jelentôsége van ennek! Az egész világot "átláthatjuk", nincsenek határok többé!

A CERN tudósai éppoly lusták és válogatósak lehettek, mint bárki más, csak sokkal igényesebbek. A Gophert annak idején Minnesota egyetemén karakteres képernyôkre álmodták meg és csak "unalmas" menüket tartalmazott. Az atomfizikusok meg ábrákat és képeket követeltek. Meg dôlt betűt. S mindenekfelett szívükhöz nôtt a hipertext. Megkapták.

A honlapok a számukra kidolgozott kommunikációs szabványok szerint "közlekednek" az Interneten és ezt értik a World Wide Web böngészôprogramok. A lapok szerkesztô- és kiegészítôjelekkel (leírókkal) ellátott szövegállományok. A leírók szabványa a HTML (HyperText Markup Language).

A HTML egyfajta leírónyelv. Vele a lap megjelenését tudjuk "programozni". A szabvány jelenleg a 3.2-es verziónál tart. Nem célom a "história" ismertetése és nem is a kifejlesztés, hanem a hasznosság alapján választottam ki a fejezetek témáinak sorrendjét, ennek ellenére a 2.0-ás szabvány után bevezetett újításokat -- kevés kivételtôl eltekintve -- csupán extrákként említem. (Az extrákkal nem árt vigyázni, mert nem minden böngészôprogram ismeri fel ezeket, ami miatt olvashatatlanná válhat egyes felhasználók számára a lapunk.)

Nem lesz szó mindenrôl. A cél az, hogy aki olvassa e sorokat, merjen belevágni önállóan is a honlapkészítésbe -- ez nem ördöngôsség! Az alapok elsajátítása után pedig egyet tudok ajánlani: a View/Source gomb szorgos nyomogatását, ha érdekes ötlettel találkozunk barangolásaink során! A HTML lapokban talált megoldások ugyanis közkincsnek számítanak, szabadon felhasználhatók a bennük talált trükkök (a tartalom viszont nem biztos). El is menthetjük a File/Save as/Source kiválasztásával s ebbôl tanulhatunk tovább.

Vágjunk bele!

Mi kell a honlaphoz?

Gép

Internet kapcsolat

www.honlapiskola.hu

Ahhoz, hogy dolgozni tudjunk, be kell jutnunk a hostra. Számos host biztosít anonim, nyilvános hozzáférést, bizonyos szolgáltatások használatára. Ezzel akár az Internet bármely szegletébe is elvitorlázhatunk, saját lap alapításához azonban nem elég. Kell egy

Account

Az account megszerzésének rejtelmei és számos fondorlata romantikus kalandregény témája lehetne, mi most úgy teszünk, mint a matematikusok: "Vegyünk egy accountot!" ;-) Az accounttal együtt jár egy user-név és egy password is. (A password mindig legyen nehezen kitalálható és legalább havonta változtassuk! Az ördög és a hackerek sosem alszanak!)

Tegyük fel, nekünk a Jakab név jutott. Jelentkezzünk be! Valami hasonlót látunk majd:

Welcome at www.honlapiskola.hu

login: jakab
password: ********

jakab@www.honlapiskola.hu

httpd

http://www.honlapiskola.hu

Ideje csinálni valamit, ha már bejelentkeztünk! Kezdjük az elsô kapavágással. Hozzuk létre azt a helyet, ahova a lap kerül! Ez

A public_html könyvtár

mkdir public_html

Elérési jogok

Mit is szeretnénk a lapunkkal? Azt, hogy mindenki olvassa, aki csak erre jár. Azt viszont nem szeretnénk, ha át is írnák, nem azért veszôdünk vele. Tehát írni csak mi írhatjuk. Adjuk ki ezt a UNIX parancsot:

ls -al

total 17
drwxr-xr-x   4 jakab    users        1024 Aug 11 00:02 ./
drwxr-xr-x   8 jakab    users        1024 Jul 24 15:26 ../
drwx------   4 jakab    users          47 Aug 11 00:04 mail/
drwxr-xr-x   4 jakab    users           3 Aug 11 00:05 public_html/
[...]

chmod 755 public_html

chmod 644 index.html

Megjegyzem, azért bátorkodom itt mindig a UNIX operációs rendszert emlegetni, mert a hostok döntô többsége ezzel, vagy ennek valamely elfajzott rokonával üzemel, alapszinten tehát érteniük kell a "szóból"... ;-) (Már megint ez a jel! Mi ez? Smiley. Lesz még...)

Kész a "telek", kezdhetjük építeni a házat. Elôször is lépjünk be a "telekre":

cd public_html

Az index.html

Lássuk!

echo "Under construction!" > index.html

A lap címe

http://www.honlapiskola.hu/~jakab

Az elsô lap

Mivel készítsük?

Tehát elkezdjük a bejárat, azaz az index.html szerkesztését!

Egy HTML lap szerkezete

Fej



Törzs

Mi kerül a fejbe?

Mi kerül a törzsbe?

Ezek után Jakab számára

Az elsô kész lap

Hello! 

Jakab vagyok, most tanulom a honlapkészítés rejtelmeit. 
Hamarosan ez az oldal tele lesz minden széppel és jóval. 

A levélcímem:
jakab@www.honlapiskola.hu

Mi kerüljön az elsô lapra?

Olvasnivalók

Kész szövegek bevágása

 és a végére: 

Olcsó húsnak híg a leve: a preformatted (elôre tördelt) szövegek csúnyácskák és gyanúsan úgy néznek ki, mint egy program forráslistája egy monitoron. Nem csoda, ezt a megoldást pont erre találták ki! A böngészôprogramok ugyanis egyébként figyelmen kívül hagyják az általunk beírt sorvégjeleket és tördelést, öntik a szöveget, ahogy az az ablakba befér. Próbáljuk ki! Egy hosszabb .txt állományt elôször zárjuk a

 és 

Hol az a dal,
  Ami felkavar?
Hol az a dal,
  Ami vigasztal?
Hol az a dal,
  Ami egyszer észrevétlenül elveszett?

Hol az a dal, Ami felkavar? Hol az a dal, Ami vigasztal? Hol az a dal, Ami egyszer észrevétlenül elveszett?

Ugye milyen szép? ;-) Jó, hogy láttuk, mert késôbb, ha valamiért olvashatatlan betűfolyammá válik a lapunk, gyanakodhatunk arra, hogy valahol valamilyen HTML jelet elfelejtettünk!

Az elôre tördelt szövegekkel más baj is van: a böngészô nem mer hozzájuk nyúlni, azaz, ha hosszabb a sor, mint amilyen széles az ablak, akkor nem látjuk az egészet -- tologathatjuk a görgetôsávot oda-vissza. Korlátozhatjuk persze a szélességét, de valaki bizonyosan annál is kisebb ablakot használ, mint amit mi feltételezünk...

Ha viszont programok forráslistáját kell közölnünk, nehogy mást használjunk! Nincs annál reménytelenebb meló, mint egy precíz bekezdésekkel ellátott forrásszöveget újraszerkeszteni! A böngészôk, hogy kihangsúlyozzák, itt valami másról van szó, s nem közönséges szövegrôl, az elôre tördelt részeket más, írógépszerű betűtípussal jelenítik meg.

Az ékezetekrôl még lesz szó, egyelôre csak annyit, hogy megvert a digitális mindenható minket többféle szabvánnyal is, ezek közül a Latin-2 megtűrt a weblapokon (éppen csak), minden más olvashatatlan! Van kiút, látni fogjuk.

Végezetül: nem lebecsülésként írtam az elején azt, hogy "primitív" szövegszerkesztô! Ma ugyanis a WinWord is szövegszerkesztô programnak számít. "Primitív" az a szövegszerkesztô, amelyik bárhol olvasható, szerkesztôjelek nélküli, ún. plain text állományt állít elô. Azaz az állományban csak a szöveg van, semmi más. Nevezhetjük nyers szövegnek is.

Amennyiben nem nyers a szöveg, hanem már szépen tördelt valamelyik nagytudású programmal, akkor lépnek színre a

Konverterek

Figyelem, ez a formátum közönséges halandó számára olvashatatlan! Olyan, mint egy lefordított program, csak itt a vastag betű, dôlt betű, ilyen betű, olyan betű van egységes "nyelvre" fordítva. A lényeg: ezt a formátumot a szövegszerkesztô programunknak ismernie illik! (A WinWord pl. ismeri.)

A már megszerkesztett szöveget tehát ebben a formátumban újra el kell mentenünk. Utána pedig keresni kell egy olyan programot, amelyik .rtf állományból .htm(l) állományt készít. Ilyen az rtftohtm nevű, FTP archívumokból letölthetô shareware program. Használata egyszerű:

rtftohtm valami.rtf

Bevallom, ez nem is baj. A HTML leírások ugyanis csak támpontokat adnak a megjelenítésre és nem definiálják azt szigorúan. Azaz:

A weblap megjelenése a böngészô beállításától is függ, semmi garancia nincs arra, hogy más is azt látja, amit mi!

A weblapon nem lehet cél egy profi képesújság mérethelyes megvalósítása. Kész szövegeink tartalma a lényeg, a formát pedig igazítanunk kell a lehetôségekhez, esetleg

Kézzel szerkesztve

Láttuk már, hogy ezeket az "utasításokat" < és > jelek közé zártuk, ez minden esetben így van. Leírásukhoz kis- és nagybetű egyaránt megfelel, a kisbetű talán kényelmesebb, a nagybetű jobban látszik. Vannak jelek, amik párban állnak (zárni kell ôket), a bezáró egy / jellel többet tartalmaz.

A szöveg bekezdéseinek elhatárolásához a

jelet használjuk. A bekezdéseken belül a szöveget a betűméret és az ablakszélesség figyelembevételével szabadon tördeli a böngészôprogram, ám ennél a jelnél mindenképpen új sort kezd, a két bekezdés közt általában üres sort is hagy.

Ha szükséges, külön is kérhetjük az új sor kezdését (pl. párbeszédeknél) a
jelel. Ez üres sort nem hagy.

Ha a szövegben élesebb elhatárolást szeretnénk, úgy vonalat is húzhatunk a

Egy hosszabb szövegben valószínűleg fejezet és alfejezetcímek is elôfordulnak, ezeket a

,

, ...,

jelekkel emelhetjük ki. Figyelem, ezt a jelzést zárni kell! A

párja a cím végén a

. Az egyes a legnagyobb méretű betűt adja, a hatos a legkisebbet. Maga a szöveg a négyessel egyezô méretű, így az ötös és hatos "címleírót" inkább speciális célra (pl. copyright jelzésére) használjuk.

Az amerikaiak balra igazítják a címeket, ha ez nem tetszik, a

jellel kérhetjük a középreigazítást. Ezt a jelzést is zárni kell! Összevonható, sôt illik is összevonni a címjelzôvel, ekkor így alakul:

és értelemszerűen elég csak így zárni:

.

A szövegen belül vastag és dôlt betűs kiemeléssel élhetünk, erre a és az jelek szolgálnak és ezeket is zárni kell. Ez a két jelzô azonban egyes vélemények szerint kerülendô, ugyanis a HTML filozófiájának ellentmondanak: szigorú utasítást adnak, fizikai leírók és nem "útmutatók". (Valóban, van olyan eset, hogy nincs mód pl. dôlt betűt írni.) Ezért helyettük más, a logikai jelentést jobban leíró jeleket használhatunk. Megerôsíthetjük mondanivalónkat a jelzôvel, hangsúlyt adhatunk neki az jelzôvel, vagy idézhetünk is a jelzôvel. Levélcímünket pedig illik

jelzôk közé zárni -- azaz ez is bezárandó, mint a többi.

Hát ez sok volt így egyszerre! Pedig van még... De inkább nézzük, Jakab lapja hogyan néz ki, feltéve, hogy szereti Koncz Zsuzsát hallgatni:

Hello Mindenki!


Ez itt

Jakab honlapja

Jakab vagyok, most tanulom a honlapkészítés rejtelmeit. 
Hamarosan ez az oldal tele lesz minden széppel és jóval. 

A kedvencem sorait idézem:



Ma már a szívünk helyén kompjuter dobol,

Kiszámított a szenvedély.

Egy új világ helyett csak látványt tervezünk.

A lelkünk hallgat, s csak a pénz beszél.



A levélcímem:


jakab@www.honlapiskola.hu

Ékezetek

A magyar nyelv ékezeteit majdnem szabályosan meg tudjuk adni a HTML karakterleíróival. A majdnem azt jelenti, hogy a készletben nincs hosszú ö és ü. Helyette ô és ű használt, ezek azok a "kalapos" betűk, amelyeket kis jóindulattal elfogadhatunk (a képernyô és a nyomtató karakterkészleteinek magyarra cserélésével a kalapok helyett a rendes hosszú ékezetek is megjeleníthetôk). A lélek nyugalma itt sem teljes, ugyanis a kalapos ô helyett a hullámvonalas is elterjedt -- miért pont ebben lenne egység? (Halkan merem csak megjegyezni, hogy ha már szegény ű kalapos, logikusabbnak tűnik az ô-re is kalapot húzni...)

Minden további szószaporítás helyett itt a táblázat, amellyel akár ékezetmentes billentyűzeten is leírhatjuk azt, hogy:

árvízturô tükörfúrógép
ÁRVÍZTURÔ TÜKÖRFÚRÓGÉP

Ezt a szöveget érdemes megjegyezni! Az összes magyar ékezetes magánhangzót tartalmazza.

Magyar ékezetes betűk HTML leírói:

á	á	Á	Á
é	é	É	É
í	í	Í	Í
ó	ó	Ó	Ó
ö	ö	Ö	Ö
ô	ô	Ô	Ô
o	õ	O	Õ
ú	ú	Ú	Ú
ü	ü	Ü	Ü
u	û	U	Û

Ékezetes szöveget így írni hosszú távon fárasztó, ezért érdemes valami konvertálót beszerezni (pl. az rtftohtm is tudja ezt). Vagy írhatunk Latin-1 vagy Latin-2 karaktereket közvetlenül is (ha tudunk), bár ez nem "sportszerű" (pl. e-mailben elküldve egy ilyen szöveg bizonytalan végeredmenyt ad, és a keresôprogramok sem mind birkóznak meg vele).

Képek

Egy kép felér ezer szóval, tartja a mondás. Ilyen az agyunk, jobban szereti látni a dolgokat. Tudták ezt a HTML kidolgozói is, így lehetôségünk van "feldobni" a lapunkat valamilyen vizuális sokkhatással. ;-) Egy weblap kép nélkül (ma már) elég szegényesen hat.

Képformátumok

Képformátumból is akad pár tucat, szerencsére itt látszik a kiút. A két legelterjedtebb (és mellesleg elég tömör) tárolási szabvány az elfogadott a HTML világában: a GIF és a JP(E)G. (A UNIX miatt az xbm is, de ez lényegtelen.)

A GIF az "öregebb". Annyit érdemes tudni róla, hogy a tömörítô eljárása veszteségmentes, azaz a képben nem jelennek meg hibák a konverzió során. Ebbôl persze következik, hogy tömörségének határai vannak. Mégsem ez a legnagyobb baj, hanem az, hogy csak 256 színt tud. Ezt ugyan nagyobb palettából választhatja ki, de egyszerre akkor is csak ennyi szín lehet fent -- s ez kevés lehet egy finom színátmenetnél... Ábrákhoz, rajzokhoz viszont kitűnô.

A JPEG kimondottan fényképekhez van idomítva. Nagyon tömör, annyira, hogy csal: nem egészen ugyanazt a képet tárolja, mint amit megadtunk neki. Az emberi szem ugyanis toleráns és becsapható. Bizonyos hibákat egyszerűen nem lát meg, ezeket tehát büntetlenül el lehet követni. A JPEG cserébe kis méretet és 24 bites valósághű színvisszaadást biztosít. Jobbat, mint amit a legtöbb monitor valaha is tudni fog... (Rossz paraméterezéssel persze el lehet rontani szemmel láthatóan is a képet.) A JPEG nem jó a rajzokhoz, ott csúnyán hibázik és ehhez képest keveset karcsúsít az állomány méretén (esetleg még növeli is azt).

A trükkös animated GIF az a fajta móka, amikor az állókép megmozdul. A GIF89 tudja ezt, több képet egymásba fonva öt-tíz fázisú "animáció" hozható létre, egyszeri lefutással, vagy végtelen ciklusban (utóbbitól némelyik böngészô összeomlik egy idô után).

Van interlaced GIF is, ez azt jelenti, hogy a kép elôször csak úgy nagyjából jelenik meg, aztán finomodik. Ha épp sietünk, a durva "vázlatból" is eldönthetjük, érdemes-e várnunk a képre -- s ez jó!

Érdekes és gyakran használt lehetôség a transparent GIF, azaz a háttérszín átlátszóvá tétele. Ha a semleges, egyszínű hátteret átlátszóvá alakítjuk, a kép még inkább része lesz a lapnak, a keret nem árulkodik bántón.

Az ismertetett lehetôségeket különféle segédprogramok (pl. whirlgif) képesek megvalósítani. (Lásd a függeléket!)

Ha már kiválasztottuk a képe(ke)t, két lényeges dolog tisztázandó:

A méret és az elhelyezés

Könyörögve kérek mindenkit: böhöm nagy képet NE tegyen fel huszasával a lapjára, mert nincs az a birka, aki türelemmel ki bírná várni! Azaz: mértékletesség!

A kép sem tárolás, sem megjelenés szempontjából ne legyen túl nagy. Egy irgalmatlan "borzalom x rettenet" méretű kép egyszerűen nem fér el az ablakban -- akkor meg mit érünk vele? A legtöbb megjelenítô legfeljebb 640x600 pixel nagyságú (azaz nagyjából az SVGA monitor méretének megfelelô, annál kicsit keskenyebb) ablakkal dolgozik, aki meg Windows alatt nézi, amit néz, az még ennél is kevesebbet lát.

A képet "meg kell komponálni", azaz el kell beszélgetnünk önmagunkkal, hogy kell-e ez a kép egyáltalán, és ha kell, ekkorában kell-e, mert esetleg kisebben is jó. Nem könnyű döntés, a kicsinyítés ugyanis (sajnos) minôségromlással jár. A kép minôsége lehetôleg haladja meg a Junoszty ipari szabvány ;-) követelményeit -- mi tudjuk, mi van a képen, de hátha más nem! Lehet, hogy vágni kell a képbôl, lehet, hogy egy kicsit világosítani, vagy sötétíteni, azaz akad vele munka. Ezt számos programmal el lehet végezni, a függelékben az XV (UNIX), a PhotoStyler (Windows) és a Graphic Workshop (DOS) programokat ismertetem röviden.

A kész képet el kell helyezni a lapon valahogy és valahova. Természetesen csak a törzsben. Figyelem! A kép nem része a dokumentumnak, nem belerakjuk, csak jelezzük, hogy ott lesz. Az elhelyezés a böngészô feladata. Van ennek egy kellemetlen következménye: ha el akarunk "lopni" egy oldalt (miért ne tennénk, hiszen ezt szabad, ha a gazdája nem tiltja), akkor annak képeit külön-külön még le kell szedegetni... A Netscape-ben ezt a jobb egérgombbal a képre kattintva tehetjük meg. Léteznek ügyes segédprogramok, amelyek már képesek minden elemet együtt elmenteni. Mások anyagait azonban nem tulajdoníthatjuk el, azaz egy nekünk tetszô lapot ne tegyünk ki sajátunkként, mert nem illik.

A lapon a képet az leíróval jelezzük. Ez persze csak a legegyszerűbb eset, itt a képállomány ugyanott van, ahol a lap (mert lehet más könyvtárban, de más gépen is!) és semmilyen egyéb igényünk nincs.

Pedig lehetne! Tehetjük a képet balra (alapértelmezés) vagy jobbra. Igazíthatjuk a szöveget a felsô széléhez, az aljához, vagy középre. Ez lényeges, ugyanis a kép egy szövegsor magas a böngészô logikája szerint. A kép mellé több sort írni tehát elsô nekifutásra nem lehet! (Azért van rá megoldás.)

Az elhelyezésre vonatkozó utasítást az img után elhelyezett align= mögé írjuk, mint az angolok: jobbra right, balra left, föl top, le bottom, középre middle. Jakab képe így válik a lap részévé:

Ez a csúnya ember  vagyok én.

Adhatunk a képnek más méretet is, mint amekkora valójában, ezt vagy pixelben (akkor mindig ugyanakkora lesz), vagy százalékban (az ablak méretétôl függ) adjuk meg. Jakabnak igen nagy az arca ;-), úgyhogy javítunk egy picit:

Ez a csúnya ember vagyok én.

Adhatunk a képnek vékony vagy vastag keretet a border= beszúrásával. A keret méretét pixelben adjuk meg, a 10 már szép széles.

Vannak, akik az információs szupersztrádán gyalogriksán közlekednek, grafikus felület nélkül. Ôk a legszebb képünkbôl is csak ennyit látnak:

[IMAGE]

No, ez nem sok. Hogy ôk se maradjanak ki semmibôl és legalább külön letölthessék a képet (erre módjuk van), ha "egyenesben" nem láthatják, az elôbbi kiírást módosíthatjuk az alt= beszúrásával. Az egyenlôségjel mögé rövid magyarázatot írunk:

Holtbiztos, hogy letöltik!... ;-)

A képekkel való játék ezzel persze még nem merült ki. Egy fontos és a lap kinézetét döntôen befolyásoló tényezô

A háttérkép (background)

Itt a kép nem valahova kerül a lapon, hanem a lap "papírja" lesz, erre írunk majd. Olyan, mint egy tapéta, csak nincs neki vége.

Gondoljuk meg, ez mivel jár! A háttérbe álmodott kép (bizony) nem lehet túl éles vagy kontrasztdús. Nem ütheti agyon ugyanis a lapon a szöveget. A böngészôk betűi túl könnyen olvashatalanná válnak... Legyen a kép vagy sötét és írjunk rá fehér vagy pasztellszín betűkkel, vagy legyen világos, amin a sötét "tinta" mutat. Kísérletezni kell.

A háttérkép témája alapvetôen kétféle lehet: vagy egy elmosódott hangulatfestô fénykép, vagy valami imétlôdô ákom-bákom (pl. buborékok, kockás füzetlap, márvány-utánzat). A böngészô veszi ezt a képet és annyiszor teszi egymás mellé és alá, ahányszor a lapon lévô egyéb anyag (képek, szöveg) megköveteli. Ez fényképnél lehet kínos. Ugyanis (megint csak) nem tudjuk, hogy az aki olvassa a lapunkat, mekkora ablakot használ és mekkora betűket (ha kisebbet, mint mi, lehet, hogy nem is tudja a kép miatt elolvasni!). Az általunk feltett fénykép vagy csak félig-negyedéig látszik, vagy kétszer-háromszor is ott van... Nehéz igazán jó hátteret kitalálni! Egy tipp: keressünk olyan képet, amelynek szélei illeszkednek. Azaz a képet önmagához illesztve nem üti a szemünket a határolóvonal. Mindez a probléma a tapéta jellegű kisképeknél nem jelentkezik.

Ha merünk vállalkozni rá, így tehetünk hátteret a lapunk mögé:

A kép ez esetben is a lapunk mellett lapul ugyanabban a könyvtárban, de lehet ez másképp is.

Igen, adós vagyok több magyarázattal is. A text= a szöveg színe, a link= a kapcsolódási pontoké (ezt majd hamar megmagyarázom, mindjárt a következô fejezetben), ha még nem néztük meg, a vlink=, ha már megnéztük és az alink=, amikor épp rákattintunk. A színek megadása a vörös-zöld-kék (RGB) sorrendben hexadecimális kétjegyű számokkal lehetséges. (A függelékben egy kis táblázat segít ezeknek a kódoknak a hétköznapi színekkel való összepárosításában.) Háttere egy lapnak egy lehet, ezért került a törzs kezdôsorába, a body kibôvítéseként ez a pár jelzô. A háttér lehet egyszínű is, ezt a bgcolor= adja meg ugyanitt, szintén RGB kódban. Ez szerepelhet a background= helyett, de mellette is! Utóbbi esetben (fôleg, ha a kép nagy) a megadott háttérszín megjelenik, majd a kép megérkezésekor a képpel felülíródik.

Végül, mert sajnos idetartozik, néhány szó

Az átviteli sebességrôl...

Nincs az a vonal, ami elôbb-utóbb el ne dugulna a forgalomtól. Ekkor pedig egy nagy képet letölteni idegölô dolog. A fejezet elején említett mondás megfordul: ezer szó felér egy képpel, ráadásul gyorsabban átjön a hálózaton.

Kíméljük egymást! Legyen csak annyi képünk, amennyi feltétlenül szükséges (azért a lapunk egyéni arculatát nem kell agyoncsapni!) és ezek legalább tárméretben kicsik legyenek! Ha más megoldás nincs, szedjük több lapra szét az eredetit. Egy lapra 40-60 kbyte-nál több kép csak igen-igen indokolt esetben kerüljön! Számítsunk arra is, hogy (fôleg a tapasztalt barangolók) kikapcsolják a képek letöltését -- azaz a lap megtervezésekor fordítsunk gondot arra, hogy képek nélkül is mutasson valahogy. Számos eset van, amikor ez megoldhatatlan, de amikor van mód rá, legalább akkor tegyük meg. Vagy az alt= segítségével mellékeljünk magyarázatot a képekhez, vagy készítsünk önálló "text only" verziót is a sávszélességben "szegények" számára (ez gyakori megoldás).

Ha valamilyen okból sok kép kell a lapra, akkor is van mód a takarékosságra. Ne magát a képeket tegyük fel, hanem kicsiny ikonokat, s ezek mögé pakoljuk be az egész estét betöltô plakátképeinket. Ennek mikéntjérôl (is) szól a következô fejezet.

---

Elôzô fejezet | Tartalom | Következô fejezet

---

Linkek

Amit eddig tettünk, az alig különbözik egy bármilyen kiadványszerkesztô programmal elôállítható laptól -- sôt igazából azokhoz képest elég szerények a lehetôségek. Van azonban valami, amitôl egy HTML lap életre kel: ezek a kapcsolatok, vagy angol szakszóval a linkek. Lapunkon bárhol elhelyezhetünk linkeket egy-egy szóhoz, mondathoz, akár szövegrészhez vagy képhez kapcsolva, s aki erre rákattint, máris új oldalt kap. Vége a lexikonok "lásd még" utalói után folytatott lapozgatásnak és a szószedet szerinti keresgélésnek, a "lineáris" olvasásnak -- csak egy kattintás az egész. Ez a hipertext.

Persze ezeknek a linkeknek valaminô értelemmel kell bírniuk.

Technikai oldalról a link nem más, mint egy cím, a kapcsolódó anyag (mert az nemcsak egy másik HTML lap lehet) URL-je, azaz hálózati "lelôhelye".

Az URL felépítése

A legegyszerűbb, ha rögtön egy példával kezdjük:

http://www.honlapiskola.hu:8080/~jakab/cdlista.html#koncz

Protokol

A kettôspontig bezárólag tudatjuk, hogy az általunk elérni kívánt anyagot milyen kommunikációs eljárással lehet elérni.

• http
  
  HyperText Transfer Protocol. Ez a honlapok számára kitalált adatcsere mód, szinte mindig ezzel találkozunk majd.
  
  
• gopher
  
  Gopher. A gopher tekinthetô a webvilág ôsének. Itt szigorú menüstruktúrák közt válogathatunk, míg el nem jutunk az anyagunkhoz. Sokkal kevésbé rugalmas, mint a web, ám egy igazán jó gopher még ma is életképes!
  
  
• ftp
  
  File Transfer Protocol. Ez már özönvíz elôtti technológia, de mert az elsô igazi program- és adatkönyvtárak ezzel kezdték, elterjedt. Igazán jó turkálóhelyek léteznek, sôt most is nyílnak ezzel a protokollal. Böngészôvel egész kellemes keresgélni bennük, olyan, mintha egy file-managert (pl. a Norton Commandert) használnánk. (Eredeti formájában iszonyatos. ;-))
  
  
• file
  
  Ez ugyanaz, mint az ftp, csak a saját gépünkön.
  
  
• telnet
  
  Telnet. Ezzel egy gépbe léphetünk be, mintha terminállal dolgoznánk. Van egy-két különleges szolgáltatás, fôleg nagy könyvtárak belsô keresôrendszerei, amelyet így tudunk elérni, de nagyon idegen a web világától, inkább csak a teljesség kedvéért került be. (A böngészôprogramok nem is kezelik egyelôre, hanem egy önálló telnet programot hívnak meg.)
  
  
• mailto
  
  Ez egy hasznos protokol: ha ide kattint valaki, akkor levelet írhat a megfelelô címre. Ha a saját címünk az, akkor nekünk -- egy ilyet illik is feltenni a lapunkra! A folytatása eltér a többitôl és a fenti példától, ugyanis a kettôspont után egy e-mail címet kell írnunk. Jakabé így néz ki:

  A levélcímem:
  
  
  jakab@www.honlapiskola.hu
  
  

  
  
• news
  
  Az Interneten több ezer newsgroup, azaz elektronikus vitafórum létezik. Ezeket is elérhetjük, de igazán ez sem része a webnek. Szintén sajátos megadási módja van:

  news.group
  

  
  
• java
  
  Ez egy új fejlesztés, majd megemlítem, de nem ennek az iskolának az anyaga.

Host

A hostokat már említettük, itt lakik az egyik hoston a mi lapunk is. Kétféle megadási mód van: név vagy IP szám szerinti.

Név szerint pl. a már ismert www.honlapiskola.hu.

IP szám szerint pl. a 193.6.1.39.

Ez utóbbit kerüljük. Csak akkor szükséges, ha a host-nak nincs bejegyzett neve (gyakori kis vagy frissen telepített gépeknél, tehát rákényszerülhetünk).

Port

Általában elhagyható. Ritkán, de elôfordul, hogy a böngészônk magától nem tudja megállapítani, melyik "ajtón" kell belépnie a távoli gépbe. Ekkor a hostnevet (vagy az IP számot) egy kettôsponttal és egy számmal egészítjük ki. Nehéz kideríteni, ha vaktában kell próbálkoznunk (ami elég reménytelen), akkor ezeket a számokat érdemes elôször megpróbálni: 8000, 8080. A szabványos szám ugyanis a 80-as, de új szervereknél megesik, hogy tesztelés vagy más ok miatt nem ezt használják.

Elérési út és állománynév

Kezdjük azzal, hogy ha ide semmit nem adunk meg, akkor a megcímzett gép legfôbb lapjának kell(ene) megjelennie, amely általában az üzemeltetô honlapja. "Társbérlôk" egy / után megadott néven érhetôk el, ha vannak. A felhasználók viszont a ~ jel után a user nevük alapján, azaz Jakab kezdôlapja a ~jakab "útvonalon". Ha e mögé állománynevet nem illesztünk, akkor a megadott útvonal egy könyvtárra mutat (ez esetünkben Jakab public_html könyvtára) és abban az index.html állomány az, ami majd megjelenik. Ez az alapértelmezés. Ezért kellett pont ezt a könyvtárat és állománynevet megadnunk a "tanfolyam" elején.

Kínos, de az ellenség keze ide is betette a lábát. Bizonyos jó marketingpolitikával, ám annál (khmm) erôtlenebb operációs rendszerrel rendelkezô cégek ránk hagyományozták a 8+3 betűs állományneveket. Ekkor az index.html index.htm-mé válik, ami kavarodást okozhat. Ha barátunk lapját nem érjük el, esetleg próbáljuk meg az egyébként nem kötelezô index.html-t index.htm-ként beírni a cím végére! (Vagy esetleg az index.html-t, ha a szolgáltató éppen a 8+3-at tekintette alapértelmezésnek.) Van amikor segít...

Más lapok elérésénél már semmit nem takaríthatunk meg, a teljes utat és az állomány nevét is meg kell adnunk. A példában Jakab cdlista.html állományát címeztük meg.

Kiegészítôk

A # jel után egy HTML lapon belül egy adott részre hivatkozunk, ezt a lap írójának elôre ki kell jelölnie a megfelelô HTML jellel. Hosszú tematikus listáknál például jól jön. Jakab sokféle CD-t hallgat, de nekünk csak Koncz Zsuzsa kell. Tehát megy a végére az, hogy #koncz.

A ? után viszont paramétert ad át a böngészô. Ez már túlmutat azon, amivel mi foglalkozunk, de ha ilyet látunk valahol, érdemes figyelni és találgatni, hogyan is működik.

A link jelölése

Linkre nekünk is szükségünk lesz. Háromféle "távolságra" vethetjük ki a lasszót: távolra, helybe, vagy az oldalon belülre. A linket az leíróval jelezzük és ezt zárni is kell a jelzôvel.

Link távolra

A teljes URL címet meg kell adnunk:

Donald CD-i

Ezzel amerikai Donald barátunk listájára mutató linket helyeztünk el a lapunkban. A lapon a "Donald CD-i" felirat jelenik meg (olyan színben, amilyet a link= vagy a vlink= határoz meg -- alapesetben kéken). Az egeret odairányítva a nyílból kéz lesz, azaz kattinthatunk. Kattintás után érkezik meg Donald barátunk lapja.

Link helybe

Jakab a saját public_html könyvtárán belül az állományok neveivel (és az esetleges alkönyvtárnevekkel kiegészítve) hivatkozhat a saját lapjaira.

A saját CD-im

Jakab a(z index.html) lapjában egy másik, cdlista.html nevű lapjára hivatkozott. Ezt írhatta volna így is:

Koncz Zsuzsa CD-k

Ehhez azonban ezeket a címkéket el kell helyezni. Erre az leíró szolgál, ezt is zárja.

Itt nem, de a linkeknél muszáj valamit a nyitójel és a záró jel közé tenni, mert különben nem lesz mit kattintani!

Link egyébként nem csak HTML lapra, hanem bármi másra is mutathat. A böngészô vagy meg tudja jeleníteni (.txt, .gif, .jpg), vagy át tudja adni valamilyen csatolt segédprogramnak (.mpg-t videolejátszónak, .au-t hanglejátszónak), amennyiben ilyet el tud érni, végsô esetben pedig felajánlja, hogy letölti nekünk a munkakönyvtárunkba, aztán azt csinálunk vele, amit akarunk.

Hova kerülhet link a lapon?

Linket bárhová rakhatunk. Egy szövegbe, egy szóhoz, egy kifejezéshez rendelve.

Jakab vagyok, most tanulom a 
honlapkészítés rejtelmeit. 

Jakab ebben a példában valószínűleg hosszabban értekezik önmagáról a magamrol.html lapon, de ezt csak akkor olvashatjuk el, ha a "Jakab" szóra kattintunk.

Akár egy egész bekezdést is elláthatunk linkkel, ha ennek van valami értelme (pl. egy cikkbôl idézünk röviden, de ezt inkább az idézet végére írt irodalmi hivatkozás pár szavára illesztjük).

Ha valamit listaszerűen oldunk meg, arra van némi plusz segítségünk. Jakab a CD-it így jelöli meg:

Jakab fantasztikus otthoni CD gyűjteménye:

Cseh Tamás
Koncz Zsuzsa
Presser Gábor
Sztevanovity Zorán

A tételek egymás alatt lesznek, kicsit beljebb, mint a lap széle és egy kis tömör ponttal kezdôdnek majd. A bekezdést az

, a pontokat (és az új tétel miatt az új sort) a
• jelzi. Pontozott lista helyett számozottat is kérhetünk az
  leíróval.

  Linket tehetünk képre is. Mondjuk feltettük a lapunkra ôsi és veretes családi címerünket JPEG képként, s azt szeretnénk, hogy az eredeti kutyabôr teljes szövegét elolvashassa az, aki rákattint a címerre. Nézzük:

  A képre kattintva máris jön a kutyabor.html lapunk...

  Érdekes és viszonylag új lehetôség képen belül bizonyos területek kijelölése. Azt szeretnénk például, hogy kedvenc üdülôfalunk, Baltásasszonyfa térképét feltéve a nevezetesebb intézményekrôl (horgásztanya, kocsma) rövid leírást adhatnánk. Kicsit bonyolult, de nem veszélyes.

  Elôször is kell egy baltásasszonyfai térkép mondjuk GIF-ben, ennek mérete pl. 320x200 pixel (nem nagy falu, tömegben nem lehet pihenni!):

  Ebben az új a usemap= jelzés volt. Ez is lehet más lapra, sôt távoli lapra való hivatkozás is, de célszerűbb rögtön helyben elintézni a feldolgozást:
  A shape= megjelöli, hogy milyen alakzatot használunk, de egyelôre ez csak a téglalap (rect) lehet, ennek bal felsô és jobb alsó koordinátáit adjuk meg pixelben. Ezek után a képen ide kattintva a href= után megadott lap hívódik meg, akár egy linkrôl. A nohref sor elhagyható.

  Okos dolog, de ne felejtsük el, hogy aki kép nélkül hívja le ezt az oldalt, az nem tudja használni ezt a lehetôséget! Nyakra-fôre ne éljünk vele, ha pedig mégis kell, akkor találjunk ki valamit szegény karakteres felhasználóknak is -- mondjuk egy sima kis listát a kép alá, ugyanezekkel a lapokkal.

  A végére egy kis fekete leves:

  Gondok a linkekkel

  Sok link, sok gond. Az Internet állandóan átalakul, a szolgáltatások költöznek és megszűnnek, vagy csak átmenetileg bezárnak, s újabbak nyílnak. Aki tehát nagy nekibuzdulással ezer linket szedett össze az oldalára, az nagy munkát szakasztott a saját nyakába: ha nem akar leégni a vakvilágba mutató elavult linkjeivel, azt folyamatosan ellenôriznie és frissítenie kell! Ez pedig sok idôt igényel. Szóval mértékletesség! Tényleg csak oda tegyünk távoli linket, ahova feltétlenül szükséges és idônként ellenôrizzük! Az elsô "not found" még nem jelenti azt, hogy nincs többé a címzett lap, dugulások elôfordulnak. Próbálkozzunk máskor! Egy hete elérhetetlen lap azonban már gyanús, kezdjük el keresni az új címét (ha van még egyáltalán)!

  ---

  Elôzô fejezet | Tartalom | Következô fejezet

  ---

  Szerkezet

  Elôbb-utóbb szükségessé válik egy kis rendrakás. Lapjaink elszaporodnak, képeinkrôl pedig egyre nehezebb lesz kideríteni, melyik laphoz is tartoznak tulajdonképpen. De ezen lehet segíteni.

  Állománynevek, könyvtárak

  Hogyan is válik ôserdôvé egy könyvtár? Eleinte, amikor még csak az index.html lapunk üldögél, esetleg egy-két képpel együtt a public_html könyvtárunkban, még nincs baj.

  Illetve van. Ugyanis ahhoz, hogy a lapunkat a világból olvasni lehessen, meg kell rá adnunk az engedélyt. Igen, errôl már volt szó, egy következményérôl viszont nem. A UNIX logikájából következik, hogy a saját alapkönyvtárunkat, ahová a bejelentkezéskor jutunk, szintén olvasásra elérhetôvé kell tennünk. Azaz, elvileg ezzel lehetôséget adunk rá, hogy ebbe is beleolvassanak idegenek. Akit ez zavar, az alapkönyvtárában ne tartson zűrös anyagokat. (Sôt inkább sehol se.) Ha valamit el akarunk zárni a külvilág elôl, azt külön könyvtárba tegyük. (Persze állományonként is adhatunk vagy visszavonhatunk jogokat, de ez macerás...)

  Egy idô után azonban annyira belejövünk (remélhetôleg) a lapok gyártásába, hogy feltétlenül rendszerezni leszünk kénytelenek. Erre adok néhány tippet.

  Témák szerint csoportosítsunk!

  Tegyük fel, hogy zenérôl, irodalomról és természetjárásról is több lapot követtünk már el. Logikus, hogy ezeket témánként külön könyvtárba tegyük. Használjuk fel azt, hogy az index.html-t külön (általában) nem kell kiírni, így a téma vezetô lapját (de ha csak egy lap az egész, akkor is) index.html néven helyezzük el a megfelelô könyvtárban. A témához tartozó képek és egyéb állományok is ide kerülhetnek.

  Másik megoldás, hogy a téma vezetô lapja a téma könyvtárán kívül, de nevében megegyezôen kerül tárolásra (pl. irodalom.html és irodalom/ könyvtár). Ez akkor tűnik megfelelô megoldásnak, ha a témavezetô lapok megjelenése egységes, pl. ugyanazt a háttérképet használják.

  Ha valamit minden lapon használunk (pl. ikonokat, logókat), azokat szintén érdemes külön könyvtárba gyűjteni. Itt azonban felmerül az a probléma, hogy visszafelé nem lehet hivatkozni a belsô könyvtárból. Ekkor sajnos hosszú, azaz teljes URL-t kell használnunk.

  Hosszú nevek, rövid nevek

  Ma már több operációs rendszer is engedi a hosszú, beszédes állománynevek használatát, bár szóköz, ékezetes betű és írásjelek nem, vagy csak igen körmönfont (s ezért felesleges) módon vethetôk be. A hosszú neveket ettôl függetlenül érdemes alkalmazni.

  Van kivétel. Ha a lapunk, vagy az abból nyíló szöveg, kép, stb. letöltésére komolyan számítunk és szeretnénk is, ez esetben úgy kell tennünk, mint a menekülô elefántcsapatnak. Minden csapatban van egy leglassúbb elefánt, s az egész csapat az ô sebességéhez alkalmazkodik. Esetünkben a leglassúbb elefánt a DOS a maga 3+8 karakteres állományneveivel. Szöveget, képet ezért érdemes még UNIX alatt is a fenti megkötés szerint elnevezni. Ha viszont valami kemény UNIX-os anyagunk van (egy jó C program, egy ügyes script), akkor használjuk csak ki a névadás szabadságát -- ezzel egy DOS-hívô úgysem tudna mit kezdeni. Vigyázzunk arra is, hogy DOS alatt a kisbetű ugyanaz, mint a nagy, a UNIX alatt viszont nem! Aki DOS alapú környezetben dolgozik (a sokak által használt Windows 3.x ilyen!), az letöltéskor csonka, egymást felülíró állományokba futhat, ha nem vagyunk elôzékenyek.

  ---

  Elôzô fejezet | Tartalom | Következô fejezet

  ---

  Extrák

  Még szebb szövegek

  Ha valamit nagyon szeretnénk kiemelni, akkor két lehetôségünk is van: megnövelhetjük (vagy csökkenthetjük) a betűk nagyságát, illetve átszínezhetjük ôket. A kulcsszó a font.

  Átméretezés:

  Ez nagy.Ez kicsi. 
  

  Színezés:

  Ez piros.
  

  Táblázatok

  Ha sok adatot akarunk táblázatokban közölni, akkor azt régebben elôre tördelt szövegként vágtuk be, most viszont van saját, igaz kicsit bonyolult megadási módja:

  A táblázat a jellel kezdôdik és a zárja. Ezen belül a sorokat a