Hogyan csináljunk profi (kinézetű) honlapot magunknak

Manapság sokan vetemednek arra, hogy honlapot csináljanak maguknak — köztük én is. Ezen a honlapon megadhatunk magunkról infókat, feltehetjük az önéletrajzunkat, megoszthatjuk a világgal a gondolatainkat, képeket is feltölthetünk, a lehetőségek száma végtelen.

Azonban sokszor ezekkel a honlapokkal az a baj, hogy igénytelenek. Vagy ha nem is igénytelenek, de nehezen használhatók, háttérképnek a papagájukat rakják be, vagy a portréjukat, és akkor a szöveg olvashatatlan. És ha erre rámutatunk a honlap tulajdonosánál, akkor asszondja, hogy nem talált olyan betűszínt ami jól látszik. Vagy olvashatatlanul kicsik a betűk. Rengeteg baj lehet a honlapokkal, de mindegyik problémának ugyanaz a gyökere: nem ért hozzá a tulaj.

Igazából, azt kell elérni, hogy profinak tűnjön a honlap.

Aki szokott internetezni, az könnyen különbséget tesz egy profi és egy kezdő honlap között. Összefoglalni, hogy a kettő között mik a különbségek, meg hogy a saját honlapunknál kiküszöbölni ezeket, már nehezebb. Sokan csak addig jutnak el, hogy az egyik profibban néz ki, meg többet tud, mint a másik. Esetleg az, hogy nagyobb. De ez konkrétumnak igen kevés.

Megpróbálom összefoglalni — saját tapasztalat, és egyéb források (más honlapok) — alapján, hogy szerintem hogyan kéne egy profi — vagy legalábbis annak kinéző — honlapot csinálni. Tehát.

Előszöris tanuljuk meg, hogy mi az a honlap. Nem úgy kell tanulni, mint a Word használatát. Méghozzá azért nem, mert a kettő között van egy nagy különbség. A Word — vagy Openoffice.org, vagy ami tetszik — dokumentumok csak egy lapból állnak. Lehet, hogy nyomtatásnál több lapra jön ki, és ezt már a szerkesztőben is mutatja, de az csak egy lap [több oldal]. A honlapoknak van főoldala, meg csomó aloldal (copyright oldal, rólam oldal, képek oldal, stb.). Tehát ott tartottunk, hogy nem olyan mint a szövegszerkesztés. Egy honlapnál hacsak nem kerüljük ezt direkt, akkor össze kell hangolni az oldalakat. Előszöris meg kell tanulnunk HTML-t szerkeszteni. Aki ezt már ismeri, az ugorja át a következő bekezdést, aki meg nem annak röviden leírom, hogy hogy kéne ezt megtanulni.

HTML-tanulás

Én nem tanítok meg erre most itt senkit (legfeljebb majd egy későbbi bejegyzésben), viszont mutatok pár elég jó honlapot, amiknek a segítségével tanulhattok:

• W3Schools.com — Ha csak kicsit is tudsz angolul, akkor ez a neked való honlap, mivel a példákat jól szemlélteti, és a html-en kívül sok mást is megtanít (CSS, JS, AJAX, PHP, ASP, XML, RSS és még sorolhatnám…) Ha keresek valamire egy megoldást, akkor mindig itt nézem meg először
• Tizag.com — Ez is igényel angoltudást, a html-szerkesztést ugyanolyan jól megtanítja, és még egy pár más dolgot is (pl. CSS)
• Quirksmode.org — A html-t konkrétan nem tanítja, viszont CSS-t és Javascriptet remekül
• htmlDog.com — Nemrég fedeztem fel magamnak, de nagyon jó honlap, különböző szinteken tanítja a HTML-t és a CSS-t

Én csak ezeket szoktam használni, de azok kedvéért, akik nagyon nem beszélnek angolul megpróbáltam magyar nyelvű oktatólapot találni a neten. Megnéztem a html.lap.hu-t. Baloldalon az Online Html tanfolyamokat. Félóráig rázkódtam a sírástól. Volt már olyan érzésetek, hogy a tanárotok nem végzett általánost? Na ez számomra olyasmi volt. Csak rosszabb. Azoknak a nagyrészét kerüljétek messziről. Ami van mégis többé-kevésbé jó, azt összegyűjtöttem ide:

• Dzsuszti honlapja — Elsőre ez volt a legjobb amit találtam, érdemes lehet megnézni
• Netoktato.hu — Nem a legjobb szerintem, de ez is segíthet a tanulásban
• WebHQ.extra.hu — Ezt is csak végső megoldásnak ajánlanám

Ha ezeken kívül találtok még valamit, akkor a kommentekben írjátok meg. Majd megírom, hogy mi a véleményem róla, és ha annyire jó akkor update-elem a bejegyzést

Ha ez megvan, akkor tanuljátok egy kicsit a CSS-t [a link az angol wikipedia cikkére mutat, ami leírja mi az, megtanulni a fentebb felsorolt linkek egy részén tudjátok].

Ha ezek megvannak, akkor elmondhatjuk, hogy készen állsz a beavatásra. Tehát végre elmondom, hogy mi a módja a profihonlapillúzió-keltésnek.

