Ez a számláló a poszt nézettségét mutatja. Mindenképp olvasd el ezt a posztot a részletekért.

Webes szabványok

Ismerd meg a webes szabványok világát, és tedd jobbá a webet!

Az itt található ingyenes leírásokkal megismerheted a webes szabványokat, és a legjobb módszereket a webfejlesztéshez.

Töltsd le az Operát

Hirdetés

Hírcsatornák

Tartalom

A kezdetek
  1. Bevezető a webes szabványokba
A szabványok világa
  1. Az internet és a web története, a webes szabványok evolúciója
  2. Hogyan működik az internet?
  3. A webes szabványok modellje — HTML, CSS és JavaScript
  4. Szép álom, de mi a valóság?
Webdesign fogalmak
  1. Információs Architektúra — egy website tervezése
  2. Mi kell egy jó weblaphoz?
  3. A színek elmélete
  4. Egy site keretének felépítése
  5. Színsémák és designtervek
  6. Tipográfia a weben
HTML alapok
  1. A HTML alapjai
  2. A HTML head eleme
  3. Megfelelő doctype választása a HTML dokumentumokhoz
A HTML felépítése
  1. Szöveges részek megjelölése HTML-ben
  2. HTML listák
  3. Képek a HTML-ben
  4. HTML hivatkozások — építsük fel a webet!
  5. HTML táblázatok
  6. HTML űrlapok — az alapok
  7. Kevéssé ismert szemantikus elemek
  8. Általános tárolók — a div és a span elemek
  9. Több lap létrehozása navigációs menüvel
  10. A HTML validálása
Hozzáférhetőség
  1. A hozzáférhetőség alapjai
  2. A hozzáférhetőség tesztelése
CSS
  1. CSS alapok
  2. Öröklődés és kapcsolódás
  3. Szöveg stílusozása CSS-sel
  4. A CSS elrendezés modell — box, border, margin és padding
  5. Háttérképek CSS-ben
  6. Listák és hivatkozások stílusozása
  7. Táblázatok stílusozása
  8. Űrlapok stílusozása
  9. Float és clear
  10. Statikus és relatív pozícionálás CSS-ben
  11. Fix és abszolút pozícionálás CSS-ben

Hozzászólások

  • Tamararara: A blog.hu igazán elgondolkodhatna rajta, hogy miért mennek el innen ennyien. :S (2009.12.11. 14:13) Költözés
  • Janus12 (törölt): Király a leírás! (2009.09.09. 13:36) Általános tárolók — a div és a span elemek
  • Karbonade: @Edorn: Szerintem erről a 33-as leírásban lesz szó (táblázatok stílusozása). Amíg nincs hozzá ford... (2009.06.25. 16:38) HTML táblázatok
  • Karbonade: @dreambarker: Igazából időhiány miatt lassult le, ha megint lesz rá időm, folytatom a fordítást. (2009.06.10. 15:01) Megfelelő doctype választása a HTML dokumentumokhoz
  • kajla: @Karbonade: Köszönöm, ez nagy megtiszteltetés! :) (2009.04.03. 22:30) Segíts te is a fordításban!
  • anyu(ha): További olvasnivalóhoz ajánlat: css.maxdesign.com.au/index.htm (2008.10.15. 19:25) HTML listák
  • Karbonade: Természetesen nem a nép butítása a célom, éppen ellenkezőleg :) Úgyhogy ha valaki vállalja a lekto... (2008.09.19. 17:43) A HTML <head> eleme
  • HTML Info: Mivel a trackback nem jutott idáig, csak így gyalog: htmlinfo.hu/2008/09/17/webszabvany-blog/ (2008.09.17. 19:13) A HTML alapjai
  • lacacsoki: Sommerset nem is olyan borús ha van cider... köszi a hasznos postot! Üdv :D (2008.09.17. 13:55) Tipográfia a weben
  • Karbonade: Köszi, javítom. Sőt az egyes szám-többes szám sem egyezik. (2008.09.03. 10:38) Egy site keretének felépítése

Címkék

Megfelelő doctype választása a HTML dokumentumokhoz

Karbonade • 2008.09.24

Ez a bejegyzés a webes szabványok tizennegyedik leírása. Az eredeti, angol nyelvű cikket Roger Johansson írta.

Bevezető

