Tartalomjegyzék

Bevezetés, szükséges eszközök

A honlapkészítéshez szükség lesz a HTML (HyperText Markup Language = hiperszöveges jelölőnyelv) és a CSS (Cascading Style Sheets = rangsorolt stíluslapok vagy egymásba ágyazott stíluslapok) megismerésére. A HTML és CSS fájlok szöveges fájlok, a weboldalt megjelenítő eszköz (pl. a böngészőnk) ezeket a szöveges fájlokat tölti le az Internetről, értelmezi őket, és az eredmény a megjelenő weboldal lesz. Azt kell megtanulnunk, hogy pontosan mit kell írni az ilyen fájlokba ahhoz, hogy a kívánt megjelenést kapjuk.

A HTML nyelv írja le a weboldal tartalmát, míg a CSS nyelv a weboldal formázásait. Egy példával megvilágítva: az alábbi példa weboldalon csak azt mondtuk meg, hogy legyen rajta egy főcím, egy alcím, egy lista, egy link és két bekezdés. Ezt a HTML nyelv segítségével értük el.
A weboldal, amin csak tartalmi elemek vannak.

Ebben a második példában pedig az előbbi weboldalt formáztuk CSS segítségével: színeket, háttérszínt, betűstílust, szegélyt állítottunk be:
És így néz ki ugyanez a weboldal, amit stíluslappal formáztunk.

Az alábbi példában pedig egyetlen HTML oldalunk van, és erre alkalmazunk négy különböző stíluslapot. Először a csupasz oldalt látjuk, amihez nem tartozik stíluslap. Utána választhatunk, hogy melyik stílussal kívánjuk megjeleníteni ugyanezt az oldalt. A bal oldali menü segítségével megnézhetjük az ehhez a példához tartozó HTML és CSS kódokat is.

Stíluslapok működése.

HTML és CSS kódot írhatunk bármilyen szövegszerkesztővel, de készültek kifejezetten erre a célra programok, amikkel lényegesen leegyszerűsödik a honlapkészítés. Az alábbi táblázat összefoglalja a honlapkészítéshez szükséges ingyenes és ajánlott eszközöket. Sok esetben az ingyenes eszköz megegyezik az általom ajánlott eszközzel. Ha szeretnénk, akkor minden feladatot el tudunk végezni ingyenes eszközökkel.

Honlapkészítéshez szükséges eszközök
Feladat Ingyenes megoldás Ajánlott megoldás
HTML kódszerkesztő program HTML Kit (Windows)
Bluefish (Linux)
Aptana (Windows, Mac, Linux)
HTMLPad (Windows)
Dreamweaver (Windows, Mac)
Coda (Mac)
Bluefish (Linux)
CSS kódszerkesztő program Bluefish (Linux)
Aptana (Windows, Mac, Linux)
HTMLPad (Windows)
Coda (Mac)
CSSEdit (Mac)
Bluefish (Linux)
HTML kódunk helyességét ellenőrző eszköz W3C Markup Validation Service
CSS kódunk helyességét ellenőrző eszköz W3C CSS Validation Service
Böngészők IETester: Az IETester egymás mellett tudja futtatni az Internet Explorer 5.5, 6, 7, 8 és 9 verziókat!
Mozilla Firefox (Windows, Mac, Linux)
Opera (Windows, Mac, Linux)
Safari (Windows, Mac)
Google Chrome (Windows)
Firefox kiterjesztések Web Developer
ColorZilla
Firebug
Linkellenőrző program Xenu (Windows, Linux)
FTP kliens FileZilla (Windows, Mac, Linux)
WinSCP (Windows)
Cyberduck (Mac)
PNG optimalizáló PNGGauntlet (Windows)
Webtárhely Webs: ingyenes, reklámmentes tárhely 3 in 1 HOSTING: saját fizetős, reklámmentes tárhely Magyarországon
Hawkhost Professzionális külföldi tárhely, magyar oldalakhoz is ideális!
Domain regisztráció Nincsen ingyenes. .hu domain regisztráció olcsón
Nemzetközi domain (pl. .com) regisztráció olcsón, biztonságosan
Statisztika a honlapunkra érkező látogatókról Google Analytics

A böngészőkről