Mielőtt belekezdünk tervezzük meg, hogy milyennek képzeljük el. Én például az elképzelt elrendezést lerajzolom egy papírra, a szineket meg fejben tartom. Ezután vegyük elő a html-szerkesztőnket és hozzuk létre azt a sablont, amit majd használni fogunk. Ezt csináljátok meg úgy, hogy jó legyen, olyan mint azok a lapok amit a honlapotokra kiraktok majd, csak a tartalma legyen valami sablonszöveg.

Én erősen ajánlom azt, hogy ne olyan html-szerkesztőt használjatok, ami WYSIWYG — ez azt jelenti, hogy úgy formázod a szöveget mint a szövegszerkesztőben (Word). Tehát ne az ilyeneket használjátok, hanem normál szövegszerkesztőt, olyat mint a Jegyzettömb. Vagy használj olyanokat, amelyek a forráskódnak a szintaxisát emelik ki (kék tagek, zöld-dőltbetűs megjegyzések, stb.):

• HTML-Kit — Nagyon jó, könnyen használható, sok funkciója van; orbitálisan rohadt nagy hibája, hogy a karakterkódolások ismeretét nem sikerült kisajtolnom belőle
• Crimson Editor — Ennek nem tökéletes a szintaxisismerete, viszont szintén könnyen használható, és lehet vele könnyen FTP-zni.
• Microsoft Visual Studio — Néha használom, de csak html-szerkesztéshez nem érdemes letölteni, használjátok az előbbieket
• Notepad++ — én speciel nem használom, de állítólag nagyon jó, érdemes lehet megnézni; ja és most látom csak, magyarul is elérhető

Na és hogy miért ajánlom ezek használatát? Tapasztalatból. Azért mert, ha ismered és alkalmazod a saját html/css ismereteidet, akkor sokkal profibb honlapot vagy képes létrehozni. Továbbá a WYSIWYG szerkesztők (most az MS FrontPage-re és a Mozilla/Seamonkey html-szerkesztőjére nézek jelentőségteljesen) sokszor nem a legújabb, legmodernebb, legjobb technológiákat használják, hanem mást. És ez sokszor hátrányos. Kisebb (max 3-4 lapból álló) honlapoknál esetleg még szóba jöhetnek, de ott sem ajánlom őket. Egyik fő hibájuk szokott lenni, hogy a CSS-el nem dolgoznak együtt. Esetleg a már említett MS Visual Studio. Régebbi, elavult módzsereket használnak. A profik is kerülik őket.

Ha tehát az elképzelt sablonját a honlapunknak létrehoztuk, akkor ne álljunk meg! Kísérletezz még a színekkel, elrendezéss, hátha találsz olyan megoldást ami még jobb.

Most jöjjön pár konkrét tipp:

HTML <frame>-eket, csak akkor használj, ha valami rendkívül nyomós indokod van rá. Van ugyanis egy nagy hátrányuk. Nem linkelhetők. Vegyük példának az én egyik régebbi honlapomat. Nem tudsz — tudok, tudtam — linket adni a haveroknak, hogy ezt nézzétek meg, itt vannak a programjaim, ugyanis a menüben hiába kattintasz arra, hogy Programok, csak a keret változik, felül az URL nem változik. És ha azt bemásolod egy új böngészőablakba, akkor megintcsak a főoldal jön be. Ez — legalábbis nálam — übereli azt, hogy <frame>-ekkel kevesebb adatot kell letöltenie a böngészőnek. Kit érdekel pár kilobyte?! A logókat meg úgyis a cache-ból tölti be a böngésző.

A betűtípust mindig változtasd meg valamire ami nem Times New Roman. A kezdő honlapok egyik fő ismérve, hogy a betűtípus nincs átállítva. (Én a böngészőmben az alapbeállítást változtattam meg, csakhogy ne lássak több Times New Romant). A legjobbak a talpatlan (sans-serif: Trebuchet MS, Arial, Verdana, Tahoma, stb.) betűtípusok. Fix szélességű — monospace: Courier (New), Lucida Console, stb — betűtípusokat csak akkor használj, ha az tényleg szükséges. Viszont ne feltétlenül egy betűtípus legyen: a címek például lehetnek talpas betűtípusok — serif: Times New Roman, Palatino, Georgia, stb.

Betűméret: Ez egy érdekes kérdés. Sokan szakmabeliek — W3C, egyéb html-szakértők — foglalkoznak vele. A cél ugyanaz: a betűméret olvasható legyen de ne túl nagy. Az eszközök különböznek: az elterjedtebb módszer az, hogy a (normál) betűméretet fix méretre állítják. Például font-size: 11px; Erre az szokott lenni az ellenérv, hogy ha olyan a monitor, akkor szegény júzer nem látja jól a szöveget — megjegyezném, hogy a volt laptopunkon is sokszor nehéz volt olvasni. És ilyen beállítás — fix méret — esetén néhány böngészőben, ha a betűméretet nagyobbra is állítjuk, az nem változik. Csakhogy ezt a tényt sok honlap esetén köszönik szépen, leszarják. Ezért van az arányos betűméret-használat. Ez az, amikor a honlap betűméretei a felhasználó böngészőjében lévő alapértelmezéshez képest vannak állítva: a szöveg 1x-es, a cím meg mondjuk 2x-es. Ezt a módszert preferálja sok szakértő is.

