Hogyan készítsünk saját honlapot a weben?


Megjegyzés: A leírás először a www.niif.hu -n jelent meg
Forrás: http://www.lib.uni-miskolc.hu/ali


Hogyan készítsünk saját honlapot a Weben?

NIIF információs füzetek
II/10

Perlaki Attila
irtpa@gold.uni-miskolc.hu
http://www.lib.uni-miskolc.hu/ali





Tartalom




Elôzô fejezet | Tartalom | Következô
fejezet


Bevezetés

Kellene egy honlap, mert már az összes kollégának van. De
mégis, mi az?

Töltsük be a számítógépünkre a Netscape vagy az Internet Explorer (vagy más,
meglevô) netsurfer programunkat, amit kissé szabadon, de értelemnek
megfelelôen böngészônek fogunk nevezni. Bökjük meg az Open gombot
és írjuk be az ablakba ezt:

http://www.lib.uni-miskolc.hu/ali
Betöltôdött? Nos, ez egy homepage, azaz honlap. Egy lap a több mint
tízmillióból az Interneten. Ez a füzet azoknak készült, akik növelni szeretnék
ezt a számot a saját honlapjukkal.

Honlapot intézmények és magánszemélyek egyaránt készítenek. Elôbbiek
prospektus és reklám mellett vagy helyett, illetve valamilyen szolgáltatást
nyújtva (pl. keresôrendszerek, adattárak); utóbbiak önmaguk, vagy kedvenc
dilijük bemutatása céljából. Van honlapja a Földnek, Magyarországnak,
újságoknak, focicsapatoknak, a Télapónak és számos rajzfilmhôsnek. A honlap a
szigorú hivatalosságtól a korlátlan ôrületig mindent tartalmazhat — egyfajta
önmegvalósítás. Hé világ! Itt a honlapom, nézd! És a világ megnézi!

A honlapot és az elkészítéséhez szükséges segédeszközöket elôször a CERN-ben
dolgozták ki. Miért pont az atomtudósok környékén született meg ez a példátlanul
népszerű és megállíthatatlanul terjedô eszköz? Ez egy kicsit a véletlen műve.

Valamikor az ôsidôkben (vagyis pár éve — a számítástechnikában ez nagy idô)
már megalkották a Gophert, mint hatékony és könnyen kezelhetô információs
rendszert. El is terjedt. Végre elég volt csupán pár billentyű kezelését
megtanulni ahhoz, hogy az ember a világ bármely pontjáról információhoz jusson,
áttekinthetôen, gyorsan. Ekkor már az Internet egységes egészként jelent meg a
felhasználó elôtt. Az, hogy a kért információ milyen gépen, milyen operációs
rendszer alatt és a világ melyik pontján van (az átviteli sebességet leszámítva)
érdektelenné vált. Gondoljuk meg, mekkora jelentôsége van ennek! Az egész
világot “átláthatjuk”, nincsenek határok többé!

A CERN tudósai éppoly lusták és válogatósak lehettek, mint bárki más, csak
sokkal igényesebbek. A Gophert annak idején Minnesota egyetemén karakteres
képernyôkre álmodták meg és csak “unalmas” menüket tartalmazott. Az
atomfizikusok meg ábrákat és képeket követeltek. Meg dôlt betűt. S
mindenekfelett szívükhöz nôtt a hipertext. Megkapták.

A honlapok a számukra kidolgozott kommunikációs szabványok szerint
“közlekednek” az Interneten és ezt értik a World Wide Web
böngészôprogramok. A lapok szerkesztô- és kiegészítôjelekkel (leírókkal)
ellátott szövegállományok. A leírók szabványa a HTML (HyperText Markup
Language).

A HTML egyfajta leírónyelv. Vele a lap megjelenését tudjuk “programozni”. A
szabvány jelenleg a 3.2-es verziónál tart. Nem célom a “história” ismertetése és
nem is a kifejlesztés, hanem a hasznosság alapján választottam ki a fejezetek
témáinak sorrendjét, ennek ellenére a 2.0-ás szabvány után bevezetett újításokat
— kevés kivételtôl eltekintve — csupán extrákként említem. (Az extrákkal nem
árt vigyázni, mert nem minden böngészôprogram ismeri fel ezeket, ami miatt
olvashatatlanná válhat egyes felhasználók számára a lapunk.)

Nem lesz szó mindenrôl. A cél az, hogy aki olvassa e sorokat, merjen
belevágni önállóan is a honlapkészítésbe — ez nem ördöngôsség! Az alapok
elsajátítása után pedig egyet tudok ajánlani: a View/Source gomb szorgos
nyomogatását, ha érdekes ötlettel találkozunk barangolásaink során! A HTML
lapokban talált megoldások ugyanis közkincsnek számítanak, szabadon
felhasználhatók a bennük talált trükkök (a tartalom viszont nem biztos). El is
menthetjük a File/Save as/Source kiválasztásával s ebbôl tanulhatunk
tovább.

Vágjunk bele!





Elôzô fejezet | Tartalom | href=”#2″>Következô fejezet


Mi kell a honlaphoz?

Elôször is egy

Gép

Ha nekifogunk a honlap készítésének, elôször is keresnünk kell egy
gépet, amin majd dolgozni fogunk. A lap építéséhez megfelel egy “mezei” PC is,
kipróbálásához már egy Linuxos vagy Windowsos Netscape, vagy hasonló
böngészôprogram szükséges. Amennyiben a lapunkat ôrzô géppel csak rövid ideig
tudunk dolgozni, pl. azért, mert telefonon át tartjuk rendszeresen a
kapcsolatot, akkor érdemesebb az otthoni gépen megírni és kipróbálni a
lapo(ka)t, majd a kész változatot felküldeni. Ahhoz ugyanis, hogy mások is
megtekinthessék a lapunkat

Internet kapcsolat

szükséges. Ezt minden guru host néven
emlegeti, ez annyit tesz, mint házigazda, s valóban, nála lakik majd a lapunk.
Ennek a gépnek az Interneten ismert címe, sôt szinte mindig neve is van.
Képzeletbeli hostunk hallgasson a
www.honlapiskola.hu
névre! Ez a gép tehát rajta van a Neten, méghozzá a nap mind a huszonnégy
órájában. Kerüljük el a korlátozott nyitvatartással üzemelô hostokat, mert a Net
az egész bolygót magában foglalja és mindig ébren van. Szerény lapunkat pedig
Tokiótól Washingtonig bárhonnan meglátogathatják, mert nincsenek távolságok
ebben a furcsa világban.

Ahhoz, hogy dolgozni tudjunk, be kell jutnunk a hostra. Számos host biztosít
anonim, nyilvános hozzáférést, bizonyos szolgáltatások használatára. Ezzel akár
az Internet bármely szegletébe is elvitorlázhatunk, saját lap alapításához
azonban nem elég. Kell egy

Account

is, amit postafióknak, hozzáférésnek is próbálnak fordítani, de
nem egészen találó. Lényegében arról van szó, hogy a host személyesen ismerjen
minket és biztosítson számunkra egy zugot, ahová virtuális ingóságainkkal
beköltözhetünk.

Az account megszerzésének rejtelmei és számos fondorlata romantikus
kalandregény témája lehetne, mi most úgy teszünk, mint a matematikusok:
“Vegyünk egy accountot!” ;-) Az accounttal együtt jár egy user-név
és egy password is. (A password mindig legyen nehezen kitalálható és
legalább havonta változtassuk! Az ördög és a hackerek sosem alszanak!)

Tegyük fel, nekünk a Jakab név jutott. Jelentkezzünk be! Valami hasonlót
látunk majd:

Welcome at www.honlapiskola.hu

login: jakab
password: ********

Ha ezek után a gép morc módon ki nem dobott minket, akkor valóban van élô
accountunk. Ide akár levelet is kaphatunk, jegyezzük is meg a címünket:
jakab@www.honlapiskola.hu
Kérjünk meg egy ismerôst, aki nem erre a gépre kapott accountot, hogy
küldjön a címünkre levelet! Ha megkapjuk, a host Internet elérése rendben van.
Ezenkívül futnia kell egy

httpd

programnak is. Ezt a host korlátlan ura és parancsolója, a
root (rendszergazda) helyezi üzembe (azaz mi ezzel ne próbálkozzunk) és
ha nem értünk igazán a host operációs rendszeréhez, akkor a legegyszerűbb
ellenôrzési mód a host kezdôlapjának hívása. Az általunk használt böngészôbe
írjuk be új címként:
http://www.honlapiskola.hu
Ha erre megjelenik valami szépséges oldal, nyert ügyünk van (majdnem). Ha
nem, akkor érdeklôdjünk a hoston más userektôl, végsô esetben a roottól, valaki
csak fogja tudni, miért nem működik… Lehet, hogy a httpd program nem fut, de
az is lehet, hogy nincs kezdôlap (az elég szomorú) vagy más címen van (nem “www”
a host neve vagy nem a szokásos “index.html” a kezdôlap címe).

Ideje csinálni valamit, ha már bejelentkeztünk! Kezdjük az elsô kapavágással.
Hozzuk létre azt a helyet, ahova a lap kerül! Ez

A public_html könyvtár

vagy directory, vagy folder, kinek hogy tetszik.
Egy parancs az egész:
mkdir public_html
Ellenôrizni kell az

Elérési jogok

néven ismert szörnyűséget. Arról van szó, hogy a sokak
által használt és a hálózatba kapcsolt gépeken ésszerűen korlátozva van, ki mit
írhat és olvashat, nehogy vicces kedvű t-boyok mások féltve ôrzött állományaiba
kotorjanak bele.

Mit is szeretnénk a lapunkkal? Azt, hogy mindenki olvassa, aki csak erre jár.
Azt viszont nem szeretnénk, ha át is írnák, nem azért veszôdünk vele. Tehát írni
csak mi írhatjuk. Adjuk ki ezt a UNIX parancsot:

ls -al
Válaszként valami ilyet kell kapnunk:
total 17
drwxr-xr-x 4 jakab users 1024 Aug 11 00:02 ./
drwxr-xr-x 8 jakab users 1024 Jul 24 15:26 ../
drwx—— 4 jakab users 47 Aug 11 00:04 mail/
drwxr-xr-x 4 jakab users 3 Aug 11 00:05 public_html/
[…]
A lényeg az, hogy a három darab r és x ott legyen elszórva.
Ha ez nincs így, akkor újabb parancsot kell adnunk:
chmod 755 public_html
Az index.html — és minden “normális” állomány — más értéket kap (nem
tartalmaz x-eket):
chmod 644 index.html
Ha nem vagyunk biztosak a dolgunkban, akkor is kiadhatjuk, baj nem
származik belôle. Ha viszont nincs helyesen beállítva, akkor bár ott van a lap
vagy a kép, mégis láthatatlan marad. A beágyazott kép helyett egy kérdôjel, vagy
valami egyéb jelzés jelenik meg.

Megjegyzem, azért bátorkodom itt mindig a UNIX operációs rendszert emlegetni,
mert a hostok döntô többsége ezzel, vagy ennek valamely elfajzott rokonával
üzemel, alapszinten tehát érteniük kell a “szóból”… ;-) (Már megint ez a jel!
Mi ez? Smiley. Lesz még…)

