HTML - HyperText Markup Language

Előszó

Ez az előszó utólag készült, 2005-ben, a html anyag nagy része viszont a múlt század végén. Ennek megfelelően nem foglalkozik a legújabb dolgokkal. Azt az alapkövetelményt ma is jól szolgálja, hogy a weblapok elsődleges, sőt egyetlen célja valamilyen tartalom közlése. A forma nem lényegtelen, de a tartalom szolgálója, és többet árt, mint használ, ha öncélúvá válik. Új még a leírás végén levő "Utószó".

Hogyan készítsek honlapot ?

• Ha minél kevesebb munkával szeretne eredményre jutni, akkor használjon valamilyen html generáló programot. Ebben az esetben nem kell megismernie a html nyelvet, csak valamennyire a használt programot. Ajánlható a Netscape Composer, aminek a használata hasonló egy grafikus editor (pl. MS-Word) használatáéhoz. De magának az MS-Word-nek is van html generálási lehetősége. Ha így készit html lapokat, gyorsan jut eredményre, de nem fog tudni minden, a html által nyújtott lehetőséget kihasználni.

  Léteznek olyan konvertáló programok, amik több-kevesebb sikerrel konvertálnak más szövegformátumból (pl. Latex, .rtf stb.) html formára.

• Ha "profi" lapokat akar készíteni, akkor mindenképp használjon valamilyen - lehetőleg nem grafikus - editort. (pl. vi, joe, edit, Notepad, stb). Kiindulási lapot előállíthat ebben az esetben is valamilyen "generátor" programmal, vagy kiindulhat egy mintául vett html lapból.

  Ebben az esetben ismernie kell a html nyelvet. A nyelv alapvető lehetőségeinek egy "hogy írjam, hogy néz ki" változata másik lapon található. Azt lehet várni, hogy az ott leírtak nagy részét minden böngészőprogram tudja.

  További formai lehetőség (FRAME-ek használata) a böngészőablak kisebb ablakokra történő felosztását, eredményezi. A felépítés nagyon hasonló a TABLE lehetőséggel történő tagolásra, azzal a különbséggel, hogy a táblázatcelláknak scrollozható ablakok felelnek meg, amiknek a tartalma egymástól függetlenül dinamikusan cserélhető. Két példát láthatunk itt, amik csak abban különböznek, hogy az elsőben a cellák határait elválasztóvonalak mutatják, míg a másodikban nincsenek elválasztóvonalak. (Következmény: A második FRAMESET ablakai nem átméretezhetőek, az elsőéi viszont az elválasztóvonalaknál fogva igen.) Az első változatot egész ablakos változatban is láthatja.

  Így felépített - magyarázatokkal tagolt - lap a "Programozási környezet" tárgynak egy FRAME-ekbe tagolt megjelenítése is.

  Ha még "Javascript programkódot" is használ, akkor (amennyiben a böngészőben engedélyezték a Javascriptet):

  • az ablak teljes egészét a maga céljára használhatja;
  • a felhasználó reakcióitól függő (általánosságban: futási helyzetektől függően más-más) lap ill. információ kerülhet az ablak egy részébe;
  
  Az utóbbiakra egy alkalmazást készítettem, amit, sajnos csak 4-es Netscape-el tud használni. Az alkalmazás egy PUZZLE játék,.

  Rövid, könnyen megérthető kódot tartalmazó, "screen-saver"-szerű html lapot talál, ha ide kattint. (A lap neve: szunet1.htm).

• További lehetőség a html lapon a kliens böngészőjéhez küldött "Javascript" program mellett az ún. "cgi" programok használata. Ezek olyan (pl. c-ben, shell nyelven, awk-ban, perl-ben vagy Java-ban megírt), a html szerveren futó programok, amik a böngésző által küldött felhasználói adatok (FORM-okon kitöltött mezők, kiválasztások) alapján azokhoz passzoló html lapokat generálnak és küldenek vissza a kliensre, sőt sokszor szerveren levő fájlokat is módosítanak. Az utóbbit a veszélyessége miatt sok gépen letiltják - legalább a "mezei felhasználók" számára -, ahogy ez a pandora.inf.elte.hu gépen is történik.

  Felhasználói inputot feldolgozó, html lap generáló "cgi" programokat futtatnak az internetes keresőszerverek. FORM (űrlap) felhasználására mutatok egy olyan - Javascriptet is tartalmazó, magyarázatokkal ellátott - példát, amiben a html lap keresőszervereket "hajt meg", egyszerű (ún. "vak") keresésre.

  Egy másik példa - magyarázatok nélkül - annak a - máshonnan is elérhető - lapnak a vége, ami a html lapokon használható színekkel enged meg egy kis játékot.

