Internet tanfolyam
9. rész

Web oldal készítés

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.

Vissza a tartalomjegyzékhez!