Kész a “telek”, kezdhetjük építeni a házat. Elôször is lépjünk be a
“telekre”:

cd public_html
Ha bent vagyunk, akkor a ház bejárata

Az index.html

állomány. Egyelôre legyen benne csak annyi, hogy Under
construction!
, azaz magyarul Fejlesztés alatt!

Lássuk!

echo “Under construction!” > index.html
Nocsak, már kész is az elsô lapunk. Nana! Inkább a nulladik. Ellenôrizzük
a hozzáférési jogot (ls -al) és ha megvan a megfelelô számú r és x, akkor

A lap címe

az Interneten:
http://www.honlapiskola.hu/~jakab
Akár meg is nézhetjük.



Elôzô fejezet | Tartalom | href=”#3″>Következô fejezet


Az elsô lap

elkészítéséhez tudnunk kell

Mivel készítsük?

Nem kell ágyúval verébre lôni, eleinte bármilyen
egyszerű karakteres szövegszerkesztô megteszi. UNIX alatt a pico, vagy a
joe (a vi az elborult elmék varázseditora, igazi buherátor nem is
nyúl máshoz, de kezdôknek nem ajánlom); DOS alatt a Norton Editor, vagy
az EDIT is megfelel, illetve Windows alatt a Notepad.
Feltételezem, hogy mindenkinek van kedvence, amit ismer és használ, a
függelékben kettôt röviden ismertetek.

Tehát elkezdjük a bejárat, azaz az index.html szerkesztését!

Egy HTML lap szerkezete

a HTML “nyelv” szabályai szerint így néz ki:
<html>

<head>
Fej
</head>

<body>
Törzs
</body>

</html>


Mi kerül a fejbe?

A fejben a lapra jellemzô, rövid, pár szavas leírást
kell megadnunk. Ez a szöveg a böngészôprogram ablakának tetején fog megjelenni,
illetve a hálózaton üzemelô keresôautomaták is ezt fogják a lap hálózati
címe mellé írni. Meg kell tehát gondolni, mi is kerül ide! Ráadásul ékezetet sem
ajánlott használni, mert nem mindegyik böngészô- és keresôprogram képes azt
helyesen értelmezni. :-(

Mi kerül a törzsbe?

Maga a lap, amit írunk. Az összes szöveg, a képek
helye, miegyéb.

Ezek után Jakab számára

Az elsô kész lap

valahogy így néz ki:
<html>

<head>
<title>Jakab honlapja</title>
</head>

<body>
<pre>

Hello!

Jakab vagyok, most tanulom a honlapkészítés rejtelmeit.
Hamarosan ez az oldal tele lesz minden széppel és jóval.

A levélcímem:
jakab@www.honlapiskola.hu

</pre>
</body>

</html>

Nos, ezzel valóban kész az elsô lapunk! A szöveg szabadon választott.
Lehet játszani. De hamar felmerül a kérdés,

Mi kerüljön az elsô lapra?

Amikor az ember honlapot készít, nyilván
igyekszik bemutatni magát. Ezt számtalan módon meg lehet tenni, ez a korlátlan
önmegvalósítás ideális terepe. Szokásos megoldás egy fényképet kirakni magunkról
és pár alapvetô adatot, de lehet humoros kisregényt írni magunkról fénykép
nélkül, vagy szigorú szakmai önéletrajzot három nyelven, vagy játékos
ákombákomokkal teleaggatni az egész lapot. Mindent lehet. Egy dolgot érdemes
szem elôtt tartani: a lap információs erejét. Érdektelen, nehezen áttekinthetô,
nehezen letöltôdô (azaz nagyon hosszú) lapokról hamar tovalebben az Interneten
bolyongó!



Elôzô fejezet | Tartalom | href=”#4″>Következô fejezet


Olvasnivalók

Lehet tiszta lappal kezdeni a Hálózaton, de ha már egyszer
valamit valamikor leírtunk, nem szívesen pötyögjük be újra. Azaz elôbb-utóbb
elkövetkezik a

Kész szövegek bevágása

a lapba. A legegyszerűbb, ha van egy “primitív”
szövegszerkesztôvel elkészített, általában .txt jelzést viselô állományunk. Ha
nincs benne ékezet (mert mondjuk angol nyelvű), akkor még jobb. Nincs más
dolgunk, mint a szöveg elejére beírni: <pre> és a végére: </pre>.
Ezt a törzsbe beillesztjük és kész. Ugye milyen egyszerű?

Olcsó húsnak híg a leve: a preformatted (elôre tördelt) szövegek
csúnyácskák és gyanúsan úgy néznek ki, mint egy program forráslistája egy
monitoron. Nem csoda, ezt a megoldást pont erre találták ki! A böngészôprogramok
ugyanis egyébként figyelmen kívül hagyják az általunk beírt sorvégjeleket és
tördelést, öntik a szöveget, ahogy az az ablakba befér. Próbáljuk ki! Egy
hosszabb .txt állományt elôször zárjuk a <pre> és
</pre> jelek közé, s nézzük meg:

<pre>
Hol az a dal,
Ami felkavar?
Hol az a dal,
Ami vigasztal?
Hol az a dal,
Ami egyszer észrevétlenül elveszett?
</pre>
…majd töröljük ezt és gyönyörködjünk!

Hol az a dal, Ami felkavar? Hol az a dal, Ami vigasztal? Hol az a dal,
Ami egyszer észrevétlenül elveszett?

Ugye milyen szép? ;-) Jó, hogy láttuk, mert késôbb, ha valamiért
olvashatatlan betűfolyammá válik a lapunk, gyanakodhatunk arra, hogy valahol
valamilyen HTML jelet elfelejtettünk!

Az elôre tördelt szövegekkel más baj is van: a böngészô nem mer hozzájuk
nyúlni, azaz, ha hosszabb a sor, mint amilyen széles az ablak, akkor nem látjuk
az egészet — tologathatjuk a görgetôsávot oda-vissza. Korlátozhatjuk persze a
szélességét, de valaki bizonyosan annál is kisebb ablakot használ, mint amit mi
feltételezünk…

Ha viszont programok forráslistáját kell közölnünk, nehogy mást használjunk!
Nincs annál reménytelenebb meló, mint egy precíz bekezdésekkel ellátott
forrásszöveget újraszerkeszteni! A böngészôk, hogy kihangsúlyozzák, itt valami
másról van szó, s nem közönséges szövegrôl, az elôre tördelt részeket más,
írógépszerű betűtípussal jelenítik meg.

Az ékezetekrôl még lesz szó, egyelôre csak annyit, hogy megvert a digitális
mindenható minket többféle szabvánnyal is, ezek közül a Latin-2 megtűrt a
weblapokon (éppen csak), minden más olvashatatlan! Van kiút, látni fogjuk.

Végezetül: nem lebecsülésként írtam az elején azt, hogy “primitív”
szövegszerkesztô! Ma ugyanis a WinWord is szövegszerkesztô programnak számít.
“Primitív” az a szövegszerkesztô, amelyik bárhol olvasható, szerkesztôjelek
nélküli, ún. plain text állományt állít elô. Azaz az állományban csak a
szöveg van, semmi más. Nevezhetjük nyers szövegnek is.

Amennyiben nem nyers a szöveg, hanem már szépen tördelt valamelyik nagytudású
programmal, akkor lépnek színre a

Konverterek

Annyiféle formátum van már, hogy az elképesztô! Reménytelen
vállalkozás tehát univerzális átalakítót keresni vagy írni. Nem is érdemes.
Léteznek eredményes kísérletek olyan állományformátumra, amely az összes
elképzelhetô szerkesztési lehetôségre felkészült, ilyen például a Rich Text
Format
(.rtf).

Figyelem, ez a formátum közönséges halandó számára olvashatatlan! Olyan, mint
egy lefordított program, csak itt a vastag betű, dôlt betű, ilyen betű, olyan
betű van egységes “nyelvre” fordítva. A lényeg: ezt a formátumot a
szövegszerkesztô programunknak ismernie illik! (A WinWord pl. ismeri.)

A már megszerkesztett szöveget tehát ebben a formátumban újra el kell
mentenünk. Utána pedig keresni kell egy olyan programot, amelyik .rtf
állományból .htm(l) állományt készít. Ilyen az rtftohtm nevű, FTP
archívumokból letölthetô shareware program. Használata egyszerű:

rtftohtm valami.rtf
A program elfogadhatóan dolgozik, amíg valami extra nem bukkan fel a
szövegben (pl. egy szöveggel körülöntött ábra), ezen biztosan elbukik majd.

Bevallom, ez nem is baj. A HTML leírások ugyanis csak támpontokat adnak a
megjelenítésre és nem definiálják azt szigorúan. Azaz:

A weblap megjelenése a böngészô beállításától is függ, semmi garancia
nincs arra, hogy más is azt látja, amit mi!

A weblapon nem lehet cél egy profi képesújság mérethelyes megvalósítása. Kész
szövegeink tartalma a lényeg, a formát pedig igazítanunk kell a lehetôségekhez,
esetleg

Kézzel szerkesztve

Ha üres lappal indítunk, vagy ha már kész anyagot
kell webre hangolni, akkor a megfelelô szerkesztési “utasításokat” magunk is
elhelyezhetjük.

Láttuk már, hogy ezeket az “utasításokat” < és > jelek közé zártuk, ez
minden esetben így van. Leírásukhoz kis- és nagybetű egyaránt megfelel, a
kisbetű talán kényelmesebb, a nagybetű jobban látszik. Vannak jelek, amik párban
állnak (zárni kell ôket), a bezáró egy / jellel többet tartalmaz.

A szöveg bekezdéseinek elhatárolásához a <p> jelet használjuk. A
bekezdéseken belül a szöveget a betűméret és az ablakszélesség
figyelembevételével szabadon tördeli a böngészôprogram, ám ennél a jelnél
mindenképpen új sort kezd, a két bekezdés közt általában üres sort is hagy.

Ha szükséges, külön is kérhetjük az új sor kezdését (pl. párbeszédeknél) a
<br> jelel. Ez üres sort nem hagy.

Ha a szövegben élesebb elhatárolást szeretnénk, úgy vonalat is húzhatunk a
<hr> jelel.

Egy hosszabb szövegben valószínűleg fejezet és alfejezetcímek is
elôfordulnak, ezeket a <h1>, <h2>, …,
<h6> jelekkel emelhetjük ki. Figyelem, ezt a jelzést zárni kell! A
<h1> párja a cím végén a </h1>. Az egyes a legnagyobb
méretű betűt adja, a hatos a legkisebbet. Maga a szöveg a négyessel egyezô
méretű, így az ötös és hatos “címleírót” inkább speciális célra (pl. copyright
jelzésére) használjuk.

Az amerikaiak balra igazítják a címeket, ha ez nem tetszik, a
<center> jellel kérhetjük a középreigazítást. Ezt a jelzést is
zárni kell! Összevonható, sôt illik is összevonni a címjelzôvel, ekkor így
alakul: <h1 align=center> és értelemszerűen elég csak így zárni:
</h1>.