• Minél többet használ fel a legújabb html lehetőségekből, annál látványosabb lesz a lapja, de annál kevesebb böngésző tudja kezelni. "Értelmes" kompromisszumot nehéz ajánlani. Ha a tartalom a fontos, és az, hogy minél többen lássák, akkor lehetőleg ne használjunk Javascriptet, mert az még ilyet egyébként tudó böngészőben is letiltható. A FRAME-ek megmutatását már minden grafikus böngészőtől elvárhatjuk. Elvileg - Javascripttel - lekérdezhetjük a böngésző tipusát, verzióját. (Ezen az egyszerűbb vagy régebbi böngészők akár el is eshetnek.)

  Nem javaslom, hogy a lapokra a böngésző típusa, verziója szerinti elágazásokat tegyen, hiszen időben igen gyorsan változnak a verziók. Elképzelhető egy olyan kompromisszum, hogy a lapjainkat két verzióban készítjük, és az indulási lapon a felhasználó választhatja az egyszerűbb megjelenítési formát, ha a másikkal nem boldogult a böngészője.

Hova tegyem, hogy mások is lássák ?

• Egy olyan - állandóan bekapcsolt - gépre, amin fut html szerver.

• A honlapunk szokásos elhelyezése Unix gépen: a $HOME directorynkban felvett public_html nevű aldirectoryba, index.html fájlba.

• Célszerű a gép rendszergazdájától vagy "webmaster"-étől megtudni, hogy nem kell-e inkább valamilyen ettől eltérő helyi szokáshoz alkalmazkodni. Pl. a pandora.inf.elte.hu gépen - biztonsági megfontolásból - a $HOME/public/public_html directoryt kell használni.

• Mindegyik esetben fontos, hogy a létrehozott directoryk és fájlok a külvilág számára "láthatóak" de nem módosíthatóak legyenek.
  Ezt Unixban pl. úgy biztosíthatjuk, hogy valamilyen néven elkészítjük a következő parancsfájlt, és minden html módosítás, új fájl/directory létrehozás után meghívjuk a $HOME/public_html (pandora: $HOME/public/public_html) paraméterrel:

  chmod 755 $1
  cd $1
  for i in *
   do
    if [ -d $i ]
      then $0 $i
      else chmod 644 $i
    fi
   done

  Ha a "chmod 755 $1" helyett "chmod 711 $1"-et ír, akkor megtiltja, hogy a directoryjait kilistázva válasszanak ki azokból valamit. (Előfordul olyan Unix, ami ebben az esetben már a - névvel - kért html lapokat sem mutatja.)

Hogyan készítsem elő a képeket ?

• A (grafikus) böngészők általában "ismerik" a ".gif" ill. ".jpg" formátumú fájlokat.

• Fényképek, képeslapok beszkennelhetők, és ha a szkenner program valamilyen más (pl. ".tif") formájú képfájlt készít, azt átkonvertálhatjuk ".gif" vagy ".jpg" formába. Képkonvertáló program rengeteg van, közte sok szabadon másolható. Linux alatt használhatjuk az "xv" vagy "gimp" programokat.

• Ugyanez mondható el (konvertálni kell) a "Paintbrush"-al készített ".bmp" fájlokról.

• A digitális fényképezőgépek többnyire ".jpg" fájlt készítenek.(A ".gif" formát elvileg - Unisys - szabadalom védi, gyakorlatilag ezzel szinte senki sem törődik.)

• Háttérfájlok, "nyomógombok" beszerezhetők az interneten, sok esetben teljesen legálisan. (Linux alatt használhatja a "gimp" programot díszesebb nyomógomb készítésére. MS-Windows alatt grafikus html elemeket készíthet a - letölthető, nem kommersz célokra szabadon használható - "GIF Construction Set" programmal.)

• Nagy képeket (a KB számít, nem a kép dimenziói) távolról sokszor igen lassan lehet csak letölteni.

• Számtalan program létezik, amivel "mozgóképeket" lehet előállítani. Ezeknek kis kép esetén is igen nagy lehet a helyigénye.

• Végül megemlítem, hogy hangfájlokat is tehetünk a lapjainkra, gyakorlatilag még nem mindenki fogja hallani, akinek szánjuk. A böngészők többnyire csak letölteni tudják az ilyen fájlokat, az elhangzáshoz szükséges programok és hardver kiegészítők sok gépen hiányoznak, és a nem pár másodperces - jó minőségű - hangfájlok nagyok.