A grafikus böngésző az a program, amit éppen most is használ az interneten való barangoláshoz. Mivel honlapunknak a legelterjedtebb böngészőkben nagyjából ugyanúgy kell kinézniük, ezért honlapkészítés során szükségünk lesz arra, hogy a honlapot több különböző böngészővel is megtekintsük, továbbá ismernünk kell, hogy az egyes böngészőket a látogatók milyen arányban használják. Sajnos ugyanis minden böngésző többé-kevésbé máshogyan jeleníti meg a weboldalakat. Öt különböző böngészőmárkáról kell tudnunk, amik összesen lefedik a piac 99%-át: Internet Explorer, Mozilla Firefox, Safari, Opera és Google Chrome.

Az Internet Explorert a Microsoft fejleszti, és minden Windowsban alapértelmezett böngésző, éppen ezért használják ilyen sokan. Jelenleg a 6-os, 7-es és 8-as verziója van használatban az internetezők körében. A 9-es verzió jelentős javulást ígér a szabványok terén.

A Mozilla Firefox egy nyílt forráskódú böngésző, amit a Mozilla Alapítvány fejleszt. Nagyon jó a szabványtámogatása, és rengeteg ingyenes kiegészítő érhető el hozzá, amelyekkel tetszőlegesen testre tudjuk szabni a böngészőt. Mindennapi böngészésre erősen ajánlott.

A Safarit az Apple fejleszti, és a Macintosh számítógépeken alapértelmezett böngésző. Szintén nagyon jó a szabványtámogatása. A Mac felhasználók legnagyobb része Safarit használ.

Az Operát a norvég Opera Software fejleszti. Az Opera is nagyon jól támogatja a szabványokat, és nagyon sok hasznos funkcióval rendelkezik. Viszont világszinten 5% alatti az elterjedtsége, Magyarországon pedig néhány százalék.

A Chrome-ot a Google fejleszti, jelenleg a legdinamikusabban fejlődő böngésző. Várható, hogy a Chrome a következő években jelentős piaci részesedést fog szerezni, hiszen a Google áll mögötte.

A különböző böngészők elterjedtségéről világszinten és Magyarországon itt van egy-egy statisztika. Azonban fel kell hívnom a figyelmet arra, hogy ahány mérés, annyi különböző statisztika létezik, ezért ezek a számok mérőintézetenként eltérnek (de ez a statisztika elég jó alap).

Forrás: Net Applications, 2010. június.

A legelterjedtebb böngészők Magyarországon
Böngésző neve Piaci részesedése
Mozilla Firefox 54,59%
Internet Explorer 31,60%
Google Chrome 9,31%
Opera 3,52%
Safari 0,57%

Forrás: Gemius SA, gemiusTraffic, 2010.06.28 - 2010.07.04, www.rankings.hu

Böngészőmotorok

A böngészőmotor (layout engine vagy rendering engine) olyan szoftver, amely a webes tartalmat és a formázás információit mint formázott tartalmat jeleníti meg a képernyőn. Azért kell tudnunk erről, mert az egyes böngészők által használt böngészőmotortól függ az, ahogyan meg tudják jeleníteni az általunk írt weboldalakat.

A négy legfontosabb böngészőmotor az, amikről érdemes tudni. Az alábbi táblázat foglalja össze, hogy a böngészők melyik böngészőmotort használják.

A legelterjedtebb böngészőmotorok
Böngészőmotor neve Melyik böngésző használja?
Trident Internet Explorer (összes verzió)
Gecko Firefox
WebKit Safari, Google Chrome
Presto Opera

A Gecko, WebKit és Presto szabványtámogatása az élen jár. Ez azt jelenti, hogyha megírunk egy weboldalt, akkor ezzel a három böngészőmotorral szinte ugyanúgy fognak megjelenni.

A Trident viszont már sokkal rosszabbul tartja be a szabványokat. A Trident egyre fejlődik, ahogy a Microsoft megjelenteti az Internet Explorer egy új verzióját. A 6-os Explorerhez készült Trident kezeli legrosszabbul a szaványokat. A 7-es verzió ehhez képest már javulást ért el. A 8-as verziónál ígéri azt a Microsoft, hogy behozzák a lemaradásukat a többi böngészővel szemben, és végre a szabványok szerint fogják megjeleníteni a weboldalakat.

Elkészült weboldalainkat legalább Internet Explorer 7, Internet Explorer 8, Google Chrome és Mozilla Firefox alatt is tesztelnünk kell (ez lefedi a böngészők 90%-át), ami azt jelenti, hogy mindhárom böngészőben nagyjából ugyanúgy kell kinézniük. Ajánlott még Safari és Opera alatt is tesztelni művünket.