A szövegen belül vastag és dôlt betűs kiemeléssel élhetünk,
erre a <b> és az <i> jelek szolgálnak és ezeket is
zárni kell. Ez a két jelzô azonban egyes vélemények szerint kerülendô, ugyanis a
HTML filozófiájának ellentmondanak: szigorú utasítást adnak, fizikai leírók és
nem “útmutatók”. (Valóban, van olyan eset, hogy nincs mód pl. dôlt betűt írni.)
Ezért helyettük más, a logikai jelentést jobban leíró jeleket használhatunk.
Megerôsíthetjük mondanivalónkat a <strong>
jelzôvel, hangsúlyt adhatunk neki az <em> jelzôvel, vagy
idézhetünk is a <cite> jelzôvel. Levélcímünket pedig
illik <address> jelzôk közé zárni — azaz ez is bezárandó, mint a
többi.

Hát ez sok volt így egyszerre! Pedig van még… De inkább nézzük, Jakab lapja
hogyan néz ki, feltéve, hogy szereti Koncz Zsuzsát hallgatni:

<html>

<head>
<title>Jakab honlapja V2.0</title>
</head>

<body>

Hello Mindenki!<p>

Ez itt

<h1 align=center>Jakab honlapja</h1>

Jakab vagyok, most tanulom a honlapkészítés rejtelmeit.
Hamarosan ez az oldal tele lesz minden széppel és jóval.
<p>
A <strong>kedvencem</strong> sorait idézem:
<p>

<cite>
Ma már a szívünk helyén kompjuter dobol,<br>
Kiszámított a szenvedély.<br>
Egy új világ helyett csak látványt tervezünk.<br>
A lelkünk hallgat, s csak a pénz beszél.
</cite>

<hr>
A levélcímem:<br>
<address>
jakab@www.honlapiskola.hu<br>
</address>

</body>

</html>


Ékezetek

A magyar nyelv ékezeteit majdnem szabályosan meg tudjuk
adni a HTML karakterleíróival. A majdnem azt jelenti, hogy a készletben nincs
hosszú ö és ü. Helyette ô és ű használt, ezek azok a “kalapos”
betűk, amelyeket kis jóindulattal elfogadhatunk (a képernyô és a nyomtató
karakterkészleteinek magyarra cserélésével a kalapok helyett a rendes hosszú
ékezetek is megjeleníthetôk). A lélek nyugalma itt sem teljes, ugyanis a kalapos
ô helyett a hullámvonalas is elterjedt — miért pont ebben lenne egység?
(Halkan merem csak megjegyezni, hogy ha már szegény ű kalapos,
logikusabbnak tűnik az ô-re is kalapot húzni…)

Minden további szószaporítás helyett itt a táblázat, amellyel akár
ékezetmentes billentyűzeten is leírhatjuk azt, hogy:

árvízturô tükörfúrógép
ÁRVÍZTURÔ TÜKÖRFÚRÓGÉP

Ezt a szöveget érdemes megjegyezni! Az összes magyar ékezetes magánhangzót
tartalmazza.

Magyar ékezetes betűk HTML leírói:














    á
    &aacute;
    Á
    &Aacute;
    é
    &eacute;
    É
    &Eacute;
    í
    &iacute;
    Í
    &Iacute;
    ó
    &oacute;
    Ó
    &Oacute;
    ö
    &ouml;
    Ö
    &Ouml;
    ô
    &ocirc;
    Ô
    &Ocirc;
    o
    &otilde;
    O
    &Otilde;
    ú
    &uacute;
    Ú
    &Uacute;
    ü
    &uuml;
    Ü
    &Uuml;
    u
    &ucirc;
    U
    &Ucirc;
Ékezetes szöveget így írni hosszú távon fárasztó,
ezért érdemes valami konvertálót beszerezni (pl. az rtftohtm is tudja ezt). Vagy
írhatunk Latin-1 vagy Latin-2 karaktereket közvetlenül is (ha
tudunk), bár ez nem “sportszerű” (pl. e-mailben elküldve egy ilyen szöveg
bizonytalan végeredmenyt ad, és a keresôprogramok sem mind birkóznak meg vele).



Elôzô fejezet | Tartalom | href=”#5″>Következô fejezet



Képek

Egy kép felér ezer szóval, tartja a mondás. Ilyen az
agyunk, jobban szereti látni a dolgokat. Tudták ezt a HTML kidolgozói is, így
lehetôségünk van “feldobni” a lapunkat valamilyen vizuális sokkhatással. ;-) Egy
weblap kép nélkül (ma már) elég szegényesen hat.

Képformátumok

Képformátumból is akad pár tucat, szerencsére itt látszik
a kiút. A két legelterjedtebb (és mellesleg elég tömör) tárolási szabvány az
elfogadott a HTML világában: a GIF és a JP(E)G. (A UNIX miatt az
xbm is, de ez lényegtelen.)

A GIF az “öregebb”. Annyit érdemes tudni róla, hogy a tömörítô
eljárása veszteségmentes, azaz a képben nem jelennek meg hibák a konverzió
során. Ebbôl persze következik, hogy tömörségének határai vannak. Mégsem ez a
legnagyobb baj, hanem az, hogy csak 256 színt tud. Ezt ugyan nagyobb palettából
választhatja ki, de egyszerre akkor is csak ennyi szín lehet fent — s ez kevés
lehet egy finom színátmenetnél… Ábrákhoz, rajzokhoz viszont kitűnô.

A JPEG kimondottan fényképekhez van idomítva. Nagyon tömör, annyira,
hogy csal: nem egészen ugyanazt a képet tárolja, mint amit megadtunk neki. Az
emberi szem ugyanis toleráns és becsapható. Bizonyos hibákat egyszerűen nem lát
meg, ezeket tehát büntetlenül el lehet követni. A JPEG cserébe kis méretet és 24
bites valósághű színvisszaadást biztosít. Jobbat, mint amit a legtöbb monitor
valaha is tudni fog… (Rossz paraméterezéssel persze el lehet rontani szemmel
láthatóan is a képet.) A JPEG nem jó a rajzokhoz, ott csúnyán hibázik és ehhez
képest keveset karcsúsít az állomány méretén (esetleg még növeli is azt).

A trükkös animated GIF az a fajta móka, amikor az állókép megmozdul. A
GIF89 tudja ezt, több képet egymásba fonva öt-tíz fázisú “animáció” hozható
létre, egyszeri lefutással, vagy végtelen ciklusban (utóbbitól némelyik böngészô
összeomlik egy idô után).

Van interlaced GIF is, ez azt jelenti, hogy a kép elôször csak úgy
nagyjából jelenik meg, aztán finomodik. Ha épp sietünk, a durva “vázlatból” is
eldönthetjük, érdemes-e várnunk a képre — s ez jó!

Érdekes és gyakran használt lehetôség a transparent GIF, azaz a
háttérszín átlátszóvá tétele. Ha a semleges, egyszínű hátteret átlátszóvá
alakítjuk, a kép még inkább része lesz a lapnak, a keret nem árulkodik bántón.

Az ismertetett lehetôségeket különféle segédprogramok (pl. whirlgif) képesek
megvalósítani. (Lásd a függeléket!)

Ha már kiválasztottuk a képe(ke)t, két lényeges dolog tisztázandó:

A méret és az elhelyezés

Könyörögve kérek mindenkit: böhöm nagy képet
NE tegyen fel huszasával a lapjára, mert nincs az a birka, aki türelemmel
ki bírná várni! Azaz: mértékletesség!

A kép sem tárolás, sem megjelenés szempontjából ne legyen túl nagy. Egy
irgalmatlan “borzalom x rettenet” méretű kép egyszerűen nem fér el az
ablakban — akkor meg mit érünk vele? A legtöbb megjelenítô legfeljebb 640×600
pixel nagyságú (azaz nagyjából az SVGA monitor méretének megfelelô, annál kicsit
keskenyebb) ablakkal dolgozik, aki meg Windows alatt nézi, amit néz, az még
ennél is kevesebbet lát.

A képet “meg kell komponálni”, azaz el kell beszélgetnünk önmagunkkal, hogy
kell-e ez a kép egyáltalán, és ha kell, ekkorában kell-e, mert esetleg kisebben
is jó. Nem könnyű döntés, a kicsinyítés ugyanis (sajnos) minôségromlással jár. A
kép minôsége lehetôleg haladja meg a Junoszty ipari szabvány ;-) követelményeit
— mi tudjuk, mi van a képen, de hátha más nem! Lehet, hogy vágni kell a képbôl,
lehet, hogy egy kicsit világosítani, vagy sötétíteni, azaz akad vele munka. Ezt
számos programmal el lehet végezni, a függelékben az XV (UNIX), a PhotoStyler
(Windows) és a Graphic Workshop (DOS) programokat ismertetem röviden.

A kész képet el kell helyezni a lapon valahogy és valahova. Természetesen
csak a törzsben. Figyelem! A kép nem része a dokumentumnak, nem
belerakjuk, csak jelezzük, hogy ott lesz. Az elhelyezés a böngészô feladata. Van
ennek egy kellemetlen következménye: ha el akarunk “lopni” egy oldalt (miért ne
tennénk, hiszen ezt szabad, ha a gazdája nem tiltja), akkor annak képeit
külön-külön még le kell szedegetni… A Netscape-ben ezt a jobb egérgombbal a
képre kattintva tehetjük meg. Léteznek ügyes segédprogramok, amelyek már képesek
minden elemet együtt elmenteni. Mások anyagait azonban nem tulajdoníthatjuk el,
azaz egy nekünk tetszô lapot ne tegyünk ki sajátunkként, mert nem illik.

A lapon a képet az <img src=”valami.gif”> leíróval jelezzük. Ez
persze csak a legegyszerűbb eset, itt a képállomány ugyanott van, ahol a lap
(mert lehet más könyvtárban, de más gépen is!) és semmilyen egyéb igényünk
nincs.

Pedig lehetne! Tehetjük a képet balra (alapértelmezés) vagy jobbra.
Igazíthatjuk a szöveget a felsô széléhez, az aljához, vagy középre. Ez lényeges,
ugyanis a kép egy szövegsor magas a böngészô logikája szerint. A kép
mellé több sort írni tehát elsô nekifutásra nem lehet! (Azért van rá megoldás.)

Az elhelyezésre vonatkozó utasítást az img után elhelyezett
align= mögé írjuk, mint az angolok: jobbra right, balra
left, föl top, le bottom, középre middle. Jakab képe
így válik a lap részévé:

Ez a csúnya ember <img align=bottom src=”jakabarc.jpg”> vagyok én.
Adhatunk a képnek más méretet is, mint amekkora valójában, ezt vagy
pixelben (akkor mindig ugyanakkora lesz), vagy százalékban (az ablak méretétôl
függ) adjuk meg. Jakabnak igen nagy az arca ;-), úgyhogy javítunk egy picit:
Ez a csúnya ember <img align=bottom src=”jakabarc.jpg”
width=20% height=20%>vagyok én.
Adhatunk a képnek vékony vagy vastag keretet a border=
beszúrásával. A keret méretét pixelben adjuk meg, a 10 már szép széles.

