Honlapszerkesztés

Mára a mindennapok része lett az internet, és ezáltal a honlapok fogalma. Nap mint nap látogatunk meg különböző oldalakat, hogy onnan információt szerezzünk, rendeljünk valamit vagy letöltsünk valamilyen adatot. El sem lehetne képzelni enélkül az életünket. De vajon mi hogyan működik ez? Mi történik mikor megjelenik egy honlap? Erről szól ez a cikk…

A WWW, a World Wide Web rövidítése (Világháló, vagy csak egyszerűen Web). Ez egy interneten működő hiperlinkekkel összekötött dokumentumrendszer. Elérni webböngészőkkel lehet. Ezeket a programok megjelenítik a Web egyes dokumentumjait: a honlapokat (weblapokat). Az oldalon megjelenő hiperlinkekkel jeleníthetünk meg egy újabb oldalt.

A Web alapelveit Tim Berners-Lee, a CERN egy munkatársa dolgozta ki 1989-ben. Az eredeti cél az volt, hogy a világszerte elszórt kutatóközpontokat összekösse. 1993. április 30-tól a WWW szabadon használható és ingyenes. Az első magyarországi szerver is ekkor indult: http://www.fsz.bme.hu.

Egy honlap megtekintése vagy bármi más megjelenítése a WWW-en általában vagy egy URL (Uniform Resource Locator, webcím) beírásával kezdődik a böngészőkben, vagy egy hiperlinkre kattintással. Az első lépés az URL cím szervernévre utaló részének IP címre való alakítása. Ez láthatatlanul, a Domain Name System Server-ek (DNS szerver) végzik. Az IP címek globálisan is egyedi „szám“ok (pl.:25.255.0.13). Ezután a böngésző egy TCP (Transmission Control Protocol) kapcsolatot hoz létre az IP címhez tartozó szerverrel.
A következő lépés egy HTTP (Hypertext Transfer Protocol) kérés küldése a webszervernek, ami tartalmaz valamilyen utalást a kért adatokra. Ezután a szerver elküldi a honlapot tartalmazó fájlt, amit értelmez a böngésző. Ezután ha szükség van még valamilyen fájlra (például képek vagy akármi) akkor azokat is lekéri a böngésző.
A böngésző eztuán (vagy akár már a képek lekérése közben) elkezdi megjeleníteni, dekódolni a honlapot. A legtöbb honlap tartalmaz hiperlinkeket, ezáltal egy újabb oldalt, adatot tölthetünk le, és további információkat kaphatunk.

Ez a honlapokat megjelenítő program. Ez a WWW megjelenítéséhez szükséges szerver-kliens kapcsolat kliens része. Ahogy korábban írtam, letölti és megjeleníti a honlapot.
A böngészőknek ismerniük kell különféle leíró szabványokat, hogy a kódolt honlapot értelmezi és megjeleníteni tudják. Ilyen például a HTML, a CSS vagy a JavaScript, de még sorolhatnám a végtelenségig.
A mai programok már azonban sokkal több műveletet végeznek el a háttérben, több adatot mentenek el. Ilyen alapvető dolog a Cache. Ez azt jelenti, hogy nem kell mindent mindig újra letölteni, hiszen a már korábban letöltött képeket elmenti, és csak azt próbálja a program vizsgálni, hogy változott-e az a szerveren. Amennyiben nem, akkor megspórolhatunk egy hosszú letöltési időt.
Ilyen lementett adatok a Sütik (Cookie), amik miniatűr adatcsomagok, amit a böngésző visszaküld a megfelelő szervernek. Ezzel érhető el az, hogy egy honlap „megjegyezze“, hogy mi már mondjuk ott bejelentkeztünk és valamilyen műveletet végrehajtottunk. Ez nagyon hasznos.
Természetesen ezeken az alapvető funkciokón felül ma már rengeteg kényelmi funkciót is találhatunk programjainkban. Ilyen például, hogy a program elmenti az általunk meglátogatott honlapok listáját, így nem kell mindig újra és újra beírni a teljes címét a honlapoknak, hanem a program segít befejezni. A könyvjelzők segítségével elmenthetünk honlapok címét, hogy ne kelljen megjegyezni. A jelszókezelő miatt nincs szükség megjegyezni a honlapokhoz tartozó jelszavakat, mert ezt a böngésző automatikusan kitölti. Vagy akár egy helyesírás ellenörző. Ennek segítségével a gép ellenőrzi a szövegeket amiket beírunk és próbálja javítani hibáinkat, csak úgy, mint egy szövegszerkesztő.
Ám ezek tárháza végtelen, hiszen bárki bármikor gyárthat egy újabb „Plug-in“-t, amit ha feltelepítünk a böngésző mellé, akkor az egy újabb funkcióval bővül.

