Kis türelmet...
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>
E-mail: ugyfelszolgalat@network.hu
Kapcsolódó cikkek:
Én is szerkeszthetek saját weboldalt?
Némi ismeret arról a közegről, amit használunk
további weboldal kászítő trükkök, grafikus webszerkesztő
Mit is jelent egy elektronikus levél vagy egy Web oldal címe és hogyan kell ezeket az adatokat értelmezni?