Vannak, akik az információs szupersztrádán gyalogriksán közlekednek, grafikus
felület nélkül. Ôk a legszebb képünkbôl is csak ennyit látnak:

[IMAGE]
No, ez nem sok. Hogy ôk se maradjanak ki semmibôl és legalább külön
letölthessék a képet (erre módjuk van), ha “egyenesben” nem láthatják, az elôbbi
kiírást módosíthatjuk az alt= beszúrásával. Az egyenlôségjel mögé
rövid magyarázatot írunk:
<img src=”cindycra.jpg” alt=”Cindy Crawford in action…”>
Holtbiztos, hogy letöltik!… ;-)

A képekkel való játék ezzel persze még nem merült ki. Egy fontos és a lap
kinézetét döntôen befolyásoló tényezô

A háttérkép (background)

Itt a kép nem valahova kerül a lapon, hanem a
lap “papírja” lesz, erre írunk majd. Olyan, mint egy tapéta, csak nincs neki
vége.

Gondoljuk meg, ez mivel jár! A háttérbe álmodott kép (bizony) nem lehet túl
éles vagy kontrasztdús. Nem ütheti agyon ugyanis a lapon a szöveget. A böngészôk
betűi túl könnyen olvashatalanná válnak… Legyen a kép vagy sötét és írjunk rá
fehér vagy pasztellszín betűkkel, vagy legyen világos, amin a sötét “tinta”
mutat. Kísérletezni kell.

A háttérkép témája alapvetôen kétféle lehet: vagy egy elmosódott
hangulatfestô fénykép, vagy valami imétlôdô ákom-bákom (pl. buborékok, kockás
füzetlap, márvány-utánzat). A böngészô veszi ezt a képet és annyiszor teszi
egymás mellé és alá, ahányszor a lapon lévô egyéb anyag (képek, szöveg)
megköveteli. Ez fényképnél lehet kínos. Ugyanis (megint csak) nem tudjuk, hogy
az aki olvassa a lapunkat, mekkora ablakot használ és mekkora betűket (ha
kisebbet, mint mi, lehet, hogy nem is tudja a kép miatt elolvasni!). Az általunk
feltett fénykép vagy csak félig-negyedéig látszik, vagy kétszer-háromszor is ott
van… Nehéz igazán jó hátteret kitalálni! Egy tipp: keressünk olyan képet,
amelynek szélei illeszkednek. Azaz a képet önmagához illesztve nem üti a
szemünket a határolóvonal. Mindez a probléma a tapéta jellegű kisképeknél nem
jelentkezik.

Ha merünk vállalkozni rá, így tehetünk hátteret a lapunk mögé:

<body background=”teglak.gif” text=ffffff link=aaffff vlink=88ffff
alink=00ffff>
A kép ez esetben is a lapunk mellett lapul ugyanabban a könyvtárban, de
lehet ez másképp is.

Igen, adós vagyok több magyarázattal is. A text= a szöveg színe, a
link= a kapcsolódási pontoké (ezt majd hamar megmagyarázom, mindjárt a
következô fejezetben), ha még nem néztük meg, a vlink=, ha már megnéztük
és az alink=, amikor épp rákattintunk. A színek megadása a vörös-zöld-kék
(RGB) sorrendben hexadecimális kétjegyű számokkal lehetséges. (A
függelékben egy kis táblázat segít ezeknek a kódoknak a hétköznapi színekkel
való összepárosításában.) Háttere egy lapnak egy lehet, ezért került a törzs
kezdôsorába, a body kibôvítéseként ez a pár jelzô. A háttér lehet
egyszínű is, ezt a bgcolor= adja meg ugyanitt, szintén RGB kódban. Ez
szerepelhet a background= helyett, de mellette is! Utóbbi esetben (fôleg,
ha a kép nagy) a megadott háttérszín megjelenik, majd a kép megérkezésekor a
képpel felülíródik.

Végül, mert sajnos idetartozik, néhány szó

Az átviteli sebességrôl…

Nincs az a vonal, ami elôbb-utóbb el ne
dugulna a forgalomtól. Ekkor pedig egy nagy képet letölteni idegölô dolog. A
fejezet elején említett mondás megfordul: ezer szó felér egy képpel, ráadásul
gyorsabban átjön a hálózaton.

Kíméljük egymást! Legyen csak annyi képünk, amennyi feltétlenül szükséges
(azért a lapunk egyéni arculatát nem kell agyoncsapni!) és ezek legalább
tárméretben kicsik legyenek! Ha más megoldás nincs, szedjük több lapra szét az
eredetit. Egy lapra 40-60 kbyte-nál több kép csak igen-igen indokolt esetben
kerüljön! Számítsunk arra is, hogy (fôleg a tapasztalt barangolók) kikapcsolják
a képek letöltését — azaz a lap megtervezésekor fordítsunk gondot arra, hogy
képek nélkül is mutasson valahogy. Számos eset van, amikor ez megoldhatatlan, de
amikor van mód rá, legalább akkor tegyük meg. Vagy az alt= segítségével
mellékeljünk magyarázatot a képekhez, vagy készítsünk önálló “text only
verziót is a sávszélességben “szegények” számára (ez gyakori megoldás).

Ha valamilyen okból sok kép kell a lapra, akkor is van mód a takarékosságra.
Ne magát a képeket tegyük fel, hanem kicsiny ikonokat, s ezek mögé
pakoljuk be az egész estét betöltô plakátképeinket. Ennek mikéntjérôl (is) szól
a következô fejezet.




Elôzô fejezet | Tartalom | href=”#6″>Következô fejezet


Linkek

Amit eddig tettünk, az alig különbözik egy bármilyen
kiadványszerkesztô programmal elôállítható laptól — sôt igazából azokhoz képest
elég szerények a lehetôségek. Van azonban valami, amitôl egy HTML lap életre
kel: ezek a kapcsolatok, vagy angol szakszóval a linkek. Lapunkon bárhol
elhelyezhetünk linkeket egy-egy szóhoz, mondathoz, akár szövegrészhez vagy
képhez kapcsolva, s aki erre rákattint, máris új oldalt kap. Vége a lexikonok
“lásd még” utalói után folytatott lapozgatásnak és a szószedet szerinti
keresgélésnek, a “lineáris” olvasásnak — csak egy kattintás az egész. Ez a
hipertext.

Persze ezeknek a linkeknek valaminô értelemmel kell bírniuk.

Technikai oldalról a link nem más, mint egy cím, a kapcsolódó anyag (mert az
nemcsak egy másik HTML lap lehet) URL-je, azaz hálózati “lelôhelye”.

Az URL felépítése

A legegyszerűbb, ha rögtön egy példával kezdjük:
http://www.honlapiskola.hu:8080/~jakab/cdlista.html#koncz

Protokol

A kettôspontig bezárólag tudatjuk, hogy az általunk elérni
kívánt anyagot milyen kommunikációs eljárással lehet elérni.

  • http

    HyperText Transfer Protocol. Ez a honlapok számára
    kitalált adatcsere mód, szinte mindig ezzel találkozunk majd.


  • gopher

    Gopher. A gopher tekinthetô a webvilág ôsének. Itt
    szigorú menüstruktúrák közt válogathatunk, míg el nem jutunk az anyagunkhoz.
    Sokkal kevésbé rugalmas, mint a web, ám egy igazán jó gopher még ma is
    életképes!


  • ftp

    File Transfer Protocol. Ez már özönvíz elôtti technológia,
    de mert az elsô igazi program- és adatkönyvtárak ezzel kezdték, elterjedt.
    Igazán jó turkálóhelyek léteznek, sôt most is nyílnak ezzel a protokollal.
    Böngészôvel egész kellemes keresgélni bennük, olyan, mintha egy file-managert
    (pl. a Norton Commandert) használnánk. (Eredeti formájában iszonyatos.
    ;-))


  • file

    Ez ugyanaz, mint az ftp, csak a saját gépünkön.


  • telnet

    Telnet. Ezzel egy gépbe léphetünk be, mintha
    terminállal dolgoznánk. Van egy-két különleges szolgáltatás, fôleg nagy
    könyvtárak belsô keresôrendszerei, amelyet így tudunk elérni, de nagyon idegen a
    web világától, inkább csak a teljesség kedvéért került be. (A böngészôprogramok
    nem is kezelik egyelôre, hanem egy önálló telnet programot hívnak meg.)


  • mailto

    Ez egy hasznos protokol: ha ide kattint valaki, akkor
    levelet írhat a megfelelô címre. Ha a saját címünk az, akkor nekünk — egy ilyet
    illik is feltenni a lapunkra! A folytatása eltér a többitôl és a fenti példától,
    ugyanis a kettôspont után egy e-mail címet kell írnunk. Jakabé így néz ki:
    A levélcímem:<br>
    <address>
    <a href=”mailto:jakab@www.honlapiskola.hu”>jakab@www.honlapiskola.hu</a>
    </address>


  • news

    Az Interneten több ezer newsgroup, azaz elektronikus
    vitafórum létezik. Ezeket is elérhetjük, de igazán ez sem része a webnek.
    Szintén sajátos megadási módja van:
    <a href=”news:news.group”>news.group</a>


  • java

    Ez egy új fejlesztés, majd megemlítem, de nem ennek az
    iskolának az anyaga.

Host

A hostokat már említettük, itt lakik az egyik hoston a mi lapunk
is. Kétféle megadási mód van: név vagy IP szám szerinti.

Név szerint pl. a már ismert www.honlapiskola.hu.

IP szám szerint pl. a 193.6.1.39.

Ez utóbbit kerüljük. Csak akkor szükséges, ha a host-nak nincs bejegyzett
neve (gyakori kis vagy frissen telepített gépeknél, tehát rákényszerülhetünk).

Port

Általában elhagyható. Ritkán, de elôfordul, hogy a böngészônk
magától nem tudja megállapítani, melyik “ajtón” kell belépnie a távoli gépbe.
Ekkor a hostnevet (vagy az IP számot) egy kettôsponttal és egy számmal
egészítjük ki. Nehéz kideríteni, ha vaktában kell próbálkoznunk (ami elég
reménytelen), akkor ezeket a számokat érdemes elôször megpróbálni: 8000, 8080. A
szabványos szám ugyanis a 80-as, de új szervereknél megesik, hogy tesztelés vagy
más ok miatt nem ezt használják.

Elérési út és állománynév

Kezdjük azzal, hogy ha ide semmit nem adunk
meg, akkor a megcímzett gép legfôbb lapjának kell(ene) megjelennie, amely
általában az üzemeltetô honlapja. “Társbérlôk” egy / után megadott néven érhetôk
el, ha vannak. A felhasználók viszont a ~ jel után a user nevük alapján,
azaz Jakab kezdôlapja a ~jakab “útvonalon”. Ha e mögé állománynevet nem
illesztünk, akkor a megadott útvonal egy könyvtárra mutat (ez esetünkben Jakab
public_html könyvtára) és abban az index.html állomány az, ami majd megjelenik.
Ez az alapértelmezés. Ezért kellett pont ezt a könyvtárat és állománynevet
megadnunk a “tanfolyam” elején.