Utószó

Ez az utószó készült még 2005-ben (az előszó mellett).

• Mára annyi a weblapkészítő eszköz, hogy Dunát lehetne velük rekeszteni.
• A szabványok és lehetőségek sokat fejlődtek. A leglényegesebb talán a (tkp. még a múlt század végén elterjedt) CSS használat. A lényege a formai elemek bővülése (<style=...>>) és azok egy részének elkülönítése a tartalomtól (a lap <head> részébe vagy külön (.css) lapra. Ezekből is óriási a kínálat, mindenki a magáét tartja a legjobbnak.
  Nagyszámú CSS és Javascript mintát kínál a http://www.dynamicdrive.com lap. Egyet ezek közül itt is kipróbálhat, ha a lap felső bal szélére (egy 5 képpont széles sávba) viszi az egércursort.
• Régimódi lapok modernizálása külön munka nélkül úgy történhet, hogy a html alap stílus elemeket "újradefiniáló" stíluslapot használunk. Erre példa ennek a lapnak az alábbi egyetlen sorral történő bővítése:

  <link rel="stylesheet" type="text/css" href="repose.cx_core.css">

  A stíluslap a href=http://repose.cx/core.css lap másolata, és ez az eredménye (e nélkül a bekezdés nélkül). (A régi - Netscape4-es - Unix böngészőm megvadul a laptól.)
• A MS lényegében maga alá gyűrt mindent, monopolhelyzeténél fogva a böngészőprogramot és annak legtöbb ötletét kitaláló Netscape-et is. A kezükre játszik az is, hogy az emberek belefáradtak abba, hogy sok, a részletekben erősen inkompatibilis böngésző mindegyikéhez hozzáigazítsák a lapjaikat. Aki az övéikhez hasonló weblap készítő eszközt szeretne Linux alatt használni, annak ajánlom a www.nvu.com lapról letölthető programot.
• Ráadásul időközben a böngésző lett sok "kommersz" program felhasználói felülete (mivel kész van, sokat tud, sokan ismerik és mindenütt elérhető). Ez erősebb szabványosítást igényelne, amire van törekvés, de egyúttal az a gond is megvan vele, hogy megszoktuk, hogy a "kicsit hibás, kicsit szabálytalan" lapokat jól mutatják a böngészők, sőt egyes utólag hozott formai szabályok pontos betartása azt eredményezheti, hogy nem tudjuk úgy mutatni a lapjainkat, ahogy azok "szabálytalan" korukban kinéztek.
• A html szabványok gazdája (www.w3c.org) vállalja a weblapok minősítését, ami jó esetben annak az igazolása, hogy valamilyen szabványnak megfelel a lap formája. A minősítés a lényegről (tartalom) természetesen nem mond semmit.
• Hogy segítsem kicsit azt, aki ezirányba menne, elkészítettem egy egyszerű, 3 fájlból álló weblapot
  1. úgy, ahogy szoktam, vagyis ahogy a leírásaim alapján lehet.
  2. úgy, hogy a html 4.01-es szabványnak megfeleljen.
  3. úgy, hogy a xhtml 1.0-es szabványnak megfeleljen.
     Megjegyzés 2005-ből: ezek a lapok 2004-ben még "xhtml 1.1" szerint is "valid" minősítést kaptak. Fogalmam sincs, hogy egy év alatt a szabvány fejlődött-e vagy a szabványügyi hivatal, ezt a "hozzá se nyúlok, mégis elromlik" jelenséget egészen sportszerűtlen dolognak tartom a W3C részéről.
     További megjegyzés 2007.10.04-én: Mostanra a tavaly még "xhtml 1.0" szerint "valid" minta lapjaim is elromlottak. Hogy újra szeresse őket a www.w3c.org, ahhoz az alábbi reklámot kellett a "<html>" helyébe tennem:
         <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
     (Ha legalább valami default értéket ismernének, már egy kicsit szeretném őket.)
  A lapok forráskódjának összehasonlítása mutat valamit a szabványok lényegéből. A lapokon található nyomógombokat a W3C ajánlja arra, hogy egyszerűen ellenőrízhetők legyenek a lapok. (Persze ez reklám is nekik, sok mostanában az ezeket tartalmazó lap. Sokszor odakivánkozik mellé valamilyen "helyesírási hivatal" emblémája is.)