Madarat tolláról, embert Web oldaláról...
Aki követte a múltkori rész tanácsait,
annak bizonyára már készen van az elsô
hipertext dokumentuma. Most, az eddigi tudásunkkal még
kissé fapadosra sikerült Web oldalt képekkel
és hivatkozásokkal egészítjük
ki. Eközben bemutatjuk a HTML nyelvnek azokat az elemeit,
amelyek segítségével olyan dokumentumokat
készíthetünk, melynek részei a világ
távoli gépein találhatók.
Virtuális iránytû
Amikor egy hipertext dokumentumot letölt a böngészô
programunk, elkezdi értelmezni a benne található
címkéket. Ezek mondják meg, hogy a szöveg
egyes részeit milyen betûmérettel, típussal,
színnel jelenítse meg és hogyan helyezze
el a képernyôn. Persze nem nagyon találni
a Web-en olyan oldalt, ami csak száraz leírásokat
tartalmaz, a grafikus internet felület szinte kínálja
a képek, rajzok használatát. Ezeket azonban
nem lehet beletenni a HTML fájlba, hiszen, mint arról
már szó volt, ezek az állományok a
kis méret és gyors letöltés érdekében,
csak szöveges információkat tartalmaznak. A
megoldást az jelenti, hogy a HTML nyelvben van egy olyan
lehetôség, hogy megadjuk azoknak az objektumoknak
a címét, melyeket szeretnénk megjeleníteni
a Web oldalon, és a böngészô program
az adott címrôl tölti le a képeket, rajzokat.
Nem szükséges, hogy ezek a külsô objektumok
ugyanazon a szerveren legyenek, lehetnek ezek a Föld másik
felén is. Ebbôl adódik, hogy pontosan meg
kell tudni határozni, hogy hol keresse a browser a hivatkozásban
szereplô objektumokat. Ehhez a helymeghatározáshoz
az Universal Resource Locator-t (URL) használhatjuk. Az
URL címek általános alakja a következô:
protokoll://host.domain/útvonal/fájlnév
A protokoll határozza meg, milyen felülettel lehet
elérni a szervert. Ennek a helyén állhat
a file, ekkor az objektumot ugyanazon a szerveren kell keresni,
mint ahol a HTML dokumentum van. Ha ftp szerepel az URL cím
elején, akkor a hivatkozás egy anonymus ftp szerverre,
ha gopher, akkor egy gopher szerverre mutat. Leggyakoribb a http
kezdetû URL cím, ez azt jelenti, hogy a hivatkozásban
szereplô objektum egy World Wide Web szerveren található.
A cím további része egyre pontosabban határozza
meg a helyet, egészen addig, míg az objektum pontos
nevéhez nem érünk. A gyakorlatban ez a rendszer
jóval egyszerûbb, mint ahogy a leírásból
látszik. Ha például a Computer Panoráma
logóját szeretnénk elérni, akkor a
megfelelô URL cím így néz ki: http://www.cpanorama.hu/cpan/cp/cplogo.gif
Képek innen, képek onnan
Amikor a Web oldalunkon egy képet helyezünk el, a
<IMG> címkét kell használni. Ennek
a címkének több része is van. A legfontosabb:
megadni a kép URL címét, ezt a SRC="URL
cím" formátumban kell megtenni. A kép
elhelyezésére az ALIGN= utasítást
használhatjuk. Az egyenlôségjel után
szereplô top, left, right szavak határozzák
meg, hogy a képhez tartozó szövegrészt
a böngészô program a kép melyik oldalán
jelenítse meg. Ezek után próbáljuk
meg kiegészíteni a legutóbb elkezdett HTML
dokumentumunkat az alábbi sorral:
<IMG ALIGN=top SRC=" http://www.cpanorama.hu/cpan/cp/cplogo.gif">
A magazin logója máris ott fog tündökölni
Web oldalunk közepén. Vagy talán mégsem?
Az eddig elkészített hipertext dokumentumunk megnézéséhez
nem volt másra szükség, mint egy böngészô
programra. Mivel a HTML fájl nem tartalmazott külsô
hivatkozásokat, ezért nem volt szükségünk
élô internet kapcsolatra. Most azonban, ha nem vagyunk
hozzákapcsolva a világhálóhoz, akkor
a böngészô nem fogja tudni elérni a kép
URL címét és nem fogja tudni letölteni
a CP logót. A megoldás vagy a kapcsolat létrehozása
lehet, vagy az, hogy a saját gépünkön
lévô kép fájllal helyettesítjük
a hivatkozásban szereplô URL címet. Ez utóbbi
esetben az elôbb beírt sort cseréljük
ki a következôre:
<IMG ALIGN=top SRC="valami.gif">
Figyeljünk arra, hogy a valami.gif nevû kép
ugyanabban a könyvtárban legyen, mint ahol a HTML
dokumentumunk van. Ellenkezô esetben meg kell adni a teljes
elérési útvonalat is.
A képek beillesztésénél figyelembe
kell venni néhány fontos dolgot. A böngészô
programok legtöbbje nem ismeri az összes kép
formátumot, ezért érdemes GIF, TIFF vagy
JPEG formátumot használni. Az ilyen típusú
képtárolások komoly tömörítéseket
használnak, így a hálózaton nem kell
hatalmas állományokat mozgatni. A képek méretét
még azzal is csökkenthetjük, hogy kisebb felbontást
használunk, mivel a képernyôn való
megjelentéshez bôségesen elegendô a
75 dpi-s pontsûrûség. Szintén jó
tanács, hogy lehetôség szerint a saját
szerverünkön található képekre
hivatkozzuk, és ne egy, a világ másik végén
található objektumra. Ne sajnáljuk a fáradságot,
töltsük le a kívánt képeket és
tegyük fel oda, ahol a Web oldalunk HTML fájljai is
találhatók. Ezzel kizárjuk annak a lehetôségét,
hogy a távoli hivatkozás megváltozik vagy
éppen nem mûködik és így nem jelennek
meg a képek az oldalunkon.
A HTML ereje
A hipertext dokumentumok legnagyobb vonzereje abban rejlik, hogy
távoli Web oldalakra mutató hivatkozásokat
helyezhetünk el rajta, amelyeket egyetlen egér kattintással
elérhetünk. Ezzel a technikával gyorsan összeállíthatunk
olyan Web oldalakat, melyek az adott témakör minden
részletét tartalmazzák, ha nem is ugyanazon
az oldalon, de egér kattintásnyi távolságban.
A hivatkozások általában valamilyen szövegrészhez
tartoznak, ezek különleges megjelenítésérôl
a böngészô program gondoskodik. Általában
más színnel mutatja azokat a szavakat, amelyekhez
link tartozik, és ha ilyen terület fölé
kerül az egér kurzor, akkor a legtöbb esetben
mutató ujjá változik. A hivatkozás
elhelyezéséhez az <A HREF=..> </A> címke
párt kell használni. Az egyenlôségjel
után idézôjelek között kell megadni
annak a dokumentumnak az URL címét, ahová
ugrani szeretnénk. A nyitó és záró
címke között szereplô szövegrész
lesz az, ami más színnel jelenik meg és amire
kattinthatunk. Egészítsük ki az eddig elkészült
Web oldalunkat egy olyan hivatkozással, amely a Computer
Panoráma Internet oldalára mutat.
<A HREF="http://www.cpanorama.hu">Ugras a CP-hez!</A>
Ha megnézzük böngészô programmal
a dokumentumunkat, láthatjuk, hogy az Ugras a CP-hez! szövegrész
más színnel jelenik meg, és még kattinthatunk
is rá. A kattintás hatására, persze
ha van élô internet kapcsolatunk, azonnal átkerülünk
egy másik Web oldalra, nevezetesen a Computer Panoráma
ottlapjára. Amit a képek esetében elmondtunk,
itt is igaz: ha nincs online kapcsolatunk, akkor is ki tudjuk
próbálni, hogyan mûködnek a linkek. Ehhez
csupán még egy HTML dokumentumot kell létrehozni,
és a hivatkozásnál ennek a fájl nevét
kell beírni. Ezekkel a hivatkozás beszúrásokkal
tudjuk igazán kihasználni a hipertextes állományok
erejét, és az internet szörfözés
határtalan lehetõségeit beleépíteni
a saját magunk készítette Web oldalakba.
Még egy fokozat
Amint, azt már a sorozat múltkori részében
is említettük, vannak olyan grafikus alkalmazások,
amelyek segítségével úgy tudjuk a
dokumentumokat elkészíteni, hogy nem is látunk
közben HTML kódokat. Manapság egyre több
ilyen programot lehet találni a szoftver kínálatban,
és a legtöbb irodai alkalmazás csomag tartalmazza
azt a lehetõséget, hogy a velük készített
dokumentumok, legyenek azok szövegek, táblázatok
vagy grafikák, egyetlen gombnyomással átalakíthatók
HTML formátumra. Akik azonban még nem rendelkeznek
ilyen alkalmazásokkal, vagy jobban szeretik saját
maguk szerkeszteni a forráskódot, azok nagyon sokat
tanulhatnak abból, ha megnézik egy-egy letöltött
Web oldal HTML dokumentumát. Itt például
láthatják azt is, hogy akár a háttér,
akár a szövegek színét megváltoztathatjuk.
Ehhez azonban hexadecimális formában kell megadni,
hogy a három alapszínt, milyen arányban kell
keverni. Így például, ha fekete hátteret
szeretnénk, akkor a HTML dokumentum elejére a
<body bgcolor="#000000">
sort kell írni, ha pedig a szöveg színét
szeretnénk pirosra változtatni, akkor az adott rész
elõtt a
<font color="#ff0000">
bejegyzést kell elhelyezni a dokumentumban. Ahonnan pedig
vissza akarjuk állítani az eredeti szövegszínt,
szúrjunk be egy
</font>
címkét.
Ha már kedvünkre kiszíneztük az oldalunkat,
akkor érdemes még egy látványos lehetõséget
kipróbálni. Készítsünk olyan
linket, hivatkozást, amely nem egy szövegrõl
ugrik, hanem egy képrõl. A példában
az elõbbi Computer Panoráma hivatkozást fogjuk
úgy elkészíteni, hogy a Computer Panoráma
logójára kell kattintani, ahhoz, hogy a magazin
Web oldalára jussunk. A megfelelõ HTML forrás
fájl részlet a következõ:
<A HREF="http://www.cpanorama.hu"><IMG SRC="
http://www.cpanorama.hu/cpan/cp/cplogo.gif"></A>
Elkészült mûvünk azonnal ki is próbálható,
persze csak akkor fog a mintapélda mûködni,
ha van online kapcsolatunk. Ennek hiányában úgy
kell módosítani a HTML kódot, hogy a hivatkozás
Web oldala és a hozzátartozó kép is
a saját gépünkön legyen.