Kínos, de az ellenség keze ide is betette a lábát. Bizonyos jó
marketingpolitikával, ám annál (khmm) erôtlenebb operációs rendszerrel
rendelkezô cégek ránk hagyományozták a 8+3 betűs állományneveket. Ekkor az
index.html index.htm-mé válik, ami kavarodást okozhat. Ha barátunk lapját nem
érjük el, esetleg próbáljuk meg az egyébként nem kötelezô index.html-t
index.htm-ként beírni a cím végére! (Vagy esetleg az index.html-t, ha a
szolgáltató éppen a 8+3-at tekintette alapértelmezésnek.) Van amikor segít…

Más lapok elérésénél már semmit nem takaríthatunk meg, a teljes utat és az
állomány nevét is meg kell adnunk. A példában Jakab cdlista.html állományát
címeztük meg.

Kiegészítôk

A # jel után egy HTML lapon belül egy adott részre
hivatkozunk, ezt a lap írójának elôre ki kell jelölnie a megfelelô HTML jellel.
Hosszú tematikus listáknál például jól jön. Jakab sokféle CD-t hallgat, de
nekünk csak Koncz Zsuzsa kell. Tehát megy a végére az, hogy #koncz.

A ? után viszont paramétert ad át a böngészô. Ez már túlmutat azon,
amivel mi foglalkozunk, de ha ilyet látunk valahol, érdemes figyelni és
találgatni, hogyan is működik.

A link jelölése

Linkre nekünk is szükségünk lesz. Háromféle “távolságra”
vethetjük ki a lasszót: távolra, helybe, vagy az oldalon belülre. A linket az
<a href=valami> leíróval jelezzük és ezt zárni is kell a
</a> jelzôvel.

Link távolra

A teljes URL címet meg kell adnunk:
<a href=”http://www.homepageschool.edu/~donald/cdlista.html”>Donald CD-i</a>
Ezzel amerikai Donald barátunk listájára mutató linket helyeztünk el a
lapunkban. A lapon a “Donald CD-i” felirat jelenik meg (olyan színben, amilyet a
link= vagy a vlink= határoz meg — alapesetben kéken). Az egeret
odairányítva a nyílból kéz lesz, azaz kattinthatunk. Kattintás után érkezik meg
Donald barátunk lapja.

Link helybe

Jakab a saját public_html könyvtárán belül az állományok
neveivel (és az esetleges alkönyvtárnevekkel kiegészítve) hivatkozhat a saját
lapjaira.
<a href=”cdlista.html”>A saját CD-im</a>
Jakab a(z index.html) lapjában egy másik, cdlista.html nevű lapjára
hivatkozott. Ezt írhatta volna így is:
<a href=”http://www.honlapiskola.hu/~jakab/cdlista.html>A saját CD-im</a>
Ez nemcsak hosszabb, de rugalmatlanabb is. Ha véletlenül költözik a lapunk
egy másik hostra, akkor az ilyen címeket egyenként mind át kell írni! Jobb a
rövid (ún. relatív) cím és kényelmesebb is!

Link dokumentumon belüli ugrásra

Egy hosszú dokumentumon belüli
ugráláshoz elég csak a címkét megadni.
<a href=”#koncz”>Koncz Zsuzsa CD-k</a>
Ehhez azonban ezeket a címkéket el kell helyezni. Erre az <a
name=cimke>
leíró szolgál, ezt is </a> zárja.
<a name=”koncz”></a>
Itt nem, de a linkeknél muszáj valamit a nyitójel és a záró jel közé
tenni, mert különben nem lesz mit kattintani!

Link egyébként nem csak HTML lapra, hanem bármi másra is mutathat. A böngészô
vagy meg tudja jeleníteni (.txt, .gif, .jpg), vagy át tudja adni valamilyen
csatolt segédprogramnak (.mpg-t videolejátszónak, .au-t hanglejátszónak),
amennyiben ilyet el tud érni, végsô esetben pedig felajánlja, hogy letölti
nekünk a munkakönyvtárunkba, aztán azt csinálunk vele, amit akarunk.

Hova kerülhet link a lapon?

Linket bárhová rakhatunk. Egy szövegbe, egy
szóhoz, egy kifejezéshez rendelve.
<a href=”magamrol.html”>Jakab</a> vagyok, most tanulom a
honlapkészítés rejtelmeit.
Jakab ebben a példában valószínűleg hosszabban értekezik önmagáról a
magamrol.html lapon, de ezt csak akkor olvashatjuk el, ha a “Jakab” szóra
kattintunk.

Akár egy egész bekezdést is elláthatunk linkkel, ha ennek van valami értelme
(pl. egy cikkbôl idézünk röviden, de ezt inkább az idézet végére írt irodalmi
hivatkozás pár szavára illesztjük).

Ha valamit listaszerűen oldunk meg, arra van némi plusz segítségünk. Jakab a
CD-it így jelöli meg:

Jakab fantasztikus otthoni CD gyűjteménye:
<ul>
<li><a href=”#cseh”>Cseh Tamás</a>
<li><a href=”#koncz”>Koncz Zsuzsa</a>
<li><a href=”#pici”>Presser Gábor</a>
<li><a href=”#zoran”>Sztevanovity Zorán</a>
</ul>
A tételek egymás alatt lesznek, kicsit beljebb, mint a lap széle és egy
kis tömör ponttal kezdôdnek majd. A bekezdést az <ul>, a pontokat
(és az új tétel miatt az új sort) a <li> jelzi. Pontozott lista
helyett számozottat is kérhetünk az <ol> leíróval.

Linket tehetünk képre is. Mondjuk feltettük a lapunkra ôsi és veretes családi
címerünket JPEG képként, s azt szeretnénk, hogy az eredeti kutyabôr teljes
szövegét elolvashassa az, aki rákattint a címerre. Nézzük:

<a href=”kutyabor.html”><img src=”cimer.jpg” alt=”cimer”></a>
A képre kattintva máris jön a kutyabor.html lapunk…

Érdekes és viszonylag új lehetôség képen belül bizonyos területek kijelölése.
Azt szeretnénk például, hogy kedvenc üdülôfalunk, Baltásasszonyfa térképét
feltéve a nevezetesebb intézményekrôl (horgásztanya, kocsma) rövid leírást
adhatnánk. Kicsit bonyolult, de nem veszélyes.

Elôször is kell egy baltásasszonyfai térkép mondjuk GIF-ben, ennek mérete pl.
320×200 pixel (nem nagy falu, tömegben nem lehet pihenni!):

<img usemap=”#helyek” src=”basszonyfa.gif” alt=”B.asszonyfa City”>
Ebben az új a usemap= jelzés volt. Ez is lehet más lapra, sôt
távoli lapra való hivatkozás is, de célszerűbb rögtön helyben elintézni a
feldolgozást:
<map name=”helyek”>

<area shape=”rect” coords=”110, 90,130,110″ href=”horgasztanya.html”>
<area shape=”rect” coords=”190, 20,210, 40″ href=”kocsma.html”>
<area shape=”rect” coords=” 0, 0,319,199″ nohref”>

</map>

A shape= megjelöli, hogy milyen alakzatot használunk, de egyelôre
ez csak a téglalap (rect) lehet, ennek bal felsô és jobb alsó
koordinátáit adjuk meg pixelben. Ezek után a képen ide kattintva a href=
után megadott lap hívódik meg, akár egy linkrôl. A nohref sor elhagyható.

Okos dolog, de ne felejtsük el, hogy aki kép nélkül hívja le ezt az oldalt,
az nem tudja használni ezt a lehetôséget! Nyakra-fôre ne éljünk vele, ha pedig
mégis kell, akkor találjunk ki valamit szegény karakteres felhasználóknak is –
mondjuk egy sima kis listát a kép alá, ugyanezekkel a lapokkal.

A végére egy kis fekete leves:

Gondok a linkekkel

Sok link, sok gond. Az Internet állandóan átalakul, a
szolgáltatások költöznek és megszűnnek, vagy csak átmenetileg bezárnak, s
újabbak nyílnak. Aki tehát nagy nekibuzdulással ezer linket szedett össze az
oldalára, az nagy munkát szakasztott a saját nyakába: ha nem akar leégni a
vakvilágba mutató elavult linkjeivel, azt folyamatosan ellenôriznie és
frissítenie kell! Ez pedig sok idôt igényel. Szóval mértékletesség! Tényleg csak
oda tegyünk távoli linket, ahova feltétlenül szükséges és idônként ellenôrizzük!
Az elsô “not found” még nem jelenti azt, hogy nincs többé a címzett lap,
dugulások elôfordulnak. Próbálkozzunk máskor! Egy hete elérhetetlen lap azonban
már gyanús, kezdjük el keresni az új címét (ha van még egyáltalán)!



Elôzô fejezet | Tartalom | href=”#7″>Következô fejezet


Szerkezet

Elôbb-utóbb szükségessé válik egy kis rendrakás. Lapjaink
elszaporodnak, képeinkrôl pedig egyre nehezebb lesz kideríteni, melyik laphoz is
tartoznak tulajdonképpen. De ezen lehet segíteni.

Állománynevek, könyvtárak

Hogyan is válik ôserdôvé egy könyvtár?
Eleinte, amikor még csak az index.html lapunk üldögél, esetleg egy-két képpel
együtt a public_html könyvtárunkban, még nincs baj.

Illetve van. Ugyanis ahhoz, hogy a lapunkat a világból olvasni lehessen, meg
kell rá adnunk az engedélyt. Igen, errôl már volt szó, egy következményérôl
viszont nem. A UNIX logikájából következik, hogy a saját alapkönyvtárunkat,
ahová a bejelentkezéskor jutunk, szintén olvasásra elérhetôvé kell tennünk.
Azaz, elvileg ezzel lehetôséget adunk rá, hogy ebbe is beleolvassanak idegenek.
Akit ez zavar, az alapkönyvtárában ne tartson zűrös anyagokat. (Sôt inkább sehol
se.) Ha valamit el akarunk zárni a külvilág elôl, azt külön könyvtárba tegyük.
(Persze állományonként is adhatunk vagy visszavonhatunk jogokat, de ez
macerás…)

Egy idô után azonban annyira belejövünk (remélhetôleg) a lapok gyártásába,
hogy feltétlenül rendszerezni leszünk kénytelenek. Erre adok néhány tippet.

Témák szerint csoportosítsunk!

Tegyük fel, hogy zenérôl, irodalomról és
természetjárásról is több lapot követtünk már el. Logikus, hogy ezeket témánként
külön könyvtárba tegyük. Használjuk fel azt, hogy az index.html-t külön
(általában) nem kell kiírni, így a téma vezetô lapját (de ha csak egy lap az
egész, akkor is) index.html néven helyezzük el a megfelelô könyvtárban. A
témához tartozó képek és egyéb állományok is ide kerülhetnek.

Másik megoldás, hogy a téma vezetô lapja a téma könyvtárán kívül, de nevében
megegyezôen kerül tárolásra (pl. irodalom.html és irodalom/ könyvtár). Ez akkor
tűnik megfelelô megoldásnak, ha a témavezetô lapok megjelenése egységes, pl.
ugyanazt a háttérképet használják.