A böngésző piacban első három legnagyobb részesedésű program:

1. Microsoft Internet Explorer (78.6 %)
2. Mozilla Firefox (15.1 %)
3. Safari (4.5 %)

Ezek 2007 márciusi adatok.

Ez a fogalom két dolgot takarhat:

1. Egy program, amit a kliens felöli kéréseket fogadja, válaszol neki. Kiszolgálóknak is hívják őket, hiszen kiszolgáják a felhasználók kívánságait, és a megfelelő információt rendelkezésre bocsátják.
2. Jelentheti magát a számítógépet, amin fut az előbb leírt program.

Attól függetlenül, hogy rengeteg különböző webszerver program létezik, van néhány alaptulajdonság, amivel biztosan rendelkeznek:

• HTTP: minden webszerver HTTP kéréseket fogadva működik. Kérés jön a hálózatról, és választ küld a kérőnek. Egy ilyen HTTP válasz általában HTML dokumentum, de akármilyen más formátum is lehet (csak a példa okáért: szöveg, kép). Amennyiben valamilyen hiba történik a kérés feldolgozása közben a szervernek képesnek kell lennie valamilyen jelzést küldeni a kérőnek, hogy a felhasználó megérthesse a porblémát. Ez általában egy HTML fájl, ami megpróbálja megmagyarázni a hiba okát.
• Logolás: Általában a webszerverek képesek elmenteni részletes információkat a lekérésekről illetve a válaszokról. Ezeket log fájlokba menti, hogy a szerver karbantartója ezeket utána elolvashassa, elemezze.

A gyakorlatban még néhány funkció nagyon jellemző:

• Hitelesítés: Bizonyos funkciók eléréséhez a szerver kérhet egy felhasználónevet illetve egy jelszót, hogy azt csak azok érhessék el, akik ténylegesen jogosultak.
• Dinamikus tartalmak kezelése: Egyes szerverprogramok képesek dinamikus tartalmat is feldolgozni, így nem csak visszaküldeni az információt, amit rámentetetk, hanem azt feldolgozni, számításokat végezni, stb. Erre különböző nyelvek épülnek. (például: CGI, PHP, ASP, ASP .NET, stb.)
• HTTPS: Ez egy biztonságos HTTP kapcsolatot jelent a szerver és a kliens között. Tehát a küldött adatokat a szerver kódolja, majd a kliens dekódolja.

A szerverek a visszaküldött adatokat vagy a szerver valamilyen adattárolójáról olvassa le, és egy az egybe visszaküldi (ilyenkor statikus szerverről beszélünk), vagy esetleg a mentett adatokból új adatokat generál (ilyenkor pedig dinamikus). A statikus adatok elküldése sokkal gyorsabb, mint egy dinamikus adatot feldolgozni és elküldeni.

A webszerver piacban első három legnagyobb részesedésű program:

1. Apache HTTP Server (58 %)
2. Microsoft IIS (31 %)
3. Sun Java System Webserver (1.6 %)

Ezek 2007 április adatok.

Egy kliens által küldött kérés legegyszerűbb formátumban valahogy így néz ki:

GET /path/file.html HTTP/1.1
Host: www.example.com