A 13. leírásban a HTML dokumentum head elemének anatómiájáról volt szó, amelyben részletesen megnéztük, hogy milyen különböző elemeket tartalmazhat a head, és ezek mire valók. Ebben a leírásban részletesebben megnézzük a doctype elemet, megmutatjuk, mire szolgál, hogyan segíthet a HTML validálásában, hogyan választható ki a megfelelő doctype típus a dokumentumhoz, és megnézzük az XML deklarációt, amelyre ritkán ugyan, de szükséged lehet.

Első a doctype

A legelső dolog, amit minden HTML dokumentumban definiálnod kell, az egy DTD deklaráció. Ha még soha senkitől nem hallottál a DTD deklarációról, ne izgulj. A dolgok egyszerűsítése érdekében gyakran úgy hivatkoznak erre, hogy „doctype” — én is így fogom hívni a leírás további részében.

Talán elgondolkodtál azon, hogy mi lehet ez a „DTD” vagy „doctype”. A DTD a „Document Type Definition”, azaz a dokumentum típus definíció rövidítése, és sok más dolog mellett ez adja meg azt, hogy milyen elemeket és attribútumokat használhatsz a HTML egyes részeiben — bizony, a mai weben több különböző HTML verzió is használatban van, de ezen ne aggódj egyelőre, végül is csak az egyikkel kell majd közülük foglalkoznod.

A doctype két dologra használható, a szóban forgó szoftvertől függően:

  1. A webböngészők arra használják, hogy meghatározzák a renderelési módot a weblap megjelenítéséhez (ezekről később még lesz szó).
  2. A jelölés validátorok a doctype alapján határozzák meg, hogy milyen szabályokat kell ellenőrizniük a dokumentumban (erről is lesz még szó bővebben).

Mindkét megközelítés fontos lesz a számodra, de különböző módokon, ezeket fogjuk a leírás további részében bővebben megmagyarázni.

Itt egy példa:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"

        "http://www.w3.org/TR/html4/strict.dtd">

Ez így most elsőre teljesen értelmetlennek tűnhet a számodra, úgyhogy engedd meg, hogy elmagyarázzam a lehető legegyszerűbben, hogy hogyan épül fel a fenti elem. Ha kíváncsi vagy egy sokkal részletesebb magyarázatra, amelyben minden egyes karakter funkcióját megmagyarázzák, akkor olvasd el a !DOCTYPE cikket (angolul).

A doctype legfontosabb részei az idézőjelekkel határolt két darab string. A "-//W3C//DTD HTML 4.01//EN" azt jelöli, hogy ezt a DTD dokumentumot a W3C adta ki, a DTD a HTML 4.01-es verzióját írja le, és hogy a DTD-ben használt nyelv az angol (EN).

A második string, a "http://www.w3.org/TR/html4/strict.dtd" egy URL, amely a felhasznált DTD dokumentumra mutat.

Bár a doctype elég különösnek tűnik, szükség van rá a HTML és XHTML specifikációkhoz. Ha nem adod meg, akkor biztosan validálási hibát fogsz kapni, ha ellenőrzöd a dokumentumod jelöléseinek érvényességét a W3C validátorával, vagy más olyan eszközzel, amely HTML dokumentumokban keres hibákat. Egyes böngészőkben ez a funkció alapból benne van, míg más böngészőkben egy kiterjesztéssel lehet telepíteni.

Doctype sniffing és renderelési módok

Ha nem adod meg a doctype elemet, a böngészők ebben az esetben is megpróbálják értelmezni és feldolgozni a dokumentumot — az összes értelmetlen zagyvaságot is meg kell próbálniuk feldolgozni, amit a weben csak találni lehet, szóval nem lehetnek túlságosan válogatósak. Viszont könnyen lehet, hogy doctype nélkül nem olyan eredményt fogsz kapni, mint amilyenre számítottál, mégpedig a „doctype sniffing”, vagyis a doctype „kiszagolása” miatt.

A 21. századi böngészők túlnyomó része minden megnyitott HTML dokumentumnál megpróbálják a doctype segítségével eldönteni, hogy a dokumentum szerzője vajon figyelembe vette-e a webes szabványokat a HTML és a CSS megírásakor, vagy nem foglalkozott ezekkel.