Ha valamit minden lapon használunk (pl. ikonokat, logókat), azokat szintén
érdemes külön könyvtárba gyűjteni. Itt azonban felmerül az a probléma, hogy
visszafelé nem lehet hivatkozni a belsô könyvtárból. Ekkor sajnos hosszú, azaz
teljes URL-t kell használnunk.

Hosszú nevek, rövid nevek

Ma már több operációs rendszer is engedi a
hosszú, beszédes állománynevek használatát, bár szóköz, ékezetes betű és
írásjelek nem, vagy csak igen körmönfont (s ezért felesleges) módon vethetôk be.
A hosszú neveket ettôl függetlenül érdemes alkalmazni.

Van kivétel. Ha a lapunk, vagy az abból nyíló szöveg, kép, stb. letöltésére
komolyan számítunk és szeretnénk is, ez esetben úgy kell tennünk, mint a
menekülô elefántcsapatnak. Minden csapatban van egy leglassúbb elefánt, s az
egész csapat az ô sebességéhez alkalmazkodik. Esetünkben a leglassúbb elefánt a
DOS a maga 3+8 karakteres állományneveivel. Szöveget, képet ezért érdemes még
UNIX alatt is a fenti megkötés szerint elnevezni. Ha viszont valami kemény
UNIX-os anyagunk van (egy jó C program, egy ügyes script), akkor használjuk csak
ki a névadás szabadságát — ezzel egy DOS-hívô úgysem tudna mit kezdeni.
Vigyázzunk arra is, hogy DOS alatt a kisbetű ugyanaz, mint a nagy, a UNIX alatt
viszont nem! Aki DOS alapú környezetben dolgozik (a sokak által használt Windows
3.x ilyen!), az letöltéskor csonka, egymást felülíró állományokba futhat, ha nem
vagyunk elôzékenyek.




Elôzô fejezet | Tartalom | href=”#8″>Következô fejezet


Extrák


Még szebb szövegek

Ha valamit nagyon szeretnénk kiemelni, akkor
két lehetôségünk is van: megnövelhetjük (vagy csökkenthetjük) a betűk nagyságát,
illetve átszínezhetjük ôket. A kulcsszó a font.

Átméretezés:

<font size=+3>Ez nagy.</font><font size=-3>Ez kicsi.</font>
Színezés:
<font color=#FF0000>Ez piros.</font>

Táblázatok

Ha sok adatot akarunk táblázatokban közölni, akkor azt
régebben elôre tördelt szövegként vágtuk be, most viszont van saját, igaz kicsit
bonyolult megadási módja:

A táblázat a <table> jellel kezdôdik és a </table>
zárja. Ezen belül a sorokat a <tr>, az oszlopokat a
<td> határolja el egymástól. (Ha a táblázat oszlopneveit ki akarjuk
emelni, akkor <td> helyett <th> jelet használunk.) A
táblázat szélességét a width= módosítóval megváltoztathatjuk,
border= megadásával keretszélességet definiálunk, a táblázat celláin
belül pedig az align= segítségével jobbra right, balra
left, középre middle, föl top és le bottom
igazíthatjuk az adatot. Lássuk a helyi focieredményeket!

<table border=2>
<tr><th>Hazai csapat <th>Vendégcsapat <th>Eredmény
<tr><td>Baltásasszonyfa FC<td>Redvestáka TC <td align=middle>2 : 1
<tr><td>Rongyosi Falábúak <td>Szentkanalasi SC<td align=middle>0 : 0
<tr><td>Macskási Vasasok <td>Akasztódombi SE <td align=middle>1 : 3
</table>
Nem erre találták ki, de két (vagy több) hasábos kiírást is táblázattal
oldunk meg. A szöveget <table> és <td> jelekkel
vezetjük be, majd a hasáb végén újabb <td> jelet szúrunk be, végül
</table> jellel zárjuk. Az align= legyen top.

Kép mellé ugyanígy írhatunk, csak akkor az egyik “cellában” a kép van, a
másikban a szöveg.

Keretek

A böngészô ablakát több részre oszthatjuk frame, azaz
keret definiálásával. Ekkor tulajdonképpen több különbözô HTML lapunk szorong
egy osztott ablakban. A megosztáshoz egy vezetôlapot kell készítenünk, amin a
felosztás szerepel, valamint itt helyezhetünk el üzenetet azok számára, akik nem
rendelkeznek kereteket kezelô böngészôvel. Egy példa:
<head>
<title>Jakab ablakai</title>
</head>

<frameset rows=”*,120″>
<frame name=fent src=alap.html>
<frame name=lent src=menu.html>
</frameset>

<noframe>
<body>
Te sajnos nem látsz be az ablakaimon. Keress egy nagyobb verziójú “létrát”!
</body>
</noframe>

Azt, hogy egy kattintás után melyik ablakban jelenjen meg az új lap, a
target= határozza meg. Ide kell beírni az ablak nevét, amit a
name= után írtunk.
<a target=alap href=”elso.html”>

Űrlapok

Egy HTML lapot nem csak passzívan megtekinteni lehet, hanem
megfelelô kiegészítésekkel szabályos kérdôívet, szavazólapot, vendégkönyvet,
stb. kaphatunk, amelybe aztán be is írhatunk. Egy ilyen lap nyomógombokat,
adatbeviteli mezôket, menüket tartalmazhat. A bevitt adatokat azonban a HTML
keretei közt nem lehet feldolgozni, ahhoz kiegészítôprogram szükséges:
vagy egy szerver oldali program, vagy egy Java alkalmazás. Ez pedig már egy
másik kurzus anyaga.

Scriptek

Bár a scriptek sem tartoznak szorosan véve a HTML-hez, egy
rövid és igen gyakran használt példa erejéig mégis kitérek rá. Számlálót ugyanis
nagyon sokan szeretnének a lapjukra tenni.

Mi is egy script? Röviden és DOS akcentussal ;-) — a script a UNIX
“.bat”-ja. Csakhogy sokkal többet tud. Gyakorlatilag programnak minôsül.
Lapunkról ilyen kis (vagy akár nagy) programok indítására van lehetôség!

A világ nem egyszerű, a scriptek meghívására is kétféle megoldást dolgoztak
ki: egy elsôt és egy jót. ;-)

Az elsô ilyen megoldás a

CGI

azaz a Common Gate Interface. Ez egy “patkolás”, amely beül a
buta CERN httpd server és a külvilág közé, hogy a scriptre vonatkozó és a server
által nem ismert utasításokat feldolgozza. Ez néhány kellemetlen jelenséggel
jár. Az egyik, hogy a meghívott scriptek nem paraméterezhetôk. A másik, hogy a
scripteknek külön cgi-bin könyvtárban kell gyülekezniük. A scripteket el
kell látni “fejlécinformációval” is.

Mindezek ellenére a CGI nagy karriert futott be, így a fejlettebb serverekbe
eleve beépítettek egy ehhez hasonló, de kellemesebb lehetôséget, ez a

SSI

azaz Server Side Include. Itt már a script hívása egyszerűbb
és kényelmesebb, s együtt maradhat az ôt hívó oldallal. Ez azért jó, mert pl. a
cgi-bin könyvtárra vagy kapunk írási jogot, vagy sem, de még ha kapunk is, ott
mások is “nyomulnak”, közös lónak meg ugye… A saját könyvtárunkban viszont
nyugodtan fejleszthetünk.

A példát ez utóbbi serverhez írtam meg, mert mentes a CGI “sallangjaitól”.

Számláló (példa)

Teendôink sorrendben:

Készítsük el counter néven az alábbi UNIX scriptet tetszésünk szerinti
szövegszerkesztôvel a public_html könyvtárba:

N=`cat ./counter.$1`
expr $N + 1 > ./counter.$1
Nagyon ügyeljünk minden egyes jelre, még a szóközökre is, mert a UNIX
haragos öregúrként viselkedik, ha pontatlanok vagyunk!

A kész állományra adjunk végrehajtási jogot!

chmod 755 counter
Készítsük el az index.html “adatlapját”!
echo 0 > counter.index
Erre adjunk általános írási jogot, hiszen a világon mindenki belátogathat
a lapunkra, növelve a számláló állását!
chmod 666 counter.index
Végül helyezzük el az index.html-ben a számláló hívását (célszerű a
legelsô sorba a <head> elé):
<!–#exec cmd=”./counter index”–>
Ezzel a számláló kész és működik is, csak épp nem látjuk a lapon az
eredményét. Ehhez egy újabb sort csempésszünk a lap törzsébe:
Ezt a Jakab-féle lapot
<!–#exec cmd=”cat ./counter.index”–>
boldogtalan elektronikus csavargó látta eddig.
A szám valóban megjelenik a szövegben, mi több a forrásban is, így aki
lapunk “kéziratát” olvasgatja, az sem sejtheti, milyen csodaprogrammal értük el
ezt az eredményt. Más lapokon is bevethetô ugyanez a script, mivel eleve úgy
íródott, hogy csak az index cserélendô le más névre a lapban a hívásnál. Persze
az “adatlapokat” külön-külön el kell készíteni! És ez még csak a kezdet!…

FIGYELEM! Ez a megoldás korszerűtlenebb servereken nem működik!

A server rendszerváltozói

Több érdekes információt tartalmazó szabványos
rendszerváltozót használnak a serverek, ezek közül emelek ki néhányat:

  • $LAST_MODIFIED

    A lap utolsó módosítási dátumát tartalmazza. Ahol lényeges, hogy kövessük,
    mikor frissült utoljára a lap, az állandó dátumátírás helyett ennek a változónak
    a kiíratásával is elintézhetjük a kérdést:

    <!–#exec cmd=”echo $LAST_MODIFIED”–>


  • $REMOTE_HOST

    Ebben a változóban rejlik a lapunkat éppen meghívó kíváncsi “ügyfél” gépének
    neve (maga a felhasználó anonim marad). Sokan szívesen veszik, ha a lap
    “felismeri” ôket, így ezt is kiírathatjuk a fenti módon.


  • $DATE_LOCAL

    A mai dátum a helyi idôvel együtt. Ha valaki nagyon lassúnak találja a
    vonalat, ezt az adatot ismerve rádöbbenhet, hogy nem munkaidôben kellene
    próbálkoznia… ;-) (Nem árt, ha olykor eszünkbe jut, hogy az Interneten mindig
    máshol van éjszaka.)





Elôzô fejezet | Tartalom | href=”#k”>Következô fejezet


Merre tovább?

A HTML fejlôdése ellentmondásos. Népszerűsége óriási,
alapjai biztosak, jól átgondoltak, de azóta mindenféle torzulások keletkeztek
benne. A baj az, hogy eredetileg egy nagyon egyszerű dokumentumleíró nyelvet
definiáltak, most pedig arra tart a HTML, hogy GUI, azaz grafikus
felhasználói felület lesz belôle (plusz multimédia alkalmazás és reklámhordozó,
plusz DTP kiadványszerkesztô és -terjesztô eszköz, plusz belsô vállalati
információs rendszer és üzleti tranzakciók közvetítôje, stb.). Ma már
rendelhetünk és fizethetünk is a WWW-ben bolyongva, laborokba kukkanthatunk be
kandi kamerával, rádiót hallgathatunk egyenesadásban és mindenféle
adatbázis-lekérdezôket nyüstölhetünk kérdéseinkkel. Messze kerültünk a
kezdetektôl és alaposan meghaladtuk a svájci atomtudósok igényeit.