Másik fontos dolog, hogy formázásnál stíluslapokat (css) használjunk. És soha ne használjuk a <font> taget. Az tabu. Miért? Mert ha meg akarjuk változtatni a honlap stílusát, akkor ha <font>-ot használtunk, akkor mindent egyesével kell majd átírni a html fájlokban. CSS használatával, csak azt kell beállítanod, hogy mondjuk a szövegben kiemelt részek ne csak félkövérek, de bordó színűek is legyenek. További leírás by Warren Steel. Elmondom mit tegyél ha mégis <font>-on használsz: vágd magad pofon jó erősen. Áhh, nem így. Erőből. Na így már jó.

Azonos rendeltetésű szöveget formázz ugyanazzal a stílussal. Az előző bekezdésben szapultam egy kicsit a <font>-ot. Helyette azonos rendeltetésű szövegeket formázz így, a class használatával:

Az azonos rendeltetésű bekezdések:

<p class="szerzo-megjegyzese">Szerző megjegyzése ... </p>
Valami más ...
<p class="szerzo-megjegyzese">Szerző megjegyzése ... </p>

És a stíuslap (szürke keretet adunk a szerző megjegyzésének):

.szerzo-megjegyzese {
    border: 1px solid grey;
}

Másik fontos dolog, hogy a színek jók legyenek. Minden szöveg jól olvasható legyen. A színek ne legyenek túl élénkek. Maradjunk a matt színeknél. Villogni se villogjon semmi. A szöveg nem arra való; hanem hogy olvassuk. A háttér lehet színes, de ha szöveg is van fölötte, akkor legyen sötét vagy világos, ne a kettő közötti. A szöveg meg csak maradjon miinél fehérebb vagy feketébb. Ettől csak kicsiben térjünk el, jobban csak a speciális rendeltetésű szövegeknél — hibaüzenet, link.

Háttérképet lehet berakni, de bánjunk vele óvatosan. Ha a szöveg alatt is látszik, akkor az olvasást egy cseppet se nehezítse. Ha esetleg ábrázol is valamit, akkor én megpróbálnám egyszínűvé varázsolni és azt megcsinálni, hogy a legsötétebb és legvilágosabb szín között ne legyen nagy különbség.

A linkekkel ugyanaz van, mint a Times New Roman betűtípussal: jobb esetben is csak a 2000-es évek legelejéről származó honlapokat idézi ha a stílusukat nem állítjuk át egyedire — marad kék, és ha rákattintunk vagy fölé visszük az egeret akkor piros. Ezeket állítsuk át szintén a css-ben, és akár még az aláhúzásokkal is variálhatunk.

Honlapot persze nem csak mi magunk csinálhatunk, hanem le is tölthetünk valahonnan valamit, és azt is felhasználhatjuk a honlapunkhoz — lásd a blogomat. Ez elvileg jó ahogy van. De. Ez az én szubjektív véleményem, de ha én látok valamit egy honlapon amit csak letöltöttek és helyből használnak úgy ahogy van, akkor azt gondolom, hogy ezt így könnyű, egy óvodás is meg tudja csinálni. Ha tehát valami külső dolgot használunk — egy blog, egy wiki, egy chatbox, stb. — akkor azt is próbáljuk meg minél jobban átalakítani. Keressük meg a CSS fájlt és mondjuk célnak tűzzük ki, hogy honlapunk többi részére minél jobban hasonlítson.

Ha a kinézettel megvagyunk akkor foglalkozzunk a tartalommal. A szövegeket mindig ellenőrizzük mielőtt publikáljuk — tartalmilag és nyelvtanilag. Legyen érdekes, tömör és érthető. Az egész honlap pedig áttekinthető. Mondjuk minden oldal tetején szerepeljen ugyanaz az oldaltérkép a honlap főbb oldalaival.

És még egy utolsó, de nagyon fontos tény: Ma már az emberek több mint ¹/₃-a, sőt fele Mozilla Firefox-ot használ, de még mindig sokan Internet Explorert. Tehát a honlapotokat legalább ebben a két böngészőben ellenőrizzétek, és az esetleges hibákat orvosoljátok. Nem, az exploreres netezőket nem érdekli, hogy Foxot használsz és velőből utálod az IE-t. Ha precíz akarsz lenni akkor ellenőrizd Operában is.

Most több minden nem jut eszembe, de ha igen akkor majd frissítem a bejegyzést.

Ha akarod a bejegyzést ellenőrizni, akkor látogass meg valamilyen “profi” honlapot és ellenőrizd: legtöbb tulajdonságuk meg fog annak felelni, amit fentebb én leírtam.

Ha van valami észrevételed, tipped, akkor Kommentálj.

Ha küldtök linket vagy kértek segítséget akkor konkrét honlappal/weblappal kapcsolatban is segíthetek.