Ha olyan doctype-ot találnak, amely szerint a dokumentum helyesen van kódolva, akkor egy ún. „szabványos módot” fognak használni a lap megjelenítésekor. Szabványos módban a böngészők igyekeznek a lapot a CSS specifikáció szerint elrendezni — ilyenkor ugyanis megbíznak a fejlesztőben, és feltételezik, hogy az oldal készítésekor tudta, hogy mikor mit csinál.

Másrészről, ha egy elavult vagy helytelen doctype-ot találnak, akkor átváltanak egy ún. „Quirks módba”, amely sokkal inkább kompatibilis a régi módszerekkel és a régi böngészőkkel. A Quirks mód azt feltételezi, hogy a dokumentum régi, és nem a jelenlegi webes szabványok szerint készült — a weblap így is meg fog jelenni, de jóval több számítási kapacitást igényelhet, és nagyobb valószínűséggel kapsz furcsa vagy ronda megjelenést, amikor nem is számítasz rá.

A különbség elsősorban abban van, hogy a böngésző hogyan értelmezi a CSS-t, és csak néhány esetben vonatkozik a konkrét HTML értelmezésére. Webfejlesztőként vagy webdesignerként akkor kaphatod az összes böngészőben a leginkább megegyező eredményeket, ha megbizonyosodsz róla, hogy minden böngésző a szabványos módot használja a megjelenítéshez, és megfelelő doctype-ot használsz!

Validálás

Amint azt korábban is említettem, a doctype-ot a validátorok is felhasználják; erről többet is meg fogsz tudni a sorozat későbbi részeiből. Jelenleg elég, ha annyit tudsz, hogy a validátor ellenőrzi a HTML dokumentum szintakszisát, és megnézi, hogy van-e benne valamilyen hiba. A validátor pedig a doctype alapján dönti el, hogy milyen szabályokat kell ellenőriznie a dokumentumban. Ez hasonló ahhoz, mint amikor a helyesírás-ellenőrzőnek megmondod, hogy milyen nyelven van megírva a dokumentum. Ha nem mondod meg neki, akkor nem fogja tudni azt sem, hogy milyen helyesírási és nyelvtani szabályokat kellene ellenőriznie.

Doctype választása

Szóval, most már tudod, hogy meg kell adnod egy doctype-ot, és azt is tudod, hogy ez mire szolgál, de honnan fogod tudni azt, hogy melyiket használd? Valójában elég sok van belőlük. Sőt, ha valami igazán komoly dolgot csinálsz, még saját doctype-ot is készíthetsz magadnak. De most nem fogunk belemenni a különböző fajtájú doctype-okba, hanem megpróbálom számodra a dolgokat egyszerű és érthető szinten tartani.

Ha a dokumentumod HTML, használd ezt:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"

       "http://www.w3.org/TR/html4/strict.dtd">

Ha a dokumentumod XHTML, használd ezt:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Megjegyzés: a „valódi” XHTML-t a webböngészőnek XML-ként kell küldeni, de ennek a részletei, hogy mikor és hogyan teheted ezt meg, valamint hogy ez milyen változásokat okoz, túlmutatnak a jelenlegi cikk keretein.

Mindkét doctype használatával a böngésző a szabványos módot fogja használni a dokumentum értelmezésekor. A leglátványosabb hatás, amit a dokumentum készítésekor láthatsz, miután beállítottad a doctpye-ot, hogy sokkal következetesebbek lesznek az CSS változtatása után az eredményeid. Ha más lehetséges doctpye-okra is kíváncsi vagy, amelyeket a dokumentumodhoz használhatsz, akkor nézd meg a W3C listáját a javasolt DTD típusokkal.

Talán észrevetted, hogy mindkét doctype, amelyet itt javasoltam, az „strict” (vagyis „szigorú”). Ez talán ijesztően hangzik a számodra, de nem az.

Mind a HTML-nek, mind az XHTML-nek vannak szigorú (strict) és átmeneti (transitional) változatai is. A „szigorú” jelen esetben azt jelenti, hogy a doctype kevesebb megjelenítési jelölést engedélyez, mint az átmeneti változat. Viszont azoknak a megjelenítési jelöléseknek, amelyek nem engedélyezettek, amúgy sincs semmi keresnivalójuk a dokumentumban, mivel a HTML-t a struktúra és a tartalom meghatározására használhatod, és a CSS-ben definiálhatod ezeknek a megjelenését. A szigorú doctype segít neked ebben, mivel a validátor figyelmeztetni fog, ha véletlenül talál egy becsúszott megjelenítési elemet vagy attribútumot a kódodban.