A fejlôdés egyik útja a

Java

A Java a HTML lapban a mozgás, az élet — szó szerint. Lapjainkon
ezek után számológépek, elektronikus jópofáskodógépek, dadaista versgenerátorok,
kártyajátékok, köszönôrobotok és egyéb agyatlanságok tűnnek fel. A Java valódi
programnyelv, amely kommunikációs felületként használja a HTML lapot.

Háromféle Java létezik. Az igazi Java egy komoly objektumorientált nyelv.
Ebben teljes alkalmazásokat írhatunk meg. Van egy kistestvére, amely csak
annyiban különbözik bátyjától, hogy nem önálló program, hanem inkább egyfajta
rutingyűjtemény, melynek különbözô részeit a lapról hívjuk meg. Végül egy
elfajzott rokon is van, a javascript, ez nem önálló, hanem a HTML lapba
beleírható nyelv. Míg az “igazi” Java-t le kell fordítani, addig ezt egy
interpreter értelmezi sorrol sorra, mint az otthoni C64 a Basic programokat.
Képességei nagyon korlátozottak, igazából csak hasonlít a Java-ra, de nem az
(valamikor Mocha névre hallgatott). Elônye, hogy ott van a lapban, de ez egyben
a hátránya is: bárki betekinthet programozói munkásságunkba. Ráadásul lassú is.
De van, létezik, használható.

A Java alkalmazások csak a friss kiadású böngészôprogramokkal használhatók, s
van olyan is, amelyik csak a Javascriptet érti.

Teljesen más utakon halad a

VRML

azaz a Virtual Reality Markup Language. Ez egy
háromdimenziós világot ír le, amelyben mászkálhatunk, foroghatunk, közelre és
távolra tekinthetünk, környezetünket pedig alakíthatjuk. Aki játszott már
DOOM-szerű játékkal, az tudja, milyen érzés. Ez már nem lap, nem kiadvány! Ez
világ! Saját személyes, egyéni világ építhetô fel.

A VRML jelenleg viszonylag egyszerű térbeli alapelemekkel dolgozik, de
árnyékolás és perspektíva kezdettôl van benne. A generált világok még elég
DOOM-stílusúak, s még így is nyög tôle a vonal és a gép. Egy VRML “lap”
megjelenítéséhez jóval nagyobb teljesítmény szükséges, mint egy HTML laphoz.

A WWW világához úgy kapcsolódik a VRML, hogy ennek böngészôi felimerik a HTML
lapokat és vagy maguk dolgozzák fel azt, vagy átadják egy HTML olvasónak. A VRML
világában egy HTML lap csak “falragasz”…

Honlap holnap

Végetért a honlapiskola. Remélem megérte a szöveg
elolvasása és a példák megfejtése. Ha az Internet világa újabb oldalakkal
gazdagodik, az mindenkinek jó.

Honlapunk címét elektronikus leveleinkben (a .signature állományban) és akár
névjegykártyánkon is feltűntethetjük. Bejegyeztethetjük a Hungary Network
Ki-Kicsoda lapjára http://www.hungary.com/kiki/, vagy más
szolgáltatókhoz. (A Yahoo-t csak annak ajánlom, aki szeret naponta több (tucat)
reklámlevelet kapni). Más keresôszolgáltatások viszont hamarosan maguktól is
rátalálnak a lapunkra. A látogatok száma eleinte kevés lesz, de ha jó az
anyagunk, hamarosan egymás sarkát tapossák majd.

A jó lap nem avul el, azaz illik rendszeresen a karbantartással foglalkozni.
Az elavult anyagokat és linkeket törölni kell, az újdonságokat és a még
fejlesztés alatt álló oldalakat pedig külön érdemes jelezni, hogy a visszajáró
látogatók könnyebben megtalálják. Ha véletlenül költözünk, akkor a régi címen
(ha lehetséges) hagyjunk egy lapot. Ezen jó nagy betűkkel jelentsük be, hogy
elköltöztünk, az új címünk pedig ez és ez, amit persze kattinthatóan építünk be.

Van egy-két dolog, amit nem szerencsés az oldalakra feltenni. A kimondottan
reklámra szakosodott szolgáltatókon kívül a reklám általában tiltott
tevékenység. Nem illik másokat megsérteni, bosszantani, és politizálni sem
közkedvelt dolog. Ne tegyunk ki olyan anyagokat sem, amit a törvény tilt — vagy
az etikett. Ezeket egy kirakatba sem tennénk ki — és a honlap nem más, mint egy
elektronikus kirakat. A rendszergazdától érdeklôdjünk, mit tekint ô nem kívánt
anyagnak.

Mindezek nem lehetnek túl szigorú megkötések a végtelen fantázia számára. S
lám, a megvalósítás nem is oly bonyolult. Nincs mese, bele kell vágni a
lapalapításba!




Elôzô fejezet | Tartalom | href=”#f”>Következô fejezet

Írta: Perlaki Attila

Kapcsolódó bejegyzések:
  • Nem tutorial, egyszerűen csak egy gyűjtés, mert szükségem volt egy magyar “stop words” állományra és a neten egy nagyobb, teljes anyagot nem találtam, így összeg …

  • Előfordulhat olyan eset honlapszerkesztés közben, hogy a honlapon szeretnél kitenni egy hosszabb szöveget, de úgy, hogy ne legyen nagyon “hosszú” lefele a la …

  • Honlapok esetében néha nagyon hasznos megoldás tud lenni, ha a lap tartalmát (vagy egy részét) külső fájlból linkeljük be. Milyen előnyei vannak?1.) …

  • Ha csináltál már honlapot valaha, talán te is belefutottál már abba a problémába, hogy szeretted volna ha gyorsabban töltődne le, ha kicsit kisebbek lennének a f …

  • ASP vagyis Active Server PagesEbben az egy mondatban minden benne van, amit az asp-ről tudni kell. Aki egy kiterjedtebb, és gyakrabban használt nyelv felől …

