Internet tanfolyam
8. rész

Web oldal készítés

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.

Vissza a tartalomjegyzékhez!