Az Internet Explorer és a szabványok

Látható, hogy az Internet Explorer a legelterjedtebb világszinten. Ennek az az oka, hogy a Windows rendszereken alapból csak ez az egy böngésző van, amivel el lehet érni a világhálót, a Windows pedig messze a legelterjedtebb operációs rendszer.

Sajnos azonban azt kell mondani, hogy ugyan az Internet Explorer a világ legelterjedtebb böngészője, de ugyanakkor az IE követi a legrosszabb arányban a HTML-re és a CSS-re vonatkozó szabványokat. Ezek a szabványok (valójában de facto szabványok, mert törvény nem írja elő őket, noha jobb volna) olyan megegyezések, amik lefektették a honlapkészítésre vonatkozó szabályokat. Ezeket a szabályokat a World Wide Web Consortium (W3C) dolgozta ki, és két szereplőre vonatkoznak:

  1. A honlapot elkészítő személyre, azaz ránk. Meg van szabva, hogy milyen HTML és CSS nyelvi elemeket szabad használni ahhoz, hogy abból weboldal is legyen.
  2. A böngészőprogramokra. Nem ér semmit a szabványokat követő kódunk, ha azokat semmilyen program nem képes megjeleníteni. A böngészőprogramoknak minél jobban igazodniuk kellene a W3C által lefektett szabványokhoz.

Tehát kettőn áll a vásár. Nekünk és a böngészőprogramoknak is be kéne tartanunk a szabályokat, különben nagyon nehézzé válik a weboldalkészítés. Egyik eset sem ideális:

  1. Ha a böngészőprogramok betartják a szabványokat, de mi nem követjük őket, hibás kódot írunk, akkor rosszul fogják értelmezni a kódunkat. Ennek eredményeképpen a weboldal sem úgy fog kinézni, ahogyan mi elképzeltük.
  2. Ha helyes, szabványokat betartó kódot írunk, de a böngészőprogramok más szabvány szerint jelenítik meg a weboldalakat, akkor megint csak nem úgy fog kinézni a weboldal, ahogyan elképzeltük. Hiszen mi betartottuk a szabványt, de a megjelenítő program nem.

Jelenleg, a való világban a második eset áll fenn. Vannak a szabványok, és van az Internet Explorer. Hogy pontosak legyünk, az Internet Explorer 7 a HTML szabványnak kb. 73%-át, míg a CSS szabványnak kb. 56%-át tartja be. A 6-os verziónál még rosszabb a helyzet (72% és 51%).

A böngészők szabványkövetéséről egy nagyon jó összefoglaló található itt.

A webes szabványok elfogadtatásáért küzdő Web Standards Project kidolgozott egy olyan tesztet a böngészők számára, amellyel nagyjából pontosan szemléltetni lehet, hogy egy böngésző mennyire követi a HTML és a CSS szabványokat (és ezenkívül még más fontos szabványokat, pl. ECMAscript, DOM, SVG).

  1. Böngészője beállításait állítsa alapértelmezettre, azaz a nagyítás legyen 100%, a betűk mérete legyen normál, legyen bekapcsolva a képek megjelenítése és a Javascript, mert csak így mutat megfelelő eredményt a teszt.
  2. Látogasson el az Acid3 teszt honlapjára.
  3. Hasonlítsa össze a megjelent eredményt az elvárt, hibátlan megjelenítéssel.

Nézzük, hogyan birkóznak meg a böngészők a feladattal (a képekre kattintva teljes méretben láthatók)!

Acid3 teszteredmények
Aktuális stabil verzió képernyőképe Következő, fejlesztés alatt álló verzió képernyőképe
Internet Explorer 7 Acid3 teszteredményeInternet Explorer 7
14/100
Internet Explorer 8 Acid3 teszteredményeInternet Explorer 8 RC1
20/100
Internet Explorer 6 (SP3) Acid3 teszteredményeInternet Explorer 6 SP3
12/100
Firefox 3 Acid3 teszteredményeFirefox 3
71/100
Firefox 3.1 Beta 2 Acid3 teszteredményeFirefox 3.1 Beta 2
93/100
Safari 3.2 Acid3 teszteredményeSafari 3.2
75/100
(Google Chrome 1.0: 79/100)
Safari 4 Developer Preview Acid3 teszteredményeSafari 4 és Google Chrome 2.0 előzetes
100/100
Opera 9.6 Acid3 teszteredményeOpera 9.6
85/100
Opera 10 Alfa 1 Acid3 teszteredményeOpera 10 Alfa 1
100/100

