Madarat tolláról, embert Web oldaláról...
Sorozatunk elôzô részeiben alaposan megnéztük, hogyan tudunk az Internet grafikus felületén, a World Wide Web-en barangolni. A passzív nézelôdés mellett, reméljük, hogy sok olvasónknak eszébe jutott, jó lenne egy-egy saját oldallal bõvíteni a világhálót. Sorozatunk mostani részében azt mutatjuk be, hogy minden további segédeszköz, program nélkül is bárki megteheti ezt.
Ahhoz, hogy saját Web oldalainkat a világ minden szegletében láthassák, két dolog szükséges. Elôször el kell készíteni azokat, majd fel kell tölteni egy Internet szerverre. Mindkét feladat egyszeru, hiszen a készítéshez elegendô egy szövegszerkesztô, a felrakáshoz pedig a legtöbb Internet szolgáltató biztosít bizonyos lemezterületet a szerverén, ráadásul az esetek többségében a magán felhasználók részére ez a szolgáltatás ingyenes. Mielôtt közösen elkészítenénk elsô Web oldalunkat, nézzük meg, mit is takar ez a fogalom.
A HTML nyelv
Az Internet grafikus felületét jelentô Web oldalak
nem mások, mint speciális felépítésû,
szöveges dokumentumok. Ezek a dokumentumok HTML (HiperText
Markup Language) nyelven íródnak, ami egyrészt
az oldal szöveges részébôl, másrészt
a megjelenítés stílusát meghatározó
címkékbôl áll. Az ilyen dokumentumoknak
a kiterjesztése HTML, HTM, SHTML. Természetesen
azoknál a rendszereknél, ahol csak a három
karakteres fájl kiterjesztés muködik, a HTM
jelzés használatos. A HTML dokumentumnak megfelelô
Web oldal megjelenítésérôl a böngészô
program fog gondoskodni, így egy több színben
pompázó, számos betutípust használó
oldal letöltése sem tart sokáig, hiszen csak
a formázást elôíró címke
utasításokatés a megjelenítendõ
szöveget kell áthozni a hálózaton. Annak
ellenére, hogy a böngészô programok nagyrészt
egyformán értelmezik a HTML címkéket,
elôfordulhat, hogy különbözô rendszereken
és különbözô browser programokkal
nézve, ugyanaz a Web oldal kissé eltérôen
mutat. Még inkább igaz ez akkor, ha olyan lehetôségeit
is kihasználjuk a HTML nyelvnek, amelyek még viszonylag
újak. Ezeket a címkéket csak a böngészô
programok új változatai fogják tudni értelmezni.
Ha tehát egy olyan Web oldalt szeretnénk készíteni,
amelyet várhatóan mindenki meg tud majd nézni,
akkor szorítkozzunk az alapvetô HTML nyelvjárásra.
Persze akkor sincsen nagy baj, ha újdonsága miatt
vagy a mi gépelési hibánkból egy-egy
címkét nem tud értelmezni a böngészô,
ugyanis ezeket a bejegyzéseket figyelmen kívül
fogja hagyni.
Az elsô Web oldal
A HTML nyelvben használható címkéket
és azok jelentését a legegyszerubben akkor
érthetjük meg, ha megpróbálunk egy saját,
egyszeru Web oldalt elkészíteni. A HTML nyelv címkéinek
legfontosabb tulajdonsága, hogy hegyes nyitó- és
zárójelek között szerepelnek és
mindig párosával fordulnak elo. A záró
címke megegyezik a kezdocímkével, csupán
egy slash jel kerül az elejére. Például
a <H1> címke párja a </H1>. Ennek a
címkének a jelentésére nemsokára
vissza fogunk térni. Az egyetlen olyan címke, amelyiknek
nincsen párja, a bekezdés vagy paragrafus végét
jelzo </P> címke. A címkékrol még
azt is érdemes tudni, hogy a HTML nyelv illetve az értelmezo
böngészo program, nem különbözteti
meg a kis és nagy betuket, tehát egy adott címke
ugyanazt jelenti, csupa kis vagy csupa nagy vagy vegyes betukkel
írva.
Vannak olyan címke párok, amelyeket illik szerepeltetni egy dokumentumban, bár ezek csak a forrás fájl olvashatóságát, érthetoségét javítják. Hiányuk nem okoz gondot a böngészo programnak. Így például érdemes egy <HTML> címkével kezdeni és egy </HTML> címkével befejezni dokumentumot. Szintén érdemes minden hipertext dokumentum elején megadni a dokumentum címét, amely a <TITLE> </TITLE> címkék között szerepel. Ez a cím nem fog a Web oldalon szerepelni, hanem a böngészo program ablakának felso keretében jelenik majd meg. Minden olyan szöveg, amelyik nem hegyes zárójelek között van, látható lesz a Web oldalon, mégpedig az alapértelmezett beállításoknak megfelelo formában. Ezek az alap beállítások határozzák meg a Web oldal hátterének színét (szürke), a szöveg színét (fekete) és méretét. Késobb, ha a szöveg egy részét formázással ki szeretnénk emelni, a megfelelo címkékkel tehetjük meg.
Aki hozzászokott valamilyen szövegszerkesztohöz, annak bizonyára furcsa, hogy a HTML nyelvben hiába hagyunk több helyközt a szavak között, az értelmezéskor ezeket a Web oldal megjeleníto egyetlen szünettel fogja helyettesíteni. Ugyanez igaz a sortörésre is, ezt sem veszi figyelembe a HTML nyelv. A nyelvnek ezt a tulajdonságát arra használhatjuk, hogy a forrás fájlt a jobb olvashatósága érdekében tetszolegesen tördeljük a dokumentumot. Amikor valóban azt szeretnénk, hogy a Web oldalon is új sorba kerüljön egy szövegrész, akkor kell kitenni a paragrafus végét jelzo </P> címkét. Ennyi tudás birtokában már el is készíthetjük az elso Web oldalunkat. Javasoljuk próbálja meg a kedves olvasó beírni egy szövegszerkesztobe a következo sorokat:
<HTML>
<TITLE> Eletem elso Web oldala </TITLE>
Ez a HTML dokumentum egy szovegszerkesztovel keszult.</P>
Osszesen két paragrafusbol all!</P>
</HTML>
A példában nem véletlenül hiányoznak az ékezetes betuk, ezek használata HTML dokumentumban kissé körülményes, ezért még késobb visszatérünk rá. Figyeljünk arra, hogy a szövegszerkeszto ne tegyen a dokumentumhoz semmilyen többlet információt, ezért ha például WinWord-öt használunk, akkor a Mentés másként utasításnál ne felejtsük el megadni a Csak szöveg elnevezésu fájl típust. A fájl kiterjesztése legyen HTML vagy HTM, attól függoen, hogy 32 vagy 16 bites operációs rendszert használunk. Ezek után, ha meg szeretnénk nézni, mit is csináltunk, indítsuk el kedvenc Web böngészo programunkat és nyissuk meg az elobb kimentett fájlt.
A megjeleno Web oldal bizony nem nyerne szépségversenyt, de méltán büszkék lehetünk, hogy minden segédeszköz nélkül készítettük. Érdemes megpróbálni, hogyan tördeli a böngészo program a szöveget, ha változtatjuk az ablak méretet.
Egy kis szépítés
Egy Web oldal akkor éri el célját, akkor
hatásos, ha megfeleloen fel tudja hívni magára
a figyelmet. Erre manapság persze vannak olyan csoda eszközök,
mint a keretek használata, háttérzene alkalmazása
vagy izgo-mozgó Java appletek beszúrása.
Ezeknek a technikáknak az elsajátításáról
számos vastag könyvet írtak már, nem
egy néhány oldalas kedvcsináló feladata
ezek leírása. Ráadásul vannak olyan
programok (Microsoft FrontPage, Adobe PageMill, Corel Web.Master),
amelyek segítségével, a HTML dokumentum szerkezetérol
mit sem sejtve, vizuálisan készíthetjük
el szebbnél szebb Web lapjainkat. A látványos
eszközök használata természetesen a HTML
dokumentum méretét és ezzel együtt az
Inteneten keresztüli letöltés idejét is
jócskán megnöveli.
Mi most maradjunk azoknál a lehetoségeknél,
amelyeket a legszukebb HTML nyelvjárás kínál,
ám amelyekkel látványossá tehetjük
elso Web oldalunkat.
Az dokumentumban található szöveg egyes részeit írhatjuk nagyobb és vastagabb betukkel is. Ehhez az úgynevezett fejléc címkéket használhatjuk. A HTML nyelvben hat különbözo méretu fejlécet alkalmazhatunk. A <H1> </H1> címke közötti szöveg lesz a legnagyobb betuvel megjelenítve és a <H6> </H6> közötti a legkisebbel. Ezt rögtön ki is próbálhatjuk, ha a következo sorokkal kiegészítjük elozo hipertext fájlunkat:
<H1> Ez egy 1-es meretu fejlec</H1>
<H2> Ez egy 2-es meretu fejlec</H2>
<H3> Ez egy 3-as meretu fejlec</H3>
<H4> Ez egy 4-es meretu fejlec</H4>
<H5> Ez egy 5-os meretu fejlec</H5>
<H6> Ez egy 6-os meretu fejlec</H6>
A fájl elmentése (!) után, ha még fut a böngészo programunk, elég a frissítésre szolgáló utasítást kiadni, máris láthatjuk a változást.
Megtehetjük azt is, hogy a szöveg egy kis részét vastag vagy dolt betuvel jelenítjük meg. Ehhez az adott szövegrészt a <B> </B> vagy a <I> </I> címke párok közé kell tenni. Ennek kipróbálásához bovítsük tovább a dokumentumunkat az alábbi sorokkal:
Ebben a paragrafusban szerepelnek <I>dolt betus</I> es <B>vastag betus</B> szovegreszek is.</P>
Azt is megtehetjük, hogy nem egy egész sorban növeljük meg a betuk méretét, azaz nem fejlécet definiálunk, hanem csak egy bizonyos szövegrészt írunk az alapértelmezettnél nagyobb vagy kisebb betukkel. Ilyenkor a <FONT SIZE=+1> </FONT> címkék közé kerülo szöveg lesz kisebb vagy nagyobb, attól függoen, hogy a SIZE= után milyen számot írunk. Próbáljuk ki ezt is:
Ebben a paragrafusban van egy olyan szo, amelyik egyre
<FONT SIZE=+1>n</FONT>
<FONT SIZE=+2>a</FONT>
<FONT SIZE=+3>g</FONT>
<FONT SIZE=+4>y</FONT>
<FONT SIZE=+5>o</FONT>
<FONT SIZE=+6>bb</FONT>
betukkel van irva</P>
A fenti HTML forrás fájl részlet tagolásának a megjelenítéskor nincs semmi jelentosége, csupán a forrás olvashatóságát, megértését javítja.
Sorozatunk mostani részének befejezéséül, nézzük meg, hogyan lehet vezérelni, hogy a böngészo ablakának közepén jelenjen meg egy adott szöveg. A <CENTER> </CENTER> címkék gondoskodnak errol és a középre igazítás dinamikusan változik akkor is, ha változtatjuk a böngészo ablak méretét. A </CENTER> címke egyben egy paragrafus vége címkét is helyettesít. Végezetül írjuk még be elso Web dokumentumunkba, hogy
<CENTER>Hiaba valtozik az ablak merete, ezek a sorok mindig kozepen maradnak!</CENTER>
Legközelebb, szintén a forrás fájl szerkesztésével, azt fogjuk megmutatni, hogyan lehet képeket és más dokumentumokra mutató hipertext hivatkozásokat elhelyezni a Web oldalon.