HTML & CSS kezdőknek

HTML & CSS kezdők számára (rész 01): Egy első pillantás a HTML, CSS és társai világába.

A bemutató összes videója

Az Hypertext Markup Language a WWW házis nyelve. Ennek a nyelvnek az első verzióját 1992-ben publikálták. Azóta az HTML számos módosításon ment keresztül és jelenleg az 5. verzióban található. (Bár a 5. verzió ténylegesen még nem lett hivatalosan elfogadva, de már viszonylag jól támogatott a legfrissebb böngészőkben).

A HTML egy úgynevezett jelölőnyelv, amellyel struktúrálhatók a tartalmak. Az tartalmak formázásáért a stíluslapok felelősek. További információk ezekről a következő részben.

A HTML fejlesztéséért felelős az World Wide Web Consortium (röviden W3C).

Az W3C webhelyét rendszeresen érdemes meglátogatni, hogy mindig naprakész legyél a webes terület legfrissebb fejleményeiről.

Amikor valaki az HTML-lel foglalkozik, egy fontos kérdés felmerül: Melyik verziót kellene használnom? Természetesen elképzelheted, hogy egy olyan nyelv, mint az HTML folyamatosan frissítve lesz. Új elemek kerülnek hozzáadásra, régiek eltávolításra kerülnek.

Itt vannak a legfontosabb HTML verziók és mérföldkövek:

• HTML (1992. november): Ez volt az első verzió. A fókusz kizárólag a szöveges dokumentumokra irányult.

• HTML 2.0 (1995. november): Most már képek és űrlapelemek is léteznek.

• HTML 4.0 (1997. december): Stíluslapok, keretek és szkriptek kerülnek bevezetésre.

• XHTML 1.0 (2000. január): Ez egy átfogalmazása az XML segítségével az HTML 4.0-nek.

• HTML5 (2009. április): Ez még mindig egy munkaváltozat, szóval még nem hivatalos szabvány.

A további bemutatók a HTML5-re fognak összpontosítani. Mivel az HTML5 végre új lendületet ad az HTML világnak. Valójában a kibővített specifikációnak számos érdekes újítása van. Ezek között találhatók például sokkal kényelmesebb űrlapok, előrehaladási indikátorok, karakterelemek és egy javított dokumentumstruktúra. Azzal a lehetőséggel, hogy a új szabvánnyal videókat be lehet ágyazni az oldalakba plug-in nélkül és van egy húzás és elengedés interfész is.

A HTML5-re vonatkozó első javaslatot a Web Hypertext Application Technology Working Group (WHATWG) már 2004-ben közzétette a Web Applications 1.0 néven.

Még mindig nem lett hivatalos szabvánnyá a HTML5, azonban a böngészőgyártók már számos HTML5 funkciót beépítettek termékeikbe. Ez nem meglepő, hiszen a WHATWG egyike a böngészőgyártóknak, mint például az Apple, a Mozilla és az Opera. A WHATWG alapítása közvetlen reakció volt a Web Consortium részéről lassú szabványfejlesztésre.

Ebben az pontban érdemes megkérdezni, miért döntöttek a böngészőgyártók saját HTML-szabvány kidolgozása mellett. Hiszen az HTML eddigi fejlesztése a W3C kezében volt. A böngészőgyártók szemszögéből az problémák akkor kezdődtek, amikor a W3C az XHTML 1.0-t anélkül alakította át az HTML 4.01-ből, hogy különösebben tartalmilag korrigálta volna. Eredetileg a W3C a XHTML 1-et az XML irányába mutató első lépésként kívánta megállapítani. A fejlesztés végén az XHTML 2-nek kellett volna lennie. Éppen ez az XML-re koncentrálás zavarta meg a böngészőgyártókat. Ezek szemszögéből az XML megközelítés gyakorlatilag irreális és nem tükrözi a felhasználók valódi kívánságait. (Ami a W3C-t természetesen másként látja).

2007 óta a W3C és a WHATWG közösen dolgoznak az HTML5 specifikáción, illetve dolgoznak rajta. Az aktuális HTML5 fejlemények a http://www.w3.org/TR/html5/ címen találhatók.

A következő bemutatókban az említett HTML5-re fogunk összpontosítani.

Formátumozás CSS segítségével

Biztosan már dolgoztál dokumentumsablonokkal Wordben vagy más szövegszerkesztő programokban. Például ha kijelölöd egy sor, kiválaszthatsz egy stílusmeghatározást.

Attól függően, hogy milyen formázást választottak a dokumentumsablonthoz ehhez a stílus formázáshoz, akkor jelenik meg a fejléc. A dokumentumsablon váltásával változik a fejléc megjelenése is.

Mi köze van most a Wordnek az HTML-hez? Az HTML-dokumentumokhoz is vannak stílusmeghatározások. Ezeket a meghatározásokat CSS segítségével lehet definiálni (Cascading Stylesheets). A CSS segítségével például meghatározhatod, hogy a főcímek (h1) 22 pixel méretűek legyenek, és zöld Ariel betűtípusban jelenjenek meg.

Mire lesz szükségetek

A következő bemutatókban fokozatosan megismeritek az HTML-t és a CSS-t. Hogy ti is képesek legyetek weboldalakat létrehozni HTML és CSS alapján, nem szükséges bonyolult szoftvereket használni. Az egyszerűbb esetben a Windows alapértelmezett szerkesztőjét használjátok.

Bár nem túl kényelmes, de elegendő a kezdetekhez. Aki valamivel kényelmesebben szeretné használni, inkább egy "igazi" HTML-szerkesztő után nézzen. Az egyik klasszikus választás természetesen a Dreamweaver.

Ez a szerkesztő azonban nem ingyenes.

HTML és CSS kezdőknek (1. rész): Az HTML, CSS és egyebek első pillantása.

Viszont magánszemélyeknek ingyenes a phase5 (http://www.phase5.info/). Ha tehát a szerkesztőt magáncélokra használnátok, akkor itt találtok egy jó és ingyenes eszközt.

HTML & CSS kezdőknek (1. rész): Egy első pillantás az HTML, CSS és társaira.



Az editoron kívül fontos, hogy a legfontosabb böngészőket is telepítsétek a weboldal teszteléséhez. A böngészők ugyanis időnként eléggé önkényesen értelmezik az HTML-t és a CSS-t. Ezen felül fontos, hogy alaposan teszteljétek az oldalakat különböző böngészőkben. Legalább az Internet Explorer, a Google Chrome és a Mozilla Firefox legyen telepítve. Ideális esetben teszteljétek az oldalt az Opera-böngészőben és a táblagépen/mobiltelefonon is.