Látszik, hogy az Internet Explorer 6 és 7 egyáltalán nem tudja megjeleníteni az ábrát, és gyenge pontszámot érnek el. A hamarosan megjelenő 8-as verzió is csak 20 pontot teljesít, de legalább már ki tudja rajzolni az ábrát.

Ha magunk is honlapot fogunk készíteni, akkor egyre kevésbé fogjuk szeretni az Internet Explorert. Egyszerűen azért, mert hiába teszünk meg mindent a szabványok betartásáért, és szép weboldalak kialakításáért, ha nem úgy jelenik meg a legelterjedtebb böngészőben, ahogy kellene, és ezért jelentős pluszmunkát kell végeznünk.

Persze nem azt állítom, hogy az IE nem alkalmas az Internet böngészésére, hiszen majdnem mindegyik weboldal megjelenik benne. (Csak nem biztos hogy úgy, ahogy azt a készítője szerette volna!) Most csupán a honlapkészítők szemszögéből vizsgáltuk meg, és ebből a szempontból egy nagyon rosszul megírt program, mert nem támogatja megfelelően a szabványokat.

De akkor mégis miért használják messze a legtöbben az Internet Explorert?

A válasz egyszerű: Windows rendszereken csak ez az egy böngésző található meg alapértelmezettként. A legtöbb felhasználó nem tud arról, hogy az IE mennyire hanyagul kezeli a szabványokat, erről csak a honlapkészítők tudnak. Akkor mégis mit tehetünk ezen helyzet ellen? Például nem használjuk az Internet Explorert. Helyette válasszuk a Firefoxot, Operát, Safarit vagy a Chrome-ot.

Az alternatív böngészők terjedésével mindenki csak jól jár. Mivel az Internet Exploreren kívül az összes mai böngésző majdnem 100%-ban támogatja a szabványokat, ezért a honlapkészítők szemszögéből előnyös az IE használatának visszaszorulása. Másrészt az Internet Explorer felhasználók is profitálnak abból, ha csökken az IE népszerűsége. A 7-es változat újdonságait azért kellett létrehozni, mert a Firefox egyre nagyobb piaci részesedést szerzett, és muszáj volt valahogyan jobbá tenni az IE-t. Ha nem lenne Firefox, talán még most sem lenne IE7!

Ezért biztatom az Olvasót, hogy minél előbb kezdjen el használni akármilyen böngészőt, csak ne az Internet Explorert! Ezzel magunknak, honlapkészítőknek segítünk. Az alternatív böngészők közül pedig a Firefoxot ajánlott használni, mert több száz kiterjesztés létezik hozzá, amivel szó szerint olyan böngészőt tudunk belőle varázsolni, amilyet csak akarunk.

Figyelem! Nemcsak grafikus böngészővel lehet elérni a világhálót! - Weblapok akadálymentesítése

Talán nem sokan tudják, hogy egy honlapot nem csak egy grafikus böngésző tud értelmezni, amilyen az Internet Explorer vagy a Firefox. Honlapunkat egyéb más eszközök is meglátogathatják, és ezen eszközök számára akadálymentesíteni kell honlapunkat.

A honlapok akadálymentesítése magában foglalja a csökkent képességű személyek által használt eszközök, szoftverek támogatását, és ezen túl minden olyan egyéb eszköz, szoftver támogatását, amelyek meglátogathatják honlapunkat a grafikus böngészőn kívül: keresőrobotok, PDA-k, mobiltelefonok, nyomtatók (nyomtatóbarát oldal), projektorok, csak szöveget megjelenítő böngészők, honlapot felnagyítani képes eszközök.

Hogyan böngésznek a csökkent képességű személyek az Interneten?

Kik azok a személyek, akikről beszélünk?

Hogyan böngészhetnek?

Miért kell foglalkozni az akadálymentesítéssel?