A cikket beküldte: Harder (http://blog.harder.hu)

22 hozzászólás

  1. virag says:

    Total kezdo honlapkeszito(probalkozo) vagyok. Lepesenkent haladok, de megakadtam a “Hozzuk létre azt a helyet, ahova a lap kerül!”. Meg nagyon az eleje, de kitarto vagyok. Segitseget kerek a tovabbhaladashoz.KOszi

  2. Harder says:

    Regisztrálj egy ingyenes tárhelyet, ahova majd a lapodat fel tudod tölteni (pl. extra.hu) vagy venned kell egy domain nevet és tárhelyet valamelyik szolgáltatónál.

  3. Kovács Lóránd says:

    nagyon jó az oldal.:)

  4. zoleytaylor says:

    sok szempontból jó ez a leírás. meg kell tanulni, hozzá kell szokni, majd mikor ez megy, akkor teljes szemléletváltás, és jöhet a css… a honlapszerkesztés egy olyan dolog amire talán soha nem lehet azt mondani, hogy “megtanultam”. megtanulsz valamit, és rájössz, hogy elavult. de meg kell tanulni az elavultat is. aki átugorja és minden alap nélkül dinamikus weboldalt akar csinálni, az megszívja…

    egyébként meg nem jó, ez ki is ütközött, hogy a próbálkozó kezdő nem érti mi az hogy “Hozzuk létre azt a helyet, ahova a lap kerül!”… nem kell létrehozni semmiféle környezetet, egy böngészőprogramra és egy plaintext-szerkesztőre (tehát nem word-re) van csak szükség. (a leírás azon bekezdését szivem szerint áthúznám. az átlagos felhasználó azt se tudja mi az a linux, itt csak fölösleges kavarás, nincs köze a saját honlaphoz. és régimódi elhibázott jövőbemutatás az hogy a neten, beélesítve kell kezdeni fejleszteni. egyelőre nem kell host meg public_html…) na, de segítek inkább értelmesen.

    – első lépés: csinálj bárhol a vincsesztereden egy könyvtárat tetszőleges néven, csak hogy elkülönüljenek majd a html tanulós dolgaid mindentől.
    – második: készíts egy új szöveges dokumentumot, aminek a neve legyen pl. index.html vagy proba.html, akármi… (gondolom windowsban vagy, remélhetőleg látszanak a fájlkiterjesztések. amennyiben nem, állítsd be: vezérlőpult – mappa beállításai – nézet fül – ismert fájltípusok kiterjesztéseinek elrejtése elől értelemszerűen kiszeded a pipát…)
    – harmadik: a html fájlodat megnyitod az alapértelmezett böngészőben (ie-ben, foxiban, operában… a html valószínűleg társítva van valamelyikhez, szóval egyszerűen duplaklikk vagy enter a fájlon…)
    – negyedik: a fájlodat megnyitod szerkesztésre, például jegyzettömbben. (internet explorer beállításaiban a programok fülön tudod beállítani hogy alapártelmezés szerint a jegyzettömb legyen a html szerkesztő. így a környezeti menüben – egér jobbklikk – ha a szerkesztésre kattintasz, jegyzettömbben nyílik meg a fájl. amit látsz az pedig a forráskód. bár egyelőre üres…)
    – ötödik és többedik lépés: a leírás alapján szerkeszteni kezded a lapodat, írkálod a kódokat… (“Tehát elkezdjük a bejárat, azaz az index.html szerkesztését!” innét.) amikor meg szeretnéd nézni hogy mit eredményeztek az eddig beírt kódok, elmented a fájlt (ctrl+s vagy fájl/mentés), a böngészőben pedig nyomsz egy frissítést (f5)… és tárám, látod amit alkottál.

    ezt gyakorolod jó sokáig, és amikor a lehetőségei kimerültek (egy-két hónap intenzív érdeklődés után mindenképp), akkor át lehet állni valami más szerkesztési elvre… (majd eltűnnek a font tag-ek, az attribútumok, a frame-ek, a table-ök, és megjelennek a style-ok, stb… amikor már ezt tudod, akkor ráérsz az interneten is mutogatni a tudásod…) tehát hogy a címre utaljak, a “saját honlap a weben” szerintem csak mindez után legyen aktuális… de akkorra már értesz ezekhez annyira hogy nem okoz gondot tárhelyet regisztrálni és feltölteni a lapodat…. (azután megtanulhatod a php-t, a javascriptbe is belefolyhatsz, hogy legalább egy kész szkriptet hozzá tudj adni a lapodhoz, ésatöbbi…) hosszú móka, kitartást igényel! de megéri! (a html+css precízsége csak a saját precízségeden múlik, nincs úgy megkötve a kezed mint egy akármilyen szövegszerkesztőben…)

  5. Virag says:

    Valoszinuleg most vicces masodperceket okozok kerdeseim olvasoinak.a bongeszo az maga az internet explorer?es a plaintext szerkeszto?

  6. virag says:

    Hogy nyitom meg a html fajlomat a bongeszoben? Az elobbi kerdesem elso felere idokozben rajottem.bongesz-i.e.

  7. zoleytaylor says:

    böngésző: internet explorer, mozilla firefox, opera, netscape navigator, stb… (bár az ie gyakorlatilag nem érdemli meg ezt az elnevezést :@…)
    plain text editor: olyan “szövegszerkesztő” ami nem a szöveg formázására/szerkesztésére szolgál, csak beírásra, és nem ír egyéb dolgokat a fájlba, csak azokat a karaktereket amiket te írsz be (a word ezzel ellentétben nem egy A betűt tárol ha egy A betűt írsz be, hanem egy A betűt plusz a hozzá tartozó formázást, betűméretet meg ilyeneket. minden más program számára kb használhatatlan fájlt hoz létre)…

    leírtam hogy kell a html-t megnyitni, olvasd végig újra. (biztos megoldás: a html fájlt belehúzod a böngészőablakba.)

  8. Virag says:

    Sikerult behozni a bongeszobe. De egyszeruen nem tudom megnyitni szerkesztesre. Olasz nyelvu gepen dolgozok, ennek ellenere megtalaltam a szerkesztes gombot, de inaktiv. Pedig a jegyzetfuzet van beallitva. Mit csinaljak?

  9. Legyen saját webolda says:

    Virág,

    Minden kezdet nehéz, és ez nem csak szólam…
    Amennyiben magáért az alkotásért akarsz weboldalt, akkor egy PHP alkalmazás, vagy akár Dreamweaver (profi webfwjlesztő alkalmazás) is nagyon jó megoldás a az online önmegvalósításhoz.
    Viszon amennyiben mondjuk, üzleti céllal akarsz és sajátkezüleg weboldalt, akkor egy viszonylag egyszerűbb, de mégis profi megoldás a CMS azaz a tartalom kezelő rendszer használata, pl: joomla, drupal, wordpress…
    Az extra.hu oldalt egyébként magam is ajánlom, épp a napokban volt egy nagyon poztív tapsztalatom velük kapcsolatban! Azt az hozzállást, amit ingyenes szolgátatóként adtak, azt sokfizetős cég is alkalmazhatná!

    Üdv: István

  10. Virag says:

    zoleytaylor! Eddig te ereztel ra legjobban a “szintemre”. Segitenel tovabb lepni? Koszi

  11. M says:

    A dreamweaver mukodeseben tudna segiteni valaki?
    koszi

  12. Harder says:

    Kicsit pontosabban fogalmazd meg, hogy mi a gond, mert így lehetetlen segíteni.

  13. asam9 says:

    Virág, ha kétszer rákattintasz a html fájlra, akkor is a böngészőben fog megjelenni az oldal…, ha mégsem, be is húzhatod vagy társíthatod is. a böngésző arra alkalmas, hogy a szöveget, a képeket, stb.-vel együtt megjelenítse, nem a html szerkesztésre, … viszont rengeteg más progi van, amivel szerkeszteni lehet. többek között ilyen a notepad és a dreamweaver is. én a dreamweaver-t ajánlom, mert megkönnyíti, meggyorsítja a munkát…, persze vannak akik nem szeretik, utána lehet nézni, hogy neked melyik a legszimpibb és a legkényelmesebb.
    a dreamweaver-ben 3 “nézet” van: code, split, design.
    az code nézetben csak a kódot látod, a split-ben a kódot és a design-t egyaránt, a design nézetben értelemszerűen csak a design-t. ebből én csak a code nézetet használom, a másik kettő sztem felesleges, mert nem igazán mutatja midnig azt, ahogy az ténylegesen megjelenik a böngészőn. helyette érdemesebb magával a böngészővel megnézni az eredményt, erre a dw-ből is van lehetőség.
    érdmes megtanulni rendesen az xhtml és a css “nyelveket” ( http://www.w3schools.com/ –> bal felső sarokban van mind a kettő), hogy ne kelljen design módban gányolni, sztem komolyan sokkal bonyolultabb jól megcsinálni úgy egy oldalt, mint ha kézzel be vannak pötyögve a kódok. elején izzasztó lesz, de hosszútávon megéri, egész gyorsan megtanulhatóak.
    remélem neked is segítt egy minimálisat, M, bár igazából nem sok lehetőséget használok ki a dw-ben.

  14. Virág,

    Ha mindenkép, és nagyon el akarsz mélyedni a dreamweaverben akkor:
    Tanuljuk 24 óra alatt a Dreaweavert Betsi Bruce könyve

    Amennyiben egyszerűen, csak meg akarsz jelenni a neten akkor valamilyen CMS úgynevezett tartalomkezelő rendszert ajánlom, pl Joomla, Drupal…

    István

  15. BonFire says:

    Szóval, jó, hogy végre erre a leírásra is ráakadtam. Megvan a “kályha” ahonnét már elindulhatok. Nem könnyű dolog, az szent, de időközben nekem is rá kellett döbbennem, hogy a szimplán grafikus felületen megszerkesztett oldalak néha nem úgy működnek, ahogy szeretnénk. Ezért én is kénytelen vagyok valamilyen szinten belemászni ebbe a témába, holott soha egy percig sem gondoltam volna, hogy valaha még szükségem lesz rá. zoleytaylornak is sok mindenben igaza van. Míg az alapvető dolgokkal foglalkozik valaki, azt nem biztos, hogy szívesen mutogatja. Szóval én is szeretnék egy kicsit hozzátenni, hátha valakinek még így is nehéz.

    Nos, ugye mindenkinek van egy böngészője, amivel szörfözik a neten. Ebben nézzük meg, hogy mit is ügyködtünk össze. A fájl szerkesztését pedig egy sima jegyzettömbben, vagy szöveges dokumentumban is meg lehet csinálni. Jobb gomb az Asztalra, és ott egy Új szöveges dokumentumot kell kérni. Ez egy sima txt fájl lesz, de ha simán átírom a kiterjesztését “html”-re, akkor a böngésző úgy kezeli, mintha tényleg egy letöltött oldalt nézegetnénk. Sőt, az ikonja is egyből FF dokumentummá változik, vagyis hozzárendeli a böngészőhöz a fájlt. Beleírjuk a tanultakat, és elmentjük. Adunk neki valami olyan nevet, ami tényleg ki is fejezi, hogy mi az a fájl. Mondjuk “Első html küszködéseim gyümölcse.html” Ha ez megvan, akkor egy sima duplaklikk, és máris nézegethetjük a böngészőben. A Böngészőnkben kiválaszthatjuk a Nézet/Oldal forrása, vagy valami hasonló (FF-ban Ctrl+U) és láthatjuk a forráskódunkat. Ugyanaz, amit a szöveges dokumentumban szerkesztettünk, csak ebben a nézetben a különböző formázási jeleket és kódokat elkülönített színekkel írja. Így sokkal átláthatóbb a tartalom. A böngészőben nem tudom, hogy át lehet-e írni, én nem tudtam, viszont az eredetiben mindig végrehajthatom a változtatásokat. Csak mentjük, aztán vissza a böngészőbe, és rákattintunk a frissítés gombjára.

  16. asam9 says:

    ehhez csak még annyit tennék hozzá, ha mindenképp notepad, akkor fontos, hogy UTF-8 legyen a kódolás.

  17. BonFire,

    Igazad van ugyan, de ha ezen az úton haladsz tovább, akkor még mindig egy dinoszaurusszal van dolgod, és folyton kódot kell piszkálni, ha ezt évezed és ez a célod akkor bocsi, de ha picit is üzletet akarsz csinálni akkor el kell indulnod, a dinamikus programozás irányába. Persze azt is lehet mondjuk dreamweaverrel, de minek a bitfényezés ha ezt már valahol valaki megvalósította, és esetleg ingyen is elérheted, és akkor ezt még mindig okosíthatod!

    István

  18. BonFire says:

    Félreértettél, egyáltalán nem élvezem a dolgot, sőt! Ennél sokkal vizuálisabb típus vagyok, de egy időben buta fejjel úgy gondoltam, hogy mi ez a nagy hűhó! Össze is gányoltam egy szuper oldalt Wordben, ami csodák csodájára sosem működött jól. És ez nem is véletlen, mivel annak ellenére, hogy képes html-ben is menteni a fájlt, azért mégsem arra lett kitalálva. Jelenleg nem szándékozom, külön weboldalt szerkeszteni, mert ahhoz én még kicsi vagyok, és nem is lenne értelme, ha nem tudnám naprakészen frissíteni, karbantartani és olvasnivalóval megtölteni. Többek között ezért is blogolok. Ott van néhány sablon, ami viszonylag elég ízlésesen el van készítve, egyelőre beérem azzal. (Na jó, azért a bannert magam kreáltam) Igaz, hogy van néhány dolog, amiket hiányolok, de míg ezt ki nem növöm, addig megteszi. Közben pedig azért néha egy-egy kódot megtanulok, mivel azon a szerkesztőfelületen mindent el kellett felejteni, amit addig a grafikus szövegszerkesztésről tanultam. Néha muszáj vagyok a source-ba belepiszkálni.

    Most egy hihetetlen dolgot fogok mondani, de az anyagi része nem érdekel a dolognak, mivel úgysem tudnám mire költeni a pénzt, max gyógyszerre, de az meg fel van írva közgyógyra! Egyébként sem én fogom megváltani a világot, az ügyesebbek már mindent feltaláltak előttem. A különbség talán csak annyi, hogy hozzájárulok a nagy egyetemességhez én is. Egyesek jobbak a témában, mások kevésbé. Egy a lényeg. Szeretem csinálni, és végre az életben azzal foglalkozhatok, amit szeretek. Nekem pedig minden pénznél többet érnek az olvasóim pozitív visszajelzései. :)

  19. BonFire,

    Végre egy elégedett ember, akinek nem számít a pénz! Blikk címlapra vele! (bocsi ezt nem tudtam kihagyni.)

    Sajnos én személy szerint a pénzért kell, csináljam, persze hazudnék, ha azt mondanám nem élvezem. Viszont ha nem pénzért csinálnám akkor valszeg nem is csinálnám, járnám a világot és rengeteg szépirodalmat olvasnék végre a szakmai helyett!

    Üdv!

  20. BonFire says:

    Well, természetesen nem mindenki teheti meg, hogy azt csinálja amit szeret. Ennek viszont nagyon nagy ára van, pénzben kifejezhetetlen. Mondjuk úgy, hogy egy ember élete!… Tényleg elégedett vagyok. De most itt ezt a témát befejezem, mert offtopic, és az orrunkra fognak koppintani. Privátban, ha érdekel, nagyon szívesen mesélnék egy-két meghökkentő dolgot. Tényleg meglepődnél… :)

  21. Virag says:

    Emberek! Koszonom a sok segitseget! Most megnezem, h mitb tudok belole osszetakolni…
    Meg 1szer koszi!!!

Szólj hozzá
a Hogyan készítsünk saját honlapot a weben? c. bejegyzéshez

- Engedélyezett HTML elemek: <a> <em> <strong> <ul> <ol> <li>
- Forráskód beküldéséhez tedd a kódot ezek közé: <pre lang="php" line="1">Kódrészlet helye itt</pre>