XML deklaráció

Korábban már említettem, hogy a doctype kell legyen a legelső elem a HTML dokumentumokban. Nos, ez valójában csak egy egyszerűsített változata a valóságnak. Meg kell még említenünk az XML deklarációt is.

Egyes XHTML dokumentumokban a következő kódrészletet láthatod közvetlenül a doctpye előtt:

<?xml version="1.0" encoding="UTF-8"?>

Ezt XML deklarációnak hívják, és ha jelen van, akkor mindig a doctype előtt kell legyen.

Az Internet Explorer 6-os verziójának van ezzel egy kis problémája: ennek hatására ugyanis átvált Quirks módba, ami — mint azt már korábban említettem — nem igazán kívánatos.

Szerencsére az XML deklaráció az esetek többségében nem kötelező, kivéve abban az esetben, ha az XHTML dokumentumaidat valóban XML formában küldöd a böngészőknek (lásd a megjegyzést az XHTML-nél), *és* más karakterkódolást használsz, mint az UTF-8, *és* a kiszolgálód nem küld egy HTTP fejlécet, amely megadná a karakterkódolást.

Annak a valószínűsége, hogy ez mind egyszerre bekövetkezik, eléggé elenyésző, így a legegyszerűbb mód arra, hogy megoldhasd az Internet Explorer problémáját, az az, hogy egyszerűen kihagyod az XML deklarációt. Azért nehogy elfelejtsd a doctype-ot!

Összefoglaló

Mindig add meg valamelyik itt említett doctype-ot, mint a HTML dokumentumaid első eleme. Ezzel meggyőződhetsz arról, hogy a validátorok tudni fogják, milyen verziójú HTML-t használsz, így megfelelően tudják neked jelezni a hibákat, amelyeket a dokumentumaidban találnak. Ugyancsak segítenek abban, hogy a modern webböngészők szabványos módot használjanak az oldalad megjelenítéséhez, ami sokkal következetesebb eredményeket biztosít a dokumentum stílusozásakor a CSS segítségével.

Tesztkérdések

Íme néhány kérdés, amelyeket a leírás elolvasása után meg kell tudnod válaszolni:

  • Mi a két legfontosabb célja a doctype beillesztésének a HTML dokumentumokba?
  • Mik az előnyei annak, ha „szigorú” (strict) doctype-ot használsz az átmeneti (transitional) helyett?
  • Miért problémás az XML deklaráció?
  • Ebben a leírásban nem említettem a frameset doctype-ot — nézz utána, hogy ez mire jó, és miért kell elkerülni.

További olvasnivaló

A szerzőről

Roger Johansson

Roger Johansson webes szakértő, és elsősorban a webes szabványokkal, a hozzáférhetőséggel és használhatósággal foglalkozik. A napjait a svéd NetRelations webes tanácsadó cégnél tölti weboldalak fejlesztésével, míg esténként és a hétvégeken a személyes oldalaira, a 456 Berea Street és a Kaffesnobben oldakon ír cikkeket.

Ha éppen nem ül a számítógépe előtt, Roger gyakran található meg a kertjében, amint éppen a körmeit koszolja össze, vagy a vadonban, halászás közben.

A bejegyzés trackback címe:

http://webszabvany.blog.hu/api/trackback/id/tr5677869

Kommentek:

A hozzászólások a vonatkozó jogszabályok értelmében felhasználói tartalomnak minősülnek, értük a szolgáltatás technikai üzemeltetője semmilyen felelősséget nem vállal, azokat nem ellenőrzi. Kifogás esetén forduljon a blog szerkesztőjéhez. Részletek a Felhasználási feltételekben.

dreambarker 2009.06.10. 14:54:54

Kár, hogy már jó ideje leállt a blog írása... Viszonylag gyakorlott fejlesztőként is találtam az eddigiekben egynéhány hasznos információt.

Karbonade · http://magyaropera.blog.hu 2009.06.10. 15:01:07

@dreambarker: Igazából időhiány miatt lassult le, ha megint lesz rá időm, folytatom a fordítást.