Egyértelmű, hogy milyen hasznos a keresőrobotok támogatása, de miért kell nekünk támogatnunk a csökkent képességűeket? Az okok a következők:

  1. Több államban törvény írja elő a közintézmények és kormányzati szervek webes felületeinek akadálymentesítését. Például az Egyesült Államok közintézményeinek akadálymentesítését előíró rendeletet 508-as szakasz néven ismerjük. Ilyen eset is előfordult már: 2000-ben egy ausztráliai vak nő pert nyert a Sydney-i olimpiai játékok hivatalos oldalát készítő cég ellen, mert az oldal nem támogatta a képernyőfelolvasó szoftvereket. Kétségtelen azonban, hogy ezek a törvények csak a közintézmények és kormányzati szervek oldalaira vonatkoznak, magánoldalakra nem. És Magyarországon pedig egyáltálán nincs ilyen törvény, azonban már itthon is számos területen kötelező az akadálymentesítés, miért ne tennénk meg ugyanezt az Interneten is?
  2. Morális okokból. Tim Berners-Lee, az Internet feltalálója és a W3C igazgatója a következőket mondta:
    A web ereje az egyetemességében van. Elérhető bárki számára, tekintet nélkül az esetleges akadályozottságra.
  3. Kereskedelmi okokból. Sokkal többen használják fogyatékkal élők az Internetet, mint gondolnánk. Ha egyszer a honlapja nagyobb látogatottságú lesz, akkor már több száz, több ezer ilyen látogató számára kell használhatóvá tenni az oldalt! Továbbá, ahogyan már beszéltünk róla, az akadálymentesített honlap jó a keresőknek, PDA-knak, mobiltelefonoknak, nyomtatóknak stb. A hozzáférhető webtartalom számos embert segít, nem csak a fogyatékosokat. A tényleges világban a rámpákat a biciklisek, a babakocsit használók és a tolókocsiban közlekedők is használják.

A weblapok akadálymentesítése nem nehéz!

A mindenki számára elérhető Internettel kapcsolatos szabványok és technológiák kidolgozásával a WAI (Web Accessibility Initiative - Web elérhetőségét támogató kezdeményezés), a W3C alszervezete foglalkozik. Ez a szervezet készítette el a Web Content Accessibility Guidelines (WCAG), azaz a webes tartalmak hozzáférési irányelvei című dokumentumot. A legújabb W3C ajánlás 2008. decembere óta a WCAG 2.0.

Néhány tévedés az akadálymentesítéssel kapcsolatban:

Az oktatóanyag folyamán a legtöbb fejezetben ilyen blokkokat fogunk találni. Ezek a blokkok azokat a lépéseket emelik ki, amivel biztosítható az adott fejezetben megtanult technikák akadálymentesítésnek megfelelő használata. Ez a legtöbb esetben csak néhány extra attribútum és címke használatát teszi szükségessé, és egyáltalán nem nehéz.

Ellenőrző eszközök

Elkészült vagy készülő honlapunkat több szempontból is ellenőriznünk kell. Az akadálymentesítésnek való megfelelést vizsgálja a WAVE és a Cynthia Says™ Portal.

A HTML kódunk helyességét vizsgálja a W3C HTML validator, CSS kódunk helyességét pedig a W3C CSS validator.

Követendő módszerek

Az alábbiakban röviden a követendő módszereket sorolom fel. Az egyes fejezetekben külön kitérünk majd rájuk, és a miértekre is fény derül. Egyelőre jegyezzük meg ezt a felsorolást, tegyük el magunknak, és honlapunk elkészítésekor tartsuk be őket!

Ajánlott linkek

A böngészőhasználat megoszlása márkák szerint: http://marketshare.hitslink.com/report.aspx?qprid=0

A World Wide Web Consortium honlapja: http://www.w3.org/

A Web Standards Project honlapja: http://www.webstandards.org/

Több IE verzió egy gépen: http://tredosoft.com/Multiple_IE

Számtalan bug (hiba) az Internet Explorer 6 böngészőben: http://www.positioniseverything.net/explorer.html

Számtalan bug az Internet Explorer 7 böngészőben: http://www.gtalbot.org/BrowserBugsSection/MSIE7Bugs/

WAI (Web Accessibility Initiative - Web elérhetőségét támogató kezdeményezés): http://www.w3.org/WAI/

WAVE akadálymentességet ellenőrző eszköz: http://wave.webaim.org/

Cynthia Says™ Portal akadálymentességet ellenőrző eszköz: http://www.contentquality.com/

Weblabor, akadálymentes weboldalak I. http://weblabor.hu/cikkek/akadalymentesweb1

Weblabor, akadálymentes weboldalak II. http://weblabor.hu/cikkek/akadalymentesweb2

Kiváló oktatás akadálymentes honlapok készítéséhez: http://www.webaim.org/

Tartalomjegyzék Impresszum, szerzői jogok