(Ez akkor történik, ha mondjuk a következő címet írtuk be a böngészőnkbe: http://www.example.com/path/file.html)
Ezután a webszerver a www.example.com címen a megadott elérési utat hozzáilleszti a szerver root könyvtárához. Ez egy Unix rendszeren általában valami ilyesmi: /var/www/htdocs.
Ezekután már megkapjuk a szerveren a fájl pontos elérhetőségét:
/var/www/htdocs/path/file.html
Innetől a szerver már beolvassa a fájlt és visszajelez a kliens böngészője felé.

A számítástechnika világában mindent valamilyen programnyelvvel, szabvánnyal kell leírnunk ha azt szeretnénk, hogy egy program azt értelmezni tudja. Nincs ez másképp a honlapokkal sem. Két fő kategóriát említenék meg. A statikus és a dinamikus szabványokat.

Hogy mit is jelent ez? Statikus, azaz állandó, és nem változik. Tehát ha valamit leírunk az minden egyes alkalommal ugyanúgy fog megjelenni, a böngészők - optimális esetben - mindig ugyanúgy fogják értelmezni. Erre az első és legfontosabb példa a HTML nyelvezet.

Rövid összefoglalás a fontosabb html elemekről. Egy nagyon egyszerű kis példa rá:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <title>Próba oldal</title>
 </head>
 <body>
  <h1>Ez egy nagyon alap HTML honlap.</h1>
  <p>És van benne egy <a href="http://www.google.com">link</a>.</p>
 </body>
</html>

Ez a nyelv 1993 óta létezik, és azóta is folyamatosan használják. A rövidítés angolul: HyperText Markup Language - magyarra fordítva: Hiperszöveg jelölő nyelv (tudom, hülyén hangzik). Az utolsó frissítése, a HTML 4.01 1999 decemberében jelent meg. Ez az egyszerű leírónyelv alkalmas szövegek megjelenítésére, interaktív űrlapok létrehozására, képek és más objektumok beszúrására. A nyelv „parancsai” tag-ekből épül fel. A legtöbb parancs esetén egy nyitótaget kell írni, majd mögé az adatot és a legvégére egy zárótaget. (<parancs>adat</parancs>) Ezáltal felépítjük a honlap struktúráját, sőt ezt meg is formázhatjuk, noha ezt ma már nem tanácsos. Sokkal inkább érdemes a CSS nyelvet erre. De erről majd csak később. Fontos elmondani erről a nyelvről, hogy ez egy kliens oldali nyelv. Tehát a szerver feladat pusztán a tárolás, illetve az adatok elküldése a kliens gép felé. Az értelmezés az a böngészők feladata. Sok formátumban találkozhatunk a html nyelv részeivel, de az alap kiterjesztések a „.htm” illetve a „.html” Sok különböző bővítése készült el ennek a nyelvnek. Olyan programnyelvek, amivel további elemeket jeleníthetünk meg.

Ahogy azt a neve is mutatja az XHTML nyelvnek bizony rengeteg sok köze van a HTML-hez. Ennek az a magyarázata, hogy a HTML továbbfejlesztett változata az X-es verzió. A neve jelöli, hogy XML-en alapul a nyelv.

Egy kis összefoglaló a css parancsairól.

A rövidítés a Cascadin Style Sheet -et jelöli. Magyarul: Egymásba ágyazott stíluslapok. A CSS nyelv egy kicsit eltér az eddigiektől. Nem képes önálló „működésre”. A nyelvben nem tudunk semmi újat megjeleníteni, pusztán a már valamilyen nyelvvel létrehozott elemek formázását hajthatjuk végre. Így akár egy külön fájlban eltárolhatjuk a formázás részeit. Természetesen nem kötelező a másik fájlba írnunk, írhatjuk a az adatot tartalmazó állományba is. Nagyon hasznos, ha a például HTML-lel készített honlapounknál a CSS-t alkalmazzuk, hisz a forrás sokkal áttekinthetőbbé válhat, illetve a fájlméreteket is lecsökkenthetjük.
A kódot a böngészőnek kell értelmeznie.

Talán nem nehéz kitalálni miben különbözik ez a statikustól. A lényege az, hogy nem mindig ugyanazt kapjuk, mint amit az előző alkalommal. Egyszerű példa gyanánt: kiírja az aktuális időt. Erre HTML-ben nem lennénk képesek.

Ez a nyelv kicsit kilóg a sorból. Hasonlóan a CSS-hez ez is csak kiegészítő nyelv, így önmagában nem létezhet. A forrásban lévő egyes elemekhez hozzárendelhetünk valamilyen kódot, ezáltal a honlap dinamikusabbá válhat. Előnye, hogy kliens oldali nyelv, tehát nem szükséges az oldalt újra letölteni a szerverről ahhoz, hogy lássuk a változást. Biztos mindenki látott már olyat, hogy egy egyszerű honlapon valamire kattintunk, akkor egy menü lenyílik. Ezt általában JavaScripttel valósítják meg. Egyébként a nyelv 1997 óta létezik. Amit még tudni kell, hogy habár elég sok minden megoldható a nyelvvel, csodákat nem várhatunk.
A szkripteket vagy tároljuk a forrással együtt egy fájlban, vagy a CSShez hasonlóan egy másik fájlban (kiterjesztése .js). A kódot a böngésző értelmezi, így semmi extrára nincsen szükségünk. Előfordulhat, hogy egy nagyon régi böngésző még nem ismeri a JavaScript szabványt.

PHP, azaz PHP: HyperText Preprocessor (magyarul talán: PHP: Hiperszöveg előfeldolgozó). A PHP a teljes névben Personal Home Page -ből ered, hiszen először így nevezték el. (Magyarul: Személyes honlap). Ez egy nyílt forráskódú szerveroldali programnyelv. Tehát amikor egy kérés érkezik a szervernek, az lefordítja, hogy mit is kell most éppen megjeleníteni, és azt elküldi a kliensnek, HTML szabványban. Így jelennek meg a PHP oldalak előttünk.
Ennek a nyelvnek, habár sokkal többet tud, mint a JavaScript, van egy hátránya vele szemben. A változáshoz mindig újra kell töltenünk az oldalt. Ez nagyon sokszor zavaró lehet.
Mint említettem sok mindent tud. Tehát rengeteg mindent meg lehet valósítani vele. Ez okozza, hogy igencsak sok oldal használja ezt a nyelvet (mint például ez is). A nyelv követelménye, hogy a szervernek ismernie kell, és rendelkeznie kell egy fordító programmal.
A kódot beleágyazhatjuk egy már meglévő HTML honlapba, csak jelölnünk kell, hogy hol kezdődik és meddig tart a PHP részt. Ezt a <?php és ?> jelekkel tehetjük meg.
A honlaphoz akár adatbázist is rendelhetünk, ami nagyon hasznos (mysql_query() paranccsal). Egy nagyon egyszerű példa:

<p>Ez itt egy PHP példa lesz</p>
<?php
$ido = date ("g:i");
print 'A lekérdezés ideje: '.$ido;
?>

Ami talán ebből nem látszik, de a print (vagy echo) parancs után HTML szabvány szerinti kódot írhatunk.

Ez a ma már Adobe által fejlesztett nyelv nagyon eltér az eddigiektől. Nem is teljes mértékben honlapszerkesztési nyelv, hisz a honlapok világától függetlenül is találkozhatunk vele, de a html nyelvbe, mint egy objektum, beilleszthető. A 8as verziószámig a Macromedia fejlesztette, de a 9-est már az Adobe adta ki nem is olyan régen.
Kliens oldalon értelmezett nyelv, és a többiektől eltérően a böngészők nem képesek egyből értelmezni. Szükség van egy értelmezőre, amit ingyen letölthetünk a www.adobe.com -ról. A dinamikussága sem olyan egyszerű. Egy úgynevezett ActonScript nyelv miatt lesz dinamikus, változó. De még ha ezt nem is használjuk, akkor is egészen más, mint mondjuk a HTML. Az elemek életre kelnek. Mozognak, átalakulnak. A fejlesztő lehetőségei hatalmasak grafikai megvalósítás terén. Ezt segíti a Flash saját fejlesztőkörnyezete. Külön programban kell megrajzolnunk az ábrákat, és nem pedig kódot írnunk. Egy honlapon egyből látszik ha így készült.

To be continued….